@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/profile.html

@@ -0,0 +1,264 @@
+<!-- ================================
+     PROFILE PANEL SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- ================================
+     PROFILE BUTTON (NAVBAR)
+     ================================ -->
+
+<!-- Profile Button (goes in header/navbar) -->
+<button class="pa-navbar__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
+    <span class="pa-btn__icon">👤</span>
+    <span class="pa-navbar__profile-name">John Doe</span>
+</button>
+
+<!-- Profile Button with Font Awesome -->
+<button class="pa-navbar__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
+    <span class="pa-btn__icon"><i class="fa-solid fa-user"></i></span>
+    <span class="pa-navbar__profile-name">John Doe</span>
+</button>
+
+
+<!-- ================================
+     PROFILE PANEL - BASIC
+     ================================ -->
+
+<!-- Complete Profile Panel (place before closing </body> tag) -->
+<div class="pa-profile-panel" id="profilePanel">
+    <div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
+    <div class="pa-profile-panel__content">
+        <div class="pa-profile-panel__header">
+            <div class="pa-profile-panel__avatar">
+                <span class="pa-profile-panel__avatar-icon">👤</span>
+            </div>
+            <div class="pa-profile-panel__info">
+                <h3 class="pa-profile-panel__name">John Doe</h3>
+                <p class="pa-profile-panel__email">john.doe@company.com</p>
+                <span class="pa-profile-panel__role">Administrator</span>
+            </div>
+            <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
+                ✕
+            </button>
+        </div>
+
+        <div class="pa-profile-panel__body">
+            <nav class="pa-profile-panel__nav">
+                <ul>
+                    <li><a href="#profile" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">👤</span>
+                        Profile Settings
+                    </a></li>
+                    <li><a href="#security" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">🔒</span>
+                        Security
+                    </a></li>
+                    <li><a href="#notifications" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">🔔</span>
+                        Notifications
+                    </a></li>
+                    <li><a href="#preferences" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">⚙️</span>
+                        Preferences
+                    </a></li>
+                    <li><a href="#help" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">❓</span>
+                        Help & Support
+                    </a></li>
+                </ul>
+            </nav>
+
+            <div class="pa-profile-panel__actions">
+                <button class="pa-btn pa-btn--secondary pa-btn--block">
+                    Switch Account
+                </button>
+                <button class="pa-btn pa-btn--danger pa-btn--block">
+                    Sign Out
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- ================================
+     PROFILE PANEL - WITH FONT AWESOME
+     ================================ -->
+
+<div class="pa-profile-panel" id="profilePanel">
+    <div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
+    <div class="pa-profile-panel__content">
+        <div class="pa-profile-panel__header">
+            <div class="pa-profile-panel__avatar">
+                <span class="pa-profile-panel__avatar-icon"><i class="fa-solid fa-user"></i></span>
+            </div>
+            <div class="pa-profile-panel__info">
+                <h3 class="pa-profile-panel__name">John Doe</h3>
+                <p class="pa-profile-panel__email">john.doe@company.com</p>
+                <span class="pa-profile-panel__role">Administrator</span>
+            </div>
+            <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
+                <i class="fa-solid fa-xmark"></i>
+            </button>
+        </div>
+
+        <div class="pa-profile-panel__body">
+            <nav class="pa-profile-panel__nav">
+                <ul>
+                    <li><a href="#profile" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon"><i class="fa-solid fa-user"></i></span>
+                        Profile Settings
+                    </a></li>
+                    <li><a href="#security" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon"><i class="fa-solid fa-lock"></i></span>
+                        Security
+                    </a></li>
+                    <li><a href="#notifications" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon"><i class="fa-solid fa-bell"></i></span>
+                        Notifications
+                    </a></li>
+                    <li><a href="#preferences" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon"><i class="fa-solid fa-gear"></i></span>
+                        Preferences
+                    </a></li>
+                    <li><a href="#help" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon"><i class="fa-solid fa-circle-question"></i></span>
+                        Help & Support
+                    </a></li>
+                </ul>
+            </nav>
+
+            <div class="pa-profile-panel__actions">
+                <button class="pa-btn pa-btn--secondary pa-btn--block">
+                    <i class="fa-solid fa-right-left"></i> Switch Account
+                </button>
+                <button class="pa-btn pa-btn--danger pa-btn--block">
+                    <i class="fa-solid fa-right-from-bracket"></i> Sign Out
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- ================================
+     PROFILE PANEL - MINIMAL (NO ACTIONS)
+     ================================ -->
+
+<div class="pa-profile-panel" id="profilePanel">
+    <div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
+    <div class="pa-profile-panel__content">
+        <div class="pa-profile-panel__header">
+            <div class="pa-profile-panel__avatar">
+                <span class="pa-profile-panel__avatar-icon">👤</span>
+            </div>
+            <div class="pa-profile-panel__info">
+                <h3 class="pa-profile-panel__name">John Doe</h3>
+                <p class="pa-profile-panel__email">john.doe@company.com</p>
+                <span class="pa-profile-panel__role">Administrator</span>
+            </div>
+            <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
+                ✕
+            </button>
+        </div>
+
+        <div class="pa-profile-panel__body">
+            <nav class="pa-profile-panel__nav">
+                <ul>
+                    <li><a href="#profile" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">👤</span>
+                        Profile Settings
+                    </a></li>
+                    <li><a href="#logout" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">🚪</span>
+                        Sign Out
+                    </a></li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</div>
+
+
+<!-- ================================
+     JAVASCRIPT - PROFILE PANEL TOGGLE
+     ================================ -->
+
+<script>
+/**
+ * Toggle profile panel open/closed
+ */
+function toggleProfilePanel() {
+    const profilePanel = document.getElementById('profilePanel');
+    profilePanel.classList.toggle('pa-profile-panel--open');
+}
+
+/**
+ * Close profile panel
+ */
+function closeProfilePanel() {
+    const profilePanel = document.getElementById('profilePanel');
+    profilePanel.classList.remove('pa-profile-panel--open');
+}
+
+/**
+ * Close profile panel when clicking outside
+ */
+document.addEventListener('click', (e) => {
+    const profilePanel = document.getElementById('profilePanel');
+    const profileBtn = document.querySelector('.pa-navbar__profile-btn');
+
+    if (!profilePanel || !profileBtn) return;
+
+    if (!profilePanel.contains(e.target) && !profileBtn.contains(e.target) &&
+        profilePanel.classList.contains('pa-profile-panel--open')) {
+        closeProfilePanel();
+    }
+});
+</script>
+
+
+<!-- ================================
+     USAGE NOTES
+     ================================ -->
+
+<!--
+PROFILE BUTTON (HEADER):
+- .pa-navbar__profile-btn - Profile button in header
+- .pa-btn__icon - Icon container
+- .pa-navbar__profile-name - User name text
+
+PROFILE PANEL STRUCTURE:
+- .pa-profile-panel - Main panel container
+- #profilePanel - Required ID for JavaScript
+- .pa-profile-panel--open - Open state (toggled by JS)
+- .pa-profile-panel__overlay - Click-to-close overlay
+- .pa-profile-panel__content - Panel content container
+
+PANEL HEADER:
+- .pa-profile-panel__header - Header container
+- .pa-profile-panel__avatar - Avatar container
+- .pa-profile-panel__avatar-icon - Avatar icon/image
+- .pa-profile-panel__info - User info container
+- .pa-profile-panel__name - User name
+- .pa-profile-panel__email - User email
+- .pa-profile-panel__role - User role badge
+- .pa-profile-panel__close - Close button
+
+PANEL BODY:
+- .pa-profile-panel__body - Body container
+- .pa-profile-panel__nav - Navigation menu
+- .pa-profile-panel__nav-item - Navigation link
+- .pa-profile-panel__nav-icon - Navigation icon
+- .pa-profile-panel__actions - Action buttons container
+
+JAVASCRIPT FUNCTIONS:
+- toggleProfilePanel() - Toggle panel open/closed
+- closeProfilePanel() - Close panel
+- Auto-closes when clicking outside
+
+PLACEMENT:
+- Profile button goes in header/navbar
+- Profile panel goes before closing </body> tag
+- Panel slides in from right side of screen
+-->

package/snippets/tables.html

@@ -0,0 +1,317 @@
+<!-- ================================
+     TABLE SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- BASIC TABLE -->
+
+<!-- Simple Table -->
+<table class="pa-table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td>john@example.com</td>
+      <td>Admin</td>
+    </tr>
+    <tr>
+      <td>Jane Smith</td>
+      <td>jane@example.com</td>
+      <td>User</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<!-- STRIPED TABLE -->
+
+<!-- Table with Alternating Row Colors -->
+<table class="pa-table pa-table--striped">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td>Active</td>
+    </tr>
+    <tr>
+      <td>Jane Smith</td>
+      <td>Inactive</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<!-- NOTE: All tables have hover effect by default (no modifier needed) -->
+
+
+<!-- TABLE WITH ACTIONS -->
+
+<!-- Table with Icon Buttons -->
+<table class="pa-table pa-table--striped">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th class="col-auto">Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td>john@example.com</td>
+      <td class="col-auto">
+        <div class="pa-btn-group">
+          <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--primary" title="View">👁️</button>
+          <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--secondary" title="Edit">✏️</button>
+          <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--danger" title="Delete">🗑️</button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+
+<!-- TABLE SPACING VARIANTS -->
+
+<!-- Default Spacing (base padding) -->
+<table class="pa-table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td>john@example.com</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- 2x Spacing (comfortable padding) -->
+<table class="pa-table pa-table--2x">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td>john@example.com</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- 3x Spacing (spacious padding) -->
+<table class="pa-table pa-table--3x">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td>john@example.com</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<!-- RESPONSIVE TABLE -->
+
+<!-- Table in Card with Horizontal Scroll on Mobile -->
+<div class="pa-card">
+  <div class="pa-card__body">
+    <div class="pa-table-responsive">
+      <table class="pa-table pa-table--striped">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>John Doe</td>
+            <td>john@example.com</td>
+            <td>Admin</td>
+            <td>Active</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+
+<!-- TABLE WITH BADGES -->
+
+<!-- Table with Status Badges -->
+<table class="pa-table pa-table--striped">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Status</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td><span class="pa-badge pa-badge--success">Active</span></td>
+      <td><span class="pa-badge pa-badge--primary">Admin</span></td>
+    </tr>
+    <tr>
+      <td>Jane Smith</td>
+      <td><span class="pa-badge pa-badge--danger">Inactive</span></td>
+      <td><span class="pa-badge pa-badge--secondary">User</span></td>
+    </tr>
+  </tbody>
+</table>
+
+
+<!-- TABLE CONTAINER -->
+
+<!-- Table in Container with Border and Scrolling -->
+<div class="pa-table-container">
+  <table class="pa-table">
+    <thead>
+      <tr>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Email</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td>John Doe</td>
+        <td>john@example.com</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+
+<!-- PAGER COMPONENT -->
+
+<!-- Centered Pager (default) -->
+<div class="pa-pager">
+  <div class="pa-pager__container">
+    <div class="pa-pager__controls">
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">‹ Previous</button>
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">Next ›</button>
+    </div>
+    <div class="pa-pager__info">
+      <span class="pa-pager__text">Page</span>
+      <input type="number" class="pa-input pa-input--sm pa-pager__input" value="1" min="1">
+      <span class="pa-pager__text">of 10</span>
+    </div>
+  </div>
+</div>
+
+<!-- Left-Aligned Pager -->
+<div class="pa-pager pa-pager--left">
+  <div class="pa-pager__container">
+    <div class="pa-pager__controls">
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">« First</button>
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">‹ Prev</button>
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">Next ›</button>
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">Last »</button>
+    </div>
+  </div>
+</div>
+
+<!-- Right-Aligned Pager -->
+<div class="pa-pager pa-pager--right">
+  <div class="pa-pager__container">
+    <span class="pa-pager__text">Showing 1-25 of 250</span>
+    <div class="pa-pager__controls">
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">‹</button>
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">›</button>
+    </div>
+  </div>
+</div>
+
+
+<!-- LOAD MORE COMPONENT -->
+
+<!-- Centered Load More (default) -->
+<div class="pa-load-more">
+  <button class="pa-load-more__button">
+    <span class="pa-load-more__text">Load More</span>
+    <span class="pa-load-more__count">(25 of 250)</span>
+  </button>
+</div>
+
+<!-- Load More with Loading State -->
+<div class="pa-load-more">
+  <button class="pa-load-more__button pa-load-more__button--loading">
+    <span class="pa-load-more__spinner"></span>
+    <span class="pa-load-more__text">Loading...</span>
+  </button>
+</div>
+
+<!-- Left-Aligned Load More -->
+<div class="pa-load-more pa-load-more--left">
+  <button class="pa-load-more__button">
+    <span class="pa-load-more__text">Show More Items</span>
+  </button>
+</div>
+
+<!-- Right-Aligned Load More -->
+<div class="pa-load-more pa-load-more--right">
+  <button class="pa-load-more__button">
+    <span class="pa-load-more__text">Load Previous</span>
+  </button>
+</div>
+
+
+<!-- AVAILABLE TABLE MODIFIERS -->
+<!--
+BASE CLASS:
+- pa-table (base table with hover effect built-in)
+
+MODIFIERS:
+- pa-table--striped (alternating row colors)
+- pa-table--2x (comfortable padding, 2x base)
+- pa-table--3x (spacious padding, 3x base)
+
+HELPERS:
+- col-auto (auto-width column that shrinks to content)
+- pa-table-container (wrapper with border and scroll)
+- pa-table-responsive (horizontal scroll on mobile)
+
+PAGER:
+- pa-pager (center aligned by default)
+- pa-pager--left (left aligned)
+- pa-pager--right (right aligned)
+- pa-pager__container, __controls, __info, __input, __text
+
+LOAD MORE:
+- pa-load-more (center aligned by default)
+- pa-load-more--left (left aligned)
+- pa-load-more--right (right aligned)
+- pa-load-more__button, __spinner, __text, __count
+- pa-load-more__button--loading (loading state)
+-->