morya-ui 0.4.4 → 0.5.0

package/dist/order-list/index.js

@@ -2,11 +2,11 @@ import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../Icon-CmHjx7W8.js";
 import { t as n } from "../ScrollBody-5hUnHj_M.js";
 import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
-import { n as i } from "../locale-CZddM-tH.js";
+import { n as i } from "../locale-BcxMPufl.js";
 import "./style.js";
-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";
+import { Fragment as a, TransitionGroup as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as h, nextTick as ee, normalizeClass as te, onBeforeUnmount as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as C, watch as w, withCtx as T, withModifiers as E } 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"], ne = ["aria-label"], O = [
+var ne = { class: "m-orderlist__controls" }, re = ["aria-label", "disabled"], ie = ["aria-label", "disabled"], ae = ["aria-label", "disabled"], oe = ["aria-label", "disabled"], se = [
 	"aria-selected",
 	"draggable",
 	"tabindex",
@@ -15,157 +15,247 @@ var T = { class: "m-orderlist__controls" }, E = ["aria-label", "disabled"], D =
 	"onDragstart",
 	"onDragover",
 	"onDrop"
-], k = ["aria-label"], A = { class: "m-orderlist__label" }, j = {
+], ce = ["aria-label", "disabled"], le = { class: "m-orderlist__label" }, ue = {
 	key: 1,
 	class: "m-orderlist__message",
 	role: "status"
-}, M = { class: "m-orderlist__empty-text" }, N = /* @__PURE__ */ p({
+}, de = { class: "m-orderlist__empty-text" }, D = /* @__PURE__ */ m({
 	inheritAttrs: !1,
 	__name: "OrderList",
 	props: {
 		pt: {},
 		modelValue: { default: () => [] },
+		selection: { default: void 0 },
 		dataKey: { default: void 0 },
 		listStyle: {},
 		dragdrop: {
 			type: Boolean,
 			default: !0
 		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
 		emptyMessage: {}
 	},
-	emits: ["update:modelValue", "reorder"],
-	setup(p, { emit: N }) {
-		let P = p, F = N, I = te(), { rootAttrs: L } = e(I, () => P.pt), 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);
+	emits: [
+		"update:modelValue",
+		"update:selection",
+		"reorder"
+	],
+	setup(m, { emit: D }) {
+		let O = m, k = D, A = C(), { rootAttrs: j } = e(A, () => O.pt), M = i(), N = s(() => O.emptyMessage ?? M.value.emptyMessage), P = v(null), F = s({
+			get: () => O.selection === void 0 ? P.value : O.selection,
+			set: (e) => {
+				P.value = e, k("update:selection", e);
+			}
+		}), I = v(null), L = v(null), R = v(!1), z = v(null), B = v(null), V = v(null);
+		function H() {
+			let e = B.value;
+			return e ? e.$el ?? e : null;
+		}
+		let U = s(() => !O.disabled && O.modelValue.length > 0), W = s(() => U.value && F.value !== null && F.value > 0), G = s(() => U.value && F.value !== null && F.value < O.modelValue.length - 1);
+		function fe(e, t) {
+			return O.dataKey && e && typeof e == "object" && O.dataKey in e ? String(e[O.dataKey]) : String(t);
 		}
-		let G = _(null), K = r({ itemCount: () => P.modelValue.length });
+		let K = r({
+			itemCount: () => O.modelValue.length,
+			enabled: () => !O.disabled
+		});
 		function q(e) {
-			B.value = e, K.setActive(e);
+			O.disabled || (F.value = e, K.setActive(e));
 		}
-		function J(e) {
-			return K.activeIndex.value >= 0 ? K.tabindexFor(e) : e === (B.value ?? 0) ? 0 : -1;
+		function pe(e) {
+			return K.activeIndex.value >= 0 ? K.tabindexFor(e) : e === (F.value ?? 0) ? 0 : -1;
 		}
-		function Y(e) {
-			G.value?.querySelectorAll(".m-orderlist__item")[e]?.focus({ preventScroll: !0 });
+		function J(e) {
+			H()?.querySelectorAll(".m-orderlist__item")[e]?.focus({ preventScroll: !0 });
 		}
-		function X(e) {
-			if ((e.ctrlKey || e.metaKey) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-				e.preventDefault(), Q(e.key === "ArrowUp" ? -1 : 1);
+		function me(e) {
+			if (O.disabled) return;
+			let t = e.ctrlKey || e.metaKey;
+			if (t && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+				e.preventDefault(), X(e.key === "ArrowUp" ? -1 : 1);
+				return;
+			}
+			if (t && (e.key === "Home" || e.key === "End")) {
+				e.preventDefault(), Z(e.key === "Home" ? 0 : O.modelValue.length - 1);
 				return;
 			}
 			K.onKeydown(e);
 		}
-		S(K.activeIndex, (e) => {
-			e < 0 || (B.value = e, Y(e));
+		w(K.activeIndex, (e) => {
+			e < 0 || (F.value = e, J(e));
 		});
+		function Y(e, t, n) {
+			k("update:modelValue", e), k("reorder", {
+				item: e[n],
+				from: t,
+				to: n
+			});
+		}
+		function X(e) {
+			if (F.value === null || !U.value) return;
+			let t = F.value;
+			Z(t + e);
+		}
 		function Z(e) {
-			F("update:modelValue", e), F("reorder", e);
+			if (F.value === null || !U.value) return;
+			let t = F.value, n = Math.max(0, Math.min(O.modelValue.length - 1, e));
+			if (n === t) return;
+			let r = [...O.modelValue], [i] = r.splice(t, 1);
+			r.splice(n, 0, i), F.value = n, K.setActive(n), Y(r, t, n), ee(() => J(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), ee(() => Y(n));
+		function Q() {
+			!O.dragdrop || O.disabled || (R.value = !0);
 		}
-		function re() {
-			P.dragdrop && (U.value = !0);
+		function he(e) {
+			let t = H()?.querySelectorAll(".m-orderlist__item")[e];
+			if (!t) return null;
+			let n = t.getBoundingClientRect(), r = t.cloneNode(!0);
+			return r.classList.add("m-orderlist__drag-preview"), r.style.width = `${n.width}px`, r.style.height = `${n.height}px`, document.body.appendChild(r), r;
 		}
-		function ie(e, t) {
-			if (!P.dragdrop || !U.value) {
+		function ge(e, t) {
+			if (!O.dragdrop || O.disabled || !R.value) {
 				t.preventDefault();
 				return;
 			}
-			V.value = e, H.value = e, t.dataTransfer?.setData("text/plain", String(e)), t.dataTransfer.effectAllowed = "move", q(e);
+			I.value = e, L.value = e, t.dataTransfer?.setData("text/plain", String(e)), t.dataTransfer.effectAllowed = "move";
+			let n = he(e);
+			n && typeof t.dataTransfer?.setDragImage == "function" ? (z.value = n, t.dataTransfer.setDragImage(n, 20, 16)) : n && n.remove(), q(e);
 		}
-		function ae(e, t) {
-			!P.dragdrop || V.value == null || V.value === e || (t.preventDefault(), t.dataTransfer.dropEffect = "move", H.value = e);
+		function _e(e) {
+			let t = V.value?.wrapRef;
+			if (!t) return;
+			let n = t.getBoundingClientRect();
+			e.clientY < n.top + 32 ? t.scrollTop -= 12 : e.clientY > n.bottom - 32 && (t.scrollTop += 12);
 		}
-		function oe(e, t) {
-			if (!P.dragdrop || V.value == null) return;
+		function ve(e, t) {
+			!O.dragdrop || O.disabled || I.value == null || (_e(t), I.value !== e && (t.preventDefault(), t.dataTransfer.dropEffect = "move", L.value = e));
+		}
+		function ye(e, t) {
+			if (!O.dragdrop || O.disabled || I.value == null) return;
 			t.preventDefault();
-			let n = V.value;
+			let n = I.value;
 			if (n === e) {
 				$();
 				return;
 			}
-			let r = [...P.modelValue], [i] = r.splice(n, 1);
-			r.splice(e, 0, i), B.value = e, Z(r), $();
+			let r = [...O.modelValue], [i] = r.splice(n, 1);
+			r.splice(e, 0, i), F.value = e, K.setActive(e), Y(r, n, e), $();
 		}
-		function se() {
+		function be() {
 			$();
 		}
 		function $() {
-			V.value = null, H.value = null, U.value = !1;
-		}
-		return (e, r) => (g(), l("div", m(x(L), { 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: r[0] ||= (e) => Q(-1)
-		}, [f(t, {
-			name: "chevron-up",
-			size: "sm"
-		})], 8, E), u("button", {
-			type: "button",
-			class: "m-orderlist__btn",
-			"aria-label": x(R).moveDown,
-			disabled: B.value === null || B.value >= p.modelValue.length - 1,
-			onClick: r[1] ||= (e) => Q(1)
-		}, [f(t, {
-			name: "chevron-down",
-			size: "sm"
-		})], 8, D)]), p.modelValue.length ? (g(), s(n, {
+			I.value = null, L.value = null, R.value = !1, z.value &&= (z.value.remove(), null);
+		}
+		return g(() => {
+			z.value &&= (z.value.remove(), null);
+		}), (e, r) => (_(), u("div", h(S(j), { class: ["m-orderlist", { "m-orderlist--disabled": m.disabled }] }), [d("div", ne, [
+			d("button", {
+				type: "button",
+				class: "m-orderlist__btn",
+				"aria-label": S(M).moveTop,
+				disabled: !W.value,
+				onClick: r[0] ||= (e) => Z(0)
+			}, [p(t, {
+				name: "chevrons-up",
+				size: "sm"
+			})], 8, re),
+			d("button", {
+				type: "button",
+				class: "m-orderlist__btn",
+				"aria-label": S(M).moveUp,
+				disabled: !W.value,
+				onClick: r[1] ||= (e) => X(-1)
+			}, [p(t, {
+				name: "chevron-up",
+				size: "sm"
+			})], 8, ie),
+			d("button", {
+				type: "button",
+				class: "m-orderlist__btn",
+				"aria-label": S(M).moveDown,
+				disabled: !G.value,
+				onClick: r[2] ||= (e) => X(1)
+			}, [p(t, {
+				name: "chevron-down",
+				size: "sm"
+			})], 8, ae),
+			d("button", {
+				type: "button",
+				class: "m-orderlist__btn",
+				"aria-label": S(M).moveBottom,
+				disabled: !G.value,
+				onClick: r[3] ||= (e) => Z(m.modelValue.length - 1)
+			}, [p(t, {
+				name: "chevrons-down",
+				size: "sm"
+			})], 8, oe)
+		]), m.modelValue.length ? (_(), c(n, {
 			key: 0,
+			ref_key: "scrollBodyRef",
+			ref: V,
 			"root-class": "m-orderlist__scrollbar",
 			"wrap-class": "m-orderlist__list",
-			"wrap-style": p.listStyle
+			"wrap-style": m.listStyle
 		}, {
-			default: C(() => [u("ul", {
+			default: T(() => [p(o, {
 				ref_key: "list",
-				ref: G,
+				ref: B,
+				tag: "ul",
+				name: "m-orderlist",
 				class: "m-orderlist__options",
 				role: "listbox",
 				tabindex: "0",
-				"aria-label": x(R).selectOption,
-				onKeydown: X
-			}, [(g(!0), l(a, null, v(p.modelValue, (n, i) => (g(), l("li", {
-				key: W(n, 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: r[2] ||= w(() => {}, ["stop"]),
-				onPointerdown: re
-			}, [f(t, {
-				name: "grip",
-				size: "sm"
-			})], 40, k)) : c("", !0), u("span", A, [y(e.$slots, "item", {
-				item: n,
-				index: i
-			}, () => [d(b(n), 1)])])], 42, O))), 128))], 40, ne)]),
+				"aria-label": S(M).selectOption,
+				"aria-disabled": m.disabled || void 0,
+				onKeydown: me
+			}, {
+				default: T(() => [(_(!0), u(a, null, y(m.modelValue, (n, i) => (_(), u("li", {
+					key: fe(n, i),
+					class: te(["m-orderlist__item", {
+						"m-orderlist__item--selected": F.value === i,
+						"m-orderlist__item--disabled": m.disabled,
+						"m-orderlist__ghost": m.dragdrop && I.value === i,
+						"m-orderlist__drop-target": m.dragdrop && L.value === i && I.value !== i,
+						"m-orderlist__drop-before": m.dragdrop && L.value === i && I.value !== null && I.value > i,
+						"m-orderlist__drop-after": m.dragdrop && L.value === i && I.value !== null && I.value < i
+					}]),
+					role: "option",
+					"aria-selected": F.value === i,
+					draggable: m.dragdrop && !m.disabled,
+					tabindex: m.disabled ? -1 : pe(i),
+					onClick: (e) => q(i),
+					onFocus: (e) => q(i),
+					onDragstart: (e) => ge(i, e),
+					onDragover: (e) => ve(i, e),
+					onDrop: (e) => ye(i, e),
+					onDragend: be
+				}, [m.dragdrop ? (_(), u("button", {
+					key: 0,
+					type: "button",
+					class: "m-orderlist__handle",
+					"aria-label": S(M).dragToReorder,
+					disabled: m.disabled,
+					tabindex: "-1",
+					onClick: r[4] ||= E(() => {}, ["stop"]),
+					onPointerdown: Q
+				}, [p(t, {
+					name: "grip",
+					size: "sm"
+				})], 40, ce)) : l("", !0), d("span", le, [b(e.$slots, "item", {
+					item: n,
+					index: i,
+					selected: F.value === i,
+					dragging: I.value === i
+				}, () => [f(x(n), 1)])])], 42, se))), 128))]),
+				_: 3
+			}, 8, ["aria-label", "aria-disabled"])]),
 			_: 3
-		}, 8, ["wrap-style"])) : (g(), l("div", j, [y(e.$slots, "empty", {}, () => [u("p", M, b(z.value), 1)])]))], 16));
+		}, 8, ["wrap-style"])) : (_(), u("div", ue, [b(e.$slots, "empty", {}, () => [d("p", de, x(N.value), 1)])]))], 16));
 	}
 });
 //#endregion
-export { N as MOrderList };
+export { D as MOrderList };