morya-ui 0.2.2 → 0.2.4

package/dist/pick-list/index.js

@@ -1,36 +1,37 @@
 import { r as e } from "../useComponentAttrs-BTYEe61P.js";
 import { t } from "../Icon-DfpIfo2L.js";
-import { n } from "../locale-DYGhxekd.js";
+import { t as n } from "../ScrollBody-CXFNhBvq.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, mergeProps as d, normalizeClass as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useAttrs as y, withKeys 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, normalizeClass as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, withCtx as x, withKeys as S, withModifiers as C } from "vue";
 //#region src/components/PickList/PickList.vue?vue&type=script&setup=true&lang.ts
-var S = { class: "m-picklist__listbox" }, C = { class: "m-picklist__header" }, w = {
-	class: "m-picklist__list",
+var w = { class: "m-picklist__listbox" }, T = { class: "m-picklist__header" }, E = {
+	class: "m-picklist__options",
 	role: "listbox",
 	"aria-multiselectable": "true",
 	tabindex: "0"
-}, T = [
+}, D = [
 	"aria-selected",
 	"onClick",
 	"onKeydown"
-], E = {
+], O = {
 	key: 0,
 	class: "m-picklist__empty",
 	role: "status"
-}, D = { class: "m-picklist__controls" }, O = ["aria-label", "disabled"], k = ["aria-label", "disabled"], A = ["aria-label", "disabled"], j = ["aria-label", "disabled"], M = { class: "m-picklist__listbox" }, N = { class: "m-picklist__header" }, P = {
-	class: "m-picklist__list",
+}, k = { class: "m-picklist__controls" }, A = ["aria-label", "disabled"], j = ["aria-label", "disabled"], M = ["aria-label", "disabled"], N = ["aria-label", "disabled"], P = { class: "m-picklist__listbox" }, F = { class: "m-picklist__header" }, I = {
+	class: "m-picklist__options",
 	role: "listbox",
 	"aria-multiselectable": "true",
 	tabindex: "0"
-}, F = [
+}, L = [
 	"aria-selected",
 	"onClick",
 	"onKeydown"
-], I = {
+], R = {
 	key: 0,
 	class: "m-picklist__empty",
 	role: "status"
-}, L = /* @__PURE__ */ u({
+}, z = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "PickList",
 	props: {
@@ -43,109 +44,121 @@ var S = { class: "m-picklist__listbox" }, C = { class: "m-picklist__header" }, w
 		emptyMessage: {}
 	},
 	emits: ["update:source", "update:target"],
-	setup(u, { emit: L }) {
-		let R = u, z = y(), { rootAttrs: B } = e(z, () => R.pt), V = L, H = m([]), U = m([]), W = n(), G = i(() => R.sourceHeader ?? W.value.sourceHeader), K = i(() => R.targetHeader ?? W.value.targetHeader), q = i(() => R.emptyMessage ?? W.value.emptyMessage);
-		function J(e, t) {
-			return R.dataKey && e && typeof e == "object" && R.dataKey in e ? String(e[R.dataKey]) : t;
+	setup(d, { emit: z }) {
+		let B = d, V = b(), { rootAttrs: H } = e(V, () => B.pt), U = z, W = h([]), G = h([]), K = r(), q = a(() => B.sourceHeader ?? K.value.sourceHeader), J = a(() => B.targetHeader ?? K.value.targetHeader), Y = a(() => B.emptyMessage ?? K.value.emptyMessage);
+		function X(e, t) {
+			return B.dataKey && e && typeof e == "object" && B.dataKey in e ? String(e[B.dataKey]) : t;
 		}
-		function Y(e, t, n) {
-			return (e === "source" ? H : U).value.includes(J(t, n));
+		function Z(e, t, n) {
+			return (e === "source" ? W : G).value.includes(X(t, n));
 		}
-		function X(e, t, n) {
-			let r = e === "source" ? H : U, i = J(t, n);
+		function Q(e, t, n) {
+			let r = e === "source" ? W : G, i = X(t, n);
 			r.value = r.value.indexOf(i) >= 0 ? r.value.filter((e) => e !== i) : [...r.value, i];
 		}
-		function Z() {
-			if (!H.value.length) return;
-			let e = R.source.filter((e, t) => Y("source", e, t)), t = R.source.filter((e, t) => !Y("source", e, t));
-			V("update:source", t), V("update:target", [...R.target, ...e]), H.value = [];
-		}
-		function Q() {
-			if (!U.value.length) return;
-			let e = R.target.filter((e, t) => Y("target", e, t)), t = R.target.filter((e, t) => !Y("target", e, t));
-			V("update:target", t), V("update:source", [...R.source, ...e]), U.value = [];
-		}
 		function $() {
-			R.source.length && (V("update:target", [...R.target, ...R.source]), V("update:source", []), H.value = []);
+			if (!W.value.length) return;
+			let e = B.source.filter((e, t) => Z("source", e, t)), t = B.source.filter((e, t) => !Z("source", e, t));
+			U("update:source", t), U("update:target", [...B.target, ...e]), W.value = [];
 		}
 		function ee() {
-			R.target.length && (V("update:source", [...R.source, ...R.target]), V("update:target", []), U.value = []);
+			if (!G.value.length) return;
+			let e = B.target.filter((e, t) => Z("target", e, t)), t = B.target.filter((e, t) => !Z("target", e, t));
+			U("update:target", t), U("update:source", [...B.source, ...e]), G.value = [];
+		}
+		function te() {
+			B.source.length && (U("update:target", [...B.target, ...B.source]), U("update:source", []), W.value = []);
 		}
-		return (e, n) => (p(), o("div", d(v(B), { class: "m-picklist" }), [
-			s("div", S, [s("div", C, _(G.value), 1), s("ul", w, [(p(!0), o(r, null, h(u.source, (t, n) => (p(), o("li", {
-				key: J(t, n),
-				class: f(["m-picklist__item", { "m-picklist__item--selected": Y("source", t, n) }]),
-				role: "option",
-				"aria-selected": Y("source", t, n),
-				tabindex: "0",
-				onClick: (e) => X("source", t, n),
-				onKeydown: [b(x((e) => X("source", t, n), ["prevent"]), ["enter"]), b(x((e) => X("source", t, n), ["prevent"]), ["space"])]
-			}, [g(e.$slots, "item", {
-				item: t,
-				index: n
-			}, () => [c(_(t), 1)])], 42, T))), 128)), u.source.length ? a("", !0) : (p(), o("li", E, [g(e.$slots, "empty", {}, () => [c(_(q.value), 1)])]))])]),
-			s("div", D, [
-				s("button", {
+		function ne() {
+			B.target.length && (U("update:source", [...B.source, ...B.target]), U("update:target", []), G.value = []);
+		}
+		return (e, r) => (m(), s("div", f(y(H), { class: "m-picklist" }), [
+			c("div", w, [c("div", T, v(q.value), 1), u(n, {
+				"root-class": "m-picklist__scrollbar",
+				"wrap-class": "m-picklist__list"
+			}, {
+				default: x(() => [c("ul", E, [(m(!0), s(i, null, g(d.source, (t, n) => (m(), s("li", {
+					key: X(t, n),
+					class: p(["m-picklist__item", { "m-picklist__item--selected": Z("source", t, n) }]),
+					role: "option",
+					"aria-selected": Z("source", t, n),
+					tabindex: "0",
+					onClick: (e) => Q("source", t, n),
+					onKeydown: [S(C((e) => Q("source", t, n), ["prevent"]), ["enter"]), S(C((e) => Q("source", t, n), ["prevent"]), ["space"])]
+				}, [_(e.$slots, "item", {
+					item: t,
+					index: n
+				}, () => [l(v(t), 1)])], 42, D))), 128)), d.source.length ? o("", !0) : (m(), s("li", O, [_(e.$slots, "empty", {}, () => [l(v(Y.value), 1)])]))])]),
+				_: 3
+			})]),
+			c("div", k, [
+				c("button", {
 					type: "button",
 					class: "m-picklist__btn",
-					"aria-label": v(W).moveAllToTarget,
-					disabled: !u.source.length,
-					onClick: $
-				}, [l(t, {
+					"aria-label": y(K).moveAllToTarget,
+					disabled: !d.source.length,
+					onClick: te
+				}, [u(t, {
 					name: "chevron-right",
 					size: "sm"
-				}), l(t, {
+				}), u(t, {
 					name: "chevron-right",
 					size: "sm"
-				})], 8, O),
-				s("button", {
+				})], 8, A),
+				c("button", {
 					type: "button",
 					class: "m-picklist__btn",
-					"aria-label": v(W).moveToTarget,
-					disabled: !H.value.length,
-					onClick: Z
-				}, [l(t, {
+					"aria-label": y(K).moveToTarget,
+					disabled: !W.value.length,
+					onClick: $
+				}, [u(t, {
 					name: "chevron-right",
 					size: "sm"
-				})], 8, k),
-				s("button", {
+				})], 8, j),
+				c("button", {
 					type: "button",
 					class: "m-picklist__btn",
-					"aria-label": v(W).moveToSource,
-					disabled: !U.value.length,
-					onClick: Q
-				}, [l(t, {
+					"aria-label": y(K).moveToSource,
+					disabled: !G.value.length,
+					onClick: ee
+				}, [u(t, {
 					name: "chevron-left",
 					size: "sm"
-				})], 8, A),
-				s("button", {
+				})], 8, M),
+				c("button", {
 					type: "button",
 					class: "m-picklist__btn",
-					"aria-label": v(W).moveAllToSource,
-					disabled: !u.target.length,
-					onClick: ee
-				}, [l(t, {
+					"aria-label": y(K).moveAllToSource,
+					disabled: !d.target.length,
+					onClick: ne
+				}, [u(t, {
 					name: "chevron-left",
 					size: "sm"
-				}), l(t, {
+				}), u(t, {
 					name: "chevron-left",
 					size: "sm"
-				})], 8, j)
+				})], 8, N)
 			]),
-			s("div", M, [s("div", N, _(K.value), 1), s("ul", P, [(p(!0), o(r, null, h(u.target, (t, n) => (p(), o("li", {
-				key: J(t, n),
-				class: f(["m-picklist__item", { "m-picklist__item--selected": Y("target", t, n) }]),
-				role: "option",
-				"aria-selected": Y("target", t, n),
-				tabindex: "0",
-				onClick: (e) => X("target", t, n),
-				onKeydown: [b(x((e) => X("target", t, n), ["prevent"]), ["enter"]), b(x((e) => X("target", t, n), ["prevent"]), ["space"])]
-			}, [g(e.$slots, "item", {
-				item: t,
-				index: n
-			}, () => [c(_(t), 1)])], 42, F))), 128)), u.target.length ? a("", !0) : (p(), o("li", I, [g(e.$slots, "empty", {}, () => [c(_(q.value), 1)])]))])])
+			c("div", P, [c("div", F, v(J.value), 1), u(n, {
+				"root-class": "m-picklist__scrollbar",
+				"wrap-class": "m-picklist__list"
+			}, {
+				default: x(() => [c("ul", I, [(m(!0), s(i, null, g(d.target, (t, n) => (m(), s("li", {
+					key: X(t, n),
+					class: p(["m-picklist__item", { "m-picklist__item--selected": Z("target", t, n) }]),
+					role: "option",
+					"aria-selected": Z("target", t, n),
+					tabindex: "0",
+					onClick: (e) => Q("target", t, n),
+					onKeydown: [S(C((e) => Q("target", t, n), ["prevent"]), ["enter"]), S(C((e) => Q("target", t, n), ["prevent"]), ["space"])]
+				}, [_(e.$slots, "item", {
+					item: t,
+					index: n
+				}, () => [l(v(t), 1)])], 42, L))), 128)), d.target.length ? o("", !0) : (m(), s("li", R, [_(e.$slots, "empty", {}, () => [l(v(Y.value), 1)])]))])]),
+				_: 3
+			})])
 		], 16));
 	}
 });
 //#endregion
-export { L as MPickList };
+export { z as MPickList };