@ebiz/designer-components 0.0.18-tj.1 → 0.0.19-beta.1

package/src/components/TdesignDialog.vue

@@ -0,0 +1,226 @@
+<template>
+    <t-dialog v-model:visible="isVisible" :attach="attach" :body="body" :cancel-btn="cancelBtn" :close-btn="closeBtn"
+        :close-on-esc-keydown="closeOnEscKeydown" :close-on-overlay-click="closeOnOverlayClick"
+        :confirm-btn="confirmBtn" :default-visible="defaultVisible" :destroy-on-close="destroyOnClose"
+        :draggable="draggable" :footer="footer" :header="header" :mode="mode" :placement="placement"
+        :show-overlay="showOverlay" :width="width" :z-index="zIndex" @cancel="handleCancel" @close="handleClose"
+        @close-btn-click="handleCloseBtnClick" @confirm="handleConfirm" @esc-keydown="handleEscKeydown"
+        @overlay-click="handleOverlayClick" @opened="handleOpened" @closed="handleClosed"
+        @update:visible="handleUpdateVisible">
+        <!-- 头部插槽 -->
+        <template v-if="$slots.header" #header>
+            <slot name="header"></slot>
+        </template>
+
+        <!-- 内容插槽 -->
+        <template v-if="$slots.body" #body>
+            <slot name="body"></slot>
+        </template>
+
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 页脚插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+
+        <!-- 取消按钮插槽 -->
+        <template v-if="$slots.cancelBtn" #cancel-btn>
+            <slot name="cancelBtn"></slot>
+        </template>
+
+        <!-- 确认按钮插槽 -->
+        <template v-if="$slots.confirmBtn" #confirm-btn>
+            <slot name="confirmBtn"></slot>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+export default {
+    name: "EbizDialog"
+}
+</script>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+
+// 定义属性
+const props = defineProps({
+    // 对话框挂载的节点
+    attach: {
+        type: [String, Function, Element],
+        default: 'body'
+    },
+    // 对话框内容
+    body: {
+        type: [String, Function],
+        default: ''
+    },
+    // 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+    cancelBtn: {
+        type: [String, Object, null],
+        default: ''
+    },
+    // 关闭按钮，值为 true 显示默认关闭按钮；值为 false 则不显示关闭按钮；值类型为 string 则直接显示值；值类型为 TNode，则显示自定义按钮
+    closeBtn: {
+        type: [Boolean, String, Function],
+        default: true
+    },
+    // 按下 ESC 时是否触发对话框关闭
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: undefined
+    },
+    // 点击蒙层时是否触发关闭
+    closeOnOverlayClick: {
+        type: Boolean,
+        default: undefined
+    },
+    // 确认按钮，可自定义。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+    confirmBtn: {
+        type: [String, Object, null],
+        default: ''
+    },
+    // 对话框默认是否显示
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 是否在关闭弹框的时候销毁子元素
+    destroyOnClose: {
+        type: Boolean,
+        default: false
+    },
+    // 对话框是否可以拖拽
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 底部操作栏，默认会有"确认"和"取消"两个按钮
+    footer: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 头部内容
+    header: {
+        type: [String, Boolean, Function],
+        default: true
+    },
+    // 对话框类型
+    mode: {
+        type: String,
+        default: 'modal',
+        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
+    },
+    // 对话框位置，类似 CSS 中的 position
+    placement: {
+        type: String,
+        default: 'top',
+        validator: (val) => ['top', 'center'].includes(val)
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 控制对话框显示与隐藏
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 对话框宽度
+    width: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 对话框层级
+    zIndex: {
+        type: Number,
+        default: undefined
+    }
+});
+
+// 显示状态
+const isVisible = ref(props.visible);
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    isVisible.value = newValue;
+});
+
+// 定义事件
+const emit = defineEmits([
+    'cancel',
+    'close',
+    'close-btn-click',
+    'confirm',
+    'esc-keydown',
+    'overlay-click',
+    'opened',
+    'closed',
+    'update:visible'
+]);
+
+// 取消按钮点击事件
+const handleCancel = (e) => {
+    emit('cancel', { e });
+    emit('close', { trigger: 'cancel', e });
+    emit('update:visible', false);
+};
+
+// 关闭事件
+const handleClose = (context) => {
+    emit('close', context);
+    emit('update:visible', false);
+};
+
+// 关闭按钮点击事件
+const handleCloseBtnClick = (e) => {
+    emit('close-btn-click', { e });
+    emit('close', { trigger: 'close-btn', e });
+    emit('update:visible', false);
+};
+
+// 确认按钮点击事件
+const handleConfirm = (e) => {
+    emit('confirm', { e });
+    emit('update:visible', false);
+};
+
+// ESC 按键按下事件
+const handleEscKeydown = (e) => {
+    emit('esc-keydown', { e });
+    emit('close', { trigger: 'esc', e });
+    emit('update:visible', false);
+};
+
+// 遮罩层点击事件
+const handleOverlayClick = (e) => {
+    emit('overlay-click', { e });
+    emit('close', { trigger: 'overlay', e });
+    emit('update:visible', false);
+};
+
+// 对话框打开完成事件
+const handleOpened = () => {
+    emit('opened');
+};
+
+// 对话框关闭完成事件
+const handleClosed = () => {
+    emit('closed');
+};
+
+// 更新可见状态
+const handleUpdateVisible = (visible) => {
+    isVisible.value = visible;
+    emit('update:visible', visible);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>

package/src/components/TdesignGrid.vue

@@ -0,0 +1,56 @@
+<template>
+    <t-row
+        :align="align"
+        :justify="justify"
+        :gutter="gutter"
+        :tag="tag"
+        :gap="gap"
+    >
+        <slot></slot>
+    </t-row>
+</template>
+
+<script>
+export default {
+    name: "EbizGrid"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Row as TRow } from 'tdesign-vue-next';
+
+defineProps({
+    // 垂直对齐方式
+    align: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['start', 'end', 'center', 'stretch', 'baseline'].includes(val)
+    },
+    // 水平排列方式
+    justify: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['start', 'end', 'center', 'space-around', 'space-between'].includes(val)
+    },
+    // 栅格间隔，示例：16、[16, 16]
+    gutter: {
+        type: [Number, Array, Object],
+        default: 0
+    },
+    // 自定义元素标签
+    tag: {
+        type: String,
+        default: 'div'
+    },
+    // 间隔，示例：'0'、'xs' 或 { xs: '4px', sm: '6px', md: '12px' }
+    gap: {
+        type: [String, Number, Object, Array],
+        default: undefined
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignInput.vue

@@ -181,60 +181,60 @@ const emit = defineEmits([
 ]);
 
 // 处理输入事件
-const handleInput = (value, { e }) => {
-    emit('update:modelValue', value);
-    emit('input', value, { e });
+const handleInput = (value, context) => {
+    emit('input', value, context);
 };
 
 // 处理变化事件
-const handleChange = (value, { e }) => {
-    emit('change', value, { e });
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
 };
 
 // 处理失去焦点事件
-const handleBlur = (value, { e }) => {
-    emit('blur', value, { e });
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
 };
 
 // 处理获取焦点事件
-const handleFocus = (value, { e }) => {
-    emit('focus', value, { e });
+const handleFocus = (value, context) => {
+    emit('focus', value, context);
 };
 
 // 处理回车事件
-const handleEnter = (value, { e }) => {
-    emit('enter', value, { e });
+const handleEnter = (value, context) => {
+    emit('enter', value, context);
 };
 
 // 处理清空事件
-const handleClear = ({ e }) => {
+const handleClear = (context) => {
     emit('update:modelValue', '');
-    emit('clear', { e });
+    emit('clear', context);
 };
 
 // 处理键盘按下事件
-const handleKeydown = (value, { e }) => {
-    emit('keydown', value, { e });
+const handleKeydown = (value, context) => {
+    emit('keydown', value, context);
 };
 
 // 处理键盘按键事件
-const handleKeypress = (value, { e }) => {
-    emit('keypress', value, { e });
+const handleKeypress = (value, context) => {
+    emit('keypress', value, context);
 };
 
 // 处理键盘弹起事件
-const handleKeyup = (value, { e }) => {
-    emit('keyup', value, { e });
+const handleKeyup = (value, context) => {
+    emit('keyup', value, context);
 };
 
 // 处理鼠标进入事件
-const handleMouseenter = (value, { e }) => {
-    emit('mouseenter', value, { e });
+const handleMouseenter = (value, context) => {
+    emit('mouseenter', value, context);
 };
 
 // 处理鼠标离开事件
-const handleMouseleave = (value, { e }) => {
-    emit('mouseleave', value, { e });
+const handleMouseleave = (value, context) => {
+    emit('mouseleave', value, context);
 };
 </script>
 

package/src/components/TdesignTextarea.vue

@@ -0,0 +1,143 @@
+<template>
+    <t-textarea
+        :value="modelValue"
+        :disabled="disabled"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :autofocus="autofocus"
+        :autosize="autosize"
+        :max-character="maxCharacter"
+        :max-length="maxLength"
+        :max-rows="maxRows"
+        :status="status"
+        :tips="tips"
+        :default-value="defaultValue"
+        @blur="handleBlur"
+        @change="handleChange"
+        @focus="handleFocus"
+        @keydown="handleKeydown"
+        @keypress="handleKeypress"
+        @keyup="handleKeyup"
+        @validate="handleValidate"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+    </t-textarea>
+</template>
+
+<script>
+export default {
+    name: "EbizTextarea"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Textarea as TTextarea } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 文本框值（v-model）
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    },
+    // 文本框默认值
+    defaultValue: {
+        type: [String, Number],
+        default: ''
+    },
+    // 是否禁用文本框
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否只读
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 文本框占位符
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    // 是否自动聚焦
+    autofocus: {
+        type: Boolean,
+        default: false
+    },
+    // 是否自动调整高度
+    autosize: {
+        type: [Boolean, Object],
+        default: false
+    },
+    // 用于控制组件是否显示最大字符数，值为 true 会显示组件字符数最大值
+    maxCharacter: {
+        type: [Number, Boolean],
+        default: false
+    },
+    // 用于控制输入框最大可输入的字符个数
+    maxLength: {
+        type: Number,
+        default: undefined
+    },
+    // 最大行数，当超出最大行数时，会自动出现滚动条
+    maxRows: {
+        type: Number,
+        default: undefined
+    },
+    // 文本框状态
+    status: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    // 输入框下方提示文本
+    tips: {
+        type: [String, Function],
+        default: ''
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'blur', 'change', 'focus', 'keydown', 'keypress', 'keyup', 'validate']);
+
+// 失去焦点事件
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
+};
+
+// 输入内容变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+
+// 获得焦点事件
+const handleFocus = (value, context) => {
+    emit('focus', value, 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 handleValidate = (context) => {
+    emit('validate', context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignTimeline.vue

@@ -0,0 +1,58 @@
+<template>
+    <t-timeline
+        :layout="layout"
+        :labelAlign="labelAlign"
+        :mode="mode"
+        :reverse="reverse"
+        :theme="theme"
+    >
+        <slot></slot>
+    </t-timeline>
+</template>
+
+<script>
+export default {
+    name: "EbizTimeline"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Timeline as TTimeline } from 'tdesign-vue-next';
+
+defineProps({
+    // 布局方向
+    layout: {
+        type: String,
+        default: 'vertical',
+        validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    // 标签位置
+    labelAlign: {
+        type: String,
+        default: 'auto',
+        validator: (val) => ['left', 'right', 'top', 'bottom', 'auto'].includes(val)
+    },
+    // 展示类型
+    mode: {
+        type: String,
+        default: 'alternate',
+        validator: (val) => ['alternate', 'same', 'left', 'right'].includes(val)
+    },
+    // 是否倒序排列
+    reverse: {
+        type: Boolean,
+        default: false
+    },
+    // 主题风格
+    theme: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'dot'].includes(val)
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>

package/src/components/TdesignTimelineItem.vue

@@ -0,0 +1,72 @@
+<template>
+    <t-timeline-item
+        :content="content"
+        :dot="dot"
+        :dotColor="dotColor"
+        :label="label"
+        :labelAlign="labelAlign"
+        :loading="loading"
+    >
+        <!-- 时间轴点内容插槽 -->
+        <template v-if="$slots.dot" #dot>
+            <slot name="dot"></slot>
+        </template>
+        
+        <!-- 标签内容插槽 -->
+        <template v-if="$slots.label" #label>
+            <slot name="label"></slot>
+        </template>
+        
+        <!-- 默认插槽 -->
+        <slot>{{ content }}</slot>
+    </t-timeline-item>
+</template>
+
+<script>
+export default {
+    name: "EbizTimelineItem"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { TimelineItem as TTimelineItem } from 'tdesign-vue-next';
+
+defineProps({
+    // 内容
+    content: {
+        type: String,
+        default: ''
+    },
+    // 时间轴点内容，可以是组件
+    dot: {
+        type: [String, Function],
+        default: ''
+    },
+    // 时间轴点颜色，内置 primary/warning/error/default 四种色值
+    dotColor: {
+        type: String,
+        default: ''
+    },
+    // 标签文本内容
+    label: {
+        type: String,
+        default: ''
+    },
+    // 标签位置，优先级高于 Timeline 中的 labelAlign
+    labelAlign: {
+        type: String,
+        default: '',
+        validator: (val) => ['left', 'right', 'top', 'bottom', 'auto', ''].includes(val)
+    },
+    // 是否处于加载状态
+    loading: {
+        type: Boolean,
+        default: false
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>