@ebiz/designer-components 0.0.18-beta.1 → 0.0.18-beta.10

package/src/components/EbizTabs.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="tdesign-tabs-wrapper">
+    <t-tabs
+      v-model="innerValue"
+      :addable="addable"
+      :disabled="disabled"
+      :placement="placement"
+      :size="size" 
+      :theme="theme"
+      :list="list"
+      :dragSort="dragSort"
+      @add="handleAdd"
+      @change="handleChange"
+      @dragSort="handleDragSort"
+      @remove="handleRemove"
+    >
+      <!-- 添加按钮插槽 -->
+      <template v-if="$slots.action" #action>
+        <slot name="action"></slot>
+      </template>
+      
+      <!-- 直接输出默认插槽内容，这里应该只包含EbizTabPanel -->
+      <slot></slot>
+    </t-tabs>
+  </div>
+</template>
+
+<script>
+import { Tabs as TTabs } from 'tdesign-vue-next';
+import { defineComponent, toRefs, computed, watch } from 'vue';
+
+export default defineComponent({
+  name: 'EbizTabs',
+  components: {
+    't-tabs': TTabs,
+  },
+  props: {
+    // v-model绑定值
+    modelValue: {
+      type: [String, Number],
+    },
+    // 默认值
+    defaultValue: {
+      type: [String, Number],
+    },
+    // 选项卡右侧的操作区域
+    action: {
+      type: [Function, String],
+      default: undefined
+    },
+    // 选项卡是否可增加
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    // 是否禁用选项卡
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否开启拖拽调整顺序
+    dragSort: {
+      type: Boolean,
+      default: false
+    },
+    // 选项卡列表
+    list: {
+      type: Array,
+    },
+    // 选项卡位置
+    placement: {
+      type: String,
+      default: 'top',
+      validator: (val) => ['top', 'bottom', 'left', 'right'].includes(val)
+    },
+    // 组件尺寸
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (val) => ['medium', 'large'].includes(val)
+    },
+    // 选项卡风格
+    theme: {
+      type: String,
+      default: 'normal',
+      validator: (val) => ['normal', 'card'].includes(val)
+    }
+  },
+  emits: ['update:modelValue', 'add', 'change', 'dragSort', 'remove'],
+  setup(props, { emit }) {
+    const { modelValue, defaultValue } = toRefs(props);
+    
+    // 内部值计算属性,用于双向绑定
+    const innerValue = computed({
+      get: () => modelValue.value !== undefined ? modelValue.value : defaultValue.value,
+      set: (val) => {
+        emit('update:modelValue', val);
+      }
+    });
+    
+    // 监听modelValue变化
+    watch(modelValue, (newVal) => {
+      if (newVal !== innerValue.value) {
+        innerValue.value = newVal;
+      }
+    });
+    
+    // 添加选项卡事件
+    const handleAdd = (context) => {
+      emit('add', context);
+    };
+    
+    // 选项卡切换事件
+    const handleChange = (value, context) => {
+      emit('change', value, context);
+    };
+    
+    // 拖拽排序事件
+    const handleDragSort = (context) => {
+      emit('dragSort', context);
+    };
+    
+    // 删除选项卡事件
+    const handleRemove = (options) => {
+      emit('remove', options);
+    };
+    
+    return {
+      innerValue,
+      handleAdd,
+      handleChange,
+      handleDragSort,
+      handleRemove
+    };
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.tdesign-tabs-wrapper {
+  width: 100%;
+}
+</style>

package/src/components/TdesignAlert.vue

@@ -0,0 +1,116 @@
+<template>
+    <t-alert
+        :theme="theme"
+        :title="title"
+        :message="message"
+        :icon="icon"
+        :close="close"
+        :maxLine="maxLine"
+        :operation="operation"
+        :description="description"
+        :close-btn="closeBtn"
+        :default-open="defaultOpen"
+        @close="handleClose"
+    >
+        <!-- 标题插槽 -->
+        <template v-if="$slots.title" #title>
+            <slot name="title"></slot>
+        </template>
+        
+        <!-- 内容插槽 -->
+        <template v-if="$slots.default">
+            <slot></slot>
+        </template>
+        
+        <!-- 操作区插槽 -->
+        <template v-if="$slots.operation" #operation>
+            <slot name="operation"></slot>
+        </template>
+        
+        <!-- 关闭按钮插槽 -->
+        <template v-if="$slots['close-btn']" #close-btn>
+            <slot name="close-btn"></slot>
+        </template>
+        
+        <!-- 图标插槽 -->
+        <template v-if="$slots.icon" #icon>
+            <slot name="icon"></slot>
+        </template>
+    </t-alert>
+</template>
+
+<script>
+export default {
+    name: "EbizAlert"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Alert as TAlert } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 主题
+    theme: {
+        type: String,
+        default: 'info',
+        validator: (val) => ['success', 'info', 'warning', 'error'].includes(val)
+    },
+    // 标题
+    title: {
+        type: String,
+        default: ''
+    },
+    // 内容
+    message: {
+        type: String,
+        default: ''
+    },
+    // 图标
+    icon: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 关闭按钮
+    close: {
+        type: Boolean,
+        default: false
+    },
+    // 内容显示最大行数
+    maxLine: {
+        type: Number,
+        default: 0
+    },
+    // 操作区内容
+    operation: {
+        type: [String, Function],
+        default: ''
+    },
+    // 描述内容
+    description: {
+        type: String,
+        default: ''
+    },
+    // 关闭按钮内容
+    closeBtn: {
+        type: [String, Function, Boolean],
+        default: undefined
+    },
+    // 默认是否显示打开
+    defaultOpen: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits(['close']);
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignCalendar/index.vue

@@ -14,7 +14,7 @@
     :month-change="monthChange"
     :render-cell="renderCell"
     :theme="theme"
-    :value="value"
+    :value="modelValue"
     :year="year"
     @cell-click="handleCellClick"
     @cell-double-click="handleCellDoubleClick"
@@ -111,7 +111,7 @@ export default {
       default: 'full',
       validator: (val) => ['full', 'card'].includes(val)
     },
-    value: {
+    modelValue: {
       type: [String, Number, Array, Date],
       default: null
     },
@@ -120,10 +120,13 @@ export default {
       default: undefined
     }
   },
-  emits: ['cell-click', 'cell-double-click', 'cell-right-click', 'month-change'],
+  emits: ['cell-click', 'cell-double-click', 'cell-right-click', 'month-change', 'update:modelValue'],
   methods: {
     handleCellClick(options) {
       this.$emit('cell-click', options)
+      if (options && options.date) {
+        this.$emit('update:modelValue', options.date)
+      }
     },
     handleCellDoubleClick(options) {
       this.$emit('cell-double-click', options)

package/src/components/TdesignDialog.vue

@@ -0,0 +1,221 @@
+<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);
+
+// 定义事件
+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/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/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>