@nubisco/ui 5.17.0 → 5.18.1

package/dist/Board-nLi96Obf.js

@@ -1,420 +0,0 @@
-import { useStableId as e } from "./composables/useStableId.composable.mjs";
-import { useSurfaceLayer as t } from "./composables/useSurfaceLayer.composable.mjs";
-import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeProps as l, nextTick as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, withModifiers as y } from "vue";
-//#region src/components/Board.vue?vue&type=script&setup=true&lang.ts
-var b = [
-	"draggable",
-	"onDragstart",
-	"onDragover"
-], ee = { class: "nb-board__col-title" }, te = { class: "nb-board__col-count" }, ne = ["onClick"], re = ["aria-label"], ie = { class: "nb-board__lane-label" }, ae = { class: "nb-board__lane-count" }, oe = ["onDragover", "onDrop"], se = ["aria-label"], ce = [
-	"data-item-id",
-	"aria-label",
-	"aria-describedby",
-	"onDragstart",
-	"onDragover",
-	"onKeydown",
-	"onBlur"
-], le = {
-	key: 0,
-	class: "nb-board__empty-cell",
-	"aria-hidden": "true"
-}, ue = {
-	key: 0,
-	class: "nb-board__cell-footer"
-}, de = ["id"], fe = {
-	class: "nb-board__sr",
-	"aria-live": "assertive"
-}, x = .5, S = 44, C = /* @__PURE__ */ c({
-	__name: "Board",
-	props: {
-		columns: {},
-		items: {},
-		lanes: { default: void 0 },
-		reorderableColumns: {
-			type: Boolean,
-			default: !1
-		},
-		nestable: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: [
-		"move",
-		"nest",
-		"column-move"
-	],
-	setup(c, { emit: C }) {
-		let w = c, { layerProps: pe } = t(), T = C, E = e({}), D = m(null), O = r(() => ({ gridTemplateColumns: `repeat(${w.columns.length}, var(--nb-board-column-track, minmax(200px, 1fr)))` })), me = r(() => w.lanes && w.lanes.length > 0 ? w.lanes : [null]);
-		function k(e) {
-			return e ? e.id ?? null : null;
-		}
-		function A(e) {
-			return e ? M(e.id) : "__flat__";
-		}
-		function j(e) {
-			return w.items.filter((t) => t.columnId === e).length;
-		}
-		function M(e) {
-			return e ?? "__none__";
-		}
-		function he(e) {
-			return w.lanes ? w.items.filter((t) => (t.laneId ?? null) === e).length : 0;
-		}
-		function N(e, t) {
-			return !w.lanes || w.lanes.length === 0 ? w.items.filter((e) => e.columnId === t) : w.items.filter((n) => n.columnId === t && (n.laneId ?? null) === e);
-		}
-		function P(e) {
-			return w.columns.find((t) => t.id === e);
-		}
-		let F = m(/* @__PURE__ */ new Set());
-		function I(e) {
-			let t = M(e), n = new Set(F.value);
-			n.has(t) ? n.delete(t) : n.add(t), F.value = n;
-		}
-		function L(e) {
-			return F.value.has(M(e));
-		}
-		function R(e) {
-			let t = e.label ?? e.name ?? e.title;
-			return typeof t == "string" ? t : `Item ${e.id}`;
-		}
-		function z(e, t) {
-			return e ? `${t.label}, ${e.label}` : t.label;
-		}
-		function ge(e, t) {
-			return z(e, t);
-		}
-		function B(e, t, n) {
-			let r = N(k(t), n.id), i = r.findIndex((t) => t.id === e.id), a = `${R(e)}, ${i + 1} of ${r.length} in ${z(t, n)}`;
-			return q.value?.item.id === e.id ? `${a}, picked up` : a;
-		}
-		let V = m("");
-		function H(e, t, n, r) {
-			let i = N(t, n).filter((t) => t.id !== e.item.id), a = Math.max(0, Math.min(r, i.length));
-			return e.fromColumnId === n && e.fromLaneId === t && a === N(t, n).findIndex((t) => t.id === e.item.id) ? !1 : (T("move", {
-				itemId: e.item.id,
-				fromColumnId: e.fromColumnId,
-				toColumnId: n,
-				fromLaneId: e.fromLaneId,
-				toLaneId: t,
-				toIndex: a,
-				beforeItemId: i[a - 1]?.id ?? null,
-				afterItemId: i[a]?.id ?? null
-			}), !0);
-		}
-		let U = m(null), W = m(null), G = m(null);
-		function _e(e, t, n) {
-			q.value = null, U.value = {
-				item: e,
-				fromLaneId: k(t),
-				fromColumnId: n
-			};
-		}
-		function ve(e, t, n, r, i) {
-			if (!U.value) return;
-			let a = e.currentTarget.getBoundingClientRect();
-			if (w.nestable && a.height >= S) {
-				let r = (e.clientY - a.top) / a.height, o = (1 - x) / 2;
-				if (r > o && r < 1 - o && i.id !== U.value.item.id) {
-					G.value = {
-						laneId: k(t),
-						colId: n,
-						itemId: i.id
-					}, W.value = null;
-					return;
-				}
-			}
-			G.value = null;
-			let o = e.clientY >= a.top + a.height / 2;
-			W.value = {
-				laneId: k(t),
-				colId: n,
-				index: r + (o ? 1 : 0)
-			};
-		}
-		function ye(e, t) {
-			if (!U.value) return;
-			let n = k(e);
-			W.value = {
-				laneId: n,
-				colId: t,
-				index: N(n, t).length
-			};
-		}
-		function be() {
-			W.value = null, G.value = null;
-		}
-		function xe() {
-			U.value = null, W.value = null, G.value = null;
-		}
-		function Se(e, t) {
-			return K(e, t) !== null;
-		}
-		function K(e, t) {
-			let n = k(e), r = W.value;
-			if (U.value && r && r.laneId === n && r.colId === t) return r.index;
-			let i = q.value;
-			if (i && i.laneId === n && i.colId === t) {
-				let e = N(n, t).findIndex((e) => e.id === i.item.id);
-				return e !== -1 && e <= i.index ? i.index + 1 : i.index;
-			}
-			return null;
-		}
-		function Ce(e, t, n) {
-			let r = G.value;
-			return r !== null && r.laneId === k(e) && r.colId === t && r.itemId === n.id;
-		}
-		function we(e, t, n) {
-			return n === N(k(e), t).length - 1 && K(e, t) === n + 1;
-		}
-		function Te(e, t) {
-			if (Z.value !== null) return;
-			let n = W.value, r = G.value;
-			W.value = null, G.value = null;
-			let i = U.value;
-			if (U.value = null, !i) return;
-			if (r) {
-				T("nest", {
-					itemId: i.item.id,
-					ontoItemId: r.itemId,
-					fromColumnId: i.fromColumnId,
-					...w.lanes ? { fromLaneId: i.fromLaneId } : {}
-				}), V.value = `${R(i.item)} dropped onto ${R(w.items.find((e) => e.id === r.itemId) ?? i.item)}`;
-				return;
-			}
-			let a = k(e), o = N(a, t), s = n && n.laneId === a && n.colId === t ? n.index : o.length, c = o.findIndex((e) => e.id === i.item.id);
-			H(i, a, t, c !== -1 && c < s ? s - 1 : s);
-		}
-		let q = m(null);
-		function Ee(e, t, n, r) {
-			let i = k(n);
-			if (e.key === "Escape") {
-				if (!q.value) return;
-				e.preventDefault(), q.value = null, V.value = "Move cancelled";
-				return;
-			}
-			if (e.key === " " || e.key === "Enter") {
-				if (e.preventDefault(), q.value?.item.id !== t.id) {
-					De(t, i, r);
-					return;
-				}
-				if (w.nestable && e.shiftKey && Y()) {
-					Ae();
-					return;
-				}
-				je();
-				return;
-			}
-			[
-				"ArrowUp",
-				"ArrowDown",
-				"ArrowLeft",
-				"ArrowRight"
-			].includes(e.key) && (e.preventDefault(), q.value?.item.id === t.id ? ke(e.key) : Me(e.key, t, i, r));
-		}
-		function De(e, t, n) {
-			q.value = {
-				item: e,
-				fromLaneId: t,
-				fromColumnId: n,
-				laneId: t,
-				colId: n,
-				index: N(t, n).findIndex((t) => t.id === e.id)
-			}, V.value = `${R(e)} picked up, ${J()}`;
-		}
-		function J() {
-			let e = q.value;
-			if (!e) return "";
-			let t = N(e.laneId, e.colId).filter((t) => t.id !== e.item.id), n = P(e.colId), r = w.lanes?.find((t) => (t.id ?? null) === e.laneId) ?? null, i = n ? z(r, n) : e.colId;
-			return `position ${e.index + 1} of ${t.length + 1} in ${i}`;
-		}
-		function Oe() {
-			return !w.lanes || w.lanes.length === 0 ? [null] : w.lanes.filter((e) => !L(e.id)).map((e) => e.id ?? null);
-		}
-		function ke(e) {
-			let t = q.value;
-			if (!t) return;
-			let n = N(t.laneId, t.colId).filter((e) => e.id !== t.item.id);
-			if (e === "ArrowUp" || e === "ArrowDown") {
-				let r = e === "ArrowUp" ? -1 : 1, i = t.index + r;
-				if (i >= 0 && i <= n.length) t.index = i;
-				else {
-					let e = Oe(), n = e.indexOf(t.laneId), i = n + r;
-					if (n === -1 || i < 0 || i >= e.length) return;
-					let a = e[i];
-					t.laneId = a, t.index = r === 1 ? 0 : N(a, t.colId).filter((e) => e.id !== t.item.id).length;
-				}
-			} else {
-				let n = e === "ArrowLeft" ? -1 : 1, r = w.columns.findIndex((e) => e.id === t.colId), i = w.columns[r + n];
-				if (r === -1 || !i) return;
-				t.colId = i.id;
-				let a = N(t.laneId, t.colId).filter((e) => e.id !== t.item.id);
-				t.index = Math.min(t.index, a.length);
-			}
-			V.value = `${R(t.item)}, ${J()}`;
-		}
-		function Y() {
-			let e = q.value;
-			if (!e) return null;
-			let t = N(e.laneId, e.colId).filter((t) => t.id !== e.item.id);
-			return t.length === 0 ? null : t[Math.min(e.index, t.length - 1)] ?? null;
-		}
-		function Ae() {
-			let e = q.value, t = Y();
-			!e || !t || (q.value = null, T("nest", {
-				itemId: e.item.id,
-				ontoItemId: t.id,
-				fromColumnId: e.fromColumnId,
-				...w.lanes ? { fromLaneId: e.fromLaneId } : {}
-			}), V.value = `${R(e.item)} dropped onto ${R(t)}`);
-		}
-		function je() {
-			let e = q.value;
-			if (!e) return;
-			q.value = null;
-			let t = H({
-				item: e.item,
-				fromLaneId: e.fromLaneId,
-				fromColumnId: e.fromColumnId
-			}, e.laneId, e.colId, e.index), n = P(e.colId), r = w.lanes?.find((t) => (t.id ?? null) === e.laneId) ?? null, i = n ? z(r, n) : e.colId;
-			V.value = t ? `${R(e.item)} dropped, position ${e.index + 1} in ${i}` : `${R(e.item)} dropped`, Ne(e.item.id);
-		}
-		function Me(e, t, n, r) {
-			let i = N(n, r), a = i.findIndex((e) => e.id === t.id);
-			if (e === "ArrowUp" || e === "ArrowDown") {
-				let t = a + (e === "ArrowDown" ? 1 : -1);
-				t >= 0 && t < i.length && X(i[t].id);
-			} else {
-				let t = w.columns.findIndex((e) => e.id === r), i = w.columns[t + (e === "ArrowRight" ? 1 : -1)];
-				if (t === -1 || !i) return;
-				let o = N(n, i.id);
-				if (o.length === 0) return;
-				X(o[Math.min(a, o.length - 1)].id);
-			}
-		}
-		function X(e) {
-			let t = D.value?.querySelectorAll("[data-item-id]");
-			if (t) {
-				for (let n of t) if (n.dataset.itemId === e) {
-					n.focus();
-					return;
-				}
-			}
-		}
-		async function Ne(e) {
-			await u(), await u(), X(e);
-		}
-		function Pe(e) {
-			q.value?.item.id === e.id && (q.value = null);
-		}
-		let Z = m(null), Q = m(null);
-		function Fe(e, t) {
-			if (!w.reorderableColumns) {
-				t.preventDefault();
-				return;
-			}
-			Z.value = e, Q.value = e;
-		}
-		function Ie(e, t) {
-			if (Z.value === null) return;
-			t.preventDefault();
-			let n = t.currentTarget.getBoundingClientRect();
-			Q.value = t.clientX < n.left + n.width / 2 ? e : e + 1;
-		}
-		function Le(e) {
-			let t = Z.value, n = Q.value;
-			if ($(), t === null || n === null) return;
-			e.preventDefault();
-			let r = n > t ? n - 1 : n;
-			r !== t && T("column-move", {
-				columnId: w.columns[t].id,
-				toIndex: r
-			});
-		}
-		function $() {
-			Z.value = null, Q.value = null;
-		}
-		return (e, t) => (p(), a("div", l({
-			ref_key: "boardRef",
-			ref: D,
-			class: "nb-board"
-		}, v(pe)), [
-			o("div", {
-				class: "nb-board__grid",
-				style: f(O.value)
-			}, [(p(!0), a(n, null, h(c.columns, (t, n) => (p(), a("div", {
-				key: t.id,
-				class: d(["nb-board__col-header", {
-					"nb-board__col-header--reorderable": c.reorderableColumns,
-					"nb-board__col-header--dragging": Z.value === n,
-					"nb-board__col-header--drop-before": Q.value === n,
-					"nb-board__col-header--drop-after": Q.value === n + 1 && n === c.columns.length - 1
-				}]),
-				style: f(t.color ? { borderTopColor: t.color } : void 0),
-				draggable: c.reorderableColumns || void 0,
-				onDragstart: (e) => Fe(n, e),
-				onDragover: (e) => Ie(n, e),
-				onDrop: Le,
-				onDragend: $
-			}, [g(e.$slots, "column-header", {
-				column: t,
-				count: j(t.id)
-			}, () => [o("span", ee, _(t.label), 1), o("span", te, _(j(t.id)), 1)])], 46, b))), 128)), (p(!0), a(n, null, h(me.value, (t) => (p(), a(n, { key: A(t) }, [t ? (p(), a("div", {
-				key: 0,
-				class: "nb-board__lane-header",
-				onClick: (e) => I(t.id)
-			}, [
-				o("button", {
-					class: "nb-board__collapse-btn",
-					"aria-label": L(t.id) ? "Expand" : "Collapse"
-				}, _(L(t.id) ? "▶" : "▼"), 9, re),
-				g(e.$slots, "lane-header", { lane: t }, () => [o("span", ie, _(t.label), 1)]),
-				o("span", ae, _(he(t.id)), 1)
-			], 8, ne)) : i("", !0), !t || !L(t.id) ? (p(!0), a(n, { key: 1 }, h(c.columns, (r) => (p(), a("div", {
-				key: A(t) + "-" + r.id,
-				class: d(["nb-board__cell", { "nb-board__cell--drag-over": Se(t, r.id) }]),
-				onDragover: y((e) => ye(t, r.id), ["prevent"]),
-				onDragleave: be,
-				onDrop: y((e) => Te(t, r.id), ["prevent"])
-			}, [o("div", {
-				class: "nb-board__cell-items",
-				role: "list",
-				"aria-label": ge(t, r)
-			}, [(p(!0), a(n, null, h(N(k(t), r.id), (n, i) => (p(), a("div", {
-				key: n.id,
-				class: d(["nb-board__card", {
-					"nb-board__card--lifted": q.value?.item.id === n.id,
-					"nb-board__card--drop-before": K(t, r.id) === i,
-					"nb-board__card--drop-after": we(t, r.id, i),
-					"nb-board__card--drop-into": Ce(t, r.id, n)
-				}]),
-				role: "listitem",
-				tabindex: "0",
-				"data-item-id": n.id,
-				"aria-label": B(n, t, r),
-				"aria-describedby": `${v(E)}-hint`,
-				draggable: "true",
-				onDragstart: (e) => _e(n, t, r.id),
-				onDragover: y((e) => ve(e, t, r.id, i, n), ["prevent", "stop"]),
-				onDragend: xe,
-				onKeydown: (e) => Ee(e, n, t, r.id),
-				onBlur: (e) => Pe(n)
-			}, [g(e.$slots, "card", {
-				item: n,
-				column: r,
-				lane: t ?? void 0
-			})], 42, ce))), 128)), N(k(t), r.id).length === 0 ? (p(), a("div", le)) : i("", !0)], 8, se), e.$slots["column-footer"] ? (p(), a("div", ue, [g(e.$slots, "column-footer", {
-				column: r,
-				lane: t ?? void 0
-			})])) : i("", !0)], 42, oe))), 128)) : i("", !0)], 64))), 128))], 4),
-			o("span", {
-				id: `${v(E)}-hint`,
-				class: "nb-board__sr"
-			}, [t[0] ||= s(" Press Space or Enter to pick up, arrow keys to move, Space or Enter to drop, Escape to cancel.", -1), c.nestable ? (p(), a(n, { key: 0 }, [s(" Shift with Space or Enter drops onto the card below instead, putting this one inside it.")], 64)) : i("", !0)], 8, de),
-			o("span", fe, _(V.value), 1)
-		], 16));
-	}
-});
-//#endregion
-export { C as t };