@awes-io/ui 2.107.0 → 2.108.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.108.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.108.0...@awes-io/ui@2.108.1) (2024-08-07)
+
+
+### Bug Fixes
+
+* **aw-code:** auto suggestion pastes all digits ([0032b66](https://github.com/awes-io/client/commit/0032b6643f4075839132e2c7c9847520ba8611fe))
+
+
+
+
+
+# [2.108.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.107.0...@awes-io/ui@2.108.0) (2024-07-30)
+
+
+### Features
+
+* **aw-code:** component style updated ([dbd8ce2](https://github.com/awes-io/client/commit/dbd8ce2b3e8d6a8b6b3755cf2172b89433e810df))
+* update menu layout ([89ee43f](https://github.com/awes-io/client/commit/89ee43ffe8bd9f23118a1f57220665c2c898c823))
+
+
+
+
+
 # [2.107.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.106.2...@awes-io/ui@2.107.0) (2024-07-12)
 
 

package/assets/css/components/_index.css

@@ -27,7 +27,7 @@
 
 @import './chip.css';
 @import './chip-select';
-
+@import './code.css';
 @import './cropper.css';
 @import './chart.css';
 

package/assets/css/components/badge.css

@@ -1,19 +1,39 @@
 .aw-badge {
+    vertical-align: middle;
+
+    &__pulse {
+         flex: none;
+         background: currentColor;
+         width: 0.25rem;
+         height: 0.25rem;
+         border-radius: 100%;
+         animation: pulse 1s infinite alternate;
+    }
+
     &__text {
         display: inline-flex;
         align-items: center;
         justify-content: center;
 
-        min-height: 1.375rem;
-        min-width: 1.375rem;
-        padding: theme('spacing.1', 0.25rem) 0;
-        margin: 0 theme('spacing.1', 0.25rem);
+        min-height: 1.5rem;
+        min-width: 1.5rem;
+        padding: 0 0.5rem;
+        margin: 0;
 
-        border-radius: 999rem;
+        border-radius: 0.25rem;
         whitespace: no-wrap;
 
-        font-size: theme('fontSize.xs', 0.75rem);
-        line-height: 1;
-        font-weight: 600;
+        font-size: 0.625rem;
+        line-height: 1.25rem;
+        font-weight: 700;
+    }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(1.5);
     }
 }

package/assets/css/components/code.css

@@ -0,0 +1,21 @@
+.aw-code {
+    &__wrapper {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        &--compact {
+            justify-content: center;
+        }
+    }
+
+    &__item {
+        &--compact {
+            max-width: 3.5rem;
+        }
+        /* &--filled.aw-text-field,
+        &--filled .aw-text-field__element {
+            background-color: var(--c-mono-900);
+        } */
+    }
+}

package/assets/css/components/more.css

@@ -5,16 +5,38 @@
     min-height: var(--viewport-height, 100vh);
     padding-bottom: 9.5rem;
 
+    &__buttons {
+        display: flex;
+        justify-content: space-between;
+        gap: 1rem;
+        padding: 0.5rem 1.5rem 0;
+        padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
+    }
+
+    &__user-profile {
+        position: relative;
+        padding-bottom: 2.5rem;
+
+        &:after {
+             @apply bg-mono-800;
+             content: '';
+             display: block;
+             height: 1px;
+
+             position: absolute;
+             bottom: calc(0.75rem - 1px);
+             left: 1.5rem;
+             right: 1.5rem;
+        }
+    }
+
     &__profile {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
 
-        background: var(--c-surface);
-        border-radius: 0.9375rem;
-        padding: 2rem 1.5rem 1.5rem;
-        padding-top: calc(2rem + env(safe-area-inset-top, 0px));
+        padding: 1rem 1.5rem 1rem;
     }
 
     &__theme {
@@ -24,7 +46,7 @@
         align-items: center;
         position: relative;
 
-        padding: 0.8125rem 1.5rem;
+        padding: 0.75rem 1.5rem;
 
         &-icon {
             color: var(--c-mono-300);
@@ -43,7 +65,7 @@
             padding-bottom: 0;
 
             .aw-switch-field__switch {
-                margin: 0.1875rem;
+                margin: 0 0 0 0.1875rem;
             }
         }
     }

package/assets/css/components/refresh-wrapper.css

@@ -1,9 +1,10 @@
 .aw-refresh-wrapper {
     &__loader {
-         display: flex;
-         justify-content: center;
-         align-items: center;
-         width: 100%;
-         z-index: 9999;
-     }
+        fill: currentColor;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        z-index: 9999;
+    }
 }

package/assets/css/components/user-menu.css

@@ -57,9 +57,8 @@
         display: flex;
         align-items: center;
 
-        padding: 0.4375rem 1rem;
+        padding: 0.5rem 1rem;
         color: var(--c-on-surface);
-        border-bottom-width: 1px;
 
         &-icon {
             color: var(--c-mono-400);

package/assets/js/icons/mono.js

@@ -85,7 +85,9 @@ export const ICONS = {
     warning: [
         'M12 14.9c.47 0 .86-.4.86-.87V8.88a.86.86 0 0 0-1.72 0v5.15c0 .48.39.86.86.86ZM12 18.33a.86.86 0 1 0 0-1.72.86.86 0 0 0 0 1.72Z',
         'M9 3.75a3.44 3.44 0 0 1 6 0v.01l7.56 13.75a3.43 3.43 0 0 1-3 5.12H4.44a3.44 3.44 0 0 1-3-5.12L9 3.76Zm1.5.84L2.94 18.34a1.72 1.72 0 0 0 1.5 2.56h15.12a1.72 1.72 0 0 0 1.5-2.55v-.01L13.5 4.59a1.72 1.72 0 0 0-3 0Z'
-    ]
+    ],
+    profile:
+        'M8.965 13.132c-1.907-1.229-3.012-2.93-3.095-5.202-.061-1.706.53-3.197 1.707-4.43a6.134 6.134 0 0 1 8.763-.2c1.445 1.397 2.082 3.134 1.866 5.134-.216 2-1.26 3.51-2.94 4.631.231.087.432.165.632.242a10.198 10.198 0 0 1 3.758 2.518 10.155 10.155 0 0 1 2.811 7.016.71.71 0 0 1-.72.714.713.713 0 0 1-.714-.714 8.77 8.77 0 0 0-.406-2.657 8.665 8.665 0 0 0-2.426-3.814 8.652 8.652 0 0 0-4.323-2.17 8.717 8.717 0 0 0-2.451-.117c-1.712.164-3.26.76-4.61 1.83-1.635 1.29-2.69 2.95-3.162 4.985a9.06 9.06 0 0 0-.221 1.933c-.005.303-.149.53-.421.647-.273.124-.535.077-.766-.113-.185-.159-.247-.37-.247-.606a10.173 10.173 0 0 1 1.167-4.631 10.27 10.27 0 0 1 2.23-2.868 10.417 10.417 0 0 1 3.408-2.04.448.448 0 0 1 .16-.088Zm7.843-5.377a4.734 4.734 0 0 0-4.672-4.76 4.75 4.75 0 0 0-4.842 4.75 4.741 4.741 0 0 0 4.683 4.765 4.73 4.73 0 0 0 4.831-4.755Z'
 }
 
 /* export const ICONS = {

package/components/1_atoms/AwAvatar.vue

@@ -23,6 +23,7 @@
                 @load="onLoad"
                 @error="onLoadError"
             />
+
             <span
                 v-if="
                     (imageError || !src) &&

package/components/2_molecules/AwBadge.vue

@@ -17,13 +17,18 @@
             :class="{ 'px-2': props.text }"
             class="aw-badge__text"
         >
-            {{ props.text }}
-            <Component
-                :is="$options.components.AwIcon"
-                v-if="props.icon"
-                :name="props.icon"
-                size="14"
-            />
+            <span v-if="props.pulse" class="aw-badge__pulse" />
+
+            <template v-else>
+                {{ props.text }}
+
+                <Component
+                    :is="$options.components.AwIcon"
+                    v-if="props.icon"
+                    :name="props.icon"
+                    size="14"
+                />
+            </template>
         </span>
     </span>
 </template>
@@ -61,7 +66,9 @@ export default {
         hideIfEmpty: {
             type: Boolean,
             default: false
-        }
+        },
+
+        pulse: Boolean
     }
 }
 </script>

package/components/3_organisms/AwCode.vue

@@ -1,9 +1,5 @@
 <template>
-    <div
-        :class="wrapperClasses"
-        v-tooltip.show.prepend="errorTooltip"
-        class="flex items-center -mx-1"
-    >
+    <div class="aw-code" v-tooltip.show.prepend="errorTooltip">
         <input
             class="sr-only"
             v-bind="$attrs"
@@ -12,31 +8,47 @@
             ref="element"
             tabindex="-1"
         />
-        <template v-for="(char, i) in pattern">
-            <span v-if="char === '-'" :key="`d-${i}`" class="mx-1">-</span>
-            <div v-else :key="`i-${i}`" class="mx-1 flex-1">
-                <input
-                    ref="fields"
-                    type="tel"
-                    inputmode="numeric"
-                    pattern="[0-9]*"
-                    maxlength="1"
-                    autocomplete="off"
-                    :value="codeValue[i]"
-                    :class="[elClasses.element, 'text-center p-3']"
-                    v-bind="skipAttr"
-                    @input="_onInput($event, i)"
-                    @keydown.left="_focus($event.target, -1)"
-                    @keydown.right="_focus($event.target)"
-                    @keydown.backspace="_focus($event.target, -1)"
-                    @paste.prevent="_onPaste"
-                />
-            </div>
-        </template>
+        <div
+            class="aw-code__wrapper"
+            :class="{ 'aw-code__wrapper--compact': compact }"
+        >
+            <template v-for="(char, i) in pattern">
+                <span v-if="char === '-'" :key="`d-${i}`">-</span>
+                <div
+                    v-else
+                    :key="`i-${i}`"
+                    class="aw-code__item"
+                    :class="[
+                        wrapperClasses,
+                        {
+                            'aw-code__item--filled': !!codeValue[i],
+                            'aw-code__item--compact': compact
+                        }
+                    ]"
+                >
+                    <input
+                        ref="fields"
+                        type="tel"
+                        inputmode="numeric"
+                        pattern="[0-9]*"
+                        autocomplete="off"
+                        :value="codeValue[i]"
+                        :class="[elClasses.element, 'text-center p-3']"
+                        v-bind="skipAttr"
+                        @input="_onInput($event, i)"
+                        @keydown.left="_focus($event.target, -1)"
+                        @keydown.right="_focus($event.target)"
+                        @keydown.backspace="_focus($event.target, -1)"
+                        @paste.prevent="_onPaste"
+                    />
+                </div>
+            </template>
+        </div>
     </div>
 </template>
 
 <script>
+import { clamp } from 'rambdax'
 import { conf } from '@AwUtils/component'
 import { getBemClasses } from '@AwUtils/css'
 import { AwCode as _config } from '@AwConfig'
@@ -45,6 +57,8 @@ import fieldMixin from '@AwMixins/field'
 
 const SPACER_RE = /-/g
 
+const MAX_LENGTH = 1
+
 export default {
     name: 'AwCode',
 
@@ -65,6 +79,13 @@ export default {
             default() {
                 return conf(this, 'pattern')
             }
+        },
+
+        compact: {
+            type: Boolean,
+            default() {
+                return conf(this, 'compact')
+            }
         }
     },
 
@@ -140,15 +161,20 @@ export default {
     methods: {
         _onInput($event, index) {
             const field = $event.target
-            const parsed = field.value.replace(/\D/g, '')
-
-            // immedate update to prevent blinking
-            field.value = parsed
-            this.$set(this.codeValue, index, parsed)
-
-            // go to next field if current is not empty
-            if (parsed.length === field.maxLength) {
-                this._focus(field)
+            const parsed = this._parseValue($event.data)
+
+            // virtual keyboard auto-suggestion clicked
+            if (parsed.length > MAX_LENGTH) {
+                this._pasteValue(parsed)
+            } else {
+                // immedate update to prevent blinking
+                field.value = parsed
+                this.$set(this.codeValue, index, parsed)
+
+                // go to next field if current is not empty
+                if (parsed.length === MAX_LENGTH) {
+                    this._focus(field)
+                }
             }
 
             // reset error if exists
@@ -170,9 +196,28 @@ export default {
             }
         },
 
+        _parseValue(str) {
+            return (str || '').replace(/\D/g, '')
+        },
+
         _onPaste($event) {
             // if (this.error && this.error.length) this.resetError()
-            this.inputValue = $event.clipboardData.getData('text')
+            const value = this._parseValue($event.clipboardData.getData('text'))
+
+            this._pasteValue(value)
+        },
+
+        _pasteValue(value) {
+            this.inputValue = value
+
+            setTimeout(() => {
+                const field = this.$refs.fields[
+                    clamp(0, this.length, value.length)
+                ]
+
+                field.focus()
+                field.setSelectionRange(MAX_LENGTH, MAX_LENGTH)
+            }, 10)
         }
     }
 }

package/components/5_layouts/_AwMobileMenuItem.vue

@@ -43,7 +43,7 @@
                 </span>
             </span>
 
-            <AwBadge v-if="badge" v-bind="badge" class="mr-2" />
+            <AwBadge v-if="badge" v-bind="badge" />
 
             <AwIconSystemMono
                 v-if="_linkExternal"

package/components/5_layouts/_AwMobileMenuNav.vue

@@ -1,9 +1,13 @@
 <template>
-    <nav v-if="items.length" class="aw-mobile-menu-nav" :class="{
-        'aw-mobile-menu-nav--default': theme === 'default',
-        'aw-mobile-menu-nav--primary': theme === 'primary',
-        'aw-mobile-menu-nav--island': theme === 'island'
-    }">
+    <nav
+        v-if="items.length"
+        class="aw-mobile-menu-nav"
+        :class="{
+            'aw-mobile-menu-nav--default': theme === 'default',
+            'aw-mobile-menu-nav--primary': theme === 'primary',
+            'aw-mobile-menu-nav--island': theme === 'island'
+        }"
+    >
         <h3 v-if="title || badge">
             {{ title }}
             <AwBadge v-if="badge" v-bind="badge" />
@@ -17,14 +21,20 @@
                 :_getChildrenCount="_getChildrenCount"
                 :isActive="isActive"
             >
-                <li v-for="({ listeners, ...item }, i) in items" :key="i" v-show="!item.abstract">
+                <li
+                    v-for="({ listeners, ...item }, i) in items"
+                    :key="i"
+                    v-show="!item.abstract"
+                >
                     <AwMobileMenuItem
                         v-bind="item"
                         :class="[
                             item.class,
                             {
                                 'aw-mobile-menu-nav__item--divide':
-                                    theme !== 'island' && (item.isDivide || allDivides) && i
+                                    theme !== 'island' &&
+                                    (item.isDivide || allDivides) &&
+                                    i
                             }
                         ]"
                         :theme="theme"

package/components/5_layouts/_AwUserMenu.vue

@@ -23,7 +23,16 @@
                 "
                 @focus="openDropdown"
             >
+                <Component
+                    v-if="userMenuAvatarComponent"
+                    :is="userMenuAvatarComponent.is"
+                    v-bind="[user, userMenuAvatarComponent.props]"
+                    :size="outline ? 24 : 40"
+                    tabindex="-1"
+                />
+
                 <AwAvatar
+                    v-else
                     v-bind="user"
                     :size="outline ? 24 : 40"
                     tabindex="-1"
@@ -57,6 +66,23 @@
                     <AwUserpic v-bind="user" big-image />
                 </Component>
 
+                <AwNavItem
+                    class="aw-user-menu__nav-item border-b"
+                    :href="profileUrl"
+                    hide-external-icon
+                >
+                    <AwIcon
+                        name="awesio/profile"
+                        size="16"
+                        class="text-mono-400"
+                        :class="{ 'mr-2': vertical, 'mr-4': !vertical }"
+                    />
+
+                    <span class="aw-user-menu__nav-item-text">
+                        {{ $t('My profile') }}
+                    </span>
+                </AwNavItem>
+
                 <span class="aw-user-menu__theme">
                     <AwIconSystemMono
                         :size="16"
@@ -75,7 +101,7 @@
                     <AwSwitcher
                         v-model="isDarkTheme"
                         class="aw-user-menu__theme-switcher"
-                        size="sm"
+                        size="md"
                     />
                 </span>
 
@@ -159,7 +185,7 @@ export default {
     },
 
     computed: {
-        ...mapGetters('awesIo', ['user']),
+        ...mapGetters('awesIo', ['user', 'userMenuAvatarComponent']),
 
         isDesktop() {
             return this.$screen.lg

package/components/_config.js

@@ -95,7 +95,8 @@ export const AwCalendar = {
 
 export const AwCode = {
     baseClass: 'aw-text-field',
-    pattern: 'XXX-XXX'
+    pattern: 'XXXXXX',
+    compact: true
 }
 
 export const AwForm = {

package/nuxt/pages/more.vue

@@ -1,7 +1,27 @@
 <template>
     <div class="aw-more">
+        <div class="aw-more__buttons">
+            <AwButton color="mono" icon="awesio/arrow" @click="onClickGoBack" />
+
+            <AwButton
+                v-if="user"
+                color="mono"
+                icon="awesio/edit"
+                :href="profileUrl"
+                back
+            />
+        </div>
+
         <div class="aw-more__profile" v-if="user">
-            <AwAvatar :src="user.src" :name="user.name" size="112" />
+            <Component
+                v-if="userMenuAvatarComponent"
+                :is="userMenuAvatarComponent.is"
+                v-bind="userMenuAvatarComponent.props"
+                :name="user.name"
+                size="112"
+            />
+
+            <AwAvatar v-else :src="user.src" :name="user.name" size="112" />
 
             <AwHeadline tag="span" class="aw-more__profile-name mt-2">
                 {{ user.name }}
@@ -14,13 +34,6 @@
             >
                 {{ user.description }}
             </AwDescription>
-
-            <AwButton
-                class="mt-6 w-full"
-                :text="$t('Your profile')"
-                color="dark"
-                :href="profileUrl"
-            />
         </div>
 
         <slot name="before-mobile-menu">
@@ -42,6 +55,16 @@
 
         <AwMobileMenuNav :items="userMenu" theme="primary" class="mt-6">
             <template #before>
+                <li v-if="user">
+                    <AwMobileMenuItem
+                        :href="profileUrl"
+                        arrow
+                        icon="awesio/profile"
+                        :text="$t('My profile')"
+                        class="aw-more__user-profile"
+                    />
+                </li>
+
                 <li class="aw-more__theme">
                     <AwIconSystemMono
                         :size="24"
@@ -56,6 +79,7 @@
                     <AwSwitcher
                         v-model="isDarkTheme"
                         class="aw-more__theme-switcher"
+                        size="lg"
                     />
                 </li>
             </template>
@@ -105,6 +129,7 @@ export default {
         ...mapGetters('awesIo', [
             'user',
             'logoComponent',
+            'userMenuAvatarComponent',
             'afterMobileMenuComponent',
             'beforeMobileMenuComponent'
         ]),
@@ -154,6 +179,12 @@ export default {
                 this.$store.commit('awesIo/SET_DARK_THEME', val)
             }
         }
+    },
+
+    methods: {
+        onClickGoBack() {
+            this.$router.back()
+        }
     }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.107.0",
+    "version": "2.108.1",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "0b77fd4870688104b834fb60e538ee4e10e3b0ae"
+    "gitHead": "b58d7facd7085153fca846d87a7cf96f7f2d7aff"
 }

package/store/awesIo.js

@@ -39,6 +39,7 @@ export const state = () => ({
     },
     mobileMenuOpened: false,
     beforeMobileMenu: null,
+    userMenuAvatar: null,
     afterMobileMenu: null,
     bottomBarAction: null,
 
@@ -131,6 +132,10 @@ export const getters = {
         return state.beforeMobileMenu
     },
 
+    userMenuAvatarComponent(state) {
+        return state.userMenuAvatar
+    },
+
     afterMobileMenuComponent(state) {
         return state.afterMobileMenu
     }
@@ -228,6 +233,12 @@ export const mutations = {
         }
     },
 
+    SET_USER_MENU_AVATAR(state, payload) {
+        if (payload && payload.component) {
+            state.userMenuAvatar = payload.component
+        }
+    },
+
     SET_AFTER_MOBILE_MENU(state, payload) {
         if (payload && payload.component) {
             state.afterMobileMenu = payload.component