@alfakit/vue 0.1.1 → 0.1.6

package/dist/components/fields/ModalTablePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTablePicker.js","names":["_sfc_main","ModalTablePicker_vue_vue_type_script_setup_true_lang_default","ModalTablePicker_default"],"sources":["../../../src/components/fields/ModalTablePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ModalTableSelectResponse, ModalTableSelectSchema, TableQuery } from '@alfakit/core'\nimport {\n  FILTERS_MODAL_WIDTH_CLASSES,\n  debounce,\n  modalTablePaging,\n  toggleModalTableKey,\n} from '@alfakit/core'\nimport {\n  ArrowDownIcon,\n  ArrowUpDownIcon,\n  ArrowUpIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  SearchIcon,\n} from '@lucide/vue'\nimport { computed, onScopeDispose, ref, watch } from 'vue'\nimport { useChoice, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useFormStore } from '../form/form-context'\nimport TableCellContent from '../table/TableCellContent.vue'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogFooter from '../ui/DialogFooter.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport Input from '../ui/Input.vue'\nimport Skeleton from '../ui/Skeleton.vue'\nimport Table from '../ui/Table.vue'\nimport TableBody from '../ui/TableBody.vue'\nimport TableCell from '../ui/TableCell.vue'\nimport TableHead from '../ui/TableHead.vue'\nimport TableHeader from '../ui/TableHeader.vue'\nimport TableRow from '../ui/TableRow.vue'\nimport ModalTablePickerFilters from './ModalTablePickerFilters.vue'\n\nconst props = defineProps<{ component: ModalTableSelectSchema; initial: string[] }>()\nconst emit = defineEmits<{\n  close: []\n  confirm: [keys: string[], labels: Record<string, string>]\n}>()\nconst t = useT()\nconst choice = useChoice()\nconst form = useFormStore()\nconst multiple = computed(() => Boolean(props.component.multiple))\nconst query = ref<TableQuery>({})\nconst response = ref<ModalTableSelectResponse | null>(null)\nconst failed = ref(false)\nconst loading = ref(true)\nconst draft = ref<string[]>([...props.initial])\nconst labels = ref<Record<string, string>>({})\nconst search = ref('')\nlet controller: AbortController | null = null\n\nconst load = () => {\n  controller?.abort()\n  const current = new AbortController()\n  controller = current\n  loading.value = true\n\n  form\n    .modalTable(\n      props.component.statePath,\n      props.component.tableStateIdentifier,\n      query.value,\n      current.signal,\n    )\n    .then((next) => {\n      if (!next) return\n      response.value = next\n      labels.value = { ...labels.value, ...next.labels }\n      failed.value = false\n    })\n    .catch((error: unknown) => {\n      if ((error as { name?: string }).name !== 'AbortError') failed.value = true\n    })\n    .finally(() => {\n      if (!current.signal.aborted) loading.value = false\n    })\n}\n\nwatch(query, load, { immediate: true, deep: true })\nonScopeDispose(() => controller?.abort())\n\nconst table = computed(() => response.value?.table)\nconst pushSearch = debounce((next: string) => {\n  query.value = { ...query.value, search: next || null, page: null }\n}, 400)\nonScopeDispose(() => pushSearch.cancel())\n\nconst columns = computed(() =>\n  table.value\n    ? table.value.columns.filter((column) => table.value!.visibleColumns.includes(column.name))\n    : [],\n)\nconst records = computed(() => table.value?.records ?? [])\nconst paging = computed(() => modalTablePaging(table.value?.pagination))\nconst atMax = computed(\n  () =>\n    multiple.value &&\n    props.component.maxItems != null &&\n    draft.value.length >= props.component.maxItems,\n)\nconst hasToolbar = computed(\n  () => Boolean(table.value?.searchable) || (table.value?.filters?.length ?? 0) > 0,\n)\n\nconst toggle = (key: string) => {\n  draft.value = toggleModalTableKey(draft.value, key, multiple.value, props.component.maxItems)\n}\nconst isSelectable = (key: string, selectable: boolean | undefined) =>\n  selectable === true && (draft.value.includes(key) || !atMax.value)\nconst sort = (column: string) => {\n  const direction =\n    table.value?.sort?.column === column && table.value.sort.direction === 'asc' ? 'desc' : 'asc'\n  query.value = { ...query.value, sort: column, direction, page: null }\n}\nconst ariaSortOf = (column: string) =>\n  table.value?.sort?.column === column\n    ? table.value.sort.direction === 'asc'\n      ? 'ascending'\n      : 'descending'\n    : undefined\nconst goTo = (page: number) => {\n  query.value = { ...query.value, page }\n}\nconst confirm = () =>\n  emit(\n    'confirm',\n    draft.value,\n    Object.fromEntries(\n      draft.value.filter((key) => labels.value[key]).map((key) => [key, labels.value[key]!]),\n    ),\n  )\n</script>\n\n<template>\n  <Dialog :open=\"true\" @update:open=\"(open) => !open && emit('close')\">\n    <DialogContent\n      :class=\"\n        cn(\n          'flex max-h-[90vh] flex-col gap-4',\n          FILTERS_MODAL_WIDTH_CLASSES[props.component.modalWidth ?? '3xl'] ?? 'sm:max-w-3xl',\n        )\n      \"\n      data-slot=\"modal-table-select-dialog\"\n    >\n      <DialogHeader>\n        <DialogTitle>{{ props.component.modalHeading }}</DialogTitle>\n        <!-- Escaped on the server (`Html::from()`), like action modal descriptions. -->\n        <p\n          v-if=\"props.component.modalDescription\"\n          class=\"text-muted-foreground text-sm\"\n          data-slot=\"modal-table-select-description\"\n          v-html=\"props.component.modalDescription\"\n        />\n        <DialogDescription aria-live=\"polite\">{{\n          choice('table.selected', draft.length, { count: draft.length }, ':count selected')\n        }}</DialogDescription>\n      </DialogHeader>\n      <div v-if=\"table && hasToolbar\" class=\"flex flex-col gap-3\">\n        <div v-if=\"table.searchable\" class=\"relative\">\n          <SearchIcon\n            class=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n          />\n          <Input\n            type=\"search\"\n            :model-value=\"search\"\n            :aria-label=\"table.searchPlaceholder\"\n            :placeholder=\"table.searchPlaceholder\"\n            class=\"ps-8\"\n            @update:model-value=\"\n              (next) => {\n                search = String(next)\n                pushSearch(String(next))\n              }\n            \"\n          />\n        </div>\n        <ModalTablePickerFilters\n          v-if=\"(table.filters?.length ?? 0) > 0\"\n          :table=\"table\"\n          :owner=\"form\"\n          :path=\"props.component.statePath\"\n          @change=\"(filters) => (query = { ...query, filters, page: null })\"\n        />\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-auto rounded-md border\" :aria-busy=\"loading\">\n        <p v-if=\"failed\" role=\"alert\" class=\"text-destructive p-6 text-center text-sm\">\n          {{ t('table_select.load_failed', {}, \"Couldn't load the records.\") }}\n        </p>\n        <div v-else-if=\"!table\" class=\"flex flex-col gap-2 p-4\" aria-hidden=\"true\">\n          <Skeleton class=\"h-8 w-full\" />\n          <Skeleton class=\"h-8 w-full\" />\n          <Skeleton class=\"h-8 w-full\" />\n        </div>\n        <p v-else-if=\"records.length === 0\" class=\"text-muted-foreground p-6 text-center text-sm\">\n          {{ table.emptyState.heading }}\n        </p>\n        <Table v-else :class=\"cn(loading && 'opacity-60')\">\n          <TableHeader>\n            <TableRow>\n              <TableHead class=\"w-10\"\n                ><span class=\"sr-only\">{{\n                  t('table.select_row', {}, 'Select row')\n                }}</span></TableHead\n              >\n              <TableHead\n                v-for=\"column in columns\"\n                :key=\"column.name\"\n                :aria-sort=\"ariaSortOf(column.name)\"\n              >\n                <button\n                  v-if=\"column.sortable\"\n                  type=\"button\"\n                  class=\"inline-flex items-center gap-1\"\n                  @click=\"sort(column.name)\"\n                >\n                  {{ column.label }}\n                  <template v-if=\"table.sort?.column === column.name\">\n                    <ArrowUpIcon v-if=\"table.sort.direction === 'asc'\" class=\"size-3.5\" />\n                    <ArrowDownIcon v-else class=\"size-3.5\" />\n                  </template>\n                  <ArrowUpDownIcon v-else class=\"text-muted-foreground size-3.5\" />\n                </button>\n                <template v-else>{{ column.label }}</template>\n              </TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow\n              v-for=\"record in records\"\n              :key=\"String(record.key)\"\n              :data-state=\"draft.includes(String(record.key)) ? 'selected' : undefined\"\n              :class=\"cn(isSelectable(String(record.key), record.selectable) && 'cursor-pointer')\"\n              @click=\"\n                isSelectable(String(record.key), record.selectable) && toggle(String(record.key))\n              \"\n            >\n              <TableCell class=\"w-10\" @click.stop>\n                <Checkbox\n                  v-if=\"multiple\"\n                  :model-value=\"draft.includes(String(record.key))\"\n                  :disabled=\"!isSelectable(String(record.key), record.selectable)\"\n                  :aria-label=\"\n                    t(\n                      'table_select.select_record',\n                      { label: labels[String(record.key)] ?? String(record.key) },\n                      'Select :label',\n                    )\n                  \"\n                  @update:model-value=\"toggle(String(record.key))\"\n                />\n                <input\n                  v-else\n                  type=\"radio\"\n                  :name=\"`${props.component.statePath}-picker`\"\n                  class=\"accent-primary size-4\"\n                  :checked=\"draft.includes(String(record.key))\"\n                  :disabled=\"!isSelectable(String(record.key), record.selectable)\"\n                  :aria-label=\"\n                    t(\n                      'table_select.select_record',\n                      { label: labels[String(record.key)] ?? String(record.key) },\n                      'Select :label',\n                    )\n                  \"\n                  @change=\"toggle(String(record.key))\"\n                />\n              </TableCell>\n              <TableCell v-for=\"column in columns\" :key=\"column.name\">\n                <TableCellContent\n                  v-if=\"record.cells[column.name]\"\n                  :column=\"column\"\n                  :cell=\"record.cells[column.name]!\"\n                  :record-key=\"record.key\"\n                  token=\"\"\n                  :component=\"`picker:${props.component.statePath}`\"\n                />\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n      <p v-if=\"atMax\" class=\"text-muted-foreground text-sm\" role=\"status\">\n        {{\n          choice(\n            'table_select.max_reached',\n            props.component.maxItems ?? 0,\n            { count: props.component.maxItems ?? 0 },\n            'You can select up to :count records.',\n          )\n        }}\n      </p>\n      <DialogFooter class=\"items-center sm:justify-between\">\n        <nav\n          v-if=\"paging\"\n          class=\"flex items-center gap-2\"\n          :aria-label=\"t('pagination', {}, 'Pagination')\"\n        >\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon-sm\"\n            :disabled=\"!paging.hasPrevious || loading\"\n            :aria-label=\"t('table.previous', {}, 'Previous')\"\n            @click=\"goTo(paging.page - 1)\"\n            ><ChevronLeftIcon class=\"rtl:rotate-180\"\n          /></Button>\n          <span class=\"text-muted-foreground text-sm\">{{\n            paging.total !== undefined\n              ? t(\n                  'table.showing',\n                  { first: paging.from, last: paging.to, total: paging.total },\n                  'Showing :first–:last of :total',\n                )\n              : `${paging.from}–${paging.to}`\n          }}</span>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon-sm\"\n            :disabled=\"!paging.hasNext || loading\"\n            :aria-label=\"t('table.next', {}, 'Next')\"\n            @click=\"goTo(paging.page + 1)\"\n            ><ChevronRightIcon class=\"rtl:rotate-180\"\n          /></Button>\n        </nav>\n        <span v-else />\n        <div class=\"flex gap-2\">\n          <Button v-if=\"draft.length > 0\" type=\"button\" variant=\"ghost\" @click=\"draft = []\">{{\n            t('table_select.clear', {}, 'Clear selection')\n          }}</Button>\n          <Button type=\"button\" variant=\"outline\" @click=\"emit('close')\">{{\n            t('cancel', {}, 'Cancel')\n          }}</Button>\n          <Button type=\"button\" @click=\"confirm\">{{\n            props.component.modalSubmitActionLabel ?? t('table_select.confirm', {}, 'Select')\n          }}</Button>\n        </div>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalTablePicker.js","names":["_sfc_main","ModalTablePicker_vue_vue_type_script_setup_true_lang_default","ModalTablePicker_default"],"sources":["../../../src/components/fields/ModalTablePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ModalTableSelectResponse, ModalTableSelectSchema, TableQuery } from '@alfakit/core'\nimport {\n  FILTERS_MODAL_WIDTH_CLASSES,\n  debounce,\n  modalTablePaging,\n  toggleModalTableKey,\n} from '@alfakit/core'\nimport {\n  ArrowDownIcon,\n  ArrowUpDownIcon,\n  ArrowUpIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  SearchIcon,\n} from '@lucide/vue'\nimport { computed, onScopeDispose, ref, watch } from 'vue'\nimport { useChoice, useFormatter, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useFormStore } from '../form/form-context'\nimport TableCellContent from '../table/TableCellContent.vue'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogFooter from '../ui/DialogFooter.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport Input from '../ui/Input.vue'\nimport Skeleton from '../ui/Skeleton.vue'\nimport Table from '../ui/Table.vue'\nimport TableBody from '../ui/TableBody.vue'\nimport TableCell from '../ui/TableCell.vue'\nimport TableHead from '../ui/TableHead.vue'\nimport TableHeader from '../ui/TableHeader.vue'\nimport TableRow from '../ui/TableRow.vue'\nimport ModalTablePickerFilters from './ModalTablePickerFilters.vue'\n\nconst props = defineProps<{ component: ModalTableSelectSchema; initial: string[] }>()\nconst emit = defineEmits<{\n  close: []\n  confirm: [keys: string[], labels: Record<string, string>]\n}>()\nconst t = useT()\nconst format = useFormatter()\nconst choice = useChoice()\nconst form = useFormStore()\nconst multiple = computed(() => Boolean(props.component.multiple))\nconst query = ref<TableQuery>({})\nconst response = ref<ModalTableSelectResponse | null>(null)\nconst failed = ref(false)\nconst loading = ref(true)\nconst draft = ref<string[]>([...props.initial])\nconst labels = ref<Record<string, string>>({})\nconst search = ref('')\nlet controller: AbortController | null = null\n\nconst load = () => {\n  controller?.abort()\n  const current = new AbortController()\n  controller = current\n  loading.value = true\n\n  form\n    .modalTable(\n      props.component.statePath,\n      props.component.tableStateIdentifier,\n      query.value,\n      current.signal,\n    )\n    .then((next) => {\n      if (!next) return\n      response.value = next\n      labels.value = { ...labels.value, ...next.labels }\n      failed.value = false\n    })\n    .catch((error: unknown) => {\n      if ((error as { name?: string }).name !== 'AbortError') failed.value = true\n    })\n    .finally(() => {\n      if (!current.signal.aborted) loading.value = false\n    })\n}\n\nwatch(query, load, { immediate: true, deep: true })\nonScopeDispose(() => controller?.abort())\n\nconst table = computed(() => response.value?.table)\nconst pushSearch = debounce((next: string) => {\n  query.value = { ...query.value, search: next || null, page: null }\n}, 400)\nonScopeDispose(() => pushSearch.cancel())\n\nconst columns = computed(() =>\n  table.value\n    ? table.value.columns.filter((column) => table.value!.visibleColumns.includes(column.name))\n    : [],\n)\nconst records = computed(() => table.value?.records ?? [])\nconst paging = computed(() => modalTablePaging(table.value?.pagination))\nconst atMax = computed(\n  () =>\n    multiple.value &&\n    props.component.maxItems != null &&\n    draft.value.length >= props.component.maxItems,\n)\nconst hasToolbar = computed(\n  () => Boolean(table.value?.searchable) || (table.value?.filters?.length ?? 0) > 0,\n)\n\nconst toggle = (key: string) => {\n  draft.value = toggleModalTableKey(draft.value, key, multiple.value, props.component.maxItems)\n}\nconst isSelectable = (key: string, selectable: boolean | undefined) =>\n  selectable === true && (draft.value.includes(key) || !atMax.value)\nconst sort = (column: string) => {\n  const direction =\n    table.value?.sort?.column === column && table.value.sort.direction === 'asc' ? 'desc' : 'asc'\n  query.value = { ...query.value, sort: column, direction, page: null }\n}\nconst ariaSortOf = (column: string) =>\n  table.value?.sort?.column === column\n    ? table.value.sort.direction === 'asc'\n      ? 'ascending'\n      : 'descending'\n    : undefined\nconst goTo = (page: number) => {\n  query.value = { ...query.value, page }\n}\nconst confirm = () =>\n  emit(\n    'confirm',\n    draft.value,\n    Object.fromEntries(\n      draft.value.filter((key) => labels.value[key]).map((key) => [key, labels.value[key]!]),\n    ),\n  )\n</script>\n\n<template>\n  <Dialog :open=\"true\" @update:open=\"(open) => !open && emit('close')\">\n    <DialogContent\n      :class=\"\n        cn(\n          'flex max-h-[90vh] flex-col gap-4',\n          FILTERS_MODAL_WIDTH_CLASSES[props.component.modalWidth ?? '3xl'] ?? 'sm:max-w-3xl',\n        )\n      \"\n      data-slot=\"modal-table-select-dialog\"\n    >\n      <DialogHeader>\n        <DialogTitle>{{ props.component.modalHeading }}</DialogTitle>\n        <!-- Escaped on the server (`Html::from()`), like action modal descriptions. -->\n        <p\n          v-if=\"props.component.modalDescription\"\n          class=\"text-muted-foreground text-sm\"\n          data-slot=\"modal-table-select-description\"\n          v-html=\"props.component.modalDescription\"\n        />\n        <DialogDescription aria-live=\"polite\">{{\n          choice('table.selected', draft.length, { count: draft.length }, ':count selected')\n        }}</DialogDescription>\n      </DialogHeader>\n      <div v-if=\"table && hasToolbar\" class=\"flex flex-col gap-3\">\n        <div v-if=\"table.searchable\" class=\"relative\">\n          <SearchIcon\n            class=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n          />\n          <Input\n            type=\"search\"\n            :model-value=\"search\"\n            :aria-label=\"table.searchPlaceholder\"\n            :placeholder=\"table.searchPlaceholder\"\n            class=\"ps-8\"\n            @update:model-value=\"\n              (next) => {\n                search = String(next)\n                pushSearch(String(next))\n              }\n            \"\n          />\n        </div>\n        <ModalTablePickerFilters\n          v-if=\"(table.filters?.length ?? 0) > 0\"\n          :table=\"table\"\n          :owner=\"form\"\n          :path=\"props.component.statePath\"\n          @change=\"(filters) => (query = { ...query, filters, page: null })\"\n        />\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-auto rounded-md border\" :aria-busy=\"loading\">\n        <p v-if=\"failed\" role=\"alert\" class=\"text-destructive p-6 text-center text-sm\">\n          {{ t('table_select.load_failed', {}, \"Couldn't load the records.\") }}\n        </p>\n        <div v-else-if=\"!table\" class=\"flex flex-col gap-2 p-4\" aria-hidden=\"true\">\n          <Skeleton class=\"h-8 w-full\" />\n          <Skeleton class=\"h-8 w-full\" />\n          <Skeleton class=\"h-8 w-full\" />\n        </div>\n        <p v-else-if=\"records.length === 0\" class=\"text-muted-foreground p-6 text-center text-sm\">\n          {{ table.emptyState.heading }}\n        </p>\n        <Table v-else :class=\"cn(loading && 'opacity-60')\">\n          <TableHeader>\n            <TableRow>\n              <TableHead class=\"w-10\"\n                ><span class=\"sr-only\">{{\n                  t('table.select_row', {}, 'Select row')\n                }}</span></TableHead\n              >\n              <TableHead\n                v-for=\"column in columns\"\n                :key=\"column.name\"\n                :aria-sort=\"ariaSortOf(column.name)\"\n              >\n                <button\n                  v-if=\"column.sortable\"\n                  type=\"button\"\n                  class=\"inline-flex items-center gap-1\"\n                  @click=\"sort(column.name)\"\n                >\n                  {{ column.label }}\n                  <template v-if=\"table.sort?.column === column.name\">\n                    <ArrowUpIcon v-if=\"table.sort.direction === 'asc'\" class=\"size-3.5\" />\n                    <ArrowDownIcon v-else class=\"size-3.5\" />\n                  </template>\n                  <ArrowUpDownIcon v-else class=\"text-muted-foreground size-3.5\" />\n                </button>\n                <template v-else>{{ column.label }}</template>\n              </TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow\n              v-for=\"record in records\"\n              :key=\"String(record.key)\"\n              :data-state=\"draft.includes(String(record.key)) ? 'selected' : undefined\"\n              :class=\"cn(isSelectable(String(record.key), record.selectable) && 'cursor-pointer')\"\n              @click=\"\n                isSelectable(String(record.key), record.selectable) && toggle(String(record.key))\n              \"\n            >\n              <TableCell class=\"w-10\" @click.stop>\n                <Checkbox\n                  v-if=\"multiple\"\n                  :model-value=\"draft.includes(String(record.key))\"\n                  :disabled=\"!isSelectable(String(record.key), record.selectable)\"\n                  :aria-label=\"\n                    t(\n                      'table_select.select_record',\n                      { label: labels[String(record.key)] ?? String(record.key) },\n                      'Select :label',\n                    )\n                  \"\n                  @update:model-value=\"toggle(String(record.key))\"\n                />\n                <input\n                  v-else\n                  type=\"radio\"\n                  :name=\"`${props.component.statePath}-picker`\"\n                  class=\"accent-primary size-4\"\n                  :checked=\"draft.includes(String(record.key))\"\n                  :disabled=\"!isSelectable(String(record.key), record.selectable)\"\n                  :aria-label=\"\n                    t(\n                      'table_select.select_record',\n                      { label: labels[String(record.key)] ?? String(record.key) },\n                      'Select :label',\n                    )\n                  \"\n                  @change=\"toggle(String(record.key))\"\n                />\n              </TableCell>\n              <TableCell v-for=\"column in columns\" :key=\"column.name\">\n                <TableCellContent\n                  v-if=\"record.cells[column.name]\"\n                  :column=\"column\"\n                  :cell=\"record.cells[column.name]!\"\n                  :record-key=\"record.key\"\n                  token=\"\"\n                  :component=\"`picker:${props.component.statePath}`\"\n                />\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n      <p v-if=\"atMax\" class=\"text-muted-foreground text-sm\" role=\"status\">\n        {{\n          choice(\n            'table_select.max_reached',\n            props.component.maxItems ?? 0,\n            { count: props.component.maxItems ?? 0 },\n            'You can select up to :count records.',\n          )\n        }}\n      </p>\n      <DialogFooter class=\"items-center sm:justify-between\">\n        <nav\n          v-if=\"paging\"\n          class=\"flex items-center gap-2\"\n          :aria-label=\"t('pagination', {}, 'Pagination')\"\n        >\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon-sm\"\n            :disabled=\"!paging.hasPrevious || loading\"\n            :aria-label=\"t('table.previous', {}, 'Previous')\"\n            @click=\"goTo(paging.page - 1)\"\n            ><ChevronLeftIcon class=\"rtl:rotate-180\"\n          /></Button>\n          <span class=\"text-muted-foreground text-sm\">{{\n            paging.total !== undefined\n              ? t(\n                  'table.showing',\n                  {\n                    first: format.number(paging.from),\n                    last: format.number(paging.to),\n                    total: format.number(paging.total),\n                  },\n                  'Showing :first–:last of :total',\n                )\n              : `${paging.from}–${paging.to}`\n          }}</span>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon-sm\"\n            :disabled=\"!paging.hasNext || loading\"\n            :aria-label=\"t('table.next', {}, 'Next')\"\n            @click=\"goTo(paging.page + 1)\"\n            ><ChevronRightIcon class=\"rtl:rotate-180\"\n          /></Button>\n        </nav>\n        <span v-else />\n        <div class=\"flex gap-2\">\n          <Button v-if=\"draft.length > 0\" type=\"button\" variant=\"ghost\" @click=\"draft = []\">{{\n            t('table_select.clear', {}, 'Clear selection')\n          }}</Button>\n          <Button type=\"button\" variant=\"outline\" @click=\"emit('close')\">{{\n            t('cancel', {}, 'Cancel')\n          }}</Button>\n          <Button type=\"button\" @click=\"confirm\">{{\n            props.component.modalSubmitActionLabel ?? t('table_select.confirm', {}, 'Select')\n          }}</Button>\n        </div>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":""}

package/dist/components/fields/ModalTablePicker.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTablePicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ModalTablePicker.vue"],"names":[],"mappings":"AA6VA,OAAO,KAAK,EAA4B,sBAAsB,EAAc,MAAM,eAAe,CAAA;AAsCjG,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,sBAAsB,CAAC;IAAC,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;;;;;;;;AAu3B5E,wBAOG"}
+{"version":3,"file":"ModalTablePicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ModalTablePicker.vue"],"names":[],"mappings":"AAkWA,OAAO,KAAK,EAA4B,sBAAsB,EAAc,MAAM,eAAe,CAAA;AAsCjG,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,sBAAsB,CAAC;IAAC,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;;;;;;;;AA63B5E,wBAOG"}

package/dist/components/fields/ModalTablePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,27 +1,27 @@
-import { useChoice as e, useT as t } from "../../context.js";
+import { useChoice as e, useFormatter as t, useT as ee } from "../../context.js";
 import { cn as n } from "../../lib/utils.js";
 import r from "../ui/Button2.js";
-import { useFormStore as ee } from "../form/form-context.js";
-import te from "../ui/Checkbox.js";
-import ne from "../ui/Input.js";
-import re from "../ui/Table.js";
-import ie from "../ui/TableBody.js";
+import { useFormStore as te } from "../form/form-context.js";
+import ne from "../ui/Checkbox.js";
+import re from "../ui/Input.js";
+import ie from "../ui/Table.js";
+import ae from "../ui/TableBody.js";
 import i from "../ui/TableCell.js";
 import a from "../ui/TableHead.js";
-import ae from "../ui/TableHeader.js";
+import oe from "../ui/TableHeader.js";
 import o from "../ui/TableRow.js";
-import oe from "../ui/Dialog.js";
-import se from "../ui/DialogContent.js";
-import ce from "../ui/DialogDescription.js";
-import le from "../ui/DialogHeader.js";
-import ue from "../ui/DialogTitle.js";
-import de from "../table/TableCellContent.js";
-import fe from "../ui/DialogFooter.js";
+import se from "../ui/Dialog.js";
+import ce from "../ui/DialogContent.js";
+import le from "../ui/DialogDescription.js";
+import ue from "../ui/DialogHeader.js";
+import de from "../ui/DialogTitle.js";
+import fe from "../table/TableCellContent.js";
+import pe from "../ui/DialogFooter.js";
 import s from "../ui/Skeleton.js";
-import pe from "./ModalTablePickerFilters.js";
+import c from "./ModalTablePickerFilters.js";
 import { FILTERS_MODAL_WIDTH_CLASSES as me, debounce as he, modalTablePaging as ge, toggleModalTableKey as _e } 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, normalizeClass as _, onScopeDispose as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, watch as ve, withCtx as w, withModifiers as ye } from "vue";
-import { ArrowDownIcon as be, ArrowUpDownIcon as xe, ArrowUpIcon as Se, ChevronLeftIcon as T, ChevronRightIcon as Ce, SearchIcon as we } from "@lucide/vue";
+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 _, normalizeClass as v, onScopeDispose as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, watch as ve, withCtx as T, withModifiers as ye } from "vue";
+import { ArrowDownIcon as be, ArrowUpDownIcon as xe, ArrowUpIcon as Se, ChevronLeftIcon as Ce, ChevronRightIcon as we, SearchIcon as Te } from "@lucide/vue";
 //#region src/components/fields/ModalTablePicker.vue?vue&type=script&setup=true&lang.ts
 var E = ["innerHTML"], D = {
 	key: 0,
@@ -29,40 +29,40 @@ var E = ["innerHTML"], D = {
 }, O = {
 	key: 0,
 	class: "relative"
-}, k = ["aria-busy"], Te = {
+}, Ee = ["aria-busy"], De = {
 	key: 0,
 	role: "alert",
 	class: "text-destructive p-6 text-center text-sm"
-}, Ee = {
+}, Oe = {
 	key: 1,
 	class: "flex flex-col gap-2 p-4",
 	"aria-hidden": "true"
-}, De = {
+}, ke = {
 	key: 2,
 	class: "text-muted-foreground p-6 text-center text-sm"
-}, Oe = { class: "sr-only" }, ke = ["onClick"], Ae = [
+}, Ae = { class: "sr-only" }, je = ["onClick"], Me = [
 	"name",
 	"checked",
 	"disabled",
 	"aria-label",
 	"onChange"
-], je = {
+], Ne = {
 	key: 1,
 	class: "text-muted-foreground text-sm",
 	role: "status"
-}, Me = ["aria-label"], Ne = { class: "text-muted-foreground text-sm" }, Pe = { key: 1 }, Fe = { class: "flex gap-2" }, A = /*@__PURE__*/ g({
+}, Pe = ["aria-label"], Fe = { class: "text-muted-foreground text-sm" }, Ie = { key: 1 }, Le = { class: "flex gap-2" }, k = /*@__PURE__*/ _({
 	__name: "ModalTablePicker",
 	props: {
 		component: {},
 		initial: {}
 	},
 	emits: ["close", "confirm"],
-	setup(g, { emit: A }) {
-		let j = g, M = A, N = t(), P = e(), F = ee(), I = l(() => !!j.component.multiple), L = b({}), R = b(null), z = b(!1), B = b(!0), V = b([...j.initial]), H = b({}), U = b(""), W = null;
+	setup(_, { emit: k }) {
+		let A = _, j = k, M = ee(), N = t(), P = e(), F = te(), I = u(() => !!A.component.multiple), L = x({}), R = x(null), z = x(!1), B = x(!0), V = x([...A.initial]), H = x({}), U = x(""), W = null;
 		ve(L, () => {
 			W?.abort();
 			let e = new AbortController();
-			W = e, B.value = !0, F.modalTable(j.component.statePath, j.component.tableStateIdentifier, L.value, e.signal).then((e) => {
+			W = e, B.value = !0, F.modalTable(A.component.statePath, A.component.tableStateIdentifier, L.value, e.signal).then((e) => {
 				e && (R.value = e, H.value = {
 					...H.value,
 					...e.labels
@@ -75,18 +75,18 @@ var E = ["innerHTML"], D = {
 		}, {
 			immediate: !0,
 			deep: !0
-		}), v(() => W?.abort());
-		let G = l(() => R.value?.table), K = he((e) => {
+		}), y(() => W?.abort());
+		let G = u(() => R.value?.table), K = he((e) => {
 			L.value = {
 				...L.value,
 				search: e || null,
 				page: null
 			};
 		}, 400);
-		v(() => K.cancel());
-		let q = l(() => G.value ? G.value.columns.filter((e) => G.value.visibleColumns.includes(e.name)) : []), J = l(() => G.value?.records ?? []), Y = l(() => ge(G.value?.pagination)), X = l(() => I.value && j.component.maxItems != null && V.value.length >= j.component.maxItems), Ie = l(() => !!G.value?.searchable || (G.value?.filters?.length ?? 0) > 0), Z = (e) => {
-			V.value = _e(V.value, e, I.value, j.component.maxItems);
-		}, Q = (e, t) => t === !0 && (V.value.includes(e) || !X.value), Le = (e) => {
+		y(() => K.cancel());
+		let q = u(() => G.value ? G.value.columns.filter((e) => G.value.visibleColumns.includes(e.name)) : []), J = u(() => G.value?.records ?? []), Y = u(() => ge(G.value?.pagination)), X = u(() => I.value && A.component.maxItems != null && V.value.length >= A.component.maxItems), Re = u(() => !!G.value?.searchable || (G.value?.filters?.length ?? 0) > 0), Z = (e) => {
+			V.value = _e(V.value, e, I.value, A.component.maxItems);
+		}, Q = (e, t) => t === !0 && (V.value.includes(e) || !X.value), ze = (e) => {
 			let t = G.value?.sort?.column === e && G.value.sort.direction === "asc" ? "desc" : "asc";
 			L.value = {
 				...L.value,
@@ -94,58 +94,58 @@ var E = ["innerHTML"], D = {
 				direction: t,
 				page: null
 			};
-		}, Re = (e) => G.value?.sort?.column === e ? G.value.sort.direction === "asc" ? "ascending" : "descending" : void 0, $ = (e) => {
+		}, Be = (e) => G.value?.sort?.column === e ? G.value.sort.direction === "asc" ? "ascending" : "descending" : void 0, $ = (e) => {
 			L.value = {
 				...L.value,
 				page: e
 			};
-		}, ze = () => M("confirm", V.value, Object.fromEntries(V.value.filter((e) => H.value[e]).map((e) => [e, H.value[e]])));
-		return (e, t) => (y(), u(oe, {
+		}, Ve = () => j("confirm", V.value, Object.fromEntries(V.value.filter((e) => H.value[e]).map((e) => [e, H.value[e]])));
+		return (e, t) => (b(), d(se, {
 			open: !0,
-			"onUpdate:open": t[7] ||= (e) => !e && M("close")
+			"onUpdate:open": t[7] ||= (e) => !e && j("close")
 		}, {
-			default: w(() => [h(se, {
-				class: _(C(n)("flex max-h-[90vh] flex-col gap-4", C(me)[j.component.modalWidth ?? "3xl"] ?? "sm:max-w-3xl")),
+			default: T(() => [g(ce, {
+				class: v(w(n)("flex max-h-[90vh] flex-col gap-4", w(me)[A.component.modalWidth ?? "3xl"] ?? "sm:max-w-3xl")),
 				"data-slot": "modal-table-select-dialog"
 			}, {
-				default: w(() => [
-					h(le, null, {
-						default: w(() => [
-							h(ue, null, {
-								default: w(() => [m(S(j.component.modalHeading), 1)]),
+				default: T(() => [
+					g(ue, null, {
+						default: T(() => [
+							g(de, null, {
+								default: T(() => [h(C(A.component.modalHeading), 1)]),
 								_: 1
 							}),
-							j.component.modalDescription ? (y(), f("p", {
+							A.component.modalDescription ? (b(), p("p", {
 								key: 0,
 								class: "text-muted-foreground text-sm",
 								"data-slot": "modal-table-select-description",
-								innerHTML: j.component.modalDescription
-							}, null, 8, E)) : d("", !0),
-							h(ce, { "aria-live": "polite" }, {
-								default: w(() => [m(S(C(P)("table.selected", V.value.length, { count: V.value.length }, ":count selected")), 1)]),
+								innerHTML: A.component.modalDescription
+							}, null, 8, E)) : f("", !0),
+							g(le, { "aria-live": "polite" }, {
+								default: T(() => [h(C(w(P)("table.selected", V.value.length, { count: V.value.length }, ":count selected")), 1)]),
 								_: 1
 							})
 						]),
 						_: 1
 					}),
-					G.value && Ie.value ? (y(), f("div", D, [G.value.searchable ? (y(), f("div", O, [h(C(we), { class: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2" }), h(ne, {
+					G.value && Re.value ? (b(), p("div", D, [G.value.searchable ? (b(), p("div", O, [g(w(Te), { class: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2" }), g(re, {
 						type: "search",
 						"model-value": U.value,
 						"aria-label": G.value.searchPlaceholder,
 						placeholder: G.value.searchPlaceholder,
 						class: "ps-8",
 						"onUpdate:modelValue": t[0] ||= (e) => {
-							U.value = String(e), C(K)(String(e));
+							U.value = String(e), w(K)(String(e));
 						}
 					}, null, 8, [
 						"model-value",
 						"aria-label",
 						"placeholder"
-					])])) : d("", !0), (G.value.filters?.length ?? 0) > 0 ? (y(), u(pe, {
+					])])) : f("", !0), (G.value.filters?.length ?? 0) > 0 ? (b(), d(c, {
 						key: 1,
 						table: G.value,
-						owner: C(F),
-						path: j.component.statePath,
+						owner: w(F),
+						path: A.component.statePath,
 						onChange: t[1] ||= (e) => L.value = {
 							...L.value,
 							filters: e,
@@ -155,90 +155,90 @@ var E = ["innerHTML"], D = {
 						"table",
 						"owner",
 						"path"
-					])) : d("", !0)])) : d("", !0),
-					p("div", {
+					])) : f("", !0)])) : f("", !0),
+					m("div", {
 						class: "min-h-0 flex-1 overflow-auto rounded-md border",
 						"aria-busy": B.value
-					}, [z.value ? (y(), f("p", Te, S(C(N)("table_select.load_failed", {}, "Couldn't load the records.")), 1)) : G.value ? J.value.length === 0 ? (y(), f("p", De, S(G.value.emptyState.heading), 1)) : (y(), u(re, {
+					}, [z.value ? (b(), p("p", De, C(w(M)("table_select.load_failed", {}, "Couldn't load the records.")), 1)) : G.value ? J.value.length === 0 ? (b(), p("p", ke, C(G.value.emptyState.heading), 1)) : (b(), d(ie, {
 						key: 3,
-						class: _(C(n)(B.value && "opacity-60"))
+						class: v(w(n)(B.value && "opacity-60"))
 					}, {
-						default: w(() => [h(ae, null, {
-							default: w(() => [h(o, null, {
-								default: w(() => [h(a, { class: "w-10" }, {
-									default: w(() => [p("span", Oe, S(C(N)("table.select_row", {}, "Select row")), 1)]),
+						default: T(() => [g(oe, null, {
+							default: T(() => [g(o, null, {
+								default: T(() => [g(a, { class: "w-10" }, {
+									default: T(() => [m("span", Ae, C(w(M)("table.select_row", {}, "Select row")), 1)]),
 									_: 1
-								}), (y(!0), f(c, null, x(q.value, (e) => (y(), u(a, {
+								}), (b(!0), p(l, null, S(q.value, (e) => (b(), d(a, {
 									key: e.name,
-									"aria-sort": Re(e.name)
+									"aria-sort": Be(e.name)
 								}, {
-									default: w(() => [e.sortable ? (y(), f("button", {
+									default: T(() => [e.sortable ? (b(), p("button", {
 										key: 0,
 										type: "button",
 										class: "inline-flex items-center gap-1",
-										onClick: (t) => Le(e.name)
-									}, [m(S(e.label) + " ", 1), G.value.sort?.column === e.name ? (y(), f(c, { key: 0 }, [G.value.sort.direction === "asc" ? (y(), u(C(Se), {
+										onClick: (t) => ze(e.name)
+									}, [h(C(e.label) + " ", 1), G.value.sort?.column === e.name ? (b(), p(l, { key: 0 }, [G.value.sort.direction === "asc" ? (b(), d(w(Se), {
 										key: 0,
 										class: "size-3.5"
-									})) : (y(), u(C(be), {
+									})) : (b(), d(w(be), {
 										key: 1,
 										class: "size-3.5"
-									}))], 64)) : (y(), u(C(xe), {
+									}))], 64)) : (b(), d(w(xe), {
 										key: 1,
 										class: "text-muted-foreground size-3.5"
-									}))], 8, ke)) : (y(), f(c, { key: 1 }, [m(S(e.label), 1)], 64))]),
+									}))], 8, je)) : (b(), p(l, { key: 1 }, [h(C(e.label), 1)], 64))]),
 									_: 2
 								}, 1032, ["aria-sort"]))), 128))]),
 								_: 1
 							})]),
 							_: 1
-						}), h(ie, null, {
-							default: w(() => [(y(!0), f(c, null, x(J.value, (e) => (y(), u(o, {
+						}), g(ae, null, {
+							default: T(() => [(b(!0), p(l, null, S(J.value, (e) => (b(), d(o, {
 								key: String(e.key),
 								"data-state": V.value.includes(String(e.key)) ? "selected" : void 0,
-								class: _(C(n)(Q(String(e.key), e.selectable) && "cursor-pointer")),
+								class: v(w(n)(Q(String(e.key), e.selectable) && "cursor-pointer")),
 								onClick: (t) => Q(String(e.key), e.selectable) && Z(String(e.key))
 							}, {
-								default: w(() => [h(i, {
+								default: T(() => [g(i, {
 									class: "w-10",
 									onClick: t[2] ||= ye(() => {}, ["stop"])
 								}, {
-									default: w(() => [I.value ? (y(), u(te, {
+									default: T(() => [I.value ? (b(), d(ne, {
 										key: 0,
 										"model-value": V.value.includes(String(e.key)),
 										disabled: !Q(String(e.key), e.selectable),
-										"aria-label": C(N)("table_select.select_record", { label: H.value[String(e.key)] ?? String(e.key) }, "Select :label"),
+										"aria-label": w(M)("table_select.select_record", { label: H.value[String(e.key)] ?? String(e.key) }, "Select :label"),
 										"onUpdate:modelValue": (t) => Z(String(e.key))
 									}, null, 8, [
 										"model-value",
 										"disabled",
 										"aria-label",
 										"onUpdate:modelValue"
-									])) : (y(), f("input", {
+									])) : (b(), p("input", {
 										key: 1,
 										type: "radio",
-										name: `${j.component.statePath}-picker`,
+										name: `${A.component.statePath}-picker`,
 										class: "accent-primary size-4",
 										checked: V.value.includes(String(e.key)),
 										disabled: !Q(String(e.key), e.selectable),
-										"aria-label": C(N)("table_select.select_record", { label: H.value[String(e.key)] ?? String(e.key) }, "Select :label"),
+										"aria-label": w(M)("table_select.select_record", { label: H.value[String(e.key)] ?? String(e.key) }, "Select :label"),
 										onChange: (t) => Z(String(e.key))
-									}, null, 40, Ae))]),
+									}, null, 40, Me))]),
 									_: 2
-								}, 1024), (y(!0), f(c, null, x(q.value, (t) => (y(), u(i, { key: t.name }, {
-									default: w(() => [e.cells[t.name] ? (y(), u(de, {
+								}, 1024), (b(!0), p(l, null, S(q.value, (t) => (b(), d(i, { key: t.name }, {
+									default: T(() => [e.cells[t.name] ? (b(), d(fe, {
 										key: 0,
 										column: t,
 										cell: e.cells[t.name],
 										"record-key": e.key,
 										token: "",
-										component: `picker:${j.component.statePath}`
+										component: `picker:${A.component.statePath}`
 									}, null, 8, [
 										"column",
 										"cell",
 										"record-key",
 										"component"
-									])) : d("", !0)]),
+									])) : f("", !0)]),
 									_: 2
 								}, 1024))), 128))]),
 								_: 2
@@ -250,68 +250,68 @@ var E = ["innerHTML"], D = {
 							_: 1
 						})]),
 						_: 1
-					}, 8, ["class"])) : (y(), f("div", Ee, [
-						h(s, { class: "h-8 w-full" }),
-						h(s, { class: "h-8 w-full" }),
-						h(s, { class: "h-8 w-full" })
-					]))], 8, k),
-					X.value ? (y(), f("p", je, S(C(P)("table_select.max_reached", j.component.maxItems ?? 0, { count: j.component.maxItems ?? 0 }, "You can select up to :count records.")), 1)) : d("", !0),
-					h(fe, { class: "items-center sm:justify-between" }, {
-						default: w(() => [Y.value ? (y(), f("nav", {
+					}, 8, ["class"])) : (b(), p("div", Oe, [
+						g(s, { class: "h-8 w-full" }),
+						g(s, { class: "h-8 w-full" }),
+						g(s, { class: "h-8 w-full" })
+					]))], 8, Ee),
+					X.value ? (b(), p("p", Ne, C(w(P)("table_select.max_reached", A.component.maxItems ?? 0, { count: A.component.maxItems ?? 0 }, "You can select up to :count records.")), 1)) : f("", !0),
+					g(pe, { class: "items-center sm:justify-between" }, {
+						default: T(() => [Y.value ? (b(), p("nav", {
 							key: 0,
 							class: "flex items-center gap-2",
-							"aria-label": C(N)("pagination", {}, "Pagination")
+							"aria-label": w(M)("pagination", {}, "Pagination")
 						}, [
-							h(r, {
+							g(r, {
 								type: "button",
 								variant: "outline",
 								size: "icon-sm",
 								disabled: !Y.value.hasPrevious || B.value,
-								"aria-label": C(N)("table.previous", {}, "Previous"),
+								"aria-label": w(M)("table.previous", {}, "Previous"),
 								onClick: t[3] ||= (e) => $(Y.value.page - 1)
 							}, {
-								default: w(() => [h(C(T), { class: "rtl:rotate-180" })]),
+								default: T(() => [g(w(Ce), { class: "rtl:rotate-180" })]),
 								_: 1
 							}, 8, ["disabled", "aria-label"]),
-							p("span", Ne, S(Y.value.total === void 0 ? `${Y.value.from}–${Y.value.to}` : C(N)("table.showing", {
-								first: Y.value.from,
-								last: Y.value.to,
-								total: Y.value.total
+							m("span", Fe, C(Y.value.total === void 0 ? `${Y.value.from}–${Y.value.to}` : w(M)("table.showing", {
+								first: w(N).number(Y.value.from),
+								last: w(N).number(Y.value.to),
+								total: w(N).number(Y.value.total)
 							}, "Showing :first–:last of :total")), 1),
-							h(r, {
+							g(r, {
 								type: "button",
 								variant: "outline",
 								size: "icon-sm",
 								disabled: !Y.value.hasNext || B.value,
-								"aria-label": C(N)("table.next", {}, "Next"),
+								"aria-label": w(M)("table.next", {}, "Next"),
 								onClick: t[4] ||= (e) => $(Y.value.page + 1)
 							}, {
-								default: w(() => [h(C(Ce), { class: "rtl:rotate-180" })]),
+								default: T(() => [g(w(we), { class: "rtl:rotate-180" })]),
 								_: 1
 							}, 8, ["disabled", "aria-label"])
-						], 8, Me)) : (y(), f("span", Pe)), p("div", Fe, [
-							V.value.length > 0 ? (y(), u(r, {
+						], 8, Pe)) : (b(), p("span", Ie)), m("div", Le, [
+							V.value.length > 0 ? (b(), d(r, {
 								key: 0,
 								type: "button",
 								variant: "ghost",
 								onClick: t[5] ||= (e) => V.value = []
 							}, {
-								default: w(() => [m(S(C(N)("table_select.clear", {}, "Clear selection")), 1)]),
+								default: T(() => [h(C(w(M)("table_select.clear", {}, "Clear selection")), 1)]),
 								_: 1
-							})) : d("", !0),
-							h(r, {
+							})) : f("", !0),
+							g(r, {
 								type: "button",
 								variant: "outline",
-								onClick: t[6] ||= (e) => M("close")
+								onClick: t[6] ||= (e) => j("close")
 							}, {
-								default: w(() => [m(S(C(N)("cancel", {}, "Cancel")), 1)]),
+								default: T(() => [h(C(w(M)("cancel", {}, "Cancel")), 1)]),
 								_: 1
 							}),
-							h(r, {
+							g(r, {
 								type: "button",
-								onClick: ze
+								onClick: Ve
 							}, {
-								default: w(() => [m(S(j.component.modalSubmitActionLabel ?? C(N)("table_select.confirm", {}, "Select")), 1)]),
+								default: T(() => [h(C(A.component.modalSubmitActionLabel ?? w(M)("table_select.confirm", {}, "Select")), 1)]),
 								_: 1
 							})
 						])]),
@@ -325,6 +325,6 @@ var E = ["innerHTML"], D = {
 	}
 });
 //#endregion
-export { A as default };
+export { k as default };
 
 //# sourceMappingURL=ModalTablePicker.vue_vue_type_script_setup_true_lang.js.map