feat: WIcon

woolimi · Oct 6, 2024 · 524ff34 · 524ff34
1 parent 121c684
commit 524ff34
Show file tree

Hide file tree

Showing 17 changed files with 136 additions and 53 deletions.
diff --git a/components/WAccordion/WAccordion.story.vue b/components/WAccordion/WAccordion.story.vue
@@ -10,47 +10,47 @@ import WAccordion from './WAccordion.vue';
       <WAccordion>
         <template #title> Sheep are usually bred for wool </template>
         <template #default>
-          Sheep are very gentle animals and were one of the first animals to be domesticated. They can differentiate facial expressions, and prefer a
-          smile to a frown.
+          Sheep are very gentle animals and were one of the first animals to be domesticated. They
+          can differentiate facial expressions, and prefer a smile to a frown.
         </template>
       </WAccordion>
       <WAccordion>
         <template #title> Sheep have no upper teeth </template>
         <template #default>
-          Sheep can't grow teeth in the upper front portions of their jaws, instead of leaving their lower teeth to fill in the gap. Useful when
-          chewing, of course!
+          Sheep can't grow teeth in the upper front portions of their jaws, instead of leaving their
+          lower teeth to fill in the gap. Useful when chewing, of course!
         </template>
       </WAccordion>
     </Variant>
     <Variant title="close outside click">
       <WAccordion close-click-outside>
         <template #title> Sheep are usually bred for wool </template>
         <template #default>
-          Sheep are very gentle animals and were one of the first animals to be domesticated. They can differentiate facial expressions, and prefer a
-          smile to a frown.
+          Sheep are very gentle animals and were one of the first animals to be domesticated. They
+          can differentiate facial expressions, and prefer a smile to a frown.
         </template>
       </WAccordion>
       <WAccordion close-click-outside>
         <template #title> Sheep have no upper teeth </template>
         <template #default>
-          Sheep can't grow teeth in the upper front portions of their jaws, instead of leaving their lower teeth to fill in the gap. Useful when
-          chewing, of course!
+          Sheep can't grow teeth in the upper front portions of their jaws, instead of leaving their
+          lower teeth to fill in the gap. Useful when chewing, of course!
         </template>
       </WAccordion>
     </Variant>
     <Variant title="color">
-      <WAccordion :color="colors.emerald[700]" close-click-outside>
+      <WAccordion :color="colors.emerald[400]" close-click-outside>
         <template #title> Sheep are usually bred for wool </template>
         <template #default>
-          Sheep are very gentle animals and were one of the first animals to be domesticated. They can differentiate facial expressions, and prefer a
-          smile to a frown.
+          Sheep are very gentle animals and were one of the first animals to be domesticated. They
+          can differentiate facial expressions, and prefer a smile to a frown.
         </template>
       </WAccordion>
       <WAccordion :color="colors.red[600]" close-click-outside>
         <template #title> Sheep have no upper teeth </template>
         <template #default>
-          Sheep can't grow teeth in the upper front portions of their jaws, instead of leaving their lower teeth to fill in the gap. Useful when
-          chewing, of course!
+          Sheep can't grow teeth in the upper front portions of their jaws, instead of leaving their
+          lower teeth to fill in the gap. Useful when chewing, of course!
         </template>
       </WAccordion>
     </Variant>

diff --git a/components/WAccordion/WAccordion.vue b/components/WAccordion/WAccordion.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { PlusIcon } from '@heroicons/vue/24/solid';
+import { mdiPlus } from '@mdi/js';
 import { vOnClickOutside } from '@vueuse/components';
 import { useElementBounding } from '@vueuse/core';
 import colors from 'tailwindcss/colors';
 import { ref } from 'vue';
 
 import WButton from '@/components/WButton';
+import WIcon from '@/components/WIcon';
 defineProps({
   closeClickOutside: {
     type: Boolean,
@@ -31,9 +32,10 @@ const { height: contentHeight } = useElementBounding(content);
     >
       <div class="flex items-center justify-between gap-1">
         <slot name="title" />
-        <PlusIcon
+        <WIcon
+          :path="mdiPlus"
           :class="{ ['rotate-[45deg]']: active }"
-          class="h-[24px] w-[24px] transition-transform duration-500"
+          class="h-[24px] w-[24px] text-white transition-transform duration-500"
         />
       </div>
     </WButton>

diff --git a/components/WDateField/WDateField.vue b/components/WDateField/WDateField.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { CalendarIcon } from '@heroicons/vue/24/solid';
+import { mdiCalendar } from '@mdi/js';
 import { vOnClickOutside } from '@vueuse/components';
 import { useVModel } from '@vueuse/core';
 import { isValid as dateIsValid } from 'date-fns/fp';
 import { computed, PropType, reactive, ref, watch } from 'vue';
 
 import WDatePicker from '@/components/WDatePicker';
 import WError from '@/components/WError';
+import WIcon from '@/components/WIcon';
 import WInput from '@/components/WInput';
 import WLabel from '@/components/WLabel';
 import { useDateTime } from '@/composables/useDateTime';
@@ -180,7 +181,7 @@ watch(
           arial-label="Open date picker"
           @click="active = true"
         >
-          <CalendarIcon />
+          <WIcon :path="mdiCalendar" />
         </button>
       </template>
     </WInput>

diff --git a/components/WDatePicker/WDatePicker.vue b/components/WDatePicker/WDatePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { pipe } from '@fxts/core';
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid';
+import { mdiChevronDown, mdiChevronLeft, mdiChevronRight } from '@mdi/js';
 import { useMediaQuery } from '@vueuse/core';
 import {
   addMonths,
@@ -16,6 +16,7 @@ import {
 } from 'date-fns/fp';
 import { computed, PropType, ref, watch } from 'vue';
 
+import WIcon from '@/components/WIcon';
 import { useDateTime } from '@/composables/useDateTime';
 
 import MonthPicker from './MonthPicker.vue';
@@ -139,7 +140,7 @@ watch(
           class="rounded-[50%] p-2 hover:bg-gray-100 disabled:bg-inherit disabled:text-gray-300"
           @click="changeMonth(-1)"
         >
-          <ChevronLeftIcon class="h-[24px] w-[24px]" />
+          <WIcon :path="mdiChevronLeft" class="h-[24px] w-[24px]" />
         </button>
         <div class="flex items-center gap-2">
           <button
@@ -154,7 +155,8 @@ watch(
             class="rounded-[50%] p-2 hover:bg-gray-100"
             @click="showPicker === 'year' ? (showPicker = false) : (showPicker = 'year')"
           >
-            <ChevronDownIcon
+            <WIcon
+              :path="mdiChevronDown"
               :class="{ ['rotate-180']: showPicker === 'year' }"
               class="h-[20px] w-[20px] transition-transform"
             />
@@ -165,7 +167,7 @@ watch(
           class="rounded-[50%] p-2 hover:bg-gray-100 disabled:bg-inherit disabled:text-gray-300"
           @click="changeMonth(1)"
         >
-          <ChevronRightIcon class="h-[24px] w-[24px]" />
+          <WIcon :path="mdiChevronRight" class="h-[24px] w-[24px]" />
         </button>
       </header>
 

diff --git a/components/WEmailField/WEmailField.vue b/components/WEmailField/WEmailField.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { AtSymbolIcon } from '@heroicons/vue/24/solid';
+import { mdiAt } from '@mdi/js';
 import { watchDebounced } from '@vueuse/core';
 import { ref } from 'vue';
 
 import { WError, WInput, WLabel } from '@/components';
+import WIcon from '@/components/WIcon';
 import { useIds } from '@/composables/useIds';
 import { InputType } from '@/types';
 
@@ -50,7 +51,7 @@ const inputEl = ref<typeof WInput>();
       @input="onInput"
     >
       <template #append>
-        <AtSymbolIcon />
+        <WIcon :path="mdiAt" class="h-[24px] w-[24px]" />
       </template>
     </WInput>
     <WError :error-message="errorMessage" />

diff --git a/components/WIcon/WIcon.story.vue b/components/WIcon/WIcon.story.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { mdiPlus } from '@mdi/js';
+
+import WIcon from './WIcon.vue';
+</script>
+<template>
+  <Story :layout="{ type: 'grid', width: '95%' }" title="WIcon">
+    <Variant title="default">
+      <WIcon
+        :path="mdiPlus"
+        class="text-primary h-[36px] w-[36px] shrink-0 transition-transform duration-300"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/components/WIcon/WIcon.vue b/components/WIcon/WIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps({
+  type: {
+    type: String,
+    default: 'default',
+  },
+  path: { type: String, required: true },
+});
+</script>
+
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24">
+    <path :d="path" />
+  </svg>
+</template>
+<style scoped>
+path {
+  fill: currentColor;
+}
+</style>
diff --git a/components/WIcon/index.ts b/components/WIcon/index.ts
@@ -0,0 +1 @@
+export { default } from './WIcon.vue';
diff --git a/components/WInput/WInput.story.vue b/components/WInput/WInput.story.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { CurrencyEuroIcon } from '@heroicons/vue/24/solid';
+import { mdiCurrencyEur } from '@mdi/js';
 import { reactive } from 'vue';
 
+import WIcon from '@/components/WIcon';
 import { InputType } from '@/types';
 
 import WInput from './WInput.vue';
@@ -23,13 +24,31 @@ const onInput = (e: InputEvent) => {
       <WInput :value="state.value" :type="state.type" placeholder="Type here..." @input="onInput" />
     </Variant>
     <Variant title="hide sheep">
-      <WInput :value="state.value" :type="state.type" hide-sheep placeholder="Type here..." @input="onInput" />
+      <WInput
+        :value="state.value"
+        :type="state.type"
+        hide-sheep
+        placeholder="Type here..."
+        @input="onInput"
+      />
     </Variant>
     <Variant title="error">
-      <WInput :value="state.value" :type="state.type" error placeholder="Type here..." @input="onInput" />
+      <WInput
+        :value="state.value"
+        :type="state.type"
+        error
+        placeholder="Type here..."
+        @input="onInput"
+      />
     </Variant>
     <Variant title="disabled">
-      <WInput :value="state.value" :type="state.type" disabled placeholder="Type here..." @input="onInput" />
+      <WInput
+        :value="state.value"
+        :type="state.type"
+        disabled
+        placeholder="Type here..."
+        @input="onInput"
+      />
     </Variant>
     <Variant title="prepend icon">
       <WInput :value="state.value" :type="state.type" placeholder="Type here..." @input="onInput">
@@ -56,9 +75,15 @@ const onInput = (e: InputEvent) => {
       </WInput>
     </Variant>
     <Variant title="disabled with icon">
-      <WInput :value="state.value" :type="state.type" disabled placeholder="Type here..." @input="onInput">
+      <WInput
+        :value="state.value"
+        :type="state.type"
+        disabled
+        placeholder="Type here..."
+        @input="onInput"
+      >
         <template #append>
-          <CurrencyEuroIcon />
+          <WIcon :path="mdiCurrencyEur" />
         </template>
       </WInput>
     </Variant>

diff --git a/components/WNavbar/WNavbar.vue b/components/WNavbar/WNavbar.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { Bars3Icon, ChevronDownIcon, ChevronRightIcon } from '@heroicons/vue/24/solid';
+import { mdiChevronDown, mdiChevronRight, mdiMenu } from '@mdi/js';
 import { vOnClickOutside } from '@vueuse/components';
 import { ref, watch } from 'vue';
 
+import WIcon from '@/components/WIcon';
 import WSheep from '@/components/WSheep';
 import { useIds } from '@/composables/useIds';
 import { useMeh } from '@/composables/useMeh';
@@ -74,7 +75,7 @@ watch(active, () => {
         class="rounded-[50%] !border-none p-1 focus:wc-focus -sm:hidden"
         @click="active = !active"
       >
-        <Bars3Icon class="h-[30px] w-[30px] text-black" />
+        <WIcon :path="mdiMenu" class="h-[30px] w-[30px] text-black" />
       </button>
 
       <ul
@@ -92,7 +93,7 @@ watch(active, () => {
             @click="onActive(id, m.to)"
           >
             {{ m.text }}
-            <ChevronDownIcon v-if="m.items" class="h-[16px] w-[16px]" />
+            <WIcon v-if="m.items" :path="mdiChevronRight" class="h-[16px] w-[16px]" />
           </component>
 
           <ul
@@ -114,8 +115,16 @@ watch(active, () => {
                 @mouseover.self="onActiveId2Desktop(id2)"
               >
                 {{ m2.text }}
-                <ChevronRightIcon v-if="m2.items" class="h-[16px] w-[16px] -sm:hidden" />
-                <ChevronDownIcon v-if="m2.items" class="h-[16px] w-[16px] -sm:hidden" />
+                <WIcon
+                  v-if="m2.items"
+                  :path="mdiChevronRight"
+                  class="h-[16px] w-[16px] -sm:hidden"
+                />
+                <WIcon
+                  v-if="m2.items"
+                  :path="mdiChevronDown"
+                  class="h-[16px] w-[16px] -sm:hidden"
+                />
               </component>
               <ul
                 v-if="m2.items"

diff --git a/components/WNumberField/WNumberField.story.vue b/components/WNumberField/WNumberField.story.vue
@@ -1,7 +1,8 @@
 <script setup>
-import { CurrencyEuroIcon } from '@heroicons/vue/24/solid';
+import { mdiCurrencyEur } from '@mdi/js';
 
 import { WNumberField } from '@/components';
+import WIcon from '@/components/WIcon';
 
 const initState = () => ({
   label: 'Number',
@@ -38,7 +39,7 @@ const initState = () => ({
           locale="fr"
         >
           <template #append>
-            <CurrencyEuroIcon />
+            <WIcon :path="mdiCurrencyEur" />
           </template>
         </WNumberField>
       </template>

diff --git a/components/WPasswordField/WPasswordField.vue b/components/WPasswordField/WPasswordField.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid';
+import { mdiEye, mdiEyeOff } from '@mdi/js';
 import { computed, ref } from 'vue';
 
+import WIcon from '@/components/WIcon';
 import WInput from '@/components/WInput';
 import WLabel from '@/components/WLabel';
 import { useIds } from '@/composables/useIds';
@@ -55,11 +56,12 @@ const grade = computed(() => {
       @blur="active = false"
     >
       <template #append>
-        <EyeSlashIcon
+        <WIcon
           v-if="inputType === InputType.PASSWORD"
+          :path="mdiEyeOff"
           @click="changeInputType(InputType.TEXT)"
         />
-        <EyeIcon v-else @click="changeInputType(InputType.PASSWORD)" />
+        <WIcon v-else :path="mdiEye" @click="changeInputType(InputType.PASSWORD)" />
       </template>
     </WInput>
 

diff --git a/components/WPhoneField/CountrySelect.vue b/components/WPhoneField/CountrySelect.vue
@@ -2,11 +2,12 @@
 import { shouldPolyfill as shouldPolyfillDisplayNames } from '@formatjs/intl-displaynames/should-polyfill';
 import { shouldPolyfill } from '@formatjs/intl-getcanonicallocales/should-polyfill';
 import { shouldPolyfill as shouldPolyfillLocale } from '@formatjs/intl-locale/should-polyfill';
-import { ChevronDownIcon } from '@heroicons/vue/24/solid';
+import { mdiChevronDown } from '@mdi/js';
 import { vOnClickOutside } from '@vueuse/components';
 import { CountryCode } from 'libphonenumber-js';
 import { computed, nextTick, onMounted, PropType, ref, toRef, watch } from 'vue';
 
+import WIcon from '@/components/WIcon';
 import WInput from '@/components/WInput';
 import { useDropdown } from '@/composables/useDropdown';
 import { useIds } from '@/composables/useIds';
@@ -183,7 +184,8 @@ onMounted(async () => {
           </button>
         </template>
         <template #append>
-          <ChevronDownIcon
+          <WIcon
+            :path="mdiChevronDown"
             :class="{ ['rotate-180']: active }"
             class="h-[30px] w-[30px] transition-transform duration-200"
           />