Feat/new navbar

src/navbar/README.en-US.md

@@ -1,19 +1,18 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Navbar Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 animation | Boolean | true | \- | N
-background | String | - | background | N
-custom-style `v0.25.0` | String | - | \- | N
+capsule | Slot | - | \- | N
+custom-style | String | - | \- | N
 delta | Number | 1 | \- | N
 external-classes | Array | - | `['t-class', 't-class-title', 't-class-left-icon', 't-class-home-icon', 't-class-capsule']` | N
 fixed | Boolean | true | \- | N
-home-icon | String | - | homeIcon | N
-left-icon | String | - | \- | N
+left | Slot | - | left area of navbar | N
+left-arrow | Boolean | false | \- | N
 title | String / Slot | - | page title | N
 title-max-length | Number | - | \- | N
 visible | Boolean | true | \- | N
@@ -25,5 +24,4 @@ name | params | description
 complete | \- | \-
 fail | \- | \-
 go-back | \- | \-
-go-home | \- | \-
 success | \- | \-

src/navbar/README.md

@@ -30,35 +30,35 @@ isComponent: true
 
 {{ back-home }}
 
-### 自定义品牌导航栏
+### 带搜索导航栏
 
-{{ brand }}
+{{ search }}
 
-### 自定义图片导航栏
+### 带图片导航栏
 
 {{ img }}
 
-### 品牌超长文字导航栏
+### 标题左对齐
 
-{{ brand-long }}
+{{ left-title }}
 
-### 自定义导航胶囊
+### 自定义颜色
 
-{{ custom-capsule }}
+{{ custom-color }}
 
 ## API
 ### Navbar Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 animation | Boolean | true | 是否添加动画效果 | N
-background | String | - | 背景 | N
+capsule | Slot | - | 左侧胶囊区域 | N
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 delta | Number | 1 | 后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack，只会触发一个 goback 事件供自行处理。 | N
 external-classes | Array | - | 组件类名，分别用于设置组件外层元素、标题、左侧图标、首页图标、胶囊等元素类名。`['t-class', 't-class-title', 't-class-left-icon', 't-class-home-icon', 't-class-capsule']` | N
 fixed | Boolean | true | 是否固定在顶部 | N
-home-icon | String | - | 首页图标地址。值为 '' 或者 undefiend 则表示不显示返回图标，值为 'circle' 表示显示默认图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址 | N
-left-icon | String | - | 左侧图标地址，值为 '' 或者 undefiend 则表示不显示返回图标，值为 'arrow-left' 表示显示返回图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址 | N
+left `0.26.0` | Slot | - | 左侧内容区域 | N
+left-arrow `0.26.0` | Boolean | false | 是否展示左侧箭头 | N
 title | String / Slot | - | 页面标题 | N
 title-max-length | Number | - | 标题文字最大长度，超出的范围使用 `...` 表示 | N
 visible | Boolean | true | 是否显示 | N
@@ -70,5 +70,4 @@ visible | Boolean | true | 是否显示 | N
 complete | \- | navigateBack 执行完成后触发（失败或成功均会触发）
 fail | \- | navigateBack 执行失败后触发
 go-back | \- | delta 值为 0 时，点击返回，触发该事件
-go-home | \- | 点击 Home 触发
 success | \- | navigateBack 执行成功后触发

src/navbar/__test__/__snapshots__/demo.test.js.snap

@@ -3,95 +3,105 @@
 exports[`Navbar Navbar back demo works fine 1`] = `
 <back>
   <t-navbar
-    leftIcon="chevron-left"
-    tClassLeftIcon="left-icon-back"
-    tClassTitle="nav-title"
-    title="标题"
+    leftArrow="{{true}}"
+    title="标题文字"
   />
 </back>
 `;
 
 exports[`Navbar Navbar back-home demo works fine 1`] = `
 <back-home>
   <t-navbar
-    homeIcon="home"
-    leftIcon="chevron-left"
-    tClassHomeIcon="home-icon"
-    tClassLeftIcon="left-icon-back"
-    tClassTitle="nav-title"
-    title="标题"
-    bind:go-home="onGoHome"
-  />
+    title="标题文字"
+  >
+    <wx-view
+      class="custom-capsule"
+      slot="capsule"
+    >
+      <t-icon
+        class="custom-capsule__icon"
+        name="chevron-left"
+        size="20"
+      />
+      <t-icon
+        class="custom-capsule__icon"
+        name="home"
+        size="20"
+      />
+    </wx-view>
+  </t-navbar>
 </back-home>
 `;
 
 exports[`Navbar Navbar base demo works fine 1`] = `
 <base>
   <t-navbar
     tClassTitle="nav-title"
-    title="标题"
+    title="标题文字"
   />
 </base>
 `;
 
-exports[`Navbar Navbar brand demo works fine 1`] = `
-<brand>
+exports[`Navbar Navbar custom-color demo works fine 1`] = `
+<custom-color>
   <t-navbar
-    leftIcon="slot"
-  >
-    <span
-      class="slot-left"
-      slot="left-icon"
-    >
-      品牌名称
-    </span>
-  </t-navbar>
-</brand>
+    class="custom-navbar"
+    leftArrow="{{true}}"
+    title="标题文字"
+  />
+</custom-color>
 `;
 
-exports[`Navbar Navbar brand-long demo works fine 1`] = `
-<brand-long>
-  <t-navbar
-    leftIcon="slot"
-    tClassLeft="external-class-left"
-    tClassLeftIcon="left-icon-slot"
-  >
-    <span
-      class="long-brand"
-      slot="left-icon"
+exports[`Navbar Navbar img demo works fine 1`] = `
+<img>
+  <t-navbar>
+    <wx-view
+      class="custom-left"
+      slot="left"
     >
-      品牌名称最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长最长
-    </span>
+      <t-image
+        src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/mobile/%E5%8D%A0%E4%BD%8D%E5%9B%BE%402x.png"
+        tClass="custom-image"
+      />
+    </wx-view>
   </t-navbar>
-</brand-long>
+</img>
 `;
 
-exports[`Navbar Navbar custom-capsule demo works fine 1`] = `
-<custom-capsule>
-  <t-navbar>
+exports[`Navbar Navbar left-title demo works fine 1`] = `
+<left-title>
+  <t-navbar
+    class="block"
+    leftArrow="{{true}}"
+    title="标题居中"
+  />
+  <t-navbar
+    leftArrow="{{true}}"
+  >
     <wx-view
-      class="capsule"
-      slot="capsule"
+      class="custom-title"
+      slot="left"
     >
-      自定义胶囊
+      标题左对齐
     </wx-view>
   </t-navbar>
-</custom-capsule>
+</left-title>
 `;
 
-exports[`Navbar Navbar img demo works fine 1`] = `
-<img>
+exports[`Navbar Navbar search demo works fine 1`] = `
+<search>
   <t-navbar
     leftIcon="slot"
-    tClassLeft="external-class-left"
   >
-    <t-image
-      class="slot-left"
-      mode="aspectFill"
-      slot="left-icon"
-      src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/mobile/%E5%8D%A0%E4%BD%8D%E5%9B%BE%402x.png"
-      tClass="img"
-    />
+    <wx-view
+      class="search-box"
+      slot="left"
+    >
+      <t-search
+        placeholder="搜索内容"
+        shape="round"
+      />
+    </wx-view>
   </t-navbar>
-</img>
+</search>
 `;

src/navbar/__test__/__snapshots__/index.test.js.snap

@@ -5,7 +5,6 @@ exports[`navbar :base 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--visible-animation t-class"
-      style=""
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -16,7 +15,11 @@ exports[`navbar :base 1`] = `
       >
         <wx-view
           class="t-navbar__left t-class-left"
-        />
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
         <wx-view
           class="t-navbar__center t-class-center"
         >
@@ -37,7 +40,6 @@ exports[`navbar :base 2`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide-animation t-class"
-      style=""
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -48,7 +50,11 @@ exports[`navbar :base 2`] = `
       >
         <wx-view
           class="t-navbar__left t-class-left"
-        />
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
         <wx-view
           class="t-navbar__center t-class-center"
         >
@@ -69,7 +75,6 @@ exports[`navbar :base 3`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide t-class"
-      style=""
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -80,7 +85,11 @@ exports[`navbar :base 3`] = `
       >
         <wx-view
           class="t-navbar__left t-class-left"
-        />
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
         <wx-view
           class="t-navbar__center t-class-center"
         >
@@ -101,7 +110,6 @@ exports[`navbar :fixed 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--visible-animation t-class"
-      style=""
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -112,7 +120,11 @@ exports[`navbar :fixed 1`] = `
       >
         <wx-view
           class="t-navbar__left t-class-left"
-        />
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
         <wx-view
           class="t-navbar__center t-class-center"
         >
@@ -133,18 +145,21 @@ exports[`navbar :menu button 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed  t-class"
-      style="--narbar-padding-top:-7px;;--navbar-right:414px;;--capsule-height:10px;;--capsule-width:40px;;--navbar-height:44px;"
     >
       <wx-view
         class="t-navbar__placeholder"
       />
       <wx-view
         class="t-navbar__content"
-        style=""
+        style="--narbar-padding-top:-7px;;--navbar-right:414px;;--capsule-height:10px;;--capsule-width:40px;;--navbar-height:44px;"
       >
         <wx-view
           class="t-navbar__left t-class-left"
-        />
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
         <wx-view
           class="t-navbar__center t-class-center"
         >

src/navbar/__test__/demo.test.js

@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['back', 'back-home', 'base', 'brand', 'brand-long', 'custom-capsule', 'img'];
+const mapper = ['back', 'back-home', 'base', 'custom-color', 'img', 'left-title', 'search'];
 
 describe('Navbar', () => {
   mapper.forEach((demoName) => {