@veltra/desktop 1.0.8 → 1.0.9

package/dist/components/table/use-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table.js","names":[],"sources":["../../../src/components/table/use-table.ts"],"sourcesContent":["import { o } from '@cat-kit/core'\nimport { bem, type BEM } from '@veltra/utils'\nimport { useSlots, type Ref } from 'vue'\n\nimport type {\n  TableColumnRenderContext,\n  TableColumnSlotsScope,\n  TableProps,\n  TableRow,\n  RenderReturn,\n  TableRowSlotsScope\n} from '../../types'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n  props: TableProps\n  cls: BEM<'table'>\n  leftFixed: Ref<boolean>\n  rightFixed: Ref<boolean>\n}\n\ninterface UseTableReturn {\n  getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn\n  getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn\n  getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn\n  getCellClass: (column: ColumnNode) => string\n  getHeaderCellClass: (column: ColumnNode) => string\n  getCellCtx: (\n    row: TableRow,\n    column: ColumnNode\n  ) => TableColumnSlotsScope | TableColumnRenderContext\n}\n\nexport function useTable(options: Options): UseTableReturn {\n  const { props, cls, leftFixed, rightFixed } = options\n\n  const slots = useSlots()\n\n  const getColumnSlotsNode = (\n    ctx: TableColumnSlotsScope | TableColumnRenderContext\n  ): RenderReturn => {\n    const column = ctx.column.data\n\n    const { render, key } = column\n\n    if (render) return render(ctx)\n\n    const slotsRender = props.slots?.[`column:${key}`] ?? slots[`column:${key}`]\n\n    if (slotsRender) return slotsRender(ctx)\n\n    return ctx.val\n  }\n\n  const getHeaderSlotsNode = (ctx: { column: ColumnNode }): RenderReturn => {\n    const column = ctx.column.data\n    const { nameRender, key } = column\n\n    if (nameRender) return nameRender(ctx)\n\n    const slotsRender = props.slots?.[`header:${key}`] ?? slots[`header:${key}`]\n\n    if (slotsRender) return slotsRender(ctx)\n\n    return column.name\n  }\n\n  const getExpandRowSlotsNode = (ctx: TableRowSlotsScope): RenderReturn => {\n    const slotsRender = props.slots?.['row:expand'] ?? slots['row:expand']\n\n    if (slotsRender) return slotsRender(ctx)\n    return null\n  }\n\n  const cellCls = cls.e('cell')\n\n  const getCommonClassName = (column: ColumnNode): string => {\n    const classList: string[] = [cellCls]\n\n    leftFixed.value && column.isLastFixed && classList.push(bem.is('last-fixed'))\n\n    rightFixed.value && column.isFirstFixed && classList.push(bem.is('first-fixed'))\n\n    if (column.fixed) {\n      classList.push(bem.is('fixed-' + column.fixed))\n    }\n    return classList.join(' ')\n  }\n\n  const getCellClass = (column: ColumnNode): string => {\n    return getCommonClassName(column) + ` ${bem.is(column.align)}`\n  }\n\n  const getHeaderCellClass = (column: ColumnNode): string => {\n    return getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`\n  }\n\n  const getCellCtx = (\n    row: TableRow,\n    column: ColumnNode\n  ): TableColumnSlotsScope | TableColumnRenderContext => {\n    const rowData = row.data\n    const val = column.key ? o(rowData).get(column.key) : undefined\n\n    const ctx = {\n      row,\n      column,\n      rowData,\n      val,\n      model: {\n        modelValue: val,\n        'onUpdate:modelValue': (val: any) => {\n          rowData[column.key] = val\n        }\n      }\n    }\n\n    return ctx\n  }\n\n  return {\n    /**\n     * 获取列插槽VNode\n     * @param ctx 列渲染上下文\n     */\n    getColumnSlotsNode,\n    /**\n     * 获取表头插槽VNode\n     * @param ctx 表头渲染上下文\n     */\n    getHeaderSlotsNode,\n    /**\n     * 获取展开行插槽VNode\n     * @param ctx 展开行渲染上下文\n     */\n    getExpandRowSlotsNode,\n    /**\n     * 获取单元格类名\n     * @param column 列\n     */\n    getCellClass,\n    /**\n     * 获取表头单元格类名\n     * @param column 列\n     */\n    getHeaderCellClass,\n    /**\n     * 获取单元格上下文\n     * @param row 行\n     * @param column 列\n     */\n    getCellCtx\n  }\n}\n"],"mappings":";;;;AAiCA,SAAgB,SAAS,SAAkC;CACzD,MAAM,EAAE,OAAO,KAAK,WAAW,eAAe;CAE9C,MAAM,QAAQ,UAAU;CAExB,MAAM,sBACJ,QACiB;EAGjB,MAAM,EAAE,QAAQ,QAFD,IAAI,OAAO;AAI1B,MAAI,OAAQ,QAAO,OAAO,IAAI;EAE9B,MAAM,cAAc,MAAM,QAAQ,UAAU,UAAU,MAAM,UAAU;AAEtE,MAAI,YAAa,QAAO,YAAY,IAAI;AAExC,SAAO,IAAI;;CAGb,MAAM,sBAAsB,QAA8C;EACxE,MAAM,SAAS,IAAI,OAAO;EAC1B,MAAM,EAAE,YAAY,QAAQ;AAE5B,MAAI,WAAY,QAAO,WAAW,IAAI;EAEtC,MAAM,cAAc,MAAM,QAAQ,UAAU,UAAU,MAAM,UAAU;AAEtE,MAAI,YAAa,QAAO,YAAY,IAAI;AAExC,SAAO,OAAO;;CAGhB,MAAM,yBAAyB,QAA0C;EACvE,MAAM,cAAc,MAAM,QAAQ,iBAAiB,MAAM;AAEzD,MAAI,YAAa,QAAO,YAAY,IAAI;AACxC,SAAO;;CAGT,MAAM,UAAU,IAAI,EAAE,OAAO;CAE7B,MAAM,sBAAsB,WAA+B;EACzD,MAAM,YAAsB,CAAC,QAAQ;AAErC,YAAU,SAAS,OAAO,eAAe,UAAU,KAAK,IAAI,GAAG,aAAa,CAAC;AAE7E,aAAW,SAAS,OAAO,gBAAgB,UAAU,KAAK,IAAI,GAAG,cAAc,CAAC;AAEhF,MAAI,OAAO,MACT,WAAU,KAAK,IAAI,GAAG,WAAW,OAAO,MAAM,CAAC;AAEjD,SAAO,UAAU,KAAK,IAAI;;CAG5B,MAAM,gBAAgB,WAA+B;AACnD,SAAO,mBAAmB,OAAO,GAAG,IAAI,IAAI,GAAG,OAAO,MAAM;;CAG9D,MAAM,sBAAsB,WAA+B;AACzD,SAAO,mBAAmB,OAAO,GAAG,IAAI,IAAI,GAAG,OAAO,YAAY;;CAGpE,MAAM,cACJ,KACA,WACqD;EACrD,MAAM,UAAU,IAAI;EACpB,MAAM,MAAM,OAAO,MAAM,EAAE,QAAQ,CAAC,IAAI,OAAO,IAAI,GAAG,KAAA;AAetD,SAbY;GACV;GACA;GACA;GACA;GACA,OAAO;IACL,YAAY;IACZ,wBAAwB,QAAa;AACnC,aAAQ,OAAO,OAAO;;IAEzB;GACF;;AAKH,QAAO;EAKL;EAKA;EAKA;EAKA;EAKA;EAMA;EACD"}
+{"version":3,"file":"use-table.js","names":[],"sources":["../../../src/components/table/use-table.ts"],"sourcesContent":["import { o } from '@cat-kit/core'\nimport { bem, type BEM } from '@veltra/utils'\nimport { useSlots, watch, type Ref } from 'vue'\n\nimport type {\n  TableColumnRenderContext,\n  TableColumnSlotsScope,\n  TableProps,\n  TableRow,\n  RenderReturn,\n  TableRowSlotsScope\n} from '../../types'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n  props: TableProps\n  cls: BEM<'table'>\n  leftFixed: Ref<boolean>\n  rightFixed: Ref<boolean>\n}\n\ninterface UseTableReturn {\n  getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn\n  getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn\n  getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn\n  getCellClass: (column: ColumnNode) => string\n  getHeaderCellClass: (column: ColumnNode) => string\n  getCellCtx: (\n    row: TableRow,\n    column: ColumnNode\n  ) => TableColumnSlotsScope | TableColumnRenderContext\n}\n\nexport function useTable(options: Options): UseTableReturn {\n  const { props, cls, leftFixed, rightFixed } = options\n\n  const slots = useSlots()\n\n  const getColumnSlotsNode = (\n    ctx: TableColumnSlotsScope | TableColumnRenderContext\n  ): RenderReturn => {\n    const column = ctx.column.data\n\n    const { render, key } = column\n\n    if (render) return render(ctx)\n\n    const slotsRender = props.slots?.[`column:${key}`] ?? slots[`column:${key}`]\n\n    if (slotsRender) return slotsRender(ctx)\n\n    return ctx.val\n  }\n\n  const getHeaderSlotsNode = (ctx: { column: ColumnNode }): RenderReturn => {\n    const column = ctx.column.data\n    const { nameRender, key } = column\n\n    if (nameRender) return nameRender(ctx)\n\n    const slotsRender = props.slots?.[`header:${key}`] ?? slots[`header:${key}`]\n\n    if (slotsRender) return slotsRender(ctx)\n\n    return column.name\n  }\n\n  const getExpandRowSlotsNode = (ctx: TableRowSlotsScope): RenderReturn => {\n    const slotsRender = props.slots?.['row:expand'] ?? slots['row:expand']\n\n    if (slotsRender) return slotsRender(ctx)\n    return null\n  }\n\n  const cellCls = cls.e('cell')\n\n  const getCommonClassName = (column: ColumnNode): string => {\n    const classList: string[] = [cellCls]\n\n    leftFixed.value && column.isLastFixed && classList.push(bem.is('last-fixed'))\n\n    rightFixed.value && column.isFirstFixed && classList.push(bem.is('first-fixed'))\n\n    if (column.fixed) {\n      classList.push(bem.is('fixed-' + column.fixed))\n    }\n    return classList.join(' ')\n  }\n\n  /**\n   * B1: 单元格类名按 ColumnNode 身份缓存。\n   *\n   * 对同一列，类名只取决于 (column.fixed, column.isLastFixed, column.isFirstFixed,\n   * column.align, leftFixed, rightFixed)。其中前四个绑定在 ColumnNode 实例上，\n   * 后两个在 leftFixed/rightFixed 变化时失效缓存即可。用 WeakMap 以 ColumnNode\n   * 为键可避免字符串 key 的拼接/哈希开销，且列树重建时节点随 GC 自动释放。\n   */\n  let cellClassCache = new WeakMap<ColumnNode, string>()\n  let headerCellClassCache = new WeakMap<ColumnNode, string>()\n\n  watch([leftFixed, rightFixed], () => {\n    cellClassCache = new WeakMap()\n    headerCellClassCache = new WeakMap()\n  })\n\n  const getCellClass = (column: ColumnNode): string => {\n    const cached = cellClassCache.get(column)\n    if (cached !== undefined) return cached\n    const result = getCommonClassName(column) + ` ${bem.is(column.align)}`\n    cellClassCache.set(column, result)\n    return result\n  }\n\n  const getHeaderCellClass = (column: ColumnNode): string => {\n    const cached = headerCellClassCache.get(column)\n    if (cached !== undefined) return cached\n    const result = getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`\n    headerCellClassCache.set(column, result)\n    return result\n  }\n\n  const getCellCtx = (\n    row: TableRow,\n    column: ColumnNode\n  ): TableColumnSlotsScope | TableColumnRenderContext => {\n    const rowData = row.data\n    const val = column.key ? o(rowData).get(column.key) : undefined\n\n    const ctx = {\n      row,\n      column,\n      rowData,\n      val,\n      model: {\n        modelValue: val,\n        'onUpdate:modelValue': (val: any) => {\n          rowData[column.key] = val\n        }\n      }\n    }\n\n    return ctx\n  }\n\n  return {\n    /**\n     * 获取列插槽VNode\n     * @param ctx 列渲染上下文\n     */\n    getColumnSlotsNode,\n    /**\n     * 获取表头插槽VNode\n     * @param ctx 表头渲染上下文\n     */\n    getHeaderSlotsNode,\n    /**\n     * 获取展开行插槽VNode\n     * @param ctx 展开行渲染上下文\n     */\n    getExpandRowSlotsNode,\n    /**\n     * 获取单元格类名\n     * @param column 列\n     */\n    getCellClass,\n    /**\n     * 获取表头单元格类名\n     * @param column 列\n     */\n    getHeaderCellClass,\n    /**\n     * 获取单元格上下文\n     * @param row 行\n     * @param column 列\n     */\n    getCellCtx\n  }\n}\n"],"mappings":";;;;AAiCA,SAAgB,SAAS,SAAkC;CACzD,MAAM,EAAE,OAAO,KAAK,WAAW,eAAe;CAE9C,MAAM,QAAQ,UAAU;CAExB,MAAM,sBACJ,QACiB;EAGjB,MAAM,EAAE,QAAQ,QAFD,IAAI,OAAO;AAI1B,MAAI,OAAQ,QAAO,OAAO,IAAI;EAE9B,MAAM,cAAc,MAAM,QAAQ,UAAU,UAAU,MAAM,UAAU;AAEtE,MAAI,YAAa,QAAO,YAAY,IAAI;AAExC,SAAO,IAAI;;CAGb,MAAM,sBAAsB,QAA8C;EACxE,MAAM,SAAS,IAAI,OAAO;EAC1B,MAAM,EAAE,YAAY,QAAQ;AAE5B,MAAI,WAAY,QAAO,WAAW,IAAI;EAEtC,MAAM,cAAc,MAAM,QAAQ,UAAU,UAAU,MAAM,UAAU;AAEtE,MAAI,YAAa,QAAO,YAAY,IAAI;AAExC,SAAO,OAAO;;CAGhB,MAAM,yBAAyB,QAA0C;EACvE,MAAM,cAAc,MAAM,QAAQ,iBAAiB,MAAM;AAEzD,MAAI,YAAa,QAAO,YAAY,IAAI;AACxC,SAAO;;CAGT,MAAM,UAAU,IAAI,EAAE,OAAO;CAE7B,MAAM,sBAAsB,WAA+B;EACzD,MAAM,YAAsB,CAAC,QAAQ;AAErC,YAAU,SAAS,OAAO,eAAe,UAAU,KAAK,IAAI,GAAG,aAAa,CAAC;AAE7E,aAAW,SAAS,OAAO,gBAAgB,UAAU,KAAK,IAAI,GAAG,cAAc,CAAC;AAEhF,MAAI,OAAO,MACT,WAAU,KAAK,IAAI,GAAG,WAAW,OAAO,MAAM,CAAC;AAEjD,SAAO,UAAU,KAAK,IAAI;;;;;;;;;;CAW5B,IAAI,iCAAiB,IAAI,SAA6B;CACtD,IAAI,uCAAuB,IAAI,SAA6B;AAE5D,OAAM,CAAC,WAAW,WAAW,QAAQ;AACnC,mCAAiB,IAAI,SAAS;AAC9B,yCAAuB,IAAI,SAAS;GACpC;CAEF,MAAM,gBAAgB,WAA+B;EACnD,MAAM,SAAS,eAAe,IAAI,OAAO;AACzC,MAAI,WAAW,KAAA,EAAW,QAAO;EACjC,MAAM,SAAS,mBAAmB,OAAO,GAAG,IAAI,IAAI,GAAG,OAAO,MAAM;AACpE,iBAAe,IAAI,QAAQ,OAAO;AAClC,SAAO;;CAGT,MAAM,sBAAsB,WAA+B;EACzD,MAAM,SAAS,qBAAqB,IAAI,OAAO;AAC/C,MAAI,WAAW,KAAA,EAAW,QAAO;EACjC,MAAM,SAAS,mBAAmB,OAAO,GAAG,IAAI,IAAI,GAAG,OAAO,YAAY;AAC1E,uBAAqB,IAAI,QAAQ,OAAO;AACxC,SAAO;;CAGT,MAAM,cACJ,KACA,WACqD;EACrD,MAAM,UAAU,IAAI;EACpB,MAAM,MAAM,OAAO,MAAM,EAAE,QAAQ,CAAC,IAAI,OAAO,IAAI,GAAG,KAAA;AAetD,SAbY;GACV;GACA;GACA;GACA;GACA,OAAO;IACL,YAAY;IACZ,wBAAwB,QAAa;AACnC,aAAQ,OAAO,OAAO;;IAEzB;GACF;;AAKH,QAAO;EAKL;EAKA;EAKA;EAKA;EAKA;EAMA;EACD"}

package/dist/components/tabs/index.d.ts

@@ -1 +1,3 @@
-import { _default } from "./tabs.vue.js";
+import { _default } from "./tabs.vue.js";
+import { _default as _default$1 } from "./tabs-horizontal.vue.js";
+import { _default as _default$2 } from "./tabs-vertical.vue.js";

package/dist/components/tabs/style2.css

@@ -15,152 +15,214 @@
 * --u-height-small: 24px;
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+/** shadcn 风格 TabsList：hover 背景底色容器 + 白底活动态；rounded=true 时水平为胶囊状。 */
+/* ===== 复合标签页：bar + content 布局容器 ===== */
 .u-tabs {
   display: flex;
-}
-.u-tabs__header {
-  flex-shrink: 0;
+  gap: var(--u-gap-small);
 }
 .u-tabs__content {
-  flex-grow: 1;
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+  border-radius: var(--u-radius-default);
 }
-.u-tabs__header-item {
-  cursor: pointer;
-  font-weight: 600;
-  letter-spacing: 1px;
-  color: var(--u-text-color-main);
-  user-select: none;
-  position: relative;
+.u-tabs--top {
+  flex-direction: column;
 }
-.u-tabs__header-item::after {
-  content: "";
-  position: absolute;
-  background-color: var(--u-color-primary);
-  transition-duration: 0.25s;
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+.u-tabs--bottom {
+  flex-direction: column-reverse;
 }
-.u-tabs__header-item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: nowrap;
+.u-tabs--left {
+  flex-direction: row;
 }
-.u-tabs__header-item.is-disabled {
-  color: var(--u-text-color-disabled);
-  cursor: not-allowed;
+.u-tabs--left .u-tabs__content {
+  height: 100%;
 }
-.u-tabs__header-item.is-active {
-  color: var(--u-color-primary);
+.u-tabs--right {
+  flex-direction: row-reverse;
 }
-.u-tabs__close {
-  width: 0;
-  transition-property: width, margin-left;
-  transition-duration: 0.25s;
-  margin-left: 0;
+.u-tabs--right .u-tabs__content {
+  height: 100%;
 }
-.u-tabs__close-placeholder {
-  height: 1em;
-  width: 1em;
-  margin-left: var(--u-gap-small);
+
+/* ===== 标签栏（独立组件）：水平 / 垂直 ===== */
+.u-tabs-bar {
+  display: inline-flex;
+  align-self: flex-start;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0 4px;
+  background-color: var(--u-bg-color-hover);
+  border-radius: var(--u-radius-default);
+  gap: 2px;
 }
-.u-tabs--top .u-tabs__header, .u-tabs--bottom .u-tabs__header {
-  display: flex;
-  justify-content: flex-start;
+.u-tabs-bar--horizontal {
   align-items: center;
-  flex-wrap: nowrap;
-}
-.u-tabs--top .u-tabs__header-item::after, .u-tabs--bottom .u-tabs__header-item::after {
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  width: 100%;
-  transform: scaleX(0);
-}
-.u-tabs--top .u-tabs__header-item.is-active::after, .u-tabs--bottom .u-tabs__header-item.is-active::after {
-  transform: scaleX(1);
+  position: relative;
+  flex-shrink: 0;
 }
-.u-tabs--top {
+.u-tabs-bar--vertical {
   flex-direction: column;
 }
-.u-tabs--top .u-tabs__header {
-  border-bottom: var(--u-border);
+.u-tabs-bar__viewport {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 4px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
 }
-.u-tabs--bottom {
-  flex-direction: column-reverse;
+.u-tabs-bar__viewport::-webkit-scrollbar {
+  display: none;
+}
+.u-tabs-bar__list {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  width: max-content;
+  margin: 0;
+  padding: 0;
+  gap: 2px;
 }
-.u-tabs--bottom .u-tabs__header {
-  border-top: var(--u-border);
+.u-tabs-bar__item {
+  cursor: pointer;
+  font-weight: 500;
+  letter-spacing: 0.25px;
+  color: var(--u-text-color-main);
+  user-select: none;
+  position: relative;
+  border-radius: calc(var(--u-radius-default) - 2px);
+  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;
 }
-.u-tabs--bottom .u-tabs__header-item {
-  border-radius: 0 0 var(--u-radius-large) var(--u-radius-large);
+.u-tabs-bar__item:not(.is-active):not(.is-disabled):hover {
+  color: var(--u-text-color-title);
 }
-.u-tabs--left .u-tabs__content, .u-tabs--right .u-tabs__content {
-  height: 100%;
+.u-tabs-bar__item.is-disabled {
+  color: var(--u-text-color-disabled);
+  cursor: not-allowed;
 }
-.u-tabs--left .u-tabs__header-item::after, .u-tabs--right .u-tabs__header-item::after {
-  top: 0;
-  width: 2px;
-  height: 100%;
-  transform: scaleY(0);
+.u-tabs-bar__item.is-active {
+  color: var(--u-text-color-title);
+  background-color: var(--u-bg-color-top);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
 }
-.u-tabs--left .u-tabs__header-item.is-active::after, .u-tabs--right .u-tabs__header-item.is-active::after {
-  transform: scaleY(1);
+.u-tabs-bar__item-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
 }
-.u-tabs--left .u-tabs__header {
-  border-right: var(--u-border);
+.u-tabs-bar__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: var(--u-text-color-secondary);
+  cursor: pointer;
+  border-radius: var(--u-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;
 }
-.u-tabs--left .u-tabs__header-item {
-  border-radius: var(--u-radius-large) 0 0 var(--u-radius-large);
-  justify-content: flex-end;
+.u-tabs-bar__close:hover {
+  color: var(--u-text-color-title);
+  background-color: rgba(15, 23, 42, 0.08);
 }
-.u-tabs--left .u-tabs__header-item::after {
-  right: 0;
+.u-tabs-bar__close:active {
+  background-color: rgba(15, 23, 42, 0.14);
 }
-.u-tabs--right {
-  flex-direction: row-reverse;
+.u-tabs-bar--horizontal .u-tabs-bar__item .u-tabs-bar__close {
+  width: 0;
+  margin-left: 0;
+  opacity: 0;
+  transform: scale(0.6);
+  pointer-events: none;
+}
+.u-tabs-bar--horizontal .u-tabs-bar__item:hover .u-tabs-bar__close {
+  width: 16px;
+  margin-left: 6px;
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+.u-tabs-bar--vertical .u-tabs-bar__item {
+  justify-content: space-between;
+}
+.u-tabs-bar__nav {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--u-text-color-main);
+  cursor: pointer;
+  user-select: none;
+  border-radius: calc(var(--u-radius-default) - 2px);
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
 }
-.u-tabs--right .u-tabs__header {
-  border-left: var(--u-border);
+.u-tabs-bar__nav:hover:not(:disabled) {
+  color: var(--u-text-color-title);
+  background-color: var(--u-bg-color-top);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
 }
-.u-tabs--right .u-tabs__header-item {
-  border-radius: 0 var(--u-radius-large) var(--u-radius-large) 0;
+.u-tabs-bar__nav:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
 }
-.u-tabs--right .u-tabs__header-item::after {
-  left: 0;
+.u-tabs-bar.is-block {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  align-self: stretch;
 }
-.u-tabs--small .u-tabs__header-item {
-  height: var(--u-form-component-height-small);
+.u-tabs-bar--small .u-tabs-bar__item {
+  height: calc(var(--u-form-component-height-small) - 4px);
   padding: 0 var(--u-gap-small);
 }
-.u-tabs--small .u-tabs__header-item:hover .u-tabs__close {
-  width: var(--u-font-size-main-small);
-  margin-left: var(--u-gap-small);
+.u-tabs-bar--small .u-tabs-bar__nav {
+  width: calc(var(--u-form-component-height-small) - 4px);
+  height: calc(var(--u-form-component-height-small) - 4px);
 }
-.u-tabs--default .u-tabs__header-item {
-  height: var(--u-form-component-height-default);
+.u-tabs-bar--default .u-tabs-bar__item {
+  height: calc(var(--u-form-component-height-default) - 4px);
   padding: 0 var(--u-gap-default);
 }
-.u-tabs--default .u-tabs__header-item:hover .u-tabs__close {
-  width: var(--u-font-size-main-default);
-  margin-left: var(--u-gap-small);
+.u-tabs-bar--default .u-tabs-bar__nav {
+  width: calc(var(--u-form-component-height-default) - 4px);
+  height: calc(var(--u-form-component-height-default) - 4px);
 }
-.u-tabs--large .u-tabs__header-item {
-  height: var(--u-form-component-height-large);
+.u-tabs-bar--large .u-tabs-bar__item {
+  height: calc(var(--u-form-component-height-large) - 4px);
   padding: 0 var(--u-gap-large);
 }
-.u-tabs--large .u-tabs__header-item:hover .u-tabs__close {
-  width: var(--u-font-size-main-large);
-  margin-left: var(--u-gap-small);
+.u-tabs-bar--large .u-tabs-bar__nav {
+  width: calc(var(--u-form-component-height-large) - 4px);
+  height: calc(var(--u-form-component-height-large) - 4px);
 }
-.u-tabs--left .u-tabs__close, .u-tabs--right .u-tabs__close {
-  width: auto;
+.u-tabs-bar.is-rounded .u-tabs-bar__item {
+  border-radius: 9999px;
 }
-.u-tabs__content {
-  width: 100%;
-  border-radius: var(--u-radius-default);
+.u-tabs-bar.is-rounded .u-tabs-bar__nav {
+  border-radius: 9999px;
 }
-.u-tabs__ripple {
-  background-color: var(--u-color-primary);
-  opacity: 0.1;
+.u-tabs-bar--horizontal.is-rounded {
+  border-radius: 9999px;
 }

package/dist/components/tabs/tabs-horizontal.js

@@ -0,0 +1,133 @@
+import _sfc_main$1 from "../icon/icon.js";
+import { useTabsBar } from "./use-tabs-bar.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, shallowRef, toDisplayString, unref, useModel, vShow, withCtx, withDirectives, withModifiers } from "vue";
+import { bem } from "@veltra/utils";
+import { useFallbackProps } from "@veltra/compositions";
+import { ArrowLeft, ArrowRight, Close } from "@veltra/icons/normal";
+//#region src/components/tabs/tabs-horizontal.vue
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["aria-label", "onClick"];
+const _hoisted_4 = ["disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "TabsHorizontal",
+	__name: "tabs-horizontal",
+	props: /* @__PURE__ */ mergeModels({
+		size: {},
+		modelValue: {},
+		items: {},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		block: {
+			type: Boolean,
+			default: false
+		},
+		rounded: {
+			type: Boolean,
+			default: false
+		},
+		position: { default: "top" }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"update:modelValue",
+		"click",
+		"close"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { size } = useFallbackProps([props], { size: "default" });
+		const cls = bem("tabs-bar");
+		const model = useModel(__props, "modelValue");
+		const viewportRef = shallowRef();
+		const listRef = shallowRef();
+		const { showNav, canPrev, canNext, scrollByStep } = useTabsBar({
+			viewportRef,
+			listRef,
+			items: computed(() => props.items),
+			model
+		});
+		const isItemClosable = (item) => {
+			if (item.disabled) return false;
+			return item.closable ?? props.closable;
+		};
+		const handleClick = (item, index) => {
+			if (item.disabled) return;
+			model.value = item.key;
+			emit("click", item, index);
+		};
+		const handleClose = (item, index) => {
+			if (item.disabled) return;
+			emit("close", item, index);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([
+				unref(cls).b,
+				unref(cls).m("horizontal"),
+				unref(cls).m(__props.position),
+				unref(cls).m(unref(size)),
+				unref(bem).is("block", __props.block),
+				unref(bem).is("rounded", __props.rounded)
+			]) }, [
+				withDirectives(createElementVNode("button", {
+					type: "button",
+					class: normalizeClass([unref(cls).e("nav"), unref(cls).em("nav", "prev")]),
+					disabled: !unref(canPrev),
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollByStep)(-1))
+				}, [createVNode(unref(_sfc_main$1), null, {
+					default: withCtx(() => [createVNode(unref(ArrowLeft))]),
+					_: 1
+				})], 10, _hoisted_1), [[vShow, unref(showNav)]]),
+				createElementVNode("div", {
+					ref_key: "viewportRef",
+					ref: viewportRef,
+					class: normalizeClass(unref(cls).e("viewport"))
+				}, [createElementVNode("div", {
+					ref_key: "listRef",
+					ref: listRef,
+					class: normalizeClass(unref(cls).e("list"))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+					return openBlock(), createElementBlock("button", {
+						type: "button",
+						role: "tab",
+						key: item.key,
+						class: normalizeClass([
+							unref(cls).e("item"),
+							unref(bem).is("active", model.value === item.key),
+							unref(bem).is("disabled", item.disabled === true)
+						]),
+						onClick: withModifiers(($event) => handleClick(item, index), ["stop"])
+					}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("item-label")) }, toDisplayString(item.name ?? item.key), 3), isItemClosable(item) ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						role: "button",
+						tabindex: "0",
+						class: normalizeClass(unref(cls).e("close")),
+						"aria-label": `close ${item.name ?? item.key}`,
+						onClick: withModifiers(($event) => handleClose(item, index), ["stop"])
+					}, [createVNode(unref(_sfc_main$1), null, {
+						default: withCtx(() => [createVNode(unref(Close))]),
+						_: 1
+					})], 10, _hoisted_3)) : createCommentVNode("v-if", true)], 10, _hoisted_2);
+				}), 128))], 2)], 2),
+				withDirectives(createElementVNode("button", {
+					type: "button",
+					class: normalizeClass([unref(cls).e("nav"), unref(cls).em("nav", "next")]),
+					disabled: !unref(canNext),
+					onClick: _cache[1] || (_cache[1] = ($event) => unref(scrollByStep)(1))
+				}, [createVNode(unref(_sfc_main$1), null, {
+					default: withCtx(() => [createVNode(unref(ArrowRight))]),
+					_: 1
+				})], 10, _hoisted_4), [[vShow, unref(showNav)]])
+			], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=tabs-horizontal.js.map

package/dist/components/tabs/tabs-horizontal.js.map

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

package/dist/components/tabs/tabs-horizontal.vue.d.ts

@@ -0,0 +1,29 @@
+import { TabItem, TabsHorizontalProps } from "../../types/tabs.js";
+import * as _$vue from "vue";
+
+//#region src/components/tabs/tabs-horizontal.vue.d.ts
+type __VLS_Props = TabsHorizontalProps;
+type __VLS_ModelProps = {
+  modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: string | undefined) => any;
+} & {
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
+  close: (item: TabItem, index: number) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
+}>, {
+  block: boolean;
+  closable: boolean;
+  position: "top" | "bottom";
+  rounded: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };
+//# sourceMappingURL=tabs-horizontal.vue.d.ts.map

package/dist/components/tabs/tabs-vertical.js

@@ -0,0 +1,89 @@
+import _sfc_main$1 from "../icon/icon.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
+import { bem } from "@veltra/utils";
+import { useFallbackProps } from "@veltra/compositions";
+import { Close } from "@veltra/icons/normal";
+//#region src/components/tabs/tabs-vertical.vue
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["aria-label", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "TabsVertical",
+	__name: "tabs-vertical",
+	props: /* @__PURE__ */ mergeModels({
+		size: {},
+		modelValue: {},
+		items: {},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		rounded: {
+			type: Boolean,
+			default: false
+		},
+		position: { default: "left" }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"update:modelValue",
+		"click",
+		"close"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { size } = useFallbackProps([props], { size: "default" });
+		const cls = bem("tabs-bar");
+		const model = useModel(__props, "modelValue");
+		const isItemClosable = (item) => {
+			if (item.disabled) return false;
+			return item.closable ?? props.closable;
+		};
+		const handleClick = (item, index) => {
+			if (item.disabled) return;
+			model.value = item.key;
+			emit("click", item, index);
+		};
+		const handleClose = (item, index) => {
+			if (item.disabled) return;
+			emit("close", item, index);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([
+				unref(cls).b,
+				unref(cls).m("vertical"),
+				unref(cls).m(__props.position),
+				unref(cls).m(unref(size)),
+				unref(bem).is("rounded", __props.rounded)
+			]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createElementBlock("button", {
+					type: "button",
+					role: "tab",
+					key: item.key,
+					class: normalizeClass([
+						unref(cls).e("item"),
+						unref(bem).is("active", model.value === item.key),
+						unref(bem).is("disabled", item.disabled === true)
+					]),
+					onClick: withModifiers(($event) => handleClick(item, index), ["stop"])
+				}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("item-label")) }, toDisplayString(item.name ?? item.key), 3), isItemClosable(item) ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					role: "button",
+					tabindex: "0",
+					class: normalizeClass(unref(cls).e("close")),
+					"aria-label": `close ${item.name ?? item.key}`,
+					onClick: withModifiers(($event) => handleClose(item, index), ["stop"])
+				}, [createVNode(unref(_sfc_main$1), null, {
+					default: withCtx(() => [createVNode(unref(Close))]),
+					_: 1
+				})], 10, _hoisted_2)) : createCommentVNode("v-if", true)], 10, _hoisted_1);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=tabs-vertical.js.map

package/dist/components/tabs/tabs-vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-vertical.js","names":[],"sources":["../../../src/components/tabs/tabs-vertical.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[cls.b, cls.m('vertical'), cls.m(position), cls.m(size), bem.is('rounded', rounded)]\"\n  >\n    <button\n      type=\"button\"\n      role=\"tab\"\n      v-for=\"(item, index) in items\"\n      :key=\"item.key\"\n      :class=\"[\n        cls.e('item'),\n        bem.is('active', model === item.key),\n        bem.is('disabled', item.disabled === true)\n      ]\"\n      @click.stop=\"handleClick(item, index)\"\n    >\n      <span :class=\"cls.e('item-label')\">{{ item.name ?? item.key }}</span>\n      <span\n        v-if=\"isItemClosable(item)\"\n        role=\"button\"\n        tabindex=\"0\"\n        :class=\"cls.e('close')\"\n        :aria-label=\"`close ${item.name ?? item.key}`\"\n        @click.stop=\"handleClose(item, index)\"\n      >\n        <u-icon>\n          <Close />\n        </u-icon>\n      </span>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { Close } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\n\nimport type { ComponentSize, TabItem, TabsVerticalEmits, TabsVerticalProps } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'TabsVertical' })\n\nconst props = withDefaults(defineProps<TabsVerticalProps>(), {\n  position: 'left',\n  closable: false,\n  rounded: false\n})\n\nconst emit = defineEmits<TabsVerticalEmits>()\n\nconst { size } = useFallbackProps([props], {\n  size: 'default' as ComponentSize\n})\n\nconst cls = bem('tabs-bar')\n\nconst model = defineModel<string>()\n\nconst isItemClosable = (item: TabItem) => {\n  if (item.disabled) return false\n  return item.closable ?? props.closable\n}\n\nconst handleClick = (item: TabItem, index: number) => {\n  if (item.disabled) return\n  model.value = item.key\n  emit('click', item, index)\n}\n\nconst handleClose = (item: TabItem, index: number) => {\n  if (item.disabled) return\n  emit('close', item, index)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,EAAE,SAAS,iBAAiB,CAAC,MAAM,EAAE,EACzC,MAAM,WACP,CAAA;EAED,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,kBAAkB,SAAkB;AACxC,OAAI,KAAK,SAAU,QAAO;AAC1B,UAAO,KAAK,YAAY,MAAM;;EAGhC,MAAM,eAAe,MAAe,UAAkB;AACpD,OAAI,KAAK,SAAU;AACnB,SAAM,QAAQ,KAAK;AACnB,QAAK,SAAS,MAAM,MAAK;;EAG3B,MAAM,eAAe,MAAe,UAAkB;AACpD,OAAI,KAAK,SAAU;AACnB,QAAK,SAAS,MAAM,MAAK;;;uBAvEzB,mBA6BM,OAAA,EA5BH,OAAK,eAAA;IAAG,MAAA,IAAG,CAAC;IAAG,MAAA,IAAG,CAAC,EAAC,WAAA;IAAc,MAAA,IAAG,CAAC,EAAE,QAAA,SAAQ;IAAG,MAAA,IAAG,CAAC,EAAE,MAAA,KAAI,CAAA;IAAG,MAAA,IAAG,CAAC,GAAE,WAAY,QAAA,QAAO;IAAA,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EAE1F,mBAyBS,UAAA,MAAA,WAtBiB,QAAA,QAAhB,MAAM,UAAK;wBAHrB,mBAyBS,UAAA;KAxBP,MAAK;KACL,MAAK;KAEJ,KAAK,KAAK;KACV,OAAK,eAAA;MAAY,MAAA,IAAG,CAAC,EAAC,OAAA;MAAkB,MAAA,IAAG,CAAC,GAAE,UAAW,MAAA,UAAU,KAAK,IAAG;MAAW,MAAA,IAAG,CAAC,GAAE,YAAa,KAAK,aAAQ,KAAA;;KAKtH,SAAK,eAAA,WAAO,YAAY,MAAM,MAAK,EAAA,CAAA,OAAA,CAAA;QAEpC,mBAAqE,QAAA,EAA9D,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,aAAA,CAAA,EAAA,EAAA,gBAAmB,KAAK,QAAQ,KAAK,IAAG,EAAA,EAAA,EAEnD,eAAe,KAAI,IAAA,WAAA,EAD3B,mBAWO,QAAA;;KATL,MAAK;KACL,UAAS;KACR,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;KACZ,cAAU,SAAW,KAAK,QAAQ,KAAK;KACvC,SAAK,eAAA,WAAO,YAAY,MAAM,MAAK,EAAA,CAAA,OAAA,CAAA;QAEpC,YAES,MAAA,YAAA,EAAA,MAAA;4BADE,CAAT,YAAS,MAAA,MAAA,CAAA,CAAA,CAAA"}

package/dist/components/tabs/tabs-vertical.vue.d.ts

@@ -0,0 +1,28 @@
+import { TabItem, TabsVerticalProps } from "../../types/tabs.js";
+import * as _$vue from "vue";
+
+//#region src/components/tabs/tabs-vertical.vue.d.ts
+type __VLS_Props = TabsVerticalProps;
+type __VLS_ModelProps = {
+  modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: string | undefined) => any;
+} & {
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
+  close: (item: TabItem, index: number) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
+}>, {
+  closable: boolean;
+  position: "left" | "right";
+  rounded: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };
+//# sourceMappingURL=tabs-vertical.vue.d.ts.map