@ebiz/designer-components 0.0.18-beta.3 → 0.0.18-beta.30

package/src/components/EbizTableSort.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="ebiz-table-sort">
+    <t-popup :visible="sortVisible" trigger="click" placement="bottom-right" :overlay-style="{ width: '450px' }"
+      @visible-change="handleVisibleChange" :destroy-on-close="false">
+      <template #content>
+        <t-card :title="popupTitle" size="small" :bordered="false">
+          <div class="sort-content">
+            <div class="sort-item" v-for="(item, index) in sortItems" :key="index">
+              <div class="sort-item-content" style="display: flex; margin-bottom: 12px;">
+                <t-select v-model="item.type" :placeholder="fieldPlaceholder" :options="fieldOptions" :clearable="false"
+                  :style="{ width: '170px' }" @change="handleSortChange" />
+                <t-select v-model="item.sort" :placeholder="orderPlaceholder" :options="orderOptions" :clearable="false"
+                  :style="{ width: '170px', marginLeft: '8px' }" @change="handleSortChange" />
+                <t-button theme="default" variant="text" shape="circle" @click="removeSortItem(index)"
+                  v-if="sortItems.length > 1" :style="{ marginLeft: '8px', flexShrink: 0 }">
+                  <template #icon>
+                    <t-icon name="close" />
+                  </template>
+                </t-button>
+              </div>
+            </div>
+            <div class="sort-footer">
+              <t-button theme="default" variant="outline" @click="addSortItem"
+                v-if="sortItems.length < maxSortItems">
+                <template #icon>
+                  <t-icon name="add" />
+                </template>
+                {{ addConditionText }}
+              </t-button>
+            </div>
+          </div>
+        </t-card>
+      </template>
+      <t-button block variant="outline" :title="title">
+        <template #icon>
+          <t-icon :name="icon" />
+        </template>
+        <div v-if="buttonText">
+          {{ buttonText }}
+        </div>
+      </t-button>
+    </t-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizTableSort"
+}
+</script>
+
+<script setup>
+import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+import { Button as TButton, Popup as TPopup, Card as TCard, Select as TSelect, Icon as TIcon } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // v-model绑定值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 按钮图标
+  icon: {
+    type: String,
+    default: 'sort'
+  },
+  // 按钮文本
+  buttonText: {
+    type: String,
+    default: ''
+  },
+  // 按钮标题
+  title: {
+    type: String,
+    default: '排序'
+  },
+  // 弹出层标题
+  popupTitle: {
+    type: String,
+    default: '排序'
+  },
+  // 字段选项
+  fieldOptions: {
+    type: Array,
+    default: () => []
+  },
+  // 字段占位符
+  fieldPlaceholder: {
+    type: String,
+    default: '选择字段'
+  },
+  // 排序选项
+  orderOptions: {
+    type: Array,
+    default: () => [
+      { value: 'asc', label: '升序 ↑' },
+      { value: 'desc', label: '降序 ↓' }
+    ]
+  },
+  // 排序占位符
+  orderPlaceholder: {
+    type: String,
+    default: '选择排序'
+  },
+  // 最大排序条件数量
+  maxSortItems: {
+    type: Number,
+    default: 5
+  },
+  // 添加条件文本
+  addConditionText: {
+    type: String,
+    default: '添加排序条件'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'sort', 'visible-change']);
+
+// 排序弹出层显示状态
+const sortVisible = ref(false);
+
+// 排序条件列表
+const sortItems = ref([]);
+
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  if (newVal && newVal.length > 0) {
+    sortItems.value = JSON.parse(JSON.stringify(newVal));
+  } else {
+    // 默认添加一个空的排序条件
+    sortItems.value = [{ type: '', sort: 'desc' }];
+  }
+}, { immediate: true });
+
+// 添加排序条件
+const addSortItem = () => {
+  if (sortItems.value.length < props.maxSortItems) {
+    sortItems.value.push({ type: '', sort: 'desc' });
+  }
+};
+
+// 移除排序条件
+const removeSortItem = (index) => {
+  sortItems.value.splice(index, 1);
+  handleSortChange();
+};
+
+// 处理排序变更
+const handleSortChange = () => {
+  // 过滤有效的排序条件（字段和排序方向都不为空）
+  const validSortItems = sortItems.value.filter(item => item.type && item.sort);
+  emit('update:modelValue', validSortItems);
+  emit('sort', validSortItems);
+};
+
+// 弹出层可见性变化
+const handleVisibleChange = (visible) => {
+  sortVisible.value = visible;
+  emit('visible-change', visible);
+};
+</script>
+
+<style lang="less" scoped>
+.ebiz-table-sort {
+  display: inline-block;
+  
+  .sort-content {
+    min-width: 400px;
+    width: 100%;
+  }
+
+  .sort-footer {
+    margin-top: 16px;
+  }
+
+  .sort-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

package/src/components/EbizTitle.vue

@@ -1,52 +1,51 @@
 <template>
     <div class="ebiz-title">
-        <!-- <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div> -->
-        <!-- <div class="title-text">
+        <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div>
+        <div class="title-text">
             <slot name="title">
                 {{ displayTitle }}
             </slot>
-        </div> -->
+        </div>
     </div>
 </template>
 
 <script setup>
+import { defineProps, computed } from 'vue';
 
-// import { defineProps, computed } from 'vue';
+/**
+ * EbizTitle 组件 - 带有色块的标题组件
+ * 支持自定义标题文本、色块颜色和色块宽度
+ * 包含一个按钮，点击时在标题后添加点号并触发事件
+ * 支持通过插槽自定义标题内容
+ */
+const props = defineProps({
+    /**
+     * 标题文本 (当不使用插槽时显示)
+     */
+    title: {
+        type: String,
+        default: '标题'
+    },
+    /**
+     * 色块颜色，支持任何有效的CSS颜色值
+     */
+    color: {
+        type: String,
+        default: '#1890ff'
+    },
+    /**
+     * 色块宽度，单位为像素
+     */
+    blockWidth: {
+        type: Number,
+        default: 10
+    }
+});
 
-// /**
-//  * EbizTitle 组件 - 带有色块的标题组件
-//  * 支持自定义标题文本、色块颜色和色块宽度
-//  * 包含一个按钮，点击时在标题后添加点号并触发事件
-//  * 支持通过插槽自定义标题内容
-//  */
-// const props = defineProps({
-//     /**
-//      * 标题文本 (当不使用插槽时显示)
-//      */
-//     title: {
-//         type: String,
-//         default: '标题'
-//     },
-//     /**
-//      * 色块颜色，支持任何有效的CSS颜色值
-//      */
-//     color: {
-//         type: String,
-//         default: '#1890ff'
-//     },
-//     /**
-//      * 色块宽度，单位为像素
-//      */
-//     blockWidth: {
-//         type: Number,
-//         default: 10
-//     }
-// });
 
-// // // 计算属性：根据点号数量生成显示的标题
-// const displayTitle = computed(() => {
-//     return props.title;
-// });
+const displayTitle = computed(() => {
+    return props.title;
+});
 </script>
 
 <style scoped>

package/src/components/EbizTree.vue

@@ -0,0 +1,125 @@
+<template>
+  <t-tree
+    v-bind="$attrs"
+    :data="data"
+    :value="modelValue"
+    :expanded="expandedModel"
+    :actived="activedModel"
+    @change="handleChange"
+    @expand="handleExpand"
+    @active="handleActive"
+    @select="$emit('select', $event)"
+    @drag-start="$emit('drag-start', $event)"
+    @drag-end="$emit('drag-end', $event)"
+    @drag-over="$emit('drag-over', $event)"
+    @drag-leave="$emit('drag-leave', $event)"
+    @drag-drop="$emit('drag-drop', $event)"
+    @click="$emit('click', $event)"
+    @load="$emit('load', $event)"
+  >
+    <template v-if="$slots.default" #default="slotProps">
+      <slot :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty"></slot>
+    </template>
+    <template v-if="$slots.icon" #icon="slotProps">
+      <slot name="icon" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.label" #label="slotProps">
+      <slot name="label" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.line" #line="slotProps">
+      <slot name="line" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.operations" #operations="slotProps">
+      <slot name="operations" :node="slotProps.node"></slot>
+    </template>
+  </t-tree>
+</template>
+
+<script setup>
+import { Tree as TTree } from 'tdesign-vue-next';
+import { computed } from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+  // 选中值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 展开节点
+  expanded: {
+    type: Array,
+    default: () => []
+  },
+  // 激活节点
+  actived: {
+    type: Array,
+    default: () => []
+  },
+  // 数据
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// 定义组件事件
+const emit = defineEmits([
+  'update:modelValue', 
+  'update:expanded', 
+  'update:actived', 
+  'change', 
+  'expand', 
+  'active', 
+  'select', 
+  'click', 
+  'load',
+  'drag-start',
+  'drag-end',
+  'drag-over',
+  'drag-leave',
+  'drag-drop'
+]);
+
+// 处理items映射到data
+const data = computed(() => props.items);
+
+// 展开事件
+const expandedModel = computed({
+  get: () => props.expanded,
+  set: (val) => emit('update:expanded', val)
+});
+
+// 激活节点
+const activedModel = computed({
+  get: () => props.actived,
+  set: (val) => emit('update:actived', val)
+});
+
+// 值改变事件
+const handleChange = (val, context) => {
+  emit('update:modelValue', val);
+  emit('change', val, context);
+};
+
+// 节点展开事件
+const handleExpand = (val, context) => {
+  emit('update:expanded', val);
+  emit('expand', val, context);
+};
+
+// 节点激活事件
+const handleActive = (val, context) => {
+  emit('update:actived', val);
+  emit('active', val, context);
+};
+</script>
+
+<style>
+.t-tree {
+  width: 100%;
+}
+</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,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>