Skip to content

Commit c49ae9f

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updated playground template
1 parent 005fbd7 commit c49ae9f

File tree

1 file changed

+62
-60
lines changed

1 file changed

+62
-60
lines changed

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

Lines changed: 62 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -10,41 +10,41 @@
1010
:loading="tableOptions.loading"
1111
>
1212
<template #[`item.active`]="{ item }">
13-
<div class="d-flex flex-align-center">
14-
<VInlineSwitch
15-
v-model="item.raw.active"
16-
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"
23-
:color="componentOptions.color"
24-
:density="componentOptions.density"
25-
:disabled="componentOptions.disabled"
26-
:do-not-save="componentOptions.doNotSave"
27-
:field-only="componentOptions.fieldOnly"
28-
:icon-false="componentOptions.iconFalse"
29-
:icon-false-title="componentOptions.iconFalseTitle"
30-
:icon-true="componentOptions.iconTrue"
31-
:icon-true-title="componentOptions.iconTrueTitle"
32-
:item="item"
33-
:label="componentOptions.label"
34-
name="active"
35-
:underline-color="componentOptions.underlineColor"
36-
:underline-style="componentOptions.underlineStyle"
37-
:underline-width="componentOptions.underlineWidth"
38-
:underlined="componentOptions.underlined"
39-
@error="showError = $event"
40-
@loading="loading = $event"
41-
@update="updatedValue($event, 'switch')"
42-
/>
43-
</div>
13+
<VInlineSwitch
14+
v-model="item.raw.active"
15+
:align-items="componentOptions.alignItems"
16+
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"
23+
:color="componentOptions.color"
24+
:density="componentOptions.density"
25+
:disabled="componentOptions.disabled"
26+
:do-not-save="componentOptions.doNotSave"
27+
:field-only="componentOptions.fieldOnly"
28+
:icon-false="componentOptions.iconFalse"
29+
:icon-false-title="componentOptions.iconFalseTitle"
30+
:icon-true="componentOptions.iconTrue"
31+
:icon-true-title="componentOptions.iconTrueTitle"
32+
:item="item"
33+
:label="componentOptions.label"
34+
name="active"
35+
:underline-color="componentOptions.underlineColor"
36+
:underline-style="componentOptions.underlineStyle"
37+
:underline-width="componentOptions.underlineWidth"
38+
:underlined="componentOptions.underlined"
39+
@error="showError = $event"
40+
@loading="loading = $event"
41+
@update="updatedValue($event, 'switch')"
42+
/>
4443
</template>
4544
<template #[`item.userId`]="{ item }">
4645
<VInlineSelect
4746
v-model="item.raw.user"
47+
:align-items="componentOptions.alignItems"
4848
api-route="api/posts"
4949
:cancel-button-color="componentOptions.cancelButtonColor"
5050
:cancel-button-variant="componentOptions.cancelButtonVariant"
@@ -85,6 +85,7 @@
8585
<template #[`item.title`]="{ item }">
8686
<VInlineTextField
8787
v-model="item.raw.title"
88+
:align-items="componentOptions.alignItems"
8889
api-route="api/posts"
8990
:cancel-button-color="componentOptions.cancelButtonColor"
9091
:cancel-button-variant="componentOptions.cancelButtonVariant"
@@ -119,6 +120,7 @@
119120
<template #[`item.body`]="{ item }">
120121
<VInlineTextarea
121122
v-model="item.raw.body"
123+
:align-items="componentOptions.alignItems"
122124
api-route="api/posts"
123125
:cancel-button-color="componentOptions.cancelButtonColor"
124126
:cancel-button-variant="componentOptions.cancelButtonVariant"
@@ -151,33 +153,32 @@
151153
</template>
152154

153155
<template #[`item.reviewed`]="{ item }">
154-
<div class="d-flex flex-align-center">
155-
<VInlineCheckbox
156-
v-model="item.raw.reviewed"
157-
api-route="api/posts"
158-
:cancel-button-color="componentOptions.cancelButtonColor"
159-
:cancel-button-variant="componentOptions.cancelButtonVariant"
160-
:cancel-icon-color="componentOptions.cancelIconColor"
161-
:cancel-icon-text="componentOptions.cancelIconText"
162-
:close-siblings="componentOptions.closeSiblings"
163-
:color="componentOptions.color"
164-
:density="componentOptions.density"
165-
:disabled="componentOptions.disabled"
166-
:do-not-save="componentOptions.doNotSave"
167-
:field-only="componentOptions.fieldOnly"
168-
:icon-false-title="componentOptions.iconFalseTitle"
169-
:icon-true-title="componentOptions.iconTrueTitle"
170-
:item="item"
171-
name="reviewed"
172-
:underline-color="componentOptions.underlineColor"
173-
:underline-style="componentOptions.underlineStyle"
174-
:underline-width="componentOptions.underlineWidth"
175-
:underlined="componentOptions.underlined"
176-
@error="showError = $event"
177-
@loading="loading = $event"
178-
@update="updatedValue($event, 'checkbox')"
179-
/>
180-
</div>
156+
<VInlineCheckbox
157+
v-model="item.raw.reviewed"
158+
:align-items="componentOptions.alignItems"
159+
api-route="api/posts"
160+
:cancel-button-color="componentOptions.cancelButtonColor"
161+
:cancel-button-variant="componentOptions.cancelButtonVariant"
162+
:cancel-icon-color="componentOptions.cancelIconColor"
163+
:cancel-icon-text="componentOptions.cancelIconText"
164+
:close-siblings="componentOptions.closeSiblings"
165+
:color="componentOptions.color"
166+
:density="componentOptions.density"
167+
:disabled="componentOptions.disabled"
168+
:do-not-save="componentOptions.doNotSave"
169+
:field-only="componentOptions.fieldOnly"
170+
:icon-false-title="componentOptions.iconFalseTitle"
171+
:icon-true-title="componentOptions.iconTrueTitle"
172+
:item="item"
173+
name="reviewed"
174+
:underline-color="componentOptions.underlineColor"
175+
:underline-style="componentOptions.underlineStyle"
176+
:underline-width="componentOptions.underlineWidth"
177+
:underlined="componentOptions.underlined"
178+
@error="showError = $event"
179+
@loading="loading = $event"
180+
@update="updatedValue($event, 'checkbox')"
181+
/>
181182
</template>
182183
</v-data-table>
183184
</v-card>
@@ -210,12 +211,13 @@ const tableOptions = reactive({
210211
});
211212
212213
const componentOptions = reactive({
214+
alignItems: 'center',
213215
cancelButtonColor: 'default',
214216
cancelButtonVariant: 'text',
215217
cancelIcon: undefined,
216218
cancelIconColor: 'default',
217219
cancelIconText: 'Cancel',
218-
closeSiblings: true,
220+
closeSiblings: false,
219221
color: 'primary',
220222
density: 'compact',
221223
disabled: false,
@@ -243,7 +245,7 @@ const componentOptions = reactive({
243245
truncateTextareaLength: 75,
244246
underlineColor: 'primary',
245247
underlineStyle: 'dotted',
246-
underlineWidth: '1px',
248+
underlineWidth: '2px',
247249
underlined: true,
248250
variant: 'underlined',
249251
});

0 commit comments

Comments
 (0)