Support for disable Kiln Inputs (#1478)

lib/forms/field.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="reveal" mode="out-in" @after-enter="onRevealResize">
-    <fieldset class="kiln-field" :style="{ minHeight: minHeight }" v-if="inputName && isShown">
+    <fieldset class="kiln-field" :style="{ minHeight: minHeight }" v-if="inputName && isShown" :disabled="isDisabled">
       <component :is="inputName" :name="name" :data="data" :schema="schema" :args="expandedInput" :initialFocus="initialFocus" @resize="onResize"></component>
     </fieldset>
   </transition>
@@ -17,7 +17,7 @@
   window.kiln.inputs = window.kiln.inputs || {};
 
   export default {
-    props: ['name', 'data', 'schema', 'initialFocus', 'visibility'],
+    props: ['name', 'data', 'schema', 'initialFocus', 'visibility', 'disabled'],
     data() {
       return {
         minHeight: '0px'
@@ -41,6 +41,9 @@
         const revealConfig = _.get(this.schema, revealProp, {});
 
         return shouldBeRevealed(this.$store, revealConfig, this.name);
+      },
+      isDisabled() {
+        return !!this.disabled;
       }
     },
     methods: {

lib/forms/overlay.vue

@@ -21,15 +21,15 @@
           <ui-tab v-for="(section, index) in sections" :key="index" :title="section.title" :selected="initialSection === index">
             <div class="input-container-wrapper" :style="{ 'max-height': `calc(100vh - ${formTop} - 104px)`}">
               <div class="input-container">
-                <field v-for="(field, fieldIndex) in section.fields" :key="JSON.stringify(field.schema) + fieldIndex" :name="field.name" :data="fields[field.name]" :visibility="!field.schema || field.schema.visibility" :schema="field.schema || schema[field.name] || getFieldSchema(field.name)" :initialFocus="initialFocus"></field>
+                <field v-for="(field, fieldIndex) in section.fields" :key="JSON.stringify(field.schema) + fieldIndex" :name="field.name" :data="fields[field.name]" :visibility="!field.schema || field.schema.visibility" :schema="field.schema || schema[field.name] || getFieldSchema(field.name)" :initialFocus="initialFocus" :disabled="!field.schema || field.schema.disabled"></field>
                 <div v-if="section.hasRequiredFields" class="required-footer">* Required fields</div>
               </div>
             </div>
           </ui-tab>
         </ui-tabs>
         <div v-else class="input-container-wrapper" :style="{ 'max-height': `calc(100vh - ${formTop} - 56px)`}">
           <div class="input-container">
-            <field v-for="(field, fieldIndex) in sections[0].fields" :key="JSON.stringify(field.schema) + fieldIndex" :name="field.name" :data="fields[field.name]" :visibility="!field.schema || field.schema.visibility" :schema="field.schema || schema[field.name] || getFieldSchema(field.name)" :initialFocus="initialFocus"></field>
+            <field v-for="(field, fieldIndex) in sections[0].fields" :key="JSON.stringify(field.schema) + fieldIndex" :name="field.name" :data="fields[field.name]" :visibility="!field.schema || field.schema.visibility" :schema="field.schema || schema[field.name] || getFieldSchema(field.name)" :initialFocus="initialFocus" :disabled="!field.schema || field.schema.disabled"></field>
             <div v-if="hasRequiredFields" class="required-footer">* Required fields</div>
           </div>
         </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-kiln",
-  "version": "8.13.0",
+  "version": "8.14.0",
   "description": "Editor tools for Clay",
   "template": "template.handlebars",
   "scripts": {