@eos-ui/vue 0.1.1 → 0.2.1

package/dist/components/DataGrid/EDataGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"EDataGrid.js","names":["_sfc_main","EDataGrid_vue_vue_type_script_setup_true_lang_default","EDataGrid_default"],"sources":["../../../src/components/DataGrid/EDataGrid.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"Row extends DataGridRow\">\nimport { computed, nextTick, ref, watch, type CSSProperties } from \"vue\";\nimport { PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport {\n  columnFilteringFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createFilteredRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  functionalUpdate,\n  globalFilteringFeature,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  tableFeatures,\n  useTable,\n  type ColumnDef,\n  type FilterFn,\n  type SortFn,\n} from \"@tanstack/vue-table\";\nimport { useVirtualizer } from \"@tanstack/vue-virtual\";\nimport EButton from \"../Button/EButton.vue\";\nimport ECheckbox from \"../Checkbox/ECheckbox.vue\";\nimport EEmptyState from \"../EmptyState/EEmptyState.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport EPagination from \"../Pagination/EPagination.vue\";\nimport ESelect from \"../Select/ESelect.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport EDataGridResizer from \"./EDataGridResizer.vue\";\nimport \"../Popover/EPopover.vue\";\nimport { normalizeOptions, type EOption } from \"../Select/options.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport { cellValue, compareValues, filterActive, parsePx, passesFilter } from \"./grid.js\";\nimport type {\n  DataGridColumn,\n  DataGridFilterValue,\n  DataGridQuery,\n  DataGridRow,\n  DataGridSort,\n  DataGridVirtual,\n} from \"./types.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Select/panel.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The columns, in order. See `DataGridColumn`. */\n    columns: DataGridColumn<Row>[];\n    /** The rows. Each needs a unique `id`. */\n    rows: Row[];\n    /** Names the table for screen readers and the scrolling region. Required. */\n    caption: string;\n    /** One search box over all shown columns. */\n    searchable?: boolean;\n    /** The search box's placeholder. Default \"Search all columns\". */\n    searchPlaceholder?: string;\n    /** A filter row under the headings, for columns that define a `filter`. */\n    filterable?: boolean;\n    /** Column edges can be dragged, or moved with the arrow keys. */\n    resizable?: boolean;\n    /** Keeps the first column in view while scrolling sideways. */\n    stickyFirst?: boolean;\n    /** A Columns menu to show and hide columns. */\n    columnToggle?: boolean;\n    /** A checkbox on each row and a select-all in the heading. */\n    selectable?: boolean;\n    /** Rows per page; 0 turns paging off. Default 10. */\n    pageSize?: number;\n    /** Stops the table growing past this height (any CSS length) and scrolls inside it. */\n    maxHeight?: string;\n    /** Renders only the rows in view, for thousands of rows. Replaces paging. */\n    virtual?: boolean | DataGridVirtual;\n    /** Turns rows into cards below 40rem of the grid's own width. Default on; virtual and resizable grids keep the table. */\n    cards?: boolean;\n    /** Data lives on a server: show the rows given, and report every change through `queryChange`. */\n    manual?: boolean;\n    /** With `manual`, how many rows there are in all. */\n    total?: number;\n    /** Shows placeholder rows while data loads. */\n    loading?: boolean;\n    /** The title when there are no rows. Default \"No results\". */\n    emptyTitle?: string;\n    /** The sentence under the title when there are no rows. */\n    emptyText?: string;\n    /** The glyph above the title when there are no rows. Default \"search\". */\n    emptyIcon?: IconProp;\n    /** A bare table for a short static list: no toolbar, filters, paging or footer. */\n    plain?: boolean;\n  }>(),\n  { pageSize: 10, cards: true },\n);\n\nconst emit = defineEmits<{\n  /** Sort, page, search or filters changed. With `manual`, fetch the rows this describes. */\n  queryChange: [query: DataGridQuery];\n}>();\n\nconst slots = defineSlots<{\n  [K: `cell-${string}`]: (props: { row: Row; value: unknown }) => unknown;\n  [K: `header-${string}`]: (props: { column: DataGridColumn<Row> }) => unknown;\n  /** Buttons that act on the selected rows, shown beside the count. */\n  \"bulk-actions\"?: () => unknown;\n  /** Anything else for the bar above the table. */\n  toolbar?: () => unknown;\n}>();\n\nconst sort = defineModel<DataGridSort | null>(\"sort\", { default: null });\nconst page = defineModel<number>(\"page\", { default: 1 });\nconst search = defineModel<string>(\"search\", { default: \"\" });\nconst filters = defineModel<Record<string, DataGridFilterValue>>(\"filters\", { default: () => ({}) });\nconst selected = defineModel<string[]>(\"selected\", { default: () => [] });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst uid = useUid();\nconst menuOpen = ref(false);\nconst menuTrigger = ref<{ $el: HTMLElement } | null>(null);\nwatch(\n  menuOpen,\n  async (open) => {\n    if (!open) return;\n    await nextTick();\n    const panel = document.getElementById(menuTrigger.value?.$el?.getAttribute(\"aria-controls\") ?? \"\");\n    panel?.setAttribute(\"aria-labelledby\", `${uid.value}-columns`);\n  },\n  { flush: \"post\" },\n);\n\nconst ALL = \"__e-all__\";\nconst NONE = \"__e-none__\";\n\nconst features = tableFeatures({\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  columnFilteringFeature,\n  globalFilteringFeature,\n  filteredRowModel: createFilteredRowModel(),\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  columnVisibilityFeature,\n  columnSizingFeature,\n});\n\nconst columnVisibility = ref<Record<string, boolean>>({});\nconst columnSizing = ref<Record<string, number>>({});\n\nconst sortFn: SortFn<typeof features, Row> = (a, b, id) => compareValues(a.getValue(id), b.getValue(id));\ntype GlobalFilter = { q: string; cols: string[] };\nconst globalFilterFn: FilterFn<typeof features, Row> = (row, id, f: GlobalFilter) => {\n  if (!f.cols.includes(id)) return false;\n  const v = row.getValue(id);\n  return v != null && String(v).toLowerCase().includes(f.q);\n};\n\nconst colByKey = computed(() => new Map(props.columns.map((c) => [c.key, c])));\nconst columnDefs = computed<ColumnDef<typeof features, Row>[]>(() =>\n  props.columns.map((c) => ({\n    id: c.key,\n    accessorFn: (row: Row) => cellValue(row, c),\n    header: c.label,\n    enableSorting: !!c.sortable,\n    sortDescFirst: false,\n    sortFn,\n    enableColumnFilter: !!c.filter,\n    filterFn: ((row, id, f) => passesFilter(c, row.getValue(id), f)) as FilterFn<typeof features, Row>,\n    enableResizing: c.resizable !== false,\n  })),\n);\n\nconst vopt = computed(() =>\n  props.virtual ? { rowHeight: 48, height: 440, overscan: 8, ...(props.virtual === true ? {} : props.virtual) } : null,\n);\nconst pageSize = computed(() => (vopt.value || props.plain ? 0 : (props.pageSize ?? 10)));\nconst paging = computed(() => pageSize.value > 0 && !props.manual);\nconst resizable = computed(() => !!props.resizable && !props.plain);\nconst cards = computed(() => props.cards !== false && !vopt.value && !resizable.value);\nconst q = computed(() => search.value.trim().toLowerCase());\nconst anyFilter = computed(() => Object.values(filters.value).some(filterActive));\n\nconst table = useTable({\n  features,\n  columns: columnDefs,\n  data: computed(() => props.rows),\n  getRowId: (row: Row) => String(row.id),\n  enableMultiSort: false,\n  enableSubRowSelection: false,\n  autoResetPageIndex: false,\n  manualSorting: computed(() => !!props.manual),\n  manualFiltering: computed(() => !!props.manual),\n  manualPagination: computed(() => !paging.value),\n  rowCount: computed(() => (props.manual ? (props.total ?? props.rows.length) : undefined)),\n  globalFilterFn,\n  state: computed(() => ({\n    sorting: sort.value ? [{ id: sort.value.key, desc: sort.value.dir === \"desc\" }] : [],\n    columnFilters: Object.entries(filters.value)\n      .filter(([key, value]) => colByKey.value.has(key) && filterActive(value))\n      .map(([id, value]) => ({ id, value })),\n    globalFilter: q.value\n      ? ({\n          q: q.value,\n          cols: props.columns.filter((c) => columnVisibility.value[c.key] !== false).map((c) => c.key),\n        } satisfies GlobalFilter)\n      : undefined,\n    rowSelection: Object.fromEntries(selected.value.map((id) => [id, true])),\n    columnVisibility: columnVisibility.value,\n    columnSizing: columnSizing.value,\n    pagination: { pageIndex: Math.max(0, page.value - 1), pageSize: pageSize.value || 1 },\n  })),\n  onSortingChange: (updater) => {\n    const next = functionalUpdate(updater, sort.value ? [{ id: sort.value.key, desc: sort.value.dir === \"desc\" }] : []);\n    const first = next[0];\n    sort.value = first ? { key: first.id, dir: first.desc ? \"desc\" : \"asc\" } : null;\n    page.value = 1;\n  },\n  onRowSelectionChange: (updater) => {\n    const next = functionalUpdate(updater, Object.fromEntries(selected.value.map((id) => [id, true])));\n    selected.value = Object.keys(next).filter((k) => next[k]);\n  },\n  onColumnVisibilityChange: (updater) => {\n    columnVisibility.value = functionalUpdate(updater, columnVisibility.value);\n  },\n  onColumnSizingChange: (updater) => {\n    columnSizing.value = functionalUpdate(updater, columnSizing.value);\n  },\n});\n\nconst view = computed(() => table.getRowModel().rows);\nconst total = computed(() =>\n  props.manual ? (props.total ?? props.rows.length) : table.getPrePaginatedRowModel().rows.length,\n);\nconst pages = computed(() => (pageSize.value > 0 ? Math.max(1, Math.ceil(total.value / pageSize.value)) : 1));\nconst cur = computed(() => Math.min(page.value, pages.value));\nwatch(pages, (n) => {\n  if (page.value > n) page.value = n;\n});\nconst cols = computed(() =>\n  table\n    .getVisibleLeafColumns()\n    .map((c) => colByKey.value.get(c.id))\n    .filter((c): c is DataGridColumn<Row> => !!c),\n);\nconst hasFilterRow = computed(() => !!props.filterable && !props.plain && cols.value.some((c) => c.filter));\nconst colCount = computed(() => cols.value.length + (props.selectable ? 1 : 0));\nconst from = computed(() =>\n  total.value === 0 ? 0 : (cur.value - 1) * (pageSize.value > 0 ? pageSize.value : total.value) + 1,\n);\nconst to = computed(() => (pageSize.value > 0 ? Math.min(total.value, cur.value * pageSize.value) : total.value));\nconst sortedCol = computed(() => (sort.value ? colByKey.value.get(sort.value.key) : undefined));\nconst nPicked = computed(() => selected.value.length);\nconst allOn = computed(() => view.value.length > 0 && view.value.every((r) => r.getIsSelected()));\nconst someOn = computed(() => view.value.some((r) => r.getIsSelected()));\n\nconst scrollEl = ref<HTMLElement | null>(null);\nconst virtualizer = useVirtualizer(\n  computed(() => ({\n    count: vopt.value ? view.value.length : 0,\n    getScrollElement: () => scrollEl.value,\n    estimateSize: () => vopt.value?.rowHeight ?? 48,\n    overscan: vopt.value?.overscan ?? 8,\n    getItemKey: (i: number) => view.value[i]?.id ?? i,\n    initialRect: { width: 0, height: vopt.value?.height ?? 0 },\n  })),\n);\nconst items = computed(() => (vopt.value ? virtualizer.value.getVirtualItems() : []));\nconst shown = computed(() => (vopt.value ? items.value.flatMap((i) => (view.value[i.index] ? [i] : [])) : []));\nconst spaceTop = computed(() => items.value[0]?.start ?? 0);\nconst spaceBottom = computed(() => {\n  const last = items.value[items.value.length - 1];\n  return last ? Math.max(0, virtualizer.value.getTotalSize() - last.end) : 0;\n});\nconst rowsToRender = computed(() =>\n  vopt.value\n    ? shown.value.map((i) => ({ row: view.value[i.index]!, index: i.index }))\n    : view.value.map((row, index) => ({ row, index })),\n);\n\nconst cellProps = (row: (typeof view.value)[number], c: DataGridColumn<Row>) => ({\n  row: row.original,\n  value: row.getValue(c.key),\n});\n\nconst fixedLayout = computed(() => resizable.value || !!vopt.value || cols.value.some((c) => c.width));\nconst stickyLeft = computed(() => (props.selectable ? 52 : 0));\nconst widthOf = (c: DataGridColumn<Row>) => columnSizing.value[c.key] || parsePx(c.width) || undefined;\nconst minTable = computed(\n  () => (props.selectable ? 52 : 0) + cols.value.reduce((s, c) => s + (widthOf(c) || c.minWidth || 96), 0),\n);\nconst stick = (i: number) => !!props.stickyFirst && i === 0;\nconst stickStyle = (i: number): CSSProperties | undefined =>\n  stick(i) ? { insetInlineStart: `${stickyLeft.value}px` } : undefined;\nconst tableStyle = computed(\n  () =>\n    ({\n      tableLayout: fixedLayout.value ? \"fixed\" : undefined,\n      \"--e-grid-min-w\": fixedLayout.value ? `${minTable.value}px` : undefined,\n      \"--e-row-h\": vopt.value ? `${vopt.value.rowHeight}px` : undefined,\n    }) as CSSProperties,\n);\nconst scrollStyle = computed(\n  () =>\n    (vopt.value\n      ? { height: `${vopt.value.height}px` }\n      : props.maxHeight\n        ? { \"--e-grid-max-h\": props.maxHeight }\n        : undefined) as CSSProperties | undefined,\n);\nconst role = (r: string) => (cards.value ? r : undefined);\n\nconst sortables = computed(() => props.columns.filter((c) => c.sortable));\nconst sortOptions = computed<EOption[]>(() => [\n  { value: NONE, label: t(\"sortBy\") },\n  ...sortables.value.flatMap((c) =>\n    ([\"asc\", \"desc\"] as const).map((d) => ({\n      value: `${c.key}:${d}`,\n      label: `${c.label}, ${t(d === \"asc\" ? \"ascending\" : \"descending\")}`,\n    })),\n  ),\n]);\nconst sortSelectValue = computed(() => (sort.value ? `${sort.value.key}:${sort.value.dir}` : NONE));\nconst showSortSelect = computed(() => cards.value && sortables.value.length > 0);\nconst hasToolbar = computed(() => !!slots.toolbar);\nconst barOther = computed(\n  () => !!props.searchable || !!props.columnToggle || nPicked.value > 0 || anyFilter.value || hasToolbar.value,\n);\nconst showBar = computed(() => !props.plain && (barOther.value || showSortSelect.value));\n\nfunction onSearch(e: Event) {\n  search.value = (e.target as HTMLInputElement).value;\n  page.value = 1;\n}\nfunction setFilter(key: string, value: DataGridFilterValue) {\n  filters.value = { ...filters.value, [key]: value };\n  page.value = 1;\n}\nfunction clearFilters() {\n  filters.value = {};\n  search.value = \"\";\n  page.value = 1;\n}\nfunction chooseSort(v: string) {\n  if (v === NONE) sort.value = null;\n  else {\n    const at = v.lastIndexOf(\":\");\n    sort.value = { key: v.slice(0, at), dir: v.slice(at + 1) === \"desc\" ? \"desc\" : \"asc\" };\n  }\n  page.value = 1;\n}\nfunction setWidth(key: string, px: number) {\n  table.setColumnSizing((old) => ({ ...old, [key]: px }));\n}\nfunction resetWidth(key: string) {\n  table.setColumnSizing((old) => {\n    const next = { ...old };\n    delete next[key];\n    return next;\n  });\n}\nconst numberFilter = (key: string) => {\n  const f = filters.value[key];\n  return typeof f === \"object\" ? f : { min: \"\", max: \"\" };\n};\nconst textFilter = (key: string) => {\n  const f = filters.value[key];\n  return typeof f === \"string\" ? f : \"\";\n};\nconst selectOptions = (c: DataGridColumn<Row>): EOption[] => [\n  { value: ALL, label: t(\"all\") },\n  ...normalizeOptions(c.filter?.type === \"select\" ? c.filter.options : []),\n];\n\nwatch([sort, page, search, filters], () => {\n  emit(\"queryChange\", {\n    sort: sort.value,\n    page: page.value,\n    pageSize: pageSize.value,\n    search: search.value,\n    filters: filters.value,\n  });\n});\n</script>\n\n<template>\n  <div class=\"e-grid\" :class=\"{ 'e-grid--plain': plain, 'e-grid--cards': cards }\">\n    <div class=\"e-grid-frame\">\n      <div v-if=\"showBar\" class=\"e-grid-bar\" :class=\"{ 'e-grid-bar--sortonly': !barOther }\">\n        <div v-if=\"searchable\" class=\"e-input-wrap e-grid-search\">\n          <span class=\"e-affix e-affix--pre\"><EIcon name=\"search\" /></span>\n          <input\n            class=\"e-input\"\n            type=\"search\"\n            :placeholder=\"searchPlaceholder || t('searchAll')\"\n            :aria-label=\"t('searchAll')\"\n            :value=\"search\"\n            @input=\"onSearch\"\n          />\n        </div>\n        <div v-if=\"nPicked\" class=\"e-grid-picked\">\n          <span class=\"e-grid-count\">{{ t(\"selected\", { n: nPicked }) }}</span>\n          <slot name=\"bulk-actions\" />\n        </div>\n        <div v-if=\"showSortSelect\" class=\"e-grid-sortsel\">\n          <ESelect\n            bare\n            :aria-label=\"t('sortBy')\"\n            :placeholder=\"t('sortBy')\"\n            :options=\"sortOptions\"\n            :model-value=\"sortSelectValue\"\n            @update:model-value=\"chooseSort\"\n          />\n        </div>\n        <div class=\"e-grid-tools\">\n          <EButton v-if=\"anyFilter || q\" variant=\"quiet\" @click=\"clearFilters\">{{ t(\"clearFilters\") }}</EButton>\n          <PopoverRoot v-if=\"columnToggle\" v-model:open=\"menuOpen\">\n            <PopoverTrigger as-child>\n              <EButton ref=\"menuTrigger\" variant=\"outline\" :aria-label=\"t('chooseColumns')\">{{ t(\"columns\") }}</EButton>\n            </PopoverTrigger>\n            <PopoverPortal :to=\"portal\">\n              <PopoverContent\n                class=\"e-popover e-root\"\n                side=\"bottom\"\n                align=\"start\"\n                :side-offset=\"8\"\n                :collision-padding=\"16\"\n              >\n                <header class=\"e-pop-head\">\n                  <h3 :id=\"`${uid}-columns`\" class=\"e-pop-title\">{{ t(\"showColumns\") }}</h3>\n                  <PopoverClose as-child>\n                    <EIconButton icon=\"x\" :label=\"t('close')\" />\n                  </PopoverClose>\n                </header>\n                <div class=\"e-pop-body\">\n                  <ECheckbox\n                    v-for=\"column in table.getAllLeafColumns()\"\n                    :key=\"column.id\"\n                    :label=\"colByKey.get(column.id)?.label ?? column.id\"\n                    :model-value=\"column.getIsVisible()\"\n                    @update:model-value=\"column.toggleVisibility($event)\"\n                  />\n                </div>\n              </PopoverContent>\n            </PopoverPortal>\n          </PopoverRoot>\n          <slot name=\"toolbar\" />\n        </div>\n      </div>\n      <div ref=\"scrollEl\" class=\"e-grid-scroll\" :style=\"scrollStyle\" tabindex=\"0\" role=\"region\" :aria-label=\"caption\">\n        <table\n          class=\"e-table e-gridtable\"\n          :class=\"{ 'e-gridtable--virtual': vopt }\"\n          :style=\"tableStyle\"\n          :role=\"role('table')\"\n          :aria-busy=\"loading ? 'true' : undefined\"\n          :aria-rowcount=\"vopt ? total + 1 + (hasFilterRow ? 1 : 0) : undefined\"\n        >\n          <caption class=\"e-sr\">\n            {{\n              caption\n            }}\n          </caption>\n          <colgroup v-if=\"fixedLayout\">\n            <col v-if=\"selectable\" style=\"width: 52px\" />\n            <col v-for=\"c in cols\" :key=\"c.key\" :style=\"widthOf(c) ? { width: `${widthOf(c)}px` } : undefined\" />\n          </colgroup>\n          <thead :role=\"role('rowgroup')\">\n            <tr :role=\"role('row')\">\n              <th v-if=\"selectable\" scope=\"col\" class=\"e-cell-check\" :role=\"role('columnheader')\">\n                <ECheckbox\n                  bare\n                  :label=\"vopt ? t('selectAll') : t('selectAllPage')\"\n                  :model-value=\"allOn\"\n                  :indeterminate=\"someOn && !allOn\"\n                  @update:model-value=\"table.toggleAllPageRowsSelected(!allOn)\"\n                />\n              </th>\n              <th\n                v-for=\"(c, i) in cols\"\n                :key=\"c.key\"\n                scope=\"col\"\n                :role=\"role('columnheader')\"\n                :class=\"{ 'e-num': c.numeric, 'e-center': c.align === 'center', 'e-sticky': stick(i) }\"\n                :style=\"stickStyle(i)\"\n                :aria-sort=\"\n                  c.sortable\n                    ? sort?.key === c.key\n                      ? sort.dir === 'asc'\n                        ? 'ascending'\n                        : 'descending'\n                      : 'none'\n                    : undefined\n                \"\n              >\n                <button\n                  v-if=\"c.sortable\"\n                  type=\"button\"\n                  class=\"e-sortbtn\"\n                  @click=\"table.getColumn(c.key)?.toggleSorting()\"\n                >\n                  <slot :name=\"`header-${c.key}`\" :column=\"c\">{{ c.label }}</slot>\n                  <EIcon\n                    :name=\"sort?.key === c.key ? (sort.dir === 'asc' ? 'arrow-up' : 'arrow-down') : 'sort'\"\n                    small\n                  />\n                </button>\n                <slot v-else :name=\"`header-${c.key}`\" :column=\"c\">{{ c.label }}</slot>\n                <EDataGridResizer\n                  v-if=\"resizable && c.resizable !== false\"\n                  :label=\"c.label\"\n                  :width=\"widthOf(c)\"\n                  :min=\"c.minWidth || 72\"\n                  @resize=\"setWidth(c.key, $event)\"\n                  @reset=\"resetWidth(c.key)\"\n                />\n              </th>\n            </tr>\n            <tr v-if=\"hasFilterRow\" class=\"e-filterrow\" :role=\"role('row')\">\n              <td v-if=\"selectable\" class=\"e-cell-check\" :role=\"role('cell')\" />\n              <td\n                v-for=\"(c, i) in cols\"\n                :key=\"c.key\"\n                :role=\"role('cell')\"\n                :class=\"{ 'e-sticky': stick(i) }\"\n                :style=\"stickStyle(i)\"\n              >\n                <template v-if=\"c.filter\">\n                  <ESelect\n                    v-if=\"c.filter.type === 'select'\"\n                    bare\n                    :aria-label=\"t('filterColumn', { col: c.label })\"\n                    :placeholder=\"t('all')\"\n                    :options=\"selectOptions(c)\"\n                    :model-value=\"textFilter(c.key) || ALL\"\n                    @update:model-value=\"setFilter(c.key, $event === ALL ? '' : $event)\"\n                  />\n                  <div v-else-if=\"c.filter.type === 'number'\" class=\"e-filter-range\">\n                    <ETextField\n                      hide-label\n                      inputmode=\"decimal\"\n                      :label=\"t('minOf', { col: t('filterColumn', { col: c.label }) })\"\n                      :placeholder=\"t('min')\"\n                      :model-value=\"numberFilter(c.key).min\"\n                      @update:model-value=\"setFilter(c.key, { min: $event, max: numberFilter(c.key).max })\"\n                    />\n                    <ETextField\n                      hide-label\n                      inputmode=\"decimal\"\n                      :label=\"t('maxOf', { col: t('filterColumn', { col: c.label }) })\"\n                      :placeholder=\"t('max')\"\n                      :model-value=\"numberFilter(c.key).max\"\n                      @update:model-value=\"setFilter(c.key, { min: numberFilter(c.key).min, max: $event })\"\n                    />\n                  </div>\n                  <ETextField\n                    v-else\n                    hide-label\n                    type=\"search\"\n                    :label=\"t('filterColumn', { col: c.label })\"\n                    :placeholder=\"t('filter')\"\n                    :model-value=\"textFilter(c.key)\"\n                    @update:model-value=\"setFilter(c.key, $event)\"\n                  />\n                </template>\n              </td>\n            </tr>\n          </thead>\n          <tbody :role=\"role('rowgroup')\">\n            <template v-if=\"loading\">\n              <tr v-for=\"n in 5\" :key=\"`s${n}`\" :role=\"role('row')\">\n                <td v-if=\"selectable\" class=\"e-cell-check\" :role=\"role('cell')\" />\n                <td v-for=\"c in cols\" :key=\"c.key\" :role=\"role('cell')\"><span class=\"e-skel\" /></td>\n              </tr>\n            </template>\n            <tr v-else-if=\"view.length === 0\" :role=\"role('row')\">\n              <td :colspan=\"colCount\" class=\"e-grid-empty\" :role=\"role('cell')\">\n                <EEmptyState bare :icon=\"emptyIcon || 'search'\" :title=\"emptyTitle || t('noResults')\">\n                  {{ emptyText || (anyFilter || q ? t(\"noMatchesFilters\") : t(\"nothingYet\")) }}\n                  <template v-if=\"anyFilter || q\" #action>\n                    <EButton variant=\"outline\" @click=\"clearFilters\">{{ t(\"clearFilters\") }}</EButton>\n                  </template>\n                </EEmptyState>\n              </td>\n            </tr>\n            <template v-else>\n              <tr v-if=\"vopt && spaceTop > 0\" aria-hidden=\"true\" class=\"e-spacer\" :style=\"{ height: `${spaceTop}px` }\">\n                <td :colspan=\"colCount\" />\n              </tr>\n              <tr\n                v-for=\"{ row, index } in rowsToRender\"\n                :key=\"row.id\"\n                :role=\"role('row')\"\n                :data-selected=\"row.getIsSelected() ? '' : undefined\"\n                :aria-rowindex=\"vopt ? index + 2 + (hasFilterRow ? 1 : 0) : undefined\"\n              >\n                <td v-if=\"selectable\" class=\"e-cell-check\" :role=\"role('cell')\">\n                  <ECheckbox\n                    bare\n                    :label=\"t('selectRow')\"\n                    :model-value=\"row.getIsSelected()\"\n                    @update:model-value=\"row.toggleSelected($event)\"\n                  />\n                </td>\n                <td\n                  v-for=\"(c, i) in cols\"\n                  :key=\"c.key\"\n                  :role=\"role('cell')\"\n                  :data-label=\"c.label\"\n                  :class=\"{ 'e-num': c.numeric, 'e-center': c.align === 'center', 'e-sticky': stick(i) }\"\n                  :style=\"stickStyle(i)\"\n                >\n                  <slot :name=\"`cell-${c.key}`\" v-bind=\"cellProps(row, c)\">{{ row.original[c.key] }}</slot>\n                </td>\n              </tr>\n              <tr\n                v-if=\"vopt && spaceBottom > 0\"\n                aria-hidden=\"true\"\n                class=\"e-spacer\"\n                :style=\"{ height: `${spaceBottom}px` }\"\n              >\n                <td :colspan=\"colCount\" />\n              </tr>\n            </template>\n          </tbody>\n        </table>\n      </div>\n      <div v-if=\"!plain\" class=\"e-grid-foot\">\n        <span class=\"e-grid-range\">{{\n          total === 0\n            ? t(\"rows\", { n: 0 })\n            : vopt || pageSize === 0\n              ? t(\"rows\", { n: total })\n              : t(\"showing\", { from, to, total })\n        }}</span>\n        <EPagination\n          v-if=\"pageSize > 0 && pages > 1\"\n          :model-value=\"cur\"\n          :page-count=\"pages\"\n          @update:model-value=\"page = $event\"\n        />\n      </div>\n      <span class=\"e-sr\" role=\"status\" aria-live=\"polite\">{{\n        loading\n          ? t(\"loading\")\n          : (sortedCol\n              ? t(\"sortedBy\", { col: sortedCol.label, dir: t(sort?.dir === \"asc\" ? \"ascending\" : \"descending\") }) + \" \"\n              : \"\") + t(\"rowsAnnounce\", { n: total })\n      }}</span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-table {\n    width: 100%;\n    border-collapse: collapse;\n    font: 400 var(--e-text-md) / 1.4 var(--e-font-sans);\n  }\n\n  .e-table th {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-bottom: var(--e-stroke-card) solid var(--e-border-strong);\n    background: var(--e-surface-tint);\n    text-align: start;\n    white-space: nowrap;\n    font: 600 var(--e-text-xs) / 1.2 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-muted);\n  }\n\n  .e-table td {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    vertical-align: middle;\n  }\n\n  .e-table tbody tr:first-child td {\n    border-top: 0;\n  }\n\n  .e-table tbody tr:hover td {\n    background: var(--e-surface-tint);\n  }\n\n  .e-table .e-num {\n    text-align: end;\n    font-family: var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n  }\n\n  .e-table th.e-num {\n    font-family: var(--e-font-mono);\n  }\n\n  .e-table .e-center {\n    text-align: center;\n  }\n\n  .e-skel {\n    display: block;\n    height: 14px;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border);\n    animation: e-pulse 1.4s ease-in-out infinite;\n  }\n\n  @keyframes e-pulse {\n    50% {\n      opacity: 0.5;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-skel {\n      animation: none;\n    }\n  }\n\n  .e-grid {\n    isolation: isolate;\n    border-radius: var(--e-radius-md);\n    min-width: 0;\n  }\n\n  .e-grid-frame::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: var(--e-z-sticky);\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border);\n    pointer-events: none;\n  }\n\n  .e-grid-frame {\n    position: relative;\n    overflow: hidden;\n    border-radius: inherit;\n    background: var(--e-surface);\n  }\n\n  .e-grid-bar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-grid-search {\n    flex: 1 1 10rem;\n    max-width: 24rem;\n  }\n\n  .e-grid-search .e-input {\n    padding-inline-start: var(--e-space-2);\n  }\n\n  .e-grid-picked {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n  }\n\n  .e-grid-count {\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n  }\n\n  .e-grid-tools {\n    margin-inline-start: auto;\n    display: flex;\n    gap: var(--e-space-2);\n  }\n\n  .e-grid-scroll {\n    overflow: auto;\n    max-height: var(--e-grid-max-h, none);\n  }\n\n  .e-grid-scroll:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-gridtable {\n    border-radius: 0;\n    box-shadow: none;\n    min-width: var(--e-grid-min-w, 0);\n  }\n\n  .e-gridtable thead th {\n    position: sticky;\n    top: 0;\n    z-index: var(--e-z-raised);\n    height: 45px;\n    box-sizing: border-box;\n  }\n\n  .e-gridtable th[aria-sort=\"ascending\"],\n  .e-gridtable th[aria-sort=\"descending\"] {\n    color: var(--e-ink);\n  }\n\n  .e-sortbtn {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    min-height: var(--e-control-height);\n    padding: 4px 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    text-transform: inherit;\n    cursor: pointer;\n  }\n\n  .e-sortbtn:hover {\n    color: var(--e-ink);\n  }\n\n  .e-sortbtn:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-gridtable .e-cell-check {\n    width: 52px;\n    padding-inline-end: 0;\n    vertical-align: middle;\n  }\n\n  .e-gridtable tbody tr[data-selected] td {\n    background: var(--e-surface-tint);\n  }\n\n  .e-gridtable tbody tr[data-selected]:hover td {\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 0 transparent;\n  }\n\n  .e-table td.e-grid-empty {\n    padding: 0;\n  }\n\n  .e-grid-foot {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-grid-range {\n    font: 500 var(--e-text-xs) / 1.2 var(--e-font-mono);\n    color: var(--e-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .e-grid-foot .e-pager {\n    justify-content: flex-end;\n  }\n\n  .e-filterrow td {\n    padding: var(--e-space-1) var(--e-space-3);\n    background: var(--e-surface);\n    border-bottom: var(--e-stroke-card) solid var(--e-border-strong);\n    border-top: 0;\n    position: sticky;\n    top: 45px;\n    z-index: var(--e-z-raised);\n  }\n\n  .e-filterrow .e-input {\n    height: var(--e-control-height);\n    font-size: var(--e-text-md);\n    padding-inline: var(--e-space-3);\n  }\n\n  .e-filterrow .e-sel-trigger {\n    height: var(--e-control-height);\n    padding-inline-end: var(--e-space-2);\n  }\n\n  .e-filter-range {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--e-space-1);\n  }\n\n  .e-gridtable thead th,\n  .e-gridtable thead td {\n    white-space: nowrap;\n  }\n\n  .e-resizer {\n    position: absolute;\n    top: 0;\n    inset-inline-end: -12px;\n    z-index: var(--e-z-raised);\n    width: 24px;\n    height: 100%;\n    cursor: col-resize;\n    touch-action: none;\n  }\n\n  .e-resizer::before {\n    content: \"\";\n    position: absolute;\n    inset-block: 0;\n    inset-inline: -10px;\n  }\n\n  .e-resizer::after {\n    content: \"\";\n    position: absolute;\n    top: 22%;\n    inset-inline-start: 11px;\n    width: 1px;\n    height: 56%;\n    background: var(--e-border-strong);\n    transition: width var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-resizer:hover::after,\n  .e-resizer:focus-visible::after {\n    inset-inline-start: 10px;\n    width: 3px;\n    background: var(--e-primary);\n    border-radius: 2px;\n  }\n\n  .e-resizer:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-gridtable[style*=\"table-layout\"] td,\n  .e-gridtable[style*=\"table-layout\"] th {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .e-gridtable .e-sticky {\n    position: sticky;\n    z-index: var(--e-z-raised);\n    box-shadow: inset -1px 0 0 var(--e-border);\n  }\n\n  .e-gridtable thead th.e-sticky {\n    z-index: var(--e-z-sticky);\n    background: var(--e-surface-tint);\n  }\n\n  .e-gridtable tbody td.e-sticky {\n    background: var(--e-surface);\n  }\n\n  .e-gridtable tbody tr:hover td.e-sticky {\n    background: var(--e-surface-tint);\n  }\n\n  .e-gridtable tbody tr[data-selected] td.e-sticky {\n    background: var(--e-surface-tint);\n  }\n\n  .e-gridtable--virtual td {\n    height: var(--e-row-h);\n    padding-block: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .e-spacer td {\n    padding: 0;\n    border: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-resizer::after {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-grid-scroll {\n      overflow: visible;\n      max-height: none;\n    }\n  }\n\n  .e-grid--cards {\n    container-type: inline-size;\n  }\n\n  .e-grid-sortsel {\n    display: none;\n    min-width: 11rem;\n  }\n\n  .e-grid-bar--sortonly {\n    display: none;\n  }\n\n  @container (max-width: 40rem) {\n    .e-grid-sortsel {\n      display: block;\n      flex: 1 1 11rem;\n    }\n\n    .e-grid-bar--sortonly {\n      display: flex;\n    }\n\n    .e-grid--cards .e-grid-scroll {\n      overflow: visible;\n      max-height: none;\n    }\n\n    .e-grid--cards .e-gridtable,\n    .e-grid--cards .e-gridtable tbody {\n      display: block;\n      min-width: 0;\n      width: 100%;\n    }\n\n    .e-grid--cards .e-gridtable thead {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      /* stylelint-disable-next-line property-no-deprecated -- clip hides text visually */\n      clip: rect(0 0 0 0);\n      white-space: nowrap;\n    }\n\n    .e-grid--cards .e-grid-frame {\n      overflow: visible;\n      background: transparent;\n    }\n\n    .e-grid--cards .e-grid-frame::after {\n      content: none;\n    }\n\n    .e-grid--cards .e-gridtable tbody tr {\n      display: block;\n      margin: 0 0 var(--e-space-3);\n      padding: var(--e-space-1) var(--e-space-4);\n      border-radius: var(--e-radius-md);\n      background: var(--e-surface);\n      box-shadow: var(--e-edge);\n    }\n\n    .e-grid--cards .e-gridtable tbody tr:hover td {\n      background: transparent;\n    }\n\n    .e-grid--cards .e-gridtable tbody tr[data-selected] {\n      background: var(--e-surface-tint);\n    }\n\n    .e-grid--cards .e-gridtable tbody tr[data-selected] td {\n      background: transparent;\n    }\n\n    .e-grid--cards .e-gridtable td {\n      display: grid;\n      grid-template-columns: minmax(5rem, 38%) minmax(0, 1fr);\n      gap: var(--e-space-3);\n      align-items: baseline;\n      padding: var(--e-space-2) 0;\n      border-top: var(--e-stroke-hair) solid var(--e-border);\n      overflow: visible;\n      white-space: normal;\n      text-align: start;\n    }\n\n    .e-grid--cards .e-gridtable tbody tr:first-child td:not(:first-child) {\n      border-top: var(--e-stroke-hair) solid var(--e-border);\n    }\n\n    .e-grid--cards .e-gridtable tbody td:first-child {\n      border-top: 0;\n    }\n\n    .e-grid--cards .e-gridtable td::before {\n      content: attr(data-label);\n      font: 600 var(--e-text-xs) / 1.3 var(--e-font-mono);\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--e-muted);\n    }\n\n    .e-grid--cards .e-gridtable td.e-cell-check {\n      display: flex;\n      width: auto;\n      padding: var(--e-space-2) 0;\n    }\n\n    .e-grid--cards .e-gridtable td.e-cell-check::before {\n      content: none;\n    }\n\n    .e-grid--cards .e-gridtable .e-sticky {\n      position: static;\n      box-shadow: none;\n    }\n\n    .e-grid--cards .e-gridtable .e-num {\n      text-align: start;\n    }\n\n    .e-grid--cards .e-gridtable .e-grid-empty {\n      display: block;\n    }\n\n    .e-grid--cards .e-gridtable .e-grid-empty::before {\n      content: none;\n    }\n\n    .e-grid--cards .e-filterrow {\n      display: none;\n    }\n\n    .e-grid--cards .e-gridtable[style*=\"table-layout\"] td {\n      overflow: visible;\n      text-overflow: clip;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EDataGrid.js","names":["_sfc_main","EDataGrid_vue_vue_type_script_setup_true_lang_default","EDataGrid_default"],"sources":["../../../src/components/DataGrid/EDataGrid.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"Row extends DataGridRow\">\nimport { computed, nextTick, ref, watch, type CSSProperties } from \"vue\";\nimport { PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport {\n  columnFilteringFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createFilteredRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  functionalUpdate,\n  globalFilteringFeature,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  tableFeatures,\n  useTable,\n  type ColumnDef,\n  type FilterFn,\n  type SortFn,\n} from \"@tanstack/vue-table\";\nimport { useVirtualizer } from \"@tanstack/vue-virtual\";\nimport EButton from \"../Button/EButton.vue\";\nimport ECheckbox from \"../Checkbox/ECheckbox.vue\";\nimport EEmptyState from \"../EmptyState/EEmptyState.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport EPagination from \"../Pagination/EPagination.vue\";\nimport ESelect from \"../Select/ESelect.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport EDataGridResizer from \"./EDataGridResizer.vue\";\nimport \"../Definition/EDefinition.vue\";\nimport { normalizeOptions, type EOption } from \"../Select/options.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport { cellValue, compareValues, filterActive, parsePx, passesFilter } from \"./grid.js\";\nimport type {\n  DataGridColumn,\n  DataGridFilterValue,\n  DataGridQuery,\n  DataGridRow,\n  DataGridSort,\n  DataGridVirtual,\n} from \"./types.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Select/panel.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The columns, in order. See `DataGridColumn` below. */\n    columns: DataGridColumn<Row>[];\n    /** The rows. Each needs a unique `id`; selection is by id. */\n    rows: Row[];\n    /** Names the table for screen readers, and its scrolling region. */\n    caption: string;\n    /** One search box over all shown columns. */\n    searchable?: boolean;\n    /** The search box's placeholder. @default \"Search all columns\" */\n    searchPlaceholder?: string;\n    /** A filter row under the headings, for columns that define a `filter`. */\n    filterable?: boolean;\n    /** Column edges can be dragged, or moved with the arrow keys. */\n    resizable?: boolean;\n    /** Keeps the first column in view while scrolling sideways. */\n    stickyFirst?: boolean;\n    /** A Columns menu to show and hide columns. */\n    columnToggle?: boolean;\n    /** A checkbox on each row and a select-all in the heading. */\n    selectable?: boolean;\n    /** Rows per page; 0 turns paging off. */\n    pageSize?: number;\n    /** Stops the table growing past this height (any CSS length) and scrolls inside it, with a sticky header. */\n    maxHeight?: string;\n    /** Renders only the rows in view, for thousands of rows. Replaces paging. `true` or `{ rowHeight = 48, height = 440, overscan = 8 }`. */\n    virtual?: boolean | DataGridVirtual;\n    /** Turns rows into cards below 40rem of the grid's own width. On by default; `virtual` and `resizable` grids keep the table. */\n    cards?: boolean;\n    /** Data lives on a server: show the rows given, in the order given, and report every change through `queryChange`. */\n    manual?: boolean;\n    /** With `manual`, how many rows there are in all. */\n    total?: number;\n    /** Shows placeholder rows while data loads, with `aria-busy`. */\n    loading?: boolean;\n    /** The title when there are no rows. @default \"No results\" */\n    emptyTitle?: string;\n    /** The sentence under the empty title, when there are no rows. */\n    emptyText?: string;\n    /** The icon above the empty title. @default \"search\" */\n    emptyIcon?: IconProp;\n    /** No chrome: a bare table for a short static list, with no toolbar, filters, paging or footer. */\n    bare?: boolean;\n  }>(),\n  { pageSize: 10, cards: true },\n);\n\nconst emit = defineEmits<{\n  /** Sort, page, search or filters changed. With `manual`, fetch the rows this describes. */\n  queryChange: [query: DataGridQuery];\n}>();\n\nconst slots = defineSlots<{\n  [K: `cell-${string}`]: (props: { row: Row; value: unknown }) => unknown;\n  [K: `header-${string}`]: (props: { column: DataGridColumn<Row> }) => unknown;\n  /** Buttons that act on the selected rows, shown beside the count. */\n  \"bulk-actions\"?: () => unknown;\n  /** Anything else for the bar above the table. */\n  toolbar?: () => unknown;\n}>();\n\n/** The sort: `{ key, dir: \"asc\" | \"desc\" }`, or `null` for none. */\nconst sort = defineModel<DataGridSort | null>(\"sort\", { default: null });\n/** The current page, from 1. */\nconst page = defineModel<number>(\"page\", { default: 1 });\n/** The text in the search box. */\nconst search = defineModel<string>(\"search\", { default: \"\" });\n/** The column filters, by column `key`: text, or `{ min, max }` strings for `number`. */\nconst filters = defineModel<Record<string, DataGridFilterValue>>(\"filters\", { default: () => ({}) });\n/** The selected row ids, kept across pages and filters. */\nconst selected = defineModel<string[]>(\"selected\", { default: () => [] });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst uid = useUid();\nconst menuOpen = ref(false);\nconst menuTrigger = ref<{ $el: HTMLElement } | null>(null);\nwatch(\n  menuOpen,\n  async (open) => {\n    if (!open) return;\n    await nextTick();\n    const panel = document.getElementById(menuTrigger.value?.$el?.getAttribute(\"aria-controls\") ?? \"\");\n    panel?.setAttribute(\"aria-labelledby\", `${uid.value}-columns`);\n  },\n  { flush: \"post\" },\n);\n\nconst ALL = \"__e-all__\";\nconst NONE = \"__e-none__\";\n\nconst features = tableFeatures({\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  columnFilteringFeature,\n  globalFilteringFeature,\n  filteredRowModel: createFilteredRowModel(),\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  columnVisibilityFeature,\n  columnSizingFeature,\n});\n\nconst columnVisibility = ref<Record<string, boolean>>({});\nconst columnSizing = ref<Record<string, number>>({});\n\nconst sortFn: SortFn<typeof features, Row> = (a, b, id) => compareValues(a.getValue(id), b.getValue(id));\ntype GlobalFilter = { q: string; cols: string[] };\nconst globalFilterFn: FilterFn<typeof features, Row> = (row, id, f: GlobalFilter) => {\n  if (!f.cols.includes(id)) return false;\n  const v = row.getValue(id);\n  return v != null && String(v).toLowerCase().includes(f.q);\n};\n\nconst colByKey = computed(() => new Map(props.columns.map((c) => [c.key, c])));\nconst columnDefs = computed<ColumnDef<typeof features, Row>[]>(() =>\n  props.columns.map((c) => ({\n    id: c.key,\n    accessorFn: (row: Row) => cellValue(row, c),\n    header: c.label,\n    enableSorting: !!c.sortable,\n    sortDescFirst: false,\n    sortFn,\n    enableColumnFilter: !!c.filter,\n    filterFn: ((row, id, f) => passesFilter(c, row.getValue(id), f)) as FilterFn<typeof features, Row>,\n    enableResizing: c.resizable !== false,\n  })),\n);\n\nconst vopt = computed(() =>\n  props.virtual ? { rowHeight: 48, height: 440, overscan: 8, ...(props.virtual === true ? {} : props.virtual) } : null,\n);\nconst pageSize = computed(() => (vopt.value || props.bare ? 0 : (props.pageSize ?? 10)));\nconst paging = computed(() => pageSize.value > 0 && !props.manual);\nconst resizable = computed(() => !!props.resizable && !props.bare);\nconst cards = computed(() => props.cards !== false && !vopt.value && !resizable.value);\nconst q = computed(() => search.value.trim().toLowerCase());\nconst anyFilter = computed(() => Object.values(filters.value).some(filterActive));\n\nconst table = useTable({\n  features,\n  columns: columnDefs,\n  data: computed(() => props.rows),\n  getRowId: (row: Row) => String(row.id),\n  enableMultiSort: false,\n  enableSubRowSelection: false,\n  autoResetPageIndex: false,\n  manualSorting: computed(() => !!props.manual),\n  manualFiltering: computed(() => !!props.manual),\n  manualPagination: computed(() => !paging.value),\n  rowCount: computed(() => (props.manual ? (props.total ?? props.rows.length) : undefined)),\n  globalFilterFn,\n  state: computed(() => ({\n    sorting: sort.value ? [{ id: sort.value.key, desc: sort.value.dir === \"desc\" }] : [],\n    columnFilters: Object.entries(filters.value)\n      .filter(([key, value]) => colByKey.value.has(key) && filterActive(value))\n      .map(([id, value]) => ({ id, value })),\n    globalFilter: q.value\n      ? ({\n          q: q.value,\n          cols: props.columns.filter((c) => columnVisibility.value[c.key] !== false).map((c) => c.key),\n        } satisfies GlobalFilter)\n      : undefined,\n    rowSelection: Object.fromEntries(selected.value.map((id) => [id, true])),\n    columnVisibility: columnVisibility.value,\n    columnSizing: columnSizing.value,\n    pagination: { pageIndex: Math.max(0, page.value - 1), pageSize: pageSize.value || 1 },\n  })),\n  onSortingChange: (updater) => {\n    const next = functionalUpdate(updater, sort.value ? [{ id: sort.value.key, desc: sort.value.dir === \"desc\" }] : []);\n    const first = next[0];\n    sort.value = first ? { key: first.id, dir: first.desc ? \"desc\" : \"asc\" } : null;\n    page.value = 1;\n  },\n  onRowSelectionChange: (updater) => {\n    const next = functionalUpdate(updater, Object.fromEntries(selected.value.map((id) => [id, true])));\n    selected.value = Object.keys(next).filter((k) => next[k]);\n  },\n  onColumnVisibilityChange: (updater) => {\n    columnVisibility.value = functionalUpdate(updater, columnVisibility.value);\n  },\n  onColumnSizingChange: (updater) => {\n    columnSizing.value = functionalUpdate(updater, columnSizing.value);\n  },\n});\n\nconst view = computed(() => table.getRowModel().rows);\nconst total = computed(() =>\n  props.manual ? (props.total ?? props.rows.length) : table.getPrePaginatedRowModel().rows.length,\n);\nconst pages = computed(() => (pageSize.value > 0 ? Math.max(1, Math.ceil(total.value / pageSize.value)) : 1));\nconst cur = computed(() => Math.min(page.value, pages.value));\nwatch(pages, (n) => {\n  if (page.value > n) page.value = n;\n});\nconst cols = computed(() =>\n  table\n    .getVisibleLeafColumns()\n    .map((c) => colByKey.value.get(c.id))\n    .filter((c): c is DataGridColumn<Row> => !!c),\n);\nconst hasFilterRow = computed(() => !!props.filterable && !props.bare && cols.value.some((c) => c.filter));\nconst colCount = computed(() => cols.value.length + (props.selectable ? 1 : 0));\nconst from = computed(() =>\n  total.value === 0 ? 0 : (cur.value - 1) * (pageSize.value > 0 ? pageSize.value : total.value) + 1,\n);\nconst to = computed(() => (pageSize.value > 0 ? Math.min(total.value, cur.value * pageSize.value) : total.value));\nconst sortedCol = computed(() => (sort.value ? colByKey.value.get(sort.value.key) : undefined));\nconst nPicked = computed(() => selected.value.length);\nconst allOn = computed(() => view.value.length > 0 && view.value.every((r) => r.getIsSelected()));\nconst someOn = computed(() => view.value.some((r) => r.getIsSelected()));\n\nconst scrollEl = ref<HTMLElement | null>(null);\nconst virtualizer = useVirtualizer(\n  computed(() => ({\n    count: vopt.value ? view.value.length : 0,\n    getScrollElement: () => scrollEl.value,\n    estimateSize: () => vopt.value?.rowHeight ?? 48,\n    overscan: vopt.value?.overscan ?? 8,\n    getItemKey: (i: number) => view.value[i]?.id ?? i,\n    initialRect: { width: 0, height: vopt.value?.height ?? 0 },\n  })),\n);\nconst items = computed(() => (vopt.value ? virtualizer.value.getVirtualItems() : []));\nconst shown = computed(() => (vopt.value ? items.value.flatMap((i) => (view.value[i.index] ? [i] : [])) : []));\nconst spaceTop = computed(() => items.value[0]?.start ?? 0);\nconst spaceBottom = computed(() => {\n  const last = items.value[items.value.length - 1];\n  return last ? Math.max(0, virtualizer.value.getTotalSize() - last.end) : 0;\n});\nconst rowsToRender = computed(() =>\n  vopt.value\n    ? shown.value.map((i) => ({ row: view.value[i.index]!, index: i.index }))\n    : view.value.map((row, index) => ({ row, index })),\n);\n\nconst cellProps = (row: (typeof view.value)[number], c: DataGridColumn<Row>) => ({\n  row: row.original,\n  value: row.getValue(c.key),\n});\n\nconst fixedLayout = computed(() => resizable.value || !!vopt.value || cols.value.some((c) => c.width));\nconst stickyLeft = computed(() => (props.selectable ? 52 : 0));\nconst widthOf = (c: DataGridColumn<Row>) => columnSizing.value[c.key] || parsePx(c.width) || undefined;\nconst minTable = computed(\n  () => (props.selectable ? 52 : 0) + cols.value.reduce((s, c) => s + (widthOf(c) || c.minWidth || 96), 0),\n);\nconst stick = (i: number) => !!props.stickyFirst && i === 0;\nconst stickStyle = (i: number): CSSProperties | undefined =>\n  stick(i) ? { insetInlineStart: `${stickyLeft.value}px` } : undefined;\nconst tableStyle = computed(\n  () =>\n    ({\n      tableLayout: fixedLayout.value ? \"fixed\" : undefined,\n      \"--e-grid-min-w\": fixedLayout.value ? `${minTable.value}px` : undefined,\n      \"--e-row-h\": vopt.value ? `${vopt.value.rowHeight}px` : undefined,\n    }) as CSSProperties,\n);\nconst scrollStyle = computed(\n  () =>\n    (vopt.value\n      ? { height: `${vopt.value.height}px` }\n      : props.maxHeight\n        ? { \"--e-grid-max-h\": props.maxHeight }\n        : undefined) as CSSProperties | undefined,\n);\nconst role = (r: string) => (cards.value ? r : undefined);\n\nconst sortables = computed(() => props.columns.filter((c) => c.sortable));\nconst sortOptions = computed<EOption[]>(() => [\n  { value: NONE, label: t(\"sortBy\") },\n  ...sortables.value.flatMap((c) =>\n    ([\"asc\", \"desc\"] as const).map((d) => ({\n      value: `${c.key}:${d}`,\n      label: `${c.label}, ${t(d === \"asc\" ? \"ascending\" : \"descending\")}`,\n    })),\n  ),\n]);\nconst sortSelectValue = computed(() => (sort.value ? `${sort.value.key}:${sort.value.dir}` : NONE));\nconst showSortSelect = computed(() => cards.value && sortables.value.length > 0);\nconst hasToolbar = computed(() => !!slots.toolbar);\nconst barOther = computed(\n  () => !!props.searchable || !!props.columnToggle || nPicked.value > 0 || anyFilter.value || hasToolbar.value,\n);\nconst showBar = computed(() => !props.bare && (barOther.value || showSortSelect.value));\n\nfunction onSearch(e: Event) {\n  search.value = (e.target as HTMLInputElement).value;\n  page.value = 1;\n}\nfunction setFilter(key: string, value: DataGridFilterValue) {\n  filters.value = { ...filters.value, [key]: value };\n  page.value = 1;\n}\nfunction clearFilters() {\n  filters.value = {};\n  search.value = \"\";\n  page.value = 1;\n}\nfunction chooseSort(v: string) {\n  if (v === NONE) sort.value = null;\n  else {\n    const at = v.lastIndexOf(\":\");\n    sort.value = { key: v.slice(0, at), dir: v.slice(at + 1) === \"desc\" ? \"desc\" : \"asc\" };\n  }\n  page.value = 1;\n}\nfunction setWidth(key: string, px: number) {\n  table.setColumnSizing((old) => ({ ...old, [key]: px }));\n}\nfunction resetWidth(key: string) {\n  table.setColumnSizing((old) => {\n    const next = { ...old };\n    delete next[key];\n    return next;\n  });\n}\nconst numberFilter = (key: string) => {\n  const f = filters.value[key];\n  return typeof f === \"object\" ? f : { min: \"\", max: \"\" };\n};\nconst textFilter = (key: string) => {\n  const f = filters.value[key];\n  return typeof f === \"string\" ? f : \"\";\n};\nconst selectOptions = (c: DataGridColumn<Row>): EOption[] => [\n  { value: ALL, label: t(\"all\") },\n  ...normalizeOptions(c.filter?.type === \"select\" ? c.filter.options : []),\n];\n\nwatch([sort, page, search, filters], () => {\n  emit(\"queryChange\", {\n    sort: sort.value,\n    page: page.value,\n    pageSize: pageSize.value,\n    search: search.value,\n    filters: filters.value,\n  });\n});\n</script>\n\n<template>\n  <div class=\"e-grid\" :class=\"{ 'e-grid--bare': bare, 'e-grid--cards': cards }\">\n    <div class=\"e-grid-frame\">\n      <div v-if=\"showBar\" class=\"e-grid-bar\" :class=\"{ 'e-grid-bar--sortonly': !barOther }\">\n        <div v-if=\"searchable\" class=\"e-input-wrap e-grid-search\">\n          <span class=\"e-affix e-affix--pre\"><EIcon name=\"search\" /></span>\n          <input\n            class=\"e-input\"\n            type=\"search\"\n            :placeholder=\"searchPlaceholder || t('searchAll')\"\n            :aria-label=\"t('searchAll')\"\n            :value=\"search\"\n            @input=\"onSearch\"\n          />\n        </div>\n        <div v-if=\"nPicked\" class=\"e-grid-picked\">\n          <span class=\"e-grid-count\">{{ t(\"selected\", { n: nPicked }) }}</span>\n          <slot name=\"bulk-actions\" />\n        </div>\n        <div v-if=\"showSortSelect\" class=\"e-grid-sortsel\">\n          <ESelect\n            bare\n            :aria-label=\"t('sortBy')\"\n            :placeholder=\"t('sortBy')\"\n            :options=\"sortOptions\"\n            :model-value=\"sortSelectValue\"\n            @update:model-value=\"chooseSort\"\n          />\n        </div>\n        <div class=\"e-grid-tools\">\n          <EButton v-if=\"anyFilter || q\" variant=\"quiet\" @click=\"clearFilters\">{{ t(\"clearFilters\") }}</EButton>\n          <PopoverRoot v-if=\"columnToggle\" v-model:open=\"menuOpen\">\n            <PopoverTrigger as-child>\n              <EButton ref=\"menuTrigger\" variant=\"outline\" :aria-label=\"t('chooseColumns')\">{{ t(\"columns\") }}</EButton>\n            </PopoverTrigger>\n            <PopoverPortal :to=\"portal\">\n              <PopoverContent\n                class=\"e-popover e-root\"\n                side=\"bottom\"\n                align=\"start\"\n                :side-offset=\"8\"\n                :collision-padding=\"16\"\n              >\n                <header class=\"e-pop-head\">\n                  <h3 :id=\"`${uid}-columns`\" class=\"e-pop-title\">{{ t(\"showColumns\") }}</h3>\n                  <PopoverClose as-child>\n                    <EIconButton icon=\"x\" :label=\"t('close')\" />\n                  </PopoverClose>\n                </header>\n                <div class=\"e-pop-body\">\n                  <ECheckbox\n                    v-for=\"column in table.getAllLeafColumns()\"\n                    :key=\"column.id\"\n                    :label=\"colByKey.get(column.id)?.label ?? column.id\"\n                    :model-value=\"column.getIsVisible()\"\n                    @update:model-value=\"column.toggleVisibility($event)\"\n                  />\n                </div>\n              </PopoverContent>\n            </PopoverPortal>\n          </PopoverRoot>\n          <slot name=\"toolbar\" />\n        </div>\n      </div>\n      <div ref=\"scrollEl\" class=\"e-grid-scroll\" :style=\"scrollStyle\" tabindex=\"0\" role=\"region\" :aria-label=\"caption\">\n        <table\n          class=\"e-table e-gridtable\"\n          :class=\"{ 'e-gridtable--virtual': vopt }\"\n          :style=\"tableStyle\"\n          :role=\"role('table')\"\n          :aria-busy=\"loading ? 'true' : undefined\"\n          :aria-rowcount=\"vopt ? total + 1 + (hasFilterRow ? 1 : 0) : undefined\"\n        >\n          <caption class=\"e-sr\">\n            {{\n              caption\n            }}\n          </caption>\n          <colgroup v-if=\"fixedLayout\">\n            <col v-if=\"selectable\" style=\"width: 52px\" />\n            <col v-for=\"c in cols\" :key=\"c.key\" :style=\"widthOf(c) ? { width: `${widthOf(c)}px` } : undefined\" />\n          </colgroup>\n          <thead :role=\"role('rowgroup')\">\n            <tr :role=\"role('row')\">\n              <th v-if=\"selectable\" scope=\"col\" class=\"e-cell-check\" :role=\"role('columnheader')\">\n                <ECheckbox\n                  bare\n                  :label=\"vopt ? t('selectAll') : t('selectAllPage')\"\n                  :model-value=\"allOn\"\n                  :indeterminate=\"someOn && !allOn\"\n                  @update:model-value=\"table.toggleAllPageRowsSelected(!allOn)\"\n                />\n              </th>\n              <th\n                v-for=\"(c, i) in cols\"\n                :key=\"c.key\"\n                scope=\"col\"\n                :role=\"role('columnheader')\"\n                :class=\"{ 'e-num': c.numeric, 'e-center': c.align === 'center', 'e-sticky': stick(i) }\"\n                :style=\"stickStyle(i)\"\n                :aria-sort=\"\n                  c.sortable\n                    ? sort?.key === c.key\n                      ? sort.dir === 'asc'\n                        ? 'ascending'\n                        : 'descending'\n                      : 'none'\n                    : undefined\n                \"\n              >\n                <button\n                  v-if=\"c.sortable\"\n                  type=\"button\"\n                  class=\"e-sortbtn\"\n                  @click=\"table.getColumn(c.key)?.toggleSorting()\"\n                >\n                  <slot :name=\"`header-${c.key}`\" :column=\"c\">{{ c.label }}</slot>\n                  <EIcon\n                    :name=\"sort?.key === c.key ? (sort.dir === 'asc' ? 'arrow-up' : 'arrow-down') : 'sort'\"\n                    small\n                  />\n                </button>\n                <slot v-else :name=\"`header-${c.key}`\" :column=\"c\">{{ c.label }}</slot>\n                <EDataGridResizer\n                  v-if=\"resizable && c.resizable !== false\"\n                  :label=\"c.label\"\n                  :width=\"widthOf(c)\"\n                  :min=\"c.minWidth || 72\"\n                  @resize=\"setWidth(c.key, $event)\"\n                  @reset=\"resetWidth(c.key)\"\n                />\n              </th>\n            </tr>\n            <tr v-if=\"hasFilterRow\" class=\"e-filterrow\" :role=\"role('row')\">\n              <td v-if=\"selectable\" class=\"e-cell-check\" :role=\"role('cell')\" />\n              <td\n                v-for=\"(c, i) in cols\"\n                :key=\"c.key\"\n                :role=\"role('cell')\"\n                :class=\"{ 'e-sticky': stick(i) }\"\n                :style=\"stickStyle(i)\"\n              >\n                <template v-if=\"c.filter\">\n                  <ESelect\n                    v-if=\"c.filter.type === 'select'\"\n                    bare\n                    :aria-label=\"t('filterColumn', { col: c.label })\"\n                    :placeholder=\"t('all')\"\n                    :options=\"selectOptions(c)\"\n                    :model-value=\"textFilter(c.key) || ALL\"\n                    @update:model-value=\"setFilter(c.key, $event === ALL ? '' : $event)\"\n                  />\n                  <div v-else-if=\"c.filter.type === 'number'\" class=\"e-filter-range\">\n                    <ETextField\n                      hide-label\n                      inputmode=\"decimal\"\n                      :label=\"t('minOf', { col: t('filterColumn', { col: c.label }) })\"\n                      :placeholder=\"t('min')\"\n                      :model-value=\"numberFilter(c.key).min\"\n                      @update:model-value=\"setFilter(c.key, { min: $event, max: numberFilter(c.key).max })\"\n                    />\n                    <ETextField\n                      hide-label\n                      inputmode=\"decimal\"\n                      :label=\"t('maxOf', { col: t('filterColumn', { col: c.label }) })\"\n                      :placeholder=\"t('max')\"\n                      :model-value=\"numberFilter(c.key).max\"\n                      @update:model-value=\"setFilter(c.key, { min: numberFilter(c.key).min, max: $event })\"\n                    />\n                  </div>\n                  <ETextField\n                    v-else\n                    hide-label\n                    type=\"search\"\n                    :label=\"t('filterColumn', { col: c.label })\"\n                    :placeholder=\"t('filter')\"\n                    :model-value=\"textFilter(c.key)\"\n                    @update:model-value=\"setFilter(c.key, $event)\"\n                  />\n                </template>\n              </td>\n            </tr>\n          </thead>\n          <tbody :role=\"role('rowgroup')\">\n            <template v-if=\"loading\">\n              <tr v-for=\"n in 5\" :key=\"`s${n}`\" :role=\"role('row')\">\n                <td v-if=\"selectable\" class=\"e-cell-check\" :role=\"role('cell')\" />\n                <td v-for=\"c in cols\" :key=\"c.key\" :role=\"role('cell')\"><span class=\"e-skel\" /></td>\n              </tr>\n            </template>\n            <tr v-else-if=\"view.length === 0\" :role=\"role('row')\">\n              <td :colspan=\"colCount\" class=\"e-grid-empty\" :role=\"role('cell')\">\n                <EEmptyState bare :icon=\"emptyIcon || 'search'\" :title=\"emptyTitle || t('noResults')\">\n                  {{ emptyText || (anyFilter || q ? t(\"noMatchesFilters\") : t(\"nothingYet\")) }}\n                  <template v-if=\"anyFilter || q\" #action>\n                    <EButton variant=\"outline\" @click=\"clearFilters\">{{ t(\"clearFilters\") }}</EButton>\n                  </template>\n                </EEmptyState>\n              </td>\n            </tr>\n            <template v-else>\n              <tr v-if=\"vopt && spaceTop > 0\" aria-hidden=\"true\" class=\"e-spacer\" :style=\"{ height: `${spaceTop}px` }\">\n                <td :colspan=\"colCount\" />\n              </tr>\n              <tr\n                v-for=\"{ row, index } in rowsToRender\"\n                :key=\"row.id\"\n                :role=\"role('row')\"\n                :data-selected=\"row.getIsSelected() ? '' : undefined\"\n                :aria-rowindex=\"vopt ? index + 2 + (hasFilterRow ? 1 : 0) : undefined\"\n              >\n                <td v-if=\"selectable\" class=\"e-cell-check\" :role=\"role('cell')\">\n                  <ECheckbox\n                    bare\n                    :label=\"t('selectRow')\"\n                    :model-value=\"row.getIsSelected()\"\n                    @update:model-value=\"row.toggleSelected($event)\"\n                  />\n                </td>\n                <td\n                  v-for=\"(c, i) in cols\"\n                  :key=\"c.key\"\n                  :role=\"role('cell')\"\n                  :data-label=\"c.label\"\n                  :class=\"{ 'e-num': c.numeric, 'e-center': c.align === 'center', 'e-sticky': stick(i) }\"\n                  :style=\"stickStyle(i)\"\n                >\n                  <slot :name=\"`cell-${c.key}`\" v-bind=\"cellProps(row, c)\">{{ row.original[c.key] }}</slot>\n                </td>\n              </tr>\n              <tr\n                v-if=\"vopt && spaceBottom > 0\"\n                aria-hidden=\"true\"\n                class=\"e-spacer\"\n                :style=\"{ height: `${spaceBottom}px` }\"\n              >\n                <td :colspan=\"colCount\" />\n              </tr>\n            </template>\n          </tbody>\n        </table>\n      </div>\n      <div v-if=\"!bare\" class=\"e-grid-foot\">\n        <span class=\"e-grid-range\">{{\n          total === 0\n            ? t(\"rows\", { n: 0 })\n            : vopt || pageSize === 0\n              ? t(\"rows\", { n: total })\n              : t(\"showing\", { from, to, total })\n        }}</span>\n        <EPagination\n          v-if=\"pageSize > 0 && pages > 1\"\n          :model-value=\"cur\"\n          :page-count=\"pages\"\n          @update:model-value=\"page = $event\"\n        />\n      </div>\n      <span class=\"e-sr\" role=\"status\" aria-live=\"polite\">{{\n        loading\n          ? t(\"loading\")\n          : (sortedCol\n              ? t(\"sortedBy\", { col: sortedCol.label, dir: t(sort?.dir === \"asc\" ? \"ascending\" : \"descending\") }) + \" \"\n              : \"\") + t(\"rowsAnnounce\", { n: total })\n      }}</span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-table {\n    width: 100%;\n    border-collapse: collapse;\n    font: 400 var(--e-text-md) / 1.4 var(--e-font-sans);\n  }\n\n  .e-table th {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-bottom: var(--e-stroke-card) solid var(--e-border-strong);\n    background: var(--e-surface-tint);\n    text-align: start;\n    white-space: nowrap;\n    font: 600 var(--e-text-xs) / 1.2 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-muted);\n  }\n\n  .e-table td {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    vertical-align: middle;\n  }\n\n  .e-table tbody tr:first-child td {\n    border-top: 0;\n  }\n\n  .e-table tbody tr:hover td {\n    background: var(--e-surface-hover);\n  }\n\n  .e-table .e-num {\n    text-align: end;\n    font-family: var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n  }\n\n  .e-table th.e-num {\n    font-family: var(--e-font-mono);\n  }\n\n  .e-table .e-center {\n    text-align: center;\n  }\n\n  .e-skel {\n    display: block;\n    height: 14px;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border);\n    outline: var(--e-stroke-hair) solid var(--e-border);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\n    animation: e-pulse 1.4s ease-in-out infinite;\n  }\n\n  @keyframes e-pulse {\n    50% {\n      opacity: 0.5;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-skel {\n      animation: none;\n    }\n  }\n\n  .e-grid {\n    --e-grid-head-h: 45px;\n\n    isolation: isolate;\n    border-radius: var(--e-radius-md);\n    min-width: 0;\n  }\n\n  .e-grid-frame::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: var(--e-z-sticky);\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-card));\n    pointer-events: none;\n  }\n\n  .e-grid-frame {\n    position: relative;\n    overflow: hidden;\n    border-radius: inherit;\n    background: var(--e-surface);\n  }\n\n  .e-grid-bar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-grid-search {\n    flex: 1 1 10rem;\n    max-width: 24rem;\n  }\n\n  .e-grid-search .e-input {\n    padding-inline-start: var(--e-space-2);\n  }\n\n  .e-grid-picked {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n  }\n\n  .e-grid-count {\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n  }\n\n  .e-grid-tools {\n    margin-inline-start: auto;\n    display: flex;\n    gap: var(--e-space-2);\n  }\n\n  .e-grid-scroll {\n    overflow: auto;\n    max-height: var(--e-grid-max-h, none);\n  }\n\n  .e-grid-scroll:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-gridtable {\n    border-radius: 0;\n    box-shadow: none;\n    min-width: var(--e-grid-min-w, 0);\n  }\n\n  .e-gridtable thead th {\n    position: sticky;\n    top: 0;\n    z-index: var(--e-z-raised);\n    height: var(--e-grid-head-h);\n    box-sizing: border-box;\n  }\n\n  .e-gridtable th[aria-sort=\"ascending\"],\n  .e-gridtable th[aria-sort=\"descending\"] {\n    color: var(--e-ink);\n  }\n\n  .e-sortbtn {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    min-height: var(--e-control-height);\n    padding: var(--e-space-1) 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    text-transform: inherit;\n    cursor: pointer;\n  }\n\n  .e-sortbtn:hover {\n    color: var(--e-ink);\n  }\n\n  .e-sortbtn:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-gridtable .e-cell-check {\n    width: 52px;\n    padding-inline-end: 0;\n    vertical-align: middle;\n  }\n\n  .e-gridtable tbody tr[data-selected] td {\n    background: var(--e-surface-tint);\n  }\n\n  .e-gridtable tbody tr[data-selected]:hover td {\n    background: var(--e-surface-hover);\n    box-shadow: inset 0 0 0 0 transparent;\n  }\n\n  .e-table td.e-grid-empty {\n    padding: 0;\n  }\n\n  .e-grid-foot {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-grid-range {\n    font: 500 var(--e-text-xs) / 1.2 var(--e-font-mono);\n    color: var(--e-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .e-grid-foot .e-pager {\n    justify-content: flex-end;\n  }\n\n  .e-filterrow td {\n    padding: var(--e-space-1) var(--e-space-3);\n    background: var(--e-surface);\n    border-bottom: var(--e-stroke-card) solid var(--e-border-strong);\n    border-top: 0;\n    position: sticky;\n    top: var(--e-grid-head-h);\n    z-index: var(--e-z-raised);\n  }\n\n  .e-filterrow .e-input {\n    height: var(--e-control-height);\n    font-size: var(--e-text-md);\n    padding-inline: var(--e-space-3);\n  }\n\n  .e-filterrow .e-sel-trigger {\n    height: var(--e-control-height);\n    padding-inline-end: var(--e-space-2);\n  }\n\n  .e-filter-range {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--e-space-1);\n  }\n\n  .e-gridtable thead th,\n  .e-gridtable thead td {\n    white-space: nowrap;\n  }\n\n  .e-resizer {\n    position: absolute;\n    top: 0;\n    inset-inline-end: calc(var(--e-space-6) / -2);\n    z-index: var(--e-z-raised);\n    width: var(--e-space-6);\n    height: 100%;\n    cursor: col-resize;\n    touch-action: none;\n  }\n\n  .e-resizer::before {\n    content: \"\";\n    position: absolute;\n    inset-block: 0;\n    inset-inline: -10px;\n  }\n\n  .e-resizer::after {\n    content: \"\";\n    position: absolute;\n    top: 22%;\n    inset-inline-start: 11px;\n    width: var(--e-stroke-hair);\n    height: 56%;\n    background: var(--e-border-strong);\n    transition: width var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-resizer:hover::after,\n  .e-resizer:focus-visible::after {\n    inset-inline-start: 10px;\n    width: 3px;\n    background: var(--e-primary);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-resizer:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-gridtable[style*=\"table-layout\"] td,\n  .e-gridtable[style*=\"table-layout\"] th {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .e-gridtable .e-sticky {\n    position: sticky;\n    z-index: var(--e-z-raised);\n    box-shadow: inset calc(-1 * var(--e-stroke-hair)) 0 0 var(--e-border);\n  }\n\n  .e-gridtable thead th.e-sticky {\n    z-index: var(--e-z-sticky);\n    background: var(--e-surface-tint);\n  }\n\n  .e-gridtable tbody td.e-sticky {\n    background: var(--e-surface);\n  }\n\n  .e-gridtable tbody tr:hover td.e-sticky {\n    background: var(--e-surface-hover);\n  }\n\n  .e-gridtable tbody tr[data-selected] td.e-sticky {\n    background: var(--e-surface-tint);\n  }\n\n  .e-gridtable--virtual td {\n    height: var(--e-row-h);\n    padding-block: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .e-spacer td {\n    padding: 0;\n    border: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-resizer::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-gridtable tbody tr[data-selected] td {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .e-resizer::after {\n      background: CanvasText;\n    }\n\n    .e-resizer:hover::after,\n    .e-resizer:focus-visible::after {\n      background: Highlight;\n    }\n\n    .e-skel {\n      background: GrayText;\n    }\n  }\n\n  @media print {\n    .e-grid-scroll {\n      overflow: visible;\n      max-height: none;\n    }\n  }\n\n  .e-grid--cards {\n    container-type: inline-size;\n  }\n\n  .e-grid-sortsel {\n    display: none;\n    min-width: 11rem;\n  }\n\n  .e-grid-bar--sortonly {\n    display: none;\n  }\n\n  @container (max-width: 40rem) {\n    .e-grid-sortsel {\n      display: block;\n      flex: 1 1 11rem;\n    }\n\n    .e-grid-bar--sortonly {\n      display: flex;\n    }\n\n    .e-grid--cards .e-grid-scroll {\n      overflow: visible;\n      max-height: none;\n    }\n\n    .e-grid--cards .e-gridtable,\n    .e-grid--cards .e-gridtable tbody {\n      display: block;\n      min-width: 0;\n      width: 100%;\n    }\n\n    .e-grid--cards .e-gridtable thead {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      /* stylelint-disable-next-line property-no-deprecated -- clip hides text visually */\n      clip: rect(0 0 0 0);\n      white-space: nowrap;\n    }\n\n    .e-grid--cards .e-grid-frame {\n      overflow: visible;\n      background: transparent;\n    }\n\n    .e-grid--cards .e-grid-frame::after {\n      content: none;\n    }\n\n    .e-grid--cards .e-gridtable tbody tr {\n      display: block;\n      margin: 0 0 var(--e-space-3);\n      padding: var(--e-space-1) var(--e-space-4);\n      border-radius: var(--e-radius-md);\n      background: var(--e-surface);\n      box-shadow: var(--e-edge);\n      outline: var(--e-stroke-card) solid var(--e-border-strong);\n      outline-offset: 0;\n    }\n\n    .e-grid--cards .e-gridtable tbody tr:hover td {\n      background: transparent;\n    }\n\n    .e-grid--cards .e-gridtable tbody tr[data-selected] {\n      background: var(--e-surface-tint);\n    }\n\n    .e-grid--cards .e-gridtable tbody tr[data-selected] td {\n      background: transparent;\n    }\n\n    .e-grid--cards .e-gridtable td {\n      display: grid;\n      grid-template-columns: minmax(5rem, 38%) minmax(0, 1fr);\n      gap: var(--e-space-3);\n      align-items: baseline;\n      padding: var(--e-space-2) 0;\n      border-top: var(--e-stroke-hair) solid var(--e-border);\n      overflow: visible;\n      white-space: normal;\n      text-align: start;\n    }\n\n    .e-grid--cards .e-gridtable tbody tr:first-child td:not(:first-child) {\n      border-top: var(--e-stroke-hair) solid var(--e-border);\n    }\n\n    .e-grid--cards .e-gridtable tbody td:first-child {\n      border-top: 0;\n    }\n\n    .e-grid--cards .e-gridtable td::before {\n      content: attr(data-label);\n      font: 600 var(--e-text-xs) / 1.3 var(--e-font-mono);\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--e-muted);\n    }\n\n    .e-grid--cards .e-gridtable td.e-cell-check {\n      display: flex;\n      width: auto;\n      padding: var(--e-space-2) 0;\n    }\n\n    .e-grid--cards .e-gridtable td.e-cell-check::before {\n      content: none;\n    }\n\n    .e-grid--cards .e-gridtable .e-sticky {\n      position: static;\n      box-shadow: none;\n    }\n\n    .e-grid--cards .e-gridtable .e-num {\n      text-align: start;\n    }\n\n    .e-grid--cards .e-gridtable .e-grid-empty {\n      display: block;\n    }\n\n    .e-grid--cards .e-gridtable .e-grid-empty::before {\n      content: none;\n    }\n\n    .e-grid--cards .e-filterrow {\n      display: none;\n    }\n\n    .e-grid--cards .e-gridtable[style*=\"table-layout\"] td {\n      overflow: visible;\n      text-overflow: clip;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/DataGrid/EDataGrid.vue.d.ts

@@ -2,15 +2,15 @@ import { IconProp } from '../../icons/types.js';
 import { DataGridColumn, DataGridFilterValue, DataGridQuery, DataGridRow, DataGridSort, DataGridVirtual } from './types.js';
 declare const __VLS_export: <Row extends DataGridRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<({
-        /** The columns, in order. See `DataGridColumn`. */
+        /** The columns, in order. See `DataGridColumn` below. */
         columns: DataGridColumn<Row>[];
-        /** The rows. Each needs a unique `id`. */
+        /** The rows. Each needs a unique `id`; selection is by id. */
         rows: Row[];
-        /** Names the table for screen readers and the scrolling region. Required. */
+        /** Names the table for screen readers, and its scrolling region. */
         caption: string;
         /** One search box over all shown columns. */
         searchable?: boolean;
-        /** The search box's placeholder. Default "Search all columns". */
+        /** The search box's placeholder. @default "Search all columns" */
         searchPlaceholder?: string;
         /** A filter row under the headings, for columns that define a `filter`. */
         filterable?: boolean;
@@ -22,33 +22,38 @@ declare const __VLS_export: <Row extends DataGridRow>(__VLS_props: NonNullable<A
         columnToggle?: boolean;
         /** A checkbox on each row and a select-all in the heading. */
         selectable?: boolean;
-        /** Rows per page; 0 turns paging off. Default 10. */
+        /** Rows per page; 0 turns paging off. */
         pageSize?: number;
-        /** Stops the table growing past this height (any CSS length) and scrolls inside it. */
+        /** Stops the table growing past this height (any CSS length) and scrolls inside it, with a sticky header. */
         maxHeight?: string;
-        /** Renders only the rows in view, for thousands of rows. Replaces paging. */
+        /** Renders only the rows in view, for thousands of rows. Replaces paging. `true` or `{ rowHeight = 48, height = 440, overscan = 8 }`. */
         virtual?: boolean | DataGridVirtual;
-        /** Turns rows into cards below 40rem of the grid's own width. Default on; virtual and resizable grids keep the table. */
+        /** Turns rows into cards below 40rem of the grid's own width. On by default; `virtual` and `resizable` grids keep the table. */
         cards?: boolean;
-        /** Data lives on a server: show the rows given, and report every change through `queryChange`. */
+        /** Data lives on a server: show the rows given, in the order given, and report every change through `queryChange`. */
         manual?: boolean;
         /** With `manual`, how many rows there are in all. */
         total?: number;
-        /** Shows placeholder rows while data loads. */
+        /** Shows placeholder rows while data loads, with `aria-busy`. */
         loading?: boolean;
-        /** The title when there are no rows. Default "No results". */
+        /** The title when there are no rows. @default "No results" */
         emptyTitle?: string;
-        /** The sentence under the title when there are no rows. */
+        /** The sentence under the empty title, when there are no rows. */
         emptyText?: string;
-        /** The glyph above the title when there are no rows. Default "search". */
+        /** The icon above the empty title. @default "search" */
         emptyIcon?: IconProp;
-        /** A bare table for a short static list: no toolbar, filters, paging or footer. */
-        plain?: boolean;
+        /** No chrome: a bare table for a short static list, with no toolbar, filters, paging or footer. */
+        bare?: boolean;
     } & {
+        /** The sort: `{ key, dir: "asc" | "desc" }`, or `null` for none. */
         sort?: DataGridSort | null;
+        /** The current page, from 1. */
         page?: number;
+        /** The text in the search box. */
         search?: string;
+        /** The column filters, by column `key`: text, or `{ min, max }` strings for `number`. */
         filters?: Record<string, DataGridFilterValue>;
+        /** The selected row ids, kept across pages and filters. */
         selected?: string[];
     }) & {
         onQueryChange?: ((query: DataGridQuery) => any) | undefined;