@ebiz/designer-components 0.1.0 → 0.1.1

package/src/components/EbizAvatar.vue

@@ -1,116 +1,116 @@
-<template>
-  <t-avatar
-    :alt="alt"
-    :badge-props="badgeProps"
-    :content="content"
-    :hide-on-load-error="hideOnLoadError"
-    :image="image"
-    :image-props="imageProps"
-    :shape="shape"
-    :size="size"
-    :style="customStyle"
-    @error="handleError"
-  >
-    <!-- 图标插槽 -->
-    <template v-if="$slots.icon" #icon>
-      <slot name="icon"></slot>
-    </template>
-    
-    <!-- 内容插槽 -->
-    <template v-if="$slots.content" #content>
-      <slot name="content"></slot>
-    </template>
-    
-    <!-- 默认插槽 -->
-    <slot>{{ content }}</slot>
-  </t-avatar>
-</template>
-
-<script>
-export default {
-  name: "EbizAvatar"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import { Avatar as TAvatar } from 'tdesign-vue-next';
-
-const props = defineProps({
-  // 头像替代文本
-  alt: {
-    type: String,
-    default: ''
-  },
-  // 徽标属性
-  badgeProps: {
-    type: Object,
-    default: () => ({})
-  },
-  // 头像内容
-  content: {
-    type: [String, Function],
-    default: ''
-  },
-  // 图片加载失败时是否隐藏
-  hideOnLoadError: {
-    type: Boolean,
-    default: false
-  },
-  // 头像图片地址
-  image: {
-    type: String,
-    default: ''
-  },
-  // 图片属性
-  imageProps: {
-    type: Object,
-    default: () => ({})
-  },
-  // 头像形状
-  shape: {
-    type: String,
-    default: 'circle',
-    validator: (val) => ['circle', 'round'].includes(val)
-  },
-  // 头像尺寸
-  size: {
-    type: String,
-    default: 'medium',
-    validator: (val) => ['small', 'medium', 'large'].includes(val) || /^(\d+px|\d+em|\d+rem|\d+%)$/.test(val)
-  },
-  // 自定义宽度
-  width: {
-    type: [String, Number],
-    default: ''
-  },
-  // 自定义高度
-  height: {
-    type: [String, Number],
-    default: ''
-  }
-});
-
-const emit = defineEmits(['error']);
-
-// 处理图片加载错误事件
-const handleError = (context) => {
-  emit('error', context);
-};
-
-// 计算样式
-const customStyle = computed(() => {
-  const style = {};
-  if (props.width) {
-    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
-  }
-  if (props.height) {
-    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
-  }
-  return style;
-});
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+  <t-avatar
+    :alt="alt"
+    :badge-props="badgeProps"
+    :content="content"
+    :hide-on-load-error="hideOnLoadError"
+    :image="image"
+    :image-props="imageProps"
+    :shape="shape"
+    :size="size"
+    :style="customStyle"
+    @error="handleError"
+  >
+    <!-- 图标插槽 -->
+    <template v-if="$slots.icon" #icon>
+      <slot name="icon"></slot>
+    </template>
+    
+    <!-- 内容插槽 -->
+    <template v-if="$slots.content" #content>
+      <slot name="content"></slot>
+    </template>
+    
+    <!-- 默认插槽 -->
+    <slot>{{ content }}</slot>
+  </t-avatar>
+</template>
+
+<script>
+export default {
+  name: "EbizAvatar"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Avatar as TAvatar } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 头像替代文本
+  alt: {
+    type: String,
+    default: ''
+  },
+  // 徽标属性
+  badgeProps: {
+    type: Object,
+    default: () => ({})
+  },
+  // 头像内容
+  content: {
+    type: [String, Function],
+    default: ''
+  },
+  // 图片加载失败时是否隐藏
+  hideOnLoadError: {
+    type: Boolean,
+    default: false
+  },
+  // 头像图片地址
+  image: {
+    type: String,
+    default: ''
+  },
+  // 图片属性
+  imageProps: {
+    type: Object,
+    default: () => ({})
+  },
+  // 头像形状
+  shape: {
+    type: String,
+    default: 'circle',
+    validator: (val) => ['circle', 'round'].includes(val)
+  },
+  // 头像尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['small', 'medium', 'large'].includes(val) || /^(\d+px|\d+em|\d+rem|\d+%)$/.test(val)
+  },
+  // 自定义宽度
+  width: {
+    type: [String, Number],
+    default: ''
+  },
+  // 自定义高度
+  height: {
+    type: [String, Number],
+    default: ''
+  }
+});
+
+const emit = defineEmits(['error']);
+
+// 处理图片加载错误事件
+const handleError = (context) => {
+  emit('error', context);
+};
+
+// 计算样式
+const customStyle = computed(() => {
+  const style = {};
+  if (props.width) {
+    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
+  }
+  if (props.height) {
+    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
+  }
+  return style;
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/EbizCheckbox.vue

@@ -1,94 +1,94 @@
-<template>
-    <t-checkbox
-        :checked="modelValue"
-        :default-checked="defaultChecked"
-        :disabled="disabled"
-        :indeterminate="indeterminate"
-        :label="label"
-        :name="name"
-        :readonly="readonly"
-        :value="value"
-        :check-all="checkAll"
-        :lazy-load="lazyLoad"
-        @change="handleChange"
-    >
-        <!-- 默认插槽 -->
-        <slot>{{ label }}</slot>
-    </t-checkbox>
-</template>
-
-<script>
-export default {
-    name: "EbizCheckbox"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Checkbox as TCheckbox } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 是否选中 (v-model)
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    // 默认是否选中
-    defaultChecked: {
-        type: Boolean,
-        default: false
-    },
-    // 是否禁用组件
-    disabled: {
-        type: Boolean,
-        default: undefined
-    },
-    // 是否为半选
-    indeterminate: {
-        type: Boolean,
-        default: false
-    },
-    // 主文案
-    label: {
-        type: String,
-        default: ''
-    },
-    // HTML 元素原生属性
-    name: {
-        type: String,
-        default: ''
-    },
-    // 只读状态
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    // 单个选项的值
-    value: {
-        type: [String, Number, Boolean],
-        default: undefined
-    },
-    // 用于标识是否为「全选选项」
-    checkAll: {
-        type: Boolean,
-        default: false
-    },
-    // 是否启用懒加载
-    lazyLoad: {
-        type: Boolean,
-        default: false
-    }
-});
-
-const emit = defineEmits(['change', 'update:modelValue']);
-
-// 选中状态变化事件
-const handleChange = (checked, context) => {
-    emit('update:modelValue', checked);
-    emit('change', checked, context);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-checkbox
+        :checked="modelValue"
+        :default-checked="defaultChecked"
+        :disabled="disabled"
+        :indeterminate="indeterminate"
+        :label="label"
+        :name="name"
+        :readonly="readonly"
+        :value="value"
+        :check-all="checkAll"
+        :lazy-load="lazyLoad"
+        @change="handleChange"
+    >
+        <!-- 默认插槽 -->
+        <slot>{{ label }}</slot>
+    </t-checkbox>
+</template>
+
+<script>
+export default {
+    name: "EbizCheckbox"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Checkbox as TCheckbox } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否选中 (v-model)
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    // 默认是否选中
+    defaultChecked: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // 是否为半选
+    indeterminate: {
+        type: Boolean,
+        default: false
+    },
+    // 主文案
+    label: {
+        type: String,
+        default: ''
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 单个选项的值
+    value: {
+        type: [String, Number, Boolean],
+        default: undefined
+    },
+    // 用于标识是否为「全选选项」
+    checkAll: {
+        type: Boolean,
+        default: false
+    },
+    // 是否启用懒加载
+    lazyLoad: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+// 选中状态变化事件
+const handleChange = (checked, context) => {
+    emit('update:modelValue', checked);
+    emit('change', checked, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/EbizCheckboxGroup.vue

@@ -1,70 +1,70 @@
-<template>
-    <t-checkbox-group
-        :disabled="disabled"
-        :value="modelValue"
-        :default-value="defaultValue"
-        :options="options"
-        :max="max"
-        :name="name"
-        @change="handleChange"
-    >
-        <!-- 默认插槽 -->
-        <slot></slot>
-    </t-checkbox-group>
-</template>
-
-<script>
-export default {
-    name: "EbizCheckboxGroup"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { CheckboxGroup as TCheckboxGroup } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 是否禁用组件
-    disabled: {
-        type: Boolean,
-        default: undefined
-    },
-    // 选中值 (v-model)
-    modelValue: {
-        type: Array,
-        default: () => []
-    },
-    // 默认选中值
-    defaultValue: {
-        type: Array,
-        default: () => []
-    },
-    // 最大可选数量
-    max: {
-        type: Number,
-        default: undefined
-    },
-    // HTML 元素原生属性
-    name: {
-        type: String,
-        default: ''
-    },
-    // 以配置形式设置子元素
-    options: {
-        type: Array,
-        default: () => []
-    }
-});
-
-const emit = defineEmits(['change', 'update:modelValue']);
-
-// 选中值变化事件
-const handleChange = (value, context) => {
-    emit('update:modelValue', value);
-    emit('change', value, context);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-checkbox-group
+        :disabled="disabled"
+        :value="modelValue"
+        :default-value="defaultValue"
+        :options="options"
+        :max="max"
+        :name="name"
+        @change="handleChange"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+    </t-checkbox-group>
+</template>
+
+<script>
+export default {
+    name: "EbizCheckboxGroup"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { CheckboxGroup as TCheckboxGroup } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // 选中值 (v-model)
+    modelValue: {
+        type: Array,
+        default: () => []
+    },
+    // 默认选中值
+    defaultValue: {
+        type: Array,
+        default: () => []
+    },
+    // 最大可选数量
+    max: {
+        type: Number,
+        default: undefined
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 以配置形式设置子元素
+    options: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+// 选中值变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>