@awes-io/ui 2.56.4 → 2.58.0

package/CHANGELOG.md

@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* updated yarn ([d51cfd8](https://github.com/awes-io/client/commit/d51cfd8835d872dbdcf950f108abcf57e86bef24))
+
+
+
+
+
+## [2.56.5](https://github.com/awes-io/client/compare/@awes-io/ui@2.56.4...@awes-io/ui@2.56.5) (2022-07-20)
+
+
+### Bug Fixes
+
+* **aw-select-object:** ios focus lags fixed ([f0cc05d](https://github.com/awes-io/client/commit/f0cc05db37f69cd9d39bb58443060f49854116c7))
+
+
+
+
+
 ## [2.56.4](https://github.com/awes-io/client/compare/@awes-io/ui@2.56.3...@awes-io/ui@2.56.4) (2022-07-18)
 
 

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

@@ -230,6 +230,7 @@ $modal-aside-width-large: 75vw;
             flex-direction: column;
             margin-right: 0;
             overflow: auto;
+            max-height: var(--viewport-height, 100vh);
         }
 
         &[class*='is-overlay-aside'] &__body {
@@ -439,7 +440,7 @@ $modal-t-dur: 250ms;
             transform: none;
 
             .aw-modal__dialog {
-                transform: translateX(95%);
+                transform: translateX(80%);
             }
         }
 

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/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/2_molecules/AwSelectObject.vue

@@ -25,7 +25,45 @@
             <slot name="prefix" />
 
             <slot name="toggler" v-bind="_inputSlot">
+                <AwSelectFakeInput
+                    v-if="isMobile"
+                    ref="input"
+                    :value="inputValue"
+                    :label="label"
+                    :placeholder="_placeholder"
+                    :clearable="clearable && !_isEmpty"
+                    :is-opened="isOpened"
+                    caret
+                    :class="{
+                        'is-filled': searchable && isOpened,
+                        'not-searchable': !searchable
+                    }"
+                    class="flex-1"
+                    v-bind="_attrs.input"
+                    @open="open"
+                    @clear="clear"
+                >
+                    <template #prefix>
+                        <slot
+                            name="icon"
+                            v-bind="{
+                                option: value,
+                                optionLabel: _selectedLabel,
+                                isLoading,
+                                isOpened
+                            }"
+                        ></slot>
+                    </template>
+
+                    <template #element>
+                        <slot
+                            name="element"
+                            v-bind="{ value: inputValue }"
+                        ></slot>
+                    </template>
+                </AwSelectFakeInput>
                 <AwSelectInput
+                    v-else
                     ref="input"
                     :value="inputValue"
                     :label="label"
@@ -210,7 +248,8 @@ export default {
     inheritAttrs: false,
 
     components: {
-        AwSelectInput
+        AwSelectInput,
+        AwSelectFakeInput: () => import('./_AwSelectFakeInput.vue')
     },
 
     name: 'AwSelectObject',

package/components/2_molecules/_AwSelectFakeInput.vue

@@ -0,0 +1,132 @@
+<template>
+    <div
+        ref="element"
+        class="flex aw-text-field is-text"
+        :class="{
+            'is-filled': value === 0 || !!value,
+            'has-label': !!label,
+            'has-error': hasError,
+            'is-disabled': isDisabled,
+            'has-icon': $slots.icon,
+            'has-prefix': prefix,
+            'has-postfix': postfix
+        }"
+        @click="$emit('open')"
+    >
+        <span
+            v-if="prefix || $scopedSlots.prefix"
+            v-tooltip.show.prepend="errorTooltip"
+            class="aw-text-field__prefix"
+            :class="{ 'px-4': prefix }"
+            :aria-describedby="errorText ? errorId : null"
+        >
+            <slot name="prefix">{{ prefix }}</slot>
+        </span>
+
+        <span class="block relative w-full">
+            <span
+                class="aw-text-field__element aw-text-field__element--fake"
+                tabindex="0"
+                :class="paddingClass"
+            >
+                <span v-if="inputValue" class="block h-6">
+                    {{ inputValue }}
+                </span>
+                <span v-else class="block h-6 opacity-50">
+                    {{ placeholder }}
+                </span>
+            </span>
+            <span
+                v-if="!!label || $scopedSlots.label"
+                class="aw-text-field__label"
+                :class="{ 'aw-text-field__label--required': isRequired }"
+            >
+                <slot name="label">
+                    {{ label }}
+                </slot>
+            </span>
+            <span class="aw-text-field__icon">
+                <slot name="icon">
+                    <!-- clear button -->
+                    <AwButton
+                        v-if="clearable"
+                        :size="$attrs.size || 'md'"
+                        @click.stop.prevent="$emit('clear', $event)"
+                        theme="icon"
+                        class="h-full"
+                    >
+                        <AwIconSystemMono name="close" />
+                    </AwButton>
+
+                    <!-- caret and loading -->
+                    <AwButton
+                        v-if="caret"
+                        :size="$attrs.size || 'md'"
+                        tabindex="-1"
+                        theme="icon"
+                        class="h-full"
+                        @click="$emit('caret')"
+                    >
+                        <AwIconSystemMono
+                            name="triangle"
+                            class="transition-200"
+                            :class="{ 'rotate-180': isOpened }"
+                        />
+                    </AwButton>
+                </slot>
+            </span>
+        </span>
+
+        <span
+            v-if="postfix || $scopedSlots.postfix"
+            class="aw-text-field__postfix"
+            :class="{ 'px-4': postfix }"
+        >
+            <slot name="postfix">{{ postfix }}</slot>
+        </span>
+    </div>
+</template>
+
+<script>
+import TextFieldMixin from '@AwMixins/text-field'
+
+export default {
+    name: 'AwSelectFakeInput',
+
+    mixins: [TextFieldMixin],
+
+    props: {
+        prefix: {
+            type: String,
+            default: ''
+        },
+
+        postfix: {
+            type: String,
+            default: ''
+        },
+
+        size: {
+            type: String,
+            default: 'md'
+        },
+
+        placeholder: {
+            type: String,
+            default: ''
+        },
+
+        clearable: Boolean,
+
+        caret: Boolean,
+
+        isOpened: Boolean
+    },
+
+    computed: {
+        paddingClass() {
+            return this.size === 'md' ? 'p-3' : 'p-2'
+        }
+    }
+}
+</script>

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/5_layouts/_AwLayoutMenu.vue

@@ -124,7 +124,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/nuxt/awes.config.js

@@ -6,6 +6,11 @@ export default {
         alt: 'Awes.io'
     },
 
+    fullLogo: {
+        src: 'https://static.awes.io/logo-blue_white.svg',
+        alt: 'Awes.io'
+    },
+
     background: {
         src: 'https://static.awes.io/demo/awes-background.svg'
     },
@@ -22,6 +27,11 @@ export const dark = {
         alt: 'Awes.io'
     },
 
+    fullLogo: {
+        src: 'https://static.awes.io/logo-blue.svg',
+        alt: 'Awes.io'
+    },
+
     background: {
         src: 'https://static.awes.io/demo/awes-background.svg'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.56.4",
+    "version": "2.58.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -122,5 +122,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "c7d677bbc549f644cc907eec78140c3d3d8a8fa7"
+    "gitHead": "50a0c95ae90eb488c21b2ee75055dfeb4b36f8db"
 }

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
+        }
     }
 }