update options to configure

.gitignore

@@ -5,7 +5,7 @@ docs/.vuepress/dist
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/
-
+vue-tabulator-v*.tgz
 # local env files
 .env.local
 .env.*.local

src/App.vue

@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import VueTabulator from './components/VueTabulator.vue';
+import VueTabulator from './components/TabulatorComponent.vue';
 
 @Component({
   components: {

src/components/VueTabulator.vue → src/components/TabulatorComponent.vue

@@ -14,9 +14,9 @@ import {
 import Tabulator from 'tabulator-tables';
 
 @Component({
-  name: 'VueTabulator',
+  name: 'TabulatorComponent',
 })
-export default class VueTabulator extends Vue {
+export default class TabulatorComponent extends Vue {
   @Model('change', { default: () => [] })
   public tableData?: Array<any>;
 
@@ -55,7 +55,3 @@ export default class VueTabulator extends Vue {
   }
 }
 </script>
-
-
-<style lang='scss'>
-</style>

src/entry.ts

@@ -1,10 +1,11 @@
 import Vue from 'vue';
-import VueTabulator from '@/components/VueTabulator.vue';
+import TabulatorComponent from '@/components/TabulatorComponent.vue';
 
-export { VueTabulator };
+export { TabulatorComponent };
 
 export default {
-  install(VueApp: typeof Vue) {
-    VueApp.component('VueTabulator', VueTabulator);
+  install(VueApp: typeof Vue, options: any = {}) {
+    const name = options.name || 'VueTabulator';
+    VueApp.component(name, TabulatorComponent);
   },
 };

tests/unit/__snapshots__/vue-tabulator.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VueTabulator.vue renders correct based in the options 1`] = `
+exports[`TabulatorComponent.vue renders correct based in the options 1`] = `
 <div class="tabulator" role="grid" tabulator-layout="fitData">
-  <div class="tabulator-header">
-    <div class="tabulator-headers">
+  <div class="tabulator-header" style="padding-right: 0px;">
+    <div class="tabulator-headers" style="margin-left: 0px;">
       <div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" tabulator-field="name" style="min-width: 40px; width: 200px;" title="">
         <div class="tabulator-col-content">
           <div class="tabulator-col-title">Name</div>

tests/unit/vue-tabulator.spec.ts

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import VueTabulator from '@/components/VueTabulator.vue';
+import TabulatorComponent from '@/components/TabulatorComponent.vue';
 import Vue from 'vue';
 
-describe('VueTabulator.vue', () => {
+describe('TabulatorComponent.vue', () => {
   it('renders correct based in the options', () => {
     const options = {
       columns: [
@@ -16,7 +16,7 @@ describe('VueTabulator.vue', () => {
       ],
     };
 
-    const wrapper = shallowMount(VueTabulator, {
+    const wrapper = shallowMount(TabulatorComponent, {
       propsData: {
         options,
       },

vue.config.js

@@ -17,9 +17,6 @@ module.exports = {
     });
   },
   configureWebpack: {
-    output: {
-      libraryExport: 'default',
-    },
     plugins: [new CopyWebpackPlugin([{ from: 'src/scss', to: 'scss' }])],
   },
 };