vue-columns-resizable-vuetify
Version:
Vue directive for making table columns resizable.
1 lines • 5.2 kB
JavaScript
(function(e){function t(t){for(var n,s,i=t[0],l=t[1],c=t[2],u=0,f=[];u<i.length;u++)s=i[u],Object.prototype.hasOwnProperty.call(o,s)&&o[s]&&f.push(o[s][0]),o[s]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);d&&d(t);while(f.length)f.shift()();return a.push.apply(a,c||[]),r()}function r(){for(var e,t=0;t<a.length;t++){for(var r=a[t],n=!0,i=1;i<r.length;i++){var l=r[i];0!==o[l]&&(n=!1)}n&&(a.splice(t--,1),e=s(s.s=r[0]))}return e}var n={},o={app:0},a=[];function s(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,s),r.l=!0,r.exports}s.m=e,s.c=n,s.d=function(e,t,r){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},s.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(s.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(r,n,function(t){return e[t]}.bind(null,n));return r},s.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="";var i=window["webpackJsonp"]=window["webpackJsonp"]||[],l=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=l;a.push([0,"chunk-vendors"]),r()})({0:function(e,t,r){e.exports=r("56d7")},"07f4":function(e,t,r){"use strict";var n=r("f3cc"),o=r.n(n);o.a},"56d7":function(e,t,r){"use strict";r.r(t);r("e260"),r("e6cf"),r("cca6"),r("a79d");var n=r("2b0e"),o=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{attrs:{id:"app"}},[r("div",{staticClass:"container"},[r("div",[e._v("Default")]),r("table",{directives:[{name:"columns-resizable",rawName:"v-columns-resizable"}],staticClass:"table",attrs:{border:"1"}},[e._m(0),e._m(1)])]),r("div",{staticClass:"container"},[r("div",[e._v("Resize on thead")]),r("table",{staticClass:"table",attrs:{border:"1"}},[r("thead",{directives:[{name:"columns-resizable",rawName:"v-columns-resizable"}]},[e._m(2)]),e._m(3)])])])},a=[function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("thead",[r("tr",[r("th",{attrs:{width:"50%"}},[e._v("name")]),r("th",{attrs:{width:"25%"}},[e._v("age")]),r("th",{attrs:{width:"25%"}},[e._v("gender")])])])},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("tbody",[r("tr",[r("td",[e._v("John")]),r("td",[e._v("20")]),r("td",[e._v("male")])]),r("tr",[r("td",[e._v("Emma")]),r("td",[e._v("18")]),r("td",[e._v("female")])]),r("tr",[r("td",[e._v("Peter")]),r("td",[e._v("21")]),r("td",[e._v("male")])])])},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("tr",[r("th",{attrs:{width:"50%"}},[e._v("name")]),r("th",{attrs:{width:"25%"}},[e._v("age")]),r("th",{attrs:{width:"25%"}},[e._v("gender")])])},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("tbody",[r("tr",[r("td",[e._v("John")]),r("td",[e._v("20")]),r("td",[e._v("male")])]),r("tr",[r("td",[e._v("Emma")]),r("td",[e._v("18")]),r("td",[e._v("female")])]),r("tr",[r("td",[e._v("Peter")]),r("td",[e._v("21")]),r("td",[e._v("male")])])])}],s={name:"app"},i=s,l=(r("07f4"),r("2877")),c=Object(l["a"])(i,o,a,!1,null,"3c9d9dc1",null),d=c.exports,u=(r("4160"),r("c975"),r("ac1f"),r("5319"),r("159b"),{install:function(e){e.directive("columns-resizable",{inserted:function(e){var t=e.nodeName;if(["TABLE","THEAD"].indexOf(t)<0){if(e=e.querySelector("table"),!e)return;t="TABLE"}var r="TABLE"===t?e:e.parentElement,n=r.querySelector("thead"),o=n.querySelectorAll("th"),a="TABLE"===t?r.offsetHeight:n.offsetHeight,s=document.createElement("div");r.style.position="relative",s.style.position="relative",s.style.width=r.offsetWidth+"px",s.className="vue-columns-resizable",r.parentElement.insertBefore(s,r);var i=!1,l=0;o.forEach((function(e,t){if(e.style.width=e.offsetWidth+"px",!(t+1>=o.length)){var r=o[t+1],n=document.createElement("div");n.style.position="absolute",n.style.left=r.offsetLeft-4+"px",n.style.top=0,n.style.height=a+"px",n.style.width="8px",n.style.cursor="col-resize",n.style.zIndex=1,n.className="columns-resize-bar",n.addEventListener("mousedown",(function(){i=!0,l=t,document.body.style.cursor="col-resize",document.body.style.userSelect="none"})),s.appendChild(n)}}));var c=s.querySelectorAll(".columns-resize-bar");document.addEventListener("mouseup",(function(){i&&(i=!1,document.body.style.cursor="",document.body.style.userSelect="",c.forEach((function(e,t){var r=o[t],n=o[t+1];r.style.width=r.offsetWidth+"px",e.style.left=n.offsetLeft-4+"px"})))}));var d=function(e){return+e.replace("px","")},u=function(e){if(i){var t=o[l],r=o[l+1],n=c[l];t.style.width=d(t.style.width)+e.movementX+"px",r.style.width=d(r.style.width)-e.movementX+"px",n.style.left=r.offsetLeft-4+e.movementX+"px"}};s.addEventListener("mousemove",u),r.addEventListener("mousemove",u)}})}});n["a"].use(u),n["a"].config.productionTip=!1,new n["a"]({render:function(e){return e(d)}}).$mount("#app")},f3cc:function(e,t,r){}});