arvue-ui 0.1.0 → 0.2.0

package/src/dialog/DialogTitle.vue

@@ -3,23 +3,31 @@
 </style>
 
 <template>
-    <Primitive :class="clsx('arvue-dialog-title', props.class)">
+    <DialogTitle
+        :class="clsx('arvue-dialog-title', props.class)"
+        v-bind="delegatedProps"
+    >
         <slot/>
-    </Primitive>
+    </DialogTitle>
 </template>
 
 <script lang="ts">
 import type { DialogTitleProps as RekaDialogTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 
-export interface DialogTitleProps extends RekaDialogTitleProps{
+export interface DialogTitleProps extends RekaDialogTitleProps {
     class?: HTMLAttributes['class']
 }
 </script>
 
 <script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
 import { clsx } from 'clsx'
-import { Primitive } from 'reka-ui'
+import { DialogTitle } from 'reka-ui'
 
-const props = defineProps<DialogTitleProps>()
+const props = withDefaults(defineProps<DialogTitleProps>(), {
+    as: 'h3',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
 </script>

package/src/dialog/dialog-content.css

@@ -3,7 +3,7 @@
     top: 50%;
     left: 50%;
     translate: -50% -50%;
-    z-index: 10;
+    z-index: 1060;
     display: grid;
     width: 100%;
     max-width: calc(100% - 2rem);

package/src/dialog/dialog-description.css

@@ -1,3 +1,4 @@
 .arvue-dialog-description {
     font-size: 0.875rem;
+    margin: 0;
 }

package/src/dialog/dialog-overlay.css

@@ -4,7 +4,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 5;
+    z-index: 1055;
     width: 100%;
     height: 100%;
     box-sizing: border-box;

package/src/dialog/dialog-title.css

@@ -1,5 +1,3 @@
 .arvue-dialog-title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: var(--text-color-stronger);
+    margin: 0;
 }

package/src/drawer/Drawer.vue

@@ -0,0 +1,27 @@
+<template>
+    <DialogRoot
+        v-slot="slotProps"
+        v-bind="forwarded"
+    >
+        <slot v-bind="slotProps"/>
+    </DialogRoot>
+</template>
+
+<script lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DrawerProps extends DialogRootProps {
+    class?: HTMLAttributes['class']
+}
+export interface DrawerEmits extends DialogRootEmits {}
+</script>
+
+<script setup lang="ts">
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DrawerProps>()
+const emits = defineEmits<DrawerEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/drawer/DrawerClose.vue

@@ -0,0 +1,19 @@
+<template>
+    <DialogClose v-bind="props">
+        <slot/>
+    </DialogClose>
+</template>
+
+<script lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+
+export interface DrawerCloseProps extends DialogCloseProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogClose } from 'reka-ui'
+
+const props = withDefaults(defineProps<DrawerCloseProps>(), {
+    as: 'a',
+})
+</script>

package/src/drawer/DrawerContent.vue

@@ -0,0 +1,99 @@
+<style>
+@import './drawer-content.css';
+</style>
+
+<template>
+    <DialogPortal>
+        <AnimatePresence as="div">
+            <DrawerOverlay as-child>
+                <Motion
+                    :initial="{ opacity: 0 }"
+                    :animate="{ opacity: 1 }"
+                    :exit="{ opacity: 0 }"
+                    :transition="{
+                        duration: .3,
+                        ease: 'easeInOut',
+                    }"
+                />
+            </DrawerOverlay>
+            <DialogContent
+                :class="clsx(
+                    'arvue-drawer-content',
+                    side === 'top' && 'top',
+                    side === 'right' && 'right',
+                    side === 'bottom' && 'bottom',
+                    side === 'left' && 'left',
+                    props.class,
+                )"
+                v-bind="{ ...$attrs, ...forwarded }"
+                as-child
+            >
+                <Motion
+                    v-bind="motionProps"
+                    :transition="{
+                        duration: .3,
+                        ease: 'easeIn',
+                    }"
+                >
+                    <slot/>
+                    <DrawerClose
+                        v-if="showCloseButton"
+                        class="arvue-drawer-close-button icon"
+                    >
+                        <i class="fas fa-times"/>
+                    </DrawerClose>
+                </Motion>
+            </DialogContent>
+        </AnimatePresence>
+    </DialogPortal>
+</template>
+
+<script lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DrawerContentEmits extends DialogContentEmits {
+}
+
+export interface DrawerContentProps extends DialogContentProps {
+    class?: HTMLAttributes['class']
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    showCloseButton?: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AnimatePresence, Motion } from 'motion-v'
+import {
+    DialogContent,
+    DialogPortal,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { DrawerClose, DrawerOverlay } from '.'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DrawerContentProps>(), {
+    side: 'right',
+    showCloseButton: true,
+})
+const emits = defineEmits<DrawerContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'side')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const sideMotion = {
+    top: { initial: { y: '-100%' }, animate: { y: 0 }, exit: { y: '-100%' } },
+    bottom: { initial: { y: '100%' }, animate: { y: 0 }, exit: { y: '100%' } },
+    left: { initial: { x: '-100%' }, animate: { x: 0 }, exit: { x: '-100%' } },
+    right: { initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' } },
+} satisfies Record<NonNullable<DrawerContentProps['side']>, object>
+
+const motionProps = computed(() => sideMotion[props.side])
+</script>

package/src/drawer/DrawerDescription.vue

@@ -0,0 +1,33 @@
+<style>
+@import "./drawer-description.css";
+</style>
+
+<template>
+    <DialogDescription
+        :class="clsx('arvue-drawer-description', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot/>
+    </DialogDescription>
+</template>
+
+<script lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DrawerDescriptionProps extends DialogDescriptionProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { DialogDescription } from 'reka-ui'
+
+const props = withDefaults(defineProps<DrawerDescriptionProps>(), {
+    as: 'p',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/drawer/DrawerFooter.vue

@@ -0,0 +1,31 @@
+<style>
+@import "./drawer-footer.css";
+</style>
+
+<template>
+    <Primitive
+        :class="clsx('arvue-drawer-footer', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot/>
+    </Primitive>
+</template>
+
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DrawerFooterProps extends PrimitiveProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<DrawerFooterProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/drawer/DrawerHeader.vue

@@ -0,0 +1,31 @@
+<style>
+@import "./drawer-header.css";
+</style>
+
+<template>
+    <Primitive
+        :class="clsx('arvue-drawer-header', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot/>
+    </Primitive>
+</template>
+
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DrawerHeaderProps extends PrimitiveProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<DrawerHeaderProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/drawer/DrawerOverlay.vue

@@ -0,0 +1,31 @@
+<style>
+@import './drawer-overlay.css';
+</style>
+
+<template>
+    <DialogOverlay
+        v-bind="delegatedProps"
+        :class="clsx('arvue-drawer-overlay', props.class)"
+    >
+        <slot/>
+    </DialogOverlay>
+</template>
+
+<script lang="ts">
+import type { DialogOverlayProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DrawerOverlayProps extends DialogOverlayProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { DialogOverlay } from 'reka-ui'
+
+const props = defineProps<DrawerOverlayProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/drawer/DrawerTitle.vue

@@ -0,0 +1,33 @@
+<style>
+@import "./drawer-title.css";
+</style>
+
+<template>
+    <DialogTitle
+        :class="clsx('arvue-drawer-title', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot/>
+    </DialogTitle>
+</template>
+
+<script lang="ts">
+import type { DialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DrawerTitleProps extends DialogTitleProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { DialogTitle } from 'reka-ui'
+
+const props = withDefaults(defineProps<DrawerTitleProps>(), {
+    as: 'h3',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/drawer/DrawerTrigger.vue

@@ -0,0 +1,17 @@
+<template>
+    <DialogTrigger v-bind="props">
+        <slot/>
+    </DialogTrigger>
+</template>
+
+<script lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+
+export interface DrawerTriggerProps extends DialogTriggerProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DrawerTriggerProps>()
+</script>

package/src/drawer/drawer-content.css

@@ -0,0 +1,68 @@
+.arvue-drawer-content {
+    position: fixed;
+    z-index: 1045;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    box-shadow: 0 0 70px var(--drawer-shadow-color);
+    background: var(--background-color-blank);
+    box-sizing: border-box;
+}
+
+.arvue-drawer-content.right {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 75%;
+}
+
+.arvue-drawer-content.left {
+    top: 0;
+    right: auto;
+    bottom: 0;
+    width: 75%;
+}
+
+.arvue-drawer-content.top {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: auto;
+    width: auto;
+    height: auto;
+}
+
+.arvue-drawer-content.bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    width: auto;
+    height: auto;
+}
+
+@media (min-width: 760px) {
+    .arvue-drawer-content.right, .arvue-drawer-content.left {
+        width: 600px;
+    }
+}
+
+.arvue-drawer-content .arvue-drawer-close-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    border-radius: 0.125rem;
+    opacity: 0.7;
+    transition: opacity var(--timing-fast) ease-in-out;
+    width: 1rem;
+    height: 1rem;
+    color: inherit;
+}
+
+.arvue-drawer-content .arvue-drawer-close-button:hover {
+    opacity: 1;
+}
+
+.arvue-drawer-content .arvue-drawer-close-button:disabled {
+    pointer-events: none;
+}

package/src/drawer/drawer-description.css

@@ -0,0 +1,4 @@
+.arvue-drawer-description {
+    font-size: 0.875rem;
+    margin: 0;
+}

package/src/drawer/drawer-footer.css

@@ -0,0 +1,11 @@
+.arvue-drawer-footer {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+}
+
+.arvue-drawer-footer button {
+    margin-right: 0;
+}

package/src/drawer/drawer-header.css

@@ -0,0 +1,6 @@
+.arvue-drawer-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 1rem;
+}

package/src/drawer/drawer-overlay.css

@@ -0,0 +1,12 @@
+.arvue-drawer-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background: var(--drawer-background-color);
+}

package/src/drawer/drawer-title.css

@@ -0,0 +1,3 @@
+.arvue-drawer-title {
+    margin: 0;
+}

package/src/drawer/index.ts

@@ -0,0 +1,38 @@
+export {
+    default as Drawer,
+    type DrawerEmits,
+    type DrawerProps,
+} from './Drawer.vue'
+export {
+    default as DrawerClose,
+    type DrawerCloseProps,
+} from './DrawerClose.vue'
+export {
+    default as DrawerContent,
+    type DrawerContentEmits,
+    type DrawerContentProps,
+} from './DrawerContent.vue'
+export {
+    default as DrawerDescription,
+    type DrawerDescriptionProps,
+} from './DrawerDescription.vue'
+export {
+    default as DrawerFooter,
+    type DrawerFooterProps,
+} from './DrawerFooter.vue'
+export {
+    default as DrawerHeader,
+    type DrawerHeaderProps,
+} from './DrawerHeader.vue'
+export {
+    default as DrawerOverlay,
+    type DrawerOverlayProps,
+} from './DrawerOverlay.vue'
+export {
+    default as DrawerTitle,
+    type DrawerTitleProps,
+} from './DrawerTitle.vue'
+export {
+    default as DrawerTrigger,
+    type DrawerTriggerProps,
+} from './DrawerTrigger.vue'

package/src/index.ts

@@ -1 +1,2 @@
 export * from './dialog'
+export * from './drawer'