@awes-io/ui 2.56.6 → 2.59.0

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.59.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.58.0...@awes-io/ui@2.59.0) (2022-09-08)
+
+
+### Features
+
+* uploader and test attrs improvements ([b3ef891](https://github.com/awes-io/client/commit/b3ef8914adcb9f2ea63999d1d82345ae7b98002b))
+
+
+
+
+
+# [2.58.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.57.0...@awes-io/ui@2.58.0) (2022-08-08)
+
+
+### Features
+
+* update ([e56f315](https://github.com/awes-io/client/commit/e56f31548de6895d0dc6dfc4175914860a0c8e53))
+
+
+
+
+
+# [2.57.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.56.7...@awes-io/ui@2.57.0) (2022-08-08)
+
+
+### Features
+
+* **aw-bottom-bar:** action button added ([0071a22](https://github.com/awes-io/client/commit/0071a22e28e3dc92976d05f5d36bd5b9f671fa46))
+
+
+
+
+
+## [2.56.7](https://github.com/awes-io/client/compare/@awes-io/ui@2.56.6...@awes-io/ui@2.56.7) (2022-07-20)
+
+
+### Bug Fixes
+
+* **aw-select-fake-input:** styles fixed ([7a1a984](https://github.com/awes-io/client/commit/7a1a9846873a37c725b48286cc3120a2b2b8dbb4))
+
+
+
+
+
 ## [2.56.6](https://github.com/awes-io/client/compare/@awes-io/ui@2.56.5...@awes-io/ui@2.56.6) (2022-07-20)
 
 

package/assets/css/components/header-notification.css

@@ -1,6 +1,7 @@
 .aw-header-notification {
     display: flex;
     align-items: flex-start;
+    padding-top: env(safe-area-inset-top, 0px);
 
     &__content {
         flex-grow: 1;

package/assets/css/components/icon-menu-item.css

@@ -23,6 +23,10 @@
             overflow: hidden;
             padding: theme('spacing.2') theme('spacing.1') theme('spacing.1');
         }
+
+        &--small {
+            padding: theme('spacing.2') theme('spacing.1');
+        }
     }
 
     &__icon-badge {

package/assets/css/components/notification.css

@@ -52,10 +52,10 @@
 
     /* default */
     right: 0;
-    bottom: 0;
+    bottom: env(safe-area-inset-bottom, 0px);
 
     &_top {
-        top: 0;
+        top: env(safe-area-inset-top, 0px);
         bottom: auto;
     }
 

package/assets/css/flags.css

@@ -9,6 +9,21 @@
     background-position: -0px -48px;
 }
 
+.flag-2x-wrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    vertical-align: middle;
+
+    .flag {
+        display: block !important;
+        flex-shrink: 0;
+        transform: scale(0.5);
+    }
+}
+
 .flag.ABKHAZIA { background-position: -0px -0px; }
 .flag.BASQUE-COUNTRY { background-position: -48px -0px; }
 .flag.BRITISH-ANTARCTIC-TERRITORY { background-position: -96px -0px; }

package/assets/js/icons/mono.js

@@ -8,6 +8,8 @@ export default {
     user:
         'M13.2 11.1c-1 0-1.5.6-3.2.6-1.7 0-2.1-.6-3.2-.6A4.7 4.7 0 002.1 16v1.4c0 1 .8 1.7 1.7 1.7h12.4c1 0 1.7-.8 1.7-1.7v-1.5c0-2.6-2.1-4.7-4.7-4.7zm3.6 6.2c0 .3-.3.6-.6.6H3.8a.6.6 0 01-.5-.6v-1.5c0-2 1.6-3.6 3.5-3.6.7 0 1.4.6 3.2.6 1.8 0 2.5-.6 3.2-.6 2 0 3.6 1.7 3.6 3.7v1.4zM10 10a4.5 4.5 0 100-9 4.5 4.5 0 000 9zm0-7.9A3.4 3.4 0 1110 9 3.4 3.4 0 0110 2z',
     menu: 'M1 11V9h18v2H1zm0-6V3h18v2H1zm0 12v-2h18v2H1z',
+    'menu-dots':
+        'M5.46 7.13a1.67 1.67 0 1 0 0-3.33 1.67 1.67 0 0 0 0 3.33Zm1.67 7.48a1.67 1.67 0 1 1-3.33 0 1.67 1.67 0 0 1 3.33 0Zm7.49-7.48a1.67 1.67 0 1 0 0-3.33 1.67 1.67 0 0 0 0 3.33Zm1.66 7.48a1.67 1.67 0 1 1-3.33 0 1.67 1.67 0 0 1 3.33 0Z',
     search:
         'M18.8 17.7l-4.3-4.3a7.6 7.6 0 10-1 1l4.2 4.4c.3.3.8.3 1 0 .4-.3.4-.8 0-1zm-10.2-3a6 6 0 110-12.2 6 6 0 010 12.2z',
     eye:

package/components/1_atoms/AwInput.vue

@@ -38,6 +38,7 @@
                     v-bind="mergedAttributes"
                     :value="inputValue"
                     :aria-describedby="errorText ? errorId : null"
+                    :data-error="errorText || hasError || null"
                     v-on="mergedListeners"
                     v-tooltip.show.prepend="errorTooltip"
                     ref="element"

package/components/2_molecules/_AwSelectFakeInput.vue

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

package/components/3_organisms/AwBottomBar.vue

@@ -13,7 +13,8 @@
         <slot name="bottom-bar-toggler">
             <AwMenuItemIcon
                 :text="$t('aw.bottom_bar.menu')"
-                icon="menu"
+                icon="menu-dots"
+                :size="$options.ICON_SIZE"
                 @click="$store.commit('awesIo/TOGGLE_MOBILE_MENU')"
             >
                 <template #default="{ text }">
@@ -22,9 +23,9 @@
                         tabindex="-1"
                     >
                         <AwIconSystemMono
-                            name="menu"
+                            name="menu-dots"
                             class="aw-icon-menu-item__icon"
-                            size="24"
+                            :size="$options.ICON_SIZE"
                         />
                     </span>
                     <span class="aw-icon-menu-item__text">
@@ -40,6 +41,12 @@
 import { viewOr, lensProp, omit } from 'rambdax'
 import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
 
+const VISIBLE_ITEMS_COUNT = 4
+
+const ICON_SIZE = 28
+
+const ACTION_ICON_SIZE = 36
+
 export default {
     name: 'AwBottomBar',
 
@@ -47,6 +54,8 @@ export default {
         AwMenuItemIcon
     },
 
+    ICON_SIZE,
+
     inject: {
         layoutProvider: {
             default: null
@@ -54,6 +63,30 @@ export default {
     },
 
     computed: {
+        actionButton() {
+            const button = this.$store.state.awesIo.bottomBarAction
+
+            if (!button) {
+                return null
+            }
+
+            let result = { ...button, hideText: true }
+
+            if (!button.href || (button.listeners && !button.listeners.click)) {
+                result = {
+                    ...button,
+                    listeners: {
+                        ...button.listeners,
+                        click: this.$root.$emit(
+                            'awes-io::bottom-bar-action:click'
+                        )
+                    }
+                }
+            }
+
+            return result
+        },
+
         showMenu() {
             return (
                 this.$scopedSlots['bottom-bar-items'] ||
@@ -66,8 +99,18 @@ export default {
 
         items() {
             const items = viewOr([], lensProp('mainMenu'), this.layoutProvider)
+            const itemsCount = VISIBLE_ITEMS_COUNT - (this.actionButton ? 1 : 0)
+            const visibleItems = items.slice(0, itemsCount)
+
+            if (this.actionButton) {
+                visibleItems.splice(
+                    Math.ceil(itemsCount / 2),
+                    0,
+                    this.actionButton
+                )
+            }
 
-            return items.slice(0, 4)
+            return visibleItems
         },
 
         activeMenu() {
@@ -77,7 +120,10 @@ export default {
 
     methods: {
         _pickItemProps(props) {
-            return omit('children,listeners', props)
+            return {
+                ...omit('children,listeners', props),
+                size: props.hideText ? ACTION_ICON_SIZE : ICON_SIZE
+            }
         }
     }
 }

package/components/3_organisms/AwUploader.vue

@@ -191,7 +191,15 @@ export default {
         /**
          * Hide build-in progress bar
          */
-        hideProgress: Boolean
+        hideProgress: Boolean,
+
+        /**
+         * Process FormData before sending
+         */
+        processData: {
+            type: Function,
+            default: null
+        }
     },
 
     data() {
@@ -299,8 +307,13 @@ export default {
                 const [uploader, canceler] = this._createFileRecord(file)
                 const id = uploader.id
                 const data = new FormData()
+
                 data.append('file', file)
 
+                if (isType('Function', this.processData)) {
+                    this.processData(data)
+                }
+
                 /**
                  * Fire on upload start, when browser validation is passed
                  * @arg { id: <Number>, file: <String>, loading: <Boolean>, progress: <Number>, cancel: <Function> }
@@ -378,7 +391,7 @@ export default {
             return ($event) => {
                 const { total, loaded } = $event
                 const progress = Math.round((loaded / total) * 100)
-                uploader.progress = progress
+                this.$set(uploader, 'progress', progress)
                 this.totalProgress = this._getAggregateProgress()
                 /**
                  * Fire on upload start, when browser validation is passed

package/components/5_layouts/_AwLayoutMenu.vue

@@ -64,7 +64,6 @@
 import { mapGetters } from 'vuex'
 import { pathOr, viewOr, lensProp, omit } from 'rambdax'
 import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
-import AwLayoutLogo from '@AwLayouts/_AwLayoutLogo.vue'
 import AwUserMenu from '@AwLayouts/_AwUserMenu.vue'
 import AwNav from '@AwLayouts/_AwNav.vue'
 
@@ -73,7 +72,7 @@ export default {
 
     components: {
         AwMenuItemIcon,
-        AwLayoutLogo,
+        AwLayoutLogo: () => import('@AwLayouts/_AwLayoutLogo.vue'),
         AwUserMenu,
         AwNav
     },
@@ -124,7 +123,7 @@ export default {
 
     methods: {
         _getMenuItemProps(props) {
-            return omit('children,description', props)
+            return omit('children,description,hideText', props)
         }
     }
 }

package/components/5_layouts/_AwMenuItemIcon.vue

@@ -14,13 +14,17 @@
                 v-tooltip:right="
                     tooltip ? { content: text, offset: [0, -6] } : null
                 "
-                :class="{ 'aw-icon-menu-item__icon-block--clip': !tooltip }"
+                :class="{
+                    'aw-icon-menu-item__icon-block--clip':
+                        !tooltip && !hideText,
+                    'aw-icon-menu-item__icon-block--small': !tooltip && hideText
+                }"
                 class="aw-icon-menu-item__icon-block"
                 tabindex="-1"
             >
                 <AwIcon
                     :name="(active && iconActive) || icon"
-                    size="24"
+                    :size="size"
                     :class="{
                         'aw-icon-menu-item__icon--highlight': active
                     }"
@@ -41,6 +45,7 @@
                 </span>
             </span>
             <span
+                v-if="!hideText"
                 v-show="!tooltip"
                 class="aw-icon-menu-item__text"
                 :class="{
@@ -50,6 +55,7 @@
                 {{ text }}
                 <AwIconSystemMono v-if="_linkExternal" name="external" />
             </span>
+            <span v-if="hideText" class="sr-only">{{ text }}</span>
         </slot>
     </Component>
 </template>
@@ -83,10 +89,17 @@ export default {
             default: ''
         },
 
+        size: {
+            type: [String, Number],
+            default: 24
+        },
+
         active: Boolean,
 
         tooltip: Boolean,
 
+        hideText: Boolean,
+
         badge: {
             type: Object,
             default: null,

package/components/5_layouts/_AwMobileMenu.vue

@@ -163,7 +163,8 @@ export default {
     name: 'AwMobileMenu',
 
     components: {
-        AwMobileMenuNav
+        AwMobileMenuNav,
+        AwLayoutLogo: () => import('@AwLayouts/_AwLayoutLogo.vue')
         // AwMobileMenuItem
     },
 

package/components/5_layouts/_AwNoty.vue

@@ -1,5 +1,6 @@
 <template functional>
     <div
+        :data-testid="props.testId"
         :class="{
             'bg-overlay': props.icon,
             [`bg-${props.type}`]: !props.icon,
@@ -73,6 +74,11 @@ export default {
     },
 
     props: {
+        testId: {
+            type: String,
+            required: true
+        },
+
         type: {
             type: String,
             required: true,

package/components/5_layouts/_AwNotyContainer.vue

@@ -23,7 +23,7 @@
 import { isType } from 'rambdax'
 import AwNoty from '@AwLayouts/_AwNoty.vue'
 
-let _notifyId = 0
+let _notifyId = 1
 
 export default {
     name: 'AwNotyContainer',
@@ -62,6 +62,7 @@ export default {
 
             const id = _notifyId++
             item.id = id
+            item.testId = item.testId || 'notifi-' + id
 
             const removeAfter = parseInt(item.timeout)
             if (removeAfter && !isNaN(removeAfter)) {

package/nuxt/index.js

@@ -1,6 +1,6 @@
 import { mergeDeepRight, pick, omit, uniq, endsWith, partition } from 'rambdax'
 import { existsSync, readdirSync, readFileSync, lstatSync } from 'fs'
-import { join, resolve } from 'path'
+import { join, resolve, sep } from 'path'
 import resolveConfig from 'tailwindcss/resolveConfig'
 import {
     default as configDefault,
@@ -16,6 +16,12 @@ const configDark = mergeDeepRight(configDefault, dark)
 
 export const MODULE_DIR = 'awes-io'
 
+const fixWindowsPath = (path) =>
+    path
+        .replace(/^\\\\\?\\/, '')
+        .replace(/\\/g, '/')
+        .replace(/\/\/+/g, '/')
+
 async function AwesIoUi() {
     /**
      * Check store existance
@@ -246,8 +252,8 @@ async function AwesIoUi() {
 
         this.addLayout(
             {
-                src: resolve(layoutsPath, file),
-                fileName: join(MODULE_DIR, file)
+                src: fixWindowsPath(resolve(layoutsPath, file)),
+                fileName: fixWindowsPath(join(MODULE_DIR, file))
             },
             file.replace('.vue', '')
         )
@@ -290,13 +296,16 @@ async function AwesIoUi() {
                 .reduce(collectComponents, acc)
         } else if (stat.isFile()) {
             const name = entry
-                .split('/')
+                .split(sep)
                 .pop()
                 .replace(/\.(vue|js)$/, '')
 
             return name.startsWith('_')
                 ? acc
-                : acc.concat({ name, path: entry })
+                : acc.concat({
+                      name,
+                      path: fixWindowsPath(entry)
+                  })
         } else {
             return acc
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.56.6",
+    "version": "2.59.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -122,5 +122,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "062f1c74a7cab63aaba86ae9c003bad833e84b23"
+    "gitHead": "3f9da3ad6aaf3aee398718c495468565018c2ecd"
 }

package/store/awesIo.js

@@ -39,6 +39,7 @@ export const state = () => ({
     mobileMenuOpened: false,
     beforeMobileMenu: null,
     afterMobileMenu: null,
+    bottomBarAction: null,
 
     headerNotification: null,
 
@@ -226,6 +227,14 @@ export const mutations = {
         if (payload && payload.component) {
             state.afterMobileMenu = payload.component
         }
+    },
+
+    SET_BOTTOM_BAR_ACTION(state, payload) {
+        if (isType('Object', payload)) {
+            state.bottomBarAction = payload
+        } else {
+            state.bottomBarAction = null
+        }
     }
 }