@wssto2/vue-core 0.1.0 → 0.2.0

package/dist/state/Badge.vue.d.ts

@@ -1,26 +1,33 @@
+import type { Hue } from "./hue";
 import type { Tone } from "./tone";
 /**
- * The one badge: a status, a phase, a source. The tone carries the meaning; shape, size and case
- * never change, so a screen full of badges reads as one system. A label, not a button: 6 px
- * corners, a hairline in the tone's own colour so it keeps an edge on white rows, medium weight.
+ * The one badge: a status, a phase, a source. Shape, size and case never change, so a screen full of
+ * badges reads as one system. A label, not a button: 6 px corners, a hairline in its own colour so it
+ * keeps an edge on white rows, medium weight. The label always shows; colour never carries the meaning alone.
+ *
+ * A status says what state something is in, by `tone`; a category tells things of one kind apart, by `hue`
+ * (nine, separate from the tones: a lead's source is not a warning).
  *
  *   <Badge tone="warning" dot>Offer sent</Badge>
- *   <Badge tone="context" dot>Instagram</Badge>
+ *   <Badge hue="violet">Instagram</Badge>                       tinted
+ *   <Badge hue="violet" appearance="dot">Instagram</Badge>      neutral label with a coloured dot
  *
- * `context` is for information that is not a state (where a lead came from): full-contrast
- * neutral text on the cell surface.
+ * `tone="context"` is information that is not a state, in full-contrast neutral text on the cell surface.
  */
 type __VLS_Props = {
+    /** A state. Ignored when `hue` is given. */
     tone?: Tone | "context";
+    /** A dot before the label, in the tone's colour (tones only: a hue's dot is `appearance="dot"`). */
     dot?: boolean;
+    /** A category colour. */
+    hue?: Hue;
+    /** With a `hue`: `"tinted"` (default) colours the badge, `"dot"` keeps a neutral label and colours a dot. */
+    appearance?: "tinted" | "dot";
 };
 type __VLS_Slots = {
     default?: () => unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    tone: Tone | "context";
-    dot: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/state/hue.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The category hues of `Badge`: nine colours for telling things of one kind apart (where a lead came
+ * from, a kind of document), never for a state. Separate from `Tone`, which owns red, green, orange
+ * and sky blue for meaning; every hue here has its own `category-<name>-content` / `-surface` roles in the
+ * theme, checked for text contrast in light and dark. The app maps its categories to hues in one place.
+ */
+export declare const HUES: readonly ["amber", "lime", "teal", "cyan", "blue", "indigo", "violet", "fuchsia", "pink"];
+export type Hue = (typeof HUES)[number];

package/dist/state/index.d.ts

@@ -1,6 +1,7 @@
 export { default as AsyncSection } from "./AsyncSection.vue";
 export { isEmptyValue, valueOf, type AsyncState } from "./async";
 export { default as Badge } from "./Badge.vue";
+export { HUES, type Hue } from "./hue";
 export { default as Banner } from "./Banner.vue";
 export { default as DrawnCheck } from "./DrawnCheck.vue";
 export { default as EmptyState } from "./EmptyState.vue";
@@ -9,4 +10,5 @@ export { default as ProgressTrack } from "./ProgressTrack.vue";
 export { default as Skeleton } from "./Skeleton.vue";
 export { default as StatusLine } from "./StatusLine.vue";
 export type { Tone } from "./tone";
+export { useLoad, type Load, type LoadContext, type LoadOptions } from "./useLoad";
 export { DONE_BEAT_MS, WAIT_VISIBLE_AFTER_MS, useWaitStatus } from "./useWaitStatus";

package/dist/state/index.js

@@ -1,100 +1,136 @@
-import { _ as D, a as I, i as W, v as b } from "../AsyncSection.vue_vue_type_script_setup_true_lang-B82bl36A.js";
-import { _ as O } from "../Badge.vue_vue_type_script_setup_true_lang-DKc6ugmr.js";
-import { _ as P } from "../Banner.vue_vue_type_script_setup_true_lang-n_wGPIIu.js";
-import { a as f } from "../ProgressTrack.vue_vue_type_script_setup_true_lang-1DDaNs2W.js";
-import { _ as j } from "../ProgressTrack.vue_vue_type_script_setup_true_lang-1DDaNs2W.js";
-import { _ as G } from "../EmptyState.vue_vue_type_script_setup_true_lang-BeGpHMUP.js";
-import { defineComponent as m, computed as k, openBlock as e, createElementBlock as n, normalizeClass as p, createVNode as d, unref as i, createElementVNode as u, renderSlot as _, createBlock as S, toDisplayString as l, createCommentVNode as c } from "vue";
-import { _ as x } from "../Icon.vue_vue_type_script_lang-DtC4_mkz.js";
-import { useI18n as g } from "vue-i18n";
-import { D as J, W as K, u as Q } from "../useWaitStatus-fsacMl4W.js";
-const V = /* @__PURE__ */ m({
+import { _ as ee, a as te, i as ae, v as se } from "../AsyncSection.vue_vue_type_script_setup_true_lang-CWLB3xsR.js";
+import { _ as oe } from "../Badge.vue_vue_type_script_setup_true_lang-DJyZc0C7.js";
+import { _ as le } from "../Banner.vue_vue_type_script_setup_true_lang-n_wGPIIu.js";
+import { a as T } from "../ProgressTrack.vue_vue_type_script_setup_true_lang-1DDaNs2W.js";
+import { _ as ce } from "../ProgressTrack.vue_vue_type_script_setup_true_lang-1DDaNs2W.js";
+import { _ as de } from "../EmptyState.vue_vue_type_script_setup_true_lang-BeGpHMUP.js";
+import { defineComponent as S, computed as v, openBlock as s, createElementBlock as o, normalizeClass as y, createVNode as E, unref as _, createElementVNode as b, renderSlot as B, createBlock as $, toDisplayString as k, createCommentVNode as w, shallowRef as A, watch as V, getCurrentScope as z, onScopeDispose as I } from "vue";
+import { _ as L } from "../Icon.vue_vue_type_script_lang-DtC4_mkz.js";
+import { useI18n as N } from "vue-i18n";
+import { u as O } from "../describeError-l5T9b8Uv.js";
+import { D as pe, W as fe, u as ve } from "../useWaitStatus-fsacMl4W.js";
+const J = ["amber", "lime", "teal", "cyan", "blue", "indigo", "violet", "fuchsia", "pink"], K = /* @__PURE__ */ S({
   __name: "FieldNote",
   props: {
     tone: { default: "info" },
     icon: { default: void 0 }
   },
-  setup(a) {
-    const t = a, o = {
+  setup(r) {
+    const e = r, l = {
       info: { text: "text-content-muted", icon: "informationLine" },
       warning: { text: "text-status-warning-content", icon: "alertTriangle" },
       critical: { text: "text-status-danger-content", icon: "errorWarningLine" }
-    }, s = k(() => o[t.tone]);
-    return (r, B) => (e(), n("p", {
-      class: p(["mt-1 flex items-start gap-1.5 text-xs", s.value.text])
+    }, a = v(() => l[e.tone]);
+    return (i, t) => (s(), o("p", {
+      class: y(["mt-1 flex items-start gap-1.5 text-xs", a.value.text])
     }, [
-      d(i(x), {
-        name: t.icon ?? s.value.icon,
+      E(_(L), {
+        name: e.icon ?? a.value.icon,
         size: 14,
         class: "mt-px"
       }, null, 8, ["name"]),
-      u("span", null, [
-        _(r.$slots, "default")
+      b("span", null, [
+        B(i.$slots, "default")
       ])
     ], 2));
   }
-}), h = ["data-done"], v = {
+}), W = ["data-done"], F = {
   class: "flex min-w-0 items-center gap-2.5 text-subheadline",
   role: "status",
   "aria-live": "polite"
-}, y = {
+}, M = {
   key: 0,
   class: "text-content-link"
-}, E = {
+}, R = {
   key: 2,
   class: "ml-auto shrink-0 pl-2 text-footnote tabular-nums text-content-muted",
   "data-status-elapsed": ""
-}, w = {
+}, H = {
   key: 0,
   class: "pl-6.5 text-footnote"
-}, z = /* @__PURE__ */ m({
+}, Q = /* @__PURE__ */ S({
   __name: "StatusLine",
   props: {
     text: {},
     done: { type: Boolean },
     elapsed: {}
   },
-  setup(a) {
-    const t = a, { t: o } = g();
-    return (s, r) => (e(), n("div", {
+  setup(r) {
+    const e = r, { t: l } = N();
+    return (a, i) => (s(), o("div", {
       class: "flex min-w-0 flex-col gap-1",
-      "data-done": t.done || void 0
+      "data-done": e.done || void 0
     }, [
-      u("div", v, [
-        t.done ? (e(), n("span", y, [
-          d(f, { size: 16 })
-        ])) : (e(), S(i(x), {
+      b("div", F, [
+        e.done ? (s(), o("span", M, [
+          E(T, { size: 16 })
+        ])) : (s(), $(_(L), {
           key: 1,
           name: "loader4Line",
           size: 16,
           class: "animate-spin text-content-link"
         })),
-        (e(), n("span", {
-          key: t.text,
-          class: p(["min-w-0 animate-text-swap", t.done ? "font-semibold text-content-link" : "text-shimmer"]),
+        (s(), o("span", {
+          key: e.text,
+          class: y(["min-w-0 animate-text-swap", e.done ? "font-semibold text-content-link" : "text-shimmer"]),
           "data-status-text": ""
-        }, l(t.text), 3)),
-        t.elapsed != null ? (e(), n("span", E, l(i(o)("core.wait.seconds", { count: t.elapsed })), 1)) : c("", !0)
+        }, k(e.text), 3)),
+        e.elapsed != null ? (s(), o("span", R, k(_(l)("core.wait.seconds", { count: e.elapsed })), 1)) : w("", !0)
       ]),
-      s.$slots.default ? (e(), n("div", w, [
-        _(s.$slots, "default")
-      ])) : c("", !0)
-    ], 8, h));
+      a.$slots.default ? (s(), o("div", H, [
+        B(a.$slots, "default")
+      ])) : w("", !0)
+    ], 8, W));
   }
 });
+function X(r, e = {}) {
+  const { t: l } = N(), a = O(), i = e.errorMessage ?? ((n) => a(n, { fallback: l("core.resource.unavailable") })), t = A({ status: "loading" });
+  let u = 0, d = null;
+  function m() {
+    return d?.abort(), d = null, ++u;
+  }
+  async function p() {
+    const n = m(), x = t.value, c = "value" in x ? x : null;
+    t.value = c ? { status: "refreshing", value: c.value } : { status: "loading" };
+    const g = new AbortController();
+    d = g;
+    try {
+      const f = await r({ signal: g.signal });
+      n === u && (t.value = { status: "loaded", value: f });
+    } catch (f) {
+      if (n !== u) return;
+      const h = i(f);
+      t.value = c ? { status: "stale", value: c.value, error: h } : { status: "failed", error: h };
+    }
+  }
+  function C(n) {
+    m(), t.value = { status: "loaded", value: n };
+  }
+  function D() {
+    t.value = { status: "loading" }, p();
+  }
+  return e.watch !== void 0 ? V(e.watch, D, { immediate: e.immediate ?? !0 }) : (e.immediate ?? !0) && p(), z() && I(m), {
+    state: v(() => t.value),
+    data: v(() => "value" in t.value ? t.value.value : null),
+    reload: p,
+    update: C
+  };
+}
 export {
-  D as AsyncSection,
-  O as Badge,
-  P as Banner,
-  J as DONE_BEAT_MS,
-  f as DrawnCheck,
-  G as EmptyState,
-  V as FieldNote,
-  j as ProgressTrack,
-  I as Skeleton,
-  z as StatusLine,
-  K as WAIT_VISIBLE_AFTER_MS,
-  W as isEmptyValue,
-  Q as useWaitStatus,
-  b as valueOf
+  ee as AsyncSection,
+  oe as Badge,
+  le as Banner,
+  pe as DONE_BEAT_MS,
+  T as DrawnCheck,
+  de as EmptyState,
+  K as FieldNote,
+  J as HUES,
+  ce as ProgressTrack,
+  te as Skeleton,
+  Q as StatusLine,
+  fe as WAIT_VISIBLE_AFTER_MS,
+  ae as isEmptyValue,
+  X as useLoad,
+  ve as useWaitStatus,
+  se as valueOf
 };

package/dist/state/useLoad.d.ts

@@ -0,0 +1,41 @@
+import { type ComputedRef, type WatchSource } from "vue";
+import type { AsyncState } from "./async";
+export interface LoadContext {
+    /** Aborted when the load is no longer wanted: a newer load or an `update` superseded it, the watch source changed, the scope ended. */
+    readonly signal: AbortSignal;
+}
+export interface LoadOptions {
+    /**
+     * Load again, from nothing, whenever this changes: the thing shown is another one (a route parameter, a
+     * selected tab). The previous value is cleared (`loading`), because it belongs to what was left.
+     */
+    readonly watch?: WatchSource<unknown> | readonly WatchSource<unknown>[];
+    /** Load at once (default true); false waits for `reload()` or a change of the watch source. */
+    readonly immediate?: boolean;
+    /** The text of a failed load; by default `describeError` with "An error occurred while loading data". */
+    readonly errorMessage?: (error: unknown) => string;
+}
+/** What `useLoad` gives: the `AsyncState` (so `AsyncSection` takes it as it is) and the two ways to change it. */
+export interface Load<T> {
+    readonly state: ComputedRef<AsyncState<T>>;
+    /** The loaded value, null while loading or failed. */
+    readonly data: ComputedRef<T | null>;
+    /** Loads again, keeping the value on screen (`refreshing`, or `stale` when it failed); settles when the load has ended (applied or dropped). */
+    reload(): Promise<void>;
+    /** Replaces the value with what a mutation returned (no request) and drops every load still in flight, so none can bring back an older state. */
+    update(value: T): void;
+}
+/**
+ * One load for a region that has no identity of its own: a list, the settings of a page, a block of
+ * a record page. (`useResource` is the same for a record read by id; `useCollection` for a paged,
+ * filtered list.) Latest wins: a load that was left behind is aborted and its answer dropped, and
+ * nothing lands after the scope ended.
+ *
+ *   const settings = useLoad(({ signal }) => api.settings({ signal }));
+ *   <AsyncSection :state="settings.state.value" @retry="settings.reload()">
+ *     <template #default="{ value }"><SettingsForm :settings="value" /></template>
+ *   </AsyncSection>
+ *
+ * With `watch` it starts over when a source changes (`{ watch: () => route.params.id }`).
+ */
+export declare function useLoad<T>(load: (context: LoadContext) => Promise<T>, options?: LoadOptions): Load<T>;