From f9b932042e8ee7c5fb132db9c912d23649b2b6b8 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 18 Mar 2025 13:32:54 -0400
Subject: [PATCH] Swatch picker component

---
 docs/_layouts/palette.njk                     | 10 +---
 docs/docs/palettes/app/tweak.js               |  2 +
 .../app/vue-components/color-swatch-picker.js | 56 +++++++++++++++++++
 3 files changed, 59 insertions(+), 9 deletions(-)
 create mode 100644 docs/docs/palettes/app/vue-components/color-swatch-picker.js

diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk
index c275f0162..2a6c80f10 100644
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -137,15 +137,7 @@
           </div>
           <template #content>
             <template v-if="hue === 'gray'">
-              <wa-radio-group class="core-color" orientation="horizontal" :value="computedGrayColor" @input="grayColor = $event.target.value">
-                <template v-for="h in hues">
-                  <wa-radio-button :id="'gray-undertone-' + h" :value="h" :label="capitalize(h)" :style="{'--color': `var(--wa-color-${ h })`}"></wa-radio-button>
-                  <wa-tooltip :for="'gray-undertone-' + h" hoist>{{ capitalize(h) }}</wa-tooltip>
-                </template>
-                <div slot="label">
-                  Gray undertone
-                </div>
-              </wa-radio-group>
+              <color-swatch-picker :model-value="computedGrayColor" @update:model-value="grayColor = $event" label="Gray undertone" :colors="coreColors"></color-swatch-picker>
 
               <color-slider coord="c" type="scale"
               :model-value="computedGrayChroma"
diff --git a/docs/docs/palettes/app/tweak.js b/docs/docs/palettes/app/tweak.js
index 03096bbe8..02c42eeeb 100644
--- a/docs/docs/palettes/app/tweak.js
+++ b/docs/docs/palettes/app/tweak.js
@@ -12,6 +12,7 @@ import ColorInput from './vue-components/color-input.js';
 import ColorPopup from './vue-components/color-popup.js';
 import ColorSelect from './vue-components/color-select.js';
 import ColorSlider from './vue-components/color-slider.js';
+import ColorSwatchPicker from './vue-components/color-swatch-picker.js';
 import InfoTip from './vue-components/info-tip.js';
 import Prism from '/assets/scripts/prism.js';
 import { Permalink } from '/assets/scripts/tweak.js';
@@ -987,6 +988,7 @@ let paletteAppSpec = {
     ColorInput,
     ColorSelect,
     ColorSlider,
+    ColorSwatchPicker,
     InfoTip,
   },
 
diff --git a/docs/docs/palettes/app/vue-components/color-swatch-picker.js b/docs/docs/palettes/app/vue-components/color-swatch-picker.js
new file mode 100644
index 000000000..b377b99b4
--- /dev/null
+++ b/docs/docs/palettes/app/vue-components/color-swatch-picker.js
@@ -0,0 +1,56 @@
+const template = `
+<wa-radio-group class="core-color" orientation="horizontal" :value="modelValue" @input="handleInput($event.target.value)">
+<template v-for="h in hues">
+	<info-tip>
+		<wa-radio-button :label="capitalize(h)" :value="h" :style="{'--color': colors[h]}"></wa-radio-button>
+		<template #content>{{ capitalize(h) }}</template>
+	</info-tip>
+</template>
+<div slot="label">{{ label }}</div>
+</wa-radio-group>
+`;
+
+import Color from 'https://colorjs.io/dist/color.js';
+import InfoTip from './info-tip.js';
+import { hues } from '/assets/scripts/tweak/data.js';
+import { capitalize, promise, roundTo } from '/assets/scripts/tweak/util.js';
+
+export default {
+  props: {
+    modelValue: String,
+    label: {
+      type: String,
+      default: 'Color',
+    },
+    colors: Object,
+  },
+  emits: ['update:modelValue', 'input'],
+  data() {
+    return {
+      defaultValue: this.modelValue,
+    };
+  },
+  created() {
+    Object.assign(this, { hues });
+  },
+  computed: {},
+  methods: {
+    capitalize,
+
+    /** Called when value changes due to user interaction */
+    handleInput(value) {
+      this.value = value;
+      this.$emit('input', value);
+      this.$emit('update:modelValue', value);
+    },
+
+    reset() {
+      this.handleInput(this.defaultValue);
+    },
+  },
+  template,
+  components: { InfoTip },
+  compilerOptions: {
+    isCustomElement: tag => tag.startsWith('wa-'),
+  },
+};