@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/elements/file/AssetPickerFile.test.ts

@@ -0,0 +1,164 @@
+import { describe, expect, it, vi } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+import AssetPickerFile from "./AssetPickerFile.vue"
+import type { Asset } from "./AssetPickerFile.vue"
+
+const SAMPLE_ASSETS: Asset[] = [
+  { id: "a1", url: "/u/a1.png", name: "Hero.png" },
+  { id: "a2", url: "/u/a2.png", name: "Logo.png" },
+]
+
+describe("AssetPickerFile (props-based composition)", () => {
+  describe("rendering", () => {
+    it("mounts without error", () => {
+      const wrapper = mount(AssetPickerFile, { props: { label: "Asset" } })
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it("renders the label via FieldFrame", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: { label: "Custom label" },
+      })
+      expect(wrapper.text()).toContain("Custom label")
+    })
+
+    it("renders the Browse button when nothing is selected", () => {
+      const wrapper = mount(AssetPickerFile, { props: { label: "X" } })
+      const browse = wrapper.find("[data-testid='asset-picker-browse']")
+      expect(browse.exists()).toBe(true)
+      expect(browse.text()).toContain("Browse")
+    })
+
+    it("renders the selected asset chip with thumbnail and name", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: {
+          label: "X",
+          modelValue: {
+            id: "a1",
+            url: "/u/a1.png",
+            name: "Hero.png",
+            thumbnailUrl: "/u/a1-thumb.png",
+          },
+        },
+      })
+      const chip = wrapper.find("[data-testid='asset-picker-chip']")
+      expect(chip.exists()).toBe(true)
+      expect(chip.text()).toContain("Hero.png")
+      const thumb = wrapper.find("[data-testid='asset-picker-chip-thumb']")
+      expect(thumb.exists()).toBe(true)
+      expect(thumb.attributes("src")).toBe("/u/a1-thumb.png")
+    })
+
+    it("falls back to url when thumbnailUrl is missing", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: {
+          label: "X",
+          modelValue: { id: "a1", url: "/u/a1.png", name: "logo.png" },
+        },
+      })
+      const thumb = wrapper.find("[data-testid='asset-picker-chip-thumb']")
+      expect(thumb.attributes("src")).toBe("/u/a1.png")
+    })
+
+    it("accepts a plain string modelValue", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: { label: "X", modelValue: "hero.png" },
+      })
+      expect(wrapper.text()).toContain("hero.png")
+    })
+
+    it("works without any props at all", () => {
+      const wrapper = mount(AssetPickerFile)
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe("clear selection", () => {
+    it("emits update:modelValue null when the remove button is clicked", async () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: {
+          label: "X",
+          modelValue: { id: "a1", url: "/u/a1.png", name: "hero.png" },
+        },
+      })
+      await wrapper.find("[data-testid='asset-picker-remove']").trigger("click")
+      const emitted = wrapper.emitted("update:modelValue")
+      expect(emitted).toBeTruthy()
+      expect(emitted![emitted!.length - 1]).toEqual([null])
+    })
+  })
+
+  describe("onBrowse / selection", () => {
+    it("calls onBrowse when the Browse button is clicked", async () => {
+      const onBrowse = vi.fn().mockResolvedValue(SAMPLE_ASSETS)
+      const wrapper = mount(AssetPickerFile, {
+        props: { label: "X", onBrowse },
+        attachTo: document.body,
+      })
+      await wrapper.find("[data-testid='asset-picker-browse']").trigger("click")
+      await flushPromises()
+      expect(onBrowse).toHaveBeenCalledTimes(1)
+      wrapper.unmount()
+    })
+
+    it("disables Browse when disabled is true", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: { label: "X", disabled: true },
+      })
+      const browse = wrapper.find("[data-testid='asset-picker-browse']")
+      expect(browse.attributes("disabled")).toBeDefined()
+    })
+  })
+
+  describe("upload flow", () => {
+    it("does not render upload button when onUpload is not provided", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: { label: "X", onBrowse: () => Promise.resolve([]) },
+      })
+      expect(wrapper.find("[data-testid='asset-picker-upload']").exists()).toBe(
+        false,
+      )
+    })
+  })
+
+  describe("state matrix", () => {
+    it("renders help text", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: { label: "X", helpText: "Pick an image" },
+      })
+      expect(wrapper.find("[data-testid='field-frame-help']").text()).toBe(
+        "Pick an image",
+      )
+    })
+
+    it("renders required asterisk", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: { label: "X", required: true },
+      })
+      expect(wrapper.html()).toContain("after:content-['*']")
+    })
+
+    it("renders errors", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: { label: "X", errors: ["Required"] },
+      })
+      expect(wrapper.find("[data-testid='field-frame-errors']").text()).toContain(
+        "Required",
+      )
+    })
+
+    it("hides the label when hideLabel is true", () => {
+      const wrapper = mount(AssetPickerFile, {
+        props: { label: "Hidden", hideLabel: true },
+      })
+      expect(wrapper.find("[data-testid='field-frame-label-sr']").exists()).toBe(
+        true,
+      )
+    })
+  })
+
+  // Dialog content is portalled — interactive selection of an asset card
+  // inside the open Dialog body is asserted in Storybook (interactions
+  // run reliably under playwright). jsdom drops the portal target on
+  // teardown which causes test flake.
+})

package/src/components/compositions/elements/file/AssetPickerFile.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+/**
+ * Props-driven asset-picker composition. The consumer supplies
+ * Promise-returning `onBrowse` (and optional `onUpload`) callbacks; the
+ * composition itself never makes HTTP calls.
+ *
+ *   <AssetPickerFile
+ *     v-model="asset"
+ *     label="Hero image"
+ *     :on-browse="() => api.assets.list()"
+ *     :on-upload="(file) => api.assets.upload(file)"
+ *   />
+ */
+import { computed, ref } from "vue"
+import { ImageIcon, Loader2, Upload, X } from "lucide-vue-next"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { FieldFrame } from "@/components/ui/field-frame"
+import { Input } from "@/components/ui/input"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export interface Asset {
+  id: string
+  url: string
+  name?: string
+  thumbnailUrl?: string
+  mimeType?: string
+  sizeBytes?: number
+}
+
+export type AssetPickerValue = Asset | { id?: string; url?: string; name?: string } | string | null
+
+export interface AssetPickerFileProps {
+  modelValue?: AssetPickerValue
+  id?: string
+  name?: string
+  label?: string
+  hideLabel?: boolean
+  required?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  helpText?: string
+  errors?: string[]
+  /** Required — called when the picker dialog opens. */
+  onBrowse?: () => Promise<Asset[]>
+  /** Optional — when provided, an "Upload new" button appears in the dialog. */
+  onUpload?: (file: File) => Promise<Asset>
+  /** File-input `accept` attribute for the upload flow. */
+  acceptedFileTypes?: string[]
+}
+
+const props = withDefaults(defineProps<AssetPickerFileProps>(), {
+  errors: () => [],
+  acceptedFileTypes: () => [],
+})
+
+const model = defineModel<AssetPickerValue>("modelValue")
+
+const open = ref<boolean>(false)
+const isLoading = ref<boolean>(false)
+const isUploading = ref<boolean>(false)
+const assets = ref<Asset[]>([])
+const filter = ref<string>("")
+const fileInput = ref<HTMLInputElement | null>(null)
+
+let browseToken = 0
+
+const selectedAsset = computed<Asset | null>(() => {
+  const raw = model.value
+  if (!raw) {
+    return null
+  }
+  if (typeof raw === "string") {
+    return { id: raw, url: raw, name: raw }
+  }
+  if (typeof raw === "object") {
+    const obj = raw as { id?: string; url?: string; name?: string; thumbnailUrl?: string }
+    return {
+      id: obj.id ?? "",
+      url: obj.url ?? "",
+      name: obj.name,
+      thumbnailUrl: obj.thumbnailUrl,
+    }
+  }
+  return null
+})
+
+const acceptAttr = computed<string | undefined>(() => {
+  if (!props.acceptedFileTypes?.length) {
+    return undefined
+  }
+  return props.acceptedFileTypes.join(",")
+})
+
+const filteredAssets = computed<Asset[]>(() => {
+  const q = filter.value.trim().toLowerCase()
+  if (!q) {
+    return assets.value
+  }
+  return assets.value.filter((a) =>
+    (a.name ?? a.id).toLowerCase().includes(q),
+  )
+})
+
+async function loadAssets(): Promise<void> {
+  if (!props.onBrowse) {
+    assets.value = []
+    return
+  }
+  const myToken = ++browseToken
+  isLoading.value = true
+  try {
+    const next = await props.onBrowse()
+    if (myToken !== browseToken) {
+      return
+    }
+    assets.value = Array.isArray(next) ? next : []
+  } catch {
+    if (myToken !== browseToken) {
+      return
+    }
+    assets.value = []
+  } finally {
+    if (myToken === browseToken) {
+      isLoading.value = false
+    }
+  }
+}
+
+function onOpenChange(next: boolean): void {
+  open.value = next
+  if (next) {
+    filter.value = ""
+    void loadAssets()
+  }
+}
+
+function selectAsset(asset: Asset): void {
+  model.value = asset
+  open.value = false
+}
+
+function clearAsset(): void {
+  model.value = null
+}
+
+function openUploadPicker(): void {
+  fileInput.value?.click()
+}
+
+async function onUploadChange(event: Event): Promise<void> {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  target.value = ""
+  if (!file || !props.onUpload) {
+    return
+  }
+  isUploading.value = true
+  try {
+    const asset = await props.onUpload(file)
+    if (asset) {
+      model.value = asset
+      open.value = false
+    }
+  } catch {
+    // surface via consumer's error handling — composition stays silent
+  } finally {
+    isUploading.value = false
+  }
+}
+</script>
+
+<template>
+  <FieldFrame
+    :label="label"
+    :required="required"
+    :hide-label="hideLabel"
+    :for="id"
+    :help-text="helpText"
+    :errors="errors"
+  >
+    <div :data-element-name="name ?? undefined" data-testid="asset-picker">
+      <Card v-if="selectedAsset" data-testid="asset-picker-chip">
+        <CardContent class="flex items-center gap-3 py-3">
+          <img
+            v-if="selectedAsset.thumbnailUrl || selectedAsset.url"
+            :src="selectedAsset.thumbnailUrl ?? selectedAsset.url"
+            :alt="selectedAsset.name ?? 'Selected asset'"
+            class="size-10 rounded object-cover"
+            data-testid="asset-picker-chip-thumb"
+          >
+          <ImageIcon v-else class="size-5 text-muted-foreground" />
+          <span class="flex-1 truncate text-sm">
+            {{ selectedAsset.name ?? selectedAsset.id ?? "Selected asset" }}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Remove asset"
+            :disabled="disabled || readonly"
+            data-testid="asset-picker-remove"
+            @click="clearAsset"
+          >
+            <X class="size-4" />
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Dialog :open="open" @update:open="onOpenChange">
+        <DialogTrigger as-child>
+          <Button
+            type="button"
+            variant="outline"
+            :disabled="disabled || readonly"
+            :class="selectedAsset ? 'mt-2' : ''"
+            data-testid="asset-picker-browse"
+          >
+            <ImageIcon class="mr-2 size-4" />
+            {{ selectedAsset ? "Change…" : "Browse…" }}
+          </Button>
+        </DialogTrigger>
+        <DialogContent class="sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Select an asset</DialogTitle>
+          </DialogHeader>
+
+          <div class="flex items-center gap-2">
+            <Input
+              v-model="filter"
+              placeholder="Search assets…"
+              data-testid="asset-picker-search"
+            />
+            <Button
+              v-if="onUpload"
+              type="button"
+              variant="outline"
+              :disabled="isUploading"
+              data-testid="asset-picker-upload"
+              @click="openUploadPicker"
+            >
+              <Loader2
+                v-if="isUploading"
+                class="mr-2 size-4 animate-spin"
+              />
+              <Upload v-else class="mr-2 size-4" />
+              Upload new
+            </Button>
+            <input
+              v-if="onUpload"
+              ref="fileInput"
+              type="file"
+              class="sr-only"
+              :accept="acceptAttr"
+              data-testid="asset-picker-upload-input"
+              @change="onUploadChange"
+            >
+          </div>
+
+          <div
+            v-if="isLoading"
+            class="grid grid-cols-3 gap-3"
+            data-testid="asset-picker-skeleton"
+          >
+            <Skeleton v-for="i in 6" :key="i" class="aspect-square w-full" />
+          </div>
+          <div
+            v-else-if="filteredAssets.length === 0"
+            class="py-8 text-center text-sm text-muted-foreground"
+            data-testid="asset-picker-empty"
+          >
+            No assets available.
+          </div>
+          <div
+            v-else
+            class="grid max-h-96 grid-cols-3 gap-3 overflow-y-auto"
+            data-testid="asset-picker-grid"
+          >
+            <button
+              v-for="asset in filteredAssets"
+              :key="asset.id"
+              type="button"
+              class="flex flex-col items-stretch overflow-hidden rounded-md border bg-card text-left hover:border-primary focus:outline-none focus:ring-2 focus:ring-ring"
+              :data-testid="`asset-picker-item-${asset.id}`"
+              @click="selectAsset(asset)"
+            >
+              <div class="flex aspect-square items-center justify-center bg-muted">
+                <img
+                  v-if="asset.thumbnailUrl || asset.url"
+                  :src="asset.thumbnailUrl ?? asset.url"
+                  :alt="asset.name ?? asset.id"
+                  class="size-full object-cover"
+                >
+                <ImageIcon v-else class="size-8 text-muted-foreground" />
+              </div>
+              <div class="truncate p-2 text-xs">
+                {{ asset.name ?? asset.id }}
+              </div>
+            </button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  </FieldFrame>
+</template>

package/src/components/compositions/elements/file/DropzoneFile.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import DropzoneFile from "./DropzoneFile.vue"
+
+const meta = {
+  title: "Compositions/Elements/File/DropzoneFile",
+  component: DropzoneFile,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      template: '<div class="w-96 p-4"><story /></div>',
+    }),
+  ],
+  args: {
+    label: "Document",
+  },
+} satisfies Meta<typeof DropzoneFile>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { label: "Document" },
+}
+
+export const PdfsOnly: Story = {
+  args: {
+    label: "PDF",
+    accept: "application/pdf",
+    helpText: "PDFs only.",
+  },
+}
+
+export const Multiple: Story = {
+  args: { label: "Documents", multiple: true },
+}
+
+export const WithMaxSize: Story = {
+  args: {
+    label: "Document",
+    maxFileSize: 1024 * 1024,
+    helpText: "Maximum 1 MB.",
+  },
+}
+
+export const Required: Story = {
+  args: { label: "Document", required: true },
+}
+
+export const Disabled: Story = {
+  args: { label: "Document", disabled: true },
+}
+
+export const WithErrors: Story = {
+  args: { label: "Document", errors: ["File is required."] },
+}

package/src/components/compositions/elements/file/DropzoneFile.test.ts

@@ -0,0 +1,126 @@
+import { describe, it, expect } from "vitest"
+import { mount } from "@vue/test-utils"
+import DropzoneFile from "./DropzoneFile.vue"
+
+function makeFile(name: string, size = 1024): File {
+  return new File([new Blob([new Uint8Array(size)])], name, {
+    type: "application/pdf",
+  })
+}
+
+describe("DropzoneFile (props-based composition)", () => {
+  describe("rendering", () => {
+    it("renders the label and dropzone target", () => {
+      const wrapper = mount(DropzoneFile, { props: { label: "Document" } })
+      expect(wrapper.text()).toContain("Document")
+      expect(wrapper.find("[data-testid='dropzone-target']").exists()).toBe(true)
+    })
+
+    it("uses the custom placeholder", () => {
+      const wrapper = mount(DropzoneFile, {
+        props: { label: "X", placeholder: "Drop PDFs here" },
+      })
+      expect(wrapper.text()).toContain("Drop PDFs here")
+    })
+
+    it("hides the visible label when hideLabel is true", () => {
+      const wrapper = mount(DropzoneFile, {
+        props: { label: "Document", hideLabel: true },
+      })
+      expect(wrapper.find("[data-testid='field-frame-label-sr']").exists()).toBe(
+        true,
+      )
+    })
+  })
+
+  describe("drag and drop", () => {
+    it("highlights on dragover and resets on dragleave", async () => {
+      const wrapper = mount(DropzoneFile, { props: { label: "X" } })
+      const target = wrapper.find("[data-testid='dropzone-target']")
+      await target.trigger("dragover")
+      expect(target.attributes("data-drag-over")).toBe("true")
+      await target.trigger("dragleave")
+      expect(target.attributes("data-drag-over")).toBeUndefined()
+    })
+
+    it("accepts dropped files and emits update:modelValue", async () => {
+      const wrapper = mount(DropzoneFile, { props: { label: "X" } })
+      const file = makeFile("a.pdf", 2048)
+      const target = wrapper.find("[data-testid='dropzone-target']")
+      await target.trigger("drop", {
+        dataTransfer: { files: [file] },
+      })
+      expect(wrapper.text()).toContain("a.pdf")
+      const emitted = wrapper.emitted("update:modelValue")
+      expect(emitted).toBeTruthy()
+      expect(emitted![emitted!.length - 1]).toEqual([file])
+    })
+
+    it("ignores drops when disabled", async () => {
+      const wrapper = mount(DropzoneFile, {
+        props: { label: "X", disabled: true },
+      })
+      const file = makeFile("a.pdf")
+      const target = wrapper.find("[data-testid='dropzone-target']")
+      await target.trigger("drop", { dataTransfer: { files: [file] } })
+      expect(wrapper.text()).not.toContain("a.pdf")
+    })
+  })
+
+  describe("click to browse", () => {
+    it("accepts files from the input fallback", async () => {
+      const wrapper = mount(DropzoneFile, { props: { label: "X" } })
+      const inputEl = wrapper.find("[data-testid='dropzone-input']")
+        .element as HTMLInputElement
+      const f = makeFile("hero.pdf")
+      Object.defineProperty(inputEl, "files", { configurable: true, value: [f] })
+      await wrapper.find("[data-testid='dropzone-input']").trigger("change")
+      expect(wrapper.text()).toContain("hero.pdf")
+    })
+
+    it("removes a selected file", async () => {
+      const wrapper = mount(DropzoneFile, { props: { label: "X" } })
+      const inputEl = wrapper.find("[data-testid='dropzone-input']")
+        .element as HTMLInputElement
+      const f = makeFile("hero.pdf")
+      Object.defineProperty(inputEl, "files", { configurable: true, value: [f] })
+      await wrapper.find("[data-testid='dropzone-input']").trigger("change")
+      await wrapper.find("[data-testid='dropzone-remove']").trigger("click")
+      expect(wrapper.text()).not.toContain("hero.pdf")
+    })
+  })
+
+  describe("state matrix", () => {
+    it("renders help text", () => {
+      const wrapper = mount(DropzoneFile, {
+        props: { label: "X", helpText: "PDFs only." },
+      })
+      expect(wrapper.find("[data-testid='field-frame-help']").text()).toBe(
+        "PDFs only.",
+      )
+    })
+
+    it("marks required with an asterisk", () => {
+      const wrapper = mount(DropzoneFile, {
+        props: { label: "X", required: true },
+      })
+      expect(wrapper.html()).toContain("after:content-['*']")
+    })
+  })
+
+  describe("errors", () => {
+    it("renders error messages from props", () => {
+      const wrapper = mount(DropzoneFile, {
+        props: { label: "X", errors: ["Required"] },
+      })
+      expect(wrapper.find("[data-testid='field-frame-errors']").text()).toContain(
+        "Required",
+      )
+    })
+  })
+
+  it("works without any props at all", () => {
+    const wrapper = mount(DropzoneFile)
+    expect(wrapper.exists()).toBe(true)
+  })
+})