arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-18 05:58:07 +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

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)
)
})