@aplus-frontend/ui/lib/src/business/ap-draggable-grid/ApDraggableGrid.vue2.js

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),ee=require("@aplus-frontend/antdv"),w=require("../../utils/warning.js");require("../../config-provider/index.js");const re=require("./constans.js"),te=require("./style/index.js"),E=require("./utils/sortItemsByRowAndCol.js"),oe=require("../../config-provider/hooks/use-namespace.js"),ae=["data-span","data-index","data-row","data-col","data-height","data-module","draggable"],ne=t.defineComponent({__name:"ApDraggableGrid",props:re.ApDraggableGridProps(),emits:["onGridListChange"],setup(_,{expose:J,emit:z}){const c=_,{b:q,e:T,m:j}=oe.useNamespace("ap-draggable-grid"),U=te.default("ap-draggable-grid"),L=t.ref(!1),x=t.ref(!1),M=t.computed(()=>T("item")),H=t.computed(()=>T("dragging")),G=t.computed(()=>T("overlay")),V=t.computed(()=>c.customWrapper?`.${c.customWrapper} .${M.value}:not(.${H.value})`:`.${M.value}:not(.${H.value})`),K=z,g=t.useTemplateRef("gridContainer"),$=t.ref([]);t.watch(()=>c.gridList,e=>{Array.isArray(e)&&i(e)},{deep:!0,immediate:!0});function i(e){const a=[...e].sort((r,u)=>r.row-u.row);$.value=a.map(r=>({...r})),K("onGridListChange",JSON.parse(JSON.stringify($.value)))}const Q=e=>({gridColumn:`${e.col} / span ${e.span}`,gridRow:e.row,minHeight:e.showHeight?e.showHeight+"px":`${c.gridItemHeight}px`,height:e.showHeight?e.showHeight+"px":`${c.gridItemHeight}px`,boxShadow:c.gridItemShadow?c.gridItemShadow:"none"});async function k(){if(i([]),typeof c.request=="function")try{L.value=!0;const e=await c.request();Array.isArray(e)&&i(e),w.warning(Array.isArray(e),"ApDraggableGrid: 请求函数必须返回一个符合 ApDraggableGridItemBase 数组的格式")}catch(e){w.warning(!1,`ApDraggableGrid: 请求错误: ${e}`)}finally{L.value=!1}}let A=t.ref(null),C=t.ref(null),h=null,R=!1,b=null;const F=e=>{if(!R&&(R=!0,e.dataTransfer&&e.target instanceof HTMLElement)){const a=e.target.dataset;e.dataTransfer.setData("text/plain",a.module),e.dataTransfer.effectAllowed="move",A.value={span:Number(a.span),col:Number(a.col),row:Number(a.row),module:a.module,height:Number(a.height),index:Number(a.index)},h=e.target,h.style.opacity="0"}},O=e=>{if(e.preventDefault(),b&&clearTimeout(b),b=window.setTimeout(()=>{R=!1,b=null},300),e.dataTransfer&&e.target instanceof HTMLElement){const a=e.target.closest(V.value);if(!a)return;const r=a.dataset;document.querySelectorAll(`.${c.customWrapper} div[data-row="${r.row}"]`).forEach(l=>{l.classList.add(G.value)}),C.value={span:Number(r.span),col:Number(r.col),row:Number(r.row),module:r.module,height:Number(r.height),index:Number(r.index)}}},P=e=>{e.preventDefault(),h&&(h.style.opacity="1",h=null),X(A,C)&&Y(A,C),document.querySelectorAll(`.${G.value}`).forEach(a=>{a.classList.remove(G.value)}),A.value=null,C.value=null,x.value=!1},W=()=>{h&&(h.style.opacity="1",h=null),A.value=null,C.value=null,x.value=!1},X=(e,a)=>{const{span:r,module:u}=e.value,{span:l,module:f}=a.value;return!(u===f&&r===l)},Y=(e,a)=>{if(!e.value||!a.value)return;const{span:r,col:u,row:l,module:f,height:D,index:d}=e.value,{span:S,col:y,row:p,module:Z,height:B,index:m}=a.value;if(l===p&&u===y&&r===S&&D===B&&f===Z)return;let o=[...t.toRaw($.value)];const N=JSON.parse(JSON.stringify(o));if(l===p)if(d>m){d-m===1?(o[m].col=r+y,o[d].col=y):(o.forEach((v,n)=>{n<d&&n>=m&&(v.col+=S)}),o[d].col=y);const s=E.sortItemsByRowAndCol(o);if(!I(s)){w.note(!1,"交换后的布局无效，恢复原始布局");return}i(s);return}else{m-d===1?(o[d].col=S+1,o[m].col=u):(o.forEach((v,n)=>{n>d&&n<=m&&(v.col-=S)}),o[d].col=y);const s=E.sortItemsByRowAndCol(o);if(!I(s)){i(N);return}i(s);return}else if(p<l){if(r===24){const s=[];for(let n=p;n<l;n++)s.push(n);o.forEach(n=>{s.includes(n.row)&&(n.row+=1)}),o[d].row=p;const v=E.sortItemsByRowAndCol(o);if(!I(v)){w.note(!1,"交换后的布局无效，恢复原始布局"),i(N);return}i(v);return}if(r===S&&D===B){o[d].row=p,o[d].col=y,o[m].row=l,o[m].col=u;const s=E.sortItemsByRowAndCol(o);if(!I(s)){w.note(!1,"交换后的布局无效，恢复原始布局"),i(N);return}i(s);return}}else{if(r===24){const s=[];for(let n=l+1;n<=p;n++)s.push(n);o.forEach(n=>{s.includes(n.row)&&(n.row-=1)}),o[d].row=p;const v=E.sortItemsByRowAndCol(o);if(!I(v)){w.note(!1,"交换后的布局无效，恢复原始布局"),i(N);return}i(v);return}if(r===S&&D===B){o[d].row=p,o[d].col=y,o[m].row=l,o[m].col=u;const s=E.sortItemsByRowAndCol(o);if(!I(s)){w.note(!1,"交换后的布局无效，恢复原始布局"),i(N);return}i(s);return}}},I=e=>{const a={};e.forEach(r=>{a[r.row]||(a[r.row]=[]),a[r.row].push(r)});for(const r in a){const u=a[r].sort((f,D)=>f.col-D.col);let l=1;for(const f of u){if(f.col<l)return w.note(!1,`行 ${r} 中的元素重叠: 元素 ${f.module} 在列 ${f.col}, 但当前列已经是 ${l}`),!1;if(l=f.col+f.span,l>25)return w.note(!1,`行 ${r} 中的元素超出界限: 元素 ${f.module} 在列 ${f.col} 跨度 ${f.span}`),!1}}return!0};return t.onMounted(async()=>{await k(),!c.disableDrag&&g.value&&(g.value.addEventListener("dragstart",F),g.value.addEventListener("dragover",O),g.value.addEventListener("drop",P),g.value.addEventListener("dragend",W))}),t.onUnmounted(()=>{g.value&&(g.value.removeEventListener("dragstart",F),g.value.removeEventListener("dragover",O),g.value.removeEventListener("drop",P),g.value.removeEventListener("dragend",W),b&&clearTimeout(b))}),J({setGridItems:e=>{i(e)},getGridItems:()=>JSON.parse(JSON.stringify($.value)),refreshGrid:()=>{(async()=>await k())()}}),(e,a)=>(t.openBlock(),t.createBlock(t.unref(ee.Spin),{spinning:L.value},{default:t.withCtx(()=>[t.createElementVNode("div",{ref_key:"gridContainer",ref:g,class:t.normalizeClass([L.value?t.unref(q)("loading"):t.unref(q)(),c.customWrapper,t.unref(U)]),style:t.normalizeStyle({width:typeof e.gridWidth=="number"?`${e.gridWidth}px`:e.gridWidth,gap:`${e.gapWidth}px`})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList($.value,(r,u)=>(t.openBlock(),t.createElementBlock("div",{key:u,class:t.normalizeClass([t.unref(T)("item"),c.disableDrag?"":t.unref(j)("canDrag")]),"data-span":r.span,"data-index":u,"data-row":r.row,"data-col":r.col,"data-height":r.height,"data-module":r.module,style:t.normalizeStyle([Q(r)]),draggable:!c.disableDrag},[t.renderSlot(e.$slots,"item",{item:r,index:u})],14,ae))),128))],6)]),_:3},8,["spinning"]))}});exports.default=ne;