Set disabled flags on inputs (#1481)

inputs/abutton.vue

@@ -4,6 +4,7 @@
       color="default"
       type="secondary"
       :ariaLabel="args.tooltip"
+      :disabled="disabled"
       :icon="args.icon || 'check_circle'"
       :loading="loading"
       :tooltip="args.tooltip"
@@ -18,7 +19,7 @@
   import { revealProp } from '../lib/utils/references';
 
   export default {
-    props: ['name', 'data', 'schema', 'args', 'initialFocus'],
+    props: ['name', 'data', 'schema', 'args', 'initialFocus', 'disabled'],
     components: { UiIconButton },
     data() {
       return {

inputs/autocomplete.vue

@@ -1,5 +1,5 @@
 <template>
-  <ol class="autocomplete" v-if="showMatches">
+  <ol class="autocomplete" v-if="showMatches && !disabled">
     <li v-for="(match, index) in matches">
       <item
         :index="index"
@@ -19,7 +19,7 @@
   import { getProp, removeListItem } from '../lib/lists/helpers';
 
   export default {
-    props: ['args', 'select', 'query', 'focusIndex', 'updateFocusIndex', 'updateMatches', 'unselect'],
+    props: ['args', 'select', 'query', 'focusIndex', 'updateFocusIndex', 'updateMatches', 'unselect', 'disabled'],
     data() {
       return {
         localIndex: null,

inputs/checkbox-group.vue

@@ -70,6 +70,7 @@
     :help="args.help"
     :error="errorMessage"
     :invalid="isInvalid"
+    :disabled="disabled"
     v-dynamic-events="customEvents"
     @input="update"></ui-checkbox-group>
   </div>
@@ -88,7 +89,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args'],
+    props: ['name', 'data', 'schema', 'args', 'disabled'],
     data() {
       return {
         isVertical: true

inputs/checkbox.vue

@@ -33,14 +33,14 @@
       :name="name"
       :label="label"
       :value="data"
+      :disabled="disabled"
       @input="update"
       v-dynamic-events="customEvents">
     </ui-checkbox>
     <div class="ui-textbox__feedback" v-if="args.help">
       <div class="ui-textbox__feedback-text">{{ args.help }}</div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -51,7 +51,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args'],
+    props: ['name', 'data', 'schema', 'args', 'disabled'],
     data() {
       return {};
     },

inputs/complex-list.vue

@@ -77,7 +77,7 @@
         </item>
       </transition-group>
     </div>
-    <ui-button v-else buttonType="button" color="accent" icon="add" @click.stop.prevent="addItem(-1)">Add Items</ui-button>
+    <ui-button v-else buttonType="button" color="accent" icon="add" :disabled="disabled" @click.stop.prevent="addItem(-1)">Add Items</ui-button>
   </transition>
 </template>
 
@@ -144,7 +144,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args', 'initialFocus'],
+    props: ['name', 'data', 'schema', 'args', 'initialFocus', 'disabled'],
     data() {
       return {
         currentItem: _.isArray(this.data) ? this.data.length - 1 : 0,

inputs/datepicker.vue

@@ -31,7 +31,7 @@
     :floatingLabel="true"
     :help="args.help"
     :error="errorMessage"
-    :disabled="isDisabled"
+    :disabled="isDisabled || disabled"
     iconPosition="right"
     v-dynamic-events="customEvents"
     @input="update">
@@ -52,7 +52,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args'],
+    props: ['name', 'data', 'schema', 'args', 'disabled'],
     data() {
       return {
         isDisabled: false

inputs/inline.vue

@@ -5,7 +5,7 @@
 </docs>
 
 <template>
-  <wysiwyg :name="name" :data="data" :schema="schema" :args="args" :initialFocus="initialFocus"  v-dynamic-events="customEvents" />
+  <wysiwyg :name="name" :data="data" :schema="schema" :args="args" :initialFocus="initialFocus" :disabled="disabled" v-dynamic-events="customEvents" />
 </template>
 
 <script>
@@ -14,7 +14,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args', 'initialFocus'],
+    props: ['name', 'data', 'schema', 'args', 'initialFocus', 'disabled'],
     data() {
       return {
         value: null

inputs/radio.vue

@@ -60,6 +60,7 @@
     :options="options"
     :vertical="isVertical"
     :help="args.help"
+    :disabled="disabled"
     :error="errorMessage"
     :invalid="isInvalid"
     @input="update"
@@ -79,7 +80,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args'],
+    props: ['name', 'data', 'schema', 'args', 'disabled'],
     data() {
       return {
         isVertical: true // todo: allow setting this in the args

inputs/range.vue

@@ -37,7 +37,7 @@
     <div class="ui-textbox__content">
       <label class="ui-textbox__label">
         <div class="ui-textbox__label-text is-floating">{{ label }}</div>
-        <div class="editor-range-input"></div>
+        <div class="editor-range-input" :disabled="disabled"></div>
       </label>
 
       <div class="ui-textbox__feedback" v-if="hasFeedback || showError">
@@ -97,7 +97,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args'],
+    props: ['name', 'data', 'schema', 'args', 'disabled'],
     data() {
       return {
         values: this.data || this.isDualPoint ? [0, 0] : 0

inputs/segmented-button-segment.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="segmented-button-segment" type="button" :class="{ 'is-checked': option.checked }" :id="option.id" :ref="option.id" :name="name" @click.stop.prevent="$emit('update', option.value)">
+  <button class="segmented-button-segment" type="button" :class="{ 'is-checked': option.checked }" :id="option.id" :ref="option.id" :name="name" :disabled="disabled" @click.stop.prevent="$emit('update', option.value)">
     <ui-icon v-if="option.hasMaterialIcon" :icon="option.icon"></ui-icon>
     <img v-else-if="option.hasImgIcon" class="segmented-button-img" :src="option.icon" :alt="option.text" />
     <span v-else class="segmented-button-text">{{ option.text }}</span>
@@ -14,7 +14,7 @@
   import UiRippleInk from 'keen/UiRippleInk';
 
   export default {
-    props: ['name', 'option', 'update'],
+    props: ['name', 'option', 'update', 'disabled'],
     data() {
       return {};
     },

inputs/segmented-button.vue

@@ -28,6 +28,7 @@
           :key="optionIndex"
           :name="name"
           :option="option"
+          :disabled="disabled"
           @update="update"
           v-dynamic-events="customEvents"></segmented-button-segment>
       </div>
@@ -51,7 +52,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args'],
+    props: ['name', 'data', 'schema', 'args', 'disabled'],
     data() {
       return {};
     },

inputs/select.vue

@@ -83,6 +83,7 @@
     :label="label"
     :floatingLabel="true"
     :help="args.help"
+    :disabled="disabled"
     :error="errorMessage"
     :invalid="isInvalid"
     iconPosition="right"
@@ -109,7 +110,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args'],
+    props: ['name', 'data', 'schema', 'args', 'disabled'],
     data() {
       return {
         listOptions: [],

inputs/simple-list-input.vue

@@ -22,6 +22,7 @@
       type="text"
       class="ui-textbox__input simple-list-add"
       ref="input"
+      :disabled="disabled"
       v-model.trim="val"
       @input="onChange"
       @keydown.enter.prevent="onEnter"
@@ -40,6 +41,7 @@
       v-if="showAutocomplete"
       :args="autocomplete"
       :query="val"
+      :disabled="disabled"
       :focusIndex="autocompleteIndex"
       :updateFocusIndex="updateFocusIndex"
       :updateMatches="updateAutocompleteMatches"

inputs/simple-list.vue

@@ -77,7 +77,7 @@
             :autocomplete="args.autocomplete"
             :ignoreComma="args.ignoreComma"
             :currentItem="currentItem"
-            :disabled="isDisabled"
+            :disabled="isDisabled || disabled"
             :isInitialFocus="initialFocus === name"
             @add="addItem"
             @select="selectItem"
@@ -115,7 +115,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args', 'initialFocus'],
+    props: ['name', 'data', 'schema', 'args', 'initialFocus', 'disabled'],
     data() {
       return {
         isActive: false,

inputs/text.vue

@@ -44,7 +44,7 @@
     :floatingLabel="true"
     :help="args.help"
     :error="errorMessage"
-    :disabled="isDisabled"
+    :disabled="isDisabled || disabled"
     iconPosition="right"
     v-dynamic-events="customEvents"
     @input="update"
@@ -77,7 +77,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args', 'initialFocus'],
+    props: ['name', 'data', 'schema', 'args', 'initialFocus', 'disabled'],
     data() {
       return {
         isDisabled: false,

inputs/timepicker.vue

@@ -31,6 +31,7 @@
     :name="name"
     :schema="schema"
     :args="args"
+    :disabled="disabled"
     v-dynamic-events="customEvents"
     @update="update">
   </timepicker>
@@ -48,7 +49,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args'],
+    props: ['name', 'data', 'schema', 'args', 'disabled'],
     data() {
       return {};
     },

inputs/wysiwyg.vue

@@ -181,7 +181,7 @@
 
   export default {
     mixins: [DynamicEvents],
-    props: ['name', 'data', 'schema', 'args', 'initialFocus'],
+    props: ['name', 'data', 'schema', 'args', 'initialFocus', 'disabled'],
     data() {
       return {
         editorData: this.data || '',
@@ -695,6 +695,10 @@
         }
       });
 
+      if (this.disabled) {
+        editor.disable();
+      }
+
       if (this.schema.events && _.isObject(this.schema.events)) {
         Object.keys(this.schema.events).forEach((key) => {
           editor.on(key, this.schema.events[key]);

lib/forms/field.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="reveal" mode="out-in" @after-enter="onRevealResize">
     <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>
+      <component :is="inputName" :name="name" :data="data" :schema="schema" :args="expandedInput" :initialFocus="initialFocus" :disabled="isDisabled" @resize="onResize"></component>
     </fieldset>
   </transition>
 </template>