@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/timeline.html

@@ -0,0 +1,364 @@
+<!-- Timeline Component Snippets -->
+<!-- Clean HTML examples for all timeline variants -->
+
+<!-- ========================================
+     Simple Timeline (Left-aligned with dots)
+     ======================================== -->
+
+<!-- Basic Simple Timeline -->
+<ul class="pa-timeline pa-timeline--simple">
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__time">14:32</div>
+        <div class="pa-timeline__content">
+            User logged in from New York
+        </div>
+    </li>
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__time">12:15</div>
+        <div class="pa-timeline__content">
+            Database backup completed successfully
+        </div>
+    </li>
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__time">09:30</div>
+        <div class="pa-timeline__content">
+            System started maintenance mode
+        </div>
+    </li>
+</ul>
+
+<!-- Simple Timeline with Color Variants -->
+<ul class="pa-timeline pa-timeline--simple">
+    <li class="pa-timeline__item pa-timeline__item--primary">
+        <div class="pa-timeline__time">Now</div>
+        <div class="pa-timeline__content">Primary event marker</div>
+    </li>
+    <li class="pa-timeline__item pa-timeline__item--success">
+        <div class="pa-timeline__time">5 min ago</div>
+        <div class="pa-timeline__content">Success event marker</div>
+    </li>
+    <li class="pa-timeline__item pa-timeline__item--warning">
+        <div class="pa-timeline__time">10 min ago</div>
+        <div class="pa-timeline__content">Warning event marker</div>
+    </li>
+    <li class="pa-timeline__item pa-timeline__item--danger">
+        <div class="pa-timeline__time">15 min ago</div>
+        <div class="pa-timeline__content">Danger event marker</div>
+    </li>
+    <li class="pa-timeline__item pa-timeline__item--info">
+        <div class="pa-timeline__time">20 min ago</div>
+        <div class="pa-timeline__content">Info event marker</div>
+    </li>
+    <li class="pa-timeline__item pa-timeline__item--secondary">
+        <div class="pa-timeline__time">30 min ago</div>
+        <div class="pa-timeline__content">Secondary event marker</div>
+    </li>
+</ul>
+
+<!-- Simple Timeline with Filled Markers -->
+<ul class="pa-timeline pa-timeline--simple">
+    <li class="pa-timeline__item pa-timeline__item--primary pa-timeline__item--filled">
+        <div class="pa-timeline__time">Now</div>
+        <div class="pa-timeline__content">Filled primary marker</div>
+    </li>
+    <li class="pa-timeline__item pa-timeline__item--success pa-timeline__item--filled">
+        <div class="pa-timeline__time">1 hour ago</div>
+        <div class="pa-timeline__content">Filled success marker</div>
+    </li>
+</ul>
+
+<!-- ========================================
+     Block Timeline (Centered alternating)
+     ======================================== -->
+
+<ul class="pa-timeline pa-timeline--alternating">
+    <!-- Left side item (odd) -->
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__date">Jan 2021</div>
+        <div class="pa-timeline__icon">🚀</div>
+        <div class="pa-timeline__content">
+            <h3>Project Launch</h3>
+            <p>Successfully launched the new platform with modern architecture and improved performance.</p>
+        </div>
+    </li>
+
+    <!-- Right side item (even) -->
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__date">Mar 2021</div>
+        <div class="pa-timeline__icon">✨</div>
+        <div class="pa-timeline__content">
+            <h3>Feature Release</h3>
+            <p>Deployed advanced features including real-time collaboration and cloud sync.</p>
+        </div>
+    </li>
+
+    <!-- Left side item (odd) -->
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__date">Jun 2021</div>
+        <div class="pa-timeline__icon">📊</div>
+        <div class="pa-timeline__content">
+            <h3>Analytics Update</h3>
+            <p>Integrated comprehensive analytics dashboard for better insights.</p>
+        </div>
+    </li>
+</ul>
+
+<!-- ========================================
+     Feed Timeline (Activity feed style)
+     ======================================== -->
+
+<!-- Basic Feed Timeline with Avatars -->
+<ul class="pa-timeline pa-timeline--feed">
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__content">
+            <div class="pa-timeline__avatar">
+                <img src="https://ui-avatars.com/api/?name=John+Doe&background=0D8ABC&color=fff" alt="John Doe">
+            </div>
+            <span><a href="#">John Doe</a> created a new project</span>
+            <time>2 hours ago</time>
+        </div>
+    </li>
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__content">
+            <div class="pa-timeline__avatar">
+                <img src="https://ui-avatars.com/api/?name=Jane+Smith&background=0D8ABC&color=fff" alt="Jane Smith">
+            </div>
+            <span><a href="#">Jane Smith</a> uploaded 3 files</span>
+            <time>5 hours ago</time>
+        </div>
+    </li>
+</ul>
+
+<!-- Feed Timeline with Comments -->
+<ul class="pa-timeline pa-timeline--feed">
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__content">
+            <div class="pa-timeline__avatar">
+                <img src="https://ui-avatars.com/api/?name=Luna+B&background=0D8ABC&color=fff" alt="Luna">
+            </div>
+            <span><a href="#">Luna Bonifacio</a> commented on <a href="#">Issue #123</a></span>
+            <time>1 hour ago</time>
+            <div class="pa-timeline__comment">
+                <p>This looks great! I've tested it on multiple browsers and everything works perfectly.</p>
+            </div>
+        </div>
+    </li>
+</ul>
+
+<!-- Feed Timeline with Date Headers and Time Prefixes -->
+<ul class="pa-timeline pa-timeline--feed">
+    <!-- Date header -->
+    <li class="pa-timeline__item pa-timeline__item--date-header">
+        <div class="pa-timeline__date-icon">📅</div>
+        <div class="pa-timeline__date-label">January 22, 2025</div>
+    </li>
+
+    <!-- Items with time prefix -->
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__time">14:32</div>
+        <div class="pa-timeline__content">
+            <div class="pa-timeline__avatar">
+                <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=0D8ABC&color=fff" alt="Sarah">
+            </div>
+            <span><a href="#">Sarah Chen</a> merged pull request #456</span>
+        </div>
+    </li>
+
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__time">12:15</div>
+        <div class="pa-timeline__content">
+            <div class="pa-timeline__avatar">
+                <img src="https://ui-avatars.com/api/?name=Mike+J&background=0D8ABC&color=fff" alt="Mike">
+            </div>
+            <span><a href="#">Mike Johnson</a> deployed to production</span>
+        </div>
+    </li>
+
+    <!-- Another date header -->
+    <li class="pa-timeline__item pa-timeline__item--date-header">
+        <div class="pa-timeline__date-icon">📅</div>
+        <div class="pa-timeline__date-label">January 21, 2025</div>
+    </li>
+
+    <li class="pa-timeline__item">
+        <div class="pa-timeline__time">18:45</div>
+        <div class="pa-timeline__content">
+            <div class="pa-timeline__avatar">
+                <img src="https://ui-avatars.com/api/?name=Emma+D&background=0D8ABC&color=fff" alt="Emma">
+            </div>
+            <span><a href="#">Emma Davis</a> updated documentation</span>
+        </div>
+    </li>
+</ul>
+
+<!-- ========================================
+     Interactive Timeline Features
+     ======================================== -->
+
+<!-- Timeline with Scroll Container -->
+<div class="pa-timeline__scroll-container">
+    <ul class="pa-timeline pa-timeline--simple">
+        <!-- Items here... -->
+    </ul>
+</div>
+
+<!-- Timeline with Load More Button -->
+<ul class="pa-timeline pa-timeline--simple">
+    <!-- Items here... -->
+</ul>
+<div class="pa-timeline__load-more-wrapper">
+    <button class="pa-btn pa-btn--secondary">Load More</button>
+</div>
+
+<!-- Timeline with Loader -->
+<div class="pa-timeline__loader">
+    <div class="pa-loader pa-loader--sm">
+        <div class="pa-spinner"></div>
+    </div>
+    <div class="pa-timeline__loader-text">Loading more entries...</div>
+</div>
+
+<!-- ========================================
+     Alternating Timeline Layout Modifiers (NEW)
+     ======================================== -->
+
+<!-- Left-aligned timeline (all items on left side) -->
+<div class="pa-timeline pa-timeline--alternating pa-timeline--left">
+    <div class="pa-timeline__item">
+        <div class="pa-timeline__date">Jan 2024</div>
+        <div class="pa-timeline__icon">📝</div>
+        <div class="pa-timeline__content">
+            <h3>Planning</h3>
+            <p>All items aligned to left side with timeline line on left.</p>
+        </div>
+    </div>
+    <div class="pa-timeline__item">
+        <div class="pa-timeline__date">Feb 2024</div>
+        <div class="pa-timeline__icon">🚀</div>
+        <div class="pa-timeline__content">
+            <h3>Launch</h3>
+            <p>Content blocks stay on left side.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Right-aligned timeline (all items on right side) -->
+<div class="pa-timeline pa-timeline--alternating pa-timeline--right">
+    <div class="pa-timeline__item">
+        <div class="pa-timeline__date">Jan 2024</div>
+        <div class="pa-timeline__icon">📝</div>
+        <div class="pa-timeline__content">
+            <h3>Planning</h3>
+            <p>All items aligned to right side with timeline line on right.</p>
+        </div>
+    </div>
+    <div class="pa-timeline__item">
+        <div class="pa-timeline__date">Feb 2024</div>
+        <div class="pa-timeline__icon">🚀</div>
+        <div class="pa-timeline__content">
+            <h3>Launch</h3>
+            <p>Content blocks stay on right side.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Keep layout on mobile (prevent responsive collapse) -->
+<div class="pa-timeline pa-timeline--alternating pa-timeline--keep-layout">
+    <div class="pa-timeline__item">
+        <div class="pa-timeline__date">Jan 2024</div>
+        <div class="pa-timeline__icon">📝</div>
+        <div class="pa-timeline__content">
+            <h3>Planning</h3>
+            <p>Maintains alternating layout on all screen sizes.</p>
+        </div>
+    </div>
+    <div class="pa-timeline__item">
+        <div class="pa-timeline__date">Feb 2024</div>
+        <div class="pa-timeline__icon">🚀</div>
+        <div class="pa-timeline__content">
+            <h3>Launch</h3>
+            <p>No mobile collapse - stays zigzag.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Combination: Left-aligned + keep layout on mobile -->
+<div class="pa-timeline pa-timeline--alternating pa-timeline--left pa-timeline--keep-layout">
+    <div class="pa-timeline__item">
+        <div class="pa-timeline__date">Q1</div>
+        <div class="pa-timeline__icon">📊</div>
+        <div class="pa-timeline__content">
+            <h3>Analysis</h3>
+            <p>Left-aligned on desktop, stays left on mobile.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Combination: Right-aligned + keep layout on mobile -->
+<div class="pa-timeline pa-timeline--alternating pa-timeline--right pa-timeline--keep-layout">
+    <div class="pa-timeline__item">
+        <div class="pa-timeline__date">Q1</div>
+        <div class="pa-timeline__icon">📊</div>
+        <div class="pa-timeline__content">
+            <h3>Analysis</h3>
+            <p>Right-aligned on desktop, stays right on mobile.</p>
+        </div>
+    </div>
+</div>
+
+<!-- ========================================
+     Complete Component Reference
+     ======================================== -->
+<!--
+TIMELINE VARIANTS:
+- pa-timeline--simple: Left-aligned with dots
+- pa-timeline--alternating: Centered zigzag layout
+- pa-timeline--feed: Activity feed with avatars
+
+ALTERNATING LAYOUT MODIFIERS (can be combined):
+- pa-timeline--left: All items on left side (independent of responsive behavior)
+- pa-timeline--right: All items on right side (independent of responsive behavior)
+- pa-timeline--keep-layout: Prevent mobile collapse, maintain desktop layout at all widths
+- pa-timeline--single-column: Force single-column layout (alias for --left)
+
+RESPONSIVE BEHAVIOR:
+- Default: Zigzag on desktop (>767px), auto-collapse to single-column on mobile (≤767px)
+- With --keep-layout: Layout maintained at all screen widths
+- With --left or --right: Aligned layout on desktop, collapses on mobile (unless --keep-layout added)
+
+COMBINATION EXAMPLES:
+- pa-timeline--alternating: Zigzag desktop, single-column mobile (auto-responsive)
+- pa-timeline--alternating pa-timeline--left: All left desktop, single-column mobile
+- pa-timeline--alternating pa-timeline--right: All right desktop, single-column mobile
+- pa-timeline--alternating pa-timeline--keep-layout: Zigzag stays zigzag on mobile
+- pa-timeline--alternating pa-timeline--left pa-timeline--keep-layout: Left stays left on mobile
+- pa-timeline--alternating pa-timeline--right pa-timeline--keep-layout: Right stays right on mobile
+
+ITEM MODIFIERS (simple variant):
+- pa-timeline__item--primary: Primary color marker
+- pa-timeline__item--success: Success color marker
+- pa-timeline__item--warning: Warning color marker
+- pa-timeline__item--danger: Danger color marker
+- pa-timeline__item--info: Info color marker
+- pa-timeline__item--secondary: Secondary color marker
+- pa-timeline__item--filled: Solid filled marker
+
+FEED MODIFIERS:
+- pa-timeline__item--date-header: Date section header
+
+COMPONENTS:
+- pa-timeline__time: Time label
+- pa-timeline__content: Main content area
+- pa-timeline__date: Date label (block variant)
+- pa-timeline__icon: Icon container (block variant)
+- pa-timeline__avatar: Avatar image (feed variant)
+- pa-timeline__comment: Comment bubble (feed variant)
+- pa-timeline__date-icon: Calendar icon (feed date headers)
+- pa-timeline__date-label: Date text (feed date headers)
+
+UTILITIES:
+- pa-timeline__scroll-container: Scrollable container
+- pa-timeline__loader: Loading indicator
+- pa-timeline__loader-text: Loading text
+- pa-timeline__load-more-wrapper: Load more button wrapper
+-->

package/snippets/toasts.html

@@ -0,0 +1,154 @@
+<!-- ================================
+     TOAST SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- Note: Toast containers should be at body level in your layout -->
+<!-- Include these containers once in your main layout -->
+<div id="toast-container-top-right" class="pa-toast-container pa-toast-container--top-right"></div>
+<div id="toast-container-top-center" class="pa-toast-container pa-toast-container--top-center"></div>
+<div id="toast-container-top-left" class="pa-toast-container pa-toast-container--top-left"></div>
+<div id="toast-container-bottom-right" class="pa-toast-container pa-toast-container--bottom-right"></div>
+<div id="toast-container-bottom-center" class="pa-toast-container pa-toast-container--bottom-center"></div>
+<div id="toast-container-bottom-left" class="pa-toast-container pa-toast-container--bottom-left"></div>
+
+
+<!-- TOAST STRUCTURE -->
+
+<!-- Primary Toast -->
+<div class="pa-toast pa-toast--primary pa-toast--show">
+  <div class="pa-toast__icon">ℹ️</div>
+  <div class="pa-toast__content">
+    <div class="pa-toast__title">Primary</div>
+    <div class="pa-toast__message">This is a primary toast notification.</div>
+  </div>
+  <button class="pa-toast__close" aria-label="Close">✕</button>
+</div>
+
+<!-- Success Toast -->
+<div class="pa-toast pa-toast--success pa-toast--show">
+  <div class="pa-toast__icon">✓</div>
+  <div class="pa-toast__content">
+    <div class="pa-toast__title">Success</div>
+    <div class="pa-toast__message">Your action was completed successfully.</div>
+  </div>
+  <button class="pa-toast__close" aria-label="Close">✕</button>
+</div>
+
+<!-- Danger Toast -->
+<div class="pa-toast pa-toast--danger pa-toast--show">
+  <div class="pa-toast__icon">✕</div>
+  <div class="pa-toast__content">
+    <div class="pa-toast__title">Error</div>
+    <div class="pa-toast__message">An error occurred. Please try again.</div>
+  </div>
+  <button class="pa-toast__close" aria-label="Close">✕</button>
+</div>
+
+<!-- Warning Toast -->
+<div class="pa-toast pa-toast--warning pa-toast--show">
+  <div class="pa-toast__icon">⚠</div>
+  <div class="pa-toast__content">
+    <div class="pa-toast__title">Warning</div>
+    <div class="pa-toast__message">Please review this warning message.</div>
+  </div>
+  <button class="pa-toast__close" aria-label="Close">✕</button>
+</div>
+
+<!-- Info Toast -->
+<div class="pa-toast pa-toast--info pa-toast--show">
+  <div class="pa-toast__icon">ℹ</div>
+  <div class="pa-toast__content">
+    <div class="pa-toast__title">Information</div>
+    <div class="pa-toast__message">Here is some useful information for you.</div>
+  </div>
+  <button class="pa-toast__close" aria-label="Close">✕</button>
+</div>
+
+
+<!-- TOAST WITH PROGRESS BAR -->
+
+<!-- Toast with Auto-dismiss Progress -->
+<div class="pa-toast pa-toast--primary pa-toast--show">
+  <div class="pa-toast__icon">ℹ</div>
+  <div class="pa-toast__content">
+    <div class="pa-toast__title">Processing</div>
+    <div class="pa-toast__message">Your request is being processed...</div>
+  </div>
+  <button class="pa-toast__close" aria-label="Close">✕</button>
+  <div class="pa-toast__progress w-100" style="transition: width 5000ms linear;"></div>
+</div>
+
+
+<!-- JAVASCRIPT API -->
+<script>
+// Create a toast notification
+function createToast(position, variant, title, message, duration = 5000, showProgress = false, persistent = false) {
+  const container = document.getElementById(`toast-container-${position}`);
+  const toastId = `toast-${Date.now()}-${Math.random()}`;
+
+  const toast = document.createElement('div');
+  toast.className = `pa-toast pa-toast--${variant}`;
+  toast.id = toastId;
+
+  const icons = {
+    primary: 'ℹ️',
+    success: '✓',
+    danger: '✕',
+    warning: '⚠',
+    info: 'ℹ'
+  };
+
+  toast.innerHTML = `
+    <div class="pa-toast__icon">${icons[variant] || 'ℹ'}</div>
+    <div class="pa-toast__content">
+      <div class="pa-toast__title">${title}</div>
+      <div class="pa-toast__message">${message}</div>
+    </div>
+    <button class="pa-toast__close" onclick="dismissToast('${toastId}')" aria-label="Close">✕</button>
+    ${showProgress && !persistent ? '<div class="pa-toast__progress w-100"></div>' : ''}
+  `;
+
+  container.appendChild(toast);
+
+  // Show toast
+  setTimeout(() => {
+    toast.classList.add('pa-toast--show');
+  }, 10);
+
+  // Progress bar animation
+  if (showProgress && !persistent) {
+    const progress = toast.querySelector('.pa-toast__progress');
+    if (progress) {
+      progress.style.transition = `width ${duration}ms linear`;
+      setTimeout(() => {
+        progress.style.width = '0%';
+      }, 50);
+    }
+  }
+
+  // Auto-dismiss (only if not persistent)
+  if (!persistent) {
+    setTimeout(() => {
+      dismissToast(toastId);
+    }, duration);
+  }
+}
+
+// Dismiss a toast
+function dismissToast(toastId) {
+  const toast = document.getElementById(toastId);
+  if (!toast) return;
+
+  toast.classList.remove('pa-toast--show');
+  toast.classList.add('pa-toast--hide');
+
+  setTimeout(() => {
+    toast.remove();
+  }, 300);
+}
+
+// Usage examples:
+// createToast('top-right', 'success', 'Success', 'Operation completed!');
+// createToast('top-right', 'warning', 'Warning', 'Please review', 0, false, true); // Persistent
+</script>