morya-ui 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # morya-ui
 
+## 0.3.2
+
+### 新功能
+
+- add click ripple and a press-scale toggle
+- replace quick jumper with a filterable Select
+- refine ops layout primitives and P2 filter/stat APIs
+- add shadow prop and remove hoverable
+
+### 修复
+
+- Panel component change demo component width
+- remove OS reduced-motion media queries from components
+- control intensity via library preference only
+
+### 文档
+
+- document impeccable and skills-cli companion install
+- document library-only motion control
+
+### 变更
+
+- extract filter and expanded-key helpers
+- extract label filter helpers for option lists
+- extract sort, filter, and selection helpers
+- extract expand and visible-entry helpers
+- extract option filter and multi-select helpers
+- cover CommandMenu keys and FileUpload dropzone keyboard
+- extract accept and size helpers
+- polish overlay scale, press feedback, and scroll containment
+- refresh snippets, generators, and golden page copies
+
+## 0.3.1
+
+### 新功能
+
+- replace hand-drawn icons with a generated Tabler registry
+- add option groups and header/footer slots
+- add triangle icons and update icon rendering logic
+- animate pages with a sliding track
+
+### 修复
+
+- keep the range start thumb above the overlapping track
+- keep submenus open on hover and align items with Select
+- make the expanded-row loading line visible
+- let popup menus grow with their content
+- let the menu grow with its content
+- close the gap in the sider bar trigger
+- compact dropdown filter and keep menu width aligned
+- shrink oversized multi-select tags
+
+### 文档
+
+- describe the all-Tabler registry and the generator script
+- complete component API tables and instance methods
+
+### 变更
+
+- fix export order and prefer template literals in gallery demos
+- resolve newly registered icons directly and drop dead aliases
+- replace the custom loading overlay with MLoading
+- update header and sort styles for improved layout
+
 ## 0.3.0
 
 ### 新功能

package/dist/Button-dMqRmoYa.js

@@ -0,0 +1,222 @@
+import { r as e, t } from "./types-DGuu4Eg4.js";
+import { t as n } from "./Icon-od9Ob-Ay.js";
+import { o as r } from "./config-CapALqt3.js";
+import { Comment as i, Fragment as a, Text as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderSlot as y, resolveDynamicComponent as b, toDisplayString as x, useSlots as ee } from "vue";
+//#region src/components/Button/Button.vue?vue&type=script&setup=true&lang.ts
+var S = [
+	"type",
+	"disabled",
+	"autofocus",
+	"aria-busy",
+	"aria-label"
+], C = {
+	key: 2,
+	class: "m-button__label"
+}, w = 560, T = 280, E = /* @__PURE__ */ p({
+	__name: "Button",
+	props: {
+		label: {},
+		icon: {},
+		iconPos: { default: "left" },
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		severity: {},
+		color: {},
+		raised: {
+			type: Boolean,
+			default: !1
+		},
+		rounded: {
+			type: Boolean,
+			default: !1
+		},
+		text: {
+			type: Boolean,
+			default: !1
+		},
+		outlined: {
+			type: Boolean,
+			default: !1
+		},
+		link: {
+			type: Boolean,
+			default: !1
+		},
+		ghost: {
+			type: Boolean,
+			default: !1
+		},
+		quaternary: {
+			type: Boolean,
+			default: !1
+		},
+		plain: {
+			type: Boolean,
+			default: !1
+		},
+		variant: {},
+		size: {},
+		fluid: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		badge: {},
+		badgeSeverity: { default: null },
+		autofocus: {
+			type: Boolean,
+			default: !1
+		},
+		nativeType: { default: "button" },
+		ariaLabel: {},
+		ripple: {
+			type: Boolean,
+			default: !0
+		},
+		press: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["click"],
+	setup(p, { expose: E, emit: D }) {
+		let O = p, k = D, A = ee(), j = v(null), M = v(null), N = /* @__PURE__ */ new Set(), P = s(() => !!A.default?.().some((e) => Z(e))), F = s(() => P.value || !!O.label?.trim()), I = s(() => O.outlined || O.variant === "outlined"), L = s(() => O.text || O.variant === "text"), R = s(() => O.link || O.variant === "link"), z = s(() => O.ghost || O.variant === "ghost"), B = s(() => O.quaternary || O.variant === "quaternary"), V = s(() => O.fluid), H = r("Button", () => O.size), U = s(() => e(H.value)), W = s(() => O.iconOnly || !F.value && !!(O.icon || A.icon || O.loading)), G = s(() => t(O.severity) ?? "primary"), K = s(() => typeof O.icon == "string" ? O.icon : void 0), q = s(() => typeof O.icon == "string" || !O.icon ? void 0 : O.icon), J = s(() => [
+			"m-button",
+			`m-button--${G.value}`,
+			`m-button--${H.value}`,
+			`m-button--icon-${O.iconPos}`,
+			{
+				"m-button--raised": O.raised,
+				"m-button--rounded": O.rounded,
+				"m-button--text": L.value,
+				"m-button--outlined": I.value,
+				"m-button--link": R.value,
+				"m-button--ghost": z.value,
+				"m-button--quaternary": B.value,
+				"m-button--plain": O.plain,
+				"m-button--fluid": V.value,
+				"m-button--loading": O.loading,
+				"m-button--icon-only": W.value,
+				"m-button--custom": !!O.color,
+				"m-button--ripple": O.ripple,
+				"m-button--press": O.press
+			}
+		]), Y = s(() => O.color ? { "--m-button-color": O.color } : void 0), X = s(() => ["m-button__badge", O.badgeSeverity ? `m-button__badge--${t(O.badgeSeverity)}` : "m-button__badge--contrast"]);
+		function Z(e) {
+			if (e == null || typeof e == "boolean") return !1;
+			if (typeof e == "string" || typeof e == "number") return String(e).trim().length > 0;
+			if (Array.isArray(e)) return e.some((e) => Z(e));
+			if (typeof e == "object" && "type" in e) {
+				let t = e;
+				return t.type === i ? !1 : t.type === o ? String(t.children ?? "").trim().length > 0 : t.type !== a || Z(t.children);
+			}
+			return !1;
+		}
+		function Q() {
+			return !O.ripple || typeof document > "u" || document.documentElement.dataset.mMotion === "none";
+		}
+		function te() {
+			return typeof document > "u" ? w : document.documentElement.dataset.mMotion === "reduced" ? T : w;
+		}
+		function $(e, t, n = !1) {
+			if (Q()) return;
+			let r = j.value, i = M.value;
+			if (!r || !i) return;
+			let a = r.getBoundingClientRect(), o = Math.ceil(Math.hypot(a.width, a.height) * 2), s = n ? a.width / 2 : e - a.left, c = n ? a.height / 2 : t - a.top, l = document.createElement("span");
+			l.className = "m-button__ripple-wave", l.style.width = `${o}px`, l.style.height = `${o}px`, l.style.left = `${s - o / 2}px`, l.style.top = `${c - o / 2}px`, i.appendChild(l);
+			let u = te(), d = () => {
+				l.remove();
+			};
+			if (typeof l.animate == "function") {
+				let e = l.animate([
+					{
+						transform: "scale(0)",
+						opacity: .42
+					},
+					{
+						transform: "scale(0.55)",
+						opacity: .22,
+						offset: .55
+					},
+					{
+						transform: "scale(1)",
+						opacity: 0
+					}
+				], {
+					duration: u,
+					easing: "cubic-bezier(0.2, 0, 0, 1)",
+					fill: "forwards"
+				});
+				N.add(e), e.finished.then(() => {
+					N.delete(e), d();
+				}).catch(d);
+				return;
+			}
+			l.classList.add("m-button__ripple-wave--fallback"), window.setTimeout(d, u);
+		}
+		function ne(e) {
+			O.disabled || O.loading || e.button === 0 && $(e.clientX, e.clientY);
+		}
+		function re(e) {
+			O.disabled || O.loading || (e.detail === 0 && $(0, 0, !0), k("click", e));
+		}
+		function ie() {
+			j.value?.focus();
+		}
+		return g(() => {
+			for (let e of N) e.cancel();
+			N.clear();
+		}), E({
+			focus: ie,
+			ref: j
+		}), (e, t) => (_(), u("button", {
+			ref_key: "buttonElement",
+			ref: j,
+			class: m(J.value),
+			style: h(Y.value),
+			type: p.nativeType,
+			disabled: p.disabled || p.loading,
+			autofocus: p.autofocus || void 0,
+			"aria-busy": p.loading || void 0,
+			"aria-label": p.ariaLabel || (W.value ? p.label : void 0),
+			onPointerdown: ne,
+			onClick: re
+		}, [
+			p.ripple ? (_(), u("span", {
+				key: 0,
+				ref_key: "rippleLayer",
+				ref: M,
+				class: "m-button__ripple",
+				"aria-hidden": "true"
+			}, null, 512)) : l("", !0),
+			p.loading || p.icon || e.$slots.icon ? (_(), u("span", {
+				key: 1,
+				class: m(["m-button__icon", { "m-button__icon--loading": p.loading }]),
+				"aria-hidden": "true"
+			}, [p.loading ? y(e.$slots, "loadingicon", {}, () => [t[0] ||= d("span", { class: "m-button__spinner" }, null, -1)], void 0, 0) : y(e.$slots, "icon", { class: "m-button__icon-slot" }, () => [K.value ? (_(), c(n, {
+				key: 0,
+				name: K.value,
+				size: U.value
+			}, null, 8, ["name", "size"])) : q.value ? (_(), c(b(q.value), {
+				key: 1,
+				class: "m-button__icon-graphic"
+			})) : l("", !0)], void 0, 1)], 2)) : l("", !0),
+			F.value && !p.iconOnly ? (_(), u("span", C, [y(e.$slots, "default", {}, () => [f(x(p.label), 1)])])) : l("", !0),
+			p.badge != null && p.badge !== "" ? (_(), u("span", {
+				key: 3,
+				class: m(X.value)
+			}, x(p.badge), 3)) : l("", !0)
+		], 46, S));
+	}
+});
+//#endregion
+export { E as t };

package/dist/{Card-Dsmnzong.js → Card-B1CB9Trm.js}

@@ -28,16 +28,14 @@ var _ = ["aria-label"], v = {
 			type: Boolean,
 			default: !0
 		},
-		hoverable: {
-			type: Boolean,
-			default: !1
-		}
+		shadow: { default: "never" }
 	},
 	setup(c) {
 		let C = c, w = h(), { rootAttrs: T } = e(w, () => C.pt), E = n(() => t(C.size)), D = n(() => `h${C.headingLevel}`), O = n(() => ["m-card", {
 			"m-card--bordered": C.bordered,
 			"m-card--borderless": !C.bordered,
-			"m-card--hoverable": C.hoverable,
+			"m-card--shadow-hover": C.shadow === "hover",
+			"m-card--shadow-always": C.shadow === "always",
 			"m-card--small": E.value === "small",
 			"m-card--large": E.value === "large"
 		}]);

package/dist/Empty-C5tndBOm.js

@@ -0,0 +1,147 @@
+import { a as e } from "./useComponentAttrs-e-5QAjdw.js";
+import { t } from "./Icon-od9Ob-Ay.js";
+import { t as n } from "./useMId-BXFYayPP.js";
+import { n as r } from "./locale-Bzm2nbEp.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, defineComponent as l, mergeProps as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useAttrs as g, useSlots as _, watch as v } from "vue";
+//#region src/components/Empty/illustrations/loaders.ts
+var y = {
+	"no-content": () => import("./no-content-CwbqVPoN.js"),
+	"no-result": () => import("./no-result-pGce34BV.js"),
+	"no-message": () => import("./no-message-DnIEpMiO.js"),
+	"no-schedule": () => import("./no-schedule-Cl9Frt1Q.js"),
+	"no-issue": () => import("./no-issue-DMkU-Pnw.js"),
+	"network-error": () => import("./network-error-C6vl5a7S.js"),
+	"server-error": () => import("./server-error-D8zGMe5r.js"),
+	building: () => import("./building-DYLdXiQg.js"),
+	"churn-high": () => import("./churn-high-D1ELpZzW.js"),
+	"conversion-low": () => import("./conversion-low-CwZiQc2k.js"),
+	"activity-low": () => import("./activity-low-CgK9kHWr.js"),
+	"profile-unclear": () => import("./profile-unclear-CGs4PCfw.js"),
+	"input-irregular": () => import("./input-irregular-xSLDoNTS.js"),
+	"payment-cycle-long": () => import("./payment-cycle-long-Ba9FNStl.js")
+};
+async function b(e) {
+	return (await y[e]()).default;
+}
+//#endregion
+//#region src/components/Empty/illustrations/defaultEmptyIcon.ts
+var x = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 3.95118 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z\" fill=\"currentColor\"/><path d=\"M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z\" fill=\"currentColor\"/></svg>", S = [
+	"no-content",
+	"no-result",
+	"no-message",
+	"no-schedule",
+	"no-issue"
+], C = [
+	"network-error",
+	"server-error",
+	"building"
+], w = /__MID_(\d+)__/g;
+function T(e, t) {
+	return e.replace(w, (e, n) => `${t}-${n}`);
+}
+async function E(e, t) {
+	return T(await b(e), t);
+}
+//#endregion
+//#region src/components/Empty/Empty.vue?vue&type=script&setup=true&lang.ts
+var D = {
+	key: 0,
+	class: "m-empty__illustration",
+	"aria-hidden": "true"
+}, O = ["src"], k = ["innerHTML"], A = ["innerHTML"], j = {
+	key: 1,
+	class: "m-empty__body"
+}, M = {
+	key: 0,
+	class: "m-empty__title"
+}, N = {
+	key: 1,
+	class: "m-empty__description"
+}, P = {
+	key: 2,
+	class: "m-empty__extra"
+}, F = /* @__PURE__ */ l({
+	inheritAttrs: !1,
+	__name: "Empty",
+	props: {
+		pt: {},
+		title: {},
+		description: {},
+		showDescription: {
+			type: Boolean,
+			default: !0
+		},
+		showIcon: {
+			type: Boolean,
+			default: !0
+		},
+		size: {},
+		icon: {},
+		illustration: {},
+		image: {},
+		simple: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(l) {
+		let y = l, b = g(), S = _(), { rootAttrs: C } = e(b, () => y.pt), w = r(), T = n("m-ill"), F = f(), I = 0;
+		function L(e) {
+			return e === "small" || e === "sm" ? "small" : e === "large" || e === "lg" ? "large" : "medium";
+		}
+		let R = i(() => L(y.size)), z = i(() => !!(S.image || y.image)), B = i(() => !!S.icon), V = i(() => {
+			if (y.showIcon) {
+				if (y.illustration) return y.illustration;
+				if (!(z.value || B.value) && y.icon === "search") return "no-result";
+			}
+		});
+		v(V, (e) => {
+			let t = ++I;
+			if (!e) {
+				F.value = void 0;
+				return;
+			}
+			E(e, T).then((e) => {
+				t === I && (F.value = e);
+			}, () => {
+				t === I && (F.value = void 0);
+			});
+		}, { immediate: !0 });
+		let H = i(() => y.showIcon && !!V.value && !!F.value && !z.value && !B.value), U = i(() => y.showIcon && !!y.icon && y.icon !== "search" && !V.value && !z.value && !B.value), W = i(() => y.showIcon && !V.value && !U.value && !z.value && !B.value), G = i(() => y.showIcon && (z.value || B.value || H.value || U.value || W.value)), K = i(() => y.description == null ? w.value.emptyMessage : y.description), q = i(() => S.title ? !0 : y.title != null && y.title !== ""), J = i(() => y.showDescription ? S.default ? !0 : !!K.value : !1), Y = i(() => [
+			"m-empty",
+			`m-empty--${R.value}`,
+			{
+				"m-empty--simple": y.simple,
+				"m-empty--default-icon": W.value
+			}
+		]);
+		return (e, n) => (d(), s("div", u(h(C), {
+			class: Y.value,
+			role: "status"
+		}), [
+			G.value ? (d(), s("div", D, [z.value ? p(e.$slots, "image", {}, () => [l.image ? (d(), s("img", {
+				key: 0,
+				class: "m-empty__image",
+				src: l.image,
+				alt: ""
+			}, null, 8, O)) : o("", !0)], void 0, 0) : B.value ? p(e.$slots, "icon", {}, void 0, void 0, 1) : H.value && F.value ? (d(), s("div", {
+				key: 2,
+				class: "m-empty__glyph",
+				innerHTML: F.value
+			}, null, 8, k)) : U.value && l.icon ? (d(), a(t, {
+				key: 3,
+				class: "m-empty__icon",
+				name: l.icon,
+				size: "lg"
+			}, null, 8, ["name"])) : W.value ? (d(), s("div", {
+				key: 4,
+				class: "m-empty__default-icon",
+				innerHTML: h(x)
+			}, null, 8, A)) : o("", !0)])) : o("", !0),
+			q.value || J.value ? (d(), s("div", j, [q.value ? (d(), s("div", M, [p(e.$slots, "title", {}, () => [c(m(l.title), 1)])])) : o("", !0), J.value ? (d(), s("div", N, [p(e.$slots, "default", {}, () => [c(m(K.value), 1)])])) : o("", !0)])) : o("", !0),
+			h(S).extra ? (d(), s("div", P, [p(e.$slots, "extra")])) : o("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { b as i, C as n, S as r, F as t };