feat(drawer): using new style (#1147)

* feat(drawer): using new style

* feat(drawer): update style and demo

src/drawer/README.en-US.md

@@ -5,14 +5,16 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-close-on-overlay-click | Boolean | true | \- | N
-custom-style `v0.25.0` | String | - | \- | N
+close-on-overlay-click | Boolean | undefined | \- | N
+custom-style | String | - | \- | N
 destroy-on-close | Boolean | false | \- | N
+footer | Slot | - | \- | N
 items | Array | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts) | N
 placement | String | right | options：left/right | N
 show-overlay | Boolean | true | \- | N
+title | String / Slot | '' | \- | N
 visible | Boolean | false | \- | N
-z-index | Number | 11500 | \- | N
+z-index | Number | - | \- | N
 
 ### Drawer Events
 

src/drawer/README.md

@@ -42,11 +42,13 @@ CSS 变量名|说明
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 close-on-overlay-click | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
-custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+custom-style | String | - | `v0.25.0`。自定义组件样式 | N
 destroy-on-close | Boolean | false | 抽屉关闭时是否销毁节点 | N
+footer | Slot | - | `v0.29.0`。抽屉的底部 | N
 items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[] ` `interface DrawerItem { title: string; icon: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts) | N
 placement | String | right | 抽屉方向。可选项：left/right | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N
+title | String / Slot | '' | `v0.29.0`。抽屉的标题 | N
 visible | Boolean | false | 组件是否可见 | N
 z-index | Number | 11500 | 抽屉层级，样式默认为 11500 | N
 

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

@@ -7,6 +7,8 @@ exports[`Drawer Drawer base demo works fine 1`] = `
   >
     <t-button
       block="{{true}}"
+      size="large"
+      theme="primary"
       variant="outline"
       bind:tap="openDrawerBase"
     >
@@ -23,13 +25,93 @@ exports[`Drawer Drawer base demo works fine 1`] = `
 </base>
 `;
 
-exports[`Drawer Drawer icon-drawer demo works fine 1`] = `
-<icon-drawer>
+exports[`Drawer Drawer footer demo works fine 1`] = `
+<footer>
   <wx-view
     class="box"
   >
     <t-button
       block="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+      bind:tap="openDrawerBase"
+    >
+      带底部插槽
+    </t-button>
+  </wx-view>
+  <t-drawer
+    items="{{
+      Array [
+        Object {
+          "title": "菜单一",
+        },
+        Object {
+          "title": "菜单二",
+        },
+        Object {
+          "title": "菜单三",
+        },
+        Object {
+          "title": "菜单四",
+        },
+        Object {
+          "title": "菜单五",
+        },
+        Object {
+          "title": "菜单六",
+        },
+        Object {
+          "title": "菜单七",
+        },
+        Object {
+          "title": "菜单八",
+        },
+        Object {
+          "title": "菜单四",
+        },
+        Object {
+          "title": "菜单五",
+        },
+        Object {
+          "title": "菜单六",
+        },
+        Object {
+          "title": "菜单七",
+        },
+        Object {
+          "title": "菜单八",
+        },
+      ]
+    }}"
+    placement="left"
+    title="标题"
+    visible="{{true}}"
+    bind:item-click="itemClick"
+    bind:overlay-click="overlayClick"
+  >
+    <t-button
+      block="{{true}}"
+      class="button-host"
+      size="large="
+      slot="footer"
+      variant="outline"
+    >
+      操作
+    </t-button>
+  </t-drawer>
+</footer>
+`;
+
+exports[`Drawer Drawer icon demo works fine 1`] = `
+<wx-icon>
+  <wx-view
+    class="box"
+  >
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
       variant="outline"
       bind:tap="openDrawerIcon"
     >
@@ -43,5 +125,31 @@ exports[`Drawer Drawer icon-drawer demo works fine 1`] = `
     bind:item-click="itemClick"
     bind:overlay-click="overlayClick"
   />
-</icon-drawer>
+</wx-icon>
+`;
+
+exports[`Drawer Drawer title demo works fine 1`] = `
+<title>
+  <wx-view
+    class="box"
+  >
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+      bind:tap="openDrawerBase"
+    >
+      带标题抽屉
+    </t-button>
+  </wx-view>
+  <t-drawer
+    items=""
+    placement="left"
+    title="标题"
+    visible=""
+    bind:item-click="itemClick"
+    bind:overlay-click="overlayClick"
+  />
+</title>
 `;

src/drawer/__test__/demo.test.js

@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['base', 'icon-drawer'];
+const mapper = ['base', 'footer', 'icon', 'title'];
 
 describe('Drawer', () => {
   mapper.forEach((demoName) => {

src/drawer/_example/base/index.wxml

@@ -1,5 +1,5 @@
 <view class="box">
-  <t-button variant="outline" bind:tap="openDrawerBase" block>基础抽屉</t-button>
+  <t-button variant="outline" bind:tap="openDrawerBase" block size="large" theme="primary">基础抽屉</t-button>
 </view>
 <t-drawer
   visible="{{visible}}"

src/drawer/_example/drawer.json

@@ -3,6 +3,8 @@
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
     "base": "./base",
-    "icon-drawer": "./icon-drawer"
+    "title": "./title",
+    "icon-drawer": "./icon",
+    "footer": "./footer"
   }
 }

src/drawer/_example/drawer.wxml

@@ -1,13 +1,13 @@
 <view class="demo">
   <view class="demo-title">Drawer 弹出层</view>
   <view class="demo-desc">用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。</view>
-  <view class="tdesign-demo-popup">
-    <t-demo title="01 类型">
-      <view class="demo-section__desc">基础抽屉</view>
-      <base />
-
-      <view class="demo-section__desc">带图标抽屉</view>
-      <icon-drawer />
-    </t-demo>
-  </view>
+  <t-demo title="01 组件类型" desc="基础抽屉">
+    <base />
+  </t-demo>
+  <t-demo desc="带图标抽屉" />
+  <icon-drawer />
+  <t-demo title="02 组件样式" desc="带标题抽屉" />
+  <title />
+  <t-demo desc="带底部插槽样式" />
+  <footer />
 </view>

src/drawer/_example/footer/index.js

@@ -0,0 +1,64 @@
+Component({
+  data: {
+    visible: true,
+    placement: 'left',
+    baseSidebar: [
+      {
+        title: '菜单一',
+      },
+      {
+        title: '菜单二',
+      },
+      {
+        title: '菜单三',
+      },
+      {
+        title: '菜单四',
+      },
+      {
+        title: '菜单五',
+      },
+      {
+        title: '菜单六',
+      },
+      {
+        title: '菜单七',
+      },
+      {
+        title: '菜单八',
+      },
+      {
+        title: '菜单四',
+      },
+      {
+        title: '菜单五',
+      },
+      {
+        title: '菜单六',
+      },
+      {
+        title: '菜单七',
+      },
+      {
+        title: '菜单八',
+      },
+    ],
+  },
+
+  methods: {
+    openDrawerBase() {
+      this.setData({
+        visible: true,
+        sidebar: this.data.baseSidebar,
+      });
+    },
+
+    itemClick(e) {
+      console.log(e.detail);
+    },
+
+    overlayClick(e) {
+      console.log(e.detail);
+    },
+  },
+});

src/drawer/_example/footer/index.wxml

@@ -0,0 +1,13 @@
+<view class="box">
+  <t-button variant="outline" bind:tap="openDrawerBase" block size="large" theme="primary">带底部插槽</t-button>
+</view>
+<t-drawer
+  visible="{{visible}}"
+  placement="{{placement}}"
+  title="标题"
+  items="{{baseSidebar}}"
+  bind:overlay-click="overlayClick"
+  bind:item-click="itemClick"
+>
+  <t-button slot="footer" class="button-host" size="large=" block variant="outline">操作</t-button>
+</t-drawer>

src/drawer/_example/footer/index.wxss

@@ -0,0 +1,8 @@
+.box {
+  margin: 32rpx;
+}
+
+.button-host {
+  margin: 0 32rpx;
+  margin-top: auto;
+}

src/drawer/_example/icon/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-drawer": "tdesign-miniprogram/drawer/drawer"
+  }
+}

src/drawer/_example/icon-drawer/index.wxml → src/drawer/_example/icon/index.wxml

@@ -1,5 +1,5 @@
 <view class="box">
-  <t-button variant="outline" block bind:tap="openDrawerIcon">带图标抽屉</t-button>
+  <t-button variant="outline" block bind:tap="openDrawerIcon" size="large" theme="primary">带图标抽屉</t-button>
 </view>
 <t-drawer
   visible="{{visible}}"

src/drawer/_example/title/index.js

@@ -0,0 +1,48 @@
+Component({
+  data: {
+    placement: 'left',
+    baseSidebar: [
+      {
+        title: '菜单一',
+      },
+      {
+        title: '菜单二',
+      },
+      {
+        title: '菜单三',
+      },
+      {
+        title: '菜单四',
+      },
+      {
+        title: '菜单五',
+      },
+      {
+        title: '菜单六',
+      },
+      {
+        title: '菜单七',
+      },
+      {
+        title: '菜单八',
+      },
+    ],
+  },
+
+  methods: {
+    openDrawerBase() {
+      this.setData({
+        visible: true,
+        sidebar: this.data.baseSidebar,
+      });
+    },
+
+    itemClick(e) {
+      console.log(e.detail);
+    },
+
+    overlayClick(e) {
+      console.log(e.detail);
+    },
+  },
+});

src/drawer/_example/title/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-drawer": "tdesign-miniprogram/drawer/drawer"
+  }
+}

src/drawer/_example/title/index.wxml

@@ -0,0 +1,11 @@
+<view class="box">
+  <t-button variant="outline" bind:tap="openDrawerBase" block size="large" theme="primary">带标题抽屉</t-button>
+</view>
+<t-drawer
+  visible="{{visible}}"
+  placement="{{placement}}"
+  title="标题"
+  items="{{sidebar}}"
+  bind:overlay-click="overlayClick"
+  bind:item-click="itemClick"
+></t-drawer>

src/drawer/_example/title/index.wxss

@@ -0,0 +1,3 @@
+.box {
+  margin: 32rpx;
+}