■ 概要（overview）

コンポーネント名

• ColorField

レベル (Atomic Design)

• Atoms（原子）

カテゴリー（category）

• fields

■ データ（data）

【reactive/ref】

• selectedColor (string) - 選択された色

【props】

• id (string) - カラーフィールドのID
• class (string) - カラーフィールドのクラス
• name (string) - カラーフィールドの名前
• style (string) - カラーフィールドのスタイル
• styleReset (boolean) - スタイルリセットフラグ
• selectedColor (string) - 初期選択色

【emit】

• update:modelValue - カラーフィールドの色が変更されたときに発行されるイベント

【computed】

• bindingClass - styleResetがtrueの場合はprops.class、falseの場合はrevuekitz-color-field ${props.class}をクラス名としてセットする

■ 使用例（usecase）

<script setup>
import { ref } from 'vue'
import { ColorField } from 'revuekitz'
import 'revuekitz/dist/style.css' 

const selectedColor = ref('')
</script>

<template>
   <ColorField
    id="colorFieldId"
    class="color-field-class"
    style="border: 1px solid black"
    :styleReset="false"
    name="color_field_name"
    v-model="selectedColor"
  />
</template>