feat(tab-nav): add prefix and suffix slots

components/tab-nav/tab-nav.vue

@@ -1,7 +1,21 @@
 <template>
   <div ref="wrapper" :class="className" tabindex="-1">
     <ul :class="nh.be('list')" role="tablist">
+      <ResizeObserver :on-resize="updateMarkerPosition">
+        <li :class="[nh.be('extra'), nh.bem('extra', 'prefix')]">
+          <div v-if="$slots.prefix" :class="nh.be('prefix')">
+            <slot name="prefix"></slot>
+          </div>
+        </li>
+      </ResizeObserver>
       <slot></slot>
+      <ResizeObserver :on-resize="updateMarkerPosition">
+        <li :class="[nh.be('extra'), nh.bem('extra', 'suffix')]">
+          <div v-if="$slots.suffix" :class="nh.be('suffix')">
+            <slot name="suffix"></slot>
+          </div>
+        </li>
+      </ResizeObserver>
     </ul>
     <div v-if="!props.card" :class="nh.be('track')" :style="markerStyle">
       <slot name="marker">
@@ -13,6 +27,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, reactive, computed, watch, onMounted, provide } from 'vue'
+import { ResizeObserver } from '@/components/resize-observer'
 import { useNameHelper, useProps, booleanProp, eventProp, emitEvent } from '@vexip-ui/config'
 import { useDisplay } from '@vexip-ui/hooks'
 import { isNull, debounceMinor } from '@vexip-ui/utils'
@@ -22,6 +37,9 @@ import type { ItemState } from './symbol'
 
 export default defineComponent({
   name: 'TabNav',
+  components: {
+    ResizeObserver
+  },
   props: {
     active: [String, Number],
     card: booleanProp,
@@ -137,7 +155,9 @@ export default defineComponent({
       className,
       markerStyle,
 
-      wrapper
+      wrapper,
+
+      updateMarkerPosition
     }
   }
 })

docs/demos/tab-nav/api.en-US.md

@@ -11,6 +11,14 @@
 | ------ | ----------------------------------------------------------------------------------------------- | --------------------------- | ----- |
 | change | Emitted when the active navigation changes, returns the name of the currently active navigation | `(label: string \| number)` | -     |
 
+### TabNav Slots
+
+| Name    | Description                  | Parameters | Since   |
+| ------- | ---------------------------- | ---------- | ------- |
+| default | Slot of tab nav content      | -          | -       |
+| prefix  | Slot of prefix extra content | -          | `2.0.7` |
+| suffix  | Slot of suffix extra content | -          | `2.0.7` |
+
 ### TabNavItem Props
 
 | Name     | Type               | Description                                                    | Default | Since |

docs/demos/tab-nav/api.zh-CN.md

@@ -11,6 +11,14 @@
 | ------ | -------------------------------------------------- | --------------------------- | ---- |
 | change | 当激活的导航发生变化时触发，返回当前激活导航的名字 | `(label: string \| number)` | -    |
 
+### TabNav 插槽
+
+| 名称    | 说明             | 参数 | 始于    |
+| ------- | ---------------- | ---- | ------- |
+| default | 导航的内容插槽   | -    | -       |
+| prefix  | 导航前置内容插槽 | -    | `2.0.7` |
+| suffix  | 导航后置内容插槽 | -    | `2.0.7` |
+
 ### TabNavItem 属性
 
 | 名称     | 类型               | 说明                                            | 默认值  | 始于 |

docs/demos/tab-nav/demos-meta.json

@@ -1 +1 @@
-["basis", "card", "disabled", "icon"]
+["basis", "card", "disabled", "icon", "extra"]

docs/demos/tab-nav/extra/demo.en-US.vue

@@ -0,0 +1,23 @@
+<template>
+  <TabNav>
+    <template #prefix>
+      <Button size="small">
+        Prefix Extra Action
+      </Button>
+    </template>
+    <TabNavItem label="Tab 1">
+      Tab 1
+    </TabNavItem>
+    <TabNavItem label="Tab 2">
+      Tab 2
+    </TabNavItem>
+    <TabNavItem label="Tab 3">
+      Tab 3
+    </TabNavItem>
+    <template #suffix>
+      <Button size="small">
+        Suffix Extra Action
+      </Button>
+    </template>
+  </TabNav>
+</template>

docs/demos/tab-nav/extra/demo.zh-CN.vue

@@ -0,0 +1,23 @@
+<template>
+  <TabNav>
+    <template #prefix>
+      <Button size="small">
+        前置操作
+      </Button>
+    </template>
+    <TabNavItem label="标签页1">
+      标签页1
+    </TabNavItem>
+    <TabNavItem label="标签页2">
+      标签页2
+    </TabNavItem>
+    <TabNavItem label="标签页3">
+      标签页3
+    </TabNavItem>
+    <template #suffix>
+      <Button size="small">
+        后置操作
+      </Button>
+    </template>
+  </TabNav>
+</template>

docs/demos/tab-nav/extra/desc.en-US.md

@@ -0,0 +1,3 @@
+### Extra Content
+
+You can add extra content to the front and rear respectively via `prefix` and `suffix` slots.

docs/demos/tab-nav/extra/desc.zh-CN.md

@@ -0,0 +1,3 @@
+### 附加内容
+
+通过 `prefix` 和 `suffix` 插槽可以分别在前后两端添加附加内容。

style/tab-nav.scss

@@ -24,12 +24,11 @@ $tab-nav: map.merge(
     card-b-color-disabled: get-css-var('tab-nav-card-b-color'),
     card-border: get-css-var('border-shape') get-css-var('tab-nav-card-b-color'),
     card-radius: get-css-var('radius-base'),
-    item-span: 4px,
+    item-pad-width: 4px,
     marker-bg-color: get-css-var('tab-nav-color-active'),
     marker-height: 2px,
     v-padding: 8px,
-    h-padding: 16px,
-    padding: get-css-var('tab-nav-v-padding') get-css-var('tab-nav-h-padding')
+    h-padding: 16px
   ),
   $tab-nav
 );
@@ -48,20 +47,49 @@ $tab-nav: map.merge(
   &__list {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-end;
+    width: 100%;
+    height: 100%;
     padding: 0;
     margin: 0;
     list-style: none;
   }
 
+  &__extra {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    border-bottom: get-css-var('tab-nav-divider');
+
+    &--suffix {
+      flex: 1 0 auto;
+      justify-content: flex-end;
+    }
+  }
+
+  &__prefix,
+  &__suffix {
+    padding: get-css-var('tab-nav-v-padding') get-css-var('tab-nav-h-padding');
+  }
+
+  &__prefix {
+    padding-left: 3px;
+  }
+
+  &__suffix {
+    padding-right: 3px;
+  }
+
   &__item {
     display: flex;
   }
 
   &__content {
     position: relative;
     display: flex;
-    padding: get-css-var('tab-nav-padding');
+    align-items: center;
+    justify-content: center;
+    padding: get-css-var('tab-nav-v-padding') get-css-var('tab-nav-h-padding');
     color: get-css-var('tab-nav-color');
     cursor: pointer;
     user-select: none;
@@ -84,14 +112,7 @@ $tab-nav: map.merge(
     }
   }
 
-  &__pad {
-    width: get-css-var('tab-nav-item-span');
-    pointer-events: none;
-    border-bottom: get-css-var('tab-nav-divider');
-  }
-
   &--card &__content {
-    // margin-right: 4px;
     color: get-css-var('tab-nav-card-color');
     background-color: get-css-var('tab-nav-card-bg-color');
     border: get-css-var('tab-nav-card-border');
@@ -121,7 +142,18 @@ $tab-nav: map.merge(
     }
   }
 
-  &__item:first-child &__pad {
+  &__pad {
+    display: none;
+    width: get-css-var('tab-nav-item-pad-width');
+    pointer-events: none;
+    border-bottom: get-css-var('tab-nav-divider');
+  }
+
+  &--card &__pad {
+    display: block;
+  }
+
+  &__item:nth-child(2) &__pad {
     display: none;
   }