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

chore(FormGroup): wrap label & description to ease styling

Browse Source
This commit is contained in:
Benjamin Canac
2024-02-12 11:59:13 +01:00
parent 19d15b42f0
commit 7eba5b539a
2 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,24 @@
<template> <template>
<div :class="ui.wrapper" v-bind="attrs"> <div :class="ui.wrapper" v-bind="attrs">
<div v-if="label || $slots.label" :class="[ui.label.wrapper, size]"> <div :class="ui.inner">
<label :for="inputId" :class="[ui.label.base, required ? ui.label.required : '']"> <div v-if="label || $slots.label" :class="[ui.label.wrapper, size]">
<slot v-if="$slots.label" name="label" v-bind="{ error, label, name, hint, description, help }" /> <label :for="inputId" :class="[ui.label.base, required ? ui.label.required : '']">
<template v-else>{{ label }}</template> <slot v-if="$slots.label" name="label" v-bind="{ error, label, name, hint, description, help }" />
</label> <template v-else>{{ label }}</template>
<span v-if="hint || $slots.hint" :class="[ui.hint]"> </label>
<slot v-if="$slots.hint" name="hint" v-bind="{ error, label, name, hint, description, help }" /> <span v-if="hint || $slots.hint" :class="[ui.hint]">
<template v-else>{{ hint }}</template> <slot v-if="$slots.hint" name="hint" v-bind="{ error, label, name, hint, description, help }" />
</span> <template v-else>{{ hint }}</template>
</div> </span>
</div>
<p v-if="description || $slots.description" :class="[ui.description, size]"> <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 }" /> <slot v-if="$slots.description" name="description" v-bind="{ error, label, name, hint, description, help }" />
<template v-else> <template v-else>
{{ description }} {{ description }}
</template> </template>
</p> </p>
</div>
<div :class="[label ? ui.container : '']"> <div :class="[label ? ui.container : '']">
<slot v-bind="{ error }" /> <slot v-bind="{ error }" />

1
src/runtime/ui.config/forms/formGroup.ts
View File

@@ -1,5 +1,6 @@
export default { export default {
wrapper: '', wrapper: '',
inner: '',
label: { label: {
wrapper: 'flex content-center items-center justify-between', wrapper: 'flex content-center items-center justify-between',
base: 'block font-medium text-gray-700 dark:text-gray-200', base: 'block font-medium text-gray-700 dark:text-gray-200',