video-split-screen 1.0.23 → 1.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.mjs +165 -155
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),k={1:{type:"1",label:"1分屏",count:1,cols:1,rows:1},2:{type:"2",label:"2分屏",count:2,cols:2,rows:1},3:{type:"3",label:"3分屏",count:3,cols:2,rows:2},4:{type:"4",label:"4分屏",count:4,cols:2,rows:2},6:{type:"6",label:"6分屏",count:6,cols:3,rows:2},7:{type:"7",label:"7分屏",count:7,cols:4,rows:4},8:{type:"8",label:"8分屏",count:8,cols:4,rows:4},9:{type:"9",label:"9分屏",count:9,cols:3,rows:3},10:{type:"10",label:"10分屏",count:10,cols:6,rows:4},13:{type:"13",label:"13分屏",count:13,cols:4,rows:4},16:{type:"16",label:"16分屏",count:16,cols:4,rows:4}},B={};function N(n){if(B[n])return B[n];const o={1:[{col:1,colSpan:1,row:1,rowSpan:1}],2:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1}],3:[{col:1,colSpan:1,row:1,rowSpan:2,isMain:!0},{col:2,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],4:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],6:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1}],7:[{col:1,colSpan:2,row:1,rowSpan:2},{col:3,colSpan:2,row:1,rowSpan:2},{col:1,colSpan:2,row:3,rowSpan:2},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],8:[{col:1,colSpan:3,row:1,rowSpan:3,isMain:!0},{col:4,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],9:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1}],10:[{col:1,colSpan:5,row:1,rowSpan:3,isMain:!0},{col:6,colSpan:1,row:1,rowSpan:1},{col:6,colSpan:1,row:2,rowSpan:1},{col:6,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1},{col:5,colSpan:1,row:4,rowSpan:1},{col:6,colSpan:1,row:4,rowSpan:1}],13:[{col:1,colSpan:2,row:1,rowSpan:2,isMain:!0},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],16:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}]}[n]||[];return o.length>0&&(B[n]=o),o}function L(){return Object.keys(k)}const Y={class:"layout-icon"},j={key:0,viewBox:"0 0 48 48",fill:"none"},H={key:1,viewBox:"0 0 48 48",fill:"none"},W={key:2,viewBox:"0 0 48 48",fill:"none"},q={key:3,viewBox:"0 0 48 48",fill:"none"},J={key:4,viewBox:"0 0 48 48",fill:"none"},K={key:5,viewBox:"0 0 48 48",fill:"none"},Q={key:6,viewBox:"0 0 48 48",fill:"none"},X={key:7,viewBox:"0 0 48 48",fill:"none"},Z={key:8,viewBox:"0 0 54 48",fill:"none"},tt={key:9,viewBox:"0 0 48 48",fill:"none"},et={key:10,viewBox:"0 0 48 48",fill:"none"},ot=t.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(n){return(p,o)=>(t.openBlock(),t.createElementBlock("div",Y,[n.type==="1"?(t.openBlock(),t.createElementBlock("svg",j,[...o[0]||(o[0]=[t.createElementVNode("rect",{x:"4",y:"4",width:"40",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1)])])):n.type==="2"?(t.openBlock(),t.createElementBlock("svg",H,[...o[1]||(o[1]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="3"?(t.openBlock(),t.createElementBlock("svg",W,[...o[2]||(o[2]=[t.createElementVNode("rect",{x:"4",y:"4",width:"20",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1),t.createElementVNode("rect",{x:"26",y:"4",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"26",y:"25",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="4"?(t.openBlock(),t.createElementBlock("svg",q,[...o[3]||(o[3]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"4",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="6"?(t.openBlock(),t.createElementBlock("svg",J,[...o[4]||(o[4]=[t.createStaticVNode('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',6)])])):n.type==="7"?(t.openBlock(),t.createElementBlock("svg",K,[...o[5]||(o[5]=[t.createStaticVNode('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',7)])])):n.type==="8"?(t.openBlock(),t.createElementBlock("svg",Q,[...o[6]||(o[6]=[t.createStaticVNode('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',8)])])):n.type==="9"?(t.openBlock(),t.createElementBlock("svg",X,[...o[7]||(o[7]=[t.createStaticVNode('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',9)])])):n.type==="10"?(t.openBlock(),t.createElementBlock("svg",Z,[...o[8]||(o[8]=[t.createStaticVNode('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',10)])])):n.type==="13"?(t.openBlock(),t.createElementBlock("svg",tt,[...o[9]||(o[9]=[t.createStaticVNode('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',13)])])):n.type==="16"?(t.openBlock(),t.createElementBlock("svg",et,[...o[10]||(o[10]=[t.createStaticVNode('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',16)])])):t.createCommentVNode("",!0)]))}}),D=(n,p)=>{const o=n.__vccOpts||n;for(const[v,s]of p)o[v]=s;return o},E=D(ot,[["__scopeId","data-v-31e0404d"]]),rt={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},at={class:"layout-buttons"},lt=["onClick","title","aria-label","aria-pressed"],ct={class:"layout-label"},nt={class:"video-grid-container",role:"region","aria-label":"视频网格"},it=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],dt={class:"video-placeholder"},st={class:"placeholder-number"},ht=.5,wt="grabbing",ut="0.8",pt=t.defineComponent({__name:"VideoGridLayout",props:{videos:{},layout:{default:"1"},availableLayouts:{},showToolbar:{type:Boolean,default:!0},width:{},height:{},placeholderText:{},placeholders:{}},emits:["layoutChange","videosChange"],setup(n,{emit:p}){const o=n,v=p,s=t.ref(o.layout);t.watch(()=>o.layout,e=>{s.value=e});const I=t.computed(()=>o.availableLayouts&&o.availableLayouts.length>0?o.availableLayouts:L()),w=t.shallowRef([]);function f(e){const r=Array.isArray(e)?e:o.videos||[],l=b.value,a={};w.value.forEach((i,u)=>{i&&i.id!==void 0&&(a[i.id]=i.__labelNumber??u+1)});const c=Array.from({length:l}).map((i,u)=>{const d=r[u];if(d){const U=a[d.id]??d.__labelNumber??u+1;return{...d,__labelNumber:U}}});w.value=c}t.watch(()=>o.videos,e=>{if(!Array.isArray(e)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}f(e)},{flush:"post"});let x=!1;t.watch(w,e=>{!x&&Array.isArray(e)&&v("videosChange",e)});const V=t.computed(()=>{const e=k[s.value];return e||(console.warn(`[VideoGridLayout] Invalid layout type: ${s.value}, fallback to '4'`),k[4])}),m=t.computed(()=>N(s.value)),b=t.computed(()=>{var e;return((e=V.value)==null?void 0:e.count)||4}),C=t.computed(()=>w.value.slice(0,b.value).map(e=>e).filter(Boolean));f(o.videos),t.watch(b,()=>{f(o.videos)}),t.computed(()=>{const e=m.value.map((r,l)=>({p:r,idx:l}));return e.sort((r,l)=>r.p.row===l.p.row?(r.p.col||0)-(l.p.col||0):(r.p.row||0)-(l.p.row||0)),e.map(r=>r.idx)});const h=t.ref(-1),y=t.ref(-1),S=t.shallowRef(null),$=t.computed(()=>{const e=V.value;return{display:"grid",gridTemplateColumns:(e==null?void 0:e.colTemplate)||`repeat(${(e==null?void 0:e.cols)||2}, 1fr)`,gridTemplateRows:(e==null?void 0:e.rowTemplate)||`repeat(${(e==null?void 0:e.rows)||2}, 1fr)`,gap:"4px",width:o.width||"100%",height:o.height||"100%"}}),A=t.computed(()=>({width:o.width||"100%",height:o.height||"100%"}));function G(e){const r=m.value[e];return!r||typeof r.col!="number"||typeof r.row!="number"?{}:{gridColumn:`${r.col} / span ${r.colSpan}`,gridRow:`${r.row} / span ${r.rowSpan}`}}function T(e){const r=m.value[e];return(r==null?void 0:r.isMain)||!1}function O(e){s.value=e,v("layoutChange",s.value)}function g(){if(S.value&&document.body.contains(S.value)){try{document.body.removeChild(S.value)}catch(e){console.warn("[VideoGridLayout] Failed to cleanup drag image:",e)}S.value=null}}function M(e,r){if(r<0||r>=w.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(h.value=r,!e.dataTransfer)return;e.dataTransfer.effectAllowed="move";const a=e.target.closest(".video-item");if(a)try{g();const c=a.cloneNode(!0);c.style.width=`${a.offsetWidth}px`,c.style.height=`${a.offsetHeight}px`,c.style.opacity=ut,c.style.position="absolute",c.style.top="-9999px",c.style.pointerEvents="none",document.body.appendChild(c),S.value=c,e.dataTransfer.setDragImage(c,a.offsetWidth/2,a.offsetHeight/2),setTimeout(()=>{g()},100),a.style.opacity=String(ht),a.style.cursor=wt}catch(c){console.error("[VideoGridLayout] Drag start error:",c),g()}}function R(e,r){e.preventDefault(),e.stopPropagation();const l=h.value;if(l===-1||l===r){h.value=-1;return}if(l>=w.value.length){console.warn("[VideoGridLayout] No video at from index:",l),h.value=-1;return}try{const a=e.currentTarget;a&&(a.style.backgroundColor="rgba(66, 184, 131, 0.3)",a.style.borderColor="#42b883",setTimeout(()=>{a.style.backgroundColor="",a.style.borderColor=""},200));const c=[...w.value];if(r>=c.length){const i=c[l];c.splice(l,1),c.push(i)}else{const i=c[l];c[l]=c[r],c[r]=i}x=!0,w.value=c,setTimeout(()=>{x=!1,v("videosChange",w.value.filter(Boolean))},0)}catch(a){console.error("[VideoGridLayout] Drop error:",a)}finally{h.value=-1}}function P(e,r){e.preventDefault(),h.value!==-1&&h.value!==r&&(y.value=r)}function F(e,r){e.preventDefault();const l=e.target,a=e.relatedTarget;l.contains(a)||y.value===r&&(y.value=-1)}function z(e){const l=e.target.closest(".video-item");l&&(l.style.opacity="1",l.style.cursor="move"),g(),h.value=-1,y.value=-1}return t.onBeforeUnmount(()=>{g()}),(e,r)=>(t.openBlock(),t.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:t.normalizeStyle(A.value)},[n.showToolbar?(t.openBlock(),t.createElementBlock("div",rt,[r[1]||(r[1]=t.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),t.createElementVNode("div",at,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(I.value,l=>{var a,c,i;return t.openBlock(),t.createElementBlock("button",{key:l,class:t.normalizeClass(["layout-btn",{active:s.value===l}]),onClick:u=>O(l),title:((a=t.unref(k)[l])==null?void 0:a.label)||"","aria-label":`切换到${((c=t.unref(k)[l])==null?void 0:c.label)||""}布局`,"aria-pressed":s.value===l,type:"button"},[t.createVNode(E,{type:l},null,8,["type"]),t.createElementVNode("span",ct,t.toDisplayString(((i=t.unref(k)[l])==null?void 0:i.label)||""),1)],10,lt)}),128))])])):t.createCommentVNode("",!0),t.createElementVNode("div",nt,[t.createElementVNode("div",{class:"video-grid",style:t.normalizeStyle($.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(m.value,(l,a)=>{var c,i,u;return t.openBlock(),t.createElementBlock("div",{key:((c=C.value[a])==null?void 0:c.id)??a,class:t.normalizeClass(["video-item",{"main-video":T(a),dragging:h.value===a,"drag-over":y.value===a&&h.value!==a}]),style:t.normalizeStyle(G(a)),draggable:!0,"aria-label":`视频 ${a+1}: ${((i=C.value[a])==null?void 0:i.title)||((u=C.value[a])==null?void 0:u.id)||""}`,role:"article",tabindex:"0",onDragstart:d=>M(d,a),onDragover:r[0]||(r[0]=t.withModifiers(()=>{},["prevent"])),onDragenter:d=>P(d,a),onDragleave:d=>F(d,a),onDrop:d=>R(d,a),onDragend:z},[t.renderSlot(e.$slots,"video",{video:C.value[a],index:a},()=>[t.createElementVNode("div",dt,[t.createElementVNode("div",st,t.toDisplayString(a+1),1)])],!0)],46,it)}),128))],4)])],4))}}),_=D(pt,[["__scopeId","data-v-222ef64d"]]),kt={VideoGridLayout:_,VideoLayoutIcon:E},vt={install(n){Object.entries(kt).forEach(([p,o])=>{n.component(p,o)})}};exports.LAYOUT_CONFIGS=k;exports.VideoGridLayout=_;exports.VideoLayoutIcon=E;exports.default=vt;exports.getAllLayoutTypes=L;exports.getLayoutPositions=N;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),k={1:{type:"1",label:"1分屏",count:1,cols:1,rows:1},2:{type:"2",label:"2分屏",count:2,cols:2,rows:1},3:{type:"3",label:"3分屏",count:3,cols:2,rows:2},4:{type:"4",label:"4分屏",count:4,cols:2,rows:2},6:{type:"6",label:"6分屏",count:6,cols:3,rows:2},7:{type:"7",label:"7分屏",count:7,cols:4,rows:4},8:{type:"8",label:"8分屏",count:8,cols:4,rows:4},9:{type:"9",label:"9分屏",count:9,cols:3,rows:3},10:{type:"10",label:"10分屏",count:10,cols:6,rows:4},13:{type:"13",label:"13分屏",count:13,cols:4,rows:4},16:{type:"16",label:"16分屏",count:16,cols:4,rows:4}},B={};function N(n){if(B[n])return B[n];const a={1:[{col:1,colSpan:1,row:1,rowSpan:1}],2:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1}],3:[{col:1,colSpan:1,row:1,rowSpan:2,isMain:!0},{col:2,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],4:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],6:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1}],7:[{col:1,colSpan:2,row:1,rowSpan:2},{col:3,colSpan:2,row:1,rowSpan:2},{col:1,colSpan:2,row:3,rowSpan:2},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],8:[{col:1,colSpan:3,row:1,rowSpan:3,isMain:!0},{col:4,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],9:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1}],10:[{col:1,colSpan:5,row:1,rowSpan:3,isMain:!0},{col:6,colSpan:1,row:1,rowSpan:1},{col:6,colSpan:1,row:2,rowSpan:1},{col:6,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1},{col:5,colSpan:1,row:4,rowSpan:1},{col:6,colSpan:1,row:4,rowSpan:1}],13:[{col:1,colSpan:2,row:1,rowSpan:2,isMain:!0},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],16:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}]}[n]||[];return a.length>0&&(B[n]=a),a}function L(){return Object.keys(k)}const j={class:"layout-icon"},H={key:0,viewBox:"0 0 48 48",fill:"none"},W={key:1,viewBox:"0 0 48 48",fill:"none"},q={key:2,viewBox:"0 0 48 48",fill:"none"},J={key:3,viewBox:"0 0 48 48",fill:"none"},K={key:4,viewBox:"0 0 48 48",fill:"none"},Q={key:5,viewBox:"0 0 48 48",fill:"none"},X={key:6,viewBox:"0 0 48 48",fill:"none"},Z={key:7,viewBox:"0 0 48 48",fill:"none"},tt={key:8,viewBox:"0 0 54 48",fill:"none"},et={key:9,viewBox:"0 0 48 48",fill:"none"},ot={key:10,viewBox:"0 0 48 48",fill:"none"},rt=t.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(n){return(p,a)=>(t.openBlock(),t.createElementBlock("div",j,[n.type==="1"?(t.openBlock(),t.createElementBlock("svg",H,[...a[0]||(a[0]=[t.createElementVNode("rect",{x:"4",y:"4",width:"40",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1)])])):n.type==="2"?(t.openBlock(),t.createElementBlock("svg",W,[...a[1]||(a[1]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="3"?(t.openBlock(),t.createElementBlock("svg",q,[...a[2]||(a[2]=[t.createElementVNode("rect",{x:"4",y:"4",width:"20",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1),t.createElementVNode("rect",{x:"26",y:"4",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"26",y:"25",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="4"?(t.openBlock(),t.createElementBlock("svg",J,[...a[3]||(a[3]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"4",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="6"?(t.openBlock(),t.createElementBlock("svg",K,[...a[4]||(a[4]=[t.createStaticVNode('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',6)])])):n.type==="7"?(t.openBlock(),t.createElementBlock("svg",Q,[...a[5]||(a[5]=[t.createStaticVNode('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',7)])])):n.type==="8"?(t.openBlock(),t.createElementBlock("svg",X,[...a[6]||(a[6]=[t.createStaticVNode('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',8)])])):n.type==="9"?(t.openBlock(),t.createElementBlock("svg",Z,[...a[7]||(a[7]=[t.createStaticVNode('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',9)])])):n.type==="10"?(t.openBlock(),t.createElementBlock("svg",tt,[...a[8]||(a[8]=[t.createStaticVNode('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',10)])])):n.type==="13"?(t.openBlock(),t.createElementBlock("svg",et,[...a[9]||(a[9]=[t.createStaticVNode('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',13)])])):n.type==="16"?(t.openBlock(),t.createElementBlock("svg",ot,[...a[10]||(a[10]=[t.createStaticVNode('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',16)])])):t.createCommentVNode("",!0)]))}}),D=(n,p)=>{const a=n.__vccOpts||n;for(const[y,h]of p)a[y]=h;return a},E=D(rt,[["__scopeId","data-v-31e0404d"]]),at={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},lt={class:"layout-buttons"},ct=["onClick","title","aria-label","aria-pressed"],nt={class:"layout-label"},it={class:"video-grid-container",role:"region","aria-label":"视频网格"},dt=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],st={class:"video-placeholder"},ht={class:"placeholder-number"},wt=.5,ut="grabbing",pt="0.8",kt=t.defineComponent({__name:"VideoGridLayout",props:{videos:{},layout:{default:"1"},availableLayouts:{},showToolbar:{type:Boolean,default:!0},width:{},height:{},placeholderText:{},placeholders:{}},emits:["layoutChange","videosChange"],setup(n,{emit:p}){const a=n,y=p,h=t.ref(a.layout);t.watch(()=>a.layout,e=>{h.value=e});const _=t.computed(()=>a.availableLayouts&&a.availableLayouts.length>0?a.availableLayouts:L()),s=t.shallowRef([]);function f(e){const r=Array.isArray(e)?e:a.videos||[],l=b.value,o={};s.value.forEach((i,u)=>{i&&i.id!==void 0&&(o[i.id]=i.__labelNumber??u+1)});const c=Array.from({length:l}).map((i,u)=>{const d=r[u];if(d){const Y=o[d.id]??d.__labelNumber??u+1;return{...d,__labelNumber:Y}}});s.value=c}t.watch(()=>a.videos,e=>{if(!Array.isArray(e)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}f(e)},{flush:"post"});let x=!1;t.watch(s,e=>{!x&&Array.isArray(e)&&y("videosChange",e)});const V=t.computed(()=>{const e=k[h.value];return e||(console.warn(`[VideoGridLayout] Invalid layout type: ${h.value}, fallback to '4'`),k[4])}),C=t.computed(()=>N(h.value)),b=t.computed(()=>{var e;return((e=V.value)==null?void 0:e.count)||4}),v=t.computed(()=>s.value.slice(0,b.value).map(e=>e).filter(Boolean));t.computed(()=>{const e={};return v.value.forEach((r,l)=>{const o=s.value.findIndex(c=>c&&c.id===r.id);o!==-1&&(e[l]=o)}),e}),f(a.videos),t.watch(b,()=>{f(a.videos)}),t.computed(()=>{const e=C.value.map((r,l)=>({p:r,idx:l}));return e.sort((r,l)=>r.p.row===l.p.row?(r.p.col||0)-(l.p.col||0):(r.p.row||0)-(l.p.row||0)),e.map(r=>r.idx)});const w=t.ref(-1),S=t.ref(-1),g=t.shallowRef(null),$=t.computed(()=>{const e=V.value;return{display:"grid",gridTemplateColumns:(e==null?void 0:e.colTemplate)||`repeat(${(e==null?void 0:e.cols)||2}, 1fr)`,gridTemplateRows:(e==null?void 0:e.rowTemplate)||`repeat(${(e==null?void 0:e.rows)||2}, 1fr)`,gap:"4px",width:a.width||"100%",height:a.height||"100%"}}),A=t.computed(()=>({width:a.width||"100%",height:a.height||"100%"}));function G(e){const r=v.value[e];return r?s.value.findIndex(o=>o&&o.id===r.id)+1:e+1}function T(e){const r=C.value[e];return!r||typeof r.col!="number"||typeof r.row!="number"?{}:{gridColumn:`${r.col} / span ${r.colSpan}`,gridRow:`${r.row} / span ${r.rowSpan}`}}function O(e){const r=C.value[e];return(r==null?void 0:r.isMain)||!1}function M(e){h.value=e,y("layoutChange",h.value)}function m(){if(g.value&&document.body.contains(g.value)){try{document.body.removeChild(g.value)}catch(e){console.warn("[VideoGridLayout] Failed to cleanup drag image:",e)}g.value=null}}function R(e,r){if(r<0||r>=s.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(w.value=r,!e.dataTransfer)return;e.dataTransfer.effectAllowed="move";const o=e.target.closest(".video-item");if(o)try{m();const c=o.cloneNode(!0);c.style.width=`${o.offsetWidth}px`,c.style.height=`${o.offsetHeight}px`,c.style.opacity=pt,c.style.position="absolute",c.style.top="-9999px",c.style.pointerEvents="none",document.body.appendChild(c),g.value=c,e.dataTransfer.setDragImage(c,o.offsetWidth/2,o.offsetHeight/2),setTimeout(()=>{m()},100),o.style.opacity=String(wt),o.style.cursor=ut}catch(c){console.error("[VideoGridLayout] Drag start error:",c),m()}}function P(e,r){e.preventDefault(),e.stopPropagation();const l=w.value;if(l===-1||l===r){w.value=-1;return}if(l>=s.value.length){console.warn("[VideoGridLayout] No video at from index:",l),w.value=-1;return}try{const o=e.currentTarget;o&&(o.style.backgroundColor="rgba(66, 184, 131, 0.3)",o.style.borderColor="#42b883",setTimeout(()=>{o.style.backgroundColor="",o.style.borderColor=""},200));const c=[...s.value];if(r>=c.length){const i=c[l];c.splice(l,1),c.push(i)}else{const i=c[l];c[l]=c[r],c[r]=i}x=!0,s.value=c,setTimeout(()=>{x=!1,y("videosChange",s.value.filter(Boolean))},0)}catch(o){console.error("[VideoGridLayout] Drop error:",o)}finally{w.value=-1}}function F(e,r){e.preventDefault(),w.value!==-1&&w.value!==r&&(S.value=r)}function z(e,r){e.preventDefault();const l=e.target,o=e.relatedTarget;l.contains(o)||S.value===r&&(S.value=-1)}function U(e){const l=e.target.closest(".video-item");l&&(l.style.opacity="1",l.style.cursor="move"),m(),w.value=-1,S.value=-1}return t.onBeforeUnmount(()=>{m()}),(e,r)=>(t.openBlock(),t.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:t.normalizeStyle(A.value)},[n.showToolbar?(t.openBlock(),t.createElementBlock("div",at,[r[1]||(r[1]=t.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),t.createElementVNode("div",lt,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(_.value,l=>{var o,c,i;return t.openBlock(),t.createElementBlock("button",{key:l,class:t.normalizeClass(["layout-btn",{active:h.value===l}]),onClick:u=>M(l),title:((o=t.unref(k)[l])==null?void 0:o.label)||"","aria-label":`切换到${((c=t.unref(k)[l])==null?void 0:c.label)||""}布局`,"aria-pressed":h.value===l,type:"button"},[t.createVNode(E,{type:l},null,8,["type"]),t.createElementVNode("span",nt,t.toDisplayString(((i=t.unref(k)[l])==null?void 0:i.label)||""),1)],10,ct)}),128))])])):t.createCommentVNode("",!0),t.createElementVNode("div",it,[t.createElementVNode("div",{class:"video-grid",style:t.normalizeStyle($.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(C.value,(l,o)=>{var c,i,u;return t.openBlock(),t.createElementBlock("div",{key:((c=v.value[o])==null?void 0:c.id)??o,class:t.normalizeClass(["video-item",{"main-video":O(o),dragging:w.value===o,"drag-over":S.value===o&&w.value!==o}]),style:t.normalizeStyle(T(o)),draggable:!0,"aria-label":`视频 ${o+1}: ${((i=v.value[o])==null?void 0:i.title)||((u=v.value[o])==null?void 0:u.id)||""}`,role:"article",tabindex:"0",onDragstart:d=>R(d,o),onDragover:r[0]||(r[0]=t.withModifiers(()=>{},["prevent"])),onDragenter:d=>F(d,o),onDragleave:d=>z(d,o),onDrop:d=>P(d,o),onDragend:U},[t.renderSlot(e.$slots,"video",{video:v.value[o],index:o},()=>[t.createElementVNode("div",st,[t.createElementVNode("div",ht,t.toDisplayString(G(o)),1)])],!0)],46,dt)}),128))],4)])],4))}}),I=D(kt,[["__scopeId","data-v-df2d4d67"]]),vt={VideoGridLayout:I,VideoLayoutIcon:E},yt={install(n){Object.entries(vt).forEach(([p,a])=>{n.component(p,a)})}};exports.LAYOUT_CONFIGS=k;exports.VideoGridLayout=I;exports.VideoLayoutIcon=E;exports.default=yt;exports.getAllLayoutTypes=L;exports.getLayoutPositions=N;
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { defineComponent as P, createElementBlock as c, openBlock as i, createCommentVNode as F, createElementVNode as d, createStaticVNode as g, ref as B, watch as L, computed as y, shallowRef as T, onBeforeUnmount as et, normalizeStyle as V, Fragment as E, renderList as O, unref as A, normalizeClass as M, createVNode as rt, toDisplayString as R, withModifiers as at, renderSlot as lt } from "vue";
2
- const S = {
1
+ import { defineComponent as P, createElementBlock as c, openBlock as i, createCommentVNode as F, createElementVNode as d, createStaticVNode as g, ref as B, watch as I, computed as v, shallowRef as E, onBeforeUnmount as rt, normalizeStyle as V, Fragment as T, renderList as O, unref as A, normalizeClass as M, createVNode as at, toDisplayString as R, withModifiers as lt, renderSlot as nt } from "vue";
2
+ const C = {
3
3
  1: {
4
4
  type: "1",
5
5
  label: "1分屏",
@@ -78,10 +78,10 @@ const S = {
78
78
  rows: 4
79
79
  }
80
80
  }, G = {};
81
- function nt(n) {
81
+ function ct(n) {
82
82
  if (G[n])
83
83
  return G[n];
84
- const o = {
84
+ const r = {
85
85
  1: [
86
86
  { col: 1, colSpan: 1, row: 1, rowSpan: 1 }
87
87
  ],
@@ -184,63 +184,63 @@ function nt(n) {
184
184
  { col: 4, colSpan: 1, row: 4, rowSpan: 1 }
185
185
  ]
186
186
  }[n] || [];
187
- return o.length > 0 && (G[n] = o), o;
187
+ return r.length > 0 && (G[n] = r), r;
188
188
  }
189
- function ct() {
190
- return Object.keys(S);
189
+ function it() {
190
+ return Object.keys(C);
191
191
  }
192
- const it = { class: "layout-icon" }, dt = {
192
+ const dt = { class: "layout-icon" }, st = {
193
193
  key: 0,
194
194
  viewBox: "0 0 48 48",
195
195
  fill: "none"
196
- }, st = {
196
+ }, ht = {
197
197
  key: 1,
198
198
  viewBox: "0 0 48 48",
199
199
  fill: "none"
200
- }, ht = {
200
+ }, wt = {
201
201
  key: 2,
202
202
  viewBox: "0 0 48 48",
203
203
  fill: "none"
204
- }, wt = {
204
+ }, ut = {
205
205
  key: 3,
206
206
  viewBox: "0 0 48 48",
207
207
  fill: "none"
208
- }, ut = {
208
+ }, pt = {
209
209
  key: 4,
210
210
  viewBox: "0 0 48 48",
211
211
  fill: "none"
212
- }, pt = {
212
+ }, vt = {
213
213
  key: 5,
214
214
  viewBox: "0 0 48 48",
215
215
  fill: "none"
216
- }, vt = {
216
+ }, yt = {
217
217
  key: 6,
218
218
  viewBox: "0 0 48 48",
219
219
  fill: "none"
220
- }, yt = {
220
+ }, kt = {
221
221
  key: 7,
222
222
  viewBox: "0 0 48 48",
223
223
  fill: "none"
224
- }, kt = {
224
+ }, gt = {
225
225
  key: 8,
226
226
  viewBox: "0 0 54 48",
227
227
  fill: "none"
228
- }, gt = {
228
+ }, St = {
229
229
  key: 9,
230
230
  viewBox: "0 0 48 48",
231
231
  fill: "none"
232
- }, St = {
232
+ }, Ct = {
233
233
  key: 10,
234
234
  viewBox: "0 0 48 48",
235
235
  fill: "none"
236
- }, Ct = /* @__PURE__ */ P({
236
+ }, ft = /* @__PURE__ */ P({
237
237
  __name: "VideoLayoutIcon",
238
238
  props: {
239
239
  type: {}
240
240
  },
241
241
  setup(n) {
242
- return (k, o) => (i(), c("div", it, [
243
- n.type === "1" ? (i(), c("svg", dt, [...o[0] || (o[0] = [
242
+ return (k, r) => (i(), c("div", dt, [
243
+ n.type === "1" ? (i(), c("svg", st, [...r[0] || (r[0] = [
244
244
  d("rect", {
245
245
  x: "4",
246
246
  y: "4",
@@ -249,7 +249,7 @@ const it = { class: "layout-icon" }, dt = {
249
249
  stroke: "currentColor",
250
250
  "stroke-width": "2"
251
251
  }, null, -1)
252
- ])])) : n.type === "2" ? (i(), c("svg", st, [...o[1] || (o[1] = [
252
+ ])])) : n.type === "2" ? (i(), c("svg", ht, [...r[1] || (r[1] = [
253
253
  d("rect", {
254
254
  x: "4",
255
255
  y: "4",
@@ -266,7 +266,7 @@ const it = { class: "layout-icon" }, dt = {
266
266
  stroke: "currentColor",
267
267
  "stroke-width": "1.5"
268
268
  }, null, -1)
269
- ])])) : n.type === "3" ? (i(), c("svg", ht, [...o[2] || (o[2] = [
269
+ ])])) : n.type === "3" ? (i(), c("svg", wt, [...r[2] || (r[2] = [
270
270
  d("rect", {
271
271
  x: "4",
272
272
  y: "4",
@@ -291,7 +291,7 @@ const it = { class: "layout-icon" }, dt = {
291
291
  stroke: "currentColor",
292
292
  "stroke-width": "1.5"
293
293
  }, null, -1)
294
- ])])) : n.type === "4" ? (i(), c("svg", wt, [...o[3] || (o[3] = [
294
+ ])])) : n.type === "4" ? (i(), c("svg", ut, [...r[3] || (r[3] = [
295
295
  d("rect", {
296
296
  x: "4",
297
297
  y: "4",
@@ -324,38 +324,38 @@ const it = { class: "layout-icon" }, dt = {
324
324
  stroke: "currentColor",
325
325
  "stroke-width": "1.5"
326
326
  }, null, -1)
327
- ])])) : n.type === "6" ? (i(), c("svg", ut, [...o[4] || (o[4] = [
327
+ ])])) : n.type === "6" ? (i(), c("svg", pt, [...r[4] || (r[4] = [
328
328
  g('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>', 6)
329
- ])])) : n.type === "7" ? (i(), c("svg", pt, [...o[5] || (o[5] = [
329
+ ])])) : n.type === "7" ? (i(), c("svg", vt, [...r[5] || (r[5] = [
330
330
  g('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 7)
331
- ])])) : n.type === "8" ? (i(), c("svg", vt, [...o[6] || (o[6] = [
331
+ ])])) : n.type === "8" ? (i(), c("svg", yt, [...r[6] || (r[6] = [
332
332
  g('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 8)
333
- ])])) : n.type === "9" ? (i(), c("svg", yt, [...o[7] || (o[7] = [
333
+ ])])) : n.type === "9" ? (i(), c("svg", kt, [...r[7] || (r[7] = [
334
334
  g('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>', 9)
335
- ])])) : n.type === "10" ? (i(), c("svg", kt, [...o[8] || (o[8] = [
335
+ ])])) : n.type === "10" ? (i(), c("svg", gt, [...r[8] || (r[8] = [
336
336
  g('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 10)
337
- ])])) : n.type === "13" ? (i(), c("svg", gt, [...o[9] || (o[9] = [
337
+ ])])) : n.type === "13" ? (i(), c("svg", St, [...r[9] || (r[9] = [
338
338
  g('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 13)
339
- ])])) : n.type === "16" ? (i(), c("svg", St, [...o[10] || (o[10] = [
339
+ ])])) : n.type === "16" ? (i(), c("svg", Ct, [...r[10] || (r[10] = [
340
340
  g('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 16)
341
341
  ])])) : F("", !0)
342
342
  ]));
343
343
  }
344
344
  }), U = (n, k) => {
345
- const o = n.__vccOpts || n;
346
- for (const [C, w] of k)
347
- o[C] = w;
348
- return o;
349
- }, Y = /* @__PURE__ */ U(Ct, [["__scopeId", "data-v-31e0404d"]]), ft = {
345
+ const r = n.__vccOpts || n;
346
+ for (const [f, u] of k)
347
+ r[f] = u;
348
+ return r;
349
+ }, Y = /* @__PURE__ */ U(ft, [["__scopeId", "data-v-31e0404d"]]), xt = {
350
350
  key: 0,
351
351
  class: "layout-toolbar",
352
352
  role: "toolbar",
353
353
  "aria-label": "布局切换工具栏"
354
- }, xt = { class: "layout-buttons" }, mt = ["onClick", "title", "aria-label", "aria-pressed"], bt = { class: "layout-label" }, Dt = {
354
+ }, mt = { class: "layout-buttons" }, bt = ["onClick", "title", "aria-label", "aria-pressed"], Dt = { class: "layout-label" }, It = {
355
355
  class: "video-grid-container",
356
356
  role: "region",
357
357
  "aria-label": "视频网格"
358
- }, Lt = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], _t = { class: "video-placeholder" }, $t = { class: "placeholder-number" }, It = 0.5, Bt = "grabbing", Vt = "0.8", At = /* @__PURE__ */ P({
358
+ }, Lt = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], _t = { class: "video-placeholder" }, $t = { class: "placeholder-number" }, Bt = 0.5, Vt = "grabbing", At = "0.8", Gt = /* @__PURE__ */ P({
359
359
  __name: "VideoGridLayout",
360
360
  props: {
361
361
  videos: {},
@@ -369,123 +369,133 @@ const it = { class: "layout-icon" }, dt = {
369
369
  },
370
370
  emits: ["layoutChange", "videosChange"],
371
371
  setup(n, { emit: k }) {
372
- const o = n, C = k, w = B(o.layout);
373
- L(() => o.layout, (t) => {
374
- w.value = t;
372
+ const r = n, f = k, u = B(r.layout);
373
+ I(() => r.layout, (t) => {
374
+ u.value = t;
375
375
  });
376
- const j = y(() => o.availableLayouts && o.availableLayouts.length > 0 ? o.availableLayouts : ct()), p = T([]);
377
- function _(t) {
378
- const e = Array.isArray(t) ? t : o.videos || [], a = I.value, r = {};
379
- p.value.forEach((s, v) => {
380
- s && s.id !== void 0 && (r[s.id] = s.__labelNumber ?? v + 1);
376
+ const j = v(() => r.availableLayouts && r.availableLayouts.length > 0 ? r.availableLayouts : it()), w = E([]);
377
+ function L(t) {
378
+ const e = Array.isArray(t) ? t : r.videos || [], a = $.value, o = {};
379
+ w.value.forEach((s, y) => {
380
+ s && s.id !== void 0 && (o[s.id] = s.__labelNumber ?? y + 1);
381
381
  });
382
- const l = Array.from({ length: a }).map((s, v) => {
383
- const h = e[v];
382
+ const l = Array.from({ length: a }).map((s, y) => {
383
+ const h = e[y];
384
384
  if (h) {
385
- const ot = r[h.id] ?? h.__labelNumber ?? v + 1;
386
- return { ...h, __labelNumber: ot };
385
+ const et = o[h.id] ?? h.__labelNumber ?? y + 1;
386
+ return { ...h, __labelNumber: et };
387
387
  }
388
388
  });
389
- p.value = l;
389
+ w.value = l;
390
390
  }
391
- L(() => o.videos, (t) => {
391
+ I(() => r.videos, (t) => {
392
392
  if (!Array.isArray(t)) {
393
393
  console.warn("[VideoGridLayout] Invalid videos prop, expected array");
394
394
  return;
395
395
  }
396
- _(t);
396
+ L(t);
397
397
  }, { flush: "post" });
398
- let $ = !1;
399
- L(p, (t) => {
400
- !$ && Array.isArray(t) && C("videosChange", t);
398
+ let _ = !1;
399
+ I(w, (t) => {
400
+ !_ && Array.isArray(t) && f("videosChange", t);
401
401
  });
402
- const N = y(() => {
403
- const t = S[w.value];
404
- return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${w.value}, fallback to '4'`), S[4]);
405
- }), b = y(() => nt(w.value)), I = y(() => {
402
+ const N = v(() => {
403
+ const t = C[u.value];
404
+ return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${u.value}, fallback to '4'`), C[4]);
405
+ }), D = v(() => ct(u.value)), $ = v(() => {
406
406
  var t;
407
407
  return ((t = N.value) == null ? void 0 : t.count) || 4;
408
- }), D = y(() => p.value.slice(0, I.value).map((t) => t).filter(Boolean));
409
- _(o.videos), L(I, () => {
410
- _(o.videos);
411
- }), y(() => {
412
- const t = b.value.map((e, a) => ({ p: e, idx: a }));
408
+ }), S = v(() => w.value.slice(0, $.value).map((t) => t).filter(Boolean));
409
+ v(() => {
410
+ const t = {};
411
+ return S.value.forEach((e, a) => {
412
+ const o = w.value.findIndex((l) => l && l.id === e.id);
413
+ o !== -1 && (t[a] = o);
414
+ }), t;
415
+ }), L(r.videos), I($, () => {
416
+ L(r.videos);
417
+ }), v(() => {
418
+ const t = D.value.map((e, a) => ({ p: e, idx: a }));
413
419
  return t.sort((e, a) => e.p.row === a.p.row ? (e.p.col || 0) - (a.p.col || 0) : (e.p.row || 0) - (a.p.row || 0)), t.map((e) => e.idx);
414
420
  });
415
- const u = B(-1), f = B(-1), x = T(null), z = y(() => {
421
+ const p = B(-1), x = B(-1), m = E(null), z = v(() => {
416
422
  const t = N.value;
417
423
  return {
418
424
  display: "grid",
419
425
  gridTemplateColumns: (t == null ? void 0 : t.colTemplate) || `repeat(${(t == null ? void 0 : t.cols) || 2}, 1fr)`,
420
426
  gridTemplateRows: (t == null ? void 0 : t.rowTemplate) || `repeat(${(t == null ? void 0 : t.rows) || 2}, 1fr)`,
421
427
  gap: "4px",
422
- width: o.width || "100%",
423
- height: o.height || "100%"
428
+ width: r.width || "100%",
429
+ height: r.height || "100%"
424
430
  };
425
- }), H = y(() => ({
426
- width: o.width || "100%",
427
- height: o.height || "100%"
431
+ }), H = v(() => ({
432
+ width: r.width || "100%",
433
+ height: r.height || "100%"
428
434
  }));
429
435
  function W(t) {
430
- const e = b.value[t];
436
+ const e = S.value[t];
437
+ return e ? w.value.findIndex((o) => o && o.id === e.id) + 1 : t + 1;
438
+ }
439
+ function q(t) {
440
+ const e = D.value[t];
431
441
  return !e || typeof e.col != "number" || typeof e.row != "number" ? {} : {
432
442
  gridColumn: `${e.col} / span ${e.colSpan}`,
433
443
  gridRow: `${e.row} / span ${e.rowSpan}`
434
444
  };
435
445
  }
436
- function q(t) {
437
- const e = b.value[t];
446
+ function J(t) {
447
+ const e = D.value[t];
438
448
  return (e == null ? void 0 : e.isMain) || !1;
439
449
  }
440
- function J(t) {
441
- w.value = t, C("layoutChange", w.value);
450
+ function K(t) {
451
+ u.value = t, f("layoutChange", u.value);
442
452
  }
443
- function m() {
444
- if (x.value && document.body.contains(x.value)) {
453
+ function b() {
454
+ if (m.value && document.body.contains(m.value)) {
445
455
  try {
446
- document.body.removeChild(x.value);
456
+ document.body.removeChild(m.value);
447
457
  } catch (t) {
448
458
  console.warn("[VideoGridLayout] Failed to cleanup drag image:", t);
449
459
  }
450
- x.value = null;
460
+ m.value = null;
451
461
  }
452
462
  }
453
- function K(t, e) {
454
- if (e < 0 || e >= p.value.length) {
463
+ function Q(t, e) {
464
+ if (e < 0 || e >= w.value.length) {
455
465
  console.warn("[VideoGridLayout] Invalid drag index:", e);
456
466
  return;
457
467
  }
458
- if (u.value = e, !t.dataTransfer) return;
468
+ if (p.value = e, !t.dataTransfer) return;
459
469
  t.dataTransfer.effectAllowed = "move";
460
- const r = t.target.closest(".video-item");
461
- if (r)
470
+ const o = t.target.closest(".video-item");
471
+ if (o)
462
472
  try {
463
- m();
464
- const l = r.cloneNode(!0);
465
- l.style.width = `${r.offsetWidth}px`, l.style.height = `${r.offsetHeight}px`, l.style.opacity = Vt, l.style.position = "absolute", l.style.top = "-9999px", l.style.pointerEvents = "none", document.body.appendChild(l), x.value = l, t.dataTransfer.setDragImage(l, r.offsetWidth / 2, r.offsetHeight / 2), setTimeout(() => {
466
- m();
467
- }, 100), r.style.opacity = String(It), r.style.cursor = Bt;
473
+ b();
474
+ const l = o.cloneNode(!0);
475
+ l.style.width = `${o.offsetWidth}px`, l.style.height = `${o.offsetHeight}px`, l.style.opacity = At, l.style.position = "absolute", l.style.top = "-9999px", l.style.pointerEvents = "none", document.body.appendChild(l), m.value = l, t.dataTransfer.setDragImage(l, o.offsetWidth / 2, o.offsetHeight / 2), setTimeout(() => {
476
+ b();
477
+ }, 100), o.style.opacity = String(Bt), o.style.cursor = Vt;
468
478
  } catch (l) {
469
- console.error("[VideoGridLayout] Drag start error:", l), m();
479
+ console.error("[VideoGridLayout] Drag start error:", l), b();
470
480
  }
471
481
  }
472
- function Q(t, e) {
482
+ function X(t, e) {
473
483
  t.preventDefault(), t.stopPropagation();
474
- const a = u.value;
484
+ const a = p.value;
475
485
  if (a === -1 || a === e) {
476
- u.value = -1;
486
+ p.value = -1;
477
487
  return;
478
488
  }
479
- if (a >= p.value.length) {
480
- console.warn("[VideoGridLayout] No video at from index:", a), u.value = -1;
489
+ if (a >= w.value.length) {
490
+ console.warn("[VideoGridLayout] No video at from index:", a), p.value = -1;
481
491
  return;
482
492
  }
483
493
  try {
484
- const r = t.currentTarget;
485
- r && (r.style.backgroundColor = "rgba(66, 184, 131, 0.3)", r.style.borderColor = "#42b883", setTimeout(() => {
486
- r.style.backgroundColor = "", r.style.borderColor = "";
494
+ const o = t.currentTarget;
495
+ o && (o.style.backgroundColor = "rgba(66, 184, 131, 0.3)", o.style.borderColor = "#42b883", setTimeout(() => {
496
+ o.style.backgroundColor = "", o.style.borderColor = "";
487
497
  }, 200));
488
- const l = [...p.value];
498
+ const l = [...w.value];
489
499
  if (e >= l.length) {
490
500
  const s = l[a];
491
501
  l.splice(a, 1), l.push(s);
@@ -493,88 +503,88 @@ const it = { class: "layout-icon" }, dt = {
493
503
  const s = l[a];
494
504
  l[a] = l[e], l[e] = s;
495
505
  }
496
- $ = !0, p.value = l, setTimeout(() => {
497
- $ = !1, C("videosChange", p.value.filter(Boolean));
506
+ _ = !0, w.value = l, setTimeout(() => {
507
+ _ = !1, f("videosChange", w.value.filter(Boolean));
498
508
  }, 0);
499
- } catch (r) {
500
- console.error("[VideoGridLayout] Drop error:", r);
509
+ } catch (o) {
510
+ console.error("[VideoGridLayout] Drop error:", o);
501
511
  } finally {
502
- u.value = -1;
512
+ p.value = -1;
503
513
  }
504
514
  }
505
- function X(t, e) {
506
- t.preventDefault(), u.value !== -1 && u.value !== e && (f.value = e);
507
- }
508
515
  function Z(t, e) {
516
+ t.preventDefault(), p.value !== -1 && p.value !== e && (x.value = e);
517
+ }
518
+ function tt(t, e) {
509
519
  t.preventDefault();
510
- const a = t.target, r = t.relatedTarget;
511
- a.contains(r) || f.value === e && (f.value = -1);
520
+ const a = t.target, o = t.relatedTarget;
521
+ a.contains(o) || x.value === e && (x.value = -1);
512
522
  }
513
- function tt(t) {
523
+ function ot(t) {
514
524
  const a = t.target.closest(".video-item");
515
- a && (a.style.opacity = "1", a.style.cursor = "move"), m(), u.value = -1, f.value = -1;
525
+ a && (a.style.opacity = "1", a.style.cursor = "move"), b(), p.value = -1, x.value = -1;
516
526
  }
517
- return et(() => {
518
- m();
527
+ return rt(() => {
528
+ b();
519
529
  }), (t, e) => (i(), c("div", {
520
530
  class: "video-grid-layout",
521
531
  role: "application",
522
532
  "aria-label": "视频分屏布局",
523
533
  style: V(H.value)
524
534
  }, [
525
- n.showToolbar ? (i(), c("div", ft, [
535
+ n.showToolbar ? (i(), c("div", xt, [
526
536
  e[1] || (e[1] = d("div", { class: "toolbar-title" }, "分屏布局", -1)),
527
- d("div", xt, [
528
- (i(!0), c(E, null, O(j.value, (a) => {
529
- var r, l, s;
537
+ d("div", mt, [
538
+ (i(!0), c(T, null, O(j.value, (a) => {
539
+ var o, l, s;
530
540
  return i(), c("button", {
531
541
  key: a,
532
- class: M(["layout-btn", { active: w.value === a }]),
533
- onClick: (v) => J(a),
534
- title: ((r = A(S)[a]) == null ? void 0 : r.label) || "",
535
- "aria-label": `切换到${((l = A(S)[a]) == null ? void 0 : l.label) || ""}布局`,
536
- "aria-pressed": w.value === a,
542
+ class: M(["layout-btn", { active: u.value === a }]),
543
+ onClick: (y) => K(a),
544
+ title: ((o = A(C)[a]) == null ? void 0 : o.label) || "",
545
+ "aria-label": `切换到${((l = A(C)[a]) == null ? void 0 : l.label) || ""}布局`,
546
+ "aria-pressed": u.value === a,
537
547
  type: "button"
538
548
  }, [
539
- rt(Y, { type: a }, null, 8, ["type"]),
540
- d("span", bt, R(((s = A(S)[a]) == null ? void 0 : s.label) || ""), 1)
541
- ], 10, mt);
549
+ at(Y, { type: a }, null, 8, ["type"]),
550
+ d("span", Dt, R(((s = A(C)[a]) == null ? void 0 : s.label) || ""), 1)
551
+ ], 10, bt);
542
552
  }), 128))
543
553
  ])
544
554
  ])) : F("", !0),
545
- d("div", Dt, [
555
+ d("div", It, [
546
556
  d("div", {
547
557
  class: "video-grid",
548
558
  style: V(z.value)
549
559
  }, [
550
- (i(!0), c(E, null, O(b.value, (a, r) => {
551
- var l, s, v;
560
+ (i(!0), c(T, null, O(D.value, (a, o) => {
561
+ var l, s, y;
552
562
  return i(), c("div", {
553
- key: ((l = D.value[r]) == null ? void 0 : l.id) ?? r,
563
+ key: ((l = S.value[o]) == null ? void 0 : l.id) ?? o,
554
564
  class: M(["video-item", {
555
- "main-video": q(r),
556
- dragging: u.value === r,
557
- "drag-over": f.value === r && u.value !== r
565
+ "main-video": J(o),
566
+ dragging: p.value === o,
567
+ "drag-over": x.value === o && p.value !== o
558
568
  }]),
559
- style: V(W(r)),
569
+ style: V(q(o)),
560
570
  draggable: !0,
561
- "aria-label": `视频 ${r + 1}: ${((s = D.value[r]) == null ? void 0 : s.title) || ((v = D.value[r]) == null ? void 0 : v.id) || ""}`,
571
+ "aria-label": `视频 ${o + 1}: ${((s = S.value[o]) == null ? void 0 : s.title) || ((y = S.value[o]) == null ? void 0 : y.id) || ""}`,
562
572
  role: "article",
563
573
  tabindex: "0",
564
- onDragstart: (h) => K(h, r),
565
- onDragover: e[0] || (e[0] = at(() => {
574
+ onDragstart: (h) => Q(h, o),
575
+ onDragover: e[0] || (e[0] = lt(() => {
566
576
  }, ["prevent"])),
567
- onDragenter: (h) => X(h, r),
568
- onDragleave: (h) => Z(h, r),
569
- onDrop: (h) => Q(h, r),
570
- onDragend: tt
577
+ onDragenter: (h) => Z(h, o),
578
+ onDragleave: (h) => tt(h, o),
579
+ onDrop: (h) => X(h, o),
580
+ onDragend: ot
571
581
  }, [
572
- lt(t.$slots, "video", {
573
- video: D.value[r],
574
- index: r
582
+ nt(t.$slots, "video", {
583
+ video: S.value[o],
584
+ index: o
575
585
  }, () => [
576
586
  d("div", _t, [
577
- d("div", $t, R(r + 1), 1)
587
+ d("div", $t, R(W(o)), 1)
578
588
  ])
579
589
  ], !0)
580
590
  ], 46, Lt);
@@ -583,21 +593,21 @@ const it = { class: "layout-icon" }, dt = {
583
593
  ])
584
594
  ], 4));
585
595
  }
586
- }), Gt = /* @__PURE__ */ U(At, [["__scopeId", "data-v-222ef64d"]]), Nt = {
587
- VideoGridLayout: Gt,
596
+ }), Nt = /* @__PURE__ */ U(Gt, [["__scopeId", "data-v-df2d4d67"]]), Et = {
597
+ VideoGridLayout: Nt,
588
598
  VideoLayoutIcon: Y
589
- }, Et = {
599
+ }, Ot = {
590
600
  install(n) {
591
- Object.entries(Nt).forEach(([k, o]) => {
592
- n.component(k, o);
601
+ Object.entries(Et).forEach(([k, r]) => {
602
+ n.component(k, r);
593
603
  });
594
604
  }
595
605
  };
596
606
  export {
597
- S as LAYOUT_CONFIGS,
598
- Gt as VideoGridLayout,
607
+ C as LAYOUT_CONFIGS,
608
+ Nt as VideoGridLayout,
599
609
  Y as VideoLayoutIcon,
600
- Et as default,
601
- ct as getAllLayoutTypes,
602
- nt as getLayoutPositions
610
+ Ot as default,
611
+ it as getAllLayoutTypes,
612
+ ct as getLayoutPositions
603
613
  };
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .layout-icon[data-v-31e0404d]{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.layout-icon svg[data-v-31e0404d]{width:100%;height:100%}.video-grid-layout[data-v-222ef64d]{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar[data-v-222ef64d]{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title[data-v-222ef64d]{font-size:14px;font-weight:600;color:#333}.layout-buttons[data-v-222ef64d]{display:flex;gap:8px;flex-wrap:wrap}.layout-btn[data-v-222ef64d]{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #d0d0d0;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:12px;color:#666}.layout-btn[data-v-222ef64d]:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active[data-v-222ef64d]{border-color:#42b883;background:#42b883;color:#fff}.layout-label[data-v-222ef64d]{font-size:12px}.video-grid-container[data-v-222ef64d]{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;box-sizing:border-box}.video-grid[data-v-222ef64d]{width:100%;height:100%;max-width:100%;max-height:100%;background:#00409f33;padding:4px;border-radius:4px;box-sizing:border-box}.video-item[data-v-222ef64d]{position:relative;background:#00152999;border:2px solid rgba(0,64,159,.49);border-radius:4px;overflow:hidden;cursor:move;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;min-height:0;min-width:0;-webkit-user-select:none;user-select:none;-webkit-user-drag:element;will-change:transform}.video-item.dragging[data-v-222ef64d]{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.video-item[data-v-222ef64d]:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over[data-v-222ef64d]{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item[data-v-222ef64d]:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video[data-v-222ef64d]{border-width:1px}.video-item[data-v-222ef64d]>*{width:100%;height:100%}.video-placeholder[data-v-222ef64d]{display:flex;align-items:center;justify-content:center;height:100%;color:#3de6ff80;-webkit-user-select:none;user-select:none;background:#00409f4d}.placeholder-number[data-v-222ef64d]{font-size:48px;font-weight:700;color:#3de6ff99;text-shadow:0 0 10px rgba(61,230,255,.3)}@media (max-width: 768px){.layout-toolbar[data-v-222ef64d]{flex-direction:column;align-items:flex-start}.layout-label[data-v-222ef64d]{display:none}}
1
+ .layout-icon[data-v-31e0404d]{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.layout-icon svg[data-v-31e0404d]{width:100%;height:100%}.video-grid-layout[data-v-df2d4d67]{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar[data-v-df2d4d67]{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title[data-v-df2d4d67]{font-size:14px;font-weight:600;color:#333}.layout-buttons[data-v-df2d4d67]{display:flex;gap:8px;flex-wrap:wrap}.layout-btn[data-v-df2d4d67]{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #d0d0d0;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:12px;color:#666}.layout-btn[data-v-df2d4d67]:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active[data-v-df2d4d67]{border-color:#42b883;background:#42b883;color:#fff}.layout-label[data-v-df2d4d67]{font-size:12px}.video-grid-container[data-v-df2d4d67]{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;box-sizing:border-box}.video-grid[data-v-df2d4d67]{width:100%;height:100%;max-width:100%;max-height:100%;background:#00409f33;padding:4px;border-radius:4px;box-sizing:border-box}.video-item[data-v-df2d4d67]{position:relative;background:#00152999;border:2px solid rgba(0,64,159,.49);border-radius:4px;overflow:hidden;cursor:move;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;min-height:0;min-width:0;-webkit-user-select:none;user-select:none;-webkit-user-drag:element;will-change:transform}.video-item.dragging[data-v-df2d4d67]{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.video-item[data-v-df2d4d67]:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over[data-v-df2d4d67]{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item[data-v-df2d4d67]:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video[data-v-df2d4d67]{border-width:1px}.video-item[data-v-df2d4d67]>*{width:100%;height:100%}.video-placeholder[data-v-df2d4d67]{display:flex;align-items:center;justify-content:center;height:100%;color:#3de6ff80;-webkit-user-select:none;user-select:none;background:#00409f4d}.placeholder-number[data-v-df2d4d67]{font-size:48px;font-weight:700;color:#3de6ff99;text-shadow:0 0 10px rgba(61,230,255,.3)}@media (max-width: 768px){.layout-toolbar[data-v-df2d4d67]{flex-direction:column;align-items:flex-start}.layout-label[data-v-df2d4d67]{display:none}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "video-split-screen",
3
- "version": "1.0.23",
3
+ "version": "1.0.25",
4
4
  "description": "Vue 3 视频分屏组件（VideoSplitScreen）",
5
5
  "keywords": [
6
6
  "vue",