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

fix(components): ui prop override with class (#136)

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-03 14:35:58 +02:00
committed by GitHub
parent 5a22c62b2a
commit 235556d3e0
50 changed files with 383 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/runtime/components/Switch.vue
View File

@@ -68,7 +68,7 @@ const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value')
const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SwitchProps>(props)
const id = _id.value ?? useId()
const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
const ui = computed(() => switchTv({
size: size.value,
color: color.value,
required: props.required,
@@ -87,7 +87,7 @@ function onUpdate(value: any) {
<template>
<div :class="ui.root({ class: props.class })">
<div :class="ui.container()">
<div :class="ui.container({ class: props.ui?.container })">
<SwitchRoot
:id="id"
v-model:checked="modelValue"
@@ -95,25 +95,25 @@ function onUpdate(value: any) {
v-bind="rootProps"
:name="name"
:disabled="disabled || loading"
:class="ui.base()"
:class="ui.base({ class: props.ui?.base })"
@update:checked="onUpdate"
>
<SwitchThumb :class="ui.thumb()">
<UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ checked: true, unchecked: true })" />
<SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
<UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
<template v-else>
<UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ checked: true })" />
<UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ unchecked: true })" />
<UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
<UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
</template>
</SwitchThumb>
</SwitchRoot>
</div>
<div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper()">
<Label v-if="label || !!slots.label" :for="id" :class="ui.label()">
<div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
<Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
<slot name="label" :label="label">
{{ label }}
</slot>
</Label>
<p v-if="description || !!slots.description" :class="ui.description()">
<p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
<slot name="description" :description="description">
{{ description }}
</slot>