@awes-io/ui 2.65.1 → 2.67.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.67.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.66.0...@awes-io/ui@2.67.0) (2023-08-24)
+
+
+### Features
+
+* add new props and page for aw alert ([be268b2](https://github.com/awes-io/client/commit/be268b219ee68c726092cd63458048b1b958fa5e))
+* add partical for checkbox and new type for value ([77b77ef](https://github.com/awes-io/client/commit/77b77effc25faf8e3663df475fe1f08af932db3e))
+
+
+
+
+
+# [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)
 
 

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/alert.css

@@ -3,7 +3,8 @@
 
     padding: theme('spacing.4', 1rem);
     border-radius: theme('borderRadius.md', 0.25rem);
-    border: 1px solid var(--c-mono-800);
+    border: 1px solid var(--aw-alert-border);
+    background: var(--aw-alert-bg);
 
     &__icon {
         padding-right: theme('spacing.4', 1rem);
@@ -11,6 +12,14 @@
         line-height: 0.75em;
     }
 
+    .aw-description {
+        color: var(--aw-alert-on-color);
+
+        a {
+            color: var(--aw-alert-on-color);
+        }
+    }
+
     &__title {
         display: flex;
         margin: 0;
@@ -28,6 +37,10 @@
             margin-top: theme('spacing.4', 1rem);
             margin-left: theme('spacing.4', 1rem);
         }
+
+        .aw-icon, a {
+            color: var(--aw-alert-on-color);
+        }
     }
 }
 

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/switch-field.css

@@ -44,6 +44,12 @@
         &:checked {
             background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
         }
+
+        &--partical {
+            &:checked {
+                 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.33089 10.8334H16.6667C16.8877 10.8334 17.0997 10.7456 17.256 10.5893C17.4123 10.4331 17.5001 10.2211 17.5001 10.0001C17.5001 9.77907 17.4123 9.56711 17.256 9.41083C17.0997 9.25455 16.8877 9.16675 16.6667 9.16675H3.33089C3.10988 9.16675 2.89792 9.25455 2.74164 9.41083C2.58536 9.56711 2.49756 9.77907 2.49756 10.0001C2.49756 10.2211 2.58536 10.4331 2.74164 10.5893C2.89792 10.7456 3.10988 10.8334 3.33089 10.8334Z'/%3e%3c/svg%3e");
+             }
+        }
     }
 
 

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

@@ -11,6 +11,7 @@
         >
             <input
                 class="aw-switch-field__element"
+                :class="{ 'aw-switch-field__element--partical': partical }"
                 type="checkbox"
                 v-bind="{ value, checked: isChecked, ...skipAttr, ...$attrs }"
                 :id="id || defaultId"
@@ -52,9 +53,11 @@ export default {
         },
 
         checked: {
-            type: [Array, Boolean, Number],
+            type: [Array, Object, Boolean, Number],
             default: false
-        }
+        },
+
+        partical: Boolean
     },
 
     computed: {

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="aw-alert">
+    <div class="aw-alert" :style="styleVariables">
         <AwDescription tag="div" class="aw-alert__title">
             <span v-if="icon || $scopedSlots.icon" class="aw-alert__icon">
                 <slot name="icon">
@@ -31,6 +31,16 @@ export default {
             default: ''
         },
 
+        color: {
+            type: String,
+            default: ''
+        },
+
+        onColor: {
+            type: String,
+            default: ''
+        },
+
         iconColor: {
             type: String,
             default: ''
@@ -40,6 +50,22 @@ export default {
             type: String,
             default: ''
         }
+    },
+
+    computed: {
+        styleVariables() {
+            return {
+                '--aw-alert-bg': this.color
+                    ? `var(--c-${this.color})`
+                    : 'current',
+                '--aw-alert-border': this.onColor
+                    ? `var(--c-${this.onColor})`
+                    : 'var(--c-mono-800)',
+                '--aw-alert-on-color': this.onColor
+                    ? `var(--c-${this.onColor})`
+                    : 'current'
+            }
+        }
     }
 }
 </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/_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: {
@@ -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'] = {}
     })
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.65.1",
+    "version": "2.67.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -43,9 +43,7 @@
         "build": "rimraf dist && yarn build-icons && cross-env NODE_ENV=production rollup -c ./build/rollup.config.js",
         "build-icons": "node build/icons/font.js && node build/icons/json.js",
         "dev": "rimraf dist && yarn build-icons && rollup -wc ./build/rollup.config.js",
-        "dev-nuxt": "yarn build-icons && nuxt",
-        "test": "jest",
-        "test:watch": "jest -w"
+        "dev-nuxt": "yarn build-icons && nuxt"
     },
     "dependencies": {
         "@casl/ability": "^4.1.6",
@@ -68,7 +66,6 @@
         "libphonenumber-js": "^1.9.43",
         "loadjs": "^3.6.1",
         "marked": "^0.7.0",
-        "postcss-color-function": "^4.1.0",
         "postcss-each": "^0.10.0",
         "postcss-easings": "^2.0.0",
         "prismjs": "^1.17.1",
@@ -82,7 +79,6 @@
         "@babel/preset-env": "^7.5.5",
         "@nuxtjs/eslint-config": "^2.0.0",
         "@nuxtjs/eslint-module": "^1.1.0",
-        "@vue/test-utils": "^1.0.0-beta.29",
         "autoprefixer": "^9.6.1",
         "babel-core": "7.0.0-bridge.0",
         "babel-eslint": "^10.0.3",
@@ -94,10 +90,7 @@
         "eslint-config-prettier": "^6.9.0",
         "eslint-plugin-nuxt": "^0.5.0",
         "eslint-plugin-prettier": "^3.1.2",
-        "jest": "^24.8.0",
-        "jest-serializer-vue": "^2.0.2",
-        "jest-transform-stub": "^2.0.0",
-        "nuxt": "^2.11.0",
+        "nuxt": "^2.17.1",
         "nuxt-i18n": "^6.4.1",
         "postcss-calc": "^7.0.1",
         "postcss-custom-properties": "^9.0.2",
@@ -117,10 +110,7 @@
         "rollup-plugin-postcss": "^2.0.3",
         "rollup-plugin-terser": "^5.1.1",
         "rollup-plugin-visualizer": "^2.6.0",
-        "rollup-plugin-vue": "^5.0.1",
-        "vue-jest": "^3.0.4",
-        "vue-template-compiler": "^2.6.10",
-        "webfonts-generator": "^0.4.0"
+        "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "731b4fa90b1988fd90818a041a3a30ba09509057"
+    "gitHead": "7cd4ca56900a7c32fcab1516ee346528ec9eb9fe"
 }