Skip to content

Commit d699cf2

Browse files
webdevnerdstuffwebdevnerdstuff
committed
* Update styles
* Remove alignItems prop
1 parent 43f6632 commit d699cf2

File tree

15 files changed

+130
-127
lines changed

15 files changed

+130
-127
lines changed

‎src/documentation/components/SelectComponent.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
<v-col cols="2">
2525
<VInlineSelect
2626
v-model="values.select"
27-
align-items="flex-end"
2827
:density="density"
2928
item-title="state"
3029
item-value="abbr"

‎src/documentation/components/TextFieldComponent.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
<v-col cols="2">
2525
<VInlineTextField
2626
v-model="values.textField"
27-
align-items="flex-end"
2827
:density="density"
2928
:loading-wait="false"
3029
:table-field="false"

‎src/documentation/components/TextareaComponent.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
<v-col cols="2">
2525
<VInlineTextarea
2626
v-model="values.textField"
27-
align-items="flex-start"
2827
:density="density"
2928
:loading-wait="false"
3029
rows="1"

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

Lines changed: 50 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<v-col cols="12">
33
<v-card elevation="5">
44
<v-data-table
5+
density="default"
56
:headers="headers"
67
:items="posts"
78
:items-per-page="tableOptions.itemsPerPage"
@@ -10,8 +11,8 @@
1011
<template #[`item.active`]="{ item }">
1112
<VInlineSwitch
1213
v-model="item.raw.active"
13-
:align-items="componentOptions.alignItems"
1414
:cancel-button-color="componentOptions.cancelButtonColor"
15+
:cancel-button-title="componentOptions.cancelButtonTitle"
1516
:cancel-button-variant="componentOptions.cancelButtonVariant"
1617
:cancel-icon="componentOptions.cancelIcon"
1718
:cancel-icon-color="componentOptions.cancelIconColor"
@@ -26,7 +27,6 @@
2627
:icon-true="componentOptions.iconTrue"
2728
:icon-true-title="componentOptions.iconTrueTitle"
2829
:item="item"
29-
:label="componentOptions.label"
3030
:loading="item.raw.loading"
3131
:loading-wait="componentOptions.loadingWait"
3232
name="active"
@@ -42,34 +42,35 @@
4242
<template #[`item.userId`]="{ item }">
4343
<VInlineSelect
4444
v-model="item.raw.user"
45-
:align-items="componentOptions.alignItems"
4645
:cancel-button-color="componentOptions.cancelButtonColor"
46+
:cancel-button-title="componentOptions.cancelButtonTitle"
4747
:cancel-button-variant="componentOptions.cancelButtonVariant"
4848
:cancel-icon-color="componentOptions.cancelIconColor"
49-
:cancel-icon-text="componentOptions.cancelIconText"
5049
:clearable="componentOptions.clearable"
5150
:close-siblings="componentOptions.closeSiblings"
5251
:color="componentOptions.color"
5352
:density="componentOptions.density"
5453
:disabled="componentOptions.disabled"
54+
:display-append-icon="componentOptions.displayAppendIcon"
55+
:display-append-icon-color="componentOptions.displayAppendIconColor"
56+
:display-append-inner-icon="componentOptions.displayAppendInnerIcon"
57+
:display-append-inner-icon-color="componentOptions.displayAppendInnerIconColor"
5558
:empty-text="componentOptions.emptyText"
5659
:field-only="componentOptions.fieldOnly"
57-
:hide-details="componentOptions.hideDetails"
5860
:hide-selected="componentOptions.hideSelected"
5961
:item="item"
6062
item-title="name"
6163
item-value="id"
6264
:items="users"
63-
:label="componentOptions.label"
6465
:loading="item.raw.loading"
6566
:loading-wait="componentOptions.loadingWait"
6667
:menu="componentOptions.menu"
6768
name="userId"
6869
return-object
6970
:save-button-color="componentOptions.saveButtonColor"
71+
:save-button-title="componentOptions.saveButtonTitle"
7072
:save-icon="componentOptions.saveIcon"
7173
:save-icon-color="componentOptions.saveIconColor"
72-
:save-icon-text="componentOptions.saveIconText"
7374
:underline-color="componentOptions.underlineColor"
7475
:underline-style="componentOptions.underlineStyle"
7576
:underline-width="componentOptions.underlineWidth"
@@ -84,24 +85,36 @@
8485
<template #[`item.title`]="{ item }">
8586
<VInlineTextField
8687
v-model="item.raw.title"
87-
:align-items="componentOptions.alignItems"
88+
:append-icon="componentOptions.appendIcon"
89+
:append-inner-icon="componentOptions.appendIcon"
8890
:cancel-button-color="componentOptions.cancelButtonColor"
91+
:cancel-button-title="componentOptions.cancelButtonTitle"
8992
:cancel-button-variant="componentOptions.cancelButtonVariant"
9093
:cancel-icon-color="componentOptions.cancelIconColor"
91-
:cancel-icon-text="componentOptions.cancelIconText"
94+
:clearable="componentOptions.clearable"
9295
:close-siblings="componentOptions.closeSiblings"
9396
:color="componentOptions.color"
9497
:density="componentOptions.density"
9598
:disabled="componentOptions.disabled"
99+
:display-append-icon="componentOptions.displayAppendIcon"
100+
:display-append-icon-color="componentOptions.displayAppendIconColor"
101+
:display-append-inner-icon="componentOptions.displayAppendInnerIcon"
102+
:display-append-inner-icon-color="componentOptions.displayAppendInnerIconColor"
103+
:display-prepend-icon="componentOptions.displayPrependIcon"
104+
:display-prepend-iconColor="componentOptions.displayPrependIconColor"
105+
:display-prepend-inner-icon="componentOptions.displayPrependInnerIcon"
106+
:display-prepend-inner-icon-color="componentOptions.displayPrependInnerIconColor"
96107
:field-only="componentOptions.fieldOnly"
97-
:hide-details="componentOptions.hideDetails"
98108
:item="item"
99-
:label="componentOptions.label"
100109
:loading="item.raw.loading"
101110
:loading-wait="componentOptions.loadingWait"
102111
name="title"
112+
:prepend-icon="componentOptions.appendIcon"
113+
:prepend-inner-icon="componentOptions.appendIcon"
103114
required
115+
:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
104116
:save-button-color="componentOptions.saveButtonColor"
117+
:save-button-title="componentOptions.saveButtonTitle"
105118
:save-button-variant="componentOptions.saveButtonVariant"
106119
:save-icon-color="componentOptions.saveIconColor"
107120
:save-icon-text="componentOptions.saveIconText"
@@ -113,30 +126,34 @@
113126
:variant="componentOptions.variant"
114127
@error="showError = $event"
115128
@update="updatedValue(item.raw, 'title')"
116-
/>
129+
>
130+
<template #[`display-append-icon`]>foo</template>
131+
</VInlineTextField>
117132
</template>
118133

119134
<template #[`item.body`]="{ item }">
120135
<VInlineTextarea
121136
v-model="item.raw.body"
122-
:align-items="componentOptions.alignItems"
123137
:cancel-button-color="componentOptions.cancelButtonColor"
138+
:cancel-button-title="componentOptions.cancelButtonTitle"
124139
:cancel-button-variant="componentOptions.cancelButtonVariant"
125140
:cancel-icon-color="componentOptions.cancelIconColor"
126-
:cancel-icon-text="componentOptions.cancelIconText"
127141
:close-siblings="componentOptions.closeSiblings"
128142
:color="componentOptions.color"
129143
:density="componentOptions.density"
130144
:disabled="componentOptions.disabled"
145+
:display-append-icon="componentOptions.displayAppendIcon"
146+
:display-append-icon-color="componentOptions.displayAppendIconColor"
147+
:display-append-inner-icon="componentOptions.displayAppendInnerIcon"
148+
:display-append-inner-icon-color="componentOptions.displayAppendInnerIconColor"
131149
:field-only="componentOptions.fieldOnly"
132-
:hide-details="false"
133150
:item="item"
134-
:label="componentOptions.label"
135151
:loading="item.raw.loading"
136152
:loading-wait="componentOptions.loadingWait"
137153
name="body"
138154
:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
139155
:save-button-color="componentOptions.saveButtonColor"
156+
:save-button-title="componentOptions.saveButtonTitle"
140157
:save-icon-color="componentOptions.saveIconColor"
141158
:save-icon-text="componentOptions.saveIconText"
142159
:truncate-length="componentOptions.truncateTextareaLength"
@@ -153,11 +170,10 @@
153170
<template #[`item.reviewed`]="{ item }">
154171
<VInlineCheckbox
155172
v-model="item.raw.reviewed"
156-
:align-items="componentOptions.alignItems"
157173
:cancel-button-color="componentOptions.cancelButtonColor"
174+
:cancel-button-title="componentOptions.cancelButtonTitle"
158175
:cancel-button-variant="componentOptions.cancelButtonVariant"
159176
:cancel-icon-color="componentOptions.cancelIconColor"
160-
:cancel-icon-text="componentOptions.cancelIconText"
161177
:close-siblings="componentOptions.closeSiblings"
162178
:color="componentOptions.color"
163179
:density="componentOptions.density"
@@ -200,26 +216,36 @@ const tableOptions = reactive({
200216
});
201217
202218
const componentOptions = reactive({
203-
alignItems: 'center',
219+
// appendIcon: 'mdi:mdi-cog',
204220
cancelButtonColor: 'default',
221+
cancelButtonTitle: 'Cancel',
205222
cancelButtonVariant: 'text',
206223
cancelIcon: undefined,
207224
cancelIconColor: 'default',
208-
cancelIconText: 'Cancel',
209225
clearable: false,
210-
closeSiblings: true,
226+
closeSiblings: false,
211227
color: 'primary',
212228
density: 'compact',
213229
disabled: false,
230+
// displayAppendIcon: 'mdi:mdi-pencil',
231+
// displayAppendIconColor: 'primary',
232+
// displayAppendIconSize: 'x-small',
233+
// displayAppendInnerIcon: 'mdi:mdi-pencil',
234+
// displayAppendInnerIconColor: 'secondary',
235+
// displayAppendInnerIconSize: 'x-small',
236+
// displayPrependIcon: 'mdi:mdi-pencil',
237+
// displayPrependIconColor: 'danger',
238+
// displayPrependIconSize: 'x-small',
239+
// displayPrependInnerIcon: 'mdi:mdi-pencil',
240+
// displayPrependInnerIconColor: 'success',
241+
// displayPrependInnerIconSize: 'x-small',
214242
emptyText: 'empty',
215243
fieldOnly: false,
216-
hideDetails: true,
217244
hideSelected: false,
218245
iconFalse: undefined,
219246
iconFalseTitle: undefined,
220247
iconTrue: undefined,
221248
iconTrueTitle: undefined,
222-
label: '',
223249
loadingWait: true,
224250
menu: true,
225251
rules: {
@@ -229,10 +255,10 @@ const componentOptions = reactive({
229255
required: value => !!value || 'Field is required',
230256
},
231257
saveButtonColor: 'default',
258+
saveButtonTitle: 'Save',
232259
saveButtonVariant: 'text',
233260
saveIcon: undefined,
234261
saveIconColor: 'primary',
235-
saveIconText: 'Save',
236262
truncateTextFieldLength: 25,
237263
truncateTextareaLength: 75,
238264
underlineColor: 'primary',

‎src/plugin/VInlineCheckbox.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -218,9 +218,7 @@ const displayValueClass = computed(() => useDisplayValueClass(
218218
}
219219
));
220220
221-
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
222-
alignItems: settings.alignItems,
223-
}));
221+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
224222
225223
const displayValueStyle = computed(() => useDisplayValueStyles({
226224
color: settings.color,

‎src/plugin/VInlineSelect.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -228,9 +228,7 @@ const fieldContainerClass = computed(() => useFieldContainerClass({
228228
name: 'select',
229229
}));
230230
231-
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
232-
alignItems: settings.alignItems,
233-
}));
231+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
234232
235233
236234
// ------------------------------------------------ Key event to cancel/close field //

‎src/plugin/VInlineSwitch.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -199,9 +199,7 @@ const displayValueClass = computed(() => useDisplayValueClass(
199199
}
200200
));
201201
202-
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
203-
alignItems: settings.alignItems,
204-
}));
202+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
205203
206204
const displayValueStyle = computed(() => useDisplayValueStyles({
207205
color: settings.color,

‎src/plugin/VInlineTextField.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -221,9 +221,7 @@ const fieldContainerClass = computed(() => useFieldContainerClass({
221221
name: 'text-field',
222222
}));
223223
224-
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
225-
alignItems: settings.alignItems,
226-
}));
224+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
227225
228226
229227
// ------------------------------------------------ Key event to cancel/close field //

‎src/plugin/VInlineTextarea.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -223,9 +223,7 @@ const fieldContainerClass = computed(() => useFieldContainerClass({
223223
name: 'textarea',
224224
}));
225225
226-
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
227-
alignItems: settings.alignItems,
228-
}));
226+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
229227
230228
231229
// ------------------------------------------------ Key event to cancel/close field //

‎src/plugin/composables/bindings.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33

44
const excludedSettings: string[] = [
5-
'alignItems',
65
'cancelButtonColor',
76
'cancelButtonSize',
87
'cancelButtonTitle',

0 commit comments

Comments
 (0)