@awes-io/ui 2.142.3 → 2.143.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.143.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.142.3...@awes-io/ui@2.143.0) (2025-12-16)
+
+
+### Bug Fixes
+
+* docs updates ([882cac7](https://github.com/awes-io/client/commit/882cac7b8f42c7d99fec68b4fbd0ee5602dff1e8))
+
+
+### Features
+
+* awes config described in docs ([f8d8c46](https://github.com/awes-io/client/commit/f8d8c46eed7957a3dfccedc68bdf6c4e64689729))
+* common patterns in docs updated ([3330ab2](https://github.com/awes-io/client/commit/3330ab20e217d41a427650c216be40e56ea61956))
+* docs added ([1a7930b](https://github.com/awes-io/client/commit/1a7930b31d870a47b5198744034730e5841c0a8b))
+* docs website added ([2c7f41a](https://github.com/awes-io/client/commit/2c7f41a22d57a0b06cc4bdd112e3a4c1ff4b46ec))
+* file components example pages updated ([164fc1c](https://github.com/awes-io/client/commit/164fc1cbdf4098b31a507cfbeef4087c4a82465e))
+* new global components added ([b79848c](https://github.com/awes-io/client/commit/b79848caf3d6fc275b8693bed2ee52d8aed55d8e))
+* person select docs added ([9e65a68](https://github.com/awes-io/client/commit/9e65a68e293e94adf37ac7b215c88f37d5d43d96))
+* several page examples added ([89b1001](https://github.com/awes-io/client/commit/89b1001a801237571331e7765d4cc4b0aba865fa))
+* unused libs removed ([295f52e](https://github.com/awes-io/client/commit/295f52e37e98c1997a8af0abdfc720c839fff118))
+
+
+
+
+
 ## [2.142.3](https://github.com/awes-io/client/compare/@awes-io/ui@2.142.2...@awes-io/ui@2.142.3) (2025-12-12)
 
 

package/assets/css/components/_index.css

@@ -24,6 +24,7 @@
 @import './action-card.css';
 @import './action-card-body.css';
 @import './card.css';
+@import './content-placeholder.css';
 
 @import './chip.css';
 @import './chip-select';
@@ -39,7 +40,6 @@
 @import './dropdown.css';
 @import './dropdown-button.css';
 @import './flow.css';
-@import './filter-date-range.css';
 @import './list.css';
 
 @import './form.css';
@@ -47,6 +47,9 @@
 @import './text-field.css';
 @import './date.css';
 @import './filter-month.css';
+@import './filter-select.css';
+@import './filter-date-range.css';
+@import './filter-chosen.css';
 @import './headline.css';
 @import './image-upload.css';
 @import './info.css';
@@ -70,6 +73,7 @@
 @import './user-menu.css';
 @import './nav.css';
 @import './page.css';
+@import './page-aside.css';
 @import './page-modal.css';
 @import './page-menu-buttons.css';
 @import './page-header.css';
@@ -88,6 +92,8 @@
 
 @import './tel.css';
 
+@import './number.css';
+
 @import './notification.css';
 
 @import './tags.css';

package/assets/css/components/animation.css

@@ -9,7 +9,7 @@
 
 @keyframes aw-rotate {
     to {
-        transform: rotate(1turn)
+        transform: rotate(1turn);
     }
 }
 
@@ -25,35 +25,41 @@
 }
 
 @keyframes aw-shake {
- 0%,
- 100% {
-  transform:translateX(0)
- }
- 10% {
-  transform:translateX(-9px)
- }
- 20% {
-  transform:translateX(8px)
- }
- 30% {
-  transform:translateX(-7px)
- }
- 40% {
-  transform:translateX(6px)
- }
- 50% {
-  transform:translateX(-5px)
- }
- 60% {
-  transform:translateX(4px)
- }
- 70% {
-  transform:translateX(-3px)
- }
- 80% {
-  transform:translateX(2px)
- }
- 90% {
-  transform:translateX(-1px)
- }
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+    10% {
+        transform: translateX(-9px);
+    }
+    20% {
+        transform: translateX(8px);
+    }
+    30% {
+        transform: translateX(-7px);
+    }
+    40% {
+        transform: translateX(6px);
+    }
+    50% {
+        transform: translateX(-5px);
+    }
+    60% {
+        transform: translateX(4px);
+    }
+    70% {
+        transform: translateX(-3px);
+    }
+    80% {
+        transform: translateX(2px);
+    }
+    90% {
+        transform: translateX(-1px);
+    }
+}
+
+@keyframes aw-appear {
+    to {
+        opacity: 1;
+    }
 }

package/assets/css/components/content-placeholder.css

@@ -0,0 +1,103 @@
+.aw-content-placeholder {
+    --ph-gap-x: 1rem;
+    --ph-gap-y: 1rem;
+    --ph-border-radius: 0.5rem;
+
+    opacity: 0;
+    animation: aw-appear 200ms ease-in-out 100ms forwards;
+
+    display: grid;
+    grid-template-columns: repeat(var(--ph-columns), 1fr);
+    gap: var(--ph-gap-y) var(--ph-gap-x);
+
+    span {
+        display: block;
+        border-radius: var(--ph-border-radius);
+        width: var(--ph-width);
+        height: var(--ph-height);
+        aspect-ratio: var(--ph-aspect-ratio);
+
+        position: relative;
+        overflow: hidden;
+        background-color: rgba(var(--c-mono-900-rgb), 0.6);
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            max-width: 1000px;
+            height: 100%;
+            background: linear-gradient(
+                to right,
+                transparent 0%,
+                rgba(var(--c-mono-900-rgb), 0.15) 15%,
+                transparent 30%
+            );
+
+            animation-duration: 1.5s;
+            animation-fill-mode: forwards;
+            animation-iteration-count: infinite;
+            animation-name: ew-loading;
+            animation-timing-function: linear;
+        }
+    }
+
+    &--text,
+    &--island {
+        --ph-gap-y: 0.625rem;
+        --ph-height: 1rem;
+    }
+
+    &--text > span {
+        width: 90%;
+
+        &:nth-child(n + 2) {
+            width: 100%;
+        }
+
+        &:nth-child(2n + 3) {
+            width: 95%;
+        }
+    }
+
+    &--form {
+        --ph-border-radius: 0.625rem;
+        --ph-gap-y: 1.5rem;
+        --ph-height: 3.5rem;
+    }
+
+    &--button {
+        display: flex;
+        align-items: center;
+
+        --ph-height: 2.5rem;
+
+        @screen lg {
+            --ph-height: 3.5rem;
+        }
+
+        & > span {
+            width: 8rem;
+        }
+    }
+
+    &--image {
+        --ph-aspect-ratio: 16 / 9;
+    }
+
+    &--avatar {
+        --ph-width: 40px;
+        --ph-aspect-ratio: 1;
+        --ph-border-radius: 50%;
+    }
+}
+
+/* [data-dark='true'] .aw-content-placeholder span {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-dark='false'] .aw-content-placeholder span {
+    background-color: rgba(0, 0, 0, 0.04);
+} */

package/assets/css/components/empty-container.css

@@ -2,7 +2,75 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     gap: 1.5rem;
+    opacity: 0;
 
-    padding: 1.5rem 0;
+    &--padding {
+        @screen md {
+            padding: 1.25rem;
+        }
+
+        @acreen lg {
+            padding: 1.875rem;
+        }
+    }
+
+    &__icon {
+        width: 60px;
+        height: 60px;
+
+        @screen lg {
+            width: 80px;
+            height: 80px;
+        }
+    }
+
+    &__description {
+        max-width: 50rem;
+        width: 100%;
+    }
+
+    & > * {
+        opacity: 0;
+        transform: translateY(1.5rem);
+
+        &:nth-child(1) {
+            transition-delay: 140ms;
+        }
+
+        &:nth-child(2) {
+            transition-delay: 270ms;
+        }
+
+        &:nth-child(3) {
+            transition-delay: 340ms;
+        }
+
+        &:nth-child(4) {
+            transition-delay: 410ms;
+        }
+
+        &:nth-child(n + 5) {
+            transition-delay: 480ms;
+        }
+    }
+
+    img {
+        transform: scale(0.5);
+        transition-delay: 140ms;
+    }
+
+    &--visible {
+        opacity: 1;
+        transition: 200ms opacity cubic-bezier(0.33, 1, 0.68, 1);
+
+        & > *,
+        & > img {
+            opacity: 1;
+            transform: none;
+            transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
+            transition-property: transform, opacity;
+        }
+    }
 }

package/assets/css/components/filter-chosen.css

@@ -0,0 +1,6 @@
+.aw-filter-chosen {
+    .aw-chip__text {
+        display: flex;
+        align-items: center;
+    }
+}

package/assets/css/components/filter-date-range.css

@@ -6,12 +6,18 @@
             width: 100%;
         }
     }
+
+    .aw-filter-date-range {
+        .aw-dropdown__content--mobile {
+            max-height: 100%;
+        }
+    }
 }
 
 @screen sm {
     .aw-filter-date-range {
         &.aw-filter-date-range--width-full {
-             width: auto;
+            width: auto;
 
             .aw-button {
                 width: auto;
@@ -19,3 +25,13 @@
         }
     }
 }
+
+@screen md {
+    .aw-filter-date-range {
+        &__dropdown {
+            width: 320px;
+            max-width: 100%;
+            min-height: 446px;
+        }
+    }
+}

package/assets/css/components/filter-month.css

@@ -1,32 +1,30 @@
 .aw-filter-month {
-    @apply inline-flex;
+    display: inline-flex;
 
-    & > &__prev {
-        @apply rounded-r-none;
-    }
+    &__date {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
 
-    & > &__next {
-        @apply rounded-l-none;
-    }
+        padding-inline: 1rem;
 
-    & &__date {
-        @apply px-4 self-stretch leading-none flex flex-col justify-center border-t border-b;
-        border-color: theme('borderColor.default');
+        border: 2px solid var(--c-mono-800);
+        border-left-width: 0;
+        border-right-width: 0;
     }
 
     &.default &__date {
         min-width: 114px;
     }
 
-    & &__label {
-        @apply text-xs text-mono-400;
-    }
+    /* &__label {
+        font-size: 0.75rem;
+        color: var(--c-mono-400);
+    } */
 
     &__btn {
-        border-width: 1px;
-        border-style: solid;
-        border-color: theme('borderColor.default');
-        padding: 0.5rem 0.75rem;
+        border: 2px solid var(--c-mono-800);
+        padding: 0.375rem 0.625rem;
 
         svg {
             opacity: 0.4;
@@ -37,5 +35,13 @@
                 opacity: 0.9;
             }
         }
+
+        &--prev {
+            border-radius: 0.625rem 0 0 0.625rem;
+        }
+
+        &--next {
+            border-radius: 0 0.625rem 0.625rem 0;
+        }
     }
 }

package/assets/css/components/filter-select.css

@@ -0,0 +1,11 @@
+.aw-filter-select {
+    &__buttons {
+        @apply overflow-auto;
+        max-height: 225px;
+        overscroll-behavior: contain;
+    }
+
+    .aw-dropdown {
+        min-width: 200px;
+    }
+}

package/assets/css/components/layout.css

@@ -126,34 +126,7 @@
     &__center-logo {
         width: 70px;
         height: 70px;
-    }
-}
-
-@media (min-width: 35rem) {
-    .layout {
-        &&--frame-center,
-        &&--frame-left {
-            background-position: center;
-            background-size: cover;
-            background-attachment: fixed;
-        }
-
-        &&--frame-center &__frame {
-            @apply bg-surface p-12 shadow-lg;
-        }
-
-        &&--frame-left &__frame {
-            @apply bg-surface w-2/3 shadow-lg;
-        }
-    }
-}
-
-@media (max-width: 35rem) {
-    .layout {
-        &&--frame-center,
-        &&--frame-left {
-            background-image: none !important;
-        }
+        margin-bottom: 1.5rem;
     }
 }
 
@@ -207,9 +180,5 @@
         &&--simple &__header {
             @apply bg-surface;
         }
-
-        &&--frame-left &__frame {
-            @apply w-1/2;
-        }
     }
 }

package/assets/css/components/modal.css

@@ -207,7 +207,7 @@ $modal-aside-width-large: 75vw;
     }
 }
 
-@media (max-width: theme('sceens.sm')) {
+@media (max-width: theme('screens.sm')) {
     .aw-modal {
         &.is-fullscreen &__title {
             text-align: center;

package/assets/css/components/number.css

@@ -0,0 +1,12 @@
+.aw-number {
+    .aw-text-field__postfix {
+        display: flex;
+        gap: 0.5rem;
+        padding: 0 0.5rem;
+    }
+
+    &__button {
+        --btn-size: 2.5rem;
+        --btn-radius: 5px;
+    }
+}

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

@@ -0,0 +1,54 @@
+.aw-page-aside {
+    &__buttons {
+        margin-top: 1.5rem;
+
+        position: sticky;
+        bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--page-aside-buttons-bottom, 0px));
+    }
+}
+
+@screen lg {
+    .aw-page-aside-page-body {
+        .aw-layout {
+            .aw-layout__aw-layout-menu.aw-layout-menu--hide-submenu ~ .aw-page-aside,
+            .aw-layout__aw-layout-menu.aw-layout-menu--no-submenu ~ .aw-page-aside {
+                .aw-page-header__breadcrumbs {
+                    left: calc(6rem + 1.5rem);
+                }
+            }
+        }
+    }
+
+    .aw-page-aside {
+        display: flex;
+
+        &__content {
+            margin-bottom: auto;
+        }
+
+        &__buttons {
+            bottom: 1.5rem;
+            margin-bottom: env(safe-area-inset-bottom, 0px);
+        }
+
+        &__aside {
+            @apply p-6;
+            background-color: var(--c-surface);
+            color: var(--c-on-surface);
+            flex-shrink: 0;
+            width: var(--aside-width);
+
+            display: flex;
+            flex-direction: column;
+
+            &--line {
+                background-color: transparent;
+                border-left: 1px solid var(--c-mono-800);
+            }
+        }
+
+        &__wrapper {
+            width: calc(100% - var(--aside-width));
+        }
+    }
+}

package/assets/js/css.js

@@ -1,5 +1,5 @@
 export const camelCase = (str) => {
-    return str.replace(/[-_]([a-z])/g, (m) => m[1].toUpperCase())
+    return str.replace(/[-_]+([a-z])/g, (_, letter) => letter.toUpperCase())
 }
 
 /**