Vulcan: Components Builder

vulcan
components
vuejs

#1

Vulcan draws incredible power from its hugely customisable AddOns system, whereby you can not only Fork and edit our Global Extensions, but you can build your own custom Components from scratch.

New Component Form

The Component Builder

We’ve made the Components builder interface, based on and powered by the Vue.js framework. If you know a little javascript and can find your way around a Vue component, then you can build powerful Vulcan Components.

Components Library

A Simple Example

Let’s dive straight in and build our first simple Component. Like all Vue components, we have 3 sections:

<template>
<script>
<style>

Let’s start with a simple template:

<template>
    <div :class="fromClass">
      Text
    </div>
</template>

and some basic styles

<style scoped>
    .text-user {
        color: #000000;
    }
    .text-bot {
        color: #ffff00
    }
    .text-none {
        color: #ff0000;
    }
</style>

Note that the style tag uses the scoped attribute, which means that these styles are scoped to this Component only.

Ok, on to the script

<script>
    module.exports = {
        name: 'ComponentName',
        props: {
            from: {
                type: String,
                default: 'none'
            }
        },
        data: function () {
          return {}
        },
        methods: {},
        computed: {
            fromClass () {
                return "text-" + this.from
            }
        }
    }
</script>

This is the simplest kind of bootstrapped structure for our Vue component.

name: This enables us to register our component for use inside other components
props: This is where we declare any data we would like to be provided to our component, e.g. from the parent. In our example, we’re going to pass in whether a message is sent from a User, a Bot or None and change the colour of the Text accordingly.
data: For holding data in our Component state, we’re not using it in this example
methods: Functions that we can call inside our component
computed: Similar to methods, but designed to simplify your expressions that you may be inclined to put in your templates. Vue docs state:

computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.

So now, when I preview our Component in the Result tab and change the initial default Props value, we can see that the text colour will change accordingly.


#3

New things I learn using my own tool… :rocket:

I have some content in my component state, let’s call it

data: function() {
  return {
    translatedText: "Hello World"
  }
}

I want to create a method which, when called, will create a new NoteLine for the editor

First, as the example above, we need a reference to the baseObject in our props

props: {
  baseObject: Object
}   
generateNoteLine() {
  const {id, info} = this.baseObject;
  const newInfo = {
  ...info,
  settings: {
    ...info.settings,
    notesLines: [...info.settings.notesLines, {id: this.$uuidKey(), type: "Text", content: this.translatedText}]
    }
  }
  this.$store.dispatch('object/update', {id, info: newInfo})
}

We make use of the spread operator to pass the baseObject along with our new data together to the store to mutate the object.

this.$uuidKey() ia a helper method for generating the uuid for the new NoteLine item.