@wssto2/vue-core 0.1.0 → 0.3.0

package/README.md

@@ -10,14 +10,17 @@ Its plan and rules are in [PLAN.md](PLAN.md).
 
 | Import | For |
 |---|---|
-| `@wssto2/vue-core/platform` | `readBootstrap`, `createPlatform` (HTTP client, session, access), typed contexts |
+| `@wssto2/vue-core/platform` | `readBootstrap`, `createPlatform` (HTTP client, session, access), `AccessGate`, typed contexts |
 | `@wssto2/vue-core/app` | `createApplication`, `defineFeature`, shell outlets, effects |
 | `@wssto2/vue-core/shell` | `backofficeShell`, the shell's parts for a custom one |
 | `@wssto2/vue-core/router` | `defineRoutes` (typed targets), guards, navigation |
-| `@wssto2/vue-core/collection` | `defineCollection`, `useCollection`, `CollectionPage`, record neighbors |
+| `@wssto2/vue-core/collection` | `defineCollection`, `useCollection`, `CollectionPage`, `DataTable` (a table over an array), record neighbors |
 | `@wssto2/vue-core/resource`, `/page` | `useRouteResource`, `ResourcePage`, `SectionNavigator`, `AdaptivePageShell` |
 | `@wssto2/vue-core/button`, `/controls`, `/content`, `/state`, `/overlay`, `/modal`, `/icon` | the primitives |
-| `@wssto2/vue-core/i18n`, `/format`, `/client` | messages, formatting, `HttpClient` and `ApiError` |
+| `@wssto2/vue-core/i18n`, `/format`, `/client` | messages, `useDescribeError`, formatting, `HttpClient` and `ApiError` |
+| `@wssto2/vue-core/identity`, `/access` | go-core's module contracts (types, route tables) and, in `/identity`, `identityFeature` (sign-in page, language), `identityPlatform()` and `usersFeature` (users, "my profile"): [sign-in](docs/recipes/sign-in.md), [users](docs/recipes/users.md) |
+| `@wssto2/vue-core/access` (screens) | `accessFeature({ catalogue })`: roles list and editor, compare, replace, a person's roles (`PersonAccess`) and what they can do: [roles and access](docs/recipes/access.md) |
+| `@wssto2/vue-core/testing` | `createTestPlatform`, `createTestApp`, fake transports: for your tests, [testing](docs/recipes/testing.md) |
 
 Nothing is reachable by a deep import. The peers are `vue`, `vue-router` and `vue-i18n`; the library never bundles them.
 
@@ -174,12 +177,40 @@ Its texts are JSON files under the feature, loaded the first time one of its rou
   "open": "Open",
   "closed": "Closed",
   "record": "Ticket",
-  "details": "Details"
+  "details": "Details",
+  "history": "History",
+  "history_empty": "Nothing has happened yet.",
+  "when": "When",
+  "kind": "Kind",
+  "author": "Author",
+  "note": "Note",
+  "comment": "Comment",
+  "change": "Status change",
+  "remove": "Remove"
 }
 ```
 
 The views are [a list page](docs/recipes/list-page.md) and [a record page](docs/recipes/record-page.md).
 
+## Typed routes
+
+go-core's generator writes one `route<In, Out>(method, path, options?)` per endpoint; `client.request(route, input)` calls it with the input and the answer typed. Details, a list from a route and the errors: [typed routes](docs/recipes/typed-routes.md).
+
+<!-- example: docs/examples/routes/api.ts:1-11 -->
+```ts
+import { createHttpClient, isApiError } from "@wssto2/vue-core/client";
+import { ticketsRoutes } from "./routes";
+import { route } from "@wssto2/vue-core/client";
+
+const http = createHttpClient({ baseUrl: "/api" });
+
+// A path parameter and the rest as the query: GET /api/v1/tickets/7
+export async function loadTicket(id: number, signal: AbortSignal) {
+  const result = await http.request(ticketsRoutes.show, { id }, { signal });
+  return result.data; // typed as Ticket
+}
+```
+
 ## Permissions, destinations and icons
 
 The library knows none of your permissions, none of your backend's menu destinations and none of your icons. You declare them by merging into three interfaces, like vue-router's `RouteMeta`; after that a typo in `meta.access`, in a navigation binding or in `<Icon name>` is a compile error:
@@ -196,6 +227,12 @@ declare module "@wssto2/vue-core/platform" {
     "tickets:view": true;
     "tickets:update": true;
     "accounts:view": true;
+    // go-core's access module defines these in the catalogue, so a generated union has them (the roles screens name them).
+    "iam.role:view": true;
+    "iam.role:manage": true;
+    "iam.role:delete": true;
+    "iam.user:view": true;
+    "iam.user:manage": true;
   }
 }
 
@@ -203,6 +240,8 @@ declare module "@wssto2/vue-core/router" {
   interface DestinationRegistry {
     tickets: true;
     accounts: true;
+    users: true;
+    "iam.roles": true;
   }
 }
 
@@ -284,12 +323,17 @@ The library's own texts are under the `core` namespace in English, Croatian, Bos
 
 ## Recipes
 
-- [List page](docs/recipes/list-page.md): a typed collection, columns, filters, row actions, URL state
-- [Record page](docs/recipes/record-page.md): a simple record, a record with sections, regions that load on their own, previous / next
-- [Shell](docs/recipes/shell.md): the default shell, contributions from features, a custom shell
-- [App setup](docs/recipes/app-setup.md): config, session, effects, locales, errors
+- [List page](docs/recipes/list-page.md): a typed collection, columns, filters, row actions, URL state; a table over an array
+- [Record page](docs/recipes/record-page.md): a simple record, a record with sections, regions that load on their own (`useResource`, `useLoad`), previous / next
+- [Shell](docs/recipes/shell.md): the default shell, contributions from features, keyboard shortcuts and their help, running inside a frame, a custom shell
+- [App setup](docs/recipes/app-setup.md): config, session, effects, locales and flags, permissions in the UI, error sentences, startup errors
 - [Forms](docs/recipes/forms.md): form state, fields, a record edited in group sheets, a long form, commands
-- [Theming](docs/recipes/theming.md): brand accent, dark mode, tokens
+- [Typed routes](docs/recipes/typed-routes.md): generated routes, `client.request`, a list from a route
+- [Sign-in](docs/recipes/sign-in.md): go-core's identity module: the sign-in page, the session wiring, the language, the module's committed types, the dev server
+- [Users and profile](docs/recipes/users.md): the users list and a person's record, "my profile" with the e-mail change by code, opting out, extra sections, refusals
+- [Roles and access](docs/recipes/access.md): go-core's access module: the roles list and editor from your catalogue, a person's roles and effective access, where a role applies, the refusals
+- [Theming](docs/recipes/theming.md): brand accent, dark mode, tokens, status tones and category hues
+- [Testing](docs/recipes/testing.md): the application's environment and a fake backend for your tests
 
 Forms have their own recipe when that phase lands.
 

package/dist/AccessGate.vue_vue_type_script_setup_true_lang-DKX3PH2n.js

@@ -0,0 +1,22 @@
+import { defineComponent as t, computed as i, renderSlot as n } from "vue";
+import { u as l } from "./platform-hunMqFdB.js";
+const m = /* @__PURE__ */ t({
+  __name: "AccessGate",
+  props: {
+    permission: {},
+    any: {},
+    all: {}
+  },
+  setup(r) {
+    const o = r, e = l().access, a = i(() => {
+      if (o.permission !== void 0) return e.can(o.permission);
+      if (o.any !== void 0) return e.canAny(o.any);
+      if (o.all !== void 0) return e.canAll(o.all);
+      throw new Error("AccessGate needs one of the props permission, any or all.");
+    });
+    return (s, c) => a.value ? n(s.$slots, "default", {}, void 0, void 0, 0) : n(s.$slots, "fallback", {}, void 0, void 0, 1);
+  }
+});
+export {
+  m as _
+};

package/dist/AccountMenuItem.vue_vue_type_script_setup_true_lang-DIGqTLwd.js

@@ -0,0 +1,76 @@
+import { defineComponent as p, computed as r, openBlock as o, createElementBlock as d, normalizeClass as a, createBlock as c, resolveDynamicComponent as C, unref as i, mergeProps as E, withCtx as S, createCommentVNode as f, createElementVNode as m, toDisplayString as O } from "vue";
+import { RouterLink as R } from "vue-router";
+import { _ as s } from "./Icon.vue_vue_type_script_lang-VvcV2Bzo.js";
+import { _ as z } from "./CountryFlag.vue_vue_type_script_setup_true_lang-Kry_vPPZ.js";
+import { d as v } from "./context-Ch1r4fdN.js";
+const [D, B] = v("vue-core.accountMenu"), [F] = v("vue-core.headerSurface"), h = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-border-focus", I = "relative not-first:before:absolute not-first:before:top-0 not-first:before:right-0 not-first:before:left-[calc(var(--app-row-inset)+2.25rem)] not-first:before:border-t not-first:before:border-border-separator", H = /* @__PURE__ */ p({
+  __name: "AccountMenuItem",
+  props: {
+    label: {},
+    icon: { default: void 0 },
+    to: { default: void 0 },
+    checked: { type: Boolean, default: void 0 },
+    selected: { type: Boolean, default: void 0 },
+    tone: { default: void 0 },
+    flag: { default: void 0 }
+  },
+  emits: ["click"],
+  setup(e, { emit: k }) {
+    const l = e, b = k, u = B(), t = r(() => u.appearance === "sheet"), x = r(() => l.checked !== void 0 || l.selected !== void 0), n = r(() => l.tone === "critical"), w = `flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-fill ${h}`, y = `flex min-h-row w-full cursor-pointer items-center gap-3 px-row-inset py-2 text-left text-body transition-colors duration-motion-fast active:bg-fill ${h}`;
+    function g() {
+      x.value || u.close(), b("click");
+    }
+    return (M, N) => (o(), d("div", {
+      class: a(t.value ? I : "")
+    }, [
+      (o(), c(C(e.to ? i(R) : "button"), E(e.to ? { to: e.to } : { type: "button" }, {
+        class: [t.value ? y : w, n.value ? "text-content-destructive" : "text-content-strong", t.value && n.value ? "justify-center" : ""],
+        role: e.checked !== void 0 ? "switch" : void 0,
+        "aria-checked": e.checked,
+        "aria-current": e.selected ? "true" : void 0,
+        "data-account-menu-item": "",
+        onClick: g
+      }), {
+        default: S(() => [
+          e.flag ? (o(), c(z, {
+            key: 0,
+            country: e.flag
+          }, null, 8, ["country"])) : e.icon && !(t.value && n.value) ? (o(), c(i(s), {
+            key: 1,
+            name: e.icon,
+            size: t.value ? 22 : 16,
+            class: a(["shrink-0", n.value ? "" : "text-content-muted"])
+          }, null, 8, ["name", "size", "class"])) : f("", !0),
+          m("span", {
+            class: a(["min-w-0 truncate", t.value && n.value ? "" : "flex-1"])
+          }, O(e.label), 3),
+          e.checked !== void 0 ? (o(), d("span", {
+            key: 2,
+            "aria-hidden": "true",
+            class: a(["relative inline-flex shrink-0 rounded-full transition-colors duration-motion-fast", [e.checked ? "bg-control-on" : "bg-fill-strong", t.value ? "h-switch-height w-switch-width" : "h-5 w-9"]])
+          }, [
+            m("span", {
+              class: a(["absolute top-0.5 left-0.5 aspect-square h-[calc(100%-0.25rem)] rounded-full bg-white shadow-knob transition-transform duration-motion-fast", e.checked ? t.value ? "translate-x-[calc(var(--app-switch-width)-var(--app-switch-height))]" : "translate-x-4" : "translate-x-0"])
+            }, null, 2)
+          ], 2)) : e.selected ? (o(), c(i(s), {
+            key: 3,
+            name: "checkCustom",
+            size: 16,
+            class: "shrink-0 text-content-link"
+          })) : e.to && t.value ? (o(), c(i(s), {
+            key: 4,
+            name: "arrowRightSLine",
+            size: 18,
+            class: "shrink-0 text-content-disabled"
+          })) : f("", !0)
+        ]),
+        _: 1
+      }, 16, ["class", "role", "aria-checked", "aria-current"]))
+    ], 2));
+  }
+});
+export {
+  H as _,
+  D as a,
+  F as h
+};

package/dist/ActionRow.vue_vue_type_script_setup_true_lang-B7Lpfkf6.js

@@ -0,0 +1,45 @@
+import { defineComponent as r, openBlock as s, createBlock as d, unref as n, withCtx as f, createElementVNode as t, normalizeClass as m, toDisplayString as l, createElementBlock as u, createCommentVNode as p, createVNode as b } from "vue";
+import { e as _ } from "./options-BXkMR63B.js";
+import { _ as x } from "./Icon.vue_vue_type_script_lang-VvcV2Bzo.js";
+const k = ["disabled"], y = { class: "flex min-w-0 flex-1 flex-col" }, h = {
+  key: 0,
+  class: "text-footnote text-content-muted"
+}, N = /* @__PURE__ */ r({
+  __name: "ActionRow",
+  props: {
+    label: {},
+    sub: { default: void 0 },
+    tone: { default: "link" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(i, { emit: a }) {
+    const e = i, c = a;
+    return (v, o) => (s(), d(n(_), { layout: "stacked" }, {
+      default: f(() => [
+        t("button", {
+          type: "button",
+          disabled: e.disabled,
+          class: "flex w-full items-center gap-3 py-0.5 text-left focus-visible:outline-2 focus-visible:outline-border-focus disabled:opacity-50",
+          onClick: o[0] || (o[0] = (w) => c("click"))
+        }, [
+          t("span", y, [
+            t("span", {
+              class: m(["text-body", e.tone === "critical" ? "text-content-destructive" : "text-content-link"])
+            }, l(e.label), 3),
+            e.sub ? (s(), u("span", h, l(e.sub), 1)) : p("", !0)
+          ]),
+          b(n(x), {
+            name: "arrowRightSLine",
+            size: 18,
+            class: "shrink-0 text-content-disabled"
+          })
+        ], 8, k)
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  N as _
+};

package/dist/Activity-DviO0VQ8.js

@@ -0,0 +1,156 @@
+import { defineComponent as S, ref as g, watch as w, computed as k, openBlock as i, createElementBlock as y, createVNode as _, unref as t, createElementVNode as r, withCtx as f, toDisplayString as u, Fragment as C, renderList as N, createBlock as x, createTextVNode as j, createCommentVNode as R } from "vue";
+import { useI18n as q } from "vue-i18n";
+import { _ as D } from "./IconTile.vue_vue_type_script_setup_true_lang-D7QgnUyN.js";
+import { _ as I } from "./Tabs.vue_vue_type_script_setup_true_lang-BeGaydRr.js";
+import { u as O } from "./format-B8mJm946.js";
+import { _ as U } from "./DateField.vue_vue_type_script_setup_true_lang-DMVjNsaM.js";
+import { _ as T } from "./FormGroup.vue_vue_type_script_setup_true_lang-0mfG8TkU.js";
+import { e as z } from "./options-BXkMR63B.js";
+import { P as G, c as H, i as J } from "./index-BAcl44SC.js";
+import { u as K } from "./platform-hunMqFdB.js";
+import { b as M } from "./routeResource-DstM0hvf.js";
+import { _ as Q } from "./AsyncSection.vue_vue_type_script_setup_true_lang-CCtthMRd.js";
+import { _ as W } from "./Badge.vue_vue_type_script_setup_true_lang-DJyZc0C7.js";
+import { u as X } from "./useLoad-CYRVx6HW.js";
+import { _ as Y } from "./PageBar.vue_vue_type_script_setup_true_lang-Cfr5xsJx.js";
+import { _ as Z } from "./SectionIntro.vue_vue_type_script_setup_true_lang-CZtPrmXD.js";
+const ee = {
+  class: "flex min-w-0 flex-col gap-group-gap",
+  "data-person-activity": ""
+}, te = { class: "flex flex-wrap items-end justify-between gap-3" }, ae = {
+  class: "flex items-end gap-2",
+  "data-activity-range": ""
+}, se = {
+  key: 0,
+  class: "px-row-inset py-4 text-body text-content-muted",
+  "data-activity-empty": ""
+}, oe = {
+  key: 1,
+  class: "flex min-w-0 flex-col gap-group-gap",
+  "data-activity-feed": ""
+}, le = { class: "flex flex-wrap items-center gap-x-1.5" }, ne = { class: "text-body tabular-nums text-content-muted" }, ie = { class: "px-row-inset text-footnote text-content-muted" }, we = /* @__PURE__ */ S({
+  __name: "Activity",
+  setup(re) {
+    const { t: o, te: $ } = q(), { http: A } = K(), V = O(), b = M(G), { activityAreas: B } = H(), c = g("all"), d = g(null), m = g(null), v = g(1), p = X(
+      async ({ signal: a }) => {
+        const e = b.id.value;
+        if (e === null) return null;
+        const s = { id: e, page: v.value, per_page: 20, ...c.value === "all" ? {} : { area: c.value }, ...d.value ? { from: d.value } : {}, ...m.value ? { to: m.value } : {} };
+        return (await A.request(J.usersActivity, s, { signal: a })).data;
+      },
+      { watch: () => b.id.value }
+    );
+    w([c, d, m], () => {
+      v.value = 1, p.reload();
+    }), w(v, () => void p.reload());
+    const h = (a) => {
+      if (a === "all" || a === "identity" || a === "other") return o(`core.users.activity.areas.${a}`);
+      const e = B[a];
+      return e && $(e) ? o(e) : o("core.users.activity.areas.other");
+    }, E = k(() => p.data.value?.meta?.views ?? []), P = k(() => {
+      const a = E.value.filter((e) => e.key === "all" || e.key === c.value || e.count > 0).map((e) => ({ value: e.key, label: h(e.key), badge: e.count }));
+      return a.length > 0 ? a : [{ value: "all", label: h("all") }];
+    }), F = (a) => $(`core.users.activity.actions.${a}`) ? o(`core.users.activity.actions.${a}`) : o("core.users.activity.actions.other"), L = k(() => {
+      const a = [];
+      for (const e of p.data.value?.data ?? []) {
+        const s = e.created_at.slice(0, 10), l = a[a.length - 1];
+        l && l.key === s ? l.rows.push(e) : a.push({ key: s, header: V.date(e.created_at), rows: [e] });
+      }
+      return a;
+    });
+    return (a, e) => (i(), y("div", ee, [
+      _(Z, {
+        title: t(o)("core.users.sections.activity"),
+        description: t(o)("core.users.intro.activity", { name: t(b).data.value?.name ?? "" })
+      }, null, 8, ["title", "description"]),
+      r("div", te, [
+        _(t(I), {
+          modelValue: c.value,
+          "onUpdate:modelValue": e[0] || (e[0] = (s) => c.value = s),
+          tabs: P.value,
+          presentation: "scope",
+          label: t(o)("core.users.activity.areas_label")
+        }, null, 8, ["modelValue", "tabs", "label"]),
+        r("div", ae, [
+          _(t(U), {
+            modelValue: d.value,
+            "onUpdate:modelValue": e[1] || (e[1] = (s) => d.value = s),
+            label: t(o)("core.users.activity.since"),
+            max: m.value ?? void 0
+          }, null, 8, ["modelValue", "label", "max"]),
+          _(t(U), {
+            modelValue: m.value,
+            "onUpdate:modelValue": e[2] || (e[2] = (s) => m.value = s),
+            label: t(o)("core.users.activity.until"),
+            min: d.value ?? void 0
+          }, null, 8, ["modelValue", "label", "min"])
+        ])
+      ]),
+      _(t(Q), {
+        state: t(p).state.value,
+        "skeleton-rows": 5,
+        "is-empty": () => !1,
+        onRetry: e[4] || (e[4] = (s) => t(p).reload())
+      }, {
+        default: f(({ value: s }) => [
+          !s || s.data.length === 0 ? (i(), y("p", se, u(t(o)("core.users.activity.empty")), 1)) : (i(), y("div", oe, [
+            (i(!0), y(C, null, N(L.value, (l) => (i(), x(t(T), {
+              key: l.key,
+              header: l.header
+            }, {
+              default: f(() => [
+                (i(!0), y(C, null, N(l.rows, (n) => (i(), x(t(z), {
+                  key: n.id,
+                  layout: "setting",
+                  label: `${F(n.action)}`,
+                  "data-activity-row": ""
+                }, {
+                  leading: f(() => [
+                    _(t(D), {
+                      tone: "anchor",
+                      icon: "listCheck"
+                    })
+                  ]),
+                  sub: f(() => [
+                    r("span", le, [
+                      r("span", null, u(h(n.area)), 1),
+                      e[5] || (e[5] = r("span", { "aria-hidden": "true" }, "·", -1)),
+                      r("span", null, u(n.record_type) + " #" + u(n.record_id), 1)
+                    ])
+                  ]),
+                  default: f(() => [
+                    n.signed_in_as ? (i(), x(t(W), {
+                      key: 0,
+                      tone: "warning",
+                      "data-activity-signed-in-as": ""
+                    }, {
+                      default: f(() => [
+                        j(u(n.signed_in_as.name ? t(o)("core.users.activity.signed_in_as", { name: n.signed_in_as.name }) : t(o)("core.users.activity.signed_in_as_other")), 1)
+                      ]),
+                      _: 2
+                    }, 1024)) : R("", !0),
+                    r("span", ne, u(t(V).time(n.created_at)), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["label"]))), 128))
+              ]),
+              _: 2
+            }, 1032, ["header"]))), 128))
+          ])),
+          s ? (i(), x(Y, {
+            key: 2,
+            page: v.value,
+            "onUpdate:page": e[3] || (e[3] = (l) => v.value = l),
+            "last-page": s.last_page,
+            total: s.total
+          }, null, 8, ["page", "last-page", "total"])) : R("", !0),
+          r("p", ie, u(t(o)("core.users.activity.footer")), 1)
+        ]),
+        _: 1
+      }, 8, ["state"])
+    ]));
+  }
+});
+export {
+  we as default
+};