+ inject("data-v-67069530_0", { source: "\n.gridjs__wrapper[data-v-67069530] {\n align-items: center;\n display: flex;\n height: fit-content;\n justify-content: center;\n width: 100%;\n}\n", map: {"version":3,"sources":["/Users/daniel/code/gridjs-vue/src/gridjs-vue.vue"],"names":[],"mappings":";AA2MA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;AACA","file":"gridjs-vue.vue","sourcesContent":["<template>\n <article :id=\"`gridjs__${uuid}`\" :data-uuid=\"uuid\" :class=\"`gridjs__wrapper`\"></article>\n</template>\n\n<script>\nimport { Grid } from 'gridjs'\nimport { nanoid } from 'nanoid'\nimport elementReady from 'element-ready'\n\nimport themeMermaid from 'gridjs/dist/theme/mermaid.css'\n\nexport default {\n name: 'Grid',\n props: {\n autoWidth: {\n type: Boolean,\n default: true\n },\n classNames: {\n type: Object,\n default: undefined\n },\n cols: {\n type: Array,\n default: undefined\n },\n from: {\n type: [String, Function],\n default: undefined\n },\n language: {\n type: Object,\n default: undefined\n },\n pagination: {\n type: [Object, Boolean],\n default: false\n },\n rows: {\n type: [Array, Function],\n default: undefined\n },\n search: {\n type: Boolean,\n default: false\n },\n server: {\n type: [Object, Function],\n default: undefined\n },\n sort: {\n type: [Object, Boolean],\n default: false\n },\n styles: {\n type: Object,\n default: undefined\n },\n theme: {\n type: String,\n default: 'mermaid'\n },\n width: {\n type: String,\n default: '100%'\n }\n },\n data() {\n return {\n dict: {\n error: {\n columnsUndefined: 'Column headers are undefined',\n rowsUndefined: 'No data to display'\n }\n },\n grid: null,\n uuid: null,\n wrapper: null,\n themes: {\n mermaid: themeMermaid\n }\n }\n },\n computed: {\n options() {\n let options = {\n autoWidth: this.autoWidth,\n columns: this.cols ? this.cols : [this.dict.error.columnsUndefined],\n data: this.rows ? this.rows : this.from || this.server ? undefined : [[this.dict.error.rowsUndefined]],\n pagination: this.pagination,\n sort: this.sort,\n width: this.width\n }\n\n // let classNames\n\n if (this.classNames) options.className = this.classNames\n if (this.from)\n options.from =\n typeof this.from === 'string'\n ? document.querySelector(this.from)\n : document.createRange().createContextualFragment(this.from)\n if (this.language) options.language = this.language\n if (this.search) options.search = this.search\n if (this.server) options.server = this.server\n if (this.styles) options.style = this.styles\n\n return options\n }\n },\n watch: {\n autoWidth() {\n this.update()\n },\n classNames() {\n this.update()\n },\n cols() {\n this.update()\n },\n from() {\n this.update()\n },\n language() {\n this.update()\n },\n pagination() {\n this.update()\n },\n rows() {\n this.update()\n },\n search() {\n this.update()\n },\n server() {\n this.update()\n },\n sort() {\n this.update()\n },\n styles() {\n this.update()\n },\n width() {\n this.update()\n }\n },\n async mounted() {\n // give table a unique id\n this.uuid = nanoid()\n\n // select the unique wrapper element\n this.wrapper = await elementReady(`[data-uuid=\"${this.uuid}\"]`, { stopOnDomReady: false })\n\n // assign styles\n if (this.theme !== 'none') await this.assignTheme()\n\n // instantiate grid.js\n if (this.wrapper && (this.options.data || this.options.from || this.options.server)) {\n this.grid = new Grid(this.options).render(this.wrapper)\n }\n },\n destroyed() {\n // unload from memory\n this.grid = undefined\n this.wrapper = undefined\n },\n methods: {\n async assignTheme() {\n const head = document.getElementsByTagName('head')[0]\n const id = `gridjs__${this.uuid}`\n\n let stylesheet = document.createRange().createContextualFragment(`\n <style title=\"${id}_theme\" type=\"text/css\">\n ${this.themes[this.theme]}\n </style>\n `)\n head.appendChild(stylesheet)\n\n for (let index in document.styleSheets) {\n if (document.styleSheets[index].title === `${id}_theme`) stylesheet = document.styleSheets[index]\n }\n\n if (stylesheet instanceof CSSStyleSheet) {\n for (const index in stylesheet.cssRules) {\n let css = stylesheet.cssRules[index].cssText\n if (css && !/@/g.test(css)) {\n const rule = `#${id} ${css}`\n stylesheet.deleteRule(index)\n stylesheet.insertRule(rule, index)\n }\n }\n }\n },\n update() {\n this.grid.updateConfig(this.options).forceRender()\n }\n }\n}\n</script>\n\n<style scoped>\n.gridjs__wrapper {\n align-items: center;\n display: flex;\n height: fit-content;\n justify-content: center;\n width: 100%;\n}\n</style>\n"]}, media: undefined });
0 commit comments