@alfakit/vue 0.1.1 → 0.1.6

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/GroupHeaderRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupHeaderRow.js","names":["_sfc_main","GroupHeaderRow_vue_vue_type_script_setup_true_lang_default","GroupHeaderRow_default"],"sources":["../../../src/components/table/GroupHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableRecordGroupSchema } from '@alfakit/core'\nimport { ChevronDownIcon, ChevronRightIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Checkbox from '../ui/Checkbox.vue'\nimport TableCell from '../ui/TableCell.vue'\nimport TableRow from '../ui/TableRow.vue'\n\n/** A group heading row (`data-slot=\"table-group\"`), with a collapse toggle when collapsible. */\nconst props = defineProps<{\n  group: TableRecordGroupSchema\n  collapsed: boolean\n  collapsible: boolean\n  colSpan: number\n  /** `selectGroupsOnly()`: a checkbox selecting the group's records on the page. */\n  selection?: { checked: boolean | 'indeterminate'; onChange: (checked: boolean) => void }\n}>()\nconst emit = defineEmits<{ toggle: [] }>()\nconst t = useT()\n\nconst toggleLabel = computed(\n  () =>\n    `${props.collapsed ? t('table_grouping.expand', {}, 'Expand group') : t('table_grouping.collapse', {}, 'Collapse group')}: ${props.group.title}`,\n)\n</script>\n\n<template>\n  <TableRow data-slot=\"table-group\" class=\"bg-muted/50 hover:bg-muted/50\">\n    <TableCell :colspan=\"props.colSpan\" class=\"py-2\">\n      <span class=\"flex items-center gap-3\">\n        <Checkbox\n          v-if=\"props.selection\"\n          :model-value=\"props.selection.checked\"\n          :aria-label=\"t('table.select_group', { group: props.group.title }, 'Select group :group')\"\n          @update:model-value=\"props.selection.onChange($event === true)\"\n        />\n        <button\n          v-if=\"props.collapsible\"\n          type=\"button\"\n          class=\"focus-visible:ring-ring/50 flex items-center gap-2 rounded-sm text-start outline-none focus-visible:ring-[3px]\"\n          :aria-expanded=\"!props.collapsed\"\n          :aria-label=\"toggleLabel\"\n          @click=\"emit('toggle')\"\n        >\n          <ChevronRightIcon\n            v-if=\"props.collapsed\"\n            class=\"size-4 shrink-0 rtl:rotate-180\"\n            aria-hidden=\"true\"\n          />\n          <Icon\n            v-else\n            name=\"alfakit::tables.grouping.collapse-button\"\n            :fallback=\"ChevronDownIcon\"\n            class=\"size-4 shrink-0\"\n            aria-hidden=\"true\"\n          />\n          <span class=\"flex flex-col items-start\">\n            <span class=\"font-medium\">{{ props.group.title }}</span>\n            <span\n              v-if=\"props.group.description\"\n              class=\"text-muted-foreground text-xs font-normal\"\n              >{{ props.group.description }}</span\n            >\n          </span>\n        </button>\n        <span v-else class=\"flex flex-col items-start\">\n          <span class=\"font-medium\">{{ props.group.title }}</span>\n          <span v-if=\"props.group.description\" class=\"text-muted-foreground text-xs font-normal\">{{\n            props.group.description\n          }}</span>\n        </span>\n      </span>\n    </TableCell>\n  </TableRow>\n</template>\n"],"mappings":""}
+{"version":3,"file":"GroupHeaderRow.js","names":["_sfc_main","GroupHeaderRow_vue_vue_type_script_setup_true_lang_default","GroupHeaderRow_default"],"sources":["../../../src/components/table/GroupHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableRecordGroupSchema } from '@alfakit/core'\nimport { ChevronDownIcon, ChevronRightIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport Checkbox from '../ui/Checkbox.vue'\nimport TableCell from '../ui/TableCell.vue'\nimport TableRow from '../ui/TableRow.vue'\n\n/** A group heading row (`data-slot=\"table-group\"`), with a collapse toggle when collapsible. */\nconst props = defineProps<{\n  group: TableRecordGroupSchema\n  collapsed: boolean\n  collapsible: boolean\n  colSpan: number\n  /** `selectGroupsOnly()`: a checkbox selecting the group's records on the page. */\n  selection?: { checked: boolean | 'indeterminate'; onChange: (checked: boolean) => void }\n}>()\nconst emit = defineEmits<{ toggle: [] }>()\nconst t = useT()\n\n// An enum group shows its `HasIcon` icon, in its `HasColor` colour, before the title.\nconst groupIconClass = computed(\n  () => `size-4 shrink-0 ${colorClass(textColorClasses, props.group.color, 'gray')}`,\n)\n\nconst toggleLabel = computed(\n  () =>\n    `${props.collapsed ? t('table_grouping.expand', {}, 'Expand group') : t('table_grouping.collapse', {}, 'Collapse group')}: ${props.group.title}`,\n)\n</script>\n\n<template>\n  <TableRow data-slot=\"table-group\" class=\"bg-muted/50 hover:bg-muted/50\">\n    <TableCell :colspan=\"props.colSpan\" class=\"py-2\">\n      <span class=\"flex items-center gap-3\">\n        <Checkbox\n          v-if=\"props.selection\"\n          :model-value=\"props.selection.checked\"\n          :aria-label=\"t('table.select_group', { group: props.group.title }, 'Select group :group')\"\n          @update:model-value=\"props.selection.onChange($event === true)\"\n        />\n        <button\n          v-if=\"props.collapsible\"\n          type=\"button\"\n          class=\"focus-visible:ring-ring/50 flex items-center gap-2 rounded-sm text-start outline-none focus-visible:ring-[3px]\"\n          :aria-expanded=\"!props.collapsed\"\n          :aria-label=\"toggleLabel\"\n          @click=\"emit('toggle')\"\n        >\n          <ChevronRightIcon\n            v-if=\"props.collapsed\"\n            class=\"size-4 shrink-0 rtl:rotate-180\"\n            aria-hidden=\"true\"\n          />\n          <Icon\n            v-else\n            name=\"alfakit::tables.grouping.collapse-button\"\n            :fallback=\"ChevronDownIcon\"\n            class=\"size-4 shrink-0\"\n            aria-hidden=\"true\"\n          />\n          <Icon\n            v-if=\"props.group.icon\"\n            :name=\"props.group.icon\"\n            :class=\"groupIconClass\"\n            aria-hidden=\"true\"\n          />\n          <span class=\"flex flex-col items-start\">\n            <span class=\"font-medium\">{{ props.group.title }}</span>\n            <span\n              v-if=\"props.group.description\"\n              class=\"text-muted-foreground text-xs font-normal\"\n              >{{ props.group.description }}</span\n            >\n          </span>\n        </button>\n        <span\n          v-else-if=\"props.group.icon\"\n          data-slot=\"table-group-title\"\n          class=\"flex items-center gap-2\"\n        >\n          <Icon :name=\"props.group.icon\" :class=\"groupIconClass\" aria-hidden=\"true\" />\n          <span class=\"flex flex-col items-start\">\n            <span class=\"font-medium\">{{ props.group.title }}</span>\n            <span\n              v-if=\"props.group.description\"\n              class=\"text-muted-foreground text-xs font-normal\"\n              >{{ props.group.description }}</span\n            >\n          </span>\n        </span>\n        <span v-else class=\"flex flex-col items-start\">\n          <span class=\"font-medium\">{{ props.group.title }}</span>\n          <span v-if=\"props.group.description\" class=\"text-muted-foreground text-xs font-normal\">{{\n            props.group.description\n          }}</span>\n        </span>\n      </span>\n    </TableCell>\n  </TableRow>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"GroupHeaderRow.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/GroupHeaderRow.vue"],"names":[],"mappings":"AA+EA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAS3D,gGAAgG;AAChG,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,sBAAsB,CAAA;IAC7B,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,kFAAkF;IAClF,SAAS,CAAC,EAAE;QAAE,OAAO,EAAE,OAAO,GAAG,eAAe,CAAC;QAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,CAAA;CACzF,CAAC;;;;;;AA4MF,wBAOG"}
+{"version":3,"file":"GroupHeaderRow.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/GroupHeaderRow.vue"],"names":[],"mappings":"AA0GA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAU3D,gGAAgG;AAChG,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,sBAAsB,CAAA;IAC7B,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,kFAAkF;IAClF,SAAS,CAAC,EAAE;QAAE,OAAO,EAAE,OAAO,GAAG,eAAe,CAAC;QAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,CAAA;CACzF,CAAC;;;;;;AA2QF,wBAOG"}

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

@@ -1,21 +1,29 @@
 import { useT as e } from "../../context.js";
-import t from "../../lib/Icon.js";
-import n from "../ui/Checkbox.js";
-import r from "../ui/TableCell.js";
-import i from "../ui/TableRow.js";
-import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, openBlock as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
-import { ChevronDownIcon as g, ChevronRightIcon as _ } from "@lucide/vue";
+import { colorClass as t, textColorClasses as n } from "../../lib/colors.js";
+import r from "../../lib/Icon.js";
+import i from "../ui/Checkbox.js";
+import a from "../ui/TableCell.js";
+import o from "../ui/TableRow.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
+import { ChevronDownIcon as y, ChevronRightIcon as b } from "@lucide/vue";
 //#region src/components/table/GroupHeaderRow.vue?vue&type=script&setup=true&lang.ts
-var v = { class: "flex items-center gap-3" }, y = ["aria-expanded", "aria-label"], b = { class: "flex flex-col items-start" }, x = { class: "font-medium" }, S = {
+var x = { class: "flex items-center gap-3" }, S = ["aria-expanded", "aria-label"], C = { class: "flex flex-col items-start" }, w = { class: "font-medium" }, T = {
 	key: 0,
 	class: "text-muted-foreground text-xs font-normal"
-}, C = {
+}, E = {
 	key: 2,
+	"data-slot": "table-group-title",
+	class: "flex items-center gap-2"
+}, D = { class: "flex flex-col items-start" }, O = { class: "font-medium" }, k = {
+	key: 0,
+	class: "text-muted-foreground text-xs font-normal"
+}, A = {
+	key: 3,
 	class: "flex flex-col items-start"
-}, w = { class: "font-medium" }, T = {
+}, j = { class: "font-medium" }, M = {
 	key: 0,
 	class: "text-muted-foreground text-xs font-normal"
-}, E = /*@__PURE__*/ d({
+}, N = /*@__PURE__*/ p({
 	__name: "GroupHeaderRow",
 	props: {
 		group: {},
@@ -25,39 +33,52 @@ var v = { class: "flex items-center gap-3" }, y = ["aria-expanded", "aria-label"
 		selection: {}
 	},
 	emits: ["toggle"],
-	setup(d, { emit: E }) {
-		let D = d, O = E, k = e(), A = a(() => `${D.collapsed ? k("table_grouping.expand", {}, "Expand group") : k("table_grouping.collapse", {}, "Collapse group")}: ${D.group.title}`);
-		return (e, a) => (f(), o(i, {
+	setup(p, { emit: N }) {
+		let P = p, F = N, I = e(), L = s(() => `size-4 shrink-0 ${t(n, P.group.color, "gray")}`), R = s(() => `${P.collapsed ? I("table_grouping.expand", {}, "Expand group") : I("table_grouping.collapse", {}, "Collapse group")}: ${P.group.title}`);
+		return (e, t) => (h(), c(o, {
 			"data-slot": "table-group",
 			class: "bg-muted/50 hover:bg-muted/50"
 		}, {
-			default: h(() => [u(r, {
-				colspan: D.colSpan,
+			default: v(() => [f(a, {
+				colspan: P.colSpan,
 				class: "py-2"
 			}, {
-				default: h(() => [l("span", v, [D.selection ? (f(), o(n, {
+				default: v(() => [d("span", x, [P.selection ? (h(), c(i, {
 					key: 0,
-					"model-value": D.selection.checked,
-					"aria-label": m(k)("table.select_group", { group: D.group.title }, "Select group :group"),
-					"onUpdate:modelValue": a[0] ||= (e) => D.selection.onChange(e === !0)
-				}, null, 8, ["model-value", "aria-label"])) : s("", !0), D.collapsible ? (f(), c("button", {
+					"model-value": P.selection.checked,
+					"aria-label": _(I)("table.select_group", { group: P.group.title }, "Select group :group"),
+					"onUpdate:modelValue": t[0] ||= (e) => P.selection.onChange(e === !0)
+				}, null, 8, ["model-value", "aria-label"])) : l("", !0), P.collapsible ? (h(), u("button", {
 					key: 1,
 					type: "button",
 					class: "focus-visible:ring-ring/50 flex items-center gap-2 rounded-sm text-start outline-none focus-visible:ring-[3px]",
-					"aria-expanded": !D.collapsed,
-					"aria-label": A.value,
-					onClick: a[1] ||= (e) => O("toggle")
-				}, [D.collapsed ? (f(), o(m(_), {
-					key: 0,
-					class: "size-4 shrink-0 rtl:rotate-180",
-					"aria-hidden": "true"
-				})) : (f(), o(m(t), {
-					key: 1,
-					name: "alfakit::tables.grouping.collapse-button",
-					fallback: m(g),
-					class: "size-4 shrink-0",
+					"aria-expanded": !P.collapsed,
+					"aria-label": R.value,
+					onClick: t[1] ||= (e) => F("toggle")
+				}, [
+					P.collapsed ? (h(), c(_(b), {
+						key: 0,
+						class: "size-4 shrink-0 rtl:rotate-180",
+						"aria-hidden": "true"
+					})) : (h(), c(_(r), {
+						key: 1,
+						name: "alfakit::tables.grouping.collapse-button",
+						fallback: _(y),
+						class: "size-4 shrink-0",
+						"aria-hidden": "true"
+					}, null, 8, ["fallback"])),
+					P.group.icon ? (h(), c(_(r), {
+						key: 2,
+						name: P.group.icon,
+						class: m(L.value),
+						"aria-hidden": "true"
+					}, null, 8, ["name", "class"])) : l("", !0),
+					d("span", C, [d("span", w, g(P.group.title), 1), P.group.description ? (h(), u("span", T, g(P.group.description), 1)) : l("", !0)])
+				], 8, S)) : P.group.icon ? (h(), u("span", E, [f(_(r), {
+					name: P.group.icon,
+					class: m(L.value),
 					"aria-hidden": "true"
-				}, null, 8, ["fallback"])), l("span", b, [l("span", x, p(D.group.title), 1), D.group.description ? (f(), c("span", S, p(D.group.description), 1)) : s("", !0)])], 8, y)) : (f(), c("span", C, [l("span", w, p(D.group.title), 1), D.group.description ? (f(), c("span", T, p(D.group.description), 1)) : s("", !0)]))])]),
+				}, null, 8, ["name", "class"]), d("span", D, [d("span", O, g(P.group.title), 1), P.group.description ? (h(), u("span", k, g(P.group.description), 1)) : l("", !0)])])) : (h(), u("span", A, [d("span", j, g(P.group.title), 1), P.group.description ? (h(), u("span", M, g(P.group.description), 1)) : l("", !0)]))])]),
 				_: 1
 			}, 8, ["colspan"])]),
 			_: 1
@@ -65,6 +86,6 @@ var v = { class: "flex items-center gap-3" }, y = ["aria-expanded", "aria-label"
 	}
 });
 //#endregion
-export { E as default };
+export { N as default };
 
 //# sourceMappingURL=GroupHeaderRow.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GroupHeaderRow.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","TableRow","_withCtx","_createVNode","TableCell","_createElementVNode","Checkbox","_unref","_createCommentVNode","_createElementBlock","Icon","_toDisplayString","Icon_default","Checkbox_default","TableCell_default","TableRow_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","GroupHeaderRow_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","toggleLabel","computed","openBlock","createBlock","withCtx","createVNode","createElementVNode","unref","_cache","$event","createCommentVNode","createElementBlock","ChevronRightIcon","ChevronDownIcon","toDisplayString"],"sources":["../../../src/components/table/GroupHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableRecordGroupSchema } from '@alfakit/core'\nimport { ChevronDownIcon, ChevronRightIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Checkbox from '../ui/Checkbox.vue'\nimport TableCell from '../ui/TableCell.vue'\nimport TableRow from '../ui/TableRow.vue'\n\n/** A group heading row (`data-slot=\"table-group\"`), with a collapse toggle when collapsible. */\nconst props = defineProps<{\n  group: TableRecordGroupSchema\n  collapsed: boolean\n  collapsible: boolean\n  colSpan: number\n  /** `selectGroupsOnly()`: a checkbox selecting the group's records on the page. */\n  selection?: { checked: boolean | 'indeterminate'; onChange: (checked: boolean) => void }\n}>()\nconst emit = defineEmits<{ toggle: [] }>()\nconst t = useT()\n\nconst toggleLabel = computed(\n  () =>\n    `${props.collapsed ? t('table_grouping.expand', {}, 'Expand group') : t('table_grouping.collapse', {}, 'Collapse group')}: ${props.group.title}`,\n)\n</script>\n\n<template>\n  <TableRow data-slot=\"table-group\" class=\"bg-muted/50 hover:bg-muted/50\">\n    <TableCell :colspan=\"props.colSpan\" class=\"py-2\">\n      <span class=\"flex items-center gap-3\">\n        <Checkbox\n          v-if=\"props.selection\"\n          :model-value=\"props.selection.checked\"\n          :aria-label=\"t('table.select_group', { group: props.group.title }, 'Select group :group')\"\n          @update:model-value=\"props.selection.onChange($event === true)\"\n        />\n        <button\n          v-if=\"props.collapsible\"\n          type=\"button\"\n          class=\"focus-visible:ring-ring/50 flex items-center gap-2 rounded-sm text-start outline-none focus-visible:ring-[3px]\"\n          :aria-expanded=\"!props.collapsed\"\n          :aria-label=\"toggleLabel\"\n          @click=\"emit('toggle')\"\n        >\n          <ChevronRightIcon\n            v-if=\"props.collapsed\"\n            class=\"size-4 shrink-0 rtl:rotate-180\"\n            aria-hidden=\"true\"\n          />\n          <Icon\n            v-else\n            name=\"alfakit::tables.grouping.collapse-button\"\n            :fallback=\"ChevronDownIcon\"\n            class=\"size-4 shrink-0\"\n            aria-hidden=\"true\"\n          />\n          <span class=\"flex flex-col items-start\">\n            <span class=\"font-medium\">{{ props.group.title }}</span>\n            <span\n              v-if=\"props.group.description\"\n              class=\"text-muted-foreground text-xs font-normal\"\n              >{{ props.group.description }}</span\n            >\n          </span>\n        </button>\n        <span v-else class=\"flex flex-col items-start\">\n          <span class=\"font-medium\">{{ props.group.title }}</span>\n          <span v-if=\"props.group.description\" class=\"text-muted-foreground text-xs font-normal\">{{\n            props.group.description\n          }}</span>\n        </span>\n      </span>\n    </TableCell>\n  </TableRow>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAM2B,IAAQC,GAQRC,IAAOH,GACPI,IAAIC,EAAK,GAETC,IAAcC,QAEhB,GAAGN,EAAM,YAAYG,EAAE,yBAAyB,CAAC,GAAG,cAAc,IAAIA,EAAE,2BAA2B,CAAC,GAAG,gBAAgB,EAAE,IAAIH,EAAM,MAAM,OAC7I;oBAIE3B,EAAA,GAAAC,EA8CWC,GAAA;GA9CD,aAAU;GAAc,OAAM;;GACtC,SAAAC,QA4CY,CA5CZC,EA4CYC,GAAA;IA5CA,SAASsB,EAAM;IAAS,OAAM;;IACxC,SAAAxB,QA0CO,CA1CPG,EA0CO,QA1CPW,GA0CO,CAxCGU,EAAM,aADd3B,EAAA,GAAAC,EAKEM,GAAA;;KAHC,eAAaoB,EAAM,UAAU;KAC7B,cAAYnB,EAAAsB,CAAA,CAAC,CAAA,sBAAA,EAAA,OAAgCH,EAAM,MAAM,MAAK,GAAA,qBAAA;KAC9D,uBAAkB,AAAAa,EAAA,QAAA,MAAEb,EAAM,UAAU,SAASc,MAAM,EAAA;IAG9C,GAAA,MAAA,GAAA,CAAA,eAAA,YAAA,CAAA,KAAAC,EAAA,IAAA,EAAA,GAAAf,EAAM,eADd3B,EAAA,GAAAU,EA4BS,UAAA;;KA1BP,MAAK;KACL,OAAM;KACL,iBAAa,CAAGiB,EAAM;KACtB,cAAYK,EAAA;KACZ,SAAK,AAAAQ,EAAA,QAAA,MAAEX,EAAI,QAAA;IAGJ,GAAA,CAAAF,EAAM,aADd3B,EAAA,GAAAC,EAIEO,EAAAoC,CAAA,GAAA;;KAFA,OAAM;KACN,eAAY;IAEd5C,CAAAA,MAAAA,EAAA,GAAAC,EAMEO,EAAAG,CAAA,GAAA;;KAJA,MAAK;KACJ,UAAUH,EAAAqC,CAAA;KACX,OAAM;KACN,eAAY;IAEdvC,GAAAA,MAAAA,GAAAA,CAAAA,UAAAA,CAAAA,IAAAA,EAOO,QAPPa,GAOO,CANLb,EAAwD,QAAxDc,GAAwDR,EAA3Be,EAAM,MAAM,KAAK,GAAA,CAAA,GAEtCA,EAAM,MAAM,eADpB3B,EAAA,GAAAU,EAIC,QAJDW,GAICT,EADKe,EAAM,MAAM,WAAW,GAAA,CAAA,KAAAe,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,GAAA,GAAAxB,CAAA,MAIjClB,EAAA,GAAAU,EAKO,QALPY,GAKO,CAJLhB,EAAwD,QAAxDiB,GAAwDX,EAA3Be,EAAM,MAAM,KAAK,GAAA,CAAA,GAClCA,EAAM,MAAM,eAAxB3B,EAAA,GAAAU,EAES,QAFTc,GAESZ,EADPe,EAAM,MAAM,WAAW,GAAA,CAAA,KAAAe,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"GroupHeaderRow.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","TableRow","_withCtx","_createVNode","TableCell","_createElementVNode","Checkbox","_unref","_createCommentVNode","_createElementBlock","Icon","_normalizeClass","_toDisplayString","Icon_default","Checkbox_default","TableCell_default","TableRow_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","GroupHeaderRow_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","groupIconClass","computed","colorClass","textColorClasses","toggleLabel","openBlock","createBlock","withCtx","createVNode","createElementVNode","unref","_cache","$event","createCommentVNode","createElementBlock","ChevronRightIcon","ChevronDownIcon","normalizeClass","toDisplayString"],"sources":["../../../src/components/table/GroupHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableRecordGroupSchema } from '@alfakit/core'\nimport { ChevronDownIcon, ChevronRightIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport Checkbox from '../ui/Checkbox.vue'\nimport TableCell from '../ui/TableCell.vue'\nimport TableRow from '../ui/TableRow.vue'\n\n/** A group heading row (`data-slot=\"table-group\"`), with a collapse toggle when collapsible. */\nconst props = defineProps<{\n  group: TableRecordGroupSchema\n  collapsed: boolean\n  collapsible: boolean\n  colSpan: number\n  /** `selectGroupsOnly()`: a checkbox selecting the group's records on the page. */\n  selection?: { checked: boolean | 'indeterminate'; onChange: (checked: boolean) => void }\n}>()\nconst emit = defineEmits<{ toggle: [] }>()\nconst t = useT()\n\n// An enum group shows its `HasIcon` icon, in its `HasColor` colour, before the title.\nconst groupIconClass = computed(\n  () => `size-4 shrink-0 ${colorClass(textColorClasses, props.group.color, 'gray')}`,\n)\n\nconst toggleLabel = computed(\n  () =>\n    `${props.collapsed ? t('table_grouping.expand', {}, 'Expand group') : t('table_grouping.collapse', {}, 'Collapse group')}: ${props.group.title}`,\n)\n</script>\n\n<template>\n  <TableRow data-slot=\"table-group\" class=\"bg-muted/50 hover:bg-muted/50\">\n    <TableCell :colspan=\"props.colSpan\" class=\"py-2\">\n      <span class=\"flex items-center gap-3\">\n        <Checkbox\n          v-if=\"props.selection\"\n          :model-value=\"props.selection.checked\"\n          :aria-label=\"t('table.select_group', { group: props.group.title }, 'Select group :group')\"\n          @update:model-value=\"props.selection.onChange($event === true)\"\n        />\n        <button\n          v-if=\"props.collapsible\"\n          type=\"button\"\n          class=\"focus-visible:ring-ring/50 flex items-center gap-2 rounded-sm text-start outline-none focus-visible:ring-[3px]\"\n          :aria-expanded=\"!props.collapsed\"\n          :aria-label=\"toggleLabel\"\n          @click=\"emit('toggle')\"\n        >\n          <ChevronRightIcon\n            v-if=\"props.collapsed\"\n            class=\"size-4 shrink-0 rtl:rotate-180\"\n            aria-hidden=\"true\"\n          />\n          <Icon\n            v-else\n            name=\"alfakit::tables.grouping.collapse-button\"\n            :fallback=\"ChevronDownIcon\"\n            class=\"size-4 shrink-0\"\n            aria-hidden=\"true\"\n          />\n          <Icon\n            v-if=\"props.group.icon\"\n            :name=\"props.group.icon\"\n            :class=\"groupIconClass\"\n            aria-hidden=\"true\"\n          />\n          <span class=\"flex flex-col items-start\">\n            <span class=\"font-medium\">{{ props.group.title }}</span>\n            <span\n              v-if=\"props.group.description\"\n              class=\"text-muted-foreground text-xs font-normal\"\n              >{{ props.group.description }}</span\n            >\n          </span>\n        </button>\n        <span\n          v-else-if=\"props.group.icon\"\n          data-slot=\"table-group-title\"\n          class=\"flex items-center gap-2\"\n        >\n          <Icon :name=\"props.group.icon\" :class=\"groupIconClass\" aria-hidden=\"true\" />\n          <span class=\"flex flex-col items-start\">\n            <span class=\"font-medium\">{{ props.group.title }}</span>\n            <span\n              v-if=\"props.group.description\"\n              class=\"text-muted-foreground text-xs font-normal\"\n              >{{ props.group.description }}</span\n            >\n          </span>\n        </span>\n        <span v-else class=\"flex flex-col items-start\">\n          <span class=\"font-medium\">{{ props.group.title }}</span>\n          <span v-if=\"props.group.description\" class=\"text-muted-foreground text-xs font-normal\">{{\n            props.group.description\n          }}</span>\n        </span>\n      </span>\n    </TableCell>\n  </TableRow>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectCell.js","names":["_sfc_main","SelectCell_vue_vue_type_script_setup_true_lang_default","SelectCell_default"],"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 } 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 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-invalid=\"error ? true : 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\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SelectCell.js","names":["_sfc_main","SelectCell_vue_vue_type_script_setup_true_lang_default","SelectCell_default"],"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":""}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/SelectCell.vue"],"names":[],"mappings":"AA2DA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAA;;AA6F7D,wBAMG"}
+{"version":3,"file":"SelectCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/SelectCell.vue"],"names":[],"mappings":"AA8DA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAA;;AAkG7D,wBAMG"}

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

@@ -1,45 +1,51 @@
 import { cn as e } from "../../lib/utils.js";
 import { useCellUpdate as t } from "./cell-update.js";
 import { isOptionGroup as n } from "@alfakit/core";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, withModifiers as h } from "vue";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, useId as h, withModifiers as g } from "vue";
 //#region src/components/table/SelectCell.vue?vue&type=script&setup=true&lang.ts
-var g = [
+var _ = [
 	"value",
 	"disabled",
-	"aria-invalid"
-], _ = {
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby"
+], v = {
 	key: 0,
 	value: ""
-}, v = ["value", "disabled"], y = {
-	key: 0,
-	class: "text-destructive block text-xs"
-}, b = /*@__PURE__*/ c({
+}, y = ["value", "disabled"], b = ["id"], x = /*@__PURE__*/ c({
 	__name: "SelectCell",
 	props: {
 		column: {},
 		cell: {},
 		recordKey: {},
 		token: {},
-		component: {}
+		component: {},
+		fromRegistry: { type: Boolean }
 	},
 	setup(c) {
-		let b = c, x = i(() => b.column), { update: S, saving: C, error: w } = t(b), T = d(b.cell.state === null || b.cell.state === void 0 ? "" : String(b.cell.state)), E = i(() => x.value.options.flatMap((e) => n(e) ? e.options : [e]).filter((e) => !(x.value.ignoreRecord && e.value === String(b.recordKey)))), D = (e) => {
-			T.value = e.target.value, S(T.value === "" ? null : T.value);
+		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) => {
+			D.value = e.target.value, C(D.value === "" ? null : D.value);
 		};
-		return (t, n) => (u(), o("span", { onClick: n[0] ||= h(() => {}, ["stop"]) }, [s("select", {
-			value: T.value,
-			disabled: !!b.cell.disabled || m(C),
-			"aria-invalid": m(w) ? !0 : void 0,
-			class: l(m(e)("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]", m(w) && "border-destructive")),
-			onChange: D
-		}, [x.value.selectablePlaceholder ? (u(), o("option", _, p(x.value.placeholder ?? ""), 1)) : a("", !0), (u(!0), o(r, null, f(E.value, (e) => (u(), o("option", {
+		return (t, n) => (u(), o("span", { onClick: n[0] ||= g(() => {}, ["stop"]) }, [s("select", {
+			value: D.value,
+			disabled: !!x.cell.disabled || m(w),
+			"aria-label": x.column.label || x.column.name,
+			"aria-invalid": m(T) ? !0 : void 0,
+			"aria-describedby": m(T) ? m(E) : void 0,
+			class: l(m(e)("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]", m(T) && "border-destructive")),
+			onChange: k
+		}, [S.value.selectablePlaceholder ? (u(), o("option", v, p(S.value.placeholder ?? ""), 1)) : a("", !0), (u(!0), o(r, null, f(O.value, (e) => (u(), o("option", {
 			key: e.value,
 			value: e.value,
 			disabled: e.disabled
-		}, p(e.label), 9, v))), 128))], 42, g), m(w) ? (u(), o("span", y, p(m(w)), 1)) : a("", !0)]));
+		}, p(e.label), 9, y))), 128))], 42, _), m(T) ? (u(), o("span", {
+			key: 0,
+			id: m(E),
+			class: "text-destructive block text-xs"
+		}, p(m(T)), 9, b)) : a("", !0)]));
 	}
 });
 //#endregion
-export { b as default };
+export { x as default };
 
 //# sourceMappingURL=SelectCell.vue_vue_type_script_setup_true_lang.js.map

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","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 } 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 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-invalid=\"error ? true : 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\" 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,IAAQC,EACZN,EAAM,KAAK,UAAU,QAAQA,EAAM,KAAK,UAAU,KAAA,IAAY,KAAK,OAAOA,EAAM,KAAK,KAAK,CAC5F,GAEMO,IAAUJ,QACdD,EAAO,MAAM,QACV,SAAS,MAAYM,EAAcC,CAAM,IAAIA,EAAO,UAAU,CAACA,CAAM,CAAE,CAAA,CACvE,QAAQ,MAAW,EAAEP,EAAO,MAAM,gBAAgBO,EAAO,UAAU,OAAOT,EAAM,SAAS,EAAE,CAChG,GAEMU,KAAY,MAAiB;GAEjC,AADA,EAAM,QAASC,EAAM,OAA6B,OAClDC,EAAYP,EAAM,UAAU,KAAK,OAAOA,EAAM,KAAK;EACrD;oBAIEpB,EAAA,GAAAC,EAwBO,QAAA,EAxBA,SAAK,AAAA6B,EAAA,OAAA5B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA,EAAA,GAAA,CACfC,EAqBS,UAAA;GApBN,OAAOiB,EAAA;GACP,UAAU,EAAQL,EAAM,KAAK,YAAaX,EAAA8B,CAAA;GAC1C,gBAAc9B,EAAA+B,CAAA,IAAK,KAAU,KAAA;GAC7B,OAAK9B,EAAWD,EAAAiC,CAAA,CAAE,CAAA,uKAA6LjC,EAAA+B,CAAA,KAAK,oBAAA,CAAA;GAM5M;EAEK,GAAA,CAAAlB,EAAA,MAAO,yBAArBjB,EAAA,GAAAC,EAA4F,UAA5FU,GAA4FL,EAApCW,EAAA,MAAO,eAAW,EAAA,GAAA,CAAA,KAAAsB,EAAA,IAAA,EAAA,IAC1EvC,EAAA,EAAA,GAAAC,EAOSO,GAAA,MAAAC,EANUa,EAAA,QAAV,OADTtB,EAAA,GAAAC,EAOS,UAAA;GALN,KAAKuB,EAAO;GACZ,OAAOA,EAAO;GACd,UAAUA,EAAO;EAEf,GAAAlB,EAAAkB,EAAO,KAAK,GAAA,GAAAZ,CAAA,EAGPR,GAAAA,GAAAA,EAAAA,GAAAA,IAAAA,CAAAA,GAAAA,EAAA+B,CAAA,KAAZnC,EAAA,GAAAC,EAA4E,QAA5EY,GAA4EP,EAAfF,EAAA+B,CAAA,CAAK,GAAA,CAAA,KAAAI,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"}

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

@@ -46,10 +46,11 @@ var ae = {
 		cell: {},
 		recordKey: {},
 		token: {},
-		component: {}
+		component: {},
+		fromRegistry: { type: Boolean }
 	},
 	setup(b) {
-		let z = b, B = e(), V = g(() => B.resolve(d(z.column))), H = t(), U = g(() => z.column.component ?? ""), W = g(() => z.column.type === "ViewColumn" && U.value ? B.resolve(U.value) : void 0), G = g(() => z.column), K = g(() => m(G.value)), q = g(() => Array.isArray(z.cell.state) ? z.cell.state : []), J = g(() => G.value.limit ?? q.value.length), Y = (e) => typeof e == "number" ? `${e}px` : e, ce = g(() => {
+		let z = b, B = e(), V = g(() => z.fromRegistry ? void 0 : B.resolve(d(z.column))), H = t(), U = g(() => z.column.component ?? ""), W = g(() => z.column.type === "ViewColumn" && U.value ? B.resolve(U.value) : void 0), G = g(() => z.column), K = g(() => m(G.value)), q = g(() => Array.isArray(z.cell.state) ? z.cell.state : []), J = g(() => G.value.limit ?? q.value.length), Y = (e) => typeof e == "number" ? `${e}px` : e, ce = g(() => {
 			let e = G.value.size ?? 40;
 			return {
 				height: Y(G.value.height ?? e),
@@ -71,7 +72,7 @@ var ae = {
 			itemIcons: z.cell.itemIcons,
 			itemUrls: z.cell.itemUrls
 		})), de = g(() => z.column.type === "SelectColumn" && z.column.native === !1), $ = g(() => z.column.descriptionPosition ?? "below");
-		return (e, t) => V.value ? (T(), _(O(V.value), C(x({ key: 0 }, z)), null, 16)) : W.value ? (T(), _(O(W.value), C(x({ key: 1 }, {
+		return (e, t) => V.value ? (T(), _(O(V.value), x({ key: 0 }, z, { "from-registry": !0 }), null, 16)) : W.value ? (T(), _(O(W.value), C(x({ key: 1 }, {
 			...z.cell.props ?? {},
 			state: z.cell.state,
 			...z