@veltra/desktop 1.2.32 → 1.2.33

package/dist/components/batch-edit/batch-edit.vue.d.ts

@@ -6,28 +6,28 @@ declare const __VLS_base: import("vue").DefineComponent<BatchEditProps, {}, {},
   "update:selected": (value: Record<string, any> | undefined) => any;
   "update:checked": (value: Record<string, any>[]) => any;
   "update:current": (row?: TableRow | undefined) => any;
-  "update:rows": (rows: TableRow[]) => any;
-  "update:forest": (rows?: import("@cat-kit/core").Forest<Record<string, unknown>, any> | undefined) => any;
-  "cell-click": (row: TableRow, column: TableColumn, ev: MouseEvent) => any;
-  "row-click": (row: TableRow, ev: MouseEvent) => any;
   create: () => any;
   "update:data": (value: Record<string, any>[]) => any;
   "create-prev": (row: TableRow) => any;
   "create-next": (row: TableRow) => any;
   "create-child": (row: TableRow) => any;
+  "update:rows": (rows: TableRow[]) => any;
+  "update:forest": (rows?: import("@cat-kit/core").Forest<Record<string, unknown>, any> | undefined) => any;
+  "cell-click": (row: TableRow, column: TableColumn, ev: MouseEvent) => any;
+  "row-click": (row: TableRow, ev: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<BatchEditProps> & Readonly<{
   "onUpdate:selected"?: ((value: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:checked"?: ((value: Record<string, any>[]) => any) | undefined;
   "onUpdate:current"?: ((row?: TableRow | undefined) => any) | undefined;
-  "onUpdate:rows"?: ((rows: TableRow[]) => any) | undefined;
-  "onUpdate:forest"?: ((rows?: import("@cat-kit/core").Forest<Record<string, unknown>, any> | undefined) => any) | undefined;
-  "onCell-click"?: ((row: TableRow, column: TableColumn, ev: MouseEvent) => any) | undefined;
-  "onRow-click"?: ((row: TableRow, ev: MouseEvent) => any) | undefined;
   onCreate?: (() => any) | undefined;
   "onUpdate:data"?: ((value: Record<string, any>[]) => any) | undefined;
   "onCreate-prev"?: ((row: TableRow) => any) | undefined;
   "onCreate-next"?: ((row: TableRow) => any) | undefined;
   "onCreate-child"?: ((row: TableRow) => any) | undefined;
+  "onUpdate:rows"?: ((rows: TableRow[]) => any) | undefined;
+  "onUpdate:forest"?: ((rows?: import("@cat-kit/core").Forest<Record<string, unknown>, any> | undefined) => any) | undefined;
+  "onCell-click"?: ((row: TableRow, column: TableColumn, ev: MouseEvent) => any) | undefined;
+  "onRow-click"?: ((row: TableRow, ev: MouseEvent) => any) | undefined;
 }>, {
   cols: string | [string, string];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/cascade/cascade.vue.d.ts

@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<CascadeProps, {}, {},
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  visibilityLimit: number;
   separator: string;
+  visibilityLimit: number;
   showFullPath: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/dual-nav/dual-nav-app.js

@@ -1,25 +1,35 @@
 import _sfc_main$1 from "../tip/tip.js";
 import _sfc_main$2 from "../nav/nav-icon.js";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, shallowRef, toDisplayString, unref, withCtx, withDirectives } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, shallowRef, toDisplayString, unref, withCtx, withDirectives } from "vue";
 import { bem } from "@veltra/utils";
 import { vRipple } from "@veltra/directives";
 //#region src/components/dual-nav/dual-nav-app.vue
 const _hoisted_1 = ["disabled"];
+const LABEL_MAX_LENGTH = 4;
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "UDualNavApp",
 	__name: "dual-nav-app",
 	props: {
 		app: {},
 		active: { type: Boolean },
-		selected: { type: Boolean }
+		selected: { type: Boolean },
+		labeled: { type: Boolean }
 	},
 	emits: ["click"],
 	setup(__props, { emit: __emit }) {
 		const cls = bem("dual-nav");
+		/** 左轨菜单名称最多展示字数 */
+		const props = __props;
 		const emit = __emit;
 		const tipVisible = shallowRef(false);
 		/** 点击后暂时禁用 hover 弹出，移出触发区后恢复 */
 		const tipSuppressed = shallowRef(false);
+		const displayTitle = computed(() => props.app.title.slice(0, LABEL_MAX_LENGTH));
+		/** labeled 且标题未截断、无描述时，tooltip 无额外信息 */
+		const tipUnnecessary = computed(() => {
+			return !!props.labeled && props.app.title.length <= LABEL_MAX_LENGTH && !props.app.description;
+		});
+		const tipDisabled = computed(() => tipSuppressed.value || tipUnnecessary.value);
 		function handleClick() {
 			tipSuppressed.value = true;
 			tipVisible.value = false;
@@ -34,7 +44,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => tipVisible.value = $event),
 				direction: "right",
 				"hide-arrow": "",
-				disabled: tipSuppressed.value
+				disabled: tipDisabled.value
 			}, {
 				content: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cls).e("app-tip")) }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("app-tip-title")) }, toDisplayString(__props.app.title), 3), __props.app.description ? (openBlock(), createElementBlock("p", {
 					key: 0,
@@ -58,7 +68,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				}, null, 8, ["icon", "class"])) : (openBlock(), createElementBlock("span", {
 					key: 1,
 					class: normalizeClass(unref(cls).e("app-fallback"))
-				}, toDisplayString(__props.app.title[0]), 3))], 42, _hoisted_1)), [[unref(vRipple), !__props.app.disabled]])]),
+				}, toDisplayString(__props.app.title[0]), 3)), __props.labeled ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(unref(cls).e("app-label"))
+				}, toDisplayString(displayTitle.value), 3)) : createCommentVNode("v-if", true)], 42, _hoisted_1)), [[unref(vRipple), !__props.app.disabled]])]),
 				_: 1
 			}, 8, ["visible", "disabled"]);
 		};

package/dist/components/dual-nav/dual-nav-app.js.map

@@ -1 +1 @@
-{"version":3,"file":"dual-nav-app.js","names":[],"sources":["../../../src/components/dual-nav/dual-nav-app.vue"],"sourcesContent":["<template>\n  <u-tip v-model:visible=\"tipVisible\" direction=\"right\" hide-arrow :disabled=\"tipSuppressed\">\n    <button\n      type=\"button\"\n      v-ripple=\"!app.disabled\"\n      :class=\"[\n        cls.e('app'),\n        bem.is('active', active),\n        bem.is('selected', selected),\n        bem.is('disabled', app.disabled ?? false)\n      ]\"\n      :disabled=\"app.disabled\"\n      @click=\"handleClick\"\n      @mouseleave=\"handleMouseleave\"\n    >\n      <UNavIcon v-if=\"app.icon\" :icon=\"app.icon\" :class=\"cls.e('app-icon')\" />\n      <span v-else :class=\"cls.e('app-fallback')\">{{ app.title[0] }}</span>\n    </button>\n\n    <template #content>\n      <div :class=\"cls.e('app-tip')\">\n        <div :class=\"cls.e('app-tip-title')\">{{ app.title }}</div>\n        <p v-if=\"app.description\" :class=\"cls.e('app-tip-description')\">\n          {{ app.description }}\n        </p>\n      </div>\n    </template>\n  </u-tip>\n</template>\n\n<script setup lang=\"ts\">\nimport { vRipple } from '@veltra/directives'\nimport { bem } from '@veltra/utils'\nimport { shallowRef } from 'vue'\n\nimport type { DualNavRootItem } from '../../types'\nimport UNavIcon from '../nav/nav-icon.vue'\nimport { UTip } from '../tip'\n\ndefineOptions({ name: 'UDualNavApp' })\n\nconst cls = bem('dual-nav')\n\ndefineProps<{ app: DualNavRootItem; active: boolean; selected: boolean }>()\n\nconst emit = defineEmits<{ click: [] }>()\n\nconst tipVisible = shallowRef(false)\n/** 点击后暂时禁用 hover 弹出，移出触发区后恢复 */\nconst tipSuppressed = shallowRef(false)\n\nfunction handleClick() {\n  tipSuppressed.value = true\n  tipVisible.value = false\n  emit('click')\n}\n\nfunction handleMouseleave() {\n  tipSuppressed.value = false\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EAyCA,MAAM,MAAM,IAAI,UAAU;EAI1B,MAAM,OAAO;EAEb,MAAM,aAAa,WAAW,KAAK;;EAEnC,MAAM,gBAAgB,WAAW,KAAK;EAEtC,SAAS,cAAc;GACrB,cAAc,QAAQ;GACtB,WAAW,QAAQ;GACnB,KAAK,OAAO;EACd;EAEA,SAAS,mBAAmB;GAC1B,cAAc,QAAQ;EACxB;;uBA1DE,YA0BQ,MAAA,WAAA,GAAA;IA1BO,SAAS,WAAA;8DAAA,WAAU,QAAA;IAAE,WAAU;IAAQ,cAAA;IAAY,UAAU,cAAA;;IAkB/D,SAAO,cAMV,CALN,mBAKM,OAAA,EALA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,SAAA,CAAA,EAAA,GAAA,CAChB,mBAA0D,OAAA,EAApD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,eAAA,CAAA,EAAA,GAAA,gBAAsB,QAAA,IAAI,KAAK,GAAA,CAAA,GACxC,QAAA,IAAI,eAAA,UAAA,GAAb,mBAEI,KAAA;;KAFuB,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,qBAAA,CAAA;uBAClC,QAAA,IAAI,WAAW,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,CAAA,CAAA,CAAA;2BANf,CAAA,gBAAA,UAAA,GAfT,mBAeS,UAAA;KAdP,MAAK;KAEJ,OAAK,eAAA;MAAY,MAAA,GAAA,CAAG,CAAC,EAAC,KAAA;MAAiB,MAAA,GAAA,CAAG,CAAC,GAAE,UAAW,QAAA,MAAM;MAAW,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,QAAA,QAAQ;MAAW,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,QAAA,IAAI,YAAQ,KAAA;;KAM9I,UAAU,QAAA,IAAI;KACd,SAAO;KACP,cAAY;QAEG,QAAA,IAAI,QAAA,UAAA,GAApB,YAAwE,aAAA;;KAA7C,MAAM,QAAA,IAAI;KAAO,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,UAAA,CAAA;oDACxD,mBAAqE,QAAA;;KAAvD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,cAAA,CAAA;uBAAqB,QAAA,IAAI,MAAK,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA,UAAA,IAAA,CAAA,CAAA,MAAA,OAAA,GAAA,CAZ7C,QAAA,IAAI,QAAQ,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"dual-nav-app.js","names":[],"sources":["../../../src/components/dual-nav/dual-nav-app.vue"],"sourcesContent":["<template>\n  <u-tip v-model:visible=\"tipVisible\" direction=\"right\" hide-arrow :disabled=\"tipDisabled\">\n    <button\n      type=\"button\"\n      v-ripple=\"!app.disabled\"\n      :class=\"[\n        cls.e('app'),\n        bem.is('active', active),\n        bem.is('selected', selected),\n        bem.is('disabled', app.disabled ?? false)\n      ]\"\n      :disabled=\"app.disabled\"\n      @click=\"handleClick\"\n      @mouseleave=\"handleMouseleave\"\n    >\n      <UNavIcon v-if=\"app.icon\" :icon=\"app.icon\" :class=\"cls.e('app-icon')\" />\n      <span v-else :class=\"cls.e('app-fallback')\">{{ app.title[0] }}</span>\n      <span v-if=\"labeled\" :class=\"cls.e('app-label')\">{{ displayTitle }}</span>\n    </button>\n\n    <template #content>\n      <div :class=\"cls.e('app-tip')\">\n        <div :class=\"cls.e('app-tip-title')\">{{ app.title }}</div>\n        <p v-if=\"app.description\" :class=\"cls.e('app-tip-description')\">\n          {{ app.description }}\n        </p>\n      </div>\n    </template>\n  </u-tip>\n</template>\n\n<script setup lang=\"ts\">\nimport { vRipple } from '@veltra/directives'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef } from 'vue'\n\nimport type { DualNavRootItem } from '../../types'\nimport UNavIcon from '../nav/nav-icon.vue'\nimport { UTip } from '../tip'\n\ndefineOptions({ name: 'UDualNavApp' })\n\nconst cls = bem('dual-nav')\n\n/** 左轨菜单名称最多展示字数 */\nconst LABEL_MAX_LENGTH = 4\n\nconst props = defineProps<{\n  app: DualNavRootItem\n  active: boolean\n  selected: boolean\n  /** 是否在图标下方显示菜单名称 */\n  labeled?: boolean\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n\nconst tipVisible = shallowRef(false)\n/** 点击后暂时禁用 hover 弹出，移出触发区后恢复 */\nconst tipSuppressed = shallowRef(false)\n\nconst displayTitle = computed(() => props.app.title.slice(0, LABEL_MAX_LENGTH))\n\n/** labeled 且标题未截断、无描述时，tooltip 无额外信息 */\nconst tipUnnecessary = computed(() => {\n  return !!props.labeled && props.app.title.length <= LABEL_MAX_LENGTH && !props.app.description\n})\n\nconst tipDisabled = computed(() => tipSuppressed.value || tipUnnecessary.value)\n\nfunction handleClick() {\n  tipSuppressed.value = true\n  tipVisible.value = false\n  emit('click')\n}\n\nfunction handleMouseleave() {\n  tipSuppressed.value = false\n}\n</script>\n"],"mappings":";;;;;;;AA6CA,MAAM,mBAAmB;;;;;;;;;;;;EAHzB,MAAM,MAAM,IAAI,UAAU;;EAK1B,MAAM,QAAQ;EAQd,MAAM,OAAO;EAEb,MAAM,aAAa,WAAW,KAAK;;EAEnC,MAAM,gBAAgB,WAAW,KAAK;EAEtC,MAAM,eAAe,eAAe,MAAM,IAAI,MAAM,MAAM,GAAG,gBAAgB,CAAC;;EAG9E,MAAM,iBAAiB,eAAe;GACpC,OAAO,CAAC,CAAC,MAAM,WAAW,MAAM,IAAI,MAAM,UAAU,oBAAoB,CAAC,MAAM,IAAI;EACrF,CAAC;EAED,MAAM,cAAc,eAAe,cAAc,SAAS,eAAe,KAAK;EAE9E,SAAS,cAAc;GACrB,cAAc,QAAQ;GACtB,WAAW,QAAQ;GACnB,KAAK,OAAO;EACd;EAEA,SAAS,mBAAmB;GAC1B,cAAc,QAAQ;EACxB;;uBA7EE,YA2BQ,MAAA,WAAA,GAAA;IA3BO,SAAS,WAAA;8DAAA,WAAU,QAAA;IAAE,WAAU;IAAQ,cAAA;IAAY,UAAU,YAAA;;IAmB/D,SAAO,cAMV,CALN,mBAKM,OAAA,EALA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,SAAA,CAAA,EAAA,GAAA,CAChB,mBAA0D,OAAA,EAApD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,eAAA,CAAA,EAAA,GAAA,gBAAsB,QAAA,IAAI,KAAK,GAAA,CAAA,GACxC,QAAA,IAAI,eAAA,UAAA,GAAb,mBAEI,KAAA;;KAFuB,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,qBAAA,CAAA;uBAClC,QAAA,IAAI,WAAW,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,CAAA,CAAA,CAAA;2BANf,CAAA,gBAAA,UAAA,GAhBT,mBAgBS,UAAA;KAfP,MAAK;KAEJ,OAAK,eAAA;MAAY,MAAA,GAAA,CAAG,CAAC,EAAC,KAAA;MAAiB,MAAA,GAAA,CAAG,CAAC,GAAE,UAAW,QAAA,MAAM;MAAW,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,QAAA,QAAQ;MAAW,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,QAAA,IAAI,YAAQ,KAAA;;KAM9I,UAAU,QAAA,IAAI;KACd,SAAO;KACP,cAAY;QAEG,QAAA,IAAI,QAAA,UAAA,GAApB,YAAwE,aAAA;;KAA7C,MAAM,QAAA,IAAI;KAAO,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,UAAA,CAAA;oDACxD,mBAAqE,QAAA;;KAAvD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,cAAA,CAAA;uBAAqB,QAAA,IAAI,MAAK,EAAA,GAAA,CAAA,IAC5C,QAAA,WAAA,UAAA,GAAZ,mBAA0E,QAAA;;KAApD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,WAAA,CAAA;uBAAkB,aAAA,KAAY,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,IAAA,UAAA,IAAA,CAAA,CAAA,MAAA,OAAA,GAAA,CAbrD,QAAA,IAAI,QAAQ,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/dual-nav/dual-nav.js

@@ -14,7 +14,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "dual-nav",
 	props: {
 		currentPath: {},
-		menus: {}
+		menus: {},
+		railVariant: { default: "icon" }
 	},
 	emits: ["item-click"],
 	setup(__props, { emit: __emit }) {
@@ -76,18 +77,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			allExpanded.value = true;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cls).b) }, [
+			return openBlock(), createElementBlock("div", { class: normalizeClass([unref(cls).b, __props.railVariant === "labeled" && unref(cls).m("labeled")]) }, [
 				createElementVNode("div", { class: normalizeClass(unref(cls).e("rail")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.menus, (app) => {
 					return openBlock(), createBlock(_sfc_main$4, {
 						key: app.path,
 						app,
 						active: isAppActive(app),
 						selected: isAppSelected(app),
+						labeled: __props.railVariant === "labeled",
 						onClick: ($event) => handleAppClick(app)
 					}, null, 8, [
 						"app",
 						"active",
 						"selected",
+						"labeled",
 						"onClick"
 					]);
 				}), 128))], 2),

package/dist/components/dual-nav/dual-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"dual-nav.js","names":[],"sources":["../../../src/components/dual-nav/dual-nav.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.b\">\n    <div :class=\"cls.e('rail')\">\n      <DualNavApp\n        v-for=\"app in menus\"\n        :key=\"app.path\"\n        :app=\"app\"\n        :active=\"isAppActive(app)\"\n        :selected=\"isAppSelected(app)\"\n        @click=\"handleAppClick(app)\"\n      />\n    </div>\n\n    <!-- <div :class=\"cls.e('divider')\" aria-hidden=\"true\" /> -->\n\n    <div :class=\"cls.e('panel')\">\n      <template v-if=\"panelApp\">\n        <div :class=\"cls.e('panel-header')\">\n          <div :class=\"cls.e('panel-header-main')\">\n            <h3 :class=\"cls.e('panel-title')\">{{ panelApp.title }}</h3>\n            <p v-if=\"panelApp.description\" :class=\"cls.e('description')\">\n              {{ panelApp.description }}\n            </p>\n          </div>\n\n          <u-tip\n            v-if=\"hasExpandableMenus\"\n            :content=\"allExpanded ? '折叠全部' : '展开全部'\"\n            hide-arrow\n          >\n            <button\n              type=\"button\"\n              :class=\"cls.e('toggle-expand')\"\n              :aria-label=\"allExpanded ? '折叠全部' : '展开全部'\"\n              @click=\"handleToggleExpandAll\"\n            >\n              <u-icon>\n                <FolderOpened v-if=\"!allExpanded\" />\n                <Folder v-else />\n              </u-icon>\n            </button>\n          </u-tip>\n        </div>\n\n        <div :class=\"cls.e('panel-body')\">\n          <UNav\n            ref=\"navRef\"\n            :menus=\"panelMenus\"\n            :current-path=\"currentPath\"\n            :collapsed=\"false\"\n            @item-click=\"emit('item-click', $event)\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Folder, FolderOpened } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport type { DualNavEmits, DualNavProps, DualNavRootItem } from '../../types/dual-nav'\nimport type { NavExposed, NavItem } from '../../types/nav'\nimport { UIcon } from '../icon'\nimport { UNav } from '../nav'\nimport { collectNavBranchPaths } from '../nav/helper'\nimport { UTip } from '../tip'\nimport DualNavApp from './dual-nav-app.vue'\nimport { findFirstLeaf, findRootApp } from './helper'\n\ndefineOptions({ name: 'UDualNav' })\n\nconst props = defineProps<DualNavProps>()\nconst emit = defineEmits<DualNavEmits>()\n\nconst cls = bem('dual-nav')\nconst navRef = useTemplateRef<NavExposed>('navRef')\n\n/** 右栏当前展示的应用（点击左轨或 currentPath 同步） */\nconst panelAppPath = ref<string>()\nconst allExpanded = ref(false)\n\nfunction syncPanelAppFromCurrentPath(currentPath?: string) {\n  const rootApp = findRootApp(props.menus, currentPath)\n  if (rootApp) {\n    panelAppPath.value = rootApp.path\n    return\n  }\n\n  if (!panelAppPath.value && props.menus?.length) {\n    panelAppPath.value = props.menus[0]!.path\n  }\n}\n\nwatch(\n  () => [props.currentPath, props.menus] as const,\n  ([currentPath]) => {\n    syncPanelAppFromCurrentPath(currentPath)\n  },\n  { immediate: true }\n)\n\nconst panelApp = computed<DualNavRootItem | undefined>(() => {\n  if (!panelAppPath.value || !props.menus?.length) return undefined\n  return props.menus.find((app) => app.path === panelAppPath.value)\n})\n\n/** 右栏菜单：有子级时展示子级，单层时展示根项自身 */\nconst panelMenus = computed<NavItem[] | undefined>(() => {\n  const app = panelApp.value\n  if (!app) return undefined\n  if (app.children?.length) return app.children\n  return [app]\n})\n\nconst hasExpandableMenus = computed(() => {\n  return collectNavBranchPaths(panelMenus.value).length > 0\n})\n\nwatch(panelAppPath, () => {\n  allExpanded.value = false\n})\n\n/** 左轨高亮：currentPath 落在该应用下时为激活态 */\nfunction isAppActive(app: NavItem): boolean {\n  return findRootApp(props.menus, props.currentPath)?.path === app.path\n}\n\n/** 左轨选中：已切换右栏但尚未导航到该应用下任一菜单时，使用 hover 风格 */\nfunction isAppSelected(app: NavItem): boolean {\n  return panelAppPath.value === app.path && !isAppActive(app)\n}\n\nfunction handleAppClick(app: NavItem) {\n  if (app.disabled) return\n\n  panelAppPath.value = app.path\n\n  emit('item-click', findFirstLeaf(app))\n}\n\nfunction handleToggleExpandAll() {\n  if (allExpanded.value) {\n    navRef.value?.collapseAll()\n    allExpanded.value = false\n    return\n  }\n\n  navRef.value?.expandAll()\n  allExpanded.value = true\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"dual-nav.js","names":[],"sources":["../../../src/components/dual-nav/dual-nav.vue"],"sourcesContent":["<template>\n  <div :class=\"[cls.b, railVariant === 'labeled' && cls.m('labeled')]\">\n    <div :class=\"cls.e('rail')\">\n      <DualNavApp\n        v-for=\"app in menus\"\n        :key=\"app.path\"\n        :app=\"app\"\n        :active=\"isAppActive(app)\"\n        :selected=\"isAppSelected(app)\"\n        :labeled=\"railVariant === 'labeled'\"\n        @click=\"handleAppClick(app)\"\n      />\n    </div>\n\n    <!-- <div :class=\"cls.e('divider')\" aria-hidden=\"true\" /> -->\n\n    <div :class=\"cls.e('panel')\">\n      <template v-if=\"panelApp\">\n        <div :class=\"cls.e('panel-header')\">\n          <div :class=\"cls.e('panel-header-main')\">\n            <h3 :class=\"cls.e('panel-title')\">{{ panelApp.title }}</h3>\n            <p v-if=\"panelApp.description\" :class=\"cls.e('description')\">\n              {{ panelApp.description }}\n            </p>\n          </div>\n\n          <u-tip\n            v-if=\"hasExpandableMenus\"\n            :content=\"allExpanded ? '折叠全部' : '展开全部'\"\n            hide-arrow\n          >\n            <button\n              type=\"button\"\n              :class=\"cls.e('toggle-expand')\"\n              :aria-label=\"allExpanded ? '折叠全部' : '展开全部'\"\n              @click=\"handleToggleExpandAll\"\n            >\n              <u-icon>\n                <FolderOpened v-if=\"!allExpanded\" />\n                <Folder v-else />\n              </u-icon>\n            </button>\n          </u-tip>\n        </div>\n\n        <div :class=\"cls.e('panel-body')\">\n          <UNav\n            ref=\"navRef\"\n            :menus=\"panelMenus\"\n            :current-path=\"currentPath\"\n            :collapsed=\"false\"\n            @item-click=\"emit('item-click', $event)\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Folder, FolderOpened } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport type { DualNavEmits, DualNavProps, DualNavRootItem } from '../../types/dual-nav'\nimport type { NavExposed, NavItem } from '../../types/nav'\nimport { UIcon } from '../icon'\nimport { UNav } from '../nav'\nimport { collectNavBranchPaths } from '../nav/helper'\nimport { UTip } from '../tip'\nimport DualNavApp from './dual-nav-app.vue'\nimport { findFirstLeaf, findRootApp } from './helper'\n\ndefineOptions({ name: 'UDualNav' })\n\nconst props = withDefaults(defineProps<DualNavProps>(), { railVariant: 'icon' })\nconst emit = defineEmits<DualNavEmits>()\n\nconst cls = bem('dual-nav')\nconst navRef = useTemplateRef<NavExposed>('navRef')\n\n/** 右栏当前展示的应用（点击左轨或 currentPath 同步） */\nconst panelAppPath = ref<string>()\nconst allExpanded = ref(false)\n\nfunction syncPanelAppFromCurrentPath(currentPath?: string) {\n  const rootApp = findRootApp(props.menus, currentPath)\n  if (rootApp) {\n    panelAppPath.value = rootApp.path\n    return\n  }\n\n  if (!panelAppPath.value && props.menus?.length) {\n    panelAppPath.value = props.menus[0]!.path\n  }\n}\n\nwatch(\n  () => [props.currentPath, props.menus] as const,\n  ([currentPath]) => {\n    syncPanelAppFromCurrentPath(currentPath)\n  },\n  { immediate: true }\n)\n\nconst panelApp = computed<DualNavRootItem | undefined>(() => {\n  if (!panelAppPath.value || !props.menus?.length) return undefined\n  return props.menus.find((app) => app.path === panelAppPath.value)\n})\n\n/** 右栏菜单：有子级时展示子级，单层时展示根项自身 */\nconst panelMenus = computed<NavItem[] | undefined>(() => {\n  const app = panelApp.value\n  if (!app) return undefined\n  if (app.children?.length) return app.children\n  return [app]\n})\n\nconst hasExpandableMenus = computed(() => {\n  return collectNavBranchPaths(panelMenus.value).length > 0\n})\n\nwatch(panelAppPath, () => {\n  allExpanded.value = false\n})\n\n/** 左轨高亮：currentPath 落在该应用下时为激活态 */\nfunction isAppActive(app: NavItem): boolean {\n  return findRootApp(props.menus, props.currentPath)?.path === app.path\n}\n\n/** 左轨选中：已切换右栏但尚未导航到该应用下任一菜单时，使用 hover 风格 */\nfunction isAppSelected(app: NavItem): boolean {\n  return panelAppPath.value === app.path && !isAppActive(app)\n}\n\nfunction handleAppClick(app: NavItem) {\n  if (app.disabled) return\n\n  panelAppPath.value = app.path\n\n  emit('item-click', findFirstLeaf(app))\n}\n\nfunction handleToggleExpandAll() {\n  if (allExpanded.value) {\n    navRef.value?.collapseAll()\n    allExpanded.value = false\n    return\n  }\n\n  navRef.value?.expandAll()\n  allExpanded.value = true\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA2EA,MAAM,QAAQ;EACd,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,UAAU;EAC1B,MAAM,SAAS,eAA2B,QAAQ;;EAGlD,MAAM,eAAe,IAAY;EACjC,MAAM,cAAc,IAAI,KAAK;EAE7B,SAAS,4BAA4B,aAAsB;GACzD,MAAM,UAAU,YAAY,MAAM,OAAO,WAAW;GACpD,IAAI,SAAS;IACX,aAAa,QAAQ,QAAQ;IAC7B;GACF;GAEA,IAAI,CAAC,aAAa,SAAS,MAAM,OAAO,QACtC,aAAa,QAAQ,MAAM,MAAM,EAAE,CAAE;EAEzC;EAEA,YACQ,CAAC,MAAM,aAAa,MAAM,KAAK,IACpC,CAAC,iBAAiB;GACjB,4BAA4B,WAAW;EACzC,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,WAAW,eAA4C;GAC3D,IAAI,CAAC,aAAa,SAAS,CAAC,MAAM,OAAO,QAAQ,OAAO,KAAA;GACxD,OAAO,MAAM,MAAM,MAAM,QAAQ,IAAI,SAAS,aAAa,KAAK;EAClE,CAAC;;EAGD,MAAM,aAAa,eAAsC;GACvD,MAAM,MAAM,SAAS;GACrB,IAAI,CAAC,KAAK,OAAO,KAAA;GACjB,IAAI,IAAI,UAAU,QAAQ,OAAO,IAAI;GACrC,OAAO,CAAC,GAAG;EACb,CAAC;EAED,MAAM,qBAAqB,eAAe;GACxC,OAAO,sBAAsB,WAAW,KAAK,CAAC,CAAC,SAAS;EAC1D,CAAC;EAED,MAAM,oBAAoB;GACxB,YAAY,QAAQ;EACtB,CAAC;;EAGD,SAAS,YAAY,KAAuB;GAC1C,OAAO,YAAY,MAAM,OAAO,MAAM,WAAW,CAAC,EAAE,SAAS,IAAI;EACnE;;EAGA,SAAS,cAAc,KAAuB;GAC5C,OAAO,aAAa,UAAU,IAAI,QAAQ,CAAC,YAAY,GAAG;EAC5D;EAEA,SAAS,eAAe,KAAc;GACpC,IAAI,IAAI,UAAU;GAElB,aAAa,QAAQ,IAAI;GAEzB,KAAK,cAAc,cAAc,GAAG,CAAC;EACvC;EAEA,SAAS,wBAAwB;GAC/B,IAAI,YAAY,OAAO;IACrB,OAAO,OAAO,YAAY;IAC1B,YAAY,QAAQ;IACpB;GACF;GAEA,OAAO,OAAO,UAAU;GACxB,YAAY,QAAQ;EACtB;;uBAxJE,mBAuDM,OAAA,EAvDA,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,GAAG,QAAA,gBAAW,aAAkB,MAAA,GAAA,CAAG,CAAC,EAAC,SAAA,CAAA,CAAA,EAAA,GAAA;IACrD,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,CAAA,EAAA,GAAA,EAAA,UAAA,IAAA,GAChB,mBAQE,UAAA,MAAA,WAPc,QAAA,QAAP,QAAG;yBADZ,YAQE,aAAA;MANC,KAAK,IAAI;MACJ;MACL,QAAQ,YAAY,GAAG;MACvB,UAAU,cAAc,GAAG;MAC3B,SAAS,QAAA,gBAAW;MACpB,UAAK,WAAE,eAAe,GAAG;;;;;;;;;IAI9B,mBAAA,4DAAA;IAEA,mBAuCM,OAAA,EAvCA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA,EAAA,GAAA,CACA,SAAA,SAAA,UAAA,GAAhB,mBAqCW,UAAA,EAAA,KAAA,EAAA,GAAA,CApCT,mBAyBM,OAAA,EAzBA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,cAAA,CAAA,EAAA,GAAA,CAChB,mBAKM,OAAA,EALA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,mBAAA,CAAA,EAAA,GAAA,CAChB,mBAA2D,MAAA,EAAtD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA,EAAA,GAAA,gBAAoB,SAAA,MAAS,KAAK,GAAA,CAAA,GAC1C,SAAA,MAAS,eAAA,UAAA,GAAlB,mBAEI,KAAA;;KAF4B,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA;uBACvC,SAAA,MAAS,WAAW,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,CAAA,GAKnB,mBAAA,SAAA,UAAA,GADR,YAgBQ,MAAA,WAAA,GAAA;;KAdL,SAAS,YAAA,QAAW,SAAA;KACrB,cAAA;;4BAYS,CAVT,mBAUS,UAAA;MATP,MAAK;MACJ,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,eAAA,CAAA;MACZ,cAAY,YAAA,QAAW,SAAA;MACvB,SAAO;SAER,YAGS,MAAA,WAAA,GAAA,MAAA;6BAF6B,CAAA,CAAf,YAAA,SAAA,UAAA,GAArB,YAAoC,MAAA,YAAA,GAAA,EAAA,KAAA,EAAA,CAAA,MAAA,UAAA,GACpC,YAAiB,MAAA,MAAA,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA;;;;iEAMzB,mBAQM,OAAA,EARA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,YAAA,CAAA,EAAA,GAAA,CAChB,YAME,MAAA,WAAA,GAAA;cALI;KAAJ,KAAI;KACH,OAAO,WAAA;KACP,gBAAc,QAAA;KACd,WAAW;KACX,aAAU,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,cAAe,MAAM"}

package/dist/components/dual-nav/dual-nav.vue.d.ts

@@ -1,12 +1,13 @@
 import { NavItem } from "../../types/nav.js";
-import { DualNavProps } from "../../types/dual-nav.js";
-
+import { DualNavProps, DualNavRailVariant } from "../../types/dual-nav.js";
 //#region src/components/dual-nav/dual-nav.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<DualNavProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
   "item-click": (item: NavItem) => any;
 }, string, import("vue").PublicProps, Readonly<DualNavProps> & Readonly<{
   "onItem-click"?: ((item: NavItem) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+  railVariant: DualNavRailVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
 export { _default };

package/dist/components/dual-nav/style2.css

@@ -33,6 +33,19 @@
   padding: 8px 6px;
   background-color: var(--u-bg-color-middle);
 }
+.u-dual-nav--labeled .u-dual-nav__rail {
+  width: var(--u-nav-rail-labeled-width);
+  padding: 8px 4px;
+  gap: 2px;
+}
+.u-dual-nav--labeled .u-dual-nav__app {
+  aspect-ratio: auto;
+  max-width: none;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px 2px;
+  min-height: 0;
+}
 .u-dual-nav__divider {
   flex-shrink: 0;
   width: 1px;
@@ -153,6 +166,15 @@
   font-weight: 600;
   line-height: 1;
 }
+.u-dual-nav__app-label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--u-font-size-assist-default);
+  line-height: 1.2;
+  text-align: center;
+}
 .u-dual-nav__app-tip {
   display: flex;
   flex-direction: column;

package/dist/components/group-nav/group-nav-item.js

@@ -0,0 +1,40 @@
+import _sfc_main$1 from "../nav/nav-icon.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+import { bem } from "@veltra/utils";
+//#region src/components/group-nav/group-nav-item.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "UGroupNavItem",
+	__name: "group-nav-item",
+	props: {
+		item: {},
+		active: { type: Boolean }
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const cls = bem("group-nav");
+		function handleClick() {
+			if (props.item.disabled) return;
+			emit("click", props.item);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", {
+				class: normalizeClass([
+					unref(cls).e("item"),
+					unref(bem).is("active", __props.active),
+					unref(bem).is("disabled", __props.item.disabled ?? false)
+				]),
+				onClick: handleClick
+			}, [__props.item.icon ? (openBlock(), createBlock(_sfc_main$1, {
+				key: 0,
+				icon: __props.item.icon,
+				class: normalizeClass(unref(cls).e("icon"))
+			}, null, 8, ["icon", "class"])) : createCommentVNode("v-if", true), createElementVNode("span", { class: normalizeClass(unref(cls).e("item-title")) }, toDisplayString(__props.item.title), 3)], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=group-nav-item.js.map

package/dist/components/group-nav/group-nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-nav-item.js","names":[],"sources":["../../../src/components/group-nav/group-nav-item.vue"],"sourcesContent":["<template>\n  <li\n    :class=\"[cls.e('item'), bem.is('active', active), bem.is('disabled', item.disabled ?? false)]\"\n    @click=\"handleClick\"\n  >\n    <NavIcon v-if=\"item.icon\" :icon=\"item.icon\" :class=\"cls.e('icon')\" />\n\n    <span :class=\"cls.e('item-title')\">\n      {{ item.title }}\n    </span>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\nimport { bem } from '@veltra/utils'\n\nimport type { NavItem } from '../../types/nav'\nimport NavIcon from '../nav/nav-icon.vue'\n\ndefineOptions({ name: 'UGroupNavItem' })\n\nconst props = defineProps<{ item: NavItem; active: boolean }>()\n\nconst emit = defineEmits<{ (e: 'click', item: NavItem): void }>()\n\nconst cls = bem('group-nav')\n\nfunction handleClick() {\n  if (props.item.disabled) return\n  emit('click', props.item)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;EAqBA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,WAAW;EAE3B,SAAS,cAAc;GACrB,IAAI,MAAM,KAAK,UAAU;GACzB,KAAK,SAAS,MAAM,IAAI;EAC1B;;uBA7BE,mBASK,MAAA;IARF,OAAK,eAAA;KAAG,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA;KAAU,MAAA,GAAA,CAAG,CAAC,GAAE,UAAW,QAAA,MAAM;KAAG,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,QAAA,KAAK,YAAQ,KAAA;IAAA,CAAA;IACjF,SAAO;OAEO,QAAA,KAAK,QAAA,UAAA,GAApB,YAAqE,aAAA;;IAA1C,MAAM,QAAA,KAAK;IAAO,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,CAAA;uEAEzD,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,YAAA,CAAA,EAAA,GAAA,gBACd,QAAA,KAAK,KAAK,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/components/group-nav/group-nav.js

@@ -0,0 +1,47 @@
+import _sfc_main$1 from "../scroll/scroll.js";
+import _sfc_main$2 from "./group-nav-item.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { bem } from "@veltra/utils";
+//#region src/components/group-nav/group-nav.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "UGroupNav",
+	__name: "group-nav",
+	props: {
+		currentPath: {},
+		groups: {}
+	},
+	emits: ["item-click"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const cls = bem("group-nav");
+		function handleItemClick(item) {
+			emit("item-click", item);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(_sfc_main$1), {
+				tag: "ul",
+				class: normalizeClass(unref(cls).b),
+				"container-class": unref(cls).e("container")
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.groups, (group, index) => {
+					return openBlock(), createElementBlock("li", {
+						key: group.title || index,
+						class: normalizeClass(unref(cls).e("group"))
+					}, [createElementVNode("div", { class: normalizeClass(unref(cls).e("group-label")) }, toDisplayString(group.title), 3), createElementVNode("ul", { class: normalizeClass(unref(cls).e("group-list")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(group.children, (child, childIndex) => {
+						return openBlock(), createBlock(_sfc_main$2, {
+							key: child.path || childIndex,
+							item: child,
+							active: __props.currentPath === child.path,
+							onClick: handleItemClick
+						}, null, 8, ["item", "active"]);
+					}), 128))], 2)], 2);
+				}), 128))]),
+				_: 1
+			}, 8, ["class", "container-class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=group-nav.js.map

package/dist/components/group-nav/group-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-nav.js","names":[],"sources":["../../../src/components/group-nav/group-nav.vue"],"sourcesContent":["<template>\n  <u-scroll tag=\"ul\" :class=\"cls.b\" :container-class=\"cls.e('container')\">\n    <li v-for=\"(group, index) of groups\" :key=\"group.title || index\" :class=\"cls.e('group')\">\n      <div :class=\"cls.e('group-label')\">{{ group.title }}</div>\n      <ul :class=\"cls.e('group-list')\">\n        <GroupNavItem\n          v-for=\"(child, childIndex) of group.children\"\n          :key=\"child.path || childIndex\"\n          :item=\"child\"\n          :active=\"currentPath === child.path\"\n          @click=\"handleItemClick\"\n        />\n      </ul>\n    </li>\n  </u-scroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem } from '@veltra/utils'\n\nimport type { GroupNavEmits, GroupNavProps } from '../../types/group-nav'\nimport type { NavItem } from '../../types/nav'\nimport { UScroll } from '../scroll'\nimport GroupNavItem from './group-nav-item.vue'\n\ndefineOptions({ name: 'UGroupNav' })\n\ndefineProps<GroupNavProps>()\nconst emit = defineEmits<GroupNavEmits>()\n\nconst cls = bem('group-nav')\n\nfunction handleItemClick(item: NavItem) {\n  emit('item-click', item)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;EA4BA,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,WAAW;EAE3B,SAAS,gBAAgB,MAAe;GACtC,KAAK,cAAc,IAAI;EACzB;;uBAjCE,YAaW,MAAA,WAAA,GAAA;IAbD,KAAI;IAAM,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,CAAC;IAAG,mBAAiB,MAAA,GAAA,CAAG,CAAC,EAAC,WAAA;;2BACnB,EAAA,UAAA,IAAA,GAApC,mBAWK,UAAA,MAAA,WAXwB,QAAA,SAAjB,OAAO,UAAK;yBAAxB,mBAWK,MAAA;MAXiC,KAAK,MAAM,SAAS;MAAQ,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;SAC5E,mBAA0D,OAAA,EAApD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA,EAAA,GAAA,gBAAoB,MAAM,KAAK,GAAA,CAAA,GACjD,mBAQK,MAAA,EARA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,YAAA,CAAA,EAAA,GAAA,EAAA,UAAA,IAAA,GACf,mBAME,UAAA,MAAA,WAL8B,MAAM,WAA5B,OAAO,eAAU;0BAD3B,YAME,aAAA;OAJC,KAAK,MAAM,QAAQ;OACnB,MAAM;OACN,QAAQ,QAAA,gBAAgB,MAAM;OAC9B,SAAO"}

package/dist/components/group-nav/group-nav.vue.d.ts

@@ -0,0 +1,13 @@
+import { NavItem } from "../../types/nav.js";
+import { GroupNavProps } from "../../types/group-nav.js";
+
+//#region src/components/group-nav/group-nav.vue.d.ts
+declare const __VLS_export: import("vue").DefineComponent<GroupNavProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+  "item-click": (item: NavItem) => any;
+}, string, import("vue").PublicProps, Readonly<GroupNavProps> & Readonly<{
+  "onItem-click"?: ((item: NavItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };
+//# sourceMappingURL=group-nav.vue.d.ts.map

package/dist/components/group-nav/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./group-nav.vue.js";

package/dist/components/group-nav/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/group-nav/style.js

@@ -0,0 +1,3 @@
+import "../scroll/style.js";
+import "../nav/style.js";
+import "./style2.css";

package/dist/components/group-nav/style2.css

@@ -0,0 +1,119 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-group-nav {
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  color: var(--u-nav-color);
+  background-color: var(--u-nav-bg-color);
+  backdrop-filter: var(--u-bg-filter);
+  -webkit-backdrop-filter: var(--u-bg-filter);
+  background-image: var(--u-nav-bg-image);
+  background-size: cover;
+  background-repeat: no-repeat;
+  border: 1px solid var(--u-border-color);
+  border-radius: calc(var(--u-radius-large) + 6px);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.08);
+}
+.u-group-nav__container {
+  padding: 8px;
+}
+.u-group-nav__group, .u-group-nav__group-list, .u-group-nav__item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.u-group-nav__group + .u-group-nav__group {
+  margin-top: 16px;
+}
+.u-group-nav__group-label {
+  padding: 0 8px 6px;
+  font-size: var(--u-font-size-assist-default);
+  font-weight: 500;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+  color: var(--u-text-color-second);
+}
+.u-group-nav__group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.u-group-nav__item {
+  width: 100%;
+  min-height: var(--u-nav-height-default);
+  margin: 0;
+  padding: 0 8px;
+  gap: 8px;
+  cursor: pointer;
+  color: inherit;
+  border-radius: calc(var(--u-radius-default) + 4px);
+  transition: background-color 0.15s ease, color 0.15s ease;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-group-nav__item:hover {
+  background-color: var(--u-nav-hover-bg);
+  color: var(--u-nav-hover-color);
+}
+.u-group-nav__item.is-active {
+  position: relative;
+  background-color: var(--u-nav-active-bg);
+  color: var(--u-nav-active-color);
+}
+.u-group-nav__item.is-active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 3px;
+  height: 56%;
+  min-height: 10px;
+  border-radius: 9999px;
+  background-color: var(--u-color-primary);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.u-group-nav__item.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.u-group-nav__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  flex-shrink: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: calc(var(--u-radius-small) + 2px);
+  color: inherit;
+  object-fit: contain;
+}
+.u-group-nav__item-title {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--u-font-size-main-default);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/components/index.d.ts

@@ -76,22 +76,23 @@ import { _default as _default$66 } from "./nav/nav.vue.js";
 import { _default as _default$67 } from "./nav/nav-sub.vue.js";
 import { _default as _default$68 } from "./nav/nav-item.vue.js";
 import { _default as _default$69 } from "./dual-nav/dual-nav.vue.js";
-import { _default as _default$70 } from "./grid-input/grid-input.vue.js";
-import { _default as _default$71 } from "./switch/switch.vue.js";
-import { _default as _default$72 } from "./form-item/form-item.vue.js";
-import { _default as _default$73 } from "./radio-group/radio-group.vue.js";
-import { _default as _default$74 } from "./checkbox-group/checkbox-group.vue.js";
-import { _default as _default$75 } from "./file-viewer/file-viewer.vue.js";
-import { _default as _default$76 } from "./text/text.vue.js";
-import { _default as _default$77 } from "./select/select.vue.js";
-import { _default as _default$78 } from "./breadcrumb/breadcrumb.vue.js";
-import { _default as _default$79 } from "./icon/icon.vue.js";
-import { _default as _default$80 } from "./kbd/kbd.vue.js";
-import { _default as _default$81 } from "./pop-confirm/pop-confirm.vue.js";
-import { _default as _default$82 } from "./paginator/paginator.vue.js";
-import { _default as _default$83 } from "./tag/tag.vue.js";
-import { _default as _default$84 } from "./float-button/float-button.vue.js";
-import { _default as _default$85 } from "./palette/palette.vue.js";
-import { _default as _default$86 } from "./grid/grid.vue.js";
-import { _default as _default$87 } from "./grid/grid-item.vue.js";
-import { _default as _default$88 } from "./badge/badge.vue.js";
+import { _default as _default$70 } from "./group-nav/group-nav.vue.js";
+import { _default as _default$71 } from "./grid-input/grid-input.vue.js";
+import { _default as _default$72 } from "./switch/switch.vue.js";
+import { _default as _default$73 } from "./form-item/form-item.vue.js";
+import { _default as _default$74 } from "./radio-group/radio-group.vue.js";
+import { _default as _default$75 } from "./checkbox-group/checkbox-group.vue.js";
+import { _default as _default$76 } from "./file-viewer/file-viewer.vue.js";
+import { _default as _default$77 } from "./text/text.vue.js";
+import { _default as _default$78 } from "./select/select.vue.js";
+import { _default as _default$79 } from "./breadcrumb/breadcrumb.vue.js";
+import { _default as _default$80 } from "./icon/icon.vue.js";
+import { _default as _default$81 } from "./kbd/kbd.vue.js";
+import { _default as _default$82 } from "./pop-confirm/pop-confirm.vue.js";
+import { _default as _default$83 } from "./paginator/paginator.vue.js";
+import { _default as _default$84 } from "./tag/tag.vue.js";
+import { _default as _default$85 } from "./float-button/float-button.vue.js";
+import { _default as _default$86 } from "./palette/palette.vue.js";
+import { _default as _default$87 } from "./grid/grid.vue.js";
+import { _default as _default$88 } from "./grid/grid-item.vue.js";
+import { _default as _default$89 } from "./badge/badge.vue.js";