arvue-ui 0.5.0 → 0.7.0

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,12 @@
+.arvue-dropdown-menu-label {
+    color: var(--text-color-hint-strong);
+    padding: 0.5rem 0.75rem;
+    font-size: .75em;
+    line-height: 1rem;
+    font-weight: bold;
+}
+
+.arvue-dropdown-menu-label.arvue-dropdown-menu-label-inset {
+    padding-left: 1.5rem;
+}
+

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

@@ -1,6 +1,9 @@
+export * from './aspect-ratio'
 export * from './autocomplete'
 export * from './combobox'
 export * from './dialog'
 export * from './drawer'
+export * from './dropdown-menu'
+export * from './select'
 export * from './sheet'
 export * from './sonner'

package/src/select/Select.vue

@@ -0,0 +1,27 @@
+<template>
+    <SelectRoot
+        v-slot="slotProps"
+        v-bind="forwarded"
+    >
+        <SelectRootPatch>
+            <slot v-bind="slotProps"/>
+        </SelectRootPatch>
+    </SelectRoot>
+</template>
+
+<script lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+
+export interface SelectProps extends SelectRootProps {}
+export interface SelectEmits extends SelectRootEmits {}
+</script>
+
+<script setup lang="ts">
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+import SelectRootPatch from './SelectRootPatch.vue'
+
+const props = defineProps<SelectProps>()
+const emits = defineEmits<SelectEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/select/SelectContent.vue

@@ -0,0 +1,77 @@
+<style>
+@import './select-content.css';
+</style>
+
+<template>
+    <AnimatePresence>
+        <SelectContent
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="clsx('arvue-select-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',
+                }"
+            >
+                <SelectScrollUpButton/>
+                <SelectViewport class="arvue-select-content-viewport">
+                    <slot/>
+                </SelectViewport>
+                <SelectScrollDownButton/>
+            </Motion>
+        </SelectContent>
+    </AnimatePresence>
+</template>
+
+<script lang="ts">
+import type {
+    SelectContentEmits as RekaSelectContentEmits,
+    SelectContentProps as RekaSelectContentProps,
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface SelectContentProps extends Omit<RekaSelectContentProps, 'position'> {
+    class?: HTMLAttributes['class']
+}
+export interface SelectContentEmits extends RekaSelectContentEmits {}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AnimatePresence, Motion } from 'motion-v'
+import {
+    SelectContent,
+    SelectViewport,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SelectContentProps>(), {
+    sideOffset: 8,
+})
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/select/SelectGroup.vue

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

package/src/select/SelectItem.vue

@@ -0,0 +1,46 @@
+<style>
+@import './select-item.css';
+</style>
+
+<template>
+    <SelectItem
+        v-bind="forwardedProps"
+        :class="clsx('arvue-select-item', props.class)"
+    >
+        <span class="arvue-select-item-indicator-wrapper">
+            <SelectItemIndicator>
+                <i class="fas fa-check"/>
+            </SelectItemIndicator>
+        </span>
+
+        <SelectItemText>
+            <slot/>
+        </SelectItemText>
+    </SelectItem>
+</template>
+
+<script lang="ts">
+import type { SelectItemProps as RekaSelectItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface SelectItemProps extends RekaSelectItemProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import {
+    SelectItem,
+    SelectItemIndicator,
+    SelectItemText,
+    useForwardProps,
+} from 'reka-ui'
+
+const props = defineProps<SelectItemProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/select/SelectItemText.vue

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

package/src/select/SelectLabel.vue

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

package/src/select/SelectRootPatch.vue

@@ -0,0 +1,24 @@
+<!-- Фиксит мерцание SelectValue при закрытии  -->
+<!-- TODO удалить после фикса https://github.com/unovue/reka-ui/issues/2160 -->
+<template>
+    <slot/>
+</template>
+
+<script setup lang="ts">
+import { injectSelectRootContext } from 'reka-ui'
+import { onBeforeUnmount } from 'vue'
+
+const ctx = injectSelectRootContext()
+const original = ctx.onOptionRemove
+
+ctx.onOptionRemove = (option) => {
+    if (!ctx.open.value) {
+        return
+    }
+    original(option)
+}
+
+onBeforeUnmount(() => {
+    ctx.onOptionRemove = original
+})
+</script>

package/src/select/SelectScrollDownButton.vue

@@ -0,0 +1,33 @@
+<style>
+@import './select-scroll-button.css';
+</style>
+
+<template>
+    <SelectScrollDownButton
+        v-bind="forwardedProps"
+        :class="clsx('arvue-select-scroll-button', props.class)"
+    >
+        <i class="fas fa-chevron-down"/>
+    </SelectScrollDownButton>
+</template>
+
+<script lang="ts">
+import type { SelectScrollDownButtonProps as RekaSelectScrollDownButtonProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface SelectScrollDownButtonProps extends RekaSelectScrollDownButtonProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
+
+const props = defineProps<SelectScrollDownButtonProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/select/SelectScrollUpButton.vue

@@ -0,0 +1,33 @@
+<style>
+@import './select-scroll-button.css';
+</style>
+
+<template>
+    <SelectScrollUpButton
+        v-bind="forwardedProps"
+        :class="clsx('arvue-select-scroll-button', props.class)"
+    >
+        <i class="fas fa-chevron-up"/>
+    </SelectScrollUpButton>
+</template>
+
+<script lang="ts">
+import type { SelectScrollUpButtonProps as RekaSelectScrollUpButtonProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface SelectScrollUpButtonProps extends RekaSelectScrollUpButtonProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
+
+const props = defineProps<SelectScrollUpButtonProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/select/SelectSeparator.vue

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

package/src/select/SelectTrigger.vue

@@ -0,0 +1,40 @@
+<style>
+@import './select-trigger.css';
+</style>
+
+<template>
+    <SelectTrigger
+        v-bind="forwardedProps"
+        :class="clsx('arvue-select-trigger', props.class)"
+        :tabindex="disabled ? -1 : 0"
+    >
+        <slot/>
+        <SelectIcon as-child>
+            <span class="arvue-select-trigger-icon">
+                <i class="fas fa-chevron-down"/>
+            </span>
+        </SelectIcon>
+    </SelectTrigger>
+</template>
+
+<script lang="ts">
+import type { SelectTriggerProps as RekaSelectTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface SelectTriggerProps extends RekaSelectTriggerProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<SelectTriggerProps>(), {
+    as: 'div',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>