Implemented SelectButton Component

src/AppMenu.vue

@@ -12,6 +12,7 @@
                     <router-link to="/inputtext">&#9679; InputText</router-link>
                     <router-link to="/listbox">&#9679; Listbox</router-link>
                     <router-link to="/radiobutton">&#9679; RadioButton</router-link>
+                    <router-link to="/selectbutton">&#9679; SelectButton</router-link>
                     <router-link to="/textarea">&#9679; Textarea</router-link>
                     <router-link to="/togglebutton">&#9679; ToggleButton</router-link>
                 </div>

src/components/listbox/ListBox.vue

@@ -29,7 +29,7 @@ export default {
         options: Array,
         disabled: Boolean,
         dataKey: null,
-        listStyle: name,
+        listStyle: null,
         multiple: Boolean,
         metaKeySelection: Boolean,
         filter: Boolean,

src/components/selectbutton/SelectButton.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="p-selectbutton p-buttonset p-component p-buttonset">
+    <div v-for="(option, i) of options" :key="getOptionLabel(option)" :aria-label="getOptionLabel(option)"  
+            @click="onOptionSelect($event, option, i)" @keydown.enter.prevent="onOptionSelect($event, option, i)" @keydown.space.prevent="onOptionSelect($event, option, i)"
+            :tabindex="isOptionDisabled(option) ? null : '0'"
+            :class="['p-button p-component p-button-text-only', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]">
+            <slot :option="option" :index="i">
+                <span class="p-button-text p-c">{{getOptionLabel(option)}}</span>
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import ObjectUtils from '../utils/ObjectUtils';
+
+export default {
+    props: {
+        value: null,
+        options: Array,
+        disabled: Boolean,
+        dataKey: null,
+        name: String,
+        multiple: Boolean,
+        optionLabel: null,
+        optionValue: null,
+        optionDisabled: null
+    },
+    methods: {
+        getOptionLabel(option) {
+            return ObjectUtils.resolveFieldData(option, this.optionLabel);
+        },
+        getOptionValue(option) {
+            return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
+        },
+        isOptionDisabled(option) {
+            return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
+        },
+        onOptionSelect(event, option, index) {
+            if (this.disabled || this.isOptionDisabled(option)) {
+                return;
+            }
+
+            let selected = this.isSelected(option);
+            let optionValue = this.getOptionValue(option);
+            let newValue;
+            
+            if(this.multiple) {
+                if (selected)
+                    newValue = this.value.filter(val => !ObjectUtils.equals(val, optionValue, this.dataKey));
+                else
+                    newValue = this.value ? [...this.value, optionValue]: [optionValue];
+            }
+            else {
+                newValue = selected ? null : optionValue;
+            }
+
+            this.$emit('input', newValue);
+        },
+        isSelected(option) {
+            let selected = false;
+            let optionValue = this.getOptionValue(option);
+
+            if (this.multiple) {
+                if (this.value) {
+                    for (let val of this.value) {
+                        if (ObjectUtils.equals(val, optionValue, this.dataKey)) {
+                            selected = true;
+                            break;
+                        }
+                    }
+                }
+            }
+            else {
+                selected = ObjectUtils.equals(this.value, optionValue, this.dataKey);
+            }
+
+            return selected;
+        }
+    }
+}
+</script>

src/main.js

@@ -10,6 +10,7 @@ import Fieldset from './components/fieldset/Fieldset';
 import Listbox from './components/listbox/Listbox';
 import Panel from './components/panel/Panel';
 import RadioButton from './components/radiobutton/RadioButton';
+import SelectButton from './components/selectbutton/SelectButton';
 import Textarea from './components/textarea/Textarea';
 import Toolbar from './components/toolbar/Toolbar';
 import TabView from './components/tabview/TabView';
@@ -31,6 +32,7 @@ Vue.component('p-listbox', Listbox);
 Vue.component('p-fieldset', Fieldset);
 Vue.component('p-panel', Panel);
 Vue.component('p-radioButton', RadioButton);
+Vue.component('p-selectButton', SelectButton);
 Vue.component('p-tabView', TabView);
 Vue.component('p-tabPanel', TabPanel);
 Vue.component('p-textarea', Textarea);

src/router.js

@@ -56,6 +56,11 @@ export default new Router({
         name: 'radiobutton',
         component: () => import('./views/radiobutton/RadioButtonDemo.vue')
     },
+    {
+        path: '/selectbutton',
+        name: 'selectbutton',
+        component: () => import('./views/selectbutton/SelectButtonDemo.vue')
+    },
     {
         path: '/textarea',
         name: 'textarea',

src/views/selectbutton/SelectButtonDemo.vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>SelectButton</h1>
+                <p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Single</h3>
+            <p-selectButton v-model="selectedCity" :options="cities" optionLabel="name" />
+            <p>Selected City: {{selectedCity}}</p>
+
+            <h3>Multiple</h3>
+            <p-selectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
+            <p>Selected Cars: {{selectedCars}}</p>
+
+            <h3>Custom Content</h3>
+            <p-selectButton v-model="selectedCar" :options="cars" optionLabel="brand">
+                <template slot-scope="{option}">
+                    <div style="text-align: center; padding: 1em; width: 125px">
+                        <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="width:48px" />
+                        <div style="margin-top: 1em">{{option.brand}}</div>
+                    </div>
+                </template>
+            </p-selectButton>
+            <p>Selected Car: {{selectedCar}}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            selectedCar: null,
+            selectedCars: null,
+            cities: [
+                {name: 'London', code: 'LND'},
+                {name: 'Paris', code: 'PRS'},
+                {name: 'Rome', code: 'RM'}
+            ],
+            cars: [
+                {brand: 'Audi', key: 'A'},
+                {brand: 'Bmw', key: 'B'},
+                {brand: 'Mercedes', key: 'M'}
+            ]
+        }
+    },
+    created() {
+        this.selectedCar = this.cars[1];
+    }
+}
+</script>
+
+<style>
+
+</style>