@awes-io/ui 2.53.0 → 2.54.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.54.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.53.0...@awes-io/ui@2.54.0) (2022-07-05)
+
+
+### Features
+
+* optional menu items translation and tooltip ([8a24879](https://github.com/awes-io/client/commit/8a24879ee5d0b1ff60165567e2b70201b4cfe518))
+
+
+
+
+
 # [2.53.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.52.0...@awes-io/ui@2.53.0) (2022-06-29)
 
 

package/components/5_layouts/AwLayoutProvider.vue

@@ -175,6 +175,7 @@ export default {
                     {
                         show,
                         text,
+                        translate = true,
                         subtitle,
                         description,
                         href,
@@ -203,7 +204,7 @@ export default {
                     href = isType('Function', href)
                         ? href(state, getters)
                         : href
-                    text = this.$t(text)
+                    text = translate === false ? text : this.$t(text)
                     subtitle = subtitle ? this.$t(subtitle) : undefined
                     description = description ? this.$t(description) : null
 

package/components/5_layouts/_AwNav.vue

@@ -19,7 +19,12 @@
                     "
                 >
                     <AwIcon v-if="item.icon" size="16" :name="item.icon" />
-                    <span>{{ item.text }}</span>
+                    <span
+                        v-tooltip="tooltips[i]"
+                        :[$options.TOOLTIP_EL_ATTR]="i"
+                    >
+                        {{ item.text }}
+                    </span>
                     <AwBadge
                         v-if="item.badge"
                         v-bind="item.badge"
@@ -56,7 +61,12 @@
                     }"
                     class="aw-nav__child truncate aw-nav__child--sub"
                 >
-                    <span>{{ subchild.text }}</span>
+                    <span
+                        v-tooltip="tooltips[i + '-' + j]"
+                        :[$options.TOOLTIP_EL_ATTR]="i + '-' + j"
+                    >
+                        {{ subchild.text }}
+                    </span>
                     <AwBadge
                         v-if="subchild.badge"
                         v-bind="subchild.badge"
@@ -70,12 +80,15 @@
 
 <script>
 import { viewOr, lensProp } from 'rambdax'
+import { supportsPassive } from '@AwUtils/events'
 import AwNavItem from '@AwLayouts/_AwNavItem.vue'
 
 const TOGGLE_CHILDREN_ATTR = 'data-toggle-children'
 
 const OPEN_CHILDREN_ATTR = 'data-open-children'
 
+const TOOLTIP_EL_ATTR = 'data-tooltip-el'
+
 const targetByAttribute = (attr, $event) =>
     $event.target.hasAttribute(attr)
         ? $event.target
@@ -92,6 +105,8 @@ export default {
 
     OPEN_CHILDREN_ATTR,
 
+    TOOLTIP_EL_ATTR,
+
     props: {
         title: {
             type: String,
@@ -112,7 +127,8 @@ export default {
 
     data() {
         return {
-            openedChildren: []
+            openedChildren: [],
+            tooltips: {}
         }
     },
 
@@ -137,11 +153,37 @@ export default {
                         )
                     )
                 })
+
+                if (typeof oldItems !== 'undefined') {
+                    this.$nextTick(this._calculateOversizedText)
+                }
             },
             immediate: true
         }
     },
 
+    mounted() {
+        this.$nextTick(this._calculateOversizedText)
+
+        const eventOptions = supportsPassive() ? { passive: true } : false
+
+        window.addEventListener(
+            'resize',
+            this._calculateOversizedText,
+            eventOptions
+        )
+
+        this.$once('hook:beforeDestroy', () => {
+            this.tooltips = {}
+
+            window.addEventListener(
+                'resize',
+                this._calculateOversizedText,
+                eventOptions
+            )
+        })
+    },
+
     methods: {
         _getItemToggleAttr(item) {
             return item.href ? OPEN_CHILDREN_ATTR : TOGGLE_CHILDREN_ATTR
@@ -175,6 +217,23 @@ export default {
 
                 return
             }
+        },
+
+        _calculateOversizedText() {
+            this.tooltips = {}
+
+            const children = this.$el.querySelectorAll(
+                '[' + TOOLTIP_EL_ATTR + ']'
+            )
+
+            for (let i = 0; i < children.length; i++) {
+                const el = children[i]
+
+                if (el.scrollWidth > el.clientWidth) {
+                    this.tooltips[el.getAttribute(TOOLTIP_EL_ATTR)] =
+                        el.textContent
+                }
+            }
         }
     }
 }

package/package.json

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