arvue-ui 0.7.0 → 0.9.0

package/src/context-menu/ContextMenuRadioItem.vue

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

package/src/context-menu/ContextMenuSeparator.vue

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

package/src/context-menu/ContextMenuShortcut.vue

@@ -0,0 +1,33 @@
+<style>
+@import './context-menu-shortcut.css';
+</style>
+
+<template>
+    <Primitive
+        :class="clsx('arvue-context-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 ContextMenuShortcutProps 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<ContextMenuShortcutProps>(), {
+    as: 'span',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/context-menu/ContextMenuSub.vue

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

package/src/context-menu/ContextMenuSubContent.vue

@@ -0,0 +1,74 @@
+<style>
+@import './context-menu-sub-content.css';
+</style>
+
+<template>
+    <AnimatePresence>
+        <ContextMenuSubContent
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="clsx('arvue-context-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>
+        </ContextMenuSubContent>
+    </AnimatePresence>
+</template>
+
+<script lang="ts">
+import type {
+    ContextMenuSubContentEmits as RekaContextMenuSubContentEmits,
+    ContextMenuSubContentProps as RekaContextMenuSubContentProps,
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface ContextMenuSubContentProps extends RekaContextMenuSubContentProps {
+    class?: HTMLAttributes['class']
+}
+
+export interface ContextMenuSubContentEmits extends RekaContextMenuSubContentEmits {}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AnimatePresence, Motion } from 'motion-v'
+import {
+    ContextMenuSubContent,
+    useForwardPropsEmits,
+} from 'reka-ui'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(
+    defineProps<ContextMenuSubContentProps>(),
+    {
+        sideOffset: 8,
+    },
+)
+const emits = defineEmits<ContextMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/context-menu/ContextMenuSubTrigger.vue

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

package/src/context-menu/ContextMenuTrigger.vue

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

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

@@ -0,0 +1,33 @@
+.arvue-context-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-context-menu-checkbox-item:focus, .arvue-context-menu-checkbox-item:hover{
+    background: var(--menu-background-color-hover);
+    color: var(--menu-link-color-hover);
+}
+
+.arvue-context-menu-checkbox-item[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.arvue-context-menu-checkbox-item .arvue-context-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/context-menu/context-menu-content.css

@@ -0,0 +1,9 @@
+.arvue-context-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-context-menu-content-available-height);
+    transform-origin: var(--reka-context-menu-content-transform-origin);
+    overflow: auto;
+}

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

@@ -0,0 +1,27 @@
+.arvue-context-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-context-menu-item:focus, .arvue-context-menu-item:hover {
+    background: var(--menu-background-color-hover);
+    color: var(--menu-link-color-hover);
+}
+
+.arvue-context-menu-item[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.arvue-context-menu-item.arvue-context-menu-item-inset {
+    padding-left: 1.5rem;
+}

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

@@ -0,0 +1,12 @@
+.arvue-context-menu-label {
+    color: var(--text-color-hint-strong);
+    padding: 0.5rem 0.75rem;
+    font-size: .75em;
+    line-height: 1rem;
+    font-weight: bold;
+}
+
+.arvue-context-menu-label.arvue-context-menu-label-inset {
+    padding-left: 1.5rem;
+}
+

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

@@ -0,0 +1,33 @@
+.arvue-context-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-context-menu-radio-item:focus, .arvue-context-menu-radio-item:hover{
+    background: var(--menu-background-color-hover);
+    color: var(--menu-link-color-hover);
+}
+
+.arvue-context-menu-radio-item[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.arvue-context-menu-radio-item .arvue-context-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/context-menu/context-menu-separator.css

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

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

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

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

@@ -0,0 +1,8 @@
+.arvue-context-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-context-menu-content-transform-origin);
+    overflow: auto;
+}

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

@@ -0,0 +1,33 @@
+.arvue-context-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-context-menu-sub-trigger:focus, .arvue-context-menu-sub-trigger[data-state="open"] {
+    background: var(--menu-background-color-hover);
+    color: var(--menu-link-color-hover);
+}
+
+.arvue-context-menu-sub-trigger[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.arvue-context-menu-sub-trigger .arvue-context-menu-sub-trigger-icon {
+    margin-left: auto;
+    width: 1rem;
+    height: 1rem
+}
+
+.arvue-context-menu-sub-trigger.arvue-context-menu-sub-trigger-inset {
+    padding-left: 1.5rem;
+}

package/src/context-menu/index.ts

@@ -0,0 +1,68 @@
+export {
+    default as ContextMenu,
+    type ContextMenuEmits,
+    type ContextMenuProps,
+} from './ContextMenu.vue'
+export {
+    default as ContextMenuCheckboxItem,
+    type ContextMenuCheckboxItemEmits,
+    type ContextMenuCheckboxItemProps,
+} from './ContextMenuCheckboxItem.vue'
+export {
+    default as ContextMenuContent,
+    type ContextMenuContentEmits,
+    type ContextMenuContentProps,
+} from './ContextMenuContent.vue'
+export {
+    default as ContextMenuGroup,
+    type ContextMenuGroupProps,
+} from './ContextMenuGroup.vue'
+export {
+    default as ContextMenuItem,
+    type ContextMenuItemEmits,
+    type ContextMenuItemProps,
+} from './ContextMenuItem.vue'
+export {
+    default as ContextMenuLabel,
+    type ContextMenuLabelProps,
+} from './ContextMenuLabel.vue'
+export {
+    default as ContextMenuPortal,
+    type ContextMenuPortalProps,
+} from './ContextMenuPortal.vue'
+export {
+    default as ContextMenuRadioGroup,
+    type ContextMenuRadioGroupEmits,
+    type ContextMenuRadioGroupProps,
+} from './ContextMenuRadioGroup.vue'
+export {
+    default as ContextMenuRadioItem,
+    type ContextMenuRadioItemEmits,
+    type ContextMenuRadioItemProps,
+} from './ContextMenuRadioItem.vue'
+export {
+    default as ContextMenuSeparator,
+    type ContextMenuSeparatorProps,
+} from './ContextMenuSeparator.vue'
+export {
+    default as ContextMenuShortcut,
+    type ContextMenuShortcutProps,
+} from './ContextMenuShortcut.vue'
+export {
+    default as ContextMenuSub,
+    type ContextMenuSubEmits,
+    type ContextMenuSubProps,
+} from './ContextMenuSub.vue'
+export {
+    default as ContextMenuSubContent,
+    type ContextMenuSubContentEmits,
+    type ContextMenuSubContentProps,
+} from './ContextMenuSubContent.vue'
+export {
+    default as ContextMenuSubTrigger,
+    type ContextMenuSubTriggerProps,
+} from './ContextMenuSubTrigger.vue'
+export {
+    default as ContextMenuTrigger,
+    type ContextMenuTriggerProps,
+} from './ContextMenuTrigger.vue'

package/src/index.ts

@@ -1,6 +1,8 @@
+export * from './accordion'
 export * from './aspect-ratio'
 export * from './autocomplete'
 export * from './combobox'
+export * from './context-menu'
 export * from './dialog'
 export * from './drawer'
 export * from './dropdown-menu'

package/src/select/SelectContent.vue

@@ -68,6 +68,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<SelectContentProps>(), {
     sideOffset: 8,
+    collisionPadding: 0,
 })
 const emits = defineEmits<SelectContentEmits>()