morya-ui 0.2.2 → 0.2.4

package/dist/order-list/index.js

@@ -1,11 +1,12 @@
 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 { t as r } from "../ScrollBody-CXFNhBvq.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, 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";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeProps as m, nextTick as ee, normalizeClass as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as te, watch as S, withCtx as C, withModifiers as w } from "vue";
 //#region src/components/OrderList/OrderList.vue?vue&type=script&setup=true&lang.ts
-var T = { class: "m-orderlist__controls" }, E = ["aria-label", "disabled"], D = ["aria-label", "disabled"], O = ["aria-label"], ee = [
+var T = { class: "m-orderlist__controls" }, E = ["aria-label", "disabled"], D = ["aria-label", "disabled"], ne = ["aria-label"], O = [
 	"aria-selected",
 	"draggable",
 	"tabindex",
@@ -18,7 +19,7 @@ var T = { class: "m-orderlist__controls" }, E = ["aria-label", "disabled"], D =
 	key: 1,
 	class: "m-orderlist__message",
 	role: "status"
-}, M = { class: "m-orderlist__empty-text" }, N = /* @__PURE__ */ d({
+}, M = { class: "m-orderlist__empty-text" }, N = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "OrderList",
 	props: {
@@ -33,8 +34,8 @@ var T = { class: "m-orderlist__controls" }, E = ["aria-label", "disabled"], D =
 		emptyMessage: {}
 	},
 	emits: ["update:modelValue", "reorder"],
-	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);
+	setup(p, { emit: N }) {
+		let P = p, F = te(), { rootAttrs: I } = e(F, () => P.pt), L = N, R = i(), z = o(() => 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);
 		}
@@ -55,7 +56,7 @@ var T = { class: "m-orderlist__controls" }, E = ["aria-label", "disabled"], D =
 			}
 			K.onKeydown(e);
 		}
-		C(K.activeIndex, (e) => {
+		S(K.activeIndex, (e) => {
 			e < 0 || (B.value = e, Y(e));
 		});
 		function Z(e) {
@@ -66,22 +67,22 @@ var T = { class: "m-orderlist__controls" }, E = ["aria-label", "disabled"], D =
 			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));
+			r.splice(n, 0, i), B.value = n, K.setActive(n), Z(r), ee(() => Y(n));
 		}
-		function te() {
+		function re() {
 			P.dragdrop && (U.value = !0);
 		}
-		function ne(e, t) {
+		function ie(e, t) {
 			if (!P.dragdrop || !U.value) {
 				t.preventDefault();
 				return;
 			}
 			V.value = e, H.value = e, t.dataTransfer?.setData("text/plain", String(e)), t.dataTransfer.effectAllowed = "move", q(e);
 		}
-		function re(e, t) {
+		function ae(e, t) {
 			!P.dragdrop || V.value == null || V.value === e || (t.preventDefault(), t.dataTransfer.dropEffect = "move", H.value = e);
 		}
-		function ie(e, t) {
+		function oe(e, t) {
 			if (!P.dragdrop || V.value == null) return;
 			t.preventDefault();
 			let n = V.value;
@@ -92,71 +93,78 @@ var T = { class: "m-orderlist__controls" }, E = ["aria-label", "disabled"], D =
 			let r = [...P.modelValue], [i] = r.splice(n, 1);
 			r.splice(e, 0, i), B.value = e, Z(r), $();
 		}
-		function ae() {
+		function se() {
 			$();
 		}
 		function $() {
 			V.value = null, H.value = null, U.value = !1;
 		}
-		return (e, n) => (g(), s("div", f(x(I), { class: "m-orderlist" }), [c("div", T, [c("button", {
+		return (e, n) => (g(), l("div", m(x(I), { class: "m-orderlist" }), [u("div", T, [u("button", {
 			type: "button",
 			class: "m-orderlist__btn",
 			"aria-label": x(R).moveUp,
 			disabled: B.value === null || B.value <= 0,
 			onClick: n[0] ||= (e) => Q(-1)
-		}, [u(t, {
+		}, [f(t, {
 			name: "chevron-up",
 			size: "sm"
-		})], 8, E), c("button", {
+		})], 8, E), u("button", {
 			type: "button",
 			class: "m-orderlist__btn",
 			"aria-label": x(R).moveDown,
-			disabled: B.value === null || B.value >= d.modelValue.length - 1,
+			disabled: B.value === null || B.value >= p.modelValue.length - 1,
 			onClick: n[1] ||= (e) => Q(1)
-		}, [u(t, {
+		}, [f(t, {
 			name: "chevron-down",
 			size: "sm"
-		})], 8, D)]), d.modelValue.length ? (g(), s("ul", {
-			key: 0,
-			ref_key: "list",
-			ref: G,
-			class: "m-orderlist__list",
-			style: h(d.listStyle),
-			role: "listbox",
-			"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": 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", {
+		})], 8, D)]), p.modelValue.length ? (g(), s(r, {
 			key: 0,
-			type: "button",
-			class: "m-orderlist__handle",
-			"aria-label": x(R).dragToReorder,
-			tabindex: "-1",
-			onClick: n[2] ||= w(() => {}, ["stop"]),
-			onPointerdown: te
-		}, [u(t, {
-			name: "grip",
-			size: "sm"
-		})], 40, k)) : o("", !0), c("span", A, [y(e.$slots, "item", {
-			item: r,
-			index: i
-		}, () => [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));
+			"root-class": "m-orderlist__scrollbar",
+			"wrap-class": "m-orderlist__list",
+			"wrap-style": p.listStyle
+		}, {
+			default: C(() => [u("ul", {
+				ref_key: "list",
+				ref: G,
+				class: "m-orderlist__options",
+				role: "listbox",
+				tabindex: "0",
+				"aria-label": x(R).selectOption,
+				onKeydown: X
+			}, [(g(!0), l(a, null, v(p.modelValue, (r, i) => (g(), l("li", {
+				key: W(r, i),
+				class: h(["m-orderlist__item", {
+					"m-orderlist__item--selected": B.value === i,
+					"m-orderlist__ghost": p.dragdrop && V.value === i,
+					"m-orderlist__drop-target": p.dragdrop && H.value === i && V.value !== i
+				}]),
+				role: "option",
+				"aria-selected": B.value === i,
+				draggable: p.dragdrop,
+				tabindex: J(i),
+				onClick: (e) => q(i),
+				onFocus: (e) => q(i),
+				onDragstart: (e) => ie(i, e),
+				onDragover: (e) => ae(i, e),
+				onDrop: (e) => oe(i, e),
+				onDragend: se
+			}, [p.dragdrop ? (g(), l("button", {
+				key: 0,
+				type: "button",
+				class: "m-orderlist__handle",
+				"aria-label": x(R).dragToReorder,
+				tabindex: "-1",
+				onClick: n[2] ||= w(() => {}, ["stop"]),
+				onPointerdown: re
+			}, [f(t, {
+				name: "grip",
+				size: "sm"
+			})], 40, k)) : c("", !0), u("span", A, [y(e.$slots, "item", {
+				item: r,
+				index: i
+			}, () => [d(b(r), 1)])])], 42, O))), 128))], 40, ne)]),
+			_: 3
+		}, 8, ["wrap-style"])) : (g(), l("div", j, [y(e.$slots, "empty", {}, () => [u("p", M, b(z.value), 1)])]))], 16));
 	}
 });
 //#endregion