morya-ui 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # morya-ui
 
+## 0.2.2
+
+### 新功能
+
+- add tooltip support for collapsed menu items
+
+### 变更
+
+- improve submenu arrow icon and expand behavior
+- update dataset keys from 'mu' to 'm' for consistency
+
 ## 0.2.1
 
 ### 破坏性变更

package/dist/components/Menu/MenuCollapsedTooltip.vue.d.ts

@@ -0,0 +1,27 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    label?: string;
+    /** When false, render slot only (expanded menu). */
+    active?: boolean;
+    /** Suppress while a flyout submenu is open. */
+    suspended?: boolean;
+};
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+    suspended: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=MenuCollapsedTooltip.vue.d.ts.map

package/dist/components/Menu/MenuCollapsedTooltip.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuCollapsedTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuCollapsedTooltip.vue"],"names":[],"mappings":";AAyCA,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC;AA4DJ,QAAA,IAAI,OAAO,IAAU,EAAE,QAAQ,IAAW,CAAE;AAC5C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;YAvEH,OAAO;eAEJ,OAAO;6EAwErB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Menu/MenuNodes.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuNodes.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuNodes.vue"],"names":[],"mappings":";AAmOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAUvC,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,2EAA2E;IAC3E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAsbF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MenuNodes.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuNodes.vue"],"names":[],"mappings":";AAwPA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAWvC,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,2EAA2E;IAC3E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAgeF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/Menu/styles.css

@@ -2,6 +2,8 @@
 .m-menu {
     --m-menu-indent: var(--m-space-3);
     --m-menu-root-indent: var(--m-space-4);
+    --m-menu-submenu-gap: var(--m-space-2);
+    --m-menu-submenu-inset: var(--m-space-2);
     --m-menu-item-radius: var(--m-radius-md);
     --m-menu-color: transparent;
     --m-menu-item-color-hover: color-mix(
@@ -210,6 +212,12 @@
     margin-top: 0.25rem;
 }
 
+.m-menu--collapsed .m-menu__item .m-tooltip,
+.m-menu--collapsed .m-menu__collapsed-popover .m-tooltip {
+    display: flex;
+    width: 100%;
+}
+
 .m-menu--collapsed .m-menu__item-content {
     align-items: center;
     display: flex;
@@ -368,9 +376,14 @@
     height: 1rem;
     justify-content: center;
     margin-inline-start: 0.25rem;
+    transition: transform var(--m-motion-fast) var(--m-motion-ease);
     width: 1rem;
 }
 
+.m-menu__arrow--expanded {
+    transform: rotate(90deg);
+}
+
 .m-menu__separator {
     background: var(--m-color-border);
     height: 1px;
@@ -378,25 +391,34 @@
 }
 
 .m-menu__submenu {
+    display: grid;
+    grid-template-rows: 1fr;
+}
+
+.m-menu__submenu-inner {
+    min-height: 0;
     overflow: hidden;
+    padding-block-start: var(--m-menu-submenu-gap);
+    padding-inline-start: var(--m-menu-submenu-inset);
 }
 
 .m-menu-expand-enter-active,
 .m-menu-expand-leave-active {
+    overflow: hidden;
     transition:
-        max-height var(--m-motion-normal) var(--m-motion-ease),
+        grid-template-rows var(--m-motion-normal) var(--m-motion-ease),
         opacity var(--m-motion-normal) var(--m-motion-ease);
 }
 
 .m-menu-expand-enter-from,
 .m-menu-expand-leave-to {
-    max-height: 0;
+    grid-template-rows: 0fr;
     opacity: 0;
 }
 
 .m-menu-expand-enter-to,
 .m-menu-expand-leave-from {
-    max-height: 30rem;
+    grid-template-rows: 1fr;
     opacity: 1;
 }
 

package/dist/config-provider/index.js

@@ -27,7 +27,7 @@ var y = "morya-ui-density", b = ["wex-design-density"], x = [
 ], S = d(w());
 function C(e, t) {
 	let n = t ?? (typeof document < "u" ? document.documentElement : void 0);
-	n && (n.dataset.muDensity = e);
+	n && (n.dataset.mDensity = e);
 }
 function w() {
 	let e = _(y, b);
@@ -45,11 +45,11 @@ var T = "morya-ui-motion", E = ["wex-design-motion"], D = [
 ], O = d(M());
 function k(e, t) {
 	let n = t ?? (typeof document < "u" ? document.documentElement : void 0);
-	n && (n.dataset.muMotion = e);
+	n && (n.dataset.mMotion = e);
 }
 function A(e, t) {
 	let n = t ?? (typeof document < "u" ? document.documentElement : void 0);
-	n && (e === !1 ? n.dataset.muIgnoreReducedMotion = "true" : delete n.dataset.muIgnoreReducedMotion);
+	n && (e === !1 ? n.dataset.mIgnoreReducedMotion = "true" : delete n.dataset.mIgnoreReducedMotion);
 }
 function j() {
 	return "full";
@@ -114,12 +114,12 @@ var F = ["data-m-density"], I = /* @__PURE__ */ o({
 			x.value.theme === "system" && P(N());
 		}
 		function I() {
-			typeof document > "u" || (k = document.documentElement.dataset.muIgnoreReducedMotion, A(x.value.respectReducedMotion));
+			typeof document > "u" || (k = document.documentElement.dataset.mIgnoreReducedMotion, A(x.value.respectReducedMotion));
 		}
 		function L() {
 			if (!w.value || typeof document > "u") return;
 			let { density: e, zIndex: t, theme: n } = x.value;
-			e && (E = document.documentElement.dataset.muDensity, C(e)), t != null && (D = document.documentElement.style.getPropertyValue("--m-z-base"), document.documentElement.style.setProperty("--m-z-base", String(t))), n !== void 0 && (O = document.documentElement.dataset.theme, P(n === "system" ? N() : n)), n === "system" && typeof window < "u" && (j?.removeEventListener("change", M), j = window.matchMedia("(prefers-color-scheme: dark)"), j.addEventListener("change", M));
+			e && (E = document.documentElement.dataset.mDensity, C(e)), t != null && (D = document.documentElement.style.getPropertyValue("--m-z-base"), document.documentElement.style.setProperty("--m-z-base", String(t))), n !== void 0 && (O = document.documentElement.dataset.theme, P(n === "system" ? N() : n)), n === "system" && typeof window < "u" && (j?.removeEventListener("change", M), j = window.matchMedia("(prefers-color-scheme: dark)"), j.addEventListener("change", M));
 		}
 		return g(() => x.value.respectReducedMotion, I, { immediate: !0 }), g(() => [
 			w.value,
@@ -127,7 +127,7 @@ var F = ["data-m-density"], I = /* @__PURE__ */ o({
 			x.value.zIndex,
 			x.value.theme
 		], L, { immediate: !0 }), l(() => {
-			typeof document > "u" || (k !== void 0 && (k ? document.documentElement.dataset.muIgnoreReducedMotion = k : delete document.documentElement.dataset.muIgnoreReducedMotion), w.value && (E !== void 0 && (E ? document.documentElement.dataset.muDensity = E : delete document.documentElement.dataset.muDensity), D !== void 0 && (D ? document.documentElement.style.setProperty("--m-z-base", D) : document.documentElement.style.removeProperty("--m-z-base")), O !== void 0 && (O ? document.documentElement.dataset.theme = O : delete document.documentElement.dataset.theme), j?.removeEventListener("change", M), j = null));
+			typeof document > "u" || (k !== void 0 && (k ? document.documentElement.dataset.mIgnoreReducedMotion = k : delete document.documentElement.dataset.mIgnoreReducedMotion), w.value && (E !== void 0 && (E ? document.documentElement.dataset.mDensity = E : delete document.documentElement.dataset.mDensity), D !== void 0 && (D ? document.documentElement.style.setProperty("--m-z-base", D) : document.documentElement.style.removeProperty("--m-z-base")), O !== void 0 && (O ? document.documentElement.dataset.theme = O : delete document.documentElement.dataset.theme), j?.removeEventListener("change", M), j = null));
 		}), (e, t) => (u(), a("div", c(m(v), {
 			class: "m-config-provider",
 			"data-m-density": S.value,