@awes-io/ui 2.139.0 → 2.141.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.141.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.140.0...@awes-io/ui@2.141.0) (2025-11-06)
+
+
+### Bug Fixes
+
+* **aw-avatar:** placeholder image updated ([305c95c](https://github.com/awes-io/client/commit/305c95cd6ca0ed158d6ca6e071f0876221dd47d9))
+
+
+### Features
+
+* change style for notification ([b9a92ea](https://github.com/awes-io/client/commit/b9a92eaf0bdc623fb4e4c3f3a99c7c054a73da94))
+
+
+
+
+
+# [2.140.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.139.0...@awes-io/ui@2.140.0) (2025-10-27)
+
+
+### Bug Fixes
+
+* do nothing if select loading ([03a8a4b](https://github.com/awes-io/client/commit/03a8a4b931ff6f73d5398da9b80cbecadad63787))
+
+
+### Features
+
+* create new design for notify component ([28523fc](https://github.com/awes-io/client/commit/28523fcf5950e384d659f2e69ad476803ae0c25e))
+* remove unused code ([f1a2390](https://github.com/awes-io/client/commit/f1a2390c383f0a9ab77f214eff2712c25e410796))
+
+
+
+
+
 # [2.139.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.138.0...@awes-io/ui@2.139.0) (2025-10-24)
 
 

package/assets/css/components/notification.css

@@ -1,35 +1,69 @@
 .aw-noty {
-    --bg-opacity: 1;
     display: flex;
     align-items: flex-start;
-    padding: theme('spacing.2') theme('spacing.4');
-    border-radius: theme('borderRadius.lg');
-    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
+    gap: 1rem;
 
-    &.bg-overlay {
-         @apply bg-surface;
-         box-shadow: 0px 20px 40px rgba(56, 56, 104, 0.1);
+    padding: 0.75rem 1rem;
+    border-radius: 0.625rem;
+    background: var(--c-notify-bg);
+    box-shadow: 0 2px 5px 0 #14171D1A;
+
+    &:hover {
+        background: var(--c-on-notify-bg);
+
+        .aw-noty__button {
+            color: var(--c-on-notify-close-icon);
+
+            &-circle {
+                 stroke: var(--c-on-notify-close-icon);
+            }
+        }
+    }
+
+    &--info {
+        .aw-noty__icon {
+            color: var(--c-on-blue);
+        }
     }
 
-    &__icon {
-        @apply mr-2;
+    &--warning {
+        .aw-noty__icon {
+            color: var(--c-on-yellow);
+        }
+    }
+
+    &--success {
+        .aw-noty__icon {
+            color: var(--c-success);
+        }
+    }
+
+    &--error {
+        .aw-noty__icon {
+            color: var(--c-error);
+        }
     }
 
     &__content {
         flex-grow: 1;
+        align-self: center;
+
+        &.has-text .aw-noty__title {
+             @apply font-bold;
+        }
     }
 
     &__title {
-        font-size: theme('fontSize.sm', 0.875rem);
-        line-height: theme('leading.5', 1.25rem);
+        font-size: 1rem;
+        line-height: 1;
+        color: var(--c-surface);
     }
 
     &__text {
-        font-size: theme('fontSize.xs');
-    }
-
-    &__has-text &__title {
-        @apply font-bold;
+         font-size: 1rem;
+         line-height: 1;
+         color: var(--c-surface);
+         margin-top: 0.125rem;
     }
 
     &__icon,
@@ -38,9 +72,36 @@
     }
 
     &__button {
-        display: block;
-        line-height: 1;
-        padding: theme('spacing.1');
+        color: var(--c-notify-close-icon);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: center;
+
+        &-circular {
+             transform: rotateY(-180deg);
+        }
+
+        &-circle {
+             fill: none;
+             stroke: var(--c-notify-close-icon);
+             stroke-width: 2;
+             stroke-linecap: round;
+             animation: countdown var(--noty-animation-duration) linear forwards;
+        }
+
+        &-icon {
+            position: absolute;
+        }
+    }
+
+    @keyframes countdown {
+        from {
+            stroke-dashoffset: 0px;
+        }
+        to {
+            stroke-dashoffset: 100px;
+        }
     }
 }
 
@@ -60,8 +121,22 @@
     bottom: env(safe-area-inset-bottom, 0px);
 
     &_top {
-        top: env(safe-area-inset-top, 0px);
-        bottom: auto;
+        top: auto;
+        bottom: env(safe-area-inset-bottom, 0px);
+        margin-bottom: 1rem !important;
+        margin-top: 0;
+
+        .aw-noty-container__item {
+            padding-top: 1rem;
+
+            &:first-of-type {
+                 padding-top: 0;
+            }
+
+            &:last-of-type {
+                padding-bottom: 0;
+            }
+        }
     }
 
     &_left {
@@ -76,7 +151,13 @@
     &_center {
         @apply items-center;
         right: 50%;
-        transform: translateX(50%)
+        transform: translateX(50%);
+        width: 100%;
+        max-width: 100%;
+
+        .aw-noty-container__item {
+            width: 100%;
+        }
     }
 
     &__item {
@@ -91,14 +172,60 @@
     }
 }
 
-@screen md {
+.aw-page-single-noty {
+    .aw-noty-container {
+        &_top {
+             padding-left: 1rem;
+             padding-right: 1rem;
+         }
+    }
+}
+
+.aw-page-noty {
+    .aw-noty-container_top {
+        margin-bottom: max(calc(var(--page-buttons-bottom, 0px) + var(--page-fixed-buttons-height, 0px)), 1rem) !important;
+    }
+}
+
+.aw-more-noty {
+    .aw-noty-container_top {
+        margin-bottom: 3.5rem !important;
+    }
+}
+
+@screen lg {
+    .aw-page-single-noty {
+        .aw-noty-container {
+            &_top {
+                 margin-top: 3.5rem;
+                 padding-left: 0.5rem;
+                 padding-right: 0.5rem;
+             }
+        }
+    }
+
+    .aw-page-noty, .aw-more-noty {
+        .aw-noty-container_top {
+            margin-bottom: 0 !important;
+        }
+    }
+
     .aw-noty-container {
         width: auto;
-        max-width: theme('maxWidth.xs', 20rem);
+        max-width: 23rem;
+
+        &_top {
+             top: env(safe-area-inset-top, 0px);
+             bottom: auto;
+             margin-top: 0.5rem;
+             margin-bottom: 0 !important;
 
-        /* &__item {
-            width: fit-content;
-        } */
+             .aw-noty-container__item {
+                &:last-of-type {
+                     padding-bottom: 0.5rem;
+                }
+             }
+        }
     }
 }
 

package/assets/js/icons/multicolor.js

@@ -23,5 +23,23 @@ export default{
       height: 10,
       viewBox: '0 0 10 10',
       content: '<path fill="currentColor" fill-opacity=".5" d="M8 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>'
+    },
+    'error-circle': {
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        content: '<path fill="currentColor" d="M12 0c6.628 0 12 5.374 12 12s-5.372 12-12 12S0 18.626 0 12 5.372 0 12 0m.002 15.605a1.2 1.2 0 1 0-.075 2.397 1.2 1.2 0 0 0 .075-2.397M12 6a1.2 1.2 0 0 0-1.192 1.06l-.008.14.002 6.001.009.14a1.2 1.2 0 0 0 2.383 0l.008-.14L13.2 7.2l-.008-.14A1.2 1.2 0 0 0 12 6"/><path fill="#fff" d="M12.002 15.605a1.2 1.2 0 1 0-.075 2.397 1.2 1.2 0 0 0 .075-2.397M12 6a1.2 1.2 0 0 0-1.192 1.06l-.008.14.002 6.001.009.14a1.2 1.2 0 0 0 2.383 0l.008-.14L13.2 7.2l-.008-.14A1.2 1.2 0 0 0 12 6"/>'
+    },
+    'info-circle': {
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        content: '<path fill="currentColor" d="M12 24c6.628 0 12-5.374 12-12S18.628 0 12 0 0 5.374 0 12s5.372 12 12 12m.002-15.605a1.199 1.199 0 1 1-.075-2.397 1.199 1.199 0 0 1 .075 2.397M12 18a1.2 1.2 0 0 1-1.192-1.06l-.008-.14.002-6.001.009-.14a1.2 1.2 0 0 1 2.383 0l.008.14L13.2 16.8l-.008.14A1.2 1.2 0 0 1 12 18"/><path fill="#fff" d="M12 18a1.2 1.2 0 0 1-1.192-1.06l-.008-.14.002-6.001.009-.14a1.2 1.2 0 0 1 2.383 0l.008.14L13.2 16.8l-.008.14A1.2 1.2 0 0 1 12 18M12.002 8.395a1.199 1.199 0 1 1-.075-2.397 1.199 1.199 0 0 1 .075 2.397"/>'
+    },
+    'check-circle': {
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        content: '<circle cx="12" cy="12" r="12" fill="currentColor"/><path fill="#fff" fill-rule="evenodd" d="M16.611 8.208a1 1 0 0 1 .18 1.403l-4.63 6a1 1 0 0 1-1.408.177l-3.368-2.63a1 1 0 0 1 1.23-1.576l2.576 2.011L15.21 8.39a1 1 0 0 1 1.402-.18" clip-rule="evenodd"/>'
     }
   }

package/assets/js/styles.js

@@ -69,6 +69,9 @@ export default {
             'page-bg': '#F3F5F7',
             overlay: 'rgba(20, 23, 29, 0.6)',
 
+            'notify-bg': '#292A2E',
+            'notify-close-icon': '#ABACAD',
+
             'mono-0': '#000',
             'mono-50': '#0a0c0f',
             'mono-100': '#14171d',
@@ -97,6 +100,9 @@ export default {
             'page-bg': '#14171d',
             overlay: '#fff',
 
+            'notify-bg': '#434447',
+            'notify-close-icon': '#C0C1C2',
+
             'mono-0': '#fff',
             'mono-50': '#fff',
             'mono-100': '#fff',
@@ -126,6 +132,9 @@ export default {
             'page-bg': '#010101',
             overlay: 'rgba(0, 0, 0, 0.6)',
 
+            'notify-bg': '#FFFFFF',
+            'notify-close-icon': '#838587',
+
             'mono-0': '#FFFFFF',
             'mono-50': '#DBDDDE',
             'mono-100': '#feffff',
@@ -153,6 +162,9 @@ export default {
             'page-bg': '#e7eaed',
             overlay: '#fff',
 
+            'notify-bg': '#F3F5F7',
+            'notify-close-icon': '#595D62',
+
             'mono-0': '#2E2F33',
             'mono-50': '#2E2F33',
             'mono-100': '#2E2F33',

package/components/1_atoms/AwAvatar.vue

@@ -49,13 +49,24 @@
             <svg
                 v-if="(imageError || !src) && type === 'no-img'"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 496 512"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="30"
+                height="30"
+                viewBox="0 0 30 30"
                 class="aw-avatar__no-img-icon"
                 data-dark="false"
             >
                 <path
                     :fill="color.background"
-                    d="M248 8a248 248 0 100 496 248 248 0 000-496zm0 96a88 88 0 110 176 88 88 0 010-176zm0 344c-59 0-111-27-146-68 18-36 55-60 98-60l7 1c13 4 27 7 41 7s28-3 41-7l7-1c43 0 80 24 99 60-36 41-88 68-147 68z"
+                    d="M30 15a15 15 0 1 0-30 0 15 15 0 0 0 30 0"
+                />
+                <path
+                    fill="var(--c-surface, #fff)"
+                    d="M21.23 9.23c0 3.43-2.8 6.23-6.23 6.23a6.25 6.25 0 0 1-6.23-6.23C8.77 5.8 11.57 3 15 3s6.23 2.8 6.23 6.23"
+                />
+                <path
+                    fill="var(--c-surface, #fff)"
+                    d="M25.07 19.3q.37.53.63 1.14.12.27-.09.52-.32.56-.73 1.09a12.6 12.6 0 0 1-9.9 4.95 12.3 12.3 0 0 1-10.64-6.04q-.14-.25-.03-.52c.16-.38.38-.79.62-1.14 1.2-1.8 3.09-2.06 5.2-2.35l.16-.02c.28-.06.58.02.8.19A6.6 6.6 0 0 0 15 18.39c1.42 0 2.78-.43 3.92-1.27.22-.17.52-.22.79-.2l.15.03c2.12.29 3.99.54 5.21 2.35"
                 />
             </svg>
         </slot>

package/components/2_molecules/AwSelect.vue

@@ -841,6 +841,11 @@ export default {
         },
 
         _selectOnEnter() {
+            // stop if loading
+            if (this._isAjax && this.isLoading) {
+                return
+            }
+
             // close if nothing typed
             if (!this.searchPhrase) {
                 this.isOpened = false

package/components/2_molecules/AwSelectObject.vue

@@ -809,6 +809,11 @@ export default {
         },
 
         _selectOnEnter() {
+            // stop if loading
+            if (this._isAjax && this.isLoading) {
+                return
+            }
+
             // close if nothing typed
             if (this._showNotFound) {
                 this.$emit('not-found', this.searchPhrase)

package/components/4_pages/AwPage.vue

@@ -232,6 +232,14 @@ export default {
         }
     },
 
+    head() {
+        return {
+            bodyAttrs: {
+                class: 'aw-page-noty'
+            }
+        }
+    },
+
     provide() {
         return {
             teleportButtonsTo: '.aw-page'
@@ -299,9 +307,18 @@ export default {
         }
     },
 
+    mounted() {
+        if (!this._hideBottomBar) {
+            document.body.style.setProperty('--page-buttons-bottom', '3.5rem')
+        } else {
+            document.body.style.removeProperty('--page-buttons-bottom')
+        }
+    },
+
     beforeDestory() {
         this.$emit('update:fullscreen', false)
         this.watchFullscreenState(false)
+        document.body.style.removeProperty('--page-buttons-bottom')
     },
 
     methods: {

package/components/4_pages/AwPageMenuButtons.vue

@@ -39,7 +39,9 @@
 
         <!-- fixed button -->
         <Teleport
-            v-if="!isExpanded && splitButtons.fixed"
+            v-if="
+                !isExpanded && splitButtons.fixed && splitButtons.fixed.length
+            "
             :to="teleportButtonsTo"
         >
             <div class="aw-page-menu-buttons__fixed-btns">
@@ -174,11 +176,47 @@ export default {
         }
     },
 
+    watch: {
+        'splitButtons.fixed': {
+            handler() {
+                if (!this.isExpanded) {
+                    this.getFixedButtonsHeight()
+                }
+            },
+            immediate: true
+        }
+    },
+
     mounted() {
         this._initScrollListener()
     },
 
+    beforeDestroy() {
+        document.body.style.removeProperty('--page-fixed-buttons-height')
+    },
+
     methods: {
+        getFixedButtonsHeight() {
+            const buttons = document.querySelector(
+                '.aw-page-menu-buttons__fixed-btns'
+            )
+
+            let buttonsHeight = 0
+
+            if (buttons) {
+                buttonsHeight = buttons.offsetHeight
+            } else {
+                const oneButtonHeight = 72
+
+                buttonsHeight = this.splitButtons.fixed.length * oneButtonHeight
+            }
+
+            document.body.style.setProperty(
+                '--page-fixed-buttons-height',
+                `${buttonsHeight}px`
+            )
+        },
+
         _getVisiblity(show) {
             return isType('Function', show) ? show(this) : defaultTo(true, show)
         },

package/components/4_pages/AwPageSingle.vue

@@ -178,6 +178,14 @@ export default {
         }
     },
 
+    head() {
+        return {
+            bodyAttrs: {
+                class: 'aw-page-single-noty'
+            }
+        }
+    },
+
     computed: {
         isDesktop() {
             return this.$screen[this.desktopFrom] || false

package/components/5_layouts/_AwNoty.vue

@@ -1,30 +1,33 @@
 <template functional>
     <div
         :data-testid="props.testId"
-        :class="{
-            'bg-overlay': props.icon,
-            [`bg-${props.type}`]: !props.icon,
-            'aw-noty__has-text': props.text
-        }"
         class="aw-noty"
+        :class="`aw-noty--${props.type}`"
+        :style="{ '--noty-animation-duration': `${props.duration}ms` }"
     >
         <!-- icon -->
         <Component
-            :is="$options.components.AwIcon"
+            :is="
+                typeof props.icon === 'string'
+                    ? $options.components.AwIcon
+                    : $options.components.AwIconSystemColor
+            "
             v-if="props.icon"
             :name="
                 typeof props.icon === 'string'
                     ? props.icon
                     : $options.getDefaultIconName(props.type)
             "
-            size="20"
+            size="24"
             class="aw-noty__icon"
             :class="`text-${props.type}`"
         />
 
         <!-- content -->
         <div class="aw-noty__content" :class="{ 'has-text': props.text }">
-            <div class="aw-noty__title">{{ props.title }}</div>
+            <div class="aw-noty__title">
+                {{ props.title }}
+            </div>
             <div
                 v-if="props.text"
                 v-html="$options.sanitize(props.text)"
@@ -38,10 +41,25 @@
             @click="props.remove"
             class="aw-noty__button"
         >
+            <svg
+                width="22"
+                height="22"
+                viewBox="0 0 36 36"
+                class="aw-noty__button-circular"
+            >
+                <path
+                    class="aw-noty__button-circle"
+                    :stroke-dasharray="100"
+                    :stroke-dashoffset="100"
+                    d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831a 15.9155 15.9155 0 0 1 0 -31.831"
+                />
+            </svg>
+
             <Component
                 :is="$options.components.AwIconSystemMono"
                 name="close"
-                size="14"
+                size="8"
+                class="aw-noty__button-icon"
             />
         </button>
     </div>
@@ -51,13 +69,15 @@
 import { sanitize } from '@AwUtils/string'
 import AwIcon from '@AwAtoms/AwIcon/AwIcon.vue'
 import AwIconSystemMono from '@AwAtoms/AwIcon/AwIconSystemMono.vue'
+import AwIconSystemColor from '@AwAtoms/AwIcon/AwIconSystemColor.vue'
 
 export default {
     name: 'AwNoty',
 
     components: {
         AwIcon,
-        AwIconSystemMono
+        AwIconSystemMono,
+        AwIconSystemColor
     },
 
     props: {
@@ -96,7 +116,12 @@ export default {
 
         closable: {
             type: Boolean,
-            default: false
+            default: true
+        },
+
+        duration: {
+            type: Number,
+            default: null
         }
     },
 
@@ -105,13 +130,13 @@ export default {
     getDefaultIconName(type) {
         switch (type) {
             case 'error':
-                return 'awesio/close-circle'
+                return 'error-circle'
             case 'warning':
-                return 'awesio/warning'
+                return 'info-circle'
             case 'info':
-                return 'awesio/info-circle'
+                return 'info-circle'
             default:
-                return 'awesio/check-circle'
+                return 'check-circle'
         }
     }
 }

package/components/5_layouts/_AwNotyContainer.vue

@@ -63,8 +63,10 @@ export default {
             const id = _notifyId++
             item.id = id
             item.testId = item.testId || 'notifi-' + id
+            item.duration = parseInt(item.timeout)
 
             const removeAfter = parseInt(item.timeout)
+
             if (removeAfter && !isNaN(removeAfter)) {
                 item.timeout = setTimeout(this.remove, removeAfter, id)
             }

package/nuxt/pages/more.vue

@@ -152,6 +152,14 @@ export default {
 
     mixins: [pageMixin],
 
+    head() {
+        return {
+            bodyAttrs: {
+                class: 'aw-more-noty'
+            }
+        }
+    },
+
     computed: {
         ...mapState('awesIo', ['bottomBarAction']),
 

package/nuxt/templates/core.plugin.js

@@ -54,4 +54,4 @@ export default ({ app }, inject) => {
 //         BaseCollection.prototype,
 //         redirect
 //     )
-// }
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.139.0",
+    "version": "2.141.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "c59c9c8318571336d0654dfe132bc6288d78ec8b"
+    "gitHead": "6a1c98c94322a7515f824f414e09892e79776654"
 }