@imaginario27/air-ui-ds 1.13.0 → 1.13.2

package/CHANGELOG.md

@@ -5,6 +5,28 @@ All notable changes to this package are documented in this file.
 Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
 Future releases will include detailed entries generated with Changesets.
 
+## 1.13.1 - 2026-05-19
+
+Release type: patch.
+Commits found in range: 1.
+
+### Added
+
+1. make mobile breakpoint behavior configurable ([8cd4eb6](https://github.com/imaginario27/air-ui/commit/8cd4eb6047046ba64f96177f284e0ee2db910cc3))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.13.0 - 2026-04-22
+
+Release type: minor.
+Commits found in range: 1.
+
+### Added
+
+1. update MetricCard with new props ([4841cb3](https://github.com/imaginario27/air-ui/commit/4841cb3e6c0a8385825ff91f505b9e5ca732ca44))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.12.2 - 2026-04-22
 
 Release type: patch.

package/components/layouts/ContentBody.vue

@@ -20,11 +20,15 @@ const props = defineProps({
         type: Number as PropType<number>,
         default: 240,
     },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
 })
 
 // Composables
 const { isMobileSidebarOpen } = useMobileSidebar()
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 
 // Computed dynamic style
 const containerStyle = computed(() => {

package/components/layouts/MainContent.vue

@@ -15,13 +15,17 @@
 
 <script setup lang="ts">
 // Props
-defineProps({
+const props = defineProps({
     tocSidebarWidth: {
         type: Number as PropType<number>,
         default: 240
-    }
+    },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
 })
 
 // Composable
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 </script>

package/components/layouts/headers/CompactHeader.vue

@@ -34,12 +34,12 @@
                         && sidebarTogglePosition === SidebarTogglePosition.LOGO_LEFT_SIDE
                     "
                 >
-                    <ActionIconButton 
+                    <ActionIconButton
                         :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
-                        class="lg:hidden shadow-sm"
+                        :class="['shadow-sm', !isMobile && 'hidden']"
                         @click="toggleMobileSidebar"
                     />
-                </template>  
+                </template>
 
                 <slot name="header-logo" />
 
@@ -49,20 +49,20 @@
                         && sidebarTogglePosition === SidebarTogglePosition.LOGO_RIGHT_SIDE
                     "
                 >
-                    <ActionIconButton 
+                    <ActionIconButton
                         :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
-                        class="lg:hidden shadow-sm"
+                        :class="['shadow-sm', !isMobile && 'hidden']"
                         @click="toggleMobileSidebar"
                     />
-                </template> 
+                </template>
             </div>
 
             <!-- Navigation -->
             <div class="flex gap-3 items-center xs:w-auto">
                 <!-- Horizontal menu -->
-                <NavMenu 
-                    v-if="navMenuItems.length"
-                    :menuItems="navMenuItems" 
+                <NavMenu
+                    v-if="navMenuItems.length && !isMobile"
+                    :menuItems="navMenuItems"
                     :detectActive="detectActiveMenuItem"
                     :submenuYOffset
                     :submenuDropdownClass
@@ -74,7 +74,7 @@
                 <!-- Header actions -->
                 <div 
                     v-if="$slots['header-actions']"
-                    class="gap-3 items-center hidden lg:flex"
+                    :class="['gap-3 items-center', isMobile ? 'hidden' : 'flex']"
                 >
                     <slot name="header-actions" />
                 </div>
@@ -117,9 +117,9 @@
                         :positionYOffset="submenuYOffset"
                     >
                         <template #activator>
-                            <ActionIconButton 
+                            <ActionIconButton
                                 icon="mdi:menu"
-                                class="lg:hidden shadow-sm"
+                                class="shadow-sm"
                             />
                         </template>
                         <template #items>
@@ -197,6 +197,10 @@ const props = defineProps({
         type: Array as PropType<DropdownMenuItem[]>,
         default: () => [],
     },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
     showMobileMenuToggle: {
         type: Boolean as PropType<boolean>,
         default: true,
@@ -232,18 +236,18 @@ const props = defineProps({
     },
     navMenuClass: {
         type: String as PropType<string>,
-        default: 'hidden lg:flex'
+        default: ''
     },
     navMobileMenuClass: {
         type: String as PropType<string>,
-        default: 'lg:hidden min-w-[280px]'
+        default: 'min-w-[280px]'
     },
     headerClass: String as PropType<string>,
 })
 
 // Composables
 const { isMobileSidebarOpen, toggleMobileSidebar } = useMobileSidebar()
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 
 const getSubmenuItems = (item: MenuItem): NonNullable<MenuItem['children']> => {
     return item.children ?? []

package/components/navigation/nav-sidebar/NavSidebar.vue

@@ -14,8 +14,7 @@
             'py-4',
             'border-r border-border-default',
             'transition-all duration-300 ease-in-out',
-            isMobileSidebarOpen ? 'translate-x-0' : '-translate-x-full',
-            'lg:translate-x-0', // Always visible on large screens
+            (!isMobile || isMobileSidebarOpen) ? 'translate-x-0' : '-translate-x-full',
         ]"
     >
         <!-- Collapse & Close Buttons -->
@@ -32,7 +31,7 @@
                 <ActionIconButton 
                     v-if="showMobileSidebarClose && isMobile && !isCollapsed"
                     :icon="mobileSidebarCloseIcon"
-                    class="flex sm:hidden"
+                    class="flex"
                     :size="ButtonSize.SM"
                     @click="toggleMobileSidebar()"
                 />
@@ -294,6 +293,10 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'mdi:close-circle',
     },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
     isFixed: {
         type: Boolean as PropType<boolean>,
         default: true,
@@ -354,7 +357,7 @@ const {
     setSidebarCollapsed,
     toggleSidebarState,
 } = useSidebar()
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 
 const MAX_NESTING_LEVEL = 3
 

package/components/pagination/ButtonPagination.vue

@@ -5,8 +5,7 @@
             'justify-between',
             'items-center',
             'gap-3',
-            'flex-col-reverse',
-            'lg:flex-row',
+            isMobile ? 'flex-col-reverse' : 'flex-row',
             'w-full'
         ]"
     >
@@ -26,7 +25,7 @@
                 v-model="itemsPerPage" 
                 :rowsLabel="rowsPerPageLabel"
                 :rowsOptions="rowsPerPageOptions"
-                class="flex lg:hidden" 
+                :class="[isMobile ? 'flex' : 'hidden']"
             /> <!-- Mobile position -->
         </div>
 
@@ -35,10 +34,7 @@
             :class="[
                 'flex',
                 'gap-6',
-                'flex-col',
-                'w-full',
-                'lg:flex-row',
-                'lg:w-auto'
+                isMobile ? 'flex-col w-full' : 'flex-row w-auto'
             ]"
         >
             <RowsPerPage 
@@ -46,7 +42,7 @@
                 v-model="itemsPerPage"
                 :rowsLabel="rowsPerPageLabel"
                 :rowsOptions="rowsPerPageOptions"
-                class="hidden lg:flex" 
+                :class="[isMobile ? 'hidden' : 'flex']"
             />
             <nav 
                 v-if="totalItems > itemsPerPage"
@@ -168,10 +164,14 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Showing {total} result',
     },
+    mobileBreakpoint: {
+        type: Number as PropType<number>,
+        default: 1024,
+    },
 })
 
 // Composables
-const { isMobile } = useIsMobile()
+const { isMobile } = useIsMobile(() => props.mobileBreakpoint)
 
 // States
 const itemsPerPage = ref(props.itemsPerPage)

package/composables/useIsMobile.ts

@@ -1,27 +1,32 @@
-export const useIsMobile = (breakpoint: number = 1024) => {
-    const isMobile = ref(false) // Initial value for SSR
-
-    // Function to update `isMobile`
-    const updateIsMobile = () => {
-        if (typeof window !== 'undefined') {
-            isMobile.value = window.innerWidth < breakpoint
-        }
-    }
-
-    // Attach resize listener on the client
-    onMounted(() => {
-        updateIsMobile() // Initialize the value
-        window.addEventListener('resize', updateIsMobile)
-    })
-
-    // Cleanup listener when unmounted
-    onUnmounted(() => {
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('resize', updateIsMobile)
-        }
-    })
-
-    return {
-        isMobile,
-    }
-}
+import { toValue, type MaybeRefOrGetter } from 'vue'
+
+export const useIsMobile = (breakpoint: MaybeRefOrGetter<number> = 1024) => {
+    const isMobile = ref(false) // Initial value for SSR
+
+    // Function to update `isMobile`
+    const updateIsMobile = () => {
+        if (typeof window !== 'undefined') {
+            isMobile.value = window.innerWidth < toValue(breakpoint)
+        }
+    }
+
+    // Attach resize listener on the client
+    onMounted(() => {
+        updateIsMobile() // Initialize the value
+        window.addEventListener('resize', updateIsMobile)
+    })
+
+    // Re-evaluate when the breakpoint itself changes
+    watch(() => toValue(breakpoint), updateIsMobile)
+
+    // Cleanup listener when unmounted
+    onUnmounted(() => {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', updateIsMobile)
+        }
+    })
+
+    return {
+        isMobile,
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.13.0",
+    "version": "1.13.2",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",
@@ -23,31 +23,31 @@
         "typecheck": "vue-tsc --noEmit -p tsconfig.typecheck.json"
     },
     "dependencies": {
-        "@nuxt/content": "3.12.0",
+        "@nuxt/content": "3.14.0",
         "@nuxt/eslint": "1.15.2",
-        "@nuxt/icon": "2.2.1",
+        "@nuxt/icon": "2.2.2",
         "@nuxt/image": "2.0.0",
-        "@nuxtjs/i18n": "10.2.3",
-        "@tailwindcss/vite": "4.2.2",
-        "@vueuse/core": "14.2.1",
-        "@vueuse/nuxt": "14.2.1",
-        "nuxt": "4.4.2",
-        "qrcode.vue": "3.8.0",
-        "tailwindcss": "4.2.2",
-        "vue": "3.5.30",
-        "vue-router": "5.0.4",
+        "@nuxtjs/i18n": "10.3.0",
+        "@tailwindcss/vite": "4.3.0",
+        "@vueuse/core": "14.3.0",
+        "@vueuse/nuxt": "14.3.0",
+        "nuxt": "4.4.6",
+        "qrcode.vue": "3.9.1",
+        "tailwindcss": "4.3.0",
+        "vue": "3.5.34",
+        "vue-router": "5.0.7",
         "vue3-toastify": "0.2.9"
     },
     "devDependencies": {
-        "@nuxt/test-utils": "4.0.0",
-        "@vitest/coverage-v8": "4.1.0",
-        "@vue/test-utils": "2.4.6",
-        "eslint": "10.1.0",
-        "happy-dom": "20.8.4",
-        "playwright-core": "1.58.2",
-        "prettier": "3.8.1",
+        "@nuxt/test-utils": "4.0.3",
+        "@vitest/coverage-v8": "4.1.7",
+        "@vue/test-utils": "2.4.10",
+        "eslint": "10.4.0",
+        "happy-dom": "20.9.0",
+        "playwright-core": "1.60.0",
+        "prettier": "3.8.3",
         "ts-node": "10.9.2",
-        "typescript": "5.9.3",
-        "vitest": "4.1.0"
+        "typescript": "6.0.3",
+        "vitest": "4.1.7"
     }
 }

package/.nuxtrc

@@ -1 +0,0 @@
-setups.@nuxt/test-utils="4.0.0"