More documentation updates (#371)

Author: selfagency

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 ## [Unreleased]
 
+- All new documentation af3db2b
+- Update README.md 40da820
+- update devdeps 17626e7
+- Rework new helper function f2cf99b
+- Add ready event f88802d
+- To the moon and back a5d40d7
+- Update table on window resize ea93940
+- Change attribute names to match GridJS API 995c66b
+- Update attributes.json abdaa15
+
 ## [5.0.1] - 2021-06-08
 
 - Major update!

docs/examples.md

@@ -69,6 +69,7 @@ functionality in Vue using this component. These examples mirror those found in
 - [Stock Market](../examples/advanced/stock-market.mjs)
 - [Events](../examples/advanced/events.mjs)
 - [Vue Events](../examples/advanced/vue-events.mjs)
+- [Global Event Bus](../examples/advanced/global-event-bus.mjs)
 
 [Preview](../examples/advanced.html)
 

docs/using_with_components.md

@@ -1,7 +1,7 @@
 # Using with Vue components
 
-`gridjs-vue` comes with a [helper method](helpers.md), `$gridjs.helper()`, with which you can insert a Vue component directly into a
-table cell or row.
+`gridjs-vue` comes with a [helper method](helpers.md), `$gridjs.helper()`, with which you can insert a Vue component
+directly into a table cell or row.
 
 ```html
 <template>
@@ -48,7 +48,7 @@ table cell or row.
 ## Handling child component events
 
 If the Vue component you are inserting into the Grid.js instance has events that bubble up, you can handle them by
-passing a `methods` object to `$gridjs.helper()` containing your event handler.
+passing `methods` to `$gridjs.helper()` containing your event handler, just as you would normally.
 
 ```html
 <template>
@@ -98,4 +98,84 @@ passing a `methods` object to `$gridjs.helper()` containing your event handler.
 </script>
 ```
 
+## Using A Global Event Bus
+
+Because it is instantiating within a Preact component, each Vue component becomes its own Vue instance and therefore cannot
+communicate back with the main Vue application unless using a separate global event bus, as shown in the following implementation.
+
+```js
+import Emittery from 'https://cdn.skypack.dev/emittery'
+import faker from 'https://cdn.skypack.dev/faker'
+import { Grid } from '../../dist/index.esm.js'
+
+window.emitter = new Emittery()
+
+const TestComponent = {
+  name: 'TestComponent',
+  props: {
+    content: {
+      type: String,
+      default: 'Hello, world!'
+    },
+    emitter: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      styling: 'color: #f00;'
+    }
+  },
+  methods: {
+    emit(args) {
+      return window.emitter.emit(args)
+    }
+  },
+  template: `
+    <div>
+      <div :style="styling" v-html="content" @click="emit('sayHello')"></div>
+    </div>
+  `
+}
+
+export default {
+  name: 'SharedEventBus',
+  components: {
+    Grid
+  },
+  data() {
+    return {
+      emitter: window.emitter,
+      columns: [
+        {
+          name: 'Name',
+          formatter: cell => {
+            return this.$gridjs.helper({
+              components: { TestComponent },
+              template: `<test-component :content="content"></test-component>`,
+              data() {
+                return {
+                  content: `🥳 ${cell}`
+                }
+              }
+            })
+          }
+        },
+        'Email'
+      ],
+      rows: Array(5)
+        .fill()
+        .map(() => [faker.name.findName(), faker.internet.email()])
+    }
+  },
+  mounted() {
+    this.emitter.on('sayHello', () => console.log('hello'))
+  },
+  template: `
+    <div><grid :columns="columns" :rows="rows"></grid></div>
+  `
+}
+```
+
 [< Back to contents](index.md)

examples/advanced.html

@@ -16,6 +16,7 @@
       import StockMarket from './advanced/stock-market.mjs'
       import Events from './advanced/events.mjs'
       import VueEvents from './advanced/vue-events.mjs'
+      import GlobalEventBus from './advanced/global-event-bus.mjs'
 
       new window.Vue({
         el: '#app',
@@ -28,7 +29,8 @@
           CustomSort,
           StockMarket,
           Events,
-          VueEvents
+          VueEvents,
+          GlobalEventBus
         },
         template: `
           <div>
@@ -72,6 +74,11 @@ <h2>Events</h2>
               <h2>Vue Events</h2>
               <vue-events></vue-events>
             </div>
+
+            <div>
+              <h2>Global Event Bus</h2>
+              <global-event-bus></global-event-bus>
+            </div>
           </div>
         `
       })

examples/advanced/global-event-bus.mjs

@@ -0,0 +1,72 @@
+import Emittery from 'https://cdn.skypack.dev/emittery'
+import faker from 'https://cdn.skypack.dev/faker'
+import { Grid } from '../../dist/index.esm.js'
+
+window.emitter = new Emittery()
+
+const TestComponent = {
+  name: 'TestComponent',
+  props: {
+    content: {
+      type: String,
+      default: 'Hello, world!'
+    },
+    emitter: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      styling: 'color: #f00;'
+    }
+  },
+  methods: {
+    emit(args) {
+      return window.emitter.emit(args)
+    }
+  },
+  template: `
+    <div>
+      <div :style="styling" v-html="content" @click="emit('sayHello')"></div>
+    </div>
+  `
+}
+
+export default {
+  name: 'SharedEventBus',
+  components: {
+    Grid
+  },
+  data() {
+    return {
+      emitter: window.emitter,
+      columns: [
+        {
+          name: 'Name',
+          formatter: cell => {
+            return this.$gridjs.helper({
+              components: { TestComponent },
+              template: `<test-component :content="content"></test-component>`,
+              data() {
+                return {
+                  content: `🥳 ${cell}`
+                }
+              }
+            })
+          }
+        },
+        'Email'
+      ],
+      rows: Array(5)
+        .fill()
+        .map(() => [faker.name.findName(), faker.internet.email()])
+    }
+  },
+  mounted() {
+    this.emitter.on('sayHello', () => console.log('hello'))
+  },
+  template: `
+    <div><grid :columns="columns" :rows="rows"></grid></div>
+  `
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gridjs-vue",
   "description": "A Vue.js wrapper component for Grid.js",
-  "version": "5.0.1",
+  "version": "5.0.2-0",
   "license": "MIT",
   "private": false,
   "authors": [