@veltra/desktop 1.0.0

package/dist/components/menu/style2.css

@@ -0,0 +1,432 @@
+@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-menu {
+  --u-menu-color: #0f172a;
+  --u-menu-hover-bg: rgba(148, 163, 184, 0.12);
+  --u-menu-hover-color: var(--u-text-color-title);
+  --u-menu-active-bg: rgba(59, 130, 246, 0.12);
+  --u-menu-active-color: var(--u-color-primary-dark-1);
+  --u-menu-height-small: 32px;
+  --u-menu-height-default: 36px;
+  --u-menu-height-large: 40px;
+  --u-menu-bg-color: var(--u-bg-color-top);
+  --u-menu-bg-blur: none;
+  --u-menu-bg-saturate: none;
+  --u-menu-bg-image: none;
+}
+html[data-theme=dark] .u-menu {
+  --u-menu-color: var(--u-text-color-main);
+  --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
+  --u-menu-hover-color: var(--u-text-color-title);
+  --u-menu-active-bg: rgba(96, 165, 250, 0.2);
+  --u-menu-active-color: var(--u-text-color-white);
+  --u-menu-bg-color: var(--u-bg-color-middle);
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme=light]) .u-menu {
+    --u-menu-color: var(--u-text-color-main);
+    --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
+    --u-menu-hover-color: var(--u-text-color-title);
+    --u-menu-active-bg: rgba(96, 165, 250, 0.2);
+    --u-menu-active-color: var(--u-text-color-white);
+    --u-menu-bg-color: var(--u-bg-color-middle);
+  }
+}
+.u-menu {
+  user-select: none;
+  color: var(--u-menu-color);
+}
+.u-menu__item, .u-menu__sub, .u-menu__sub-list {
+  list-style: none;
+}
+.u-menu__item, .u-menu__sub-content {
+  width: 100%;
+  cursor: pointer;
+  gap: 8px;
+  margin: 1px 0;
+  padding: 0 8px;
+  color: inherit;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-menu__item:hover, .u-menu__sub-content:hover {
+  background-color: var(--u-menu-hover-bg);
+  color: var(--u-menu-hover-color);
+}
+.u-menu__item.is-expanded, .u-menu__sub-content.is-expanded {
+  color: var(--u-text-color-title);
+}
+.u-menu__item.is-branch-active, .u-menu__sub-content.is-branch-active {
+  color: var(--u-text-color-title);
+}
+.u-menu__item.is-active, .u-menu__sub-content.is-active {
+  position: relative;
+  background-color: var(--u-menu-active-bg);
+  color: var(--u-menu-active-color);
+}
+.u-menu__item.is-active::before, .u-menu__sub-content.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-menu__item.is-disabled, .u-menu__sub-content.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.u-menu__item-title, .u-menu__sub-title {
+  flex: 1;
+  min-width: 0;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.u-menu .u-menu__item + .u-menu__item,
+.u-menu .u-menu__item + .u-menu__sub,
+.u-menu .u-menu__sub + .u-menu__item,
+.u-menu .u-menu__sub + .u-menu__sub {
+  margin-top: 3px;
+}
+.u-menu--small {
+  font-size: var(--u-font-size-main-small);
+}
+.u-menu--small .u-menu__item,
+.u-menu--small .u-menu__sub-content {
+  min-height: var(--u-menu-height-small);
+  border-radius: calc(var(--u-radius-small) + 4px);
+}
+.u-menu--small .u-menu__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.u-menu--small .u-menu__sub-expand,
+.u-menu--small .u-menu__icon {
+  flex-shrink: 0;
+}
+.u-menu--default {
+  font-size: var(--u-font-size-main-default);
+}
+.u-menu--default .u-menu__item,
+.u-menu--default .u-menu__sub-content {
+  min-height: var(--u-menu-height-default);
+  border-radius: calc(var(--u-radius-default) + 4px);
+}
+.u-menu--default .u-menu__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.u-menu--default .u-menu__sub-expand,
+.u-menu--default .u-menu__icon {
+  flex-shrink: 0;
+}
+.u-menu--large {
+  font-size: var(--u-font-size-main-large);
+}
+.u-menu--large .u-menu__item,
+.u-menu--large .u-menu__sub-content {
+  min-height: var(--u-menu-height-large);
+  border-radius: calc(var(--u-radius-large) + 4px);
+}
+.u-menu--large .u-menu__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.u-menu--large .u-menu__sub-expand,
+.u-menu--large .u-menu__icon {
+  flex-shrink: 0;
+}
+
+.u-collapsed-menu {
+  --u-menu-color: #0f172a;
+  --u-menu-hover-bg: rgba(148, 163, 184, 0.12);
+  --u-menu-hover-color: var(--u-text-color-title);
+  --u-menu-active-bg: rgba(59, 130, 246, 0.12);
+  --u-menu-active-color: var(--u-color-primary-dark-1);
+  --u-menu-height-small: 32px;
+  --u-menu-height-default: 36px;
+  --u-menu-height-large: 40px;
+  --u-menu-bg-color: var(--u-bg-color-top);
+  --u-menu-bg-blur: none;
+  --u-menu-bg-saturate: none;
+  --u-menu-bg-image: none;
+}
+html[data-theme=dark] .u-collapsed-menu {
+  --u-menu-color: var(--u-text-color-main);
+  --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
+  --u-menu-hover-color: var(--u-text-color-title);
+  --u-menu-active-bg: rgba(96, 165, 250, 0.2);
+  --u-menu-active-color: var(--u-text-color-white);
+  --u-menu-bg-color: var(--u-bg-color-middle);
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme=light]) .u-collapsed-menu {
+    --u-menu-color: var(--u-text-color-main);
+    --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
+    --u-menu-hover-color: var(--u-text-color-title);
+    --u-menu-active-bg: rgba(96, 165, 250, 0.2);
+    --u-menu-active-color: var(--u-text-color-white);
+    --u-menu-bg-color: var(--u-bg-color-middle);
+  }
+}
+.u-collapsed-menu {
+  user-select: none;
+  color: var(--u-menu-color);
+}
+.u-collapsed-menu__item, .u-collapsed-menu__sub, .u-collapsed-menu__sub-list {
+  list-style: none;
+}
+.u-collapsed-menu__item, .u-collapsed-menu__sub-content {
+  width: 100%;
+  cursor: pointer;
+  gap: 8px;
+  margin: 1px 0;
+  padding: 0 8px;
+  color: inherit;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-collapsed-menu__item:hover, .u-collapsed-menu__sub-content:hover {
+  background-color: var(--u-menu-hover-bg);
+  color: var(--u-menu-hover-color);
+}
+.u-collapsed-menu__item.is-expanded, .u-collapsed-menu__sub-content.is-expanded {
+  color: var(--u-text-color-title);
+}
+.u-collapsed-menu__item.is-branch-active, .u-collapsed-menu__sub-content.is-branch-active {
+  color: var(--u-text-color-title);
+}
+.u-collapsed-menu__item.is-active, .u-collapsed-menu__sub-content.is-active {
+  position: relative;
+  background-color: var(--u-menu-active-bg);
+  color: var(--u-menu-active-color);
+}
+.u-collapsed-menu__item.is-active::before, .u-collapsed-menu__sub-content.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-collapsed-menu__item.is-disabled, .u-collapsed-menu__sub-content.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.u-collapsed-menu__item-title, .u-collapsed-menu__sub-title {
+  flex: 1;
+  min-width: 0;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.u-collapsed-menu .u-collapsed-menu__item + .u-collapsed-menu__item,
+.u-collapsed-menu .u-collapsed-menu__item + .u-collapsed-menu__sub,
+.u-collapsed-menu .u-collapsed-menu__sub + .u-collapsed-menu__item,
+.u-collapsed-menu .u-collapsed-menu__sub + .u-collapsed-menu__sub {
+  margin-top: 3px;
+}
+.u-collapsed-menu--small {
+  font-size: var(--u-font-size-main-small);
+}
+.u-collapsed-menu--small .u-collapsed-menu__item,
+.u-collapsed-menu--small .u-collapsed-menu__sub-content {
+  min-height: var(--u-menu-height-small);
+  border-radius: calc(var(--u-radius-small) + 4px);
+}
+.u-collapsed-menu--small .u-collapsed-menu__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.u-collapsed-menu--small .u-collapsed-menu__sub-expand,
+.u-collapsed-menu--small .u-collapsed-menu__icon {
+  flex-shrink: 0;
+}
+.u-collapsed-menu--default {
+  font-size: var(--u-font-size-main-default);
+}
+.u-collapsed-menu--default .u-collapsed-menu__item,
+.u-collapsed-menu--default .u-collapsed-menu__sub-content {
+  min-height: var(--u-menu-height-default);
+  border-radius: calc(var(--u-radius-default) + 4px);
+}
+.u-collapsed-menu--default .u-collapsed-menu__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.u-collapsed-menu--default .u-collapsed-menu__sub-expand,
+.u-collapsed-menu--default .u-collapsed-menu__icon {
+  flex-shrink: 0;
+}
+.u-collapsed-menu--large {
+  font-size: var(--u-font-size-main-large);
+}
+.u-collapsed-menu--large .u-collapsed-menu__item,
+.u-collapsed-menu--large .u-collapsed-menu__sub-content {
+  min-height: var(--u-menu-height-large);
+  border-radius: calc(var(--u-radius-large) + 4px);
+}
+.u-collapsed-menu--large .u-collapsed-menu__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.u-collapsed-menu--large .u-collapsed-menu__sub-expand,
+.u-collapsed-menu--large .u-collapsed-menu__icon {
+  flex-shrink: 0;
+}
+
+.u-menu {
+  --u-menu-bg-color: var(--u-bg-color-top);
+  --u-menu-bg-blur: none;
+  --u-menu-bg-saturate: none;
+  --u-menu-bg-image: none;
+}
+html[data-theme=dark] .u-menu {
+  --u-menu-bg-color: var(--u-bg-color-middle);
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme=light]) .u-menu {
+    --u-menu-bg-color: var(--u-bg-color-middle);
+  }
+}
+.u-menu {
+  margin: 0;
+  padding: 0;
+  background-color: var(--u-menu-bg-color);
+  backdrop-filter: var(--u-menu-bg-blur) var(--u-menu-bg-saturate);
+  background-image: var(--u-menu-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-menu__container {
+  padding: 8px;
+}
+.u-menu__sub-expand, .u-menu__icon {
+  color: var(--u-text-color-second);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+.u-menu__icon {
+  border-radius: calc(var(--u-radius-small) + 2px);
+  color: inherit;
+  object-fit: contain;
+}
+.u-menu__item {
+  margin: 0;
+}
+.u-menu__sub {
+  margin: 0;
+}
+.u-menu__sub-list {
+  overflow: hidden;
+  margin: 2px 0 0 12px;
+  padding: 2px 0 2px 8px;
+  border-left: 1px solid color-mix(in srgb, var(--u-border-color) 52%, transparent);
+}
+@supports selector(:has(*)) {
+  .u-menu__sub-list:has(.u-menu__item.is-active) {
+    border-left-color: var(--u-color-primary);
+  }
+}
+.u-menu__sub-expand {
+  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), color 0.18s ease;
+}
+.u-menu__sub-expand.is-expanded {
+  transform: rotate(90deg);
+  color: var(--u-text-color-title);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease;
+}
+
+.u-collapsed-menu {
+  margin: 0;
+  padding: 0;
+}
+.u-collapsed-menu__container {
+  padding: 6px;
+}
+.u-collapsed-menu__item, .u-collapsed-menu__sub-content {
+  width: 100%;
+}
+.u-collapsed-menu__item.is-first-level, .u-collapsed-menu__sub-content.is-first-level {
+  justify-content: center;
+}
+.u-collapsed-menu__item.is-first-level .u-collapsed-menu__icon, .u-collapsed-menu__sub-content.is-first-level .u-collapsed-menu__icon {
+  margin-right: 0;
+}
+.u-collapsed-menu__item {
+  margin: 0;
+}
+.u-collapsed-menu__icon {
+  color: var(--u-text-color-second);
+  object-fit: contain;
+}
+.u-collapsed-menu__item-title, .u-collapsed-menu__sub-title {
+  font-weight: 500;
+}
+.u-collapsed-menu__sub-list {
+  margin: 0;
+  max-height: min(320px, 60vh);
+  padding: 0;
+}
+.u-collapsed-menu__panel {
+  min-width: 240px;
+  padding: 8px !important;
+  background-color: var(--u-menu-bg-color);
+  backdrop-filter: var(--u-menu-bg-blur) var(--u-menu-bg-saturate);
+  border: 1px solid var(--u-border-color);
+  border-radius: calc(var(--u-radius-large) + 4px);
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
+}
+.u-collapsed-menu__panel .u-tip__arrow {
+  display: none;
+}
+.u-collapsed-menu__panel .u-scroll__content {
+  padding: 0;
+}

package/dist/components/menu/use-menu-item.js

@@ -0,0 +1,35 @@
+import { MenuDIKey } from "./di.js";
+import { computed, inject, watch } from "vue";
+import { scrollIntoContainerView } from "@veltra/utils";
+//#region src/components/menu/use-menu-item.ts
+function useMenuItem(options) {
+	const { itemProps, itemRef } = options;
+	const { cls, collapsedCls, menuProps, menuEmit } = inject(MenuDIKey);
+	const active = computed(() => {
+		return menuProps.currentPath === itemProps.menu.path;
+	});
+	let changedByClick = false;
+	watch([active, itemRef], ([active, itemEl]) => {
+		if (changedByClick) {
+			changedByClick = false;
+			return;
+		}
+		if (!active || !itemEl) return;
+		scrollIntoContainerView(itemEl, null);
+	});
+	function handleClickMenu() {
+		if (itemProps.menu.disabled) return;
+		changedByClick = true;
+		menuEmit("item-click", itemProps.menu);
+	}
+	return {
+		cls,
+		collapsedCls,
+		active,
+		handleClickMenu
+	};
+}
+//#endregion
+export { useMenuItem };
+
+//# sourceMappingURL=use-menu-item.js.map

package/dist/components/menu/use-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu-item.js","names":[],"sources":["../../../src/components/menu/use-menu-item.ts"],"sourcesContent":["import { scrollIntoContainerView, type BEM } from '@veltra/utils'\nimport { computed, inject, watch, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { MenuItem } from '../../types'\nimport { MenuDIKey } from './di'\n\ninterface Options {\n  itemProps: { menu: MenuItem; depth: number }\n  itemRef: ShallowRef<HTMLElement | null>\n}\n\ninterface UseMenuItemReturned {\n  cls: BEM<'menu'>\n  collapsedCls: BEM<'collapsed-menu'>\n\n  active: ComputedRef<boolean>\n  handleClickMenu: () => void\n}\n\nexport function useMenuItem(options: Options): UseMenuItemReturned {\n  const { itemProps, itemRef } = options\n  const { cls, collapsedCls, menuProps, menuEmit } = inject(MenuDIKey)!\n\n  const active = computed(() => {\n    return menuProps.currentPath === itemProps.menu.path\n  })\n\n  let changedByClick = false\n  watch([active, itemRef], ([active, itemEl]) => {\n    if (changedByClick) {\n      changedByClick = false\n      return\n    }\n    if (!active || !itemEl) return\n    scrollIntoContainerView(itemEl, null)\n  })\n\n  function handleClickMenu() {\n    if (itemProps.menu.disabled) return\n    changedByClick = true\n    menuEmit('item-click', itemProps.menu)\n  }\n\n  return {\n    cls,\n    collapsedCls,\n\n    active,\n    handleClickMenu\n  }\n}\n"],"mappings":";;;;AAmBA,SAAgB,YAAY,SAAuC;CACjE,MAAM,EAAE,WAAW,YAAY;CAC/B,MAAM,EAAE,KAAK,cAAc,WAAW,aAAa,OAAO,UAAU;CAEpE,MAAM,SAAS,eAAe;AAC5B,SAAO,UAAU,gBAAgB,UAAU,KAAK;GAChD;CAEF,IAAI,iBAAiB;AACrB,OAAM,CAAC,QAAQ,QAAQ,GAAG,CAAC,QAAQ,YAAY;AAC7C,MAAI,gBAAgB;AAClB,oBAAiB;AACjB;;AAEF,MAAI,CAAC,UAAU,CAAC,OAAQ;AACxB,0BAAwB,QAAQ,KAAK;GACrC;CAEF,SAAS,kBAAkB;AACzB,MAAI,UAAU,KAAK,SAAU;AAC7B,mBAAiB;AACjB,WAAS,cAAc,UAAU,KAAK;;AAGxC,QAAO;EACL;EACA;EAEA;EACA;EACD"}

package/dist/components/menu/use-menu-transition.js

@@ -0,0 +1,71 @@
+import { removeStyles, setStyles } from "@veltra/utils";
+//#region src/components/menu/use-menu-transition.ts
+const transitionEnter = "height 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1)";
+const transitionLeave = "height 0.2s cubic-bezier(0.4, 0, 1, 1), padding-top 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.12s cubic-bezier(0.4, 0, 1, 1)";
+function useMenuTransition() {
+	function resetStyles(el) {
+		removeStyles(el, [
+			"height",
+			"padding-top",
+			"overflow",
+			"transition",
+			"opacity",
+			"will-change"
+		]);
+	}
+	function enter(el) {
+		const height = el.scrollHeight;
+		const paddingTop = getComputedStyle(el).paddingTop;
+		setStyles(el, {
+			height: 0,
+			paddingTop: 0,
+			overflow: "hidden",
+			opacity: 0,
+			transition: transitionEnter,
+			willChange: "height, opacity"
+		});
+		requestAnimationFrame(() => {
+			setStyles(el, {
+				height: `${height}px`,
+				paddingTop,
+				opacity: 1
+			});
+		});
+	}
+	function afterEnter(el) {
+		resetStyles(el);
+	}
+	function beforeLeave(el) {
+		const paddingTop = getComputedStyle(el).paddingTop;
+		setStyles(el, {
+			height: `${el.scrollHeight}px`,
+			paddingTop,
+			overflow: "hidden",
+			opacity: 1,
+			transition: transitionLeave,
+			willChange: "height, opacity"
+		});
+	}
+	function leave(el) {
+		el.offsetHeight;
+		setStyles(el, {
+			height: 0,
+			paddingTop: 0,
+			opacity: 0
+		});
+	}
+	function afterLeave(el) {
+		resetStyles(el);
+	}
+	return {
+		enter,
+		afterEnter,
+		beforeLeave,
+		leave,
+		afterLeave
+	};
+}
+//#endregion
+export { useMenuTransition };
+
+//# sourceMappingURL=use-menu-transition.js.map

package/dist/components/menu/use-menu-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu-transition.js","names":[],"sources":["../../../src/components/menu/use-menu-transition.ts"],"sourcesContent":["import { removeStyles, setStyles } from '@veltra/utils'\n\ninterface UseMenuTransitionReturned {\n  enter: (el: HTMLElement) => void\n  afterEnter: (el: HTMLElement) => void\n  beforeLeave: (el: HTMLElement) => void\n  leave: (el: HTMLElement) => void\n  afterLeave: (el: HTMLElement) => void\n}\n\nconst transitionEnter =\n  'height 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1)'\n\nconst transitionLeave =\n  'height 0.2s cubic-bezier(0.4, 0, 1, 1), padding-top 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.12s cubic-bezier(0.4, 0, 1, 1)'\n\nexport function useMenuTransition(): UseMenuTransitionReturned {\n  function resetStyles(el: HTMLElement) {\n    removeStyles(el, ['height', 'padding-top', 'overflow', 'transition', 'opacity', 'will-change'])\n  }\n\n  function enter(el: HTMLElement) {\n    const height = el.scrollHeight\n    const paddingTop = getComputedStyle(el).paddingTop\n\n    setStyles(el as HTMLElement, {\n      height: 0,\n      paddingTop: 0,\n      overflow: 'hidden',\n      opacity: 0,\n      transition: transitionEnter,\n      willChange: 'height, opacity'\n    })\n\n    requestAnimationFrame(() => {\n      setStyles(el, { height: `${height}px`, paddingTop, opacity: 1 })\n    })\n  }\n\n  function afterEnter(el: HTMLElement) {\n    resetStyles(el)\n  }\n\n  function beforeLeave(el: HTMLElement) {\n    const paddingTop = getComputedStyle(el).paddingTop\n\n    setStyles(el, {\n      height: `${el.scrollHeight}px`,\n      paddingTop,\n      overflow: 'hidden',\n      opacity: 1,\n      transition: transitionLeave,\n      willChange: 'height, opacity'\n    })\n  }\n\n  function leave(el: HTMLElement) {\n    // 强制刷新，避免收起时浏览器合并样式导致动画缺失\n    void el.offsetHeight\n\n    setStyles(el, { height: 0, paddingTop: 0, opacity: 0 })\n  }\n\n  function afterLeave(el: HTMLElement) {\n    resetStyles(el)\n  }\n\n  return { enter, afterEnter, beforeLeave, leave, afterLeave }\n}\n"],"mappings":";;AAUA,MAAM,kBACJ;AAEF,MAAM,kBACJ;AAEF,SAAgB,oBAA+C;CAC7D,SAAS,YAAY,IAAiB;AACpC,eAAa,IAAI;GAAC;GAAU;GAAe;GAAY;GAAc;GAAW;GAAc,CAAC;;CAGjG,SAAS,MAAM,IAAiB;EAC9B,MAAM,SAAS,GAAG;EAClB,MAAM,aAAa,iBAAiB,GAAG,CAAC;AAExC,YAAU,IAAmB;GAC3B,QAAQ;GACR,YAAY;GACZ,UAAU;GACV,SAAS;GACT,YAAY;GACZ,YAAY;GACb,CAAC;AAEF,8BAA4B;AAC1B,aAAU,IAAI;IAAE,QAAQ,GAAG,OAAO;IAAK;IAAY,SAAS;IAAG,CAAC;IAChE;;CAGJ,SAAS,WAAW,IAAiB;AACnC,cAAY,GAAG;;CAGjB,SAAS,YAAY,IAAiB;EACpC,MAAM,aAAa,iBAAiB,GAAG,CAAC;AAExC,YAAU,IAAI;GACZ,QAAQ,GAAG,GAAG,aAAa;GAC3B;GACA,UAAU;GACV,SAAS;GACT,YAAY;GACZ,YAAY;GACb,CAAC;;CAGJ,SAAS,MAAM,IAAiB;AAEzB,KAAG;AAER,YAAU,IAAI;GAAE,QAAQ;GAAG,YAAY;GAAG,SAAS;GAAG,CAAC;;CAGzD,SAAS,WAAW,IAAiB;AACnC,cAAY,GAAG;;AAGjB,QAAO;EAAE;EAAO;EAAY;EAAa;EAAO;EAAY"}

package/dist/components/menu/walk-menu-path.js

@@ -0,0 +1,16 @@
+//#region src/components/menu/walk-menu-path.ts
+/**
+* 深度优先 + 路径；回调返回 `false` 时剪枝当前节点子树（不中断兄弟）。
+* `@cat-kit/core` 的 `dfs` 在返回 `true` 时会终止整段遍历，语义不同，故保留此辅助。
+*/
+function walkMenuWithPath(data, cb, childrenKey = "children", prefix = []) {
+	const path = [...prefix, data];
+	if (cb(data, path) === false) return;
+	const raw = data[childrenKey];
+	if (!Array.isArray(raw)) return;
+	for (let i = 0; i < raw.length; i++) walkMenuWithPath(raw[i], cb, childrenKey, path);
+}
+//#endregion
+export { walkMenuWithPath };
+
+//# sourceMappingURL=walk-menu-path.js.map

package/dist/components/menu/walk-menu-path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"walk-menu-path.js","names":[],"sources":["../../../src/components/menu/walk-menu-path.ts"],"sourcesContent":["/**\n * 深度优先 + 路径；回调返回 `false` 时剪枝当前节点子树（不中断兄弟）。\n * `@cat-kit/core` 的 `dfs` 在返回 `true` 时会终止整段遍历，语义不同，故保留此辅助。\n */\nexport function walkMenuWithPath<T extends Record<string, unknown>>(\n  data: T,\n  cb: (node: T, path: T[]) => void | false,\n  childrenKey = 'children',\n  prefix: T[] = []\n): void {\n  const path = [...prefix, data]\n  if (cb(data, path) === false) return\n  const raw = data[childrenKey]\n  if (!Array.isArray(raw)) return\n  for (let i = 0; i < raw.length; i++) {\n    walkMenuWithPath(raw[i] as T, cb, childrenKey, path)\n  }\n}\n"],"mappings":";;;;;AAIA,SAAgB,iBACd,MACA,IACA,cAAc,YACd,SAAc,EAAE,EACV;CACN,MAAM,OAAO,CAAC,GAAG,QAAQ,KAAK;AAC9B,KAAI,GAAG,MAAM,KAAK,KAAK,MAAO;CAC9B,MAAM,MAAM,KAAK;AACjB,KAAI,CAAC,MAAM,QAAQ,IAAI,CAAE;AACzB,MAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,IAC9B,kBAAiB,IAAI,IAAS,IAAI,aAAa,KAAK"}

package/dist/components/message/helper.js

@@ -0,0 +1,23 @@
+import { CircleCheckFilled, CircleClose, InfoFilled, QuestionFilled, WarningFilled } from "@veltra/icons/normal";
+//#region src/components/message/helper.ts
+const typeIcons = {
+	default: InfoFilled,
+	info: QuestionFilled,
+	success: CircleCheckFilled,
+	warn: WarningFilled,
+	error: CircleClose
+};
+function getTypeIcon(type, icon) {
+	return icon ?? typeIcons[type];
+}
+const typeColors = {
+	error: "danger",
+	warn: "warning"
+};
+function getTypeColor(type) {
+	return typeColors[type] ?? type;
+}
+//#endregion
+export { getTypeColor, getTypeIcon };
+
+//# sourceMappingURL=helper.js.map

package/dist/components/message/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","names":[],"sources":["../../../src/components/message/helper.ts"],"sourcesContent":["import {\n  CircleCheckFilled,\n  CircleClose,\n  InfoFilled,\n  QuestionFilled,\n  WarningFilled\n} from '@veltra/icons/normal'\nimport type { DefineComponent } from 'vue'\n\nimport type { ColorType, MessageType } from '../../types'\n\nconst typeIcons = {\n  default: InfoFilled,\n  info: QuestionFilled,\n  success: CircleCheckFilled,\n  warn: WarningFilled,\n  error: CircleClose\n}\nexport function getTypeIcon(type: MessageType, icon?: DefineComponent): DefineComponent {\n  return (icon ?? typeIcons[type]) as any\n}\n\nconst typeColors = { error: 'danger', warn: 'warning' }\n\nexport function getTypeColor(type: MessageType): ColorType {\n  return typeColors[type] ?? type\n}\n"],"mappings":";;AAWA,MAAM,YAAY;CAChB,SAAS;CACT,MAAM;CACN,SAAS;CACT,MAAM;CACN,OAAO;CACR;AACD,SAAgB,YAAY,MAAmB,MAAyC;AACtF,QAAQ,QAAQ,UAAU;;AAG5B,MAAM,aAAa;CAAE,OAAO;CAAU,MAAM;CAAW;AAEvD,SAAgB,aAAa,MAA8B;AACzD,QAAO,WAAW,SAAS"}

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

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

package/dist/components/message/message-box.js

@@ -0,0 +1,38 @@
+import _sfc_main$1 from "./message.js";
+import { Fragment, TransitionGroup, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderList, withCtx } from "vue";
+//#region src/components/message/message-box.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "MessageBox",
+	__name: "message-box",
+	props: { messages: {} },
+	emits: ["closed", "close"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		function handleAfterLeave(el) {
+			emit("closed", el.dataset.id);
+		}
+		function handleClose(i, onClose) {
+			emit("close", i);
+			onClose?.();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(TransitionGroup, {
+				name: "message",
+				appear: "",
+				onAfterLeave: handleAfterLeave
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.messages, ({ onClose, ...message }, index) => {
+					return openBlock(), createBlock(_sfc_main$1, mergeProps({ ref_for: true }, message, {
+						"data-id": message.key,
+						onClose: ($event) => handleClose(index, onClose)
+					}), null, 16, ["data-id", "onClose"]);
+				}), 256))]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=message-box.js.map

package/dist/components/message/message-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-box.js","names":[],"sources":["../../../src/components/message/message-box.vue"],"sourcesContent":["<template>\n  <transition-group name=\"message\" appear @after-leave=\"handleAfterLeave\">\n    <UMessage\n      v-for=\"({ onClose, ...message }, index) of messages\"\n      v-bind=\"message\"\n      :data-id=\"message.key\"\n      @close=\"handleClose(index, onClose)\"\n    />\n  </transition-group>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { MessageOptions } from '../../types'\nimport UMessage from './message.vue'\n\ndefineOptions({\n  name: 'MessageBox'\n})\n\ndefineProps<{\n  messages: Array<Omit<MessageOptions & { key: string }, 'onClosed'>>\n}>()\n\nconst emit = defineEmits<{\n  (e: 'closed', id: string): void\n  (e: 'close', index: number): void\n}>()\n\nfunction handleAfterLeave(el: Element) {\n  emit('closed', (el as HTMLElement).dataset.id as string)\n}\n\nfunction handleClose(i: number, onClose?: () => void) {\n  emit('close', i)\n  onClose?.()\n}\n</script>\n"],"mappings":";;;;;;;;;EAuBA,MAAM,OAAO;EAKb,SAAS,iBAAiB,IAAa;AACrC,QAAK,UAAW,GAAmB,QAAQ,GAAY;;EAGzD,SAAS,YAAY,GAAW,SAAsB;AACpD,QAAK,SAAS,EAAC;AACf,cAAU;;;uBAjCV,YAOmB,iBAAA;IAPD,MAAK;IAAU,QAAA;IAAQ,cAAa;;2BAEE,EAAA,UAAA,KAAA,EADtD,mBAKE,UAAA,MAAA,WAJ2C,QAAA,WAAQ,EAAzC,SAAO,GAAK,WAAW,UAAK;yBADxC,YAKE,aALF,WAKE,EAAA,SAAA,MAAA,EAHQ,SAAO;MACd,WAAS,QAAQ;MACjB,UAAK,WAAE,YAAY,OAAO,QAAO"}

package/dist/components/message/message.d.ts

@@ -0,0 +1,7 @@
+import { Message } from "../../types/message.js";
+//#region src/components/message/message.d.ts
+/** --- 导出 API --- */
+declare const message: Message;
+//#endregion
+export { message };
+//# sourceMappingURL=message.d.ts.map