@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/elements/card/DatatableCard.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+/**
+ * `card.datatable` element composition.
+ *
+ * Renders a simple sortable data table. Column definitions come from
+ * `tableColumns`; row data is either supplied via `item[name]` or fetched
+ * from `dataRoute`. Full pagination/filter support is handled by the
+ * platform's DataTableCard when used in the card-tier — this element-tier
+ * variant is intentionally lightweight for inline embedding.
+ */
+import { computed } from "vue"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+interface TableColumn {
+  key: string
+  label: string
+  sortable?: boolean
+}
+
+export interface DatatableCardProps {
+  label?: string
+  title?: string
+  showCard?: boolean
+  tableColumns?: TableColumn[]
+  /** Data rows supplied inline (e.g. from `item[name]`). */
+  rows?: Array<Record<string, unknown>>
+  /** API route for fetching rows (displayed as a hint when rows is empty). */
+  dataRoute?: string
+  item?: Record<string, unknown>
+  name?: string | null
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<DatatableCardProps>(), {
+  showCard: true,
+  tableColumns: () => [],
+  rows: () => [],
+  item: () => ({}),
+})
+
+const heading = computed(() => props.title ?? props.label)
+
+const resolvedRows = computed<Array<Record<string, unknown>>>(() => {
+  if (props.rows && props.rows.length > 0) return props.rows
+  const name = props.name
+  if (name && props.item[name]) {
+    const val = props.item[name]
+    if (Array.isArray(val)) return val as Array<Record<string, unknown>>
+  }
+  return []
+})
+
+function cellValue(row: Record<string, unknown>, col: TableColumn): string {
+  const val = row[col.key]
+  return val !== undefined && val !== null ? String(val) : "—"
+}
+</script>
+
+<template>
+  <Card v-if="props.showCard !== false" :class="cn(props.classList)">
+    <CardHeader v-if="heading">
+      <CardTitle>{{ heading }}</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <Table v-if="props.tableColumns.length">
+        <TableHeader>
+          <TableRow>
+            <TableHead
+              v-for="col in props.tableColumns"
+              :key="col.key"
+            >
+              {{ col.label }}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow
+            v-for="(row, i) in resolvedRows"
+            :key="i"
+          >
+            <TableCell
+              v-for="col in props.tableColumns"
+              :key="col.key"
+            >
+              {{ cellValue(row, col) }}
+            </TableCell>
+          </TableRow>
+          <TableRow v-if="!resolvedRows.length">
+            <TableCell
+              :colspan="props.tableColumns.length || 1"
+              class="text-center text-muted-foreground"
+            >
+              {{ props.dataRoute ? `Data fetched from: ${props.dataRoute}` : "No data." }}
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <p v-else class="text-sm text-muted-foreground">No columns configured.</p>
+    </CardContent>
+  </Card>
+
+  <div v-else :class="cn(props.classList)">
+    <Table v-if="props.tableColumns.length">
+      <TableHeader>
+        <TableRow>
+          <TableHead v-for="col in props.tableColumns" :key="col.key">{{ col.label }}</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-for="(row, i) in resolvedRows" :key="i">
+          <TableCell v-for="col in props.tableColumns" :key="col.key">{{ cellValue(row, col) }}</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</template>

package/src/components/compositions/elements/card/GridCard.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * `card.grid` element composition.
+ *
+ * Renders nested child elements in a CSS grid with configurable column
+ * count and row height. Children are rendered via ElementRenderer; the
+ * grid layout is controlled by `gridCols` and `gridRowHeight`.
+ *
+ * For a visual drag-and-drop grid designer use `builder.grid-builder`.
+ * This element focuses on static configured layouts.
+ */
+import { computed } from "vue"
+import type { CardElement } from "@/definitions/elements"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import ElementRenderer from "@/engine/ElementRenderer.vue"
+import { cn } from "@/lib/utils"
+
+export interface GridCardProps {
+  label?: string
+  title?: string
+  showCard?: boolean
+  gridCols?: number
+  gridRowHeight?: number
+  nestedElements?: Array<Record<string, unknown>>
+  item?: Record<string, unknown>
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<GridCardProps>(), {
+  showCard: true,
+  gridCols: 3,
+  gridRowHeight: 60,
+  nestedElements: () => [],
+  item: () => ({}),
+})
+
+const heading = computed(() => props.title ?? props.label)
+
+const children = computed(() =>
+  (props.nestedElements ?? []).filter(
+    (e): boolean =>
+      typeof e === "object" &&
+      e !== null &&
+      typeof (e as Record<string, unknown>).type === "string",
+  ) as unknown as CardElement[],
+)
+
+const gridStyle = computed(() => ({
+  display: "grid",
+  gridTemplateColumns: `repeat(${props.gridCols}, minmax(0, 1fr))`,
+  gridAutoRows: `${props.gridRowHeight}px`,
+  gap: "0.5rem",
+}))
+</script>
+
+<template>
+  <Card v-if="props.showCard !== false" :class="cn(props.classList)">
+    <CardHeader v-if="heading">
+      <CardTitle>{{ heading }}</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <div :style="gridStyle">
+        <ElementRenderer
+          v-for="child in children"
+          :key="child.id"
+          :element="child"
+          :item="props.item"
+        />
+        <p
+          v-if="!children.length"
+          class="col-span-full py-3 text-center text-sm text-muted-foreground"
+        >
+          No elements configured.
+        </p>
+      </div>
+    </CardContent>
+  </Card>
+
+  <div v-else :class="cn(props.classList)" :style="gridStyle">
+    <ElementRenderer
+      v-for="child in children"
+      :key="child.id"
+      :element="child"
+      :item="props.item"
+    />
+  </div>
+</template>

package/src/components/compositions/elements/card/InfoCard.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+/**
+ * `card.info` element composition.
+ *
+ * Wraps the cards/InfoCard composition as an element-tier component.
+ * Renders a read-only summary tile: optional icon/image header, title,
+ * subtitle, and a list of label/value display rows.
+ */
+import { computed } from "vue"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+interface InfoField {
+  label: string
+  value: string
+  icon?: string
+  format?: string
+  prepend?: string
+  append?: string
+}
+
+export interface InfoCardProps {
+  label?: string
+  title?: string
+  subtitle?: string
+  showCard?: boolean
+  icon?: string
+  iconColor?: string
+  headerImage?: string
+  headerRatio?: string
+  lessPadding?: boolean
+  fields?: InfoField[]
+  item?: Record<string, unknown>
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<InfoCardProps>(), {
+  showCard: true,
+  lessPadding: false,
+  fields: () => [],
+  item: () => ({}),
+})
+
+const heading = computed(() => props.title ?? props.label)
+
+/** Resolve a dot-path string against the item object. */
+function resolvePath(path: string, item: Record<string, unknown>): unknown {
+  return path.split(".").reduce<unknown>((acc, key) => {
+    if (acc && typeof acc === "object" && key in (acc as Record<string, unknown>)) {
+      return (acc as Record<string, unknown>)[key]
+    }
+    return undefined
+  }, item)
+}
+
+function formatValue(field: InfoField): string {
+  const raw = resolvePath(field.value, props.item)
+  const str = raw !== undefined && raw !== null ? String(raw) : field.value
+  return `${field.prepend ?? ""}${str}${field.append ?? ""}`
+}
+</script>
+
+<template>
+  <Card v-if="props.showCard !== false" :class="cn(props.classList)">
+    <!-- Header image -->
+    <div
+      v-if="props.headerImage"
+      class="overflow-hidden rounded-t-lg bg-muted"
+      :style="props.headerRatio ? { aspectRatio: props.headerRatio } : { height: '10rem' }"
+    >
+      <img
+        :src="props.headerImage"
+        :alt="heading ?? 'Info card header'"
+        class="h-full w-full object-cover"
+      />
+    </div>
+
+    <CardHeader v-if="heading || props.subtitle || props.icon" :class="props.lessPadding ? 'py-2' : ''">
+      <div class="flex items-center gap-2">
+        <span v-if="props.icon" :class="['lucide text-lg', props.iconColor ?? 'text-muted-foreground']">
+          {{ props.icon }}
+        </span>
+        <div>
+          <CardTitle v-if="heading">{{ heading }}</CardTitle>
+          <CardDescription v-if="props.subtitle">{{ props.subtitle }}</CardDescription>
+        </div>
+      </div>
+    </CardHeader>
+
+    <CardContent :class="props.lessPadding ? 'py-2' : ''">
+      <dl
+        v-if="props.fields.length"
+        class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm"
+      >
+        <template v-for="field in props.fields" :key="field.label + field.value">
+          <dt class="font-medium text-muted-foreground">{{ field.label }}</dt>
+          <dd>{{ formatValue(field) }}</dd>
+        </template>
+      </dl>
+      <p v-else class="text-sm text-muted-foreground">No fields configured.</p>
+    </CardContent>
+  </Card>
+
+  <!-- Chromeless variant -->
+  <div v-else :class="cn(props.classList)">
+    <dl
+      v-if="props.fields.length"
+      class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm"
+    >
+      <template v-for="field in props.fields" :key="field.label + field.value">
+        <dt class="font-medium text-muted-foreground">{{ field.label }}</dt>
+        <dd>{{ formatValue(field) }}</dd>
+      </template>
+    </dl>
+  </div>
+</template>

package/src/components/compositions/elements/card/ListCard.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * `card.list` element composition.
+ *
+ * Renders a vertical stack of nested child elements inside an optional
+ * Card chrome. Acts as the element-tier equivalent of `ElementListCard`
+ * and replaces `configuration-block.elements-block` as the canonical
+ * inline element container.
+ *
+ * In the FormBuilder the canvas resolves `elementList` IDs → objects and
+ * passes them here as `nestedElements`. In static JSON the host can also
+ * supply `nestedElements` directly.
+ */
+import { computed } from "vue"
+import type { CardElement } from "@/definitions/elements"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import ElementRenderer from "@/engine/ElementRenderer.vue"
+import { cn } from "@/lib/utils"
+
+export interface ListCardProps {
+  label?: string
+  title?: string
+  subtitle?: string
+  showCard?: boolean
+  gutterY?: string
+  gutterX?: string
+  /** Resolved child elements passed by the engine / FormBuilder canvas. */
+  nestedElements?: Array<Record<string, unknown>>
+  item?: Record<string, unknown>
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<ListCardProps>(), {
+  showCard: true,
+  gutterY: "1rem",
+  gutterX: "0",
+  nestedElements: () => [],
+  item: () => ({}),
+})
+
+const heading = computed(() => props.title ?? props.label)
+
+const children = computed(() =>
+  (props.nestedElements ?? []).filter(
+    (e): boolean =>
+      typeof e === "object" &&
+      e !== null &&
+      typeof (e as Record<string, unknown>).type === "string",
+  ) as unknown as CardElement[],
+)
+
+const bodyStyle = computed(() => ({
+  rowGap: props.gutterY,
+  columnGap: props.gutterX,
+}))
+</script>
+
+<template>
+  <Card
+    v-if="props.showCard !== false"
+    :class="cn(props.classList)"
+    data-element-list-card
+  >
+    <CardHeader v-if="heading || props.subtitle">
+      <CardTitle v-if="heading">{{ heading }}</CardTitle>
+      <CardDescription v-if="props.subtitle">{{ props.subtitle }}</CardDescription>
+    </CardHeader>
+    <CardContent class="flex flex-col" :style="bodyStyle">
+      <ElementRenderer
+        v-for="child in children"
+        :key="child.id"
+        :element="child"
+        :item="props.item"
+      />
+      <p v-if="!children.length" class="py-3 text-sm text-muted-foreground">
+        No elements configured.
+      </p>
+    </CardContent>
+  </Card>
+
+  <div
+    v-else
+    class="flex flex-col"
+    :class="cn(props.classList)"
+    :style="bodyStyle"
+    data-element-list-card
+  >
+    <ElementRenderer
+      v-for="child in children"
+      :key="child.id"
+      :element="child"
+      :item="props.item"
+    />
+  </div>
+</template>

package/src/components/compositions/elements/card/TabCard.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+/**
+ * `card.tab` element composition.
+ *
+ * Renders a tabbed container. Each tab in `tabs` owns an optional
+ * `nestedElements` array of resolved child elements. In the FormBuilder
+ * each tab's `elementList` IDs are resolved before being forwarded here.
+ */
+import { computed, ref } from "vue"
+import type { CardElement } from "@/definitions/elements"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import ElementRenderer from "@/engine/ElementRenderer.vue"
+import { cn } from "@/lib/utils"
+
+interface TabEntry {
+  id: string
+  label: string
+  nestedElements?: Array<Record<string, unknown>>
+}
+
+export interface TabCardProps {
+  label?: string
+  title?: string
+  showCard?: boolean
+  gutterY?: string
+  gutterX?: string
+  /** Tab definitions including resolved child elements. */
+  tabs?: TabEntry[]
+  activeTab?: number
+  item?: Record<string, unknown>
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<TabCardProps>(), {
+  showCard: true,
+  gutterY: "1rem",
+  gutterX: "0",
+  tabs: () => [],
+  activeTab: 0,
+  item: () => ({}),
+})
+
+const resolvedTabs = computed(() =>
+  (props.tabs ?? []).map((tab) => ({
+    ...tab,
+    children: (tab.nestedElements ?? []).filter(
+      (e): boolean =>
+        typeof e === "object" &&
+        e !== null &&
+        typeof (e as Record<string, unknown>).type === "string",
+    ) as unknown as CardElement[],
+  })),
+)
+
+const activeTabId = computed(
+  () => resolvedTabs.value[props.activeTab ?? 0]?.id ?? resolvedTabs.value[0]?.id ?? "",
+)
+const currentTab = ref(activeTabId.value)
+
+const bodyStyle = computed(() => ({
+  rowGap: props.gutterY,
+  columnGap: props.gutterX,
+}))
+
+const heading = computed(() => props.title ?? props.label)
+</script>
+
+<template>
+  <Card v-if="props.showCard !== false" :class="cn(props.classList)">
+    <CardHeader v-if="heading">
+      <span class="text-base font-semibold">{{ heading }}</span>
+    </CardHeader>
+    <CardContent>
+      <Tabs v-model="currentTab">
+        <TabsList v-if="resolvedTabs.length">
+          <TabsTrigger
+            v-for="tab in resolvedTabs"
+            :key="tab.id"
+            :value="tab.id"
+          >
+            {{ tab.label }}
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent
+          v-for="tab in resolvedTabs"
+          :key="tab.id"
+          :value="tab.id"
+          class="flex flex-col pt-3"
+          :style="bodyStyle"
+        >
+          <ElementRenderer
+            v-for="child in tab.children"
+            :key="child.id"
+            :element="child"
+            :item="props.item"
+          />
+          <p v-if="!tab.children.length" class="py-3 text-sm text-muted-foreground">
+            No elements configured for this tab.
+          </p>
+        </TabsContent>
+      </Tabs>
+      <p v-if="!resolvedTabs.length" class="py-3 text-sm text-muted-foreground">
+        No tabs configured.
+      </p>
+    </CardContent>
+  </Card>
+
+  <div v-else :class="cn(props.classList)">
+    <Tabs v-model="currentTab">
+      <TabsList v-if="resolvedTabs.length">
+        <TabsTrigger
+          v-for="tab in resolvedTabs"
+          :key="tab.id"
+          :value="tab.id"
+        >
+          {{ tab.label }}
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent
+        v-for="tab in resolvedTabs"
+        :key="tab.id"
+        :value="tab.id"
+        class="flex flex-col pt-3"
+        :style="bodyStyle"
+      >
+        <ElementRenderer
+          v-for="child in tab.children"
+          :key="child.id"
+          :element="child"
+          :item="props.item"
+        />
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>