From e601e88db2e856db4ab34e6466bfa3857af82d05 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 8 Dec 2018 00:18:52 +0300
Subject: [PATCH] Implemented Button Component

---
 src/assets/styles/primevue.css   |   3 +-
 src/components/button/Button.css | 111 +++++++++++++++++++++++++++++++
 src/components/button/Button.vue |  44 ++++++++++++
 src/main.js                      |   3 +
 src/router.js                    |   7 +-
 src/views/button/ButtonDemo.vue  |  49 ++++++++++++++
 6 files changed, 215 insertions(+), 2 deletions(-)
 create mode 100644 src/components/button/Button.css
 create mode 100644 src/components/button/Button.vue
 create mode 100644 src/views/button/ButtonDemo.vue

diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 4ec2d5a53..a87c431ef 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -1,2 +1,3 @@
 @import '../../components/common/Common.css';
-@import '../../components/inputtext/InputText.css';
\ No newline at end of file
+@import '../../components/inputtext/InputText.css';
+@import '../../components/button/Button.css';
\ No newline at end of file
diff --git a/src/components/button/Button.css b/src/components/button/Button.css
new file mode 100644
index 000000000..e61039bfe
--- /dev/null
+++ b/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%;
+    }
+}
\ No newline at end of file
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
new file mode 100644
index 000000000..3f16baae5
--- /dev/null
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 15ed09a10..fcea726f7 100644
--- a/src/main.js
+++ b/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,
diff --git a/src/router.js b/src/router.js
index cc4a85e4d..bd32fc3c4 100644
--- a/src/router.js
+++ b/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')
+    }
   ]
 });
diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue
new file mode 100644
index 000000000..088157ded
--- /dev/null
+++ b/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>
\ No newline at end of file