@alfakit/vue 0.1.2 → 0.1.6

package/dist/components/table/ColumnManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnManager.js","names":["_sfc_main","ColumnManager_vue_vue_type_script_setup_true_lang_default","ColumnManager_default"],"sources":["../../../src/components/table/ColumnManager.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  columnDraftChanged,\n  columnManagerPosition,\n  columnOrderChanged,\n  defaultVisibleColumns,\n  FILTERS_MODAL_WIDTH_CLASSES,\n  gridColumnsClasses,\n  keepMoveButtonFocus,\n  moveColumnInManager,\n  moveColumnTo,\n  orderColumnsBy,\n  saveColumnOrder,\n  slideOverSide,\n  toggleVisibleColumn,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon, Columns3Icon, GripVerticalIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { computed, ref, useId, watch } from 'vue'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { showToast } from '../notifications/flash-toasts'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport DialogTrigger from '../ui/DialogTrigger.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport Sheet from '../ui/Sheet.vue'\nimport SheetContent from '../ui/SheetContent.vue'\nimport SheetDescription from '../ui/SheetDescription.vue'\nimport SheetHeader from '../ui/SheetHeader.vue'\nimport SheetTitle from '../ui/SheetTitle.vue'\nimport SheetTrigger from '../ui/SheetTrigger.vue'\nimport TableTriggerButton from './TableTriggerButton.vue'\n\n/**\n * The column manager: show / hide toggleable columns (kept in the query string) and, with\n * `reorderableColumns()`, move columns (stored per user on the server) by dragging a row\n * onto another or with the move up / down buttons (the keyboard path).\n *\n * `deferColumnManager()` keeps toggles in a draft until \"Apply\"; `columnManagerLayout()`\n * opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.\n */\nconst props = defineProps<{ table: TableSchema; token: string; component: string }>()\nconst t = useT()\nconst panel = usePanel()\nconst direction = useDirection()\nconst open = ref(false)\n// `columnManagerTriggerAction()` may set `slideOver()`, `modalWidth()` and the heading.\nconst modal = computed(() => props.table.triggerActions?.columnManager?.modal)\nconst modalHeading = computed(() => modal.value?.heading ?? t('table.columns', {}, 'Columns'))\nconst modalDescription = computed(() => modal.value?.description ?? props.table.pluralModelLabel)\nconst modalWidthClass = computed(() =>\n  modal.value?.width ? FILTERS_MODAL_WIDTH_CLASSES[modal.value.width] : undefined,\n)\nconst saving = ref(false)\nconst dragging = ref<string | null>(null)\nconst dropTarget = ref<string | null>(null)\n// Toggles of a deferred column manager wait here until \"Apply\".\nconst draft = ref<string[] | null>(null)\nconst reorderable = computed(() =>\n  Boolean(props.table.reorderableColumns && panel.value.endpoints.tableColumns),\n)\nconst toggleable = computed(() => Boolean(props.table.toggleableColumns))\nconst deferred = computed(() => Boolean(props.table.deferColumnManager))\n// A moved column order: the draft of a deferred column manager, or shown at once while\n// it is saved.\nconst orderDraft = ref<string[] | null>(null)\n// Screen-reader announcement of the last move.\nconst announcement = ref('')\nconst idBase = useId()\nconst columns = computed(() =>\n  orderColumnsBy(\n    reorderable.value\n      ? props.table.columns\n      : props.table.columns.filter((column) => column.toggleable),\n    orderDraft.value,\n  ),\n)\nconst appliedNames = computed(() => props.table.columns.map((column) => column.name))\nconst names = computed(() => orderDraft.value ?? appliedNames.value)\nconst orderChanged = computed(\n  () => orderDraft.value !== null && columnOrderChanged(appliedNames.value, orderDraft.value),\n)\nconst positions = computed(() =>\n  Object.fromEntries(\n    columns.value.map((column) => [\n      column.name,\n      columnManagerPosition(names.value, column.name, props.table.columnGroups),\n    ]),\n  ),\n)\n\n// The server's order replaces the one shown while saving.\nwatch(\n  () => props.table.columns,\n  () => {\n    if (!deferred.value) orderDraft.value = null\n  },\n)\nconst visible = computed(() => draft.value ?? props.table.visibleColumns)\n\nconst trigger = computed(() =>\n  triggerButtonView(props.table, 'columnManager', {\n    label: t('table.columns', {}, 'Columns'),\n    showLabel: false,\n  }),\n)\nconst resetView = computed(() =>\n  triggerButtonView(props.table, 'columnManagerReset', {\n    label: toggleable.value\n      ? t('table.reset_columns', {}, 'Reset')\n      : t('table.reset_column_order', {}, 'Reset column order'),\n    variant: 'ghost',\n  }),\n)\nconst applyView = computed(() =>\n  deferred.value\n    ? triggerButtonView(props.table, 'columnManagerApply', {\n        label: t('table_filters.apply', {}, 'Apply'),\n        variant: 'default',\n      })\n    : null,\n)\nconst inHeader = computed(() => props.table.columnManagerResetActionPosition === 'header')\nconst draftChanged = computed(\n  () => draft.value !== null && columnDraftChanged(props.table.visibleColumns, draft.value),\n)\n\nconst toggle = (name: string) => {\n  const next = toggleVisibleColumn(visible.value, name)\n\n  if (deferred.value) {\n    draft.value = next\n  } else {\n    visitTable(props.table.identifier, { columns: next }, ['page'])\n  }\n}\n\nconst dragStart = (event: DragEvent, name: string) => {\n  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'\n  dragging.value = name\n}\n\nconst dragOver = (event: DragEvent, name: string) => {\n  if (dragging.value === null) return\n\n  event.preventDefault()\n  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'\n  dropTarget.value = name\n}\n\nconst drop = (name: string) => {\n  if (dragging.value !== null && dragging.value !== name) {\n    reorder(dragging.value, moveColumnTo(names.value, dragging.value, name))\n  }\n\n  dragging.value = null\n  dropTarget.value = null\n}\n\nconst save = async (order: string[]): Promise<boolean> => {\n  const endpoint = panel.value.endpoints.tableColumns\n\n  if (!endpoint) return false\n\n  saving.value = true\n\n  try {\n    await saveColumnOrder(endpoint, props.token, props.component, order)\n\n    return true\n  } catch (error) {\n    showToast({\n      id: 'alfakit-column-order-failed',\n      title: t('table.column_order_failed', {}, \"Couldn't save the column order\"),\n      body: error instanceof Error ? error.message : String(error),\n      status: 'danger',\n      format: 'alfakit',\n    })\n\n    return false\n  } finally {\n    saving.value = false\n  }\n}\n\nconst positionText = (name: string) => {\n  const { position, count, group } = positions.value[name] ?? { position: 0, count: 0 }\n\n  return group\n    ? t(\n        'table.column_manager.position_in_group',\n        { position, count, group },\n        `Position ${position} of ${count} in ${group}.`,\n      )\n    : t('table.column_manager.position', { position, count }, `Position ${position} of ${count}.`)\n}\n\nconst announce = (name: string, order: string[]) => {\n  const { position, count, group } = columnManagerPosition(order, name, props.table.columnGroups)\n  const label = props.table.columns.find((column) => column.name === name)?.label ?? name\n  const replace = { column: label, position, count, group: group ?? '' }\n\n  announcement.value = group\n    ? deferred.value\n      ? t(\n          'table.column_manager.reordered_in_group_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered_in_group',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}.`,\n        )\n    : deferred.value\n      ? t(\n          'table.column_manager.reordered_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered',\n          replace,\n          `${label} moved to position ${position} of ${count}.`,\n        )\n}\n\n// A new order: kept as a draft until \"Apply\" (`deferColumnManager()`), else saved now.\nconst reorder = (name: string, order: string[]) => {\n  if (saving.value || !columnOrderChanged(names.value, order)) return\n\n  orderDraft.value = order\n  announcement.value = ''\n\n  if (deferred.value) {\n    announce(name, order)\n\n    return\n  }\n\n  void save(order).then((saved) => {\n    if (saved) announce(name, order)\n    else orderDraft.value = null\n  })\n}\n\nconst move = (name: string, offset: -1 | 1, event: MouseEvent) => {\n  keepMoveButtonFocus(event.currentTarget as HTMLElement | null)\n  reorder(name, moveColumnInManager(names.value, name, offset, props.table.columnGroups))\n}\n\nconst apply = () => {\n  if (orderDraft.value && orderChanged.value) void save(orderDraft.value)\n\n  if (draft.value && columnDraftChanged(props.table.visibleColumns, draft.value)) {\n    visitTable(props.table.identifier, { columns: draft.value }, ['page'])\n  }\n\n  draft.value = null\n  orderDraft.value = null\n  announcement.value = ''\n  open.value = false\n}\n\n// Reset: the defined column order and, for toggleable columns, the default visibility.\nconst reset = () => {\n  if (reorderable.value) {\n    orderDraft.value = null\n    void save([])\n  }\n\n  if (toggleable.value) {\n    draft.value = null\n    visitTable(props.table.identifier, { columns: defaultVisibleColumns(props.table) }, ['page'])\n  }\n}\n\nconst setOpen = (next: boolean) => {\n  // Closing without \"Apply\" drops the draft.\n  if (!next) {\n    draft.value = null\n    if (deferred.value) orderDraft.value = null\n    announcement.value = ''\n  }\n  open.value = next\n}\n\nconst [DefineBody, ManagerBody] = createReusableTemplate()\nconst [DefineReset, ResetButton] = createReusableTemplate()\n</script>\n\n<template>\n  <template v-if=\"(toggleable || reorderable) && trigger\">\n    <DefineReset>\n      <TableTriggerButton\n        v-if=\"resetView\"\n        :view=\"resetView\"\n        :disabled=\"saving\"\n        data-slot=\"column-manager-reset\"\n        :class=\"cn(!applyView && 'w-full')\"\n        @click=\"reset\"\n      />\n    </DefineReset>\n    <DefineBody>\n      <div class=\"flex flex-col gap-1\">\n        <div v-if=\"inHeader && resetView\" class=\"flex justify-end\"><ResetButton /></div>\n        <ul\n          :class=\"\n            cn(\n              props.table.columnManagerColumns\n                ? ['grid gap-0.5', gridColumnsClasses(props.table.columnManagerColumns)]\n                : 'flex flex-col gap-0.5',\n            )\n          \"\n          :aria-label=\"t('table.columns', {}, 'Columns')\"\n        >\n          <li\n            v-for=\"column in columns\"\n            :key=\"column.name\"\n            :data-column=\"column.name\"\n            :draggable=\"reorderable && !saving\"\n            :class=\"\n              cn(\n                'flex items-center gap-2 rounded-md px-2 py-1 text-sm',\n                reorderable && 'cursor-grab',\n                dragging === column.name && 'opacity-50',\n                dropTarget === column.name && dragging !== column.name && 'bg-muted',\n              )\n            \"\n            @dragstart=\"dragStart($event, column.name)\"\n            @dragover=\"dragOver($event, column.name)\"\n            @dragleave=\"dropTarget === column.name && (dropTarget = null)\"\n            @dragend=\"((dragging = null), (dropTarget = null))\"\n            @drop.prevent=\"drop(column.name)\"\n          >\n            <GripVerticalIcon\n              v-if=\"reorderable\"\n              class=\"text-muted-foreground size-4 shrink-0\"\n              aria-hidden=\"true\"\n            />\n            <label v-if=\"column.toggleable\" class=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Checkbox\n                :model-value=\"visible.includes(column.name)\"\n                @update:model-value=\"toggle(column.name)\"\n              />\n              <span class=\"truncate\">{{ column.label }}</span>\n            </label>\n            <span v-else class=\"min-w-0 flex-1 truncate\">{{ column.label }}</span>\n            <span v-if=\"reorderable\" class=\"flex shrink-0 items-center\">\n              <span\n                :id=\"`${idBase}-${column.name}-position`\"\n                class=\"sr-only\"\n                data-slot=\"column-manager-position\"\n                >{{ positionText(column.name) }}</span\n              >\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"(positions[column.name]?.position ?? 0) <= 1\"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_up', { column: column.label }, `Move ${column.label} up`)\n                \"\n                @click=\"move(column.name, -1, $event)\"\n                ><ChevronUpIcon\n              /></Button>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"\n                  (positions[column.name]?.position ?? 0) >= (positions[column.name]?.count ?? 0)\n                \"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_down', { column: column.label }, `Move ${column.label} down`)\n                \"\n                @click=\"move(column.name, 1, $event)\"\n                ><ChevronDownIcon\n              /></Button>\n            </span>\n          </li>\n        </ul>\n        <div\n          v-if=\"reorderable\"\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          class=\"sr-only\"\n          data-slot=\"column-manager-announcement\"\n        >\n          {{ announcement }}\n        </div>\n        <div\n          v-if=\"(!inHeader && resetView) || applyView\"\n          class=\"mt-1 flex items-center justify-end gap-2\"\n        >\n          <ResetButton v-if=\"!inHeader\" />\n          <TableTriggerButton\n            v-if=\"applyView\"\n            :view=\"applyView\"\n            data-slot=\"column-manager-apply\"\n            :disabled=\"!draftChanged && !orderChanged\"\n            @click=\"apply\"\n          />\n        </div>\n      </div>\n    </DefineBody>\n    <Sheet\n      v-if=\"props.table.columnManagerLayout === 'modal' && modal?.slideOver\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <SheetTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </SheetTrigger>\n      <SheetContent\n        :side=\"slideOverSide(modal.slideOverPosition, direction)\"\n        :class=\"cn('flex w-full flex-col gap-0 p-0', modalWidthClass ?? 'sm:max-w-md')\"\n        data-slot=\"column-manager\"\n        data-slide-over=\"\"\n      >\n        <SheetHeader class=\"border-b\">\n          <SheetTitle>{{ modalHeading }}</SheetTitle>\n          <SheetDescription :class=\"modal.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex-1 overflow-y-auto p-4\"><ManagerBody /></div>\n      </SheetContent>\n    </Sheet>\n    <Dialog\n      v-else-if=\"props.table.columnManagerLayout === 'modal'\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <DialogTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </DialogTrigger>\n      <DialogContent :class=\"modalWidthClass ?? 'sm:max-w-lg'\" data-slot=\"column-manager\">\n        <DialogHeader>\n          <DialogTitle>{{ modalHeading }}</DialogTitle>\n          <DialogDescription :class=\"modal?.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</DialogDescription>\n        </DialogHeader>\n        <div class=\"max-h-[60vh] overflow-y-auto\"><ManagerBody /></div>\n      </DialogContent>\n    </Dialog>\n    <Popover v-else :open=\"open\" @update:open=\"setOpen\">\n      <PopoverTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        :class=\"cn('p-2', props.table.columnManagerColumns ? 'w-auto min-w-64' : 'w-64')\"\n        data-slot=\"column-manager\"\n      >\n        <ManagerBody />\n      </PopoverContent>\n    </Popover>\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColumnManager.js","names":["_sfc_main","ColumnManager_vue_vue_type_script_setup_true_lang_default","ColumnManager_default"],"sources":["../../../src/components/table/ColumnManager.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  columnDraftChanged,\n  columnManagerPosition,\n  columnOrderChanged,\n  defaultVisibleColumns,\n  FILTERS_MODAL_WIDTH_CLASSES,\n  gridColumnsClasses,\n  keepMoveButtonFocus,\n  moveColumnInManager,\n  moveColumnTo,\n  orderColumnsBy,\n  saveColumnOrder,\n  slideOverSide,\n  toggleVisibleColumn,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon, Columns3Icon, GripVerticalIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { computed, ref, useId, watch } from 'vue'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { showToast } from '../notifications/flash-toasts'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport DialogTrigger from '../ui/DialogTrigger.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport Sheet from '../ui/Sheet.vue'\nimport SheetContent from '../ui/SheetContent.vue'\nimport SheetDescription from '../ui/SheetDescription.vue'\nimport SheetHeader from '../ui/SheetHeader.vue'\nimport SheetTitle from '../ui/SheetTitle.vue'\nimport SheetTrigger from '../ui/SheetTrigger.vue'\nimport TableTriggerButton from './TableTriggerButton.vue'\n\n/**\n * The column manager: show / hide toggleable columns (kept in the query string) and, with\n * `reorderableColumns()`, move columns (stored per user on the server) by dragging a row\n * onto another or with the move up / down buttons (the keyboard path).\n *\n * `deferColumnManager()` keeps toggles in a draft until \"Apply\"; `columnManagerLayout()`\n * opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.\n */\nconst props = defineProps<{ table: TableSchema; token: string; component: string }>()\nconst t = useT()\nconst panel = usePanel()\nconst direction = useDirection()\nconst open = ref(false)\n// `columnManagerTriggerAction()` may set `slideOver()`, `modalWidth()` and the heading.\nconst modal = computed(() => props.table.triggerActions?.columnManager?.modal)\nconst modalHeading = computed(() => modal.value?.heading ?? t('table.columns', {}, 'Columns'))\nconst modalDescription = computed(() => modal.value?.description ?? props.table.pluralModelLabel)\nconst modalWidthClass = computed(() =>\n  modal.value?.width ? FILTERS_MODAL_WIDTH_CLASSES[modal.value.width] : undefined,\n)\nconst saving = ref(false)\nconst dragging = ref<string | null>(null)\nconst dropTarget = ref<string | null>(null)\n// Toggles of a deferred column manager wait here until \"Apply\".\nconst draft = ref<string[] | null>(null)\nconst reorderable = computed(() =>\n  Boolean(props.table.reorderableColumns && panel.value.endpoints.tableColumns),\n)\nconst toggleable = computed(() => Boolean(props.table.toggleableColumns))\nconst deferred = computed(() => Boolean(props.table.deferColumnManager))\n// A moved column order: the draft of a deferred column manager, or shown at once while\n// it is saved.\nconst orderDraft = ref<string[] | null>(null)\n// Screen-reader announcement of the last move.\nconst announcement = ref('')\nconst idBase = useId()\nconst columns = computed(() =>\n  orderColumnsBy(\n    reorderable.value\n      ? props.table.columns\n      : props.table.columns.filter((column) => column.toggleable),\n    orderDraft.value,\n  ),\n)\nconst appliedNames = computed(() => props.table.columns.map((column) => column.name))\nconst names = computed(() => orderDraft.value ?? appliedNames.value)\nconst orderChanged = computed(\n  () => orderDraft.value !== null && columnOrderChanged(appliedNames.value, orderDraft.value),\n)\nconst positions = computed(() =>\n  Object.fromEntries(\n    columns.value.map((column) => [\n      column.name,\n      columnManagerPosition(names.value, column.name, props.table.columnGroups),\n    ]),\n  ),\n)\n\n// The server's order replaces the one shown while saving.\nwatch(\n  () => props.table.columns,\n  () => {\n    if (!deferred.value) orderDraft.value = null\n  },\n)\nconst visible = computed(() => draft.value ?? props.table.visibleColumns)\n\nconst trigger = computed(() =>\n  triggerButtonView(props.table, 'columnManager', {\n    label: t('table.columns', {}, 'Columns'),\n    showLabel: false,\n  }),\n)\nconst resetView = computed(() =>\n  triggerButtonView(props.table, 'columnManagerReset', {\n    label: toggleable.value\n      ? t('table.reset_columns', {}, 'Reset')\n      : t('table.reset_column_order', {}, 'Reset column order'),\n    variant: 'ghost',\n  }),\n)\nconst applyView = computed(() =>\n  deferred.value\n    ? triggerButtonView(props.table, 'columnManagerApply', {\n        label: t('table_filters.apply', {}, 'Apply'),\n        variant: 'default',\n      })\n    : null,\n)\nconst inHeader = computed(() => props.table.columnManagerResetActionPosition === 'header')\nconst draftChanged = computed(\n  () => draft.value !== null && columnDraftChanged(props.table.visibleColumns, draft.value),\n)\n\nconst toggle = (name: string) => {\n  const next = toggleVisibleColumn(visible.value, name)\n\n  if (deferred.value) {\n    draft.value = next\n  } else {\n    visitTable(props.table.identifier, { columns: next }, ['page'])\n  }\n}\n\nconst dragStart = (event: DragEvent, name: string) => {\n  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'\n  dragging.value = name\n}\n\nconst dragOver = (event: DragEvent, name: string) => {\n  if (dragging.value === null) return\n\n  event.preventDefault()\n  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'\n  dropTarget.value = name\n}\n\nconst drop = (name: string) => {\n  if (dragging.value !== null && dragging.value !== name) {\n    reorder(dragging.value, moveColumnTo(names.value, dragging.value, name))\n  }\n\n  dragging.value = null\n  dropTarget.value = null\n}\n\nconst save = async (order: string[]): Promise<boolean> => {\n  const endpoint = panel.value.endpoints.tableColumns\n\n  if (!endpoint) return false\n\n  saving.value = true\n\n  try {\n    await saveColumnOrder(endpoint, props.token, props.component, order)\n\n    return true\n  } catch (error) {\n    showToast({\n      id: 'alfakit-column-order-failed',\n      title: t('table.column_order_failed', {}, \"Couldn't save the column order\"),\n      body: error instanceof Error ? error.message : String(error),\n      status: 'danger',\n      format: 'alfakit',\n    })\n\n    return false\n  } finally {\n    saving.value = false\n  }\n}\n\nconst positionText = (name: string) => {\n  const { position, count, group } = positions.value[name] ?? { position: 0, count: 0 }\n\n  return group\n    ? t(\n        'table.column_manager.position_in_group',\n        { position, count, group },\n        `Position ${position} of ${count} in ${group}.`,\n      )\n    : t('table.column_manager.position', { position, count }, `Position ${position} of ${count}.`)\n}\n\nconst announce = (name: string, order: string[]) => {\n  const { position, count, group } = columnManagerPosition(order, name, props.table.columnGroups)\n  const label = props.table.columns.find((column) => column.name === name)?.label ?? name\n  const replace = { column: label, position, count, group: group ?? '' }\n\n  announcement.value = group\n    ? deferred.value\n      ? t(\n          'table.column_manager.reordered_in_group_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered_in_group',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}.`,\n        )\n    : deferred.value\n      ? t(\n          'table.column_manager.reordered_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered',\n          replace,\n          `${label} moved to position ${position} of ${count}.`,\n        )\n}\n\n// A new order: kept as a draft until \"Apply\" (`deferColumnManager()`), else saved now.\nconst reorder = (name: string, order: string[]) => {\n  if (saving.value || !columnOrderChanged(names.value, order)) return\n\n  orderDraft.value = order\n  announcement.value = ''\n\n  if (deferred.value) {\n    announce(name, order)\n\n    return\n  }\n\n  void save(order).then((saved) => {\n    if (saved) announce(name, order)\n    else orderDraft.value = null\n  })\n}\n\nconst move = (name: string, offset: -1 | 1, event: MouseEvent) => {\n  keepMoveButtonFocus(event.currentTarget as HTMLElement | null)\n  reorder(name, moveColumnInManager(names.value, name, offset, props.table.columnGroups))\n}\n\n// The order is saved before the visibility visit: both requests share the session, and a\n// visit running alongside the save would write the old order back when it finishes.\nconst apply = async () => {\n  const order = orderDraft.value && orderChanged.value ? orderDraft.value : null\n  const columns =\n    draft.value && columnDraftChanged(props.table.visibleColumns, draft.value) ? draft.value : null\n\n  draft.value = null\n  orderDraft.value = null\n  announcement.value = ''\n  open.value = false\n\n  if (order) await save(order)\n\n  if (columns) visitTable(props.table.identifier, { columns }, ['page'])\n}\n\n// Reset: the defined column order and, for toggleable columns, the default visibility.\nconst reset = async () => {\n  if (reorderable.value) {\n    orderDraft.value = null\n    await save([])\n  }\n\n  if (toggleable.value) {\n    draft.value = null\n    visitTable(props.table.identifier, { columns: defaultVisibleColumns(props.table) }, ['page'])\n  }\n}\n\nconst setOpen = (next: boolean) => {\n  // Closing without \"Apply\" drops the draft.\n  if (!next) {\n    draft.value = null\n    if (deferred.value) orderDraft.value = null\n    announcement.value = ''\n  }\n  open.value = next\n}\n\nconst [DefineBody, ManagerBody] = createReusableTemplate()\nconst [DefineReset, ResetButton] = createReusableTemplate()\n</script>\n\n<template>\n  <template v-if=\"(toggleable || reorderable) && trigger\">\n    <DefineReset>\n      <TableTriggerButton\n        v-if=\"resetView\"\n        :view=\"resetView\"\n        :disabled=\"saving\"\n        data-slot=\"column-manager-reset\"\n        :class=\"cn(!applyView && 'w-full')\"\n        @click=\"reset\"\n      />\n    </DefineReset>\n    <DefineBody>\n      <div class=\"flex flex-col gap-1\">\n        <div v-if=\"inHeader && resetView\" class=\"flex justify-end\"><ResetButton /></div>\n        <ul\n          :class=\"\n            cn(\n              props.table.columnManagerColumns\n                ? ['grid gap-0.5', gridColumnsClasses(props.table.columnManagerColumns)]\n                : 'flex flex-col gap-0.5',\n            )\n          \"\n          :aria-label=\"t('table.columns', {}, 'Columns')\"\n        >\n          <li\n            v-for=\"column in columns\"\n            :key=\"column.name\"\n            :data-column=\"column.name\"\n            :draggable=\"reorderable && !saving\"\n            :class=\"\n              cn(\n                'flex items-center gap-2 rounded-md px-2 py-1 text-sm',\n                reorderable && 'cursor-grab',\n                dragging === column.name && 'opacity-50',\n                dropTarget === column.name && dragging !== column.name && 'bg-muted',\n              )\n            \"\n            @dragstart=\"dragStart($event, column.name)\"\n            @dragover=\"dragOver($event, column.name)\"\n            @dragleave=\"dropTarget === column.name && (dropTarget = null)\"\n            @dragend=\"((dragging = null), (dropTarget = null))\"\n            @drop.prevent=\"drop(column.name)\"\n          >\n            <GripVerticalIcon\n              v-if=\"reorderable\"\n              class=\"text-muted-foreground size-4 shrink-0\"\n              aria-hidden=\"true\"\n            />\n            <label v-if=\"column.toggleable\" class=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Checkbox\n                :model-value=\"visible.includes(column.name)\"\n                @update:model-value=\"toggle(column.name)\"\n              />\n              <span class=\"truncate\">{{ column.label }}</span>\n            </label>\n            <span v-else class=\"min-w-0 flex-1 truncate\">{{ column.label }}</span>\n            <span v-if=\"reorderable\" class=\"flex shrink-0 items-center\">\n              <span\n                :id=\"`${idBase}-${column.name}-position`\"\n                class=\"sr-only\"\n                data-slot=\"column-manager-position\"\n                >{{ positionText(column.name) }}</span\n              >\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"(positions[column.name]?.position ?? 0) <= 1\"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_up', { column: column.label }, `Move ${column.label} up`)\n                \"\n                @click=\"move(column.name, -1, $event)\"\n                ><ChevronUpIcon\n              /></Button>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"\n                  (positions[column.name]?.position ?? 0) >= (positions[column.name]?.count ?? 0)\n                \"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_down', { column: column.label }, `Move ${column.label} down`)\n                \"\n                @click=\"move(column.name, 1, $event)\"\n                ><ChevronDownIcon\n              /></Button>\n            </span>\n          </li>\n        </ul>\n        <div\n          v-if=\"reorderable\"\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          class=\"sr-only\"\n          data-slot=\"column-manager-announcement\"\n        >\n          {{ announcement }}\n        </div>\n        <div\n          v-if=\"(!inHeader && resetView) || applyView\"\n          class=\"mt-1 flex items-center justify-end gap-2\"\n        >\n          <ResetButton v-if=\"!inHeader\" />\n          <TableTriggerButton\n            v-if=\"applyView\"\n            :view=\"applyView\"\n            data-slot=\"column-manager-apply\"\n            :disabled=\"!draftChanged && !orderChanged\"\n            @click=\"apply\"\n          />\n        </div>\n      </div>\n    </DefineBody>\n    <Sheet\n      v-if=\"props.table.columnManagerLayout === 'modal' && modal?.slideOver\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <SheetTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </SheetTrigger>\n      <SheetContent\n        :side=\"slideOverSide(modal.slideOverPosition, direction)\"\n        :class=\"cn('flex w-full flex-col gap-0 p-0', modalWidthClass ?? 'sm:max-w-md')\"\n        data-slot=\"column-manager\"\n        data-slide-over=\"\"\n      >\n        <SheetHeader class=\"border-b\">\n          <SheetTitle>{{ modalHeading }}</SheetTitle>\n          <SheetDescription :class=\"modal.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex-1 overflow-y-auto p-4\"><ManagerBody /></div>\n      </SheetContent>\n    </Sheet>\n    <Dialog\n      v-else-if=\"props.table.columnManagerLayout === 'modal'\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <DialogTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </DialogTrigger>\n      <DialogContent :class=\"modalWidthClass ?? 'sm:max-w-lg'\" data-slot=\"column-manager\">\n        <DialogHeader>\n          <DialogTitle>{{ modalHeading }}</DialogTitle>\n          <DialogDescription :class=\"modal?.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</DialogDescription>\n        </DialogHeader>\n        <div class=\"max-h-[60vh] overflow-y-auto\"><ManagerBody /></div>\n      </DialogContent>\n    </Dialog>\n    <Popover v-else :open=\"open\" @update:open=\"setOpen\">\n      <PopoverTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        :class=\"cn('p-2', props.table.columnManagerColumns ? 'w-auto min-w-64' : 'w-64')\"\n        data-slot=\"column-manager\"\n      >\n        <ManagerBody />\n      </PopoverContent>\n    </Popover>\n  </template>\n</template>\n"],"mappings":""}

package/dist/components/table/ColumnManager.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnManager.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/ColumnManager.vue"],"names":[],"mappings":"AA4eA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AA4ChD;;;;;;;GAOG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC;;AAk8B5E,wBAMG"}
+{"version":3,"file":"ColumnManager.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/ColumnManager.vue"],"names":[],"mappings":"AAgfA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AA4ChD;;;;;;;GAOG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC;;AAs8B5E,wBAMG"}

package/dist/components/table/ColumnManager.vue_vue_type_script_setup_true_lang.js

@@ -134,10 +134,11 @@ var Ie = { class: "flex flex-col gap-1" }, Le = {
 			}
 		}, ct = (e, t, n) => {
 			xe(n.currentTarget), st(e, Se(U.value, e, t, D.table.columnGroups));
-		}, lt = () => {
-			z.value && W.value && Z(z.value), F.value && c(D.table.visibleColumns, F.value) && u(D.table.identifier, { columns: F.value }, ["page"]), F.value = null, z.value = null, B.value = "", k.value = !1;
-		}, ut = () => {
-			I.value && (z.value = null, Z([])), L.value && (F.value = null, u(D.table.identifier, { columns: ye(D.table) }, ["page"]));
+		}, lt = async () => {
+			let e = z.value && W.value ? z.value : null, t = F.value && c(D.table.visibleColumns, F.value) ? F.value : null;
+			F.value = null, z.value = null, B.value = "", k.value = !1, e && await Z(e), t && u(D.table.identifier, { columns: t }, ["page"]);
+		}, ut = async () => {
+			I.value && (z.value = null, await Z([])), L.value && (F.value = null, u(D.table.identifier, { columns: ye(D.table) }, ["page"]));
 		}, Q = (e) => {
 			e || (F.value = null, R.value && (z.value = null), B.value = ""), k.value = e;
 		}, [dt, $] = E(), [ft, pt] = E();

package/dist/components/table/ColumnManager.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnManager.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","_unref","_withCtx","_createBlock","TableTriggerButton","_normalizeClass","_createCommentVNode","_createElementVNode","_renderList","_withModifiers","Checkbox","_toDisplayString","Button","Sheet","SheetTrigger","Icon","SheetContent","SheetHeader","SheetTitle","_createTextVNode","SheetDescription","Dialog","DialogTrigger","DialogContent","DialogHeader","DialogTitle","DialogDescription","Popover","PopoverTrigger","PopoverContent","Icon_default","Button_default","Checkbox_default","Dialog_default","DialogContent_default","DialogDescription_default","DialogHeader_default","DialogTitle_default","DialogTrigger_default","Popover_default","PopoverContent_default","PopoverTrigger_default","Sheet_default","SheetContent_default","SheetDescription_default","SheetHeader_default","SheetTitle_default","SheetTrigger_default","TableTriggerButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","ColumnManager_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","panel","usePanel","direction","useDirection","open","ref","modal","computed","modalHeading","modalDescription","modalWidthClass","FILTERS_MODAL_WIDTH_CLASSES","saving","dragging","dropTarget","draft","reorderable","toggleable","deferred","orderDraft","announcement","idBase","useId","columns","orderColumnsBy","column","appliedNames","names","orderChanged","columnOrderChanged","positions","columnManagerPosition","visible","trigger","triggerButtonView","resetView","applyView","inHeader","draftChanged","columnDraftChanged","toggle","next","toggleVisibleColumn","name","visitTable","dragStart","event","dragOver","drop","reorder","moveColumnTo","save","endpoint","saveColumnOrder","order","error","showToast","positionText","group","position","count","announce","label","replace","saved","move","keepMoveButtonFocus","moveColumnInManager","offset","apply","reset","defaultVisibleColumns","setOpen","DefineBody","ManagerBody","createReusableTemplate","DefineReset","ResetButton","openBlock","createElementBlock","Fragment","createVNode","unref","withCtx","createBlock","normalizeClass","cn","createCommentVNode","createElementVNode","gridColumnsClasses","renderList","$event","_cache","withModifiers","GripVerticalIcon","toDisplayString","ChevronUpIcon","ChevronDownIcon","Columns3Icon","slideOverSide","createTextVNode"],"sources":["../../../src/components/table/ColumnManager.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  columnDraftChanged,\n  columnManagerPosition,\n  columnOrderChanged,\n  defaultVisibleColumns,\n  FILTERS_MODAL_WIDTH_CLASSES,\n  gridColumnsClasses,\n  keepMoveButtonFocus,\n  moveColumnInManager,\n  moveColumnTo,\n  orderColumnsBy,\n  saveColumnOrder,\n  slideOverSide,\n  toggleVisibleColumn,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon, Columns3Icon, GripVerticalIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { computed, ref, useId, watch } from 'vue'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { showToast } from '../notifications/flash-toasts'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport DialogTrigger from '../ui/DialogTrigger.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport Sheet from '../ui/Sheet.vue'\nimport SheetContent from '../ui/SheetContent.vue'\nimport SheetDescription from '../ui/SheetDescription.vue'\nimport SheetHeader from '../ui/SheetHeader.vue'\nimport SheetTitle from '../ui/SheetTitle.vue'\nimport SheetTrigger from '../ui/SheetTrigger.vue'\nimport TableTriggerButton from './TableTriggerButton.vue'\n\n/**\n * The column manager: show / hide toggleable columns (kept in the query string) and, with\n * `reorderableColumns()`, move columns (stored per user on the server) by dragging a row\n * onto another or with the move up / down buttons (the keyboard path).\n *\n * `deferColumnManager()` keeps toggles in a draft until \"Apply\"; `columnManagerLayout()`\n * opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.\n */\nconst props = defineProps<{ table: TableSchema; token: string; component: string }>()\nconst t = useT()\nconst panel = usePanel()\nconst direction = useDirection()\nconst open = ref(false)\n// `columnManagerTriggerAction()` may set `slideOver()`, `modalWidth()` and the heading.\nconst modal = computed(() => props.table.triggerActions?.columnManager?.modal)\nconst modalHeading = computed(() => modal.value?.heading ?? t('table.columns', {}, 'Columns'))\nconst modalDescription = computed(() => modal.value?.description ?? props.table.pluralModelLabel)\nconst modalWidthClass = computed(() =>\n  modal.value?.width ? FILTERS_MODAL_WIDTH_CLASSES[modal.value.width] : undefined,\n)\nconst saving = ref(false)\nconst dragging = ref<string | null>(null)\nconst dropTarget = ref<string | null>(null)\n// Toggles of a deferred column manager wait here until \"Apply\".\nconst draft = ref<string[] | null>(null)\nconst reorderable = computed(() =>\n  Boolean(props.table.reorderableColumns && panel.value.endpoints.tableColumns),\n)\nconst toggleable = computed(() => Boolean(props.table.toggleableColumns))\nconst deferred = computed(() => Boolean(props.table.deferColumnManager))\n// A moved column order: the draft of a deferred column manager, or shown at once while\n// it is saved.\nconst orderDraft = ref<string[] | null>(null)\n// Screen-reader announcement of the last move.\nconst announcement = ref('')\nconst idBase = useId()\nconst columns = computed(() =>\n  orderColumnsBy(\n    reorderable.value\n      ? props.table.columns\n      : props.table.columns.filter((column) => column.toggleable),\n    orderDraft.value,\n  ),\n)\nconst appliedNames = computed(() => props.table.columns.map((column) => column.name))\nconst names = computed(() => orderDraft.value ?? appliedNames.value)\nconst orderChanged = computed(\n  () => orderDraft.value !== null && columnOrderChanged(appliedNames.value, orderDraft.value),\n)\nconst positions = computed(() =>\n  Object.fromEntries(\n    columns.value.map((column) => [\n      column.name,\n      columnManagerPosition(names.value, column.name, props.table.columnGroups),\n    ]),\n  ),\n)\n\n// The server's order replaces the one shown while saving.\nwatch(\n  () => props.table.columns,\n  () => {\n    if (!deferred.value) orderDraft.value = null\n  },\n)\nconst visible = computed(() => draft.value ?? props.table.visibleColumns)\n\nconst trigger = computed(() =>\n  triggerButtonView(props.table, 'columnManager', {\n    label: t('table.columns', {}, 'Columns'),\n    showLabel: false,\n  }),\n)\nconst resetView = computed(() =>\n  triggerButtonView(props.table, 'columnManagerReset', {\n    label: toggleable.value\n      ? t('table.reset_columns', {}, 'Reset')\n      : t('table.reset_column_order', {}, 'Reset column order'),\n    variant: 'ghost',\n  }),\n)\nconst applyView = computed(() =>\n  deferred.value\n    ? triggerButtonView(props.table, 'columnManagerApply', {\n        label: t('table_filters.apply', {}, 'Apply'),\n        variant: 'default',\n      })\n    : null,\n)\nconst inHeader = computed(() => props.table.columnManagerResetActionPosition === 'header')\nconst draftChanged = computed(\n  () => draft.value !== null && columnDraftChanged(props.table.visibleColumns, draft.value),\n)\n\nconst toggle = (name: string) => {\n  const next = toggleVisibleColumn(visible.value, name)\n\n  if (deferred.value) {\n    draft.value = next\n  } else {\n    visitTable(props.table.identifier, { columns: next }, ['page'])\n  }\n}\n\nconst dragStart = (event: DragEvent, name: string) => {\n  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'\n  dragging.value = name\n}\n\nconst dragOver = (event: DragEvent, name: string) => {\n  if (dragging.value === null) return\n\n  event.preventDefault()\n  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'\n  dropTarget.value = name\n}\n\nconst drop = (name: string) => {\n  if (dragging.value !== null && dragging.value !== name) {\n    reorder(dragging.value, moveColumnTo(names.value, dragging.value, name))\n  }\n\n  dragging.value = null\n  dropTarget.value = null\n}\n\nconst save = async (order: string[]): Promise<boolean> => {\n  const endpoint = panel.value.endpoints.tableColumns\n\n  if (!endpoint) return false\n\n  saving.value = true\n\n  try {\n    await saveColumnOrder(endpoint, props.token, props.component, order)\n\n    return true\n  } catch (error) {\n    showToast({\n      id: 'alfakit-column-order-failed',\n      title: t('table.column_order_failed', {}, \"Couldn't save the column order\"),\n      body: error instanceof Error ? error.message : String(error),\n      status: 'danger',\n      format: 'alfakit',\n    })\n\n    return false\n  } finally {\n    saving.value = false\n  }\n}\n\nconst positionText = (name: string) => {\n  const { position, count, group } = positions.value[name] ?? { position: 0, count: 0 }\n\n  return group\n    ? t(\n        'table.column_manager.position_in_group',\n        { position, count, group },\n        `Position ${position} of ${count} in ${group}.`,\n      )\n    : t('table.column_manager.position', { position, count }, `Position ${position} of ${count}.`)\n}\n\nconst announce = (name: string, order: string[]) => {\n  const { position, count, group } = columnManagerPosition(order, name, props.table.columnGroups)\n  const label = props.table.columns.find((column) => column.name === name)?.label ?? name\n  const replace = { column: label, position, count, group: group ?? '' }\n\n  announcement.value = group\n    ? deferred.value\n      ? t(\n          'table.column_manager.reordered_in_group_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered_in_group',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}.`,\n        )\n    : deferred.value\n      ? t(\n          'table.column_manager.reordered_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered',\n          replace,\n          `${label} moved to position ${position} of ${count}.`,\n        )\n}\n\n// A new order: kept as a draft until \"Apply\" (`deferColumnManager()`), else saved now.\nconst reorder = (name: string, order: string[]) => {\n  if (saving.value || !columnOrderChanged(names.value, order)) return\n\n  orderDraft.value = order\n  announcement.value = ''\n\n  if (deferred.value) {\n    announce(name, order)\n\n    return\n  }\n\n  void save(order).then((saved) => {\n    if (saved) announce(name, order)\n    else orderDraft.value = null\n  })\n}\n\nconst move = (name: string, offset: -1 | 1, event: MouseEvent) => {\n  keepMoveButtonFocus(event.currentTarget as HTMLElement | null)\n  reorder(name, moveColumnInManager(names.value, name, offset, props.table.columnGroups))\n}\n\nconst apply = () => {\n  if (orderDraft.value && orderChanged.value) void save(orderDraft.value)\n\n  if (draft.value && columnDraftChanged(props.table.visibleColumns, draft.value)) {\n    visitTable(props.table.identifier, { columns: draft.value }, ['page'])\n  }\n\n  draft.value = null\n  orderDraft.value = null\n  announcement.value = ''\n  open.value = false\n}\n\n// Reset: the defined column order and, for toggleable columns, the default visibility.\nconst reset = () => {\n  if (reorderable.value) {\n    orderDraft.value = null\n    void save([])\n  }\n\n  if (toggleable.value) {\n    draft.value = null\n    visitTable(props.table.identifier, { columns: defaultVisibleColumns(props.table) }, ['page'])\n  }\n}\n\nconst setOpen = (next: boolean) => {\n  // Closing without \"Apply\" drops the draft.\n  if (!next) {\n    draft.value = null\n    if (deferred.value) orderDraft.value = null\n    announcement.value = ''\n  }\n  open.value = next\n}\n\nconst [DefineBody, ManagerBody] = createReusableTemplate()\nconst [DefineReset, ResetButton] = createReusableTemplate()\n</script>\n\n<template>\n  <template v-if=\"(toggleable || reorderable) && trigger\">\n    <DefineReset>\n      <TableTriggerButton\n        v-if=\"resetView\"\n        :view=\"resetView\"\n        :disabled=\"saving\"\n        data-slot=\"column-manager-reset\"\n        :class=\"cn(!applyView && 'w-full')\"\n        @click=\"reset\"\n      />\n    </DefineReset>\n    <DefineBody>\n      <div class=\"flex flex-col gap-1\">\n        <div v-if=\"inHeader && resetView\" class=\"flex justify-end\"><ResetButton /></div>\n        <ul\n          :class=\"\n            cn(\n              props.table.columnManagerColumns\n                ? ['grid gap-0.5', gridColumnsClasses(props.table.columnManagerColumns)]\n                : 'flex flex-col gap-0.5',\n            )\n          \"\n          :aria-label=\"t('table.columns', {}, 'Columns')\"\n        >\n          <li\n            v-for=\"column in columns\"\n            :key=\"column.name\"\n            :data-column=\"column.name\"\n            :draggable=\"reorderable && !saving\"\n            :class=\"\n              cn(\n                'flex items-center gap-2 rounded-md px-2 py-1 text-sm',\n                reorderable && 'cursor-grab',\n                dragging === column.name && 'opacity-50',\n                dropTarget === column.name && dragging !== column.name && 'bg-muted',\n              )\n            \"\n            @dragstart=\"dragStart($event, column.name)\"\n            @dragover=\"dragOver($event, column.name)\"\n            @dragleave=\"dropTarget === column.name && (dropTarget = null)\"\n            @dragend=\"((dragging = null), (dropTarget = null))\"\n            @drop.prevent=\"drop(column.name)\"\n          >\n            <GripVerticalIcon\n              v-if=\"reorderable\"\n              class=\"text-muted-foreground size-4 shrink-0\"\n              aria-hidden=\"true\"\n            />\n            <label v-if=\"column.toggleable\" class=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Checkbox\n                :model-value=\"visible.includes(column.name)\"\n                @update:model-value=\"toggle(column.name)\"\n              />\n              <span class=\"truncate\">{{ column.label }}</span>\n            </label>\n            <span v-else class=\"min-w-0 flex-1 truncate\">{{ column.label }}</span>\n            <span v-if=\"reorderable\" class=\"flex shrink-0 items-center\">\n              <span\n                :id=\"`${idBase}-${column.name}-position`\"\n                class=\"sr-only\"\n                data-slot=\"column-manager-position\"\n                >{{ positionText(column.name) }}</span\n              >\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"(positions[column.name]?.position ?? 0) <= 1\"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_up', { column: column.label }, `Move ${column.label} up`)\n                \"\n                @click=\"move(column.name, -1, $event)\"\n                ><ChevronUpIcon\n              /></Button>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"\n                  (positions[column.name]?.position ?? 0) >= (positions[column.name]?.count ?? 0)\n                \"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_down', { column: column.label }, `Move ${column.label} down`)\n                \"\n                @click=\"move(column.name, 1, $event)\"\n                ><ChevronDownIcon\n              /></Button>\n            </span>\n          </li>\n        </ul>\n        <div\n          v-if=\"reorderable\"\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          class=\"sr-only\"\n          data-slot=\"column-manager-announcement\"\n        >\n          {{ announcement }}\n        </div>\n        <div\n          v-if=\"(!inHeader && resetView) || applyView\"\n          class=\"mt-1 flex items-center justify-end gap-2\"\n        >\n          <ResetButton v-if=\"!inHeader\" />\n          <TableTriggerButton\n            v-if=\"applyView\"\n            :view=\"applyView\"\n            data-slot=\"column-manager-apply\"\n            :disabled=\"!draftChanged && !orderChanged\"\n            @click=\"apply\"\n          />\n        </div>\n      </div>\n    </DefineBody>\n    <Sheet\n      v-if=\"props.table.columnManagerLayout === 'modal' && modal?.slideOver\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <SheetTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </SheetTrigger>\n      <SheetContent\n        :side=\"slideOverSide(modal.slideOverPosition, direction)\"\n        :class=\"cn('flex w-full flex-col gap-0 p-0', modalWidthClass ?? 'sm:max-w-md')\"\n        data-slot=\"column-manager\"\n        data-slide-over=\"\"\n      >\n        <SheetHeader class=\"border-b\">\n          <SheetTitle>{{ modalHeading }}</SheetTitle>\n          <SheetDescription :class=\"modal.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex-1 overflow-y-auto p-4\"><ManagerBody /></div>\n      </SheetContent>\n    </Sheet>\n    <Dialog\n      v-else-if=\"props.table.columnManagerLayout === 'modal'\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <DialogTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </DialogTrigger>\n      <DialogContent :class=\"modalWidthClass ?? 'sm:max-w-lg'\" data-slot=\"column-manager\">\n        <DialogHeader>\n          <DialogTitle>{{ modalHeading }}</DialogTitle>\n          <DialogDescription :class=\"modal?.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</DialogDescription>\n        </DialogHeader>\n        <div class=\"max-h-[60vh] overflow-y-auto\"><ManagerBody /></div>\n      </DialogContent>\n    </Dialog>\n    <Popover v-else :open=\"open\" @update:open=\"setOpen\">\n      <PopoverTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        :class=\"cn('p-2', props.table.columnManagerColumns ? 'w-auto min-w-64' : 'w-64')\"\n        data-slot=\"column-manager\"\n      >\n        <ManagerBody />\n      </PopoverContent>\n    </Popover>\n  </template>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"ColumnManager.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","_unref","_withCtx","_createBlock","TableTriggerButton","_normalizeClass","_createCommentVNode","_createElementVNode","_renderList","_withModifiers","Checkbox","_toDisplayString","Button","Sheet","SheetTrigger","Icon","SheetContent","SheetHeader","SheetTitle","_createTextVNode","SheetDescription","Dialog","DialogTrigger","DialogContent","DialogHeader","DialogTitle","DialogDescription","Popover","PopoverTrigger","PopoverContent","Icon_default","Button_default","Checkbox_default","Dialog_default","DialogContent_default","DialogDescription_default","DialogHeader_default","DialogTitle_default","DialogTrigger_default","Popover_default","PopoverContent_default","PopoverTrigger_default","Sheet_default","SheetContent_default","SheetDescription_default","SheetHeader_default","SheetTitle_default","SheetTrigger_default","TableTriggerButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","ColumnManager_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","panel","usePanel","direction","useDirection","open","ref","modal","computed","modalHeading","modalDescription","modalWidthClass","FILTERS_MODAL_WIDTH_CLASSES","saving","dragging","dropTarget","draft","reorderable","toggleable","deferred","orderDraft","announcement","idBase","useId","columns","orderColumnsBy","column","appliedNames","names","orderChanged","columnOrderChanged","positions","columnManagerPosition","visible","trigger","triggerButtonView","resetView","applyView","inHeader","draftChanged","columnDraftChanged","toggle","next","toggleVisibleColumn","name","visitTable","dragStart","event","dragOver","drop","reorder","moveColumnTo","save","endpoint","saveColumnOrder","order","error","showToast","positionText","group","position","count","announce","label","replace","saved","move","keepMoveButtonFocus","moveColumnInManager","offset","apply","reset","defaultVisibleColumns","setOpen","DefineBody","ManagerBody","createReusableTemplate","DefineReset","ResetButton","openBlock","createElementBlock","Fragment","createVNode","unref","withCtx","createBlock","normalizeClass","cn","createCommentVNode","createElementVNode","gridColumnsClasses","renderList","$event","_cache","withModifiers","GripVerticalIcon","toDisplayString","ChevronUpIcon","ChevronDownIcon","Columns3Icon","slideOverSide","createTextVNode"],"sources":["../../../src/components/table/ColumnManager.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  columnDraftChanged,\n  columnManagerPosition,\n  columnOrderChanged,\n  defaultVisibleColumns,\n  FILTERS_MODAL_WIDTH_CLASSES,\n  gridColumnsClasses,\n  keepMoveButtonFocus,\n  moveColumnInManager,\n  moveColumnTo,\n  orderColumnsBy,\n  saveColumnOrder,\n  slideOverSide,\n  toggleVisibleColumn,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon, Columns3Icon, GripVerticalIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { computed, ref, useId, watch } from 'vue'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { showToast } from '../notifications/flash-toasts'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport DialogTrigger from '../ui/DialogTrigger.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport Sheet from '../ui/Sheet.vue'\nimport SheetContent from '../ui/SheetContent.vue'\nimport SheetDescription from '../ui/SheetDescription.vue'\nimport SheetHeader from '../ui/SheetHeader.vue'\nimport SheetTitle from '../ui/SheetTitle.vue'\nimport SheetTrigger from '../ui/SheetTrigger.vue'\nimport TableTriggerButton from './TableTriggerButton.vue'\n\n/**\n * The column manager: show / hide toggleable columns (kept in the query string) and, with\n * `reorderableColumns()`, move columns (stored per user on the server) by dragging a row\n * onto another or with the move up / down buttons (the keyboard path).\n *\n * `deferColumnManager()` keeps toggles in a draft until \"Apply\"; `columnManagerLayout()`\n * opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.\n */\nconst props = defineProps<{ table: TableSchema; token: string; component: string }>()\nconst t = useT()\nconst panel = usePanel()\nconst direction = useDirection()\nconst open = ref(false)\n// `columnManagerTriggerAction()` may set `slideOver()`, `modalWidth()` and the heading.\nconst modal = computed(() => props.table.triggerActions?.columnManager?.modal)\nconst modalHeading = computed(() => modal.value?.heading ?? t('table.columns', {}, 'Columns'))\nconst modalDescription = computed(() => modal.value?.description ?? props.table.pluralModelLabel)\nconst modalWidthClass = computed(() =>\n  modal.value?.width ? FILTERS_MODAL_WIDTH_CLASSES[modal.value.width] : undefined,\n)\nconst saving = ref(false)\nconst dragging = ref<string | null>(null)\nconst dropTarget = ref<string | null>(null)\n// Toggles of a deferred column manager wait here until \"Apply\".\nconst draft = ref<string[] | null>(null)\nconst reorderable = computed(() =>\n  Boolean(props.table.reorderableColumns && panel.value.endpoints.tableColumns),\n)\nconst toggleable = computed(() => Boolean(props.table.toggleableColumns))\nconst deferred = computed(() => Boolean(props.table.deferColumnManager))\n// A moved column order: the draft of a deferred column manager, or shown at once while\n// it is saved.\nconst orderDraft = ref<string[] | null>(null)\n// Screen-reader announcement of the last move.\nconst announcement = ref('')\nconst idBase = useId()\nconst columns = computed(() =>\n  orderColumnsBy(\n    reorderable.value\n      ? props.table.columns\n      : props.table.columns.filter((column) => column.toggleable),\n    orderDraft.value,\n  ),\n)\nconst appliedNames = computed(() => props.table.columns.map((column) => column.name))\nconst names = computed(() => orderDraft.value ?? appliedNames.value)\nconst orderChanged = computed(\n  () => orderDraft.value !== null && columnOrderChanged(appliedNames.value, orderDraft.value),\n)\nconst positions = computed(() =>\n  Object.fromEntries(\n    columns.value.map((column) => [\n      column.name,\n      columnManagerPosition(names.value, column.name, props.table.columnGroups),\n    ]),\n  ),\n)\n\n// The server's order replaces the one shown while saving.\nwatch(\n  () => props.table.columns,\n  () => {\n    if (!deferred.value) orderDraft.value = null\n  },\n)\nconst visible = computed(() => draft.value ?? props.table.visibleColumns)\n\nconst trigger = computed(() =>\n  triggerButtonView(props.table, 'columnManager', {\n    label: t('table.columns', {}, 'Columns'),\n    showLabel: false,\n  }),\n)\nconst resetView = computed(() =>\n  triggerButtonView(props.table, 'columnManagerReset', {\n    label: toggleable.value\n      ? t('table.reset_columns', {}, 'Reset')\n      : t('table.reset_column_order', {}, 'Reset column order'),\n    variant: 'ghost',\n  }),\n)\nconst applyView = computed(() =>\n  deferred.value\n    ? triggerButtonView(props.table, 'columnManagerApply', {\n        label: t('table_filters.apply', {}, 'Apply'),\n        variant: 'default',\n      })\n    : null,\n)\nconst inHeader = computed(() => props.table.columnManagerResetActionPosition === 'header')\nconst draftChanged = computed(\n  () => draft.value !== null && columnDraftChanged(props.table.visibleColumns, draft.value),\n)\n\nconst toggle = (name: string) => {\n  const next = toggleVisibleColumn(visible.value, name)\n\n  if (deferred.value) {\n    draft.value = next\n  } else {\n    visitTable(props.table.identifier, { columns: next }, ['page'])\n  }\n}\n\nconst dragStart = (event: DragEvent, name: string) => {\n  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'\n  dragging.value = name\n}\n\nconst dragOver = (event: DragEvent, name: string) => {\n  if (dragging.value === null) return\n\n  event.preventDefault()\n  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'\n  dropTarget.value = name\n}\n\nconst drop = (name: string) => {\n  if (dragging.value !== null && dragging.value !== name) {\n    reorder(dragging.value, moveColumnTo(names.value, dragging.value, name))\n  }\n\n  dragging.value = null\n  dropTarget.value = null\n}\n\nconst save = async (order: string[]): Promise<boolean> => {\n  const endpoint = panel.value.endpoints.tableColumns\n\n  if (!endpoint) return false\n\n  saving.value = true\n\n  try {\n    await saveColumnOrder(endpoint, props.token, props.component, order)\n\n    return true\n  } catch (error) {\n    showToast({\n      id: 'alfakit-column-order-failed',\n      title: t('table.column_order_failed', {}, \"Couldn't save the column order\"),\n      body: error instanceof Error ? error.message : String(error),\n      status: 'danger',\n      format: 'alfakit',\n    })\n\n    return false\n  } finally {\n    saving.value = false\n  }\n}\n\nconst positionText = (name: string) => {\n  const { position, count, group } = positions.value[name] ?? { position: 0, count: 0 }\n\n  return group\n    ? t(\n        'table.column_manager.position_in_group',\n        { position, count, group },\n        `Position ${position} of ${count} in ${group}.`,\n      )\n    : t('table.column_manager.position', { position, count }, `Position ${position} of ${count}.`)\n}\n\nconst announce = (name: string, order: string[]) => {\n  const { position, count, group } = columnManagerPosition(order, name, props.table.columnGroups)\n  const label = props.table.columns.find((column) => column.name === name)?.label ?? name\n  const replace = { column: label, position, count, group: group ?? '' }\n\n  announcement.value = group\n    ? deferred.value\n      ? t(\n          'table.column_manager.reordered_in_group_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered_in_group',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}.`,\n        )\n    : deferred.value\n      ? t(\n          'table.column_manager.reordered_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered',\n          replace,\n          `${label} moved to position ${position} of ${count}.`,\n        )\n}\n\n// A new order: kept as a draft until \"Apply\" (`deferColumnManager()`), else saved now.\nconst reorder = (name: string, order: string[]) => {\n  if (saving.value || !columnOrderChanged(names.value, order)) return\n\n  orderDraft.value = order\n  announcement.value = ''\n\n  if (deferred.value) {\n    announce(name, order)\n\n    return\n  }\n\n  void save(order).then((saved) => {\n    if (saved) announce(name, order)\n    else orderDraft.value = null\n  })\n}\n\nconst move = (name: string, offset: -1 | 1, event: MouseEvent) => {\n  keepMoveButtonFocus(event.currentTarget as HTMLElement | null)\n  reorder(name, moveColumnInManager(names.value, name, offset, props.table.columnGroups))\n}\n\n// The order is saved before the visibility visit: both requests share the session, and a\n// visit running alongside the save would write the old order back when it finishes.\nconst apply = async () => {\n  const order = orderDraft.value && orderChanged.value ? orderDraft.value : null\n  const columns =\n    draft.value && columnDraftChanged(props.table.visibleColumns, draft.value) ? draft.value : null\n\n  draft.value = null\n  orderDraft.value = null\n  announcement.value = ''\n  open.value = false\n\n  if (order) await save(order)\n\n  if (columns) visitTable(props.table.identifier, { columns }, ['page'])\n}\n\n// Reset: the defined column order and, for toggleable columns, the default visibility.\nconst reset = async () => {\n  if (reorderable.value) {\n    orderDraft.value = null\n    await save([])\n  }\n\n  if (toggleable.value) {\n    draft.value = null\n    visitTable(props.table.identifier, { columns: defaultVisibleColumns(props.table) }, ['page'])\n  }\n}\n\nconst setOpen = (next: boolean) => {\n  // Closing without \"Apply\" drops the draft.\n  if (!next) {\n    draft.value = null\n    if (deferred.value) orderDraft.value = null\n    announcement.value = ''\n  }\n  open.value = next\n}\n\nconst [DefineBody, ManagerBody] = createReusableTemplate()\nconst [DefineReset, ResetButton] = createReusableTemplate()\n</script>\n\n<template>\n  <template v-if=\"(toggleable || reorderable) && trigger\">\n    <DefineReset>\n      <TableTriggerButton\n        v-if=\"resetView\"\n        :view=\"resetView\"\n        :disabled=\"saving\"\n        data-slot=\"column-manager-reset\"\n        :class=\"cn(!applyView && 'w-full')\"\n        @click=\"reset\"\n      />\n    </DefineReset>\n    <DefineBody>\n      <div class=\"flex flex-col gap-1\">\n        <div v-if=\"inHeader && resetView\" class=\"flex justify-end\"><ResetButton /></div>\n        <ul\n          :class=\"\n            cn(\n              props.table.columnManagerColumns\n                ? ['grid gap-0.5', gridColumnsClasses(props.table.columnManagerColumns)]\n                : 'flex flex-col gap-0.5',\n            )\n          \"\n          :aria-label=\"t('table.columns', {}, 'Columns')\"\n        >\n          <li\n            v-for=\"column in columns\"\n            :key=\"column.name\"\n            :data-column=\"column.name\"\n            :draggable=\"reorderable && !saving\"\n            :class=\"\n              cn(\n                'flex items-center gap-2 rounded-md px-2 py-1 text-sm',\n                reorderable && 'cursor-grab',\n                dragging === column.name && 'opacity-50',\n                dropTarget === column.name && dragging !== column.name && 'bg-muted',\n              )\n            \"\n            @dragstart=\"dragStart($event, column.name)\"\n            @dragover=\"dragOver($event, column.name)\"\n            @dragleave=\"dropTarget === column.name && (dropTarget = null)\"\n            @dragend=\"((dragging = null), (dropTarget = null))\"\n            @drop.prevent=\"drop(column.name)\"\n          >\n            <GripVerticalIcon\n              v-if=\"reorderable\"\n              class=\"text-muted-foreground size-4 shrink-0\"\n              aria-hidden=\"true\"\n            />\n            <label v-if=\"column.toggleable\" class=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Checkbox\n                :model-value=\"visible.includes(column.name)\"\n                @update:model-value=\"toggle(column.name)\"\n              />\n              <span class=\"truncate\">{{ column.label }}</span>\n            </label>\n            <span v-else class=\"min-w-0 flex-1 truncate\">{{ column.label }}</span>\n            <span v-if=\"reorderable\" class=\"flex shrink-0 items-center\">\n              <span\n                :id=\"`${idBase}-${column.name}-position`\"\n                class=\"sr-only\"\n                data-slot=\"column-manager-position\"\n                >{{ positionText(column.name) }}</span\n              >\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"(positions[column.name]?.position ?? 0) <= 1\"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_up', { column: column.label }, `Move ${column.label} up`)\n                \"\n                @click=\"move(column.name, -1, $event)\"\n                ><ChevronUpIcon\n              /></Button>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"\n                  (positions[column.name]?.position ?? 0) >= (positions[column.name]?.count ?? 0)\n                \"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_down', { column: column.label }, `Move ${column.label} down`)\n                \"\n                @click=\"move(column.name, 1, $event)\"\n                ><ChevronDownIcon\n              /></Button>\n            </span>\n          </li>\n        </ul>\n        <div\n          v-if=\"reorderable\"\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          class=\"sr-only\"\n          data-slot=\"column-manager-announcement\"\n        >\n          {{ announcement }}\n        </div>\n        <div\n          v-if=\"(!inHeader && resetView) || applyView\"\n          class=\"mt-1 flex items-center justify-end gap-2\"\n        >\n          <ResetButton v-if=\"!inHeader\" />\n          <TableTriggerButton\n            v-if=\"applyView\"\n            :view=\"applyView\"\n            data-slot=\"column-manager-apply\"\n            :disabled=\"!draftChanged && !orderChanged\"\n            @click=\"apply\"\n          />\n        </div>\n      </div>\n    </DefineBody>\n    <Sheet\n      v-if=\"props.table.columnManagerLayout === 'modal' && modal?.slideOver\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <SheetTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </SheetTrigger>\n      <SheetContent\n        :side=\"slideOverSide(modal.slideOverPosition, direction)\"\n        :class=\"cn('flex w-full flex-col gap-0 p-0', modalWidthClass ?? 'sm:max-w-md')\"\n        data-slot=\"column-manager\"\n        data-slide-over=\"\"\n      >\n        <SheetHeader class=\"border-b\">\n          <SheetTitle>{{ modalHeading }}</SheetTitle>\n          <SheetDescription :class=\"modal.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex-1 overflow-y-auto p-4\"><ManagerBody /></div>\n      </SheetContent>\n    </Sheet>\n    <Dialog\n      v-else-if=\"props.table.columnManagerLayout === 'modal'\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <DialogTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </DialogTrigger>\n      <DialogContent :class=\"modalWidthClass ?? 'sm:max-w-lg'\" data-slot=\"column-manager\">\n        <DialogHeader>\n          <DialogTitle>{{ modalHeading }}</DialogTitle>\n          <DialogDescription :class=\"modal?.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</DialogDescription>\n        </DialogHeader>\n        <div class=\"max-h-[60vh] overflow-y-auto\"><ManagerBody /></div>\n      </DialogContent>\n    </Dialog>\n    <Popover v-else :open=\"open\" @update:open=\"setOpen\">\n      <PopoverTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        :class=\"cn('p-2', props.table.columnManagerColumns ? 'w-auto min-w-64' : 'w-64')\"\n        data-slot=\"column-manager\"\n      >\n        <ManagerBody />\n      </PopoverContent>\n    </Popover>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAMkE,IAAQC,GACRC,IAAIC,EAAK,GACTC,KAAQC,EAAS,GACjBC,KAAYC,EAAa,GACzBC,IAAOC,EAAI,EAAK,GAEhBC,IAAQC,QAAeX,EAAM,MAAM,gBAAgB,eAAe,KAAK,GACvEY,IAAeD,QAAeD,EAAM,OAAO,WAAWR,EAAE,iBAAiB,CAAC,GAAG,SAAS,CAAC,GACvFW,KAAmBF,QAAeD,EAAM,OAAO,eAAeV,EAAM,MAAM,gBAAgB,GAC1Fc,KAAkBH,QACtBD,EAAM,OAAO,QAAQK,GAA4BL,EAAM,MAAM,SAAS,KAAA,CACxE,GACMM,IAASP,EAAI,EAAK,GAClBQ,IAAWR,EAAmB,IAAI,GAClCS,IAAaT,EAAmB,IAAI,GAEpCU,IAAQV,EAAqB,IAAI,GACjCW,IAAcT,QAClB,GAAQX,EAAM,MAAM,sBAAsBI,GAAM,MAAM,UAAU,aAClE,GACMiB,IAAaV,QAAe,EAAQX,EAAM,MAAM,iBAAkB,GAClEsB,IAAWX,QAAe,EAAQX,EAAM,MAAM,kBAAmB,GAGjEuB,IAAad,EAAqB,IAAI,GAEtCe,IAAef,EAAI,EAAE,GACrBgB,IAASC,GAAM,GACfC,KAAUhB,QACdiB,GACER,EAAY,QACRpB,EAAM,MAAM,UACZA,EAAM,MAAM,QAAQ,QAAQ,MAAW6B,EAAO,UAAU,GAC5DN,EAAW,KACb,CACF,GACMO,IAAenB,QAAeX,EAAM,MAAM,QAAQ,KAAK,MAAW6B,EAAO,IAAI,CAAC,GAC9EE,IAAQpB,QAAeY,EAAW,SAASO,EAAa,KAAK,GAC7DE,IAAerB,QACbY,EAAW,UAAU,QAAQU,GAAmBH,EAAa,OAAOP,EAAW,KAAK,CAC5F,GACMW,IAAYvB,QAChB,OAAO,YACLgB,GAAQ,MAAM,KAAK,MAAW,CAC5BE,EAAO,MACPM,GAAsBJ,EAAM,OAAOF,EAAO,MAAM7B,EAAM,MAAM,YAAY,CAC1E,CAAC,CACH,CACF;EAGA,SACQA,EAAM,MAAM,eACZ;GACJ,AAAKsB,EAAS,UAAO,EAAW,QAAQ;EAC1C,CACF;EACA,IAAMc,IAAUzB,QAAeQ,EAAM,SAASnB,EAAM,MAAM,cAAc,GAElEqC,IAAU1B,QACd2B,EAAkBtC,EAAM,OAAO,iBAAiB;GAC9C,OAAOE,EAAE,iBAAiB,CAAC,GAAG,SAAS;GACvC,WAAW;EACb,CAAC,CACH,GACMqC,IAAY5B,QAChB2B,EAAkBtC,EAAM,OAAO,sBAAsB;GACnD,OAAOqB,EAAW,QACdnB,EAAE,uBAAuB,CAAC,GAAG,OAAO,IACpCA,EAAE,4BAA4B,CAAC,GAAG,oBAAoB;GAC1D,SAAS;EACX,CAAC,CACH,GACMsC,IAAY7B,QAChBW,EAAS,QACLgB,EAAkBtC,EAAM,OAAO,sBAAsB;GACnD,OAAOE,EAAE,uBAAuB,CAAC,GAAG,OAAO;GAC3C,SAAS;EACX,CAAC,IACD,IACN,GACMuC,IAAW9B,QAAeX,EAAM,MAAM,qCAAqC,QAAQ,GACnF0C,KAAe/B,QACbQ,EAAM,UAAU,QAAQwB,EAAmB3C,EAAM,MAAM,gBAAgBmB,EAAM,KAAK,CAC1F,GAEMyB,MAAU,MAAiB;GAC/B,IAAMC,IAAOC,GAAoBV,EAAQ,OAAOW,CAAI;GAEpD,AAAIzB,EAAS,QACX,EAAM,QAAQuB,IAEdG,EAAWhD,EAAM,MAAM,YAAY,EAAE,SAAS6C,EAAK,GAAG,CAAC,MAAM,CAAC;EAElE,GAEMI,MAAa,GAAkB,MAAiB;GAEpD,AADIC,EAAM,iBAAc,EAAM,aAAa,gBAAgB,SAC3D,EAAS,QAAQH;EACnB,GAEMI,MAAY,GAAkB,MAAiB;GACnD,AAAIlC,EAAS,UAAU,SAEvBiC,EAAM,eAAe,GACjBA,EAAM,iBAAc,EAAM,aAAa,aAAa,SACxD,EAAW,QAAQH;EACrB,GAEMK,MAAQ,MAAiB;GAM7B,AALInC,EAAS,UAAU,QAAQA,EAAS,UAAU8B,KAChDM,GAAQpC,EAAS,OAAOqC,GAAavB,EAAM,OAAOd,EAAS,OAAO8B,CAAI,CAAC,GAGzE,EAAS,QAAQ,MACjB,EAAW,QAAQ;EACrB,GAEMQ,IAAO,OAAO,MAAsC;GACxD,IAAMC,IAAWpD,GAAM,MAAM,UAAU;GAEvC,IAAI,CAACoD,GAAU,OAAO;GAEtB,EAAO,QAAQ;GAEf,IAAI;IAGF,OAFA,MAAMC,GAAgBD,GAAUxD,EAAM,OAAOA,EAAM,WAAW0D,CAAK,GAE5D;GACT,SAASC,GAAO;IASd,OARAC,EAAU;KACR,IAAI;KACJ,OAAO1D,EAAE,6BAA6B,CAAC,GAAG,gCAAgC;KAC1E,MAAMyD,aAAiB,QAAQA,EAAM,UAAU,OAAOA,CAAK;KAC3D,QAAQ;KACR,QAAQ;IACV,CAAC,GAEM;GACT,UAAU;IACR,EAAO,QAAQ;GACjB;EACF,GAEME,MAAgB,MAAiB;GACrC,IAAM,EAAE,aAAU,UAAO,aAAU3B,EAAU,MAAMa,MAAS;IAAE,UAAU;IAAG,OAAO;GAAE;GAEpF,OAAOe,IACH5D,EACE,0CACA;IAAE;IAAU;IAAO;GAAM,GACzB,YAAY6D,EAAS,MAAMC,EAAM,MAAMF,EAAM,EAC/C,IACA5D,EAAE,iCAAiC;IAAE;IAAU;GAAM,GAAG,YAAY6D,EAAS,MAAMC,EAAM,EAAE;EACjG,GAEMC,MAAY,GAAc,MAAoB;GAClD,IAAM,EAAE,aAAU,UAAO,aAAU9B,GAAsBuB,GAAOX,GAAM/C,EAAM,MAAM,YAAY,GACxFkE,IAAQlE,EAAM,MAAM,QAAQ,MAAM,MAAW6B,EAAO,SAASkB,CAAI,CAAC,EAAE,SAASA,GAC7EoB,IAAU;IAAE,QAAQD;IAAO;IAAU;IAAO,OAAOJ,KAAS;GAAG;GAErE,EAAa,QAAQA,IACjBxC,EAAS,QACPpB,EACE,oDACAiE,GACA,GAAGD,EAAM,qBAAqBH,EAAS,MAAMC,EAAM,MAAMF,EAAM,sCACjE,IACA5D,EACE,2CACAiE,GACA,GAAGD,EAAM,qBAAqBH,EAAS,MAAMC,EAAM,MAAMF,EAAM,EACjE,IACFxC,EAAS,QACPpB,EACE,2CACAiE,GACA,GAAGD,EAAM,qBAAqBH,EAAS,MAAMC,EAAM,sCACrD,IACA9D,EACE,kCACAiE,GACA,GAAGD,EAAM,qBAAqBH,EAAS,MAAMC,EAAM,EACrD;EACR,GAGMX,MAAW,GAAc,MAAoB;GACjD,IAAI,GAAO,SAAUpB,GAAmBF,EAAM,OAAO2B,CAAK,GAK1D;QAHA,EAAW,QAAQA,GACnB,EAAa,QAAQ,IAEjBpC,EAAS,OAAO;KAClB,GAASyB,GAAMW,CAAK;KAEpB;IACF;IAEA,EAAUA,CAAK,CAAC,CAAC,MAAM,MAAU;KAC/B,AAAIU,IAAOH,GAASlB,GAAMW,CAAK,IAC1B,EAAW,QAAQ;IAC1B,CAAC;GALD;EAMF,GAEMW,MAAQ,GAAc,GAAgB,MAAsB;GAEhE,AADAC,GAAoBpB,EAAM,aAAmC,GAC7DG,GAAQN,GAAMwB,GAAoBxC,EAAM,OAAOgB,GAAMyB,GAAQxE,EAAM,MAAM,YAAY,CAAC;EACxF,GAIMyE,KAAQ,YAAY;GACxB,IAAMf,IAAQnC,EAAW,SAASS,EAAa,QAAQT,EAAW,QAAQ,MACpEI,IACJR,EAAM,SAASwB,EAAmB3C,EAAM,MAAM,gBAAgBmB,EAAM,KAAK,IAAIA,EAAM,QAAQ;GAS7F,AAPA,EAAM,QAAQ,MACd,EAAW,QAAQ,MACnB,EAAa,QAAQ,IACrB,EAAK,QAAQ,IAETuC,KAAO,MAAMH,EAAKG,CAAK,GAEvB/B,KAASqB,EAAWhD,EAAM,MAAM,YAAY,EAAE,WAAQ,GAAG,CAAC,MAAM,CAAC;EACvE,GAGM0E,KAAQ,YAAY;GAMxB,AALItD,EAAY,UACd,EAAW,QAAQ,MACnB,MAAMmC,EAAK,CAAC,CAAC,IAGXlC,EAAW,UACb,EAAM,QAAQ,MACd2B,EAAWhD,EAAM,MAAM,YAAY,EAAE,SAAS2E,GAAsB3E,EAAM,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;EAEhG,GAEM4E,KAAW,MAAkB;GAOjC,AALK/B,MACH,EAAM,QAAQ,MACVvB,EAAS,UAAO,EAAW,QAAQ,OACvC,EAAa,QAAQ,KAEvB,EAAK,QAAQuB;EACf,GAEM,CAACgC,IAAYC,KAAeC,EAAuB,GACnD,CAACC,IAAaC,MAAeF,EAAuB;oBAIvC1D,EAAA,SAAcD,EAAA,UAAgBiB,EAAA,SAA/CvG,EAAA,GAAAC,EAwLWC,IAAA,EAAA,KAAA,EAAA,GAAA;GAvLTC,EAScC,EAAA8I,EAAA,GAAA,MAAA;IARZ,SAAA7I,QAOE,CANMoG,EAAA,SADRzG,EAAA,GAAAM,EAOEC,GAAA;;KALC,MAAMkG,EAAA;KACN,UAAUvB,EAAA;KACX,aAAU;KACT,OAAK1E,EAAEJ,EAAAwJ,CAAA,CAAE,CAAA,CAAElD,EAAA,SAAS,QAAA,CAAA;KACpB,SAAOkC;;;;;;;;GAGZzI,EA2GaC,EAAA2I,EAAA,GAAA,MAAA;IA1GX,SAAA1I,QAyGM,CAzGNK,EAyGM,OAzGN0C,IAyGM;KAxGOuD,EAAA,SAAYF,EAAA,SAAvBzG,EAAA,GAAAC,EAAgF,OAAhFoD,IAAgF,CAArBlD,EAAeC,EAAA+I,EAAA,CAAA,CAAA,CAAA,KAAAU,EAAA,IAAA,EAAA;KAC1EnJ,EA+EK,MAAA;MA9EF,OAAKF,EAAeJ,EAAAwJ,CAAA,CAAE,CAAgB1F,EAAM,MAAM,uBAAwD,CAAA,gBAAA9D,EAAA2J,EAAA,CAAkB,CAAC7F,EAAM,MAAM,oBAAoB,CAAA,IAAA,uBAAA,CAAA;MAO7J,cAAY9D,EAAAgE,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,SAAA;KAEdpE,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAoEKC,IAAA,MAAAS,GAnEckF,GAAA,QAAV,OADT7F,EAAA,GAAAC,EAoEK,MAAA;MAlEF,KAAK8F,EAAO;MACZ,eAAaA,EAAO;MACpB,WAAWT,EAAA,SAAW,CAAKJ,EAAA;MAC3B,OAAK1E,EAAiBJ,EAAAwJ,CAAA,CAAE,CAAA,wDAA0FtE,EAAA,SAAW,eAAmCH,EAAA,UAAaY,EAAO,QAAI,cAAkCX,EAAA,UAAeW,EAAO,QAAQZ,EAAA,UAAaY,EAAO,QAAI,UAAA,CAAA;MAQhR,cAAS,MAAEoB,GAAU8C,GAAQlE,EAAO,IAAI;MACxC,aAAQ,MAAEsB,GAAS4C,GAAQlE,EAAO,IAAI;MACtC,cAAS,MAAEX,EAAA,UAAeW,EAAO,SAAS,EAAA,QAAU;MACpD,WAAO,AAAAmE,EAAA,QAAA,OAAI,EAAA,QAAQ,MAAW,EAAA,QAAU;MACxC,QAAItJ,IAAA,MAAU0G,GAAKvB,EAAO,IAAI,GAAA,CAAA,SAAA,CAAA;;MAGvBT,EAAA,SADRtF,EAAA,GAAAM,EAIEF,EAAAgK,EAAA,GAAA;;OAFA,OAAM;OACN,eAAY;;MAEDrE,EAAO,cAApB/F,EAAA,GAAAC,EAMQ,SANRuD,IAMQ,CALNrD,EAGEU,IAAA;OAFC,eAAayF,EAAA,MAAQ,SAASP,EAAO,IAAI;OACzC,wBAAkB,MAAEe,GAAOf,EAAO,IAAI;MAEzCrF,GAAAA,MAAAA,GAAAA,CAAAA,eAAAA,qBAAAA,CAAAA,GAAAA,EAAgD,QAAhD+C,IAAgD3C,EAAtBiF,EAAO,KAAK,GAAA,CAAA,CAAA,CAAA,MAExC/F,EAAA,GAAAC,EAAsE,QAAtEyD,IAAsE5C,EAAtBiF,EAAO,KAAK,GAAA,CAAA;MAChDT,EAAA,SAAZtF,EAAA,GAAAC,EAmCO,QAnCP0D,IAmCO;OAlCLjD,EAKC,QAAA;QAJE,IAAE,GAAKN,EAAAuF,CAAA,EAAM,GAAII,EAAO,KAAI;QAC7B,OAAM;QACN,aAAU;OACN,GAAAjF,EAAAiH,GAAahC,EAAO,IAAI,CAAA,GAAA,GAAAnC,EAAA;OAE9BzD,EAYWY,GAAA;QAXT,MAAK;QACL,SAAQ;QACR,MAAK;QACJ,WAAWqF,EAAA,MAAUL,EAAO,KAAI,EAAG,YAAQ,MAAA;QAC3C,iBAAeb,EAAA,SAAU,KAAA;QACzB,oBAAgB,GAAK9E,EAAAuF,CAAA,EAAM,GAAII,EAAO,KAAI;QAC1C,cAA+B3F,EAAAgE,CAAA,CAAC,CAAA,wBAAA,EAAA,QAAmC2B,EAAO,MAAK,GAAA,QAAYA,EAAO,MAAK,IAAA;QAGvG,UAAK,MAAEwC,GAAKxC,EAAO,MAAI,IAAMkE,CAAM;;QACnC,SAAA5J,QACD,CADCF,EACDC,EAAAkK,EAAA,CAAA,CAAA,CAAA;;;;;;;;;OACFnK,EAcWY,GAAA;QAbT,MAAK;QACL,SAAQ;QACR,MAAK;QACJ,WAA8BqF,EAAA,MAAUL,EAAO,KAAI,EAAG,YAAQ,OAAWK,EAAA,MAAUL,EAAO,KAAI,EAAG,SAAK;QAGtG,iBAAeb,EAAA,SAAU,KAAA;QACzB,oBAAgB,GAAK9E,EAAAuF,CAAA,EAAM,GAAII,EAAO,KAAI;QAC1C,cAA+B3F,EAAAgE,CAAA,CAAC,CAAA,0BAAA,EAAA,QAAqC2B,EAAO,MAAK,GAAA,QAAYA,EAAO,MAAK,MAAA;QAGzG,UAAK,MAAEwC,GAAKxC,EAAO,MAAI,GAAKkE,CAAM;;QAClC,SAAA5J,QACD,CADCF,EACDC,EAAAmK,EAAA,CAAA,CAAA,CAAA;;;;;;;;;;;KAKAjF,EAAA,SADRtF,EAAA,GAAAC,EASM,OATN4D,IASM/C,EADD4E,EAAA,KAAY,GAAA,CAAA,KAAAmE,EAAA,IAAA,EAAA;KAGP,CAAAlD,EAAA,SAAYF,EAAA,SAAcC,EAAA,SADpC1G,EAAA,GAAAC,EAYM,OAZN6D,IAYM,CARgB6C,EAAA,QAAYkD,EAAA,IAAA,EAAA,KAAhC7J,EAAA,GAAAM,EAAgCF,EAAA+I,EAAA,GAAA,EAAA,KAAA,EAAA,CAAA,IAExBzC,EAAA,SADR1G,EAAA,GAAAM,EAMEC,GAAA;;MAJC,MAAMmG,EAAA;MACP,aAAU;MACT,UAAQ,CAAGE,GAAA,SAAY,CAAKV,EAAA;MAC5B,SAAOyC;;;;;GAMRzE,EAAM,MAAM,wBAAmB,WAAgBU,EAAA,OAAO,aAD9D5E,EAAA,GAAAM,EA0BQU,IAAA;;IAxBL,MAAM0D,EAAA;IACN,iBAAaoE;;IAEd,SAAAzI,QAMe,CANfF,EAMec,IAAA,EAND,YAAA,GAAQ,GAAA;KACpB,SAAAZ,QAIqB,CAJrBF,EAIqBI,GAAA,EAJA,MAAMgG,EAAA,MAAO,GAAA;MACrB,MAAIlG,QAEb,CADCF,EACDC,EAAAc,CAAA,GAAA;OADO,MAAK;OAA0C,UAAUd,EAAAoK,CAAA;;;;;IAItErK,CAAAA,GAAAA,EAaegB,IAAA;KAZZ,MAAMf,EAAAqK,EAAA,CAAa,CAAC7F,EAAA,MAAM,mBAAmBxE,EAAAoE,EAAA,CAAS;KACtD,OAAKhE,EAAEJ,EAAAwJ,CAAA,CAAE,CAAA,kCAAmC5E,GAAA,SAAe,aAAA,CAAA;KAC5D,aAAU;KACV,mBAAgB;;KAEhB,SAAA3E,QAKc,CALdF,EAKciB,IAAA,EALD,OAAM,WAAU,GAAA;MAC3B,SAAAf,QAA2C,CAA3CF,EAA2CkB,IAAA,MAAA;OAA/B,SAAAhB,QAAkB,CAAfiB,EAAAR,EAAAgE,EAAA,KAAY,GAAA,CAAA,CAAA,CAAA;;MAC3B3E,CAAAA,GAAAA,EAEqBoB,IAAA,EAFF,OAAKf,EAAEoE,EAAA,MAAM,cAAc,KAAA,IAAS,SAAA,EAAA,GAAA;OAAc,SAAAvE,QAEnE,CADAiB,EAAAR,EAAAiE,GAAA,KAAgB,GAAA,CAAA,CAAA,CAAA;;;;KAGpBrE,CAAAA,GAAAA,EAA6D,OAA7DqD,IAA6D,CAArB5D,EAAeC,EAAA4I,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;GAI9C,GAAA,GAAA,CAAA,MAAA,CAAA,KAAA9E,EAAM,MAAM,wBAAmB,WAD5ClE,EAAA,GAAAM,EAqBSkB,IAAA;;IAnBN,MAAMkD,EAAA;IACN,iBAAaoE;;IAEd,SAAAzI,QAMgB,CANhBF,EAMgBsB,IAAA,EAND,YAAA,GAAQ,GAAA;KACrB,SAAApB,QAIqB,CAJrBF,EAIqBI,GAAA,EAJA,MAAMgG,EAAA,MAAO,GAAA;MACrB,MAAIlG,QAEb,CADCF,EACDC,EAAAc,CAAA,GAAA;OADO,MAAK;OAA0C,UAAUd,EAAAoK,CAAA;;;;;IAItErK,CAAAA,GAAAA,EAQgBuB,IAAA;KARA,OAAKlB,EAAEwE,GAAA,SAAe,aAAA;KAAmB,aAAU;;KACjE,SAAA3E,QAKe,CALfF,EAKewB,IAAA,MAAA;MAJb,SAAAtB,QAA6C,CAA7CF,EAA6CyB,IAAA,MAAA;OAAhC,SAAAvB,QAAkB,CAAfiB,EAAAR,EAAAgE,EAAA,KAAY,GAAA,CAAA,CAAA,CAAA;;MAC5B3E,CAAAA,GAAAA,EAEsB0B,IAAA,EAFF,OAAKrB,EAAEoE,EAAA,OAAO,cAAc,KAAA,IAAS,SAAA,EAAA,GAAA;OAAc,SAAAvE,QAErE,CADAiB,EAAAR,EAAAiE,GAAA,KAAgB,GAAA,CAAA,CAAA,CAAA;;;;KAGpBrE,CAAAA,GAAAA,EAA+D,OAA/DsD,IAA+D,CAArB7D,EAAeC,EAAA4I,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;GAG7DhJ,GAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,EAAA,GAAAM,EAeUwB,IAAA;;IAfO,MAAM4C,EAAA;IAAO,iBAAaoE;;IACzC,SAAAzI,QAMiB,CANjBF,EAMiB4B,IAAA,EAND,YAAA,GAAQ,GAAA;KACtB,SAAA1B,QAIqB,CAJrBF,EAIqBI,GAAA,EAJA,MAAMgG,EAAA,MAAO,GAAA;MACrB,MAAIlG,QAEb,CADCF,EACDC,EAAAc,CAAA,GAAA;OADO,MAAK;OAA0C,UAAUd,EAAAoK,CAAA;;;;;IAItErK,CAAAA,GAAAA,EAMiB6B,IAAA;KALf,OAAM;KACL,OAAKxB,EAAEJ,EAAAwJ,CAAA,CAAE,CAAA,OAAQ1F,EAAM,MAAM,uBAAoB,oBAAA,MAAA,CAAA;KAClD,aAAU;;KAEV,SAAA7D,QAAe,CAAfF,EAAeC,EAAA4I,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/table/ContentLayoutSort.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayoutSort.js","names":["_sfc_main","ContentLayoutSort_vue_vue_type_script_setup_true_lang_default","ContentLayoutSort_default"],"sources":["../../../src/components/table/ContentLayoutSort.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport Button from '../ui/Button.vue'\n\n/**\n * Sorting for content layouts, which have no column headers: a select of the sortable\n * columns and a direction toggle.\n */\nconst props = defineProps<{ table: TableSchema; columns: ColumnSchema[] }>()\nconst t = useT()\nconst sortable = computed(() => props.columns.filter((column) => column.sortable))\nconst direction = computed(() => props.table.sort?.direction ?? 'asc')\n\nconst sortBy = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value\n  visitTable(\n    props.table.identifier,\n    { sort: value || null, direction: value ? direction.value : null },\n    ['page'],\n  )\n}\nconst flip = () =>\n  visitTable(\n    props.table.identifier,\n    {\n      sort: props.table.sort?.column ?? null,\n      direction: direction.value === 'asc' ? 'desc' : 'asc',\n    },\n    ['page'],\n  )\n</script>\n\n<template>\n  <div v-if=\"sortable.length > 0\" class=\"flex items-center gap-1\">\n    <label class=\"flex items-center gap-2 text-sm\">\n      <span class=\"sr-only\">{{ t('table.sort_by', {}, 'Sort by') }}</span>\n      <select\n        :value=\"props.table.sort?.column ?? ''\"\n        class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n        @change=\"sortBy\"\n      >\n        <option value=\"\">\n          {{ props.table.defaultSortOptionLabel ?? t('table.sort_by', {}, 'Sort by') }}\n        </option>\n        <option v-for=\"column in sortable\" :key=\"column.name\" :value=\"column.name\">\n          {{ column.label }}\n        </option>\n      </select>\n    </label>\n    <Button\n      v-if=\"props.table.sort\"\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      :aria-label=\"\n        direction === 'asc'\n          ? t('table.sort_ascending', {}, 'Ascending')\n          : t('table.sort_descending', {}, 'Descending')\n      \"\n      @click=\"flip\"\n    >\n      <ArrowUpIcon v-if=\"direction === 'asc'\" />\n      <ArrowDownIcon v-else />\n    </Button>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ContentLayoutSort.js","names":["_sfc_main","ContentLayoutSort_vue_vue_type_script_setup_true_lang_default","ContentLayoutSort_default"],"sources":["../../../src/components/table/ContentLayoutSort.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport Button from '../ui/Button.vue'\n\n/**\n * Sorting for content layouts, which have no column headers: a select of the sortable\n * columns and a direction toggle.\n */\nconst props = defineProps<{ table: TableSchema; columns: ColumnSchema[] }>()\nconst t = useT()\nconst sortable = computed(() => props.columns.filter((column) => column.sortable))\nconst direction = computed(() => props.table.sort?.direction ?? 'asc')\n// A default sort on a column the select doesn't list (`created_at`) shows the placeholder.\nconst selected = computed(() =>\n  sortable.value.some((column) => column.name === props.table.sort?.column)\n    ? (props.table.sort?.column ?? '')\n    : '',\n)\n\nconst sortBy = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value\n  visitTable(\n    props.table.identifier,\n    { sort: value || null, direction: value ? direction.value : null },\n    ['page'],\n  )\n}\nconst flip = () =>\n  visitTable(\n    props.table.identifier,\n    {\n      sort: props.table.sort?.column ?? null,\n      direction: direction.value === 'asc' ? 'desc' : 'asc',\n    },\n    ['page'],\n  )\n</script>\n\n<template>\n  <div v-if=\"sortable.length > 0\" class=\"flex items-center gap-1\">\n    <label class=\"flex items-center gap-2 text-sm\">\n      <span class=\"sr-only\">{{ t('table.sort_by', {}, 'Sort by') }}</span>\n      <select\n        :value=\"selected\"\n        class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n        @change=\"sortBy\"\n      >\n        <option value=\"\">\n          {{ props.table.defaultSortOptionLabel ?? t('table.sort_by', {}, 'Sort by') }}\n        </option>\n        <option v-for=\"column in sortable\" :key=\"column.name\" :value=\"column.name\">\n          {{ column.label }}\n        </option>\n      </select>\n    </label>\n    <Button\n      v-if=\"props.table.sort\"\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      :aria-label=\"\n        direction === 'asc'\n          ? t('table.sort_ascending', {}, 'Ascending')\n          : t('table.sort_descending', {}, 'Descending')\n      \"\n      @click=\"flip\"\n    >\n      <ArrowUpIcon v-if=\"direction === 'asc'\" />\n      <ArrowDownIcon v-else />\n    </Button>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/table/ContentLayoutSort.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayoutSort.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/ContentLayoutSort.vue"],"names":[],"mappings":"AAwEA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAO9D;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,YAAY,EAAE,CAAA;CAAE,CAAC;;AAyJnE,wBAMG"}
+{"version":3,"file":"ContentLayoutSort.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/ContentLayoutSort.vue"],"names":[],"mappings":"AA8EA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAO9D;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,YAAY,EAAE,CAAA;CAAE,CAAC;;AAgKnE,wBAMG"}

package/dist/components/table/ContentLayoutSort.vue_vue_type_script_setup_true_lang.js

@@ -14,20 +14,20 @@ var _ = {
 		columns: {}
 	},
 	setup(l) {
-		let C = l, w = e(), T = i(() => C.columns.filter((e) => e.sortable)), E = i(() => C.table.sort?.direction ?? "asc"), D = (e) => {
+		let C = l, w = e(), T = i(() => C.columns.filter((e) => e.sortable)), E = i(() => C.table.sort?.direction ?? "asc"), D = i(() => T.value.some((e) => e.name === C.table.sort?.column) ? C.table.sort?.column ?? "" : ""), O = (e) => {
 			let t = e.target.value;
 			n(C.table.identifier, {
 				sort: t || null,
 				direction: t ? E.value : null
 			}, ["page"]);
-		}, O = () => n(C.table.identifier, {
+		}, k = () => n(C.table.identifier, {
 			sort: C.table.sort?.column ?? null,
 			direction: E.value === "asc" ? "desc" : "asc"
 		}, ["page"]);
 		return (e, n) => T.value.length > 0 ? (u(), s("div", _, [c("label", v, [c("span", y, f(p(w)("table.sort_by", {}, "Sort by")), 1), c("select", {
-			value: C.table.sort?.column ?? "",
+			value: D.value,
 			class: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
-			onChange: D
+			onChange: O
 		}, [c("option", x, f(C.table.defaultSortOptionLabel ?? p(w)("table.sort_by", {}, "Sort by")), 1), (u(!0), s(r, null, d(T.value, (e) => (u(), s("option", {
 			key: e.name,
 			value: e.name
@@ -37,7 +37,7 @@ var _ = {
 			variant: "outline",
 			size: "icon-sm",
 			"aria-label": E.value === "asc" ? p(w)("table.sort_ascending", {}, "Ascending") : p(w)("table.sort_descending", {}, "Descending"),
-			onClick: O
+			onClick: k
 		}, {
 			default: m(() => [E.value === "asc" ? (u(), a(p(g), { key: 0 })) : (u(), a(p(h), { key: 1 }))]),
 			_: 1

package/dist/components/table/ContentLayoutSort.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayoutSort.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_Fragment","_renderList","_createBlock","Button","_withCtx","_createCommentVNode","Button_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ContentLayoutSort_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","sortable","computed","column","direction","sortBy","value","event","flip","visitTable","openBlock","createElementBlock","createElementVNode","toDisplayString","unref","Fragment","renderList","createBlock","withCtx","ArrowUpIcon","ArrowDownIcon","createCommentVNode"],"sources":["../../../src/components/table/ContentLayoutSort.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport Button from '../ui/Button.vue'\n\n/**\n * Sorting for content layouts, which have no column headers: a select of the sortable\n * columns and a direction toggle.\n */\nconst props = defineProps<{ table: TableSchema; columns: ColumnSchema[] }>()\nconst t = useT()\nconst sortable = computed(() => props.columns.filter((column) => column.sortable))\nconst direction = computed(() => props.table.sort?.direction ?? 'asc')\n\nconst sortBy = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value\n  visitTable(\n    props.table.identifier,\n    { sort: value || null, direction: value ? direction.value : null },\n    ['page'],\n  )\n}\nconst flip = () =>\n  visitTable(\n    props.table.identifier,\n    {\n      sort: props.table.sort?.column ?? null,\n      direction: direction.value === 'asc' ? 'desc' : 'asc',\n    },\n    ['page'],\n  )\n</script>\n\n<template>\n  <div v-if=\"sortable.length > 0\" class=\"flex items-center gap-1\">\n    <label class=\"flex items-center gap-2 text-sm\">\n      <span class=\"sr-only\">{{ t('table.sort_by', {}, 'Sort by') }}</span>\n      <select\n        :value=\"props.table.sort?.column ?? ''\"\n        class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n        @change=\"sortBy\"\n      >\n        <option value=\"\">\n          {{ props.table.defaultSortOptionLabel ?? t('table.sort_by', {}, 'Sort by') }}\n        </option>\n        <option v-for=\"column in sortable\" :key=\"column.name\" :value=\"column.name\">\n          {{ column.label }}\n        </option>\n      </select>\n    </label>\n    <Button\n      v-if=\"props.table.sort\"\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      :aria-label=\"\n        direction === 'asc'\n          ? t('table.sort_ascending', {}, 'Ascending')\n          : t('table.sort_descending', {}, 'Descending')\n      \"\n      @click=\"flip\"\n    >\n      <ArrowUpIcon v-if=\"direction === 'asc'\" />\n      <ArrowDownIcon v-else />\n    </Button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAYA,IAAMmB,IAAQC,GACRC,IAAIC,EAAK,GACTC,IAAWC,QAAeL,EAAM,QAAQ,QAAQ,MAAWM,EAAO,QAAQ,CAAC,GAC3EC,IAAYF,QAAeL,EAAM,MAAM,MAAM,aAAa,KAAK,GAE/DQ,KAAU,MAAiB;GAC/B,IAAMC,IAASC,EAAM,OAA6B;GAClD,EACEV,EAAM,MAAM,YACZ;IAAE,MAAMS,KAAS;IAAM,WAAWA,IAAQF,EAAU,QAAQ;GAAK,GACjE,CAAC,MAAM,CACT;EACF,GACMI,UACJC,EACEZ,EAAM,MAAM,YACZ;GACE,MAAMA,EAAM,MAAM,MAAM,UAAU;GAClC,WAAWO,EAAU,UAAU,QAAQ,SAAS;EAClD,GACA,CAAC,MAAM,CACT;mBAIWH,EAAA,MAAS,SAAM,KAA1BvB,EAAA,GAAAC,EA+BM,OA/BNW,GA+BM,CA9BJV,EAcQ,SAdRW,GAcQ,CAbNX,EAAoE,QAApEY,GAAoEX,EAA3CC,EAAAiB,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAA,GAC1BnB,EAWS,UAAA;GAVN,OAAOiB,EAAM,MAAM,MAAM,UAAM;GAChC,OAAM;GACL,UAAQQ;EAETzB,GAAAA,CAAAA,EAES,UAFTc,GAESb,EADJgB,EAAM,MAAM,0BAA0Bf,EAAAiB,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAA,IAE5CrB,EAAA,EAAA,GAAAC,EAESI,GAAA,MAAAC,EAFgBiB,EAAA,QAAV,OAAfvB,EAAA,GAAAC,EAES,UAAA;GAF2B,KAAKwB,EAAO;GAAO,OAAOA,EAAO;EAChE,GAAAtB,EAAAsB,EAAO,KAAK,GAAA,GAAAR,CAAA,EAKb,GAAA,GAAA,EAAA,GAAA,IAAAF,CAAA,CAAA,CAAA,GAAAI,EAAM,MAAM,QADpBnB,EAAA,GAAAO,EAcSC,GAAA;;GAZP,MAAK;GACL,SAAQ;GACR,MAAK;GACJ,cAAqBkB,EAAA,UAAS,QAAuBtB,EAAAiB,CAAA,CAAC,CAAA,wBAAA,CAAA,GAAA,WAAA,IAAsDjB,EAAAiB,CAAA,CAAC,CAAA,yBAAA,CAAA,GAAA,YAAA;GAK7G,SAAOS;;GAER,SAAArB,QAA0C,CAAvBiB,EAAA,UAAS,SAA5B1B,EAAA,GAAAO,EAA0CH,EAAAqC,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA,MAC1CzC,EAAA,GAAAO,EAAwBH,EAAAsC,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"ContentLayoutSort.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_Fragment","_renderList","_createBlock","Button","_withCtx","_createCommentVNode","Button_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ContentLayoutSort_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","sortable","computed","column","direction","selected","sortBy","value","event","flip","visitTable","openBlock","createElementBlock","createElementVNode","toDisplayString","unref","Fragment","renderList","createBlock","withCtx","ArrowUpIcon","ArrowDownIcon","createCommentVNode"],"sources":["../../../src/components/table/ContentLayoutSort.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport Button from '../ui/Button.vue'\n\n/**\n * Sorting for content layouts, which have no column headers: a select of the sortable\n * columns and a direction toggle.\n */\nconst props = defineProps<{ table: TableSchema; columns: ColumnSchema[] }>()\nconst t = useT()\nconst sortable = computed(() => props.columns.filter((column) => column.sortable))\nconst direction = computed(() => props.table.sort?.direction ?? 'asc')\n// A default sort on a column the select doesn't list (`created_at`) shows the placeholder.\nconst selected = computed(() =>\n  sortable.value.some((column) => column.name === props.table.sort?.column)\n    ? (props.table.sort?.column ?? '')\n    : '',\n)\n\nconst sortBy = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value\n  visitTable(\n    props.table.identifier,\n    { sort: value || null, direction: value ? direction.value : null },\n    ['page'],\n  )\n}\nconst flip = () =>\n  visitTable(\n    props.table.identifier,\n    {\n      sort: props.table.sort?.column ?? null,\n      direction: direction.value === 'asc' ? 'desc' : 'asc',\n    },\n    ['page'],\n  )\n</script>\n\n<template>\n  <div v-if=\"sortable.length > 0\" class=\"flex items-center gap-1\">\n    <label class=\"flex items-center gap-2 text-sm\">\n      <span class=\"sr-only\">{{ t('table.sort_by', {}, 'Sort by') }}</span>\n      <select\n        :value=\"selected\"\n        class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n        @change=\"sortBy\"\n      >\n        <option value=\"\">\n          {{ props.table.defaultSortOptionLabel ?? t('table.sort_by', {}, 'Sort by') }}\n        </option>\n        <option v-for=\"column in sortable\" :key=\"column.name\" :value=\"column.name\">\n          {{ column.label }}\n        </option>\n      </select>\n    </label>\n    <Button\n      v-if=\"props.table.sort\"\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      :aria-label=\"\n        direction === 'asc'\n          ? t('table.sort_ascending', {}, 'Ascending')\n          : t('table.sort_descending', {}, 'Descending')\n      \"\n      @click=\"flip\"\n    >\n      <ArrowUpIcon v-if=\"direction === 'asc'\" />\n      <ArrowDownIcon v-else />\n    </Button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAYA,IAAMmB,IAAQC,GACRC,IAAIC,EAAK,GACTC,IAAWC,QAAeL,EAAM,QAAQ,QAAQ,MAAWM,EAAO,QAAQ,CAAC,GAC3EC,IAAYF,QAAeL,EAAM,MAAM,MAAM,aAAa,KAAK,GAE/DQ,IAAWH,QACfD,EAAS,MAAM,MAAM,MAAWE,EAAO,SAASN,EAAM,MAAM,MAAM,MAAM,IACnEA,EAAM,MAAM,MAAM,UAAU,KAC7B,EACN,GAEMS,KAAU,MAAiB;GAC/B,IAAMC,IAASC,EAAM,OAA6B;GAClD,EACEX,EAAM,MAAM,YACZ;IAAE,MAAMU,KAAS;IAAM,WAAWA,IAAQH,EAAU,QAAQ;GAAK,GACjE,CAAC,MAAM,CACT;EACF,GACMK,UACJC,EACEb,EAAM,MAAM,YACZ;GACE,MAAMA,EAAM,MAAM,MAAM,UAAU;GAClC,WAAWO,EAAU,UAAU,QAAQ,SAAS;EAClD,GACA,CAAC,MAAM,CACT;mBAIWH,EAAA,MAAS,SAAM,KAA1BvB,EAAA,GAAAC,EA+BM,OA/BNW,GA+BM,CA9BJV,EAcQ,SAdRW,GAcQ,CAbNX,EAAoE,QAApEY,GAAoEX,EAA3CC,EAAAiB,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAA,GAC1BnB,EAWS,UAAA;GAVN,OAAOyB,EAAA;GACR,OAAM;GACL,UAAQC;EAET1B,GAAAA,CAAAA,EAES,UAFTc,GAESb,EADJgB,EAAM,MAAM,0BAA0Bf,EAAAiB,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAA,IAE5CrB,EAAA,EAAA,GAAAC,EAESI,GAAA,MAAAC,EAFgBiB,EAAA,QAAV,OAAfvB,EAAA,GAAAC,EAES,UAAA;GAF2B,KAAKwB,EAAO;GAAO,OAAOA,EAAO;EAChE,GAAAtB,EAAAsB,EAAO,KAAK,GAAA,GAAAR,CAAA,EAKb,GAAA,GAAA,EAAA,GAAA,IAAAF,CAAA,CAAA,CAAA,GAAAI,EAAM,MAAM,QADpBnB,EAAA,GAAAO,EAcSC,GAAA;;GAZP,MAAK;GACL,SAAQ;GACR,MAAK;GACJ,cAAqBkB,EAAA,UAAS,QAAuBtB,EAAAiB,CAAA,CAAC,CAAA,wBAAA,CAAA,GAAA,WAAA,IAAsDjB,EAAAiB,CAAA,CAAC,CAAA,yBAAA,CAAA,GAAA,YAAA;GAK7G,SAAOU;;GAER,SAAAtB,QAA0C,CAAvBiB,EAAA,UAAS,SAA5B1B,EAAA,GAAAO,EAA0CH,EAAAsC,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA,MAC1C1C,EAAA,GAAAO,EAAwBH,EAAAuC,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA"}

package/dist/components/table/SelectCell.vue_vue_type_script_setup_true_lang.js

@@ -19,7 +19,8 @@ var _ = [
 		cell: {},
 		recordKey: {},
 		token: {},
-		component: {}
+		component: {},
+		fromRegistry: { type: Boolean }
 	},
 	setup(c) {
 		let x = c, S = i(() => x.column), { update: C, saving: w, error: T } = t(x), E = h(), D = d(x.cell.state === null || x.cell.state === void 0 ? "" : String(x.cell.state)), O = i(() => S.value.options.flatMap((e) => n(e) ? e.options : [e]).filter((e) => !(S.value.ignoreRecord && e.value === String(x.recordKey)))), k = (e) => {

package/dist/components/table/SelectCell.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_unref","_normalizeClass","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","SelectCell_vue_vue_type_script_setup_true_lang_default","props","__props","schema","computed","useCellUpdate","errorId","useId","value","ref","options","isOptionGroup","option","onChange","event","update","openBlock","createElementBlock","_cache","withModifiers","createElementVNode","unref","saving","error","normalizeClass","cn","toDisplayString","createCommentVNode","Fragment","renderList"],"sources":["../../../src/components/table/SelectCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectColumnSchema } from '@alfakit/core'\nimport { isOptionGroup } from '@alfakit/core'\nimport { computed, ref, useId } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst schema = computed(() => props.column as SelectColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst errorId = useId()\nconst value = ref(\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),\n)\n// `optionsRelationship(ignoreRecord: true)`: the record itself is not an option.\nconst options = computed(() =>\n  schema.value.options\n    .flatMap((option) => (isOptionGroup(option) ? option.options : [option]))\n    .filter((option) => !(schema.value.ignoreRecord && option.value === String(props.recordKey))),\n)\n\nconst onChange = (event: Event) => {\n  value.value = (event.target as HTMLSelectElement).value\n  void update(value.value === '' ? null : value.value)\n}\n</script>\n\n<template>\n  <span @click.stop>\n    <select\n      :value=\"value\"\n      :disabled=\"Boolean(props.cell.disabled) || saving\"\n      :aria-label=\"props.column.label || props.column.name\"\n      :aria-invalid=\"error ? true : undefined\"\n      :aria-describedby=\"error ? errorId : undefined\"\n      :class=\"\n        cn(\n          'border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 min-w-32 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]',\n          error && 'border-destructive',\n        )\n      \"\n      @change=\"onChange\"\n    >\n      <option v-if=\"schema.selectablePlaceholder\" value=\"\">{{ schema.placeholder ?? '' }}</option>\n      <option\n        v-for=\"option in options\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n      >\n        {{ option.label }}\n      </option>\n    </select>\n    <span v-if=\"error\" :id=\"errorId\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMe,IAAQC,GACRC,IAASC,QAAeH,EAAM,MAA4B,GAC1D,EAAE,WAAQ,WAAQ,aAAUI,EAAcJ,CAAK,GAC/CK,IAAUC,EAAM,GAChBC,IAAQC,EACZR,EAAM,KAAK,UAAU,QAAQA,EAAM,KAAK,UAAU,KAAA,IAAY,KAAK,OAAOA,EAAM,KAAK,KAAK,CAC5F,GAEMS,IAAUN,QACdD,EAAO,MAAM,QACV,SAAS,MAAYQ,EAAcC,CAAM,IAAIA,EAAO,UAAU,CAACA,CAAM,CAAE,CAAA,CACvE,QAAQ,MAAW,EAAET,EAAO,MAAM,gBAAgBS,EAAO,UAAU,OAAOX,EAAM,SAAS,EAAE,CAChG,GAEMY,KAAY,MAAiB;GAEjC,AADA,EAAM,QAASC,EAAM,OAA6B,OAClDC,EAAYP,EAAM,UAAU,KAAK,OAAOA,EAAM,KAAK;EACrD;oBAIEtB,EAAA,GAAAC,EA0BO,QAAA,EA1BA,SAAK,AAAA+B,EAAA,OAAA9B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA,EAAA,GAAA,CACfC,EAuBS,UAAA;GAtBN,OAAOmB,EAAA;GACP,UAAU,EAAQP,EAAM,KAAK,YAAaX,EAAAgC,CAAA;GAC1C,cAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO;GAC/C,gBAAcX,EAAAiC,CAAA,IAAK,KAAU,KAAA;GAC7B,oBAAkBjC,EAAAiC,CAAA,IAAQjC,EAAAgB,CAAA,IAAU,KAAA;GACpC,OAAKf,EAAWD,EAAAmC,CAAA,CAAE,CAAA,uKAA6LnC,EAAAiC,CAAA,KAAK,oBAAA,CAAA;GAM5M;EAEK,GAAA,CAAApB,EAAA,MAAO,yBAArBjB,EAAA,GAAAC,EAA4F,UAA5FU,GAA4FL,EAApCW,EAAA,MAAO,eAAW,EAAA,GAAA,CAAA,KAAAwB,EAAA,IAAA,EAAA,IAC1EzC,EAAA,EAAA,GAAAC,EAOSO,GAAA,MAAAC,EANUe,EAAA,QAAV,OADTxB,EAAA,GAAAC,EAOS,UAAA;GALN,KAAKyB,EAAO;GACZ,OAAOA,EAAO;GACd,UAAUA,EAAO;EAEf,GAAApB,EAAAoB,EAAO,KAAK,GAAA,GAAAd,CAAA,EAGPR,GAAAA,GAAAA,EAAAA,GAAAA,IAAAA,CAAAA,GAAAA,EAAAiC,CAAA,KAAZrC,EAAA,GAAAC,EAA0F,QAAA;;GAAtE,IAAIG,EAAAgB,CAAA;GAAS,OAAM;EAAoC,GAAAd,EAAAF,EAAAiC,CAAA,CAAK,GAAA,GAAAxB,CAAA,KAAA4B,EAAA,IAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"SelectCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_unref","_normalizeClass","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","SelectCell_vue_vue_type_script_setup_true_lang_default","props","__props","schema","computed","useCellUpdate","errorId","useId","value","ref","options","isOptionGroup","option","onChange","event","update","openBlock","createElementBlock","_cache","withModifiers","createElementVNode","unref","saving","error","normalizeClass","cn","toDisplayString","createCommentVNode","Fragment","renderList"],"sources":["../../../src/components/table/SelectCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectColumnSchema } from '@alfakit/core'\nimport { isOptionGroup } from '@alfakit/core'\nimport { computed, ref, useId } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst schema = computed(() => props.column as SelectColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst errorId = useId()\nconst value = ref(\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),\n)\n// `optionsRelationship(ignoreRecord: true)`: the record itself is not an option.\nconst options = computed(() =>\n  schema.value.options\n    .flatMap((option) => (isOptionGroup(option) ? option.options : [option]))\n    .filter((option) => !(schema.value.ignoreRecord && option.value === String(props.recordKey))),\n)\n\nconst onChange = (event: Event) => {\n  value.value = (event.target as HTMLSelectElement).value\n  void update(value.value === '' ? null : value.value)\n}\n</script>\n\n<template>\n  <span @click.stop>\n    <select\n      :value=\"value\"\n      :disabled=\"Boolean(props.cell.disabled) || saving\"\n      :aria-label=\"props.column.label || props.column.name\"\n      :aria-invalid=\"error ? true : undefined\"\n      :aria-describedby=\"error ? errorId : undefined\"\n      :class=\"\n        cn(\n          'border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 min-w-32 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]',\n          error && 'border-destructive',\n        )\n      \"\n      @change=\"onChange\"\n    >\n      <option v-if=\"schema.selectablePlaceholder\" value=\"\">{{ schema.placeholder ?? '' }}</option>\n      <option\n        v-for=\"option in options\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n      >\n        {{ option.label }}\n      </option>\n    </select>\n    <span v-if=\"error\" :id=\"errorId\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMe,IAAQC,GACRC,IAASC,QAAeH,EAAM,MAA4B,GAC1D,EAAE,WAAQ,WAAQ,aAAUI,EAAcJ,CAAK,GAC/CK,IAAUC,EAAM,GAChBC,IAAQC,EACZR,EAAM,KAAK,UAAU,QAAQA,EAAM,KAAK,UAAU,KAAA,IAAY,KAAK,OAAOA,EAAM,KAAK,KAAK,CAC5F,GAEMS,IAAUN,QACdD,EAAO,MAAM,QACV,SAAS,MAAYQ,EAAcC,CAAM,IAAIA,EAAO,UAAU,CAACA,CAAM,CAAE,CAAA,CACvE,QAAQ,MAAW,EAAET,EAAO,MAAM,gBAAgBS,EAAO,UAAU,OAAOX,EAAM,SAAS,EAAE,CAChG,GAEMY,KAAY,MAAiB;GAEjC,AADA,EAAM,QAASC,EAAM,OAA6B,OAClDC,EAAYP,EAAM,UAAU,KAAK,OAAOA,EAAM,KAAK;EACrD;oBAIEtB,EAAA,GAAAC,EA0BO,QAAA,EA1BA,SAAK,AAAA+B,EAAA,OAAA9B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA,EAAA,GAAA,CACfC,EAuBS,UAAA;GAtBN,OAAOmB,EAAA;GACP,UAAU,EAAQP,EAAM,KAAK,YAAaX,EAAAgC,CAAA;GAC1C,cAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO;GAC/C,gBAAcX,EAAAiC,CAAA,IAAK,KAAU,KAAA;GAC7B,oBAAkBjC,EAAAiC,CAAA,IAAQjC,EAAAgB,CAAA,IAAU,KAAA;GACpC,OAAKf,EAAWD,EAAAmC,CAAA,CAAE,CAAA,uKAA6LnC,EAAAiC,CAAA,KAAK,oBAAA,CAAA;GAM5M;EAEK,GAAA,CAAApB,EAAA,MAAO,yBAArBjB,EAAA,GAAAC,EAA4F,UAA5FU,GAA4FL,EAApCW,EAAA,MAAO,eAAW,EAAA,GAAA,CAAA,KAAAwB,EAAA,IAAA,EAAA,IAC1EzC,EAAA,EAAA,GAAAC,EAOSO,GAAA,MAAAC,EANUe,EAAA,QAAV,OADTxB,EAAA,GAAAC,EAOS,UAAA;GALN,KAAKyB,EAAO;GACZ,OAAOA,EAAO;GACd,UAAUA,EAAO;EAEf,GAAApB,EAAAoB,EAAO,KAAK,GAAA,GAAAd,CAAA,EAGPR,GAAAA,GAAAA,EAAAA,GAAAA,IAAAA,CAAAA,GAAAA,EAAAiC,CAAA,KAAZrC,EAAA,GAAAC,EAA0F,QAAA;;GAAtE,IAAIG,EAAAgB,CAAA;GAAS,OAAM;EAAoC,GAAAd,EAAAF,EAAAiC,CAAA,CAAK,GAAA,GAAAxB,CAAA,KAAA4B,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/components/table/SelectComboboxCell.vue_vue_type_script_setup_true_lang.js

@@ -32,7 +32,8 @@ var de = ["innerHTML"], fe = {
 		cell: {},
 		recordKey: {},
 		token: {},
-		component: {}
+		component: {},
+		fromRegistry: { type: Boolean }
 	},
 	setup(x) {
 		let j = x, M = t(), N = e(), P = m(() => j.column), { update: F, saving: I, error: L } = o(j), R = w(j.cell.state === null || j.cell.state === void 0 ? "" : String(j.cell.state)), z = w(j.cell.optionLabel), B = w(!1), V = w(""), H = w(!1), U = w([]), W = m(() => !!P.value.optionsSearchPath), G = m(() => P.value.options.flatMap((e) => u(e) ? e.options : [e])), K = 0;

package/dist/components/table/SelectComboboxCell.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectComboboxCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createVNode","Popover","_withCtx","PopoverTrigger","Button","_unref","_normalizeClass","_Fragment","_toDisplayString","_createBlock","Spinner","PopoverContent","Command","CommandInput","_createCommentVNode","CommandList","CommandEmpty","_createTextVNode","CommandGroup","CommandItem","_createElementVNode","_renderList","Button_default","Spinner_default","Popover_default","PopoverContent_default","PopoverTrigger_default","Command_default","CommandEmpty_default","CommandGroup_default","CommandInput_default","CommandItem_default","CommandList_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","SelectComboboxCell_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","panel","usePanel","schema","computed","useCellUpdate","value","ref","label","open","search","loading","remote","isRemote","staticOptions","isOptionGroup","option","request","isOpen","term","url","timer","current","searchTableColumnOptions","results","optionLabelClass","options","filterSelectColumnOptions","emptyMessage","selectColumnEmptyMessage","currentLabel","showsClear","onOpenChange","next","choose","nextLabel","update","openBlock","createElementBlock","_cache","withModifiers","createVNode","withCtx","unref","error","saving","normalizeClass","cn","Fragment","toDisplayString","createBlock","ChevronsUpDownIcon","$event","createCommentVNode","createTextVNode","createElementVNode","renderList","CheckIcon"],"sources":["../../../src/components/table/SelectComboboxCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Option, SelectColumnSchema } from '@alfakit/core'\nimport {\n  filterSelectColumnOptions,\n  isOptionGroup,\n  searchTableColumnOptions,\n  selectColumnEmptyMessage,\n} from '@alfakit/core'\nimport { CheckIcon, ChevronsUpDownIcon } from '@lucide/vue'\nimport { computed, ref, watch } from 'vue'\nimport { usePanel, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Command from '../ui/Command.vue'\nimport CommandEmpty from '../ui/CommandEmpty.vue'\nimport CommandGroup from '../ui/CommandGroup.vue'\nimport CommandInput from '../ui/CommandInput.vue'\nimport CommandItem from '../ui/CommandItem.vue'\nimport CommandList from '../ui/CommandList.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\n/**\n * `SelectColumn::native(false)`: a combobox, searchable with `searchableOptions()`. Options\n * come with the table, or from the server (`optionsSearchPath`) as the user types.\n */\nconst props = defineProps<CellProps>()\nconst t = useT()\nconst panel = usePanel()\nconst schema = computed(() => props.column as SelectColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst value = ref(\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),\n)\nconst label = ref<string | undefined>(props.cell.optionLabel)\nconst open = ref(false)\nconst search = ref('')\nconst loading = ref(false)\nconst remote = ref<Option[]>([])\nconst isRemote = computed(() => Boolean(schema.value.optionsSearchPath))\nconst staticOptions = computed(() =>\n  schema.value.options.flatMap((option) => (isOptionGroup(option) ? option.options : [option])),\n)\nlet request = 0\n\nwatch([open, search], ([isOpen, term], _old, onCleanup) => {\n  const url = panel.value.endpoints.schemaOptions\n\n  if (!isOpen || !isRemote.value || !url) return\n\n  const timer = setTimeout(() => {\n    const current = ++request\n    loading.value = true\n\n    void searchTableColumnOptions(url, props.token, props.component, schema.value, term)\n      .then((results) => {\n        if (current === request) remote.value = results\n      })\n      .catch(() => {\n        if (current === request) remote.value = []\n      })\n      .finally(() => {\n        if (current === request) loading.value = false\n      })\n  }, schema.value.optionsSearchDebounce ?? 300)\n\n  onCleanup(() => clearTimeout(timer))\n})\n\n// Long labels wrap unless `wrapOptionLabels(false)` truncates them.\nconst optionLabelClass = computed(() =>\n  schema.value.wrapOptionLabels === false\n    ? 'min-w-0 truncate'\n    : 'min-w-0 break-words whitespace-normal',\n)\n\nconst options = computed(() =>\n  filterSelectColumnOptions(\n    isRemote.value ? remote.value : staticOptions.value,\n    schema.value,\n    isRemote.value ? '' : search.value,\n    props.recordKey,\n  ),\n)\nconst emptyMessage = computed(() =>\n  selectColumnEmptyMessage(schema.value, {\n    loading: loading.value,\n    search: search.value,\n    optionCount: options.value.length,\n  }),\n)\nconst currentLabel = computed(\n  () =>\n    staticOptions.value.find((option) => option.value === value.value)?.label ??\n    remote.value.find((option) => option.value === value.value)?.label ??\n    label.value,\n)\nconst showsClear = computed(() => schema.value.selectablePlaceholder && value.value !== '')\n\nconst onOpenChange = (next: boolean) => {\n  open.value = next\n\n  if (!next) search.value = ''\n}\n\nconst choose = (next: string, nextLabel?: string) => {\n  value.value = next\n  label.value = nextLabel\n  onOpenChange(false)\n  void update(next === '' ? null : next)\n}\n</script>\n\n<template>\n  <span @click.stop>\n    <Popover :open=\"open\" @update:open=\"onOpenChange\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          role=\"combobox\"\n          :aria-expanded=\"open\"\n          :aria-label=\"props.column.label || props.column.name\"\n          :aria-invalid=\"error ? true : undefined\"\n          :disabled=\"Boolean(props.cell.disabled) || saving\"\n          :class=\"cn('h-8 min-w-32 justify-between font-normal', error && 'border-destructive')\"\n        >\n          <template v-if=\"value !== '' && currentLabel !== undefined\">\n            <!-- The server sanitises HTML labels (`Support\\Html::sanitize`). -->\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-if=\"schema.allowOptionsHtml\" class=\"min-w-0 truncate\" v-html=\"currentLabel\" />\n            <span v-else class=\"min-w-0 truncate\">{{ currentLabel }}</span>\n          </template>\n          <span v-else class=\"text-muted-foreground\">{{\n            schema.placeholder ??\n            (value !== '' ? value : t('select_option', {}, 'Select an option'))\n          }}</span>\n          <Spinner v-if=\"loading\" class=\"opacity-50\" />\n          <ChevronsUpDownIcon v-else class=\"size-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-64 p-0\" align=\"start\">\n        <Command>\n          <CommandInput\n            v-if=\"schema.searchableOptions\"\n            :model-value=\"search\"\n            :placeholder=\"\n              schema.searchPrompt ?? t('form.search_placeholder', {}, 'Type to search…')\n            \"\n            @update:model-value=\"search = $event\"\n          />\n          <CommandList>\n            <CommandEmpty\n              v-if=\"options.length === 0 && !showsClear\"\n              data-slot=\"select-column-message\"\n              >{{\n                emptyMessage.message ?? t(emptyMessage.key, {}, emptyMessage.fallback)\n              }}</CommandEmpty\n            >\n            <CommandGroup>\n              <CommandItem v-if=\"showsClear\" value=\"\" @select=\"choose('')\">\n                <span class=\"text-muted-foreground\">{{\n                  schema.placeholder ?? t('clear', {}, 'Clear')\n                }}</span>\n              </CommandItem>\n              <CommandItem\n                v-for=\"option in options\"\n                :key=\"option.value\"\n                :value=\"option.value\"\n                :disabled=\"option.disabled\"\n                @select=\"choose(option.value, option.label)\"\n              >\n                <CheckIcon\n                  :class=\"cn('size-4', option.value === value ? 'opacity-100' : 'opacity-0')\"\n                />\n                <!-- eslint-disable-next-line vue/no-v-html -->\n                <span\n                  v-if=\"schema.allowOptionsHtml\"\n                  :class=\"optionLabelClass\"\n                  v-html=\"option.label\"\n                />\n                <span v-else :class=\"optionLabelClass\">{{ option.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n    <span v-if=\"error\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"SelectComboboxCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createVNode","Popover","_withCtx","PopoverTrigger","Button","_unref","_normalizeClass","_Fragment","_toDisplayString","_createBlock","Spinner","PopoverContent","Command","CommandInput","_createCommentVNode","CommandList","CommandEmpty","_createTextVNode","CommandGroup","CommandItem","_createElementVNode","_renderList","Button_default","Spinner_default","Popover_default","PopoverContent_default","PopoverTrigger_default","Command_default","CommandEmpty_default","CommandGroup_default","CommandInput_default","CommandItem_default","CommandList_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","SelectComboboxCell_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","panel","usePanel","schema","computed","useCellUpdate","value","ref","label","open","search","loading","remote","isRemote","staticOptions","isOptionGroup","option","request","isOpen","term","url","timer","current","searchTableColumnOptions","results","optionLabelClass","options","filterSelectColumnOptions","emptyMessage","selectColumnEmptyMessage","currentLabel","showsClear","onOpenChange","next","choose","nextLabel","update","openBlock","createElementBlock","_cache","withModifiers","createVNode","withCtx","unref","error","saving","normalizeClass","cn","Fragment","toDisplayString","createBlock","ChevronsUpDownIcon","$event","createCommentVNode","createTextVNode","createElementVNode","renderList","CheckIcon"],"sources":["../../../src/components/table/SelectComboboxCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Option, SelectColumnSchema } from '@alfakit/core'\nimport {\n  filterSelectColumnOptions,\n  isOptionGroup,\n  searchTableColumnOptions,\n  selectColumnEmptyMessage,\n} from '@alfakit/core'\nimport { CheckIcon, ChevronsUpDownIcon } from '@lucide/vue'\nimport { computed, ref, watch } from 'vue'\nimport { usePanel, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Command from '../ui/Command.vue'\nimport CommandEmpty from '../ui/CommandEmpty.vue'\nimport CommandGroup from '../ui/CommandGroup.vue'\nimport CommandInput from '../ui/CommandInput.vue'\nimport CommandItem from '../ui/CommandItem.vue'\nimport CommandList from '../ui/CommandList.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\n/**\n * `SelectColumn::native(false)`: a combobox, searchable with `searchableOptions()`. Options\n * come with the table, or from the server (`optionsSearchPath`) as the user types.\n */\nconst props = defineProps<CellProps>()\nconst t = useT()\nconst panel = usePanel()\nconst schema = computed(() => props.column as SelectColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst value = ref(\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),\n)\nconst label = ref<string | undefined>(props.cell.optionLabel)\nconst open = ref(false)\nconst search = ref('')\nconst loading = ref(false)\nconst remote = ref<Option[]>([])\nconst isRemote = computed(() => Boolean(schema.value.optionsSearchPath))\nconst staticOptions = computed(() =>\n  schema.value.options.flatMap((option) => (isOptionGroup(option) ? option.options : [option])),\n)\nlet request = 0\n\nwatch([open, search], ([isOpen, term], _old, onCleanup) => {\n  const url = panel.value.endpoints.schemaOptions\n\n  if (!isOpen || !isRemote.value || !url) return\n\n  const timer = setTimeout(() => {\n    const current = ++request\n    loading.value = true\n\n    void searchTableColumnOptions(url, props.token, props.component, schema.value, term)\n      .then((results) => {\n        if (current === request) remote.value = results\n      })\n      .catch(() => {\n        if (current === request) remote.value = []\n      })\n      .finally(() => {\n        if (current === request) loading.value = false\n      })\n  }, schema.value.optionsSearchDebounce ?? 300)\n\n  onCleanup(() => clearTimeout(timer))\n})\n\n// Long labels wrap unless `wrapOptionLabels(false)` truncates them.\nconst optionLabelClass = computed(() =>\n  schema.value.wrapOptionLabels === false\n    ? 'min-w-0 truncate'\n    : 'min-w-0 break-words whitespace-normal',\n)\n\nconst options = computed(() =>\n  filterSelectColumnOptions(\n    isRemote.value ? remote.value : staticOptions.value,\n    schema.value,\n    isRemote.value ? '' : search.value,\n    props.recordKey,\n  ),\n)\nconst emptyMessage = computed(() =>\n  selectColumnEmptyMessage(schema.value, {\n    loading: loading.value,\n    search: search.value,\n    optionCount: options.value.length,\n  }),\n)\nconst currentLabel = computed(\n  () =>\n    staticOptions.value.find((option) => option.value === value.value)?.label ??\n    remote.value.find((option) => option.value === value.value)?.label ??\n    label.value,\n)\nconst showsClear = computed(() => schema.value.selectablePlaceholder && value.value !== '')\n\nconst onOpenChange = (next: boolean) => {\n  open.value = next\n\n  if (!next) search.value = ''\n}\n\nconst choose = (next: string, nextLabel?: string) => {\n  value.value = next\n  label.value = nextLabel\n  onOpenChange(false)\n  void update(next === '' ? null : next)\n}\n</script>\n\n<template>\n  <span @click.stop>\n    <Popover :open=\"open\" @update:open=\"onOpenChange\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          role=\"combobox\"\n          :aria-expanded=\"open\"\n          :aria-label=\"props.column.label || props.column.name\"\n          :aria-invalid=\"error ? true : undefined\"\n          :disabled=\"Boolean(props.cell.disabled) || saving\"\n          :class=\"cn('h-8 min-w-32 justify-between font-normal', error && 'border-destructive')\"\n        >\n          <template v-if=\"value !== '' && currentLabel !== undefined\">\n            <!-- The server sanitises HTML labels (`Support\\Html::sanitize`). -->\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-if=\"schema.allowOptionsHtml\" class=\"min-w-0 truncate\" v-html=\"currentLabel\" />\n            <span v-else class=\"min-w-0 truncate\">{{ currentLabel }}</span>\n          </template>\n          <span v-else class=\"text-muted-foreground\">{{\n            schema.placeholder ??\n            (value !== '' ? value : t('select_option', {}, 'Select an option'))\n          }}</span>\n          <Spinner v-if=\"loading\" class=\"opacity-50\" />\n          <ChevronsUpDownIcon v-else class=\"size-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-64 p-0\" align=\"start\">\n        <Command>\n          <CommandInput\n            v-if=\"schema.searchableOptions\"\n            :model-value=\"search\"\n            :placeholder=\"\n              schema.searchPrompt ?? t('form.search_placeholder', {}, 'Type to search…')\n            \"\n            @update:model-value=\"search = $event\"\n          />\n          <CommandList>\n            <CommandEmpty\n              v-if=\"options.length === 0 && !showsClear\"\n              data-slot=\"select-column-message\"\n              >{{\n                emptyMessage.message ?? t(emptyMessage.key, {}, emptyMessage.fallback)\n              }}</CommandEmpty\n            >\n            <CommandGroup>\n              <CommandItem v-if=\"showsClear\" value=\"\" @select=\"choose('')\">\n                <span class=\"text-muted-foreground\">{{\n                  schema.placeholder ?? t('clear', {}, 'Clear')\n                }}</span>\n              </CommandItem>\n              <CommandItem\n                v-for=\"option in options\"\n                :key=\"option.value\"\n                :value=\"option.value\"\n                :disabled=\"option.disabled\"\n                @select=\"choose(option.value, option.label)\"\n              >\n                <CheckIcon\n                  :class=\"cn('size-4', option.value === value ? 'opacity-100' : 'opacity-0')\"\n                />\n                <!-- eslint-disable-next-line vue/no-v-html -->\n                <span\n                  v-if=\"schema.allowOptionsHtml\"\n                  :class=\"optionLabelClass\"\n                  v-html=\"option.label\"\n                />\n                <span v-else :class=\"optionLabelClass\">{{ option.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n    <span v-if=\"error\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":"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"}

package/dist/components/table/TableCellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellContent.js","names":["_sfc_main","TableCellContent_vue_vue_type_script_setup_true_lang_default","TableCellContent_default"],"sources":["../../../src/components/table/TableCellContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColorColumnSchema, IconColumnSchema } from '@alfakit/core'\nimport {\n  columnRegistryKey,\n  remainingTextSizeClass,\n  stackedImageStyle,\n  usesDefaultImageStack,\n} from '@alfakit/core'\nimport { CheckIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { useRegistry, useT } from '../../context'\nimport { colorClass, iconSizeClasses, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport FormattedText from '../entries/FormattedText.vue'\nimport BooleanCell from './BooleanCell.vue'\nimport type { CellProps } from './cell-update'\nimport SelectCell from './SelectCell.vue'\nimport SelectComboboxCell from './SelectComboboxCell.vue'\nimport TextInputCell from './TextInputCell.vue'\n\nconst props = defineProps<CellProps>()\nconst registry = useRegistry()\n// A component registered as `column:<type>` replaces the built-in cell renderer.\nconst custom = computed(() => registry.resolve(columnRegistryKey(props.column)))\nconst t = useT()\n// `ViewColumn`: the application component registered under the column's `view()` name.\nconst viewName = computed(() => (props.column as { component?: string }).component ?? '')\nconst view = computed(() =>\n  props.column.type === 'ViewColumn' && viewName.value\n    ? registry.resolve(viewName.value)\n    : undefined,\n)\n\nconst imageSchema = computed(\n  () =>\n    props.column as {\n      circular?: boolean\n      square?: boolean\n      size?: number | string\n      height?: number | string\n      width?: string\n      stacked?: boolean\n      limit?: number\n      limitedRemainingText?: boolean\n      limitedRemainingTextSize?: string\n      wrap?: boolean\n      ring?: number\n      overlap?: number\n    },\n)\nconst defaultImageStack = computed(() => usesDefaultImageStack(imageSchema.value))\nconst imageUrls = computed(() =>\n  Array.isArray(props.cell.state) ? (props.cell.state as string[]) : [],\n)\nconst imageLimit = computed(() => imageSchema.value.limit ?? imageUrls.value.length)\nconst toCss = (value: number | string | undefined) =>\n  typeof value === 'number' ? `${value}px` : value\nconst imageStyle = computed(() => {\n  const size = imageSchema.value.size ?? 40\n\n  return {\n    height: toCss(imageSchema.value.height ?? size),\n    width: toCss(\n      imageSchema.value.width ??\n        (imageSchema.value.square || imageSchema.value.circular ? size : undefined),\n    ),\n  }\n})\nconst colors = computed(() =>\n  Array.isArray(props.cell.state)\n    ? (props.cell.state as string[])\n    : props.cell.state\n      ? [String(props.cell.state)]\n      : [],\n)\nconst colorSchema = computed(() => props.column as ColorColumnSchema)\nconst copiedColor = ref<string | null>(null)\nconst copyColor = (color: string) => {\n  void navigator.clipboard?.writeText(color).then(() => {\n    copiedColor.value = color\n    setTimeout(() => {\n      copiedColor.value = null\n    }, colorSchema.value.copyMessageDuration ?? 1500)\n  })\n}\nconst textSchema = computed(() => ({\n  ...(props.column as object),\n  color: props.cell.color,\n  icon: props.cell.icon,\n  iconPosition: props.cell.iconPosition,\n  iconColor: props.cell.iconColor,\n  itemColors: props.cell.itemColors,\n  itemIcons: props.cell.itemIcons,\n  itemUrls: props.cell.itemUrls,\n}))\n// `SelectColumn::native(false)` renders a combobox.\nconst isComboboxSelect = computed(\n  () =>\n    props.column.type === 'SelectColumn' && (props.column as { native?: boolean }).native === false,\n)\nconst descriptionPosition = computed(\n  () =>\n    (props.column as { descriptionPosition?: 'above' | 'below' }).descriptionPosition ?? 'below',\n)\n</script>\n\n<template>\n  <component :is=\"custom\" v-if=\"custom\" v-bind=\"props\" />\n  <component\n    :is=\"view\"\n    v-else-if=\"view\"\n    v-bind=\"{ ...(props.cell.props ?? {}), state: props.cell.state, ...props }\"\n  />\n  <span v-else-if=\"props.column.type === 'ViewColumn'\" class=\"text-destructive text-xs\">{{\n    t(\n      'component_not_registered',\n      { component: viewName },\n      `Component ${viewName} is not registered.`,\n    )\n  }}</span>\n  <template v-else-if=\"props.column.type === 'IconColumn'\">\n    <!-- A list state: one icon per item (`wrap()` lets them wrap). -->\n    <div\n      v-if=\"props.cell.icons\"\n      data-slot=\"icon-column-icons\"\n      :class=\"\n        cn(\n          'flex items-center gap-1.5',\n          (props.column as IconColumnSchema).wrap ? 'flex-wrap' : 'flex-nowrap',\n        )\n      \"\n    >\n      <span v-if=\"props.cell.icons.length === 0\" class=\"text-muted-foreground\">—</span>\n      <Icon\n        v-for=\"(item, index) in props.cell.icons\"\n        :key=\"index\"\n        :name=\"item.icon\"\n        :class=\"\n          cn(\n            colorClass(iconSizeClasses, props.cell.size, 'md'),\n            item.color && textColorClasses[item.color],\n          )\n        \"\n      />\n    </div>\n    <Icon\n      v-else-if=\"props.cell.icon\"\n      :name=\"props.cell.icon\"\n      :class=\"\n        cn(\n          colorClass(iconSizeClasses, props.cell.size, 'md'),\n          props.cell.color && textColorClasses[props.cell.color],\n        )\n      \"\n    />\n    <span v-else class=\"text-muted-foreground\">—</span>\n  </template>\n  <template v-else-if=\"props.column.type === 'ImageColumn'\">\n    <span v-if=\"imageUrls.length === 0\" class=\"text-muted-foreground\">—</span>\n    <div\n      v-else\n      :class=\"\n        cn(\n          'flex items-center',\n          imageSchema.wrap && 'flex-wrap',\n          imageSchema.stacked ? defaultImageStack && '-space-x-2' : 'gap-1.5',\n          imageSchema.wrap && imageSchema.stacked && 'gap-y-1.5',\n        )\n      \"\n    >\n      <img\n        v-for=\"(url, index) in imageUrls.slice(0, imageLimit)\"\n        :key=\"index\"\n        :src=\"url\"\n        :alt=\"props.cell.alt ?? ''\"\n        :style=\"[imageStyle, stackedImageStyle(index, imageSchema)]\"\n        :class=\"\n          cn(\n            'object-cover',\n            imageSchema.circular ? 'rounded-full' : 'rounded-md',\n            imageSchema.stacked && defaultImageStack && 'ring-background ring-2',\n          )\n        \"\n        v-bind=\"props.cell.extraImgAttributes\"\n      />\n      <span\n        v-if=\"imageSchema.limitedRemainingText && imageUrls.length > imageLimit\"\n        data-slot=\"image-remaining\"\n        :class=\"\n          cn(\n            'text-muted-foreground ms-1',\n            remainingTextSizeClass(imageSchema.limitedRemainingTextSize),\n          )\n        \"\n        >+{{ imageUrls.length - imageLimit }}</span\n      >\n    </div>\n  </template>\n  <template v-else-if=\"props.column.type === 'ColorColumn'\">\n    <span v-if=\"colors.length === 0\" class=\"text-muted-foreground\">—</span>\n    <div\n      v-else\n      :class=\"cn('flex items-center gap-1.5', colorSchema.wrap ? 'flex-wrap' : 'flex-nowrap')\"\n    >\n      <template v-for=\"color in colors\" :key=\"color\">\n        <!-- The cell may sit inside a link or a clickable row. -->\n        <button\n          v-if=\"colorSchema.copyable\"\n          type=\"button\"\n          data-slot=\"color-copy\"\n          :title=\"color\"\n          :aria-label=\"`${t('copy', {}, 'Copy')} ${color}`\"\n          class=\"focus-visible:ring-ring/50 inline-flex rounded outline-none focus-visible:ring-[3px]\"\n          @click.prevent.stop=\"copyColor(color)\"\n        >\n          <span\n            class=\"inline-flex size-5 items-center justify-center rounded border shadow-xs\"\n            :style=\"{ backgroundColor: color }\"\n          >\n            <CheckIcon\n              v-if=\"copiedColor === color\"\n              class=\"size-3 text-white mix-blend-difference\"\n            />\n          </span>\n        </button>\n        <span\n          v-else\n          :title=\"color\"\n          class=\"size-5 rounded border shadow-xs\"\n          :style=\"{ backgroundColor: color }\"\n        />\n      </template>\n      <span\n        v-if=\"colorSchema.copyable && copiedColor\"\n        role=\"status\"\n        :class=\"cn('text-xs', !colorSchema.copyMessage && 'sr-only')\"\n        >{{ colorSchema.copyMessage ?? t('copied', {}, 'Copied') }}</span\n      >\n    </div>\n  </template>\n  <BooleanCell\n    v-else-if=\"props.column.type === 'ToggleColumn' || props.column.type === 'CheckboxColumn'\"\n    v-bind=\"props\"\n  />\n  <SelectComboboxCell v-else-if=\"isComboboxSelect\" v-bind=\"props\" />\n  <SelectCell v-else-if=\"props.column.type === 'SelectColumn'\" v-bind=\"props\" />\n  <TextInputCell v-else-if=\"props.column.type === 'TextInputColumn'\" v-bind=\"props\" />\n  <div v-else class=\"flex flex-col gap-0.5\">\n    <span\n      v-if=\"props.cell.description && descriptionPosition === 'above'\"\n      class=\"text-muted-foreground block text-xs\"\n      >{{ props.cell.description }}</span\n    >\n    <FormattedText :value=\"props.cell.state\" :schema=\"textSchema\" />\n    <span\n      v-if=\"props.cell.description && descriptionPosition === 'below'\"\n      class=\"text-muted-foreground block text-xs\"\n      >{{ props.cell.description }}</span\n    >\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TableCellContent.js","names":["_sfc_main","TableCellContent_vue_vue_type_script_setup_true_lang_default","TableCellContent_default"],"sources":["../../../src/components/table/TableCellContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColorColumnSchema, IconColumnSchema } from '@alfakit/core'\nimport {\n  columnRegistryKey,\n  remainingTextSizeClass,\n  stackedImageStyle,\n  usesDefaultImageStack,\n} from '@alfakit/core'\nimport { CheckIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { useRegistry, useT } from '../../context'\nimport { colorClass, iconSizeClasses, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport FormattedText from '../entries/FormattedText.vue'\nimport BooleanCell from './BooleanCell.vue'\nimport type { CellProps } from './cell-update'\nimport SelectCell from './SelectCell.vue'\nimport SelectComboboxCell from './SelectComboboxCell.vue'\nimport TextInputCell from './TextInputCell.vue'\n\nconst props = defineProps<CellProps>()\nconst registry = useRegistry()\n// A component registered as `column:<type>` replaces the built-in cell renderer.\nconst custom = computed(() =>\n  props.fromRegistry ? undefined : registry.resolve(columnRegistryKey(props.column)),\n)\nconst t = useT()\n// `ViewColumn`: the application component registered under the column's `view()` name.\nconst viewName = computed(() => (props.column as { component?: string }).component ?? '')\nconst view = computed(() =>\n  props.column.type === 'ViewColumn' && viewName.value\n    ? registry.resolve(viewName.value)\n    : undefined,\n)\n\nconst imageSchema = computed(\n  () =>\n    props.column as {\n      circular?: boolean\n      square?: boolean\n      size?: number | string\n      height?: number | string\n      width?: string\n      stacked?: boolean\n      limit?: number\n      limitedRemainingText?: boolean\n      limitedRemainingTextSize?: string\n      wrap?: boolean\n      ring?: number\n      overlap?: number\n    },\n)\nconst defaultImageStack = computed(() => usesDefaultImageStack(imageSchema.value))\nconst imageUrls = computed(() =>\n  Array.isArray(props.cell.state) ? (props.cell.state as string[]) : [],\n)\nconst imageLimit = computed(() => imageSchema.value.limit ?? imageUrls.value.length)\nconst toCss = (value: number | string | undefined) =>\n  typeof value === 'number' ? `${value}px` : value\nconst imageStyle = computed(() => {\n  const size = imageSchema.value.size ?? 40\n\n  return {\n    height: toCss(imageSchema.value.height ?? size),\n    width: toCss(\n      imageSchema.value.width ??\n        (imageSchema.value.square || imageSchema.value.circular ? size : undefined),\n    ),\n  }\n})\nconst colors = computed(() =>\n  Array.isArray(props.cell.state)\n    ? (props.cell.state as string[])\n    : props.cell.state\n      ? [String(props.cell.state)]\n      : [],\n)\nconst colorSchema = computed(() => props.column as ColorColumnSchema)\nconst copiedColor = ref<string | null>(null)\nconst copyColor = (color: string) => {\n  void navigator.clipboard?.writeText(color).then(() => {\n    copiedColor.value = color\n    setTimeout(() => {\n      copiedColor.value = null\n    }, colorSchema.value.copyMessageDuration ?? 1500)\n  })\n}\nconst textSchema = computed(() => ({\n  ...(props.column as object),\n  color: props.cell.color,\n  icon: props.cell.icon,\n  iconPosition: props.cell.iconPosition,\n  iconColor: props.cell.iconColor,\n  itemColors: props.cell.itemColors,\n  itemIcons: props.cell.itemIcons,\n  itemUrls: props.cell.itemUrls,\n}))\n// `SelectColumn::native(false)` renders a combobox.\nconst isComboboxSelect = computed(\n  () =>\n    props.column.type === 'SelectColumn' && (props.column as { native?: boolean }).native === false,\n)\nconst descriptionPosition = computed(\n  () =>\n    (props.column as { descriptionPosition?: 'above' | 'below' }).descriptionPosition ?? 'below',\n)\n</script>\n\n<template>\n  <component :is=\"custom\" v-if=\"custom\" v-bind=\"props\" :from-registry=\"true\" />\n  <component\n    :is=\"view\"\n    v-else-if=\"view\"\n    v-bind=\"{ ...(props.cell.props ?? {}), state: props.cell.state, ...props }\"\n  />\n  <span v-else-if=\"props.column.type === 'ViewColumn'\" class=\"text-destructive text-xs\">{{\n    t(\n      'component_not_registered',\n      { component: viewName },\n      `Component ${viewName} is not registered.`,\n    )\n  }}</span>\n  <template v-else-if=\"props.column.type === 'IconColumn'\">\n    <!-- A list state: one icon per item (`wrap()` lets them wrap). -->\n    <div\n      v-if=\"props.cell.icons\"\n      data-slot=\"icon-column-icons\"\n      :class=\"\n        cn(\n          'flex items-center gap-1.5',\n          (props.column as IconColumnSchema).wrap ? 'flex-wrap' : 'flex-nowrap',\n        )\n      \"\n    >\n      <span v-if=\"props.cell.icons.length === 0\" class=\"text-muted-foreground\">—</span>\n      <Icon\n        v-for=\"(item, index) in props.cell.icons\"\n        :key=\"index\"\n        :name=\"item.icon\"\n        :class=\"\n          cn(\n            colorClass(iconSizeClasses, props.cell.size, 'md'),\n            item.color && textColorClasses[item.color],\n          )\n        \"\n      />\n    </div>\n    <Icon\n      v-else-if=\"props.cell.icon\"\n      :name=\"props.cell.icon\"\n      :class=\"\n        cn(\n          colorClass(iconSizeClasses, props.cell.size, 'md'),\n          props.cell.color && textColorClasses[props.cell.color],\n        )\n      \"\n    />\n    <span v-else class=\"text-muted-foreground\">—</span>\n  </template>\n  <template v-else-if=\"props.column.type === 'ImageColumn'\">\n    <span v-if=\"imageUrls.length === 0\" class=\"text-muted-foreground\">—</span>\n    <div\n      v-else\n      :class=\"\n        cn(\n          'flex items-center',\n          imageSchema.wrap && 'flex-wrap',\n          imageSchema.stacked ? defaultImageStack && '-space-x-2' : 'gap-1.5',\n          imageSchema.wrap && imageSchema.stacked && 'gap-y-1.5',\n        )\n      \"\n    >\n      <img\n        v-for=\"(url, index) in imageUrls.slice(0, imageLimit)\"\n        :key=\"index\"\n        :src=\"url\"\n        :alt=\"props.cell.alt ?? ''\"\n        :style=\"[imageStyle, stackedImageStyle(index, imageSchema)]\"\n        :class=\"\n          cn(\n            'object-cover',\n            imageSchema.circular ? 'rounded-full' : 'rounded-md',\n            imageSchema.stacked && defaultImageStack && 'ring-background ring-2',\n          )\n        \"\n        v-bind=\"props.cell.extraImgAttributes\"\n      />\n      <span\n        v-if=\"imageSchema.limitedRemainingText && imageUrls.length > imageLimit\"\n        data-slot=\"image-remaining\"\n        :class=\"\n          cn(\n            'text-muted-foreground ms-1',\n            remainingTextSizeClass(imageSchema.limitedRemainingTextSize),\n          )\n        \"\n        >+{{ imageUrls.length - imageLimit }}</span\n      >\n    </div>\n  </template>\n  <template v-else-if=\"props.column.type === 'ColorColumn'\">\n    <span v-if=\"colors.length === 0\" class=\"text-muted-foreground\">—</span>\n    <div\n      v-else\n      :class=\"cn('flex items-center gap-1.5', colorSchema.wrap ? 'flex-wrap' : 'flex-nowrap')\"\n    >\n      <template v-for=\"color in colors\" :key=\"color\">\n        <!-- The cell may sit inside a link or a clickable row. -->\n        <button\n          v-if=\"colorSchema.copyable\"\n          type=\"button\"\n          data-slot=\"color-copy\"\n          :title=\"color\"\n          :aria-label=\"`${t('copy', {}, 'Copy')} ${color}`\"\n          class=\"focus-visible:ring-ring/50 inline-flex rounded outline-none focus-visible:ring-[3px]\"\n          @click.prevent.stop=\"copyColor(color)\"\n        >\n          <span\n            class=\"inline-flex size-5 items-center justify-center rounded border shadow-xs\"\n            :style=\"{ backgroundColor: color }\"\n          >\n            <CheckIcon\n              v-if=\"copiedColor === color\"\n              class=\"size-3 text-white mix-blend-difference\"\n            />\n          </span>\n        </button>\n        <span\n          v-else\n          :title=\"color\"\n          class=\"size-5 rounded border shadow-xs\"\n          :style=\"{ backgroundColor: color }\"\n        />\n      </template>\n      <span\n        v-if=\"colorSchema.copyable && copiedColor\"\n        role=\"status\"\n        :class=\"cn('text-xs', !colorSchema.copyMessage && 'sr-only')\"\n        >{{ colorSchema.copyMessage ?? t('copied', {}, 'Copied') }}</span\n      >\n    </div>\n  </template>\n  <BooleanCell\n    v-else-if=\"props.column.type === 'ToggleColumn' || props.column.type === 'CheckboxColumn'\"\n    v-bind=\"props\"\n  />\n  <SelectComboboxCell v-else-if=\"isComboboxSelect\" v-bind=\"props\" />\n  <SelectCell v-else-if=\"props.column.type === 'SelectColumn'\" v-bind=\"props\" />\n  <TextInputCell v-else-if=\"props.column.type === 'TextInputColumn'\" v-bind=\"props\" />\n  <div v-else class=\"flex flex-col gap-0.5\">\n    <span\n      v-if=\"props.cell.description && descriptionPosition === 'above'\"\n      class=\"text-muted-foreground block text-xs\"\n      >{{ props.cell.description }}</span\n    >\n    <FormattedText :value=\"props.cell.state\" :schema=\"textSchema\" />\n    <span\n      v-if=\"props.cell.description && descriptionPosition === 'below'\"\n      class=\"text-muted-foreground block text-xs\"\n      >{{ props.cell.description }}</span\n    >\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/table/TableCellContent.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellContent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableCellContent.vue"],"names":[],"mappings":"AAuRA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;;AAyd9C,wBAMG"}
+{"version":3,"file":"TableCellContent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableCellContent.vue"],"names":[],"mappings":"AAyRA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;;AA6d9C,wBAMG"}