Implemented InputText component

src/assets/styles/app.scss

@@ -396,7 +396,7 @@ body {
         }
         
         &.introduction {
-            @include background-gradient-left2right(#008fba, #03c4e8);
+            @include background-gradient-left2right(#41b883, #50aeae);
             color: #ffffff;
             
             .feature-intro {

src/assets/styles/primevue.css

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

src/components/common/Common.css

@@ -0,0 +1,136 @@
+.p-component, .p-component * {
+    box-sizing: border-box;
+}
+.p-hidden {
+    display: none;
+}
+.p-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+.p-hidden-accessible input,
+.p-hidden-accessible select {
+    transform: scale(0);
+}
+.p-reset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: none;
+    font-size: 100%;
+    list-style: none;
+}
+.p-disabled {
+    cursor: default !important;
+}
+.p-disabled a {
+    cursor: default !important;
+}
+.p-component-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.p-overflow-hidden {
+    overflow: hidden;
+    position: fixed;
+    height: 100%;
+}
+.p-unselectable-text {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+.p-scrollbar-measure {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+    position: absolute;
+    top: -9999px;
+}
+.p-clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+@-webkit-keyframes p-fadein {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+@keyframes p-fadein {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+input[type="file"]::-webkit-file-upload-button,
+button {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+/* Overlay Animations */
+.p-input-overlay {
+    -webkit-transform: translateY(5%);
+    -ms-transform: translateY(5%);
+    transform: translateY(5%);
+    opacity: 0;
+    -webkit-transition: transform .3s, opacity .3s;
+    transition: transform .3s, opacity .3s;
+}
+
+.p-input-overlay-visible {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.p-input-overlay-hidden {
+    opacity: 0;
+    -webkit-transform: translateY(5%);
+    -ms-transform: translateY(5%);
+    transform: translateY(5%);
+    -webkit-transition: transform .3s, opacity .15s;
+    transition: transform .3s, opacity .15s;
+}
+
+.p-menu-overlay {
+    -webkit-transform: translateY(5%);
+    -ms-transform: translateY(5%);
+    transform: translateY(5%);
+    opacity: 0;
+    -webkit-transition: transform .3s, opacity .3s;
+    transition: transform .3s, opacity .3s;
+}
+
+.p-menu-overlay-visible {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.p-menu-overlay-hidden {
+    opacity: 0;
+    -webkit-transform: translateY(5%);
+    -ms-transform: translateY(5%);
+    transform: translateY(5%);
+    -webkit-transition: transform .3s, opacity .15s;
+    transition: transform .3s, opacity .15s;
+}

src/components/inputtext/InputText.css

@@ -0,0 +1,103 @@
+.p-inputtext {
+    margin: 0;
+    outline: medium none;
+    padding: .25em;
+    font-weight: normal;
+}
+
+.p-fluid .p-inputtext {
+    width: 100%;
+    box-sizing: border-box;
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing: border-box;
+}
+
+.p-inputgroup {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.p-inputgroup .p-inputgroup-addon {
+    display: inline-block;
+    text-align: center;
+    min-width: 1.5em;
+    padding: .25em;
+    border-width: 1px;
+    border-style: solid;
+}
+
+.p-inputgroup .p-inputgroup-addon + .p-inputgroup-addon {
+    border-left: 0 none;
+}
+
+.p-inputgroup .p-inputtext {
+    padding-left: .5em;
+}
+
+.p-inputgroup .p-inputtext:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 0 none;
+}
+
+.p-inputgroup .p-inputtext:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0 none;
+}
+
+.p-inputgroup .p-button {
+    margin-right: 0;
+    border-radius: 0;
+}
+
+.p-fluid .p-inputgroup .p-button {
+    width: auto;
+}
+
+.p-fluid .p-inputgroup .p-inputtext {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
+
+.p-inputgroup .p-checkbox, 
+.p-inputgroup .p-radiobutton {
+    margin-right: 0;
+    vertical-align: bottom;
+}
+
+/* Floating Label */
+.p-float-label {
+    display: block;
+    position:relative; 
+}
+
+.p-float-label label {
+  font-weight:normal;
+  position:absolute;
+  pointer-events:none;
+  left: .25em;
+  top: 50%;
+  margin-top: -.5em;
+  transition: 0.3s ease all; 
+  -moz-transition: 0.3s ease all; 
+  -webkit-transition: 0.3s ease all;
+  color: #898989;
+  line-height: 1;
+}
+    
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+  top:-.75em;
+  font-size:12px;
+}
+
+.p-float-label .input:-webkit-autofill ~ label {
+  top:-20px;
+  font-size:12px;
+}

src/components/inputtext/InputText.vue

@@ -0,0 +1,19 @@
+<template>
+    <input class="p-inputtext p-component" v-on="listeners" :value="value" />
+</template>
+
+<script>
+export default {
+    props: {
+        value: null
+    },
+    computed: {
+        listeners() {
+            return {
+                ...this.$listeners,
+                input: event => this.$emit('input', event.target.value)
+            };
+        }
+    }
+}
+</script>

src/main.js

@@ -1,10 +1,15 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
+import InputText from './components/inputtext/InputText';
+
+import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
 
 Vue.config.productionTip = false;
 
+Vue.component('p-inputtext', InputText);
+
 new Vue({
   router,
   render: h => h(App)

src/router.js

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

src/views/inputtext/InputTextDemo.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>InputText</h1>
+                <p>InputText renders and input field where the user can enter data.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <p-inputtext type="text" v-model="value1" />
+            <span :style="{marginLeft: '.5em'}">{{value1}}</span>
+
+            <h3>Floating Label</h3>
+            <span class="p-float-label">
+                <p-inputtext type="text" v-model="value2" />
+                <label htmlFor="float-input">Username</label>
+            </span>
+
+            <h3>Disabled</h3>
+            <p-inputtext type="text" v-model="value3" disabled />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: 'PrimeVue'
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>