@ebiz/designer-components 0.0.63 → 0.1.1

package/src/components/EbizTdesignLoading.vue

@@ -1,108 +1,108 @@
-<template>
-    <t-loading :delay="delay" :duration="duration" :indicator="indicator" :inherit-color="inheritColor" :layout="layout"
-        :loading="loading" :loading-props="loadingProps" :pause="pause" :reverse="reverse" :show-overlay="showOverlay"
-        :size="size" :text="text" :theme="theme">
-        <!-- 默认插槽 -->
-        <slot></slot>
-
-        <!-- 文本内容插槽 -->
-        <template v-if="$slots.text" #text>
-            <slot name="text"></slot>
-        </template>
-
-        <!-- 加载指示器插槽 -->
-        <template v-if="$slots.indicator" #indicator>
-            <slot name="indicator"></slot>
-        </template>
-
-        <!-- 加载内容插槽 -->
-        <template v-if="$slots.content" #content>
-            <slot name="content"></slot>
-        </template>
-    </t-loading>
-</template>
-
-<script>
-export default {
-    name: "EbizTdesignLoading"
-}
-</script>
-
-<script setup>
-import { defineProps } from 'vue';
-import { Loading as TLoading } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
-    delay: {
-        type: Number,
-        default: 0
-    },
-    // 加载动画执行完成一次的时间，单位：毫秒
-    duration: {
-        type: Number,
-        default: 800
-    },
-    // 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
-    indicator: {
-        type: [Boolean, Function],
-        default: true
-    },
-    // 是否继承父元素颜色
-    inheritColor: {
-        type: Boolean,
-        default: false
-    },
-    // 对齐方式
-    layout: {
-        type: String,
-        default: 'horizontal',
-        validator: (val) => ['horizontal', 'vertical'].includes(val)
-    },
-    // 是否处于加载状态
-    loading: {
-        type: Boolean,
-        default: true
-    },
-    // 透传加载组件全部属性
-    loadingProps: {
-        type: Object,
-        default: () => ({})
-    },
-    // 是否暂停动画
-    pause: {
-        type: Boolean,
-        default: false
-    },
-    // 加载动画是否反向
-    reverse: {
-        type: Boolean,
-        default: false
-    },
-    // 是否需要遮罩层
-    showOverlay: {
-        type: Boolean,
-        default: true
-    },
-    // 尺寸，示例：small/medium/large/12px/56px
-    size: {
-        type: String,
-        default: 'medium'
-    },
-    // 加载提示文案
-    text: {
-        type: String,
-        default: ''
-    },
-    // 加载组件类型
-    theme: {
-        type: String,
-        default: 'circular',
-        validator: (val) => ['circular', 'spinner', 'dots', 'bar'].includes(val)
-    }
-});
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-loading :delay="delay" :duration="duration" :indicator="indicator" :inherit-color="inheritColor" :layout="layout"
+        :loading="loading" :loading-props="loadingProps" :pause="pause" :reverse="reverse" :show-overlay="showOverlay"
+        :size="size" :text="text" :theme="theme">
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 文本内容插槽 -->
+        <template v-if="$slots.text" #text>
+            <slot name="text"></slot>
+        </template>
+
+        <!-- 加载指示器插槽 -->
+        <template v-if="$slots.indicator" #indicator>
+            <slot name="indicator"></slot>
+        </template>
+
+        <!-- 加载内容插槽 -->
+        <template v-if="$slots.content" #content>
+            <slot name="content"></slot>
+        </template>
+    </t-loading>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignLoading"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { Loading as TLoading } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+    delay: {
+        type: Number,
+        default: 0
+    },
+    // 加载动画执行完成一次的时间，单位：毫秒
+    duration: {
+        type: Number,
+        default: 800
+    },
+    // 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
+    indicator: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 是否继承父元素颜色
+    inheritColor: {
+        type: Boolean,
+        default: false
+    },
+    // 对齐方式
+    layout: {
+        type: String,
+        default: 'horizontal',
+        validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    // 是否处于加载状态
+    loading: {
+        type: Boolean,
+        default: true
+    },
+    // 透传加载组件全部属性
+    loadingProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否暂停动画
+    pause: {
+        type: Boolean,
+        default: false
+    },
+    // 加载动画是否反向
+    reverse: {
+        type: Boolean,
+        default: false
+    },
+    // 是否需要遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 尺寸，示例：small/medium/large/12px/56px
+    size: {
+        type: String,
+        default: 'medium'
+    },
+    // 加载提示文案
+    text: {
+        type: String,
+        default: ''
+    },
+    // 加载组件类型
+    theme: {
+        type: String,
+        default: 'circular',
+        validator: (val) => ['circular', 'spinner', 'dots', 'bar'].includes(val)
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>

package/src/components/EbizTimePicker.vue

@@ -1,144 +1,144 @@
-<template>
-  <t-time-picker
-    v-bind="$attrs"
-    :value="modelValue"
-    :allow-input="allowInput"
-    :clearable="clearable"
-    :disabled="disabled"
-    :disable-time="disableTime"
-    :format="format"
-    :input-props="inputProps"
-    :placeholder="placeholder"
-    :popup-props="popupProps"
-    :size="size"
-    :steps="steps"
-    :range="range"
-    :range-separator="rangeSeparator"
-    :tips="tips"
-    @change="handleChange"
-    @blur="$emit('blur', $event)"
-    @focus="$emit('focus', $event)"
-    @close="$emit('close', $event)"
-    @open="$emit('open', $event)"
-    @dayclick="$emit('dayclick', $event)"
-    @pick="$emit('pick', $event)"
-  >
-    <template v-if="$slots.suffixIcon" #suffixIcon>
-      <slot name="suffixIcon"></slot>
-    </template>
-    <template v-if="$slots.panel" #panel="slotProps">
-      <slot name="panel" v-bind="slotProps"></slot>
-    </template>
-    <template v-if="$slots.prepend" #prepend>
-      <slot name="prepend"></slot>
-    </template>
-    <template v-if="$slots.tips" #tips>
-      <slot name="tips"></slot>
-    </template>
-  </t-time-picker>
-</template>
-
-<script setup>
-import { TimePicker as TTimePicker } from 'tdesign-vue-next';
-import { computed } from 'vue';
-
-const props = defineProps({
-  // 选中值
-  modelValue: {
-    type: [String, Array],
-    default: '',
-  },
-  // 是否允许直接输入时间
-  allowInput: {
-    type: Boolean,
-    default: true,
-  },
-  // 是否允许清除选中值
-  clearable: {
-    type: Boolean,
-    default: true,
-  },
-  // 是否禁用组件
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  // 禁用时间项
-  disableTime: {
-    type: Function,
-    default: null,
-  },
-  // 时间格式
-  format: {
-    type: String,
-    default: 'HH:mm:ss',
-  },
-  // 透传给输入框的属性
-  inputProps: {
-    type: Object,
-    default: () => ({}),
-  },
-  // 输入框占位文本
-  placeholder: {
-    type: String,
-    default: '请选择时间',
-  },
-  // 透传给 popup 组件的属性
-  popupProps: {
-    type: Object,
-    default: () => ({}),
-  },
-  // 尺寸
-  size: {
-    type: String,
-    default: 'medium',
-    validator(val) {
-      return ['small', 'medium', 'large'].includes(val);
-    },
-  },
-  // 时间间隔步数
-  steps: {
-    type: Array,
-    default: () => [1, 1, 1],
-  },
-  // 是否为时间范围选择
-  range: {
-    type: Boolean,
-    default: false,
-  },
-  // 范围分隔符
-  rangeSeparator: {
-    type: String,
-    default: ' - ',
-  },
-  // 提示文本
-  tips: {
-    type: [String, Function],
-    default: '',
-  },
-});
-
-const emit = defineEmits([
-  'update:modelValue',
-  'change',
-  'blur',
-  'focus',
-  'close',
-  'open',
-  'dayclick',
-  'pick',
-]);
-
-// 处理值变更事件
-const handleChange = (value) => {
-  emit('update:modelValue', value);
-  emit('change', value);
-};
-
-</script>
-
-<style>
-.t-time-picker {
-  width: 100%;
-}
+<template>
+  <t-time-picker
+    v-bind="$attrs"
+    :value="modelValue"
+    :allow-input="allowInput"
+    :clearable="clearable"
+    :disabled="disabled"
+    :disable-time="disableTime"
+    :format="format"
+    :input-props="inputProps"
+    :placeholder="placeholder"
+    :popup-props="popupProps"
+    :size="size"
+    :steps="steps"
+    :range="range"
+    :range-separator="rangeSeparator"
+    :tips="tips"
+    @change="handleChange"
+    @blur="$emit('blur', $event)"
+    @focus="$emit('focus', $event)"
+    @close="$emit('close', $event)"
+    @open="$emit('open', $event)"
+    @dayclick="$emit('dayclick', $event)"
+    @pick="$emit('pick', $event)"
+  >
+    <template v-if="$slots.suffixIcon" #suffixIcon>
+      <slot name="suffixIcon"></slot>
+    </template>
+    <template v-if="$slots.panel" #panel="slotProps">
+      <slot name="panel" v-bind="slotProps"></slot>
+    </template>
+    <template v-if="$slots.prepend" #prepend>
+      <slot name="prepend"></slot>
+    </template>
+    <template v-if="$slots.tips" #tips>
+      <slot name="tips"></slot>
+    </template>
+  </t-time-picker>
+</template>
+
+<script setup>
+import { TimePicker as TTimePicker } from 'tdesign-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps({
+  // 选中值
+  modelValue: {
+    type: [String, Array],
+    default: '',
+  },
+  // 是否允许直接输入时间
+  allowInput: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否允许清除选中值
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否禁用组件
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 禁用时间项
+  disableTime: {
+    type: Function,
+    default: null,
+  },
+  // 时间格式
+  format: {
+    type: String,
+    default: 'HH:mm:ss',
+  },
+  // 透传给输入框的属性
+  inputProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 输入框占位文本
+  placeholder: {
+    type: String,
+    default: '请选择时间',
+  },
+  // 透传给 popup 组件的属性
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator(val) {
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
+  // 时间间隔步数
+  steps: {
+    type: Array,
+    default: () => [1, 1, 1],
+  },
+  // 是否为时间范围选择
+  range: {
+    type: Boolean,
+    default: false,
+  },
+  // 范围分隔符
+  rangeSeparator: {
+    type: String,
+    default: ' - ',
+  },
+  // 提示文本
+  tips: {
+    type: [String, Function],
+    default: '',
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'change',
+  'blur',
+  'focus',
+  'close',
+  'open',
+  'dayclick',
+  'pick',
+]);
+
+// 处理值变更事件
+const handleChange = (value) => {
+  emit('update:modelValue', value);
+  emit('change', value);
+};
+
+</script>
+
+<style>
+.t-time-picker {
+  width: 100%;
+}
 </style> 

package/src/components/EbizTitle.vue

@@ -1,92 +1,92 @@
-<template>
-    <div class="ebiz-title">
-        <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div>
-        <div class="title-text">
-            <slot name="title">
-                {{ displayTitle }}
-            </slot>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { defineProps, computed } from 'vue';
-
-/**
- * EbizTitle 组件 - 带有色块的标题组件
- * 支持自定义标题文本、色块颜色和色块宽度
- * 包含一个按钮，点击时在标题后添加点号并触发事件
- * 支持通过插槽自定义标题内容
- */
-const props = defineProps({
-    /**
-     * 标题文本 (当不使用插槽时显示)
-     */
-    title: {
-        type: String,
-        default: '标题'
-    },
-    /**
-     * 色块颜色，支持任何有效的CSS颜色值
-     */
-    color: {
-        type: String,
-        default: '#1890ff'
-    },
-    /**
-     * 色块宽度，单位为像素
-     */
-    blockWidth: {
-        type: Number,
-        default: 10
-    }
-});
-
-
-const displayTitle = computed(() => {
-    return props.title;
-});
-</script>
-
-<style scoped>
-.ebiz-title {
-    display: flex;
-    align-items: center;
-    margin: 16px 0;
-}
-
-.color-block {
-    height: 20px;
-    border-radius: 2px;
-    margin-right: 8px;
-}
-
-.title-text {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 500;
-    color: #333;
-    line-height: 1.5;
-    margin-right: 8px;
-}
-
-.title-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    background-color: #f0f0f0;
-    border: 1px solid #d9d9d9;
-    cursor: pointer;
-    font-size: 14px;
-    transition: all 0.3s;
-}
-
-.title-button:hover {
-    background-color: #e6f7ff;
-    border-color: #1890ff;
-    color: #1890ff;
-}
+<template>
+    <div class="ebiz-title">
+        <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div>
+        <div class="title-text">
+            <slot name="title">
+                {{ displayTitle }}
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizTitle 组件 - 带有色块的标题组件
+ * 支持自定义标题文本、色块颜色和色块宽度
+ * 包含一个按钮，点击时在标题后添加点号并触发事件
+ * 支持通过插槽自定义标题内容
+ */
+const props = defineProps({
+    /**
+     * 标题文本 (当不使用插槽时显示)
+     */
+    title: {
+        type: String,
+        default: '标题'
+    },
+    /**
+     * 色块颜色，支持任何有效的CSS颜色值
+     */
+    color: {
+        type: String,
+        default: '#1890ff'
+    },
+    /**
+     * 色块宽度，单位为像素
+     */
+    blockWidth: {
+        type: Number,
+        default: 10
+    }
+});
+
+
+const displayTitle = computed(() => {
+    return props.title;
+});
+</script>
+
+<style scoped>
+.ebiz-title {
+    display: flex;
+    align-items: center;
+    margin: 16px 0;
+}
+
+.color-block {
+    height: 20px;
+    border-radius: 2px;
+    margin-right: 8px;
+}
+
+.title-text {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.5;
+    margin-right: 8px;
+}
+
+.title-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    background-color: #f0f0f0;
+    border: 1px solid #d9d9d9;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s;
+}
+
+.title-button:hover {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    color: #1890ff;
+}
 </style>