@awes-io/ui 2.131.0 → 2.132.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.132.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.131.0...@awes-io/ui@2.132.0) (2025-06-24)
+
+
+### Features
+
+* chart version support added ([17456f0](https://github.com/awes-io/client/commit/17456f041d22ee28a5c5fcc186b0226ddc5aaabc))
+* non-searchable selects expands dropdown on mobile ([9f8fdf9](https://github.com/awes-io/client/commit/9f8fdf9f7eabfe091771424faeafb36029214b6d))
+
+
+
+
+
 # [2.131.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.130.1...@awes-io/ui@2.131.0) (2025-06-20)
 
 

package/assets/css/components/select.css

@@ -123,8 +123,8 @@
     }
 
     &--mobile-opened .aw-select__dropdown {
-         top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
-         bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
+        top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
+        bottom: max(auto, calc(env(safe-area-inset-bottom, 0px) + 0.5rem));
     }
 }
 

package/components/2_molecules/AwSelect.vue

@@ -66,6 +66,7 @@
 
                 <AwButton
                     v-if="clearable"
+                    ref="clearButton"
                     v-show="!isOpened && selectedIndexes.length"
                     @click="_onClearClick"
                     theme="icon"
@@ -614,12 +615,31 @@ export default {
 
         isMobileOpened(isVisible) {
             if (isVisible) {
+                this._destroyPopper()
+
                 disableBodyScroll(this.$refs.dropdown, {
                     reserveScrollBarGap: true
                 })
             } else {
                 enableBodyScroll(this.$refs.dropdown)
             }
+        },
+
+        searchable: {
+            handler(searchable) {
+                const ua = navigator.userAgent.toLowerCase()
+
+                if (
+                    searchable &&
+                    ua.includes('mobile') &&
+                    !ua.includes('android')
+                ) {
+                    this.hasKeyboard = true
+                } else {
+                    this.hasKeyboard = false
+                }
+            },
+            immediate: true
         }
     },
 
@@ -650,12 +670,6 @@ export default {
         if (this._isAjax && !!this.searchPreload) {
             this._preloadOptions()
         }
-
-        const ua = navigator.userAgent.toLowerCase()
-
-        if (ua.includes('mobile') && !ua.includes('android')) {
-            this.hasKeyboard = true
-        }
     },
 
     beforeDestroy() {
@@ -744,6 +758,14 @@ export default {
 
         _onMouseDown(e) {
             if (!this.searchable) {
+                if (
+                    this.$refs.clearButton &&
+                    (e.target === this.$refs.clearButton.$el ||
+                        this.$refs.clearButton.$el.contains(e.target))
+                ) {
+                    return
+                }
+
                 if (e.target.tagName !== 'INPUT') {
                     e.preventDefault()
                 }

package/components/2_molecules/AwSelectObject.vue

@@ -651,6 +651,23 @@ export default {
             }
         },
 
+        searchable: {
+            handler(searchable) {
+                const ua = navigator.userAgent.toLowerCase()
+
+                if (
+                    searchable &&
+                    ua.includes('mobile') &&
+                    !ua.includes('android')
+                ) {
+                    this.hasKeyboard = true
+                } else {
+                    this.hasKeyboard = false
+                }
+            },
+            immediate: true
+        },
+
         _hasNextPage: '_toggleInfinityScroll'
     },
 
@@ -678,12 +695,6 @@ export default {
     },
 
     mounted() {
-        const ua = navigator.userAgent.toLowerCase()
-
-        if (ua.includes('mobile') && !ua.includes('android')) {
-            this.hasKeyboard = true
-        }
-
         if (this._preload.mounted) {
             this.fetch()
         }

package/components/3_organisms/AwChart.vue

@@ -7,24 +7,44 @@
 <script>
 import { equals } from 'rambdax'
 import loadjs from 'loadjs'
+import { AwChart as _config } from '@AwConfig'
+import { conf } from '@AwUtils/component'
 
 const CHART_ID = 'chart'
 
 export default {
     name: 'AwChart',
 
+    _config,
+
     props: {
         // https://apexcharts.com/docs/
         options: {
             type: Object,
             required: true
+        },
+
+        libVersion: {
+            type: String,
+            default() {
+                return conf(this, 'libVersion', 'latest')
+            }
         }
     },
 
     data() {
         return {
-            chart: null,
-            libUrl: ['https://cdn.jsdelivr.net/npm/apexcharts']
+            chart: null
+        }
+    },
+
+    computed: {
+        libUrl() {
+            return [
+                ['https://cdn.jsdelivr.net/npm/apexcharts', this.libVersion]
+                    .filter(Boolean)
+                    .join('@')
+            ]
         }
     },
 

package/components/_config.js

@@ -4,11 +4,6 @@ import { COLORS } from '../assets/js/constants'
 export const LINK_REGEX = /^(https?:)?\/\//
 export const SPECIAL_URL_REGEX = /tel:|mailto:/
 
-export const AwLink = {
-    routerComponent: 'router-link',
-    baseClass: 'link'
-}
-
 export const AwAvatar = {
     colors: COLORS
 }
@@ -26,6 +21,35 @@ export const AwButton = {
     theme: 'solid'
 }
 
+export const AwCalendar = {
+    firstDay: 1,
+    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    months: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December'
+    ]
+}
+
+export const AwChart = {
+    libVersion: 'latest'
+}
+
+export const AwCode = {
+    baseClass: 'aw-text-field',
+    pattern: 'XXXXXX',
+    compact: true
+}
+
 export const AwCropper = {
     baseClass: 'aw-cropper'
 }
@@ -74,31 +98,6 @@ export const AwDropdown = {
     }
 }
 
-export const AwCalendar = {
-    firstDay: 1,
-    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-    months: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December'
-    ]
-}
-
-export const AwCode = {
-    baseClass: 'aw-text-field',
-    pattern: 'XXXXXX',
-    compact: true
-}
-
 export const AwForm = {
     baseClass: 'aw-form',
     method: 'post',
@@ -180,24 +179,6 @@ export const AwForm = {
     }
 }
 
-export const AwInput = {
-    baseClass: 'aw-text-field',
-    sizes: ['sm', 'md']
-}
-
-export const AwMoney = {
-    options: {
-        locale: undefined,
-        currency: 'EUR',
-        valueAsInteger: true,
-        distractionFree: true,
-        precision: undefined,
-        autoDecimalMode: false,
-        valueRange: undefined,
-        allowNegative: true
-    }
-}
-
 export const AwIconSystem = {
     baseClass: 'aw-icon',
     size: 16
@@ -211,8 +192,26 @@ export const AwImageUpload = {
     resultPath: 'imageUrl'
 }
 
-export const AwPage = {
-    titleTag: 'h1'
+export const AwInput = {
+    baseClass: 'aw-text-field',
+    sizes: ['sm', 'md']
+}
+
+export const AwLayoutMenu = {
+    hideAside: false,
+
+    submenuToggler: true,
+
+    toggleAsideName: 'aw-layout-menu-submenu'
+}
+
+export const AwLink = {
+    routerComponent: 'router-link',
+    baseClass: 'link'
+}
+
+export const AwMenu = {
+    iconColor: 'currentColor'
 }
 
 export const AwModal = {
@@ -221,8 +220,21 @@ export const AwModal = {
     bgClickClose: true
 }
 
-export const AwMenu = {
-    iconColor: 'currentColor'
+export const AwMoney = {
+    options: {
+        locale: undefined,
+        currency: 'EUR',
+        valueAsInteger: true,
+        distractionFree: true,
+        precision: undefined,
+        autoDecimalMode: false,
+        valueRange: undefined,
+        allowNegative: true
+    }
+}
+
+export const AwPage = {
+    titleTag: 'h1'
 }
 
 export const AwTable = {
@@ -253,33 +265,29 @@ export const AwToggleShowAside = {
     }
 }
 
-export const AwLayoutMenu = {
-    hideAside: false,
-
-    submenuToggler: true,
-
-    toggleAsideName: 'aw-layout-menu-submenu'
-}
-
 export default {
     AwAvatar,
+    AwBirthdayPicker,
     AwButton,
-    AwLink,
+    AwCalendar,
+    AwChart,
+    AwCode,
     AwCropper,
     AwDate,
+    AwDescription,
     AwDropdown,
-    AwCalendar,
-    AwCode,
     AwForm,
-    AwInput,
-    AwMoney,
     AwIconSystem,
     AwImageUpload,
-    AwPage,
+    AwInput,
+    AwLayoutMenu,
+    AwLink,
+    AwMenu,
     AwModal,
+    AwMoney,
+    AwPage,
     AwTable,
     AwTags,
     AwTel,
-    AwToggleShowAside,
-    AwLayoutMenu
+    AwToggleShowAside
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.131.0",
+    "version": "2.132.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "b205d20df88343fa2a87f21c3d088a167f13fbf4"
+    "gitHead": "642980f67d06500661147faf8d998530a9071882"
 }