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

package/example/dist/action-sheet/demo/index.css

@@ -0,0 +1 @@
+@import '../../common/index.css';.content{color:var(--app-B4-N1,#3d3d3d);display:flex;font-size:20px;justify-content:center;padding:76px 0}.content,.content-number{background:var(--app-B1,#f6f7fb)}.content-number{color:var(--app-B4-N1,#000);text-align:center}.content-number,.demo-header{padding:10px 39px}.demo-text{font-size:40px;font-weight:600;line-height:46px}.demo-slider{margin:23px 0;min-height:45px}

package/example/dist/action-sheet/demo/index.d.ts

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

package/example/dist/action-sheet/demo/index.js

@@ -0,0 +1,110 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        show1: false,
+        show2: false,
+        show3: false,
+        show4: false,
+        show5: false,
+        showSelect: false,
+        showSelect2: false,
+        showNumber: false,
+        showPicker: false,
+        isReady: false,
+        action1: [{ name: 'Action' }, { name: 'Action' }, { name: 'Action' }],
+        action2: [
+            { name: I18n.t('coloringOptions'), color: '#ee0a24' },
+            { loading: true },
+            { name: I18n.t('disableOption'), disabled: true },
+        ],
+        actionSelect: [
+            { id: 0, name: 'Action', checked: true },
+            { id: 1, name: 'Action', checked: false },
+            { id: 2, name: 'Action', checked: false },
+            { id: 3, name: 'Action', checked: false },
+            { id: 4, name: 'Action', checked: false },
+            { id: 5, name: 'Action', checked: false },
+            { id: 6, name: 'Action', checked: false },
+            { id: 7, name: 'Action', checked: false },
+        ],
+        currentNumber: 0,
+        currentDate: new Date(2018, 0, 1),
+        currentDateStr: new Date(2018, 0, 1).toLocaleDateString(),
+        minDate: new Date(2018, 0, 1).getTime(),
+        formatter(type, value) {
+            if (type === 'year') {
+                return `${value}${I18n.t('year')}`;
+            }
+            if (type === 'month') {
+                return `${value}${I18n.t('month')}`;
+            }
+            return value;
+        },
+    },
+    methods: {
+        toggle(type) {
+            this.setData({
+                [type]: !this.data[type],
+            });
+        },
+        toggleActionSheet1() {
+            this.toggle('show1');
+        },
+        toggleActionSheet2() {
+            this.toggle('show2');
+        },
+        toggleActionSheet3() {
+            this.toggle('show3');
+        },
+        toggleActionSheet4() {
+            this.toggle('show4');
+        },
+        toggleActionSheet5() {
+            this.toggle('show5');
+        },
+        toggleActionSheet6() {
+            this.toggle('show6');
+        },
+        toggleActionSheetSelect() {
+            this.toggle('showSelect');
+        },
+        toggleActionSheetSelect2() {
+            this.toggle('showSelect2');
+        },
+        toggleActionSheetNumber() {
+            this.toggle('showNumber');
+        },
+        toggleActionSheetPicker() {
+            this.toggle('showPicker');
+        },
+        onAfterEnter() {
+            this.setData({ isReady: true });
+        },
+        onChange(event) {
+            this.setData({ currentNumber: event.detail.value });
+        },
+        onSelect(evt) {
+            const { id } = evt.detail;
+            const newActionSelect = this.data.actionSelect.map((item) => {
+                if (item.id === id)
+                    return Object.assign(Object.assign({}, item), { checked: true });
+                return Object.assign(Object.assign({}, item), { checked: false });
+            });
+            this.setData({
+                actionSelect: newActionSelect,
+            });
+        },
+        onInput(event) {
+            const { detail } = event;
+            const date = new Date(detail);
+            this.setData({ currentDate: date });
+        },
+        onPickerConfirm() {
+            var _a, _b;
+            this.setData({
+                showPicker: false,
+                currentDateStr: (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.currentDate) === null || _b === void 0 ? void 0 : _b.toLocaleDateString(),
+            });
+        },
+    },
+});

package/example/dist/action-sheet/demo/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-button": "../../button/index",
+    "smart-action-sheet": "../../action-sheet/index",
+    "smart-slider": "../../normal-slider/index",
+    "smart-datetime-picker": "../../datetime-picker/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/action-sheet/demo/index.wxml

@@ -0,0 +1,143 @@
+<demo-block title="{{I18n.t('basicUsage')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheetSelect">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-action-sheet
+    title="Title"
+    cancel-text="{{I18n.t('cancel')}}"
+    show="{{ showSelect }}"
+    actions="{{ actionSelect }}"
+    bind:select="onSelect"
+    bind:close="toggleActionSheetSelect"
+    bind:cancel="toggleActionSheetSelect"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('customizeSelectedIconColor')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheetSelect2">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-action-sheet
+    title="Title"
+    cancel-text="{{I18n.t('cancel')}}"
+    show="{{ showSelect2 }}"
+    actions="{{ actionSelect }}"
+    active-color="#ff0fff"
+    bind:select="onSelect"
+    bind:close="toggleActionSheetSelect2"
+    bind:cancel="toggleActionSheetSelect2"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('noSelectedList')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheet1">{{I18n.t('popUpMenu')}}</smart-button>
+  <smart-action-sheet
+    title="Title"
+    cancel-text="{{I18n.t('cancel')}}"
+    show="{{ show1 }}"
+    actions="{{ action1 }}"
+    bind:close="toggleActionSheet1"
+    bind:cancel="toggleActionSheet1"
+  />
+</demo-block>
+
+
+<demo-block title="{{I18n.t('optionStatus')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheet2">{{I18n.t('popUpMenu')}}</smart-button>
+  <smart-action-sheet
+    show="{{ show2 }}"
+    actions="{{ action2 }}"
+    bind:close="toggleActionSheet2"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('showConfirmButton')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheet3">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-action-sheet
+    show="{{ show3 }}"
+    actions="{{ action1 }}"
+    cancel-text="{{I18n.t('cancel')}}"
+    confirm-text="{{I18n.t('confirm')}}"
+    bind:close="toggleActionSheet3"
+    bind:cancel="toggleActionSheet3"
+    bind:confirm="toggleActionSheet3"
+  >
+  </smart-action-sheet>
+</demo-block>
+
+<demo-block title="{{I18n.t('displayDescriptionInformation')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheet4">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-action-sheet
+    show="{{ show4 }}"
+    actions="{{ action1 }}"
+    description="{{I18n.t('thisIsADescriptiveMessage')}}"
+    bind:close="toggleActionSheet4"
+  >
+  </smart-action-sheet>
+</demo-block>
+
+<demo-block title="{{I18n.t('customize')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheet5">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-action-sheet
+    show="{{ show5 }}"
+    title="Title"
+    cancel-text="Action"
+    confirm-text="Action"
+    bind:close="toggleActionSheet5"
+    bind:cancel="toggleActionSheet5"
+    bind:confirm="toggleActionSheet5"
+  >
+    <view class="content">{{I18n.t('custom')}}</view>
+  </smart-action-sheet>
+</demo-block>
+
+<demo-block title="{{I18n.t('customValue')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheetNumber">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-action-sheet
+    show="{{ showNumber }}"
+    title="Title"
+    cancel-text="Action"
+    confirm-text="Action"
+    bind:close="toggleActionSheetNumber"
+    bind:cancel="toggleActionSheetNumber"
+    bind:confirm="toggleActionSheetNumber"
+    bind:after-enter="onAfterEnter"
+  >
+    <view class="content-number">
+      <view class="demo-header">
+        <text class="demo-text">{{ currentNumber }}%</text>
+      </view>
+      <view class="demo-slider">
+        <smart-slider
+          wx:if="{{ isReady }}"
+          instanceId="action-sheet-slider"
+          trackStyle="height:45px;border-radius:8px;"
+          barStyle="height:45px;border-radius:8px;"
+          thumbStyle="width:15px;height:50px;background:#BBC5D4;border:2px solid #FFFFFF;box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.5);border-radius:2px;"
+          value="{{currentNumber}}"
+          bind:change="onChange"
+        />
+        <view wx:else style="height: 45px;" />
+      </view>
+    </view>
+  </smart-action-sheet>
+</demo-block>
+
+<demo-block title="{{I18n.t('customScroll')}} Picker: {{ currentDateStr }}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheetPicker">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-action-sheet
+    show="{{ showPicker }}"
+    title="Title"
+    cancel-text="Action"
+    confirm-text="Action"
+    bind:close="toggleActionSheetPicker"
+    bind:cancel="toggleActionSheetPicker"
+    bind:confirm="onPickerConfirm"
+  >
+    <smart-datetime-picker
+      show-toolbar="{{ false }}"
+      type="date"
+      data-type="date"
+      value="{{ currentDate }}"
+      min-date="{{ minDate }}"
+      bind:input="onInput"
+      formatter="{{ formatter }}"
+    />
+  </smart-action-sheet>
+</demo-block>

package/example/dist/action-sheet/demo/index.wxss

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.content{color:var(--app-B4-N1,#3d3d3d);display:flex;font-size:20px;justify-content:center;padding:76px 0}.content,.content-number{background:var(--app-B1,#f6f7fb)}.content-number{color:var(--app-B4-N1,#000);text-align:center}.content-number,.demo-header{padding:10px 39px}.demo-text{font-size:40px;font-weight:600;line-height:46px}.demo-slider{margin:23px 0;min-height:45px}

package/example/dist/action-sheet/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.smart-action-sheet__list{max-height:325px;overflow-y:scroll}.smart-action-sheet__icon{--icon-color:var(--action-sheet-active-icon-color,var(--app-M1,#3678e3));font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.smart-action-sheet__item{border-radius:var(--action-sheet-item-border-radius,0);color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.smart-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.smart-action-sheet__cancel,.smart-action-sheet__confirm,.smart-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.smart-action-sheet__cancel--hover,.smart-action-sheet__confirm--hover,.smart-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.smart-action-sheet__cancel:after,.smart-action-sheet__confirm:after,.smart-action-sheet__item:after{border-width:0}.smart-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.smart-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.smart-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.smart-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.smart-action-sheet__item--disabled.smart-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.smart-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.smart-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.smart-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.smart-action-sheet__loading{color:inherit!important;display:flex!important}.smart-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}

package/example/dist/action-sheet/index.d.ts

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

package/example/dist/action-sheet/index.js

@@ -0,0 +1,106 @@
+import checkMarkIcon from '@tuya-miniapp/icons/dist/svg/Check';
+import { SmartComponent } from '../common/component';
+import { button } from '../mixins/button';
+SmartComponent({
+    classes: ['list-class'],
+    mixins: [button],
+    props: {
+        show: Boolean,
+        title: String,
+        cancelText: String,
+        confirmText: String,
+        description: String,
+        activeColor: String,
+        round: {
+            type: Boolean,
+            value: true,
+        },
+        zIndex: {
+            type: Number,
+            value: 100,
+        },
+        actions: {
+            type: Array,
+            value: [],
+        },
+        overlay: {
+            type: Boolean,
+            value: true,
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+        },
+        closeOnClickAction: {
+            type: Boolean,
+            value: true,
+        },
+        safeAreaInsetBottom: {
+            type: Boolean,
+            value: true,
+        },
+        safeAreaInsetBottomMin: {
+            type: Number,
+            value: 16,
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        checkMarkIcon,
+    },
+    methods: {
+        onSelect(event) {
+            const { index } = event.currentTarget.dataset;
+            const { actions, closeOnClickAction, canIUseGetUserProfile } = this.data;
+            const item = actions[index];
+            if (item) {
+                this.$emit('select', item);
+                if (closeOnClickAction) {
+                    this.onClose();
+                }
+                if (item.openType === 'getUserInfo' && canIUseGetUserProfile) {
+                    wx.getUserProfile({
+                        desc: item.getUserProfileDesc || '  ',
+                        complete: userProfile => {
+                            this.$emit('getuserinfo', userProfile);
+                        },
+                    });
+                }
+            }
+        },
+        onCancel() {
+            this.$emit('cancel');
+        },
+        onConfirm() {
+            this.$emit('confirm');
+        },
+        onClose() {
+            this.$emit('close');
+        },
+        onClickOverlay() {
+            this.$emit('click-overlay');
+            this.onClose();
+        },
+        onBeforeEnter() {
+            this.$emit('before-enter');
+        },
+        onEnter() {
+            this.$emit('enter');
+        },
+        onAfterEnter() {
+            this.$emit('after-enter');
+        },
+        onBeforeLeave() {
+            this.$emit('before-leave');
+        },
+        onLeave() {
+            this.$emit('leave');
+        },
+        onAfterLeave() {
+            this.$emit('after-leave');
+        },
+    },
+});

package/example/dist/action-sheet/index.json

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

package/example/dist/action-sheet/index.wxml

@@ -0,0 +1,85 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<smart-popup
+  show="{{ show }}"
+  position="bottom"
+  round="{{ round }}"
+  z-index="{{ zIndex }}"
+  overlay="{{ overlay }}"
+  custom-class="smart-action-sheet custom-class"
+  safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
+  safe-area-inset-bottom-min="{{ safeAreaInsetBottomMin }}"
+  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"
+>
+  <view wx:if="{{ title }}" class="smart-action-sheet__header">
+    {{ title }}
+  </view>
+  <view wx:if="{{ description }}" class="smart-action-sheet__description smart-hairline--bottom">
+    {{ description }}
+  </view>
+  <scroll-view wx:if="{{ actions && actions.length }}" class="smart-action-sheet__list list-class">
+    <!-- button外包一层view，防止actions动态变化，导致渲染时button被打散 -->
+    <button
+      wx:for="{{ actions }}"
+      wx:key="index"
+      open-type="{{ item.disabled || item.loading || (canIUseGetUserProfile && item.openType === 'getUserInfo') ? '' : item.openType }}"
+      style="{{ item.color ? 'color: ' + item.color : '' }}"
+      class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }} {{ item.className || '' }}"
+      hover-class="smart-action-sheet__item--hover"
+      data-index="{{ index }}"
+      bindtap="{{ item.disabled || item.loading ? '' : 'onSelect' }}"
+      bindgetuserinfo="onGetUserInfo"
+      bindcontact="onContact"
+      bindgetphonenumber="onGetPhoneNumber"
+      binderror="onError"
+      bindlaunchapp="onLaunchApp"
+      bindopensetting="onOpenSetting"
+      lang="{{ lang }}"
+      session-from="{{ sessionFrom }}"
+      send-message-title="{{ sendMessageTitle }}"
+      send-message-path="{{ sendMessagePath }}"
+      send-message-img="{{ sendMessageImg }}"
+      show-message-card="{{ showMessageCard }}"
+      app-parameter="{{ appParameter }}"
+    >
+      <block wx:if="{{ !item.loading }}">
+        {{ item.name }}
+        <view wx:if="{{ item.subname }}" class="smart-action-sheet__subname" >{{ item.subname }}</view>
+        <smart-icon wx:if="{{ item.checked }}" name="{{ checkMarkIcon }}" class="smart-action-sheet__icon" color="{{ activeColor }}" />
+      </block>
+      <smart-loading wx:else custom-class="smart-action-sheet__loading" size="22px" />
+    </button>
+  </scroll-view>
+  <slot />
+  <block wx:if="{{ cancelText || confirmText }}">
+    <view class="smart-action-sheet__gap" />
+    <view class="smart-action-sheet__footer">
+      <view
+        wx:if="{{ cancelText }}"
+        class="smart-action-sheet__cancel"
+        hover-class="smart-action-sheet__cancel--hover"
+        hover-stay-time="70"
+        bind:tap="onCancel"
+      >
+        {{ cancelText }}
+      </view>
+      <view
+        wx:if="{{ confirmText }}"
+        class="smart-action-sheet__confirm"
+        hover-class="smart-action-sheet__confirm--hover"
+        hover-stay-time="70"
+        bind:tap="onConfirm"
+      >
+        {{ confirmText }}
+      </view>
+     </view>
+  </block>
+</smart-popup>

package/example/dist/action-sheet/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.smart-action-sheet__list{max-height:325px;overflow-y:scroll}.smart-action-sheet__icon{--icon-color:var(--action-sheet-active-icon-color,var(--app-M1,#3678e3));font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.smart-action-sheet__item{border-radius:var(--action-sheet-item-border-radius,0);color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.smart-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.smart-action-sheet__cancel,.smart-action-sheet__confirm,.smart-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.smart-action-sheet__cancel--hover,.smart-action-sheet__confirm--hover,.smart-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.smart-action-sheet__cancel:after,.smart-action-sheet__confirm:after,.smart-action-sheet__item:after{border-width:0}.smart-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.smart-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.smart-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.smart-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.smart-action-sheet__item--disabled.smart-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.smart-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.smart-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.smart-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.smart-action-sheet__loading{color:inherit!important;display:flex!important}.smart-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}

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

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

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

@@ -0,0 +1,42 @@
+var _a;
+import { SmartComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+const db = (_a = wx.cloud) === null || _a === void 0 ? void 0 : _a.database();
+SmartComponent({
+    data: {
+        areaList: {},
+        loading: true,
+        value: 330302,
+    },
+    mounted() {
+        db === null || db === void 0 ? void 0 : db.collection('region').limit(1).get().then((res) => {
+            if (res.data && res.data.length > 0) {
+                this.setData({
+                    loading: false,
+                    areaList: res.data[0],
+                });
+            }
+        }).catch((err) => {
+            console.log(err);
+            this.setData({
+                loading: false,
+            });
+        });
+    },
+    methods: {
+        onChange(event) {
+            const { values } = event.detail;
+            Toast({
+                context: this,
+                selector: '#smart-toast-area',
+                message: values.map((item) => item.name).join('-'),
+            });
+        },
+        onConfirm(event) {
+            console.log(event);
+        },
+        onCancel(event) {
+            console.log(event);
+        },
+    },
+});

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

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

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

@@ -0,0 +1,11 @@
+<demo-block title="{{I18n.t('basicUsage')}}">
+  <smart-area
+    value="{{ value }}"
+    loading="{{ loading }}"
+    area-list="{{ areaList }}"
+    bind:change="onChange"
+    bind:confirm="onConfirm"
+    bind:cancel="onCancel"
+  />
+</demo-block>
+<smart-toast id="smart-toast-area" />

package/example/dist/area/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';

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

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