@sparklingopinions/sparkling-ui 0.16.0 → 0.17.0

package/dist/components/Board/Board.js.map

@@ -1 +1 @@
-{"version":3,"file":"Board.js","names":["_sfc_main","Board_vue_vue_type_script_setup_true_lang_default","Board_default"],"sources":["../../../src/components/Board/Board.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, onBeforeUnmount, ref, useId } from 'vue'\n\nimport Icon from '../Icon/Icon.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { BoardColumn } from './types'\n\nexport interface BoardProps<T> {\n  columns: BoardColumn<T>[]\n  /** The item field that identifies it. */\n  rowKey?: keyof T & string\n  /** Cards also reorder within a column, for records that carry a position. */\n  sortable?: boolean\n  /** Columns run to the bottom of the parent and scroll inside it; give the parent a height. False sizes them to their cards. */\n  fill?: boolean\n  loading?: boolean\n  /** The columns' heading level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Draws each card's border, padding and surface. False when the `card` slot draws its own. */\n  cardFrame?: boolean\n  /** Makes a card a button that opens on click, Enter and Space (`@card-click`). Without it, the card slot carries its\n   *  own link or buttons. */\n  onCardClick?: (item: T) => void\n  /** Adds a dashed \"New\" button at the foot of each column, shown on hover (`@new`). */\n  onNew?: (column: BoardColumn<T>) => void\n  newLabel?: string\n  emptyLabel?: string\n  /** The columns' ground: a soft fill by default; `canvas` (the page's, with a hairline) or `sunken` match a Table's or\n   *  DataList's header tone, so the cards stand out on it. */\n  columnTone?: 'fill' | 'canvas' | 'sunken'\n}\n\nconst props = withDefaults(defineProps<BoardProps<T>>(), {\n  rowKey: 'id' as never,\n  fill: true,\n  headingLevel: 3,\n  cardFrame: true,\n  onCardClick: undefined,\n  onNew: undefined,\n  newLabel: 'New',\n  emptyLabel: 'No cards',\n  columnTone: 'fill'\n})\n\nconst emit = defineEmits<{\n  /** A card dropped into a column, at its new index there. Show it moved at once; put it back if saving fails. */\n  move: [id: unknown, column: string, index: number]\n}>()\n\ndefineSlots<{\n  /** A card's content; `item.name` as a title by default. */\n  card?: (props: { item: T; column: BoardColumn<T> }) => unknown\n  /** Replaces a column's count, e.g. its summed deal value. */\n  count?: (props: { column: BoardColumn<T> }) => unknown\n}>()\n\nconst id = useId()\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst root = ref<HTMLElement>()\n\nconst dragged = ref<{ id: unknown; column: string; index: number } | null>(null)\nconst target = ref<{ column: string; index: number } | null>(null)\n\n// Dragging runs on pointer events, so it works with a mouse, a pen and a finger. A mouse drags once it moves a few\n// pixels, so a click still clicks; a finger after a short press, so a swipe still scrolls.\nconst MOUSE_SLOP = 4\nconst TOUCH_SLOP = 8\nconst TOUCH_DELAY = 250\nconst EDGE = 48\n\nlet pending: {\n  item: T\n  column: string\n  index: number\n  x: number\n  y: number\n  card: HTMLElement\n  touch: boolean\n} | null = null\nlet pressTimer: number | undefined\nlet ghost: HTMLElement | null = null\nlet grab = { x: 0, y: 0 }\nlet justDragged = false\n\nfunction onPointerDown(event: PointerEvent, item: T, column: string, index: number) {\n  if (event.button !== 0 || (event.target as HTMLElement).closest('input, textarea, select, [contenteditable]')) return\n  const touch = event.pointerType === 'touch'\n  pending = { item, column, index, x: event.clientX, y: event.clientY, card: event.currentTarget as HTMLElement, touch }\n  if (touch) pressTimer = window.setTimeout(() => pending && start(), TOUCH_DELAY)\n  window.addEventListener('pointermove', onPointerMove)\n  window.addEventListener('pointerup', onPointerUp)\n  window.addEventListener('pointercancel', stop)\n  window.addEventListener('touchmove', holdScroll, { passive: false })\n  window.addEventListener('keydown', onEscape)\n}\n\nfunction start() {\n  if (!pending) return\n  const rect = pending.card.getBoundingClientRect()\n  grab = { x: pending.x - rect.left, y: pending.y - rect.top }\n  ghost = pending.card.cloneNode(true) as HTMLElement\n  ghost.removeAttribute('id')\n  ghost.setAttribute('aria-hidden', 'true')\n  ghost.classList.add('pointer-events-none', 'fixed', 'top-0', 'left-0', 'z-[1300]', 'shadow-lg', 'opacity-95')\n  ghost.style.width = `${rect.width}px`\n  document.body.appendChild(ghost)\n  follow(pending.x, pending.y)\n  dragged.value = { id: idOf(pending.item), column: pending.column, index: pending.index }\n}\n\nfunction onPointerMove(event: PointerEvent) {\n  if (!pending) return\n  if (!dragged.value) {\n    const moved = Math.hypot(event.clientX - pending.x, event.clientY - pending.y)\n    // A finger that moves before the press is long enough is scrolling.\n    if (pending.touch) return moved > TOUCH_SLOP ? stop() : undefined\n    if (moved < MOUSE_SLOP) return\n    start()\n  }\n  event.preventDefault()\n  follow(event.clientX, event.clientY)\n  aim(event.clientX, event.clientY)\n  scrollNear(event.clientX, event.clientY)\n}\n\nfunction follow(x: number, y: number) {\n  if (ghost) ghost.style.transform = `translate(${x - grab.x}px, ${y - grab.y}px) rotate(1.5deg)`\n}\n\n// What's under the pointer: a card's top half drops before it, the bottom half after; an empty spot, at the end.\nfunction aim(x: number, y: number) {\n  const under = document.elementFromPoint(x, y)\n  const body = under?.closest<HTMLElement>('[data-board-column]')\n  if (!body || !root.value?.contains(body)) {\n    target.value = null\n    return\n  }\n  const column = body.dataset.boardColumn!\n  const card = under!.closest<HTMLElement>('[data-board-index]')\n  let index = props.columns.find((c) => c.id === column)?.items.length ?? 0\n  if (card && body.contains(card)) {\n    const rect = card.getBoundingClientRect()\n    index = Number(card.dataset.boardIndex) + (y < rect.top + rect.height / 2 ? 0 : 1)\n  }\n  if (target.value?.column !== column || target.value.index !== index) target.value = { column, index }\n}\n\n// Near a column's top or bottom, or the board's sides, it scrolls that way.\nfunction scrollNear(x: number, y: number) {\n  const body = document.elementFromPoint(x, y)?.closest<HTMLElement>('[data-board-column]')\n  if (body) {\n    const rect = body.getBoundingClientRect()\n    if (y < rect.top + EDGE) body.scrollTop -= 12\n    else if (y > rect.bottom - EDGE) body.scrollTop += 12\n  }\n  const board = root.value?.getBoundingClientRect()\n  if (board && root.value) {\n    if (x < board.left + EDGE) root.value.scrollLeft -= 12\n    else if (x > board.right - EDGE) root.value.scrollLeft += 12\n  }\n}\n\nfunction onPointerUp() {\n  const from = dragged.value\n  const to = target.value\n  if (from && to) {\n    let index = to.index\n    if (from.column === to.column) {\n      // Within a column the dragged card leaves its old slot first.\n      if (index > from.index) index--\n      if (props.sortable && index !== from.index) emit('move', from.id, to.column, index)\n    } else {\n      emit('move', from.id, to.column, index)\n    }\n  }\n  stop()\n}\n\nfunction holdScroll(event: TouchEvent) {\n  if (dragged.value) event.preventDefault()\n}\n\nfunction onEscape(event: KeyboardEvent) {\n  if (event.key === 'Escape' && dragged.value) {\n    event.preventDefault()\n    stop()\n  }\n}\n\nfunction stop() {\n  window.clearTimeout(pressTimer)\n  window.removeEventListener('pointermove', onPointerMove)\n  window.removeEventListener('pointerup', onPointerUp)\n  window.removeEventListener('pointercancel', stop)\n  window.removeEventListener('touchmove', holdScroll)\n  window.removeEventListener('keydown', onEscape)\n  ghost?.remove()\n  ghost = null\n  // The click that ends a drag isn't a click on the card.\n  if (dragged.value) {\n    justDragged = true\n    window.setTimeout(() => (justDragged = false))\n  }\n  pending = null\n  dragged.value = null\n  target.value = null\n}\n\nonBeforeUnmount(stop)\n\nfunction clickCard(event: MouseEvent, item: T) {\n  if (justDragged) {\n    event.preventDefault()\n    event.stopPropagation()\n    return\n  }\n  props.onCardClick?.(item)\n}\n\nfunction onCardKeydown(event: KeyboardEvent, item: T) {\n  if (!props.onCardClick || event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return\n  event.preventDefault()\n  props.onCardClick(item)\n}\n\nconst grounds = { fill: 'bg-sui-fill', canvas: 'border border-sui-line-subtle bg-sui-canvas', sunken: 'sui-band' }\nconst columnGround = computed(() => grounds[props.columnTone])\n\nconst isTarget = (column: string, index: number, item: T) =>\n  target.value?.column === column && target.value.index === index && dragged.value?.id !== idOf(item)\n\nconst frame =\n  'border border-sui-edge bg-sui-raised p-4 transition-[border-color,opacity] duration-150 hover:border-sui-line-strong'\n</script>\n\n<!-- A board: cards in columns by a field (a stage, a status), dragged between columns. -->\n<template>\n  <div\n    ref=\"root\"\n    class=\"flex items-stretch gap-5 overflow-x-auto pb-2 after:w-1 after:shrink-0 after:content-['']\"\n    :class=\"fill && 'h-full min-h-0 flex-1'\"\n  >\n    <section\n      v-for=\"column in columns\"\n      :key=\"column.id\"\n      :aria-labelledby=\"`${id}-${column.id}`\"\n      class=\"flex min-h-0 w-full max-w-xs min-w-[16rem] shrink-0 flex-col\"\n    >\n      <header class=\"flex items-center justify-between px-1 pb-2.5\">\n        <component\n          :is=\"`h${headingLevel}`\"\n          :id=\"`${id}-${column.id}`\"\n          class=\"m-0 flex items-center gap-2 text-sm font-semibold text-sui-ink\"\n        >\n          <Icon v-if=\"column.icon\" :color=\"column.iconColor ?? 'ink-subtle'\" :name=\"column.icon\" />\n          {{ column.name }}\n        </component>\n        <span\n          class=\"ml-2 inline-flex h-5 items-center justify-center rounded-full bg-sui-fill px-2 text-xs text-sui-ink-muted tabular-nums\"\n        >\n          <slot :column=\"column\" name=\"count\">{{ column.items.length }}</slot>\n        </span>\n      </header>\n      <div\n        class=\"group/body flex min-h-[120px] flex-1 flex-col gap-2.5 overflow-y-auto rounded-xl p-2.5 transition-shadow duration-150\"\n        :class=\"[columnGround, target?.column === column.id && 'ring-2 ring-sui-accent-line ring-inset']\"\n        :data-board-column=\"column.id\"\n      >\n        <template v-if=\"loading\">\n          <div v-for=\"i in 3\" :key=\"i\" aria-hidden=\"true\" class=\"rounded-xl border border-sui-edge bg-sui-raised p-4\">\n            <Skeleton class=\"mb-3\" />\n            <Skeleton height=\"0.75rem\" width=\"70%\" />\n          </div>\n        </template>\n        <p\n          v-else-if=\"column.items.length === 0 && !dragged\"\n          class=\"m-0 px-1 py-3 text-center text-13 text-sui-ink-muted\"\n        >\n          {{ emptyLabel }}\n        </p>\n        <ul v-else class=\"m-0 flex list-none flex-col gap-2.5 p-0\">\n          <li v-for=\"(item, index) in column.items\" :key=\"idOf(item) as PropertyKey\">\n            <div\n              class=\"relative rounded-xl outline-hidden transition-opacity duration-150 select-none\"\n              :class=\"[\n                cardFrame && frame,\n                onCardClick && 'cursor-pointer focus-visible:sui-ring',\n                dragged?.id === idOf(item) && 'opacity-40',\n                isTarget(column.id, index, item) && 'shadow-[0_-6px_0_-4px_rgb(var(--sui-accent-solid))]'\n              ]\"\n              :data-board-index=\"index\"\n              :role=\"onCardClick ? 'button' : undefined\"\n              :tabindex=\"onCardClick ? 0 : undefined\"\n              @click.capture=\"clickCard($event, item)\"\n              @contextmenu=\"dragged && $event.preventDefault()\"\n              @dragstart.prevent\n              @keydown=\"onCardKeydown($event, item)\"\n              @pointerdown=\"onPointerDown($event, item, column.id, index)\"\n            >\n              <slot :column=\"column\" :item=\"item\" name=\"card\">\n                <p class=\"m-0 text-sm font-semibold text-sui-ink\">{{ item.name }}</p>\n              </slot>\n            </div>\n          </li>\n        </ul>\n        <button\n          v-if=\"onNew && !loading\"\n          class=\"flex h-(--sui-control-height) w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong text-xs font-medium text-sui-ink-muted opacity-0 outline-hidden transition-all duration-150 group-hover/body:opacity-100 hover:border-sui-ink-muted hover:bg-sui-surface/60 hover:text-sui-ink-body focus-visible:opacity-100 focus-visible:sui-ring\"\n          type=\"button\"\n          @click=\"onNew(column)\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-3.5 fill-none stroke-current\"\n            stroke-linecap=\"round\"\n            stroke-width=\"1.5\"\n            viewBox=\"0 0 14 14\"\n          >\n            <path d=\"M7 2.5v9M2.5 7h9\" />\n          </svg>\n          {{ newLabel }}\n        </button>\n      </div>\n    </section>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Board.js","names":["_sfc_main","Board_vue_vue_type_script_setup_true_lang_default","Board_default"],"sources":["../../../src/components/Board/Board.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, ref, useId } from 'vue'\n\nimport Icon from '../Icon/Icon.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport { useDragMove } from '../internal/useDragMove'\nimport type { BoardColumn } from './types'\n\nexport interface BoardProps<T> {\n  columns: BoardColumn<T>[]\n  /** The item field that identifies it. */\n  rowKey?: keyof T & string\n  /** Cards also reorder within a column, for records that carry a position. */\n  sortable?: boolean\n  /** Columns run to the bottom of the parent and scroll inside it; give the parent a height. False sizes them to their cards. */\n  fill?: boolean\n  loading?: boolean\n  /** The columns' heading level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Draws each card's border, padding and surface. False when the `card` slot draws its own. */\n  cardFrame?: boolean\n  /** Makes a card a button that opens on click, Enter and Space (`@card-click`). Without it, the card slot carries its\n   *  own link or buttons. */\n  onCardClick?: (item: T) => void\n  /** Adds a dashed \"New\" button at the foot of each column, shown on hover (`@new`). */\n  onNew?: (column: BoardColumn<T>) => void\n  newLabel?: string\n  emptyLabel?: string\n  /** The columns' ground: a soft fill by default; `canvas` (the page's, with a hairline) or `sunken` match a Table's or\n   *  DataList's header tone, so the cards stand out on it. */\n  columnTone?: 'fill' | 'canvas' | 'sunken'\n}\n\nconst props = withDefaults(defineProps<BoardProps<T>>(), {\n  rowKey: 'id' as never,\n  fill: true,\n  headingLevel: 3,\n  cardFrame: true,\n  onCardClick: undefined,\n  onNew: undefined,\n  newLabel: 'New',\n  emptyLabel: 'No cards',\n  columnTone: 'fill'\n})\n\nconst emit = defineEmits<{\n  /** A card dropped into a column, at its new index there. Show it moved at once; put it back if saving fails. */\n  move: [id: unknown, column: string, index: number]\n}>()\n\ndefineSlots<{\n  /** A card's content; `item.name` as a title by default. */\n  card?: (props: { item: T; column: BoardColumn<T> }) => unknown\n  /** Replaces a column's count, e.g. its summed deal value. */\n  count?: (props: { column: BoardColumn<T> }) => unknown\n}>()\n\nconst id = useId()\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst root = ref<HTMLElement>()\n\nconst { dragged, target, onPointerDown, endedDrag } = useDragMove({\n  root,\n  countOf: (column) => props.columns.find((c) => c.id === column)?.items.length ?? 0,\n  sortable: () => props.sortable,\n  onMove: (id, column, index) => emit('move', id, column, index)\n})\n\nfunction clickCard(event: MouseEvent, item: T) {\n  if (endedDrag()) {\n    event.preventDefault()\n    event.stopPropagation()\n    return\n  }\n  props.onCardClick?.(item)\n}\n\nfunction onCardKeydown(event: KeyboardEvent, item: T) {\n  if (!props.onCardClick || event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return\n  event.preventDefault()\n  props.onCardClick(item)\n}\n\nconst grounds = { fill: 'bg-sui-fill', canvas: 'border border-sui-line-subtle bg-sui-canvas', sunken: 'sui-band' }\nconst columnGround = computed(() => grounds[props.columnTone])\n\nconst isTarget = (column: string, index: number, item: T) =>\n  target.value?.zone === column && target.value.index === index && dragged.value?.id !== idOf(item)\n// Past a column's last card, or into an empty one.\nconst dropsAtEnd = (column: BoardColumn<T>) =>\n  target.value?.zone === column.id &&\n  target.value.index >= column.items.length &&\n  !(dragged.value?.zone === column.id && dragged.value.index === column.items.length - 1)\n\nconst frame =\n  'border border-sui-edge bg-sui-raised p-4 transition-[border-color,opacity] duration-150 hover:border-sui-line-strong'\n</script>\n\n<!-- A board: cards in columns by a field (a stage, a status), dragged between columns. -->\n<template>\n  <div\n    ref=\"root\"\n    class=\"flex items-stretch gap-5 overflow-x-auto pb-2 after:w-1 after:shrink-0 after:content-['']\"\n    :class=\"fill && 'h-full min-h-0 flex-1'\"\n  >\n    <section\n      v-for=\"column in columns\"\n      :key=\"column.id\"\n      :aria-labelledby=\"`${id}-${column.id}`\"\n      class=\"flex min-h-0 w-full max-w-xs min-w-[16rem] shrink-0 flex-col\"\n    >\n      <header class=\"flex items-center justify-between px-1 pb-2.5\">\n        <component\n          :is=\"`h${headingLevel}`\"\n          :id=\"`${id}-${column.id}`\"\n          class=\"m-0 flex items-center gap-2 text-sm font-semibold text-sui-ink\"\n        >\n          <Icon v-if=\"column.icon\" :color=\"column.iconColor ?? 'ink-subtle'\" :name=\"column.icon\" />\n          {{ column.name }}\n        </component>\n        <span\n          class=\"ml-2 inline-flex h-5 items-center justify-center rounded-full bg-sui-fill px-2 text-xs text-sui-ink-muted tabular-nums\"\n        >\n          <slot :column=\"column\" name=\"count\">{{ column.items.length }}</slot>\n        </span>\n      </header>\n      <div\n        class=\"group/body flex min-h-[120px] flex-1 flex-col gap-2.5 overflow-y-auto rounded-xl p-2.5 transition-shadow duration-150\"\n        :class=\"[columnGround, target?.zone === column.id && 'ring-2 ring-sui-accent-line ring-inset']\"\n        :data-board-column=\"column.id\"\n        :data-drag-zone=\"column.id\"\n      >\n        <template v-if=\"loading\">\n          <div v-for=\"i in 3\" :key=\"i\" aria-hidden=\"true\" class=\"rounded-xl border border-sui-edge bg-sui-raised p-4\">\n            <Skeleton class=\"mb-3\" />\n            <Skeleton height=\"0.75rem\" width=\"70%\" />\n          </div>\n        </template>\n        <p\n          v-else-if=\"column.items.length === 0 && !dragged\"\n          class=\"m-0 px-1 py-3 text-center text-13 text-sui-ink-muted\"\n        >\n          {{ emptyLabel }}\n        </p>\n        <ul v-else class=\"m-0 flex list-none flex-col gap-2.5 p-0\">\n          <li v-for=\"(item, index) in column.items\" :key=\"idOf(item) as PropertyKey\">\n            <div\n              class=\"relative rounded-xl outline-hidden transition-opacity duration-150 select-none\"\n              :class=\"[\n                cardFrame && frame,\n                onCardClick && 'cursor-pointer focus-visible:sui-ring',\n                dragged?.id === idOf(item) && 'opacity-40',\n                isTarget(column.id, index, item) && 'shadow-[0_-6px_0_-4px_rgb(var(--sui-accent-solid))]'\n              ]\"\n              :data-board-index=\"index\"\n              :data-drag-index=\"index\"\n              :role=\"onCardClick ? 'button' : undefined\"\n              :tabindex=\"onCardClick ? 0 : undefined\"\n              @click.capture=\"clickCard($event, item)\"\n              @contextmenu=\"dragged && $event.preventDefault()\"\n              @dragstart.prevent\n              @keydown=\"onCardKeydown($event, item)\"\n              @pointerdown=\"onPointerDown($event, idOf(item), column.id, index)\"\n            >\n              <slot :column=\"column\" :item=\"item\" name=\"card\">\n                <p class=\"m-0 text-sm font-semibold text-sui-ink\">{{ item.name }}</p>\n              </slot>\n            </div>\n          </li>\n        </ul>\n        <!-- Where a card dropped past the last one lands. -->\n        <div\n          v-if=\"dragged && dropsAtEnd(column)\"\n          aria-hidden=\"true\"\n          class=\"h-1 shrink-0 rounded-full bg-sui-accent-solid\"\n        />\n        <button\n          v-if=\"onNew && !loading && !dragged\"\n          class=\"flex h-(--sui-control-height) w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong text-xs font-medium text-sui-ink-muted opacity-0 outline-hidden transition-all duration-150 group-hover/body:opacity-100 hover:border-sui-ink-muted hover:bg-sui-surface/60 hover:text-sui-ink-body focus-visible:opacity-100 focus-visible:sui-ring\"\n          type=\"button\"\n          @click=\"onNew(column)\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-3.5 fill-none stroke-current\"\n            stroke-linecap=\"round\"\n            stroke-width=\"1.5\"\n            viewBox=\"0 0 14 14\"\n          >\n            <path d=\"M7 2.5v9M2.5 7h9\" />\n          </svg>\n          {{ newLabel }}\n        </button>\n      </div>\n    </section>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/Board/Board.vue_vue_type_script_setup_true_lang.js

@@ -1,21 +1,27 @@
 import e from "../Icon/Icon.js";
 import t from "../Skeleton/Skeleton.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, onBeforeUnmount as f, openBlock as p, ref as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useId as ee, withCtx as te, withModifiers as ne } from "vue";
+import { useDragMove as n } from "../internal/useDragMove.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, ref as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useId as b, withCtx as x, withModifiers as S } from "vue";
 //#region src/components/Board/Board.vue?vue&type=script&setup=true&lang.ts
-var re = ["aria-labelledby"], b = { class: "flex items-center justify-between px-1 pb-2.5" }, x = { class: "ml-2 inline-flex h-5 items-center justify-center rounded-full bg-sui-fill px-2 text-xs text-sui-ink-muted tabular-nums" }, S = ["data-board-column"], C = {
+var C = ["aria-labelledby"], w = { class: "flex items-center justify-between px-1 pb-2.5" }, T = { class: "ml-2 inline-flex h-5 items-center justify-center rounded-full bg-sui-fill px-2 text-xs text-sui-ink-muted tabular-nums" }, E = ["data-board-column", "data-drag-zone"], D = {
 	key: 1,
 	class: "m-0 px-1 py-3 text-center text-13 text-sui-ink-muted"
-}, w = {
+}, O = {
 	key: 2,
 	class: "m-0 flex list-none flex-col gap-2.5 p-0"
-}, T = [
+}, k = [
 	"data-board-index",
+	"data-drag-index",
 	"role",
 	"tabindex",
 	"onClickCapture",
 	"onKeydown",
 	"onPointerdown"
-], E = { class: "m-0 text-sm font-semibold text-sui-ink" }, D = ["onClick"], O = 4, k = 8, A = 250, j = 48, ie = "border border-sui-edge bg-sui-raised p-4 transition-[border-color,opacity] duration-150 hover:border-sui-line-strong", M = /*@__PURE__*/ u({
+], A = { class: "m-0 text-sm font-semibold text-sui-ink" }, j = {
+	key: 3,
+	"aria-hidden": "true",
+	class: "h-1 shrink-0 rounded-full bg-sui-accent-solid"
+}, M = ["onClick"], N = "border border-sui-edge bg-sui-raised p-4 transition-[border-color,opacity] duration-150 hover:border-sui-line-strong", P = /*@__PURE__*/ d({
 	__name: "Board",
 	props: {
 		columns: {},
@@ -44,165 +50,91 @@ var re = ["aria-labelledby"], b = { class: "flex items-center justify-between px
 		columnTone: { default: "fill" }
 	},
 	emits: ["move"],
-	setup(u, { emit: M }) {
-		let N = u, P = M, F = ee(), I = (e) => e[N.rowKey ?? "id"], L = m(), R = m(null), z = m(null), B = null, V, H = null, U = {
-			x: 0,
-			y: 0
-		}, W = !1;
-		function G(e, t, n, r) {
-			if (e.button !== 0 || e.target.closest("input, textarea, select, [contenteditable]")) return;
-			let i = e.pointerType === "touch";
-			B = {
-				item: t,
-				column: n,
-				index: r,
-				x: e.clientX,
-				y: e.clientY,
-				card: e.currentTarget,
-				touch: i
-			}, i && (V = window.setTimeout(() => B && K(), A)), window.addEventListener("pointermove", q), window.addEventListener("pointerup", Y), window.addEventListener("pointercancel", Q), window.addEventListener("touchmove", X, { passive: !1 }), window.addEventListener("keydown", Z);
+	setup(d, { emit: P }) {
+		let F = d, I = P, L = b(), R = (e) => e[F.rowKey ?? "id"], z = m(), { dragged: B, target: V, onPointerDown: H, endedDrag: U } = n({
+			root: z,
+			countOf: (e) => F.columns.find((t) => t.id === e)?.items.length ?? 0,
+			sortable: () => F.sortable,
+			onMove: (e, t, n) => I("move", e, t, n)
+		});
+		function W(e, t) {
+			U() ? (e.preventDefault(), e.stopPropagation()) : F.onCardClick?.(t);
 		}
-		function K() {
-			if (!B) return;
-			let e = B.card.getBoundingClientRect();
-			U = {
-				x: B.x - e.left,
-				y: B.y - e.top
-			}, H = B.card.cloneNode(!0), H.removeAttribute("id"), H.setAttribute("aria-hidden", "true"), H.classList.add("pointer-events-none", "fixed", "top-0", "left-0", "z-[1300]", "shadow-lg", "opacity-95"), H.style.width = `${e.width}px`, document.body.appendChild(H), J(B.x, B.y), R.value = {
-				id: I(B.item),
-				column: B.column,
-				index: B.index
-			};
+		function G(e, t) {
+			!F.onCardClick || e.target !== e.currentTarget || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), F.onCardClick(t));
 		}
-		function q(e) {
-			if (B) {
-				if (!R.value) {
-					let t = Math.hypot(e.clientX - B.x, e.clientY - B.y);
-					if (B.touch) return t > k ? Q() : void 0;
-					if (t < O) return;
-					K();
-				}
-				e.preventDefault(), J(e.clientX, e.clientY), ae(e.clientX, e.clientY), oe(e.clientX, e.clientY);
-			}
-		}
-		function J(e, t) {
-			H && (H.style.transform = `translate(${e - U.x}px, ${t - U.y}px) rotate(1.5deg)`);
-		}
-		function ae(e, t) {
-			let n = document.elementFromPoint(e, t), r = n?.closest("[data-board-column]");
-			if (!r || !L.value?.contains(r)) {
-				z.value = null;
-				return;
-			}
-			let i = r.dataset.boardColumn, a = n.closest("[data-board-index]"), o = N.columns.find((e) => e.id === i)?.items.length ?? 0;
-			if (a && r.contains(a)) {
-				let e = a.getBoundingClientRect();
-				o = Number(a.dataset.boardIndex) + (t < e.top + e.height / 2 ? 0 : 1);
-			}
-			(z.value?.column !== i || z.value.index !== o) && (z.value = {
-				column: i,
-				index: o
-			});
-		}
-		function oe(e, t) {
-			let n = document.elementFromPoint(e, t)?.closest("[data-board-column]");
-			if (n) {
-				let e = n.getBoundingClientRect();
-				t < e.top + j ? n.scrollTop -= 12 : t > e.bottom - j && (n.scrollTop += 12);
-			}
-			let r = L.value?.getBoundingClientRect();
-			r && L.value && (e < r.left + j ? L.value.scrollLeft -= 12 : e > r.right - j && (L.value.scrollLeft += 12));
-		}
-		function Y() {
-			let e = R.value, t = z.value;
-			if (e && t) {
-				let n = t.index;
-				e.column === t.column ? (n > e.index && n--, N.sortable && n !== e.index && P("move", e.id, t.column, n)) : P("move", e.id, t.column, n);
-			}
-			Q();
-		}
-		function X(e) {
-			R.value && e.preventDefault();
-		}
-		function Z(e) {
-			e.key === "Escape" && R.value && (e.preventDefault(), Q());
-		}
-		function Q() {
-			window.clearTimeout(V), window.removeEventListener("pointermove", q), window.removeEventListener("pointerup", Y), window.removeEventListener("pointercancel", Q), window.removeEventListener("touchmove", X), window.removeEventListener("keydown", Z), H?.remove(), H = null, R.value && (W = !0, window.setTimeout(() => W = !1)), B = null, R.value = null, z.value = null;
-		}
-		f(Q);
-		function se(e, t) {
-			W ? (e.preventDefault(), e.stopPropagation()) : N.onCardClick?.(t);
-		}
-		function ce(e, t) {
-			!N.onCardClick || e.target !== e.currentTarget || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), N.onCardClick(t));
-		}
-		let le = {
+		let K = {
 			fill: "bg-sui-fill",
 			canvas: "border border-sui-line-subtle bg-sui-canvas",
 			sunken: "sui-band"
-		}, $ = r(() => le[N.columnTone]), ue = (e, t, n) => z.value?.column === e && z.value.index === t && R.value?.id !== I(n);
-		return (r, f) => (p(), o("div", {
+		}, q = i(() => K[F.columnTone]), J = (e, t, n) => V.value?.zone === e && V.value.index === t && B.value?.id !== R(n), Y = (e) => V.value?.zone === e.id && V.value.index >= e.items.length && (B.value?.zone !== e.id || B.value.index !== e.items.length - 1);
+		return (n, i) => (p(), s("div", {
 			ref_key: "root",
-			ref: L,
-			class: d(["flex items-stretch gap-5 overflow-x-auto pb-2 after:w-1 after:shrink-0 after:content-['']", u.fill && "h-full min-h-0 flex-1"])
-		}, [(p(!0), o(n, null, h(u.columns, (m) => (p(), o("section", {
+			ref: z,
+			class: f(["flex items-stretch gap-5 overflow-x-auto pb-2 after:w-1 after:shrink-0 after:content-['']", d.fill && "h-full min-h-0 flex-1"])
+		}, [(p(!0), s(r, null, h(d.columns, (m) => (p(), s("section", {
 			key: m.id,
-			"aria-labelledby": `${y(F)}-${m.id}`,
+			"aria-labelledby": `${y(L)}-${m.id}`,
 			class: "flex min-h-0 w-full max-w-xs min-w-[16rem] shrink-0 flex-col"
-		}, [s("header", b, [(p(), i(_(`h${u.headingLevel}`), {
-			id: `${y(F)}-${m.id}`,
+		}, [c("header", w, [(p(), a(_(`h${d.headingLevel}`), {
+			id: `${y(L)}-${m.id}`,
 			class: "m-0 flex items-center gap-2 text-sm font-semibold text-sui-ink"
 		}, {
-			default: te(() => [m.icon ? (p(), i(e, {
+			default: x(() => [m.icon ? (p(), a(e, {
 				key: 0,
 				color: m.iconColor ?? "ink-subtle",
 				name: m.icon
-			}, null, 8, ["color", "name"])) : a("", !0), c(" " + v(m.name), 1)]),
+			}, null, 8, ["color", "name"])) : o("", !0), l(" " + v(m.name), 1)]),
 			_: 2
-		}, 1032, ["id"])), s("span", x, [g(r.$slots, "count", { column: m }, () => [c(v(m.items.length), 1)])])]), s("div", {
-			class: d(["group/body flex min-h-[120px] flex-1 flex-col gap-2.5 overflow-y-auto rounded-xl p-2.5 transition-shadow duration-150", [$.value, z.value?.column === m.id && "ring-2 ring-sui-accent-line ring-inset"]]),
-			"data-board-column": m.id
-		}, [u.loading ? (p(), o(n, { key: 0 }, h(3, (e) => s("div", {
-			key: e,
-			"aria-hidden": "true",
-			class: "rounded-xl border border-sui-edge bg-sui-raised p-4"
-		}, [l(t, { class: "mb-3" }), l(t, {
-			height: "0.75rem",
-			width: "70%"
-		})])), 64)) : m.items.length === 0 && !R.value ? (p(), o("p", C, v(u.emptyLabel), 1)) : (p(), o("ul", w, [(p(!0), o(n, null, h(m.items, (e, t) => (p(), o("li", { key: I(e) }, [s("div", {
-			class: d(["relative rounded-xl outline-hidden transition-opacity duration-150 select-none", [
-				u.cardFrame && ie,
-				u.onCardClick && "cursor-pointer focus-visible:sui-ring",
-				R.value?.id === I(e) && "opacity-40",
-				ue(m.id, t, e) && "shadow-[0_-6px_0_-4px_rgb(var(--sui-accent-solid))]"
-			]]),
-			"data-board-index": t,
-			role: u.onCardClick ? "button" : void 0,
-			tabindex: u.onCardClick ? 0 : void 0,
-			onClickCapture: (t) => se(t, e),
-			onContextmenu: f[0] ||= (e) => R.value && e.preventDefault(),
-			onDragstart: f[1] ||= ne(() => {}, ["prevent"]),
-			onKeydown: (t) => ce(t, e),
-			onPointerdown: (n) => G(n, e, m.id, t)
-		}, [g(r.$slots, "card", {
-			column: m,
-			item: e
-		}, () => [s("p", E, v(e.name), 1)])], 42, T)]))), 128))])), u.onNew && !u.loading ? (p(), o("button", {
-			key: 3,
-			class: "flex h-(--sui-control-height) w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong text-xs font-medium text-sui-ink-muted opacity-0 outline-hidden transition-all duration-150 group-hover/body:opacity-100 hover:border-sui-ink-muted hover:bg-sui-surface/60 hover:text-sui-ink-body focus-visible:opacity-100 focus-visible:sui-ring",
-			type: "button",
-			onClick: (e) => u.onNew(m)
-		}, [f[2] ||= s("svg", {
-			"aria-hidden": "true",
-			class: "size-3.5 fill-none stroke-current",
-			"stroke-linecap": "round",
-			"stroke-width": "1.5",
-			viewBox: "0 0 14 14"
-		}, [s("path", { d: "M7 2.5v9M2.5 7h9" })], -1), c(" " + v(u.newLabel), 1)], 8, D)) : a("", !0)], 10, S)], 8, re))), 128))], 2));
+		}, 1032, ["id"])), c("span", T, [g(n.$slots, "count", { column: m }, () => [l(v(m.items.length), 1)])])]), c("div", {
+			class: f(["group/body flex min-h-[120px] flex-1 flex-col gap-2.5 overflow-y-auto rounded-xl p-2.5 transition-shadow duration-150", [q.value, y(V)?.zone === m.id && "ring-2 ring-sui-accent-line ring-inset"]]),
+			"data-board-column": m.id,
+			"data-drag-zone": m.id
+		}, [
+			d.loading ? (p(), s(r, { key: 0 }, h(3, (e) => c("div", {
+				key: e,
+				"aria-hidden": "true",
+				class: "rounded-xl border border-sui-edge bg-sui-raised p-4"
+			}, [u(t, { class: "mb-3" }), u(t, {
+				height: "0.75rem",
+				width: "70%"
+			})])), 64)) : m.items.length === 0 && !y(B) ? (p(), s("p", D, v(d.emptyLabel), 1)) : (p(), s("ul", O, [(p(!0), s(r, null, h(m.items, (e, t) => (p(), s("li", { key: R(e) }, [c("div", {
+				class: f(["relative rounded-xl outline-hidden transition-opacity duration-150 select-none", [
+					d.cardFrame && N,
+					d.onCardClick && "cursor-pointer focus-visible:sui-ring",
+					y(B)?.id === R(e) && "opacity-40",
+					J(m.id, t, e) && "shadow-[0_-6px_0_-4px_rgb(var(--sui-accent-solid))]"
+				]]),
+				"data-board-index": t,
+				"data-drag-index": t,
+				role: d.onCardClick ? "button" : void 0,
+				tabindex: d.onCardClick ? 0 : void 0,
+				onClickCapture: (t) => W(t, e),
+				onContextmenu: i[0] ||= (e) => y(B) && e.preventDefault(),
+				onDragstart: i[1] ||= S(() => {}, ["prevent"]),
+				onKeydown: (t) => G(t, e),
+				onPointerdown: (n) => y(H)(n, R(e), m.id, t)
+			}, [g(n.$slots, "card", {
+				column: m,
+				item: e
+			}, () => [c("p", A, v(e.name), 1)])], 42, k)]))), 128))])),
+			y(B) && Y(m) ? (p(), s("div", j)) : o("", !0),
+			d.onNew && !d.loading && !y(B) ? (p(), s("button", {
+				key: 4,
+				class: "flex h-(--sui-control-height) w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong text-xs font-medium text-sui-ink-muted opacity-0 outline-hidden transition-all duration-150 group-hover/body:opacity-100 hover:border-sui-ink-muted hover:bg-sui-surface/60 hover:text-sui-ink-body focus-visible:opacity-100 focus-visible:sui-ring",
+				type: "button",
+				onClick: (e) => d.onNew(m)
+			}, [i[2] ||= c("svg", {
+				"aria-hidden": "true",
+				class: "size-3.5 fill-none stroke-current",
+				"stroke-linecap": "round",
+				"stroke-width": "1.5",
+				viewBox: "0 0 14 14"
+			}, [c("path", { d: "M7 2.5v9M2.5 7h9" })], -1), l(" " + v(d.newLabel), 1)], 8, M)) : o("", !0)
+		], 10, E)], 8, C))), 128))], 2));
 	}
 });
 //#endregion
-export { M as default };
+export { P as default };
 
 //# sourceMappingURL=Board.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Board/Board.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Board.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_Fragment","_renderList","_unref","_createElementVNode","_createBlock","_resolveDynamicComponent","_withCtx","Icon","_createCommentVNode","_createTextVNode","_toDisplayString","_renderSlot","_createVNode","Skeleton","_withModifiers","Icon_default","Skeleton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","MOUSE_SLOP","TOUCH_SLOP","TOUCH_DELAY","EDGE","frame","Board_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","id","useId","idOf","item","root","ref","dragged","target","pending","pressTimer","ghost","grab","justDragged","onPointerDown","event","touch","start","onPointerMove","onPointerUp","stop","holdScroll","onEscape","rect","follow","moved","aim","scrollNear","x","y","under","body","column","card","index","c","board","from","to","clickCard","onCardKeydown","grounds","columnGround","computed","isTarget","openBlock","createElementBlock","normalizeClass","Fragment","renderList","unref","createElementVNode","createBlock","resolveDynamicComponent","withCtx","createCommentVNode","createTextVNode","toDisplayString","renderSlot","_ctx","i","createVNode","$event","_cache","withModifiers"],"sources":["../../../src/components/Board/Board.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, onBeforeUnmount, ref, useId } from 'vue'\n\nimport Icon from '../Icon/Icon.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { BoardColumn } from './types'\n\nexport interface BoardProps<T> {\n  columns: BoardColumn<T>[]\n  /** The item field that identifies it. */\n  rowKey?: keyof T & string\n  /** Cards also reorder within a column, for records that carry a position. */\n  sortable?: boolean\n  /** Columns run to the bottom of the parent and scroll inside it; give the parent a height. False sizes them to their cards. */\n  fill?: boolean\n  loading?: boolean\n  /** The columns' heading level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Draws each card's border, padding and surface. False when the `card` slot draws its own. */\n  cardFrame?: boolean\n  /** Makes a card a button that opens on click, Enter and Space (`@card-click`). Without it, the card slot carries its\n   *  own link or buttons. */\n  onCardClick?: (item: T) => void\n  /** Adds a dashed \"New\" button at the foot of each column, shown on hover (`@new`). */\n  onNew?: (column: BoardColumn<T>) => void\n  newLabel?: string\n  emptyLabel?: string\n  /** The columns' ground: a soft fill by default; `canvas` (the page's, with a hairline) or `sunken` match a Table's or\n   *  DataList's header tone, so the cards stand out on it. */\n  columnTone?: 'fill' | 'canvas' | 'sunken'\n}\n\nconst props = withDefaults(defineProps<BoardProps<T>>(), {\n  rowKey: 'id' as never,\n  fill: true,\n  headingLevel: 3,\n  cardFrame: true,\n  onCardClick: undefined,\n  onNew: undefined,\n  newLabel: 'New',\n  emptyLabel: 'No cards',\n  columnTone: 'fill'\n})\n\nconst emit = defineEmits<{\n  /** A card dropped into a column, at its new index there. Show it moved at once; put it back if saving fails. */\n  move: [id: unknown, column: string, index: number]\n}>()\n\ndefineSlots<{\n  /** A card's content; `item.name` as a title by default. */\n  card?: (props: { item: T; column: BoardColumn<T> }) => unknown\n  /** Replaces a column's count, e.g. its summed deal value. */\n  count?: (props: { column: BoardColumn<T> }) => unknown\n}>()\n\nconst id = useId()\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst root = ref<HTMLElement>()\n\nconst dragged = ref<{ id: unknown; column: string; index: number } | null>(null)\nconst target = ref<{ column: string; index: number } | null>(null)\n\n// Dragging runs on pointer events, so it works with a mouse, a pen and a finger. A mouse drags once it moves a few\n// pixels, so a click still clicks; a finger after a short press, so a swipe still scrolls.\nconst MOUSE_SLOP = 4\nconst TOUCH_SLOP = 8\nconst TOUCH_DELAY = 250\nconst EDGE = 48\n\nlet pending: {\n  item: T\n  column: string\n  index: number\n  x: number\n  y: number\n  card: HTMLElement\n  touch: boolean\n} | null = null\nlet pressTimer: number | undefined\nlet ghost: HTMLElement | null = null\nlet grab = { x: 0, y: 0 }\nlet justDragged = false\n\nfunction onPointerDown(event: PointerEvent, item: T, column: string, index: number) {\n  if (event.button !== 0 || (event.target as HTMLElement).closest('input, textarea, select, [contenteditable]')) return\n  const touch = event.pointerType === 'touch'\n  pending = { item, column, index, x: event.clientX, y: event.clientY, card: event.currentTarget as HTMLElement, touch }\n  if (touch) pressTimer = window.setTimeout(() => pending && start(), TOUCH_DELAY)\n  window.addEventListener('pointermove', onPointerMove)\n  window.addEventListener('pointerup', onPointerUp)\n  window.addEventListener('pointercancel', stop)\n  window.addEventListener('touchmove', holdScroll, { passive: false })\n  window.addEventListener('keydown', onEscape)\n}\n\nfunction start() {\n  if (!pending) return\n  const rect = pending.card.getBoundingClientRect()\n  grab = { x: pending.x - rect.left, y: pending.y - rect.top }\n  ghost = pending.card.cloneNode(true) as HTMLElement\n  ghost.removeAttribute('id')\n  ghost.setAttribute('aria-hidden', 'true')\n  ghost.classList.add('pointer-events-none', 'fixed', 'top-0', 'left-0', 'z-[1300]', 'shadow-lg', 'opacity-95')\n  ghost.style.width = `${rect.width}px`\n  document.body.appendChild(ghost)\n  follow(pending.x, pending.y)\n  dragged.value = { id: idOf(pending.item), column: pending.column, index: pending.index }\n}\n\nfunction onPointerMove(event: PointerEvent) {\n  if (!pending) return\n  if (!dragged.value) {\n    const moved = Math.hypot(event.clientX - pending.x, event.clientY - pending.y)\n    // A finger that moves before the press is long enough is scrolling.\n    if (pending.touch) return moved > TOUCH_SLOP ? stop() : undefined\n    if (moved < MOUSE_SLOP) return\n    start()\n  }\n  event.preventDefault()\n  follow(event.clientX, event.clientY)\n  aim(event.clientX, event.clientY)\n  scrollNear(event.clientX, event.clientY)\n}\n\nfunction follow(x: number, y: number) {\n  if (ghost) ghost.style.transform = `translate(${x - grab.x}px, ${y - grab.y}px) rotate(1.5deg)`\n}\n\n// What's under the pointer: a card's top half drops before it, the bottom half after; an empty spot, at the end.\nfunction aim(x: number, y: number) {\n  const under = document.elementFromPoint(x, y)\n  const body = under?.closest<HTMLElement>('[data-board-column]')\n  if (!body || !root.value?.contains(body)) {\n    target.value = null\n    return\n  }\n  const column = body.dataset.boardColumn!\n  const card = under!.closest<HTMLElement>('[data-board-index]')\n  let index = props.columns.find((c) => c.id === column)?.items.length ?? 0\n  if (card && body.contains(card)) {\n    const rect = card.getBoundingClientRect()\n    index = Number(card.dataset.boardIndex) + (y < rect.top + rect.height / 2 ? 0 : 1)\n  }\n  if (target.value?.column !== column || target.value.index !== index) target.value = { column, index }\n}\n\n// Near a column's top or bottom, or the board's sides, it scrolls that way.\nfunction scrollNear(x: number, y: number) {\n  const body = document.elementFromPoint(x, y)?.closest<HTMLElement>('[data-board-column]')\n  if (body) {\n    const rect = body.getBoundingClientRect()\n    if (y < rect.top + EDGE) body.scrollTop -= 12\n    else if (y > rect.bottom - EDGE) body.scrollTop += 12\n  }\n  const board = root.value?.getBoundingClientRect()\n  if (board && root.value) {\n    if (x < board.left + EDGE) root.value.scrollLeft -= 12\n    else if (x > board.right - EDGE) root.value.scrollLeft += 12\n  }\n}\n\nfunction onPointerUp() {\n  const from = dragged.value\n  const to = target.value\n  if (from && to) {\n    let index = to.index\n    if (from.column === to.column) {\n      // Within a column the dragged card leaves its old slot first.\n      if (index > from.index) index--\n      if (props.sortable && index !== from.index) emit('move', from.id, to.column, index)\n    } else {\n      emit('move', from.id, to.column, index)\n    }\n  }\n  stop()\n}\n\nfunction holdScroll(event: TouchEvent) {\n  if (dragged.value) event.preventDefault()\n}\n\nfunction onEscape(event: KeyboardEvent) {\n  if (event.key === 'Escape' && dragged.value) {\n    event.preventDefault()\n    stop()\n  }\n}\n\nfunction stop() {\n  window.clearTimeout(pressTimer)\n  window.removeEventListener('pointermove', onPointerMove)\n  window.removeEventListener('pointerup', onPointerUp)\n  window.removeEventListener('pointercancel', stop)\n  window.removeEventListener('touchmove', holdScroll)\n  window.removeEventListener('keydown', onEscape)\n  ghost?.remove()\n  ghost = null\n  // The click that ends a drag isn't a click on the card.\n  if (dragged.value) {\n    justDragged = true\n    window.setTimeout(() => (justDragged = false))\n  }\n  pending = null\n  dragged.value = null\n  target.value = null\n}\n\nonBeforeUnmount(stop)\n\nfunction clickCard(event: MouseEvent, item: T) {\n  if (justDragged) {\n    event.preventDefault()\n    event.stopPropagation()\n    return\n  }\n  props.onCardClick?.(item)\n}\n\nfunction onCardKeydown(event: KeyboardEvent, item: T) {\n  if (!props.onCardClick || event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return\n  event.preventDefault()\n  props.onCardClick(item)\n}\n\nconst grounds = { fill: 'bg-sui-fill', canvas: 'border border-sui-line-subtle bg-sui-canvas', sunken: 'sui-band' }\nconst columnGround = computed(() => grounds[props.columnTone])\n\nconst isTarget = (column: string, index: number, item: T) =>\n  target.value?.column === column && target.value.index === index && dragged.value?.id !== idOf(item)\n\nconst frame =\n  'border border-sui-edge bg-sui-raised p-4 transition-[border-color,opacity] duration-150 hover:border-sui-line-strong'\n</script>\n\n<!-- A board: cards in columns by a field (a stage, a status), dragged between columns. -->\n<template>\n  <div\n    ref=\"root\"\n    class=\"flex items-stretch gap-5 overflow-x-auto pb-2 after:w-1 after:shrink-0 after:content-['']\"\n    :class=\"fill && 'h-full min-h-0 flex-1'\"\n  >\n    <section\n      v-for=\"column in columns\"\n      :key=\"column.id\"\n      :aria-labelledby=\"`${id}-${column.id}`\"\n      class=\"flex min-h-0 w-full max-w-xs min-w-[16rem] shrink-0 flex-col\"\n    >\n      <header class=\"flex items-center justify-between px-1 pb-2.5\">\n        <component\n          :is=\"`h${headingLevel}`\"\n          :id=\"`${id}-${column.id}`\"\n          class=\"m-0 flex items-center gap-2 text-sm font-semibold text-sui-ink\"\n        >\n          <Icon v-if=\"column.icon\" :color=\"column.iconColor ?? 'ink-subtle'\" :name=\"column.icon\" />\n          {{ column.name }}\n        </component>\n        <span\n          class=\"ml-2 inline-flex h-5 items-center justify-center rounded-full bg-sui-fill px-2 text-xs text-sui-ink-muted tabular-nums\"\n        >\n          <slot :column=\"column\" name=\"count\">{{ column.items.length }}</slot>\n        </span>\n      </header>\n      <div\n        class=\"group/body flex min-h-[120px] flex-1 flex-col gap-2.5 overflow-y-auto rounded-xl p-2.5 transition-shadow duration-150\"\n        :class=\"[columnGround, target?.column === column.id && 'ring-2 ring-sui-accent-line ring-inset']\"\n        :data-board-column=\"column.id\"\n      >\n        <template v-if=\"loading\">\n          <div v-for=\"i in 3\" :key=\"i\" aria-hidden=\"true\" class=\"rounded-xl border border-sui-edge bg-sui-raised p-4\">\n            <Skeleton class=\"mb-3\" />\n            <Skeleton height=\"0.75rem\" width=\"70%\" />\n          </div>\n        </template>\n        <p\n          v-else-if=\"column.items.length === 0 && !dragged\"\n          class=\"m-0 px-1 py-3 text-center text-13 text-sui-ink-muted\"\n        >\n          {{ emptyLabel }}\n        </p>\n        <ul v-else class=\"m-0 flex list-none flex-col gap-2.5 p-0\">\n          <li v-for=\"(item, index) in column.items\" :key=\"idOf(item) as PropertyKey\">\n            <div\n              class=\"relative rounded-xl outline-hidden transition-opacity duration-150 select-none\"\n              :class=\"[\n                cardFrame && frame,\n                onCardClick && 'cursor-pointer focus-visible:sui-ring',\n                dragged?.id === idOf(item) && 'opacity-40',\n                isTarget(column.id, index, item) && 'shadow-[0_-6px_0_-4px_rgb(var(--sui-accent-solid))]'\n              ]\"\n              :data-board-index=\"index\"\n              :role=\"onCardClick ? 'button' : undefined\"\n              :tabindex=\"onCardClick ? 0 : undefined\"\n              @click.capture=\"clickCard($event, item)\"\n              @contextmenu=\"dragged && $event.preventDefault()\"\n              @dragstart.prevent\n              @keydown=\"onCardKeydown($event, item)\"\n              @pointerdown=\"onPointerDown($event, item, column.id, index)\"\n            >\n              <slot :column=\"column\" :item=\"item\" name=\"card\">\n                <p class=\"m-0 text-sm font-semibold text-sui-ink\">{{ item.name }}</p>\n              </slot>\n            </div>\n          </li>\n        </ul>\n        <button\n          v-if=\"onNew && !loading\"\n          class=\"flex h-(--sui-control-height) w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong text-xs font-medium text-sui-ink-muted opacity-0 outline-hidden transition-all duration-150 group-hover/body:opacity-100 hover:border-sui-ink-muted hover:bg-sui-surface/60 hover:text-sui-ink-body focus-visible:opacity-100 focus-visible:sui-ring\"\n          type=\"button\"\n          @click=\"onNew(column)\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-3.5 fill-none stroke-current\"\n            stroke-linecap=\"round\"\n            stroke-width=\"1.5\"\n            viewBox=\"0 0 14 14\"\n          >\n            <path d=\"M7 2.5v9M2.5 7h9\" />\n          </svg>\n          {{ newLabel }}\n        </button>\n      </div>\n    </section>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Board.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_Fragment","_renderList","_unref","_createElementVNode","_createBlock","_resolveDynamicComponent","_withCtx","Icon","_createCommentVNode","_createTextVNode","_toDisplayString","_renderSlot","_createVNode","Skeleton","_withModifiers","Icon_default","Skeleton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","frame","Board_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","id","useId","idOf","item","root","ref","useDragMove","c","column","index","clickCard","endedDrag","event","onCardKeydown","grounds","columnGround","computed","isTarget","target","dragged","dropsAtEnd","openBlock","createElementBlock","normalizeClass","Fragment","renderList","unref","createElementVNode","createBlock","resolveDynamicComponent","withCtx","createCommentVNode","createTextVNode","toDisplayString","renderSlot","_ctx","i","createVNode","$event","_cache","withModifiers","onPointerDown"],"sources":["../../../src/components/Board/Board.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, ref, useId } from 'vue'\n\nimport Icon from '../Icon/Icon.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport { useDragMove } from '../internal/useDragMove'\nimport type { BoardColumn } from './types'\n\nexport interface BoardProps<T> {\n  columns: BoardColumn<T>[]\n  /** The item field that identifies it. */\n  rowKey?: keyof T & string\n  /** Cards also reorder within a column, for records that carry a position. */\n  sortable?: boolean\n  /** Columns run to the bottom of the parent and scroll inside it; give the parent a height. False sizes them to their cards. */\n  fill?: boolean\n  loading?: boolean\n  /** The columns' heading level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Draws each card's border, padding and surface. False when the `card` slot draws its own. */\n  cardFrame?: boolean\n  /** Makes a card a button that opens on click, Enter and Space (`@card-click`). Without it, the card slot carries its\n   *  own link or buttons. */\n  onCardClick?: (item: T) => void\n  /** Adds a dashed \"New\" button at the foot of each column, shown on hover (`@new`). */\n  onNew?: (column: BoardColumn<T>) => void\n  newLabel?: string\n  emptyLabel?: string\n  /** The columns' ground: a soft fill by default; `canvas` (the page's, with a hairline) or `sunken` match a Table's or\n   *  DataList's header tone, so the cards stand out on it. */\n  columnTone?: 'fill' | 'canvas' | 'sunken'\n}\n\nconst props = withDefaults(defineProps<BoardProps<T>>(), {\n  rowKey: 'id' as never,\n  fill: true,\n  headingLevel: 3,\n  cardFrame: true,\n  onCardClick: undefined,\n  onNew: undefined,\n  newLabel: 'New',\n  emptyLabel: 'No cards',\n  columnTone: 'fill'\n})\n\nconst emit = defineEmits<{\n  /** A card dropped into a column, at its new index there. Show it moved at once; put it back if saving fails. */\n  move: [id: unknown, column: string, index: number]\n}>()\n\ndefineSlots<{\n  /** A card's content; `item.name` as a title by default. */\n  card?: (props: { item: T; column: BoardColumn<T> }) => unknown\n  /** Replaces a column's count, e.g. its summed deal value. */\n  count?: (props: { column: BoardColumn<T> }) => unknown\n}>()\n\nconst id = useId()\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst root = ref<HTMLElement>()\n\nconst { dragged, target, onPointerDown, endedDrag } = useDragMove({\n  root,\n  countOf: (column) => props.columns.find((c) => c.id === column)?.items.length ?? 0,\n  sortable: () => props.sortable,\n  onMove: (id, column, index) => emit('move', id, column, index)\n})\n\nfunction clickCard(event: MouseEvent, item: T) {\n  if (endedDrag()) {\n    event.preventDefault()\n    event.stopPropagation()\n    return\n  }\n  props.onCardClick?.(item)\n}\n\nfunction onCardKeydown(event: KeyboardEvent, item: T) {\n  if (!props.onCardClick || event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return\n  event.preventDefault()\n  props.onCardClick(item)\n}\n\nconst grounds = { fill: 'bg-sui-fill', canvas: 'border border-sui-line-subtle bg-sui-canvas', sunken: 'sui-band' }\nconst columnGround = computed(() => grounds[props.columnTone])\n\nconst isTarget = (column: string, index: number, item: T) =>\n  target.value?.zone === column && target.value.index === index && dragged.value?.id !== idOf(item)\n// Past a column's last card, or into an empty one.\nconst dropsAtEnd = (column: BoardColumn<T>) =>\n  target.value?.zone === column.id &&\n  target.value.index >= column.items.length &&\n  !(dragged.value?.zone === column.id && dragged.value.index === column.items.length - 1)\n\nconst frame =\n  'border border-sui-edge bg-sui-raised p-4 transition-[border-color,opacity] duration-150 hover:border-sui-line-strong'\n</script>\n\n<!-- A board: cards in columns by a field (a stage, a status), dragged between columns. -->\n<template>\n  <div\n    ref=\"root\"\n    class=\"flex items-stretch gap-5 overflow-x-auto pb-2 after:w-1 after:shrink-0 after:content-['']\"\n    :class=\"fill && 'h-full min-h-0 flex-1'\"\n  >\n    <section\n      v-for=\"column in columns\"\n      :key=\"column.id\"\n      :aria-labelledby=\"`${id}-${column.id}`\"\n      class=\"flex min-h-0 w-full max-w-xs min-w-[16rem] shrink-0 flex-col\"\n    >\n      <header class=\"flex items-center justify-between px-1 pb-2.5\">\n        <component\n          :is=\"`h${headingLevel}`\"\n          :id=\"`${id}-${column.id}`\"\n          class=\"m-0 flex items-center gap-2 text-sm font-semibold text-sui-ink\"\n        >\n          <Icon v-if=\"column.icon\" :color=\"column.iconColor ?? 'ink-subtle'\" :name=\"column.icon\" />\n          {{ column.name }}\n        </component>\n        <span\n          class=\"ml-2 inline-flex h-5 items-center justify-center rounded-full bg-sui-fill px-2 text-xs text-sui-ink-muted tabular-nums\"\n        >\n          <slot :column=\"column\" name=\"count\">{{ column.items.length }}</slot>\n        </span>\n      </header>\n      <div\n        class=\"group/body flex min-h-[120px] flex-1 flex-col gap-2.5 overflow-y-auto rounded-xl p-2.5 transition-shadow duration-150\"\n        :class=\"[columnGround, target?.zone === column.id && 'ring-2 ring-sui-accent-line ring-inset']\"\n        :data-board-column=\"column.id\"\n        :data-drag-zone=\"column.id\"\n      >\n        <template v-if=\"loading\">\n          <div v-for=\"i in 3\" :key=\"i\" aria-hidden=\"true\" class=\"rounded-xl border border-sui-edge bg-sui-raised p-4\">\n            <Skeleton class=\"mb-3\" />\n            <Skeleton height=\"0.75rem\" width=\"70%\" />\n          </div>\n        </template>\n        <p\n          v-else-if=\"column.items.length === 0 && !dragged\"\n          class=\"m-0 px-1 py-3 text-center text-13 text-sui-ink-muted\"\n        >\n          {{ emptyLabel }}\n        </p>\n        <ul v-else class=\"m-0 flex list-none flex-col gap-2.5 p-0\">\n          <li v-for=\"(item, index) in column.items\" :key=\"idOf(item) as PropertyKey\">\n            <div\n              class=\"relative rounded-xl outline-hidden transition-opacity duration-150 select-none\"\n              :class=\"[\n                cardFrame && frame,\n                onCardClick && 'cursor-pointer focus-visible:sui-ring',\n                dragged?.id === idOf(item) && 'opacity-40',\n                isTarget(column.id, index, item) && 'shadow-[0_-6px_0_-4px_rgb(var(--sui-accent-solid))]'\n              ]\"\n              :data-board-index=\"index\"\n              :data-drag-index=\"index\"\n              :role=\"onCardClick ? 'button' : undefined\"\n              :tabindex=\"onCardClick ? 0 : undefined\"\n              @click.capture=\"clickCard($event, item)\"\n              @contextmenu=\"dragged && $event.preventDefault()\"\n              @dragstart.prevent\n              @keydown=\"onCardKeydown($event, item)\"\n              @pointerdown=\"onPointerDown($event, idOf(item), column.id, index)\"\n            >\n              <slot :column=\"column\" :item=\"item\" name=\"card\">\n                <p class=\"m-0 text-sm font-semibold text-sui-ink\">{{ item.name }}</p>\n              </slot>\n            </div>\n          </li>\n        </ul>\n        <!-- Where a card dropped past the last one lands. -->\n        <div\n          v-if=\"dragged && dropsAtEnd(column)\"\n          aria-hidden=\"true\"\n          class=\"h-1 shrink-0 rounded-full bg-sui-accent-solid\"\n        />\n        <button\n          v-if=\"onNew && !loading && !dragged\"\n          class=\"flex h-(--sui-control-height) w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong text-xs font-medium text-sui-ink-muted opacity-0 outline-hidden transition-all duration-150 group-hover/body:opacity-100 hover:border-sui-ink-muted hover:bg-sui-surface/60 hover:text-sui-ink-body focus-visible:opacity-100 focus-visible:sui-ring\"\n          type=\"button\"\n          @click=\"onNew(column)\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-3.5 fill-none stroke-current\"\n            stroke-linecap=\"round\"\n            stroke-width=\"1.5\"\n            viewBox=\"0 0 14 14\"\n          >\n            <path d=\"M7 2.5v9M2.5 7h9\" />\n          </svg>\n          {{ newLabel }}\n        </button>\n      </div>\n    </section>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/ContextMenu/ContextMenu.vue.d.ts

@@ -14,24 +14,24 @@ declare const __VLS_base: import("vue").DefineComponent<ContextMenuProps, {}, {}
     "click-item": (item: DropdownMenuAction & {
         id?: string;
     }) => any;
-    "update:open": (open: boolean) => any;
     show: () => any;
     hide: () => any;
+    "update:open": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ContextMenuProps> & Readonly<{
     "onClick-item"?: ((item: DropdownMenuAction & {
         id?: string;
     }) => any) | undefined;
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
     label: string;
-    confirmLabel: string;
-    cancelLabel: string;
     id: string;
     confirmTitle: string;
     confirmMessage: string;
+    confirmLabel: string;
     deleteLabel: string;
+    cancelLabel: string;
     items: DropdownMenuEntry[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/DataList/DataList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataList.js","names":["_sfc_main","DataList_vue_vue_type_script_setup_true_lang_default","DataList_default"],"sources":["../../../src/components/DataList/DataList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { DropdownMenuAction, DropdownMenuEntry } from '../internal/menu'\nimport type { DataListGroup } from './types'\n\nexport interface DataListProps<T> {\n  groups: DataListGroup<T>[]\n  /** The item field that identifies it. An item's `depth` indents it as a child. */\n  rowKey?: keyof T & string\n  /** A checkbox bound to `v-model:selected`: it shows on hover and focus, and on every row once anything is selected.\n   *  Shift-click (or Shift+Space) selects a range, Cmd or Ctrl-click toggles one row, Shift+↑ ↓ extends. */\n  selectable?: boolean\n  /** gutter: the checkbox in its own column. leading: it takes the place of the `leading` slot's first mark. */\n  checkboxPlacement?: 'gutter' | 'leading'\n  loading?: boolean\n  /** While loading, the placeholder groups drawn, as each one's number of rows. */\n  loadingGroups?: number[]\n  /** joined: one frame, sticky sunken group headers. cards: each group its own card, 12px apart, headers not sticky. */\n  variant?: 'joined' | 'cards'\n  /** The group headings' level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** The group headers' ground; by default sunken when joined, surface as cards. */\n  groupHeaderTone?: 'sunken' | 'surface' | 'canvas'\n  /** The group headers' height in px (36 by default); sets `--sui-list-header`. */\n  groupHeaderHeight?: number\n  /** Groups fold away under a chevron; a group's own `collapsible` wins. */\n  collapsible?: boolean\n  /** The rows' height in px, such as 44 (40 by default); sets `--sui-list-row`. */\n  rowHeight?: number\n  /** A hairline between rows. */\n  dividers?: boolean\n  /** Wraps each row in a ContextMenu of these items (`@context-item`); return [] for none. */\n  contextItems?: (item: T) => DropdownMenuEntry[]\n  /** The context menu's accessible name. */\n  contextLabel?: string\n  /** Makes rows open on click and Enter (`@row-click`). */\n  onRowClick?: (item: T) => void\n  /** Adds a + to each group's header (`@new`). */\n  onNew?: (group: DataListGroup<T>) => void\n  /** The + button's name; `{group}` is the group's name. */\n  newLabel?: string\n  collapseLabel?: string\n  expandLabel?: string\n  selectLabel?: string\n}\n\nconst props = withDefaults(defineProps<DataListProps<T>>(), {\n  rowKey: 'id' as never,\n  loadingGroups: () => [4, 2],\n  variant: 'joined',\n  checkboxPlacement: 'gutter',\n  headingLevel: 3,\n  groupHeaderTone: undefined,\n  groupHeaderHeight: undefined,\n  collapsible: true,\n  rowHeight: undefined,\n  dividers: false,\n  contextItems: undefined,\n  contextLabel: undefined,\n  onRowClick: undefined,\n  onNew: undefined,\n  newLabel: 'New in {group}',\n  collapseLabel: 'Collapse group',\n  expandLabel: 'Expand group',\n  selectLabel: 'Select'\n})\n\nconst emit = defineEmits<{ 'context-item': [action: DropdownMenuAction, item: T] }>()\n\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\nconst collapsed = defineModel<string[]>('collapsed', { default: () => [] })\n\nconst slots = defineSlots<{\n  /** Marks before a group's name, e.g. a status icon. */\n  'group-leading'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Your own group header in place of the name and count, e.g. a status Badge and a count; inside the heading. */\n  'group-header'?: (props: { group: DataListGroup<T>; count: number; collapsed: boolean }) => unknown\n  /** Small marks before an item's title: a status icon, an id, an avatar. With `checkboxPlacement=\"leading\"`, the\n   *  first mark gives way to the checkbox. */\n  leading?: (props: { item: T; selected: boolean; selecting: boolean; toggle: () => void }) => unknown\n  /** The item's title; `item.name` by default. */\n  title?: (props: { item: T }) => unknown\n  /** Right-aligned meta: tags, an avatar, a date. Keep it to three or four things. */\n  meta?: (props: { item: T }) => unknown\n  /** Controls at the end of a group's header, e.g. Show and Hide. */\n  'group-actions'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Shown when every group is empty, e.g. an EmptyState. */\n  empty?: () => unknown\n}>()\n\nconst id = useId()\nconst root = useTemplateRef<HTMLElement>('root')\n\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst interactive = computed(() => !!props.onRowClick || props.selectable)\nconst isEmpty = computed(() => !props.loading && props.groups.every((group) => group.items.length === 0))\n\nfunction toggleGroup(groupId: string) {\n  collapsed.value = collapsed.value.includes(groupId)\n    ? collapsed.value.filter((x) => x !== groupId)\n    : [...collapsed.value, groupId]\n}\n\nconst collapsibleGroup = (group: DataListGroup<T>) => group.collapsible ?? props.collapsible\nconst isCollapsed = (group: DataListGroup<T>) => collapsibleGroup(group) && collapsed.value.includes(group.id)\nconst visibleItems = computed(() => props.groups.filter((group) => !isCollapsed(group)).flatMap((group) => group.items))\n\n// Where a range starts: the row last toggled.\nlet anchorKey: unknown = undefined\n\nfunction toggle(item: T) {\n  const key = idOf(item)\n  anchorKey = key\n  selected.value = selected.value.includes(key) ? selected.value.filter((x) => x !== key) : [...selected.value, key]\n}\n\nfunction selectRange(item: T) {\n  const keys = visibleItems.value.map(idOf)\n  const to = keys.indexOf(idOf(item))\n  const from = keys.indexOf(anchorKey)\n  const span = from < 0 ? [keys[to]] : keys.slice(Math.min(from, to), Math.max(from, to) + 1)\n  if (from < 0) anchorKey = idOf(item)\n  selected.value = [...selected.value, ...span.filter((key) => !selected.value.includes(key))]\n}\n\nfunction select(...items: T[]) {\n  const keys = items.map(idOf).filter((key) => !selected.value.includes(key))\n  if (keys.length) selected.value = [...selected.value, ...new Set(keys)]\n}\n\nfunction clickRow(event: MouseEvent, item: T) {\n  if (props.selectable && event.shiftKey) selectRange(item)\n  else if (props.selectable && (event.metaKey || event.ctrlKey)) toggle(item)\n  // Leading checkboxes stand in for the row's mark, so while selecting a click selects, as in a mail list.\n  else if (props.selectable && leading.value && selected.value.length) toggle(item)\n  else props.onRowClick?.(item)\n}\n\n// A shift-click selects rather than highlighting the text between.\nfunction onRowMousedown(event: MouseEvent) {\n  if (props.selectable && event.shiftKey) event.preventDefault()\n}\n\n// ↑ ↓ or j k move between rows, x selects, Enter and Space open; with Shift, ↑ ↓ extend the selection and Space\n// selects a range.\nfunction onKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || event.metaKey || event.ctrlKey || event.altKey) return\n  // A collapsed group's rows are still in the DOM, hidden.\n  const rows = [...(root.value?.querySelectorAll<HTMLElement>('[data-list-row]') ?? [])].filter(\n    (row) => row.closest('ul')?.style.display !== 'none'\n  )\n  const i = rows.indexOf(event.currentTarget as HTMLElement)\n  const down = event.key === 'ArrowDown' || event.key === 'j'\n  const up = event.key === 'ArrowUp' || event.key === 'k'\n  if ((down || up) && event.shiftKey && props.selectable) {\n    const j = down ? Math.min(rows.length - 1, i + 1) : Math.max(0, i - 1)\n    const next = visibleItems.value[j]\n    select(item, ...(next ? [next] : []))\n    rows[j]?.focus()\n  } else if (down) rows[Math.min(rows.length - 1, i + 1)]?.focus()\n  else if (up) rows[Math.max(0, i - 1)]?.focus()\n  else if (event.key === ' ' && event.shiftKey && props.selectable) selectRange(item)\n  else if (event.key.toLowerCase() === 'x' && props.selectable) toggle(item)\n  else if ((event.key === 'Enter' || event.key === ' ') && props.onRowClick) props.onRowClick(item)\n  else return\n  event.preventDefault()\n}\n\nconst cards = computed(() => props.variant === 'cards')\nconst leading = computed(() => props.selectable && props.checkboxPlacement === 'leading')\nconst gutter = computed(() => props.selectable && props.checkboxPlacement === 'gutter')\nconst tones = { sunken: 'sui-band', surface: 'bg-sui-surface', canvas: 'bg-sui-canvas' }\nconst headerTone = computed(() => tones[props.groupHeaderTone ?? (cards.value ? 'surface' : 'sunken')])\nconst sizes = computed(() => {\n  const style: Record<string, string> = {}\n  if (props.rowHeight !== undefined) style['--sui-list-row'] = `${props.rowHeight}px`\n  if (props.groupHeaderHeight !== undefined) style['--sui-list-header'] = `${props.groupHeaderHeight}px`\n  return Object.keys(style).length ? style : undefined\n})\nconst card = 'overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface'\nconst custom = (group: DataListGroup<T>) => !!slots['group-header'] || group.header !== undefined\nconst groupName = (group: DataListGroup<T>) => group.label ?? group.name ?? ''\n\nconst skeletonWidths = ['42%', '58%', '35%', '50%', '46%', '38%']\nconst skeletonGroupWidths = ['5.5rem', '4rem', '4.75rem']\nconst headerBar = 'animate-pulse bg-sui-fill-hover'\nconst iconButton =\n  'flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-fill-hover hover:text-sui-ink focus-visible:sui-ring-inset'\n</script>\n\n<!-- A grouped list: one dense line per record under sticky, collapsible group headers. -->\n<template>\n  <div ref=\"root\" class=\"flex flex-col text-13 text-sui-ink\" :class=\"cards ? 'gap-3' : card\" :style=\"sizes\">\n    <div v-if=\"isEmpty && $slots.empty\" :class=\"cards && card\">\n      <slot name=\"empty\" />\n    </div>\n    <!-- Placeholder groups in the list's own shape: its header, rows, leading marks and meta. -->\n    <template v-else-if=\"loading\">\n      <section\n        v-for=\"(rows, g) in loadingGroups\"\n        :key=\"g\"\n        aria-busy=\"true\"\n        :class=\"cards ? card : 'border-t border-sui-line-subtle first:border-t-0'\"\n      >\n        <div\n          aria-hidden=\"true\"\n          class=\"flex h-[var(--sui-list-header,2.25rem)] items-center gap-2 border-b border-sui-line-subtle pr-2\"\n          :class=\"[headerTone, collapsible ? 'pl-1.5' : 'pl-4']\"\n        >\n          <span v-if=\"collapsible\" class=\"size-6 shrink-0\" />\n          <span\n            v-if=\"$slots['group-leading'] || $slots['group-header']\"\n            class=\"size-3.5 rounded-full\"\n            :class=\"headerBar\"\n          />\n          <span class=\"h-2.5 rounded-md\" :class=\"headerBar\" :style=\"{ width: skeletonGroupWidths[g % 3] }\" />\n          <span class=\"h-2.5 w-3.5 rounded-md\" :class=\"headerBar\" />\n        </div>\n        <div\n          v-for=\"r in rows\"\n          :key=\"r\"\n          aria-hidden=\"true\"\n          class=\"flex h-[var(--sui-list-row,2.5rem)] items-center gap-2.5 pr-4\"\n          :class=\"[gutter ? 'pl-9.5' : 'pl-4', dividers && '[&+&]:border-t [&+&]:border-sui-line-subtle']\"\n        >\n          <Skeleton v-if=\"$slots.leading || leading\" shape=\"circle\" size=\"1.25rem\" />\n          <Skeleton height=\"0.75rem\" :width=\"skeletonWidths[(g * 3 + r) % skeletonWidths.length]\" />\n          <span class=\"flex-1\" />\n          <template v-if=\"$slots.meta\">\n            <Skeleton height=\"0.625rem\" width=\"6rem\" />\n            <Skeleton height=\"0.625rem\" width=\"3.5rem\" />\n          </template>\n        </div>\n      </section>\n    </template>\n    <template v-else>\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.id\"\n        :aria-label=\"group.label\"\n        :aria-labelledby=\"!group.label && (group.name || custom(group)) ? `${id}-${group.id}-name` : undefined\"\n        :class=\"cards ? card : 'border-t border-sui-line-subtle first:border-t-0'\"\n      >\n        <header\n          v-if=\"group.name || custom(group)\"\n          class=\"flex h-[var(--sui-list-header,2.25rem)] items-center gap-2 border-b border-sui-line-subtle pr-2\"\n          :class=\"[headerTone, !cards && 'sticky top-0 z-10', collapsibleGroup(group) ? 'pl-1.5' : 'pl-4']\"\n        >\n          <button\n            v-if=\"collapsibleGroup(group)\"\n            :aria-controls=\"`${id}-${group.id}`\"\n            :aria-expanded=\"!collapsed.includes(group.id)\"\n            :aria-label=\"collapsed.includes(group.id) ? expandLabel : collapseLabel\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"toggleGroup(group.id)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3 fill-none stroke-current transition-transform duration-150\"\n              :class=\"isCollapsed(group) && '-rotate-90'\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 12 12\"\n            >\n              <path d=\"M3 4.5 6 7.5l3-3\" />\n            </svg>\n          </button>\n          <component\n            :is=\"`h${headingLevel}`\"\n            v-if=\"custom(group)\"\n            :id=\"`${id}-${group.id}-name`\"\n            class=\"m-0 flex min-w-0 items-center gap-2 text-13 font-medium text-sui-ink\"\n          >\n            <slot\n              :collapsed=\"collapsed.includes(group.id)\"\n              :count=\"group.count ?? group.items.length\"\n              :group=\"group\"\n              name=\"group-header\"\n              >{{ group.header }}</slot\n            >\n          </component>\n          <template v-else>\n            <slot :group=\"group\" name=\"group-leading\" />\n            <component\n              :is=\"`h${headingLevel}`\"\n              :id=\"`${id}-${group.id}-name`\"\n              class=\"m-0 text-13 font-medium text-sui-ink\"\n            >\n              {{ group.name }}\n            </component>\n            <span class=\"text-13 text-sui-ink-muted tabular-nums\">{{ group.count ?? group.items.length }}</span>\n          </template>\n          <span class=\"ml-auto flex items-center gap-1\">\n            <slot :group=\"group\" name=\"group-actions\" />\n          </span>\n          <button\n            v-if=\"onNew\"\n            :aria-label=\"newLabel.replace('{group}', groupName(group))\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"onNew(group)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3.5 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 14 14\"\n            >\n              <path d=\"M7 2.5v9M2.5 7h9\" />\n            </svg>\n          </button>\n        </header>\n        <ul v-show=\"!isCollapsed(group)\" :id=\"`${id}-${group.id}`\" class=\"m-0 list-none p-0\">\n          <ContextMenu\n            v-for=\"item in group.items\"\n            :key=\"idOf(item) as PropertyKey\"\n            :disabled=\"!contextItems\"\n            :items=\"contextItems?.(item)\"\n            :label=\"contextLabel\"\n            @click-item=\"emit('context-item', $event, item)\"\n          >\n            <li\n              class=\"group/row relative flex h-[var(--sui-list-row,2.5rem)] items-center transition-colors duration-100 has-focus-visible:sui-ring-inset\"\n              :class=\"[\n                dividers && '[&+&]:border-t [&+&]:border-sui-line-subtle',\n                selected.includes(idOf(item))\n                  ? 'bg-sui-accent-wash'\n                  : 'hover:bg-sui-fill-hover has-focus-visible:bg-sui-fill-hover'\n              ]\"\n              :style=\"item.depth ? { paddingLeft: `${item.depth * 22}px` } : undefined\"\n            >\n              <!-- Outside the row, which is a button, over the leading slot's first mark: 16px in, or more for a child. -->\n              <span\n                v-if=\"leading\"\n                class=\"absolute top-1/2 z-[1] flex size-4 -translate-y-1/2 items-center justify-center\"\n                :class=\"!selected.length && 'hidden group-hover/row:flex group-has-focus-visible/row:flex'\"\n                data-list-check\n                :style=\"{ left: `${16 + (item.depth ?? 0) * 22}px` }\"\n              >\n                <Checkbox\n                  :aria-label=\"selectLabel\"\n                  :model-value=\"selected.includes(idOf(item))\"\n                  tabindex=\"-1\"\n                  @update:model-value=\"toggle(item)\"\n                />\n              </span>\n              <span\n                v-if=\"gutter\"\n                class=\"flex w-7 shrink-0 justify-end transition-opacity duration-100\"\n                :class=\"selected.length ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100'\"\n              >\n                <Checkbox\n                  :aria-label=\"selectLabel\"\n                  :model-value=\"selected.includes(idOf(item))\"\n                  tabindex=\"-1\"\n                  @update:model-value=\"toggle(item)\"\n                />\n              </span>\n              <div\n                class=\"flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden\"\n                :class=\"[gutter ? 'pl-2.5' : 'pl-4', (onRowClick || selectable) && 'cursor-pointer']\"\n                data-list-row\n                :role=\"onRowClick ? 'button' : undefined\"\n                :tabindex=\"interactive ? 0 : undefined\"\n                @click=\"clickRow($event, item)\"\n                @keydown=\"onKeydown($event, item)\"\n                @mousedown=\"onRowMousedown\"\n              >\n                <span\n                  v-if=\"$slots.leading\"\n                  class=\"flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums\"\n                  :class=\"\n                    leading &&\n                    (selected.length\n                      ? '[&>*:first-child]:invisible'\n                      : 'group-hover/row:[&>*:first-child]:invisible group-has-focus-visible/row:[&>*:first-child]:invisible')\n                  \"\n                >\n                  <slot\n                    :item=\"item\"\n                    name=\"leading\"\n                    :selected=\"selected.includes(idOf(item))\"\n                    :selecting=\"selected.length > 0\"\n                    :toggle=\"() => toggle(item)\"\n                  />\n                </span>\n                <span class=\"min-w-0 flex-1 truncate font-medium text-sui-ink\">\n                  <slot :item=\"item\" name=\"title\">{{ item.name }}</slot>\n                </span>\n                <span\n                  v-if=\"$slots.meta\"\n                  class=\"flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums\"\n                >\n                  <slot :item=\"item\" name=\"meta\" />\n                </span>\n              </div>\n            </li>\n          </ContextMenu>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DataList.js","names":["_sfc_main","DataList_vue_vue_type_script_setup_true_lang_default","DataList_default"],"sources":["../../../src/components/DataList/DataList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { DropdownMenuAction, DropdownMenuEntry } from '../internal/menu'\nimport { useDragMove } from '../internal/useDragMove'\nimport type { DataListGroup } from './types'\n\nexport interface DataListProps<T> {\n  groups: DataListGroup<T>[]\n  /** The item field that identifies it. An item's `depth` indents it as a child. */\n  rowKey?: keyof T & string\n  /** A checkbox bound to `v-model:selected`: it shows on hover and focus, and on every row once anything is selected.\n   *  Shift-click (or Shift+Space) selects a range, Cmd or Ctrl-click toggles one row, Shift+↑ ↓ extends. */\n  selectable?: boolean\n  /** gutter: the checkbox in its own column. leading: it takes the place of the `leading` slot's first mark. */\n  checkboxPlacement?: 'gutter' | 'leading'\n  loading?: boolean\n  /** While loading, the placeholder groups drawn, as each one's number of rows. */\n  loadingGroups?: number[]\n  /** joined: one frame, sticky sunken group headers. cards: each group its own card, 12px apart, headers not sticky. */\n  variant?: 'joined' | 'cards'\n  /** The group headings' level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** The group headers' ground; by default sunken when joined, surface as cards. */\n  groupHeaderTone?: 'sunken' | 'surface' | 'canvas'\n  /** The group headers' height in px (36 by default); sets `--sui-list-header`. */\n  groupHeaderHeight?: number\n  /** Groups fold away under a chevron; a group's own `collapsible` wins. */\n  collapsible?: boolean\n  /** The rows' height in px, such as 44 (40 by default); sets `--sui-list-row`. */\n  rowHeight?: number\n  /** A hairline between rows. */\n  dividers?: boolean\n  /** Rows drag between groups (`@move`), e.g. to change a record's status: a copy follows the pointer and a line marks\n   *  where it lands. With a mouse after a few pixels, with a finger after a short press; Escape cancels. */\n  draggable?: boolean\n  /** Groups with no items are left out, except while a row is dragged, so one can still be dropped into them. */\n  hideEmpty?: boolean\n  /** Wraps each row in a ContextMenu of these items (`@context-item`); return [] for none. */\n  contextItems?: (item: T) => DropdownMenuEntry[]\n  /** The context menu's accessible name. */\n  contextLabel?: string\n  /** Makes rows open on click and Enter (`@row-click`). */\n  onRowClick?: (item: T) => void\n  /** Adds a + to each group's header (`@new`). */\n  onNew?: (group: DataListGroup<T>) => void\n  /** The + button's name; `{group}` is the group's name. */\n  newLabel?: string\n  collapseLabel?: string\n  expandLabel?: string\n  selectLabel?: string\n}\n\nconst props = withDefaults(defineProps<DataListProps<T>>(), {\n  rowKey: 'id' as never,\n  loadingGroups: () => [4, 2],\n  variant: 'joined',\n  checkboxPlacement: 'gutter',\n  headingLevel: 3,\n  groupHeaderTone: undefined,\n  groupHeaderHeight: undefined,\n  collapsible: true,\n  rowHeight: undefined,\n  dividers: false,\n  draggable: false,\n  hideEmpty: false,\n  contextItems: undefined,\n  contextLabel: undefined,\n  onRowClick: undefined,\n  onNew: undefined,\n  newLabel: 'New in {group}',\n  collapseLabel: 'Collapse group',\n  expandLabel: 'Expand group',\n  selectLabel: 'Select'\n})\n\nconst emit = defineEmits<{\n  'context-item': [action: DropdownMenuAction, item: T]\n  /** A row dropped into another group, at its index there. Show it moved at once; put it back if saving fails. */\n  move: [id: unknown, group: string, index: number]\n}>()\n\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\nconst collapsed = defineModel<string[]>('collapsed', { default: () => [] })\n\nconst slots = defineSlots<{\n  /** Marks before a group's name, e.g. a status icon. */\n  'group-leading'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Your own group header in place of the name and count, e.g. a status Badge and a count; inside the heading. */\n  'group-header'?: (props: { group: DataListGroup<T>; count: number; collapsed: boolean }) => unknown\n  /** Small marks before an item's title: a status icon, an id, an avatar. With `checkboxPlacement=\"leading\"`, the\n   *  first mark gives way to the checkbox. */\n  leading?: (props: { item: T; selected: boolean; selecting: boolean; toggle: () => void }) => unknown\n  /** The item's title; `item.name` by default. */\n  title?: (props: { item: T }) => unknown\n  /** Right-aligned meta: tags, an avatar, a date. Keep it to three or four things. */\n  meta?: (props: { item: T }) => unknown\n  /** Controls at the end of a group's header, e.g. Show and Hide. */\n  'group-actions'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Shown when every group is empty, e.g. an EmptyState. */\n  empty?: () => unknown\n}>()\n\nconst id = useId()\nconst root = useTemplateRef<HTMLElement>('root')\n\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst interactive = computed(() => !!props.onRowClick || props.selectable)\n\nconst { dragged, target, onPointerDown, endedDrag } = useDragMove({\n  root,\n  countOf: (group) => props.groups.find((g) => g.id === group)?.items.length ?? 0,\n  onMove: (id, group, index) => emit('move', id, group, index),\n  ghostMaxWidth: 360,\n  tilt: false,\n  // A row has no ground of its own: the copy takes the list's surface and a hairline.\n  ghostStyle: {\n    background: 'rgb(var(--sui-raised))',\n    border: '1px solid rgb(var(--sui-edge))',\n    borderRadius: '10px'\n  }\n})\nconst shownGroups = computed(() =>\n  props.hideEmpty && !dragged.value ? props.groups.filter((group) => group.items.length > 0) : props.groups\n)\nconst isTarget = (group: string, index: number, item: T) =>\n  target.value?.zone === group &&\n  target.value.index === index &&\n  dragged.value?.id !== idOf(item) &&\n  dragged.value?.zone !== group\n// Dropped past a group's last row, into an empty group, or onto a collapsed one: it lands at the end.\nconst dropsAtEnd = (group: DataListGroup<T>) =>\n  target.value?.zone === group.id && dragged.value?.zone !== group.id && target.value.index >= group.items.length\nconst isEmpty = computed(() => !props.loading && props.groups.every((group) => group.items.length === 0))\n\nfunction toggleGroup(groupId: string) {\n  collapsed.value = collapsed.value.includes(groupId)\n    ? collapsed.value.filter((x) => x !== groupId)\n    : [...collapsed.value, groupId]\n}\n\nconst collapsibleGroup = (group: DataListGroup<T>) => group.collapsible ?? props.collapsible\nconst isCollapsed = (group: DataListGroup<T>) => collapsibleGroup(group) && collapsed.value.includes(group.id)\nconst visibleItems = computed(() => props.groups.filter((group) => !isCollapsed(group)).flatMap((group) => group.items))\n\n// Where a range starts: the row last toggled.\nlet anchorKey: unknown = undefined\n\nfunction toggle(item: T) {\n  const key = idOf(item)\n  anchorKey = key\n  selected.value = selected.value.includes(key) ? selected.value.filter((x) => x !== key) : [...selected.value, key]\n}\n\nfunction selectRange(item: T) {\n  const keys = visibleItems.value.map(idOf)\n  const to = keys.indexOf(idOf(item))\n  const from = keys.indexOf(anchorKey)\n  const span = from < 0 ? [keys[to]] : keys.slice(Math.min(from, to), Math.max(from, to) + 1)\n  if (from < 0) anchorKey = idOf(item)\n  selected.value = [...selected.value, ...span.filter((key) => !selected.value.includes(key))]\n}\n\nfunction select(...items: T[]) {\n  const keys = items.map(idOf).filter((key) => !selected.value.includes(key))\n  if (keys.length) selected.value = [...selected.value, ...new Set(keys)]\n}\n\nfunction clickRow(event: MouseEvent, item: T) {\n  if (endedDrag()) return\n  if (props.selectable && event.shiftKey) selectRange(item)\n  else if (props.selectable && (event.metaKey || event.ctrlKey)) toggle(item)\n  // Leading checkboxes stand in for the row's mark, so while selecting a click selects, as in a mail list.\n  else if (props.selectable && leading.value && selected.value.length) toggle(item)\n  else props.onRowClick?.(item)\n}\n\n// A shift-click selects rather than highlighting the text between.\nfunction onRowMousedown(event: MouseEvent) {\n  if (props.selectable && event.shiftKey) event.preventDefault()\n}\n\n// ↑ ↓ or j k move between rows, x selects, Enter and Space open; with Shift, ↑ ↓ extend the selection and Space\n// selects a range.\nfunction onKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || event.metaKey || event.ctrlKey || event.altKey) return\n  // A collapsed group's rows are still in the DOM, hidden.\n  const rows = [...(root.value?.querySelectorAll<HTMLElement>('[data-list-row]') ?? [])].filter(\n    (row) => row.closest('ul')?.style.display !== 'none'\n  )\n  const i = rows.indexOf(event.currentTarget as HTMLElement)\n  const down = event.key === 'ArrowDown' || event.key === 'j'\n  const up = event.key === 'ArrowUp' || event.key === 'k'\n  if ((down || up) && event.shiftKey && props.selectable) {\n    const j = down ? Math.min(rows.length - 1, i + 1) : Math.max(0, i - 1)\n    const next = visibleItems.value[j]\n    select(item, ...(next ? [next] : []))\n    rows[j]?.focus()\n  } else if (down) rows[Math.min(rows.length - 1, i + 1)]?.focus()\n  else if (up) rows[Math.max(0, i - 1)]?.focus()\n  else if (event.key === ' ' && event.shiftKey && props.selectable) selectRange(item)\n  else if (event.key.toLowerCase() === 'x' && props.selectable) toggle(item)\n  else if ((event.key === 'Enter' || event.key === ' ') && props.onRowClick) props.onRowClick(item)\n  else return\n  event.preventDefault()\n}\n\nconst cards = computed(() => props.variant === 'cards')\nconst leading = computed(() => props.selectable && props.checkboxPlacement === 'leading')\nconst gutter = computed(() => props.selectable && props.checkboxPlacement === 'gutter')\nconst tones = { sunken: 'sui-band', surface: 'bg-sui-surface', canvas: 'bg-sui-canvas' }\nconst headerTone = computed(() => tones[props.groupHeaderTone ?? (cards.value ? 'surface' : 'sunken')])\nconst sizes = computed(() => {\n  const style: Record<string, string> = {}\n  if (props.rowHeight !== undefined) style['--sui-list-row'] = `${props.rowHeight}px`\n  if (props.groupHeaderHeight !== undefined) style['--sui-list-header'] = `${props.groupHeaderHeight}px`\n  return Object.keys(style).length ? style : undefined\n})\nconst card = 'overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface'\nconst custom = (group: DataListGroup<T>) => !!slots['group-header'] || group.header !== undefined\nconst groupName = (group: DataListGroup<T>) => group.label ?? group.name ?? ''\n\nconst skeletonWidths = ['42%', '58%', '35%', '50%', '46%', '38%']\nconst skeletonGroupWidths = ['5.5rem', '4rem', '4.75rem']\nconst headerBar = 'animate-pulse bg-sui-fill-hover'\nconst iconButton =\n  'flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-fill-hover hover:text-sui-ink focus-visible:sui-ring-inset'\n</script>\n\n<!-- A grouped list: one dense line per record under sticky, collapsible group headers. -->\n<template>\n  <div ref=\"root\" class=\"flex flex-col text-13 text-sui-ink\" :class=\"cards ? 'gap-3' : card\" :style=\"sizes\">\n    <div v-if=\"isEmpty && $slots.empty\" :class=\"cards && card\">\n      <slot name=\"empty\" />\n    </div>\n    <!-- Placeholder groups in the list's own shape: its header, rows, leading marks and meta. -->\n    <template v-else-if=\"loading\">\n      <section\n        v-for=\"(rows, g) in loadingGroups\"\n        :key=\"g\"\n        aria-busy=\"true\"\n        :class=\"cards ? card : 'border-t border-sui-line-subtle first:border-t-0'\"\n      >\n        <div\n          aria-hidden=\"true\"\n          class=\"flex h-[var(--sui-list-header,2.25rem)] items-center gap-2 border-b border-sui-line-subtle pr-2\"\n          :class=\"[headerTone, collapsible ? 'pl-1.5' : 'pl-4']\"\n        >\n          <span v-if=\"collapsible\" class=\"size-6 shrink-0\" />\n          <span\n            v-if=\"$slots['group-leading'] || $slots['group-header']\"\n            class=\"size-3.5 rounded-full\"\n            :class=\"headerBar\"\n          />\n          <span class=\"h-2.5 rounded-md\" :class=\"headerBar\" :style=\"{ width: skeletonGroupWidths[g % 3] }\" />\n          <span class=\"h-2.5 w-3.5 rounded-md\" :class=\"headerBar\" />\n        </div>\n        <div\n          v-for=\"r in rows\"\n          :key=\"r\"\n          aria-hidden=\"true\"\n          class=\"flex h-[var(--sui-list-row,2.5rem)] items-center gap-2.5 pr-4\"\n          :class=\"[gutter ? 'pl-9.5' : 'pl-4', dividers && '[&+&]:border-t [&+&]:border-sui-line-subtle']\"\n        >\n          <Skeleton v-if=\"$slots.leading || leading\" shape=\"circle\" size=\"1.25rem\" />\n          <Skeleton height=\"0.75rem\" :width=\"skeletonWidths[(g * 3 + r) % skeletonWidths.length]\" />\n          <span class=\"flex-1\" />\n          <template v-if=\"$slots.meta\">\n            <Skeleton height=\"0.625rem\" width=\"6rem\" />\n            <Skeleton height=\"0.625rem\" width=\"3.5rem\" />\n          </template>\n        </div>\n      </section>\n    </template>\n    <template v-else>\n      <section\n        v-for=\"group in shownGroups\"\n        :key=\"group.id\"\n        :aria-label=\"group.label\"\n        :aria-labelledby=\"!group.label && (group.name || custom(group)) ? `${id}-${group.id}-name` : undefined\"\n        :class=\"[\n          cards ? card : 'border-t border-sui-line-subtle first:border-t-0',\n          dragged && target?.zone === group.id && dragged.zone !== group.id && 'ring-2 ring-sui-accent-line ring-inset'\n        ]\"\n        :data-drag-zone=\"draggable ? group.id : undefined\"\n      >\n        <header\n          v-if=\"group.name || custom(group)\"\n          class=\"flex h-[var(--sui-list-header,2.25rem)] items-center gap-2 border-b border-sui-line-subtle pr-2\"\n          :class=\"[headerTone, !cards && 'sticky top-0 z-10', collapsibleGroup(group) ? 'pl-1.5' : 'pl-4']\"\n        >\n          <button\n            v-if=\"collapsibleGroup(group)\"\n            :aria-controls=\"`${id}-${group.id}`\"\n            :aria-expanded=\"!collapsed.includes(group.id)\"\n            :aria-label=\"collapsed.includes(group.id) ? expandLabel : collapseLabel\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"toggleGroup(group.id)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3 fill-none stroke-current transition-transform duration-150\"\n              :class=\"isCollapsed(group) && '-rotate-90'\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 12 12\"\n            >\n              <path d=\"M3 4.5 6 7.5l3-3\" />\n            </svg>\n          </button>\n          <component\n            :is=\"`h${headingLevel}`\"\n            v-if=\"custom(group)\"\n            :id=\"`${id}-${group.id}-name`\"\n            class=\"m-0 flex min-w-0 items-center gap-2 text-13 font-medium text-sui-ink\"\n          >\n            <slot\n              :collapsed=\"collapsed.includes(group.id)\"\n              :count=\"group.count ?? group.items.length\"\n              :group=\"group\"\n              name=\"group-header\"\n              >{{ group.header }}</slot\n            >\n          </component>\n          <template v-else>\n            <slot :group=\"group\" name=\"group-leading\" />\n            <component\n              :is=\"`h${headingLevel}`\"\n              :id=\"`${id}-${group.id}-name`\"\n              class=\"m-0 text-13 font-medium text-sui-ink\"\n            >\n              {{ group.name }}\n            </component>\n            <span class=\"text-13 text-sui-ink-muted tabular-nums\">{{ group.count ?? group.items.length }}</span>\n          </template>\n          <span class=\"ml-auto flex items-center gap-1\">\n            <slot :group=\"group\" name=\"group-actions\" />\n          </span>\n          <button\n            v-if=\"onNew\"\n            :aria-label=\"newLabel.replace('{group}', groupName(group))\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"onNew(group)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3.5 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 14 14\"\n            >\n              <path d=\"M7 2.5v9M2.5 7h9\" />\n            </svg>\n          </button>\n        </header>\n        <ul v-show=\"!isCollapsed(group)\" :id=\"`${id}-${group.id}`\" class=\"m-0 list-none p-0\">\n          <ContextMenu\n            v-for=\"(item, index) in group.items\"\n            :key=\"idOf(item) as PropertyKey\"\n            :disabled=\"!contextItems\"\n            :items=\"contextItems?.(item)\"\n            :label=\"contextLabel\"\n            @click-item=\"emit('context-item', $event, item)\"\n          >\n            <li\n              class=\"group/row relative flex h-[var(--sui-list-row,2.5rem)] items-center transition-[background-color,opacity] duration-100 has-focus-visible:sui-ring-inset\"\n              :class=\"[\n                dividers && '[&+&]:border-t [&+&]:border-sui-line-subtle',\n                draggable && 'select-none',\n                dragged?.id === idOf(item) && 'opacity-40',\n                isTarget(group.id, index, item) && 'shadow-[inset_0_2px_0_rgb(var(--sui-accent-solid))]',\n                selected.includes(idOf(item))\n                  ? 'bg-sui-accent-wash'\n                  : 'hover:bg-sui-fill-hover has-focus-visible:bg-sui-fill-hover'\n              ]\"\n              :data-drag-index=\"draggable ? index : undefined\"\n              :style=\"item.depth ? { paddingLeft: `${item.depth * 22}px` } : undefined\"\n              @dragstart.prevent\n              @pointerdown=\"draggable && onPointerDown($event, idOf(item), group.id, index)\"\n            >\n              <!-- Outside the row, which is a button, over the leading slot's first mark: 16px in, or more for a child. -->\n              <span\n                v-if=\"leading\"\n                class=\"absolute top-1/2 z-[1] flex size-4 -translate-y-1/2 items-center justify-center\"\n                :class=\"!selected.length && 'hidden group-hover/row:flex group-has-focus-visible/row:flex'\"\n                data-list-check\n                data-no-drag\n                :style=\"{ left: `${16 + (item.depth ?? 0) * 22}px` }\"\n              >\n                <Checkbox\n                  :aria-label=\"selectLabel\"\n                  :model-value=\"selected.includes(idOf(item))\"\n                  tabindex=\"-1\"\n                  @update:model-value=\"toggle(item)\"\n                />\n              </span>\n              <span\n                v-if=\"gutter\"\n                class=\"flex w-7 shrink-0 justify-end transition-opacity duration-100\"\n                :class=\"selected.length ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100'\"\n                data-no-drag\n              >\n                <Checkbox\n                  :aria-label=\"selectLabel\"\n                  :model-value=\"selected.includes(idOf(item))\"\n                  tabindex=\"-1\"\n                  @update:model-value=\"toggle(item)\"\n                />\n              </span>\n              <div\n                class=\"flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden\"\n                :class=\"[gutter ? 'pl-2.5' : 'pl-4', (onRowClick || selectable) && 'cursor-pointer']\"\n                data-list-row\n                :role=\"onRowClick ? 'button' : undefined\"\n                :tabindex=\"interactive ? 0 : undefined\"\n                @click=\"clickRow($event, item)\"\n                @keydown=\"onKeydown($event, item)\"\n                @mousedown=\"onRowMousedown\"\n              >\n                <span\n                  v-if=\"$slots.leading\"\n                  class=\"flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums\"\n                  :class=\"\n                    leading &&\n                    (selected.length\n                      ? '[&>*:first-child]:invisible'\n                      : 'group-hover/row:[&>*:first-child]:invisible group-has-focus-visible/row:[&>*:first-child]:invisible')\n                  \"\n                >\n                  <slot\n                    :item=\"item\"\n                    name=\"leading\"\n                    :selected=\"selected.includes(idOf(item))\"\n                    :selecting=\"selected.length > 0\"\n                    :toggle=\"() => toggle(item)\"\n                  />\n                </span>\n                <span class=\"min-w-0 flex-1 truncate font-medium text-sui-ink\">\n                  <slot :item=\"item\" name=\"title\">{{ item.name }}</slot>\n                </span>\n                <span\n                  v-if=\"$slots.meta\"\n                  class=\"flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums\"\n                >\n                  <slot :item=\"item\" name=\"meta\" />\n                </span>\n              </div>\n            </li>\n          </ContextMenu>\n          <li v-if=\"dragged && dropsAtEnd(group)\" aria-hidden=\"true\" class=\"h-0.5 bg-sui-accent-solid\" />\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/DataList/DataList.vue.d.ts

@@ -26,6 +26,11 @@ export interface DataListProps<T> {
     rowHeight?: number;
     /** A hairline between rows. */
     dividers?: boolean;
+    /** Rows drag between groups (`@move`), e.g. to change a record's status: a copy follows the pointer and a line marks
+     *  where it lands. With a mouse after a few pixels, with a finger after a short press; Escape cancels. */
+    draggable?: boolean;
+    /** Groups with no items are left out, except while a row is dragged, so one can still be dropped into them. */
+    hideEmpty?: boolean;
     /** Wraps each row in a ContextMenu of these items (`@context-item`); return [] for none. */
     contextItems?: (item: T) => DropdownMenuEntry[];
     /** The context menu's accessible name. */
@@ -46,6 +51,7 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         collapsed?: string[];
     }) & {
         "onContext-item"?: ((action: DropdownMenuAction, item: T) => any) | undefined;
+        onMove?: ((id: unknown, group: string, index: number) => any) | undefined;
         "onUpdate:selected"?: ((value: unknown[]) => any) | undefined;
         "onUpdate:collapsed"?: ((value: string[]) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -87,7 +93,7 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         /** Shown when every group is empty, e.g. an EmptyState. */
         empty?: () => unknown;
     };
-    emit: ((evt: "context-item", action: DropdownMenuAction, item: T) => void) & (((event: "update:selected", value: unknown[]) => void) & ((event: "update:collapsed", value: string[]) => void));
+    emit: (((evt: "context-item", action: DropdownMenuAction, item: T) => void) & ((evt: "move", id: unknown, group: string, index: number) => void)) & (((event: "update:selected", value: unknown[]) => void) & ((event: "update:collapsed", value: string[]) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };