@ebiz/designer-components 0.1.11 → 0.1.13

package/src/components/EbizStatsCard.vue

@@ -1,114 +1,114 @@
-<template>
-    <div class="ebiz-stats-card" :style="cardStyle">
-        <div class="card-title">{{ title }}</div>
-        <div class="card-value">{{ value }}</div>
-    </div>
-</template>
-
-<script setup>
-import { defineProps, computed } from 'vue';
-
-/**
- * EbizStatsCard 组件 - 统计数据卡片组件
- * 支持自定义背景色、标题文本和数值
- */
-const props = defineProps({
-    /**
-     * 卡片标题
-     */
-    title: {
-        type: String,
-        default: '标题'
-    },
-    /**
-     * 卡片数值
-     */
-    value: {
-        type: [String, Number],
-        default: '0'
-    },
-    /**
-     * 卡片背景色
-     */
-    backgroundColor: {
-        type: String,
-        default: '#f5f5f5'
-    },
-    /**
-     * 卡片边框颜色
-     */
-    borderColor: {
-        type: String,
-        default: '#d9d9d9'
-    },
-    /**
-     * 卡片宽度
-     */
-    width: {
-        type: String,
-        default: '240px'
-    },
-    /**
-     * 卡片高度
-     */
-    height: {
-        type: String,
-        default: '80px'
-    },
-    /**
-     * 卡片边框圆角
-     */
-    borderRadius: {
-        type: String,
-        default: '8px'
-    },
-    /**
-     * 标题颜色
-     */
-    titleColor: {
-        type: String,
-        default: '#333'
-    },
-    /**
-     * 数值颜色
-     */
-    valueColor: {
-        type: String,
-        default: '#000'
-    }
-});
-
-// 计算卡片样式
-const cardStyle = computed(() => {
-    return {
-        backgroundColor: props.backgroundColor,
-        border: `1px solid ${props.borderColor}`,
-        width: props.width,
-        height: props.height,
-        borderRadius: props.borderRadius
-    };
-});
-</script>
-
-<style scoped>
-.ebiz-stats-card {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px;
-    box-sizing: border-box;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-}
-
-.card-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: v-bind('props.titleColor');
-}
-
-.card-value {
-    font-size: 24px;
-    font-weight: bold;
-    color: v-bind('props.valueColor');
-}
+<template>
+    <div class="ebiz-stats-card" :style="cardStyle">
+        <div class="card-title">{{ title }}</div>
+        <div class="card-value">{{ value }}</div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizStatsCard 组件 - 统计数据卡片组件
+ * 支持自定义背景色、标题文本和数值
+ */
+const props = defineProps({
+    /**
+     * 卡片标题
+     */
+    title: {
+        type: String,
+        default: '标题'
+    },
+    /**
+     * 卡片数值
+     */
+    value: {
+        type: [String, Number],
+        default: '0'
+    },
+    /**
+     * 卡片背景色
+     */
+    backgroundColor: {
+        type: String,
+        default: '#f5f5f5'
+    },
+    /**
+     * 卡片边框颜色
+     */
+    borderColor: {
+        type: String,
+        default: '#d9d9d9'
+    },
+    /**
+     * 卡片宽度
+     */
+    width: {
+        type: String,
+        default: '240px'
+    },
+    /**
+     * 卡片高度
+     */
+    height: {
+        type: String,
+        default: '80px'
+    },
+    /**
+     * 卡片边框圆角
+     */
+    borderRadius: {
+        type: String,
+        default: '8px'
+    },
+    /**
+     * 标题颜色
+     */
+    titleColor: {
+        type: String,
+        default: '#333'
+    },
+    /**
+     * 数值颜色
+     */
+    valueColor: {
+        type: String,
+        default: '#000'
+    }
+});
+
+// 计算卡片样式
+const cardStyle = computed(() => {
+    return {
+        backgroundColor: props.backgroundColor,
+        border: `1px solid ${props.borderColor}`,
+        width: props.width,
+        height: props.height,
+        borderRadius: props.borderRadius
+    };
+});
+</script>
+
+<style scoped>
+.ebiz-stats-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: v-bind('props.titleColor');
+}
+
+.card-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: v-bind('props.valueColor');
+}
 </style> 

package/src/components/EbizSwiper.vue

@@ -1,114 +1,114 @@
-<template>
-  <div>
-    <swiper v-model="innerCurrent" :animation="animation" :autoplay="autoplay" :direction="direction"
-      :duration="duration" :height="height" :interval="interval" :loop="loop" :navigation="navigationConfig"
-      :stop-on-hover="stopOnHover" :theme="theme" @change="handleChange">
-      <slot></slot>
-      <template v-if="$slots.navigation" #navigation>
-        <slot name="navigation"></slot>
-      </template>
-    </swiper>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { Swiper } from 'tdesign-vue-next';
-
-const props = defineProps({
-  // 轮播切换动画效果类型
-  animation: {
-    type: String,
-    default: 'slide',
-    validator: (val) => ['slide', 'fade'].includes(val)
-  },
-  // 是否自动播放
-  autoplay: {
-    type: Boolean,
-    default: true
-  },
-  // 当前轮播在哪一项（下标）
-  current: {
-    type: Number,
-    default: 0
-  },
-  // 默认当前轮播在哪一项（下标）
-  defaultCurrent: {
-    type: Number,
-    default: 0
-  },
-  // 轮播滑动方向
-  direction: {
-    type: String,
-    default: 'horizontal',
-    validator: (val) => ['horizontal', 'vertical'].includes(val)
-  },
-  // 滑动动画时长
-  duration: {
-    type: Number,
-    default: 300
-  },
-  // 当使用垂直方向滚动时的高度
-  height: {
-    type: Number,
-    default: undefined
-  },
-  // 轮播间隔时间
-  interval: {
-    type: Number,
-    default: 5000
-  },
-  // 是否循环播放
-  loop: {
-    type: Boolean,
-    default: true
-  },
-  // 导航器配置
-  navigation: {
-    type: Object,
-    default: () => ({})
-  },
-  // 是否悬浮时停止轮播
-  stopOnHover: {
-    type: Boolean,
-    default: true
-  },
-  // 深色模式和浅色模式
-  theme: {
-    type: String,
-    default: 'light',
-    validator: (val) => ['light', 'dark'].includes(val)
-  }
-});
-
-const emit = defineEmits(['update:current', 'change']);
-
-// 内部current值，支持双向绑定
-const innerCurrent = ref(props.current || props.defaultCurrent);
-
-// 监听props.current的变化
-watch(() => props.current, (newVal) => {
-  if (newVal !== undefined && newVal !== innerCurrent.value) {
-    innerCurrent.value = newVal;
-  }
-});
-
-// 计算导航器配置
-const navigationConfig = computed(() => {
-  if (!props.navigation) return undefined;
-  return props.navigation;
-});
-
-// 变更事件处理
-const handleChange = (index) => {
-  innerCurrent.value = index;
-  emit('update:current', index);
-  emit('change', index);
-};
-</script>
-
-<style scoped>
-.ebiz-swiper-wrapper {
-  width: 100%;
-}
+<template>
+  <div>
+    <swiper v-model="innerCurrent" :animation="animation" :autoplay="autoplay" :direction="direction"
+      :duration="duration" :height="height" :interval="interval" :loop="loop" :navigation="navigationConfig"
+      :stop-on-hover="stopOnHover" :theme="theme" @change="handleChange">
+      <slot></slot>
+      <template v-if="$slots.navigation" #navigation>
+        <slot name="navigation"></slot>
+      </template>
+    </swiper>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { Swiper } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 轮播切换动画效果类型
+  animation: {
+    type: String,
+    default: 'slide',
+    validator: (val) => ['slide', 'fade'].includes(val)
+  },
+  // 是否自动播放
+  autoplay: {
+    type: Boolean,
+    default: true
+  },
+  // 当前轮播在哪一项（下标）
+  current: {
+    type: Number,
+    default: 0
+  },
+  // 默认当前轮播在哪一项（下标）
+  defaultCurrent: {
+    type: Number,
+    default: 0
+  },
+  // 轮播滑动方向
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: (val) => ['horizontal', 'vertical'].includes(val)
+  },
+  // 滑动动画时长
+  duration: {
+    type: Number,
+    default: 300
+  },
+  // 当使用垂直方向滚动时的高度
+  height: {
+    type: Number,
+    default: undefined
+  },
+  // 轮播间隔时间
+  interval: {
+    type: Number,
+    default: 5000
+  },
+  // 是否循环播放
+  loop: {
+    type: Boolean,
+    default: true
+  },
+  // 导航器配置
+  navigation: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否悬浮时停止轮播
+  stopOnHover: {
+    type: Boolean,
+    default: true
+  },
+  // 深色模式和浅色模式
+  theme: {
+    type: String,
+    default: 'light',
+    validator: (val) => ['light', 'dark'].includes(val)
+  }
+});
+
+const emit = defineEmits(['update:current', 'change']);
+
+// 内部current值，支持双向绑定
+const innerCurrent = ref(props.current || props.defaultCurrent);
+
+// 监听props.current的变化
+watch(() => props.current, (newVal) => {
+  if (newVal !== undefined && newVal !== innerCurrent.value) {
+    innerCurrent.value = newVal;
+  }
+});
+
+// 计算导航器配置
+const navigationConfig = computed(() => {
+  if (!props.navigation) return undefined;
+  return props.navigation;
+});
+
+// 变更事件处理
+const handleChange = (index) => {
+  innerCurrent.value = index;
+  emit('update:current', index);
+  emit('change', index);
+};
+</script>
+
+<style scoped>
+.ebiz-swiper-wrapper {
+  width: 100%;
+}
 </style> 

package/src/components/EbizSwiperItem.vue

@@ -1,14 +1,14 @@
-<template>
-  <t-swiper-item>
-    <slot></slot>
-  </t-swiper-item>
-</template>
-
-<script setup>
-import { SwiperItem as TSwiperItem } from 'tdesign-vue-next';
-// 没有需要单独处理的props，直接透传slot到t-swiper-item
-</script>
-
-<style scoped>
-/* 自定义样式可以在这里添加 */
+<template>
+  <t-swiper-item>
+    <slot></slot>
+  </t-swiper-item>
+</template>
+
+<script setup>
+import { SwiperItem as TSwiperItem } from 'tdesign-vue-next';
+// 没有需要单独处理的props，直接透传slot到t-swiper-item
+</script>
+
+<style scoped>
+/* 自定义样式可以在这里添加 */
 </style> 

package/src/components/EbizSwitch.vue

@@ -1,86 +1,86 @@
-<template>
-    <t-switch
-        :modelValue="modelValue"
-        :customValue="customValue"
-        :disabled="disabled"
-        :label="label"
-        :loading="loading"
-        :size="size"
-        :theme="theme"
-        @change="handleChange"
-        @click="handleClick"
-    >
-        <!-- 标签插槽 -->
-        <template v-if="$slots.label" #label>
-            <slot name="label"></slot>
-        </template>
-    </t-switch>
-</template>
-
-<script>
-export default {
-    name: "EbizSwitch"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Switch as TSwitch } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 开关值，支持v-model
-    modelValue: {
-        type: [String, Number, Boolean],
-        default: false
-    },
-    // 自定义值
-    customValue: {
-        type: Array,
-        default: () => [true, false]
-    },
-    // 是否禁用组件
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 开关标签
-    label: {
-        type: [String, Array, Function],
-        default: undefined
-    },
-    // 是否处于加载中状态
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    // 开关尺寸
-    size: {
-        type: String,
-        default: 'medium',
-        validator: (val) => ['small', 'medium', 'large'].includes(val)
-    },
-    // 开关风格
-    theme: {
-        type: String,
-        default: 'primary',
-        validator: (val) => ['primary', 'success', 'warning', 'danger'].includes(val)
-    }
-});
-
-const emit = defineEmits(['update:modelValue', 'change', 'click']);
-
-// 值变化事件
-const handleChange = (value, context) => {
-    emit('update:modelValue', value);
-    emit('change', value, context);
-};
-
-// 点击事件
-const handleClick = (e) => {
-    emit('click', e);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-switch
+        :modelValue="modelValue"
+        :customValue="customValue"
+        :disabled="disabled"
+        :label="label"
+        :loading="loading"
+        :size="size"
+        :theme="theme"
+        @change="handleChange"
+        @click="handleClick"
+    >
+        <!-- 标签插槽 -->
+        <template v-if="$slots.label" #label>
+            <slot name="label"></slot>
+        </template>
+    </t-switch>
+</template>
+
+<script>
+export default {
+    name: "EbizSwitch"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Switch as TSwitch } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 开关值，支持v-model
+    modelValue: {
+        type: [String, Number, Boolean],
+        default: false
+    },
+    // 自定义值
+    customValue: {
+        type: Array,
+        default: () => [true, false]
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 开关标签
+    label: {
+        type: [String, Array, Function],
+        default: undefined
+    },
+    // 是否处于加载中状态
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    // 开关尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 开关风格
+    theme: {
+        type: String,
+        default: 'primary',
+        validator: (val) => ['primary', 'success', 'warning', 'danger'].includes(val)
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'click']);
+
+// 值变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+
+// 点击事件
+const handleClick = (e) => {
+    emit('click', e);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>