arvue-ui 0.5.0 → 0.7.0

package/src/combobox/ComboboxContent.vue

@@ -3,15 +3,37 @@
 </style>
 
 <template>
-    <ComboboxContent
-        v-bind="{ ...$attrs, ...forwarded }"
-        :class="clsx('arvue-combobox-content', props.class)"
-        position="popper"
-    >
-        <ComboboxViewport>
-            <slot/>
-        </ComboboxViewport>
-    </ComboboxContent>
+    <AnimatePresence>
+        <ComboboxContent
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="clsx('arvue-combobox-content', props.class)"
+            position="popper"
+            as-child
+        >
+            <Motion
+                :initial="{
+                    y: '-5px',
+                    opacity: 0,
+                }"
+                :animate="{
+                    y: 0,
+                    opacity: 1,
+                }"
+                :exit="{
+                    y: '-5px',
+                    opacity: 0,
+                }"
+                :transition="{
+                    duration: .15,
+                    ease: 'easeInOut',
+                }"
+            >
+                <ComboboxViewport>
+                    <slot/>
+                </ComboboxViewport>
+            </Motion>
+        </ComboboxContent>
+    </AnimatePresence>
 </template>
 
 <script lang="ts">
@@ -30,6 +52,7 @@ export interface ComboboxContentEmits extends RekaComboboxContentEmits {}
 <script setup lang="ts">
 import { reactiveOmit } from '@vueuse/core'
 import { clsx } from 'clsx'
+import { AnimatePresence, Motion } from 'motion-v'
 import { ComboboxContent, useForwardPropsEmits } from 'reka-ui'
 import { ComboboxViewport } from '.'
 
@@ -37,7 +60,12 @@ defineOptions({
     inheritAttrs: false,
 })
 
-const props = defineProps<ComboboxContentProps>()
+const props = withDefaults(
+    defineProps<ComboboxContentProps>(),
+    {
+        sideOffset: 8,
+    },
+)
 const emits = defineEmits<ComboboxContentEmits>()
 
 const delegatedProps = reactiveOmit(props, 'class')

package/src/combobox/ComboboxItem.vue

@@ -25,11 +25,14 @@ export interface ComboboxItemEmits extends RekaComboboxItemEmits {}
 </script>
 
 <script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
 import { clsx } from 'clsx'
 import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<ComboboxItemProps>()
 const emits = defineEmits<ComboboxItemEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

package/src/combobox/combobox-content.css

@@ -1,11 +1,10 @@
 .arvue-combobox-content {
-    width: var(--reka-popper-anchor-width);
+    width: var(--reka-combobox-trigger-width);
     background: var(--background-color-blank);
     box-shadow: 0 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.1);
-    margin-top: .5em;
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.5em;
-}
-
-.arvue-combobox div[data-reka-popper-content-wrapper] {
-    z-index: 110 !important;
+    max-height: var(--reka-combobox-content-available-height);
+    transform-origin: var(--reka-combobox-content-transform-origin);
+    z-index: 110;
 }

package/src/combobox/combobox-label.css

@@ -1,6 +1,7 @@
 .arvue-combobox-label {
-    padding: .25em .75em;
+    color: var(--text-color-hint-strong);
+    padding: 0.5rem 1rem;
     font-size: .75em;
-    line-height: 1.2em;
-    font-weight: 600;
+    line-height: 1rem;
+    font-weight: bold;
 }

package/src/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,24 @@
+<template>
+    <DropdownMenuRoot
+        v-slot="slotProps"
+        v-bind="forwarded"
+    >
+        <slot v-bind="slotProps"/>
+    </DropdownMenuRoot>
+</template>
+
+<script lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+
+export interface DropdownMenuProps extends DropdownMenuRootProps {}
+export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
+</script>
+
+<script setup lang="ts">
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuProps>()
+const emits = defineEmits<DropdownMenuEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,47 @@
+<style>
+@import './dropdown-menu-checkbox-item.css';
+</style>
+
+<template>
+    <DropdownMenuCheckboxItem
+        v-bind="forwarded"
+        :class="clsx('arvue-dropdown-menu-checkbox-item', props.class)"
+    >
+        <span class="arvue-dropdown-menu-checkbox-item-indicator-wrapper">
+            <DropdownMenuItemIndicator>
+                <i class="fas fa-check"/>
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot/>
+    </DropdownMenuCheckboxItem>
+</template>
+
+<script lang="ts">
+import type {
+    DropdownMenuCheckboxItemEmits as RekaDropdownMenuCheckboxItemEmits,
+    DropdownMenuCheckboxItemProps as RekaDropdownMenuCheckboxItemProps,
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DropdownMenuCheckboxItemProps extends RekaDropdownMenuCheckboxItemProps {
+    class?: HTMLAttributes['class']
+}
+export interface DropdownMenuCheckboxItemEmits extends RekaDropdownMenuCheckboxItemEmits {}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import {
+    DropdownMenuCheckboxItem,
+    DropdownMenuItemIndicator,
+    useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<DropdownMenuCheckboxItemProps>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,75 @@
+<style>
+@import './dropdown-menu-content.css';
+</style>
+
+<template>
+    <AnimatePresence>
+        <DropdownMenuContent
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="clsx('arvue-dropdown-menu-content', props.class)"
+            as-child
+        >
+            <Motion
+                :initial="{
+                    y: '-5px',
+                    opacity: 0,
+                }"
+                :animate="{
+                    y: 0,
+                    opacity: 1,
+                }"
+                :exit="{
+                    y: '-5px',
+                    opacity: 0,
+                }"
+                :transition="{
+                    duration: .15,
+                    ease: 'easeInOut',
+                }"
+            >
+                <slot/>
+            </Motion>
+        </DropdownMenuContent>
+    </AnimatePresence>
+</template>
+
+<script lang="ts">
+import type {
+    DropdownMenuContentEmits as RekaDropdownMenuContentEmits,
+    DropdownMenuContentProps as RekaDropdownMenuContentProps,
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DropdownMenuContentProps extends RekaDropdownMenuContentProps {
+    class?: HTMLAttributes['class']
+}
+
+export interface DropdownMenuContentEmits extends RekaDropdownMenuContentEmits {
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AnimatePresence, Motion } from 'motion-v'
+import {
+    DropdownMenuContent,
+    useForwardPropsEmits,
+} from 'reka-ui'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(
+    defineProps<DropdownMenuContentProps>(),
+    {
+        sideOffset: 8,
+    },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/dropdown-menu/DropdownMenuGroup.vue

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

package/src/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,38 @@
+<style>
+@import './dropdown-menu-item.css';
+</style>
+
+<template>
+    <DropdownMenuItem
+        v-bind="forwardedProps"
+        :class="clsx(
+            'arvue-dropdown-menu-item',
+            inset && 'arvue-dropdown-menu-item-inset',
+            props.class,
+        )"
+    >
+        <slot/>
+    </DropdownMenuItem>
+</template>
+
+<script lang="ts">
+import type { DropdownMenuItemProps as RekaDropdownMenuItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DropdownMenuItemProps extends RekaDropdownMenuItemProps {
+    class?: HTMLAttributes['class']
+    inset?: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { DropdownMenuItem, useForwardProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuItemProps>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,37 @@
+<style>
+@import './dropdown-menu-label.css';
+</style>
+
+<template>
+    <DropdownMenuLabel
+        v-bind="forwardedProps"
+        :class="clsx(
+            'arvue-dropdown-menu-label',
+            inset && 'arvue-dropdown-menu-label-inset',
+            props.class,
+        )"
+    >
+        <slot/>
+    </DropdownMenuLabel>
+</template>
+
+<script lang="ts">
+import type { DropdownMenuLabelProps as RekaDropdownMenuLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DropdownMenuLabelProps extends RekaDropdownMenuLabelProps {
+    class?: HTMLAttributes['class']
+    inset?: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuLabelProps>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/dropdown-menu/DropdownMenuPortal.vue

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

package/src/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,27 @@
+<template>
+    <DropdownMenuRadioGroup v-bind="forwarded">
+        <slot/>
+    </DropdownMenuRadioGroup>
+</template>
+
+<script lang="ts">
+import type {
+    DropdownMenuRadioGroupEmits as RekaDropdownMenuRadioGroupEmits,
+    DropdownMenuRadioGroupProps as RekaDropdownMenuRadioGroupProps,
+} from 'reka-ui'
+
+export interface DropdownMenuRadioGroupProps extends RekaDropdownMenuRadioGroupProps {}
+export interface DropdownMenuRadioGroupEmits extends RekaDropdownMenuRadioGroupEmits {}
+</script>
+
+<script setup lang="ts">
+import {
+    DropdownMenuRadioGroup,
+    useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,48 @@
+<style>
+@import './dropdown-menu-radio-item.css';
+</style>
+
+<template>
+    <DropdownMenuRadioItem
+        v-bind="forwarded"
+        :class="clsx('arvue-dropdown-menu-radio-item', props.class)"
+    >
+        <span class="arvue-dropdown-menu-radio-item-indicator-wrapper">
+            <DropdownMenuItemIndicator>
+                <i class="fas fa-circle"/>
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot/>
+    </DropdownMenuRadioItem>
+</template>
+
+<script lang="ts">
+import type {
+    DropdownMenuRadioItemEmits as RekaDropdownMenuRadioItemEmits,
+    DropdownMenuRadioItemProps as RekaDropdownMenuRadioItemProps,
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DropdownMenuRadioItemProps extends RekaDropdownMenuRadioItemProps {
+    class?: HTMLAttributes['class']
+}
+export interface DropdownMenuRadioItemEmits extends RekaDropdownMenuRadioItemEmits {}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import {
+    DropdownMenuItemIndicator,
+    DropdownMenuRadioItem,
+    useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<DropdownMenuRadioItemProps>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,29 @@
+<style>
+@import './dropdown-menu-separator.css';
+</style>
+
+<template>
+    <DropdownMenuSeparator
+        v-bind="delegatedProps"
+        :class="clsx('arvue-dropdown-menu-separator', props.class)"
+    />
+</template>
+
+<script lang="ts">
+import type { DropdownMenuSeparatorProps as RekaDropdownMenuSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DropdownMenuSeparatorProps extends RekaDropdownMenuSeparatorProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { DropdownMenuSeparator } from 'reka-ui'
+
+const props = defineProps<DropdownMenuSeparatorProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,33 @@
+<style>
+@import './dropdown-menu-shortcut.css';
+</style>
+
+<template>
+    <Primitive
+        :class="clsx('arvue-dropdown-menu-shortcut', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot/>
+    </Primitive>
+</template>
+
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DropdownMenuShortcutProps 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 = withDefaults(defineProps<DropdownMenuShortcutProps>(), {
+    as: 'span',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,31 @@
+<template>
+    <DropdownMenuSub
+        v-slot="slotProps"
+        v-bind="forwarded"
+    >
+        <slot v-bind="slotProps"/>
+    </DropdownMenuSub>
+</template>
+
+<script lang="ts">
+import type {
+    DropdownMenuSubEmits as RekaDropdownMenuSubEmits,
+    DropdownMenuSubProps as RekaDropdownMenuSubProps,
+} from 'reka-ui'
+
+export interface DropdownMenuSubProps extends RekaDropdownMenuSubProps {}
+
+export interface DropdownMenuSubEmits extends RekaDropdownMenuSubEmits {}
+</script>
+
+<script setup lang="ts">
+import {
+    DropdownMenuSub,
+    useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,74 @@
+<style>
+@import './dropdown-menu-sub-content.css';
+</style>
+
+<template>
+    <AnimatePresence>
+        <DropdownMenuSubContent
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="clsx('arvue-dropdown-menu-sub-content', props.class)"
+            as-child
+        >
+            <Motion
+                :initial="{
+                    y: '-5px',
+                    opacity: 0,
+                }"
+                :animate="{
+                    y: 0,
+                    opacity: 1,
+                }"
+                :exit="{
+                    y: '-5px',
+                    opacity: 0,
+                }"
+                :transition="{
+                    duration: .15,
+                    ease: 'easeInOut',
+                }"
+            >
+                <slot/>
+            </Motion>
+        </DropdownMenuSubContent>
+    </AnimatePresence>
+</template>
+
+<script lang="ts">
+import type {
+    DropdownMenuSubContentEmits as RekaDropdownMenuSubContentEmits,
+    DropdownMenuSubContentProps as RekaDropdownMenuSubContentProps,
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DropdownMenuSubContentProps extends RekaDropdownMenuSubContentProps {
+    class?: HTMLAttributes['class']
+}
+
+export interface DropdownMenuSubContentEmits extends RekaDropdownMenuSubContentEmits {}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AnimatePresence, Motion } from 'motion-v'
+import {
+    DropdownMenuSubContent,
+    useForwardPropsEmits,
+} from 'reka-ui'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(
+    defineProps<DropdownMenuSubContentProps>(),
+    {
+        sideOffset: 8,
+    },
+)
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,41 @@
+<style>
+@import './dropdown-menu-sub-trigger.css';
+</style>
+
+<template>
+    <DropdownMenuSubTrigger
+        v-bind="forwardedProps"
+        :class="clsx(
+            'arvue-dropdown-menu-sub-trigger',
+            inset && 'arvue-dropdown-menu-sub-trigger-inset',
+            props.class,
+        )"
+    >
+        <slot/>
+        <i class="fas fa-chevron-right arvue-dropdown-menu-sub-trigger-icon"/>
+    </DropdownMenuSubTrigger>
+</template>
+
+<script lang="ts">
+import type { DropdownMenuSubTriggerProps as RekaDropdownMenuSubTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DropdownMenuSubTriggerProps extends RekaDropdownMenuSubTriggerProps {
+    class?: HTMLAttributes['class']
+    inset?: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import {
+    DropdownMenuSubTrigger,
+    useForwardProps,
+} from 'reka-ui'
+
+const props = defineProps<DropdownMenuSubTriggerProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>