npm - @keenthemes/ktui - Versions diffs - 1.0.28 → 1.1.0 - Mend

@keenthemes/ktui 1.0.28 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (288) hide show

package/examples/toast/example.html DELETED Viewed

@@ -1,479 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>KTUI Toast Examples</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-md mt-10 mx-auto">
-<h2 class="text-xl font-bold mb-4">KTUI Toast Examples</h2>
-<!-- Variants -->
-<div class="mb-6">
-  <h3 class="font-semibold mb-2">Variants</h3>
-  <div class="flex flex-wrap gap-2">
-    <button id="toast-variant-info" class="kt-btn">Info</button>
-    <button id="toast-variant-success" class="kt-btn">Success</button>
-    <button id="toast-variant-error" class="kt-btn">Error</button>
-    <button id="toast-variant-warning" class="kt-btn">Warning</button>
-    <button id="toast-variant-primary" class="kt-btn">Primary</button>
-    <button id="toast-variant-secondary" class="kt-btn">Secondary</button>
-    <button id="toast-variant-destructive" class="kt-btn">destructive</button>
-    <button id="toast-variant-mono" class="kt-btn">Mono</button>
-  </div>
-</div>
-<!-- Appearances -->
-<div class="mb-6">
-  <h3 class="font-semibold mb-2">Appearances</h3>
-  <div class="flex flex-wrap gap-2">
-    <button id="toast-appearance-solid" class="kt-btn">Solid</button>
-    <button id="toast-appearance-outline" class="kt-btn">Outline</button>
-    <button id="toast-appearance-light" class="kt-btn">Light</button>
-  </div>
-</div>
-<!-- Sizes -->
-<div class="mb-6">
-  <h3 class="font-semibold mb-2">Sizes</h3>
-  <div class="flex flex-wrap gap-2">
-    <button id="toast-size-sm" class="kt-btn">Small</button>
-    <button id="toast-size-md" class="kt-btn">Medium</button>
-    <button id="toast-size-lg" class="kt-btn">Large</button>
-  </div>
-</div>
-<!-- Position Examples -->
-<div class="mb-6">
-  <h3 class="font-semibold mb-2">Positions</h3>
-  <div class="flex flex-wrap gap-2 mb-2">
-    <button id="toast-pos-top-end" class="kt-btn">Top End (Right)</button>
-    <button id="toast-pos-top-center" class="kt-btn">Top Center</button>
-    <button id="toast-pos-top-start" class="kt-btn">Top Start (Left)</button>
-    <button id="toast-pos-middle-end" class="kt-btn">Middle End (Right)</button>
-    <button id="toast-pos-middle-center" class="kt-btn">Middle Center</button>
-    <button id="toast-pos-middle-start" class="kt-btn">Middle Start (Left)</button>
-    <button id="toast-pos-bottom-end" class="kt-btn">Bottom End (Right)</button>
-    <button id="toast-pos-bottom-center" class="kt-btn">Bottom Center</button>
-    <button id="toast-pos-bottom-start" class="kt-btn">Bottom Start (Left)</button>
-  </div>
-</div>
-<!-- RTL Testing -->
-<div class="mb-6">
-  <h3 class="font-semibold mb-2">RTL Testing</h3>
-  <div class="flex flex-wrap gap-2 mb-2">
-    <button id="toast-rtl-toggle" class="kt-btn kt-btn-primary">Toggle RTL Mode</button>
-    <button id="toast-rtl-test-center" class="kt-btn">Test RTL Top Center</button>
-    <button id="toast-rtl-test-middle-center" class="kt-btn">Test RTL Middle Center</button>
-  </div>
-  <div class="text-xs text-gray-500">Toggle RTL mode to test centering behavior.</div>
-</div>
-<!-- Global Config Example -->
-<div class="mb-6">
-  <h3 class="font-semibold mb-2">Global Config</h3>
-  <div class="flex flex-wrap gap-2 mb-2">
-    <button id="toast-set-global-bottom-end" class="kt-btn kt-btn-primary">Set Global: Bottom End</button>
-    <button id="toast-set-global-top-center" class="kt-btn">Set Global: Top Center</button>
-    <button id="toast-set-global-reset" class="kt-btn">Reset Global Config</button>
-  </div>
-  <div class="text-xs text-gray-500">Current global position will apply to all new toasts unless overridden.</div>
-</div>
-<!-- Other and legacy examples -->
-<div class="flex flex-col gap-3">
-  <button id="toast-basic" class="kt-btn">Basic Toast</button>
-  <button id="toast-custom-headless" class="kt-btn">Custom Headless Toast</button>
-  <button id="toast-description" class="kt-btn">With Description</button>
-  <button id="toast-action" class="kt-btn">With Action Button</button>
-  <button id="toast-cancel" class="kt-btn">With Cancel Button</button>
-  <button id="toast-custom-icon" class="kt-btn">With Custom Icon</button>
-  <button id="toast-invert" class="kt-btn">Inverted Colors</button>
-  <button id="toast-long" class="kt-btn">Long Duration</button>
-  <button id="toast-important" class="kt-btn">Important (No Auto Dismiss)</button>
-  <button id="toast-progress-off" class="kt-btn">No Progress Bar</button>
-  <button id="toast-close-btn-off" class="kt-btn">No Close Button</button>
-  <button id="toast-non-dismissible" class="kt-btn">Non-dismissible</button>
-  <button id="toast-position-top-left" class="kt-btn">Position: Top Left</button>
-  <button id="toast-position-bottom-center" class="kt-btn">Position: Bottom Center</button>
-  <button id="toast-custom-class" class="kt-btn">Custom Class</button>
-  <button id="toast-aria" class="kt-btn">Custom ARIA Role</button>
-  <button id="toast-callbacks" class="kt-btn">With Callbacks</button>
-  <button id="toast-clear" class="kt-btn">Clear All Toasts</button>
-  <button id="toast-beep" class="kt-btn kt-btn-primary">Show Toast with Beep</button>
-<button id="toast-hover" class="kt-btn kt-btn-primary">Show Toast (Pause on Hover)</button>
-</div>
-</div>
-<!-- Hidden template for custom headless toast -->
-<div id="custom-toast-template" style="display:none">
-  <div style="padding:1rem; background:#fff; color:#222; border-radius:8px; min-width:220px; max-width:400px; box-shadow:0 2px 12px rgba(0,0,0,0.12); display:flex; align-items:center; gap:1rem;">
-    <div>
-      <strong>🎉 Custom Headless Toast</strong>
-      <div style="font-size:0.95em; color:#555;">This toast uses your own markup and logic!</div>
-    </div>
-  </div>
-</div>
-<!-- Scripts should be outside the template -->
-<script src="../../dist/ktui.js"></script>
-<script>
-  // --- Position Examples ---
-const posExamples = [
-  { id: 'toast-pos-top-end', position: 'top-end', label: 'Top End (Right)' },
-  { id: 'toast-pos-top-center', position: 'top-center', label: 'Top Center' },
-  { id: 'toast-pos-top-start', position: 'top-start', label: 'Top Start (Left)' },
-  { id: 'toast-pos-middle-end', position: 'middle-end', label: 'Middle End (Right)' },
-  { id: 'toast-pos-middle-center', position: 'middle-center', label: 'Middle Center' },
-  { id: 'toast-pos-middle-start', position: 'middle-start', label: 'Middle Start (Left)' },
-  { id: 'toast-pos-bottom-end', position: 'bottom-end', label: 'Bottom End (Right)' },
-  { id: 'toast-pos-bottom-center', position: 'bottom-center', label: 'Bottom Center' },
-  { id: 'toast-pos-bottom-start', position: 'bottom-start', label: 'Bottom Start (Left)' }
-];
-posExamples.forEach(({ id, position, label }) => {
-  const btn = document.getElementById(id);
-  if (btn) {
-    btn.addEventListener('click', () => {
-      KTToast.show({
-        message: `Toast at ${label}`,
-        position,
-        variant: 'info'
-      });
-    });
-  }
-});
-// --- RTL Testing ---
-let isRTL = false;
-const rtlToggleBtn = document.getElementById('toast-rtl-toggle');
-const rtlTestCenterBtn = document.getElementById('toast-rtl-test-center');
-const rtlTestMiddleCenterBtn = document.getElementById('toast-rtl-test-middle-center');
-if (rtlToggleBtn) {
-  rtlToggleBtn.addEventListener('click', () => {
-    isRTL = !isRTL;
-    document.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');
-    rtlToggleBtn.textContent = isRTL ? 'Switch to LTR' : 'Switch to RTL';
-    rtlToggleBtn.className = isRTL ? 'kt-btn kt-btn-secondary' : 'kt-btn kt-btn-primary';
-  });
-}
-if (rtlTestCenterBtn) {
-  rtlTestCenterBtn.addEventListener('click', () => {
-    KTToast.show({
-      message: `RTL Test: Top Center (${isRTL ? 'RTL' : 'LTR'} mode)`,
-      position: 'top-center',
-      variant: 'info'
-    });
-  });
-}
-if (rtlTestMiddleCenterBtn) {
-  rtlTestMiddleCenterBtn.addEventListener('click', () => {
-    KTToast.show({
-      message: `RTL Test: Middle Center (${isRTL ? 'RTL' : 'LTR'} mode)`,
-      position: 'middle-center',
-      variant: 'success'
-    });
-  });
-}
-// --- Global Config Example ---
-const defaultGlobalConfig = {
-  position: 'top-end',
-  duration: 4000,
-  maxToasts: 5,
-  gap: 10,
-  dismiss: true
-};
-KTToast.config({ ...defaultGlobalConfig }); // Ensure default on load
-const btnGlobalBottomEnd = document.getElementById('toast-set-global-bottom-end');
-const btnGlobalTopCenter = document.getElementById('toast-set-global-top-center');
-const btnGlobalReset = document.getElementById('toast-set-global-reset');
-if (btnGlobalBottomEnd) {
-  btnGlobalBottomEnd.addEventListener('click', () => {
-    KTToast.config({ position: 'bottom-end' });
-    KTToast.show({ message: 'Global position set to Bottom End (Right)', variant: 'primary' });
-  });
-}
-if (btnGlobalTopCenter) {
-  btnGlobalTopCenter.addEventListener('click', () => {
-    KTToast.config({ position: 'top-center' });
-    KTToast.show({ message: 'Global position set to Top Center', variant: 'primary' });
-  });
-}
-if (btnGlobalReset) {
-  btnGlobalReset.addEventListener('click', () => {
-    KTToast.config({ ...defaultGlobalConfig });
-    KTToast.show({ message: 'Global config reset to default', variant: 'primary' });
-  });
-}
-// Beep toast demo
-  document.getElementById('toast-beep').addEventListener('click', function() {
-    KTToast.show({
-      message: 'Beep! Toast with sound.',
-      variant: 'success',
-      beep: true
-    });
-  });
-  // Pause on hover toast demo
-  document.getElementById('toast-hover').addEventListener('click', function() {
-    KTToast.show({
-      message: 'This toast will pause auto-dismiss while hovered!',
-      variant: 'info',
-      pauseOnHover: true,
-      progress: true,
-      duration: 4000
-    });
-  });
-		// --- Variants ---
-		const variants = ['info', 'success', 'error', 'warning', 'primary', 'secondary', 'destructive', 'mono'];
-		variants.forEach(variant => {
-			const btn = document.getElementById(`toast-variant-${variant}`);
-			if (btn) {
-				btn.addEventListener('click', () => {
-					KTToast.show({
-						message: `${variant.charAt(0).toUpperCase() + variant.slice(1)} variant`,
-						variant
-					});
-				});
-			}
-		});
-		// --- Appearances ---
-		const appearances = ['solid', 'outline', 'light'];
-		appearances.forEach(appearance => {
-			const btn = document.getElementById(`toast-appearance-${appearance}`);
-			if (btn) {
-				btn.addEventListener('click', () => {
-					KTToast.show({
-						message: `${appearance.charAt(0).toUpperCase() + appearance.slice(1)} appearance`,
-						variant: 'info',
-						appearance
-					});
-				});
-			}
-		});
-		// --- Sizes ---
-		const sizes = ['sm', 'md', 'lg'];
-		sizes.forEach(size => {
-			const btn = document.getElementById(`toast-size-${size}`);
-			if (btn) {
-				btn.addEventListener('click', () => {
-					KTToast.show({
-						message: `${size.toUpperCase()} size`,
-						variant: 'success',
-						size
-					});
-				});
-			}
-		});
-		// --- Legacy/other examples ---
-		// Basic toast
-		const btnBasic = document.getElementById('toast-basic');
-		btnBasic.addEventListener('click', () => {
-			KTToast.show({ message: 'This is a basic toast!' });
-		});
-		// With description
-		const btnDesc = document.getElementById('toast-description');
-		btnDesc.addEventListener('click', () => {
-			KTToast.show({
-				message: 'Saved!',
-				description: 'Your changes have been saved successfully.',
-				variant: 'success',
-				duration: 3500
-			});
-		});
-		// With action
-		const btnAction = document.getElementById('toast-action');
-		btnAction.addEventListener('click', () => {
-			KTToast.show({
-				message: 'File uploaded',
-				description: 'Click undo to revert this action.',
-				variant: 'info',
-				action: {
-					label: 'Undo',
-					className: 'text-white kt-link kt-link-underlined',
-					onClick: (id) => {
-						KTToast.show({ message: 'Undo clicked!', variant: 'warning' });
-					}
-				}
-			});
-		});
-		// With cancel
-		const btnCancel = document.getElementById('toast-cancel');
-		btnCancel.addEventListener('click', () => {
-			KTToast.show({
-				message: 'Are you sure?',
-				description: 'You can cancel this operation.',
-				variant: 'warning',
-				cancel: {
-					label: 'Cancel',
-					onClick: (id) => {
-						KTToast.show({ message: 'Cancelled!', variant: 'info' });
-					}
-				}
-			});
-		});
-    // Custom icon
-    const btnCustomIcon = document.getElementById('toast-custom-icon');
-    btnCustomIcon.addEventListener('click', () => {
-      KTToast.show({
-        message: 'Custom Icon!',
-        icon: '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>',
-        variant: 'success'
-      });
-    });
-    // Inverted colors
-    const btnInvert = document.getElementById('toast-invert');
-    btnInvert.addEventListener('click', () => {
-      KTToast.show({
-        message: 'Inverted colors!',
-        invert: true,
-        variant: 'info'
-      });
-    });
-    // Long duration
-    const btnLong = document.getElementById('toast-long');
-    btnLong.addEventListener('click', () => {
-      KTToast.show({
-        message: 'This toast will last 10 seconds.',
-        duration: 10000,
-        variant: 'info'
-      });
-    });
-    // Important (no auto dismiss)
-    const btnImportant = document.getElementById('toast-important');
-    btnImportant.addEventListener('click', () => {
-      KTToast.show({
-        message: 'This toast will not auto-dismiss.',
-        important: true,
-        variant: 'error'
-      });
-    });
-    // No progress bar
-    const btnProgressOff = document.getElementById('toast-progress-off');
-    btnProgressOff.addEventListener('click', () => {
-      KTToast.show({
-        message: 'Progress bar!',
-        progress: true,
-        variant: 'info'
-      });
-    });
-    // No close button
-    const btnCloseBtnOff = document.getElementById('toast-close-btn-off');
-    btnCloseBtnOff.addEventListener('click', () => {
-      KTToast.show({
-        message: 'No close button!',
-        closeButton: false,
-        variant: 'warning'
-      });
-    });
-    // Non-dismissible
-    const btnNonDismiss = document.getElementById('toast-non-dismissible');
-    btnNonDismiss.addEventListener('click', () => {
-      KTToast.show({
-        message: 'You cannot dismiss this toast by clicking it.',
-        dismissible: false,
-        variant: 'info'
-      });
-    });
-    // Position top left
-    const btnTopLeft = document.getElementById('toast-position-top-left');
-    btnTopLeft.addEventListener('click', () => {
-      KTToast.show({
-        message: 'Top left!',
-        position: 'top-start',
-        variant: 'success'
-      });
-    });
-    // Position bottom center
-    const btnBottomCenter = document.getElementById('toast-position-bottom-center');
-    btnBottomCenter.addEventListener('click', () => {
-      KTToast.show({
-        message: 'Bottom center!',
-        position: 'bottom-center',
-        variant: 'info'
-      });
-    });
-    // Custom class
-    const btnCustomClass = document.getElementById('toast-custom-class');
-    btnCustomClass.addEventListener('click', () => {
-      KTToast.show({
-        message: 'Custom class!',
-        className: 'bg-pink-500 text-white',
-        variant: 'info'
-      });
-    });
-    // Custom ARIA role
-    const btnAria = document.getElementById('toast-aria');
-    btnAria.addEventListener('click', () => {
-      KTToast.show({
-        message: 'Custom ARIA role!',
-        role: 'alert',
-        variant: 'info'
-      });
-    });
-    // With callbacks
-    const btnCallbacks = document.getElementById('toast-callbacks');
-    btnCallbacks.addEventListener('click', () => {
-      KTToast.show({
-        message: 'Watch the console!',
-        variant: 'info',
-        onAutoClose: (id) => {
-          console.log('Toast auto-closed:', id);
-        },
-        onDismiss: (id) => {
-          console.log('Toast dismissed:', id);
-        }
-      });
-    });
-    // Custom headless toast
-    const btnCustomHeadless = document.getElementById('toast-custom-headless');
-    btnCustomHeadless.addEventListener('click', () => {
-      KTToast.show({
-        content: `
-          <div class="text-white flex items-center gap-2">
-            <span>Custom content</span>
-            <button data-kt-toast-dismiss="true" class="kt-btn">&times;</button>
-          </div>
-        `
-      });
-    });
-    // Clear all toasts
-    const btnClear = document.getElementById('toast-clear');
-    btnClear.addEventListener('click', () => {
-      KTToast.clearAll();
-    });
-</script>
-</body>
-</html>