@truenewx/tnxvue3 3.4.3 → 3.4.5

package/src/tdesign/mobile/select/Select.vue

@@ -0,0 +1,478 @@
+<template>
+    <t-checkbox-group class="tnxtdm-select tnxtdm-checkbox-group" v-model="model"
+                      :disabled="isDisabled" :key="`checkbox-${groupKey}`" v-if="selector === 'checkbox'">
+        <t-checkbox v-for="item in items" :key="item[valueName]" :value="item[valueName]"
+                    :disabled="item.disabled === true || typeof item.disabled === 'string'"
+                    :label="item[textName]">
+        </t-checkbox>
+    </t-checkbox-group>
+
+    <div class="tnxtdm-select tnxtdm-tag-group" :key="`tag-${groupKey}`"
+         v-else-if="selector === 'tag' || selector === 'tags'">
+        <template v-if="items">
+            <t-tag v-for="item in items" :key="item[valueName]"
+                   :theme="isSelected(item[valueName]) ? 'primary' : 'default'"
+                   :variant="isSelected(item[valueName]) ? 'dark' : 'light'"
+                   :disabled="isDisabled || item.disabled === true || typeof item.disabled === 'string'"
+                   @click="!isDisabled && select(item[valueName])">
+                <t-icon :name="item[iconName]" v-if="item[iconName]"/>
+                <span>{{ item[textName] }}</span>
+            </t-tag>
+        </template>
+        <t-loading v-else/>
+    </div>
+
+    <div class="tnxtdm-select tnxtdm-text-button-group" :key="`text-${groupKey}`"
+         v-else-if="selector === 'text' || selector === 'texts'">
+        <template v-if="items">
+            <t-button v-for="item in items" :key="item[valueName]"
+                      :variant="isSelected(item[valueName]) ? 'base' : 'text'"
+                      :theme="isSelected(item[valueName]) ? 'primary' : 'default'"
+                      size="small"
+                      :disabled="isDisabled || item.disabled === true || typeof item.disabled === 'string'"
+                      @click="!isDisabled && select(item[valueName], $event)">
+                <t-icon :name="item[iconName]" v-if="item[iconName]"/>
+                <span>{{ item[textName] }}</span>
+            </t-button>
+        </template>
+        <t-loading v-else/>
+    </div>
+
+    <t-radio-group class="tnxtdm-select tnxtdm-radio-group" v-model="model"
+                   :disabled="isDisabled" :key="`radio-${groupKey}`" borderless
+                   v-else-if="selector === 'radio-group'">
+        <t-radio v-for="item in items" :key="item[valueName]" :value="item[valueName]"
+                 :disabled="item.disabled === true || typeof item.disabled === 'string'"
+                 :label="item[textName]">
+        </t-radio>
+    </t-radio-group>
+
+    <tnxtdm-slide-radio-group
+        :key="`radio-group-${groupKey}`"
+        v-model="model"
+        :items="items"
+        :value-name="valueName"
+        :text-name="textName"
+        :icon-name="iconName"
+        :default-value="defaultValue"
+        :width="width"
+        :size="size"
+        :theme="theme"
+        :disabled="isDisabled"
+        @change="onSlideRadioChange"
+        v-else-if="selector === 'radio-button'"
+    />
+
+    <div class="tnxtdm-select tnxtdm-select-picker" :key="`select-${groupKey}`" v-else>
+        <t-cell :note="currentText || placeholder" arrow @click="openPicker"/>
+        <t-popup v-model="pickerVisible" placement="bottom">
+            <t-picker
+                v-if="!isMulti()"
+                v-model="pickerValue"
+                :columns="pickerColumns"
+                :keys="{ label: textName, value: valueName }"
+                @confirm="onPickerConfirm"
+                @cancel="pickerVisible = false"
+            />
+            <!-- 多选情况下的简单实现，使用 CheckboxGroup -->
+            <div v-else class="tnxtdm-select-multi-popup">
+                <div class="tnxtdm-select-multi-header">
+                    <t-button variant="text" @click="pickerVisible = false">取消</t-button>
+                    <div class="tnxtdm-select-multi-title">请选择</div>
+                    <t-button variant="text" theme="primary" @click="onMultiConfirm">确定</t-button>
+                </div>
+                <div class="tnxtdm-select-multi-body">
+                    <t-checkbox-group v-model="tempModel">
+                        <t-cell v-for="item in items" :key="item[valueName]" :title="item[textName]">
+                            <template #right-icon>
+                                <t-checkbox :value="item[valueName]"/>
+                            </template>
+                        </t-cell>
+                    </t-checkbox-group>
+                </div>
+            </div>
+        </t-popup>
+    </div>
+</template>
+
+<script>
+import {util} from '../../../tnxvue.ts';
+import TnxtdmSlideRadioGroup from '../slide-radio-group/SlideRadioGroup.vue';
+
+export const isMultiSelector = function (selector) {
+    return selector === 'checkbox' || selector === 'tags' || selector === 'multi-select' || selector === 'texts';
+}
+
+export default {
+    name: 'TnxtdmSelect',
+    components: {
+        TnxtdmSlideRadioGroup,
+    },
+    props: {
+        id: [Number, String],
+        modelValue: {
+            type: [String, Number, Boolean, Array],
+            default: null,
+        },
+        selector: String,
+        items: Array,
+        valueName: {
+            type: String,
+            default: 'value',
+        },
+        textName: {
+            type: String,
+            default: 'text',
+        },
+        indexName: {
+            type: String,
+            default: 'index',
+        },
+        iconName: {
+            type: String,
+            default: 'icon',
+        },
+        defaultValue: {
+            type: [String, Number, Boolean, Array],
+            default: null,
+        },
+        empty: {
+            type: [Boolean, String],
+            default: false,
+        },
+        emptyValue: {
+            type: [String, Number, Boolean, Array],
+            default: '',
+        },
+        emptyClass: String,
+        placeholder: String,
+        width: String,
+        disabled: Boolean,
+        tagClick: Function,
+        change: Function,
+        filterable: Boolean,
+        theme: String,
+        size: String,
+        border: Boolean,
+    },
+    emits: ['update:modelValue', 'change'],
+    data() {
+        let model = this.getModel(this.items);
+        if (this.items && model !== this.modelValue) {
+            this.$emit('update:modelValue', model);
+        }
+        return {
+            groupKey: new Date().getTime(),
+            model: model,
+            hiddenValues: [],
+            pickerVisible: false,
+            pickerValue: [], // TDesign Picker v-model is array
+            tempModel: [], // For multi-select popup
+            formDisabled: false,
+        };
+    },
+    mounted() {
+        this.initFormDisabled();
+    },
+    computed: {
+        isDisabled() {
+            return this.disabled || this.formDisabled;
+        },
+        emptyText() {
+            return typeof this.empty === 'string' ? this.empty : '';
+        },
+        currentText() {
+            let item = this.getItem(this.model);
+            if (item) {
+                return item[this.textName];
+            }
+            if (this.isMulti() && Array.isArray(this.model) && this.model.length > 0) {
+                // 多选时显示选中的数量或第一个选项的文本等，这里简化处理，显示第一个选中的文本 + 等
+                let firstItem = this.getItem(this.model[0]);
+                if (firstItem) {
+                    return firstItem[this.textName] + (this.model.length > 1 ? ` 等${this.model.length}项` : '');
+                }
+            }
+            return this.emptyText;
+        },
+        modelEqualsModelValue() {
+            if (Array.isArray(this.model) && Array.isArray(this.modelValue)) {
+                // 简单的数组比较
+                if (this.model.length !== this.modelValue.length) {
+                    return false;
+                }
+                for (let i = 0; i < this.model.length; i++) {
+                    if (this.model[i] !== this.modelValue[i]) {
+                        return false;
+                    }
+                }
+                return true;
+            } else {
+                return this.model === this.modelValue;
+            }
+        },
+        firstEnabledItem() {
+            if (!this.items) {
+                return undefined;
+            }
+            for (let item of this.items) {
+                if (!item.disabled) {
+                    return item;
+                }
+            }
+            return undefined;
+        },
+        pickerColumns() {
+            return [this.items || []];
+        }
+    },
+    watch: {
+        model(newValue, oldValue) {
+            if (!this.modelEqualsModelValue) {
+                this.$emit('update:modelValue', newValue);
+                if (util.object.isNotEmpty(newValue) || util.object.isNotEmpty(oldValue)) {
+                    this.$nextTick(() => {
+                        this.triggerChange(newValue);
+                    });
+                }
+            }
+        },
+        modelValue() {
+            this.model = this.getModel(this.items);
+        },
+        items(items) {
+            this.model = this.getModel(items);
+        },
+    },
+    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;
+            }
+        },
+        isMulti() {
+            return isMultiSelector(this.selector);
+        },
+        triggerChange(value) {
+            if (this.change) {
+                let item = undefined;
+                if (this.isMulti()) {
+                    item = [];
+                    if (Array.isArray(value)) {
+                        for (let v of value) {
+                            item.push(this.getItem(v));
+                        }
+                    }
+                } else {
+                    item = this.getItem(value);
+                }
+                this.change(item, this.id);
+            } else {
+                this.$emit('change', value);
+            }
+        },
+        getItem(value) {
+            if (this.empty && value === this.emptyValue) {
+                let item = {};
+                item[this.valueName] = this.emptyValue;
+                item[this.textName] = this.emptyText;
+                return item;
+            }
+            if (value !== undefined && value !== null && this.items) {
+                for (let item of this.items) {
+                    if ((item[this.valueName] + '') === (value + '')) {
+                        return item;
+                    }
+                }
+            }
+            return undefined;
+        },
+        getModel(items) {
+            let model = this.modelValue;
+            if (util.object.isNull(model)) {
+                model = this.defaultValue;
+            }
+            if (this.isMulti()) {
+                if (util.object.isNull(model)) {
+                    return [];
+                }
+                if (!Array.isArray(model)) {
+                    model = [model];
+                }
+                if (items && items.length) {
+                    for (let i = model.length - 1; i >= 0; i--) {
+                        let item = this.getItem(model[i]);
+                        if (!item) {
+                            model.splice(i, 1);
+                        }
+                    }
+                } else {
+                    model = [];
+                }
+                return model;
+            }
+            if (util.object.isNull(model)) {
+                return null;
+            }
+            if (items && items.length) {
+                let item = this.getItem(model);
+                if (item) {
+                    return item[this.valueName];
+                } else {
+                    if (!this.empty) {
+                        let firstItem = this.firstEnabledItem;
+                        if (firstItem && firstItem[this.valueName]) {
+                            return firstItem[this.valueName];
+                        }
+                    }
+                }
+            }
+            return model;
+        },
+        isSelected(value) {
+            if (Array.isArray(this.model)) {
+                return this.model.indexOf(value) >= 0;
+            } else {
+                return this.model === value;
+            }
+        },
+        select(value, event) {
+            if (this.tagClick) {
+                let item = this.getItem(value);
+                if (item) {
+                    if (this.tagClick(item) === false) {
+                        return;
+                    }
+                }
+            }
+            if (this.isMulti()) {
+                let index = this.model.indexOf(value);
+                if (index >= 0) {
+                    let newModel = [...this.model];
+                    newModel.splice(index, 1);
+                    this.model = newModel;
+                } else {
+                    this.model = [...this.model, value];
+                }
+            } else {
+                this.model = value;
+            }
+            // Mobile usually doesn't need blur
+        },
+        openPicker() {
+            if (this.isDisabled) {
+                return;
+            }
+            if (this.isMulti()) {
+                this.tempModel = [...(this.model || [])];
+            } else {
+                this.pickerValue = [this.model];
+            }
+            this.pickerVisible = true;
+        },
+        onPickerConfirm(val) {
+            // TDesign Picker returns array of values
+            if (val && val.length > 0) {
+                this.model = val[0];
+            } else {
+                this.model = null; // or empty value
+            }
+            this.pickerVisible = false;
+        },
+        onMultiConfirm() {
+            this.model = [...this.tempModel];
+            this.pickerVisible = false;
+        },
+        onSlideRadioChange(item) {
+            // SlideRadioGroup 直接返回了 item 对象，或者如果没找到则是值
+            // 我们需要保持与 triggerChange 逻辑一致，最终调用 props.change
+            if (this.change) {
+                this.change(item, this.id);
+            } else {
+                this.$emit('change', item ? item[this.valueName] : item);
+            }
+        },
+        getText(value) {
+            let item = this.getItem(value);
+            return item ? item[this.textName] : undefined;
+        },
+        disableItem(itemValue, disabled, reverseOther) {
+            let values = Array.isArray(itemValue) ? itemValue : [itemValue];
+            if (this.items) {
+                for (let item of this.items) {
+                    // 注意类型比较，这里假设 value 类型一致
+                    let currentVal = item[this.valueName];
+                    if (values.some(v => v === currentVal)) {
+                        item.disabled = disabled;
+                        // 如果禁用的选项已被选择，则需从已选择值中移除该选项的值
+                        if (this.isMulti()) {
+                            if (Array.isArray(this.model)) {
+                                const idx = this.model.indexOf(currentVal);
+                                if (idx > -1) {
+                                    const newModel = [...this.model];
+                                    newModel.splice(idx, 1);
+                                    this.model = newModel;
+                                }
+                            }
+                        } else {
+                            if (this.model === currentVal) {
+                                this.model = null;
+                            }
+                        }
+                    } else if (reverseOther) {
+                        item.disabled = !disabled;
+                    }
+                }
+                // 强制更新视图
+                this.groupKey = new Date().getTime();
+            }
+        },
+    }
+}
+</script>
+
+<style>
+.tnxtdm-tag-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.tnxtdm-text-button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.tnxtdm-select-multi-popup {
+    background-color: var(--td-bg-color-container);
+    display: flex;
+    flex-direction: column;
+    max-height: 70vh;
+}
+
+.tnxtdm-select-multi-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+    height: 48px;
+    border-bottom: 1px solid var(--td-border-level-1-color);
+}
+
+.tnxtdm-select-multi-title {
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.tnxtdm-select-multi-body {
+    overflow-y: auto;
+}
+</style>