@ebiz/designer-components 0.1.0 → 0.1.2

package/src/components/MyComponent.vue

@@ -1,39 +1,39 @@
-<template>
-  <div class="my-component">
-    <t-input v-model="value" placeholder="请输入内容" @update:modelValue="change"></t-input>
-    <t-button size="small">查询数据</t-button>
-  </div>
-</template>
-
-<script>
-import { Input as TInput } from 'tdesign-vue-next';
-import { ref } from "vue";
-
-export default {
-  name: 'MyComponent',
-  components: {
-    TInput
-  },
-  props: {
-    modelValue: {
-      type: String
-    },
-    name: String
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    const value = ref(props.modelValue)
-
-    const change = (val) => {
-      value.value = val
-      console.log(val)
-      emit('update:modelValue', value.value)
-    }
-
-    return {
-      value,
-      change
-    }
-  }
-}
-</script>
+<template>
+  <div class="my-component">
+    <t-input v-model="value" placeholder="请输入内容" @update:modelValue="change"></t-input>
+    <t-button size="small">查询数据</t-button>
+  </div>
+</template>
+
+<script>
+import { Input as TInput } from 'tdesign-vue-next';
+import { ref } from "vue";
+
+export default {
+  name: 'MyComponent',
+  components: {
+    TInput
+  },
+  props: {
+    modelValue: {
+      type: String
+    },
+    name: String
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const value = ref(props.modelValue)
+
+    const change = (val) => {
+      value.value = val
+      console.log(val)
+      emit('update:modelValue', value.value)
+    }
+
+    return {
+      value,
+      change
+    }
+  }
+}
+</script>

package/src/components/Table.vue

@@ -1,45 +1,45 @@
-<template>
-  <div class="my-component">
-    {{ value }}
-    <t-table row-key="key" :data="tableData" :columns="columns"></t-table>
-    <slot></slot>
-    <t-button @click="changeValue"> 修改数据</t-button>
-  </div>
-</template>
-
-<script setup>
-
-import { ref, defineEmits, defineProps, watch } from "vue";
-
-const props = defineProps(['modelValue', 'dataSource']);
-
-const tableData = ref([
-  { id: 1, name: '张三', age: 18 },
-  { id: 2, name: '李四', age: 20 },
-  { id: 3, name: '王五', age: 22 },
-]);
-const columns = [
-  { colKey: 'id', title: 'ID', width: '100' },
-  { colKey: 'name', title: '姓名', ellipsis: true },
-  { colKey: 'age', title: '年龄' },
-];
-
-const emit = defineEmits("update:modelValue");
-
-watch(() => props.dataSource, (val) => {
-  version.value = 0;
-  changeValue()
-})
-const value = ref(props.modelValue)
-
-const change = (val) => {
-  value.value = val
-  emit('update:modelValue', value.value)
-}
-
-const version = ref(0);
-const changeValue = () => {
-  change(props.dataSource + ' : ' + (version.value++))
-}
-
-</script>
+<template>
+  <div class="my-component">
+    {{ value }}
+    <t-table row-key="key" :data="tableData" :columns="columns"></t-table>
+    <slot></slot>
+    <t-button @click="changeValue"> 修改数据</t-button>
+  </div>
+</template>
+
+<script setup>
+
+import { ref, defineEmits, defineProps, watch } from "vue";
+
+const props = defineProps(['modelValue', 'dataSource']);
+
+const tableData = ref([
+  { id: 1, name: '张三', age: 18 },
+  { id: 2, name: '李四', age: 20 },
+  { id: 3, name: '王五', age: 22 },
+]);
+const columns = [
+  { colKey: 'id', title: 'ID', width: '100' },
+  { colKey: 'name', title: '姓名', ellipsis: true },
+  { colKey: 'age', title: '年龄' },
+];
+
+const emit = defineEmits("update:modelValue");
+
+watch(() => props.dataSource, (val) => {
+  version.value = 0;
+  changeValue()
+})
+const value = ref(props.modelValue)
+
+const change = (val) => {
+  value.value = val
+  emit('update:modelValue', value.value)
+}
+
+const version = ref(0);
+const changeValue = () => {
+  change(props.dataSource + ' : ' + (version.value++))
+}
+
+</script>

package/src/components/TdesignAlert.vue

@@ -1,116 +1,116 @@
-<template>
-    <t-alert
-        :theme="theme"
-        :title="title"
-        :message="message"
-        :icon="icon"
-        :close="close"
-        :maxLine="maxLine"
-        :operation="operation"
-        :description="description"
-        :close-btn="closeBtn"
-        :default-open="defaultOpen"
-        @close="handleClose"
-    >
-        <!-- 标题插槽 -->
-        <template v-if="$slots.title" #title>
-            <slot name="title"></slot>
-        </template>
-        
-        <!-- 内容插槽 -->
-        <template v-if="$slots.default">
-            <slot></slot>
-        </template>
-        
-        <!-- 操作区插槽 -->
-        <template v-if="$slots.operation" #operation>
-            <slot name="operation"></slot>
-        </template>
-        
-        <!-- 关闭按钮插槽 -->
-        <template v-if="$slots['close-btn']" #close-btn>
-            <slot name="close-btn"></slot>
-        </template>
-        
-        <!-- 图标插槽 -->
-        <template v-if="$slots.icon" #icon>
-            <slot name="icon"></slot>
-        </template>
-    </t-alert>
-</template>
-
-<script>
-export default {
-    name: "EbizAlert"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Alert as TAlert } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 主题
-    theme: {
-        type: String,
-        default: 'info',
-        validator: (val) => ['success', 'info', 'warning', 'error'].includes(val)
-    },
-    // 标题
-    title: {
-        type: String,
-        default: ''
-    },
-    // 内容
-    message: {
-        type: String,
-        default: ''
-    },
-    // 图标
-    icon: {
-        type: [Boolean, Function],
-        default: true
-    },
-    // 关闭按钮
-    close: {
-        type: Boolean,
-        default: false
-    },
-    // 内容显示最大行数
-    maxLine: {
-        type: Number,
-        default: 0
-    },
-    // 操作区内容
-    operation: {
-        type: [String, Function],
-        default: ''
-    },
-    // 描述内容
-    description: {
-        type: String,
-        default: ''
-    },
-    // 关闭按钮内容
-    closeBtn: {
-        type: [String, Function, Boolean],
-        default: undefined
-    },
-    // 默认是否显示打开
-    defaultOpen: {
-        type: Boolean,
-        default: true
-    }
-});
-
-const emit = defineEmits(['close']);
-
-// 关闭事件
-const handleClose = (e) => {
-    emit('close', e);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-alert
+        :theme="theme"
+        :title="title"
+        :message="message"
+        :icon="icon"
+        :close="close"
+        :maxLine="maxLine"
+        :operation="operation"
+        :description="description"
+        :close-btn="closeBtn"
+        :default-open="defaultOpen"
+        @close="handleClose"
+    >
+        <!-- 标题插槽 -->
+        <template v-if="$slots.title" #title>
+            <slot name="title"></slot>
+        </template>
+        
+        <!-- 内容插槽 -->
+        <template v-if="$slots.default">
+            <slot></slot>
+        </template>
+        
+        <!-- 操作区插槽 -->
+        <template v-if="$slots.operation" #operation>
+            <slot name="operation"></slot>
+        </template>
+        
+        <!-- 关闭按钮插槽 -->
+        <template v-if="$slots['close-btn']" #close-btn>
+            <slot name="close-btn"></slot>
+        </template>
+        
+        <!-- 图标插槽 -->
+        <template v-if="$slots.icon" #icon>
+            <slot name="icon"></slot>
+        </template>
+    </t-alert>
+</template>
+
+<script>
+export default {
+    name: "EbizAlert"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Alert as TAlert } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 主题
+    theme: {
+        type: String,
+        default: 'info',
+        validator: (val) => ['success', 'info', 'warning', 'error'].includes(val)
+    },
+    // 标题
+    title: {
+        type: String,
+        default: ''
+    },
+    // 内容
+    message: {
+        type: String,
+        default: ''
+    },
+    // 图标
+    icon: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 关闭按钮
+    close: {
+        type: Boolean,
+        default: false
+    },
+    // 内容显示最大行数
+    maxLine: {
+        type: Number,
+        default: 0
+    },
+    // 操作区内容
+    operation: {
+        type: [String, Function],
+        default: ''
+    },
+    // 描述内容
+    description: {
+        type: String,
+        default: ''
+    },
+    // 关闭按钮内容
+    closeBtn: {
+        type: [String, Function, Boolean],
+        default: undefined
+    },
+    // 默认是否显示打开
+    defaultOpen: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits(['close']);
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/TdesignButton.vue

@@ -1,136 +1,136 @@
-<template>
-    <t-button 
-        :block="block"
-        :content="content"
-        :disabled="disabled"
-        :ghost="ghost"
-        :href="href"
-        :loading="loading"
-        :shape="shape"
-        :size="size"
-        :tag="tag"
-        :theme="theme"
-        :type="type"
-        :variant="variant"
-        :icon="icon"
-        @click="handleClick"
-    >
-        <!-- 图标插槽 -->
-        <template v-if="$slots.icon" #icon>
-            <slot name="icon"></slot>
-        </template>
-        
-        <!-- 后缀插槽 -->
-        <template v-if="$slots.suffix" #suffix>
-            <slot name="suffix"></slot>
-        </template>
-        
-        <!-- 加载中插槽 -->
-        <template v-if="$slots.loading" #loading>
-            <slot name="loading"></slot>
-        </template>
-        
-        <!-- 内容插槽 -->
-        <template v-if="$slots.content" #content>
-            <slot name="content"></slot>
-        </template>
-        
-        <!-- 默认插槽 -->
-        <slot>{{ content }}</slot>
-    </t-button>
-</template>
-
-<script>
-export default {
-    name: "EbizTdesignButton"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Button as TButton } from 'tdesign-vue-next';
-
-defineProps({
-    // 是否为块级元素
-    block: {
-        type: Boolean,
-        default: false
-    },
-    // 按钮内容
-    content: {
-        type: String,
-        default: ''
-    },
-    // 禁用状态
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 是否为幽灵按钮
-    ghost: {
-        type: Boolean,
-        default: false
-    },
-    // 跳转链接
-    href: {
-        type: String,
-        default: ''
-    },
-    // 是否显示为加载状态
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    // 按钮形状
-    shape: {
-        type: String,
-        default: 'rectangle',
-        validator: (val) => ['rectangle', 'square', 'round', 'circle'].includes(val)
-    },
-    // 组件尺寸
-    size: {
-        type: String,
-        default: 'medium',
-        validator: (val) => ['extra-small', 'small', 'medium', 'large'].includes(val)
-    },
-    // 渲染按钮的HTML标签
-    tag: {
-        type: String,
-        default: 'button',
-        validator: (val) => ['button', 'a', 'div'].includes(val)
-    },
-    // 组件风格
-    theme: {
-        type: String,
-        default: 'default',
-        validator: (val) => ['default', 'primary', 'danger', 'warning', 'success'].includes(val)
-    },
-    // 按钮类型
-    type: {
-        type: String,
-        default: 'button',
-        validator: (val) => ['submit', 'reset', 'button'].includes(val)
-    },
-    // 按钮形式
-    variant: {
-        type: String,
-        default: 'base',
-        validator: (val) => ['base', 'outline', 'dashed', 'text'].includes(val)
-    },
-    // 按钮图标
-    icon: {
-        type: String,
-        default: ''
-    }
-});
-
-const emit = defineEmits(['click']);
-
-const handleClick = (e) => {
-    emit('click', e);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-button 
+        :block="block"
+        :content="content"
+        :disabled="disabled"
+        :ghost="ghost"
+        :href="href"
+        :loading="loading"
+        :shape="shape"
+        :size="size"
+        :tag="tag"
+        :theme="theme"
+        :type="type"
+        :variant="variant"
+        :icon="icon"
+        @click="handleClick"
+    >
+        <!-- 图标插槽 -->
+        <template v-if="$slots.icon" #icon>
+            <slot name="icon"></slot>
+        </template>
+        
+        <!-- 后缀插槽 -->
+        <template v-if="$slots.suffix" #suffix>
+            <slot name="suffix"></slot>
+        </template>
+        
+        <!-- 加载中插槽 -->
+        <template v-if="$slots.loading" #loading>
+            <slot name="loading"></slot>
+        </template>
+        
+        <!-- 内容插槽 -->
+        <template v-if="$slots.content" #content>
+            <slot name="content"></slot>
+        </template>
+        
+        <!-- 默认插槽 -->
+        <slot>{{ content }}</slot>
+    </t-button>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignButton"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Button as TButton } from 'tdesign-vue-next';
+
+defineProps({
+    // 是否为块级元素
+    block: {
+        type: Boolean,
+        default: false
+    },
+    // 按钮内容
+    content: {
+        type: String,
+        default: ''
+    },
+    // 禁用状态
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否为幽灵按钮
+    ghost: {
+        type: Boolean,
+        default: false
+    },
+    // 跳转链接
+    href: {
+        type: String,
+        default: ''
+    },
+    // 是否显示为加载状态
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    // 按钮形状
+    shape: {
+        type: String,
+        default: 'rectangle',
+        validator: (val) => ['rectangle', 'square', 'round', 'circle'].includes(val)
+    },
+    // 组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['extra-small', 'small', 'medium', 'large'].includes(val)
+    },
+    // 渲染按钮的HTML标签
+    tag: {
+        type: String,
+        default: 'button',
+        validator: (val) => ['button', 'a', 'div'].includes(val)
+    },
+    // 组件风格
+    theme: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'primary', 'danger', 'warning', 'success'].includes(val)
+    },
+    // 按钮类型
+    type: {
+        type: String,
+        default: 'button',
+        validator: (val) => ['submit', 'reset', 'button'].includes(val)
+    },
+    // 按钮形式
+    variant: {
+        type: String,
+        default: 'base',
+        validator: (val) => ['base', 'outline', 'dashed', 'text'].includes(val)
+    },
+    // 按钮图标
+    icon: {
+        type: String,
+        default: ''
+    }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = (e) => {
+    emit('click', e);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>