30
30
deselect-label =" Remove me"
31
31
placeholder =" Select events to log"
32
32
select-label =" Select me"
33
- style =" width : 50% " @update =" updateSelected" >
33
+ style =" width : 50% "
34
+ @change =" updateSelected" >
34
35
</VueMultiselect >
35
36
</div >
36
37
<hr />
110
111
</DragItem> -->
111
112
</div >
112
113
<div
113
- v-if =" !hideLayout"
114
- class =" col-sm-6" >
114
+ v-if =" !hideLayout"
115
+ class =" col-sm-6" >
115
116
<div class =" layoutJSON" >
116
117
Displayed as <code >[x, y, w, h]</code >:
117
118
<div class =" columns" >
118
119
<div v-for =" item in testLayout" >
119
- <b >{{ item.i }}</b >: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
120
+ <b >{{ item.i }}</b >: [{{ item }}]
120
121
</div >
121
122
</div >
122
123
</div >
215
216
</div >
216
217
<footer >
217
218
<p style =" text-align : center " >
218
- Copyright © 2022-{{getCurrentDate()}} Geirr Winnem
219
+ Copyright © 2022-{{ getCurrentDate() }} Geirr Winnem
219
220
</p >
220
221
<p style =" text-align : center " >
221
222
<a href =" https://winnem.tech" target =" _blank" >winnem.tech</a >
224
225
</template >
225
226
226
227
<script lang="ts" setup>
227
- import {ref , onMounted , nextTick , onBeforeUnmount , computed , Ref , UnwrapRef } from ' vue' ;
228
+ import {computed , nextTick , onBeforeUnmount , onMounted , ref , Ref , UnwrapRef } from ' vue' ;
228
229
import {testData } from ' ./test' ;
229
230
import GridLayout from ' ../src/components/Grid/GridLayout.vue' ;
230
231
import GridItem from ' ../src/components/Grid/GridItem.vue' ;
231
- import {
232
- getStatics ,
233
- getFirstCollision ,
234
- } from ' @/core/helpers/utils' ;
232
+ import {getFirstCollision , getStatics ,} from ' @/core/helpers/utils' ;
235
233
import {ILayoutItem , TLayout } from " @/components/Grid/layout-definition" ;
236
234
import VueMultiselect from ' vue-multiselect' ;
237
235
// import {EGridLayoutEvent} from "@/core/enums/EGridLayoutEvents";
@@ -247,7 +245,9 @@ import VueMultiselect from 'vue-multiselect';
247
245
*/
248
246
249
247
// Model for select dropdown.
250
- const updateSelected = (val : any ): void => {
248
+ const updateSelected = (val : string []): void => {
249
+ debugger ;
250
+ console .error (val );
251
251
if (val .length > 0 && val .includes (' All' )) {
252
252
selected .value = [' All' ];
253
253
}
@@ -285,31 +285,31 @@ const verticalCompact = ref(true);
285
285
const testLayout = ref ([... testData ]);
286
286
287
287
const onRowHeightChange = (): void => {
288
- if (rowHeight .value < 1 ) {
288
+ if (rowHeight .value < 1 ) {
289
289
rowHeight .value = 1 ;
290
290
}
291
291
};
292
292
293
293
const onColNumChange = (): void => {
294
- if (colNum .value < 1 ) {
294
+ if (colNum .value < 1 ) {
295
295
colNum .value = 1 ;
296
296
}
297
297
};
298
298
299
299
const onMaxRowsChange = (): void => {
300
- if (maxRows .value < 1 ) {
300
+ if (maxRows .value < 1 ) {
301
301
maxRows .value = 1 ;
302
302
}
303
303
};
304
304
305
305
const onMarginTopBottomChange = (): void => {
306
- if (marginTopBottom .value < 1 ) {
306
+ if (marginTopBottom .value < 1 ) {
307
307
marginTopBottom .value = 1 ;
308
308
}
309
309
};
310
310
311
311
const onMarginLeftRightChange = (): void => {
312
- if (marginLeftRight .value < 1 ) {
312
+ if (marginLeftRight .value < 1 ) {
313
313
marginLeftRight .value = 1 ;
314
314
}
315
315
};
@@ -372,7 +372,7 @@ const publishToEventLog = (i: number | string, msg: string, newX: number, newY:
372
372
eventsDiv .value .scrollTop = eventsDiv .value .scrollHeight ;
373
373
}
374
374
const publishStringToEventLog = (message : string , insertNewLine : boolean = false ): void => {
375
- if (insertNewLine ) {
375
+ if (insertNewLine ) {
376
376
eventsLog .value .push (' ' );
377
377
}
378
378
@@ -474,7 +474,6 @@ const onLayoutUpdate = (value: TLayout[]): void => {
474
474
};
475
475
476
476
477
-
478
477
const removeGridItem = (id : string | number ): void => {
479
478
testLayout .value = testLayout .value .filter ((item ) => {
480
479
return item .i !== id ;
0 commit comments