@ebiz/designer-components 0.1.2 → 0.1.4

package/src/components/EbizTabHeader.vue

@@ -1,133 +1,133 @@
-<template>
-  <t-tabs v-model="showTab" :theme="props.tabStyle === 'card' ? 'card' : 'normal'" @change="tabChange">
-    <t-tab-panel v-for="i in showTabs" :key="i.value" :label="i.label" :value="i.value.toString()" />
-  </t-tabs>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { Tabs as TTabs, TabPanel as TTabPanel } from 'tdesign-vue-next'
-import { dataService } from "../index.js"
-
-const emit = defineEmits(['tabChange'])
-
-const props = defineProps({
-  // 远程请求的配置
-  apiConfig: {
-    type: Object,
-    default: () => ({
-      key: null,
-      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(() => {
-  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 = (value) => {
-  emit('tabChange', value === '0' ? '' : value)
-}
-
-// init
-watch(() => showTabs.value, () => {
-  tabChange(showTab.value)
-})
-
-watch(() => props.apiConfig, (nVal) => {
-  if (!nVal?.apiId) return
-  dataService.fetch({}, { key: nVal.key, 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">
-// TDesign Tabs 主题色自定义
-:deep(.t-tabs__nav--card) {
-  .t-tabs__nav-item.t-is-active {
-    background-color: #5e7ce0;
-    border-color: #5e7ce0;
-  }
-}
-
-:deep(.t-tabs__nav-item) {
-  color: #606266;
-  
-  &:hover {
-    color: #5e7ce0;
-  }
-}
-
-:deep(.t-tabs__nav-item.t-is-active) {
-  color: #5e7ce0;
-}
-
-:deep(.t-tabs__bar) {
-  background-color: #5e7ce0;
-}
-
-:deep(.t-tabs__content) {
-  display: none;
-}
-
-:deep(.t-tabs__nav-container) {
-  border-bottom: 1px solid #e8e8e8;
-  margin-bottom: 0;
-}
-
-:deep(.t-tabs__nav-item) {
-  padding: 0 20px;
-  height: 40px;
-  line-height: 40px;
-  font-size: 14px;
-}
+<template>
+  <t-tabs v-model="showTab" :theme="props.tabStyle === 'card' ? 'card' : 'normal'" @change="tabChange">
+    <t-tab-panel v-for="i in showTabs" :key="i.value" :label="i.label" :value="i.value.toString()" />
+  </t-tabs>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { Tabs as TTabs, TabPanel as TTabPanel } from 'tdesign-vue-next'
+import { dataService } from "../index.js"
+
+const emit = defineEmits(['tabChange'])
+
+const props = defineProps({
+  // 远程请求的配置
+  apiConfig: {
+    type: Object,
+    default: () => ({
+      key: null,
+      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(() => {
+  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 = (value) => {
+  emit('tabChange', value === '0' ? '' : value)
+}
+
+// init
+watch(() => showTabs.value, () => {
+  tabChange(showTab.value)
+})
+
+watch(() => props.apiConfig, (nVal) => {
+  if (!nVal?.apiId) return
+  dataService.fetch({}, { key: nVal.key, 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">
+// TDesign Tabs 主题色自定义
+:deep(.t-tabs__nav--card) {
+  .t-tabs__nav-item.t-is-active {
+    background-color: #5e7ce0;
+    border-color: #5e7ce0;
+  }
+}
+
+:deep(.t-tabs__nav-item) {
+  color: #606266;
+  
+  &:hover {
+    color: #5e7ce0;
+  }
+}
+
+:deep(.t-tabs__nav-item.t-is-active) {
+  color: #5e7ce0;
+}
+
+:deep(.t-tabs__bar) {
+  background-color: #5e7ce0;
+}
+
+:deep(.t-tabs__content) {
+  display: none;
+}
+
+:deep(.t-tabs__nav-container) {
+  border-bottom: 1px solid #e8e8e8;
+  margin-bottom: 0;
+}
+
+:deep(.t-tabs__nav-item) {
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+}
 </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>