37 lines
1.0 KiB
Vue
37 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div class="space-y-1.5">
|
||
|
|
<label v-if="label" :for="id" class="block text-sm font-medium text-muted">
|
||
|
|
{{ label }}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
:id="id"
|
||
|
|
:value="modelValue"
|
||
|
|
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
|
||
|
|
:class="ltr ? 'text-left' : ''"
|
||
|
|
@change="onChange"
|
||
|
|
>
|
||
|
|
<option v-if="placeholder" disabled value="">{{ placeholder }}</option>
|
||
|
|
<option v-for="opt in options" :key="opt.value" :value="opt.value">
|
||
|
|
{{ opt.label }}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
label?: string;
|
||
|
|
id?: string;
|
||
|
|
modelValue: string;
|
||
|
|
options: { value: string; label: string }[];
|
||
|
|
placeholder?: string;
|
||
|
|
ltr?: boolean;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
|
||
|
|
|
||
|
|
function onChange(e: Event) {
|
||
|
|
emit('update:modelValue', (e.target as HTMLSelectElement).value);
|
||
|
|
}
|
||
|
|
</script>
|