@ebiz/designer-components 0.1.0 → 0.1.2

package/src/components/TdesignTag.vue

@@ -1,118 +1,118 @@
-<template>
-    <t-tag
-        :theme="theme"
-        :size="size"
-        :variant="variant"
-        :maxWidth="maxWidth"
-        :icon="icon"
-        :content="content"
-        :closable="closable"
-        :checkable="checkable"
-        :checked="checked"
-        :disabled="disabled"
-        @click="handleClick"
-        @close="handleClose"
-        @change="handleChange"
-    >
-        <!-- 图标插槽 -->
-        <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-tag>
-</template>
-
-<script>
-export default {
-    name: "EbizTag"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Tag as TTag } from 'tdesign-vue-next';
-
-defineProps({
-    // 标签主题
-    theme: {
-        type: String,
-        default: 'default',
-        validator: (val) => ['default', 'primary', 'warning', 'danger', 'success'].includes(val)
-    },
-    // 标签尺寸
-    size: {
-        type: String,
-        default: 'medium',
-        validator: (val) => ['small', 'medium', 'large'].includes(val)
-    },
-    // 标签形式
-    variant: {
-        type: String,
-        default: 'dark',
-        validator: (val) => ['dark', 'light', 'outline', 'light-outline'].includes(val)
-    },
-    // 最大宽度
-    maxWidth: {
-        type: [String, Number],
-        default: undefined
-    },
-    // 图标
-    icon: {
-        type: [String, Function],
-        default: ''
-    },
-    // 标签内容
-    content: {
-        type: String,
-        default: ''
-    },
-    // 是否可关闭
-    closable: {
-        type: Boolean,
-        default: false
-    },
-    // 是否可选中
-    checkable: {
-        type: Boolean,
-        default: false
-    },
-    // 是否选中
-    checked: {
-        type: Boolean,
-        default: false
-    },
-    // 是否禁用
-    disabled: {
-        type: Boolean,
-        default: false
-    }
-});
-
-const emit = defineEmits(['click', 'close', 'change']);
-
-// 点击事件
-const handleClick = (e) => {
-    emit('click', e);
-};
-
-// 关闭事件
-const handleClose = (e) => {
-    emit('close', e);
-};
-
-// 选中状态变化事件
-const handleChange = (checked, context) => {
-    emit('change', checked, context);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-tag
+        :theme="theme"
+        :size="size"
+        :variant="variant"
+        :maxWidth="maxWidth"
+        :icon="icon"
+        :content="content"
+        :closable="closable"
+        :checkable="checkable"
+        :checked="checked"
+        :disabled="disabled"
+        @click="handleClick"
+        @close="handleClose"
+        @change="handleChange"
+    >
+        <!-- 图标插槽 -->
+        <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-tag>
+</template>
+
+<script>
+export default {
+    name: "EbizTag"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Tag as TTag } from 'tdesign-vue-next';
+
+defineProps({
+    // 标签主题
+    theme: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'primary', 'warning', 'danger', 'success'].includes(val)
+    },
+    // 标签尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 标签形式
+    variant: {
+        type: String,
+        default: 'dark',
+        validator: (val) => ['dark', 'light', 'outline', 'light-outline'].includes(val)
+    },
+    // 最大宽度
+    maxWidth: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 图标
+    icon: {
+        type: [String, Function],
+        default: ''
+    },
+    // 标签内容
+    content: {
+        type: String,
+        default: ''
+    },
+    // 是否可关闭
+    closable: {
+        type: Boolean,
+        default: false
+    },
+    // 是否可选中
+    checkable: {
+        type: Boolean,
+        default: false
+    },
+    // 是否选中
+    checked: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['click', 'close', 'change']);
+
+// 点击事件
+const handleClick = (e) => {
+    emit('click', e);
+};
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+
+// 选中状态变化事件
+const handleChange = (checked, context) => {
+    emit('change', checked, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/TdesignTextarea.vue

@@ -1,143 +1,143 @@
-<template>
-    <t-textarea
-        :value="modelValue"
-        :disabled="disabled"
-        :readonly="readonly"
-        :placeholder="placeholder"
-        :autofocus="autofocus"
-        :autosize="autosize"
-        :max-character="maxCharacter"
-        :max-length="maxLength"
-        :max-rows="maxRows"
-        :status="status"
-        :tips="tips"
-        :default-value="defaultValue"
-        @blur="handleBlur"
-        @change="handleChange"
-        @focus="handleFocus"
-        @keydown="handleKeydown"
-        @keypress="handleKeypress"
-        @keyup="handleKeyup"
-        @validate="handleValidate"
-    >
-        <!-- 默认插槽 -->
-        <slot></slot>
-    </t-textarea>
-</template>
-
-<script>
-export default {
-    name: "EbizTextarea"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Textarea as TTextarea } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 文本框值（v-model）
-    modelValue: {
-        type: [String, Number],
-        default: ''
-    },
-    // 文本框默认值
-    defaultValue: {
-        type: [String, Number],
-        default: ''
-    },
-    // 是否禁用文本框
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 是否只读
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    // 文本框占位符
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    // 是否自动聚焦
-    autofocus: {
-        type: Boolean,
-        default: false
-    },
-    // 是否自动调整高度
-    autosize: {
-        type: [Boolean, Object],
-        default: false
-    },
-    // 用于控制组件是否显示最大字符数，值为 true 会显示组件字符数最大值
-    maxCharacter: {
-        type: [Number, Boolean],
-        default: false
-    },
-    // 用于控制输入框最大可输入的字符个数
-    maxLength: {
-        type: Number,
-        default: undefined
-    },
-    // 最大行数，当超出最大行数时，会自动出现滚动条
-    maxRows: {
-        type: Number,
-        default: undefined
-    },
-    // 文本框状态
-    status: {
-        type: String,
-        default: 'default',
-        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
-    },
-    // 输入框下方提示文本
-    tips: {
-        type: [String, Function],
-        default: ''
-    }
-});
-
-const emit = defineEmits(['update:modelValue', 'blur', 'change', 'focus', 'keydown', 'keypress', 'keyup', 'validate']);
-
-// 失去焦点事件
-const handleBlur = (value, context) => {
-    emit('blur', value, context);
-};
-
-// 输入内容变化事件
-const handleChange = (value, context) => {
-    emit('update:modelValue', value);
-    emit('change', value, context);
-};
-
-// 获得焦点事件
-const handleFocus = (value, context) => {
-    emit('focus', value, context);
-};
-
-// 键盘按下事件
-const handleKeydown = (value, context) => {
-    emit('keydown', value, context);
-};
-
-// 按下字符键事件
-const handleKeypress = (value, context) => {
-    emit('keypress', value, context);
-};
-
-// 释放键盘事件
-const handleKeyup = (value, context) => {
-    emit('keyup', value, context);
-};
-
-// 字数超出限制事件
-const handleValidate = (context) => {
-    emit('validate', context);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-textarea
+        :value="modelValue"
+        :disabled="disabled"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :autofocus="autofocus"
+        :autosize="autosize"
+        :max-character="maxCharacter"
+        :max-length="maxLength"
+        :max-rows="maxRows"
+        :status="status"
+        :tips="tips"
+        :default-value="defaultValue"
+        @blur="handleBlur"
+        @change="handleChange"
+        @focus="handleFocus"
+        @keydown="handleKeydown"
+        @keypress="handleKeypress"
+        @keyup="handleKeyup"
+        @validate="handleValidate"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+    </t-textarea>
+</template>
+
+<script>
+export default {
+    name: "EbizTextarea"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Textarea as TTextarea } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 文本框值（v-model）
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    },
+    // 文本框默认值
+    defaultValue: {
+        type: [String, Number],
+        default: ''
+    },
+    // 是否禁用文本框
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否只读
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 文本框占位符
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    // 是否自动聚焦
+    autofocus: {
+        type: Boolean,
+        default: false
+    },
+    // 是否自动调整高度
+    autosize: {
+        type: [Boolean, Object],
+        default: false
+    },
+    // 用于控制组件是否显示最大字符数，值为 true 会显示组件字符数最大值
+    maxCharacter: {
+        type: [Number, Boolean],
+        default: false
+    },
+    // 用于控制输入框最大可输入的字符个数
+    maxLength: {
+        type: Number,
+        default: undefined
+    },
+    // 最大行数，当超出最大行数时，会自动出现滚动条
+    maxRows: {
+        type: Number,
+        default: undefined
+    },
+    // 文本框状态
+    status: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    // 输入框下方提示文本
+    tips: {
+        type: [String, Function],
+        default: ''
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'blur', 'change', 'focus', 'keydown', 'keypress', 'keyup', 'validate']);
+
+// 失去焦点事件
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
+};
+
+// 输入内容变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+
+// 获得焦点事件
+const handleFocus = (value, context) => {
+    emit('focus', value, context);
+};
+
+// 键盘按下事件
+const handleKeydown = (value, context) => {
+    emit('keydown', value, context);
+};
+
+// 按下字符键事件
+const handleKeypress = (value, context) => {
+    emit('keypress', value, context);
+};
+
+// 释放键盘事件
+const handleKeyup = (value, context) => {
+    emit('keyup', value, context);
+};
+
+// 字数超出限制事件
+const handleValidate = (context) => {
+    emit('validate', context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/TdesignTimeline.vue

@@ -1,58 +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>
+<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>