vue3-columns-resizable/dist/vue3-columns-resizable.umd.js

Vue 3 directive to resize HTML table columns

(function(u,f){typeof exports=="object"&&typeof module<"u"?module.exports=f():typeof define=="function"&&define.amd?define(f):(u=typeof globalThis<"u"?globalThis:u||self,u.Vue3ColumnsResizable=f())})(this,function(){"use strict";const u={mounted(d){var b;const m=d.nodeName;if(!["TABLE","THEAD"].includes(m))return;const o=m==="TABLE"?d:d.parentElement,c=o.querySelector("thead"),i=(c==null?void 0:c.querySelectorAll("th"))||[],w=m==="TABLE"?o.offsetHeight:(c==null?void 0:c.offsetHeight)||0,l=document.createElement("div");o.style.position="relative",l.style.position="relative",l.style.width=`${o.offsetWidth}px`,l.className="vue3-columns-resizable",(b=o.parentElement)==null||b.insertBefore(l,o);let a=!1,r=0;i.forEach((s,t)=>{if(s.style.width=`${s.offsetWidth}px`,t+1>=i.length)return;const n=i[t+1],e=document.createElement("div");e.style.position="absolute",e.style.left=`${n.offsetLeft-4}px`,e.style.top="0",e.style.height=`${w}px`,e.style.width="8px",e.style.cursor="col-resize",e.style.zIndex="1",e.className="columns-resize-bar",e.addEventListener("mousedown",()=>{a=!0,r=t,document.body.style.cursor="col-resize",document.body.style.userSelect="none"}),l.appendChild(e)});const y=l.querySelectorAll(".columns-resize-bar");document.addEventListener("mouseup",()=>{a&&(a=!1,document.body.style.cursor="",document.body.style.userSelect="",y.forEach((s,t)=>{const n=i[t],e=i[t+1];n.style.width=`${n.offsetWidth}px`,e&&(s.style.left=`${e.offsetLeft-4}px`)}))});const p=s=>+s.replace("px",""),x=s=>{if(!a)return;const t=i[r],n=i[r+1],e=y[r],h=s.movementX,v=p(t.style.width)+h,E=p(n.style.width)-h;t.style.width=`${v}px`,n.style.width=`${E}px`,e.style.left=`${n.offsetLeft-4+h}px`,d.dispatchEvent(new CustomEvent("column-resized",{detail:{index:r,width:v,nextIndex:r+1,nextWidth:E},bubbles:!0}))};l.addEventListener("mousemove",x),o.addEventListener("mousemove",x)}};return{install(d){d.directive("columns-resizable",u)}}});