Skip to content

Commit 4438fa9

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Update adjustments to account for cardField
1 parent a188750 commit 4438fa9

File tree

13 files changed

+268
-110
lines changed

13 files changed

+268
-110
lines changed

‎src/plugin/VInlineCheckbox.vue‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
:style="inlineFieldsContainerStyle"
66
>
77
<div
8-
v-if="!showField && !settings.fieldOnly"
8+
v-if="(!showField && !settings.fieldOnly) || settings.cardField"
99
:class="displayContainerClass"
1010
>
1111
<div :class="displaySelectionControlClasses">
@@ -41,7 +41,7 @@
4141
</div>
4242

4343
<div
44-
v-else
44+
v-if="showField || settings.fieldOnly || settings.cardField"
4545
:class="fieldContainerClass"
4646
>
4747
<Teleport
@@ -111,8 +111,7 @@
111111
to="body"
112112
>
113113
<div
114-
class="v-inline-fields--card-container"
115-
:class="!showField ? 'd-none' : ''"
114+
:class="cardContainerClass"
116115
:style="cardContainerStyle"
117116
>
118117
<v-card v-bind="bindingCard">
@@ -129,11 +128,15 @@
129128
import {
130129
CloseSiblingsBus,
131130
FieldValue,
131+
SharedProps,
132132
TimeOpened,
133133
VInlineCheckboxProps,
134134
} from '@/types';
135135
import { IconOptions, useTheme } from 'vuetify';
136-
import { checkboxProps } from './utils/props';
136+
import {
137+
checkboxProps,
138+
defaultCardProps,
139+
} from './utils/props';
137140
import {
138141
BooleanIcons,
139142
SaveFieldButtons,
@@ -142,6 +145,7 @@ import { useTruthyModelValue } from './composables/helpers';
142145
import { useToggleField } from './composables/methods';
143146
import { useGetIcon } from './composables/icons';
144147
import {
148+
useCardContainerClass,
145149
useDisplayContainerClass,
146150
useDisplaySelectionControlClasses,
147151
useDisplayValueClass,
@@ -177,7 +181,10 @@ const timeOpened = ref<TimeOpened>(null);
177181
178182
// ------------------------------------------------ Binding Events & Props //
179183
const bindingSettings = computed(() => useBindingSettings(settings));
180-
const bindingCard = computed(() => settings.cardProps);
184+
const bindingCard = computed(() => ({
185+
...defaultCardProps,
186+
...props.cardProps,
187+
}) as SharedProps['cardProps']);
181188
182189
183190
// ------------------------------------------------ Loading //
@@ -248,6 +255,11 @@ const displayValueClass = computed(() => useDisplayValueClass(
248255
}
249256
));
250257
258+
const cardContainerClass = computed(() => useCardContainerClass({
259+
name: 'checkbox',
260+
showField: showField.value,
261+
}));
262+
251263
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
252264
253265
const displayValueStyle = computed(() => useDisplayValueStyles({
@@ -273,7 +285,7 @@ function closeField() {
273285
// ----------------------------------------------- Card Field//
274286
const fieldCoordinates = ref<CSSProperties>();
275287
const inlineFieldsContainer = ref<HTMLElement | null>(null);
276-
const cardFieldRef = ref<HTMLElement | null>(null);
288+
const cardFieldRef = ref<HTMLElement | string | null>('body');
277289
278290
279291
// ------------------------------------------------ Toggle the field //
@@ -284,8 +296,11 @@ function toggleField() {
284296
285297
fieldCoordinates.value = useCardContainerStyle({
286298
cardMinWidth: settings.cardProps?.minWidth,
299+
cardOffsetX: settings.cardOffsetX,
300+
cardOffsetY: settings.cardOffsetY,
287301
cardWidth: settings.cardProps?.width,
288302
field: inlineFieldsContainer.value,
303+
name: 'checkbox',
289304
});
290305
291306
const response = useToggleField({

‎src/plugin/VInlineCustomField.vue‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
:style="inlineFieldsContainerStyle"
66
>
77
<div
8-
v-if="!showField && !settings.fieldOnly"
8+
v-if="(!showField && !settings.fieldOnly) || settings.cardField"
99
:class="displayContainerClass"
1010
>
1111
<div :class="displayInputControlClasses">
@@ -17,7 +17,7 @@
1717
</div>
1818

1919
<div
20-
v-else
20+
v-if="showField || settings.fieldOnly || settings.cardField"
2121
class="d-flex align-center py-2"
2222
:class="fieldContainerClass"
2323
>
@@ -63,8 +63,7 @@
6363
to="body"
6464
>
6565
<div
66-
class="v-inline-fields--card-container"
67-
:class="!showField ? 'd-none' : ''"
66+
:class="cardContainerClass"
6867
:style="cardContainerStyle"
6968
>
7069
<v-card v-bind="bindingCard">
@@ -81,18 +80,23 @@
8180
import {
8281
CloseSiblingsBus,
8382
FieldValue,
83+
SharedProps,
8484
TimeOpened,
8585
VInlineTextFieldProps,
8686
} from '@/types';
8787
import { IconOptions } from 'vuetify';
88-
import { textFieldProps } from './utils/props';
88+
import {
89+
defaultCardProps,
90+
textFieldProps,
91+
} from './utils/props';
8992
import { DisplayedValue, SaveFieldButtons } from './components/index';
9093
import {
9194
useCheckForErrors,
9295
useToggleField,
9396
useTruncateText,
9497
} from './composables/methods';
9598
import {
99+
useCardContainerClass,
96100
useDisplayContainerClass,
97101
useDisplayInputControlClasses,
98102
useFieldContainerClass,
@@ -189,7 +193,10 @@ const bindingDisplay = computed(() => {
189193
};
190194
});
191195
192-
const bindingCard = computed(() => settings.cardProps);
196+
const bindingCard = computed(() => ({
197+
...defaultCardProps,
198+
...props.cardProps,
199+
}) as SharedProps['cardProps']);
193200
194201
195202
// ------------------------------------------------ Class & Styles //
@@ -219,6 +226,11 @@ const fieldContainerClass = computed(() => useFieldContainerClass({
219226
name: 'text-field',
220227
}));
221228
229+
const cardContainerClass = computed(() => useCardContainerClass({
230+
name: 'custom-field',
231+
showField: showField.value,
232+
}));
233+
222234
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
223235
const cardContainerStyle = computed(() => fieldCoordinates.value);
224236
@@ -234,7 +246,7 @@ function closeField() {
234246
// ----------------------------------------------- Card Field//
235247
const fieldCoordinates = ref<CSSProperties>();
236248
const inlineFieldsContainer = ref<HTMLElement | null>(null);
237-
const cardFieldRef = ref<HTMLElement | null>(null);
249+
const cardFieldRef = ref<HTMLElement | string | null>('body');
238250
239251
240252
// ------------------------------------------------ Toggle the field //
@@ -245,6 +257,8 @@ function toggleField() {
245257
246258
fieldCoordinates.value = useCardContainerStyle({
247259
cardMinWidth: settings.cardProps?.minWidth,
260+
cardOffsetX: settings.cardOffsetX,
261+
cardOffsetY: settings.cardOffsetY,
248262
cardWidth: settings.cardProps?.width,
249263
field: inlineFieldsContainer.value,
250264
});

‎src/plugin/VInlineSelect.vue‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
:style="inlineFieldsContainerStyle"
66
>
77
<div
8-
v-if="!showField && !settings.fieldOnly"
8+
v-if="(!showField && !settings.fieldOnly) || settings.cardField"
99
:class="displayContainerClass"
1010
>
1111
<div :class="displayInputControlClasses">
@@ -17,7 +17,7 @@
1717
</div>
1818

1919
<div
20-
v-else
20+
v-if="showField || settings.fieldOnly || settings.cardField"
2121
:class="fieldContainerClass"
2222
>
2323
<Teleport
@@ -42,7 +42,7 @@
4242
:items="items"
4343
:label="settings.label"
4444
:loading="loadingProp"
45-
:menu="settings.menu && !settings.fieldOnly"
45+
:menu="settings.menu && !settings.fieldOnly && showField"
4646
:variant="settings.variant"
4747
width="100%"
4848
@keyup.esc="closeField"
@@ -95,8 +95,7 @@
9595
to="body"
9696
>
9797
<div
98-
class="v-inline-fields--card-container"
99-
:class="!showField ? 'd-none' : ''"
98+
:class="cardContainerClass"
10099
:style="cardContainerStyle"
101100
>
102101
<v-card v-bind="bindingCard">
@@ -113,18 +112,23 @@
113112
import {
114113
CloseSiblingsBus,
115114
FieldValue,
115+
SharedProps,
116116
TimeOpened,
117117
VInlineSelectProps,
118118
} from '@/types';
119119
import { IconOptions } from 'vuetify';
120120
import type { VSelect } from 'vuetify/components';
121-
import { selectProps } from './utils/props';
121+
import {
122+
defaultCardProps,
123+
selectProps,
124+
} from './utils/props';
122125
import { DisplayedValue, SaveFieldButtons } from './components/index';
123126
import {
124127
useCheckForErrors,
125128
useToggleField,
126129
} from './composables/methods';
127130
import {
131+
useCardContainerClass,
128132
useDisplayContainerClass,
129133
useDisplayInputControlClasses,
130134
useFieldContainerClass,
@@ -221,7 +225,10 @@ const bindingDisplay = computed(() => {
221225
};
222226
});
223227
224-
const bindingCard = computed(() => settings.cardProps);
228+
const bindingCard = computed(() => ({
229+
...defaultCardProps,
230+
...props.cardProps,
231+
}) as SharedProps['cardProps']);
225232
226233
227234
// ------------------------------------------------ Watch the items //
@@ -257,6 +264,11 @@ const fieldContainerClass = computed(() => useFieldContainerClass({
257264
name: 'select',
258265
}));
259266
267+
const cardContainerClass = computed(() => useCardContainerClass({
268+
name: 'select',
269+
showField: showField.value,
270+
}));
271+
260272
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
261273
const cardContainerStyle = computed(() => fieldCoordinates.value);
262274
@@ -272,7 +284,7 @@ function closeField() {
272284
// ----------------------------------------------- Card Field//
273285
const fieldCoordinates = ref<CSSProperties>();
274286
const inlineFieldsContainer = ref<HTMLElement | null>(null);
275-
const cardFieldRef = ref<HTMLElement | null>(null);
287+
const cardFieldRef = ref<HTMLElement | string | null>('body');
276288
277289
278290
// ------------------------------------------------ Toggle the field //
@@ -283,6 +295,8 @@ function toggleField() {
283295
284296
fieldCoordinates.value = useCardContainerStyle({
285297
cardMinWidth: settings.cardProps?.minWidth,
298+
cardOffsetX: settings.cardOffsetX,
299+
cardOffsetY: settings.cardOffsetY,
286300
cardWidth: settings.cardProps?.width,
287301
field: inlineFieldsContainer.value,
288302
});

‎src/plugin/VInlineSwitch.vue‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
:style="inlineFieldsContainerStyle"
66
>
77
<div
8-
v-if="!showField && !settings.fieldOnly"
8+
v-if="(!showField && !settings.fieldOnly) || settings.cardField"
99
:class="displayContainerClass"
1010
>
1111
<div :class="displaySelectionControlClasses">
@@ -41,7 +41,7 @@
4141
</div>
4242

4343
<div
44-
v-else
44+
v-if="showField || settings.fieldOnly || settings.cardField"
4545
:class="fieldContainerClass"
4646
>
4747
<Teleport
@@ -79,7 +79,7 @@
7979
#append
8080
>
8181
<v-btn
82-
v-if="!settings.fieldOnly"
82+
v-if="!settings.fieldOnly || settings.cardField"
8383
class="ms-3"
8484
:color="settings.cancelButtonColor"
8585
icon
@@ -104,8 +104,7 @@
104104
to="body"
105105
>
106106
<div
107-
class="v-inline-fields--card-container"
108-
:class="!showField ? 'd-none' : ''"
107+
:class="cardContainerClass"
109108
:style="cardContainerStyle"
110109
>
111110
<v-card v-bind="bindingCard">
@@ -122,16 +121,21 @@
122121
import {
123122
CloseSiblingsBus,
124123
FieldValue,
124+
SharedProps,
125125
TimeOpened,
126126
VInlineSwitchProps,
127127
} from '@/types';
128128
import { IconOptions, useTheme } from 'vuetify';
129-
import { switchProps } from './utils/props';
129+
import {
130+
defaultCardProps,
131+
switchProps,
132+
} from './utils/props';
130133
import { BooleanIcons } from './components/index';
131134
import { useTruthyModelValue } from './composables/helpers';
132135
import { useToggleField } from './composables/methods';
133136
import { useGetIcon } from './composables/icons';
134137
import {
138+
useCardContainerClass,
135139
useDisplayContainerClass,
136140
useDisplaySelectionControlClasses,
137141
useDisplayValueClass,
@@ -167,7 +171,10 @@ const timeOpened = ref<TimeOpened>(null);
167171
168172
// ------------------------------------------------ Binding Events & Props //
169173
const bindingSettings = computed(() => useBindingSettings(settings));
170-
const bindingCard = computed(() => settings.cardProps);
174+
const bindingCard = computed(() => ({
175+
...defaultCardProps,
176+
...props.cardProps,
177+
}) as SharedProps['cardProps']);
171178
172179
173180
// ------------------------------------------------ Loading //
@@ -231,6 +238,11 @@ const displayValueClass = computed(() => useDisplayValueClass(
231238
}
232239
));
233240
241+
const cardContainerClass = computed(() => useCardContainerClass({
242+
name: 'switch',
243+
showField: showField.value,
244+
}));
245+
234246
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
235247
236248
const displayValueStyle = computed(() => useDisplayValueStyles({
@@ -249,7 +261,7 @@ const cardContainerStyle = computed(() => fieldCoordinates.value);
249261
// ----------------------------------------------- Card Field//
250262
const fieldCoordinates = ref<CSSProperties>();
251263
const inlineFieldsContainer = ref<HTMLElement | null>(null);
252-
const cardFieldRef = ref<HTMLElement | null>(null);
264+
const cardFieldRef = ref<HTMLElement | string | null>('body');
253265
254266
255267
// ------------------------------------------------ Toggle the field //
@@ -260,6 +272,8 @@ function toggleField() {
260272
261273
fieldCoordinates.value = useCardContainerStyle({
262274
cardMinWidth: settings.cardProps?.minWidth,
275+
cardOffsetX: settings.cardOffsetX,
276+
cardOffsetY: settings.cardOffsetY,
263277
cardWidth: settings.cardProps?.width,
264278
field: inlineFieldsContainer.value,
265279
});

0 commit comments

Comments
 (0)