@tuya-miniapp/smart-ui 2.7.2-beta-11 → 2.7.2-beta-13

package/dist/datetime-picker/index.js

@@ -0,0 +1,479 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { SmartComponent } from '../common/component';
+import { isDef } from '../common/validator';
+import { pickerProps } from '../picker/shared';
+import { range, replacePlaceholders } from '../common/utils';
+const currentYear = new Date().getFullYear();
+function isValidDate(date) {
+    return isDef(date) && !isNaN(new Date(date).getTime());
+}
+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();
+}
+function findIntersection(range1, range2) {
+    const [start1, end1] = range1;
+    const [start2, end2] = range2;
+    // 确定交集的开始和结束
+    const intersectionStart = Math.max(start1, start2);
+    const intersectionEnd = Math.min(end1, end2);
+    // 检查是否有交集
+    if (intersectionStart <= intersectionEnd) {
+        return [intersectionStart, intersectionEnd];
+    }
+    return []; // 没有交集
+}
+const defaultFormatter = (type, value) => value;
+SmartComponent({
+    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,
+        }, amText: {
+            type: String,
+            value: 'AM',
+        }, pmText: {
+            type: String,
+            value: 'PM',
+        }, columnsOrder: {
+            type: Array,
+            value: [],
+        }, is12HourClock: {
+            type: Boolean,
+            value: false,
+        }, 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',
+        }, formatterMap: {
+            type: Object,
+            value: undefined,
+        }, columnStyles: {
+            type: Object,
+            value: undefined,
+        }, fontStyles: {
+            type: Object,
+            value: undefined,
+        } }),
+    data: {
+        part: 'am',
+        innerValue: Date.now(),
+        isCreated: false,
+        columns: [],
+    },
+    created() {
+        const innerValue = this.correctValue(this.data.value);
+        this.updateColumnValue(innerValue);
+        if (innerValue !== this.data.value) {
+            this.$emit('input', innerValue);
+        }
+        this.setData({
+            isCreated: true,
+        });
+    },
+    methods: {
+        updateValue() {
+            const { value, innerValue, isCreated } = this.data;
+            if (!isCreated)
+                return;
+            const val = this.correctValue(value);
+            const isEqual = val === innerValue;
+            this.updateColumnValue(val);
+            if (!isEqual) {
+                this.$emit('input', val);
+            }
+        },
+        getPicker() {
+            if (this.picker == null) {
+                this.picker = this.selectComponent('.smart-datetime-picker');
+                const { picker } = this;
+                const { setColumnValues } = picker;
+                picker.setColumnValues = (...args) => setColumnValues.apply(picker, [...args, false]);
+            }
+            return this.picker;
+        },
+        getTimeBoundary() {
+            const { type, is12HourClock, minHour, maxHour, minMinute, maxMinute } = this.data;
+            if (type === 'time' && is12HourClock) {
+                if (minHour === 1 && maxHour === 24) {
+                    return {
+                        minHour: 0,
+                        maxHour: 23,
+                        minMinute,
+                        maxMinute,
+                    };
+                }
+            }
+            return {
+                minHour,
+                maxHour,
+                minMinute,
+                maxMinute,
+            };
+        },
+        formatterFunc(type, value, data) {
+            var _a, _b;
+            if (type === 'part') {
+                return value === 'am' ? data.amText : data.pmText;
+            }
+            const { formatterMap, formatter = defaultFormatter } = (_a = this === null || this === void 0 ? void 0 : this.data) !== null && _a !== void 0 ? _a : data;
+            const mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
+            if (typeof mapDetail === 'string') {
+                return replacePlaceholders(mapDetail, { [type]: value });
+            }
+            if (typeof mapDetail === 'object') {
+                return (_b = mapDetail[value]) !== null && _b !== void 0 ? _b : formatter(type, value);
+            }
+            return formatter(type, value);
+        },
+        updateColumns(values) {
+            const { locale, columnStyles, fontStyles } = this.data;
+            const results = this.getOriginColumns().map((column, index) => {
+                const value = values[index];
+                const list = column.values.map(value => this.formatterFunc(column.type, value, this.data));
+                const activeIndex = list.findIndex(item => item === value);
+                return {
+                    values: list,
+                    order: column.order,
+                    unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
+                    style: columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[column.type],
+                    fontStyle: fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles[column.type],
+                    activeIndex: activeIndex === -1 ? 0 : activeIndex,
+                    loop: !['12HourClock', 'year'].includes(column.type),
+                };
+            });
+            return this.setData({ columns: results });
+        },
+        getOriginColumns() {
+            const { part, filter, is12HourClock, type, amText, pmText, columnsOrder } = this.data;
+            const { minHour, maxHour } = this.getTimeBoundary();
+            const results = this.getRanges().map(({ type: timeType, range }, index) => {
+                const order = columnsOrder[index];
+                let values = times(range[1] - range[0] + 1, index => {
+                    const value = range[0] + index;
+                    if (is12HourClock && type === 'time' && timeType === 'hour') {
+                        if (part === 'pm') {
+                            if (value === 12)
+                                return '12';
+                            return padZero(value - 12);
+                        }
+                        if (value === 0)
+                            return '12';
+                        return padZero(value);
+                    }
+                    return timeType === 'year' ? `${value}` : padZero(value);
+                });
+                if (filter) {
+                    values = filter(timeType, values);
+                }
+                return { type: timeType, values, order };
+            });
+            if (is12HourClock && type === 'time') {
+                return [
+                    {
+                        type: '12HourClock',
+                        values: minHour > 11 ? [pmText] : maxHour < 12 ? [amText] : [amText, pmText],
+                        order: columnsOrder[0],
+                    },
+                    ...results.map((item, index) => (Object.assign(Object.assign({}, item), { order: columnsOrder[index + 1] }))),
+                ].filter(Boolean);
+            }
+            return results;
+        },
+        getRanges() {
+            const { data } = this;
+            if (data.type === 'time' && data.is12HourClock) {
+                const { minHour, maxHour, minMinute, maxMinute } = this.getTimeBoundary();
+                const { part } = data;
+                const time12Range = part === 'pm' ? [12, 23] : [0, 11];
+                return [
+                    {
+                        type: 'hour',
+                        range: findIntersection(time12Range, [minHour, maxHour]),
+                    },
+                    {
+                        type: 'minute',
+                        range: [minMinute, maxMinute],
+                    },
+                ];
+            }
+            if (data.type === 'time') {
+                const { minHour, maxHour, minMinute, maxMinute } = this.getTimeBoundary();
+                return [
+                    {
+                        type: 'hour',
+                        range: [minHour, maxHour],
+                    },
+                    {
+                        type: 'minute',
+                        range: [minMinute, 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) {
+                const { minHour, maxHour, minMinute, maxMinute } = this.getTimeBoundary();
+                let [hour, minute] = value.split(':');
+                if (Number(hour) === 24) {
+                    hour = 0;
+                }
+                hour = padZero(range(hour, minHour, maxHour));
+                minute = padZero(range(minute, minMinute, 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 indexes = picker.getIndexes();
+            if (data.type === 'time' && data.is12HourClock) {
+                const originColumns = this.getOriginColumns();
+                const [partText, hour, minute] = indexes.map((item, index) => originColumns[index].values[item]);
+                const part = partText === this.data.pmText ? 'pm' : 'am';
+                this.setData({
+                    part,
+                });
+                value = `${part === 'pm'
+                    ? hour === '12'
+                        ? 12
+                        : Number(hour) + 12
+                    : hour === '12'
+                        ? 0
+                        : Number(hour)}:${Number(minute)}`;
+            }
+            else if (data.type === 'time') {
+                const originColumns = this.getOriginColumns();
+                value = `${+originColumns[0].values[indexes[0]]}:${+originColumns[1].values[indexes[1]]}`;
+            }
+            else {
+                const originColumns = this.getOriginColumns();
+                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);
+            picker.value = value;
+            this.$emit('input', value);
+            this.$emit('change', picker);
+        },
+        updateColumnValue(value) {
+            let values = [];
+            const _a = this.data, { columns, part, value: outerValue } = _a, rest = __rest(_a, ["columns", "part", "value"]);
+            rest.innerValue = value;
+            const dataStr = JSON.stringify(rest);
+            if (dataStr === this.preDataStr)
+                return;
+            this.preDataStr = dataStr;
+            const { type, is12HourClock } = this.data;
+            const formatter = this.formatterFunc;
+            if (type === 'time' && is12HourClock) {
+                const [hour, minute] = value.split(':');
+                const part = Number(hour) < 12 ? 'am' : 'pm';
+                this.setData({
+                    part,
+                });
+                values = [
+                    formatter('part', part, this.data),
+                    formatter('hour', part === 'am'
+                        ? hour === '0'
+                            ? '12'
+                            : hour
+                        : hour === '12'
+                            ? '12'
+                            : padZero(Number(hour) - 12), this.data),
+                    formatter('minute', minute, this.data),
+                ];
+            }
+            else if (type === 'time') {
+                const pair = value.split(':');
+                values = [formatter('hour', pair[0], this.data), formatter('minute', pair[1], this.data)];
+            }
+            else {
+                const date = new Date(value);
+                values = [
+                    formatter('year', `${date.getFullYear()}`, this.data),
+                    formatter('month', padZero(date.getMonth() + 1), this.data),
+                ];
+                if (type === 'date') {
+                    values.push(formatter('day', padZero(date.getDate()), this.data));
+                }
+                if (type === 'datetime') {
+                    values.push(formatter('day', padZero(date.getDate()), this.data), formatter('hour', padZero(date.getHours()), this.data), formatter('minute', padZero(date.getMinutes()), this.data));
+                }
+            }
+            this.setData({ innerValue: value });
+            this.updateColumns(values);
+            // picker.setValues(values);
+            // return this.set({ innerValue: value })
+            //   .then(() => this.updateColumns())
+            //   .then(() => picker.setValues(values));
+        },
+        onAnimationStart() {
+            this.$emit('animation-start');
+        },
+        onAnimationEnd() {
+            this.$emit('animation-end');
+        },
+    },
+});

package/dist/datetime-picker/index.json

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

package/dist/datetime-picker/index.wxml

@@ -0,0 +1,22 @@
+<smart-picker
+  class="smart-datetime-picker"
+  active-class="active-class"
+  toolbar-class="toolbar-class"
+  column-class="column-class"
+  hairline-class="smart-datetime-picker-hairline"
+  title="{{ title }}"
+  columns="{{ columns }}"
+  item-height="{{ itemHeight }}"
+  active-style="{{ activeStyle }}"
+  animation-time="{{ animationTime }}"
+  show-toolbar="{{ showToolbar }}"
+  visible-item-count="{{ visibleItemCount }}"
+  confirm-button-text="{{ confirmButtonText }}"
+  cancel-button-text="{{ cancelButtonText }}"
+  change-animation="{{ changeAnimation }}"
+  bind:change="onChange"
+  bind:confirm="onConfirm"
+  bind:cancel="onCancel"
+  bind:animation-start="onAnimationStart"
+  bind:animation-end="onAnimationEnd"
+/>

package/dist/datetime-picker/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}:host{width:100%}.smart-datetime-picker{--hairline-color:transparent}.smart-datetime-picker-hairline{border-image-slice:1;border-image-source:var(--hairline-border-image-color,var(--smart-ui-border-image,linear-gradient(to right,transparent,rgba(0,0,0,.3),transparent)));border-style:solid;border-width:.5px 0;position:absolute}

package/dist/definitions/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="miniprogram-api-typings" />
+interface SmartComponentInstance {
+    parent: WechatMiniprogram.Component.TrivialInstance;
+    children: WechatMiniprogram.Component.TrivialInstance[];
+    index: number;
+    $emit: (name: string, detail?: unknown, options?: WechatMiniprogram.Component.TriggerEventOption) => void;
+    setView: (value: Record<string, any>, callback?: () => void) => void;
+}
+export type SmartComponentOptions<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<SmartComponentInstance & 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,75 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+export type Action = 'confirm' | 'cancel' | 'overlay';
+type DialogContext = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+type AnyObject = {};
+interface DialogOptions {
+    lang?: string;
+    show?: boolean;
+    title?: string;
+    icon?: boolean | string;
+    iconColor?: string;
+    iconSize?: string;
+    nativeDisabled?: boolean;
+    width?: string | number | null;
+    zIndex?: number;
+    theme?: string;
+    context?: (() => DialogContext) | DialogContext;
+    message?: string;
+    overlay?: boolean;
+    selector?: string;
+    ariaLabel?: string;
+    customStyle?: string;
+    transition?: string;
+    autoClose?: boolean;
+    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;
+    ignoreQueue?: boolean;
+    password?: boolean;
+    placeholder?: string;
+    maxlength?: number;
+}
+interface DialogInputOptions extends DialogOptions {
+    value: string;
+    type?: string;
+    password?: boolean;
+    placeholder?: string;
+    maxlength?: number;
+    emptyDisabled?: boolean;
+}
+export declare const contextRef: {
+    value: Record<string, DialogContext | null>;
+};
+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.Instance<{
+        /**
+         * 输入框的当前值
+         */
+        inputValue: string;
+    }, AnyObject, AnyObject>>;
+    close(): void;
+    stopLoading(): void;
+    currentOptions: DialogOptions;
+    defaultOptions: DialogOptions;
+    setDefaultOptions(options: DialogOptions): void;
+    resetDefaultOptions(): void;
+};
+export default Dialog;