fix(nc-gui): lazy import slider color picker

packages/nc-gui/components/general/BaseIconColorPicker.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { Slider } from '@ckpack/vue-color'
 import tinycolor from 'tinycolor2'
 
 import { BASE_ICON_COLOR_HUE_DATA as preDefinedHueData } from '#imports'
@@ -122,7 +121,7 @@ watch(
                     ? `hsv(${preDefinedHueData[`_${colorRef.h}`].tint.h},${preDefinedHueData[`_${colorRef.h}`].tint.s}%, ${
                         preDefinedHueData[`_${colorRef.h}`].tint.v
                       }%)`
-                    : `hsv(${colorRef.h ?? defaultHueValue}, 30%, 100%)`,
+                    : `hsv(${colorRef.h ?? defaultHueValue}, 50%, 100%)`,
                 ).toHexString()
               "
             />
@@ -181,20 +180,14 @@ watch(
             <template #overlay>
               <div class="relative bg-white rounded-lg p-3 border-1 border-gray-200 shadow-lg flex flex-col space-y-4">
                 <div>{{ $t('labels.customHue') }}</div>
-
-                <Slider
+                
+                <LazyGeneralColorHueSliderWrapper
                   :model-value="colorRef"
-                  class="nc-hue-color-picker"
-                  :style="{
-                    ['--nc-hue-slider-pointer-color']: tinycolor(
-                      `hsv(${colorRef.h ?? defaultHueValue}, 100%, 100%)`,
-                    ).toHexString(),
-                  }"
                   @update:model-value="
                     (value) => {
-                      if (!value?.hsv?.h) return
+                      if (value?.h !== 0 && !value?.h) return
 
-                      colorRef.h = value.hsv.h
+                      colorRef.h = value.h
                     }
                   "
                 />

packages/nc-gui/components/general/ColorHueSliderWrapper.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { Slider } from '@ckpack/vue-color'
+import tinycolor from 'tinycolor2'
+
+interface Props {
+  modelValue?: any
+  mode?: 'hsl' | 'hsv'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({ h: 199, s: 0, v: 0 }),
+  mode: () => 'hsv',
+})
+
+const emit = defineEmits(['update:modelValue', 'input'])
+
+const picked = computed({
+  get: () => props.modelValue || { h: 199, s: 0, v: 0 },
+  set: (val) => {
+    emit('update:modelValue', val[props.mode] || null)
+    emit('input', val[props.mode] || null)
+  },
+})
+</script>
+
+<template>
+  <Slider
+    v-model="picked"
+    class="nc-hue-slider-wrapper min-w-[200px]"
+    :style="{
+      ['--nc-hue-slider-pointer-color']: tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(),
+    }"
+  />
+</template>
+
+<style lang="scss" scoped>
+.nc-hue-slider-wrapper {
+  &.vc-slider {
+    @apply !w-full;
+  }
+  :deep(.vc-slider-swatches) {
+    @apply hidden;
+  }
+
+  :deep(.vc-slider-hue-warp) {
+    @apply h-1.5;
+    .vc-hue {
+      @apply rounded-lg;
+    }
+    .vc-hue-pointer {
+      top: -3px !important;
+    }
+    .vc-hue-picker {
+      background-color: white;
+      box-shadow: 0 0 0 3px var(--nc-hue-slider-pointer-color) !important;
+    }
+  }
+}
+</style>