@awes-io/ui 2.100.0 → 2.101.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.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)
+
+
+### Bug Fixes
+
+* styles fixes ([baf58ba](https://github.com/awes-io/client/commit/baf58ba2e65709e5faed5203246c07c609c945f8))
+
+
+
+
+
 # [2.100.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.99.0...@awes-io/ui@2.100.0) (2024-04-04)
 
 

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/page-header.css

@@ -84,7 +84,7 @@
 
         &__breadcrumbs,
         &__buttons {
-            flex: 1 10 calc(100% / 3);
+            flex: 1 10 max-content;
         }
 
         &__buttons {

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

@@ -52,7 +52,8 @@
         margin-bottom: -0.1875rem;
     }
 
-    &--uncolor-prefix &__prefix {
+    &--uncolor-prefix &__prefix,
+    &--uncolor-postfix &__postfix {
         background-color: inherit;
         color: inherit;
     }

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/_AwSelectFakeInput.vue

@@ -2,15 +2,18 @@
     <div
         ref="element"
         class="aw-select-fake-input flex max-w-full aw-text-field is-text"
-        :class="{
-            'is-filled': value === 0 || !!value,
-            'has-label': !!label,
-            'has-error': hasError,
-            'is-disabled': isDisabled,
-            'has-icon': $slots.icon,
-            'has-prefix': prefix,
-            'has-postfix': postfix
-        }"
+        :class="[
+            themeClasses,
+            {
+                'is-filled': value === 0 || !!value,
+                'has-label': !!label,
+                'has-error': hasError,
+                'is-disabled': isDisabled,
+                'has-icon': $slots.icon,
+                'has-prefix': prefix,
+                'has-postfix': postfix
+            }
+        ]"
         @click="$emit('open')"
     >
         <span
@@ -95,6 +98,7 @@
 </template>
 
 <script>
+import { isType } from 'rambdax'
 import TextFieldMixin from '@AwMixins/text-field'
 
 export default {
@@ -123,6 +127,11 @@ export default {
             default: ''
         },
 
+        theme: {
+            type: String,
+            default: ''
+        },
+
         clearable: Boolean,
 
         caret: Boolean,
@@ -135,6 +144,14 @@ export default {
             return this.size === 'md' ? 'p-3' : 'p-2'
         },
 
+        themeClasses() {
+            return isType('String', this.theme)
+                ? this.theme
+                      .split(',')
+                      .map((modifier) => `aw-text-field--${modifier.trim()}`)
+                : []
+        },
+
         iconCount() {
             return 0 + this.clearable + this.caret
         }

package/components/3_organisms/AwModalButtons.vue

@@ -1,9 +1,23 @@
 <template>
-    <div class="aw-modal-buttons" :class="{ 'aw-modal-buttons--desktop': isDesktop, 'aw-modal-buttons--mobile': !isDesktop }">
+    <div
+        class="aw-modal-buttons"
+        :class="{
+            'aw-modal-buttons--desktop': isDesktop,
+            'aw-modal-buttons--mobile': !isDesktop
+        }"
+    >
         <!-- visible buttons -->
         <slot name="buttons" :buttons="groupedButtons.buttons">
             <AwButton
-                v-for="({ listeners, tooltip, size, cssClass, autoWidth, ...attrs }, i) in groupedButtons.buttons"
+                v-for="({
+                    listeners,
+                    tooltip,
+                    size,
+                    cssClass,
+                    autoWidth,
+                    ...attrs
+                },
+                i) in groupedButtons.buttons"
                 :key="i"
                 v-tooltip.prepend="tooltip"
                 v-bind="attrs"
@@ -12,22 +26,38 @@
                 :class="[
                     cssClass,
                     {
-                        'aw-modal-buttons__button--equal': !isDesktop && !autoWidth
+                        'aw-modal-buttons__button--equal':
+                            !isDesktop && !autoWidth
                     }
                 ]"
                 v-on="listeners"
             />
         </slot>
 
+        <!-- single non-cta button -->
+        <AwButton
+            v-if="singleDropdownButton"
+            v-bind="singleDropdownButton.attrs"
+            v-tooltip.prepend="singleDropdownButton.tooltip"
+            v-on="singleDropdownButton.listeners"
+        />
+
         <!-- dropdown buttons -->
-        <template v-if="groupedButtons.dropdown.length">
-            <slot name="toggler" :v-bind="{ togglerProps, isOpened, open, close }">
+        <template v-else-if="groupedButtons.dropdown.length">
+            <slot
+                name="toggler"
+                :v-bind="{ togglerProps, isOpened, open, close }"
+            >
                 <AwButton v-bind="togglerProps" @click="open" />
             </slot>
-            <AwDropdown :show.sync="isOpened" :options="$options.dropdownOptions">
+            <AwDropdown
+                :show.sync="isOpened"
+                :options="$options.dropdownOptions"
+            >
                 <slot name="dropdown" :buttons="groupedButtons.dropdown">
                     <AwDropdownButton
-                        v-for="({ listeners, tooltip, ...attrs }, i) in groupedButtons.dropdown"
+                        v-for="({ listeners, tooltip, ...attrs },
+                        i) in groupedButtons.dropdown"
                         :key="i"
                         v-tooltip.prepend="tooltip"
                         v-bind="attrs"
@@ -88,7 +118,10 @@ export default {
         groupedButtons() {
             return this.items.reduce(
                 (acc, item) => {
-                    const { cta, dropdown, show = true, ...itemProps } = { ...this.options, ...item }
+                    const { cta, dropdown, show = true, ...itemProps } = {
+                        ...this.options,
+                        ...item
+                    }
 
                     // rename class prop
                     if (itemProps.class) {
@@ -98,10 +131,20 @@ export default {
 
                     // add button if visible
                     if (show !== false) {
-                        const group = this.isDesktop ? (dropdown ? 'dropdown' : 'buttons') : cta ? 'buttons' : 'dropdown'
+                        const group = this.isDesktop
+                            ? dropdown
+                                ? 'dropdown'
+                                : 'buttons'
+                            : cta
+                            ? 'buttons'
+                            : 'dropdown'
 
                         // omit not available colors
-                        if (group === 'dropdown' && itemProps.color && !DROPDOWN_BUTTON_COLORS.includes(itemProps.color)) {
+                        if (
+                            group === 'dropdown' &&
+                            itemProps.color &&
+                            !DROPDOWN_BUTTON_COLORS.includes(itemProps.color)
+                        ) {
                             itemProps.color = undefined
                         }
 
@@ -114,12 +157,42 @@ export default {
             )
         },
 
+        singleDropdownButton() {
+            const singleButton =
+                this.groupedButtons.dropdown.length === 1
+                    ? this.groupedButtons.dropdown[0]
+                    : null
+
+            if (
+                singleButton &&
+                !!singleButton.icon &&
+                (singleButton.hideText || !singleButton.text)
+            ) {
+                const {
+                    listeners,
+                    tooltip,
+                    ...attrs
+                } = this.groupedButtons.dropdown[0]
+
+                return { listeners, tooltip, attrs }
+            }
+
+            return null
+        },
+
         togglerSize() {
-            return path([this.groupedButtons.buttons.length - 1, 'size'], this.groupedButtons.buttons)
+            return path(
+                [this.groupedButtons.buttons.length - 1, 'size'],
+                this.groupedButtons.buttons
+            )
         },
 
         togglerProps() {
-            return { ...omit(['cta'], this.options || {}), size: this.togglerSize, ...this.togglerOptions }
+            return {
+                ...omit(['cta'], this.options || {}),
+                size: this.togglerSize,
+                ...this.togglerOptions
+            }
         }
     },
 

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.0",
+    "version": "2.101.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": "baa508bf9c8f07ebbc9de17976c63215e6a05952"
+    "gitHead": "681e292d386de18b2ae3fd98a3de3b71d8b6742d"
 }