@alfakit/vue 0.1.2 → 0.1.6

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

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

@@ -1 +1 @@
-{"version":3,"file":"TableCellContent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_mergeProps","_createElementBlock","_toDisplayString","_unref","_Fragment","_normalizeClass","_createCommentVNode","_renderList","Icon","_withModifiers","_createElementVNode","_normalizeStyle","BooleanCell","SelectComboboxCell","SelectCell","TextInputCell","_createVNode","FormattedText","Icon_default","FormattedText_default","BooleanCell_default","SelectCell_default","SelectComboboxCell_default","TextInputCell_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","TableCellContent_vue_vue_type_script_setup_true_lang_default","props","__props","registry","useRegistry","custom","computed","columnRegistryKey","t","useT","viewName","view","imageSchema","defaultImageStack","usesDefaultImageStack","imageUrls","imageLimit","toCss","value","imageStyle","size","colors","colorSchema","copiedColor","ref","copyColor","color","textSchema","isComboboxSelect","descriptionPosition","openBlock","createBlock","resolveDynamicComponent","normalizeProps","mergeProps","createElementBlock","toDisplayString","unref","Fragment","normalizeClass","cn","createCommentVNode","renderList","index","item","colorClass","iconSizeClasses","textColorClasses","url","stackedImageStyle","remainingTextSizeClass","withModifiers","createElementVNode","normalizeStyle","CheckIcon","createVNode"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,IAAMwC,IAAQC,GACRC,IAAWC,EAAY,GAEvBC,IAASC,QAAeH,EAAS,QAAQI,EAAkBN,EAAM,MAAM,CAAC,CAAC,GACzEO,IAAIC,EAAK,GAETC,IAAWJ,QAAgBL,EAAM,OAAkC,aAAa,EAAE,GAClFU,IAAOL,QACXL,EAAM,OAAO,SAAS,gBAAgBS,EAAS,QAC3CP,EAAS,QAAQO,EAAS,KAAK,IAC/B,KAAA,CACN,GAEME,IAAcN,QAEhBL,EAAM,MAcV,GACMY,IAAoBP,QAAeQ,EAAsBF,EAAY,KAAK,CAAC,GAC3EG,IAAYT,QAChB,MAAM,QAAQL,EAAM,KAAK,KAAK,IAAKA,EAAM,KAAK,QAAqB,CAAC,CACtE,GACMe,IAAaV,QAAeM,EAAY,MAAM,SAASG,EAAU,MAAM,MAAM,GAC7EE,KAAS,MACb,OAAOC,KAAU,WAAW,GAAGA,EAAM,MAAMA,GACvCC,KAAab,QAAe;GAChC,IAAMc,IAAOR,EAAY,MAAM,QAAQ;GAEvC,OAAO;IACL,QAAQK,EAAML,EAAY,MAAM,UAAUQ,CAAI;IAC9C,OAAOH,EACLL,EAAY,MAAM,UACfA,EAAY,MAAM,UAAUA,EAAY,MAAM,WAAWQ,IAAO,KAAA,EACrE;GACF;EACF,CAAC,GACKC,IAASf,QACb,MAAM,QAAQL,EAAM,KAAK,KAAK,IACzBA,EAAM,KAAK,QACZA,EAAM,KAAK,QACT,CAAC,OAAOA,EAAM,KAAK,KAAK,CAAC,IACzB,CAAC,CACT,GACMqB,IAAchB,QAAeL,EAAM,MAA2B,GAC9DsB,IAAcC,EAAmB,IAAI,GACrCC,MAAa,MAAkB;GACnC,UAAe,WAAW,UAAUC,CAAK,CAAC,CAAC,WAAW;IAEpD,AADA,EAAY,QAAQA,GACpB,iBAAiB;KACf,EAAY,QAAQ;IACtB,GAAGJ,EAAY,MAAM,uBAAuB,IAAI;GAClD,CAAC;EACH,GACMK,KAAarB,SAAgB;GACjC,GAAIL,EAAM;GACV,OAAOA,EAAM,KAAK;GAClB,MAAMA,EAAM,KAAK;GACjB,cAAcA,EAAM,KAAK;GACzB,WAAWA,EAAM,KAAK;GACtB,YAAYA,EAAM,KAAK;GACvB,WAAWA,EAAM,KAAK;GACtB,UAAUA,EAAM,KAAK;EACvB,EAAE,GAEI2B,KAAmBtB,QAErBL,EAAM,OAAO,SAAS,kBAAmBA,EAAM,OAAgC,WAAW,EAC9F,GACM4B,IAAsBvB,QAEvBL,EAAM,OAAuD,uBAAuB,OACzF;mBAIgCI,EAAA,SAA9B5C,EAAA,GAAAC,EAAuDC,EAAvC0C,EAAA,KAAM,GAAAzC,EAAAC,EAAA,EAAA,KAAA,EAAA,GAAwBoC,CAAK,CAAA,GAAA,MAAA,EAAA,KAGtCU,EAAA,SAFblD,EAAA,GAAAC,EAIEC,EAHKgD,EAAA,KAAI,GAAA/C,EAAAC,EAAA,EAAA,KAAA,EAAA,GAAA;GAAA,GAEKoC,EAAM,KAAK,SAAK,CAAA;GAAA,OAAgBA,EAAM,KAAK;GAAK,GAAKA;EAAK,CAAA,CAAA,GAAA,MAAA,EAAA,KAEzDA,EAAM,OAAO,SAAI,gBAAlCxC,EAAA,GAAAK,EAMS,QANTuB,IAMStB,EALPC,EAAAwC,CAAA,CAAC,CAAA,4BAAuD,EAAA,WAAAE,EAAA,MAAQ,GAAuB,aAAAA,EAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,KAM5ET,EAAM,OAAO,SAAI,gBAAtCxC,EAAA,GAAAK,EAoCWG,GAAA,EAAA,KAAA,EAAA,GAAA,CAjCDgC,EAAM,KAAK,SADnBxC,EAAA,GAAAK,EAsBM,OAAA;;GApBJ,aAAU;GACT,OAAKI,EAAWF,EAAAwE,CAAA,CAAE,CAAA,6BAAoDvC,EAAM,OAA4B,OAAI,cAAA,aAAA,CAAA;EAOjG,GAAA,CAAAA,EAAM,KAAK,MAAM,WAAM,KAAnCxC,EAAA,GAAAK,EAAiF,QAAjFwB,IAAyE,GAAC,KAAAmD,EAAA,IAAA,EAAA,IAC1EhF,EAAA,EAAA,GAAAK,EAUEG,GAAA,MAAAG,EATwB6B,EAAM,KAAK,QAA3B,GAAM,OADhBxC,EAAA,GAAAC,EAUEM,EAAAK,CAAA,GAAA;GARC,KAAKsE;GACL,MAAMC,EAAK;GACX,OAAK1E,EAAaF,EAAAwE,CAAA,CAAE,CAAcxE,EAAA6E,CAAA,CAAU,CAAC7E,EAAA8E,CAAA,GAAiB7C,EAAM,KAAK,MAAI,IAAA,GAAqB2C,EAAK,SAAS5E,EAAA+E,CAAA,CAAgB,CAACH,EAAK,MAAA,CAAA;iCAS9H,GAAA,GAAA,EAAA,GAAA,CAAA,KAAA3C,EAAM,KAAK,QADxBxC,EAAA,GAAAC,EASEM,EAAAK,CAAA,GAAA;;GAPC,MAAM4B,EAAM,KAAK;GACjB,OAAK/B,EAAWF,EAAAwE,CAAA,CAAE,CAAYxE,EAAA6E,CAAA,CAAU,CAAC7E,EAAA8E,CAAA,GAAiB7C,EAAM,KAAK,MAAI,IAAA,GAAmBA,EAAM,KAAK,SAASjC,EAAA+E,CAAA,CAAgB,CAAC9C,EAAM,KAAK,MAAA,CAAA;EAO/IxC,GAAAA,MAAAA,GAAAA,CAAAA,QAAAA,OAAAA,CAAAA,MAAAA,EAAA,GAAAK,EAAmD,QAAnDyB,IAA2C,GAAC,EAAA,GAAA,EAAA,KAEzBU,EAAM,OAAO,SAAI,iBAAtCxC,EAAA,GAAAK,EAwCWG,GAAA,EAAA,KAAA,EAAA,GAAA,CAvCG8C,EAAA,MAAU,WAAM,KAA5BtD,EAAA,GAAAK,EAA0E,QAA1E0B,GAAkE,GAAC,MACnE/B,EAAA,GAAAK,EAqCM,OAAA;;GAnCH,OAAKI,EAAWF,EAAAwE,CAAA,CAAE,CAAA,qBAA2C5B,EAAA,MAAY,QAAI,aAA2BA,EAAA,MAAY,UAAUC,EAAA,SAAiB,eAAA,WAAwCD,EAAA,MAAY,QAAQA,EAAA,MAAY,WAAO,WAAA,CAAA;EAS/NnD,GAAAA,EAAAA,EAAA,EAAA,GAAAK,EAcEG,GAAA,MAAAG,EAbuB2C,EAAA,MAAU,MAAK,GAAIC,EAAA,KAAU,IAA5C,GAAK,OADfvD,EAAA,GAAAK,EAcE,OAdFD,EAcE;GAZC,KAAK8E;GACL,KAAKK;GACL,KAAK/C,EAAM,KAAK,OAAG;GACnB,OAAK,CAAGkB,GAAA,OAAYnD,EAAAiF,CAAA,CAAiB,CAACN,GAAO/B,EAAA,KAAW,CAAA;GACxD,OAAkB5C,EAAAwE,CAAA,CAAE,CAAA,gBAA0C5B,EAAA,MAAY,WAAQ,iBAAA,cAA8CA,EAAA,MAAY,WAAWC,EAAA,SAAiB,wBAAA;EAOjK,GAAA,EAAA,SAAA,GAAA,GAAAZ,EAAM,KAAK,kBAAkB,GAAA,MAAA,IAAAR,CAAA,EAG/B,GAAA,GAAA,IAAAmB,EAAA,MAAY,wBAAwBG,EAAA,MAAU,SAASC,EAAA,SAD/DvD,EAAA,GAAAK,EAUC,QAAA;;GARC,aAAU;GACT,OAAKI,EAAaF,EAAAwE,CAAA,CAAE,CAAA,8BAAwDxE,EAAAkF,CAAA,CAAsB,CAACtC,EAAA,MAAY,wBAAwB,CAAA,CAAA;EAMvI,GAAA,MAAC7C,EAAGgD,EAAA,MAAU,SAASC,EAAA,KAAU,GAAA,CAAA,KAAAyB,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA,EAAA,GAAA,EAAA,KAInBxC,EAAM,OAAO,SAAI,iBAAtCxC,EAAA,GAAAK,EAyCWG,GAAA,EAAA,KAAA,EAAA,GAAA,CAxCGoD,EAAA,MAAO,WAAM,KAAzB5D,EAAA,GAAAK,EAAuE,QAAvE4B,GAA+D,GAAC,MAChEjC,EAAA,GAAAK,EAsCM,OAAA;;GApCH,OAAKI,EAAEF,EAAAwE,CAAA,CAAE,CAAA,6BAA8BlB,EAAA,MAAY,OAAI,cAAA,aAAA,CAAA;EAExD7D,GAAAA,EAAAA,EAAA,EAAA,GAAAK,EA2BWG,GAAA,MAAAG,EA3BeiD,EAAA,QAAT,OAAuB5D,EAAA,GAAAK,EAAAG,GAAA,EAAA,KAAAyD,EAAK,GAAA,CAGnCJ,EAAA,MAAY,YADpB7D,EAAA,GAAAK,EAkBS,UAAA;;GAhBP,MAAK;GACL,aAAU;GACT,OAAO4D;GACP,cAAU,GAAK1D,EAAAwC,CAAA,CAAC,CAAA,QAAA,CAAA,GAAA,MAAA,EAAA,GAAwBkB;GACzC,OAAM;GACL,SAAKpD,IAAA,MAAemD,GAAUC,CAAK,GAAA,CAAA,WAAA,MAAA,CAAA;EAEpCnD,GAAAA,CAAAA,GAQO,QAAA;GAPL,OAAM;GACL,OAAKC,EAAA,EAAA,iBAAqBkD,EAAK,CAAA;EAGxB,GAAA,CAAAH,EAAA,UAAgBG,KADxBjE,EAAA,GAAAC,EAGEM,EAAAsF,EAAA,GAAA;;GADA,OAAM;EAIZ7F,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,CAAAA,GAAAA,CAAAA,CAAAA,GAAAA,GAAAA,CAAAA,MAAAA,EAAA,GAAAK,EAKE,QAAA;;GAHC,OAAO4D;GACR,OAAM;GACL,OAAKlD,EAAA,EAAA,iBAAqBkD,EAAK,CAAA;yBAI5B,GAAA,GAAA,IAAAJ,EAAA,MAAY,YAAYC,EAAA,SADhC9D,EAAA,GAAAK,EAKC,QAAA;;GAHC,MAAK;GACJ,OAAKI,EAAEF,EAAAwE,CAAA,CAAE,CAAA,WAAA,CAAalB,EAAA,MAAY,eAAW,SAAA,CAAA;EAC1C,GAAAvD,EAAAuD,EAAA,MAAY,eAAetD,EAAAwC,CAAA,CAAC,CAAA,UAAA,CAAA,GAAA,QAAA,CAAA,GAAA,CAAA,KAAAiC,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA,EAAA,GAAA,EAAA,KAKzBxC,EAAM,OAAO,SAAI,kBAAuBA,EAAM,OAAO,SAAI,oBADtExC,EAAA,GAAAC,EAGEe,IAAAb,EAAAC,EAAA,EAAA,KAAA,EAAA,GADQoC,CAAK,CAAA,GAAA,MAAA,EAAA,KAEgB2B,GAAA,SAA/BnE,EAAA,GAAAC,EAAkEgB,GAAAd,EAAAC,EAAA,EAAA,KAAA,EAAA,GAAToC,CAAK,CAAA,GAAA,MAAA,EAAA,KACvCA,EAAM,OAAO,SAAI,kBAAxCxC,EAAA,GAAAC,EAA8EiB,GAAAf,EAAAC,EAAA,EAAA,KAAA,EAAA,GAAToC,CAAK,CAAA,GAAA,MAAA,EAAA,KAChDA,EAAM,OAAO,SAAI,qBAA3CxC,EAAA,GAAAC,EAAoFkB,GAAAhB,EAAAC,EAAA,EAAA,KAAA,EAAA,GAAToC,CAAK,CAAA,GAAA,MAAA,EAAA,MAChFxC,EAAA,GAAAK,EAYM,OAZN+B,GAYM;GAVII,EAAM,KAAK,eAAe4B,EAAA,UAAmB,WADrDpE,EAAA,GAAAK,EAIC,QAJDgC,GAIC/B,EADKkC,EAAM,KAAK,WAAW,GAAA,CAAA,KAAAwC,EAAA,IAAA,EAAA;GAE5B5D,GAAgEC,GAAA;IAAhD,OAAOmB,EAAM,KAAK;IAAQ,QAAQ0B,GAAA;;GAE1C1B,EAAM,KAAK,eAAe4B,EAAA,UAAmB,WADrDpE,EAAA,GAAAK,EAIC,QAJDiC,GAIChC,EADKkC,EAAM,KAAK,WAAW,GAAA,CAAA,KAAAwC,EAAA,IAAA,EAAA"}
+{"version":3,"file":"TableCellContent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_normalizeProps","_createElementBlock","_toDisplayString","_unref","_Fragment","_normalizeClass","_createCommentVNode","_renderList","Icon","_withModifiers","_createElementVNode","_normalizeStyle","BooleanCell","SelectComboboxCell","SelectCell","TextInputCell","_createVNode","FormattedText","Icon_default","FormattedText_default","BooleanCell_default","SelectCell_default","SelectComboboxCell_default","TextInputCell_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","TableCellContent_vue_vue_type_script_setup_true_lang_default","props","__props","registry","useRegistry","custom","computed","columnRegistryKey","t","useT","viewName","view","imageSchema","defaultImageStack","usesDefaultImageStack","imageUrls","imageLimit","toCss","value","imageStyle","size","colors","colorSchema","copiedColor","ref","copyColor","color","textSchema","isComboboxSelect","descriptionPosition","openBlock","createBlock","resolveDynamicComponent","mergeProps","normalizeProps","createElementBlock","toDisplayString","unref","Fragment","normalizeClass","cn","createCommentVNode","renderList","index","item","colorClass","iconSizeClasses","textColorClasses","url","stackedImageStyle","remainingTextSizeClass","withModifiers","createElementVNode","normalizeStyle","CheckIcon","createVNode"],"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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.js","names":["_sfc_main","TablePagination_vue_vue_type_script_setup_true_lang_default","TablePagination_default"],"sources":["../../../src/components/table/TablePagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  extremePageLinks,\n  isAppendingPagination,\n  nextPageQuery,\n  prefetchTablePage,\n  previousPageQuery,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{ table: TableSchema }>()\nconst t = useT()\nconst pagination = computed(() => props.table.pagination)\n\nfunction pageWindow(current: number, last: number): Array<number | null> {\n  if (last <= 7) {\n    return Array.from({ length: last }, (_, index) => index + 1)\n  }\n\n  const pages = new Set<number>([1, last, current - 1, current, current + 1])\n  const sorted = [...pages].filter((page) => page >= 1 && page <= last).sort((a, b) => a - b)\n  const result: Array<number | null> = []\n\n  sorted.forEach((page, index) => {\n    if (index > 0 && page - (sorted[index - 1] ?? 0) > 1) {\n      result.push(null)\n    }\n\n    result.push(page)\n  })\n\n  return result\n}\n\n// Numbered pages (the default mode) know their total and last page.\nconst numbered = computed(() => {\n  const value = pagination.value\n\n  return value && (value.mode === undefined || value.mode === 'default') ? value : null\n})\nconst appending = computed(() =>\n  isAppendingPagination(pagination.value) ? pagination.value : null,\n)\nconst pages = computed(() =>\n  numbered.value ? pageWindow(numbered.value.currentPage, numbered.value.lastPage) : [],\n)\n// `extremePaginationLinks()`: first / last page buttons around numbered pages.\nconst extremes = computed(() =>\n  numbered.value\n    ? extremePageLinks(props.table, numbered.value.currentPage, numbered.value.lastPage)\n    : null,\n)\nconst previous = computed(() => previousPageQuery(pagination.value))\nconst next = computed(() => nextPageQuery(pagination.value))\nconst summary = computed(() => {\n  const value = pagination.value\n\n  if (!value) return ''\n\n  return numbered.value\n    ? t(\n        'table.showing',\n        { first: value.from, last: value.to, total: numbered.value.total },\n        `Showing ${value.from}–${value.to} of ${numbered.value.total}`,\n      )\n    : t(\n        'table.showing_range',\n        { first: value.from, last: value.to },\n        `Showing ${value.from}–${value.to}`,\n      )\n})\nconst goTo = (page: number) => visitTable(props.table.identifier, { page }, ['page'])\n// The next page is fetched while hovering or focusing \"next\" (cached for a few seconds).\nconst prefetchNext = () => next.value && prefetchTablePage(props.table.identifier, next.value)\n// `deferTotals()`: the total and page numbers arrive after the rows.\nconst pendingTotal = computed(\n  () => pagination.value?.mode === 'simple' && pagination.value.pendingTotal === true,\n)\nconst visit = (query: ReturnType<typeof nextPageQuery>) =>\n  query && visitTable(props.table.identifier, query, ['page'])\nconst setPerPage = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value\n  visitTable(props.table.identifier, { perPage: value === 'all' ? 'all' : Number(value) }, ['page'])\n}\n\n// Load more / infinite scroll: the server returns every record up to the requested page,\n// so asking for the next page appends it (and reloads keep what was already shown). A\n// request that fails shows a retry control instead of staying on \"Loading more…\"; infinite\n// scroll waits for the retry rather than requesting again.\nconst loading = ref(false)\nconst failed = ref(false)\nconst sentinel = ref<HTMLElement | null>(null)\nlet observer: IntersectionObserver | null = null\n\nwatch(\n  () => pagination.value?.to,\n  () => {\n    loading.value = false\n    failed.value = false\n  },\n)\n\nconst loadMore = () => {\n  if (!next.value || loading.value) return\n\n  let succeeded = false\n  let cancelled = false\n  loading.value = true\n  failed.value = false\n  visitTable(props.table.identifier, next.value, ['page'], {\n    onSuccess: () => {\n      succeeded = true\n    },\n    onCancel: () => {\n      cancelled = true\n    },\n    onFinish: () => {\n      loading.value = false\n      if (!succeeded && !cancelled) failed.value = true\n    },\n  })\n}\n\nwatch(\n  [sentinel, () => appending.value?.mode, next, failed],\n  ([element, mode, query, hasFailed]) => {\n    observer?.disconnect()\n    observer = null\n\n    if (\n      !element ||\n      mode !== 'infinite' ||\n      !query ||\n      hasFailed ||\n      typeof IntersectionObserver === 'undefined'\n    ) {\n      return\n    }\n\n    observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) loadMore()\n    })\n    observer.observe(element)\n  },\n  { flush: 'post' },\n)\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div v-if=\"pagination\" class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n    <div class=\"text-muted-foreground flex items-center gap-3 text-sm\">\n      <span>{{ summary }}</span>\n      <span\n        v-if=\"pendingTotal\"\n        data-slot=\"pagination-total\"\n        aria-busy=\"true\"\n        :aria-label=\"t('loading', {}, 'Loading')\"\n        class=\"bg-muted-foreground/20 inline-block h-4 w-12 animate-pulse rounded-md\"\n      />\n      <label v-if=\"pagination.pageOptions.length > 1\" class=\"flex items-center gap-2\">\n        <span class=\"sr-only sm:not-sr-only\">{{ t('table.per_page', {}, 'Per page') }}</span>\n        <select\n          :value=\"String(pagination.perPage)\"\n          class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          @change=\"setPerPage\"\n        >\n          <option v-for=\"option in pagination.pageOptions\" :key=\"option\" :value=\"String(option)\">\n            {{ option === 'all' ? t('table.all', {}, 'All') : option }}\n          </option>\n        </select>\n      </label>\n    </div>\n    <template v-if=\"appending\">\n      <template v-if=\"next\">\n        <div v-if=\"failed\" class=\"flex items-center gap-2 text-sm\" role=\"alert\">\n          <span class=\"text-destructive\">{{\n            t('table.load_more_failed', {}, \"Couldn't load more records.\")\n          }}</span>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"loadMore\">{{\n            t('retry', {}, 'Retry')\n          }}</Button>\n        </div>\n        <div\n          v-else-if=\"appending.mode === 'infinite'\"\n          ref=\"sentinel\"\n          class=\"text-muted-foreground text-sm\"\n          aria-live=\"polite\"\n        >\n          {{ loading ? t('table.loading_more', {}, 'Loading more…') : '' }}\n        </div>\n        <Button\n          v-else\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"loading\"\n          @click=\"loadMore\"\n        >\n          {{\n            loading ? t('table.loading_more', {}, 'Loading more…') : t('load_more', {}, 'Load more')\n          }}\n        </Button>\n      </template>\n    </template>\n    <nav\n      v-else-if=\"previous || next\"\n      class=\"flex items-center gap-1\"\n      :aria-label=\"t('pagination', {}, 'Pagination')\"\n    >\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-first\"\n        :disabled=\"extremes.first === null\"\n        :aria-label=\"t('table.first_page', {}, 'First page')\"\n        @click=\"goTo(1)\"\n        ><Icon\n          name=\"alfakit::support.pagination.first-button\"\n          :fallback=\"ChevronsLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!previous\"\n        :aria-label=\"t('table.previous', {}, 'Previous')\"\n        @click=\"visit(previous)\"\n        ><Icon\n          name=\"alfakit::support.pagination.previous-button\"\n          :fallback=\"ChevronLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <template v-if=\"numbered && !numbered.simple\">\n        <template v-for=\"(page, index) in pages\" :key=\"page === null ? `gap-${index}` : page\">\n          <span v-if=\"page === null\" class=\"text-muted-foreground px-1\">…</span>\n          <Button\n            v-else\n            type=\"button\"\n            :variant=\"page === numbered.currentPage ? 'default' : 'outline'\"\n            size=\"icon-sm\"\n            :aria-current=\"page === numbered.currentPage ? 'page' : undefined\"\n            @click=\"goTo(page)\"\n            >{{ page }}</Button\n          >\n        </template>\n      </template>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!next\"\n        :aria-label=\"t('table.next', {}, 'Next')\"\n        @click=\"visit(next)\"\n        @pointerenter=\"prefetchNext\"\n        @focus=\"prefetchNext\"\n        ><Icon\n          name=\"alfakit::support.pagination.next-button\"\n          :fallback=\"ChevronRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-last\"\n        :disabled=\"extremes.last === null\"\n        :aria-label=\"t('table.last_page', {}, 'Last page')\"\n        @click=\"extremes.last !== null && goTo(extremes.last)\"\n        ><Icon\n          name=\"alfakit::support.pagination.last-button\"\n          :fallback=\"ChevronsRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n    </nav>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TablePagination.js","names":["_sfc_main","TablePagination_vue_vue_type_script_setup_true_lang_default","TablePagination_default"],"sources":["../../../src/components/table/TablePagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  extremePageLinks,\n  isAppendingPagination,\n  nextPageQuery,\n  prefetchTablePage,\n  previousPageQuery,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useFormatter, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{ table: TableSchema }>()\nconst t = useT()\nconst format = useFormatter()\nconst pagination = computed(() => props.table.pagination)\n\nfunction pageWindow(current: number, last: number): Array<number | null> {\n  if (last <= 7) {\n    return Array.from({ length: last }, (_, index) => index + 1)\n  }\n\n  const pages = new Set<number>([1, last, current - 1, current, current + 1])\n  const sorted = [...pages].filter((page) => page >= 1 && page <= last).sort((a, b) => a - b)\n  const result: Array<number | null> = []\n\n  sorted.forEach((page, index) => {\n    if (index > 0 && page - (sorted[index - 1] ?? 0) > 1) {\n      result.push(null)\n    }\n\n    result.push(page)\n  })\n\n  return result\n}\n\n// Numbered pages (the default mode) know their total and last page.\nconst numbered = computed(() => {\n  const value = pagination.value\n\n  return value && (value.mode === undefined || value.mode === 'default') ? value : null\n})\nconst appending = computed(() =>\n  isAppendingPagination(pagination.value) ? pagination.value : null,\n)\nconst pages = computed(() =>\n  numbered.value ? pageWindow(numbered.value.currentPage, numbered.value.lastPage) : [],\n)\n// `extremePaginationLinks()`: first / last page buttons around numbered pages.\nconst extremes = computed(() =>\n  numbered.value\n    ? extremePageLinks(props.table, numbered.value.currentPage, numbered.value.lastPage)\n    : null,\n)\nconst previous = computed(() => previousPageQuery(pagination.value))\nconst next = computed(() => nextPageQuery(pagination.value))\nconst summary = computed(() => {\n  const value = pagination.value\n\n  if (!value) return ''\n\n  return numbered.value\n    ? t(\n        'table.showing',\n        {\n          first: format.value.number(value.from),\n          last: format.value.number(value.to),\n          total: format.value.number(numbered.value.total),\n        },\n        'Showing :first–:last of :total',\n      )\n    : t(\n        'table.showing_range',\n        { first: format.value.number(value.from), last: format.value.number(value.to) },\n        'Showing :first–:last',\n      )\n})\nconst goTo = (page: number) => visitTable(props.table.identifier, { page }, ['page'])\n// The next page is fetched while hovering or focusing \"next\" (cached for a few seconds).\nconst prefetchNext = () => next.value && prefetchTablePage(props.table.identifier, next.value)\n// `deferTotals()`: the total and page numbers arrive after the rows.\nconst pendingTotal = computed(\n  () => pagination.value?.mode === 'simple' && pagination.value.pendingTotal === true,\n)\nconst visit = (query: ReturnType<typeof nextPageQuery>) =>\n  query && visitTable(props.table.identifier, query, ['page'])\nconst setPerPage = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value\n  visitTable(props.table.identifier, { perPage: value === 'all' ? 'all' : Number(value) }, ['page'])\n}\n\n// Load more / infinite scroll: the server returns every record up to the requested page,\n// so asking for the next page appends it (and reloads keep what was already shown). A\n// request that fails shows a retry control instead of staying on \"Loading more…\"; infinite\n// scroll waits for the retry rather than requesting again.\nconst loading = ref(false)\nconst failed = ref(false)\nconst sentinel = ref<HTMLElement | null>(null)\nlet observer: IntersectionObserver | null = null\n\nwatch(\n  () => pagination.value?.to,\n  () => {\n    loading.value = false\n    failed.value = false\n  },\n)\n\nconst loadMore = () => {\n  if (!next.value || loading.value) return\n\n  let succeeded = false\n  let cancelled = false\n  loading.value = true\n  failed.value = false\n  visitTable(props.table.identifier, next.value, ['page'], {\n    onSuccess: () => {\n      succeeded = true\n    },\n    onCancel: () => {\n      cancelled = true\n    },\n    onFinish: () => {\n      loading.value = false\n      if (!succeeded && !cancelled) failed.value = true\n    },\n  })\n}\n\nwatch(\n  [sentinel, () => appending.value?.mode, next, failed],\n  ([element, mode, query, hasFailed]) => {\n    observer?.disconnect()\n    observer = null\n\n    if (\n      !element ||\n      mode !== 'infinite' ||\n      !query ||\n      hasFailed ||\n      typeof IntersectionObserver === 'undefined'\n    ) {\n      return\n    }\n\n    observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) loadMore()\n    })\n    observer.observe(element)\n  },\n  { flush: 'post' },\n)\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div v-if=\"pagination\" class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n    <div class=\"text-muted-foreground flex items-center gap-3 text-sm\">\n      <span>{{ summary }}</span>\n      <span\n        v-if=\"pendingTotal\"\n        data-slot=\"pagination-total\"\n        aria-busy=\"true\"\n        :aria-label=\"t('loading', {}, 'Loading')\"\n        class=\"bg-muted-foreground/20 inline-block h-4 w-12 animate-pulse rounded-md\"\n      />\n      <label v-if=\"pagination.pageOptions.length > 1\" class=\"flex items-center gap-2\">\n        <span class=\"sr-only sm:not-sr-only\">{{ t('table.per_page', {}, 'Per page') }}</span>\n        <select\n          :value=\"String(pagination.perPage)\"\n          class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          @change=\"setPerPage\"\n        >\n          <option v-for=\"option in pagination.pageOptions\" :key=\"option\" :value=\"String(option)\">\n            {{ option === 'all' ? t('table.all', {}, 'All') : format.number(option) }}\n          </option>\n        </select>\n      </label>\n    </div>\n    <template v-if=\"appending\">\n      <template v-if=\"next\">\n        <div v-if=\"failed\" class=\"flex items-center gap-2 text-sm\" role=\"alert\">\n          <span class=\"text-destructive\">{{\n            t('table.load_more_failed', {}, \"Couldn't load more records.\")\n          }}</span>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"loadMore\">{{\n            t('retry', {}, 'Retry')\n          }}</Button>\n        </div>\n        <div\n          v-else-if=\"appending.mode === 'infinite'\"\n          ref=\"sentinel\"\n          class=\"text-muted-foreground text-sm\"\n          aria-live=\"polite\"\n        >\n          {{ loading ? t('table.loading_more', {}, 'Loading more…') : '' }}\n        </div>\n        <Button\n          v-else\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"loading\"\n          @click=\"loadMore\"\n        >\n          {{\n            loading ? t('table.loading_more', {}, 'Loading more…') : t('load_more', {}, 'Load more')\n          }}\n        </Button>\n      </template>\n    </template>\n    <nav\n      v-else-if=\"previous || next\"\n      class=\"flex items-center gap-1\"\n      :aria-label=\"t('pagination', {}, 'Pagination')\"\n    >\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-first\"\n        :disabled=\"extremes.first === null\"\n        :aria-label=\"t('table.first_page', {}, 'First page')\"\n        @click=\"goTo(1)\"\n        ><Icon\n          name=\"alfakit::support.pagination.first-button\"\n          :fallback=\"ChevronsLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!previous\"\n        :aria-label=\"t('table.previous', {}, 'Previous')\"\n        @click=\"visit(previous)\"\n        ><Icon\n          name=\"alfakit::support.pagination.previous-button\"\n          :fallback=\"ChevronLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <template v-if=\"numbered && !numbered.simple\">\n        <template v-for=\"(page, index) in pages\" :key=\"page === null ? `gap-${index}` : page\">\n          <span v-if=\"page === null\" class=\"text-muted-foreground px-1\">…</span>\n          <Button\n            v-else\n            type=\"button\"\n            :variant=\"page === numbered.currentPage ? 'default' : 'outline'\"\n            size=\"icon-sm\"\n            :aria-current=\"page === numbered.currentPage ? 'page' : undefined\"\n            @click=\"goTo(page)\"\n            >{{ format.number(page) }}</Button\n          >\n        </template>\n      </template>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!next\"\n        :aria-label=\"t('table.next', {}, 'Next')\"\n        @click=\"visit(next)\"\n        @pointerenter=\"prefetchNext\"\n        @focus=\"prefetchNext\"\n        ><Icon\n          name=\"alfakit::support.pagination.next-button\"\n          :fallback=\"ChevronRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-last\"\n        :disabled=\"extremes.last === null\"\n        :aria-label=\"t('table.last_page', {}, 'Last page')\"\n        @click=\"extremes.last !== null && goTo(extremes.last)\"\n        ><Icon\n          name=\"alfakit::support.pagination.last-button\"\n          :fallback=\"ChevronsRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n    </nav>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TablePagination.vue"],"names":[],"mappings":"AAkSA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAehD,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,CAAC;;AAilB1C,wBAMG"}
+{"version":3,"file":"TablePagination.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TablePagination.vue"],"names":[],"mappings":"AAuSA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAehD,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,CAAC;;AAulB1C,wBAMG"}

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

@@ -1,29 +1,29 @@
-import { useT as e } from "../../context.js";
-import t from "../../lib/Icon.js";
-import n from "../ui/Button2.js";
-import { extremePageLinks as r, isAppendingPagination as i, nextPageQuery as a, prefetchTablePage as ee, previousPageQuery as o, visitTable as s } from "@alfakit/core";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, onBeforeUnmount as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, watch as C, withCtx as w } from "vue";
-import { ChevronLeftIcon as te, ChevronRightIcon as T, ChevronsLeftIcon as E, ChevronsRightIcon as D } from "@lucide/vue";
+import { useFormatter as e, useT as t } from "../../context.js";
+import n from "../../lib/Icon.js";
+import r from "../ui/Button2.js";
+import { extremePageLinks as i, isAppendingPagination as ee, nextPageQuery as a, prefetchTablePage as o, previousPageQuery as s, visitTable as c } from "@alfakit/core";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, watch as w, withCtx as T } from "vue";
+import { ChevronLeftIcon as E, ChevronRightIcon as D, ChevronsLeftIcon as O, ChevronsRightIcon as k } from "@lucide/vue";
 //#region src/components/table/TablePagination.vue?vue&type=script&setup=true&lang.ts
-var O = {
+var te = {
 	key: 0,
 	class: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-}, k = { class: "text-muted-foreground flex items-center gap-3 text-sm" }, A = ["aria-label"], j = {
+}, ne = { class: "text-muted-foreground flex items-center gap-3 text-sm" }, re = ["aria-label"], ie = {
 	key: 1,
 	class: "flex items-center gap-2"
-}, ne = { class: "sr-only sm:not-sr-only" }, re = ["value"], ie = ["value"], ae = {
+}, ae = { class: "sr-only sm:not-sr-only" }, A = ["value"], oe = ["value"], se = {
 	key: 0,
 	class: "flex items-center gap-2 text-sm",
 	role: "alert"
-}, oe = { class: "text-destructive" }, M = ["aria-label"], N = {
+}, j = { class: "text-destructive" }, M = ["aria-label"], N = {
 	key: 0,
 	class: "text-muted-foreground px-1"
-}, P = /*@__PURE__*/ g({
+}, P = /*@__PURE__*/ _({
 	__name: "TablePagination",
 	props: { table: {} },
-	setup(g) {
-		let P = g, F = e(), I = l(() => P.table.pagination);
-		function L(e, t) {
+	setup(_) {
+		let P = _, F = t(), I = e(), L = u(() => P.table.pagination);
+		function R(e, t) {
 			if (t <= 7) return Array.from({ length: t }, (e, t) => t + 1);
 			let n = [.../* @__PURE__ */ new Set([
 				1,
@@ -36,30 +36,30 @@ var O = {
 				t > 0 && e - (n[t - 1] ?? 0) > 1 && r.push(null), r.push(e);
 			}), r;
 		}
-		let R = l(() => {
-			let e = I.value;
+		let z = u(() => {
+			let e = L.value;
 			return e && (e.mode === void 0 || e.mode === "default") ? e : null;
-		}), z = l(() => i(I.value) ? I.value : null), B = l(() => R.value ? L(R.value.currentPage, R.value.lastPage) : []), V = l(() => R.value ? r(P.table, R.value.currentPage, R.value.lastPage) : null), H = l(() => o(I.value)), U = l(() => a(I.value)), W = l(() => {
-			let e = I.value;
-			return e ? R.value ? F("table.showing", {
-				first: e.from,
-				last: e.to,
-				total: R.value.total
-			}, `Showing ${e.from}–${e.to} of ${R.value.total}`) : F("table.showing_range", {
-				first: e.from,
-				last: e.to
-			}, `Showing ${e.from}–${e.to}`) : "";
-		}), G = (e) => s(P.table.identifier, { page: e }, ["page"]), K = () => U.value && ee(P.table.identifier, U.value), q = l(() => I.value?.mode === "simple" && I.value.pendingTotal === !0), J = (e) => e && s(P.table.identifier, e, ["page"]), se = (e) => {
+		}), B = u(() => ee(L.value) ? L.value : null), V = u(() => z.value ? R(z.value.currentPage, z.value.lastPage) : []), H = u(() => z.value ? i(P.table, z.value.currentPage, z.value.lastPage) : null), U = u(() => s(L.value)), W = u(() => a(L.value)), G = u(() => {
+			let e = L.value;
+			return e ? z.value ? F("table.showing", {
+				first: I.value.number(e.from),
+				last: I.value.number(e.to),
+				total: I.value.number(z.value.total)
+			}, "Showing :first–:last of :total") : F("table.showing_range", {
+				first: I.value.number(e.from),
+				last: I.value.number(e.to)
+			}, "Showing :first–:last") : "";
+		}), K = (e) => c(P.table.identifier, { page: e }, ["page"]), q = () => W.value && o(P.table.identifier, W.value), ce = u(() => L.value?.mode === "simple" && L.value.pendingTotal === !0), J = (e) => e && c(P.table.identifier, e, ["page"]), le = (e) => {
 			let t = e.target.value;
-			s(P.table.identifier, { perPage: t === "all" ? "all" : Number(t) }, ["page"]);
-		}, Y = y(!1), X = y(!1), Z = y(null), Q = null;
-		C(() => I.value?.to, () => {
+			c(P.table.identifier, { perPage: t === "all" ? "all" : Number(t) }, ["page"]);
+		}, Y = b(!1), X = b(!1), Z = b(null), Q = null;
+		w(() => L.value?.to, () => {
 			Y.value = !1, X.value = !1;
 		});
 		let $ = () => {
-			if (!U.value || Y.value) return;
+			if (!W.value || Y.value) return;
 			let e = !1, t = !1;
-			Y.value = !0, X.value = !1, s(P.table.identifier, U.value, ["page"], {
+			Y.value = !0, X.value = !1, c(P.table.identifier, W.value, ["page"], {
 				onSuccess: () => {
 					e = !0;
 				},
@@ -71,47 +71,47 @@ var O = {
 				}
 			});
 		};
-		return C([
+		return w([
 			Z,
-			() => z.value?.mode,
-			U,
+			() => B.value?.mode,
+			W,
 			X
 		], ([e, t, n, r]) => {
 			Q?.disconnect(), Q = null, e && t === "infinite" && n && !r && typeof IntersectionObserver < "u" && (Q = new IntersectionObserver((e) => {
 				e.some((e) => e.isIntersecting) && $();
 			}), Q.observe(e));
-		}, { flush: "post" }), _(() => Q?.disconnect()), (e, r) => I.value ? (v(), f("div", O, [p("div", k, [
-			p("span", null, x(W.value), 1),
-			q.value ? (v(), f("span", {
+		}, { flush: "post" }), v(() => Q?.disconnect()), (e, t) => L.value ? (y(), p("div", te, [m("div", ne, [
+			m("span", null, S(G.value), 1),
+			ce.value ? (y(), p("span", {
 				key: 0,
 				"data-slot": "pagination-total",
 				"aria-busy": "true",
-				"aria-label": S(F)("loading", {}, "Loading"),
+				"aria-label": C(F)("loading", {}, "Loading"),
 				class: "bg-muted-foreground/20 inline-block h-4 w-12 animate-pulse rounded-md"
-			}, null, 8, A)) : d("", !0),
-			I.value.pageOptions.length > 1 ? (v(), f("label", j, [p("span", ne, x(S(F)("table.per_page", {}, "Per page")), 1), p("select", {
-				value: String(I.value.perPage),
+			}, null, 8, re)) : f("", !0),
+			L.value.pageOptions.length > 1 ? (y(), p("label", ie, [m("span", ae, S(C(F)("table.per_page", {}, "Per page")), 1), m("select", {
+				value: String(L.value.perPage),
 				class: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
-				onChange: se
-			}, [(v(!0), f(c, null, b(I.value.pageOptions, (e) => (v(), f("option", {
+				onChange: le
+			}, [(y(!0), p(l, null, x(L.value.pageOptions, (e) => (y(), p("option", {
 				key: e,
 				value: String(e)
-			}, x(e === "all" ? S(F)("table.all", {}, "All") : e), 9, ie))), 128))], 40, re)])) : d("", !0)
-		]), z.value ? (v(), f(c, { key: 0 }, [U.value ? (v(), f(c, { key: 0 }, [X.value ? (v(), f("div", ae, [p("span", oe, x(S(F)("table.load_more_failed", {}, "Couldn't load more records.")), 1), h(n, {
+			}, S(e === "all" ? C(F)("table.all", {}, "All") : C(I).number(e)), 9, oe))), 128))], 40, A)])) : f("", !0)
+		]), B.value ? (y(), p(l, { key: 0 }, [W.value ? (y(), p(l, { key: 0 }, [X.value ? (y(), p("div", se, [m("span", j, S(C(F)("table.load_more_failed", {}, "Couldn't load more records.")), 1), g(r, {
 			type: "button",
 			variant: "outline",
 			size: "sm",
 			onClick: $
 		}, {
-			default: w(() => [m(x(S(F)("retry", {}, "Retry")), 1)]),
+			default: T(() => [h(S(C(F)("retry", {}, "Retry")), 1)]),
 			_: 1
-		})])) : z.value.mode === "infinite" ? (v(), f("div", {
+		})])) : B.value.mode === "infinite" ? (y(), p("div", {
 			key: 1,
 			ref_key: "sentinel",
 			ref: Z,
 			class: "text-muted-foreground text-sm",
 			"aria-live": "polite"
-		}, x(Y.value ? S(F)("table.loading_more", {}, "Loading more…") : ""), 513)) : (v(), u(n, {
+		}, S(Y.value ? C(F)("table.loading_more", {}, "Loading more…") : ""), 513)) : (y(), d(r, {
 			key: 2,
 			type: "button",
 			variant: "outline",
@@ -119,95 +119,95 @@ var O = {
 			disabled: Y.value,
 			onClick: $
 		}, {
-			default: w(() => [m(x(Y.value ? S(F)("table.loading_more", {}, "Loading more…") : S(F)("load_more", {}, "Load more")), 1)]),
+			default: T(() => [h(S(Y.value ? C(F)("table.loading_more", {}, "Loading more…") : C(F)("load_more", {}, "Load more")), 1)]),
 			_: 1
-		}, 8, ["disabled"]))], 64)) : d("", !0)], 64)) : H.value || U.value ? (v(), f("nav", {
+		}, 8, ["disabled"]))], 64)) : f("", !0)], 64)) : U.value || W.value ? (y(), p("nav", {
 			key: 1,
 			class: "flex items-center gap-1",
-			"aria-label": S(F)("pagination", {}, "Pagination")
+			"aria-label": C(F)("pagination", {}, "Pagination")
 		}, [
-			V.value ? (v(), u(n, {
+			H.value ? (y(), d(r, {
 				key: 0,
 				type: "button",
 				variant: "outline",
 				size: "icon-sm",
 				"data-slot": "pagination-first",
-				disabled: V.value.first === null,
-				"aria-label": S(F)("table.first_page", {}, "First page"),
-				onClick: r[0] ||= (e) => G(1)
+				disabled: H.value.first === null,
+				"aria-label": C(F)("table.first_page", {}, "First page"),
+				onClick: t[0] ||= (e) => K(1)
 			}, {
-				default: w(() => [h(S(t), {
+				default: T(() => [g(C(n), {
 					name: "alfakit::support.pagination.first-button",
-					fallback: S(E),
+					fallback: C(O),
 					class: "rtl:rotate-180"
 				}, null, 8, ["fallback"])]),
 				_: 1
-			}, 8, ["disabled", "aria-label"])) : d("", !0),
-			h(n, {
+			}, 8, ["disabled", "aria-label"])) : f("", !0),
+			g(r, {
 				type: "button",
 				variant: "outline",
 				size: "icon-sm",
-				disabled: !H.value,
-				"aria-label": S(F)("table.previous", {}, "Previous"),
-				onClick: r[1] ||= (e) => J(H.value)
+				disabled: !U.value,
+				"aria-label": C(F)("table.previous", {}, "Previous"),
+				onClick: t[1] ||= (e) => J(U.value)
 			}, {
-				default: w(() => [h(S(t), {
+				default: T(() => [g(C(n), {
 					name: "alfakit::support.pagination.previous-button",
-					fallback: S(te),
+					fallback: C(E),
 					class: "rtl:rotate-180"
 				}, null, 8, ["fallback"])]),
 				_: 1
 			}, 8, ["disabled", "aria-label"]),
-			R.value && !R.value.simple ? (v(!0), f(c, { key: 1 }, b(B.value, (e, t) => (v(), f(c, { key: e === null ? `gap-${t}` : e }, [e === null ? (v(), f("span", N, "…")) : (v(), u(n, {
+			z.value && !z.value.simple ? (y(!0), p(l, { key: 1 }, x(V.value, (e, t) => (y(), p(l, { key: e === null ? `gap-${t}` : e }, [e === null ? (y(), p("span", N, "…")) : (y(), d(r, {
 				key: 1,
 				type: "button",
-				variant: e === R.value.currentPage ? "default" : "outline",
+				variant: e === z.value.currentPage ? "default" : "outline",
 				size: "icon-sm",
-				"aria-current": e === R.value.currentPage ? "page" : void 0,
-				onClick: (t) => G(e)
+				"aria-current": e === z.value.currentPage ? "page" : void 0,
+				onClick: (t) => K(e)
 			}, {
-				default: w(() => [m(x(e), 1)]),
+				default: T(() => [h(S(C(I).number(e)), 1)]),
 				_: 2
 			}, 1032, [
 				"variant",
 				"aria-current",
 				"onClick"
-			]))], 64))), 128)) : d("", !0),
-			h(n, {
+			]))], 64))), 128)) : f("", !0),
+			g(r, {
 				type: "button",
 				variant: "outline",
 				size: "icon-sm",
-				disabled: !U.value,
-				"aria-label": S(F)("table.next", {}, "Next"),
-				onClick: r[2] ||= (e) => J(U.value),
-				onPointerenter: K,
-				onFocus: K
+				disabled: !W.value,
+				"aria-label": C(F)("table.next", {}, "Next"),
+				onClick: t[2] ||= (e) => J(W.value),
+				onPointerenter: q,
+				onFocus: q
 			}, {
-				default: w(() => [h(S(t), {
+				default: T(() => [g(C(n), {
 					name: "alfakit::support.pagination.next-button",
-					fallback: S(T),
+					fallback: C(D),
 					class: "rtl:rotate-180"
 				}, null, 8, ["fallback"])]),
 				_: 1
 			}, 8, ["disabled", "aria-label"]),
-			V.value ? (v(), u(n, {
+			H.value ? (y(), d(r, {
 				key: 2,
 				type: "button",
 				variant: "outline",
 				size: "icon-sm",
 				"data-slot": "pagination-last",
-				disabled: V.value.last === null,
-				"aria-label": S(F)("table.last_page", {}, "Last page"),
-				onClick: r[3] ||= (e) => V.value.last !== null && G(V.value.last)
+				disabled: H.value.last === null,
+				"aria-label": C(F)("table.last_page", {}, "Last page"),
+				onClick: t[3] ||= (e) => H.value.last !== null && K(H.value.last)
 			}, {
-				default: w(() => [h(S(t), {
+				default: T(() => [g(C(n), {
 					name: "alfakit::support.pagination.last-button",
-					fallback: S(D),
+					fallback: C(k),
 					class: "rtl:rotate-180"
 				}, null, 8, ["fallback"])]),
 				_: 1
-			}, 8, ["disabled", "aria-label"])) : d("", !0)
-		], 8, M)) : d("", !0)])) : d("", !0);
+			}, 8, ["disabled", "aria-label"])) : f("", !0)
+		], 8, M)) : f("", !0)])) : f("", !0);
 	}
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_createCommentVNode","_Fragment","_renderList","_createVNode","Button","_withCtx","_createTextVNode","_createBlock","Icon","Icon_default","Button_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","TablePagination_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","pagination","computed","pageWindow","last","index","sorted","current","page","a","b","result","numbered","value","appending","isAppendingPagination","pages","extremes","extremePageLinks","previous","previousPageQuery","next","nextPageQuery","summary","goTo","visitTable","prefetchNext","prefetchTablePage","pendingTotal","visit","query","setPerPage","event","loading","ref","failed","sentinel","observer","loadMore","succeeded","cancelled","watch","element","mode","hasFailed","entries","entry","onBeforeUnmount","openBlock","createElementBlock","createElementVNode","toDisplayString","unref","createCommentVNode","Fragment","renderList","option","createVNode","withCtx","createTextVNode","createBlock","_cache","ChevronsLeftIcon","ChevronLeftIcon","ChevronRightIcon","ChevronsRightIcon"],"sources":["../../../src/components/table/TablePagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  extremePageLinks,\n  isAppendingPagination,\n  nextPageQuery,\n  prefetchTablePage,\n  previousPageQuery,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{ table: TableSchema }>()\nconst t = useT()\nconst pagination = computed(() => props.table.pagination)\n\nfunction pageWindow(current: number, last: number): Array<number | null> {\n  if (last <= 7) {\n    return Array.from({ length: last }, (_, index) => index + 1)\n  }\n\n  const pages = new Set<number>([1, last, current - 1, current, current + 1])\n  const sorted = [...pages].filter((page) => page >= 1 && page <= last).sort((a, b) => a - b)\n  const result: Array<number | null> = []\n\n  sorted.forEach((page, index) => {\n    if (index > 0 && page - (sorted[index - 1] ?? 0) > 1) {\n      result.push(null)\n    }\n\n    result.push(page)\n  })\n\n  return result\n}\n\n// Numbered pages (the default mode) know their total and last page.\nconst numbered = computed(() => {\n  const value = pagination.value\n\n  return value && (value.mode === undefined || value.mode === 'default') ? value : null\n})\nconst appending = computed(() =>\n  isAppendingPagination(pagination.value) ? pagination.value : null,\n)\nconst pages = computed(() =>\n  numbered.value ? pageWindow(numbered.value.currentPage, numbered.value.lastPage) : [],\n)\n// `extremePaginationLinks()`: first / last page buttons around numbered pages.\nconst extremes = computed(() =>\n  numbered.value\n    ? extremePageLinks(props.table, numbered.value.currentPage, numbered.value.lastPage)\n    : null,\n)\nconst previous = computed(() => previousPageQuery(pagination.value))\nconst next = computed(() => nextPageQuery(pagination.value))\nconst summary = computed(() => {\n  const value = pagination.value\n\n  if (!value) return ''\n\n  return numbered.value\n    ? t(\n        'table.showing',\n        { first: value.from, last: value.to, total: numbered.value.total },\n        `Showing ${value.from}–${value.to} of ${numbered.value.total}`,\n      )\n    : t(\n        'table.showing_range',\n        { first: value.from, last: value.to },\n        `Showing ${value.from}–${value.to}`,\n      )\n})\nconst goTo = (page: number) => visitTable(props.table.identifier, { page }, ['page'])\n// The next page is fetched while hovering or focusing \"next\" (cached for a few seconds).\nconst prefetchNext = () => next.value && prefetchTablePage(props.table.identifier, next.value)\n// `deferTotals()`: the total and page numbers arrive after the rows.\nconst pendingTotal = computed(\n  () => pagination.value?.mode === 'simple' && pagination.value.pendingTotal === true,\n)\nconst visit = (query: ReturnType<typeof nextPageQuery>) =>\n  query && visitTable(props.table.identifier, query, ['page'])\nconst setPerPage = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value\n  visitTable(props.table.identifier, { perPage: value === 'all' ? 'all' : Number(value) }, ['page'])\n}\n\n// Load more / infinite scroll: the server returns every record up to the requested page,\n// so asking for the next page appends it (and reloads keep what was already shown). A\n// request that fails shows a retry control instead of staying on \"Loading more…\"; infinite\n// scroll waits for the retry rather than requesting again.\nconst loading = ref(false)\nconst failed = ref(false)\nconst sentinel = ref<HTMLElement | null>(null)\nlet observer: IntersectionObserver | null = null\n\nwatch(\n  () => pagination.value?.to,\n  () => {\n    loading.value = false\n    failed.value = false\n  },\n)\n\nconst loadMore = () => {\n  if (!next.value || loading.value) return\n\n  let succeeded = false\n  let cancelled = false\n  loading.value = true\n  failed.value = false\n  visitTable(props.table.identifier, next.value, ['page'], {\n    onSuccess: () => {\n      succeeded = true\n    },\n    onCancel: () => {\n      cancelled = true\n    },\n    onFinish: () => {\n      loading.value = false\n      if (!succeeded && !cancelled) failed.value = true\n    },\n  })\n}\n\nwatch(\n  [sentinel, () => appending.value?.mode, next, failed],\n  ([element, mode, query, hasFailed]) => {\n    observer?.disconnect()\n    observer = null\n\n    if (\n      !element ||\n      mode !== 'infinite' ||\n      !query ||\n      hasFailed ||\n      typeof IntersectionObserver === 'undefined'\n    ) {\n      return\n    }\n\n    observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) loadMore()\n    })\n    observer.observe(element)\n  },\n  { flush: 'post' },\n)\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div v-if=\"pagination\" class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n    <div class=\"text-muted-foreground flex items-center gap-3 text-sm\">\n      <span>{{ summary }}</span>\n      <span\n        v-if=\"pendingTotal\"\n        data-slot=\"pagination-total\"\n        aria-busy=\"true\"\n        :aria-label=\"t('loading', {}, 'Loading')\"\n        class=\"bg-muted-foreground/20 inline-block h-4 w-12 animate-pulse rounded-md\"\n      />\n      <label v-if=\"pagination.pageOptions.length > 1\" class=\"flex items-center gap-2\">\n        <span class=\"sr-only sm:not-sr-only\">{{ t('table.per_page', {}, 'Per page') }}</span>\n        <select\n          :value=\"String(pagination.perPage)\"\n          class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          @change=\"setPerPage\"\n        >\n          <option v-for=\"option in pagination.pageOptions\" :key=\"option\" :value=\"String(option)\">\n            {{ option === 'all' ? t('table.all', {}, 'All') : option }}\n          </option>\n        </select>\n      </label>\n    </div>\n    <template v-if=\"appending\">\n      <template v-if=\"next\">\n        <div v-if=\"failed\" class=\"flex items-center gap-2 text-sm\" role=\"alert\">\n          <span class=\"text-destructive\">{{\n            t('table.load_more_failed', {}, \"Couldn't load more records.\")\n          }}</span>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"loadMore\">{{\n            t('retry', {}, 'Retry')\n          }}</Button>\n        </div>\n        <div\n          v-else-if=\"appending.mode === 'infinite'\"\n          ref=\"sentinel\"\n          class=\"text-muted-foreground text-sm\"\n          aria-live=\"polite\"\n        >\n          {{ loading ? t('table.loading_more', {}, 'Loading more…') : '' }}\n        </div>\n        <Button\n          v-else\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"loading\"\n          @click=\"loadMore\"\n        >\n          {{\n            loading ? t('table.loading_more', {}, 'Loading more…') : t('load_more', {}, 'Load more')\n          }}\n        </Button>\n      </template>\n    </template>\n    <nav\n      v-else-if=\"previous || next\"\n      class=\"flex items-center gap-1\"\n      :aria-label=\"t('pagination', {}, 'Pagination')\"\n    >\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-first\"\n        :disabled=\"extremes.first === null\"\n        :aria-label=\"t('table.first_page', {}, 'First page')\"\n        @click=\"goTo(1)\"\n        ><Icon\n          name=\"alfakit::support.pagination.first-button\"\n          :fallback=\"ChevronsLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!previous\"\n        :aria-label=\"t('table.previous', {}, 'Previous')\"\n        @click=\"visit(previous)\"\n        ><Icon\n          name=\"alfakit::support.pagination.previous-button\"\n          :fallback=\"ChevronLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <template v-if=\"numbered && !numbered.simple\">\n        <template v-for=\"(page, index) in pages\" :key=\"page === null ? `gap-${index}` : page\">\n          <span v-if=\"page === null\" class=\"text-muted-foreground px-1\">…</span>\n          <Button\n            v-else\n            type=\"button\"\n            :variant=\"page === numbered.currentPage ? 'default' : 'outline'\"\n            size=\"icon-sm\"\n            :aria-current=\"page === numbered.currentPage ? 'page' : undefined\"\n            @click=\"goTo(page)\"\n            >{{ page }}</Button\n          >\n        </template>\n      </template>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!next\"\n        :aria-label=\"t('table.next', {}, 'Next')\"\n        @click=\"visit(next)\"\n        @pointerenter=\"prefetchNext\"\n        @focus=\"prefetchNext\"\n        ><Icon\n          name=\"alfakit::support.pagination.next-button\"\n          :fallback=\"ChevronRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-last\"\n        :disabled=\"extremes.last === null\"\n        :aria-label=\"t('table.last_page', {}, 'Last page')\"\n        @click=\"extremes.last !== null && goTo(extremes.last)\"\n        ><Icon\n          name=\"alfakit::support.pagination.last-button\"\n          :fallback=\"ChevronsRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n    </nav>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TablePagination.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_createCommentVNode","_Fragment","_renderList","_createVNode","Button","_withCtx","_createTextVNode","_createBlock","Icon","Icon_default","Button_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","TablePagination_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","format","useFormatter","pagination","computed","pageWindow","last","index","sorted","current","page","a","b","result","numbered","value","appending","isAppendingPagination","pages","extremes","extremePageLinks","previous","previousPageQuery","next","nextPageQuery","summary","goTo","visitTable","prefetchNext","prefetchTablePage","pendingTotal","visit","query","setPerPage","event","loading","ref","failed","sentinel","observer","loadMore","succeeded","cancelled","watch","element","mode","hasFailed","entries","entry","onBeforeUnmount","openBlock","createElementBlock","createElementVNode","toDisplayString","unref","createCommentVNode","Fragment","renderList","option","createVNode","withCtx","createTextVNode","createBlock","_cache","ChevronsLeftIcon","ChevronLeftIcon","ChevronRightIcon","ChevronsRightIcon"],"sources":["../../../src/components/table/TablePagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  extremePageLinks,\n  isAppendingPagination,\n  nextPageQuery,\n  prefetchTablePage,\n  previousPageQuery,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useFormatter, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{ table: TableSchema }>()\nconst t = useT()\nconst format = useFormatter()\nconst pagination = computed(() => props.table.pagination)\n\nfunction pageWindow(current: number, last: number): Array<number | null> {\n  if (last <= 7) {\n    return Array.from({ length: last }, (_, index) => index + 1)\n  }\n\n  const pages = new Set<number>([1, last, current - 1, current, current + 1])\n  const sorted = [...pages].filter((page) => page >= 1 && page <= last).sort((a, b) => a - b)\n  const result: Array<number | null> = []\n\n  sorted.forEach((page, index) => {\n    if (index > 0 && page - (sorted[index - 1] ?? 0) > 1) {\n      result.push(null)\n    }\n\n    result.push(page)\n  })\n\n  return result\n}\n\n// Numbered pages (the default mode) know their total and last page.\nconst numbered = computed(() => {\n  const value = pagination.value\n\n  return value && (value.mode === undefined || value.mode === 'default') ? value : null\n})\nconst appending = computed(() =>\n  isAppendingPagination(pagination.value) ? pagination.value : null,\n)\nconst pages = computed(() =>\n  numbered.value ? pageWindow(numbered.value.currentPage, numbered.value.lastPage) : [],\n)\n// `extremePaginationLinks()`: first / last page buttons around numbered pages.\nconst extremes = computed(() =>\n  numbered.value\n    ? extremePageLinks(props.table, numbered.value.currentPage, numbered.value.lastPage)\n    : null,\n)\nconst previous = computed(() => previousPageQuery(pagination.value))\nconst next = computed(() => nextPageQuery(pagination.value))\nconst summary = computed(() => {\n  const value = pagination.value\n\n  if (!value) return ''\n\n  return numbered.value\n    ? t(\n        'table.showing',\n        {\n          first: format.value.number(value.from),\n          last: format.value.number(value.to),\n          total: format.value.number(numbered.value.total),\n        },\n        'Showing :first–:last of :total',\n      )\n    : t(\n        'table.showing_range',\n        { first: format.value.number(value.from), last: format.value.number(value.to) },\n        'Showing :first–:last',\n      )\n})\nconst goTo = (page: number) => visitTable(props.table.identifier, { page }, ['page'])\n// The next page is fetched while hovering or focusing \"next\" (cached for a few seconds).\nconst prefetchNext = () => next.value && prefetchTablePage(props.table.identifier, next.value)\n// `deferTotals()`: the total and page numbers arrive after the rows.\nconst pendingTotal = computed(\n  () => pagination.value?.mode === 'simple' && pagination.value.pendingTotal === true,\n)\nconst visit = (query: ReturnType<typeof nextPageQuery>) =>\n  query && visitTable(props.table.identifier, query, ['page'])\nconst setPerPage = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value\n  visitTable(props.table.identifier, { perPage: value === 'all' ? 'all' : Number(value) }, ['page'])\n}\n\n// Load more / infinite scroll: the server returns every record up to the requested page,\n// so asking for the next page appends it (and reloads keep what was already shown). A\n// request that fails shows a retry control instead of staying on \"Loading more…\"; infinite\n// scroll waits for the retry rather than requesting again.\nconst loading = ref(false)\nconst failed = ref(false)\nconst sentinel = ref<HTMLElement | null>(null)\nlet observer: IntersectionObserver | null = null\n\nwatch(\n  () => pagination.value?.to,\n  () => {\n    loading.value = false\n    failed.value = false\n  },\n)\n\nconst loadMore = () => {\n  if (!next.value || loading.value) return\n\n  let succeeded = false\n  let cancelled = false\n  loading.value = true\n  failed.value = false\n  visitTable(props.table.identifier, next.value, ['page'], {\n    onSuccess: () => {\n      succeeded = true\n    },\n    onCancel: () => {\n      cancelled = true\n    },\n    onFinish: () => {\n      loading.value = false\n      if (!succeeded && !cancelled) failed.value = true\n    },\n  })\n}\n\nwatch(\n  [sentinel, () => appending.value?.mode, next, failed],\n  ([element, mode, query, hasFailed]) => {\n    observer?.disconnect()\n    observer = null\n\n    if (\n      !element ||\n      mode !== 'infinite' ||\n      !query ||\n      hasFailed ||\n      typeof IntersectionObserver === 'undefined'\n    ) {\n      return\n    }\n\n    observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) loadMore()\n    })\n    observer.observe(element)\n  },\n  { flush: 'post' },\n)\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div v-if=\"pagination\" class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n    <div class=\"text-muted-foreground flex items-center gap-3 text-sm\">\n      <span>{{ summary }}</span>\n      <span\n        v-if=\"pendingTotal\"\n        data-slot=\"pagination-total\"\n        aria-busy=\"true\"\n        :aria-label=\"t('loading', {}, 'Loading')\"\n        class=\"bg-muted-foreground/20 inline-block h-4 w-12 animate-pulse rounded-md\"\n      />\n      <label v-if=\"pagination.pageOptions.length > 1\" class=\"flex items-center gap-2\">\n        <span class=\"sr-only sm:not-sr-only\">{{ t('table.per_page', {}, 'Per page') }}</span>\n        <select\n          :value=\"String(pagination.perPage)\"\n          class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          @change=\"setPerPage\"\n        >\n          <option v-for=\"option in pagination.pageOptions\" :key=\"option\" :value=\"String(option)\">\n            {{ option === 'all' ? t('table.all', {}, 'All') : format.number(option) }}\n          </option>\n        </select>\n      </label>\n    </div>\n    <template v-if=\"appending\">\n      <template v-if=\"next\">\n        <div v-if=\"failed\" class=\"flex items-center gap-2 text-sm\" role=\"alert\">\n          <span class=\"text-destructive\">{{\n            t('table.load_more_failed', {}, \"Couldn't load more records.\")\n          }}</span>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"loadMore\">{{\n            t('retry', {}, 'Retry')\n          }}</Button>\n        </div>\n        <div\n          v-else-if=\"appending.mode === 'infinite'\"\n          ref=\"sentinel\"\n          class=\"text-muted-foreground text-sm\"\n          aria-live=\"polite\"\n        >\n          {{ loading ? t('table.loading_more', {}, 'Loading more…') : '' }}\n        </div>\n        <Button\n          v-else\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"loading\"\n          @click=\"loadMore\"\n        >\n          {{\n            loading ? t('table.loading_more', {}, 'Loading more…') : t('load_more', {}, 'Load more')\n          }}\n        </Button>\n      </template>\n    </template>\n    <nav\n      v-else-if=\"previous || next\"\n      class=\"flex items-center gap-1\"\n      :aria-label=\"t('pagination', {}, 'Pagination')\"\n    >\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-first\"\n        :disabled=\"extremes.first === null\"\n        :aria-label=\"t('table.first_page', {}, 'First page')\"\n        @click=\"goTo(1)\"\n        ><Icon\n          name=\"alfakit::support.pagination.first-button\"\n          :fallback=\"ChevronsLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!previous\"\n        :aria-label=\"t('table.previous', {}, 'Previous')\"\n        @click=\"visit(previous)\"\n        ><Icon\n          name=\"alfakit::support.pagination.previous-button\"\n          :fallback=\"ChevronLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <template v-if=\"numbered && !numbered.simple\">\n        <template v-for=\"(page, index) in pages\" :key=\"page === null ? `gap-${index}` : page\">\n          <span v-if=\"page === null\" class=\"text-muted-foreground px-1\">…</span>\n          <Button\n            v-else\n            type=\"button\"\n            :variant=\"page === numbered.currentPage ? 'default' : 'outline'\"\n            size=\"icon-sm\"\n            :aria-current=\"page === numbered.currentPage ? 'page' : undefined\"\n            @click=\"goTo(page)\"\n            >{{ format.number(page) }}</Button\n          >\n        </template>\n      </template>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!next\"\n        :aria-label=\"t('table.next', {}, 'Next')\"\n        @click=\"visit(next)\"\n        @pointerenter=\"prefetchNext\"\n        @focus=\"prefetchNext\"\n        ><Icon\n          name=\"alfakit::support.pagination.next-button\"\n          :fallback=\"ChevronRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-last\"\n        :disabled=\"extremes.last === null\"\n        :aria-label=\"t('table.last_page', {}, 'Last page')\"\n        @click=\"extremes.last !== null && goTo(extremes.last)\"\n        ><Icon\n          name=\"alfakit::support.pagination.last-button\"\n          :fallback=\"ChevronsRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n    </nav>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -20,7 +20,8 @@ var b = ["data-slot"], x = {
 		cell: {},
 		recordKey: {},
 		token: {},
-		component: {}
+		component: {},
+		fromRegistry: { type: Boolean }
 	},
 	setup(d) {
 		let w = d, T = o(() => w.column), { update: E, saving: D, error: O } = a(w), k = _(), A = o(() => w.cell.state === null || w.cell.state === void 0 ? "" : String(w.cell.state)), j = m(A.value), M = o(() => !!(w.cell.prefix || w.cell.suffix));