Option to restrict simple list item creation

docs/input.md

@@ -692,6 +692,8 @@ An array of strings (or objects with a `text` property, if you add the `property
 * **validate.max** - Maximum number of items that the field must not exceed
 * **validate.requiredMessage** - Will appear when required validation fails
 * **validate.maxMessage** - Will appear when maximum validation fails
+* **restrictItemCreation** - boolean that prevents the addition of new items to the list if set to true, but allows the addition of values displayed by autocomplete. If it isn't present, all items can be added to the list
+* **restrictedErrorMessage** - message that is displayed when the user is prevented from adding an item
 
 ```yaml
   -

docs/inputs.md

@@ -577,6 +577,8 @@ An array of strings (or objects with a `text` property, if you add the `property
 * **validate.max** - maximum number of items that the field must not exceed
 * **validate.requiredMessage** - will appear when required validation fails
 * **validate.maxMessage** - will appear when maximum validation fails
+* **restrictItemCreation** - boolean that prevents the addition of new items to the list if set to true, but allows the addition of values displayed by autocomplete. If it isn't present, all items can be added to the list
+* **restrictedErrorMessage** - message that is displayed when the user is prevented from adding an item
 
 ```yaml
   -

inputs/simple-list-input.vue

@@ -57,10 +57,11 @@
   import autocomplete from './autocomplete.vue';
 
   export default {
-    props: ['items', 'allowRepeatedItems', 'autocomplete', 'currentItem', 'disabled', 'isInitialFocus', 'ignoreComma'],
+    props: ['items', 'allowRepeatedItems', 'autocomplete', 'currentItem', 'disabled', 'isInitialFocus', 'ignoreComma', 'restrictItemCreation'],
     data() {
       return {
         val: '',
+        autocompleteValue: false,
         autocompleteIndex: null,
         autocompleteOptions: [],
         displayAutocomplete: true
@@ -97,6 +98,15 @@
       },
       // Add an item to the array
       addItem() {
+        // Only saves values from the autocomplete list if tag creation restriction is enabled
+        if (this.restrictItemCreation) {
+          if (!this.autocompleteValue && !_.isNumber(this.autocompleteIndex)) {
+            this.$emit('triggerRestrictionError');
+            return;
+          }
+        }
+        this.autocompleteValue = false;
+
         let hasItem;
 
         if (_.isNumber(this.autocompleteIndex)) {
@@ -115,6 +125,7 @@
       },
       onAutocompleteSelect(val) {
         this.val = val;
+        this.autocompleteValue = true;
         this.addItem();
       },
       onEnter() {

inputs/simple-list.vue

@@ -16,7 +16,9 @@
   * **validate.max** - maximum number of items that the field must not exceed
   * **validate.requiredMessage** - will appear when required validation fails
   * **validate.maxMessage** - will appear when maximum validation fails
-
+  * **restrictItemCreation** - boolean that prevents the addition of new items to the list if set to true, but allows the addition of values displayed by autocomplete. If it isn't present, all items can be added to the list
+  * **restrictedErrorMessage** - message that is displayed when the user is prevented from adding an item
+
   ```yaml
     -
       fn: simple-list
@@ -79,22 +81,26 @@
             :currentItem="currentItem"
             :disabled="isDisabled || disabled"
             :isInitialFocus="initialFocus === name"
+            :restrictItemCreation="args.restrictItemCreation"
             @add="addItem"
             @select="selectItem"
             @focus="onFocus"
             @blur="onBlur"
             @resize="onResize"
+            @triggerRestrictionError="onTriggerRestrictionError"
+            @click.native="disableRestrictionError"
+            @keydown.delete.native="disableRestrictionError"
             v-dynamic-events="customEvents"></simple-list-input>
         </div>
       </label>
-
       <div class="ui-textbox__feedback" v-if="hasFeedback || maxLength">
         <div class="ui-textbox__feedback-text" v-if="showError">{{ error }}</div>
         <div class="ui-textbox__feedback-text" v-else-if="showHelp">{{ args.help }}</div>
         <div class="ui-textbox__counter" v-if="maxLength">
             {{ valueLength + '/' + maxLength }}
         </div>
       </div>
+      <div class="restriction-error-message" v-if="showRestrictionError">{{ args.restrictedErrorMessage }}</div>
     </div>
   </div>
 </template>
@@ -123,7 +129,8 @@
         isDisabled: false,
         currentItem: null,
         type: 'strings',
-        removedItem: {}
+        removedItem: {},
+        showRestrictionError: false
       };
     },
     computed: {
@@ -359,6 +366,14 @@
           });
           this.update(this.items);
         }
+      },
+      onTriggerRestrictionError() {
+        if (this.args.restrictedErrorMessage) {
+          this.showRestrictionError = true;
+        }
+      },
+      disableRestrictionError() {
+        this.showRestrictionError = false;
       }
     },
     components: {
@@ -404,5 +419,12 @@
     .list-items-leave-active {
       transition: opacity $standard-time $standard-curve;
     }
+
+    .restriction-error-message {
+      color: #FF0000;
+      font-family: "Noto Sans", Arial, sans-serif;
+      font-size: 0.875rem;
+      line-height: 1.2; 
+    }
   }
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-kiln",
-  "version": "10.1.1",
+  "version": "10.1.2-dev.3",
   "description": "Editor tools for Clay",
   "template": "template.handlebars",
   "scripts": {