@awes-io/ui 2.100.0 → 2.100.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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/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/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/package.json

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