@truenewx/tnxvue3 3.4.4 → 3.4.6

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

@@ -0,0 +1,164 @@
+<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"
+        :data-type="type"
+        :data-subtype="subtype"
+    >
+        <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>