@tuya-miniapp/smart-ui 2.3.8-beta-5 → 2.3.8

package/packages/dropdown-menu/README.en.md

@@ -1,276 +0,0 @@
----
-category: Layout
----
-
-# DropdownMenu Dropdown Menu
-
-### Introduction
-
-A menu list that pops down.
-
-### Import
-
-Introduce components in `app.json` or `index.json`. The default is the `ES6` version. For `ES5` import methods, see [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
-
-```json
-"usingComponents": {
-  "smart-dropdown-menu": "@tuya-miniapp/smart-ui/lib/dropdown-menu/index",
-  "smart-dropdown-item": "@tuya-miniapp/smart-ui/lib/dropdown-item/index"
-}
-```
-
-## Code Demonstration
-
-### Basic Usage
-
-```html
-<smart-dropdown-menu>
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <smart-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-</smart-dropdown-menu>
-```
-
-```js
-Page({
-  data: {
-    option1: [
-      { text: 'All Products', value: 0 },
-      { text: 'New Products', value: 1 },
-      { text: 'Promotional Products', value: 2 },
-    ],
-    option2: [
-      { text: 'Default Sorting', value: 'a' },
-      { text: 'Rating Sorting', value: 'b' },
-      { text: 'Sales Sorting', value: 'c' },
-    ],
-    value1: 0,
-    value2: 'a',
-  },
-});
-```
-
-### Custom Menu Content
-
-```html
-<smart-dropdown-menu>
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <smart-dropdown-item id="item" title="{{ itemTitle }}">
-    <smart-cell title="{{ switchTitle1 }}" title-style="{{ switch1 ? 'color: #3678E3;' : '' }}">
-      <smart-switch
-        slot="right-icon"
-        size="24px"
-        style="height: 26px"
-        checked="{{ switch1 }}"
-        active-color="#3678E3"
-        bind:change="onSwitch1Change"
-      />
-    </smart-cell>
-    <smart-cell title="{{ switchTitle2 }}" title-style="{{ switch2 ? 'color: #3678E3;' : '' }}">
-      <smart-switch
-        slot="right-icon"
-        size="24px"
-        style="height: 26px"
-        checked="{{ switch2 }}"
-        active-color="#3678E3"
-        bind:change="onSwitch2Change"
-      />
-    </smart-cell>
-    <view style="padding: 5px 16px;">
-      <smart-button type="danger" block round bind:click="onConfirm">
-        Confirm
-      </smart-button>
-    </view>
-  </smart-dropdown-item>
-</smart-dropdown-menu>
-```
-
-```js
-Page({
-  data: {
-    switchTitle1: 'Free Shipping',
-    switchTitle2: 'Group Purchase',
-    itemTitle: 'Filter',
-    option1: [
-      { text: 'All Products', value: 0 },
-      { text: 'New Products', value: 1 },
-      { text: 'Promotional Products', value: 2 },
-    ],
-    value1: 0,
-  },
-
-  onConfirm() {
-    this.selectComponent('#item').toggle();
-  },
-
-  onSwitch1Change({ detail }) {
-    this.setData({ switch1: detail });
-  },
-
-  onSwitch2Change({ detail }) {
-    this.setData({ switch2: detail });
-  },
-});
-```
-
-### Custom Selected State Color
-
-```html
-<smart-dropdown-menu active-color="#1989fa">
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <smart-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-</smart-dropdown-menu>
-```
-
-### Expand Upwards
-
-```html
-<smart-dropdown-menu direction="up">
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <smart-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-</smart-dropdown-menu>
-```
-
-### Disable Menu
-
-```html
-<smart-dropdown-menu>
-  <smart-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
-  <smart-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
-</smart-dropdown-menu>
-```
-
-### Asynchronous Open/Close
-
-Through the `before-toggle` event, you can execute specific logic before a dropdown menu opens or closes, thus achieving the goal of pre-verification for state changes or asynchronous open/close.
-
-```html
-<smart-dropdown-menu>
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" use-before-toggle bind:before-toggle="onBeforeChange" />
-</smart-dropdown-menu>
-```
-
-```js
-Page({
-  data: {
-    value1: 0,
-    option1: [
-      { text: 'All Products', value: 0 },
-      { text: 'New Products', value: 1 },
-      { text: 'Promotional Products', value: 2 },
-    ],
-  },
-  onBeforeChange({ detail: { status, callback }}) {
-    wx.showModal({
-      title: 'Asynchronous Open/Close',
-      content: `Are you sure you want to ${status ? 'open' : 'close'} the dropdown menu?`,
-      success: (res) => {
-        if (res.confirm) {
-          callback(true)
-        } else if (res.cancel) {
-          callback(false)
-        }
-      },
-    })
-  }
-});
-```
-
-## API
-
-### DropdownMenu Props
-
-| Parameter              | Description                                         | Type      | Default  |
-| ---------------------- | --------------------------------------------------- | --------- | -------- |
-| active-color           | The selected state color of the menu title and options | _string_  | `#3678E3` |
-| triangle-color `v2.0.0`  | The color of the arrow when unselected           | _string_  | `#CCCCCC` |
-| close-on-click-outside | Whether to close the menu when clicking outside   | _boolean_ | `true`    |
-| close-on-click-overlay | Whether to close the menu when clicking on the overlay | _boolean_ | `true`    |
-| direction              | The direction the menu expands, optional value is up | _string_  | `down`    |
-| duration               | The duration of the animation, in milliseconds     | _number_  | `200`     |
-| overlay                | Whether to show the overlay                         | _boolean_ | `true`    |
-| safe-area-tab-bar      | Whether to leave safe distance for the bottom tabbar | _boolean_ | `false`   |
-| z-index                | The z-index level of the menu bar                  | _number_  | `10`      |
-
-### DropdownItem Props
-
-| Parameter          | Description                                             | Type               | Default          |
-| ----------------- | ------------------------------------------------------- | ------------------ | ---------------- |
-| disabled          | Whether to disable the menu                             | _boolean_          | `false`          |
-| options           | Array of options                                        | _Option[]_         | `[]`             |
-| popup-style       | Custom popup layer style                                | _string_           | -                |
-| title             | The title of the menu item                              | _string_           | Selected item text |
-| title-class       | Extra class name for the title, it is recommended to use custom style item-title-class instead | _string_           | -                |
-| use-before-toggle | Whether to enable pre-verification before opening or closing the dropdown menu | _boolean_          | `false`          |
-| value             | The value corresponding to the selected item            | _number \| string_ | -                |
-
-### DropdownItem Events
-
-| Event Name     | Description                                                                  | Callback Parameters                                                                                                                             |
-| ------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| before-toggle | Triggered before opening or closing the dropdown menu; you need to set the `use-before-toggle` property to `true` | `event.detail.status`: `true` for opening the dropdown menu, `false` for closing it <br> `event.detail.callback`: Callback function, calling `callback(false)` will terminate the status change of the dropdown menu |
-| change        | Triggered when clicking an option causes a value change                     | value                                                                                                                               |
-| close         | Triggered when the menu is closed                                             | -                                                                                                                                   |
-| closed        | Triggered after the menu is closed and the animation ends                     | -                                                                                                                                   |
-| open          | Triggered when the menu is opened                                             | -                                                                                                                                   |
-| opened        | Triggered after the menu is opened and the animation ends                     | -                                                                                                                                   |
-
-### DropdownItem Methods
-
-Accessible via selectComponent(id).
-
-| Method Name | Description                           | Parameters     | Return Value |
-| ----------- | ------------------------------------- | -------------- | ------------ |
-| toggle      | Toggle menu display state; pass `true` to show, `false` to hide, no parameter to invert | show?: boolean | -            |
-
-### Option Data Structure
-
-| Key   | Description                             | Type               |
-| ----- | --------------------------------------- | ------------------ |
-| icon  | Left [icon svg value](/material/smartui?comId=icon&appType=miniapp) or image link  | _string_           |
-| text  | Text                                    | _string_           |
-| value | Identifier                              | _number \| string_ |
-
-### DropdownMenu External Style Classes
-
-| Class Name    | Description      |
-| ------------- | ---------------- |
-| custom-class  | Root node style class  |
-| title-class   | Selected item style class  |
-
-### DropdownItem External Style Classes
-
-| Class Name      | Description       |
-| --------------- | ----------------- |
-| custom-class    | Root node style class  |
-| item-title-class| Option style class  |
-
-### Style Variables
-
-The component offers the following CSS variables for customization. Refer to the [ConfigProvider Component](/material/smartui?comId=config-provider&appType=miniapp) for usage.
-
-| Name                                | Default                                | Description    |
-| ----------------------------------- | -------------------------------------- | -------------- |
-| --dropdown-menu-height              | _46px_                           | Height of the menu    |
-| --dropdown-menu-background-color    | _var(--app-B3, #ffffff)_                         | Background color of the menu    |
-| --dropdown-menu-title-font-size     | _14px_    | Font size of the title    |
-| --dropdown-menu-title-line-height   | _18px_    | Font height of the title    |
-| --dropdown-menu-title-text-color    | _var(--app-B6-N1, rgba(0, 0, 0, 1))_    | Title text color    |
-| --dropdown-menu-title-active-text-color | _var(--app-M1, #3678e3)_    | Title active color    |
-| --dropdown-menu-title-disabled-text-color | _var(--app-B6-N4, rgba(0, 0, 0, 0.4))_    | Title disabled color    |
-| --dropdown-menu-title-padding       | _0 24px 0 8px_    | Padding of the menu    |
-| --dropdown-menu-title-triangle-size `v2.0.0` | _12px_    | Triangle icon font size    |
-| --dropdown-menu-title-triangle-margin-left `v2.0.0` | _4px_    | Left margin for the triangle icon    |
-| --dropdown-menu-item-title-font-size `v2.0.0` | _14px_    | Font size of dropdown item    |
-| --dropdown-menu-item-title-font-weight `v2.0.0` | _normal_  | Font weight of dropdown item    |
-| --dropdown-menu-option-active-color | _var(--app-M1, #3678e3)_  |  Active color of dropdown option  |
-| --dropdown-menu-item-title-line-height `v2.0.0` | _rgba(0,0,0,.05)_    | Color of the dropdown item separator    |
-| --dropdown-menu-item-first-line-color `v2.0.0` | _rgba(0,0,0,.08)_    | Color of the first separator line in the dropdown    |
-| --dropdown-menu-item-line-width `v2.0.0`    | _1px_    | Height of the first separator line in the dropdown    |
-| --dropdown-menu-item-icon-font-size `v2.0.0` | _28px_    | Font size of the right icon in dropdown    |
-| --dropdown-menu-item-title-active-font-weight `v2.0.0` | _500_    | Font weight of active dropdown item    |
-
-## FAQ
-
-### Why does the Dropdown component have positioning issues when used inside a Popup?
-
-The Dropdown is located within a Popup node, and the Popup's position is set to center. The center style includes `top: 50%` and `transform: translate3d(-50%, -50%, 0)`, which causes the node's position calculation to be offset, affecting the Dropdown's positioning. The solution is to set the Popup's position to bottom or top.

package/packages/dropdown-menu/README.md

@@ -1,276 +0,0 @@
----
-category: 布局
----
-
-# DropdownMenu 下拉菜单
-
-### 介绍
-
-向下弹出的菜单列表。
-
-### 引入
-
-在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
-
-```json
-"usingComponents": {
-  "smart-dropdown-menu": "@tuya-miniapp/smart-ui/lib/dropdown-menu/index",
-  "smart-dropdown-item": "@tuya-miniapp/smart-ui/lib/dropdown-item/index"
-}
-```
-
-## 代码演示
-
-### 基础用法
-
-```html
-<smart-dropdown-menu>
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <smart-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-</smart-dropdown-menu>
-```
-
-```js
-Page({
-  data: {
-    option1: [
-      { text: '全部商品', value: 0 },
-      { text: '新款商品', value: 1 },
-      { text: '活动商品', value: 2 },
-    ],
-    option2: [
-      { text: '默认排序', value: 'a' },
-      { text: '好评排序', value: 'b' },
-      { text: '销量排序', value: 'c' },
-    ],
-    value1: 0,
-    value2: 'a',
-  },
-});
-```
-
-### 自定义菜单内容
-
-```html
-<smart-dropdown-menu>
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <smart-dropdown-item id="item" title="{{ itemTitle }}">
-    <smart-cell title="{{ switchTitle1 }}" title-style="{{ switch1 ? 'color: #3678E3;' : '' }}">
-      <smart-switch
-        slot="right-icon"
-        size="24px"
-        style="height: 26px"
-        checked="{{ switch1 }}"
-        active-color="#3678E3"
-        bind:change="onSwitch1Change"
-      />
-    </smart-cell>
-    <smart-cell title="{{ switchTitle2 }}" title-style="{{ switch2 ? 'color: #3678E3;' : '' }}">
-      <smart-switch
-        slot="right-icon"
-        size="24px"
-        style="height: 26px"
-        checked="{{ switch2 }}"
-        active-color="#3678E3"
-        bind:change="onSwitch2Change"
-      />
-    </smart-cell>
-    <view style="padding: 5px 16px;">
-      <smart-button type="danger" block round bind:click="onConfirm">
-        确认
-      </smart-button>
-    </view>
-  </smart-dropdown-item>
-</smart-dropdown-menu>
-```
-
-```js
-Page({
-  data: {
-    switchTitle1: '包邮',
-    switchTitle2: '团购',
-    itemTitle: '筛选',
-    option1: [
-      { text: '全部商品', value: 0 },
-      { text: '新款商品', value: 1 },
-      { text: '活动商品', value: 2 },
-    ],
-    value1: 0,
-  },
-
-  onConfirm() {
-    this.selectComponent('#item').toggle();
-  },
-
-  onSwitch1Change({ detail }) {
-    this.setData({ switch1: detail });
-  },
-
-  onSwitch2Change({ detail }) {
-    this.setData({ switch2: detail });
-  },
-});
-```
-
-### 自定义选中状态颜色
-
-```html
-<smart-dropdown-menu active-color="#1989fa">
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <smart-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-</smart-dropdown-menu>
-```
-
-### 向上展开
-
-```html
-<smart-dropdown-menu direction="up">
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <smart-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-</smart-dropdown-menu>
-```
-
-### 禁用菜单
-
-```html
-<smart-dropdown-menu>
-  <smart-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
-  <smart-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
-</smart-dropdown-menu>
-```
-
-### 异步打开/关闭
-
-通过 `before-toggle` 事件可以在下拉菜单打开或者关闭前执行特定的逻辑，实现状态变更前校验、异步打开/关闭的目的
-
-```html
-<smart-dropdown-menu>
-  <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" use-before-toggle bind:before-toggle="onBeforeChange" />
-</smart-dropdown-menu>
-```
-
-```js
-Page({
-  data: {
-    value1: 0,
-     option1: [
-      { text: '全部商品', value: 0 },
-      { text: '新款商品', value: 1 },
-      { text: '活动商品', value: 2 },
-    ],
-  },
-  onBeforeChange({ detail: { status, callback }}) {
-    wx.showModal({
-      title: '异步打开/关闭',
-      content: `确定要${status ? '打开' : '关闭'}下拉菜单吗？`,
-      success: (res) => {
-        if (res.confirm) {
-          callback(true)
-        } else if (res.cancel) {
-          callback(false)
-        }
-      },
-    })
-  }
-});
-```
-
-## API
-
-### DropdownMenu Props
-
-| 参数                   | 说明                           | 类型      | 默认值    |
-| ---------------------- | ------------------------------ | --------- | --------- |
-| active-color           | 菜单标题和选项的选中态颜色     | _string_  | `#3678E3` |
-| triangle-color `v2.0.0` | 箭头未选中状态下的颜色        | _string_  | `#CCCCCC` |
-| close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | _boolean_ | `true`    |
-| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | _boolean_ | `true`    |
-| direction              | 菜单展开方向，可选值为 up      | _string_  | `down`    |
-| duration               | 动画时长，单位毫秒            | _number_  | `200`     |
-| overlay                | 是否显示遮罩层                | _boolean_ | `true`    |
-| safe-area-tab-bar      | 是否留出底部 tabbar 安全距离   | _boolean_ | `false`   |
-| z-index                | 菜单栏 z-index 层级          | _number_  | `10`      |
-
-### DropdownItem Props
-
-| 参数              | 说明                                                   | 类型               | 默认值         |
-| ----------------- | ------------------------------------------------------ | ------------------ | -------------- |
-| disabled          | 是否禁用菜单                                           | _boolean_          | `false`        |
-| options           | 选项数组                                               | _Option[]_         | `[]`           |
-| popup-style       | 自定义弹出层样式                                       | _string_           | -              |
-| title             | 菜单项标题                                             | _string_           | 当前选中项文字 |
-| title-class       | 标题额外类名，建议使用自定义样式 item-title-class 代替 | _string_           | -              |
-| use-before-toggle | 是否开启下拉菜单打开或者关闭前校验                     | _boolean_          | `false`        |
-| value             | 当前选中项对应的 value                                 | _number \| string_ | -              |
-
-### DropdownItem Events
-
-| 事件名        | 说明                                                                  | 回调参数                                                                                                                                          |
-| ------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| before-toggle | 下拉菜单打开或者关闭前触发，需要将`use-before-toggle`属性设置为`true` | `event.detail.status`: `true` 打开下拉菜单，`false` 关闭下拉菜单 <br>`event.detail.callback`: 回调函数，调用`callback(false)`终止下拉菜单状态变更 |
-| change        | 点击选项导致 value 变化时触发                                         | value                                                                                                                                             |
-| close         | 关闭菜单栏时触发                                                      | -                                                                                                                                                 |
-| closed        | 关闭菜单栏且动画结束后触发                                            | -                                                                                                                                                 |
-| open          | 打开菜单栏时触发                                                      | -                                                                                                                                                 |
-| opened        | 打开菜单栏且动画结束后触发                                            | -                                                                                                                                                 |
-
-### DropdownItem 方法
-
-通过 selectComponent(id) 可访问。
-
-| 方法名 | 说明                                                          | 参数           | 返回值 |
-| ------ | ------------------------------------------------------------- | -------------- | ------ |
-| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | -      |
-
-### Option 数据结构
-
-| 键名  | 说明                             | 类型               |
-| ----- | -------------------------------- | ------------------ |
-| icon  | 左侧[图标svg字符串](/material/smartui?comId=icon&appType=miniapp)或图片链接 | _string_           |
-| text  | 文字                             | _string_           |
-| value | 标识符                           | _number \| string_ |
-
-### DropdownMenu 外部样式类
-
-| 类名         | 说明         |
-| ------------ | ------------ |
-| custom-class | 根节点样式类 |
-| title-class  | 选中项样式类 |
-
-### DropdownItem 外部样式类
-
-| 类名             | 说明         |
-| ---------------- | ------------ |
-| custom-class     | 根节点样式类 |
-| item-title-class | 选项样式类   |
-
-### 样式变量
-
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
-
-| 名称                          | 默认值                                 | 描述 |
-| ----------------------------- | -------------------------------------- | ---- |
-| --dropdown-menu-height        | _46px_                           | 菜单的高度    |
-| --dropdown-menu-background-color        | _var(--app-B3, #ffffff)_                         | 菜单的背景色    |
-| --dropdown-menu-title-font-size  | _14px_    | 菜单的标题字体大小    |
-| --dropdown-menu-title-line-height  | _18px_    | 菜单的标题字体高度    |
-| --dropdown-menu-title-text-color  | _var(--app-B6-N1, rgba(0, 0, 0, 1))_    | 菜单的标题颜色    |
-| --dropdown-menu-title-active-text-color  | _var(--app-M1, #3678e3)_    | 菜单的标题选中颜色    |
-| --dropdown-menu-title-disabled-text-color  | _var(--app-B6-N4, rgba(0, 0, 0, 0.4))_    | 菜单的标题禁用颜色    |
-| --dropdown-menu-title-padding  | _0 24px 0 8px_    | 菜单的padding    |
-| --dropdown-menu-title-triangle-size `v2.0.0`  | _12px_    | 箭头图标字体大小    |
-| --dropdown-menu-title-triangle-margin-left `v2.0.0`  | _4px_    | 箭头图标左间距    |
-| --dropdown-menu-item-title-font-size `v2.0.0`  | _14px_    | 下拉菜单字体大小    |
-| --dropdown-menu-item-title-font-weight `v2.0.0`  | _normal_  | 下拉菜单字体粗细   |
-| --dropdown-menu-option-active-color  | _var(--app-M1, #3678e3)_  |  下拉菜单选中颜色  |
-| --dropdown-menu-item-title-line-height `v2.0.0`  | _rgba(0,0,0,.05)_    | 下拉菜单分割线颜色    |
-| --dropdown-menu-item-first-line-color `v2.0.0`  | _rgba(0,0,0,.08)_    | 下拉菜单第一个分割线颜色    |
-| --dropdown-menu-item-line-width `v2.0.0`  | _1px_    | 下拉菜单第一个分割线高度    |
-| --dropdown-menu-item-icon-font-size `v2.0.0`  | _28px_    | 下拉菜单右侧图标字体大小    |
-| --dropdown-menu-item-title-active-font-weight `v2.0.0`  | _500_    | 下拉菜单选中字体粗细    |
-
-## 常见问题
-
-### Dropdown 组件在 Popup 中使用，为什么点击打开下拉选项时，定位出现异常？
-
-DropDown 位于 Popup 节点内，并且 Popup 的 position 设置为 center。由于 center 样式包含 `top: 50% ` 和 `transform: translate3d(-50%,-50%,0)`，导致节点位置计算偏移，从而影响 DropDown 的定位，解决方案是将 Popup 的 position 设置为 bottom 或 top。

package/packages/dropdown-menu/demo/index.json

@@ -1,11 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "smart-cell": "../../cell/index",
-    "smart-switch": "../../switch/index",
-    "smart-button": "../../button/index",
-    "smart-dropdown-item": "../../dropdown-item/index",
-    "smart-dropdown-menu": "../../dropdown-menu/index",
-    "demo-block": "../../../example/components/demo-block/index"
-  }
-}

package/packages/dropdown-menu/demo/index.ts

@@ -1,50 +0,0 @@
-import { SmartComponent } from '../../common/component';
-
-SmartComponent({
-  data: {
-    switchTitle1: I18n.t('freeShipping'),
-    switchTitle2: I18n.t('groupBuy'),
-    itemTitle: I18n.t('filter'),
-    option1: [
-      { text: I18n.t('allProducts'), value: 0 },
-      { text: I18n.t('newProduct'), value: 1 },
-      { text: I18n.t('promotionalItems'), value: 2 },
-    ],
-    option2: [
-      { text: I18n.t('defaultSorting'), value: 'a' },
-      { text: I18n.t('sortByPositiveReviews'), value: 'b' },
-      { text: I18n.t('sortBySales'), value: 'c' },
-    ],
-    switch1: true,
-    switch2: false,
-    value1: 0,
-    value2: 'a',
-  },
-
-  methods: {
-    onConfirm() {
-      this.selectComponent('#item').toggle();
-    },
-
-    onSwitch1Change({ detail }) {
-      this.setData({ switch1: detail });
-    },
-
-    onSwitch2Change({ detail }) {
-      this.setData({ switch2: detail });
-    },
-    onBeforeChange({ detail: { status, callback } }) {
-      wx.showModal({
-        title: I18n.t('asynchronousOnOff'),
-        content: `${I18n.t('areYouSureYouWantTo')}${status ? I18n.t('open') : I18n.t('close')}${I18n.t('dropdownMenu')}`,
-        success: (res) => {
-          if (res.confirm) {
-            callback(true);
-          } else if (res.cancel) {
-            callback(false);
-          }
-        },
-      });
-    },
-  },
-});

package/packages/dropdown-menu/demo/index.wxml

@@ -1,67 +0,0 @@
-<demo-block custom-class="white" title="{{I18n.t('basicUsage')}}">
-  <smart-dropdown-menu>
-    <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-    <smart-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-  </smart-dropdown-menu>
-</demo-block>
-
-<demo-block custom-class="white" title="{{I18n.t('customMenuContent')}}">
-  <smart-dropdown-menu>
-    <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-    <smart-dropdown-item id="item" title="{{ itemTitle }}">
-      <smart-cell title="{{ switchTitle1 }}" title-style="{{ switch1 ? 'color: #3678E3;' : '' }}">
-        <smart-switch
-          slot="right-icon"
-          size="24px"
-          style="height: 26px"
-          checked="{{ switch1 }}"
-          active-color="#3678E3"
-          bind:change="onSwitch1Change"
-        />
-      </smart-cell>
-      <smart-cell title="{{ switchTitle2 }}" title-style="{{ switch2 ? 'color: #3678E3;' : '' }}">
-        <smart-switch
-          slot="right-icon"
-          size="24px"
-          style="height: 26px"
-          checked="{{ switch2 }}"
-          active-color="#3678E3"
-          bind:change="onSwitch2Change"
-        />
-      </smart-cell>
-      <view style="padding: 5px 16px;">
-        <smart-button type="info" block round bind:click="onConfirm">
-          {{I18n.t('complete')}}
-        </smart-button>
-      </view>
-    </smart-dropdown-item>
-  </smart-dropdown-menu>
-</demo-block>
-
-<demo-block custom-class="white" title="{{I18n.t('customizeSelectedStateColor')}}">
-  <smart-dropdown-menu active-color="#1989fa">
-    <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-    <smart-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-  </smart-dropdown-menu>
-</demo-block>
-
-<demo-block custom-class="white" title="{{I18n.t('expandUpwards')}}">
-  <smart-dropdown-menu direction="up">
-    <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-    <smart-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-  </smart-dropdown-menu>
-</demo-block>
-
-<demo-block custom-class="white" title="{{I18n.t('disableMenu')}}">
-  <smart-dropdown-menu>
-    <smart-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
-    <smart-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
-  </smart-dropdown-menu>
-</demo-block>
-
-<demo-block custom-class="white" title="{{I18n.t('asynchronousOnOff')}}">
-  <smart-dropdown-menu>
-    <smart-dropdown-item value="{{ value1 }}" options="{{ option1 }}" use-before-toggle bind:before-toggle="onBeforeChange" />
-  </smart-dropdown-menu>
-</demo-block>
-