@ebiz/designer-components 0.1.0 → 0.1.1

package/src/components/TdesignSelect.vue

@@ -1,445 +1,445 @@
-<template>
-    <t-select 
-        :autoWidth="autoWidth"
-        :borderless="borderless"
-        :clearable="clearable"
-        :collapsedItems="collapsedItems"
-        :creatable="creatable"
-        :disabled="disabled"
-        :empty="empty"
-        :filter="filter"
-        :filterable="filterable"
-        :keys="keys"
-        :label="label"
-        :loading="loading"
-        :loadingText="loadingText"
-        :max="max"
-        :minCollapsedNum="minCollapsedNum"
-        :multiple="multiple"
-        :options="options"
-        :placeholder="placeholder"
-        :popupProps="popupProps"
-        :popupVisible="popupVisible"
-        :prefixIcon="prefixIcon"
-        :readonly="readonly"
-        :reserveKeyword="reserveKeyword"
-        :scroll="scroll"
-        :selectInputProps="selectInputProps"
-        :showArrow="showArrow"
-        :size="size"
-        :status="status"
-        :tagInputProps="tagInputProps"
-        :tagProps="tagProps"
-        :tips="tips"
-        :valueDisplay="valueDisplay"
-        :valueType="valueType"
-        :onPaste="onPaste"
-        v-model="selectedValue"
-        @blur="handleBlur"
-        @change="handleChange"
-        @clear="handleClear"
-        @create="handleCreate"
-        @dropdown-visible-change="handleDropdownVisibleChange"
-        @enter="handleEnter"
-        @focus="handleFocus"
-        @keydown="handleKeydown"
-        @mouseenter="handleMouseenter"
-        @mouseleave="handleMouseleave"
-        @paste="handlePaste"
-        @popup-visible-change="handlePopupVisibleChange"
-        @remove="handleRemove"
-        @scroll="handleScroll"
-        @search="handleSearch"
-    >
-        <!-- 选项插槽 -->
-        <template v-if="$slots.options" #options>
-            <slot name="options"></slot>
-        </template>
-        
-        <!-- 前缀图标插槽 -->
-        <template v-if="$slots.prefixIcon" #prefixIcon>
-            <slot name="prefixIcon"></slot>
-        </template>
-        
-        <!-- 后缀图标插槽 -->
-        <template v-if="$slots.suffixIcon" #suffixIcon>
-            <slot name="suffixIcon"></slot>
-        </template>
-        
-        <!-- 后缀内容插槽 -->
-        <template v-if="$slots.suffix" #suffix>
-            <slot name="suffix"></slot>
-        </template>
-        
-        <!-- 空数据插槽 -->
-        <template v-if="$slots.empty" #empty>
-            <slot name="empty"></slot>
-        </template>
-        
-        <!-- 选项显示插槽 -->
-        <template v-if="$slots.valueDisplay" #valueDisplay>
-            <slot name="valueDisplay"></slot>
-        </template>
-        
-        <!-- 面板底部内容插槽 -->
-        <template v-if="$slots.panelBottomContent" #panelBottomContent>
-            <slot name="panelBottomContent"></slot>
-        </template>
-        
-        <!-- 面板顶部内容插槽 -->
-        <template v-if="$slots.panelTopContent" #panelTopContent>
-            <slot name="panelTopContent"></slot>
-        </template>
-        
-        <!-- 选项标签插槽 -->
-        <template v-if="$slots.tag" #tag>
-            <slot name="tag"></slot>
-        </template>
-        
-        <!-- 加载中插槽 -->
-        <template v-if="$slots.loadingText" #loadingText>
-            <slot name="loadingText"></slot>
-        </template>
-        
-        <!-- 折叠项插槽 -->
-        <template v-if="$slots.collapsedItems" #collapsedItems>
-            <slot name="collapsedItems"></slot>
-        </template>
-
-        <!-- 选择框自定义首部内容插槽 -->
-        <template v-if="$slots.header" #header>
-            <slot name="header"></slot>
-        </template>
-
-        <!-- 选择框自定义底部内容插槽 -->
-        <template v-if="$slots.footer" #footer>
-            <slot name="footer"></slot>
-        </template>
-
-        <!-- 输入框前置内容插槽 -->
-        <template v-if="$slots.prepend" #prepend>
-            <slot name="prepend"></slot>
-        </template>
-
-        <!-- 输入框后置内容插槽 -->
-        <template v-if="$slots.append" #append>
-            <slot name="append"></slot>
-        </template>
-
-        <!-- 选项内容插槽 -->
-        <template v-if="$slots.default" #default>
-            <slot></slot>
-        </template>
-
-        <!-- 选项分组标题插槽 -->
-        <template v-if="$slots.optionGroup" #optionGroup>
-            <slot name="optionGroup"></slot>
-        </template>
-    </t-select>
-</template>
-
-<script>
-export default {
-    name: "EbizTdesignSelect"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import { Select as TSelect } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 选择器的值
-    modelValue: {
-        type: [String, Number, Object, Array],
-        default: undefined
-    },
-    // 宽度随内容自适应
-    autoWidth: {
-        type: Boolean,
-        default: false
-    },
-    // 无边框模式
-    borderless: {
-        type: Boolean,
-        default: false
-    },
-    // 是否可以清空选项
-    clearable: {
-        type: Boolean,
-        default: false
-    },
-    // 用于控制多选数量超出时，折叠选项的内容
-    collapsedItems: {
-        type: [Function, Boolean],
-        default: undefined
-    },
-    // 是否允许用户创建新条目
-    creatable: {
-        type: Boolean,
-        default: false
-    },
-    // 是否禁用选择器
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 当下拉列表为空时显示的内容
-    empty: {
-        type: String,
-        default: undefined
-    },
-    // 自定义过滤方法
-    filter: {
-        type: Function,
-        default: undefined
-    },
-    // 是否可搜索
-    filterable: {
-        type: Boolean,
-        default: false
-    },
-    // 用来定义选项中的字段别名
-    keys: {
-        type: Object,
-        default: () => ({})
-    },
-    // 左侧文本
-    label: {
-        type: [String, Function],
-        default: undefined
-    },
-    // 是否为加载状态
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    // 远程加载时显示的文字
-    loadingText: {
-        type: String,
-        default: undefined
-    },
-    // 用于控制多选数量，值为 0 则不限制
-    max: {
-        type: Number,
-        default: 0
-    },
-    // 最小折叠数量，用于多选情况下折叠选中项
-    minCollapsedNum: {
-        type: Number,
-        default: 0
-    },
-    // 是否允许多选
-    multiple: {
-        type: Boolean,
-        default: false
-    },
-    // 数据化配置选项内容
-    options: {
-        type: Array,
-        default: () => []
-    },
-    // 占位符
-    placeholder: {
-        type: String,
-        default: undefined
-    },
-    // 弹出层的定位方式，同 Popup 组件
-    popupProps: {
-        type: Object,
-        default: () => ({})
-    },
-    // 是否显示下拉框
-    popupVisible: {
-        type: Boolean,
-        default: undefined
-    },
-    // 前缀图标
-    prefixIcon: {
-        type: [Function, String],
-        default: undefined
-    },
-    // 只读状态
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    // 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
-    reserveKeyword: {
-        type: Boolean,
-        default: false
-    },
-    // 懒加载和虚拟滚动配置
-    scroll: {
-        type: Object,
-        default: () => ({})
-    },
-    // 透传 SelectInput 筛选器输入框组件的全部属性
-    selectInputProps: {
-        type: Object,
-        default: () => ({})
-    },
-    // 是否显示右侧箭头
-    showArrow: {
-        type: Boolean,
-        default: true
-    },
-    // 组件尺寸
-    size: {
-        type: String,
-        default: 'medium',
-        validator: (val) => ['small', 'medium', 'large'].includes(val)
-    },
-    // 输入框状态
-    status: {
-        type: String,
-        default: undefined,
-        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
-    },
-    // 后置图标前的后置内容
-    suffix: {
-        type: String,
-        default: undefined
-    },
-    // 后置图标
-    suffixIcon: {
-        type: [Function, String],
-        default: undefined
-    },
-    // 透传 TagInput 标签输入框组件的全部属性
-    tagInputProps: {
-        type: Object,
-        default: () => ({})
-    },
-    // 透传 Tag 标签组件的全部属性
-    tagProps: {
-        type: Object,
-        default: () => ({})
-    },
-    // 输入框下方提示文本，会根据不同的 status 呈现不同的样式
-    tips: {
-        type: String,
-        default: ''
-    },
-    // 自定义选中项呈现方式
-    valueDisplay: {
-        type: Function,
-        default: undefined
-    },
-    // 用于控制选中值的类型
-    valueType: {
-        type: String,
-        default: undefined,
-        validator: (val) => ['value', 'object'].includes(val)
-    },
-    // 粘贴事件回调函数，参数为粘贴板内容
-    onPaste: {
-        type: Function,
-        default: undefined
-    }
-});
-
-// 选择器的值
-const selectedValue = computed({
-    get: () => props.modelValue,
-    set: (value) => emit('update:modelValue', value)
-});
-
-const emit = defineEmits([
-    'update:modelValue',
-    'blur',
-    'change',
-    'clear',
-    'create',
-    'dropdown-visible-change',
-    'enter',
-    'focus',
-    'keydown',
-    'mouseenter',
-    'mouseleave',
-    'paste',
-    'popup-visible-change',
-    'remove',
-    'scroll',
-    'search'
-]);
-
-// 失去焦点时触发
-const handleBlur = (value, context) => {
-    emit('blur', value, context);
-};
-
-// 选中值变化时触发
-const handleChange = (value, context) => {
-    emit('change', value, context);
-};
-
-// 点击清除按钮时触发
-const handleClear = (context) => {
-    emit('clear', context);
-};
-
-// 当新增选项时触发
-const handleCreate = (value, context) => {
-    emit('create', value, context);
-};
-
-// 下拉框显示状态变化时触发
-const handleDropdownVisibleChange = (visible) => {
-    emit('dropdown-visible-change', visible);
-};
-
-// 按下回车键时触发
-const handleEnter = (context) => {
-    emit('enter', context);
-};
-
-// 获得焦点时触发
-const handleFocus = (context) => {
-    emit('focus', context);
-};
-
-// 键盘按下时触发
-const handleKeydown = (value, context) => {
-    emit('keydown', value, context);
-};
-
-// 鼠标进入时触发
-const handleMouseenter = (context) => {
-    emit('mouseenter', context);
-};
-
-// 鼠标离开时触发
-const handleMouseleave = (context) => {
-    emit('mouseleave', context);
-};
-
-// 粘贴事件触发
-const handlePaste = (context) => {
-    emit('paste', context);
-};
-
-// 下拉框显示或隐藏时触发
-const handlePopupVisibleChange = (visible, context) => {
-    emit('popup-visible-change', visible, context);
-};
-
-// 多选模式下移除tag时触发
-const handleRemove = (options) => {
-    emit('remove', options);
-};
-
-// 滚动事件触发
-const handleScroll = ({ scrollTop, scrollBottom }) => {
-    emit('scroll', { scrollTop, scrollBottom });
-};
-
-// 搜索时触发
-const handleSearch = (filterWords) => {
-    emit('search', filterWords);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-select 
+        :autoWidth="autoWidth"
+        :borderless="borderless"
+        :clearable="clearable"
+        :collapsedItems="collapsedItems"
+        :creatable="creatable"
+        :disabled="disabled"
+        :empty="empty"
+        :filter="filter"
+        :filterable="filterable"
+        :keys="keys"
+        :label="label"
+        :loading="loading"
+        :loadingText="loadingText"
+        :max="max"
+        :minCollapsedNum="minCollapsedNum"
+        :multiple="multiple"
+        :options="options"
+        :placeholder="placeholder"
+        :popupProps="popupProps"
+        :popupVisible="popupVisible"
+        :prefixIcon="prefixIcon"
+        :readonly="readonly"
+        :reserveKeyword="reserveKeyword"
+        :scroll="scroll"
+        :selectInputProps="selectInputProps"
+        :showArrow="showArrow"
+        :size="size"
+        :status="status"
+        :tagInputProps="tagInputProps"
+        :tagProps="tagProps"
+        :tips="tips"
+        :valueDisplay="valueDisplay"
+        :valueType="valueType"
+        :onPaste="onPaste"
+        v-model="selectedValue"
+        @blur="handleBlur"
+        @change="handleChange"
+        @clear="handleClear"
+        @create="handleCreate"
+        @dropdown-visible-change="handleDropdownVisibleChange"
+        @enter="handleEnter"
+        @focus="handleFocus"
+        @keydown="handleKeydown"
+        @mouseenter="handleMouseenter"
+        @mouseleave="handleMouseleave"
+        @paste="handlePaste"
+        @popup-visible-change="handlePopupVisibleChange"
+        @remove="handleRemove"
+        @scroll="handleScroll"
+        @search="handleSearch"
+    >
+        <!-- 选项插槽 -->
+        <template v-if="$slots.options" #options>
+            <slot name="options"></slot>
+        </template>
+        
+        <!-- 前缀图标插槽 -->
+        <template v-if="$slots.prefixIcon" #prefixIcon>
+            <slot name="prefixIcon"></slot>
+        </template>
+        
+        <!-- 后缀图标插槽 -->
+        <template v-if="$slots.suffixIcon" #suffixIcon>
+            <slot name="suffixIcon"></slot>
+        </template>
+        
+        <!-- 后缀内容插槽 -->
+        <template v-if="$slots.suffix" #suffix>
+            <slot name="suffix"></slot>
+        </template>
+        
+        <!-- 空数据插槽 -->
+        <template v-if="$slots.empty" #empty>
+            <slot name="empty"></slot>
+        </template>
+        
+        <!-- 选项显示插槽 -->
+        <template v-if="$slots.valueDisplay" #valueDisplay>
+            <slot name="valueDisplay"></slot>
+        </template>
+        
+        <!-- 面板底部内容插槽 -->
+        <template v-if="$slots.panelBottomContent" #panelBottomContent>
+            <slot name="panelBottomContent"></slot>
+        </template>
+        
+        <!-- 面板顶部内容插槽 -->
+        <template v-if="$slots.panelTopContent" #panelTopContent>
+            <slot name="panelTopContent"></slot>
+        </template>
+        
+        <!-- 选项标签插槽 -->
+        <template v-if="$slots.tag" #tag>
+            <slot name="tag"></slot>
+        </template>
+        
+        <!-- 加载中插槽 -->
+        <template v-if="$slots.loadingText" #loadingText>
+            <slot name="loadingText"></slot>
+        </template>
+        
+        <!-- 折叠项插槽 -->
+        <template v-if="$slots.collapsedItems" #collapsedItems>
+            <slot name="collapsedItems"></slot>
+        </template>
+
+        <!-- 选择框自定义首部内容插槽 -->
+        <template v-if="$slots.header" #header>
+            <slot name="header"></slot>
+        </template>
+
+        <!-- 选择框自定义底部内容插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+
+        <!-- 输入框前置内容插槽 -->
+        <template v-if="$slots.prepend" #prepend>
+            <slot name="prepend"></slot>
+        </template>
+
+        <!-- 输入框后置内容插槽 -->
+        <template v-if="$slots.append" #append>
+            <slot name="append"></slot>
+        </template>
+
+        <!-- 选项内容插槽 -->
+        <template v-if="$slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <!-- 选项分组标题插槽 -->
+        <template v-if="$slots.optionGroup" #optionGroup>
+            <slot name="optionGroup"></slot>
+        </template>
+    </t-select>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignSelect"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Select as TSelect } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 选择器的值
+    modelValue: {
+        type: [String, Number, Object, Array],
+        default: undefined
+    },
+    // 宽度随内容自适应
+    autoWidth: {
+        type: Boolean,
+        default: false
+    },
+    // 无边框模式
+    borderless: {
+        type: Boolean,
+        default: false
+    },
+    // 是否可以清空选项
+    clearable: {
+        type: Boolean,
+        default: false
+    },
+    // 用于控制多选数量超出时，折叠选项的内容
+    collapsedItems: {
+        type: [Function, Boolean],
+        default: undefined
+    },
+    // 是否允许用户创建新条目
+    creatable: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用选择器
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 当下拉列表为空时显示的内容
+    empty: {
+        type: String,
+        default: undefined
+    },
+    // 自定义过滤方法
+    filter: {
+        type: Function,
+        default: undefined
+    },
+    // 是否可搜索
+    filterable: {
+        type: Boolean,
+        default: false
+    },
+    // 用来定义选项中的字段别名
+    keys: {
+        type: Object,
+        default: () => ({})
+    },
+    // 左侧文本
+    label: {
+        type: [String, Function],
+        default: undefined
+    },
+    // 是否为加载状态
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    // 远程加载时显示的文字
+    loadingText: {
+        type: String,
+        default: undefined
+    },
+    // 用于控制多选数量，值为 0 则不限制
+    max: {
+        type: Number,
+        default: 0
+    },
+    // 最小折叠数量，用于多选情况下折叠选中项
+    minCollapsedNum: {
+        type: Number,
+        default: 0
+    },
+    // 是否允许多选
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    // 数据化配置选项内容
+    options: {
+        type: Array,
+        default: () => []
+    },
+    // 占位符
+    placeholder: {
+        type: String,
+        default: undefined
+    },
+    // 弹出层的定位方式，同 Popup 组件
+    popupProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否显示下拉框
+    popupVisible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 前缀图标
+    prefixIcon: {
+        type: [Function, String],
+        default: undefined
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
+    reserveKeyword: {
+        type: Boolean,
+        default: false
+    },
+    // 懒加载和虚拟滚动配置
+    scroll: {
+        type: Object,
+        default: () => ({})
+    },
+    // 透传 SelectInput 筛选器输入框组件的全部属性
+    selectInputProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否显示右侧箭头
+    showArrow: {
+        type: Boolean,
+        default: true
+    },
+    // 组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 输入框状态
+    status: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    // 后置图标前的后置内容
+    suffix: {
+        type: String,
+        default: undefined
+    },
+    // 后置图标
+    suffixIcon: {
+        type: [Function, String],
+        default: undefined
+    },
+    // 透传 TagInput 标签输入框组件的全部属性
+    tagInputProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 透传 Tag 标签组件的全部属性
+    tagProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 输入框下方提示文本，会根据不同的 status 呈现不同的样式
+    tips: {
+        type: String,
+        default: ''
+    },
+    // 自定义选中项呈现方式
+    valueDisplay: {
+        type: Function,
+        default: undefined
+    },
+    // 用于控制选中值的类型
+    valueType: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['value', 'object'].includes(val)
+    },
+    // 粘贴事件回调函数，参数为粘贴板内容
+    onPaste: {
+        type: Function,
+        default: undefined
+    }
+});
+
+// 选择器的值
+const selectedValue = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'blur',
+    'change',
+    'clear',
+    'create',
+    'dropdown-visible-change',
+    'enter',
+    'focus',
+    'keydown',
+    'mouseenter',
+    'mouseleave',
+    'paste',
+    'popup-visible-change',
+    'remove',
+    'scroll',
+    'search'
+]);
+
+// 失去焦点时触发
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
+};
+
+// 选中值变化时触发
+const handleChange = (value, context) => {
+    emit('change', value, context);
+};
+
+// 点击清除按钮时触发
+const handleClear = (context) => {
+    emit('clear', context);
+};
+
+// 当新增选项时触发
+const handleCreate = (value, context) => {
+    emit('create', value, context);
+};
+
+// 下拉框显示状态变化时触发
+const handleDropdownVisibleChange = (visible) => {
+    emit('dropdown-visible-change', visible);
+};
+
+// 按下回车键时触发
+const handleEnter = (context) => {
+    emit('enter', context);
+};
+
+// 获得焦点时触发
+const handleFocus = (context) => {
+    emit('focus', context);
+};
+
+// 键盘按下时触发
+const handleKeydown = (value, context) => {
+    emit('keydown', value, context);
+};
+
+// 鼠标进入时触发
+const handleMouseenter = (context) => {
+    emit('mouseenter', context);
+};
+
+// 鼠标离开时触发
+const handleMouseleave = (context) => {
+    emit('mouseleave', context);
+};
+
+// 粘贴事件触发
+const handlePaste = (context) => {
+    emit('paste', context);
+};
+
+// 下拉框显示或隐藏时触发
+const handlePopupVisibleChange = (visible, context) => {
+    emit('popup-visible-change', visible, context);
+};
+
+// 多选模式下移除tag时触发
+const handleRemove = (options) => {
+    emit('remove', options);
+};
+
+// 滚动事件触发
+const handleScroll = ({ scrollTop, scrollBottom }) => {
+    emit('scroll', { scrollTop, scrollBottom });
+};
+
+// 搜索时触发
+const handleSearch = (filterWords) => {
+    emit('search', filterWords);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>