Skip to content

Commit 9ba2a62

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding some props and working on fine tuning styles
1 parent ccc39d6 commit 9ba2a62

File tree

13 files changed

+253
-146
lines changed

13 files changed

+253
-146
lines changed

‎src/documentation/components/SelectComponent.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<v-col cols="2">
2525
<VInlineSelect
2626
v-model="values.select"
27+
align-items="flex-end"
2728
:density="density"
2829
do-not-save
2930
item-title="state"
@@ -36,6 +37,7 @@
3637
</v-col>
3738

3839
<v-col cols="2">
40+
<!-- <div style="border: 1px solid #f00;"> -->
3941
<div>
4042
<v-select
4143
v-model="values.select"

‎src/documentation/components/TextFieldComponent.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<v-col cols="2">
2525
<VInlineTextField
2626
v-model="values.textField"
27+
align-items="flex-end"
2728
:density="density"
2829
do-not-save
2930
:table-field="false"

‎src/documentation/components/TextareaComponent.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@
2424
<v-col cols="2">
2525
<VInlineTextarea
2626
v-model="values.textField"
27+
align-items="flex-start"
2728
:density="density"
2829
do-not-save
2930
rows="1"
30-
:table-field="false"
31+
:table-field="true"
3132
:variant="variant"
3233
></VInlineTextarea>
3334
</v-col>

‎src/plugin/VInlineCheckbox.vue

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<div :class="inlineFieldsContainerClass">
2+
<div
3+
:class="inlineFieldsContainerClass"
4+
:style="inlineFieldsContainerStyle"
5+
>
36
<div
47
v-if="!showField && !settings.fieldOnly"
58
class="v-inline-fields--container-display-container"
@@ -27,7 +30,7 @@
2730

2831
<div
2932
v-else
30-
class="pb-1 d-inline-flex align-center justify-center"
33+
class="d-inline-flex align-center justify-center"
3134
:class="displayValueClass"
3235
:style="displayValueStyle"
3336
@click="toggleField"
@@ -114,7 +117,10 @@ import {
114117
useFieldContainerClass,
115118
useInlineFieldsContainerClass,
116119
} from './composables/classes';
117-
import { useDisplayValueStyles } from './composables/styles';
120+
import {
121+
useDisplayValueStyles,
122+
useInlineFieldsContainerStyle,
123+
} from './composables/styles';
118124
import inlineEmits from './utils/emits';
119125
120126
@@ -141,6 +147,7 @@ const displayValue = computed(() => {
141147
// ------------------------------------------------ Class & Styles //
142148
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
143149
density: settings.density,
150+
disabled: settings.disabled,
144151
field: 'v-checkbox',
145152
tableField: settings.tableField,
146153
}));
@@ -163,11 +170,14 @@ const displayValueClass = computed(() => useDisplayValueClass(
163170
'checkbox',
164171
settings.valueColor,
165172
{
166-
disabled: settings.disabled,
167173
error,
168174
}
169175
));
170176
177+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
178+
alignItems: settings.alignItems,
179+
}));
180+
171181
const displayValueStyle = computed(() => useDisplayValueStyles({
172182
color: settings.color,
173183
error,

‎src/plugin/VInlineSelect.vue

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
<template>
2-
<div :class="inlineFieldsContainerClass">
2+
<div
3+
:class="inlineFieldsContainerClass"
4+
:style="inlineFieldsContainerStyle"
5+
>
36
<div
47
v-if="!showField && !settings.fieldOnly"
5-
class="v-inline-fields--container-display-container"
68
:class="displayContainerClass"
79
>
810
<div :class="displayInputControlClasses">
9-
<span
10-
class="pb-1 d-inline-flex align-center justify-center"
11-
:class="displayValueClass"
12-
:style="displayValueStyle"
13-
@click="toggleField"
14-
>
15-
{{ displayValue }}
16-
</span>
11+
<div class="v-inline-fields--display-wrapper">
12+
<div
13+
class="d-inline-flex"
14+
:class="displayValueClass"
15+
:style="displayValueStyle"
16+
@click="toggleField"
17+
>
18+
{{ displayValue }}
19+
</div>
20+
</div>
1721
</div>
1822
</div>
1923

@@ -109,7 +113,10 @@ import {
109113
useFieldContainerClass,
110114
useInlineFieldsContainerClass,
111115
} from './composables/classes';
112-
import { useDisplayValueStyles } from './composables/styles';
116+
import {
117+
useDisplayValueStyles,
118+
useInlineFieldsContainerStyle,
119+
} from './composables/styles';
113120
import inlineEmits from './utils/emits';
114121
115122
@@ -153,6 +160,7 @@ watchEffect(() => {
153160
// ------------------------------------------------ Class & Styles //
154161
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
155162
density: settings.density,
163+
disabled: settings.disabled,
156164
field: 'v-select',
157165
tableField: settings.tableField,
158166
}));
@@ -176,12 +184,15 @@ const displayValueClass = computed(() => useDisplayValueClass(
176184
'select',
177185
settings.valueColor,
178186
{
179-
disabled: settings.disabled,
180187
empty,
181188
error,
182189
}
183190
));
184191
192+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
193+
alignItems: settings.alignItems,
194+
}));
195+
185196
const displayValueStyle = computed(() => useDisplayValueStyles({
186197
color: settings.color,
187198
error,
@@ -308,6 +319,10 @@ onUnmounted(() => {
308319
padding: 0 !important;
309320
}
310321
322+
:deep(.v-field__field) {
323+
align-items: flex-end !important;
324+
}
325+
311326
.icons-container {
312327
height: 100%;
313328
}

‎src/plugin/VInlineSwitch.vue

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<template>
2-
<div :class="inlineFieldsContainerClass">
2+
<div
3+
:class="inlineFieldsContainerClass"
4+
:style="inlineFieldsContainerStyle"
5+
>
36
<div
47
v-if="!showField && !settings.fieldOnly"
5-
class="v-inline-fields--container-display-container"
68
:class="displayContainerClass"
79
>
810
<div :class="displaySelectionControlClasses">
911
<div class="v-selection-control__wrapper">
1012
<div
1113
v-if="icons"
12-
class="v-inline-fields--container-display-container-value-icons"
1314
:class="displayValueClass"
1415
:style="displayValueStyle"
1516
@click="toggleField"
@@ -27,7 +28,7 @@
2728

2829
<div
2930
v-else
30-
class="pb-1 d-inline-flex align-center justify-center"
31+
class="d-inline-flex align-center justify-center"
3132
:class="displayValueClass"
3233
:style="displayValueStyle"
3334
@click="toggleField"
@@ -114,7 +115,10 @@ import {
114115
useFieldContainerClass,
115116
useInlineFieldsContainerClass,
116117
} from './composables/classes';
117-
import { useDisplayValueStyles } from './composables/styles';
118+
import {
119+
useDisplayValueStyles,
120+
useInlineFieldsContainerStyle,
121+
} from './composables/styles';
118122
import inlineEmits from './utils/emits';
119123
120124
@@ -141,6 +145,7 @@ const displayValue = computed(() => {
141145
// ------------------------------------------------ Class & Styles //
142146
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
143147
density: settings.density,
148+
disabled: settings.disabled,
144149
field: 'v-switch',
145150
tableField: settings.tableField,
146151
}));
@@ -163,11 +168,14 @@ const displayValueClass = computed(() => useDisplayValueClass(
163168
'switch',
164169
settings.valueColor,
165170
{
166-
disabled: settings.disabled,
167171
error,
168172
}
169173
));
170174
175+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
176+
alignItems: settings.alignItems,
177+
}));
178+
171179
const displayValueStyle = computed(() => useDisplayValueStyles({
172180
color: settings.color,
173181
error,

‎src/plugin/VInlineTextField.vue

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<template>
2-
<div :class="inlineFieldsContainerClass">
2+
<div
3+
:class="inlineFieldsContainerClass"
4+
:style="inlineFieldsContainerStyle"
5+
>
36
<div
47
v-if="!showField && !settings.fieldOnly"
5-
class="v-inline-fields--container-display-container"
68
:class="displayContainerClass"
79
>
810
<div :class="displayInputControlClasses">
9-
<div class="v-inline-fields--container-display-container-fields">
11+
<div class="v-inline-fields--display-wrapper">
1012
<div
11-
class="d-inline-flex align-center justify-center"
13+
class="d-inline-flex"
1214
:class="displayValueClass"
1315
:style="displayValueStyle"
1416
@click="toggleField"
@@ -108,7 +110,10 @@ import {
108110
useFieldContainerClass,
109111
useInlineFieldsContainerClass,
110112
} from './composables/classes';
111-
import { useDisplayValueStyles } from './composables/styles';
113+
import {
114+
useDisplayValueStyles,
115+
useInlineFieldsContainerStyle,
116+
} from './composables/styles';
112117
import inlineEmits from './utils/emits';
113118
114119
@@ -152,6 +157,7 @@ const displayValue = computed(() => {
152157
// ------------------------------------------------ Class & Styles //
153158
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
154159
density: settings.density,
160+
disabled: settings.disabled,
155161
field: 'v-text-field',
156162
tableField: settings.tableField,
157163
}));
@@ -175,12 +181,15 @@ const displayValueClass = computed(() => useDisplayValueClass(
175181
'text-field',
176182
settings.valueColor,
177183
{
178-
disabled: settings.disabled,
179184
empty,
180185
error,
181186
}
182187
));
183188
189+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
190+
alignItems: settings.alignItems,
191+
}));
192+
184193
const displayValueStyle = computed(() => useDisplayValueStyles({
185194
color: settings.color,
186195
error,

‎src/plugin/VInlineTextarea.vue

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<div :class="inlineFieldsContainerClass">
2+
<div
3+
:class="inlineFieldsContainerClass"
4+
:style="inlineFieldsContainerStyle"
5+
>
36
<div
47
v-if="!showField && !settings.fieldOnly"
58
class="v-inline-fields--container-display-container"
@@ -107,7 +110,10 @@ import {
107110
useFieldContainerClass,
108111
useInlineFieldsContainerClass,
109112
} from './composables/classes';
110-
import { useDisplayValueStyles } from './composables/styles';
113+
import {
114+
useDisplayValueStyles,
115+
useInlineFieldsContainerStyle,
116+
} from './composables/styles';
111117
import inlineEmits from './utils/emits';
112118
113119
@@ -151,6 +157,7 @@ const displayValue = computed(() => {
151157
// ------------------------------------------------ Class & Styles //
152158
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
153159
density: settings.density,
160+
disabled: settings.disabled,
154161
field: 'v-textarea',
155162
tableField: settings.tableField,
156163
}));
@@ -174,12 +181,15 @@ const displayValueClass = computed(() => useDisplayValueClass(
174181
'textarea',
175182
settings.valueColor,
176183
{
177-
disabled: settings.disabled,
178184
empty,
179185
error,
180186
}
181187
));
182188
189+
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
190+
alignItems: settings.alignItems,
191+
}));
192+
183193
const displayValueStyle = computed(() => useDisplayValueStyles({
184194
color: settings.color,
185195
error,

0 commit comments

Comments
 (0)