@well-insight/ui 0.1.7 → 0.1.8

package/dist/drawer/style.js

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

package/dist/dropdown/index.js

@@ -0,0 +1,245 @@
+import { a as e, t } from "../Icon-B6gOD07E.js";
+import { n, t as r } from "../overlay-oR-5MDuE.js";
+import { c as i } from "../config-DWwce9jA.js";
+import { n as a } from "../locale-CYkJyRd1.js";
+import "./style.js";
+import { Fragment as o, Teleport as s, Transition as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as h, createVNode as g, defineComponent as _, nextTick as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, watch as O, withCtx as k } from "vue";
+//#region src/components/Dropdown/DropdownNodes.vue?vue&type=script&setup=true&lang.ts
+var A = {
+	key: 0,
+	class: "wi-dropdown__separator",
+	role: "separator"
+}, j = {
+	key: 1,
+	class: "wi-dropdown__group"
+}, M = { class: "wi-dropdown__group-label" }, N = ["onMouseenter"], P = ["disabled"], F = {
+	key: 0,
+	class: "wi-dropdown__icon",
+	"aria-hidden": "true"
+}, I = {
+	key: 0,
+	class: "wi-dropdown__submenu",
+	role: "menu"
+}, L = [
+	"disabled",
+	"onMouseenter",
+	"onClick"
+], R = {
+	key: 0,
+	class: "wi-dropdown__icon",
+	"aria-hidden": "true"
+}, z = /* @__PURE__ */ _({
+	__name: "DropdownNodes",
+	props: {
+		items: {},
+		highlightedValue: {}
+	},
+	emits: ["select", "highlight"],
+	setup(n, { emit: r }) {
+		let i = r, a = C(null);
+		function s(e) {
+			return e.separator || e.type === "divider";
+		}
+		function c(e) {
+			return e.type === "group";
+		}
+		function l(e, t) {
+			return e.value ?? e.label ?? `dd-${t}`;
+		}
+		function m(t) {
+			return t.icon && e(t.icon) ? t.icon : void 0;
+		}
+		function _(e, t) {
+			e.disabled || s(e) || c(e) || (i("highlight", e.value), e.items?.length && (a.value = l(e, t)));
+		}
+		function v() {
+			a.value = null;
+		}
+		return (e, r) => (S(!0), f(o, null, w(n.items, (i, b) => (S(), f(o, { key: l(i, b) }, [s(i) ? (S(), f("div", A)) : c(i) ? (S(), f("div", j, [p("div", M, E(i.label), 1), i.items?.length ? (S(), u(z, {
+			key: 0,
+			items: i.items,
+			"highlighted-value": n.highlightedValue,
+			onSelect: r[0] ||= (t) => e.$emit("select", t),
+			onHighlight: r[1] ||= (t) => e.$emit("highlight", t)
+		}, null, 8, ["items", "highlighted-value"])) : d("", !0)])) : i.items?.length ? (S(), f("div", {
+			key: 2,
+			class: "wi-dropdown__submenu-wrap",
+			onMouseenter: (e) => _(i, b),
+			onMouseleave: v
+		}, [p("button", {
+			type: "button",
+			class: y(["wi-dropdown__item wi-dropdown__item--parent", { "wi-dropdown__item--highlighted": n.highlightedValue === i.value }]),
+			role: "menuitem",
+			disabled: i.disabled,
+			"aria-haspopup": !0
+		}, [
+			m(i) || i.icon ? (S(), f("span", F, [m(i) ? (S(), u(t, {
+				key: 0,
+				name: m(i),
+				size: "sm"
+			}, null, 8, ["name"])) : (S(), f(o, { key: 1 }, [h(E(i.icon), 1)], 64))])) : d("", !0),
+			T(e.$slots, "item", { item: i }, () => [h(E(i.label), 1)]),
+			r[4] ||= p("span", {
+				class: "wi-dropdown__caret",
+				"aria-hidden": "true"
+			}, "▸", -1)
+		], 10, P), a.value === l(i, b) ? (S(), f("div", I, [g(z, {
+			items: i.items,
+			"highlighted-value": n.highlightedValue,
+			onSelect: r[2] ||= (t) => e.$emit("select", t),
+			onHighlight: r[3] ||= (t) => e.$emit("highlight", t)
+		}, null, 8, ["items", "highlighted-value"])])) : d("", !0)], 40, N)) : (S(), f("button", {
+			key: 3,
+			type: "button",
+			class: y(["wi-dropdown__item", { "wi-dropdown__item--highlighted": n.highlightedValue === i.value }]),
+			role: "menuitem",
+			disabled: i.disabled,
+			onMouseenter: (t) => !i.disabled && e.$emit("highlight", i.value),
+			onClick: (t) => e.$emit("select", i)
+		}, [m(i) || i.icon ? (S(), f("span", R, [m(i) ? (S(), u(t, {
+			key: 0,
+			name: m(i),
+			size: "sm"
+		}, null, 8, ["name"])) : (S(), f(o, { key: 1 }, [h(E(i.icon), 1)], 64))])) : d("", !0), T(e.$slots, "item", { item: i }, () => [h(E(i.label), 1)])], 42, L))], 64))), 128));
+	}
+}), B = ["aria-expanded"], V = /* @__PURE__ */ _({
+	__name: "Dropdown",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		items: {},
+		placement: { default: "bottom-start" },
+		closeOnSelect: {
+			type: Boolean,
+			default: !0
+		},
+		trigger: { default: "click" },
+		showDelay: { default: 0 },
+		hideDelay: { default: 200 },
+		teleport: {
+			type: Boolean,
+			default: !0
+		},
+		appendTo: {}
+	},
+	emits: ["update:modelValue", "select"],
+	setup(e, { emit: t }) {
+		let o = e, _ = t, w = i(), A = a(), j = C(null), M = C(null), N = C(null), P = C({}), F = C(-1), I = l(() => o.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), L = l(() => I.value[F.value]?.value), R, V, H = l(() => n(o, w.value.appendTo)), U = l(() => r(o, w.value.appendTo));
+		function W() {
+			F.value = I.value.length ? 0 : -1;
+		}
+		function G() {
+			if (!U.value || !M.value) return;
+			let e = M.value.getBoundingClientRect();
+			P.value = {
+				left: o.placement === "bottom-end" ? `${e.right}px` : `${e.left}px`,
+				minWidth: `${e.width}px`,
+				top: `${e.bottom + 8}px`,
+				...o.placement === "bottom-end" ? { transform: "translateX(-100%)" } : {}
+			};
+		}
+		function K(e) {
+			_("update:modelValue", e), e && (W(), v(() => {
+				G(), N.value?.focus({ preventScroll: !0 });
+			}));
+		}
+		function q() {
+			K(!o.modelValue);
+		}
+		function J() {
+			o.modelValue && G();
+		}
+		function Y(e) {
+			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), _("select", e), o.closeOnSelect && K(!1));
+		}
+		function X() {
+			R && clearTimeout(R), V && clearTimeout(V), R = void 0, V = void 0;
+		}
+		function Z() {
+			o.trigger === "hover" && (X(), R = setTimeout(() => K(!0), o.showDelay));
+		}
+		function Q() {
+			o.trigger === "hover" && (X(), V = setTimeout(() => K(!1), o.hideDelay));
+		}
+		function ee() {
+			o.trigger === "hover" && X();
+		}
+		function te() {
+			o.trigger === "hover" && (X(), V = setTimeout(() => K(!1), o.hideDelay));
+		}
+		function ne(e) {
+			if (o.modelValue) {
+				if (e.key === "Escape") {
+					e.preventDefault(), K(!1), M.value?.focus({ preventScroll: !0 });
+					return;
+				}
+				if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+					e.preventDefault();
+					let t = e.key === "ArrowDown" ? 1 : -1, n = I.value.length;
+					n && (F.value = (F.value + t + n) % n);
+				}
+				if (e.key === "Home" && (e.preventDefault(), F.value = 0), e.key === "End" && (e.preventDefault(), F.value = I.value.length - 1), e.key === "Enter" || e.key === " ") {
+					let t = I.value[F.value];
+					F.value >= 0 && t && (e.preventDefault(), Y(t));
+				}
+			}
+		}
+		function re(e) {
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), o.modelValue || K(!0));
+		}
+		function $(e) {
+			o.modelValue && j.value && !j.value.contains(e.target) && !N.value?.contains(e.target) && K(!1);
+		}
+		return O(() => o.modelValue, (e) => {
+			e ? (document.addEventListener("click", $), U.value && (window.addEventListener("resize", J), window.addEventListener("scroll", J, !0))) : (document.removeEventListener("click", $), window.removeEventListener("resize", J), window.removeEventListener("scroll", J, !0));
+		}, { immediate: !0 }), x(() => {
+			document.removeEventListener("click", $), window.removeEventListener("resize", J), window.removeEventListener("scroll", J, !0), X();
+		}), (t, n) => (S(), f("div", {
+			ref_key: "root",
+			ref: j,
+			class: "wi-dropdown"
+		}, [p("span", {
+			ref_key: "trigger",
+			ref: M,
+			class: "wi-dropdown__trigger",
+			role: "button",
+			tabindex: "0",
+			"aria-expanded": e.modelValue,
+			"aria-haspopup": "menu",
+			onClick: n[0] ||= (e) => o.trigger === "click" && q(),
+			onMouseenter: Z,
+			onMouseleave: Q,
+			onKeydown: re
+		}, [T(t.$slots, "trigger", {}, () => [h(E(D(A).openMenu), 1)])], 40, B), (S(), u(s, {
+			to: H.value.to,
+			disabled: H.value.disabled
+		}, [g(c, { name: "wi-scale-fade" }, {
+			default: k(() => [e.modelValue ? (S(), f("div", {
+				key: 0,
+				ref_key: "menu",
+				ref: N,
+				class: y(["wi-dropdown__menu", [`wi-dropdown__menu--${e.placement}`, { "wi-dropdown__menu--teleported": U.value }]]),
+				style: b(U.value ? P.value : void 0),
+				role: "menu",
+				tabindex: "-1",
+				onKeydown: ne,
+				onMouseenter: ee,
+				onMouseleave: te
+			}, [g(z, {
+				items: e.items,
+				"highlighted-value": L.value,
+				onSelect: Y,
+				onHighlight: n[1] ||= (e) => F.value = I.value.findIndex((t) => t.value === e)
+			}, m({ _: 2 }, [t.$slots.item ? {
+				name: "item",
+				fn: k(({ item: e }) => [T(t.$slots, "item", { item: e })]),
+				key: "0"
+			} : void 0]), 1032, ["items", "highlighted-value"])], 38)) : d("", !0)]),
+			_: 3
+		})], 8, ["to", "disabled"]))], 512));
+	}
+});
+//#endregion
+export { V as WiDropdown };