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

fix(types): improve with strict mode (#1041)

Browse Source
This commit is contained in:
Benjamin Canac
2023-11-30 12:02:37 +01:00
committed by GitHub
parent 464ff0b703
commit 4a9b66aeb3
68 changed files with 266 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/runtime/components/data/Table.vue
View File

@@ -11,7 +11,7 @@
<slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
<UButton
v-if="column.sortable"
v-bind="{ ...ui.default.sortButton, ...sortButton }"
v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
:icon="(!sort.column || sort.column !== column.key) ? (sortButton.icon || ui.default.sortButton.icon) : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
:label="column[columnAttribute]"
@click="onSort(column)"
@@ -145,11 +145,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'update:sort'],

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

@@ -93,17 +93,17 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {
const { ui, attrs } = useUI('accordion', toRef(props, 'ui'), config, toRef(props, 'class'))
const uiButton = computed<Partial<typeof configButton>>(() => configButton)
const uiButton = computed<typeof configButton>(() => configButton)
const buttonRefs = ref<{ open: boolean, close: (e: EventTarget) => {} }[]>([])
@@ -114,7 +114,7 @@ export default defineComponent({
buttonRefs.value.forEach((button) => {
if (button.open) {
button.close(e.target)
button.close(e.target as EventTarget)
}
})
}

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

@@ -17,15 +17,15 @@
</p>
<div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
</div>
</div>
<div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
<template v-if="!description && !$slots.description && actions.length">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
</template>
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
</div>
</div>
</div>
@@ -73,7 +73,7 @@ export default defineComponent({
},
closeButton: {
type: Object as PropType<Button>,
default: () => config.default.closeButton as Button
default: () => config.default.closeButton as unknown as Button
},
actions: {
type: Array as PropType<(Button & { click?: Function })[]>,
@@ -98,11 +98,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['close'],

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

@@ -86,11 +86,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

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

@@ -29,11 +29,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
default: undefined
default: () => ({})
}
},
setup (props, { slots }) {

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

@@ -51,11 +51,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

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

@@ -121,11 +121,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props, { slots }) {

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

@@ -32,11 +32,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
default: undefined
default: () => ({})
}
},
setup (props, { slots }) {

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

@@ -61,11 +61,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

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

@@ -109,11 +109,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

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

@@ -33,11 +33,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

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

@@ -87,11 +87,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

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

@@ -48,11 +48,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof meterGroupConfig & { strategy?: Strategy }>>,
default: undefined
default: () => ({})
}
},
setup (props, { slots }) {
@@ -128,7 +128,7 @@ export default defineComponent({
vProps.ui.wrapper = node.props?.ui?.wrapper || ''
vProps.ui.wrapper += [
node.props?.ui?.wrapper,
props.ui?.meter?.background || ui.value.background,
ui.value.background,
ui.value.transition
].filter(Boolean).join(' ')
@@ -153,8 +153,8 @@ export default defineComponent({
// @ts-expect-error
delete(clone.children?.label)
delete(clone.props.indicator)
delete(clone.props.label)
delete(clone.props?.indicator)
delete(clone.props?.label)
return clone
}))

16
src/runtime/components/elements/Progress.vue
View File

@@ -8,7 +8,7 @@
</div>
</slot>
<progress :class="progressClass" v-bind="{ value, max: realMax }">
<progress :class="progressClass" v-bind="{ value, max: (realMax as number) }">
{{ Math.round(percent) }}%
</progress>
@@ -39,7 +39,7 @@ export default defineComponent({
inheritAttrs: false,
props: {
value: {
type: [Number, null, undefined],
type: Number,
default: null
},
max: {
@@ -73,11 +73,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {
@@ -173,7 +173,7 @@ export default defineComponent({
return classes.join(' ')
}
const isIndeterminate = computed(() => [undefined, null].includes(props.value))
const isIndeterminate = computed(() => props.value === undefined || props.value === null)
const isSteps = computed(() => Array.isArray(props.max))
const realMax = computed(() => {
@@ -191,8 +191,8 @@ export default defineComponent({
const percent = computed(() => {
switch (true) {
case props.value < 0: return 0
case props.value > realMax.value: return 100
default: return (props.value / realMax.value) * 100
case props.value > (realMax.value as number): return 100
default: return (props.value / (realMax.value as number)) * 100
}
})

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

@@ -100,11 +100,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'change'],
@@ -133,8 +133,8 @@ export default defineComponent({
ui.value.rounded,
ui.value.background,
ui.value.border,
ui.value.ring.replaceAll('{color}', color.value),
ui.value.color.replaceAll('{color}', color.value)
color.value && ui.value.ring.replaceAll('{color}', color.value),
color.value && ui.value.color.replaceAll('{color}', color.value)
), props.inputClass)
})

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

@@ -247,7 +247,7 @@ async function getValibotError (
const result = await schema._parse(state)
if (result.issues) {
return result.issues.map((issue) => ({
path: issue.path.map(p => p.key).join('.'),
path: issue.path?.map(p => p.key).join('.') || '',
message: issue.message
}))
}

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

@@ -89,11 +89,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
},
eagerValidation: {
type: Boolean,

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

@@ -153,11 +153,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
},
modelModifiers: {
type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean }>,
@@ -199,13 +199,13 @@ export default defineComponent({
emitFormInput()
}
const onInput = (event: InputEvent) => {
const onInput = (event: Event) => {
if (!modelModifiers.value.lazy) {
updateInput((event.target as HTMLInputElement).value)
}
}
const onChange = (event: InputEvent) => {
const onChange = (event: Event) => {
const value = (event.target as HTMLInputElement).value
if (modelModifiers.value.lazy) {
@@ -279,7 +279,7 @@ export default defineComponent({
const leadingIconClass = computed(() => {
return twJoin(
ui.value.icon.base,
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
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'
)
@@ -296,7 +296,7 @@ export default defineComponent({
const trailingIconClass = computed(() => {
return twJoin(
ui.value.icon.base,
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
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'
)

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

@@ -90,11 +90,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'change'],
@@ -102,7 +102,7 @@ export default defineComponent({
const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))
const radioGroup = inject('radio-group', null)
const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
const inputId = ref(props.id)
onMounted(() => {
@@ -130,8 +130,8 @@ export default defineComponent({
ui.value.base,
ui.value.background,
ui.value.border,
ui.value.ring.replaceAll('{color}', color.value),
ui.value.color.replaceAll('{color}', color.value)
color.value && ui.value.ring.replaceAll('{color}', color.value),
color.value && ui.value.color.replaceAll('{color}', color.value)
), props.inputClass)
})

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

@@ -83,15 +83,15 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
},
uiRadio: {
type: Object as PropType<Partial<typeof configRadio & { strategy?: Strategy }>>,
default: undefined
default: () => ({})
}
},
emits: ['update:modelValue', 'change'],

12
src/runtime/components/forms/Range.vue
View File

@@ -85,11 +85,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'change'],
@@ -124,7 +124,7 @@ export default defineComponent({
ui.value.base,
ui.value.background,
ui.value.rounded,
ui.value.ring.replaceAll('{color}', color.value),
color.value && ui.value.ring.replaceAll('{color}', color.value),
ui.value.size[size.value]
), props.inputClass)
})
@@ -133,7 +133,7 @@ export default defineComponent({
return twJoin(
ui.value.thumb.base,
// Intermediate class to allow thumb ring or background color (set to `current`) as it's impossible to safelist with arbitrary values
ui.value.thumb.color.replaceAll('{color}', color.value),
color.value && ui.value.thumb.color.replaceAll('{color}', color.value),
ui.value.thumb.ring,
ui.value.thumb.background,
ui.value.thumb.size[size.value]
@@ -153,7 +153,7 @@ export default defineComponent({
return twJoin(
ui.value.progress.base,
ui.value.progress.rounded,
ui.value.progress.background.replaceAll('{color}', color.value),
color.value && ui.value.progress.background.replaceAll('{color}', color.value),
ui.value.progress.size[size.value]
)
})

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

@@ -173,11 +173,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'change'],
@@ -190,7 +190,7 @@ export default defineComponent({
const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
const onInput = (event: InputEvent) => {
const onInput = (event: Event) => {
emit('update:modelValue', (event.target as HTMLInputElement).value)
}
@@ -300,7 +300,7 @@ export default defineComponent({
const leadingIconClass = computed(() => {
return twJoin(
ui.value.icon.base,
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
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'
)
@@ -317,7 +317,7 @@ export default defineComponent({
const trailingIconClass = computed(() => {
return twJoin(
ui.value.icon.base,
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
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'
)

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

@@ -38,7 +38,7 @@
<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" :class="uiMenu.placeholder">{{ placeholder || '&nbsp;' }}</span>
<span v-else class="block truncate">{{ placeholder || '&nbsp;' }}</span>
</slot>
<span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
@@ -54,7 +54,7 @@
<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)]" />
<component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.divide, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
<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"
ref="searchInput"
@@ -305,15 +305,15 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
},
uiMenu: {
type: Object as PropType<Partial<typeof configMenu & { strategy?: Strategy }>>,
default: undefined
default: () => ({})
}
},
emits: ['update:modelValue', 'open', 'close', 'change'],
@@ -386,7 +386,7 @@ export default defineComponent({
const leadingIconClass = computed(() => {
return twJoin(
ui.value.icon.base,
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
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'
)
@@ -403,7 +403,7 @@ export default defineComponent({
const trailingIconClass = computed(() => {
return twJoin(
ui.value.icon.base,
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
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'
)

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

@@ -117,11 +117,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
},
modelModifiers: {
type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean }>,
@@ -180,14 +180,14 @@ export default defineComponent({
emitFormInput()
}
const onInput = (event: InputEvent) => {
const onInput = (event: Event) => {
autoResize()
if (!modelModifiers.value.lazy) {
updateInput((event.target as HTMLInputElement).value)
}
}
const onChange = (event: InputEvent) => {
const onChange = (event: Event) => {
const value = (event.target as HTMLInputElement).value
if (modelModifiers.value.lazy) {

20
src/runtime/components/forms/Toggle.vue
View File

@@ -73,10 +73,6 @@ export default defineComponent({
return appConfig.ui.colors.includes(value)
}
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
size: {
type: String as PropType<ToggleSize>,
default: config.default.size,
@@ -84,9 +80,13 @@ export default defineComponent({
return Object.keys(config.size).includes(value)
}
},
class: {
type: [String, Object, Array] as PropType<any>,
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue'],
@@ -110,8 +110,8 @@ export default defineComponent({
ui.value.base,
ui.value.size[props.size],
ui.value.rounded,
ui.value.ring.replaceAll('{color}', color.value),
(active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
color.value && ui.value.ring.replaceAll('{color}', color.value),
color.value && (active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
), props.class)
})
@@ -126,14 +126,14 @@ export default defineComponent({
const onIconClass = computed(() => {
return twJoin(
ui.value.icon.size[props.size],
ui.value.icon.on.replaceAll('{color}', color.value)
color.value && ui.value.icon.on.replaceAll('{color}', color.value)
)
})
const offIconClass = computed(() => {
return twJoin(
ui.value.icon.size[props.size],
ui.value.icon.off.replaceAll('{color}', color.value)
color.value && ui.value.icon.off.replaceAll('{color}', color.value)
)
})

6
src/runtime/components/layout/Card.vue
View File

@@ -38,11 +38,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

6
src/runtime/components/layout/Container.vue
View File

@@ -26,11 +26,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

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

@@ -64,11 +64,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

6
src/runtime/components/layout/Skeleton.vue
View File

@@ -20,11 +20,11 @@ export default defineComponent({
props: {
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

6
src/runtime/components/navigation/Breadcrumb.vue
View File

@@ -63,11 +63,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

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

@@ -21,7 +21,7 @@
@change="query = $event.target.value"
/>
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" :class="ui.input.closeButton" @click="onClear" />
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" :class="ui.input.closeButton" @click="onClear" />
</div>
<HComboboxOptions
@@ -135,7 +135,7 @@ export default defineComponent({
},
closeButton: {
type: Object as PropType<Button>,
default: () => config.default.closeButton as Button
default: () => config.default.closeButton as unknown as Button
},
emptyState: {
type: Object as PropType<{ icon: string, label: string, queryLabel: string }>,
@@ -171,11 +171,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'close'],
@@ -217,7 +217,7 @@ export default defineComponent({
const commands: Command[] = []
for (const group of props.groups) {
if (!group.search) {
commands.push(...group.commands.map(command => ({ ...command, group: group.key })))
commands.push(...(group.commands?.map(command => ({ ...command, group: group.key })) || []))
}
}
return commands
@@ -232,11 +232,17 @@ export default defineComponent({
const groupedCommands: Record<string, typeof results['value']> = {}
for (const command of results.value) {
if (!command.item.group) {
continue
}
groupedCommands[command.item.group] ||= []
groupedCommands[command.item.group].push(command)
}
for (const key in groupedCommands) {
const group = props.groups.find(group => group.key === key)
if (!group) {
continue
}
let commands = groupedCommands[key].map((result) => {
const { item, ...data } = result
@@ -278,6 +284,7 @@ export default defineComponent({
isLoading.value = true
await Promise.all(searchableGroups.map(async (group) => {
// @ts-ignore
searchResults.value[group.key] = await group.search(query.value)
}))

16
src/runtime/components/navigation/Pagination.vue
View File

@@ -6,7 +6,7 @@
:size="size"
:disabled="!canGoFirstOrPrev"
:class="[ui.base, ui.rounded]"
v-bind="{ ...ui.default.firstButton, ...firstButton }"
v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
:ui="{ rounded: '' }"
aria-label="First"
@click="onClickFirst"
@@ -19,7 +19,7 @@
:size="size"
:disabled="!canGoFirstOrPrev"
:class="[ui.base, ui.rounded]"
v-bind="{ ...ui.default.prevButton, ...prevButton }"
v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
:ui="{ rounded: '' }"
aria-label="Prev"
@click="onClickPrev"
@@ -31,7 +31,7 @@
:key="`${page}-${index}`"
:size="size"
:label="`${page}`"
v-bind="page === currentPage ? { ...ui.default.activeButton, ...activeButton } : { ...ui.default.inactiveButton, ...inactiveButton }"
v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }"
:class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
:ui="{ rounded: '' }"
@click="() => onClickPage(page)"
@@ -43,7 +43,7 @@
:size="size"
:disabled="!canGoLastOrNext"
:class="[ui.base, ui.rounded]"
v-bind="{ ...ui.default.nextButton, ...nextButton }"
v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
:ui="{ rounded: '' }"
aria-label="Next"
@click="onClickNext"
@@ -56,7 +56,7 @@
:size="size"
:disabled="!canGoLastOrNext"
:class="[ui.base, ui.rounded]"
v-bind="{ ...ui.default.lastButton, ...lastButton }"
v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
:ui="{ rounded: '' }"
aria-label="Last"
@click="onClickLast"
@@ -150,11 +150,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue'],

23
src/runtime/components/navigation/Tabs.vue
View File

@@ -91,11 +91,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'change'],
@@ -106,33 +106,37 @@ export default defineComponent({
const itemRefs = ref<HTMLElement[]>([])
const markerRef = ref<HTMLElement>()
const selectedIndex = ref(props.modelValue || props.defaultIndex)
const selectedIndex = ref<number | undefined>(props.modelValue || props.defaultIndex)
// Methods
function calcMarkerSize (index: number) {
function calcMarkerSize (index: number | undefined) {
// @ts-ignore
const tab = itemRefs.value[index]?.$el
if (!tab) {
return
}
if (!markerRef.value) {
return
}
markerRef.value.style.top = `${tab.offsetTop}px`
markerRef.value.style.left = `${tab.offsetLeft}px`
markerRef.value.style.width = `${tab.offsetWidth}px`
markerRef.value.style.height = `${tab.offsetHeight}px`
}
function onChange (index) {
function onChange (index: number) {
selectedIndex.value = index
emit('change', index)
if (props.modelValue !== undefined) {
emit('update:modelValue', index)
emit('update:modelValue', selectedIndex.value)
}
calcMarkerSize(index)
calcMarkerSize(selectedIndex.value)
}
useResizeObserver(listRef, () => {
@@ -141,7 +145,8 @@ export default defineComponent({
watch(() => props.modelValue, (value) => {
selectedIndex.value = value
calcMarkerSize(value)
calcMarkerSize(selectedIndex.value)
})
onMounted(() => calcMarkerSize(selectedIndex.value))

6
src/runtime/components/navigation/VerticalNavigation.vue
View File

@@ -66,11 +66,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

6
src/runtime/components/overlays/ContextMenu.vue
View File

@@ -45,11 +45,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'close'],

6
src/runtime/components/overlays/Modal.vue
View File

@@ -77,11 +77,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'close'],

12
src/runtime/components/overlays/Notification.vue
View File

@@ -25,15 +25,15 @@
</p>
<div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
</div>
</div>
<div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
<template v-if="!description && !$slots.description && actions.length">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
</template>
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="onClose" />
</div>
</div>
<div v-if="timeout" :class="progressClass" :style="progressStyle" />
@@ -112,11 +112,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['close'],

6
src/runtime/components/overlays/Notifications.vue
View File

@@ -43,11 +43,11 @@ export default defineComponent({
props: {
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

6
src/runtime/components/overlays/Popover.vue
View File

@@ -86,11 +86,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:open'],

6
src/runtime/components/overlays/Slideover.vue
View File

@@ -63,11 +63,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'close'],

8
src/runtime/components/overlays/Tooltip.vue
View File

@@ -13,7 +13,7 @@
<slot name="text">
{{ text }}
</slot>
<span v-if="shortcuts?.length" :class="ui.shortcuts">
<span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
<UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
@@ -74,11 +74,11 @@ export default defineComponent({
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
setup (props) {

2
src/runtime/composables/defineShortcuts.ts
View File

@@ -40,7 +40,7 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
let shortcuts: Shortcut[] = []
const chainedInputs = ref([])
const chainedInputs = ref<string[]>([])
const clearChainedInput = () => {
chainedInputs.value.splice(0, chainedInputs.value.length)
}

12
src/runtime/composables/useFormGroup.ts
View File

@@ -4,7 +4,7 @@ import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/
import { uid } from '../utils/uid'
type InputProps = {
id?: string | null
id?: string
size?: string | number | symbol
color?: string
name?: string
@@ -20,7 +20,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
const inputId = ref(inputProps?.id)
onMounted(() => {
inputId.value = inputProps?.isFieldset ? null : inputProps?.id ?? uid()
inputId.value = inputProps?.isFieldset ? undefined : inputProps?.id ?? uid()
if (formGroup) {
// Updates for="..." attribute on label if inputProps.id is provided
@@ -41,17 +41,17 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
}
function emitFormBlur () {
emitFormEvent('blur', formGroup?.name.value)
emitFormEvent('blur', formGroup?.name.value as string)
blurred.value = true
}
function emitFormChange () {
emitFormEvent('change', formGroup?.name.value)
emitFormEvent('change', formGroup?.name.value as string)
}
const emitFormInput = useDebounceFn(() => {
if (blurred.value || formGroup?.eagerValidation.value) {
emitFormEvent('input', formGroup?.name.value)
emitFormEvent('input', formGroup?.name.value as string)
}
}, 300)
@@ -59,7 +59,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
inputId,
name: computed(() => inputProps?.name ?? formGroup?.name.value),
size: computed(() => {
const formGroupSize = config.size[formGroup?.size.value] ? formGroup?.size.value : null
const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null
return inputProps?.size ?? formGroupSize ?? config?.default?.size
}),
color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color),

2
src/runtime/composables/useUI.ts
View File

@@ -4,7 +4,7 @@ import { useAppConfig } from '#imports'
import { mergeConfig, omit, get } from '../utils'
import type { Strategy } from '../types'
export const useUI = <T>(key, $ui?: Ref<Partial<T & { strategy?: Strategy }> | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
export const useUI = <T>(key, $ui?: Ref<Partial<T> & { strategy?: Strategy }>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
const $attrs = useAttrs()
const appConfig = useAppConfig()

2
src/runtime/types/breadcrumb.d.ts vendored
View File

@@ -4,4 +4,6 @@ export interface BreadcrumbLink extends Link {
label: string
icon?: string
iconClass?: string
// FIXME: This is a workaround for `link.to` not being resolved although it extends `NuxtLinkProps`
[key: string]: any
}

2
src/runtime/types/form.d.ts vendored
View File

@@ -31,6 +31,6 @@ export interface InjectedFormGroupValue {
inputId: Ref<string | undefined>
name: Ref<string>
size: Ref<string | number | symbol>
error: Ref<string | boolean>
error: Ref<string | boolean | undefined>
eagerValidation: Ref<boolean>
}

6
src/runtime/ui.config/data/table.ts
View File

@@ -43,8 +43,8 @@ export default {
icon: 'i-heroicons-arrows-up-down-20-solid',
trailing: true,
square: true,
color: 'gray',
variant: 'ghost',
color: 'gray' as const,
variant: 'ghost' as const,
class: '-m-1.5'
},
loadingState: {
@@ -56,4 +56,4 @@ export default {
label: 'No items.'
}
}
}
}

4
src/runtime/ui.config/elements/accordion.ts
View File

@@ -15,6 +15,6 @@ export default {
openIcon: 'i-heroicons-chevron-down-20-solid',
closeIcon: '',
class: 'mb-1.5 w-full',
variant: 'soft'
variant: 'soft' as const
}
}
}

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

@@ -12,7 +12,7 @@ export default {
},
avatar: {
base: 'flex-shrink-0 self-center',
size: 'md'
size: 'md' as const
},
color: {
white: {
@@ -31,9 +31,9 @@ export default {
icon: null,
closeButton: null,
actionButton: {
size: 'xs',
color: 'primary',
variant: 'link'
size: 'xs' as const,
color: 'primary' as const,
variant: 'link' as const
}
}
}
}

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

@@ -27,7 +27,7 @@ export default {
},
avatar: {
base: 'flex-shrink-0',
size: '3xs'
size: '3xs' as const
},
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
},
@@ -49,4 +49,4 @@ export default {
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
background: 'before:bg-white dark:before:bg-gray-700'
}
}
}

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

@@ -35,7 +35,7 @@ export default {
},
avatar: {
base: 'flex-shrink-0',
size: '3xs'
size: '3xs' as const
},
chip: {
base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
@@ -59,4 +59,4 @@ export default {
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
background: 'before:bg-white dark:before:bg-gray-700'
}
}
}

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

@@ -23,7 +23,7 @@ export default {
},
avatar: {
base: 'flex-shrink-0',
size: '2xs'
size: '2xs' as const
},
label: 'text-sm'
}
}

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

@@ -64,4 +64,4 @@ export default {
closeButton: null,
selectedIcon: 'i-heroicons-check-20-solid'
}
}
}

14
src/runtime/ui.config/navigation/pagination.ts
View File

@@ -5,30 +5,30 @@ export default {
default: {
size: 'sm',
activeButton: {
color: 'primary'
color: 'primary' as const
},
inactiveButton: {
color: 'white'
color: 'white' as const
},
firstButton: {
color: 'white',
color: 'white' as const,
class: 'rtl:[&_span:first-child]:rotate-180',
icon: 'i-heroicons-chevron-double-left-20-solid'
},
lastButton: {
color: 'white',
color: 'white' as const,
class: 'rtl:[&_span:last-child]:rotate-180',
icon: 'i-heroicons-chevron-double-right-20-solid'
},
prevButton: {
color: 'white',
color: 'white' as const,
class: 'rtl:[&_span:first-child]:rotate-180',
icon: 'i-heroicons-chevron-left-20-solid'
},
nextButton: {
color: 'white',
color: 'white' as const,
class: 'rtl:[&_span:last-child]:rotate-180',
icon: 'i-heroicons-chevron-right-20-solid'
}
}
}
}

4
src/runtime/ui.config/navigation/verticalNavigation.ts
View File

@@ -17,11 +17,11 @@ export default {
},
avatar: {
base: 'flex-shrink-0',
size: '3xs'
size: '3xs' as const
},
badge: {
base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
active: 'bg-white dark:bg-gray-900',
inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
}
}
}

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

@@ -37,13 +37,13 @@ export default {
timeout: 5000,
closeButton: {
icon: 'i-heroicons-x-mark-20-solid',
color: 'gray',
variant: 'link',
color: 'gray' as const,
variant: 'link' as const,
padded: false
},
actionButton: {
size: 'xs',
color: 'white'
size: 'xs' as const,
color: 'white' as const
}
}
}
}