@happyvertical/smrt-svelte 0.55.6 → 0.55.8

package/dist/components/screens/DetailScreen.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+/**
+ * DetailScreen - a read-only record view for any model, derived from its
+ * manifest definition and resolved field policy (#3718).
+ *
+ * Basic-tier fields show first, grouped by the policy/manifest `group`;
+ * advanced-tier fields and the read-only created/updated timestamps sit
+ * behind a "More details" disclosure. Hidden fields and fields outside the
+ * policy never render, so a sensitive field the policy omits cannot leak
+ * through this screen.
+ */
+import { Alert, ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { PageHeader } from '@happyvertical/smrt-ui/layout';
+import { Button, Disclosure } from '@happyvertical/smrt-ui/ui';
+import { M } from '../../i18n/strings.screens.js';
+import {
+  deriveScreenFields,
+  groupScreenFields,
+  screenSourceError,
+  screenTitles,
+} from './fields.js';
+import type {
+  DetailScreenProps,
+  ScreenCollectionDefinition,
+  ScreenField,
+  ScreenPolicy,
+  ScreenRecord,
+} from './types.js';
+import { formatScreenValue } from './values.js';
+
+let {
+  definition,
+  policy = null,
+  record,
+  title,
+  fields: include,
+  currency,
+  locale,
+  showHeader = true,
+  backLabel,
+  deleting = false,
+  onback,
+  onedit,
+  ondelete,
+  extraActions,
+  children,
+}: DetailScreenProps = $props();
+
+const { t } = useI18n();
+
+const titles = $derived(screenTitles(definition));
+const sourceError = $derived(screenSourceError(definition, policy));
+
+const allFields = $derived(
+  sourceError
+    ? []
+    : deriveScreenFields(definition, policy, { mode: 'view', include }),
+);
+const primary = $derived(allFields.filter((f) => f.tier === 'basic'));
+const secondary = $derived(allFields.filter((f) => f.tier === 'advanced'));
+
+const heading = $derived.by(() => {
+  if (title) return title;
+  const label = allFields.find((f) => f.kind === 'text' && f.tier === 'basic');
+  const value = label ? record[label.name] : undefined;
+  return typeof value === 'string' && value.trim() !== ''
+    ? value
+    : titles.singular;
+});
+
+const formatContext = $derived({
+  currency,
+  locale,
+  yes: t(M['ui.screens.yes']),
+  no: t(M['ui.screens.no']),
+});
+
+function display(field: ScreenField): string {
+  return formatScreenValue(field, record[field.name], formatContext);
+}
+
+/** Only http(s) URLs become links; anything else renders as text. */
+function safeHref(field: ScreenField, text: string): string | null {
+  if (field.kind === 'email') return `mailto:${text}`;
+  if (field.kind === 'url' && /^https?:\/\//i.test(text)) return text;
+  return null;
+}
+
+let confirmOpen = $state(false);
+let deleteError = $state(false);
+
+async function confirmDelete(): Promise<void> {
+  deleteError = false;
+  try {
+    await ondelete?.();
+    confirmOpen = false;
+  } catch {
+    deleteError = true;
+    confirmOpen = false;
+  }
+}
+</script>
+
+{#snippet fieldList(list: ScreenField[])}
+  {#each groupScreenFields(list) as [group, groupFields] (group ?? '')}
+    <section class="smrt-detail-screen__group">
+      {#if group}<h2 class="smrt-detail-screen__group-title">{group}</h2>{/if}
+      <dl class="smrt-detail-screen__fields">
+        {#each groupFields as field (field.name)}
+          {@const text = display(field)}
+          <div class="smrt-detail-screen__field">
+            <dt>{field.label}</dt>
+            <dd>
+              {#if text === ''}
+                <span class="smrt-detail-screen__empty">{t(M['ui.screens.not_set'])}</span>
+              {:else if field.kind === 'json' || field.kind === 'textarea'}
+                <pre class="smrt-detail-screen__block">{text}</pre>
+              {:else if safeHref(field, text)}
+                <a href={safeHref(field, text)}>{text}</a>
+              {:else if field.kind === 'reference'}
+                <code>{text}</code>
+              {:else}
+                {text}
+              {/if}
+            </dd>
+          </div>
+        {/each}
+      </dl>
+    </section>
+  {/each}
+{/snippet}
+
+{#if showHeader}
+  <PageHeader title={heading}>
+    {#snippet actions()}
+      {#if onback}
+        <Button variant="ghost" onclick={onback}>
+          {backLabel ?? t(M['ui.screens.back'], { name: titles.plural.toLowerCase() })}
+        </Button>
+      {/if}
+      {#if extraActions}{@render extraActions()}{/if}
+      {#if onedit}
+        <Button variant="secondary" onclick={onedit}>{t(M['ui.screens.edit'])}</Button>
+      {/if}
+      {#if ondelete}
+        <Button variant="danger" onclick={() => (confirmOpen = true)}>
+          {t(M['ui.screens.delete'])}
+        </Button>
+      {/if}
+    {/snippet}
+  </PageHeader>
+{/if}
+
+<article class="smrt-detail-screen" aria-label={heading}>
+  {#if sourceError}
+    <Alert variant="error">{sourceError}</Alert>
+  {:else}
+    {#if deleteError}
+      <Alert variant="error" dismissible ondismiss={() => (deleteError = false)}>
+        {t(M['ui.screens.delete_failed'])}
+      </Alert>
+    {/if}
+    {@render fieldList(primary)}
+    {#if secondary.length > 0}
+      <Disclosure title={t(M['ui.screens.more_details'])}>
+        {@render fieldList(secondary)}
+      </Disclosure>
+    {/if}
+    {@render children?.()}
+  {/if}
+</article>
+
+{#if ondelete}
+  <ConfirmDialog
+    open={confirmOpen}
+    title={t(M['ui.screens.delete_title'], { name: titles.singular.toLowerCase() })}
+    message={t(M['ui.screens.delete_message'])}
+    confirmLabel={t(M['ui.screens.delete'])}
+    cancelLabel={t(M['ui.screens.cancel'])}
+    destructive
+    loading={deleting}
+    onconfirm={confirmDelete}
+    oncancel={() => (confirmOpen = false)}
+  />
+{/if}
+
+<style>
+  .smrt-detail-screen {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-lg, 1.5rem);
+  }
+  .smrt-detail-screen__group-title {
+    margin: 0 0 var(--smrt-spacing-sm, 0.5rem);
+    font-size: var(--smrt-typography-title-medium-size, 1rem);
+  }
+  .smrt-detail-screen__fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+    gap: var(--smrt-spacing-md, 1rem);
+    margin: 0;
+  }
+  .smrt-detail-screen__field dt {
+    color: var(--smrt-color-on-surface-variant, #5f6368);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+  .smrt-detail-screen__field dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+  .smrt-detail-screen__empty {
+    color: var(--smrt-color-on-surface-variant, #5f6368);
+  }
+  .smrt-detail-screen__block {
+    margin: 0;
+    white-space: pre-wrap;
+    font-family: inherit;
+  }
+</style>

package/dist/components/screens/DetailScreen.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { DetailScreenProps } from './types.js';
+declare const DetailScreen: import("svelte").Component<DetailScreenProps, {}, "">;
+type DetailScreen = ReturnType<typeof DetailScreen>;
+export default DetailScreen;
+//# sourceMappingURL=DetailScreen.svelte.d.ts.map

package/dist/components/screens/DetailScreen.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailScreen.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/DetailScreen.svelte.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EACV,iBAAiB,EAKlB,MAAM,YAAY,CAAC;AAoKpB,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/screens/EditForm.svelte

@@ -0,0 +1,313 @@
+<script lang="ts">
+/**
+ * EditForm - a create / edit form for any model, derived from its manifest
+ * definition and resolved field policy (#3718).
+ *
+ * Policy behavior: basic-tier fields render up front and advanced-tier fields
+ * sit behind an "Advanced fields" disclosure (opened automatically when one
+ * has a problem); hidden fields and fields outside the policy never render;
+ * policy labels, help and order win over the manifest; on create, resolved
+ * policy defaults prefill the draft. System fields are never editable.
+ *
+ * The form is transport-neutral. `onsubmit` receives a payload already
+ * converted to wire values (safe integers, integer minor units for money,
+ * ISO datetimes, parsed JSON); throw to report a failed save, or return
+ * `{ fieldErrors }` to attach server-side validation messages to fields.
+ * Remount with `{#key}` when switching to another record.
+ *
+ * For the policy gear, usage telemetry and per-field renderer registry use
+ * `ObjectForm` from `@happyvertical/smrt-fields/svelte` instead.
+ */
+import { Alert } from '@happyvertical/smrt-ui/feedback';
+import {
+  Checkbox,
+  Form,
+  FormActionBar,
+  FormGroup,
+  Input,
+  Textarea,
+} from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { PageHeader } from '@happyvertical/smrt-ui/layout';
+import { Button, Disclosure } from '@happyvertical/smrt-ui/ui';
+import { untrack } from 'svelte';
+import { M } from '../../i18n/strings.screens.js';
+import {
+  deriveScreenFields,
+  groupScreenFields,
+  screenSourceError,
+  screenTitles,
+} from './fields.js';
+import type {
+  EditFormProps,
+  ScreenCollectionDefinition,
+  ScreenDraft,
+  ScreenField,
+  ScreenFieldErrorCode,
+  ScreenPolicy,
+  ScreenRecord,
+} from './types.js';
+import {
+  DEFAULT_SCREEN_CURRENCY,
+  draftForCreate,
+  draftFromRecord,
+  parseDraft,
+} from './values.js';
+
+let {
+  definition,
+  policy = null,
+  record,
+  title,
+  fields: include,
+  currency = DEFAULT_SCREEN_CURRENCY,
+  showHeader = true,
+  submitting = false,
+  fieldErrors = {},
+  error = null,
+  onsubmit,
+  oncancel,
+}: EditFormProps = $props();
+
+const { t } = useI18n();
+
+const isNew = $derived(record === undefined);
+const titles = $derived(screenTitles(definition));
+const sourceError = $derived(screenSourceError(definition, policy));
+const heading = $derived(
+  title ??
+    t(M[isNew ? 'ui.screens.create_title' : 'ui.screens.edit_title'], {
+      name: titles.singular.toLowerCase(),
+    }),
+);
+
+const allFields = $derived(
+  sourceError
+    ? []
+    : deriveScreenFields(definition, policy, { mode: 'edit', include }),
+);
+const basicFields = $derived(allFields.filter((f) => f.tier === 'basic'));
+const advancedFields = $derived(allFields.filter((f) => f.tier === 'advanced'));
+
+function initialDraft(): ScreenDraft {
+  return record
+    ? draftFromRecord(allFields, record, { currency })
+    : draftForCreate(allFields, policy, { currency });
+}
+
+let draft = $state<ScreenDraft>(initialDraft());
+let localErrors = $state<Record<string, ScreenFieldErrorCode>>({});
+let hostErrors = $state<Record<string, string>>({});
+let failed = $state(false);
+let working = $state(false);
+let advancedOpen = $state(false);
+
+// Re-seed when the host swaps the record (or the field set) under a mounted
+// form; typing never re-seeds because only the identity is tracked.
+const sessionKey = $derived(
+  `${definition.objectRef}:${record ? String(record[definition.idField ?? 'id']) : 'new'}:${allFields.map((f) => f.name).join(',')}`,
+);
+let appliedKey = untrack(() => sessionKey);
+$effect(() => {
+  const key = sessionKey;
+  if (key === appliedKey) return;
+  appliedKey = key;
+  untrack(() => {
+    draft = initialDraft();
+    localErrors = {};
+    hostErrors = {};
+    failed = false;
+  });
+});
+
+function text(name: string): string {
+  const value = draft[name];
+  return typeof value === 'string' ? value : '';
+}
+
+function setText(name: string, value: string | number | undefined): void {
+  draft[name] = String(value ?? '');
+}
+
+function messageFor(field: ScreenField): string | undefined {
+  const code = localErrors[field.name];
+  if (code) return t(M[`ui.screens.error.${code}`]);
+  return fieldErrors[field.name] ?? hostErrors[field.name];
+}
+
+const advancedHasProblem = $derived(
+  advancedFields.some(
+    (f) => localErrors[f.name] || fieldErrors[f.name] || hostErrors[f.name],
+  ),
+);
+
+function hint(field: ScreenField): string | undefined {
+  return field.help ?? undefined;
+}
+
+function label(field: ScreenField): string {
+  return field.kind === 'money' ? `${field.label} (${currency})` : field.label;
+}
+
+async function submit(): Promise<void> {
+  if (working || submitting) return;
+  failed = false;
+  hostErrors = {};
+  const parsed = parseDraft(allFields, draft, { currency, record });
+  localErrors = parsed.errors;
+  if (Object.keys(parsed.errors).length > 0) {
+    if (advancedFields.some((f) => parsed.errors[f.name])) advancedOpen = true;
+    return;
+  }
+  working = true;
+  try {
+    const result = await onsubmit(parsed.values, { isNew });
+    if (result?.fieldErrors) {
+      hostErrors = { ...result.fieldErrors };
+      if (advancedFields.some((f) => result.fieldErrors?.[f.name])) {
+        advancedOpen = true;
+      }
+    }
+  } catch {
+    failed = true;
+  } finally {
+    working = false;
+  }
+}
+
+const busy = $derived(working || submitting);
+const formError = $derived(
+  error ?? (failed ? t(M['ui.screens.save_failed']) : null),
+);
+</script>
+
+{#snippet control(field: ScreenField)}
+  {#if field.kind === 'boolean'}
+    <div class="smrt-edit-form__check">
+      <Checkbox
+        name={field.name}
+        label={field.label}
+        disabled={busy}
+        bind:checked={() => draft[field.name] === true, (v) => (draft[field.name] = v)}
+      />
+      {#if field.help}
+        <small class="smrt-edit-form__hint">{field.help}</small>
+      {/if}
+      {#if messageFor(field)}
+        <small class="smrt-edit-form__error" role="alert">{messageFor(field)}</small>
+      {/if}
+    </div>
+  {:else}
+    <FormGroup
+      label={label(field)}
+      hint={hint(field)}
+      error={messageFor(field)}
+      required={field.required}
+    >
+      {#if field.kind === 'textarea' || field.kind === 'json'}
+        <Textarea
+          name={field.name}
+          rows={field.kind === 'json' ? 8 : 4}
+          disabled={busy}
+          required={field.required}
+          bind:value={() => text(field.name), (v) => setText(field.name, v)}
+        />
+      {:else}
+        <Input
+          name={field.name}
+          type={field.kind === 'email'
+            ? 'email'
+            : field.kind === 'url'
+              ? 'url'
+              : field.kind === 'tel'
+                ? 'tel'
+                : field.kind === 'integer' || field.kind === 'decimal'
+                  ? 'number'
+                  : field.kind === 'datetime'
+                    ? 'datetime-local'
+                    : 'text'}
+          step={field.kind === 'integer' ? '1' : field.kind === 'decimal' ? 'any' : undefined}
+          inputmode={field.kind === 'money' ? 'decimal' : undefined}
+          disabled={busy}
+          required={field.required}
+          bind:value={() => text(field.name), (v) => setText(field.name, v)}
+        />
+      {/if}
+    </FormGroup>
+  {/if}
+{/snippet}
+
+{#snippet fieldList(list: ScreenField[])}
+  {#each groupScreenFields(list) as [group, groupFields] (group ?? '')}
+    <fieldset class="smrt-edit-form__group">
+      {#if group}<legend>{group}</legend>{/if}
+      {#each groupFields as field (field.name)}
+        {@render control(field)}
+      {/each}
+    </fieldset>
+  {/each}
+{/snippet}
+
+{#if showHeader}
+  <PageHeader title={heading} />
+{/if}
+
+<section class="smrt-edit-form" aria-label={heading}>
+  {#if sourceError}
+    <Alert variant="error">{sourceError}</Alert>
+  {:else}
+    <Form onsubmit={submit} novalidate>
+      {#if formError}
+        <Alert variant="error">{formError}</Alert>
+      {/if}
+      {@render fieldList(basicFields)}
+      {#if advancedFields.length > 0}
+        <Disclosure
+          title={t(M['ui.screens.advanced_fields'])}
+          bind:open={() => advancedOpen || advancedHasProblem, (v) => (advancedOpen = v)}
+        >
+          {@render fieldList(advancedFields)}
+        </Disclosure>
+      {/if}
+      <FormActionBar>
+        {#if oncancel}
+          <Button type="button" variant="ghost" disabled={busy} onclick={oncancel}>
+            {t(M['ui.screens.cancel'])}
+          </Button>
+        {/if}
+        <Button type="submit" variant="primary" loading={busy} disabled={busy}>
+          {t(M['ui.screens.save'])}
+        </Button>
+      </FormActionBar>
+    </Form>
+  {/if}
+</section>
+
+<style>
+  .smrt-edit-form {
+    max-width: 40rem;
+  }
+  .smrt-edit-form__group {
+    border: 0;
+    margin: 0 0 var(--smrt-spacing-md, 1rem);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-md, 1rem);
+  }
+  .smrt-edit-form__group legend {
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    margin-bottom: var(--smrt-spacing-sm, 0.5rem);
+  }
+  .smrt-edit-form__check {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-xs, 0.25rem);
+  }
+  .smrt-edit-form__hint {
+    color: var(--smrt-color-on-surface-variant, #5f6368);
+  }
+  .smrt-edit-form__error {
+    color: var(--smrt-color-error, #b42318);
+  }
+</style>

package/dist/components/screens/EditForm.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { EditFormProps } from './types.js';
+declare const EditForm: import("svelte").Component<EditFormProps, {}, "">;
+type EditForm = ReturnType<typeof EditForm>;
+export default EditForm;
+//# sourceMappingURL=EditForm.svelte.d.ts.map

package/dist/components/screens/EditForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/EditForm.svelte.ts"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EACV,aAAa,EAOd,MAAM,YAAY,CAAC;AAmOpB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}