@tuya/miniapp-smart-ui 2.13.5-beta-0

package/dist/calendar-year-list/index.js

@@ -0,0 +1,115 @@
+// components/month-list.js
+import { getYears } from '../calendar-utils/utils';
+import { SmartComponent } from '../common/component';
+import tyApi from '../common/ty';
+SmartComponent({
+    /**
+     * 组件的属性列表
+     */
+    props: {
+        date: {
+            type: null,
+            observer(newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.calcYear();
+                }
+            },
+        },
+        readonly: {
+            type: Boolean,
+            value: false,
+        },
+        minDate: {
+            type: null,
+            value: new Date(new Date().getFullYear() - 30, 0, 1).getTime(),
+        },
+        maxDate: {
+            type: null,
+            value: new Date(new Date().getFullYear() + 30, 11, 31).getTime(),
+        },
+        color: {
+            type: String,
+            value: '#3678e3',
+        },
+        currentYear: {
+            type: null,
+            value: new Date().getFullYear(),
+        },
+        yearFormatter: {
+            type: null,
+            value: 'YYYY',
+        },
+        visibleIndex: {
+            type: Number,
+            value: 0,
+            observer(newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.getYearList();
+                }
+            },
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        years: [],
+        currentYear: null,
+    },
+    created() {
+        this.getYearList();
+        this.calcYear();
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        calcYear() {
+            const date = new Date(this.data.date);
+            const cur = date.getFullYear();
+            this.setData({
+                currentYear: cur,
+            });
+        },
+        getYearList() {
+            const { minDate, maxDate, yearFormatter = 'YYYY', visibleIndex, date } = this.data;
+            const cur = new Date(date).getFullYear();
+            const offset = visibleIndex * 12;
+            const start = new Date(cur + offset - 5, 0, 1).getTime();
+            const end = new Date(cur + offset + 6, 11, 31).getTime();
+            const minStart = new Date(minDate).getFullYear();
+            const maxStart = new Date(maxDate).getFullYear();
+            const years = getYears(start, end);
+            const yearlist = years.map(date => {
+                const yearVal = new Date(date).getFullYear();
+                const curTime = new Date(date).getFullYear();
+                let isDisabled = false;
+                if (minDate && maxDate) {
+                    isDisabled = curTime < minStart || curTime > maxStart;
+                }
+                return {
+                    value: date,
+                    year: yearVal,
+                    text: yearFormatter.replace('YYYY', yearVal),
+                    type: isDisabled ? 'disabled' : '',
+                };
+            });
+            this.setData({
+                years: yearlist,
+            });
+        },
+        onClick(event) {
+            if (this.data.readonly)
+                return;
+            const { index } = event.currentTarget.dataset;
+            const item = this.data.years[index];
+            if (item.type !== 'disabled') {
+                this.$emit('click', item.value);
+                this.setData({
+                    date: item.value,
+                });
+                tyApi.vibrateShort({ type: 'light' });
+            }
+        },
+    },
+});

package/dist/calendar-year-list/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-row": "../row/index",
+    "smart-col": "../col/index"
+  }
+}

package/dist/calendar-year-list/index.wxml

@@ -0,0 +1,15 @@
+<view class="contain">
+  <smart-row>
+    <smart-col wx:for="{{years}}" wx:key="index" span="6" custom-class="col_item">
+      <view wx:if="{{item.type === 'disabled'}}" class="item smart-manrope item_disabled" data-index="{{index}}">
+        {{item.text}}
+      </view>
+      <view wx:elif="{{currentYear === item.year}}" class="item smart-manrope item_active" data-index="{{index}}" bindtap="onClick" style="background: {{ color }};">
+        {{item.text}}
+      </view>
+      <view wx:else class="item smart-manrope" data-index="{{index}}" bindtap="onClick">
+        {{item.text}}
+      </view>
+    </smart-col>
+  </smart-row>
+</view>

package/dist/calendar-year-list/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.contain{margin:12px 0}.item{border-radius:var(--calendar-cell-item-border-radius,52px);color:var(--calendar-cell-item-font-color,var(--app-B4-N1,#000));font-size:var(--calendar-cell-item-font-size,15px);font-weight:var(--calendar-day-font-weight,500);height:var(--calendar-cell-item-height,52px);line-height:var(--calendar-cell-item-height,52px);margin:var(--calendar-cell-item-margin,7px);text-align:center;width:var(--calendar-cell-item-width,52px)}.item_active{background:#3678e3;color:#fff}.item_disabled{opacity:.3}.col_item{display:flex;justify-content:center}

package/dist/cascader/README.md

@@ -0,0 +1,235 @@
+---
+category: 数据录入
+---
+
+# Cascader 级联选择
+
+### 介绍
+
+级联选择框，用于多层级数据的选择，典型场景为省市区选择。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-cascader": "@tuya/miniapp-smart-ui/lib/cascader/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+级联选择组件可以搭配 Field 和 Popup 组件使用，示例如下：
+
+```html
+<smart-field
+  value="{{ fieldValue }}"
+  is-link
+  readonly
+  label="地区"
+  placeholder="请选择所在地区"
+  bind:tap="onClick"
+/>
+<smart-bottom-sheet show="{{ show }}" max-height="100%">
+  <smart-cascader
+    ty:if="{{ show }}"
+    value="{{ cascaderValue }}"
+    title="请选择所在地区"
+    options="{{ options }}"
+    bind:close="onClose"
+    bind:finish="onFinish"
+  />
+</smart-bottom-sheet>
+```
+
+```js
+
+const options = [
+  {
+    text: '浙江省',
+    value: '330000',
+    children: [{ text: '杭州市', value: '330100' }],
+  },
+  {
+    text: '江苏省',
+    value: '320000',
+    children: [{ text: '南京市', value: '320100' }],
+  },
+];
+
+Page({
+  data: {
+    show: false,
+    options,
+    fieldValue: '',
+    cascaderValue: '',
+  },
+
+  onClick() {
+    this.setData({
+      show: true,
+    });
+  },
+
+  onClose() {
+    this.setData({
+      show: false,
+    });
+  },
+
+  onFinish(e) {
+    const { selectedOptions, value } = e.detail;
+    const fieldValue = selectedOptions
+        .map((option) => option.text || option.name)
+        .join('/');
+    this.setData({
+      fieldValue,
+      cascaderValue: value,
+    })
+  },
+});
+```
+
+### 自定义颜色
+
+通过 `active-color` 属性来设置选中状态的高亮颜色。
+
+```html
+<smart-cascader
+  value="{{ cascaderValue }}"
+  title="请选择所在地区"
+  options="{{ options }}"
+  active-color="#ee0a24"
+  bind:close="onClose"
+  bind:finish="onFinish"
+/>
+```
+
+### 异步加载选项
+
+可以监听 `change` 事件并动态设置 `options`，实现异步加载选项。
+
+```html
+<smart-field
+  value="{{ fieldValue }}"
+  is-link
+  readonly
+  label="地区"
+  placeholder="请选择所在地区"
+  bind:tap="onClick"
+/>
+<smart-bottom-sheet show="{{ show }}" max-height="100%">
+  <smart-cascader
+    ty:if="{{ show }}"
+    value="{{ cascaderValue }}"
+    title="请选择所在地区"
+    options="{{ options }}"
+    bind:close="onClose"
+    bind:change="onChange"
+    bind:finish="onFinish"
+  />
+</smart-bottom-sheet>
+```
+
+```js
+Page({
+  data: {
+    options: [
+      {
+        text: '浙江省',
+        value: '330000',
+        children: [],
+      }
+    ];
+  },
+  onChange(e) {
+    const { value } = e.detail;
+    if (value === this.data.options[0].value) {
+      setTimeout(() => {
+        const children = [
+          { text: '杭州市', value: '330100' },
+          { text: '宁波市', value: '330200' },
+        ];
+        this.setData({
+          'options[0].children': children,
+        })
+      }, 500);
+    }
+  },
+});
+
+```
+
+## API
+
+### Props
+
+| 参数            | 说明                                                           | 类型               | 默认值    |
+| --------------- | -------------------------------------------------------------- | ------------------ | --------- |
+| active-color    | 选中状态的高亮颜色                                             | _string_           | `#1989fa` |
+| close-icon      | 关闭图标svg值或图片链接，等同于 Icon 组件的 [name 属性](/material/smartui?comId=icon&appType=miniapp) | _string_           | `cross`   |
+| close-icon-aria-label `v2.13.0` | 关闭按钮的无障碍读屏文案，透传至内部 `smart-icon` 的 `aria-label` | _string_           | -         |
+| closeable       | 是否显示关闭图标                                               | _boolean_          | `true`    |
+| ellipsis        | 是否省略过长的标题文字, 关闭后文字过长会出现横向滚动           | _boolean_          | `true`    |
+| options         | 可选项数据源                                                   | _CascaderOption[]_ | `[]`      |
+| placeholder     | 未选中时的提示文案                                             | _string_           | `请选择`  |
+| show-header     | 是否展示标题栏                                                 | _boolean_          | `true`    |
+| swipe-threshold | 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | _number_           | `5`       |
+| swipeable       | 是否开启手势左右滑动切换                                       | _boolean_          | `false`   |
+| title           | 顶部标题                                                       | _string_           | -         |
+| use-title-slot  | 是否使用自定义标题的插槽                                       | _boolean_          | `false`   |
+| value           | 选中项的值                                                     | _string \| number_ | -         |
+
+### CascaderOption 数据结构
+
+`options` 属性是一个由对象构成的数组，数组中的每个对象配置一个可选项，对象可以包含以下值：
+
+| 键名      | 说明                     | 类型                        |
+| --------- | ------------------------ | --------------------------- |
+| className | 为对应列添加额外的 class | _string \| Array \| object_ |
+| color     | 选项文字颜色             | _string_                    |
+| disabled  | 是否禁用选项             | _boolean_                   |
+| options   | 子选项列表               | _CascaderOption[]_          |
+| text      | 选项文字（必填）         | _string_                    |
+| value     | 选项对应的值（必填）     | _string \| number_          |
+
+### Events
+
+| 事件           | 说明                   | 回调参数                                                                                         |
+| -------------- | ---------------------- | ------------------------------------------------------------------------------------------------ |
+| bind:change    | 选中项变化时触发       | event.detail：_{ value: string \| number, selectedOptions: CascaderOption[], tabIndex: number }_ |
+| bind:click-tab | 点击标签时触发         | event.detail：_{ tabIndex: number, title: string }_                                              |
+| bind:close     | 点击关闭图标时触发     | -                                                                                                |
+| bind:finish    | 全部选项选择完成后触发 | event.detail：_{ value: string \| number, selectedOptions: CascaderOption[], tabIndex: number }_ |
+
+### Slots
+
+| 名称  | 说明           | 参数 |
+| ----- | -------------- | ---- |
+| title | 自定义顶部标题 | -    |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                                  | 默认值                                   | 描述                                     |
+| ------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| --cascader-header-height              | _48px_                                   | 级联选择器头部高度                       |
+| --cascader-header-padding             | _0 16px_                                 | 级联选择器头部内边距                     |
+| --cascader-title-font-size            | _16px_                                   | 级联选择器标题字体大小                   |
+| --cascader-title-line-height          | _20px_                                   | 级联选择器标题行高                       |
+| --cascader-close-icon-size            | _22px_                                   | 级联选择器关闭图标大小                   |
+| --cascader-close-icon-color           | _#c8c9cc_                                | 级联选择器关闭图标颜色                   |
+| --cascader-selected-icon-size         | _18px_                                   | 级联选择器选中图标大小                   |
+| --cascader-tabs-height                | _48px_                                   | 级联选择器标签栏高度                     |
+| --cascader-active-color               | _#1989fa_                                | 级联选择器激活项颜色                     |
+| --cascader-options-height             | _384px_                                  | 级联选择器选项高度                       |
+| --cascader-option-disabled-color      | _#c8c9cc_                                | 级联选择器禁用选项颜色                   |
+| --cascader-tab-color                  | _var(--app-B6-N1, rgba(0, 0, 0, 1))_     | 级联选择器标签颜色                       |
+| --cascader-unselected-tab-color       | _#969799_                                | 级联选择器未选中标签颜色                 |
+| --cascader-tab-inactive-color         | _var(--app-B6-N5, rgba(0, 0, 0, 0.3))_   | 级联选择器标签未激活颜色                 |
+| --cascader-text-color                 | _var(--app-B6-N5, rgba(0, 0, 0, 0.3))_   | 级联选择器文本颜色                       |
+| --cascader-active-background-color `v2.8.0` | _var(--app-B1, #f6f7fb)_   | 级联选择器列点击时背景色   |

package/dist/cascader/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-cascader__header{align-items:center;display:flex;height:48px;justify-content:space-between;padding:0 16px}.smart-cascader__title{font-size:16px;font-weight:600;line-height:20px}.smart-cascader__close-icon{color:#c8c9cc;font-size:22px;height:22px}.smart-cascader__tabs-wrap{height:48px!important;padding:0 8px}.smart-cascader__tab{--tabs-card-text-color:var(--cascader-tab-color,var(--app-B6-N1,#000));flex:none!important;font-weight:600!important;padding:0 8px!important}.smart-cascader__tab--unselected{color:#969799!important;font-weight:400!important}.smart-cascader__option{align-items:center;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;line-height:20px;padding:10px 16px}.smart-cascader__option:active{background-color:var(--cascader-active-background-color,var(--app-B1,#f6f7fb))}.smart-cascader__option--selected{color:#1989fa;font-weight:600}.smart-cascader__option--disabled{color:#c8c9cc;cursor:not-allowed}.smart-cascader__option--disabled:active{background-color:initial}.smart-cascader__options{-webkit-overflow-scrolling:touch;box-sizing:border-box;height:384px;overflow-y:auto;padding-top:6px}

package/dist/cascader/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cascader/index.js

@@ -0,0 +1,195 @@
+import { SmartComponent } from '../common/component';
+import closeIcon from '@tuya-miniapp/icons/dist/svg/Xmark';
+SmartComponent({
+    props: {
+        title: String,
+        value: {
+            type: String,
+        },
+        placeholder: {
+            type: String,
+            value: 'Please select',
+        },
+        activeColor: {
+            type: String,
+            value: '#1989fa',
+        },
+        options: {
+            type: Array,
+            value: [],
+        },
+        swipeable: {
+            type: Boolean,
+            value: false,
+        },
+        closeable: {
+            type: Boolean,
+            value: true,
+        },
+        ellipsis: {
+            type: Boolean,
+            value: true,
+        },
+        swipeThreshold: {
+            type: Number,
+            value: 5,
+        },
+        showHeader: {
+            type: Boolean,
+            value: true,
+        },
+        closeIcon: {
+            type: String,
+            value: closeIcon,
+        },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
+        useTitleSlot: Boolean,
+    },
+    data: {
+        tabs: [],
+        activeTab: 0,
+        innerValue: '',
+    },
+    watch: {
+        options() {
+            this.updateTabs();
+        },
+        value(newVal) {
+            this.updateValue(newVal);
+        },
+    },
+    created() {
+        this.updateTabs();
+    },
+    methods: {
+        updateValue(val) {
+            if (val !== undefined) {
+                const values = this.data.tabs.map((tab) => tab.selected && tab.selected.value);
+                if (values.indexOf(val) > -1) {
+                    return;
+                }
+            }
+            this.innerValue = val;
+            this.updateTabs();
+        },
+        getSelectedOptionsByValue(options, value) {
+            for (let i = 0; i < options.length; i++) {
+                const option = options[i];
+                if (option.value === value) {
+                    return [option];
+                }
+                if (option.options) {
+                    const selectedOptions = this.getSelectedOptionsByValue(option.options, value);
+                    if (selectedOptions) {
+                        return [option, ...selectedOptions];
+                    }
+                }
+            }
+        },
+        updateTabs() {
+            const { options } = this.data;
+            const { innerValue } = this;
+            if (!options.length) {
+                return;
+            }
+            if (innerValue !== undefined) {
+                const selectedOptions = this.getSelectedOptionsByValue(options, innerValue);
+                if (selectedOptions) {
+                    let optionsCursor = options;
+                    const tabs = selectedOptions.map(option => {
+                        const tab = {
+                            options: optionsCursor,
+                            selected: option,
+                        };
+                        const next = optionsCursor.find(item => item.value === option.value);
+                        if (next) {
+                            optionsCursor = next.options;
+                        }
+                        return tab;
+                    });
+                    if (optionsCursor) {
+                        tabs.push({
+                            options: optionsCursor,
+                            selected: null,
+                        });
+                    }
+                    this.setData({
+                        tabs,
+                    });
+                    wx.nextTick(() => {
+                        this.setData({
+                            activeTab: tabs.length - 1,
+                        });
+                    });
+                    return;
+                }
+            }
+            this.setData({
+                tabs: [
+                    {
+                        options,
+                        selected: null,
+                    },
+                ],
+                activeTab: 0,
+            });
+        },
+        onClose() {
+            this.$emit('close');
+        },
+        onClickTab(e) {
+            const { index: tabIndex, title } = e.detail;
+            this.$emit('click-tab', { title, tabIndex });
+            this.setData({
+                activeTab: tabIndex,
+            });
+        },
+        // 选中
+        onSelect(e) {
+            const { option, tabIndex } = e.currentTarget.dataset;
+            if (option && option.disabled) {
+                return;
+            }
+            let { tabs } = this.data;
+            tabs[tabIndex].selected = option;
+            if (tabs.length > tabIndex + 1) {
+                tabs = tabs.slice(0, tabIndex + 1);
+            }
+            if (option.options) {
+                const nextTab = {
+                    options: option.options,
+                    selected: null,
+                };
+                if (tabs[tabIndex + 1]) {
+                    tabs[tabIndex + 1] = nextTab;
+                }
+                else {
+                    tabs.push(nextTab);
+                }
+                wx.nextTick(() => {
+                    this.setData({
+                        activeTab: tabIndex + 1,
+                    });
+                });
+            }
+            this.setData({
+                tabs,
+            });
+            const selectedOptions = tabs.map(tab => tab.selected).filter(Boolean);
+            const { value } = option;
+            const params = {
+                value,
+                tabIndex,
+                selectedOptions,
+            };
+            this.innerValue = value;
+            this.$emit('change', params);
+            if (!option.options) {
+                this.$emit('finish', params);
+            }
+        },
+    },
+});

package/dist/cascader/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index",
+    "smart-tab":  "../tab/index",
+    "smart-tabs": "../tabs/index"
+  }
+}

package/dist/cascader/index.wxml

@@ -0,0 +1,58 @@
+<wxs src="./index.wxs" module="utils" />
+
+<view wx:if="{{ showHeader }}" class="smart-cascader__header">
+  <slot name="title" wx:if="{{ useTitleSlot }}"></slot>
+  <text class="smart-cascader__title" wx:else>{{ title }}</text>
+  <smart-icon
+    wx:if="{{ closeable }}"
+    name="{{ closeIcon }}"
+    aria-role="button"
+    class="smart-cascader__close-icon"
+    aria-label="{{ closeIconAriaLabel }}"
+    bind:tap="onClose"
+  />
+</view>
+
+<smart-tabs
+  active="{{ activeTab }}"
+  custom-class="smart-cascader__tabs"
+  wrap-class="smart-cascader__tabs-wrap"
+  tab-class="smart-cascader__tab"
+  color="{{ activeColor }}"
+  border="{{ false }}"
+  swipeable="{{ swipeable }}"
+  ellipsis="{{ ellipsis }}"
+  swipe-threshold="{{ swipeThreshold }}"
+  bind:click="onClickTab"
+>
+  <smart-tab
+    wx:for="{{ tabs }}"
+    wx:for-item="tab"
+    wx:for-index="tabIndex"
+    wx:key="tabIndex"
+    title="{{ tab.selected ? tab.selected.text : placeholder }}"
+    style="width: 100%;"
+    title-style="{{ !tab.selected ? 'color: var(--cascader-tab-inactive-color, var(--app-B6-N5, rgba(0, 0, 0, 0.3)));font-weight:normal;' : '' }}"
+  >
+    <!-- 暂不支持 -->
+    <!-- <slot name="options-top"></slot> -->
+
+    <scroll-view class="smart-cascader__options" scroll-y>
+      <view
+        wx:for="{{ tab.options }}"
+        wx:for-item="option"
+        wx:key="index"
+        class="{{ option.className }} {{ utils.optionClass(tab, option) }}"
+        style="{{ utils.optionStyle({ tab, option, activeColor }) }}"
+        data-option="{{ option }}"
+        data-tab-index="{{ tabIndex }}"
+        bind:tap="onSelect"
+      >
+        <text>{{ option.text }}</text>
+        <smart-icon wx:if="{{ utils.isSelected(tab, option) }}" name="success" size="18" />
+      </view>
+    </scroll-view>
+    <!-- 暂不支持 -->
+    <!-- <slot name="options-bottom"></slot> -->
+  </smart-tab>
+</smart-tabs>

package/dist/cascader/index.wxs

@@ -0,0 +1,21 @@
+var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+
+function isSelected(tab, option) {
+  return tab.selected && tab.selected.value === option.value;
+}
+
+function optionClass(tab, option) {
+  return utils.bem('cascader__option', { selected: isSelected(tab, option), disabled: option.disabled });
+}
+
+function optionStyle(data) {
+  var color = data.option.color || (isSelected(data.tab, data.option) ? data.activeColor : undefined);
+  return style({ color: color });
+}
+
+module.exports = {
+  isSelected: isSelected,
+  optionClass: optionClass,
+  optionStyle: optionStyle,
+};

package/dist/cascader/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-cascader__header{align-items:center;display:flex;height:48px;justify-content:space-between;padding:0 16px}.smart-cascader__title{font-size:16px;font-weight:600;line-height:20px}.smart-cascader__close-icon{color:#c8c9cc;font-size:22px;height:22px}.smart-cascader__tabs-wrap{height:48px!important;padding:0 8px}.smart-cascader__tab{--tabs-card-text-color:var(--cascader-tab-color,var(--app-B6-N1,#000));flex:none!important;font-weight:600!important;padding:0 8px!important}.smart-cascader__tab--unselected{color:#969799!important;font-weight:400!important}.smart-cascader__option{align-items:center;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;line-height:20px;padding:10px 16px}.smart-cascader__option:active{background-color:var(--cascader-active-background-color,var(--app-B1,#f6f7fb))}.smart-cascader__option--selected{color:#1989fa;font-weight:600}.smart-cascader__option--disabled{color:#c8c9cc;cursor:not-allowed}.smart-cascader__option--disabled:active{background-color:initial}.smart-cascader__options{-webkit-overflow-scrolling:touch;box-sizing:border-box;height:384px;overflow-y:auto;padding-top:6px}