@awes-io/ui 2.118.1 → 2.120.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.120.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.119.0...@awes-io/ui@2.120.0) (2024-12-06)
+
+
+### Features
+
+* change style for header  and header notification ([d9ba150](https://github.com/awes-io/client/commit/d9ba150a719410cb26e2fcd8a70a47f4b8b65a3c))
+* change style place in header notification ([e56664e](https://github.com/awes-io/client/commit/e56664e735fcdeb0dc90e11341c1ad63e9c97c8b))
+
+
+
+
+
+# [2.119.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.118.1...@awes-io/ui@2.119.0) (2024-12-03)
+
+
+### Bug Fixes
+
+* typo ([0950dc7](https://github.com/awes-io/client/commit/0950dc75e1e88f838831bc744e2964493cfd1475))
+
+
+### Features
+
+* add ignore refrhes props for refresh wrapper ([ae5cc60](https://github.com/awes-io/client/commit/ae5cc60cf1fe6aeac2c1591d0cb348d1a177b08e))
+* change style for page header ([6751e08](https://github.com/awes-io/client/commit/6751e0835d54018b98e59dcf522a111bc68efdbd))
+* change style for search ([44318f0](https://github.com/awes-io/client/commit/44318f02455649715b7cc1f73087f74486b4bd12))
+
+
+
+
+
 ## [2.118.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.118.0...@awes-io/ui@2.118.1) (2024-11-29)
 
 

package/assets/css/components/button-nav.css

@@ -5,8 +5,8 @@
     border-radius: 0.625rem;
 
     /* & .aw-slider__scroller {
-        padding: theme('spacing.1') 0;
-    } */
+      padding: theme('spacing.1') 0;
+  } */
 
     &__wrapper {
         padding: 0;
@@ -85,10 +85,19 @@
         cursor: not-allowed;
     }
 
+    &--expand {
+        min-width: var(--nav-min-width, 100%);
+
+        .aw-button-nav__toggler {
+            flex: var(--nav-toggler-grow, 1) 0 auto;
+        }
+    }
+
     &--fullwidth {
         margin-left: calc(-1 * var(--container-padding));
         margin-right: calc(-1 * var(--container-padding));
         max-width: calc(100% + 2 * var(--container-padding));
+        width: calc(100% + 2 * var(--container-padding));
 
         .aw-slider__scroller:before,
         .aw-slider__scroller:after {
@@ -107,13 +116,9 @@
         .aw-slider__scroller > :last-child {
             scroll-snap-align: end;
         }
-    }
-
-    &--expand {
-        min-width: var(--nav-min-width, 100%);
 
         .aw-button-nav__toggler {
-            flex: var(--nav-toggler-grow, 1) 0 auto;
+            flex: auto;
         }
     }
 
@@ -221,6 +226,10 @@
             }
         }
 
+        &--fullwidth {
+            width: auto;
+        }
+
         &--without-min-with {
             .aw-button-nav__toggler {
                 & > span {

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

@@ -3,6 +3,24 @@
     align-items: flex-start;
     padding-top: env(safe-area-inset-top, 0px);
 
+    &__wrapper {
+        display: flex;
+        flex: auto;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem 0.5rem 1rem 1rem;
+
+        &-content {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        &-buttons {
+            display: flex;
+            gap: 1rem;
+        }
+    }
+
     &__content {
         flex-grow: 1;
 
@@ -32,3 +50,17 @@
           --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 0.5rem));
     }
 }
+
+@screen md {
+    .aw-header-notification {
+        &__wrapper {
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+
+            &-content {
+                align-items: center;
+            }
+        }
+    }
+}

package/assets/css/components/more.css

@@ -6,17 +6,26 @@
     padding-bottom: 9.5rem;
 
     &__buttons {
+        @apply bg-page-bg;
+
         display: flex;
         justify-content: space-between;
         gap: 1rem;
-        padding: 0.5rem 1.5rem 0;
+        padding: 0.5rem 1.5rem 1rem;
         padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        &--sticky {
+            box-shadow: 0px 10px 20px 0px rgba(37, 38, 41, 0.05);
+        }
 
         &-wrapper {
             display: flex;
             align-items: center;
             gap: 1rem;
-         }
+        }
     }
 
     &__user-profile {
@@ -24,15 +33,15 @@
         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;
+            @apply bg-mono-800;
+            content: '';
+            display: block;
+            height: 1px;
+
+            position: absolute;
+            bottom: calc(0.75rem - 1px);
+            left: 1.5rem;
+            right: 1.5rem;
         }
     }
 
@@ -42,7 +51,7 @@
         align-items: center;
         flex-direction: column;
 
-        padding: 1rem 1.5rem 1rem;
+        padding: 0 1.5rem 1rem;
     }
 
     &__theme {

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

@@ -1,11 +1,11 @@
 .aw-page-header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 1rem;
 
-    padding: var(--header-padding-top) var(--header-padding-horizontal)
-        var(--header-padding-bottom);
-    height: var(--header-height);
+    padding: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
+    min-height: var(--header-height);
     box-shadow: none;
 
     position: relative;
@@ -58,7 +58,11 @@
         font-size: 1.25rem;
         line-height: 1.4285;
         font-weight: 700;
-        text-align: start;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
 
         &--showable {
             opacity: 0;
@@ -72,12 +76,17 @@
         }
     }
 
+    &__breadcrumbs {
+        align-self: flex-start;
+    }
+
     &__breadcrumbs,
     &__buttons {
-        flex: 1 1 3rem;
+        flex: unset;
 
         display: flex;
         gap: 1rem;
+        min-width: 3rem;
     }
 
     &__buttons {
@@ -91,22 +100,13 @@
         &__title {
             flex: 1 1 max-content;
         }
-
-        &__breadcrumbs,
-        &__buttons {
-            flex: 1 0 max-content;
-        }
-
-        &__buttons {
-            min-width: max-content;
-        }
     }
 }
 
 @screen lg {
     .aw-page-header {
         /* padding-left: 2.5rem;
-        padding-right: 2.5rem; */
+    padding-right: 2.5rem; */
 
         &--primary {
             @apply bg-surface;
@@ -118,43 +118,27 @@
         }
 
         &--container {
-            gap: 0;
-            width: 100%;
-            margin-left: 0;
-            margin-right: 0;
-
             position: static;
         }
 
-        :where(&--container) &__breadcrumbs {
-            flex: 0 0
-                calc(
-                    50% - var(--header-container-width) / 2 +
-                        var(--header-padding-horizontal)
-                );
-        }
-
-        &:where(:not(&--container)) &__title {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-
         :where(&--container) &__title {
             text-align: left;
-            margin-right: 1rem;
+        }
+
+        &__breadcrumbs,
+        &__buttons {
+             min-width: 2.5rem;
         }
 
         /* :where(&--container) &__buttons {
-            margin-right: max(
-                0px,
-                calc(
-                    50% - var(--header-container-width) / 2 +
-                        var(--header-padding-horizontal)
-                )
-            );
-        } */
+        margin-right: max(
+            0px,
+            calc(
+                50% - var(--header-container-width) / 2 +
+                    var(--header-padding-horizontal)
+            )
+        );
+    } */
     }
 }
 

package/assets/css/components/search.css

@@ -1,6 +1,6 @@
 .aw-search {
     background: transparent;
-    border-radius: 1rem;
+    border-radius: 0.625rem;
 
     .aw-text-field__element,
     input {
@@ -8,7 +8,7 @@
         padding-right: 3rem;
         padding-left: 1rem;
         height: 2.875rem;
-        border-radius: 1rem;
+        border-radius: 0.625rem;
         font-size: 0.875rem;
     }
 
@@ -35,11 +35,8 @@
 
 @screen lg {
     .aw-search {
-        border-radius: 0.625rem;
-
         .aw-text-field__element,
         input {
-            border-radius: 0.625rem;
             height: 2.375rem;
         }
     }

package/assets/js/constants.js

@@ -12,10 +12,21 @@ export const TABLE_DATA_FETCHED = 'data-fetched'
 
 export const FORM_ENTER_SKIP_ATTR = 'data-enter-skip'
 
-export const COLORS = Object.keys(CUSTOM_COLORS).map((color) => ({
-    color: toColor(color),
-    onColor: toOnColor(color)
-}))
+// export const COLORS = Object.keys(CUSTOM_COLORS).map((color) => ({
+//     color: toColor(color),
+//     onColor: toOnColor(color)
+// }))
+
+export const COLORS = Object.keys(CUSTOM_COLORS).reduce((acc, color) => {
+    if (color !== 'black') {
+        return acc.concat({
+            color: toColor(color),
+            onColor: toOnColor(color)
+        })
+    }
+
+    return acc
+}, [])
 
 export const TEST_ID_ATTR = 'data-testid'
 

package/components/1_atoms/AwRefreshWrapper.vue

@@ -34,7 +34,9 @@ export default {
     name: 'AwRefreshWrapper',
 
     props: {
-        loading: Boolean
+        loading: Boolean,
+
+        ignoreRefresh: Boolean
     },
 
     data: () => ({
@@ -51,21 +53,25 @@ export default {
     },
 
     mounted() {
-        this.$refs.refreshLoader.addEventListener(
-            'touchmove',
-            this.onTouchStartMove,
-            { passive: false }
-        )
+        if (!this.ignoreRefresh) {
+            this.$refs.refreshLoader.addEventListener(
+                'touchmove',
+                this.onTouchStartMove,
+                { passive: false }
+            )
+        }
     },
 
     beforeDestroy() {
-        this.removeListeners()
+        if (!this.ignoreRefresh) {
+            this.removeListeners()
 
-        this.$refs.refreshLoader.removeEventListener(
-            'touchmove',
-            this.onTouchStartMove,
-            { passive: false }
-        )
+            this.$refs.refreshLoader.removeEventListener(
+                'touchmove',
+                this.onTouchStartMove,
+                { passive: false }
+            )
+        }
     },
 
     methods: {

package/components/3_organisms/AwTable/AwTableBuilder.vue

@@ -2,6 +2,7 @@
     <AwRefreshWrapper
         class="aw-table-builder relative"
         :loading="collection.loading"
+        :ignore-refresh="ignoreRefresh"
         @refresh="fetch"
     >
         <template #before>
@@ -283,6 +284,10 @@ export default {
          */
         noFetch: Boolean,
 
+        /**
+         * Disable pull-to-refresh on a table
+         */
+        ignoreRefresh: Boolean,
         /**
          * Disable auto fetching on page or limit change
          */

package/components/4_pages/AwPage.vue

@@ -44,6 +44,27 @@
                         <slot name="after-breadcrumb" />
                     </template>
 
+                    <template #title="{ title, titleShowable, hideTitle }">
+                        <slot
+                            name="title"
+                            :title="title"
+                            :titleShowable="titleShowable"
+                            :hideTitle="hideTitle"
+                        >
+                            <h1
+                                v-if="title"
+                                class="aw-page-header__title"
+                                :class="{
+                                    'sr-only': !titleShowable && hideTitle,
+                                    'aw-page-header__title--showable': titleShowable,
+                                    'aw-page-header__title--visible': !hideTitle
+                                }"
+                            >
+                                {{ title }}
+                            </h1>
+                        </slot>
+                    </template>
+
                     <template #default>
                         <slot name="buttons"></slot>
                     </template>

package/components/4_pages/_AwPageHeader.vue

@@ -12,17 +12,24 @@
             <slot name="breadcrumbs"> </slot>
         </div>
 
-        <h1
-            v-if="title"
-            class="aw-page-header__title"
-            :class="{
-                'sr-only': !titleShowable && hideTitle,
-                'aw-page-header__title--showable': titleShowable,
-                'aw-page-header__title--visible': !hideTitle
-            }"
+        <slot
+            name="title"
+            :title="title"
+            :titleShowable="titleShowable"
+            :hideTitle="hideTitle"
         >
-            {{ title }}
-        </h1>
+            <h1
+                v-if="title"
+                class="aw-page-header__title"
+                :class="{
+                    'sr-only': !titleShowable && hideTitle,
+                    'aw-page-header__title--showable': titleShowable,
+                    'aw-page-header__title--visible': !hideTitle
+                }"
+            >
+                {{ title }}
+            </h1>
+        </slot>
 
         <div class="aw-page-header__buttons">
             <slot />

package/components/5_layouts/_AwHeaderNotification.vue

@@ -7,22 +7,30 @@
         }"
         class="aw-header-notification"
     >
-        <!-- conent -->
-        <AwFlow
-            :gap="2"
-            tag="div"
-            class="aw-header-notification__content container-fluid"
-        >
-            <AwIcon v-if="config.icon" :name="config.icon" />
-            <span v-html="$sanitize(config.text)" class="text-center"></span>
-            <AwButton
-                v-for="({ listeners, ...props }, i) in config.buttons"
-                :key="i"
-                size="xs"
-                v-bind="props"
-                v-on="listeners"
-            />
-        </AwFlow>
+        <div class="aw-header-notification__wrapper">
+            <div class="aw-header-notification__wrapper-content">
+                <AwIcon
+                    v-if="config.icon"
+                    class="flex-none"
+                    :name="config.icon"
+                />
+
+                <div v-html="$sanitize(config.text)" />
+            </div>
+
+            <div
+                v-if="config.buttons.length"
+                class="aw-header-notification__wrapper-buttons"
+            >
+                <AwButton
+                    v-for="({ listeners, ...props }, i) in config.buttons"
+                    :key="i"
+                    size="xs"
+                    v-bind="props"
+                    v-on="listeners"
+                />
+            </div>
+        </div>
 
         <!-- close -->
         <AwButton

package/nuxt/pages/more.vue

@@ -1,6 +1,15 @@
 <template>
     <div class="aw-more">
-        <div class="aw-more__buttons">
+        <div
+            ref="topScrollMark"
+            class="aw-page__top-scroll-mark"
+            aria-hidden="true"
+        ></div>
+
+        <div
+            class="aw-more__buttons"
+            :class="{ 'aw-more__buttons--sticky': isHeaderStuck }"
+        >
             <AwButton color="mono" icon="awesio/arrow" @click="onClickGoBack" />
 
             <div
@@ -117,6 +126,7 @@ import { lensProp, pathOr, viewOr } from 'rambdax'
 import AwMobileMenuNav from '@AwLayouts/_AwMobileMenuNav.vue'
 import AwMobileMenuItem from '@AwLayouts/_AwMobileMenuItem.vue'
 import { VISIBLE_ITEMS_COUNT } from '@AwOrganisms/AwBottomBar.vue'
+import pageMixin from '@AwMixins/page'
 
 export default {
     name: 'More',
@@ -134,6 +144,8 @@ export default {
         AwMobileMenuItem
     },
 
+    mixins: [pageMixin],
+
     computed: {
         ...mapState('awesIo', ['bottomBarAction']),
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.118.1",
+    "version": "2.120.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": "3fcc2a92fee78f38817f25fc5eeb8cab4764cf59"
+    "gitHead": "33d3086b8b7731150f900b92fa1146c1c29209c8"
 }