Skip to content

Commit d2ef6ee

Browse files
Updating icon stuff
1 parent cd23c84 commit d2ef6ee

File tree

15 files changed

+184
-174
lines changed

15 files changed

+184
-174
lines changed

src/components/MenuComponent.vue

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,57 +27,57 @@ const active = ref('');
2727
const menuItems = reactive([
2828
{
2929
href: '#home',
30-
icon: 'mdi-home',
30+
icon: 'mdi:mdi-home',
3131
title: 'Home',
3232
},
3333
{
3434
href: '#installation',
35-
icon: 'mdi-plus-thick',
35+
icon: 'mdi:mdi-plus-thick',
3636
title: 'Installation',
3737
},
3838
{
3939
href: '#description',
40-
icon: 'mdi-information-outline',
40+
icon: 'mdi:mdi-information-outline',
4141
title: 'Description',
4242
},
4343
{
4444
href: '#props',
45-
icon: 'mdi-cog',
45+
icon: 'mdi:mdi-cog',
4646
title: 'Props',
4747
},
4848
{
4949
href: '#events',
50-
icon: 'mdi-calendar-star',
50+
icon: 'mdi:mdi-calendar-star',
5151
title: 'Events',
5252
},
5353
{
5454
href: '#slots',
55-
icon: 'mdi-slot-machine',
55+
icon: 'mdi:mdi-slot-machine',
5656
title: 'Slots',
5757
},
5858
{
5959
href: '#sass-variables',
60-
icon: 'mdi-sass',
60+
icon: 'mdi:mdi-sass',
6161
title: 'SASS Variables',
6262
},
6363
{
6464
href: '#example',
65-
icon: 'mdi-code-json',
65+
icon: 'mdi:mdi-code-json',
6666
title: 'Example',
6767
},
6868
{
6969
href: '#dependencies',
70-
icon: 'mdi-asterisk-circle-outline',
70+
icon: 'mdi:mdi-asterisk-circle-outline',
7171
title: 'Dependencies',
7272
},
7373
{
7474
href: '#license',
75-
icon: 'mdi-card-account-details-outline',
75+
icon: 'mdi:mdi-card-account-details-outline',
7676
title: 'License',
7777
},
7878
{
7979
href: '#legal',
80-
icon: 'mdi-scale-balance',
80+
icon: 'mdi:mdi-scale-balance',
8181
title: 'Legal',
8282
},
8383
]);

src/components/docs/EventsComponent.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<v-card-title>
2020
<v-text-field
2121
v-model="search"
22-
append-icon="mdi-magnify"
22+
append-icon="mdi:mdi-magnify"
2323
hide-details
2424
label="Search"
2525
single-line

src/components/docs/PropsComponent.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<v-card-title>
3636
<v-text-field
3737
v-model="search"
38-
append-icon="mdi-magnify"
38+
append-icon="mdi:mdi-magnify"
3939
hide-details
4040
label="Search"
4141
single-line
@@ -126,12 +126,12 @@
126126
<template #[`item.status`]="{ item }">
127127
<td
128128
:class="{
129-
'text-warning': item.raw.status === 'pending',
130-
'text-error': item.raw.status === 'debugging',
131-
'text-secondary':
132-
item.raw.status !== 'debugging' &&
133-
item.raw.status !== 'pending',
134-
}"
129+
'text-warning': item.raw.status === 'pending',
130+
'text-error': item.raw.status === 'debugging',
131+
'text-secondary':
132+
item.raw.status !== 'debugging' &&
133+
item.raw.status !== 'pending',
134+
}"
135135
v-html="item.raw.status"
136136
></td>
137137
</template>

src/layout/AppBar.vue

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
@click.stop="toggleDrawer"
1414
>
1515
<!-- @click.stop="toggleDrawer" -->
16-
<v-icon>mdi-menu</v-icon>
16+
<v-icon icon="mdi:mdi-menu"></v-icon>
1717
</v-app-bar-nav-icon>
1818
<v-app-bar-nav-icon
1919
v-else
@@ -22,7 +22,7 @@
2222
:href="`/${store.storageName}/`"
2323
:width="iconSize.width"
2424
>
25-
<v-icon>mdi-home</v-icon>
25+
<v-icon icon="mdi:mdi-home"></v-icon>
2626
</v-app-bar-nav-icon>
2727

2828
<div class="site-title">Vuetify Inline Fields</div>
@@ -37,7 +37,10 @@
3737
title="Vuetify Github"
3838
variant="outlined"
3939
>
40-
<v-icon class="me-1">mdi-vuetify</v-icon> Github
40+
<v-icon
41+
class="me-1"
42+
icon="mdi:mdi-vuetify"
43+
/> Github
4144
</v-btn>
4245

4346
<v-btn
@@ -48,7 +51,10 @@
4851
title="Vuetify v-checkbox API"
4952
variant="outlined"
5053
>
51-
<v-icon class="me-1">mdi-vuetify</v-icon> VCheckbox
54+
<v-icon
55+
class="me-1"
56+
icon="mdi:mdi-vuetify"
57+
/> VCheckbox
5258
</v-btn>
5359

5460
<v-btn
@@ -59,7 +65,10 @@
5965
title="Vuetify v-select API"
6066
variant="outlined"
6167
>
62-
<v-icon class="me-1">mdi-vuetify</v-icon> VSelect
68+
<v-icon
69+
class="me-1"
70+
icon="mdi:mdi-vuetify"
71+
/> VSelect
6372
</v-btn>
6473

6574
<v-btn
@@ -70,7 +79,10 @@
7079
title="Vuetify v-switch API"
7180
variant="outlined"
7281
>
73-
<v-icon class="me-1">mdi-vuetify</v-icon> VSwitch
82+
<v-icon
83+
class="me-1"
84+
icon="mdi:mdi-vuetify"
85+
/> VSwitch
7486
</v-btn>
7587

7688
<v-btn
@@ -81,7 +93,10 @@
8193
title="Vuetify v-text-field API"
8294
variant="outlined"
8395
>
84-
<v-icon class="me-1">mdi-vuetify</v-icon> VTextField
96+
<v-icon
97+
class="me-1"
98+
icon="mdi:mdi-vuetify"
99+
/> VTextField
85100
</v-btn>
86101

87102
<v-btn
@@ -93,7 +108,7 @@
93108
target="_blank"
94109
:width="iconSize.width"
95110
>
96-
<v-icon>mdi-vuetify</v-icon>
111+
<v-icon icon="mdi:mdi-vuetify" />
97112
</v-btn>
98113

99114
<v-btn
@@ -104,7 +119,7 @@
104119
target="_blank"
105120
:width="iconSize.width"
106121
>
107-
<v-icon>mdi-github</v-icon>
122+
<v-icon icon="mdi:mdi-github" />
108123
</v-btn>
109124

110125
<v-btn
@@ -115,7 +130,7 @@
115130
target="_blank"
116131
:width="iconSize.width"
117132
>
118-
<v-icon>mdi-npm</v-icon>
133+
<v-icon icon="mdi:mdi-npm" />
119134
</v-btn>
120135

121136
<v-btn
@@ -125,8 +140,14 @@
125140
:width="iconSize.width"
126141
@click="setTheme"
127142
>
128-
<v-icon v-if="themeName === 'dark'">mdi-weather-night</v-icon>
129-
<v-icon v-else>mdi-weather-sunny</v-icon>
143+
<v-icon
144+
v-if="themeName === 'dark'"
145+
icon="mdi:mdi-weather-night"
146+
/>
147+
<v-icon
148+
v-else
149+
icon="mdi:mdi-weather-sunny"
150+
/>
130151
</v-btn>
131152
</v-app-bar>
132153
</template>

src/plugin/VInlineCheckbox.vue

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,15 @@
1010
:style="fieldDisplayStyle"
1111
@click="toggleField"
1212
>
13-
<BooleanIcons v-model="value" />
13+
<BooleanIcons
14+
v-model="value"
15+
:icon-false="settings.iconFalse"
16+
:icon-false-color="settings.iconFalseColor"
17+
:icon-false-title="settings.iconFalseTitle"
18+
:icon-true="settings.iconTrue"
19+
:icon-true-color="settings.iconTrueColor"
20+
:icon-true-title="settings.iconTrueTitle"
21+
/>
1422
</span>
1523

1624
<span
@@ -61,15 +69,17 @@
6169
>
6270
<v-btn
6371
class="ms-1"
72+
:color="settings.cancelButtonColor"
6473
icon
65-
size="x-small"
66-
variant="text"
74+
:size="settings.cancelButtonSize"
75+
:title="settings.cancelButtonTitle"
76+
:variant="settings.cancelButtonVariant"
6777
@click="toggleField"
6878
>
6979
<v-icon
7080
v-if="!settings.fieldOnly"
71-
:icon="cancelIcon"
72-
title="Exit"
81+
:color="settings.cancelIconColor"
82+
:icon="settings.cancelIcon"
7383
/>
7484
</v-btn>
7585
</template>

src/plugin/VInlineSelect.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,21 @@
5555
#append
5656
>
5757
<SaveFieldButtons
58+
:cancel-button-color="settings.cancelButtonColor"
59+
:cancel-button-size="settings.cancelButtonSize"
60+
:cancel-button-title="settings.cancelButtonTitle"
61+
:cancel-button-variant="settings.cancelButtonVariant"
5862
:cancel-icon="settings.cancelIcon"
63+
:cancel-icon-color="settings.cancelIconColor"
5964
:field-only="settings.fieldOnly"
6065
:hide-save-icon="settings.hideSaveIcon"
6166
:loading="loading"
6267
:loading-icon="settings.loadingIcon"
6368
:loading-icon-color="settings.loadingIconColor"
69+
:save-button-color="settings.saveButtonColor"
70+
:save-button-size="settings.saveButtonSize"
71+
:save-button-title="settings.saveButtonTitle"
72+
:save-button-variant="settings.saveButtonVariant"
6473
:save-icon="settings.saveIcon"
6574
:save-icon-color="settings.saveIconColor"
6675
@close="closeField"

src/plugin/VInlineSwitch.vue

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,15 @@
1010
:style="fieldDisplayStyle"
1111
@click="toggleField"
1212
>
13-
<BooleanIcons v-model="value" />
13+
<BooleanIcons
14+
v-model="value"
15+
:icon-false="settings.iconFalse"
16+
:icon-false-color="settings.iconFalseColor"
17+
:icon-false-title="settings.iconFalseTitle"
18+
:icon-true="settings.iconTrue"
19+
:icon-true-color="settings.iconTrueColor"
20+
:icon-true-title="settings.iconTrueTitle"
21+
/>
1422
</span>
1523

1624
<span
@@ -61,15 +69,17 @@
6169
>
6270
<v-btn
6371
class="ms-1"
72+
:color="settings.cancelButtonColor"
6473
icon
65-
size="x-small"
66-
variant="text"
74+
:size="settings.cancelButtonSize"
75+
:title="settings.cancelButtonTitle"
76+
:variant="settings.cancelButtonVariant"
6777
@click="toggleField"
6878
>
6979
<v-icon
7080
v-if="!settings.fieldOnly"
81+
:color="settings.cancelIconColor"
7182
:icon="cancelIcon"
72-
title="Exit"
7383
/>
7484
</v-btn>
7585
</template>

src/plugin/VInlineTextField.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,21 @@
4949
#append
5050
>
5151
<SaveFieldButtons
52+
:cancel-button-color="settings.cancelButtonColor"
53+
:cancel-button-size="settings.cancelButtonSize"
54+
:cancel-button-title="settings.cancelButtonTitle"
55+
:cancel-button-variant="settings.cancelButtonVariant"
5256
:cancel-icon="settings.cancelIcon"
57+
:cancel-icon-color="settings.cancelIconColor"
5358
:field-only="settings.fieldOnly"
5459
:hide-save-icon="settings.hideSaveIcon"
5560
:loading="loading"
5661
:loading-icon="settings.loadingIcon"
5762
:loading-icon-color="settings.loadingIconColor"
63+
:save-button-color="settings.saveButtonColor"
64+
:save-button-size="settings.saveButtonSize"
65+
:save-button-title="settings.saveButtonTitle"
66+
:save-button-variant="settings.saveButtonVariant"
5867
:save-icon="settings.saveIcon"
5968
:save-icon-color="settings.saveIconColor"
6069
@close="closeField"

src/plugin/VInlineTextarea.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,21 @@
5151
#append
5252
>
5353
<SaveFieldButtons
54+
:cancel-button-color="settings.cancelButtonColor"
55+
:cancel-button-size="settings.cancelButtonSize"
56+
:cancel-button-title="settings.cancelButtonTitle"
57+
:cancel-button-variant="settings.cancelButtonVariant"
5458
:cancel-icon="settings.cancelIcon"
59+
:cancel-icon-color="settings.cancelIconColor"
5560
:field-only="settings.fieldOnly"
5661
:hide-save-icon="settings.hideSaveIcon"
5762
:loading="loading"
5863
:loading-icon="settings.loadingIcon"
5964
:loading-icon-color="settings.loadingIconColor"
65+
:save-button-color="settings.saveButtonColor"
66+
:save-button-size="settings.saveButtonSize"
67+
:save-button-title="settings.saveButtonTitle"
68+
:save-button-variant="settings.saveButtonVariant"
6069
:save-icon="settings.saveIcon"
6170
:save-icon-color="settings.saveIconColor"
6271
@close="closeField"

0 commit comments

Comments
 (0)