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

package/dist/dropdown-item/index.js

@@ -0,0 +1,141 @@
+import { useParent } from '../common/relation';
+import { SmartComponent } from '../common/component';
+import checkMarkIcon from '@tuya-miniapp/icons/dist/svg/Check';
+import ty from '../common/ty';
+SmartComponent({
+    classes: ['item-title-class'],
+    field: true,
+    relation: useParent('dropdown-menu', function () {
+        this.updateDataFromParent();
+    }),
+    props: {
+        value: {
+            type: null,
+            observer: 'rerender',
+        },
+        title: {
+            type: String,
+            observer: 'rerender',
+        },
+        disabled: Boolean,
+        titleClass: {
+            type: String,
+            observer: 'rerender',
+        },
+        options: {
+            type: Array,
+            value: [],
+            observer: 'rerender',
+        },
+        scrollStyle: String,
+        popupStyle: String,
+        useBeforeToggle: {
+            type: Boolean,
+            value: false,
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        checkMarkIcon,
+        checkMarkIconColor: '',
+        transition: true,
+        showPopup: false,
+        showWrapper: false,
+        displayTitle: '',
+        safeAreaTabBar: false,
+    },
+    mounted() {
+        var _a;
+        const themeInfo = (_a = ty.getThemeInfo()) !== null && _a !== void 0 ? _a : {};
+        const checkMarkIconColor = this.data.activeColor || themeInfo['--app-M1'] || '#3678E3';
+        this.setData({ checkMarkIconColor });
+    },
+    methods: {
+        rerender() {
+            wx.nextTick(() => {
+                var _a;
+                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.updateItemListData();
+            });
+        },
+        updateDataFromParent() {
+            if (this.parent) {
+                const { overlay, duration, activeColor, closeOnClickOverlay, direction, safeAreaTabBar } = this.parent.data;
+                this.setData({
+                    overlay,
+                    duration,
+                    activeColor,
+                    closeOnClickOverlay,
+                    direction,
+                    safeAreaTabBar,
+                });
+            }
+        },
+        onOpen() {
+            this.$emit('open');
+        },
+        onOpened() {
+            this.$emit('opened');
+        },
+        onClose() {
+            this.$emit('close');
+        },
+        onClosed() {
+            this.$emit('closed');
+            this.setData({ showWrapper: false });
+        },
+        onOptionTap(event) {
+            const { option } = event.currentTarget.dataset;
+            const { value } = option;
+            const shouldEmitChange = this.data.value !== value;
+            this.setData({ showPopup: false, value });
+            this.$emit('close');
+            this.rerender();
+            if (shouldEmitChange) {
+                this.$emit('change', value);
+            }
+        },
+        toggle(show, options = {}) {
+            const { showPopup } = this.data;
+            if (typeof show !== 'boolean') {
+                show = !showPopup;
+            }
+            if (show === showPopup) {
+                return;
+            }
+            this.onBeforeToggle(show).then(status => {
+                var _a;
+                if (!status) {
+                    return;
+                }
+                this.setData({
+                    transition: !options.immediate,
+                    showPopup: show,
+                });
+                if (show) {
+                    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getChildWrapperStyle().then((wrapperStyle) => {
+                        this.setData({ wrapperStyle, showWrapper: true });
+                        this.rerender();
+                    });
+                }
+                else {
+                    this.rerender();
+                }
+            });
+        },
+        onBeforeToggle(status) {
+            const { useBeforeToggle } = this.data;
+            if (!useBeforeToggle) {
+                return Promise.resolve(true);
+            }
+            return new Promise(resolve => {
+                this.$emit('before-toggle', {
+                    status,
+                    callback: (value) => resolve(value),
+                });
+            });
+        },
+    },
+});

package/dist/dropdown-item/index.json

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

package/dist/dropdown-item/index.wxml

@@ -0,0 +1,52 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ showWrapper }}"
+  class="{{ utils.bem('dropdown-item', direction) }} custom-class"
+  style="{{ wrapperStyle }}"
+>
+  <smart-popup
+    show="{{ showPopup }}"
+    custom-style="position: absolute;{{ popupStyle }}"
+    overlay-style="position: absolute;"
+    overlay="{{ overlay }}"
+    position="{{ direction === 'down' ? 'top' : 'bottom' }}"
+    duration="{{ transition ? duration : 0 }}"
+    safe-area-tab-bar="{{ safeAreaTabBar }}"
+    safe-area-inset-bottom="{{ false }}"
+    close-on-click-overlay="{{ closeOnClickOverlay }}"
+    rootPortal="{{ rootPortal }}"
+    bind:enter="onOpen"
+    bind:leave="onClose"
+    bind:close="toggle"
+    bind:after-enter="onOpened"
+    bind:after-leave="onClosed"
+  >
+    <scroll-view scroll-y style="{{scrollStyle}}">
+      <smart-cell
+        wx:for="{{ options }}"
+        wx:key="value"
+        data-option="{{ item }}"
+        class="{{ utils.bem('dropdown-item__option', { active: item.value === value, first: direction !== 'up' && !index }) }}"
+        clickable
+        icon="{{ item.icon }}"
+        bind:tap="onOptionTap"
+      >
+        <view
+          slot="title"
+          class="smart-dropdown-item__title item-title-class"
+          style="{{ item.value === value  ? 'color:' + activeColor : '' }}"
+        >
+          {{ item.text }}
+        </view>
+        <smart-icon
+          wx:if="{{ item.value === value }}"
+          name="{{ checkMarkIcon }}"
+          class="smart-dropdown-item__icon"
+          color="{{ activeColor || checkMarkIconColor }}"
+        />
+      </smart-cell>
+      <slot />
+    </scroll-view>
+  </smart-popup>
+</view>

package/dist/dropdown-item/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-dropdown-item{left:0;overflow:hidden;position:fixed;right:0}.smart-dropdown-item .smart-dropdown-item__title{font-size:var(--dropdown-menu-item-title-font-size,14px);font-weight:var(--dropdown-menu-item-title-font-weight,normal);line-height:var(--dropdown-menu-item-title-line-height,28px)}.smart-dropdown-item .smart-dropdown-item__icon{font-size:var(--dropdown-menu-item-icon-font-size,28px)}.smart-dropdown-item__option{--cell-border-color:var(--dropdown-menu-item-line-color,var(--app-B6-N7,rgba(0,0,0,.1)));--cell-border-left-position:0;--cell-border-right-position:0;position:relative;text-align:left}.smart-dropdown-item__option--first:after{border-top:1px solid var(--dropdown-menu-item-line-color,var(--app-B6-N7,rgba(0,0,0,.1)));box-sizing:border-box;content:" ";left:0;pointer-events:none;position:absolute;right:0;top:0;transform:scaleY(.5);transform-origin:center}.smart-dropdown-item__option--active .smart-dropdown-item__icon,.smart-dropdown-item__option--active .smart-dropdown-item__title{color:var(--dropdown-menu-option-active-color,var(--app-M1,#3678e3));font-weight:var(--dropdown-menu-item-title-active-font-weight,500)}.smart-dropdown-item--up{top:0}.smart-dropdown-item--down{bottom:0}.smart-dropdown-item__icon{display:block;line-height:inherit}

package/dist/dropdown-item/shared.d.ts

@@ -0,0 +1,5 @@
+export interface Option {
+    text: string;
+    value: string | number;
+    icon: string;
+}

package/dist/dropdown-item/shared.js

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

package/dist/dropdown-menu/README.md

@@ -0,0 +1,278 @@
+---
+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` 事件可以在下拉菜单打开或者关闭前执行特定的逻辑，实现状态变更前校验、异步打开/关闭的目的。  
+`scroll-style` `v2.5.0` 当弹框需要滚动时，可以设置此属性，给定一个高度即可。
+
+```html
+<smart-dropdown-menu>
+  <smart-dropdown-item scroll-style="height: 120px;" 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 }}) {
+    ty.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_ | -       |
+| scroll-style `v2.5.0`        | 当需要下拉菜单滚动时，此属性设置滚动区域的样式，比如高度    | _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](/material/smartui?comId=faq&appType=miniapp) 可访问。
+
+| 方法名 | 说明                                                          | 参数           | 返回值 |
+| ------ | ------------------------------------------------------------- | -------------- | ------ |
+| 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/dist/dropdown-menu/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-dropdown-menu{background-color:var(--dropdown-menu-background-color,var(--app-B3,#fff));display:flex;height:var(--dropdown-menu-height,46px);-webkit-user-select:none;user-select:none}.smart-dropdown-menu__item{align-items:center;display:flex;flex:1;justify-content:center;min-width:0}.smart-dropdown-menu__item:active{opacity:.7}.smart-dropdown-menu__item--disabled:active{opacity:1}.smart-dropdown-menu__item--disabled .smart-dropdown-menu__title{color:var(--dropdown-menu-title-disabled-text-color,var(--app-B6-N4,rgba(0,0,0,.4)))}.smart-dropdown-menu__title{align-items:center;box-sizing:border-box;color:var(--dropdown-menu-title-text-color,var(--app-B6-N1,#000));display:flex;font-size:var(--dropdown-menu-title-font-size,14px);justify-content:center;line-height:var(--dropdown-menu-title-line-height,18px);max-width:100%;padding:var(--dropdown-menu-title-padding,0 24px 0 8px)}.smart-dropdown-menu__title__triangle{font-size:var(--dropdown-menu-title-triangle-size,12px);margin-left:var(--dropdown-menu-title-triangle-margin-left,4px);transform:translateY(10%);transition:all .2s}.smart-dropdown-menu__title__triangle--up{transform:rotate(180deg)}.smart-dropdown-menu__title--active{color:var(--dropdown-menu-title-active-text-color,var(--app-M1,#3678e3))}.smart-dropdown-menu__title--active .smart-dropdown-menu__title__triangle{transform:rotate(180deg);transform-origin:center}.smart-dropdown-menu__title--active .smart-dropdown-menu__title__triangle--up{transform:translateY(10%) rotate(1turn);transform-origin:center}

package/dist/dropdown-menu/index.d.ts

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

package/dist/dropdown-menu/index.js

@@ -0,0 +1,130 @@
+import { SmartComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+import { addUnit, getRect, getSystemInfoSync } from '../common/utils';
+import TriangleDown from '@tuya-miniapp/icons/dist/svg/TriangleDown';
+import ty from '../common/ty';
+let ARRAY = [];
+SmartComponent({
+    field: true,
+    classes: ['title-class'],
+    relation: useChildren('dropdown-item', function () {
+        this.updateItemListData();
+    }),
+    props: {
+        activeColor: {
+            type: String,
+            observer: 'updateChildrenData',
+        },
+        overlay: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildrenData',
+        },
+        zIndex: {
+            type: Number,
+            value: 10,
+        },
+        duration: {
+            type: Number,
+            value: 200,
+            observer: 'updateChildrenData',
+        },
+        direction: {
+            type: String,
+            value: 'down',
+            observer: 'updateChildrenData',
+        },
+        safeAreaTabBar: {
+            type: Boolean,
+            value: false,
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildrenData',
+        },
+        closeOnClickOutside: {
+            type: Boolean,
+            value: true,
+        },
+        triangleColor: {
+            type: String,
+            value: '#CCCCCC',
+            observer: 'updateChildrenData',
+        },
+    },
+    data: {
+        triangleDown: TriangleDown,
+        activeColorStatic: '',
+        itemListData: [],
+    },
+    mounted() {
+        var _a;
+        const themeInfo = (_a = ty.getThemeInfo()) !== null && _a !== void 0 ? _a : {};
+        const activeColorStatic = this.data.activeColor || themeInfo['--app-M1'] || '#3678E3';
+        this.setData({ activeColorStatic });
+    },
+    beforeCreate() {
+        const { windowHeight } = getSystemInfoSync();
+        this.windowHeight = windowHeight;
+        ARRAY.push(this);
+    },
+    destroyed() {
+        ARRAY = ARRAY.filter(item => item !== this);
+    },
+    methods: {
+        updateItemListData() {
+            this.setData({
+                itemListData: this.children.map(child => child.data),
+            });
+        },
+        updateChildrenData() {
+            this.children.forEach(child => {
+                child.updateDataFromParent();
+            });
+        },
+        toggleItem(active) {
+            this.children.forEach((item, index) => {
+                const { showPopup } = item.data;
+                if (index === active) {
+                    item.toggle();
+                }
+                else if (showPopup) {
+                    item.toggle(false, { immediate: true });
+                }
+            });
+        },
+        close() {
+            this.children.forEach(child => {
+                child.toggle(false, { immediate: true });
+            });
+        },
+        getChildWrapperStyle() {
+            const { zIndex, direction } = this.data;
+            return getRect(this, '.smart-dropdown-menu').then(rect => {
+                const { top = 0, bottom = 0 } = rect;
+                const offset = direction === 'down' ? bottom : top;
+                let wrapperStyle = `z-index: ${zIndex};`;
+                if (direction === 'down') {
+                    wrapperStyle += `top: ${addUnit(offset)};`;
+                }
+                else {
+                    wrapperStyle += `top: 0;height: ${addUnit(offset)}`;
+                }
+                return wrapperStyle;
+            });
+        },
+        onTitleTap(event) {
+            const { index } = event.currentTarget.dataset;
+            const child = this.children[index];
+            if (!child.data.disabled) {
+                ARRAY.forEach(menuItem => {
+                    if (menuItem && menuItem.data.closeOnClickOutside && menuItem !== this) {
+                        menuItem.close();
+                    }
+                });
+                this.toggleItem(index);
+            }
+        },
+    },
+});

package/dist/dropdown-menu/index.json

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

package/dist/dropdown-menu/index.wxml

@@ -0,0 +1,24 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="smart-dropdown-menu smart-dropdown-menu--top-bottom custom-class">
+  <view
+    wx:for="{{ itemListData }}"
+    wx:key="index"
+    data-index="{{ index }}"
+    class="{{ utils.bem('dropdown-menu__item', { disabled: item.disabled }) }}"
+    bind:tap="onTitleTap"
+  >
+    <view
+      class="{{ item.titleClass }} {{ utils.bem('dropdown-menu__title', { active: item.showPopup }) }} title-class"
+      style="{{ item.showPopup ? 'color:' + activeColor : '' }}"
+    >
+      <view class="smart-ellipsis">
+        {{ computed.displayTitle(item) }}
+      </view>
+      <smart-icon name="{{ triangleDown }}" color="{{ item.showPopup ?  activeColorStatic : triangleColor }}" class="{{ utils.bem('dropdown-menu__title__triangle', { up: direction === 'up' }) }}" />
+    </view>
+  </view>
+
+  <slot />
+</view>