gridjs-vue
Version:
A Vue.js wrapper component for Grid.js
3 lines (2 loc) • 5.01 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:!0});var t=require("https://unpkg.com/gridjs@5.0.1/dist/gridjs.module.js"),e=require("https://unpkg.com/uid/single/index.mjs");function s(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=s(require("https://unpkg.com/parse-css-stylesheet/index.js"));function i(t,e,s){return s?e?e(t):t:(t&&t.then||(t=Promise.resolve(t)),e?t.then(e):t)}function n(t,e){try{var s=t()}catch(t){return e(t)}return s&&s.then?s.then(void 0,e):s}function o(){}function d(t){if(t&&t.then)return t.then(o)}function a(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 u={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:a((function(){const s=this;return d(n((function(){return s.uuid=e.uid(16),i((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})})(s.divId),(function(){s.wrapper=document.getElementById(s.divId),Object.keys(s.$gridjs.options).length&&s.setOptions(),s.wrapper&&(s.options.data||s.options.from||s.options.server)&&(s.grid=new t.Grid(s.options).render(s.wrapper))}))}),(function(t){console.error(t)})))})),mounted(){this.assignTheme()},destroyed(){this.grid=void 0,this.wrapper=void 0},methods:{assignTheme:a((function(){const t=this;return d(n((function(){return function(t){var e=t();if(e&&e.then)return e.then(o)}((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),i(fetch(`https://unpkg.com/gridjs/dist/theme/${t.activeTheme}.css`),(function(e){return i(e.text(),(function(i){e=r.default(i);for(let t in document.styleSheets)document.styleSheets[t].title===s.title&&(s=document.styleSheets[t]);for(const r in e.cssRules){let i=e.cssRules[r].cssText;i&&!/^@/g.test(i)&&s.insertRule(`#${t.divId} ${i}`)}}))}))}}))}),(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 c(s,r={}){if(c.installed)return;c.installed=!0;const i=(t,e,r,i)=>{t&&t.current&&(t=t.current),"string"==typeof t&&e?new s({render(t){return t(e,Object.assign({props:r},i),this.$slots.default)},components:{usrComponent:e}}).$mount(t):console.error("$gridjs.render() requires a target element and a component")};s.prototype.$gridjs||(s.prototype.$gridjs={createRef:t.createRef,h:t.h,html:t.html,options:r,PluginPosition:t.PluginPosition,render:i,uuid:e.uid(16)}),s.component("Grid",u)}const l={install:c};let h=null;"undefined"!=typeof window?h=window.Vue:"undefined"!=typeof global&&(h=global.Vue),h&&h.use(l),exports.Grid=u,exports.GridGlobal=l,exports.default=u,exports.install=c;
//# sourceMappingURL=index.js.map
;