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

package/example/dist/dialog/index.wxml

@@ -0,0 +1,144 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<smart-popup
+  show="{{ show }}"
+  z-index="{{ zIndex }}"
+  overlay="{{ overlay }}"
+  transition="{{ transition }}"
+  custom-class="smart-dialog smart-dialog--{{ theme }} {{ className }} custom-class"
+  custom-style="width: {{ utils.addUnit(width) }};{{ customStyle }}"
+  overlay-style="{{ overlayStyle }}"
+  native-disabled="{{ nativeDisabled }}"
+  close-on-click-overlay="{{ closeOnClickOverlay }}"
+  root-portal="{{ rootPortal }}"
+  bind:close="onClickOverlay"
+  bind:before-enter="onBeforeEnter"
+  bind:enter="onEnter"
+  bind:after-enter="onAfterEnter"
+  bind:before-leave="onBeforeLeave"
+  bind:leave="onLeave"
+  bind:after-leave="onAfterLeave"
+  bind:enter-error="onPopUpError"
+  bind:leave-error="onPopUpError"
+>
+  <view
+    wx:if="{{ title || useTitleSlot }}"
+    class="{{ utils.bem('dialog__header', { isolated: !(message || useSlot) }) }}"
+  >
+    <smart-icon wx:if="{{ icon }}" class="smart-dialog__header-icon" custom-class="header-icon-class" name="{{ warningIcon }}" color="#F04C4C" />
+    <slot wx:if="{{ useTitleSlot }}" name="title" />
+    <block wx:elif="{{ title }}">{{ title }}</block>
+  </view>
+
+  <input
+    wx:if="{{ value !== null }}"
+    class="smart-dialog__input"
+    value="{{ value }}"
+    type="{{ type }}"
+    password="{{ password }}"
+    placeholder="{{ placeholder }}"
+    maxlength="{{ maxlength }}"
+    bind:input="onInput"
+  />
+
+  <slot wx:if="{{ useSlot }}" />
+  <view
+    wx:elif="{{ message }}"
+    class="{{ utils.bem('dialog__message', [theme, messageAlign, { hasTitle: title }]) }}"
+  >
+    <text class="smart-dialog__message-text">{{ message }}</text>
+  </view>
+
+  <smart-goods-action wx:if="{{ theme === 'round-button' }}" custom-class="smart-dialog__footer--round-button">
+    <smart-goods-action-button
+      wx:if="{{ showCancelButton }}"
+      loading="{{ loaing.cancel }}"
+      class="smart-dialog__button smart-hairline--right"
+      custom-class="smart-dialog__cancel cancle-button-class"
+      custom-style="color: {{ cancelButtonColor }}"
+      bind:click="onCancel"
+    >
+      {{ cancelButtonText }}
+    </smart-goods-action-button>
+    <smart-goods-action-button
+      wx:if="{{ showConfirmButton }}"
+      class="smart-dialog__button"
+      loading="{{ loading.confirm }}"
+      custom-class="smart-dialog__confirm confirm-button-class"
+      custom-style="color: {{ confirmButtonColor }}"
+      button-id="{{ confirmButtonId }}"
+      open-type="{{ confirmButtonOpenType }}"
+      lang="{{ lang }}"
+      business-id="{{ businessId }}"
+      session-from="{{ sessionFrom }}"
+      send-message-title="{{ sendMessageTitle }}"
+      send-message-path="{{ sendMessagePath }}"
+      send-message-img="{{ sendMessageImg }}"
+      show-message-card="{{ showMessageCard }}"
+      app-parameter="{{ appParameter }}"
+      bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
+      bindgetRealTimePhoneNumber="onGetRealTimePhoneNumber"
+      bind:click="onConfirm"
+      bindgetuserinfo="onGetUserInfo"
+      bindcontact="onContact"
+      bindgetphonenumber="onGetPhoneNumber"
+      binderror="onError"
+      bindlaunchapp="onLaunchApp"
+      bindopensetting="onOpenSetting"
+    >
+      {{ confirmButtonText }}
+    </smart-goods-action-button>
+  </smart-goods-action>
+
+  <view wx:elif="{{ showCancelButton || showConfirmButton }}" class="smart-hairline--top smart-dialog__footer">
+    <block wx:if="{{ showCancelButton }}">
+      <slot wx:if="{{ useCancelButtonSlot }}" name="cancel-button" />
+
+      <smart-button
+        wx:else
+        size="large"
+        loading="{{ loading.cancel }}"
+        class="smart-dialog__button smart-hairline--right"
+        custom-class="smart-dialog__cancel cancle-button-class"
+        custom-style="color: {{ cancelButtonColor || 'var(--dialog-cancel-color, var(--app-B4-N3, rgba(0, 0, 0, 0.5)))' }}"
+        bind:click="onCancel"
+      >
+        {{ cancelButtonText }}
+      </smart-button>
+    </block>
+
+    <block wx:if="{{ showConfirmButton }}">
+      <slot wx:if="{{ useConfirmButtonSlot }}" name="confirm-button" />
+
+      <smart-button
+        wx:else
+        size="large"
+        class="smart-dialog__button"
+        loading="{{ loading.confirm }}"
+        custom-class="smart-dialog__confirm confirm-button-class"
+        custom-style="color: {{ confirmButtonColor || 'var(--dialog-confirm-color, var(--app-B4-N1, rgba(0, 0, 0, 1)))' }}"
+        button-id="{{ confirmButtonId }}"
+        open-type="{{ confirmButtonOpenType }}"
+        lang="{{ lang }}"
+        business-id="{{ businessId }}"
+        session-from="{{ sessionFrom }}"
+        send-message-title="{{ sendMessageTitle }}"
+        send-message-path="{{ sendMessagePath }}"
+        send-message-img="{{ sendMessageImg }}"
+        show-message-card="{{ showMessageCard }}"
+        app-parameter="{{ appParameter }}"
+        bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
+        bindgetRealTimePhoneNumber="onGetRealTimePhoneNumber"
+        bind:click="onConfirm"
+        bindgetuserinfo="onGetUserInfo"
+        bindcontact="onContact"
+        bindgetphonenumber="onGetPhoneNumber"
+        binderror="onError"
+        bindlaunchapp="onLaunchApp"
+        bindopensetting="onOpenSetting"
+      >
+        {{ confirmButtonText }}
+      </smart-button>
+    </block>
+  </view>
+</smart-popup>

package/example/dist/dialog/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-dialog{background-color:var(--dialog-background-color,var(--app-B4,#fff));border-radius:var(--dialog-border-radius,16px);font-size:var(--dialog-font-size,16px);overflow:hidden;top:45%!important;width:var(--dialog-width,311px)}@media (max-width:321px){.smart-dialog{width:var(--dialog-small-screen-width,90%)}}.smart-dialog__header{color:var(--dialog-header-font-color,var(--app-B4-N1,#000));font-weight:var(--dialog-header-font-weight,400);line-height:var(--dialog-header-line-height,24px);padding:var(--dialog-header-padding,0);padding-top:var(--dialog-header-padding-top,24px);text-align:center}.smart-dialog__header-icon{border-radius:100%;display:block;font-size:var(--dialog-header-icon-size,39px);height:var(--dialog-header-icon-size,39px);margin:auto auto 12px;width:var(--dialog-header-icon-size,39px)}.smart-dialog__header--isolated{padding:var(--dialog-header-isolated-padding,24px 0)}.smart-dialog__message{-webkit-overflow-scrolling:touch;color:var(--dialog-message-text-color,var(--app-B4-N1,#000));font-size:var(--dialog-message-font-size,16px);line-height:var(--dialog-message-line-height,20px);max-height:var(--dialog-message-max-height,60vh);overflow-y:auto;padding:var(--dialog-message-padding,24px);text-align:center}.smart-dialog__message-text{word-wrap:break-word}.smart-dialog__message--hasTitle{color:var(--dialog-has-title-message-text-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--dialog-has-title-message-font-size,14px);padding-top:var(--dialog-has-title-message-padding-top,8px)}.smart-dialog__message--round-button{padding-bottom:16px}.smart-dialog__message--left{text-align:left}.smart-dialog__message--right{text-align:right}.smart-dialog__message--justify{text-align:justify}.smart-dialog__input{background-color:var(--dialog-input-background-color,var(--app-B4-N9,rgba(0,0,0,.05)));border-radius:var(--dialog-input-border-radius,10px);font-size:var(--dialog-input-font-size,14px);height:var(--dialog-input-height,40px);margin:var(--dialog-input-margin,0 16px 24px);padding:var(--dialog-input-padding,0 10px)}.smart-dialog__footer{display:flex}.smart-dialog__footer--round-button{height:40px!important;padding:8px 20px 16px!important;position:relative!important}.smart-dialog__button{flex:1}.smart-dialog__cancel,.smart-dialog__confirm{border:0!important;border-radius:0!important}.smart-dialog-bounce-enter{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}.smart-dialog-bounce-leave-active{opacity:0;transform:translate3d(-50%,-50%,0) scale(.9)}.smart-dialog--round-button .smart-dialog__cancel,.smart-dialog--round-button .smart-dialog__confirm{border-radius:var(--dialog--round-button-border-radius,20px)!important}

package/example/dist/divider/demo/index.d.ts

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

package/example/dist/divider/demo/index.js

@@ -0,0 +1,4 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {},
+});

package/example/dist/divider/demo/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-divider": "../../divider/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/divider/demo/index.wxml

@@ -0,0 +1,17 @@
+<demo-block custom-class="white" title="{{I18n.t('basicUsage')}}" padding>
+  <smart-divider />
+</demo-block>
+
+<demo-block custom-class="white" title="{{I18n.t('contentPosition')}}" padding>
+  <smart-divider content-position="center">{{I18n.t('text')}}</smart-divider>
+  <smart-divider content-position="left">{{I18n.t('text')}}</smart-divider>
+  <smart-divider content-position="right">{{I18n.t('text')}}</smart-divider>
+</demo-block>
+
+<demo-block custom-class="white" title="{{I18n.t('dottedLine')}}" padding>
+  <smart-divider dashed />
+</demo-block>
+
+<demo-block custom-class="white" title="{{I18n.t('customStyle')}}" padding>
+  <smart-divider content-position="center" custom-style="color: #1989fa;border-color: #1989fa;font-size: 18px;">{{I18n.t('text')}}</smart-divider>
+</demo-block>

package/example/dist/divider/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-divider{align-items:center;border:0 solid var(--divider-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));color:var(--divider-text-color,#969799);display:flex;font-size:var(--divider-font-size,14px);line-height:var(--divider-line-height,24px);margin:var(--divider-margin,16px 0)}.smart-divider:after,.smart-divider:before{border-color:inherit;border-style:inherit;border-width:1px 0 0;box-sizing:border-box;display:block;flex:1;height:1px}.smart-divider:before{content:""}.smart-divider--hairline:after,.smart-divider--hairline:before{transform:scaleY(.5)}.smart-divider--dashed{border-style:dashed}.smart-divider--center:before,.smart-divider--left:before,.smart-divider--right:before{margin-right:var(--divider-content-padding,16px)}.smart-divider--center:after,.smart-divider--left:after,.smart-divider--right:after{content:"";margin-left:var(--divider-content-padding,16px)}.smart-divider--left:before{max-width:var(--divider-content-left-width,10%)}.smart-divider--right:after{max-width:var(--divider-content-right-width,10%)}

package/example/dist/divider/index.d.ts

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

package/example/dist/divider/index.js

@@ -0,0 +1,12 @@
+import { SmartComponent } from '../common/component';
+SmartComponent({
+    props: {
+        dashed: Boolean,
+        hairline: Boolean,
+        contentPosition: String,
+        fontSize: String,
+        borderColor: String,
+        textColor: String,
+        customStyle: String,
+    },
+});

package/example/dist/divider/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/example/dist/divider/index.wxml

@@ -0,0 +1,9 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('divider', [{ dashed, hairline }, contentPosition]) }}"
+  style="{{ computed.rootStyle({ borderColor, textColor, fontSize, customStyle }) }}"
+>
+  <slot />
+</view>

package/example/dist/divider/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      'border-color': data.borderColor,
+      color: data.textColor,
+      'font-size': addUnit(data.fontSize),
+    },
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/example/dist/divider/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-divider{align-items:center;border:0 solid var(--divider-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));color:var(--divider-text-color,#969799);display:flex;font-size:var(--divider-font-size,14px);line-height:var(--divider-line-height,24px);margin:var(--divider-margin,16px 0)}.smart-divider:after,.smart-divider:before{border-color:inherit;border-style:inherit;border-width:1px 0 0;box-sizing:border-box;display:block;flex:1;height:1px}.smart-divider:before{content:""}.smart-divider--hairline:after,.smart-divider--hairline:before{transform:scaleY(.5)}.smart-divider--dashed{border-style:dashed}.smart-divider--center:before,.smart-divider--left:before,.smart-divider--right:before{margin-right:var(--divider-content-padding,16px)}.smart-divider--center:after,.smart-divider--left:after,.smart-divider--right:after{content:"";margin-left:var(--divider-content-padding,16px)}.smart-divider--left:before{max-width:var(--divider-content-left-width,10%)}.smart-divider--right:after{max-width:var(--divider-content-right-width,10%)}

package/example/dist/dropdown-item/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.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/example/dist/dropdown-item/index.d.ts

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

package/example/dist/dropdown-item/index.js

@@ -0,0 +1,140 @@
+import { useParent } from '../common/relation';
+import { SmartComponent } from '../common/component';
+import checkMarkIcon from '@tuya-miniapp/icons/dist/svg/Check';
+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',
+        },
+        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;
+        // @ts-ignore
+        const themeInfo = (_a = ty === null || ty === void 0 ? void 0 : 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/example/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/example/dist/dropdown-item/index.wxml

@@ -0,0 +1,50 @@
+<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"
+  >
+    <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 />
+  </smart-popup>
+</view>

package/example/dist/dropdown-item/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.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/example/dist/dropdown-item/shared.d.ts

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

package/example/dist/dropdown-item/shared.js

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

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

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

package/example/dist/dropdown-menu/demo/index.js

@@ -0,0 +1,47 @@
+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/example/dist/dropdown-menu/demo/index.json

@@ -0,0 +1,11 @@
+{
+  "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": "../../../components/demo-block/index"
+  }
+}

package/example/dist/dropdown-menu/demo/index.wxml

@@ -0,0 +1,67 @@
+<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>
+

package/example/dist/dropdown-menu/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.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/example/dist/dropdown-menu/index.d.ts

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