Implemented Inplace component

src/components/inplace/Inplace.vue

@@ -1,10 +1,18 @@
 <template>
     <div :class="containerClass">
-        Yoo man
+        <div class="p-inplace-display" :tabindex="$attrs.tabindex||'0'" v-if="!d_active" @click="open" @keydown.enter="open"> 
+            <slot name="display"></slot>
+        </div>
+        <div class="p-inplace-content" v-else>
+            <slot name="content"></slot>
+            <IPButton v-if="closable" icon="pi pi-times" @click="close"></IPButton>
+        </div>
     </div>
 </template>
 
 <script>
+import Button from '../button/Button';
+
 export default {
     props: {
         closable: {
@@ -14,10 +22,6 @@ export default {
         active: {
             type: Boolean,
             defaault: false
-        },
-        tabindex: {
-            type: String,
-            defaault: '0'
         }
     },
     watch: {
@@ -30,10 +34,25 @@ export default {
             d_active: this.active
         }
     },
+    methods: {
+        open(event) {
+            this.$emit('open', event);
+            this.d_active = true;
+            this.$emit('update:active', true);
+        },
+        close(event) {
+            this.$emit('close', event);
+            this.d_active = false;
+            this.$emit('update:active', false);
+        }
+    },
     computed: {
         containerClass() {
             return ['p-inplace p-component', {'p-inplace-closable': this.closable}];
         }
+    },
+    components: {
+        'IPButton': Button
     }
 }
 </script>

src/components/orderlist/OrderList.vue

@@ -290,9 +290,6 @@ export default {
                 }
             }
         }
-    },
-    computed: {
-        
     },
     components: {
         'OLButton': Button

src/views/inplace/InplaceDemo.vue

@@ -11,10 +11,10 @@
             <h3>Input</h3>
             <Inplace :closable="true">
                 <template #display>
-                    Click to Edit
+                    {{text || 'Click to Edit'}}
                 </template>
                 <template #content>
-                    <InputText autoFocus />
+                    <InputText v-model="text" autoFocus />
                 </template>
             </Inplace>
 
@@ -25,12 +25,12 @@
                     <span style="margin-left:.5em; vertical-align: middle">View Picture</span>
                 </template>
                 <template #content>
-                    <img src="'demo/images/nature/nature1.jpg'" />
+                    <img src="demo/images/nature/nature1.jpg" />
                 </template>
             </Inplace>
 
             <h3>Lazy Data</h3>
-            <Inplace onOpen={this.onOpen}>
+            <Inplace @open="loadData">
                 <template #display>
                     View Data
                 </template>
@@ -56,6 +56,7 @@ import InplaceDoc from './InplaceDoc';
 export default {
      data() {
         return {
+            text: null,
             cars: null
         }
     },
@@ -64,7 +65,7 @@ export default {
         this.carService = new CarService();
     },
     methods: {
-        onOpen() {
+        loadData() {
              this.carService.getCarsSmall().then(data => this.cars = data);
         }
     },