@wssto2/vue-core 0.1.0 → 0.2.0

package/dist/app/application.d.ts

@@ -59,6 +59,11 @@ export interface ApplicationLocaleOptions {
     fallback?: string;
     /** The locales the application offers. Default: the library's (`en`, `hr`, `bs`, `sl`). */
     supported?: readonly string[];
+    /**
+     * The flag shown beside each locale's name in the language menu, as an ISO 3166-1 country code: `{ en: "GB", sl: "SI" }`.
+     * A flag stands for a language here, so the app chooses (English is not one country). No entry: the name alone.
+     */
+    flags?: Readonly<Record<string, string>>;
     /**
      * Called after a switch to another locale committed (not for the start locale, a switch to the locale already active, or a
      * switch a later one superseded), so the application can save the choice on the user. Not awaited: the page has already

package/dist/app/environment.d.ts

@@ -22,6 +22,8 @@ export interface ApplicationEnvironment {
     /** The active locale. */
     readonly locale: Readonly<Ref<string>>;
     readonly locales: readonly string[];
+    /** The flag country of each locale that has one (`{ en: "GB" }`); a locale without one shows no flag. */
+    readonly localeFlags: Readonly<Record<string, string>>;
     /** Switches the locale once the texts in use exist in it; see `MessageRuntime.setLocale`. */
     setLocale(locale: string): Promise<boolean>;
     /** Tries the start again after a failed one. */

package/dist/app/index.js

@@ -1,8 +1,8 @@
-var Ee = Object.defineProperty;
-var ke = (e, a, n) => a in e ? Ee(e, a, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[a] = n;
-var Y = (e, a, n) => ke(e, typeof a != "symbol" ? a + "" : a, n);
-import { effectScope as D, watch as P, defineComponent as ue, openBlock as Se, createElementBlock as Le, createVNode as Z, unref as _, withCtx as ee, createTextVNode as xe, toDisplayString as Ae, shallowRef as Me, computed as Re, h as te, createApp as Ne } from "vue";
-import { useI18n as je, createI18n as Oe } from "vue-i18n";
+var ke = Object.defineProperty;
+var Ee = (e, a, n) => a in e ? ke(e, a, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[a] = n;
+var Y = (e, a, n) => Ee(e, typeof a != "symbol" ? a + "" : a, n);
+import { effectScope as D, watch as P, defineComponent as ue, openBlock as Se, createElementBlock as Le, createVNode as Z, unref as _, withCtx as ee, createTextVNode as xe, toDisplayString as Ae, shallowRef as Me, computed as Re, h as te, createApp as je } from "vue";
+import { useI18n as Ne, createI18n as Oe } from "vue-i18n";
 import { createRouter as Te, isNavigationFailure as _e } from "vue-router";
 import { i as Ce, a as se } from "../environment-D3nozt9a.js";
 import { b as Ct } from "../environment-D3nozt9a.js";
@@ -16,23 +16,23 @@ import { c as Ue, _ as Xe, i as Ye } from "../NoAccess.vue_vue_type_script_setup
 import { b as Ze, c as et, n as re } from "../navigation-B33ikiCS.js";
 import { i as tt, c as st, s as ae } from "../feature-DyDtyMLU.js";
 import { S as It, d as Ft, p as Wt } from "../feature-DyDtyMLU.js";
-import { _ as ot } from "../Button.vue_vue_type_script_setup_true_lang-3f0emVNU.js";
+import { _ as ot } from "../Button.vue_vue_type_script_setup_true_lang-B1eZgLae.js";
 import { _ as nt } from "../EmptyState.vue_vue_type_script_setup_true_lang-BeGpHMUP.js";
 function rt(e) {
   const { platform: a } = e, n = D();
   let i = null, h = null, y = !1;
-  function b(l, d) {
+  function $(l, d) {
     const g = new AbortController(), u = { controller: g, stops: [] };
     for (const p of l)
       try {
-        const $ = d(p, g.signal);
-        typeof $ == "function" && u.stops.push({ owned: p, stop: $ });
-      } catch ($) {
-        e.onError($, p);
+        const b = d(p, g.signal);
+        typeof b == "function" && u.stops.push({ owned: p, stop: b });
+      } catch (b) {
+        e.onError(b, p);
       }
     return u;
   }
-  function E(l) {
+  function k(l) {
     if (l) {
       l.controller.abort();
       for (const { owned: d, stop: g } of l.stops.reverse())
@@ -43,24 +43,24 @@ function rt(e) {
         }
     }
   }
-  const k = (l) => e.effects.filter((d) => d.effect.scope === l), x = (l) => l.status !== "authenticated" ? null : e.sessionKey ? e.sessionKey(l) : String(l.user.id);
+  const E = (l) => e.effects.filter((d) => d.effect.scope === l), x = (l) => l.status !== "authenticated" ? null : e.sessionKey ? e.sessionKey(l) : String(l.user.id);
   return {
     start() {
       if (y || i) return;
-      i = b(
-        k("app"),
+      i = $(
+        E("app"),
         (d, g) => d.effect.start({ signal: g, platform: a, report: (u) => e.onError(u, d) })
       );
-      const l = k("session");
+      const l = E("session");
       n.run(
         () => P(
           () => x(a.session.state.value),
           (d) => {
-            E(h), h = null;
+            k(h), h = null;
             const g = a.session.state.value;
-            d === null || g.status !== "authenticated" || (h = b(
+            d === null || g.status !== "authenticated" || (h = $(
               l,
-              (u, p) => u.effect.start({ signal: p, platform: a, user: g.user, report: ($) => e.onError($, u) })
+              (u, p) => u.effect.start({ signal: p, platform: a, user: g.user, report: (b) => e.onError(b, u) })
             ));
           },
           { immediate: !0, flush: "sync" }
@@ -68,7 +68,7 @@ function rt(e) {
       );
     },
     dispose() {
-      y || (y = !0, n.stop(), E(h), E(i), h = i = null);
+      y || (y = !0, n.stop(), k(h), k(i), h = i = null);
     }
   };
 }
@@ -79,7 +79,7 @@ const at = { class: "mx-auto flex min-h-screen max-w-content items-center justif
   },
   emits: ["retry"],
   setup(e) {
-    const { t: a } = je();
+    const { t: a } = Ne();
     return (n, i) => (Se(), Le("div", at, [
       Z(_(nt), {
         title: _(a)("core.startup.title"),
@@ -130,25 +130,25 @@ function ct(e) {
   for (const o of i)
     for (const s of o.requires)
       h.has(s) || n(w(o), `requires the feature "${s}", which is not in the features list.`);
-  const y = [], b = /* @__PURE__ */ new Set(), E = (o) => {
-    if (b.has(o.id)) return;
+  const y = [], $ = /* @__PURE__ */ new Set(), k = (o) => {
+    if ($.has(o.id)) return;
     const s = y.indexOf(o.id);
     if (s !== -1) {
-      n(w(o), `requirements form a cycle: ${[...y.slice(s), o.id].join(" -> ")}.`), b.add(o.id);
+      n(w(o), `requirements form a cycle: ${[...y.slice(s), o.id].join(" -> ")}.`), $.add(o.id);
       return;
     }
     y.push(o.id);
     for (const c of o.requires) {
       const m = h.get(c);
-      m && E(m);
+      m && k(m);
     }
-    y.pop(), b.add(o.id);
+    y.pop(), $.add(o.id);
   };
-  i.forEach(E);
-  const k = new Set(e.platform.config.capabilities);
+  i.forEach(k);
+  const E = new Set(e.platform.config.capabilities);
   for (const o of i)
     for (const s of o.backend)
-      k.has(s) || n(w(o), `needs the backend capability "${s}", which the server does not report.`);
+      E.has(s) || n(w(o), `needs the backend capability "${s}", which the server does not report.`);
   const x = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
   for (const o of i) {
     for (const s of o.routes) {
@@ -173,24 +173,24 @@ function ct(e) {
     for (const c of s) {
       const m = u.get(c.namespace);
       m ? n(o, `declares the message namespace "${c.namespace}", which ${m} declares too.`) : u.set(c.namespace, o);
-      for (const N of Object.keys(c.loaders))
-        e.supportedLocales.includes(N) || n(o, `the namespace "${c.namespace}" has a loader for "${N}", which is not a supported locale (${e.supportedLocales.join(", ")}).`);
+      for (const j of Object.keys(c.loaders))
+        e.supportedLocales.includes(j) || n(o, `the namespace "${c.namespace}" has a loader for "${j}", which is not a supported locale (${e.supportedLocales.join(", ")}).`);
     }
   };
   for (const o of i) p(w(o), o.messages);
   p(ce, e.messages);
-  const $ = (o) => u.has(o);
+  const b = (o) => u.has(o);
   for (const o of i)
     for (const { record: s } of B(o.routes))
       for (const c of s.meta?.messages ?? [])
-        $(c) || n(w(o), `the route "${String(s.name ?? s.path)}" needs the message namespace "${c}", which nobody declares.`);
+        b(c) || n(w(o), `the route "${String(s.name ?? s.path)}" needs the message namespace "${c}", which nobody declares.`);
   const A = /* @__PURE__ */ new Map();
   for (const o of i)
     for (const s of o.contributions) {
       const c = A.get(s.id);
       c ? n(w(o), `declares the shell contribution "${s.id}", which feature "${c.id}" declares too.`) : A.set(s.id, o), e.shellSlots && !s.optional && !e.shellSlots.includes(s.slot) && n(w(o), `contributes "${s.id}" to the slot "${s.slot}", which the shell does not render (it renders ${e.shellSlots.join(", ") || "none"}). Mark it optional to leave it out instead.`);
       for (const m of s.messages ?? [])
-        $(m) || n(w(o), `the contribution "${s.id}" needs the message namespace "${m}", which nobody declares.`);
+        b(m) || n(w(o), `the contribution "${s.id}" needs the message namespace "${m}", which nobody declares.`);
     }
   const R = /* @__PURE__ */ new Map();
   for (const o of i)
@@ -218,30 +218,32 @@ function fe(e, a) {
   }));
 }
 const le = (e) => [...new Set(e)];
-function jt(e) {
+function Nt(e) {
   const { platform: a } = e, n = e.locale?.supported ?? Object.keys(oe), i = e.locale?.fallback ?? "en", h = e.shell === void 0 ? void 0 : ut(e.shell) ? e.shell : { component: e.shell, slots: void 0, progress: void 0 }, y = [];
   n.includes(i) || y.push({ owner: "application", message: `the fallback locale "${i}" is not among the supported locales (${n.join(", ")}).` });
-  const b = e.locale?.initial ?? (n.includes(a.config.locale) ? a.config.locale : i);
-  n.includes(b) || y.push({ owner: "application", message: `the initial locale "${b}" is not among the supported locales (${n.join(", ")}).` });
-  const E = [Je, Fe, He, Ve, De, re, ae, ne, se], k = ct({
+  for (const t of Object.keys(e.locale?.flags ?? {}))
+    n.includes(t) || y.push({ owner: "application", message: `locale.flags names the locale "${t}", which is not among the supported locales (${n.join(", ")}).` });
+  const $ = e.locale?.initial ?? (n.includes(a.config.locale) ? a.config.locale : i);
+  n.includes($) || y.push({ owner: "application", message: `the initial locale "${$}" is not among the supported locales (${n.join(", ")}).` });
+  const k = [Je, Fe, He, Ve, De, re, ae, ne, se], E = ct({
     features: e.features,
     platform: a,
     messages: e.messages ?? [],
-    reservedContexts: E,
+    reservedContexts: k,
     supportedLocales: n,
     shellSlots: h?.slots
-  }), x = [...y, ...k.issues], l = k.features, d = Ze(
+  }), x = [...y, ...E.issues], l = E.features, d = Ze(
     l.flatMap((t) => t.navigation.map((r) => ({ feature: t.id, binding: r }))),
     e.navigation
   );
   for (const t of d.issues) x.push({ owner: "navigation", message: t });
   if (x.length > 0) throw new ie(x);
-  const g = lt(b, i, e.i18n), u = g.global;
+  const g = lt($, i, e.i18n), u = g.global;
   for (const [t, r] of Object.entries(oe)) u.mergeLocaleMessage(t, r);
   for (const [t, r] of Object.entries(e.i18n?.messages ?? {})) u.mergeLocaleMessage(t, r);
-  const p = Ke({ locale: () => u.locale.value, formatters: e.formatting }), $ = [...l.flatMap((t) => t.messages), ...e.messages ?? []], A = (t) => (e.onError ?? ft)({ ...t, route: s.currentRoute.value.matched.length > 0 ? s.currentRoute.value.fullPath : null }), R = We({
+  const p = Ke({ locale: () => u.locale.value, formatters: e.formatting }), b = [...l.flatMap((t) => t.messages), ...e.messages ?? []], A = (t) => (e.onError ?? ft)({ ...t, route: s.currentRoute.value.matched.length > 0 ? s.currentRoute.value.fullPath : null }), R = We({
     target: u,
-    namespaces: $,
+    namespaces: b,
     fallback: i,
     supported: n,
     onFailure: (t) => A({ source: "messages", error: t.error, detail: `${t.namespace} (${t.locale})`, feature: o.get(t.namespace) })
@@ -249,7 +251,7 @@ function jt(e) {
     history: e.router?.history ?? Ue(),
     routes: l.flatMap((t) => fe(t.routes, t.id)),
     scrollBehavior: e.router?.scrollBehavior ?? ((t, r) => t.name === r.name ? !1 : { top: 0 })
-  }), c = e.router?.login ?? { name: "login" }, m = e.router?.home ?? { path: "/" }, N = [], H = (t) => {
+  }), c = e.router?.login ?? { name: "login" }, m = e.router?.home ?? { path: "/" }, j = [], H = (t) => {
     try {
       return s.resolve(t).matched.length > 0 ? null : "matches no route";
     } catch (r) {
@@ -259,17 +261,18 @@ function jt(e) {
   };
   if (l.some((t) => t.routes.some((r) => r.meta?.public !== !0))) {
     const t = H(c) ?? (s.resolve(c).meta.public === !0 ? null : "is not public (meta.public: true)");
-    t && N.push({ owner: "application", message: `the login route ${JSON.stringify(c)} ${t.replace("matches no route", "does not exist")}, but protected routes are installed: an anonymous visitor would have nowhere to go. Install a feature with the login route or set router.login.` });
+    t && j.push({ owner: "application", message: `the login route ${JSON.stringify(c)} ${t.replace("matches no route", "does not exist")}, but protected routes are installed: an anonymous visitor would have nowhere to go. Install a feature with the login route or set router.login.` });
   }
   for (const { feature: t, binding: r } of d.destinations.values()) {
     const f = H(r.to);
-    f && N.push({ owner: `feature "${t}"`, message: `the destination "${r.destination}" is bound to ${JSON.stringify(r.to)}, which ${f}.` });
+    f && j.push({ owner: `feature "${t}"`, message: `the destination "${r.destination}" is bound to ${JSON.stringify(r.to)}, which ${f}.` });
   }
-  if (N.length > 0) throw new ie(N);
-  const j = Me({ status: "idle" }), K = {
-    state: j,
+  if (j.length > 0) throw new ie(j);
+  const N = Me({ status: "idle" }), K = {
+    state: N,
     locale: Re(() => u.locale.value),
     locales: n,
+    localeFlags: e.locale?.flags ?? {},
     setLocale: async (t) => {
       const r = u.locale.value, f = await R.setLocale(t);
       if (f && u.locale.value !== r) {
@@ -305,19 +308,19 @@ function jt(e) {
     name: "ApplicationRoot",
     setup() {
       return () => {
-        const t = j.value;
+        const t = N.value;
         return t.status === "failed" ? te(it, { kind: t.kind, onRetry: () => void q() }) : t.status !== "ready" ? null : te(h?.component ?? Qe);
       };
     }
-  }), v = Ne(ye);
+  }), v = je(ye);
   Ge(v, a), v.use(g), Ie(v, p), F = Pe(v), Be(v), Ce(v), e.icons && qe(v, ...Array.isArray(e.icons) ? e.icons : [e.icons]), v.provide(se, K), v.provide(re, ge), v.provide(ae, ve), v.provide(ne, we);
   for (const t of l) for (const { key: r, value: f } of t.contexts) v.provide(r, f);
   let M = !1, J = !1, z = !1, Q = !1;
   const T = [];
-  function be() {
+  function $e() {
     const t = v.config.errorHandler;
-    v.config.errorHandler = (L, $e, X) => {
-      A({ source: "vue", error: L, detail: X }), t?.(L, $e, X);
+    v.config.errorHandler = (L, be, X) => {
+      A({ source: "vue", error: L, detail: X }), t?.(L, be, X);
     };
     const r = (L) => A({ source: "unhandledrejection", error: L.reason }), f = (L) => {
       L.error && A({ source: "window", error: L.error });
@@ -350,10 +353,10 @@ function jt(e) {
     ), T.push(() => O.stop());
   }
   const C = (t, r) => {
-    j.value = { status: "failed", kind: t, error: r };
+    N.value = { status: "failed", kind: t, error: r };
   };
   async function U() {
-    j.value = { status: "starting" };
+    N.value = { status: "starting" };
     const t = await a.session.restore();
     if (M) return;
     if (t.status === "failed") return C("session", t.error);
@@ -368,23 +371,23 @@ function jt(e) {
         M || C("startup", f);
         return;
       }
-      Q || (v.use(s), Q = !0), j.value = { status: "ready" }, V.start();
+      Q || (v.use(s), Q = !0), N.value = { status: "ready" }, V.start();
     }
   }
   async function q() {
-    M || j.value.status !== "failed" || (await R.retry(), await U());
+    M || N.value.status !== "failed" || (await R.retry(), await U());
   }
   return {
     app: v,
     router: s,
     i18n: g,
-    state: j,
+    state: N,
     locale: K.locale,
     setLocale: K.setLocale,
     async mount(t) {
       if (M) throw new Error("This application was disposed; create a new one with createApplication().");
       if (J) throw new Error("This application is already mounted.");
-      J = !0, be(), await U(), !M && (v.mount(t), z = !0);
+      J = !0, $e(), await U(), !M && (v.mount(t), z = !0);
     },
     retry: q,
     dispose() {
@@ -409,31 +412,31 @@ function Ot(e = {}) {
     id: "vue-core.keep-session-alive",
     scope: "session",
     start({ signal: i, platform: h, report: y }) {
-      let b, E = null;
-      const k = () => {
+      let $, k = null;
+      const E = () => {
         const p = h.session.state.value;
         return p.status === "authenticated" && p.expiresAt ? p.expiresAt.getTime() - Date.now() - a : null;
-      }, x = () => (E ?? (E = (async () => {
+      }, x = () => (k ?? (k = (async () => {
         try {
           await e.renew?.(h), await h.session.refresh();
         } catch (p) {
           y(p);
         } finally {
-          E = null;
+          k = null;
         }
-      })()), E);
+      })()), k);
       function l(p = 0) {
-        clearTimeout(b);
-        const $ = k();
-        $ !== null && !i.aborted && (b = setTimeout(() => void d(), Math.min(Math.max($, p), pt)));
+        clearTimeout($);
+        const b = E();
+        b !== null && !i.aborted && ($ = setTimeout(() => void d(), Math.min(Math.max(b, p), pt)));
       }
       async function d() {
         if (i.aborted || !navigator.onLine) return;
-        const p = k();
+        const p = E();
         if (p !== null) {
           if (p <= 0) {
             if (await x(), i.aborted) return;
-            l((k() ?? 1) <= 0 ? n : 0);
+            l((E() ?? 1) <= 0 ? n : 0);
             return;
           }
           l();
@@ -443,7 +446,7 @@ function Ot(e = {}) {
         document.visibilityState === "visible" && d();
       }, u = () => void d();
       return document.addEventListener("visibilitychange", g), window.addEventListener("online", u), d(), () => {
-        clearTimeout(b), document.removeEventListener("visibilitychange", g), window.removeEventListener("online", u);
+        clearTimeout($), document.removeEventListener("visibilitychange", g), window.removeEventListener("online", u);
       };
     }
   };
@@ -452,7 +455,7 @@ export {
   ie as ApplicationError,
   It as ShellOutlet,
   se as applicationKey,
-  jt as createApplication,
+  Nt as createApplication,
   Ft as defineFeature,
   Ot as keepSessionAlive,
   Wt as provideContext,

package/dist/button/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Button } from "./Button.vue";
-export { useKeyboardShortcut, matchesShortcut, type KeyboardShortcut } from "./shortcut";
+export { useKeyboardShortcut, matchesShortcut, shortcutKeys, useShortcutRegistry, type KeyboardShortcut, type ShortcutListing } from "./shortcut";

package/dist/button/index.js

@@ -1,6 +1,8 @@
-import { _ as a, m as r, u as s } from "../Button.vue_vue_type_script_setup_true_lang-3f0emVNU.js";
+import { _ as a, m as o, s as r, u, a as e } from "../Button.vue_vue_type_script_setup_true_lang-B1eZgLae.js";
 export {
   a as Button,
-  r as matchesShortcut,
-  s as useKeyboardShortcut
+  o as matchesShortcut,
+  r as shortcutKeys,
+  u as useKeyboardShortcut,
+  e as useShortcutRegistry
 };

package/dist/button/shortcut.d.ts

@@ -1,11 +1,18 @@
-import { type MaybeRefOrGetter } from "vue";
-/** A keyboard shortcut: the key (case-insensitive, as `KeyboardEvent.key`) and exactly the modifiers listed. */
+import { type ComputedRef, type MaybeRefOrGetter } from "vue";
+/**
+ * A keyboard shortcut: the key (case-insensitive, as `KeyboardEvent.key`) and exactly the modifiers listed.
+ * With a `label` it is listed by `useShortcutRegistry()` (a help dialog) for as long as its owner is mounted.
+ */
 export interface KeyboardShortcut {
     key: string;
     ctrlKey?: boolean;
     shiftKey?: boolean;
     altKey?: boolean;
     metaKey?: boolean;
+    /** What it does, in the app's language ("Search the list"); a function is read when the list is read, so it follows the locale. An empty text is not listed. */
+    label?: string | (() => string);
+    /** The heading it is listed under; any name the app has a heading for. The library's own use `"list"` and `"record"`. */
+    group?: string;
 }
 export declare function matchesShortcut(event: KeyboardEvent, shortcut: KeyboardShortcut): boolean;
 /**
@@ -15,3 +22,22 @@ export declare function matchesShortcut(event: KeyboardEvent, shortcut: Keyboard
  * scope. A shortcut without Ctrl, Alt or Meta never fires while the user is typing in a field.
  */
 export declare function useKeyboardShortcut(shortcut: MaybeRefOrGetter<KeyboardShortcut | undefined>, run: (event: KeyboardEvent) => void | false): void;
+/** The key and modifiers as keycap texts: `["Ctrl", "S"]`, or `["⌘", "K"]` on Apple platforms; arrows as arrows. */
+export declare function shortcutKeys(shortcut: KeyboardShortcut): string[];
+/** One row of a shortcut help list: what it does and every way of doing it (`/`, or `J` and `→`). */
+export interface ShortcutListing {
+    readonly group: string | null;
+    readonly label: string;
+    /** Each alternative as keycap texts, see `shortcutKeys`. */
+    readonly keys: readonly (readonly string[])[];
+}
+/**
+ * The shortcuts that exist on the page right now, for a help dialog: every `useKeyboardShortcut`
+ * with a `label` whose owner is mounted, the library's own included (list search and filters, the
+ * record pager). Rows with the same group and label are one row (two lists on a page share "/");
+ * reactive, so the dialog follows pages and locale.
+ *
+ *   const rows = useShortcutRegistry();
+ *   <dl v-for="row in rows"><dt>{{ row.label }}</dt><dd><kbd v-for="key in row.keys[0]">{{ key }}</kbd></dd></dl>
+ */
+export declare function useShortcutRegistry(): ComputedRef<ShortcutListing[]>;

package/dist/collection/CollectionPage.vue.d.ts

@@ -28,6 +28,7 @@ declare const _default: <Row extends object, Col extends Column<Row>>(__VLS_prop
         actions?: ((scope: {
             item: Row;
         }) => unknown) | undefined;
+    } & {
         toolbar?: () => unknown;
         empty?: () => unknown;
     } & {

package/dist/collection/CollectionRows.vue.d.ts

@@ -0,0 +1,59 @@
+import { type RouteLocationRaw } from "vue-router";
+import { type Column, type RowAction } from "./columns";
+import type { CollectionDisplay } from "./useCollection";
+import type { SortDirection } from "./types";
+declare const _default: <Row extends object, Col extends Column<Row>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSort?: ((key: string) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSort"> & {
+        columns: readonly Col[];
+        rows: readonly Row[];
+        rowKey: (row: Row) => string | number;
+        display: CollectionDisplay;
+        /** Phone rows instead of a table (see `useRowLayout`). */
+        phone: boolean;
+        /** Where a click on the row goes; null for a row that is not a link. */
+        link: (row: Row) => RouteLocationRaw | null;
+        /** Text to mark in an identity cell. */
+        search?: string;
+        /** The sort the header shows; a header sorts (`sort`) only when the column has a `sort` key. */
+        sorted?: {
+            key: string;
+            direction: SortDirection;
+        } | null;
+        rowActions?: (row: Row) => RowAction[];
+        rowLabel?: (row: Row) => string;
+        /** Pixels. */
+        rowHeight?: number;
+        density?: "regular" | "condensed";
+        actionsVisible?: boolean;
+        skeletonRows: number;
+        /** Rows to reserve the height of while loading, so the card does not jump when they land. */
+        reserveRows?: number;
+        rowClass?: (row: Row) => string | undefined;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: import("./slots").CellSlots<Row, Col> & {
+        leading?: ((scope: {
+            item: Row;
+            compact: boolean;
+        }) => unknown) | undefined;
+        actions?: ((scope: {
+            item: Row;
+        }) => unknown) | undefined;
+    } & {
+        toolbar?: () => unknown;
+        empty?: () => unknown;
+    } & {
+        /** What a failed load shows. */
+        failed?: () => unknown;
+    };
+    emit: (evt: "sort", key: string) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/collection/CollectionTable.vue.d.ts

@@ -1,4 +1,4 @@
-import { type Column, type RowAction } from "./columns";
+import type { Column, RowAction } from "./columns";
 import type { CollectionSlots } from "./slots";
 import type { Collection } from "./useCollection";
 declare const _default: <Row extends object, Col extends Column<Row>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{

package/dist/collection/DataTable.vue.d.ts

@@ -0,0 +1,47 @@
+import type { RouteLocationRaw } from "vue-router";
+import type { Column, RowAction } from "./columns";
+declare const _default: <Row extends object, const Col extends Column<Row, never>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
+        rows: readonly Row[];
+        columns: readonly Col[];
+        rowKey: (row: Row) => string | number;
+        /** Skeleton rows instead of the rows (and instead of the empty state). */
+        loading?: boolean;
+        /** How many skeleton rows `loading` shows. */
+        skeletonRows?: number;
+        /** Where a row's record lives: the row opens it on click, and an identity column links to it. */
+        recordRoute?: (row: Row) => RouteLocationRaw;
+        /** Quick actions per row: swiped in on phones (links), and the row's context menu (long press, right click). */
+        rowActions?: (row: Row) => RowAction[];
+        /** The accessible name of a row's menu and More button, e.g. the record's name. */
+        rowLabel?: (row: Row) => string;
+        /** Pixels. */
+        rowHeight?: number;
+        density?: "regular" | "condensed";
+        /** The row's actions are the only way to perform them, so the More button shows in the row. */
+        actionsVisible?: boolean;
+        /** Extra classes for a row, e.g. to set apart a total or the newest row. */
+        rowClass?: (row: Row) => string | undefined;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: import("./slots").CellSlots<Row, Col> & {
+        leading?: ((scope: {
+            item: Row;
+            compact: boolean;
+        }) => unknown) | undefined;
+        actions?: ((scope: {
+            item: Row;
+        }) => unknown) | undefined;
+    } & {
+        /** What shows when there are no rows; "No data" by default. */
+        empty?: () => unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/collection/RowActions.vue.d.ts

@@ -0,0 +1,19 @@
+import type { RowAction } from "./columns";
+/**
+ * The actions of a row as icon buttons in its actions cell: view, edit, delete, download. The same
+ * `RowAction[]` a table gives its swipe and context menu, so a row's actions are written once; the
+ * page builds the array from what the user may do (`access.can(...)`), so there is nothing to hide
+ * here. A link (`href`) is an anchor, a command (`onSelect`) a button; `critical` is red.
+ *
+ *   <template #actions="{ item }"><RowActions :actions="rowActions(item)" :disabled="item.locked" /></template>
+ *
+ * `disabled` greys out every button (a locked row); it does not hide them.
+ */
+type __VLS_Props = {
+    actions: readonly RowAction[];
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/collection/columns.d.ts

@@ -84,6 +84,8 @@ export type Column<Row, Sort extends string = string> = ColumnCommon<Row, Sort>
  *   const columns = [{ key: "title", label: t("title"), kind: "identity", mobile: "primary" }] satisfies CollectionColumns<Ticket>;
  */
 export type CollectionColumns<Row, Sort extends string = string> = readonly Column<Row, Sort>[];
+/** The columns of a `DataTable`: the collection's, without a `sort` key (a table over an array keeps its order). */
+export type TableColumns<Row> = readonly Column<Row, never>[];
 /** A quick action of a row: swiped in on phones (links only) and listed in the row's context menu. */
 export interface RowAction {
     key: string;

package/dist/collection/index.d.ts

@@ -5,7 +5,7 @@ export type { Collection, CollectionDisplay, LinkedQuery, SavedViewsHandle, UseC
 export type { CollectionLoader, ListPage, CollectionQuery, CollectionStateSource, LoadContext, SortDirection } from "./types";
 export { httpList, listParams, readListPage } from "./http";
 export { LIST_CONTEXT_PARAM } from "./location";
-export type { CollectionColumns, Column, ColumnKey, ColumnKind, ColumnValue, MobileRole, RowAction, SlotKey } from "./columns";
+export type { CollectionColumns, Column, ColumnKey, ColumnKind, ColumnValue, MobileRole, RowAction, SlotKey, TableColumns } from "./columns";
 export type { FilterDescriptor, FilterOption, ViewDescriptor } from "./filters";
 export { useCollectionNeighbors } from "./neighbors";
 export type { CollectionNeighbors, Neighbor, NeighborOptions } from "./neighbors";
@@ -14,6 +14,8 @@ export type { SavedView, SavedViews, SavedViewState } from "./savedViews";
 export { default as CollectionPage } from "./CollectionPage.vue";
 export { default as CollectionTable } from "./CollectionTable.vue";
 export { default as CollectionCell } from "./CollectionCell.vue";
+export { default as DataTable } from "./DataTable.vue";
+export { default as RowActions } from "./RowActions.vue";
 export { default as RecordIdentity } from "./RecordIdentity.vue";
 export { DATE_PRESETS, useDatePresetFilter } from "./datePresets";
-export type { CellSlots, CollectionSlots } from "./slots";
+export type { CellSlots, CollectionSlots, RowsSlots } from "./slots";