Agregar * a inputs de campos required via css
This commit is contained in:
parent
3ba4e56204
commit
e8fa564bc2
|
@ -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>
|
||||||
|
|
|
@ -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()"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue