04. Plugins Components

<template id="example-template">
    <div @click="doClick">example plugin</div>
</template>

<script>
const componentObject = {
    template: '#example-template',
    props: [ ... SEE BELOW ... ],
    methods: {
        doClick() {
            console.log('I was clicked');
        },
    },
};
</script>

For more information on Vue.js components please see here: https://v2.vuejs.org/v2/guide/components.html

---

---

addUi(type, component, args)

Add a Vue.js component or element to different parts of the Kiwi UI

args:

{
   props: {},  // your custom props to pass to the component
   title: '',  // title used for 'about_buffer' section
}

note: for most things a Vue.js component is recommended, but if needed a html element could be added

eg: const myElement = document.createElement('div');

kiwi.addUi('browser', componentObject, {});

props: [
    'networks',
    'sidebarState',
],

kiwi.addUi('input', componentObject, {});

props: [
    'network',
    'buffer',
    'sidebarState',
],

kiwi.addUi('header_channel', componentObject, {});

kiwi.addUi('header_query', componentObject, {});

props: [
    'network',
    'buffer',
    'sidebarState',
],

kiwi.addUi('userbox_button', componentObject, {});

props: [
    'network',
    'buffer',
    'user',
    'sidebarState',
],

kiwi.addUi('about_buffer', componentObject, {});

props: [
    'network',
    'buffer',
    'sidebarState',
],

---

addTab(type, title, component, props)

Add a Vue.js component as a tab to different tabbed views within Kiwi

types:

• channel
• settings
• server

title:

To use translations append t_ to your translation key. eg: 't_server' would be equivalent to TextFormatting.t('server');

note: the title is also used as the tabName (in its untranslated form)

kiwi.addTab('channel', 'Tab Title', componentObject, {});

props: [
    'network',
    'buffer',
    'sidebarState',
],

kiwi.addTab('server', 'Tab Title', componentObject, {});

props: [
    'network',
],

kiwi.addTab('settings', 'Tab Title', componentObject, {});

no props provided

---

showInSidebar(component, props)

Show a Vue.js component in the sidebar

kiwi.showInSidebar(componentObject, {});

props: [
    'network',
    'buffer',
    'sidebarState',
],

---

addView(name, component, props)

Register a Vue component that may be shown in future. It is shown over the entire client alongside the StateBrowser

showView(name)

Show a previously registered component from addView()

addStartup(name, component)

Add a custom startup screen that may be loaded by the configuration file

Examples

addUi(type, component, args)

kiwi.addUi('browser', componentObject, {});

<template id="example-ui-browser">
    <div @click="doClick" class="example-ui-browser">
        <div>addUi('browser'</div>
        <div>{{ text }}</div>
        there are {{ networks.length }} networks
    </div>
</template>

<script>
const browserComponentObject = {
    template: '#example-ui-browser',
    props: ['networks', 'sidebarState', 'text'],
    methods: {
        doClick(event) {
            console.log('Clicked addUI browser', event);
        }
    }
};

kiwi.addUi('browser', browserComponentObject, { props: { text: 'this is a prop' } });
</script>

<style>
.example-ui-browser {
    border: 2px dashed red;
    cursor: pointer;
}
</style>

kiwi.addUi('input', componentObject, {});

<template id="example-ui-input">
    <div @click="doClick" class="example-ui-input">
        <i aria-hidden="true" class="fa" :class="[ icon ? icon : 'fa-fort-awesome' ]"></i>
    </div>
</template>

<script>
const inputComponentObject = {
    template: '#example-ui-input',
    props: ['network', 'buffer', 'sidebarState', 'icon'],
    methods: {
        doClick(event) {
            console.log('Clicked addUI input', this.buffer.name, this.icon, event);
        }
    }
};

kiwi.addUi('input', inputComponentObject, { props: { icon: 'fa-plug' } });

// without icon prop it will fall back to 'fa-fort-awesome'
kiwi.addUi('input', inputComponentObject);
</script>

<style>
.example-ui-input {
    border: 1px dashed red;
    cursor: pointer;
}
</style>

kiwi.addUi('header_channel', componentObject, {});

kiwi.addUi('header_query', componentObject, {});

<template id="example-ui-header">
    <div class="example-ui-header">
        <a @click="toggleActive" title="Some Toggle">
            <i aria-hidden="true" class="fa" :class="[ active ? 'fa-toggle-on' : 'fa-toggle-off' ]"></i>
        </a>
    </div>
</template>

<script>
const headerComponentObject = {
    template: '#example-ui-header',
    props: ['network', 'buffer', 'sidebarState'],
    data() {
        return {
            active: false,
        };
    },
    methods: {
        toggleActive(event) {
            this.active = !this.active;
            console.log('Clicked addUI header', this.buffer.name, this.active, event);
        }
    }
};

kiwi.addUi('header_channel', headerComponentObject);
kiwi.addUi('header_query', headerComponentObject);
</script>

<style>
.example-ui-header {
    border: 1px dashed red;
    cursor: pointer;
}

.example-ui-header a:hover {
    background-color: inherit;
    color: inherit;
}
</style>

kiwi.addUi('userbox_button', componentObject, {});

<template id="example-ui-userbox">
    <div @click="doClick" class="kiwi-userbox-action">
        <a class="example-ui-userbox">
            <i aria-hidden="true" class="fa fa-hand-spock-o"></i>
            Wave to {{ user.nick }}
        </a>
    </div>
</template>

<script>
const userboxComponentObject = {
    template: '#example-ui-userbox',
    props: ['network', 'buffer', 'user', 'sidebarState'],
    methods: {
        doClick(event) {
            console.log('Clicked addUI userbox_button', event);
        }
    }
};

kiwi.addUi('userbox_button', userboxComponentObject);
</script>

<style>
.example-ui-userbox {
    border: 1px dashed red;
    cursor: pointer;
}
</style>

kiwi.addUi('about_buffer', componentObject, {});

<template id="example-ui-about">
    <div class="example-ui-about">
        <p>
            There are {{ buffer.getMessages().length }} messages
            and {{ bufferUserCount }} users in this buffer.
        </p>
        <p>
            There are {{ pluginCount }} plugins in this ui position.
        </p>
    </div>
</template>

<script>
const aboutComponentObject = {
    template: '#example-ui-about',
    props: ['network', 'buffer', 'sidebarState'],
    computed: {
        bufferUserCount() {
            return Object.values(this.buffer.users).length || 0;
        },
        pluginCount() {
            // accessing the parent component
            return this.$parent.pluginUiSections.length || 0;
        }
    },
    methods: {
        doClick(event) {
            console.log('Clicked addUI about_buffer', event);
        }
    }
};

kiwi.addUi('about_buffer', aboutComponentObject, { title: 'Facts' });
</script>

<style>
.example-ui-about {
    border: 1px dashed red;
    cursor: pointer;
}
</style>