@gxp-dev/mod-ui 2.0.0

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+/**
+ * Props-driven renderer for `configuration-block/dialog`.
+ *
+ * Wraps the inner children (`nestedElements`) in a Dialog opened by a
+ * trigger Button. Full FormBuilder integration arrives in task #7.
+ */
+import { computed } from "vue"
+import { Construction } from "lucide-vue-next"
+import type { CardElement } from "@/definitions/elements"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import ElementRenderer from "@/engine/ElementRenderer.vue"
+import { cn } from "@/lib/utils"
+
+export interface DialogBlockProps {
+  label?: string
+  name?: string | null
+  triggerLabel?: string
+  title?: string
+  nestedElements?: CardElement[]
+  item?: Record<string, unknown>
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<DialogBlockProps>(), {
+  label: "Dialog",
+  nestedElements: () => [],
+  item: () => ({}),
+})
+
+const styleKey = "dialog"
+
+const resolvedTrigger = computed(
+  () => props.triggerLabel ?? props.label ?? "Open dialog",
+)
+const resolvedTitle = computed(
+  () => props.title ?? props.label ?? "Dialog",
+)
+
+const children = computed<CardElement[]>(() =>
+  (props.nestedElements ?? []).filter(
+    (entry): entry is CardElement =>
+      typeof entry === "object" &&
+      entry !== null &&
+      typeof (entry as { type?: unknown }).type === "string",
+  ),
+)
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button
+        type="button"
+        variant="outline"
+        :class="cn(props.classList)"
+        :data-element-name="props.name ?? undefined"
+        :data-stub="`configuration-block/${styleKey}`"
+        :aria-label="props.label"
+      >
+        <Construction class="size-4" />
+        {{ resolvedTrigger }}
+        <Badge variant="outline" size="sm">{{ styleKey }}</Badge>
+      </Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>{{ resolvedTitle }}</DialogTitle>
+      </DialogHeader>
+      <div v-if="children.length" class="flex flex-col gap-3">
+        <ElementRenderer
+          v-for="child in children"
+          :key="child.id"
+          :element="child"
+          :item="props.item"
+        />
+      </div>
+      <p v-else class="text-sm text-muted-foreground">
+        Dialog block — FormBuilder integration coming in task #7.
+      </p>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/components/compositions/elements/configuration-block/ElementsBlock.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import type { CardElement } from "@/definitions/elements"
+import ElementsBlock from "./ElementsBlock.vue"
+
+const meta = {
+  title: "Elements/ConfigurationBlock/ElementsBlock",
+  component: ElementsBlock,
+  tags: ["autodocs"],
+  args: {
+    label: "Elements Block",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Renderer for `configuration-block/elements-block`. Renders nested children via the engine.",
+      },
+    },
+  },
+} satisfies Meta<typeof ElementsBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const nameFields: CardElement[] = [
+  {
+    id: "child-first",
+    type: "input.text",
+    name: "first_name",
+    label: "First name",
+  } as CardElement,
+  {
+    id: "child-last",
+    type: "input.text",
+    name: "last_name",
+    label: "Last name",
+  } as CardElement,
+]
+
+export const Default: Story = {
+  args: {},
+}
+
+export const WithLabel: Story = {
+  args: {
+    label: "Profile settings",
+  },
+}
+
+export const WithNestedElements: Story = {
+  args: {
+    label: "Profile",
+    nestedElements: nameFields as unknown as Array<Record<string, unknown>>,
+  },
+}

package/src/components/compositions/elements/configuration-block/ElementsBlock.test.ts

@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+import { defineComponent, h, Suspense } from "vue"
+import { createPinia, setActivePinia } from "pinia"
+import type { CardElement } from "@/definitions/elements"
+import { __clearElementCache, preloadElement } from "@/engine/useElementLoader"
+import ElementsBlock from "./ElementsBlock.vue"
+
+function mountWithSuspense(props: Record<string, unknown>) {
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(Suspense, null, {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          default: () => h(ElementsBlock as any, props),
+        })
+    },
+  })
+  return mount(Host)
+}
+
+describe("ElementsBlock", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    __clearElementCache()
+  })
+
+  it("renders the empty state placeholder when no children are provided", () => {
+    const wrapper = mount(ElementsBlock)
+    expect(wrapper.text()).toContain("No elements configured.")
+  })
+
+  it("renders the default label", () => {
+    const wrapper = mount(ElementsBlock)
+    expect(wrapper.text()).toContain("Elements Block")
+  })
+
+  it("renders the label prop when provided", () => {
+    const wrapper = mount(ElementsBlock, { props: { label: "General settings" } })
+    expect(wrapper.text()).toContain("General settings")
+  })
+
+  it("renders nested child elements when nestedElements contains them", async () => {
+    await preloadElement("input.text")
+    const nestedElements: CardElement[] = [
+      {
+        id: "child-1",
+        type: "input.text",
+        name: "first_name",
+        label: "First name",
+      } as CardElement,
+    ]
+    const wrapper = mountWithSuspense({
+      label: "Profile",
+      nestedElements,
+    })
+    await flushPromises()
+    expect(wrapper.text()).toContain("First name")
+    expect(wrapper.find("input").exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+/**
+ * Backward-compatibility shim for `configuration-block.elements-block`.
+ *
+ * New schemas should use `card.list` directly. This component delegates
+ * entirely to ListCard so existing JSON continues to render correctly
+ * without any migration required.
+ */
+import ListCard from "@/components/compositions/elements/card/ListCard.vue"
+
+export interface ElementsBlockProps {
+  label?: string
+  name?: string | null
+  nestedElements?: Array<Record<string, unknown>>
+  item?: Record<string, unknown>
+  classList?: string[] | string
+  showCard?: boolean
+  title?: string
+  subtitle?: string
+  gutterY?: string
+  gutterX?: string
+}
+
+const props = withDefaults(defineProps<ElementsBlockProps>(), {
+  label: "Elements Block",
+  showCard: true,
+  nestedElements: () => [],
+  item: () => ({}),
+})
+</script>
+
+<template>
+  <ListCard
+    :label="props.label"
+    :title="props.title"
+    :subtitle="props.subtitle"
+    :show-card="props.showCard"
+    :gutter-y="props.gutterY"
+    :gutter-x="props.gutterX"
+    :nested-elements="props.nestedElements"
+    :item="props.item"
+    :class-list="props.classList"
+    :data-element-name="props.name ?? undefined"
+  />
+</template>

package/src/components/compositions/elements/configuration-block/ModalBlock.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import type { CardElement } from "@/definitions/elements"
+import ModalBlock from "./ModalBlock.vue"
+
+const meta = {
+  title: "Elements/ConfigurationBlock/ModalBlock",
+  component: ModalBlock,
+  tags: ["autodocs"],
+  args: {
+    label: "Modal",
+  },
+} satisfies Meta<typeof ModalBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const firstNameField: CardElement = {
+  id: "child-first",
+  type: "input.text",
+  name: "first_name",
+  label: "First name",
+} as CardElement
+
+export const Default: Story = {
+  args: {},
+}
+
+export const WithCustomLabel: Story = {
+  args: {
+    label: "Custom inline label",
+    triggerLabel: "Open settings",
+    title: "Custom inline modal",
+  },
+}
+
+export const WithNestedElements: Story = {
+  args: {
+    label: "Profile",
+    triggerLabel: "Edit profile",
+    title: "Edit profile",
+    nestedElements: [firstNameField],
+  },
+}

package/src/components/compositions/elements/configuration-block/ModalBlock.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import ModalBlock from "./ModalBlock.vue"
+
+describe("ModalBlock", () => {
+  it("mounts without error", () => {
+    const wrapper = mount(ModalBlock)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it("renders the default label", () => {
+    const wrapper = mount(ModalBlock)
+    expect(wrapper.text()).toContain("Modal")
+  })
+
+  it("renders the triggerLabel prop when provided", () => {
+    const wrapper = mount(ModalBlock, {
+      props: { triggerLabel: "Open settings" },
+    })
+    expect(wrapper.text()).toContain("Open settings")
+  })
+
+  it("renders the style key as a badge", () => {
+    const wrapper = mount(ModalBlock)
+    expect(wrapper.text()).toContain("modal")
+  })
+
+  it("exposes the data-stub attribute on the trigger", () => {
+    const wrapper = mount(ModalBlock)
+    expect(wrapper.find("[data-stub]").attributes("data-stub")).toBe(
+      "configuration-block/modal",
+    )
+  })
+})

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * Props-driven renderer for `configuration-block/modal`.
+ *
+ * Sister to DialogBlock — wraps inner children (`nestedElements`) in a
+ * full-bleed Sheet-style modal opened by a trigger Button. Full
+ * FormBuilder integration arrives in task #7.
+ */
+import { computed } from "vue"
+import { Construction } from "lucide-vue-next"
+import type { CardElement } from "@/definitions/elements"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import ElementRenderer from "@/engine/ElementRenderer.vue"
+import { cn } from "@/lib/utils"
+
+export interface ModalBlockProps {
+  label?: string
+  name?: string | null
+  triggerLabel?: string
+  title?: string
+  nestedElements?: CardElement[]
+  item?: Record<string, unknown>
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<ModalBlockProps>(), {
+  label: "Modal",
+  nestedElements: () => [],
+  item: () => ({}),
+})
+
+const styleKey = "modal"
+
+const resolvedTrigger = computed(
+  () => props.triggerLabel ?? props.label ?? "Open modal",
+)
+const resolvedTitle = computed(
+  () => props.title ?? props.label ?? "Modal",
+)
+
+const children = computed<CardElement[]>(() =>
+  (props.nestedElements ?? []).filter(
+    (entry): entry is CardElement =>
+      typeof entry === "object" &&
+      entry !== null &&
+      typeof (entry as { type?: unknown }).type === "string",
+  ),
+)
+</script>
+
+<template>
+  <Sheet>
+    <SheetTrigger as-child>
+      <Button
+        type="button"
+        variant="outline"
+        :class="cn(props.classList)"
+        :data-element-name="props.name ?? undefined"
+        :data-stub="`configuration-block/${styleKey}`"
+        :aria-label="props.label"
+      >
+        <Construction class="size-4" />
+        {{ resolvedTrigger }}
+        <Badge variant="outline" size="sm">{{ styleKey }}</Badge>
+      </Button>
+    </SheetTrigger>
+    <SheetContent side="right" class="sm:max-w-xl">
+      <SheetHeader>
+        <SheetTitle>{{ resolvedTitle }}</SheetTitle>
+      </SheetHeader>
+      <div v-if="children.length" class="flex flex-col gap-3 py-4">
+        <ElementRenderer
+          v-for="child in children"
+          :key="child.id"
+          :element="child"
+          :item="props.item"
+        />
+      </div>
+      <p v-else class="py-4 text-sm text-muted-foreground">
+        Modal block — FormBuilder integration coming in task #7.
+      </p>
+    </SheetContent>
+  </Sheet>
+</template>

package/src/components/compositions/elements/configuration-block/RepeatableBlock.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import type { CardElement } from "@/definitions/elements"
+import RepeatableBlock from "./RepeatableBlock.vue"
+
+const meta = {
+  title: "Elements/ConfigurationBlock/RepeatableBlock",
+  component: RepeatableBlock,
+  tags: ["autodocs"],
+  args: {
+    label: "Repeatable",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Renderer for `configuration-block/repeatable`. Local add/remove shell — full persistence lands in task #7.",
+      },
+    },
+  },
+} satisfies Meta<typeof RepeatableBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const tierTemplate: CardElement[] = [
+  {
+    id: "tier-name",
+    type: "input.text",
+    name: "tier_name",
+    label: "Tier name",
+  } as CardElement,
+]
+
+export const Default: Story = {
+  args: {},
+}
+
+export const WithLabel: Story = {
+  args: {
+    label: "Speakers",
+    addButtonLabel: "Add speaker",
+  },
+}
+
+export const WithSeededRows: Story = {
+  args: {
+    label: "Sponsor tiers",
+    addButtonLabel: "Add tier",
+    modelValue: [{}, {}],
+    itemTemplate: tierTemplate,
+  },
+}

package/src/components/compositions/elements/configuration-block/RepeatableBlock.test.ts

@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import { createPinia, setActivePinia } from "pinia"
+import { __clearElementCache } from "@/engine/useElementLoader"
+import RepeatableBlock from "./RepeatableBlock.vue"
+
+describe("RepeatableBlock", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    __clearElementCache()
+  })
+
+  it("renders the placeholder card", () => {
+    const wrapper = mount(RepeatableBlock)
+    expect(wrapper.text()).toContain(
+      "Repeatable block — FormBuilder integration coming in task #7.",
+    )
+    expect(wrapper.attributes("data-stub")).toBe(
+      "configuration-block/repeatable",
+    )
+  })
+
+  it("renders the default label", () => {
+    const wrapper = mount(RepeatableBlock)
+    expect(wrapper.text()).toContain("Repeatable")
+  })
+
+  it("renders the label prop when provided", () => {
+    const wrapper = mount(RepeatableBlock, { props: { label: "Speakers" } })
+    expect(wrapper.text()).toContain("Speakers")
+  })
+
+  it("seeds rows from the modelValue array length", () => {
+    const wrapper = mount(RepeatableBlock, {
+      props: { modelValue: [{}, {}] },
+    })
+    expect(wrapper.findAll("[data-testid='repeatable-row']").length).toBe(2)
+  })
+
+  it("adds a row when the add button is clicked", async () => {
+    const wrapper = mount(RepeatableBlock, {
+      props: { addButtonLabel: "Add speaker" },
+    })
+    expect(wrapper.findAll("[data-testid='repeatable-row']").length).toBe(0)
+    await wrapper.find("[data-testid='repeatable-add']").trigger("click")
+    expect(wrapper.findAll("[data-testid='repeatable-row']").length).toBe(1)
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy()
+  })
+
+  it("emits update:modelValue when a row is removed", async () => {
+    const wrapper = mount(RepeatableBlock, {
+      props: { modelValue: [{ a: 1 }, { a: 2 }] },
+    })
+    expect(wrapper.findAll("[data-testid='repeatable-row']").length).toBe(2)
+    await wrapper.find("button[aria-label='Remove row']").trigger("click")
+    expect(wrapper.findAll("[data-testid='repeatable-row']").length).toBe(1)
+    const emitted = wrapper.emitted("update:modelValue")
+    expect(emitted).toBeTruthy()
+    expect((emitted![0] as unknown[])[0]).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,154 @@
+<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 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 { cn } from "@/lib/utils"
+
+export interface RepeatableBlockProps {
+  label?: string
+  name?: string | null
+  modelValue?: unknown[]
+  itemTemplate?: CardElement[]
+  addButtonLabel?: string
+  item?: Record<string, unknown>
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<RepeatableBlockProps>(), {
+  label: "Repeatable",
+  addButtonLabel: "Add row",
+  modelValue: () => [],
+  itemTemplate: () => [],
+  item: () => ({}),
+})
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: unknown[]): void
+}>()
+
+const styleKey = "repeatable"
+
+const rowSchema = computed<CardElement[]>(() =>
+  (props.itemTemplate ?? []).filter(
+    (entry): entry is CardElement =>
+      typeof entry === "object" &&
+      entry !== null &&
+      typeof (entry as { type?: unknown }).type === "string",
+  ),
+)
+
+const initialRowCount = Array.isArray(props.modelValue)
+  ? props.modelValue.length
+  : 0
+
+const rows = ref<number[]>(
+  Array.from({ length: initialRowCount }, (_unused, index) => index),
+)
+
+let nextRowId = initialRowCount
+
+watch(
+  () => props.modelValue,
+  (next) => {
+    if (!Array.isArray(next)) {
+      return
+    }
+    if (next.length !== rows.value.length) {
+      rows.value = Array.from({ length: next.length }, (_u, i) => i)
+      nextRowId = next.length
+    }
+  },
+)
+
+function addRow(): void {
+  rows.value.push(nextRowId++)
+  emit("update:modelValue", [...(props.modelValue ?? []), {}])
+}
+
+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)
+  }
+}
+</script>
+
+<template>
+  <Card
+    :class="cn('border-dashed', 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-for="rowId in rows"
+          :key="rowId"
+          class="rounded-md border border-dashed p-3"
+          data-testid="repeatable-row"
+        >
+          <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>
+        </div>
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        data-testid="repeatable-add"
+        @click="addRow"
+      >
+        <Plus />
+        {{ props.addButtonLabel }}
+      </Button>
+    </CardContent>
+  </Card>
+</template>