qdadm 0.58.0 → 0.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/components/layout/AppLayout.vue

@@ -603,12 +603,12 @@ const showBreadcrumb = computed(() => {
   display: flex;
   flex-direction: column;
   transition: margin-left var(--fad-transition-slow);
+  overflow-y: auto;
 }
 
 .page-content {
   flex: 1;
   padding: 1rem;
-  overflow-y: auto;
 }
 
 /* Dark mode support */

package/src/components/lists/ListPage.vue

@@ -65,7 +65,10 @@ const props = defineProps({
 
   // Row Actions
   getActions: { type: Function, default: null },
-  actionsWidth: { type: String, default: '120px' }
+  actionsWidth: { type: String, default: '120px' },
+
+  // Mobile row tap
+  hasRowTapAction: { type: Boolean, default: false }
 })
 
 function resolveLabel(label, _action) {
@@ -113,7 +116,8 @@ const emit = defineEmits([
   'update:searchQuery',
   'update:filterValues',
   'page',
-  'sort'
+  'sort',
+  'row-click'
 ])
 
 function clearAllFilters() {
@@ -202,6 +206,11 @@ function onPage(event) {
 function onSort(event) {
   emit('sort', event)
 }
+
+function onRowClick(event) {
+  // event.data = row data, event.originalEvent = MouseEvent
+  emit('row-click', event.data, event.originalEvent)
+}
 </script>
 
 <template>
@@ -301,6 +310,8 @@ function onSort(event) {
         @update:selection="onSelectionChange"
         @page="onPage"
         @sort="onSort"
+        @row-click="onRowClick"
+        :class="{ 'datatable-row-clickable': hasRowTapAction }"
         stripedRows
         removableSort
       >

package/src/composables/useListPage.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, onMounted, inject, provide } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, inject, provide } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useConfirm } from 'primevue/useconfirm'
 import { useHooks } from './useHooks.js'
@@ -140,6 +140,9 @@ export function useListPage(config = {}) {
   const route = useRoute()
   const confirm = useConfirm()
 
+  // Mobile detection (viewport width < 768px)
+  const isMobile = ref(window.innerWidth < 768)
+
   // Get EntityManager via orchestrator
   const orchestrator = inject('qdadmOrchestrator')
 
@@ -1274,6 +1277,58 @@ export function useListPage(config = {}) {
     router.push({ name: `${routePrefix}-show`, params: { [manager.idField]: item[resolvedDataKey] } })
   }
 
+  // ============ MOBILE ROW TAP ============
+  /**
+   * Get primary action for row tap (based on declared routes, not permissions)
+   * Priority: edit > show
+   * @returns {'edit'|'show'|null}
+   */
+  function getPrimaryRowAction() {
+    const editRouteName = `${routePrefix}-edit`
+    const showRouteName = `${routePrefix}-show`
+
+    if (router.hasRoute(editRouteName)) {
+      return 'edit'
+    }
+    if (router.hasRoute(showRouteName)) {
+      return 'show'
+    }
+    return null
+  }
+
+  /**
+   * Handle row click for mobile navigation
+   * Only triggers on mobile, ignores clicks on interactive elements
+   * @param {object} item - Row data
+   * @param {Event} originalEvent - Original mouse/touch event
+   */
+  function onRowClick(item, originalEvent) {
+    // Ignore if not mobile
+    if (!isMobile.value) return
+
+    // Ignore if in selection mode
+    if (hasBulkActions.value && selected.value.length > 0) return
+
+    // Ignore if click was on interactive element
+    const target = originalEvent?.target
+    if (target?.closest('button, a, .p-button, .table-actions, input, .p-checkbox')) {
+      return
+    }
+
+    // Execute primary action
+    const action = getPrimaryRowAction()
+    if (action === 'edit') {
+      goToEdit(item)
+    } else if (action === 'show') {
+      goToShow(item)
+    }
+  }
+
+  /**
+   * Whether row tap navigation is available (mobile + has edit/show route)
+   */
+  const hasRowTapAction = computed(() => isMobile.value && getPrimaryRowAction() !== null)
+
   // ============ DELETE ============
   async function deleteItem(item, labelField = 'name') {
     try {
@@ -1561,7 +1616,15 @@ export function useListPage(config = {}) {
   // Initialize from registry immediately (sync)
   initFromRegistry()
 
+  // Mobile detection resize handler
+  function handleResize() {
+    isMobile.value = window.innerWidth < 768
+  }
+
   onMounted(async () => {
+    // Listen for viewport changes
+    window.addEventListener('resize', handleResize)
+
     // Restore filters from URL/session after registry init
     restoreFilters()
 
@@ -1581,6 +1644,10 @@ export function useListPage(config = {}) {
     }
   })
 
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
+
   // ============ UTILITIES ============
   function formatDate(dateStr, options = {}) {
     if (!dateStr) return '-'
@@ -1699,7 +1766,10 @@ export function useListPage(config = {}) {
     filterValues: filterValues.value,
 
     // Row actions
-    getActions
+    getActions,
+
+    // Mobile row tap
+    hasRowTapAction: hasRowTapAction.value
   }))
 
   /**
@@ -1711,7 +1781,8 @@ export function useListPage(config = {}) {
     'update:searchQuery': (value) => { searchQuery.value = value },
     'update:filterValues': updateFilters,
     'page': onPage,
-    'sort': onSort
+    'sort': onSort,
+    'row-click': onRowClick
   }
 
   return {
@@ -1807,6 +1878,12 @@ export function useListPage(config = {}) {
     goToEdit,
     goToShow,
 
+    // Mobile row tap
+    isMobile,
+    hasRowTapAction,
+    getPrimaryRowAction,
+    onRowClick,
+
     // Delete
     deleteItem,
     confirmDelete,

package/src/security/pages/RoleList.vue

@@ -5,9 +5,8 @@
 
 import { useListPage, ListPage, useOrchestrator } from '../../index.js'
 import Column from 'primevue/column'
-import Tag from 'primevue/tag'
-import Chip from 'primevue/chip'
 import Message from 'primevue/message'
+import Chip from 'primevue/chip'
 
 // ============ LIST BUILDER ============
 const list = useListPage({ entity: 'roles' })
@@ -50,7 +49,7 @@ const canPersist = manager?.canPersist ?? false
       <Column field="name" header="Role" sortable style="width: 25%">
         <template #body="{ data }">
           <div>
-            <code class="role-name">{{ data.name }}</code>
+            <span class="p-role-label">{{ data.name }}</span>
             <div v-if="data.label && data.label !== data.name" class="text-sm text-color-secondary mt-1">
               {{ data.label }}
             </div>
@@ -60,13 +59,12 @@ const canPersist = manager?.canPersist ?? false
 
       <Column header="Inherits" style="width: 20%">
         <template #body="{ data }">
-          <div v-if="data.inherits?.length" class="flex flex-wrap gap-1">
-            <Tag
+          <div v-if="data.inherits?.length" class="p-role-labels">
+            <span
               v-for="parent in data.inherits"
               :key="parent"
-              :value="parent"
-              severity="secondary"
-            />
+              class="p-role-label"
+            >{{ parent }}</span>
           </div>
           <span v-else class="text-color-secondary">-</span>
         </template>
@@ -74,17 +72,16 @@ const canPersist = manager?.canPersist ?? false
 
       <Column header="Permissions" style="width: 40%">
         <template #body="{ data }">
-          <div v-if="data.permissions?.length" class="flex flex-wrap gap-1">
+          <div v-if="data.permissions?.length" class="chips-container">
             <Chip
               v-for="perm in data.permissions.slice(0, 5)"
               :key="perm"
               :label="perm"
-              class="text-xs"
             />
             <Chip
               v-if="data.permissions.length > 5"
-              :label="`+${data.permissions.length - 5} more`"
-              class="text-xs"
+              :label="`+${data.permissions.length - 5}`"
+              class="chip-more"
             />
           </div>
           <span v-else class="text-color-secondary">No permissions</span>
@@ -95,12 +92,13 @@ const canPersist = manager?.canPersist ?? false
 </template>
 
 <style scoped>
-.role-name {
-  padding: 0.2rem 0.4rem;
-  background: var(--p-surface-100);
-  border-radius: 4px;
-  font-size: 0.875rem;
-  color: var(--p-primary-color);
-  font-weight: 500;
+.chips-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.chip-more {
+  border-style: dashed;
 }
 </style>

package/src/styles/_buttons.scss

@@ -277,7 +277,7 @@
   background: transparent !important;
   border: 1px solid var(--p-primary-500) !important;
   color: var(--p-primary-500) !important;
-  font-weight: $font-weight-medium;
+  font-weight: normal !important;
   white-space: nowrap;
 }
 

package/src/styles/_lists.scss

@@ -156,3 +156,70 @@
     font-size: $font-size-xs;
   }
 }
+
+// =============================================================================
+// Role & Permission Labels
+// =============================================================================
+
+.p-role-label,
+.p-permission-label {
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  font-size: $font-size-xs;
+  font-weight: normal !important;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--p-tag-border-radius, 6px);
+  white-space: nowrap;
+
+  &--pill {
+    border-radius: 999px;
+  }
+
+  &--more {
+    border-style: dashed;
+  }
+}
+
+.p-role-label {
+  border: 1px solid var(--p-blue-500);
+  color: var(--p-blue-600);
+}
+
+.p-permission-label {
+  border: 1px solid var(--p-surface-400);
+  color: var(--p-surface-600);
+}
+
+.p-role-labels,
+.p-permission-labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-xs;
+}
+
+// =============================================================================
+// Chip Override (thin border style)
+// =============================================================================
+
+.p-chip {
+  background: none !important;
+  border: 1px solid var(--p-surface-300) !important;
+  color: var(--p-surface-600) !important;
+  font-size: $font-size-xs !important;
+  padding: 0.2rem 0.6rem !important;
+}
+
+// =============================================================================
+// Mobile Row Tap
+// =============================================================================
+
+.datatable-row-clickable {
+  .p-datatable-tbody > tr {
+    cursor: pointer;
+
+    &:active {
+      background: var(--p-primary-50) !important;
+    }
+  }
+}

package/src/styles/_main.scss

@@ -56,7 +56,6 @@ textarea::placeholder,
 .page-content {
   flex: 1;
   padding: $space-lg;
-  overflow-y: auto;
 }
 
 // =============================================================================