@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/modals.html

@@ -0,0 +1,310 @@
+<!-- ================================
+     MODAL SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!--
+MODAL WRAPPER CLASSES:
+- pa-modal: Base modal wrapper
+- pa-modal--show: Show the modal (add/remove via JavaScript)
+- pa-modal--top: Position modal near top instead of center (useful for search/command interfaces)
+- pa-modal--primary: Primary themed modal (blue header)
+- pa-modal--success: Success themed modal (green header)
+- pa-modal--warning: Warning themed modal (orange header)
+- pa-modal--danger: Danger themed modal (red header)
+- pa-modal--info: Info themed modal (cyan header)
+
+CONTAINER SIZE CLASSES:
+- pa-modal__container--sm: Small (20rem / 320px)
+- pa-modal__container: Medium/default (30rem / 480px)
+- pa-modal__container--lg: Large (50rem / 800px)
+- pa-modal__container--xl: Extra large (70rem / 1120px)
+- pa-modal__container--xxl: Extra extra large (90rem / 1440px)
+- pa-modal__container--fw: Full width (constrained by viewport margins)
+
+BODY CLASSES:
+- pa-modal__body: Base body class
+- pa-modal__body--scrollable: Scrollable body with max-height (header/footer fixed)
+
+HEADER THEME CLASSES (alternative to modal-level themes):
+- pa-modal__header--primary: Blue themed header
+- pa-modal__header--success: Green themed header
+- pa-modal__header--warning: Orange themed header
+- pa-modal__header--danger: Red themed header
+-->
+
+<!-- BASIC MODAL (Centered) -->
+
+<!-- Modal Structure -->
+<div class="pa-modal pa-modal--show" id="basicModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container">
+    <div class="pa-modal__header">
+      <h3 class="pa-modal__title">Modal Title</h3>
+      <button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm" onclick="closeModal('basicModal')">✕</button>
+    </div>
+    <div class="pa-modal__body">
+      <p>Modal body content goes here.</p>
+    </div>
+    <div class="pa-modal__footer">
+      <button class="pa-btn pa-btn--secondary" onclick="closeModal('basicModal')">Close</button>
+      <button class="pa-btn pa-btn--primary">Save changes</button>
+    </div>
+  </div>
+</div>
+
+<!-- TOP-ALIGNED MODAL -->
+
+<!-- Modal positioned near top (5vh from top) -->
+<div class="pa-modal pa-modal--top pa-modal--show" id="topModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container">
+    <div class="pa-modal__header">
+      <h3 class="pa-modal__title">Top-Aligned Modal</h3>
+      <button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm" onclick="closeModal('topModal')">✕</button>
+    </div>
+    <div class="pa-modal__body">
+      <p>This modal appears near the top of the viewport.</p>
+      <p>Useful for search interfaces, quick actions, or command palettes.</p>
+    </div>
+    <div class="pa-modal__footer">
+      <button class="pa-btn pa-btn--secondary" onclick="closeModal('topModal')">Close</button>
+      <button class="pa-btn pa-btn--primary">Confirm</button>
+    </div>
+  </div>
+</div>
+
+
+<!-- MODAL SIZES -->
+
+<!-- Small Modal -->
+<div class="pa-modal" id="smallModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container pa-modal__container--sm">
+    <!-- content -->
+  </div>
+</div>
+
+<!-- Medium Modal (Default) -->
+<div class="pa-modal" id="mediumModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container">
+    <!-- content -->
+  </div>
+</div>
+
+<!-- Large Modal -->
+<div class="pa-modal" id="largeModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container pa-modal__container--lg">
+    <!-- content -->
+  </div>
+</div>
+
+<!-- Extra Large Modal -->
+<div class="pa-modal" id="xlModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container pa-modal__container--xl">
+    <!-- content -->
+  </div>
+</div>
+
+<!-- 2XL Modal -->
+<div class="pa-modal" id="xxlModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container pa-modal__container--xxl">
+    <!-- content -->
+  </div>
+</div>
+
+<!-- Full Width Modal -->
+<div class="pa-modal" id="fwModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container pa-modal__container--fw">
+    <!-- content -->
+  </div>
+</div>
+
+
+<!-- THEMED MODALS -->
+
+<!-- Primary Modal -->
+<div class="pa-modal pa-modal--primary" id="primaryModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container">
+    <div class="pa-modal__header">
+      <h3 class="pa-modal__title">Primary Modal</h3>
+      <button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm">✕</button>
+    </div>
+    <div class="pa-modal__body">
+      Content here.
+    </div>
+  </div>
+</div>
+
+<!-- Success Modal -->
+<div class="pa-modal pa-modal--success" id="successModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container">
+    <div class="pa-modal__header">
+      <h3 class="pa-modal__title">Success Modal</h3>
+      <button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm">✕</button>
+    </div>
+    <div class="pa-modal__body">
+      Content here.
+    </div>
+  </div>
+</div>
+
+<!-- Warning Modal -->
+<div class="pa-modal pa-modal--warning" id="warningModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container">
+    <div class="pa-modal__header">
+      <h3 class="pa-modal__title">Warning Modal</h3>
+      <button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm">✕</button>
+    </div>
+    <div class="pa-modal__body">
+      Content here.
+    </div>
+  </div>
+</div>
+
+<!-- Danger Modal -->
+<div class="pa-modal pa-modal--danger" id="dangerModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container">
+    <div class="pa-modal__header">
+      <h3 class="pa-modal__title">Danger Modal</h3>
+      <button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm">✕</button>
+    </div>
+    <div class="pa-modal__body">
+      Content here.
+    </div>
+  </div>
+</div>
+
+
+<!-- SCROLLABLE MODAL BODY -->
+
+<!-- Modal with Scrollable Content -->
+<div class="pa-modal" id="scrollableModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container pa-modal__container--lg">
+    <div class="pa-modal__header">
+      <h3 class="pa-modal__title">Terms and Conditions</h3>
+      <button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm">✕</button>
+    </div>
+    <div class="pa-modal__body pa-modal__body--scrollable">
+      <!-- Long content that requires scrolling -->
+      <h4>1. Introduction</h4>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      <h4>2. Terms of Service</h4>
+      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      <h4>3. Privacy Policy</h4>
+      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+      <h4>4. User Responsibilities</h4>
+      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      <h4>5. Disclaimer</h4>
+      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+      <!-- More content... -->
+    </div>
+    <div class="pa-modal__footer">
+      <button class="pa-btn pa-btn--secondary">Decline</button>
+      <button class="pa-btn pa-btn--primary">Accept</button>
+    </div>
+  </div>
+</div>
+
+<!--
+SCROLLABLE BODY NOTES:
+- Use pa-modal__body--scrollable for content that may exceed viewport height
+- Body gets max-height and overflow-y: auto
+- Header and footer remain fixed, only body scrolls
+- Recommended for: Terms of service, long forms, data tables, file lists
+-->
+
+
+<!-- MODAL WITH FORM -->
+
+<!-- Form Modal -->
+<div class="pa-modal" id="formModal">
+  <div class="pa-modal__backdrop"></div>
+  <div class="pa-modal__container">
+    <div class="pa-modal__header">
+      <h3 class="pa-modal__title">User Information</h3>
+      <button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm">✕</button>
+    </div>
+    <div class="pa-modal__body">
+      <form>
+        <div class="pa-form-group">
+          <label class="pa-form-label">Name</label>
+          <input type="text" class="pa-input">
+        </div>
+        <div class="pa-form-group">
+          <label class="pa-form-label">Email</label>
+          <input type="email" class="pa-input">
+        </div>
+      </form>
+    </div>
+    <div class="pa-modal__footer">
+      <button class="pa-btn pa-btn--secondary">Cancel</button>
+      <button class="pa-btn pa-btn--primary">Submit</button>
+    </div>
+  </div>
+</div>
+
+
+<!-- JAVASCRIPT -->
+<script>
+function openModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    // Calculate scrollbar width to prevent layout shift
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+    modal.classList.add('pa-modal--show');
+    document.body.style.overflow = 'hidden'; // Prevent background scrolling
+    document.body.style.paddingRight = scrollbarWidth + 'px'; // Compensate for scrollbar
+  }
+}
+
+function closeModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    modal.classList.remove('pa-modal--show');
+    document.body.style.overflow = ''; // Restore scrolling
+    document.body.style.paddingRight = ''; // Remove compensation
+  }
+}
+
+// Close modal with Escape key
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') {
+    const openModal = document.querySelector('.pa-modal--show');
+    if (openModal) {
+      closeModal(openModal.id);
+    }
+  }
+});
+
+// Close modal when clicking backdrop
+document.querySelectorAll('.pa-modal__backdrop').forEach(backdrop => {
+  backdrop.addEventListener('click', function() {
+    const modal = this.closest('.pa-modal');
+    if (modal) {
+      closeModal(modal.id);
+    }
+  });
+});
+
+// Close modal when clicking close button
+document.querySelectorAll('.pa-modal .pa-btn--icon-only').forEach(btn => {
+  btn.addEventListener('click', function() {
+    const modal = this.closest('.pa-modal');
+    if (modal) {
+      closeModal(modal.id);
+    }
+  });
+});
+</script>

package/snippets/popconfirm.html

@@ -0,0 +1,253 @@
+<!-- ================================
+     POPCONFIRM SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!--
+POPCONFIRM COMPONENT:
+Small confirmation dialogs anchored to trigger buttons.
+Perfect for delete confirmations and quick yes/no decisions.
+
+BENEFITS OVER MODALS:
+- Appears directly below/above the trigger button
+- More contextual (stays near the action)
+- Lighter weight (no backdrop)
+- Better for quick decisions
+- Ideal for table row actions
+
+POSITION CLASSES:
+- 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
+
+SIZE VARIANTS:
+- pa-popconfirm--compact: Smaller padding and dimensions
+
+ICON VARIANTS (for message):
+- pa-popconfirm__icon--danger: Shows delete icon (🗑️)
+- pa-popconfirm__icon--warning: Shows warning icon (⚠️)
+- pa-popconfirm__icon--info: Shows info icon (ℹ️)
+
+JAVASCRIPT REQUIRED:
+- Floating UI library for positioning (loaded globally)
+- Automatic collision detection via flip() middleware
+- Edge detection via shift() middleware
+- Click outside to close
+- Reposition on scroll/resize
+-->
+
+<!-- BASIC POPCONFIRM -->
+
+<!-- HTML Structure -->
+<button
+    class="pa-btn pa-btn--danger"
+    onclick="togglePopconfirm(event, 'popconfirm-delete')"
+>
+    Delete Item
+</button>
+
+<div id="popconfirm-delete" 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>Are you sure you want to delete this item? This action cannot be undone.</p>
+        </div>
+        <div class="pa-popconfirm__actions">
+            <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('popconfirm-delete')">Cancel</button>
+            <button class="pa-btn pa-btn--danger" onclick="confirmAction('popconfirm-delete')">Delete</button>
+        </div>
+    </div>
+</div>
+
+
+<!-- COMPACT POPCONFIRM -->
+
+<!-- Smaller variant for table actions -->
+<button
+    class="pa-btn pa-btn--xs pa-btn--danger"
+    onclick="togglePopconfirm(event, 'popconfirm-compact')"
+>
+    Delete
+</button>
+
+<div id="popconfirm-compact" class="pa-popconfirm pa-popconfirm--bottom pa-popconfirm--compact">
+    <div class="pa-popconfirm__arrow"></div>
+    <div class="pa-popconfirm__content">
+        <div class="pa-popconfirm__message">
+            <p>Delete this item?</p>
+        </div>
+        <div class="pa-popconfirm__actions">
+            <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('popconfirm-compact')">No</button>
+            <button class="pa-btn pa-btn--danger" onclick="confirmAction('popconfirm-compact')">Yes</button>
+        </div>
+    </div>
+</div>
+
+
+<!-- WITHOUT ICON -->
+
+<!-- Simple message without icon -->
+<div id="popconfirm-simple" class="pa-popconfirm pa-popconfirm--bottom">
+    <div class="pa-popconfirm__arrow"></div>
+    <div class="pa-popconfirm__content">
+        <div class="pa-popconfirm__message">
+            <p>Are you sure you want to proceed with this action?</p>
+        </div>
+        <div class="pa-popconfirm__actions">
+            <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('popconfirm-simple')">Cancel</button>
+            <button class="pa-btn pa-btn--primary" onclick="confirmAction('popconfirm-simple')">Confirm</button>
+        </div>
+    </div>
+</div>
+
+
+<!-- TABLE USAGE EXAMPLE -->
+
+<!-- Common pattern: Delete action in table -->
+<table class="pa-table pa-table--striped">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Status</th>
+            <th class="col-auto">Actions</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>John Doe</td>
+            <td><span class="pa-badge pa-badge--success">Active</span></td>
+            <td class="col-auto">
+                <div class="pa-btn-group">
+                    <button class="pa-btn pa-btn--xs pa-btn--primary">Edit</button>
+                    <button
+                        class="pa-btn pa-btn--xs pa-btn--danger"
+                        onclick="togglePopconfirm(event, 'popconfirm-user-1')"
+                    >
+                        Delete
+                    </button>
+                </div>
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+<!-- Popconfirm for table row -->
+<div id="popconfirm-user-1" class="pa-popconfirm pa-popconfirm--bottom pa-popconfirm--compact">
+    <div class="pa-popconfirm__arrow"></div>
+    <div class="pa-popconfirm__content">
+        <div class="pa-popconfirm__message">
+            <p>Delete John Doe?</p>
+        </div>
+        <div class="pa-popconfirm__actions">
+            <button class="pa-btn pa-btn--secondary" onclick="closePopconfirm('popconfirm-user-1')">No</button>
+            <button class="pa-btn pa-btn--danger" onclick="confirmAction('popconfirm-user-1')">Yes</button>
+        </div>
+    </div>
+</div>
+
+
+<!-- JAVASCRIPT FUNCTIONS -->
+
+<script>
+// Popconfirm positioning and interaction
+let currentPopconfirm = null;
+let currentTrigger = null;
+
+function togglePopconfirm(event, popconfirmId) {
+    event.stopPropagation();
+
+    const trigger = event.currentTarget;
+    const popconfirm = document.getElementById(popconfirmId);
+
+    // Close current if different
+    if (currentPopconfirm && currentPopconfirm !== popconfirm) {
+        currentPopconfirm.classList.remove('is-open');
+    }
+
+    // Toggle this popconfirm
+    const isOpen = popconfirm.classList.contains('is-open');
+
+    if (isOpen) {
+        popconfirm.classList.remove('is-open');
+        currentPopconfirm = null;
+        currentTrigger = null;
+    } else {
+        // Position and show
+        positionPopconfirm(trigger, popconfirm);
+        popconfirm.classList.add('is-open');
+        currentPopconfirm = popconfirm;
+        currentTrigger = trigger;
+    }
+}
+
+function closePopconfirm(popconfirmId) {
+    const popconfirm = document.getElementById(popconfirmId);
+    popconfirm.classList.remove('is-open');
+
+    if (currentPopconfirm === popconfirm) {
+        currentPopconfirm = null;
+        currentTrigger = null;
+    }
+}
+
+function confirmAction(popconfirmId) {
+    console.log('Confirmed:', popconfirmId);
+    closePopconfirm(popconfirmId);
+
+    // Perform your action here (e.g., delete API call)
+}
+
+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';
+
+    // 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
+        ]
+    });
+
+    // Update position class to match actual placement
+    popconfirm.className = popconfirm.className
+        .replace(/pa-popconfirm--(top|bottom|left|right)/g, '')
+        .trim() + ' pa-popconfirm--' + finalPlacement;
+
+    // Apply positioning
+    Object.assign(popconfirm.style, {
+        left: `${x}px`,
+        top: `${y}px`
+    });
+}
+
+// Close popconfirm when clicking outside
+document.addEventListener('click', (e) => {
+    if (currentPopconfirm &&
+        !currentPopconfirm.contains(e.target) &&
+        currentTrigger !== e.target) {
+        currentPopconfirm.classList.remove('is-open');
+        currentPopconfirm = null;
+        currentTrigger = null;
+    }
+});
+
+// Reposition on scroll/resize
+window.addEventListener('scroll', () => {
+    if (currentPopconfirm && currentTrigger) {
+        positionPopconfirm(currentTrigger, currentPopconfirm);
+    }
+});
+
+window.addEventListener('resize', () => {
+    if (currentPopconfirm && currentTrigger) {
+        positionPopconfirm(currentTrigger, currentPopconfirm);
+    }
+});
+</script>