gridjs-vue
Version:
A Vue.js wrapper component for Grid.js
3 lines (2 loc) • 5.41 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("https://unpkg.com/gridjs@5.0.1/dist/gridjs.module.js"),require("https://unpkg.com/uid/single/index.mjs"),require("https://unpkg.com/parse-css-stylesheet/index.js")):"function"==typeof define&&define.amd?define(["exports","https://unpkg.com/gridjs@5.0.1/dist/gridjs.module.js","https://unpkg.com/uid/single/index.mjs","https://unpkg.com/parse-css-stylesheet/index.js"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Grid={},t.gridjs_module_js,t.index_mjs,t.parseStylesheet)}(this,(function(t,e,s,i){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(i);function o(t,e,s){return s?e?e(t):t:(t&&t.then||(t=Promise.resolve(t)),e?t.then(e):t)}function d(t,e){try{var s=t()}catch(t){return e(t)}return s&&s.then?s.then(void 0,e):s}function u(){}function a(t){if(t&&t.then)return t.then(u)}function c(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:c((function(){const t=this;return a(d((function(){return t.uuid=s.uid(16),o((t=>{const e=document.querySelector(t);if(e)return e;const s=new MutationObserver(e=>{for(const i of e){const e=Array.from(i.addedNodes);for(const i of e)if(i.matches&&i.matches(t))return s.disconnect(),i}});s.observe(document.documentElement,{childList:!0,subtree:!0})})(t.divId),(function(){t.wrapper=document.getElementById(t.divId),Object.keys(t.$gridjs.options).length&&t.setOptions(),t.wrapper&&(t.options.data||t.options.from||t.options.server)&&(t.grid=new e.Grid(t.options).render(t.wrapper))}))}),(function(t){console.error(t)})))})),mounted(){this.assignTheme()},destroyed(){this.grid=void 0,this.wrapper=void 0},methods:{assignTheme:c((function(){const t=this;return a(d((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),o(fetch(`https://unpkg.com/gridjs/dist/theme/${t.activeTheme}.css`),(function(e){return o(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 i in e.cssRules){let n=e.cssRules[i].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 h(t,i={}){if(h.installed)return;h.installed=!0;const n=(e,s,i,n)=>{e&&e.current&&(e=e.current),"string"==typeof e&&s?new t({render(t){return t(s,Object.assign({props:i},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.createRef,h:e.h,html:e.html,options:i,PluginPosition:e.PluginPosition,render:n,uuid:s.uid(16)}),t.component("Grid",l)}const p={install:h};let f=null;"undefined"!=typeof window?f=window.Vue:"undefined"!=typeof global&&(f=global.Vue),f&&f.use(p),t.Grid=l,t.GridGlobal=p,t.default=l,t.install=h,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=index.umd.js.map