@awes-io/ui 2.34.0 → 2.36.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.36.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.35.0...@awes-io/ui@2.36.0) (2021-12-10)
+
+
+### Features
+
+* logo switching added ([e5e7328](https://github.com/awes-io/client/commit/e5e732812e9acb5c3a6c810d9a7346affa422988))
+
+
+
+
+
+# [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)
 
 

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/AwTel.vue

@@ -27,6 +27,7 @@
             </template>
             <template #prefix>
                 <button
+                    type="button"
                     class="aw-tel__country-toggler focus-outline"
                     @click="_openCountriesDropdown"
                 >
@@ -278,7 +279,8 @@ export default {
             this.showCountries = false
         },
 
-        _parsePhoneNumber(number, country) {
+        _parsePhoneNumber(value, country) {
+            const number = typeof value === 'string' ? value : ''
             const phoneNumber = parsePhoneNumberFromString(number, country)
 
             if (phoneNumber) {

package/components/5_layouts/AwLayoutCenter.vue

@@ -27,23 +27,14 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { pathOr } from 'rambdax'
 
 export default {
     name: 'AwLayoutCenter',
 
     computed: {
-        isDark() {
-            return this.$store.getters['awesIo/isDarkTheme']
-        },
-
-        logo() {
-            return pathOr(
-                null,
-                ['$awes', '_config', this.isDark ? 'dark' : 'default', 'logo'],
-                this
-            )
-        },
+        ...mapGetters('awesIo', ['isDarkTheme', 'logo']),
 
         background() {
             const { src, ...background } = pathOr(
@@ -51,7 +42,7 @@ export default {
                 [
                     '$awes',
                     '_config',
-                    this.isDark ? 'dark' : 'default',
+                    this.isDarkTheme ? 'dark' : 'default',
                     'background'
                 ],
                 this

package/components/5_layouts/_AwLayoutLogo.vue

@@ -0,0 +1,15 @@
+<template functional>
+    <NLink
+        to="/"
+        class="aw-layout-logo"
+        :class="[data.class, data.staticClass]"
+    >
+        <img v-if="props.logo" v-bind="props.logo" />
+    </NLink>
+</template>
+
+<script>
+export default {
+    name: 'AwLayoutLogo'
+}
+</script>

package/components/5_layouts/_AwLayoutMenu.vue

@@ -5,10 +5,12 @@
             'aw-layout-menu--no-submenu': hideAside || !hasSubmenu
         }"
     >
-        <slot name="logo" v-bind="logo">
-            <NLink to="/" class="aw-layout-menu__logo">
-                <img v-if="logo" v-bind="logo" />
-            </NLink>
+        <slot name="logo">
+            <Component
+                :is="logoComponent.is"
+                v-bind="logoComponent.props"
+                class="aw-layout-menu__logo"
+            />
         </slot>
 
         <div class="aw-layout-menu__menu">
@@ -62,6 +64,7 @@
 import { mapGetters } from 'vuex'
 import { pathOr, viewOr, lensProp, omit } from 'rambdax'
 import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
+import AwLayoutLogo from '@AwLayouts/_AwLayoutLogo.vue'
 import AwUserMenu from '@AwLayouts/_AwUserMenu.vue'
 import AwNav from '@AwLayouts/_AwNav.vue'
 
@@ -70,6 +73,7 @@ export default {
 
     components: {
         AwMenuItemIcon,
+        AwLayoutLogo,
         AwUserMenu,
         AwNav
     },
@@ -85,7 +89,7 @@ export default {
     },
 
     computed: {
-        ...mapGetters('awesIo', ['user', 'isDarkTheme']),
+        ...mapGetters('awesIo', ['user', 'logoComponent']),
 
         mainMenu() {
             return viewOr([], lensProp('mainMenu'), this.layoutProvider)
@@ -115,14 +119,6 @@ export default {
                       this.activeMenu
                   )
                 : ''
-        },
-
-        logo() {
-            return pathOr(
-                null,
-                ['_config', this.isDarkTheme ? 'dark' : 'default', 'logo'],
-                this.$awes
-            )
         }
     },
 

package/mixins/birthday.js

@@ -46,7 +46,9 @@ export default {
             }
 
             if (this.shortParseFormat) {
-                const dShort = this.dayjs(input, this.shortParseFormat)
+                const _formatWithYear = `${this.shortParseFormat}.YYYY`
+                const _inputWithYear = `${input}.2000` // 2000 is leap year
+                const dShort = this.dayjs(_inputWithYear, _formatWithYear)
                 if (dShort.isValid()) {
                     return dShort
                 }

package/nuxt/awes.config.js

@@ -44,7 +44,7 @@ export const dayjs = {
         pattern: null,
         format: true
     },
-    plugins: ['dayjs/plugin/relativeTime']
+    plugins: ['dayjs/plugin/relativeTime', 'dayjs/plugin/isLeapYear']
 }
 
 export const axios = {

package/nuxt/templates/store.plugin.js

@@ -6,6 +6,12 @@ export default ({ store, app }) => {
      */
     if (!store.hasModule('awesIo')) {
         store.registerModule('awesIo', storeModule)
+
+        // Set default logo
+        store.commit('awesIo/SET_LOGO', {
+            default: JSON.parse('<%= JSON.stringify(options.default.logo) %>'),
+            dark: JSON.parse('<%= JSON.stringify(options.dark.logo) %>')
+        })
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.34.0",
+    "version": "2.36.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -124,5 +124,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "7cf70f84e64609355c655b32e92cbee0452c4765"
+    "gitHead": "3ac5dc679b50b56efa3b57c967cd37b2c2eba154"
 }

package/store/awesIo.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { pathOr, pick, isType } from 'rambdax'
+import { pathOr, pick, isType, mergeDeepRight } from 'rambdax'
 
 const castArray = (val) => (Array.isArray(val) ? val : [])
 
@@ -20,6 +20,11 @@ export const state = () => ({
 
     profileUrl: null,
 
+    logo: {
+        default: { src: '' },
+        dark: { src: '' }
+    },
+
     menus: {
         main: [],
         secondary: [],
@@ -83,7 +88,22 @@ export const getters = {
         }
     },
 
-    isDarkTheme: pathOr(false, 'isDarkTheme')
+    isDarkTheme: pathOr(false, 'isDarkTheme'),
+
+    logo(state, getters) {
+        return getters.isDarkTheme ? state.logo.dark : state.logo.default
+    },
+
+    logoComponent(state, getters) {
+        const logoComponent = pathOr(null, 'logo.component', state)
+
+        return logoComponent && logoComponent.is
+            ? logoComponent
+            : {
+                  is: 'AwLayoutLogo',
+                  props: { logo: getters.logo }
+              }
+    }
 }
 
 export const mutations = {
@@ -127,6 +147,26 @@ export const mutations = {
 
     TOGGLE_MOBILE_MENU(state, status = !state.mobileMenuOpened) {
         state.mobileMenuOpened = Boolean(status)
+    },
+
+    SET_LOGO(state, logo) {
+        if (typeof logo === 'string') {
+            state.logo = mergeDeepRight(state.logo, {
+                default: { src: logo },
+                dark: { src: logo }
+            })
+        } else if (typeof logo === 'object' && logo !== null) {
+            const _logo = {}
+            _logo.default = pathOr(state.logo.default, 'default', logo)
+            _logo.dark = pathOr(
+                pathOr(state.logo.dark, 'default', logo),
+                'dark',
+                logo
+            )
+            _logo.component = pathOr(state.logo.component, 'component', logo)
+
+            state.logo = _logo
+        }
     }
 }