chore(deps): migrate to eslint 9 (#2443)

This commit is contained in:
Benjamin Canac
2024-10-24 10:30:37 +02:00
committed by GitHub
parent b29fcd2650
commit cae4f0c4a8
177 changed files with 2034 additions and 1289 deletions

View File

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

View File

@@ -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
})) || []
}

View File

@@ -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])

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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

View File

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