Skip to content

Commit 78d1f99

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating classes and styles to fix table cell alignment quirks
1 parent acda0f8 commit 78d1f99

File tree

6 files changed

+685
-406
lines changed

6 files changed

+685
-406
lines changed

‎src/plugin/VInlineCheckbox.vue‎

Lines changed: 113 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,95 @@
11
<template>
2-
<div
3-
v-if="!showField && !settings.fieldOnly"
4-
class="d-inline-flex align-center justify-center"
5-
>
6-
<span
7-
v-if="icons"
8-
class="inline-field-value-icons pb-1"
9-
:class="fieldDisplayClass"
10-
:style="fieldDisplayStyle"
11-
@click="toggleField"
2+
<div :class="inlineFieldsContainerClass">
3+
<div
4+
v-if="!showField && !settings.fieldOnly"
5+
class="v-inline-fields--container-display-container"
6+
:class="displayContainerClass"
127
>
13-
<BooleanIcons
14-
v-model="displayValue"
15-
:icon-false="settings.iconFalse"
16-
:icon-false-color="settings.iconFalseColor"
17-
:icon-false-title="settings.iconFalseTitle"
18-
:icon-true="settings.iconTrue"
19-
:icon-true-color="settings.iconTrueColor"
20-
:icon-true-title="settings.iconTrueTitle"
21-
/>
22-
</span>
23-
24-
<span
25-
v-else
26-
class="pb-1 d-inline-flex align-center justify-center"
27-
:class="fieldDisplayClass"
28-
:style="fieldDisplayStyle"
29-
@click="toggleField"
30-
>
31-
{{ displayValue }}
32-
</span>
33-
</div>
8+
<div :class="displaySelectionControlClasses">
9+
<div class="v-selection-control__wrapper">
10+
<div
11+
v-if="icons"
12+
class="v-inline-fields--container-display-container-value-icons"
13+
:class="displayValueClass"
14+
:style="displayValueStyle"
15+
@click="toggleField"
16+
>
17+
<BooleanIcons
18+
v-model="displayValue"
19+
:icon-false="settings.iconFalse"
20+
:icon-false-color="settings.iconFalseColor"
21+
:icon-false-title="settings.iconFalseTitle"
22+
:icon-true="settings.iconTrue"
23+
:icon-true-color="settings.iconTrueColor"
24+
:icon-true-title="settings.iconTrueTitle"
25+
/>
26+
</div>
3427

35-
<div
36-
v-else
37-
class="d-inline-flex align-center"
38-
:class="fieldContainerClass"
39-
>
40-
<v-checkbox
41-
v-bind="$attrs"
42-
v-model="modelValue"
43-
:color="settings.color"
44-
:density="settings.density"
45-
:disabled="loading"
46-
:error="error"
47-
:false-icon="settings.falseIcon"
48-
:false-value="settings.falseValue"
49-
:hide-details="settings.hideDetails"
50-
:label="settings.label"
51-
:true-icon="settings.trueIcon"
52-
:value="settings.trueValue"
53-
@update:model-value="saveValue"
28+
<div
29+
v-else
30+
class="pb-1 d-inline-flex align-center justify-center"
31+
:class="displayValueClass"
32+
:style="displayValueStyle"
33+
@click="toggleField"
34+
>
35+
{{ displayValue }}
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<div
42+
v-else
43+
:class="fieldContainerClass"
5444
>
55-
<!-- Pass on all scoped slots -->
56-
<template
57-
v-for="(_, slot) in slots"
58-
#[slot]="scope"
59-
>
60-
<slot
61-
:name="slot"
62-
v-bind="{ ...scope }"
63-
/>
64-
</template>
65-
66-
<template
67-
v-if="!slots.append"
68-
#append
45+
<v-checkbox
46+
v-bind="$attrs"
47+
v-model="modelValue"
48+
:color="settings.color"
49+
:density="settings.density"
50+
:disabled="loading"
51+
:error="error"
52+
:false-icon="settings.falseIcon"
53+
:false-value="settings.falseValue"
54+
:hide-details="settings.hideDetails"
55+
:label="settings.label"
56+
:true-icon="settings.trueIcon"
57+
:value="settings.trueValue"
58+
@update:model-value="saveValue"
6959
>
70-
<v-btn
71-
class="ms-1"
72-
:color="settings.cancelButtonColor"
73-
icon
74-
:size="settings.cancelButtonSize"
75-
:title="settings.cancelButtonTitle"
76-
:variant="settings.cancelButtonVariant"
77-
@click="toggleField"
60+
<!-- Pass on all scoped slots -->
61+
<template
62+
v-for="(_, slot) in slots"
63+
#[slot]="scope"
7864
>
79-
<v-icon
80-
v-if="!settings.fieldOnly"
81-
:color="settings.cancelIconColor"
82-
:icon="settings.cancelIcon"
65+
<slot
66+
:name="slot"
67+
v-bind="{ ...scope }"
8368
/>
84-
</v-btn>
85-
</template>
86-
</v-checkbox>
69+
</template>
70+
71+
<template
72+
v-if="!slots.append"
73+
#append
74+
>
75+
<v-btn
76+
v-if="!settings.fieldOnly"
77+
class="ms-1"
78+
:color="settings.cancelButtonColor"
79+
icon
80+
:size="settings.cancelButtonSize"
81+
:title="settings.cancelButtonTitle"
82+
:variant="settings.cancelButtonVariant"
83+
@click="toggleField"
84+
>
85+
<v-icon
86+
:color="settings.cancelIconColor"
87+
:icon="settings.cancelIcon"
88+
/>
89+
</v-btn>
90+
</template>
91+
</v-checkbox>
92+
</div>
8793
</div>
8894
</template>
8995

@@ -102,10 +108,13 @@ import {
102108
useToggleField,
103109
} from './composables/methods';
104110
import {
105-
useFieldContainerClass,
106111
useDisplayContainerClass,
112+
useDisplaySelectionControlClasses,
113+
useDisplayValueClass,
114+
useFieldContainerClass,
115+
useInlineFieldsContainerClass,
107116
} from './composables/classes';
108-
import { useFieldDisplayStyles } from './composables/styles';
117+
import { useDisplayValueStyles } from './composables/styles';
109118
import inlineEmits from './utils/emits';
110119
111120
@@ -130,16 +139,36 @@ const displayValue = computed(() => {
130139
131140
132141
// ------------------------------------------------ Class & Styles //
133-
const fieldContainerClass = computed(() => useFieldContainerClass('checkbox', showField.value));
134-
const fieldDisplayClass = computed(() => useDisplayContainerClass(
142+
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
143+
density: settings.density,
144+
field: 'v-checkbox',
145+
tableField: settings.tableField,
146+
}));
147+
148+
const displayContainerClass = computed(() => useDisplayContainerClass({
149+
density: settings.density,
150+
field: 'v-checkbox',
151+
}));
152+
153+
const displaySelectionControlClasses = useDisplaySelectionControlClasses({
154+
density: settings.density,
155+
});
156+
157+
const fieldContainerClass = computed(() => useFieldContainerClass({
158+
active: showField.value,
159+
name: 'checkbox',
160+
}));
161+
162+
const displayValueClass = computed(() => useDisplayValueClass(
135163
'checkbox',
136164
settings.valueColor,
137165
{
138166
disabled: settings.disabled,
139167
error,
140168
}
141169
));
142-
const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
170+
171+
const displayValueStyle = computed(() => useDisplayValueStyles({
143172
color: settings.color,
144173
error,
145174
underlineColor: settings.underlineColor,

0 commit comments

Comments
 (0)