@awes-io/ui 2.32.5 → 2.34.2

package/mixins/arrow-focus.js

@@ -1,11 +1,25 @@
+const IS_SEARCH_KEY_RE = /^\S$/i
+
 export default {
+    computed: {
+        _arrowFocusSelector() {
+            return '[data-arrow-focus]'
+        },
+
+        _arrowFocusInited() {
+            return this.isOpened
+        }
+    },
+
     methods: {
         _arrowFocusItem(offset = 0, $event) {
-            if (!this.isOpened) return
+            if (!this._arrowFocusInited) return
 
-            const buttons = Array.from(
-                this.$el.querySelectorAll('[data-arrow-focus]')
-            )
+            this._arrowFocus(offset, $event)
+        },
+
+        _arrowFocus(offset, $event) {
+            const buttons = this._getFocusItems()
             const active = document.activeElement
             const activeIndex = buttons.indexOf(active)
             let nextIndex
@@ -25,6 +39,53 @@ export default {
                 }
                 button.focus()
             }
+        },
+
+        _keyFocusItem($event) {
+            const { key, keyCode } = $event
+
+            if (keyCode === 38 || keyCode === 40) {
+                const offset = keyCode === 38 ? -1 : 1
+
+                this._arrowFocus(offset, $event)
+            } else if (IS_SEARCH_KEY_RE.test(key)) {
+                const buttons = this._getFocusItems()
+                const active = document.activeElement
+                const re = new RegExp('^(\\s+)?' + key, 'i')
+                let button
+
+                if (buttons.includes(active) && re.test(active.textContent)) {
+                    const currentIndex = buttons.indexOf(active)
+                    const next = buttons[currentIndex + 1]
+
+                    if (next && re.test(next.textContent)) {
+                        button = next
+                    } else {
+                        const firstIndex = buttons.findIndex((_btn) =>
+                            re.test(_btn.textContent)
+                        )
+                        if (firstIndex !== currentIndex) {
+                            button = buttons[firstIndex]
+                        }
+                    }
+                } else {
+                    button = buttons.find((_btn) => re.test(_btn.textContent))
+                }
+
+                if (button) {
+                    if ($event) {
+                        $event.preventDefault()
+                        $event.stopPropagation()
+                    }
+                    button.focus()
+                }
+            }
+        },
+
+        _getFocusItems() {
+            return Array.from(
+                this.$el.querySelectorAll(this._arrowFocusSelector)
+            )
         }
     }
 }

package/mixins/text-field.js

@@ -75,6 +75,22 @@ export default {
                 invalid: this._onInvalid,
                 animationstart: this._autoFillHack
             }
+        },
+
+        _isMaskable() {
+            const type = this.type || this.$attrs.type
+
+            return !type || ['text', 'search', 'url', 'password'].includes(type)
+        },
+
+        process() {
+            return this.pattern &&
+                typeof (
+                    this.pattern === 'string' || this.pattern instanceof RegExp
+                ) &&
+                this._isMaskable
+                ? this._applyFormat
+                : this._stub
         }
     },
 
@@ -89,33 +105,14 @@ export default {
 
     methods: {
         _onInput($event) {
-            if (!$event.isTrusted) return // avoid infinite loop
-
-            const el = $event.target
-            const value = this._applyFormat(el.value) // get masked value
-            const eventType = $event.type
-
-            let pos = el.selectionEnd // save caret position
-            const lastSign = el.value[pos - 1] // save last sign
-
-            el.value = value
-
-            // calculate new caret position if mask inserted symbols
-            while (pos < value.length && value.charAt(pos - 1) !== lastSign) {
-                pos++
-            }
-
-            // restore caret position
-            this.$nextTick(() => {
-                el.setSelectionRange(pos, pos)
-            })
+            const value = this.process($event)
 
             if (this.hasError) {
                 this.setError('')
             }
 
-            if (this.$listeners[eventType]) {
-                this.$emit(eventType, value)
+            if (this.$listeners[$event.type]) {
+                this.$emit($event.type, value)
             } else {
                 this.inputValue = value
             }
@@ -136,26 +133,48 @@ export default {
             }
         },
 
-        _applyFormat(value) {
+        _applyFormat($event) {
+            const el = $event.target
+            let value = el.value
+
             // mask
             if (typeof this.pattern === 'string') {
-                return this._mask(value, this.pattern)
+                value = this._mask(value)
             }
 
             // regex pattern
             if (this.pattern instanceof RegExp) {
-                const match = this.pattern.exec(value)
-                this.pattern.lastIndex = 0 // reset for next cycles
+                value = this._regex(value)
+            }
+
+            // avoid infinite loop
+            if ($event.isTrusted) {
+                let pos = el.selectionEnd // save caret position
+                const lastSign = el.value[pos - 1] // save last sign
+
+                el.value = value
+
+                // calculate new caret position if mask inserted symbols
+                while (
+                    pos < value.length &&
+                    value.charAt(pos - 1) !== lastSign
+                ) {
+                    pos++
+                }
 
-                return match ? match[0] : ''
+                // restore caret position
+                this.$nextTick(() => {
+                    el.setSelectionRange(pos, pos)
+                })
             }
 
             return value
         },
 
-        _mask(value, mask, masked = true) {
+        _mask(value) {
             value = value || ''
-            mask = mask || ''
+
+            let mask = this.pattern || ''
             let iMask = 0
             let iValue = 0
             let output = ''
@@ -178,7 +197,7 @@ export default {
                         iMask++ // take the next mask char and treat it as char
                         cMask = mask[iMask]
                     }
-                    if (masked) output += cMask
+                    output += cMask
                     if (cValue === cMask) iValue++ // user typed the same char
                     iMask++
                 }
@@ -187,7 +206,7 @@ export default {
             // fix mask that ends with a char: (#)
             let restOutput = ''
 
-            while (iMask < mask.length && masked) {
+            while (iMask < mask.length) {
                 let cMask = mask[iMask]
                 if (this.maskTokens[cMask]) {
                     restOutput = ''
@@ -198,6 +217,17 @@ export default {
             }
 
             return output + restOutput
+        },
+
+        _regex(value) {
+            const match = this.pattern.exec(value)
+            this.pattern.lastIndex = 0 // reset for next cycles
+
+            return match ? match[0] : ''
+        },
+
+        _stub($event) {
+            return ($event.target && $event.target.value) || ''
         }
     }
 }

package/nuxt/icons.css

@@ -0,0 +1,168 @@
+@font-face {
+    font-family: "aw-icons";
+    src: url("../dist/fonts/aw-icons.woff2?f7781284402a16642f82aa8273369343") format("woff2"),
+url("../dist/fonts/aw-icons.woff?f7781284402a16642f82aa8273369343") format("woff");
+}
+
+.aw-icon {
+    display: inline-block;
+    line-height: 1;
+    overflow: hidden;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.aw-icon:before {
+    font-family: aw-icons !important;
+    font-style: normal;
+    font-weight: normal !important;
+    vertical-align: top;
+}
+
+.aw-icon-arrow-d:before {
+    content: "\f101";
+}
+.aw-icon-arrow-l:before {
+    content: "\f102";
+}
+.aw-icon-arrow-r:before {
+    content: "\f103";
+}
+.aw-icon-arrow-u:before {
+    content: "\f104";
+}
+.aw-icon-bold:before {
+    content: "\f105";
+}
+.aw-icon-briefcase:before {
+    content: "\f106";
+}
+.aw-icon-burger:before {
+    content: "\f107";
+}
+.aw-icon-check-circle:before {
+    content: "\f108";
+}
+.aw-icon-check-solid:before {
+    content: "\f109";
+}
+.aw-icon-check:before {
+    content: "\f10a";
+}
+.aw-icon-chevron-d:before {
+    content: "\f10b";
+}
+.aw-icon-chevron-l:before {
+    content: "\f10c";
+}
+.aw-icon-chevron-r:before {
+    content: "\f10d";
+}
+.aw-icon-chevron-u:before {
+    content: "\f10e";
+}
+.aw-icon-circle:before {
+    content: "\f10f";
+}
+.aw-icon-close-circle:before {
+    content: "\f110";
+}
+.aw-icon-close-solid:before {
+    content: "\f111";
+}
+.aw-icon-close:before {
+    content: "\f112";
+}
+.aw-icon-copy:before {
+    content: "\f113";
+}
+.aw-icon-drag:before {
+    content: "\f114";
+}
+.aw-icon-external:before {
+    content: "\f115";
+}
+.aw-icon-eye-no:before {
+    content: "\f116";
+}
+.aw-icon-eye:before {
+    content: "\f117";
+}
+.aw-icon-font-size:before {
+    content: "\f118";
+}
+.aw-icon-graph:before {
+    content: "\f119";
+}
+.aw-icon-intelligence:before {
+    content: "\f11a";
+}
+.aw-icon-italic:before {
+    content: "\f11b";
+}
+.aw-icon-loader:before {
+    content: "\f11c";
+}
+.aw-icon-location:before {
+    content: "\f11d";
+}
+.aw-icon-minus:before {
+    content: "\f11e";
+}
+.aw-icon-more-v:before {
+    content: "\f11f";
+}
+.aw-icon-more:before {
+    content: "\f120";
+}
+.aw-icon-plus-solid:before {
+    content: "\f121";
+}
+.aw-icon-plus:before {
+    content: "\f122";
+}
+.aw-icon-quote:before {
+    content: "\f123";
+}
+.aw-icon-schedule:before {
+    content: "\f124";
+}
+.aw-icon-search:before {
+    content: "\f125";
+}
+.aw-icon-settings:before {
+    content: "\f126";
+}
+.aw-icon-speaker:before {
+    content: "\f127";
+}
+.aw-icon-speed:before {
+    content: "\f128";
+}
+.aw-icon-storage:before {
+    content: "\f129";
+}
+.aw-icon-triangle-d:before {
+    content: "\f12a";
+}
+.aw-icon-triangle-l:before {
+    content: "\f12b";
+}
+.aw-icon-triangle-r:before {
+    content: "\f12c";
+}
+.aw-icon-triangle-solid-r:before {
+    content: "\f12d";
+}
+.aw-icon-triangle-u:before {
+    content: "\f12e";
+}
+.aw-icon-upload:before {
+    content: "\f12f";
+}
+.aw-icon-user-solid:before {
+    content: "\f130";
+}
+.aw-icon-user:before {
+    content: "\f131";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.32.5",
+    "version": "2.34.2",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -51,7 +51,7 @@
     "dependencies": {
         "@casl/ability": "^4.1.6",
         "@casl/vue": "^1.1.1",
-        "@nuxtjs/axios": "^5.12.4",
+        "@nuxtjs/axios": "^5.13.6",
         "@nuxtjs/svg-sprite": "^0.5.2",
         "@popperjs/core": "^2.0.5",
         "autosize": "^4.0.2",
@@ -62,10 +62,11 @@
         "cookies": "^0.8.0",
         "core-js": "^2.6.5",
         "croppie": "^2.6.5",
-        "dayjs": "^1.8.26",
+        "dayjs": "^1.10.7",
         "hammerjs": "^2.0.8",
         "insane": "^2.6.2",
         "js-cookie": "^2.2.1",
+        "libphonenumber-js": "^1.9.43",
         "loadjs": "^3.6.1",
         "marked": "^0.7.0",
         "postcss-color-function": "^4.1.0",
@@ -76,7 +77,7 @@
         "tailwindcss": "^1.9.6",
         "vue-currency-input": "^1.22.3",
         "vue-i18n": "^8.14.0",
-        "vue-tel-input": "5.3.0"
+        "world-flags-sprite": "^0.0.2"
     },
     "devDependencies": {
         "@babel/core": "^7.5.5",
@@ -123,5 +124,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "47c2efe083a4ec4d7f5aa81178f721eb787285bb"
+    "gitHead": "00c9d7a17f45c384bc15d55e3c7a5d2025b54956"
 }