morya-ui 0.1.1 → 0.2.1

package/dist/Scrollbar-DoNZvgX2.js

@@ -0,0 +1,410 @@
+import { r as e } from "./useComponentAttrs-BTYEe61P.js";
+import { t } from "./useMId-BXFYayPP.js";
+import { Fragment as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, inject as ee, mergeProps as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onActivated as h, onBeforeUnmount as te, onMounted as g, onUpdated as _, openBlock as v, provide as y, reactive as b, ref as x, renderSlot as S, resolveDynamicComponent as C, unref as w, useAttrs as ne, vShow as T, watch as E, withCtx as re, withDirectives as ie } from "vue";
+//#region src/components/Scrollbar/constants.ts
+var D = Symbol("muScrollbar"), ae = {
+	vertical: {
+		offset: "offsetHeight",
+		scroll: "scrollTop",
+		scrollSize: "scrollHeight",
+		size: "height",
+		key: "vertical",
+		axis: "Y",
+		client: "clientY",
+		direction: "top"
+	},
+	horizontal: {
+		offset: "offsetWidth",
+		scroll: "scrollLeft",
+		scrollSize: "scrollWidth",
+		size: "width",
+		key: "horizontal",
+		axis: "X",
+		client: "clientX",
+		direction: "left"
+	}
+};
+function O(e) {
+	if (e == null || e === "") return;
+	if (typeof e == "number") return `${e}px`;
+	let t = String(e).trim();
+	return /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t;
+}
+function k({ move: e, size: t, bar: n }) {
+	return {
+		[n.size]: t,
+		transform: `translate${n.axis}(${e}%)`
+	};
+}
+function A(e) {
+	return typeof e == "number" && !Number.isNaN(e);
+}
+function j(e) {
+	return Object.prototype.toString.call(e) === "[object Object]";
+}
+//#endregion
+//#region src/components/Scrollbar/Thumb.vue?vue&type=script&setup=true&lang.ts
+var M = ["aria-orientation", "aria-controls"], N = /* @__PURE__ */ u({
+	__name: "Thumb",
+	props: {
+		vertical: { type: Boolean },
+		size: {},
+		move: {},
+		ratio: {},
+		always: { type: Boolean }
+	},
+	setup(e) {
+		let t = e, n = ee(D);
+		if (!n) throw Error("[MScrollbar] Thumb must be used inside MScrollbar");
+		let o = n, s = x(), l = x(), u = x(!1), d = x({}), f = !1, h = !0, _ = 0, y = 0, b = null, S, C, ne = i(() => t.vertical ? "vertical" : "horizontal"), O = i(() => ae[ne.value]), A = i(() => k({
+			size: t.size,
+			move: t.move,
+			bar: O.value
+		})), j = i(() => t.always || u.value), N = i(() => {
+			let e = s.value, n = l.value, r = o.wrapElement;
+			return !e || !n || !r ? 1 : e[O.value.offset] ** 2 / r[O.value.scrollSize] / t.ratio / n[O.value.offset];
+		});
+		function P() {
+			typeof document > "u" || document.onselectstart !== b && (document.onselectstart = b);
+		}
+		function F(e) {
+			let t = s.value, n = l.value, r = o.wrapElement;
+			if (!f || !t || !n || !r) return;
+			let i = d.value[O.value.axis];
+			if (!i) return;
+			let a = ((t.getBoundingClientRect()[O.value.direction] - e[O.value.client]) * -1 - (n[O.value.offset] - i)) * 100 * N.value / t[O.value.offset];
+			O.value.scroll === "scrollLeft" ? r.scrollLeft = a * y / 100 : r.scrollTop = a * _ / 100;
+		}
+		function I() {
+			f = !1, d.value[O.value.axis] = 0, document.removeEventListener("mousemove", F), document.removeEventListener("mouseup", I), P(), h && (u.value = !1);
+		}
+		function L(e) {
+			let t = o.wrapElement;
+			t && (e.stopImmediatePropagation(), f = !0, _ = t.scrollHeight, y = t.scrollWidth, document.addEventListener("mousemove", F), document.addEventListener("mouseup", I), b = document.onselectstart, document.onselectstart = () => !1);
+		}
+		function R(e) {
+			if (e.stopPropagation(), e.ctrlKey || [1, 2].includes(e.button)) return;
+			window.getSelection()?.removeAllRanges(), L(e);
+			let t = e.currentTarget;
+			t && (d.value[O.value.axis] = t[O.value.offset] - (e[O.value.client] - t.getBoundingClientRect()[O.value.direction]));
+		}
+		function z(e) {
+			let t = s.value, n = l.value, r = o.wrapElement;
+			if (!t || !n || !r) return;
+			let i = (Math.abs(e.target.getBoundingClientRect()[O.value.direction] - e[O.value.client]) - n[O.value.offset] / 2) * 100 * N.value / t[O.value.offset];
+			r[O.value.scroll] = i * r[O.value.scrollSize] / 100;
+		}
+		function B(e) {
+			let n = o.wrapElement;
+			if (!n || !t.size) return;
+			let r = (t.vertical ? {
+				ArrowDown: () => {
+					n.scrollTop += 40;
+				},
+				ArrowUp: () => {
+					n.scrollTop -= 40;
+				},
+				PageDown: () => {
+					n.scrollTop += n.clientHeight;
+				},
+				PageUp: () => {
+					n.scrollTop -= n.clientHeight;
+				},
+				Home: () => {
+					n.scrollTop = 0;
+				},
+				End: () => {
+					n.scrollTop = n.scrollHeight;
+				}
+			} : {
+				ArrowRight: () => {
+					n.scrollLeft += 40;
+				},
+				ArrowLeft: () => {
+					n.scrollLeft -= 40;
+				},
+				Home: () => {
+					n.scrollLeft = 0;
+				},
+				End: () => {
+					n.scrollLeft = n.scrollWidth;
+				}
+			})[e.key];
+			r && (e.preventDefault(), r());
+		}
+		function V() {
+			h = !1, u.value = !!t.size;
+		}
+		function H() {
+			h = !0, u.value = f;
+		}
+		function U() {
+			S?.(), C?.();
+			let e = o.scrollbarElement;
+			e && (e.addEventListener("mousemove", V), e.addEventListener("mouseleave", H), S = () => e.removeEventListener("mousemove", V), C = () => e.removeEventListener("mouseleave", H));
+		}
+		return g(() => {
+			U();
+		}), E(() => o.scrollbarElement, () => {
+			U();
+		}), te(() => {
+			P(), document.removeEventListener("mousemove", F), document.removeEventListener("mouseup", I), S?.(), C?.();
+		}), (t, n) => (v(), a(r, { name: "m-scrollbar-fade" }, {
+			default: re(() => [ie(c("div", {
+				ref_key: "trackRef",
+				ref: s,
+				class: p(["m-scrollbar__bar", e.vertical ? "m-scrollbar__bar--vertical" : "m-scrollbar__bar--horizontal"]),
+				role: "scrollbar",
+				"aria-orientation": e.vertical ? "vertical" : "horizontal",
+				"aria-controls": w(o).contentId,
+				tabindex: "0",
+				onMousedown: z,
+				onKeydown: B
+			}, [c("div", {
+				ref_key: "thumbRef",
+				ref: l,
+				class: "m-scrollbar__thumb",
+				style: m(A.value),
+				onMousedown: R
+			}, null, 36)], 42, M), [[T, e.size && j.value]])]),
+			_: 1
+		}));
+	}
+}), P = ["tabindex"], F = /* @__PURE__ */ u({
+	name: "MScrollbar",
+	inheritAttrs: !1,
+	__name: "Scrollbar",
+	props: {
+		pt: {},
+		height: { default: "" },
+		maxHeight: { default: "" },
+		width: { default: "" },
+		maxWidth: { default: "" },
+		fitContent: {
+			type: Boolean,
+			default: !1
+		},
+		native: { type: Boolean },
+		wrapStyle: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		wrapClass: { default: "" },
+		viewStyle: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		viewClass: { default: "" },
+		noresize: { type: Boolean },
+		tag: { default: "div" },
+		always: { type: Boolean },
+		trigger: { default: "hover" },
+		minSize: { default: 20 },
+		tabindex: { default: void 0 },
+		id: {},
+		role: {},
+		ariaLabel: {},
+		ariaMultiselectable: { type: Boolean },
+		ariaOrientation: {},
+		distance: { default: 0 }
+	},
+	emits: ["scroll", "end-reached"],
+	setup(r, { expose: u, emit: ee }) {
+		let T = r, ie = ne(), { rootAttrs: ae } = e(ie, () => T.pt), k = ee, M = x(), F = x(), I = x(), L = x(0), R = x(0), z = x(""), B = x(""), V = x(1), H = x(1), U = t("m-scrollbar-view"), oe = i(() => T.id ?? U), W = 0, G = 0, K = "", q = 0, J, Y = {
+			bottom: !1,
+			top: !1,
+			right: !1,
+			left: !1
+		}, se = {
+			top: "bottom",
+			bottom: "top",
+			left: "right",
+			right: "left"
+		}, ce = i(() => !!O(T.maxHeight) || !!O(T.maxWidth));
+		function X(e, t, n, r) {
+			let i = t === "height" ? "minHeight" : "minWidth";
+			n && (e[t] = n), r && (e[t === "height" ? "maxHeight" : "maxWidth"] = r, n || (e[t] = "auto", e[i] = "0"));
+		}
+		let le = i(() => {
+			let e = {};
+			return X(e, "height", O(T.height), O(T.maxHeight)), X(e, "width", O(T.width), O(T.maxWidth)), e;
+		}), ue = i(() => {
+			let e = {}, t = O(T.height), n = O(T.maxHeight), r = O(T.width), i = O(T.maxWidth);
+			return t ? e.height = t : n && X(e, "height", void 0, n), r ? e.width = r : i && X(e, "width", void 0, i), [T.wrapStyle, e];
+		}), de = i(() => [
+			"m-scrollbar",
+			{ "m-scrollbar--fill": !ce.value },
+			{ "m-scrollbar--fit-content": T.fitContent }
+		]), fe = i(() => [
+			"m-scrollbar__wrap",
+			T.wrapClass,
+			{ "m-scrollbar__wrap--hidden-default": !T.native }
+		]), pe = i(() => ["m-scrollbar__view", T.viewClass]), me = i(() => !!(T.always || T.trigger === "none"));
+		y(D, b({
+			scrollbarElement: M,
+			wrapElement: F,
+			contentId: oe
+		}));
+		function he(e) {
+			let t = e.offsetHeight - 4, n = e.offsetWidth - 4;
+			R.value = e.scrollTop * 100 / t * H.value, L.value = e.scrollLeft * 100 / n * V.value;
+		}
+		function ge() {
+			let e = F.value;
+			if (!e) return;
+			let t = e.offsetHeight - 4, n = e.offsetWidth - 4, r = t ** 2 / e.scrollHeight, i = n ** 2 / e.scrollWidth, a = Math.max(r, T.minSize), o = Math.max(i, T.minSize);
+			H.value = r / (t - r) / (a / (t - a)) || 1, V.value = i / (n - i) / (o / (n - o)) || 1, B.value = a + 4 < t ? `${a}px` : "", z.value = o + 4 < n ? `${o}px` : "";
+		}
+		function _e(e, t) {
+			return e > t + 2 ** -52;
+		}
+		function ve(e) {
+			return Y[e] ?? !1;
+		}
+		function ye(e) {
+			let t = se[K];
+			t && (e[K] && !Y[K] && (Y[K] = !0), !e[t] && Y[t] && (Y[t] = !1));
+		}
+		function be() {
+			let e = F.value;
+			if (!e) return;
+			T.native || he(e);
+			let t = W, n = G;
+			W = e.scrollTop, G = e.scrollLeft;
+			let r = {
+				bottom: !_e(e.scrollHeight - T.distance, e.clientHeight + W),
+				top: W <= T.distance && t !== 0,
+				right: !_e(e.scrollWidth - T.distance, e.clientWidth + G) && n !== G,
+				left: G <= T.distance && n !== 0
+			};
+			if (k("scroll", {
+				scrollTop: W,
+				scrollLeft: G
+			}), t !== W && (K = W > t ? "bottom" : "top"), n !== G && (K = G > n ? "right" : "left"), T.distance > 0) {
+				if (ve(K)) return;
+				ye(r);
+			}
+			r[K] && k("end-reached", K);
+		}
+		function Z() {
+			T.native || (ge(), Y[K] = !1, F.value && he(F.value));
+		}
+		function xe(e, t) {
+			let n = F.value;
+			n && (j(e) ? n.scrollTo(e) : A(e) && A(t) && n.scrollTo(e, t));
+		}
+		function Se(e) {
+			!A(e) || !F.value || (F.value.scrollTop = e);
+		}
+		function Ce(e) {
+			!A(e) || !F.value || (F.value.scrollLeft = e);
+		}
+		function Q() {
+			q ||= requestAnimationFrame(() => {
+				q = 0, Z();
+			});
+		}
+		function $() {
+			J?.disconnect(), J = void 0, window.removeEventListener("resize", Q);
+		}
+		function we() {
+			$(), !(T.noresize || T.native || typeof ResizeObserver > "u") && (J = new ResizeObserver(() => Q()), I.value && J.observe(I.value), F.value && J.observe(F.value), window.addEventListener("resize", Q));
+		}
+		return E(() => T.noresize, () => {
+			T.noresize ? $() : we();
+		}), E(() => [
+			T.maxHeight,
+			T.maxWidth,
+			T.height,
+			T.width,
+			T.native
+		], () => {
+			T.native || f(() => Z());
+		}), g(() => {
+			f(() => {
+				Z(), we();
+			});
+		}), _(() => {
+			T.native || Q();
+		}), h(() => {
+			F.value && (F.value.scrollTop = W, F.value.scrollLeft = G);
+		}), te(() => {
+			$(), q && cancelAnimationFrame(q);
+		}), u({
+			wrapRef: F,
+			update: Z,
+			scrollTo: xe,
+			setScrollTop: Se,
+			setScrollLeft: Ce,
+			handleScroll: be
+		}), (e, t) => (v(), s("div", d(w(ae), {
+			ref_key: "scrollbarRef",
+			ref: M,
+			class: de.value,
+			style: le.value
+		}), [c("div", {
+			ref_key: "wrapRef",
+			ref: F,
+			class: p(fe.value),
+			style: m(ue.value),
+			tabindex: r.tabindex,
+			onScroll: be
+		}, [(v(), a(C(r.tag), {
+			id: oe.value,
+			ref_key: "viewRef",
+			ref: I,
+			class: p(pe.value),
+			style: m(r.viewStyle),
+			role: r.role,
+			"aria-label": r.ariaLabel,
+			"aria-multiselectable": r.ariaMultiselectable === !0 || void 0,
+			"aria-orientation": r.ariaOrientation
+		}, {
+			default: re(() => [S(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"id",
+			"class",
+			"style",
+			"role",
+			"aria-label",
+			"aria-multiselectable",
+			"aria-orientation"
+		]))], 46, P), r.native ? o("", !0) : (v(), s(n, { key: 0 }, [l(N, {
+			move: L.value,
+			ratio: V.value,
+			size: z.value,
+			always: me.value
+		}, null, 8, [
+			"move",
+			"ratio",
+			"size",
+			"always"
+		]), l(N, {
+			vertical: "",
+			move: R.value,
+			ratio: H.value,
+			size: B.value,
+			always: me.value
+		}, null, 8, [
+			"move",
+			"ratio",
+			"size",
+			"always"
+		])], 64))], 16));
+	}
+});
+//#endregion
+export { F as t };

package/dist/accordion/index.js

@@ -1,16 +1,19 @@
-import { t as e } from "../useControllable-elmWaz23.js";
+import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { t } from "../useControllable-elmWaz23.js";
 import "./style.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderList as l, renderSlot as u, toDisplayString as d, vShow as f, withDirectives as p, withModifiers as m } from "vue";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, toDisplayString as p, unref as m, useAttrs as h, vShow as g, withDirectives as _, withModifiers as v } from "vue";
 //#region src/components/Accordion/Accordion.vue?vue&type=script&setup=true&lang.ts
-var h = { class: "m-accordion" }, g = [
+var y = [
 	"id",
 	"aria-expanded",
 	"aria-controls",
 	"disabled",
 	"onClick"
-], _ = { class: "m-accordion__header-text" }, v = ["id", "aria-labelledby"], y = /* @__PURE__ */ o({
+], b = { class: "m-accordion__header-text" }, x = ["id", "aria-labelledby"], S = /* @__PURE__ */ s({
+	inheritAttrs: !1,
 	__name: "Accordion",
 	props: {
+		pt: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		multiple: {
@@ -20,59 +23,59 @@ var h = { class: "m-accordion" }, g = [
 		tabs: {}
 	},
 	emits: ["update:modelValue"],
-	setup(o, { emit: y }) {
-		let b = o, x = y;
-		function S() {
-			return b.defaultValue === void 0 ? b.multiple ? [] : "" : b.defaultValue;
+	setup(s, { emit: S }) {
+		let C = s, w = h(), { rootAttrs: T } = e(w, () => C.pt), E = S;
+		function D() {
+			return C.defaultValue === void 0 ? C.multiple ? [] : "" : C.defaultValue;
 		}
-		let { value: C, setValue: w } = e({
-			controlled: () => b.modelValue,
-			defaultValue: S()
-		}, (e) => x("update:modelValue", e)), T = n(() => {
-			let e = C.value;
-			return b.multiple ? Array.isArray(e) ? e : e ? [e] : [] : Array.isArray(e) ? e[0] ? [e[0]] : [] : e ? [e] : [];
+		let { value: O, setValue: k } = t({
+			controlled: () => C.modelValue,
+			defaultValue: D()
+		}, (e) => E("update:modelValue", e)), A = r(() => {
+			let e = O.value;
+			return C.multiple ? Array.isArray(e) ? e : e ? [e] : [] : Array.isArray(e) ? e[0] ? [e[0]] : [] : e ? [e] : [];
 		});
-		function E(e) {
-			return T.value.includes(e);
+		function j(e) {
+			return A.value.includes(e);
 		}
-		function D(e) {
+		function M(e) {
 			return `m-accordion-panel-${e}`;
 		}
-		function O(e) {
+		function N(e) {
 			return `m-accordion-header-${e}`;
 		}
-		function k(e, t) {
+		function P(e, t) {
 			if (!t) {
-				if (b.multiple) {
-					let t = [...T.value], n = t.indexOf(e);
-					n >= 0 ? t.splice(n, 1) : t.push(e), w(t);
+				if (C.multiple) {
+					let t = [...A.value], n = t.indexOf(e);
+					n >= 0 ? t.splice(n, 1) : t.push(e), k(t);
 					return;
 				}
-				w(E(e) ? "" : e);
+				k(j(e) ? "" : e);
 			}
 		}
-		return (e, n) => (c(), i("div", h, [(c(!0), i(t, null, l(o.tabs, (t) => (c(), i("div", {
-			key: t.value,
+		return (e, t) => (u(), a("div", c(m(T), { class: "m-accordion" }), [(u(!0), a(n, null, d(s.tabs, (n) => (u(), a("div", {
+			key: n.value,
 			class: "m-accordion__tab"
-		}, [a("button", {
-			id: O(t.value),
+		}, [o("button", {
+			id: N(n.value),
 			type: "button",
-			class: s(["m-accordion__header", { "m-accordion__header--active": E(t.value) }]),
-			"aria-expanded": E(t.value),
-			"aria-controls": D(t.value),
-			disabled: t.disabled,
-			onClick: (e) => k(t.value, t.disabled)
-		}, [a("span", _, d(t.header), 1), e.$slots.extra ? (c(), i("span", {
+			class: l(["m-accordion__header", { "m-accordion__header--active": j(n.value) }]),
+			"aria-expanded": j(n.value),
+			"aria-controls": M(n.value),
+			disabled: n.disabled,
+			onClick: (e) => P(n.value, n.disabled)
+		}, [o("span", b, p(n.header), 1), e.$slots.extra ? (u(), a("span", {
 			key: 0,
 			class: "m-accordion__header-extra",
-			onClick: n[0] ||= m(() => {}, ["stop"])
-		}, [u(e.$slots, "extra", { tab: t })])) : r("", !0)], 10, g), p(a("div", {
-			id: D(t.value),
+			onClick: t[0] ||= v(() => {}, ["stop"])
+		}, [f(e.$slots, "extra", { tab: n })])) : i("", !0)], 10, y), _(o("div", {
+			id: M(n.value),
 			class: "m-accordion__content",
 			role: "region",
-			"aria-labelledby": O(t.value)
-		}, [u(e.$slots, t.value)], 8, v), [[f, E(t.value)]])]))), 128))]));
+			"aria-labelledby": N(n.value)
+		}, [f(e.$slots, n.value)], 8, x), [[g, j(n.value)]])]))), 128))], 16));
 	}
 });
 //#endregion
-export { y as MAccordion };
+export { S as MAccordion };