arvue-ui 0.4.0 → 0.6.0

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>

package/src/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,19 @@
+<template>
+    <DropdownMenuTrigger v-bind="forwardedProps">
+        <slot/>
+    </DropdownMenuTrigger>
+</template>
+
+<script lang="ts">
+import type { DropdownMenuTriggerProps as RekaDropdownMenuTriggerProps } from 'reka-ui'
+
+export interface DropdownMenuTriggerProps extends RekaDropdownMenuTriggerProps {}
+</script>
+
+<script setup lang="ts">
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>

package/src/dropdown-menu/dropdown-menu-checkbox-item.css

@@ -0,0 +1,33 @@
+.arvue-dropdown-menu-checkbox-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+    color: var(--menu-link-color);
+    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
+    cursor: pointer;
+}
+
+.arvue-dropdown-menu-checkbox-item:focus, .arvue-dropdown-menu-checkbox-item:hover{
+    background: var(--menu-background-color-hover);
+    color: var(--menu-link-color-hover);
+}
+
+.arvue-dropdown-menu-checkbox-item[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.arvue-dropdown-menu-checkbox-item .arvue-dropdown-menu-checkbox-item-indicator-wrapper {
+    pointer-events: none;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.75rem;
+    display: flex;
+    position: absolute;
+    left: .5rem;
+}

package/src/dropdown-menu/dropdown-menu-content.css

@@ -0,0 +1,9 @@
+.arvue-dropdown-menu-content {
+    background: var(--background-color-blank);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.5rem; box-shadow: 0 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.1);
+    z-index: 110;
+    max-height: var(--reka-dropdown-menu-content-available-height);
+    transform-origin: var(--reka-dropdown-menu-content-transform-origin);
+    overflow: auto;
+}

package/src/dropdown-menu/dropdown-menu-item.css

@@ -0,0 +1,27 @@
+.arvue-dropdown-menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+    color: var(--menu-link-color);
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+}
+
+.arvue-dropdown-menu-item:focus, .arvue-dropdown-menu-item:hover {
+    background: var(--menu-background-color-hover);
+    color: var(--menu-link-color-hover);
+}
+
+.arvue-dropdown-menu-item[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.arvue-dropdown-menu-item.arvue-dropdown-menu-item-inset {
+    padding-left: 1.5rem;
+}

package/src/dropdown-menu/dropdown-menu-label.css

@@ -0,0 +1,10 @@
+.arvue-dropdown-menu-label {
+    padding: .25em .75em;
+    font-size: .75em;
+    font-weight: 600;
+}
+
+.arvue-dropdown-menu-label.arvue-dropdown-menu-label-inset {
+    padding-left: 1.25rem;
+}
+

package/src/dropdown-menu/dropdown-menu-radio-item.css

@@ -0,0 +1,33 @@
+.arvue-dropdown-menu-radio-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+    color: var(--menu-link-color);
+    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
+    cursor: pointer;
+}
+
+.arvue-dropdown-menu-radio-item:focus, .arvue-dropdown-menu-radio-item:hover{
+    background: var(--menu-background-color-hover);
+    color: var(--menu-link-color-hover);
+}
+
+.arvue-dropdown-menu-radio-item[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.arvue-dropdown-menu-radio-item .arvue-dropdown-menu-radio-item-indicator-wrapper {
+    pointer-events: none;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.75rem;
+    display: flex;
+    position: absolute;
+    left: .5rem;
+}

package/src/dropdown-menu/dropdown-menu-separator.css

@@ -0,0 +1,5 @@
+.arvue-dropdown-menu-separator {
+    height: 1px;
+    background-color: var(--border-color-hr);
+    margin: 5px;
+}

package/src/dropdown-menu/dropdown-menu-shortcut.css

@@ -0,0 +1,7 @@
+.arvue-dropdown-menu-shortcut {
+    color: var(--text-color-hint-strong);
+    margin-left: auto;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.1em;
+}

package/src/dropdown-menu/dropdown-menu-sub-content.css

@@ -0,0 +1,8 @@
+.arvue-dropdown-menu-sub-content {
+    background: var(--background-color-blank);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.5rem; box-shadow: 0 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.1);
+    z-index: 110;
+    transform-origin: var(--reka-dropdown-menu-content-transform-origin);
+    overflow: auto;
+}

package/src/dropdown-menu/dropdown-menu-sub-trigger.css

@@ -0,0 +1,33 @@
+.arvue-dropdown-menu-sub-trigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+    color: var(--menu-link-color);
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+}
+
+.arvue-dropdown-menu-sub-trigger:focus, .arvue-dropdown-menu-sub-trigger[data-state="open"] {
+    background: var(--menu-background-color-hover);
+    color: var(--menu-link-color-hover);
+}
+
+.arvue-dropdown-menu-sub-trigger[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.arvue-dropdown-menu-sub-trigger .arvue-dropdown-menu-sub-trigger-icon {
+    margin-left: auto;
+    width: 1rem;
+    height: 1rem
+}
+
+.arvue-dropdown-menu-sub-trigger.arvue-dropdown-menu-sub-trigger-inset {
+    padding-left: 1.5rem;
+}

package/src/dropdown-menu/index.ts

@@ -0,0 +1,66 @@
+export {
+    default as DropdownMenu,
+    type DropdownMenuEmits,
+    type DropdownMenuProps,
+} from './DropdownMenu.vue'
+export {
+    default as DropdownMenuCheckboxItem,
+    type DropdownMenuCheckboxItemEmits,
+    type DropdownMenuCheckboxItemProps,
+} from './DropdownMenuCheckboxItem.vue'
+export {
+    default as DropdownMenuContent,
+    type DropdownMenuContentEmits,
+    type DropdownMenuContentProps,
+} from './DropdownMenuContent.vue'
+export {
+    default as DropdownMenuGroup,
+    type DropdownMenuGroupProps,
+} from './DropdownMenuGroup.vue'
+export {
+    default as DropdownMenuItem,
+    type DropdownMenuItemProps,
+} from './DropdownMenuItem.vue'
+export {
+    default as DropdownMenuLabel,
+    type DropdownMenuLabelProps,
+} from './DropdownMenuLabel.vue'
+export {
+    default as DropdownMenuPortal,
+    type DropdownMenuPortalProps,
+} from './DropdownMenuPortal.vue'
+export {
+    default as DropdownMenuRadioGroup,
+    type DropdownMenuRadioGroupEmits,
+    type DropdownMenuRadioGroupProps,
+} from './DropdownMenuRadioGroup.vue'
+export {
+    default as DropdownMenuRadioItem,
+    type DropdownMenuRadioItemEmits,
+    type DropdownMenuRadioItemProps,
+} from './DropdownMenuRadioItem.vue'
+export {
+    default as DropdownMenuSeparator,
+    type DropdownMenuSeparatorProps,
+} from './DropdownMenuSeparator.vue'
+export {
+    default as DropdownMenuShortcut,
+    type DropdownMenuShortcutProps,
+} from './DropdownMenuShortcut.vue'
+export {
+    default as DropdownMenuSub,
+    type DropdownMenuSubProps,
+} from './DropdownMenuSub.vue'
+export {
+    default as DropdownMenuSubContent,
+    type DropdownMenuSubContentEmits,
+    type DropdownMenuSubContentProps,
+} from './DropdownMenuSubContent.vue'
+export {
+    default as DropdownMenuSubTrigger,
+    type DropdownMenuSubTriggerProps,
+} from './DropdownMenuSubTrigger.vue'
+export {
+    default as DropdownMenuTrigger,
+    type DropdownMenuTriggerProps,
+} from './DropdownMenuTrigger.vue'

package/src/index.ts

@@ -2,4 +2,6 @@ export * from './autocomplete'
 export * from './combobox'
 export * from './dialog'
 export * from './drawer'
+export * from './dropdown-menu'
 export * from './sheet'
+export * from './sonner'

package/src/sheet/SheetContent.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'sheet-content.css';
+@import './sheet-content.css';
 </style>
 
 <template>

package/src/sheet/SheetDescription.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-description.css";
+@import './sheet-description.css';
 </style>
 
 <template>

package/src/sheet/SheetFooter.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-footer.css";
+@import './sheet-footer.css';
 </style>
 
 <template>

package/src/sheet/SheetHeader.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-header.css";
+@import './sheet-header.css';
 </style>
 
 <template>

package/src/sheet/SheetOverlay.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'sheet-overlay.css';
+@import './sheet-overlay.css';
 </style>
 
 <template>

package/src/sheet/SheetTitle.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-title.css";
+@import './sheet-title.css';
 </style>
 
 <template>