@awes-io/ui 2.118.0 → 2.119.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.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)
+
+
+### Bug Fixes
+
+* fix aw uploader loading max files ([288e57b](https://github.com/awes-io/client/commit/288e57b64ea69187488f3b121c06388737607e47))
+* fix z-index in tooltip ([297f4d4](https://github.com/awes-io/client/commit/297f4d489e25c6768105db73745836d44af9a8ce))
+
+
+
+
+
 # [2.118.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.117.0...@awes-io/ui@2.118.0) (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/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

@@ -3,9 +3,8 @@
     align-items: center;
     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;
@@ -72,6 +71,10 @@
         }
     }
 
+    &__breadcrumbs {
+        align-self: flex-start;
+    }
+
     &__breadcrumbs,
     &__buttons {
         flex: 1 1 3rem;
@@ -106,7 +109,7 @@
 @screen lg {
     .aw-page-header {
         /* padding-left: 2.5rem;
-        padding-right: 2.5rem; */
+    padding-right: 2.5rem; */
 
         &--primary {
             @apply bg-surface;
@@ -119,19 +122,12 @@
 
         &--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)
-                );
+            flex: 0 0 calc(50% - var(--header-container-width) / 2 + var(--header-padding-horizontal));
         }
 
         &:where(:not(&--container)) &__title {
@@ -147,14 +143,14 @@
         }
 
         /* :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/css/components/tooltip.css

@@ -10,7 +10,7 @@
 
     &[data-visible] {
         display: block;
-        z-index: 19;
+        z-index: 20;
     }
 
     &[data-popper-reference-hidden] {

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/assets/js/styles.js

@@ -56,6 +56,7 @@ export const CUSTOM_COLORS_BG_DARK = {
 export default {
     default: {
         colors: {
+            white: '#ffffff',
             accent: '#56af40',
             'accent-hover': '#469E30',
             success: '#56af40',
@@ -114,6 +115,7 @@ export default {
     },
     dark: {
         colors: {
+            white: '#ffffff',
             accent: '#56af40',
             success: '#56af40',
             info: '#4a7fe4',

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/3_organisms/AwUploader.vue

@@ -315,7 +315,7 @@ export default {
         _uploadFile(files) {
             this.errorText = ''
 
-            let maxFilesForUpload = files.length - 1
+            let maxFilesForUpload = 0
 
             if (this.maxFiles) {
                 maxFilesForUpload = this.maxFiles - this.uploadedFilesNumber - 1
@@ -328,11 +328,14 @@ export default {
                             this.maxFiles
                         )
                     })
+                } else {
+                    maxFilesForUpload = files.length - 1
                 }
             }
 
             for (var i = maxFilesForUpload; i >= 0; i--) {
                 const file = files[i]
+
                 const errors = this._validateFile(file)
 
                 if (!isEmpty(errors)) {

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/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.0",
+    "version": "2.119.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": "9fac83b530a7826aea528e3823d0317e439133f6"
+    "gitHead": "f9ac1c4a9f97c7786f5d25ff792d005ca23b8d75"
 }