morya-ui 0.1.1 → 0.2.1

package/dist/slider/index.js

@@ -1,23 +1,26 @@
-import { t as e } from "../useMId-BXFYayPP.js";
-import { t } from "../useFieldFeedback-C5qIqYMK.js";
-import { o as n } from "../config-CI8_WBbE.js";
-import { n as r } from "../locale-DYGhxekd.js";
+import { n as e } from "../useComponentAttrs-BTYEe61P.js";
+import { t } from "../useMId-BXFYayPP.js";
+import { t as n } from "../useFieldFeedback-C5qIqYMK.js";
+import { o as r } from "../config-CI8_WBbE.js";
+import { n as i } from "../locale-DYGhxekd.js";
 import "./style.js";
-import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g } from "vue";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useAttrs as y } from "vue";
 //#region src/components/Slider/Slider.vue?vue&type=script&setup=true&lang.ts
-var _ = { class: "m-slider-field" }, v = ["id"], y = ["aria-invalid", "aria-describedby"], b = {
+var b = ["id"], x = ["aria-invalid", "aria-describedby"], S = {
 	key: 0,
 	class: "m-slider__tooltip"
-}, x = [
+}, C = [
 	"min",
 	"max",
 	"step",
 	"value",
+	"name",
+	"autofocus",
 	"disabled",
 	"orient",
 	"aria-label",
 	"aria-valuetext"
-], S = [
+], w = [
 	"min",
 	"max",
 	"step",
@@ -26,21 +29,24 @@ var _ = { class: "m-slider-field" }, v = ["id"], y = ["aria-invalid", "aria-desc
 	"orient",
 	"aria-label",
 	"aria-valuetext"
-], C = [
+], T = [
 	"min",
 	"max",
 	"step",
 	"value",
+	"name",
+	"autofocus",
 	"disabled",
 	"orient",
 	"aria-label",
 	"aria-labelledby",
 	"aria-valuetext"
-], w = {
+], E = {
 	key: 3,
 	class: "m-slider__marks",
 	"aria-hidden": "true"
-}, T = ["id", "role"], E = /* @__PURE__ */ l({
+}, D = ["id", "role"], O = /* @__PURE__ */ u({
+	inheritAttrs: !1,
 	__name: "Slider",
 	props: {
 		modelValue: { default: 0 },
@@ -72,113 +78,119 @@ var _ = { class: "m-slider-field" }, v = ["id"], y = ["aria-invalid", "aria-desc
 			type: Boolean,
 			default: !1
 		},
-		ariaLabel: {}
+		ariaLabel: {},
+		pt: {},
+		name: {},
+		autofocus: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(l, { emit: E }) {
-		let D = l, O = E, k = r(), A = p(!1), j = n("Slider", () => D.size), M = e("m-slider"), { isInvalid: N, feedbackText: P, feedbackIsError: F } = t(D), I = a(() => Array.isArray(D.modelValue) ? D.modelValue[0] ?? D.min : D.modelValue ?? D.min), L = a(() => Array.isArray(D.modelValue) && D.modelValue.length >= 2 ? [D.modelValue[0], D.modelValue[1]] : [D.min, D.max]), R = a(() => {
-			if (!D.marks) return [];
-			let e = D.max - D.min || 1;
-			return Array.isArray(D.marks) ? D.marks.map((t) => ({
+	setup(u, { emit: O }) {
+		let k = u, A = O, j = y(), { rootAttrs: M, controlAttrs: N } = e(j, () => k.pt), P = i(), F = h(!1), I = r("Slider", () => k.size), L = t("m-slider"), { isInvalid: R, feedbackText: z, feedbackIsError: B } = n(k), V = o(() => Array.isArray(k.modelValue) ? k.modelValue[0] ?? k.min : k.modelValue ?? k.min), H = o(() => Array.isArray(k.modelValue) && k.modelValue.length >= 2 ? [k.modelValue[0], k.modelValue[1]] : [k.min, k.max]), U = o(() => {
+			if (!k.marks) return [];
+			let e = k.max - k.min || 1;
+			return Array.isArray(k.marks) ? k.marks.map((t) => ({
 				value: t,
 				label: String(t),
-				percent: (t - D.min) / e * 100
-			})) : Object.entries(D.marks).map(([t, n]) => {
+				percent: (t - k.min) / e * 100
+			})) : Object.entries(k.marks).map(([t, n]) => {
 				let r = Number(t);
 				return {
 					value: r,
 					label: n,
-					percent: (r - D.min) / e * 100
+					percent: (r - k.min) / e * 100
 				};
 			});
-		}), z = a(() => D.range ? `${L.value[0]} – ${L.value[1]}` : String(I.value)), B = a(() => [
+		}), W = o(() => k.range ? `${H.value[0]} – ${H.value[1]}` : String(V.value)), G = o(() => [
 			"m-slider",
-			`m-slider--${j.value}`,
+			`m-slider--${I.value}`,
 			{
-				"m-slider--disabled": D.disabled,
-				"m-slider--range": D.range,
-				"m-slider--vertical": D.vertical,
-				"m-slider--tooltip": D.tooltip,
-				"m-slider--invalid": N.value
+				"m-slider--disabled": k.disabled,
+				"m-slider--range": k.range,
+				"m-slider--vertical": k.vertical,
+				"m-slider--tooltip": k.tooltip,
+				"m-slider--invalid": R.value
 			}
 		]);
-		function V(e) {
-			D.disabled || O("update:modelValue", Number(e.target.value));
+		function K(e) {
+			k.disabled || A("update:modelValue", Number(e.target.value));
 		}
-		function H(e, t) {
-			if (D.disabled) return;
-			let n = [...L.value];
-			n[e] = Number(t.target.value), n[0] > n[1] && (e === 0 ? n[1] = n[0] : n[0] = n[1]), O("update:modelValue", n);
+		function q(e, t) {
+			if (k.disabled) return;
+			let n = [...H.value];
+			n[e] = Number(t.target.value), n[0] > n[1] && (e === 0 ? n[1] = n[0] : n[0] = n[1]), A("update:modelValue", n);
 		}
-		return (e, t) => (f(), s("div", _, [
-			l.label ? (f(), s("label", {
+		return (e, t) => (m(), c("div", d(v(M), { class: "m-slider-field" }), [
+			u.label ? (m(), c("label", {
 				key: 0,
-				id: `${g(M)}-label`,
+				id: `${v(L)}-label`,
 				class: "m-slider-field__label"
-			}, h(l.label), 9, v)) : o("", !0),
-			c("div", {
-				class: u(B.value),
-				"aria-invalid": g(N) || void 0,
-				"aria-describedby": g(P) ? `${g(M)}-help` : void 0,
-				onMouseenter: t[2] ||= (e) => A.value = !0,
-				onMouseleave: t[3] ||= (e) => A.value = !1,
-				onFocusin: t[4] ||= (e) => A.value = !0,
-				onFocusout: t[5] ||= (e) => A.value = !1
+			}, _(u.label), 9, b)) : s("", !0),
+			l("div", {
+				class: f(G.value),
+				"aria-invalid": v(R) || void 0,
+				"aria-describedby": v(z) ? `${v(L)}-help` : void 0,
+				onMouseenter: t[2] ||= (e) => F.value = !0,
+				onMouseleave: t[3] ||= (e) => F.value = !1,
+				onFocusin: t[4] ||= (e) => F.value = !0,
+				onFocusout: t[5] ||= (e) => F.value = !1
 			}, [
-				l.tooltip && A.value ? (f(), s("span", b, h(z.value), 1)) : o("", !0),
-				l.range ? (f(), s(i, { key: 1 }, [c("input", {
-					class: "m-slider__input wk-slider__input--start",
+				u.tooltip && F.value ? (m(), c("span", S, _(W.value), 1)) : s("", !0),
+				u.range ? (m(), c(a, { key: 1 }, [l("input", d(v(N), {
+					class: "m-slider__input m-slider__input--start",
 					type: "range",
-					min: l.min,
-					max: l.max,
-					step: l.step,
-					value: L.value[0],
-					disabled: l.disabled,
-					orient: l.vertical ? "vertical" : void 0,
-					"aria-label": g(k).rangeStart,
-					"aria-valuetext": String(L.value[0]),
-					onInput: t[0] ||= (e) => H(0, e)
-				}, null, 40, x), c("input", {
-					class: "m-slider__input wk-slider__input--end",
+					min: u.min,
+					max: u.max,
+					step: u.step,
+					value: H.value[0],
+					name: u.name,
+					autofocus: u.autofocus || void 0,
+					disabled: u.disabled,
+					orient: u.vertical ? "vertical" : void 0,
+					"aria-label": v(P).rangeStart,
+					"aria-valuetext": String(H.value[0]),
+					onInput: t[0] ||= (e) => q(0, e)
+				}), null, 16, C), l("input", {
+					class: "m-slider__input m-slider__input--end",
 					type: "range",
-					min: l.min,
-					max: l.max,
-					step: l.step,
-					value: L.value[1],
-					disabled: l.disabled,
-					orient: l.vertical ? "vertical" : void 0,
-					"aria-label": g(k).rangeEnd,
-					"aria-valuetext": String(L.value[1]),
-					onInput: t[1] ||= (e) => H(1, e)
-				}, null, 40, S)], 64)) : (f(), s("input", {
-					key: 2,
+					min: u.min,
+					max: u.max,
+					step: u.step,
+					value: H.value[1],
+					disabled: u.disabled,
+					orient: u.vertical ? "vertical" : void 0,
+					"aria-label": v(P).rangeEnd,
+					"aria-valuetext": String(H.value[1]),
+					onInput: t[1] ||= (e) => q(1, e)
+				}, null, 40, w)], 64)) : (m(), c("input", d({ key: 2 }, v(N), {
 					class: "m-slider__input",
 					type: "range",
-					min: l.min,
-					max: l.max,
-					step: l.step,
-					value: I.value,
-					disabled: l.disabled,
-					orient: l.vertical ? "vertical" : void 0,
-					"aria-label": l.ariaLabel ?? g(k).sliderControl,
-					"aria-labelledby": l.label ? `${g(M)}-label` : void 0,
-					"aria-valuetext": z.value,
-					onInput: V
-				}, null, 40, C)),
-				R.value.length ? (f(), s("div", w, [(f(!0), s(i, null, m(R.value, (e) => (f(), s("span", {
+					min: u.min,
+					max: u.max,
+					step: u.step,
+					value: V.value,
+					name: u.name,
+					autofocus: u.autofocus || void 0,
+					disabled: u.disabled,
+					orient: u.vertical ? "vertical" : void 0,
+					"aria-label": u.ariaLabel ?? v(P).sliderControl,
+					"aria-labelledby": u.label ? `${v(L)}-label` : void 0,
+					"aria-valuetext": W.value,
+					onInput: K
+				}), null, 16, T)),
+				U.value.length ? (m(), c("div", E, [(m(!0), c(a, null, g(U.value, (e) => (m(), c("span", {
 					key: e.value,
 					class: "m-slider__mark",
-					style: d(l.vertical ? { bottom: `${e.percent}%` } : { left: `${e.percent}%` })
-				}, h(e.label), 5))), 128))])) : o("", !0)
-			], 42, y),
-			g(P) ? (f(), s("span", {
+					style: p(u.vertical ? { bottom: `${e.percent}%` } : { left: `${e.percent}%` })
+				}, _(e.label), 5))), 128))])) : s("", !0)
+			], 42, x),
+			v(z) ? (m(), c("span", {
 				key: 1,
-				id: `${g(M)}-help`,
-				class: u(["m-slider-field__help", { "m-slider-field__help--invalid": g(F) }]),
-				role: g(F) ? "alert" : void 0
-			}, h(g(P)), 11, T)) : o("", !0)
-		]));
+				id: `${v(L)}-help`,
+				class: f(["m-slider-field__help", { "m-slider-field__help--invalid": v(B) }]),
+				role: v(B) ? "alert" : void 0
+			}, _(v(z)), 11, D)) : s("", !0)
+		], 16));
 	}
 });
 //#endregion
-export { E as MSlider };
+export { O as MSlider };