@well-insight/ui 0.1.7 → 0.1.8

package/dist/tree/style.js

@@ -0,0 +1,5 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/Checkbox/styles.css'
+import '../components/Icon/styles.css'
+import '../components/Tree/styles.css'

package/dist/tree-select/index.js

@@ -0,0 +1,317 @@
+import { n as e, t } from "../overlay-oR-5MDuE.js";
+import { t as n } from "../Checkbox-BtgWgkHI.js";
+import { a as r, i, n as ee, o as te, r as a, s as ne } from "../checkStrategy-CZzuUKDI.js";
+import { c as re, o as ie } from "../config-DWwce9jA.js";
+import { n as o } from "../locale-CYkJyRd1.js";
+import "./style.js";
+import { Fragment as s, Teleport as ae, Transition as oe, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as se, defineComponent as p, nextTick as ce, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as le, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, vModelText as x, watch as S, withCtx as C, withDirectives as ue, withKeys as de, withModifiers as w } from "vue";
+//#region src/components/TreeSelect/TreeSelectNodeItem.vue?vue&type=script&setup=true&lang.ts
+var T = ["aria-expanded"], E = ["aria-label"], D = {
+	key: 1,
+	class: "wi-treeselect__toggler-spacer"
+}, O = ["disabled"], k = {
+	key: 0,
+	role: "group"
+}, A = /* @__PURE__ */ p({
+	__name: "TreeSelectNodeItem",
+	props: {
+		node: {},
+		depth: {},
+		selectedKeys: {},
+		checkedKeys: {},
+		expanded: {},
+		showCheckbox: { type: Boolean }
+	},
+	emits: [
+		"toggle",
+		"select",
+		"check"
+	],
+	setup(e) {
+		let t = o();
+		return (r, i) => (g(), d("li", {
+			class: "wi-treeselect__node",
+			role: "treeitem",
+			"aria-expanded": e.node.children?.length ? !!e.expanded[e.node.key] : void 0
+		}, [f("div", {
+			class: "wi-treeselect__row",
+			style: h({ paddingLeft: `${e.depth * .75}rem` })
+		}, [
+			e.node.children?.length ? (g(), d("button", {
+				key: 0,
+				type: "button",
+				class: "wi-treeselect__toggler",
+				"aria-label": e.expanded[e.node.key] ? b(t).collapse : b(t).expand,
+				onClick: i[0] ||= w((t) => r.$emit("toggle", e.node.key), ["stop"])
+			}, y(e.expanded[e.node.key] ? "▾" : "▸"), 9, E)) : (g(), d("span", D)),
+			e.showCheckbox ? (g(), l(n, {
+				key: 2,
+				class: "wi-treeselect__checkbox",
+				"model-value": !!e.checkedKeys[e.node.key],
+				disabled: e.node.disabled,
+				"onUpdate:modelValue": i[1] ||= (t) => r.$emit("check", e.node),
+				onClick: i[2] ||= w(() => {}, ["stop"])
+			}, null, 8, ["model-value", "disabled"])) : u("", !0),
+			f("button", {
+				type: "button",
+				class: m(["wi-treeselect__option", { "wi-treeselect__option--selected": e.selectedKeys.includes(e.node.key) }]),
+				disabled: e.node.disabled,
+				onClick: i[3] ||= (t) => r.$emit("select", e.node)
+			}, y(e.node.label), 11, O)
+		], 4), e.node.children?.length && e.expanded[e.node.key] ? (g(), d("ul", k, [(g(!0), d(s, null, v(e.node.children, (t) => (g(), l(A, {
+			key: t.key,
+			node: t,
+			depth: e.depth + 1,
+			"selected-keys": e.selectedKeys,
+			"checked-keys": e.checkedKeys,
+			expanded: e.expanded,
+			"show-checkbox": e.showCheckbox,
+			onToggle: i[4] ||= (e) => r.$emit("toggle", e),
+			onSelect: i[5] ||= (e) => r.$emit("select", e),
+			onCheck: i[6] ||= (e) => r.$emit("check", e)
+		}, null, 8, [
+			"node",
+			"depth",
+			"selected-keys",
+			"checked-keys",
+			"expanded",
+			"show-checkbox"
+		]))), 128))])) : u("", !0)], 8, T));
+	}
+}), fe = [
+	"aria-disabled",
+	"aria-expanded",
+	"onKeydown"
+], pe = {
+	key: 0,
+	class: "wi-treeselect__tags"
+}, me = { class: "wi-select__tag-label" }, he = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], ge = {
+	key: 0,
+	class: "wi-select__tag wi-select__tag--more"
+}, j = ["aria-label"], _e = ["placeholder"], M = {
+	class: "wi-treeselect__tree",
+	role: "tree"
+}, N = /* @__PURE__ */ p({
+	__name: "TreeSelect",
+	props: {
+		options: {},
+		modelValue: { default: null },
+		placeholder: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: {},
+		selectionMode: { default: "single" },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		checkable: {
+			type: Boolean,
+			default: !1
+		},
+		checkStrictly: {
+			type: Boolean,
+			default: !1
+		},
+		checkStrategy: { default: "all" },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		filterable: {
+			type: Boolean,
+			default: !1
+		},
+		showPath: {
+			type: Boolean,
+			default: !1
+		},
+		separator: { default: " / " },
+		maxTagCount: {},
+		teleport: {
+			type: Boolean,
+			default: !0
+		},
+		appendTo: {}
+	},
+	emits: ["update:modelValue", "clear"],
+	setup(n, { emit: p }) {
+		let T = n, E = p, D = re(), O = o(), k = ie("TreeSelect", () => T.size), N = _(!1), P = _(""), F = _(null), I = _(null), L = _(null), R = _({}), z = _({}), B = c(() => e(T, D.value.appendTo)), V = c(() => t(T, D.value.appendTo)), H = c(() => T.multiple || T.selectionMode === "multiple" || T.checkable), U = c(() => Array.isArray(T.modelValue) ? T.modelValue : typeof T.modelValue == "string" && T.modelValue ? [T.modelValue] : []), ve = c(() => {
+			let e = {};
+			for (let t of U.value) e[t] = !0;
+			return e;
+		}), W = c(() => ee(T.options, ve.value, T.checkStrategy, T.checkStrictly)), ye = c(() => {
+			let e = U.value[0];
+			if (!e || H.value) return T.placeholder ?? O.value.selectPlaceholder;
+			if (T.showPath) {
+				let t = i(T.options, e);
+				return t.length ? t.join(T.separator) : e;
+			}
+			return a(T.options, e)?.label ?? T.placeholder ?? O.value.selectPlaceholder;
+		}), G = c(() => U.value.map((e) => ({
+			key: e,
+			label: T.showPath ? i(T.options, e).join(T.separator) : a(T.options, e)?.label ?? e
+		}))), K = c(() => {
+			let e = T.maxTagCount;
+			return e == null || e < 0 || G.value.length <= e ? G.value : G.value.slice(0, e);
+		}), q = c(() => Math.max(0, G.value.length - K.value.length)), be = c(() => {
+			let e = P.value.trim().toLowerCase();
+			if (!e) return T.options;
+			let t = (n) => {
+				let r = n.label.toLowerCase().includes(e), i = (n.children ?? []).map(t).filter((e) => e != null);
+				return r || i.length ? {
+					...n,
+					children: i.length ? i : n.children
+				} : null;
+			};
+			return T.options.map(t).filter((e) => e != null);
+		});
+		function J() {
+			if (!V.value || !I.value) return;
+			let e = I.value.getBoundingClientRect();
+			R.value = {
+				left: `${e.left}px`,
+				minWidth: `${e.width}px`,
+				top: `${e.bottom + 8}px`
+			};
+		}
+		function Y() {
+			T.disabled || (N.value = !N.value, N.value && ce(() => J()));
+		}
+		function xe(e) {
+			z.value = {
+				...z.value,
+				[e]: !z.value[e]
+			};
+		}
+		function X(e) {
+			H.value ? E("update:modelValue", e) : E("update:modelValue", e[0] ?? null);
+		}
+		function Se(e) {
+			if (!e.disabled) {
+				if (T.checkable) {
+					Z(e);
+					return;
+				}
+				if (!H.value) {
+					E("update:modelValue", e.key === T.modelValue ? null : e.key), N.value = !1;
+					return;
+				}
+				X(U.value.includes(e.key) ? U.value.filter((t) => t !== e.key) : [...U.value, e.key]);
+			}
+		}
+		function Z(e) {
+			if (e.disabled) return;
+			let t = { ...W.value }, n = !t[e.key];
+			T.checkStrictly ? n ? t[e.key] = !0 : delete t[e.key] : (te(e, n, t), ne(T.options, t));
+			let i = r(T.options, t, T.checkStrategy, T.checkStrictly);
+			X(Object.keys(i).filter((e) => i[e]));
+		}
+		function Ce(e) {
+			X(U.value.filter((t) => t !== e));
+		}
+		function we(e) {
+			e.stopPropagation(), E("update:modelValue", H.value ? [] : null), E("clear");
+		}
+		function Q(e) {
+			let t = e.target;
+			F.value?.contains(t) || L.value?.contains(t) || (N.value = !1);
+		}
+		function $() {
+			N.value && J();
+		}
+		return S(N, (e) => {
+			e ? (document.addEventListener("click", Q), V.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0))) : (P.value = "", document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), le(() => {
+			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
+		}), (e, t) => (g(), d("div", {
+			ref_key: "root",
+			ref: F,
+			class: m(["wi-treeselect", [`wi-treeselect--${b(k)}`, {
+				"wi-treeselect--disabled": n.disabled,
+				"wi-treeselect--open": N.value,
+				"wi-treeselect--multiple": H.value
+			}]])
+		}, [f("div", {
+			ref_key: "trigger",
+			ref: I,
+			class: "wi-treeselect__trigger",
+			role: "combobox",
+			tabindex: "0",
+			"aria-disabled": n.disabled || void 0,
+			"aria-expanded": N.value,
+			"aria-haspopup": "tree",
+			onClick: Y,
+			onKeydown: de(w(Y, ["prevent"]), ["enter"])
+		}, [
+			H.value && G.value.length ? (g(), d("div", pe, [(g(!0), d(s, null, v(K.value, (e) => (g(), d("span", {
+				key: e.key,
+				class: "wi-select__tag"
+			}, [f("span", me, y(e.label), 1), f("button", {
+				type: "button",
+				class: "wi-select__tag-remove",
+				"aria-label": b(O).remove,
+				disabled: n.disabled,
+				onClick: w((t) => Ce(e.key), ["stop"])
+			}, " × ", 8, he)]))), 128)), q.value ? (g(), d("span", ge, y(q.value > 0 ? `+${q.value}` : ""), 1)) : u("", !0)])) : (g(), d("span", {
+				key: 1,
+				class: m(["wi-treeselect__label", { "wi-treeselect__label--placeholder": !U.value.length }])
+			}, y(ye.value), 3)),
+			n.clearable && U.value.length && !n.disabled ? (g(), d("button", {
+				key: 2,
+				type: "button",
+				class: "wi-treeselect__clear",
+				"aria-label": b(O).clear,
+				onClick: we
+			}, " × ", 8, j)) : u("", !0),
+			t[2] ||= f("span", {
+				class: "wi-treeselect__caret",
+				"aria-hidden": "true"
+			}, "▾", -1)
+		], 40, fe), (g(), l(ae, {
+			to: B.value.to,
+			disabled: B.value.disabled
+		}, [se(oe, { name: "wi-scale-fade" }, {
+			default: C(() => [N.value ? (g(), d("div", {
+				key: 0,
+				ref_key: "panel",
+				ref: L,
+				class: m(["wi-treeselect__panel", { "wi-treeselect__panel--teleported": V.value }]),
+				style: h(V.value ? R.value : void 0)
+			}, [n.filterable ? ue((g(), d("input", {
+				key: 0,
+				"onUpdate:modelValue": t[0] ||= (e) => P.value = e,
+				class: "wi-treeselect__filter",
+				type: "search",
+				placeholder: b(O).searchPlaceholder,
+				onClick: t[1] ||= w(() => {}, ["stop"])
+			}, null, 8, _e)), [[x, P.value]]) : u("", !0), f("ul", M, [(g(!0), d(s, null, v(be.value, (e) => (g(), l(A, {
+				key: e.key,
+				node: e,
+				depth: 0,
+				"selected-keys": U.value,
+				"checked-keys": W.value,
+				expanded: z.value,
+				"show-checkbox": n.checkable,
+				onToggle: xe,
+				onSelect: Se,
+				onCheck: Z
+			}, null, 8, [
+				"node",
+				"selected-keys",
+				"checked-keys",
+				"expanded",
+				"show-checkbox"
+			]))), 128))])], 6)) : u("", !0)]),
+			_: 1
+		})], 8, ["to", "disabled"]))], 2));
+	}
+});
+//#endregion
+export { N as WiTreeSelect };