@eos-ui/vue 0.0.0-stage → 0.1.0

package/dist/components/CurrencyField/ECurrencyField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,88 @@
+/* empty css                */
+import { useConfig as e } from "../../config.js";
+import t from "../NumberField/ENumberField.js";
+import { computed as n, createBlock as r, defineComponent as i, mergeModels as a, openBlock as o, ref as s, useModel as c } from "vue";
+//#region src/components/CurrencyField/ECurrencyField.vue?vue&type=script&setup=true&lang.ts
+var l = /*@__PURE__*/ i({
+	__name: "ECurrencyField",
+	props: /*@__PURE__*/ a({
+		label: {},
+		hideLabel: { type: Boolean },
+		currency: {},
+		locale: {},
+		min: {},
+		max: {},
+		step: {},
+		prefix: {},
+		suffix: {},
+		name: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i, { expose: a }) {
+		let l = i, u = c(i, "modelValue"), d = e(), f = s(null);
+		function p(e, t) {
+			try {
+				return new Intl.NumberFormat(e, {
+					style: "currency",
+					currency: t
+				}).formatToParts(0).find((e) => e.type === "currency")?.value;
+			} catch {
+				return;
+			}
+		}
+		let m = n(() => p(l.locale || d.locale, l.currency || d.currency) ?? p(d.locale, d.currency) ?? d.currency);
+		return a({
+			input: n(() => f.value?.input ?? null),
+			focus: () => f.value?.focus()
+		}), (e, n) => (o(), r(t, {
+			id: i.id,
+			ref_key: "field",
+			ref: f,
+			modelValue: u.value,
+			"onUpdate:modelValue": n[0] ||= (e) => u.value = e,
+			class: "e-currency",
+			label: i.label,
+			"hide-label": i.hideLabel,
+			min: i.min ?? 0,
+			max: i.max,
+			step: i.step ?? .01,
+			prefix: i.prefix ?? m.value,
+			suffix: i.suffix,
+			name: i.name,
+			hint: i.hint,
+			error: i.error,
+			required: i.required,
+			optional: i.optional,
+			disabled: i.disabled
+		}, null, 8, [
+			"id",
+			"modelValue",
+			"label",
+			"hide-label",
+			"min",
+			"max",
+			"step",
+			"prefix",
+			"suffix",
+			"name",
+			"hint",
+			"error",
+			"required",
+			"optional",
+			"disabled"
+		]));
+	}
+});
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=ECurrencyField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/CurrencyField/ECurrencyField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ECurrencyField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","ENumberField","ENumberField_default","ECurrencyField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","config","useConfig","field","ref","symbolOf","locale","p","symbol","computed","openBlock","createBlock","_cache","$event"],"sources":["../../../src/components/CurrencyField/ECurrencyField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport ENumberField from \"../NumberField/ENumberField.vue\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. The symbol is decoration, so say what the amount is for. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** ISO 4217 code for the symbol. Default: the configured currency. */\n  currency?: string;\n  /** BCP 47 tag for the symbol. Default: the configured locale. */\n  locale?: string;\n  /** The lowest value. Default 0, so no negatives. */\n  min?: number;\n  /** The highest value. */\n  max?: number;\n  /** How far a button or arrow key moves the amount. Default 0.01. */\n  step?: number;\n  /** Replaces the currency symbol before the value. */\n  prefix?: string;\n  /** A unit after the value. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ENumberField> | null>(null);\n\nfunction symbolOf(locale: string, currency: string): string | undefined {\n  try {\n    const parts = new Intl.NumberFormat(locale, { style: \"currency\", currency }).formatToParts(0);\n    return parts.find((p) => p.type === \"currency\")?.value;\n  } catch {\n    return undefined;\n  }\n}\n\nconst symbol = computed(\n  () =>\n    symbolOf(props.locale || config.locale, props.currency || config.currency) ??\n    symbolOf(config.locale, config.currency) ??\n    config.currency,\n);\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ENumberField\n    :id=\"id\"\n    ref=\"field\"\n    v-model=\"model\"\n    class=\"e-currency\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :min=\"min ?? 0\"\n    :max=\"max\"\n    :step=\"step ?? 0.01\"\n    :prefix=\"prefix ?? symbol\"\n    :suffix=\"suffix\"\n    :name=\"name\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-currency .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAMS,IAAQC,GAkCRC,IAAQX,EAA0BU,GAAA,YAAkB,GAEpDG,IAASC,EAAU,GACnBC,IAAQC,EAA8C,IAAI;EAEhE,SAASC,EAAS,GAAgB,GAAsC;GACtE,IAAI;IAEF,OADc,IAAI,KAAK,aAAaC,GAAQ;KAAE,OAAO;KAAY;IAAS,CAAC,CAAC,CAAC,cAAc,CACpF,CAAA,CAAM,MAAM,MAAMC,EAAE,SAAS,UAAU,CAAC,EAAE;GACnD,QAAQ;IACN;GACF;EACF;EAEA,IAAMC,IAASC,QAEXJ,EAASR,EAAM,UAAUI,EAAO,QAAQJ,EAAM,YAAYI,EAAO,QAAQ,KACzEI,EAASJ,EAAO,QAAQA,EAAO,QAAQ,KACvCA,EAAO,QACX;E,OAEAL,EAAa;GACX,OAAOa,QAAeN,EAAM,OAAO,SAAS,IAAI;GAChD,aAAaA,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICd,EAAA,GAAAC,EAkBEC,GAAA;GAjBC,IAAIO,EAAA;GACD,SAAA;GAAJ,KAAIK;GACK,YAAAJ,EAAA;GAAA,uBAAA,AAAAa,EAAA,QAAA,MAAA,EAAK,QAAAC;GACd,OAAM;GACL,OAAOf,EAAA;GACP,cAAYA,EAAA;GACZ,KAAKA,EAAA,OAAG;GACR,KAAKA,EAAA;GACL,MAAMA,EAAA,QAAI;GACV,QAAQA,EAAA,UAAUU,EAAA;GAClB,QAAQV,EAAA;GACR,MAAMA,EAAA;GACN,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA"}

package/dist/components/CurrencyField/index.d.ts

@@ -0,0 +1 @@
+export { default as ECurrencyField } from './ECurrencyField.vue.js';

package/dist/components/DataGrid/EDataGrid.js

@@ -0,0 +1,8 @@
+import e from "./EDataGrid.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                          */
+//#region src/components/DataGrid/EDataGrid.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=EDataGrid.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,88 @@
+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`. */
+        columns: DataGridColumn<Row>[];
+        /** The rows. Each needs a unique `id`. */
+        rows: Row[];
+        /** Names the table for screen readers and the scrolling region. Required. */
+        caption: string;
+        /** One search box over all shown columns. */
+        searchable?: boolean;
+        /** 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;
+        /** Column edges can be dragged, or moved with the arrow keys. */
+        resizable?: boolean;
+        /** Keeps the first column in view while scrolling sideways. */
+        stickyFirst?: boolean;
+        /** A Columns menu to show and hide columns. */
+        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. */
+        pageSize?: number;
+        /** Stops the table growing past this height (any CSS length) and scrolls inside it. */
+        maxHeight?: string;
+        /** Renders only the rows in view, for thousands of rows. Replaces paging. */
+        virtual?: boolean | DataGridVirtual;
+        /** Turns rows into cards below 40rem of the grid's own width. Default on; virtual and resizable grids keep the table. */
+        cards?: boolean;
+        /** Data lives on a server: show the rows 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. */
+        loading?: boolean;
+        /** The title when there are no rows. Default "No results". */
+        emptyTitle?: string;
+        /** The sentence under the title when there are no rows. */
+        emptyText?: string;
+        /** The glyph above the title when there are no rows. Default "search". */
+        emptyIcon?: IconProp;
+        /** A bare table for a short static list: no toolbar, filters, paging or footer. */
+        plain?: boolean;
+    } & {
+        sort?: DataGridSort | null;
+        page?: number;
+        search?: string;
+        filters?: Record<string, DataGridFilterValue>;
+        selected?: string[];
+    }) & {
+        onQueryChange?: ((query: DataGridQuery) => any) | undefined;
+        "onUpdate:sort"?: ((value: DataGridSort | null) => any) | undefined;
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+        "onUpdate:search"?: ((value: string) => any) | undefined;
+        "onUpdate:filters"?: ((value: Record<string, DataGridFilterValue>) => any) | undefined;
+        "onUpdate:selected"?: ((value: string[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [K: `cell-${string}`]: (props: {
+            row: Row;
+            value: unknown;
+        }) => unknown;
+        [K: `header-${string}`]: (props: {
+            column: DataGridColumn<Row>;
+        }) => unknown;
+        /** Buttons that act on the selected rows, shown beside the count. */
+        "bulk-actions"?: () => unknown;
+        /** Anything else for the bar above the table. */
+        toolbar?: () => unknown;
+    };
+    emit: ((evt: "queryChange", query: DataGridQuery) => void) & (((event: "update:sort", value: DataGridSort | null) => void) & ((event: "update:page", value: number) => void) & ((event: "update:search", value: string) => void) & ((event: "update:filters", value: Record<string, DataGridFilterValue>) => void) & ((event: "update:selected", value: string[]) => void));
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};