From f8979912cc262f613f584fa672844473df0543d9 Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Thu, 4 May 2023 10:19:20 +0200
Subject: [PATCH] minor improvements

---
 .../theme/components/base/FakeInput.vue       |  1 +
 .../theme/components/base/RangeSlider.vue     | 43 +++++++++++--------
 .../components/home/HomePackagesSection.vue   |  1 +
 .../icons/IconsCategoryOverview.vue           | 15 +++----
 .../theme/components/icons/IconsOverview.vue  |  2 +-
 docs/icons/index.md                           |  9 ++--
 6 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/docs/.vitepress/theme/components/base/FakeInput.vue b/docs/.vitepress/theme/components/base/FakeInput.vue
index af3b14922..f8e74a357 100644
--- a/docs/.vitepress/theme/components/base/FakeInput.vue
+++ b/docs/.vitepress/theme/components/base/FakeInput.vue
@@ -26,6 +26,7 @@ const SearchIcon = createLucideIcon('search', search)
   cursor: text;
   display: flex;
   gap: 12px;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 }
 
 .fake-input:hover, .fake-input:focus {
diff --git a/docs/.vitepress/theme/components/base/RangeSlider.vue b/docs/.vitepress/theme/components/base/RangeSlider.vue
index 296316ef6..fd34ebc4b 100644
--- a/docs/.vitepress/theme/components/base/RangeSlider.vue
+++ b/docs/.vitepress/theme/components/base/RangeSlider.vue
@@ -1,11 +1,18 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <script lang="ts" setup>
 import { computed } from "vue";
 
 interface Props {
-    modelValue: number;
-    min?: number;
-    max?: number;
-    step?: number;
+  modelValue: number | string;
+  min?: number;
+  max?: number;
+  step?: number;
+  id: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,23 +22,25 @@ const props = withDefaults(defineProps<Props>(), {
 
 defineEmits(['update:modelValue'])
 
-const percentage = computed<string>(() => `${((props.modelValue - props.min) / (props.max - props.min)) * 100}%`);
+const percentage = computed<string>(() => `${((Number(props.modelValue) - props.min) / (props.max - props.min)) * 100}%`);
 // TODO: Steps must be implemented
 </script>
 
+
 <template>
-    <div class="slider">
-        <input
-            type="range"
-            v-bind="$attrs"
-            v-bind:value="modelValue"
-            v-on:input="$emit('update:modelValue', Number($event.target.value))"
-            :min="min"
-            :max="max"
-            :step="step"
-        />
-        <div class="bar"></div>
-    </div>
+  <div class="slider">
+    <input
+      :id="id"
+      type="range"
+      v-bind="$attrs"
+      v-bind:value="modelValue"
+      v-on:input="$emit('update:modelValue', Number($event.target.value))"
+      :min="min"
+      :max="max"
+      :step="step"
+    />
+    <div class="bar"></div>
+  </div>
 </template>
 
 <style>
diff --git a/docs/.vitepress/theme/components/home/HomePackagesSection.vue b/docs/.vitepress/theme/components/home/HomePackagesSection.vue
index 9ce896508..21c6e0dff 100644
--- a/docs/.vitepress/theme/components/home/HomePackagesSection.vue
+++ b/docs/.vitepress/theme/components/home/HomePackagesSection.vue
@@ -23,6 +23,7 @@ const { go } = useRouter()
           height="36"
           width="36"
           loading="lazy"
+          :alt="`${name} logo`"
         />
       </a>
     </div>
diff --git a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
index 98f7e38c6..d3351cfee 100644
--- a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
+++ b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
@@ -4,7 +4,7 @@ import type { IconEntity, Category } from '../../types'
 import IconDetailOverlay from './IconDetailOverlay.vue'
 import IconGrid from './IconGrid.vue'
 import useSearch from '../../composables/useSearch'
-import Input from '../base/Input.vue'
+import InputSearch from '../base/InputSearch.vue'
 import useSearchInput from '../../composables/useSearchInput'
 
 const props = defineProps<{
@@ -53,7 +53,12 @@ const activeIcon = computed(() =>
 </script>
 
 <template>
-  <Input type="search" placeholder="Search icons..." v-model="searchQuery" class="input-wrapper" ref="searchInput"/>
+  <InputSearch
+    :placeholder="`Search ${icons.length} icons ...`"
+    v-model="searchQuery"
+    class="input-wrapper"
+    ref="searchInput"
+  />
   <section class="category" v-for="category in categories" :key="category.name">
     <h2 class="title" :id="category.name">
       <a class="header-anchor" :href="`#${category.name}`" :aria-label="`Permalink to &quot;${category.title}&quot;`">&ZeroWidthSpace;</a>
@@ -89,12 +94,6 @@ const activeIcon = computed(() =>
   margin-bottom: 32px;
 }
 
-.input-wrapper:deep(.input) {
-  padding: 12px 24px;
-  font-size: 14px;
-  height: 48px;
-}
-
 .input-wrapper {
   margin-bottom: 16px;
 }
diff --git a/docs/.vitepress/theme/components/icons/IconsOverview.vue b/docs/.vitepress/theme/components/icons/IconsOverview.vue
index fe38455c5..12bd94681 100644
--- a/docs/.vitepress/theme/components/icons/IconsOverview.vue
+++ b/docs/.vitepress/theme/components/icons/IconsOverview.vue
@@ -68,7 +68,7 @@ watch(searchQueryThrottled, (searchString) => {
 
 <template>
   <InputSearch
-    placeholder="Search icons..."
+    :placeholder="`Search ${icons.length} icons ...`"
     v-model="searchQuery"
     class="input-wrapper"
     ref="searchInput"
diff --git a/docs/icons/index.md b/docs/icons/index.md
index 05fb5427f..8d6698ca5 100644
--- a/docs/icons/index.md
+++ b/docs/icons/index.md
@@ -13,6 +13,9 @@ import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
 const { categories, icons } = data
 </script>
 
-<PageContainer>
-  <IconsOverview :icons="icons" />
-</PageContainer>
+<div class="VPDoc content">
+  <PageContainer>
+    <IconsOverview :icons="icons" />
+  </PageContainer>
+</div>
+```