Skip to content

Commit 4f97ccf

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding floating cards
1 parent bb02f64 commit 4f97ccf

File tree

11 files changed

+630
-299
lines changed

11 files changed

+630
-299
lines changed

‎src/plugin/VInlineCheckbox.vue‎

Lines changed: 92 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div
3+
ref="inlineFieldsContainer"
34
:class="inlineFieldsContainerClass"
45
:style="inlineFieldsContainerStyle"
56
>
@@ -43,61 +44,84 @@
4344
v-else
4445
:class="fieldContainerClass"
4546
>
46-
<v-checkbox
47-
v-bind="bindingSettings"
48-
:color="settings.color"
49-
:density="settings.density"
50-
:disabled="loadingProp"
51-
:error="error"
52-
:false-icon="theFalseIcon"
53-
:false-value="settings.falseValue"
54-
:hide-details="settings.hideDetails"
55-
:label="settings.label"
56-
:model-value="truthyModelValue"
57-
:true-icon="theTrueIcon"
58-
:true-value="settings.trueValue"
59-
@update:model-value="saveValue"
47+
<Teleport
48+
:disabled="!settings.floatingCardField"
49+
:to="floatingCard"
6050
>
61-
<!-- Pass on all scoped slots -->
62-
<template
63-
v-for="(_, slot) in slots"
64-
#[slot]="scope"
51+
<v-checkbox
52+
v-bind="bindingSettings"
53+
:color="settings.color"
54+
:density="settings.density"
55+
:disabled="loadingProp"
56+
:error="error"
57+
:false-icon="theFalseIcon"
58+
:false-value="settings.falseValue"
59+
:hide-details="settings.hideDetails"
60+
:label="settings.label"
61+
:model-value="truthyModelValue"
62+
:true-icon="theTrueIcon"
63+
:true-value="settings.trueValue"
64+
@update:model-value="saveValue"
6565
>
66-
<slot
67-
:name="slot"
68-
v-bind="{ ...scope }"
69-
/>
70-
</template>
71-
72-
<template
73-
v-if="!slots.append"
74-
#append
75-
>
76-
<SaveFieldButtons
77-
:cancel-button-color="settings.cancelButtonColor"
78-
:cancel-button-size="settings.cancelButtonSize"
79-
:cancel-button-title="settings.cancelButtonTitle"
80-
:cancel-button-variant="settings.cancelButtonVariant"
81-
:cancel-icon="settings.cancelIcon"
82-
:cancel-icon-color="settings.cancelIconColor"
83-
:error="error"
84-
:field-only="settings.fieldOnly"
85-
:hide-save-icon="true"
86-
:loading="loadingProp"
87-
:loading-icon="settings.loadingIcon"
88-
:loading-icon-color="settings.loadingIconColor"
89-
:save-button-color="settings.saveButtonColor"
90-
:save-button-size="settings.saveButtonSize"
91-
:save-button-title="settings.saveButtonTitle"
92-
:save-button-variant="settings.saveButtonVariant"
93-
:save-icon="settings.saveIcon"
94-
:save-icon-color="settings.saveIconColor"
95-
@close="closeField"
96-
@save="saveValue"
97-
/>
98-
</template>
99-
</v-checkbox>
66+
<!-- Pass on all scoped slots -->
67+
<template
68+
v-for="(_, slot) in slots"
69+
#[slot]="scope"
70+
>
71+
<slot
72+
:name="slot"
73+
v-bind="{ ...scope }"
74+
/>
75+
</template>
76+
77+
<template
78+
v-if="!slots.append"
79+
#append
80+
>
81+
<SaveFieldButtons
82+
:cancel-button-color="settings.cancelButtonColor"
83+
:cancel-button-size="settings.cancelButtonSize"
84+
:cancel-button-title="settings.cancelButtonTitle"
85+
:cancel-button-variant="settings.cancelButtonVariant"
86+
:cancel-icon="settings.cancelIcon"
87+
:cancel-icon-color="settings.cancelIconColor"
88+
:error="error"
89+
:field-only="settings.fieldOnly"
90+
:hide-save-icon="true"
91+
:loading="loadingProp"
92+
:loading-icon="settings.loadingIcon"
93+
:loading-icon-color="settings.loadingIconColor"
94+
:save-button-color="settings.saveButtonColor"
95+
:save-button-size="settings.saveButtonSize"
96+
:save-button-title="settings.saveButtonTitle"
97+
:save-button-variant="settings.saveButtonVariant"
98+
:save-icon="settings.saveIcon"
99+
:save-icon-color="settings.saveIconColor"
100+
@close="closeField"
101+
@save="saveValue"
102+
/>
103+
</template>
104+
</v-checkbox>
105+
</Teleport>
100106
</div>
107+
108+
<!-- Floating Field -->
109+
<Teleport
110+
v-if="settings.floatingCardField"
111+
to="body"
112+
>
113+
<div
114+
class="v-inline-fields--card-container"
115+
:class="!showField ? 'd-none' : ''"
116+
:style="floatingCardContainerStyle"
117+
>
118+
<v-card v-bind="bindingCard">
119+
<v-card-text>
120+
<div ref="floatingCard"></div>
121+
</v-card-text>
122+
</v-card>
123+
</div>
124+
</Teleport>
101125
</div>
102126
</template>
103127

@@ -126,6 +150,7 @@ import {
126150
} from './composables/classes';
127151
import {
128152
useDisplayValueStyles,
153+
useFloatingCardContainerStyle,
129154
useInlineFieldsContainerStyle,
130155
} from './composables/styles';
131156
import inlineEmits from './utils/emits';
@@ -152,6 +177,7 @@ const timeOpened = ref<TimeOpened>(null);
152177
153178
// ------------------------------------------------ Binding Events & Props //
154179
const bindingSettings = computed(() => useBindingSettings(settings));
180+
const bindingCard = computed(() => settings.floatingCardProps);
155181
156182
157183
// ------------------------------------------------ Loading //
@@ -234,6 +260,8 @@ const displayValueStyle = computed(() => useDisplayValueStyles({
234260
underlined: settings.underlined,
235261
}));
236262
263+
const floatingCardContainerStyle = computed(() => fieldCoordinates.value);
264+
237265
238266
// ------------------------------------------------ Key event to cancel/close field //
239267
function closeField() {
@@ -242,12 +270,24 @@ function closeField() {
242270
}
243271
244272
273+
// ----------------------------------------------- Floating Field //
274+
const fieldCoordinates = ref<CSSProperties>();
275+
const inlineFieldsContainer = ref<HTMLElement | null>(null);
276+
const floatingCard = ref<HTMLElement | null>(null);
277+
278+
245279
// ------------------------------------------------ Toggle the field //
246280
function toggleField() {
247281
if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
248282
return;
249283
}
250284
285+
fieldCoordinates.value = useFloatingCardContainerStyle({
286+
cardMinWidth: settings.floatingCardProps?.minWidth,
287+
cardWidth: settings.floatingCardProps?.width,
288+
field: inlineFieldsContainer.value,
289+
});
290+
251291
const response = useToggleField({
252292
attrs,
253293
closeSiblings: settings.closeSiblings,

‎src/plugin/VInlineCustomField.vue‎

Lines changed: 71 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div
3+
ref="inlineFieldsContainer"
34
:class="inlineFieldsContainerClass"
45
:style="inlineFieldsContainerStyle"
56
>
@@ -20,37 +21,59 @@
2021
class="d-flex align-center py-2"
2122
:class="fieldContainerClass"
2223
>
24+
<Teleport
25+
:disabled="!settings.floatingCardField"
26+
:to="floatingCard"
27+
>
28+
<slot
29+
name="default"
30+
v-bind="slotBindings"
31+
/>
2332

24-
<slot
25-
name="default"
26-
v-bind="slotBindings"
27-
/>
28-
29-
<SaveFieldButtons
30-
v-model="modelValue"
31-
:cancel-button-color="settings.cancelButtonColor"
32-
:cancel-button-size="settings.cancelButtonSize"
33-
:cancel-button-title="settings.cancelButtonTitle"
34-
:cancel-button-variant="settings.cancelButtonVariant"
35-
:cancel-icon="settings.cancelIcon"
36-
:cancel-icon-color="settings.cancelIconColor"
37-
:error="error"
38-
:field-only="settings.fieldOnly"
39-
:hide-save-icon="settings.hideSaveIcon"
40-
:loading="loadingProp"
41-
:loading-icon="settings.loadingIcon"
42-
:loading-icon-color="settings.loadingIconColor"
43-
:required="settings.required"
44-
:save-button-color="settings.saveButtonColor"
45-
:save-button-size="settings.saveButtonSize"
46-
:save-button-title="settings.saveButtonTitle"
47-
:save-button-variant="settings.saveButtonVariant"
48-
:save-icon="settings.saveIcon"
49-
:save-icon-color="settings.saveIconColor"
50-
@close="closeField"
51-
@save="saveValue"
52-
/>
33+
<SaveFieldButtons
34+
v-model="modelValue"
35+
:cancel-button-color="settings.cancelButtonColor"
36+
:cancel-button-size="settings.cancelButtonSize"
37+
:cancel-button-title="settings.cancelButtonTitle"
38+
:cancel-button-variant="settings.cancelButtonVariant"
39+
:cancel-icon="settings.cancelIcon"
40+
:cancel-icon-color="settings.cancelIconColor"
41+
:error="error"
42+
:field-only="settings.fieldOnly"
43+
:hide-save-icon="settings.hideSaveIcon"
44+
:loading="loadingProp"
45+
:loading-icon="settings.loadingIcon"
46+
:loading-icon-color="settings.loadingIconColor"
47+
:required="settings.required"
48+
:save-button-color="settings.saveButtonColor"
49+
:save-button-size="settings.saveButtonSize"
50+
:save-button-title="settings.saveButtonTitle"
51+
:save-button-variant="settings.saveButtonVariant"
52+
:save-icon="settings.saveIcon"
53+
:save-icon-color="settings.saveIconColor"
54+
@close="closeField"
55+
@save="saveValue"
56+
/>
57+
</Teleport>
5358
</div>
59+
60+
<!-- Floating Field -->
61+
<Teleport
62+
v-if="settings.floatingCardField"
63+
to="body"
64+
>
65+
<div
66+
class="v-inline-fields--card-container"
67+
:class="!showField ? 'd-none' : ''"
68+
:style="floatingCardContainerStyle"
69+
>
70+
<v-card v-bind="bindingCard">
71+
<v-card-text>
72+
<div ref="floatingCard"></div>
73+
</v-card-text>
74+
</v-card>
75+
</div>
76+
</Teleport>
5477
</div>
5578
</template>
5679

@@ -75,7 +98,10 @@ import {
7598
useFieldContainerClass,
7699
useInlineFieldsContainerClass,
77100
} from './composables/classes';
78-
import { useInlineFieldsContainerStyle } from './composables/styles';
101+
import {
102+
useFloatingCardContainerStyle,
103+
useInlineFieldsContainerStyle,
104+
} from './composables/styles';
79105
import inlineEmits from './utils/emits';
80106
81107
@@ -163,6 +189,8 @@ const bindingDisplay = computed(() => {
163189
};
164190
});
165191
192+
const bindingCard = computed(() => settings.floatingCardProps);
193+
166194
167195
// ------------------------------------------------ Class & Styles //
168196
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
@@ -192,6 +220,7 @@ const fieldContainerClass = computed(() => useFieldContainerClass({
192220
}));
193221
194222
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle());
223+
const floatingCardContainerStyle = computed(() => fieldCoordinates.value);
195224
196225
197226
// ------------------------------------------------ Key event to cancel/close field //
@@ -202,12 +231,24 @@ function closeField() {
202231
}
203232
204233
234+
// ----------------------------------------------- Floating Field //
235+
const fieldCoordinates = ref<CSSProperties>();
236+
const inlineFieldsContainer = ref<HTMLElement | null>(null);
237+
const floatingCard = ref<HTMLElement | null>(null);
238+
239+
205240
// ------------------------------------------------ Toggle the field //
206241
function toggleField() {
207242
if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
208243
return;
209244
}
210245
246+
fieldCoordinates.value = useFloatingCardContainerStyle({
247+
cardMinWidth: settings.floatingCardProps?.minWidth,
248+
cardWidth: settings.floatingCardProps?.width,
249+
field: inlineFieldsContainer.value,
250+
});
251+
211252
const response = useToggleField({
212253
attrs,
213254
closeSiblings: settings.closeSiblings,

0 commit comments

Comments
 (0)