@tuya-miniapp/smart-ui 0.0.1-beta-1

package/dist/custom-keyboard/index.wxml

@@ -0,0 +1,48 @@
+<view class="{{prefix}} {{prefix}}-container" style="{{inputContainerStyle}}">
+  <view class="{{prefix}}-textView" bind:tap="handlePassword">
+    <text class="{{prefix}}-pwdText {{currValue !== '' ? prefix + '-password' : null}}" style="{{valueTextStyle}}">
+      {{currValue || placeholder}}
+    </text>
+  </view>
+  <slot name="custom-button" />
+</view>
+<van-popup
+  show="{{visible}}"
+  bind:close="onMaskPress"
+  position="bottom"
+  overlay="{{true}}"
+>
+  <view class="{{prefix}}-popup-container">
+    <view class="{{prefix}}-number-wrap" style="height: {{row * 56}}px">
+      <view wx:for="{{numberArray}}" wx:key="index" bind:tap="changeValue" hover-class="{{prefix}}-hover-class" data-item="{{ item }}" class="{{prefix}}-number-item" style="{{(item === 0 || item === 10) && numberArray.length === 11 ? 'width: 175px' : ''}}">
+        <view
+          wx:if="{{item === -2}}"
+          class="{{prefix}}-hidden-image"
+          style="{{img_hidden_light}}"
+        />
+        <text wx:else class="{{prefix}}-number-text">{{ item <= -1 || item > maxNum ? '' : item }}</text>
+      </view>
+    </view>
+    <view class="{{prefix}}-operate-wrap">
+      <button 
+        bind:tap="changeValue" 
+        data-item="-1"
+        style="margin-bottom: 6px"
+        class="{{prefix}}-confirm-btn"
+        hover-class="{{prefix}}-hover-class"
+        >
+        <view style="{{img_delete_light}}" class="{{prefix}}-hidden-image" />
+      </button>
+      <button 
+        class="{{prefix}}-confirm-btn {{prefix}}-confirm-color"
+        style="background-color: {{confirmColor}}"
+        bind:tap="confirm"
+        hover-class="{{prefix}}-hover-class"
+      >
+        <text class="{{prefix}}-confirm-text" style="{{confirmTextStyle}}">
+          {{confirmText}}
+        </text>
+      </button >
+    </view>
+  </view>
+</van-popup>

package/dist/custom-keyboard/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root .keyboard{--keyboard-bg-color:var(--app-B6,#fff);--keyboard-text-color:var(--app-B6-N2,rgba(0,0,0,.7));--keyboard-border-color:var(--app-B6-N7,rgba(0,0,0,.1));--keyboard-placeholder-text-color:var(--app-B6-N6,rgba(0,0,0,.2))}:root text{white-space:normal}.keyboard-container{align-items:center;background-color:var(--keyboard-bg-color);border:1rpx solid var(--keyboard-border-color);border-radius:16rpx;box-sizing:border-box;display:flex;flex-direction:row;height:80rpx;justify-content:space-between;overflow:hidden;padding:24rpx 0rpx 24rpx 24rpx;width:500rpx}.keyboard-button{align-items:center;background-color:initial;justify-content:center}.keyboard-textView{display:flex;flex:1}.keyboard-pwdText{color:var(--keyboard-placeholder-text-color);font-size:40rpx}.keyboard-password{color:var(--keyboard-text-color);letter-spacing:16rpx}.keyboard-randomText{font-size:24rpx;font-weight:500}.keyboard-popup-container{background-color:var(--app-B6-N6,rgba(0,0,0,.2));display:flex;flex-direction:row;height:464rpx;padding:8rpx;width:100%}.keyboard-number-wrap{background-color:initial;display:flex;flex:1;flex-direction:row;flex-wrap:wrap;width:570rpx}.keyboard-operate-wrap{background-color:initial;padding-right:4rpx;padding-top:8rpx;width:180rpx}.keyboard-number-item{align-items:center;background-color:var(--app-B6,#fff);border-radius:8rpx;display:flex;height:96rpx;justify-content:center;margin:8rpx;width:166rpx}.keyboard-number-text{color:var(--app-B6-N2,rgba(0,0,0,.7));font-size:48rpx;font-weight:700}.keyboard-hidden-image{background:var(--app-B6-N2,rgba(0,0,0,.7));height:80rpx;width:80rpx}.keyboard-confirm-btn{align-items:center;background-color:var(--app-B6,#fff);border-radius:8rpx;display:flex;height:210rpx;justify-content:center;padding:0;width:168rpx}.keyboard-confirm-color{background-color:var(--app-M3,#2dda86)}.keyboard-confirm-text{color:#fff;font-size:40rpx;font-weight:700}.keyboard-hover-class{background-color:var(--app-B6-N7,rgba(0,0,0,.1))}

package/dist/datetime-picker/index.css

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

package/dist/datetime-picker/index.d.ts

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

package/dist/datetime-picker/index.js

@@ -0,0 +1,298 @@
+import { VantComponent } from '../common/component';
+import { isDef } from '../common/validator';
+import { pickerProps } from '../picker/shared';
+const currentYear = new Date().getFullYear();
+function isValidDate(date) {
+    return isDef(date) && !isNaN(new Date(date).getTime());
+}
+function range(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+}
+function padZero(val) {
+    return `00${val}`.slice(-2);
+}
+function times(n, iteratee) {
+    let index = -1;
+    const result = Array(n < 0 ? 0 : n);
+    while (++index < n) {
+        result[index] = iteratee(index);
+    }
+    return result;
+}
+function getTrueValue(formattedValue) {
+    if (formattedValue === undefined) {
+        formattedValue = '1';
+    }
+    while (isNaN(parseInt(formattedValue, 10))) {
+        formattedValue = formattedValue.slice(1);
+    }
+    return parseInt(formattedValue, 10);
+}
+function getMonthEndDay(year, month) {
+    return 32 - new Date(year, month - 1, 32).getDate();
+}
+const defaultFormatter = (type, value) => value;
+VantComponent({
+    classes: ['active-class', 'toolbar-class', 'column-class'],
+    props: Object.assign(Object.assign({}, pickerProps), { value: {
+            type: null,
+            observer: 'updateValue',
+        }, filter: null, type: {
+            type: String,
+            value: 'datetime',
+            observer: 'updateValue',
+        }, showToolbar: {
+            type: Boolean,
+            value: true,
+        }, locale: {
+            type: Object,
+        }, formatter: {
+            type: null,
+            value: defaultFormatter,
+        }, minDate: {
+            type: Number,
+            value: new Date(currentYear - 10, 0, 1).getTime(),
+            observer: 'updateValue',
+        }, maxDate: {
+            type: Number,
+            value: new Date(currentYear + 10, 11, 31).getTime(),
+            observer: 'updateValue',
+        }, minHour: {
+            type: Number,
+            value: 0,
+            observer: 'updateValue',
+        }, maxHour: {
+            type: Number,
+            value: 23,
+            observer: 'updateValue',
+        }, minMinute: {
+            type: Number,
+            value: 0,
+            observer: 'updateValue',
+        }, maxMinute: {
+            type: Number,
+            value: 59,
+            observer: 'updateValue',
+        } }),
+    data: {
+        innerValue: Date.now(),
+        columns: [],
+    },
+    methods: {
+        updateValue() {
+            const { data } = this;
+            const val = this.correctValue(data.value);
+            const isEqual = val === data.innerValue;
+            this.updateColumnValue(val).then(() => {
+                if (!isEqual) {
+                    this.$emit('input', val);
+                }
+            });
+        },
+        getPicker() {
+            if (this.picker == null) {
+                this.picker = this.selectComponent('.van-datetime-picker');
+                const { picker } = this;
+                const { setColumnValues } = picker;
+                picker.setColumnValues = (...args) => setColumnValues.apply(picker, [...args, false]);
+            }
+            return this.picker;
+        },
+        updateColumns() {
+            const { formatter = defaultFormatter, locale } = this.data;
+            const results = this.getOriginColumns().map((column) => ({
+                values: column.values.map((value) => formatter(column.type, value)),
+                unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
+            }));
+            return this.set({ columns: results });
+        },
+        getOriginColumns() {
+            const { filter } = this.data;
+            const results = this.getRanges().map(({ type, range }) => {
+                let values = times(range[1] - range[0] + 1, (index) => {
+                    const value = range[0] + index;
+                    return type === 'year' ? `${value}` : padZero(value);
+                });
+                if (filter) {
+                    values = filter(type, values);
+                }
+                return { type, values };
+            });
+            return results;
+        },
+        getRanges() {
+            const { data } = this;
+            if (data.type === 'time') {
+                return [
+                    {
+                        type: 'hour',
+                        range: [data.minHour, data.maxHour],
+                    },
+                    {
+                        type: 'minute',
+                        range: [data.minMinute, data.maxMinute],
+                    },
+                ];
+            }
+            const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', data.innerValue);
+            const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', data.innerValue);
+            const result = [
+                {
+                    type: 'year',
+                    range: [minYear, maxYear],
+                },
+                {
+                    type: 'month',
+                    range: [minMonth, maxMonth],
+                },
+                {
+                    type: 'day',
+                    range: [minDate, maxDate],
+                },
+                {
+                    type: 'hour',
+                    range: [minHour, maxHour],
+                },
+                {
+                    type: 'minute',
+                    range: [minMinute, maxMinute],
+                },
+            ];
+            if (data.type === 'date')
+                result.splice(3, 2);
+            if (data.type === 'year-month')
+                result.splice(2, 3);
+            return result;
+        },
+        correctValue(value) {
+            const { data } = this;
+            // validate value
+            const isDateType = data.type !== 'time';
+            if (isDateType && !isValidDate(value)) {
+                value = data.minDate;
+            }
+            else if (!isDateType && !value) {
+                const { minHour } = data;
+                value = `${padZero(minHour)}:00`;
+            }
+            // time type
+            if (!isDateType) {
+                let [hour, minute] = value.split(':');
+                hour = padZero(range(hour, data.minHour, data.maxHour));
+                minute = padZero(range(minute, data.minMinute, data.maxMinute));
+                return `${hour}:${minute}`;
+            }
+            // date type
+            value = Math.max(value, data.minDate);
+            value = Math.min(value, data.maxDate);
+            return value;
+        },
+        getBoundary(type, innerValue) {
+            const value = new Date(innerValue);
+            const boundary = new Date(this.data[`${type}Date`]);
+            const year = boundary.getFullYear();
+            let month = 1;
+            let date = 1;
+            let hour = 0;
+            let minute = 0;
+            if (type === 'max') {
+                month = 12;
+                date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+                hour = 23;
+                minute = 59;
+            }
+            if (value.getFullYear() === year) {
+                month = boundary.getMonth() + 1;
+                if (value.getMonth() + 1 === month) {
+                    date = boundary.getDate();
+                    if (value.getDate() === date) {
+                        hour = boundary.getHours();
+                        if (value.getHours() === hour) {
+                            minute = boundary.getMinutes();
+                        }
+                    }
+                }
+            }
+            return {
+                [`${type}Year`]: year,
+                [`${type}Month`]: month,
+                [`${type}Date`]: date,
+                [`${type}Hour`]: hour,
+                [`${type}Minute`]: minute,
+            };
+        },
+        onCancel() {
+            this.$emit('cancel');
+        },
+        onConfirm() {
+            this.$emit('confirm', this.data.innerValue);
+        },
+        onChange() {
+            const { data } = this;
+            let value;
+            const picker = this.getPicker();
+            const originColumns = this.getOriginColumns();
+            if (data.type === 'time') {
+                const indexes = picker.getIndexes();
+                value = `${+originColumns[0].values[indexes[0]]}:${+originColumns[1]
+                    .values[indexes[1]]}`;
+            }
+            else {
+                const indexes = picker.getIndexes();
+                const values = indexes.map((value, index) => originColumns[index].values[value]);
+                const year = getTrueValue(values[0]);
+                const month = getTrueValue(values[1]);
+                const maxDate = getMonthEndDay(year, month);
+                let date = getTrueValue(values[2]);
+                if (data.type === 'year-month') {
+                    date = 1;
+                }
+                date = date > maxDate ? maxDate : date;
+                let hour = 0;
+                let minute = 0;
+                if (data.type === 'datetime') {
+                    hour = getTrueValue(values[3]);
+                    minute = getTrueValue(values[4]);
+                }
+                value = new Date(year, month - 1, date, hour, minute);
+            }
+            value = this.correctValue(value);
+            this.updateColumnValue(value).then(() => {
+                this.$emit('input', value);
+                this.$emit('change', picker);
+            });
+        },
+        updateColumnValue(value) {
+            let values = [];
+            const { type } = this.data;
+            const formatter = this.data.formatter || defaultFormatter;
+            const picker = this.getPicker();
+            if (type === 'time') {
+                const pair = value.split(':');
+                values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
+            }
+            else {
+                const date = new Date(value);
+                values = [
+                    formatter('year', `${date.getFullYear()}`),
+                    formatter('month', padZero(date.getMonth() + 1)),
+                ];
+                if (type === 'date') {
+                    values.push(formatter('day', padZero(date.getDate())));
+                }
+                if (type === 'datetime') {
+                    values.push(formatter('day', padZero(date.getDate())), formatter('hour', padZero(date.getHours())), formatter('minute', padZero(date.getMinutes())));
+                }
+            }
+            return this.set({ innerValue: value })
+                .then(() => this.updateColumns())
+                .then(() => picker.setValues(values));
+        },
+    },
+    created() {
+        const innerValue = this.correctValue(this.data.value);
+        this.updateColumnValue(innerValue).then(() => {
+            this.$emit('input', innerValue);
+        });
+    },
+});

package/dist/datetime-picker/index.json

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

package/dist/datetime-picker/index.wxml

@@ -0,0 +1,16 @@
+<van-picker
+  class="van-datetime-picker"
+  active-class="active-class"
+  toolbar-class="toolbar-class"
+  column-class="column-class"
+  title="{{ title }}"
+  columns="{{ columns }}"
+  item-height="{{ itemHeight }}"
+  show-toolbar="{{ showToolbar }}"
+  visible-item-count="{{ visibleItemCount }}"
+  confirm-button-text="{{ confirmButtonText }}"
+  cancel-button-text="{{ cancelButtonText }}"
+  bind:change="onChange"
+  bind:confirm="onConfirm"
+  bind:cancel="onCancel"
+/>

package/dist/datetime-picker/index.wxss

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

package/dist/definitions/index.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="miniprogram-api-typings" />
+interface VantComponentInstance {
+    parent: WechatMiniprogram.Component.TrivialInstance;
+    children: WechatMiniprogram.Component.TrivialInstance[];
+    index: number;
+    $emit: (name: string, detail?: unknown, options?: WechatMiniprogram.Component.TriggerEventOption) => void;
+}
+export type VantComponentOptions<Data extends WechatMiniprogram.Component.DataOption, Props extends WechatMiniprogram.Component.PropertyOption, Methods extends WechatMiniprogram.Component.MethodOption> = {
+    data?: Data;
+    field?: boolean;
+    classes?: string[];
+    mixins?: string[];
+    props?: Props;
+    relation?: {
+        relations: Record<string, WechatMiniprogram.Component.RelationOption>;
+        mixin: string;
+    };
+    watch?: Record<string, (...args: any[]) => any>;
+    methods?: Methods;
+    beforeCreate?: () => void;
+    created?: () => void;
+    mounted?: () => void;
+    destroyed?: () => void;
+} & ThisType<VantComponentInstance & WechatMiniprogram.Component.Instance<Data & {
+    name: string;
+    value: any;
+} & Record<string, any>, Props, Methods> & Record<string, any>>;
+export {};

package/dist/definitions/index.js

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

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+export type Action = 'confirm' | 'cancel' | 'overlay';
+type DialogContext = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+interface DialogOptions {
+    lang?: string;
+    show?: boolean;
+    title?: string;
+    icon?: boolean;
+    width?: string | number | null;
+    zIndex?: number;
+    theme?: string;
+    context?: (() => DialogContext) | DialogContext;
+    message?: string;
+    overlay?: boolean;
+    selector?: string;
+    ariaLabel?: string;
+    customStyle?: string;
+    transition?: string;
+    beforeClose?: null | ((action: Action, value?: string) => Promise<void | boolean> | void);
+    businessId?: number;
+    sessionFrom?: string;
+    overlayStyle?: string;
+    appParameter?: string;
+    messageAlign?: string;
+    sendMessageImg?: string;
+    showMessageCard?: boolean;
+    sendMessagePath?: string;
+    sendMessageTitle?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    showConfirmButton?: boolean;
+    showCancelButton?: boolean;
+    closeOnClickOverlay?: boolean;
+    confirmButtonOpenType?: string;
+    value?: null | string;
+    password?: boolean;
+    placeholder?: string;
+    maxlength?: number;
+}
+interface DialogInputOptions extends DialogOptions {
+    value: string;
+    type?: string;
+    password?: boolean;
+    placeholder?: string;
+    maxlength?: number;
+}
+declare const Dialog: {
+    (options: DialogOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
+    alert(options: DialogOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
+    confirm(options: DialogOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
+    input(options: DialogInputOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
+    close(): void;
+    stopLoading(): void;
+    currentOptions: DialogOptions;
+    defaultOptions: DialogOptions;
+    setDefaultOptions(options: DialogOptions): void;
+    resetDefaultOptions(): void;
+};
+export default Dialog;

package/dist/dialog/dialog.js

@@ -0,0 +1,83 @@
+let queue = [];
+const defaultOptions = {
+    show: false,
+    title: '',
+    width: null,
+    theme: 'default',
+    message: '',
+    zIndex: 100,
+    overlay: true,
+    selector: '#smart-dialog',
+    // className: '',
+    // asyncClose: false,
+    beforeClose: null,
+    transition: 'scale',
+    customStyle: '',
+    messageAlign: '',
+    overlayStyle: '',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    showConfirmButton: true,
+    showCancelButton: false,
+    closeOnClickOverlay: false,
+    confirmButtonOpenType: '',
+    icon: false,
+    value: null,
+    password: false,
+    placeholder: '',
+    maxlength: 20,
+};
+let currentOptions = Object.assign({}, defaultOptions);
+function getContext() {
+    const pages = getCurrentPages();
+    return pages[pages.length - 1];
+}
+const Dialog = (options) => {
+    options = Object.assign(Object.assign({}, currentOptions), options);
+    return new Promise((resolve, reject) => {
+        const context = (typeof options.context === 'function'
+            ? options.context()
+            : options.context) || getContext();
+        const dialog = context.selectComponent(options.selector);
+        delete options.context;
+        delete options.selector;
+        if (dialog) {
+            dialog.setData(Object.assign({ callback: (action, instance) => {
+                    action === 'confirm' ? resolve(instance) : reject(instance);
+                } }, options));
+            wx.nextTick(() => {
+                dialog.setData({ show: true });
+            });
+            queue.push(dialog);
+        }
+        else {
+            console.warn('未找到 smart-dialog 节点，请确认 selector 及 context 是否正确');
+        }
+    });
+};
+Dialog.alert = (options) => Dialog(options);
+Dialog.confirm = (options) => Dialog(Object.assign({ showCancelButton: true }, options));
+Dialog.input = (options) => Dialog(Object.assign({ showCancelButton: true }, options));
+Dialog.close = () => {
+    queue.forEach((dialog) => {
+        dialog.close();
+    });
+    queue = [];
+};
+Dialog.stopLoading = () => {
+    queue.forEach((dialog) => {
+        dialog.stopLoading();
+    });
+};
+Dialog.currentOptions = currentOptions;
+Dialog.defaultOptions = defaultOptions;
+Dialog.setDefaultOptions = (options) => {
+    currentOptions = Object.assign(Object.assign({}, currentOptions), options);
+    Dialog.currentOptions = currentOptions;
+};
+Dialog.resetDefaultOptions = () => {
+    currentOptions = Object.assign({}, defaultOptions);
+    Dialog.currentOptions = currentOptions;
+};
+Dialog.resetDefaultOptions();
+export default Dialog;

package/dist/dialog/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-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){.van-dialog{width:var(--dialog-small-screen-width,90%)}}.van-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-top:var(--dialog-header-padding-top,24px);text-align:center}.van-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)}.van-dialog__header--isolated{padding:var(--dialog-header-isolated-padding,24px 0)}.van-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}.van-dialog__message-text{word-wrap:break-word}.van-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)}.van-dialog__message--round-button{padding-bottom:16px}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__message--justify{text-align:justify}.van-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)}.van-dialog__footer{display:flex}.van-dialog__footer--round-button{height:40px!important;padding:8px 20px 16px!important;position:relative!important}.van-dialog__button{flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog-bounce-enter{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}.van-dialog-bounce-leave-active{opacity:0;transform:translate3d(-50%,-50%,0) scale(.9)}

package/dist/dialog/index.d.ts

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