morya-ui 0.1.1

package/dist/meter-group/style.js

@@ -0,0 +1,3 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/MeterGroup/styles.css'

package/dist/order-list/index.js

@@ -0,0 +1,160 @@
+import { t as e } from "../Icon-DfpIfo2L.js";
+import { t } from "../useMenuKeyboard-BedmYE4W.js";
+import { n } 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";
+//#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 = [
+	"aria-selected",
+	"draggable",
+	"tabindex",
+	"onClick",
+	"onFocus",
+	"onDragstart",
+	"onDragover",
+	"onDrop"
+], D = ["aria-label"], O = { class: "m-orderlist__label" }, k = {
+	key: 1,
+	class: "m-orderlist__message",
+	role: "status"
+}, A = { class: "m-orderlist__empty-text" }, j = /* @__PURE__ */ u({
+	__name: "OrderList",
+	props: {
+		modelValue: { default: () => [] },
+		dataKey: { default: void 0 },
+		listStyle: {},
+		dragdrop: {
+			type: Boolean,
+			default: !0
+		},
+		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);
+		}
+		let V = h(null), H = t({ itemCount: () => M.modelValue.length });
+		function U(e) {
+			I.value = e, H.setActive(e);
+		}
+		function W(e) {
+			return H.activeIndex.value >= 0 ? H.tabindexFor(e) : e === (I.value ?? 0) ? 0 : -1;
+		}
+		function G(e) {
+			V.value?.querySelectorAll(".m-orderlist__item")[e]?.focus({ preventScroll: !0 });
+		}
+		function K(e) {
+			if ((e.ctrlKey || e.metaKey) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+				e.preventDefault(), J(e.key === "ArrowUp" ? -1 : 1);
+				return;
+			}
+			H.onKeydown(e);
+		}
+		b(H.activeIndex, (e) => {
+			e < 0 || (I.value = e, G(e));
+		});
+		function q(e) {
+			N("update:modelValue", e), N("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 Y() {
+			M.dragdrop && (z.value = !0);
+		}
+		function X(e, t) {
+			if (!M.dragdrop || !z.value) {
+				t.preventDefault();
+				return;
+			}
+			L.value = e, R.value = e, t.dataTransfer?.setData("text/plain", String(e)), t.dataTransfer.effectAllowed = "move", U(e);
+		}
+		function Z(e, t) {
+			!M.dragdrop || L.value == null || L.value === e || (t.preventDefault(), t.dataTransfer.dropEffect = "move", R.value = e);
+		}
+		function Q(e, t) {
+			if (!M.dragdrop || L.value == null) return;
+			t.preventDefault();
+			let n = L.value;
+			if (n === e) {
+				$();
+				return;
+			}
+			let r = [...M.modelValue], [i] = r.splice(n, 1);
+			r.splice(e, 0, i), I.value = e, q(r), $();
+		}
+		function te() {
+			$();
+		}
+		function $() {
+			L.value = null, R.value = null, z.value = !1;
+		}
+		return (t, n) => (m(), o("div", S, [s("div", ee, [s("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, {
+			name: "chevron-up",
+			size: "sm"
+		})], 8, C), s("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, {
+			name: "chevron-down",
+			size: "sm"
+		})], 8, w)]), u.modelValue.length ? (m(), o("ul", {
+			key: 0,
+			ref_key: "list",
+			ref: V,
+			class: "m-orderlist__list",
+			style: p(u.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
+			}]),
+			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", {
+			key: 0,
+			type: "button",
+			class: "m-orderlist__handle",
+			"aria-label": y(P).dragToReorder,
+			tabindex: "-1",
+			onClick: n[2] ||= x(() => {}, ["stop"]),
+			onPointerdown: Y
+		}, [l(e, {
+			name: "grip",
+			size: "sm"
+		})], 40, D)) : a("", !0), s("span", O, [_(t.$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)])]))]));
+	}
+});
+//#endregion
+export { j as MOrderList };