@awes-io/ui 2.53.0 → 2.55.1

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.55.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.55.0...@awes-io/ui@2.55.1) (2022-07-13)
+
+
+### Bug Fixes
+
+* app cookies expiration added ([395ace4](https://github.com/awes-io/client/commit/395ace4780ef7a23cc0b6b38df58be188fcbac87))
+
+
+
+
+
+# [2.55.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.54.0...@awes-io/ui@2.55.0) (2022-07-11)
+
+
+### Features
+
+* **aw-calendar:** translations from dayjs ([c6f50fa](https://github.com/awes-io/client/commit/c6f50fa1134932894ffe691391c41290c490ad51))
+
+
+
+
+
+# [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/assets/css/components/calendar.css

@@ -17,6 +17,7 @@
     &__nav-title {
         flex-grow: 1;
         text-align: center;
+        text-transform: capitalize;
         font-weight: bold;
     }
 
@@ -30,6 +31,7 @@
     &__weekday {
         display: block;
         text-align: center;
+        text-transform: capitalize;
         opacity: 0.8;
         margin-top: theme('spacing.2');
     }

package/components/3_organisms/AwCalendar/AwCalendar.vue

@@ -20,10 +20,7 @@
             />
         </slot>
 
-        <AwCalendarWeekdays
-            :first-day="firstDay"
-            :weekday-names="$t('aw.calendar.weekdays_short')"
-        />
+        <AwCalendarWeekdays :first-day="firstDay" />
 
         <AwCalendarDays
             :first-day="firstDay"

package/components/3_organisms/AwCalendar/AwCalendarView.vue

@@ -1,9 +1,6 @@
 <template>
     <div class="aw-calendar" @click="onClick">
-        <AwCalendarWeekdays
-            :first-day="firstDay"
-            :weekday-names="$t('aw.calendar.weekdays_short')"
-        />
+        <AwCalendarWeekdays :first-day="firstDay" />
 
         <AwCalendarDays
             :first-day="firstDay"

package/components/3_organisms/AwCalendar/_AwCalendarNav.vue

@@ -35,6 +35,7 @@
 </template>
 
 <script>
+import { pathOr, isType } from 'rambdax'
 import { AwCalendar as _config } from '@AwConfig'
 
 export default {
@@ -50,10 +51,8 @@ export default {
         },
 
         months: {
-            type: Array,
-            default() {
-                return this.$t('aw.calendar.months')
-            }
+            type: [Array, Function],
+            default: null
         },
 
         disabledPrev: Boolean,
@@ -63,7 +62,23 @@ export default {
 
     computed: {
         _months() {
-            return Array.isArray(this.months) ? this.months : _config.months
+            if (isType('Array', this.month)) {
+                return this.month
+            }
+
+            const months = pathOr(
+                _config.months,
+                ['Ls', this.$i18n.locale, 'months'],
+                this.$dayjs
+            )
+
+            if (isType('Function', months) && months.s) {
+                return months.s
+            } else if (isType('Array', months)) {
+                return months
+            } else {
+                return _config.months
+            }
         }
     }
 }

package/components/3_organisms/AwCalendar/_AwCalendarWeekdays.vue

@@ -16,7 +16,7 @@ export default {
 
         weekdayNames: {
             type: Array,
-            required: true
+            default: null
         }
     },
 
@@ -33,7 +33,11 @@ export default {
 
         const namesArray = Array.isArray(weekdayNames)
             ? weekdayNames
-            : _config.weekdaysShort
+            : pathOr(
+                  _config.weekdaysShort,
+                  ['Ls', parent.$i18n.locale, 'weekdaysMin'],
+                  parent.$dayjs
+              )
 
         const sortedNames = namesArray
             .slice(firstDay)

package/components/3_organisms/AwDate.vue

@@ -50,10 +50,7 @@
                     :disabled-next="view.disabledNext"
                     v-on="view.navListeners"
                 />
-                <AwCalendarWeekdays
-                    :first-day="firstDay"
-                    :weekday-names="$t('aw.calendar.weekdays_short')"
-                />
+                <AwCalendarWeekdays :first-day="firstDay" />
                 <AwCalendarDays
                     :first-day="firstDay"
                     :month="month"

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/nuxt/templates/dark-theme.plugin.js

@@ -13,7 +13,7 @@ export default function({ store, app }) {
 
     if (isNil(isDark)) {
         isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-        JsCookie.set(COOKIE_NAME, isDark, { sameSite: 'lax' })
+        JsCookie.set(COOKIE_NAME, isDark, { sameSite: 'lax', expires: 365 })
     } else {
         isDark = JSON.parse(isDark)
     }
@@ -36,7 +36,7 @@ export default function({ store, app }) {
     store.watch(
         (state) => state.awesIo.isDarkTheme,
         (isDark) => {
-            JsCookie.set(COOKIE_NAME, isDark, { sameSite: 'lax' })
+            JsCookie.set(COOKIE_NAME, isDark, { sameSite: 'lax', expires: 365 })
             document.documentElement.setAttribute(ATTR, isDark)
             app.head.htmlAttrs[ATTR] = isDark
         }

package/nuxt/templates/lang.plugin.js

@@ -118,9 +118,9 @@ export default async ({ app, $axios }) => {
             }
         } else if (_browserLang) {
             app.i18n.locale = _browserLang
-            JsCookie.set(langCookie, _browserLang, { sameSite: 'lax' })
+            JsCookie.set(langCookie, _browserLang, { sameSite: 'lax', expires: 365 })
         } else {
-            JsCookie.set(langCookie, i18nOptions.locale, { sameSite: 'lax' })
+            JsCookie.set(langCookie, i18nOptions.locale, { sameSite: 'lax', expires: 365 })
         }
     }
 
@@ -173,7 +173,7 @@ export default async ({ app, $axios }) => {
         app.i18n.locale = locale
 
         if (langCookie) {
-            JsCookie.set(langCookie, locale, { sameSite: 'lax' })
+            JsCookie.set(langCookie, locale, { sameSite: 'lax', expires: 365 })
         }
 
         for (const afterListener of afterListeners.keys()) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.53.0",
+    "version": "2.55.1",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -54,7 +54,7 @@
         "@nuxtjs/svg-sprite": "^0.5.2",
         "@popperjs/core": "^2.0.5",
         "autosize": "^4.0.2",
-        "axios": "^0.19.0",
+        "axios": "^0.27.2",
         "body-scroll-lock": "^2.6.4",
         "chroma-js": "^2.0.6",
         "clipboard-copy": "^3.1.0",
@@ -122,5 +122,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "bdd10f2d121d75c137381357d3dbc72119b40630"
+    "gitHead": "b43f233a26bb90c7e3a232aec4602bedde29bf2d"
 }