@awes-io/ui 2.143.0 → 2.144.0

package/components/2_molecules/AwAlert.vue

@@ -1,57 +1,72 @@
 <template>
-    <div
-        class="aw-alert"
-        :class="{ 'aw-alert--color-default': isDefaultColor }"
-        :style="styleVariables"
-    >
-        <AwDescription tag="div" class="aw-alert__title">
-            <span v-if="icon || $scopedSlots.icon" class="aw-alert__icon">
-                <slot name="icon">
-                    <AwIcon
-                        v-if="icon"
-                        :name="icon"
-                        :style="{
-                            color: iconColor ? `var(--c-${iconColor})` : null
-                        }"
-                        size="16"
-                    />
-                </slot>
-            </span>
-
-            <span class="aw-alert__title-text">
-                <slot name="title">{{ title }}</slot>
-
-                <slot name="description">
-                    <span v-if="description" class="font-normal block mt-1">
-                        {{ description }}
+    <div class="aw-alert" :style="styleVariables">
+        <div>
+            <AwDescription tag="div" class="aw-alert__title">
+                <span v-if="icon || $scopedSlots.icon" class="aw-alert__icon">
+                    <slot name="icon">
+                        <AwIcon
+                            v-if="icon"
+                            :name="icon"
+                            :color="iconColor"
+                            size="16"
+                        />
+                    </slot>
+                </span>
+
+                <span class="aw-alert__title-text">
+                    <slot name="title">{{ title }}</slot>
+
+                    <slot name="description">
+                        <span v-if="description" class="font-normal block mt-1">
+                            {{ description }}
+                        </span>
+                    </slot>
+
+                    <span v-if="$scopedSlots.default" class="aw-alert__buttons">
+                        <slot />
                     </span>
-                </slot>
-            </span>
-        </AwDescription>
+                </span>
+            </AwDescription>
+        </div>
 
-        <div v-if="$scopedSlots.default" class="aw-alert__buttons">
-            <slot />
+        <div v-if="$scopedSlots.close" class="aw-alert__close">
+            <slot name="close" />
         </div>
     </div>
 </template>
 
 <script>
-import { toOnColor } from '@AwUtils/styles'
+import { toColor, toOnColor } from '@AwUtils/styles'
+import { pathOr } from 'rambdax'
+import { AwAlert as _config } from '@AwConfig'
+import { conf } from '@AwUtils/component'
 
 export default {
     name: 'AwAlert',
 
+    _config,
+
     props: {
         icon: {
             type: String,
             default: ''
         },
 
-        color: {
+        config: {
             type: String,
             default: 'default'
         },
 
+        color: {
+            type: String,
+            default: ''
+        },
+
+        onColor: {
+            type: String,
+            default: ''
+        },
+
         iconColor: {
             type: String,
             default: ''
@@ -69,19 +84,25 @@ export default {
     },
 
     computed: {
-        isCustomColor() {
-            return this.color && this.color !== 'default'
-        },
+        styleVariables() {
+            const CONFIG = conf(this, 'configColors')
 
-        isDefaultColor() {
-            return this.color === 'default'
-        },
+            let color = pathOr('', `${this.config}.color`, CONFIG)
+            let onColor = pathOr('', `${this.config}.onColor`, CONFIG)
+
+            if (this.color) {
+                color = this.color
+            }
+
+            if (this.onColor) {
+                onColor = this.onColor
+            }
 
-        styleVariables() {
             return {
-                '--aw-alert-color': this.isCustomColor
-                    ? toOnColor(this.color)
-                    : null
+                '--aw-alert-color': toColor(color),
+                '--aw-alert-on-color': onColor
+                    ? toOnColor(onColor)
+                    : toOnColor(color)
             }
         }
     }

package/components/2_molecules/AwBadge.vue

@@ -2,7 +2,7 @@
     <span
         :class="[data.staticClass, data.class]"
         :style="[data.staticStyle, data.style]"
-        class="aw-badge inline-flex items-center"
+        class="aw-badge inline-flex items-center gap-1"
     >
         <!-- Content passed to component -->
         <slot></slot>

package/components/2_molecules/AwBannerText.vue

@@ -2,7 +2,10 @@
     <div class="aw-banner-text">
         <div
             class="aw-banner-text__icon"
-            :class="{ 'aw-banner-text__icon--rounded': rounded }"
+            :class="{
+                'aw-banner-text__icon--rounded': rounded,
+                'aw-banner-text__icon--square': !rounded
+            }"
             :style="{ backgroundImage: src ? `url(${src})` : null }"
         >
             <slot name="icon">
@@ -19,6 +22,7 @@
         <AwSubHeadline class="aw-banner-text__title">
             <slot name="title">{{ title }}</slot>
             <AwIconSystemMono
+                v-if="titleArrow"
                 name="angle"
                 rotate="180"
                 class="aw-banner-text__title-arrow"
@@ -61,7 +65,9 @@ export default {
             default: ''
         },
 
-        rounded: {
+        rounded: Boolean,
+
+        titleArrow: {
             type: Boolean,
             default: true
         }

package/components/2_molecules/AwDescriptionInput.vue

@@ -1,11 +1,25 @@
 <template>
     <div>
         <slot />
-        <AwDescription v-if="text != ''" class="mt-2 inline-block" v-html="text" />
+        <AwDescription
+            v-if="text && !$scopedSlots.text"
+            key="default"
+            class="mt-2 inline-block"
+            v-html="sanitize(text)"
+        />
+        <AwDescription
+            v-else-if="$scopedSlots.text"
+            key="textslot"
+            class="mt-2 inline-block"
+        >
+            <slot name="text"></slot>
+        </AwDescription>
     </div>
 </template>
 
 <script>
+import { sanitize } from '@AwUtils/string'
+
 export default {
     name: 'AwDescriptionInput',
 
@@ -14,6 +28,10 @@ export default {
             type: String,
             default: ''
         }
+    },
+
+    methods: {
+        sanitize
     }
 }
 </script>

package/components/3_organisms/AwBottomBar.vue

@@ -1,5 +1,10 @@
 <template>
-    <div v-if="showMenu" class="aw-bottom-bar" :style="itemMaxWidthVar" @click="scrollToTopOnCurrent">
+    <div
+        v-if="showMenu"
+        class="aw-bottom-bar"
+        :style="itemMaxWidthVar"
+        @click="scrollToTopOnCurrent"
+    >
         <slot name="bottom-bar-items">
             <AwMenuItemIcon
                 v-for="(item, i) in items"
@@ -11,7 +16,13 @@
         </slot>
 
         <slot name="bottom-bar-toggler">
+            <Component
+                v-if="bottomBarMoreMenuItemComponent"
+                :is="bottomBarMoreMenuItemComponent.is"
+            />
+
             <AwMenuItemIcon
+                v-else
                 :text="$t('Menu')"
                 icon="menu-dots"
                 :size="$options.ICON_SIZE"
@@ -43,6 +54,7 @@
 import { viewOr, lensProp, omit } from 'rambdax'
 import { getPath } from '@AwUtils/router'
 import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
+import { mapGetters } from 'vuex'
 
 export const VISIBLE_ITEMS_COUNT = 4
 
@@ -66,8 +78,10 @@ export default {
     },
 
     computed: {
+        ...mapGetters('awesIo', ['bottomBarMoreMenuItemComponent']),
+
         itemMaxWidthVar() {
-            return { '--item-width-percent': (100 / this.items.length + 1) + '%' }
+            return { '--item-width-percent': 100 / this.items.length + 1 + '%' }
         },
 
         actionButton() {
@@ -135,11 +149,15 @@ export default {
         },
 
         scrollToTopOnCurrent($event) {
-            const link = $event.target.matches('a') ? $event.target : $event.target.closest('a')
+            const link = $event.target.matches('a')
+                ? $event.target
+                : $event.target.closest('a')
 
             if (!link) return
 
-            if (getPath(link.getAttribute('href')) === getPath(this.$route.path)) {
+            if (
+                getPath(link.getAttribute('href')) === getPath(this.$route.path)
+            ) {
                 window.scrollTo({ top: 0, behavior: 'smooth' })
             }
         }

package/components/3_organisms/AwSubnav.vue

@@ -1,5 +1,10 @@
 <template>
-    <AwMobileMenuNav :title="_title" :items="_children" :all-divides="!hideSeparator" />
+    <AwMobileMenuNav
+        :title="_title"
+        :items="_children"
+        :all-divides="!hideSeparator"
+        :badge="badge"
+    />
 </template>
 
 <script>
@@ -24,6 +29,11 @@ export default {
             default: null
         },
 
+        badge: {
+            type: Object,
+            default: null
+        },
+
         hideTitle: Boolean,
 
         hideSeparator: Boolean

package/components/3_organisms/AwTable/AwTableBuilder.vue

@@ -26,6 +26,14 @@
                     theme="card"
                     icon="awesio/search"
                     :title="$t('No results were found for your request')"
+                    :cta-button="{
+                        text: $route.query.search
+                            ? $t('Clear search')
+                            : $t('Reset filters'),
+                        href: { path: $route.path },
+                        icon: 'awesio/delete',
+                        theme: 'outline'
+                    }"
                     class="mb-5"
                 />
             </slot>

package/components/3_organisms/AwTable/_AwTableCellDropdown.vue

@@ -14,7 +14,7 @@
             :options="{ placement: 'bottom-end' }"
             class="aw-table__aw-context-menu"
         >
-            <slot :cell="props.rowData"></slot>
+            <slot :cell="props.rowData" :index="props.index"></slot>
         </Component>
     </td>
 </template>
@@ -38,6 +38,11 @@ export default {
 
         rowData: {
             default: ''
+        },
+
+        index: {
+            type: Number,
+            required: true
         }
     }
 }

package/components/3_organisms/AwTable/_AwTableRow.vue

@@ -109,7 +109,8 @@ export default {
                                 isDesktop &&
                                 (!!dropdownSlot || hasRowClickListener),
                             hasRowClickListener,
-                            rowData
+                            rowData,
+                            index
                         },
                         scopedSlots: { default: dropdownSlot }
                     })

package/components/4_pages/AwPage.vue

@@ -61,6 +61,7 @@
                                 }"
                             >
                                 {{ title }}
+                                <slot name="after-title"></slot>
                             </h1>
                         </slot>
                     </template>

package/components/5_layouts/_AwMenuItemIcon.vue

@@ -13,7 +13,13 @@
                 class="aw-icon-menu-item__icon-block"
                 tabindex="-1"
                 v-tooltip:right="
-                    tooltip ? { content: text, offset: [0, 7], class: 'aw-icon-menu-item-tooltip' } : null
+                    tooltip
+                        ? {
+                              content: text,
+                              offset: [0, 7],
+                              class: 'aw-icon-menu-item-tooltip'
+                          }
+                        : null
                 "
             >
                 <AwIcon
@@ -96,7 +102,8 @@ export default {
                           'bg-success',
                           'bg-warning',
                           'bg-error',
-                          'bg-info'
+                          'bg-info',
+                          'bg-blue'
                       ].includes('bg-' + badge.color)
                     : true
             }

package/components/5_layouts/_AwMobileMenuItem.vue

@@ -27,7 +27,11 @@
             </span>
 
             <span class="aw-mobile-menu-item__text" tabindex="-1">
-                <span v-html="text" />
+                <span class="flex items-center gap-2">
+                    <span v-html="text" />
+
+                    <AwBadge v-if="badge" v-bind="badge" />
+                </span>
 
                 <span
                     v-if="description"
@@ -49,8 +53,6 @@
                 v-on="switcher.listeners"
             />
 
-            <AwBadge v-if="badge" v-bind="badge" />
-
             <AwIconSystemMono
                 v-if="_linkExternal"
                 name="external"

package/components/_config.js

@@ -266,6 +266,30 @@ export const AwToggleShowAside = {
     }
 }
 
+export const AwAlert = {
+    configColors: {
+        info: {
+            color: 'light-grey',
+            onColor: 'blue'
+        },
+        success: {
+            color: 'green'
+        },
+        warning: {
+            color: 'yellow'
+        },
+        error: {
+            color: 'red'
+        },
+        grey: {
+            color: 'light-grey'
+        },
+        default: {
+            color: 'light-grey'
+        }
+    }
+}
+
 export default {
     AwAvatar,
     AwBirthdayPicker,
@@ -290,5 +314,6 @@ export default {
     AwTable,
     AwTags,
     AwTel,
-    AwToggleShowAside
+    AwToggleShowAside,
+    AwAlert
 }

package/docs/components/atoms/aw-accordion-fold.md

@@ -21,42 +21,80 @@ The `AwAccordionFold` component provides a collapsible content wrapper with smoo
 ### Basic Example
 
 ```markup
+<AwButton
+    :text="isOpen ? 'Close' : 'Open'"
+    color="mono"
+    @click="isOpen = !isOpen"
+/>
 <AwAccordionFold :show="isOpen">
-    <p>Collapsible content</p>
+    <AwCard>
+        <AwDescription>Your content here</AwDescription>
+    </AwCard>
 </AwAccordionFold>
 ```
 
-### With Toggle
+### Custom Tag
+
+```markup
+<AwButton
+    text="Toggle Section"
+    color="mono"
+    @click="isOpen = !isOpen"
+/>
+<AwAccordionFold :show="isOpen" tag="section">
+    <AwCard>
+        <AwDescription>Content wrapped in a section tag</AwDescription>
+    </AwCard>
+</AwAccordionFold>
+```
+
+### Multiple Accordions (Single Open)
 
 ```markup
 <template>
-    <div>
-        <AwButton @click="isOpen = !isOpen">Toggle</AwButton>
-        <AwAccordionFold :show="isOpen">
-            <div>Content that expands and collapses</div>
-        </AwAccordionFold>
-    </div>
+    <AwGrid :gap="1">
+        <div v-for="(item, index) in items" :key="index">
+            <AwButton
+                :text="item.title"
+                color="mono"
+                class="w-full"
+                @click="toggleItem(index)"
+            />
+            <AwAccordionFold :show="openItems.includes(index)">
+                <AwCard>
+                    {{ item.content }}
+                </AwCard>
+            </AwAccordionFold>
+        </div>
+    </AwGrid>
 </template>
 
 <script>
 export default {
     data() {
         return {
-            isOpen: false
+            openItems: [],
+            items: [
+                { title: 'First Item', content: 'Content for the first accordion item.' },
+                { title: 'Second Item', content: 'Content for the second accordion item.' },
+                { title: 'Third Item', content: 'Content for the third accordion item.' }
+            ]
+        }
+    },
+    methods: {
+        toggleItem(index) {
+            const pos = this.openItems.indexOf(index)
+            if (pos > -1) {
+                this.openItems = []
+            } else {
+                this.openItems = [index]
+            }
         }
     }
 }
 </script>
 ```
 
-### Custom Tag
-
-```markup
-<AwAccordionFold :show="show" tag="section">
-    <p>Content in a section tag</p>
-</AwAccordionFold>
-```
-
 ## API
 
 ### Props

package/docs/components/atoms/aw-action-card-body.md

@@ -21,9 +21,9 @@ The `AwActionCardBody` component provides a structured body section for `AwActio
 ### Basic Example
 
 ```markup
-<AwActionCard title="Card Title">
+<AwActionCard title="Parent Card">
     <AwActionCardBody>
-        <p>Card content goes here</p>
+        <AwDescription tag="div">Body content here</AwDescription>
     </AwActionCardBody>
 </AwActionCard>
 ```
@@ -31,9 +31,39 @@ The `AwActionCardBody` component provides a structured body section for `AwActio
 ### With Title
 
 ```markup
-<AwActionCardBody title="Section Title">
-    <p>Content with section title</p>
-</AwActionCardBody>
+<AwActionCard title="Order Details">
+    <AwActionCardBody title="Order #12345">
+        <AwDescription tag="div">Status: Shipped</AwDescription>
+    </AwActionCardBody>
+</AwActionCard>
+```
+
+### Multiple Bodies
+
+```markup
+<AwActionCard title="User Profile">
+    <AwActionCardBody title="Personal Information">
+        <AwDescription tag="div">Name: John Doe</AwDescription>
+    </AwActionCardBody>
+    <AwActionCardBody title="Preferences">
+        <AwDescription tag="div">Language: English</AwDescription>
+    </AwActionCardBody>
+</AwActionCard>
+```
+
+### With AwInfo for Stats
+
+```markup
+<AwActionCard title="Dashboard Stats">
+    <AwActionCardBody>
+        <AwGrid :col="{ sm: 2 }">
+            <AwInfo label="Users" text="1,234" />
+            <AwInfo label="Revenue" text="$45,678" />
+            <AwInfo label="Orders" text="890" />
+            <AwInfo label="Growth" text="+12%" />
+        </AwGrid>
+    </AwActionCardBody>
+</AwActionCard>
 ```
 
 ## API
@@ -58,6 +88,8 @@ No events are emitted by this component.
 
 - `AwActionCard` - Parent card component
 - `AwActionIcon` - Icon component for action cards
+- `AwInfo` - Info component for displaying key-value pairs
+- `AwDescription` - Description text component
 
 ## Notes