Agregar * a inputs de campos required via css

This commit is contained in:
William Buezas 2024-01-04 18:13:31 -03:00
parent 3ba4e56204
commit e8fa564bc2
4 changed files with 21 additions and 36 deletions

View File

@ -12,14 +12,6 @@ const $props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
label: {
type: String,
default: '',
},
required: {
type: Boolean,
default: false,
},
}); });
const value = computed({ const value = computed({
@ -47,8 +39,8 @@ const styleAttrs = computed(() => {
ref="vnInputRef" ref="vnInputRef"
v-model="value" v-model="value"
v-bind="{ ...$attrs, ...styleAttrs }" v-bind="{ ...$attrs, ...styleAttrs }"
:label="required ? label + ' *' : label"
type="text" type="text"
:class="{ required: $attrs.required }"
> >
<template v-if="$slots.prepend" #prepend> <template v-if="$slots.prepend" #prepend>
<slot name="prepend" /> <slot name="prepend" />
@ -58,3 +50,10 @@ const styleAttrs = computed(() => {
</template> </template>
</QInput> </QInput>
</template> </template>
<style lang="scss">
/* Estilo para el asterisco en campos requeridos */
.q-field.required .q-field__label:after {
content: ' *';
}
</style>

View File

@ -20,14 +20,6 @@ const $props = defineProps({
type: Array, type: Array,
default: () => ['developer'], default: () => ['developer'],
}, },
label: {
type: String,
default: '',
},
required: {
type: Boolean,
default: false,
},
}); });
const role = useRole(); const role = useRole();
@ -52,13 +44,7 @@ const toggleForm = () => {
</script> </script>
<template> <template>
<VnSelectFilter <VnSelectFilter v-model="value" :options="options" v-bind="$attrs">
v-model="value"
:options="options"
:label="label"
:required="required"
v-bind="$attrs"
>
<template v-if="isAllowedToCreate" #append> <template v-if="isAllowedToCreate" #append>
<QIcon <QIcon
@click.stop.prevent="toggleForm()" @click.stop.prevent="toggleForm()"

View File

@ -23,14 +23,6 @@ const $props = defineProps({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
label: {
type: String,
default: '',
},
required: {
type: Boolean,
default: false,
},
}); });
const { optionLabel } = toRefs($props); const { optionLabel } = toRefs($props);
@ -95,7 +87,7 @@ const value = computed({
hide-selected hide-selected
fill-input fill-input
ref="vnSelectRef" ref="vnSelectRef"
:label="required ? label + ' *' : label" :class="{ required: $attrs.required }"
> >
<template v-if="isClearable" #append> <template v-if="isClearable" #append>
<QIcon <QIcon
@ -110,3 +102,10 @@ const value = computed({
</template> </template>
</QSelect> </QSelect>
</template> </template>
<style lang="scss">
/* Estilo para el asterisco en campos requeridos */
.q-field.required .q-field__label:after {
content: ' *';
}
</style>

View File

@ -67,7 +67,7 @@ const companiesOptions = ref([]);
option-value="id" option-value="id"
option-label="nickname" option-label="nickname"
hide-selected hide-selected
required :required="true"
:rules="validate('entry.supplierFk')" :rules="validate('entry.supplierFk')"
> >
<template #option="scope"> <template #option="scope">
@ -92,7 +92,7 @@ const companiesOptions = ref([]);
option-label="warehouseInName" option-label="warehouseInName"
map-options map-options
hide-selected hide-selected
required :required="true"
:rules="validate('entry.travelFk')" :rules="validate('entry.travelFk')"
> >
<template #option="scope"> <template #option="scope">
@ -121,6 +121,7 @@ const companiesOptions = ref([]);
option-label="code" option-label="code"
map-options map-options
hide-selected hide-selected
:required="true"
:rules="validate('entry.companyFk')" :rules="validate('entry.companyFk')"
/> />
</VnRow> </VnRow>
@ -134,4 +135,4 @@ const companiesOptions = ref([]);
Supplier: Proveedor Supplier: Proveedor
Travel: Envío Travel: Envío
Company: Empresa Company: Empresa
</i18n> </i18n>