@gxp-dev/mod-ui 2.0.0

package/src/components/ui/command/CommandShortcut.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export interface CommandShortcutProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<CommandShortcutProps>()
+</script>
+
+<template>
+  <span
+    :class="
+      cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)
+    "
+  >
+    <slot />
+  </span>
+</template>

package/src/components/ui/command/index.ts

@@ -0,0 +1,31 @@
+import type { Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export { default as Command } from "./Command.vue"
+export { default as CommandDialog } from "./CommandDialog.vue"
+export { default as CommandEmpty } from "./CommandEmpty.vue"
+export { default as CommandGroup } from "./CommandGroup.vue"
+export { default as CommandInput } from "./CommandInput.vue"
+export { default as CommandItem } from "./CommandItem.vue"
+export { default as CommandList } from "./CommandList.vue"
+export { default as CommandSeparator } from "./CommandSeparator.vue"
+export { default as CommandShortcut } from "./CommandShortcut.vue"
+
+export interface CommandFilterState {
+  search: string
+  filtered: {
+    count: number
+    items: Map<string, number>
+    groups: Set<string>
+  }
+}
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: CommandFilterState
+}>("Command")
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>("CommandGroup")

package/src/components/ui/dialog/Dialog.stories.ts

@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { Trash2, UserPlus } from "lucide-vue-next"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "."
+import { Button } from "../button"
+import { Input } from "../input"
+
+const meta = {
+  title: "UI/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: {
+      Dialog,
+      DialogClose,
+      DialogContent,
+      DialogDescription,
+      DialogFooter,
+      DialogHeader,
+      DialogTitle,
+      DialogTrigger,
+      Button,
+    },
+    template: `
+      <Dialog>
+        <DialogTrigger as-child>
+          <Button variant="outline">Edit Profile</Button>
+        </DialogTrigger>
+        <DialogContent class="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit Profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you're done.
+            </DialogDescription>
+          </DialogHeader>
+          <div class="py-4">
+            <p class="text-sm text-muted-foreground">
+              Your profile settings will be updated across all devices.
+            </p>
+          </div>
+          <DialogFooter>
+            <DialogClose as-child>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button>Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    `,
+  }),
+}
+
+export const WithForm: Story = {
+  name: "With Form",
+  render: () => ({
+    components: {
+      Dialog,
+      DialogClose,
+      DialogContent,
+      DialogDescription,
+      DialogFooter,
+      DialogHeader,
+      DialogTitle,
+      DialogTrigger,
+      Button,
+      Input,
+      UserPlus,
+    },
+    template: `
+      <Dialog>
+        <DialogTrigger as-child>
+          <Button><UserPlus /> Create Account</Button>
+        </DialogTrigger>
+        <DialogContent class="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Create Account</DialogTitle>
+            <DialogDescription>
+              Enter your details below to create a new account.
+            </DialogDescription>
+          </DialogHeader>
+          <div class="grid gap-4 py-4">
+            <Input placeholder="John Doe" />
+            <Input type="email" placeholder="john@example.com" />
+            <Input type="password" placeholder="Password" />
+          </div>
+          <DialogFooter>
+            <DialogClose as-child>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Create</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    `,
+  }),
+}
+
+export const Confirmation: Story = {
+  name: "Confirmation Dialog",
+  render: () => ({
+    components: {
+      Dialog,
+      DialogClose,
+      DialogContent,
+      DialogDescription,
+      DialogFooter,
+      DialogHeader,
+      DialogTitle,
+      DialogTrigger,
+      Button,
+      Trash2,
+    },
+    template: `
+      <Dialog>
+        <DialogTrigger as-child>
+          <Button variant="destructive"><Trash2 /> Delete Account</Button>
+        </DialogTrigger>
+        <DialogContent class="sm:max-w-[400px]">
+          <DialogHeader>
+            <DialogTitle>Are you sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your account.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose as-child>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button variant="destructive">Delete</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    `,
+  }),
+}
+
+export const Sizes: Story = {
+  name: "Sizes",
+  render: () => ({
+    components: {
+      Dialog,
+      DialogContent,
+      DialogDescription,
+      DialogHeader,
+      DialogTitle,
+      DialogTrigger,
+      Button,
+    },
+    template: `
+      <div class="flex flex-wrap gap-3">
+        <Dialog>
+          <DialogTrigger as-child><Button variant="outline">Small</Button></DialogTrigger>
+          <DialogContent class="sm:max-w-sm">
+            <DialogHeader>
+              <DialogTitle>Small dialog</DialogTitle>
+              <DialogDescription>Compact layout.</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+        <Dialog>
+          <DialogTrigger as-child><Button variant="outline">Default</Button></DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Default dialog</DialogTitle>
+              <DialogDescription>Standard max-w-lg width.</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+        <Dialog>
+          <DialogTrigger as-child><Button variant="outline">Large</Button></DialogTrigger>
+          <DialogContent class="sm:max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>Large dialog</DialogTitle>
+              <DialogDescription>Wider layout for richer content.</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+        <Dialog>
+          <DialogTrigger as-child><Button variant="outline">Full</Button></DialogTrigger>
+          <DialogContent class="sm:max-w-4xl">
+            <DialogHeader>
+              <DialogTitle>Full dialog</DialogTitle>
+              <DialogDescription>Designed for dashboards.</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      </div>
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  name: "Showcase",
+  render: () => ({
+    components: {
+      Dialog,
+      DialogClose,
+      DialogContent,
+      DialogDescription,
+      DialogFooter,
+      DialogHeader,
+      DialogTitle,
+      DialogTrigger,
+      Button,
+      Input,
+    },
+    template: `
+      <div class="space-y-8">
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Basic</h3>
+          <Dialog>
+            <DialogTrigger as-child><Button variant="outline">Open</Button></DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Hello</DialogTitle>
+                <DialogDescription>A simple dialog.</DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose as-child><Button variant="outline">Close</Button></DialogClose>
+                <Button>Continue</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </section>
+
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Form</h3>
+          <Dialog>
+            <DialogTrigger as-child><Button>Edit</Button></DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Edit profile</DialogTitle>
+                <DialogDescription>Update your info.</DialogDescription>
+              </DialogHeader>
+              <div class="grid gap-3 py-4">
+                <Input default-value="Jane" />
+                <Input default-value="jane@example.com" />
+              </div>
+              <DialogFooter>
+                <DialogClose as-child><Button variant="outline">Cancel</Button></DialogClose>
+                <Button>Save</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </section>
+
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Destructive</h3>
+          <Dialog>
+            <DialogTrigger as-child><Button variant="destructive">Delete</Button></DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Are you sure?</DialogTitle>
+                <DialogDescription>This cannot be undone.</DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose as-child><Button variant="outline">Cancel</Button></DialogClose>
+                <Button variant="destructive">Delete</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </section>
+      </div>
+    `,
+  }),
+}

package/src/components/ui/dialog/Dialog.test.ts

@@ -0,0 +1,354 @@
+import { describe, it, expect } from "vitest"
+import { mount } from "@vue/test-utils"
+import { defineComponent, h, nextTick, ref } from "vue"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogTitle,
+  DialogTrigger,
+} from "."
+
+describe("Dialog", () => {
+  describe("Dialog root", () => {
+    it("renders without errors", () => {
+      const wrapper = mount(Dialog, { slots: { default: "content" } })
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it("renders trigger slot content in the unopened state", () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          default: () =>
+            h(DialogTrigger, { asChild: true }, {
+              default: () => h("button", { class: "trigger-btn" }, "Open"),
+            }),
+        },
+      })
+      expect(wrapper.find(".trigger-btn").exists()).toBe(true)
+      expect(wrapper.find(".trigger-btn").text()).toBe("Open")
+    })
+  })
+
+  describe("DialogHeader", () => {
+    it("renders slot content", () => {
+      const wrapper = mount(DialogHeader, {
+        slots: { default: "Header Content" },
+      })
+      expect(wrapper.text()).toBe("Header Content")
+    })
+
+    it("has correct base classes", () => {
+      const wrapper = mount(DialogHeader)
+      const classes = wrapper.classes()
+      expect(classes).toContain("flex")
+      expect(classes).toContain("flex-col")
+      expect(classes).toContain("gap-y-1.5")
+      expect(classes).toContain("text-center")
+      expect(classes).toContain("sm:text-left")
+    })
+
+    it("renders as a div element", () => {
+      const wrapper = mount(DialogHeader)
+      expect(wrapper.element.tagName).toBe("DIV")
+    })
+
+    it("merges custom class with default classes", () => {
+      const wrapper = mount(DialogHeader, {
+        props: { class: "custom-header" },
+      })
+      expect(wrapper.classes()).toContain("custom-header")
+      expect(wrapper.classes()).toContain("flex")
+    })
+  })
+
+  describe("DialogFooter", () => {
+    it("renders slot content", () => {
+      const wrapper = mount(DialogFooter, {
+        slots: { default: "Footer Content" },
+      })
+      expect(wrapper.text()).toBe("Footer Content")
+    })
+
+    it("has correct base classes", () => {
+      const wrapper = mount(DialogFooter)
+      const classes = wrapper.classes()
+      expect(classes).toContain("flex")
+      expect(classes).toContain("flex-col-reverse")
+      expect(classes).toContain("sm:flex-row")
+      expect(classes).toContain("sm:justify-end")
+      expect(classes).toContain("sm:gap-x-2")
+    })
+
+    it("renders as a div element", () => {
+      const wrapper = mount(DialogFooter)
+      expect(wrapper.element.tagName).toBe("DIV")
+    })
+
+    it("merges custom class with default classes", () => {
+      const wrapper = mount(DialogFooter, {
+        props: { class: "custom-footer" },
+      })
+      expect(wrapper.classes()).toContain("custom-footer")
+      expect(wrapper.classes()).toContain("flex")
+    })
+
+    it("renders multiple slot children", () => {
+      const wrapper = mount(DialogFooter, {
+        slots: { default: "<button>Cancel</button><button>Save</button>" },
+      })
+      expect(wrapper.text()).toContain("Cancel")
+      expect(wrapper.text()).toContain("Save")
+    })
+  })
+
+  describe("Dialog with open content", () => {
+    it("renders DialogContent with portal when defaultOpen is true", async () => {
+      mount(Dialog, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () =>
+            h(DialogContent, null, {
+              default: () => [
+                h(DialogTitle, null, { default: () => "Title" }),
+                h("p", "Body"),
+              ],
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const content = document.body.querySelector("[role=\"dialog\"]")
+      expect(content).toBeTruthy()
+      expect(document.body.textContent).toContain("Title")
+      expect(document.body.textContent).toContain("Body")
+    })
+
+    it("renders DialogTitle with correct classes", async () => {
+      mount(Dialog, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () =>
+            h(DialogContent, null, {
+              default: () =>
+                h(DialogHeader, null, {
+                  default: () =>
+                    h(DialogTitle, null, { default: () => "Test Title" }),
+                }),
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const title = document.body.querySelector("h2")
+      expect(title).toBeTruthy()
+      expect(title?.textContent).toContain("Test Title")
+      expect(title?.className).toContain("font-semibold")
+      expect(title?.className).toContain("leading-none")
+      expect(title?.className).toContain("tracking-tight")
+    })
+
+    it("renders DialogDescription with correct classes", async () => {
+      mount(Dialog, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () =>
+            h(DialogContent, null, {
+              default: () => [
+                h(DialogTitle, null, { default: () => "T" }),
+                h(DialogDescription, null, {
+                  default: () => "Test Description",
+                }),
+              ],
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const description = document.body.querySelector("p")
+      expect(description).toBeTruthy()
+      expect(description?.textContent).toContain("Test Description")
+      expect(description?.className).toContain("text-sm")
+      expect(description?.className).toContain("text-muted-foreground")
+    })
+
+    it("renders the close X button with sr-only label", async () => {
+      mount(Dialog, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () =>
+            h(DialogContent, null, {
+              default: () => h(DialogTitle, null, { default: () => "T" }),
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const srOnly = document.body.querySelector(".sr-only")
+      expect(srOnly).toBeTruthy()
+      expect(srOnly?.textContent).toBe("Close")
+    })
+
+    it("renders the overlay element when open", async () => {
+      mount(Dialog, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () =>
+            h(DialogContent, null, {
+              default: () => h(DialogTitle, null, { default: () => "T" }),
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const overlay = document.body.querySelector("[data-state=\"open\"]")
+      expect(overlay).toBeTruthy()
+    })
+
+    it("does not render content when defaultOpen is false", async () => {
+      mount(Dialog, {
+        slots: {
+          default: () =>
+            h(DialogContent, null, {
+              default: () => h(DialogTitle, null, { default: () => "Hidden" }),
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      expect(document.body.textContent).not.toContain("Hidden")
+    })
+
+    it("closes when DialogClose is clicked (v-model open syncs to false)", async () => {
+      const Harness = defineComponent({
+        components: { Dialog, DialogContent, DialogTitle, DialogClose },
+        setup() {
+          const open = ref(true)
+          return { open }
+        },
+        template: `
+          <Dialog v-model:open="open">
+            <DialogContent>
+              <DialogTitle>ClickClose</DialogTitle>
+              <DialogClose as-child>
+                <button class="close-btn">Close</button>
+              </DialogClose>
+            </DialogContent>
+          </Dialog>
+          <span class="state">{{ open ? 'OPEN' : 'CLOSED' }}</span>
+        `,
+      })
+      const wrapper = mount(Harness, { attachTo: document.body })
+      await nextTick()
+      const btn = document.body.querySelector(".close-btn") as HTMLButtonElement | null
+      expect(btn).toBeTruthy()
+      btn?.click()
+      await nextTick()
+      await nextTick()
+      expect(wrapper.find(".state").text()).toBe("CLOSED")
+    })
+
+    it("merges custom class on DialogContent", async () => {
+      mount(Dialog, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () =>
+            h(DialogContent, { class: "my-dialog-class" }, {
+              default: () => h(DialogTitle, null, { default: () => "Custom" }),
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const content = document.body.querySelector("[role=\"dialog\"]")
+      expect(content?.className).toContain("my-dialog-class")
+    })
+
+    it("renders full dialog structure with header, body, and footer", async () => {
+      mount(Dialog, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () =>
+            h(DialogContent, null, {
+              default: () => [
+                h(DialogHeader, null, {
+                  default: () => [
+                    h(DialogTitle, null, { default: () => "Edit Profile" }),
+                    h(DialogDescription, null, {
+                      default: () => "Make changes here.",
+                    }),
+                  ],
+                }),
+                h("div", { class: "dialog-body" }, "Body content"),
+                h(DialogFooter, null, {
+                  default: () => h("button", "Save changes"),
+                }),
+              ],
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const title = document.body.querySelector("h2")
+      expect(title?.textContent).toContain("Edit Profile")
+      const description = document.body.querySelector("p")
+      expect(description?.textContent).toContain("Make changes here.")
+      expect(document.body.querySelector(".dialog-body")?.textContent).toBe(
+        "Body content",
+      )
+      const footer = document.body.querySelector("[class*=\"flex-col-reverse\"]")
+      expect(footer?.textContent).toContain("Save changes")
+    })
+  })
+
+  describe("DialogClose", () => {
+    it("renders close child inside open dialog", async () => {
+      mount(Dialog, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () =>
+            h(DialogContent, null, {
+              default: () => [
+                h(DialogTitle, null, { default: () => "T" }),
+                h(DialogClose, { asChild: true }, {
+                  default: () =>
+                    h("button", { class: "close-btn" }, "Close Me"),
+                }),
+              ],
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const btn = document.body.querySelector(".close-btn")
+      expect(btn).toBeTruthy()
+      expect(btn?.textContent).toBe("Close Me")
+    })
+  })
+
+  describe("DialogOverlay", () => {
+    it("renders the overlay inside open dialog", async () => {
+      mount(Dialog, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () =>
+            h(DialogContent, null, {
+              default: () => h(DialogTitle, null, { default: () => "O" }),
+            }),
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const overlay = document.body.querySelector("[class*=\"bg-black/80\"]")
+      expect(overlay).toBeTruthy()
+    })
+
+    it("exports the DialogOverlay component for standalone use", () => {
+      expect(DialogOverlay).toBeTruthy()
+    })
+  })
+})

package/src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+export type DialogProps = DialogRootProps
+
+const props = defineProps<DialogProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>