@awes-io/ui 2.42.0 → 2.44.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.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)
+
+
+### Bug Fixes
+
+* locked prop for fixed button ([9e2067a](https://github.com/awes-io/client/commit/9e2067ae0abbbfe766f6ea63d9c2cc26940c90b1))
+
+
+
+
+
 # [2.42.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.41.0...@awes-io/ui@2.42.0) (2022-02-01)
 
 

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

@@ -1,18 +1,89 @@
 .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;
+
+        &.has-error {
+            @apply border-error;
+            animation: 700ms shake ease-out-quad;
+        }
+    }
+
+    &__input {
+        border: none;
+        border-radius: 0;
+        flex: auto;
+        
+        input {
+            text-align: center;
+            border-radius: 0;
+        }
+
+        &--day {
+            &::before, &::after {
+                @apply left-0 top-0 absolute;
+                content: '';
+                z-index: 1;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 1px;
+                height: 100%;
+                background-color: rgba(var(--c-on-surface-rgb), 0.1);
+            }
+
+            &::after {
+                left: unset;
+                right: 0;
+            }
+        }
     }
 
-    &__day {
+    
+
+    /* &__day {
         min-width: 6rem;
         flex-basis: 20%;
-    }
+    } */
 
-    &__month,
+    /* &__month,
     &__year {
         min-width: 5rem;
         flex-basis: 40%;
-    }
+    } */
 }
+
+@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)
+    }
+}

package/assets/css/components/button-fixed.css

@@ -12,7 +12,7 @@
     letter-spacing: 0.09375rem;
     text-transform: uppercase;
 
-    background-color: rgba(var(--btn-bg), 1);
+    background-color: rgba(var(--btn-bg), var(--btn-bg-opacity, 1));
     color: rgba(var(--btn-fg), 1);
 
     box-shadow: 0px 0.25rem 0.5rem rgba(var(--btn-bg), 0.2);
@@ -35,6 +35,32 @@
         }
     }
 
+    &__lock {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: absolute;
+        inset: 0;
+
+        span {
+            background-color: var(--c-surface);
+            color: var(--c-on-surface);
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+
+            padding: 0.32em;
+            font-size: 1.2em;
+        }
+    }
+
+    &--locked {
+        position: relative;
+    }
+
     &:hover {
         background-image: linear-gradient(rgba(var(--btn-fg), 0.15), rgba(var(--btn-fg), 0.15));
     }
@@ -46,4 +72,10 @@
     &:focus-visible {
         outline: theme('focusOutline');
     }
+
+    &[disabled] {
+        --btn-bg-opacity: 0.5 !important;
+        cursor: not-allowed !important;
+        user-select: none !important;
+    }
 }

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,58 +1,55 @@
 <template>
     <AwInfo :label="label" class="aw-birthday-picker">
-        <div class="aw-birthday-picker__wrap">
-            <AwSelect
-                v-model="month"
-                :options="monthsList"
+        <label
+            ref="element"
+            v-tooltip.show.prepend="errorTooltip"
+            :class="{ 'has-error': hasError && errorText }"
+            class="aw-birthday-picker__wrap"
+        >
+            <AwInput
+                v-model="displayMonth"
                 :required="required"
                 :name="_inputKeys.month"
-                :label="$t('AwBirthdayPicker.month')"
-                track-by="value"
-                option-label="text"
-                class="aw-birthday-picker__month"
-                @input="checkMaxDay"
+                :placeholder="$t('AwBirthdayPicker.month')"
+                pattern="##"
+                class="aw-birthday-picker__input"
+                inputmode="numeric"
+                @focus="onInputFocus"
+                @blur="onMonthBlur"
             />
 
-            <AwSelect
-                v-model="day"
-                :options="daysList"
+            <AwInput
+                ref="dayInput"
+                v-model="displayDay"
                 :required="required"
                 :name="_inputKeys.day"
-                :label="$t('AwBirthdayPicker.day')"
-                class="aw-birthday-picker__day"
-                @input="emit"
+                :placeholder="$t('AwBirthdayPicker.day')"
+                pattern="##"
+                inputmode="numeric"
+                class="aw-birthday-picker__input aw-birthday-picker__input--day"
+                @focus="onInputFocus"
+                @blur="onDayBlur"
             />
 
-            <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>
+            <AwInput
+                ref="yearInput"
+                v-model="year"
+                :required="required"
+                :name="_inputKeys.year"
+                :placeholder="$t('AwBirthdayPicker.year')"
+                pattern="####"
+                class="aw-birthday-picker__input"
+                inputmode="numeric"
+                @input="onYearInput"
+                @focus="onInputFocus"
+            />
+        </label>
     </AwInfo>
 </template>
 
 <script>
 import birthdayMixin from '@AwMixins/birthday'
-import { isNil } from 'rambdax'
+import ErrorMixin from '@AwMixins/error'
 
 const DEFAULT_KEYS = {
     day: 'birthday_day',
@@ -63,7 +60,7 @@ const DEFAULT_KEYS = {
 export default {
     name: 'AwBirthdayPicker',
 
-    mixins: [birthdayMixin],
+    mixins: [birthdayMixin, ErrorMixin],
 
     props: {
         value: {
@@ -106,48 +103,19 @@ export default {
             month: null,
             day: null,
             year: null,
-            isYearHidden: true
+            maxDay: 31,
+            displayDay: null,
+            displayMonth: null,
+            inputTimeout: null
         }
     },
 
     computed: {
-        _showYear() {
-            return this.showYear || !this.isYearHidden
-        },
-
         _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')
-            }))
-        },
-
-        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()
-            }))
         }
     },
 
@@ -157,32 +125,130 @@ export default {
             handler(val) {
                 const date = this.parseDate(val)
                 if (date) {
-                    this.month = date.month
+                    this.month = date.month + 1
                     this.day = date.day
-                    this.year = date.year
                     this.isYearHidden = !date.year
+                    let d = this.$dayjs()
+                        .year(2000)
+                        .month(date.month)
+                        .date(date.day)
+                        .startOf('day')
+
+                    if (date.year) {
+                        this.year = date.year
+                        d = d.year(date.year)
+                    }
+
+                    this.displayDay = d.format('DD')
+                    this.displayMonth = d.format('MM')
                 }
             }
+        },
+
+        displayMonth(val) {
+            if (val && val.length == 2) {
+                this.$refs['dayInput'].$el.focus()
+            }
+        },
+
+        displayDay(val) {
+            if (val && val.length == 2) {
+                this.$refs['yearInput'].$el.focus()
+            }
         }
     },
 
     methods: {
         checkMaxDay() {
-            const maxDay = this.daysList[this.daysList.length - 1]
-            this.day = this.day > maxDay ? maxDay : this.day
+            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
+
+                this.displayDay = d
+                    .date(this.day)
+                    .startOf('day')
+                    .format('DD')
+            }
+
             this.emit()
         },
 
+        onMonthBlur() {
+            const val = parseInt(this.displayMonth)
+
+            if (isNaN(val)) {
+                this.month = null
+                this.displayMonth = null
+                this.checkMaxDay()
+                return
+            }
+
+            if (val !== this.month) {
+                if (val > 12) {
+                    this.month = 12
+                } else {
+                    this.month = val
+                }
+
+                this.checkMaxDay()
+            }
+
+            const d = this.$dayjs()
+                .year(this.year || 2000)
+                .month(this.month - 1)
+                .startOf('month')
+            this.displayMonth = d.format('MM')
+        },
+
+        onDayBlur(e) {
+            const val = parseInt(e.target.value)
+
+            if (isNaN(val)) {
+                this.day = null
+                this.displayDay = null
+                this.emit()
+                return
+            }
+
+            if (val === this.day) {
+                return
+            }
+
+            this.day = val
+            this.checkMaxDay()
+        },
+
+        onInputFocus(e) {
+            if (e.target.value) {
+                e.target.setSelectionRange(0, e.target.value.length)
+            }
+        },
+
+        onYearInput() {
+            clearTimeout(this.inputTimeout)
+            this.inputTimeout = setTimeout(() => {
+                this.checkMaxDay()
+            }, 200)
+        },
+
         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
                 }
 
@@ -191,20 +257,6 @@ export default {
                     formatVal ? d.format(formatVal) : d.format()
                 )
             }
-        },
-
-        clearYear() {
-            this.isYearHidden = true
-            this.year = null
-            this.emit()
-        },
-
-        isOptionDisabled(option) {
-            if (this.month === 1 && this.day === 29) {
-                return !option.isLeapYear
-            }
-
-            return false
         }
     }
 }

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,8 +1,10 @@
 <template>
     <Component
-        :is="_linkComponent"
+        :is="locked ? 'button' : _linkComponent"
         v-bind="_linkAttrs"
         :style="buttonStyle"
+        :disabled="_linkAttrs.disabled || locked"
+        :class="{ 'aw-button-fixed--locked': locked }"
         class="aw-button-fixed"
         v-on="$listeners"
     >
@@ -16,6 +18,15 @@
         <slot name="icon">
             <AwIcon :name="icon" size="24" class="flex-shrink-0" />
         </slot>
+        <span
+            v-if="locked"
+            class="aw-button-fixed__lock"
+            v-tooltip="lockedTooltip"
+        >
+            <span>
+                <AwIconSystemMono name="lock" />
+            </span>
+        </span>
     </Component>
 </template>
 

package/mixins/button.js

@@ -3,6 +3,15 @@ export default {
         color: {
             type: String,
             default: 'accent'
+        },
+
+        // Show lock icon and disable button
+        locked: Boolean,
+
+        // Tooltip when button is locked
+        lockedTooltip: {
+            type: String,
+            default: ''
         }
     },
 

package/nuxt/templates/lang.plugin.js

@@ -56,7 +56,7 @@ i18nOptions.messages = mergeDeepRight(messages, i18nOptions.messages || {})
 const beforeListeners = new Map()
 const afterListeners = new Map()
 
-export default async ({ app }) => {
+export default async ({ app, $axios }) => {
     const locales = langOptions.locales.slice().map(locale => {
         if (isType('String', locale)) {
             return { code: locale }
@@ -137,7 +137,7 @@ export default async ({ app }) => {
             if (loadedLocales[locale]) return loadedLocales[locale]
 
             const requestConfig = isType('Function', fetchTranslation)
-                ? fetchTranslation(locale)
+                ? fetchTranslation(locale, locales.find(({ code }) => code === locale))
                 : { url: fetchTranslation }
 
             try {
@@ -157,6 +157,9 @@ export default async ({ app }) => {
     app.i18n.setLocale = async locale => {
         const oldLocale = app.i18n.locale
 
+        // Update Accept-Language header
+        $axios.defaults.headers.common['Accept-Language'] = locale
+
         for (const beforeListener of beforeListeners.keys()) {
             await beforeListener(locale, oldLocale)
         }
@@ -179,6 +182,11 @@ export default async ({ app }) => {
         }
     }
 
+    /**
+     * Set Accept-Language header
+     */
+    $axios.defaults.headers.common['Accept-Language'] = app.i18n.locale
+
     /**
      * Set language on init
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.42.0",
+    "version": "2.44.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -124,5 +124,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "0e090b4bf9900be85106e5edc3940299809e5971"
+    "gitHead": "fce6417d348bb3e187df9c4ea498562055ee5c31"
 }