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

package/example/dist/area/index.js

@@ -0,0 +1,219 @@
+import { SmartComponent } from '../common/component';
+import { pickerProps } from '../picker/shared';
+import { requestAnimationFrame } from '../common/utils';
+const EMPTY_CODE = '000000';
+SmartComponent({
+    classes: ['active-class', 'toolbar-class', 'column-class'],
+    props: Object.assign(Object.assign({}, pickerProps), { showToolbar: {
+            type: Boolean,
+            value: true,
+        }, value: {
+            type: String,
+            observer(value) {
+                this.code = value;
+                this.setValues();
+            },
+        }, areaList: {
+            type: Object,
+            value: {},
+            observer: 'setValues',
+        }, columnsNum: {
+            type: null,
+            value: 3,
+        }, columnsPlaceholder: {
+            type: Array,
+            observer(val) {
+                this.setData({
+                    typeToColumnsPlaceholder: {
+                        province: val[0] || '',
+                        city: val[1] || '',
+                        county: val[2] || '',
+                    },
+                });
+            },
+        } }),
+    data: {
+        columns: [{ values: [] }, { values: [] }, { values: [] }],
+        typeToColumnsPlaceholder: {},
+    },
+    mounted() {
+        requestAnimationFrame(() => {
+            this.setValues();
+        });
+    },
+    methods: {
+        getPicker() {
+            if (this.picker == null) {
+                this.picker = this.selectComponent('.smart-area__picker');
+            }
+            return this.picker;
+        },
+        onCancel(event) {
+            this.emit('cancel', event.detail);
+        },
+        onConfirm(event) {
+            const { index } = event.detail;
+            let { value } = event.detail;
+            value = this.parseValues(value);
+            this.emit('confirm', { value, index });
+        },
+        emit(type, detail) {
+            detail.values = detail.value;
+            delete detail.value;
+            this.$emit(type, detail);
+        },
+        parseValues(values) {
+            const { columnsPlaceholder } = this.data;
+            return values.map((value, index) => {
+                if (value && (!value.code || value.name === columnsPlaceholder[index])) {
+                    return Object.assign(Object.assign({}, value), { code: '', name: '' });
+                }
+                return value;
+            });
+        },
+        onChange(event) {
+            var _a;
+            const { index, picker, value } = event.detail;
+            this.code = value[index].code;
+            (_a = this.setValues()) === null || _a === void 0 ? void 0 : _a.then(() => {
+                this.$emit('change', {
+                    picker,
+                    values: this.parseValues(picker.getValues()),
+                    index,
+                });
+            });
+        },
+        getConfig(type) {
+            const { areaList } = this.data;
+            return (areaList && areaList[`${type}_list`]) || {};
+        },
+        getList(type, code) {
+            if (type !== 'province' && !code) {
+                return [];
+            }
+            const { typeToColumnsPlaceholder } = this.data;
+            const list = this.getConfig(type);
+            let result = Object.keys(list).map(code => ({
+                code,
+                name: list[code],
+            }));
+            if (code != null) {
+                // oversea code
+                if (code[0] === '9' && type === 'city') {
+                    code = '9';
+                }
+                result = result.filter(item => item.code.indexOf(code) === 0);
+            }
+            if (typeToColumnsPlaceholder[type] && result.length) {
+                // set columns placeholder
+                const codeFill = type === 'province'
+                    ? ''
+                    : type === 'city'
+                        ? EMPTY_CODE.slice(2, 4)
+                        : EMPTY_CODE.slice(4, 6);
+                result.unshift({
+                    code: `${code}${codeFill}`,
+                    name: typeToColumnsPlaceholder[type],
+                });
+            }
+            return result;
+        },
+        getIndex(type, code) {
+            let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
+            const list = this.getList(type, code.slice(0, compareNum - 2));
+            // oversea code
+            if (code[0] === '9' && type === 'province') {
+                compareNum = 1;
+            }
+            code = code.slice(0, compareNum);
+            for (let i = 0; i < list.length; i++) {
+                if (list[i].code.slice(0, compareNum) === code) {
+                    return i;
+                }
+            }
+            return 0;
+        },
+        setValues() {
+            const picker = this.getPicker();
+            if (!picker) {
+                return;
+            }
+            let code = this.code || this.getDefaultCode();
+            const provinceList = this.getList('province');
+            const cityList = this.getList('city', code.slice(0, 2));
+            const stack = [];
+            const indexes = [];
+            const { columnsNum } = this.data;
+            if (columnsNum >= 1) {
+                stack.push(picker.setColumnValues(0, provinceList, false));
+                indexes.push(this.getIndex('province', code));
+            }
+            if (columnsNum >= 2) {
+                stack.push(picker.setColumnValues(1, cityList, false));
+                indexes.push(this.getIndex('city', code));
+                if (cityList.length && code.slice(2, 4) === '00') {
+                    [{ code }] = cityList;
+                }
+            }
+            if (columnsNum === 3) {
+                stack.push(picker.setColumnValues(2, this.getList('county', code.slice(0, 4)), false));
+                indexes.push(this.getIndex('county', code));
+            }
+            return Promise.all(stack)
+                .catch(() => { })
+                .then(() => picker.setIndexes(indexes))
+                .catch(() => { });
+        },
+        getDefaultCode() {
+            const { columnsPlaceholder } = this.data;
+            if (columnsPlaceholder.length) {
+                return EMPTY_CODE;
+            }
+            const countyCodes = Object.keys(this.getConfig('county'));
+            if (countyCodes[0]) {
+                return countyCodes[0];
+            }
+            const cityCodes = Object.keys(this.getConfig('city'));
+            if (cityCodes[0]) {
+                return cityCodes[0];
+            }
+            return '';
+        },
+        getValues() {
+            const picker = this.getPicker();
+            if (!picker) {
+                return [];
+            }
+            return this.parseValues(picker.getValues().filter(value => !!value));
+        },
+        getDetail() {
+            const values = this.getValues();
+            const area = {
+                code: '',
+                country: '',
+                province: '',
+                city: '',
+                county: '',
+            };
+            if (!values.length) {
+                return area;
+            }
+            const names = values.map((item) => item.name);
+            area.code = values[values.length - 1].code;
+            if (area.code[0] === '9') {
+                area.country = names[1] || '';
+                area.province = names[2] || '';
+            }
+            else {
+                area.province = names[0] || '';
+                area.city = names[1] || '';
+                area.county = names[2] || '';
+            }
+            return area;
+        },
+        reset(code) {
+            this.code = code || '';
+            return this.setValues();
+        },
+    },
+});

package/example/dist/area/index.json

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

package/example/dist/area/index.wxml

@@ -0,0 +1,20 @@
+<wxs src="./index.wxs" module="computed" />
+
+<smart-picker
+  class="smart-area__picker"
+  active-class="active-class"
+  toolbar-class="toolbar-class"
+  column-class="column-class"
+  show-toolbar="{{ showToolbar }}"
+  value-key="name"
+  title="{{ title }}"
+  loading="{{ loading }}"
+  columns="{{ computed.displayColumns(columns, columnsNum) }}"
+  item-height="{{ itemHeight }}"
+  visible-item-count="{{ visibleItemCount }}"
+  cancel-button-text="{{ cancelButtonText }}"
+  confirm-button-text="{{ confirmButtonText }}"
+  bind:change="onChange"
+  bind:confirm="onConfirm"
+  bind:cancel="onCancel"
+/>

package/example/dist/area/index.wxs

@@ -0,0 +1,8 @@
+/* eslint-disable */
+function displayColumns(columns, columnsNum) {
+  return columns.slice(0, +columnsNum);
+}
+
+module.exports = {
+  displayColumns: displayColumns,
+};

package/example/dist/area/index.wxss

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

package/example/dist/battery/demo/index.css

@@ -0,0 +1 @@
+@import '../../common/index.css';.line{display:flex;flex-direction:row;justify-content:space-between;padding:2px 20px}

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+<demo-block title="{{I18n.t('basicUsage')}}">
+  <view class="line">
+    <battery size="20" value="100" />
+    <battery />
+    <battery value="10" />
+    <battery value="3" />
+    <battery value="0" />
+  </view>
+</demo-block>
+<demo-block title="{{I18n.t('level')}}">
+  <view class="line">
+    <battery type="horizontal" value="100" />
+    <battery type="horizontal" />
+    <battery type="horizontal" value="10" />
+    <battery type="horizontal" value="3" />
+    <battery type="horizontal" value="0" />
+  </view>
+</demo-block>

package/example/dist/battery/demo/index.wxss

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.line{display:flex;flex-direction:row;justify-content:space-between;padding:2px 20px}

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

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

package/example/dist/battery/index.js

@@ -0,0 +1,106 @@
+import { SmartComponent } from '../common/component';
+const wrapBatteryD = 'M6.5,0 C6.77614237,-5.07265313e-17 7,0.223857625 7,0.5 L7,1 L9.5,1 C10.3284271,1 11,1.67157288 11,2.5 L11,17.5 C11,18.3284271 10.3284271,19 9.5,19 L1.5,19 C0.671572875,19 0,18.3284271 0,17.5 L0,2.5 C0,1.67157288 0.671572875,1 1.5,1 L4,1 L4,0.5 C4,0.223857625 4.22385763,5.07265313e-17 4.5,0 L6.5,0 Z M9.5,2 L1.5,2 C1.22385763,2 1,2.22385763 1,2.5 L1,17.5 C1,17.7761424 1.22385763,18 1.5,18 L9.5,18 C9.77614237,18 10,17.7761424 10,17.5 L10,2.5 C10,2.22385763 9.77614237,2 9.5,2 Z';
+SmartComponent({
+    props: {
+        type: {
+            type: String,
+            value: 'vertical',
+        },
+        size: {
+            type: Number,
+            value: 10,
+        },
+        value: {
+            type: Number,
+            observer: 'init',
+            value: 70,
+        },
+        highColor: {
+            type: String,
+            value: '#70CF98',
+        },
+        middleColor: {
+            type: String,
+            value: '#F5A623',
+        },
+        lowColor: {
+            type: String,
+            value: '#FF4444',
+        },
+        backgroundColor: String,
+        onCalcColor: null,
+    },
+    data: {
+        svgUrl: '',
+    },
+    created() {
+        this.init();
+    },
+    methods: {
+        init() {
+            const bgColor = this.getBgColor();
+            let IValue = this.data.value;
+            if (IValue > 100) {
+                IValue = 100;
+            }
+            else if (IValue < 0) {
+                IValue = 0;
+            }
+            const top = 17 - ((17 - 3) * IValue) / 100;
+            // 左上、右上、右下、左下
+            const points = `2 ${top} 9 ${top} 9 17 2 17`;
+            const insideColor = this.calcColor(top);
+            const svgNode = `<svg
+        width="${1.1 * this.data.size}px"
+        height="${1.9 * this.data.size}px"
+        viewBox="0 0 11 19"
+      >
+        <path d='${wrapBatteryD}' fill='${this.data.backgroundColor || bgColor}' />
+        <polygon points='${points}' fill='${insideColor}' />
+      </svg>`;
+            this.setData({
+                svgUrl: this.toSvgCssBackground(svgNode),
+            });
+        },
+        getBgColor() {
+            const WX = wx;
+            const bgColor = WX.getThemeInfo();
+            if (bgColor && bgColor['--app-B1-N3']) {
+                return bgColor['--app-B1-N3'];
+            }
+            const d = wx.getSystemInfoSync();
+            if (d && d.theme === 'light') {
+                return '#fff';
+            }
+            return 'rgba(0, 0, 0, 0.5)';
+        },
+        calcColor(top) {
+            // 自定义电量的颜色分配规则
+            const color = typeof this.data.onCalcColor === 'function' && this.data.onCalcColor();
+            if (color) {
+                return color;
+            }
+            if (top <= 14.2 && top >= 3) {
+                return this.data.highColor;
+            }
+            if (top <= 15.6 && top > 14.2) {
+                return this.data.middleColor;
+            }
+            return this.data.lowColor;
+        },
+        toSvgCssBackground(svgString) {
+            let res = svgString;
+            res = svgString
+                .replace('<svg', ~svgString.indexOf('xmlns') ? '<svg' : '<svg xmlns="http://www.w3.org/2000/svg"')
+                .replace(/"/g, "'")
+                .replace(/%/g, '%25')
+                .replace(/#/g, '%23')
+                .replace(/{/g, '%7B')
+                .replace(/}/g, '%7D')
+                .replace(/</g, '%3C')
+                .replace(/>/g, '%3E')
+                .replace(/\s+/g, ' ');
+            return `background-image: url("data:image/svg+xml,${res}"); width: ${1.1 * this.data.size}px; height: ${1.9 * this.data.size}px; background-repeat: no-repeat; transform: ${this.data.type === 'horizontal' ? 'rotate(90deg)' : '0'}`;
+        },
+    },
+});

package/example/dist/battery/index.json

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

package/example/dist/battery/index.wxml

@@ -0,0 +1 @@
+<view style="{{svgUrl}}"></view>

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

@@ -0,0 +1 @@
+@import '../../common/index.css';.content{background:var(--app-B1,#f6f7fb);color:var(--app-B4-N1,#3d3d3d);display:flex;font-size:20px;justify-content:center}.footer{margin:16px 0}.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/bottom-sheet/demo/index.d.ts

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

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

@@ -0,0 +1,24 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        show1: false,
+        show2: false,
+        show3: false,
+    },
+    methods: {
+        toggle(type) {
+            this.setData({
+                [type]: !this.data[type],
+            });
+        },
+        toggleActionSheet1() {
+            this.toggle('show1');
+        },
+        toggleActionSheet2() {
+            this.toggle('show2');
+        },
+        toggleActionSheet3() {
+            this.toggle('show3');
+        },
+    },
+});

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

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

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

@@ -0,0 +1,37 @@
+<demo-block title="{{I18n.t('basicUsage')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheet1">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-bottom-sheet
+    title="Title"
+    show="{{ show1 }}"
+    bind:close="toggleActionSheet1"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('customize')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheet2">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-bottom-sheet
+    show="{{ show2 }}"
+    title="Title"
+    bind:close="toggleActionSheet2"
+  >
+    <view class="content" />
+    <view class="footer">
+      <smart-button type="info" block>{{I18n.t('complete')}}</smart-button>
+    </view>
+  </smart-bottom-sheet>
+</demo-block>
+
+<demo-block title="{{I18n.t('maxHeight')}}" padding>
+  <smart-button type="primary" bind:click="toggleActionSheet3">{{I18n.t('popupMenu')}}</smart-button>
+  <smart-bottom-sheet
+    show="{{ show3 }}"
+    title="Title"
+    bind:close="toggleActionSheet3"
+  >
+    <view style="background-color: red; height: 100px;" />
+    <view style="background-color: blue; height: 100px;" />
+    <view style="background-color: black; height: 100px;" />
+    <view style="background-color: yellow; height: 100px;" />
+    <view style="background-color: pink; height: 100px;" />
+  </smart-bottom-sheet>
+</demo-block>

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

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.content{background:var(--app-B1,#f6f7fb);color:var(--app-B4-N1,#3d3d3d);display:flex;font-size:20px;justify-content:center}.footer{margin:16px 0}.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/bottom-sheet/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-bottom-sheet{color:var(--bottom-sheet-font-color,var(--app-B4-N1,#000));display:flex;flex-direction:column;max-height:var(--bottom-sheet-max-height,50%)!important;min-height:var(--bottom-sheet-min-height,auto);padding:var(--bottom-sheet-padding,0 16px);padding-bottom:env(safe-area-inset-bottom);width:var(--bottom-sheet-width,100%)!important}.smart-bottom-sheet__header{color:var(--bottom-sheet-header-color,var(--app-B4-N1,#000));font-size:var(--bottom-sheet-header-font-size,17px);font-weight:var(--bottom-sheet-header-font-weight,600);line-height:var(--bottom-sheet-header-height,56px);text-align:center}.smart-bottom-sheet__content{overflow-y:scroll}.smart-bottom-sheet__icon{margin:var(--bottom-sheet-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}

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

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

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

@@ -0,0 +1,71 @@
+import xmarkIcon from '@tuya-miniapp/icons/dist/svg/Xmark';
+import { SmartComponent } from '../common/component';
+SmartComponent({
+    props: {
+        show: Boolean,
+        title: String,
+        iconColor: String,
+        iconSize: {
+            type: null,
+            value: 24,
+        },
+        round: {
+            type: Boolean,
+            value: true,
+        },
+        zIndex: {
+            type: Number,
+            value: 100,
+        },
+        overlay: {
+            type: Boolean,
+            value: true,
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        xmarkIcon,
+        xmarkIconColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    mounted() {
+        var _a;
+        // @ts-ignore
+        const themeInfo = (_a = ty === null || ty === void 0 ? void 0 : ty.getThemeInfo()) !== null && _a !== void 0 ? _a : {};
+        const xmarkIconColor = this.data.iconColor || themeInfo['--app-B4-N3'] || 'rgba(0, 0, 0, 0.5)';
+        this.setData({ xmarkIconColor });
+    },
+    methods: {
+        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/bottom-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/bottom-sheet/index.wxml

@@ -0,0 +1,28 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<smart-popup
+  show="{{ show }}"
+  position="bottom"
+  round="{{ round }}"
+  z-index="{{ zIndex }}"
+  overlay="{{ overlay }}"
+  custom-class="smart-bottom-sheet custom-class"
+  safe-area-inset-bottom="{{false}}"
+  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-bottom-sheet__header">
+    {{ title }}
+    <smart-icon bind:click="onClose" name="{{ xmarkIcon }}" class="smart-bottom-sheet__icon" size="{{ iconSize }}" color="{{ xmarkIconColor }}" />
+  </view>
+  <view class="smart-bottom-sheet__content">
+    <slot />
+  </view>
+</smart-popup>

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

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-bottom-sheet{color:var(--bottom-sheet-font-color,var(--app-B4-N1,#000));display:flex;flex-direction:column;max-height:var(--bottom-sheet-max-height,50%)!important;min-height:var(--bottom-sheet-min-height,auto);padding:var(--bottom-sheet-padding,0 16px);padding-bottom:env(safe-area-inset-bottom);width:var(--bottom-sheet-width,100%)!important}.smart-bottom-sheet__header{color:var(--bottom-sheet-header-color,var(--app-B4-N1,#000));font-size:var(--bottom-sheet-header-font-size,17px);font-weight:var(--bottom-sheet-header-font-weight,600);line-height:var(--bottom-sheet-header-height,56px);text-align:center}.smart-bottom-sheet__content{overflow-y:scroll}.smart-bottom-sheet__icon{margin:var(--bottom-sheet-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}

package/example/dist/button/demo/index.css

@@ -0,0 +1 @@
+@import '../../common/index.css';.row{margin-bottom:15px}.demo-margin-left{margin-left:10px}.demo-margin-right{margin-right:10px}.demo-margin-bottom{display:block;margin-bottom:15px}.demo-margin-top{display:block;margin-top:15px}.w-full{width:100%}

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

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

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

@@ -0,0 +1,9 @@
+import iconAdd from '@tuya-miniapp/icons/dist/svg/PlusCircle';
+import iconRight from '@tuya-miniapp/icons/dist/svg/Right';
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        iconAdd,
+        iconRight,
+    },
+});

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

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-button": "../../button/index",
+    "smart-row": "../../row/index",
+    "smart-col": "../../col/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}