@awes-io/ui 2.33.0 → 2.34.0

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/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.33.0",
+    "version": "2.34.0",
     "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",
@@ -66,6 +66,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": "a606ff331a97cd5cff79579935f12bde2ec2eedb"
+    "gitHead": "7cf70f84e64609355c655b32e92cbee0452c4765"
 }