@gxp-dev/mod-ui 2.0.0 → 2.0.3

package/src/components/compositions/elements/configuration-block/RepeatableBlock.vue

@@ -1,27 +1,24 @@
 <script setup lang="ts">
-/**
- * Props-driven renderer for `configuration-block/repeatable`.
- *
- * Renders an Add/Remove UI shell for repeatable rows. Each row mirrors
- * `itemTemplate`. The current row count is reflected via `modelValue`
- * (defaulting to an empty array). Full FormBuilder integration arrives
- * in task #7.
- */
-import { computed, ref, watch } from "vue"
-import { Construction, Plus, X } from "lucide-vue-next"
+import { computed, inject, nextTick, ref, watch } from "vue"
+import { ChevronDown, ChevronRight, Plus, Trash2 } from "lucide-vue-next"
 import type { CardElement } from "@/definitions/elements"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import ElementRenderer from "@/engine/ElementRenderer.vue"
+import { useFormDataStore } from "@/stores/formDataStore"
+import { FORM_ID_KEY } from "@/engine/useFormData"
 import { cn } from "@/lib/utils"
+import RepeatableRow from "./RepeatableRow.vue"
 
 export interface RepeatableBlockProps {
   label?: string
   name?: string | null
   modelValue?: unknown[]
-  itemTemplate?: CardElement[]
+  /** Child element schema for each row. Engine remaps selectOptions → nestedElements. */
+  nestedElements?: Array<Record<string, unknown>>
   addButtonLabel?: string
+  /** Field names whose values in a row are joined to form the row's header label. */
+  optionLabelFields?: ReadonlyArray<string>
+  /** Collapse all rows on initial render. */
+  collapsedByDefault?: boolean
   item?: Record<string, unknown>
   classList?: string[] | string
 }
@@ -30,7 +27,9 @@ const props = withDefaults(defineProps<RepeatableBlockProps>(), {
   label: "Repeatable",
   addButtonLabel: "Add row",
   modelValue: () => [],
-  itemTemplate: () => [],
+  nestedElements: () => [],
+  optionLabelFields: () => [],
+  collapsedByDefault: false,
   item: () => ({}),
 })
 
@@ -38,117 +37,187 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: unknown[]): void
 }>()
 
-const styleKey = "repeatable"
+const parentFormId = inject(FORM_ID_KEY, "default")
+const store = useFormDataStore()
 
 const rowSchema = computed<CardElement[]>(() =>
-  (props.itemTemplate ?? []).filter(
-    (entry): entry is CardElement =>
+  (props.nestedElements ?? []).filter(
+    (entry): boolean =>
       typeof entry === "object" &&
       entry !== null &&
       typeof (entry as { type?: unknown }).type === "string",
-  ),
+  ) as unknown as CardElement[],
 )
 
-const initialRowCount = Array.isArray(props.modelValue)
-  ? props.modelValue.length
-  : 0
+interface RowEntry {
+  id: number
+  formId: string
+  collapsed: boolean
+}
+
+let nextRowId = 0
+
+function makeRowFormId(rowId: number): string {
+  return `${parentFormId}__${props.name ?? "repeatable"}__${rowId}`
+}
+
+function makeRow(initialData?: Record<string, unknown>): RowEntry {
+  const id = nextRowId++
+  const formId = makeRowFormId(id)
+  store.ensureForm(formId)
+  if (initialData && Object.keys(initialData).length > 0) {
+    store.setInitialValues(formId, initialData)
+  }
+  return { id, formId, collapsed: props.collapsedByDefault }
+}
+
+function buildRows(data: unknown[]): RowEntry[] {
+  return data.map((d) => makeRow(typeof d === "object" && d !== null ? (d as Record<string, unknown>) : {}))
+}
 
-const rows = ref<number[]>(
-  Array.from({ length: initialRowCount }, (_unused, index) => index),
+const rows = ref<RowEntry[]>(
+  Array.isArray(props.modelValue) && props.modelValue.length > 0
+    ? buildRows(props.modelValue)
+    : [],
 )
 
-let nextRowId = initialRowCount
+function collectRowData(): unknown[] {
+  return rows.value.map((row) => ({ ...(store.forms[row.formId]?.values ?? {}) }))
+}
+
+function rowLabel(row: RowEntry, index: number): string {
+  const labelFields = props.optionLabelFields ?? []
+  if (labelFields.length > 0) {
+    const values = store.forms[row.formId]?.values ?? {}
+    const parts = labelFields
+      .map((f) => values[f])
+      .filter((v) => typeof v === "string" && v.trim() !== "")
+      .join(" ")
+    if (parts) {
+      return parts
+    }
+  }
+  return `${props.label} ${index + 1}`
+}
+
+let suppressSync = false
+
+watch(
+  () => rows.value.map((r) => ({ ...store.forms[r.formId]?.values })),
+  () => {
+    if (suppressSync) {
+      return
+    }
+    suppressSync = true
+    emit("update:modelValue", collectRowData())
+    void nextTick(() => {
+      suppressSync = false
+    })
+  },
+  { deep: true },
+)
 
 watch(
   () => props.modelValue,
   (next) => {
-    if (!Array.isArray(next)) {
+    if (suppressSync || !Array.isArray(next)) {
       return
     }
-    if (next.length !== rows.value.length) {
-      rows.value = Array.from({ length: next.length }, (_u, i) => i)
-      nextRowId = next.length
+    if (next.length === rows.value.length) {
+      return
+    }
+    suppressSync = true
+    if (next.length > rows.value.length) {
+      while (rows.value.length < next.length) {
+        const d = next[rows.value.length]
+        rows.value.push(makeRow(typeof d === "object" && d !== null ? (d as Record<string, unknown>) : {}))
+      }
+    } else {
+      const removed = rows.value.splice(next.length)
+      removed.forEach((r) => store.resetForm(r.formId))
     }
+    void nextTick(() => {
+      suppressSync = false
+    })
   },
 )
 
 function addRow(): void {
-  rows.value.push(nextRowId++)
-  emit("update:modelValue", [...(props.modelValue ?? []), {}])
+  rows.value.push(makeRow())
 }
 
 function removeRow(rowId: number): void {
-  const idx = rows.value.indexOf(rowId)
-  rows.value = rows.value.filter((id) => id !== rowId)
-  if (idx >= 0) {
-    const next = [...(props.modelValue ?? [])]
-    next.splice(idx, 1)
-    emit("update:modelValue", next)
+  const idx = rows.value.findIndex((r) => r.id === rowId)
+  if (idx < 0) {
+    return
+  }
+  const [removed] = rows.value.splice(idx, 1)
+  store.resetForm(removed.formId)
+}
+
+function toggleRow(rowId: number): void {
+  const row = rows.value.find((r) => r.id === rowId)
+  if (row) {
+    row.collapsed = !row.collapsed
   }
 }
 </script>
 
 <template>
-  <Card
-    :class="cn('border-dashed', props.classList)"
+  <div
+    :class="cn('flex flex-col gap-1', props.classList)"
     :data-element-name="props.name ?? undefined"
-    :data-stub="`configuration-block/${styleKey}`"
   >
-    <CardHeader>
-      <div class="flex items-center justify-between gap-2">
-        <CardTitle class="flex items-center gap-2 text-base">
-          <Construction class="size-5 text-muted-foreground" />
-          <span>{{ props.label }}</span>
-        </CardTitle>
-        <Badge variant="outline" size="sm">{{ styleKey }}</Badge>
-      </div>
-    </CardHeader>
-    <CardContent>
-      <p class="mb-3 text-sm text-muted-foreground">
-        Repeatable block — FormBuilder integration coming in task #7. Rows:
-        {{ rows.length }}
-      </p>
-      <div v-if="rows.length" class="mb-3 flex flex-col gap-3">
+    <div v-if="rows.length" class="flex flex-col gap-2">
+      <div
+        v-for="(row, index) in rows"
+        :key="row.id"
+        class="rounded-md border bg-card"
+        data-testid="repeatable-row"
+      >
+        <!-- Row header -->
         <div
-          v-for="rowId in rows"
-          :key="rowId"
-          class="rounded-md border border-dashed p-3"
-          data-testid="repeatable-row"
+          class="flex cursor-pointer items-center justify-between gap-2 px-3 py-2"
+          @click="toggleRow(row.id)"
         >
-          <div class="mb-2 flex items-center justify-between">
-            <span class="text-xs font-medium text-muted-foreground">
-              Row {{ rowId + 1 }}
-            </span>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              type="button"
-              aria-label="Remove row"
-              @click="removeRow(rowId)"
-            >
-              <X />
-            </Button>
-          </div>
-          <div v-if="rowSchema.length" class="flex flex-col gap-2">
-            <ElementRenderer
-              v-for="child in rowSchema"
-              :key="`${rowId}-${child.id}`"
-              :element="child"
-              :item="props.item"
-            />
+          <div class="flex items-center gap-1.5 text-sm font-medium">
+            <ChevronDown v-if="!row.collapsed" class="size-3.5 shrink-0 text-muted-foreground" />
+            <ChevronRight v-else class="size-3.5 shrink-0 text-muted-foreground" />
+            <span>{{ rowLabel(row, index) }}</span>
           </div>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            type="button"
+            aria-label="Remove row"
+            class="shrink-0 text-muted-foreground hover:text-destructive"
+            @click.stop="removeRow(row.id)"
+          >
+            <Trash2 class="size-3.5" />
+          </Button>
+        </div>
+
+        <!-- Row content -->
+        <div v-if="!row.collapsed && rowSchema.length" class="border-t px-3 py-3">
+          <RepeatableRow
+            :form-id="row.formId"
+            :schema="rowSchema"
+            :item="props.item"
+          />
         </div>
       </div>
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        data-testid="repeatable-add"
-        @click="addRow"
-      >
-        <Plus />
-        {{ props.addButtonLabel }}
-      </Button>
-    </CardContent>
-  </Card>
+    </div>
+
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      class="self-start"
+      data-testid="repeatable-add"
+      @click="addRow"
+    >
+      <Plus class="size-3.5" />
+      {{ props.addButtonLabel }}
+    </Button>
+  </div>
 </template>

package/src/components/compositions/elements/configuration-block/RepeatableRow.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * Single row inside a RepeatableBlock.
+ *
+ * Provides its own isolated formId via Vue's inject/provide so every
+ * child ElementRenderer binds to that row's slot in the formDataStore
+ * rather than the parent form's slot.
+ */
+import type { CardElement } from "@/definitions/elements"
+import ElementRenderer from "@/engine/ElementRenderer.vue"
+import { provideFormId } from "@/engine/useFormData"
+
+const props = defineProps<{
+  /** Unique key for this row's isolated formDataStore entry. */
+  formId: string
+  /** CardElement schema for each field in the row. */
+  schema: CardElement[]
+  /** Read-only context item forwarded from the parent. */
+  item: Record<string, unknown>
+}>()
+
+// Must be synchronous — provide happens during component setup so all
+// descendant ElementRenderers pick it up before their own setup runs.
+provideFormId(props.formId)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <ElementRenderer
+      v-for="child in props.schema"
+      :key="child.id"
+      :element="child"
+      :item="props.item"
+    />
+  </div>
+</template>

package/src/components/compositions/elements/display/BannerDisplay.stories.ts

@@ -1,14 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import BannerDisplay from "./BannerDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/BannerDisplay",
+  title: "Elements/Display/BannerDisplay",
   component: BannerDisplay,
   tags: ["autodocs"],
   args: {
     title: "Heads up",
     value: "This is a static banner message.",
   },
+  parameters: componentDoc("BannerDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-xl p-4"><story /></div>',

package/src/components/compositions/elements/display/BarcodeDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import BarcodeDisplay from "./BarcodeDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/BarcodeDisplay",
+  title: "Elements/Display/BarcodeDisplay",
   component: BarcodeDisplay,
   tags: ["autodocs"],
   args: { value: "GXP-12345" },
+  parameters: componentDoc("BarcodeDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="p-4"><story /></div>',

package/src/components/compositions/elements/display/CarouselDisplay.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import CarouselDisplay from "./CarouselDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const imageSlides = [
   { src: "https://picsum.photos/seed/gxp-1/800/400", alt: "Slide 1" },
@@ -8,7 +9,7 @@ const imageSlides = [
 ]
 
 const meta = {
-  title: "Compositions/Elements/Display/CarouselDisplay",
+  title: "Elements/Display/CarouselDisplay",
   component: CarouselDisplay,
   tags: ["autodocs"],
   args: {
@@ -19,6 +20,7 @@ const meta = {
     showIndicators: true,
     showArrows: true,
   },
+  parameters: componentDoc("CarouselDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-xl p-4"><story /></div>',

package/src/components/compositions/elements/display/ChartDisplay.stories.ts

@@ -1,6 +1,7 @@
 import type { ChartData } from "chart.js"
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ChartDisplay from "./ChartDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const lineData: ChartData<"line"> = {
   labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
@@ -61,7 +62,7 @@ const radarData: ChartData<"radar"> = {
 }
 
 const meta = {
-  title: "Compositions/Elements/Display/ChartDisplay",
+  title: "Elements/Display/ChartDisplay",
   component: ChartDisplay,
   tags: ["autodocs"],
   args: {
@@ -69,6 +70,7 @@ const meta = {
     data: lineData as ChartData,
     height: 320,
   },
+  parameters: componentDoc("ChartDisplay", { barrel: "display" }),
   decorators: [
     () => ({ template: '<div class="max-w-2xl p-4"><story /></div>' }),
   ],

package/src/components/compositions/elements/display/HtmlDisplay.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import HtmlDisplay from "./HtmlDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/HtmlDisplay",
+  title: "Elements/Display/HtmlDisplay",
   component: HtmlDisplay,
   tags: ["autodocs"],
   args: {
     value: "<p>This is <strong>raw HTML</strong>.</p>",
   },
+  parameters: componentDoc("HtmlDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-prose p-4"><story /></div>',

package/src/components/compositions/elements/display/IconDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import IconDisplay from "./IconDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/IconDisplay",
+  title: "Elements/Display/IconDisplay",
   component: IconDisplay,
   tags: ["autodocs"],
   args: { iconName: "Check", size: 20 },
+  parameters: componentDoc("IconDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="p-4"><story /></div>',

package/src/components/compositions/elements/display/IframeDisplay.stories.ts

@@ -1,14 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import IframeDisplay from "./IframeDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/IframeDisplay",
+  title: "Elements/Display/IframeDisplay",
   component: IframeDisplay,
   tags: ["autodocs"],
   args: {
     src: "https://example.com",
     title: "Example.com",
   },
+  parameters: componentDoc("IframeDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-3xl p-4"><story /></div>',

package/src/components/compositions/elements/display/ImageDisplay.stories.ts

@@ -1,14 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ImageDisplay from "./ImageDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/ImageDisplay",
+  title: "Elements/Display/ImageDisplay",
   component: ImageDisplay,
   tags: ["autodocs"],
   args: {
     src: "https://picsum.photos/seed/gxp/600/400",
     alt: "Random landscape",
   },
+  parameters: componentDoc("ImageDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-md p-4"><story /></div>',

package/src/components/compositions/elements/display/MarkdownDisplay.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import MarkdownDisplay from "./MarkdownDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/MarkdownDisplay",
+  title: "Elements/Display/MarkdownDisplay",
   component: MarkdownDisplay,
   tags: ["autodocs"],
   args: {
     value: "# Hello\n\nThis is **markdown**.",
   },
+  parameters: componentDoc("MarkdownDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-prose p-4"><story /></div>',

package/src/components/compositions/elements/display/ProgressBarDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ProgressBarDisplay from "./ProgressBarDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/ProgressBarDisplay",
+  title: "Elements/Display/ProgressBarDisplay",
   component: ProgressBarDisplay,
   tags: ["autodocs"],
   args: { progress: 50, label: "Setup progress" },
+  parameters: componentDoc("ProgressBarDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-md p-4"><story /></div>',

package/src/components/compositions/elements/display/QrCodeDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import QrCodeDisplay from "./QrCodeDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/QrCodeDisplay",
+  title: "Elements/Display/QrCodeDisplay",
   component: QrCodeDisplay,
   tags: ["autodocs"],
   args: { value: "https://example.com" },
+  parameters: componentDoc("QrCodeDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="p-4"><story /></div>',

package/src/components/compositions/elements/display/ReactiveCanvasDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ReactiveCanvasDisplay from "./ReactiveCanvasDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/ReactiveCanvasDisplay",
+  title: "Elements/Display/ReactiveCanvasDisplay",
   component: ReactiveCanvasDisplay,
   tags: ["autodocs"],
   args: { label: "Live preview" },
+  parameters: componentDoc("ReactiveCanvasDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-xl p-4"><story /></div>',

package/src/components/compositions/elements/display/SpriteDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import SpriteDisplay from "./SpriteDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/SpriteDisplay",
+  title: "Elements/Display/SpriteDisplay",
   component: SpriteDisplay,
   tags: ["autodocs"],
   args: { label: "Confetti" },
+  parameters: componentDoc("SpriteDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-xl p-4"><story /></div>',

package/src/components/compositions/elements/display/TypeDisplay.stories.ts

@@ -1,14 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import TypeDisplay from "./TypeDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/TypeDisplay",
+  title: "Elements/Display/TypeDisplay",
   component: TypeDisplay,
   tags: ["autodocs"],
   args: {
     value: "The quick brown fox jumps over the lazy dog.",
     contentType: "paragraph",
   },
+  parameters: componentDoc("TypeDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-prose p-4"><story /></div>',

package/src/components/compositions/elements/display/VideoPlayerDisplay.stories.ts

@@ -1,16 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import VideoPlayerDisplay from "./VideoPlayerDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const SAMPLE_MP4 =
   "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
 
 const meta = {
-  title: "Compositions/Elements/Display/VideoPlayerDisplay",
+  title: "Elements/Display/VideoPlayerDisplay",
   component: VideoPlayerDisplay,
   tags: ["autodocs"],
   args: {
     src: SAMPLE_MP4,
   },
+  parameters: componentDoc("VideoPlayerDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-2xl p-4"><story /></div>',