',2)]))}const g=i(p,[["render",l]]);export{c as __pageData,g as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_GridItem-enums.md.CY87Ew73.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as e}from"./chunks/framework.DypzUre1.js";const c=JSON.parse('{"title":"EGridItemEvent","description":"","frontmatter":{"aside":false},"headers":[],"relativePath":"api/GridItem-enums.md","filePath":"api/GridItem-enums.md","lastUpdated":1703794519000}'),p={name:"api/GridItem-enums.md"};function l(t,s,h,k,r,d){return n(),a("div",null,s[0]||(s[0]=[e("",2)]))}const g=i(p,[["render",l]]);export{c as __pageData,g as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_GridLayout-enums.md.CAP8d5La.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as p}from"./chunks/framework.DypzUre1.js";const F=JSON.parse('{"title":"EGridLayoutEvent","description":"","frontmatter":{"aside":false},"headers":[],"relativePath":"api/GridLayout-enums.md","filePath":"api/GridLayout-enums.md","lastUpdated":1703794519000}'),l={name:"api/GridLayout-enums.md"};function e(t,s,h,k,r,d){return n(),a("div",null,s[0]||(s[0]=[p("",2)]))}const y=i(l,[["render",e]]);export{F as __pageData,y as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_index.md.C09OD24K.js:
--------------------------------------------------------------------------------
1 | import{_ as a,c as r,o as i,j as t}from"./chunks/framework.DypzUre1.js";const x=JSON.parse('{"title":"API","description":"","frontmatter":{},"headers":[],"relativePath":"api/index.md","filePath":"api/index.md","lastUpdated":1703794519000}'),n={name:"api/index.md"};function s(o,e,d,p,c,l){return i(),r("div",null,e[0]||(e[0]=[t("h1",{id:"api",tabindex:"-1"},"API",-1),t("h2",{id:"work-in-progress",tabindex:"-1"},"Work in progress",-1)]))}const _=a(n,[["render",s]]);export{x as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_index.md.C09OD24K.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as a,c as r,o as i,j as t}from"./chunks/framework.DypzUre1.js";const x=JSON.parse('{"title":"API","description":"","frontmatter":{},"headers":[],"relativePath":"api/index.md","filePath":"api/index.md","lastUpdated":1703794519000}'),n={name:"api/index.md"};function s(o,e,d,p,c,l){return i(),r("div",null,e[0]||(e[0]=[t("h1",{id:"api",tabindex:"-1"},"API",-1),t("h2",{id:"work-in-progress",tabindex:"-1"},"Work in progress",-1)]))}const _=a(n,[["render",s]]);export{x as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_interfaces-eventBus.md.BoVerJx7.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as e}from"./chunks/framework.DypzUre1.js";const E=JSON.parse('{"title":"Eventbus interfaces","description":"","frontmatter":{"aside":false},"headers":[],"relativePath":"api/interfaces-eventBus.md","filePath":"api/interfaces-eventBus.md","lastUpdated":1703794519000}'),t={name:"api/interfaces-eventBus.md"};function p(l,s,h,k,r,d){return n(),a("div",null,s[0]||(s[0]=[e(`
Eventbus interfaces
IEventsData
Defines the payload drag and resize events are emitting.
`,4)]))}const g=i(t,[["render",p]]);export{E as __pageData,g as default};
9 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_interfaces-eventBus.md.BoVerJx7.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as e}from"./chunks/framework.DypzUre1.js";const E=JSON.parse('{"title":"Eventbus interfaces","description":"","frontmatter":{"aside":false},"headers":[],"relativePath":"api/interfaces-eventBus.md","filePath":"api/interfaces-eventBus.md","lastUpdated":1703794519000}'),t={name:"api/interfaces-eventBus.md"};function p(l,s,h,k,r,d){return n(),a("div",null,s[0]||(s[0]=[e("",4)]))}const g=i(t,[["render",p]]);export{E as __pageData,g as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_interfaces-layout.md.BIyzYU9b.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as e}from"./chunks/framework.DypzUre1.js";const y=JSON.parse('{"title":"Layout interfaces","description":"","frontmatter":{"aside":false},"headers":[],"relativePath":"api/interfaces-layout.md","filePath":"api/interfaces-layout.md","lastUpdated":1703794519000}'),t={name:"api/interfaces-layout.md"};function p(l,s,h,r,k,d){return n(),a("div",null,s[0]||(s[0]=[e(`
Layout interfaces
ILayoutItemRequired
Defines the required properties for a grid layout.
`,4)]))}const o=i(t,[["render",p]]);export{y as __pageData,o as default};
8 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_interfaces-layout.md.BIyzYU9b.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as e}from"./chunks/framework.DypzUre1.js";const y=JSON.parse('{"title":"Layout interfaces","description":"","frontmatter":{"aside":false},"headers":[],"relativePath":"api/interfaces-layout.md","filePath":"api/interfaces-layout.md","lastUpdated":1703794519000}'),t={name:"api/interfaces-layout.md"};function p(l,s,h,r,k,d){return n(),a("div",null,s[0]||(s[0]=[e("",4)]))}const o=i(t,[["render",p]]);export{y as __pageData,o as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_types-layout.md.DLhsXbwC.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.DypzUre1.js";const o=JSON.parse('{"title":"Layout types","description":"","frontmatter":{},"headers":[],"relativePath":"api/types-layout.md","filePath":"api/types-layout.md","lastUpdated":1703794519000}'),e={name:"api/types-layout.md"};function p(l,s,h,k,r,d){return n(),a("div",null,s[0]||(s[0]=[t(`
`,5)]))}const c=i(e,[["render",p]]);export{o as __pageData,c as default};
11 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/api_types-layout.md.DLhsXbwC.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.DypzUre1.js";const o=JSON.parse('{"title":"Layout types","description":"","frontmatter":{},"headers":[],"relativePath":"api/types-layout.md","filePath":"api/types-layout.md","lastUpdated":1703794519000}'),e={name:"api/types-layout.md"};function p(l,s,h,k,r,d){return n(),a("div",null,s[0]||(s[0]=[t("",5)]))}const c=i(e,[["render",p]]);export{o as __pageData,c as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/app.y2ni2aWa.js:
--------------------------------------------------------------------------------
1 | import{R as p}from"./chunks/theme.9tTlfeSW.js";import{R as s,a0 as i,a1 as u,a2 as c,a3 as l,a4 as f,a5 as d,a6 as m,a7 as h,a8 as g,a9 as A,d as v,u as R,v as w,s as y,aa as C,ab as P,ac as b,ad as E}from"./chunks/framework.DypzUre1.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),S=v({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=R();return w(()=>{y(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&C(),P(),b(),n.setup&&n.setup(),()=>E(n.Layout)}});async function T(){globalThis.__VITEPRESS__=!0;const e=_(),a=D();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function D(){return A(S)}function _(){let e=s;return h(a=>{let t=g(a),o=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),o=import(t)),s&&(e=!1),o},n.NotFound)}s&&T().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{T as createApp};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_css-grid-item.md.DVqyfjrg.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as p}from"./chunks/framework.DypzUre1.js";const g=JSON.parse('{"title":"GridItem styles","description":"","frontmatter":{},"headers":[],"relativePath":"components/css-grid-item.md","filePath":"components/css-grid-item.md","lastUpdated":1703794519000}'),l={name:"components/css-grid-item.md"};function h(k,s,t,e,r,E){return n(),a("div",null,s[0]||(s[0]=[p("",2)]))}const y=i(l,[["render",h]]);export{g as __pageData,y as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_css-grid-layout.md.OI24WuTh.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.DypzUre1.js";const c=JSON.parse('{"title":"GridLayout styles","description":"","frontmatter":{},"headers":[],"relativePath":"components/css-grid-layout.md","filePath":"components/css-grid-layout.md","lastUpdated":1703794519000}'),e={name:"components/css-grid-layout.md"};function l(p,s,r,h,d,k){return n(),a("div",null,s[0]||(s[0]=[t(`
`,2)]))}const g=i(e,[["render",l]]);export{c as __pageData,g as default};
5 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_css-grid-layout.md.OI24WuTh.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.DypzUre1.js";const c=JSON.parse('{"title":"GridLayout styles","description":"","frontmatter":{},"headers":[],"relativePath":"components/css-grid-layout.md","filePath":"components/css-grid-layout.md","lastUpdated":1703794519000}'),e={name:"components/css-grid-layout.md"};function l(p,s,r,h,d,k){return n(),a("div",null,s[0]||(s[0]=[t("",2)]))}const g=i(e,[["render",l]]);export{c as __pageData,g as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_css-variables.md.COUjaV5E.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as e,ae as t}from"./chunks/framework.DypzUre1.js";const k=JSON.parse('{"title":"Variables","description":"","frontmatter":{},"headers":[],"relativePath":"components/css-variables.md","filePath":"components/css-variables.md","lastUpdated":1703794519000}'),n={name:"components/css-variables.md"};function d(l,s,r,p,h,c){return e(),a("div",null,s[0]||(s[0]=[t("",17)]))}const g=i(n,[["render",d]]);export{k as __pageData,g as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-item-event-bus-events.md.C2MZog7y.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as n,o as d,ae as i}from"./chunks/framework.DypzUre1.js";const l=JSON.parse('{"title":"GridItem Eventbus Events","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-item-event-bus-events.md","filePath":"components/grid-item-event-bus-events.md","lastUpdated":1703794519000}'),a={name:"components/grid-item-event-bus-events.md"};function s(r,e,o,h,c,m){return d(),n("div",null,e[0]||(e[0]=[i('
GridItem Eventbus Events
compact
directionchange
dragEvent
Emitted in handleDrag, the event handler for drag events.
resizeEvent
setBounded
setColNum
setDraggable
setMaxRows
setResizable
setRowHeight
setTransformScale
updateWidth
',14)]))}const v=t(a,[["render",s]]);export{l as __pageData,v as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-item-event-bus-events.md.C2MZog7y.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as n,o as d,ae as i}from"./chunks/framework.DypzUre1.js";const l=JSON.parse('{"title":"GridItem Eventbus Events","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-item-event-bus-events.md","filePath":"components/grid-item-event-bus-events.md","lastUpdated":1703794519000}'),a={name:"components/grid-item-event-bus-events.md"};function s(r,e,o,h,c,m){return d(),n("div",null,e[0]||(e[0]=[i("",14)]))}const v=t(a,[["render",s]]);export{l as __pageData,v as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-item-events.md.C01h7Wp8.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as h}from"./chunks/framework.DypzUre1.js";const g=JSON.parse('{"title":"GridItem VUE Events","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-item-events.md","filePath":"components/grid-item-events.md","lastUpdated":1726146329000}'),t={name:"components/grid-item-events.md"};function k(e,s,p,l,E,r){return n(),a("div",null,s[0]||(s[0]=[h("",30)]))}const y=i(t,[["render",k]]);export{g as __pageData,y as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-item-props.md.INyiBBAx.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as o,o as t,ae as d}from"./chunks/framework.DypzUre1.js";const p=JSON.parse('{"title":"GridItem Properties","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-item-props.md","filePath":"components/grid-item-props.md","lastUpdated":1703794519000}'),l={name:"components/grid-item-props.md"};function r(a,e,c,n,s,h){return t(),o("div",null,e[0]||(e[0]=[d("",97)]))}const m=i(l,[["render",r]]);export{p as __pageData,m as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-item-slots.md.upPuBDGJ.js:
--------------------------------------------------------------------------------
1 | import{_ as s,c as o,o as a,j as t,a as r}from"./chunks/framework.DypzUre1.js";const f=JSON.parse('{"title":"GridItem slots","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-item-slots.md","filePath":"components/grid-item-slots.md","lastUpdated":1703794519000}'),l={name:"components/grid-item-slots.md"};function n(i,e,d,m,c,p){return a(),o("div",null,e[0]||(e[0]=[t("h1",{id:"griditem-slots",tabindex:"-1"},"GridItem slots",-1),t("ul",null,[t("li",null,[t("strong",null,"Default slot"),r(".")])],-1)]))}const _=s(l,[["render",n]]);export{f as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-item-slots.md.upPuBDGJ.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as s,c as o,o as a,j as t,a as r}from"./chunks/framework.DypzUre1.js";const f=JSON.parse('{"title":"GridItem slots","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-item-slots.md","filePath":"components/grid-item-slots.md","lastUpdated":1703794519000}'),l={name:"components/grid-item-slots.md"};function n(i,e,d,m,c,p){return a(),o("div",null,e[0]||(e[0]=[t("h1",{id:"griditem-slots",tabindex:"-1"},"GridItem slots",-1),t("ul",null,[t("li",null,[t("strong",null,"Default slot"),r(".")])],-1)]))}const _=s(l,[["render",n]]);export{f as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-item.md.CPAgr0Y6.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as r,o as a,j as o}from"./chunks/framework.DypzUre1.js";const _=JSON.parse('{"title":"GridItem","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-item.md","filePath":"components/grid-item.md","lastUpdated":1703794519000}'),i={name:"components/grid-item.md"};function n(d,e,s,m,c,p){return a(),r("div",null,e[0]||(e[0]=[o("h1",{id:"griditem",tabindex:"-1"},"GridItem",-1)]))}const f=t(i,[["render",n]]);export{_ as __pageData,f as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-item.md.CPAgr0Y6.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as r,o as a,j as o}from"./chunks/framework.DypzUre1.js";const _=JSON.parse('{"title":"GridItem","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-item.md","filePath":"components/grid-item.md","lastUpdated":1703794519000}'),i={name:"components/grid-item.md"};function n(d,e,s,m,c,p){return a(),r("div",null,e[0]||(e[0]=[o("h1",{id:"griditem",tabindex:"-1"},"GridItem",-1)]))}const f=t(i,[["render",n]]);export{_ as __pageData,f as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-layout-event-bus-events.md.CR5IuVtB.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as a,o as d,ae as i}from"./chunks/framework.DypzUre1.js";const m=JSON.parse('{"title":"GridLayout eventBus Events","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-layout-event-bus-events.md","filePath":"components/grid-layout-event-bus-events.md","lastUpdated":1703794519000}'),n={name:"components/grid-layout-event-bus-events.md"};function s(o,e,r,l,u,c){return d(),a("div",null,e[0]||(e[0]=[i('
GridLayout eventBus Events
compact
Emitted during drag after layout is compacted.
Emitted during resize after layout is compacted.
dragEvent
Forwarding dragEvent emitted from the GridItem component.
resizeEvent
setBounded
setColNum
setDraggable
setMaxRows
setResizable
setRowHeight
setTransformScale
updateWidth
',14)]))}const p=t(n,[["render",s]]);export{m as __pageData,p as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-layout-event-bus-events.md.CR5IuVtB.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as a,o as d,ae as i}from"./chunks/framework.DypzUre1.js";const m=JSON.parse('{"title":"GridLayout eventBus Events","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-layout-event-bus-events.md","filePath":"components/grid-layout-event-bus-events.md","lastUpdated":1703794519000}'),n={name:"components/grid-layout-event-bus-events.md"};function s(o,e,r,l,u,c){return d(),a("div",null,e[0]||(e[0]=[i("",14)]))}const p=t(n,[["render",s]]);export{m as __pageData,p as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-layout-events.md.BH8KhKvS.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as t,ae as n}from"./chunks/framework.DypzUre1.js";const E=JSON.parse('{"title":"GridLayout VUE Events","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-layout-events.md","filePath":"components/grid-layout-events.md","lastUpdated":1703794519000}'),e={name:"components/grid-layout-events.md"};function p(h,s,l,d,k,r){return t(),a("div",null,s[0]||(s[0]=[n("",31)]))}const y=i(e,[["render",p]]);export{E as __pageData,y as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-layout-props.md.vNbBkqP9.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as o,c as i,o as d,ae as l}from"./chunks/framework.DypzUre1.js";const p=JSON.parse('{"title":"GridLayout Properties","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-layout-props.md","filePath":"components/grid-layout-props.md","lastUpdated":1703794519000}'),t={name:"components/grid-layout-props.md"};function a(c,e,r,s,u,n){return d(),i("div",null,e[0]||(e[0]=[l("",83)]))}const f=o(t,[["render",a]]);export{p as __pageData,f as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-layout.md.CBRPOZKi.js:
--------------------------------------------------------------------------------
1 | import{_ as e,c as a,o,j as r}from"./chunks/framework.DypzUre1.js";const u=JSON.parse('{"title":"GridLayout","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-layout.md","filePath":"components/grid-layout.md","lastUpdated":1703794519000}'),n={name:"components/grid-layout.md"};function d(s,t,i,c,p,l){return o(),a("div",null,t[0]||(t[0]=[r("h1",{id:"gridlayout",tabindex:"-1"},"GridLayout",-1)]))}const _=e(n,[["render",d]]);export{u as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_grid-layout.md.CBRPOZKi.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as e,c as a,o,j as r}from"./chunks/framework.DypzUre1.js";const u=JSON.parse('{"title":"GridLayout","description":"","frontmatter":{},"headers":[],"relativePath":"components/grid-layout.md","filePath":"components/grid-layout.md","lastUpdated":1703794519000}'),n={name:"components/grid-layout.md"};function d(s,t,i,c,p,l){return o(),a("div",null,t[0]||(t[0]=[r("h1",{id:"gridlayout",tabindex:"-1"},"GridLayout",-1)]))}const _=e(n,[["render",d]]);export{u as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_index.md.B3_E7yWG.js:
--------------------------------------------------------------------------------
1 | import{_ as o,c as l,o as s,j as e,a as t}from"./chunks/framework.DypzUre1.js";const f=JSON.parse('{"title":"Features","description":"","frontmatter":{"aside":true,"page":true,"title":"Features"},"headers":[],"relativePath":"components/index.md","filePath":"components/index.md","lastUpdated":1703794519000}'),a={name:"components/index.md"};function i(d,n,r,u,c,p){return s(),l("div",null,n[0]||(n[0]=[e("h1",{id:"components",tabindex:"-1"},"Components",-1),e("p",null,"This plugin is exporting the following components:",-1),e("ul",null,[e("li",null,[e("code",null,"GridLayout"),t(", Defines the main grid layout.")]),e("li",null,[e("code",null,"GridItem"),t(" Defines an item in the layout.")]),e("li",null,[e("code",null,"CustomCloseButton"),t(" Customized close button.")])],-1)]))}const x=o(a,[["render",i]]);export{f as __pageData,x as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/components_index.md.B3_E7yWG.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as o,c as l,o as s,j as e,a as t}from"./chunks/framework.DypzUre1.js";const f=JSON.parse('{"title":"Features","description":"","frontmatter":{"aside":true,"page":true,"title":"Features"},"headers":[],"relativePath":"components/index.md","filePath":"components/index.md","lastUpdated":1703794519000}'),a={name:"components/index.md"};function i(d,n,r,u,c,p){return s(),l("div",null,n[0]||(n[0]=[e("h1",{id:"components",tabindex:"-1"},"Components",-1),e("p",null,"This plugin is exporting the following components:",-1),e("ul",null,[e("li",null,[e("code",null,"GridLayout"),t(", Defines the main grid layout.")]),e("li",null,[e("code",null,"GridItem"),t(" Defines an item in the layout.")]),e("li",null,[e("code",null,"CustomCloseButton"),t(" Customized close button.")])],-1)]))}const x=o(a,[["render",i]]);export{f as __pageData,x as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/examples_09-example.md.jwyUjZI3.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as a,o as s,j as p}from"./chunks/framework.DypzUre1.js";const f=JSON.parse('{"title":"Responsive with predefined layouts.","description":"","frontmatter":{},"headers":[],"relativePath":"examples/09-example.md","filePath":"examples/09-example.md","lastUpdated":1703794519000}'),o={name:"examples/09-example.md"};function n(r,e,d,i,l,m){return s(),a("div",null,e[0]||(e[0]=[p("h1",{id:"responsive-with-predefined-layouts",tabindex:"-1"},"Responsive with predefined layouts.",-1)]))}const x=t(o,[["render",n]]);export{f as __pageData,x as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/examples_09-example.md.jwyUjZI3.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as a,o as s,j as p}from"./chunks/framework.DypzUre1.js";const f=JSON.parse('{"title":"Responsive with predefined layouts.","description":"","frontmatter":{},"headers":[],"relativePath":"examples/09-example.md","filePath":"examples/09-example.md","lastUpdated":1703794519000}'),o={name:"examples/09-example.md"};function n(r,e,d,i,l,m){return s(),a("div",null,e[0]||(e[0]=[p("h1",{id:"responsive-with-predefined-layouts",tabindex:"-1"},"Responsive with predefined layouts.",-1)]))}const x=t(o,[["render",n]]);export{f as __pageData,x as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/examples_12-example.md.Dd7bFAZb.js:
--------------------------------------------------------------------------------
1 | import{_ as a,c as t,o as r,j as s}from"./chunks/framework.DypzUre1.js";const x=JSON.parse('{"title":"Drag & Drop between Grid layouts.","description":"","frontmatter":{},"headers":[],"relativePath":"examples/12-example.md","filePath":"examples/12-example.md","lastUpdated":1703794519000}'),o={name:"examples/12-example.md"};function p(d,e,l,n,m,i){return r(),t("div",null,e[0]||(e[0]=[s("h1",{id:"drag-drop-between-grid-layouts",tabindex:"-1"},"Drag & Drop between Grid layouts.",-1)]))}const _=a(o,[["render",p]]);export{x as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/examples_12-example.md.Dd7bFAZb.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as a,c as t,o as r,j as s}from"./chunks/framework.DypzUre1.js";const x=JSON.parse('{"title":"Drag & Drop between Grid layouts.","description":"","frontmatter":{},"headers":[],"relativePath":"examples/12-example.md","filePath":"examples/12-example.md","lastUpdated":1703794519000}'),o={name:"examples/12-example.md"};function p(d,e,l,n,m,i){return r(),t("div",null,e[0]||(e[0]=[s("h1",{id:"drag-drop-between-grid-layouts",tabindex:"-1"},"Drag & Drop between Grid layouts.",-1)]))}const _=a(o,[["render",p]]);export{x as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/features_index.md.AHctw1-D.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as t,o as r,ae as a}from"./chunks/framework.DypzUre1.js";const p=JSON.parse('{"title":"Features","description":"","frontmatter":{"aside":false,"page":true,"title":"Features"},"headers":[],"relativePath":"features/index.md","filePath":"features/index.md","lastUpdated":1703794519000}'),l={name:"features/index.md"};function s(d,e,o,n,u,c){return r(),t("div",null,e[0]||(e[0]=[a('
Features
VUE 3 with Typescript.
Vite used as dev server and bundler.
Vitepress used for documentation.
Automatic responsiveness with breakpoints configuration.
Fixed mirrored layout so only the GridItems are rearranged.
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.
Responsive with predefined Layouts.
Grid items are distributed evenly.
Grid item is resizable from right, bottom right and bottom.
',2)]))}const _=i(l,[["render",s]]);export{p as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/features_index.md.AHctw1-D.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as t,o as r,ae as a}from"./chunks/framework.DypzUre1.js";const p=JSON.parse('{"title":"Features","description":"","frontmatter":{"aside":false,"page":true,"title":"Features"},"headers":[],"relativePath":"features/index.md","filePath":"features/index.md","lastUpdated":1703794519000}'),l={name:"features/index.md"};function s(d,e,o,n,u,c){return r(),t("div",null,e[0]||(e[0]=[a("",2)]))}const _=i(l,[["render",s]]);export{p as __pageData,_ as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/guide_changelog.md.gv5YiFNR.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as r,o as i,ae as n}from"./chunks/framework.DypzUre1.js";const p=JSON.parse('{"title":"Changelog","description":"","frontmatter":{"aside":false,"footer":true,"page":true,"title":"Changelog"},"headers":[],"relativePath":"guide/changelog.md","filePath":"guide/changelog.md","lastUpdated":1707232468000}'),s={name:"guide/changelog.md"};function o(a,e,g,l,d,u){return i(),r("div",null,e[0]||(e[0]=[n("",20)]))}const m=t(s,[["render",o]]);export{p as __pageData,m as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/guide_installation.md.BteGI3qK.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as e}from"./chunks/framework.DypzUre1.js";const c=JSON.parse('{"title":"Installation","description":"","frontmatter":{"page":true,"title":"Installation"},"headers":[],"relativePath":"guide/installation.md","filePath":"guide/installation.md","lastUpdated":1703794519000}'),t={name:"guide/installation.md"};function p(l,s,r,d,h,o){return n(),a("div",null,s[0]||(s[0]=[e(`
Installation
NPM
npm install vue-ts-responsive-grid-layout --save
1
Yarn
yarn add vue-ts-responsive-grid-layout
1
Import the package
typescript
import VueResponsiveGridLayout from 'vue-ts-responsive-grid-layout';
`,11)]))}const u=i(t,[["render",p]]);export{c as __pageData,u as default};
10 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/guide_installation.md.BteGI3qK.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as i,c as a,o as n,ae as e}from"./chunks/framework.DypzUre1.js";const c=JSON.parse('{"title":"Installation","description":"","frontmatter":{"page":true,"title":"Installation"},"headers":[],"relativePath":"guide/installation.md","filePath":"guide/installation.md","lastUpdated":1703794519000}'),t={name:"guide/installation.md"};function p(l,s,r,d,h,o){return n(),a("div",null,s[0]||(s[0]=[e("",11)]))}const u=i(t,[["render",p]]);export{c as __pageData,u as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/guide_introduction.md.BDS_NV86.js:
--------------------------------------------------------------------------------
1 | import{_ as o,c as a,o as n,j as e}from"./chunks/framework.DypzUre1.js";const f=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"aside":false,"footer":true,"page":true,"title":"Introduction"},"headers":[],"relativePath":"guide/introduction.md","filePath":"guide/introduction.md","lastUpdated":1703794519000}'),r={name:"guide/introduction.md"};function i(s,t,d,u,c,p){return n(),a("div",null,t[0]||(t[0]=[e("h1",{id:"what-is-vue-ts-responsive-grid-layout",tabindex:"-1"},"What is vue-ts-responsive-grid-layout?",-1),e("p",null,"A responsive grid layout component for creating advance dashboard's.",-1)]))}const m=o(r,[["render",i]]);export{f as __pageData,m as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/guide_introduction.md.BDS_NV86.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as o,c as a,o as n,j as e}from"./chunks/framework.DypzUre1.js";const f=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"aside":false,"footer":true,"page":true,"title":"Introduction"},"headers":[],"relativePath":"guide/introduction.md","filePath":"guide/introduction.md","lastUpdated":1703794519000}'),r={name:"guide/introduction.md"};function i(s,t,d,u,c,p){return n(),a("div",null,t[0]||(t[0]=[e("h1",{id:"what-is-vue-ts-responsive-grid-layout",tabindex:"-1"},"What is vue-ts-responsive-grid-layout?",-1),e("p",null,"A responsive grid layout component for creating advance dashboard's.",-1)]))}const m=o(r,[["render",i]]);export{f as __pageData,m as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/guide_roadmap.md.9TcX4Dlx.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as r,o,ae as s}from"./chunks/framework.DypzUre1.js";const u=JSON.parse('{"title":"Roadmap","description":"","frontmatter":{"aside":false,"footer":true,"page":true,"title":"Roadmap"},"headers":[],"relativePath":"guide/roadmap.md","filePath":"guide/roadmap.md","lastUpdated":1706894553000}'),i={name:"guide/roadmap.md"};function a(n,e,d,l,p,g){return o(),r("div",null,e[0]||(e[0]=[s('
ROADMAP
Upcoming updates and fixes
New Feature Implement resize from left side.
New Feature Implement resize from top-left side.
New Feature Implement resize from bottom-left side.
New Feature Drag & Drop from Multiple Grids.
New Feature Add native drag and drop to GridLayout.
New Feature Add possibility to set fixed width on a GridItem.
New Feature Add pre styled GridItem.
New Feature Implement RTL resize.
New Feature Support for nuxt projects.
Examples Dynamic add new GridItems.
Examples Add example app to CodeSandbox, so user's can test layouts.
Examples Add Multiple Grids.
Examples Add Responsive predefined layouts.
Examples Drag, drop from grid to grid.
Test Add e2e tests.
Test Continuously refactoring and adding new unit tests.
',3)]))}const f=t(i,[["render",a]]);export{u as __pageData,f as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/guide_roadmap.md.9TcX4Dlx.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as t,c as r,o,ae as s}from"./chunks/framework.DypzUre1.js";const u=JSON.parse('{"title":"Roadmap","description":"","frontmatter":{"aside":false,"footer":true,"page":true,"title":"Roadmap"},"headers":[],"relativePath":"guide/roadmap.md","filePath":"guide/roadmap.md","lastUpdated":1706894553000}'),i={name:"guide/roadmap.md"};function a(n,e,d,l,p,g){return o(),r("div",null,e[0]||(e[0]=[s("",3)]))}const f=t(i,[["render",a]]);export{u as __pageData,f as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/index.md.VCkZeN5U.js:
--------------------------------------------------------------------------------
1 | import{_ as e,c as t,o as a}from"./chunks/framework.DypzUre1.js";const m=JSON.parse(`{"title":"Vue 3 Responsive Grid Layout.","titleTemplate":"Main","description":"","frontmatter":{"layout":"home","title":"Vue 3 Responsive Grid Layout.","titleTemplate":"Main","hero":{"name":"Vue 3 Responsive Grid Layout.","tagline":"Draggable, Resizeable widgets.","image":{"src":"/Data Grid.svg","alt":"logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/introduction"}]},"features":[{"icon":"⚡️","title":"Latest Release version","details":"1.2.10 Released 2025-04-28."},{"icon":"💥","title":"Responsive Grid Layouts","details":"With predefined layout's or automatically with predefined breakpoints."},{"icon":"🔱","title":"Draggable GridItems","details":"Examples showing howto Drag and Drop a GridItem."},{"icon":"🔱","title":"Resizeable GridItems","details":"Constantly being updated for each release.."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1706887096000}`),i={name:"index.md"};function s(o,n,r,d,l,c){return a(),t("div")}const u=e(i,[["render",s]]);export{m as __pageData,u as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/index.md.VCkZeN5U.lean.js:
--------------------------------------------------------------------------------
1 | import{_ as e,c as t,o as a}from"./chunks/framework.DypzUre1.js";const m=JSON.parse(`{"title":"Vue 3 Responsive Grid Layout.","titleTemplate":"Main","description":"","frontmatter":{"layout":"home","title":"Vue 3 Responsive Grid Layout.","titleTemplate":"Main","hero":{"name":"Vue 3 Responsive Grid Layout.","tagline":"Draggable, Resizeable widgets.","image":{"src":"/Data Grid.svg","alt":"logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/introduction"}]},"features":[{"icon":"⚡️","title":"Latest Release version","details":"1.2.10 Released 2025-04-28."},{"icon":"💥","title":"Responsive Grid Layouts","details":"With predefined layout's or automatically with predefined breakpoints."},{"icon":"🔱","title":"Draggable GridItems","details":"Examples showing howto Drag and Drop a GridItem."},{"icon":"🔱","title":"Resizeable GridItems","details":"Constantly being updated for each release.."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1706887096000}`),i={name:"index.md"};function s(o,n,r,d,l,c){return a(),t("div")}const u=e(i,[["render",s]]);export{m as __pageData,u as default};
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwinnem/vue-responsive-grid-layout/8ec736f793ee6b9a68bce43beae0c26a2e96268c/vitepress-docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/hashmap.json:
--------------------------------------------------------------------------------
1 | {"api_griditem-enums.md":"CY87Ew73","api_gridlayout-enums.md":"CAP8d5La","api_index.md":"C09OD24K","api_interfaces-eventbus.md":"BoVerJx7","api_interfaces-layout.md":"BIyzYU9b","api_types-layout.md":"DLhsXbwC","components_css-grid-item.md":"DVqyfjrg","components_css-grid-layout.md":"OI24WuTh","components_css-variables.md":"COUjaV5E","components_grid-item-event-bus-events.md":"C2MZog7y","components_grid-item-events.md":"C01h7Wp8","components_grid-item-props.md":"INyiBBAx","components_grid-item-slots.md":"upPuBDGJ","components_grid-item.md":"CPAgr0Y6","components_grid-layout-event-bus-events.md":"CR5IuVtB","components_grid-layout-events.md":"BH8KhKvS","components_grid-layout-props.md":"vNbBkqP9","components_grid-layout.md":"CBRPOZKi","components_index.md":"B3_E7yWG","examples_01-example.md":"CpjcLeXb","examples_02-example.md":"xdK61rcG","examples_03-example.md":"O0pf15mA","examples_04-example.md":"B5gHf5UO","examples_05-example.md":"BVq1nHsn","examples_06-example.md":"zBUYEgBC","examples_07-example.md":"DkuN5EO6","examples_08-example.md":"oavXhDbg","examples_09-example.md":"jwyUjZI3","examples_10-example.md":"i1jm-6wQ","examples_11-example.md":"CHPw_daE","examples_12-example.md":"Dd7bFAZb","examples_13-example.md":"CTOGm0qH","examples_14-example.md":"DYMAMF7j","examples_15-example.md":"BeqmslxU","examples_16-example.md":"BeSdN6RY","features_index.md":"AHctw1-D","guide_changelog.md":"gv5YiFNR","guide_installation.md":"BteGI3qK","guide_introduction.md":"BDS_NV86","guide_roadmap.md":"9TcX4Dlx","index.md":"VCkZeN5U"}
2 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/logo.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/npm-square-red.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/dist/vp-icons.css:
--------------------------------------------------------------------------------
1 | .vpi-social-github{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}.vpi-social-linkedin{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z'/%3E%3C/svg%3E")}.vpi-social-twitter{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M21.543 7.104c.015.211.015.423.015.636c0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041a4.93 4.93 0 0 1-4.6-3.42a4.9 4.9 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.9 4.9 0 0 0 2.235.616A4.93 4.93 0 0 1 1.67 3.148a13.98 13.98 0 0 0 10.15 5.144a4.929 4.929 0 0 1 8.39-4.49a9.9 9.9 0 0 0 3.128-1.196a4.94 4.94 0 0 1-2.165 2.724A9.8 9.8 0 0 0 24 4.555a10 10 0 0 1-2.457 2.549'/%3E%3C/svg%3E")}
--------------------------------------------------------------------------------
/vitepress-docs/.vitepress/theme/index.js:
--------------------------------------------------------------------------------
1 | import DefaultTheme from 'vitepress/theme';
2 | import './styles/index.css';
3 |
4 | export default {
5 | ...DefaultTheme,
6 | enhanceApp(ctx) {
7 | DefaultTheme.enhanceApp(ctx);
8 | },
9 | };
10 |
--------------------------------------------------------------------------------
/vitepress-docs/api/GridItem-enums.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | ---
4 |
5 | # EGridItemEvent
6 |
7 | ```typescript
8 | /**
9 | * Events emitted by the GridItem component
10 | */
11 | export enum EGridItemEvent {
12 | CONTAINER_RESIZED = `container-resized`,
13 | DRAG = `drag`,
14 | DRAGGED = `dragged`,
15 | MOVE = `move`,
16 | MOVED = `moved`,
17 | REMOVE_ITEM = `remove-grid-item`,
18 | RESIZE = `resize`,
19 | RESIZED = `resized`,
20 | }
21 | ```
22 |
--------------------------------------------------------------------------------
/vitepress-docs/api/GridLayout-enums.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | ---
4 |
5 | # EGridLayoutEvent
6 |
7 | ```typescript
8 | /**
9 | * Events emitted by the GridLayout component
10 | */
11 | export enum EGridLayoutEvent {
12 | BREAKPOINT_CHANGED = `breakpoint-changed`,
13 | CHANGED_DIRECTION = `changed-direction`,
14 | COLUMNS_CHANGED = `columns-changed`,
15 | CONTAINER_RESIZED = `container-resized`,
16 | DRAG_END = `drag-end`,
17 | DRAG_MOVE= `drag-move`,
18 | DRAG_START = `drag-start`,
19 | LAYOUT_BEFORE_MOUNT = `layout-before-mount`,
20 | LAYOUT_CREATED = `layout-created`,
21 | LAYOUT_MOUNTED = `layout-mounted`,
22 | LAYOUT_READY = `layout-ready`,
23 | LAYOUT_UPDATED = `layout-updated`,
24 | LAYOUT_UPDATE = `layout-update`,
25 | }
26 | ```
27 |
--------------------------------------------------------------------------------
/vitepress-docs/api/index.md:
--------------------------------------------------------------------------------
1 | # API
2 |
3 | ## Work in progress
4 |
--------------------------------------------------------------------------------
/vitepress-docs/api/interfaces-eventBus.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | ---
4 |
5 | # Eventbus interfaces
6 |
7 | ## IEventsData
8 | Defines the payload `drag` and `resize` events are emitting.
9 |
10 | ```typescript
11 | export interface IEventsData {
12 | eventType: string | symbol;
13 | h: number;
14 | i: string | number;
15 | w: number;
16 | x: number;
17 | y: number;
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/vitepress-docs/api/interfaces-layout.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | ---
4 |
5 | # Layout interfaces
6 |
7 | ## ILayoutItemRequired
8 |
9 | Defines the required properties for a grid layout.
10 |
11 | ```typescript
12 | export interface ILayoutItemRequired {
13 | w: number;
14 | h: number;
15 | x: number;
16 | y: number;
17 | i: string | number;
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/vitepress-docs/api/types-layout.md:
--------------------------------------------------------------------------------
1 | # Layout types
2 |
3 |
4 | ## `TLayoutItem`
5 | ```typescript
6 | export type TLayoutItem = ILayoutItemRequired & {
7 | minW?: number;
8 | minH?: number;
9 | maxW?: number;
10 | maxH?: number;
11 | moved?: boolean;
12 | isStatic?: boolean;
13 | isDraggable?: boolean;
14 | isResizable?: boolean;
15 | }
16 | ```
17 |
18 | ## `TLayout`
19 | ```typescript
20 | export type TLayout = TLayoutItem[]
21 | ```
22 |
--------------------------------------------------------------------------------
/vitepress-docs/components/css-grid-item.md:
--------------------------------------------------------------------------------
1 | # GridItem styles
2 |
3 | ```scss
4 | @import '../../styles/variables';
5 |
6 | $grid-item-border-radius: 10px;
7 |
8 | .vue-close-button {
9 | height: 24px;
10 | position: absolute;
11 | right: 3px;
12 | top: 3px;
13 | width: 24px;
14 | z-index: 20;
15 | }
16 |
17 | .vue-close-button:hover {
18 | cursor: pointer;
19 | filter: brightness(0) invert(1);
20 | opacity: .8;
21 | }
22 |
23 | .vue-grid-item {
24 | background-color: $grid-item-bg-color;
25 | box-sizing: border-box;
26 | color: $grid-item-text-color;
27 | cursor: default !important;
28 | font-size: $grid-item-font-size;
29 | touch-action: none;
30 | transition: all 200ms ease;
31 | transition-property: left, top, right;
32 |
33 | &.vue-static {
34 | background-color: $grid-item-static-bg-color;
35 | }
36 |
37 | &.no-touch {
38 | touch-action: none;
39 | }
40 |
41 | &.vue-use-radius {
42 | border-radius: $grid-item-border-radius;
43 | }
44 |
45 | &.css-transforms {
46 | left: 0;
47 | right: auto;
48 | transition-property: transform;
49 | }
50 |
51 | &.resizing {
52 | opacity: .6;
53 | z-index: 3;
54 | }
55 |
56 | &.vue-draggable {
57 | cursor: grab !important;
58 | }
59 |
60 | &.vue-draggable-dragging {
61 | cursor: grabbing !important;
62 | transition: none;
63 | z-index: 3;
64 | }
65 |
66 | &.vue-grid-placeholder {
67 | background: $grid-item-placeholder-bg-color;
68 | opacity: $grid-item-placeholder-opacity;
69 | transition-duration: 100ms;
70 | user-select: none;
71 | z-index: 2;
72 | }
73 |
74 | & > .vue-resizable-handle {
75 | background-image: url('../../assets/resize.svg');
76 | background-origin: content-box;
77 | background-position: bottom right;
78 | background-repeat: no-repeat;
79 | bottom: 1px;
80 | box-sizing: border-box;
81 | cursor: se-resize;
82 | height: 20px;
83 | padding: 0 3px 3px 0;
84 | position: absolute;
85 | right: 1px;
86 | width: 20px;
87 | z-index: 20;
88 | }
89 |
90 | &.disable-user-select {
91 | user-select: none;
92 | }
93 | }
94 | ```
95 |
--------------------------------------------------------------------------------
/vitepress-docs/components/css-grid-layout.md:
--------------------------------------------------------------------------------
1 | # GridLayout styles
2 |
3 | ```scss
4 | .vue-grid-layout {
5 | position: relative;
6 | transition: height 200ms ease;
7 | }
8 | ```
9 |
--------------------------------------------------------------------------------
/vitepress-docs/components/css-variables.md:
--------------------------------------------------------------------------------
1 | # Variables
2 |
3 | ## GridLayout grid-lines
4 | ```scss
5 | $grid-line-color: #000;
6 | ```
7 |
8 |
9 | ## GridItem `background-color`
10 | ```scss
11 | $grid-item-bg-color: #720c0c;
12 | ```
13 |
14 |
15 | ## GridItem default `border-radius`.
16 | ```sass
17 | $grid-item-border-radius: 8px;
18 | ```
19 |
20 | ## TBD
21 | ```scss
22 | $grid-item-text-color: white;
23 | ```
24 |
25 |
26 | ## TBD
27 | ```scss
28 | $grid-item-font-size: 1rem;
29 | ```
30 |
31 |
32 | ## GridItem `background-color` used when a GridItem has the `isStatic` prop set to `true`.
33 | ```scss
34 | $grid-item-static-bg-color: #393d42;
35 | ```
36 |
37 |
38 | ## GridItem `background-color` used for the displayed dragging GridItem.
39 | ```scss
40 | $grid-item-placeholder-bg-color: red;
41 | ```
42 |
43 |
44 | ## GridItem `opacity` used for the displayed dragging GridItem.
45 | ```scss
46 | $grid-item-placeholder-opacity: .5;
47 | ```
48 |
--------------------------------------------------------------------------------
/vitepress-docs/components/grid-item-event-bus-events.md:
--------------------------------------------------------------------------------
1 | # GridItem Eventbus Events
2 |
3 | ## compact
4 |
5 |
6 | ## directionchange
7 |
8 |
9 | ## dragEvent
10 | * Emitted in `handleDrag`, the event handler for drag events.
11 |
12 |
13 | ## resizeEvent
14 |
15 |
16 | ## setBounded
17 |
18 |
19 | ## setColNum
20 |
21 |
22 | ## setDraggable
23 |
24 |
25 | ## setMaxRows
26 |
27 |
28 | ## setResizable
29 |
30 |
31 | ## setRowHeight
32 |
33 |
34 | ## setTransformScale
35 |
36 |
37 | ## updateWidth
38 |
39 |
--------------------------------------------------------------------------------
/vitepress-docs/components/grid-item-events.md:
--------------------------------------------------------------------------------
1 | # GridItem VUE Events
2 |
3 | See https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/src/core/griditem/enums/EGridItemEvents.ts for a list of defined emit events.
4 | And See https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/src/components/Grid/GridItem.vue#L108-L117 for updated event definitions
5 |
6 | ## container-resized
7 | Container Resized event
8 |
9 | Every time the grid item/layout container changes size (browser window or other)
10 |
11 | ```typescript
12 | containerResizedEvent: function(i, newH, newW, newHPx, newWPx): void {
13 | console.log("CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
14 | }
15 | ```
16 |
17 |
18 | ## drag
19 |
20 | Every time an item is being dragged
21 |
22 | ```typescript
23 | dragEvent: function(i, h, w, height, width): void {
24 | console.log("DRAG i=" + i + ", h=" + h + ", w=" + w + ", height=" + height + ", width=" + width);
25 | }
26 | ```
27 |
28 | ## dragged
29 |
30 | Every time an item is finished being dragged
31 |
32 | ```typescript
33 | dragEvent: function(i, h, w, height, width): void {
34 | console.log("DRAGGED i=" + i + ", h=" + h + ", w=" + w + ", height=" + height + ", width=" + width);
35 | }
36 | ```
37 |
38 | ## item-move
39 | Move event
40 |
41 | Every time an item is being moved and changes position
42 |
43 | ```typescript
44 | moveEvent: function(i, newX, newY): void {
45 | console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
46 | }
47 | ```
48 |
49 | ## item-moved
50 | Moved event
51 |
52 | Every time an item is finished being moved and changes position
53 |
54 | ```typescript
55 | movedEvent: function(i, newX, newY): void {
56 | console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
57 | }
58 | ```
59 |
60 |
61 | ## remove-grid-item
62 | Emitted when the user clicks the close button in a `GridItem`.
63 |
64 | ```typescript
65 | const closeClicked = (id: number): void => {
66 | emit(`remove-grid-item`, id);
67 | };
68 | ```
69 |
70 |
71 | ## resize
72 | Resize event
73 |
74 | Every time an item is being resized and changes size
75 |
76 | ```typescript
77 | resizeEvent: function(i, newH, newW, newHPx, newWPx): void {
78 | console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
79 | }
80 | ```
81 |
82 |
83 | ## resized
84 |
85 | Every time an item is finished being resized and changes size
86 |
87 | ```typescript
88 | resizeEvent: function(i, newH, newW, newHPx, newWPx): void {
89 | console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
90 | }
91 | ```
92 |
93 |
--------------------------------------------------------------------------------
/vitepress-docs/components/grid-item-slots.md:
--------------------------------------------------------------------------------
1 | # GridItem slots
2 |
3 | * __Default slot__.
4 |
--------------------------------------------------------------------------------
/vitepress-docs/components/grid-item.md:
--------------------------------------------------------------------------------
1 | # GridItem
2 |
--------------------------------------------------------------------------------
/vitepress-docs/components/grid-layout-event-bus-events.md:
--------------------------------------------------------------------------------
1 | # GridLayout eventBus Events
2 |
3 | ## compact
4 | * Emitted during drag after layout is compacted.
5 | * Emitted during resize after layout is compacted.
6 |
7 |
8 | ## dragEvent
9 | * Forwarding `dragEvent` emitted from the `GridItem` component.
10 |
11 | ## resizeEvent
12 |
13 |
14 | ## setBounded
15 |
16 |
17 | ## setColNum
18 |
19 |
20 | ## setDraggable
21 |
22 |
23 | ## setMaxRows
24 |
25 |
26 | ## setResizable
27 |
28 |
29 | ## setRowHeight
30 |
31 |
32 | ## setTransformScale
33 |
34 |
35 | ## updateWidth
36 |
--------------------------------------------------------------------------------
/vitepress-docs/components/grid-layout-events.md:
--------------------------------------------------------------------------------
1 | # GridLayout VUE Events
2 |
3 |
4 | ## breakpoint-changed
5 | Emitted when the breakpoint is changed during a recalculation of the GridLayout.
6 |
7 |
8 | ## changed-direction
9 | Emitted when the direction of the layout changes (RTL or LTR).
10 |
11 |
12 | ## container-resized
13 |
14 |
15 | ## dragend
16 | Emitted when a GridItem is finished dragging (GridItem is dropped into the GridLayout)
17 |
18 |
19 | ## dragmove
20 | Emitted when a dragged GridItem is being moved.
21 |
22 |
23 | ## dragstart
24 | Emitted when a GridItem starts to being dragged.
25 |
26 |
27 | ## layout-before-mount
28 | Emitted on the component beforeMount lifecycle hook
29 |
30 | ```typescript
31 | layoutBeforeMountEvent: function(newLayout: Layout): void {
32 | console.log("beforeMount layout: ", newLayout);
33 | }
34 | ```
35 |
36 | ## layout-created
37 | Emitted on the component created lifecycle hook
38 |
39 |
40 | ```typescript
41 | layoutCreatedEvent: function(newLayout: Layout): void {
42 | console.log("Created layout: ", newLayout);
43 | }
44 | ```
45 |
46 | ## layout-mounted
47 | Emitted on the component mounted lifecycle hook
48 |
49 |
50 | ```typescript
51 | layoutMountedEvent: function(newLayout: Layout): void {
52 | console.log("Mounted layout: ", newLayout);
53 | }
54 | ```
55 |
56 |
57 | ## layout-ready
58 | Emitted when all the operations on the mount hook finish
59 |
60 | ```typescript
61 | layoutReadyEvent: function(newLayout: Layout): void {
62 | console.log("Ready layout: ", newLayout);
63 | }
64 | ```
65 |
66 |
67 | ## recalculate-styles
68 | Emitted into the event bus, maybe get this and others into separate enum.
69 |
70 |
71 | ## layout-update
72 | Emitted every time the GridLayout is being updated.
73 | This will fire everytime the GridLayout is updated, the GridItems are dropped or resized in the GridLayout.
74 |
75 |
76 | ```typescript
77 | layoutUpdatedEvent: function(newLayout: Layout): void {
78 | console.log("Updated layout: ", newLayout);
79 | }
80 | ```
81 |
82 |
83 | ## layout-updated
84 | Emitted when a GridItem is dropped or finished resizing and the GridLayout is updated.
85 |
--------------------------------------------------------------------------------
/vitepress-docs/components/grid-layout.md:
--------------------------------------------------------------------------------
1 | # GridLayout
2 |
--------------------------------------------------------------------------------
/vitepress-docs/components/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: true
3 | page: true
4 | title: Features
5 | ---
6 |
7 | # Components
8 |
9 | This plugin is exporting the following components:
10 |
11 |
12 | * `GridLayout`, Defines the main grid layout.
13 | * `GridItem` Defines an item in the layout.
14 | * `CustomCloseButton` Customized close button.
15 |
16 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/01-example.md:
--------------------------------------------------------------------------------
1 | # Basic Drag & Resize
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/02-example.md:
--------------------------------------------------------------------------------
1 | # Dragging is bound to GridLayout container
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/03-example.md:
--------------------------------------------------------------------------------
1 | # Drag, Drop and resize events
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/04-example.md:
--------------------------------------------------------------------------------
1 | # Multiple Grid layout's
2 | This is a simplified version of this functionality.
3 |
4 | ***Some refactoring is needed to be able to have it work with different layouts.***
5 |
6 |
7 |
8 |
11 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/05-example.md:
--------------------------------------------------------------------------------
1 | # Drag allow/ignore elements
2 | Ignore drag on certain elements and allow on others.
3 |
4 | Click and drag the black dot on the corner of each GridItem to be able to drag it.
5 |
6 |
7 | The GridItem has the following properties set in order to get this functionality.
8 | ```html
9 | drag-allow-from=".vue-draggable-handle"
10 | drag-ignore-from=".no-drag"
11 | ```
12 |
13 | Style for the black circle drag handler and overriding the cursor property, so the grab and grabbing cursor is not shown.
14 | ```scss
15 | .vue-draggable-handle {
16 | position: absolute;
17 | width: 20px;
18 | height: 20px;
19 | top: -5px;
20 | left: 5px;
21 | background-origin: content-box;
22 | background-color: black;
23 | box-sizing: border-box;
24 | border-radius: 10px;
25 | cursor: grab;
26 | }
27 |
28 | .vue-grid-item {
29 | &.vue-draggable {
30 | cursor: default !important;
31 | }
32 |
33 | &.vue-draggable-dragging {
34 | cursor: grabbing !important;
35 | }
36 | }
37 | ```
38 |
39 |
40 |
41 |
44 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/06-example.md:
--------------------------------------------------------------------------------
1 | # Mirrored / Right to Left layout.
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/07-example.md:
--------------------------------------------------------------------------------
1 | # Responsive layout
2 |
3 | The following breakpoints are applied by default:
4 |
5 | ```typescript
6 | breakpoints: (): IBreakpoints => ({
7 | xxl: 1600,
8 | xl: 1400,
9 | lg: 1200,
10 | md: 996,
11 | sm: 768,
12 | xs: 480,
13 | xxs: 0,
14 | })
15 | cols: (): IColumns => ({
16 | xxl: 12,
17 | xl: 12,
18 | lg: 12,
19 | md: 10,
20 | sm: 6,
21 | xs: 4,
22 | xxs: 2,
23 | })
24 | ```
25 | ::: tip
26 | Resize the browser window to see how the Grid is behaving.
27 | :::
28 |
29 |
30 |
33 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/08-example.md:
--------------------------------------------------------------------------------
1 | # Prevent collision
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/09-example.md:
--------------------------------------------------------------------------------
1 | # Responsive with predefined layouts.
2 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/10-example.md:
--------------------------------------------------------------------------------
1 | # Add / Remove Grid items.
2 | Click on the close button to remove an item. Click on the Add button to an item.
3 |
4 |
5 |
6 |
9 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/11-example.md:
--------------------------------------------------------------------------------
1 | # Drag & Drop from outside the grid.
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/12-example.md:
--------------------------------------------------------------------------------
1 | # Drag & Drop between Grid layouts.
2 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/13-example.md:
--------------------------------------------------------------------------------
1 | # Show Default Close Button
2 | Select the showClosebutton to display the default close button.
3 | Click on the button and the item will be removed from the layout.
4 |
5 |
6 |
7 |
10 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/14-example.md:
--------------------------------------------------------------------------------
1 | # Add default border-radius.
2 | The GridItem has a property for adding a 12px border-radius to it.
3 |
4 | Select the useBorderRadius to show it.
5 |
6 |
7 |
8 |
11 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/15-example.md:
--------------------------------------------------------------------------------
1 | # Horizontal shift of GridItem's when they are being dragged.
2 |
3 |
4 | When ***horizontalShift*** is not set, the GridItem's will shift vertically.
5 | Set it to ```true``` and they will shift horizontally instead. This applies when you are dragging a GridItem over another horizontally.
6 |
7 |
8 |
9 |
10 |
13 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/16-example.md:
--------------------------------------------------------------------------------
1 | # Horizontal shift of GridItem's when they are being dragged.
2 |
3 |
4 | When ***horizontalShift*** is not set, the GridItem's will shift vertically.
5 | Set it to ```true``` and they will shift horizontally instead. This applies when you are dragging a GridItem over another horizontally.
6 |
7 |
8 |
9 |
10 |
13 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/components/test.ts:
--------------------------------------------------------------------------------
1 | // @ts-ignore
2 | import type { TLayout } from 'vue-ts-responsive-grid-layout';
3 |
4 | export const testData: TLayout = [
5 | {
6 | h: 2,
7 | i: 1,
8 | w: 1,
9 | x: 0,
10 | y: 2,
11 | },
12 | {
13 | h: 2,
14 | i: 2,
15 | w: 1,
16 | x: 1,
17 | y: 2,
18 | },
19 | {
20 | h: 2,
21 | i: 3,
22 | w: 1,
23 | x: 2,
24 | y: 2,
25 | },
26 | {
27 | h: 2,
28 | i: 4,
29 | w: 1,
30 | x: 3,
31 | y: 2,
32 | },
33 | {
34 | h: 2,
35 | i: 5,
36 | w: 1,
37 | x: 0,
38 | y: 2,
39 | },
40 | {
41 | h: 2,
42 | i: 6,
43 | w: 1,
44 | x: 1,
45 | y: 2,
46 | },
47 | {
48 | h: 2,
49 | i: 7,
50 | w: 1,
51 | x: 2,
52 | y: 2,
53 | },
54 | {
55 | h: 2,
56 | i: 8,
57 | w: 1,
58 | x: 3,
59 | y: 2,
60 | },
61 | ];
62 |
--------------------------------------------------------------------------------
/vitepress-docs/examples/components/test2.ts:
--------------------------------------------------------------------------------
1 | // @ts-ignore
2 | import type { TLayout } from 'vue-ts-responsive-grid-layout';
3 |
4 | export const testData2: TLayout = [
5 | {
6 | h: 2,
7 | i: 1,
8 | w: 1,
9 | x: 0,
10 | y: 0,
11 | },
12 | {
13 | h: 4,
14 | i: 2,
15 | w: 1,
16 | x: 1,
17 | y: 0,
18 | },
19 | {
20 | h: 3,
21 | i: 3,
22 | w: 1,
23 | x: 2,
24 | y: 0,
25 | },
26 | ];
27 |
--------------------------------------------------------------------------------
/vitepress-docs/features/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | page: true
4 | title: Features
5 | ---
6 |
7 | # Features
8 |
9 | * VUE 3 with Typescript.
10 | * Vite used as dev server and bundler.
11 | * Vitepress used for documentation.
12 | * Automatic responsiveness with breakpoints configuration.
13 | * GridItem Border Radius.
14 | * GridLayout Edit Mode.
15 | * Horizontal Shift.
16 | * Close button in GridItem.
17 | * New Test application, styled with [mini.css](https://minicss.us/).
18 | * Cursor styling.
19 | * Fixed mirrored layout so only the GridItems are rearranged.
20 | * Draggable widgets.
21 | * Resizable widgets.
22 | * Static widgets.
23 | * Bounds checking for dragging and resizing.
24 | * Widgets may be added or removed without rebuilding grid.
25 | * Layout can be serialized and restored.
26 | * Responsive with predefined Layouts.
27 | * Grid items are distributed evenly.
28 | * Grid item is resizable from right, bottom right and bottom.
29 |
--------------------------------------------------------------------------------
/vitepress-docs/guide/changelog.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | footer: true
4 | page: true
5 | title: Changelog
6 | ---
7 |
8 | ## Changelog
9 |
10 |
11 | ### v: 1.2.10 (2025-04-28)
12 | * __Demo App__ [Eventlog is not displaying any resize events.](https://github.com/gwinnem/vue-responsive-grid-layout/issues/46)
13 | * __Fixed Issue__ [The margin property cannot be [0,0]](https://github.com/gwinnem/vue-responsive-grid-layout/issues/64)
14 | * __Fixed Issue__ [Hide resize cursor change when GridItem is not resizable](https://github.com/gwinnem/vue-responsive-grid-layout/issues/49)
15 | * __Tests__ Added more unit tests and refactored code so it is easier to test.
16 | * __Tests__ Updated vitest.config.js coverage exclude section.
17 |
18 |
19 | ### v: 1.2.9 (2024-02-03)
20 | * __Fixed Issue__ [Dynamic change columns, item will overlap](https://github.com/gwinnem/vue-responsive-grid-layout/issues/12)
21 |
22 |
23 | ### v: 1.2.8 (2024-01-25)
24 | * __Fixed Issue__ [Unexpected Behavior when dragging items](https://github.com/gwinnem/vue-responsive-grid-layout/issues/54) Tnxs to [T0miii](https://github.com/T0miii)
25 |
26 |
27 | ### v: 1.2.7 (2024-01-10)
28 | * __Fixed Issue__ [option "responsive" not working](https://github.com/gwinnem/vue-responsive-grid-layout/issues/51). Tnxs to [T0miii](https://github.com/T0miii)
29 |
30 |
31 | ### v: 1.2.6 (2023-12-28)
32 | * __Fixed Issue__ Problem if layout doesnt have static item [PullRequest](https://github.com/gwinnem/vue-responsive-grid-layout/pull/47)
33 |
34 |
35 | ### v: 1.2.5 (2023-12-14)
36 | * __Fixed Issue__ [editMode not working as expected](https://github.com/gwinnem/vue-responsive-grid-layout/issues/33)
37 | * __Documentation__ Updated config so when refreshing a page it loads the correct page and not the 404 page.
38 | * __Demo App__ Added inputs for Margins.
39 | * __Refactor__ Updated style for gridlines in GridLayout.vue.
40 | * __Config__ Added style linting to project.
41 | * __Config__ Updated scripts section in package.json.
42 | * __Demo App__ Fixed index value when dropping a new GridItem onto the layout. This only works when index is a numeric value.
43 | * __Demo App__ Added checks so number input can not have less than 1.
44 | * __Tests__ Added more unit tests and refactored code so it is easier to test.
45 |
46 |
47 |
48 | ### v: 1.2.4 (2023-10-23)
49 |
50 | * __Fixed Issue__ [Layout update event is raised before update is finished](https://github.com/gwinnem/vue-responsive-grid-layout/issues/19). Tnxs to [SamGeems](https://github.com/SamGeens)
51 | * __Fixed issue__ [Close button css is different from the example](https://github.com/gwinnem/vue-responsive-grid-layout/issues/20). Tnxs to [SamGeems](https://github.com/SamGeens)
52 | * __Feature__ Added event __drag-end__ to GridLayout.
53 | * __Feature__ Added event __drag-move__ to GridLayout.
54 | * __Feature__ Added event __drag-start__ to GridLayout.
55 | * __Codebase__ Renamed EGridLayoutEvent value UPDATE_LAYOUT to LAYOUT_UPDATE.
56 | * __Codebase__ Removed file EDragEvents and updated GridLayout. Values are implemented in EGridLayoutEvent.
57 | * __Codebase__ Added documentation to file DOM.ts
58 | * __Codebase__ Added new enum for drag events and refactored GridLayout to use new enum.
59 | * __Refactor__ Removed obsolete enum EMovingDirections.
60 | * __Demo App__ Added button for clearing the event log.
61 | * __Demo App__ Added Dropdown for filtering on events.
62 |
63 | ### v: 1.2.2 (2023-09-19)
64 |
65 | * __Fixed Issue__ [Drag and Drop from outside is not working when distributeEvenly prop is set](https://github.com/gwinnem/vue-responsive-grid-layout/issues/5)
66 | * __Partial Fix__ [Resizemove edges case handling is incomplete](https://github.com/gwinnem/vue-responsive-grid-layout/issues/13)
67 | * __Right, Right Bottom and Bottom__ resize fixed.
68 | * __Left, Top Left, Top and Top Right__ resize not fixed.
69 | * __Codebase__ Adding description to functions.
70 | * __Codebase__ Added contributors to package.json.
71 | * __Codebase__ Added badges to README file.
72 | * __Codebase__ Fixed outdated dependencies.
73 |
74 | Thanks to [UTing1119](https://github.com/UTing1119) for his contribution to this release.
75 |
76 | ### v: 1.2.1 (2023-05-07)
77 |
78 | * --Fixed Issue-- [Issue 7](https://github.com/gwinnem/vue-responsive-grid-layout/issues/7), thanks to [UTing1119](https://github.com/UTing1119)
79 | * --Fixed Issue-- [Issue 6](https://github.com/gwinnem/vue-responsive-grid-layout/issues/6), thanks to [UTing1119](https://github.com/UTing1119)
80 |
--------------------------------------------------------------------------------
/vitepress-docs/guide/installation.md:
--------------------------------------------------------------------------------
1 | ---
2 | page: true
3 | title: Installation
4 | ---
5 |
6 | # Installation
7 |
8 | ## NPM
9 | ```
10 | npm install vue-ts-responsive-grid-layout --save
11 | ```
12 |
13 | ## Yarn
14 | ```
15 | yarn add vue-ts-responsive-grid-layout
16 | ```
17 |
18 | ## Import the package
19 |
20 | ```typescript
21 | import VueResponsiveGridLayout from 'vue-ts-responsive-grid-layout';
22 | ```
23 |
24 | Add to other Vue components using Options api.
25 |
26 | ```typescript
27 | export default {
28 | components: {
29 | GridLayout: VueResponsiveGridLayout.GridLayout,
30 | GridItem: VueResponsiveGridLayout.GridItem
31 | },
32 | // ... data, methods, mounted (), etc.
33 | }
34 | ```
35 |
36 | Add to other Vue components using Composition api.
37 |
38 | ```html
39 |
42 | ```
43 |
--------------------------------------------------------------------------------
/vitepress-docs/guide/introduction.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | footer: true
4 | page: true
5 | title: Introduction
6 | ---
7 |
8 |
9 | # What is vue-ts-responsive-grid-layout?
10 | A responsive grid layout component for creating advance dashboard's.
11 |
--------------------------------------------------------------------------------
/vitepress-docs/guide/roadmap.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | footer: true
4 | page: true
5 | title: Roadmap
6 | ---
7 |
8 | # ROADMAP
9 |
10 | ## Upcoming updates and fixes
11 | * __New Feature__ Implement resize from left side.
12 | * __New Feature__ Implement resize from top-left side.
13 | * __New Feature__ Implement resize from bottom-left side.
14 | * __New Feature__ Drag & Drop from Multiple Grids.
15 | * __New Feature__ Add native drag and drop to GridLayout.
16 | * __New Feature__ Add possibility to set fixed width on a GridItem.
17 | * __New Feature__ Add pre styled GridItem.
18 | * __New Feature__ Implement RTL resize.
19 | * __New Feature__ Support for nuxt projects.
20 | * __Examples__ Dynamic add new GridItems.
21 | * __Examples__ Add example app to CodeSandbox, so user's can test layouts.
22 | * __Examples__ Add Multiple Grids.
23 | * __Examples__ Add Responsive predefined layouts.
24 | * __Examples__ Drag, drop from grid to grid.
25 | * __Test__ Add e2e tests.
26 | * __Test__ Continuously refactoring and adding new unit tests.
27 |
--------------------------------------------------------------------------------
/vitepress-docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: home
3 |
4 | title: Vue 3 Responsive Grid Layout.
5 | titleTemplate: Main
6 |
7 | hero:
8 | name: Vue 3 Responsive Grid Layout.
9 | tagline: Draggable, Resizeable widgets.
10 | image:
11 | src: /Data Grid.svg
12 | alt: logo
13 | actions:
14 | - theme: brand
15 | text: Get Started
16 | link: /guide/introduction
17 |
18 | features:
19 | - icon: ⚡️
20 | title: Latest Release version
21 | details: 1.2.10 Released 2025-04-28.
22 | - icon: 💥
23 | title: Responsive Grid Layouts
24 | details: With predefined layout's or automatically with predefined breakpoints.
25 | - icon: 🔱
26 | title: Draggable GridItems
27 | details: Examples showing howto Drag and Drop a GridItem.
28 | - icon: 🔱
29 | title: Resizeable GridItems
30 | details: Constantly being updated for each release..
31 | ---
32 |
--------------------------------------------------------------------------------
/vitepress-docs/public/Data Grid.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/vitepress-docs/public/logo.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/vitepress-docs/public/npm-square-red.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/vitest.config.js:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 | import { defineConfig } from 'vitest/config';
3 | import vue from '@vitejs/plugin-vue';
4 |
5 | export default defineConfig({
6 | plugins: [vue()],
7 | resolve: {
8 | alias: {
9 | '@': path.resolve(__dirname, `./src`),
10 | },
11 | },
12 | test: {
13 | environment: `jsdom`,
14 | globals: true,
15 | include: [`tests/*.spec.ts`, `tests/unit/*.spec.ts`],
16 | coverage: {
17 | enabled: true,
18 | provider: 'v8',
19 | reporter: ['text', 'json', 'html'],
20 | reportsDirectory: './tests/coverage',
21 | exclude: [
22 | './sandbox',
23 | './vitepress-docs',
24 | './docs',
25 | './dist',
26 | './tests',
27 | './vite.config.js',
28 | './vitest.config.js',
29 | './.*',
30 | './env.d.ts',
31 | './changelog.config.js',
32 | './src/vite-env.d.ts',
33 | './src/core/helpers/DOM.ts',
34 | './src/core/common/interfaces',
35 | './src/core/common/types',
36 | './src/core/common/enums',
37 | './src/core/griditem/enums',
38 | './src/core/griditem/interfaces',
39 | './src/core/gridlayout/enums',
40 | './src/core/gridlayout/interfaces',
41 | './src/hooks',
42 | './src/components/common',
43 | './src/components/index.ts',
44 | './src/components/Grid'
45 | ],
46 | },
47 | },
48 | });
49 |
--------------------------------------------------------------------------------