t20-common-lib 0.9.13 → 0.10.0

package/packages/tab-page/src/main.vue

@@ -1,102 +1,102 @@
-<template>
-  <div class="flex-column" :class="rootClasses">
-    <div v-if="hasHeader" class="header">
-      <slot name="back"></slot>
-      <slot name="unit"></slot>
-    </div>
-    <div v-if="$slots.tab" class="tab-container">
-      <div class="tab" :class="tabClasses">
-        <slot name="tab"></slot>
-      </div>
-    </div>
-    <div class="content-wrapper flex-1 overflow" :class="contentClasses">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TabPage',
-  props: {
-    level: {
-      type: Number,
-      default: 1
-    }
-  },
-  computed: {
-    hasUnitSlot() {
-      return !!this.$slots.unit;
-    },
-    hasHeader() {
-      return !!this.$slots.back || this.hasUnitSlot;
-    },
-    rootClasses() {
-      return {
-        tabPage: this.hasUnitSlot,
-        'level2-content': this.level === 2
-      };
-    },
-    tabClasses() {
-      return {
-        level1: this.level === 1 && this.hasUnitSlot,
-        level2: !(this.level === 1 && this.hasUnitSlot)
-      };
-    },
-    contentClasses() {
-      return {
-        'px-8': this.hasUnitSlot,
-        'bg-white': true
-      };
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tabPage {
-  padding: 0 !important; // 建议审查 !important 的必要性，优先通过提升选择器权重解决样式覆盖问题
-  background: #f0f2f5;
-}
-
-.header {
-  height: 32px;
-  line-height: 32px;
-}
-
-.tab-container {
-  position: relative;
-  height: 0; // 容器不占位
-}
-
-.tab {
-  position: absolute;
-  bottom: -34px;
-  z-index: 1; // 确保 tab 在内容区域之上
-}
-
-.tabPage .tab {
-  bottom: -42px;
-}
-
-.level1 {
-  padding-left: 8px;
-}
-
-.level2 {
-  // 可以保留为空或添加 level2 的特定样式
-}
-
-.content-wrapper {
-  position: relative; // 确保内容在 tab 下方
-}
-
-.level2-content {
-  height: calc(100% - 34px);
-  margin-top: 34px;
-}
-
-.bg-white {
-  background-color: #fff !important; // 建议审查 !important 的必要性
-}
+<template>
+  <div class="flex-column" :class="rootClasses">
+    <div v-if="hasHeader" class="header">
+      <slot name="back"></slot>
+      <slot name="unit"></slot>
+    </div>
+    <div v-if="$slots.tab" class="tab-container">
+      <div class="tab" :class="tabClasses">
+        <slot name="tab"></slot>
+      </div>
+    </div>
+    <div class="content-wrapper flex-1 overflow" :class="contentClasses">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TabPage',
+  props: {
+    level: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    hasUnitSlot() {
+      return !!this.$slots.unit;
+    },
+    hasHeader() {
+      return !!this.$slots.back || this.hasUnitSlot;
+    },
+    rootClasses() {
+      return {
+        tabPage: this.hasUnitSlot,
+        'level2-content': this.level === 2
+      };
+    },
+    tabClasses() {
+      return {
+        level1: this.level === 1 && this.hasUnitSlot,
+        level2: !(this.level === 1 && this.hasUnitSlot)
+      };
+    },
+    contentClasses() {
+      return {
+        'px-8': this.hasUnitSlot,
+        'bg-white': true
+      };
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tabPage {
+  padding: 0 !important; // 建议审查 !important 的必要性，优先通过提升选择器权重解决样式覆盖问题
+  background: #f0f2f5;
+}
+
+.header {
+  height: 32px;
+  line-height: 32px;
+}
+
+.tab-container {
+  position: relative;
+  height: 0; // 容器不占位
+}
+
+.tab {
+  position: absolute;
+  bottom: -34px;
+  z-index: 1; // 确保 tab 在内容区域之上
+}
+
+.tabPage .tab {
+  bottom: -42px;
+}
+
+.level1 {
+  padding-left: 8px;
+}
+
+.level2 {
+  // 可以保留为空或添加 level2 的特定样式
+}
+
+.content-wrapper {
+  position: relative; // 确保内容在 tab 下方
+}
+
+.level2-content {
+  height: calc(100% - 34px);
+  margin-top: 34px;
+}
+
+.bg-white {
+  background-color: #fff !important; // 建议审查 !important 的必要性
+}
 </style>

package/packages/tab-pane/index.js

@@ -1,8 +1,8 @@
-import TabPane from './src/main';
-
-/* istanbul ignore next */
-TabPane.install = function(Vue) {
-  Vue.component(TabPane.name, TabPane);
-};
-
-export default TabPane;
+import TabPane from './src/main';
+
+/* istanbul ignore next */
+TabPane.install = function(Vue) {
+  Vue.component(TabPane.name, TabPane);
+};
+
+export default TabPane;

package/packages/tab-pane/src/main.vue

@@ -1,186 +1,186 @@
-<template>
-  <div v-if="data.length === 0" class="n20-secondary-tab m-b-s">
-    <div class="el-tabs__item is-active" style="padding: 0;">{{ init }}</div>
-  </div>
-  <div v-else-if="data.length === 1" class="n20-secondary-tab m-b-s">
-    <div class="el-tabs__item is-active" style="padding: 0;">
-      <span v-if="data[0].icon" :class="data[0].icon"></span>
-      <sup v-if="data[0].badge" class="el-tabs__item-badge"></sup>
-      {{ data[0].name }}
-    </div>
-  </div>
-  <el-tabs v-else :value="init" :class="classes" :tabPosition="tabPosition" :before-leave="beforeFn" @tab-click="clickFn">
-    <el-tab-pane
-      v-for="item of data"
-      :key="item.name"
-      :tab-info="item"
-      :name="item.name"
-      :icon="item.icon"
-      :disabled="item.disabled"
-    >
-      <template slot="label">
-        <span v-if="item.icon" :class="item.icon"></span>
-        <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
-        <span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
-        <span v-else>{{ item.name }}</span>
-        <i
-          v-if="item.tips"
-          v-title="item.tips"
-          class="n20-icon-xinxitishi"
-          style="color: var(--color-text-secondary); align-self: flex-start;"
-        ></i>
-      </template>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<script>
-
-export default {
-  name: 'TabPane',
-  props: {
-    data: {
-      type: Array,
-      default: () => []
-    },
-    init: {
-      type: String,
-      default: ''
-    },
-    stop: {
-      type: Boolean,
-      default: false
-    },
-    tabPosition: {
-      type: String,
-      default: 'top'
-    }
-  },
-  computed: {
-    classes(){
-      return {
-        'n20-secondary-tab': true,
-        'm-b-s': this.tabPosition == 'top',
-        'left-css': this.tabPosition == 'left'
-      }
-    }
-  },
-  methods: {
-    getTooltip(name, tips) {
-      return `<el-tooltip content="${tips}">${name}</el-tooltip>`
-    },
-    clickFn(C) {
-      let item = C.$attrs['tab-info']
-      if (this.$listeners['update:init']) {
-        !item.disabled && this.$emit('update:init', item.name)
-      }
-      if (this.$listeners['click']) {
-        this.$emit('click', item)
-      }
-    },
-    beforeFn() {
-      return !this.stop
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tooltip {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 9999;
-  background-color: black;
-  color: white;
-  padding: 5px;
-  font-size: 12px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.tooltip::after {
-  content: '';
-  position: absolute;
-  top: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 5px solid transparent;
-  border-bottom-color: black;
-}
-
-.tooltip.show {
-  opacity: 1;
-}
-.left-css .el-tabs__item.is-active:after{
-  width: 2px;
-  height: 20px!important;
-  margin-top: -22px!important;
-  margin-left: -10px;
-}
-.left-css .el-tabs__item.is-left {
-  text-align: left!important;
-}
-.left-css .el-tabs__header.is-left{
-  margin-right: 0!important;
-  margin-left: 10px!important;
-}
-
-</style>
-
-<style lang="scss">
-
-.n20-secondary-tab {
-  .el-tabs__header {
-    margin-bottom: 0;
-  }
-  .el-tabs__nav-wrap::after {
-    display: none;
-  }
-  .el-tabs__item {
-    font-weight: 400;
-    height: 27px;
-    line-height: 26px;
-    padding: 0 10px;
-    &.is-active {
-      font-weight: 500;
-      &::after {
-        content: '';
-        height: 2px;
-        background-color: #007aff;
-        display: block;
-        margin-top: -1px;
-      }
-    }
-    &.is-disabled {
-      cursor: no-drop;
-      &::after {
-        background-color: #cccccc;
-      }
-    }
-  }
-
-  .el-tabs__item-badge {
-    width: 6px;
-    height: 6px;
-    background: var(--color-danger);
-    position: absolute;
-    right: 6px;
-    top: 2px;
-    border-radius: 3px;
-  }
-  .el-tabs__item.is-top:last-child {
-    .el-tabs__item-badge {
-      right: -4px;
-    }
-  }
-  .el-tabs__active-bar {
-    display: none;
-  }
-
-  .el-tabs__nav-prev,
-  .el-tabs__nav-next {
-    line-height: 28px;
-  }
-}
+<template>
+  <div v-if="data.length === 0" class="n20-secondary-tab m-b-s">
+    <div class="el-tabs__item is-active" style="padding: 0;">{{ init }}</div>
+  </div>
+  <div v-else-if="data.length === 1" class="n20-secondary-tab m-b-s">
+    <div class="el-tabs__item is-active" style="padding: 0;">
+      <span v-if="data[0].icon" :class="data[0].icon"></span>
+      <sup v-if="data[0].badge" class="el-tabs__item-badge"></sup>
+      {{ data[0].name }}
+    </div>
+  </div>
+  <el-tabs v-else :value="init" :class="classes" :tabPosition="tabPosition" :before-leave="beforeFn" @tab-click="clickFn">
+    <el-tab-pane
+      v-for="item of data"
+      :key="item.name"
+      :tab-info="item"
+      :name="item.name"
+      :icon="item.icon"
+      :disabled="item.disabled"
+    >
+      <template slot="label">
+        <span v-if="item.icon" :class="item.icon"></span>
+        <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
+        <span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
+        <span v-else>{{ item.name }}</span>
+        <i
+          v-if="item.tips"
+          v-title="item.tips"
+          class="n20-icon-xinxitishi"
+          style="color: var(--color-text-secondary); align-self: flex-start;"
+        ></i>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+
+export default {
+  name: 'TabPane',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    init: {
+      type: String,
+      default: ''
+    },
+    stop: {
+      type: Boolean,
+      default: false
+    },
+    tabPosition: {
+      type: String,
+      default: 'top'
+    }
+  },
+  computed: {
+    classes(){
+      return {
+        'n20-secondary-tab': true,
+        'm-b-s': this.tabPosition == 'top',
+        'left-css': this.tabPosition == 'left'
+      }
+    }
+  },
+  methods: {
+    getTooltip(name, tips) {
+      return `<el-tooltip content="${tips}">${name}</el-tooltip>`
+    },
+    clickFn(C) {
+      let item = C.$attrs['tab-info']
+      if (this.$listeners['update:init']) {
+        !item.disabled && this.$emit('update:init', item.name)
+      }
+      if (this.$listeners['click']) {
+        this.$emit('click', item)
+      }
+    },
+    beforeFn() {
+      return !this.stop
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tooltip {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  color: white;
+  padding: 5px;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip::after {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-bottom-color: black;
+}
+
+.tooltip.show {
+  opacity: 1;
+}
+.left-css .el-tabs__item.is-active:after{
+  width: 2px;
+  height: 20px!important;
+  margin-top: -22px!important;
+  margin-left: -10px;
+}
+.left-css .el-tabs__item.is-left {
+  text-align: left!important;
+}
+.left-css .el-tabs__header.is-left{
+  margin-right: 0!important;
+  margin-left: 10px!important;
+}
+
+</style>
+
+<style lang="scss">
+
+.n20-secondary-tab {
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+  .el-tabs__item {
+    font-weight: 400;
+    height: 27px;
+    line-height: 26px;
+    padding: 0 10px;
+    &.is-active {
+      font-weight: 500;
+      &::after {
+        content: '';
+        height: 2px;
+        background-color: #007aff;
+        display: block;
+        margin-top: -1px;
+      }
+    }
+    &.is-disabled {
+      cursor: no-drop;
+      &::after {
+        background-color: #cccccc;
+      }
+    }
+  }
+
+  .el-tabs__item-badge {
+    width: 6px;
+    height: 6px;
+    background: var(--color-danger);
+    position: absolute;
+    right: 6px;
+    top: 2px;
+    border-radius: 3px;
+  }
+  .el-tabs__item.is-top:last-child {
+    .el-tabs__item-badge {
+      right: -4px;
+    }
+  }
+  .el-tabs__active-bar {
+    display: none;
+  }
+
+  .el-tabs__nav-prev,
+  .el-tabs__nav-next {
+    line-height: 28px;
+  }
+}
 </style>

package/packages/table-page/index.js

@@ -1,8 +1,8 @@
-import TablePage from './src/main';
-
-/* istanbul ignore next */
-TablePage.install = function(Vue) {
-  Vue.component(TablePage.name, TablePage);
-};
-
-export default TablePage;
+import TablePage from './src/main';
+
+/* istanbul ignore next */
+TablePage.install = function(Vue) {
+  Vue.component(TablePage.name, TablePage);
+};
+
+export default TablePage;