@awes-io/ui 2.142.3 → 2.144.0

package/components/2_molecules/AwEmptyContainer.vue

@@ -1,104 +1,106 @@
 <template>
-    <AwCard>
-        <div
-            ref="container"
-            class="aw-empty-container"
-            :class="{ 'aw-empty-container--visible': isVisible }"
-        >
-            <slot name="icon">
-                <AwIcon
-                    v-if="icon"
-                    :name="icon"
-                    :size="iconSize"
-                    :style="{ fill: _iconColor }"
-                />
-            </slot>
-
-            <AwSubHeadline v-if="title" class="m-0">{{ title }}</AwSubHeadline>
-
-            <slot name="buttons"></slot>
-        </div>
-    </AwCard>
+    <Component
+        :is="theme === 'card' ? 'AwCard' : 'div'"
+        :class="{
+            'aw-empty-container--visible': isVisible,
+            'aw-empty-container--padding': theme !== 'card' && theme !== 'empty'
+        }"
+        class="aw-empty-container"
+        :style="{ '--card-padding-y': theme === 'card' ? '2.5rem' : '1.5rem' }"
+    >
+        <!-- image -->
+        <slot name="image">
+            <img
+                v-if="image"
+                :src="image"
+                :alt="title"
+                class="w-64 max-w-full"
+                aria-hidden="true"
+            />
+            <AwIcon
+                v-else-if="icon"
+                :name="icon"
+                size="80"
+                class="aw-empty-container__icon"
+            />
+        </slot>
+
+        <!-- title -->
+        <AwHeadline v-if="title" class="text-center my-0">{{
+            title
+        }}</AwHeadline>
+
+        <!-- description -->
+        <AwDescription
+            v-if="message || description"
+            class="text-center aw-empty-container__description"
+            v-html="$sanitize(message || description)"
+        />
+
+        <!-- content -->
+        <slot name="button">
+            <div
+                v-if="ctaButton"
+                class="flex flex-wrap justify-center gap-4 flex-col w-full md:flex-row"
+            >
+                <AwButton v-if="ctaButton" v-bind="ctaButton" />
+            </div>
+        </slot>
+    </Component>
 </template>
 
 <script>
-import anime from 'animejs'
-import { toColor } from '@AwUtils/styles'
-
 export default {
     name: 'AwEmptyContainer',
 
     props: {
+        image: {
+            type: String,
+            default: ''
+        },
+
         icon: {
             type: String,
             default: ''
         },
 
-        iconSize: {
-            type: Number,
-            default: 60
+        title: {
+            type: String,
+            default: ''
         },
 
-        iconColor: {
+        message: {
             type: String,
-            default: 'mono-100'
+            default: ''
         },
 
-        title: {
+        description: {
             type: String,
             default: ''
+        },
+
+        theme: {
+            type: String,
+            default: 'card' // card, empty, transparent
+        },
+
+        ctaButton: {
+            type: Object,
+            default: null
         }
     },
 
     data() {
         return {
-            isVisible: true
-        }
-    },
-
-    computed: {
-        _iconColor() {
-            return this.iconColor ? toColor(this.iconColor) : null
+            isVisible: false
         }
     },
 
-    beforeMount() {
-        this.isVisible = false
-    },
-
     mounted() {
-        this.prepare()
-
-        this.isVisible = true
-
-        setTimeout(this.animate, 200)
-    },
-
-    methods: {
-        prepare() {
-            anime.set(this._getElements(), {
-                opacity: 0,
-                translateY: '0.5rem',
-                transition: 'none'
-            })
-        },
-
-        animate() {
-            anime.set(this._getElements(), { transition: null })
-
-            anime({
-                targets: this._getElements(),
-                opacity: 1,
-                translateY: 0,
-                delay: anime.stagger(120),
-                easing: 'easeOutCirc',
-                duration: 240
-            })
-        },
-
-        _getElements() {
-            return this.$refs.container?.children || []
-        }
+        /* add class through timeout to force initial animation */
+        setTimeout(() => {
+            this.isVisible = true
+        }, 300)
     }
 }
 </script>

package/components/2_molecules/AwNumber.vue

@@ -0,0 +1,180 @@
+<template>
+    <AwInput
+        v-model="_value"
+        v-bind="$attrs"
+        inputmode="numeric"
+        :max="isFinite(_max) ? _max : null"
+        :min="isFinite(_min) ? _min : null"
+        theme="uncolor-postfix"
+        class="aw-number"
+        @paste="_onPaste"
+        @blur="_clamp"
+        @keypress="_onKeypress"
+        @input="_onInput"
+    >
+        <template
+            #element="{ cssClass, value, errorTooltip, mergedListeners, mergedAttributes, errorText, errorId }"
+        >
+            <input
+                v-tooltip.show.prepend="errorTooltip"
+                :class="cssClass"
+                v-bind="mergedAttributes"
+                type="tel"
+                :value="value"
+                :aria-describedby="errorText ? errorId : null"
+                :data-error="errorText || null"
+                v-on="mergedListeners"
+            />
+        </template>
+        <template #postfix>
+            <slot v-if="!hideButtons" name="postfix">
+                <AwButton
+                    type="button"
+                    tag="span"
+                    role="button"
+                    color="mono"
+                    size="md"
+                    class="aw-number__button"
+                    icon="awesio/minus"
+                    :disabled="_reachMin"
+                    @click="subtract"
+                />
+                <AwButton
+                    type="button"
+                    tag="span"
+                    role="button"
+                    color="mono"
+                    size="md"
+                    class="aw-number__button"
+                    icon="awesio/plus"
+                    :disabled="_reachMax"
+                    @click="add"
+                />
+            </slot>
+        </template>
+    </AwInput>
+</template>
+
+<script>
+import { clamp } from 'rambdax'
+
+const toNumber = (val) => Number(val) || 0
+
+const PREVENT_KEYS = ['-', '+', 'e']
+
+export default {
+    name: 'AwNumber',
+
+    inheritAttrs: false,
+
+    props: {
+        value: {
+            type: [Number, String],
+            default: 0
+        },
+
+        min: {
+            type: [Number, String],
+            default: -Infinity
+        },
+
+        max: {
+            type: [Number, String],
+            default: Infinity
+        },
+
+        step: {
+            type: [Number, String],
+            default: 1
+        },
+
+        integer: Boolean,
+
+        hideButtons: Boolean
+    },
+
+    computed: {
+        _value: {
+            get() {
+                return this.value ? toNumber(this.value) : null
+            },
+
+            set(val) {
+                this.$emit('input', val)
+            }
+        },
+
+        _min() {
+            return toNumber(this.min)
+        },
+
+        _max() {
+            return toNumber(this.max)
+        },
+
+        _step() {
+            return toNumber(this.step)
+        },
+
+        _reachMax() {
+            return this._value >= this._max
+        },
+
+        _reachMin() {
+            return this._value <= this._min
+        }
+    },
+
+    methods: {
+        /**
+         * @vuese
+         * Increment the value by step amount
+         */
+        add() {
+            const newValue = Math.min(this._max, this._value + this._step)
+
+            this._value = newValue
+        },
+
+        /**
+         * @vuese
+         * Decrement the value by step amount
+         */
+        subtract() {
+            const newValue = Math.max(this._min, this._value - this._step)
+
+            this._value = newValue
+        },
+
+        _clamp() {
+            this._value = clamp(this._min, this._max, this._value)
+        },
+
+        _onKeypress($event) {
+            if (
+                PREVENT_KEYS.includes($event.key) ||
+                (this.integer && isNaN($event.key))
+            ) {
+                $event.preventDefault()
+            }
+        },
+
+        _onPaste($event) {
+            const paseted = $event.clipboardData.getData('text')
+            const value = Number(paseted)
+
+            if (!value || value < this.min || value > this.max) {
+                $event.preventDefault()
+            }
+        },
+
+        _onInput(value) {
+            const number = Number(value)
+
+            if (this._max && number > this.max) {
+                this._value = this.max
+            }
+        }
+    }
+}
+</script>

package/components/2_molecules/AwSelect.vue

@@ -896,6 +896,7 @@ export default {
 
         // ajax
         _preloadOptions() {
+            console.log('preloadOptions', this.searchPreload, typeof this.searchPreload)
             switch (typeof this.searchPreload) {
                 case 'boolean':
                     this.searchPreload &&
@@ -930,14 +931,20 @@ export default {
             this.cancellation = CancelToken.source()
 
             try {
-                const fetchUrl = this.options(
+                let config = this.options(
                     encodeURIComponent(this.searchPhrase)
                 )
 
+                if (typeof config === 'string') {
+                    config = {
+                        method: 'get',
+                        url: config
+                    }
+                }
+
                 const { data } = await this.$axios.request({
-                    cancelToken: this.cancellation.token,
-                    method: 'get',
-                    url: fetchUrl
+                    ...config,
+                    cancelToken: this.cancellation.token
                 })
 
                 this.selectOptions = pathOr([], 'data', data)

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

@@ -0,0 +1,73 @@
+<template>
+    <div v-if="chips.length" class="aw-filter-chosen -mx-1">
+        <AwSlider>
+            <button v-for="{ prop, val } in chips" :key="`${prop}-${val}`" class="mx-1" @click="reset(prop, val)">
+                <AwChip class="bg-mono-800 hover:bg-error">
+                    <template #left><span class="-ml-1"></span></template>
+                    <slot :name="prop" :value="val" :pathOr="pathOr">
+                        <slot :value="val" :prop="prop">
+                            <span class="opacity-50 mr-1">{{ prop }}:</span> {{ val }}
+                        </slot>
+                    </slot>
+                    <template #right>
+                        <AwIcon name="awesio/close" size="16" class="mr-1 opacity-50" />
+                    </template>
+                </AwChip>
+            </button>
+            <AwLink class="text-sm text-mono-400 mx-1" @click="reset()">
+                {{ $t('Reset') }}
+            </AwLink>
+        </AwSlider>
+    </div>
+</template>
+
+<script>
+import { pick, omit, toPairs, isType, pathOr } from 'rambdax'
+
+export default {
+    name: 'AwFilterChosen',
+
+    props: {
+        watchParams: {
+            type: Array,
+            required: true
+        }
+    },
+
+    computed: {
+        chips() {
+            return toPairs(pick(this.watchParams, this.$route.query)).reduce((acc, [prop, val]) => {
+                if (isType('Array', val)) {
+                    return acc.concat(val.map((_val) => ({ prop, val: _val })))
+                } else {
+                    return acc.concat([{ prop, val }])
+                }
+            }, [])
+        }
+    },
+
+    methods: {
+        reset(prop, val) {
+            let query
+
+            if (!prop) {
+                query = omit([...this.watchParams, 'page', 'search'], this.$route.query)
+            } else if (Array.isArray(this.$route.query[prop])) {
+                query = {
+                    ...omit('page,search', this.$route.query),
+                    [prop]: this.$route.query[prop].filter((_val) => _val != val)
+                }
+            } else {
+                query = omit([prop, 'page', 'search'], this.$route.query)
+            }
+
+            this.$router.replace({ ...this.$route, query }).catch((e) => {
+                console.log(e)
+            })
+        },
+
+        pathOr
+    }
+}
+</script>
+

package/components/3_organisms/AwFilterDateRange.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="aw-filter-date-range">
+        <!-- toggler -->
+        <AwButton theme="outline" color="default" class="filter-button" @click.stop="isVisible = !isVisible">
+            <AwIcon v-if="icon" :name="icon" class="mr-1" />
+            <slot name="label">
+                <span class="normal-case font-normal">
+                    {{ formattedRange ? formattedRange : label }}
+                </span>
+            </slot>
+            <AwIcon name="awesio/triangle" size="16" class="caret" :class="{ 'rotate-180': isVisible }" />
+        </AwButton>
+
+        <!-- options -->
+        <slot name="dropdown" v-bind="{ isVisible, open, close, set }">
+            <AwDropdown class="aw-filter-date-range__dropdown" :close-on-action="false" :show="isVisible" @update:show="_onShowChange">
+                <slot name="calendar">
+                    <AwCalendar v-model="value" :output-format="dateFormat" range />
+                </slot>
+
+                <!-- reset button -->
+                <slot name="reset" :reset="reset">
+                    <template v-if="!noReset && !isDefaultDateRange">
+                        <hr style="margin: 0.25rem 0" />
+                        <AwDropdownButton @click="reset">
+                            {{ $t('Reset') }}
+                        </AwDropdownButton>
+                    </template>
+                </slot>
+            </AwDropdown>
+        </slot>
+    </div>
+</template>
+
+<script>
+import { omit, F } from 'rambdax'
+
+export default {
+    name: '',
+
+    props: {
+        startParam: {
+            type: String,
+            default: 'start_date'
+        },
+
+        endParam: {
+            type: String,
+            default: 'end_date'
+        },
+
+        icon: {
+            type: String,
+            default: ''
+        },
+
+        label: {
+            type: String,
+            default: 'Dates'
+        },
+
+        dateFormat: {
+            type: String,
+            default: 'YYYY-MM-DD'
+        },
+
+        defaultDateRange: {
+            type: Object,
+            default: null
+        },
+
+        /**
+         * If true, reset button is hidden
+         */
+        noReset: Boolean
+    },
+
+    data() {
+        return {
+            isVisible: false
+        }
+    },
+
+    computed: {
+        startValue() {
+            return this.$route.query[this.startParam] || null
+        },
+
+        endValue() {
+            return this.$route.query[this.endParam] || null
+        },
+
+        value: {
+            get() {
+                return {
+                    start: this.startValue,
+                    end: this.endValue
+                }
+            },
+
+            set(value) {
+                if (!value) return
+
+                if (!value.start && !value.end) {
+                    // remove param from query
+                    if (this.$route.query[this.startParam] && this.$route.query[this.endParam]) {
+                        this.$router
+                            .replace({
+                                ...this.$route,
+                                query: omit([this.startParam, this.endParam, 'page', 'search'], this.$route.query)
+                            })
+                            .catch(F)
+                    }
+                } else if (!(value.start === this.startValue && value.end === this.endValue)) {
+                    this.$router
+                        .replace({
+                            ...this.$route,
+                            query: {
+                                ...omit('page,search', this.$route.query),
+                                [this.startParam]: value.start,
+                                [this.endParam]: value.end
+                            }
+                        })
+                        .catch(F)
+                }
+
+                this.isVisible = false
+            }
+        },
+
+        isDefaultDateRange() {
+            return (
+                !!this.defaultDateRange &&
+                this.$route.query.start === this.defaultDateRange[this.startParam] &&
+                this.$route.query.end === this.defaultDateRange[this.endParam]
+            )
+        },
+
+        formattedRange() {
+            if (this.startValue && this.endValue) {
+                return [this.startValue, this.endValue].map((val) => this.$dayjs(val, this.dateFormat).format('ll')).join(' - ')
+            } else {
+                return ''
+            }
+        }
+    },
+
+    methods: {
+        open() {
+            this.isVisible = true
+        },
+
+        close() {
+            this.isVisible = false
+        },
+
+        set(val) {
+            this.value = val
+        },
+
+        reset() {
+            this.value = {
+                start: this.defaultDateRange?.[this.startParam] ?? null,
+                end: this.defaultDateRange?.[this.endParam] ?? null
+            }
+        },
+
+        _onShowChange(show) {
+            setTimeout(() => {
+                if (this.isVisible && !show) {
+                    this.close()
+                }
+            }, 60)
+        }
+    }
+}
+</script>