From b7382f2057a2704310d9f5355719b7ecdfacf96b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 21 Aug 2024 16:12:38 +0200
Subject: [PATCH] docs(header): add color picker

---
 docs/app/components/Header.vue                |  2 +-
 .../components/color-picker/ColorPicker.vue   | 62 +++++++++++++++++++
 .../color-picker/ColorPickerPill.vue          | 24 +++++++
 docs/app/plugins/colors.ts                    | 38 ++++++++++++
 4 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/components/color-picker/ColorPicker.vue
 create mode 100644 docs/app/components/color-picker/ColorPickerPill.vue
 create mode 100644 docs/app/plugins/colors.ts

diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index ce3f37e5..eaee443c 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -32,7 +32,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
     <!-- <UNavigationMenu :items="items" variant="link" /> -->
 
     <template #right>
-      <!-- <ColorPicker /> -->
+      <ColorPicker />
 
       <UTooltip text="Search" :kbds="['meta', 'K']">
         <UContentSearchButton />
diff --git a/docs/app/components/color-picker/ColorPicker.vue b/docs/app/components/color-picker/ColorPicker.vue
new file mode 100644
index 00000000..87864b84
--- /dev/null
+++ b/docs/app/components/color-picker/ColorPicker.vue
@@ -0,0 +1,62 @@
+<template>
+  <UPopover mode="hover" :ui="{ content: 'p-2' }">
+    <template #default="{ open }">
+      <UButton
+        icon="i-heroicons-swatch-20-solid"
+        color="gray"
+        :variant="open ? 'soft' : 'ghost'"
+        square
+        aria-label="Color picker"
+        :ui="{ leadingIcon: 'text-primary-500 dark:text-primary-400' }"
+      />
+    </template>
+
+    <template #content>
+      <fieldset class="grid grid-cols-5 gap-px">
+        <legend class="text-[11px] font-bold mb-1">
+          Primary
+        </legend>
+
+        <ColorPickerPill v-for="color in primaryColors" :key="color" :color="color" :selected="primary" @select="primary = color" />
+      </fieldset>
+
+      <hr class="border-gray-200 dark:border-gray-800 my-2">
+
+      <fieldset class="grid grid-cols-5 gap-px">
+        <legend class="text-[11px] font-bold mb-1">
+          Gray
+        </legend>
+
+        <ColorPickerPill v-for="color in grayColors" :key="color" :color="color" :selected="gray" @select="gray = color" />
+      </fieldset>
+    </template>
+  </UPopover>
+</template>
+
+<script setup lang="ts">
+const appConfig = useAppConfig()
+
+// Computed
+
+const primaryColors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+const primary = computed({
+  get() {
+    return appConfig.ui.colors.primary
+  },
+  set(option) {
+    appConfig.ui.colors.primary = option
+    window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.colors.primary)
+  }
+})
+
+const grayColors = ['slate', 'cool', 'zinc', 'neutral', 'stone']
+const gray = computed({
+  get() {
+    return appConfig.ui.colors.gray
+  },
+  set(option) {
+    appConfig.ui.colors.gray = option
+    window.localStorage.setItem('nuxt-ui-gray', appConfig.ui.colors.gray)
+  }
+})
+</script>
diff --git a/docs/app/components/color-picker/ColorPickerPill.vue b/docs/app/components/color-picker/ColorPickerPill.vue
new file mode 100644
index 00000000..7d9c72c7
--- /dev/null
+++ b/docs/app/components/color-picker/ColorPickerPill.vue
@@ -0,0 +1,24 @@
+<template>
+  <UTooltip :text="color" class="capitalize" :portal="false">
+    <UButton
+      color="gray"
+      square
+      :variant="color === selected ? 'soft' : 'ghost'"
+      @click.stop.prevent="$emit('select')"
+    >
+      <span
+        class="inline-block w-3 h-3 rounded-full"
+        :class="`bg-[--color-light] dark:bg-[--color-dark]`"
+        :style="{
+          '--color-light': `var(--color-${color}-500)`,
+          '--color-dark': `var(--color-${color}-400)`
+        }"
+      />
+    </UButton>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+defineProps<{ color: string, selected: string }>()
+defineEmits(['select'])
+</script>
diff --git a/docs/app/plugins/colors.ts b/docs/app/plugins/colors.ts
new file mode 100644
index 00000000..56b02d72
--- /dev/null
+++ b/docs/app/plugins/colors.ts
@@ -0,0 +1,38 @@
+export default defineNuxtPlugin({
+  enforce: 'post',
+  setup() {
+    const appConfig = useAppConfig()
+
+    if (import.meta.client) {
+      if (window.localStorage.getItem('nuxt-ui-primary')) {
+        appConfig.ui.colors.primary = window.localStorage.getItem('nuxt-ui-primary')
+      }
+      if (window.localStorage.getItem('nuxt-ui-gray')) {
+        appConfig.ui.colors.gray = window.localStorage.getItem('nuxt-ui-gray')
+      }
+    }
+
+    if (import.meta.server) {
+      useHead({
+        script: [
+          {
+            innerHTML: `
+            let html = document.querySelector('style#nuxt-ui-colors').innerHTML;
+
+            if (localStorage.getItem('nuxt-ui-primary')) {
+              html = html.replaceAll('${appConfig.ui.colors.primary}', localStorage.getItem('nuxt-ui-primary'))
+            }
+            if (localStorage.getItem('nuxt-ui-gray')) {
+              html = html.replaceAll('${appConfig.ui.colors.gray}', localStorage.getItem('nuxt-ui-gray'))
+            }
+
+            document.querySelector('style#nuxt-ui-colors').innerHTML = html
+            `.replace(/\s+/g, ' '),
+            type: 'text/javascript',
+            tagPriority: -1
+          }
+        ]
+      })
+    }
+  }
+})