Added resize events to Demo App log

Author: gwinnem

README.md

@@ -74,6 +74,10 @@ If you enjoyed this project — or just feeling generous, consider buying me a 
 ## Changelog
 
 
+### v: 1.2.10 (2024-02-xx)
+* __Demo App__ [Eventlog is not displaying any resize events.](https://github.com/gwinnem/vue-responsive-grid-layout/issues/46)
+
+
 ### v: 1.2.9 (2024-02-03)
 * __Fixed Issue__ [Dynamic change columns, item will overlap](https://github.com/gwinnem/vue-responsive-grid-layout/issues/12)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ts-responsive-grid-layout",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "type": "module",
   "description": "Vue 3 Responsive & Dynamic Grid / Dashboard layout with drag, drop and resizable actions.",
   "author": "Geirr Winnem <geirr@winnem.tech>",

sandbox/App.vue

@@ -531,14 +531,14 @@ const movedEvent = (i: number | string, newX: number, newY: number): void => {
 };
 
 const onResizeEndEvent = (i: number | string, newX: number, newY: number): void => {
-  if (selected.value.includes('resizedEvent') || selected.value.includes('All')) {
-    publishToEventLog(i, 'resizedEvent', newX, newY);
+  if (selected.value.includes('resizedEndEvent') || selected.value.includes('All')) {
+    publishToEventLog(i, 'Resize End', newX, newY);
   }
 };
 
 const onResizeStartEvent = (i: number | string, newX: number, newY: number): void => {
-  if (selected.value.includes('resizeEvent') || selected.value.includes('All')) {
-    publishToEventLog(i, 'resizeEvent', newX, newY);
+  if (selected.value.includes('resizeStartEvent') || selected.value.includes('All')) {
+    publishToEventLog(i, 'Resize start', newX, newY);
   }
 };
 

src/components/Grid/GridItem.vue

@@ -245,15 +245,6 @@ const classObj = computed(() => {
   };
 });
 
-// TODO Maybe reuse this for the isMirrored change prop
-// Helper for generating the correct css class for resizing a GridItem
-// const resizableHandleClass = computed(() => {
-//   if(renderRtl.value) {
-//     return `vue-resizable-handle vue-rtl-resizable-handle`;
-//   }
-//   return `vue-resizable-handle`;
-// });
-
 /**
  * Translate x and y coordinates from pixels to grid units.
  * @param  {Number} top  Top position (relative to parent) in pixels.
@@ -573,7 +564,7 @@ let edges: IInteractEdges = {
 };
 
 const handleResize = (event: MouseEvent): void => {
-  if (props.isStatic || !props.enableEditMode) {
+  if (props.isStatic || !props.enableEditMode && props.isResizable) {
     return;
   }
   // Get the current drag point from the event. This is used as the offset.
@@ -594,14 +585,15 @@ const handleResize = (event: MouseEvent): void => {
   switch (event.type) {
     case `resizestart`: {
       tryMakeResizable();
+      // (e: EGridItemEvent.RESIZE, i: number | string, h: number, w: number, height: number, width: number): void;
+      emit(EGridItemEvent.RESIZE, props.i, innerH.value, innerW.value, innerH.value, innerW.value);
       previousW.value = innerW.value;
       previousH.value = innerH.value;
       pos = calcPosition(innerX.value, innerY.value, innerW.value, innerH.value);
       newSize.width = pos.width;
       newSize.height = pos.height;
       resizing.value = newSize;
       isResizing.value = true;
-      // console.log(`START => innerX: ${innerX.value} innerY: ${innerY.value} 'innerW:'${innerW.value} innerH:${innerH.value} pos: ${JSON.stringify(pos)}`);
       // TODO strongly type event.edges
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore

vitepress-docs/guide/changelog.md

@@ -5,80 +5,12 @@ page: true
 title: Changelog
 ---
 
-<div style="text-align: center">
-
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)
-[![npm bundle size](https://img.shields.io/bundlephobia/min/vue-ts-responsive-grid-layout)](https://bundlephobia.com/result?p=vue-ts-responsive-grid-layout)
-[![npm](https://img.shields.io/npm/v/vue-ts-responsive-grid-layout)](https://www.npmjs.com/package/vue-ts-responsive-grid-layout)
-[![NPM](https://img.shields.io/npm/l/vue-ts-responsive-grid-layout)](https://github.com/gwinnem/vue-ts-responsive-grid-layout/blob/master/LICENSE)
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-
-</div>
-
-<p align="center">
-  <img src="https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/main/docs/Data%20Grid.svg" height="200" alt="logo">
-</p>
-
-<h1 align="center">vue-ts-responsive-grid-layout</h1>
-
-<h2 align="center">
-  <a href="https://vue-ts-responsive-grid-layout.winnem.tech" target="_blank">Documentation Website</a>
-</h2>
-
-## What is vue-ts-responsive-grid-layout
-
-VUE 3 responsive grid layout is based on the original work by [JBaysolution's vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout).
-
-This new and refactored component has more features, typesafe Emits, Props and a strict linting rule setup.
-
-A proper App developed for testing purposes.
-
-Documentation website contains 13 examples. Will be updated when new features are added to the component.
-
-<br/>
-
-## Donate
-
-If you enjoyed this project — or just feeling generous, consider buying me a 🍺. Cheers!
-
-<br/>
-
-<a href="https://paypal.me/gwinnem/">
-    <img src="https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/dev/docs/paypal-images/blue.svg" height="40" alt="paypal">
-</a>
-
-<br/>
-
-### Features:
-
-* Prop in GridLayout for distributing GridItem's equally.
-* GridLayout now has slot for GridItem.
-* Prop for displaying grid lines in GridLayout.
-* Prop for setting edit mode in GridLayout. Shortcuts the isDraggable and isResizable props.
-* Prop for adding border radius in GridLayout. Adds a 8px radius to each GridItem.
-* Prop in GridLayout for shifting GridItems horizontally when dragging instead of vertical.
-* Separated out style variables, so it is easier to restyle the component.
-* Added tab navigation support.
-* Close button in GridItem for removing the GridItem from the GridLayout.
-* Added more events to GridLayout and GridItem.
-* Support for resize Bottom, Bottom Right and Right in GridIem.
-* Draggable widgets
-* Resizable widgets
-* Static widgets
-* Bounds checking for dragging and resizing
-* Widgets may be added or removed without rebuilding grid
-* Layout can be serialized and restored
-* Automatic RTL support
-* Responsive using predefined layout's for different breakpoints.
-* GridItem automatically resizes when content change(Useful when displaying charts).
-
-### Testing:
+## Changelog
 
-* __Unit tests__ [Using Vitest](https://vitest.dev/)
-* __Unit test console__ [Using Vitest UI](https://vitest.dev/guide/ui.html#vitest-ui)
-* __e2e tests__ [Using nightwatchjs](https://nightwatchjs.org/)
 
-## Changelog
+### v: 1.2.10 (2024-02-xx)
+* __Demo App__ [Eventlog is not displaying any resize events.](https://github.com/gwinnem/vue-responsive-grid-layout/issues/46)
+* 
 
 
 ### v: 1.2.9 (2024-02-03)
@@ -142,25 +74,3 @@ Thanks to [UTing1119](https://github.com/UTing1119) for his contribution to this
 
 * --Fixed Issue-- [Issue 7](https://github.com/gwinnem/vue-responsive-grid-layout/issues/7), thanks to [UTing1119](https://github.com/UTing1119)
 * --Fixed Issue-- [Issue 6](https://github.com/gwinnem/vue-responsive-grid-layout/issues/6), thanks to [UTing1119](https://github.com/UTing1119)
-
-## Setting up vue-ts-responsive-grid-layout in your project
-
-[Howto](https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md)
-
-<br/>
-
-#### Auditing the package
-
-```
- npm audit --registry=https://registry.npmjs.org/
-```
-
-<br/>
-
-### References
-
-* [Mini.css used in the sandbox](https://minicss.us/docs.htm#)
-* [Vue-Multiselect used in the sandbox](https://vue-multiselect.js.org/#sub-getting-started)
-* [Vitest](https://vitest.dev/)
-* [Vitest UI](https://vitest.dev/guide/ui.html#vitest-ui)
-* [nightwatchjs](https://nightwatchjs.org/)