@ebiz/designer-components 0.1.11 → 0.1.13

package/src/components/EbizDivider.vue

@@ -1,97 +1,97 @@
-<template>
-    <div class="ebiz-divider" :style="dividerStyle">
-        <div v-if="showText && text" class="divider-text" :style="textStyle">
-            <slot>{{ text }}</slot>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { defineProps, computed } from 'vue';
-
-/**
- * EbizDivider 组件 - 可自定义颜色的分隔线组件
- * 支持自定义分隔线颜色、粗细、间距和文本
- */
-const props = defineProps({
-    /**
-     * 分隔线颜色
-     */
-    color: {
-        type: String,
-        default: '#e8e8e8'
-    },
-    /**
-     * 分隔线粗细
-     */
-    thickness: {
-        type: Number,
-        default: 1
-    },
-    /**
-     * 分隔线上下边距
-     */
-    margin: {
-        type: Number,
-        default: 24
-    },
-    /**
-     * 分隔线文本
-     */
-    text: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 是否显示文本
-     */
-    showText: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 文本颜色
-     */
-    textColor: {
-        type: String,
-        default: '#333'
-    }
-});
-
-// 计算分隔线样式
-const dividerStyle = computed(() => {
-    return {
-        borderTop: `${props.thickness}px solid ${props.color}`,
-        margin: `${props.margin}px 0`,
-        position: props.showText ? 'relative' : 'inherit',
-        textAlign: 'center'
-    };
-});
-
-// 计算文本样式
-const textStyle = computed(() => {
-    return {
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        backgroundColor: '#fff',
-        padding: '0 10px',
-        color: props.textColor
-    };
-});
-</script>
-
-<style scoped>
-.ebiz-divider {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-}
-
-.divider-text {
-    font-size: 14px;
-    font-weight: 500;
-}
+<template>
+    <div class="ebiz-divider" :style="dividerStyle">
+        <div v-if="showText && text" class="divider-text" :style="textStyle">
+            <slot>{{ text }}</slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizDivider 组件 - 可自定义颜色的分隔线组件
+ * 支持自定义分隔线颜色、粗细、间距和文本
+ */
+const props = defineProps({
+    /**
+     * 分隔线颜色
+     */
+    color: {
+        type: String,
+        default: '#e8e8e8'
+    },
+    /**
+     * 分隔线粗细
+     */
+    thickness: {
+        type: Number,
+        default: 1
+    },
+    /**
+     * 分隔线上下边距
+     */
+    margin: {
+        type: Number,
+        default: 24
+    },
+    /**
+     * 分隔线文本
+     */
+    text: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否显示文本
+     */
+    showText: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 文本颜色
+     */
+    textColor: {
+        type: String,
+        default: '#333'
+    }
+});
+
+// 计算分隔线样式
+const dividerStyle = computed(() => {
+    return {
+        borderTop: `${props.thickness}px solid ${props.color}`,
+        margin: `${props.margin}px 0`,
+        position: props.showText ? 'relative' : 'inherit',
+        textAlign: 'center'
+    };
+});
+
+// 计算文本样式
+const textStyle = computed(() => {
+    return {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        backgroundColor: '#fff',
+        padding: '0 10px',
+        color: props.textColor
+    };
+});
+</script>
+
+<style scoped>
+.ebiz-divider {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.divider-text {
+    font-size: 14px;
+    font-weight: 500;
+}
 </style> 

package/src/components/EbizDropdown.vue

@@ -1,136 +1,136 @@
-<template>
-    <t-dropdown :disabled="disabled" :direction="direction" :hideAfterItemClick="hideAfterItemClick"
-        :max-column-width="maxColumnWidth" :max-height="maxHeight" :min-column-width="minColumnWidth" :options="options"
-        :placement="placement" :trigger="trigger" @click="handleClick">
-        <!-- 默认触发器内容插槽 -->
-        <template v-if="$slots.default" #default>
-            <slot></slot>
-        </template>
-
-        <template v-if="$slots.dropdown" #dropdown>
-            <slot name="dropdown">
-            </slot>
-        </template>
-
-        <!-- 自定义选项内容插槽 -->
-        <template v-if="$slots.options" #options>
-            <slot name="options"></slot>
-        </template>
-    </t-dropdown>
-</template>
-
-<script>
-export default {
-    name: "EbizDropdown"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Dropdown as TDropdown } from 'tdesign-vue-next';
-
-defineProps({
-    // 是否禁用组件
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 多层级操作时，子层级展开方向
-    direction: {
-        type: String,
-        default: 'right',
-        validator: (val) => ['left', 'right'].includes(val)
-    },
-    // 点击选项后是否自动隐藏弹层
-    hideAfterItemClick: {
-        type: Boolean,
-        default: true
-    },
-    // 选项最大宽度，内容超出时，显示为省略号
-    maxColumnWidth: {
-        type: String,
-        default: '100px'
-    },
-    // 弹窗最大高度，单位：px
-    maxHeight: {
-        type: Number,
-        default: 300
-    },
-    // 选项最小宽度
-    minColumnWidth: {
-        type: String,
-        default: '10px'
-    },
-    // 下拉操作项
-    options: {
-        type: Array,
-        default: () => []
-    },
-    // 弹窗出现位置
-    placement: {
-        type: String,
-        default: 'bottom-left',
-        validator: (val) => [
-            'top', 'top-left', 'top-right',
-            'bottom', 'bottom-left', 'bottom-right',
-            'left', 'left-top', 'left-bottom',
-            'right', 'right-top', 'right-bottom'
-        ].includes(val)
-    },
-
-    // 触发下拉显示的方式
-    trigger: {
-        type: String,
-        default: 'hover',
-        validator: (val) => ['hover', 'click', 'focus', 'context-menu'].includes(val)
-    }
-});
-
-const emit = defineEmits(['click']);
-
-const handleClick = (...args) => {
-    emit('click', ...args);
-};
-</script>
-
-<style lang="less" scoped>
-/* TDesign主题样式定制 */
-:deep(.t-dropdown) {
-    .t-dropdown__trigger {
-        cursor: pointer;
-    }
-}
-
-:deep(.t-dropdown__menu) {
-    max-height: 300px;
-    overflow-y: auto;
-
-    /* 解决嵌套菜单层级问题 */
-    .t-dropdown__menu {
-        z-index: 9999;
-        position: absolute;
-    }
-}
-
-/* 嵌套菜单项样式优化 */
-:deep(.t-dropdown-item) {
-    position: relative;
-
-    /* 当有子菜单时，添加指示箭头 */
-    &:has(.t-dropdown__menu) {
-        &:after {
-            content: '';
-            position: absolute;
-            right: 8px;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 0;
-            height: 0;
-            border-left: 4px solid currentColor;
-            border-top: 4px solid transparent;
-            border-bottom: 4px solid transparent;
-            opacity: 0.6;
-        }
-    }
-}
+<template>
+    <t-dropdown :disabled="disabled" :direction="direction" :hideAfterItemClick="hideAfterItemClick"
+        :max-column-width="maxColumnWidth" :max-height="maxHeight" :min-column-width="minColumnWidth" :options="options"
+        :placement="placement" :trigger="trigger" @click="handleClick">
+        <!-- 默认触发器内容插槽 -->
+        <template v-if="$slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <template v-if="$slots.dropdown" #dropdown>
+            <slot name="dropdown">
+            </slot>
+        </template>
+
+        <!-- 自定义选项内容插槽 -->
+        <template v-if="$slots.options" #options>
+            <slot name="options"></slot>
+        </template>
+    </t-dropdown>
+</template>
+
+<script>
+export default {
+    name: "EbizDropdown"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Dropdown as TDropdown } from 'tdesign-vue-next';
+
+defineProps({
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 多层级操作时，子层级展开方向
+    direction: {
+        type: String,
+        default: 'right',
+        validator: (val) => ['left', 'right'].includes(val)
+    },
+    // 点击选项后是否自动隐藏弹层
+    hideAfterItemClick: {
+        type: Boolean,
+        default: true
+    },
+    // 选项最大宽度，内容超出时，显示为省略号
+    maxColumnWidth: {
+        type: String,
+        default: '100px'
+    },
+    // 弹窗最大高度，单位：px
+    maxHeight: {
+        type: Number,
+        default: 300
+    },
+    // 选项最小宽度
+    minColumnWidth: {
+        type: String,
+        default: '10px'
+    },
+    // 下拉操作项
+    options: {
+        type: Array,
+        default: () => []
+    },
+    // 弹窗出现位置
+    placement: {
+        type: String,
+        default: 'bottom-left',
+        validator: (val) => [
+            'top', 'top-left', 'top-right',
+            'bottom', 'bottom-left', 'bottom-right',
+            'left', 'left-top', 'left-bottom',
+            'right', 'right-top', 'right-bottom'
+        ].includes(val)
+    },
+
+    // 触发下拉显示的方式
+    trigger: {
+        type: String,
+        default: 'hover',
+        validator: (val) => ['hover', 'click', 'focus', 'context-menu'].includes(val)
+    }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = (...args) => {
+    emit('click', ...args);
+};
+</script>
+
+<style lang="less" scoped>
+/* TDesign主题样式定制 */
+:deep(.t-dropdown) {
+    .t-dropdown__trigger {
+        cursor: pointer;
+    }
+}
+
+:deep(.t-dropdown__menu) {
+    max-height: 300px;
+    overflow-y: auto;
+
+    /* 解决嵌套菜单层级问题 */
+    .t-dropdown__menu {
+        z-index: 9999;
+        position: absolute;
+    }
+}
+
+/* 嵌套菜单项样式优化 */
+:deep(.t-dropdown-item) {
+    position: relative;
+
+    /* 当有子菜单时，添加指示箭头 */
+    &:has(.t-dropdown__menu) {
+        &:after {
+            content: '';
+            position: absolute;
+            right: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-left: 4px solid currentColor;
+            border-top: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            opacity: 0.6;
+        }
+    }
+}
 </style>

package/src/components/EbizDropdownItem.vue

@@ -1,86 +1,86 @@
-<template>
-    <t-dropdown-item :content="content" :disabled="disabled" :divider="divider" :value="value" @click="handleClick">
-        <!-- 默认内容插槽 -->
-        <template v-if="$slots.default" #default>
-            <slot></slot>
-        </template>
-
-        <!-- 前缀图标插槽 -->
-        <template v-if="$slots.prefixIcon" #prefixIcon>
-            <slot name="prefixIcon"></slot>
-        </template>
-
-        <!-- 后缀图标插槽 -->
-        <template v-if="$slots.suffixIcon" #suffixIcon>
-            <slot name="suffixIcon"></slot>
-        </template>
-
-        <!-- 嵌套的下拉菜单 -->
-        <t-dropdown-menu v-if="$slots.submenu">
-            <slot name="submenu"></slot>
-        </t-dropdown-menu>
-    </t-dropdown-item>
-</template>
-
-<script>
-export default {
-    name: "EbizDropdownItem"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu } from 'tdesign-vue-next';
-
-defineProps({
-    // 下拉操作项内容
-    content: {
-        type: [String, Function],
-        default: ''
-    },
-    // 是否禁用
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 是否显示操作项之间的分隔线（分隔线默认在下方）
-    divider: {
-        type: Boolean,
-        default: false
-    },
-    // 下拉操作项唯一标识
-    value: {
-        type: [String, Number, Object],
-        default: undefined
-    }
-});
-
-const emit = defineEmits(['click']);
-
-const handleClick = (data, context) => {
-    emit('click', data, context);
-};
-</script>
-
-<style lang="less" scoped>
-/* TDesign主题样式定制 */
-:deep(.t-dropdown-item) {
-    &:hover {
-        background-color: var(--td-bg-color-container-hover);
-    }
-
-    &.t-is-disabled {
-        color: var(--td-text-color-disabled);
-        cursor: not-allowed;
-
-        &:hover {
-            background-color: transparent;
-        }
-    }
-}
-
-:deep(.t-dropdown-item__divider) {
-    margin: 4px 0;
-    border-bottom: 1px solid var(--td-border-level-1-color);
-}
+<template>
+    <t-dropdown-item :content="content" :disabled="disabled" :divider="divider" :value="value" @click="handleClick">
+        <!-- 默认内容插槽 -->
+        <template v-if="$slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <!-- 前缀图标插槽 -->
+        <template v-if="$slots.prefixIcon" #prefixIcon>
+            <slot name="prefixIcon"></slot>
+        </template>
+
+        <!-- 后缀图标插槽 -->
+        <template v-if="$slots.suffixIcon" #suffixIcon>
+            <slot name="suffixIcon"></slot>
+        </template>
+
+        <!-- 嵌套的下拉菜单 -->
+        <t-dropdown-menu v-if="$slots.submenu">
+            <slot name="submenu"></slot>
+        </t-dropdown-menu>
+    </t-dropdown-item>
+</template>
+
+<script>
+export default {
+    name: "EbizDropdownItem"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu } from 'tdesign-vue-next';
+
+defineProps({
+    // 下拉操作项内容
+    content: {
+        type: [String, Function],
+        default: ''
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示操作项之间的分隔线（分隔线默认在下方）
+    divider: {
+        type: Boolean,
+        default: false
+    },
+    // 下拉操作项唯一标识
+    value: {
+        type: [String, Number, Object],
+        default: undefined
+    }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = (data, context) => {
+    emit('click', data, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* TDesign主题样式定制 */
+:deep(.t-dropdown-item) {
+    &:hover {
+        background-color: var(--td-bg-color-container-hover);
+    }
+
+    &.t-is-disabled {
+        color: var(--td-text-color-disabled);
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: transparent;
+        }
+    }
+}
+
+:deep(.t-dropdown-item__divider) {
+    margin: 4px 0;
+    border-bottom: 1px solid var(--td-border-level-1-color);
+}
 </style>