<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import CCSelect from '../CCSelect.vue'

const path = ref('')
// const options = [
//   '肉肉肉肉肉肉肉肉肉肉肉肉肉肉肉肉',
//   '野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜',
//   '魚',
//   '果物',
//   'その他',
// ]
const options = [
  { label: '肉', value: 1, furigana: 'にく' },
  { label: '野菜', value: 2, furigana: 'やさい' },
  { label: '魚', value: 3, furigana: 'さかな' },
  { label: '果物', value: 4, furigana: 'くだもの' },
  { label: 'その他', value: 5, furigana: 'そのた' },
]
</script>

<template>
  <div class="page">
    <CCSelect class="_navi" v-model="path" :options="options" />
    {{ options }}
  </div>
  <div>ふりがなオプションを適応させた場合に順番を50音順にソート</div>
  <div>Your select value is {{ path }}</div>
</template>

<style scoped>
.page {
  padding: 20px;
  background-color: #f0f0f0;
}
</style>
