@awes-io/ui 2.87.0 → 2.89.0

package/components/3_organisms/AwImageUpload.vue

@@ -0,0 +1,267 @@
+<template>
+    <div class="aw-image-upload">
+        <AwFile
+            v-if="!hasValue"
+            :disabled="disabled"
+            :accept="accept"
+            class="aw-image-upload__file"
+            @input="handleImage($event)"
+        >
+            <AwActionIcon
+                icon="awesio/plus"
+                :text="$t('Photo')"
+                color="mono-900"
+                on-color="mono-600"
+                icon-color="mono-400"
+                size="lg"
+            />
+        </AwFile>
+        <AwActionIcon
+            v-else-if="fileIcon"
+            :icon="fileIcon"
+            color="mono-900"
+            icon-color="mono-400"
+            size="lg"
+            class="aw-image-upload__image"
+        />
+        <img
+            v-else
+            :src="value"
+            :alt="fileName"
+            width="80"
+            height="80"
+            class="aw-image-upload__image"
+        />
+
+        <div v-if="hasValue" class="aw-image-upload__title">
+            <strong class="truncate min-w-0">{{ fileName }}</strong>
+            <button
+                class="aw-image-upload__delete"
+                :disabled="disabled"
+                @click="clearImage"
+            >
+                <AwIcon name="awesio/delete" />
+            </button>
+        </div>
+
+        <span class="aw-image-upload__description">
+            {{ label || $t('Upload your photo (optional).') }}<br />
+            <template v-if="formats">{{
+                $t('Supports only {formatString} file formats', {
+                    formatString: formats
+                })
+            }}</template
+            ><template v-if="maxSize"
+                >.{{
+                    $t('The maximum file size is {maxSize}', {
+                        maxSize
+                    })
+                }}</template
+            >
+        </span>
+
+        <Teleport v-if="crop" to="body">
+            <AwModal
+                ref="cropModal"
+                :param="null"
+                :title="$t('Edit photo')"
+                @before-close="clearUploadedFileOrBlock"
+            >
+                <AwCropper
+                    :src="file"
+                    :save-width="600"
+                    :save-height="600"
+                    class="aw-image-upload__aw-cropper"
+                    @save="onCropSave"
+                >
+                    <template #buttons="slotAttrs">
+                        <AwButton
+                            :text="$t('Save Image')"
+                            :loading="loading"
+                            @click="slotAttrs.save"
+                        />
+                    </template>
+                </AwCropper>
+            </AwModal>
+        </Teleport>
+    </div>
+</template>
+
+<script>
+import { path, isType } from 'rambdax'
+import { getFileName } from '@AwUtils/url'
+import { conf } from '@AwUtils/component'
+import { AwImageUpload as _config } from '@AwConfig'
+
+const NAME_PROP = 'name'
+
+const ICON_PROP = 'icon'
+
+export default {
+    name: 'AwImageUpload',
+
+    components: {
+        Teleport: () => import('vue2-teleport')
+    },
+
+    _config,
+
+    props: {
+        disabled: Boolean,
+
+        accept: {
+            type: String,
+            default: 'image/*'
+        },
+
+        label: {
+            type: String,
+            default: ''
+        },
+
+        formats: {
+            type: String,
+            default: 'JPG/JPEG/PNG'
+        },
+
+        maxSize: {
+            type: String,
+            default: '1Mb'
+        },
+
+        crop: {
+            type: Boolean,
+            default: true
+        },
+
+        value: {
+            type: [String, Object],
+            default: null
+        },
+
+        uploadConfig: {
+            type: Object,
+            default() {
+                return conf(this, 'uploadConfig')
+            }
+        },
+
+        resultPath: {
+            type: [String, Array],
+            default() {
+                return conf(this, 'resultPath')
+            }
+        }
+    },
+
+    data() {
+        return {
+            file: '',
+            loading: false
+        }
+    },
+
+    computed: {
+        isObjectValue() {
+            return isType('Object', this.value)
+        },
+
+        hasValue() {
+            return !!(this.isObjectValue ? this.value[NAME_PROP] : this.value)
+        },
+
+        fileName() {
+            return this.isObjectValue
+                ? this.value[NAME_PROP]
+                : this.value
+                ? getFileName(this.value)
+                : ''
+        },
+
+        fileIcon() {
+            return this.isObjectValue ? this.value[ICON_PROP] : null
+        },
+
+        getValueFromResult() {
+            return this.resultPath ? path(this.resultPath) : (val) => val
+        }
+    },
+
+    watch: {
+        loading(value) {
+            this.$emit('loading', value)
+        }
+    },
+
+    methods: {
+        handleImage(files) {
+            if (!files[0] || !(files[0] instanceof File)) return
+
+            this.file = URL.createObjectURL(files[0])
+
+            if (this.crop) {
+                this.$refs.cropModal.open()
+            } else {
+                return this.saveImage()
+            }
+        },
+
+        async saveImage() {
+            try {
+                this.loading = true
+
+                const result = await this._uploadImage()
+
+                this.$emit('input', result)
+            } catch (error) {
+                // eslint-disable-next-line no-console
+                console.log('File upload error', error)
+
+                this.file = ''
+            } finally {
+                this.loading = false
+            }
+        },
+
+        async onCropSave(file) {
+            if (file instanceof Blob) {
+                this.file = URL.createObjectURL(file)
+            }
+
+            await this.saveImage()
+
+            this.$refs.cropModal?.close()
+        },
+
+        clearUploadedFileOrBlock(stopper) {
+            if (this.loading) {
+                stopper.preventClose()
+            } else {
+                this.file = ''
+            }
+        },
+
+        clearImage() {
+            this.$emit('input', null)
+        },
+
+        async _uploadImage() {
+            const file = await fetch(this.file).then((res) => res.blob())
+            const data = new FormData()
+
+            data.append('image', file)
+
+            if (isType('Function', this.$listeners.upload)) {
+                return this.$listeners.upload(data)
+            } else {
+                const { data: result } = await this.$axios.request({
+                    ...this.uploadConfig,
+                    data
+                })
+
+                return getValueFromResult(result)
+            }
+        }
+    }
+}
+</script>

package/components/3_organisms/AwModal.vue

@@ -27,15 +27,18 @@
                             {{ title }}
                         </div>
 
-                        <AwSquareIconButton
+                        <AwButton
                             :class="elClasses.close"
                             :title="$t('Close')"
                             :aria-label="$t('Close')"
-                            @click.prevent="close()"
+                            color="mono-light"
                             tabindex="0"
+                            @click.prevent="close()"
                         >
-                            <AwIconSystemMono name="close" size="16" />
-                        </AwSquareIconButton>
+                            <template #icon>
+                                <AwIconSystemMono name="close" size="16" />
+                            </template>
+                        </AwButton>
                     </div>
                     <!-- / header -->
 
@@ -85,7 +88,6 @@ import { mergeRouteQuery } from '@AwUtils/router'
 import { conf } from '@AwUtils/component'
 import { getBemClasses } from '@AwUtils/css'
 import { AwModal as _config } from '@AwConfig'
-import AwSquareIconButton from '../2_molecules/AwSquareIconButton.vue'
 
 const DEFAULT_GET_PARAM = 'modal'
 
@@ -111,7 +113,6 @@ function getStopper() {
 
 export default {
     name: 'AwModal',
-    components: { AwSquareIconButton },
 
     _config,
 

package/components/3_organisms/AwModalButtons.vue

@@ -0,0 +1,129 @@
+<template>
+    <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"
+                :key="i"
+                v-tooltip.prepend="tooltip"
+                v-bind="attrs"
+                :size="size ? size : 'lg'"
+                class="aw-modal-buttons__button"
+                :class="[
+                    cssClass,
+                    {
+                        'aw-modal-buttons__button--equal': !isDesktop && !autoWidth
+                    }
+                ]"
+                v-on="listeners"
+            />
+        </slot>
+
+        <!-- dropdown buttons -->
+        <template v-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">
+                <slot name="dropdown" :buttons="groupedButtons.dropdown">
+                    <AwDropdownButton
+                        v-for="({ listeners, tooltip, ...attrs }, i) in groupedButtons.dropdown"
+                        :key="i"
+                        v-tooltip.prepend="tooltip"
+                        v-bind="attrs"
+                        v-on="listeners"
+                    />
+                </slot>
+            </AwDropdown>
+        </template>
+    </div>
+</template>
+
+<script>
+import { omit } from 'rambdax'
+
+export default {
+    name: 'AwModalButtons',
+
+    props: {
+        items: {
+            type: Array,
+            default: () => []
+        },
+
+        options: {
+            type: Object,
+            default: () => ({})
+        },
+
+        togglerOptions: {
+            type: Object,
+            default: () => ({ color: 'mono', icon: 'more' })
+        },
+
+        desktopFrom: {
+            type: String,
+            default: 'md'
+        },
+
+        justify: {
+            type: String,
+            default: 'end'
+        }
+    },
+
+    data() {
+        return {
+            isOpened: false
+        }
+    },
+
+    computed: {
+        isDesktop() {
+            return this.$screen[this.desktopFrom] || false
+        },
+
+        groupedButtons() {
+            return this.items.reduce(
+                (acc, item) => {
+                    const { cta, dropdown, show = true, ...itemProps } = { ...this.options, ...item }
+
+                    // rename class prop
+                    if (itemProps.class) {
+                        itemProps.cssClass = itemProps.class
+                        delete itemProps.class
+                    }
+
+                    // add button if visible
+                    if (show !== false) {
+                        const group = this.isDesktop ? (dropdown ? 'dropdown' : 'buttons') : cta ? 'buttons' : 'dropdown'
+                        acc[group].push(itemProps)
+                    }
+
+                    return acc
+                },
+                { buttons: [], dropdown: [] }
+            )
+        },
+
+        togglerProps() {
+            return { ...omit(['cta'], this.options || {}), ...this.togglerOptions }
+        }
+    },
+
+    methods: {
+        open() {
+            this.isOpened = true
+        },
+
+        close() {
+            this.isOpened = false
+        }
+    },
+
+    dropdownOptions: {
+        placement: 'top-start',
+        modifiers: [{ name: 'offset', options: { offset: [0, 5] } }]
+    }
+}
+</script>

package/components/3_organisms/AwPagination.vue

@@ -13,23 +13,27 @@
             class="flex-grow flex justify-between lg:justify-center items-center"
             @click="_onPageClick"
         >
-            <AwSquareIconButton
+            <AwButton
                 :data-page="prevPage"
                 :disabled="prevPage === null"
                 class="mr-1 lg:hidden"
-                color="mono-800"
+                color="mono"
             >
-                <AwIconSystemMono name="arrow" size="16" />
-            </AwSquareIconButton>
+                <template #icon>
+                    <AwIconSystemMono name="arrow" size="16" />
+                </template>
+            </AwButton>
 
-            <AwSquareIconButton
+            <AwButton
                 :data-page="prevPage"
                 :disabled="prevPage === null"
-                color="mono-800"
+                color="mono"
                 class="aw-button-nav__arrow-btn hidden lg:inline-flex mr-4"
             >
-                <AwIconSystemMono name="arrow" size="16" />
-            </AwSquareIconButton>
+                <template #icon>
+                    <AwIconSystemMono name="arrow" size="16" />
+                </template>
+            </AwButton>
 
             <span class="lg:hidden">
                 {{ $t('Page {page} of {pagesTotal}', { page, pagesTotal }) }}
@@ -55,23 +59,27 @@
                 </Component>
             </div>
 
-            <AwSquareIconButton
+            <AwButton
                 :data-page="nextPage"
                 :disabled="nextPage === null"
-                color="mono-800"
+                color="mono"
                 class="aw-button-nav__arrow-btn hidden lg:inline-flex ml-4"
             >
-                <AwIconSystemMono name="arrow" rotate="180" size="16" />
-            </AwSquareIconButton>
+                <template #icon>
+                    <AwIconSystemMono name="arrow" rotate="180" size="16" />
+                </template>
+            </AwButton>
 
-            <AwSquareIconButton
+            <AwButton
                 :data-page="nextPage"
                 :disabled="nextPage === null"
-                color="mono-800"
+                color="mono"
                 class="ml-1 lg:hidden"
             >
-                <AwIconSystemMono name="arrow" rotate="180" size="16" />
-            </AwSquareIconButton>
+                <template #icon>
+                    <AwIconSystemMono name="arrow" rotate="180" size="16" />
+                </template>
+            </AwButton>
         </div>
 
         <!-- limit -->
@@ -83,12 +91,14 @@
                         content-class="p-0"
                         @click="limitsOpened = !limitsOpened"
                     >
-                        {{ limit }}
-                        <AwIconSystemMono
-                            name="triangle"
-                            class="inline transition-200"
-                            :class="{ 'rotate-180': limitsOpened }"
-                        />
+                        <template #icon-right>
+                            {{ limit }}
+                            <AwIconSystemMono
+                                name="triangle"
+                                class="inline transition-200"
+                                :class="{ 'rotate-180': limitsOpened }"
+                            />
+                        </template>
                     </AwButton>
                     <AwDropdown
                         ref="limits"
@@ -116,11 +126,9 @@
 
 <script>
 import { isNil, range } from 'rambdax'
-import AwSquareIconButton from '../2_molecules/AwSquareIconButton.vue'
 
 export default {
     name: 'AwPagination',
-    components: { AwSquareIconButton },
 
     props: {
         /**

package/components/3_organisms/AwPassword.vue

@@ -7,10 +7,16 @@
                 type="button"
                 @click.stop="type = isShown ? 'password' : 'text'"
             >
-                <Transition name="fade-from-bottom" mode="out-in">
-                    <AwIconSystemMono v-if="isShown" key="hide" name="eye-no" />
-                    <AwIconSystemMono v-else key="show" name="eye" />
-                </Transition>
+                <template #icon>
+                    <Transition name="fade-from-bottom" mode="out-in">
+                        <AwIconSystemMono
+                            v-if="isShown"
+                            key="hide"
+                            name="eye-no"
+                        />
+                        <AwIconSystemMono v-else key="show" name="eye" />
+                    </Transition>
+                </template>
             </AwButton>
         </template>
     </AwInput>

package/components/3_organisms/AwPreviewCard.vue

@@ -0,0 +1,73 @@
+<template>
+    <AwCard class="grid place-items-center text-center gap-6 relative">
+        <AwTag
+            v-if="previewText !== false"
+            :text="
+                typeof previewText === 'string' && previewText ? previewText : $t('Preview')
+            "
+            color="mono-100"
+            class="absolute"
+            style="top: var(--card-padding-y); right: var(--card-padding-x)"
+        />
+
+        <slot name="icon" :image="image">
+            <AwActionIcon
+                :image="image ? { src: image, alt: $t('Preview image') } : null"
+                size="lg"
+                color="mono-800"
+                on-color="mono-500"
+            >
+                <AwIcon name="awesio/image" :size="48" />
+            </AwActionIcon>
+        </slot>
+
+        <slot name="title" :title="title || titlePlaceholder">
+            <AwSubHeadline
+                v-if="title || titlePlaceholder"
+                tag="div"
+                class="m-0 text-lg leading-none"
+            >
+                {{ title || titlePlaceholder }}
+            </AwSubHeadline>
+        </slot>
+
+        <slot name="after-title">
+            {{ description }}
+        </slot>
+    </AwCard>
+</template>
+
+<script>
+export default {
+    name: 'AwPreviewCard',
+
+    props: {
+        image: {
+            type: String,
+            default: ''
+        },
+
+        title: {
+            type: String,
+            default: ''
+        },
+
+        titlePlaceholder: {
+            type: String,
+            default: ''
+        },
+
+        previewText: {
+            type: [String, Boolean],
+            default: ''
+        },
+
+        description: {
+            type: String,
+            default: ''
+        },
+
+        loading: Boolean
+    }
+}
+</script>

package/components/3_organisms/AwSearch.vue

@@ -15,7 +15,6 @@
                 v-if="!$route.query[param]"
                 name="search"
                 class="aw-search__icon-default mr-4"
-                size="24"
             />
             <button
                 v-else

package/components/3_organisms/AwTags.vue

@@ -7,16 +7,14 @@
         <AwFlow :gap="2" class="aw-tags__wrap">
             <template v-for="(tag, i) in _tags">
                 <slot v-bind="tag" :index="i" :getColor="getColor">
-                    <Component
-                        :is="tag.tag"
+                    <AwTag
+                        :tag="tag.tag"
                         :key="tag.key"
-                        :style="{ backgroundColor: tag.color }"
+                        :color="tag.color"
+                        :text="tag.text"
                         :data-tag-index="i"
                         :class="{ 'aw-tag--clickable': _hasClickListener }"
-                        class="aw-tag"
-                    >
-                        {{ tag.text }}
-                    </Component>
+                    />
                 </slot>
             </template>
         </AwFlow>

package/components/3_organisms/AwTel.vue

@@ -42,7 +42,7 @@
                     "
                 >
                     <AwIconSystemMono
-                        :name="phoneNumber.valid ? 'check-light' : 'ban-light'"
+                        :name="phoneNumber.valid ? 'check' : 'ban'"
                     />
                 </span>
             </template>

package/components/3_organisms/AwUploaderFiles.vue

@@ -26,7 +26,7 @@
                 <AwButton
                     theme="icon"
                     icon="close"
-                    size="sm"
+                    size="xs"
                     :text="parent.$t('Remove file')"
                     @click="props.removeFile(file.id)"
                 />