fix(components): move remaining classes to config (#1039)

This commit is contained in:
Benjamin Canac
2023-11-30 16:31:48 +01:00
committed by GitHub
parent 5718dfd69a
commit e408eabd8b
44 changed files with 196 additions and 117 deletions

View File

@@ -2,7 +2,8 @@
<div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
<Transition appear v-bind="ui.transition">
<div>
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
<div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
<slot />
</div>

View File

@@ -14,10 +14,7 @@
ui.background,
ui.ring,
ui.shadow,
fullscreen ? 'w-screen' : ui.width,
fullscreen ? 'h-screen' : ui.height,
fullscreen ? 'rounded-none' : ui.rounded,
fullscreen ? 'm-0' : ui.margin
fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin],
]"
>
<slot />

View File

@@ -12,7 +12,7 @@
<UIcon v-if="icon" :name="icon" :class="iconClass" />
<UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
<div class="w-0 flex-1">
<div :class="ui.inner">
<p :class="ui.title">
<slot name="title" :title="title">
{{ title }}

View File

@@ -4,7 +4,7 @@
ref="trigger"
as="div"
:disabled="disabled"
class="inline-flex w-full"
:class="ui.trigger"
role="button"
@mouseover="onMouseOver"
>
@@ -22,7 +22,8 @@
<div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
<Transition appear v-bind="ui.transition">
<div>
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
<HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
<slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
</HPopoverPanel>

View File

@@ -90,10 +90,10 @@ export default defineComponent({
return {
...ui.value.transition,
enterFrom: props.side === 'left' ? '-translate-x-full' : 'translate-x-full',
enterTo: 'translate-x-0',
leaveFrom: 'translate-x-0',
leaveTo: props.side === 'left' ? '-translate-x-full' : 'translate-x-full'
enterFrom: props.side === 'left' ? ui.value.translate.left : ui.value.translate.right,
enterTo: ui.value.translate.base,
leaveFrom: ui.value.translate.base,
leaveTo: props.side === 'left' ? ui.value.translate.left : ui.value.translate.right
}
})

View File

@@ -7,7 +7,7 @@
<div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
<Transition appear v-bind="ui.transition">
<div>
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
<div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
<slot name="text">
@@ -15,7 +15,8 @@
</slot>
<span v-if="shortcuts?.length" :class="ui.shortcuts">
<span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
<span :class="ui.middot">&middot;</span>
<UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
{{ shortcut }}
</Ukbd>