Skip to content

Commit 287e6f9

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding beta of VInlineAutocomplete
1 parent 3454ae8 commit 287e6f9

File tree

10 files changed

+587
-49
lines changed

10 files changed

+587
-49
lines changed

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,3 @@ dist-ssr
2626

2727

2828
src/plugin/**/*.bk.*
29-
src/plugin/components/VInlineAutocomplete

‎src/playground/configs/PlaygroundApp.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<v-col class="v-col-12">
2323
<v-container>
2424
<v-row class="row mb-4">
25-
<PlaygroundPage />
25+
<PlaygroundPage is-playground />
2626
</v-row>
2727
</v-container>
2828
</v-col>

‎src/playground/configs/templates/PlaygroundPage.vue

Lines changed: 78 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
<template>
2-
<v-col cols="12">
2+
<v-col
3+
v-if="isPlayground"
4+
cols="12"
5+
>
36
<v-btn
47
class="me-2"
58
@click="componentOptions.disabled = !componentOptions.disabled"
69
>
710
Toggle Disabled: {{ componentOptions.disabled }}
811
</v-btn>
12+
13+
<ToggleColor @update="selectedColor = $event" />
914
</v-col>
1015

1116
<v-col cols="12">
@@ -19,21 +24,22 @@
1924
:loading="tableOptions.loading"
2025
>
2126
<template #[`item.active`]="{ item }">
27+
2228
<VInlineSwitch
2329
v-model="item.active"
24-
:cancel-button-color="componentOptions.cancelButtonColor"
30+
:cancel-button-color="selectedColor"
2531
:cancel-button-title="componentOptions.cancelButtonTitle"
2632
:cancel-button-variant="componentOptions.cancelButtonVariant"
2733
:cancel-icon="componentOptions.cancelIcon"
28-
:cancel-icon-color="componentOptions.cancelIconColor"
34+
:cancel-icon-color="selectedColor"
2935
:card-field="cardFieldState"
3036
:card-offset-x="componentOptions.cardOffsetX"
3137
:card-offset-y="componentOptions.cardOffsetY"
3238
:card-props="componentOptions.cardProps"
3339
:cell="componentOptions.cell"
3440
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
3541
:close-siblings="componentOptions.closeSiblings"
36-
:color="componentOptions.color"
42+
:color="selectedColor"
3743
:density="componentOptions.density"
3844
:disabled="componentOptions.disabled"
3945
:field-only="componentOptions.fieldOnly"
@@ -47,7 +53,7 @@
4753
:loading="item.loading"
4854
:loading-wait="componentOptions.loadingWait"
4955
name="active"
50-
:underline-color="componentOptions.underlineColor"
56+
:underline-color="selectedColor"
5157
:underline-style="componentOptions.underlineStyle"
5258
:underline-width="componentOptions.underlineWidth"
5359
:underlined="componentOptions.underlined"
@@ -59,10 +65,10 @@
5965
<template #[`item.userId`]="{ item }">
6066
<VInlineSelect
6167
v-model="item.user"
62-
:cancel-button-color="componentOptions.cancelButtonColor"
68+
:cancel-button-color="selectedColor"
6369
:cancel-button-title="componentOptions.cancelButtonTitle"
6470
:cancel-button-variant="componentOptions.cancelButtonVariant"
65-
:cancel-icon-color="componentOptions.cancelIconColor"
71+
:cancel-icon-color="selectedColor"
6672
:card-field="cardFieldState"
6773
:card-offset-x="componentOptions.cardOffsetX"
6874
:card-offset-y="componentOptions.cardOffsetY"
@@ -71,13 +77,18 @@
7177
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
7278
:clearable="componentOptions.clearable"
7379
:close-siblings="componentOptions.closeSiblings"
74-
:color="componentOptions.color"
80+
:color="selectedColor"
7581
:density="componentOptions.density"
7682
:disabled="componentOptions.disabled"
7783
:display-append-icon="componentOptions.displayAppendIcon"
78-
:display-append-icon-color="componentOptions.displayAppendIconColor"
84+
:display-append-icon-color="selectedColor"
85+
:display-append-icon-size="componentOptions.displayAppendIconSize"
7986
:display-append-inner-icon="componentOptions.displayAppendInnerIcon"
80-
:display-append-inner-icon-color="componentOptions.displayAppendInnerIconColor"
87+
:display-append-inner-icon-color="selectedColor"
88+
:display-prepend-icon="componentOptions.displayPrependIcon"
89+
:display-prepend-icon-color="selectedColor"
90+
:display-prepend-inner-icon="componentOptions.displayPrependInnerIcon"
91+
:display-prepend-inner-icon-color="selectedColor"
8192
:empty-text="componentOptions.emptyText"
8293
:field-only="componentOptions.fieldOnly"
8394
:hide-cancel-icon="componentOptions.hideCancelIcon"
@@ -93,11 +104,11 @@
93104
:menu="componentOptions.menu"
94105
name="userId"
95106
return-object
96-
:save-button-color="componentOptions.saveButtonColor"
107+
:save-button-color="selectedColor"
97108
:save-button-title="componentOptions.saveButtonTitle"
98109
:save-icon="componentOptions.saveIcon"
99-
:save-icon-color="componentOptions.saveIconColor"
100-
:underline-color="componentOptions.underlineColor"
110+
:save-icon-color="selectedColor"
111+
:underline-color="selectedColor"
101112
:underline-style="componentOptions.underlineStyle"
102113
:underline-width="componentOptions.underlineWidth"
103114
:underlined="componentOptions.underlined"
@@ -112,27 +123,26 @@
112123
<VInlineAutocomplete
113124
v-model="item.user"
114125
:auto-select-first="componentOptions.autoSelectFirst"
115-
:cancel-button-color="componentOptions.cancelButtonColor"
126+
:cancel-button-color="selectedColor"
116127
:cancel-button-title="componentOptions.cancelButtonTitle"
117128
:cancel-button-variant="componentOptions.cancelButtonVariant"
118-
:cancel-icon-color="componentOptions.cancelIconColor"
129+
:cancel-icon-color="selectedColor"
119130
:card-field="cardFieldState"
120131
:card-offset-x="componentOptions.cardOffsetX"
121132
:card-offset-y="componentOptions.cardOffsetY"
122133
:card-props="componentOptions.cardProps"
123134
:cell="componentOptions.cell"
124135
:clearable="componentOptions.clearable"
125136
:close-siblings="componentOptions.closeSiblings"
126-
:color="componentOptions.color"
137+
:color="selectedColor"
127138
:density="componentOptions.density"
128139
:disabled="componentOptions.disabled"
129140
:display-append-icon="componentOptions.displayAppendIcon"
130-
:display-append-icon-color="componentOptions.displayAppendIconColor"
141+
:display-append-icon-color="selectedColor"
131142
:display-append-inner-icon="componentOptions.displayAppendInnerIcon"
132-
:display-append-inner-icon-color="componentOptions.displayAppendInnerIconColor"
143+
:display-append-inner-icon-color="selectedColor"
133144
:empty-text="componentOptions.emptyText"
134145
:field-only="componentOptions.fieldOnly"
135-
136146
:hide-details="componentOptions.hideDetails"
137147
:hide-selected="componentOptions.hideSelected"
138148
item-title="name"
@@ -144,19 +154,18 @@
144154
:menu="componentOptions.menu"
145155
name="userId"
146156
return-object
147-
:save-button-color="componentOptions.saveButtonColor"
157+
:save-button-color="selectedColor"
148158
:save-button-title="componentOptions.saveButtonTitle"
149159
:save-icon="componentOptions.saveIcon"
150-
:save-icon-color="componentOptions.saveIconColor"
160+
:save-icon-color="selectedColor"
151161
:save-on-select="componentOptions.saveOnSelect"
152-
:underline-color="componentOptions.underlineColor"
162+
:underline-color="selectedColor"
153163
:underline-style="componentOptions.underlineStyle"
154164
:underline-width="componentOptions.underlineWidth"
155165
:underlined="componentOptions.underlined"
156166
:variant="componentOptions.variant"
157167
@error="showError = $event"
158168
@update="updatedValue(item, 'userId')"
159-
@update:model-value="foobar"
160169
@update:search="console.log(`searching: ${$event}`)"
161170
>
162171
</VInlineAutocomplete>
@@ -165,10 +174,10 @@
165174
<template #[`item.title`]="{ item }">
166175
<VInlineTextField
167176
v-model="item.title"
168-
:cancel-button-color="componentOptions.cancelButtonColor"
177+
:cancel-button-color="selectedColor"
169178
:cancel-button-title="componentOptions.cancelButtonTitle"
170179
:cancel-button-variant="componentOptions.cancelButtonVariant"
171-
:cancel-icon-color="componentOptions.cancelIconColor"
180+
:cancel-icon-color="selectedColor"
172181
:card-field="cardFieldState"
173182
:card-offset-x="componentOptions.cardOffsetX"
174183
:card-offset-y="componentOptions.cardOffsetY"
@@ -177,9 +186,18 @@
177186
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
178187
:clearable="componentOptions.clearable"
179188
:close-siblings="componentOptions.closeSiblings"
180-
:color="componentOptions.color"
189+
:color="selectedColor"
181190
:density="componentOptions.density"
182191
:disabled="componentOptions.disabled"
192+
:display-append-icon="componentOptions.displayAppendIcon"
193+
:display-append-icon-color="selectedColor"
194+
:display-append-icon-size="componentOptions.displayAppendIconSize"
195+
:display-append-inner-icon="componentOptions.displayAppendInnerIcon"
196+
:display-append-inner-icon-color="selectedColor"
197+
:display-prepend-icon="componentOptions.displayPrependIcon"
198+
:display-prepend-icon-color="selectedColor"
199+
:display-prepend-inner-icon="componentOptions.displayPrependInnerIcon"
200+
:display-prepend-inner-icon-color="selectedColor"
183201
:field-only="componentOptions.fieldOnly"
184202
:hide-cancel-icon="componentOptions.hideCancelIcon"
185203
:hide-details="componentOptions.hideDetails"
@@ -190,12 +208,12 @@
190208
name="title"
191209
required
192210
:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
193-
:save-button-color="componentOptions.saveButtonColor"
211+
:save-button-color="selectedColor"
194212
:save-button-title="componentOptions.saveButtonTitle"
195213
:save-button-variant="componentOptions.saveButtonVariant"
196-
:save-icon-color="componentOptions.saveIconColor"
214+
:save-icon-color="selectedColor"
197215
:truncate-length="componentOptions.truncateTextFieldLength"
198-
:underline-color="componentOptions.underlineColor"
216+
:underline-color="selectedColor"
199217
:underline-style="componentOptions.underlineStyle"
200218
:underline-width="componentOptions.underlineWidth"
201219
:underlined="componentOptions.underlined"
@@ -209,10 +227,10 @@
209227
<template #[`item.body`]="{ item }">
210228
<VInlineTextarea
211229
v-model="item.body"
212-
:cancel-button-color="componentOptions.cancelButtonColor"
230+
:cancel-button-color="selectedColor"
213231
:cancel-button-title="componentOptions.cancelButtonTitle"
214232
:cancel-button-variant="componentOptions.cancelButtonVariant"
215-
:cancel-icon-color="componentOptions.cancelIconColor"
233+
:cancel-icon-color="selectedColor"
216234
:card-field="cardFieldState"
217235
:card-offset-x="componentOptions.cardOffsetX"
218236
:card-offset-y="componentOptions.cardOffsetY"
@@ -221,13 +239,18 @@
221239
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
222240
:clearable="componentOptions.clearable"
223241
:close-siblings="componentOptions.closeSiblings"
224-
:color="componentOptions.color"
242+
:color="selectedColor"
225243
:density="componentOptions.density"
226244
:disabled="componentOptions.disabled"
227245
:display-append-icon="componentOptions.displayAppendIcon"
228-
:display-append-icon-color="componentOptions.displayAppendIconColor"
246+
:display-append-icon-color="selectedColor"
247+
:display-append-icon-size="componentOptions.displayAppendIconSize"
229248
:display-append-inner-icon="componentOptions.displayAppendInnerIcon"
230-
:display-append-inner-icon-color="componentOptions.displayAppendInnerIconColor"
249+
:display-append-inner-icon-color="selectedColor"
250+
:display-prepend-icon="componentOptions.displayPrependIcon"
251+
:display-prepend-icon-color="selectedColor"
252+
:display-prepend-inner-icon="componentOptions.displayPrependInnerIcon"
253+
:display-prepend-inner-icon-color="selectedColor"
231254
:field-only="componentOptions.fieldOnly"
232255
:hide-cancel-icon="componentOptions.hideCancelIcon"
233256
:hide-details="componentOptions.hideDetails"
@@ -237,11 +260,11 @@
237260
:loading-wait="componentOptions.loadingWait"
238261
name="body"
239262
:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
240-
:save-button-color="componentOptions.saveButtonColor"
263+
:save-button-color="selectedColor"
241264
:save-button-title="componentOptions.saveButtonTitle"
242-
:save-icon-color="componentOptions.saveIconColor"
265+
:save-icon-color="selectedColor"
243266
:truncate-length="componentOptions.truncateTextareaLength"
244-
:underline-color="componentOptions.underlineColor"
267+
:underline-color="selectedColor"
245268
:underline-style="componentOptions.underlineStyle"
246269
:underline-width="componentOptions.underlineWidth"
247270
:underlined="componentOptions.underlined"
@@ -278,18 +301,18 @@
278301
<template #[`item.reviewed`]="{ item }">
279302
<VInlineCheckbox
280303
v-model="item.reviewed"
281-
:cancel-button-color="componentOptions.cancelButtonColor"
304+
:cancel-button-color="selectedColor"
282305
:cancel-button-title="componentOptions.cancelButtonTitle"
283306
:cancel-button-variant="componentOptions.cancelButtonVariant"
284-
:cancel-icon-color="componentOptions.cancelIconColor"
307+
:cancel-icon-color="selectedColor"
285308
:card-field="cardFieldState"
286309
:card-offset-x="componentOptions.cardOffsetX"
287310
:card-offset-y="componentOptions.cardOffsetY"
288311
:card-props="componentOptions.cardProps"
289312
:cell="componentOptions.cell"
290313
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
291314
:close-siblings="componentOptions.closeSiblings"
292-
:color="componentOptions.color"
315+
:color="selectedColor"
293316
:density="componentOptions.density"
294317
:disabled="componentOptions.disabled"
295318
:field-only="componentOptions.fieldOnly"
@@ -301,7 +324,7 @@
301324
:loading="item.loading"
302325
:loading-wait="componentOptions.loadingWait"
303326
name="reviewed"
304-
:underline-color="componentOptions.underlineColor"
327+
:underline-color="selectedColor"
305328
:underline-style="componentOptions.underlineStyle"
306329
:underline-width="componentOptions.underlineWidth"
307330
:underlined="componentOptions.underlined"
@@ -346,6 +369,7 @@
346369
/* eslint-disable @typescript-eslint/no-explicit-any */
347370
/* eslint-disable @typescript-eslint/no-unused-vars */
348371
import { onMounted, onBeforeMount, reactive, ref, computed, watch } from 'vue';
372+
import ToggleColor from '@/playground/configs/components/ToggleColor.vue';
349373
import type { VDataTable, VDataTableRow } from 'vuetify/components';
350374
import type {
351375
GlobalDensity,
@@ -363,6 +387,13 @@ type Items = VDataTable['$props']['items'];
363387
interface Props extends SharedProps { [key: string]: any; }
364388
365389
390+
defineProps({
391+
isPlayground: {
392+
default: false,
393+
type: Boolean,
394+
},
395+
});
396+
366397
// ? Components are already loaded via the configs/playground.ts file //
367398
onMounted(() => {
368399
getPosts();
@@ -393,14 +424,14 @@ const componentOptions = reactive<Props>({
393424
cardProps: {},
394425
cell: false,
395426
cellUnderlineFullWidth: true,
396-
clearable: false,
427+
clearable: true,
397428
closeSiblings: true,
398429
color: 'primary',
399430
density: 'compact' as GlobalDensity,
400431
disabled: false,
401-
// displayAppendIcon: '' as VIconValue,
432+
// displayAppendIcon: 'mdi:mdi-cog' as VIconValue,
402433
// displayAppendIconColor: '' as VIconColor,
403-
// displayAppendIconSize: 'x-small',
434+
// displayAppendIconSize: 'x-large',
404435
// displayAppendInnerIcon: '' as VIconValue,
405436
// displayAppendInnerIconColor: '' as VIconColor,
406437
// displayAppendInnerIconSize: 'x-large',
@@ -495,6 +526,9 @@ const headers = ref<Headers>([
495526
]);
496527
497528
529+
// ? Color testing //
530+
const selectedColor = ref<string>('primary');
531+
498532
// ? Changes the type of field the table uses //
499533
const isCardField = ref<boolean>(false);
500534
const cardFieldState = computed<boolean>(() => isCardField.value);

0 commit comments

Comments
 (0)