feat(tabs): [tabs] Add new specification function (#1762)

* feat(tabs): 刷新页签规范，新增几种类型的禁用功能

* feat(tabs): 刷新页签规范，新增small模式类型

examples/sites/demos/apis/tabs.js

@@ -178,13 +178,11 @@ export default {
           type: "'small' | 'large'",
           defaultValue: '',
           desc: {
-            'zh-CN':
+            'zh-CN': '设置 tabs 页签尺寸,该属性可选值为 large 或 small',
-              '设置 tabs 页签尺寸,该属性可选值为 large 或 small，其中 small 在 tabStyle 为 card 或者 border-card 时生效',
+            'en-US': 'Sets the tab size. The value can be large or small'
-            'en-US':
-              'Sets the tab size. The value can be large or small. This parameter is valid only when tabStyle is set to card or border-card'
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'tab-style-card',
+          pcDemo: 'size',
           mfDemo: ''
         },
         {

examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue

@@ -16,7 +16,7 @@ import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
 const activeName = ref('second')
 </script>
 
-<style>
+<style scoped>
 .pc-demo .tiny-tabs__content {
   line-height: 2;
 }

examples/sites/demos/pc/app/tabs/basic-usage.vue

@@ -25,7 +25,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .pc-demo .tiny-tabs__content {
   line-height: 2;
 }

examples/sites/demos/pc/app/tabs/size-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <tiny-tabs v-model="activeName" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" separator size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref, reactive } from 'vue'
+import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+
+const activeName = ref('1')
+const Tabs = reactive([])
+
+// 创建tabs
+for (let i = 1; i < 5; i++) {
+  const title = `Tab ${i}`
+  Tabs.push({
+    title,
+    name: i + '',
+    content: `${title} content `
+  })
+}
+</script>

examples/sites/demos/pc/app/tabs/size.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('小尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tabs#size')
+
+  const headerBox = page.locator('.tiny-tabs .tiny-tabs__nav-scroll')
+
+  await expect(headerBox.nth(0)).toHaveCSS('height', '40px')
+  await expect(headerBox.nth(0)).toHaveCSS('font-size', '16px')
+  await expect(headerBox.nth(1)).toHaveCSS('height', '24px')
+  await expect(headerBox.nth(1)).toHaveCSS('font-size', '14px')
+  await expect(headerBox.nth(2)).toHaveCSS('height', '24px')
+  await expect(headerBox.nth(2)).toHaveCSS('font-size', '12px')
+})

examples/sites/demos/pc/app/tabs/size.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <tiny-tabs v-model="activeName" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" separator size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tabs, TabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  },
+  data() {
+    return {
+      activeName: '1',
+      Tabs: []
+    }
+  },
+  created() {
+    // 创建tabs
+    for (let i = 1; i < 5; i++) {
+      const title = `Tab ${i}`
+      this.Tabs.push({
+        title,
+        name: i + '',
+        content: `${title} content `
+      })
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/tabs/tabs-second-layer-composition-api.vue

@@ -90,7 +90,6 @@ const tabs = ref([
 
 <style scoped>
 .item {
-  width: 14px;
   padding: 0 8px;
   text-align: center;
   font-weight: normal;

examples/sites/demos/pc/app/tabs/tabs-second-layer.vue

@@ -99,7 +99,6 @@ export default {
 
 <style scoped>
 .item {
-  width: 14px;
   padding: 0 8px;
   text-align: center;
   font-weight: normal;

examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue

@@ -8,7 +8,9 @@
         数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
       <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth" disabled>
+        业务组件,与业务紧密相关实现某种业务功能的组件集。
+      </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
     <tiny-tabs v-model="activeName2" separator size="large">

examples/sites/demos/pc/app/tabs/tabs-separator.vue

@@ -8,7 +8,9 @@
         数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
       <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth" disabled>
+        业务组件,与业务紧密相关实现某种业务功能的组件集。
+      </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
     <tiny-tabs v-model="activeName2" separator size="large">

examples/sites/demos/pc/app/tabs/webdoc/tabs.js

@@ -56,6 +56,18 @@ export default {
       },
       codeFiles: ['tabs-separator.vue']
     },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'Size'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>size</code> 改变尺寸。</p>\n',
+        'en-US': '<p>Use <code>size</code> to set the size.</p>\n'
+      },
+      codeFiles: ['size.vue']
+    },
     {
       demoId: 'custom-more-icon',
       name: {

examples/sites/src/views/components/components.vue

@@ -791,7 +791,8 @@ export default defineComponent({
       }
     }
 
-    :deep(.tiny-tabs__content) {
+    & > :deep(.tiny-tabs__content) {
+      // 不能影响到tabs组件的样式
       margin: 0;
       overflow: visible;
     }

packages/theme/src/tabs/index.less

@@ -224,9 +224,10 @@
     }
   }
 
-  &__item-separator-space {
+  & &__item-separator-space {
-    padding-left: 14px;
+    height: var(--ti-tabs-header-separator-item-height);
-    padding-right: 14px;
+    padding-left: calc(var(--ti-tabs-header-separator-padding-horizontal) + 1px);
+    padding-right: var(--ti-tabs-header-separator-padding-horizontal);
   }
 
   &__item-title {
@@ -250,6 +251,10 @@
     align-items: center;
     position: relative;
 
+    &-separator-space {
+      color: var(--ti-tabs-header-separator-normal-text-color);
+    }
+
     &:focus,
     &:active {
       outline: 0;
@@ -268,6 +273,10 @@
     // aurora新增
     &.is-active {
       font-weight: var(--ti-tabs-header-font-weight-active);
+
+      &.is-disabled:hover {
+        font-weight: var(--ti-tabs-header-font-weight-active);
+      }
     }
 
     // smb新增
@@ -276,8 +285,12 @@
     }
 
     &.is-disabled {
+      cursor: not-allowed;
       color: var(--ti-tabs-item-disabled-text-color);
-      cursor: default;
+
+      &:hover {
+        font-weight: normal;
+      }
 
       .@{tabs-prefix-cls}__icon-close {
         &,
@@ -605,6 +618,15 @@
       line-height: var(--ti-tabs-button-card-item-height);
       border: 1px solid transparent;
 
+      &.is-disabled {
+        color: var(--ti-tabs-item-disabled-text-color);
+
+        &:hover {
+          font-weight: normal;
+          color: var(--ti-tabs-item-disabled-text-color);
+        }
+      }
+
       &:hover {
         color: var(--ti-tabs-button-card-item-hover-text-color);
         font-weight: var(--ti-tabs-button-card-font-weight);
@@ -668,12 +690,34 @@
     .@{tabs-prefix-cls}__item {
       height: var(--ti-tabs-small-height);
       line-height: var(--ti-tabs-small-height);
+      font-size: var(--ti-tabs-small-item-font-size);
+
+      &.@{tabs-prefix-cls}__item-separator-space {
+        height: var(--ti-tabs-small-separator-height);
+        line-height: var(--ti-tabs-small-separator-height);
       }
+    }
+
     .@{tabs-prefix-cls}__nav-prev,
     .@{tabs-prefix-cls}__nav-next {
       line-height: var(--ti-tabs-small-height);
       font-size: var(--ti-tabs-prev-next-btn-icon-size);
     }
+
+    .@{tabs-prefix-cls}__nav.is-show-active-bar
+      .@{tabs-prefix-cls}__item:not(.@{tabs-prefix-cls}__item-separator-space) {
+      margin-right: var(--ti-tabs-small-item-margin-right);
+    }
+
+    &.@{tabs-prefix-cls}--top .@{tabs-prefix-cls}__item-separator {
+      left: calc(var(--ti-tabs-small-separator-padding-horizontal) + 1px);
+    }
+
+    &.@{tabs-prefix-cls}--button-card .@{tabs-prefix-cls}__item {
+      height: var(--ti-tabs-small-button-card-height);
+      line-height: var(--ti-tabs-small-button-card-height);
+      font-size: var(--ti-tabs-small-button-card-font-size);
+    }
   }
 
   // 竖排tab页签
@@ -1233,9 +1277,22 @@
     height: 12px;
     display: inline-block;
     position: relative;
-    left: 14px;
+    left: calc(var(--ti-tabs-header-separator-padding-horizontal) + 1px);
     top: 2px;
-    background-color: #dfdfdf;
+    background-color: var(--ti-tabs-header-separator-bg-color);
+  }
+
+  &&--top &--button-card &__item &__item-separator {
+    height: 16px;
+  }
+
+  &&--top &--button-card &__item:last-child &__item-separator,
+  &&--top &--button-card &__item.is-active &__item-separator {
+    display: none;
+  }
+
+  &&--top &--button-card &__item:not(.is-active) &__item-separator {
+    left: 1px;
   }
 
   &&--top,
@@ -1248,12 +1305,21 @@
     }
 
     // 这里会涉及到tiny-tabs__item-base的样式，尽量不要同步
-    &:not(.@{tabs-prefix-cls}--card):not(.@{tabs-prefix-cls}--border-card) .@{tabs-prefix-cls}__item {
+    &.@{tabs-prefix-cls}--small:not(.@{tabs-prefix-cls}--card):not(.@{tabs-prefix-cls}--border-card)
-      padding-left: 0;
+      .@{tabs-prefix-cls}__item {
-
       &-separator-space {
-        padding-left: 14px;
+        padding-left: var(--ti-tabs-small-separator-padding-horizontal);
-        padding-right: 14px;
+        padding-right: var(--ti-tabs-small-separator-padding-horizontal);
+        margin-right: 1px;
+      }
+    }
+
+    // 这里会涉及到tiny-tabs__item-base的样式，尽量不要同步
+    &:not(.@{tabs-prefix-cls}--card):not(.@{tabs-prefix-cls}--border-card) .@{tabs-prefix-cls}__item {
+      &-separator-space {
+        padding-left: var(--ti-tabs-header-separator-padding-horizontal);
+        padding-right: var(--ti-tabs-header-separator-padding-horizontal);
+        margin-right: 1px;
 
         &:nth-child(2) {
           margin-left: 0px;
@@ -1267,10 +1333,6 @@
       &.is-left {
         padding: 0 24px;
       }
-
-      &:nth-child(2) {
-        padding-left: 0;
-      }
     }
   }
 

packages/theme/src/tabs/smb-theme.js

@@ -1,5 +1,5 @@
 export const tinyTabsSmbTheme = {
-  'ti-tabs-height': 'var(--ti-common-size-13x)',
+  'ti-tabs-height': 'var(--ti-common-size-12x)',
   'ti-tabs-dark-item-height': 'calc(var(--ti-common-size-base) * 11.75)',
   'ti-tabs-header-font-weight-active': 'var(--ti-common-font-weight-bold)',
   'ti-tabs-item-font-size': 'var(--ti-common-font-size-2)',

packages/theme/src/tabs/vars.less

@@ -29,8 +29,8 @@
   --ti-tabs-new-svg-text-color: var(--ti-common-color-placeholder, #adb0b8);
   // 标签栏更多文字悬浮文本色
   --ti-tabs-more-hover-text-color: var(--ti-common-color-primary-hover, #7693f5);
-  // 标签页选项禁用色(hide)
+  // 标签页选项禁用色
-  --ti-tabs-item-disabled-text-color: #b4bccc;
+  --ti-tabs-item-disabled-text-color: var(--ti-common-color-text-link-darkbg-hover, #beccfa);
   // 标签页新增按钮圆角
   --ti-tabs-new-border-radius: var(--ti-common-border-radius-normal, 2px);
   // 标签页下拉框背景色(hide)
@@ -45,12 +45,32 @@
   --ti-tabs-height: var(--ti-common-size-10x, 40px);
   // card类型未选中项文本色
   --ti-tabs-header-font-normal-text-color: var(--ti-common-color-text-primary, #252b3a);
+  // 分隔符类型未选中项文本色
+  --ti-tabs-header-separator-normal-text-color: var(--ti-common-color-text-secondary, #575d6c);
+  // 分隔符类型标签项水平内边距
+  --ti-tabs-header-separator-padding-horizontal: var(--ti-common-space-4x, 16px);
+  // 分隔符类型标签项高度
+  --ti-tabs-header-separator-item-height: var(--ti-common-space-8x, 32px);
+  // 分隔符背景色
+  --ti-tabs-header-separator-bg-color: var(--ti-common-scrollbar-thumb-bg-color, #bfbfbf);
   // card类型选中项下边框色(hide)
   --ti-tabs-dropdown-li-border-color: #e6e6e6;
   // card类型选中项顶部块背景色
   --ti-tabs-header-top-bar-active-bg-color: var(--ti-common-color-line-active, #5e7ce0);
-  // card类型samll尺寸标签栏高度
+  // card类型small尺寸标签栏高度
-  --ti-tabs-small-height: var(--ti-common-size-9x, 36px);
+  --ti-tabs-small-height: var(--ti-common-size-10x, 40px);
+  // 分隔符类型small尺寸标签栏高度
+  --ti-tabs-small-separator-height: var(--ti-common-line-height-2, 24px);
+  // button-card类型small尺寸标签栏高度
+  --ti-tabs-small-button-card-height: var(--ti-common-line-height-2, 24px);
+  // button-card类型small尺寸标签栏字号
+  --ti-tabs-small-button-card-font-size: var(--ti-common-font-size-0, 12px);
+  // card类型small尺寸标签项右外边距(new)
+  --ti-tabs-small-item-margin-right: var(--ti-common-size-6x, 24px);
+  // card类型small尺寸标签项水平内边距(new)
+  --ti-tabs-small-separator-padding-horizontal: var(--ti-common-size-3x, 12px);
+  // card类型small尺寸标签项字号(new)
+  --ti-tabs-small-item-font-size: var(--ti-common-font-size-1, 14px);
   // card类型标签项水平内边距
   --ti-tabs-item-padding-horizontal: var(--ti-common-space-3x, 12px);
   // card类型选中项底部小滑块厚度(hide)
@@ -68,7 +88,8 @@
   // card类型标签项悬浮字重
   --ti-tabs-item-card-hover-font-weight: var(--ti-common-font-weight-5, 500);
   // bordercard类型选中项圆角
-  --ti-tabs-dark-border-radius: var(--ti-common-border-radius-normal, 2px) var(--ti-common-border-radius-normal, 2px) 0 0;
+  --ti-tabs-dark-border-radius: var(--ti-common-border-radius-normal, 2px) var(--ti-common-border-radius-normal, 2px) 0
+    0;
   // bordercard类型选中项文本色
   --ti-tabs-dark-text-color-active: var(--ti-common-color-text-primary, #252b3a);
   // bordercard类型选中项背景色
@@ -146,7 +167,7 @@
   // 内容水平外边距
   --ti-tabs-content-margin-horizontal: var(--ti-common-space-6x, 24px);
   // buttoncard类型标签栏背景色
-  --ti-tabs-button-card-nav-bg-color: rgba(0, 0, 0, 0.05);
+  --ti-tabs-button-card-nav-bg-color: var(--ti-common-color-bg-6, rgba(0, 0, 0, 0.05));
   // buttoncard类型选项文本色
   --ti-tabs-button-card-item-text-color: #595959;
   // buttoncard类型选项悬浮文本色

packages/theme/src/theme/smb-theme/index.js

@@ -163,6 +163,7 @@ export const tinyBaseSmbTheme = {
   'ti-common-bg-primary': 'var(--ti-common-color-bg-primary)',
   'ti-common-bg-primary-hover': 'var(--ti-common-color-bg-primary-hover)',
   'ti-common-bg-primary-active': 'var(--ti-common-color-bg-primary-active)',
+  'ti-common-color-bg-6': 'var(--ti-base-color-bg-6)', // smb新增标签背景色
 
   // 图表色
   'ti-common-color-data-1': 'var(--ti-base-color-icon-info)',

packages/vue/src/tabs/src/tab-nav/pc.vue

@@ -247,7 +247,11 @@ export default defineComponent({
             }
           }
         },
-        [overflowTitle ? getTabTitle(tabLabelContent) : tabLabelContent, btnClose, state.separator && itemsSeparator]
+        [
+          overflowTitle ? getTabTitle(tabLabelContent) : tabLabelContent,
+          btnClose,
+          (state.separator || tabStyle === 'button-card') && itemsSeparator
+        ]
       )
     })