@awes-io/ui 2.44.0 → 2.45.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.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)
 
 

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

@@ -4,86 +4,29 @@
         display: flex;
         align-items: center;
         text-align: center;
+        transition: 200ms border-color;
 
         &.has-error {
             @apply border-error;
-            animation: 700ms shake ease-out-quad;
+            animation: 700ms aw-shake ease-out-quad;
+        }
+
+        &:focus-within {
+            border-color: var(--c-info);
         }
     }
 
     &__input {
-        border: none;
+        @apply p-3;
+        text-align: center;
+        border-width: 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);
-            }
+        flex: 1 1 auto;
 
-            &::after {
-                left: unset;
-                right: 0;
-            }
+        & + & {
+            @apply border-l;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
         }
     }
-
-    
-
-    /* &__day {
-        min-width: 6rem;
-        flex-basis: 20%;
-    } */
-
-    /* &__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/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/3_organisms/AwBirthdayPicker.vue

@@ -1,66 +1,79 @@
 <template>
     <AwInfo :label="label" class="aw-birthday-picker">
-        <label
+        <div
             ref="element"
             v-tooltip.show.prepend="errorTooltip"
             :class="{ 'has-error': hasError && errorText }"
-            class="aw-birthday-picker__wrap"
+            class="aw-text-field aw-birthday-picker__wrap"
         >
-            <AwInput
-                v-model="displayMonth"
+            <input
+                v-for="{ key, ...attrs } in _inputs"
+                :key="key"
                 :required="required"
-                :name="_inputKeys.month"
-                :placeholder="$t('AwBirthdayPicker.month')"
-                pattern="##"
-                class="aw-birthday-picker__input"
+                :value="$data[key]"
+                v-bind="attrs"
                 inputmode="numeric"
+                class="aw-text-field__element aw-birthday-picker__input"
+                @keydown="onKeydown"
+                @input="onInput"
                 @focus="onInputFocus"
-                @blur="onMonthBlur"
             />
-
-            <AwInput
-                ref="dayInput"
-                v-model="displayDay"
-                :required="required"
-                :name="_inputKeys.day"
-                :placeholder="$t('AwBirthdayPicker.day')"
-                pattern="##"
-                inputmode="numeric"
-                class="aw-birthday-picker__input aw-birthday-picker__input--day"
-                @focus="onInputFocus"
-                @blur="onDayBlur"
-            />
-
-            <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>
+        </div>
     </AwInfo>
 </template>
 
 <script>
 import birthdayMixin from '@AwMixins/birthday'
-import ErrorMixin from '@AwMixins/error'
+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, ErrorMixin],
+    mixins: [birthdayMixin, errorMixin],
+
+    _config,
 
     props: {
         value: {
@@ -73,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.
@@ -95,27 +100,77 @@ 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,
-            maxDay: 31,
-            displayDay: null,
-            displayMonth: null,
-            inputTimeout: null
+            maxDay: 31
         }
     },
 
     computed: {
-        _inputKeys() {
-            return {
-                ...DEFAULT_KEYS,
-                ...this.inputNames
-            }
+        _inputsOrder() {
+            return this.fieldsOrder
+                .split(/(\.|-)/)
+                .reduce((acc, placeholder) => {
+                    const key = PLACEHOLDER_KEY_MAP[placeholder]
+                    return key ? acc.concat(key) : acc
+                }, [])
+        },
+
+        _inputNames() {
+            return this._inputsOrder.map((key) => ({
+                name: this.inputNames[key] || NAME_MAP[key],
+                key
+            }))
+        },
+
+        _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'
+            }))
         }
     },
 
@@ -124,37 +179,25 @@ export default {
             immediate: true,
             handler(val) {
                 const date = this.parseDate(val)
+
                 if (date) {
-                    this.month = date.month + 1
-                    this.day = date.day
-                    this.isYearHidden = !date.year
+                    const { day, month, year } = date
+
                     let d = this.$dayjs()
                         .year(2000)
-                        .month(date.month)
-                        .date(date.day)
+                        .month(month)
+                        .date(day)
                         .startOf('day')
 
-                    if (date.year) {
-                        this.year = date.year
-                        d = d.year(date.year)
+                    if (year) {
+                        d = d.year(year)
+                        this.year = d.format(PLACEHOLDER_MAP.year)
                     }
 
-                    this.displayDay = d.format('DD')
-                    this.displayMonth = d.format('MM')
+                    this.day = d.format(PLACEHOLDER_MAP.day)
+                    this.month = d.format(PLACEHOLDER_MAP.month)
                 }
             }
-        },
-
-        displayMonth(val) {
-            if (val && val.length == 2) {
-                this.$refs['dayInput'].$el.focus()
-            }
-        },
-
-        displayDay(val) {
-            if (val && val.length == 2) {
-                this.$refs['yearInput'].$el.focus()
-            }
         }
     },
 
@@ -169,72 +212,90 @@ export default {
 
                 this.maxDay = d.daysInMonth()
                 this.day = this.day > this.maxDay ? this.maxDay : this.day
+            }
+        },
 
-                this.displayDay = d
-                    .date(this.day)
-                    .startOf('day')
-                    .format('DD')
+        onKeydown($event) {
+            if (
+                isNaN(parseInt($event.key)) &&
+                !ALLOWED_KEYS.includes($event.key)
+            ) {
+                $event.preventDefault()
             }
 
-            this.emit()
-        },
+            const key = this._getKey($event.target)
 
-        onMonthBlur() {
-            const val = parseInt(this.displayMonth)
+            // arrow navigation
+            if ($event.key === 'ArrowRight' || $event.key === 'ArrowLeft') {
+                const length = $event.target.value.length
+                const { selectionStart, selectionEnd } = $event.target
 
-            if (isNaN(val)) {
-                this.month = null
-                this.displayMonth = null
-                this.checkMaxDay()
-                return
-            }
+                let offset = 0
+
+                if (
+                    $event.key === 'ArrowRight' &&
+                    selectionStart === length &&
+                    selectionEnd === length
+                ) {
+                    offset = 1
+                }
 
-            if (val !== this.month) {
-                if (val > 12) {
-                    this.month = 12
-                } else {
-                    this.month = val
+                if (
+                    $event.key === 'ArrowLeft' &&
+                    selectionStart === 0 &&
+                    selectionEnd === 0
+                ) {
+                    offset = -1
                 }
 
-                this.checkMaxDay()
+                if (offset) {
+                    $event.preventDefault()
+                    this._focusByOffset(key, offset)
+                }
             }
 
-            const d = this.$dayjs()
-                .year(this.year || 2000)
-                .month(this.month - 1)
-                .startOf('month')
-            this.displayMonth = d.format('MM')
+            // backspace navigation
+            if ($event.key === 'Backspace' && !$event.target.value) {
+                $event.preventDefault()
+                this._focusByOffset(this._getKey($event.target), -1)
+            }
         },
 
-        onDayBlur(e) {
-            const val = parseInt(e.target.value)
+        onInput($event) {
+            const key = this._getKey($event.target)
+            const processor = PROCESSOR_MAP[key]
 
-            if (isNaN(val)) {
-                this.day = null
-                this.displayDay = null
-                this.emit()
-                return
-            }
+            if (processor) {
+                const correctValue = this[processor]($event.target.value)
 
-            if (val === this.day) {
-                return
+                if (correctValue !== $event.target.value) {
+                    $event.target.value = correctValue
+                }
             }
 
-            this.day = val
+            this[key] = $event.target.value
+
             this.checkMaxDay()
-        },
 
-        onInputFocus(e) {
-            if (e.target.value) {
-                e.target.setSelectionRange(0, e.target.value.length)
-            }
+            this.$nextTick(() => {
+                if (this._isComplete(this[key], key)) {
+                    this._focusByOffset(key, 1)
+                    this.emit()
+                } else if (this[key] === '') {
+                    this.emit()
+                }
+            })
         },
 
-        onYearInput() {
-            clearTimeout(this.inputTimeout)
-            this.inputTimeout = setTimeout(() => {
-                this.checkMaxDay()
-            }, 200)
+        onInputFocus($event) {
+            if ($event.target.value) {
+                setTimeout(() => {
+                    $event.target.setSelectionRange(
+                        0,
+                        $event.target.value.length
+                    )
+                }, 10)
+            }
         },
 
         emit() {
@@ -257,6 +318,93 @@ export default {
                     formatVal ? d.format(formatVal) : d.format()
                 )
             }
+        },
+
+        _getKey(el) {
+            return el.getAttribute(KEY_ATTR)
+        },
+
+        _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)
+        },
+
+        _processMonth(val) {
+            return this._processDateVal(val, 0, 12)
         }
     }
 }

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.44.0",
+    "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": "fce6417d348bb3e187df9c4ea498562055ee5c31"
+    "gitHead": "892aa7ba36966acdbad40c37c3cea659ba22332c"
 }