@awes-io/ui 2.33.0 → 2.35.0

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.35.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.34.2...@awes-io/ui@2.35.0) (2021-12-04)
+
+
+### Bug Fixes
+
+* default date format ([3435466](https://github.com/awes-io/client/commit/3435466e8ff789d64682ba99e5125eaa5dabf723))
+
+
+### Features
+
+* **aw-birthday-picker:** leap year support ([43805c3](https://github.com/awes-io/client/commit/43805c3cecacec61340f512fe8e9dfcfae4ba1fb))
+* **aw-date:** editable format validation added ([307ec9e](https://github.com/awes-io/client/commit/307ec9e662f32839178cab4d3c14e506b2abbc97))
+* **aw-date:** editable input ([f6f7237](https://github.com/awes-io/client/commit/f6f723755f3cc9ca1c09d33860ea38c403c023ff))
+
+
+
+
+
+## [2.34.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.34.1...@awes-io/ui@2.34.2) (2021-11-26)
+
+
+### Bug Fixes
+
+* **aw-tel:** type button added to dropdown button ([c1369cd](https://github.com/awes-io/client/commit/c1369cd16efb9b569f5a41a94da2eee746a8e40d))
+
+
+
+
+
+## [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)
 
 

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
      */

package/components/2_molecules/AwSelect.vue

@@ -755,6 +755,9 @@ export default {
         },
 
         _selectIndex(index) {
+            const _option = this.optionsList.find((opt) => opt.index === index)
+            if (_option && _option.disabled) return
+
             if (this.multiple) {
                 const selected = this.selectedIndexes
 

package/components/3_organisms/AwBirthdayPicker.vue

@@ -38,7 +38,10 @@
                     :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"
                 />
@@ -128,15 +131,9 @@ export default {
         },
 
         daysList() {
-            const date = this.dayjs()
-
-            if (this.year) {
-                date.year(this.year)
-            }
+            const date = this.dayjs().year(this.year || 2000)
 
-            const maxDays = this.dayjs()
-                .month(this.month || 0)
-                .daysInMonth()
+            const maxDays = date.month(this.month || 0).daysInMonth()
 
             const arr = [...Array(maxDays + 1).keys()]
             arr.shift()
@@ -145,7 +142,12 @@ export default {
 
         yearsList() {
             const current = this.dayjs().year()
-            return [...Array(101).keys()].map((el) => current - el)
+            return [...Array(101).keys()].map((el) => ({
+                year: current - el,
+                isLeapYear: this.dayjs()
+                    .year(current - el)
+                    .isLeapYear()
+            }))
         }
     },
 
@@ -171,25 +173,10 @@ export default {
             this.emit()
         },
 
-        // parseString(str) {
-        //     if (!str) return
-
-        //     const d = this.toDayjs(str)
-        //     this.day = d.date()
-        //     this.month = d.month()
-
-        //     const y = d.year()
-        //     const yString = this.getYearString(str)
-
-        //     if (yString.includes(y)) {
-        //         this.year = y
-        //         this.isYearHidden = false
-        //     }
-        // },
-
         emit() {
             if (!isNil(this.month) && this.day) {
                 let d = this.dayjs()
+                    .year(this.year || 2000)
                     .month(this.month)
                     .date(this.day)
                 let formatVal = this.shortParseFormat || 'MM-DD'
@@ -210,6 +197,14 @@ export default {
             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

@@ -5,9 +5,11 @@
             :value="inputValue"
             :prefix="prefix"
             :postfix="postfix"
-            readonly
+            :pattern="_editable ? mask : null"
+            :readonly="!_editable"
             @focus="isOpened = true"
             @click.stop="isOpened = true"
+            @input="onInput"
         >
             <template #icon>
                 <AwButton
@@ -107,7 +109,12 @@ export default {
         /**
          * Show clear button if value exists
          */
-        clearable: Boolean
+        clearable: Boolean,
+
+        /**
+         * If false input is readonly
+         */
+        editable: Boolean
     },
 
     data() {
@@ -118,6 +125,12 @@ export default {
     },
 
     computed: {
+        _editable() {
+            return (
+                this.editable && !this.range && /^[DMY\W]+$/.test(this.format)
+            )
+        },
+
         inputValue() {
             const result = []
 
@@ -170,6 +183,10 @@ export default {
             }
 
             return views
+        },
+
+        mask() {
+            return this.format.replace(/[DMY]/g, '#')
         }
     },
 
@@ -224,6 +241,16 @@ export default {
                 'resize',
                 this._checkMaxViewsOnResize
             )
+        },
+
+        onInput(val) {
+            if (val.length === this.format.length) {
+                const d = this.$dayjs(val, this.format)
+                if (d.isValid()) {
+                    this.viewDate = d
+                    this.$emit('input', this._getNonRangeValue(d))
+                }
+            }
         }
     }
 }

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: {