@keenmate/pure-admin-core 2.4.0 → 2.5.0

package/snippets/detail-panel.html

@@ -1,138 +1,470 @@
-<!-- =============================================
-     Detail Panel - Inline Split-View Mode
-     ============================================= -->
-
-<!-- Inline split-view: table + side panel -->
-<div class="pa-detail-view">
-    <!-- Left side: table -->
-    <div class="pa-detail-view__main">
-        <table class="pa-table pa-table--hover pa-table--striped">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Email</th>
-                    <th>Role</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr class="is-selected" onclick="openInlinePanel(1)">
-                    <td>John Doe</td>
-                    <td>john@example.com</td>
-                    <td>Admin</td>
-                </tr>
-                <tr onclick="openInlinePanel(2)">
-                    <td>Jane Smith</td>
-                    <td>jane@example.com</td>
-                    <td>Editor</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-
-    <!-- Right side: detail panel -->
-    <div class="pa-detail-view__panel pa-detail-view__panel--open">
-        <div class="pa-detail-panel__content">
-            <div class="pa-detail-panel-resize"></div>
-            <div class="pa-detail-panel__header">
-                <h4 class="pa-detail-panel__title">User Details</h4>
-                <button class="pa-detail-panel__close" onclick="closeInlinePanel()">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="pa-detail-panel__body">
-                <p>Detail content goes here...</p>
-            </div>
-            <div class="pa-detail-panel__footer">
-                <button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
-                <button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<!-- =============================================
-     Detail Panel - Card Overlay Mode
-     ============================================= -->
-
-<!-- Card overlay: panel floats over the table within the card -->
-<div class="pa-detail-view pa-detail-view--overlay">
-    <!-- Backdrop (click to close) -->
-    <div class="pa-detail-view__overlay" onclick="closeCardOverlayPanel()"></div>
-
-    <!-- Table (stays full width) -->
-    <div class="pa-detail-view__main">
-        <table class="pa-table pa-table--hover pa-table--striped">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Email</th>
-                    <th>Role</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr class="is-selected" onclick="openCardOverlayPanel(1)">
-                    <td>John Doe</td>
-                    <td>john@example.com</td>
-                    <td>Admin</td>
-                </tr>
-                <tr onclick="openCardOverlayPanel(2)">
-                    <td>Jane Smith</td>
-                    <td>jane@example.com</td>
-                    <td>Editor</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-
-    <!-- Detail panel (overlays the table) -->
-    <div class="pa-detail-view__panel pa-detail-view__panel--open">
-        <div class="pa-detail-panel__content">
-            <div class="pa-detail-panel-resize"></div>
-            <div class="pa-detail-panel__header">
-                <h4 class="pa-detail-panel__title">User Details</h4>
-                <button class="pa-detail-panel__close" onclick="closeCardOverlayPanel()">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="pa-detail-panel__body">
-                <p>Detail content goes here...</p>
-            </div>
-            <div class="pa-detail-panel__footer">
-                <button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
-                <button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<!-- =============================================
-     Detail Panel - Overlay Mode
-     ============================================= -->
-
-<!-- Trigger button (typically a table row click) -->
-<button class="pa-btn pa-btn--primary" onclick="openOverlayPanel(1)">
-    Open Detail Panel
-</button>
-
-<!-- Overlay panel (fixed position, like profile panel) -->
-<div class="pa-detail-panel--overlay" id="detailPanelOverlay">
-    <div class="pa-detail-panel__overlay" onclick="closeOverlayPanel()"></div>
-    <div class="pa-detail-panel__content">
-        <div class="pa-detail-panel-resize"></div>
-        <div class="pa-detail-panel__header">
-            <h4 class="pa-detail-panel__title">User Details</h4>
-            <button class="pa-detail-panel__close" onclick="closeOverlayPanel()">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-        <div class="pa-detail-panel__body">
-            <p>Detail content goes here...</p>
-        </div>
-        <div class="pa-detail-panel__footer">
-            <button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
-            <button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
-        </div>
-    </div>
-</div>
+<!-- ================================
+     DETAIL PANEL SNIPPETS
+     Pure Admin Visual Framework
+
+     Three display modes, all sharing the same inner __content /
+     __header / __title / __close / __body / __footer structure:
+
+       1. Inline split-view    .pa-detail-view (wraps main + panel)
+       2. Card overlay         .pa-detail-view.pa-detail-view--overlay
+                                (panel floats over the main area, inside
+                                 a card)
+       3. Fixed overlay        .pa-detail-panel--overlay (full-viewport
+                                sibling — same layout as profile panel)
+
+     Width is driven by two CSS custom properties (:root +
+     :where(...) for low specificity), so utility classes on
+     .pa-detail-view__panel override the defaults cleanly.
+     ================================ -->
+
+
+<!-- ================================
+     1) INLINE SPLIT-VIEW MODE
+     Table on the start side, panel on the end. Panel has width: 0
+     when closed, expands to --pa-local-detail-panel-width when --open.
+     ================================ -->
+
+<div class="pa-detail-view">
+    <!-- Main area (table / content; takes the remaining flex space) -->
+    <div class="pa-detail-view__main">
+        <table class="pa-table pa-table--hover pa-table--striped">
+            <thead>
+                <tr><th>Name</th><th>Email</th><th>Role</th></tr>
+            </thead>
+            <tbody>
+                <tr class="is-selected" onclick="openInlinePanel(1)">
+                    <td>John Doe</td><td>john@example.com</td><td>Admin</td>
+                </tr>
+                <tr onclick="openInlinePanel(2)">
+                    <td>Jane Smith</td><td>jane@example.com</td><td>Editor</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Detail panel (inline-end side). --open expands it to the configured width. -->
+    <div class="pa-detail-view__panel pa-detail-view__panel--open" id="inlinePanel">
+        <div class="pa-detail-panel__content">
+            <div class="pa-detail-panel-resize"></div>
+            <div class="pa-detail-panel__header">
+                <h4 class="pa-detail-panel__title">User Details</h4>
+                <button class="pa-detail-panel__close" onclick="closeInlinePanel()" aria-label="Close">
+                    <i class="fa-solid fa-xmark"></i>
+                </button>
+            </div>
+            <div class="pa-detail-panel__body">
+                <p>Detail content for the selected row.</p>
+            </div>
+            <div class="pa-detail-panel__footer">
+                <button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
+                <button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- ================================
+     2) CARD OVERLAY MODE
+     Add --overlay on the root. The panel uses position: absolute and
+     sits over the main area; the backdrop (__view__overlay) dims the
+     whole card when --visible.
+     Scope stays within the card / container (z-index 3500/3501 — below
+     the framework header at 4000).
+     ================================ -->
+
+<div class="pa-detail-view pa-detail-view--overlay">
+    <!-- Backdrop — click to close -->
+    <div class="pa-detail-view__overlay pa-detail-view__overlay--visible"
+         onclick="closeCardOverlayPanel()"></div>
+
+    <div class="pa-detail-view__main">
+        <table class="pa-table pa-table--hover">
+            <thead>
+                <tr><th>Name</th><th>Role</th></tr>
+            </thead>
+            <tbody>
+                <tr class="is-selected" onclick="openCardOverlayPanel(1)">
+                    <td>John Doe</td><td>Admin</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="pa-detail-view__panel pa-detail-view__panel--open">
+        <div class="pa-detail-panel__content">
+            <div class="pa-detail-panel-resize"></div>
+            <div class="pa-detail-panel__header">
+                <h4 class="pa-detail-panel__title">User Details</h4>
+                <button class="pa-detail-panel__close" onclick="closeCardOverlayPanel()" aria-label="Close">
+                    <i class="fa-solid fa-xmark"></i>
+                </button>
+            </div>
+            <div class="pa-detail-panel__body">
+                <p>Overlays the card's main area. The backdrop dims the full card.</p>
+            </div>
+            <div class="pa-detail-panel__footer">
+                <button class="pa-btn pa-btn--primary pa-btn--sm">Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- ================================
+     3) FIXED OVERLAY MODE
+     Behaves like the profile panel — fixed to the viewport, slides in
+     from the inline-end side (automatic in RTL). Separate from the
+     inline split-view; does NOT require .pa-detail-view wrapping.
+     ================================ -->
+
+<button class="pa-btn pa-btn--primary" onclick="openOverlayPanel(1)">
+    Open Detail Panel
+</button>
+
+<div class="pa-detail-panel--overlay pa-detail-panel--open" id="detailPanelOverlay">
+    <div class="pa-detail-panel__overlay" onclick="closeOverlayPanel()"></div>
+    <div class="pa-detail-panel__content">
+        <div class="pa-detail-panel__header">
+            <h4 class="pa-detail-panel__title">User Details</h4>
+            <button class="pa-detail-panel__close" onclick="closeOverlayPanel()" aria-label="Close">
+                <i class="fa-solid fa-xmark"></i>
+            </button>
+        </div>
+        <div class="pa-detail-panel__body">
+            <p>Fixed-viewport overlay. Toggle .pa-detail-panel--open to show/hide.</p>
+        </div>
+        <div class="pa-detail-panel__footer">
+            <button class="pa-btn pa-btn--primary pa-btn--sm">Save</button>
+        </div>
+    </div>
+</div>
+
+
+<!-- ================================
+     PANEL WITH TABS
+     Use .pa-detail-panel__tabs between __header and __body to host the
+     shared .pa-tabs component (see tabs.html). The detail-panel SCSS
+     lightly themes __tabs__item to match the panel chrome.
+     ================================ -->
+
+<div class="pa-detail-panel__content">
+    <div class="pa-detail-panel__header">
+        <h4 class="pa-detail-panel__title">User Details</h4>
+        <button class="pa-detail-panel__close" aria-label="Close">
+            <i class="fa-solid fa-xmark"></i>
+        </button>
+    </div>
+
+    <div class="pa-detail-panel__tabs">
+        <div class="pa-tabs pa-tabs--full">
+            <button class="pa-tabs__item pa-tabs__item--active" data-detail-tab="profile">
+                <i class="fa-solid fa-user"></i>
+                <span>Profile</span>
+            </button>
+            <button class="pa-tabs__item" data-detail-tab="activity">
+                <i class="fa-solid fa-clock-rotate-left"></i>
+                <span>Activity</span>
+            </button>
+        </div>
+    </div>
+
+    <div class="pa-detail-panel__body">
+        <div class="pa-tabs__panel pa-tabs__panel--active" data-detail-panel="profile">
+            <p>Profile content…</p>
+        </div>
+        <div class="pa-tabs__panel" data-detail-panel="activity">
+            <p>Activity feed…</p>
+        </div>
+    </div>
+</div>
+
+
+<!-- ================================
+     BORDERED CONTENT MODIFIER
+     Adds top + bottom borders on the content wrapper — useful when
+     the panel sits flush against a table without its own border.
+     ================================ -->
+
+<div class="pa-detail-view__panel pa-detail-view__panel--open">
+    <div class="pa-detail-panel__content pa-detail-panel__content--bordered">
+        <!-- header / body / footer as usual -->
+    </div>
+</div>
+
+
+<!-- ================================
+     WIDTH CONTROL
+     Two CSS custom properties, applied via a :where() rule on
+     .pa-detail-view__panel so utility classes win without !important.
+
+       :root {
+         --pa-local-detail-panel-width:     $detail-panel-width;
+         --pa-local-detail-panel-max-width: $detail-panel-max-width;
+       }
+       :where(.pa-detail-view__panel) {
+         width:     var(--pa-local-detail-panel-width);
+         max-width: var(--pa-local-detail-panel-max-width);
+       }
+
+     Override strategies (ordered by scope):
+       1. Utility class on the panel   .wr-{n}, .minwr-{n}, .maxwr-{n}
+       2. Inline style                 style="width: 32rem"
+       3. Root CSS variable            change the default app-wide
+     ================================ -->
+
+<!-- Fixed-width panel: 32rem (320px). Utility class wins because
+     :where() has 0 specificity. -->
+<div class="pa-detail-view__panel pa-detail-view__panel--open wr-32">
+    <!-- … -->
+</div>
+
+<!-- Clamp between floor and ceiling (good when combined with the
+     resize handle — the drag JS writes to --pa-local-detail-panel-width,
+     and this clamps how far it can go). -->
+<div class="pa-detail-view__panel pa-detail-view__panel--open minwr-24 maxwr-60">
+    <!-- … -->
+</div>
+
+<!-- App-wide default override -->
+<style>
+    :root {
+        --pa-local-detail-panel-width: 40rem;
+        --pa-local-detail-panel-max-width: 70rem;
+    }
+</style>
+
+
+<!-- ================================
+     MOBILE OVERLAY VARIANT
+     Inline split-view auto-hides the panel below $mobile-breakpoint
+     (display: none). To keep the detail pane reachable on phones,
+     render the SAME content inside a .pa-detail-panel--mobile-overlay
+     container too — it's display: none on desktop, switches on for
+     mobile only, and behaves like the fixed overlay (slides in from
+     inline-end, full-height).
+
+     Typical pattern: render both markup blocks; JS toggles --open on
+     whichever one is currently visible.
+     ================================ -->
+
+<div class="pa-detail-panel--mobile-overlay" id="detailPanelMobile">
+    <div class="pa-detail-panel__overlay" onclick="closeMobileOverlay()"></div>
+    <div class="pa-detail-panel__content">
+        <div class="pa-detail-panel__header">
+            <h4 class="pa-detail-panel__title">User Details</h4>
+            <button class="pa-detail-panel__close" onclick="closeMobileOverlay()" aria-label="Close">
+                <i class="fa-solid fa-xmark"></i>
+            </button>
+        </div>
+        <div class="pa-detail-panel__body">
+            <p>Same markup as the overlay panel — visible only at mobile widths.</p>
+        </div>
+    </div>
+</div>
+
+
+<!-- ================================
+     JAVASCRIPT — minimal toggle contracts
+     All three modes boil down to toggling a class. Real apps will
+     also populate the panel body with data on open.
+     ================================ -->
+
+<script>
+// Mode 1: inline split-view — flip --open on the panel element
+function openInlinePanel(itemId) {
+    document.getElementById('inlinePanel').classList.add('pa-detail-view__panel--open');
+    // …populate content based on itemId
+}
+function closeInlinePanel() {
+    document.getElementById('inlinePanel').classList.remove('pa-detail-view__panel--open');
+}
+
+// Mode 2: card overlay — flip --open on the panel AND --visible on the backdrop
+function openCardOverlayPanel(itemId) {
+    const view = document.querySelector('.pa-detail-view--overlay');
+    view.querySelector('.pa-detail-view__panel').classList.add('pa-detail-view__panel--open');
+    view.querySelector('.pa-detail-view__overlay').classList.add('pa-detail-view__overlay--visible');
+}
+function closeCardOverlayPanel() {
+    const view = document.querySelector('.pa-detail-view--overlay');
+    view.querySelector('.pa-detail-view__panel').classList.remove('pa-detail-view__panel--open');
+    view.querySelector('.pa-detail-view__overlay').classList.remove('pa-detail-view__overlay--visible');
+}
+
+// Mode 3: fixed overlay — flip --open on the overlay root
+function openOverlayPanel(itemId) {
+    document.getElementById('detailPanelOverlay').classList.add('pa-detail-panel--open');
+}
+function closeOverlayPanel() {
+    document.getElementById('detailPanelOverlay').classList.remove('pa-detail-panel--open');
+}
+
+function closeMobileOverlay() {
+    document.getElementById('detailPanelMobile').classList.remove('pa-detail-panel--open');
+}
+
+// Resize handle — wire up on page load if the panel is resizable.
+// The contract: write to --pa-local-detail-panel-width at :root (or on
+// the panel) during drag, add .pa-detail-panel-resizing on <body> to
+// disable text selection, remove on mouseup.
+(function setupDetailPanelResize() {
+    const handle = document.querySelector('.pa-detail-panel-resize');
+    if (!handle) return;
+
+    let startX = 0, startWidth = 0;
+    const panel = handle.closest('.pa-detail-view__panel') || handle.closest('.pa-detail-panel__content');
+
+    handle.addEventListener('mousedown', (e) => {
+        startX = e.clientX;
+        startWidth = panel.getBoundingClientRect().width;
+        document.body.classList.add('pa-detail-panel-resizing');
+        handle.classList.add('pa-detail-panel-resize--active');
+
+        const onMove = (ev) => {
+            // Drag toward inline-start = widen panel on inline-end; invert in RTL.
+            const dir = document.documentElement.dir === 'rtl' ? +1 : -1;
+            const next = Math.max(200, startWidth + dir * (ev.clientX - startX));
+            document.documentElement.style.setProperty('--pa-local-detail-panel-width', next + 'px');
+        };
+        const onUp = () => {
+            document.body.classList.remove('pa-detail-panel-resizing');
+            handle.classList.remove('pa-detail-panel-resize--active');
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    });
+})();
+</script>
+
+
+<!-- ================================
+     COMPONENT REFERENCE
+     ================================ -->
+
+<!--
+THREE DISPLAY MODES:
+
+1. INLINE SPLIT-VIEW  (.pa-detail-view)
+   - .pa-detail-view                       flex row: main + panel
+   - .pa-detail-view__main                 flex: 1; overflow: auto
+   - .pa-detail-view__panel                width: 0 when closed
+   - .pa-detail-view__panel--open          expands to width + shows border-inline-start
+
+   Below $mobile-breakpoint (768px), .pa-detail-view__panel hides
+   with display: none. Use --mobile-overlay to keep the panel
+   reachable on phones (see mode 4).
+
+2. CARD OVERLAY  (.pa-detail-view--overlay)
+   - Add --overlay on the root; panel uses position: absolute.
+   - .pa-detail-view__overlay              backdrop inside the card;
+   - .pa-detail-view__overlay--visible     fade-in trigger
+   - z-index 3500/3501 — below the framework header (4000),
+     so the panel stays inside its card even when the page scrolls.
+
+3. FIXED OVERLAY  (.pa-detail-panel--overlay)
+   - position: fixed; covers the viewport.
+   - .pa-detail-panel--overlay             root (hidden by default)
+   - .pa-detail-panel--open                visible state
+   - .pa-detail-panel__overlay             backdrop (child element)
+   - Slides content in from inline-end; [dir="rtl"] flips to
+     inline-start automatically.
+
+4. MOBILE OVERLAY  (.pa-detail-panel--mobile-overlay)
+   - Like mode 3, but display: none above $mobile-breakpoint.
+   - Pairs with mode 1 for responsive apps: inline panel on desktop,
+     mobile overlay on phones. Render both blocks; toggle --open on
+     whichever is currently visible.
+
+
+SHARED PANEL STRUCTURE (inside __panel / inside --overlay root):
+
+- .pa-detail-panel__content                flex column (header + body + footer)
+- .pa-detail-panel__content--bordered      adds top + bottom borders
+- .pa-detail-panel__header                 flex row, flex-shrink: 0
+- .pa-detail-panel__title                  <h4>-weight; ellipsis on overflow
+- .pa-detail-panel__close                  32×32 close button
+- .pa-detail-panel__tabs                   optional tab strip between header
+                                           and body (hosts .pa-tabs — see
+                                           tabs.html for full tab docs)
+- .pa-detail-panel__body                   flex: 1; overflow-y: auto;
+                                           overscroll-behavior: contain
+- .pa-detail-panel__footer                 flex row, flex-shrink: 0
+
+
+RESIZE HANDLE:
+
+- .pa-detail-panel-resize                  absolute handle on the
+                                           inline-start edge (RTL-aware).
+                                           Cursor: col-resize.
+- .pa-detail-panel-resize--active          Add during drag (visual feedback).
+- body.pa-detail-panel-resizing            Added during drag to disable
+                                           text selection + force
+                                           col-resize cursor.
+
+Drag contract: write to --pa-local-detail-panel-width at :root or on
+the panel element while dragging; remove the body class on mouseup.
+
+
+WIDTH CONTROL (CSS variables — override without specificity battles):
+
+  --pa-local-detail-panel-width      runtime width (rewrite on resize)
+  --pa-local-detail-panel-max-width  upper bound
+
+Applied via :where(.pa-detail-view__panel) { width / max-width } so
+.wr-{n} / .minwr-{n} / .maxwr-{n} utility classes beat the default.
+
+Override paths:
+  1. .wr-* / .minwr-* / .maxwr-* on the panel
+  2. inline style="width: …"
+  3. :root redefinition for app-wide changes
+
+
+TABLE ROW SELECTION:
+
+- .pa-table tbody tr.is-selected           SCSS colours the row with
+                                           --pa-detail-panel-selected-bg
+                                           and keeps the colour on hover
+                                           so "which row am I viewing?"
+                                           stays obvious when the detail
+                                           panel is open.
+
+
+STRUCTURE PATTERNS:
+
+Inline split view:
+<div class="pa-detail-view">
+  <div class="pa-detail-view__main">…</div>
+  <div class="pa-detail-view__panel pa-detail-view__panel--open">
+    <div class="pa-detail-panel__content">
+      <div class="pa-detail-panel__header">…</div>
+      <div class="pa-detail-panel__body">…</div>
+      <div class="pa-detail-panel__footer">…</div>
+    </div>
+  </div>
+</div>
+
+Fixed overlay (sibling of the layout):
+<div class="pa-detail-panel--overlay" id="p">
+  <div class="pa-detail-panel__overlay"></div>
+  <div class="pa-detail-panel__content">…</div>
+</div>
+// open:  document.getElementById('p').classList.add('pa-detail-panel--open');
+// close: document.getElementById('p').classList.remove('pa-detail-panel--open');
+
+Panel with tabs:
+<div class="pa-detail-panel__content">
+  <div class="pa-detail-panel__header">…</div>
+  <div class="pa-detail-panel__tabs">
+    <div class="pa-tabs pa-tabs--full">…</div>
+  </div>
+  <div class="pa-detail-panel__body">
+    <div class="pa-tabs__panel pa-tabs__panel--active">…</div>
+  </div>
+</div>
+
+Width override via utility:
+<div class="pa-detail-view__panel pa-detail-view__panel--open wr-32">…</div>
+-->