mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 08:50:34 +01:00
fix(components): move remaining classes to config (#1039)
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -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">·</span>
|
||||
<span :class="ui.middot">·</span>
|
||||
|
||||
<UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
|
||||
{{ shortcut }}
|
||||
</Ukbd>
|
||||
|
||||
Reference in New Issue
Block a user