@ebiz/designer-components 0.0.19-beta.9 → 0.0.20

package/src/components/EbizTitle.vue

@@ -1,92 +1,92 @@
-<template>
-    <div class="ebiz-title">
-        <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div>
-        <div class="title-text">
-            <slot name="title">
-                {{ displayTitle }}
-            </slot>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { defineProps, computed } from 'vue';
-
-/**
- * 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;
-});
-</script>
-
-<style scoped>
-.ebiz-title {
-    display: flex;
-    align-items: center;
-    margin: 16px 0;
-}
-
-.color-block {
-    height: 20px;
-    border-radius: 2px;
-    margin-right: 8px;
-}
-
-.title-text {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 500;
-    color: #333;
-    line-height: 1.5;
-    margin-right: 8px;
-}
-
-.title-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    background-color: #f0f0f0;
-    border: 1px solid #d9d9d9;
-    cursor: pointer;
-    font-size: 14px;
-    transition: all 0.3s;
-}
-
-.title-button:hover {
-    background-color: #e6f7ff;
-    border-color: #1890ff;
-    color: #1890ff;
-}
+<template>
+    <div class="ebiz-title">
+        <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div>
+        <div class="title-text">
+            <slot name="title">
+                {{ displayTitle }}
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * 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;
+});
+</script>
+
+<style scoped>
+.ebiz-title {
+    display: flex;
+    align-items: center;
+    margin: 16px 0;
+}
+
+.color-block {
+    height: 20px;
+    border-radius: 2px;
+    margin-right: 8px;
+}
+
+.title-text {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.5;
+    margin-right: 8px;
+}
+
+.title-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    background-color: #f0f0f0;
+    border: 1px solid #d9d9d9;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s;
+}
+
+.title-button:hover {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    color: #1890ff;
+}
 </style>

package/src/components/EbizTree.vue

@@ -1,153 +1,153 @@
-<template>
-  <t-tree
-    ref="treeRef"
-    v-bind="$attrs"
-    :data="data"
-    :value="modelValue"
-    :expanded="expandedModel"
-    :actived="activedModel"
-    :transition="transition"
-    :disable-check="disableCheck"
-    :keys="keys"
-    @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 ,ref} from 'vue';
-
-// 定义组件属性
-const props = defineProps({
-  // 选中值
-  modelValue: {
-    type: Array,
-    default: () => []
-  },
-  // 展开节点
-  expanded: {
-    type: Array,
-    default: () => []
-  },
-  // 激活节点
-  actived: {
-    type: Array,
-    default: () => []
-  },
-  // 数据
-  items: {
-    type: Array,
-    default: () => []
-  },
-  // 是否启用过渡动画
-  transition: {
-    type: Boolean,
-    default: false
-  },
-  // 自定义节点禁用状态，返回true表示禁用
-  disableCheck: {
-    type: Function,
-    default: null
-  },
-  // 自定义节点数据中的字段名称
-  keys: {
-    type: Object,
-    default: () => ({
-      label: 'label',
-      value: 'value',
-      children: 'children'
-    })
-  }
-});
-
-const treeRef = ref();
-// 定义组件事件
-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);
-};
-
-defineExpose({
-  treeRef
-});
-</script>
-
-<style>
-.t-tree {
-  width: 100%;
-}
+<template>
+  <t-tree
+    ref="treeRef"
+    v-bind="$attrs"
+    :data="data"
+    :value="modelValue"
+    :expanded="expandedModel"
+    :actived="activedModel"
+    :transition="transition"
+    :disable-check="disableCheck"
+    :keys="keys"
+    @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 ,ref} from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+  // 选中值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 展开节点
+  expanded: {
+    type: Array,
+    default: () => []
+  },
+  // 激活节点
+  actived: {
+    type: Array,
+    default: () => []
+  },
+  // 数据
+  items: {
+    type: Array,
+    default: () => []
+  },
+  // 是否启用过渡动画
+  transition: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义节点禁用状态，返回true表示禁用
+  disableCheck: {
+    type: Function,
+    default: null
+  },
+  // 自定义节点数据中的字段名称
+  keys: {
+    type: Object,
+    default: () => ({
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    })
+  }
+});
+
+const treeRef = ref();
+// 定义组件事件
+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);
+};
+
+defineExpose({
+  treeRef
+});
+</script>
+
+<style>
+.t-tree {
+  width: 100%;
+}
 </style>