goodteditor-ui 1.0.41 → 1.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.41",
+    "version": "1.0.43",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/InputTags.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="ui-input-tags form-elem" :class="cssClass" @focus="onRootFocus" tabindex="0">
         <div class="ui-input-tags-tags" v-if="value.length">
-            <!-- 
+            <!--
             @slot Tag slot
             @binding {String} tag       tag
             @binding {Function} remove  remove tag function(tag)
             -->
             <slot name="tag" v-for="tag in value" v-bind="{ tag, remove: removeTag }">
                 <ui-badge
-                    class="ui-input-tags-badge mar-none mar-right-2 mar-bot-2 pull-left"
+                    class="ui-input-tags-badge mar-none mar-right-2 mar-bot-2 pull-left cursor-pointer"
+                    :class="{ 'ui-input-tags-badge--selected': tagSelected === tag }"
                     theme="primary"
                     size="small"
                     :key="tag"
@@ -19,7 +20,7 @@
                 </ui-badge>
             </slot>
         </div>
-        <!-- 
+        <!--
         @slot Custom input slot
         @binding {String} id            input id attribute value
         @binding {String} value         input value
@@ -52,10 +53,11 @@
         </slot>
     </div>
 </template>
-<style lang="less" scoped>
+<style lang="pcss" scoped>
 .ui-input-tags {
     display: inline-flex;
     flex-wrap: wrap;
+
     &-input {
         line-height: 1.5;
         border: none;
@@ -64,13 +66,18 @@
         background: transparent;
         outline: none;
     }
+
     &-tags {
         max-width: 100%;
     }
+
     &-badge {
         white-space: normal;
         overflow-wrap: break-word;
         word-break: break-word;
+        &--selected {
+            background-color: var(--color-primary-dark);
+        }
     }
 }
 </style>
@@ -113,6 +120,7 @@ export default {
     data() {
         return {
             newTag: '',
+            tagSelected: null,
             inputBinds: {
                 placeholder: this.placeholder,
                 readonly: this.readonly,
@@ -121,11 +129,15 @@ export default {
                 input: this.onInputInput,
                 focus: this.onInputFocus,
                 blur: this.onInputBlur,
-                keyup: e => e.key == 'Enter' && this.onInputEnter(e),
+                keydown: this.onInputKeydown
             },
         };
     },
     methods: {
+        /**
+         *
+         * @param {string} value
+         */
         setNewTag(value) {
             this.newTag = value;
         },
@@ -150,6 +162,9 @@ export default {
             this.$emit('change', tags);
             this.newTag = '';
         },
+        /**
+         * @param {string} tag
+         */
         removeTag(tag) {
             let tags = this.value.filter(t => t !== tag);
             /**
@@ -163,22 +178,118 @@ export default {
              */
             this.$emit('change', tags);
         },
-        onRootFocus(e) {
+        onRootFocus() {
             let input = this.getInputRef();
             input && input.focus();
         },
         onInputInput(e) {
             this.newTag = e.target.value;
+            this.tagSelected = null;
         },
-        onInputFocus(e) {
+        onInputFocus() {
             this.rootHasFocus = true;
         },
-        onInputBlur(e) {
+        onInputBlur() {
             this.rootHasFocus = false;
         },
+        /**
+         * @param {KeyboardEvent} e
+         */
         onInputEnter(e) {
+            e.preventDefault();
+            e.stopPropagation();
             this.addTag();
         },
+        /**
+         * @param {KeyboardEvent} e
+         */
+        onInputEsc(e) {
+            e.stopPropagation();
+            let input = this.getInputRef();
+            input && input.blur();
+        },
+        /**
+         *
+         * @param {number} direction
+         */
+        selectTag(direction = -1) {
+            const lastIndex = this.value.length - 1;
+            let tagSelected = this.tagSelected;
+
+            if (tagSelected === null) {
+                tagSelected = this.value[lastIndex] ?? null;
+            } else {
+                let index = this.value.findIndex((tag) => tag === tagSelected) + direction;
+                if (index > lastIndex) {
+                    index = 0;
+                }
+                if (index < 0) {
+                    index = lastIndex;
+                }
+                tagSelected = this.value[index];
+            }
+
+            if (tagSelected === null) {
+                this.onRootFocus();
+            }
+            this.tagSelected = tagSelected;
+        },
+        /**
+         *
+         * @param {KeyboardEvent} e
+         * @return {boolean}
+         */
+        canSelectTag(e) {
+            return e.target.value === '' && ['Backspace', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].indexOf(e.code)
+        },
+        /**
+         *
+         * @param {KeyboardEvent} e
+         */
+        onInputKeydown(e) {
+            switch (e.code) {
+                case 'Tab':
+                case 'Comma':
+                case 'Semicolon':
+                case 'Enter': {
+                    this.onInputEnter(e);
+                    return;
+                }
+                case 'Escape': {
+                    this.onInputEsc(e);
+                    return;
+                }
+            }
+
+            if (this.canSelectTag(e) === false) {
+                return;
+            }
+
+            switch (e.code) {
+                case 'Backspace': {
+                    if (this.tagSelected === null) {
+                        this.selectTag();
+                        return;
+                    }
+                    this.removeTag(this.tagSelected);
+                    this.tagSelected = null;
+                    this.$nextTick(() => {
+                        this.selectTag();
+                    });
+                    return;
+                }
+                case 'ArrowLeft':
+                case 'ArrowUp': {
+                    this.selectTag(-1);
+                    return;
+                }
+                case 'ArrowRight':
+                case 'ArrowDown': {
+                    this.selectTag(1);
+                    return;
+                }
+            }
+        }
     },
 };
 </script>

package/src/components/ui/Select.vue

@@ -411,18 +411,25 @@ export default {
         onKeyDown(e) {
             let list = this.getDatalistRef();
             if (e.key === Key.ESC) {
-                this.popoverShow = false;
+                if (this.popoverShow) {
+                    e.stopPropagation();
+                    this.popoverShow = false;
+                    return;
+                }
+                if (this.rootHasFocus) {
+                    e.stopPropagation();
+                    this.rootHasFocus = false;
+                    this.$el.blur();
+                }
                 return;
             }
-            if (e.key === Key.ENTER) {
-                if (!this.popoverShow) {
-                    this.popoverShow = true;
-                }
+            if (e.key === Key.ENTER && !this.popoverShow) {
+                this.popoverShow = true;
             }
             if (this.popoverShow) {
                 list && list.onKeyDown(e);
             }
-        },
-    },
+        }
+    }
 };
 </script>