@awes-io/ui 2.102.1 → 2.103.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.103.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.102.2...@awes-io/ui@2.103.0) (2024-05-22)
+
+
+### Bug Fixes
+
+* **aw-cropper:** refresh cropper after modal opened ([6621aab](https://github.com/awes-io/client/commit/6621aab2525a40c8b7e976aa06947033bedabdd8))
+* fix component logic and style ([34acd24](https://github.com/awes-io/client/commit/34acd2404529a5a6fe63e342438996c8877cf080))
+* fix padding bottom in page content ([c975edd](https://github.com/awes-io/client/commit/c975edd37d199ad546ab254714f115405d88e1af))
+
+
+### Features
+
+* change padding for content modal with buttons ([b0220f6](https://github.com/awes-io/client/commit/b0220f6f4d6a86f17dfa846d5db761c9c890c9bc))
+
+
+
+
+
+## [2.102.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.102.1...@awes-io/ui@2.102.2) (2024-04-26)
+
+
+### Bug Fixes
+
+* visual fixes ([12624d4](https://github.com/awes-io/client/commit/12624d44058e6f4273b5647c3a333dafb7f0e36b))
+
+
+
+
+
 ## [2.102.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.102.0...@awes-io/ui@2.102.1) (2024-04-25)
 
 

package/assets/css/components/modal.css

@@ -58,7 +58,7 @@ $modal-aside-width-large: 75vw;
     }
 
     &__content--buttons {
-        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 7rem);
+        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 11.5rem);
     }
 
     &__close {
@@ -421,27 +421,44 @@ $modal-aside-width-large: 75vw;
  * Transitions
  */
 
-$modal-t-dur: 250ms;
+$modal-t-dur: 200ms;
 
-.modal-transition-default {
-    &-enter,
-    &-leave-to {
-        opacity: 0;
-    }
+@media (max-width: calc(theme('screens.md') - 1px)) {
+    .modal-transition-default,
+    .modal-transition-aside,
+    .modal-transition-aside-medium,
+    .modal-transition-aside-large,
+    .modal-transition-overlay-aside,
+    .modal-transition-overlay-aside-medium,
+    .modal-transition-overlay-aside-large,
+    .modal-transition-fullscreen  {
+        &-enter,
+        &-leave-to {
+            opacity: 0;
+            transform: perspective(150rem) translate3d(0, 5rem, -10rem) rotateX(-30deg);
+        }
 
-    &-enter-active,
-    &-leave-active {
-        pointer-events: none;
-        backface-visibility: hidden;
-        transform: translate3d(0, 0, 0);
-    }
+        &-leave,
+        &-enter-to {
+            opacity: 1;
+            transform: perspective(150rem) translate3d(0, 0, 0) rotateX(0deg);
+        }
 
-    &-enter-active {
-        transition: $modal-t-dur opacity ease-out-quart;
-    }
+        &-enter-active,
+        &-leave-active {
+            transform-style: preserve-3d;
+            pointer-events: none;
+            backface-visibility: hidden;
+            /* transform: translate3d(0, 0, 0); */
+        }
+
+        &-enter-active {
+            transition: calc($modal-t-dur * .5) opacity, $modal-t-dur transform;
+        }
 
-    &-leave-active {
-        transition: $modal-t-dur opacity;
+        &-leave-active {
+            transition: calc($modal-t-dur * .8) opacity, calc($modal-t-dur * .8) transform;
+        }
     }
 }
 
@@ -459,8 +476,7 @@ $modal-t-dur: 250ms;
             transition: calc($modal-t-dur * 1.5) opacity;
 
             .aw-modal__dialog {
-                transition: $modal-t-dur transform calc($modal-t-dur * 0.5)
-                        ease-out-quart,
+                transition: $modal-t-dur transform calc($modal-t-dur * 0.5),
                     calc($modal-t-dur * 0.5) opacity calc($modal-t-dur * 0.5);
             }
         }
@@ -473,70 +489,27 @@ $modal-t-dur: 250ms;
             }
         }
     }
-}
-
-/* fullscreen */
-.modal-transition-fullscreen {
-    &-enter,
-    &-leave-to {
-        transform: scale(1.1);
-        opacity: 0;
-    }
-
-    &-enter-active {
-        transition: $modal-t-dur transform ease-out-quart,
-            $modal-t-dur opacity ease-out-quart;
-    }
-
-    &-leave-active {
-        transition: $modal-t-dur transform,
-            calc($modal-t-dur * 0.67) opacity calc($modal-t-dur * 0.33);
-    }
-}
-
-/* aside */
-.modal-transition-aside,
-.modal-transition-overlay-aside,
-.modal-transition-overlay-aside-medium,
-.modal-transition-overlay-aside-large {
-    &-enter,
-    &-leave-to {
-        transform: translateX(100%);
-    }
-
-    &-enter-active {
-        transition: $modal-t-dur transform ease-out-quart;
-    }
-
-    &-leave-active {
-        transition: $modal-t-dur transform;
-    }
-}
-
-.modal-transition-aside-medium,
-.modal-transition-aside-large {
-    &-enter {
-        transform: translateX($modal-aside-width);
-        opacity: 0;
-    }
 
-    &-leave-to {
-        transform: translateX(100%);
-        opacity: 0;
-    }
+    /* fullscreen */
+    .modal-transition-fullscreen {
+        &-enter,
+        &-leave-to {
+            transform: scale(1.1);
+            opacity: 0;
+        }
 
-    &-enter-active {
-        transition: $modal-t-dur transform ease-out-quart,
-            calc($modal-t-dur * 0.67) opacity ease-out-quart;
-    }
+        &-enter-active {
+            transition: $modal-t-dur transform,
+                $modal-t-dur opacity;
+        }
 
-    &-leave-active {
-        transition: $modal-t-dur transform,
-            calc($modal-t-dur * 0.67) opacity calc($modal-t-dur * 0.33);
+        &-leave-active {
+            transition: $modal-t-dur transform,
+                calc($modal-t-dur * 0.67) opacity calc($modal-t-dur * 0.33);
+        }
     }
-}
 
-@screen md {
+    /* aside */
     .modal-transition-aside-medium,
     .modal-transition-aside-large {
         &-enter {
@@ -562,47 +535,48 @@ $modal-t-dur: 250ms;
         }
 
         &-enter-active {
-            transition: $modal-t-dur opacity ease-out-quart;
+            transition: $modal-t-dur opacity;
 
             .aw-modal__dialog {
-                transition: $modal-t-dur transform ease-out-quart;
+                transition: $modal-t-dur transform;
             }
         }
 
         &-leave-active {
-            transition: $modal-t-dur opacity ease-out-quart;
+            transition: $modal-t-dur opacity;
 
             .aw-modal__dialog {
                 transition: $modal-t-dur transform;
             }
         }
     }
-}
 
-/* aside */
-.modal-transition-bottom {
-    &-enter,
-    &-leave-to {
-        opacity: 0;
+    /* bottom */
+    .modal-transition-bottom {
+        &-enter,
+        &-leave-to {
+            opacity: 0;
 
-        .aw-modal__dialog {
-            transform: translateY(100%);
+            .aw-modal__dialog {
+                transform: translateY(100%);
+            }
         }
-    }
 
-    &-enter-active {
-        transition: $modal-t-dur opacity ease-out-quart;
+        &-enter-active {
+            transition: $modal-t-dur opacity;
 
-        .aw-modal__dialog {
-            transition: $modal-t-dur transform ease-out-quart;
+            .aw-modal__dialog {
+                transition: $modal-t-dur transform;
+            }
         }
-    }
 
-    &-leave-active {
-        transition: $modal-t-dur opacity ease-out-quart;
+        &-leave-active {
+            transition: $modal-t-dur opacity;
 
-        .aw-modal__dialog {
-            transition: $modal-t-dur transform;
+            .aw-modal__dialog {
+                transition: $modal-t-dur transform;
+            }
         }
     }
 }
+

package/assets/css/components/page-header.css

@@ -103,10 +103,6 @@
             line-height: 1.2;
         }
 
-        &__breadcrumbs {
-            padding-right: 1rem;
-        }
-
         &--container {
             gap: 0;
             width: 100%;

package/assets/css/components/page-headline.css

@@ -1,6 +1,7 @@
 .aw-page-headline {
     display: flex;
     padding-top: var(--header-padding-top);
+    padding-bottom: var(--header-padding-bottom);
 
     &__buttons {
         display: flex;

package/assets/css/components/page.css

@@ -1,62 +1,3 @@
-/* .aw-page {
-    @apply flex flex-col flex-grow;
-
-    &__title {
-        @apply inline-flex flex-wrap items-center text-lg leading-tight font-heading;
-    }
-
-    &__title_min-height {
-        @apply py-2;
-        min-height: theme('spacing.16');
-    }
-
-    &__subnav {
-        @apply relative bg-mono-900;
-
-        &:after {
-            content: '';
-            @apply absolute bottom-0 pb-4 left-0 w-full border-t;
-        }
-    }
-
-    &__tabs:after {
-        display: none;
-    }
-
-    &__content {
-        @apply py-4 flex-grow bg-mono-900;
-    }
-
-    &__content_fullscreen {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        & > .container {
-            max-width: unset;
-            @apply px-4;
-        }
-    }
-
-    &__content_fake-fullscreen {
-        @apply fixed inset-0;
-        z-index: 120;
-    }
-}
-@screen sm {
-    .aw-page {
-        &__title {
-            @apply text-3xl;
-        }
-    }
-}
-@screen lg {
-    .aw-page__content:not(.aw-page__content_fullscreen) {
-        @apply py-8;
-    }
-}
- */
-
 .aw-page {
     @apply bg-page-bg;
     width: 100%;
@@ -76,8 +17,8 @@
     }
 
     &__content {
-        padding-top: 1rem;
-        padding-bottom: calc(5rem + var(--page-buttons-bottom, 0px));
+        padding-top: calc(1.5rem - var(--header-padding-bottom));
+        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px) + var(--page-buttons-bottom, 0px));
         flex-grow: 1;
     }
 
@@ -91,12 +32,6 @@
         display: contents;
     }
 
-    &__header {
-        &--is-empty.aw-page-header {
-            display: none;
-        }
-    }
-
     &__mobile-title {
         padding: 0;
 
@@ -115,15 +50,15 @@
 
 @screen lg {
     .aw-page {
+        &__back {
+            margin-right: 1rem;
+        }
+
         &__mobile-title,
         &__top-scroll-mark {
             display: none;
         }
 
-        &__content {
-            @apply pt-6;
-        }
-
         &__grid {
             grid-template-columns: repeat(2, minmax(1rem, 1fr));
         }

package/assets/css/typography.css

@@ -200,6 +200,12 @@
         text-decoration: underline;
     }
 
+    .link-reset,
+    .link-reset:hover {
+        color: inherit;
+        text-decoration: inherit;
+    }
+
     a:not([class]):focus-visible,
     .link:focus-visible {
         outline: theme('focusOutline');

package/components/1_atoms/AwLink.vue

@@ -1,7 +1,7 @@
 <template>
     <component
         :is="_linkComponent"
-        :class="className"
+        :class="reset ? '' : className"
         :style="colorStyle"
         v-bind="_linkAttrs"
         v-on="$listeners"
@@ -33,10 +33,12 @@ export default {
 
         text: String,
 
-        color:{
+        color: {
             type: String,
             default: null
-        }
+        },
+
+        reset: Boolean
     },
 
     computed: {

package/components/2_molecules/AwIsland/AwIsland.vue

@@ -1,5 +1,5 @@
 <template>
-    <AwCard :tag="tag" v-bind="$attrs" class="aw-island" v-on="$listeners">
+    <AwCard :tag="tag" v-bind="$attrs" class="aw-island" :reset="tag === 'AwLink' ? true : null" v-on="$listeners">
         <!-- heading -->
         <template #header>
             <div

package/components/3_organisms/AwBirthdayPicker.vue

@@ -354,9 +354,9 @@ export default {
             // check range
             switch (key) {
                 case 'day':
-                    return numVal > 1 && numVal <= this.maxDay
+                    return numVal >= 1 && numVal <= this.maxDay
                 case 'month':
-                    return numVal > 1 && numVal <= 12
+                    return numVal >= 1 && numVal <= 12
                 case 'year':
                     return true
                 default:

package/components/3_organisms/AwCropper.vue

@@ -120,6 +120,10 @@ export default {
             setTimeout(() => this.croppie.setZoom(0), 60)
         },
 
+        refresh() {
+            this.croppie.bind(this.$refs.image.src)
+        },
+
         rotate() {
             this.croppie.rotate(-90)
         },

package/components/3_organisms/AwImageUpload.vue

@@ -65,9 +65,11 @@
                 ref="cropModal"
                 :param="null"
                 :title="$t('Edit photo')"
+                @opened="$refs.cropper.refresh()"
                 @before-close="clearUploadedFileOrBlock"
             >
                 <AwCropper
+                    ref="cropper"
                     :src="file"
                     :save-width="600"
                     :save-height="600"

package/components/3_organisms/AwIslandAvatar.vue

@@ -148,11 +148,13 @@
                 :param="null"
                 :title="$t('Upload avatar')"
                 theme="fullscreen"
+                @opened="$refs.cropper.refresh()"
             >
                 <AwCropper
+                    ref="cropper"
                     :src="uploadedAvatar"
-                    @save="saveAvatar"
                     :square="squareAvatar"
+                    @save="saveAvatar"
                 />
             </AwModal>
         </template>

package/components/3_organisms/AwTel.vue

@@ -313,14 +313,7 @@ export default {
 
                     pos = Math.min(pos, max)
 
-                    while (
-                        newValue[pos - 1] !== digit &&
-                        pos < firstDashIndex
-                    ) {
-                        pos++
-                    }
-
-                    while (isTyping && newValue[pos - 1] === ' ' && pos < max) {
+                    while (newValue[pos - 1] !== digit && pos < max) {
                         pos++
                     }
 

package/components/4_pages/AwPage.vue

@@ -16,16 +16,6 @@
                     :is-stuck="isHeaderStuck && !isDesktop"
                     hide-menu
                     class="aw-page__header"
-                    :class="{
-                        'aw-page__header--is-empty':
-                            !isHeaderStuck &&
-                            !isDesktop &&
-                            !$scopedSlots['buttons'] &&
-                            !$scopedSlots['after-breadcrumb'] &&
-                            !$scopedSlots['headline-breadcrumb'] &&
-                            !backUrl &&
-                            !isMenuToggler
-                    }"
                     :style="{
                         '--breadcrumb-width':
                             backUrl || isMenuToggler ? '2.5rem' : '0px'
@@ -42,6 +32,7 @@
                                 "
                                 :href="backUrl || '/more'"
                                 :aria-label="breadcrumb?.title ?? $t('Back')"
+                                class="aw-page__back"
                             >
                                 <template #icon>
                                     <AwIconSystemMono name="arrow" />

package/components/4_pages/AwPageMenuButtons.vue

@@ -52,10 +52,6 @@
                     auto-width
                     v-on="listeners"
                 >
-                    <template #icon="{ icon }">
-                        <AwIcon :name="icon" />
-                    </template>
-
                     <template #default="{ text }">
                         <span
                             v-if="text"

package/directives/tooltip.js

@@ -5,7 +5,11 @@ import { sanitize } from '../assets/js/string'
 
 const POPPERS = new Map()
 
-function showTooltip() {
+function showTooltip($event) {
+    if ($event && $event.pointerType !== 'mouse') {
+        return
+    }
+
     const tooltip = this.__tooltip__
     const placement = tooltip.__placement__
     const options = tooltip.__options__
@@ -66,12 +70,12 @@ function hideTooltip() {
 }
 
 const EVENTS = [
-    ['mouseenter', showTooltip],
-    ['mouseleave', hideTooltip]
+    ['pointerenter', showTooltip],
+    ['pointerleave', hideTooltip]
 ]
 
 // const FOCUS_EVENTS = [
-//     ['mouseerenter', showTooltip],
+//     ['pointerenter', showTooltip],
 //     ['focus', showTooltip],
 //     ['pointerleave', hideTooltip],
 //     ['blur', hideTooltip]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.102.1",
+    "version": "2.103.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": "73bc234370b3b5c9a5c010255abf2e0ee66c7360"
+    "gitHead": "f53b33277dcf6e194c034d7544b7c46c2cba58de"
 }