init

Initial mock up of the app

src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { DropdownMenuRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  dir: { type: String, required: false },
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>

src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,38 @@
+<script setup>
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useEmitAsProps,
+} from "radix-vue";
+import { CheckIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  checked: { type: [Boolean, String], required: false },
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const emits = defineEmits(["select", "update:checked"]);
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :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
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <CheckIcon class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,56 @@
+<script setup>
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false, default: 4 },
+  align: { type: null, required: false },
+  alignOffset: { type: Number, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "dismiss",
+  "entryFocus",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      :class="[
+        cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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
+        ),
+      ]"
+      v-bind="forwarded"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

src/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { DropdownMenuGroup } from "radix-vue";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>

src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { DropdownMenuItem } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  inset: { type: Boolean, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="props"
+    :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
+      ),
+    ]"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { DropdownMenuLabel } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  inset: { type: Boolean, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="props"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)
+    "
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { DropdownMenuRadioGroup } from "radix-vue";
+
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    v-bind="props"
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,39 @@
+<script setup>
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useEmitAsProps,
+} from "radix-vue";
+import { DotFilledIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  value: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+
+const emits = defineEmits(["select"]);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :class="
+      cn(
+        'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <DotFilledIcon class="h-4 w-4 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { DropdownMenuSeparator } from "radix-vue";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-muted" />
+</template>

src/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+</script>
+
+<template>
+  <span
+    :class="
+      cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')
+    "
+  >
+    <slot />
+  </span>
+</template>

src/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { DropdownMenuSub, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>

src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { DropdownMenuSubContent, useForwardPropsEmits } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  disableOutsideScroll: { type: Boolean, required: false },
+  trapFocus: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false },
+  align: { type: null, required: false },
+  alignOffset: { type: Number, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "dismiss",
+  "entryFocus",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',
+        $attrs.class ?? ''
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { DropdownMenuSubTrigger } from "radix-vue";
+import { ChevronRightIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="props"
+    :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',
+        props.class
+      ),
+    ]"
+  >
+    <slot />
+    <ChevronRightIcon class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>

src/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { DropdownMenuTrigger } from "radix-vue";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="props">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

src/components/ui/dropdown-menu/index.js

@@ -0,0 +1,16 @@
+export { DropdownMenuPortal } from "radix-vue";
+
+export { default as DropdownMenu } from "./DropdownMenu.vue";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.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 DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";