@happyvertical/smrt-content 0.51.39 → 0.52.0

package/dist/svelte/components/ContentMetadataFields.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
-import { Input, Textarea } from '@happyvertical/smrt-ui/forms';
+import { FormGroup, Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../i18n.editor.js';
+import {
+  type ContentFieldMode,
+  type ContentMetadataFieldName,
+  FULL_METADATA_FIELDS,
+  resolveContentFields,
+  SIMPLE_METADATA_FIELDS,
+} from './content-field-mode.js';
 
 const { t } = useI18n();
 
@@ -17,16 +24,62 @@ export interface ContentMetadataFieldData {
 export interface Props {
   /** Current metadata field values. */
   data: ContentMetadataFieldData;
+  /**
+   * `full` (default) shows Author, Description, Tags, URL and File key;
+   * `simple` shows Author, Summary and Tags — each marked "(optional)" —
+   * inside a collapsed "Details" section.
+   */
+  mode?: ContentFieldMode;
+  /** Explicit allow-list of fields; overrides the mode's choice. */
+  fields?: readonly ContentMetadataFieldName[];
+  /**
+   * Wrap the fields in a "Details" disclosure. Defaults to collapsed in
+   * simple mode and off in full mode. Pass `{ open: true }` to start open,
+   * or `false` when the page supplies its own section.
+   */
+  details?: boolean | { open?: boolean; label?: string };
+  /** Prefix for field DOM ids, unique per editor on the page (default `content`). */
+  idPrefix?: string;
   /** Invoked when the user modifies any metadata field. */
   onChange?: (change: Record<string, unknown>) => void;
 }
 
-let { data, onChange = undefined }: Props = $props();
+let {
+  data,
+  mode = 'full',
+  fields = undefined,
+  details = undefined,
+  idPrefix = 'content',
+  onChange = undefined,
+}: Props = $props();
+
+const simple = $derived(mode === 'simple');
+const shown = $derived(
+  resolveContentFields(
+    mode,
+    fields,
+    SIMPLE_METADATA_FIELDS,
+    FULL_METADATA_FIELDS,
+  ),
+);
+const disclosure = $derived.by(() => {
+  const setting = details ?? simple;
+  if (setting === false) return null;
+  const options = typeof setting === 'object' ? setting : {};
+  return {
+    open: options.open ?? false,
+    label: options.label ?? t(M['content.content_fields.details']),
+  };
+});
 
 const tagsValue = $derived(
   Array.isArray(data.tags) ? data.tags.join(', ') : String(data.tags || ''),
 );
 
+function fieldLabel(label: string): string {
+  return simple ? t(M['content.content_fields.optional'], { label }) : label;
+}
+
 function updateField(key: string, value: unknown) {
   onChange?.({ [key]: value });
 }
@@ -42,49 +95,80 @@ function updateTags(value: string) {
 }
 </script>
 
-<div class="content-metadata-fields">
-  <label>
-    <span>Author</span>
-    <Input
-      type="text"
-      value={data.author || ''}
-      oninput={(event) => updateField('author', event.currentTarget.value)}
-    />
-  </label>
-  <label>
-    <span>Description</span>
-    <Textarea
-      rows={4}
-      value={data.description || ''}
-      oninput={(event) => updateField('description', event.currentTarget.value)}
-    ></Textarea>
-  </label>
-  <label>
-    <span>Tags</span>
-    <Input
-      type="text"
-      value={tagsValue}
-      placeholder={t(M['content.content_metadata_fields.tags_placeholder'])}
-      oninput={(event) => updateTags(event.currentTarget.value)}
-    />
-  </label>
-  <label>
-    <span>URL</span>
-    <Input
-      type="url"
-      value={data.url || ''}
-      oninput={(event) => updateField('url', event.currentTarget.value)}
-    />
-  </label>
-  <label>
-    <span>{t(M['content.content_metadata_fields.file_key'])}</span>
-    <Input
-      type="text"
-      value={data.fileKey || ''}
-      oninput={(event) => updateField('fileKey', event.currentTarget.value)}
-    />
-  </label>
-</div>
+{#snippet metadataFields()}
+  <div class="content-metadata-fields">
+    {#if shown.has('author')}
+      <FormGroup label={fieldLabel(t(M['content.content_fields.author']))} id="{idPrefix}-author">
+        <Input
+          name="author"
+          type="text"
+          value={data.author || ''}
+          oninput={(event) => updateField('author', event.currentTarget.value)}
+        />
+      </FormGroup>
+    {/if}
+    {#if shown.has('description')}
+      <FormGroup
+        label={simple
+          ? fieldLabel(t(M['content.content_fields.summary']))
+          : t(M['content.content_fields.description'])}
+        hint={simple ? t(M['content.content_fields.summary_hint']) : undefined}
+        id="{idPrefix}-description"
+      >
+        <Textarea
+          name="description"
+          rows={simple ? 3 : 4}
+          value={data.description || ''}
+          oninput={(event) => updateField('description', event.currentTarget.value)}
+        ></Textarea>
+      </FormGroup>
+    {/if}
+    {#if shown.has('tags')}
+      <FormGroup
+        label={fieldLabel(t(M['content.content_fields.tags']))}
+        hint={simple ? t(M['content.content_fields.tags_hint']) : undefined}
+        id="{idPrefix}-tags"
+      >
+        <Input
+          name="tags"
+          type="text"
+          value={tagsValue}
+          placeholder={t(M['content.content_metadata_fields.tags_placeholder'])}
+          oninput={(event) => updateTags(event.currentTarget.value)}
+        />
+      </FormGroup>
+    {/if}
+    {#if shown.has('url')}
+      <FormGroup label={fieldLabel(t(M['content.content_fields.url']))} id="{idPrefix}-url">
+        <Input
+          name="url"
+          type="url"
+          value={data.url || ''}
+          oninput={(event) => updateField('url', event.currentTarget.value)}
+        />
+      </FormGroup>
+    {/if}
+    {#if shown.has('fileKey')}
+      <FormGroup label={fieldLabel(t(M['content.content_metadata_fields.file_key']))} id="{idPrefix}-file-key">
+        <Input
+          name="fileKey"
+          type="text"
+          value={data.fileKey || ''}
+          oninput={(event) => updateField('fileKey', event.currentTarget.value)}
+        />
+      </FormGroup>
+    {/if}
+  </div>
+{/snippet}
+
+{#if disclosure}
+  <details class="content-metadata-details" open={disclosure.open}>
+    <summary>{disclosure.label}</summary>
+    {@render metadataFields()}
+  </details>
+{:else}
+  {@render metadataFields()}
+{/if}
 
 <style>
   .content-metadata-fields {
@@ -92,12 +176,18 @@ function updateTags(value: string) {
     gap: 1rem;
   }
 
-  label {
-    display: grid;
-    gap: 0.45rem;
-    color: var(--smrt-color-on-surface-variant);
-    font-size: var(--smrt-typography-label-large-size, 0.875rem);
-    font-weight: var(--smrt-typography-weight-medium, 500);
+  .content-metadata-fields :global(.form-group) {
+    margin: 0;
+  }
+
+  .content-metadata-details > summary {
+    cursor: pointer;
+    padding-block: 0.5rem;
+    color: var(--smrt-color-on-surface);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
+  .content-metadata-details[open] > summary {
+    margin-bottom: 0.75rem;
+  }
 </style>

package/dist/svelte/components/ContentMetadataFields.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type ContentFieldMode, type ContentMetadataFieldName } from './content-field-mode.js';
 export interface ContentMetadataFieldData {
     author?: string;
     description?: string;
@@ -9,6 +10,25 @@ export interface ContentMetadataFieldData {
 export interface Props {
     /** Current metadata field values. */
     data: ContentMetadataFieldData;
+    /**
+     * `full` (default) shows Author, Description, Tags, URL and File key;
+     * `simple` shows Author, Summary and Tags — each marked "(optional)" —
+     * inside a collapsed "Details" section.
+     */
+    mode?: ContentFieldMode;
+    /** Explicit allow-list of fields; overrides the mode's choice. */
+    fields?: readonly ContentMetadataFieldName[];
+    /**
+     * Wrap the fields in a "Details" disclosure. Defaults to collapsed in
+     * simple mode and off in full mode. Pass `{ open: true }` to start open,
+     * or `false` when the page supplies its own section.
+     */
+    details?: boolean | {
+        open?: boolean;
+        label?: string;
+    };
+    /** Prefix for field DOM ids, unique per editor on the page (default `content`). */
+    idPrefix?: string;
     /** Invoked when the user modifies any metadata field. */
     onChange?: (change: Record<string, unknown>) => void;
 }

package/dist/svelte/components/ContentMetadataFields.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentMetadataFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentMetadataFields.svelte.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,KAAK;IACpB,qCAAqC;IACrC,IAAI,EAAE,wBAAwB,CAAC;IAC/B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AA0DD,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ContentMetadataFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentMetadataFields.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,wBAAwB,EAI9B,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,KAAK;IACpB,qCAAqC;IACrC,IAAI,EAAE,wBAAwB,CAAC;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAC;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AA2GD,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}