Initiated codebase for Inplace component

src/AppMenu.vue

@@ -168,6 +168,7 @@
             <transition name="layout-submenu-wrapper">
                 <div v-show="activeMenuIndex === 9">
                     <div>
+                        <router-link to="/inplace">&#9679; Inplace</router-link>
                         <router-link to="/progressbar">&#9679; ProgressBar</router-link>
                     </div>
                 </div>

src/components/inplace/Inplace.vue

@@ -0,0 +1,53 @@
+<template>
+    <div :class="containerClass">
+        Yoo man
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        closable: {
+            type: Boolean,
+            defaault: false
+        },
+        active: {
+            type: Boolean,
+            defaault: false
+        },
+        tabindex: {
+            type: String,
+            defaault: '0'
+        }
+    },
+    watch: {
+        active(newValue) {
+            this.d_active = newValue;
+        }
+    },
+    data() {
+        return {
+            d_active: this.active
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-inplace p-component', {'p-inplace-closable': this.closable}];
+        }
+    }
+}
+</script>
+
+<style>
+.p-inplace .p-inplace-display {
+    display: inline;
+    cursor: pointer;
+    border: 0 none;
+    padding: .25em;
+    font-weight: normal;
+}
+
+.p-inplace .p-inplace-content {
+    display: inline;
+}
+</style>

src/main.js

@@ -20,6 +20,7 @@ import Editor from './components/editor/Editor';
 import Fieldset from './components/fieldset/Fieldset';
 import FileUpload from './components/fileupload/FileUpload';
 import FullCalendar from './components/fullcalendar/FullCalendar';
+import Inplace from './components/inplace/Inplace';
 import InputSwitch from './components/inputswitch/InputSwitch';
 import InputText from './components/inputtext/InputText';
 import Listbox from './components/listbox/Listbox';
@@ -83,6 +84,7 @@ Vue.component('Editor', Editor);
 Vue.component('Fieldset', Fieldset);
 Vue.component('FileUpload', FileUpload);
 Vue.component('FullCalendar', FullCalendar);
+Vue.component('Inplace', Inplace);
 Vue.component('InputSwitch', InputSwitch);
 Vue.component('InputText', InputText);
 Vue.component('Listbox', Listbox);

src/router.js

@@ -201,6 +201,11 @@ export default new Router({
 			name: 'fullcalendar',
 			component: () => import('./views/fullcalendar/FullCalendarDemo.vue')
         },
+        {
+			path: '/inplace',
+			name: 'inplace',
+			component: () => import('./views/inplace/InplaceDemo.vue')
+		},
 		{
 			path: '/inputgroup',
 			name: 'inputgroup',

src/views/inplace/InplaceDemo.vue

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Inplace</h1>
+                <p>Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3>Input</h3>
+            <Inplace :closable="true">
+                <template #display>
+                    Click to Edit
+                </template>
+                <template #content>
+                    <InputText autoFocus />
+                </template>
+            </Inplace>
+
+            <h3>Image</h3>
+            <Inplace>
+                <template #display>
+                    <span className="pi pi-search" style="vertical-align: middle"></span>
+                    <span style="margin-left:.5em; vertical-align: middle">View Picture</span>
+                </template>
+                <template #content>
+                    <img src="'demo/images/nature/nature1.jpg'" />
+                </template>
+            </Inplace>
+
+            <h3>Lazy Data</h3>
+            <Inplace onOpen={this.onOpen}>
+                <template #display>
+                    View Data
+                </template>
+                <template #content>
+                    <DataTable :value="cars">
+                        <Column field="vin" header="Vin"></Column>
+                        <Column field="year" header="Year"></Column>
+                        <Column field="brand" header="Brand"></Column>
+                        <Column field="color" header="Color"></Column>
+                    </DataTable>
+                </template>
+            </Inplace>
+        </div>
+
+        <InplaceDoc />
+    </div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import InplaceDoc from './InplaceDoc';
+
+export default {
+     data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    methods: {
+        onOpen() {
+             this.carService.getCarsSmall().then(data => this.cars = data);
+        }
+    },
+    components: {
+        'InplaceDoc': InplaceDoc
+    }
+}
+</script>

src/views/inplace/InplaceDoc.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>InplaceDoc</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>