grid-layout-plus - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

CHANGELOG.md

@@ -0,1 +1,8 @@
+## [1.0.6](https://github.com/qmhc/grid-layout-plus/compare/v1.0.5...v1.0.6) (2024-11-28)
+
+### 🐞 Bug Fixes
+
+- resizing along the edge should affect only one axis ([#37](https://github.com/qmhc/grid-layout-plus/issues/37)) ([e0b91d5](https://github.com/qmhc/grid-layout-plus/commit/e0b91d545a80516c03d193b6bdbe96d76f76b55c))
+- safely read navigator ([#35](https://github.com/qmhc/grid-layout-plus/issues/35)) ([2f10dc8](https://github.com/qmhc/grid-layout-plus/commit/2f10dc8978725ef9fdcda9edbc2d7a63e3e5ac53))
+
 ## [1.0.5](https://github.com/qmhc/grid-layout-plus/compare/v1.0.4...v1.0.5) (2024-04-22)
@@ -2,0 +9,0 @@

dist/components/grid-item.vue.d.ts

@@ -1,2 +0,2 @@
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     isDraggable: {
@@ -78,3 +78,3 @@ type: BooleanConstructor;
     };
-}, {
+}>, {
     state: {
@@ -105,4 +105,10 @@ cols: number;
     };
-    wrapper: import("vue").Ref<HTMLElement | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("container-resized" | "resize" | "resized" | "move" | "moved")[], "container-resized" | "resize" | "resized" | "move" | "moved", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    wrapper: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    resize: (...args: any[]) => void;
+    "container-resized": (...args: any[]) => void;
+    resized: (...args: any[]) => void;
+    move: (...args: any[]) => void;
+    moved: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     isDraggable: {
@@ -184,9 +190,9 @@ type: BooleanConstructor;
     };
-}>> & {
+}>> & Readonly<{
+    onResize?: ((...args: any[]) => any) | undefined;
     "onContainer-resized"?: ((...args: any[]) => any) | undefined;
-    onResize?: ((...args: any[]) => any) | undefined;
     onResized?: ((...args: any[]) => any) | undefined;
     onMove?: ((...args: any[]) => any) | undefined;
     onMoved?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     isDraggable: boolean;
@@ -206,3 +212,10 @@ isResizable: boolean;
     resizeOption: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
 }>;
-export default _sfc_main;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

dist/components/grid-layout.vue.d.ts

@@ -1,4 +0,7 @@
-import type { PropType } from 'vue';
-import type { Layout, Breakpoint, Breakpoints, ResponsiveLayout } from '../helpers/types';
-declare const _sfc_main: import("vue").DefineComponent<{
+import { PropType } from 'vue';
+import { Breakpoint, Breakpoints, Layout, ResponsiveLayout } from '../helpers/types';
+declare function getItem(id: number | string): any;
+declare function dragEvent(eventName: string, id: number | string, x: number, y: number, h: number, w: number): void;
+declare function resizeEvent(eventName: string, id: number | string, x: number, y: number, h: number, w: number): void;
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     autoSize: {
@@ -96,3 +99,3 @@ type: BooleanConstructor;
     };
-}, {
+}>, {
     state: {
@@ -204,6 +207,13 @@ width: number;
     };
-    getItem: (id: number | string) => any;
-    resizeEvent: (eventName: string, id: number | string, x: number, y: number, h: number, w: number) => void;
-    dragEvent: (eventName: string, id: number | string, x: number, y: number, h: number, w: number) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("layout-before-mount" | "layout-mounted" | "layout-updated" | "breakpoint-changed" | "update:layout" | "layout-ready")[], "layout-before-mount" | "layout-mounted" | "layout-updated" | "breakpoint-changed" | "update:layout" | "layout-ready", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    getItem: typeof getItem;
+    resizeEvent: typeof resizeEvent;
+    dragEvent: typeof dragEvent;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "layout-before-mount": (...args: any[]) => void;
+    "layout-mounted": (...args: any[]) => void;
+    "layout-updated": (...args: any[]) => void;
+    "breakpoint-changed": (...args: any[]) => void;
+    "update:layout": (...args: any[]) => void;
+    "layout-ready": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     autoSize: {
@@ -301,3 +311,3 @@ type: BooleanConstructor;
     };
-}>> & {
+}>> & Readonly<{
     "onLayout-before-mount"?: ((...args: any[]) => any) | undefined;
@@ -309,3 +319,3 @@ "onLayout-mounted"?: ((...args: any[]) => any) | undefined;
     "onLayout-ready"?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     isDraggable: boolean;
@@ -330,3 +340,27 @@ isResizable: boolean;
     preventCollision: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+    item?(_: {
+        item: {
+            minW?: number | undefined;
+            minH?: number | undefined;
+            maxW?: number | undefined;
+            maxH?: number | undefined;
+            moved?: boolean | undefined;
+            static?: boolean | undefined;
+            isDraggable?: boolean | undefined;
+            isResizable?: boolean | undefined;
+            w: number;
+            h: number;
+            x: number;
+            y: number;
+            i: string | number;
+        };
+    }): any;
 }>;
-export default _sfc_main;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

dist/helpers/common.d.ts

@@ -1,4 +0,4 @@
-import type { InjectionKey } from 'vue';
-import type { EventEmitter } from '@vexip-ui/utils';
-import type { LayoutItem, Layout, LayoutInstance } from './types';
+import { InjectionKey } from 'vue';
+import { EventEmitter } from '@vexip-ui/utils';
+import { Layout, LayoutInstance, LayoutItem } from './types';
 export declare const LAYOUT_KEY: InjectionKey<LayoutInstance>;
@@ -5,0 +5,0 @@ export declare const EMITTER_KEY: InjectionKey<EventEmitter>;

dist/helpers/responsive.d.ts

@@ -1,2 +0,2 @@
-import type { Layout, Breakpoint, Breakpoints, ResponsiveLayout } from './types';
+import { Breakpoint, Breakpoints, Layout, ResponsiveLayout } from './types';
 /**
@@ -3,0 +3,0 @@ * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).

lib/components/grid-item.vue.js

@@ -1,2 +0,2 @@
-"use strict";const a=require("vue"),g=require("@vexip-ui/utils"),v=require("../helpers/common.js"),W=require("../helpers/draggable.js"),Me=require("../helpers/responsive.js"),he=require("../helpers/dom.js"),pe=require("interactjs"),Ne=a.defineComponent({__name:"grid-item",props:{isDraggable:{type:Boolean,default:null},isResizable:{type:Boolean,default:null},isBounded:{type:Boolean,default:null},static:{type:Boolean,default:!1},minH:{type:Number,default:1},minW:{type:Number,default:1},maxH:{type:Number,default:1/0},maxW:{type:Number,default:1/0},x:{type:Number,required:!0},y:{type:Number,required:!0},w:{type:Number,required:!0},h:{type:Number,required:!0},i:{type:[Number,String],required:!0},dragIgnoreFrom:{type:String,default:"a, button"},dragAllowFrom:{type:String,default:null},resizeIgnoreFrom:{type:String,default:"a, button"},preserveAspectRatio:{type:Boolean,default:!1},dragOption:{type:Object,default:()=>({})},resizeOption:{type:Object,default:()=>({})}},emits:["container-resized","resize","resized","move","moved"],setup(we,{expose:be,emit:M}){const i=we,c=a.inject(v.LAYOUT_KEY),u=a.inject(v.EMITTER_KEY);if(!c)throw new Error("[grid-layout-plus]: missing layout store, GridItem must under a GridLayout.");const d=a.ref(null),e=a.reactive({cols:1,containerWidth:100,rowHeight:30,margin:[10,10],maxRows:1/0,draggable:null,resizable:null,bounded:null,transformScale:1,useCssTransforms:!0,useStyleCursor:!0,isDragging:!1,dragging:{top:-1,left:-1},isResizing:!1,resizing:{width:-1,height:-1},style:{},rtl:!1});let A=!1,Y=!1,L=NaN,X=NaN,_=NaN,j=NaN,$=-1,G=-1,K=-1,V=-1,p=i.x,y=i.y,w=i.w,x=i.h;const N=a.ref(),J=a.reactive({i:a.toRef(i,"i"),state:e,wrapper:N,calcXY:I});function Q(t){ve(t)}function Z(){fe()}function U(t){g.isNull(i.isDraggable)&&(e.draggable=t)}function ee(t){g.isNull(i.isResizable)&&(e.resizable=t)}function te(t){g.isNull(i.isBounded)&&(e.bounded=t)}function ie(t){e.transformScale=t}function re(t){e.rowHeight=t}function ne(t){e.maxRows=t}function ae(){e.rtl=he.getDocumentDir()==="rtl",fe()}function oe(t){e.cols=Math.floor(t)}c.increaseItem(J),a.onBeforeMount(()=>{e.rtl=he.getDocumentDir()==="rtl"}),a.onMounted(()=>{c.responsive&&c.lastBreakpoint?e.cols=Me.getColsFromBreakpoint(c.lastBreakpoint,c.cols):e.cols=c.colNum,e.rowHeight=c.rowHeight,e.containerWidth=c.width!==null?c.width:100,e.margin=c.margin!==void 0?c.margin.map(Number):[10,10],e.maxRows=c.maxRows,g.isNull(i.isDraggable)?e.draggable=c.isDraggable:e.draggable=i.isDraggable,g.isNull(i.isResizable)?e.resizable=c.isResizable:e.resizable=i.isResizable,g.isNull(i.isBounded)?e.bounded=c.isBounded:e.bounded=i.isBounded,e.transformScale=c.transformScale,e.useCssTransforms=c.useCssTransforms,e.useStyleCursor=c.useStyleCursor,a.watchEffect(()=>{p=i.x,y=i.y,x=i.h,w=i.w,g.nextTickOnce(S)}),u.on("updateWidth",Q),u.on("compact",Z),u.on("setDraggable",U),u.on("setResizable",ee),u.on("setBounded",te),u.on("setTransformScale",ie),u.on("setRowHeight",re),u.on("setMaxRows",ne),u.on("directionchange",ae),u.on("setColNum",oe)}),a.onBeforeUnmount(()=>{u.off("updateWidth",Q),u.off("compact",Z),u.off("setDraggable",U),u.off("setResizable",ee),u.off("setBounded",te),u.off("setTransformScale",ie),u.off("setRowHeight",re),u.off("setMaxRows",ne),u.off("directionchange",ae),u.off("setColNum",oe),d.value&&(d.value.unset(),d.value=null),c.decreaseItem(J)}),be({state:e,wrapper:N});const ze=navigator.userAgent.toLowerCase().includes("android"),se=a.computed(()=>e.resizable&&!i.static),h=a.computed(()=>c.isMirrored?!e.rtl:e.rtl),ye=a.computed(()=>(e.draggable||e.resizable)&&!i.static),z=v.useNameHelper("item"),xe=a.computed(()=>({[z.b()]:!0,[z.bm("resizable")]:se.value,[z.bm("static")]:i.static,[z.bm("resizing")]:e.isResizing,[z.bm("dragging")]:e.isDragging,[z.bm("transform")]:e.useCssTransforms,[z.bm("rtl")]:h.value,[z.bm("no-touch")]:ze&&ye.value})),D=a.computed(()=>[z.be("resizer"),h.value&&z.bem("resizer","rtl")].filter(Boolean));a.watch(()=>i.isDraggable,t=>{e.draggable=t}),a.watch(()=>i.static,()=>{g.nextTickOnce(me),g.nextTickOnce(H)}),a.watch(()=>e.draggable,()=>{g.nextTickOnce(me)}),a.watch(()=>i.isResizable,t=>{e.resizable=t}),a.watch(()=>i.isBounded,t=>{e.bounded=t}),a.watch(()=>e.resizable,()=>{g.nextTickOnce(H)}),a.watch(()=>e.rowHeight,()=>{g.nextTickOnce(S),g.nextTickOnce(O)}),a.watch([()=>e.cols,()=>e.containerWidth],()=>{g.nextTickOnce(H),g.nextTickOnce(S),g.nextTickOnce(O)}),a.watch([()=>i.minH,()=>i.maxH,()=>i.minW,()=>i.maxW],()=>{g.nextTickOnce(H)}),a.watch(h,()=>{g.nextTickOnce(H),g.nextTickOnce(S)}),a.watch([()=>c.margin,()=>c.margin[0],()=>c.margin[1]],()=>{const t=c.margin;!t||t[0]===e.margin[0]&&t[1]===e.margin[1]||(e.margin=t.map(Number),g.nextTickOnce(S),g.nextTickOnce(O))});function S(){i.x+i.w>e.cols?(p=0,w=i.w>e.cols?e.cols:i.w):(p=i.x,w=i.w);const t=T(p,y,w,x);e.isDragging&&(t.top=e.dragging.top,h.value?t.right=e.dragging.left:t.left=e.dragging.left),e.isResizing&&(t.width=e.resizing.width,t.height=e.resizing.height);let n;e.useCssTransforms?h.value?n=v.setTransformRtl(t.top,t.right,t.width,t.height):n=v.setTransform(t.top,t.left,t.width,t.height):h.value?n=v.setTopRight(t.top,t.right,t.width,t.height):n=v.setTopLeft(t.top,t.left,t.width,t.height),e.style=n}function O(){const t={};for(const n of["width","height"]){const s=e.style[n].match(/^(\d+)px$/);if(!s)return;t[n]=s[1]}M("container-resized",i.i,i.h,i.w,t.height,t.width)}function le(t){if(i.static)return;const n=t.type;if(n==="resizestart"&&e.isResizing||n!=="resizestart"&&!e.isResizing)return;const l=W.getControlPosition(t);if(g.isNull(l))return;const{x:s,y:f}=l,o={width:0,height:0};let r;switch(n){case"resizestart":{H(),$=w,G=x,r=T(p,y,w,x),o.width=r.width,o.height=r.height,e.resizing=o,e.isResizing=!0;break}case"resizemove":{const m=W.createCoreData(_,j,s,f);h.value?o.width=e.resizing.width-m.deltaX/e.transformScale:o.width=e.resizing.width+m.deltaX/e.transformScale,o.height=e.resizing.height+m.deltaY/e.transformScale,e.resizing=o;break}case"resizeend":{r=T(p,y,w,x),o.width=r.width,o.height=r.height,e.resizing={width:-1,height:-1},e.isResizing=!1;break}}r=Re(o.height,o.width),r.w<i.minW&&(r.w=i.minW),r.w>i.maxW&&(r.w=i.maxW),r.h<i.minH&&(r.h=i.minH),r.h>i.maxH&&(r.h=i.maxH),r.h<1&&(r.h=1),r.w<1&&(r.w=1),_=s,j=f,(w!==r.w||x!==r.h)&&M("resize",i.i,r.h,r.w,o.height,o.width),t.type==="resizeend"&&($!==w||G!==x)&&M("resized",i.i,r.h,r.w,o.height,o.width),u.emit("resizeEvent",t.type,i.i,p,y,r.h,r.w)}function ce(t){if(i.static||e.isResizing)return;const n=t.type;if(n==="dragstart"&&e.isDragging||n!=="dragstart"&&!e.isDragging)return;const l=W.getControlPosition(t);if(g.isNull(l))return;const{x:s,y:f}=l,o=t.target;if(!o.offsetParent)return;const r={top:0,left:0};switch(n){case"dragstart":{K=p,V=y;const b=o.offsetParent.getBoundingClientRect(),R=o.getBoundingClientRect(),k=R.left/e.transformScale,B=b.left/e.transformScale,E=R.right/e.transformScale,q=b.right/e.transformScale,F=R.top/e.transformScale,P=b.top/e.transformScale;h.value?r.left=(E-q)*-1:r.left=k-B,r.top=F-P,e.dragging=r,e.isDragging=!0;break}case"dragmove":{const b=W.createCoreData(L,X,s,f);if(h.value?r.left=e.dragging.left-b.deltaX/e.transformScale:r.left=e.dragging.left+b.deltaX/e.transformScale,r.top=e.dragging.top+b.deltaY/e.transformScale,e.bounded){const R=o.offsetParent.clientHeight-ge(i.h,e.rowHeight,e.margin[1]);r.top=ue(r.top,0,R);const k=C(),B=e.containerWidth-ge(i.w,k,e.margin[0]);r.left=ue(r.left,0,B)}e.dragging=r;break}case"dragend":{const b=o.offsetParent.getBoundingClientRect(),R=o.getBoundingClientRect(),k=R.left/e.transformScale,B=b.left/e.transformScale,E=R.right/e.transformScale,q=b.right/e.transformScale,F=R.top/e.transformScale,P=b.top/e.transformScale;h.value?r.left=(E-q)*-1:r.left=k-B,r.top=F-P,e.dragging={top:-1,left:-1},e.isDragging=!1;break}}let m;h.value,m=I(r.top,r.left),L=s,X=f,(p!==m.x||y!==m.y)&&M("move",i.i,m.x,m.y),t.type==="dragend"&&(K!==p||V!==y)&&M("moved",i.i,m.x,m.y),u.emit("dragEvent",t.type,i.i,m.x,m.y,x,w)}function T(t,n,l,s){const f=C();let o;return h.value?o={right:Math.round(f*t+(t+1)*e.margin[0]),top:Math.round(e.rowHeight*n+(n+1)*e.margin[1]),width:l===1/0?l:Math.round(f*l+Math.max(0,l-1)*e.margin[0]),height:s===1/0?s:Math.round(e.rowHeight*s+Math.max(0,s-1)*e.margin[1])}:o={left:Math.round(f*t+(t+1)*e.margin[0]),top:Math.round(e.rowHeight*n+(n+1)*e.margin[1]),width:l===1/0?l:Math.round(f*l+Math.max(0,l-1)*e.margin[0]),height:s===1/0?s:Math.round(e.rowHeight*s+Math.max(0,s-1)*e.margin[1])},o}function I(t,n){const l=C();let s=Math.round((n-e.margin[0])/(l+e.margin[0])),f=Math.round((t-e.margin[1])/(e.rowHeight+e.margin[1]));return s=Math.max(Math.min(s,e.cols-w),0),f=Math.max(Math.min(f,e.maxRows-x),0),{x:s,y:f}}function C(){return(e.containerWidth-e.margin[0]*(e.cols+1))/e.cols}function ge(t,n,l){return Number.isFinite(t)?Math.round(n*t+Math.max(0,t-1)*l):t}function ue(t,n,l){return Math.max(Math.min(t,l),n)}function Re(t,n,l=!1){const s=C();let f=Math.round((n+e.margin[0])/(s+e.margin[0])),o=0;return l?o=Math.ceil((t+e.margin[1])/(e.rowHeight+e.margin[1])):o=Math.round((t+e.margin[1])/(e.rowHeight+e.margin[1])),f=Math.max(Math.min(f,e.cols-p),0),o=Math.max(Math.min(o,e.maxRows-y),0),{w:f,h:o}}function ve(t,n){e.containerWidth=t,n!=null&&(e.cols=n)}function fe(){S()}function de(){!d.value&&N.value&&(d.value=pe(N.value),e.useStyleCursor||d.value.styleCursor(!1))}const Se=g.throttle(ce);function me(){if(de(),!!d.value)if(e.draggable&&!i.static){const t={ignoreFrom:i.dragIgnoreFrom,allowFrom:i.dragAllowFrom,...i.dragOption};d.value.draggable(t),A||(A=!0,d.value.on("dragstart dragmove dragend",n=>{n.type==="dragmove"?Se(n):ce(n)}))}else d.value.draggable({enabled:!1})}const He=g.throttle(le);function H(){if(de(),!!d.value)if(e.resizable&&!i.static){const t=T(0,0,i.maxW,i.maxH),n=T(0,0,i.minW,i.minH),l={edges:{left:!1,right:`.${D.value[0]}`,bottom:`.${D.value[0]}`,top:!1},ignoreFrom:i.resizeIgnoreFrom,restrictSize:{min:{height:n.height*e.transformScale,width:n.width*e.transformScale},max:{height:t.height*e.transformScale,width:t.width*e.transformScale}},...i.resizeOption};i.preserveAspectRatio&&(l.modifiers=[pe.modifiers.aspectRatio({ratio:"preserve"})]),d.value.resizable(l),Y||(Y=!0,d.value.on("resizestart resizemove resizeend",s=>{s.type==="resizemove"?He(s):le(s)}))}else d.value.resizable({enabled:!1})}return(t,n)=>(a.openBlock(),a.createElementBlock("section",{ref_key:"wrapper",ref:N,class:a.normalizeClass(a.unref(xe)),style:a.normalizeStyle(e.style)},[a.renderSlot(t.$slots,"default"),a.unref(se)?(a.openBlock(),a.createElementBlock("span",{key:0,class:a.normalizeClass(a.unref(D))},null,2)):a.createCommentVNode("",!0)],6))}});module.exports=Ne;
+"use strict";const n=require("vue"),g=require("@vexip-ui/utils"),v=require("../helpers/common.js"),W=require("../helpers/draggable.js"),Ne=require("../helpers/responsive.js"),he=require("../helpers/dom.js"),pe=require("interactjs"),Te=n.defineComponent({__name:"grid-item",props:{isDraggable:{type:Boolean,default:null},isResizable:{type:Boolean,default:null},isBounded:{type:Boolean,default:null},static:{type:Boolean,default:!1},minH:{type:Number,default:1},minW:{type:Number,default:1},maxH:{type:Number,default:1/0},maxW:{type:Number,default:1/0},x:{type:Number,required:!0},y:{type:Number,required:!0},w:{type:Number,required:!0},h:{type:Number,required:!0},i:{type:[Number,String],required:!0},dragIgnoreFrom:{type:String,default:"a, button"},dragAllowFrom:{type:String,default:null},resizeIgnoreFrom:{type:String,default:"a, button"},preserveAspectRatio:{type:Boolean,default:!1},dragOption:{type:Object,default:()=>({})},resizeOption:{type:Object,default:()=>({})}},emits:["container-resized","resize","resized","move","moved"],setup(we,{expose:be,emit:ze}){const i=we,M=ze,c=n.inject(v.LAYOUT_KEY),u=n.inject(v.EMITTER_KEY);if(!c)throw new Error("[grid-layout-plus]: missing layout store, GridItem must under a GridLayout.");const d=n.ref(null),e=n.reactive({cols:1,containerWidth:100,rowHeight:30,margin:[10,10],maxRows:1/0,draggable:null,resizable:null,bounded:null,transformScale:1,useCssTransforms:!0,useStyleCursor:!0,isDragging:!1,dragging:{top:-1,left:-1},isResizing:!1,resizing:{width:-1,height:-1},style:{},rtl:!1});let L=!1,X=!1,_=NaN,j=NaN,D=NaN,O=NaN,$=-1,G=-1,K=-1,V=-1,p=i.x,y=i.y,w=i.w,x=i.h;const N=n.ref(),J=n.reactive({i:n.toRef(i,"i"),state:e,wrapper:N,calcXY:q});function Q(t){Se(t)}function Z(){fe()}function U(t){g.isNull(i.isDraggable)&&(e.draggable=t)}function ee(t){g.isNull(i.isResizable)&&(e.resizable=t)}function te(t){g.isNull(i.isBounded)&&(e.bounded=t)}function ie(t){e.transformScale=t}function re(t){e.rowHeight=t}function ae(t){e.maxRows=t}function ne(){e.rtl=he.getDocumentDir()==="rtl",fe()}function oe(t){e.cols=Math.floor(t)}c.increaseItem(J),n.onBeforeMount(()=>{e.rtl=he.getDocumentDir()==="rtl"}),n.onMounted(()=>{c.responsive&&c.lastBreakpoint?e.cols=Ne.getColsFromBreakpoint(c.lastBreakpoint,c.cols):e.cols=c.colNum,e.rowHeight=c.rowHeight,e.containerWidth=c.width!==null?c.width:100,e.margin=c.margin!==void 0?c.margin.map(Number):[10,10],e.maxRows=c.maxRows,g.isNull(i.isDraggable)?e.draggable=c.isDraggable:e.draggable=i.isDraggable,g.isNull(i.isResizable)?e.resizable=c.isResizable:e.resizable=i.isResizable,g.isNull(i.isBounded)?e.bounded=c.isBounded:e.bounded=i.isBounded,e.transformScale=c.transformScale,e.useCssTransforms=c.useCssTransforms,e.useStyleCursor=c.useStyleCursor,n.watchEffect(()=>{p=i.x,y=i.y,x=i.h,w=i.w,g.nextTickOnce(S)}),u.on("updateWidth",Q),u.on("compact",Z),u.on("setDraggable",U),u.on("setResizable",ee),u.on("setBounded",te),u.on("setTransformScale",ie),u.on("setRowHeight",re),u.on("setMaxRows",ae),u.on("directionchange",ne),u.on("setColNum",oe)}),n.onBeforeUnmount(()=>{u.off("updateWidth",Q),u.off("compact",Z),u.off("setDraggable",U),u.off("setResizable",ee),u.off("setBounded",te),u.off("setTransformScale",ie),u.off("setRowHeight",re),u.off("setMaxRows",ae),u.off("directionchange",ne),u.off("setColNum",oe),d.value&&(d.value.unset(),d.value=null),c.decreaseItem(J)}),be({state:e,wrapper:N});const ye=typeof navigator<"u"?navigator.userAgent.toLowerCase().includes("android"):!1,se=n.computed(()=>e.resizable&&!i.static),h=n.computed(()=>c.isMirrored?!e.rtl:e.rtl),xe=n.computed(()=>(e.draggable||e.resizable)&&!i.static),z=v.useNameHelper("item"),Re=n.computed(()=>({[z.b()]:!0,[z.bm("resizable")]:se.value,[z.bm("static")]:i.static,[z.bm("resizing")]:e.isResizing,[z.bm("dragging")]:e.isDragging,[z.bm("transform")]:e.useCssTransforms,[z.bm("rtl")]:h.value,[z.bm("no-touch")]:ye&&xe.value})),I=n.computed(()=>[z.be("resizer"),h.value&&z.bem("resizer","rtl")].filter(Boolean));n.watch(()=>i.isDraggable,t=>{e.draggable=t}),n.watch(()=>i.static,()=>{g.nextTickOnce(me),g.nextTickOnce(H)}),n.watch(()=>e.draggable,()=>{g.nextTickOnce(me)}),n.watch(()=>i.isResizable,t=>{e.resizable=t}),n.watch(()=>i.isBounded,t=>{e.bounded=t}),n.watch(()=>e.resizable,()=>{g.nextTickOnce(H)}),n.watch(()=>e.rowHeight,()=>{g.nextTickOnce(S),g.nextTickOnce(E)}),n.watch([()=>e.cols,()=>e.containerWidth],()=>{g.nextTickOnce(H),g.nextTickOnce(S),g.nextTickOnce(E)}),n.watch([()=>i.minH,()=>i.maxH,()=>i.minW,()=>i.maxW],()=>{g.nextTickOnce(H)}),n.watch(h,()=>{g.nextTickOnce(H),g.nextTickOnce(S)}),n.watch([()=>c.margin,()=>c.margin[0],()=>c.margin[1]],()=>{const t=c.margin;!t||t[0]===e.margin[0]&&t[1]===e.margin[1]||(e.margin=t.map(Number),g.nextTickOnce(S),g.nextTickOnce(E))});function S(){i.x+i.w>e.cols?(p=0,w=i.w>e.cols?e.cols:i.w):(p=i.x,w=i.w);const t=T(p,y,w,x);e.isDragging&&(t.top=e.dragging.top,h.value?t.right=e.dragging.left:t.left=e.dragging.left),e.isResizing&&(t.width=e.resizing.width,t.height=e.resizing.height);let a;e.useCssTransforms?h.value?a=v.setTransformRtl(t.top,t.right,t.width,t.height):a=v.setTransform(t.top,t.left,t.width,t.height):h.value?a=v.setTopRight(t.top,t.right,t.width,t.height):a=v.setTopLeft(t.top,t.left,t.width,t.height),e.style=a}function E(){const t={};for(const a of["width","height"]){const s=e.style[a].match(/^(\d+)px$/);if(!s)return;t[a]=s[1]}M("container-resized",i.i,i.h,i.w,t.height,t.width)}function le(t){if(i.static)return;const a=t.type;if(a==="resizestart"&&e.isResizing||a!=="resizestart"&&!e.isResizing)return;const l=W.getControlPosition(t);if(g.isNull(l))return;const{x:s,y:f}=l,o={width:0,height:0};let r;switch(a){case"resizestart":{H(),$=w,G=x,r=T(p,y,w,x),o.width=r.width,o.height=r.height,e.resizing=o,e.isResizing=!0;break}case"resizemove":{!t.edges.right&&!t.edges.left&&(D=s),!t.edges.top&&!t.edges.bottom&&(O=f);const m=W.createCoreData(D,O,s,f);h.value?o.width=e.resizing.width-m.deltaX/e.transformScale:o.width=e.resizing.width+m.deltaX/e.transformScale,o.height=e.resizing.height+m.deltaY/e.transformScale,e.resizing=o;break}case"resizeend":{r=T(p,y,w,x),o.width=r.width,o.height=r.height,e.resizing={width:-1,height:-1},e.isResizing=!1;break}}r=ve(o.height,o.width),r.w<i.minW&&(r.w=i.minW),r.w>i.maxW&&(r.w=i.maxW),r.h<i.minH&&(r.h=i.minH),r.h>i.maxH&&(r.h=i.maxH),r.h<1&&(r.h=1),r.w<1&&(r.w=1),D=s,O=f,(w!==r.w||x!==r.h)&&M("resize",i.i,r.h,r.w,o.height,o.width),t.type==="resizeend"&&($!==w||G!==x)&&M("resized",i.i,r.h,r.w,o.height,o.width),u.emit("resizeEvent",t.type,i.i,p,y,r.h,r.w)}function ce(t){if(i.static||e.isResizing)return;const a=t.type;if(a==="dragstart"&&e.isDragging||a!=="dragstart"&&!e.isDragging)return;const l=W.getControlPosition(t);if(g.isNull(l))return;const{x:s,y:f}=l,o=t.target;if(!o.offsetParent)return;const r={top:0,left:0};switch(a){case"dragstart":{K=p,V=y;const b=o.offsetParent.getBoundingClientRect(),R=o.getBoundingClientRect(),k=R.left/e.transformScale,B=b.left/e.transformScale,F=R.right/e.transformScale,P=b.right/e.transformScale,A=R.top/e.transformScale,Y=b.top/e.transformScale;h.value?r.left=(F-P)*-1:r.left=k-B,r.top=A-Y,e.dragging=r,e.isDragging=!0;break}case"dragmove":{const b=W.createCoreData(_,j,s,f);if(h.value?r.left=e.dragging.left-b.deltaX/e.transformScale:r.left=e.dragging.left+b.deltaX/e.transformScale,r.top=e.dragging.top+b.deltaY/e.transformScale,e.bounded){const R=o.offsetParent.clientHeight-ge(i.h,e.rowHeight,e.margin[1]);r.top=ue(r.top,0,R);const k=C(),B=e.containerWidth-ge(i.w,k,e.margin[0]);r.left=ue(r.left,0,B)}e.dragging=r;break}case"dragend":{const b=o.offsetParent.getBoundingClientRect(),R=o.getBoundingClientRect(),k=R.left/e.transformScale,B=b.left/e.transformScale,F=R.right/e.transformScale,P=b.right/e.transformScale,A=R.top/e.transformScale,Y=b.top/e.transformScale;h.value?r.left=(F-P)*-1:r.left=k-B,r.top=A-Y,e.dragging={top:-1,left:-1},e.isDragging=!1;break}}let m;h.value,m=q(r.top,r.left),_=s,j=f,(p!==m.x||y!==m.y)&&M("move",i.i,m.x,m.y),t.type==="dragend"&&(K!==p||V!==y)&&M("moved",i.i,m.x,m.y),u.emit("dragEvent",t.type,i.i,m.x,m.y,x,w)}function T(t,a,l,s){const f=C();let o;return h.value?o={right:Math.round(f*t+(t+1)*e.margin[0]),top:Math.round(e.rowHeight*a+(a+1)*e.margin[1]),width:l===1/0?l:Math.round(f*l+Math.max(0,l-1)*e.margin[0]),height:s===1/0?s:Math.round(e.rowHeight*s+Math.max(0,s-1)*e.margin[1])}:o={left:Math.round(f*t+(t+1)*e.margin[0]),top:Math.round(e.rowHeight*a+(a+1)*e.margin[1]),width:l===1/0?l:Math.round(f*l+Math.max(0,l-1)*e.margin[0]),height:s===1/0?s:Math.round(e.rowHeight*s+Math.max(0,s-1)*e.margin[1])},o}function q(t,a){const l=C();let s=Math.round((a-e.margin[0])/(l+e.margin[0])),f=Math.round((t-e.margin[1])/(e.rowHeight+e.margin[1]));return s=Math.max(Math.min(s,e.cols-w),0),f=Math.max(Math.min(f,e.maxRows-x),0),{x:s,y:f}}function C(){return(e.containerWidth-e.margin[0]*(e.cols+1))/e.cols}function ge(t,a,l){return Number.isFinite(t)?Math.round(a*t+Math.max(0,t-1)*l):t}function ue(t,a,l){return Math.max(Math.min(t,l),a)}function ve(t,a,l=!1){const s=C();let f=Math.round((a+e.margin[0])/(s+e.margin[0])),o=0;return l?o=Math.ceil((t+e.margin[1])/(e.rowHeight+e.margin[1])):o=Math.round((t+e.margin[1])/(e.rowHeight+e.margin[1])),f=Math.max(Math.min(f,e.cols-p),0),o=Math.max(Math.min(o,e.maxRows-y),0),{w:f,h:o}}function Se(t,a){e.containerWidth=t}function fe(){S()}function de(){!d.value&&N.value&&(d.value=pe(N.value),e.useStyleCursor||d.value.styleCursor(!1))}const He=g.throttle(ce);function me(){if(de(),!!d.value)if(e.draggable&&!i.static){const t={ignoreFrom:i.dragIgnoreFrom,allowFrom:i.dragAllowFrom,...i.dragOption};d.value.draggable(t),L||(L=!0,d.value.on("dragstart dragmove dragend",a=>{a.type==="dragmove"?He(a):ce(a)}))}else d.value.draggable({enabled:!1})}const Me=g.throttle(le);function H(){if(de(),!!d.value)if(e.resizable&&!i.static){const t=T(0,0,i.maxW,i.maxH),a=T(0,0,i.minW,i.minH),l={edges:{left:!1,right:`.${I.value[0]}`,bottom:`.${I.value[0]}`,top:!1},ignoreFrom:i.resizeIgnoreFrom,restrictSize:{min:{height:a.height*e.transformScale,width:a.width*e.transformScale},max:{height:t.height*e.transformScale,width:t.width*e.transformScale}},...i.resizeOption};i.preserveAspectRatio&&(l.modifiers=[pe.modifiers.aspectRatio({ratio:"preserve"})]),d.value.resizable(l),X||(X=!0,d.value.on("resizestart resizemove resizeend",s=>{s.type==="resizemove"?Me(s):le(s)}))}else d.value.resizable({enabled:!1})}return(t,a)=>(n.openBlock(),n.createElementBlock("section",{ref_key:"wrapper",ref:N,class:n.normalizeClass(Re.value),style:n.normalizeStyle(e.style)},[n.renderSlot(t.$slots,"default"),se.value?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(I.value)},null,2)):n.createCommentVNode("",!0)],6))}});module.exports=Te;
 //# sourceMappingURL=grid-item.vue.js.map

lib/components/grid-layout.vue.js

@@ -1,2 +0,2 @@
-"use strict";const a=require("vue"),S=require("./grid-item.vue.js"),j=require("@vexip-ui/hooks"),h=require("@vexip-ui/utils"),u=require("../helpers/common.js"),x=require("../helpers/responsive.js"),U=a.defineComponent({__name:"grid-layout",props:{autoSize:{type:Boolean,default:!0},colNum:{type:Number,default:12},rowHeight:{type:Number,default:150},maxRows:{type:Number,default:1/0},margin:{type:Array,default:()=>[10,10]},isDraggable:{type:Boolean,default:!0},isResizable:{type:Boolean,default:!0},isMirrored:{type:Boolean,default:!1},isBounded:{type:Boolean,default:!1},useCssTransforms:{type:Boolean,default:!0},verticalCompact:{type:Boolean,default:!0},restoreOnDrag:{type:Boolean,default:!1},layout:{type:Array,required:!0},responsive:{type:Boolean,default:!1},responsiveLayouts:{type:Object,default:()=>({})},transformScale:{type:Number,default:1},breakpoints:{type:Object,default:()=>({lg:1200,md:996,sm:768,xs:480,xxs:0})},cols:{type:Object,default:()=>({lg:12,md:10,sm:6,xs:4,xxs:2})},preventCollision:{type:Boolean,default:!1},useStyleCursor:{type:Boolean,default:!0}},emits:["layout-before-mount","layout-mounted","layout-updated","breakpoint-changed","update:layout","layout-ready"],setup(D,{expose:T,emit:c}){const o=D,t=a.reactive({width:-1,mergedStyle:{},lastLayoutLength:0,isDragging:!1,placeholder:{x:0,y:0,w:0,h:0,i:""},layouts:{},lastBreakpoint:null,originalLayout:null}),b=new Map,i=a.ref(o.layout),g=a.ref(),{observeResize:_,unobserveResize:N}=j.useResize(),r=h.createEventEmitter();r.on("resizeEvent",H),r.on("dragEvent",q),a.onBeforeMount(()=>{c("layout-before-mount",i.value)}),a.onMounted(()=>{c("layout-mounted",i.value),a.nextTick(()=>{u.validateLayout(i.value),t.originalLayout=i.value,a.nextTick(()=>{E(),g.value&&_(g.value,h.debounce(L,16)),u.compact(i.value,o.verticalCompact),c("layout-updated",i.value),m(),L()})})}),a.onBeforeUnmount(()=>{r.clearAll(),g.value&&N(g.value)});function H(e,s,n,f,d,p){z(e,s,n,f,d,p)}function q(e,s,n,f,d,p){R(e,s,n,f,d,p)}a.watch(()=>t.width,(e,s)=>{a.nextTick(()=>{r.emit("updateWidth",e),s===-1&&a.nextTick(()=>{c("layout-ready",i.value)}),m()})}),a.watch(()=>[o.layout,o.layout.length],()=>{i.value=o.layout,M()}),a.watch(()=>o.colNum,e=>{r.emit("setColNum",e)}),a.watch(()=>o.rowHeight,e=>{r.emit("setRowHeight",e)}),a.watch(()=>o.isDraggable,e=>{r.emit("setDraggable",e)}),a.watch(()=>o.isResizable,e=>{r.emit("setResizable",e)}),a.watch(()=>o.isBounded,e=>{r.emit("setBounded",e)}),a.watch(()=>o.transformScale,e=>{r.emit("setTransformScale",e)}),a.watch(()=>o.responsive,e=>{e||(c("update:layout",t.originalLayout),r.emit("setColNum",o.colNum)),L()}),a.watch(()=>o.maxRows,e=>{r.emit("setMaxRows",e)}),a.watch([()=>o.margin,()=>o.margin[1]],m),a.provide(u.LAYOUT_KEY,a.reactive({...a.toRefs(o),...a.toRefs(t),increaseItem:I,decreaseItem:O})),a.provide(u.EMITTER_KEY,r),T({state:t,getItem:F,resizeEvent:z,dragEvent:R});function I(e){b.set(e.i,e)}function O(e){b.delete(e.i)}function F(e){return b.get(e)}function M(){if(!h.isNull(i.value)&&!h.isNull(t.originalLayout)){if(i.value.length!==t.originalLayout.length){const e=Y(i.value,t.originalLayout);if(e.length>0)if(i.value.length>t.originalLayout.length)t.originalLayout=t.originalLayout.concat(e);else{const s=new Set(e.map(n=>n.i));t.originalLayout=t.originalLayout.filter(n=>!s.has(n.i))}t.lastLayoutLength=i.value.length,E()}u.compact(i.value,o.verticalCompact),r.emit("updateWidth",t.width),m(),c("layout-updated",i.value)}}function m(){t.mergedStyle={height:W()}}function L(){g.value&&(t.width=g.value.offsetWidth),r.emit("resizeEvent")}function W(){if(!o.autoSize)return;const e=parseFloat(o.margin[1]);return u.bottom(i.value)*(o.rowHeight+e)+e+"px"}let C;function R(e,s,n,f,d,p){let l=u.getLayoutItem(i.value,s);h.isNull(l)&&(l={h:0,w:0,x:0,y:0,i:""}),e==="dragstart"&&!o.verticalCompact&&(C=i.value.reduce((w,{i:k,x:y,y:v})=>({...w,[k]:{x:y,y:v}}),{})),e==="dragmove"||e==="dragstart"?(t.placeholder.i=s,t.placeholder.x=l.x,t.placeholder.y=l.y,t.placeholder.w=p,t.placeholder.h=d,a.nextTick(()=>{t.isDragging=!0}),r.emit("updateWidth",t.width)):a.nextTick(()=>{t.isDragging=!1}),i.value=u.moveElement(i.value,l,n,f,!0,o.preventCollision),o.restoreOnDrag?(l.static=!0,u.compact(i.value,o.verticalCompact,C),l.static=!1):u.compact(i.value,o.verticalCompact),r.emit("compact"),m(),e==="dragend"&&(C=void 0,c("layout-updated",i.value))}function z(e,s,n,f,d,p){let l=u.getLayoutItem(i.value,s);h.isNull(l)&&(l={h:0,w:0,x:0,y:0,i:""});let w;if(o.preventCollision){const k=u.getAllCollisions(i.value,{...l,w:p,h:d}).filter(y=>y.i!==l.i);if(w=k.length>0,w){let y=1/0,v=1/0;k.forEach(B=>{B.x>l.x&&(y=Math.min(y,B.x)),B.y>l.y&&(v=Math.min(v,B.y))}),Number.isFinite(y)&&(l.w=y-l.x),Number.isFinite(v)&&(l.h=v-l.y)}}w||(l.w=p,l.h=d),e==="resizestart"||e==="resizemove"?(t.placeholder.i=s,t.placeholder.x=n,t.placeholder.y=f,t.placeholder.w=l.w,t.placeholder.h=l.h,a.nextTick(()=>{t.isDragging=!0}),r.emit("updateWidth",t.width)):a.nextTick(()=>{t.isDragging=!1}),o.responsive&&A(),u.compact(i.value,o.verticalCompact),r.emit("compact"),m(),e==="resizeend"&&c("layout-updated",i.value)}function A(){const e=x.getBreakpointFromWidth(o.breakpoints,t.width),s=x.getColsFromBreakpoint(e,o.cols);!h.isNull(t.lastBreakpoint)&&!t.layouts[t.lastBreakpoint]&&(t.layouts[t.lastBreakpoint]=u.cloneLayout(i.value));const n=x.findOrGenerateResponsiveLayout(t.originalLayout,t.layouts,o.breakpoints,e,t.lastBreakpoint,s,o.verticalCompact);t.layouts[e]=n,t.lastBreakpoint!==e&&c("breakpoint-changed",e,n),c("update:layout",n),t.lastBreakpoint=e,r.emit("setColNum",x.getColsFromBreakpoint(e,o.cols))}function E(){t.layouts=Object.assign({},o.responsiveLayouts)}function Y(e,s){const n=new Set(s.map(l=>l.i)),f=new Set(e.map(l=>l.i)),d=e.filter(l=>!n.has(l.i)),p=s.filter(l=>!f.has(l.i));return d.concat(p)}return(e,s)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"wrapper",ref:g,class:"vgl-layout",style:a.normalizeStyle(t.mergedStyle)},[e.$slots.default?a.renderSlot(e.$slots,"default",{key:0}):(a.openBlock(!0),a.createElementBlock(a.Fragment,{key:1},a.renderList(i.value,n=>(a.openBlock(),a.createBlock(S,a.mergeProps({key:n.i},n),{default:a.withCtx(()=>[a.renderSlot(e.$slots,"item",{item:n})]),_:2},1040))),128)),a.withDirectives(a.createVNode(S,{class:"vgl-item--placeholder",x:t.placeholder.x,y:t.placeholder.y,w:t.placeholder.w,h:t.placeholder.h,i:t.placeholder.i},null,8,["x","y","w","h","i"]),[[a.vShow,t.isDragging]])],4))}});module.exports=U;
+"use strict";const a=require("vue"),S=require("./grid-item.vue.js"),U=require("@vexip-ui/hooks"),m=require("@vexip-ui/utils"),u=require("../helpers/common.js"),B=require("../helpers/responsive.js"),$=a.defineComponent({__name:"grid-layout",props:{autoSize:{type:Boolean,default:!0},colNum:{type:Number,default:12},rowHeight:{type:Number,default:150},maxRows:{type:Number,default:1/0},margin:{type:Array,default:()=>[10,10]},isDraggable:{type:Boolean,default:!0},isResizable:{type:Boolean,default:!0},isMirrored:{type:Boolean,default:!1},isBounded:{type:Boolean,default:!1},useCssTransforms:{type:Boolean,default:!0},verticalCompact:{type:Boolean,default:!0},restoreOnDrag:{type:Boolean,default:!1},layout:{type:Array,required:!0},responsive:{type:Boolean,default:!1},responsiveLayouts:{type:Object,default:()=>({})},transformScale:{type:Number,default:1},breakpoints:{type:Object,default:()=>({lg:1200,md:996,sm:768,xs:480,xxs:0})},cols:{type:Object,default:()=>({lg:12,md:10,sm:6,xs:4,xxs:2})},preventCollision:{type:Boolean,default:!1},useStyleCursor:{type:Boolean,default:!0}},emits:["layout-before-mount","layout-mounted","layout-updated","breakpoint-changed","update:layout","layout-ready"],setup(_,{expose:D,emit:T}){const o=_,c=T,t=a.reactive({width:-1,mergedStyle:{},lastLayoutLength:0,isDragging:!1,placeholder:{x:0,y:0,w:0,h:0,i:""},layouts:{},lastBreakpoint:null,originalLayout:null}),b=new Map,l=a.ref(o.layout),g=a.ref(),{observeResize:N,unobserveResize:H}=U.useResize(),n=m.createEventEmitter();n.on("resizeEvent",q),n.on("dragEvent",I),a.onBeforeMount(()=>{c("layout-before-mount",l.value)}),a.onMounted(()=>{c("layout-mounted",l.value),a.nextTick(()=>{u.validateLayout(l.value),t.originalLayout=l.value,a.nextTick(()=>{E(),g.value&&N(g.value,m.debounce(L,16)),u.compact(l.value,o.verticalCompact),c("layout-updated",l.value),h(),L()})})}),a.onBeforeUnmount(()=>{n.clearAll(),g.value&&H(g.value)});function q(e,s,r,f,d,p){z(e,s,r,f,d,p)}function I(e,s,r,f,d,p){R(e,s,r,f,d,p)}a.watch(()=>t.width,(e,s)=>{a.nextTick(()=>{n.emit("updateWidth",e),s===-1&&a.nextTick(()=>{c("layout-ready",l.value)}),h()})}),a.watch(()=>[o.layout,o.layout.length],()=>{l.value=o.layout,W()}),a.watch(()=>o.colNum,e=>{n.emit("setColNum",e)}),a.watch(()=>o.rowHeight,e=>{n.emit("setRowHeight",e)}),a.watch(()=>o.isDraggable,e=>{n.emit("setDraggable",e)}),a.watch(()=>o.isResizable,e=>{n.emit("setResizable",e)}),a.watch(()=>o.isBounded,e=>{n.emit("setBounded",e)}),a.watch(()=>o.transformScale,e=>{n.emit("setTransformScale",e)}),a.watch(()=>o.responsive,e=>{e||(c("update:layout",t.originalLayout),n.emit("setColNum",o.colNum)),L()}),a.watch(()=>o.maxRows,e=>{n.emit("setMaxRows",e)}),a.watch([()=>o.margin,()=>o.margin[1]],h),a.provide(u.LAYOUT_KEY,a.reactive({...a.toRefs(o),...a.toRefs(t),increaseItem:O,decreaseItem:F})),a.provide(u.EMITTER_KEY,n),D({state:t,getItem:M,resizeEvent:z,dragEvent:R});function O(e){b.set(e.i,e)}function F(e){b.delete(e.i)}function M(e){return b.get(e)}function W(){if(!m.isNull(l.value)&&!m.isNull(t.originalLayout)){if(l.value.length!==t.originalLayout.length){const e=j(l.value,t.originalLayout);if(e.length>0)if(l.value.length>t.originalLayout.length)t.originalLayout=t.originalLayout.concat(e);else{const s=new Set(e.map(r=>r.i));t.originalLayout=t.originalLayout.filter(r=>!s.has(r.i))}t.lastLayoutLength=l.value.length,E()}u.compact(l.value,o.verticalCompact),n.emit("updateWidth",t.width),h(),c("layout-updated",l.value)}}function h(){t.mergedStyle={height:A()}}function L(){g.value&&(t.width=g.value.offsetWidth),n.emit("resizeEvent")}function A(){if(!o.autoSize)return;const e=parseFloat(o.margin[1]);return u.bottom(l.value)*(o.rowHeight+e)+e+"px"}let C;function R(e,s,r,f,d,p){let i=u.getLayoutItem(l.value,s);m.isNull(i)&&(i={h:0,w:0,x:0,y:0,i:""}),e==="dragstart"&&!o.verticalCompact&&(C=l.value.reduce((w,{i:k,x:y,y:v})=>({...w,[k]:{x:y,y:v}}),{})),e==="dragmove"||e==="dragstart"?(t.placeholder.i=s,t.placeholder.x=i.x,t.placeholder.y=i.y,t.placeholder.w=p,t.placeholder.h=d,a.nextTick(()=>{t.isDragging=!0}),n.emit("updateWidth",t.width)):a.nextTick(()=>{t.isDragging=!1}),l.value=u.moveElement(l.value,i,r,f,!0,o.preventCollision),o.restoreOnDrag?(i.static=!0,u.compact(l.value,o.verticalCompact,C),i.static=!1):u.compact(l.value,o.verticalCompact),n.emit("compact"),h(),e==="dragend"&&(C=void 0,c("layout-updated",l.value))}function z(e,s,r,f,d,p){let i=u.getLayoutItem(l.value,s);m.isNull(i)&&(i={h:0,w:0,x:0,y:0,i:""});let w;if(o.preventCollision){const k=u.getAllCollisions(l.value,{...i,w:p,h:d}).filter(y=>y.i!==i.i);if(w=k.length>0,w){let y=1/0,v=1/0;k.forEach(x=>{x.x>i.x&&(y=Math.min(y,x.x)),x.y>i.y&&(v=Math.min(v,x.y))}),Number.isFinite(y)&&(i.w=y-i.x),Number.isFinite(v)&&(i.h=v-i.y)}}w||(i.w=p,i.h=d),e==="resizestart"||e==="resizemove"?(t.placeholder.i=s,t.placeholder.x=r,t.placeholder.y=f,t.placeholder.w=i.w,t.placeholder.h=i.h,a.nextTick(()=>{t.isDragging=!0}),n.emit("updateWidth",t.width)):a.nextTick(()=>{t.isDragging=!1}),o.responsive&&Y(),u.compact(l.value,o.verticalCompact),n.emit("compact"),h(),e==="resizeend"&&c("layout-updated",l.value)}function Y(){const e=B.getBreakpointFromWidth(o.breakpoints,t.width),s=B.getColsFromBreakpoint(e,o.cols);!m.isNull(t.lastBreakpoint)&&!t.layouts[t.lastBreakpoint]&&(t.layouts[t.lastBreakpoint]=u.cloneLayout(l.value));const r=B.findOrGenerateResponsiveLayout(t.originalLayout,t.layouts,o.breakpoints,e,t.lastBreakpoint,s,o.verticalCompact);t.layouts[e]=r,t.lastBreakpoint!==e&&c("breakpoint-changed",e,r),c("update:layout",r),t.lastBreakpoint=e,n.emit("setColNum",B.getColsFromBreakpoint(e,o.cols))}function E(){t.layouts=Object.assign({},o.responsiveLayouts)}function j(e,s){const r=new Set(s.map(i=>i.i)),f=new Set(e.map(i=>i.i)),d=e.filter(i=>!r.has(i.i)),p=s.filter(i=>!f.has(i.i));return d.concat(p)}return(e,s)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"wrapper",ref:g,class:"vgl-layout",style:a.normalizeStyle(t.mergedStyle)},[e.$slots.default?a.renderSlot(e.$slots,"default",{key:0}):(a.openBlock(!0),a.createElementBlock(a.Fragment,{key:1},a.renderList(l.value,r=>(a.openBlock(),a.createBlock(S,a.mergeProps({key:r.i,ref_for:!0},r),{default:a.withCtx(()=>[a.renderSlot(e.$slots,"item",{item:r})]),_:2},1040))),128)),a.withDirectives(a.createVNode(S,{class:"vgl-item--placeholder",x:t.placeholder.x,y:t.placeholder.y,w:t.placeholder.w,h:t.placeholder.h,i:t.placeholder.i},null,8,["x","y","w","h","i"]),[[a.vShow,t.isDragging]])],4))}});module.exports=$;
 //# sourceMappingURL=grid-layout.vue.js.map

lib/index.js

@@ -1,3 +0,3 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.vgl-layout{--vgl-placeholder-bg: red;--vgl-placeholder-opacity: 20%;--vgl-placeholder-z-index: 2;--vgl-item-resizing-z-index: 3;--vgl-item-resizing-opacity: 60%;--vgl-item-dragging-z-index: 3;--vgl-item-dragging-opacity: 100%;--vgl-resizer-size: 10px;--vgl-resizer-border-color: #444;--vgl-resizer-border-width: 2px;position:relative;box-sizing:border-box;transition:height .2s ease}.vgl-item{position:absolute;box-sizing:border-box;transition:.2s ease;transition-property:left,top,right}.vgl-item--placeholder{z-index:var(--vgl-placeholder-z-index, 2);-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vgl-placeholder-bg, red);opacity:var(--vgl-placeholder-opacity, 20%);transition-duration:.1s}.vgl-item--no-touch{touch-action:none}.vgl-item--transform{right:auto;left:0;transition-property:transform}.vgl-item--transform.vgl-item--rtl{right:0;left:auto}.vgl-item--resizing{z-index:var(--vgl-item-resizing-z-index, 3);-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--vgl-item-resizing-opacity, 60%)}.vgl-item--dragging{z-index:var(--vgl-item-dragging-z-index, 3);-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--vgl-item-dragging-opacity, 100%);transition:none}.vgl-item__resizer{position:absolute;right:0;bottom:0;box-sizing:border-box;width:var(--vgl-resizer-size);height:var(--vgl-resizer-size);cursor:se-resize}.vgl-item__resizer:before{position:absolute;inset:0 3px 3px 0;content:"";border:0 solid var(--vgl-resizer-border-color);border-right-width:var(--vgl-resizer-border-width);border-bottom-width:var(--vgl-resizer-border-width)}.vgl-item__resizer--rtl{right:auto;left:0;cursor:sw-resize}.vgl-item__resizer--rtl:before{inset:0 0 3px 3px;border-right-width:0;border-bottom-width:var(--vgl-resizer-border-width);border-left-width:var(--vgl-resizer-border-width)}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./style.scss.js");const e=require("./components/grid-layout.vue.js"),t=require("./components/grid-item.vue.js");exports.GridLayout=e;exports.GridItem=t;
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.vgl-layout{--vgl-placeholder-bg: red;--vgl-placeholder-opacity: 20%;--vgl-placeholder-z-index: 2;--vgl-item-resizing-z-index: 3;--vgl-item-resizing-opacity: 60%;--vgl-item-dragging-z-index: 3;--vgl-item-dragging-opacity: 100%;--vgl-resizer-size: 10px;--vgl-resizer-border-color: #444;--vgl-resizer-border-width: 2px;position:relative;box-sizing:border-box;transition:height .2s ease}.vgl-item{position:absolute;box-sizing:border-box;transition:.2s ease;transition-property:left,top,right}.vgl-item--placeholder{z-index:var(--vgl-placeholder-z-index, 2);-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vgl-placeholder-bg, red);opacity:var(--vgl-placeholder-opacity, 20%);transition-duration:.1s}.vgl-item--no-touch{touch-action:none}.vgl-item--transform{right:auto;left:0;transition-property:transform}.vgl-item--transform.vgl-item--rtl{right:0;left:auto}.vgl-item--resizing{z-index:var(--vgl-item-resizing-z-index, 3);-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--vgl-item-resizing-opacity, 60%)}.vgl-item--dragging{z-index:var(--vgl-item-dragging-z-index, 3);-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--vgl-item-dragging-opacity, 100%);transition:none}.vgl-item__resizer{position:absolute;right:0;bottom:0;box-sizing:border-box;width:var(--vgl-resizer-size);height:var(--vgl-resizer-size);cursor:se-resize}.vgl-item__resizer:before{position:absolute;top:0;right:3px;bottom:3px;left:0;content:"";border:0 solid var(--vgl-resizer-border-color);border-right-width:var(--vgl-resizer-border-width);border-bottom-width:var(--vgl-resizer-border-width)}.vgl-item__resizer--rtl{right:auto;left:0;cursor:sw-resize}.vgl-item__resizer--rtl:before{top:0;right:0;bottom:3px;left:3px;border-right-width:0;border-bottom-width:var(--vgl-resizer-border-width);border-left-width:var(--vgl-resizer-border-width)}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;const e=require("./components/grid-layout.vue.js"),t=require("./components/grid-item.vue.js");exports.GridLayout=e;exports.GridItem=t;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "grid-layout-plus",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "license": "MIT",
   "author": "qmhc",
-  "packageManager": "pnpm@8.3.0",
   "main": "lib/index.cjs",
@@ -13,12 +12,36 @@ "module": "es/index.mjs",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./es/index.mjs",
-      "require": "./lib/index.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./lib/index.cjs"
     },
-    "./es": "./es/index.mjs",
-    "./lib": "./lib/index.cjs",
-    "./es/*.mjs": "./es/*.mjs",
-    "./es/*": "./es/*.mjs",
-    "./lib/*.cjs": "./lib/*.cjs",
-    "./lib/*": "./lib/*.cjs",
+    "./es": {
+      "types": "./dist/index.d.ts",
+      "import": "./es/index.mjs"
+    },
+    "./lib": {
+      "types": "./dist/index.d.ts",
+      "require": "./lib/index.cjs"
+    },
+    "./es/*.mjs": {
+      "types": "./dist/*.d.ts",
+      "import": "./es/*.mjs"
+    },
+    "./es/*": {
+      "types": [
+        "./dist/*.d.ts",
+        "./dist/*/index.d.ts"
+      ],
+      "import": "./es/*.mjs"
+    },
+    "./lib/*.cjs": {
+      "types": "./dist/*.d.ts",
+      "require": "./lib/*.cjs"
+    },
+    "./lib/*": {
+      "types": [
+        "./dist/*.d.ts",
+        "./dist/*/index.d.ts"
+      ],
+      "require": "./lib/*.cjs"
+    },
     "./package.json": "./package.json",
@@ -48,46 +71,47 @@ "./*": "./*"
   "dependencies": {
-    "@vexip-ui/hooks": "^2.4.0",
-    "@vexip-ui/utils": "^2.13.0",
-    "interactjs": "^1.10.26"
+    "@vexip-ui/hooks": "^2.6.0",
+    "@vexip-ui/utils": "^2.16.1",
+    "interactjs": "^1.10.27"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.1",
-    "@interactjs/types": "^1.10.26",
-    "@types/minimist": "^1.2.2",
-    "@types/node": "^18.15.12",
-    "@types/prettier": "^2.7.2",
-    "@types/prompts": "^2.4.4",
-    "@types/semver": "^7.3.13",
-    "@vexip-ui/commitlint-config": "^0.1.0",
-    "@vexip-ui/eslint-config": "^0.5.2",
-    "@vexip-ui/prettier-config": "^0.1.0",
-    "@vexip-ui/stylelint-config": "^0.3.0",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vue/test-utils": "^2.3.2",
-    "autoprefixer": "^10.4.14",
-    "conventional-changelog-cli": "^2.2.2",
-    "eslint": "^8.38.0",
-    "execa": "^7.1.1",
-    "happy-dom": "^9.8.4",
-    "husky": "^8.0.3",
+    "@commitlint/cli": "^19.6.0",
+    "@interactjs/types": "^1.10.27",
+    "@types/minimist": "^1.2.5",
+    "@types/node": "^22.10.0",
+    "@types/prompts": "^2.4.9",
+    "@types/semver": "^7.5.8",
+    "@vexip-ui/commitlint-config": "^0.5.0",
+    "@vexip-ui/eslint-config": "^0.12.1",
+    "@vexip-ui/prettier-config": "^1.0.0",
+    "@vexip-ui/stylelint-config": "^1.1.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vue/test-utils": "^2.4.6",
+    "autoprefixer": "^10.4.20",
+    "conventional-changelog-angular": "7.0.0",
+    "conventional-changelog-cli": "^4.1.0",
+    "eslint": "^8.57.1",
+    "eslint-define-config": "^2.1.0",
+    "execa": "^9.5.1",
+    "happy-dom": "^15.11.7",
+    "husky": "^9.1.7",
     "is-ci": "^3.0.1",
-    "kolorist": "^1.7.0",
-    "lint-staged": "^13.2.1",
+    "kolorist": "^1.8.0",
+    "lint-staged": "^15.2.10",
     "minimist": "^1.2.8",
     "pinst": "^3.0.0",
-    "postcss": "^8.4.23",
-    "prettier": "^2.8.7",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.1",
     "prompts": "^2.4.2",
-    "sass": "^1.62.0",
-    "semver": "^7.5.0",
-    "stylelint": "^15.5.0",
-    "stylelint-prettier": "^3.0.0",
-    "tsx": "^3.12.6",
-    "typescript": "5.0.4",
-    "vite": "^4.3.1",
-    "vite-plugin-css-injected-by-js": "^3.1.0",
-    "vite-plugin-dts": "^2.3.0",
-    "vitest": "^0.30.1",
-    "vue": "^3.2.47"
+    "sass": "^1.81.0",
+    "semver": "^7.6.3",
+    "stylelint": "^16.10.0",
+    "stylelint-prettier": "^5.0.2",
+    "tsx": "^4.19.2",
+    "typescript": "5.4.4",
+    "vite": "^6.0.1",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.6",
+    "vue": "^3.5.13"
   },
@@ -100,14 +124,12 @@ "peerDependencies": {
     "build:docs": "pnpm -C docs build",
-    "serve": "pnpm -C dev-server serve",
-    "serve:docs": "pnpm -C docs serve",
-    "lint": "eslint --fix --ext .js,.ts,.tsx,.vue src/** dev-server/** docs/**",
-    "lint:scripts": "eslint --fix --ext .js,.ts scripts/**",
-    "lint:style": "stylelint **/*.{vue,scss} --fix",
-    "lint:test": "eslint --ext .js,.ts,.tsx,.vue src/** dev-server/** docs/** scripts/** && stylelint **/*.{vue,scss}",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path .",
+    "lint": "eslint --cache \"**/*.{js,cjs,mjs,ts,tsx,vue}\"",
+    "lint:style": "stylelint --cache \"**/*.{vue,scss}\"",
     "precommit": "lint-staged -c ./.husky/.lintstagedrc -q",
     "prettier": "prettier --write \"{src,dev-server,docs}/**/*.{ts,js,json,css,pcss,scss,vue,html,md}\"",
     "prettier:scripts": "prettier --write \"scripts/**/*.{ts,js,json}\"",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path .",
     "publish:ci": "tsx scripts/publish.ts",
     "release": "tsx scripts/release.ts",
+    "serve": "pnpm -C dev-server serve",
+    "serve:docs": "pnpm -C docs serve",
     "test": "vitest run",
@@ -114,0 +136,0 @@ "test:cover": "vitest run --coverage",

src/helpers/common.ts

 import type { InjectionKey } from 'vue'
 import type { EventEmitter } from '@vexip-ui/utils'
-import type { LayoutItem, Layout, LayoutInstance } from './types'
+import type { Layout, LayoutInstance, LayoutItem } from './types'
 
@@ -5,0 +5,0 @@ export const LAYOUT_KEY = Symbol('LAYOUT_KEY') as InjectionKey<LayoutInstance>

src/helpers/responsive.ts

 import { cloneLayout, compact, correctBounds } from './common'
 
-import type { Layout, Breakpoint, Breakpoints, ResponsiveLayout } from './types'
+import type { Breakpoint, Breakpoints, Layout, ResponsiveLayout } from './types'
 
@@ -30,3 +30,5 @@ /**
   if (!cols[breakpoint]) {
-    throw new Error('ResponsiveGridLayout: `cols` entry for breakpoint ' + breakpoint + ' is missing!')
+    throw new Error(
+      'ResponsiveGridLayout: `cols` entry for breakpoint ' + breakpoint + ' is missing!'
+    )
   }
@@ -51,5 +53,11 @@ return cols[breakpoint]
  */
-export function findOrGenerateResponsiveLayout(orgLayout: Layout, layouts: ResponsiveLayout, breakpoints: Breakpoints,
-  breakpoint: Breakpoint, lastBreakpoint: Breakpoint,
-  cols: number, verticalCompact: boolean): Layout {
+export function findOrGenerateResponsiveLayout(
+  orgLayout: Layout,
+  layouts: ResponsiveLayout,
+  breakpoints: Breakpoints,
+  breakpoint: Breakpoint,
+  lastBreakpoint: Breakpoint,
+  cols: number,
+  verticalCompact: boolean
+): Layout {
   // If it already exists, just return it.
@@ -73,5 +81,10 @@ if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint])
 
-export function generateResponsiveLayout(layout: Layout, breakpoints: Breakpoints,
-  breakpoint: Breakpoint, lastBreakpoint: Breakpoint,
-  cols: number, verticalCompact: boolean): Layout {
+export function generateResponsiveLayout(
+  layout: Layout,
+  breakpoints: Breakpoints,
+  breakpoint: Breakpoint,
+  lastBreakpoint: Breakpoint,
+  cols: number,
+  verticalCompact: boolean
+): Layout {
   // If it already exists, just return it.
@@ -78,0 +91,0 @@ /* if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint]);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2179435

increased by0.7%

Worsened metrics

Dev dependency count

40

increased by2.56%

Number of package files

64

decreased by-5.88%

Lines of code

7963

decreased by-1.44%

Dependency changes

• Updated@vexip-ui/hooks@^2.6.0

• Updated@vexip-ui/utils@^2.16.1

• Updatedinteractjs@^1.10.27