@blanderbit/vue3-table-grid/dist/vue3-table-grid.umd.min.js

## Project setup ``` npm install ```

(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue3-table-grid"]=t(require("vue")):e["vue3-table-grid"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={82:function(e,t){t.Z=(e,t)=>{const o=e.__vccOpts||e;for(const[l,n]of t)o[l]=n;return o}},203:function(t){t.exports=e}},o={};function l(e){var n=o[e];if(void 0!==n)return n.exports;var c=o[e]={exports:{}};return t[e](c,c.exports,l),c.exports}!function(){l.d=function(e,t){for(var o in t)l.o(t,o)&&!l.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})}}(),function(){l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){l.p=""}();var n={};return function(){if(l.r(n),l.d(n,{VTable:function(){return O}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(l.p=t[1])}var o=l(203),c=l.p+"img/loader.cf25105c.gif";const a=e=>((0,o.pushScopeId)("data-v-76571f61"),e=e(),(0,o.popScopeId)(),e),r={class:"vt-container"},s={key:0,class:"vt-loader-block"},d={key:0},i={key:0,class:"vt-loader-soft"},u=a((()=>(0,o.createElementVNode)("img",{src:c,alt:""},null,-1))),p={key:1},m={key:0,class:"vt-loader-hard"},k=a((()=>(0,o.createElementVNode)("img",{src:c,alt:""},null,-1))),f={key:1,class:"vt-table"},y={key:0,class:"vt-checkbox-cell"},h={key:1},b={key:0},v=["onClick","onMouseover"],g={key:0,class:"vt-checkbox-cell"},x={key:2,class:"vt-empty-table"},S=(0,o.createTextVNode)(" No data provided ");function B(e,t,l,n,c,a){const B=(0,o.resolveComponent)("VCheckbox");return(0,o.openBlock)(),(0,o.createElementBlock)("div",r,[(0,o.createElementVNode)("div",{class:"vt-table-wrapper",style:(0,o.normalizeStyle)(n.styleTableWrapper)},[l.isLoading?((0,o.openBlock)(),(0,o.createElementBlock)("div",s,[l.isLoaderSoft?((0,o.openBlock)(),(0,o.createElementBlock)("div",d,[e.isLoader?((0,o.openBlock)(),(0,o.createElementBlock)("div",i,[(0,o.renderSlot)(e.$slots,"loader-soft",{},(()=>[u]),!0)])):(0,o.createCommentVNode)("",!0)])):(0,o.createCommentVNode)("",!0),l.isLoaderHard?((0,o.openBlock)(),(0,o.createElementBlock)("div",p,[e.isLoader?((0,o.openBlock)(),(0,o.createElementBlock)("div",m,[(0,o.renderSlot)(e.$slots,"loader-hard",{},(()=>[k]),!0)])):(0,o.createCommentVNode)("",!0)])):(0,o.createCommentVNode)("",!0)])):(0,o.createCommentVNode)("",!0),n.isTableVisible?((0,o.openBlock)(),(0,o.createElementBlock)("table",f,[(0,o.createElementVNode)("thead",{style:(0,o.normalizeStyle)(n.styleHeader)},[(0,o.createElementVNode)("tr",null,[n.showMultiple?((0,o.openBlock)(),(0,o.createElementBlock)("th",y,[(0,o.renderSlot)(e.$slots,"default",{},(()=>[(0,o.createVNode)(B,{id:"mark-all",checked:n.isMarkedAllCheckboxes,onCheckboxChanged:n.selectAllCheckboxChanged},null,8,["checked","onCheckboxChanged"])]),!0)])):(0,o.createCommentVNode)("",!0),n.showSingle&&!n.showMultiple?((0,o.openBlock)(),(0,o.createElementBlock)("th",h)):(0,o.createCommentVNode)("",!0),((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(n.mainColumns,((t,l)=>((0,o.openBlock)(),(0,o.createElementBlock)("th",{key:l,class:(0,o.normalizeClass)(t._options.class),style:(0,o.normalizeStyle)(t._options.style)},[(0,o.renderSlot)(e.$slots,t._options.slotName,{header:t},(()=>[(0,o.createElementVNode)("span",null,(0,o.toDisplayString)(t.displayName),1)]),!0)],6)))),128))])],4),e.isMainBodyOfTableVisible?((0,o.openBlock)(),(0,o.createElementBlock)("tbody",b,[((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(n.rows,((t,l)=>((0,o.openBlock)(),(0,o.createElementBlock)("tr",{key:l,onClick:o=>e.$emit("rowClick",t),onMouseover:e=>n.rowHover(t,e),style:(0,o.normalizeStyle)(n.bgStyle)},[n.showSingle||n.showMultiple?((0,o.openBlock)(),(0,o.createElementBlock)("td",g,[(0,o.renderSlot)(e.$slots,"default",{},(()=>[(0,o.createVNode)(B,{id:l,checked:n.isMarkedAllCheckboxes||n.rowSelectState[l],onCheckboxChanged:n.selectPrticularLine},null,8,["id","checked","onCheckboxChanged"])]),!0)])):(0,o.createCommentVNode)("",!0),((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(n.mainColumns,((n,c)=>((0,o.openBlock)(),(0,o.createElementBlock)("td",{key:c,style:(0,o.normalizeStyle)(n._options.style),class:(0,o.normalizeClass)([{"vt-table__item--fixed-side":n.fixed},{empty:"empty"===n.displayValue}])},[(0,o.renderSlot)(e.$slots,`line-${l}_cell-${c}`,{bodyCell:t[n.displayValue]},(()=>[(0,o.createElementVNode)("span",null,(0,o.toDisplayString)(t[n.displayValue]),1)]),!0)],6)))),128))],44,v)))),128))])):(0,o.createCommentVNode)("",!0)])):((0,o.openBlock)(),(0,o.createElementBlock)("div",x,[(0,o.renderSlot)(e.$slots,"empty-table",{},(()=>[S]),!0)]))],4)])}function C(e,t){const l=(0,o.ref)(null);l.value=!e||!t;const n=(0,o.ref)(!0);return setTimeout((()=>{n.value=!1,l.value=!0}),1e3),{isMainBodyOfTableVisible:l,isLoader:n}}const V={class:"vt-checkbox"},E=["checked","id"],w=["for"];function N(e,t,l,n,c,a){return(0,o.openBlock)(),(0,o.createElementBlock)("div",V,[(0,o.createElementVNode)("input",{type:"checkbox",class:"checkbox-input",checked:l.checked,onChange:t[0]||(t[0]=(...e)=>n.onChange&&n.onChange(...e)),id:n.checkboxId},null,40,E),(0,o.createElementVNode)("label",{for:n.checkboxId,class:"checkbox-label"},null,8,w)])}var _={props:{id:{type:[Number,String],required:!0},checked:{type:Boolean,default:!1}},emits:["checkbox-changed"],setup(e,t){const l=(0,o.computed)((()=>`vt-checkbox-id-${e.id}`)),n=()=>{t.emit("checkbox-changed",e.checked,e.id)};return{onChange:n,checkboxId:l}}},L=l(82);const $=(0,L.Z)(_,[["render",N],["__scopeId","data-v-1386a8e6"]]);var H=$,M={name:"main-table",components:{VCheckbox:H},props:{dataSource:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},isLoading:{type:Boolean,default:!0},isLoaderSoft:{type:Boolean,default:!0},isLoaderHard:{type:Boolean,default:!1},backgroundColor:{type:String,default:"#E5FDFD"},tableHeight:{type:String,default:""},isHeaderSticky:{type:Boolean,default:!1},showSelect:{type:String,default:"default"}},emits:["rowClick","mouseHover","selectResult"],setup(e,t){const l=(0,o.computed)((()=>e.columns.filter((e=>e.displayValue&&e.displayName)).map(((e,t,o)=>({...e,id:t,_options:{class:[`vt-col_name-${e.displayValue}`,{"vt-table__header__item--fixed-side":e.fixed},{empty:"empty"===e.displayValue}],style:{borderRight:s(e,t,o),width:`${e.width}px`,"min-width":`${e.width}px`,left:e.fixed?i():""},slotName:`header-${e.displayValue}-content`}}))))),n=(0,o.computed)((()=>e.dataSource)),c=(0,o.computed)((()=>"multiple"===e.showSelect)),a=(0,o.computed)((()=>"single"===e.showSelect||"multiple"===e.showSelect)),r=(0,o.reactive)(Object.fromEntries(new Array(e.dataSource.length).fill("l").map(((e,t)=>[t,!1])))),s=(e,t,o)=>d.value===e.displayValue?"1px solid #154555":t!==o.length-1?"1px solid #EEF1F2":"",d=(0,o.computed)((()=>{const t=e.columns.filter((e=>e.fixed)).length,o=e.columns.filter((e=>e.fixed));return t?o[t-1].displayValue:null})),i=()=>0===i.count?(i.count++,"12px"):130*i.count+++"px";i.count=0;const u=(0,o.computed)((()=>e.columns.filter((e=>e.fixed)).length)),p=(0,o.computed)((()=>e.dataSource.length&&e.columns.length)),m=(e,o)=>{t.emit("mouseHover",e,o)},k=(0,o.computed)((()=>({"--bg-color":e.backgroundColor}))),f=(0,o.computed)((()=>e.tableHeight.length?{height:e.tableHeight+"px","overflow-y":"scroll"}:u.value>0?{"margin-left":124*u.value+"px"}:{})),y=(0,o.computed)((()=>e.isHeaderSticky?{position:"sticky",top:0}:{}));(0,o.onMounted)((()=>{const e=document.querySelector(".vt-table");if(!e)return;l.value.some((e=>e.fixed))}));const h=(0,o.ref)(!1),b=o=>{h.value=!o,o||t.emit("selectResult",[...e.dataSource]);for(let e in r)r[e]=!o},v=(o,l)=>{h.value=!1,r[l]=!o;let n=[];for(let t in r)r[t]&&n.push(e.dataSource[t]);n.length&&t.emit("selectResult",n)};return{mainColumns:l,rows:n,isTableVisible:p,...C(e.isLoaderHard,e.isLoading),rowHover:m,bgStyle:k,styleTableWrapper:f,styleHeader:y,isMarkedAllCheckboxes:h,selectAllCheckboxChanged:b,rowSelectState:r,selectPrticularLine:v,showMultiple:c,showSingle:a}}};const T=(0,L.Z)(M,[["render",B],["__scopeId","data-v-76571f61"]]);var j=T;const O=j}(),n}()}));
//# sourceMappingURL=vue3-table-grid.umd.min.js.map