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

feat(FormGroup): add slots (#714)

Browse Source 
Co-authored-by: Romain Hamel <rom.hml@gmail.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: saveliy <savelii.moshkota@ext.jumingo.com>
This commit is contained in:
Levy
2023-09-28 19:30:41 +03:00
committed by GitHub
parent ff9d51863e
commit 2fc938575d
3 changed files with 152 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,37 @@
<template>
<div :class="ui.wrapper" v-bind="attrs">
<div v-if="label" :class="[ui.label.wrapper, size]">
<label :for="inputId" :class="[ui.label.base, required ? ui.label.required : '']">{{ label }}</label>
<span v-if="hint" :class="[ui.hint]">{{ hint }}</span>
<div v-if="label || $slots.label" :class="[ui.label.wrapper, size]">
<label :for="inputId" :class="[ui.label.base, required ? ui.label.required : '']">
<slot v-if="$slots.label" name="label" v-bind="{ error, label, name, hint, description, help }" />
<template v-else>{{ label }}</template>
</label>
<span v-if="hint || $slots.hint" :class="[ui.hint]">
<slot v-if="$slots.hint" name="hint" v-bind="{ error, label, name, hint, description, help }" />
<template v-else>{{ hint }}</template>
</span>
</div>
<p v-if="description" :class="[ui.description, size]">
{{ description }}
<p v-if="description || $slots.description" :class="[ui.description, size]">
<slot v-if="$slots.description" name="description" v-bind="{ error, label, name, hint, description, help }" />
<template v-else>
{{ description }}
</template>
</p>
<div :class="[label ? ui.container : '']">
<slot v-bind="{ error }" />
<p v-if="typeof error === 'string' && error" :class="[ui.error, size]">
{{ error }}
<p v-if="(typeof error === 'string' && error) || $slots.error" :class="[ui.error, size]">
<slot v-if="$slots.error" name="error" v-bind="{ error, label, name, hint, description, help }" />
<template v-else>
{{ error }}
</template>
</p>
<p v-else-if="help" :class="[ui.help, size]">
{{ help }}
<p v-else-if="help || $slots.help" :class="[ui.help, size]">
<slot v-if="$slots.help" name="help" v-bind="{ error, label, name, hint, description, help }" />
<template v-else>
{{ help }}
</template>
</p>
</div>
</div>