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

feat(types): support custom values from app.config.ts (#863)

Browse Source
This commit is contained in:
Benjamin Canac
2023-11-17 18:48:50 +01:00
committed by GitHub
parent bcc46b87f5
commit 7339324355
26 changed files with 132 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,7 +42,7 @@ import { computed, defineComponent, provide, inject, ref, toRef } from 'vue'
import type { Ref, PropType } from 'vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { FormError, InjectedFormGroupValue, Strategy } from '../../types'
import type { FormError, InjectedFormGroupValue, FormGroupSize, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { formGroup } from '#ui/ui.config'
@@ -57,7 +57,7 @@ export default defineComponent({
default: null
},
size: {
type: String as PropType<keyof typeof config.size>,
type: String as PropType<FormGroupSize>,
default: null,
validator (value: string) {
return Object.keys(config.size).includes(value)

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

@@ -41,11 +41,10 @@ import { defu } from 'defu'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { mergeConfig, looseToNumber } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
import type { InputSize, InputColor, InputVariant, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { input } from '#ui/ui.config'
import colors from '#ui-colors'
const config = mergeConfig<typeof input>(appConfig.ui.strategy, appConfig.ui.input, input)
@@ -124,21 +123,21 @@ export default defineComponent({
default: true
},
size: {
type: String as PropType<keyof typeof config.size>,
type: String as PropType<InputSize>,
default: null,
validator (value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
type: String as PropType<InputColor>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
type: String as PropType<InputVariant>,
default: () => config.default.variant,
validator (value: string) {
return [
@@ -171,7 +170,7 @@ export default defineComponent({
const { emitFormBlur, emitFormInput, size, color, inputId, name } = useFormGroup(props, config)
const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }))
const input = ref<HTMLInputElement | null>(null)
const autoFocus = () => {

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

@@ -26,7 +26,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
import type { RangeSize, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { range } from '#ui/ui.config'
@@ -66,7 +66,7 @@ export default defineComponent({
default: 1
},
size: {
type: String as PropType<keyof typeof config.size>,
type: String as PropType<RangeSize>,
default: null,
validator (value: string) {
return Object.keys(config.size).includes(value)

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

@@ -61,11 +61,10 @@ import UIcon from '../elements/Icon.vue'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { mergeConfig, get } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { select } from '#ui/ui.config'
import colors from '#ui-colors'
const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
@@ -136,21 +135,21 @@ export default defineComponent({
default: () => []
},
size: {
type: String as PropType<keyof typeof config.size>,
type: String as PropType<SelectSize>,
default: null,
validator (value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
type: String as PropType<SelectColor>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
type: String as PropType<SelectVariant>,
default: () => config.default.variant,
validator (value: string) {
return [

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

@@ -86,17 +86,17 @@
aria-hidden="true"
/>
<span v-else-if="option.chip" :class="uiMenu.option.chip.base" :style="{ background: `#${option.chip}` }" />
<span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : option[optionAttribute] }}</span>
</slot>
</div>
<span v-if="selected" :class="[uiMenu.option.selectedIcon.wrapper, uiMenu.option.selectedIcon.padding]">
<UIcon :name="selectedIcon" :class="uiMenu.option.selectedIcon.base" aria-hidden="true" />
</span>
</li>
</component>
<component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
<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">
@@ -141,11 +141,10 @@ import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { useFormGroup } from '../../composables/useFormGroup'
import { mergeConfig } from '../../utils'
import type { PopperOptions, NestedKeyOf, Strategy } from '../../types'
import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { select, selectMenu } from '#ui/ui.config'
import colors from '#ui-colors'
const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
@@ -256,21 +255,21 @@ export default defineComponent({
default: true
},
size: {
type: String as PropType<keyof typeof config.size>,
type: String as PropType<SelectSize>,
default: null,
validator (value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
type: String as PropType<SelectColor>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
type: String as PropType<SelectVariant>,
default: () => config.default.variant,
validator (value: string) {
return [

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

@@ -27,11 +27,10 @@ import { defu } from 'defu'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { mergeConfig, looseToNumber } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { textarea } from '#ui/ui.config'
import colors from '#ui-colors'
const config = mergeConfig<typeof textarea>(appConfig.ui.strategy, appConfig.ui.textarea, textarea)
@@ -87,21 +86,21 @@ export default defineComponent({
default: true
},
size: {
type: String as PropType<keyof typeof config.size>,
type: String as PropType<TextareaSize>,
default: null,
validator (value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
type: String as PropType<TextareaColor>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
type: String as PropType<TextareaVariant>,
default: () => config.default.variant,
validator (value: string) {
return [
@@ -181,7 +180,7 @@ export default defineComponent({
const onInput = (event: InputEvent) => {
autoResize()
if (!modelModifiers.value.lazy) {
if (!modelModifiers.value.lazy) {
updateInput((event.target as HTMLInputElement).value)
}
}

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

@@ -27,7 +27,7 @@ import UIcon from '../elements/Icon.vue'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
import type { ToggleSize, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { toggle } from '#ui/ui.config'
@@ -78,7 +78,7 @@ export default defineComponent({
default: undefined
},
size: {
type: String as PropType<keyof typeof config.size>,
type: String as PropType<ToggleSize>,
default: config.default.size,
validator (value: string) {
return Object.keys(config.size).includes(value)