morya-ui 0.2.8 → 0.2.9

package/dist/input-tags/style.css

@@ -373,6 +373,17 @@
     opacity: var(--m-opacity-disabled);
 }
 
+.m-input-field__control--prefixed .m-input:disabled,
+.m-input-field__control--suffixed .m-input:disabled,
+.m-input-field__control--clearable .m-input:disabled,
+.m-password--disabled .m-password__input,
+.m-inputnumber--disabled .m-inputnumber__input,
+.m-datepicker--disabled .m-datepicker__input,
+.m-icon-field--anchored .m-input:disabled,
+.m-icon-field--anchored .m-textarea:disabled {
+    opacity: 1;
+}
+
 .m-input::placeholder,
 .m-textarea::placeholder,
 .m-password__input::placeholder,
@@ -692,14 +703,6 @@
     opacity: var(--m-opacity-disabled);
 }
 
-.m-icon-field--left :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-left: var(--m-control-affix-padding);
-}
-
-.m-icon-field--right :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-right: var(--m-control-affix-padding);
-}
-
 .m-inputgroup > .m-input,
 .m-inputgroup > .m-input-field,
 .m-inputgroup > .m-password-field,
@@ -718,16 +721,22 @@
 
 .m-inputgroup > .m-input,
 .m-inputgroup .m-input,
-.m-inputgroup .m-password__input,
-.m-inputgroup .m-inputnumber__input {
+.m-inputgroup .m-password,
+.m-inputgroup .m-inputnumber__input-wrap,
+.m-inputgroup .m-input-field__control--prefixed,
+.m-inputgroup .m-input-field__control--suffixed,
+.m-inputgroup .m-input-field__control--clearable {
     border-radius: 0;
     width: 100%;
 }
 
 .m-inputgroup > :first-child.m-input,
 .m-inputgroup > :first-child .m-input,
-.m-inputgroup > :first-child .m-password__input,
-.m-inputgroup > :first-child .m-inputnumber__input,
+.m-inputgroup > :first-child .m-password,
+.m-inputgroup > :first-child .m-inputnumber__input-wrap,
+.m-inputgroup > :first-child .m-input-field__control--prefixed,
+.m-inputgroup > :first-child .m-input-field__control--suffixed,
+.m-inputgroup > :first-child .m-input-field__control--clearable,
 .m-inputgroup > :first-child.m-inputgroup-addon {
     border-bottom-left-radius: var(--m-radius-control);
     border-top-left-radius: var(--m-radius-control);
@@ -735,8 +744,11 @@
 
 .m-inputgroup > :last-child.m-input,
 .m-inputgroup > :last-child .m-input,
-.m-inputgroup > :last-child .m-password__input,
-.m-inputgroup > :last-child .m-inputnumber__input,
+.m-inputgroup > :last-child .m-password,
+.m-inputgroup > :last-child .m-inputnumber__input-wrap,
+.m-inputgroup > :last-child .m-input-field__control--prefixed,
+.m-inputgroup > :last-child .m-input-field__control--suffixed,
+.m-inputgroup > :last-child .m-input-field__control--clearable,
 .m-inputgroup > :last-child.m-inputgroup-addon {
     border-bottom-right-radius: var(--m-radius-control);
     border-top-right-radius: var(--m-radius-control);
@@ -887,9 +899,6 @@
 }
 
 /* Shared Naive-like hover/focus for remaining form triggers */
-.m-inputnumber__input:hover:not(:disabled):not(:focus),
-.m-password__input:hover:not(:disabled):not(:focus),
-.m-datepicker__input:hover:not(:disabled):not(:focus),
 .m-inputotp__input:hover:not(:disabled):not(:focus),
 .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
 .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
@@ -900,9 +909,6 @@
     border-color: var(--m-color-primary-hover);
 }
 
-.m-inputnumber__input:focus-visible,
-.m-password__input:focus-visible,
-.m-datepicker__input:focus-visible,
 .m-inputotp__input:focus-visible,
 .m-cascadeselect__trigger:focus-visible,
 .m-treeselect__trigger:focus-visible,
@@ -919,9 +925,6 @@
     outline: none;
 }
 
-.m-inputnumber--invalid .m-inputnumber__input:focus-visible,
-.m-password--invalid .m-password__input:focus-visible,
-.m-datepicker--invalid .m-datepicker__input:focus-visible,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {

package/dist/knob/style.css

@@ -373,6 +373,17 @@
     opacity: var(--m-opacity-disabled);
 }
 
+.m-input-field__control--prefixed .m-input:disabled,
+.m-input-field__control--suffixed .m-input:disabled,
+.m-input-field__control--clearable .m-input:disabled,
+.m-password--disabled .m-password__input,
+.m-inputnumber--disabled .m-inputnumber__input,
+.m-datepicker--disabled .m-datepicker__input,
+.m-icon-field--anchored .m-input:disabled,
+.m-icon-field--anchored .m-textarea:disabled {
+    opacity: 1;
+}
+
 .m-input::placeholder,
 .m-textarea::placeholder,
 .m-password__input::placeholder,
@@ -692,14 +703,6 @@
     opacity: var(--m-opacity-disabled);
 }
 
-.m-icon-field--left :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-left: var(--m-control-affix-padding);
-}
-
-.m-icon-field--right :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-right: var(--m-control-affix-padding);
-}
-
 .m-inputgroup > .m-input,
 .m-inputgroup > .m-input-field,
 .m-inputgroup > .m-password-field,
@@ -718,16 +721,22 @@
 
 .m-inputgroup > .m-input,
 .m-inputgroup .m-input,
-.m-inputgroup .m-password__input,
-.m-inputgroup .m-inputnumber__input {
+.m-inputgroup .m-password,
+.m-inputgroup .m-inputnumber__input-wrap,
+.m-inputgroup .m-input-field__control--prefixed,
+.m-inputgroup .m-input-field__control--suffixed,
+.m-inputgroup .m-input-field__control--clearable {
     border-radius: 0;
     width: 100%;
 }
 
 .m-inputgroup > :first-child.m-input,
 .m-inputgroup > :first-child .m-input,
-.m-inputgroup > :first-child .m-password__input,
-.m-inputgroup > :first-child .m-inputnumber__input,
+.m-inputgroup > :first-child .m-password,
+.m-inputgroup > :first-child .m-inputnumber__input-wrap,
+.m-inputgroup > :first-child .m-input-field__control--prefixed,
+.m-inputgroup > :first-child .m-input-field__control--suffixed,
+.m-inputgroup > :first-child .m-input-field__control--clearable,
 .m-inputgroup > :first-child.m-inputgroup-addon {
     border-bottom-left-radius: var(--m-radius-control);
     border-top-left-radius: var(--m-radius-control);
@@ -735,8 +744,11 @@
 
 .m-inputgroup > :last-child.m-input,
 .m-inputgroup > :last-child .m-input,
-.m-inputgroup > :last-child .m-password__input,
-.m-inputgroup > :last-child .m-inputnumber__input,
+.m-inputgroup > :last-child .m-password,
+.m-inputgroup > :last-child .m-inputnumber__input-wrap,
+.m-inputgroup > :last-child .m-input-field__control--prefixed,
+.m-inputgroup > :last-child .m-input-field__control--suffixed,
+.m-inputgroup > :last-child .m-input-field__control--clearable,
 .m-inputgroup > :last-child.m-inputgroup-addon {
     border-bottom-right-radius: var(--m-radius-control);
     border-top-right-radius: var(--m-radius-control);
@@ -887,9 +899,6 @@
 }
 
 /* Shared Naive-like hover/focus for remaining form triggers */
-.m-inputnumber__input:hover:not(:disabled):not(:focus),
-.m-password__input:hover:not(:disabled):not(:focus),
-.m-datepicker__input:hover:not(:disabled):not(:focus),
 .m-inputotp__input:hover:not(:disabled):not(:focus),
 .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
 .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
@@ -900,9 +909,6 @@
     border-color: var(--m-color-primary-hover);
 }
 
-.m-inputnumber__input:focus-visible,
-.m-password__input:focus-visible,
-.m-datepicker__input:focus-visible,
 .m-inputotp__input:focus-visible,
 .m-cascadeselect__trigger:focus-visible,
 .m-treeselect__trigger:focus-visible,
@@ -919,9 +925,6 @@
     outline: none;
 }
 
-.m-inputnumber--invalid .m-inputnumber__input:focus-visible,
-.m-password--invalid .m-password__input:focus-visible,
-.m-datepicker--invalid .m-datepicker__input:focus-visible,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {

package/dist/label/style.css

@@ -373,6 +373,17 @@
     opacity: var(--m-opacity-disabled);
 }
 
+.m-input-field__control--prefixed .m-input:disabled,
+.m-input-field__control--suffixed .m-input:disabled,
+.m-input-field__control--clearable .m-input:disabled,
+.m-password--disabled .m-password__input,
+.m-inputnumber--disabled .m-inputnumber__input,
+.m-datepicker--disabled .m-datepicker__input,
+.m-icon-field--anchored .m-input:disabled,
+.m-icon-field--anchored .m-textarea:disabled {
+    opacity: 1;
+}
+
 .m-input::placeholder,
 .m-textarea::placeholder,
 .m-password__input::placeholder,
@@ -692,14 +703,6 @@
     opacity: var(--m-opacity-disabled);
 }
 
-.m-icon-field--left :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-left: var(--m-control-affix-padding);
-}
-
-.m-icon-field--right :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-right: var(--m-control-affix-padding);
-}
-
 .m-inputgroup > .m-input,
 .m-inputgroup > .m-input-field,
 .m-inputgroup > .m-password-field,
@@ -718,16 +721,22 @@
 
 .m-inputgroup > .m-input,
 .m-inputgroup .m-input,
-.m-inputgroup .m-password__input,
-.m-inputgroup .m-inputnumber__input {
+.m-inputgroup .m-password,
+.m-inputgroup .m-inputnumber__input-wrap,
+.m-inputgroup .m-input-field__control--prefixed,
+.m-inputgroup .m-input-field__control--suffixed,
+.m-inputgroup .m-input-field__control--clearable {
     border-radius: 0;
     width: 100%;
 }
 
 .m-inputgroup > :first-child.m-input,
 .m-inputgroup > :first-child .m-input,
-.m-inputgroup > :first-child .m-password__input,
-.m-inputgroup > :first-child .m-inputnumber__input,
+.m-inputgroup > :first-child .m-password,
+.m-inputgroup > :first-child .m-inputnumber__input-wrap,
+.m-inputgroup > :first-child .m-input-field__control--prefixed,
+.m-inputgroup > :first-child .m-input-field__control--suffixed,
+.m-inputgroup > :first-child .m-input-field__control--clearable,
 .m-inputgroup > :first-child.m-inputgroup-addon {
     border-bottom-left-radius: var(--m-radius-control);
     border-top-left-radius: var(--m-radius-control);
@@ -735,8 +744,11 @@
 
 .m-inputgroup > :last-child.m-input,
 .m-inputgroup > :last-child .m-input,
-.m-inputgroup > :last-child .m-password__input,
-.m-inputgroup > :last-child .m-inputnumber__input,
+.m-inputgroup > :last-child .m-password,
+.m-inputgroup > :last-child .m-inputnumber__input-wrap,
+.m-inputgroup > :last-child .m-input-field__control--prefixed,
+.m-inputgroup > :last-child .m-input-field__control--suffixed,
+.m-inputgroup > :last-child .m-input-field__control--clearable,
 .m-inputgroup > :last-child.m-inputgroup-addon {
     border-bottom-right-radius: var(--m-radius-control);
     border-top-right-radius: var(--m-radius-control);
@@ -887,9 +899,6 @@
 }
 
 /* Shared Naive-like hover/focus for remaining form triggers */
-.m-inputnumber__input:hover:not(:disabled):not(:focus),
-.m-password__input:hover:not(:disabled):not(:focus),
-.m-datepicker__input:hover:not(:disabled):not(:focus),
 .m-inputotp__input:hover:not(:disabled):not(:focus),
 .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
 .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
@@ -900,9 +909,6 @@
     border-color: var(--m-color-primary-hover);
 }
 
-.m-inputnumber__input:focus-visible,
-.m-password__input:focus-visible,
-.m-datepicker__input:focus-visible,
 .m-inputotp__input:focus-visible,
 .m-cascadeselect__trigger:focus-visible,
 .m-treeselect__trigger:focus-visible,
@@ -919,9 +925,6 @@
     outline: none;
 }
 
-.m-inputnumber--invalid .m-inputnumber__input:focus-visible,
-.m-password--invalid .m-password__input:focus-visible,
-.m-datepicker--invalid .m-datepicker__input:focus-visible,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {

package/dist/layout/index.js

@@ -1,5 +1,5 @@
 import { r as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-DfpIfo2L.js";
+import { t } from "../Icon-B6IBrJ5S.js";
 import { t as n } from "../Scrollbar-BYnCO8fv.js";
 import { r, t as i } from "../responsive-DA5bxylA.js";
 import { n as a } from "../locale-B36KH7c3.js";
@@ -199,10 +199,11 @@ function M(e, t) {
 }
 function N(e) {
 	return o(() => {
-		let t = x(e), n = {
-			padding: M(t.padding, "var(--m-layout-padding, var(--m-space-4))"),
-			borderRadius: M(t.radius, "var(--m-layout-radius, 0)")
-		};
+		let t = x(e), n = { borderRadius: M(t.radius, "var(--m-layout-radius, 0)") };
+		if (t.padding != null) {
+			let e = r(t.padding);
+			e && (n.padding = e);
+		} else t.applyDefaultPadding !== !1 && (n.padding = "var(--m-layout-padding, var(--m-space-4))");
 		if (t.heightFallback != null) n.height = M(t.height, t.heightFallback);
 		else if (t.height != null) {
 			let e = r(t.height);
@@ -226,36 +227,24 @@ var P = /* @__PURE__ */ f({
 			type: Boolean,
 			default: !1
 		},
-		position: { default: "static" },
-		contentClass: {},
-		contentStyle: {}
+		position: { default: "static" }
 	},
-	emits: ["scroll"],
-	setup(t, { expose: n, emit: r }) {
-		let i = t, a = r, s = C(), { rootAttrs: c } = e(s, () => i.pt), u = y(), f = N(() => ({
-			height: i.height,
-			padding: i.padding,
-			radius: i.radius
-		})), p = o(() => [
+	setup(t) {
+		let n = t, r = C(), { rootAttrs: i } = e(r, () => n.pt), a = N(() => ({
+			height: n.height,
+			padding: n.padding,
+			radius: n.radius,
+			applyDefaultPadding: !1
+		})), s = o(() => [
 			"m-layout",
 			"m-layout-content",
-			`m-layout--${i.position}-positioned`,
-			{ "m-layout--embedded": i.embedded }
-		]), h = o(() => ["m-layout__scroll", i.contentClass]), g = o(() => i.contentStyle);
-		return n({ scrollTo: ((...e) => u.value?.scrollTo(...e)) }), (e, t) => (_(), l("main", m(S(c), {
-			class: p.value,
-			style: S(f)
-		}), [d(A, {
-			ref_key: "scrollRegionRef",
-			ref: u,
-			"scrollbar-root-class": "m-layout__scrollbar",
-			"scroll-class": h.value,
-			"scroll-style": g.value,
-			onScroll: t[0] ||= (e) => a("scroll", e)
-		}, {
-			default: T(() => [b(e.$slots, "default")]),
-			_: 3
-		}, 8, ["scroll-class", "scroll-style"])], 16));
+			`m-layout--${n.position}-positioned`,
+			{ "m-layout--embedded": n.embedded }
+		]);
+		return (e, t) => (_(), l("main", m(S(i), {
+			class: s.value,
+			style: S(a)
+		}), [b(e.$slots, "default")], 16));
 	}
 }), F = /* @__PURE__ */ f({
 	name: "MLayoutFooter",
@@ -407,76 +396,64 @@ var z = ["aria-expanded", "aria-label"], B = {
 		triggerClass: {},
 		triggerStyle: {},
 		collapsedTriggerClass: {},
-		collapsedTriggerStyle: {},
-		contentClass: {},
-		contentStyle: {}
+		collapsedTriggerStyle: {}
 	},
 	emits: [
 		"update:collapsed",
 		"collapse",
 		"expand",
 		"after-enter",
-		"after-leave",
-		"scroll"
+		"after-leave"
 	],
-	setup(n, { expose: s, emit: f }) {
-		let v = n, x = f, w = C(), { rootAttrs: D } = e(w, () => v.pt), O = a(), k = p(E, null), j = y(), { mergedCollapsed: M, toggle: N } = L(v, x), P = o(() => k?.siderPlacement ?? "left"), F = o(() => r(v.width)), I = o(() => r(v.collapsedWidth)), U = o(() => F.value ?? "var(--m-layout-sider-width)"), W = o(() => I.value ?? "var(--m-layout-sider-collapsed-width)"), G = o(() => M.value ? W.value : U.value), K = o(() => R(v.showTrigger)), q = o(() => !M.value || v.showCollapsedContent), J = o(() => [
+	setup(n, { emit: s }) {
+		let f = n, v = s, y = C(), { rootAttrs: x } = e(y, () => f.pt), w = a(), T = p(E, null), { mergedCollapsed: D, toggle: O } = L(f, v), k = o(() => T?.siderPlacement ?? "left"), A = o(() => r(f.width)), j = o(() => r(f.collapsedWidth)), M = o(() => A.value ?? "var(--m-layout-sider-width)"), N = o(() => j.value ?? "var(--m-layout-sider-collapsed-width)"), P = o(() => D.value ? N.value : M.value), F = o(() => R(f.showTrigger)), I = o(() => !D.value || f.showCollapsedContent), U = o(() => [
 			"m-layout-sider",
-			`m-layout-sider--${v.position}-positioned`,
-			`m-layout-sider--${P.value}-placement`,
-			`m-layout-sider--collapse-${v.collapseMode}`,
+			`m-layout-sider--${f.position}-positioned`,
+			`m-layout-sider--${k.value}-placement`,
+			`m-layout-sider--collapse-${f.collapseMode}`,
 			{
-				"m-layout-sider--bordered": v.bordered,
-				"m-layout-sider--inverted": v.inverted,
-				"m-layout-sider--collapsed": M.value,
-				"m-layout-sider--show-content": q.value
+				"m-layout-sider--bordered": f.bordered,
+				"m-layout-sider--inverted": f.inverted,
+				"m-layout-sider--collapsed": D.value,
+				"m-layout-sider--show-content": I.value
 			}
-		]), Y = o(() => {
-			let e = v.collapseMode === "width", t = {
+		]), W = o(() => {
+			let e = f.collapseMode === "width", t = {
 				minWidth: "0",
-				borderRadius: v.radius == null ? "var(--m-layout-radius, 0)" : r(v.radius),
-				width: e ? G.value : U.value,
-				maxWidth: G.value
+				borderRadius: f.radius == null ? "var(--m-layout-radius, 0)" : r(f.radius),
+				width: e ? P.value : M.value,
+				maxWidth: P.value
 			};
-			return F.value && !i(F.value, "--m-layout-sider-width") && (t["--m-layout-sider-width"] = F.value), I.value && !i(I.value, "--m-layout-sider-collapsed-width") && (t["--m-layout-sider-collapsed-width"] = I.value), t;
-		}), X = o(() => v.padding == null ? "var(--m-layout-padding, var(--m-space-4))" : r(v.padding)), Z = o(() => {
-			let e = { padding: X.value };
-			return v.contentStyle == null ? e : [e, v.contentStyle];
-		}), Q = o(() => ["m-layout-sider__scroll", v.contentClass]), $ = o(() => M.value ? v.collapsedTriggerClass : v.triggerClass), ee = o(() => M.value ? v.collapsedTriggerStyle : v.triggerStyle);
-		function te(e) {
-			e.propertyName === "max-width" && (M.value ? x("after-leave") : x("after-enter"));
+			if (f.padding != null) {
+				let e = r(f.padding);
+				e && (t.padding = e);
+			}
+			return A.value && !i(A.value, "--m-layout-sider-width") && (t["--m-layout-sider-width"] = A.value), j.value && !i(j.value, "--m-layout-sider-collapsed-width") && (t["--m-layout-sider-collapsed-width"] = j.value), t;
+		}), G = o(() => D.value ? f.collapsedTriggerClass : f.triggerClass), K = o(() => D.value ? f.collapsedTriggerStyle : f.triggerStyle);
+		function q(e) {
+			e.propertyName === "max-width" && (D.value ? v("after-leave") : v("after-enter"));
 		}
-		return s({ scrollTo: ((...e) => j.value?.scrollTo(...e)) }), (e, r) => (_(), l("aside", m(S(D), {
-			class: J.value,
-			style: Y.value,
-			onTransitionend: te
+		return (e, r) => (_(), l("aside", m(S(x), {
+			class: U.value,
+			style: W.value,
+			onTransitionend: q
 		}), [
-			d(A, {
-				ref_key: "scrollRegionRef",
-				ref: j,
-				"scrollbar-root-class": "m-layout-sider__scrollbar",
-				"scroll-class": Q.value,
-				"scroll-style": Z.value,
-				onScroll: r[0] ||= (e) => x("scroll", e)
-			}, {
-				default: T(() => [b(e.$slots, "default")]),
-				_: 3
-			}, 8, ["scroll-class", "scroll-style"]),
-			K.value ? (_(), l("button", {
+			b(e.$slots, "default"),
+			F.value ? (_(), l("button", {
 				key: 0,
 				type: "button",
-				class: h(["m-layout-sider__trigger", [$.value, {
-					"m-layout-sider__trigger--bar": K.value === "bar",
-					"m-layout-sider__trigger--arrow-circle": K.value === "arrow-circle"
+				class: h(["m-layout-sider__trigger", [G.value, {
+					"m-layout-sider__trigger--bar": F.value === "bar",
+					"m-layout-sider__trigger--arrow-circle": F.value === "arrow-circle"
 				}]]),
-				style: g(ee.value),
-				"aria-expanded": !S(M),
-				"aria-label": S(M) ? S(O).expand : S(O).collapse,
-				onClick: r[1] ||= (...e) => S(N) && S(N)(...e)
-			}, [K.value === "arrow-circle" ? (_(), l("span", B, [d(t, {
+				style: g(K.value),
+				"aria-expanded": !S(D),
+				"aria-label": S(D) ? S(w).expand : S(w).collapse,
+				onClick: r[0] ||= (...e) => S(O) && S(O)(...e)
+			}, [F.value === "arrow-circle" ? (_(), l("span", B, [d(t, {
 				name: "chevron-right",
 				size: "sm"
-			})])) : (_(), l("span", V, [...r[2] ||= [u("i", { class: "m-layout-sider__bar-top" }, null, -1), u("i", { class: "m-layout-sider__bar-bottom" }, null, -1)]]))], 14, z)) : c("", !0),
+			})])) : (_(), l("span", V, [...r[1] ||= [u("i", { class: "m-layout-sider__bar-top" }, null, -1), u("i", { class: "m-layout-sider__bar-bottom" }, null, -1)]]))], 14, z)) : c("", !0),
 			n.bordered ? (_(), l("div", H)) : c("", !0)
 		], 16));
 	}