Skip to content

Commit 8afe98d

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Update changing card field to absolute position to field instead of body
1 parent 4438fa9 commit 8afe98d

File tree

11 files changed

+105
-92
lines changed

11 files changed

+105
-92
lines changed

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

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
:cancel-icon-color="componentOptions.cancelIconColor"
1919
:cancel-icon-text="componentOptions.cancelIconText"
2020
:card-field="componentOptions.cardField"
21+
:card-offset-x="componentOptions.cardOffsetX"
22+
:card-offset-y="componentOptions.cardOffsetY"
2123
:card-props="componentOptions.cardProps"
2224
:close-siblings="componentOptions.closeSiblings"
2325
:color="componentOptions.color"
@@ -50,6 +52,8 @@
5052
:cancel-button-variant="componentOptions.cancelButtonVariant"
5153
:cancel-icon-color="componentOptions.cancelIconColor"
5254
:card-field="componentOptions.cardField"
55+
:card-offset-x="componentOptions.cardOffsetX"
56+
:card-offset-y="componentOptions.cardOffsetY"
5357
:card-props="componentOptions.cardProps"
5458
:clearable="componentOptions.clearable"
5559
:close-siblings="componentOptions.closeSiblings"
@@ -99,6 +103,8 @@
99103
:cancel-button-variant="componentOptions.cancelButtonVariant"
100104
:cancel-icon-color="componentOptions.cancelIconColor"
101105
:card-field="componentOptions.cardField"
106+
:card-offset-x="componentOptions.cardOffsetX"
107+
:card-offset-y="componentOptions.cardOffsetY"
102108
:card-props="componentOptions.cardProps"
103109
:clearable="componentOptions.clearable"
104110
:close-siblings="componentOptions.closeSiblings"
@@ -150,6 +156,8 @@
150156
:cancel-button-variant="componentOptions.cancelButtonVariant"
151157
:cancel-icon-color="componentOptions.cancelIconColor"
152158
:card-field="componentOptions.cardField"
159+
:card-offset-x="componentOptions.cardOffsetX"
160+
:card-offset-y="componentOptions.cardOffsetY"
153161
:card-props="componentOptions.cardProps"
154162
:close-siblings="componentOptions.closeSiblings"
155163
:color="componentOptions.color"
@@ -186,6 +194,8 @@
186194
<VInlineCustomField
187195
v-model="item.raw.range"
188196
:card-field="componentOptions.cardField"
197+
:card-offset-x="componentOptions.cardOffsetX"
198+
:card-offset-y="componentOptions.cardOffsetY"
189199
:card-props="componentOptions.cardProps"
190200
:loading="item.raw.loading"
191201
@update="updatedValue(item.raw, 'range')"
@@ -209,6 +219,8 @@
209219
:cancel-button-variant="componentOptions.cancelButtonVariant"
210220
:cancel-icon-color="componentOptions.cancelIconColor"
211221
:card-field="componentOptions.cardField"
222+
:card-offset-x="componentOptions.cardOffsetX"
223+
:card-offset-y="componentOptions.cardOffsetY"
212224
:card-props="componentOptions.cardProps"
213225
:close-siblings="componentOptions.closeSiblings"
214226
:color="componentOptions.color"
@@ -259,15 +271,17 @@ const componentOptions = reactive({
259271
cancelButtonVariant: 'text',
260272
cancelIcon: undefined,
261273
cancelIconColor: 'default',
262-
cardField: true,
274+
cardField: false,
275+
cardOffsetX: 0,
276+
cardOffsetY: 0,
263277
cardProps: {
264-
color: '--v-theme-primary',
265-
elevation: 0,
266-
variant: 'flat',
278+
// color: 'primary',
279+
// elevation: 5,
280+
// variant: 'flat',
267281
width: undefined,
268282
},
269283
clearable: false,
270-
closeSiblings: false,
284+
closeSiblings: true,
271285
color: 'primary',
272286
density: 'compact',
273287
disabled: false,
@@ -391,7 +405,8 @@ function getUsers() {
391405
* @param {object} item The item being updated.
392406
* @param {string} field The field being updated.
393407
*/
394-
function updatedValue(item) {
408+
function updatedValue(item, field) {
409+
console.log('PlaygroundPage.vue: updatedValue', field, item);
395410
item.loading = true;
396411
397412
// ? Simulate a delay while item is saving.

‎src/plugin/VInlineCheckbox.vue

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -106,21 +106,17 @@
106106
</div>
107107

108108
<!-- Card Field-->
109-
<Teleport
109+
<div
110110
v-if="settings.cardField"
111-
to="body"
111+
:class="cardContainerClass"
112+
:style="cardContainerStyle"
112113
>
113-
<div
114-
:class="cardContainerClass"
115-
:style="cardContainerStyle"
116-
>
117-
<v-card v-bind="bindingCard">
118-
<v-card-text>
119-
<div ref="cardFieldRef"></div>
120-
</v-card-text>
121-
</v-card>
122-
</div>
123-
</Teleport>
114+
<v-card v-bind="bindingCard">
115+
<v-card-text>
116+
<div ref="cardFieldRef"></div>
117+
</v-card-text>
118+
</v-card>
119+
</div>
124120
</div>
125121
</template>
126122

@@ -159,6 +155,7 @@ import {
159155
} from './composables/styles';
160156
import inlineEmits from './utils/emits';
161157
import { useBindingSettings } from './composables/bindings';
158+
import { useWindowSize } from '@vueuse/core';
162159
163160
164161
const modelValue = defineModel<FieldValue>();
@@ -287,6 +284,20 @@ const fieldCoordinates = ref<CSSProperties>();
287284
const inlineFieldsContainer = ref<HTMLElement | null>(null);
288285
const cardFieldRef = ref<HTMLElement | string | null>('body');
289286
287+
const windowSize = useWindowSize();
288+
289+
watch(() => windowSize, () => {
290+
fieldCoordinates.value = useCardContainerStyle({
291+
cardMinWidth: settings.cardProps?.minWidth,
292+
cardOffsetX: settings.cardOffsetX,
293+
cardOffsetY: settings.cardOffsetY,
294+
cardWidth: settings.cardProps?.width,
295+
field: inlineFieldsContainer.value,
296+
name: 'checkbox',
297+
});
298+
}, { deep: true });
299+
300+
290301
291302
// ------------------------------------------------ Toggle the field //
292303
function toggleField() {

‎src/plugin/VInlineCustomField.vue

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -58,21 +58,17 @@
5858
</div>
5959

6060
<!-- Card Field-->
61-
<Teleport
61+
<div
6262
v-if="settings.cardField"
63-
to="body"
63+
:class="cardContainerClass"
64+
:style="cardContainerStyle"
6465
>
65-
<div
66-
:class="cardContainerClass"
67-
:style="cardContainerStyle"
68-
>
69-
<v-card v-bind="bindingCard">
70-
<v-card-text>
71-
<div ref="cardFieldRef"></div>
72-
</v-card-text>
73-
</v-card>
74-
</div>
75-
</Teleport>
66+
<v-card v-bind="bindingCard">
67+
<v-card-text>
68+
<div ref="cardFieldRef"></div>
69+
</v-card-text>
70+
</v-card>
71+
</div>
7672
</div>
7773
</template>
7874

‎src/plugin/VInlineSelect.vue

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -90,21 +90,17 @@
9090
</div>
9191

9292
<!-- Card Field-->
93-
<Teleport
93+
<div
9494
v-if="settings.cardField"
95-
to="body"
95+
:class="cardContainerClass"
96+
:style="cardContainerStyle"
9697
>
97-
<div
98-
:class="cardContainerClass"
99-
:style="cardContainerStyle"
100-
>
101-
<v-card v-bind="bindingCard">
102-
<v-card-text>
103-
<div ref="cardFieldRef"></div>
104-
</v-card-text>
105-
</v-card>
106-
</div>
107-
</Teleport>
98+
<v-card v-bind="bindingCard">
99+
<v-card-text>
100+
<div ref="cardFieldRef"></div>
101+
</v-card-text>
102+
</v-card>
103+
</div>
108104
</div>
109105
</template>
110106

‎src/plugin/VInlineSwitch.vue

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -99,21 +99,17 @@
9999
</div>
100100

101101
<!-- Card Field-->
102-
<Teleport
102+
<div
103103
v-if="settings.cardField"
104-
to="body"
104+
:class="cardContainerClass"
105+
:style="cardContainerStyle"
105106
>
106-
<div
107-
:class="cardContainerClass"
108-
:style="cardContainerStyle"
109-
>
110-
<v-card v-bind="bindingCard">
111-
<v-card-text>
112-
<div ref="cardFieldRef"></div>
113-
</v-card-text>
114-
</v-card>
115-
</div>
116-
</Teleport>
107+
<v-card v-bind="bindingCard">
108+
<v-card-text>
109+
<div ref="cardFieldRef"></div>
110+
</v-card-text>
111+
</v-card>
112+
</div>
117113
</div>
118114
</template>
119115

‎src/plugin/VInlineTextField.vue

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -83,21 +83,17 @@
8383
</div>
8484

8585
<!-- Card Field-->
86-
<Teleport
86+
<div
8787
v-if="settings.cardField"
88-
to="body"
88+
:class="cardContainerClass"
89+
:style="cardContainerStyle"
8990
>
90-
<div
91-
:class="cardContainerClass"
92-
:style="cardContainerStyle"
93-
>
94-
<v-card v-bind="bindingCard">
95-
<v-card-text>
96-
<div ref="cardFieldRef"></div>
97-
</v-card-text>
98-
</v-card>
99-
</div>
100-
</Teleport>
91+
<v-card v-bind="bindingCard">
92+
<v-card-text>
93+
<div ref="cardFieldRef"></div>
94+
</v-card-text>
95+
</v-card>
96+
</div>
10197
</div>
10298
</template>
10399

‎src/plugin/VInlineTextarea.vue

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -86,21 +86,17 @@
8686
</div>
8787

8888
<!-- Card Field-->
89-
<Teleport
89+
<div
9090
v-if="settings.cardField"
91-
to="body"
91+
:class="cardContainerClass"
92+
:style="cardContainerStyle"
9293
>
93-
<div
94-
:class="cardContainerClass"
95-
:style="cardContainerStyle"
96-
>
97-
<v-card v-bind="bindingCard">
98-
<v-card-text>
99-
<div ref="cardFieldRef"></div>
100-
</v-card-text>
101-
</v-card>
102-
</div>
103-
</Teleport>
94+
<v-card v-bind="bindingCard">
95+
<v-card-text>
96+
<div ref="cardFieldRef"></div>
97+
</v-card-text>
98+
</v-card>
99+
</div>
104100
</div>
105101
</template>
106102

‎src/plugin/composables/helpers.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,20 @@ export const useGetFieldCoordinates: UseGetFieldCoordinates = (options) => {
4141

4242
const { x, y } = field.getBoundingClientRect();
4343
const { width, height } = field.getBoundingClientRect();
44-
const { left, top } = field.getBoundingClientRect();
4544
const { right, bottom } = field.getBoundingClientRect();
4645

47-
return {
46+
const results = {
4847
bottom: useConvertToUnit({ str: bottom + Number(cardOffsetY) }) as string,
4948
height,
50-
left: useConvertToUnit({ str: left + Number(cardOffsetX) }) as string,
49+
left: useConvertToUnit({ str: 0 + Number(cardOffsetX) }) as string,
5150
right: useConvertToUnit({ str: right + Number(cardOffsetX) }) as string,
52-
top: useConvertToUnit({ str: top + Number(cardOffsetY) }) as string,
51+
top: useConvertToUnit({ str: 2 + Number(cardOffsetY) }) as string,
5352
width: useConvertToUnit({ str: width }) as string,
5453
x,
5554
y,
5655
};
56+
57+
return results;
5758
};
5859

5960

‎src/plugin/composables/styles.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ export const useCardContainerStyle: UseCardContainerStyle = (options) => {
5757
const { cardMinWidth, cardOffsetX, cardOffsetY, cardWidth, field, name = '' } = options;
5858
const coords = useGetFieldCoordinates({ cardOffsetX, cardOffsetY, field });
5959

60+
console.log({ coords });
61+
6062
let minWidth = cardMinWidth;
6163
let width = cardWidth;
6264

@@ -70,7 +72,7 @@ export const useCardContainerStyle: UseCardContainerStyle = (options) => {
7072

7173
const styles = {
7274
left: coords.left,
73-
minWidth,
75+
// minWidth,
7476
top: coords.top,
7577
width,
7678
zIndex: 10,

‎src/plugin/styles/main.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
}
2121

2222
.v-inline-fields {
23+
position: relative;
24+
2325
// ------------------------------------------------ The Display Value Container //
2426
&--display {
2527
&-container {
@@ -87,6 +89,7 @@
8789

8890
&__append-inner {
8991
align-items: flex-end;
92+
padding-bottom: 0 !important;
9093
}
9194
}
9295
}
@@ -280,7 +283,7 @@
280283
.v-field__append-inner,
281284
.v-field__prepend-inner {
282285
align-items: flex-end !important;
283-
padding-bottom: 6px !important;
286+
padding-bottom: 0 !important;
284287

285288
.v-icon {
286289
font-size: calc(var(--v-icon-size-multiplier) * 1.5em) !important;
@@ -295,13 +298,14 @@
295298

296299
&--card-container {
297300
height: fit-content;
301+
min-width: fit-content !important;
298302
position: absolute;
299303

300304
.v-card {
301305
border: 1px solid hsla(0, 0%, 50%, 50%);
302306

303307
.v-card-text {
304-
padding: 4px 10px;
308+
padding: 5px 10px;
305309

306310
> div {
307311
align-items: center;

0 commit comments

Comments
 (0)