66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { useAttrs } from "vue";
|
|
import DsFormField from "./DsFormField.vue";
|
|
import type { DsSelectOption } from "../../types";
|
|
|
|
defineOptions({ inheritAttrs: false });
|
|
const model = defineModel<string>({ default: "" });
|
|
const attrs = useAttrs();
|
|
withDefaults(
|
|
defineProps<{
|
|
options: DsSelectOption[];
|
|
id?: string;
|
|
name?: string;
|
|
label?: string;
|
|
description?: string;
|
|
error?: string;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
}>(),
|
|
{
|
|
id: undefined,
|
|
name: undefined,
|
|
label: undefined,
|
|
description: undefined,
|
|
error: undefined,
|
|
placeholder: "Selecciona una opción",
|
|
disabled: false,
|
|
required: false,
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<DsFormField
|
|
v-slot="field"
|
|
:id="id"
|
|
:label="label"
|
|
:description="description"
|
|
:error="error"
|
|
:required="required"
|
|
>
|
|
<select
|
|
v-bind="attrs"
|
|
:id="field.controlId"
|
|
v-model="model"
|
|
class="ds-control"
|
|
:name="name"
|
|
:disabled="disabled"
|
|
:required="required"
|
|
:aria-invalid="field.invalid || undefined"
|
|
:aria-describedby="field.describedBy"
|
|
>
|
|
<option value="" disabled>{{ placeholder }}</option>
|
|
<option
|
|
v-for="option in options"
|
|
:key="option.value"
|
|
:value="option.value"
|
|
:disabled="option.disabled"
|
|
>
|
|
{{ option.label }}
|
|
</option>
|
|
</select>
|
|
</DsFormField>
|
|
</template>
|