mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-17 05:28:09 +01:00
chore(deps): migrate to eslint 9 (#2443)
This commit is contained in:
@@ -40,7 +40,7 @@ import type { DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
import { checkbox } from '#ui/ui.config'
|
||||
import colors from '#ui-colors'
|
||||
import type colors from '#ui-colors'
|
||||
import { useId } from '#app'
|
||||
|
||||
const config = mergeConfig<typeof checkbox>(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox)
|
||||
@@ -87,7 +87,7 @@ export default defineComponent({
|
||||
color: {
|
||||
type: String as PropType<typeof colors[number]>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return appConfig.ui.colors.includes(value)
|
||||
}
|
||||
},
|
||||
@@ -105,17 +105,17 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup (props, { emit }) {
|
||||
setup(props, { emit }) {
|
||||
const { ui, attrs } = useUI('checkbox', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
const { emitFormChange, color, name, inputId: _inputId } = useFormGroup(props)
|
||||
const inputId = _inputId.value ?? useId()
|
||||
|
||||
const toggle = computed({
|
||||
get () {
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set (value) {
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -18,7 +18,7 @@ import type { FormError, FormEvent, FormEventType, FormSubmitEvent, FormErrorEve
|
||||
import { useId } from '#imports'
|
||||
|
||||
class FormException extends Error {
|
||||
constructor (message: string) {
|
||||
constructor(message: string) {
|
||||
super(message)
|
||||
this.message = message
|
||||
Object.setPrototypeOf(this, FormException.prototype)
|
||||
@@ -29,14 +29,14 @@ export default defineComponent({
|
||||
props: {
|
||||
schema: {
|
||||
type: [Object, Function] as
|
||||
| PropType<ZodSchema>
|
||||
| PropType<YupObjectSchema<any>>
|
||||
| PropType<JoiSchema>
|
||||
| PropType<ValibotSchema30 | ValibotSchemaAsync30>
|
||||
| PropType<ValibotSchema31 | ValibotSchemaAsync31>
|
||||
| PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>>
|
||||
| PropType<ValibotSchema | ValibotSchemaAsync>
|
||||
| PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>> | PropType<Struct<any, any>>,
|
||||
| PropType<ZodSchema>
|
||||
| PropType<YupObjectSchema<any>>
|
||||
| PropType<JoiSchema>
|
||||
| PropType<ValibotSchema30 | ValibotSchemaAsync30>
|
||||
| PropType<ValibotSchema31 | ValibotSchemaAsync31>
|
||||
| PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>>
|
||||
| PropType<ValibotSchema | ValibotSchemaAsync>
|
||||
| PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>> | PropType<Struct<any, any>>,
|
||||
default: undefined
|
||||
},
|
||||
state: {
|
||||
@@ -45,8 +45,8 @@ export default defineComponent({
|
||||
},
|
||||
validate: {
|
||||
type: Function as
|
||||
| PropType<(state: any) => Promise<FormError[]>>
|
||||
| PropType<(state: any) => FormError[]>,
|
||||
| PropType<(state: any) => Promise<FormError[]>>
|
||||
| PropType<(state: any) => FormError[]>,
|
||||
default: () => []
|
||||
},
|
||||
validateOn: {
|
||||
@@ -55,7 +55,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['submit', 'error'],
|
||||
setup (props, { expose, emit }) {
|
||||
setup(props, { expose, emit }) {
|
||||
const formId = useId()
|
||||
const bus = useEventBus<FormEvent>(`form-${formId}`)
|
||||
|
||||
@@ -77,7 +77,7 @@ export default defineComponent({
|
||||
const inputs = ref({})
|
||||
provide('form-inputs', inputs)
|
||||
|
||||
async function getErrors (): Promise<FormError[]> {
|
||||
async function getErrors(): Promise<FormError[]> {
|
||||
let errs = await props.validate(props.state)
|
||||
|
||||
if (props.schema) {
|
||||
@@ -99,7 +99,7 @@ export default defineComponent({
|
||||
return errs
|
||||
}
|
||||
|
||||
async function validate (path?: string | string[], opts: { silent?: boolean } = { silent: false }) {
|
||||
async function validate(path?: string | string[], opts: { silent?: boolean } = { silent: false }) {
|
||||
let paths = path
|
||||
|
||||
if (path && !Array.isArray(path)) {
|
||||
@@ -108,10 +108,10 @@ export default defineComponent({
|
||||
|
||||
if (paths) {
|
||||
const otherErrors = errors.value.filter(
|
||||
(error) => !paths.includes(error.path)
|
||||
error => !paths.includes(error.path)
|
||||
)
|
||||
const pathErrors = (await getErrors()).filter(
|
||||
(error) => paths.includes(error.path)
|
||||
error => paths.includes(error.path)
|
||||
)
|
||||
errors.value = otherErrors.concat(pathErrors)
|
||||
} else {
|
||||
@@ -129,7 +129,7 @@ export default defineComponent({
|
||||
return props.state
|
||||
}
|
||||
|
||||
async function onSubmit (payload: Event) {
|
||||
async function onSubmit(payload: Event) {
|
||||
const event = payload as FormSubmitEvent<any>
|
||||
try {
|
||||
if (props.validateOn?.includes('submit')) {
|
||||
@@ -144,7 +144,7 @@ export default defineComponent({
|
||||
|
||||
const errorEvent: FormErrorEvent = {
|
||||
...event,
|
||||
errors: errors.value.map((err) => ({
|
||||
errors: errors.value.map(err => ({
|
||||
...err,
|
||||
id: inputs.value[err.path]
|
||||
}))
|
||||
@@ -156,27 +156,27 @@ export default defineComponent({
|
||||
expose({
|
||||
validate,
|
||||
errors,
|
||||
setErrors (errs: FormError[], path?: string) {
|
||||
setErrors(errs: FormError[], path?: string) {
|
||||
if (path) {
|
||||
errors.value = errors.value.filter(
|
||||
(error) => error.path !== path
|
||||
error => error.path !== path
|
||||
).concat(errs)
|
||||
} else {
|
||||
errors.value = errs
|
||||
}
|
||||
},
|
||||
async submit () {
|
||||
async submit() {
|
||||
await onSubmit(new Event('submit'))
|
||||
},
|
||||
getErrors (path?: string) {
|
||||
getErrors(path?: string) {
|
||||
if (path) {
|
||||
return errors.value.filter((err) => err.path === path)
|
||||
return errors.value.filter(err => err.path === path)
|
||||
}
|
||||
return errors.value
|
||||
},
|
||||
clear (path?: string) {
|
||||
clear(path?: string) {
|
||||
if (path) {
|
||||
errors.value = errors.value.filter((err) => err.path !== path)
|
||||
errors.value = errors.value.filter(err => err.path !== path)
|
||||
} else {
|
||||
errors.value = []
|
||||
}
|
||||
@@ -190,24 +190,24 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
|
||||
function isYupSchema (schema: any): schema is YupObjectSchema<any> {
|
||||
function isYupSchema(schema: any): schema is YupObjectSchema<any> {
|
||||
return schema.validate && schema.__isYupSchema__
|
||||
}
|
||||
|
||||
function isYupError (error: any): error is YupError {
|
||||
function isYupError(error: any): error is YupError {
|
||||
return error.inner !== undefined
|
||||
}
|
||||
|
||||
function isSuperStructSchema (schema: any): schema is Struct<any, any> {
|
||||
function isSuperStructSchema(schema: any): schema is Struct<any, any> {
|
||||
return (
|
||||
'schema' in schema &&
|
||||
typeof schema.coercer === 'function' &&
|
||||
typeof schema.validator === 'function' &&
|
||||
typeof schema.refiner === 'function'
|
||||
'schema' in schema
|
||||
&& typeof schema.coercer === 'function'
|
||||
&& typeof schema.validator === 'function'
|
||||
&& typeof schema.refiner === 'function'
|
||||
)
|
||||
}
|
||||
|
||||
async function getYupErrors (
|
||||
async function getYupErrors(
|
||||
state: any,
|
||||
schema: YupObjectSchema<any>
|
||||
): Promise<FormError[]> {
|
||||
@@ -216,7 +216,7 @@ async function getYupErrors (
|
||||
return []
|
||||
} catch (error) {
|
||||
if (isYupError(error)) {
|
||||
return error.inner.map((issue) => ({
|
||||
return error.inner.map(issue => ({
|
||||
path: issue.path ?? '',
|
||||
message: issue.message
|
||||
}))
|
||||
@@ -226,15 +226,15 @@ async function getYupErrors (
|
||||
}
|
||||
}
|
||||
|
||||
function isZodSchema (schema: any): schema is ZodSchema {
|
||||
function isZodSchema(schema: any): schema is ZodSchema {
|
||||
return schema.parse !== undefined
|
||||
}
|
||||
|
||||
async function getSuperStructErrors (state: any, schema: Struct<any, any>): Promise<FormError[]> {
|
||||
async function getSuperStructErrors(state: any, schema: Struct<any, any>): Promise<FormError[]> {
|
||||
const [err] = schema.validate(state)
|
||||
if (err) {
|
||||
const errors = err.failures()
|
||||
return errors.map((error) => ({
|
||||
return errors.map(error => ({
|
||||
message: error.message,
|
||||
path: error.path.join('.')
|
||||
}))
|
||||
@@ -242,13 +242,13 @@ async function getSuperStructErrors (state: any, schema: Struct<any, any>): Prom
|
||||
return []
|
||||
}
|
||||
|
||||
async function getZodErrors (
|
||||
async function getZodErrors(
|
||||
state: any,
|
||||
schema: ZodSchema
|
||||
): Promise<FormError[]> {
|
||||
const result = await schema.safeParseAsync(state)
|
||||
if (result.success === false) {
|
||||
return result.error.issues.map((issue) => ({
|
||||
return result.error.issues.map(issue => ({
|
||||
path: issue.path.join('.'),
|
||||
message: issue.message
|
||||
}))
|
||||
@@ -256,15 +256,15 @@ async function getZodErrors (
|
||||
return []
|
||||
}
|
||||
|
||||
function isJoiSchema (schema: any): schema is JoiSchema {
|
||||
function isJoiSchema(schema: any): schema is JoiSchema {
|
||||
return schema.validateAsync !== undefined && schema.id !== undefined
|
||||
}
|
||||
|
||||
function isJoiError (error: any): error is JoiError {
|
||||
function isJoiError(error: any): error is JoiError {
|
||||
return error.isJoi === true
|
||||
}
|
||||
|
||||
async function getJoiErrors (
|
||||
async function getJoiErrors(
|
||||
state: any,
|
||||
schema: JoiSchema
|
||||
): Promise<FormError[]> {
|
||||
@@ -273,7 +273,7 @@ async function getJoiErrors (
|
||||
return []
|
||||
} catch (error) {
|
||||
if (isJoiError(error)) {
|
||||
return error.details.map((detail) => ({
|
||||
return error.details.map(detail => ({
|
||||
path: detail.path.join('.'),
|
||||
message: detail.message
|
||||
}))
|
||||
@@ -283,19 +283,18 @@ async function getJoiErrors (
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function isValibotSchema (schema: any): schema is ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> {
|
||||
function isValibotSchema(schema: any): schema is ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> {
|
||||
return '_parse' in schema || '_run' in schema || (typeof schema === 'function' && 'schema' in schema)
|
||||
}
|
||||
|
||||
async function getValibotError (
|
||||
async function getValibotError(
|
||||
state: any,
|
||||
schema: ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>
|
||||
): Promise<FormError[]> {
|
||||
const result = await ('_parse' in schema ? schema._parse(state) : '_run' in schema ? schema._run({ typed: false, value: state }, {}) : schema(state))
|
||||
return result.issues?.map((issue) => ({
|
||||
return result.issues?.map(issue => ({
|
||||
// We know that the key for a form schema is always a string or a number
|
||||
path: issue.path?.map((item) => item.key).join('.') || '',
|
||||
path: issue.path?.map(item => item.key).join('.') || '',
|
||||
message: issue.message
|
||||
})) || []
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@ export default defineComponent({
|
||||
size: {
|
||||
type: String as PropType<FormGroupSize>,
|
||||
default: null,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return Object.keys(config.size).includes(value)
|
||||
}
|
||||
},
|
||||
@@ -103,7 +103,7 @@ export default defineComponent({
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
setup(props) {
|
||||
const { ui, attrs } = useUI('formGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
|
||||
@@ -111,7 +111,7 @@ export default defineComponent({
|
||||
const error = computed(() => {
|
||||
return (props.error && typeof props.error === 'string') || typeof props.error === 'boolean'
|
||||
? props.error
|
||||
: formErrors?.value?.find((error) => error.path === props.name)?.message
|
||||
: formErrors?.value?.find(error => error.path === props.name)?.message
|
||||
})
|
||||
|
||||
const size = computed(() => ui.value.size[props.size ?? config.default.size])
|
||||
|
||||
@@ -34,8 +34,8 @@
|
||||
import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import { defu } from 'defu'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { mergeConfig, looseToNumber } from '../../utils'
|
||||
@@ -124,21 +124,21 @@ export default defineComponent({
|
||||
size: {
|
||||
type: String as PropType<InputSize>,
|
||||
default: null,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return Object.keys(config.size).includes(value)
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String as PropType<InputColor>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
type: String as PropType<InputVariant>,
|
||||
default: () => config.default.variant,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [
|
||||
...Object.keys(config.variant),
|
||||
...Object.values(config.color).flatMap(value => Object.keys(value))
|
||||
@@ -163,7 +163,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'blur', 'change'],
|
||||
setup (props, { emit, slots }) {
|
||||
setup(props, { emit, slots }) {
|
||||
const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
|
||||
@@ -184,7 +184,6 @@ export default defineComponent({
|
||||
|
||||
// Custom function to handle the v-model properties
|
||||
const updateInput = (value: string) => {
|
||||
|
||||
if (modelModifiers.value.trim) {
|
||||
value = value.trim()
|
||||
}
|
||||
|
||||
@@ -212,21 +212,21 @@ export default defineComponent({
|
||||
size: {
|
||||
type: String as PropType<InputSize>,
|
||||
default: null,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return Object.keys(config.size).includes(value)
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String as PropType<InputColor>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
type: String as PropType<InputVariant>,
|
||||
default: () => config.default.variant,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [
|
||||
...Object.keys(config.variant),
|
||||
...Object.values(config.color).flatMap(value => Object.keys(value))
|
||||
@@ -279,7 +279,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
|
||||
setup (props, { emit, slots }) {
|
||||
setup(props, { emit, slots }) {
|
||||
const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
const { ui: uiMenu } = useUI('inputMenu', toRef(props, 'uiMenu'), configMenu)
|
||||
|
||||
@@ -294,10 +294,10 @@ export default defineComponent({
|
||||
|
||||
const internalQuery = ref('')
|
||||
const query = computed({
|
||||
get () {
|
||||
get() {
|
||||
return props.query ?? internalQuery.value
|
||||
},
|
||||
set (value) {
|
||||
set(value) {
|
||||
internalQuery.value = value
|
||||
emit('update:query', value)
|
||||
}
|
||||
@@ -401,7 +401,7 @@ export default defineComponent({
|
||||
lazy: props.searchLazy
|
||||
})
|
||||
|
||||
function escapeRegExp (string: string) {
|
||||
function escapeRegExp(string: string) {
|
||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
|
||||
}
|
||||
|
||||
@@ -434,7 +434,7 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
|
||||
function onUpdate (value: any) {
|
||||
function onUpdate(value: any) {
|
||||
query.value = ''
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value)
|
||||
@@ -442,7 +442,7 @@ export default defineComponent({
|
||||
emitFormChange()
|
||||
}
|
||||
|
||||
function onQueryChange (event: any) {
|
||||
function onQueryChange(event: any) {
|
||||
query.value = event.target.value
|
||||
}
|
||||
|
||||
|
||||
@@ -39,7 +39,7 @@ import type { DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
import { radio } from '#ui/ui.config'
|
||||
import colors from '#ui-colors'
|
||||
import type colors from '#ui-colors'
|
||||
import { useId } from '#imports'
|
||||
|
||||
const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
|
||||
@@ -82,7 +82,7 @@ export default defineComponent({
|
||||
color: {
|
||||
type: String as PropType<typeof colors[number]>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return appConfig.ui.colors.includes(value)
|
||||
}
|
||||
},
|
||||
@@ -100,7 +100,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup (props, { emit }) {
|
||||
setup(props, { emit }) {
|
||||
const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
const inputId = props.id ?? useId()
|
||||
@@ -109,10 +109,10 @@ export default defineComponent({
|
||||
const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
|
||||
|
||||
const pick = computed({
|
||||
get () {
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set (value) {
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
if (!radioGroup) {
|
||||
emitFormChange()
|
||||
@@ -120,7 +120,7 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
|
||||
function onChange (event: Event) {
|
||||
function onChange(event: Event) {
|
||||
emit('change', (event.target as HTMLInputElement).value)
|
||||
}
|
||||
|
||||
|
||||
@@ -30,17 +30,17 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import URadio from './Radio.vue'
|
||||
import { computed, defineComponent, provide, toRef } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { mergeConfig, get } from '../../utils'
|
||||
import type { DeepPartial, Strategy } from '../../types/index'
|
||||
import URadio from './Radio.vue'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
import { radioGroup, radio } from '#ui/ui.config'
|
||||
import colors from '#ui-colors'
|
||||
import type colors from '#ui-colors'
|
||||
|
||||
const config = mergeConfig<typeof radioGroup>(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup)
|
||||
const configRadio = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
|
||||
@@ -82,7 +82,7 @@ export default defineComponent({
|
||||
color: {
|
||||
type: String as PropType<typeof colors[number]>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return appConfig.ui.colors.includes(value)
|
||||
}
|
||||
},
|
||||
@@ -100,7 +100,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup (props, { emit }) {
|
||||
setup(props, { emit }) {
|
||||
const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
const { ui: uiRadio } = useUI('radio', toRef(props, 'uiRadio'), configRadio)
|
||||
|
||||
@@ -152,7 +152,7 @@ export default defineComponent({
|
||||
uiRadio,
|
||||
attrs,
|
||||
normalizedOptions,
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
|
||||
onUpdate
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,14 +67,14 @@ export default defineComponent({
|
||||
size: {
|
||||
type: String as PropType<RangeSize>,
|
||||
default: null,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return Object.keys(config.size).includes(value)
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String as PropType<RangeColor>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return appConfig.ui.colors.includes(value)
|
||||
}
|
||||
},
|
||||
@@ -92,16 +92,16 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup (props, { emit }) {
|
||||
setup(props, { emit }) {
|
||||
const { ui, attrs } = useUI('range', toRef(props, 'ui'), config)
|
||||
|
||||
const { emitFormChange, inputId, color, size, name } = useFormGroup(props, config)
|
||||
|
||||
const value = computed({
|
||||
get () {
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set (value) {
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -137,21 +137,21 @@ export default defineComponent({
|
||||
size: {
|
||||
type: String as PropType<SelectSize>,
|
||||
default: null,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return Object.keys(config.size).includes(value)
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String as PropType<SelectColor>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
type: String as PropType<SelectVariant>,
|
||||
default: () => config.default.variant,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [
|
||||
...Object.keys(config.variant),
|
||||
...Object.values(config.color).flatMap(value => Object.keys(value))
|
||||
@@ -180,7 +180,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup (props, { emit, slots }) {
|
||||
setup(props, { emit, slots }) {
|
||||
const { ui, attrs } = useUI('select', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
|
||||
|
||||
@@ -280,21 +280,21 @@ export default defineComponent({
|
||||
size: {
|
||||
type: String as PropType<SelectSize>,
|
||||
default: null,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return Object.keys(config.size).includes(value)
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String as PropType<SelectColor>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
type: String as PropType<SelectVariant>,
|
||||
default: () => config.default.variant,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [
|
||||
...Object.keys(config.variant),
|
||||
...Object.values(config.color).flatMap(value => Object.keys(value))
|
||||
@@ -335,7 +335,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
|
||||
setup (props, { emit, slots }) {
|
||||
setup(props, { emit, slots }) {
|
||||
if (import.meta.dev && props.multiple && !Array.isArray(props.modelValue)) {
|
||||
console.warn(`[@nuxt/ui] The USelectMenu components needs to have a modelValue of type Array when using the multiple prop. Got '${typeof props.modelValue}' instead.`, props.modelValue)
|
||||
}
|
||||
@@ -354,10 +354,10 @@ export default defineComponent({
|
||||
|
||||
const internalQuery = ref('')
|
||||
const query = computed({
|
||||
get () {
|
||||
get() {
|
||||
return props.query ?? internalQuery.value
|
||||
},
|
||||
set (value) {
|
||||
set(value) {
|
||||
internalQuery.value = value
|
||||
emit('update:query', value)
|
||||
}
|
||||
@@ -485,7 +485,7 @@ export default defineComponent({
|
||||
lazy: props.searchableLazy
|
||||
})
|
||||
|
||||
function escapeRegExp (string: string) {
|
||||
function escapeRegExp(string: string) {
|
||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
|
||||
}
|
||||
|
||||
@@ -530,7 +530,7 @@ export default defineComponent({
|
||||
return ['string', 'number'].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value }
|
||||
})
|
||||
|
||||
function clearOnClose () {
|
||||
function clearOnClose() {
|
||||
if (props.clearSearchOnClose) {
|
||||
query.value = ''
|
||||
}
|
||||
@@ -546,13 +546,13 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
|
||||
function onUpdate (value: any) {
|
||||
function onUpdate(value: any) {
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value)
|
||||
emitFormChange()
|
||||
}
|
||||
|
||||
function onQueryChange (event: any) {
|
||||
function onQueryChange(event: any) {
|
||||
query.value = event.target.value
|
||||
}
|
||||
|
||||
|
||||
@@ -93,21 +93,21 @@ export default defineComponent({
|
||||
size: {
|
||||
type: String as PropType<TextareaSize>,
|
||||
default: null,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return Object.keys(config.size).includes(value)
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String as PropType<TextareaColor>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
type: String as PropType<TextareaVariant>,
|
||||
default: () => config.default.variant,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return [
|
||||
...Object.keys(config.variant),
|
||||
...Object.values(config.color).flatMap(value => Object.keys(value))
|
||||
@@ -132,7 +132,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'blur', 'change'],
|
||||
setup (props, { emit }) {
|
||||
setup(props, { emit }) {
|
||||
const { ui, attrs } = useUI('textarea', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
const { emitFormBlur, emitFormInput, inputId, color, size, name } = useFormGroup(props, config)
|
||||
@@ -158,10 +158,10 @@ export default defineComponent({
|
||||
textarea.value.style.overflow = 'hidden'
|
||||
|
||||
const styles = window.getComputedStyle(textarea.value)
|
||||
const paddingTop = parseInt(styles.paddingTop)
|
||||
const paddingBottom = parseInt(styles.paddingBottom)
|
||||
const paddingTop = Number.parseInt(styles.paddingTop)
|
||||
const paddingBottom = Number.parseInt(styles.paddingBottom)
|
||||
const padding = paddingTop + paddingBottom
|
||||
const lineHeight = parseInt(styles.lineHeight)
|
||||
const lineHeight = Number.parseInt(styles.lineHeight)
|
||||
const { scrollHeight } = textarea.value
|
||||
const newRows = (scrollHeight - padding) / lineHeight
|
||||
|
||||
|
||||
@@ -88,14 +88,14 @@ export default defineComponent({
|
||||
color: {
|
||||
type: String as PropType<ToggleColor>,
|
||||
default: () => config.default.color,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return appConfig.ui.colors.includes(value)
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: String as PropType<ToggleSize>,
|
||||
default: () => config.default.size,
|
||||
validator (value: string) {
|
||||
validator(value: string) {
|
||||
return Object.keys(config.size).includes(value)
|
||||
}
|
||||
},
|
||||
@@ -109,16 +109,16 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup (props, { emit }) {
|
||||
setup(props, { emit }) {
|
||||
const { ui, attrs } = useUI('toggle', toRef(props, 'ui'), config)
|
||||
|
||||
const { emitFormChange, color, inputId, name } = useFormGroup(props)
|
||||
|
||||
const active = computed({
|
||||
get () {
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set (value) {
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user