@awes-io/ui 2.32.4 → 2.34.1

package/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.34.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.34.0...@awes-io/ui@2.34.1) (2021-11-25)
+
+
+### Bug Fixes
+
+* **aw-tel:** check if given value is string before parsing ([4161fb6](https://github.com/awes-io/client/commit/4161fb67b57ccea772a390769dab200baee15a44))
+
+
+
+
+
+# [2.34.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.33.0...@awes-io/ui@2.34.0) (2021-11-25)
+
+
+### Features
+
+* aw-tel component rewrited ([a072dda](https://github.com/awes-io/client/commit/a072dda44254d783b6445416bede84459639ce8d))
+
+
+
+
+
+# [2.33.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.32.5...@awes-io/ui@2.33.0) (2021-11-15)
+
+
+### Bug Fixes
+
+* mask works only in allowed inputs ([3dcc47e](https://github.com/awes-io/client/commit/3dcc47e1c58e4dac1763aaeb7f50d879c34799db))
+
+
+### Features
+
+* dayjs upgraded ([b1aa822](https://github.com/awes-io/client/commit/b1aa8228f2b7541acc180cad5bcb477a2d2a37d6))
+
+
+
+
+
+## [2.32.5](https://github.com/awes-io/client/compare/@awes-io/ui@2.32.4...@awes-io/ui@2.32.5) (2021-11-13)
+
+
+### Bug Fixes
+
+* **text-fields:** restore caret position respecting masked signs ([3fe927d](https://github.com/awes-io/client/commit/3fe927d7d2918e860c2104977fee570348754c21))
+
+
+
+
+
 ## [2.32.4](https://github.com/awes-io/client/compare/@awes-io/ui@2.32.3...@awes-io/ui@2.32.4) (2021-11-13)
 
 

package/assets/css/components/_index.css

@@ -62,6 +62,8 @@
 
 @import './tab-nav.css';
 
+@import './tel.css';
+
 @import './notification.css';
 
 @import './tags.css';

package/assets/css/components/tel.css

@@ -0,0 +1,49 @@
+.aw-tel {
+    position: relative;
+
+    .aw-text-field__prefix {
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    &__flag {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        vertical-align: middle;
+
+        .flag {
+            display: block !important;
+            flex-shrink: 0;
+            transform: scale(0.75);
+        }
+    }
+
+    &__country-toggler {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        align-self: stretch;
+    }
+
+    &__dropdown {
+        width: 100%;
+        max-height: 50vh;
+    }
+
+    &__validity {
+        @apply px-4;
+        display: none;
+
+        &--valid {
+            @apply text-accent;
+            display: block;
+        }
+
+        &--invalid {
+            @apply text-error;
+            display: block;
+        }
+    }
+}

package/assets/css/components/text-field.css

@@ -1,5 +1,3 @@
-@import 'vue-tel-input/dist/vue-tel-input.css';
-
 .aw-text-field {
     @apply border rounded text-base;
     position: relative;
@@ -64,83 +62,6 @@
         }
     }
 
-    /**
-     * Tel styles (overwrite vue-tel-input)
-     */
-    &.is-tel .vue-tel-input {
-        @apply bg-surface border-none;
-        border-color: theme('borderColor.default');
-        border-radius: theme('borderRadius.default');
-
-        input {
-            /* background-color: transparent; */
-            box-shadow: none;
-            min-width: 0;
-        }
-
-        .vti__dropdown {
-            position: static;
-            padding-left: theme('spacing.4');
-
-            &:focus {
-                outline: none;
-            }
-
-            &:hover,
-            &.open {
-                @apply bg-mono-300;
-            }
-        }
-
-        .vti__dropdown-list {
-            @apply shadow-lg bg-surface;
-            max-width: 100%;
-            max-height: 147px; /* include 53px of footer height */
-            border: none;
-            margin: 0;
-            top: 100%;
-            left: 0;
-            z-index: 11;
-
-            &:focus {
-                outline: none;
-            }
-
-            &.above {
-                top: auto;
-                bottom: 100%;
-                box-shadow: theme('boxShadow.lg-top');
-            }
-        }
-
-        &:focus-within {
-            box-shadow: none !important;
-            border-color: theme('borderColor.info');
-        }
-
-        .vti__dropdown-item {
-            @apply text-sm tracking-wider;
-            line-height: 19px;
-            padding: theme('spacing.3') theme('spacing.4');
-
-            &.highlighted,
-            &:hover,
-            &:focus {
-                outline: none;
-                @apply bg-mono-300;
-            }
-        }
-    }
-
-    &.is-tel.has-error .vue-tel-input {
-        @apply border-error;
-
-        input::placeholder {
-            @apply text-error opacity-100;
-        }
-    }
-
-
     /**
      * Textarea styles
      */
@@ -160,6 +81,9 @@
         background-color: var(--c-surface, inherit);
     }
 
+    &.is-hidden {
+        display: none;
+    }
 
     /**
      * Label styles

package/components/1_atoms/AwInput.vue

@@ -72,6 +72,22 @@
 import TextFieldMixin from '@AwMixins/text-field'
 import { AwInput as _config } from '@AwConfig'
 
+const INVALID_TYPES = [
+    { type: ',checkbox,', replacer: '<AwCheckbox /> or <AwSwitcher />' },
+    { type: ',radio,', replacer: '<AwRadio />' },
+    {
+        type: ',date,datetime,time,month,week,',
+        replacer: '<AwDate />'
+    },
+    { type: ',tel,', replacer: '<AwTel />' },
+    { type: ',color,', replacer: '<AwColor />' }
+]
+
+const getInvalidConfig = (type) => {
+    const _type = ',' + type + ','
+    return INVALID_TYPES.find((config) => config.type.includes(_type))
+}
+
 export default {
     name: 'AwInput',
 
@@ -84,10 +100,15 @@ export default {
             type: String,
             default: 'text',
             validator(type) {
-                if (['checkbox', 'radio', 'date'].includes(type)) {
-                    console.error(`Use <fb-${type}> instead`)
+                const config = getInvalidConfig(type)
+
+                if (config) {
+                    console.error(
+                        `Invalid type: ${type}. Use ${config.replacer} instead`
+                    )
                     return false
                 }
+
                 return true
             }
         },

package/components/3_organisms/AwIslandAvatar.vue

@@ -256,7 +256,7 @@ export default {
 
         onFileLoaded($event) {
             this.openCropModal($event.target.files[0])
-
+            $event.target.value = '' // reset to allow upload same file
             this.$refs.dropdown && this.$refs.dropdown.close()
         },
 

package/components/3_organisms/AwMoney.vue

@@ -11,6 +11,7 @@
                 v-tooltip.show.prepend="errorTooltip"
                 :aria-describedby="errorText ? errorId : null"
                 :class="cssClass"
+                type="tel"
                 v-on="_listeners"
             />
         </template>
@@ -32,6 +33,8 @@ const AW_INPUT_PROPS_KEYS = keys(AwInput.props)
 export default {
     name: 'AwMoney',
 
+    inheritAttrs: false,
+
     _config,
 
     components: {

package/components/3_organisms/AwTel.vue

@@ -1,84 +1,348 @@
 <template>
-    <div
-        class="aw-text-field is-tel relative"
-        :class="{ 'has-error': hasError }"
-        @invalid.capture="_onInvalid"
-    >
-        <VueTelInput
-            v-tooltip.show.prepend="errorTooltip"
-            v-bind="props"
-            v-on="listeners"
-        />
+    <div class="aw-tel f32" @focusout="_onBlur">
+        <AwInput
+            ref="input"
+            v-bind="$attrs"
+            :value="value"
+            :placeholder="placeholder"
+            v-on="mergedListeners"
+        >
+            <template
+                #element="{ cssClass, mergedAttributes, errorTooltip, errorText, errorId }"
+            >
+                <input
+                    ref="element"
+                    v-bind="mergedAttributes"
+                    v-tooltip.show.prepend="errorTooltip"
+                    :aria-describedby="errorText ? errorId : null"
+                    :class="cssClass"
+                    :value="
+                        phoneNumber.isValid()
+                            ? phoneNumber.format('INTERNATIONAL')
+                            : phoneNumber.number
+                    "
+                    type="tel"
+                    v-on="mergedListeners"
+                />
+            </template>
+            <template #prefix>
+                <button
+                    class="aw-tel__country-toggler focus-outline"
+                    @click="_openCountriesDropdown"
+                >
+                    <span tabindex="-1" class="aw-tel__flag">
+                        <i class="flag" :class="country.toLowerCase()"></i>
+                    </span>
+                </button>
+            </template>
+            <template #postfix>
+                <span
+                    v-show="!!value"
+                    class="aw-tel__validity"
+                    :class="
+                        phoneNumber.isValid()
+                            ? 'aw-tel__validity--valid'
+                            : 'aw-tel__validity--invalid'
+                    "
+                >
+                    <AwIconSystemMono
+                        :name="phoneNumber.isValid() ? 'check-light' : 'close'"
+                    />
+                </span>
+            </template>
+        </AwInput>
+        <AwDropdown
+            ref="dropdown"
+            class="aw-tel__dropdown"
+            :show.sync="showCountries"
+            @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>
+        </AwDropdown>
     </div>
 </template>
 
 <script>
-import errorMixin from '@AwMixins/error'
-import fieldMixin from '@AwMixins/field'
+import {
+    getCountries,
+    getCountryCallingCode,
+    getExampleNumber,
+    parsePhoneNumberFromString
+} from 'libphonenumber-js'
+import examples from 'libphonenumber-js/examples.mobile.json'
+import { pathOr } from 'rambdax'
+import { AwTel as _config } from '@AwConfig'
+import { getEventTargetAttribute } from '@AwUtils/events'
+import { conf } from '@AwUtils/component'
+import arrowFocusMixin from '@AwMixins/arrow-focus'
+
+let regionName
+
+try {
+    regionName = new Intl.DisplayNames([navigator.language], { type: 'region' })
+} catch (e) {
+    regionName = { of: (code) => code }
+}
+
+const COUNTRIES = getCountries()
+    .map((iso) => ({
+        iso,
+        name: regionName.of(iso),
+        code: getCountryCallingCode(iso)
+    }))
+    .sort((a, b) => {
+        let i = 0
+        let litA = a.name[i].toLowerCase()
+        let litB = b.name[i].toLowerCase()
+        const max = Math.min(a.name.length - 1, b.name.length - 1)
+
+        while (i < max && litA === litB) {
+            i++
+            litA = a.name[i].toLowerCase()
+            litB = b.name[i].toLowerCase()
+        }
+
+        return litA > litB ? 1 : litA < litB ? -1 : 0
+    })
 
 export default {
     name: 'AwTel',
 
     inheritAttrs: false,
 
-    components: {
-        VueTelInput: () =>
-            import('vue-tel-input').then(({ VueTelInput }) => VueTelInput)
-    },
+    mixins: [arrowFocusMixin],
+
+    COUNTRIES,
 
-    mixins: [errorMixin, fieldMixin],
+    _config,
 
     props: {
-        autoFormat: Boolean,
+        preselectCountry: {
+            type: String,
+            default() {
+                return conf(this, 'preselectCountry')
+            }
+        },
+
+        filterCountries: {
+            type: Array,
+            default() {
+                return conf(this, 'filterCountries')
+            }
+        },
 
-        value: {}
+        value: {
+            type: String,
+            default: ''
+        }
     },
 
     data() {
+        let country = this.preselectCountry
+        const phoneNumber = this._parsePhoneNumber(this.value, country)
+
+        if (phoneNumber.isValid()) {
+            country = phoneNumber.country
+        }
+
+        const placeholder = this._getPlaceholder(country)
+
         return {
-            VueTelInput: null
+            country,
+            placeholder,
+            showCountries: false
         }
     },
 
     computed: {
-        props() {
+        mergedListeners() {
             return {
-                autoFormat: this.autoFormat,
-                value: this.value,
-                inputOptions: {
-                    ...this.$attrs,
-                    ...this.skipAttr,
-                    id: this.id,
-                    type: 'tel',
-                    placeholder: this.label,
-                    styleClasses: 'aw-text-field__element p-3'
-                }
+                ...this.$listeners,
+                input: this._onInput,
+                change: this._onInput
             }
         },
 
-        listeners() {
-            return {
-                ...this.$listeners,
-                input: this._onInputProxy
+        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]'
+        },
+
+        _arrowFocusInited() {
+            return this.showCountries
+        }
+    },
+
+    watch: {
+        country: {
+            handler(iso, oldIso) {
+                if (iso === oldIso) return
+
+                this.placeholder = this._getPlaceholder(iso)
+
+                if (oldIso) {
+                    const value = this.value.replace(
+                        '+' + this._getCallingCode(oldIso),
+                        '+' + this.callingCode
+                    )
+                    const phoneNumber = this._parsePhoneNumber(value, iso)
+
+                    this._emitInput(phoneNumber)
+                }
+
+                if (this.$refs.element) {
+                    this.$refs.element.focus()
+                }
             }
         }
     },
 
     methods: {
-        // overwrite element getter from error mixin
-        _getElement() {
-            return this.$el && this.$el.querySelector('input[type="tel"]')
+        _onInput($event) {
+            const value = $event.target.value
+            const phoneNumber = this._parsePhoneNumber(value, this.country)
+
+            if (this.phoneNumber.isEqual(phoneNumber)) {
+                return
+            }
+
+            if (this.$refs.input.hasError) {
+                this.$refs.input.setError('')
+            }
+
+            if (phoneNumber.isValid() && phoneNumber.country !== this.country) {
+                this.country = phoneNumber.country
+            }
+
+            this._emitInput(phoneNumber)
+        },
+
+        _onBlur($event) {
+            if (!this.$el.contains($event.relatedTarget)) {
+                this.showCountries = false
+            }
         },
 
-        _onInputProxy(text) {
-            if (this.hasError && !!text) {
-                this.setError('')
+        _getPlaceholder(iso) {
+            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)
+            } else {
+                return ''
             }
+        },
+
+        _onCountryClick($event) {
+            this.country = getEventTargetAttribute(
+                $event,
+                'data-country',
+                this.$el
+            )
+            this.showCountries = false
+        },
 
-            if ((text || this.value) && this.value !== text) {
-                this.$emit('input', ...arguments)
+        _parsePhoneNumber(value, country) {
+            const number = typeof value === 'string' ? value : ''
+            const phoneNumber = parsePhoneNumberFromString(number, country)
+
+            if (phoneNumber) {
+                return phoneNumber
+            } else {
+                // mock PhoneNumber class
+                return {
+                    number,
+                    country,
+                    countryCallingCode: this.callingCode,
+                    format() {
+                        return number
+                    },
+                    isValid() {
+                        return false
+                    },
+                    isEqual(pn) {
+                        return pn.number === number && pn.country === country
+                    }
+                }
             }
+        },
+
+        _getCallingCode(iso) {
+            return pathOr(
+                '',
+                'code',
+                COUNTRIES.find((country) => iso === country.iso)
+            )
+        },
+
+        _emitInput(phoneNumber) {
+            if (phoneNumber.number === this.value) return
+
+            this.$emit('input', phoneNumber.number, {
+                isValid: phoneNumber.isValid(),
+                country: phoneNumber.country,
+                number: {
+                    national: phoneNumber.format('NATIONAL'),
+                    international: phoneNumber.format('INTERNATIONAL'),
+                    e164: phoneNumber.number,
+                    rfc3966: phoneNumber.format('RFC3966')
+                }
+            })
+        },
+
+        _openCountriesDropdown() {
+            this.showCountries = true
+
+            this.$nextTick(() => {
+                const el =
+                    this.$refs.dropdown &&
+                    this.$refs.dropdown.$el.querySelector('.is-active')
+
+                if (el) {
+                    el.focus()
+                }
+            })
         }
     }
 }
 </script>
+
+<style lang="postcss">
+@import 'world-flags-sprite/stylesheets/flags32.css';
+</style>

package/components/_config.js

@@ -209,6 +209,11 @@ export const AwTags = {
     colors: COLORS
 }
 
+export const AwTel = {
+    preselectCountry: 'DE',
+    filterCountries: []
+}
+
 export default {
     AwAvatar,
     AwButton,
@@ -225,5 +230,6 @@ export default {
     AwPage,
     AwModal,
     AwTable,
-    AwTags
+    AwTags,
+    AwTel
 }