@ebiz/designer-components 0.0.18 → 0.0.19

package/src/components/TdesignTag.vue

@@ -0,0 +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>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignTextarea.vue

@@ -0,0 +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>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignTimeline.vue

@@ -0,0 +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>

package/src/components/TdesignTimelineItem.vue

@@ -0,0 +1,72 @@
+<template>
+    <t-timeline-item
+        :content="content"
+        :dot="dot"
+        :dotColor="dotColor"
+        :label="label"
+        :labelAlign="labelAlign"
+        :loading="loading"
+    >
+        <!-- 时间轴点内容插槽 -->
+        <template v-if="$slots.dot" #dot>
+            <slot name="dot"></slot>
+        </template>
+        
+        <!-- 标签内容插槽 -->
+        <template v-if="$slots.label" #label>
+            <slot name="label"></slot>
+        </template>
+        
+        <!-- 默认插槽 -->
+        <slot>{{ content }}</slot>
+    </t-timeline-item>
+</template>
+
+<script>
+export default {
+    name: "EbizTimelineItem"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { TimelineItem as TTimelineItem } from 'tdesign-vue-next';
+
+defineProps({
+    // 内容
+    content: {
+        type: String,
+        default: ''
+    },
+    // 时间轴点内容，可以是组件
+    dot: {
+        type: [String, Function],
+        default: ''
+    },
+    // 时间轴点颜色，内置 primary/warning/error/default 四种色值
+    dotColor: {
+        type: String,
+        default: ''
+    },
+    // 标签文本内容
+    label: {
+        type: String,
+        default: ''
+    },
+    // 标签位置，优先级高于 Timeline 中的 labelAlign
+    labelAlign: {
+        type: String,
+        default: '',
+        validator: (val) => ['left', 'right', 'top', 'bottom', 'auto', ''].includes(val)
+    },
+    // 是否处于加载状态
+    loading: {
+        type: Boolean,
+        default: false
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>