qdadm 0.26.2 → 0.26.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.26.2",
+  "version": "0.26.3",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",
@@ -24,7 +24,8 @@
     "./components": "./src/components/index.js",
     "./module": "./src/module/index.js",
     "./utils": "./src/utils/index.js",
-    "./styles": "./src/styles/index.css"
+    "./styles": "./src/styles/index.scss",
+    "./styles/breakpoints": "./src/styles/_breakpoints.scss"
   },
   "files": [
     "src",
@@ -35,11 +36,11 @@
     "@quazardous/quarkernel": "^2.1.0"
   },
   "peerDependencies": {
-    "vue": "^3.3.0",
-    "vue-router": "^4.0.0",
-    "primevue": "^4.0.0",
     "pinia": "^2.0.0",
-    "vanilla-jsoneditor": "^0.23.0"
+    "primevue": "^4.0.0",
+    "vanilla-jsoneditor": "^0.23.0",
+    "vue": "^3.3.0",
+    "vue-router": "^4.0.0"
   },
   "keywords": [
     "vue",
@@ -55,6 +56,7 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
     "jsdom": "^25.0.1",
+    "sass": "^1.97.1",
     "vitest": "^2.1.8"
   }
 }

package/src/components/layout/AppLayout.vue

@@ -12,7 +12,7 @@
  *   </AppLayout>
  */
 
-import { ref, watch, onMounted, computed, inject, provide, useSlots } from 'vue'
+import { ref, watch, onMounted, onUnmounted, computed, inject, provide, useSlots } from 'vue'
 import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
 import { useNavigation } from '../../composables/useNavigation'
 import { useApp } from '../../composables/useApp'
@@ -42,6 +42,30 @@ const STORAGE_KEY = computed(() => `${app.shortName.toLowerCase()}_nav_collapsed
 // Collapsed sections state (section title -> boolean)
 const collapsedSections = ref({})
 
+// Mobile sidebar state
+const sidebarOpen = ref(false)
+const MOBILE_BREAKPOINT = 768
+
+function toggleSidebar() {
+  sidebarOpen.value = !sidebarOpen.value
+}
+
+function closeSidebar() {
+  sidebarOpen.value = false
+}
+
+// Check if we're on mobile
+function isMobile() {
+  return window.innerWidth < MOBILE_BREAKPOINT
+}
+
+// Close sidebar on resize to desktop
+function handleResize() {
+  if (!isMobile() && sidebarOpen.value) {
+    sidebarOpen.value = false
+  }
+}
+
 /**
  * Load collapsed state from localStorage
  */
@@ -87,13 +111,21 @@ function isSectionExpanded(section) {
   return !collapsedSections.value[section.title]
 }
 
-// Load state on mount
+// Load state on mount + setup resize listener
 onMounted(() => {
   loadCollapsedState()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
 })
 
-// Auto-expand section when navigating to an item in it
+// Auto-expand section when navigating to an item in it + close mobile sidebar
 watch(() => route.path, () => {
+  // Close mobile sidebar on navigation
+  closeSidebar()
+
   for (const section of navSections.value) {
     if (sectionHasActiveItem(section) && collapsedSections.value[section.title]) {
       // Auto-expand but don't save (user can collapse again if they want)
@@ -149,8 +181,15 @@ const showBreadcrumb = computed(() => {
 
 <template>
   <div class="app-layout">
+    <!-- Mobile overlay -->
+    <div
+      class="sidebar-overlay"
+      :class="{ 'sidebar-overlay--visible': sidebarOpen }"
+      @click="closeSidebar"
+    ></div>
+
     <!-- Sidebar -->
-    <aside class="sidebar">
+    <aside class="sidebar" :class="{ 'sidebar--open': sidebarOpen }">
       <div class="sidebar-header">
         <div class="sidebar-header-top">
           <img v-if="app.logo" :src="app.logo" :alt="app.name" class="sidebar-logo" />
@@ -216,6 +255,19 @@ const showBreadcrumb = computed(() => {
 
     <!-- Main content -->
     <main class="main-content">
+      <!-- Mobile header bar -->
+      <div class="mobile-header">
+        <Button
+          icon="pi pi-bars"
+          severity="secondary"
+          text
+          class="hamburger-btn"
+          @click="toggleSidebar"
+          aria-label="Toggle menu"
+        />
+        <span class="mobile-header-title">{{ app.name }}</span>
+      </div>
+
       <!-- Breadcrumb + Navlinks bar -->
       <div v-if="showBreadcrumb" class="layout-nav-bar">
         <Breadcrumb :model="breadcrumbItems" class="layout-breadcrumb">
@@ -562,4 +614,98 @@ const showBreadcrumb = computed(() => {
 .layout-nav-bar :deep(.p-breadcrumb-separator) {
   color: var(--p-surface-400, #94a3b8);
 }
+
+/* ============================================
+   Mobile / Responsive Styles
+   ============================================ */
+
+.mobile-header {
+  display: none;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--p-surface-0, white);
+  border-bottom: 1px solid var(--p-surface-200, #e2e8f0);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.mobile-header-title {
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: var(--p-surface-800, #1e293b);
+}
+
+.hamburger-btn {
+  display: none !important;
+}
+
+/* Sidebar overlay for mobile */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  pointer-events: none;
+}
+
+/* Tablet breakpoint (< 768px) */
+@media (max-width: 767px) {
+  .mobile-header {
+    display: flex;
+  }
+
+  .hamburger-btn {
+    display: flex !important;
+  }
+
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    box-shadow: none;
+    width: min(80vw, 280px);
+  }
+
+  .sidebar.sidebar--open {
+    transform: translateX(0);
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+  }
+
+  .sidebar-overlay {
+    display: block;
+  }
+
+  .sidebar-overlay.sidebar-overlay--visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
+
+  .page-content {
+    padding: 1rem;
+  }
+
+  .layout-nav-bar {
+    padding: 1rem;
+    padding-bottom: 0;
+  }
+}
+
+/* Large tablet breakpoint (768px - 1023px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .sidebar {
+    width: 12rem;
+  }
+
+  .main-content {
+    margin-left: 12rem;
+  }
+}
 </style>

package/src/styles/_breakpoints.scss

@@ -0,0 +1,65 @@
+/**
+ * qdadm - Responsive Breakpoints
+ *
+ * Strategy: Desktop-first (PC > tablet > mobile)
+ *
+ * Usage in components:
+ *   @use 'qdadm/styles/breakpoints' as *;
+ *   .sidebar { @include tablet { width: 60px; } }
+ */
+
+// Breakpoint values
+$bp-desktop-lg: 1400px;  // Large desktop
+$bp-desktop: 1200px;     // Standard desktop
+$bp-tablet-lg: 1024px;   // Large tablet / small laptop
+$bp-tablet: 768px;       // Tablet portrait
+$bp-mobile-lg: 576px;    // Large mobile
+$bp-mobile: 480px;       // Standard mobile
+
+// Sidebar behavior threshold
+$bp-sidebar-collapse: $bp-tablet-lg;  // Sidebar collapses below this
+$bp-sidebar-hidden: $bp-tablet;       // Sidebar becomes drawer below this
+
+// Mixins - Desktop-first (max-width)
+@mixin desktop-lg {
+  @media (max-width: #{$bp-desktop-lg - 1px}) { @content; }
+}
+
+@mixin desktop {
+  @media (max-width: #{$bp-desktop - 1px}) { @content; }
+}
+
+@mixin tablet-lg {
+  @media (max-width: #{$bp-tablet-lg - 1px}) { @content; }
+}
+
+@mixin tablet {
+  @media (max-width: #{$bp-tablet - 1px}) { @content; }
+}
+
+@mixin mobile-lg {
+  @media (max-width: #{$bp-mobile-lg - 1px}) { @content; }
+}
+
+@mixin mobile {
+  @media (max-width: #{$bp-mobile - 1px}) { @content; }
+}
+
+// Utility: hide/show at breakpoints
+@mixin hide-below($bp) {
+  @media (max-width: #{$bp - 1px}) { display: none !important; }
+}
+
+@mixin show-below($bp) {
+  display: none !important;
+  @media (max-width: #{$bp - 1px}) { display: block !important; }
+}
+
+// Sidebar-specific mixins
+@mixin sidebar-collapsed {
+  @media (max-width: #{$bp-sidebar-collapse - 1px}) { @content; }
+}
+
+@mixin sidebar-hidden {
+  @media (max-width: #{$bp-sidebar-hidden - 1px}) { @content; }
+}

package/src/styles/_responsive.scss

@@ -0,0 +1,244 @@
+/**
+ * qdadm - Responsive Layout Styles
+ *
+ * Global responsive rules for layout components.
+ * These complement the scoped styles in Vue components.
+ */
+
+@use 'breakpoints' as *;
+
+// ============================================
+// CSS Variables for responsive behavior
+// ============================================
+
+:root {
+  // Sidebar
+  --qdadm-sidebar-width: 15rem;
+  --qdadm-sidebar-collapsed-width: 4rem;
+  --qdadm-sidebar-transition: 0.25s ease;
+
+  // Content padding
+  --qdadm-content-padding: 1.5rem;
+  --qdadm-content-padding-mobile: 1rem;
+}
+
+// ============================================
+// App Layout Responsive
+// ============================================
+
+.app-layout {
+  // Tablet: reduce sidebar width
+  @include tablet-lg {
+    --qdadm-sidebar-width: 12rem;
+  }
+
+  // Mobile: sidebar becomes overlay
+  @include tablet {
+    --qdadm-sidebar-width: 80vw;
+    max-width: 280px;
+  }
+}
+
+// Sidebar responsive behavior
+.sidebar {
+  transition: transform var(--qdadm-sidebar-transition),
+              width var(--qdadm-sidebar-transition);
+
+  @include tablet {
+    transform: translateX(-100%);
+    position: fixed;
+    z-index: 1000;
+    box-shadow: none;
+
+    &.sidebar--open {
+      transform: translateX(0);
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
+// Main content responsive
+.main-content {
+  transition: margin-left var(--qdadm-sidebar-transition);
+
+  @include tablet {
+    margin-left: 0 !important;
+  }
+}
+
+// Mobile overlay when sidebar open
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  opacity: 0;
+  transition: opacity 0.25s;
+
+  @include tablet {
+    display: block;
+    pointer-events: none;
+
+    &.sidebar-overlay--visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+// Hamburger menu button (hidden on desktop)
+.hamburger-btn {
+  display: none !important;
+
+  @include tablet {
+    display: flex !important;
+  }
+}
+
+// ============================================
+// Page Content Responsive
+// ============================================
+
+.page-content {
+  @include tablet {
+    padding: var(--qdadm-content-padding-mobile);
+  }
+}
+
+// Page header responsive
+.page-header {
+  @include tablet {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start !important;
+  }
+
+  .page-header-actions {
+    @include tablet {
+      width: 100%;
+      justify-content: flex-start;
+    }
+  }
+}
+
+// ============================================
+// DataTable Responsive
+// ============================================
+
+.p-datatable {
+  @include tablet {
+    // Horizontal scroll for table
+    .p-datatable-wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    // Minimum width to prevent squishing
+    .p-datatable-table {
+      min-width: 600px;
+    }
+  }
+
+  @include mobile {
+    .p-datatable-table {
+      min-width: 500px;
+    }
+  }
+}
+
+// ============================================
+// Filter Bar Responsive
+// ============================================
+
+.filter-bar {
+  @include tablet {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+
+    .filter-bar-search {
+      width: 100%;
+      order: -1;
+    }
+
+    .filter-bar-filters {
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .filter-bar-item {
+      min-width: calc(50% - 0.25rem);
+      flex: 1 1 auto;
+    }
+  }
+
+  @include mobile {
+    .filter-bar-item {
+      min-width: 100%;
+    }
+  }
+}
+
+// ============================================
+// Form Layout Responsive
+// ============================================
+
+.form-grid {
+  @include tablet {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+.form-actions {
+  @include mobile {
+    flex-direction: column;
+
+    .p-button {
+      width: 100%;
+    }
+  }
+}
+
+// ============================================
+// Cards Grid Responsive
+// ============================================
+
+.cards-grid {
+  @include tablet {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+// ============================================
+// Utility Classes
+// ============================================
+
+.hide-mobile {
+  @include tablet {
+    display: none !important;
+  }
+}
+
+.hide-desktop {
+  display: none !important;
+  @include tablet {
+    display: block !important;
+  }
+}
+
+.hide-mobile-inline {
+  @include tablet {
+    display: none !important;
+  }
+}
+
+.show-mobile-inline {
+  display: none !important;
+  @include tablet {
+    display: inline !important;
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,19 @@
+/**
+ * qdadm - Styles entry point
+ *
+ * Import this file in your main.js:
+ *   import 'qdadm/styles'
+ */
+
+/* Main styles */
+@use './main.css';
+
+/* Component-specific styles */
+@use './_alerts.css';
+@use './_code.css';
+@use './_dialogs.css';
+@use './_markdown.css';
+@use './_show-pages.css';
+
+/* Responsive styles (must be last for specificity) */
+@use './responsive';

package/src/styles/index.css

@@ -1,16 +0,0 @@
-/**
- * qdadm - Styles entry point
- *
- * Import this file in your main.js:
- *   import 'qdadm/styles'
- */
-
-/* Main styles */
-@import './main.css';
-
-/* Component-specific styles */
-@import './_alerts.css';
-@import './_code.css';
-@import './_dialogs.css';
-@import './_markdown.css';
-@import './_show-pages.css';