Vue events

client/src/ui/components/bd/UpdaterToggle.vue

@@ -12,7 +12,7 @@
     <div class="bd-settingSwitch">
         <div class="bd-title">
             <h3>{{item.text}}</h3>
-            <div class="bd-switchWrapper" @click="() => toggle(item)">
+            <div class="bd-switchWrapper" @click="$emit('toggle', item)">
                 <input type="checkbox" class="bd-switchCheckbox" />
                 <div class="bd-switch" :class="{'bd-checked': item.status.update}" />
             </div>
@@ -23,6 +23,6 @@
 
 <script>
     export default {
-        props: ['item', 'toggle']
+        props: ['item']
     }
 </script>

client/src/ui/components/bd/UpdaterView.vue

@@ -19,7 +19,7 @@
                     <div class="bd-formDivider"></div>
                     <div v-for="update in bdUpdates">
                         <UpdaterStatus :item="update" v-if="update.status.updating" />
-                        <UpdaterToggle :item="update" :toggle="() => updater.toggleUpdate(update)" v-else />
+                        <UpdaterToggle :item="update" @toggle="updater.toggleUpdate(update)" v-else />
                         <div class="bd-formDivider"></div>
                     </div>
                 </div>

client/src/ui/components/contextmenu/Toggle.vue

@@ -22,6 +22,6 @@
 
 <script>
     export default {
-        props: ['item', 'onClick', 'checked']
+        props: ['item', 'checked']
     }
 </script>

client/src/ui/components/generic/Button.vue

@@ -9,13 +9,13 @@
 */
 
 <template>
-    <div class="bd-button" :class="classes" @click="onClick">
+    <div class="bd-button" @click="$emit('click')">
         {{text}}
     </div>
 </template>
 
 <script>
     export default {
-        props: ['classes', 'text', 'onClick']
+        props: ['text']
     }
 </script>

client/src/ui/components/generic/ButtonGroup.vue

@@ -9,15 +9,15 @@
 */
 
 <template>
-    <div class="bd-buttonGroup" :class="classes">
-        <Button v-for="(button, index) in buttons" :text="button.text" :classes="button.classes" :onClick="button.onClick" :key="index"/>
+    <div class="bd-buttonGroup">
+        <Button v-for="(button, index) in buttons" :text="button.text" :classes="button.class" @click="button.onClick" :key="index"/>
     </div>
 </template>
 
 <script>
     import Button from './Button.vue';
     export default {
-        props: ['buttons', 'classes'],
+        props: ['buttons'],
         components: { Button }
     }
 </script>

tests/ext/plugins/Render Example/index.js

@@ -101,15 +101,15 @@ module.exports = (Plugin, Api, Vendor) => {
             if (!returnValue.props.children instanceof Array) returnValue.props.children = [returnValue.props.children];
             // Add a generic Button component provided by BD
             returnValue.props.children.push(Api.Components.ButtonGroup({
-                classes: [ 'exampleBtnGroup' ], // Additional classes for button group
+                class: [ 'exampleBtnGroup' ], // Additional classes for button group
                 buttons: [
                     {
-                        classes: ['exampleBtn'], // Additional classes for button
+                        class: ['exampleBtn'], // Additional classes for button
                         text: 'Hello World!', // Text for button
                         onClick: e => Logger.log('Hello World!') // Button click handler
                     },
                     {
-                        classes: ['exampleBtn'],
+                        class: ['exampleBtn'],
                         text: 'Button',
                         onClick: e => Logger.log('Button!')
                     }