@awes-io/ui 2.40.0 → 2.42.1

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Features
+
+* modal appear fixed ([4838c87](https://github.com/awes-io/client/commit/4838c87fadc1b9303fa3c9a5e4ccee678c5bbcb6))
+
+
+
+
+
+# [2.41.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.40.1...@awes-io/ui@2.41.0) (2022-01-26)
+
+
+### Features
+
+* **aw-tel:** use max metadata for phone validation ([8f5020b](https://github.com/awes-io/client/commit/8f5020bae4204c9acc710c7d97364757fab2b7bd))
+
+
+
+
+
+## [2.40.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.40.0...@awes-io/ui@2.40.1) (2022-01-21)
+
+
+### Bug Fixes
+
+* **aw-mobile-menu:** use correct heading for submenu ([62a3210](https://github.com/awes-io/client/commit/62a321084a295620802e7bc0fbb92e948400f19a))
+
+
+
+
+
 # [2.40.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.39.1...@awes-io/ui@2.40.0) (2022-01-21)
 
 

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/assets/js/icons/mono.js

@@ -57,6 +57,8 @@ export default {
         'M18.2.66a1.5 1.5 0 00-.7-.54 1.46 1.46 0 00-.57-.12H3.07c-.2 0-.4.04-.58.12a1.49 1.49 0 00-.95 1.36v17.04a1.49 1.49 0 00.95 1.36 1.58 1.58 0 001.68-.31L10 13.96l5.83 5.6c.3.28.69.43 1.1.43a1.49 1.49 0 001.53-1.47V1.48c0-.3-.09-.58-.26-.82zm-1.43 17.45l-5.6-5.37L10 11.62l-1.18 1.12-5.59 5.37V1.7h13.54v16.42z',
     'check-light':
         'm18.328992,2.789833l-12.307024,12.307024l-4.350959,-4.350959c-0.205956,-0.205956 -0.539898,-0.205956 -0.745898,0l-0.497221,0.497221c-0.205956,0.205956 -0.205956,0.539898 0,0.745898l5.221151,5.221151c0.205956,0.205956 0.539898,0.205956 0.745898,0l13.177172,-13.177172c0.205956,-0.205956 0.205956,-0.539898 0,-0.745898l-0.497265,-0.497265c-0.205956,-0.205956 -0.539898,-0.205956 -0.745854,0z',
+    'ban-light':
+        'M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0Zm-4.76 6.44A8.3 8.3 0 0 1 3.56 4.76l11.68 11.68Zm1.2-1.2L4.76 3.56a8.3 8.3 0 0 1 11.68 11.68Z',
     'check-regular':
         'm17.87334,2.466847l-11.515442,11.610536l-4.231195,-4.266136c-0.205142,-0.206836 -0.537764,-0.206836 -0.74295,0l-1.238206,1.248431c-0.205142,0.206836 -0.205142,0.542205 0,0.749085l5.840855,5.889088c0.205142,0.206836 0.537764,0.206836 0.74295,0l13.125102,-13.233488c0.205142,-0.206836 0.205142,-0.542205 0,-0.749085l-1.238206,-1.248431c-0.205142,-0.206836 -0.537764,-0.206836 -0.742906,0z',
     'times-light':

package/components/1_atoms/AwInfo.vue

@@ -10,7 +10,7 @@
             <!-- Customization of help icon -->
             <slot name="icon">
                 <!-- question-circle icon -->
-                <span v-if="help" v-tooltip:right="help">
+                <span v-if="help" v-tooltip:right.prepend="help">
                     <AwIconSystemMono
                         class="aw-info__help-icon"
                         name="info-circle"

package/components/1_atoms/AwSwitcher.vue

@@ -179,6 +179,10 @@ export default {
         isChecked: {
             handler(val) {
                 this.isInternalChecked = val
+                this.isSwitched = val
+                if (this.$refs.element && this.$refs.element.checked !== val) {
+                    this.$refs.element.checked = val
+                }
             },
             immediate: true
         }

package/components/3_organisms/AwModal.vue

@@ -2,7 +2,7 @@
     <Transition
         :name="`modal-transition-${theme}`"
         @before-enter="_preOpen"
-        @before-appear="_preOpen"
+        @before-appear="$nextTick(_preOpen)"
         @after-enter="$emit('opened')"
         @after-appear="$emit('opened')"
         @after-leave="_afterLeave"

package/components/3_organisms/AwTel.vue

@@ -47,7 +47,9 @@
                     "
                 >
                     <AwIconSystemMono
-                        :name="phoneNumber.isValid() ? 'check-light' : 'close'"
+                        :name="
+                            phoneNumber.isValid() ? 'check-light' : 'ban-light'
+                        "
                     />
                 </span>
             </template>
@@ -81,7 +83,7 @@ import {
     getCountryCallingCode,
     getExampleNumber,
     parsePhoneNumberFromString
-} from 'libphonenumber-js'
+} from 'libphonenumber-js/max'
 import examples from 'libphonenumber-js/examples.mobile.json'
 import { pathOr } from 'rambdax'
 import { AwTel as _config } from '@AwConfig'

package/components/4_pages/_AwButtonFixed.vue

@@ -3,6 +3,8 @@
         :is="_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/components/5_layouts/_AwMobileMenu.vue

@@ -15,7 +15,7 @@
                 <AwButton
                     theme="ghost"
                     color="default"
-                    class="aw-mobile-menu__back w-10 h-10"
+                    class="aw-mobile-menu__back w-10 h-10 flex-shrink-0"
                     content-class="p-2"
                     @click="submenuOpened = false"
                 >
@@ -30,7 +30,7 @@
                 <!-- subtitle -->
                 <AwHeadline
                     v-if="submenuTitle"
-                    class="aw-mobile-menu__submenu-title"
+                    class="aw-mobile-menu__submenu-title truncate pr-2"
                 >
                     {{ submenuTitle }}
                 </AwHeadline>
@@ -52,7 +52,7 @@
             <AwButton
                 theme="ghost"
                 color="default"
-                class="aw-mobile-menu__close w-10 h-10"
+                class="aw-mobile-menu__close w-10 h-10 flex-shrink-0"
                 content-class="p-2"
                 @click="show = false"
             >
@@ -177,6 +177,7 @@ export default {
         return {
             scrolled: false,
             submenuOpened: false,
+            submenuTitle: '',
             submenu: []
         }
     },
@@ -189,10 +190,6 @@ export default {
             'beforeMobileMenuComponent'
         ]),
 
-        submenuTitle() {
-            return this.submenuOpened ? pathOr('', '0.text', this.submenu) : ''
-        },
-
         profileUrl() {
             return pathOr(null, 'awesIo.profileUrl', this.$store.state)
         },
@@ -254,6 +251,7 @@ export default {
                     enableBodyScroll(this.$el)
                     // reset submenu
                     this.submenuOpened = false
+                    this.submenuTitle = ''
                     this.submenu = []
                 }
                 this._triggerScrollListener(isVisible)
@@ -290,6 +288,7 @@ export default {
                 ? [{ text, children: submenu }].concat(submenuDeep)
                 : submenuDeep
 
+            this.submenuTitle = text
             this.submenuOpened = !!this.submenu.length
         },
 

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 }
@@ -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.40.0",
+    "version": "2.42.1",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -124,5 +124,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "f8c3b297de47dc18bafddbee71ae48e27a121d53"
+    "gitHead": "a996a162c0bc3e471c6f021c861329d3ae2552eb"
 }