@alfakit/vue 0.0.0-stage → 0.1.1

package/dist/components/kanban/KanbanBoard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,258 @@
+import { useActionRunner as e, useDirection as t, usePanel as n, useT as ee } from "../../context.js";
+import { usePageActionContext as te } from "../actions/action-context.js";
+import { cn as r } from "../../lib/utils.js";
+import { useStore as ne } from "../../composables/use-store.js";
+import re from "../../lib/Icon.js";
+import ie from "../ui/Badge2.js";
+import i from "../ui/Button2.js";
+import ae from "../ui/Spinner.js";
+import { showToast as a } from "../notifications/flash-toasts.js";
+import oe from "../ui/Input.js";
+import se from "../ui/Card.js";
+import o from "../ui/Avatar.js";
+import s from "../ui/AvatarFallback.js";
+import c from "../ui/AvatarImage.js";
+import l from "../ui/CardTitle.js";
+import u from "./KanbanCard.js";
+import d from "./KanbanColumnHeader.js";
+import ce from "./KanbanFilters.js";
+import { KanbanController as le, attachKanbanPointer as ue, clientErrorNotification as de, createKanbanFiltersStore as fe, kanbanActiveFilters as pe, kanbanCardsIn as f, kanbanInitials as me } from "@alfakit/core";
+import { router as he } from "@inertiajs/vue3";
+import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, defineComponent as x, nextTick as S, normalizeClass as C, normalizeStyle as ge, onBeforeUnmount as _e, onMounted as ve, openBlock as w, ref as T, renderList as E, toDisplayString as D, toRaw as O, unref as k, useId as A, watch as j, withCtx as M } from "vue";
+import { ChevronRightIcon as N, SearchIcon as P } from "@lucide/vue";
+//#region src/components/kanban/KanbanBoard.vue?vue&type=script&setup=true&lang.ts
+var F = {
+	class: "flex flex-wrap items-center gap-2 px-4",
+	"data-slot": "kanban-toolbar"
+}, ye = ["id"], be = { class: "ms-auto flex w-full flex-wrap items-center gap-2 sm:w-auto" }, xe = {
+	key: 1,
+	class: "relative w-full sm:w-64"
+}, Se = ["id"], Ce = {
+	class: "relative overflow-x-auto overscroll-x-contain px-4 pb-2",
+	"data-slot": "kanban-scroller"
+}, I = ["data-lane"], we = ["id"], Te = [
+	"aria-labelledby",
+	"data-column",
+	"data-lane",
+	"data-refused"
+], Ee = {
+	key: 0,
+	class: "text-muted-foreground rounded-md border border-dashed px-2 py-6 text-center text-xs",
+	"data-slot": "kanban-empty"
+}, De = {
+	key: 1,
+	class: "text-muted-foreground px-2 text-center text-xs"
+}, Oe = {
+	class: "sr-only",
+	role: "status",
+	"aria-live": "polite"
+}, L = /*@__PURE__*/ x({
+	__name: "KanbanBoard",
+	props: { board: {} },
+	setup(x) {
+		let L = x, ke = e(), R = te(), Ae = n(), z = ee(), je = t(), B = A(), V = A(), H = new le(O(L.board), {
+			runner: ke,
+			token: R.token,
+			t: z,
+			notify: (e) => e.forEach((e) => a(e)),
+			error: (e) => a(de("kanban", e)),
+			visit: (e) => he.visit(e)
+		}), U = fe(O(L.board), R.token, Ae.value.endpoints.schemaOptions), W = ne(H.store), G = T(null), K = /* @__PURE__ */ new Map(), q = T(null), J = T(W.value.search), Y = null, X = null;
+		j(() => L.board, (e) => H.setBoard(O(e))), j(() => W.value.search, (e) => {
+			e !== J.value && (J.value = e);
+		}), ve(() => {
+			let e = G.value?.$el;
+			e instanceof HTMLElement && (Y = ue(e, H)), X = H.startPolling();
+		}), _e(() => {
+			Y?.(), X?.(), H.destroy(), U?.destroy();
+		});
+		let Z = m(() => (W.value.columns, H.schema)), Me = m(() => (W.value.columns, H.lanes())), Q = m(() => W.value.search !== "" || pe(W.value.filters) > 0), $ = m(() => W.value.columns.flatMap((e) => e.cards.map((e) => e.key))), Ne = m(() => q.value !== null && $.value.includes(q.value) ? q.value : $.value[0] ?? null), Pe = m(() => W.value.columns.map((e) => W.value.collapsed.has(e.key) ? "3.25rem" : "minmax(16rem, 20rem)").join(" ")), Fe = (e) => (t) => {
+			t instanceof HTMLElement ? K.set(e, t) : K.delete(e);
+		}, Ie = (e) => {
+			e && (q.value = e, S(() => K.get(e)?.focus()));
+		};
+		j(() => W.value.picked, (e) => {
+			e?.via === "keyboard" && S(() => {
+				let t = K.get(e.key);
+				t && document.activeElement !== t && t.focus();
+			});
+		});
+		let Le = (e, t) => {
+			if (t.target !== t.currentTarget) return;
+			let n = H.handleKey(e, t, je.value);
+			n.handled && (t.preventDefault(), n.open ? H.open(e) : Ie(n.focus));
+		}, Re = (e) => {
+			J.value = e, H.setSearch(e);
+		}, ze = (e) => W.value.columns.reduce((t, n) => t + f(n, e).length, 0);
+		return (e, t) => (w(), h(se, {
+			ref_key: "root",
+			ref: G,
+			role: "region",
+			"aria-labelledby": k(B),
+			class: "gap-3 py-4",
+			"data-slot": "kanban"
+		}, {
+			default: M(() => [
+				v("div", F, [Z.value.heading ? (w(), h(l, {
+					key: 0,
+					id: k(B),
+					class: "text-base"
+				}, {
+					default: M(() => [y(D(Z.value.heading), 1)]),
+					_: 1
+				}, 8, ["id"])) : (w(), _("span", {
+					key: 1,
+					id: k(B),
+					class: "sr-only"
+				}, D(k(z)("kanban.label", {}, "Kanban board")), 9, ye)), v("div", be, [
+					k(W).loading ? (w(), h(ae, {
+						key: 0,
+						class: "size-4"
+					})) : g("", !0),
+					Z.value.searchable ? (w(), _("div", xe, [b(k(P), {
+						class: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2",
+						"aria-hidden": "true"
+					}), b(oe, {
+						type: "search",
+						"model-value": J.value,
+						class: "h-8 ps-8",
+						placeholder: k(z)("kanban.search_placeholder", {}, "Search…"),
+						"aria-label": k(z)("kanban.search", {}, "Search cards"),
+						"onUpdate:modelValue": Re
+					}, null, 8, [
+						"model-value",
+						"placeholder",
+						"aria-label"
+					])])) : g("", !0),
+					k(U) ? (w(), h(ce, {
+						key: 2,
+						controller: k(H),
+						store: k(U)
+					}, null, 8, ["controller", "store"])) : g("", !0)
+				])]),
+				v("p", {
+					id: k(V),
+					class: "sr-only"
+				}, D(k(z)("kanban.instructions", {}, "Press Space to pick up a card. While it is picked up, use the arrow keys to move it, Space to drop it and Escape to cancel.")), 9, Se),
+				v("div", Ce, [v("div", {
+					class: "grid w-max min-w-full snap-x gap-3",
+					style: ge({ gridTemplateColumns: Pe.value })
+				}, [(w(!0), _(p, null, E(k(W).columns, (e) => (w(), h(d, {
+					id: `${k(B)}-column-${e.key}`,
+					key: e.key,
+					column: e,
+					collapsed: k(W).collapsed.has(e.key),
+					creatable: !!(e.creatable && Z.value.createAction),
+					filtered: Q.value,
+					onToggle: (t) => k(H).toggleColumn(e.key),
+					onCreate: (t) => k(H).create(e.key)
+				}, null, 8, [
+					"id",
+					"column",
+					"collapsed",
+					"creatable",
+					"filtered",
+					"onToggle",
+					"onCreate"
+				]))), 128)), (w(!0), _(p, null, E(Me.value, (e) => (w(), _(p, { key: e?.key ?? "__board" }, [e ? (w(), _("div", {
+					key: 0,
+					class: "flex items-center gap-2 pt-2",
+					style: { "grid-column": "1 / -1" },
+					"data-slot": "kanban-lane",
+					"data-lane": e.key
+				}, [
+					b(i, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						"aria-expanded": !k(W).collapsedLanes.has(e.key),
+						"aria-label": k(W).collapsedLanes.has(e.key) ? k(z)("kanban.expand_lane", { lane: e.label }, "Expand row :lane") : k(z)("kanban.collapse_lane", { lane: e.label }, "Collapse row :lane"),
+						onClick: (t) => k(H).toggleLane(e.key)
+					}, {
+						default: M(() => [b(k(N), {
+							class: C(k(r)("transition-transform rtl:rotate-180", !k(W).collapsedLanes.has(e.key) && "rotate-90 rtl:rotate-90")),
+							"aria-hidden": "true"
+						}, null, 8, ["class"])]),
+						_: 2
+					}, 1032, [
+						"aria-expanded",
+						"aria-label",
+						"onClick"
+					]),
+					e.avatar ? (w(), h(o, {
+						key: 0,
+						class: "size-6"
+					}, {
+						default: M(() => [b(c, {
+							src: e.avatar,
+							alt: ""
+						}, null, 8, ["src"]), b(s, null, {
+							default: M(() => [y(D(k(me)(e.label)), 1)]),
+							_: 2
+						}, 1024)]),
+						_: 2
+					}, 1024)) : e.icon ? (w(), h(k(re), {
+						key: 1,
+						name: e.icon,
+						class: "text-muted-foreground size-4"
+					}, null, 8, ["name"])) : g("", !0),
+					v("span", {
+						id: `${k(B)}-lane-${e.key}`,
+						class: "text-sm font-semibold"
+					}, D(e.label), 9, we),
+					b(ie, {
+						variant: "secondary",
+						class: "h-5 px-1.5 tabular-nums"
+					}, {
+						default: M(() => [y(D(ze(e.key)), 1)]),
+						_: 2
+					}, 1024)
+				], 8, I)) : g("", !0), !e || !k(W).collapsedLanes.has(e.key) ? (w(!0), _(p, { key: 1 }, E(k(W).columns, (t) => (w(), _("ul", {
+					key: t.key,
+					role: "list",
+					"aria-labelledby": [`${k(B)}-column-${t.key}`, e ? `${k(B)}-lane-${e.key}` : void 0].filter(Boolean).join(" "),
+					"data-slot": "kanban-dropzone",
+					"data-column": t.key,
+					"data-lane": e?.key,
+					"data-refused": k(W).picked && k(W).refused?.column === t.key ? "" : void 0,
+					class: C(k(r)("bg-muted/40 flex min-h-24 flex-col gap-2 rounded-lg p-2", e === null && "max-h-[70vh] overflow-y-auto"))
+				}, [k(W).collapsed.has(t.key) ? g("", !0) : (w(), _(p, { key: 0 }, [
+					(w(!0), _(p, null, E(k(f)(t, e?.key ?? null), (e) => (w(), h(u, {
+						key: e.key,
+						card: e,
+						board: Z.value,
+						token: k(R).token,
+						current: Ne.value === e.key,
+						picked: k(W).picked?.key === e.key ? k(W).picked.via : void 0,
+						saving: k(W).saving.has(e.key),
+						"described-by": k(V),
+						"set-ref": Fe(e.key),
+						onFocus: (t) => q.value = e.key,
+						onKeydown: (t) => Le(e.key, t),
+						onOpen: (t) => k(H).open(e.key)
+					}, null, 8, [
+						"card",
+						"board",
+						"token",
+						"current",
+						"picked",
+						"saving",
+						"described-by",
+						"set-ref",
+						"onFocus",
+						"onKeydown",
+						"onOpen"
+					]))), 128)),
+					k(f)(t, e?.key ?? null).length === 0 ? (w(), _("li", Ee, D(Q.value ? k(z)("kanban.no_results", {}, "No cards match") : t.emptyState ?? k(z)("kanban.empty", {}, "No cards")), 1)) : g("", !0),
+					e === null && t.total > t.cards.length ? (w(), _("li", De, D(k(z)("kanban.more_cards", { count: t.total - t.cards.length }, "+:count more")), 1)) : g("", !0)
+				], 64))], 10, Te))), 128)) : g("", !0)], 64))), 128))], 4)]),
+				v("div", Oe, D(k(W).announcement), 1)
+			]),
+			_: 1
+		}, 8, ["aria-labelledby"]));
+	}
+});
+//#endregion
+export { L as default };
+
+//# sourceMappingURL=KanbanBoard.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/kanban/KanbanBoard.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Card","_unref","_withCtx","_createElementVNode","CardTitle","_createTextVNode","_toDisplayString","_createElementBlock","Spinner","_createCommentVNode","_createVNode","Input","KanbanFilters","_normalizeStyle","_Fragment","_renderList","KanbanColumnHeader","Button","_normalizeClass","Avatar","AvatarImage","AvatarFallback","Icon","Badge","KanbanCard","Icon_default","Badge_default","Button_default","Spinner_default","Input_default","Card_default","Avatar_default","AvatarFallback_default","AvatarImage_default","CardTitle_default","KanbanCard_default","KanbanColumnHeader_default","KanbanFilters_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","KanbanBoard_vue_vue_type_script_setup_true_lang_default","props","__props","runner","useActionRunner","page","usePageActionContext","panel","usePanel","t","useT","direction","useDirection","labelId","useId","instructionsId","controller","KanbanController","toRaw","notifications","showToast","notification","clientErrorNotification","message","router","url","filters","createKanbanFiltersStore","state","useStore","root","ref","cards","focused","search","detach","stopPolling","watch","board","value","onMounted","element","attachKanbanPointer","onBeforeUnmount","schema","computed","lanes","filtered","kanbanActiveFilters","keys","column","card","current","template","setCard","key","focus","nextTick","picked","onKeyDown","event","result","onSearch","laneCount","sum","kanbanCardsIn","lane","openBlock","createBlock","unref","withCtx","createElementVNode","createTextVNode","toDisplayString","createElementBlock","createCommentVNode","createVNode","SearchIcon","normalizeStyle","Fragment","renderList","ChevronRightIcon","normalizeClass","cn","kanbanInitials","$event"],"sources":["../../../src/components/kanban/KanbanBoard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanEnvironment, KanbanSchema } from '@alfakit/core'\nimport {\n  KanbanController,\n  attachKanbanPointer,\n  clientErrorNotification,\n  createKanbanFiltersStore,\n  kanbanActiveFilters,\n  kanbanCardsIn,\n  kanbanInitials,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { ChevronRightIcon, SearchIcon } from '@lucide/vue'\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, toRaw, useId, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useActionRunner, useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { showToast } from '../notifications/flash-toasts'\nimport Avatar from '../ui/Avatar.vue'\nimport AvatarFallback from '../ui/AvatarFallback.vue'\nimport AvatarImage from '../ui/AvatarImage.vue'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Card from '../ui/Card.vue'\nimport CardTitle from '../ui/CardTitle.vue'\nimport Input from '../ui/Input.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport KanbanCard from './KanbanCard.vue'\nimport KanbanColumnHeader from './KanbanColumnHeader.vue'\nimport KanbanFilters from './KanbanFilters.vue'\n\n/**\n * Cards move by dragging (mouse, pen, touch) or with the keyboard, and every move is\n * saved in one request.\n */\nconst props = defineProps<{ board: KanbanSchema }>()\n\nconst runner = useActionRunner()\nconst page = usePageActionContext()\nconst panel = usePanel()\nconst t = useT()\nconst direction = useDirection()\nconst labelId = useId()\nconst instructionsId = useId()\n\nconst environment = (): KanbanEnvironment => ({\n  runner,\n  token: page.token,\n  t,\n  notify: (notifications) => notifications.forEach((notification) => showToast(notification)),\n  error: (message) => showToast(clientErrorNotification('kanban', message)),\n  visit: (url) => router.visit(url),\n})\n\nconst controller = new KanbanController(toRaw(props.board), environment())\nconst filters = createKanbanFiltersStore(\n  toRaw(props.board),\n  page.token,\n  panel.value.endpoints.schemaOptions,\n)\nconst state = useStore(controller.store)\nconst root = ref<{ $el: HTMLElement } | null>(null)\nconst cards = new Map<string, HTMLElement>()\nconst focused = ref<string | null>(null)\nconst search = ref(state.value.search)\nlet detach: (() => void) | null = null\nlet stopPolling: (() => void) | null = null\n\nwatch(\n  () => props.board,\n  (board) => controller.setBoard(toRaw(board)),\n)\nwatch(\n  () => state.value.search,\n  (value) => {\n    if (value !== search.value) search.value = value\n  },\n)\n\nonMounted(() => {\n  const element = root.value?.$el\n\n  if (element instanceof HTMLElement) detach = attachKanbanPointer(element, controller)\n\n  stopPolling = controller.startPolling()\n})\n\nonBeforeUnmount(() => {\n  detach?.()\n  stopPolling?.()\n  controller.destroy()\n  filters?.destroy()\n})\n\nconst schema = computed(() => {\n  // Re-read when the state changes (the controller swaps its schema with the board).\n  void state.value.columns\n\n  return controller.schema\n})\nconst lanes = computed(() => {\n  void state.value.columns\n\n  return controller.lanes()\n})\nconst filtered = computed(\n  () => state.value.search !== '' || kanbanActiveFilters(state.value.filters) > 0,\n)\nconst keys = computed(() =>\n  state.value.columns.flatMap((column) => column.cards.map((card) => card.key)),\n)\nconst current = computed(() =>\n  focused.value !== null && keys.value.includes(focused.value)\n    ? focused.value\n    : (keys.value[0] ?? null),\n)\nconst template = computed(() =>\n  state.value.columns\n    .map((column) => (state.value.collapsed.has(column.key) ? '3.25rem' : 'minmax(16rem, 20rem)'))\n    .join(' '),\n)\n\nconst setCard = (key: string) => (element: unknown) => {\n  if (element instanceof HTMLElement) cards.set(key, element)\n  else cards.delete(key)\n}\n\nconst focus = (key: string | undefined) => {\n  if (!key) return\n  focused.value = key\n  void nextTick(() => cards.get(key)?.focus())\n}\n\n// A card picked up with the keyboard moves to another list: keep the focus on it.\nwatch(\n  () => state.value.picked,\n  (picked) => {\n    if (picked?.via !== 'keyboard') return\n\n    void nextTick(() => {\n      const element = cards.get(picked.key)\n\n      if (element && document.activeElement !== element) element.focus()\n    })\n  },\n)\n\nconst onKeyDown = (key: string, event: KeyboardEvent) => {\n  if (event.target !== event.currentTarget) return\n\n  const result = controller.handleKey(key, event, direction.value)\n\n  if (!result.handled) return\n\n  event.preventDefault()\n\n  if (result.open) controller.open(key)\n  else focus(result.focus)\n}\n\nconst onSearch = (value: string) => {\n  search.value = value\n  controller.setSearch(value)\n}\n\nconst laneCount = (lane: string) =>\n  state.value.columns.reduce((sum, column) => sum + kanbanCardsIn(column, lane).length, 0)\n</script>\n\n<template>\n  <Card ref=\"root\" role=\"region\" :aria-labelledby=\"labelId\" class=\"gap-3 py-4\" data-slot=\"kanban\">\n    <div class=\"flex flex-wrap items-center gap-2 px-4\" data-slot=\"kanban-toolbar\">\n      <CardTitle v-if=\"schema.heading\" :id=\"labelId\" class=\"text-base\">{{\n        schema.heading\n      }}</CardTitle>\n      <span v-else :id=\"labelId\" class=\"sr-only\">{{ t('kanban.label', {}, 'Kanban board') }}</span>\n      <div class=\"ms-auto flex w-full flex-wrap items-center gap-2 sm:w-auto\">\n        <Spinner v-if=\"state.loading\" class=\"size-4\" />\n        <div v-if=\"schema.searchable\" class=\"relative w-full sm:w-64\">\n          <SearchIcon\n            class=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n            aria-hidden=\"true\"\n          />\n          <Input\n            type=\"search\"\n            :model-value=\"search\"\n            class=\"h-8 ps-8\"\n            :placeholder=\"t('kanban.search_placeholder', {}, 'Search…')\"\n            :aria-label=\"t('kanban.search', {}, 'Search cards')\"\n            @update:model-value=\"onSearch\"\n          />\n        </div>\n        <KanbanFilters v-if=\"filters\" :controller=\"controller\" :store=\"filters\" />\n      </div>\n    </div>\n    <p :id=\"instructionsId\" class=\"sr-only\">\n      {{\n        t(\n          'kanban.instructions',\n          {},\n          'Press Space to pick up a card. While it is picked up, use the arrow keys to move it, Space to drop it and Escape to cancel.',\n        )\n      }}\n    </p>\n    <div\n      class=\"relative overflow-x-auto overscroll-x-contain px-4 pb-2\"\n      data-slot=\"kanban-scroller\"\n    >\n      <div class=\"grid w-max min-w-full snap-x gap-3\" :style=\"{ gridTemplateColumns: template }\">\n        <KanbanColumnHeader\n          v-for=\"column in state.columns\"\n          :id=\"`${labelId}-column-${column.key}`\"\n          :key=\"column.key\"\n          :column=\"column\"\n          :collapsed=\"state.collapsed.has(column.key)\"\n          :creatable=\"Boolean(column.creatable && schema.createAction)\"\n          :filtered=\"filtered\"\n          @toggle=\"controller.toggleColumn(column.key)\"\n          @create=\"controller.create(column.key)\"\n        />\n        <template v-for=\"lane in lanes\" :key=\"lane?.key ?? '__board'\">\n          <div\n            v-if=\"lane\"\n            class=\"flex items-center gap-2 pt-2\"\n            style=\"grid-column: 1 / -1\"\n            data-slot=\"kanban-lane\"\n            :data-lane=\"lane.key\"\n          >\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :aria-expanded=\"!state.collapsedLanes.has(lane.key)\"\n              :aria-label=\"\n                state.collapsedLanes.has(lane.key)\n                  ? t('kanban.expand_lane', { lane: lane.label }, 'Expand row :lane')\n                  : t('kanban.collapse_lane', { lane: lane.label }, 'Collapse row :lane')\n              \"\n              @click=\"controller.toggleLane(lane.key)\"\n            >\n              <ChevronRightIcon\n                :class=\"\n                  cn(\n                    'transition-transform rtl:rotate-180',\n                    !state.collapsedLanes.has(lane.key) && 'rotate-90 rtl:rotate-90',\n                  )\n                \"\n                aria-hidden=\"true\"\n              />\n            </Button>\n            <Avatar v-if=\"lane.avatar\" class=\"size-6\">\n              <AvatarImage :src=\"lane.avatar\" alt=\"\" />\n              <AvatarFallback>{{ kanbanInitials(lane.label) }}</AvatarFallback>\n            </Avatar>\n            <Icon v-else-if=\"lane.icon\" :name=\"lane.icon\" class=\"text-muted-foreground size-4\" />\n            <span :id=\"`${labelId}-lane-${lane.key}`\" class=\"text-sm font-semibold\">{{\n              lane.label\n            }}</span>\n            <Badge variant=\"secondary\" class=\"h-5 px-1.5 tabular-nums\">{{\n              laneCount(lane.key)\n            }}</Badge>\n          </div>\n          <template v-if=\"!lane || !state.collapsedLanes.has(lane.key)\">\n            <ul\n              v-for=\"column in state.columns\"\n              :key=\"column.key\"\n              role=\"list\"\n              :aria-labelledby=\"\n                [\n                  `${labelId}-column-${column.key}`,\n                  lane ? `${labelId}-lane-${lane.key}` : undefined,\n                ]\n                  .filter(Boolean)\n                  .join(' ')\n              \"\n              data-slot=\"kanban-dropzone\"\n              :data-column=\"column.key\"\n              :data-lane=\"lane?.key\"\n              :data-refused=\"state.picked && state.refused?.column === column.key ? '' : undefined\"\n              :class=\"\n                cn(\n                  'bg-muted/40 flex min-h-24 flex-col gap-2 rounded-lg p-2',\n                  lane === null && 'max-h-[70vh] overflow-y-auto',\n                )\n              \"\n            >\n              <template v-if=\"!state.collapsed.has(column.key)\">\n                <KanbanCard\n                  v-for=\"card in kanbanCardsIn(column, lane?.key ?? null)\"\n                  :key=\"card.key\"\n                  :card=\"card\"\n                  :board=\"schema\"\n                  :token=\"page.token\"\n                  :current=\"current === card.key\"\n                  :picked=\"state.picked?.key === card.key ? state.picked.via : undefined\"\n                  :saving=\"state.saving.has(card.key)\"\n                  :described-by=\"instructionsId\"\n                  :set-ref=\"setCard(card.key)\"\n                  @focus=\"focused = card.key\"\n                  @keydown=\"onKeyDown(card.key, $event)\"\n                  @open=\"controller.open(card.key)\"\n                />\n                <li\n                  v-if=\"kanbanCardsIn(column, lane?.key ?? null).length === 0\"\n                  class=\"text-muted-foreground rounded-md border border-dashed px-2 py-6 text-center text-xs\"\n                  data-slot=\"kanban-empty\"\n                >\n                  {{\n                    filtered\n                      ? t('kanban.no_results', {}, 'No cards match')\n                      : (column.emptyState ?? t('kanban.empty', {}, 'No cards'))\n                  }}\n                </li>\n                <li\n                  v-if=\"lane === null && column.total > column.cards.length\"\n                  class=\"text-muted-foreground px-2 text-center text-xs\"\n                >\n                  {{\n                    t(\n                      'kanban.more_cards',\n                      { count: column.total - column.cards.length },\n                      '+:count more',\n                    )\n                  }}\n                </li>\n              </template>\n            </ul>\n          </template>\n        </template>\n      </div>\n    </div>\n    <div class=\"sr-only\" role=\"status\" aria-live=\"polite\">{{ state.announcement }}</div>\n  </Card>\n</template>\n"],"mappings":"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"}

package/dist/components/kanban/KanbanCard.js

@@ -0,0 +1,7 @@
+import e from "./KanbanCard.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/kanban/KanbanCard.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=KanbanCard.js.map

package/dist/components/kanban/KanbanCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCard.js","names":["_sfc_main","KanbanCard_vue_vue_type_script_setup_true_lang_default","KanbanCard_default"],"sources":["../../../src/components/kanban/KanbanCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanCardSchema, KanbanSchema } from '@alfakit/core'\nimport { kanbanInitials } from '@alfakit/core'\nimport { CalendarIcon } from '@lucide/vue'\nimport { computed, useId } from 'vue'\nimport { useFormatter, useT } from '../../context'\nimport { badgeColorClasses, colorClass, cssColor } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Avatar from '../ui/Avatar.vue'\nimport AvatarFallback from '../ui/AvatarFallback.vue'\nimport AvatarImage from '../ui/AvatarImage.vue'\nimport Badge from '../ui/Badge.vue'\n\nconst props = defineProps<{\n  card: KanbanCardSchema\n  board: KanbanSchema\n  token: string\n  current: boolean\n  picked?: 'keyboard' | 'pointer'\n  saving: boolean\n  describedBy: string\n  setRef: (element: unknown) => void\n}>()\nconst emit = defineEmits<{ focus: []; keydown: [event: KeyboardEvent]; open: [] }>()\nconst t = useT()\nconst formatter = useFormatter()\nconst titleId = useId()\n\nconst opens = computed(\n  () => props.card.clickable !== false && Boolean(props.card.url || props.board.cardAction),\n)\nconst assignees = computed(() => props.card.assignees ?? [])\nconst shownAssignees = computed(() => assignees.value.slice(0, 3))\nconst dueDate = computed(() => (props.card.dueDate ? formatter.value.date(props.card.dueDate) : ''))\n</script>\n\n<template>\n  <li\n    class=\"relative\"\n    data-slot=\"kanban-card\"\n    :data-key=\"props.card.key\"\n    :data-movable=\"props.board.movable && props.card.movable !== false ? undefined : 'false'\"\n    :data-picked=\"props.picked\"\n    :data-saving=\"props.saving ? '' : undefined\"\n  >\n    <div\n      :ref=\"props.setRef\"\n      role=\"button\"\n      :tabindex=\"props.current ? 0 : -1\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"props.describedBy\"\n      :aria-disabled=\"opens ? undefined : true\"\n      data-slot=\"kanban-card-body\"\n      :class=\"\n        cn(\n          'bg-card text-card-foreground focus-visible:ring-ring/50 flex touch-manipulation flex-col gap-2 overflow-hidden rounded-lg border p-3 text-start shadow-xs outline-none select-none focus-visible:ring-[3px]',\n          opens && 'hover:border-ring/60 cursor-pointer',\n          props.card.color && 'border-s-4',\n        )\n      \"\n      :style=\"props.card.color ? { borderInlineStartColor: cssColor(props.card.color) } : undefined\"\n      @focus=\"(event: FocusEvent) => event.target === event.currentTarget && emit('focus')\"\n      @keydown=\"emit('keydown', $event)\"\n      @click=\"opens && emit('open')\"\n    >\n      <img\n        v-if=\"props.card.coverImage\"\n        :src=\"props.card.coverImage\"\n        :alt=\"props.card.coverImageAlt ?? ''\"\n        loading=\"lazy\"\n        draggable=\"false\"\n        class=\"-mx-3 -mt-3 h-32 w-[calc(100%+1.5rem)] max-w-none object-cover\"\n      />\n      <span\n        :id=\"titleId\"\n        :class=\"cn('text-sm leading-snug font-medium', props.card.actions && 'pe-7')\"\n        >{{ props.card.title }}</span\n      >\n      <p v-if=\"props.card.description\" class=\"text-muted-foreground line-clamp-3 text-xs\">\n        {{ props.card.description }}\n      </p>\n      <div v-if=\"props.card.badges?.length\" class=\"flex flex-wrap gap-1\">\n        <Badge\n          v-for=\"(badge, index) in props.card.badges\"\n          :key=\"index\"\n          variant=\"outline\"\n          :title=\"badge.tooltip\"\n          :class=\"colorClass(badgeColorClasses, badge.color, 'gray')\"\n        >\n          <Icon v-if=\"badge.icon\" :name=\"badge.icon\" />\n          {{ badge.label }}\n        </Badge>\n      </div>\n      <SchemaRenderer\n        v-if=\"props.card.schema?.length\"\n        :components=\"props.card.schema\"\n        class=\"gap-2 text-xs\"\n      />\n      <div\n        v-if=\"props.card.progress !== undefined\"\n        role=\"progressbar\"\n        :aria-valuemin=\"0\"\n        :aria-valuemax=\"100\"\n        :aria-valuenow=\"Math.round(props.card.progress)\"\n        :aria-label=\"\n          t(\n            'kanban.progress',\n            { percent: formatter.percent(props.card.progress / 100) },\n            ':percent complete',\n          )\n        \"\n        class=\"bg-muted h-1.5 overflow-hidden rounded-full\"\n      >\n        <div class=\"bg-primary h-full rounded-full\" :style=\"{ width: `${props.card.progress}%` }\" />\n      </div>\n      <div\n        v-if=\"props.card.dueDate || assignees.length > 0\"\n        class=\"flex items-center gap-2 text-xs\"\n      >\n        <span\n          v-if=\"props.card.dueDate\"\n          :class=\"\n            cn(\n              'inline-flex items-center gap-1',\n              props.card.overdue ? 'text-destructive font-medium' : 'text-muted-foreground',\n            )\n          \"\n        >\n          <CalendarIcon class=\"size-3.5\" aria-hidden=\"true\" />\n          <span class=\"sr-only\">{{ t('kanban.due', { date: dueDate }, 'Due :date') }}</span>\n          <time :datetime=\"props.card.dueDate\" aria-hidden=\"true\">{{ dueDate }}</time>\n          <span v-if=\"props.card.overdue\" class=\"sr-only\">{{\n            t('kanban.overdue', {}, 'Overdue')\n          }}</span>\n        </span>\n        <div v-if=\"assignees.length > 0\" class=\"ms-auto flex items-center\">\n          <span class=\"sr-only\">{{\n            t(\n              'kanban.assignees',\n              { names: formatter.list(assignees.map((assignee) => assignee.name)) },\n              'Assigned to :names',\n            )\n          }}</span>\n          <div class=\"flex -space-x-1.5 rtl:space-x-reverse\" aria-hidden=\"true\">\n            <Avatar\n              v-for=\"(assignee, index) in shownAssignees\"\n              :key=\"index\"\n              class=\"ring-card size-6 ring-2\"\n              :title=\"assignee.name\"\n            >\n              <AvatarImage v-if=\"assignee.avatar\" :src=\"assignee.avatar\" alt=\"\" />\n              <AvatarFallback class=\"text-[0.625rem]\">{{\n                kanbanInitials(assignee.name)\n              }}</AvatarFallback>\n            </Avatar>\n            <span\n              v-if=\"assignees.length > shownAssignees.length\"\n              class=\"bg-muted ring-card flex size-6 items-center justify-center rounded-full text-[0.625rem] font-medium ring-2\"\n              >{{\n                t(\n                  'kanban.more_assignees',\n                  { count: assignees.length - shownAssignees.length },\n                  '+:count',\n                )\n              }}</span\n            >\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"props.card.actions?.length\" class=\"absolute end-1.5 top-1.5\" data-kanban-no-drag=\"\">\n      <ActionList\n        :actions=\"props.card.actions\"\n        :context=\"{\n          token: props.token,\n          component: props.board.actionComponent,\n          record: props.card.key,\n        }\"\n        size=\"xs\"\n      />\n    </div>\n  </li>\n</template>\n"],"mappings":""}

package/dist/components/kanban/KanbanCard.vue.d.ts

@@ -0,0 +1,22 @@
+import type { KanbanCardSchema, KanbanSchema } from '@alfakit/core';
+type __VLS_Props = {
+    card: KanbanCardSchema;
+    board: KanbanSchema;
+    token: string;
+    current: boolean;
+    picked?: 'keyboard' | 'pointer';
+    saving: boolean;
+    describedBy: string;
+    setRef: (element: unknown) => void;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    focus: () => any;
+    keydown: (event: KeyboardEvent) => any;
+    open: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFocus?: (() => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=KanbanCard.vue.d.ts.map

package/dist/components/kanban/KanbanCard.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/kanban/KanbanCard.vue"],"names":[],"mappings":"AA4LA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAenE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,YAAY,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAC/B,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC,CAAC;;;;;;;;;;AAyXF,wBAOG"}

package/dist/components/kanban/KanbanCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,175 @@
+import { useFormatter as e, useT as t } from "../../context.js";
+import { cn as n } from "../../lib/utils.js";
+import { badgeColorClasses as r, colorClass as i, cssColor as ee } from "../../lib/colors.js";
+import a from "../../lib/Icon.js";
+import o from "../ui/Badge2.js";
+import s from "../actions/ActionList.js";
+import te from "../schema/SchemaRenderer.js";
+import c from "../ui/Avatar.js";
+import ne from "../ui/AvatarFallback.js";
+import l from "../ui/AvatarImage.js";
+import { kanbanInitials as u } from "@alfakit/core";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, normalizeClass as b, normalizeStyle as x, openBlock as S, renderList as C, toDisplayString as w, unref as T, useId as re, withCtx as E } from "vue";
+import { CalendarIcon as D } from "@lucide/vue";
+//#region src/components/kanban/KanbanCard.vue?vue&type=script&setup=true&lang.ts
+var O = [
+	"data-key",
+	"data-movable",
+	"data-picked",
+	"data-saving"
+], k = [
+	"tabindex",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-disabled"
+], A = ["src", "alt"], j = ["id"], M = {
+	key: 1,
+	class: "text-muted-foreground line-clamp-3 text-xs"
+}, N = {
+	key: 2,
+	class: "flex flex-wrap gap-1"
+}, P = ["aria-valuenow", "aria-label"], F = {
+	key: 5,
+	class: "flex items-center gap-2 text-xs"
+}, I = { class: "sr-only" }, L = ["datetime"], R = {
+	key: 0,
+	class: "sr-only"
+}, z = {
+	key: 1,
+	class: "ms-auto flex items-center"
+}, B = { class: "sr-only" }, V = {
+	class: "flex -space-x-1.5 rtl:space-x-reverse",
+	"aria-hidden": "true"
+}, H = {
+	key: 0,
+	class: "bg-muted ring-card flex size-6 items-center justify-center rounded-full text-[0.625rem] font-medium ring-2"
+}, U = {
+	key: 0,
+	class: "absolute end-1.5 top-1.5",
+	"data-kanban-no-drag": ""
+}, W = /*@__PURE__*/ y({
+	__name: "KanbanCard",
+	props: {
+		card: {},
+		board: {},
+		token: {},
+		current: { type: Boolean },
+		picked: {},
+		saving: { type: Boolean },
+		describedBy: {},
+		setRef: { type: Function }
+	},
+	emits: [
+		"focus",
+		"keydown",
+		"open"
+	],
+	setup(y, { emit: W }) {
+		let G = y, K = W, q = t(), J = e(), Y = re(), X = f(() => G.card.clickable !== !1 && !!(G.card.url || G.board.cardAction)), Z = f(() => G.card.assignees ?? []), Q = f(() => Z.value.slice(0, 3)), $ = f(() => G.card.dueDate ? J.value.date(G.card.dueDate) : "");
+		return (e, t) => (S(), h("li", {
+			class: "relative",
+			"data-slot": "kanban-card",
+			"data-key": G.card.key,
+			"data-movable": G.board.movable && G.card.movable !== !1 ? void 0 : "false",
+			"data-picked": G.picked,
+			"data-saving": G.saving ? "" : void 0
+		}, [g("div", {
+			ref: G.setRef,
+			role: "button",
+			tabindex: G.current ? 0 : -1,
+			"aria-labelledby": T(Y),
+			"aria-describedby": G.describedBy,
+			"aria-disabled": !X.value || void 0,
+			"data-slot": "kanban-card-body",
+			class: b(T(n)("bg-card text-card-foreground focus-visible:ring-ring/50 flex touch-manipulation flex-col gap-2 overflow-hidden rounded-lg border p-3 text-start shadow-xs outline-none select-none focus-visible:ring-[3px]", X.value && "hover:border-ring/60 cursor-pointer", G.card.color && "border-s-4")),
+			style: x(G.card.color ? { borderInlineStartColor: T(ee)(G.card.color) } : void 0),
+			onFocus: t[0] ||= (e) => e.target === e.currentTarget && K("focus"),
+			onKeydown: t[1] ||= (e) => K("keydown", e),
+			onClick: t[2] ||= (e) => X.value && K("open")
+		}, [
+			G.card.coverImage ? (S(), h("img", {
+				key: 0,
+				src: G.card.coverImage,
+				alt: G.card.coverImageAlt ?? "",
+				loading: "lazy",
+				draggable: "false",
+				class: "-mx-3 -mt-3 h-32 w-[calc(100%+1.5rem)] max-w-none object-cover"
+			}, null, 8, A)) : m("", !0),
+			g("span", {
+				id: T(Y),
+				class: b(T(n)("text-sm leading-snug font-medium", G.card.actions && "pe-7"))
+			}, w(G.card.title), 11, j),
+			G.card.description ? (S(), h("p", M, w(G.card.description), 1)) : m("", !0),
+			G.card.badges?.length ? (S(), h("div", N, [(S(!0), h(d, null, C(G.card.badges, (e, t) => (S(), p(o, {
+				key: t,
+				variant: "outline",
+				title: e.tooltip,
+				class: b(T(i)(T(r), e.color, "gray"))
+			}, {
+				default: E(() => [e.icon ? (S(), p(T(a), {
+					key: 0,
+					name: e.icon
+				}, null, 8, ["name"])) : m("", !0), _(" " + w(e.label), 1)]),
+				_: 2
+			}, 1032, ["title", "class"]))), 128))])) : m("", !0),
+			G.card.schema?.length ? (S(), p(te, {
+				key: 3,
+				components: G.card.schema,
+				class: "gap-2 text-xs"
+			}, null, 8, ["components"])) : m("", !0),
+			G.card.progress === void 0 ? m("", !0) : (S(), h("div", {
+				key: 4,
+				role: "progressbar",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": Math.round(G.card.progress),
+				"aria-label": T(q)("kanban.progress", { percent: T(J).percent(G.card.progress / 100) }, ":percent complete"),
+				class: "bg-muted h-1.5 overflow-hidden rounded-full"
+			}, [g("div", {
+				class: "bg-primary h-full rounded-full",
+				style: x({ width: `${G.card.progress}%` })
+			}, null, 4)], 8, P)),
+			G.card.dueDate || Z.value.length > 0 ? (S(), h("div", F, [G.card.dueDate ? (S(), h("span", {
+				key: 0,
+				class: b(T(n)("inline-flex items-center gap-1", G.card.overdue ? "text-destructive font-medium" : "text-muted-foreground"))
+			}, [
+				v(T(D), {
+					class: "size-3.5",
+					"aria-hidden": "true"
+				}),
+				g("span", I, w(T(q)("kanban.due", { date: $.value }, "Due :date")), 1),
+				g("time", {
+					datetime: G.card.dueDate,
+					"aria-hidden": "true"
+				}, w($.value), 9, L),
+				G.card.overdue ? (S(), h("span", R, w(T(q)("kanban.overdue", {}, "Overdue")), 1)) : m("", !0)
+			], 2)) : m("", !0), Z.value.length > 0 ? (S(), h("div", z, [g("span", B, w(T(q)("kanban.assignees", { names: T(J).list(Z.value.map((e) => e.name)) }, "Assigned to :names")), 1), g("div", V, [(S(!0), h(d, null, C(Q.value, (e, t) => (S(), p(c, {
+				key: t,
+				class: "ring-card size-6 ring-2",
+				title: e.name
+			}, {
+				default: E(() => [e.avatar ? (S(), p(l, {
+					key: 0,
+					src: e.avatar,
+					alt: ""
+				}, null, 8, ["src"])) : m("", !0), v(ne, { class: "text-[0.625rem]" }, {
+					default: E(() => [_(w(T(u)(e.name)), 1)]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1032, ["title"]))), 128)), Z.value.length > Q.value.length ? (S(), h("span", H, w(T(q)("kanban.more_assignees", { count: Z.value.length - Q.value.length }, "+:count")), 1)) : m("", !0)])])) : m("", !0)])) : m("", !0)
+		], 46, k), G.card.actions?.length ? (S(), h("div", U, [v(s, {
+			actions: G.card.actions,
+			context: {
+				token: G.token,
+				component: G.board.actionComponent,
+				record: G.card.key
+			},
+			size: "xs"
+		}, null, 8, ["actions", "context"])])) : m("", !0)], 8, O));
+	}
+});
+//#endregion
+export { W as default };
+
+//# sourceMappingURL=KanbanCard.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/kanban/KanbanCard.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCard.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_normalizeClass","_normalizeStyle","_createCommentVNode","_toDisplayString","_Fragment","_renderList","_createBlock","Badge","_withCtx","Icon","_createTextVNode","SchemaRenderer","_createVNode","Avatar","AvatarImage","AvatarFallback","ActionList","Icon_default","Badge_default","ActionList_default","SchemaRenderer_default","Avatar_default","AvatarFallback_default","AvatarImage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","KanbanCard_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","formatter","useFormatter","titleId","useId","opens","computed","assignees","shownAssignees","dueDate","openBlock","createElementBlock","createElementVNode","unref","normalizeClass","cn","normalizeStyle","cssColor","_cache","event","$event","createCommentVNode","toDisplayString","Fragment","renderList","createBlock","index","badge","colorClass","badgeColorClasses","withCtx","createTextVNode","createVNode","CalendarIcon","assignee","kanbanInitials"],"sources":["../../../src/components/kanban/KanbanCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanCardSchema, KanbanSchema } from '@alfakit/core'\nimport { kanbanInitials } from '@alfakit/core'\nimport { CalendarIcon } from '@lucide/vue'\nimport { computed, useId } from 'vue'\nimport { useFormatter, useT } from '../../context'\nimport { badgeColorClasses, colorClass, cssColor } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Avatar from '../ui/Avatar.vue'\nimport AvatarFallback from '../ui/AvatarFallback.vue'\nimport AvatarImage from '../ui/AvatarImage.vue'\nimport Badge from '../ui/Badge.vue'\n\nconst props = defineProps<{\n  card: KanbanCardSchema\n  board: KanbanSchema\n  token: string\n  current: boolean\n  picked?: 'keyboard' | 'pointer'\n  saving: boolean\n  describedBy: string\n  setRef: (element: unknown) => void\n}>()\nconst emit = defineEmits<{ focus: []; keydown: [event: KeyboardEvent]; open: [] }>()\nconst t = useT()\nconst formatter = useFormatter()\nconst titleId = useId()\n\nconst opens = computed(\n  () => props.card.clickable !== false && Boolean(props.card.url || props.board.cardAction),\n)\nconst assignees = computed(() => props.card.assignees ?? [])\nconst shownAssignees = computed(() => assignees.value.slice(0, 3))\nconst dueDate = computed(() => (props.card.dueDate ? formatter.value.date(props.card.dueDate) : ''))\n</script>\n\n<template>\n  <li\n    class=\"relative\"\n    data-slot=\"kanban-card\"\n    :data-key=\"props.card.key\"\n    :data-movable=\"props.board.movable && props.card.movable !== false ? undefined : 'false'\"\n    :data-picked=\"props.picked\"\n    :data-saving=\"props.saving ? '' : undefined\"\n  >\n    <div\n      :ref=\"props.setRef\"\n      role=\"button\"\n      :tabindex=\"props.current ? 0 : -1\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"props.describedBy\"\n      :aria-disabled=\"opens ? undefined : true\"\n      data-slot=\"kanban-card-body\"\n      :class=\"\n        cn(\n          'bg-card text-card-foreground focus-visible:ring-ring/50 flex touch-manipulation flex-col gap-2 overflow-hidden rounded-lg border p-3 text-start shadow-xs outline-none select-none focus-visible:ring-[3px]',\n          opens && 'hover:border-ring/60 cursor-pointer',\n          props.card.color && 'border-s-4',\n        )\n      \"\n      :style=\"props.card.color ? { borderInlineStartColor: cssColor(props.card.color) } : undefined\"\n      @focus=\"(event: FocusEvent) => event.target === event.currentTarget && emit('focus')\"\n      @keydown=\"emit('keydown', $event)\"\n      @click=\"opens && emit('open')\"\n    >\n      <img\n        v-if=\"props.card.coverImage\"\n        :src=\"props.card.coverImage\"\n        :alt=\"props.card.coverImageAlt ?? ''\"\n        loading=\"lazy\"\n        draggable=\"false\"\n        class=\"-mx-3 -mt-3 h-32 w-[calc(100%+1.5rem)] max-w-none object-cover\"\n      />\n      <span\n        :id=\"titleId\"\n        :class=\"cn('text-sm leading-snug font-medium', props.card.actions && 'pe-7')\"\n        >{{ props.card.title }}</span\n      >\n      <p v-if=\"props.card.description\" class=\"text-muted-foreground line-clamp-3 text-xs\">\n        {{ props.card.description }}\n      </p>\n      <div v-if=\"props.card.badges?.length\" class=\"flex flex-wrap gap-1\">\n        <Badge\n          v-for=\"(badge, index) in props.card.badges\"\n          :key=\"index\"\n          variant=\"outline\"\n          :title=\"badge.tooltip\"\n          :class=\"colorClass(badgeColorClasses, badge.color, 'gray')\"\n        >\n          <Icon v-if=\"badge.icon\" :name=\"badge.icon\" />\n          {{ badge.label }}\n        </Badge>\n      </div>\n      <SchemaRenderer\n        v-if=\"props.card.schema?.length\"\n        :components=\"props.card.schema\"\n        class=\"gap-2 text-xs\"\n      />\n      <div\n        v-if=\"props.card.progress !== undefined\"\n        role=\"progressbar\"\n        :aria-valuemin=\"0\"\n        :aria-valuemax=\"100\"\n        :aria-valuenow=\"Math.round(props.card.progress)\"\n        :aria-label=\"\n          t(\n            'kanban.progress',\n            { percent: formatter.percent(props.card.progress / 100) },\n            ':percent complete',\n          )\n        \"\n        class=\"bg-muted h-1.5 overflow-hidden rounded-full\"\n      >\n        <div class=\"bg-primary h-full rounded-full\" :style=\"{ width: `${props.card.progress}%` }\" />\n      </div>\n      <div\n        v-if=\"props.card.dueDate || assignees.length > 0\"\n        class=\"flex items-center gap-2 text-xs\"\n      >\n        <span\n          v-if=\"props.card.dueDate\"\n          :class=\"\n            cn(\n              'inline-flex items-center gap-1',\n              props.card.overdue ? 'text-destructive font-medium' : 'text-muted-foreground',\n            )\n          \"\n        >\n          <CalendarIcon class=\"size-3.5\" aria-hidden=\"true\" />\n          <span class=\"sr-only\">{{ t('kanban.due', { date: dueDate }, 'Due :date') }}</span>\n          <time :datetime=\"props.card.dueDate\" aria-hidden=\"true\">{{ dueDate }}</time>\n          <span v-if=\"props.card.overdue\" class=\"sr-only\">{{\n            t('kanban.overdue', {}, 'Overdue')\n          }}</span>\n        </span>\n        <div v-if=\"assignees.length > 0\" class=\"ms-auto flex items-center\">\n          <span class=\"sr-only\">{{\n            t(\n              'kanban.assignees',\n              { names: formatter.list(assignees.map((assignee) => assignee.name)) },\n              'Assigned to :names',\n            )\n          }}</span>\n          <div class=\"flex -space-x-1.5 rtl:space-x-reverse\" aria-hidden=\"true\">\n            <Avatar\n              v-for=\"(assignee, index) in shownAssignees\"\n              :key=\"index\"\n              class=\"ring-card size-6 ring-2\"\n              :title=\"assignee.name\"\n            >\n              <AvatarImage v-if=\"assignee.avatar\" :src=\"assignee.avatar\" alt=\"\" />\n              <AvatarFallback class=\"text-[0.625rem]\">{{\n                kanbanInitials(assignee.name)\n              }}</AvatarFallback>\n            </Avatar>\n            <span\n              v-if=\"assignees.length > shownAssignees.length\"\n              class=\"bg-muted ring-card flex size-6 items-center justify-center rounded-full text-[0.625rem] font-medium ring-2\"\n              >{{\n                t(\n                  'kanban.more_assignees',\n                  { count: assignees.length - shownAssignees.length },\n                  '+:count',\n                )\n              }}</span\n            >\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"props.card.actions?.length\" class=\"absolute end-1.5 top-1.5\" data-kanban-no-drag=\"\">\n      <ActionList\n        :actions=\"props.card.actions\"\n        :context=\"{\n          token: props.token,\n          component: props.board.actionComponent,\n          record: props.card.key,\n        }\"\n        size=\"xs\"\n      />\n    </div>\n  </li>\n</template>\n"],"mappings":"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"}

package/dist/components/kanban/KanbanColumnHeader.js

@@ -0,0 +1,7 @@
+import e from "./KanbanColumnHeader.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/kanban/KanbanColumnHeader.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=KanbanColumnHeader.js.map

package/dist/components/kanban/KanbanColumnHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanColumnHeader.js","names":["_sfc_main","KanbanColumnHeader_vue_vue_type_script_setup_true_lang_default","KanbanColumnHeader_default"],"sources":["../../../src/components/kanban/KanbanColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanColumnSchema } from '@alfakit/core'\nimport { kanbanWipState } from '@alfakit/core'\nimport { ChevronsLeftRightIcon, ChevronsRightLeftIcon, PlusIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { cssColor } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{\n  column: KanbanColumnSchema\n  id: string\n  collapsed: boolean\n  creatable: boolean\n  filtered: boolean\n}>()\nconst emit = defineEmits<{ toggle: []; create: [] }>()\nconst t = useT()\n\nconst wip = computed(() => kanbanWipState(props.column))\nconst shown = computed(() =>\n  props.column.wipLimit !== undefined\n    ? props.column.count\n    : props.filtered\n      ? props.column.total\n      : props.column.count,\n)\nconst countLabel = computed(() => {\n  const column = props.column\n\n  if (column.wipLimit !== undefined) {\n    return t('kanban.wip', { count: column.count, limit: column.wipLimit }, ':count of :limit')\n  }\n\n  return props.filtered && column.total !== column.count\n    ? t(\n        'kanban.count_filtered',\n        { shown: column.total, count: column.count },\n        ':shown of :count cards',\n      )\n    : t('kanban.count', { count: column.count }, ':count cards')\n})\nconst style = computed(() =>\n  props.column.color ? { borderTopColor: cssColor(props.column.color) } : undefined,\n)\nconst toggleLabel = computed(() =>\n  props.collapsed\n    ? t('kanban.expand', { column: props.column.label }, 'Expand :column')\n    : t('kanban.collapse', { column: props.column.label }, 'Collapse :column'),\n)\nconst addLabel = computed(() =>\n  t('kanban.add_card', { column: props.column.label }, 'Add a card to :column'),\n)\n</script>\n\n<template>\n  <div\n    v-if=\"props.collapsed\"\n    class=\"bg-muted/60 flex snap-start flex-col items-center gap-2 rounded-lg border border-t-4 px-1 py-2\"\n    :style=\"style\"\n    data-slot=\"kanban-column-header\"\n    :data-column=\"props.column.key\"\n    data-collapsed=\"\"\n    :data-wip=\"wip ?? undefined\"\n  >\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      :aria-label=\"toggleLabel\"\n      :aria-expanded=\"false\"\n      @click=\"emit('toggle')\"\n    >\n      <ChevronsLeftRightIcon aria-hidden=\"true\" />\n    </Button>\n    <span class=\"text-muted-foreground text-xs tabular-nums\" :title=\"countLabel\">{{ shown }}</span>\n    <h3 :id=\"props.id\" class=\"text-sm font-medium [writing-mode:vertical-rl]\">\n      {{ props.column.label }}\n    </h3>\n  </div>\n  <div\n    v-else\n    class=\"bg-muted/60 flex snap-start flex-col gap-1 rounded-lg border border-t-4 px-3 py-2\"\n    :style=\"style\"\n    data-slot=\"kanban-column-header\"\n    :data-column=\"props.column.key\"\n    :data-wip=\"wip ?? undefined\"\n  >\n    <div class=\"flex items-center gap-2\">\n      <Icon\n        v-if=\"props.column.icon\"\n        :name=\"props.column.icon\"\n        class=\"text-muted-foreground size-4\"\n      />\n      <h3 :id=\"props.id\" class=\"min-w-0 truncate text-sm font-semibold\">\n        {{ props.column.label }}\n      </h3>\n      <Badge\n        variant=\"secondary\"\n        :class=\"\n          cn(\n            'h-5 px-1.5 tabular-nums',\n            wip === 'over' && 'bg-destructive/15 text-destructive',\n            wip === 'full' && 'bg-warning/15 text-warning',\n          )\n        \"\n        :title=\"countLabel\"\n      >\n        <span aria-hidden=\"true\">{{\n          props.column.wipLimit !== undefined\n            ? `${props.column.count}/${props.column.wipLimit}`\n            : shown\n        }}</span>\n        <span class=\"sr-only\">{{ countLabel }}</span>\n      </Badge>\n      <div class=\"ms-auto flex items-center\">\n        <Button\n          v-if=\"props.creatable\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          :aria-label=\"addLabel\"\n          :title=\"addLabel\"\n          @click=\"emit('create')\"\n        >\n          <PlusIcon aria-hidden=\"true\" />\n        </Button>\n        <Button\n          v-if=\"props.column.collapsible\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          :aria-label=\"toggleLabel\"\n          :title=\"toggleLabel\"\n          :aria-expanded=\"true\"\n          @click=\"emit('toggle')\"\n        >\n          <ChevronsRightLeftIcon aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </div>\n    <p v-if=\"props.column.description\" class=\"text-muted-foreground line-clamp-2 text-xs\">\n      {{ props.column.description }}\n    </p>\n    <p v-if=\"wip === 'over'\" class=\"text-destructive text-xs\">\n      {{\n        t(\n          'kanban.wip_over',\n          { limit: props.column.wipLimit ?? 0 },\n          'Over the limit of :limit cards',\n        )\n      }}\n    </p>\n    <p v-if=\"wip === 'full' && props.column.wipStrict\" class=\"text-muted-foreground text-xs\">\n      {{ t('kanban.wip_full', {}, 'This column is full') }}\n    </p>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/kanban/KanbanColumnHeader.vue.d.ts

@@ -0,0 +1,17 @@
+import type { KanbanColumnSchema } from '@alfakit/core';
+type __VLS_Props = {
+    column: KanbanColumnSchema;
+    id: string;
+    collapsed: boolean;
+    creatable: boolean;
+    filtered: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+    create: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+    onCreate?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=KanbanColumnHeader.vue.d.ts.map

package/dist/components/kanban/KanbanColumnHeader.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanColumnHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/kanban/KanbanColumnHeader.vue"],"names":[],"mappings":"AAmKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAWvD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,kBAAkB,CAAA;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAC;;;;;;;;AA8WF,wBAOG"}