@ebiz/designer-components 0.0.18-beta.3 → 0.0.18-beta.5

package/src/components/EbizTabHeader.vue

@@ -1,149 +1,149 @@
-<template>
-  <tiny-tabs v-model="showTab" :tab-style="props.tabStyle" activeColor="#5e7ce0" @click="tabChange">
-    <tiny-tab-item 
-      activeColor="#5e7ce0" 
-      v-for="i in showTabs" 
-      :key="i.value" 
-      :title="i.label" 
-      :name="i.value.toString()"
-    />
-  </tiny-tabs>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { TinyTabs, TinyTabItem } from '@opentiny/vue'
-import { dataService } from "../index.js"
-
-const emit = defineEmits(['tabChange'])
-
-const props = defineProps({
-  // 远程请求的配置
-  apiConfig: {
-    type: Object,
-    default: () => ({
-      apiId: null,
-      apiType: 'MULTIPLE_DATA_SEARCH',
-    }),
-  },
-  // 不使用用远程的tabs
-  tabs: {
-    type: Array,
-    default: () => [],
-  },
-  // tab名称对应的字段
-  labelKey: {
-    type: String,
-    default: 'name'
-  },
-  // tab value对应的字段
-  valueKey: {
-    type: String,
-    default: 'id'
-  },
-  // 标签卡样式
-  tabStyle: {
-    type: String,
-    default: ''
-  },
-  // 展示值
-  showTab: {
-    type: String,
-    default: ''
-  },
-  // 绑定值
-  currentTab: {
-    type: String,
-    default: ''
-  },
-})
-
-// 远程请求的tabs
-const remoteTabs = ref([])
-
-// 展示的tabs
-const showTabs = computed(() => {
-    console.log(props.tabs,66, 110)
-  if (remoteTabs.value.length) return [{ label: '全部', value: '0' }, ...remoteTabs.value];
-  if (props.tabs.length) return props.tabs
-  return [{ label: '全部', value: '0' }]
-})
-
-// 展示的值
-const showTab = computed(() => {
-  if (props.showTab) return props.showTab
-  return props.currentTab || '0'
-})
-
-// methods
-const tabChange = (e) => {
-  emit('tabChange', e.name === '0' ? '' : e.name)
-}
-
-// init
-watch(() => showTabs.value, () => {
-  tabChange({ name: showTab.value })
-})
-
-watch(() => props.apiConfig, (nVal) => {
-  if (!nVal?.apiId) return
-  dataService.fetch({ }, { apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
-    remoteTabs.value = (res.data ?? []).map(i => ({
-      label: i[props.labelKey],
-      value: i[props.valueKey],
-    }))
-  })
-}, { immediate: true })
-</script>
-
-<style scoped lang="less">
-:deep(.tiny-tabs__item.is-active) {
-  color: #5e7ce0;
-}
-
-:deep(.tiny-tabs__active-bar) {
-  background: #5e7ce0;
-  height: 4px;
-}
-
-:deep(.tiny-tabs__content) {
-  display: none;
-}
-
-:deep(.tiny-tabs__nav) {
-  border-bottom: 1px solid #e8e8e8;
-  margin-bottom: 0;
-}
-
-:deep(.tiny-tabs__item) {
-  padding: 0 20px;
-  height: 40px;
-  line-height: 40px;
-  font-size: 14px;
-  color: #606266;
-  transition: color 0.3s;
-  cursor: pointer;
-
-  &:hover {
-    color: #5e7ce0;
-  }
-}
-
-:deep(.tiny-tabs__header) {
-  margin-bottom: 0;
-  overflow: hidden;
-  position: relative;
-  white-space: nowrap;
-}
-
-:deep(.tiny-tabs__nav-wrap) {
-  overflow: hidden;
-  position: relative;
-  white-space: nowrap;
-}
-
-:deep(.tiny-tabs__nav-scroll) {
-  overflow: hidden;
-  white-space: nowrap;
-}
+<template>
+  <tiny-tabs v-model="showTab" :tab-style="props.tabStyle" activeColor="#5e7ce0" @click="tabChange">
+    <tiny-tab-item 
+      activeColor="#5e7ce0" 
+      v-for="i in showTabs" 
+      :key="i.value" 
+      :title="i.label" 
+      :name="i.value.toString()"
+    />
+  </tiny-tabs>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+import { dataService } from "../index.js"
+
+const emit = defineEmits(['tabChange'])
+
+const props = defineProps({
+  // 远程请求的配置
+  apiConfig: {
+    type: Object,
+    default: () => ({
+      apiId: null,
+      apiType: 'MULTIPLE_DATA_SEARCH',
+    }),
+  },
+  // 不使用用远程的tabs
+  tabs: {
+    type: Array,
+    default: () => [],
+  },
+  // tab名称对应的字段
+  labelKey: {
+    type: String,
+    default: 'name'
+  },
+  // tab value对应的字段
+  valueKey: {
+    type: String,
+    default: 'id'
+  },
+  // 标签卡样式
+  tabStyle: {
+    type: String,
+    default: ''
+  },
+  // 展示值
+  showTab: {
+    type: String,
+    default: ''
+  },
+  // 绑定值
+  currentTab: {
+    type: String,
+    default: ''
+  },
+})
+
+// 远程请求的tabs
+const remoteTabs = ref([])
+
+// 展示的tabs
+const showTabs = computed(() => {
+    console.log(props.tabs,66, 110)
+  if (remoteTabs.value.length) return [{ label: '全部', value: '0' }, ...remoteTabs.value];
+  if (props.tabs.length) return props.tabs
+  return [{ label: '全部', value: '0' }]
+})
+
+// 展示的值
+const showTab = computed(() => {
+  if (props.showTab) return props.showTab
+  return props.currentTab || '0'
+})
+
+// methods
+const tabChange = (e) => {
+  emit('tabChange', e.name === '0' ? '' : e.name)
+}
+
+// init
+watch(() => showTabs.value, () => {
+  tabChange({ name: showTab.value })
+})
+
+watch(() => props.apiConfig, (nVal) => {
+  if (!nVal?.apiId) return
+  dataService.fetch({ }, { apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
+    remoteTabs.value = (res.data ?? []).map(i => ({
+      label: i[props.labelKey],
+      value: i[props.valueKey],
+    }))
+  })
+}, { immediate: true })
+</script>
+
+<style scoped lang="less">
+:deep(.tiny-tabs__item.is-active) {
+  color: #5e7ce0;
+}
+
+:deep(.tiny-tabs__active-bar) {
+  background: #5e7ce0;
+  height: 4px;
+}
+
+:deep(.tiny-tabs__content) {
+  display: none;
+}
+
+:deep(.tiny-tabs__nav) {
+  border-bottom: 1px solid #e8e8e8;
+  margin-bottom: 0;
+}
+
+:deep(.tiny-tabs__item) {
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: #606266;
+  transition: color 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: #5e7ce0;
+  }
+}
+
+:deep(.tiny-tabs__header) {
+  margin-bottom: 0;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+}
+
+:deep(.tiny-tabs__nav-wrap) {
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+}
+
+:deep(.tiny-tabs__nav-scroll) {
+  overflow: hidden;
+  white-space: nowrap;
+}
 </style> 

package/src/components/EbizTabPanel.vue

@@ -1,23 +1,23 @@
-<template>
-  <tab-panel
-    :value="value"
-    :label="label"
-    :disabled="disabled"
-    :removable="removable"
-    :destroyOnHide="destroyOnHide"
-    :draggable="draggable"
-    @remove="handleRemove"
-  >
-    <slot></slot>
-  </tab-panel>
-</template>
-
-<script>
-import { TabPanel } from 'tdesign-vue-next';
-
-export default TabPanel;
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+  <tab-panel
+    :value="value"
+    :label="label"
+    :disabled="disabled"
+    :removable="removable"
+    :destroyOnHide="destroyOnHide"
+    :draggable="draggable"
+    @remove="handleRemove"
+  >
+    <slot></slot>
+  </tab-panel>
+</template>
+
+<script>
+import { TabPanel } from 'tdesign-vue-next';
+
+export default TabPanel;
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

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>