From ccfb96860fd912b45635ad2464f9d8e324890718 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Wed, 2 Nov 2022 11:11:45 -0400 Subject: [PATCH 01/10] Restrict tag creation --- inputs/simple-list-input.vue | 18 ++++++++++++------ inputs/simple-list.vue | 1 + 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/inputs/simple-list-input.vue b/inputs/simple-list-input.vue index 731687cc3..63dd5ce22 100644 --- a/inputs/simple-list-input.vue +++ b/inputs/simple-list-input.vue @@ -26,8 +26,8 @@ v-model.trim="val" @input="onChange" @keydown.enter.prevent="onEnter" - @keydown.tab="addItem" - @keyup.comma="ignoreComma ? null : addItem()" + @keydown.tab="addItem(false)" + @keyup.comma="ignoreComma ? null : addItem(false)" @keydown.delete="focusLastItem" @keydown.left="focusLastItem" @keydown.right="focusFirstItem" @@ -57,7 +57,7 @@ import autocomplete from './autocomplete.vue'; export default { - props: ['items', 'allowRepeatedItems', 'autocomplete', 'currentItem', 'disabled', 'isInitialFocus', 'ignoreComma'], + props: ['items', 'allowRepeatedItems', 'autocomplete', 'currentItem', 'disabled', 'isInitialFocus', 'ignoreComma', 'restrictTagCreation'], data() { return { val: '', @@ -96,7 +96,13 @@ } }, // Add an item to the array - addItem() { + addItem(isAutoCompleteValue) { + if (thisRestrictTagCreation) { + if (!isAutoCompleteValue) { + return; + } + } + let hasItem; if (_.isNumber(this.autocompleteIndex)) { @@ -115,12 +121,12 @@ }, onAutocompleteSelect(val) { this.val = val; - this.addItem(); + this.addItem(true); }, onEnter() { if (this.val) { // if theres a value in the input, add it (like when you hit tab or comma) - this.addItem(); + this.addItem(false); } else { // otherwise, close the form (which we never do on tab or comma) this.$store.dispatch('unfocus'); diff --git a/inputs/simple-list.vue b/inputs/simple-list.vue index f6a8761e7..f6003967b 100644 --- a/inputs/simple-list.vue +++ b/inputs/simple-list.vue @@ -79,6 +79,7 @@ :currentItem="currentItem" :disabled="isDisabled || disabled" :isInitialFocus="initialFocus === name" + :restrictTagCreation="args.restrictTagCreation" @add="addItem" @select="selectItem" @focus="onFocus" From 30611fe2e170dbf14d9348c1a6a89b1f8fcfef87 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Thu, 3 Nov 2022 09:02:09 -0400 Subject: [PATCH 02/10] Minor fixes --- inputs/simple-list-input.vue | 21 +++++++++++++-------- inputs/simple-list.vue | 3 ++- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/inputs/simple-list-input.vue b/inputs/simple-list-input.vue index 63dd5ce22..15ee15abe 100644 --- a/inputs/simple-list-input.vue +++ b/inputs/simple-list-input.vue @@ -26,8 +26,8 @@ v-model.trim="val" @input="onChange" @keydown.enter.prevent="onEnter" - @keydown.tab="addItem(false)" - @keyup.comma="ignoreComma ? null : addItem(false)" + @keydown.tab="addItem()" + @keyup.comma="ignoreComma ? null : addItem()" @keydown.delete="focusLastItem" @keydown.left="focusLastItem" @keydown.right="focusFirstItem" @@ -57,10 +57,11 @@ import autocomplete from './autocomplete.vue'; export default { - props: ['items', 'allowRepeatedItems', 'autocomplete', 'currentItem', 'disabled', 'isInitialFocus', 'ignoreComma', 'restrictTagCreation'], + props: ['items', 'allowRepeatedItems', 'autocomplete', 'currentItem', 'disabled', 'isInitialFocus', 'ignoreComma', 'restrictItemCreation'], data() { return { val: '', + autocompleteValue: false, autocompleteIndex: null, autocompleteOptions: [], displayAutocomplete: true @@ -96,12 +97,15 @@ } }, // Add an item to the array - addItem(isAutoCompleteValue) { - if (thisRestrictTagCreation) { - if (!isAutoCompleteValue) { + addItem() { + // Only saves values from the autocomplete list if tag creation restriction is enabled + if (this.restrictItemCreation) { + if (!this.autocompleteValue) { + this.autocompleteValue = false; return; } } + this.autocompleteValue = false; let hasItem; @@ -121,12 +125,13 @@ }, onAutocompleteSelect(val) { this.val = val; - this.addItem(true); + this.autocompleteValue = true; + this.addItem(); }, onEnter() { if (this.val) { // if theres a value in the input, add it (like when you hit tab or comma) - this.addItem(false); + this.addItem(); } else { // otherwise, close the form (which we never do on tab or comma) this.$store.dispatch('unfocus'); diff --git a/inputs/simple-list.vue b/inputs/simple-list.vue index f6003967b..72a0b225e 100644 --- a/inputs/simple-list.vue +++ b/inputs/simple-list.vue @@ -16,6 +16,7 @@ * **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 ```yaml - @@ -79,7 +80,7 @@ :currentItem="currentItem" :disabled="isDisabled || disabled" :isInitialFocus="initialFocus === name" - :restrictTagCreation="args.restrictTagCreation" + :restrictItemCreation="args.restrictItemCreation" @add="addItem" @select="selectItem" @focus="onFocus" From 4da1ca2efd126f4831f9105a08187afe448959c2 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Thu, 3 Nov 2022 14:12:52 -0400 Subject: [PATCH 03/10] Updated the doc --- docs/inputs.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/inputs.md b/docs/inputs.md index 4847d322f..d274b5c39 100644 --- a/docs/inputs.md +++ b/docs/inputs.md @@ -577,6 +577,7 @@ 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 ```yaml - @@ -593,6 +594,7 @@ An array of strings (or objects with a `text` property, if you add the `property * Pressing backspace in an empty text input will select the last item in the list * If `propertyName` is defined, you can double-click items to set the "primary" item. This will add a badge to the primary item. Only one item may be "primary" at a time * Double-clikcing the "primary" item will unset it as the "primary" item +* If `restrictItemCreation` is set to true, only options from the autocomplete list can be added ```yaml tags: From 86fc94973e0267c67809afcac7dab5d20d750129 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Thu, 3 Nov 2022 14:31:40 -0400 Subject: [PATCH 04/10] 10.1.1-dev.0 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 41185aaf4..e40e456e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "clay-kiln", - "version": "10.1.1", + "version": "10.1.2-dev.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ae6f9e893..42cadc1f4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "clay-kiln", - "version": "10.1.1", + "version": "10.1.2-dev.0", "description": "Editor tools for Clay", "template": "template.handlebars", "scripts": { From 79d027d36384ff188200d2731e58e440894a5b22 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Tue, 8 Nov 2022 15:12:52 -0400 Subject: [PATCH 05/10] Added an option to show an error message when the item addition is restricted --- docs/inputs.md | 2 +- inputs/simple-list-input.vue | 1 + inputs/simple-list.vue | 23 +++++++++++++++++++++-- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/docs/inputs.md b/docs/inputs.md index d274b5c39..830322dcd 100644 --- a/docs/inputs.md +++ b/docs/inputs.md @@ -578,6 +578,7 @@ An array of strings (or objects with a `text` property, if you add the `property * **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 - @@ -594,7 +595,6 @@ An array of strings (or objects with a `text` property, if you add the `property * Pressing backspace in an empty text input will select the last item in the list * If `propertyName` is defined, you can double-click items to set the "primary" item. This will add a badge to the primary item. Only one item may be "primary" at a time * Double-clikcing the "primary" item will unset it as the "primary" item -* If `restrictItemCreation` is set to true, only options from the autocomplete list can be added ```yaml tags: diff --git a/inputs/simple-list-input.vue b/inputs/simple-list-input.vue index 15ee15abe..9429c41f9 100644 --- a/inputs/simple-list-input.vue +++ b/inputs/simple-list-input.vue @@ -102,6 +102,7 @@ if (this.restrictItemCreation) { if (!this.autocompleteValue) { this.autocompleteValue = false; + this.$emit('triggerRestrictionError'); return; } } diff --git a/inputs/simple-list.vue b/inputs/simple-list.vue index 72a0b225e..ac24513af 100644 --- a/inputs/simple-list.vue +++ b/inputs/simple-list.vue @@ -86,10 +86,12 @@ @focus="onFocus" @blur="onBlur" @resize="onResize" + @triggerRestrictionError="onTriggerRestrictionError" + @click.native="disableRestrictionError" + @keydown.delete.native="disableRestrictionError" v-dynamic-events="customEvents"> - +
{{ args.restrictedErrrorMessage }}
@@ -125,7 +128,8 @@ isDisabled: false, currentItem: null, type: 'strings', - removedItem: {} + removedItem: {}, + showRestrictionError: false }; }, computed: { @@ -361,6 +365,14 @@ }); this.update(this.items); } + }, + onTriggerRestrictionError() { + if (this.args.restrictedErrrorMessage) { + this.showRestrictionError = true; + } + }, + disableRestrictionError() { + this.showRestrictionError = false; } }, components: { @@ -406,5 +418,12 @@ .list-items-leave-active { transition: opacity $standard-time $standard-curve; } + + .restriction-error-message { + color: rgba(255, 0, 0, 0.54); + font-family: "Noto Sans", Arial, sans-serif; + font-size: 0.875rem; + line-height: 1.2; + } } From f199c37ca19bb95703cf7437a37ccf0aed06cb54 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Tue, 8 Nov 2022 15:13:34 -0400 Subject: [PATCH 06/10] 10.1.1-dev.1 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index e40e456e2..0024d293a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "clay-kiln", - "version": "10.1.2-dev.0", + "version": "10.1.2-dev.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 42cadc1f4..530bfc216 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "clay-kiln", - "version": "10.1.2-dev.0", + "version": "10.1.2-dev.1", "description": "Editor tools for Clay", "template": "template.handlebars", "scripts": { From 21fa391158b66a41b48fcb9e8e256900c7dc9608 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Thu, 17 Nov 2022 12:25:42 -0400 Subject: [PATCH 07/10] Applied feedback --- docs/input.md | 2 ++ inputs/simple-list-input.vue | 3 +-- inputs/simple-list.vue | 6 +++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/input.md b/docs/input.md index 0adafe77c..68225799c 100644 --- a/docs/input.md +++ b/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 - diff --git a/inputs/simple-list-input.vue b/inputs/simple-list-input.vue index 9429c41f9..c2192da52 100644 --- a/inputs/simple-list-input.vue +++ b/inputs/simple-list-input.vue @@ -26,7 +26,7 @@ v-model.trim="val" @input="onChange" @keydown.enter.prevent="onEnter" - @keydown.tab="addItem()" + @keydown.tab="addItem" @keyup.comma="ignoreComma ? null : addItem()" @keydown.delete="focusLastItem" @keydown.left="focusLastItem" @@ -101,7 +101,6 @@ // Only saves values from the autocomplete list if tag creation restriction is enabled if (this.restrictItemCreation) { if (!this.autocompleteValue) { - this.autocompleteValue = false; this.$emit('triggerRestrictionError'); return; } diff --git a/inputs/simple-list.vue b/inputs/simple-list.vue index ac24513af..0e49ca5a5 100644 --- a/inputs/simple-list.vue +++ b/inputs/simple-list.vue @@ -99,7 +99,7 @@ {{ valueLength + '/' + maxLength }} -
{{ args.restrictedErrrorMessage }}
+
{{ args.restrictedErrorMessage }}
@@ -367,7 +367,7 @@ } }, onTriggerRestrictionError() { - if (this.args.restrictedErrrorMessage) { + if (this.args.restrictedErrorMessage) { this.showRestrictionError = true; } }, @@ -420,7 +420,7 @@ } .restriction-error-message { - color: rgba(255, 0, 0, 0.54); + color: #FF0000; font-family: "Noto Sans", Arial, sans-serif; font-size: 0.875rem; line-height: 1.2; From 19478aff425a349b0460b6855bf96486c3769675 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Wed, 7 Dec 2022 12:40:58 -0400 Subject: [PATCH 08/10] 10.1.1-dev.2 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0024d293a..ce34aa1ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "clay-kiln", - "version": "10.1.2-dev.1", + "version": "10.1.2-dev.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 530bfc216..c1739853f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "clay-kiln", - "version": "10.1.2-dev.1", + "version": "10.1.2-dev.2", "description": "Editor tools for Clay", "template": "template.handlebars", "scripts": { From d715f9fd5bb732454bda384d2e59d32b07e5a218 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Thu, 8 Dec 2022 14:54:44 -0400 Subject: [PATCH 09/10] Fixed small bug --- inputs/simple-list-input.vue | 2 +- inputs/simple-list.vue | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/inputs/simple-list-input.vue b/inputs/simple-list-input.vue index c2192da52..6ccba0df0 100644 --- a/inputs/simple-list-input.vue +++ b/inputs/simple-list-input.vue @@ -100,7 +100,7 @@ addItem() { // Only saves values from the autocomplete list if tag creation restriction is enabled if (this.restrictItemCreation) { - if (!this.autocompleteValue) { + if (!this.autocompleteValue && !_.isNumber(this.autocompleteIndex)) { this.$emit('triggerRestrictionError'); return; } diff --git a/inputs/simple-list.vue b/inputs/simple-list.vue index 0e49ca5a5..eedaf2c3c 100644 --- a/inputs/simple-list.vue +++ b/inputs/simple-list.vue @@ -17,7 +17,8 @@ * **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 From 3071ce5723b0dd9b54e7aca6542f6b1fd0185c43 Mon Sep 17 00:00:00 2001 From: Intellisys Date: Thu, 8 Dec 2022 14:57:13 -0400 Subject: [PATCH 10/10] 10.1.1-dev.3 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index ce34aa1ba..fb133f0f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "clay-kiln", - "version": "10.1.2-dev.2", + "version": "10.1.2-dev.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index c1739853f..7beac063c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "clay-kiln", - "version": "10.1.2-dev.2", + "version": "10.1.2-dev.3", "description": "Editor tools for Clay", "template": "template.handlebars", "scripts": {