vue3-columns-resizable
Version:
Vue 3 directive to resize HTML table columns
2 lines (1 loc) • 2.54 kB
JavaScript
(function(d,f){typeof exports=="object"&&typeof module<"u"?module.exports=f():typeof define=="function"&&define.amd?define(f):(d=typeof globalThis<"u"?globalThis:d||self,d.Vue3ColumnsResizable=f())})(this,(function(){"use strict";const d=new WeakMap;function f(n){if(typeof document>"u")return;const i=n.nodeName;if(!["TABLE","THEAD"].includes(i))return;const s=i==="TABLE"?n:n.parentElement;if(!s)return;const v=s.querySelector("thead"),o=Array.from(v?.querySelectorAll("th")??[]);if(o.length===0)return;s.style.position="relative";const l=document.createElement("div");l.className="vue3-columns-resizable",l.style.position="relative",s.parentElement?.insertBefore(l,s);let m=!1,a=0,b=!1;const p=[];o.forEach((r,t)=>{if(t+1>=o.length)return;const e=document.createElement("div");e.className="columns-resize-bar",e.style.position="absolute",e.style.top="0",e.style.width="8px",e.style.cursor="col-resize",e.style.zIndex="1",e.addEventListener("mousedown",()=>{m=!0,a=t,document.body.style.cursor="col-resize",document.body.style.userSelect="none"}),p[t]=e,l.appendChild(e)});const x=r=>parseFloat(r)||0,E=()=>{if(m)return;const r=s.offsetWidth,t=i==="TABLE"?s.offsetHeight:v?.offsetHeight??0;r===0||t===0||(l.style.width=`${r}px`,b||(o.forEach(e=>{e.style.width=`${e.offsetWidth}px`}),b=!0),o.forEach((e,u)=>{const c=p[u],h=o[u+1];!c||!h||(c.style.height=`${t}px`,c.style.left=`${h.offsetLeft-4}px`)}))},w=()=>{m&&(m=!1,document.body.style.cursor="",document.body.style.userSelect="",o.forEach((r,t)=>{const e=p[t],u=o[t+1];r.style.width=`${r.offsetWidth}px`,e&&u&&(e.style.left=`${u.offsetLeft-4}px`)}))},y=r=>{if(!m)return;const t=o[a],e=o[a+1],u=p[a];if(!t||!e||!u)return;const c=r.movementX,h=x(t.style.width)+c,T=x(e.style.width)-c;t.style.width=`${h}px`,e.style.width=`${T}px`,u.style.left=`${e.offsetLeft-4+c}px`,n.dispatchEvent(new CustomEvent("column-resized",{detail:{index:a,width:h,nextIndex:a+1,nextWidth:T},bubbles:!0}))};document.addEventListener("mouseup",w),l.addEventListener("mousemove",y),s.addEventListener("mousemove",y);let z=requestAnimationFrame(()=>{z=requestAnimationFrame(E)});const L=typeof ResizeObserver<"u"?new ResizeObserver(()=>E()):null;return L?.observe(s),()=>{cancelAnimationFrame(z),L?.disconnect(),document.removeEventListener("mouseup",w),l.removeEventListener("mousemove",y),s.removeEventListener("mousemove",y),l.remove()}}const g={mounted(n){const i=f(n);i&&d.set(n,{cleanup:i})},unmounted(n){const i=d.get(n);i&&(i.cleanup(),d.delete(n))}};return{install(n){n.directive("columns-resizable",g)}}}));