feat(cascader): add new component (#912)

* feat(cascader): add new component

* feat(cascader): finish

example/app.json

@@ -13,6 +13,7 @@
     "pages/rate/rate",
     "pages/progress/progress",
     "pages/calendar/calendar",
+    "pages/cascader/cascader",
     "pages/cell/cell",
     "pages/cell-group/cell-group",
     "pages/collapse/collapse",

example/pages/home/data/form.ts

@@ -6,6 +6,10 @@ const form = {
       name: 'Calendar',
       label: '日历',
     },
+    {
+      name: 'Cascader',
+      label: '级联选择器',
+    },
     {
       name: 'Checkbox',
       label: '多选框',

site/site.config.mjs

@@ -168,6 +168,13 @@ export default {
           path: '/miniprogram/components/calendar',
           component: () => import('@/calendar/README.md'),
         },
+        {
+          title: 'Cascader 级联选择器',
+          name: 'cascader',
+          meta: { docType: 'form' },
+          path: '/miniprogram/components/cascader',
+          component: () => import('@/cascader/README.md'),
+        },
         {
           title: 'CheckBox 复选框',
           name: 'checkbox',

src/cascader/README.en-US.md

@@ -0,0 +1,13 @@
+:: BASE_DOC ::
+
+## API
+### Cascader Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+close-btn | Boolean / Slot | true | \- | N
+options | Array | [] | Typescript：`Array<CascaderOption>` | N
+title | String / Slot | - | \- | N
+value | String / Number | - | \- | N
+default-value | String / Number | undefined | uncontrolled property | N
+visible | Boolean | false | \- | N

src/cascader/README.md

@@ -0,0 +1,34 @@
+---
+title: Cascader 级联选择器
+description: 级联选择器适用于有清晰层级结构的数据集合，用户可以通过逐级查看并选择。
+spline: form
+isComponent: true
+---
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-calendar": "tdesign-miniprogram/cascader/cascader"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+{{ base }}
+
+## API
+### Cascader Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+close-btn | Boolean / Slot | true | 关闭按钮 | N
+options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
+title | String / Slot | - | 标题 | N
+value | String / Number | - | 选项值 | N
+default-value | String / Number | undefined | 选项值。非受控属性 | N
+visible | Boolean | false | 是否展示 | N

src/cascader/_example/base/data.js

@@ -0,0 +1,60 @@
+export default {
+  areaList: [
+    {
+      label: '北京市',
+      value: '110000',
+      children: [
+        {
+          value: '110100',
+          label: '北京市',
+          children: [
+            { value: '110101', label: '东城区' },
+            { value: '110102', label: '西城区' },
+            { value: '110105', label: '朝阳区' },
+            { value: '110106', label: '丰台区' },
+            { value: '110107', label: '石景山区' },
+            { value: '110108', label: '海淀区' },
+            { value: '110109', label: '门头沟区' },
+            { value: '110111', label: '房山区' },
+            { value: '110112', label: '通州区' },
+            { value: '110113', label: '顺义区' },
+            { value: '110114', label: '昌平区' },
+            { value: '110115', label: '大兴区' },
+            { value: '110116', label: '怀柔区' },
+            { value: '110117', label: '平谷区' },
+            { value: '110118', label: '密云区' },
+            { value: '110119', label: '延庆区' },
+          ],
+        },
+      ],
+    },
+    {
+      label: '天津市',
+      value: '120000',
+      children: [
+        {
+          value: '120100',
+          label: '天津市',
+          children: [
+            { value: '120101', label: '和平区' },
+            { value: '120102', label: '河东区' },
+            { value: '120103', label: '河西区' },
+            { value: '120104', label: '南开区' },
+            { value: '120105', label: '河北区' },
+            { value: '120106', label: '红桥区' },
+            { value: '120110', label: '东丽区' },
+            { value: '120111', label: '西青区' },
+            { value: '120112', label: '津南区' },
+            { value: '120113', label: '北辰区' },
+            { value: '120114', label: '武清区' },
+            { value: '120115', label: '宝坻区' },
+            { value: '120116', label: '滨海新区' },
+            { value: '120117', label: '宁河区' },
+            { value: '120118', label: '静海区' },
+            { value: '120119', label: '蓟州区' },
+          ],
+        },
+      ],
+    },
+  ],
+};

src/cascader/_example/base/index.js

@@ -0,0 +1,21 @@
+import data from './data';
+
+Component({
+  data: {
+    options: data.areaList,
+    note: '请选择地址',
+    visible: false,
+  },
+  methods: {
+    showCascader() {
+      this.setData({ visible: true });
+    },
+    onChange(e) {
+      const { selectedOptions } = e.detail;
+
+      this.setData({
+        note: selectedOptions.map((item) => item.label).join('/'),
+      });
+    },
+  },
+});

src/cascader/_example/base/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-cascader": "tdesign-miniprogram/cascader/cascader"
+  }
+}

src/cascader/_example/base/index.wxml

@@ -0,0 +1,3 @@
+<t-cell title="地址" note="{{note}}" bind:click="showCascader" arrow></t-cell>
+
+<t-cascader visible="{{visible}}" options="{{options}}" title="请选择地址" bind:change="onChange"></t-cascader>

src/cascader/_example/cascader.js

@@ -0,0 +1 @@
+Component({});

src/cascader/_example/cascader.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "base": "./base"
+  }
+}

src/cascader/_example/cascader.wxml

@@ -0,0 +1,8 @@
+<view class="demo">
+  <view class="demo-title">Cascader 级联选择器</view>
+  <view class="demo-desc">级联选择器适用于有清晰层级结构的数据集合，用户可以通过逐级查看并选择。</view>
+
+  <t-demo title="01 类型" desc="">
+    <base />
+  </t-demo>
+</view>

src/cascader/cascader.json

@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-popup": "tdesign-miniprogram/popup/popup",
+    "t-radio": "tdesign-miniprogram/radio/radio",
+    "t-radio-group": "tdesign-miniprogram/radio-group/radio-group",
+    "t-swiper": "tdesign-miniprogram/swiper/swiper",
+    "t-swiper-item": "tdesign-miniprogram/swiper/swiper-item"
+  }
+}

src/cascader/cascader.less

@@ -0,0 +1,163 @@
+@import '../common/style/index.less';
+
+@cascader-active-color: @primary-color;
+@cascader-disabled-color: @text-disabled-color;
+@cascader-title-color: @text-level-1-color;
+@cascader-options-title-color: @text-level-3-color;
+@cascader-border-color: @border-level-1-color;
+
+@cascader-options-height: 320px;
+
+// steps
+@cascader-step-height: 44px;
+@cascader-step-active-color: @primary-color;
+@cascader-step-dot-size: 8px;
+@cascader-step-dot-color: @text-level-4-color;
+@cascader-step-line-color: @text-level-4-color;
+
+.@{prefix}-cascader {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  color: @cascader-title-color;
+
+  &__close-btn {
+    right: 16px;
+    top: 12px;
+    position: absolute;
+  }
+
+  &__title {
+    position: relative;
+    font-weight: 700;
+    text-align: center;
+    line-height: 48px;
+    font-size: 16px;
+  }
+
+  &__content {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__options {
+    height: @cascader-options-height;
+
+    &-title {
+      color: @cascader-options-title-color;
+      font-size: 14px;
+      line-height: 40px;
+      padding-left: 16px;
+    }
+
+    &-content {
+      flex: 1;
+      height: 100%;
+      overflow: auto;
+      padding-left: 16px;
+    }
+
+    &-container {
+      display: flex;
+      transition: all ease 0.3s;
+    }
+  }
+
+  &__step {
+    display: flex;
+    align-items: center;
+    height: @cascader-step-height;
+
+    &s {
+      padding: 0 16px;
+      border-bottom: 1px solid @cascader-border-color;
+    }
+
+    &-dot {
+      position: relative;
+      width: @cascader-step-dot-size;
+      height: @cascader-step-dot-size;
+      border-radius: 50%;
+      border: 1px solid @cascader-step-dot-color;
+      box-sizing: border-box;
+
+      &:not(.t-cascader__step-dot--last)::after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: @cascader-step-dot-size;
+        height: calc(@cascader-step-height - @cascader-step-dot-size);
+        width: 0;
+        border-left: 1px dashed @cascader-step-line-color;
+        transform: translateX(-50%);
+      }
+
+      &--active {
+        background: @cascader-step-active-color;
+        border-color: @cascader-step-active-color;
+      }
+    }
+
+    &-label {
+      padding-left: 16px;
+      font-size: 16px;
+
+      &--active {
+        color: @cascader-step-active-color;
+      }
+    }
+  }
+
+  &__swiper {
+    height: @cascader-options-height;
+  }
+}
+
+.@{prefix}-cascader-item {
+  font-size: 16px;
+  font-weight: 400;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  line-height: 48px;
+
+  &-content {
+    flex-grow: 1;
+  }
+
+  &.active {
+    color: @cascader-active-color;
+  }
+
+  &.disabled {
+    color: @cascader-disabled-color;
+    cursor: not-allowed;
+  }
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.2s ease-in-out;
+  position: absolute;
+}
+
+.slide-leave-to {
+  transform: translateX(-100%);
+}
+
+.slide-enter-from {
+  transform: translateX(100%);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0;
+}