arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-18 14:08:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module)!: use tailwind-merge for app.config & move config to components & type props (#692)

Browse Source 
Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
Benjamin Canac
2023-09-20 18:07:51 +02:00
committed by GitHub
parent 2c98628f98
commit 34d2f57801
59 changed files with 835 additions and 882 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<template>
<HMenu v-slot="{ open }" as="div" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
<HMenu v-slot="{ open }" as="div" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
<HMenuButton
ref="trigger"
as="div"
@@ -49,22 +49,19 @@ import { defineComponent, ref, computed, onMounted } from 'vue'
import type { PropType } from 'vue'
import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from '@headlessui/vue'
import { defu } from 'defu'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UKbd from '../elements/Kbd.vue'
import ULink from '../elements/Link.vue'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'
import type { DropdownItem } from '../../types/dropdown'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig, omit } from '../../utils'
import type { DropdownItem, PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { dropdown } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof dropdown>(appConfig.ui.strategy, appConfig.ui.dropdown, dropdown)
export default defineComponent({
components: {
@@ -105,15 +102,12 @@ export default defineComponent({
default: 0
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.dropdown>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.dropdown>>(() => defuTwMerge({}, props.ui, appConfig.ui.dropdown))
setup (props) {
const { ui, attrs } = useUI('dropdown', props.ui, config, { mergeWrapper: true })
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
@@ -143,8 +137,6 @@ export default defineComponent({
return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
function onMouseOver () {
if (props.mode !== 'hover' || !menuApi.value) {
return
@@ -186,13 +178,12 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
trigger,
container,
containerStyle,
wrapperClass,
onMouseOver,
onMouseLeave,
omit