combobox dialog components

src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,18 @@
+<script setup>
+    import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+    const props = defineProps({
+        open: { type: Boolean, required: false },
+        defaultOpen: { type: Boolean, required: false },
+        modal: { type: Boolean, required: false }
+    });
+    const emits = defineEmits(['update:open']);
+
+    const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </DialogRoot>
+</template>

src/components/ui/dialog/DialogClose.vue

@@ -0,0 +1,14 @@
+<script setup>
+    import { DialogClose } from 'reka-ui';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <DialogClose data-slot="dialog-close" v-bind="props">
+        <slot />
+    </DialogClose>
+</template>

src/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,58 @@
+<script setup>
+    import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+    import { X } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    import DialogOverlay from './DialogOverlay.vue';
+
+    defineOptions({
+        inheritAttrs: false
+    });
+
+    const props = defineProps({
+        forceMount: { type: Boolean, required: false },
+        disableOutsidePointerEvents: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false },
+        showCloseButton: { type: Boolean, required: false, default: true }
+    });
+    const emits = defineEmits([
+        'escapeKeyDown',
+        'pointerDownOutside',
+        'focusOutside',
+        'interactOutside',
+        'openAutoFocus',
+        'closeAutoFocus'
+    ]);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogContent
+            data-slot="dialog-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    props.class
+                )
+            ">
+            <slot />
+
+            <DialogClose
+                v-if="showCloseButton"
+                data-slot="dialog-close"
+                class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

src/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,24 @@
+<script setup>
+    import { DialogDescription, useForwardProps } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DialogDescription
+        data-slot="dialog-description"
+        v-bind="forwardedProps"
+        :class="cn('text-muted-foreground text-sm', props.class)">
+        <slot />
+    </DialogDescription>
+</template>

src/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,13 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div data-slot="dialog-footer" :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,13 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div data-slot="dialog-header" :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/dialog/DialogOverlay.vue

@@ -0,0 +1,28 @@
+<script setup>
+    import { DialogOverlay } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        forceMount: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <DialogOverlay
+        data-slot="dialog-overlay"
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+                props.class
+            )
+        ">
+        <slot />
+    </DialogOverlay>
+</template>

src/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,62 @@
+<script setup>
+    import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+    import { X } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    defineOptions({
+        inheritAttrs: false
+    });
+
+    const props = defineProps({
+        forceMount: { type: Boolean, required: false },
+        disableOutsidePointerEvents: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits([
+        'escapeKeyDown',
+        'pointerDownOutside',
+        'focusOutside',
+        'interactOutside',
+        'openAutoFocus',
+        'closeAutoFocus'
+    ]);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
+            <DialogContent
+                :class="
+                    cn(
+                        'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+                        props.class
+                    )
+                "
+                v-bind="{ ...$attrs, ...forwarded }"
+                @pointer-down-outside="
+                    (event) => {
+                        const originalEvent = event.detail.originalEvent;
+                        const target = originalEvent.target;
+                        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+                            event.preventDefault();
+                        }
+                    }
+                ">
+                <slot />
+
+                <DialogClose class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary">
+                    <X class="w-4 h-4" />
+                    <span class="sr-only">Close</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogOverlay>
+    </DialogPortal>
+</template>

src/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,24 @@
+<script setup>
+    import { DialogTitle, useForwardProps } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DialogTitle
+        data-slot="dialog-title"
+        v-bind="forwardedProps"
+        :class="cn('text-lg leading-none font-semibold', props.class)">
+        <slot />
+    </DialogTitle>
+</template>

src/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,14 @@
+<script setup>
+    import { DialogTrigger } from 'reka-ui';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <DialogTrigger data-slot="dialog-trigger" v-bind="props">
+        <slot />
+    </DialogTrigger>
+</template>