@awes-io/ui 2.100.1 → 2.102.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.102.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.101.0...@awes-io/ui@2.102.0) (2024-04-24)
+
+
+### Features
+
+* **aw-select-object:** pass close function to slots ([ade33a0](https://github.com/awes-io/client/commit/ade33a0dfae9aaef4cd228557b21b5290c35909a))
+
+
+
+
+
+# [2.101.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.100.1...@awes-io/ui@2.101.0) (2024-04-19)
+
+
+### Bug Fixes
+
+* tel updated ([808bb10](https://github.com/awes-io/client/commit/808bb104783bd7a98a417cf0aeff9fa0cd8e71c0))
+
+
+### Features
+
+* add description for aw card ([2961740](https://github.com/awes-io/client/commit/2961740faae3ebb93c2cf7a5efe74bef93f03522))
+
+
+
+
+
 ## [2.100.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.100.0...@awes-io/ui@2.100.1) (2024-04-05)
 
 

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

@@ -12,7 +12,7 @@
         );
     gap: 0 1rem;
 
-    padding: 2rem;
+    padding: 1.5rem;
     border-radius: 1rem;
 
     width: 100%;

package/assets/css/components/action-card.css

@@ -19,6 +19,9 @@
     }
 
     &__title {
+        font-size: 1rem;
+        line-height: 1.5;
+
         margin-top: 0;
         margin-bottom: 0;
         margin-inline-end: auto;
@@ -33,4 +36,16 @@
         left: 0;
         top: 0;
     }
+
+    :where(.container, .container-small, .container-full) & {
+        margin-left: calc(-1 * var(--container-padding));
+        margin-right: calc(-1 * var(--container-padding));
+        width: calc(100% + 2 * var(--container-padding));
+
+        @screen lg {
+            margin-left: initial;
+            margin-right: initial;
+            width: 100%;
+        }
+    }
 }

package/assets/css/components/card.css

@@ -13,14 +13,16 @@
     box-shadow: none;
 
     &__title {
-        margin-bottom: 0;
+        display: flex;
     }
 
     &__header {
         display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
 
         &--offset {
-            margin-bottom: 0.75rem;
+            margin-bottom: 1.5rem;
         }
     }
 
@@ -42,10 +44,6 @@
     .aw-card {
         --card-padding-x: 1.875rem;
         --card-padding-y: 1.875rem;
-
-        &__header--offset {
-             margin-bottom: 1.25rem;
-         }
     }
 
     .container .aw-card,

package/assets/css/components/modal.css

@@ -20,8 +20,10 @@ $modal-aside-width-large: 75vw;
     }
 
     &__dialog {
-        @apply relative max-w-full mx-auto bg-surface;
+        @apply relative max-w-full mx-auto;
 
+        background-color: var(--c-surface);
+        color: var(--c-on-surface);
         border-top-left-radius: 0.9375rem;
         border-top-right-radius: 0.9375rem;
     }
@@ -229,7 +231,8 @@ $modal-aside-width-large: 75vw;
             width: calc(100% + 4rem);
         }
 
-        &[class*='is-fullscreen'] &, &[class*='is-overlay-aside'] & {
+        &[class*='is-fullscreen'] &,
+        &[class*='is-overlay-aside'] & {
             &__dialog {
                 border-radius: 0;
             }
@@ -261,9 +264,9 @@ $modal-aside-width-large: 75vw;
             @apply p-8;
         }
 
-        &[class*='is-overlay-aside'] &__content--buttons {
+        /* &[class*='is-overlay-aside'] &__content--buttons {
             padding-bottom: 7rem;
-        }
+        } */
 
         &__buttons {
             @apply static;
@@ -297,6 +300,7 @@ $modal-aside-width-large: 75vw;
             margin-top: auto;
             position: sticky;
             bottom: 0;
+            z-index: 1;
 
             & > .aw-button {
                 flex-grow: 1;
@@ -367,7 +371,8 @@ $modal-aside-width-large: 75vw;
             max-width: 580px;
         }
 
-        &.is-fullscreen &__dialog, &.is-overlay-aside &__dialog {
+        &.is-fullscreen &__dialog,
+        &.is-overlay-aside &__dialog {
             border-radius: 0;
         }
 

package/assets/css/components/text-field.css

@@ -67,7 +67,9 @@
     }
 
     &__element {
-        @apply w-full truncate block bg-surface;
+        @apply w-full truncate block;
+        background-color: var(--c-surface);
+        color: var(--c-on-surface);
         line-height: 1.5;
         border-radius: 0.625rem;
 
@@ -110,7 +112,8 @@
     }
 
     &--page &__element {
-        @apply bg-page-bg;
+        background-color: var(--c-page-bg);
+        color: var(--c-on-page-bg);
     }
 
     &__fake-input {

package/assets/css/typography.css

@@ -7,13 +7,13 @@
 
         line-height: 1.5;
 
-        overscroll-behavior-y: none;
+        overscroll-behavior: none;
         scrollbar-color: rgba(var(--c-on-page-bg-rgb), 0.1) transparent;
 
         &::-webkit-scrollbar {
             width: 12px;
             height: 12px;
-            background-color: transparent;
+            background-color: var(--c-page-bg);
         }
 
         &::-webkit-scrollbar-thumb {

package/assets/js/styles.js

@@ -11,7 +11,10 @@ export const CUSTOM_COLORS = {
     green: '#2bb611',
     lime: '#a4bf00',
     grey: '#565656',
-    'light-grey': '#8b9aab'
+    'light-grey': '#8b9aab',
+    black: '#000',
+    forest: '#177200',
+    brown: '#b55700'
 }
 
 const CUSTOM_COLORS_KEYS = keys(CUSTOM_COLORS)
@@ -27,7 +30,10 @@ export const CUSTOM_COLORS_BG_LIGHT = {
     green: '#ddefd9',
     lime: '#f1f5d9',
     grey: '#eceded',
-    'light-grey': '#ecf0f5'
+    'light-grey': '#ecf0f5',
+    black: '#d8d9da',
+    forest: '#d1e3cc',
+    brown: '#f0ddcc'
 }
 
 export const CUSTOM_COLORS_BG_DARK = {
@@ -41,7 +47,10 @@ export const CUSTOM_COLORS_BG_DARK = {
     green: '#2D4A2C',
     lime: '#464C29',
     grey: '#393A3D',
-    'light-grey': '#41444B'
+    'light-grey': '#41444B',
+    black: '#252629',
+    forest: '#293c29',
+    brown: '#493729'
 }
 
 export default {

package/components/1_atoms/AwCard.vue

@@ -6,14 +6,23 @@
                 class="aw-card__header"
                 :class="{ 'aw-card__header--offset': hasContent }"
             >
-                <slot name="title">
-                    <AwSubHeadline class="aw-card__title" :tag="titleTag">
-                        {{ title }}
-                    </AwSubHeadline>
-                </slot>
-                <div class="aw-card__header-badge">
-                    <slot name="badge"></slot>
+                <div class="aw-card__title">
+                    <slot name="title">
+                        <AwSubHeadline class="my-0" :tag="titleTag">
+                            {{ title }}
+                        </AwSubHeadline>
+                    </slot>
+
+                    <div class="aw-card__header-badge">
+                        <slot name="badge"></slot>
+                    </div>
                 </div>
+
+                <slot name="description">
+                    <AwDescription v-if="description" tag="div">
+                        {{ description }}
+                    </AwDescription>
+                </slot>
             </div>
         </slot>
 
@@ -22,9 +31,13 @@
 </template>
 
 <script>
+import AwDescription from '@AwAtoms/AwDescription.vue'
+
 export default {
     name: 'AwCard',
 
+    components: { AwDescription },
+
     inheritAttrs: false,
 
     props: {
@@ -41,6 +54,11 @@ export default {
         title: {
             type: String,
             default: ''
+        },
+
+        description: {
+            type: String,
+            default: ''
         }
     },
 

package/components/1_atoms/AwInput.vue

@@ -141,18 +141,12 @@ export default {
     computed: {
         elClasses() {
             let base = this.$options._config.baseClass
-            const theme = String(this.theme)
+            const theme = String(this.theme || '')
+                .split(',')
+                .map((modifier) => `${base}--${modifier}`)
 
             return {
-                base: [
-                    base,
-                    {
-                        [`${base}--page`]: theme.includes('page'),
-                        [`${base}--uncolor-prefix`]: theme.includes(
-                            'uncolor-prefix'
-                        )
-                    }
-                ],
+                base: [base].concat(theme),
                 el: `${base}__element`,
                 label: `${base}__label`,
                 labelRequired: `${base}__label--required`,

package/components/2_molecules/AwSelectObject.vue

@@ -177,7 +177,8 @@
                         optionsList,
                         isLoading,
                         hasSearch: !isLoading && !!_searchPhraseLength,
-                        searchPhrase
+                        searchPhrase,
+                        close
                     }"
                 ></slot>
 
@@ -222,7 +223,8 @@
                                 v-bind="{
                                     ...optionsList[i],
                                     searchPhrase,
-                                    highlightSearch
+                                    highlightSearch,
+                                    close
                                 }"
                             >
                                 <span v-html="highlightSearch(optionLabel)" />

package/components/3_organisms/AwTel.vue

@@ -249,12 +249,13 @@ export default {
             const value = $event.target.value
             const phoneNumber = this._parsePhoneNumber(value, this.country)
             const phoneValue = this._getPhoneValue(phoneNumber)
+            const isTyping = $event.data !== null
 
             // open dropdown on backspace
             if (
                 phoneNumber.number === '' &&
                 phoneValue === this.phoneValue &&
-                $event.data === null
+                !isTyping
             ) {
                 this.$nextTick(this._openCountriesDropdown)
                 return
@@ -262,9 +263,20 @@ export default {
 
             // save caret position
             let pos = $event.target.selectionStart
-            const digit = pos > 0 ? value[pos - 1] : '_'
+            let digit = pos > 0 ? value[pos - 1] : '_'
             let adjustPosition = false
 
+            if (isTyping && digit === ' ') {
+                adjustPosition = true
+
+                const max = value.length
+
+                while (pos < max && digit === ' ') {
+                    pos++
+                    digit = value[pos - 1]
+                }
+            }
+
             if (phoneValue !== this.phoneValue) {
                 adjustPosition = true
 
@@ -288,7 +300,7 @@ export default {
                 this.$refs.input.setError('')
             }
 
-            if ($event.data !== null && this.showCountries) {
+            if (isTyping && this.showCountries) {
                 this.showCountries = false
             }
 
@@ -308,6 +320,10 @@ export default {
                         pos++
                     }
 
+                    while (isTyping && newValue[pos - 1] === ' ' && pos < max) {
+                        pos++
+                    }
+
                     $event.target.setSelectionRange(pos, pos)
                 })
             }

package/components/4_pages/AwPage.vue

@@ -84,7 +84,11 @@
         >
             <!-- eslint-disable prettier/prettier -->
             <div :class="[containerClass, { 'aw-page__grid': hasAside }]">
-                <div class="aw-page__mobile-title" aria-hidden="true">
+                <div
+                    v-if="_title"
+                    class="aw-page__mobile-title"
+                    aria-hidden="true"
+                >
                     {{ _title }}
                 </div>
 

package/components/4_pages/AwPageMenuButtons.vue

@@ -138,7 +138,7 @@ export default {
 
     computed: {
         teleportButtonsTo() {
-            return this.injectedTeleportButtonsTo || this.teleportButtonsTo
+            return this.injectedTeleportButtonsTo || this.teleportFixedTo
         },
 
         isExpanded() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.100.1",
+    "version": "2.102.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": "d3cadf5921e51b1a8f4af71e028928a7f072733c"
+    "gitHead": "c8f5b80c78849f95b0bd80be7b0293047a9fd828"
 }