@ebiz/designer-components 0.0.18 → 0.0.19

package/src/components/TdesignInput.vue

@@ -0,0 +1,243 @@
+<template>
+    <t-input 
+        :align="align"
+        :autocomplete="autocomplete"
+        :autofocus="autofocus"
+        :clearable="clearable"
+        :disabled="disabled"
+        :format="format"
+        :label="label"
+        :maxcharacter="maxcharacter"
+        :maxlength="maxlength"
+        :name="name"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :show-clear-icon-on-empty="showClearIconOnEmpty"
+        :show-limit-number="showLimitNumber"
+        :size="size"
+        :status="status"
+        :tips="tips"
+        :type="type"
+        :value="modelValue"
+        @blur="handleBlur"
+        @change="handleChange"
+        @clear="handleClear"
+        @enter="handleEnter"
+        @focus="handleFocus"
+        @input="handleInput"
+        @keydown="handleKeydown"
+        @keypress="handleKeypress"
+        @keyup="handleKeyup"
+        @mouseenter="handleMouseenter"
+        @mouseleave="handleMouseleave"
+    >
+        <!-- 前置图标插槽 -->
+        <template v-if="$slots.prefixIcon" #prefix-icon>
+            <slot name="prefixIcon"></slot>
+        </template>
+        
+        <!-- 后置图标插槽 -->
+        <template v-if="$slots.suffixIcon" #suffix-icon>
+            <slot name="suffixIcon"></slot>
+        </template>
+        
+        <!-- 前置内容插槽 -->
+        <template v-if="$slots.label" #label>
+            <slot name="label"></slot>
+        </template>
+        
+        <!-- 后置内容插槽 -->
+        <template v-if="$slots.suffix" #suffix>
+            <slot name="suffix"></slot>
+        </template>
+    </t-input>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignInput"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Input as TInput } from 'tdesign-vue-next';
+
+const _props = defineProps({
+    // 对齐方式
+    align: {
+        type: String,
+        default: 'left',
+        validator: (val) => ['left', 'center', 'right'].includes(val)
+    },
+    // 自动完成
+    autocomplete: {
+        type: String,
+        default: undefined
+    },
+    // 自动获取焦点
+    autofocus: {
+        type: Boolean,
+        default: false
+    },
+    // 是否可清空
+    clearable: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 格式化函数
+    format: {
+        type: Function,
+        default: undefined
+    },
+    // 左侧文本
+    label: {
+        type: String,
+        default: ''
+    },
+    // 用户最多可以输入的字符个数
+    maxcharacter: {
+        type: Number,
+        default: undefined
+    },
+    // 用户最多可以输入的字符长度
+    maxlength: {
+        type: Number,
+        default: undefined
+    },
+    // 输入框名称
+    name: {
+        type: String,
+        default: ''
+    },
+    // 占位符
+    placeholder: {
+        type: String,
+        default: undefined
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 输入框为空时是否显示清除按钮
+    showClearIconOnEmpty: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示字数限制
+    showLimitNumber: {
+        type: Boolean,
+        default: false
+    },
+    // 输入框尺寸
+    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)
+    },
+    // 提示文本
+    tips: {
+        type: String,
+        default: ''
+    },
+    // 输入框类型
+    type: {
+        type: String,
+        default: 'text',
+        validator: (val) => ['text', 'number', 'url', 'tel', 'password', 'search', 'submit', 'hidden'].includes(val)
+    },
+    // v-model绑定值
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'blur',
+    'change',
+    'clear',
+    'enter',
+    'focus',
+    'input',
+    'keydown',
+    'keypress',
+    'keyup',
+    'mouseenter',
+    'mouseleave'
+]);
+
+// 处理输入事件
+const handleInput = (value, context) => {
+    emit('input', value, context);
+};
+
+// 处理变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+
+// 处理失去焦点事件
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
+};
+
+// 处理获取焦点事件
+const handleFocus = (value, context) => {
+    emit('focus', value, context);
+};
+
+// 处理回车事件
+const handleEnter = (value, context) => {
+    emit('enter', value, context);
+};
+
+// 处理清空事件
+const handleClear = (context) => {
+    emit('update:modelValue', '');
+    emit('clear', context);
+};
+
+// 处理键盘按下事件
+const handleKeydown = (value, context) => {
+    emit('keydown', value, context);
+};
+
+// 处理键盘按键事件
+const handleKeypress = (value, context) => {
+    emit('keypress', value, context);
+};
+
+// 处理键盘弹起事件
+const handleKeyup = (value, context) => {
+    emit('keyup', value, context);
+};
+
+// 处理鼠标进入事件
+const handleMouseenter = (value, context) => {
+    emit('mouseenter', value, context);
+};
+
+// 处理鼠标离开事件
+const handleMouseleave = (value, context) => {
+    emit('mouseleave', value, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignSelect.vue

@@ -0,0 +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>
+/* 自定义样式 */
+</style>