@awes-io/ui 2.108.0 → 2.108.2

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.108.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.108.1...@awes-io/ui@2.108.2) (2024-08-23)
+
+
+### Bug Fixes
+
+* viewport check infinity loop removed ([5db5844](https://github.com/awes-io/client/commit/5db5844cb383dec764af89da7e6766972ecd26e0))
+
+
+
+
+
+## [2.108.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.108.0...@awes-io/ui@2.108.1) (2024-08-07)
+
+
+### Bug Fixes
+
+* **aw-code:** auto suggestion pastes all digits ([0032b66](https://github.com/awes-io/client/commit/0032b6643f4075839132e2c7c9847520ba8611fe))
+
+
+
+
+
 # [2.108.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.107.0...@awes-io/ui@2.108.0) (2024-07-30)
 
 

package/assets/css/components/refresh-wrapper.css

@@ -1,9 +1,10 @@
 .aw-refresh-wrapper {
     &__loader {
-         display: flex;
-         justify-content: center;
-         align-items: center;
-         width: 100%;
-         z-index: 9999;
-     }
+        fill: currentColor;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        z-index: 9999;
+    }
 }

package/components/3_organisms/AwCode.vue

@@ -31,7 +31,6 @@
                         type="tel"
                         inputmode="numeric"
                         pattern="[0-9]*"
-                        maxlength="1"
                         autocomplete="off"
                         :value="codeValue[i]"
                         :class="[elClasses.element, 'text-center p-3']"
@@ -49,6 +48,7 @@
 </template>
 
 <script>
+import { clamp } from 'rambdax'
 import { conf } from '@AwUtils/component'
 import { getBemClasses } from '@AwUtils/css'
 import { AwCode as _config } from '@AwConfig'
@@ -57,6 +57,8 @@ import fieldMixin from '@AwMixins/field'
 
 const SPACER_RE = /-/g
 
+const MAX_LENGTH = 1
+
 export default {
     name: 'AwCode',
 
@@ -159,15 +161,20 @@ export default {
     methods: {
         _onInput($event, index) {
             const field = $event.target
-            const parsed = field.value.replace(/\D/g, '')
-
-            // immedate update to prevent blinking
-            field.value = parsed
-            this.$set(this.codeValue, index, parsed)
-
-            // go to next field if current is not empty
-            if (parsed.length === field.maxLength) {
-                this._focus(field)
+            const parsed = this._parseValue($event.data)
+
+            // virtual keyboard auto-suggestion clicked
+            if (parsed.length > MAX_LENGTH) {
+                this._pasteValue(parsed)
+            } else {
+                // immedate update to prevent blinking
+                field.value = parsed
+                this.$set(this.codeValue, index, parsed)
+
+                // go to next field if current is not empty
+                if (parsed.length === MAX_LENGTH) {
+                    this._focus(field)
+                }
             }
 
             // reset error if exists
@@ -189,9 +196,28 @@ export default {
             }
         },
 
+        _parseValue(str) {
+            return (str || '').replace(/\D/g, '')
+        },
+
         _onPaste($event) {
             // if (this.error && this.error.length) this.resetError()
-            this.inputValue = $event.clipboardData.getData('text')
+            const value = this._parseValue($event.clipboardData.getData('text'))
+
+            this._pasteValue(value)
+        },
+
+        _pasteValue(value) {
+            this.inputValue = value
+
+            setTimeout(() => {
+                const field = this.$refs.fields[
+                    clamp(0, this.length, value.length)
+                ]
+
+                field.focus()
+                field.setSelectionRange(MAX_LENGTH, MAX_LENGTH)
+            }, 10)
         }
     }
 }

package/nuxt/pages/more.vue

@@ -8,6 +8,7 @@
                 color="mono"
                 icon="awesio/edit"
                 :href="profileUrl"
+                back
             />
         </div>
 

package/nuxt/templates/screen.plugin.js

@@ -62,8 +62,10 @@ if (typeof window !== 'undefined' && 'visualViewport' in window) {
                 viewport.offsetLeft + 'px'
             )
 
+            if (event.isCheck) return
+
             // double check!
-            setTimeout(viewportHandler, 60, { target: window.visualViewport })
+            setTimeout(viewportHandler, 60, { target: window.visualViewport, isCheck: true })
         })
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.108.0",
+    "version": "2.108.2",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "23930faef5cd5d91e72b8753a2968f3d5ab4510b"
+    "gitHead": "8237265ef90c03b278f2456a4779c2e8a332db35"
 }