@awes-io/ui 2.64.0 → 2.66.0

package/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.66.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.65.1...@awes-io/ui@2.66.0) (2023-08-22)
+
+
+### Features
+
+* add group and disable for select object ([756348a](https://github.com/awes-io/client/commit/756348a0a3f49e4a60cec7e112046ebccea29682))
+* add group and disable for select object ([e252ddb](https://github.com/awes-io/client/commit/e252ddb6b29f366eec82ffd0631e2ebd69453bee))
+* add refresh wrapper in table builder ([2727c01](https://github.com/awes-io/client/commit/2727c017b6d3ce0d05bd469181fa6bbc256f44d6))
+* add refresh wrapper in table builder ([5e2d058](https://github.com/awes-io/client/commit/5e2d058e6f1adb80c469bb75be70e1bf1ce1d49f))
+* change din on template for select object items ([bb7ba13](https://github.com/awes-io/client/commit/bb7ba130aebc2c27d0aa9f61de3b9f9c9db16266))
+* change logic for clear events in refresh wrapper ([67f6c4c](https://github.com/awes-io/client/commit/67f6c4c1f4f552e25a21d717ff3fb4b2e8ebb64d))
+* change styles and add arrow for tooltip ([6e4f495](https://github.com/awes-io/client/commit/6e4f495ecf6331e894bb600182487daf64a71e7a))
+* remove all place with postcss-color-function ([a53bd65](https://github.com/awes-io/client/commit/a53bd6572d6ac4f2fc8ebfb55522e642a78bf494))
+* remove plugins for update nuxt ([b230f4b](https://github.com/awes-io/client/commit/b230f4becab4af6befbb9a92a7dd8dcdf5872961))
+* replace method for remove refresh wrapper events ([e63d9df](https://github.com/awes-io/client/commit/e63d9dfd58108668ac324dce32cfb52e37fbdfbe))
+* replace style for fake input disable in text field css ([29f3d5f](https://github.com/awes-io/client/commit/29f3d5f8c4cf66e56beee686dd6d94b332cfffdd))
+* unused modules removed ([09334f1](https://github.com/awes-io/client/commit/09334f1677a837df5eac8c4063e4a55941fde40e))
+
+
+
+
+
+## [2.65.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.65.0...@awes-io/ui@2.65.1) (2023-07-06)
+
+
+### Bug Fixes
+
+* **aw-tab-nav:** else key fixed ([fac9f72](https://github.com/awes-io/client/commit/fac9f7214606540f95fa8aa5e57782b7ad837a10))
+
+
+
+
+
+# [2.65.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.64.0...@awes-io/ui@2.65.0) (2023-07-06)
+
+
+### Bug Fixes
+
+* tooltip shown on pointer events ([a1827a1](https://github.com/awes-io/client/commit/a1827a142e5b823ba526bce0e90ccf7a5a36dc20))
+
+
+### Features
+
+* **aw-tab-nav:** icons added ([eb1c876](https://github.com/awes-io/client/commit/eb1c87634e47f7ca15593fd82fb5d685ffa4e9b6))
+
+
+
+
+
 # [2.64.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.63.6...@awes-io/ui@2.64.0) (2023-06-27)
 
 

package/assets/css/components/_index.css

@@ -74,6 +74,8 @@
 @import './dashboard.css';
 @import './dashboard-card.css';
 
+@import './refresh-wrapper.css';
+
 @import './select.css';
 
 @import './userpic.css';

package/assets/css/components/refresh-wrapper.css

@@ -0,0 +1,9 @@
+.aw-refresh-wrapper {
+    &__loader {
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         width: 100%;
+         z-index: 9999;
+     }
+}

package/assets/css/components/text-field.css

@@ -207,6 +207,8 @@
     }
 }
 
+.is-disabled .aw-text-field__fake-input { opacity: 0.5 }
+
 @keyframes autoFillStart {
     from {
         opacity: 1

package/assets/css/components/tooltip.css

@@ -1,12 +1,12 @@
 .aw-tooltip {
-    padding: theme('spacing.1') theme('spacing.3');
+    padding: 1rem;
     font-size: theme('fontSize.xs', 0.75rem);
     line-height: theme('leading.5', 1.25rem);
-    border-radius: theme('borderRadius.default');
-    background-color: rgba(var(--c-on-surface-rgb), 0.8);
+    border-radius: 0.625rem;
+    background-color: var(--c-mono-200);
     color: var(--c-surface);
     display: none;
-    max-width: 235px;
+    max-width: min(14.625rem, calc(100vw - 2rem));
 
     &[data-visible] {
         display: block;
@@ -18,7 +18,7 @@
         pointer-events: none;
     }
 
-    /* & > [data-popper-arrow] {
+    & > [data-popper-arrow] {
         background-clip: content-box;
         padding: 4px;
 
@@ -51,5 +51,5 @@
 
     &[data-popper-placement^='right'] > [data-popper-arrow] {
         left: -4px;
-    } */
+    }
 }

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

@@ -12,6 +12,11 @@ export default {
             required: true
         },
 
+        color: {
+            type: String,
+            default: ''
+        },
+
         viewBox: {
             type: String,
             default: null
@@ -23,7 +28,7 @@ export default {
         }
     },
 
-    render(h, { props: { name, size, viewBox }, data }) {
+    render(h, { props: { name, color, size, viewBox }, data }) {
         const attrs = data.attrs || {}
 
         return name
@@ -38,7 +43,9 @@ export default {
                               !size && isNil(attrs.width) && isNil(attrs.height)
                       }
                   ],
-                  style: [data.style, data.staticStyle],
+                  style: [data.style, data.staticStyle].concat(
+                      color ? { fill: `var(--c-${color})` } : []
+                  ),
                   attrs: {
                       'aria-hidden': true,
                       width: size || null,

package/components/1_atoms/AwRefreshWrapper.vue

@@ -0,0 +1,151 @@
+<template>
+    <div ref="refreshLoader" class="aw-refresh-wrapper">
+        <slot name="before" />
+
+        <div
+            v-if="distance"
+            class="aw-refresh-wrapper__loader"
+            :style="{
+                height: `${distance}px`
+            }"
+        >
+            <svg
+                :style="touchRotateIconStyle"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 512 512"
+            >
+                <path
+                    d="M484 28l-53 53A247 247 0 008 256a248 248 0 00414 184c5-5 6-12 1-17l-20-20c-5-5-12-5-17-1a196 196 0 118-285l-54 55c-7 7-2 20 9 20h143c7 0 12-5 12-12V37c0-11-13-16-20-9z"
+                />
+            </svg>
+        </div>
+
+        <slot />
+    </div>
+</template>
+
+<script>
+const MAX_DISTANCE = Math.max(200, window.innerHeight / 1.75)
+const MIN_DISTANCE = 75
+
+export default {
+    name: 'AwRefreshWrapper',
+
+    props: {
+        loading: Boolean
+    },
+
+    data: () => ({
+        startY: 0,
+        distance: 0
+    }),
+
+    computed: {
+        touchRotateIconStyle() {
+            return !this.loading && this.distance > 0
+                ? `transform: rotate(${this.distance}deg)`
+                : ''
+        }
+    },
+
+    mounted() {
+        this.$refs.refreshLoader.addEventListener(
+            'touchmove',
+            this.onTouchStartMove,
+            { passive: false }
+        )
+    },
+
+    beforeDestroy() {
+        this.removeListeners()
+
+        this.$refs.refreshLoader.removeEventListener(
+            'touchmove',
+            this.onTouchStartMove,
+            { passive: false }
+        )
+    },
+
+    methods: {
+        removeListeners() {
+            this.$refs.refreshLoader.removeEventListener(
+                'touchmove',
+                this.onTouchMove,
+                { capture: true, passive: false }
+            )
+
+            this.$refs.refreshLoader.removeEventListener(
+                'touchend',
+                this.onTouchEnd,
+                { capture: true, passive: false }
+            )
+        },
+
+        onTouchStartMove(e) {
+            if (
+                !this.loading &&
+                e.touches.length === 1 &&
+                document.scrollingElement.scrollTop === 0
+            ) {
+                this.startY = e.touches[0].pageY
+
+                this.$refs.refreshLoader.addEventListener(
+                    'touchmove',
+                    this.onTouchMove,
+                    { capture: true, passive: false }
+                )
+                this.$refs.refreshLoader.addEventListener(
+                    'touchend',
+                    this.onTouchEnd,
+                    { capture: true, passive: false }
+                )
+            }
+        },
+
+        onTouchMove(e) {
+            if (document.scrollingElement.scrollTop !== 0) {
+                this.distance = 0
+
+                this.removeListeners()
+
+                return
+            }
+
+            const diff = e.touches[0].pageY - this.startY
+
+            if (diff < 0) {
+                this.onTouchEnd()
+                return
+            }
+
+            try {
+                if (e.cancelable) {
+                    e.preventDefault()
+                }
+
+                e.stopPropagation()
+            } catch (e) {
+                console.log(e)
+            }
+
+            this.distance = Math.max(0, Math.min(MAX_DISTANCE, diff))
+        },
+
+        onTouchEnd() {
+            this.removeListeners()
+
+            if (this.distance && this.distance >= MIN_DISTANCE) {
+                if (typeof window.navigator.vibrate === 'function') {
+                    window.navigator.vibrate(200)
+                }
+
+                this.$emit('refresh')
+            }
+
+            this.distance = 0
+        }
+    }
+}
+</script>

package/components/2_molecules/AwSelectObject.vue

@@ -34,6 +34,7 @@
                     :clearable="clearable && !_isEmpty"
                     :is-opened="isOpened"
                     :caret="isCaretVisible"
+                    :disabled="disabled"
                     :class="{
                         'is-filled': searchable && isOpened,
                         'not-searchable': !searchable
@@ -76,6 +77,7 @@
                     :clearable="clearable && !_isEmpty"
                     :is-opened="isOpened"
                     :caret="isCaretVisible"
+                    :disabled="disabled"
                     :class="{
                         'is-filled': searchable && isOpened,
                         'not-searchable': !searchable
@@ -179,35 +181,52 @@
 
                 <!-- options list -->
                 <template v-if="optionsList.length">
-                    <AwDropdownButton
+                    <template
                         v-for="({
                             optionLabel,
                             optionValue,
+                            optionGroup,
                             index,
                             active,
                             disabled
                         },
                         i) in optionsList"
-                        :key="`${optionLabel}-${index}`"
-                        :active="active"
-                        :data-select-index="index"
-                        :data-selected="active ? '' : null"
-                        :data-value="optionValue"
-                        :disabled="disabled"
-                        tabindex="-1"
-                        data-arrow-focus
                     >
-                        <slot
-                            name="option-label"
-                            v-bind="{
-                                ...optionsList[i],
-                                searchPhrase,
-                                highlightSearch
-                            }"
+                        <div
+                            v-if="
+                                groupBy &&
+                                    (index === 0 ||
+                                        optionGroup !==
+                                            optionsList[index - 1].optionGroup)
+                            "
+                            class="font-bold p-4"
+                            :key="`group-${optionGroup}-${index}`"
+                        >
+                            {{ optionGroup }}
+                        </div>
+
+                        <AwDropdownButton
+                            :active="active"
+                            :data-select-index="index"
+                            :data-selected="active ? '' : null"
+                            :data-value="optionValue"
+                            :disabled="disabled"
+                            tabindex="-1"
+                            data-arrow-focus
+                            :key="`btn-${optionLabel}-${index}`"
                         >
-                            <span v-html="highlightSearch(optionLabel)" />
-                        </slot>
-                    </AwDropdownButton>
+                            <slot
+                                name="option-label"
+                                v-bind="{
+                                    ...optionsList[i],
+                                    searchPhrase,
+                                    highlightSearch
+                                }"
+                            >
+                                <span v-html="highlightSearch(optionLabel)" />
+                            </slot>
+                        </AwDropdownButton>
+                    </template>
                 </template>
 
                 <!-- not found -->
@@ -298,6 +317,11 @@ export default {
             default: ''
         },
 
+        groupBy: {
+            type: String,
+            default: ''
+        },
+
         searchable: {
             type: Boolean,
             default: true
@@ -421,6 +445,10 @@ export default {
             return this.trackBy ? path(this.trackBy) : returnSelf
         },
 
+        _getGroup() {
+            return this.groupBy ? path(this.groupBy) : returnSelf
+        },
+
         _valueKey() {
             return this._getValue(this.value)
         },
@@ -435,6 +463,7 @@ export default {
                 if (inRange && matchSearch) {
                     const optionLabel = this._getLabel(option)
                     const optionValue = this._getValue(option)
+                    const optionGroup = this._getGroup(option)
                     const active = this._isActive(optionValue)
                     const disabled = this.optionDisabled(option)
 
@@ -442,6 +471,7 @@ export default {
                         option,
                         optionLabel,
                         optionValue,
+                        optionGroup,
                         index,
                         active,
                         disabled

package/components/2_molecules/AwTabNav.vue

@@ -15,31 +15,59 @@
                     :href="isDisabled ? null : route.fullPath"
                     :class="[
                         _cssClasses.toggler,
-                        { [_cssClasses.togglerActive]: isActive },
-                        { [_cssClasses.togglerDisabled]: isDisabled }
+                        {
+                            [_cssClasses.togglerActive]: isActive,
+                            [_cssClasses.togglerDisabled]: isDisabled,
+                            [_cssClasses.togglerNoText]: item.hideText
+                        }
                     ]"
                     @click.prevent="navigate(route)"
                 >
                     <span tabindex="-1">
-                        {{ text }}
-                        <AwBadge v-if="item.badge" v-bind="item.badge" />
+                        <AwIcon
+                            v-if="item.icon"
+                            v-bind="_toIconProps(item.icon)"
+                            :class="{ 'mr-1': !item.hideText }"
+                        />
+                        <span v-if="item.hideText" class="sr-only">
+                            {{ text }}
+                        </span>
+                        <template v-else>{{ text }}</template>
+                        <AwBadge
+                            v-if="item.badge"
+                            v-bind="_toBadgeProps(item.badge)"
+                        />
                     </span>
                 </a>
                 <button
                     v-else
-                    :key="key"
+                    :key="'btn-' + key"
                     :class="[
                         _cssClasses.toggler,
-                        { [_cssClasses.togglerActive]: isActive },
-                        { [_cssClasses.togglerDisabled]: isDisabled }
+                        {
+                            [_cssClasses.togglerActive]: isActive,
+                            [_cssClasses.togglerDisabled]: isDisabled,
+                            [_cssClasses.togglerNoText]: item.hideText
+                        }
                     ]"
                     :disabled="isDisabled ? '' : null"
                     type="button"
                     @click.prevent="update(i)"
                 >
                     <span tabindex="-1">
-                        {{ text }}
-                        <AwBadge v-if="item.badge" v-bind="item.badge" />
+                        <AwIcon
+                            v-if="item.icon"
+                            v-bind="_toIconProps(item.icon)"
+                            :class="{ 'mr-1': !item.hideText }"
+                        />
+                        <span v-if="item.hideText" class="sr-only">
+                            {{ text }}
+                        </span>
+                        <template v-else>{{ text }}</template>
+                        <AwBadge
+                            v-if="item.badge"
+                            v-bind="_toBadgeProps(item.badge)"
+                        />
                     </span>
                 </button>
             </slot>
@@ -115,7 +143,8 @@ export default {
                     'wrapper',
                     'toggler',
                     'toggler_active',
-                    'toggler_disabled'
+                    'toggler_disabled',
+                    'toggler_no_text'
                 ])
             }
         },
@@ -233,6 +262,14 @@ export default {
             }
 
             return equals(currentParams, route.query)
+        },
+
+        _toBadgeProps(props) {
+            return isType('Object', props) ? props : { text: props }
+        },
+
+        _toIconProps(props) {
+            return isType('Object', props) ? props : { name: props }
         }
     }
 }

package/components/2_molecules/_AwSelectFakeInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         ref="element"
-        class="flex max-w-full aw-text-field is-text"
+        class="aw-select-fake-input flex max-w-full aw-text-field is-text"
         :class="{
             'is-filled': value === 0 || !!value,
             'has-label': !!label,

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

@@ -1,5 +1,13 @@
 <template>
-    <div class="aw-table-builder relative">
+    <AwRefreshWrapper
+        class="aw-table-builder relative"
+        :loading="collection.loading"
+        @refresh="fetch"
+    >
+        <template #before>
+            <slot name="before-refresh" />
+        </template>
+
         <div v-if="isEmpty && !collection.loading">
             <!-- The empty container. Will be shown if the data (without filters) is empty. Your can compleatly overwrite the block. -->
             <slot v-if="!isWatchParamsPresent" name="empty-container">
@@ -55,7 +63,9 @@
                         <slot name="empty-filter-title">
                             <!-- Text: "There are no data to show" -->
                             <div class="text-mono-400 mb-4">
-                                {{ $t('No results were found for your request') }}
+                                {{
+                                    $t('No results were found for your request')
+                                }}
                             </div>
                         </slot>
 
@@ -175,7 +185,7 @@
                 </AwChip>
             </slot>
         </div>
-    </div>
+    </AwRefreshWrapper>
 </template>
 
 <script>

package/directives/tooltip.js

@@ -12,10 +12,16 @@ function showTooltip() {
     tooltip.setAttribute('data-visible', '')
 
     const modifiers = [
-        // {
-        //     name: 'arrow',
-        //     options: { padding: 6 }
-        // },
+        {
+            name: 'arrow',
+            options: { padding: 6 }
+        },
+        {
+            name: 'flip',
+            options: {
+                fallbackPlacements: ['top', 'right', 'bottom', 'left']
+            }
+        },
         {
             name: 'preventOverflow',
             options: {
@@ -52,11 +58,11 @@ function hideTooltip() {
 
 const EVENTS = [
     {
-        names: ['mouseenter', 'focus'],
+        names: ['pointerenter', 'focus'],
         handler: showTooltip
     },
     {
-        names: ['mouseleave', 'blur'],
+        names: ['pointerleave', 'blur'],
         handler: hideTooltip
     }
 ]
@@ -74,7 +80,7 @@ function toggleEvents(el, on = false, $events = EVENTS) {
 function _updateTooltipContent(tooltip, content) {
     tooltip.__content__ = content
 
-    tooltip.innerHTML = content // + '</span><span data-popper-arrow></span>'
+    tooltip.innerHTML = content + '<span data-popper-arrow></span>'
 
     return tooltip
 }

package/nuxt/index.js

@@ -131,7 +131,8 @@ async function AwesIoUi() {
             const _locale = locale.code || locale
             const file = getDayjsLang(_locale)
 
-            localesMap[_locale] = getDayjsLocaleNameFromFile(file) || DEFAULT_DAYJS_LOCALE
+            localesMap[_locale] =
+                getDayjsLocaleNameFromFile(file) || DEFAULT_DAYJS_LOCALE
 
             return file ? acc.concat(file) : acc
         },
@@ -229,7 +230,6 @@ async function AwesIoUi() {
             resolve(__dirname, '..', 'assets', 'css', 'main.css')
         )
 
-        postcss.preset.stage = 1
         postcss.plugins = postcss.plugins || {}
 
         postcss.plugins = mergeDeepRight(
@@ -245,9 +245,6 @@ async function AwesIoUi() {
         )
 
         postcss.plugins.tailwindcss = tailwindConfig
-
-        // include last
-        postcss['postcss-color-function'] = {}
     })
 
     /**