<template>
<div class="unit-toggle">
<button
v-for="unit in units"
:key="unit"
type="button"
:class="{ active: modelValue === unit }"
:disabled="disabled"
@click="$emit('update:modelValue', unit)"
>
{{ unit }}
</button>
</div>
</template>
<script setup>
defineProps({
modelValue: {
type: String,
required: true
},
units: {
type: Array,
default: () => ['mm', 'px']
disabled: {
type: Boolean,
default: false
}
});
defineEmits(['update:modelValue']);
</script>