arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 19:30:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Dropdown): use ULinkCustom + improve item binds & types

Browse Source 
Fixes #215
This commit is contained in:
Benjamin Canac
2023-05-22 19:04:18 +02:00
parent bdaf2dbbd4
commit 55f115f9fe
1 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/runtime/components/elements/Dropdown.vue
View File

@@ -20,9 +20,8 @@
<MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background]" static> <MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background]" static>
<div v-for="(subItems, index) of items" :key="index" :class="ui.padding"> <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
<MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled"> <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
<Component <ULinkCustom
v-bind="omit(item, ['click'])" v-bind="omit(item, ['label', 'icon', 'iconClass', 'avatar', 'shortcuts', 'click'])"
:is="(item.to && NuxtLink) || (item.click && 'button') || 'div'"
:class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]" :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
@click="item.click" @click="item.click"
> >
@@ -36,7 +35,7 @@
<UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd> <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
</span> </span>
</slot> </slot>
</Component> </ULinkCustom>
</MenuItem> </MenuItem>
</div> </div>
</MenuItems> </MenuItems>
@@ -48,17 +47,17 @@
<script lang="ts"> <script lang="ts">
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue' import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import type { RouteLocationNormalized } from 'vue-router' import type { RouteLocationRaw } from 'vue-router'
import { defineComponent, ref, computed, onMounted } from 'vue' import { defineComponent, ref, computed, onMounted } from 'vue'
import { defu } from 'defu' import { defu } from 'defu'
import UIcon from '../elements/Icon.vue' import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue' import UAvatar from '../elements/Avatar.vue'
import UKbd from '../elements/Kbd.vue' import UKbd from '../elements/Kbd.vue'
import ULinkCustom from '../elements/LinkCustom.vue'
import { omit } from '../../utils' import { omit } from '../../utils'
import { usePopper } from '../../composables/usePopper' import { usePopper } from '../../composables/usePopper'
import type { Avatar as AvatarType } from '../../types/avatar' import type { Avatar as AvatarType } from '../../types/avatar'
import type { PopperOptions } from '../../types' import type { PopperOptions } from '../../types'
import { NuxtLink } from '#components'
import { useAppConfig } from '#imports' import { useAppConfig } from '#imports'
// TODO: Remove // TODO: Remove
// @ts-expect-error // @ts-expect-error
@@ -75,22 +74,23 @@ export default defineComponent({
MenuItem, MenuItem,
UIcon, UIcon,
UAvatar, UAvatar,
UKbd UKbd,
ULinkCustom
}, },
props: { props: {
items: { items: {
type: Array as PropType<{ type: Array as PropType<{
to?: RouteLocationNormalized to?: string | RouteLocationRaw
exact?: boolean exact?: boolean
label: string label: string
disabled?: boolean slot?: string
slot?: string icon?: string
icon?: string iconClass?: string
iconClass?: string avatar?: Partial<AvatarType>
avatar?: Partial<AvatarType> shortcuts?: string[]
click?: Function disabled?: boolean
shortcuts?: string[] click?: Function
}[][]>, }[][]>,
default: () => [] default: () => []
}, },
mode: { mode: {
@@ -196,8 +196,7 @@ export default defineComponent({
container, container,
onMouseOver, onMouseOver,
onMouseLeave, onMouseLeave,
omit, omit
NuxtLink
} }
} }
}) })