@robuust-digital/vue-components 2.7.1 → 3.0.0

package/dist/_shared/combobox-yh0YQ8_d.js

@@ -0,0 +1,265 @@
+import { n as e, t } from "./ChevronDownIcon-Y_yqpwON.js";
+import { t as n } from "./icon-spinner-D3Dhustt.js";
+import { Fragment as r, computed as i, createBlock 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 _, resolveDynamicComponent as v, toDisplayString as y, unref as b, withCtx as x, withModifiers as S } from "vue";
+import { useDebounceFn as C } from "@vueuse/core";
+import { Combobox as w, ComboboxButton as T, ComboboxInput as E, ComboboxOption as D, ComboboxOptions as O } from "@headlessui/vue";
+//#region node_modules/@heroicons/vue/16/solid/esm/XCircleIcon.js
+function k(e, t) {
+	return m(), s("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		"data-slot": "icon"
+	}, [c("path", {
+		"fill-rule": "evenodd",
+		d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm2.78-4.22a.75.75 0 0 1-1.06 0L8 9.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 0 1 1.06-1.06L8 6.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L9.06 8l1.72 1.72a.75.75 0 0 1 0 1.06Z",
+		"clip-rule": "evenodd"
+	})]);
+}
+//#endregion
+//#region node_modules/@heroicons/vue/20/solid/esm/XMarkIcon.js
+function A(e, t) {
+	return m(), s("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 20 20",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		"data-slot": "icon"
+	}, [c("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })]);
+}
+//#endregion
+//#region src/components/Combobox.vue?vue&type=script&setup=true&lang.ts
+var j = { class: "rvc-combobox-container" }, M = { class: "rvc-combobox-wrapper" }, N = { class: "rvc-combobox-field" }, ee = {
+	key: 0,
+	class: "rvc-combobox-chips"
+}, te = ["onClick"], ne = {
+	key: 0,
+	class: "rvc-combobox-content"
+}, P = {
+	key: 1,
+	class: "rvc-combobox-content"
+}, F = { class: "rvc-combobox-option-text" }, I = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "Combobox",
+	props: {
+		id: {},
+		rootClass: { default: "" },
+		modelValue: { default: null },
+		endpoint: { default: void 0 },
+		requestParams: { default: () => ({}) },
+		manualInput: {
+			type: Boolean,
+			default: !1
+		},
+		responseData: {
+			type: Function,
+			default: (e) => e
+		},
+		displayValue: {
+			type: Function,
+			default: (e) => e?.name || null
+		},
+		optionText: {
+			type: Function,
+			default: (e) => e?.name || null
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		minLength: { default: 2 },
+		itemKey: { default: "id" },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		rootAttrs: { default: () => ({}) },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		onSearch: {
+			type: Function,
+			default: () => Promise.resolve({ data: [] })
+		},
+		searchOnly: {
+			type: Boolean,
+			default: !1
+		},
+		icon: {
+			type: [
+				Function,
+				Object,
+				null
+			],
+			default: null
+		},
+		prefixIcon: {
+			type: [
+				Function,
+				Object,
+				null
+			],
+			default: null
+		},
+		size: { default: "base" },
+		debounce: { default: 150 },
+		minLoadingTime: { default: 0 },
+		onCancel: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:requestParams",
+		"combobox:noResults",
+		"combobox:error"
+	],
+	setup(d, { emit: I }) {
+		let L = d, R = I, z = h([]), B = h(!1), V = h(null), H = h(!0), U = h(null), W = i({
+			get: () => L.multiple ? L.modelValue || [] : L.modelValue,
+			set: (e) => R("update:modelValue", e)
+		}), G = i({
+			get: () => L.requestParams,
+			set: (e) => R("update:requestParams", e)
+		}), K = (e) => L.displayValue(e) || "", q = (e) => new Promise((t) => {
+			setTimeout(t, e);
+		}), J = (e, t) => {
+			z.value = [], R("combobox:error", e), R("combobox:noResults", t);
+		}, Y = async (e) => {
+			if (!L.onSearch) return;
+			if (L.searchOnly && !e) {
+				z.value = [];
+				return;
+			}
+			if (e && e.length < L.minLength) {
+				z.value = [];
+				return;
+			}
+			U.value && L.onCancel && L.onCancel(U.value), B.value = !0;
+			let t = Date.now();
+			try {
+				let { data: n, error: r, cancel: i } = await L.onSearch(e, G.value, L.endpoint);
+				U.value = i || null;
+				let a = L.responseData(n), o = Date.now() - t;
+				!a.length && r && J(r, e), o < L.minLoadingTime && await q(L.minLoadingTime - o), a?.length ? z.value = a : (z.value = [], R("combobox:noResults", e));
+			} catch (t) {
+				t?.cancelled || J(t, e);
+			} finally {
+				B.value = !1;
+			}
+		}, X = C(Y, L.debounce), Z = (e) => {
+			H.value ? (H.value = !1, Y(e)) : X(e);
+		}, re = (e) => {
+			e.target.value?.length === 0 && (z.value = [], R("update:modelValue", null)), L.manualInput && R("update:modelValue", G.value.query);
+		}, Q = (e) => L.multiple ? W.value.some((t) => t[L.itemKey] === e) : W.value?.[L.itemKey] === e, $ = (e) => {
+			W.value = W.value.filter((t) => t[L.itemKey] !== e[L.itemKey]);
+		};
+		return (i, h) => (m(), a(b(w), f({
+			modelValue: W.value,
+			"onUpdate:modelValue": h[4] ||= (e) => W.value = e,
+			as: "div"
+		}, d.rootAttrs, {
+			multiple: d.multiple,
+			class: [
+				"rvc-combobox",
+				`rvc-combobox-${d.size}`,
+				d.rootClass
+			]
+		}), {
+			default: x(() => [c("div", j, [
+				c("div", M, [c("div", N, [
+					d.prefixIcon ? _(i.$slots, "prefixIcon", {
+						key: 0,
+						icon: d.prefixIcon
+					}, () => [(m(), a(v(d.prefixIcon), { "aria-hidden": "true" }))]) : o("", !0),
+					u(b(E), f(i.$attrs, {
+						id: d.id,
+						"display-value": K,
+						disabled: d.disabled,
+						autocomplete: "off",
+						onChange: h[0] ||= (e) => Z(e.target.value),
+						onSearch: re,
+						onInput: h[1] ||= (e) => V.value = e.target.value
+					}), null, 16, ["id", "disabled"]),
+					u(b(T), {
+						disabled: d.disabled,
+						class: "rvc-combobox-button",
+						onClick: h[2] ||= (e) => Z(V.value || null)
+					}, {
+						default: x(() => [B.value ? _(i.$slots, "spinner", {
+							key: 0,
+							spinning: B.value
+						}, () => [u(b(n), { class: "rvc-combobox-spinner" })]) : (!d.searchOnly || z.value?.length) && !B.value ? _(i.$slots, "icon", {
+							key: 1,
+							icon: d.icon
+						}, () => [(m(), a(v(d.icon ?? b(t)), { "aria-hidden": "true" }))]) : o("", !0)]),
+						_: 3
+					}, 8, ["disabled"])
+				]), d.clearable && (Array.isArray(d.modelValue) ? d.modelValue?.length : d.modelValue?.id) ? (m(), s("button", {
+					key: 0,
+					type: "button",
+					"aria-label": "Clear selection",
+					class: "rvc-combobox-clear",
+					onClick: h[3] ||= S((e) => R("update:modelValue", d.multiple ? [] : null), ["prevent"])
+				}, [_(i.$slots, "clear", {}, () => [u(b(A))])])) : o("", !0)]),
+				d.multiple && Array.isArray(W.value) && W.value?.length ? (m(), s("ul", ee, [(m(!0), s(r, null, g(W.value, (t) => (m(), s("li", { key: `${d.id}-selected-option-${t[d.itemKey]}` }, [_(i.$slots, "chip", {
+					optionText: d.optionText(t),
+					option: t,
+					removeOption: $
+				}, () => [u(e, {
+					color: "gray",
+					class: "rvc-combobox-chip",
+					size: d.size
+				}, {
+					default: x(() => [l(y(d.optionText(t)) + " ", 1), c("button", {
+						type: "button",
+						"aria-label": "Remove option",
+						onClick: S((e) => $(t), ["prevent"])
+					}, [u(b(k))], 8, te)]),
+					_: 2
+				}, 1032, ["size"])])]))), 128))])) : o("", !0),
+				(!d.searchOnly || V.value?.length) && (!B.value || z.value.length) ? (m(), a(b(O), {
+					key: 1,
+					class: "rvc-combobox-options"
+				}, {
+					default: x(() => [V.value && V.value.length < d.minLength ? (m(), s("div", ne, [c("div", null, [c("em", null, "Minimal " + y(d.minLength) + " characters.", 1)])])) : !B.value && !z.value.length ? (m(), s("div", P, [...h[5] ||= [c("div", null, " No results found. ", -1)]])) : (m(!0), s(r, { key: 2 }, g(z.value, (e) => (m(), a(b(D), {
+						key: `option-${e[d.itemKey]}`,
+						value: e,
+						as: "template"
+					}, {
+						default: x(({ active: t }) => [c("li", { class: p([
+							"rvc-combobox-option",
+							{ "rvc-combobox-option-hover": t },
+							{ "rvc-combobox-option-active": Q(e[d.itemKey]) }
+						]) }, [_(i.$slots, "option", {
+							option: e,
+							isActive: Q
+						}, () => [
+							_(i.$slots, "optionPrefix", {
+								option: e[d.itemKey],
+								isActive: Q
+							}),
+							c("span", F, y(d.optionText(e)), 1),
+							_(i.$slots, "optionSuffix", {
+								option: e[d.itemKey],
+								isActive: Q
+							})
+						])], 2)]),
+						_: 2
+					}, 1032, ["value"]))), 128))]),
+					_: 3
+				})) : o("", !0)
+			])]),
+			_: 3
+		}, 16, [
+			"modelValue",
+			"multiple",
+			"class"
+		]));
+	}
+}), L = I;
+//#endregion
+export { I as n, L as t };