@awes-io/ui 2.142.3 → 2.144.0

package/components/1_atoms/AwContentPlaceholder.vue

@@ -0,0 +1,60 @@
+<template>
+    <span
+        class="aw-content-placeholder"
+        :class="{
+            'aw-content-placeholder--text': type === 'text',
+            'aw-content-placeholder--form': type === 'form',
+            'aw-content-placeholder--image': type === 'image',
+            'aw-content-placeholder--avatar': type === 'avatar',
+            'aw-content-placeholder--button': type === 'button'
+        }"
+        :style="{ '--ph-columns': _columns }"
+    >
+        <span v-for="i in _items" :key="i" aria-hidden="true"></span>
+    </span>
+</template>
+
+<script>
+import { clamp } from 'rambdax'
+
+export default {
+    name: 'AwContentPlaceholder',
+
+    props: {
+        type: {
+            type: String,
+            default: 'form' // text, form, image, avatar, button
+        },
+
+        lines: {
+            type: Number,
+            default() {
+                return this.type === 'text' ? 8 : 1
+            }
+        },
+
+        columns: {
+            type: Number,
+            default: 1 // 1, 2, 3
+        }
+    },
+
+    computed: {
+        _columns() {
+            return clamp(1, 3, this.columns)
+        },
+
+        _lines() {
+            return this.type === 'image' || this.type === 'avatar'
+                ? 1
+                : this.type === 'button'
+                ? clamp(1, 2, this.lines)
+                : clamp(1, 20, this.lines)
+        },
+
+        _items() {
+            return this._lines * this._columns
+        }
+    }
+}
+</script>

package/components/1_atoms/AwFlow.vue

@@ -1,6 +1,32 @@
-<script>
-import { notEmptyNode } from '@AwUtils/component'
+<template>
+    <Component
+        :is="tag"
+        :class="{
+            flex: !inline,
+            'inline-flex': inline,
+            'flex-wrap': wrap,
+            'flex-col': vertical,
+            'justify-center': justify === 'center',
+            'justify-between': justify === 'between',
+            'justify-end': justify === 'end',
+            'justify-start': justify === 'start',
+            'items-center': _align === 'center',
+            'items-end': _align === 'end',
+            'items-start': _align === 'start',
+            'gap-1': gap === 1,
+            'gap-2': gap === 2,
+            'gap-3': gap === 3,
+            'gap-4': gap === 4,
+            'gap-5': gap === 5,
+            'gap-6': gap === 6,
+            'gap-8': gap === 8
+        }"
+    >
+        <slot />
+    </Component>
+</template>
 
+<script>
 export default {
     name: 'AwFlow',
 
@@ -15,64 +41,26 @@ export default {
             default: 4
         },
 
-        wrapChildren: {
-            type: Boolean,
-            default: true
-        },
-
         justify: {
             type: String,
             default: ''
         },
 
         align: {
-            type: String,
-            default: ''
+            type: String
         },
 
-        vertical: Boolean
-    },
+        vertical: Boolean,
 
-    render(h) {
-        const { tag, gap, wrapChildren, vertical, align, justify } = this.$props
-        const children = this.$scopedSlots.default
-            ? this.$scopedSlots.default()
-            : []
+        wrap: Boolean,
 
-        return h(
-            tag,
-            {
-                staticClass: 'aw-flow',
-                style: {
-                    '--flow-gap-scale': gap
-                }
-            },
-            [
-                h(
-                    tag,
-                    {
-                        staticClass: 'aw-flow__wrap',
-                        class: {
-                            'aw-flow__wrap--children': !wrapChildren,
-                            'aw-flow__wrap--vertical': vertical,
-                            'justify-center': justify === 'center',
-                            'justify-end': justify === 'end',
-                            'items-start': align === 'start',
-                            'items-center': align === 'center',
-                            'items-end': align === 'end'
-                        }
-                    },
-                    children.reduce((acc, vNode) => {
-                        const notEmpty = notEmptyNode(vNode)
-                        const child = wrapChildren
-                            ? h(tag, { staticClass: 'aw-flow__child' }, [vNode])
-                            : vNode
+        inline: Boolean
+    },
 
-                        return notEmpty ? acc.concat(child) : acc
-                    }, [])
-                )
-            ]
-        )
+    computed: {
+        _align() {
+            return this.align || (!this.vertical && 'center')
+        }
     }
 }
 </script>

package/components/1_atoms/AwGrid.vue

@@ -1,5 +1,5 @@
 <script>
-import { path } from 'rambdax'
+import { path, isNil } from 'rambdax'
 
 const isEmptyNode = ({ tag, text = '' }) => {
     return !tag && !text.trim()
@@ -15,7 +15,7 @@ const makeClass = (base, option, defaultValue) => {
         }
 
         return classes
-    } else if (option) {
+    } else if (!isNil(option)) {
         return base + '-' + option
     } else {
         return base + '-' + defaultValue
@@ -41,6 +41,11 @@ export default {
         align: {
             type: String,
             default: 'start'
+        },
+
+        span: {
+            type: [Number, Object],
+            default: null
         }
     },
 
@@ -54,12 +59,15 @@ export default {
                     'grid',
                     makeClass('grid-cols', props.col, 1),
                     makeClass('gap', props.gap, 4),
+                    isNil(props.span)
+                        ? null
+                        : makeClass('col-span', props.span, 1),
                     {
                         'items-start': props.align === 'start',
                         'items-center': props.align === 'center',
                         'items-end': props.align === 'end'
                     }
-                ]
+                ].filter(Boolean)
             },
             children.reduce((acc, child) => {
                 const isEmpty = isEmptyNode(child)

package/components/1_atoms/AwIcon/AwIcon.vue

@@ -54,9 +54,11 @@ export default {
                             'aw-icon--animated': !!aniamtedIconContent
                         }
                     ],
-                    style: [data.style, data.staticStyle].concat(
-                        color ? { fill: toColor(color) } : []
-                    ),
+                    staticStyle: data.staticStyle,
+                    style: {
+                        ...data.style,
+                        ...(color ? { fill: toColor(color) } : {})
+                    },
                     attrs: {
                         'aria-hidden': true,
                         width: size || null,

package/components/1_atoms/AwIcon/AwIconSystemMono.vue

@@ -63,8 +63,9 @@ export default {
                                   isNil(attrs.width) &&
                                   isNil(attrs.height)
                           }
-                      ],
-                      style: [data.staticStyle, data.style]
+                      ].filter(Boolean),
+                      staticStyle: data.staticStyle,
+                      style: data.style
                   },
                   transform ? [h('g', { attrs: { transform } }, paths)] : paths
               )

package/components/1_atoms/AwInput.vue

@@ -80,8 +80,8 @@ const INVALID_TYPES = [
         type: ',date,datetime,time,month,week,',
         replacer: '<AwDate />'
     },
-    { type: ',tel,', replacer: '<AwTel />' },
-    { type: ',color,', replacer: '<AwColor />' }
+    { type: ',tel,', replacer: '<AwTel />' }
+    // { type: ',color,', replacer: '<AwColor />' }
 ]
 
 const getInvalidConfig = (type) => {

package/components/1_atoms/AwLabel.vue

@@ -53,7 +53,7 @@ export default {
                 case 'string':
                     return this.icon
                 case 'boolean':
-                    return this.icon ? 'awesiocolor/circle' : ''
+                    return this.icon ? 'awesio/circle' : ''
                 default:
                     return ''
             }

package/components/1_atoms/AwList.vue

@@ -2,7 +2,9 @@
     <ol class="aw-list">
         <slot>
             <li v-for="(item, i) in items" :key="i" :class="itemClass">
-                <slot name="item" :item="item" :index="i" />
+                <slot name="item" :item="item" :index="i">
+                    {{ item }}
+                </slot>
             </li>
         </slot>
     </ol>

package/components/1_atoms/AwRadio.vue

@@ -9,7 +9,7 @@
             v-tooltip:top-start.show.prepend="errorTooltip"
             v-on="mergedListeners"
         /><label
-            v-if="!!label"
+            v-if="!!label || $scopedSlots.label"
             class="aw-switch-field__label"
             :for="id || defaultId"
         >

package/components/1_atoms/AwSlider.vue

@@ -8,7 +8,16 @@
         <span
             ref="scroller"
             class="aw-slider__scroller"
-            :class="{ 'aw-slider__scroller--mouse-move': movedByMouse }"
+            :class="{
+                'aw-slider__scroller--mouse-move': movedByMouse,
+                'gap-1': gap === 1,
+                'gap-2': gap === 2,
+                'gap-3': gap === 3,
+                'gap-4': gap === 4,
+                'gap-5': gap === 5,
+                'gap-6': gap === 6,
+                'gap-8': gap === 8
+            }"
             @scroll="_setScroll"
         >
             <slot />
@@ -39,6 +48,11 @@ export default {
         tag: {
             type: String,
             default: 'div'
+        },
+
+        gap: {
+            type: Number,
+            default: 0
         }
     },
 

package/components/1_atoms/AwTag.vue

@@ -1,6 +1,6 @@
 <template>
     <Component :is="tag" :style="tagStyle" class="aw-tag">
-        <AwIcon v-if="icon" :name="icon" size="16" />
+        <AwIcon v-if="icon" :name="icon" size="16" :class="iconClass" />
         {{ text }}
     </Component>
 </template>
@@ -35,6 +35,11 @@ export default {
         icon: {
             type: String,
             default: null
+        },
+
+        iconClass: {
+            type: [String, Array, Object],
+            default: null
         }
     },
 

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

@@ -76,7 +76,7 @@
             v-tooltip="lockedTooltip"
         >
             <span>
-                <AwIconSystemMono name="lock" class="fill-current" />
+                <AwIconSystemMono name="lock-fill" class="fill-current" />
             </span>
         </span>
     </component>

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>