diff --git a/dist/style.css b/dist/style.css index 33ff59b..2022192 100644 --- a/dist/style.css +++ b/dist/style.css @@ -1 +1 @@ -.muuri-grid[data-v-1bd1eb89]{position:relative}.muuri-item[data-v-1bd1eb89]{display:block;position:absolute;z-index:1}.muuri-item.muuri-item-dragging[data-v-1bd1eb89]{z-index:3}.muuri-item.muuri-item-releasing[data-v-1bd1eb89]{z-index:2}.muuri-item.muuri-item-hidden[data-v-1bd1eb89]{z-index:0}.muuri-item-content[data-v-1bd1eb89]{position:relative;width:100%;height:100%}.muuri-item-placeholder[data-v-1bd1eb89]{opacity:.5;margin:0!important} +.muuri-grid[data-v-d0725908]{position:relative}.muuri-item[data-v-d0725908]{display:block;position:absolute;z-index:1}.muuri-item.muuri-item-dragging[data-v-d0725908]{z-index:3}.muuri-item.muuri-item-releasing[data-v-d0725908]{z-index:2}.muuri-item.muuri-item-hidden[data-v-d0725908]{z-index:0}.muuri-item-content[data-v-d0725908]{position:relative;width:100%;height:100%}.muuri-item-placeholder[data-v-d0725908]{opacity:.5;margin:0!important} diff --git a/dist/vuuri.js b/dist/vuuri.js index 6b6b411..b5023e0 100644 --- a/dist/vuuri.js +++ b/dist/vuuri.js @@ -4879,7 +4879,7 @@ const fc = (t, e) => { _setup() { this.muuri = new T(this.selector, this.muuriOptions), this.groupId && tt.addGrid(this.groupId, this.muuri), this.groupIds && tt.addGridToGroups(this.groupIds, this.muuri), this.observer = new ResizeObserver(() => { this._resizeOnLoad(); - }), this.observer.observe(this.$refs.muuri), this._sync(this.modelValue, []), this.$nextTick(() => { + }), this.observer.observe(this.muuri.getElement()), this._sync(this.modelValue, []), this.$nextTick(() => { tt.setItemsForGridId(this.gridKey, this.modelValue); }); }, @@ -5135,7 +5135,7 @@ function vc(t, e, i, r, n, s) { ], 12, pc))), 128)) ], 10, _c); } -const mc = /* @__PURE__ */ fc(dc, [["render", vc], ["__scopeId", "data-v-1bd1eb89"]]); +const mc = /* @__PURE__ */ fc(dc, [["render", vc], ["__scopeId", "data-v-d0725908"]]); export { Ct as GridEvent, mc as default diff --git a/dist/vuuri.umd.cjs b/dist/vuuri.umd.cjs index 40d27fb..b62b4b1 100644 --- a/dist/vuuri.umd.cjs +++ b/dist/vuuri.umd.cjs @@ -37,4 +37,4 @@ Component that was made reactive: `,t)),yr(t,e,i,r,n,o,s,!0)}function ec(t){retu * vue v3.4.19 * (c) 2018-present Yuxi (Evan) You and Vue contributors * @license MIT -**/function uc(){hc()}process.env.NODE_ENV!=="production"&&uc();const cc=(t,e)=>{const i=t.__vccOpts||t;for(const[r,n]of e)i[r]=n;return i},fc={name:"Vuuri",props:{className:{type:String,required:!1,default:()=>`class${Ki().replace(/-/g,"")}`},options:{type:Object,required:!1,default:()=>({})},modelValue:{type:Array,required:!1},itemKey:{type:String,required:!1,default:()=>Jn.key},getItemWidth:{type:Function,required:!1,default:()=>Zn.width},getItemHeight:{type:Function,required:!1,default:()=>Zn.height},dragEnabled:{type:Boolean,required:!1,default:!1},dragHandle:{type:String,required:!1,default:Ih.select},groupId:{type:[String,Number],required:!1},groupIds:{type:[Array],required:!1}},data(){return{copiedItems:[],events:{},muuriOptions:{}}},watch:{modelValue:{handler(t){this.internallySet||this._sync(t,this.copiedItems)},deep:!0}},computed:{selector(){return`.${this.className}`}},methods:{update(){this.$nextTick(()=>{this.muuri.refreshItems().layout(!0,()=>this.$emit("updated"))})},_setup(){this.muuri=new T(this.selector,this.muuriOptions),this.groupId&&it.addGrid(this.groupId,this.muuri),this.groupIds&&it.addGridToGroups(this.groupIds,this.muuri),this.observer=new ResizeObserver(()=>{this._resizeOnLoad()}),this.observer.observe(this.$refs.muuri),this._sync(this.modelValue,[]),this.$nextTick(()=>{it.setItemsForGridId(this.gridKey,this.modelValue)})},_setupNonReactiveProps(){this.muuri=void 0,this.observer=void 0,this.gridKey=Ki().replace(/-/g,"")},_setupOptions(){if(this.dragEnabled&&(this.muuriOptions={...this._generateDragOptions(),...this.muuriOptions}),this.groupId||this.groupIds){let t=[];this.groupId&&t.push(this.groupId),this.groupIds&&(t=t.concat(this.groupIds)),this.muuriOptions.dragSort=()=>it.getGrids(t)}this.muuriOptions={...this.options,...this.muuriOptions}},_generateDragOptions(){return{dragEnabled:!0,dragHandle:this.dragHandle,dragContainer:document.querySelector(`.muuri-grid${this.selector}`),dragRelease:{duration:400,easing:"cubic-bezier(0.625, 0.225, 0.100, 0.890)",useDragContainer:!0},dragPlaceholder:{enabled:!0,createElement(t){return t.getElement().cloneNode(!0)}},dragAutoScroll:{targets:[window],sortDuringScroll:!1,syncAfterScroll:!1}}},_registerEvents(){Object.values(It).forEach(t=>{this.events[t]=(...e)=>{this.$emit(t,...e)},this.muuri.on(t,this.events[t]),t===It.dragStart&&this.muuri.on(t,this._onDragStart),t===It.send&&this.muuri.on(t,this._onItemSend),t===It.receive&&this.muuri.on(t,this._onItemReceive),t===It.move&&this.muuri.on(t,this._onItemMove),t===It.dragEnd&&this.muuri.on(t,this._onDragEnd)})},_unregisterEvents(){Object.values(It).forEach(t=>{this.muuri.off(t,this.events[t]),delete this.events[t]})},_onDragStart(t){it.setDraggingGridItem(t)},_onItemMove({item:t}){const e=this._reOrderWithItem(t);this._emitValue(e)},_onItemSend({item:t}){const e=this.modelValue.findIndex(r=>r[this.itemKey]==t.getElement().dataset.itemKey),i=this.modelValue.splice(e,1)[0];it.setDraggingItem(i),this._emitValue(this.modelValue)},_onItemReceive(){const t=it.getDraggingItem();this.modelValue.push(t);const e=this._reOrderWithItem(it.getDraggingGridItem());this._emitValue(e)},_onDragEnd(){it.setDraggingGridItem(null),it.setDraggingItem(null)},_reOrderWithItem(t){const e=t.getGrid();let i=0;const r=e.getItems().reduce((n,s)=>(n[s.getElement().dataset.itemKey]=i,i+=1,n),{});return this.modelValue.reduce((n,s)=>(n[r[s[this.itemKey]]]=s,n),[])},_getItemStyles(t){return{width:this.getItemWidth(t),height:this.getItemHeight(t)}},_generateItemKey(t){t._$muuri_id=Ki()},_resizeOnLoad:$a(function(){this.$nextTick(()=>{this.update()},100)}),_getDiff(t,e){return za(t,e,(i,r)=>i[this.itemKey]===r[this.itemKey])},_sync(t=null,e=null){!t||!e||this._remove(t,e).then(()=>{this.update(),this._add(t,e),it.setItemsForGridId(this.gridKey,this.copiedItems)})},_remove(t,e){const i=this._getDiff(e,t);if(!i.length)return console.log(t,e),Promise.resolve();const r=[];return i.forEach(n=>{const s=this.muuri.getItems().find(o=>n[this.itemKey]+""===o.getElement().dataset.itemKey);s&&r.push(s)}),r.length?new Promise(n=>{this.muuri.hide(r,{onFinish:()=>{this.muuri.remove(r),i.forEach(s=>{const o=this.copiedItems.findIndex(a=>a[this.itemKey]===s[this.itemKey]);this.copiedItems.splice(o,1)}),n()}})}):Promise.resolve()},_add(t,e){let i=this._getDiff(t,e);i=this._getDiff(i,this.copiedItems),i.length&&(this.itemKey===Jn.key&&i.forEach(r=>this._generateItemKey(r)),this.copiedItems=this.copiedItems.concat(i),this.$nextTick(()=>{i.forEach(r=>{const n=document.querySelector(`${this.selector} [data-item-key="${r[this.itemKey]}"]`);this.muuri.add(n,{layout:!1,active:!1})}),this.muuri.filter(()=>!0)}))},_emitValue(t){this.internallySet=!0,this.$emit("input",t),this.$nextTick(()=>{this.internallySet=!1,it.setItemsForGridId(this.gridKey,this.modelValue)})}},created(){this._setupNonReactiveProps(),this._setupOptions()},mounted(){this._setup(),this._registerEvents()},beforeUnmount(){this._unregisterEvents(),this.$emit("on-destroy",this)}},dc=["data-grid-key"],_c=["data-item-key"],pc={class:"muuri-item-content"};function gc(t,e,i,r,n,s){return wi(),mr("div",{ref:"muuri",class:ai(["muuri-grid",i.className]),"data-grid-key":t.gridKey,"test-id":"muuri-grid-container"},[(wi(!0),mr(Re,null,Gu(n.copiedItems,o=>(wi(),mr("div",{key:o[i.itemKey],style:oi(s._getItemStyles(o)),class:"muuri-item","data-item-key":o[i.itemKey],"test-id":"muuri-grid-item"},[yr("div",pc,[$u(t.$slots,"item",{item:o},void 0,!0)])],12,_c))),128))],10,dc)}const vc=cc(fc,[["render",gc],["__scopeId","data-v-1bd1eb89"]]);Ct.GridEvent=It,Ct.default=vc,Object.defineProperties(Ct,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); +**/function uc(){hc()}process.env.NODE_ENV!=="production"&&uc();const cc=(t,e)=>{const i=t.__vccOpts||t;for(const[r,n]of e)i[r]=n;return i},fc={name:"Vuuri",props:{className:{type:String,required:!1,default:()=>`class${Ki().replace(/-/g,"")}`},options:{type:Object,required:!1,default:()=>({})},modelValue:{type:Array,required:!1},itemKey:{type:String,required:!1,default:()=>Jn.key},getItemWidth:{type:Function,required:!1,default:()=>Zn.width},getItemHeight:{type:Function,required:!1,default:()=>Zn.height},dragEnabled:{type:Boolean,required:!1,default:!1},dragHandle:{type:String,required:!1,default:Ih.select},groupId:{type:[String,Number],required:!1},groupIds:{type:[Array],required:!1}},data(){return{copiedItems:[],events:{},muuriOptions:{}}},watch:{modelValue:{handler(t){this.internallySet||this._sync(t,this.copiedItems)},deep:!0}},computed:{selector(){return`.${this.className}`}},methods:{update(){this.$nextTick(()=>{this.muuri.refreshItems().layout(!0,()=>this.$emit("updated"))})},_setup(){this.muuri=new T(this.selector,this.muuriOptions),this.groupId&&it.addGrid(this.groupId,this.muuri),this.groupIds&&it.addGridToGroups(this.groupIds,this.muuri),this.observer=new ResizeObserver(()=>{this._resizeOnLoad()}),this.observer.observe(this.muuri.getElement()),this._sync(this.modelValue,[]),this.$nextTick(()=>{it.setItemsForGridId(this.gridKey,this.modelValue)})},_setupNonReactiveProps(){this.muuri=void 0,this.observer=void 0,this.gridKey=Ki().replace(/-/g,"")},_setupOptions(){if(this.dragEnabled&&(this.muuriOptions={...this._generateDragOptions(),...this.muuriOptions}),this.groupId||this.groupIds){let t=[];this.groupId&&t.push(this.groupId),this.groupIds&&(t=t.concat(this.groupIds)),this.muuriOptions.dragSort=()=>it.getGrids(t)}this.muuriOptions={...this.options,...this.muuriOptions}},_generateDragOptions(){return{dragEnabled:!0,dragHandle:this.dragHandle,dragContainer:document.querySelector(`.muuri-grid${this.selector}`),dragRelease:{duration:400,easing:"cubic-bezier(0.625, 0.225, 0.100, 0.890)",useDragContainer:!0},dragPlaceholder:{enabled:!0,createElement(t){return t.getElement().cloneNode(!0)}},dragAutoScroll:{targets:[window],sortDuringScroll:!1,syncAfterScroll:!1}}},_registerEvents(){Object.values(It).forEach(t=>{this.events[t]=(...e)=>{this.$emit(t,...e)},this.muuri.on(t,this.events[t]),t===It.dragStart&&this.muuri.on(t,this._onDragStart),t===It.send&&this.muuri.on(t,this._onItemSend),t===It.receive&&this.muuri.on(t,this._onItemReceive),t===It.move&&this.muuri.on(t,this._onItemMove),t===It.dragEnd&&this.muuri.on(t,this._onDragEnd)})},_unregisterEvents(){Object.values(It).forEach(t=>{this.muuri.off(t,this.events[t]),delete this.events[t]})},_onDragStart(t){it.setDraggingGridItem(t)},_onItemMove({item:t}){const e=this._reOrderWithItem(t);this._emitValue(e)},_onItemSend({item:t}){const e=this.modelValue.findIndex(r=>r[this.itemKey]==t.getElement().dataset.itemKey),i=this.modelValue.splice(e,1)[0];it.setDraggingItem(i),this._emitValue(this.modelValue)},_onItemReceive(){const t=it.getDraggingItem();this.modelValue.push(t);const e=this._reOrderWithItem(it.getDraggingGridItem());this._emitValue(e)},_onDragEnd(){it.setDraggingGridItem(null),it.setDraggingItem(null)},_reOrderWithItem(t){const e=t.getGrid();let i=0;const r=e.getItems().reduce((n,s)=>(n[s.getElement().dataset.itemKey]=i,i+=1,n),{});return this.modelValue.reduce((n,s)=>(n[r[s[this.itemKey]]]=s,n),[])},_getItemStyles(t){return{width:this.getItemWidth(t),height:this.getItemHeight(t)}},_generateItemKey(t){t._$muuri_id=Ki()},_resizeOnLoad:$a(function(){this.$nextTick(()=>{this.update()},100)}),_getDiff(t,e){return za(t,e,(i,r)=>i[this.itemKey]===r[this.itemKey])},_sync(t=null,e=null){!t||!e||this._remove(t,e).then(()=>{this.update(),this._add(t,e),it.setItemsForGridId(this.gridKey,this.copiedItems)})},_remove(t,e){const i=this._getDiff(e,t);if(!i.length)return console.log(t,e),Promise.resolve();const r=[];return i.forEach(n=>{const s=this.muuri.getItems().find(o=>n[this.itemKey]+""===o.getElement().dataset.itemKey);s&&r.push(s)}),r.length?new Promise(n=>{this.muuri.hide(r,{onFinish:()=>{this.muuri.remove(r),i.forEach(s=>{const o=this.copiedItems.findIndex(a=>a[this.itemKey]===s[this.itemKey]);this.copiedItems.splice(o,1)}),n()}})}):Promise.resolve()},_add(t,e){let i=this._getDiff(t,e);i=this._getDiff(i,this.copiedItems),i.length&&(this.itemKey===Jn.key&&i.forEach(r=>this._generateItemKey(r)),this.copiedItems=this.copiedItems.concat(i),this.$nextTick(()=>{i.forEach(r=>{const n=document.querySelector(`${this.selector} [data-item-key="${r[this.itemKey]}"]`);this.muuri.add(n,{layout:!1,active:!1})}),this.muuri.filter(()=>!0)}))},_emitValue(t){this.internallySet=!0,this.$emit("input",t),this.$nextTick(()=>{this.internallySet=!1,it.setItemsForGridId(this.gridKey,this.modelValue)})}},created(){this._setupNonReactiveProps(),this._setupOptions()},mounted(){this._setup(),this._registerEvents()},beforeUnmount(){this._unregisterEvents(),this.$emit("on-destroy",this)}},dc=["data-grid-key"],_c=["data-item-key"],pc={class:"muuri-item-content"};function gc(t,e,i,r,n,s){return wi(),mr("div",{ref:"muuri",class:ai(["muuri-grid",i.className]),"data-grid-key":t.gridKey,"test-id":"muuri-grid-container"},[(wi(!0),mr(Re,null,Gu(n.copiedItems,o=>(wi(),mr("div",{key:o[i.itemKey],style:oi(s._getItemStyles(o)),class:"muuri-item","data-item-key":o[i.itemKey],"test-id":"muuri-grid-item"},[yr("div",pc,[$u(t.$slots,"item",{item:o},void 0,!0)])],12,_c))),128))],10,dc)}const vc=cc(fc,[["render",gc],["__scopeId","data-v-d0725908"]]);Ct.GridEvent=It,Ct.default=vc,Object.defineProperties(Ct,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); diff --git a/package.json b/package.json index 8a53bef..aeec576 100755 --- a/package.json +++ b/package.json @@ -1,22 +1,11 @@ { "name": "vuuri", - "version": "0.4.3", + "version": "0.4.4", "description": "Muuri Vue Integration", "homepage": "https://dannyyassine.github.io/vuuri/", "main": "./src/index.js", - "module": "./dist/vuuri.js", "files": ["dist"], "type": "module", - "exports": { - ".": { - "import": "./dist/vuuri.js", - "require": "./dist/vuuri.umd.cjs" - }, - "./dist/style.css": { - "import": "./dist/style.css", - "require": "./dist/style.css" - } - }, "scripts": { "serve": "cd tests/client ; yarn serve", "dev": "cd dev ; yarn dev",