arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +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>
<div :class="ui.wrapper" v-bind="attrs">
<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>
<div :class="ui.inner">
<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 || $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>
<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>
<div :class="[label ? ui.container : '']">
<slot v-bind="{ error }" />

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

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