@keenmate/pure-admin-core 2.3.6 → 2.5.0

package/snippets/notifications.html

@@ -0,0 +1,285 @@
+<!-- ================================
+     NOTIFICATIONS
+     Two pieces under one BEM block:
+
+       1. Notification bell + dropdown panel (lives in the navbar)
+       2. Full-page notification list (--page modifier on the list)
+
+     Source: core-components/_notifications.scss
+
+     Same z-index as the profile panel ($z-index-profile-panel ≈ 5000),
+     so the panel overlays normal content but sits below modal dialogs.
+     ================================ -->
+
+
+<!-- ================================
+     1. BELL + DROPDOWN PANEL
+     This is the canonical "bell in the top bar" pattern. The wrapper
+     (.pa-notifications) is the positioning anchor; the button has an
+     icon + a small red badge counter; the panel toggles via the
+     `.is-open` state class.
+
+     Toggle visibility from JS — there's no hover/focus auto-open
+     because the button + panel pair is too easy to accidentally
+     trigger by mouse-over.
+     ================================ -->
+
+<div class="pa-notifications">
+
+  <button class="pa-notifications__btn" onclick="toggleNotifications()" aria-label="Notifications">
+    <span class="pa-notifications__icon">🔔</span>
+    <span class="pa-notifications__badge">3</span>
+  </button>
+
+  <div class="pa-notifications__panel" id="notificationsPanel">
+
+    <div class="pa-notifications__header">
+      <h3>Notifications</h3>
+      <button class="pa-notifications__mark-read" onclick="markAllRead()">Mark all as read</button>
+    </div>
+
+    <ul class="pa-notifications__list">
+
+      <li class="pa-notifications__item pa-notifications__item--unread">
+        <div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--primary">📝</div>
+        <div class="pa-notifications__content">
+          <h4>New task assigned</h4>
+          <p>Review the Q4 report by end of week</p>
+          <span class="pa-notifications__time">2 minutes ago</span>
+        </div>
+      </li>
+
+      <li class="pa-notifications__item pa-notifications__item--unread">
+        <div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--success">✓</div>
+        <div class="pa-notifications__content">
+          <h4>Build completed</h4>
+          <p>Production deployment finished successfully</p>
+          <span class="pa-notifications__time">15 minutes ago</span>
+        </div>
+      </li>
+
+      <li class="pa-notifications__item pa-notifications__item--unread">
+        <div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--warning">⚠️</div>
+        <div class="pa-notifications__content">
+          <h4>Server maintenance</h4>
+          <p>Scheduled downtime tonight at 11 PM</p>
+          <span class="pa-notifications__time">1 hour ago</span>
+        </div>
+      </li>
+
+      <!-- Read item — drops the --unread modifier -->
+      <li class="pa-notifications__item">
+        <div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--secondary">💬</div>
+        <div class="pa-notifications__content">
+          <h4>New comment</h4>
+          <p>Sarah replied to your comment on Issue #432</p>
+          <span class="pa-notifications__time">3 hours ago</span>
+        </div>
+      </li>
+
+    </ul>
+
+    <div class="pa-notifications__footer">
+      <a href="/notifications">View all notifications</a>
+    </div>
+
+  </div>
+</div>
+
+<script>
+function toggleNotifications() {
+  document.getElementById('notificationsPanel').classList.toggle('is-open');
+}
+function markAllRead() {
+  document.querySelectorAll('.pa-notifications__item--unread')
+    .forEach(el => el.classList.remove('pa-notifications__item--unread'));
+  // Reset the bell badge counter or hide it entirely
+  const badge = document.querySelector('.pa-notifications__badge');
+  if (badge) badge.style.display = 'none';
+}
+
+// Close on outside click (typical pattern; not provided by SCSS):
+document.addEventListener('click', (e) => {
+  const wrap = document.querySelector('.pa-notifications');
+  if (!wrap.contains(e.target)) {
+    document.getElementById('notificationsPanel').classList.remove('is-open');
+  }
+});
+</script>
+
+
+<!-- ================================
+     ICON-WRAPPER COLOUR VARIANTS
+     Five colours. Note: there's no --info variant on the icon
+     wrapper — defaults to the accent colour if you omit the
+     modifier entirely. For an info-coloured slot, fall back to
+     the default (no modifier).
+     ================================ -->
+
+<div class="pa-notifications__icon-wrapper">                                              📌</div>
+<div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--primary">      📌</div>
+<div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--success">      📌</div>
+<div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--warning">      📌</div>
+<div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--danger">       📌</div>
+<div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--secondary">    📌</div>
+
+
+<!-- ================================
+     2. PAGE VIEW (--page list modifier)
+     A full-page notification list. Same building blocks; the list
+     gets a --page modifier that scales padding/icon/font up and
+     drops the max-height + scrolling so the list flows with the
+     page.
+
+     Items support an optional .pa-notifications__actions slot that
+     hover-reveals action buttons on desktop, and is always visible
+     on mobile (wrapping to a new row).
+
+     A leading .pa-checkbox is a typical addition for bulk actions.
+     ================================ -->
+
+<div class="pa-card">
+  <div class="pa-card__header">
+    <h3>All Notifications</h3>
+  </div>
+  <div class="pa-card__body p-0">
+    <ul class="pa-notifications__list pa-notifications__list--page">
+
+      <li class="pa-notifications__item pa-notifications__item--unread">
+        <label class="pa-checkbox">
+          <input type="checkbox">
+          <span class="pa-checkbox__box"></span>
+        </label>
+        <div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--primary">👤</div>
+        <div class="pa-notifications__content">
+          <h4>New user registration</h4>
+          <p>John Doe has registered a new account and is awaiting approval.</p>
+          <span class="pa-notifications__time">2 minutes ago</span>
+        </div>
+        <div class="pa-notifications__actions">
+          <button class="pa-btn pa-btn--ghost pa-btn--sm" title="Mark as read">✓</button>
+          <button class="pa-btn pa-btn--ghost pa-btn--sm" title="Delete">✕</button>
+        </div>
+      </li>
+
+      <li class="pa-notifications__item">
+        <label class="pa-checkbox">
+          <input type="checkbox">
+          <span class="pa-checkbox__box"></span>
+        </label>
+        <div class="pa-notifications__icon-wrapper pa-notifications__icon-wrapper--warning">⚠️</div>
+        <div class="pa-notifications__content">
+          <h4>High CPU usage</h4>
+          <p>Server CPU usage has exceeded 85%. Consider scaling resources.</p>
+          <span class="pa-notifications__time">15 minutes ago</span>
+        </div>
+        <div class="pa-notifications__actions">
+          <button class="pa-btn pa-btn--ghost pa-btn--sm" title="Mark as read">✓</button>
+          <button class="pa-btn pa-btn--ghost pa-btn--sm" title="Delete">✕</button>
+        </div>
+      </li>
+
+    </ul>
+  </div>
+</div>
+
+
+<!-- ================================
+     COMPONENT REFERENCE
+     ================================ -->
+
+<!--
+SUB-ELEMENTS:
+
+  Bell button + panel anchor
+    .pa-notifications              Wrapper (positioning anchor for
+                                    the absolutely-positioned panel).
+    .pa-notifications__btn         Round bell button (no border).
+    .pa-notifications__icon        The bell glyph itself.
+    .pa-notifications__badge       Red counter pill, top-end of btn.
+
+  Dropdown panel
+    .pa-notifications__panel       Floating panel. display:none until
+                                    you add `.is-open`. Uses
+                                    z-index-profile-panel (= 5000),
+                                    same as the profile panel.
+    .pa-notifications__header      Header row inside the panel.
+    .pa-notifications__mark-read   Right-aligned text button in header.
+    .pa-notifications__list        <ul> wrapping items.
+    .pa-notifications__item        <li>; flex row with icon + content.
+    .pa-notifications__icon-wrapper  Round icon tile on the inline-start.
+    .pa-notifications__content     Title (h4) + body (p) + time.
+    .pa-notifications__time        Small muted timestamp.
+    .pa-notifications__footer      Centered link row at the bottom.
+
+ITEM STATE:
+  --unread      Lighter accent-tinted background. Hover deepens it.
+  (no class)    Read; default background, accent-tint on hover only.
+
+ICON-WRAPPER COLOURS:
+  (no modifier)        accent (--pa-accent)
+  --primary
+  --success
+  --warning
+  --danger
+  --secondary
+  Note: there is NO --info variant; use the default (no modifier) for
+  the accent slot.
+
+PAGE-VIEW MODIFIER:
+  .pa-notifications__list--page
+    - Removes the panel max-height + overflow.
+    - Bigger padding, larger icon (4rem vs 3.2rem), larger text.
+    - Pairs with .pa-notifications__actions inside each item:
+        opacity: 0; reveals on .pa-notifications__item:hover
+        on mobile: opacity: 1 always, wraps to a new row with a
+        top divider.
+
+PANEL OPEN/CLOSE:
+  No SCSS animation — `display: none` ↔ `display: flex` via .is-open.
+  Three things you'll wire up yourself:
+    1. Click the bell  → toggle .is-open on .pa-notifications__panel
+    2. Click outside   → remove .is-open
+    3. Mark all read   → strip --unread from items + zero/hide badge
+
+  Common alternative: replace .is-open toggle with the `hidden`
+  attribute on the panel — works as long as you also add
+  `&[hidden] { display: none !important; }` somewhere, since the
+  base rule already forces `display: none`.
+
+RESPONSIVE BEHAVIOUR (panel only, ≤ $mobile-breakpoint):
+  Width fills the viewport (minus 3.2rem) up to a 35.2rem cap.
+  Aligned to the inline-end edge with -$spacing-base offset.
+  Page-view items: actions always visible, wrapping to a new row
+  with a top border separator.
+
+STRUCTURE PATTERNS:
+
+  Bell + dropdown (the navbar pattern):
+    <div class="pa-notifications">
+      <button class="pa-notifications__btn">
+        <span class="pa-notifications__icon">🔔</span>
+        <span class="pa-notifications__badge">3</span>
+      </button>
+      <div class="pa-notifications__panel">
+        <div class="pa-notifications__header">…</div>
+        <ul class="pa-notifications__list">
+          <li class="pa-notifications__item pa-notifications__item--unread">
+            <div class="pa-notifications__icon-wrapper …">…</div>
+            <div class="pa-notifications__content">…</div>
+          </li>
+        </ul>
+        <div class="pa-notifications__footer">…</div>
+      </div>
+    </div>
+
+  Full-page list:
+    <ul class="pa-notifications__list pa-notifications__list--page">
+      <li class="pa-notifications__item …">
+        <label class="pa-checkbox">…</label>      <!-- bulk select -->
+        <div class="pa-notifications__icon-wrapper …">…</div>
+        <div class="pa-notifications__content">…</div>
+        <div class="pa-notifications__actions">…</div>   <!-- hover-revealed -->
+      </li>
+    </ul>
+-->

package/snippets/popconfirm.html

@@ -15,11 +15,11 @@ BENEFITS OVER MODALS:
 - Better for quick decisions
 - Ideal for table row actions
 
-POSITION CLASSES:
+POSITION CLASSES (logical — mirror in RTL):
 - pa-popconfirm--bottom: Arrow on top, popconfirm below button (default)
-- pa-popconfirm--top: Arrow on bottom, popconfirm above button
-- pa-popconfirm--right: Arrow on left, popconfirm to the right
-- pa-popconfirm--left: Arrow on right, popconfirm to the left
+- pa-popconfirm--top:    Arrow on bottom, popconfirm above button
+- pa-popconfirm--end:    Popconfirm on inline-end side (right in LTR, left in RTL)
+- pa-popconfirm--start:  Popconfirm on inline-start side (left in LTR, right in RTL)
 
 SIZE VARIANTS:
 - pa-popconfirm--compact: Smaller padding and dimensions
@@ -102,6 +102,98 @@ JAVASCRIPT REQUIRED:
 </div>
 
 
+<!-- ICON VARIANTS -->
+
+<!--
+Note: the base __icon class (no modifier) already prepends ⚠️ via a
+::before, so <div class="…__message …__icon"> gives you a warning icon
+for free. Use --danger/--warning/--info to swap the emoji.
+-->
+
+<!-- Default icon (warning emoji via base __icon) -->
+<div id="popconfirm-default-icon" class="pa-popconfirm pa-popconfirm--bottom">
+    <div class="pa-popconfirm__arrow"></div>
+    <div class="pa-popconfirm__content">
+        <div class="pa-popconfirm__message pa-popconfirm__icon">
+            <p>Heads up — this will affect all members of the group.</p>
+        </div>
+        <div class="pa-popconfirm__actions">
+            <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('popconfirm-default-icon')">Cancel</button>
+            <button class="pa-btn pa-btn--primary" onclick="confirmAction('popconfirm-default-icon')">Proceed</button>
+        </div>
+    </div>
+</div>
+
+<!-- Warning icon (same emoji as default, but explicit) -->
+<div id="popconfirm-warning" class="pa-popconfirm pa-popconfirm--bottom">
+    <div class="pa-popconfirm__arrow"></div>
+    <div class="pa-popconfirm__content">
+        <div class="pa-popconfirm__message pa-popconfirm__icon pa-popconfirm__icon--warning">
+            <p>Archive this item? It will be moved to the archive folder.</p>
+        </div>
+        <div class="pa-popconfirm__actions">
+            <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('popconfirm-warning')">Cancel</button>
+            <button class="pa-btn pa-btn--warning" onclick="confirmAction('popconfirm-warning')">Archive</button>
+        </div>
+    </div>
+</div>
+
+<!-- Info icon -->
+<div id="popconfirm-info" class="pa-popconfirm pa-popconfirm--bottom">
+    <div class="pa-popconfirm__arrow"></div>
+    <div class="pa-popconfirm__content">
+        <div class="pa-popconfirm__message pa-popconfirm__icon pa-popconfirm__icon--info">
+            <p>Reset all settings to their default values?</p>
+        </div>
+        <div class="pa-popconfirm__actions">
+            <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('popconfirm-info')">Cancel</button>
+            <button class="pa-btn pa-btn--primary" onclick="confirmAction('popconfirm-info')">Reset</button>
+        </div>
+    </div>
+</div>
+
+
+<!-- POSITION VARIANTS -->
+
+<!--
+The position class is the *initial* placement. The JS below uses Floating
+UI, which runs flip() collision detection on open and swaps the class to
+the actual resolved side. So even if you author with --bottom, users near
+the bottom of the viewport will see --top at runtime — the stylesheet
+supports all four sides.
+-->
+
+<!-- Top placement (popconfirm appears above trigger) -->
+<div id="popconfirm-top" class="pa-popconfirm pa-popconfirm--top">
+    <div class="pa-popconfirm__arrow"></div>
+    <div class="pa-popconfirm__content">
+        <div class="pa-popconfirm__message">
+            <p>Replace the current selection?</p>
+        </div>
+        <div class="pa-popconfirm__actions">
+            <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('popconfirm-top')">No</button>
+            <button class="pa-btn pa-btn--primary" onclick="confirmAction('popconfirm-top')">Yes</button>
+        </div>
+    </div>
+</div>
+
+<!-- End placement (popconfirm appears on the trigger's inline-end side: right in LTR, left in RTL) -->
+<div id="popconfirm-end" class="pa-popconfirm pa-popconfirm--end pa-popconfirm--compact">
+    <div class="pa-popconfirm__arrow"></div>
+    <div class="pa-popconfirm__content">
+        <div class="pa-popconfirm__message">
+            <p>Remove tag?</p>
+        </div>
+        <div class="pa-popconfirm__actions">
+            <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('popconfirm-end')">No</button>
+            <button class="pa-btn pa-btn--danger" onclick="confirmAction('popconfirm-end')">Yes</button>
+        </div>
+    </div>
+</div>
+
+<!-- Pattern: pa-popconfirm--{top|bottom|start|end} (logical sides; mirror in RTL) -->
+
+
 <!-- TABLE USAGE EXAMPLE -->
 
 <!-- Common pattern: Delete action in table -->
@@ -199,32 +291,45 @@ function confirmAction(popconfirmId) {
 }
 
 async function positionPopconfirm(trigger, popconfirm) {
-    // Get the initial position class (or default to bottom)
-    const classMatch = popconfirm.className.match(/pa-popconfirm--(top|bottom|left|right)/);
-    const placement = classMatch ? classMatch[1] : 'bottom';
+    // Popconfirm classes use logical sides (start/end). Floating UI's placement
+    // arg is physical (left/right), so translate going in and coming back out.
+    const isRtl = document.documentElement.dir === 'rtl';
+    const toPhysical = {
+        top: 'top',
+        bottom: 'bottom',
+        start: isRtl ? 'right' : 'left',
+        end: isRtl ? 'left' : 'right'
+    };
+    const toLogical = {
+        top: 'top',
+        bottom: 'bottom',
+        left: isRtl ? 'end' : 'start',
+        right: isRtl ? 'start' : 'end'
+    };
+
+    const classMatch = popconfirm.className.match(/pa-popconfirm--(top|bottom|start|end)/);
+    const logical = classMatch ? classMatch[1] : 'bottom';
+    const placement = toPhysical[logical];
 
-    // Use Floating UI for automatic positioning with collision detection
     const { computePosition, flip, shift, offset } = window.FloatingUIDOM;
 
     const { x, y, placement: finalPlacement } = await computePosition(trigger, popconfirm, {
         placement: placement,
         middleware: [
-            offset(8),        // 8px gap from trigger
-            flip(),           // Flip to opposite side if not enough space
-            shift({ padding: 10 })  // Keep 10px from viewport edges
+            offset(8),
+            flip(),
+            shift({ padding: 10 })
         ]
     });
 
-    // Update position class to match actual placement
+    // Map Floating UI's physical answer back to our logical class for the
+    // post-flip rewrite (`.split('-')[0]` handles compound forms like `top-start`).
+    const finalLogical = toLogical[finalPlacement.split('-')[0]] || 'bottom';
     popconfirm.className = popconfirm.className
-        .replace(/pa-popconfirm--(top|bottom|left|right)/g, '')
-        .trim() + ' pa-popconfirm--' + finalPlacement;
+        .replace(/pa-popconfirm--(top|bottom|start|end)/g, '')
+        .trim() + ' pa-popconfirm--' + finalLogical;
 
-    // Apply positioning
-    Object.assign(popconfirm.style, {
-        left: `${x}px`,
-        top: `${y}px`
-    });
+    Object.assign(popconfirm.style, { left: `${x}px`, top: `${y}px` });
 }
 
 // Close popconfirm when clicking outside
@@ -251,3 +356,92 @@ window.addEventListener('resize', () => {
     }
 });
 </script>
+
+
+<!-- ================================
+     COMPONENT REFERENCE
+     ================================ -->
+
+<!--
+STRUCTURE (required):
+.pa-popconfirm
+  .pa-popconfirm__arrow            ← decorative triangle pointing at trigger
+  .pa-popconfirm__content          ← card surface with border + shadow
+    .pa-popconfirm__message        ← body copy
+    .pa-popconfirm__actions        ← button row (right-aligned by default)
+
+STATE (note: .is-* class, not a BEM --modifier):
+- .is-open    — set by JS to flip display:none → display:block
+
+POSITION MODIFIERS (logical — mirror in RTL):
+- .pa-popconfirm--bottom  — popconfirm below trigger, arrow on top     (default)
+- .pa-popconfirm--top     — popconfirm above trigger, arrow on bottom
+- .pa-popconfirm--end     — popconfirm on inline-end side  (right in LTR, left in RTL)
+- .pa-popconfirm--start   — popconfirm on inline-start side (left in LTR, right in RTL)
+
+Under `dir="rtl"`, the inline-axis popconfirms (`--start`/`--end`) use the
+same CSS rule as LTR plus a `scaleX(-1)` on the arrow so the triangle still
+points at the trigger. The block-axis popconfirms (`--top`/`--bottom`)
+invert their `translateX` so the arrow stays centered.
+
+Runtime note: the JS runs Floating UI's flip() middleware on open and
+rewrites the position class to match where the popconfirm actually fits,
+so the initial class is just a *preferred* side. Floating UI only speaks
+physical placements internally, so the snippet translates `start`/`end`
+↔ `left`/`right` around the `computePosition` call.
+
+SIZE:
+- .pa-popconfirm--compact — tighter padding; min-width drops from 25.6rem to 19.2rem
+
+ICON (optional, applied on the __message element):
+- .pa-popconfirm__icon            — base icon styling (prepends ⚠️ via ::before)
+- .pa-popconfirm__icon--danger    — swaps the emoji to 🗑️
+- .pa-popconfirm__icon--warning   — explicit warning (same ⚠️ as base)
+- .pa-popconfirm__icon--info      — swaps to ℹ️
+
+(The base .pa-popconfirm__icon class alone already shows ⚠️ — the
+--warning modifier just makes the intent explicit. Use --danger for
+destructive actions; the emoji change is the differentiator.)
+
+DIMENSIONS:
+- min-width: 25.6rem / max-width: 32rem (default)
+- min-width: 19.2rem                    (compact)
+- z-index: $z-index-tooltip (9000) — renders above cards, modals' backdrops, etc.
+
+JAVASCRIPT CONTRACT:
+- Trigger: toggles .is-open on the target popconfirm element
+- Positioning: Floating UI (loaded globally as window.FloatingUIDOM)
+  middleware: offset(8), flip(), shift({ padding: 10 })
+- Dismissal: click outside, close button, or explicit confirm/cancel call
+- The position-class rewrite happens every open + on scroll/resize while open
+
+PATTERNS:
+
+Basic delete confirm:
+<button onclick="togglePopconfirm(event, 'pc-1')">Delete</button>
+<div id="pc-1" class="pa-popconfirm pa-popconfirm--bottom">
+  <div class="pa-popconfirm__arrow"></div>
+  <div class="pa-popconfirm__content">
+    <div class="pa-popconfirm__message pa-popconfirm__icon pa-popconfirm__icon--danger">
+      <p>Delete this item?</p>
+    </div>
+    <div class="pa-popconfirm__actions">
+      <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('pc-1')">No</button>
+      <button class="pa-btn pa-btn--danger"    onclick="confirmAction('pc-1')">Yes</button>
+    </div>
+  </div>
+</div>
+
+Compact table-row variant:
+<div class="pa-popconfirm pa-popconfirm--bottom pa-popconfirm--compact"> … </div>
+
+Inline-end popconfirm (right-of-trigger in LTR, left-of-trigger in RTL):
+<div class="pa-popconfirm pa-popconfirm--end"> … </div>
+
+POPCONFIRM vs MODAL:
+- Popconfirm: anchored to trigger, no backdrop, 1-step Yes/No question,
+              cheap to open/close. Use for destructive row actions.
+- Modal:      centered, backdrop, multi-field forms, long explanations.
+              Use when you need attention or more than a button choice.
+-->
+