gridjs-vue/dist/index.esm.js

A Vue.js wrapper component for Grid.js

import{Grid as t,createRef as e,h as s,html as r,PluginPosition as n}from"https://unpkg.com/gridjs@5.0.1/dist/gridjs.module.js";import{uid as i}from"https://unpkg.com/uid/single/index.mjs";import o from"https://unpkg.com/parse-css-stylesheet/index.js";function d(t,e,s){return s?e?e(t):t:(t&&t.then||(t=Promise.resolve(t)),e?t.then(e):t)}function a(t,e){try{var s=t()}catch(t){return e(t)}return s&&s.then?s.then(void 0,e):s}function u(){}function c(t){if(t&&t.then)return t.then(u)}function h(t){return function(){for(var e=[],s=0;s<arguments.length;s++)e[s]=arguments[s];try{return Promise.resolve(t.apply(this,e))}catch(t){return Promise.reject(t)}}}var l={name:"Grid",props:{autoWidth:{type:Boolean,default:!0},classNames:{type:Object,default:void 0},cols:{type:[Array,Function],default:void 0},from:{type:[String,Function],default:void 0},language:{type:Object,default:void 0},pagination:{type:[Object,Boolean],default:!1},rows:{type:[Array,Function],default:void 0},search:{type:Boolean,default:!1},server:{type:[Object,Function],default:void 0},sort:{type:[Object,Boolean],default:!1},styles:{type:Object,default:void 0},theme:{type:String,default:void 0},width:{type:String,default:"100%"}},data:()=>({dict:{error:{columnsUndefined:"Column headers are undefined",rowsUndefined:"No data to display"}},grid:null,uuid:null,wrapper:null}),computed:{tabularData(){return this.rows?this.rows:this.from||this.server?void 0:[[this.dict.error.rowsUndefined]]},options(){let t={autoWidth:this.autoWidth,columns:this.cols?this.cols:[this.dict.error.columnsUndefined],data:this.tabularData,pagination:this.pagination,sort:this.sort,width:this.width};return this.classNames&&(t.className=this.classNames),this.from&&(t.from="string"==typeof this.from?document.querySelector(this.from):document.createRange().createContextualFragment(this.from())),this.language&&(t.language=this.language),this.search&&(t.search=this.search),this.server&&(t.server=this.server),this.styles&&(t.style=this.styles),t},activeTheme(){return this.theme?this.theme:this.$gridjs.options.theme?this.$gridjs.options.theme:"mermaid"},divId(){return"gridjs__"+this.uuid}},watch:{autoWidth(){this.update()},classNames(){this.update()},cols(){this.update()},from(){this.update()},language(){this.update()},pagination(){this.update()},rows(){this.update()},search(){this.update()},server(){this.update()},sort(){this.update()},styles(){this.update()},theme(){this.update()},width(){this.update()}},created:h((function(){const e=this;return c(a((function(){return e.uuid=i(16),d((t=>{const e=document.querySelector(t);if(e)return e;const s=new MutationObserver(e=>{for(const r of e){const e=Array.from(r.addedNodes);for(const r of e)if(r.matches&&r.matches(t))return s.disconnect(),r}});s.observe(document.documentElement,{childList:!0,subtree:!0})})(e.divId),(function(){e.wrapper=document.getElementById(e.divId),Object.keys(e.$gridjs.options).length&&e.setOptions(),e.wrapper&&(e.options.data||e.options.from||e.options.server)&&(e.grid=new t(e.options).render(e.wrapper))}))}),(function(t){console.error(t)})))})),mounted(){this.assignTheme()},destroyed(){this.grid=void 0,this.wrapper=void 0},methods:{assignTheme:h((function(){const t=this;return c(a((function(){return function(t){var e=t();if(e&&e.then)return e.then(u)}((function(){if("none"!==t.activeTheme){const e=document.getElementsByTagName("head")[0];let s=document.createElement("style");return s.title=t.divId+"__theme",s.type="text/css",e.appendChild(s),d(fetch(`https://unpkg.com/gridjs/dist/theme/${t.activeTheme}.css`),(function(e){return d(e.text(),(function(r){e=o(r);for(let t in document.styleSheets)document.styleSheets[t].title===s.title&&(s=document.styleSheets[t]);for(const r in e.cssRules){let n=e.cssRules[r].cssText;n&&!/^@/g.test(n)&&s.insertRule(`#${t.divId} ${n}`)}}))}))}}))}),(function(t){console.error(t)})))})),setOptions(){try{const t=this.$gridjs.options.plugins;t&&t.forEach(t=>{this.grid.plugin.add(t)})}catch(t){console.error(t)}},update(){try{this.grid&&this.grid.updateConfig(this.options).forceRender()}catch(t){console.error(t)}}},template:'\n    <article :id="divId" :data-uuid="uuid" class="gridjs__wrapper"></article>\n  '};function p(t,o={}){if(p.installed)return;p.installed=!0;const d=(e,s,r,n)=>{e&&e.current&&(e=e.current),"string"==typeof e&&s?new t({render(t){return t(s,Object.assign({props:r},n),this.$slots.default)},components:{usrComponent:s}}).$mount(e):console.error("$gridjs.render() requires a target element and a component")};t.prototype.$gridjs||(t.prototype.$gridjs={createRef:e,h:s,html:r,options:o,PluginPosition:n,render:d,uuid:i(16)}),t.component("Grid",l)}const m={install:p};let f=null;"undefined"!=typeof window?f=window.Vue:"undefined"!=typeof global&&(f=global.Vue),f&&f.use(m);export default l;export{l as Grid,m as GridGlobal,p as install};
//# sourceMappingURL=index.esm.js.map