🎨 Harmony Picker

Vue 3 компонент для вибору гармонійних кольорів на HSV колі.
Побудований з використанням Konva та chroma.js.

✨ Можливості

• Малює HSV коло за допомогою Konva
• Підтримка v-model для зручного використання
• Автоматично обчислює тріадні кольори
• Легка інтеграція у Vue 3 проекти

🚀 Встановлення

npm install @s-shtogrin/colors-harmonious

або

yarn add @s-shtogrin/colors-harmonious

📦 Використання

<template>
  <div>
    <h1>Demo Harmony Picker</h1>
    <HarmonyPicker :rgb="rgb" v-model="harmony" />
    <div>
      <p>Вибрані кольори:</p>
      <div style="display:flex; gap:10px;">
        <div
          v-for="(c,i) in harmony.rgb"
          :key="i"
          :style="{width:'40px',height:'40px',background:c}"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import HarmonyPicker from "@s-shtogrin/colors-harmonious";

export default {
  components: { HarmonyPicker },
  data() {
    return {
      rgb: "#ff1122",
      harmony: {}, // { type:'triad', rgb:[] }
    };
  },
};
</script>

⚙️ Props

| Назва | Тип | За замовчуванням | Опис | | --------- | ------ | ---------------------------- | ---------------------------------- | | rgb | String | "#ff0000" | Початковий колір у форматі hex | | v-model | Object | { type: "triad", rgb: [] } | Об’єкт гармонії з масивом кольорів |

🛠 Технології

• Vue 3
• Konva — для Canvas-графіки
• chroma.js — для роботи з кольорами

📜 Ліцензія

MIT