@spavn/ui 0.0.1

package/src/lib/dropdown-menu/DropdownMenu.test.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import DropdownMenu from './DropdownMenu.vue'
+import DropdownMenuTrigger from './DropdownMenuTrigger.vue'
+import DropdownMenuContent from './DropdownMenuContent.vue'
+import DropdownMenuItem from './DropdownMenuItem.vue'
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('DropdownMenu', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(DropdownMenu, {
+      slots: { default: 'Menu content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+})
+
+describe('DropdownMenuTrigger', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(DropdownMenu, {
+      slots: {
+        default: () => h(DropdownMenuTrigger, null, { default: () => 'Open Menu' }),
+      },
+    })
+    expect(wrapper.text()).toContain('Open Menu')
+  })
+
+  it('renders as a button', () => {
+    const wrapper = mount(DropdownMenu, {
+      slots: {
+        default: () => h(DropdownMenuTrigger, null, { default: () => 'Menu' }),
+      },
+    })
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+})
+
+describe('DropdownMenuContent', () => {
+  it('mounts without errors inside DropdownMenu', () => {
+    const wrapper = mount(DropdownMenu, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(DropdownMenuTrigger, null, { default: () => 'Trigger' }),
+          h(DropdownMenuContent, null, { default: () => 'Menu items' }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts sideOffset prop', () => {
+    const wrapper = mount(DropdownMenu, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(DropdownMenuTrigger, null, { default: () => 'Trigger' }),
+          h(DropdownMenuContent, { sideOffset: 8 }, { default: () => 'Content' }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts custom class prop', () => {
+    const wrapper = mount(DropdownMenu, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(DropdownMenuTrigger, null, { default: () => 'Trigger' }),
+          h(DropdownMenuContent, { class: 'custom-menu' }, { default: () => 'Items' }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+})
+
+describe('DropdownMenuItem', () => {
+  it('mounts without errors inside open menu', async () => {
+    // DropdownMenuContent uses a portal. In jsdom, the menu items may not
+    // appear with role="menuitem". We verify the component tree mounts
+    // without throwing.
+    const wrapper = mount(DropdownMenu, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(DropdownMenuTrigger, null, { default: () => 'Trigger' }),
+          h(DropdownMenuContent, null, {
+            default: () => h(DropdownMenuItem, null, { default: () => 'Item 1' }),
+          }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    await nextTick()
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts inset prop without error', async () => {
+    const wrapper = mount(DropdownMenu, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(DropdownMenuTrigger, null, { default: () => 'Trigger' }),
+          h(DropdownMenuContent, null, {
+            default: () => h(DropdownMenuItem, { inset: true }, { default: () => 'Inset Item' }),
+          }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    await nextTick()
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts custom class prop', async () => {
+    const wrapper = mount(DropdownMenu, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(DropdownMenuTrigger, null, { default: () => 'Trigger' }),
+          h(DropdownMenuContent, null, {
+            default: () => h(DropdownMenuItem, { class: 'custom-item' }, { default: () => 'Styled' }),
+          }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    await nextTick()
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+})

package/src/lib/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { DropdownMenuRoot } from 'radix-vue'
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="$attrs">
+    <slot />
+  </DropdownMenuRoot>
+</template>

package/src/lib/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+const emits = defineEmits<{ 'update:checked': [checked: boolean]; 'select': [event: Event] }>()
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+    @update:checked="emits('update:checked', $event)"
+    @select="emits('select', $event)"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-4 w-4"
+        >
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

package/src/lib/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{ class?: string; sideOffset?: number }>(), { sideOffset: 4 })
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="$attrs"
+      :side-offset="props.sideOffset"
+      :class="
+        cn(
+          'z-depth-3 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-depth-3',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

package/src/lib/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { DropdownMenuGroup } from 'radix-vue'
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="$attrs">
+    <slot />
+  </DropdownMenuGroup>
+</template>

package/src/lib/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { DropdownMenuItem } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; inset?: boolean }>()
+const emits = defineEmits<{ 'select': [event: Event] }>()
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        props.class
+      )
+    "
+    @select="emits('select', $event)"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

package/src/lib/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { DropdownMenuLabel } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; inset?: boolean }>()
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="$attrs"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

package/src/lib/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { DropdownMenuRadioGroup } from 'radix-vue'
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="$attrs">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

package/src/lib/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+const emits = defineEmits<{ 'select': [event: Event] }>()
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+    @select="emits('select', $event)"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-2 w-2"
+        >
+          <circle cx="12" cy="12" r="6" fill="currentColor" />
+        </svg>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

package/src/lib/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { DropdownMenuSeparator } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    v-bind="$attrs"
+    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+  />
+</template>

package/src/lib/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>

package/src/lib/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { DropdownMenuSub } from 'radix-vue'
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="$attrs">
+    <slot />
+  </DropdownMenuSub>
+</template>

package/src/lib/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  DropdownMenuSubContent,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="$attrs"
+    :class="
+      cn(
+        'z-depth-3 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-depth-3',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

package/src/lib/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { DropdownMenuSubTrigger } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; inset?: boolean }>()
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="$attrs"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        inset && 'pl-8',
+        props.class
+      )
+    "
+  >
+    <slot />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="ml-auto h-4 w-4"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  </DropdownMenuSubTrigger>
+</template>

package/src/lib/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { DropdownMenuTrigger } from 'radix-vue'
+</script>
+
+<template>
+  <DropdownMenuTrigger v-bind="$attrs">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

package/src/lib/dropdown-menu/index.ts

@@ -0,0 +1,14 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'

package/src/lib/empty/Empty.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col items-center justify-center py-12 text-center', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/empty/EmptyDescription.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <p :class="cn('mt-2 text-sm text-muted-foreground max-w-sm', props.class)">
+    <slot />
+  </p>
+</template>

package/src/lib/empty/EmptyIcon.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+    <slot />
+  </div>
+</template>

package/src/lib/empty/EmptyTitle.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <h3 :class="cn('mt-4 text-lg font-semibold', props.class)">
+    <slot />
+  </h3>
+</template>

package/src/lib/empty/index.ts

@@ -0,0 +1,4 @@
+export { default as Empty } from './Empty.vue'
+export { default as EmptyIcon } from './EmptyIcon.vue'
+export { default as EmptyTitle } from './EmptyTitle.vue'
+export { default as EmptyDescription } from './EmptyDescription.vue'