fix(site): Small adjustments color picker and add clear button search bar (#3851)

* Small adjustments * Format code * format code * Remove default value * format code * update yml file * Format code * Update docs/.vitepress/theme/components/base/Input.vue Co-authored-by: Karsa <contact@karsa.org> * Add extra check if null or undefined --------- Co-authored-by: Karsa <contact@karsa.org>
2025-12-14 20:17:40 +01:00 · 2025-12-12 09:25:39 +01:00
parent 124572c83b
commit 3b0d158ea1
13 changed files with 299 additions and 218 deletions
--- a/docs/.vitepress/lib/getFallbackZip.tsx
+++ b/docs/.vitepress/lib/getFallbackZip.tsx
@@ -1,5 +1,5 @@
 import { createLucideIcon } from 'lucide-react/src/lucide-react';
-import { type LucideProps, type IconNode } from 'lucide-react/src/createLucideIcon';
+import { type LucideProps, type IconNode } from 'lucide-react/src/types';
 import { IconEntity } from '../theme/types';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { IconContent } from './generateZip';
--- a/docs/.vitepress/theme/components/base/ColorPicker.vue
+++ b/docs/.vitepress/theme/components/base/ColorPicker.vue
@@ -1,23 +1,31 @@
 <script setup lang="ts">
+import { useData } from 'vitepress';
 import { computed } from 'vue';

 const props = defineProps<{
-  modelValue: string
-  id: string
-}>()
+  modelValue: string;
+  id: string;
+}>();

-const emit = defineEmits(['update:modelValue'])
+const { isDark } = useData();
+
+const emit = defineEmits(['update:modelValue']);

 const value = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+  get: () => {
+    if (props.modelValue == null || props.modelValue === 'currentColor') {
+      return isDark.value ? '#ffffff' : '#000000';
+    }
+
+    return props.modelValue;
+  },
+  set: (val) => emit('update:modelValue', val),
+});
 </script>

 <template>
  <div class="color-picker">
    <div class="color-input-wrapper">
-      <!-- TODO: Add currentColor div if value is currentColor -->
      <input
        type="color"
        :id="id"
@@ -33,6 +41,7 @@ const value = computed({
      class="color-input-text"
      aria-label="Color picker input"
      v-model="value"
+      placeholder="[default]"
    />
  </div>
 </template>
@@ -45,19 +54,21 @@ const value = computed({
  top: -5px;
  left: -5px;
 }
+
 .color-input-wrapper {
  height: 24px;
  width: 24px;
  overflow: hidden;
  position: relative;
-  border-radius: 12px;
+  border-radius: 4px;
  flex-shrink: 0;
 }
+
 .color-picker {
  background: var(--color-picker-bg, var(--vp-c-bg-alt));
  border-radius: 8px;
  color: var(--vp-c-text-2);
-  padding: 4px 8px;
+  padding: 3px 8px 3px 3px;
  height: auto;
  font-size: 14px;
  text-align: left;
@@ -66,6 +77,10 @@ const value = computed({
  display: flex;
  align-items: center;
  gap: 2px;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }

 .color-input-text {
@@ -79,15 +94,18 @@ const value = computed({
  text-align: left;
  border-radius: 8px;
  cursor: text;
-  transition: border-color 0.25s, background 0.4s ease;
+  transition:
+    border-color 0.25s,
+    background 0.4s ease;
+  letter-spacing: 1px;
 }

-.color-picker:hover, .color-picker:focus {
+.color-picker:hover,
+.color-picker:focus {
  border-color: var(--vp-c-brand);
  background: var(--vp-c-bg-alt);
 }

-.color-input[value="currentColor"] {
-
+.color-input[value='currentColor'] {
 }
 </style>
--- a/docs/.vitepress/theme/components/base/FakeInput.vue
+++ b/docs/.vitepress/theme/components/base/FakeInput.vue
@@ -1,22 +1,27 @@
 <script setup>
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
-import { search }  from '../../../data/iconNodes'
-
-const SearchIcon = createLucideIcon('search', search)
+import Icon from 'lucide-vue-next/src/Icon';
+import { search } from '../../../data/iconNodes';

 defineProps({
  shortcut: {
    type: String,
-    required: false
-  }
-})
+    required: false,
+  },
+});
 </script>

 <template>
  <button class="fake-input">
-    <component :is="SearchIcon" class="search-icon"/>
-    <slot/>
-    <kbd v-if="shortcut" class="shortcut">{{ shortcut }}</kbd>
+    <Icon
+      :iconNode="search"
+      class="search-icon"
+    />
+    <slot />
+    <kbd
+      v-if="shortcut"
+      class="shortcut"
+      >{{ shortcut }}</kbd
+    >
  </button>
 </template>

@@ -34,10 +39,14 @@ defineProps({
  cursor: text;
  display: flex;
  gap: 12px;
-  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }

-.fake-input:hover, .fake-input:focus {
+.fake-input:hover,
+.fake-input:focus {
  border-color: var(--vp-c-brand);
  background: var(--vp-c-bg-alt);
 }
--- a/docs/.vitepress/theme/components/base/IconButton.vue
+++ b/docs/.vitepress/theme/components/base/IconButton.vue
@@ -5,7 +5,6 @@
 </template>

 <style scoped>
-
 .icon-button {
  display: inline-flex;
  border: 1px solid transparent;
@@ -30,9 +29,9 @@
 }

 .icon-button:active {
-    border-color: var(--vp-button-alt-active-border);
-    color: var(--vp-button-alt-active-text);
-    background-color: var(--vp-button-alt-active-bg);
+  border-color: var(--vp-button-alt-active-border);
+  color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg);
 }

 .icon-button.active {
--- a/docs/.vitepress/theme/components/base/Input.vue
+++ b/docs/.vitepress/theme/components/base/Input.vue
@@ -1,60 +1,90 @@
 <script lang="ts">
 export default {
  inheritAttrs: false,
-}
+};

 export interface InputProps {
-  type: string
-  modelValue: string
-  shortcut?: string
+  type: string;
+  modelValue: string;
+  shortcut?: string;
 }
 </script>

 <script setup lang="ts">
-import { ref, onMounted, nextTick, watch } from 'vue'
+import { ref, onMounted, nextTick, watch } from 'vue';
+import Icon from 'lucide-vue-next/src/Icon';
+import { x } from '../../../data/iconNodes';
+import IconButton from './IconButton.vue';

 const props = withDefaults(defineProps<InputProps>(), {
-  type: 'text'
-})
+  type: 'text',
+});

-const input = ref()
-const wrapperEl = ref()
-const shortcutEl = ref()
+const input = ref();
+const wrapperEl = ref();
+const shortcutEl = ref();

-defineEmits(['change', 'input', 'update:modelValue'])
+const emit = defineEmits(['change', 'input', 'update:modelValue']);

 const updateShortcutSpacing = () => {
  nextTick(() => {
    if (shortcutEl.value && wrapperEl.value) {
-      const shortcutWidth = shortcutEl.value.offsetWidth
-      wrapperEl.value.style.setProperty('--shortcut-width', `${shortcutWidth}px`)
+      const shortcutWidth = shortcutEl.value.offsetWidth;
+      wrapperEl.value.style.setProperty('--shortcut-width', `${shortcutWidth}px`);
    }
-  })
-}
+  });
+};

-onMounted(updateShortcutSpacing)
-watch(() => props.shortcut, updateShortcutSpacing)
+onMounted(updateShortcutSpacing);
+watch(() => props.shortcut, updateShortcutSpacing);
+
+function onClear() {
+  emit('update:modelValue', '');
+  input.value.focus();
+}

 defineExpose({
  focus: () => {
-    input.value.focus()
-  }
-})
+    input.value.focus();
+  },
+});
 </script>

 <template>
-  <div class="input-wrapper" ref="wrapperEl">
-    <slot name="icon" class="icon" />
+  <div
+    class="input-wrapper"
+    ref="wrapperEl"
+  >
+    <slot
+      name="icon"
+      class="icon"
+    />
    <input
      :type="type"
      class="input"
-      :class="{'has-icon': $slots.icon, 'has-shortcut': shortcut}"
+      :class="{ 'has-icon': $slots.icon, 'has-shortcut': shortcut }"
      ref="input"
      :value="modelValue"
      v-bind="$attrs"
      @input="$emit('update:modelValue', $event.target.value)"
    />
-    <kbd v-if="shortcut" class="shortcut" ref="shortcutEl">{{ shortcut }}</kbd>
+    <IconButton
+      @click="onClear"
+      v-if="type === 'search' && modelValue"
+      class="clear-button"
+      aria-label="Clear input"
+    >
+      <Icon
+        :iconNode="x"
+        :size="20"
+      />
+    </IconButton>
+    <kbd
+      v-if="shortcut"
+      class="shortcut"
+      ref="shortcutEl"
+      >{{ shortcut }}</kbd
+    >
  </div>
 </template>

@@ -62,6 +92,7 @@ defineExpose({
 .input-wrapper {
  position: relative;
 }
+
 .input {
  justify-content: flex-start;
  border: 1px solid transparent;
@@ -71,13 +102,18 @@ defineExpose({
  height: 40px;
  background-color: var(--vp-c-bg-alt);
  font-size: 14px;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }

 .input.has-shortcut {
  padding-right: calc(var(--shortcut-width, 40px) + 22px);
 }

-.input:hover, .input:focus {
+.input:hover,
+.input:focus {
  border-color: var(--vp-c-brand);
  background: var(--vp-c-bg-alt);
 }
@@ -86,6 +122,14 @@ defineExpose({
  padding-left: 52px;
 }

+.clear-button {
+  position: absolute;
+  right: 56px;
+  top: 9px;
+  padding: 4px;
+  transition: background-color .25s;
+}
+
 .shortcut {
  position: absolute;
  right: 12px;
@@ -111,7 +155,7 @@ defineExpose({
 </style>

 <style>
-.input-wrapper svg {
+.input-wrapper > svg {
  position: absolute;
  left: 16px;
  top: 12px;
--- a/docs/.vitepress/theme/components/base/InputSearch.vue
+++ b/docs/.vitepress/theme/components/base/InputSearch.vue
@@ -1,38 +1,36 @@
 <script lang="ts">
 export default {
  inheritAttrs: false,
-}
+};
 </script>

 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import Input from './Input.vue'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
-import { search }  from '../../../data/iconNodes'
-
-const SearchIcon = createLucideIcon('search', search)
+import { computed, ref } from 'vue';
+import Input from './Input.vue';
+import Icon from 'lucide-vue-next/src/Icon';
+import { search } from '../../../data/iconNodes';

 interface Props {
-  modelValue: string
-  shortcut?: string
+  modelValue: string;
+  shortcut?: string;
 }

-const props = defineProps<Props>()
+const props = defineProps<Props>();

-const input = ref()
+const input = ref();

-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue']);

 defineExpose({
  focus: () => {
-    input.value.focus()
-  }
-})
+    input.value.focus();
+  },
+});

 const value = computed({
  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+  set: (val) => emit('update:modelValue', val),
+});
 </script>

 <template>
@@ -46,7 +44,10 @@ const value = computed({
    class="input-wrapper"
  >
    <template #icon>
-      <component :is="SearchIcon" class="search-icon" />
+      <Icon
+        :iconNode="search"
+        class="search-icon"
+      />
    </template>
  </Input>
 </template>
@@ -62,7 +63,8 @@ const value = computed({
  background-color: var(--vp-c-bg-alt);
 }

-.input:hover, .input:focus {
+.input:hover,
+.input:focus {
  border-color: var(--vp-c-brand);
  background: var(--vp-c-bg-alt);
 }
--- a/docs/.vitepress/theme/components/base/ResetButton.vue
+++ b/docs/.vitepress/theme/components/base/ResetButton.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { rotateCw } from '../../../data/iconNodes'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
-import IconButton from "./IconButton.vue";
-
-const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
+import { rotateCw } from '../../../data/iconNodes';
+import Icon from 'lucide-vue-next/src/Icon';
+import IconButton from './IconButton.vue';
 </script>

 <template>
  <IconButton class="reset-button">
-    <RotateIcon :size="20"/>
+    <Icon
+      :size="20"
+      :iconNode="rotateCw"
+    />
  </IconButton>
 </template>

@@ -32,6 +33,7 @@ const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
  0% {
    transform: rotate(0deg);
  }
+
  100% {
    transform: rotate(359deg);
  }
--- a/docs/.vitepress/theme/components/home/HomePackagesSection.data.ts
+++ b/docs/.vitepress/theme/components/home/HomePackagesSection.data.ts
@@ -22,16 +22,16 @@ export default {
          logo: '/framework-logos/svelte.svg',
          label: 'Lucide documentation for Svelte',
        },
-        {
-          name: 'lucide-preact',
-          logo: '/framework-logos/preact.svg',
-          label: 'Lucide documentation for Preact',
-        },
        {
          name: 'lucide-solid',
          logo: '/framework-logos/solid.svg',
          label: 'Lucide documentation for Solid',
        },
+        {
+          name: 'lucide-preact',
+          logo: '/framework-logos/preact.svg',
+          label: 'Lucide documentation for Preact',
+        },
        {
          name: 'lucide-angular',
          logo: '/framework-logos/angular.svg',
@@ -48,11 +48,6 @@ export default {
          logo: '/framework-logos/react-native.svg',
          label: 'Lucide documentation for React Native',
        },
-        {
-          name: 'lucide-flutter',
-          logo: '/framework-logos/flutter.svg',
-          label: 'Lucide documentation for Flutter',
-        },
      ],
    };
  },
--- a/docs/.vitepress/theme/components/icons/CarbonAdOverlay.vue
+++ b/docs/.vitepress/theme/components/icons/CarbonAdOverlay.vue
@@ -2,45 +2,48 @@
 import { useData } from 'vitepress';
 import { useSessionStorage } from '@vueuse/core';
 import IconButton from '../base/IconButton.vue';
-import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
-import { x } from '../../../data/iconNodes'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue';
+import { x } from '../../../data/iconNodes';
+import Icon from 'lucide-vue-next/src/Icon';
 import { onMounted, ref } from 'vue';

-const { theme } = useData()
-const showAd = useSessionStorage('show-carbon-ads', true)
-const carbonLoaded = ref(true)
+const { theme } = useData();
+const showAd = useSessionStorage('show-carbon-ads', true);
+const carbonLoaded = ref(true);

 defineProps<{
-  drawerOpen: boolean
-}>()
-
-const CloseIcon = createLucideIcon('Close', x)
+  drawerOpen: boolean;
+}>();

 onMounted(() => {
  setTimeout(() => {
    if (window?._carbonads == null) {
-      carbonLoaded.value = false
+      carbonLoaded.value = false;
    }
-  }, 5000)
-})
+  }, 5000);
+});
 </script>

 <template>
  <div
    :class="{
      'drawer-open': drawerOpen,
-      'hide-ad': !(showAd && carbonLoaded)
+      'hide-ad': !(showAd && carbonLoaded),
    }"
    class="floating-ad"
    v-if="theme.carbonAds"
  >
-    <IconButton @click="showAd = false" class="hide-button">
-      <component :is="CloseIcon" :size="20" absoluteStrokeWidth />
+    <IconButton
+      @click="showAd = false"
+      class="hide-button"
+    >
+      <Icon
+        :iconNode="x"
+        :size="20"
+        absoluteStrokeWidth
+      />
    </IconButton>
-    <VPDocAsideCarbonAds
-      :carbon-ads="theme.carbonAds"
-    />
+    <VPDocAsideCarbonAds :carbon-ads="theme.carbonAds" />
  </div>
 </template>

@@ -51,7 +54,9 @@ onMounted(() => {
  bottom: 32px;
  width: 224px;
  right: 32px;
-  transition: opacity 0.5s, transform 0.25s ease;
+  transition:
+    opacity 0.5s,
+    transform 0.25s ease;
 }

 .floating-ad.drawer-open {
@@ -67,8 +72,11 @@ onMounted(() => {
  transform: translateY(-288px) translateX(224px);
 }

-.floating-ad.drawer-open, .floating-ad.hide-ad {
-  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+.floating-ad.drawer-open,
+.floating-ad.hide-ad {
+  transition:
+    opacity 0.25s,
+    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 }

@media (min-width: 1280px) {
--- a/docs/.vitepress/theme/components/icons/CopySVGButton.vue
+++ b/docs/.vitepress/theme/components/icons/CopySVGButton.vue
@@ -1,70 +1,68 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import ButtonMenu from '../base/ButtonMenu.vue'
+import ButtonMenu from '../base/ButtonMenu.vue';
 import { useIconStyleContext } from '../../composables/useIconStyle';
 import useConfetti from '../../composables/useConfetti';
 import getSVGIcon from '../../utils/getSVGIcon';
 import downloadData from '../../utils/downloadData';

-const downloadText = 'Download!'
-const copiedText = 'Copied!'
-const confettiText = ref(copiedText)
+const downloadText = 'Download!';
+const copiedText = 'Copied!';
+const confettiText = ref(copiedText);
 const props = defineProps<{
-  name: string
-  popoverPosition?: 'top' | 'bottom'
-}>()
+  name: string;
+  popoverPosition?: 'top' | 'bottom';
+}>();

-const { size } = useIconStyleContext()
+const { size } = useIconStyleContext();

-const { animate, confetti } = useConfetti()
+const { animate, confetti } = useConfetti();

 function copySVG() {
-  confettiText.value = copiedText
-  const svgString = getSVGIcon()
+  confettiText.value = copiedText;
+  const svgString = getSVGIcon();

-  navigator.clipboard.writeText(svgString)
+  navigator.clipboard.writeText(svgString);

-  confetti()
+  confetti();
 }

 function copyDataUrl() {
-  confettiText.value = copiedText
-  const svgString = getSVGIcon()
+  confettiText.value = copiedText;
+  const svgString = getSVGIcon();

  // Create SVG data url
-  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`
-  navigator.clipboard.writeText(dataUrl)
+  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
+  navigator.clipboard.writeText(dataUrl);

-  confetti()
+  confetti();
 }

 function downloadSVG() {
-  confettiText.value = downloadText
-  const svgString = getSVGIcon()
+  confettiText.value = downloadText;
+  const svgString = getSVGIcon();

-  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`)
-  confetti()
+  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`);
+  confetti();
 }

 function downloadPNG() {
-  confettiText.value = downloadText
-  const svgString = getSVGIcon()
+  confettiText.value = downloadText;
+  const svgString = getSVGIcon();

  const canvas = document.createElement('canvas');
  canvas.width = size.value;
  canvas.height = size.value;
-  const ctx = canvas.getContext("2d");
+  const ctx = canvas.getContext('2d');

  const image = new Image();
  image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;
-  image.onload = function() {
+  image.onload = function () {
    ctx.drawImage(image, 0, 0);
-    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'))
-    confetti()
-  }
+    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'));
+    confetti();
+  };
 }
-
-
 </script>

 <template>
@@ -75,10 +73,10 @@ function downloadPNG() {
    :data-confetti-text="confettiText"
    :popoverPosition="popoverPosition"
    :options="[
-      { text: 'Copy SVG' , onClick: copySVG },
-      { text: 'Copy Data URL' , onClick: copyDataUrl },
-      { text: 'Download SVG' , onClick: downloadSVG },
-      { text: 'Download PNG' , onClick: downloadPNG },
+      { text: 'Copy SVG', onClick: copySVG },
+      { text: 'Copy Data URL', onClick: copyDataUrl },
+      { text: 'Download SVG', onClick: downloadSVG },
+      { text: 'Download PNG', onClick: downloadPNG },
    ]"
  />
 </template>
--- a/docs/.vitepress/theme/components/icons/IconDetailName.vue
+++ b/docs/.vitepress/theme/components/icons/IconDetailName.vue
@@ -1,41 +1,44 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
-import { copy }  from '../../../data/iconNodes'
+import { copy } from '../../../data/iconNodes';
 import useConfetti from '../../composables/useConfetti';
-const { animate, confetti } = useConfetti()
-const slots = useSlots()
+import Icon from 'lucide-vue-next/src/Icon';
+const { animate, confetti } = useConfetti();
+const slots = useSlots();

-const copiedText = computed(() => slots.default?.()[0].children)
+const copiedText = computed(() => slots.default?.()[0].children);

 function copyText() {
-  navigator.clipboard.writeText(copiedText.value)
+  navigator.clipboard.writeText(copiedText.value);

-  confetti()
+  confetti();
 }
-
-const Copy = createLucideIcon('ChevronUp', copy)
 </script>

 <template>
  <h1
    class="icon-name confetti-button"
-    :class="{animate}"
+    :class="{ animate }"
    data-confetti-text="Copied!"
    @click="copyText"
  >
    <slot />
-    <Copy :size="20" class="copy-icon"/>
+    <Icon
+      :iconNode="copy"
+      :size="20"
+      class="copy-icon"
+    />
  </h1>
 </template>

 <style scoped>
@import './confetti.css';
+
 .icon-name {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
-  transition: background ease-in .15s;;
+  transition: background ease-in 0.15s;
  padding: 2px 8px;
  border-radius: 8px;
  width: auto;
@@ -48,7 +51,7 @@ const Copy = createLucideIcon('ChevronUp', copy)
 }

 .icon-name:hover .copy-icon {
-  opacity: .9;
+  opacity: 0.9;
 }

 .icon-name:before,
@@ -65,10 +68,10 @@ const Copy = createLucideIcon('ChevronUp', copy)
  opacity: 0;
  margin-left: 12px;
  margin-top: 6px;
-  transition:ease .3s opacity;
+  transition: ease 0.3s opacity;
 }

 .icon-name:hover .copy-icon:hover {
-  opacity: .6;
+  opacity: 0.6;
 }
 </style>
--- a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
+++ b/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
@@ -1,75 +1,72 @@
 <script setup lang="ts">
-import { shallowRef, type Ref, watch, computed } from 'vue'
-import { useCssVar, syncRef } from '@vueuse/core'
-import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle'
-import RangeSlider from '../base/RangeSlider.vue'
-import InputField from '../base/InputField.vue'
-import ColorPicker from '../base/ColorPicker.vue'
-import ResetButton from '../base/ResetButton.vue'
-import Switch from '../base/Switch.vue'
+import { shallowRef, type Ref, watch, computed } from 'vue';
+import { useCssVar, syncRef } from '@vueuse/core';
+import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle';
+import RangeSlider from '../base/RangeSlider.vue';
+import InputField from '../base/InputField.vue';
+import ColorPicker from '../base/ColorPicker.vue';
+import ResetButton from '../base/ResetButton.vue';
+import Switch from '../base/Switch.vue';

 const props = defineProps<{
-  rootEl?: Ref<HTMLElement>
-}>()
+  rootEl?: Ref<HTMLElement>;
+}>();

-const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext()
-const documentRef = shallowRef<HTMLElement | undefined>(typeof document !== 'undefined' ? document?.documentElement : undefined)
+const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext();
+const documentRef = shallowRef<HTMLElement | undefined>(
+  typeof document !== 'undefined' ? document?.documentElement : undefined,
+);

-const colorCssVar = useCssVar(
-  '--customize-color',
-  props.rootEl?.value ?? documentRef.value,
-  {
-    initialValue: `${STYLE_DEFAULTS.color}`
-  }
-)
+const colorCssVar = useCssVar('--customize-color', props.rootEl?.value ?? documentRef.value, {
+  initialValue: `${STYLE_DEFAULTS.color}`,
+});

 const strokeWidthCssVar = useCssVar(
  '--customize-strokeWidth',
  props.rootEl?.value ?? documentRef.value,
  {
-    initialValue: `${STYLE_DEFAULTS.strokeWidth}`
-  }
-)
+    initialValue: `${STYLE_DEFAULTS.strokeWidth}`,
+  },
+);

-const sizeCssVar = useCssVar(
-  '--customize-size',
-  props.rootEl?.value ?? documentRef.value,
-  {
-    initialValue: `${STYLE_DEFAULTS.size}`
-  }
-)
+const sizeCssVar = useCssVar('--customize-size', props.rootEl?.value ?? documentRef.value, {
+  initialValue: `${STYLE_DEFAULTS.size}`,
+});

-syncRef(color, colorCssVar, { direction: 'ltr' })
-syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' })
-syncRef(size, sizeCssVar, { direction: 'ltr' })
+syncRef(color, colorCssVar, { direction: 'ltr' });
+syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' });
+syncRef(size, sizeCssVar, { direction: 'ltr' });

-function resetStyle () {
-  color.value = STYLE_DEFAULTS.color
-  strokeWidth.value = STYLE_DEFAULTS.strokeWidth
-  size.value = STYLE_DEFAULTS.size
-  absoluteStrokeWidth.value = STYLE_DEFAULTS.absoluteStrokeWidth
+function resetStyle() {
+  color.value = STYLE_DEFAULTS.color;
+  strokeWidth.value = STYLE_DEFAULTS.strokeWidth;
+  size.value = STYLE_DEFAULTS.size;
+  absoluteStrokeWidth.value = STYLE_DEFAULTS.absoluteStrokeWidth;
 }

 watch(absoluteStrokeWidth, (enabled) => {
-  const htmlEl = document.documentElement
+  const htmlEl = document.documentElement;

-  htmlEl.classList.toggle('absolute-stroke-width', enabled)
-})
+  htmlEl.classList.toggle('absolute-stroke-width', enabled);
+});

 const customizingActive = computed(() => {
-  return color.value !== STYLE_DEFAULTS.color
-    || strokeWidth.value !== STYLE_DEFAULTS.strokeWidth
-    || size.value !== STYLE_DEFAULTS.size
-    || absoluteStrokeWidth.value !== STYLE_DEFAULTS.absoluteStrokeWidth
-})
+  return (
+    color.value !== STYLE_DEFAULTS.color ||
+    strokeWidth.value !== STYLE_DEFAULTS.strokeWidth ||
+    size.value !== STYLE_DEFAULTS.size ||
+    absoluteStrokeWidth.value !== STYLE_DEFAULTS.absoluteStrokeWidth
+  );
+});
 </script>

 <template>
-  <div class="customizer-card" :class="{ customized: customizingActive }">
+  <div
+    class="customizer-card"
+    :class="{ customized: customizingActive }"
+  >
    <div class="card-header">
-      <h2 class="card-title">
-        Customizer
-      </h2>
+      <h2 class="card-title">Customizer</h2>
      <ResetButton @click="resetStyle"></ResetButton>
    </div>
    <InputField
@@ -77,7 +74,11 @@ const customizingActive = computed(() => {
      label="Color"
    >
      <template #display>
-        <ColorPicker v-model="color" id="icon-color" class="color-picker"/>
+        <ColorPicker
+          v-model="color"
+          id="icon-color"
+          class="color-picker"
+        />
      </template>
    </InputField>

@@ -117,7 +118,7 @@ const customizingActive = computed(() => {

    <InputField
      id="absolute-stroke-width"
-      label="Absolute Stroke width"
+      label="Absolute stroke width"
    >
      <Switch
        id="absolute-stroke-width"
@@ -143,6 +144,7 @@ const customizingActive = computed(() => {
  font-size: 16px;
  /* margin-bottom: 12px; */
 }
+
 .customizer-card {
  background: var(--vp-c-bg);
  padding: 12px 24px 24px;
@@ -151,7 +153,7 @@ const customizingActive = computed(() => {
  position: relative;
  z-index: 0;
  border: 1px solid transparent;
-  transition: border-color .4s ease-in-out;
+  transition: border-color 0.4s ease-in-out;
 }

 .customizer-card.customized {
--- a/docs/.vitepress/vue-shim.d.ts
+++ b/docs/.vitepress/vue-shim.d.ts
@@ -1,4 +1,4 @@
-import { IconNode } from 'lucide-vue-next/src/createLucideIcon';
+import { type IconNode } from 'lucide-vue-next/src/types';
 import Vue from 'vue';

 declare module '*.vue' {
@@ -20,5 +20,6 @@ declare module 'node:module' {
 }

 declare module '*.node.json' {
-  export default IconNode;
+  const value: IconNode;
+  export default value;
 }