@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/elements/display/HtmlDisplay.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/**
+ * Props-driven raw HTML display.
+ *
+ * SECURITY: the caller is responsible for trusting the source of
+ * `value`. The wrapping `<div>` provides a styling boundary but does
+ * not sanitise the markup. Pair with a server-side sanitiser when
+ * accepting user input.
+ */
+import { computed } from "vue"
+
+export interface HtmlDisplayProps {
+  value?: string | number | null
+  classList?: string[] | string
+}
+
+const props = defineProps<HtmlDisplayProps>()
+
+const content = computed<string>(() => {
+  if (props.value === undefined || props.value === null) {
+    return ""
+  }
+  return String(props.value)
+})
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+</script>
+
+<template>
+  <div
+    class="gxp-html-display"
+    :class="rootClass"
+    data-testid="html-display"
+    v-html="content"
+  />
+</template>

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import IconDisplay from "./IconDisplay.vue"
+
+const meta = {
+  title: "Compositions/Elements/Display/IconDisplay",
+  component: IconDisplay,
+  tags: ["autodocs"],
+  args: { iconName: "Check", size: 20 },
+  decorators: [
+    () => ({
+      template: '<div class="p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof IconDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { iconName: "Check" },
+}
+
+export const WithCustomContent: Story = {
+  args: { iconName: "Bell" },
+}
+
+export const KebabCaseInput: Story = {
+  args: { iconName: "alert-circle" },
+}
+
+export const Large: Story = {
+  args: { iconName: "Star", size: 48 },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { IconDisplay },
+    setup() {
+      const icons = ["Check", "Bell", "Star", "Heart", "Mail", "User", "Settings"]
+      return { icons }
+    },
+    template: `
+      <div class="flex flex-wrap items-center gap-4">
+        <IconDisplay
+          v-for="name in icons"
+          :key="name"
+          :icon-name="name"
+        />
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest"
+import { mount, flushPromises } from "@vue/test-utils"
+import IconDisplay from "./IconDisplay.vue"
+
+describe("IconDisplay", () => {
+  it("resolves a lucide icon from iconName", async () => {
+    const wrapper = mount(IconDisplay, { props: { iconName: "Check" } })
+    await flushPromises()
+    expect(wrapper.attributes("data-icon-name")).toBe("Check")
+    expect(wrapper.find("svg").exists()).toBe(true)
+  })
+
+  it("renders the fallback when iconName is empty", async () => {
+    const wrapper = mount(IconDisplay, { props: {} })
+    await flushPromises()
+    expect(wrapper.find("[data-testid='icon-display-fallback']").exists()).toBe(true)
+  })
+
+  it("normalises kebab-case input to PascalCase", async () => {
+    const wrapper = mount(IconDisplay, { props: { iconName: "alert-circle" } })
+    await flushPromises()
+    expect(wrapper.attributes("data-icon-name")).toBe("AlertCircle")
+  })
+
+  it("applies the size in pixels", async () => {
+    const wrapper = mount(IconDisplay, {
+      props: { iconName: "Check", size: 32 },
+    })
+    await flushPromises()
+    const svg = wrapper.find("svg")
+    expect(svg.attributes("style") ?? "").toContain("32px")
+  })
+
+  it("applies classList to the root", () => {
+    const wrapper = mount(IconDisplay, {
+      props: { iconName: "Check", classList: ["pulse"] },
+    })
+    expect(wrapper.attributes("class")).toContain("pulse")
+  })
+})

package/src/components/compositions/elements/display/IconDisplay.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * Props-driven icon display.
+ *
+ * Dynamically resolves a lucide icon by its PascalCase name (kebab-case
+ * is normalised). The library is lazy-imported so we only pay for it
+ * when an icon actually renders.
+ */
+import { computed, ref, watch, type Component } from "vue"
+import { X } from "lucide-vue-next"
+
+export interface IconDisplayProps {
+  iconName?: string
+  size?: number
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<IconDisplayProps>(), {
+  size: 20,
+})
+
+function toPascalCase(input: string): string {
+  return input
+    .replace(/[-_\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : ""))
+    .replace(/^(.)/, (m) => m.toUpperCase())
+}
+
+const resolvedIconName = computed<string>(() => {
+  if (!props.iconName) {
+    return ""
+  }
+  return toPascalCase(props.iconName)
+})
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+
+const sizeStyle = computed<Record<string, string>>(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+}))
+
+const ResolvedIcon = ref<Component | null>(null)
+
+async function loadIcon(name: string): Promise<void> {
+  if (!name) {
+    ResolvedIcon.value = null
+    return
+  }
+  const mod = await import("lucide-vue-next")
+  const registry = mod as unknown as Record<string, Component | undefined>
+  ResolvedIcon.value = registry[name] ?? null
+}
+
+watch(
+  resolvedIconName,
+  (next) => {
+    void loadIcon(next)
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center"
+    :class="rootClass"
+    :data-icon-name="resolvedIconName"
+    data-testid="icon-display"
+  >
+    <component
+      :is="ResolvedIcon"
+      v-if="ResolvedIcon"
+      :style="sizeStyle"
+      :aria-label="resolvedIconName"
+    />
+    <X
+      v-else-if="!resolvedIconName"
+      :style="sizeStyle"
+      class="text-muted-foreground"
+      aria-hidden="true"
+      data-testid="icon-display-fallback"
+    />
+  </span>
+</template>

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import IframeDisplay from "./IframeDisplay.vue"
+
+const meta = {
+  title: "Compositions/Elements/Display/IframeDisplay",
+  component: IframeDisplay,
+  tags: ["autodocs"],
+  args: {
+    src: "https://example.com",
+    title: "Example.com",
+  },
+  decorators: [
+    () => ({
+      template: '<div class="max-w-3xl p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof IframeDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { src: "https://example.com", title: "Example.com" },
+}
+
+export const WithCustomContent: Story = {
+  args: { src: "https://www.openstreetmap.org", title: "OpenStreetMap" },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { IframeDisplay },
+    template: `
+      <div class="flex flex-col gap-6">
+        <IframeDisplay src="https://example.com" title="Example" />
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import IframeDisplay from "./IframeDisplay.vue"
+
+describe("IframeDisplay", () => {
+  it("renders an iframe with the given src", () => {
+    const wrapper = mount(IframeDisplay, {
+      props: { src: "https://example.com" },
+    })
+    const iframe = wrapper.find("iframe")
+    expect(iframe.exists()).toBe(true)
+    expect(iframe.attributes("src")).toBe("https://example.com")
+  })
+
+  it("does not render an iframe when src is missing", () => {
+    const wrapper = mount(IframeDisplay, { props: {} })
+    expect(wrapper.find("iframe").exists()).toBe(false)
+  })
+
+  it("applies the default sandbox attribute", () => {
+    const wrapper = mount(IframeDisplay, {
+      props: { src: "https://example.com" },
+    })
+    expect(wrapper.find("iframe").attributes("sandbox")).toBe(
+      "allow-scripts allow-same-origin",
+    )
+  })
+
+  it("allows overriding the sandbox attribute", () => {
+    const wrapper = mount(IframeDisplay, {
+      props: {
+        src: "https://example.com",
+        sandbox: "allow-scripts allow-same-origin allow-forms",
+      },
+    })
+    expect(wrapper.find("iframe").attributes("sandbox")).toBe(
+      "allow-scripts allow-same-origin allow-forms",
+    )
+  })
+
+  it("applies the title attribute", () => {
+    const wrapper = mount(IframeDisplay, {
+      props: { src: "https://example.com", title: "Map" },
+    })
+    expect(wrapper.find("iframe").attributes("title")).toBe("Map")
+  })
+
+  it("applies classList to the root", () => {
+    const wrapper = mount(IframeDisplay, {
+      props: { src: "https://example.com", classList: "extra" },
+    })
+    expect(wrapper.attributes("class")).toContain("extra")
+  })
+})

package/src/components/compositions/elements/display/IframeDisplay.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * Props-driven iframe display.
+ *
+ * Embeds a remote document inside a sandboxed iframe. The wrapper
+ * enforces a 16:9 aspect ratio and responsive width by default.
+ */
+import { computed } from "vue"
+
+export interface IframeDisplayProps {
+  src?: string
+  title?: string
+  sandbox?: string
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<IframeDisplayProps>(), {
+  sandbox: "allow-scripts allow-same-origin",
+})
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+</script>
+
+<template>
+  <div
+    class="relative w-full overflow-hidden rounded-lg border"
+    :class="rootClass"
+    style="aspect-ratio: 16 / 9"
+    data-testid="iframe-display"
+  >
+    <iframe
+      v-if="src"
+      :src="src"
+      :title="title ?? 'Embedded content'"
+      class="absolute inset-0 h-full w-full"
+      :sandbox="sandbox"
+      loading="lazy"
+      referrerpolicy="no-referrer"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import ImageDisplay from "./ImageDisplay.vue"
+
+const meta = {
+  title: "Compositions/Elements/Display/ImageDisplay",
+  component: ImageDisplay,
+  tags: ["autodocs"],
+  args: {
+    src: "https://picsum.photos/seed/gxp/600/400",
+    alt: "Random landscape",
+  },
+  decorators: [
+    () => ({
+      template: '<div class="max-w-md p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof ImageDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    src: "https://picsum.photos/seed/gxp/600/400",
+    alt: "Random landscape",
+  },
+}
+
+export const WithCustomContent: Story = {
+  args: {
+    src: "https://picsum.photos/seed/portrait/400/600",
+    alt: "Portrait orientation",
+  },
+}
+
+export const EmptyPlaceholder: Story = {
+  args: { src: undefined },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { ImageDisplay },
+    template: `
+      <div class="grid grid-cols-2 gap-4">
+        <ImageDisplay src="https://picsum.photos/seed/a/300/200" alt="a" />
+        <ImageDisplay src="https://picsum.photos/seed/b/300/200" alt="b" />
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import ImageDisplay from "./ImageDisplay.vue"
+
+describe("ImageDisplay", () => {
+  it("renders an img with src and alt", () => {
+    const wrapper = mount(ImageDisplay, {
+      props: { src: "https://picsum.photos/100", alt: "A picture" },
+    })
+    const img = wrapper.find("img")
+    expect(img.exists()).toBe(true)
+    expect(img.attributes("src")).toBe("https://picsum.photos/100")
+    expect(img.attributes("alt")).toBe("A picture")
+  })
+
+  it("renders an empty placeholder when src is missing", () => {
+    const wrapper = mount(ImageDisplay, { props: {} })
+    expect(wrapper.find("img").exists()).toBe(false)
+    expect(wrapper.find("[data-testid='image-display-empty']").exists()).toBe(true)
+  })
+
+  it("defaults alt to an empty string", () => {
+    const wrapper = mount(ImageDisplay, {
+      props: { src: "https://picsum.photos/100" },
+    })
+    expect(wrapper.find("img").attributes("alt")).toBe("")
+  })
+
+  it("applies classList (string) to the root", () => {
+    const wrapper = mount(ImageDisplay, {
+      props: { src: "x", classList: "round" },
+    })
+    expect(wrapper.attributes("class")).toContain("round")
+  })
+
+  it("applies classList (array) to the root", () => {
+    const wrapper = mount(ImageDisplay, {
+      props: { src: "x", classList: ["a", "b"] },
+    })
+    expect(wrapper.attributes("class")).toContain("a")
+    expect(wrapper.attributes("class")).toContain("b")
+  })
+})

package/src/components/compositions/elements/display/ImageDisplay.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * Props-driven image display.
+ *
+ * Shows a responsive `<img>` when `src` is set, otherwise renders a
+ * dashed placeholder.
+ */
+import { computed } from "vue"
+import { ImageIcon } from "lucide-vue-next"
+
+export interface ImageDisplayProps {
+  src?: string
+  alt?: string
+  classList?: string[] | string
+}
+
+const props = defineProps<ImageDisplayProps>()
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+</script>
+
+<template>
+  <div
+    class="inline-block"
+    :class="rootClass"
+    data-testid="image-display"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      :alt="alt ?? ''"
+      class="h-auto max-w-full rounded"
+      loading="lazy"
+    >
+    <div
+      v-else
+      class="flex h-32 w-full items-center justify-center rounded border border-dashed bg-muted text-muted-foreground"
+      data-testid="image-display-empty"
+    >
+      <ImageIcon class="size-6" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import MarkdownDisplay from "./MarkdownDisplay.vue"
+
+const meta = {
+  title: "Compositions/Elements/Display/MarkdownDisplay",
+  component: MarkdownDisplay,
+  tags: ["autodocs"],
+  args: {
+    value: "# Hello\n\nThis is **markdown**.",
+  },
+  decorators: [
+    () => ({
+      template: '<div class="max-w-prose p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof MarkdownDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { value: "# Hello\n\nThis is **markdown**." },
+}
+
+export const WithCustomContent: Story = {
+  args: {
+    value:
+      "## Custom\n\n- One\n- Two\n- Three\n\n[Click me](https://example.com)\n\n`inline code` here.",
+  },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { MarkdownDisplay },
+    template: `
+      <div class="flex flex-col gap-6">
+        <MarkdownDisplay value="# Heading 1\\n\\n## Heading 2\\n\\nParagraph text with **bold** and *italic*." />
+        <MarkdownDisplay value="- bullet\\n- another bullet\\n\\n1. one\\n2. two" />
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import MarkdownDisplay from "./MarkdownDisplay.vue"
+
+describe("MarkdownDisplay", () => {
+  it("renders plain content", () => {
+    const wrapper = mount(MarkdownDisplay, { props: { value: "Plain content." } })
+    expect(wrapper.text()).toContain("Plain content.")
+  })
+
+  it("renders empty when value is null", () => {
+    const wrapper = mount(MarkdownDisplay, { props: { value: null } })
+    expect(wrapper.text()).toBe("")
+  })
+
+  it("transforms bold markdown to <strong>", () => {
+    const wrapper = mount(MarkdownDisplay, {
+      props: { value: "Hello **world**" },
+    })
+    expect(wrapper.html()).toContain("<strong>world</strong>")
+  })
+
+  it("transforms headings to heading tags", () => {
+    const wrapper = mount(MarkdownDisplay, { props: { value: "# Title" } })
+    expect(wrapper.find("h1").exists()).toBe(true)
+    expect(wrapper.find("h1").text()).toBe("Title")
+  })
+
+  it("transforms links to anchor tags", () => {
+    const wrapper = mount(MarkdownDisplay, {
+      props: { value: "[example](https://example.com)" },
+    })
+    const anchor = wrapper.find("a")
+    expect(anchor.exists()).toBe(true)
+    expect(anchor.attributes("href")).toBe("https://example.com")
+    expect(anchor.text()).toBe("example")
+  })
+
+  it("escapes HTML in raw content", () => {
+    const wrapper = mount(MarkdownDisplay, {
+      props: { value: "<script>x</script>" },
+    })
+    expect(wrapper.html()).not.toContain("<script>x</script>")
+    expect(wrapper.html()).toContain("&lt;script&gt;")
+  })
+
+  it("applies classList (string) to the root", () => {
+    const wrapper = mount(MarkdownDisplay, {
+      props: { value: "x", classList: "extra-class" },
+    })
+    expect(wrapper.attributes("class")).toContain("extra-class")
+  })
+
+  it("applies classList (array) to the root", () => {
+    const wrapper = mount(MarkdownDisplay, {
+      props: { value: "x", classList: ["a", "b"] },
+    })
+    expect(wrapper.attributes("class")).toContain("a")
+    expect(wrapper.attributes("class")).toContain("b")
+  })
+})