From 10c42cc44454e5b1cc950dfbe2de5b2425d1d126 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 8 Jan 2019 23:59:11 +0300
Subject: [PATCH] InputGroupDemo

---
 src/AppMenu.vue                         |   1 +
 src/router.js                           |   5 +
 src/views/inputgroup/InputGroupDemo.vue | 131 ++++++++++++++++++++++++
 3 files changed, 137 insertions(+)
 create mode 100644 src/views/inputgroup/InputGroupDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 5a18aaecc..bcecdc480 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -12,6 +12,7 @@
                     <router-link to="/chips">&#9679; Chips</router-link>
                     <router-link to="/dropdown">&#9679; Dropdown</router-link>
                     <router-link to="/editor">&#9679; Editor</router-link>
+                    <router-link to="/inputgroup">&#9679; InputGroup</router-link>
                     <router-link to="/inputswitch">&#9679; InputSwitch</router-link>
                     <router-link to="/inputtext">&#9679; InputText</router-link>
                     <router-link to="/listbox">&#9679; Listbox</router-link>
diff --git a/src/router.js b/src/router.js
index c0176fbca..08d31e4cb 100644
--- a/src/router.js
+++ b/src/router.js
@@ -101,6 +101,11 @@ export default new Router({
         name: 'fullcalendar',
         component: () => import('./views/fullcalendar/FullCalendarDemo.vue')
     },
+    {
+        path: '/inputgroup',
+        name: 'inputgroup',
+        component: () => import('./views/inputgroup/InputGroupDemo.vue')
+    },
     {
         path: '/inputswitch',
         name: 'inputswitch',
diff --git a/src/views/inputgroup/InputGroupDemo.vue b/src/views/inputgroup/InputGroupDemo.vue
new file mode 100644
index 000000000..c93071efe
--- /dev/null
+++ b/src/views/inputgroup/InputGroupDemo.vue
@@ -0,0 +1,131 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>InputGroup</h1>
+                <p>Text, icon, buttons and other content can be grouped next to an input.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Addons</h3>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">
+                            <i class="pi pi-user"></i>
+                        </span>
+                        <InputText placeholder="Username" />
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">$</span>
+                        <InputText placeholder="Price" />
+                        <span class="p-inputgroup-addon">.00</span>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">W</span>
+                        <InputText placeholder="Website" />
+                    </div>
+                </div>
+            </div>
+
+            <h3>Multiple Addons</h3>
+            <div class="p-grid">
+                <div class="p-col-12">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">
+                            <i class="pi pi-clock"></i>
+                        </span>
+                        <span class="p-inputgroup-addon">
+                            <i class="pi pi-star"></i>
+                        </span>
+                        <InputText placeholder="Price" />
+                        <span class="p-inputgroup-addon">$</span>
+                        <span class="p-inputgroup-addon">.00</span>
+                    </div>
+                </div>
+            </div>
+
+            <h3>Button Addons</h3>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <Button label="Search"/>
+                        <InputText placeholder="Keyword"/>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <InputText placeholder="Keyword"/>
+                        <Button icon="pi pi-search" class="p-button-warning"/>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <Button icon="pi pi-check" class="p-button-success"/>
+                        <InputText placeholder="Vote"/>
+                        <Button icon="pi pi-times" class="p-button-danger"/>
+                    </div>
+                </div>
+            </div>
+
+            <h3>Checkbox and RadioButton</h3>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">
+                            <Checkbox v-model="checked1" />
+                        </span>
+                        <InputText placeholder="Username"/>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <InputText placeholder="Price"/>
+                        <span class="p-inputgroup-addon">
+                            <RadioButton name="rb1" value="rb1" v-model="radioValue1" /> 
+                        </span>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">
+                            <Checkbox v-model="checked2" />
+                        </span>
+                        <InputText placeholder="Website"/>
+                        <span class="p-inputgroup-addon">
+                            <RadioButton name="rb2" value="rb2" v-model="radioValue2" /> 
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: false,
+            checked2: false,
+            radioValue1: '',
+            radioValue2: ''
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>