arvue-ui 0.2.0 → 0.3.0

package/src/sheet/SheetDescription.vue

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

package/src/sheet/SheetFooter.vue

@@ -0,0 +1,31 @@
+<style>
+@import "sheet-footer.css";
+</style>
+
+<template>
+    <Primitive
+        :class="clsx('arvue-sheet-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 SheetFooterProps 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<SheetFooterProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/sheet/SheetHeader.vue

@@ -0,0 +1,31 @@
+<style>
+@import "sheet-header.css";
+</style>
+
+<template>
+    <Primitive
+        :class="clsx('arvue-sheet-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 SheetHeaderProps 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<SheetHeaderProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/sheet/SheetOverlay.vue

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

package/src/sheet/SheetTitle.vue

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

package/src/sheet/SheetTrigger.vue

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

package/src/sheet/index.ts

@@ -0,0 +1,38 @@
+export {
+    default as Sheet,
+    type SheetEmits,
+    type SheetProps,
+} from './Sheet.vue'
+export {
+    default as SheetClose,
+    type SheetCloseProps,
+} from './SheetClose.vue'
+export {
+    default as SheetContent,
+    type SheetContentEmits,
+    type SheetContentProps,
+} from './SheetContent.vue'
+export {
+    default as SheetDescription,
+    type SheetDescriptionProps,
+} from './SheetDescription.vue'
+export {
+    default as SheetFooter,
+    type SheetFooterProps,
+} from './SheetFooter.vue'
+export {
+    default as SheetHeader,
+    type SheetHeaderProps,
+} from './SheetHeader.vue'
+export {
+    default as SheetOverlay,
+    type SheetOverlayProps,
+} from './SheetOverlay.vue'
+export {
+    default as SheetTitle,
+    type SheetTitleProps,
+} from './SheetTitle.vue'
+export {
+    default as SheetTrigger,
+    type SheetTriggerProps,
+} from './SheetTrigger.vue'

package/src/sheet/sheet-content.css

@@ -0,0 +1,67 @@
+.arvue-sheet-content {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    box-sizing: border-box;
+    z-index: 1035;
+    height: auto;
+    box-shadow: 0 0 70px var(--drawer-shadow-color);
+    background: var(--background-color-blank);
+}
+
+.arvue-sheet-content[data-vaul-drawer-direction="top"] {
+    left: 0;
+    right: 0;
+    top: 0;
+    margin-bottom: 6rem;
+    max-height: 80vh;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+}
+
+.arvue-sheet-content[data-vaul-drawer-direction="bottom"] {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin-top: 6rem;
+    max-height: 80vh;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+}
+
+.arvue-sheet-content[data-vaul-drawer-direction="right"] {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 75%;
+}
+
+.arvue-sheet-content[data-vaul-drawer-direction="left"] {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 75%;
+}
+
+@media (min-width: 760px) {
+    .arvue-sheet-content[data-vaul-drawer-direction="right"],
+    .arvue-sheet-content[data-vaul-drawer-direction="left"] {
+        max-width: 600px;
+    }
+}
+
+.arvue-sheet-content .arvue-sheet-handle {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 1rem;
+    display: none;
+    height: 0.5rem;
+    width: 100px;
+    flex-shrink: 0;
+    border-radius: 9999px;
+    background-color: var(--light-gray);
+}
+.arvue-sheet-content[data-vaul-drawer-direction="bottom"] .arvue-sheet-handle {
+    display: block;
+}

package/src/sheet/sheet-description.css

@@ -0,0 +1,5 @@
+.arvue-sheet-description {
+    font-size: 0.875rem;
+    margin: 0;
+    font-weight: 600;
+}

package/src/sheet/sheet-footer.css

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

package/src/sheet/sheet-header.css

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

package/src/sheet/sheet-overlay.css

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

package/src/sheet/sheet-title.css

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