@ebiz/designer-components 0.0.63 → 0.1.1

package/src/components/EbizTabs.vue

@@ -1,143 +1,143 @@
-<template>
-  <div class="tdesign-tabs-wrapper">
-    <t-tabs
-      v-model="innerValue"
-      :addable="addable"
-      :disabled="disabled"
-      :placement="placement"
-      :size="size" 
-      :theme="theme"
-      :list="list"
-      :dragSort="dragSort"
-      @add="handleAdd"
-      @change="handleChange"
-      @dragSort="handleDragSort"
-      @remove="handleRemove"
-    >
-      <!-- 添加按钮插槽 -->
-      <template v-if="$slots.action" #action>
-        <slot name="action"></slot>
-      </template>
-      
-      <!-- 直接输出默认插槽内容，这里应该只包含EbizTabPanel -->
-      <slot></slot>
-    </t-tabs>
-  </div>
-</template>
-
-<script>
-import { Tabs as TTabs } from 'tdesign-vue-next';
-import { defineComponent, toRefs, computed, watch } from 'vue';
-
-export default defineComponent({
-  name: 'EbizTabs',
-  components: {
-    't-tabs': TTabs,
-  },
-  props: {
-    // v-model绑定值
-    modelValue: {
-      type: [String, Number],
-    },
-    // 默认值
-    defaultValue: {
-      type: [String, Number],
-    },
-    // 选项卡右侧的操作区域
-    action: {
-      type: [Function, String],
-      default: undefined
-    },
-    // 选项卡是否可增加
-    addable: {
-      type: Boolean,
-      default: false
-    },
-    // 是否禁用选项卡
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    // 是否开启拖拽调整顺序
-    dragSort: {
-      type: Boolean,
-      default: false
-    },
-    // 选项卡列表
-    list: {
-      type: Array,
-    },
-    // 选项卡位置
-    placement: {
-      type: String,
-      default: 'top',
-      validator: (val) => ['top', 'bottom', 'left', 'right'].includes(val)
-    },
-    // 组件尺寸
-    size: {
-      type: String,
-      default: 'medium',
-      validator: (val) => ['medium', 'large'].includes(val)
-    },
-    // 选项卡风格
-    theme: {
-      type: String,
-      default: 'normal',
-      validator: (val) => ['normal', 'card'].includes(val)
-    }
-  },
-  emits: ['update:modelValue', 'add', 'change', 'dragSort', 'remove'],
-  setup(props, { emit }) {
-    const { modelValue, defaultValue } = toRefs(props);
-    
-    // 内部值计算属性,用于双向绑定
-    const innerValue = computed({
-      get: () => modelValue.value !== undefined ? modelValue.value : defaultValue.value,
-      set: (val) => {
-        emit('update:modelValue', val);
-      }
-    });
-    
-    // 监听modelValue变化
-    watch(modelValue, (newVal) => {
-      if (newVal !== innerValue.value) {
-        innerValue.value = newVal;
-      }
-    });
-    
-    // 添加选项卡事件
-    const handleAdd = (context) => {
-      emit('add', context);
-    };
-    
-    // 选项卡切换事件
-    const handleChange = (value, context) => {
-      emit('change', value, context);
-    };
-    
-    // 拖拽排序事件
-    const handleDragSort = (context) => {
-      emit('dragSort', context);
-    };
-    
-    // 删除选项卡事件
-    const handleRemove = (options) => {
-      emit('remove', options);
-    };
-    
-    return {
-      innerValue,
-      handleAdd,
-      handleChange,
-      handleDragSort,
-      handleRemove
-    };
-  }
-});
-</script>
-
-<style lang="less" scoped>
-.tdesign-tabs-wrapper {
-  width: 100%;
-}
+<template>
+  <div class="tdesign-tabs-wrapper">
+    <t-tabs
+      v-model="innerValue"
+      :addable="addable"
+      :disabled="disabled"
+      :placement="placement"
+      :size="size" 
+      :theme="theme"
+      :list="list"
+      :dragSort="dragSort"
+      @add="handleAdd"
+      @change="handleChange"
+      @dragSort="handleDragSort"
+      @remove="handleRemove"
+    >
+      <!-- 添加按钮插槽 -->
+      <template v-if="$slots.action" #action>
+        <slot name="action"></slot>
+      </template>
+      
+      <!-- 直接输出默认插槽内容，这里应该只包含EbizTabPanel -->
+      <slot></slot>
+    </t-tabs>
+  </div>
+</template>
+
+<script>
+import { Tabs as TTabs } from 'tdesign-vue-next';
+import { defineComponent, toRefs, computed, watch } from 'vue';
+
+export default defineComponent({
+  name: 'EbizTabs',
+  components: {
+    't-tabs': TTabs,
+  },
+  props: {
+    // v-model绑定值
+    modelValue: {
+      type: [String, Number],
+    },
+    // 默认值
+    defaultValue: {
+      type: [String, Number],
+    },
+    // 选项卡右侧的操作区域
+    action: {
+      type: [Function, String],
+      default: undefined
+    },
+    // 选项卡是否可增加
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    // 是否禁用选项卡
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否开启拖拽调整顺序
+    dragSort: {
+      type: Boolean,
+      default: false
+    },
+    // 选项卡列表
+    list: {
+      type: Array,
+    },
+    // 选项卡位置
+    placement: {
+      type: String,
+      default: 'top',
+      validator: (val) => ['top', 'bottom', 'left', 'right'].includes(val)
+    },
+    // 组件尺寸
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (val) => ['medium', 'large'].includes(val)
+    },
+    // 选项卡风格
+    theme: {
+      type: String,
+      default: 'normal',
+      validator: (val) => ['normal', 'card'].includes(val)
+    }
+  },
+  emits: ['update:modelValue', 'add', 'change', 'dragSort', 'remove'],
+  setup(props, { emit }) {
+    const { modelValue, defaultValue } = toRefs(props);
+    
+    // 内部值计算属性,用于双向绑定
+    const innerValue = computed({
+      get: () => modelValue.value !== undefined ? modelValue.value : defaultValue.value,
+      set: (val) => {
+        emit('update:modelValue', val);
+      }
+    });
+    
+    // 监听modelValue变化
+    watch(modelValue, (newVal) => {
+      if (newVal !== innerValue.value) {
+        innerValue.value = newVal;
+      }
+    });
+    
+    // 添加选项卡事件
+    const handleAdd = (context) => {
+      emit('add', context);
+    };
+    
+    // 选项卡切换事件
+    const handleChange = (value, context) => {
+      emit('change', value, context);
+    };
+    
+    // 拖拽排序事件
+    const handleDragSort = (context) => {
+      emit('dragSort', context);
+    };
+    
+    // 删除选项卡事件
+    const handleRemove = (options) => {
+      emit('remove', options);
+    };
+    
+    return {
+      innerValue,
+      handleAdd,
+      handleChange,
+      handleDragSort,
+      handleRemove
+    };
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.tdesign-tabs-wrapper {
+  width: 100%;
+}
 </style>