Fixed #1651 - disabled props for Inplace

api-generator/components/inplace.js

@@ -10,6 +10,12 @@ const InplaceProps = [
         type: "boolean",
         default: "false",
         description: "Displays a button to switch back to display mode."
+    },
+    {
+        name: "diabled",
+        type: "boolean",
+        default: "false",
+        description: "When present, it specifies that the element should be disabled."
     }
 ];
 

src/components/inplace/Inplace.d.ts

@@ -3,6 +3,7 @@ import { VNode } from 'vue';
 interface InplaceProps {
     closable?: boolean;
     active?: boolean;
+    disabled?: boolean;
 }
 
 declare class Inplace {

src/components/inplace/Inplace.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass">
-        <div class="p-inplace-display" :tabindex="$attrs.tabindex||'0'" v-if="!d_active" @click="open" @keydown.enter="open">
+        <div :class="displayClass" :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>
@@ -24,6 +24,10 @@ export default {
         active: {
             type: Boolean,
             default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
         }
     },
     watch: {
@@ -38,6 +42,10 @@ export default {
     },
     methods: {
         open(event) {
+            if (this.disabled) {
+                return;
+            }
+
             this.$emit('open', event);
             this.d_active = true;
             this.$emit('update:active', true);
@@ -51,6 +59,9 @@ export default {
     computed: {
         containerClass() {
             return ['p-inplace p-component', {'p-inplace-closable': this.closable}];
+        },
+        displayClass() {
+            return ['p-inplace-display', {'p-disabled': this.disabled}];
         }
     },
     components: {

src/views/inplace/InplaceDoc.vue

@@ -101,6 +101,12 @@ export default {
                                 <td>boolean</td>
                                 <td>false</td>
                                 <td>Displays a button to switch back to display mode.</td>
+                            </tr>
+                            <tr>
+                                <td>disabled</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When present, it specifies that the element should be disabled.</td>
                             </tr>
 						</tbody>
 					</table>