@nubisco/ui 5.14.0 → 5.15.1

package/dist/Select-BqVTogW-.js

@@ -1,408 +0,0 @@
-import { t as e } from "./Icon-rREAqsu0.js";
-import { t } from "./Label-CiWiUQ_H.js";
-import { t as n } from "./Message-SQvoXiWl.js";
-import { t as r } from "./Grid-DA2jibMM.js";
-import { useMenuSurface as i } from "./composables/useMenuSurface.composable.mjs";
-import { Fragment as a, Teleport as ee, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, nextTick as m, normalizeClass as h, normalizeStyle as te, onBeforeUnmount as ne, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useId as re, vModelText as ie, watch as ae, withCtx as S, withDirectives as oe, withKeys as se, withModifiers as C } from "vue";
-import { regular as w } from "@nubisco/ui/icons/caret-down";
-import { regular as T } from "@nubisco/ui/icons/caret-up";
-//#region src/components/Select.vue?vue&type=script&setup=true&lang.ts
-var ce = [
-	"id",
-	"aria-expanded",
-	"aria-disabled",
-	"aria-required",
-	"disabled"
-], le = [
-	"id",
-	"aria-expanded",
-	"aria-disabled",
-	"aria-required",
-	"disabled"
-], ue = {
-	key: 1,
-	class: "nb-select__inner-label"
-}, de = {
-	key: 0,
-	class: "nb-select__asterisk",
-	"aria-hidden": "true"
-}, fe = ["aria-multiselectable"], pe = [
-	"aria-selected",
-	"aria-disabled",
-	"onMouseenter",
-	"onClick"
-], me = {
-	key: 0,
-	class: "nb-select__option-check",
-	"aria-hidden": "true"
-}, he = {
-	key: 0,
-	viewBox: "0 0 10 8",
-	fill: "none",
-	width: "10",
-	height: "8"
-}, E = { class: "nb-select__option-label" }, D = {
-	key: 0,
-	class: "nb-select__empty"
-}, O = ["placeholder", "onKeydown"], k = /* @__PURE__ */ p({
-	__name: "Select",
-	props: {
-		modelValue: { default: null },
-		options: { default: () => [] },
-		multiple: {
-			type: Boolean,
-			default: !1
-		},
-		creatable: {
-			type: Boolean,
-			default: !1
-		},
-		createPlaceholder: { default: "" },
-		placeholder: { default: "Select…" },
-		name: { default: "" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		required: {
-			type: Boolean,
-			default: !1
-		},
-		id: { default: void 0 },
-		label: { default: "" },
-		error: { default: "" },
-		warning: { default: "" },
-		helper: { default: "" },
-		variant: { default: "default" },
-		size: { default: "md" }
-	},
-	emits: [
-		"update:modelValue",
-		"change",
-		"create"
-	],
-	setup(p, { expose: k, emit: A }) {
-		let j = p, M = A, N = _("");
-		function ge() {
-			let e = N.value.trim();
-			e && (M("create", e), N.value = "");
-		}
-		let P = _(!1), F = _(!1), I = _(-1), L = _(null), R = _(null), z = _(null);
-		i(z);
-		let B = _({
-			position: "fixed",
-			top: "0px",
-			left: "0px",
-			width: "0px",
-			zIndex: "9999"
-		}), _e = `nb-select-${re()}`, V = o(() => j.id ?? _e), H = o(() => j.modelValue == null ? [] : Array.isArray(j.modelValue) ? j.modelValue : [j.modelValue]), U = o(() => {
-			if (!(j.multiple || H.value.length !== 1)) return (j.options ?? []).find((e) => e.value === H.value[0])?.icon;
-		}), W = o(() => {
-			if (H.value.length === 0) return "";
-			let e = j.options ?? [];
-			return j.multiple ? H.value.length === 1 ? e.find((e) => e.value === H.value[0])?.label ?? String(H.value[0]) : H.value.length === 2 ? H.value.map((t) => e.find((e) => e.value === t)?.label ?? String(t)).join(", ") : `${H.value.length} selected` : e.find((e) => e.value === H.value[0])?.label ?? String(H.value[0]);
-		});
-		function G(e) {
-			return H.value.includes(e);
-		}
-		function K(e) {
-			if (e.disabled) return;
-			let t;
-			if (j.multiple) {
-				let n = [...H.value], r = n.indexOf(e.value);
-				r >= 0 ? n.splice(r, 1) : n.push(e.value), t = n;
-			} else t = e.value, Y();
-			M("update:modelValue", t), M("change", t);
-		}
-		function q() {
-			if (!R.value) return;
-			let e = R.value.getBoundingClientRect(), t = z.value?.offsetHeight ?? 0, n = window.innerHeight - e.bottom, r = e.top;
-			B.value = {
-				position: "fixed",
-				top: t > 0 && n < t && r > n ? `${e.top - t}px` : `${e.bottom}px`,
-				left: `${e.left}px`,
-				width: `${e.width}px`,
-				zIndex: "9999"
-			};
-		}
-		function J() {
-			if (j.disabled) return;
-			P.value = !0, q();
-			let e = j.options ?? [];
-			I.value = H.value.length > 0 ? Math.max(0, e.findIndex((e) => e.value === H.value[0])) : -1, m(() => {
-				q(), $();
-			});
-		}
-		function Y() {
-			P.value = !1, I.value = -1;
-		}
-		function X() {
-			P.value ? Y() : J();
-		}
-		function Z(e) {
-			let t = e.target, n = L.value?.contains(t) ?? !1, r = z.value?.contains(t) ?? !1;
-			!n && !r && Y();
-		}
-		function Q() {
-			P.value && q();
-		}
-		ae(P, (e) => {
-			e ? (document.addEventListener("mousedown", Z), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q)) : (document.removeEventListener("mousedown", Z), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q));
-		}), ne(() => {
-			document.removeEventListener("mousedown", Z), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
-		});
-		function ve(e) {
-			let t = j.options ?? [];
-			if (!P.value) {
-				(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), J());
-				return;
-			}
-			e.key === "Escape" ? (Y(), e.preventDefault()) : e.key === "Tab" ? Y() : e.key === "ArrowDown" ? (e.preventDefault(), I.value = Math.min(I.value + 1, t.length - 1), $()) : e.key === "ArrowUp" ? (e.preventDefault(), I.value = Math.max(I.value - 1, 0), $()) : (e.key === "Enter" || e.key === " ") && I.value >= 0 && (e.preventDefault(), K(t[I.value]));
-		}
-		function $() {
-			m(() => {
-				!z.value || I.value < 0 || z.value.querySelectorAll(".nb-select__option")[I.value]?.scrollIntoView({ block: "nearest" });
-			});
-		}
-		let ye = o(() => [
-			"nb-select",
-			`nb-select--${j.variant}`,
-			`nb-select--${j.size}`,
-			{
-				"nb-select--open": P.value,
-				"nb-select--focused": F.value && !P.value,
-				"nb-select--error": !!j.error,
-				"nb-select--warning": !j.error && !!j.warning,
-				"nb-select--multiple": j.multiple
-			}
-		]);
-		return k({
-			open: J,
-			close: Y
-		}), (i, o) => (g(), l(a, null, [u("div", {
-			ref_key: "rootRef",
-			ref: L,
-			class: h(ye.value),
-			onKeydown: ve
-		}, [p.variant === "default" ? (g(), l(a, { key: 0 }, [
-			i.$slots.label ? y(i.$slots, "label", { key: 0 }) : p.label ? (g(), s(t, {
-				key: 1,
-				for: V.value,
-				required: p.required,
-				disabled: p.disabled
-			}, {
-				default: S(() => [d(b(p.label), 1)]),
-				_: 1
-			}, 8, [
-				"for",
-				"required",
-				"disabled"
-			])) : c("", !0),
-			u("button", {
-				id: V.value,
-				ref_key: "triggerRef",
-				ref: R,
-				type: "button",
-				class: "nb-select__trigger",
-				role: "combobox",
-				"aria-expanded": P.value,
-				"aria-haspopup": "listbox",
-				"aria-disabled": p.disabled || void 0,
-				"aria-required": p.required || void 0,
-				disabled: p.disabled || void 0,
-				onClick: X,
-				onFocus: o[0] ||= (e) => F.value = !0,
-				onBlur: o[1] ||= (e) => F.value = !1
-			}, [
-				u("span", { class: h(["nb-select__value", {
-					"nb-select__value--placeholder": !W.value,
-					"nb-select__value--with-icon": !!U.value
-				}]) }, [U.value ? (g(), s(e, {
-					key: 0,
-					class: "nb-select__value-icon",
-					name: U.value,
-					size: 16
-				}, null, 8, ["name"])) : c("", !0), W.value ? y(i.$slots, "value", {
-					key: 1,
-					values: H.value
-				}, () => [d(b(W.value), 1)]) : (g(), l(a, { key: 2 }, [d(b(p.placeholder), 1)], 64))], 2),
-				p.error ? (g(), s(n, {
-					key: 0,
-					variant: "error",
-					"icon-only": !0,
-					class: "nb-select__status-icon"
-				}, {
-					default: S(() => [d(b(p.error), 1)]),
-					_: 1
-				})) : p.warning ? (g(), s(n, {
-					key: 1,
-					variant: "warning",
-					"icon-only": !0,
-					class: "nb-select__status-icon"
-				}, {
-					default: S(() => [d(b(p.warning), 1)]),
-					_: 1
-				})) : c("", !0),
-				f(r, {
-					align: "center",
-					justify: "center",
-					class: "nb-select__caret"
-				}, {
-					default: S(() => [f(e, {
-						name: P.value ? x(T) : x(w),
-						size: 16
-					}, null, 8, ["name"])]),
-					_: 1
-				})
-			], 40, ce),
-			p.error ? (g(), s(n, {
-				key: 2,
-				variant: "error",
-				class: "nb-select__message"
-			}, {
-				default: S(() => [d(b(p.error), 1)]),
-				_: 1
-			})) : p.warning ? (g(), s(n, {
-				key: 3,
-				variant: "warning",
-				class: "nb-select__message"
-			}, {
-				default: S(() => [d(b(p.warning), 1)]),
-				_: 1
-			})) : p.helper ? (g(), s(n, {
-				key: 4,
-				variant: "helper",
-				class: "nb-select__message"
-			}, {
-				default: S(() => [d(b(p.helper), 1)]),
-				_: 1
-			})) : c("", !0)
-		], 64)) : p.variant === "fluid" ? (g(), l(a, { key: 1 }, [u("button", {
-			id: V.value,
-			ref_key: "triggerRef",
-			ref: R,
-			type: "button",
-			class: "nb-select__trigger",
-			role: "combobox",
-			"aria-expanded": P.value,
-			"aria-haspopup": "listbox",
-			"aria-disabled": p.disabled || void 0,
-			"aria-required": p.required || void 0,
-			disabled: p.disabled || void 0,
-			onClick: X,
-			onFocus: o[2] ||= (e) => F.value = !0,
-			onBlur: o[3] ||= (e) => F.value = !1
-		}, [p.label || i.$slots.label ? (g(), s(r, {
-			key: 0,
-			dir: "row",
-			align: "center",
-			gap: "xs",
-			class: "nb-select__inner-header"
-		}, {
-			default: S(() => [i.$slots.label ? y(i.$slots, "label", { key: 0 }) : (g(), l("label", ue, [d(b(p.label) + " ", 1), p.required ? (g(), l("span", de, "*")) : c("", !0)])), p.helper && !p.error && !p.warning ? (g(), s(n, {
-				key: 2,
-				variant: "helper",
-				"icon-only": !0,
-				class: "nb-select__inner-message"
-			}, {
-				default: S(() => [d(b(p.helper), 1)]),
-				_: 1
-			})) : c("", !0)]),
-			_: 3
-		})) : c("", !0), f(r, {
-			dir: "row",
-			align: "end",
-			flex: "",
-			class: "nb-select__value-row"
-		}, {
-			default: S(() => [u("span", { class: h(["nb-select__value", {
-				"nb-select__value--placeholder": !W.value,
-				"nb-select__value--with-icon": !!U.value
-			}]) }, [U.value ? (g(), s(e, {
-				key: 0,
-				class: "nb-select__value-icon",
-				name: U.value,
-				size: 16
-			}, null, 8, ["name"])) : c("", !0), W.value ? y(i.$slots, "value", {
-				key: 1,
-				values: H.value
-			}, () => [d(b(W.value), 1)]) : (g(), l(a, { key: 2 }, [d(b(p.placeholder), 1)], 64))], 2), f(r, {
-				align: "center",
-				justify: "center",
-				class: "nb-select__caret"
-			}, {
-				default: S(() => [f(e, {
-					name: P.value ? x(T) : x(w),
-					size: 16
-				}, null, 8, ["name"])]),
-				_: 1
-			})]),
-			_: 3
-		})], 40, le), p.error ? (g(), s(n, {
-			key: 0,
-			variant: "error",
-			class: "nb-select__fluid-message"
-		}, {
-			default: S(() => [d(b(p.error), 1)]),
-			_: 1
-		})) : p.warning ? (g(), s(n, {
-			key: 1,
-			variant: "warning",
-			class: "nb-select__fluid-message"
-		}, {
-			default: S(() => [d(b(p.warning), 1)]),
-			_: 1
-		})) : c("", !0)], 64)) : c("", !0)], 34), (g(), s(ee, { to: "body" }, [P.value ? (g(), l("div", {
-			key: 0,
-			ref_key: "dropdownRef",
-			ref: z,
-			class: "nb-select__dropdown",
-			style: te(B.value),
-			role: "listbox",
-			"aria-multiselectable": p.multiple || void 0
-		}, [
-			(g(!0), l(a, null, v(p.options, (t, n) => (g(), l("div", {
-				key: t.value,
-				class: h(["nb-select__option", {
-					"nb-select__option--selected": G(t.value),
-					"nb-select__option--highlighted": I.value === n,
-					"nb-select__option--disabled": t.disabled
-				}]),
-				role: "option",
-				"aria-selected": G(t.value),
-				"aria-disabled": t.disabled || void 0,
-				onMouseenter: (e) => I.value = n,
-				onClick: (e) => K(t)
-			}, [
-				p.multiple ? (g(), l("span", me, [G(t.value) ? (g(), l("svg", he, [...o[7] ||= [u("path", {
-					d: "M1 4l3 3 5-6",
-					stroke: "currentColor",
-					"stroke-width": "1.5",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, null, -1)]])) : c("", !0)])) : c("", !0),
-				t.icon ? (g(), s(e, {
-					key: 1,
-					class: "nb-select__option-icon",
-					name: t.icon,
-					size: 16
-				}, null, 8, ["name"])) : c("", !0),
-				u("span", E, [y(i.$slots, "option", { option: t }, () => [d(b(t.label), 1)])])
-			], 42, pe))), 128)),
-			!p.options || p.options.length === 0 ? (g(), l("div", D, " No options ")) : c("", !0),
-			p.creatable ? (g(), l("div", {
-				key: 1,
-				class: "nb-select__create",
-				onMousedown: o[6] ||= C(() => {}, ["prevent"])
-			}, [oe(u("input", {
-				"onUpdate:modelValue": o[4] ||= (e) => N.value = e,
-				type: "text",
-				class: "nb-select__create-input",
-				placeholder: p.createPlaceholder || "Add new…",
-				onKeydown: [se(C(ge, ["prevent"]), ["enter"]), o[5] ||= C(() => {}, ["stop"])]
-			}, null, 40, O), [[ie, N.value]])], 32)) : c("", !0)
-		], 12, fe)) : c("", !0)]))], 64));
-	}
-});
-//#endregion
-export { k as t };