@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/cards/TabListCard.test.ts

@@ -0,0 +1,101 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+import { createPinia, setActivePinia } from "pinia"
+import { nextTick } from "vue"
+import type { DisplayCard } from "@/definitions/cards"
+import TabListCard from "./TabListCard.vue"
+import { preloadCard } from "@/engine/useCardLoader"
+
+function makeChild(id: string, title: string): DisplayCard {
+  return {
+    id,
+    cardType: "element-list",
+    elementList: [],
+    title,
+  } as unknown as DisplayCard
+}
+
+describe("TabListCard", () => {
+  beforeEach(async () => {
+    setActivePinia(createPinia())
+    await preloadCard("element-list")
+  })
+
+  it("mounts without error", () => {
+    const wrapper = mount(TabListCard, { props: {} })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it("renders an empty state when no tabs are passed", () => {
+    const wrapper = mount(TabListCard, { props: {} })
+    expect(wrapper.find("[data-testid='tab-list-empty']").exists()).toBe(true)
+  })
+
+  it("renders one trigger per tab and uses the tab's title as the label", () => {
+    const wrapper = mount(TabListCard, {
+      props: {
+        tabs: [
+          makeChild("t1", "General"),
+          makeChild("t2", "Advanced"),
+        ],
+      },
+    })
+    const triggers = wrapper.findAll('[role="tab"]')
+    expect(triggers).toHaveLength(2)
+    expect(triggers[0].text()).toContain("General")
+    expect(triggers[1].text()).toContain("Advanced")
+  })
+
+  it("defaults to the first tab being active", async () => {
+    const wrapper = mount(TabListCard, {
+      props: {
+        tabs: [
+          makeChild("t1", "General"),
+          makeChild("t2", "Advanced"),
+        ],
+      },
+    })
+    await flushPromises()
+    const active = wrapper.find('[role="tabpanel"][data-state="active"]')
+    expect(active.attributes("data-tab-panel-id")).toBe("t1")
+  })
+
+  it("switches the active panel when another trigger is clicked", async () => {
+    const wrapper = mount(TabListCard, {
+      props: {
+        tabs: [
+          makeChild("t1", "General"),
+          makeChild("t2", "Advanced"),
+        ],
+      },
+    })
+    await flushPromises()
+    const triggers = wrapper.findAll('[role="tab"]')
+    // reka-ui activates on mousedown, not click.
+    await triggers[1].trigger("mousedown", { button: 0 })
+    await nextTick()
+    await nextTick()
+    const active = wrapper.find('[role="tabpanel"][data-state="active"]')
+    expect(active.attributes("data-tab-panel-id")).toBe("t2")
+  })
+
+  it("hides the nav when hideNav is true", () => {
+    const wrapper = mount(TabListCard, {
+      props: {
+        tabs: [makeChild("t1", "Only")],
+        hideNav: true,
+      },
+    })
+    expect(wrapper.findAll('[role="tab"]')).toHaveLength(0)
+  })
+
+  it("falls back to the tab id as the label when the child has no title", () => {
+    const wrapper = mount(TabListCard, {
+      props: {
+        tabs: [makeChild("only-tab", "")],
+      },
+    })
+    const trigger = wrapper.find('[role="tab"]')
+    expect(trigger.text()).toContain("only-tab")
+  })
+})

package/src/components/compositions/cards/TabListCard.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+/**
+ * Props-driven `tab-list` composition — renders the shadcn-vue Tabs
+ * primitive where each panel is a nested DisplayCard rendered via
+ * `CardRenderer`. Each tab is a fully-resolved DisplayCard (not an ID
+ * lookup).
+ *
+ * Self-contained — directly mountable in any Vue app:
+ *
+ *   <TabListCard
+ *     v-model="activeTab"
+ *     :tabs="[generalCard, advancedCard]"
+ *     :item="dataModel"
+ *   />
+ *
+ * The tab label comes from the child card's `title`, falling back to
+ * the card's `id`. The first child is the default active tab.
+ */
+import { computed, ref, watch } from "vue"
+import type { DisplayCard } from "@/definitions/cards"
+import type { TabListCardStyle } from "@/definitions/cards/TabListCard"
+import CardRenderer from "@/engine/CardRenderer.vue"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs"
+
+export interface TabListCardProps {
+  title?: string
+  subtitle?: string
+  showCard?: boolean
+  /** Resolved tab cards (NOT IDs). */
+  tabs?: DisplayCard[]
+  /** Page-level data model passed through to child renderers. */
+  item?: Record<string, unknown>
+  /** Initial active tab id. Falls back to the first tab. */
+  defaultTab?: string
+  /** Vertical or horizontal nav layout. */
+  style?: TabListCardStyle
+  /** Force the nav bar to render above the panel content. */
+  navOnTop?: boolean
+  /** Hide the nav bar entirely (used when an external nav controls the tabs). */
+  hideNav?: boolean
+}
+
+const props = withDefaults(defineProps<TabListCardProps>(), {
+  tabs: () => [],
+  item: () => ({}),
+  style: "default",
+  navOnTop: false,
+  hideNav: false,
+})
+
+const activeTab = defineModel<string>("modelValue")
+
+const tabList = computed<DisplayCard[]>(() => props.tabs ?? [])
+
+const tabIds = computed<string[]>(() => tabList.value.map((t) => t.id))
+
+function labelFor(card: DisplayCard): string {
+  if (card.title) {
+    return card.title
+  }
+  return card.id
+}
+
+const internalActive = ref<string>(
+  activeTab.value ?? props.defaultTab ?? tabIds.value[0] ?? "",
+)
+
+watch(
+  () => activeTab.value,
+  (next) => {
+    if (next !== undefined && next !== internalActive.value) {
+      internalActive.value = next
+    }
+  },
+)
+
+watch(
+  () => tabIds.value,
+  (next) => {
+    if (!next.includes(internalActive.value)) {
+      internalActive.value = next[0] ?? ""
+      if (activeTab.value !== internalActive.value) {
+        activeTab.value = internalActive.value
+      }
+    }
+  },
+)
+
+function onTabChange(value: string | number): void {
+  const id = String(value)
+  internalActive.value = id
+  activeTab.value = id
+}
+
+const navOnTopComputed = computed<boolean>(
+  () => props.style === "horizontal" || props.navOnTop === true,
+)
+
+const wrapperClass = computed(() => [
+  "gxp-tab-list",
+  navOnTopComputed.value ? "flex flex-col gap-3" : "flex flex-row gap-3",
+])
+</script>
+
+<template>
+  <header v-if="title || subtitle" class="mb-3 flex flex-col gap-0.5">
+    <h3 v-if="title" class="text-base font-semibold">{{ title }}</h3>
+    <p v-if="subtitle" class="text-sm text-muted-foreground">
+      {{ subtitle }}
+    </p>
+  </header>
+  <Tabs
+    v-if="tabList.length > 0"
+    :model-value="internalActive"
+    :default-value="defaultTab ?? tabIds[0]"
+    :class="wrapperClass"
+    :orientation="navOnTopComputed ? 'horizontal' : 'vertical'"
+    @update:model-value="onTabChange"
+  >
+    <TabsList
+      v-if="!hideNav"
+      :class="[
+        'inline-flex items-center rounded-md bg-muted p-1',
+        navOnTopComputed ? 'flex-row' : 'flex-col h-auto',
+      ]"
+    >
+      <TabsTrigger
+        v-for="tab in tabList"
+        :key="tab.id"
+        :value="tab.id"
+        :data-tab-id="tab.id"
+        class="rounded-sm px-3 py-1.5 text-sm font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+      >
+        {{ labelFor(tab) }}
+      </TabsTrigger>
+    </TabsList>
+    <div class="flex-1">
+      <TabsContent
+        v-for="tab in tabList"
+        :key="tab.id"
+        :value="tab.id"
+        :data-tab-panel-id="tab.id"
+      >
+        <CardRenderer :card="tab" :item="item" />
+      </TabsContent>
+    </div>
+  </Tabs>
+  <p
+    v-else
+    class="text-sm text-muted-foreground italic"
+    data-testid="tab-list-empty"
+  >
+    No tabs to display.
+  </p>
+</template>

package/src/components/compositions/cards/useDataTableData.ts

@@ -0,0 +1,65 @@
+/**
+ * Source-of-rows composable for `DataTableCard`.
+ *
+ * Resolves the row array from one of three sources, in priority order:
+ *
+ *   1. `searchRoute` — remote fetch. Currently a STUB that logs a debug
+ *      message and returns `[]`. Real HTTP integration (axios) lands in
+ *      a follow-up task.
+ *   2. `listKey` — nested array read off `item[listKey]`.
+ *   3. `listData` — inline static rows on the card.
+ *
+ * Falls back to an empty array when no source is configured.
+ *
+ * Exposed as a composable so tests can intercept the row source
+ * without mocking the network layer.
+ */
+import { computed, type ComputedRef, type Ref } from "vue"
+import type { DataTableOptions } from "@/definitions/cards/DataTableCard"
+
+export interface UseDataTableDataOptions {
+  listKey: Ref<string | undefined> | ComputedRef<string | undefined>
+  listData: Ref<unknown[] | undefined> | ComputedRef<unknown[] | undefined>
+  options: Ref<DataTableOptions | undefined> | ComputedRef<DataTableOptions | undefined>
+  item: Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>
+}
+
+export interface UseDataTableDataReturn {
+  rows: ComputedRef<Record<string, unknown>[]>
+}
+
+export function useDataTableData(
+  opts: UseDataTableDataOptions,
+): UseDataTableDataReturn {
+  const rows = computed<Record<string, unknown>[]>(() => {
+    const i = opts.item.value
+    const o = opts.options.value
+    const listKey = opts.listKey.value
+    const listData = opts.listData.value
+
+    if (o?.searchRoute) {
+      // eslint-disable-next-line no-console
+      console.debug(
+        "[DataTableCard] searchRoute fetch is stubbed; returning empty rows.",
+        o.searchRoute,
+      )
+      return []
+    }
+
+    if (listKey) {
+      const raw = i[listKey]
+      if (Array.isArray(raw)) {
+        return raw as Record<string, unknown>[]
+      }
+      return []
+    }
+
+    if (Array.isArray(listData)) {
+      return listData as Record<string, unknown>[]
+    }
+
+    return []
+  })
+
+  return { rows }
+}

package/src/components/compositions/elements/action/ButtonAction.stories.ts

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import ButtonAction from "./ButtonAction.vue"
+
+const meta = {
+  title: "Compositions/Elements/Action/ButtonAction",
+  component: ButtonAction,
+  tags: ["autodocs"],
+  args: { label: "Action" },
+} satisfies Meta<typeof ButtonAction>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { label: "Action" },
+}
+
+export const Secondary: Story = {
+  args: { label: "Secondary", variant: "secondary" },
+}
+
+export const Destructive: Story = {
+  args: { label: "Delete", variant: "destructive" },
+}
+
+export const Outline: Story = {
+  args: { label: "Outline", variant: "outline" },
+}
+
+export const Ghost: Story = {
+  args: { label: "Ghost", variant: "ghost" },
+}
+
+export const LinkVariant: Story = {
+  args: { label: "Link", variant: "link" },
+}
+
+export const WithIcon: Story = {
+  args: { label: "Save", icon: "save" },
+}
+
+export const Small: Story = {
+  args: { label: "Small", size: "sm" },
+}
+
+export const Large: Story = {
+  args: { label: "Large", size: "lg" },
+}
+
+export const Disabled: Story = {
+  args: { label: "Disabled", disabled: true },
+}
+
+export const FullWidth: Story = {
+  args: { label: "Full width", block: true },
+}
+
+export const AsLink: Story = {
+  args: {
+    label: "Open docs",
+    href: "https://example.com",
+    target: "_blank",
+  },
+}
+
+export const WithConfirm: Story = {
+  args: {
+    label: "Delete",
+    variant: "destructive",
+    confirm: true,
+    confirmMessage: "Are you sure you want to delete this record?",
+    emit: "delete-record",
+  },
+}
+
+export const VariantMatrix: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { ButtonAction },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <ButtonAction label="default" />
+        <ButtonAction label="secondary" variant="secondary" />
+        <ButtonAction label="destructive" variant="destructive" />
+        <ButtonAction label="outline" variant="outline" />
+        <ButtonAction label="ghost" variant="ghost" />
+        <ButtonAction label="link" variant="link" />
+        <ButtonAction label="success" variant="success" />
+        <ButtonAction label="warning" variant="warning" />
+        <ButtonAction label="info" variant="info" />
+      </div>
+    `,
+  }),
+}

package/src/components/compositions/elements/action/ButtonAction.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import ButtonAction from "./ButtonAction.vue"
+
+describe("ButtonAction (props-based composition)", () => {
+  it("mounts and renders the label", () => {
+    const wrapper = mount(ButtonAction, { props: { label: "Save" } })
+    expect(wrapper.find("button").exists()).toBe(true)
+    expect(wrapper.text()).toContain("Save")
+  })
+
+  it("emits a native click event", async () => {
+    const wrapper = mount(ButtonAction, { props: { label: "Click me" } })
+    await wrapper.find("button").trigger("click")
+    const emitted = wrapper.emitted("click")
+    expect(emitted).toBeTruthy()
+    expect(emitted!.length).toBe(1)
+  })
+
+  it("renders as anchor when href is set (and confirm is false)", () => {
+    const wrapper = mount(ButtonAction, {
+      props: { label: "Docs", href: "https://example.com", target: "_blank" },
+    })
+    const a = wrapper.find("a")
+    expect(a.exists()).toBe(true)
+    expect(a.attributes("href")).toBe("https://example.com")
+    expect(a.attributes("target")).toBe("_blank")
+  })
+
+  it("emits a named action event when 'emit' prop is set and no href", async () => {
+    const wrapper = mount(ButtonAction, {
+      props: { label: "Delete", emit: "delete-row" },
+    })
+    await wrapper.find("button").trigger("click")
+    const emitted = wrapper.emitted("action")
+    expect(emitted).toBeTruthy()
+    expect(emitted![0]).toEqual([{ name: "delete-row" }])
+  })
+
+  it("supports the variant matrix", () => {
+    const variants = [
+      "default",
+      "secondary",
+      "destructive",
+      "outline",
+      "ghost",
+      "link",
+    ] as const
+    for (const variant of variants) {
+      const wrapper = mount(ButtonAction, {
+        props: { label: variant, variant },
+      })
+      expect(wrapper.find("button").exists()).toBe(true)
+    }
+  })
+
+  it("supports sm / md / lg sizes", () => {
+    const sizes = ["sm", "md", "lg"] as const
+    for (const size of sizes) {
+      const wrapper = mount(ButtonAction, { props: { label: "X", size } })
+      expect(wrapper.find("button").exists()).toBe(true)
+    }
+  })
+
+  it("respects disabled", () => {
+    const wrapper = mount(ButtonAction, {
+      props: { label: "Off", disabled: true },
+    })
+    expect(
+      (wrapper.find("button").element as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+
+  it("when confirm=true, opens the dialog and does not emit action immediately", async () => {
+    const wrapper = mount(ButtonAction, {
+      props: { label: "Delete", emit: "delete", confirm: true },
+      attachTo: document.body,
+    })
+    await wrapper.find("button").trigger("click")
+    expect(wrapper.emitted("action")).toBeFalsy()
+    wrapper.unmount()
+  })
+
+  it("renders block (full width) when block=true", () => {
+    const wrapper = mount(ButtonAction, {
+      props: { label: "B", block: true },
+    })
+    expect(wrapper.find("button").classes()).toContain("w-full")
+  })
+
+  it("works without any props at all", () => {
+    const wrapper = mount(ButtonAction)
+    expect(wrapper.find("button").exists()).toBe(true)
+  })
+})

package/src/components/compositions/elements/action/ButtonAction.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+/**
+ * Props-driven button composition. Composes the shadcn `Button`
+ * primitive with click / href / emit / confirm behaviour.
+ *
+ * Self-contained — usable directly in any Vue app:
+ *
+ *   <ButtonAction label="Save" variant="default" @click="save" />
+ *   <ButtonAction label="Docs" href="https://example.com" target="_blank" />
+ *   <ButtonAction label="Delete" variant="destructive" confirm @action="onDelete" />
+ *
+ * Action elements do NOT use FieldFrame — they're not form inputs and
+ * don't need label/help/error chrome.
+ */
+import { computed, ref } from "vue"
+import * as LucideIcons from "lucide-vue-next"
+import type { FunctionalComponent } from "vue"
+
+type LucideIcon = FunctionalComponent
+
+import { Button, type ButtonVariants } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+export type ButtonActionVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "ghost"
+  | "link"
+  | "success"
+  | "warning"
+  | "info"
+
+export type ButtonActionSize = "sm" | "md" | "lg"
+
+export interface ButtonActionProps {
+  label?: string
+  variant?: ButtonActionVariant
+  size?: ButtonActionSize
+  /** Lucide icon name rendered before the label. */
+  icon?: string
+  /** Navigation target — renders as an anchor when set and confirm is false. */
+  href?: string
+  target?: "_self" | "_blank" | "_parent" | "_top"
+  /** Custom event name emitted via `action` when clicked. */
+  emit?: string
+  /** Show a confirmation dialog before firing. */
+  confirm?: boolean
+  /** Confirmation message displayed in the dialog. */
+  confirmMessage?: string
+  disabled?: boolean
+  /** Render full width. */
+  block?: boolean
+  /** HTML name attribute. */
+  name?: string
+  /** HTML id attribute. */
+  id?: string
+}
+
+const props = withDefaults(defineProps<ButtonActionProps>(), {
+  variant: "default",
+  size: "md",
+  target: "_self",
+})
+
+const emit = defineEmits<{
+  (e: "click", event: MouseEvent): void
+  (e: "action", payload: { name: string }): void
+}>()
+
+const sizeMap: Record<ButtonActionSize, ButtonVariants["size"]> = {
+  sm: "sm",
+  md: "default",
+  lg: "lg",
+}
+
+const mappedSize = computed<ButtonVariants["size"]>(
+  () => sizeMap[props.size] ?? "default",
+)
+
+const iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>
+function resolveIcon(name: string | undefined): LucideIcon | undefined {
+  if (!name) {
+    return undefined
+  }
+  const pascal = name
+    .split(/[-_\s]/)
+    .filter(Boolean)
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join("")
+  return iconLibrary[pascal] ?? iconLibrary[name]
+}
+const icon = computed(() => resolveIcon(props.icon))
+
+const confirmOpen = ref(false)
+
+function performAction(): void {
+  if (props.href) {
+    if (props.target === "_blank") {
+      window.open(props.href, "_blank")
+    } else {
+      window.location.assign(props.href)
+    }
+    return
+  }
+  if (props.emit) {
+    emit("action", { name: props.emit })
+  }
+}
+
+function onClick(event: MouseEvent): void {
+  emit("click", event)
+  if (props.confirm) {
+    event.preventDefault()
+    confirmOpen.value = true
+    return
+  }
+  if (!props.href && props.emit) {
+    event.preventDefault()
+    performAction()
+    return
+  }
+  if (!props.href && !props.emit) {
+    event.preventDefault()
+  }
+}
+
+function confirmYes(): void {
+  confirmOpen.value = false
+  performAction()
+}
+
+function confirmNo(): void {
+  confirmOpen.value = false
+}
+
+const renderAs = computed<"a" | "button">(() =>
+  props.href && !props.confirm ? "a" : "button",
+)
+</script>
+
+<template>
+  <Button
+    :id="id"
+    :as="renderAs"
+    :variant="variant"
+    :size="mappedSize"
+    :disabled="disabled"
+    :class="block ? 'w-full' : ''"
+    :data-action-name="emit ?? label"
+    :data-element-name="name ?? undefined"
+    :href="renderAs === 'a' ? href : undefined"
+    :target="renderAs === 'a' ? target : undefined"
+    @click="onClick"
+  >
+    <component :is="icon" v-if="icon" class="h-4 w-4" />
+    <span v-if="label">{{ label }}</span>
+  </Button>
+
+  <Dialog v-if="confirm" v-model:open="confirmOpen">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Confirm action</DialogTitle>
+        <DialogDescription>
+          {{ confirmMessage ?? "Are you sure you want to continue?" }}
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <Button variant="outline" type="button" @click="confirmNo">
+          Cancel
+        </Button>
+        <Button variant="default" type="button" @click="confirmYes">
+          Confirm
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>