docs(tabs): [tabs] Add documentation for using tab items (#1107)

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-tabs v-model="activeName">
     <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。</tiny-tab-item>
-    <tiny-tab-item title="数据组件" name="second">
+    <tiny-tab-item title="数据组件" name="second" disabled>
       数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
     <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。</tiny-tab-item>

examples/sites/demos/pc/app/tabs/basic-usage.spec.ts

@@ -7,6 +7,7 @@ test('基本用法', async ({ page }) => {
   const tabs = page.locator('.tiny-tabs')
   const tabItems = tabs.getByRole('tab')
   const item1 = tabItems.nth(0)
+  const item2 = tabItems.nth(1)
   const content = tabs.getByRole('tabpanel')
   const activeBar = tabs.locator('.tiny-tabs__active-bar')
 
@@ -21,4 +22,9 @@ test('基本用法', async ({ page }) => {
   await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
   await expect(item1).toHaveCSS('color', 'rgb(94, 124, 224)')
   await expect(content).toHaveText(/表单组件/)
+
+  // 禁用
+  await item2.click()
+  await expect(item1).toHaveClass(/is-active/)
+  await expect(content).toHaveText(/表单组件/)
 })

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-tabs v-model="activeName">
     <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。</tiny-tab-item>
-    <tiny-tab-item title="数据组件" name="second">
+    <tiny-tab-item title="数据组件" name="second" disabled>
       数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
     <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。</tiny-tab-item>

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

@@ -1,6 +1,12 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item
+      :key="item.name"
+      v-for="item in Tabs"
+      :title="item.title"
+      :name="item.name"
+      :with-close="item.withClose"
+    >
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -35,7 +41,8 @@ const Tabs = ref([
   {
     title: '其他组件',
     name: 'fifth',
-    content: '其他组件，更多种类组件。'
+    content: '其他组件，更多种类组件。',
+    withClose: false
   }
 ])
 const instance = getCurrentInstance()

examples/sites/demos/pc/app/tabs/tabs-events-close.vue

@@ -1,6 +1,12 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item
+      :key="item.name"
+      v-for="item in Tabs"
+      :title="item.title"
+      :name="item.name"
+      :with-close="item.withClose"
+    >
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -41,7 +47,8 @@ export default {
         {
           title: '其他组件',
           name: 'fifth',
-          content: '其他组件，更多种类组件。'
+          content: '其他组件，更多种类组件。',
+          withClose: false
         }
       ]
     }

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

@@ -6,10 +6,10 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': ` <code>Tabs</code> ：通过 <code>v-model</code> 设置选中的页签项，对应 <code>TabItem</code> 页签项中 <code>name</code> 属性的值；<br />
+        'zh-CN': `<div class="tip custom-block"><code>Tabs</code> ：通过 v-model 设置选中的页签项，对应 TabItem 页签项中 name 属性的值；<br />
-        <code>TabItem</code> ：通过 <code>title</code> 设置页签项标题。`,
+        <code>TabItem</code> ：通过 title 设置页签项标题， name 设置页签项的值，disabled 设置页签项禁用，默认插槽自定义对应的内容。</div>`,
-        'en-US': ` <code>Tabs</code> :Set the selected tag item through the <code>v-model</code> , corresponding to the value of the <code>name</code> attribute in the <code>TabItem</code> tag item;<br/>
+        'en-US': `<div class="tip custom-block"><p> <code>Tabs</code> :Set the selected tag item through the v-model , corresponding to the value of the name attribute in the TabItem tag item;<br/>
-        <code>TabItem</code> :Set the label item title through <code>title</code> .`
+        <code>TabItem</code> :Set the label item title through title .nameSet the value of tab items.disabledSet tab items to be disabled.Customize the corresponding content for the default slot.</div>`
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -441,6 +441,81 @@ export default {
           'demoId': 'custom-tab-title'
         }
       ]
+    },
+    {
+      'name': 'tab-item',
+      'type': 'component',
+      'props': [
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '设置页签项禁用，设置为 true 则无法点击',
+            'en-US': 'Set tab items to disable, set to true to prevent clicking'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'lazy',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '设置本页签项内容是否为懒加载，默认为否',
+            'en-US': 'Set whether the content of this tab is lazy loading, default to no'
+          },
+          'demoId': 'lazy'
+        },
+        {
+          'name': 'name',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '页签项的值', 'en-US': 'Value of tab items' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'title',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '页签项标题', 'en-US': 'Tab Item Title' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'with-close',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '页签项是否展示删除按钮，与 Tabs 的 with-close 取或，只要有一个为true，则此项展示删除按钮',
+            'en-US': `Does the tab item display a delete button, which is equal to or greater than the 'with close' option in Tabs? As long as one of these options is true, this option displays the delete button`
+          },
+          'demoId': 'tabs-events-close'
+        }
+      ],
+      'events': [
+        {
+          'name': 'tab-nav-update',
+          'type': '() => void',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '当页签项的 title 值发生变化时触发',
+            'en-US': 'Triggered when the title value of the tab item changes'
+          },
+          'demoId': ''
+        }
+      ],
+      'slots': [
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '页签项对应内容部分的默认插槽，用来自定义页签项对应的页面内容',
+            'en-US':
+              'The default slot for the content section corresponding to the tab item, used to customize the page content corresponding to the tab item'
+          },
+          'demoId': 'basic-usage'
+        }
+      ]
     }
   ],
   types: [

packages/vue/src/tab-item/src/index.ts

@@ -10,7 +10,6 @@ export const tabItemProps = {
     default: () => $constants
   },
   title: String,
-  labelContent: Function,
   name: String,
   withClose: Boolean,
   disabled: Boolean,

packages/vue/src/tab-item/src/pc.vue

@@ -31,9 +31,9 @@ import type { ITabItemApi } from '@opentiny/vue-renderless/types/tab-item.type'
 export default defineComponent({
   name: $prefix + 'TabItem',
   componentName: 'TabItem',
+  emits: ['tab-nav-update'],
   props: {
     title: String,
-    labelContent: Function,
     name: String,
     withClose: Boolean,
     disabled: Boolean,