@truenewx/tnxvue3 3.4.3 → 3.4.5

package/src/tdesign/mobile/drawer/Drawer.vue

@@ -0,0 +1,176 @@
+<template>
+    <tnxtdm-popup
+        class="tnxtdm-drawer"
+        v-model="visible"
+        :placement="placement"
+        :title="title"
+        @closed="onClosed"
+    >
+        <template #default>
+            <div class="tnxtdm-drawer-body">
+                <div v-if="content" v-html="content"></div>
+                <tnxtdm-drawer-content ref="content" v-bind="contentProps" v-else/>
+            </div>
+            <div class="tnxtdm-drawer-footer" v-if="buttons?.length">
+                <t-button v-for="(button, index) in buttons" :key="index" :theme="button.type || 'default'"
+                          :loading="buttonLoadings[index]" @click="btnClick(index)" block>
+                    {{ button.caption || button.text }}
+                </t-button>
+            </div>
+        </template>
+    </tnxtdm-popup>
+</template>
+
+<script>
+import DrawerContent from './DrawerContent.vue';
+import Popup from '../popup/Popup.vue';
+
+export default {
+    name: 'TnxtdmDrawer',
+    components: {
+        'tnxtdm-drawer-content': DrawerContent,
+        'tnxtdm-popup': Popup,
+    },
+    props: {
+        id: {
+            type: String,
+            default: () => window.tnx.util.string.uuid32(),
+        },
+        modelValue: Boolean,
+        container: String,
+        title: String,
+        content: String,
+        contentProps: Object,
+        buttons: Array,
+        theme: String,
+        placement: {
+            type: String, // 'top' | 'left' | 'right' | 'bottom' | 'center'
+            default: 'bottom', // 默认底部弹出
+        },
+    },
+    emits: ['update:modelValue', 'shown', 'closed'],
+    data() {
+        return {
+            visible: false,
+            initialized: false,
+            options: {
+                modal: true,
+                onShown: undefined,
+                onClosed: undefined,
+                beforeClose: undefined,
+            },
+            buttonLoadings: [],
+        };
+    },
+    watch: {
+        modelValue(val) {
+            this.visible = val;
+        },
+        visible(val) {
+            if (this.initialized) {
+                this.$emit('update:modelValue', val);
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initialized = true;
+            this.visible = this.modelValue;
+            if (this.$refs.content && !this.$refs.content.close) {
+                this.$refs.content.close = () => {
+                    this.close();
+                }
+            }
+
+            if (typeof this.options.onShown === 'function') {
+                this.options.onShown.call(this);
+            } else {
+                this.$emit('shown');
+            }
+        });
+    },
+    methods: {
+        btnClick(index) {
+            const button = this.buttons[index];
+            if (button) {
+                let click = button.click;
+                if (typeof click === 'string') {
+                    if (typeof this.$refs.content[click] === 'function') {
+                        click = this.$refs.content[click];
+                    } else {
+                        console.error(`Method '${click}' not found in component:`, this.$refs.content);
+                        click = null;
+                    }
+                }
+
+                if (typeof click === 'function') {
+                    let result = click.call(this.$refs.content, this.close);
+                    if (result === 'loading') {
+                        this.buttonLoadings[index] = true;
+                        return;
+                    }
+                    if (result === false) {
+                        return;
+                    }
+                }
+            }
+            this.close();
+        },
+        close() {
+            return new Promise((resolve) => {
+                this.beforeClose(() => {
+                    const originalOnClosed = this.options.onClosed;
+                    this.options.onClosed = window.tnx.util.function.around(originalOnClosed, function (onClosed) {
+                        if (onClosed) {
+                            onClosed();
+                        }
+                        resolve();
+                    });
+                    this.visible = false;
+                });
+            });
+        },
+        beforeClose(done) {
+            try {
+                if (typeof this.options.beforeClose === 'function') {
+                    if (this.options.beforeClose.call(this.$refs.content) === false) {
+                        return;
+                    }
+                }
+                done();
+            } catch (e) {
+                console.error(e);
+            }
+        },
+        onClosed() {
+            if (typeof this.options.onClosed === 'function') {
+                this.options.onClosed.call(this.$refs.content);
+            } else {
+                this.$emit('closed');
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.tnxtdm-drawer {
+    .tnxtdm-drawer-body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px;
+    }
+
+    .tnxtdm-drawer-footer {
+        padding: 12px 1rem calc(12px + env(safe-area-inset-bottom, 0));
+        border-top: 1px solid var(--td-border-level-1-color);
+        display: flex;
+        flex-direction: row-reverse;
+
+        .t-button {
+            width: fit-content;
+            margin-left: 12px;
+        }
+    }
+}
+</style>

package/src/tdesign/mobile/drawer/DrawerContent.vue

@@ -0,0 +1,13 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    methods: {}
+}
+</script>

package/src/tdesign/mobile/enum-select/EnumSelect.vue

@@ -0,0 +1,160 @@
+<template>
+    <tnxtdm-select ref="select"
+                   v-model="model"
+                   :id="id"
+                   :selector="selector"
+                   :items="items"
+                   value-name="key" text-name="caption" index-name="searchIndex"
+                   :default-value="defaultValue"
+                   :empty="empty"
+                   :empty-value="emptyValue"
+                   :placeholder="placeholder"
+                   :width="width"
+                   :disabled="isDisabled"
+                   :filterable="filterable"
+                   :theme="theme"
+                   :size="size"
+                   :tag-click="tagClick"
+                   :change="change">
+        <template #option="{item}" v-if="$slots.option">
+            <slot name="option" :item="item"></slot>
+        </template>
+    </tnxtdm-select>
+</template>
+
+<script>
+import Select, {isMultiSelector} from '../select/Select.vue';
+
+export default {
+    name: 'TnxtdmEnumSelect',
+    components: {
+        'tnxtdm-select': Select,
+    },
+    props: {
+        id: [Number, String],
+        modelValue: [String, Number, Boolean, Array],
+        selector: String,
+        type: {
+            type: String,
+            required: true,
+        },
+        subtype: String,
+        defaultValue: String,
+        empty: {
+            type: [Boolean, String],
+            default: false,
+        },
+        emptyValue: {
+            type: [String, Number, Boolean, Array],
+            default: '',
+        },
+        placeholder: String,
+        width: String,
+        disabled: Boolean,
+        tagClick: Function,
+        change: Function,
+        grouped: {
+            type: Boolean,
+            default: false,
+        },
+        filterable: Boolean,
+        theme: String,
+        size: String,
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            model: this.modelValue,
+            items: null,
+            formDisabled: false,
+        };
+    },
+    computed: {
+        isDisabled() {
+            return this.disabled || this.formDisabled;
+        },
+    },
+    watch: {
+        model(value) {
+            this.$emit('update:modelValue', value);
+        },
+        modelValue() {
+            this.initModel();
+        },
+        type() {
+            this.init();
+        },
+        subtype() {
+            this.init();
+        }
+    },
+    mounted() {
+        this.init();
+        this.initFormDisabled();
+    },
+    methods: {
+        initFormDisabled() {
+            let parent = this.$parent;
+            while (parent) {
+                if (parent.$options && (parent.$options.name === 't-form' || parent.$options.name === 'TForm')) {
+                    this.$watch(() => parent.disabled || (parent.$props && parent.$props.disabled), (val) => {
+                        this.formDisabled = val;
+                    }, {immediate: true});
+                    break;
+                }
+                parent = parent.$parent;
+            }
+        },
+        init() {
+            if (typeof this.type === 'string') {
+                if (this.type.toLowerCase() === 'boolean') {
+                    this.items = [{
+                        key: true,
+                        caption: true.toText(),
+                    }, {
+                        key: false,
+                        caption: false.toText(),
+                    }];
+                    this.initModel();
+                } else {
+                    if (window.tnx && window.tnx.meta) {
+                        window.tnx.meta.resolveEnumItems(this.type, this.subtype).then((items) => {
+                            this.items = items;
+                            this.initModel();
+                        });
+                    }
+                }
+            }
+        },
+        initModel() {
+            let oldModel = this.model;
+            this.model = this.modelValue;
+            if (isMultiSelector(this.selector)) {
+                return;
+            }
+            if ((this.model === undefined || this.model === null) && !this.empty && this.items && this.items.length) {
+                let item = this.items[0];
+                this.model = item.key;
+                if (this.model !== oldModel && this.change) {
+                    this.change(item);
+                }
+            }
+        },
+        getText(value) {
+            if (this.$refs.select) {
+                return this.$refs.select.getText(value);
+            }
+            return undefined;
+        },
+        disableItem(itemKey, disabled, reverseOther) {
+            if (this.$refs.select) {
+                this.$refs.select.disableItem(itemKey, disabled, reverseOther);
+            }
+        },
+    }
+}
+</script>
+
+<style>
+
+</style>

package/src/tdesign/mobile/popup/Popup.vue

@@ -0,0 +1,106 @@
+<template>
+    <slot name="trigger" :show="open" :visible="visible"></slot>
+    <t-popup
+        class="tnxtdm-popup"
+        v-model="visible"
+        :placement="placement"
+        :destroy-on-close="true"
+        v-bind="$attrs"
+    >
+        <div class="tnxtdm-popup-header" v-if="title || $slots.left || $slots.right">
+            <div class="tnxtdm-popup-header-left">
+                <slot name="left">
+                    <t-icon name="blank" size="24px"/>
+                </slot>
+            </div>
+            <div class="tnxtdm-popup-header-title">
+                <slot name="title">{{ title }}</slot>
+            </div>
+            <div class="tnxtdm-popup-header-right">
+                <slot name="right">
+                    <t-icon class="text-placeholder" name="close" size="24px" @click="close"/>
+                </slot>
+            </div>
+        </div>
+        <div class="tnxtdm-popup-content">
+            <slot></slot>
+        </div>
+    </t-popup>
+</template>
+
+<script>
+export default {
+    name: 'TnxtdmPopup',
+    props: {
+        modelValue: Boolean,
+        title: String,
+        placement: {
+            type: String,
+            default: 'bottom',
+        },
+    },
+    data() {
+        return {
+            visible: false,
+        }
+    },
+    watch: {
+        modelValue(val) {
+            this.visible = val;
+        },
+        visible(val) {
+            this.$emit('update:modelValue', val);
+        },
+    },
+    emits: ['update:modelValue', 'close'],
+    mounted() {
+        this.visible = this.modelValue;
+    },
+    methods: {
+        open() {
+            this.visible = true;
+        },
+        close() {
+            this.visible = false;
+            this.$emit('close');
+        },
+    },
+};
+</script>
+
+<style>
+.tnxtdm-popup {
+    border-radius: 12px 12px 0 0;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.tnxtdm-popup .tnxtdm-popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 1rem;
+    border-bottom: 1px solid var(--td-border-level-1-color);
+}
+
+.tnxtdm-popup .tnxtdm-popup-header .tnxtdm-popup-header-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--td-text-color-primary);
+    flex: 1;
+    text-align: center;
+}
+
+.tnxtdm-popup .tnxtdm-popup-header .tnxtdm-popup-header-left,
+.tnxtdm-popup .tnxtdm-popup-header .tnxtdm-popup-header-right {
+    display: flex;
+    align-items: center;
+    min-width: 24px;
+}
+
+.tnxtdm-popup .tnxtdm-popup-content {
+    flex: 1;
+    overflow-y: auto;
+}
+</style>

package/src/tdesign/mobile/region-picker/RegionPicker.vue

@@ -0,0 +1,223 @@
+<template>
+    <TnxtdmPopup class="tnxtdm-region-picker" v-model="pickerVisible">
+        <template #trigger="{ show }">
+            <div class="flex-v-center" :class="triggerClass">
+                <div @click="show">{{ displayValue || placeholder }}</div>
+                <t-icon
+                    class="ml-3 text-secondary"
+                    name="close-circle-filled"
+                    @click="onClear"
+                    v-if="empty && displayValue"
+                />
+                <t-icon
+                    class="ml-3 text-secondary"
+                    :name="iconName"
+                    @click="show"
+                    v-else-if="iconName"
+                />
+            </div>
+        </template>
+        <t-picker
+            v-if="pickerVisible"
+            v-model="pickerValue"
+            :title="title"
+            :columns="pickerColumns"
+            :keys="{ label: 'caption', value: 'code' }"
+            @pick="onPickerPick"
+            @confirm="onPickerConfirm"
+            @cancel="onPickerCancel"
+        >
+        </t-picker>
+    </TnxtdmPopup>
+</template>
+
+<script>
+import TnxtdmPopup from '../popup/Popup.vue';
+
+export default {
+    name: 'TnxtdmRegionPicker',
+    components: {TnxtdmPopup},
+    props: {
+        modelValue: {
+            type: String,
+            required: true,
+        },
+        code: {
+            type: String,
+            default: 'CN',
+        },
+        level: {
+            type: Number,
+            default: 3,
+        },
+        title: {
+            type: String,
+            default: '地区',
+        },
+        triggerClass: String,
+        placeholder: {
+            type: String,
+            default: '请选择地区',
+        },
+        empty: [String, Boolean],
+        iconName: {
+            type: String,
+            default: 'location',
+        },
+    },
+    data() {
+        return {
+            region: null,
+            displayValue: '',
+            pickerVisible: false,
+            pickerValue: [],
+            pickerColumns: [],
+        };
+    },
+    watch: {
+        modelValue() {
+            this.initPicker();
+            this.initDisplay();
+        },
+        pickerVisible(val) {
+            if (val) {
+                this.initPicker();
+            }
+        },
+    },
+    emits: ['update:modelValue', 'change'],
+    async mounted() {
+        this.region = await window.tnx.meta.loadRegion(this.code, this.level);
+        this.initPicker();
+        this.initDisplay();
+    },
+    methods: {
+        initDisplay() {
+            if (!this.region || !this.modelValue) {
+                this.displayValue = '';
+                return;
+            }
+            const path = this.getPath(this.region.subs, this.modelValue);
+            if (path && path.length) {
+                this.displayValue = path.map(item => item.caption).join(' / ');
+            } else {
+                this.displayValue = '';
+            }
+        },
+        initPicker() {
+            if (!this.region) {
+                return;
+            }
+
+            let path = [];
+            if (this.modelValue) {
+                path = this.getPath(this.region.subs, this.modelValue) || [];
+            }
+
+            this.pickerColumns = [];
+            this.pickerValue = [];
+
+            let currentOptions = this.region.subs || [];
+
+            for (let i = 0; i < this.level; i++) {
+                this.pickerColumns.push(currentOptions);
+
+                let selectedCode;
+                if (i < path.length) {
+                    selectedCode = path[i].code;
+                } else {
+                    if (currentOptions.length > 0) {
+                        selectedCode = currentOptions[0].code;
+                    }
+                }
+
+                if (selectedCode) {
+                    this.pickerValue.push(selectedCode);
+                    let selectedOption = currentOptions.find(opt => opt.code === selectedCode);
+                    if (selectedOption && selectedOption.subs) {
+                        currentOptions = selectedOption.subs;
+                    } else {
+                        currentOptions = [];
+                    }
+                } else {
+                    this.pickerValue.push(null);
+                    currentOptions = [];
+                }
+            }
+        },
+        getPath(options, code) {
+            if (!options) {
+                return null;
+            }
+            for (let item of options) {
+                if (item.code === code) {
+                    return [item];
+                }
+                if (item.subs) {
+                    let subPath = this.getPath(item.subs, code);
+                    if (subPath) {
+                        return [item, ...subPath];
+                    }
+                }
+            }
+            return null;
+        },
+        onPickerPick(values, {column, index}) {
+            const newColumns = [];
+            const newValues = [];
+
+            for (let i = 0; i < this.pickerColumns.length; i++) {
+                if (i <= column) {
+                    newColumns.push(this.pickerColumns[i]);
+                    newValues.push(values[i]);
+                } else {
+                    let region = newColumns[i - 1][index];
+                    let subs = region.subs || [];
+                    if (subs.length > 0) {
+                        newColumns.push(subs);
+                        if (subs.length > 0) {
+                            newValues.push(subs[0].code);
+                        }
+                    } else if (newColumns.length < this.level) {
+                        newColumns.push([]);
+                        newValues.push(null);
+                    }
+                }
+            }
+
+            this.pickerColumns = newColumns;
+            this.pickerValue = newValues;
+        },
+        onPickerConfirm() {
+            this.pickerVisible = false;
+            this.onConfirm();
+        },
+        onPickerCancel() {
+            this.pickerVisible = false;
+        },
+        onConfirm() {
+            let code = null;
+            for (let i = this.pickerValue.length - 1; i >= 0; i--) {
+                if (this.pickerValue[i]) {
+                    code = this.pickerValue[i];
+                    break;
+                }
+            }
+
+            if (code) {
+                this.$emit('update:modelValue', code);
+                this.$emit('change', code);
+            }
+        },
+        onClear() {
+            this.$emit('update:modelValue', '');
+        },
+        open() {
+            this.pickerVisible = true;
+        },
+    }
+}
+</script>
+
+<style>
+</style>