@awes-io/ui 2.138.0 → 2.140.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Features
+
+* change place error icons ([e0a692d](https://github.com/awes-io/client/commit/e0a692d81812488c7bbbdc66dc871bcbacf08673))
+* link regex extended ([6a37e65](https://github.com/awes-io/client/commit/6a37e65e2c1a9f735d966c6db7836cfd53b24e17))
+
+
+
+
+
 # [2.138.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.137.0...@awes-io/ui@2.138.0) (2025-10-17)
 
 

package/assets/css/components/cropper.css

@@ -36,8 +36,6 @@
         padding-left: 1.5rem;
     }
 
-
-
     .croppie-container {
         visibility: hidden;
 

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: 4.5rem !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,31 @@
     }
 }
 
-@screen md {
+@screen lg {
+    .aw-page-single-noty {
+        .aw-noty-container {
+            &_top {
+                 margin-top: 3.5rem;
+             }
+        }
+    }
+
     .aw-noty-container {
         width: auto;
         max-width: theme('maxWidth.xs', 20rem);
 
-        /* &__item {
-            width: fit-content;
-        } */
+        &_top {
+             top: env(safe-area-inset-top, 0px);
+             bottom: auto;
+             margin-top: 0.5rem;
+             margin-bottom: 0 !important;
+
+             .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/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/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/AwLayoutError.vue

@@ -4,7 +4,7 @@
 
         <div class="aw-layout-error__card">
             <svg
-                v-if="statusCode === 404"
+                v-if="statusCode === 403"
                 xmlns="http://www.w3.org/2000/svg"
                 width="200"
                 height="200"
@@ -69,7 +69,7 @@
             </svg>
 
             <svg
-                v-else-if="statusCode === 403"
+                v-else-if="statusCode === 404"
                 xmlns="http://www.w3.org/2000/svg"
                 width="200"
                 height="200"

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/components/_config.js

@@ -2,7 +2,8 @@ import { pathOr, isEmpty } from 'rambdax'
 import { COLORS } from '../assets/js/constants'
 
 export const LINK_REGEX = /^(https?:)?\/\//
-export const SPECIAL_URL_REGEX = /tel:|mailto:/
+export const HTTP_REGEX = /^https?:/i
+export const SPECIAL_URL_REGEX = /^([a-zA-Z][a-zA-Z0-9+.-]*):(?:\/\/)?/
 
 export const AwAvatar = {
     colors: COLORS

package/mixins/link.js

@@ -1,4 +1,4 @@
-import { LINK_REGEX, SPECIAL_URL_REGEX } from '@AwConfig'
+import { LINK_REGEX, HTTP_REGEX, SPECIAL_URL_REGEX } from '@AwConfig'
 
 export default {
     inheritAttrs: false,
@@ -69,7 +69,7 @@ export default {
         _linkSpecial() {
             const h = this.href
 
-            return typeof h === 'string' && h && SPECIAL_URL_REGEX.test(h)
+            return typeof h === 'string' && h && SPECIAL_URL_REGEX.test(h) && !HTTP_REGEX.test(h)
         },
 
         _linkDownload() {

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.138.0",
+    "version": "2.140.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": "8a0bbf54aca0f6fccf4120172b531b536a243983"
+    "gitHead": "e2805427b095c761e932f912d218ee212b08e52e"
 }