@nubisco/ui 5.19.0 → 5.20.0

package/dist/Select-D4Il1NaM.js

@@ -0,0 +1,489 @@
+import { t as e } from "./Icon-rREAqsu0.js";
+import { t } from "./Label-DGK5nxFy.js";
+import { t as n } from "./Message-CHkTWe0K.js";
+import { t as r } from "./Grid-iox-7xyH.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, h as te, nextTick as m, normalizeClass as h, normalizeStyle as ne, onBeforeUnmount as re, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useId as ie, vModelText as ae, watch as oe, withCtx as S, withDirectives as se, withKeys as C, withModifiers as w } from "vue";
+import { regular as T } from "@nubisco/ui/icons/caret-down";
+import { regular as E } from "@nubisco/ui/icons/x";
+import { regular as ce } from "@nubisco/ui/icons/caret-up";
+//#region src/components/Select.vue?vue&type=script&setup=true&lang.ts
+var le = [
+	"id",
+	"aria-expanded",
+	"aria-disabled",
+	"aria-required",
+	"disabled"
+], ue = {
+	key: 2,
+	class: "nb-select__clear-space",
+	"aria-hidden": "true"
+}, de = ["aria-label"], fe = [
+	"id",
+	"aria-expanded",
+	"aria-disabled",
+	"aria-required",
+	"disabled"
+], pe = {
+	key: 1,
+	class: "nb-select__inner-label"
+}, me = {
+	key: 0,
+	class: "nb-select__asterisk",
+	"aria-hidden": "true"
+}, he = {
+	key: 0,
+	class: "nb-select__clear-space",
+	"aria-hidden": "true"
+}, ge = ["aria-label"], _e = ["aria-multiselectable"], ve = ["aria-labelledby"], ye = ["id"], be = [
+	"aria-selected",
+	"aria-disabled",
+	"onMouseenter",
+	"onClick"
+], xe = {
+	key: 0,
+	class: "nb-select__option-check",
+	"aria-hidden": "true"
+}, Se = {
+	key: 0,
+	viewBox: "0 0 10 8",
+	fill: "none",
+	width: "10",
+	height: "8"
+}, Ce = { class: "nb-select__option-label" }, we = {
+	key: 0,
+	class: "nb-select__empty"
+}, Te = ["placeholder", "onKeydown"], D = /* @__PURE__ */ p({
+	__name: "Select",
+	props: {
+		modelValue: { default: null },
+		options: { default: () => [] },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		creatable: {
+			type: Boolean,
+			default: !1
+		},
+		createPlaceholder: { default: "" },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		clearLabel: { default: "Clear selection" },
+		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: D, emit: Ee }) {
+		let O = p, k = Ee, A = (e, { slots: t }) => e.wrap ? te("div", { class: "nb-select__control" }, t.default?.()) : t.default?.();
+		A.props = ["wrap"];
+		let j = _("");
+		function De() {
+			let e = j.value.trim();
+			e && (k("create", e), j.value = "");
+		}
+		let M = _(!1), N = _(!1), P = _(-1), F = _(null), I = _(null), L = _(null);
+		i(L);
+		let R = _({
+			position: "fixed",
+			top: "0px",
+			left: "0px",
+			width: "0px",
+			zIndex: "9999"
+		}), Oe = `nb-select-${ie()}`, z = o(() => O.id ?? Oe), B = o(() => O.modelValue == null ? [] : Array.isArray(O.modelValue) ? O.modelValue : [O.modelValue]), V = o(() => {
+			if (!(O.multiple || B.value.length !== 1)) return (O.options ?? []).find((e) => e.value === B.value[0])?.icon;
+		}), H = o(() => {
+			if (B.value.length === 0) return "";
+			let e = O.options ?? [];
+			return O.multiple ? B.value.length === 1 ? e.find((e) => e.value === B.value[0])?.label ?? String(B.value[0]) : B.value.length === 2 ? B.value.map((t) => e.find((e) => e.value === t)?.label ?? String(t)).join(", ") : `${B.value.length} selected` : e.find((e) => e.value === B.value[0])?.label ?? String(B.value[0]);
+		});
+		function U(e) {
+			return B.value.includes(e);
+		}
+		let ke = o(() => {
+			let e = [];
+			return (O.options ?? []).forEach((t, n) => {
+				let r = e[e.length - 1];
+				(!r || r.name !== t.group) && e.push({
+					key: `${e.length}:${t.group ?? ""}`,
+					name: t.group,
+					labelId: `${z.value}-group-${e.length}`,
+					entries: []
+				}), e[e.length - 1].entries.push({
+					option: t,
+					index: n
+				});
+			}), e;
+		});
+		function W(e, t) {
+			let n = O.options ?? [];
+			for (let r = e + t; r >= 0 && r < n.length; r += t) if (!n[r].disabled) return r;
+			return e;
+		}
+		function G(e) {
+			if (e.disabled) return;
+			let t;
+			if (O.multiple) {
+				let n = [...B.value], r = n.indexOf(e.value);
+				r >= 0 ? n.splice(r, 1) : n.push(e.value), t = n;
+			} else t = e.value, J();
+			k("update:modelValue", t), k("change", t);
+		}
+		function K() {
+			if (!I.value) return;
+			let e = I.value.getBoundingClientRect(), t = L.value?.offsetHeight ?? 0, n = window.innerHeight - e.bottom, r = e.top;
+			R.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 q() {
+			if (O.disabled) return;
+			M.value = !0, K();
+			let e = O.options ?? [];
+			P.value = B.value.length > 0 ? Math.max(0, e.findIndex((e) => e.value === B.value[0])) : -1, m(() => {
+				K(), Z();
+			});
+		}
+		function J() {
+			M.value = !1, P.value = -1;
+		}
+		function Ae() {
+			M.value ? J() : q();
+		}
+		function Y(e) {
+			let t = e.target, n = F.value?.contains(t) ?? !1, r = L.value?.contains(t) ?? !1;
+			!n && !r && J();
+		}
+		function X() {
+			M.value && K();
+		}
+		oe(M, (e) => {
+			e ? (document.addEventListener("mousedown", Y), window.addEventListener("scroll", X, !0), window.addEventListener("resize", X)) : (document.removeEventListener("mousedown", Y), window.removeEventListener("scroll", X, !0), window.removeEventListener("resize", X));
+		}), re(() => {
+			document.removeEventListener("mousedown", Y), window.removeEventListener("scroll", X, !0), window.removeEventListener("resize", X);
+		});
+		function je(e) {
+			let t = O.options ?? [];
+			if (!M.value) {
+				(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), q());
+				return;
+			}
+			e.key === "Escape" ? (J(), e.preventDefault()) : e.key === "Tab" ? J() : e.key === "ArrowDown" ? (e.preventDefault(), P.value = W(P.value, 1), Z()) : e.key === "ArrowUp" ? (e.preventDefault(), P.value > 0 && (P.value = W(P.value, -1)), Z()) : (e.key === "Enter" || e.key === " ") && P.value >= 0 && (e.preventDefault(), G(t[P.value]));
+		}
+		function Z() {
+			m(() => {
+				!L.value || P.value < 0 || L.value.querySelectorAll(".nb-select__option")[P.value]?.scrollIntoView({ block: "nearest" });
+			});
+		}
+		let Q = o(() => O.clearable && !O.disabled && B.value.length > 0);
+		function $() {
+			let e = O.multiple ? [] : null;
+			J(), k("update:modelValue", e), k("change", e), I.value?.focus();
+		}
+		let Me = o(() => [
+			"nb-select",
+			`nb-select--${O.variant}`,
+			`nb-select--${O.size}`,
+			{
+				"nb-select--open": M.value,
+				"nb-select--focused": N.value && !M.value,
+				"nb-select--error": !!O.error,
+				"nb-select--warning": !O.error && !!O.warning,
+				"nb-select--multiple": O.multiple
+			}
+		]);
+		return D({
+			open: q,
+			close: J
+		}), (i, o) => (g(), l(a, null, [u("div", {
+			ref_key: "rootRef",
+			ref: F,
+			class: h(Me.value),
+			onKeydown: je
+		}, [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: z.value,
+				required: p.required,
+				disabled: p.disabled
+			}, {
+				default: S(() => [d(b(p.label), 1)]),
+				_: 1
+			}, 8, [
+				"for",
+				"required",
+				"disabled"
+			])) : c("", !0),
+			f(A, { wrap: p.clearable }, {
+				default: S(() => [u("button", {
+					id: z.value,
+					ref_key: "triggerRef",
+					ref: I,
+					type: "button",
+					class: "nb-select__trigger",
+					role: "combobox",
+					"aria-expanded": M.value,
+					"aria-haspopup": "listbox",
+					"aria-disabled": p.disabled || void 0,
+					"aria-required": p.required || void 0,
+					disabled: p.disabled || void 0,
+					onClick: Ae,
+					onFocus: o[0] ||= (e) => N.value = !0,
+					onBlur: o[1] ||= (e) => N.value = !1
+				}, [
+					u("span", { class: h(["nb-select__value", {
+						"nb-select__value--placeholder": !H.value,
+						"nb-select__value--with-icon": !!V.value
+					}]) }, [V.value ? (g(), s(e, {
+						key: 0,
+						class: "nb-select__value-icon",
+						name: V.value,
+						size: 16
+					}, null, 8, ["name"])) : c("", !0), H.value ? y(i.$slots, "value", {
+						key: 1,
+						values: B.value
+					}, () => [d(b(H.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),
+					Q.value ? (g(), l("span", ue)) : c("", !0),
+					f(r, {
+						align: "center",
+						justify: "center",
+						class: "nb-select__caret"
+					}, {
+						default: S(() => [f(e, {
+							name: M.value ? x(ce) : x(T),
+							size: 16
+						}, null, 8, ["name"])]),
+						_: 1
+					})
+				], 40, le), Q.value ? (g(), l("button", {
+					key: 0,
+					type: "button",
+					class: "nb-select__clear",
+					"aria-label": p.clearLabel,
+					onClick: $,
+					onKeydown: [o[2] ||= C(w(() => {}, ["stop"]), ["enter"]), o[3] ||= C(w(() => {}, ["stop"]), ["space"])]
+				}, [f(e, {
+					name: x(E),
+					size: 16
+				}, null, 8, ["name"])], 40, de)) : c("", !0)]),
+				_: 3
+			}, 8, ["wrap"]),
+			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 }, [f(A, { wrap: p.clearable }, {
+			default: S(() => [u("button", {
+				id: z.value,
+				ref_key: "triggerRef",
+				ref: I,
+				type: "button",
+				class: "nb-select__trigger",
+				role: "combobox",
+				"aria-expanded": M.value,
+				"aria-haspopup": "listbox",
+				"aria-disabled": p.disabled || void 0,
+				"aria-required": p.required || void 0,
+				disabled: p.disabled || void 0,
+				onClick: Ae,
+				onFocus: o[4] ||= (e) => N.value = !0,
+				onBlur: o[5] ||= (e) => N.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", pe, [d(b(p.label) + " ", 1), p.required ? (g(), l("span", me, "*")) : 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": !H.value,
+						"nb-select__value--with-icon": !!V.value
+					}]) }, [V.value ? (g(), s(e, {
+						key: 0,
+						class: "nb-select__value-icon",
+						name: V.value,
+						size: 16
+					}, null, 8, ["name"])) : c("", !0), H.value ? y(i.$slots, "value", {
+						key: 1,
+						values: B.value
+					}, () => [d(b(H.value), 1)]) : (g(), l(a, { key: 2 }, [d(b(p.placeholder), 1)], 64))], 2),
+					Q.value ? (g(), l("span", he)) : c("", !0),
+					f(r, {
+						align: "center",
+						justify: "center",
+						class: "nb-select__caret"
+					}, {
+						default: S(() => [f(e, {
+							name: M.value ? x(ce) : x(T),
+							size: 16
+						}, null, 8, ["name"])]),
+						_: 1
+					})
+				]),
+				_: 3
+			})], 40, fe), Q.value ? (g(), l("button", {
+				key: 0,
+				type: "button",
+				class: "nb-select__clear",
+				"aria-label": p.clearLabel,
+				onClick: $,
+				onKeydown: [o[6] ||= C(w(() => {}, ["stop"]), ["enter"]), o[7] ||= C(w(() => {}, ["stop"]), ["space"])]
+			}, [f(e, {
+				name: x(E),
+				size: 16
+			}, null, 8, ["name"])], 40, ge)) : c("", !0)]),
+			_: 3
+		}, 8, ["wrap"]), 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" }, [M.value ? (g(), l("div", {
+			key: 0,
+			ref_key: "dropdownRef",
+			ref: L,
+			class: "nb-select__dropdown",
+			style: ne(R.value),
+			role: "listbox",
+			"aria-multiselectable": p.multiple || void 0
+		}, [
+			(g(!0), l(a, null, v(ke.value, (t) => (g(), l("div", {
+				key: t.key,
+				class: "nb-select__group",
+				role: "group",
+				"aria-labelledby": t.name ? t.labelId : void 0
+			}, [t.name ? (g(), l("div", {
+				key: 0,
+				id: t.labelId,
+				class: "nb-select__group-label"
+			}, b(t.name), 9, ye)) : c("", !0), (g(!0), l(a, null, v(t.entries, (t) => (g(), l("div", {
+				key: t.option.value,
+				class: h(["nb-select__option", {
+					"nb-select__option--selected": U(t.option.value),
+					"nb-select__option--highlighted": P.value === t.index,
+					"nb-select__option--disabled": t.option.disabled
+				}]),
+				role: "option",
+				"aria-selected": U(t.option.value),
+				"aria-disabled": t.option.disabled || void 0,
+				onMouseenter: (e) => P.value = t.index,
+				onClick: (e) => G(t.option)
+			}, [
+				p.multiple ? (g(), l("span", xe, [U(t.option.value) ? (g(), l("svg", Se, [...o[11] ||= [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.option.icon ? (g(), s(e, {
+					key: 1,
+					class: "nb-select__option-icon",
+					name: t.option.icon,
+					size: 16
+				}, null, 8, ["name"])) : c("", !0),
+				u("span", Ce, [y(i.$slots, "option", { option: t.option }, () => [d(b(t.option.label), 1)])])
+			], 42, be))), 128))], 8, ve))), 128)),
+			!p.options || p.options.length === 0 ? (g(), l("div", we, " No options ")) : c("", !0),
+			p.creatable ? (g(), l("div", {
+				key: 1,
+				class: "nb-select__create",
+				onMousedown: o[10] ||= w(() => {}, ["prevent"])
+			}, [se(u("input", {
+				"onUpdate:modelValue": o[8] ||= (e) => j.value = e,
+				type: "text",
+				class: "nb-select__create-input",
+				placeholder: p.createPlaceholder || "Add new…",
+				onKeydown: [C(w(De, ["prevent"]), ["enter"]), o[9] ||= w(() => {}, ["stop"])]
+			}, null, 40, Te), [[ae, j.value]])], 32)) : c("", !0)
+		], 12, _e)) : c("", !0)]))], 64));
+	}
+});
+//#endregion
+export { D as t };

package/dist/Select-MwbDOqbP.cjs

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

package/dist/Tabs-Bmw1hFrN.cjs

@@ -0,0 +1 @@
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),t=require(`./Icon-C8R_r_In.cjs`),n=require(`./composables/useStableId.composable.cjs`),r=require(`./composables/usePhoneLayout.composable.cjs`),i=require(`./utils/slotContent.helper.cjs`),a=require(`./Badge-Dkm7PBJ8.cjs`);let o=require(`vue`);var s=function(e){return e.Line=`line`,e.Contained=`contained`,e}(s||{}),c=function(e){return e.Small=`sm`,e.Medium=`md`,e.Large=`lg`,e}(c||{}),l=[`aria-label`],u=[`id`,`data-tab-id`,`aria-selected`,`aria-controls`,`tabindex`,`disabled`,`onClick`],d={class:`nb-tabs__label`},f=[`id`,`aria-labelledby`],p=24,m=(0,o.defineComponent)({__name:`Tabs`,props:{items:{},ariaLabel:{default:void 0},modelValue:{default:void 0},variant:{default:s.Line},size:{default:c.Medium},disabled:{type:Boolean,default:!1},fullWidth:{type:Boolean,default:!1},id:{default:void 0}},emits:[`update:modelValue`,`change`],setup(e,{emit:s}){let m=e,h=s,g=(0,o.useSlots)(),_=n.useStableId(m),v=(0,o.ref)(null),y=(0,o.computed)(()=>m.items.filter(e=>!w(e))),b=(0,o.ref)(m.modelValue??y.value[0]?.id);(0,o.watch)(()=>m.modelValue,e=>{e!=null&&(b.value=e)});let x=(0,o.computed)(()=>{let e=m.modelValue??b.value,t=m.items.find(t=>t.id===e);return t&&!w(t)?t.id:y.value[0]?.id}),S=(0,o.computed)(()=>m.size===c.Large?18:16),C=(0,o.computed)(()=>[`nb-tabs`,`nb-tabs--${m.variant}`,`nb-tabs--${m.size}`,{"nb-tabs--full-width":m.fullWidth,"nb-tabs--disabled":m.disabled,"nb-tabs--overflow":P.value}]);function w(e){return m.disabled||!!e.disabled}function T(e){return`${_}-tab-${e}`}function E(e){return`${_}-panel-${e}`}function D(e){return i.hasSlotContent(g,e)}function O(e){w(e)||e.id===x.value||(b.value=e.id,h(`update:modelValue`,e.id),h(`change`,e.id,e))}function k(e){(v.value?.querySelectorAll(`[data-tab-id]`))?.forEach(t=>{t.dataset.tabId===e&&t.focus()})}function A(e){let t=y.value;if(!t.length)return;let n=t[(t.findIndex(e=>e.id===x.value)+e+t.length)%t.length];O(n),k(n.id)}function j(e){e&&(O(e),k(e.id))}let{phone:M}=r.usePhoneLayout(),N=(0,o.ref)(null),P=(0,o.ref)(!1),F=(0,o.computed)(()=>M.value||P.value);function I(){let e=N.value,t=v.value;!e||!t||(P.value=t.scrollWidth>e.clientWidth+1)}let L=(0,o.ref)(!1),R=(0,o.ref)(!1);function z(){let e=v.value;if(!F.value||!e)return;let t=e.scrollWidth-e.clientWidth;L.value=e.scrollLeft>1,R.value=e.scrollLeft<t-1}function B(){let e=v.value;if(!F.value||!e)return;let t=[...e.querySelectorAll(`[data-tab-id]`)].find(e=>e.dataset.tabId===x.value);if(t){let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=r.left-n.left+e.scrollLeft,a=i+r.width,o=t===e.firstElementChild,s=t===e.lastElementChild;i<e.scrollLeft+(o?0:p)?e.scrollLeft=Math.max(0,o?0:i-p):a>e.scrollLeft+e.clientWidth-(s?0:p)&&(e.scrollLeft=a-e.clientWidth+(s?0:p))}z()}(0,o.watch)([x,F],()=>(0,o.nextTick)(B));function V(){I(),B()}let H=null;function U(){!H||!N.value||!v.value||(H.disconnect(),H.observe(N.value),v.value.querySelectorAll(`[data-tab-id]`).forEach(e=>H?.observe(e)))}(0,o.watch)(()=>m.items,()=>(0,o.nextTick)(()=>{U(),V()}),{deep:!0}),(0,o.onMounted)(()=>{I(),B(),window.addEventListener(`resize`,V,{passive:!0}),typeof ResizeObserver<`u`&&(H=new ResizeObserver(V),U())}),(0,o.onBeforeUnmount)(()=>{window.removeEventListener(`resize`,V),H?.disconnect(),H=null});function W(e){switch(e.key){case`ArrowRight`:A(1);break;case`ArrowLeft`:A(-1);break;case`Home`:j(y.value[0]);break;case`End`:j(y.value[y.value.length-1]);break;default:return}e.preventDefault()}return(n,r)=>((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{ref_key:`rootRef`,ref:N,class:(0,o.normalizeClass)(C.value)},[(0,o.createElementVNode)(`div`,{ref_key:`listRef`,ref:v,class:(0,o.normalizeClass)([`nb-tabs__list`,{"nb-tabs__list--fade-start":F.value&&L.value,"nb-tabs__list--fade-end":F.value&&R.value}]),role:`tablist`,"aria-label":e.ariaLabel||void 0,onKeydown:W,onScrollPassive:z},[((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(e.items,e=>((0,o.openBlock)(),(0,o.createElementBlock)(`button`,{id:T(e.id),key:e.id,"data-tab-id":e.id,type:`button`,role:`tab`,class:(0,o.normalizeClass)([`nb-tabs__tab`,{"nb-tabs__tab--active":e.id===x.value}]),"aria-selected":e.id===x.value,"aria-controls":D(e.id)?E(e.id):void 0,tabindex:e.id===x.value?0:-1,disabled:w(e),onClick:t=>O(e)},[e.icon?((0,o.openBlock)(),(0,o.createBlock)(t.t,{key:0,name:e.icon,size:S.value,class:`nb-tabs__icon`},null,8,[`name`,`size`])):(0,o.createCommentVNode)(``,!0),(0,o.createElementVNode)(`span`,d,(0,o.toDisplayString)(e.label),1),e.badge==null?(0,o.createCommentVNode)(``,!0):((0,o.openBlock)(),(0,o.createBlock)(a.t,{key:1,size:`sm`,class:`nb-tabs__badge`},{default:(0,o.withCtx)(()=>[(0,o.createTextVNode)((0,o.toDisplayString)(e.badge),1)]),_:2},1024))],10,u))),128))],42,l),((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(e.items,e=>((0,o.openBlock)(),(0,o.createElementBlock)(o.Fragment,{key:`panel-${e.id}`},[e.id===x.value&&D(e.id)?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,id:E(e.id),class:`nb-tabs__panel`,role:`tabpanel`,"aria-labelledby":T(e.id),tabindex:`0`},[(0,o.renderSlot)(n.$slots,e.id,{item:e},void 0,!0)],8,f)):(0,o.createCommentVNode)(``,!0)],64))),128))],2))}}),h=e.t(m,[[`__scopeId`,`data-v-4367403c`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});