Skip to content

Commit 524ff34

Browse files
woolimiwoolimi
committed
feat: WIcon
1 parent 121c684 commit 524ff34

File tree

17 files changed

+136
-53
lines changed

17 files changed

+136
-53
lines changed

‎components/WAccordion/WAccordion.story.vue

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,47 +10,47 @@ import WAccordion from './WAccordion.vue';
1010
<WAccordion>
1111
<template #title> Sheep are usually bred for wool </template>
1212
<template #default>
13-
Sheep are very gentle animals and were one of the first animals to be domesticated. They can differentiate facial expressions, and prefer a
14-
smile to a frown.
13+
Sheep are very gentle animals and were one of the first animals to be domesticated. They
14+
can differentiate facial expressions, and prefer a smile to a frown.
1515
</template>
1616
</WAccordion>
1717
<WAccordion>
1818
<template #title> Sheep have no upper teeth </template>
1919
<template #default>
20-
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
21-
chewing, of course!
20+
Sheep can't grow teeth in the upper front portions of their jaws, instead of leaving their
21+
lower teeth to fill in the gap. Useful when chewing, of course!
2222
</template>
2323
</WAccordion>
2424
</Variant>
2525
<Variant title="close outside click">
2626
<WAccordion close-click-outside>
2727
<template #title> Sheep are usually bred for wool </template>
2828
<template #default>
29-
Sheep are very gentle animals and were one of the first animals to be domesticated. They can differentiate facial expressions, and prefer a
30-
smile to a frown.
29+
Sheep are very gentle animals and were one of the first animals to be domesticated. They
30+
can differentiate facial expressions, and prefer a smile to a frown.
3131
</template>
3232
</WAccordion>
3333
<WAccordion close-click-outside>
3434
<template #title> Sheep have no upper teeth </template>
3535
<template #default>
36-
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
37-
chewing, of course!
36+
Sheep can't grow teeth in the upper front portions of their jaws, instead of leaving their
37+
lower teeth to fill in the gap. Useful when chewing, of course!
3838
</template>
3939
</WAccordion>
4040
</Variant>
4141
<Variant title="color">
42-
<WAccordion :color="colors.emerald[700]" close-click-outside>
42+
<WAccordion :color="colors.emerald[400]" close-click-outside>
4343
<template #title> Sheep are usually bred for wool </template>
4444
<template #default>
45-
Sheep are very gentle animals and were one of the first animals to be domesticated. They can differentiate facial expressions, and prefer a
46-
smile to a frown.
45+
Sheep are very gentle animals and were one of the first animals to be domesticated. They
46+
can differentiate facial expressions, and prefer a smile to a frown.
4747
</template>
4848
</WAccordion>
4949
<WAccordion :color="colors.red[600]" close-click-outside>
5050
<template #title> Sheep have no upper teeth </template>
5151
<template #default>
52-
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
53-
chewing, of course!
52+
Sheep can't grow teeth in the upper front portions of their jaws, instead of leaving their
53+
lower teeth to fill in the gap. Useful when chewing, of course!
5454
</template>
5555
</WAccordion>
5656
</Variant>

‎components/WAccordion/WAccordion.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script setup lang="ts">
2-
import { PlusIcon } from '@heroicons/vue/24/solid';
2+
import { mdiPlus } from '@mdi/js';
33
import { vOnClickOutside } from '@vueuse/components';
44
import { useElementBounding } from '@vueuse/core';
55
import colors from 'tailwindcss/colors';
66
import { ref } from 'vue';
77
88
import WButton from '@/components/WButton';
9+
import WIcon from '@/components/WIcon';
910
defineProps({
1011
closeClickOutside: {
1112
type: Boolean,
@@ -31,9 +32,10 @@ const { height: contentHeight } = useElementBounding(content);
3132
>
3233
<div class="flex items-center justify-between gap-1">
3334
<slot name="title" />
34-
<PlusIcon
35+
<WIcon
36+
:path="mdiPlus"
3537
:class="{ ['rotate-[45deg]']: active }"
36-
class="h-[24px] w-[24px] transition-transform duration-500"
38+
class="h-[24px] w-[24px] text-white transition-transform duration-500"
3739
/>
3840
</div>
3941
</WButton>

‎components/WDateField/WDateField.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<script setup lang="ts">
2-
import { CalendarIcon } from '@heroicons/vue/24/solid';
2+
import { mdiCalendar } from '@mdi/js';
33
import { vOnClickOutside } from '@vueuse/components';
44
import { useVModel } from '@vueuse/core';
55
import { isValid as dateIsValid } from 'date-fns/fp';
66
import { computed, PropType, reactive, ref, watch } from 'vue';
77
88
import WDatePicker from '@/components/WDatePicker';
99
import WError from '@/components/WError';
10+
import WIcon from '@/components/WIcon';
1011
import WInput from '@/components/WInput';
1112
import WLabel from '@/components/WLabel';
1213
import { useDateTime } from '@/composables/useDateTime';
@@ -180,7 +181,7 @@ watch(
180181
arial-label="Open date picker"
181182
@click="active = true"
182183
>
183-
<CalendarIcon />
184+
<WIcon :path="mdiCalendar" />
184185
</button>
185186
</template>
186187
</WInput>

‎components/WDatePicker/WDatePicker.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { pipe } from '@fxts/core';
3-
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid';
3+
import { mdiChevronDown, mdiChevronLeft, mdiChevronRight } from '@mdi/js';
44
import { useMediaQuery } from '@vueuse/core';
55
import {
66
addMonths,
@@ -16,6 +16,7 @@ import {
1616
} from 'date-fns/fp';
1717
import { computed, PropType, ref, watch } from 'vue';
1818
19+
import WIcon from '@/components/WIcon';
1920
import { useDateTime } from '@/composables/useDateTime';
2021
2122
import MonthPicker from './MonthPicker.vue';
@@ -139,7 +140,7 @@ watch(
139140
class="rounded-[50%] p-2 hover:bg-gray-100 disabled:bg-inherit disabled:text-gray-300"
140141
@click="changeMonth(-1)"
141142
>
142-
<ChevronLeftIcon class="h-[24px] w-[24px]" />
143+
<WIcon :path="mdiChevronLeft" class="h-[24px] w-[24px]" />
143144
</button>
144145
<div class="flex items-center gap-2">
145146
<button
@@ -154,7 +155,8 @@ watch(
154155
class="rounded-[50%] p-2 hover:bg-gray-100"
155156
@click="showPicker === 'year' ? (showPicker = false) : (showPicker = 'year')"
156157
>
157-
<ChevronDownIcon
158+
<WIcon
159+
:path="mdiChevronDown"
158160
:class="{ ['rotate-180']: showPicker === 'year' }"
159161
class="h-[20px] w-[20px] transition-transform"
160162
/>
@@ -165,7 +167,7 @@ watch(
165167
class="rounded-[50%] p-2 hover:bg-gray-100 disabled:bg-inherit disabled:text-gray-300"
166168
@click="changeMonth(1)"
167169
>
168-
<ChevronRightIcon class="h-[24px] w-[24px]" />
170+
<WIcon :path="mdiChevronRight" class="h-[24px] w-[24px]" />
169171
</button>
170172
</header>
171173

‎components/WEmailField/WEmailField.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script setup lang="ts">
2-
import { AtSymbolIcon } from '@heroicons/vue/24/solid';
2+
import { mdiAt } from '@mdi/js';
33
import { watchDebounced } from '@vueuse/core';
44
import { ref } from 'vue';
55
66
import { WError, WInput, WLabel } from '@/components';
7+
import WIcon from '@/components/WIcon';
78
import { useIds } from '@/composables/useIds';
89
import { InputType } from '@/types';
910
@@ -50,7 +51,7 @@ const inputEl = ref<typeof WInput>();
5051
@input="onInput"
5152
>
5253
<template #append>
53-
<AtSymbolIcon />
54+
<WIcon :path="mdiAt" class="h-[24px] w-[24px]" />
5455
</template>
5556
</WInput>
5657
<WError :error-message="errorMessage" />

‎components/WIcon/WIcon.story.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup>
2+
import { mdiPlus } from '@mdi/js';
3+
4+
import WIcon from './WIcon.vue';
5+
</script>
6+
<template>
7+
<Story :layout="{ type: 'grid', width: '95%' }" title="WIcon">
8+
<Variant title="default">
9+
<WIcon
10+
:path="mdiPlus"
11+
class="text-primary h-[36px] w-[36px] shrink-0 transition-transform duration-300"
12+
/>
13+
</Variant>
14+
</Story>
15+
</template>

‎components/WIcon/WIcon.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
defineProps({
3+
type: {
4+
type: String,
5+
default: 'default',
6+
},
7+
path: { type: String, required: true },
8+
});
9+
</script>
10+
11+
<template>
12+
<svg width="24" height="24" viewBox="0 0 24 24">
13+
<path :d="path" />
14+
</svg>
15+
</template>
16+
<style scoped>
17+
path {
18+
fill: currentColor;
19+
}
20+
</style>

‎components/WIcon/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './WIcon.vue';

‎components/WInput/WInput.story.vue

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script setup lang="ts">
2-
import { CurrencyEuroIcon } from '@heroicons/vue/24/solid';
2+
import { mdiCurrencyEur } from '@mdi/js';
33
import { reactive } from 'vue';
44
5+
import WIcon from '@/components/WIcon';
56
import { InputType } from '@/types';
67
78
import WInput from './WInput.vue';
@@ -23,13 +24,31 @@ const onInput = (e: InputEvent) => {
2324
<WInput :value="state.value" :type="state.type" placeholder="Type here..." @input="onInput" />
2425
</Variant>
2526
<Variant title="hide sheep">
26-
<WInput :value="state.value" :type="state.type" hide-sheep placeholder="Type here..." @input="onInput" />
27+
<WInput
28+
:value="state.value"
29+
:type="state.type"
30+
hide-sheep
31+
placeholder="Type here..."
32+
@input="onInput"
33+
/>
2734
</Variant>
2835
<Variant title="error">
29-
<WInput :value="state.value" :type="state.type" error placeholder="Type here..." @input="onInput" />
36+
<WInput
37+
:value="state.value"
38+
:type="state.type"
39+
error
40+
placeholder="Type here..."
41+
@input="onInput"
42+
/>
3043
</Variant>
3144
<Variant title="disabled">
32-
<WInput :value="state.value" :type="state.type" disabled placeholder="Type here..." @input="onInput" />
45+
<WInput
46+
:value="state.value"
47+
:type="state.type"
48+
disabled
49+
placeholder="Type here..."
50+
@input="onInput"
51+
/>
3352
</Variant>
3453
<Variant title="prepend icon">
3554
<WInput :value="state.value" :type="state.type" placeholder="Type here..." @input="onInput">
@@ -56,9 +75,15 @@ const onInput = (e: InputEvent) => {
5675
</WInput>
5776
</Variant>
5877
<Variant title="disabled with icon">
59-
<WInput :value="state.value" :type="state.type" disabled placeholder="Type here..." @input="onInput">
78+
<WInput
79+
:value="state.value"
80+
:type="state.type"
81+
disabled
82+
placeholder="Type here..."
83+
@input="onInput"
84+
>
6085
<template #append>
61-
<CurrencyEuroIcon />
86+
<WIcon :path="mdiCurrencyEur" />
6287
</template>
6388
</WInput>
6489
</Variant>

‎components/WNavbar/WNavbar.vue

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang="ts">
2-
import { Bars3Icon, ChevronDownIcon, ChevronRightIcon } from '@heroicons/vue/24/solid';
2+
import { mdiChevronDown, mdiChevronRight, mdiMenu } from '@mdi/js';
33
import { vOnClickOutside } from '@vueuse/components';
44
import { ref, watch } from 'vue';
55
6+
import WIcon from '@/components/WIcon';
67
import WSheep from '@/components/WSheep';
78
import { useIds } from '@/composables/useIds';
89
import { useMeh } from '@/composables/useMeh';
@@ -74,7 +75,7 @@ watch(active, () => {
7475
class="rounded-[50%] !border-none p-1 focus:wc-focus -sm:hidden"
7576
@click="active = !active"
7677
>
77-
<Bars3Icon class="h-[30px] w-[30px] text-black" />
78+
<WIcon :path="mdiMenu" class="h-[30px] w-[30px] text-black" />
7879
</button>
7980

8081
<ul
@@ -92,7 +93,7 @@ watch(active, () => {
9293
@click="onActive(id, m.to)"
9394
>
9495
{{ m.text }}
95-
<ChevronDownIcon v-if="m.items" class="h-[16px] w-[16px]" />
96+
<WIcon v-if="m.items" :path="mdiChevronRight" class="h-[16px] w-[16px]" />
9697
</component>
9798

9899
<ul
@@ -114,8 +115,16 @@ watch(active, () => {
114115
@mouseover.self="onActiveId2Desktop(id2)"
115116
>
116117
{{ m2.text }}
117-
<ChevronRightIcon v-if="m2.items" class="h-[16px] w-[16px] -sm:hidden" />
118-
<ChevronDownIcon v-if="m2.items" class="h-[16px] w-[16px] -sm:hidden" />
118+
<WIcon
119+
v-if="m2.items"
120+
:path="mdiChevronRight"
121+
class="h-[16px] w-[16px] -sm:hidden"
122+
/>
123+
<WIcon
124+
v-if="m2.items"
125+
:path="mdiChevronDown"
126+
class="h-[16px] w-[16px] -sm:hidden"
127+
/>
119128
</component>
120129
<ul
121130
v-if="m2.items"

‎components/WNumberField/WNumberField.story.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script setup>
2-
import { CurrencyEuroIcon } from '@heroicons/vue/24/solid';
2+
import { mdiCurrencyEur } from '@mdi/js';
33
44
import { WNumberField } from '@/components';
5+
import WIcon from '@/components/WIcon';
56
67
const initState = () => ({
78
label: 'Number',
@@ -38,7 +39,7 @@ const initState = () => ({
3839
locale="fr"
3940
>
4041
<template #append>
41-
<CurrencyEuroIcon />
42+
<WIcon :path="mdiCurrencyEur" />
4243
</template>
4344
</WNumberField>
4445
</template>

‎components/WPasswordField/WPasswordField.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script setup lang="ts">
2-
import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid';
2+
import { mdiEye, mdiEyeOff } from '@mdi/js';
33
import { computed, ref } from 'vue';
44
5+
import WIcon from '@/components/WIcon';
56
import WInput from '@/components/WInput';
67
import WLabel from '@/components/WLabel';
78
import { useIds } from '@/composables/useIds';
@@ -55,11 +56,12 @@ const grade = computed(() => {
5556
@blur="active = false"
5657
>
5758
<template #append>
58-
<EyeSlashIcon
59+
<WIcon
5960
v-if="inputType === InputType.PASSWORD"
61+
:path="mdiEyeOff"
6062
@click="changeInputType(InputType.TEXT)"
6163
/>
62-
<EyeIcon v-else @click="changeInputType(InputType.PASSWORD)" />
64+
<WIcon v-else :path="mdiEye" @click="changeInputType(InputType.PASSWORD)" />
6365
</template>
6466
</WInput>
6567

‎components/WPhoneField/CountrySelect.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
import { shouldPolyfill as shouldPolyfillDisplayNames } from '@formatjs/intl-displaynames/should-polyfill';
33
import { shouldPolyfill } from '@formatjs/intl-getcanonicallocales/should-polyfill';
44
import { shouldPolyfill as shouldPolyfillLocale } from '@formatjs/intl-locale/should-polyfill';
5-
import { ChevronDownIcon } from '@heroicons/vue/24/solid';
5+
import { mdiChevronDown } from '@mdi/js';
66
import { vOnClickOutside } from '@vueuse/components';
77
import { CountryCode } from 'libphonenumber-js';
88
import { computed, nextTick, onMounted, PropType, ref, toRef, watch } from 'vue';
99
10+
import WIcon from '@/components/WIcon';
1011
import WInput from '@/components/WInput';
1112
import { useDropdown } from '@/composables/useDropdown';
1213
import { useIds } from '@/composables/useIds';
@@ -183,7 +184,8 @@ onMounted(async () => {
183184
</button>
184185
</template>
185186
<template #append>
186-
<ChevronDownIcon
187+
<WIcon
188+
:path="mdiChevronDown"
187189
:class="{ ['rotate-180']: active }"
188190
class="h-[30px] w-[30px] transition-transform duration-200"
189191
/>

0 commit comments

Comments
 (0)