<template>
  <div>
    <div class="kole-densw">
      <button
        v-for="o in options"
        :key="o.value"
        class="kole-densw-opt"
        :class="{ 'is-active': modelValue === o.value }"
        @click="emit('update:modelValue', o.value)"
      >{{ o.label }}</button>
    </div>
    <div class="kole-densw-demo" :class="modelValue">
      <div v-for="(r, i) in rows" :key="i" class="kole-densw-row"><span>{{ r.name }}</span><span class="muted">{{ r.count }}</span></div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  modelValue: { type: String, default: 'default' },
  options: {
    type: Array,
    default: () => [
      { value: 'loose', label: '宽松' },
      { value: 'default', label: '默认' },
      { value: 'compact', label: '紧凑' }
    ]
  },
  rows: {
    type: Array,
    default: () => [
      { name: '用户管理', count: '128 项' },
      { name: '角色管理', count: '12 项' },
      { name: '菜单管理', count: '36 项' }
    ]
  }
});
const emit = defineEmits(['update:modelValue']);
</script>

<style src="./DensitySwitcher.css"></style>
