@awes-io/ui 2.35.0 → 2.39.0

package/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.39.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.38.0...@awes-io/ui@2.39.0) (2022-01-17)
+
+
+### Features
+
+* aw-address uses select internally ([d8a71f0](https://github.com/awes-io/client/commit/d8a71f0b42f22853ca69d1b61cfdb3d9d91aed40))
+
+
+
+
+
+# [2.38.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.37.0...@awes-io/ui@2.38.0) (2021-12-30)
+
+
+### Features
+
+* default button color replaced to accent ([980a96d](https://github.com/awes-io/client/commit/980a96d5a23c5025a618a53ddf630934440eda91))
+
+
+
+
+
+# [2.37.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.36.0...@awes-io/ui@2.37.0) (2021-12-28)
+
+
+### Bug Fixes
+
+* **aw-birthday-picker:** global dayjs with leap year plugin used instead of custom ([047890f](https://github.com/awes-io/client/commit/047890ff1eb26923f455a64dfd12b5a6c5c972c8))
+
+
+### Features
+
+* scroll buttons collabsing added ([b773080](https://github.com/awes-io/client/commit/b77308027776ca4c2aba94753ec0826819d090c3))
+
+
+
+
+
+# [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)
 
 

package/assets/css/components/_index.css

@@ -10,6 +10,7 @@
 @import './badge.css';
 @import './birthday-picker.css';
 @import './button.css';
+@import './button-fixed.css';
 @import './button-nav.css';
 
 @import './calendar.css';

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

@@ -0,0 +1,49 @@
+.aw-button-fixed {
+    display: flex;
+    align-items: center;
+
+    padding: 0.75rem 1rem;
+    min-width: 3.5rem;
+    min-height: 3.5rem;
+    /* border-radius: 1rem; */
+
+    font-size: 0.75rem;
+    font-weight: bold;
+    letter-spacing: 0.09375rem;
+    text-transform: uppercase;
+
+    background-color: rgba(var(--btn-bg), 1);
+    color: rgba(var(--btn-fg), 1);
+
+    box-shadow: 0px 0.25rem 0.5rem rgba(var(--btn-bg), 0.2);
+
+    &__text {
+        flex-shrink: 1;
+        max-width: 1px;
+        margin-right: -1px;
+
+        opacity: 0.1;
+        transition-property: max-width, margin, opacity;
+        transition-duration: 120ms;
+
+        &--expanded {
+            max-width: 16rem;
+            margin-right: 0.75em;
+            opacity: 1;
+            transition-timing-function: ease-out;
+            transition-duration: 240ms;
+        }
+    }
+
+    &:hover {
+        background-image: linear-gradient(rgba(var(--btn-fg), 0.15), rgba(var(--btn-fg), 0.15));
+    }
+
+    &:active {
+        transform: translateY(1px);
+    }
+
+    &:focus-visible {
+        outline: theme('focusOutline');
+    }
+}

package/assets/css/components/button.css

@@ -200,7 +200,7 @@
 /**
  * Colors
  */
-@each $color in (info, success, warning, error, surface, overlay) {
+@each $color in (accent, info, success, warning, error, surface, overlay) {
     .aw-button {
         /* Circle, Solid */
         &.theme-circle.color-$(color),

package/assets/css/components/page-menu-buttons.css

@@ -6,9 +6,19 @@
     }
 
     &__fixed-btns {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        max-width: calc(100vw - 2 * theme('spacing.4', 1rem));
+
         position: fixed;
         right: theme('spacing.4', 1rem);
-        bottom: calc(env(safe-area-inset-bottom, 0) + var(--page-buttons-bottom, theme('spacing.4', 1rem)));
+        bottom: calc(env(safe-area-inset-bottom, 0) + var(--page-buttons-bottom, 0));
         z-index: 2;
+
+        & > * {
+            margin-bottom: 1rem;
+        }
     }
 }

package/assets/js/events.js

@@ -60,3 +60,28 @@ export const getEventTargetAttribute = ($event, attrName, bound = null) => {
 
     return null
 }
+
+/**
+ * Detect if client supports passive event listeners
+ * @return {Boolean} true if supports
+ */
+export const supportsPassive = () => {
+    let supports = false
+
+    if (
+        window &&
+        typeof window.addEventListener === 'function' &&
+        typeof Object.defineProperty === 'function'
+    ) {
+        const options = Object.defineProperty({}, 'passive', {
+            // eslint-disable-next-line getter-return
+            get() {
+                supports = true
+            }
+        })
+
+        window.addEventListener('_', null, options)
+    }
+
+    return supports
+}

package/components/1_atoms/AwCheckbox.vue

@@ -31,7 +31,6 @@
 </template>
 
 <script>
-import { equals } from 'rambdax'
 import FieldMixin from '@AwMixins/field'
 import ErrorMixin from '@AwMixins/error'
 
@@ -89,16 +88,16 @@ export default {
         _onChange($event) {
             let value = this._createValue($event.target.checked)
 
-            if (equals(value, this.checked)) {
-                $event.target.checked = this.isChecked
-                return
-            }
-
             if (this.hasError) {
                 this.setError('')
             }
 
             this.$emit('change', value)
+
+            // sync checkbox state
+            this.$nextTick(() => {
+                $event.target.checked = this.isChecked
+            })
         },
 
         _createValue(isChecked) {

package/components/1_atoms/AwFlow.vue

@@ -20,11 +20,21 @@ export default {
             default: true
         },
 
+        justify: {
+            type: String,
+            default: ''
+        },
+
+        align: {
+            type: String,
+            default: ''
+        },
+
         vertical: Boolean
     },
 
     render(h) {
-        const { tag, gap, wrapChildren, vertical } = this.$props
+        const { tag, gap, wrapChildren, vertical, align, justify } = this.$props
         const children = this.$scopedSlots.default
             ? this.$scopedSlots.default()
             : []
@@ -44,7 +54,12 @@ export default {
                         staticClass: 'aw-flow__wrap',
                         class: {
                             'aw-flow__wrap--children': !wrapChildren,
-                            'aw-flow__wrap--vertical': vertical
+                            'aw-flow__wrap--vertical': vertical,
+                            'justify-center': justify === 'center',
+                            'justify-end': justify === 'end',
+                            'items-start': align === 'start',
+                            'items-center': align === 'center',
+                            'items-end': align === 'end'
                         }
                     },
                     children.reduce((acc, vNode) => {

package/components/1_atoms/AwIcon/AwIcon.vue

@@ -26,25 +26,27 @@ export default {
     render(h, { props: { name, size, viewBox }, data }) {
         const attrs = data.attrs || {}
 
-        return h('SvgIcon', {
-            props: { name, viewBox },
-            staticClass: 'aw-icon',
-            class: [
-                data.class,
-                data.staticClass,
-                {
-                    'aw-icon--size-text':
-                        !size && isNil(attrs.width) && isNil(attrs.height)
-                }
-            ],
-            style: [data.style, data.staticStyle],
-            attrs: {
-                'aria-hidden': true,
-                width: size || null,
-                height: size || null,
-                ...attrs
-            }
-        })
+        return name
+            ? h('SvgIcon', {
+                  props: { name, viewBox },
+                  staticClass: 'aw-icon',
+                  class: [
+                      data.class,
+                      data.staticClass,
+                      {
+                          'aw-icon--size-text':
+                              !size && isNil(attrs.width) && isNil(attrs.height)
+                      }
+                  ],
+                  style: [data.style, data.staticStyle],
+                  attrs: {
+                      'aria-hidden': true,
+                      width: size || null,
+                      height: size || null,
+                      ...attrs
+                  }
+              })
+            : null
     }
 }
 </script>

package/components/2_molecules/AwButton.vue

@@ -28,7 +28,7 @@
             ]"
             tabindex="-1"
         >
-            <slot name="icon">
+            <slot name="icon" v-bind="{ icon, iconSize }">
                 <AwIcon
                     v-if="icon"
                     :name="icon"

package/components/2_molecules/AwSelectObject.vue

@@ -178,6 +178,14 @@
                 </div>
 
                 <div v-if="_isAjax && _hasNextPage" ref="dropdownEnd"></div>
+
+                <slot
+                    name="dropdown-after"
+                    v-bind="{
+                        optionsList,
+                        isLoading
+                    }"
+                ></slot>
             </slot>
         </div>
     </div>
@@ -438,7 +446,7 @@ export default {
         _showNotFound() {
             return this._isAjax
                 ? !this.selectOptions.length && !this.isLoading
-                : !this.optionsList.length
+                : this._searchPhraseLength && !this.optionsList.length
         },
 
         isMobile() {

package/components/3_organisms/AwAddress.vue

@@ -1,34 +1,25 @@
 <template>
-    <div class="relative">
-        <AwInput v-bind="$attrs" v-model="search" autocomplete="off" />
-
-        <!-- suggestions -->
-        <AwDropdown
-            class="w-full z-10"
-            :show="!!suggestions.length"
-            close-on-action
-        >
-            <AwDropdownButton
-                icon="location"
-                v-for="place in suggestions"
-                :key="place.place_id"
-                @click="select(place)"
-            >
-                {{ place.description }}
-            </AwDropdownButton>
-
+    <AwSelectObject
+        ref="select"
+        v-model="place"
+        :options="suggestions"
+        track-by="place_id"
+        option-label="description"
+        @search="search"
+    >
+        <template #dropdown-after>
             <!-- branding -->
             <img
+                v-if="suggestions.length"
                 class="block my-2 mx-auto"
                 aria-hidden="true"
                 src="https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png"
                 alt=""
             />
-        </AwDropdown>
-
-        <!-- places service needs a container to init -->
-        <div ref="place"></div>
-    </div>
+            <!-- places service needs a container to init -->
+            <div ref="place"></div>
+        </template>
+    </AwSelectObject>
 </template>
 
 <script>
@@ -56,30 +47,34 @@ export default {
             autocomplete: null,
             placesService: null,
             sessionToken: null,
+            isLoading: false,
             suggestions: [],
-            placeDescription: '',
             place: null
         }
     },
 
-    computed: {
-        search: {
-            get() {
-                return this.placeDescription
-            },
-
-            set(text) {
-                this.placeDescription = text
-
-                if (!this.autocomplete) return
+    watch: {
+        place(place) {
+            if (!place || !place.place_id) {
+                this.place = null
+                return
+            }
 
-                if (!text) {
+            this.placesService.getDetails(
+                {
+                    placeId: place.place_id,
+                    sessionToken: this.sessionToken
+                },
+                (details) => {
+                    if (this.$refs.select) {
+                        this.$refs.select.searchPhrase = ''
+                    }
                     this._resetSearch()
-                    return
+                    this._formatAddressResponse(details).then((result) => {
+                        this.$emit('input', result)
+                    })
                 }
-
-                this._query(text)
-            }
+            )
         }
     },
 
@@ -107,13 +102,22 @@ export default {
             this.placesService = new window.google.maps.places.PlacesService(
                 this.$refs.place
             )
+        },
+
+        search(text) {
+            if (!this.autocomplete) return
 
-            if (this.placeDescription) {
-                this._query(this.placeDescription)
+            if (!text) {
+                this._resetSearch()
+                return
             }
+
+            this._query(text)
         },
 
         _query(input) {
+            this.$refs.select.isLoading = true
+
             if (!this.sessionToken) {
                 this.sessionToken = new window.google.maps.places.AutocompleteSessionToken()
             }
@@ -129,10 +133,14 @@ export default {
         },
 
         _setSuggestions(data) {
+            this.$refs.select.isLoading = false
             this.suggestions = data || []
         },
 
         _resetSearch() {
+            if (this.$refs.select) {
+                this.$refs.select.isLoading = false
+            }
             this.suggestions = []
             this.sessionToken = null
         },
@@ -222,32 +230,8 @@ export default {
                 })
         },
 
-        select(place) {
-            if (!place || !place.place_id) {
-                this.place = null
-                this.placeDescription = ''
-                return
-            }
-
-            this.placesService.getDetails(
-                {
-                    placeId: place.place_id,
-                    sessionToken: this.sessionToken
-                },
-                (details) => {
-                    this.place = details
-                    this.placeDescription = details.formatted_address
-                    this._resetSearch()
-                    this._formatAddressResponse(details).then((result) => {
-                        this.$emit('input', result)
-                    })
-                }
-            )
-        },
-
         reset() {
             this.suggestions = []
-            this.placeDescription = ''
             this.place = null
         }
     }

package/components/3_organisms/AwBirthdayPicker.vue

@@ -123,7 +123,7 @@ export default {
         },
 
         monthsList() {
-            const date = this.dayjs()
+            const date = this.$dayjs()
             return [...Array(12).keys()].map((el) => ({
                 value: el,
                 text: date.month(el).format('MMMM')
@@ -131,7 +131,7 @@ export default {
         },
 
         daysList() {
-            const date = this.dayjs().year(this.year || 2000)
+            const date = this.$dayjs().year(this.year || 2000)
 
             const maxDays = date.month(this.month || 0).daysInMonth()
 
@@ -141,10 +141,10 @@ export default {
         },
 
         yearsList() {
-            const current = this.dayjs().year()
+            const current = this.$dayjs().year()
             return [...Array(101).keys()].map((el) => ({
                 year: current - el,
-                isLeapYear: this.dayjs()
+                isLeapYear: this.$dayjs()
                     .year(current - el)
                     .isLeapYear()
             }))
@@ -175,7 +175,7 @@ export default {
 
         emit() {
             if (!isNil(this.month) && this.day) {
-                let d = this.dayjs()
+                let d = this.$dayjs()
                     .year(this.year || 2000)
                     .month(this.month)
                     .date(this.day)

package/components/3_organisms/AwDisplayDate.vue

@@ -43,7 +43,7 @@ export default {
             }
 
             let age = null
-            const now = this.dayjs()
+            const now = this.$dayjs()
             const date = this.toDayjs(this.date)
 
             const isYearPresent = this.getYearString(this.date).includes(

package/components/4_pages/AwPage.vue

@@ -9,7 +9,7 @@
             <slot name="heading" v-bind="{ titleTag, title, breadcrumb }">
                 <AwPageHeadline
                     :style="{
-                        '--page-buttons-bottom': _hideBottomBar ? null : '5rem'
+                        '--page-buttons-bottom': _hideBottomBar ? null : '4rem'
                     }"
                     :title="_title"
                     :breadcrumb="breadcrumb"

package/components/4_pages/AwPageMenuButtons.vue

@@ -4,6 +4,7 @@
         <AwFlow
             v-if="isExpanded && splitButtons.buttons.length"
             tag="div"
+            justify="end"
             class="aw-page-menu-buttons__expanded-btns"
         >
             <AwButton
@@ -34,28 +35,27 @@
         </AwContextMenu>
 
         <!-- fixed button -->
-        <AwFlow
+        <div
             v-if="!isExpanded && splitButtons.fixed"
             class="aw-page-menu-buttons__fixed-btns"
-            tag="div"
-            vertical
         >
-            <AwButton
+            <AwButtonFixed
                 v-for="({ listeners, tooltip, ...attrs },
                 i) in splitButtons.fixed"
                 :key="i"
-                size="lg"
+                :expanded="isInTopPosition"
                 v-tooltip="tooltip"
                 v-bind="attrs"
                 v-on="listeners"
             />
-        </AwFlow>
+        </div>
     </div>
 </template>
 
 <script>
 import { isType, defaultTo } from 'rambdax'
 import { downloadFile } from '@AwUtils/download'
+import { supportsPassive } from '@AwUtils/events'
 
 const toIconButton = (props) => ({
     ...props,
@@ -66,6 +66,10 @@ const toIconButton = (props) => ({
 export default {
     name: 'AwPageMenuButtons',
 
+    components: {
+        AwButtonFixed: () => import('@AwPages/_AwButtonFixed.vue')
+    },
+
     props: {
         items: {
             type: Array,
@@ -75,12 +79,20 @@ export default {
         breakpoint: {
             type: String,
             default: 'lg'
+        },
+
+        /* max window scroll when fixed buttons expanded */
+        /* pass -1 to collapse button eventually */
+        expandOffset: {
+            type: Number,
+            default: 150 // px
         }
     },
 
     data() {
         return {
-            isDownloading: {}
+            isDownloading: {},
+            isInTopPosition: true
         }
     },
 
@@ -121,6 +133,10 @@ export default {
         }
     },
 
+    mounted() {
+        this._initScrollListener()
+    },
+
     methods: {
         _getVisiblity(show) {
             return isType('Function', show) ? show(this) : defaultTo(true, show)
@@ -145,6 +161,31 @@ export default {
             } finally {
                 this.$delete(this.isDownloading, url)
             }
+        },
+
+        _initScrollListener() {
+            if (this.expandOffset < 0) {
+                this.isInTopPosition = false
+                return
+            }
+
+            const opts = supportsPassive()
+                ? {
+                      passive: true
+                  }
+                : false
+
+            const detectTopPosition = () => {
+                this.isInTopPosition = window.pageYOffset < this.expandOffset
+            }
+
+            detectTopPosition()
+
+            window.addEventListener('scroll', detectTopPosition, opts)
+
+            this.$once('hook:beforeDestroy', () => {
+                window.removeEventListener('scroll', detectTopPosition, opts)
+            })
         }
     },
 

package/components/4_pages/_AwButtonFixed.vue

@@ -0,0 +1,45 @@
+<template>
+    <Component
+        :is="_linkComponent"
+        v-bind="_linkAttrs"
+        :style="buttonStyle"
+        class="aw-button-fixed"
+        v-on="$listeners"
+    >
+        <span
+            v-if="text"
+            class="aw-button-fixed__text truncate"
+            :class="{ 'aw-button-fixed__text--expanded': expanded }"
+        >
+            <slot>{{ text }}</slot>
+        </span>
+        <slot name="icon">
+            <AwIcon :name="icon" size="24" class="flex-shrink-0" />
+        </slot>
+    </Component>
+</template>
+
+<script>
+import linkMixin from '@AwMixins/link'
+import buttonMixin from '@AwMixins/button'
+
+export default {
+    name: 'AwButtonFixed',
+
+    mixins: [linkMixin, buttonMixin],
+
+    props: {
+        icon: {
+            type: String,
+            required: true
+        },
+
+        text: {
+            type: String,
+            default: ''
+        },
+
+        expanded: Boolean
+    }
+}
+</script>

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,18 @@
+<template functional>
+    <NLink
+        to="/"
+        class="aw-layout-logo"
+        :class="[data.class, data.staticClass]"
+    >
+        <img v-if="props.logo" v-bind="props.logo" />
+        <span class="sr-only">
+            {{ parent.$t('AwLayoutDefault.homepage') }}
+        </span>
+    </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/components/5_layouts/_AwMobileMenu.vue

@@ -84,14 +84,21 @@
             />
         </template>
 
+        <slot name="after-mobile-menu">
+            <Component
+                v-if="afterMobileMenuComponent"
+                :is="afterMobileMenuComponent.is"
+                v-bind="afterMobileMenuComponent.props"
+            />
+        </slot>
+
         <!-- logo -->
         <slot name="logo" v-bind="logo">
-            <NLink to="/" class="aw-mobile-menu__logo">
-                <img v-if="logo" v-bind="logo" />
-                <span class="sr-only">
-                    {{ $t('AwMobileMenu.home') }}
-                </span>
-            </NLink>
+            <Component
+                :is="logoComponent.is"
+                v-bind="logoComponent.props"
+                class="aw-mobile-menu__logo"
+            />
             <span class="aw-mobile-menu__version">
                 {{ $t('AwMobileMenu.version', { version: $config.VERSION }) }}
             </span>
@@ -128,7 +135,11 @@ export default {
     },
 
     computed: {
-        ...mapGetters('awesIo', ['user']),
+        ...mapGetters('awesIo', [
+            'user',
+            'logoComponent',
+            'afterMobileMenuComponent'
+        ]),
 
         mainMenu() {
             return viewOr([], lensProp('mainMenu'), this.layoutProvider).filter(

package/components/_config.js

@@ -16,7 +16,7 @@ export const AwAvatar = {
 export const AwButton = {
     routerComponent: 'router-link',
     size: 'md',
-    color: 'success',
+    color: 'accent',
     theme: 'solid'
 }
 

package/lang/de.js

@@ -53,6 +53,7 @@ export const AwCodeSnippet = {
 }
 
 export const AwLayoutDefault = {
+    homepage: 'Startseite',
     offline: 'Keine Internetverbindung',
     offlineText:
         'Überprüfen Sie Ihre Verbindung und versuchen Sie es erneut ...',

package/lang/en.js

@@ -53,6 +53,7 @@ export const AwCodeSnippet = {
 }
 
 export const AwLayoutDefault = {
+    homepage: 'Homepage',
     offline: 'No Internet Connection',
     offlineText: 'Check your connection and try again ...',
     toggleMenu: 'Toggle mobile menu',

package/lang/ru.js

@@ -57,6 +57,7 @@ export const AwCodeSnippet = {
 }
 
 export const AwLayoutDefault = {
+    homepage: 'Главная страница',
     offline: 'Нет соединения с Интернетом',
     offlineText: 'Проверьте Ваше подключение и попробуйте еще раз ...',
     toggleMenu: 'Мобильное меню',

package/lang/uk.js

@@ -53,6 +53,7 @@ export const AwCodeSnippet = {
 }
 
 export const AwLayoutDefault = {
+    homepage: 'Головна сторінка',
     offline: 'Немає доступу до Інтернету',
     offlineText: 'Перевірте Ваше підключення і спробуйте ще раз ...',
     toggleMenu: 'Мобільне меню',

package/mixins/birthday.js

@@ -1,10 +1,3 @@
-import dayjs from 'dayjs'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-import localizedFormat from 'dayjs/plugin/localizedFormat'
-
-dayjs.extend(customParseFormat)
-dayjs.extend(localizedFormat)
-
 export default {
     props: {
         /**
@@ -26,20 +19,14 @@ export default {
         }
     },
 
-    computed: {
-        dayjs() {
-            return this.$dayjs || dayjs
-        }
-    },
-
     methods: {
         toDayjs(input) {
             if (typeof input !== 'string') {
-                return this.dayjs(input)
+                return this.$dayjs(input)
             }
 
             if (this.fullParseFormat) {
-                const dLong = this.dayjs(input, this.fullParseFormat)
+                const dLong = this.$dayjs(input, this.fullParseFormat)
                 if (dLong.isValid()) {
                     return dLong
                 }
@@ -48,13 +35,13 @@ export default {
             if (this.shortParseFormat) {
                 const _formatWithYear = `${this.shortParseFormat}.YYYY`
                 const _inputWithYear = `${input}.2000` // 2000 is leap year
-                const dShort = this.dayjs(_inputWithYear, _formatWithYear)
+                const dShort = this.$dayjs(_inputWithYear, _formatWithYear)
                 if (dShort.isValid()) {
                     return dShort
                 }
             }
 
-            return this.dayjs(input)
+            return this.$dayjs(input)
         },
 
         parseDate(date) {

package/mixins/button.js

@@ -0,0 +1,17 @@
+export default {
+    props: {
+        color: {
+            type: String,
+            default: 'accent'
+        }
+    },
+
+    computed: {
+        buttonStyle() {
+            return {
+                '--btn-bg': `var(--c-${this.color}-rgb)`,
+                '--btn-fg': `var(--c-on-${this.color}-rgb)`
+            }
+        }
+    }
+}

package/nuxt/templates/dayjs.plugin.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import dayjs from 'dayjs'
 
 /* eslint-disable */
-<% ['dayjs/plugin/relativeTime', 'dayjs/plugin/customParseFormat', 'dayjs/plugin/localizedFormat'].concat(Array.isArray(options.dayjs.plugins) ? options.dayjs.plugins : []).filter((val, i, arr) => arr.indexOf(val) === i).forEach((plugin) => {
+<% ['dayjs/plugin/relativeTime', 'dayjs/plugin/customParseFormat', 'dayjs/plugin/localizedFormat', 'dayjs/plugin/isLeapYear'].concat(Array.isArray(options.dayjs.plugins) ? options.dayjs.plugins : []).filter((val, i, arr) => arr.indexOf(val) === i).forEach((plugin) => {
     const src = plugin.src || plugin
     const name = plugin.name || src.replace('dayjs/plugin/', '')
     const options = plugin.options || {}

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.35.0",
+    "version": "2.39.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -124,5 +124,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "034b0ec86005251c5b6984eeb245dfd9a4cebf07"
+    "gitHead": "357c3e4b953260cceb0e1514598dc7246aaff63d"
 }

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,12 +20,18 @@ export const state = () => ({
 
     profileUrl: null,
 
+    logo: {
+        default: { src: '' },
+        dark: { src: '' }
+    },
+
     menus: {
         main: [],
         secondary: [],
         user: []
     },
     mobileMenuOpened: false,
+    afterMobileMenu: null,
 
     headerNotification: null,
 
@@ -83,7 +89,26 @@ 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 }
+              }
+    },
+
+    afterMobileMenuComponent(state) {
+        return state.afterMobileMenu
+    }
 }
 
 export const mutations = {
@@ -127,6 +152,32 @@ 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
+        }
+    },
+
+    SET_AFTER_MOBILE_MENU(state, payload) {
+        if (payload && payload.component) {
+            state.afterMobileMenu = payload.component
+        }
     }
 }