feat(stage-ui,ui): migrate to use dedicated ColorHueRange component

apps/stage-web/src/pages/settings/appearance/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Section } from '@proj-airi/stage-ui/components'
 import { useSettings } from '@proj-airi/stage-ui/stores'
+import { ColorHueRange } from '@proj-airi/ui'
 import { useDark } from '@vueuse/core'
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -84,12 +85,14 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions],
     transition="all ease-in-out duration-250"
   >
     <div
-      v-motion flex items-center
-      justify-between
+      v-motion
       :initial="{ opacity: 0, y: 10 }"
       :enter="{ opacity: 1, y: 0 }"
       :duration="250 + (5 * 10)"
       :delay="5 * 50"
+      flex
+      items-center
+      justify-between
       transition="all ease-in-out duration-250"
     >
       <span text-lg font-semibold>{{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.label') }}</span>
@@ -105,18 +108,15 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions],
         {{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.rgb-on.title') }}
       </label>
     </div>
-    <input
+    <ColorHueRange
       v-model="settings.themeColorsHue"
       v-motion
       :initial="{ opacity: 0, y: 10 }"
       :enter="{ opacity: 1, y: 0 }"
       :duration="250 + (6 * 10)"
       :delay="6 * 50"
-      transition="all ease-in-out duration-250"
-      type="range" min="0" max="360" step="0.01" class="theme-hue-slider"
       :disabled="settings.themeColorsHueDynamic"
-      :class="settings.themeColorsHueDynamic ? 'opacity-25 cursor-not-allowed' : 'cursor-pointer'"
-    >
+    />
     <div
       v-motion
       class="color-bar"
@@ -253,40 +253,6 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions],
 </template>
 
 <style scoped>
-.theme-hue-slider {
-  --at-apply: appearance-none h-10 rounded-lg;
-  background: linear-gradient(
-    to right,
-    oklch(85% 0.2 0),
-    oklch(85% 0.2 60),
-    oklch(85% 0.2 120),
-    oklch(85% 0.2 180),
-    oklch(85% 0.2 240),
-    oklch(85% 0.2 300),
-    oklch(85% 0.2 360)
-  );
-
-  &::-webkit-slider-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-      hover: bg-neutral-800 transition-colors duration-200;
-  }
-
-  .dark &::-webkit-slider-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-      hover: bg-neutral-300 transition-colors duration-200;
-  }
-
-  &::-moz-range-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-      hover: bg-neutral-800 transition-colors duration-200;
-  }
-
-  .dark &::-moz-range-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-      hover: bg-neutral-300 transition-colors duration-200;
-  }
-}
-
 .color-bar {
   --at-apply: flex of-hidden rounded-lg lh-10 text-center text-black;
 

packages/stage-ui/src/components/Form/Range/ColorHueRange.story.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ColorHueRange } from '@proj-airi/ui'
+import { ref } from 'vue'
+
+const minValue = ref(0)
+const midValue = ref(50)
+const maxValue = ref(100)
+</script>
+
+<template>
+  <Story title="Color Hue Range" group="form" :layout="{ type: 'grid', width: '100%' }">
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant id="default-min" title="Default (min)">
+      <div p-4>
+        <ColorHueRange v-model="minValue" w-full />
+      </div>
+    </Variant>
+
+    <Variant id="default-mid" title="Default (mid)">
+      <div p-4>
+        <ColorHueRange v-model="midValue" w-full />
+      </div>
+    </Variant>
+
+    <Variant id="default-max" title="Default (max)">
+      <div p-4>
+        <ColorHueRange v-model="maxValue" w-full />
+      </div>
+    </Variant>
+  </Story>
+</template>

packages/ui/src/components/Form/Range/ColorHueRange.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const props = defineProps<{
+  disabled?: boolean
+  class?: string
+}>()
+
+const colorValue = defineModel<string>('colorValue', {
+  type: String,
+  default: '',
+})
+</script>
+
+<template>
+  <input
+    v-model="colorValue"
+    type="range" min="0" max="360" step="0.01"
+    class="color-hue-range"
+    transition="all ease-in-out duration-250"
+    :disabled="props.disabled"
+    :class="[
+      props.disabled ? 'opacity-25 cursor-not-allowed' : 'cursor-pointer',
+      props.class || '',
+    ]"
+  >
+</template>
+
+<style scoped>
+.color-hue-range {
+  --at-apply: appearance-none h-10 rounded-lg;
+  background: linear-gradient(
+    to right,
+    oklch(85% 0.2 0),
+    oklch(85% 0.2 60),
+    oklch(85% 0.2 120),
+    oklch(85% 0.2 180),
+    oklch(85% 0.2 240),
+    oklch(85% 0.2 300),
+    oklch(85% 0.2 360)
+  );
+
+  &::-webkit-slider-thumb {
+    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+      hover: bg-neutral-800 transition-colors duration-200;
+  }
+
+  .dark &::-webkit-slider-thumb {
+    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+      hover: bg-neutral-300 transition-colors duration-200;
+  }
+
+  &::-moz-range-thumb {
+    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+      hover: bg-neutral-800 transition-colors duration-200;
+  }
+
+  .dark &::-moz-range-thumb {
+    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+      hover: bg-neutral-300 transition-colors duration-200;
+  }
+}
+</style>

packages/ui/src/components/Form/Range/index.ts

@@ -1 +1,2 @@
+export { default as ColorHueRange } from './ColorHueRange.vue'
 export { default as Range } from './Range.vue'