Implemented Button Component

src/assets/styles/primevue.css

@@ -1,2 +1,3 @@
 @import '../../components/common/Common.css';
 @import '../../components/inputtext/InputText.css';
+@import '../../components/button/Button.css';

src/components/button/Button.css

@@ -0,0 +1,111 @@
+/* Button */
+.p-button {
+    display: inline-block;
+    position: relative;
+    padding: 0;
+    text-decoration: none !important;
+    cursor: pointer;
+    text-align: center;
+    zoom: 1;
+    overflow: visible; /* the overflow property removes extra width in IE */
+    margin-right: 0.25em;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+/*button text element */
+.p-button .p-button-text {
+    display: block;
+    line-height: normal;
+}
+
+.p-button-text-only .p-button-text {
+    padding: .25em 1em;
+}
+
+.p-button-icon-only .p-button-text,
+.p-button-text-empty .p-button-text {
+    padding: .25em;
+    text-indent: -9999999px;
+}
+
+.p-button-text-icon-left .p-button-text {
+    padding: .25em 1em .25em 2.1em;
+}
+
+.p-button-text-icon-right .p-button-text {
+    padding: .25em 2.1em .25em 1em;
+}
+
+/*button icon element(s) */
+.p-button-icon-only .p-button-icon-left,
+.p-button-text-icon-left .p-button-icon-left,
+.p-button-text-icon-right .p-button-icon-right {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5em;
+    height: 1em;
+}
+
+.p-button-icon-only .p-button-icon-left {
+    top: 50%;
+    left: 50%;
+    margin-top: -.5em;
+    margin-left: -.5em;
+    width: 1em;
+    height: 1em;
+}
+
+.p-button-icon-left {
+    left: .5em;
+}
+
+.p-button-icon-right {
+    right: .5em;
+}
+
+/*button sets*/
+.p-buttonset .p-button {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/* workarounds */
+button.p-button::-moz-focus-inner {
+    border: 0; padding: 0; /* reset extra padding in Firefox */
+}
+
+/** Fluid **/
+.p-fluid .p-button {
+    width: 100%;
+}
+
+.p-fluid .p-button-text-icon-left .p-button-text,
+.p-fluid .p-button-text-icon-right .p-button-text {
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+/** ButtonSet **/
+.p-fluid .p-buttonset {
+    width: 100%;
+}
+
+.p-fluid .p-buttonset.p-buttonset-1 .p-button {width: 100%;}
+.p-fluid .p-buttonset.p-buttonset-2 .p-button {width: 50%;}
+.p-fluid .p-buttonset.p-buttonset-3 .p-button {width: 33.3%;}
+.p-fluid .p-buttonset.p-buttonset-4 .p-button {width: 25%;}
+.p-fluid .p-buttonset.p-buttonset-5 .p-button {width: 20%;}
+.p-fluid .p-buttonset.p-buttonset-6 .p-button {width: 16.6%;}
+
+@media (max-width: 640px) {
+    .p-fluid .p-buttonset.p-buttonset-1 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-2 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-3 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-4 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-5 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-6 .p-button {
+        width: 100%;
+    }
+}

src/components/button/Button.vue

@@ -0,0 +1,44 @@
+<template>
+    <button :class="buttonClass" v-on="$listeners">
+        <span v-if="icon" :class="iconClass"></span>
+        <span class="p-button-text p-c">{{label||'p-btn'}}</span>
+    </button>
+</template>
+
+<script>
+export default {
+    props: {
+        label: {
+            type: String
+        },
+        icon: {
+            type: String
+        },
+        iconPos: {
+            type: String,
+            default: 'left'
+        }
+    },
+    computed: {
+        buttonClass() {
+            return {
+                'p-button p-component': true,
+                'p-button-icon-only': this.icon && !this.label,
+                'p-button-text-icon-left': this.icon && this.label && this.iconPos === 'left',
+                'p-button-text-icon-right': this.icon && this.label && this.iconPos === 'right',
+                'p-button-text-only': !this.icon && this.label,
+                'p-disabled': this.disabled
+            }
+        },
+        iconClass() {
+            return [
+                this.icon,
+                {
+                    'p-button-icon-left': this.iconPos === 'left', 
+                    'p-button-icon-right': this.iconPos === 'right'
+                }
+            ]
+        }
+    }
+}
+</script>

src/main.js

@@ -2,13 +2,16 @@ import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
 import InputText from './components/inputtext/InputText';
+import Button from './components/button/Button';
 
 import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
+import 'primeicons/primeicons.css';
 
 Vue.config.productionTip = false;
 
 Vue.component('p-inputtext', InputText);
+Vue.component('p-button', Button);
 
 new Vue({
   router,

src/router.js

@@ -20,6 +20,11 @@ export default new Router({
         path: '/inputtext',
         name: 'inputtext',
         component: () => import('./views/inputtext/InputTextDemo.vue')
+    },
+    {
+        path: '/button',
+        name: 'button',
+        component: () => import('./views/button/ButtonDemo.vue')
     }
   ]
 });

src/views/button/ButtonDemo.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Button</h1>
+                <p>Button is an extension to standard button element with icons and theming.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <p-button label="Click" />
+            <p-button label="Click" icon="pi pi-check" />
+            <p-button label="Click" icon="pi pi-check" iconPos="right" />
+            <p-button icon="pi pi-check" />
+            <p-button label="Click" disabled="disabled" />
+
+            <h3>Severities</h3>
+            <p-button label="Primary" />
+            <p-button label="Secondary" class="p-button-secondary" />
+            <p-button label="Success" class="p-button-success" />
+            <p-button label="Info" class="p-button-info" />
+            <p-button label="Warning" class="p-button-warning" />
+            <p-button label="Danger" class="p-button-danger" />
+
+            <h3>Raised Buttons</h3>
+            <p-button label="Primary" class="p-button-raised" />
+            <p-button label="Secondary" class="p-button-raised p-button-secondary" />
+            <p-button label="Success" class="p-button-raised p-button-success" />
+            <p-button label="Info" class="p-button-raised p-button-info" />
+            <p-button label="Warning" class="p-button-raised p-button-warning" />
+            <p-button label="Danger" class="p-button-raised p-button-danger" />
+
+            <h3>Rounded Buttons</h3>
+            <p-button label="Primary" class="p-button-rounded" />
+            <p-button label="Secondary" class="p-button-rounded p-button-secondary" />
+            <p-button label="Success" class="p-button-rounded p-button-success" />
+            <p-button label="Info" class="p-button-rounded p-button-info" />
+            <p-button label="Warning" class="p-button-rounded p-button-warning" />
+            <p-button label="Danger" class="p-button-rounded p-button-danger" />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    button {
+        margin-right: .5em;
+    }
+</style>