Skip to content

Commit 579d9c3

Browse files
webdevnerdstuffwebdevnerdstuff
authored
Merge pull request #2 from webdevnerdstuff/dev
Dev
2 parents bb36624 + 68e9afe commit 579d9c3

File tree

13 files changed

+558
-186
lines changed

13 files changed

+558
-186
lines changed

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

Lines changed: 97 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,20 @@
1414
<VInlineSwitch
1515
v-model="item.raw.active"
1616
api-route="api/posts"
17+
:cancel-button-color="componentOptions.cancelButtonColor"
18+
:cancel-button-variant="componentOptions.cancelButtonVariant"
19+
:cancel-icon="componentOptions.cancelIcon"
20+
:cancel-icon-color="componentOptions.cancelIconColor"
21+
:cancel-icon-text="componentOptions.cancelIconText"
22+
:close-siblings="componentOptions.closeSiblings"
1723
:color="componentOptions.color"
1824
:disabled="componentOptions.disabled"
19-
:do-not-save="false"
25+
:do-not-save="componentOptions.doNotSave"
2026
:field-only="componentOptions.fieldOnly"
27+
:icon-false="componentOptions.iconFalse"
28+
:icon-false-title="componentOptions.iconFalseTitle"
29+
:icon-true="componentOptions.iconTrue"
30+
:icon-true-title="componentOptions.iconTrueTitle"
2131
:item="item"
2232
:label="componentOptions.label"
2333
name="active"
@@ -27,16 +37,22 @@
2737
:underlined="componentOptions.underlined"
2838
@error="showError = $event"
2939
@loading="loading = $event"
40+
@update="updatedValue($event, 'switch')"
3041
/>
3142
</div>
3243
</template>
3344
<template #[`item.userId`]="{ item }">
3445
<VInlineSelect
3546
v-model="item.raw.user"
3647
api-route="api/posts"
48+
:cancel-button-color="componentOptions.cancelButtonColor"
49+
:cancel-button-variant="componentOptions.cancelButtonVariant"
50+
:cancel-icon-color="componentOptions.cancelIconColor"
51+
:cancel-icon-text="componentOptions.cancelIconText"
52+
:close-siblings="componentOptions.closeSiblings"
3753
:color="componentOptions.color"
3854
:disabled="componentOptions.disabled"
39-
:do-not-save="false"
55+
:do-not-save="componentOptions.doNotSave"
4056
:empty-text="componentOptions.emptyText"
4157
:field-only="componentOptions.fieldOnly"
4258
:hide-details="componentOptions.hideDetails"
@@ -48,62 +64,101 @@
4864
:label="componentOptions.label"
4965
name="active"
5066
:return-object="true"
67+
:save-button-color="componentOptions.saveButtonColor"
68+
:save-icon="componentOptions.saveIcon"
69+
:save-icon-color="componentOptions.saveIconColor"
70+
:save-icon-text="componentOptions.saveIconText"
5171
:underline-color="componentOptions.underlineColor"
5272
:underline-style="componentOptions.underlineStyle"
5373
:underline-width="componentOptions.underlineWidth"
5474
:underlined="componentOptions.underlined"
5575
@error="showError = $event"
5676
@loading="loading = $event"
77+
@update="updatedValue($event, 'select')"
5778
>
5879
</VInlineSelect>
5980
</template>
81+
6082
<template #[`item.title`]="{ item }">
6183
<VInlineTextField
6284
v-model="item.raw.title"
6385
api-route="api/posts"
86+
:cancel-button-color="componentOptions.cancelButtonColor"
87+
:cancel-button-variant="componentOptions.cancelButtonVariant"
88+
:cancel-icon-color="componentOptions.cancelIconColor"
89+
:cancel-icon-text="componentOptions.cancelIconText"
90+
:close-siblings="componentOptions.closeSiblings"
6491
:color="componentOptions.color"
6592
:disabled="componentOptions.disabled"
66-
:do-not-save="false"
93+
:do-not-save="componentOptions.doNotSave"
6794
:field-only="componentOptions.fieldOnly"
95+
:hide-details="componentOptions.hideDetails"
6896
:item="item"
6997
:label="componentOptions.label"
7098
name="title"
99+
required
100+
:save-button-color="componentOptions.saveButtonColor"
101+
:save-icon-color="componentOptions.saveIconColor"
102+
:save-icon-text="componentOptions.saveIconText"
103+
:truncate-length="componentOptions.truncateTextFieldLength"
71104
:underline-color="componentOptions.underlineColor"
72105
:underline-style="componentOptions.underlineStyle"
73106
:underline-width="componentOptions.underlineWidth"
74107
:underlined="componentOptions.underlined"
75108
@error="showError = $event"
76109
@loading="loading = $event"
110+
@update="updatedValue($event, 'text-field')"
77111
/>
78112
</template>
113+
79114
<template #[`item.body`]="{ item }">
80115
<VInlineTextarea
81116
v-model="item.raw.body"
82117
api-route="api/posts"
118+
:cancel-button-color="componentOptions.cancelButtonColor"
119+
:cancel-button-variant="componentOptions.cancelButtonVariant"
120+
:cancel-icon-color="componentOptions.cancelIconColor"
121+
:cancel-icon-text="componentOptions.cancelIconText"
122+
:close-siblings="componentOptions.closeSiblings"
83123
:color="componentOptions.color"
84124
:disabled="componentOptions.disabled"
85-
:do-not-save="false"
125+
:do-not-save="componentOptions.doNotSave"
86126
:field-only="componentOptions.fieldOnly"
127+
:hide-details="false"
87128
:item="item"
88129
:label="componentOptions.label"
89130
name="body"
131+
:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
132+
:save-button-color="componentOptions.saveButtonColor"
133+
:save-icon-color="componentOptions.saveIconColor"
134+
:save-icon-text="componentOptions.saveIconText"
135+
:truncate-length="componentOptions.truncateTextareaLength"
90136
:underline-color="componentOptions.underlineColor"
91137
:underline-style="componentOptions.underlineStyle"
92138
:underline-width="componentOptions.underlineWidth"
93139
:underlined="componentOptions.underlined"
94140
@error="showError = $event"
95141
@loading="loading = $event"
142+
@update="updatedValue($event, 'textarea')"
96143
/>
97144
</template>
145+
98146
<template #[`item.reviewed`]="{ item }">
99147
<div class="d-flex flex-align-center">
100148
<VInlineCheckbox
101149
v-model="item.raw.reviewed"
102150
api-route="api/posts"
151+
:cancel-button-color="componentOptions.cancelButtonColor"
152+
:cancel-button-variant="componentOptions.cancelButtonVariant"
153+
:cancel-icon-color="componentOptions.cancelIconColor"
154+
:cancel-icon-text="componentOptions.cancelIconText"
155+
:close-siblings="componentOptions.closeSiblings"
103156
:color="componentOptions.color"
104157
:disabled="componentOptions.disabled"
105-
:do-not-save="false"
158+
:do-not-save="componentOptions.doNotSave"
106159
:field-only="componentOptions.fieldOnly"
160+
:icon-false-title="componentOptions.iconFalseTitle"
161+
:icon-true-title="componentOptions.iconTrueTitle"
107162
:item="item"
108163
name="reviewed"
109164
:underline-color="componentOptions.underlineColor"
@@ -112,6 +167,7 @@
112167
:underlined="componentOptions.underlined"
113168
@error="showError = $event"
114169
@loading="loading = $event"
170+
@update="updatedValue($event, 'checkbox')"
115171
/>
116172
</div>
117173
</template>
@@ -146,13 +202,36 @@ const tableOptions = reactive({
146202
});
147203
148204
const componentOptions = reactive({
205+
cancelButtonColor: 'default',
206+
cancelButtonVariant: 'text',
207+
cancelIcon: undefined,
208+
cancelIconColor: 'default',
209+
cancelIconText: 'Cancel',
210+
closeSiblings: true,
149211
color: 'primary',
150212
disabled: false,
213+
doNotSave: false,
151214
emptyText: 'empty',
152215
fieldOnly: false,
153216
hideDetails: true,
154217
hideSelected: true,
218+
iconFalse: undefined,
219+
iconFalseTitle: undefined,
220+
iconTrue: undefined,
221+
iconTrueTitle: undefined,
155222
label: '',
223+
rules: {
224+
minLength(value) {
225+
return value?.length >= 5 || 'Min 5 characters';
226+
},
227+
required: value => !!value || 'Field is required',
228+
},
229+
saveButtonColor: 'default',
230+
saveIcon: undefined,
231+
saveIconColor: 'primary',
232+
saveIconText: 'Save',
233+
truncateTextFieldLength: 25,
234+
truncateTextareaLength: 75,
156235
underlineColor: 'primary',
157236
underlineStyle: 'dotted',
158237
underlineWidth: '1px',
@@ -217,6 +296,19 @@ function getUsers() {
217296
users.value = [...json.users];
218297
});
219298
};
299+
300+
/**
301+
* ? You can use this function to update the value in the database.
302+
* ? Instead of using the internal axios call.
303+
*
304+
* @param {any} val
305+
* @param {string} field
306+
*/
307+
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
308+
function updatedValue(val, field) {
309+
// Save updated values
310+
// console.log('updatedValue', val, field);
311+
}
220312
</script>
221313
222314
<style lang="scss" scoped>

‎src/playground/configs/database.json

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -98,18 +98,18 @@
9898
},
9999
{
100100
"id": 5,
101-
"name": "Chelsey Dietrich",
101+
"name": "Robert Ross",
102102
"active": false,
103-
"username": "Kamren",
104-
"email": "Lucio_Hettinger@annie.ca",
103+
"username": "joyofpainting",
104+
"email": "bobross@joyofpainting.com",
105105
"address": {
106-
"street": "Skiles Walks",
107-
"suite": "Suite 351",
108-
"city": "Roscoeview",
109-
"zipcode": "33263",
106+
"street": "400 Woodlawn Rd",
107+
"suite": "537",
108+
"city": "Gotha",
109+
"zipcode": "34734",
110110
"geo": {
111-
"lat": "-31.8129",
112-
"lng": "62.5342"
111+
"lat": "28.538320",
112+
"lng": "-81.5097323"
113113
}
114114
},
115115
"phone": "(254)954-1289",
@@ -243,7 +243,7 @@
243243
],
244244
"posts": [
245245
{
246-
"userId": null,
246+
"userId": 1,
247247
"id": 1,
248248
"active": null,
249249
"title": null,
@@ -259,63 +259,63 @@
259259
"reviewed": false
260260
},
261261
{
262-
"userId": 1,
262+
"userId": 4,
263263
"id": 3,
264264
"active": true,
265265
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
266266
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
267267
"reviewed": true
268268
},
269269
{
270-
"userId": 1,
270+
"userId": 2,
271271
"id": 4,
272272
"active": true,
273273
"title": "eum et est occaecati",
274274
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit",
275275
"reviewed": true
276276
},
277277
{
278-
"userId": 1,
278+
"userId": 10,
279279
"id": 5,
280280
"active": false,
281281
"title": "nesciunt quas odio",
282282
"body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque",
283283
"reviewed": false
284284
},
285285
{
286-
"userId": 1,
286+
"userId": 5,
287287
"id": 6,
288288
"active": false,
289289
"title": "dolorem eum magni eos aperiam quia",
290290
"body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae",
291291
"reviewed": false
292292
},
293293
{
294-
"userId": 1,
294+
"userId": 8,
295295
"id": 7,
296296
"active": true,
297297
"title": "magnam facilis autem",
298298
"body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas",
299299
"reviewed": true
300300
},
301301
{
302-
"userId": 1,
302+
"userId": 3,
303303
"id": 8,
304304
"active": true,
305305
"title": "dolorem dolore est ipsam",
306306
"body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae",
307307
"reviewed": true
308308
},
309309
{
310-
"userId": 1,
310+
"userId": 8,
311311
"id": 9,
312312
"active": true,
313313
"title": "nesciunt iure omnis dolorem tempora et accusantium",
314314
"body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas",
315315
"reviewed": true
316316
},
317317
{
318-
"userId": 1,
318+
"userId": 7,
319319
"id": 10,
320320
"active": true,
321321
"title": "optio molestias id quia eum",

‎src/plugin/VInlineCheckbox.vue

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -134,17 +134,19 @@ const fieldContainerClass = computed(() => useFieldContainerClass('checkbox', sh
134134
const fieldDisplayClass = computed(() => useDisplayContainerClass(
135135
'checkbox',
136136
settings.valueColor,
137-
settings.disabled,
138-
error.value,
139-
));
140-
const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
141-
settings.underlineColor,
142-
settings.underlineStyle,
143-
settings.underlineWidth,
144-
settings.color,
145-
error.value,
146-
settings.underlined,
137+
{
138+
disabled: settings.disabled,
139+
error,
140+
}
147141
));
142+
const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
143+
color: settings.color,
144+
error,
145+
underlineColor: settings.underlineColor,
146+
underlineStyle: settings.underlineStyle,
147+
underlineWidth: settings.underlineWidth,
148+
underlined: settings.underlined,
149+
}));
148150
149151
150152
// ------------------------------------------------ Toggle the field //
@@ -153,15 +155,14 @@ function toggleField() {
153155
return;
154156
}
155157
156-
const response = useToggleField(
157-
settings.item.id as number,
158-
showField.value,
158+
const response = useToggleField({
159159
attrs,
160+
closeSiblings: settings.closeSiblings,
161+
fieldOnly: settings.fieldOnly,
160162
props,
161-
timeOpened.value,
162-
settings.closeSiblings,
163-
settings.fieldOnly,
164-
);
163+
showField,
164+
timeOpened: timeOpened.value,
165+
});
165166
166167
settings = { ...settings, ...response.settings };
167168
showField.value = response.showField;
@@ -180,7 +181,12 @@ function saveValue(value: undefined) {
180181
loading.value = true;
181182
emit('loading', loading.value);
182183
183-
useSaveValue(settings, emit as keyof UseSaveValue, settings.name, value as keyof UseSaveValue)
184+
useSaveValue({
185+
emit: emit as keyof UseSaveValue,
186+
name: settings.name,
187+
settings,
188+
value: value as keyof UseSaveValue,
189+
})
184190
.then((response) => {
185191
error.value = response?.error as boolean ?? false;
186192
loading.value = false;

0 commit comments

Comments
 (0)