@awes-io/ui 2.42.1 → 2.45.0

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.45.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.44.0...@awes-io/ui@2.45.0) (2022-03-17)
+
+
+### Features
+
+* birthday-picker updated ([4b7bedc](https://github.com/awes-io/client/commit/4b7bedc64c5358673540120fb8a7b647d8444e90))
+
+
+
+
+
+# [2.44.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.43.0...@awes-io/ui@2.44.0) (2022-03-10)
+
+
+### Bug Fixes
+
+* remove mask import ([5fd53f3](https://github.com/awes-io/client/commit/5fd53f3e5204dd25fdbcbb727111c9d490c74788))
+
+
+### Features
+
+* replace vue-the-mask with pattern ([a9af187](https://github.com/awes-io/client/commit/a9af18764acee563ca6ec242b9b18dbba95f4542))
+* ui updates ([a2d34b7](https://github.com/awes-io/client/commit/a2d34b77c8a0e0a680066a0a81382b3dc2d7d243))
+* **aw-birthday-picker:** refactor ([79f3459](https://github.com/awes-io/client/commit/79f345921520f91488d5b3c1feafc10c3897ac54))
+
+
+
+
+
+# [2.43.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.42.1...@awes-io/ui@2.43.0) (2022-02-28)
+
+
+### Features
+
+* blocked twofactor auth ([dbef9a3](https://github.com/awes-io/client/commit/dbef9a3d9989d8a33ba276a73c3a32ec184b5e5e))
+
+
+
+
+
 ## [2.42.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.42.0...@awes-io/ui@2.42.1) (2022-02-10)
 
 

package/assets/css/components/animation.css

@@ -23,3 +23,37 @@
         transform: scale(1.3);
     }
 }
+
+@keyframes aw-shake {
+ 0%,
+ 100% {
+  transform:translateX(0)
+ }
+ 10% {
+  transform:translateX(-9px)
+ }
+ 20% {
+  transform:translateX(8px)
+ }
+ 30% {
+  transform:translateX(-7px)
+ }
+ 40% {
+  transform:translateX(6px)
+ }
+ 50% {
+  transform:translateX(-5px)
+ }
+ 60% {
+  transform:translateX(4px)
+ }
+ 70% {
+  transform:translateX(-3px)
+ }
+ 80% {
+  transform:translateX(2px)
+ }
+ 90% {
+  transform:translateX(-1px)
+ }
+}

package/assets/css/components/birthday-picker.css

@@ -1,18 +1,32 @@
 .aw-birthday-picker {
     &__wrap {
+        @apply border rounded bg-surface justify-between;
         display: flex;
         align-items: center;
-        gap: theme('spacing.3', 0,75rem);
-    }
+        text-align: center;
+        transition: 200ms border-color;
+
+        &.has-error {
+            @apply border-error;
+            animation: 700ms aw-shake ease-out-quad;
+        }
 
-    &__day {
-        min-width: 6rem;
-        flex-basis: 20%;
+        &:focus-within {
+            border-color: var(--c-info);
+        }
     }
 
-    &__month,
-    &__year {
-        min-width: 5rem;
-        flex-basis: 40%;
+    &__input {
+        @apply p-3;
+        text-align: center;
+        border-width: none;
+        border-radius: 0;
+        flex: 1 1 auto;
+
+        & + & {
+            @apply border-l;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
     }
 }

package/assets/css/components/bottom-bar.css

@@ -9,6 +9,7 @@
     position: sticky;
     bottom: 0;
     min-height: 4rem;
+    z-index: 20;
 
     & > * {
         flex-basis: theme('spacing.20', 5rem);

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

@@ -158,7 +158,7 @@
      */
 
     &.has-error {
-        animation: 700ms shake ease-out-quad;
+        animation: 700ms aw-shake ease-out-quad;
     }
 
     &.has-error {
@@ -198,40 +198,6 @@
     }
 }
 
-@keyframes shake {
- 0%,
- 100% {
-  transform:translateX(0)
- }
- 10% {
-  transform:translateX(-9px)
- }
- 20% {
-  transform:translateX(8px)
- }
- 30% {
-  transform:translateX(-7px)
- }
- 40% {
-  transform:translateX(6px)
- }
- 50% {
-  transform:translateX(-5px)
- }
- 60% {
-  transform:translateX(4px)
- }
- 70% {
-  transform:translateX(-3px)
- }
- 80% {
-  transform:translateX(2px)
- }
- 90% {
-  transform:translateX(-1px)
- }
-}
-
 @keyframes autoFillStart {
     from {
         opacity: 1

package/assets/css/components/tooltip.css

@@ -10,7 +10,7 @@
 
     &[data-visible] {
         display: block;
-        z-index: 20;
+        z-index: 19;
     }
 
     &[data-popper-reference-hidden] {

package/components/1_atoms/AwSwitcher.vue

@@ -193,9 +193,9 @@ export default {
             const isDisabled =
                 Object.keys(this.$attrs).includes('disabled') &&
                 this.$attrs.disabled
-            const hasTooltip = !!this.errorText
+            // const hasTooltip = !!this.errorText /* blocks switcher */
 
-            if (this.startPos !== null || isDisabled || hasTooltip) return
+            if (this.startPos !== null || isDisabled /* || hasTooltip */) return
 
             this.startPos = $event.screenX
             this.isTouch = $event.type === 'touchstart'

package/components/2_molecules/AwSelectObject.vue

@@ -687,6 +687,7 @@ export default {
         _selectOnEnter() {
             // close if nothing typed
             if (this._showNotFound) {
+                this.$emit('not-found', this.searchPhrase)
                 this.searchPhrase = ''
                 this.close()
                 return
@@ -698,9 +699,7 @@ export default {
             if (firstOption) {
                 this._selectIndex(firstOption.index)
             } else {
-                // emit not found
                 this.isOpened = false
-                this.$emit('not-found', this.searchPhrase)
             }
         },
 

package/components/3_organisms/AwBirthdayPicker.vue

@@ -1,69 +1,79 @@
 <template>
     <AwInfo :label="label" class="aw-birthday-picker">
-        <div class="aw-birthday-picker__wrap">
-            <AwSelect
-                v-model="month"
-                :options="monthsList"
+        <div
+            ref="element"
+            v-tooltip.show.prepend="errorTooltip"
+            :class="{ 'has-error': hasError && errorText }"
+            class="aw-text-field aw-birthday-picker__wrap"
+        >
+            <input
+                v-for="{ key, ...attrs } in _inputs"
+                :key="key"
                 :required="required"
-                :name="_inputKeys.month"
-                :label="$t('AwBirthdayPicker.month')"
-                track-by="value"
-                option-label="text"
-                class="aw-birthday-picker__month"
-                @input="checkMaxDay"
+                :value="$data[key]"
+                v-bind="attrs"
+                inputmode="numeric"
+                class="aw-text-field__element aw-birthday-picker__input"
+                @keydown="onKeydown"
+                @input="onInput"
+                @focus="onInputFocus"
             />
-
-            <AwSelect
-                v-model="day"
-                :options="daysList"
-                :required="required"
-                :name="_inputKeys.day"
-                :label="$t('AwBirthdayPicker.day')"
-                class="aw-birthday-picker__day"
-                @input="emit"
-            />
-
-            <div class="aw-birthday-picker__year">
-                <AwLink
-                    v-if="!_showYear"
-                    :text="$t('AwBirthdayPicker.set_year')"
-                    @click="isYearHidden = false"
-                />
-
-                <AwSelect
-                    v-else
-                    v-model="year"
-                    :options="yearsList"
-                    :required="required"
-                    :name="_inputKeys.year"
-                    :label="$t('AwBirthdayPicker.year')"
-                    :clearable="!showYear"
-                    :option-disabled="isOptionDisabled"
-                    class="w-full"
-                    track-by="year"
-                    option-label="year"
-                    @input="checkMaxDay"
-                    @clear="clearYear"
-                />
-            </div>
         </div>
     </AwInfo>
 </template>
 
 <script>
 import birthdayMixin from '@AwMixins/birthday'
-import { isNil } from 'rambdax'
+import errorMixin from '@AwMixins/error'
+import { AwBirthdayPicker as _config } from '@AwConfig'
+import { conf } from '@AwUtils/component'
+
+const KEY_ATTR = 'data-key'
+
+const ALLOWED_KEYS = [
+    'Delete',
+    'Backspace',
+    'Shift',
+    'ArrowLeft',
+    'ArrowRight',
+    'Tab'
+]
+
+const PLACEHOLDER_KEY_MAP = {
+    DD: 'day',
+    MM: 'month',
+    YYYY: 'year'
+}
 
-const DEFAULT_KEYS = {
+const PLACEHOLDER_MAP = {
+    day: 'DD',
+    month: 'MM',
+    year: 'YYYY'
+}
+
+const NAME_MAP = {
     day: 'birthday_day',
     month: 'birthday_month',
     year: 'birthday_year'
 }
 
+const MASK_MAP = {
+    day: '\\d{2}',
+    month: '\\d{2}',
+    year: '\\d{4}'
+}
+
+const PROCESSOR_MAP = {
+    day: '_processDay',
+    month: '_processMonth'
+}
+
 export default {
     name: 'AwBirthdayPicker',
 
-    mixins: [birthdayMixin],
+    mixins: [birthdayMixin, errorMixin],
+
+    _config,
 
     props: {
         value: {
@@ -76,14 +86,6 @@ export default {
             default: false
         },
 
-        /**
-         * If true show year select by default
-         */
-        showYear: {
-            type: Boolean,
-            default: false
-        },
-
         /**
          * Inputs names for native form submission,
          * Accepted values: day, month, year.
@@ -98,55 +100,76 @@ export default {
             default() {
                 return this.$t('AwBirthdayPicker.birthday')
             }
+        },
+
+        /**
+         * Custom parse format for string dates with year,
+         * for example `YYYY-MM-DD`.
+         */
+        fullParseFormat: {
+            type: String,
+            default() {
+                return conf(this, 'fullParseFormat')
+            }
+        },
+
+        /**
+         * Custom parse format for string dates without year,
+         * for example `MM-DD`.
+         */
+        shortParseFormat: {
+            type: String,
+            default() {
+                return conf(this, 'shortParseFormat')
+            }
+        },
+
+        /**
+         * Input fields order
+         */
+        fieldsOrder: {
+            type: String,
+            default() {
+                return conf(this, 'fieldsOrder')
+            }
         }
     },
 
     data() {
         return {
-            month: null,
             day: null,
+            month: null,
             year: null,
-            isYearHidden: true
+            maxDay: 31
         }
     },
 
     computed: {
-        _showYear() {
-            return this.showYear || !this.isYearHidden
+        _inputsOrder() {
+            return this.fieldsOrder
+                .split(/(\.|-)/)
+                .reduce((acc, placeholder) => {
+                    const key = PLACEHOLDER_KEY_MAP[placeholder]
+                    return key ? acc.concat(key) : acc
+                }, [])
         },
 
-        _inputKeys() {
-            return {
-                ...DEFAULT_KEYS,
-                ...this.inputNames
-            }
-        },
-
-        monthsList() {
-            const date = this.$dayjs()
-            return [...Array(12).keys()].map((el) => ({
-                value: el,
-                text: date.month(el).format('MMMM')
+        _inputNames() {
+            return this._inputsOrder.map((key) => ({
+                name: this.inputNames[key] || NAME_MAP[key],
+                key
             }))
         },
 
-        daysList() {
-            const date = this.$dayjs().year(this.year || 2000)
-
-            const maxDays = date.month(this.month || 0).daysInMonth()
-
-            const arr = [...Array(maxDays + 1).keys()]
-            arr.shift()
-            return arr
-        },
-
-        yearsList() {
-            const current = this.$dayjs().year()
-            return [...Array(101).keys()].map((el) => ({
-                year: current - el,
-                isLeapYear: this.$dayjs()
-                    .year(current - el)
-                    .isLeapYear()
+        _inputs() {
+            return this._inputsOrder.map((key, i) => ({
+                key,
+                [KEY_ATTR]: key,
+                name: this._inputNames[i].name,
+                placeholder: this.$t('AwBirthdayPicker.' + key),
+                pattern: MASK_MAP[key],
+                maxlength: PLACEHOLDER_MAP[key].length,
+                inputmode: 'numeric'
             }))
         }
     },
@@ -156,11 +179,23 @@ export default {
             immediate: true,
             handler(val) {
                 const date = this.parseDate(val)
+
                 if (date) {
-                    this.month = date.month
-                    this.day = date.day
-                    this.year = date.year
-                    this.isYearHidden = !date.year
+                    const { day, month, year } = date
+
+                    let d = this.$dayjs()
+                        .year(2000)
+                        .month(month)
+                        .date(day)
+                        .startOf('day')
+
+                    if (year) {
+                        d = d.year(year)
+                        this.year = d.format(PLACEHOLDER_MAP.year)
+                    }
+
+                    this.day = d.format(PLACEHOLDER_MAP.day)
+                    this.month = d.format(PLACEHOLDER_MAP.month)
                 }
             }
         }
@@ -168,21 +203,113 @@ export default {
 
     methods: {
         checkMaxDay() {
-            const maxDay = this.daysList[this.daysList.length - 1]
-            this.day = this.day > maxDay ? maxDay : this.day
-            this.emit()
+            if (this.day) {
+                const m = this.month || 1
+                let d = this.$dayjs()
+                    .year(this.year || 2000)
+                    .month(m - 1)
+                    .startOf('month')
+
+                this.maxDay = d.daysInMonth()
+                this.day = this.day > this.maxDay ? this.maxDay : this.day
+            }
+        },
+
+        onKeydown($event) {
+            if (
+                isNaN(parseInt($event.key)) &&
+                !ALLOWED_KEYS.includes($event.key)
+            ) {
+                $event.preventDefault()
+            }
+
+            const key = this._getKey($event.target)
+
+            // arrow navigation
+            if ($event.key === 'ArrowRight' || $event.key === 'ArrowLeft') {
+                const length = $event.target.value.length
+                const { selectionStart, selectionEnd } = $event.target
+
+                let offset = 0
+
+                if (
+                    $event.key === 'ArrowRight' &&
+                    selectionStart === length &&
+                    selectionEnd === length
+                ) {
+                    offset = 1
+                }
+
+                if (
+                    $event.key === 'ArrowLeft' &&
+                    selectionStart === 0 &&
+                    selectionEnd === 0
+                ) {
+                    offset = -1
+                }
+
+                if (offset) {
+                    $event.preventDefault()
+                    this._focusByOffset(key, offset)
+                }
+            }
+
+            // backspace navigation
+            if ($event.key === 'Backspace' && !$event.target.value) {
+                $event.preventDefault()
+                this._focusByOffset(this._getKey($event.target), -1)
+            }
+        },
+
+        onInput($event) {
+            const key = this._getKey($event.target)
+            const processor = PROCESSOR_MAP[key]
+
+            if (processor) {
+                const correctValue = this[processor]($event.target.value)
+
+                if (correctValue !== $event.target.value) {
+                    $event.target.value = correctValue
+                }
+            }
+
+            this[key] = $event.target.value
+
+            this.checkMaxDay()
+
+            this.$nextTick(() => {
+                if (this._isComplete(this[key], key)) {
+                    this._focusByOffset(key, 1)
+                    this.emit()
+                } else if (this[key] === '') {
+                    this.emit()
+                }
+            })
+        },
+
+        onInputFocus($event) {
+            if ($event.target.value) {
+                setTimeout(() => {
+                    $event.target.setSelectionRange(
+                        0,
+                        $event.target.value.length
+                    )
+                }, 10)
+            }
         },
 
         emit() {
-            if (!isNil(this.month) && this.day) {
+            if (!this.month || !this.day) {
+                this.$emit('input', null)
+            } else if (this.month && this.day) {
                 let d = this.$dayjs()
                     .year(this.year || 2000)
-                    .month(this.month)
+                    .month(this.month - 1)
                     .date(this.day)
+                    .startOf('day')
                 let formatVal = this.shortParseFormat || 'MM-DD'
 
-                if (!this.isYearHidden && this.year) {
-                    d = d.year(this.year)
+                if (this.year) {
                     formatVal = this.fullParseFormat || null
                 }
 
@@ -193,18 +320,91 @@ export default {
             }
         },
 
-        clearYear() {
-            this.isYearHidden = true
-            this.year = null
-            this.emit()
+        _getKey(el) {
+            return el.getAttribute(KEY_ATTR)
         },
 
-        isOptionDisabled(option) {
-            if (this.month === 1 && this.day === 29) {
-                return !option.isLeapYear
+        _getKeyByOffset(key, offset) {
+            const index = this._inputsOrder.indexOf(key)
+
+            return index > -1 ? this._inputsOrder[index + offset] : undefined
+        },
+
+        _getKeyElement(key) {
+            return this.$refs.element.querySelector(`[${KEY_ATTR}="${key}"]`)
+        },
+
+        _isComplete(val = '', key) {
+            const numVal = parseInt(val)
+
+            // check if a number
+            if (isNaN(numVal)) {
+                return false
+            }
+
+            // check value length
+            if (
+                PLACEHOLDER_MAP[key] &&
+                val.length !== PLACEHOLDER_MAP[key].length
+            ) {
+                return false
+            }
+
+            // check range
+            switch (key) {
+                case 'day':
+                    return numVal > 1 && numVal <= this.maxDay
+                case 'month':
+                    return numVal > 1 && numVal <= 12
+                case 'year':
+                    return true
+                default:
+                    return false
             }
+        },
+
+        _focusByOffset(key, offset) {
+            const el = this._getKeyElement(this._getKeyByOffset(key, offset))
+
+            if (el) {
+                el.focus()
+            }
+        },
+
+        _processDateVal(val, min = 0, max) {
+            if (!val) return ''
+
+            const numVal = parseInt(val)
+
+            if (isNaN(numVal)) {
+                return ''
+            }
+
+            if (numVal > max) {
+                return String(max)
+            }
+
+            if (numVal < min) {
+                return ''
+            }
+
+            if (val.length === 1) {
+                const maxFirstDigit = Math.floor(max / 10)
+
+                if (numVal > maxFirstDigit) {
+                    return '0' + String(numVal)
+                }
+            }
+
+            return val
+        },
+
+        _processDay(val) {
+            return this._processDateVal(val, 0, this.maxDay)
+        },
 
-            return false
+        _processMonth(val) {
+            return this._processDateVal(val, 0, 12)
         }
     }
 }

package/components/3_organisms/AwDate.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="aw-date" @click="onDateClick">
         <AwInput
+            ref="input"
             v-bind="{ ...$attrs, label, id }"
             :value="inputValue"
             :prefix="prefix"
@@ -192,6 +193,10 @@ export default {
 
     watch: {
         value(value) {
+            if (this.$refs.input && this.$refs.input.hasError) {
+                this.$refs.input.setError('')
+            }
+
             if (value !== null && this.isOpened) {
                 this.isOpened = false
             }

package/components/4_pages/_AwButtonFixed.vue

@@ -1,6 +1,6 @@
 <template>
     <Component
-        :is="_linkComponent"
+        :is="locked ? 'button' : _linkComponent"
         v-bind="_linkAttrs"
         :style="buttonStyle"
         :disabled="_linkAttrs.disabled || locked"

package/components/5_layouts/_AwNoty.vue

@@ -15,7 +15,14 @@
             class="aw-noty__icon"
             :class="`text-${props.type}`"
         />
-        <svg
+        <Component
+            :is="$options.components.AwIconSystemMono"
+            v-else-if="props.icon === true"
+            :name="$options.getDefaultIconName(props.type)"
+            class="aw-noty__icon"
+            :class="`text-${props.type}`"
+        />
+        <!-- <svg
             v-else-if="props.icon"
             width="20"
             height="20"
@@ -25,7 +32,7 @@
             <path
                 d="M10 1.8a8.2 8.2 0 100 16.4 8.2 8.2 0 000-16.4zm4.1 6.5l-4.4 4.4a.7.7 0 01-1 0l-2.2-2.2a.7.7 0 111-1l1.7 1.8 4-4a.7.7 0 111 1zm0 0"
             />
-        </svg>
+        </svg> -->
 
         <!-- content -->
         <div class="aw-noty__content" :class="{ 'has-text': props.text }">
@@ -100,6 +107,17 @@ export default {
         }
     },
 
-    sanitize
+    sanitize,
+
+    getDefaultIconName(type) {
+        switch (type) {
+            case 'error':
+                return 'close-solid'
+            case 'warning':
+                return 'attention'
+            default:
+                return 'check-solid'
+        }
+    }
 }
 </script>

package/components/_config.js

@@ -13,6 +13,12 @@ export const AwAvatar = {
     colors: COLORS
 }
 
+export const AwBirthdayPicker = {
+    fullParseFormat: 'DD.MM.YYYY',
+    shortParseFormat: 'DD.MM',
+    fieldsOrder: 'DD.MM.YYYY'
+}
+
 export const AwButton = {
     routerComponent: 'router-link',
     size: 'md',

package/nuxt/templates/lang.plugin.js

@@ -137,7 +137,7 @@ export default async ({ app, $axios }) => {
             if (loadedLocales[locale]) return loadedLocales[locale]
 
             const requestConfig = isType('Function', fetchTranslation)
-                ? fetchTranslation(locale)
+                ? fetchTranslation(locale, locales.find(({ code }) => code === locale))
                 : { url: fetchTranslation }
 
             try {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.42.1",
+    "version": "2.45.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -124,5 +124,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "a996a162c0bc3e471c6f021c861329d3ae2552eb"
+    "gitHead": "892aa7ba36966acdbad40c37c3cea659ba22332c"
 }