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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/content/3.forms/1.input.md
View File

@@ -148,6 +148,21 @@ excludedProps:
---
::
### Padded
Use the `padded` prop to remove the padding of the Input.
::component-card
---
props:
padded: false
baseProps:
placeholder: 'Search...'
variant: 'none'
class: 'w-full'
---
::
## Slots
### `leading`

15
docs/content/3.forms/2.textarea.md
View File

@@ -132,6 +132,21 @@ props:
---
::
### Padded
Use the `padded` prop to remove the padding of the Textarea.
::component-card
---
props:
padded: false
baseProps:
placeholder: 'Search...'
variant: 'none'
class: 'w-full'
---
::
## Props
:component-props

19
docs/content/3.forms/3.select.md
View File

@@ -175,6 +175,25 @@ excludedProps:
---
::
### Padded
Use the `padded` prop to remove the padding of the Select.
::component-card
---
props:
padded: false
baseProps:
placeholder: 'Search...'
options:
- 'United States'
- 'Canada'
- 'Mexico'
variant: 'none'
class: 'w-full'
---
::
## Slots
### `leading`

2
src/runtime/components/elements/Alert.vue
View File

@@ -4,7 +4,7 @@
<UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
<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 }}

2
src/runtime/components/elements/AvatarGroup.ts
View File

@@ -32,7 +32,7 @@ export default defineComponent({
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
type: Object as PropType<Partial<typeof avatarGroupConfig> & { strategy?: Strategy }>,
default: () => ({})
}
},

10
src/runtime/components/elements/Button.vue
View File

@@ -5,7 +5,7 @@
</slot>
<slot>
<span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
<span v-if="label" :class="[truncate ? ui.truncate : '']">
{{ label }}
</span>
</slot>
@@ -154,7 +154,7 @@ export default defineComponent({
ui.value.gap[size.value],
props.padded && ui.value[isSquare.value ? 'square' : 'padding'][size.value],
variant?.replaceAll('{color}', props.color),
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
props.block ? ui.value.block : ui.value.inline
), props.class)
})
@@ -178,7 +178,7 @@ export default defineComponent({
return twJoin(
ui.value.icon.base,
ui.value.icon.size[size.value],
props.loading && 'animate-spin'
props.loading && ui.value.icon.loading
)
})
@@ -186,11 +186,13 @@ export default defineComponent({
return twJoin(
ui.value.icon.base,
ui.value.icon.size[size.value],
props.loading && !isLeading.value && 'animate-spin'
props.loading && !isLeading.value && ui.value.icon.loading
)
})
return {
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
isLeading,
isTrailing,

17
src/runtime/components/elements/ButtonGroup.ts
View File

@@ -35,7 +35,7 @@ export default defineComponent({
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
type: Object as PropType<Partial<typeof buttonGroupConfig> & { strategy?: Strategy }>,
default: () => ({})
}
},
@@ -52,20 +52,7 @@ export default defineComponent({
), props.class)
})
const rounded = computed(() => {
const roundedMap = {
'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
'rounded-2xl': { horizontal: { start: 'rounded-s-2xl', end: 'rounded-e-2xl' }, vertical: { start: 'rounded-t-2xl', end: 'rounded-b-2xl' } },
'rounded-3xl': { horizontal: { start: 'rounded-s-3xl', end: 'rounded-e-3xl' }, vertical: { start: 'rounded-t-3xl', end: 'rounded-b-3xl' } },
'rounded-full': { horizontal: { start: 'rounded-s-full', end: 'rounded-e-full' }, vertical: { start: 'rounded-t-full', end: 'rounded-b-full' } }
}
return roundedMap[ui.value.rounded][props.orientation]
})
const rounded = computed(() => ui.value.orientation[ui.value.rounded][props.orientation])
useProvideButtonGroup({ orientation: toRef(props, 'orientation'), size: toRef(props, 'size'), ui, rounded })

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

@@ -4,7 +4,7 @@
ref="trigger"
as="div"
:disabled="disabled"
class="inline-flex w-full"
:class="ui.trigger"
role="button"
@mouseover="onMouseOver"
>
@@ -18,7 +18,7 @@
<div v-if="open && items.length" 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)" />
<HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
<div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
<NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
@@ -35,7 +35,7 @@
<UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
<UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
<span class="truncate">{{ item.label }}</span>
<span :class="ui.item.label">{{ item.label }}</span>
<span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
<UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>

22
src/runtime/components/elements/MeterGroup.ts
View File

@@ -44,14 +44,14 @@ export default defineComponent({
},
icon: {
type: String,
default: 'i-heroicons-minus'
default: () => meterGroupConfig.default.icon
},
class: {
type: [String, Object, Array] as PropType<any>,
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof meterGroupConfig & { strategy?: Strategy }>>,
type: Object as PropType<Partial<typeof meterGroupConfig> & { strategy?: Strategy }>,
default: () => ({})
}
},
@@ -70,21 +70,7 @@ export default defineComponent({
const children = computed(() => getSlotsChildren(slots))
const rounded = computed(() => {
const roundedMap = {
'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
rounded: { left: 'rounded-s', right: 'rounded-e' },
'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
}
return roundedMap[ui.value.rounded]
})
const rounded = computed(() => ui.value.orientation[ui.value.rounded])
function clampPercent (value: number, min: number, max: number): number {
if (min == max) {
@@ -198,7 +184,7 @@ export default defineComponent({
vNodeSlots[0] = slots.indicator({ percent: percent.value })
}
vNodeSlots[2] = h('ol', { class: 'list-disc list-inside' }, labels.value.map((label, key) => {
vNodeSlots[2] = h('ol', { class: ui.value.list }, labels.value.map((label, key) => {
const labelClass = computed(() => {
return twJoin(
uiMeter.value.label.base,

6
src/runtime/components/forms/Checkbox.vue
View File

@@ -1,6 +1,6 @@
<template>
<div :class="ui.wrapper">
<div class="flex items-center h-5">
<div :class="ui.container">
<input
:id="inputId"
v-model="toggle"
@@ -11,13 +11,12 @@
:checked="checked"
:indeterminate="indeterminate"
type="checkbox"
class="form-checkbox"
:class="inputClass"
v-bind="attrs"
@change="onChange"
>
</div>
<div v-if="label || $slots.label" class="ms-3 flex flex-col">
<div v-if="label || $slots.label" :class="ui.inner">
<label :for="inputId" :class="ui.label">
<slot name="label">{{ label }}</slot>
<span v-if="required" :class="ui.required">*</span>
@@ -130,6 +129,7 @@ export default defineComponent({
const inputClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
ui.value.form,
ui.value.rounded,
ui.value.background,
ui.value.border,

6
src/runtime/components/forms/Input.vue
View File

@@ -9,7 +9,6 @@
:required="required"
:placeholder="placeholder"
:disabled="disabled || loading"
class="form-input"
:class="inputClass"
v-bind="attrs"
@input="onInput"
@@ -234,6 +233,7 @@ export default defineComponent({
return twMerge(twJoin(
ui.value.base,
ui.value.form,
rounded.value,
ui.value.placeholder,
ui.value.size[size.value],
@@ -281,7 +281,7 @@ export default defineComponent({
ui.value.icon.base,
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
ui.value.icon.size[size.value],
props.loading && 'animate-spin'
props.loading && ui.value.icon.loading
)
})
@@ -298,7 +298,7 @@ export default defineComponent({
ui.value.icon.base,
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
ui.value.icon.size[size.value],
props.loading && !isLeading.value && 'animate-spin'
props.loading && !isLeading.value && ui.value.icon.loading
)
})

6
src/runtime/components/forms/Radio.vue
View File

@@ -1,6 +1,6 @@
<template>
<div :class="ui.wrapper">
<div class="flex items-center h-5">
<div :class="ui.container">
<input
:id="inputId"
v-model="pick"
@@ -9,12 +9,11 @@
:value="value"
:disabled="disabled"
type="radio"
class="form-radio"
:class="inputClass"
v-bind="attrs"
>
</div>
<div v-if="label || $slots.label" class="ms-3 flex flex-col">
<div v-if="label || $slots.label" :class="ui.inner">
<label :for="inputId" :class="ui.label">
<slot name="label">{{ label }}</slot>
<span v-if="required" :class="ui.required">*</span>
@@ -128,6 +127,7 @@ export default defineComponent({
const inputClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
ui.value.form,
ui.value.background,
ui.value.border,
color.value && ui.value.ring.replaceAll('{color}', color.value),

2
src/runtime/components/forms/RadioGroup.vue
View File

@@ -90,7 +90,7 @@ export default defineComponent({
default: () => ({})
},
uiRadio: {
type: Object as PropType<Partial<typeof configRadio & { strategy?: Strategy }>>,
type: Object as PropType<Partial<typeof configRadio> & { strategy?: Strategy }>,
default: () => ({})
}
},

6
src/runtime/components/forms/Select.vue
View File

@@ -6,7 +6,6 @@
:value="modelValue"
:required="required"
:disabled="disabled || loading"
class="form-select"
:class="selectClass"
v-bind="attrs"
@input="onInput"
@@ -256,6 +255,7 @@ export default defineComponent({
return twMerge(twJoin(
ui.value.base,
ui.value.form,
rounded.value,
ui.value.size[size.value],
props.padded ? ui.value.padding[size.value] : 'p-0',
@@ -302,7 +302,7 @@ export default defineComponent({
ui.value.icon.base,
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
ui.value.icon.size[size.value],
props.loading && 'animate-spin'
props.loading && ui.value.icon.loading
)
})
@@ -319,7 +319,7 @@ export default defineComponent({
ui.value.icon.base,
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
ui.value.icon.size[size.value],
props.loading && !isLeading.value && 'animate-spin'
props.loading && !isLeading.value && ui.value.icon.loading
)
})

26
src/runtime/components/forms/SelectMenu.vue
View File

@@ -15,7 +15,7 @@
v-if="required"
:value="modelValue"
:required="required"
class="absolute inset-0 w-px opacity-0 cursor-default"
:class="uiMenu.required"
tabindex="-1"
aria-hidden="true"
>
@@ -25,7 +25,7 @@
ref="trigger"
as="div"
role="button"
class="inline-flex w-full"
:class="uiMenu.trigger"
>
<slot :open="open" :disabled="disabled" :loading="loading">
<button :id="inputId" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
@@ -36,9 +36,9 @@
</span>
<slot name="label">
<span v-if="multiple && Array.isArray(modelValue) && modelValue.length" class="block truncate">{{ modelValue.length }} selected</span>
<span v-else-if="!multiple && modelValue" class="block truncate">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
<span v-else class="block truncate">{{ placeholder || '&nbsp;' }}</span>
<span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="uiMenu.label">{{ modelValue.length }} selected</span>
<span v-else-if="!multiple && modelValue" :class="uiMenu.label">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
<span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
</slot>
<span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
@@ -53,7 +53,8 @@
<div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
<Transition appear v-bind="uiMenu.transition">
<div>
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(uiMenu.arrow)]" />
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(uiMenu.arrow)" />
<component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
<HComboboxInput
v-if="searchable"
@@ -101,7 +102,7 @@
<li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
<div :class="uiMenu.option.container">
<slot name="option-create" :option="queryOption" :active="active" :selected="selected">
<span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
<span :class="uiMenu.option.create">Create "{{ queryOption[optionAttribute] }}"</span>
</slot>
</div>
</li>
@@ -312,7 +313,7 @@ export default defineComponent({
default: () => ({})
},
uiMenu: {
type: Object as PropType<Partial<typeof configMenu & { strategy?: Strategy }>>,
type: Object as PropType<Partial<typeof configMenu> & { strategy?: Strategy }>,
default: () => ({})
}
},
@@ -339,15 +340,14 @@ export default defineComponent({
return twMerge(twJoin(
ui.value.base,
uiMenu.value.select,
rounded.value,
'text-left cursor-default',
ui.value.size[size.value],
ui.value.gap[size.value],
props.padded ? ui.value.padding[size.value] : 'p-0',
variant?.replaceAll('{color}', color.value),
(isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
(isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value],
'inline-flex items-center'
(isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
), props.selectClass)
})
@@ -388,7 +388,7 @@ export default defineComponent({
ui.value.icon.base,
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
ui.value.icon.size[size.value],
props.loading && 'animate-spin'
props.loading && ui.value.icon.loading
)
})
@@ -405,7 +405,7 @@ export default defineComponent({
ui.value.icon.base,
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
ui.value.icon.size[size.value],
props.loading && !isLeading.value && 'animate-spin'
props.loading && !isLeading.value && ui.value.icon.loading
)
})

2
src/runtime/components/forms/Textarea.vue
View File

@@ -9,7 +9,6 @@
:required="required"
:disabled="disabled"
:placeholder="placeholder"
class="form-textarea"
:class="textareaClass"
v-bind="attrs"
@input="onInput"
@@ -227,6 +226,7 @@ export default defineComponent({
return twMerge(twJoin(
ui.value.base,
ui.value.form,
ui.value.rounded,
ui.value.placeholder,
ui.value.size[size.value],

8
src/runtime/components/layout/Divider.vue
View File

@@ -91,17 +91,11 @@ export default defineComponent({
})
const borderClass = computed(() => {
const typeClass = ({
solid: 'border-solid',
dotted: 'border-dotted',
dashed: 'border-dashed'
})[props.type]
return twJoin(
ui.value.border.base,
isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
typeClass
ui.value.border.type[props.type]
)
})

2
src/runtime/components/navigation/CommandPalette.vue
View File

@@ -311,7 +311,7 @@ export default defineComponent({
return twJoin(
ui.value.input.icon.base,
ui.value.input.icon.size,
((props.loading || isLoading.value) && props.loadingIcon) && 'animate-spin'
((props.loading || isLoading.value) && props.loadingIcon) && ui.value.input.icon.loading
)
})

3
src/runtime/components/overlays/ContextMenu.vue
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>

5
src/runtime/components/overlays/Modal.vue
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 />

2
src/runtime/components/overlays/Notification.vue
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 }}

5
src/runtime/components/overlays/Popover.vue
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>

8
src/runtime/components/overlays/Slideover.vue
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
}
})

5
src/runtime/components/overlays/Tooltip.vue
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>

1
src/runtime/ui.config/elements/alert.ts
View File

@@ -1,5 +1,6 @@
export default {
wrapper: 'w-full relative overflow-hidden',
inner: 'w-0 flex-1',
title: 'text-sm font-medium',
description: 'mt-1 text-sm leading-4 opacity-90',
actions: 'flex items-center gap-2 mt-3 flex-shrink-0',

6
src/runtime/ui.config/elements/button.ts
View File

@@ -2,6 +2,9 @@ export default {
base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
font: 'font-medium',
rounded: 'rounded-md',
truncate: 'text-left break-all line-clamp-1',
block: 'w-full flex justify-center items-center',
inline: 'inline-flex items-center',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
@@ -58,6 +61,7 @@ export default {
},
icon: {
base: 'flex-shrink-0',
loading: 'animate-spin',
size: {
'2xs': 'h-4 w-4',
xs: 'h-4 w-4',
@@ -73,4 +77,4 @@ export default {
color: 'primary',
loadingIcon: 'i-heroicons-arrow-path-20-solid'
}
}
}

15
src/runtime/ui.config/elements/buttonGroup.ts
View File

@@ -4,5 +4,16 @@ export default {
vertical: 'inline-flex flex-col -space-y-px'
},
rounded: 'rounded-md',
shadow: 'shadow-sm'
}
shadow: 'shadow-sm',
orientation: {
'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
'rounded-2xl': { horizontal: { start: 'rounded-s-2xl', end: 'rounded-e-2xl' }, vertical: { start: 'rounded-t-2xl', end: 'rounded-b-2xl' } },
'rounded-3xl': { horizontal: { start: 'rounded-s-3xl', end: 'rounded-e-3xl' }, vertical: { start: 'rounded-t-3xl', end: 'rounded-b-3xl' } },
'rounded-full': { horizontal: { start: 'rounded-s-full', end: 'rounded-e-full' }, vertical: { start: 'rounded-t-full', end: 'rounded-b-full' } }
}
}

6
src/runtime/ui.config/elements/dropdown.ts
View File

@@ -1,8 +1,9 @@
import _popperArrow from '../_popperArrow'
import { arrow } from '../popper'
export default {
wrapper: 'relative inline-flex text-left rtl:text-right',
container: 'z-20 group',
trigger: 'inline-flex w-full',
width: 'w-48',
height: '',
background: 'bg-white dark:bg-gray-800',
@@ -29,6 +30,7 @@ export default {
base: 'flex-shrink-0',
size: '3xs' as const
},
label: 'truncate',
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
},
// Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
@@ -45,7 +47,7 @@ export default {
strategy: 'fixed'
},
arrow: {
..._popperArrow,
...arrow,
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
background: 'before:bg-white dark:before:bg-gray-700'
}

17
src/runtime/ui.config/elements/meterGroup.ts
View File

@@ -5,7 +5,20 @@ export default {
transition: 'transition-all',
rounded: 'rounded-full',
shadow: '',
list: 'list-disc list-inside',
orientation: {
'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
rounded: { left: 'rounded-s', right: 'rounded-e' },
'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
},
default: {
size: 'md'
size: 'md',
icon: 'i-heroicons-minus-20-solid'
}
}
}

5
src/runtime/ui.config/forms/checkbox.ts
View File

@@ -1,15 +1,18 @@
export default {
wrapper: 'relative flex items-start',
container: 'flex items-center h-5',
base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
form: 'form-checkbox',
rounded: 'rounded',
color: 'text-{color}-500 dark:text-{color}-400',
background: 'bg-white dark:bg-gray-900',
border: 'border border-gray-300 dark:border-gray-700',
ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
inner: 'ms-3 flex flex-col',
label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
required: 'text-sm text-red-500 dark:text-red-400',
help: 'text-sm text-gray-500 dark:text-gray-400',
default: {
color: 'primary'
}
}
}

4
src/runtime/ui.config/forms/input.ts
View File

@@ -1,6 +1,7 @@
export default {
wrapper: 'relative',
base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
form: 'form-input',
rounded: 'rounded-md',
placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
size: {
@@ -62,6 +63,7 @@ export default {
icon: {
base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
color: 'text-{color}-500 dark:text-{color}-400',
loading: 'animate-spin',
size: {
'2xs': 'h-4 w-4',
xs: 'h-4 w-4',
@@ -101,4 +103,4 @@ export default {
variant: 'outline',
loadingIcon: 'i-heroicons-arrow-path-20-solid'
}
}
}

5
src/runtime/ui.config/forms/radio.ts
View File

@@ -1,14 +1,17 @@
export default {
wrapper: 'relative flex items-start',
container: 'flex items-center h-5',
base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
form: 'form-radio',
color: 'text-{color}-500 dark:text-{color}-400',
background: 'bg-white dark:bg-gray-900',
border: 'border border-gray-300 dark:border-gray-700',
ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
inner: 'ms-3 flex flex-col',
label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
required: 'text-sm text-red-500 dark:text-red-400',
help: 'text-sm text-gray-500 dark:text-gray-400',
default: {
color: 'primary'
}
}
}

3
src/runtime/ui.config/forms/select.ts
View File

@@ -2,6 +2,7 @@ import input from './input'
export default {
...input,
form: 'form-select',
placeholder: 'text-gray-900 dark:text-white',
default: {
size: 'sm',
@@ -10,4 +11,4 @@ export default {
loadingIcon: 'i-heroicons-arrow-path-20-solid',
trailingIcon: 'i-heroicons-chevron-down-20-solid'
}
}
}

9
src/runtime/ui.config/forms/selectMenu.ts
View File

@@ -1,7 +1,9 @@
import _popperArrow from '../_popperArrow'
import { arrow } from '../popper'
export default {
container: 'z-20 group',
trigger: 'inline-flex w-full',
select: 'inline-flex items-center text-left cursor-default',
width: 'w-full',
height: 'max-h-60',
base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
@@ -11,6 +13,8 @@ export default {
padding: 'p-1',
ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none',
required: 'absolute inset-0 w-px opacity-0 cursor-default',
label: 'block truncate',
option: {
base: 'cursor-default select-none relative flex items-center justify-between gap-1',
rounded: 'rounded-md',
@@ -23,6 +27,7 @@ export default {
selected: 'pe-7',
disabled: 'cursor-not-allowed opacity-50',
empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
create: 'block truncate',
icon: {
base: 'flex-shrink-0 h-4 w-4',
active: 'text-gray-900 dark:text-white',
@@ -55,7 +60,7 @@ export default {
clearOnClose: false
},
arrow: {
..._popperArrow,
...arrow,
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
background: 'before:bg-white dark:before:bg-gray-700'
}

3
src/runtime/ui.config/forms/textarea.ts
View File

@@ -2,9 +2,10 @@ import input from './input'
export default {
...input,
form: 'form-textarea',
default: {
size: 'sm',
color: 'white',
variant: 'outline'
}
}
}

5
src/runtime/ui.config/layout/divider.ts
View File

@@ -16,6 +16,11 @@ export default {
size: {
horizontal: 'border-t',
vertical: 'border-s'
},
type: {
solid: 'border-solid',
dotted: 'border-dotted',
dashed: 'border-dashed'
}
},
icon: {

1
src/runtime/ui.config/navigation/commandPalette.ts
View File

@@ -9,6 +9,7 @@ export default {
size: 'sm:text-sm',
icon: {
base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
loading: 'animate-spin',
size: 'h-4 w-4',
padding: 'ps-10'
},

4
src/runtime/ui.config/overlays/contextMenu.ts
View File

@@ -1,4 +1,4 @@
import arrow from '../_popperArrow'
import { arrow } from '../popper'
export default {
wrapper: 'relative',
@@ -23,4 +23,4 @@ export default {
scroll: false
},
arrow
}
}

7
src/runtime/ui.config/overlays/modal.ts
View File

@@ -4,7 +4,7 @@ export default {
container: 'flex min-h-full items-end sm:items-center justify-center text-center',
padding: 'p-4 sm:p-0',
margin: 'sm:my-8',
base: 'relative text-left rtl:text-right overflow-hidden w-full flex flex-col',
base: 'relative text-left rtl:text-right overflow-hidden flex flex-col',
overlay: {
base: 'fixed inset-0 transition-opacity',
background: 'bg-gray-200/75 dark:bg-gray-800/75',
@@ -22,8 +22,9 @@ export default {
ring: '',
rounded: 'rounded-lg',
shadow: 'shadow-xl',
width: 'sm:max-w-lg',
width: 'w-full sm:max-w-lg',
height: '',
fullscreen: 'w-screen h-screen',
// Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
transition: {
enter: 'ease-out duration-300',
@@ -33,4 +34,4 @@ export default {
leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
}
}
}

1
src/runtime/ui.config/overlays/notification.ts
View File

@@ -1,6 +1,7 @@
export default {
wrapper: 'w-full pointer-events-auto',
container: 'relative overflow-hidden',
inner: 'w-0 flex-1',
title: 'text-sm font-medium text-gray-900 dark:text-white',
description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
actions: 'flex items-center gap-2 mt-3 flex-shrink-0',

3
src/runtime/ui.config/overlays/popover.ts
View File

@@ -1,8 +1,9 @@
import arrow from '../_popperArrow'
import { arrow } from '../popper'
export default {
wrapper: 'relative',
container: 'z-50 group',
trigger: 'inline-flex w-full',
width: '',
background: 'bg-white dark:bg-gray-900',
shadow: 'shadow-lg',

7
src/runtime/ui.config/overlays/slideover.ts
View File

@@ -20,9 +20,14 @@ export default {
padding: '',
shadow: 'shadow-xl',
width: 'w-screen max-w-md',
translate: {
base: 'translate-x-0',
left: '-translate-x-full',
right: 'translate-x-full'
},
// Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
transition: {
enter: 'transform transition ease-in-out duration-300',
leave: 'transform transition ease-in-out duration-200'
}
}
}

5
src/runtime/ui.config/overlays/tooltip.ts
View File

@@ -1,4 +1,4 @@
import arrow from '../_popperArrow'
import { arrow } from '../popper'
export default {
wrapper: 'relative inline-flex',
@@ -11,6 +11,7 @@ export default {
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
middot: 'mx-1 text-gray-700 dark:text-gray-200',
// Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
transition: {
enterActiveClass: 'transition ease-out duration-200',
@@ -24,4 +25,4 @@ export default {
strategy: 'fixed'
},
arrow
}
}

6
src/runtime/ui.config/_popperArrow.ts → src/runtime/ui.config/popper.ts
View File

@@ -1,8 +1,8 @@
export default {
base: 'before:w-2 before:h-2',
export const arrow = {
base: 'invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2',
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
rounded: 'before:rounded-sm',
background: 'before:bg-gray-200 dark:before:bg-gray-800',
shadow: 'before:shadow',
placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
}
}