@veltra/desktop 1.0.8 → 1.0.9

package/src/components/tabs/style.scss

@@ -1,193 +1,276 @@
 @use 'pkg:@veltra/styles/mixins' as m;
 @use 'pkg:@veltra/styles/functions' as fn;
-@use 'pkg:@veltra/styles/vars';
-@use 'sass:map';
-@use 'sass:list';
 
-$root-name: tabs;
+/** shadcn 风格 TabsList：hover 背景底色容器 + 白底活动态；rounded=true 时水平为胶囊状。 */
+$list-bg: fn.use-var(bg-color, hover);
+$list-radius: fn.use-var(radius, default);
+$item-radius: calc(fn.use-var(radius, default) - 2px);
+$list-padding: 4px;
+$active-bg: fn.use-var(bg-color, top);
+$active-shadow:
+  0 1px 2px rgba(15, 23, 42, 0.08),
+  0 1px 3px rgba(15, 23, 42, 0.06);
+
+/* ===== 复合标签页：bar + content 布局容器 ===== */
+@include m.b(tabs) {
+  display: flex;
+  gap: fn.use-var(gap, small);
 
-@mixin position($p, $e: ()) {
-  @include m.m($p...) {
-    @if (list.length($e) > 0) {
-      @include m.bem($root-name, $e) {
-        @content;
-      }
-    } @else {
-      @content;
-    }
+  @include m.e(content) {
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 0;
+    border-radius: fn.use-var(radius, default);
   }
-}
-
-@include m.b($root-name) {
-  display: flex;
 
-  @include m.e(header) {
-    flex-shrink: 0;
+  @include m.m(top) {
+    flex-direction: column;
   }
 
-  @include m.e(content) {
-    flex-grow: 1;
+  @include m.m(bottom) {
+    flex-direction: column-reverse;
   }
 
-  @include m.e(header-item) {
-    cursor: pointer;
-    font-weight: 600;
-    letter-spacing: 1px;
-    color: fn.use-var(text-color, main);
-    user-select: none;
-    position: relative;
+  @include m.m(left) {
+    flex-direction: row;
 
-    &::after {
-      content: '';
-      position: absolute;
-      background-color: fn.use-var(color, primary);
-      transition-duration: 0.25s;
-      transition-property: transform;
-      transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+    @include m.bem(tabs, content) {
+      height: 100%;
     }
+  }
 
-    @include m.flex;
+  @include m.m(right) {
+    flex-direction: row-reverse;
 
-    @include m.is(disabled) {
-      color: fn.use-var(text-color, disabled);
-      cursor: not-allowed;
+    @include m.bem(tabs, content) {
+      height: 100%;
     }
+  }
+}
 
-    @include m.is(active) {
-      color: fn.use-var(color, primary);
-    }
+/* ===== 标签栏（独立组件）：水平 / 垂直 ===== */
+@include m.b(tabs-bar) {
+  display: inline-flex;
+  align-self: flex-start;
+  max-width: 100%;
+  min-width: 0;
+  // 仅水平方向内边距；上下空间迁移到 __viewport，避免 __viewport 的 overflow 裁切激活态 box-shadow
+  padding: 0 $list-padding;
+  background-color: $list-bg;
+  border-radius: $list-radius;
+  gap: 2px;
+
+  @include m.m(horizontal) {
+    align-items: center;
+    position: relative;
+    flex-shrink: 0;
   }
 
-  @include m.e(close) {
-    width: 0;
-    transition-property: width, margin-left;
-    transition-duration: 0.25s;
-    margin-left: 0;
+  @include m.m(vertical) {
+    flex-direction: column;
   }
 
-  @include m.e(close-placeholder) {
-    height: 1em;
-    width: 1em;
-    margin-left: fn.use-var(gap, small);
+  @include m.e(viewport) {
+    flex: 1 1 auto;
+    min-width: 0;
+    // 上下 padding 与 overflow-y: hidden 配合：裁切发生在 padding-box 外沿，
+    // 激活 __item 的 box-shadow 得以在 padding 区域内完整渲染
+    padding: $list-padding 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
-  @include position((top, bottom), header) {
-    @include m.flex;
+  @include m.e(list) {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    width: max-content;
+    margin: 0;
+    padding: 0;
+    gap: 2px;
   }
 
-  @include position((top, bottom), header-item) {
-    &::after {
-      bottom: 0;
-      left: 0;
-      height: 2px;
-      width: 100%;
-      transform: scaleX(0);
+  @include m.e(item) {
+    cursor: pointer;
+    font-weight: 500;
+    letter-spacing: 0.25px;
+    color: fn.use-var(text-color, main);
+    user-select: none;
+    position: relative;
+    border-radius: $item-radius;
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+    outline: none;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    transition:
+      color 0.2s ease,
+      background-color 0.2s ease,
+      box-shadow 0.2s ease;
+
+    &:not(.is-active):not(.is-disabled):hover {
+      color: fn.use-var(text-color, title);
     }
 
-    @include m.is(active) {
-      &::after {
-        transform: scaleX(1);
-      }
+    @include m.is(disabled) {
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
     }
-  }
 
-  // 位置上
-  @include position(top) {
-    flex-direction: column;
-  }
-  @include position(top, header) {
-    border-bottom: fn.use-var(border);
+    @include m.is(active) {
+      color: fn.use-var(text-color, title);
+      background-color: $active-bg;
+      box-shadow: $active-shadow;
+    }
   }
 
-  // 位置下
-  @include position(bottom) {
-    flex-direction: column-reverse;
-  }
-  @include position(bottom, header) {
-    border-top: fn.use-var(border);
+  @include m.e(item-label) {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
   }
 
-  @include position(bottom, header-item) {
-    border-radius: 0 0 fn.use-var(radius, large) fn.use-var(radius, large);
-  }
+  // 关闭按钮基础样式；水平 / 垂直布局下的显隐策略不同（见下方各自的修饰符块）
+  @include m.e(close) {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-left: 6px;
+    overflow: hidden;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: fn.use-var(text-color, secondary);
+    cursor: pointer;
+    border-radius: fn.use-var(radius, default);
+    font-size: 12px;
+    line-height: 1;
+    transition:
+      width 0.18s ease,
+      margin-left 0.18s ease,
+      opacity 0.18s ease,
+      transform 0.18s ease,
+      color 0.15s ease,
+      background-color 0.15s ease;
+
+    &:hover {
+      color: fn.use-var(text-color, title);
+      background-color: rgba(15, 23, 42, 0.08);
+    }
 
-  @include position((left, right), content) {
-    height: 100%;
+    &:active {
+      background-color: rgba(15, 23, 42, 0.14);
+    }
   }
 
-  @include position((left, right), header-item) {
-    &::after {
-      top: 0;
-      width: 2px;
-      height: 100%;
-
-      transform: scaleY(0);
-    }
+  // 水平：关闭按钮默认隐藏（宽/透明度为 0），item hover 时渐显
+  @include m.m(horizontal) {
+    @include m.bem(tabs-bar, item) {
+      @include m.bem(tabs-bar, close) {
+        width: 0;
+        margin-left: 0;
+        opacity: 0;
+        transform: scale(0.6);
+        pointer-events: none;
+      }
 
-    @include m.is(active) {
-      &::after {
-        transform: scaleY(1);
+      &:hover {
+        @include m.bem(tabs-bar, close) {
+          width: 16px;
+          margin-left: 6px;
+          opacity: 1;
+          transform: scale(1);
+          pointer-events: auto;
+        }
       }
     }
   }
 
-  // 位置左
-  @include position(left, header) {
-    border-right: fn.use-var(border);
+  // 垂直：关闭按钮常显（用户指定，默认且只能一直显示）
+  @include m.m(vertical) {
+    @include m.bem(tabs-bar, item) {
+      justify-content: space-between;
+    }
   }
 
-  @include position(left, header-item) {
-    border-radius: fn.use-var(radius, large) 0 0 fn.use-var(radius, large);
-    justify-content: flex-end;
-
-    &::after {
-      right: 0;
+  // 导航按钮（仅水平布局渲染）：透明底、hover 时接近 active item 风格
+  @include m.e(nav) {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    cursor: pointer;
+    user-select: none;
+    border-radius: $item-radius;
+    transition:
+      color 0.2s ease,
+      background-color 0.2s ease,
+      box-shadow 0.2s ease,
+      opacity 0.2s ease;
+
+    &:hover:not(:disabled) {
+      color: fn.use-var(text-color, title);
+      background-color: $active-bg;
+      box-shadow: $active-shadow;
     }
-  }
 
-  // 位置右
-  @include position(right) {
-    flex-direction: row-reverse;
-  }
-  @include position(right, header) {
-    border-left: fn.use-var(border);
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
   }
-  @include position(right, header-item) {
-    border-radius: 0 fn.use-var(radius, large) fn.use-var(radius, large) 0;
 
-    &::after {
-      left: 0;
-    }
+  // 填充宽度（仅水平布局生效）：容器铺满父级，items 自身宽度保持不变
+  @include m.is(block) {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    align-self: stretch;
   }
 
-  // 尺寸
   @include m.size using ($size) {
-    @include m.bem($root-name, header-item) {
-      height: fn.use-var(form-component-height, $size);
+    @include m.bem(tabs-bar, item) {
+      height: calc(fn.use-var(form-component-height, $size) - 4px);
       padding: 0 fn.use-var(gap, $size);
-
-      &:hover {
-        @include m.bem($root-name, close) {
-          width: fn.use-var(font-size-main, $size);
-          margin-left: fn.use-var(gap, small);
-        }
-      }
+    }
+    @include m.bem(tabs-bar, nav) {
+      width: calc(fn.use-var(form-component-height, $size) - 4px);
+      height: calc(fn.use-var(form-component-height, $size) - 4px);
     }
   }
 
-  @include m.m(left, right) {
-    @include m.bem($root-name, close) {
-      width: auto;
+  // 胶囊风格：item / nav 始终 pill；容器形状按方向分治——
+  // 水平：容器也变为胶囊；
+  // 垂直：容器保持常规圆角（修复高度较大时 9999px 产生的奇怪形变）。
+  @include m.is(rounded) {
+    @include m.bem(tabs-bar, item) {
+      border-radius: 9999px;
     }
-  }
 
-  @include m.e(content) {
-    width: 100%;
-    border-radius: fn.use-var(radius, default);
+    @include m.bem(tabs-bar, nav) {
+      border-radius: 9999px;
+    }
   }
 
-  @include m.e(ripple) {
-    background-color: fn.use-var(color, primary);
-    opacity: 0.1;
+  @include m.m(horizontal) {
+    @include m.is(rounded) {
+      border-radius: 9999px;
+    }
   }
 }

package/src/components/tabs/tabs-horizontal.vue

@@ -0,0 +1,125 @@
+<template>
+  <div
+    :class="[
+      cls.b,
+      cls.m('horizontal'),
+      cls.m(position),
+      cls.m(size),
+      bem.is('block', block),
+      bem.is('rounded', rounded)
+    ]"
+  >
+    <button
+      v-show="showNav"
+      type="button"
+      :class="[cls.e('nav'), cls.em('nav', 'prev')]"
+      :disabled="!canPrev"
+      @click="scrollByStep(-1)"
+    >
+      <u-icon>
+        <ArrowLeft />
+      </u-icon>
+    </button>
+
+    <div ref="viewportRef" :class="cls.e('viewport')">
+      <div ref="listRef" :class="cls.e('list')">
+        <button
+          type="button"
+          role="tab"
+          v-for="(item, index) in items"
+          :key="item.key"
+          :class="[
+            cls.e('item'),
+            bem.is('active', model === item.key),
+            bem.is('disabled', item.disabled === true)
+          ]"
+          @click.stop="handleClick(item, index)"
+        >
+          <span :class="cls.e('item-label')">{{ item.name ?? item.key }}</span>
+          <span
+            v-if="isItemClosable(item)"
+            role="button"
+            tabindex="0"
+            :class="cls.e('close')"
+            :aria-label="`close ${item.name ?? item.key}`"
+            @click.stop="handleClose(item, index)"
+          >
+            <u-icon>
+              <Close />
+            </u-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <button
+      v-show="showNav"
+      type="button"
+      :class="[cls.e('nav'), cls.em('nav', 'next')]"
+      :disabled="!canNext"
+      @click="scrollByStep(1)"
+    >
+      <u-icon>
+        <ArrowRight />
+      </u-icon>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { ArrowLeft, ArrowRight, Close } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, shallowRef } from 'vue'
+
+import type { ComponentSize, TabItem, TabsHorizontalEmits, TabsHorizontalProps } from '../../types'
+import { UIcon } from '../icon'
+import { useTabsBar } from './use-tabs-bar'
+
+defineOptions({ name: 'TabsHorizontal' })
+
+const props = withDefaults(defineProps<TabsHorizontalProps>(), {
+  position: 'top',
+  closable: false,
+  block: false,
+  rounded: false
+})
+
+const emit = defineEmits<TabsHorizontalEmits>()
+
+const { size } = useFallbackProps([props], {
+  size: 'default' as ComponentSize
+})
+
+const cls = bem('tabs-bar')
+
+const model = defineModel<string>()
+
+const viewportRef = shallowRef<HTMLElement>()
+const listRef = shallowRef<HTMLElement>()
+
+const itemsRef = computed(() => props.items)
+
+const { showNav, canPrev, canNext, scrollByStep } = useTabsBar({
+  viewportRef,
+  listRef,
+  items: itemsRef,
+  model
+})
+
+const isItemClosable = (item: TabItem) => {
+  if (item.disabled) return false
+  return item.closable ?? props.closable
+}
+
+const handleClick = (item: TabItem, index: number) => {
+  if (item.disabled) return
+  model.value = item.key
+  emit('click', item, index)
+}
+
+const handleClose = (item: TabItem, index: number) => {
+  if (item.disabled) return
+  emit('close', item, index)
+}
+</script>

package/src/components/tabs/tabs-vertical.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    :class="[cls.b, cls.m('vertical'), cls.m(position), cls.m(size), bem.is('rounded', rounded)]"
+  >
+    <button
+      type="button"
+      role="tab"
+      v-for="(item, index) in items"
+      :key="item.key"
+      :class="[
+        cls.e('item'),
+        bem.is('active', model === item.key),
+        bem.is('disabled', item.disabled === true)
+      ]"
+      @click.stop="handleClick(item, index)"
+    >
+      <span :class="cls.e('item-label')">{{ item.name ?? item.key }}</span>
+      <span
+        v-if="isItemClosable(item)"
+        role="button"
+        tabindex="0"
+        :class="cls.e('close')"
+        :aria-label="`close ${item.name ?? item.key}`"
+        @click.stop="handleClose(item, index)"
+      >
+        <u-icon>
+          <Close />
+        </u-icon>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { Close } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+
+import type { ComponentSize, TabItem, TabsVerticalEmits, TabsVerticalProps } from '../../types'
+import { UIcon } from '../icon'
+
+defineOptions({ name: 'TabsVertical' })
+
+const props = withDefaults(defineProps<TabsVerticalProps>(), {
+  position: 'left',
+  closable: false,
+  rounded: false
+})
+
+const emit = defineEmits<TabsVerticalEmits>()
+
+const { size } = useFallbackProps([props], {
+  size: 'default' as ComponentSize
+})
+
+const cls = bem('tabs-bar')
+
+const model = defineModel<string>()
+
+const isItemClosable = (item: TabItem) => {
+  if (item.disabled) return false
+  return item.closable ?? props.closable
+}
+
+const handleClick = (item: TabItem, index: number) => {
+  if (item.disabled) return
+  model.value = item.key
+  emit('click', item, index)
+}
+
+const handleClose = (item: TabItem, index: number) => {
+  if (item.disabled) return
+  emit('close', item, index)
+}
+</script>