morya-ui 0.1.1 → 0.2.2

package/dist/order-list/index.js

@@ -1,10 +1,11 @@
-import { t as e } from "../Icon-DfpIfo2L.js";
-import { t } from "../useMenuKeyboard-BedmYE4W.js";
-import { n } from "../locale-DYGhxekd.js";
+import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { t } from "../Icon-DfpIfo2L.js";
+import { t as n } from "../useMenuKeyboard-BedmYE4W.js";
+import { n as r } from "../locale-DYGhxekd.js";
 import "./style.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, nextTick as d, normalizeClass as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, watch as b, withModifiers as x } from "vue";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, nextTick as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as S, watch as C, withModifiers as w } from "vue";
 //#region src/components/OrderList/OrderList.vue?vue&type=script&setup=true&lang.ts
-var S = { class: "m-orderlist" }, ee = { class: "m-orderlist__controls" }, C = ["aria-label", "disabled"], w = ["aria-label", "disabled"], T = ["aria-label"], E = [
+var T = { class: "m-orderlist__controls" }, E = ["aria-label", "disabled"], D = ["aria-label", "disabled"], O = ["aria-label"], ee = [
 	"aria-selected",
 	"draggable",
 	"tabindex",
@@ -13,13 +14,15 @@ var S = { class: "m-orderlist" }, ee = { class: "m-orderlist__controls" }, C = [
 	"onDragstart",
 	"onDragover",
 	"onDrop"
-], D = ["aria-label"], O = { class: "m-orderlist__label" }, k = {
+], k = ["aria-label"], A = { class: "m-orderlist__label" }, j = {
 	key: 1,
 	class: "m-orderlist__message",
 	role: "status"
-}, A = { class: "m-orderlist__empty-text" }, j = /* @__PURE__ */ u({
+}, M = { class: "m-orderlist__empty-text" }, N = /* @__PURE__ */ d({
+	inheritAttrs: !1,
 	__name: "OrderList",
 	props: {
+		pt: {},
 		modelValue: { default: () => [] },
 		dataKey: { default: void 0 },
 		listStyle: {},
@@ -30,131 +33,131 @@ var S = { class: "m-orderlist" }, ee = { class: "m-orderlist__controls" }, C = [
 		emptyMessage: {}
 	},
 	emits: ["update:modelValue", "reorder"],
-	setup(u, { emit: j }) {
-		let M = u, N = j, P = n(), F = i(() => M.emptyMessage ?? P.value.emptyMessage), I = h(null), L = h(null), R = h(null), z = h(!1);
-		function B(e, t) {
-			return M.dataKey && e && typeof e == "object" && M.dataKey in e ? String(e[M.dataKey]) : String(t);
+	setup(d, { emit: N }) {
+		let P = d, F = S(), { rootAttrs: I } = e(F, () => P.pt), L = N, R = r(), z = a(() => P.emptyMessage ?? R.value.emptyMessage), B = _(null), V = _(null), H = _(null), U = _(!1);
+		function W(e, t) {
+			return P.dataKey && e && typeof e == "object" && P.dataKey in e ? String(e[P.dataKey]) : String(t);
 		}
-		let V = h(null), H = t({ itemCount: () => M.modelValue.length });
-		function U(e) {
-			I.value = e, H.setActive(e);
+		let G = _(null), K = n({ itemCount: () => P.modelValue.length });
+		function q(e) {
+			B.value = e, K.setActive(e);
 		}
-		function W(e) {
-			return H.activeIndex.value >= 0 ? H.tabindexFor(e) : e === (I.value ?? 0) ? 0 : -1;
+		function J(e) {
+			return K.activeIndex.value >= 0 ? K.tabindexFor(e) : e === (B.value ?? 0) ? 0 : -1;
 		}
-		function G(e) {
-			V.value?.querySelectorAll(".m-orderlist__item")[e]?.focus({ preventScroll: !0 });
+		function Y(e) {
+			G.value?.querySelectorAll(".m-orderlist__item")[e]?.focus({ preventScroll: !0 });
 		}
-		function K(e) {
+		function X(e) {
 			if ((e.ctrlKey || e.metaKey) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-				e.preventDefault(), J(e.key === "ArrowUp" ? -1 : 1);
+				e.preventDefault(), Q(e.key === "ArrowUp" ? -1 : 1);
 				return;
 			}
-			H.onKeydown(e);
+			K.onKeydown(e);
 		}
-		b(H.activeIndex, (e) => {
-			e < 0 || (I.value = e, G(e));
+		C(K.activeIndex, (e) => {
+			e < 0 || (B.value = e, Y(e));
 		});
-		function q(e) {
-			N("update:modelValue", e), N("reorder", e);
+		function Z(e) {
+			L("update:modelValue", e), L("reorder", e);
 		}
-		function J(e) {
-			if (I.value === null) return;
-			let t = I.value, n = t + e;
-			if (n < 0 || n >= M.modelValue.length) return;
-			let r = [...M.modelValue], [i] = r.splice(t, 1);
-			r.splice(n, 0, i), I.value = n, H.setActive(n), q(r), d(() => G(n));
+		function Q(e) {
+			if (B.value === null) return;
+			let t = B.value, n = t + e;
+			if (n < 0 || n >= P.modelValue.length) return;
+			let r = [...P.modelValue], [i] = r.splice(t, 1);
+			r.splice(n, 0, i), B.value = n, K.setActive(n), Z(r), p(() => Y(n));
 		}
-		function Y() {
-			M.dragdrop && (z.value = !0);
+		function te() {
+			P.dragdrop && (U.value = !0);
 		}
-		function X(e, t) {
-			if (!M.dragdrop || !z.value) {
+		function ne(e, t) {
+			if (!P.dragdrop || !U.value) {
 				t.preventDefault();
 				return;
 			}
-			L.value = e, R.value = e, t.dataTransfer?.setData("text/plain", String(e)), t.dataTransfer.effectAllowed = "move", U(e);
+			V.value = e, H.value = e, t.dataTransfer?.setData("text/plain", String(e)), t.dataTransfer.effectAllowed = "move", q(e);
 		}
-		function Z(e, t) {
-			!M.dragdrop || L.value == null || L.value === e || (t.preventDefault(), t.dataTransfer.dropEffect = "move", R.value = e);
+		function re(e, t) {
+			!P.dragdrop || V.value == null || V.value === e || (t.preventDefault(), t.dataTransfer.dropEffect = "move", H.value = e);
 		}
-		function Q(e, t) {
-			if (!M.dragdrop || L.value == null) return;
+		function ie(e, t) {
+			if (!P.dragdrop || V.value == null) return;
 			t.preventDefault();
-			let n = L.value;
+			let n = V.value;
 			if (n === e) {
 				$();
 				return;
 			}
-			let r = [...M.modelValue], [i] = r.splice(n, 1);
-			r.splice(e, 0, i), I.value = e, q(r), $();
+			let r = [...P.modelValue], [i] = r.splice(n, 1);
+			r.splice(e, 0, i), B.value = e, Z(r), $();
 		}
-		function te() {
+		function ae() {
 			$();
 		}
 		function $() {
-			L.value = null, R.value = null, z.value = !1;
+			V.value = null, H.value = null, U.value = !1;
 		}
-		return (t, n) => (m(), o("div", S, [s("div", ee, [s("button", {
+		return (e, n) => (g(), s("div", f(x(I), { class: "m-orderlist" }), [c("div", T, [c("button", {
 			type: "button",
 			class: "m-orderlist__btn",
-			"aria-label": y(P).moveUp,
-			disabled: I.value === null || I.value <= 0,
-			onClick: n[0] ||= (e) => J(-1)
-		}, [l(e, {
+			"aria-label": x(R).moveUp,
+			disabled: B.value === null || B.value <= 0,
+			onClick: n[0] ||= (e) => Q(-1)
+		}, [u(t, {
 			name: "chevron-up",
 			size: "sm"
-		})], 8, C), s("button", {
+		})], 8, E), c("button", {
 			type: "button",
 			class: "m-orderlist__btn",
-			"aria-label": y(P).moveDown,
-			disabled: I.value === null || I.value >= u.modelValue.length - 1,
-			onClick: n[1] ||= (e) => J(1)
-		}, [l(e, {
+			"aria-label": x(R).moveDown,
+			disabled: B.value === null || B.value >= d.modelValue.length - 1,
+			onClick: n[1] ||= (e) => Q(1)
+		}, [u(t, {
 			name: "chevron-down",
 			size: "sm"
-		})], 8, w)]), u.modelValue.length ? (m(), o("ul", {
+		})], 8, D)]), d.modelValue.length ? (g(), s("ul", {
 			key: 0,
 			ref_key: "list",
-			ref: V,
+			ref: G,
 			class: "m-orderlist__list",
-			style: p(u.listStyle),
+			style: h(d.listStyle),
 			role: "listbox",
-			"aria-label": y(P).selectOption,
-			onKeydown: K
-		}, [(m(!0), o(r, null, g(u.modelValue, (r, i) => (m(), o("li", {
-			key: B(r, i),
-			class: f(["m-orderlist__item", {
-				"m-orderlist__item--selected": I.value === i,
-				"m-orderlist__ghost": u.dragdrop && L.value === i,
-				"m-orderlist__drop-target": u.dragdrop && R.value === i && L.value !== i
+			"aria-label": x(R).selectOption,
+			onKeydown: X
+		}, [(g(!0), s(i, null, v(d.modelValue, (r, i) => (g(), s("li", {
+			key: W(r, i),
+			class: m(["m-orderlist__item", {
+				"m-orderlist__item--selected": B.value === i,
+				"m-orderlist__ghost": d.dragdrop && V.value === i,
+				"m-orderlist__drop-target": d.dragdrop && H.value === i && V.value !== i
 			}]),
 			role: "option",
-			"aria-selected": I.value === i,
-			draggable: u.dragdrop,
-			tabindex: W(i),
-			onClick: (e) => U(i),
-			onFocus: (e) => U(i),
-			onDragstart: (e) => X(i, e),
-			onDragover: (e) => Z(i, e),
-			onDrop: (e) => Q(i, e),
-			onDragend: te
-		}, [u.dragdrop ? (m(), o("button", {
+			"aria-selected": B.value === i,
+			draggable: d.dragdrop,
+			tabindex: J(i),
+			onClick: (e) => q(i),
+			onFocus: (e) => q(i),
+			onDragstart: (e) => ne(i, e),
+			onDragover: (e) => re(i, e),
+			onDrop: (e) => ie(i, e),
+			onDragend: ae
+		}, [d.dragdrop ? (g(), s("button", {
 			key: 0,
 			type: "button",
 			class: "m-orderlist__handle",
-			"aria-label": y(P).dragToReorder,
+			"aria-label": x(R).dragToReorder,
 			tabindex: "-1",
-			onClick: n[2] ||= x(() => {}, ["stop"]),
-			onPointerdown: Y
-		}, [l(e, {
+			onClick: n[2] ||= w(() => {}, ["stop"]),
+			onPointerdown: te
+		}, [u(t, {
 			name: "grip",
 			size: "sm"
-		})], 40, D)) : a("", !0), s("span", O, [_(t.$slots, "item", {
+		})], 40, k)) : o("", !0), c("span", A, [y(e.$slots, "item", {
 			item: r,
 			index: i
-		}, () => [c(v(r), 1)])])], 42, E))), 128))], 44, T)) : (m(), o("div", k, [_(t.$slots, "empty", {}, () => [s("p", A, v(F.value), 1)])]))]));
+		}, () => [l(b(r), 1)])])], 42, ee))), 128))], 44, O)) : (g(), s("div", j, [y(e.$slots, "empty", {}, () => [c("p", M, b(z.value), 1)])]))], 16));
 	}
 });
 //#endregion
-export { j as MOrderList };
+export { N as MOrderList };