@awes-io/ui 2.46.0 → 2.47.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.47.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.46.0...@awes-io/ui@2.47.0) (2022-03-31)
+
+
+### Features
+
+* **aw-tel:** placeholder replaced with mask ([e54e324](https://github.com/awes-io/client/commit/e54e324cb9ec576f583070a74a06349c23270685))
+
+
+
+
+
 # [2.46.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.45.0...@awes-io/ui@2.46.0) (2022-03-17)
 
 

package/assets/css/components/tel.css

@@ -29,7 +29,10 @@
 
     &__dropdown {
         width: 100%;
-        max-height: 50vh;
+
+        &.aw-dropdown--desktop {
+            max-height: 50vh;
+        }
     }
 
     &__validity {

package/components/3_organisms/AwTel.vue

@@ -3,8 +3,7 @@
         <AwInput
             ref="input"
             v-bind="$attrs"
-            :value="value"
-            :placeholder="placeholder"
+            :value="phoneValue"
             v-on="mergedListeners"
         >
             <template
@@ -16,11 +15,7 @@
                     v-tooltip.show.prepend="errorTooltip"
                     :aria-describedby="errorText ? errorId : null"
                     :class="cssClass"
-                    :value="
-                        phoneNumber.isValid()
-                            ? phoneNumber.format('INTERNATIONAL')
-                            : phoneNumber.number
-                    "
+                    :value="phoneValue"
                     type="tel"
                     v-on="mergedListeners"
                 />
@@ -32,7 +27,10 @@
                     @click="_openCountriesDropdown"
                 >
                     <span tabindex="-1" class="aw-tel__flag">
-                        <i class="flag" :class="country.toLowerCase()"></i>
+                        <i
+                            class="flag"
+                            :class="(country || '').toLowerCase()"
+                        ></i>
                     </span>
                 </button>
             </template>
@@ -41,15 +39,13 @@
                     v-show="!!value"
                     class="aw-tel__validity"
                     :class="
-                        phoneNumber.isValid()
+                        phoneNumber.valid
                             ? 'aw-tel__validity--valid'
                             : 'aw-tel__validity--invalid'
                     "
                 >
                     <AwIconSystemMono
-                        :name="
-                            phoneNumber.isValid() ? 'check-light' : 'ban-light'
-                        "
+                        :name="phoneNumber.valid ? 'check-light' : 'ban-light'"
                     />
                 </span>
             </template>
@@ -58,21 +54,24 @@
             ref="dropdown"
             class="aw-tel__dropdown"
             :show.sync="showCountries"
+            :close-on-action="false"
             @click.native="_onCountryClick"
             @keydown.native="_keyFocusItem($event)"
         >
-            <AwDropdownButton
-                v-for="{ name, iso } in countries"
-                :key="iso"
-                :active="country === iso"
-                :data-country="iso"
-                tabindex="-1"
-            >
-                <span class="aw-tel__flag mr-3">
-                    <i class="flag" :class="iso.toLowerCase()"></i>
-                </span>
-                {{ name }}
-            </AwDropdownButton>
+            <template v-if="showCountries">
+                <AwDropdownButton
+                    v-for="{ name, iso } in countries"
+                    :key="iso"
+                    :active="country === iso"
+                    :data-country="iso"
+                    tabindex="-1"
+                >
+                    <span class="aw-tel__flag mr-3">
+                        <i class="flag" :class="iso.toLowerCase()"></i>
+                    </span>
+                    {{ name }}
+                </AwDropdownButton>
+            </template>
         </AwDropdown>
     </div>
 </template>
@@ -153,19 +152,20 @@ export default {
     },
 
     data() {
-        let country = this.preselectCountry
-        const phoneNumber = this._parsePhoneNumber(this.value, country)
-
-        if (phoneNumber.isValid()) {
-            country = phoneNumber.country
-        }
-
-        const placeholder = this._getPlaceholder(country)
+        const phoneNumber = this._parsePhoneNumber(
+            this.value,
+            this.preselectCountry
+        )
+        const country = phoneNumber.country
+        const countries = this._getCountries(country)
+        const phoneValue = this._getPhoneValue(phoneNumber)
 
         return {
+            showCountries: false,
             country,
-            placeholder,
-            showCountries: false
+            countries,
+            phoneNumber,
+            phoneValue
         }
     },
 
@@ -174,29 +174,17 @@ export default {
             return {
                 ...this.$listeners,
                 input: this._onInput,
-                change: this._onInput
+                change: this._onInput,
+                paste: this._onPaste,
+                focus: this._onFocus,
+                click: this._onFocus
             }
         },
 
-        countries() {
-            return Array.isArray(this.filterCountries) &&
-                this.filterCountries.length
-                ? COUNTRIES.filter(
-                      (country) =>
-                          country.iso === this.country ||
-                          this.filterCountries.includes(country.iso)
-                  )
-                : COUNTRIES
-        },
-
         callingCode() {
             return this._getCallingCode(this.country)
         },
 
-        phoneNumber() {
-            return this._parsePhoneNumber(this.value, this.country)
-        },
-
         _arrowFocusSelector() {
             return '[data-country]'
         },
@@ -211,22 +199,53 @@ export default {
             handler(iso, oldIso) {
                 if (iso === oldIso) return
 
-                this.placeholder = this._getPlaceholder(iso)
-
-                if (oldIso) {
+                if (iso && oldIso) {
                     const value = this.value.replace(
                         '+' + this._getCallingCode(oldIso),
                         '+' + this.callingCode
                     )
                     const phoneNumber = this._parsePhoneNumber(value, iso)
 
+                    if (!this.phoneNumber.isEqual(phoneNumber)) {
+                        this.phoneNumber = phoneNumber
+                        this.phoneValue = this._getPhoneValue(phoneNumber)
+
+                        this._emitInput(phoneNumber)
+                    }
+                } else {
+                    const phoneNumber = this._parsePhoneNumber(this.value, iso)
+
+                    this.phoneNumber = phoneNumber
+                    this.phoneValue = this._getPhoneValue(phoneNumber)
+
                     this._emitInput(phoneNumber)
                 }
 
-                if (this.$refs.element) {
+                this.countries = this._getCountries(iso)
+
+                if (
+                    this.$refs.element &&
+                    this.$el.contains(document.activeElement)
+                ) {
                     this.$refs.element.focus()
+                    this.$nextTick(() => {
+                        this._setFocusToFirstDash(this.$refs.element)
+                    })
                 }
             }
+        },
+
+        value(value) {
+            const phoneNumber = this._parsePhoneNumber(value, this.country)
+
+            if (!this.phoneNumber.isEqual(phoneNumber)) {
+                this.phoneNumber = phoneNumber
+                this.phoneValue = this._getPhoneValue(phoneNumber)
+            }
+
+            if (phoneNumber.country && phoneNumber.country !== this.country) {
+                this.country = phoneNumber.country
+            }
         }
     },
 
@@ -234,20 +253,100 @@ export default {
         _onInput($event) {
             const value = $event.target.value
             const phoneNumber = this._parsePhoneNumber(value, this.country)
-
-            if (this.phoneNumber.isEqual(phoneNumber)) {
+            const phoneValue = this._getPhoneValue(phoneNumber)
+
+            // open dropdown on backspace
+            if (
+                phoneNumber.number === '' &&
+                phoneValue === this.phoneValue &&
+                $event.data === null
+            ) {
+                this.$nextTick(this._openCountriesDropdown)
                 return
             }
 
+            // save caret position
+            let pos = $event.target.selectionStart
+            let digit = pos > 0 ? value[pos - 1] : '_'
+            let adjustPosition = false
+
+            if (phoneValue !== this.phoneValue) {
+                adjustPosition = true
+
+                this.phoneNumber = phoneNumber
+                this.phoneValue = phoneValue
+
+                this._emitInput(phoneNumber)
+            }
+
+            if ($event.target.value !== this.phoneValue) {
+                adjustPosition = true
+
+                $event.target.value = this.phoneValue
+            }
+
+            if (phoneNumber.country && phoneNumber.country !== this.country) {
+                this.country = phoneNumber.country
+            }
+
             if (this.$refs.input.hasError) {
                 this.$refs.input.setError('')
             }
 
-            if (phoneNumber.isValid() && phoneNumber.country !== this.country) {
+            if ($event.data !== null && this.showCountries) {
+                this.showCountries = false
+            }
+
+            if (adjustPosition) {
+                this.$nextTick(() => {
+                    const newValue = $event.target.value
+                    const firstDashIndex = newValue.indexOf('_')
+                    const max =
+                        firstDashIndex > -1 ? firstDashIndex : newValue.length
+
+                    pos = Math.min(pos, max)
+
+                    while (
+                        newValue[pos - 1] !== digit &&
+                        pos < firstDashIndex
+                    ) {
+                        pos++
+                    }
+
+                    $event.target.setSelectionRange(pos, pos)
+                })
+            }
+        },
+
+        _onPaste($event) {
+            $event.preventDefault()
+
+            // replace all Data
+            const phone = $event.clipboardData.getData('text')
+
+            const phoneNumber = this._parsePhoneNumber(phone, this.country)
+
+            if (!this.phoneNumber.isEqual(phoneNumber)) {
+                this.phoneNumber = phoneNumber
+                this.phoneValue = this._getPhoneValue(phoneNumber)
+
+                this._emitInput(phoneNumber)
+            }
+
+            if (phoneNumber.country && phoneNumber.country !== this.country) {
                 this.country = phoneNumber.country
             }
 
-            this._emitInput(phoneNumber)
+            $event.target.focus()
+
+            this.$nextTick(() => {
+                this._onFocus({ target: $event.target })
+            })
+        },
+
+        _onFocus($event) {
+            this._setFocusToFirstDash($event.target)
+            this.showCountries = false
         },
 
         _onBlur($event) {
@@ -256,17 +355,22 @@ export default {
             }
         },
 
-        _getPlaceholder(iso) {
+        _getPlaceholder(iso, withCode = false) {
             const phoneNumber = getExampleNumber(iso, examples)
 
             if (phoneNumber) {
                 const number = phoneNumber.format('INTERNATIONAL')
-                const code = '+' + phoneNumber.countryCallingCode
 
-                return number
-                    .replace(code, '{code}')
-                    .replace(/\d/g, '_')
-                    .replace('{code}', code)
+                if (withCode) {
+                    const code = '+' + phoneNumber.countryCallingCode
+
+                    return number
+                        .replace(code, '{code}')
+                        .replace(/\d/g, '_')
+                        .replace('{code}', code)
+                } else {
+                    return number.replace(/\d/g, '_')
+                }
             } else {
                 return ''
             }
@@ -279,20 +383,45 @@ export default {
                 this.$el
             )
             this.showCountries = false
+
+            this.$refs.element.focus()
+            this.$nextTick(() => this._setFocusToFirstDash(this.$refs.element))
         },
 
-        _parsePhoneNumber(value, country) {
-            const number = typeof value === 'string' ? value : ''
-            const phoneNumber = parsePhoneNumberFromString(number, country)
+        _parsePhoneNumber(value = '', country) {
+            let number = typeof value === 'string' ? value : ''
+
+            number = number.replace(/\D/g, '')
+
+            number = number === this.callingCode ? '' : number
+
+            number = number && value.startsWith('+') ? '+' + number : number
+
+            let phoneNumber = parsePhoneNumberFromString(number, country)
 
             if (phoneNumber) {
-                return phoneNumber
+                return {
+                    number: phoneNumber.number,
+                    country: phoneNumber.country,
+                    countryCallingCode: phoneNumber.countryCallingCode,
+                    valid: phoneNumber.isValid(),
+                    format() {
+                        return phoneNumber.format.apply(phoneNumber, arguments)
+                    },
+                    isValid() {
+                        return phoneNumber.isValid.apply(phoneNumber, arguments)
+                    },
+                    isEqual() {
+                        return phoneNumber.isEqual.apply(phoneNumber, arguments)
+                    }
+                }
             } else {
                 // mock PhoneNumber class
                 return {
                     number,
                     country,
                     countryCallingCode: this.callingCode,
+                    valid: false,
                     format() {
                         return number
                     },
@@ -306,6 +435,30 @@ export default {
             }
         },
 
+        _getPhoneValue(phoneNumber) {
+            if (phoneNumber.number === '') {
+                return this._getPlaceholder(phoneNumber.country, true)
+            }
+
+            const placeholder = this._getPlaceholder(phoneNumber.country)
+
+            if (placeholder) {
+                const digits = phoneNumber.number.replace(/\D/g, '').split('')
+                const replaced = placeholder.replace(
+                    /_/g,
+                    () => digits.shift() || '_'
+                )
+
+                return digits.length
+                    ? replaced + digits.join('')
+                    : phoneNumber.valid
+                    ? replaced.replace(/_/g, '')
+                    : replaced
+            } else {
+                return phoneNumber.number
+            }
+        },
+
         _getCallingCode(iso) {
             return pathOr(
                 '',
@@ -314,11 +467,22 @@ export default {
             )
         },
 
+        _getCountries(includeIso) {
+            return Array.isArray(this.filterCountries) &&
+                this.filterCountries.length
+                ? COUNTRIES.filter(
+                      (country) =>
+                          country.iso === includeIso ||
+                          this.filterCountries.includes(country.iso)
+                  )
+                : COUNTRIES
+        },
+
         _emitInput(phoneNumber) {
             if (phoneNumber.number === this.value) return
 
             this.$emit('input', phoneNumber.number, {
-                isValid: phoneNumber.isValid(),
+                isValid: phoneNumber.valid,
                 country: phoneNumber.country,
                 number: {
                     national: phoneNumber.format('NATIONAL'),
@@ -341,6 +505,15 @@ export default {
                     el.focus()
                 }
             })
+        },
+
+        _setFocusToFirstDash(inputEl) {
+            const firstDashIndex = inputEl.value.indexOf('_')
+            const pos = inputEl.selectionStart
+
+            if (firstDashIndex > -1 && pos > firstDashIndex) {
+                inputEl.setSelectionRange(firstDashIndex, firstDashIndex)
+            }
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.46.0",
+    "version": "2.47.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -124,5 +124,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "45bd6aa3df580ebb16241da5502dbf4f781bf96a"
+    "gitHead": "fe6bdb700f0209121131bf1e68c0f9251c793b9a"
 }