fix: DockerSecretsResolver - don't normalize absolute paths like /var/www/html/...
Some checks failed
Deploy Application / deploy (push) Has been cancelled
Some checks failed
Deploy Application / deploy (push) Has been cancelled
This commit is contained in:
@@ -28,16 +28,16 @@
|
||||
--admin-container-wide: 1400px;
|
||||
|
||||
/* Sidebar Widths per Breakpoint */
|
||||
--admin-sidebar-width-mobile: 100%;
|
||||
--admin-sidebar-width-tablet: 250px;
|
||||
--admin-sidebar-width-desktop: 250px;
|
||||
--admin-sidebar-width-wide: 280px;
|
||||
--sidebar-width-mobile: 100%;
|
||||
--sidebar-width-tablet: 250px;
|
||||
--sidebar-width-desktop: 250px;
|
||||
--sidebar-width-wide: 280px;
|
||||
|
||||
/* Header Heights per Breakpoint */
|
||||
--admin-header-height-mobile: 3.5rem;
|
||||
--admin-header-height-tablet: 4rem;
|
||||
--admin-header-height-desktop: 4rem;
|
||||
--admin-header-height-wide: 4.5rem;
|
||||
--header-height-mobile: 2.5rem;
|
||||
--header-height-tablet: 3rem;
|
||||
--header-height-desktop: 3rem;
|
||||
--header-height-wide: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,16 +4,123 @@
|
||||
* This file is automatically generated from AdminTokenRegistry.
|
||||
* To modify tokens, edit: src/Application/Admin/ValueObjects/AdminTokenRegistry.php
|
||||
*
|
||||
* Generated: 2025-11-07 (Placeholder - run 'php console.php design:generate-tokens --scope=admin' to regenerate)
|
||||
* Generated: 2025-11-21 13:01:06
|
||||
* Source: AdminTokenRegistry
|
||||
* Scope: admin
|
||||
* Architecture: ITCSS
|
||||
*
|
||||
* NOTE: This is a placeholder file. Run the following command to generate the actual tokens:
|
||||
* php console.php design:generate-tokens --scope=admin
|
||||
*/
|
||||
|
||||
@layer admin-settings {
|
||||
/* Placeholder - tokens will be generated by design:generate-tokens command */
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-primary: oklch(98% 0.01 280); /* Color: bg-primary */
|
||||
--bg-secondary: oklch(95% 0.01 280); /* Color: bg-secondary */
|
||||
--bg-tertiary: oklch(92% 0.01 280); /* Color: bg-tertiary */
|
||||
--sidebar-bg: oklch(25% 0.02 280); /* Color: sidebar-bg */
|
||||
--sidebar-text: oklch(90% 0.01 280); /* Color: sidebar-text */
|
||||
--sidebar-text-hover: oklch(100% 0 0); /* Color: sidebar-text-hover */
|
||||
--sidebar-active: oklch(45% 0.15 280); /* Color: sidebar-active */
|
||||
--sidebar-border: oklch(30% 0.02 280); /* Color: sidebar-border */
|
||||
--header-bg: oklch(100% 0 0); /* Color: header-bg */
|
||||
--header-border: oklch(85% 0.01 280); /* Color: header-border */
|
||||
--header-text: oklch(20% 0.02 280); /* Color: header-text */
|
||||
--content-bg: oklch(100% 0 0); /* Color: content-bg */
|
||||
--content-text: oklch(20% 0.02 280); /* Color: content-text */
|
||||
--link-color: oklch(55% 0.2 260); /* Color: link-color */
|
||||
--link-hover: oklch(45% 0.25 260); /* Color: link-hover */
|
||||
--link-active: oklch(35% 0.3 260); /* Color: link-active */
|
||||
--accent-primary: oklch(60% 0.2 280); /* Color: accent-primary */
|
||||
--accent-success: oklch(65% 0.2 145); /* Color: accent-success */
|
||||
--accent-warning: oklch(70% 0.2 85); /* Color: accent-warning */
|
||||
--accent-error: oklch(60% 0.25 25); /* Color: accent-error */
|
||||
--accent-info: oklch(65% 0.2 240); /* Color: accent-info */
|
||||
--border-light: oklch(90% 0.01 280); /* Color: border-light */
|
||||
--border-medium: oklch(80% 0.02 280); /* Color: border-medium */
|
||||
--border-dark: oklch(70% 0.02 280); /* Color: border-dark */
|
||||
--focus-ring: oklch(55% 0.2 260); /* Color: focus-ring */
|
||||
--hover-overlay: oklch(0% 0 0 / 0.05); /* Color: hover-overlay */
|
||||
--spacing-xs: 0.25rem; /* Extra small spacing */
|
||||
--spacing-sm: 0.5rem; /* Small spacing */
|
||||
--spacing-md: 1rem; /* Medium spacing */
|
||||
--spacing-lg: 1.5rem; /* Large spacing */
|
||||
--spacing-xl: 2rem; /* Extra large spacing */
|
||||
--spacing-2xl: 3rem; /* Double extra large spacing */
|
||||
--spacing-sidebar: 250px; /* Sidebar width */
|
||||
--spacing-sidebar-wide: 280px; /* Sidebar width on wide screens */
|
||||
--spacing-header: 4rem; /* Header height */
|
||||
--spacing-content-padding: 2rem; /* Content padding */
|
||||
--spacing-content-max-width: 1400px; /* Content maximum width */
|
||||
--font-size-xs: 0.75rem; /* Extra small font size */
|
||||
--font-size-sm: 0.875rem; /* Small font size */
|
||||
--font-size-base: 1rem; /* Base font size */
|
||||
--font-size-lg: 1.125rem; /* Large font size */
|
||||
--font-size-xl: 1.25rem; /* Extra large font size */
|
||||
--font-size-2xl: 1.5rem; /* Double extra large font size */
|
||||
--font-size-3xl: 1.875rem; /* Triple extra large font size */
|
||||
--radius-sm: 0.25rem; /* Small border radius */
|
||||
--radius-md: 0.375rem; /* Medium border radius */
|
||||
--radius-lg: 0.5rem; /* Large border radius */
|
||||
--radius-xl: 0.75rem; /* Extra large border radius */
|
||||
--radius-full: 9999px; /* Full border radius (pill shape) */
|
||||
--transition-fast: 0.15s ease; /* Fast transition */
|
||||
--transition-base: 0.2s ease; /* Base transition */
|
||||
--transition-slow: 0.3s ease; /* Slow transition */
|
||||
--shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.05); /* Small shadow */
|
||||
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -1px oklch(0% 0 0 / 0.06); /* Medium shadow */
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -2px oklch(0% 0 0 / 0.05); /* Large shadow */
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 10px 10px -5px oklch(0% 0 0 / 0.04); /* Extra large shadow */
|
||||
--icon-size-sm: 16px; /* Small icon size */
|
||||
--icon-size-md: 18px; /* Medium icon size */
|
||||
--icon-size-lg: 24px; /* Large icon size */
|
||||
--z-base: 1; /* Base z-index */
|
||||
--z-header: 90; /* Header z-index */
|
||||
--z-sidebar: 100; /* Sidebar z-index */
|
||||
--z-dropdown: 110; /* Dropdown z-index */
|
||||
--z-overlay: 120; /* Overlay z-index */
|
||||
--z-modal: 130; /* Modal z-index */
|
||||
--z-tooltip: 140; /* Tooltip z-index */
|
||||
--z-toast: 150; /* Toast z-index */
|
||||
--line-height-tight: 1.25; /* Tight line height */
|
||||
--line-height-normal: 1.5; /* Normal line height */
|
||||
--line-height-relaxed: 1.75; /* Relaxed line height */
|
||||
--container-mobile: 100px; /* Mobile container width (100%) */
|
||||
--container-tablet: 720px; /* Tablet container width */
|
||||
--container-desktop: 960px; /* Desktop container width */
|
||||
--container-wide: 1400px; /* Wide container width */
|
||||
--breakpoint-tablet: 768px; /* Tablet breakpoint */
|
||||
--breakpoint-desktop: 1024px; /* Desktop breakpoint */
|
||||
--breakpoint-wide: 1440px; /* Wide breakpoint */
|
||||
}
|
||||
@media (dynamic-range: high) {
|
||||
}
|
||||
@supports (color: color(display-p3 1 0 0)) {
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: oklch(20% 0.02 280); /* Dark mode variant */
|
||||
--bg-secondary: oklch(23% 0.02 280); /* Dark mode variant */
|
||||
--bg-tertiary: oklch(26% 0.02 280); /* Dark mode variant */
|
||||
--sidebar-bg: oklch(15% 0.02 280); /* Dark mode variant */
|
||||
--sidebar-text: oklch(75% 0.02 280); /* Dark mode variant */
|
||||
--sidebar-text-hover: oklch(95% 0.01 280); /* Dark mode variant */
|
||||
--sidebar-active: oklch(35% 0.2 280); /* Dark mode variant */
|
||||
--sidebar-border: oklch(25% 0.02 280); /* Dark mode variant */
|
||||
--header-bg: oklch(18% 0.02 280); /* Dark mode variant */
|
||||
--header-border: oklch(30% 0.02 280); /* Dark mode variant */
|
||||
--header-text: oklch(90% 0.01 280); /* Dark mode variant */
|
||||
--content-bg: oklch(20% 0.02 280); /* Dark mode variant */
|
||||
--content-text: oklch(90% 0.01 280); /* Dark mode variant */
|
||||
--link-color: oklch(70% 0.2 260); /* Dark mode variant */
|
||||
--link-hover: oklch(80% 0.22 260); /* Dark mode variant */
|
||||
--link-active: oklch(85% 0.25 260); /* Dark mode variant */
|
||||
--accent-primary: oklch(65% 0.22 280); /* Dark mode variant */
|
||||
--accent-success: oklch(70% 0.22 145); /* Dark mode variant */
|
||||
--accent-warning: oklch(75% 0.22 85); /* Dark mode variant */
|
||||
--accent-error: oklch(65% 0.27 25); /* Dark mode variant */
|
||||
--accent-info: oklch(70% 0.22 240); /* Dark mode variant */
|
||||
--border-light: oklch(30% 0.02 280); /* Dark mode variant */
|
||||
--border-medium: oklch(35% 0.02 280); /* Dark mode variant */
|
||||
--border-dark: oklch(40% 0.02 280); /* Dark mode variant */
|
||||
--focus-ring: oklch(70% 0.2 260); /* Dark mode variant */
|
||||
--hover-overlay: oklch(100% 0 0 / 0.05); /* Dark mode variant */
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,77 +10,77 @@
|
||||
/* Color Tokens - OKLCH (Perceptual Color Space) */
|
||||
|
||||
/* Primary Background Colors */
|
||||
--admin-bg-primary: oklch(98% 0.01 280);
|
||||
--admin-bg-secondary: oklch(95% 0.01 280);
|
||||
--admin-bg-tertiary: oklch(92% 0.01 280);
|
||||
--bg-primary: oklch(98% 0.01 280);
|
||||
--bg-secondary: oklch(95% 0.01 280);
|
||||
--bg-tertiary: oklch(92% 0.01 280);
|
||||
|
||||
/* Sidebar Colors */
|
||||
--admin-sidebar-bg: oklch(25% 0.02 280);
|
||||
--admin-sidebar-text: oklch(90% 0.01 280);
|
||||
--admin-sidebar-text-hover: oklch(100% 0 0);
|
||||
--admin-sidebar-active: oklch(45% 0.15 280);
|
||||
--admin-sidebar-border: oklch(30% 0.02 280);
|
||||
--sidebar-bg: oklch(25% 0.02 280);
|
||||
--sidebar-text: oklch(90% 0.01 280);
|
||||
--sidebar-text-hover: oklch(100% 0 0);
|
||||
--sidebar-active: oklch(45% 0.15 280);
|
||||
--sidebar-border: oklch(30% 0.02 280);
|
||||
|
||||
/* Header Colors */
|
||||
--admin-header-bg: oklch(100% 0 0);
|
||||
--admin-header-border: oklch(85% 0.01 280);
|
||||
--admin-header-text: oklch(20% 0.02 280);
|
||||
--header-bg: oklch(100% 0 0);
|
||||
--header-border: oklch(85% 0.01 280);
|
||||
--header-text: oklch(20% 0.02 280);
|
||||
|
||||
/* Content Area */
|
||||
--admin-content-bg: oklch(100% 0 0);
|
||||
--admin-content-text: oklch(20% 0.02 280);
|
||||
--content-bg: oklch(100% 0 0);
|
||||
--content-text: oklch(20% 0.02 280);
|
||||
|
||||
/* Interactive Elements */
|
||||
--admin-link-color: oklch(55% 0.2 260);
|
||||
--admin-link-hover: oklch(45% 0.25 260);
|
||||
--admin-link-active: oklch(35% 0.3 260);
|
||||
--link-color: oklch(55% 0.2 260);
|
||||
--link-hover: oklch(45% 0.25 260);
|
||||
--link-active: oklch(35% 0.3 260);
|
||||
|
||||
/* Accent Colors - WCAG AA Compliant (4.5:1 minimum) */
|
||||
--admin-accent-primary: oklch(60% 0.2 280);
|
||||
--admin-accent-success: oklch(58% 0.22 145); /* Fixed: 4.8:1 contrast */
|
||||
--admin-accent-warning: oklch(62% 0.22 85); /* Fixed: 4.6:1 contrast */
|
||||
--admin-accent-error: oklch(60% 0.25 25);
|
||||
--admin-accent-info: oklch(58% 0.22 240); /* Fixed: 5.1:1 contrast */
|
||||
--accent-primary: oklch(60% 0.2 280);
|
||||
--accent-success: oklch(58% 0.22 145); /* Fixed: 4.8:1 contrast */
|
||||
--accent-warning: oklch(62% 0.22 85); /* Fixed: 4.6:1 contrast */
|
||||
--accent-error: oklch(60% 0.25 25);
|
||||
--accent-info: oklch(58% 0.22 240); /* Fixed: 5.1:1 contrast */
|
||||
|
||||
/* Border Colors - WCAG AA Compliant (3:1 for UI components) */
|
||||
--admin-border-light: oklch(75% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--admin-border-medium: oklch(70% 0.02 280); /* Already compliant: 3.5:1 */
|
||||
--admin-border-dark: oklch(70% 0.02 280);
|
||||
--border-light: oklch(75% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--border-medium: oklch(70% 0.02 280); /* Already compliant: 3.5:1 */
|
||||
--border-dark: oklch(70% 0.02 280);
|
||||
|
||||
/* Focus/Hover States */
|
||||
--admin-focus-ring: oklch(55% 0.2 260);
|
||||
--admin-hover-overlay: oklch(0% 0 0 / 0.05);
|
||||
--focus-ring: oklch(55% 0.2 260);
|
||||
--hover-overlay: oklch(0% 0 0 / 0.05);
|
||||
|
||||
/* Spacing Tokens */
|
||||
|
||||
/* Layout Spacing */
|
||||
--admin-spacing-sidebar: 250px;
|
||||
--admin-spacing-header: 4rem;
|
||||
--admin-spacing-content-padding: 2rem;
|
||||
--admin-spacing-content-max-width: 1400px;
|
||||
--spacing-sidebar: 250px;
|
||||
--spacing-header: 4rem;
|
||||
--spacing-content-padding: 2rem;
|
||||
--spacing-content-max-width: 1400px;
|
||||
|
||||
/* Component Spacing */
|
||||
--admin-spacing-xs: 0.25rem;
|
||||
--admin-spacing-sm: 0.5rem;
|
||||
--admin-spacing-md: 1rem;
|
||||
--admin-spacing-lg: 1.5rem;
|
||||
--admin-spacing-xl: 2rem;
|
||||
--admin-spacing-2xl: 3rem;
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
|
||||
/* Typography Tokens */
|
||||
|
||||
/* Font Families */
|
||||
--admin-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--admin-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
|
||||
--font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
|
||||
|
||||
/* Font Sizes */
|
||||
--admin-font-size-xs: 0.75rem;
|
||||
--admin-font-size-sm: 0.875rem;
|
||||
--admin-font-size-base: 1rem;
|
||||
--admin-font-size-lg: 1.125rem;
|
||||
--admin-font-size-xl: 1.25rem;
|
||||
--admin-font-size-2xl: 1.5rem;
|
||||
--admin-font-size-3xl: 1.875rem;
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
|
||||
/* Line Heights */
|
||||
--admin-line-height-tight: 1.25;
|
||||
@@ -88,129 +88,129 @@
|
||||
--admin-line-height-relaxed: 1.75;
|
||||
|
||||
/* Font Weights */
|
||||
--admin-font-weight-normal: 400;
|
||||
--admin-font-weight-medium: 500;
|
||||
--admin-font-weight-semibold: 600;
|
||||
--admin-font-weight-bold: 700;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* Z-Index Hierarchy */
|
||||
--admin-z-base: 1;
|
||||
--admin-z-header: 90;
|
||||
--admin-z-sidebar: 100;
|
||||
--admin-z-mobile-menu: 110;
|
||||
--admin-z-overlay: 120;
|
||||
--admin-z-modal: 130;
|
||||
--admin-z-tooltip: 140;
|
||||
--admin-z-toast: 150;
|
||||
--z-base: 1;
|
||||
--z-header: 90;
|
||||
--z-sidebar: 100;
|
||||
--z-mobile-menu: 110;
|
||||
--z-overlay: 120;
|
||||
--z-modal: 130;
|
||||
--z-tooltip: 140;
|
||||
--z-toast: 150;
|
||||
|
||||
/* Animation/Transition Tokens */
|
||||
--admin-transition-fast: 0.15s ease;
|
||||
--admin-transition-base: 0.2s ease;
|
||||
--admin-transition-slow: 0.3s ease;
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-base: 0.2s ease;
|
||||
--transition-slow: 0.3s ease;
|
||||
|
||||
/* Border Radius */
|
||||
--admin-radius-sm: 0.25rem;
|
||||
--admin-radius-md: 0.375rem;
|
||||
--admin-radius-lg: 0.5rem;
|
||||
--admin-radius-xl: 0.75rem;
|
||||
--admin-radius-full: 9999px;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadow Tokens */
|
||||
--admin-shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
|
||||
--admin-shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -1px oklch(0% 0 0 / 0.06);
|
||||
--admin-shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -2px oklch(0% 0 0 / 0.05);
|
||||
--admin-shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 10px 10px -5px oklch(0% 0 0 / 0.04);
|
||||
--shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -1px oklch(0% 0 0 / 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -2px oklch(0% 0 0 / 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 10px 10px -5px oklch(0% 0 0 / 0.04);
|
||||
}
|
||||
|
||||
/* Dark Mode Overrides */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Primary Background Colors */
|
||||
--admin-bg-primary: oklch(20% 0.02 280);
|
||||
--admin-bg-secondary: oklch(23% 0.02 280);
|
||||
--admin-bg-tertiary: oklch(26% 0.02 280);
|
||||
--bg-primary: oklch(20% 0.02 280);
|
||||
--bg-secondary: oklch(23% 0.02 280);
|
||||
--bg-tertiary: oklch(26% 0.02 280);
|
||||
|
||||
/* Sidebar Colors */
|
||||
--admin-sidebar-bg: oklch(15% 0.02 280);
|
||||
--admin-sidebar-text: oklch(75% 0.02 280);
|
||||
--admin-sidebar-text-hover: oklch(95% 0.01 280);
|
||||
--admin-sidebar-active: oklch(35% 0.2 280);
|
||||
--admin-sidebar-border: oklch(25% 0.02 280);
|
||||
--sidebar-bg: oklch(15% 0.02 280);
|
||||
--sidebar-text: oklch(75% 0.02 280);
|
||||
--sidebar-text-hover: oklch(95% 0.01 280);
|
||||
--sidebar-active: oklch(35% 0.2 280);
|
||||
--sidebar-border: oklch(25% 0.02 280);
|
||||
|
||||
/* Header Colors */
|
||||
--admin-header-bg: oklch(18% 0.02 280);
|
||||
--admin-header-border: oklch(30% 0.02 280);
|
||||
--admin-header-text: oklch(90% 0.01 280);
|
||||
--header-bg: oklch(18% 0.02 280);
|
||||
--header-border: oklch(30% 0.02 280);
|
||||
--header-text: oklch(90% 0.01 280);
|
||||
|
||||
/* Content Area */
|
||||
--admin-content-bg: oklch(20% 0.02 280);
|
||||
--admin-content-text: oklch(90% 0.01 280);
|
||||
--content-bg: oklch(20% 0.02 280);
|
||||
--content-text: oklch(90% 0.01 280);
|
||||
|
||||
/* Interactive Elements */
|
||||
--admin-link-color: oklch(70% 0.2 260);
|
||||
--admin-link-hover: oklch(80% 0.22 260);
|
||||
--admin-link-active: oklch(85% 0.25 260);
|
||||
--link-color: oklch(70% 0.2 260);
|
||||
--link-hover: oklch(80% 0.22 260);
|
||||
--link-active: oklch(85% 0.25 260);
|
||||
|
||||
/* Border Colors - WCAG AA Compliant (3:1 for UI components) */
|
||||
--admin-border-light: oklch(42% 0.02 280); /* Fixed: 3.1:1 contrast */
|
||||
--admin-border-medium: oklch(48% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--admin-border-dark: oklch(55% 0.02 280); /* Fixed: 4.2:1 contrast */
|
||||
--border-light: oklch(42% 0.02 280); /* Fixed: 3.1:1 contrast */
|
||||
--border-medium: oklch(48% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--border-dark: oklch(55% 0.02 280); /* Fixed: 4.2:1 contrast */
|
||||
|
||||
/* Focus/Hover States */
|
||||
--admin-focus-ring: oklch(70% 0.2 260);
|
||||
--admin-hover-overlay: oklch(100% 0 0 / 0.05);
|
||||
--focus-ring: oklch(70% 0.2 260);
|
||||
--hover-overlay: oklch(100% 0 0 / 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* Manual Dark Mode via data-theme attribute */
|
||||
[data-theme="dark"] {
|
||||
/* Same as prefers-color-scheme: dark */
|
||||
--admin-bg-primary: oklch(20% 0.02 280);
|
||||
--admin-bg-secondary: oklch(23% 0.02 280);
|
||||
--admin-bg-tertiary: oklch(26% 0.02 280);
|
||||
--admin-sidebar-bg: oklch(15% 0.02 280);
|
||||
--admin-sidebar-text: oklch(75% 0.02 280);
|
||||
--admin-sidebar-text-hover: oklch(95% 0.01 280);
|
||||
--admin-sidebar-active: oklch(35% 0.2 280);
|
||||
--admin-sidebar-border: oklch(25% 0.02 280);
|
||||
--admin-header-bg: oklch(18% 0.02 280);
|
||||
--admin-header-border: oklch(30% 0.02 280);
|
||||
--admin-header-text: oklch(90% 0.01 280);
|
||||
--admin-content-bg: oklch(20% 0.02 280);
|
||||
--admin-content-text: oklch(90% 0.01 280);
|
||||
--admin-link-color: oklch(70% 0.2 260);
|
||||
--admin-link-hover: oklch(80% 0.22 260);
|
||||
--admin-link-active: oklch(85% 0.25 260);
|
||||
--admin-border-light: oklch(42% 0.02 280); /* Fixed: 3.1:1 contrast */
|
||||
--admin-border-medium: oklch(48% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--admin-border-dark: oklch(55% 0.02 280); /* Fixed: 4.2:1 contrast */
|
||||
--admin-focus-ring: oklch(70% 0.2 260);
|
||||
--admin-hover-overlay: oklch(100% 0 0 / 0.05);
|
||||
--bg-primary: oklch(20% 0.02 280);
|
||||
--bg-secondary: oklch(23% 0.02 280);
|
||||
--bg-tertiary: oklch(26% 0.02 280);
|
||||
--sidebar-bg: oklch(15% 0.02 280);
|
||||
--sidebar-text: oklch(75% 0.02 280);
|
||||
--sidebar-text-hover: oklch(95% 0.01 280);
|
||||
--sidebar-active: oklch(35% 0.2 280);
|
||||
--sidebar-border: oklch(25% 0.02 280);
|
||||
--header-bg: oklch(18% 0.02 280);
|
||||
--header-border: oklch(30% 0.02 280);
|
||||
--header-text: oklch(90% 0.01 280);
|
||||
--content-bg: oklch(20% 0.02 280);
|
||||
--content-text: oklch(90% 0.01 280);
|
||||
--link-color: oklch(70% 0.2 260);
|
||||
--link-hover: oklch(80% 0.22 260);
|
||||
--link-active: oklch(85% 0.25 260);
|
||||
--border-light: oklch(42% 0.02 280); /* Fixed: 3.1:1 contrast */
|
||||
--border-medium: oklch(48% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--border-dark: oklch(55% 0.02 280); /* Fixed: 4.2:1 contrast */
|
||||
--focus-ring: oklch(70% 0.2 260);
|
||||
--hover-overlay: oklch(100% 0 0 / 0.05);
|
||||
}
|
||||
|
||||
/* Light Mode Override */
|
||||
[data-theme="light"] {
|
||||
/* Explicit light mode tokens */
|
||||
--admin-bg-primary: oklch(98% 0.01 280);
|
||||
--admin-bg-secondary: oklch(95% 0.01 280);
|
||||
--admin-bg-tertiary: oklch(92% 0.01 280);
|
||||
--admin-sidebar-bg: oklch(25% 0.02 280);
|
||||
--admin-sidebar-text: oklch(90% 0.01 280);
|
||||
--admin-sidebar-text-hover: oklch(100% 0 0);
|
||||
--admin-sidebar-active: oklch(45% 0.15 280);
|
||||
--admin-sidebar-border: oklch(30% 0.02 280);
|
||||
--admin-header-bg: oklch(100% 0 0);
|
||||
--admin-header-border: oklch(85% 0.01 280);
|
||||
--admin-header-text: oklch(20% 0.02 280);
|
||||
--admin-content-bg: oklch(100% 0 0);
|
||||
--admin-content-text: oklch(20% 0.02 280);
|
||||
--admin-link-color: oklch(55% 0.2 260);
|
||||
--admin-link-hover: oklch(45% 0.25 260);
|
||||
--admin-link-active: oklch(35% 0.3 260);
|
||||
--admin-border-light: oklch(75% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--admin-border-medium: oklch(70% 0.02 280); /* Already compliant: 3.5:1 */
|
||||
--admin-border-dark: oklch(70% 0.02 280);
|
||||
--admin-focus-ring: oklch(55% 0.2 260);
|
||||
--admin-hover-overlay: oklch(0% 0 0 / 0.05);
|
||||
--bg-primary: oklch(98% 0.01 280);
|
||||
--bg-secondary: oklch(95% 0.01 280);
|
||||
--bg-tertiary: oklch(92% 0.01 280);
|
||||
--sidebar-bg: oklch(25% 0.02 280);
|
||||
--sidebar-text: oklch(90% 0.01 280);
|
||||
--sidebar-text-hover: oklch(100% 0 0);
|
||||
--sidebar-active: oklch(45% 0.15 280);
|
||||
--sidebar-border: oklch(30% 0.02 280);
|
||||
--header-bg: oklch(100% 0 0);
|
||||
--header-border: oklch(85% 0.01 280);
|
||||
--header-text: oklch(20% 0.02 280);
|
||||
--content-bg: oklch(100% 0 0);
|
||||
--content-text: oklch(20% 0.02 280);
|
||||
--link-color: oklch(55% 0.2 260);
|
||||
--link-hover: oklch(45% 0.25 260);
|
||||
--link-active: oklch(35% 0.3 260);
|
||||
--border-light: oklch(75% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--border-medium: oklch(70% 0.02 280); /* Already compliant: 3.5:1 */
|
||||
--border-dark: oklch(70% 0.02 280);
|
||||
--focus-ring: oklch(55% 0.2 260);
|
||||
--hover-overlay: oklch(0% 0 0 / 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
* Konsistenter Focus-Ring für Tastatur-Navigation.
|
||||
*/
|
||||
.admin-focus-ring {
|
||||
outline: 2px solid var(--admin-focus-ring);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@media (--admin-reduced-motion) {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.admin-smooth-scroll {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* Minimal reset für Admin-Interface, baut auf Framework-Reset auf.
|
||||
*/
|
||||
|
||||
@layer admin-generic {
|
||||
@layer reset {
|
||||
/**
|
||||
* Box Sizing
|
||||
*/
|
||||
@@ -43,19 +43,19 @@
|
||||
* Links
|
||||
*/
|
||||
.admin-layout a {
|
||||
color: var(--admin-link-color);
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
transition: color var(--admin-transition-fast);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.admin-layout a:hover {
|
||||
color: var(--admin-link-hover);
|
||||
color: var(--link-hover);
|
||||
}
|
||||
|
||||
.admin-layout a:focus-visible {
|
||||
outline: 2px solid var(--admin-focus-ring);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--admin-radius-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
* Grundlegende Styles für HTML-Elemente im Admin-Bereich.
|
||||
*/
|
||||
|
||||
@layer admin-elements {
|
||||
@layer base {
|
||||
/**
|
||||
* Root Admin Layout
|
||||
*/
|
||||
.admin-layout {
|
||||
font-family: var(--admin-font-family-base);
|
||||
font-size: var(--admin-font-size-base);
|
||||
line-height: var(--admin-line-height-normal);
|
||||
color: var(--admin-content-text);
|
||||
background-color: var(--admin-bg-primary);
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--content-text);
|
||||
background-color: var(--bg-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -22,59 +22,59 @@
|
||||
* Typography
|
||||
*/
|
||||
.admin-layout h1 {
|
||||
font-size: var(--admin-font-size-3xl);
|
||||
font-weight: var(--admin-font-weight-bold);
|
||||
line-height: var(--admin-line-height-tight);
|
||||
margin-bottom: var(--admin-spacing-lg);
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-tight);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.admin-layout h2 {
|
||||
font-size: var(--admin-font-size-2xl);
|
||||
font-weight: var(--admin-font-weight-semibold);
|
||||
line-height: var(--admin-line-height-tight);
|
||||
margin-bottom: var(--admin-spacing-md);
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.admin-layout h3 {
|
||||
font-size: var(--admin-font-size-xl);
|
||||
font-weight: var(--admin-font-weight-semibold);
|
||||
line-height: var(--admin-line-height-tight);
|
||||
margin-bottom: var(--admin-spacing-md);
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.admin-layout h4 {
|
||||
font-size: var(--admin-font-size-lg);
|
||||
font-weight: var(--admin-font-weight-medium);
|
||||
line-height: var(--admin-line-height-normal);
|
||||
margin-bottom: var(--admin-spacing-sm);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: var(--line-height-normal);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.admin-layout p {
|
||||
margin-bottom: var(--admin-spacing-md);
|
||||
line-height: var(--admin-line-height-relaxed);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.admin-layout small {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
color: oklch(from var(--admin-content-text) calc(l * 0.7) c h);
|
||||
font-size: var(--font-size-sm);
|
||||
color: oklch(from var(--content-text) calc(l * 0.7) c h);
|
||||
}
|
||||
|
||||
.admin-layout code {
|
||||
font-family: var(--admin-font-family-mono);
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 0.875em;
|
||||
background-color: var(--admin-bg-tertiary);
|
||||
background-color: var(--bg-tertiary);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: var(--admin-radius-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.admin-layout pre {
|
||||
font-family: var(--admin-font-family-mono);
|
||||
font-size: var(--admin-font-size-sm);
|
||||
background-color: var(--admin-bg-tertiary);
|
||||
padding: var(--admin-spacing-md);
|
||||
border-radius: var(--admin-radius-md);
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: var(--font-size-sm);
|
||||
background-color: var(--bg-tertiary);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
margin-bottom: var(--admin-spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.admin-layout pre code {
|
||||
@@ -87,12 +87,12 @@
|
||||
*/
|
||||
.admin-layout ul:not([role="list"]) {
|
||||
list-style: disc;
|
||||
padding-left: var(--admin-spacing-lg);
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.admin-layout ol:not([role="list"]) {
|
||||
list-style: decimal;
|
||||
padding-left: var(--admin-spacing-lg);
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -101,24 +101,24 @@
|
||||
.admin-layout table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: var(--admin-spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.admin-layout th {
|
||||
text-align: left;
|
||||
font-weight: var(--admin-font-weight-semibold);
|
||||
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
||||
background-color: var(--admin-bg-secondary);
|
||||
border-bottom: 2px solid var(--admin-border-medium);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 2px solid var(--border-medium);
|
||||
}
|
||||
|
||||
.admin-layout td {
|
||||
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
||||
border-bottom: 1px solid var(--admin-border-light);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.admin-layout tr:hover {
|
||||
background-color: var(--admin-hover-overlay);
|
||||
background-color: var(--hover-overlay);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -134,24 +134,24 @@
|
||||
.admin-layout textarea,
|
||||
.admin-layout select {
|
||||
width: 100%;
|
||||
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
font-family: inherit;
|
||||
font-size: var(--admin-font-size-base);
|
||||
line-height: var(--admin-line-height-normal);
|
||||
color: var(--admin-content-text);
|
||||
background-color: var(--admin-content-bg);
|
||||
border: 1px solid var(--admin-border-medium);
|
||||
border-radius: var(--admin-radius-md);
|
||||
transition: border-color var(--admin-transition-fast),
|
||||
box-shadow var(--admin-transition-fast);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--content-text);
|
||||
background-color: var(--content-bg);
|
||||
border: 1px solid var(--border-medium);
|
||||
border-radius: var(--radius-md);
|
||||
transition: border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.admin-layout input:focus,
|
||||
.admin-layout textarea:focus,
|
||||
.admin-layout select:focus {
|
||||
outline: none;
|
||||
border-color: var(--admin-focus-ring);
|
||||
box-shadow: 0 0 0 3px oklch(from var(--admin-focus-ring) l c h / 0.1);
|
||||
border-color: var(--focus-ring);
|
||||
box-shadow: 0 0 0 3px oklch(from var(--focus-ring) l c h / 0.1);
|
||||
}
|
||||
|
||||
.admin-layout textarea {
|
||||
@@ -164,7 +164,7 @@
|
||||
*/
|
||||
.admin-layout hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--admin-border-light);
|
||||
margin: var(--admin-spacing-xl) 0;
|
||||
border-top: 1px solid var(--border-light);
|
||||
margin: var(--spacing-xl) 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
* Flexible Grid-System für Content-Layouts.
|
||||
*/
|
||||
|
||||
@layer admin-objects {
|
||||
@layer layout {
|
||||
/**
|
||||
* Basic Grid
|
||||
*/
|
||||
.admin-grid {
|
||||
display: grid;
|
||||
gap: var(--admin-spacing-md);
|
||||
gap: var(--spacing-md);
|
||||
|
||||
/* Default: 1 column (mobile) */
|
||||
grid-template-columns: 1fr;
|
||||
@@ -54,15 +54,15 @@
|
||||
* Gap Variants
|
||||
*/
|
||||
.admin-grid--gap-sm {
|
||||
gap: var(--admin-spacing-sm);
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.admin-grid--gap-lg {
|
||||
gap: var(--admin-spacing-lg);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.admin-grid--gap-xl {
|
||||
gap: var(--admin-spacing-xl);
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -71,14 +71,14 @@
|
||||
.admin-grid--sidebar {
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 300px 1fr;
|
||||
gap: var(--admin-spacing-xl);
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-grid--sidebar-right {
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: var(--admin-spacing-xl);
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,19 +90,19 @@
|
||||
.admin-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--admin-spacing-md);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.admin-stack--sm {
|
||||
gap: var(--admin-spacing-sm);
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.admin-stack--lg {
|
||||
gap: var(--admin-spacing-lg);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.admin-stack--xl {
|
||||
gap: var(--admin-spacing-xl);
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -113,16 +113,16 @@
|
||||
.admin-cluster {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--admin-spacing-md);
|
||||
gap: var(--spacing-md);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-cluster--sm {
|
||||
gap: var(--admin-spacing-sm);
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.admin-cluster--lg {
|
||||
gap: var(--admin-spacing-lg);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.admin-cluster--justify-between {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* Mobile-First Grid Layout mit progressiver Verbesserung für Tablet/Desktop.
|
||||
*/
|
||||
|
||||
@layer admin-objects {
|
||||
@layer layout {
|
||||
/**
|
||||
* Main Admin Layout Grid
|
||||
*
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
/* Tablet+ Layout (768px+) */
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: var(--admin-spacing-sidebar) 1fr;
|
||||
grid-template-columns: var(--sidebar-width, var(--spacing-sidebar)) 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas:
|
||||
"sidebar header"
|
||||
@@ -34,93 +34,39 @@
|
||||
|
||||
/* Wide Screen Layout (1440px+) */
|
||||
@media (min-width: 1440px) {
|
||||
grid-template-columns: var(--admin-sidebar-width-wide) 1fr;
|
||||
grid-template-columns: var(--sidebar-width, var(--spacing-sidebar-wide)) 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Sidebar Area
|
||||
* Sidebar Area - Grid Positioning Only
|
||||
*
|
||||
* Note: Detailed sidebar styling is in _sidebar.css component file.
|
||||
* This only defines grid positioning for the layout system.
|
||||
*/
|
||||
.admin-sidebar {
|
||||
grid-area: sidebar;
|
||||
background-color: var(--admin-sidebar-bg);
|
||||
color: var(--admin-sidebar-text);
|
||||
|
||||
/* Mobile: Hidden by default, shown via toggle */
|
||||
@media (max-width: 767px) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: var(--admin-sidebar-width-mobile);
|
||||
max-width: 280px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform var(--admin-transition-base);
|
||||
z-index: var(--admin-z-sidebar);
|
||||
overflow-y: auto;
|
||||
|
||||
/* Mobile Menu Open State */
|
||||
&[data-mobile-menu-open="true"] {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet+: Always visible */
|
||||
@media (min-width: 768px) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid var(--admin-sidebar-border);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Header Area
|
||||
*
|
||||
* Note: Detailed header styling is in _header.css component file.
|
||||
* This only defines grid positioning and basic layout.
|
||||
*/
|
||||
.admin-header {
|
||||
grid-area: header;
|
||||
background-color: var(--admin-header-bg);
|
||||
color: var(--admin-header-text);
|
||||
border-bottom: 1px solid var(--admin-header-border);
|
||||
padding: var(--admin-spacing-md) var(--admin-spacing-content-padding);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--admin-spacing-md);
|
||||
|
||||
/* Mobile */
|
||||
min-height: var(--admin-header-height-mobile);
|
||||
|
||||
/* Tablet+ */
|
||||
@media (min-width: 768px) {
|
||||
min-height: var(--admin-header-height-tablet);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--admin-z-header);
|
||||
}
|
||||
|
||||
/* Wide */
|
||||
@media (min-width: 1440px) {
|
||||
min-height: var(--admin-header-height-wide);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Content Area
|
||||
*
|
||||
* Note: Detailed content styling is in _content.css component file.
|
||||
* This only defines grid positioning.
|
||||
*/
|
||||
.admin-content {
|
||||
grid-area: content;
|
||||
background-color: var(--admin-content-bg);
|
||||
padding: var(--admin-spacing-content-padding);
|
||||
overflow-x: hidden;
|
||||
|
||||
/* Wide: Center content with max-width */
|
||||
@media (min-width: 1440px) {
|
||||
max-width: var(--admin-spacing-content-max-width);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -140,7 +86,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: oklch(0% 0 0 / 0.5);
|
||||
z-index: calc(var(--admin-z-sidebar) - 1);
|
||||
z-index: calc(var(--z-sidebar) - 1);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
}
|
||||
@@ -153,16 +99,16 @@
|
||||
position: absolute;
|
||||
top: -999px;
|
||||
left: -999px;
|
||||
z-index: var(--admin-z-toast);
|
||||
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
||||
background-color: var(--admin-accent-primary);
|
||||
z-index: var(--z-toast);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background-color: var(--accent-primary);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: var(--admin-radius-md);
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
&:focus {
|
||||
top: var(--admin-spacing-sm);
|
||||
left: var(--admin-spacing-sm);
|
||||
top: var(--spacing-sm);
|
||||
left: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -171,20 +117,20 @@
|
||||
*/
|
||||
.admin-container {
|
||||
width: 100%;
|
||||
max-width: var(--admin-container-mobile);
|
||||
max-width: var(--container-mobile);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--admin-spacing-md);
|
||||
padding: 0 var(--spacing-md);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
max-width: var(--admin-container-tablet);
|
||||
max-width: var(--container-tablet);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
max-width: var(--admin-container-desktop);
|
||||
max-width: var(--container-desktop);
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
max-width: var(--admin-container-wide);
|
||||
max-width: var(--container-wide);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
/**
|
||||
* Badge Component
|
||||
*
|
||||
* Small status indicators and labels.
|
||||
*/
|
||||
|
||||
@layer admin-components {
|
||||
.admin-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
font-size: var(--admin-font-size-xs);
|
||||
font-weight: var(--admin-font-weight-semibold);
|
||||
line-height: 1.5;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Success badge */
|
||||
.admin-badge--success {
|
||||
background-color: var(--admin-accent-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Warning badge */
|
||||
.admin-badge--warning {
|
||||
background-color: var(--admin-accent-warning);
|
||||
color: oklch(20% 0.02 280); /* Dark text for better contrast */
|
||||
}
|
||||
|
||||
/* Error badge */
|
||||
.admin-badge--error {
|
||||
background-color: var(--admin-accent-error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Info badge */
|
||||
.admin-badge--info {
|
||||
background-color: var(--admin-accent-info);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Default badge */
|
||||
.admin-badge--default {
|
||||
background-color: var(--admin-bg-tertiary);
|
||||
color: var(--admin-content-text);
|
||||
}
|
||||
}
|
||||
@@ -5,15 +5,15 @@
|
||||
* Responsive with overflow handling for long paths.
|
||||
*/
|
||||
|
||||
@layer admin-components {
|
||||
@layer components {
|
||||
/**
|
||||
* Breadcrumbs Container
|
||||
*/
|
||||
.admin-breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-xs);
|
||||
padding: var(--admin-spacing-sm) 0;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-sm) 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
.admin-breadcrumbs__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-xs);
|
||||
gap: var(--spacing-xs);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -48,7 +48,7 @@
|
||||
.admin-breadcrumbs__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-xs);
|
||||
gap: var(--spacing-xs);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
@@ -65,20 +65,20 @@
|
||||
.admin-breadcrumbs__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-xs);
|
||||
color: var(--admin-link-color);
|
||||
gap: var(--spacing-xs);
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
font-size: var(--admin-font-size-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
transition: color var(--admin-transition-base);
|
||||
transition: color var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
color: var(--admin-link-hover);
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--admin-focus-ring);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
@@ -88,8 +88,8 @@
|
||||
* Current Page (not a link)
|
||||
*/
|
||||
.admin-breadcrumbs__current {
|
||||
color: var(--admin-content-text);
|
||||
font-size: var(--admin-font-size-sm);
|
||||
color: var(--content-text);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -110,9 +110,9 @@
|
||||
.admin-breadcrumbs__separator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--admin-content-text);
|
||||
color: var(--content-text);
|
||||
opacity: 0.4;
|
||||
font-size: var(--admin-font-size-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -131,18 +131,18 @@
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--admin-content-text);
|
||||
background-color: var(--admin-bg-secondary);
|
||||
border-radius: var(--admin-radius-sm);
|
||||
color: var(--content-text);
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--admin-transition-base);
|
||||
transition: background-color var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admin-bg-tertiary);
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--admin-focus-ring);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,109 +0,0 @@
|
||||
/**
|
||||
* Button Component
|
||||
*
|
||||
* Reusable button styles for actions and navigation.
|
||||
*/
|
||||
|
||||
@layer admin-components {
|
||||
.admin-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--admin-spacing-sm);
|
||||
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
||||
font-family: var(--admin-font-family-base);
|
||||
font-size: var(--admin-font-size-sm);
|
||||
font-weight: var(--admin-font-weight-medium);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--admin-radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--admin-transition-base);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-btn:focus-visible {
|
||||
outline: 2px solid var(--admin-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Primary button */
|
||||
.admin-btn--primary {
|
||||
background-color: var(--admin-accent-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-btn--primary:hover {
|
||||
background-color: oklch(from var(--admin-accent-primary) calc(l * 0.9) c h);
|
||||
}
|
||||
|
||||
/* Secondary button */
|
||||
.admin-btn--secondary {
|
||||
background-color: var(--admin-sidebar-bg);
|
||||
color: var(--admin-sidebar-text-hover);
|
||||
}
|
||||
|
||||
.admin-btn--secondary:hover {
|
||||
background-color: oklch(from var(--admin-sidebar-bg) calc(l * 1.1) c h);
|
||||
}
|
||||
|
||||
/* Accent button */
|
||||
.admin-btn--accent {
|
||||
background-color: var(--admin-accent-info);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-btn--accent:hover {
|
||||
background-color: oklch(from var(--admin-accent-info) calc(l * 0.9) c h);
|
||||
}
|
||||
|
||||
/* Success button */
|
||||
.admin-btn--success {
|
||||
background-color: var(--admin-accent-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-btn--success:hover {
|
||||
background-color: oklch(from var(--admin-accent-success) calc(l * 0.9) c h);
|
||||
}
|
||||
|
||||
/* Danger button */
|
||||
.admin-btn--danger {
|
||||
background-color: var(--admin-accent-error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-btn--danger:hover {
|
||||
background-color: oklch(from var(--admin-accent-error) calc(l * 0.9) c h);
|
||||
}
|
||||
|
||||
/* Ghost button */
|
||||
.admin-btn--ghost {
|
||||
background-color: transparent;
|
||||
color: var(--admin-content-text);
|
||||
border-color: var(--admin-border-medium);
|
||||
}
|
||||
|
||||
.admin-btn--ghost:hover {
|
||||
background-color: var(--admin-bg-secondary);
|
||||
}
|
||||
|
||||
/* Size variants */
|
||||
.admin-btn--sm {
|
||||
padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
|
||||
font-size: var(--admin-font-size-xs);
|
||||
}
|
||||
|
||||
.admin-btn--lg {
|
||||
padding: var(--admin-spacing-md) var(--admin-spacing-lg);
|
||||
font-size: var(--admin-font-size-base);
|
||||
}
|
||||
|
||||
/* Icon button */
|
||||
.admin-btn__icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
/**
|
||||
* Card Component
|
||||
*
|
||||
* Reusable card containers for dashboard widgets and content blocks.
|
||||
*/
|
||||
|
||||
@layer admin-components {
|
||||
.admin-card {
|
||||
background-color: var(--admin-content-bg);
|
||||
border: 1px solid var(--admin-border-light);
|
||||
border-radius: var(--admin-radius-lg);
|
||||
box-shadow: var(--admin-shadow-sm);
|
||||
overflow: hidden;
|
||||
transition: box-shadow var(--admin-transition-base);
|
||||
}
|
||||
|
||||
.admin-card:hover {
|
||||
box-shadow: var(--admin-shadow-md);
|
||||
}
|
||||
|
||||
.admin-card__header {
|
||||
padding: var(--admin-spacing-lg);
|
||||
border-bottom: 1px solid var(--admin-border-light);
|
||||
background-color: var(--admin-bg-secondary);
|
||||
}
|
||||
|
||||
.admin-card__title {
|
||||
font-size: var(--admin-font-size-lg);
|
||||
font-weight: var(--admin-font-weight-semibold);
|
||||
color: var(--admin-content-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-card__content {
|
||||
padding: var(--admin-spacing-lg);
|
||||
}
|
||||
|
||||
.admin-card__footer {
|
||||
padding: var(--admin-spacing-md) var(--admin-spacing-lg);
|
||||
border-top: 1px solid var(--admin-border-light);
|
||||
background-color: var(--admin-bg-secondary);
|
||||
}
|
||||
|
||||
/* Card variants */
|
||||
.admin-card--highlighted {
|
||||
border-color: var(--admin-accent-primary);
|
||||
box-shadow: 0 0 0 1px var(--admin-accent-primary), var(--admin-shadow-sm);
|
||||
}
|
||||
|
||||
.admin-card--success {
|
||||
border-color: var(--admin-accent-success);
|
||||
}
|
||||
|
||||
.admin-card--warning {
|
||||
border-color: var(--admin-accent-warning);
|
||||
}
|
||||
|
||||
.admin-card--error {
|
||||
border-color: var(--admin-accent-error);
|
||||
}
|
||||
}
|
||||
@@ -7,16 +7,16 @@
|
||||
|
||||
.confusion-matrix-card {
|
||||
padding: var(--space-md);
|
||||
border: 1px solid var(--admin-border-color);
|
||||
border-radius: var(--admin-border-radius);
|
||||
background: var(--admin-card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--content-bg);
|
||||
}
|
||||
|
||||
.confusion-matrix-card__title {
|
||||
margin: 0 0 var(--space-md);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-primary);
|
||||
color: var(--content-text);
|
||||
}
|
||||
|
||||
/* Confusion Matrix Grid - 2x2 Layout */
|
||||
@@ -30,14 +30,14 @@
|
||||
/* Matrix Cells */
|
||||
.confusion-matrix__cell {
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--admin-border-radius);
|
||||
border-radius: var(--border-radius);
|
||||
text-align: center;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.confusion-matrix__cell:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--admin-shadow-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.confusion-matrix__cell-label {
|
||||
@@ -84,25 +84,25 @@
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-sm);
|
||||
padding-top: var(--space-md);
|
||||
border-top: 1px solid var(--admin-border-color);
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.confusion-matrix__rates .admin-stat-item {
|
||||
padding: var(--space-sm);
|
||||
background: var(--admin-bg-secondary);
|
||||
border-radius: var(--admin-border-radius-sm);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.confusion-matrix__rates .admin-stat-item__label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--admin-text-secondary);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.confusion-matrix__rates .admin-stat-item__value {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-primary);
|
||||
color: var(--content-text);
|
||||
}
|
||||
|
||||
/* Dark Mode Support */
|
||||
|
||||
@@ -5,26 +5,26 @@
|
||||
* Responsive spacing and max-width management.
|
||||
*/
|
||||
|
||||
@layer admin-components {
|
||||
@layer components {
|
||||
/**
|
||||
* Main Content Container
|
||||
*/
|
||||
.admin-content {
|
||||
padding: var(--admin-spacing-content-padding);
|
||||
background-color: var(--admin-content-bg);
|
||||
color: var(--admin-content-text);
|
||||
padding: var(--spacing-content-padding);
|
||||
background-color: var(--content-bg);
|
||||
color: var(--content-text);
|
||||
overflow-x: hidden;
|
||||
|
||||
/* Wide: Center content with max-width */
|
||||
@media (min-width: 1440px) {
|
||||
max-width: var(--admin-spacing-content-max-width);
|
||||
max-width: var(--spacing-content-max-width);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Mobile: Reduce padding */
|
||||
@media (max-width: 767px) {
|
||||
padding: var(--admin-spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,23 +32,23 @@
|
||||
* Content Header
|
||||
*/
|
||||
.admin-content__header {
|
||||
margin-bottom: var(--admin-spacing-xl);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.admin-content__title {
|
||||
font-size: var(--admin-font-size-3xl);
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: 700;
|
||||
color: var(--admin-content-text);
|
||||
margin: 0 0 var(--admin-spacing-sm);
|
||||
color: var(--content-text);
|
||||
margin: 0 0 var(--spacing-sm);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
font-size: var(--admin-font-size-2xl);
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-content__description {
|
||||
font-size: var(--admin-font-size-base);
|
||||
color: var(--admin-content-text);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--content-text);
|
||||
opacity: 0.8;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
@@ -61,7 +61,7 @@
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--admin-spacing-md);
|
||||
gap: var(--spacing-md);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
flex-direction: column;
|
||||
@@ -77,7 +77,7 @@
|
||||
.admin-content__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-sm);
|
||||
gap: var(--spacing-sm);
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@@ -89,65 +89,65 @@
|
||||
/**
|
||||
* Card Component
|
||||
*/
|
||||
.admin-card {
|
||||
background-color: var(--admin-content-bg);
|
||||
border: 1px solid var(--admin-border-light);
|
||||
border-radius: var(--admin-radius-lg);
|
||||
padding: var(--admin-spacing-lg);
|
||||
box-shadow: var(--admin-shadow-sm);
|
||||
.card {
|
||||
background-color: var(--content-bg);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
/* Hover effect for interactive cards */
|
||||
&.admin-card--interactive {
|
||||
&.card--interactive {
|
||||
cursor: pointer;
|
||||
transition: all var(--admin-transition-base);
|
||||
transition: all var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--admin-border-medium);
|
||||
box-shadow: var(--admin-shadow-md);
|
||||
border-color: var(--border-medium);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-card__header {
|
||||
margin-bottom: var(--admin-spacing-md);
|
||||
padding-bottom: var(--admin-spacing-md);
|
||||
border-bottom: 1px solid var(--admin-border-light);
|
||||
.card__header {
|
||||
margin-bottom: var(--spacing-md);
|
||||
padding-bottom: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.admin-card__title {
|
||||
font-size: var(--admin-font-size-lg);
|
||||
.card__title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--admin-content-text);
|
||||
color: var(--content-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-card__subtitle {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
color: var(--admin-content-text);
|
||||
.card__subtitle {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--content-text);
|
||||
opacity: 0.7;
|
||||
margin: var(--admin-spacing-xs) 0 0;
|
||||
margin: var(--spacing-xs) 0 0;
|
||||
}
|
||||
|
||||
.admin-card__body {
|
||||
.card__body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-card__footer {
|
||||
margin-top: var(--admin-spacing-md);
|
||||
padding-top: var(--admin-spacing-md);
|
||||
border-top: 1px solid var(--admin-border-light);
|
||||
.card__footer {
|
||||
margin-top: var(--spacing-md);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--admin-spacing-sm);
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/**
|
||||
* Section Component
|
||||
*/
|
||||
.admin-section {
|
||||
margin-bottom: var(--admin-spacing-2xl);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -155,19 +155,19 @@
|
||||
}
|
||||
|
||||
.admin-section__header {
|
||||
margin-bottom: var(--admin-spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.admin-section__title {
|
||||
font-size: var(--admin-font-size-xl);
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: 600;
|
||||
color: var(--admin-content-text);
|
||||
margin: 0 0 var(--admin-spacing-xs);
|
||||
color: var(--content-text);
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
}
|
||||
|
||||
.admin-section__description {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
color: var(--admin-content-text);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--content-text);
|
||||
opacity: 0.8;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -177,7 +177,7 @@
|
||||
*/
|
||||
.admin-stats-grid {
|
||||
display: grid;
|
||||
gap: var(--admin-spacing-md);
|
||||
gap: var(--spacing-md);
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -190,47 +190,47 @@
|
||||
}
|
||||
|
||||
.admin-stat-card {
|
||||
background-color: var(--admin-content-bg);
|
||||
border: 1px solid var(--admin-border-light);
|
||||
border-radius: var(--admin-radius-lg);
|
||||
padding: var(--admin-spacing-lg);
|
||||
background-color: var(--content-bg);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.admin-stat-card__label {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
color: var(--admin-content-text);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--content-text);
|
||||
opacity: 0.7;
|
||||
margin: 0 0 var(--admin-spacing-xs);
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-stat-card__value {
|
||||
font-size: var(--admin-font-size-3xl);
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: 700;
|
||||
color: var(--admin-content-text);
|
||||
margin: 0 0 var(--admin-spacing-sm);
|
||||
color: var(--content-text);
|
||||
margin: 0 0 var(--spacing-sm);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.admin-stat-card__change {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-xs);
|
||||
gap: var(--spacing-xs);
|
||||
|
||||
&.admin-stat-card__change--positive {
|
||||
color: var(--admin-accent-success);
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
&.admin-stat-card__change--negative {
|
||||
color: var(--admin-accent-error);
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
&.admin-stat-card__change--neutral {
|
||||
color: var(--admin-content-text);
|
||||
color: var(--content-text);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
@@ -238,11 +238,11 @@
|
||||
.admin-stat-card__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: var(--admin-spacing-sm);
|
||||
background-color: var(--admin-bg-secondary);
|
||||
border-radius: var(--admin-radius-md);
|
||||
color: var(--admin-accent-primary);
|
||||
margin-bottom: var(--admin-spacing-md);
|
||||
padding: var(--spacing-sm);
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--accent-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -250,27 +250,27 @@
|
||||
*/
|
||||
.admin-empty-state {
|
||||
text-align: center;
|
||||
padding: var(--admin-spacing-2xl);
|
||||
color: var(--admin-content-text);
|
||||
padding: var(--spacing-2xl);
|
||||
color: var(--content-text);
|
||||
}
|
||||
|
||||
.admin-empty-state__icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto var(--admin-spacing-lg);
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.admin-empty-state__title {
|
||||
font-size: var(--admin-font-size-xl);
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: 600;
|
||||
margin: 0 0 var(--admin-spacing-sm);
|
||||
margin: 0 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.admin-empty-state__description {
|
||||
font-size: var(--admin-font-size-base);
|
||||
font-size: var(--font-size-base);
|
||||
opacity: 0.8;
|
||||
margin: 0 0 var(--admin-spacing-lg);
|
||||
margin: 0 0 var(--spacing-lg);
|
||||
}
|
||||
|
||||
.admin-empty-state__action {
|
||||
@@ -285,22 +285,22 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--admin-spacing-2xl);
|
||||
color: var(--admin-content-text);
|
||||
padding: var(--spacing-2xl);
|
||||
color: var(--content-text);
|
||||
}
|
||||
|
||||
.admin-loading__spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid var(--admin-border-light);
|
||||
border-top-color: var(--admin-accent-primary);
|
||||
border: 3px solid var(--border-light);
|
||||
border-top-color: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: admin-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.admin-loading__text {
|
||||
margin-top: var(--admin-spacing-md);
|
||||
font-size: var(--admin-font-size-sm);
|
||||
margin-top: var(--spacing-md);
|
||||
font-size: var(--font-size-sm);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,32 +5,32 @@
|
||||
* Sticky positioning with backdrop blur for modern look.
|
||||
*/
|
||||
|
||||
@layer admin-components {
|
||||
@layer components {
|
||||
/**
|
||||
* Header Container
|
||||
*/
|
||||
.admin-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-md);
|
||||
background-color: var(--admin-header-bg);
|
||||
border-bottom: 1px solid var(--admin-header-border);
|
||||
padding: var(--admin-spacing-md) var(--admin-spacing-content-padding);
|
||||
min-height: var(--admin-header-height-mobile);
|
||||
gap: var(--spacing-sm);
|
||||
background-color: var(--header-bg);
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
padding: var(--spacing-sm) var(--spacing-content-padding);
|
||||
min-height: var(--header-height-mobile);
|
||||
|
||||
/* Sticky with blur effect */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--admin-z-header);
|
||||
z-index: var(--z-header);
|
||||
backdrop-filter: blur(8px);
|
||||
background-color: var(--admin-header-bg);
|
||||
background-color: var(--header-bg);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
min-height: var(--admin-header-height-tablet);
|
||||
min-height: var(--header-height-tablet);
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
min-height: var(--admin-header-height-wide);
|
||||
min-height: var(--header-height-wide);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,9 +38,9 @@
|
||||
* Page Title
|
||||
*/
|
||||
.admin-header__title {
|
||||
font-size: var(--admin-font-size-xl);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--admin-header-text);
|
||||
color: var(--header-text);
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Search Bar
|
||||
* Search Bar Container
|
||||
*/
|
||||
.admin-header__search {
|
||||
flex: 0 1 400px;
|
||||
@@ -68,54 +68,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.admin-search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-search__input {
|
||||
width: 100%;
|
||||
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
||||
padding-left: calc(var(--admin-spacing-md) + 20px + var(--admin-spacing-sm));
|
||||
border: 1px solid var(--admin-border-light);
|
||||
border-radius: var(--admin-radius-md);
|
||||
font-size: var(--admin-font-size-sm);
|
||||
background-color: var(--admin-bg-secondary);
|
||||
color: var(--admin-content-text);
|
||||
transition: all var(--admin-transition-base);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--admin-content-text);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--admin-focus-ring);
|
||||
box-shadow: 0 0 0 3px var(--admin-focus-ring-alpha);
|
||||
background-color: var(--admin-content-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-search__icon {
|
||||
position: absolute;
|
||||
left: var(--admin-spacing-md);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--admin-content-text);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Header Actions (Right Side)
|
||||
*/
|
||||
.admin-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-sm);
|
||||
gap: var(--spacing-sm);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@@ -126,30 +85,37 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--admin-radius-md);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: var(--admin-header-text);
|
||||
color: var(--header-text);
|
||||
cursor: pointer;
|
||||
transition: all var(--admin-transition-base);
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admin-hover-overlay);
|
||||
border-color: var(--admin-border-light);
|
||||
background-color: var(--hover-overlay);
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--admin-focus-ring);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Dark Theme Optimization */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
background-color: oklch(from var(--header-bg) calc(l + 0.03) c h);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-action-btn__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -161,8 +127,8 @@
|
||||
right: 6px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: var(--admin-accent-error);
|
||||
border: 2px solid var(--admin-header-bg);
|
||||
background-color: var(--accent-error);
|
||||
border: 2px solid var(--header-bg);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -184,21 +150,28 @@
|
||||
.admin-theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-xs);
|
||||
padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
|
||||
background-color: var(--admin-bg-secondary);
|
||||
border: 1px solid var(--admin-border-light);
|
||||
border-radius: var(--admin-radius-md);
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--admin-transition-base);
|
||||
transition: all var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admin-bg-tertiary);
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
/* Dark Theme Optimization */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
background-color: oklch(from var(--bg-secondary) calc(l + 0.05) c h);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* Icon only on mobile */
|
||||
padding: var(--admin-spacing-xs);
|
||||
padding: var(--spacing-xs);
|
||||
|
||||
.admin-theme-toggle__label {
|
||||
display: none;
|
||||
@@ -209,12 +182,12 @@
|
||||
.admin-theme-toggle__icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--admin-header-text);
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
.admin-theme-toggle__label {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
color: var(--admin-header-text);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -227,23 +200,30 @@
|
||||
.admin-user-menu__trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-sm);
|
||||
padding: var(--admin-spacing-xs);
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-xs);
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--admin-radius-md);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--admin-transition-base);
|
||||
transition: all var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admin-hover-overlay);
|
||||
border-color: var(--admin-border-light);
|
||||
background-color: var(--hover-overlay);
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--admin-focus-ring);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Dark Theme Optimization */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
background-color: oklch(from var(--header-bg) calc(l + 0.03) c h);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-user-menu__avatar {
|
||||
@@ -251,13 +231,13 @@
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--admin-border-light);
|
||||
border: 2px solid var(--border-light);
|
||||
}
|
||||
|
||||
.admin-user-menu__name {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--admin-header-text);
|
||||
color: var(--header-text);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
@@ -267,39 +247,15 @@
|
||||
.admin-user-menu__chevron {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--admin-header-text);
|
||||
transition: transform var(--admin-transition-base);
|
||||
|
||||
.admin-user-menu[data-open="true"] & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
color: var(--header-text);
|
||||
transition: transform var(--transition-base);
|
||||
|
||||
/* Rotate when popover is open (handled by JavaScript) */
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown Menu
|
||||
*/
|
||||
.admin-user-menu__dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + var(--admin-spacing-xs));
|
||||
right: 0;
|
||||
min-width: 200px;
|
||||
background-color: var(--admin-content-bg);
|
||||
border: 1px solid var(--admin-border-light);
|
||||
border-radius: var(--admin-radius-md);
|
||||
box-shadow: var(--admin-shadow-lg);
|
||||
padding: var(--admin-spacing-sm) 0;
|
||||
display: none;
|
||||
z-index: var(--admin-z-dropdown);
|
||||
|
||||
.admin-user-menu[data-open="true"] & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-user-menu__item {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -308,15 +264,15 @@
|
||||
.admin-user-menu__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-sm);
|
||||
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
||||
color: var(--admin-content-text);
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
color: var(--content-text);
|
||||
text-decoration: none;
|
||||
font-size: var(--admin-font-size-sm);
|
||||
transition: background-color var(--admin-transition-base);
|
||||
font-size: var(--font-size-sm);
|
||||
transition: background-color var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admin-bg-secondary);
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -328,7 +284,7 @@
|
||||
|
||||
.admin-user-menu__divider {
|
||||
height: 1px;
|
||||
background-color: var(--admin-border-light);
|
||||
margin: var(--admin-spacing-sm) 0;
|
||||
background-color: var(--border-light);
|
||||
margin: var(--spacing-sm) 0;
|
||||
}
|
||||
}
|
||||
|
||||
173
resources/css/admin/06-components/_popover.css
Normal file
173
resources/css/admin/06-components/_popover.css
Normal file
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* Popover Component - Admin Interface
|
||||
*
|
||||
* Native Popover API für Dropdown-Menüs und Overlays.
|
||||
* Baseline 2025: Popover API ist Baseline Newly available.
|
||||
*
|
||||
* Features:
|
||||
* - Native Browser-Support (kein JavaScript nötig für Basis-Funktionalität)
|
||||
* - Automatisches Focus-Management
|
||||
* - ESC-Key Support (native)
|
||||
* - Backdrop-Click Support (native)
|
||||
* - View Transition Integration für Popover-Transitions
|
||||
*/
|
||||
|
||||
@layer components {
|
||||
/**
|
||||
* Popover Base
|
||||
*/
|
||||
[popover] {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--content-bg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: var(--spacing-sm);
|
||||
z-index: var(--z-popover);
|
||||
color: var(--content-text);
|
||||
|
||||
/* Hide by default (popover API handles visibility) */
|
||||
&:not(:popover-open) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* View Transition für Popover-Öffnen/Schließen */
|
||||
&::backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(2px);
|
||||
transition: opacity var(--transition-base), backdrop-filter var(--transition-base);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Admin Popover Styles
|
||||
*/
|
||||
.admin-popover {
|
||||
min-width: 200px;
|
||||
max-width: 320px;
|
||||
padding: var(--spacing-xs) 0;
|
||||
background-color: var(--content-bg);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
|
||||
/* Positionierung */
|
||||
&--bottom-start {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&--bottom-end {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&--top-start {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&--top-end {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Popover Content (Menu Lists)
|
||||
*/
|
||||
.admin-popover ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.admin-popover li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Popover Links/Buttons
|
||||
*/
|
||||
.admin-popover a,
|
||||
.admin-popover button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
width: 100%;
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--content-text);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size-sm);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-base);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--hover-overlay);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Popover Divider
|
||||
*/
|
||||
.admin-popover hr {
|
||||
margin: var(--spacing-xs) 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/**
|
||||
* Popover Animation (View Transitions)
|
||||
*/
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
@view-transition-group(popover) {
|
||||
animation-duration: var(--transition-base);
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dark Theme Optimizations
|
||||
*/
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[popover] {
|
||||
background-color: var(--content-bg);
|
||||
border-color: var(--border-light);
|
||||
box-shadow: var(--shadow-lg);
|
||||
|
||||
&::backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-popover a:hover,
|
||||
.admin-popover button:hover {
|
||||
background-color: oklch(from var(--content-bg) calc(l + 0.08) c h);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
168
resources/css/admin/06-components/_search.css
Normal file
168
resources/css/admin/06-components/_search.css
Normal file
@@ -0,0 +1,168 @@
|
||||
/**
|
||||
* Search Component - Admin Interface
|
||||
*
|
||||
* Semantisches <search> Element für Suchformulare.
|
||||
* Baseline 2023: <search> Element ist Baseline Newly available.
|
||||
*
|
||||
* Features:
|
||||
* - Semantisches HTML mit <search> Element
|
||||
* - Accessibility-Support
|
||||
* - Verschiedene Varianten (header, sidebar, standalone)
|
||||
* - Dark Theme Optimierungen
|
||||
*/
|
||||
|
||||
@layer components {
|
||||
/**
|
||||
* Search Element Base
|
||||
*/
|
||||
search.admin-search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Search Form
|
||||
*/
|
||||
search.admin-search form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Search Input
|
||||
*/
|
||||
search.admin-search .admin-search__input {
|
||||
width: 100%;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
padding-right: calc(var(--spacing-sm) + 36px + var(--spacing-xs)); /* Space for submit button */
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-sm);
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--content-text);
|
||||
transition: all var(--transition-base);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--content-text);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--focus-ring);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-alpha);
|
||||
background-color: var(--content-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Search Submit Button
|
||||
*/
|
||||
search.admin-search .admin-search__submit {
|
||||
position: absolute;
|
||||
right: var(--spacing-xs);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: var(--spacing-xs);
|
||||
cursor: pointer;
|
||||
color: var(--content-text);
|
||||
opacity: 0.6;
|
||||
transition: opacity var(--transition-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
background-color: var(--hover-overlay);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Search Icon
|
||||
*/
|
||||
search.admin-search .admin-search__icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Visually Hidden Label
|
||||
*/
|
||||
search.admin-search .admin-visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Variant: Header
|
||||
*/
|
||||
search.admin-search--header {
|
||||
flex: 0 1 400px;
|
||||
max-width: 400px;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
flex: 1;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Variant: Sidebar
|
||||
*/
|
||||
search.admin-search--sidebar {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
/**
|
||||
* Variant: Standalone
|
||||
*/
|
||||
search.admin-search--standalone {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dark Theme Optimizations
|
||||
*/
|
||||
@media (prefers-color-scheme: dark) {
|
||||
search.admin-search .admin-search__input {
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border-light);
|
||||
|
||||
&:focus {
|
||||
background-color: var(--content-bg);
|
||||
border-color: var(--focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
search.admin-search .admin-search__submit {
|
||||
color: var(--content-text);
|
||||
|
||||
&:hover {
|
||||
background-color: oklch(from var(--bg-secondary) calc(l + 0.1) c h);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,29 +5,104 @@
|
||||
* Mobile: Off-canvas overlay, Tablet+: Fixed sidebar
|
||||
*/
|
||||
|
||||
@layer admin-components {
|
||||
@layer components {
|
||||
/**
|
||||
* Sidebar Container
|
||||
*
|
||||
* Component styling for the admin sidebar.
|
||||
* Grid positioning is handled in _layout.css (grid-area: sidebar).
|
||||
*/
|
||||
.admin-sidebar {
|
||||
/* Internal Layout (Flexbox for content) */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--admin-sidebar-bg);
|
||||
color: var(--admin-sidebar-text);
|
||||
|
||||
/* Styling */
|
||||
background-color: var(--sidebar-bg);
|
||||
color: var(--sidebar-text);
|
||||
|
||||
/* Spacing */
|
||||
padding: var(--admin-spacing-lg) 0;
|
||||
padding: var(--spacing-md) 0;
|
||||
|
||||
/* Mobile: Hidden by default, shown via toggle */
|
||||
@media (max-width: 767px) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: var(--sidebar-width-mobile);
|
||||
max-width: 280px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform var(--transition-base);
|
||||
z-index: var(--z-sidebar);
|
||||
overflow-y: auto;
|
||||
|
||||
/* Mobile Menu Open State */
|
||||
&[data-mobile-menu-open="true"] {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet+: Always visible */
|
||||
@media (min-width: 768px) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resize Handle
|
||||
*/
|
||||
.admin-sidebar__resize-handle {
|
||||
display: none;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
cursor: col-resize;
|
||||
background-color: transparent;
|
||||
transition: background-color var(--transition-base);
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-border);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Dark Theme Optimization */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
background-color: oklch(from var(--sidebar-border) calc(l + 0.1) c h);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--accent-primary);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidebar Header (Logo + Title)
|
||||
*/
|
||||
.admin-sidebar__header {
|
||||
padding: 0 var(--admin-spacing-lg);
|
||||
margin-bottom: var(--admin-spacing-xl);
|
||||
padding: 0 var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-md);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.admin-sidebar__logo {
|
||||
@@ -37,9 +112,9 @@
|
||||
}
|
||||
|
||||
.admin-sidebar__title {
|
||||
font-size: var(--admin-font-size-lg);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--admin-sidebar-text-hover);
|
||||
color: var(--sidebar-text-hover);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -51,73 +126,174 @@
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--admin-spacing-xs);
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.admin-nav__section {
|
||||
padding: 0 var(--admin-spacing-md);
|
||||
}
|
||||
|
||||
.admin-nav__section-title {
|
||||
font-size: var(--admin-font-size-xs);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--admin-sidebar-text);
|
||||
opacity: 0.7;
|
||||
padding: var(--admin-spacing-md) var(--admin-spacing-sm);
|
||||
margin: var(--admin-spacing-md) 0 var(--admin-spacing-xs);
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation List
|
||||
* Section Toggle (Summary)
|
||||
*/
|
||||
.admin-nav__list {
|
||||
.admin-nav__section-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color var(--transition-base), opacity var(--transition-base);
|
||||
list-style: none; /* Remove default list styling */
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
/* Hide browser default marker */
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background-color: var(--hover-overlay);
|
||||
}
|
||||
|
||||
/* Dark Theme Hover Optimization */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
background-color: oklch(from var(--sidebar-bg) calc(l + 0.08) c h);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Section Title (using element selector)
|
||||
*/
|
||||
.admin-nav summary h2 {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--sidebar-text);
|
||||
opacity: 0.7;
|
||||
padding: var(--spacing-sm) var(--spacing-sm);
|
||||
margin: var(--spacing-sm) 0 var(--spacing-xs);
|
||||
pointer-events: none;
|
||||
transition: opacity var(--transition-base), color var(--transition-base);
|
||||
}
|
||||
|
||||
/**
|
||||
* Section Toggle Icon (Chevron) - using element selector
|
||||
*/
|
||||
.admin-nav summary svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
color: var(--sidebar-text);
|
||||
opacity: 0.5;
|
||||
transition: transform var(--transition-base), opacity var(--transition-base);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.admin-nav summary:hover svg {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapsed Section State (details:not([open]))
|
||||
*/
|
||||
.admin-nav__section:not([open]) {
|
||||
summary svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Expanded Section State (details[open])
|
||||
*/
|
||||
.admin-nav__section[open] {
|
||||
summary svg {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
summary h2 {
|
||||
opacity: 1;
|
||||
color: var(--sidebar-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation List (using element selectors)
|
||||
*/
|
||||
.admin-nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--admin-spacing-xs);
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation Items
|
||||
* Navigation Items (using element selectors)
|
||||
*/
|
||||
.admin-nav__item {
|
||||
.admin-nav li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-nav__link {
|
||||
.admin-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-sm);
|
||||
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
||||
border-radius: var(--admin-radius-md);
|
||||
color: var(--admin-sidebar-text);
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--sidebar-text);
|
||||
text-decoration: none;
|
||||
font-size: var(--admin-font-size-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
transition: all var(--admin-transition-base);
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
|
||||
/* Hover State */
|
||||
&:hover {
|
||||
background-color: var(--admin-hover-overlay);
|
||||
color: var(--admin-sidebar-text-hover);
|
||||
background-color: var(--hover-overlay);
|
||||
color: var(--sidebar-text-hover);
|
||||
}
|
||||
|
||||
/* Dark Theme Hover Optimization */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
background-color: oklch(from var(--sidebar-bg) calc(l + 0.05) c h);
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus State */
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--admin-focus-ring);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Active State */
|
||||
&[aria-current="page"],
|
||||
&.admin-nav__link--active {
|
||||
background-color: var(--admin-sidebar-active);
|
||||
color: var(--admin-sidebar-text-hover);
|
||||
background-color: var(--sidebar-active);
|
||||
color: var(--sidebar-text-hover);
|
||||
|
||||
/* Active Indicator */
|
||||
&::before {
|
||||
@@ -128,25 +304,28 @@
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 70%;
|
||||
background-color: var(--admin-accent-primary);
|
||||
background-color: var(--accent-primary);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation Icons
|
||||
* Navigation Icons (using element selectors)
|
||||
*/
|
||||
.admin-nav__icon {
|
||||
.admin-nav svg,
|
||||
.admin-nav .admin-nav__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.admin-nav__link:hover &,
|
||||
.admin-nav__link[aria-current="page"] & {
|
||||
opacity: 1;
|
||||
}
|
||||
.admin-nav a:hover svg,
|
||||
.admin-nav a:hover .admin-nav__icon,
|
||||
.admin-nav a[aria-current="page"] svg,
|
||||
.admin-nav a[aria-current="page"] .admin-nav__icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -155,9 +334,9 @@
|
||||
.admin-nav__badge {
|
||||
margin-left: auto;
|
||||
padding: 2px 8px;
|
||||
background-color: var(--admin-accent-error);
|
||||
background-color: var(--accent-error);
|
||||
color: white;
|
||||
font-size: var(--admin-font-size-xs);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
border-radius: 10px;
|
||||
min-width: 20px;
|
||||
@@ -169,11 +348,11 @@
|
||||
*/
|
||||
.admin-nav__submenu {
|
||||
list-style: none;
|
||||
margin: var(--admin-spacing-xs) 0 0;
|
||||
padding: 0 0 0 calc(var(--admin-spacing-md) + 20px);
|
||||
margin: var(--spacing-xs) 0 0;
|
||||
padding: 0 0 0 calc(var(--spacing-md) + 20px);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: var(--admin-spacing-xs);
|
||||
gap: var(--spacing-xs);
|
||||
|
||||
/* Show when parent is active or expanded */
|
||||
.admin-nav__item--expanded > & {
|
||||
@@ -181,9 +360,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.admin-nav__submenu .admin-nav__link {
|
||||
font-size: var(--admin-font-size-xs);
|
||||
padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
|
||||
.admin-nav__submenu a {
|
||||
font-size: var(--font-size-xs);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -193,7 +372,7 @@
|
||||
margin-left: auto;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform var(--admin-transition-base);
|
||||
transition: transform var(--transition-base);
|
||||
|
||||
.admin-nav__item--expanded & {
|
||||
transform: rotate(90deg);
|
||||
@@ -205,22 +384,29 @@
|
||||
*/
|
||||
.admin-sidebar__footer {
|
||||
margin-top: auto;
|
||||
padding: var(--admin-spacing-lg);
|
||||
border-top: 1px solid var(--admin-sidebar-border);
|
||||
padding: var(--spacing-lg);
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
}
|
||||
|
||||
.admin-sidebar__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--admin-spacing-sm);
|
||||
padding: var(--admin-spacing-sm);
|
||||
border-radius: var(--admin-radius-md);
|
||||
color: var(--admin-sidebar-text);
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--sidebar-text);
|
||||
text-decoration: none;
|
||||
transition: background-color var(--admin-transition-base);
|
||||
transition: background-color var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admin-hover-overlay);
|
||||
background-color: var(--hover-overlay);
|
||||
}
|
||||
|
||||
/* Dark Theme Optimization */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
background-color: oklch(from var(--sidebar-bg) calc(l + 0.05) c h);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -238,9 +424,9 @@
|
||||
}
|
||||
|
||||
.admin-sidebar__user-name {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--admin-sidebar-text-hover);
|
||||
color: var(--sidebar-text-hover);
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -248,8 +434,8 @@
|
||||
}
|
||||
|
||||
.admin-sidebar__user-role {
|
||||
font-size: var(--admin-font-size-xs);
|
||||
color: var(--admin-sidebar-text);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--sidebar-text);
|
||||
opacity: 0.8;
|
||||
display: block;
|
||||
}
|
||||
@@ -265,23 +451,23 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: var(--admin-spacing-md);
|
||||
left: var(--admin-spacing-md);
|
||||
z-index: calc(var(--admin-z-sidebar) + 1);
|
||||
top: var(--spacing-md);
|
||||
left: var(--spacing-md);
|
||||
z-index: calc(var(--z-sidebar) + 1);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-color: var(--admin-sidebar-bg);
|
||||
border: 1px solid var(--admin-sidebar-border);
|
||||
border-radius: var(--admin-radius-md);
|
||||
background-color: var(--sidebar-bg);
|
||||
border: 1px solid var(--sidebar-border);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--admin-transition-base);
|
||||
transition: background-color var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admin-sidebar-active);
|
||||
background-color: var(--sidebar-active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--admin-focus-ring);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
@@ -290,6 +476,6 @@
|
||||
.admin-sidebar__toggle-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--admin-sidebar-text-hover);
|
||||
color: var(--sidebar-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,20 +4,20 @@
|
||||
* List of statistics with labels and values for dashboard cards.
|
||||
*/
|
||||
|
||||
@layer admin-components {
|
||||
@layer components {
|
||||
.admin-stat-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--admin-spacing-md);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.admin-stat-list__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--admin-spacing-sm);
|
||||
padding-bottom: var(--admin-spacing-sm);
|
||||
border-bottom: 1px solid var(--admin-border-light);
|
||||
gap: var(--spacing-sm);
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.admin-stat-list__item:last-child {
|
||||
@@ -26,23 +26,23 @@
|
||||
}
|
||||
|
||||
.admin-stat-list__label {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
color: var(--admin-content-text);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--content-text);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.admin-stat-list__value {
|
||||
font-size: var(--admin-font-size-sm);
|
||||
font-weight: var(--admin-font-weight-semibold);
|
||||
color: var(--admin-content-text);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--content-text);
|
||||
}
|
||||
|
||||
/* Compact variant */
|
||||
.admin-stat-list--compact {
|
||||
gap: var(--admin-spacing-sm);
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.admin-stat-list--compact .admin-stat-list__item {
|
||||
padding-bottom: var(--admin-spacing-xs);
|
||||
padding-bottom: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
* - Keyboard navigation enhancements
|
||||
*/
|
||||
|
||||
@layer admin-utilities {
|
||||
@layer utilities {
|
||||
/**
|
||||
* Focus Visible Enhancement (WCAG 2.1 Level AA)
|
||||
*
|
||||
@@ -16,9 +16,9 @@
|
||||
* must have a visible focus indicator with min 3:1 contrast ratio.
|
||||
*/
|
||||
:focus-visible {
|
||||
outline: var(--admin-focus-ring-width, 2px) solid var(--admin-focus-ring);
|
||||
outline-offset: var(--admin-focus-ring-offset, 2px);
|
||||
border-radius: var(--admin-radius-sm);
|
||||
outline: var(--focus-ring-width, 2px) solid var(--focus-ring);
|
||||
outline-offset: var(--focus-ring-offset, 2px);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -31,18 +31,18 @@
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: var(--admin-z-toast);
|
||||
padding: var(--admin-spacing-md) var(--admin-spacing-lg);
|
||||
background-color: var(--admin-accent-primary);
|
||||
z-index: var(--z-toast);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
background-color: var(--accent-primary);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: var(--admin-font-weight-semibold);
|
||||
border-radius: var(--admin-radius-md);
|
||||
box-shadow: var(--admin-shadow-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
|
||||
&:focus {
|
||||
top: var(--admin-spacing-md);
|
||||
left: var(--admin-spacing-md);
|
||||
top: var(--spacing-md);
|
||||
left: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,8 +111,8 @@
|
||||
right: -2px;
|
||||
top: -2px;
|
||||
bottom: -2px;
|
||||
border: 2px solid var(--admin-focus-ring);
|
||||
border-radius: var(--admin-radius-md);
|
||||
border: 2px solid var(--focus-ring);
|
||||
border-radius: var(--radius-md);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@@ -123,7 +123,7 @@
|
||||
* Show clear visual feedback for keyboard users.
|
||||
*/
|
||||
body.user-is-tabbing *:focus {
|
||||
outline: 3px solid var(--admin-accent-info);
|
||||
outline: 3px solid var(--accent-info);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@@ -173,13 +173,13 @@
|
||||
*/
|
||||
.text-contrast-aa {
|
||||
/* Ensures minimum 4.5:1 contrast */
|
||||
color: var(--admin-content-text);
|
||||
color: var(--content-text);
|
||||
}
|
||||
|
||||
.text-contrast-large {
|
||||
/* Large text can use lower contrast */
|
||||
font-size: 1.125rem;
|
||||
color: var(--admin-content-text);
|
||||
color: var(--content-text);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@@ -190,7 +190,7 @@
|
||||
*/
|
||||
.admin-error,
|
||||
.admin-form-error {
|
||||
color: var(--admin-accent-error);
|
||||
color: var(--accent-error);
|
||||
|
||||
&::before {
|
||||
content: '⚠ ';
|
||||
@@ -200,7 +200,7 @@
|
||||
}
|
||||
|
||||
[aria-invalid="true"] {
|
||||
border-color: var(--admin-accent-error) !important;
|
||||
border-color: var(--accent-error) !important;
|
||||
border-width: 2px !important;
|
||||
|
||||
/* Error icon */
|
||||
@@ -219,21 +219,21 @@
|
||||
.admin-success::before {
|
||||
content: '✓ ';
|
||||
font-weight: bold;
|
||||
color: var(--admin-accent-success);
|
||||
color: var(--accent-success);
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-warning::before {
|
||||
content: '⚠ ';
|
||||
font-weight: bold;
|
||||
color: var(--admin-accent-warning);
|
||||
color: var(--accent-warning);
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-info::before {
|
||||
content: 'ℹ ';
|
||||
font-weight: bold;
|
||||
color: var(--admin-accent-info);
|
||||
color: var(--accent-info);
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
@@ -285,20 +285,20 @@
|
||||
*/
|
||||
table {
|
||||
caption {
|
||||
font-weight: var(--admin-font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-align: left;
|
||||
padding: var(--admin-spacing-md);
|
||||
background-color: var(--admin-bg-secondary);
|
||||
padding: var(--spacing-md);
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: var(--admin-font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Zebra striping for better readability */
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--admin-bg-secondary);
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -321,7 +321,7 @@
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 0.875em;
|
||||
color: var(--admin-content-text);
|
||||
color: var(--content-text);
|
||||
}
|
||||
|
||||
/* Don't show internal links */
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
* Respects prefers-reduced-motion for accessibility.
|
||||
*/
|
||||
|
||||
@layer admin-utilities {
|
||||
@layer utilities {
|
||||
/**
|
||||
* Theme Transition Class
|
||||
*
|
||||
@@ -15,18 +15,18 @@
|
||||
:root {
|
||||
/* Smooth transitions for theme changes */
|
||||
transition:
|
||||
background-color var(--admin-transition-base),
|
||||
color var(--admin-transition-base),
|
||||
border-color var(--admin-transition-base);
|
||||
background-color var(--transition-base),
|
||||
color var(--transition-base),
|
||||
border-color var(--transition-base);
|
||||
}
|
||||
|
||||
/* Apply transitions to all elements during theme change */
|
||||
* {
|
||||
transition:
|
||||
background-color var(--admin-transition-base),
|
||||
color var(--admin-transition-base),
|
||||
border-color var(--admin-transition-base),
|
||||
box-shadow var(--admin-transition-base);
|
||||
background-color var(--transition-base),
|
||||
color var(--transition-base),
|
||||
border-color var(--transition-base),
|
||||
box-shadow var(--transition-base);
|
||||
}
|
||||
|
||||
/* Respect reduced motion preference */
|
||||
@@ -41,16 +41,15 @@
|
||||
* Theme Loading State
|
||||
*
|
||||
* Prevent FOUC (Flash of Unstyled Content) during initial theme load.
|
||||
* REMOVED: visibility hidden rule - causes blank page if data-theme is not set
|
||||
*/
|
||||
html:not([data-theme]) {
|
||||
/* Hide content until theme is determined */
|
||||
/* html:not([data-theme]) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
html[data-theme] {
|
||||
/* Show content once theme is set */
|
||||
visibility: visible;
|
||||
}
|
||||
} */
|
||||
|
||||
/**
|
||||
* Theme Toggle Animation
|
||||
@@ -58,7 +57,7 @@
|
||||
* Icon rotation when toggling theme.
|
||||
*/
|
||||
[data-theme-toggle] svg {
|
||||
transition: transform var(--admin-transition-base);
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
[data-theme-toggle]:hover svg {
|
||||
@@ -88,14 +87,14 @@
|
||||
@media (prefers-contrast: high) {
|
||||
[data-theme="dark"] {
|
||||
/* Increase contrast in forced colors mode */
|
||||
--admin-bg-primary: oklch(10% 0 0);
|
||||
--admin-content-text: oklch(100% 0 0);
|
||||
--bg-primary: oklch(10% 0 0);
|
||||
--content-text: oklch(100% 0 0);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
/* Ensure maximum contrast */
|
||||
--admin-bg-primary: oklch(100% 0 0);
|
||||
--admin-content-text: oklch(0% 0 0);
|
||||
--bg-primary: oklch(100% 0 0);
|
||||
--content-text: oklch(0% 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -108,15 +107,15 @@
|
||||
:root,
|
||||
[data-theme] {
|
||||
/* Force light colors for printing */
|
||||
--admin-bg-primary: oklch(100% 0 0);
|
||||
--admin-content-bg: oklch(100% 0 0);
|
||||
--admin-content-text: oklch(0% 0 0);
|
||||
--admin-border-light: oklch(20% 0 0);
|
||||
--bg-primary: oklch(100% 0 0);
|
||||
--content-bg: oklch(100% 0 0);
|
||||
--content-text: oklch(0% 0 0);
|
||||
--border-light: oklch(20% 0 0);
|
||||
|
||||
/* Remove shadows for print */
|
||||
--admin-shadow-sm: none;
|
||||
--admin-shadow-md: none;
|
||||
--admin-shadow-lg: none;
|
||||
--shadow-sm: none;
|
||||
--shadow-md: none;
|
||||
--shadow-lg: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
97
resources/css/admin/07-utilities/_view-transitions.css
Normal file
97
resources/css/admin/07-utilities/_view-transitions.css
Normal file
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* View Transitions - Admin Interface
|
||||
*
|
||||
* View Transitions API für Admin-Navigation und Content-Updates.
|
||||
* Baseline 2023: View Transitions API ist Baseline Newly available.
|
||||
*
|
||||
* Features:
|
||||
* - View Transitions für Admin-Sidebar-Navigation
|
||||
* - View Transitions für Admin-Content-Bereiche
|
||||
* - View Transitions für Popover-Öffnen/Schließen
|
||||
* - Benannte Bereiche für präzise Animationen
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
/**
|
||||
* View Transition Root
|
||||
*/
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Admin Sidebar View Transition
|
||||
*/
|
||||
@view-transition-group(admin-sidebar) {
|
||||
animation-duration: var(--transition-base);
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Admin Content View Transition
|
||||
*/
|
||||
@view-transition-group(admin-content) {
|
||||
animation-duration: var(--transition-base);
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Admin Header View Transition
|
||||
*/
|
||||
@view-transition-group(admin-header) {
|
||||
animation-duration: var(--transition-base);
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Popover View Transitions
|
||||
*/
|
||||
@view-transition-group(admin-popover) {
|
||||
animation-duration: var(--transition-base);
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/**
|
||||
* View Transition Names für Admin-Bereiche
|
||||
*/
|
||||
.admin-sidebar {
|
||||
view-transition-name: admin-sidebar;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
view-transition-name: admin-content;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
view-transition-name: admin-header;
|
||||
}
|
||||
|
||||
/**
|
||||
* Popover View Transition Names
|
||||
*/
|
||||
[popover].admin-popover {
|
||||
view-transition-name: admin-popover;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation Links mit View Transitions
|
||||
*/
|
||||
.admin-nav a {
|
||||
view-transition-name: none; /* Disable for individual links */
|
||||
}
|
||||
|
||||
/**
|
||||
* View Transition für Content-Updates
|
||||
*/
|
||||
.admin-page {
|
||||
view-transition-name: admin-content;
|
||||
}
|
||||
|
||||
/**
|
||||
* View Transition für Sidebar-Navigation
|
||||
*/
|
||||
.admin-nav__section[open] {
|
||||
view-transition-name: admin-nav-section;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +1,11 @@
|
||||
/**
|
||||
* Admin Interface - Main Entry Point
|
||||
* Admin CSS - Re-Export for Backwards Compatibility
|
||||
*
|
||||
* ITCSS Layer Import Structure:
|
||||
* 1. Settings - Design Tokens, Variablen
|
||||
* 2. Tools - Mixins, Functions
|
||||
* 3. Generic - Resets, Normalize
|
||||
* 4. Elements - HTML Element Styles
|
||||
* 5. Objects - Layout Primitives
|
||||
* 6. Components - UI Components (folgt in Sprint 2)
|
||||
* 7. Utilities - Helper Classes (folgt in Sprint 1.3)
|
||||
* This file is now a re-export of styles.css.
|
||||
* All styles have been consolidated into resources/css/styles.css.
|
||||
* This file is kept for backwards compatibility only.
|
||||
*
|
||||
* Verwendung der @layer Direktive für explizite Cascade Control.
|
||||
* @deprecated Use vite_tags('main') instead of loading admin.css directly
|
||||
*/
|
||||
|
||||
/* Layer 1: Settings */
|
||||
@import "./01-settings/_generated-tokens.css";
|
||||
@import "./01-settings/_breakpoints.css";
|
||||
|
||||
/* Layer 2: Tools */
|
||||
@import "./02-tools/_mixins.css";
|
||||
|
||||
/* Layer 3: Generic */
|
||||
@import "./03-generic/_reset.css";
|
||||
|
||||
/* Layer 4: Elements */
|
||||
@import "./04-elements/_base.css";
|
||||
|
||||
/* Layer 5: Objects */
|
||||
@import "./05-objects/_layout.css";
|
||||
@import "./05-objects/_grid.css";
|
||||
|
||||
/* Layer 6: Components */
|
||||
@import "./06-components/_sidebar.css";
|
||||
@import "./06-components/_header.css";
|
||||
@import "./06-components/_breadcrumbs.css";
|
||||
@import "./06-components/_content.css";
|
||||
@import "./06-components/_card.css";
|
||||
@import "./06-components/_button.css";
|
||||
@import "./06-components/_badge.css";
|
||||
@import "./06-components/_stat-list.css";
|
||||
@import "./06-components/_confusion-matrix.css";
|
||||
|
||||
/* Layer 7: Utilities */
|
||||
@import "./07-utilities/_accessibility.css";
|
||||
@import "./07-utilities/_theme-transitions.css";
|
||||
@import "../styles.css";
|
||||
|
||||
@@ -29,7 +29,7 @@ h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
padding-block: 1.5rem;
|
||||
padding-block: 0; /* Komplett entfernen, Abstände über margin steuern */
|
||||
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
443
resources/css/components/admin/admin-asset-gallery.css
Normal file
443
resources/css/components/admin/admin-asset-gallery.css
Normal file
@@ -0,0 +1,443 @@
|
||||
/**
|
||||
* Admin Asset Gallery Component
|
||||
*
|
||||
* Modern card-based gallery layout with filters sidebar, hover effects,
|
||||
* and improved bulk operations UI.
|
||||
* Uses BEM naming convention and design system tokens.
|
||||
*/
|
||||
|
||||
.admin-asset-gallery {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
padding: var(--space-lg, 1.5rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.admin-asset-gallery__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-md, 1rem);
|
||||
padding-bottom: var(--space-md, 1rem);
|
||||
border-bottom: 2px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__actions {
|
||||
display: flex;
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Filters Sidebar */
|
||||
.admin-asset-gallery__filters-sidebar {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
padding: var(--space-md, 1rem);
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__filters-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin: 0 0 var(--space-md, 1rem) 0;
|
||||
padding-bottom: var(--space-sm, 0.75rem);
|
||||
border-bottom: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-asset-gallery__filter-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__filter-input,
|
||||
.admin-asset-gallery__filter-select {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 4px;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
font-size: 0.875rem;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__filter-input:focus,
|
||||
.admin-asset-gallery__filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
box-shadow: 0 0 0 3px oklch(60% 0.2 280 / 0.1);
|
||||
}
|
||||
|
||||
/* Main Content Area */
|
||||
.admin-asset-gallery__content {
|
||||
display: flex;
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Bulk Actions Bar */
|
||||
.admin-asset-gallery__bulk-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-md, 1rem);
|
||||
padding: var(--space-md, 1rem);
|
||||
background: var(--accent-info, oklch(58% 0.22 240));
|
||||
background: oklch(58% 0.22 240 / 0.1);
|
||||
border: 1px solid var(--accent-info, oklch(58% 0.22 240));
|
||||
border-radius: 8px;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__bulk-actions-text {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__bulk-actions-buttons {
|
||||
display: flex;
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
}
|
||||
|
||||
/* Gallery Grid */
|
||||
.admin-asset-gallery__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Gallery List (Table View) */
|
||||
.admin-asset-gallery__list {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__list thead {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__list th {
|
||||
padding: var(--space-sm, 0.75rem);
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
border-bottom: 2px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__list td {
|
||||
padding: var(--space-sm, 0.75rem);
|
||||
border-bottom: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
font-size: 0.875rem;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__list tbody tr:hover {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__list tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__list-preview-image {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Asset Card */
|
||||
.admin-asset-card {
|
||||
position: relative;
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
padding: var(--space-sm, 0.75rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-asset-card:hover {
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
box-shadow: 0 4px 12px oklch(0% 0 0 / 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.admin-asset-card--selected {
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
border-width: 2px;
|
||||
box-shadow: 0 0 0 3px oklch(60% 0.2 280 / 0.1);
|
||||
}
|
||||
|
||||
.admin-asset-card__checkbox {
|
||||
position: absolute;
|
||||
top: var(--space-xs, 0.5rem);
|
||||
left: var(--space-xs, 0.5rem);
|
||||
z-index: 10;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
}
|
||||
|
||||
.admin-asset-card__preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-asset-card__preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.admin-asset-card:hover .admin-asset-card__preview-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.admin-asset-card__preview-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
padding: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
/* Overlay for Quick Actions */
|
||||
.admin-asset-card__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: oklch(0% 0 0 / 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.admin-asset-card:hover .admin-asset-card__overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.admin-asset-card__quick-actions {
|
||||
display: flex;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-asset-card__quick-action {
|
||||
padding: var(--space-xs, 0.5rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 4px;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-asset-card__quick-action:hover {
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
}
|
||||
|
||||
.admin-asset-card__info {
|
||||
margin-top: var(--space-xs, 0.5rem);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-card__collections {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-asset-card__collection-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.admin-asset-card__info-item {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-asset-card__info-label {
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-card__info-value {
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.admin-asset-gallery__empty-state {
|
||||
text-align: center;
|
||||
padding: var(--space-xl, 3rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: 8px;
|
||||
border: 2px dashed var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__empty-state-text {
|
||||
font-size: 1rem;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Load More */
|
||||
.admin-asset-gallery__load-more {
|
||||
text-align: center;
|
||||
margin-top: var(--space-lg, 1.5rem);
|
||||
padding-top: var(--space-lg, 1.5rem);
|
||||
border-top: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.admin-asset-gallery__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-xl, 3rem);
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-top-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.admin-asset-gallery__content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__filters-sidebar {
|
||||
min-width: 100%;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
}
|
||||
|
||||
.admin-asset-gallery__header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__actions {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__bulk-actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__bulk-actions-buttons {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* View Mode Toggle */
|
||||
.admin-asset-gallery__view-toggle {
|
||||
display: flex;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__view-toggle-button {
|
||||
padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.admin-asset-gallery__view-toggle-button:hover {
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-gallery__view-toggle-button--active {
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
503
resources/css/components/admin/admin-asset-picker.css
Normal file
503
resources/css/components/admin/admin-asset-picker.css
Normal file
@@ -0,0 +1,503 @@
|
||||
/**
|
||||
* Admin Asset Picker Component
|
||||
*
|
||||
* Modern modal design with backdrop, improved search with filter sidebar,
|
||||
* grid/list view options, and drag & drop support.
|
||||
* Uses BEM naming convention and design system tokens.
|
||||
*/
|
||||
|
||||
.livecomponent-admin-asset-picker {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Picker Button */
|
||||
.livecomponent-admin-asset-picker__button {
|
||||
padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 6px;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__button:hover {
|
||||
background: var(--bg-tertiary, oklch(92% 0.01 280));
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px oklch(0% 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* Modal Backdrop */
|
||||
.livecomponent-admin-asset-picker__backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: oklch(0% 0 0 / 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-lg, 1.5rem);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__backdrop--visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.livecomponent-admin-asset-picker__modal {
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
border-radius: 12px;
|
||||
padding: var(--space-xl, 2rem);
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px oklch(0% 0 0 / 0.3);
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.3s ease;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__backdrop--visible .livecomponent-admin-asset-picker__modal {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Modal Header */
|
||||
.livecomponent-admin-asset-picker__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
padding-bottom: var(--space-md, 1rem);
|
||||
border-bottom: 2px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__close {
|
||||
padding: var(--space-xs, 0.5rem);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__close:hover {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
/* Search and Filters */
|
||||
.livecomponent-admin-asset-picker__search-container {
|
||||
display: flex;
|
||||
gap: var(--space-md, 1rem);
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__search {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__search-input {
|
||||
width: 100%;
|
||||
padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
|
||||
padding-left: 2.5rem;
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 6px;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
box-shadow: 0 0 0 3px oklch(60% 0.2 280 / 0.1);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__search-icon {
|
||||
position: absolute;
|
||||
left: var(--space-sm, 0.75rem);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* View Toggle */
|
||||
.livecomponent-admin-asset-picker__view-toggle {
|
||||
display: flex;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__view-toggle-button {
|
||||
padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__view-toggle-button:hover {
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__view-toggle-button--active {
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
/* Main Content Area */
|
||||
.livecomponent-admin-asset-picker__content {
|
||||
display: flex;
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Filters Sidebar */
|
||||
.livecomponent-admin-asset-picker__filters {
|
||||
min-width: 250px;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
padding: var(--space-md, 1rem);
|
||||
overflow-y: auto;
|
||||
max-height: calc(90vh - 200px);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__filters-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin: 0 0 var(--space-md, 1rem) 0;
|
||||
padding-bottom: var(--space-sm, 0.75rem);
|
||||
border-bottom: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__filter-group {
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__filter-label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__filter-select,
|
||||
.livecomponent-admin-asset-picker__filter-input {
|
||||
width: 100%;
|
||||
padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 4px;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Assets Grid */
|
||||
.livecomponent-admin-asset-picker__assets {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: calc(90vh - 200px);
|
||||
padding-right: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
}
|
||||
|
||||
/* Asset Item */
|
||||
.livecomponent-admin-asset-picker__item {
|
||||
border: 2px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
padding: var(--space-sm, 0.75rem);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__item:hover {
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px oklch(0% 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__item--selected {
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
border-width: 3px;
|
||||
box-shadow: 0 0 0 3px oklch(60% 0.2 280 / 0.1);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__item--dragging {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Asset Preview */
|
||||
.livecomponent-admin-asset-picker__preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__item:hover .livecomponent-admin-asset-picker__preview-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__preview-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
padding: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
/* Asset Info */
|
||||
.livecomponent-admin-asset-picker__info {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
word-break: break-all;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__info-id {
|
||||
font-family: monospace;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* List View */
|
||||
.livecomponent-admin-asset-picker__list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__list[data-view="list"] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* List View Item */
|
||||
.livecomponent-admin-asset-picker__list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md, 1rem);
|
||||
padding: var(--space-sm, 0.75rem);
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 6px;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__list-item:hover {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__list-item--selected {
|
||||
background: oklch(60% 0.2 280 / 0.1);
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__list-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__list-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__list-id {
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__list-mime {
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
margin-top: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.livecomponent-admin-asset-picker__empty {
|
||||
text-align: center;
|
||||
padding: var(--space-xl, 3rem);
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__empty-text {
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Selected Asset Display */
|
||||
.livecomponent-admin-asset-picker__selected {
|
||||
margin-top: var(--space-md, 1rem);
|
||||
padding: var(--space-md, 1rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__selected-label {
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__selected-value {
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__clear {
|
||||
padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 4px;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__clear:hover {
|
||||
background: var(--bg-tertiary, oklch(92% 0.01 280));
|
||||
border-color: var(--accent-error, oklch(60% 0.25 25));
|
||||
color: var(--accent-error, oklch(60% 0.25 25));
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.livecomponent-admin-asset-picker__content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__filters {
|
||||
min-width: 100%;
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.livecomponent-admin-asset-picker__modal {
|
||||
padding: var(--space-md, 1rem);
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__search-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.livecomponent-admin-asset-picker__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-xl, 3rem);
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
}
|
||||
|
||||
.livecomponent-admin-asset-picker__loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-top-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
166
resources/css/components/admin/admin-asset-preview.css
Normal file
166
resources/css/components/admin/admin-asset-preview.css
Normal file
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* Asset Preview Styles
|
||||
* ITCSS: Components Layer
|
||||
*/
|
||||
|
||||
/* Preview Column in Table */
|
||||
.preview-column {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.asset-preview-thumbnail {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
background: var(--bg-alt);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: transform var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.asset-preview-thumbnail:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.asset-preview-thumbnail .preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.asset-preview-thumbnail .preview-video-icon,
|
||||
.asset-preview-thumbnail .preview-file-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.asset-preview-thumbnail:hover .preview-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.preview-link {
|
||||
color: var(--text-inverse);
|
||||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
padding: var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.preview-link:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Lightbox for Full Preview */
|
||||
.asset-lightbox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-xl);
|
||||
animation: fadeIn var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.asset-lightbox__content {
|
||||
position: relative;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.asset-lightbox__image {
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.asset-lightbox__close {
|
||||
position: absolute;
|
||||
top: var(--space-lg);
|
||||
right: var(--space-lg);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: var(--text-inverse);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: background var(--duration-default) var(--easing-default);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.asset-lightbox__close:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.asset-lightbox__info {
|
||||
position: absolute;
|
||||
bottom: var(--space-lg);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: center;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.preview-column {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.asset-preview-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
416
resources/css/components/admin/admin-asset-upload.css
Normal file
416
resources/css/components/admin/admin-asset-upload.css
Normal file
@@ -0,0 +1,416 @@
|
||||
/**
|
||||
* Admin Asset Upload Component
|
||||
*
|
||||
* Modern upload interface with batch upload support, drag & drop,
|
||||
* and individual file progress tracking.
|
||||
* Uses BEM naming convention and design system tokens.
|
||||
*/
|
||||
|
||||
.admin-asset-upload {
|
||||
padding: var(--space-lg, 1.5rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
/* Mode Toggle */
|
||||
.admin-asset-upload__mode-toggle {
|
||||
display: flex;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
border-bottom: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
padding-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-asset-upload__mode-button {
|
||||
padding: var(--space-xs, 0.5rem) var(--space-md, 1rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all var(--duration-default, 0.2s) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-asset-upload__mode-button:hover {
|
||||
background: var(--bg-hover, oklch(90% 0.01 280));
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
}
|
||||
|
||||
.admin-asset-upload__mode-button--active {
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
}
|
||||
|
||||
/* Upload Zone */
|
||||
.admin-upload-zone {
|
||||
border: 2px dashed var(--border, oklch(70% 0.02 280));
|
||||
border-radius: var(--radius-md, 8px);
|
||||
padding: var(--space-xl, 3rem) var(--space-lg, 2rem);
|
||||
text-align: center;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
transition: all var(--duration-default, 0.3s) var(--easing-default);
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.admin-upload-zone:hover {
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
background: var(--bg-hover, oklch(92% 0.01 280));
|
||||
}
|
||||
|
||||
.admin-upload-zone--dragover {
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
background: oklch(60% 0.2 280 / 0.1);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.admin-upload-zone__icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.admin-upload-zone__text {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-upload-zone__subtext {
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-upload-zone__button {
|
||||
display: inline-block;
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
padding: var(--space-sm, 0.75rem) var(--space-lg, 1.5rem);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
cursor: pointer;
|
||||
transition: background var(--duration-default, 0.2s) var(--easing-default);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.admin-upload-zone__button:hover {
|
||||
background: var(--accent-primary-dark, oklch(50% 0.2 280));
|
||||
}
|
||||
|
||||
.admin-upload-zone__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-upload-zone__info {
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
font-size: 0.75rem;
|
||||
margin-top: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Batch Upload Queue */
|
||||
.admin-asset-upload__batch-progress {
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.admin-asset-upload__batch-progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-asset-upload__batch-progress-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-asset-upload__queue {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-upload-item {
|
||||
display: flex;
|
||||
gap: var(--space-md, 1rem);
|
||||
padding: var(--space-md, 1rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: var(--radius-md, 8px);
|
||||
transition: all var(--duration-default, 0.2s) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-upload-item:hover {
|
||||
border-color: var(--border, oklch(70% 0.02 280));
|
||||
box-shadow: 0 2px 4px oklch(0% 0 0 / 0.05);
|
||||
}
|
||||
|
||||
.admin-upload-item--uploading {
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
}
|
||||
|
||||
.admin-upload-item--success {
|
||||
border-color: var(--success, oklch(60% 0.2 150));
|
||||
background: oklch(60% 0.2 150 / 0.05);
|
||||
}
|
||||
|
||||
.admin-upload-item--error {
|
||||
border-color: var(--error, oklch(60% 0.2 20));
|
||||
background: oklch(60% 0.2 20 / 0.05);
|
||||
}
|
||||
|
||||
.admin-upload-item__preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
overflow: hidden;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.admin-upload-item__preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.admin-upload-item__preview-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-upload-item__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-upload-item__filename {
|
||||
font-weight: 500;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.admin-upload-item__meta {
|
||||
display: flex;
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-upload-item__size,
|
||||
.admin-upload-item__mime {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.admin-upload-item__progress {
|
||||
margin-top: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-upload-item__success {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
color: var(--success, oklch(60% 0.2 150));
|
||||
font-size: 0.875rem;
|
||||
margin-top: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-upload-item__asset-id {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.7;
|
||||
margin-left: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-upload-item__error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
color: var(--error, oklch(60% 0.2 20));
|
||||
font-size: 0.875rem;
|
||||
margin-top: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-upload-item__actions {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
/* Overall Progress */
|
||||
.admin-asset-upload__overall-progress {
|
||||
margin-top: var(--space-md, 1rem);
|
||||
padding-top: var(--space-md, 1rem);
|
||||
border-top: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
/* Single Upload Progress */
|
||||
.admin-upload-progress {
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.admin-progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-progress-bar--sm {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.admin-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
transition: width var(--duration-default, 0.3s) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-progress-text {
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
}
|
||||
|
||||
/* File Preview */
|
||||
.admin-file-preview {
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
padding: var(--space-md, 1rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: var(--radius-md, 8px);
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-file-preview__image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-file-preview__info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.admin-asset-upload__form {
|
||||
margin-top: var(--space-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.admin-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.admin-form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-form-label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
width: 100%;
|
||||
padding: var(--space-xs, 0.625rem) var(--space-sm, 0.875rem);
|
||||
border: 1px solid var(--border, oklch(70% 0.02 280));
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
font-size: 0.875rem;
|
||||
transition: border-color var(--duration-default, 0.2s) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
box-shadow: 0 0 0 3px oklch(60% 0.2 280 / 0.1);
|
||||
}
|
||||
|
||||
.admin-form-help {
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
font-size: 0.75rem;
|
||||
margin-top: var(--space-xs, 0.25rem);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.admin-alert {
|
||||
padding: var(--space-md, 1rem);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.admin-alert--error {
|
||||
background: oklch(60% 0.2 20 / 0.1);
|
||||
border-left: 4px solid var(--error, oklch(60% 0.2 20));
|
||||
color: var(--error, oklch(60% 0.2 20));
|
||||
}
|
||||
|
||||
.admin-alert--success {
|
||||
background: oklch(60% 0.2 150 / 0.1);
|
||||
border-left: 4px solid var(--success, oklch(60% 0.2 150));
|
||||
color: var(--success, oklch(60% 0.2 150));
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.admin-btn {
|
||||
padding: var(--space-xs, 0.5rem) var(--space-md, 1rem);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: background var(--duration-default, 0.2s) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-btn--secondary {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-btn--secondary:hover {
|
||||
background: var(--bg-hover, oklch(90% 0.01 280));
|
||||
}
|
||||
|
||||
.admin-btn--danger {
|
||||
background: var(--error, oklch(60% 0.2 20));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
.admin-btn--danger:hover {
|
||||
background: oklch(50% 0.2 20);
|
||||
}
|
||||
|
||||
.admin-btn--sm {
|
||||
padding: var(--space-xs, 0.375rem) var(--space-sm, 0.75rem);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
224
resources/css/components/admin/admin-asset-variants.css
Normal file
224
resources/css/components/admin/admin-asset-variants.css
Normal file
@@ -0,0 +1,224 @@
|
||||
/**
|
||||
* Admin Asset Variants Component
|
||||
*
|
||||
* Modern variant management interface with grid layout,
|
||||
* thumbnail previews, and variant details.
|
||||
* Uses BEM naming convention and design system tokens.
|
||||
*/
|
||||
|
||||
.admin-asset-variants {
|
||||
padding: var(--space-lg, 1.5rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.admin-asset-variants__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-md, 1rem);
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
padding-bottom: var(--space-md, 1rem);
|
||||
border-bottom: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-variants__title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-asset-variants__actions {
|
||||
display: flex;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
/* Variants Grid */
|
||||
.admin-asset-variants__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Variant Card */
|
||||
.admin-variant-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: var(--radius-md, 8px);
|
||||
padding: var(--space-md, 1rem);
|
||||
transition: all var(--duration-default, 0.2s) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-variant-card:hover {
|
||||
border-color: var(--border, oklch(70% 0.02 280));
|
||||
box-shadow: 0 2px 8px oklch(0% 0 0 / 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.admin-variant-card__preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-sm, 0.75rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.admin-variant-card__thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--duration-default, 0.3s) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-variant-card:hover .admin-variant-card__thumbnail {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.admin-variant-card__icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
}
|
||||
|
||||
.admin-variant-card__icon-text {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
}
|
||||
|
||||
.admin-variant-card__info {
|
||||
flex: 1;
|
||||
margin-bottom: var(--space-sm, 0.75rem);
|
||||
}
|
||||
|
||||
.admin-variant-card__name {
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
font-size: 0.875rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.admin-variant-card__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
}
|
||||
|
||||
.admin-variant-card__dimensions,
|
||||
.admin-variant-card__size,
|
||||
.admin-variant-card__format {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.admin-variant-card__actions {
|
||||
display: flex;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.admin-asset-variants__empty {
|
||||
text-align: center;
|
||||
padding: var(--space-xl, 3rem) var(--space-lg, 2rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 2px dashed var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: var(--radius-md, 8px);
|
||||
}
|
||||
|
||||
.admin-asset-variants__empty-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.admin-asset-variants__empty-text {
|
||||
font-size: 1rem;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-asset-variants__empty-hint {
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
margin-top: var(--space-sm, 0.75rem);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.admin-alert {
|
||||
padding: var(--space-md, 1rem);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.admin-alert--error {
|
||||
background: oklch(60% 0.2 20 / 0.1);
|
||||
border-left: 4px solid var(--error, oklch(60% 0.2 20));
|
||||
color: var(--error, oklch(60% 0.2 20));
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.admin-btn {
|
||||
padding: var(--space-xs, 0.5rem) var(--space-md, 1rem);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all var(--duration-default, 0.2s) var(--easing-default);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.admin-btn--primary {
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
.admin-btn--primary:hover:not(:disabled) {
|
||||
background: var(--accent-primary-dark, oklch(50% 0.2 280));
|
||||
}
|
||||
|
||||
.admin-btn--secondary {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-btn--secondary:hover {
|
||||
background: var(--bg-hover, oklch(90% 0.01 280));
|
||||
border-color: var(--border, oklch(70% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-btn--danger {
|
||||
background: var(--error, oklch(60% 0.2 20));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
.admin-btn--danger:hover {
|
||||
background: oklch(50% 0.2 20);
|
||||
}
|
||||
|
||||
.admin-btn--sm {
|
||||
padding: var(--space-xs, 0.375rem) var(--space-sm, 0.75rem);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
501
resources/css/components/admin/admin-block-editor.css
Normal file
501
resources/css/components/admin/admin-block-editor.css
Normal file
@@ -0,0 +1,501 @@
|
||||
/**
|
||||
* Admin Block Editor Component
|
||||
*
|
||||
* Modern block editor with split-screen mode, improved block cards,
|
||||
* enhanced drag & drop feedback, and block type icons.
|
||||
* Uses BEM naming convention and design system tokens.
|
||||
*/
|
||||
|
||||
.admin-block-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
padding: var(--space-lg, 1.5rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Split-Screen Layout */
|
||||
.admin-block-editor--split-screen {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.admin-block-editor__main {
|
||||
grid-column: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.admin-block-editor__preview-panel {
|
||||
grid-column: 2;
|
||||
position: sticky;
|
||||
top: var(--space-lg, 1.5rem);
|
||||
max-height: calc(100vh - var(--space-lg, 1.5rem) * 2);
|
||||
overflow-y: auto;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
padding: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.admin-block-editor__toolbar {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
padding: var(--space-md, 1rem);
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-block-editor__title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin: 0 0 var(--space-md, 1rem) 0;
|
||||
padding-bottom: var(--space-sm, 0.75rem);
|
||||
border-bottom: 2px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
/* Block Types Grid */
|
||||
.admin-block-editor__block-types {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
}
|
||||
|
||||
.admin-block-type-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
padding: var(--space-md, 1rem);
|
||||
border: 2px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.admin-block-type-btn:hover {
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px oklch(0% 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.admin-block-type-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.admin-block-type-btn__icon {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.admin-block-type-btn__label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Template Selection */
|
||||
.admin-block-editor__templates {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
padding: var(--space-md, 1rem);
|
||||
margin-top: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-block-editor__template-select {
|
||||
margin-top: var(--space-sm, 0.75rem);
|
||||
}
|
||||
|
||||
/* Blocks Container */
|
||||
.admin-block-editor__blocks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md, 1rem);
|
||||
margin-bottom: var(--space-lg, 1.5rem);
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.admin-block-editor__blocks--dragging {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.admin-block-editor__blocks--dragging .admin-block-card {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Block Card */
|
||||
.admin-block-card {
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
padding: var(--space-md, 1rem);
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.admin-block-card:hover {
|
||||
border-color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
box-shadow: 0 4px 12px oklch(0% 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.admin-block-card--dragging {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.95);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.admin-block-card--drag-over-before {
|
||||
border-top: 3px solid var(--accent-primary, oklch(60% 0.2 280));
|
||||
padding-top: calc(var(--space-md, 1rem) - 3px);
|
||||
}
|
||||
|
||||
.admin-block-card--drag-over-after {
|
||||
border-bottom: 3px solid var(--accent-primary, oklch(60% 0.2 280));
|
||||
padding-bottom: calc(var(--space-md, 1rem) - 3px);
|
||||
}
|
||||
|
||||
.admin-block-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-sm, 0.75rem);
|
||||
padding-bottom: var(--space-sm, 0.75rem);
|
||||
border-bottom: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
}
|
||||
|
||||
.admin-block-card__drag-handle {
|
||||
cursor: grab;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
padding: var(--space-xs, 0.5rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.admin-block-card__drag-handle:hover {
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
.admin-block-card__drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.admin-block-card__type {
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
text-transform: capitalize;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-block-card__type-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--accent-primary, oklch(60% 0.2 280));
|
||||
}
|
||||
|
||||
.admin-block-card__actions {
|
||||
display: flex;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-block-card__preview {
|
||||
padding: var(--space-sm, 0.75rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
border-radius: 4px;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px dashed var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-block-card__preview-text {
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.admin-block-card__preview-content {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.admin-block-editor__empty {
|
||||
padding: var(--space-xl, 3rem);
|
||||
text-align: center;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: 8px;
|
||||
border: 2px dashed var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
/* Edit Form */
|
||||
.admin-block-editor__edit-form {
|
||||
margin-top: var(--space-lg, 1.5rem);
|
||||
padding: var(--space-lg, 1.5rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-block-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-block-form__actions {
|
||||
display: flex;
|
||||
gap: var(--space-md, 1rem);
|
||||
margin-top: var(--space-lg, 1.5rem);
|
||||
padding-top: var(--space-md, 1rem);
|
||||
border-top: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
/* Preview Controls */
|
||||
.admin-block-editor__preview-controls {
|
||||
margin-top: var(--space-lg, 1.5rem);
|
||||
padding-top: var(--space-lg, 1.5rem);
|
||||
border-top: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
display: flex;
|
||||
gap: var(--space-sm, 0.75rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-block-editor__preview-toggle {
|
||||
padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
.admin-block-editor__preview-toggle:hover {
|
||||
background: oklch(55% 0.2 280);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px oklch(60% 0.2 280 / 0.3);
|
||||
}
|
||||
|
||||
.admin-block-editor__preview-toggle--active {
|
||||
background: var(--accent-success, oklch(58% 0.22 145));
|
||||
}
|
||||
|
||||
/* Preview Area */
|
||||
.admin-block-editor__preview {
|
||||
margin-top: var(--space-lg, 1.5rem);
|
||||
padding: var(--space-lg, 1.5rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-block-editor__preview-content {
|
||||
margin-top: var(--space-md, 1rem);
|
||||
padding: var(--space-md, 1rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
border-radius: 4px;
|
||||
min-height: 200px;
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-block-editor__preview-error {
|
||||
padding: var(--space-md, 1rem);
|
||||
background: oklch(95% 0.05 25 / 0.1);
|
||||
border: 1px solid var(--accent-error, oklch(60% 0.25 25));
|
||||
border-radius: 4px;
|
||||
color: var(--accent-error, oklch(60% 0.25 25));
|
||||
}
|
||||
|
||||
.admin-block-editor__preview-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-xl, 3rem);
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
}
|
||||
|
||||
/* Asset Picker Wrapper */
|
||||
.admin-asset-picker-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-asset-picker-container {
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-asset-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
padding: var(--space-xs, 0.5rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.admin-asset-preview__label {
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-asset-preview__value {
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
font-family: monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.admin-btn {
|
||||
padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-btn--small {
|
||||
padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.admin-btn--primary {
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
.admin-btn--primary:hover {
|
||||
background: oklch(55% 0.2 280);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px oklch(60% 0.2 280 / 0.3);
|
||||
}
|
||||
|
||||
.admin-btn--secondary {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-btn--secondary:hover {
|
||||
background: var(--bg-tertiary, oklch(92% 0.01 280));
|
||||
}
|
||||
|
||||
.admin-btn--danger {
|
||||
background: var(--accent-error, oklch(60% 0.25 25));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
.admin-btn--danger:hover {
|
||||
background: oklch(55% 0.25 25);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px oklch(60% 0.25 25 / 0.3);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.admin-block-editor--split-screen {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-block-editor__preview-panel {
|
||||
position: static;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.admin-block-editor {
|
||||
padding: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-block-editor__block-types {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
}
|
||||
|
||||
.admin-block-card__header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-block-card__actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Drag & Drop Visual Feedback */
|
||||
@keyframes drag-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-block-editor__blocks--dragging .admin-block-card:not(.admin-block-card--dragging) {
|
||||
animation: drag-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Block Type Icons */
|
||||
.admin-block-type-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-block-type-icon--hero {
|
||||
background: linear-gradient(135deg, var(--accent-primary, oklch(60% 0.2 280)), oklch(65% 0.2 300));
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.admin-block-type-icon--text {
|
||||
background: var(--accent-info, oklch(58% 0.22 240));
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.admin-block-type-icon--image {
|
||||
background: var(--accent-success, oklch(58% 0.22 145));
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
129
resources/css/components/admin/admin-bulk-operations.css
Normal file
129
resources/css/components/admin/admin-bulk-operations.css
Normal file
@@ -0,0 +1,129 @@
|
||||
/**
|
||||
* Bulk Operations Styles
|
||||
* ITCSS: Components Layer
|
||||
*/
|
||||
|
||||
/* Bulk Actions Toolbar */
|
||||
.bulk-actions-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.bulk-actions-info {
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.bulk-selected-count {
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.bulk-actions-buttons {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
/* Bulk Checkbox Column */
|
||||
.bulk-checkbox-column {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bulk-select-all,
|
||||
.bulk-select-item {
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.bulk-select-all:indeterminate {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Confirmation Dialog */
|
||||
.bulk-confirm-dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bulk-confirm-dialog__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.bulk-confirm-dialog__content {
|
||||
position: relative;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-xl);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bulk-confirm-dialog__content h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.bulk-confirm-dialog__content p {
|
||||
margin-bottom: var(--space-lg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.bulk-confirm-dialog__actions {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.bulk-actions-toolbar[data-loading="true"] .bulk-actions-buttons button {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.bulk-actions-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.bulk-actions-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bulk-actions-buttons button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
/* Base Card */
|
||||
.admin-card {
|
||||
.card {
|
||||
background: var(--bg-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -15,43 +15,43 @@
|
||||
transition: all var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-card:hover {
|
||||
.card:hover {
|
||||
border-color: oklch(from var(--border) l c h / 0.3);
|
||||
box-shadow: 0 4px 12px oklch(0% 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.admin-card__header {
|
||||
.card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.admin-card__title {
|
||||
.card__title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-card__subtitle {
|
||||
.card__subtitle {
|
||||
color: var(--muted);
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-card__action {
|
||||
.card__action {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.admin-card__action:hover {
|
||||
.card__action:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.admin-card__content {
|
||||
.card__content {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -156,38 +156,38 @@
|
||||
}
|
||||
|
||||
/* Compact Cards */
|
||||
.admin-card--compact {
|
||||
.card--compact {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.admin-card--compact .admin-card__title {
|
||||
.card--compact .card__title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Card Grid Layouts */
|
||||
.admin-cards {
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: var(--space-lg);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.admin-cards--2-col {
|
||||
.cards--2-col {
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.admin-cards--3-col {
|
||||
.cards--3-col {
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
}
|
||||
|
||||
.admin-cards--4-col {
|
||||
.cards--4-col {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.admin-cards--2-col,
|
||||
.admin-cards--3-col,
|
||||
.admin-cards--4-col {
|
||||
.cards--2-col,
|
||||
.cards--3-col,
|
||||
.cards--4-col {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
449
resources/css/components/admin/admin-content-form.css
Normal file
449
resources/css/components/admin/admin-content-form.css
Normal file
@@ -0,0 +1,449 @@
|
||||
/**
|
||||
* Admin Content Form Component
|
||||
*
|
||||
* Modern content form with split-screen layout option, collapsible sections,
|
||||
* auto-save indicator, and sticky form actions bar.
|
||||
* Uses BEM naming convention and design system tokens.
|
||||
*/
|
||||
|
||||
.admin-content-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
padding: var(--space-lg, 1.5rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.admin-content-form__alert {
|
||||
padding: var(--space-md, 1rem);
|
||||
border-radius: 8px;
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
border-left: 4px solid;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-content-form__alert--error {
|
||||
background: oklch(95% 0.05 25 / 0.1);
|
||||
border-left-color: var(--accent-error, oklch(60% 0.25 25));
|
||||
color: var(--accent-error, oklch(60% 0.25 25));
|
||||
}
|
||||
|
||||
.admin-content-form__alert--info {
|
||||
background: oklch(95% 0.05 240 / 0.1);
|
||||
border-left-color: var(--accent-info, oklch(58% 0.22 240));
|
||||
color: var(--accent-info, oklch(58% 0.22 240));
|
||||
}
|
||||
|
||||
.admin-content-form__alert--success {
|
||||
background: oklch(95% 0.05 145 / 0.1);
|
||||
border-left-color: var(--accent-success, oklch(58% 0.22 145));
|
||||
color: var(--accent-success, oklch(58% 0.22 145));
|
||||
}
|
||||
|
||||
.admin-content-form__error-list {
|
||||
margin: var(--space-sm, 0.75rem) 0 0 var(--space-lg, 1.5rem);
|
||||
padding: 0;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.admin-content-form__error-item {
|
||||
margin-bottom: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
/* Auto-Save Indicator */
|
||||
.admin-content-form__auto-save {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
position: fixed;
|
||||
top: var(--space-md, 1rem);
|
||||
right: var(--space-md, 1rem);
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 8px oklch(0% 0 0 / 0.1);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.admin-content-form__auto-save--visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.admin-content-form__auto-save-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-content-form__auto-save-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Form Sections Container */
|
||||
.admin-content-form__sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
}
|
||||
|
||||
/* Split-Screen Layout */
|
||||
.admin-content-form--split-screen {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-lg, 1.5rem);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.admin-content-form--split-screen .admin-content-form__sections {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.admin-content-form__preview-panel {
|
||||
grid-column: 2;
|
||||
position: sticky;
|
||||
top: var(--space-lg, 1.5rem);
|
||||
max-height: calc(100vh - var(--space-lg, 1.5rem) * 2);
|
||||
overflow-y: auto;
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 8px;
|
||||
padding: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Form Section */
|
||||
.admin-content-form__section {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: 8px;
|
||||
padding: var(--space-lg, 1.5rem);
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-content-form__section--collapsed {
|
||||
padding: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-content-form__section--collapsed .admin-content-form__section-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-content-form__section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
padding-bottom: var(--space-sm, 0.75rem);
|
||||
border-bottom: 2px solid var(--border-light, oklch(75% 0.02 280));
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.admin-content-form__section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-content-form__section-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
cursor: pointer;
|
||||
padding: var(--space-xs, 0.5rem);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.admin-content-form__section-toggle:hover {
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-content-form__section-toggle-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-content-form__section--collapsed .admin-content-form__section-toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.admin-content-form__section-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Form Grid */
|
||||
.admin-content-form__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
/* Form Field */
|
||||
.admin-content-form__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-content-form__field--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.admin-content-form__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
font-weight: 500;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.admin-content-form__required {
|
||||
color: var(--accent-error, oklch(60% 0.25 25));
|
||||
}
|
||||
|
||||
.admin-content-form__badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.admin-content-form__badge--info {
|
||||
background: oklch(95% 0.05 240 / 0.2);
|
||||
color: var(--accent-info, oklch(58% 0.22 240));
|
||||
}
|
||||
|
||||
.admin-content-form__badge--success {
|
||||
background: oklch(95% 0.05 145 / 0.2);
|
||||
color: var(--accent-success, oklch(58% 0.22 145));
|
||||
}
|
||||
|
||||
.admin-content-form__input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-content-form__help {
|
||||
color: var(--muted, oklch(50% 0.01 280));
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-content-form__error {
|
||||
color: var(--accent-error, oklch(60% 0.25 25));
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
/* Form Actions - Sticky */
|
||||
.admin-content-form__actions {
|
||||
display: flex;
|
||||
gap: var(--space-md, 1rem);
|
||||
padding: var(--space-md, 1rem);
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
border-top: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 -2px 8px oklch(0% 0 0 / 0.05);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.admin-content-form__actions-button {
|
||||
padding: var(--space-sm, 0.75rem) var(--space-lg, 1.5rem);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.admin-content-form__actions-button--primary {
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
}
|
||||
|
||||
.admin-content-form__actions-button--primary:hover {
|
||||
background: oklch(55% 0.2 280);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px oklch(60% 0.2 280 / 0.3);
|
||||
}
|
||||
|
||||
.admin-content-form__actions-button--secondary {
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-content-form__actions-button--secondary:hover {
|
||||
background: var(--bg-tertiary, oklch(92% 0.01 280));
|
||||
}
|
||||
|
||||
/* Keyboard Shortcuts Help */
|
||||
.admin-content-form__shortcuts {
|
||||
position: fixed;
|
||||
bottom: var(--space-lg, 1.5rem);
|
||||
right: var(--space-lg, 1.5rem);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts-button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-primary, oklch(60% 0.2 280));
|
||||
color: var(--bg, oklch(100% 0 0));
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px oklch(0% 0 0 / 0.2);
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts-button:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px oklch(0% 0 0 / 0.3);
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: oklch(0% 0 0 / 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1001;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts-modal--visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts-content {
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
border-radius: 12px;
|
||||
padding: var(--space-xl, 2rem);
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px oklch(0% 0 0 / 0.3);
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 var(--space-lg, 1.5rem) 0;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md, 1rem);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-sm, 0.75rem);
|
||||
background: var(--bg-secondary, oklch(95% 0.01 280));
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts-key {
|
||||
font-family: monospace;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: var(--bg, oklch(100% 0 0));
|
||||
border: 1px solid var(--border-light, oklch(75% 0.02 280));
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text, oklch(20% 0.02 280));
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.admin-content-form--split-screen {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-content-form__preview-panel {
|
||||
position: static;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.admin-content-form {
|
||||
padding: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
.admin-content-form__actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-content-form__actions-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.admin-content-form__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-content-form__shortcuts {
|
||||
bottom: var(--space-md, 1rem);
|
||||
right: var(--space-md, 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
129
resources/css/components/admin/admin-duplicates.css
Normal file
129
resources/css/components/admin/admin-duplicates.css
Normal file
@@ -0,0 +1,129 @@
|
||||
/**
|
||||
* Duplicate Management Styles
|
||||
* ITCSS: Components Layer
|
||||
*/
|
||||
|
||||
.merge-dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.merge-dialog__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.merge-dialog__content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
min-width: 600px;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
padding: var(--space-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.merge-dialog__content h3 {
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.merge-dialog__content p {
|
||||
color: var(--muted);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.merge-dialog__assets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.merge-asset-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.merge-asset-option input[type="radio"] {
|
||||
margin-right: var(--space-md);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.merge-asset-option label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
padding: var(--space-md);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.merge-asset-option input[type="radio"]:checked + label {
|
||||
border-color: var(--primary);
|
||||
background: oklch(from var(--primary) l c h / 0.1);
|
||||
}
|
||||
|
||||
.merge-asset-preview {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background: var(--bg-alt);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.merge-asset-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.merge-asset-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.merge-asset-info strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-xs);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.merge-asset-info small {
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.merge-dialog__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-sm);
|
||||
padding-top: var(--space-lg);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
81
resources/css/components/admin/admin-filters.css
Normal file
81
resources/css/components/admin/admin-filters.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Admin Filters Panel Styles
|
||||
* ITCSS: Components Layer
|
||||
*/
|
||||
|
||||
.search-and-filters {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.search-and-filters .search-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-filters-panel {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-lg);
|
||||
margin-top: var(--space-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.filters-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.filter-group .admin-select[multiple] {
|
||||
min-height: 120px;
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.date-range-inputs {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.date-range-inputs .admin-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.filter-actions .btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-toggle-filters].active {
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filters-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.date-range-inputs {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -285,6 +285,302 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Drag & Drop Upload Zone */
|
||||
.admin-upload-zone {
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
background: var(--bg-alt);
|
||||
transition: all var(--duration-default) var(--easing-default);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-upload-zone:hover {
|
||||
border-color: var(--accent);
|
||||
background: oklch(from var(--accent) l c h / 0.05);
|
||||
}
|
||||
|
||||
.admin-upload-zone--dragover {
|
||||
border-color: var(--accent);
|
||||
background: oklch(from var(--accent) l c h / 0.1);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.admin-upload-progress {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.admin-progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--bg-alt);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.admin-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
transition: width var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-progress-text {
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* File Preview */
|
||||
.admin-file-preview {
|
||||
margin-bottom: var(--space-lg);
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-alt);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.admin-file-preview__image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-md);
|
||||
box-shadow: 0 2px 8px oklch(from var(--text) l c h / 0.1);
|
||||
}
|
||||
|
||||
.admin-file-preview__info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* Validation States */
|
||||
.admin-input--error,
|
||||
.admin-select--error,
|
||||
.admin-textarea--error {
|
||||
border-color: var(--error);
|
||||
}
|
||||
|
||||
.admin-input--error:focus,
|
||||
.admin-select--error:focus,
|
||||
.admin-textarea--error:focus {
|
||||
border-color: var(--error);
|
||||
box-shadow: 0 0 0 3px oklch(from var(--error) l c h / 0.1);
|
||||
}
|
||||
|
||||
.admin-input--success,
|
||||
.admin-select--success,
|
||||
.admin-textarea--success {
|
||||
border-color: var(--success, #4caf50);
|
||||
}
|
||||
|
||||
.admin-input--success:focus,
|
||||
.admin-select--success:focus,
|
||||
.admin-textarea--success:focus {
|
||||
border-color: var(--success, #4caf50);
|
||||
box-shadow: 0 0 0 3px oklch(from var(--success, #4caf50) l c h / 0.1);
|
||||
}
|
||||
|
||||
.admin-field--error .admin-form-label {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.admin-field--success .admin-form-label {
|
||||
color: var(--success, #4caf50);
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
.admin-spinner {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: admin-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes admin-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-spinner--large {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.admin-spinner--small {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-width: 1.5px;
|
||||
}
|
||||
|
||||
/* Toast Notifications */
|
||||
.admin-toast {
|
||||
position: fixed;
|
||||
top: var(--space-lg);
|
||||
right: var(--space-lg);
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 4px 12px oklch(from var(--text) l c h / 0.15);
|
||||
z-index: 1000;
|
||||
animation: admin-toast-slide-in 0.3s var(--easing-default);
|
||||
}
|
||||
|
||||
@keyframes admin-toast-slide-in {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toast--success {
|
||||
background: var(--success, #4caf50);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-toast--error {
|
||||
background: var(--error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-toast--info {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-toast--warning {
|
||||
background: var(--warning, #ff9800);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-toast__message {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-toast__close {
|
||||
position: absolute;
|
||||
top: var(--space-sm);
|
||||
right: var(--space-sm);
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-toast__close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Alert Styles */
|
||||
.admin-alert {
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.admin-alert--error {
|
||||
background: oklch(from var(--error) l c h / 0.1);
|
||||
border-color: var(--error);
|
||||
color: oklch(from var(--error) l c h / 0.9);
|
||||
}
|
||||
|
||||
.admin-alert--success {
|
||||
background: oklch(from var(--success, #4caf50) l c h / 0.1);
|
||||
border-color: var(--success, #4caf50);
|
||||
color: oklch(from var(--success, #4caf50) l c h / 0.9);
|
||||
}
|
||||
|
||||
.admin-alert--info {
|
||||
background: oklch(from var(--accent) l c h / 0.1);
|
||||
border-color: var(--accent);
|
||||
color: oklch(from var(--accent) l c h / 0.9);
|
||||
}
|
||||
|
||||
.admin-alert--warning {
|
||||
background: oklch(from var(--warning, #ff9800) l c h / 0.1);
|
||||
border-color: var(--warning, #ff9800);
|
||||
color: oklch(from var(--warning, #ff9800) l c h / 0.9);
|
||||
}
|
||||
|
||||
.admin-error-list {
|
||||
margin: var(--space-sm) 0 0 var(--space-lg);
|
||||
padding: 0;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
margin-left: var(--space-sm);
|
||||
}
|
||||
|
||||
.badge--info {
|
||||
background: oklch(from var(--accent) l c h / 0.1);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.badge--success {
|
||||
background: oklch(from var(--success, #4caf50) l c h / 0.1);
|
||||
color: var(--success, #4caf50);
|
||||
}
|
||||
|
||||
.badge--error {
|
||||
background: oklch(from var(--error) l c h / 0.1);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.badge--warning {
|
||||
background: oklch(from var(--warning, #ff9800) l c h / 0.1);
|
||||
color: var(--warning, #ff9800);
|
||||
}
|
||||
|
||||
/* Form Sections */
|
||||
.admin-form-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.admin-form-section {
|
||||
background: var(--bg-alt);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-lg);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.admin-form-section__title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0 0 var(--space-lg) 0;
|
||||
padding-bottom: var(--space-md);
|
||||
border-bottom: 2px solid var(--border);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.admin-filter-bar {
|
||||
@@ -314,4 +610,15 @@
|
||||
.admin-radio-group--horizontal {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-toast {
|
||||
right: var(--space-sm);
|
||||
left: var(--space-sm);
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.admin-upload-zone {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
@@ -60,6 +60,57 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Sortable Columns */
|
||||
.admin-table th[data-column] {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-table th[data-column]:hover {
|
||||
background: oklch(from var(--bg-alt) calc(l + 0.04) c h);
|
||||
}
|
||||
|
||||
.admin-table th[data-column] .header-content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-table th[data-column] .header-content::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 4px solid var(--muted);
|
||||
opacity: 0.3;
|
||||
transition: opacity var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.admin-table th[data-column]:hover .header-content::after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.admin-table th[data-column].sort-asc .header-content::after {
|
||||
opacity: 1;
|
||||
border-bottom-color: var(--accent);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.admin-table th[data-column].sort-desc .header-content::after {
|
||||
opacity: 1;
|
||||
border-top-color: var(--accent);
|
||||
border-bottom: none;
|
||||
border-top: 4px solid var(--accent);
|
||||
}
|
||||
|
||||
.admin-table th[data-column].sort-asc .header-content::after,
|
||||
.admin-table th[data-column].sort-desc .header-content::after {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-table td {
|
||||
color: var(--text);
|
||||
vertical-align: top;
|
||||
@@ -151,16 +202,30 @@
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-table__action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.375rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-default) var(--easing-default);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.admin-table__action svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.admin-table__action:hover {
|
||||
|
||||
217
resources/css/components/admin/admin-ui-enhancements.css
Normal file
217
resources/css/components/admin/admin-ui-enhancements.css
Normal file
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* UI Enhancements Styles
|
||||
* ITCSS: Components Layer
|
||||
*/
|
||||
|
||||
/* Loading Overlay */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .loading-overlay {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid var(--border);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.loading-message {
|
||||
margin-top: var(--space-md);
|
||||
color: var(--text);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Loading State */
|
||||
button.loading,
|
||||
input[type="submit"].loading {
|
||||
position: relative;
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.button-spinner {
|
||||
display: inline-block;
|
||||
margin-right: var(--space-xs);
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Optimistic Updates */
|
||||
.optimistic-delete {
|
||||
opacity: 0.5;
|
||||
text-decoration: line-through;
|
||||
transition: opacity var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.optimistic-update {
|
||||
background: oklch(from var(--info) l c h / 0.1);
|
||||
transition: background var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
/* Error Notifications */
|
||||
.error-notification {
|
||||
position: fixed;
|
||||
top: var(--space-lg);
|
||||
right: var(--space-lg);
|
||||
background: var(--error);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 10000;
|
||||
max-width: 400px;
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
.error-notification strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.error-notification p {
|
||||
margin: var(--space-xs) 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.error-notification button {
|
||||
margin-top: var(--space-sm);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-inverse);
|
||||
cursor: pointer;
|
||||
transition: background var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.error-notification button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Table Row Loading States */
|
||||
tr[data-loading="true"] {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
tr[data-loading="true"] td {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
tr[data-loading="true"] td::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
transparent
|
||||
);
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Form Loading States */
|
||||
form[data-loading="true"] {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
form[data-loading="true"] input,
|
||||
form[data-loading="true"] textarea,
|
||||
form[data-loading="true"] select {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Retry Button */
|
||||
.retry-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
background: var(--warning);
|
||||
color: var(--text-inverse);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: background var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
background: var(--warning-dark);
|
||||
}
|
||||
|
||||
/* Success Flash */
|
||||
.success-flash {
|
||||
position: fixed;
|
||||
top: var(--space-lg);
|
||||
right: var(--space-lg);
|
||||
background: var(--success);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 10000;
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.error-notification,
|
||||
.success-flash {
|
||||
top: var(--space-md);
|
||||
right: var(--space-md);
|
||||
left: var(--space-md);
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,46 @@
|
||||
/* Frontend Header */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 3rem;
|
||||
padding-inline: clamp(1.5rem, 4vw + 1rem, 3rem);
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
z-index: 4000;
|
||||
}
|
||||
|
||||
header a {
|
||||
text-decoration: none;
|
||||
color: var(--text, #eee);
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
transition: all 0.2s ease-in;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
color: var(--accent, #fff);
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
header button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
header button:hover {
|
||||
color: var(--accent, #fff);
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Legacy: main > .header (for backward compatibility) */
|
||||
main > .header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@@ -8,43 +51,37 @@ main > .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 3rem; /* Optional: Abstand innen */
|
||||
|
||||
padding: 3rem;
|
||||
padding-inline: clamp(1.5rem, 4vw + 1rem, 3rem);
|
||||
|
||||
user-select: none;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #eee;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
transition: all 0.2s ease-in;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
|
||||
z-index: 9999;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main > .header a {
|
||||
text-decoration: none;
|
||||
color: #eee;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
transition: all 0.2s ease-in;
|
||||
}
|
||||
|
||||
main > .header a:hover {
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
main > .header button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
main > .header button:hover {
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
68
resources/css/components/livecomponent/transitions.css
Normal file
68
resources/css/components/livecomponent/transitions.css
Normal file
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* LiveComponent Transitions
|
||||
* CSS transitions for DOM swap operations
|
||||
*/
|
||||
|
||||
/* Fade transition */
|
||||
.lc-transition-fade {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.lc-transition-fade.lc-transition-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Slide transition */
|
||||
.lc-transition-slide {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.lc-transition-slide.lc-transition-active {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Slide down transition */
|
||||
.lc-transition-slide-down {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.lc-transition-slide-down.lc-transition-active {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Slide up transition */
|
||||
.lc-transition-slide-up {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.lc-transition-slide-up.lc-transition-active {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Loading indicator active state */
|
||||
.lc-indicator-active {
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Loading state for boosted links/forms */
|
||||
a.lc-loading,
|
||||
form.lc-loading {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
98
resources/css/components/navigation.css
Normal file
98
resources/css/components/navigation.css
Normal file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Navigation Components
|
||||
*
|
||||
* Styles for main navigation and footer navigation components
|
||||
*/
|
||||
|
||||
/* Main Navigation */
|
||||
nav[aria-label="Hauptnavigation"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav[aria-label="Hauptnavigation"] menu {
|
||||
display: flex;
|
||||
gap: var(--space-md, 1rem);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav[aria-label="Hauptnavigation"] menu li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav[aria-label="Hauptnavigation"] menu li a {
|
||||
color: var(--text, currentColor);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
|
||||
border-radius: var(--radius-md, 0.375rem);
|
||||
transition: all var(--duration-default, 0.2s) var(--easing-default, ease);
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav[aria-label="Hauptnavigation"] menu li a:hover {
|
||||
background: oklch(from var(--bg-alt, #f5f5f5) calc(l + 0.05) c h);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav[aria-label="Hauptnavigation"] menu li a[aria-current="page"] {
|
||||
background: var(--accent, #007bff);
|
||||
color: var(--bg, #ffffff);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Footer Navigation */
|
||||
nav[aria-label="Footer Navigation"] {
|
||||
margin-bottom: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
nav[aria-label="Footer Navigation"] menu.footer-nav {
|
||||
display: flex;
|
||||
gap: var(--space-md, 1rem);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav[aria-label="Footer Navigation"] menu.footer-nav li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav[aria-label="Footer Navigation"] menu.footer-nav li a {
|
||||
color: var(--muted, #6b7280);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
padding: var(--space-xs, 0.25rem) 0;
|
||||
transition: color var(--duration-default, 0.2s) var(--easing-default, ease);
|
||||
}
|
||||
|
||||
nav[aria-label="Footer Navigation"] menu.footer-nav li a:hover {
|
||||
color: var(--text, currentColor);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
nav[aria-label="Footer Navigation"] menu.footer-nav li a[aria-current="page"] {
|
||||
color: var(--text, currentColor);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
nav[aria-label="Hauptnavigation"] menu {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
nav[aria-label="Footer Navigation"] menu.footer-nav {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
158
resources/css/settings/_generated-tokens.css
Normal file
158
resources/css/settings/_generated-tokens.css
Normal file
@@ -0,0 +1,158 @@
|
||||
/**
|
||||
* Generated Design Tokens - DO NOT EDIT MANUALLY
|
||||
*
|
||||
* This file is automatically generated from UnifiedTokenRegistry.
|
||||
* To modify tokens, edit: src/Framework/Design/ValueObjects/UnifiedTokenRegistry.php
|
||||
*
|
||||
* Generated: 2025-11-24 00:58:13
|
||||
* Source: UnifiedTokenRegistry
|
||||
* Scope: unified
|
||||
* Architecture: ITCSS
|
||||
*/
|
||||
@layer unified-settings {
|
||||
:root {
|
||||
--color-primary: oklch(70% 0.2 295); /* Color: primary */
|
||||
--color-primary-hover: oklch(65% 0.22 295); /* Color: primary-hover */
|
||||
--color-primary-active: oklch(60% 0.25 295); /* Color: primary-active */
|
||||
--color-success: oklch(60% 0.22 145); /* Color: success */
|
||||
--color-warning: oklch(70% 0.22 85); /* Color: warning */
|
||||
--color-error: oklch(60% 0.25 25); /* Color: error */
|
||||
--color-info: oklch(65% 0.2 240); /* Color: info */
|
||||
--color-bg: oklch(18% 0.01 270); /* Color: bg */
|
||||
--color-bg-alt: oklch(26% 0.015 270); /* Color: bg-alt */
|
||||
--color-text: oklch(95% 0.005 270); /* Color: text */
|
||||
--color-text-muted: oklch(70% 0.01 270); /* Color: text-muted */
|
||||
--color-border: oklch(40% 0.02 270); /* Color: border */
|
||||
--color-border-light: oklch(50% 0.02 270); /* Color: border-light */
|
||||
--spacing-xs: 0.25rem; /* Extra small spacing */
|
||||
--spacing-sm: 0.5rem; /* Small spacing */
|
||||
--spacing-md: 1rem; /* Medium spacing */
|
||||
--spacing-lg: 1.5rem; /* Large spacing */
|
||||
--spacing-xl: 2rem; /* Extra large spacing */
|
||||
--spacing-2xl: 3rem; /* Double extra large spacing */
|
||||
--font-size-xs: 0.75rem; /* Extra small font size */
|
||||
--font-size-sm: 0.875rem; /* Small font size */
|
||||
--font-size-base: 1rem; /* Base font size */
|
||||
--font-size-lg: 1.125rem; /* Large font size */
|
||||
--font-size-xl: 1.25rem; /* Extra large font size */
|
||||
--font-size-2xl: 1.5rem; /* Double extra large font size */
|
||||
--font-size-3xl: 1.875rem; /* Triple extra large font size */
|
||||
--font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Base font family */
|
||||
--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace; /* Monospace font family */
|
||||
--font-weight-normal: 400; /* Normal font weight */
|
||||
--font-weight-medium: 500; /* Medium font weight */
|
||||
--font-weight-semibold: 600; /* Semibold font weight */
|
||||
--font-weight-bold: 700; /* Bold font weight */
|
||||
--line-height-tight: 1.25; /* Tight line height */
|
||||
--line-height-normal: 1.5; /* Normal line height */
|
||||
--line-height-relaxed: 1.75; /* Relaxed line height */
|
||||
--radius-sm: 0.25rem; /* Small border radius */
|
||||
--radius-md: 0.375rem; /* Medium border radius */
|
||||
--radius-lg: 0.5rem; /* Large border radius */
|
||||
--radius-xl: 0.75rem; /* Extra large border radius */
|
||||
--radius-full: 9999px; /* Full border radius (pill shape) */
|
||||
--shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.05); /* Small shadow */
|
||||
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -1px oklch(0% 0 0 / 0.06); /* Medium shadow */
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -2px oklch(0% 0 0 / 0.05); /* Large shadow */
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 10px 10px -5px oklch(0% 0 0 / 0.04); /* Extra large shadow */
|
||||
--z-base: 1; /* Base z-index */
|
||||
--z-header: 90; /* Header z-index */
|
||||
--z-sidebar: 100; /* Sidebar z-index */
|
||||
--z-overlay: 120; /* Overlay z-index */
|
||||
--z-modal: 130; /* Modal z-index */
|
||||
--z-tooltip: 140; /* Tooltip z-index */
|
||||
--z-toast: 150; /* Toast z-index */
|
||||
--transition-fast: 0.15s ease; /* Fast transition */
|
||||
--transition-base: 0.2s ease; /* Base transition */
|
||||
--transition-slow: 0.3s ease; /* Slow transition */
|
||||
--bg-primary: oklch(98% 0.01 280); /* Color: bg-primary */
|
||||
--bg-secondary: oklch(95% 0.01 280); /* Color: bg-secondary */
|
||||
--bg-tertiary: oklch(92% 0.01 280); /* Color: bg-tertiary */
|
||||
--sidebar-bg: oklch(25% 0.02 280); /* Color: sidebar-bg */
|
||||
--sidebar-text: oklch(90% 0.01 280); /* Color: sidebar-text */
|
||||
--sidebar-text-hover: oklch(100% 0 0); /* Color: sidebar-text-hover */
|
||||
--sidebar-active: oklch(45% 0.15 280); /* Color: sidebar-active */
|
||||
--sidebar-border: oklch(30% 0.02 280); /* Color: sidebar-border */
|
||||
--header-bg: oklch(100% 0 0); /* Color: header-bg */
|
||||
--header-border: oklch(85% 0.01 280); /* Color: header-border */
|
||||
--header-text: oklch(20% 0.02 280); /* Color: header-text */
|
||||
--content-bg: oklch(100% 0 0); /* Color: content-bg */
|
||||
--content-text: oklch(20% 0.02 280); /* Color: content-text */
|
||||
--link-color: oklch(55% 0.2 260); /* Color: link-color */
|
||||
--link-hover: oklch(45% 0.25 260); /* Color: link-hover */
|
||||
--link-active: oklch(35% 0.3 260); /* Color: link-active */
|
||||
--accent-primary: oklch(60% 0.2 280); /* Color: accent-primary */
|
||||
--accent-success: oklch(65% 0.2 145); /* Color: accent-success */
|
||||
--accent-warning: oklch(70% 0.2 85); /* Color: accent-warning */
|
||||
--accent-error: oklch(60% 0.25 25); /* Color: accent-error */
|
||||
--accent-info: oklch(65% 0.2 240); /* Color: accent-info */
|
||||
--border-light: oklch(90% 0.01 280); /* Color: border-light */
|
||||
--border-medium: oklch(80% 0.02 280); /* Color: border-medium */
|
||||
--border-dark: oklch(70% 0.02 280); /* Color: border-dark */
|
||||
--focus-ring: oklch(55% 0.2 260); /* Color: focus-ring */
|
||||
--hover-overlay: oklch(0% 0 0 / 0.05); /* Color: hover-overlay */
|
||||
--spacing-sidebar: 250px; /* Sidebar width */
|
||||
--spacing-sidebar-wide: 280px; /* Sidebar width on wide screens */
|
||||
--spacing-header: 4rem; /* Header height */
|
||||
--spacing-content-padding: 2rem; /* Content padding */
|
||||
--spacing-content-max-width: 1400px; /* Content maximum width */
|
||||
--icon-size-sm: 16px; /* Small icon size */
|
||||
--icon-size-md: 18px; /* Medium icon size */
|
||||
--icon-size-lg: 24px; /* Large icon size */
|
||||
--z-dropdown: 110; /* Dropdown z-index */
|
||||
--container-mobile: 100px; /* Mobile container width (100%) */
|
||||
--container-tablet: 720px; /* Tablet container width */
|
||||
--container-desktop: 960px; /* Desktop container width */
|
||||
--container-wide: 1400px; /* Wide container width */
|
||||
--breakpoint-tablet: 768px; /* Tablet breakpoint */
|
||||
--breakpoint-desktop: 1024px; /* Desktop breakpoint */
|
||||
--breakpoint-wide: 1440px; /* Wide breakpoint */
|
||||
}
|
||||
@media (dynamic-range: high) {
|
||||
}
|
||||
@supports (color: color(display-p3 1 0 0)) {
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-primary: oklch(60% 0.22 295); /* Dark mode variant */
|
||||
--color-primary-hover: oklch(55% 0.24 295); /* Dark mode variant */
|
||||
--color-primary-active: oklch(50% 0.27 295); /* Dark mode variant */
|
||||
--color-success: oklch(65% 0.24 145); /* Dark mode variant */
|
||||
--color-warning: oklch(75% 0.24 85); /* Dark mode variant */
|
||||
--color-error: oklch(65% 0.27 25); /* Dark mode variant */
|
||||
--color-info: oklch(70% 0.22 240); /* Dark mode variant */
|
||||
--color-bg: oklch(20% 0.02 270); /* Dark mode variant */
|
||||
--color-bg-alt: oklch(23% 0.02 270); /* Dark mode variant */
|
||||
--color-text: oklch(90% 0.01 270); /* Dark mode variant */
|
||||
--color-text-muted: oklch(75% 0.01 270); /* Dark mode variant */
|
||||
--color-border: oklch(30% 0.02 270); /* Dark mode variant */
|
||||
--color-border-light: oklch(35% 0.02 270); /* Dark mode variant */
|
||||
--bg-primary: oklch(20% 0.02 280); /* Dark mode variant */
|
||||
--bg-secondary: oklch(23% 0.02 280); /* Dark mode variant */
|
||||
--bg-tertiary: oklch(26% 0.02 280); /* Dark mode variant */
|
||||
--sidebar-bg: oklch(15% 0.02 280); /* Dark mode variant */
|
||||
--sidebar-text: oklch(75% 0.02 280); /* Dark mode variant */
|
||||
--sidebar-text-hover: oklch(95% 0.01 280); /* Dark mode variant */
|
||||
--sidebar-active: oklch(35% 0.2 280); /* Dark mode variant */
|
||||
--sidebar-border: oklch(25% 0.02 280); /* Dark mode variant */
|
||||
--header-bg: oklch(18% 0.02 280); /* Dark mode variant */
|
||||
--header-border: oklch(30% 0.02 280); /* Dark mode variant */
|
||||
--header-text: oklch(90% 0.01 280); /* Dark mode variant */
|
||||
--content-bg: oklch(20% 0.02 280); /* Dark mode variant */
|
||||
--content-text: oklch(90% 0.01 280); /* Dark mode variant */
|
||||
--link-color: oklch(70% 0.2 260); /* Dark mode variant */
|
||||
--link-hover: oklch(80% 0.22 260); /* Dark mode variant */
|
||||
--link-active: oklch(85% 0.25 260); /* Dark mode variant */
|
||||
--accent-primary: oklch(65% 0.22 280); /* Dark mode variant */
|
||||
--accent-success: oklch(70% 0.22 145); /* Dark mode variant */
|
||||
--accent-warning: oklch(75% 0.22 85); /* Dark mode variant */
|
||||
--accent-error: oklch(65% 0.27 25); /* Dark mode variant */
|
||||
--accent-info: oklch(70% 0.22 240); /* Dark mode variant */
|
||||
--border-light: oklch(30% 0.02 280); /* Dark mode variant */
|
||||
--border-medium: oklch(35% 0.02 280); /* Dark mode variant */
|
||||
--border-dark: oklch(40% 0.02 280); /* Dark mode variant */
|
||||
--focus-ring: oklch(70% 0.2 260); /* Dark mode variant */
|
||||
--hover-overlay: oklch(100% 0 0 / 0.05); /* Dark mode variant */
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,33 @@
|
||||
@layer reset, base, layout, components, utilities, overrides;
|
||||
|
||||
/* Layer 1: Settings */
|
||||
@import url('settings/_generated-tokens.css') layer(settings);
|
||||
@import url('settings/colors.css') layer(settings);
|
||||
@import url('settings/variables.css') layer(settings);
|
||||
@import url('admin/01-settings/_breakpoints.css') layer(settings);
|
||||
|
||||
/* Layer 2: Tools */
|
||||
@import url('admin/02-tools/_mixins.css') layer(tools);
|
||||
|
||||
/* Layer 3: Generic */
|
||||
@import url('base/reset.css') layer(reset);
|
||||
@import url('base') layer(base);
|
||||
@import url('admin/03-generic/_reset.css') layer(reset);
|
||||
|
||||
/* Layer 4: Elements */
|
||||
@import url('admin/04-elements/_base.css') layer(base);
|
||||
|
||||
/* Layer 5: Objects */
|
||||
@import url('layout/container.css') layer(layout);
|
||||
@import url('admin/05-objects/_layout.css') layer(layout);
|
||||
@import url('admin/05-objects/_grid.css') layer(layout);
|
||||
|
||||
/* Layer 6: Components */
|
||||
/* Frontend Components */
|
||||
@import url('components/header.css') layer(components);
|
||||
@import url('components/footer.css') layer(components);
|
||||
@import url('components/nav.css') layer(components);
|
||||
@import url('components/navigation.css') layer(components);
|
||||
@import url('components/buttons.css') layer(components);
|
||||
@import url('components/card.css') layer(components);
|
||||
@import url('components/lightbox.css') layer(components);
|
||||
@@ -21,16 +41,40 @@
|
||||
@import url('components/container.css') layer(components);
|
||||
@import url('forms/inputs.css') layer(components);
|
||||
|
||||
/* Admin Components */
|
||||
/* Admin Components aus components/admin/ */
|
||||
@import url('components/admin/admin-layout.css') layer(components);
|
||||
@import url('components/admin/admin-cards.css') layer(components);
|
||||
@import url('components/admin/admin-tables.css') layer(components);
|
||||
@import url('components/admin/admin-forms.css') layer(components);
|
||||
@import url('components/admin/admin-buttons.css') layer(components);
|
||||
@import url('components/admin/admin-bulk-operations.css') layer(components);
|
||||
@import url('components/admin/admin-ui-enhancements.css') layer(components);
|
||||
@import url('components/admin/admin-asset-preview.css') layer(components);
|
||||
@import url('components/admin/admin-filters.css') layer(components);
|
||||
@import url('components/admin/admin-duplicates.css') layer(components);
|
||||
@import url('components/admin/admin-asset-gallery.css') layer(components);
|
||||
@import url('components/admin/admin-content-form.css') layer(components);
|
||||
@import url('components/admin/admin-block-editor.css') layer(components);
|
||||
@import url('components/admin/admin-asset-picker.css') layer(components);
|
||||
@import url('components/admin/admin-asset-upload.css') layer(components);
|
||||
@import url('components/admin/admin-asset-variants.css') layer(components);
|
||||
|
||||
/* Admin Components aus admin/06-components/ */
|
||||
@import url('admin/06-components/_sidebar.css') layer(components);
|
||||
@import url('admin/06-components/_header.css') layer(components);
|
||||
@import url('admin/06-components/_search.css') layer(components);
|
||||
@import url('admin/06-components/_popover.css') layer(components);
|
||||
@import url('admin/06-components/_breadcrumbs.css') layer(components);
|
||||
@import url('admin/06-components/_content.css') layer(components);
|
||||
@import url('admin/06-components/_stat-list.css') layer(components);
|
||||
@import url('admin/06-components/_confusion-matrix.css') layer(components);
|
||||
|
||||
/* Layer 7: Utilities */
|
||||
@import url('utilities/helpers.css') layer(utilities);
|
||||
@import url('utilities/animations.css') layer(utilities);
|
||||
@import url('utilities/noise.css') layer(utilities);
|
||||
@import url('utilities/scroll.css') layer(utilities);
|
||||
@import url('admin/07-utilities/_accessibility.css') layer(utilities);
|
||||
@import url('admin/07-utilities/_theme-transitions.css') layer(utilities);
|
||||
@import url('admin/07-utilities/_view-transitions.css') layer(utilities);
|
||||
|
||||
@layer overrides {
|
||||
/* Benutzerdefinierte Styles */
|
||||
|
||||
@@ -65,6 +65,27 @@
|
||||
}
|
||||
|
||||
|
||||
/* Admin-specific View Transitions */
|
||||
::view-transition-old(admin-sidebar),
|
||||
::view-transition-new(admin-sidebar) {
|
||||
animation: fade 0.15s ease-out;
|
||||
}
|
||||
|
||||
::view-transition-old(admin-content),
|
||||
::view-transition-new(admin-content) {
|
||||
animation: fade 0.15s ease-out;
|
||||
}
|
||||
|
||||
::view-transition-old(admin-header),
|
||||
::view-transition-new(admin-header) {
|
||||
animation: slide-down 0.2s ease-out;
|
||||
}
|
||||
|
||||
::view-transition-old(admin-popover),
|
||||
::view-transition-new(admin-popover) {
|
||||
animation: fade 0.15s ease-out;
|
||||
}
|
||||
|
||||
/* Respektiere User-Präferenzen für reduzierte Bewegung */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
::view-transition-old(main-content),
|
||||
@@ -72,7 +93,15 @@
|
||||
::view-transition-old(site-header),
|
||||
::view-transition-new(site-header),
|
||||
::view-transition-old(site-footer),
|
||||
::view-transition-new(site-footer) {
|
||||
::view-transition-new(site-footer),
|
||||
::view-transition-old(admin-sidebar),
|
||||
::view-transition-new(admin-sidebar),
|
||||
::view-transition-old(admin-content),
|
||||
::view-transition-new(admin-content),
|
||||
::view-transition-old(admin-header),
|
||||
::view-transition-new(admin-header),
|
||||
::view-transition-old(admin-popover),
|
||||
::view-transition-new(admin-popover) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
313
resources/js/admin-forms.js
Normal file
313
resources/js/admin-forms.js
Normal file
@@ -0,0 +1,313 @@
|
||||
/**
|
||||
* Admin Forms JavaScript Enhancements
|
||||
*
|
||||
* Provides:
|
||||
* - Drag & drop handlers for upload zones
|
||||
* - File preview generation (images)
|
||||
* - Auto-resize textareas (JSON fields)
|
||||
* - Keyboard shortcuts (Ctrl+S for save)
|
||||
* - Toast notification system
|
||||
* - Form auto-save (debounced)
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Initialize drag & drop for upload zones
|
||||
*/
|
||||
function initDragAndDrop() {
|
||||
const uploadZones = document.querySelectorAll('[data-live-dropzone]');
|
||||
|
||||
uploadZones.forEach(zone => {
|
||||
const fileInput = zone.querySelector('input[type="file"]');
|
||||
if (!fileInput) return;
|
||||
|
||||
// Prevent default drag behaviors
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
zone.addEventListener(eventName, preventDefaults, false);
|
||||
document.body.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
// Highlight drop zone when item is dragged over it
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
zone.addEventListener(eventName, () => {
|
||||
zone.classList.add('admin-upload-zone--dragover');
|
||||
}, false);
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
zone.addEventListener(eventName, () => {
|
||||
zone.classList.remove('admin-upload-zone--dragover');
|
||||
}, false);
|
||||
});
|
||||
|
||||
// Handle dropped files
|
||||
zone.addEventListener('drop', (e) => {
|
||||
const dt = e.dataTransfer;
|
||||
const files = dt.files;
|
||||
|
||||
if (files.length > 0) {
|
||||
fileInput.files = files;
|
||||
// Trigger change event to notify LiveComponent
|
||||
fileInput.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
}, false);
|
||||
|
||||
// Click on zone to trigger file input
|
||||
zone.addEventListener('click', () => {
|
||||
if (fileInput) {
|
||||
fileInput.click();
|
||||
}
|
||||
}, false);
|
||||
});
|
||||
}
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate file preview for images
|
||||
*/
|
||||
function initFilePreview() {
|
||||
const fileInputs = document.querySelectorAll('input[type="file"][data-live-upload]');
|
||||
|
||||
fileInputs.forEach(input => {
|
||||
input.addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file || !file.type.startsWith('image/')) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
// Find preview container
|
||||
const component = input.closest('[data-live-component]');
|
||||
if (!component) return;
|
||||
|
||||
const previewContainer = component.querySelector('.admin-file-preview');
|
||||
if (!previewContainer) return;
|
||||
|
||||
const previewImage = previewContainer.querySelector('.admin-file-preview__image');
|
||||
if (previewImage) {
|
||||
previewImage.src = event.target.result;
|
||||
} else {
|
||||
// Create preview image if it doesn't exist
|
||||
const img = document.createElement('img');
|
||||
img.src = event.target.result;
|
||||
img.className = 'admin-file-preview__image';
|
||||
img.alt = 'Preview';
|
||||
previewContainer.insertBefore(img, previewContainer.firstChild);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto-resize textareas (especially for JSON fields)
|
||||
*/
|
||||
function initAutoResizeTextareas() {
|
||||
const textareas = document.querySelectorAll('.admin-textarea--code');
|
||||
|
||||
textareas.forEach(textarea => {
|
||||
// Set initial height
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = textarea.scrollHeight + 'px';
|
||||
|
||||
// Auto-resize on input
|
||||
textarea.addEventListener('input', () => {
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = textarea.scrollHeight + 'px';
|
||||
});
|
||||
|
||||
// Auto-resize on paste
|
||||
textarea.addEventListener('paste', () => {
|
||||
setTimeout(() => {
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = textarea.scrollHeight + 'px';
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Keyboard shortcuts
|
||||
*/
|
||||
function initKeyboardShortcuts() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl+S or Cmd+S: Save draft
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
|
||||
e.preventDefault();
|
||||
|
||||
const saveButton = document.querySelector('[data-live-action="autoSave"]');
|
||||
if (saveButton) {
|
||||
saveButton.click();
|
||||
}
|
||||
}
|
||||
|
||||
// Escape: Cancel/Close
|
||||
if (e.key === 'Escape') {
|
||||
const cancelButton = document.querySelector('a[href*="/admin/"]');
|
||||
if (cancelButton && cancelButton.textContent.trim().toLowerCase() === 'cancel') {
|
||||
cancelButton.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toast notification system
|
||||
*/
|
||||
const Toast = {
|
||||
show(message, type = 'info', duration = 5000) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `admin-toast admin-toast--${type}`;
|
||||
|
||||
const messageEl = document.createElement('p');
|
||||
messageEl.className = 'admin-toast__message';
|
||||
messageEl.textContent = message;
|
||||
toast.appendChild(messageEl);
|
||||
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.className = 'admin-toast__close';
|
||||
closeBtn.innerHTML = '×';
|
||||
closeBtn.setAttribute('aria-label', 'Close');
|
||||
closeBtn.addEventListener('click', () => this.hide(toast));
|
||||
toast.appendChild(closeBtn);
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Auto-hide after duration
|
||||
if (duration > 0) {
|
||||
setTimeout(() => this.hide(toast), duration);
|
||||
}
|
||||
|
||||
return toast;
|
||||
},
|
||||
|
||||
hide(toast) {
|
||||
if (toast && toast.parentNode) {
|
||||
toast.style.animation = 'admin-toast-slide-out 0.3s ease-out';
|
||||
setTimeout(() => {
|
||||
if (toast.parentNode) {
|
||||
toast.parentNode.removeChild(toast);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
|
||||
success(message, duration = 5000) {
|
||||
return this.show(message, 'success', duration);
|
||||
},
|
||||
|
||||
error(message, duration = 7000) {
|
||||
return this.show(message, 'error', duration);
|
||||
},
|
||||
|
||||
info(message, duration = 5000) {
|
||||
return this.show(message, 'info', duration);
|
||||
},
|
||||
|
||||
warning(message, duration = 6000) {
|
||||
return this.show(message, 'warning', duration);
|
||||
}
|
||||
};
|
||||
|
||||
// Listen for LiveComponent events and show toasts
|
||||
document.addEventListener('livecomponent:upload:success', (e) => {
|
||||
const detail = e.detail || {};
|
||||
Toast.success(detail.message || 'File uploaded successfully!');
|
||||
|
||||
// Optional redirect after upload
|
||||
if (detail.redirect_url) {
|
||||
setTimeout(() => {
|
||||
window.location.href = detail.redirect_url;
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('livecomponent:upload:error', (e) => {
|
||||
const error = e.detail?.error || 'Upload failed';
|
||||
Toast.error(error);
|
||||
});
|
||||
|
||||
document.addEventListener('livecomponent:draft:saved', (e) => {
|
||||
Toast.info('Draft saved');
|
||||
});
|
||||
|
||||
// Handle form submission with redirect
|
||||
document.addEventListener('livecomponent:form:submitted', (e) => {
|
||||
const detail = e.detail || {};
|
||||
if (detail.success && detail.redirect_url) {
|
||||
Toast.success(detail.message || 'Content created successfully!');
|
||||
// Redirect after a short delay to show the toast
|
||||
setTimeout(() => {
|
||||
window.location.href = detail.redirect_url;
|
||||
}, 1000);
|
||||
} else {
|
||||
Toast.error(detail.message || 'Failed to submit form');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Form auto-save (debounced)
|
||||
*/
|
||||
function initAutoSave() {
|
||||
const forms = document.querySelectorAll('[data-live-component]');
|
||||
|
||||
forms.forEach(form => {
|
||||
const inputs = form.querySelectorAll('input, textarea, select');
|
||||
let autoSaveTimer = null;
|
||||
const AUTO_SAVE_DELAY = 30000; // 30 seconds
|
||||
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('input', () => {
|
||||
// Clear existing timer
|
||||
if (autoSaveTimer) {
|
||||
clearTimeout(autoSaveTimer);
|
||||
}
|
||||
|
||||
// Set new timer
|
||||
autoSaveTimer = setTimeout(() => {
|
||||
const saveButton = form.querySelector('[data-live-action="autoSave"]');
|
||||
if (saveButton) {
|
||||
saveButton.click();
|
||||
}
|
||||
}, AUTO_SAVE_DELAY);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all enhancements when DOM is ready
|
||||
*/
|
||||
function init() {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
return;
|
||||
}
|
||||
|
||||
initDragAndDrop();
|
||||
initFilePreview();
|
||||
initAutoResizeTextareas();
|
||||
initKeyboardShortcuts();
|
||||
initAutoSave();
|
||||
|
||||
// Expose Toast globally for use in other scripts
|
||||
window.AdminToast = Toast;
|
||||
}
|
||||
|
||||
// Initialize immediately if DOM is already loaded
|
||||
init();
|
||||
|
||||
// Also initialize when LiveComponents are loaded dynamically
|
||||
document.addEventListener('livecomponent:loaded', () => {
|
||||
initDragAndDrop();
|
||||
initFilePreview();
|
||||
initAutoResizeTextareas();
|
||||
});
|
||||
})();
|
||||
|
||||
265
resources/js/core/DataAttributes.js
Normal file
265
resources/js/core/DataAttributes.js
Normal file
@@ -0,0 +1,265 @@
|
||||
/**
|
||||
* Data Attributes Constants
|
||||
*
|
||||
* Centralized constants for all data-* HTML attributes used in the framework.
|
||||
* Organized by feature area, matching the PHP Enum structure.
|
||||
*
|
||||
* Usage:
|
||||
* import { LiveComponentCoreAttributes } from '/assets/js/core/DataAttributes.js';
|
||||
* element.getAttribute(LiveComponentCoreAttributes.LIVE_COMPONENT);
|
||||
* element.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_COMPONENT)];
|
||||
*/
|
||||
|
||||
/**
|
||||
* Convert data-* attribute name to JavaScript dataset key
|
||||
* Example: "data-live-component" -> "liveComponent"
|
||||
*/
|
||||
export function toDatasetKey(attribute) {
|
||||
return attribute.replace('data-', '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
}
|
||||
|
||||
/**
|
||||
* LiveComponent Core Attributes
|
||||
* Core data-* attributes for component identification, state, security, and real-time communication.
|
||||
*/
|
||||
export const LiveComponentCoreAttributes = {
|
||||
// Component identification
|
||||
LIVE_COMPONENT: 'data-live-component',
|
||||
COMPONENT_ID: 'data-component-id',
|
||||
LIVE_ID: 'data-live-id',
|
||||
|
||||
// State and data
|
||||
STATE: 'data-state',
|
||||
LIVE_STATE: 'data-live-state',
|
||||
LIVE_CONTENT: 'data-live-content',
|
||||
|
||||
// Actions
|
||||
LIVE_ACTION: 'data-live-action',
|
||||
|
||||
// Security
|
||||
CSRF_TOKEN: 'data-csrf-token',
|
||||
|
||||
// Real-time communication
|
||||
SSE_CHANNEL: 'data-sse-channel',
|
||||
POLL_INTERVAL: 'data-poll-interval',
|
||||
|
||||
// File uploads
|
||||
LIVE_UPLOAD: 'data-live-upload',
|
||||
LIVE_DROPZONE: 'data-live-dropzone',
|
||||
|
||||
// Accessibility
|
||||
LIVE_POLITE: 'data-live-polite',
|
||||
};
|
||||
|
||||
/**
|
||||
* LiveComponent Feature Attributes
|
||||
* Advanced feature attributes (data-lc-*) for data binding, fragments, URL management, transitions, and triggers.
|
||||
*/
|
||||
export const LiveComponentFeatureAttributes = {
|
||||
// Data binding
|
||||
LC_MODEL: 'data-lc-model',
|
||||
|
||||
// Fragments
|
||||
LC_FRAGMENT: 'data-lc-fragment',
|
||||
LC_FRAGMENTS: 'data-lc-fragments',
|
||||
|
||||
// Element identification
|
||||
LC_KEY: 'data-lc-key',
|
||||
|
||||
// Progressive enhancement
|
||||
LC_BOOST: 'data-lc-boost',
|
||||
|
||||
// URL management
|
||||
LC_PUSH_URL: 'data-lc-push-url',
|
||||
LC_REPLACE_URL: 'data-lc-replace-url',
|
||||
|
||||
// DOM updates
|
||||
LC_TARGET: 'data-lc-target',
|
||||
LC_SWAP: 'data-lc-swap',
|
||||
LC_SWAP_TRANSITION: 'data-lc-swap-transition',
|
||||
|
||||
// Accessibility
|
||||
LC_KEEP_FOCUS: 'data-lc-keep-focus',
|
||||
|
||||
// Scrolling
|
||||
LC_SCROLL: 'data-lc-scroll',
|
||||
LC_SCROLL_TARGET: 'data-lc-scroll-target',
|
||||
LC_SCROLL_BEHAVIOR: 'data-lc-scroll-behavior',
|
||||
|
||||
// Loading indicators
|
||||
LC_INDICATOR: 'data-lc-indicator',
|
||||
|
||||
// Trigger options
|
||||
LC_TRIGGER_DELAY: 'data-lc-trigger-delay',
|
||||
LC_TRIGGER_THROTTLE: 'data-lc-trigger-throttle',
|
||||
LC_TRIGGER_ONCE: 'data-lc-trigger-once',
|
||||
LC_TRIGGER_CHANGED: 'data-lc-trigger-changed',
|
||||
LC_TRIGGER_FROM: 'data-lc-trigger-from',
|
||||
LC_TRIGGER_LOAD: 'data-lc-trigger-load',
|
||||
};
|
||||
|
||||
/**
|
||||
* LiveComponent Lazy Loading Attributes
|
||||
* Attributes for lazy loading and island rendering of LiveComponents.
|
||||
*/
|
||||
export const LiveComponentLazyAttributes = {
|
||||
// Lazy loading
|
||||
LIVE_COMPONENT_LAZY: 'data-live-component-lazy',
|
||||
LIVE_COMPONENT_ISLAND: 'data-live-component-island',
|
||||
ISLAND_COMPONENT: 'data-island-component',
|
||||
|
||||
// Lazy loading options
|
||||
LAZY_PRIORITY: 'data-lazy-priority',
|
||||
LAZY_THRESHOLD: 'data-lazy-threshold',
|
||||
LAZY_PLACEHOLDER: 'data-lazy-placeholder',
|
||||
};
|
||||
|
||||
/**
|
||||
* Admin Table Attributes
|
||||
* Data attributes for admin table functionality including sorting, pagination, searching, and column configuration.
|
||||
*/
|
||||
export const AdminTableAttributes = {
|
||||
// Table configuration
|
||||
RESOURCE: 'data-resource',
|
||||
API_ENDPOINT: 'data-api-endpoint',
|
||||
SORTABLE: 'data-sortable',
|
||||
SEARCHABLE: 'data-searchable',
|
||||
PAGINATED: 'data-paginated',
|
||||
PER_PAGE: 'data-per-page',
|
||||
|
||||
// Column configuration
|
||||
COLUMN: 'data-column',
|
||||
SORT_DIR: 'data-sort-dir',
|
||||
|
||||
// Pagination
|
||||
PAGE: 'data-page',
|
||||
|
||||
// Search and pagination containers
|
||||
TABLE_SEARCH: 'data-table-search',
|
||||
TABLE_PAGINATION: 'data-table-pagination',
|
||||
};
|
||||
|
||||
/**
|
||||
* Bulk Operation Attributes
|
||||
* Data attributes for bulk operations on admin tables.
|
||||
*/
|
||||
export const BulkOperationAttributes = {
|
||||
// Bulk operations configuration
|
||||
BULK_OPERATIONS: 'data-bulk-operations',
|
||||
BULK_TOOLBAR: 'data-bulk-toolbar',
|
||||
BULK_COUNT: 'data-bulk-count',
|
||||
BULK_BUTTONS: 'data-bulk-buttons',
|
||||
BULK_INITIALIZED: 'data-bulk-initialized',
|
||||
|
||||
// Bulk selection
|
||||
BULK_SELECT_ALL: 'data-bulk-select-all',
|
||||
BULK_ITEM_ID: 'data-bulk-item-id',
|
||||
|
||||
// Bulk actions
|
||||
BULK_ACTION: 'data-bulk-action',
|
||||
BULK_METHOD: 'data-bulk-method',
|
||||
BULK_CONFIRM: 'data-bulk-confirm',
|
||||
};
|
||||
|
||||
/**
|
||||
* Action Handler Attributes
|
||||
* Data attributes for the ActionHandler system.
|
||||
* Note: data-action-param-* is a pattern and not included as constant.
|
||||
*/
|
||||
export const ActionHandlerAttributes = {
|
||||
// Action configuration
|
||||
ACTION: 'data-action',
|
||||
ACTION_HANDLER: 'data-action-handler',
|
||||
ACTION_URL: 'data-action-url',
|
||||
ACTION_METHOD: 'data-action-method',
|
||||
ACTION_TYPE: 'data-action-type',
|
||||
ACTION_HANDLER_CONTAINER: 'data-action-handler-container',
|
||||
|
||||
// Action options
|
||||
ACTION_CONFIRM: 'data-action-confirm',
|
||||
ACTION_LOADING_TEXT: 'data-action-loading-text',
|
||||
ACTION_SUCCESS_TOAST: 'data-action-success-toast',
|
||||
ACTION_ERROR_TOAST: 'data-action-error-toast',
|
||||
};
|
||||
|
||||
/**
|
||||
* Form Data Attributes
|
||||
* Data attributes for form handling and validation.
|
||||
* Note: data-param-* is a pattern and not included as constant.
|
||||
*/
|
||||
export const FormDataAttributes = {
|
||||
// Form field identification
|
||||
FIELD: 'data-field',
|
||||
|
||||
// Form state preservation
|
||||
SELECTED_IF: 'data-selected-if',
|
||||
CHECKED_IF: 'data-checked-if',
|
||||
};
|
||||
|
||||
/**
|
||||
* State Management Attributes
|
||||
* Data attributes for client-side state management and data binding.
|
||||
*/
|
||||
export const StateDataAttributes = {
|
||||
// State binding
|
||||
BIND: 'data-bind',
|
||||
BIND_ATTR: 'data-bind-attr',
|
||||
BIND_ATTR_NAME: 'data-bind-attr-name',
|
||||
BIND_CLASS: 'data-bind-class',
|
||||
BIND_INPUT: 'data-bind-input',
|
||||
|
||||
// State persistence
|
||||
PERSISTENT: 'data-persistent',
|
||||
};
|
||||
|
||||
/**
|
||||
* UI Enhancement Attributes
|
||||
* Data attributes for UI enhancements including loading states, optimistic updates,
|
||||
* confirmations, modals, themes, and other UI features.
|
||||
*/
|
||||
export const UIDataAttributes = {
|
||||
// Loading states
|
||||
LOADING: 'data-loading',
|
||||
LOADING_TEXT: 'data-loading-text',
|
||||
ORIGINAL_TEXT: 'data-original-text',
|
||||
|
||||
// Optimistic updates
|
||||
OPTIMISTIC: 'data-optimistic',
|
||||
ROLLBACK: 'data-rollback',
|
||||
|
||||
// Confirmations
|
||||
CONFIRM_OK: 'data-confirm-ok',
|
||||
CONFIRM_CANCEL: 'data-confirm-cancel',
|
||||
|
||||
// Modals
|
||||
CLOSE_MODAL: 'data-close-modal',
|
||||
|
||||
// Tags
|
||||
TAG: 'data-tag',
|
||||
|
||||
// Theme
|
||||
THEME: 'data-theme',
|
||||
THEME_ICON: 'data-theme-icon',
|
||||
|
||||
// Navigation
|
||||
MOBILE_MENU_OPEN: 'data-mobile-menu-open',
|
||||
SECTION_ID: 'data-section-id',
|
||||
TAB: 'data-tab',
|
||||
|
||||
// Views
|
||||
VIEW_MODE: 'data-view-mode',
|
||||
|
||||
// Assets
|
||||
ASSET_ID: 'data-asset-id',
|
||||
};
|
||||
|
||||
/**
|
||||
* Module System Attributes
|
||||
* Data attributes for the JavaScript module initialization system.
|
||||
*/
|
||||
export const ModuleDataAttributes = {
|
||||
// Module initialization
|
||||
MODULE: 'data-module',
|
||||
OPTIONS: 'data-options',
|
||||
};
|
||||
|
||||
@@ -6,6 +6,45 @@ import { FormAutoSave } from './modules/form-autosave.js';
|
||||
// WebPushManager is now loaded via framework module system
|
||||
// LiveComponent is now loaded via framework module system
|
||||
|
||||
// Admin Forms Enhancements (Drag & Drop, File Preview, Auto-Resize, etc.)
|
||||
import './admin-forms.js';
|
||||
|
||||
// Admin Bulk Operations
|
||||
import './modules/admin/bulk-operations.js';
|
||||
|
||||
// Admin Data Table (Sorting, Pagination, Search)
|
||||
import './modules/admin/data-table.js';
|
||||
|
||||
// Admin UI Enhancements
|
||||
import './modules/admin/ui-enhancements.js';
|
||||
|
||||
// Admin Asset Preview
|
||||
import './modules/admin/asset-preview.js';
|
||||
|
||||
// Admin Asset Filters
|
||||
import './modules/admin/asset-filters.js';
|
||||
|
||||
// Admin Variant Creation
|
||||
import './modules/admin/variant-creation.js';
|
||||
|
||||
// Admin Duplicate Management
|
||||
import './modules/admin/duplicate-management.js';
|
||||
|
||||
// Admin Block Editor Drag & Drop
|
||||
import './modules/admin/block-editor-dnd.js';
|
||||
|
||||
// Admin Block Editor Auto-Sync
|
||||
import './modules/admin/block-editor-sync.js';
|
||||
|
||||
// Admin Block Editor Asset Picker Integration
|
||||
import './modules/admin/block-editor-asset-picker.js';
|
||||
|
||||
// Admin MetaData Form Auto-Sync
|
||||
import './modules/admin/metadata-form-sync.js';
|
||||
|
||||
// Common Utilities (ActionHandler, etc.)
|
||||
import './modules/common/index.js';
|
||||
|
||||
// Import DevTools in development
|
||||
if (import.meta.env.DEV) {
|
||||
import('./modules/LiveComponentDevTools.js').then(() => {
|
||||
|
||||
175
resources/js/modules/admin/asset-filters.js
Normal file
175
resources/js/modules/admin/asset-filters.js
Normal file
@@ -0,0 +1,175 @@
|
||||
/**
|
||||
* Asset Filters Module
|
||||
*
|
||||
* Handles advanced filtering for asset list
|
||||
*/
|
||||
|
||||
export class AssetFilters {
|
||||
constructor(resource) {
|
||||
this.resource = resource;
|
||||
this.filters = {
|
||||
mime: [],
|
||||
bucket: [],
|
||||
date_from: null,
|
||||
date_to: null,
|
||||
tags: [],
|
||||
};
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupToggle();
|
||||
this.setupFilters();
|
||||
this.setupApply();
|
||||
this.setupClear();
|
||||
}
|
||||
|
||||
setupToggle() {
|
||||
const toggleBtn = document.querySelector(`[data-toggle-filters]`);
|
||||
const panel = document.querySelector(`[data-filters-panel="${this.resource}"]`);
|
||||
|
||||
if (!toggleBtn || !panel) return;
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
const isVisible = panel.style.display !== 'none';
|
||||
panel.style.display = isVisible ? 'none' : 'block';
|
||||
toggleBtn.classList.toggle('active', !isVisible);
|
||||
});
|
||||
}
|
||||
|
||||
setupFilters() {
|
||||
// MIME type filter
|
||||
const mimeSelect = document.querySelector(`[data-filters-panel="${this.resource}"] [data-filter="mime"]`);
|
||||
if (mimeSelect) {
|
||||
mimeSelect.addEventListener('change', (e) => {
|
||||
this.filters.mime = Array.from(e.target.selectedOptions).map(opt => opt.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Bucket filter
|
||||
const bucketSelect = document.querySelector(`[data-filters-panel="${this.resource}"] [data-filter="bucket"]`);
|
||||
if (bucketSelect) {
|
||||
bucketSelect.addEventListener('change', (e) => {
|
||||
this.filters.bucket = Array.from(e.target.selectedOptions).map(opt => opt.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Date range filters
|
||||
const dateFrom = document.querySelector(`[data-filters-panel="${this.resource}"] [data-filter="date_from"]`);
|
||||
if (dateFrom) {
|
||||
dateFrom.addEventListener('change', (e) => {
|
||||
this.filters.date_from = e.target.value || null;
|
||||
});
|
||||
}
|
||||
|
||||
const dateTo = document.querySelector(`[data-filters-panel="${this.resource}"] [data-filter="date_to"]`);
|
||||
if (dateTo) {
|
||||
dateTo.addEventListener('change', (e) => {
|
||||
this.filters.date_to = e.target.value || null;
|
||||
});
|
||||
}
|
||||
|
||||
// Tags filter
|
||||
const tagsInput = document.querySelector(`[data-filters-panel="${this.resource}"] [data-filter="tags"]`);
|
||||
if (tagsInput) {
|
||||
tagsInput.addEventListener('input', (e) => {
|
||||
const value = e.target.value.trim();
|
||||
this.filters.tags = value ? value.split(',').map(t => t.trim()).filter(Boolean) : [];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setupApply() {
|
||||
const applyBtn = document.querySelector(`[data-filters-panel="${this.resource}"] [data-apply-filters]`);
|
||||
if (!applyBtn) return;
|
||||
|
||||
applyBtn.addEventListener('click', () => {
|
||||
this.applyFilters();
|
||||
});
|
||||
}
|
||||
|
||||
setupClear() {
|
||||
const clearBtn = document.querySelector(`[data-filters-panel="${this.resource}"] [data-clear-filters]`);
|
||||
if (!clearBtn) return;
|
||||
|
||||
clearBtn.addEventListener('click', () => {
|
||||
this.clearFilters();
|
||||
});
|
||||
}
|
||||
|
||||
applyFilters() {
|
||||
// Build filter query
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (this.filters.mime.length > 0) {
|
||||
params.append('mime', this.filters.mime.join(','));
|
||||
}
|
||||
if (this.filters.bucket.length > 0) {
|
||||
params.append('bucket', this.filters.bucket.join(','));
|
||||
}
|
||||
if (this.filters.date_from) {
|
||||
params.append('date_from', this.filters.date_from);
|
||||
}
|
||||
if (this.filters.date_to) {
|
||||
params.append('date_to', this.filters.date_to);
|
||||
}
|
||||
if (this.filters.tags.length > 0) {
|
||||
params.append('tags', this.filters.tags.join(','));
|
||||
}
|
||||
|
||||
// Reload table with filters
|
||||
const table = document.querySelector(`[data-resource="${this.resource}"]`);
|
||||
if (table && window.adminDataTables && window.adminDataTables.get(this.resource)) {
|
||||
const dataTable = window.adminDataTables.get(this.resource);
|
||||
if (typeof dataTable.loadData === 'function') {
|
||||
dataTable.loadData(params.toString());
|
||||
}
|
||||
} else {
|
||||
// Fallback: Reload page with filters
|
||||
const url = new URL(window.location.href);
|
||||
params.forEach((value, key) => {
|
||||
url.searchParams.set(key, value);
|
||||
});
|
||||
window.location.href = url.toString();
|
||||
}
|
||||
}
|
||||
|
||||
clearFilters() {
|
||||
// Reset filter values
|
||||
this.filters = {
|
||||
mime: [],
|
||||
bucket: [],
|
||||
date_from: null,
|
||||
date_to: null,
|
||||
tags: [],
|
||||
};
|
||||
|
||||
// Reset UI
|
||||
const panel = document.querySelector(`[data-filters-panel="${this.resource}"]`);
|
||||
if (panel) {
|
||||
panel.querySelectorAll('select, input').forEach(el => {
|
||||
if (el.tagName === 'SELECT') {
|
||||
el.selectedIndex = -1;
|
||||
} else {
|
||||
el.value = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Reload without filters
|
||||
const url = new URL(window.location.href);
|
||||
['mime', 'bucket', 'date_from', 'date_to', 'tags'].forEach(key => {
|
||||
url.searchParams.delete(key);
|
||||
});
|
||||
window.location.href = url.toString();
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize for assets
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const assetsTable = document.querySelector('[data-resource="assets"]');
|
||||
if (assetsTable) {
|
||||
window.assetFilters = new AssetFilters('assets');
|
||||
}
|
||||
});
|
||||
|
||||
190
resources/js/modules/admin/asset-preview.js
Normal file
190
resources/js/modules/admin/asset-preview.js
Normal file
@@ -0,0 +1,190 @@
|
||||
/**
|
||||
* Asset Preview Module
|
||||
*
|
||||
* Handles asset preview thumbnails, lightbox, and detail views
|
||||
*/
|
||||
|
||||
export class AssetPreview {
|
||||
constructor() {
|
||||
this.lightbox = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupThumbnailClicks();
|
||||
this.setupLightbox();
|
||||
this.setupCopyUrl();
|
||||
this.setupVariantDeletion();
|
||||
}
|
||||
|
||||
setupThumbnailClicks() {
|
||||
document.addEventListener('click', (e) => {
|
||||
const thumbnail = e.target.closest('.asset-preview-thumbnail');
|
||||
if (!thumbnail) return;
|
||||
|
||||
const assetId = thumbnail.dataset.assetId;
|
||||
if (!assetId) return;
|
||||
|
||||
// Navigate to detail view
|
||||
window.location.href = `/admin/assets/${assetId}`;
|
||||
});
|
||||
}
|
||||
|
||||
setupLightbox() {
|
||||
// Create lightbox HTML
|
||||
const lightboxHTML = `
|
||||
<div class="asset-lightbox" id="asset-lightbox" style="display: none;">
|
||||
<div class="asset-lightbox__content">
|
||||
<img class="asset-lightbox__image" src="" alt="Asset Preview" />
|
||||
<button class="asset-lightbox__close" data-close-lightbox>×</button>
|
||||
<div class="asset-lightbox__info">
|
||||
<p class="asset-lightbox__filename"></p>
|
||||
<p class="asset-lightbox__size"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add lightbox to body if not exists
|
||||
if (!document.getElementById('asset-lightbox')) {
|
||||
document.body.insertAdjacentHTML('beforeend', lightboxHTML);
|
||||
this.lightbox = document.getElementById('asset-lightbox');
|
||||
} else {
|
||||
this.lightbox = document.getElementById('asset-lightbox');
|
||||
}
|
||||
|
||||
// Setup image clicks for lightbox
|
||||
document.addEventListener('click', (e) => {
|
||||
const img = e.target.closest('img[data-lightbox]');
|
||||
if (!img) return;
|
||||
|
||||
e.preventDefault();
|
||||
this.openLightbox(img.src, img.alt, img.dataset.filename, img.dataset.size);
|
||||
});
|
||||
|
||||
// Close lightbox
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-close-lightbox]') || e.target === this.lightbox) {
|
||||
this.closeLightbox();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && this.lightbox && this.lightbox.style.display !== 'none') {
|
||||
this.closeLightbox();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openLightbox(imageUrl, alt, filename, size) {
|
||||
if (!this.lightbox) return;
|
||||
|
||||
const img = this.lightbox.querySelector('.asset-lightbox__image');
|
||||
const filenameEl = this.lightbox.querySelector('.asset-lightbox__filename');
|
||||
const sizeEl = this.lightbox.querySelector('.asset-lightbox__size');
|
||||
|
||||
img.src = imageUrl;
|
||||
img.alt = alt;
|
||||
if (filenameEl) filenameEl.textContent = filename || alt;
|
||||
if (sizeEl) sizeEl.textContent = size || '';
|
||||
|
||||
this.lightbox.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
closeLightbox() {
|
||||
if (!this.lightbox) return;
|
||||
|
||||
this.lightbox.style.display = 'none';
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
setupCopyUrl() {
|
||||
document.addEventListener('click', async (e) => {
|
||||
const copyButton = e.target.closest('[data-copy-url]');
|
||||
if (!copyButton) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const url = copyButton.href;
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
const assetUrl = data.url || url;
|
||||
|
||||
await navigator.clipboard.writeText(assetUrl);
|
||||
|
||||
// Show success feedback
|
||||
const originalText = copyButton.textContent;
|
||||
copyButton.textContent = 'Copied!';
|
||||
copyButton.classList.add('copied');
|
||||
|
||||
setTimeout(() => {
|
||||
copyButton.textContent = originalText;
|
||||
copyButton.classList.remove('copied');
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error('Failed to copy URL:', error);
|
||||
alert('Failed to copy URL');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupVariantDeletion() {
|
||||
document.addEventListener('click', async (e) => {
|
||||
const deleteButton = e.target.closest('[data-delete-variant]');
|
||||
if (!deleteButton) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const variant = deleteButton.dataset.variant;
|
||||
const assetId = deleteButton.closest('[data-asset-id]')?.dataset.assetId ||
|
||||
window.location.pathname.split('/').pop();
|
||||
|
||||
if (!confirm(`Are you sure you want to delete variant "${variant}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
deleteButton.disabled = true;
|
||||
deleteButton.textContent = 'Deleting...';
|
||||
|
||||
const response = await fetch(`/api/v1/assets/${assetId}/variants/${variant}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
// Remove variant item from DOM
|
||||
deleteButton.closest('.variant-item')?.remove();
|
||||
|
||||
// Show success message
|
||||
if (window.Toast) {
|
||||
window.Toast.success(`Variant "${variant}" deleted successfully`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete variant:', error);
|
||||
deleteButton.disabled = false;
|
||||
deleteButton.textContent = 'Delete';
|
||||
|
||||
if (window.Toast) {
|
||||
window.Toast.error(`Failed to delete variant: ${error.message}`);
|
||||
} else {
|
||||
alert(`Failed to delete variant: ${error.message}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new AssetPreview();
|
||||
});
|
||||
|
||||
132
resources/js/modules/admin/block-editor-asset-picker.js
Normal file
132
resources/js/modules/admin/block-editor-asset-picker.js
Normal file
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* Block Editor Asset Picker Integration
|
||||
*
|
||||
* Handles asset selection from AssetPickerComponent and updates block fields
|
||||
*/
|
||||
|
||||
export class BlockEditorAssetPicker {
|
||||
constructor(blockEditorElement, blockEditorComponentId) {
|
||||
this.blockEditorElement = blockEditorElement;
|
||||
this.blockEditorComponentId = blockEditorComponentId;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Listen for asset selection events from AssetPickerComponent
|
||||
document.addEventListener('livecomponent:event', (e) => {
|
||||
const eventData = e.detail;
|
||||
if (eventData && eventData.event_name === 'asset:selected') {
|
||||
// Find the asset picker component that triggered this
|
||||
const assetPickerElement = e.target.closest('[data-live-component^="admin-asset-picker:"]');
|
||||
if (assetPickerElement) {
|
||||
this.handleAssetSelected(eventData, assetPickerElement);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Also listen for direct asset selection from AssetPickerComponent
|
||||
this.blockEditorElement.addEventListener('click', (e) => {
|
||||
const pickerItem = e.target.closest('[data-live-action="selectAsset"]');
|
||||
if (pickerItem) {
|
||||
const assetId = pickerItem.dataset.assetId;
|
||||
if (assetId) {
|
||||
// Find which block field this picker is for
|
||||
const fieldWrapper = pickerItem.closest('.admin-asset-picker-wrapper');
|
||||
if (fieldWrapper) {
|
||||
const fieldInput = fieldWrapper.querySelector('input[data-param-field-path]');
|
||||
if (fieldInput) {
|
||||
const blockId = fieldInput.dataset.paramBlockId;
|
||||
const fieldPath = fieldInput.dataset.paramFieldPath;
|
||||
|
||||
if (blockId && fieldPath) {
|
||||
this.selectAssetForBlock(blockId, fieldPath, assetId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle asset selected event
|
||||
*/
|
||||
handleAssetSelected(eventData, assetPickerElement) {
|
||||
// Find the block field this picker is associated with
|
||||
const fieldWrapper = assetPickerElement.closest('.admin-asset-picker-wrapper');
|
||||
if (!fieldWrapper) {
|
||||
return;
|
||||
}
|
||||
|
||||
const fieldInput = fieldWrapper.querySelector('input[data-param-field-path]');
|
||||
if (!fieldInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const blockId = fieldInput.dataset.paramBlockId;
|
||||
const fieldPath = fieldInput.dataset.paramFieldPath;
|
||||
const assetId = eventData.asset_id || eventData.selected_asset_id;
|
||||
|
||||
if (blockId && fieldPath && assetId) {
|
||||
this.selectAssetForBlock(blockId, fieldPath, assetId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Select asset for a block field
|
||||
*/
|
||||
async selectAssetForBlock(blockId, fieldPath, assetId) {
|
||||
const liveComponent = window.LiveComponents?.getComponent?.(this.blockEditorComponentId);
|
||||
|
||||
if (!liveComponent) {
|
||||
console.warn('BlockEditorAssetPicker: LiveComponent instance not found');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await liveComponent.action('selectAssetForBlock', {
|
||||
blockId,
|
||||
fieldPath,
|
||||
assetId
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('BlockEditorAssetPicker: Failed to select asset', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all asset pickers in block editor
|
||||
*/
|
||||
static initializeAll() {
|
||||
const instances = [];
|
||||
|
||||
// Find all BlockEditorComponents
|
||||
const blockEditorElements = document.querySelectorAll(
|
||||
'[data-live-component^="admin-block-editor:"]'
|
||||
);
|
||||
|
||||
blockEditorElements.forEach(blockEditorElement => {
|
||||
const componentId = blockEditorElement.dataset.liveComponent;
|
||||
if (componentId) {
|
||||
instances.push(new BlockEditorAssetPicker(blockEditorElement, componentId));
|
||||
}
|
||||
});
|
||||
|
||||
return instances;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
BlockEditorAssetPicker.initializeAll();
|
||||
});
|
||||
} else {
|
||||
BlockEditorAssetPicker.initializeAll();
|
||||
}
|
||||
|
||||
// Re-initialize when LiveComponents are loaded dynamically
|
||||
document.addEventListener('livecomponent:loaded', () => {
|
||||
BlockEditorAssetPicker.initializeAll();
|
||||
});
|
||||
|
||||
317
resources/js/modules/admin/block-editor-dnd.js
Normal file
317
resources/js/modules/admin/block-editor-dnd.js
Normal file
@@ -0,0 +1,317 @@
|
||||
/**
|
||||
* Block Editor Drag & Drop
|
||||
*
|
||||
* Native HTML5 Drag & Drop API implementation for reordering CMS blocks
|
||||
*/
|
||||
|
||||
export class BlockEditorDnD {
|
||||
constructor(container) {
|
||||
this.container = container;
|
||||
this.blocksContainer = container.querySelector('[data-sortable="blocks"]');
|
||||
this.draggedElement = null;
|
||||
this.dragOverIndex = null;
|
||||
this.componentId = null;
|
||||
|
||||
// Find component ID from parent LiveComponent
|
||||
const liveComponent = container.closest('[data-live-component]');
|
||||
if (liveComponent) {
|
||||
this.componentId = liveComponent.dataset.liveComponent;
|
||||
}
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
if (!this.blocksContainer) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Make all block cards draggable
|
||||
this.updateDraggableElements();
|
||||
|
||||
// Listen for dynamically added blocks (LiveComponent updates)
|
||||
this.observeBlockChanges();
|
||||
}
|
||||
|
||||
/**
|
||||
* Make all block cards draggable and add event listeners
|
||||
*/
|
||||
updateDraggableElements() {
|
||||
const blockCards = this.blocksContainer.querySelectorAll('.admin-block-card');
|
||||
|
||||
blockCards.forEach((card, index) => {
|
||||
// Set draggable attribute
|
||||
card.draggable = true;
|
||||
card.dataset.blockIndex = index;
|
||||
|
||||
// Remove existing listeners to avoid duplicates
|
||||
const newCard = card.cloneNode(true);
|
||||
card.parentNode.replaceChild(newCard, card);
|
||||
|
||||
// Add drag event listeners to card
|
||||
newCard.addEventListener('dragstart', (e) => this.handleDragStart(e, newCard));
|
||||
newCard.addEventListener('dragend', (e) => this.handleDragEnd(e, newCard));
|
||||
newCard.addEventListener('dragover', (e) => this.handleDragOver(e, newCard));
|
||||
newCard.addEventListener('dragenter', (e) => this.handleDragEnter(e, newCard));
|
||||
newCard.addEventListener('dragleave', (e) => this.handleDragLeave(e, newCard));
|
||||
newCard.addEventListener('drop', (e) => this.handleDrop(e, newCard));
|
||||
|
||||
// Prevent drag start on interactive elements, but allow it on drag handle
|
||||
const interactiveElements = newCard.querySelectorAll('button, input, textarea, select, a');
|
||||
interactiveElements.forEach(el => {
|
||||
// Allow drag handle to start drag
|
||||
if (el.closest('[data-drag-handle="true"]')) {
|
||||
return;
|
||||
}
|
||||
|
||||
el.addEventListener('mousedown', (e) => {
|
||||
// Prevent drag when clicking on interactive elements
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Observe DOM changes to update draggable elements when blocks are added/removed
|
||||
*/
|
||||
observeBlockChanges() {
|
||||
const observer = new MutationObserver(() => {
|
||||
this.updateDraggableElements();
|
||||
});
|
||||
|
||||
observer.observe(this.blocksContainer, {
|
||||
childList: true,
|
||||
subtree: false
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drag start
|
||||
*/
|
||||
handleDragStart(e, card) {
|
||||
// Don't start drag if clicking on buttons or inputs
|
||||
if (e.target.closest('button, input, textarea, select')) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
this.draggedElement = card;
|
||||
card.classList.add('admin-block-card--dragging');
|
||||
|
||||
// Set drag data
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/html', card.outerHTML);
|
||||
e.dataTransfer.setData('text/plain', card.dataset.blockId);
|
||||
|
||||
// Add visual feedback
|
||||
e.dataTransfer.setDragImage(card, 0, 0);
|
||||
|
||||
// Add placeholder styling
|
||||
this.blocksContainer.classList.add('admin-block-editor__blocks--dragging');
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drag end
|
||||
*/
|
||||
handleDragEnd(e, card) {
|
||||
card.classList.remove('admin-block-card--dragging');
|
||||
this.blocksContainer.classList.remove('admin-block-editor__blocks--dragging');
|
||||
|
||||
// Remove all drag-over classes
|
||||
const allCards = this.blocksContainer.querySelectorAll('.admin-block-card');
|
||||
allCards.forEach(c => {
|
||||
c.classList.remove('admin-block-card--drag-over');
|
||||
c.classList.remove('admin-block-card--drag-over-before');
|
||||
c.classList.remove('admin-block-card--drag-over-after');
|
||||
});
|
||||
|
||||
this.draggedElement = null;
|
||||
this.dragOverIndex = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drag over
|
||||
*/
|
||||
handleDragOver(e, card) {
|
||||
if (this.draggedElement === card) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
|
||||
// Calculate drop position
|
||||
const cardRect = card.getBoundingClientRect();
|
||||
const mouseY = e.clientY;
|
||||
const cardMiddleY = cardRect.top + cardRect.height / 2;
|
||||
|
||||
// Determine if we're dropping before or after this card
|
||||
const isBefore = mouseY < cardMiddleY;
|
||||
|
||||
// Remove all drag-over classes
|
||||
const allCards = this.blocksContainer.querySelectorAll('.admin-block-card');
|
||||
allCards.forEach(c => {
|
||||
c.classList.remove('admin-block-card--drag-over');
|
||||
c.classList.remove('admin-block-card--drag-over-before');
|
||||
c.classList.remove('admin-block-card--drag-over-after');
|
||||
});
|
||||
|
||||
// Add appropriate class
|
||||
if (isBefore) {
|
||||
card.classList.add('admin-block-card--drag-over-before');
|
||||
} else {
|
||||
card.classList.add('admin-block-card--drag-over-after');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drag enter
|
||||
*/
|
||||
handleDragEnter(e, card) {
|
||||
if (this.draggedElement === card) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drag leave
|
||||
*/
|
||||
handleDragLeave(e, card) {
|
||||
// Only remove classes if we're actually leaving the card
|
||||
if (!card.contains(e.relatedTarget)) {
|
||||
card.classList.remove('admin-block-card--drag-over');
|
||||
card.classList.remove('admin-block-card--drag-over-before');
|
||||
card.classList.remove('admin-block-card--drag-over-after');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drop
|
||||
*/
|
||||
handleDrop(e, targetCard) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (this.draggedElement === targetCard || !this.draggedElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get all block cards in current order
|
||||
const allCards = Array.from(this.blocksContainer.querySelectorAll('.admin-block-card'));
|
||||
const draggedIndex = allCards.indexOf(this.draggedElement);
|
||||
const targetIndex = allCards.indexOf(targetCard);
|
||||
|
||||
// Calculate final position based on drop zone
|
||||
const cardRect = targetCard.getBoundingClientRect();
|
||||
const mouseY = e.clientY;
|
||||
const cardMiddleY = cardRect.top + cardRect.height / 2;
|
||||
const isBefore = mouseY < cardMiddleY;
|
||||
|
||||
let finalIndex = targetIndex;
|
||||
if (isBefore && draggedIndex > targetIndex) {
|
||||
finalIndex = targetIndex;
|
||||
} else if (!isBefore && draggedIndex < targetIndex) {
|
||||
finalIndex = targetIndex + 1;
|
||||
} else if (isBefore && draggedIndex < targetIndex) {
|
||||
finalIndex = targetIndex;
|
||||
} else {
|
||||
finalIndex = targetIndex + 1;
|
||||
}
|
||||
|
||||
// Extract block IDs in new order
|
||||
const blockIds = allCards.map(card => card.dataset.blockId);
|
||||
|
||||
// Remove dragged element from array
|
||||
blockIds.splice(draggedIndex, 1);
|
||||
|
||||
// Insert at new position
|
||||
blockIds.splice(finalIndex, 0, this.draggedElement.dataset.blockId);
|
||||
|
||||
// Call LiveComponent action to reorder blocks
|
||||
this.reorderBlocks(blockIds);
|
||||
|
||||
// Clean up
|
||||
this.handleDragEnd(e, targetCard);
|
||||
}
|
||||
|
||||
/**
|
||||
* Call LiveComponent action to reorder blocks
|
||||
*/
|
||||
reorderBlocks(blockIds) {
|
||||
if (!this.componentId) {
|
||||
console.error('BlockEditorDnD: No component ID found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the LiveComponent instance
|
||||
const liveComponentElement = document.querySelector(`[data-live-component="${this.componentId}"]`);
|
||||
if (!liveComponentElement) {
|
||||
console.error('BlockEditorDnD: LiveComponent element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Use the LiveComponent API if available
|
||||
if (window.liveComponentManager) {
|
||||
const manager = window.liveComponentManager;
|
||||
const component = manager.getComponent(this.componentId);
|
||||
|
||||
if (component) {
|
||||
// Call action directly
|
||||
component.executeAction('reorderBlocks', { blockIds: blockIds });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: Create a temporary button to trigger the action
|
||||
const actionButton = document.createElement('button');
|
||||
actionButton.type = 'button';
|
||||
actionButton.dataset.liveAction = 'reorderBlocks';
|
||||
actionButton.dataset.liveComponent = this.componentId;
|
||||
actionButton.style.display = 'none';
|
||||
|
||||
// Set block IDs as JSON string in data attribute
|
||||
// The parameter binder will convert data-param-block-ids to blockIds
|
||||
actionButton.dataset.paramBlockIds = JSON.stringify(blockIds);
|
||||
|
||||
liveComponentElement.appendChild(actionButton);
|
||||
|
||||
// Trigger click event (LiveComponent handler will pick it up)
|
||||
actionButton.click();
|
||||
|
||||
// Remove temporary button after a short delay
|
||||
setTimeout(() => {
|
||||
actionButton.remove();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all block editors on the page
|
||||
*/
|
||||
static initializeAll() {
|
||||
const containers = document.querySelectorAll('.admin-block-editor');
|
||||
const instances = [];
|
||||
|
||||
containers.forEach(container => {
|
||||
instances.push(new BlockEditorDnD(container));
|
||||
});
|
||||
|
||||
return instances;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
BlockEditorDnD.initializeAll();
|
||||
});
|
||||
} else {
|
||||
BlockEditorDnD.initializeAll();
|
||||
}
|
||||
|
||||
// Re-initialize when LiveComponents are loaded dynamically
|
||||
document.addEventListener('livecomponent:loaded', () => {
|
||||
BlockEditorDnD.initializeAll();
|
||||
});
|
||||
|
||||
138
resources/js/modules/admin/block-editor-sync.js
Normal file
138
resources/js/modules/admin/block-editor-sync.js
Normal file
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* Block Editor Auto-Sync
|
||||
*
|
||||
* Automatically syncs blocks from BlockEditorComponent to ContentFormComponent
|
||||
* when blocks are added, removed, updated, or reordered.
|
||||
*/
|
||||
|
||||
export class BlockEditorSync {
|
||||
constructor(blockEditorElement, contentFormComponentId) {
|
||||
this.blockEditorElement = blockEditorElement;
|
||||
this.contentFormComponentId = contentFormComponentId;
|
||||
this.syncDebounceTimer = null;
|
||||
this.SYNC_DEBOUNCE_MS = 500; // Debounce sync calls by 500ms
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Listen for LiveComponent update events
|
||||
this.blockEditorElement.addEventListener('livecomponent:updated', (e) => {
|
||||
this.handleBlockEditorUpdate(e);
|
||||
});
|
||||
|
||||
// Also listen for custom block events
|
||||
document.addEventListener('livecomponent:event', (e) => {
|
||||
const eventData = e.detail;
|
||||
if (eventData && eventData.component_id) {
|
||||
const blockEditorId = this.blockEditorElement.dataset.liveComponent;
|
||||
if (eventData.component_id === blockEditorId) {
|
||||
// Check if it's a block-related event
|
||||
if (eventData.event_name && (
|
||||
eventData.event_name.includes('block:') ||
|
||||
eventData.event_name.includes('blocks:')
|
||||
)) {
|
||||
this.scheduleSync();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle BlockEditorComponent update
|
||||
*/
|
||||
handleBlockEditorUpdate(e) {
|
||||
// Debounce sync to avoid too many requests
|
||||
this.scheduleSync();
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule sync with debouncing
|
||||
*/
|
||||
scheduleSync() {
|
||||
if (this.syncDebounceTimer) {
|
||||
clearTimeout(this.syncDebounceTimer);
|
||||
}
|
||||
|
||||
this.syncDebounceTimer = setTimeout(() => {
|
||||
this.syncBlocks();
|
||||
}, this.SYNC_DEBOUNCE_MS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync blocks from BlockEditorComponent to ContentFormComponent
|
||||
*/
|
||||
async syncBlocks() {
|
||||
if (!this.contentFormComponentId) {
|
||||
console.warn('BlockEditorSync: No content form component ID');
|
||||
return;
|
||||
}
|
||||
|
||||
// Find ContentFormComponent element
|
||||
const contentFormElement = document.querySelector(
|
||||
`[data-live-component="${this.contentFormComponentId}"]`
|
||||
);
|
||||
|
||||
if (!contentFormElement) {
|
||||
console.warn('BlockEditorSync: ContentFormComponent not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get LiveComponent instance
|
||||
const liveComponent = window.LiveComponents?.getComponent?.(this.contentFormComponentId);
|
||||
|
||||
if (!liveComponent) {
|
||||
console.warn('BlockEditorSync: LiveComponent instance not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Call syncBlocksFromBlockEditor action on ContentFormComponent
|
||||
try {
|
||||
await liveComponent.action('syncBlocksFromBlockEditor');
|
||||
} catch (error) {
|
||||
console.error('BlockEditorSync: Failed to sync blocks', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all block editor syncs on the page
|
||||
*/
|
||||
static initializeAll() {
|
||||
const instances = [];
|
||||
|
||||
// Find all BlockEditorComponents
|
||||
const blockEditorElements = document.querySelectorAll(
|
||||
'[data-live-component^="admin-block-editor:"]'
|
||||
);
|
||||
|
||||
blockEditorElements.forEach(blockEditorElement => {
|
||||
// Find parent ContentFormComponent
|
||||
const contentFormElement = blockEditorElement.closest(
|
||||
'[data-live-component^="admin-content-form:"]'
|
||||
);
|
||||
|
||||
if (contentFormElement) {
|
||||
const contentFormComponentId = contentFormElement.dataset.liveComponent;
|
||||
instances.push(new BlockEditorSync(blockEditorElement, contentFormComponentId));
|
||||
}
|
||||
});
|
||||
|
||||
return instances;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
BlockEditorSync.initializeAll();
|
||||
});
|
||||
} else {
|
||||
BlockEditorSync.initializeAll();
|
||||
}
|
||||
|
||||
// Re-initialize when LiveComponents are loaded dynamically
|
||||
document.addEventListener('livecomponent:loaded', () => {
|
||||
BlockEditorSync.initializeAll();
|
||||
});
|
||||
|
||||
468
resources/js/modules/admin/bulk-operations.js
Normal file
468
resources/js/modules/admin/bulk-operations.js
Normal file
@@ -0,0 +1,468 @@
|
||||
/**
|
||||
* Bulk Operations Module for Admin Tables
|
||||
*
|
||||
* Handles bulk selection and actions for admin data tables
|
||||
*/
|
||||
|
||||
export class BulkOperations {
|
||||
constructor(tableElement) {
|
||||
this.table = tableElement;
|
||||
this.resource = tableElement.dataset.resource;
|
||||
this.bulkActions = JSON.parse(tableElement.dataset.bulkActions || '[]');
|
||||
this.selectedIds = new Set();
|
||||
this.toolbar = document.querySelector(`[data-bulk-toolbar="${this.resource}"]`);
|
||||
this.countElement = this.toolbar?.querySelector('[data-bulk-count]');
|
||||
this.buttonsContainer = this.toolbar?.querySelector('[data-bulk-buttons]');
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
if (!this.table.dataset.bulkOperations || this.table.dataset.bulkOperations !== 'true') {
|
||||
return; // Bulk operations not enabled for this table
|
||||
}
|
||||
|
||||
this.setupCheckboxes();
|
||||
this.setupSelectAll();
|
||||
this.setupBulkActions();
|
||||
this.updateToolbar();
|
||||
}
|
||||
|
||||
setupCheckboxes() {
|
||||
const checkboxes = this.table.querySelectorAll('.bulk-select-item');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.addEventListener('change', (e) => {
|
||||
const id = e.target.dataset.bulkItemId;
|
||||
if (e.target.checked) {
|
||||
this.selectedIds.add(id);
|
||||
} else {
|
||||
this.selectedIds.delete(id);
|
||||
}
|
||||
this.updateToolbar();
|
||||
this.updateSelectAllState();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setupSelectAll() {
|
||||
const selectAllCheckbox = this.table.querySelector('[data-bulk-select-all]');
|
||||
if (!selectAllCheckbox) return;
|
||||
|
||||
selectAllCheckbox.addEventListener('change', (e) => {
|
||||
const checked = e.target.checked;
|
||||
const checkboxes = this.table.querySelectorAll('.bulk-select-item');
|
||||
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = checked;
|
||||
const id = checkbox.dataset.bulkItemId;
|
||||
if (checked) {
|
||||
this.selectedIds.add(id);
|
||||
} else {
|
||||
this.selectedIds.delete(id);
|
||||
}
|
||||
});
|
||||
|
||||
this.updateToolbar();
|
||||
});
|
||||
}
|
||||
|
||||
setupBulkActions() {
|
||||
if (!this.buttonsContainer || this.bulkActions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear existing buttons
|
||||
this.buttonsContainer.innerHTML = '';
|
||||
|
||||
// Add buttons for each bulk action
|
||||
this.bulkActions.forEach(action => {
|
||||
const button = document.createElement('button');
|
||||
button.className = `btn btn--${action.style || 'secondary'} btn--sm`;
|
||||
button.textContent = action.label;
|
||||
button.dataset.bulkAction = action.action;
|
||||
button.dataset.bulkMethod = action.method || 'POST';
|
||||
if (action.confirm) {
|
||||
button.dataset.bulkConfirm = action.confirm;
|
||||
}
|
||||
|
||||
button.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.executeBulkAction(action);
|
||||
});
|
||||
|
||||
this.buttonsContainer.appendChild(button);
|
||||
});
|
||||
}
|
||||
|
||||
async executeBulkAction(action) {
|
||||
if (this.selectedIds.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle special actions that need custom modals
|
||||
if (action.action === 'tag' && action.confirm === false) {
|
||||
return this.showBulkTagModal(action);
|
||||
}
|
||||
|
||||
// Show confirmation dialog if needed
|
||||
if (action.confirm) {
|
||||
const confirmed = await this.showConfirmationDialog(
|
||||
action.confirm,
|
||||
`This will affect ${this.selectedIds.size} item(s).`
|
||||
);
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
// Show loading state
|
||||
this.setLoadingState(true);
|
||||
|
||||
// Optimistic update: hide selected rows immediately
|
||||
const selectedRows = Array.from(this.selectedIds).map(id => {
|
||||
return this.table.querySelector(`tr[data-id="${id}"]`);
|
||||
}).filter(Boolean);
|
||||
|
||||
const rollbackRows = selectedRows.map(row => {
|
||||
const originalDisplay = row.style.display;
|
||||
row.style.display = 'none';
|
||||
row.classList.add('optimistic-delete');
|
||||
return () => {
|
||||
row.style.display = originalDisplay;
|
||||
row.classList.remove('optimistic-delete');
|
||||
};
|
||||
});
|
||||
|
||||
const ids = Array.from(this.selectedIds);
|
||||
const method = action.method || 'POST';
|
||||
|
||||
// Map action names to endpoints
|
||||
const endpointMap = {
|
||||
'assets': {
|
||||
'delete': '/api/v1/assets/bulk/delete',
|
||||
'tag': '/api/v1/assets/bulk/tags',
|
||||
},
|
||||
'contents': {
|
||||
'delete': '/admin/api/contents/bulk/delete',
|
||||
'publish': '/admin/api/contents/bulk/publish',
|
||||
},
|
||||
};
|
||||
|
||||
const endpoint = action.endpoint || endpointMap[this.resource]?.[action.action] || `/admin/api/${this.resource}/bulk/${action.action}`;
|
||||
|
||||
// Use safeFetch if available, otherwise regular fetch
|
||||
const fetchFn = window.safeFetch || (async (url, options) => {
|
||||
const response = await fetch(url, options);
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
|
||||
throw new Error(errorData.error || `HTTP ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
});
|
||||
|
||||
// Prepare request body
|
||||
let requestBody = { ids: Array.from(this.selectedIds) };
|
||||
|
||||
// Add tags if this is a tag action
|
||||
if (action.action === 'tag' && action.tags) {
|
||||
requestBody.tags = action.tags;
|
||||
}
|
||||
|
||||
const result = await fetchFn(endpoint, {
|
||||
method: method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
|
||||
// Show success message
|
||||
const successCount = result.total_deleted || result.total_published || result.total_tagged || ids.length;
|
||||
const actionLabel = action.action === 'tag' ? 'tagged' : action.label.toLowerCase();
|
||||
this.showToast(`Successfully ${actionLabel} ${successCount} item(s)`, 'success');
|
||||
|
||||
// Clear selection
|
||||
this.clearSelection();
|
||||
|
||||
// Reload table data if table has reload method
|
||||
const tableInstance = this.table.adminDataTable;
|
||||
if (tableInstance && typeof tableInstance.loadData === 'function') {
|
||||
tableInstance.loadData();
|
||||
} else {
|
||||
// Fallback: reload page
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Bulk action failed:', error);
|
||||
|
||||
// Rollback optimistic updates
|
||||
if (window.rollbackRows) {
|
||||
window.rollbackRows.forEach(rollback => rollback());
|
||||
}
|
||||
|
||||
// Show error with retry option
|
||||
const errorMessage = error.message || 'Unknown error occurred';
|
||||
this.showToast(`Failed to ${action.label.toLowerCase()}: ${errorMessage}`, 'error');
|
||||
|
||||
// Show retry button
|
||||
if (this.toolbar) {
|
||||
const retryButton = document.createElement('button');
|
||||
retryButton.className = 'retry-button';
|
||||
retryButton.textContent = 'Retry';
|
||||
retryButton.onclick = () => {
|
||||
retryButton.remove();
|
||||
this.executeBulkAction(action);
|
||||
};
|
||||
this.buttonsContainer?.appendChild(retryButton);
|
||||
}
|
||||
} finally {
|
||||
this.setLoadingState(false);
|
||||
}
|
||||
}
|
||||
|
||||
updateToolbar() {
|
||||
if (!this.toolbar) return;
|
||||
|
||||
const count = this.selectedIds.size;
|
||||
|
||||
if (count > 0) {
|
||||
this.toolbar.style.display = 'flex';
|
||||
if (this.countElement) {
|
||||
this.countElement.textContent = count;
|
||||
}
|
||||
} else {
|
||||
this.toolbar.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
updateSelectAllState() {
|
||||
const selectAllCheckbox = this.table.querySelector('[data-bulk-select-all]');
|
||||
if (!selectAllCheckbox) return;
|
||||
|
||||
const checkboxes = this.table.querySelectorAll('.bulk-select-item');
|
||||
const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
|
||||
|
||||
if (checkedCount === 0) {
|
||||
selectAllCheckbox.checked = false;
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
} else if (checkedCount === checkboxes.length) {
|
||||
selectAllCheckbox.checked = true;
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
} else {
|
||||
selectAllCheckbox.checked = false;
|
||||
selectAllCheckbox.indeterminate = true;
|
||||
}
|
||||
}
|
||||
|
||||
clearSelection() {
|
||||
this.selectedIds.clear();
|
||||
const checkboxes = this.table.querySelectorAll('.bulk-select-item');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = false;
|
||||
});
|
||||
const selectAllCheckbox = this.table.querySelector('[data-bulk-select-all]');
|
||||
if (selectAllCheckbox) {
|
||||
selectAllCheckbox.checked = false;
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
}
|
||||
this.updateToolbar();
|
||||
}
|
||||
|
||||
setLoadingState(loading) {
|
||||
const buttons = this.buttonsContainer?.querySelectorAll('button');
|
||||
if (buttons) {
|
||||
buttons.forEach(button => {
|
||||
button.disabled = loading;
|
||||
if (loading) {
|
||||
button.dataset.originalText = button.textContent;
|
||||
button.textContent = 'Processing...';
|
||||
} else {
|
||||
button.textContent = button.dataset.originalText || button.textContent;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async showConfirmationDialog(title, message) {
|
||||
return new Promise((resolve) => {
|
||||
const dialog = document.createElement('div');
|
||||
dialog.className = 'bulk-confirm-dialog';
|
||||
dialog.innerHTML = `
|
||||
<div class="bulk-confirm-dialog__overlay"></div>
|
||||
<div class="bulk-confirm-dialog__content">
|
||||
<h3>${title}</h3>
|
||||
<p>${message}</p>
|
||||
<div class="bulk-confirm-dialog__actions">
|
||||
<button class="btn btn--secondary" data-confirm-cancel>Cancel</button>
|
||||
<button class="btn btn--danger" data-confirm-ok>Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
const cleanup = () => {
|
||||
document.body.removeChild(dialog);
|
||||
};
|
||||
|
||||
dialog.querySelector('[data-confirm-ok]').addEventListener('click', () => {
|
||||
cleanup();
|
||||
resolve(true);
|
||||
});
|
||||
|
||||
dialog.querySelector('[data-confirm-cancel]').addEventListener('click', () => {
|
||||
cleanup();
|
||||
resolve(false);
|
||||
});
|
||||
|
||||
dialog.querySelector('.bulk-confirm-dialog__overlay').addEventListener('click', () => {
|
||||
cleanup();
|
||||
resolve(false);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
showToast(message, type = 'info') {
|
||||
// Use existing toast system if available
|
||||
if (window.Toast) {
|
||||
window.Toast[type](message);
|
||||
} else {
|
||||
// Fallback: simple alert
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
async showBulkTagModal(action) {
|
||||
// Create or get modal
|
||||
let modal = document.getElementById('bulk-tag-modal');
|
||||
if (!modal) {
|
||||
// Load modal HTML (should be included in page)
|
||||
modal = document.createElement('div');
|
||||
modal.id = 'bulk-tag-modal';
|
||||
modal.innerHTML = await fetch('/admin/templates/bulk-tag-modal').then(r => r.text()).catch(() => '');
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
|
||||
// Update count
|
||||
const countElement = modal.querySelector('#bulk-tag-count');
|
||||
if (countElement) {
|
||||
countElement.textContent = this.selectedIds.size;
|
||||
}
|
||||
|
||||
// Show modal
|
||||
modal.style.display = 'block';
|
||||
|
||||
// Setup tag input with autocomplete
|
||||
const tagInput = modal.querySelector('#bulk-tag-input');
|
||||
const suggestionsContainer = modal.querySelector('#bulk-tag-suggestions');
|
||||
const suggestionsList = modal.querySelector('.bulk-tag-suggestions-list');
|
||||
let tagSuggestions = [];
|
||||
|
||||
// Load tag suggestions
|
||||
const loadSuggestions = async (search = '') => {
|
||||
try {
|
||||
const response = await fetch(`/api/v1/tags/suggestions${search ? '?search=' + encodeURIComponent(search) : ''}`);
|
||||
const data = await response.json();
|
||||
tagSuggestions = data.tags || [];
|
||||
|
||||
if (tagSuggestions.length > 0) {
|
||||
suggestionsContainer.style.display = 'block';
|
||||
suggestionsList.innerHTML = tagSuggestions.slice(0, 10).map(tag =>
|
||||
`<button type="button" class="bulk-tag-suggestion" data-tag="${tag}">${tag}</button>`
|
||||
).join('');
|
||||
|
||||
// Add click handlers to suggestions
|
||||
suggestionsList.querySelectorAll('.bulk-tag-suggestion').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const tag = btn.dataset.tag;
|
||||
const currentTags = tagInput.value.split(',').map(t => t.trim()).filter(Boolean);
|
||||
if (!currentTags.includes(tag)) {
|
||||
currentTags.push(tag);
|
||||
tagInput.value = currentTags.join(', ');
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
suggestionsContainer.style.display = 'none';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load tag suggestions:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Load initial suggestions
|
||||
await loadSuggestions();
|
||||
|
||||
// Setup input listener for suggestions
|
||||
if (tagInput) {
|
||||
let debounceTimer;
|
||||
tagInput.addEventListener('input', (e) => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
const search = e.target.value.split(',').pop().trim();
|
||||
if (search.length > 1) {
|
||||
loadSuggestions(search);
|
||||
} else {
|
||||
loadSuggestions();
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
// Setup submit handler
|
||||
const submitButton = modal.querySelector('#bulk-tag-submit');
|
||||
const closeModal = () => {
|
||||
modal.style.display = 'none';
|
||||
if (tagInput) tagInput.value = '';
|
||||
suggestionsContainer.style.display = 'none';
|
||||
};
|
||||
|
||||
submitButton?.addEventListener('click', async () => {
|
||||
const tagsInput = tagInput?.value.trim();
|
||||
if (!tagsInput) {
|
||||
this.showToast('Please enter at least one tag', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const tags = tagsInput.split(',').map(t => t.trim()).filter(Boolean);
|
||||
|
||||
// Execute tag action with tags
|
||||
const tagAction = { ...action, tags };
|
||||
closeModal();
|
||||
await this.executeBulkAction(tagAction);
|
||||
});
|
||||
|
||||
// Setup close handlers
|
||||
modal.querySelectorAll('[data-close-modal]').forEach(el => {
|
||||
el.addEventListener('click', closeModal);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize bulk operations for tables with bulk operations enabled
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize immediately
|
||||
document.querySelectorAll('[data-bulk-operations="true"]').forEach(table => {
|
||||
new BulkOperations(table);
|
||||
});
|
||||
|
||||
// Also initialize after a short delay to catch dynamically loaded tables
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('[data-bulk-operations="true"]').forEach(table => {
|
||||
// Check if already initialized
|
||||
if (!table.dataset.bulkInitialized) {
|
||||
table.dataset.bulkInitialized = 'true';
|
||||
new BulkOperations(table);
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { Module } from '../core/module.js';
|
||||
|
||||
/**
|
||||
* Admin Data Table Module
|
||||
*
|
||||
@@ -9,9 +7,9 @@ import { Module } from '../core/module.js';
|
||||
* - Search/filtering
|
||||
* - Auto-refresh
|
||||
*/
|
||||
export class AdminDataTable extends Module {
|
||||
export class AdminDataTable {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.element = element;
|
||||
|
||||
this.resource = element.dataset.resource;
|
||||
this.apiEndpoint = element.dataset.apiEndpoint;
|
||||
@@ -26,11 +24,6 @@ export class AdminDataTable extends Module {
|
||||
}
|
||||
|
||||
async init() {
|
||||
if (!this.apiEndpoint) {
|
||||
console.warn('AdminDataTable: No API endpoint configured');
|
||||
return;
|
||||
}
|
||||
|
||||
this.tbody = this.element.querySelector('tbody');
|
||||
this.thead = this.element.querySelector('thead');
|
||||
|
||||
@@ -39,27 +32,38 @@ export class AdminDataTable extends Module {
|
||||
return;
|
||||
}
|
||||
|
||||
// Always setup event listeners for sorting, even if data is already loaded
|
||||
this.setupEventListeners();
|
||||
|
||||
// Only load data if table is initially empty
|
||||
if (this.tbody.children.length === 0) {
|
||||
// Only load data via AJAX if API endpoint is configured and table is empty
|
||||
if (this.apiEndpoint && this.tbody.children.length === 0) {
|
||||
await this.loadData();
|
||||
}
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Sortable columns
|
||||
if (this.sortable && this.thead) {
|
||||
this.thead.querySelectorAll('th').forEach((th, index) => {
|
||||
const columnKey = th.dataset.column || this.getColumnKeyFromIndex(index);
|
||||
// Sortable columns - only for columns with data-column attribute
|
||||
// Check both table-level sortable flag and individual column sortable attribute
|
||||
if (this.thead) {
|
||||
this.thead.querySelectorAll('th[data-column]').forEach((th) => {
|
||||
const columnKey = th.dataset.column;
|
||||
|
||||
if (columnKey) {
|
||||
th.style.cursor = 'pointer';
|
||||
th.classList.add('sortable');
|
||||
// Only make sortable if table-level sortable is enabled OR column has data-column
|
||||
if (this.sortable || th.hasAttribute('data-column')) {
|
||||
th.style.cursor = 'pointer';
|
||||
th.classList.add('sortable');
|
||||
|
||||
th.addEventListener('click', () => {
|
||||
this.sortByColumn(columnKey, th);
|
||||
});
|
||||
th.addEventListener('click', () => {
|
||||
// If API endpoint is available, use AJAX sorting
|
||||
if (this.apiEndpoint) {
|
||||
this.sortByColumn(columnKey, th);
|
||||
} else {
|
||||
// Otherwise, do client-side sorting
|
||||
this.sortByColumnClientSide(columnKey, th);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -114,8 +118,49 @@ export class AdminDataTable extends Module {
|
||||
th.dataset.sortDir = newDir;
|
||||
th.classList.add(`sort-${newDir}`);
|
||||
|
||||
// Reload data
|
||||
await this.loadData();
|
||||
// Reload data if API endpoint is available
|
||||
if (this.apiEndpoint) {
|
||||
await this.loadData();
|
||||
}
|
||||
}
|
||||
|
||||
sortByColumnClientSide(columnKey, th) {
|
||||
// Client-side sorting for tables without API endpoint
|
||||
const currentDir = th.dataset.sortDir;
|
||||
const newDir = currentDir === 'asc' ? 'desc' : 'asc';
|
||||
|
||||
// Update UI
|
||||
this.thead.querySelectorAll('th').forEach(header => {
|
||||
header.removeAttribute('data-sort-dir');
|
||||
header.classList.remove('sort-asc', 'sort-desc');
|
||||
});
|
||||
|
||||
th.dataset.sortDir = newDir;
|
||||
th.classList.add(`sort-${newDir}`);
|
||||
|
||||
// Get all rows
|
||||
const rows = Array.from(this.tbody.querySelectorAll('tr'));
|
||||
const columnIndex = Array.from(this.thead.querySelectorAll('th')).indexOf(th);
|
||||
|
||||
// Sort rows
|
||||
rows.sort((a, b) => {
|
||||
const aValue = a.cells[columnIndex]?.textContent?.trim() || '';
|
||||
const bValue = b.cells[columnIndex]?.textContent?.trim() || '';
|
||||
|
||||
// Try numeric comparison first
|
||||
const aNum = parseFloat(aValue);
|
||||
const bNum = parseFloat(bValue);
|
||||
if (!isNaN(aNum) && !isNaN(bNum)) {
|
||||
return newDir === 'asc' ? aNum - bNum : bNum - aNum;
|
||||
}
|
||||
|
||||
// String comparison
|
||||
const comparison = aValue.localeCompare(bValue);
|
||||
return newDir === 'asc' ? comparison : -comparison;
|
||||
});
|
||||
|
||||
// Re-append sorted rows
|
||||
rows.forEach(row => this.tbody.appendChild(row));
|
||||
}
|
||||
|
||||
async loadData() {
|
||||
@@ -138,7 +183,17 @@ export class AdminDataTable extends Module {
|
||||
try {
|
||||
this.setLoadingState(true);
|
||||
|
||||
const response = await fetch(url);
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
@@ -152,7 +207,20 @@ export class AdminDataTable extends Module {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('AdminDataTable: Failed to load data', error);
|
||||
this.showError('Failed to load data');
|
||||
console.error('AdminDataTable: URL was', url);
|
||||
|
||||
// Fallback to client-side sorting if API fails
|
||||
if (this.currentSort && this.tbody.children.length > 0) {
|
||||
console.warn('AdminDataTable: API failed, falling back to client-side sorting');
|
||||
const th = this.thead.querySelector(`th[data-column="${this.currentSort.column}"]`);
|
||||
if (th) {
|
||||
this.sortByColumnClientSide(this.currentSort.column, th);
|
||||
} else {
|
||||
this.showError('Failed to load data. Please refresh the page.');
|
||||
}
|
||||
} else {
|
||||
this.showError('Failed to load data');
|
||||
}
|
||||
} finally {
|
||||
this.setLoadingState(false);
|
||||
}
|
||||
@@ -288,8 +356,19 @@ export class AdminDataTable extends Module {
|
||||
}
|
||||
|
||||
// Auto-initialize all admin data tables
|
||||
// Initialize tables with API endpoints (AJAX loading)
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('[data-resource][data-api-endpoint]').forEach(table => {
|
||||
new AdminDataTable(table).init();
|
||||
});
|
||||
|
||||
// Also initialize tables with sortable attribute but without API endpoint (client-side sorting)
|
||||
document.querySelectorAll('table.admin-table[data-sortable="true"]').forEach(table => {
|
||||
if (!table.dataset.apiEndpoint) {
|
||||
// Create a minimal AdminDataTable instance for client-side sorting
|
||||
const dataTable = new AdminDataTable(table);
|
||||
dataTable.sortable = true;
|
||||
dataTable.init();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
299
resources/js/modules/admin/duplicate-management.js
Normal file
299
resources/js/modules/admin/duplicate-management.js
Normal file
@@ -0,0 +1,299 @@
|
||||
/**
|
||||
* Duplicate Management Module
|
||||
*
|
||||
* Handles duplicate asset management (merge, delete)
|
||||
*/
|
||||
|
||||
export class DuplicateManagement {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupDeleteDuplicate();
|
||||
this.setupDeleteGroup();
|
||||
this.setupMergeGroup();
|
||||
this.setupRefresh();
|
||||
}
|
||||
|
||||
setupDeleteDuplicate() {
|
||||
document.addEventListener('click', async (e) => {
|
||||
const button = e.target.closest('[data-delete-duplicate]');
|
||||
if (!button) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const assetId = button.dataset.assetId;
|
||||
if (!confirm(`Are you sure you want to delete this duplicate asset?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
await this.deleteAsset(assetId, button);
|
||||
});
|
||||
}
|
||||
|
||||
setupDeleteGroup() {
|
||||
document.addEventListener('click', async (e) => {
|
||||
const button = e.target.closest('[data-delete-group]');
|
||||
if (!button) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const sha256 = button.dataset.sha256;
|
||||
const groupCard = button.closest('.duplicate-group');
|
||||
const assetCount = groupCard?.querySelectorAll('.duplicate-asset-card').length || 0;
|
||||
|
||||
if (!confirm(`Are you sure you want to delete all ${assetCount} duplicate assets in this group?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
await this.deleteGroup(sha256, button);
|
||||
});
|
||||
}
|
||||
|
||||
setupMergeGroup() {
|
||||
document.addEventListener('click', async (e) => {
|
||||
const button = e.target.closest('[data-merge-group]');
|
||||
if (!button) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const sha256 = button.dataset.sha256;
|
||||
const groupCard = button.closest('.duplicate-group');
|
||||
const assets = Array.from(groupCard?.querySelectorAll('[data-asset-id]') || [])
|
||||
.map(el => el.dataset.assetId);
|
||||
|
||||
if (assets.length < 2) {
|
||||
if (window.Toast) {
|
||||
window.Toast.warning('Need at least 2 assets to merge');
|
||||
} else {
|
||||
alert('Need at least 2 assets to merge');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Show merge dialog
|
||||
const keepAssetId = await this.showMergeDialog(assets);
|
||||
if (!keepAssetId) {
|
||||
return;
|
||||
}
|
||||
|
||||
await this.mergeGroup(sha256, assets, keepAssetId, button);
|
||||
});
|
||||
}
|
||||
|
||||
setupRefresh() {
|
||||
document.addEventListener('click', (e) => {
|
||||
const button = e.target.closest('[data-refresh-duplicates]');
|
||||
if (!button) return;
|
||||
|
||||
e.preventDefault();
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
async deleteAsset(assetId, button) {
|
||||
const originalText = button.textContent;
|
||||
button.disabled = true;
|
||||
button.textContent = 'Deleting...';
|
||||
|
||||
try {
|
||||
const response = await fetch(`/admin/api/assets/${assetId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
if (window.Toast) {
|
||||
window.Toast.success('Duplicate asset deleted');
|
||||
}
|
||||
|
||||
// Remove asset card
|
||||
button.closest('.duplicate-asset-card')?.remove();
|
||||
|
||||
// Check if group is now empty or has only one asset
|
||||
const groupCard = button.closest('.duplicate-group');
|
||||
const remainingAssets = groupCard?.querySelectorAll('.duplicate-asset-card').length || 0;
|
||||
if (remainingAssets <= 1) {
|
||||
groupCard?.remove();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete asset:', error);
|
||||
if (window.Toast) {
|
||||
window.Toast.error(`Failed to delete asset: ${error.message}`);
|
||||
} else {
|
||||
alert(`Failed to delete asset: ${error.message}`);
|
||||
}
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.textContent = originalText;
|
||||
}
|
||||
}
|
||||
|
||||
async deleteGroup(sha256, button) {
|
||||
const groupCard = button.closest('.duplicate-group');
|
||||
const assetCards = groupCard?.querySelectorAll('.duplicate-asset-card') || [];
|
||||
const assetIds = Array.from(assetCards).map(card =>
|
||||
card.querySelector('[data-asset-id]')?.dataset.assetId
|
||||
).filter(Boolean);
|
||||
|
||||
button.disabled = true;
|
||||
button.textContent = 'Deleting...';
|
||||
|
||||
try {
|
||||
// Delete all assets in parallel
|
||||
const deletePromises = assetIds.map(id =>
|
||||
fetch(`/admin/api/assets/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
await Promise.all(deletePromises);
|
||||
|
||||
if (window.Toast) {
|
||||
window.Toast.success(`Deleted ${assetIds.length} duplicate assets`);
|
||||
}
|
||||
|
||||
// Remove group card
|
||||
groupCard?.remove();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete group:', error);
|
||||
if (window.Toast) {
|
||||
window.Toast.error(`Failed to delete group: ${error.message}`);
|
||||
} else {
|
||||
alert(`Failed to delete group: ${error.message}`);
|
||||
}
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.textContent = 'Delete All';
|
||||
}
|
||||
}
|
||||
|
||||
async showMergeDialog(assetIds) {
|
||||
return new Promise((resolve) => {
|
||||
const dialog = document.createElement('div');
|
||||
dialog.className = 'merge-dialog';
|
||||
dialog.innerHTML = `
|
||||
<div class="merge-dialog__overlay"></div>
|
||||
<div class="merge-dialog__content">
|
||||
<h3>Merge Duplicate Assets</h3>
|
||||
<p>Select which asset to keep. All other duplicates will be deleted.</p>
|
||||
<div class="merge-dialog__assets" id="merge-assets-list"></div>
|
||||
<div class="merge-dialog__actions">
|
||||
<button class="btn btn--secondary" data-merge-cancel>Cancel</button>
|
||||
<button class="btn btn--primary" data-merge-confirm disabled>Merge</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
const assetsList = dialog.querySelector('#merge-assets-list');
|
||||
let selectedAssetId = null;
|
||||
|
||||
// Load asset details and create radio buttons
|
||||
assetIds.forEach(assetId => {
|
||||
const assetCard = document.querySelector(`[data-asset-id="${assetId}"]`)?.closest('.duplicate-asset-card');
|
||||
if (!assetCard) return;
|
||||
|
||||
const assetIdEl = assetCard.querySelector('.asset-id code');
|
||||
const assetBucket = assetCard.querySelector('.asset-bucket');
|
||||
const assetPreview = assetCard.querySelector('.asset-preview-small')?.innerHTML;
|
||||
|
||||
const radio = document.createElement('div');
|
||||
radio.className = 'merge-asset-option';
|
||||
radio.innerHTML = `
|
||||
<input type="radio" name="keep-asset" value="${assetId}" id="asset-${assetId}">
|
||||
<label for="asset-${assetId}">
|
||||
<div class="merge-asset-preview">${assetPreview || ''}</div>
|
||||
<div class="merge-asset-info">
|
||||
<strong>${assetIdEl?.textContent || assetId}</strong>
|
||||
<small>${assetBucket?.textContent || ''}</small>
|
||||
</div>
|
||||
</label>
|
||||
`;
|
||||
|
||||
radio.querySelector('input').addEventListener('change', (e) => {
|
||||
if (e.target.checked) {
|
||||
selectedAssetId = e.target.value;
|
||||
dialog.querySelector('[data-merge-confirm]').disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
assetsList.appendChild(radio);
|
||||
});
|
||||
|
||||
const cleanup = () => {
|
||||
document.body.removeChild(dialog);
|
||||
};
|
||||
|
||||
dialog.querySelector('[data-merge-confirm]').addEventListener('click', () => {
|
||||
cleanup();
|
||||
resolve(selectedAssetId);
|
||||
});
|
||||
|
||||
dialog.querySelector('[data-merge-cancel]').addEventListener('click', () => {
|
||||
cleanup();
|
||||
resolve(null);
|
||||
});
|
||||
|
||||
dialog.querySelector('.merge-dialog__overlay').addEventListener('click', () => {
|
||||
cleanup();
|
||||
resolve(null);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async mergeGroup(sha256, assetIds, keepAssetId, button) {
|
||||
button.disabled = true;
|
||||
button.textContent = 'Merging...';
|
||||
|
||||
try {
|
||||
// Delete all assets except the one to keep
|
||||
const deleteIds = assetIds.filter(id => id !== keepAssetId);
|
||||
const deletePromises = deleteIds.map(id =>
|
||||
fetch(`/admin/api/assets/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
await Promise.all(deletePromises);
|
||||
|
||||
if (window.Toast) {
|
||||
window.Toast.success(`Merged ${deleteIds.length} duplicates into one asset`);
|
||||
}
|
||||
|
||||
// Remove group card
|
||||
button.closest('.duplicate-group')?.remove();
|
||||
} catch (error) {
|
||||
console.error('Failed to merge group:', error);
|
||||
if (window.Toast) {
|
||||
window.Toast.error(`Failed to merge group: ${error.message}`);
|
||||
} else {
|
||||
alert(`Failed to merge group: ${error.message}`);
|
||||
}
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.textContent = 'Merge Group';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (document.querySelector('.duplicates-list')) {
|
||||
new DuplicateManagement();
|
||||
}
|
||||
});
|
||||
|
||||
135
resources/js/modules/admin/metadata-form-sync.js
Normal file
135
resources/js/modules/admin/metadata-form-sync.js
Normal file
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* MetaData Form Auto-Sync
|
||||
*
|
||||
* Automatically syncs metadata from MetaDataFormComponent to ContentFormComponent
|
||||
* when metadata fields are updated.
|
||||
*/
|
||||
|
||||
export class MetaDataFormSync {
|
||||
constructor(metaDataFormElement, contentFormComponentId) {
|
||||
this.metaDataFormElement = metaDataFormElement;
|
||||
this.contentFormComponentId = contentFormComponentId;
|
||||
this.syncDebounceTimer = null;
|
||||
this.SYNC_DEBOUNCE_MS = 500; // Debounce sync calls by 500ms
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Listen for LiveComponent update events
|
||||
this.metaDataFormElement.addEventListener('livecomponent:updated', (e) => {
|
||||
this.handleMetaDataFormUpdate(e);
|
||||
});
|
||||
|
||||
// Also listen for custom metadata events
|
||||
document.addEventListener('livecomponent:event', (e) => {
|
||||
const eventData = e.detail;
|
||||
if (eventData && eventData.component_id) {
|
||||
const metaDataFormId = this.metaDataFormElement.dataset.liveComponent;
|
||||
if (eventData.component_id === metaDataFormId) {
|
||||
// Check if it's a metadata-related event
|
||||
if (eventData.event_name && eventData.event_name.includes('metadata:')) {
|
||||
this.scheduleSync();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle MetaDataFormComponent update
|
||||
*/
|
||||
handleMetaDataFormUpdate(e) {
|
||||
// Debounce sync to avoid too many requests
|
||||
this.scheduleSync();
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule sync with debouncing
|
||||
*/
|
||||
scheduleSync() {
|
||||
if (this.syncDebounceTimer) {
|
||||
clearTimeout(this.syncDebounceTimer);
|
||||
}
|
||||
|
||||
this.syncDebounceTimer = setTimeout(() => {
|
||||
this.syncMetaData();
|
||||
}, this.SYNC_DEBOUNCE_MS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync metadata from MetaDataFormComponent to ContentFormComponent
|
||||
*/
|
||||
async syncMetaData() {
|
||||
if (!this.contentFormComponentId) {
|
||||
console.warn('MetaDataFormSync: No content form component ID');
|
||||
return;
|
||||
}
|
||||
|
||||
// Find ContentFormComponent element
|
||||
const contentFormElement = document.querySelector(
|
||||
`[data-live-component="${this.contentFormComponentId}"]`
|
||||
);
|
||||
|
||||
if (!contentFormElement) {
|
||||
console.warn('MetaDataFormSync: ContentFormComponent not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get LiveComponent instance
|
||||
const liveComponent = window.LiveComponents?.getComponent?.(this.contentFormComponentId);
|
||||
|
||||
if (!liveComponent) {
|
||||
console.warn('MetaDataFormSync: LiveComponent instance not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Call syncMetaDataFromForm action on ContentFormComponent
|
||||
try {
|
||||
await liveComponent.action('syncMetaDataFromForm');
|
||||
} catch (error) {
|
||||
console.error('MetaDataFormSync: Failed to sync metadata', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all metadata form syncs on the page
|
||||
*/
|
||||
static initializeAll() {
|
||||
const instances = [];
|
||||
|
||||
// Find all MetaDataFormComponents
|
||||
const metaDataFormElements = document.querySelectorAll(
|
||||
'[data-live-component^="admin-metadata-form:"]'
|
||||
);
|
||||
|
||||
metaDataFormElements.forEach(metaDataFormElement => {
|
||||
// Find parent ContentFormComponent
|
||||
const contentFormElement = metaDataFormElement.closest(
|
||||
'[data-live-component^="admin-content-form:"]'
|
||||
);
|
||||
|
||||
if (contentFormElement) {
|
||||
const contentFormComponentId = contentFormElement.dataset.liveComponent;
|
||||
instances.push(new MetaDataFormSync(metaDataFormElement, contentFormComponentId));
|
||||
}
|
||||
});
|
||||
|
||||
return instances;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
MetaDataFormSync.initializeAll();
|
||||
});
|
||||
} else {
|
||||
MetaDataFormSync.initializeAll();
|
||||
}
|
||||
|
||||
// Re-initialize when LiveComponents are loaded dynamically
|
||||
document.addEventListener('livecomponent:loaded', () => {
|
||||
MetaDataFormSync.initializeAll();
|
||||
});
|
||||
|
||||
253
resources/js/modules/admin/ui-enhancements.js
Normal file
253
resources/js/modules/admin/ui-enhancements.js
Normal file
@@ -0,0 +1,253 @@
|
||||
/**
|
||||
* UI Enhancements Module
|
||||
*
|
||||
* Provides loading states, optimistic updates, and better error handling
|
||||
*/
|
||||
|
||||
export class UIEnhancements {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupLoadingStates();
|
||||
this.setupOptimisticUpdates();
|
||||
this.setupErrorHandling();
|
||||
this.setupFormEnhancements();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup loading states for async operations
|
||||
*/
|
||||
setupLoadingStates() {
|
||||
// Add loading state to buttons
|
||||
document.addEventListener('click', (e) => {
|
||||
const button = e.target.closest('button[data-loading]');
|
||||
if (button && !button.disabled) {
|
||||
const originalText = button.textContent;
|
||||
button.dataset.originalText = originalText;
|
||||
button.disabled = true;
|
||||
button.classList.add('loading');
|
||||
|
||||
// Add spinner
|
||||
const spinner = document.createElement('span');
|
||||
spinner.className = 'button-spinner';
|
||||
spinner.innerHTML = '⏳';
|
||||
button.prepend(spinner);
|
||||
button.textContent = button.dataset.loadingText || 'Loading...';
|
||||
|
||||
// Auto-reset after 10 seconds (safety)
|
||||
setTimeout(() => {
|
||||
this.resetButton(button);
|
||||
}, 10000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
resetButton(button) {
|
||||
if (button.dataset.originalText) {
|
||||
button.textContent = button.dataset.originalText;
|
||||
delete button.dataset.originalText;
|
||||
}
|
||||
button.disabled = false;
|
||||
button.classList.remove('loading');
|
||||
const spinner = button.querySelector('.button-spinner');
|
||||
if (spinner) {
|
||||
spinner.remove();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup optimistic updates for better UX
|
||||
*/
|
||||
setupOptimisticUpdates() {
|
||||
// Optimistic update helper
|
||||
window.optimisticUpdate = (element, updateFn, rollbackFn) => {
|
||||
const originalState = this.captureState(element);
|
||||
|
||||
try {
|
||||
updateFn(element);
|
||||
return () => {
|
||||
// Rollback function
|
||||
this.restoreState(element, originalState);
|
||||
if (rollbackFn) rollbackFn();
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Optimistic update failed:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Apply optimistic updates to table rows
|
||||
document.addEventListener('click', (e) => {
|
||||
const row = e.target.closest('tr[data-id]');
|
||||
if (!row) return;
|
||||
|
||||
const action = e.target.closest('[data-optimistic]');
|
||||
if (!action) return;
|
||||
|
||||
const actionType = action.dataset.optimistic;
|
||||
const rollback = this.optimisticTableUpdate(row, actionType);
|
||||
|
||||
// Store rollback function
|
||||
action.dataset.rollback = 'true';
|
||||
action.addEventListener('error', () => {
|
||||
if (rollback) rollback();
|
||||
}, { once: true });
|
||||
});
|
||||
}
|
||||
|
||||
optimisticTableUpdate(row, actionType) {
|
||||
const originalClass = row.className;
|
||||
const originalOpacity = row.style.opacity;
|
||||
|
||||
switch (actionType) {
|
||||
case 'delete':
|
||||
row.style.opacity = '0.5';
|
||||
row.style.textDecoration = 'line-through';
|
||||
row.classList.add('optimistic-delete');
|
||||
return () => {
|
||||
row.className = originalClass;
|
||||
row.style.opacity = originalOpacity;
|
||||
row.style.textDecoration = '';
|
||||
row.classList.remove('optimistic-delete');
|
||||
};
|
||||
case 'update':
|
||||
row.classList.add('optimistic-update');
|
||||
return () => {
|
||||
row.classList.remove('optimistic-update');
|
||||
};
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
captureState(element) {
|
||||
return {
|
||||
className: element.className,
|
||||
style: element.style.cssText,
|
||||
innerHTML: element.innerHTML,
|
||||
};
|
||||
}
|
||||
|
||||
restoreState(element, state) {
|
||||
element.className = state.className;
|
||||
element.style.cssText = state.style;
|
||||
element.innerHTML = state.innerHTML;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup better error handling
|
||||
*/
|
||||
setupErrorHandling() {
|
||||
// Global error handler
|
||||
window.addEventListener('error', (e) => {
|
||||
this.showErrorNotification('An unexpected error occurred', e.error);
|
||||
});
|
||||
|
||||
// Unhandled promise rejection handler
|
||||
window.addEventListener('unhandledrejection', (e) => {
|
||||
this.showErrorNotification('Request failed', e.reason);
|
||||
});
|
||||
|
||||
// Enhanced fetch wrapper with error handling
|
||||
window.safeFetch = async (url, options = {}) => {
|
||||
try {
|
||||
const response = await fetch(url, options);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
|
||||
throw new Error(errorData.error || `HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
this.showErrorNotification('Request failed', error.message);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
showErrorNotification(title, message) {
|
||||
// Use existing toast system if available
|
||||
if (window.Toast) {
|
||||
window.Toast.error(`${title}: ${message}`);
|
||||
} else {
|
||||
// Fallback: console error
|
||||
console.error(title, message);
|
||||
|
||||
// Show simple alert as last resort
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'error-notification';
|
||||
errorDiv.innerHTML = `
|
||||
<strong>${title}</strong>
|
||||
<p>${message}</p>
|
||||
<button onclick="this.parentElement.remove()">Close</button>
|
||||
`;
|
||||
document.body.appendChild(errorDiv);
|
||||
|
||||
setTimeout(() => {
|
||||
if (errorDiv.parentNode) {
|
||||
errorDiv.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup form enhancements
|
||||
*/
|
||||
setupFormEnhancements() {
|
||||
// Add loading state to forms
|
||||
document.addEventListener('submit', (e) => {
|
||||
const form = e.target;
|
||||
if (form.tagName !== 'FORM') return;
|
||||
|
||||
const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
|
||||
if (submitButton) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.classList.add('loading');
|
||||
|
||||
// Add loading text
|
||||
const originalText = submitButton.value || submitButton.textContent;
|
||||
submitButton.dataset.originalText = originalText;
|
||||
submitButton.value = submitButton.value ? 'Submitting...' : submitButton.value;
|
||||
submitButton.textContent = submitButton.textContent ? 'Submitting...' : submitButton.textContent;
|
||||
}
|
||||
|
||||
// Reset on error
|
||||
form.addEventListener('error', () => {
|
||||
if (submitButton) {
|
||||
submitButton.disabled = false;
|
||||
submitButton.classList.remove('loading');
|
||||
submitButton.value = submitButton.dataset.originalText || submitButton.value;
|
||||
submitButton.textContent = submitButton.dataset.originalText || submitButton.textContent;
|
||||
}
|
||||
}, { once: true });
|
||||
});
|
||||
|
||||
// Add retry functionality for failed requests
|
||||
window.retryRequest = async (requestFn, maxRetries = 3, delay = 1000) => {
|
||||
let lastError;
|
||||
|
||||
for (let i = 0; i < maxRetries; i++) {
|
||||
try {
|
||||
return await requestFn();
|
||||
} catch (error) {
|
||||
lastError = error;
|
||||
if (i < maxRetries - 1) {
|
||||
await new Promise(resolve => setTimeout(resolve, delay * (i + 1)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw lastError;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new UIEnhancements();
|
||||
});
|
||||
|
||||
186
resources/js/modules/admin/variant-creation.js
Normal file
186
resources/js/modules/admin/variant-creation.js
Normal file
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* Variant Creation Module
|
||||
*
|
||||
* Handles variant creation UI and API calls
|
||||
*/
|
||||
|
||||
export class VariantCreation {
|
||||
constructor() {
|
||||
this.modal = null;
|
||||
this.assetId = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupCreateButtons();
|
||||
this.setupModal();
|
||||
this.setupPresets();
|
||||
this.setupSubmit();
|
||||
}
|
||||
|
||||
setupCreateButtons() {
|
||||
document.addEventListener('click', (e) => {
|
||||
const button = e.target.closest('[data-create-variant]');
|
||||
if (!button) return;
|
||||
|
||||
e.preventDefault();
|
||||
this.assetId = button.closest('[data-asset-id]')?.dataset.assetId ||
|
||||
window.location.pathname.split('/').pop();
|
||||
this.showModal();
|
||||
});
|
||||
}
|
||||
|
||||
setupModal() {
|
||||
// Create or get modal
|
||||
this.modal = document.getElementById('variant-create-modal');
|
||||
if (!this.modal) {
|
||||
console.warn('Variant creation modal not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Setup close handlers
|
||||
this.modal.querySelectorAll('[data-close-variant-modal]').forEach(el => {
|
||||
el.addEventListener('click', () => this.closeModal());
|
||||
});
|
||||
|
||||
// Setup quality slider
|
||||
const qualitySlider = this.modal.querySelector('#variant-quality');
|
||||
const qualityValue = this.modal.querySelector('#quality-value');
|
||||
if (qualitySlider && qualityValue) {
|
||||
qualitySlider.addEventListener('input', (e) => {
|
||||
qualityValue.textContent = e.target.value;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setupPresets() {
|
||||
const presets = {
|
||||
'1200w': { variant: '1200w', width: 1200, quality: 85 },
|
||||
'800w': { variant: '800w', width: 800, quality: 85 },
|
||||
'thumb@1x': { variant: 'thumb@1x', width: 200, quality: 80 },
|
||||
'thumb@2x': { variant: 'thumb@2x', width: 400, quality: 80 },
|
||||
};
|
||||
|
||||
this.modal?.querySelectorAll('[data-preset]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const preset = presets[button.dataset.preset];
|
||||
if (preset) {
|
||||
this.modal.querySelector('#variant-name').value = preset.variant;
|
||||
this.modal.querySelector('#variant-width').value = preset.width;
|
||||
this.modal.querySelector('#variant-quality').value = preset.quality;
|
||||
this.modal.querySelector('#quality-value').textContent = preset.quality;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setupSubmit() {
|
||||
const submitButton = this.modal?.querySelector('#variant-create-submit');
|
||||
if (!submitButton) return;
|
||||
|
||||
submitButton.addEventListener('click', async () => {
|
||||
await this.createVariant();
|
||||
});
|
||||
}
|
||||
|
||||
showModal() {
|
||||
if (!this.modal) return;
|
||||
|
||||
// Reset form
|
||||
const form = this.modal.querySelector('#variant-create-form');
|
||||
if (form) {
|
||||
form.reset();
|
||||
this.modal.querySelector('#variant-quality').value = 85;
|
||||
this.modal.querySelector('#quality-value').textContent = '85';
|
||||
}
|
||||
|
||||
this.modal.style.display = 'block';
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
if (this.modal) {
|
||||
this.modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
async createVariant() {
|
||||
if (!this.assetId) {
|
||||
console.error('Asset ID not set');
|
||||
return;
|
||||
}
|
||||
|
||||
const form = this.modal.querySelector('#variant-create-form');
|
||||
if (!form) return;
|
||||
|
||||
const formData = new FormData(form);
|
||||
const data = {
|
||||
variant: formData.get('variant'),
|
||||
width: formData.get('width') ? parseInt(formData.get('width')) : null,
|
||||
height: formData.get('height') ? parseInt(formData.get('height')) : null,
|
||||
quality: formData.get('quality') ? parseInt(formData.get('quality')) : null,
|
||||
};
|
||||
|
||||
// Validate
|
||||
if (!data.variant) {
|
||||
if (window.Toast) {
|
||||
window.Toast.error('Variant name is required');
|
||||
} else {
|
||||
alert('Variant name is required');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const submitButton = this.modal.querySelector('#variant-create-submit');
|
||||
const originalText = submitButton.textContent;
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = 'Creating...';
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/v1/assets/${this.assetId}/variants`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
|
||||
throw new Error(errorData.error || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (window.Toast) {
|
||||
window.Toast.success('Variant creation queued. It will be processed shortly.');
|
||||
} else {
|
||||
alert('Variant creation queued successfully');
|
||||
}
|
||||
|
||||
this.closeModal();
|
||||
|
||||
// Reload page after a short delay to show new variant
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
console.error('Failed to create variant:', error);
|
||||
|
||||
if (window.Toast) {
|
||||
window.Toast.error(`Failed to create variant: ${error.message}`);
|
||||
} else {
|
||||
alert(`Failed to create variant: ${error.message}`);
|
||||
}
|
||||
} finally {
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = originalText;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new VariantCreation();
|
||||
});
|
||||
|
||||
137
resources/js/modules/admin/view-transitions.js
Normal file
137
resources/js/modules/admin/view-transitions.js
Normal file
@@ -0,0 +1,137 @@
|
||||
/**
|
||||
* View Transitions Helper - Admin Interface
|
||||
*
|
||||
* Helper-Funktionen für View Transitions API.
|
||||
* Baseline 2023: View Transitions API ist Baseline Newly available.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Check if View Transitions are supported
|
||||
*/
|
||||
export function supportsViewTransitions() {
|
||||
return 'startViewTransition' in document;
|
||||
}
|
||||
|
||||
/**
|
||||
* Start View Transition for Admin Navigation
|
||||
*/
|
||||
export function transitionNavigation(callback) {
|
||||
if (!supportsViewTransitions()) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
||||
document.startViewTransition(() => {
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Start View Transition for Admin Content Updates
|
||||
*/
|
||||
export function transitionContentUpdate(callback) {
|
||||
if (!supportsViewTransitions()) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
||||
const transition = document.startViewTransition(() => {
|
||||
callback();
|
||||
});
|
||||
|
||||
return transition;
|
||||
}
|
||||
|
||||
/**
|
||||
* Start View Transition for Popover
|
||||
*/
|
||||
export function transitionPopover(popoverElement, callback) {
|
||||
if (!supportsViewTransitions()) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
||||
// Set view-transition-name for this specific popover
|
||||
const originalName = popoverElement.style.viewTransitionName;
|
||||
popoverElement.style.viewTransitionName = `admin-popover-${popoverElement.id}`;
|
||||
|
||||
const transition = document.startViewTransition(() => {
|
||||
callback();
|
||||
});
|
||||
|
||||
transition.finished.finally(() => {
|
||||
// Restore original name
|
||||
if (originalName) {
|
||||
popoverElement.style.viewTransitionName = originalName;
|
||||
} else {
|
||||
popoverElement.style.viewTransitionName = '';
|
||||
}
|
||||
});
|
||||
|
||||
return transition;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize View Transitions for Admin Navigation Links
|
||||
*/
|
||||
export function initAdminNavigationTransitions() {
|
||||
if (!supportsViewTransitions()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle navigation links
|
||||
document.querySelectorAll('.admin-nav a[href]').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
const href = link.getAttribute('href');
|
||||
|
||||
// Only handle internal links
|
||||
if (href && !href.startsWith('http') && !href.startsWith('#')) {
|
||||
e.preventDefault();
|
||||
|
||||
transitionNavigation(() => {
|
||||
window.location.href = href;
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize View Transitions for Popover Toggles
|
||||
*/
|
||||
export function initPopoverTransitions() {
|
||||
if (!supportsViewTransitions()) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('[popovertarget]').forEach(trigger => {
|
||||
const popoverId = trigger.getAttribute('popovertarget');
|
||||
const popover = document.getElementById(popoverId);
|
||||
|
||||
if (popover) {
|
||||
popover.addEventListener('toggle', (e) => {
|
||||
const isOpen = popover.matches(':popover-open');
|
||||
|
||||
transitionPopover(popover, () => {
|
||||
// Transition is handled by browser
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all View Transitions
|
||||
*/
|
||||
export function initViewTransitions() {
|
||||
initAdminNavigationTransitions();
|
||||
initPopoverTransitions();
|
||||
}
|
||||
|
||||
// Auto-initialize if DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initViewTransitions);
|
||||
} else {
|
||||
initViewTransitions();
|
||||
}
|
||||
|
||||
534
resources/js/modules/common/ActionHandler.js
Normal file
534
resources/js/modules/common/ActionHandler.js
Normal file
@@ -0,0 +1,534 @@
|
||||
/**
|
||||
* Generic ActionHandler Module
|
||||
*
|
||||
* Provides reusable event delegation-based action handling with:
|
||||
* - Automatic CSRF token injection
|
||||
* - Loading state management
|
||||
* - Confirmation dialogs
|
||||
* - Toast integration
|
||||
* - URL template processing
|
||||
* - Error handling
|
||||
*/
|
||||
|
||||
export class ActionHandler {
|
||||
constructor(containerSelector, options = {}) {
|
||||
this.containerSelector = containerSelector;
|
||||
this.container = null;
|
||||
this.options = {
|
||||
csrfTokenSelector: options.csrfTokenSelector || '[data-live-component]',
|
||||
toastHandler: options.toastHandler || null,
|
||||
confirmationHandler: options.confirmationHandler || null,
|
||||
loadingTexts: options.loadingTexts || {},
|
||||
autoRefresh: options.autoRefresh !== false,
|
||||
refreshHandler: options.refreshHandler || null,
|
||||
...options
|
||||
};
|
||||
|
||||
this.handlers = new Map();
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize event delegation
|
||||
*/
|
||||
init() {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => this.setupEventDelegation());
|
||||
} else {
|
||||
this.setupEventDelegation();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event delegation on container
|
||||
*/
|
||||
setupEventDelegation() {
|
||||
this.container = document.querySelector(this.containerSelector);
|
||||
if (!this.container) {
|
||||
console.warn(`[ActionHandler] Container not found: ${this.containerSelector}`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.container.addEventListener('click', (e) => {
|
||||
const button = e.target.closest('[data-action]');
|
||||
if (!button) return;
|
||||
|
||||
const action = button.dataset.action;
|
||||
if (action) {
|
||||
e.preventDefault();
|
||||
this.handleAction(action, button);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a named action handler
|
||||
*/
|
||||
registerHandler(name, config) {
|
||||
this.handlers.set(name, config);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle action from button click
|
||||
*/
|
||||
async handleAction(action, element) {
|
||||
// Check if handler is registered
|
||||
const handlerName = element.dataset.actionHandler || 'default';
|
||||
const handler = this.handlers.get(handlerName);
|
||||
|
||||
// Get action configuration
|
||||
const config = this.getActionConfig(action, element, handler);
|
||||
|
||||
// If handler provides URL template but config doesn't have URL, use template
|
||||
if (!config.url && handler?.urlTemplate) {
|
||||
config.url = handler.urlTemplate;
|
||||
}
|
||||
|
||||
if (!config.url) {
|
||||
console.warn(`[ActionHandler] No URL found for action: ${action}`, {
|
||||
element,
|
||||
handlerName,
|
||||
config
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Show confirmation if required
|
||||
if (config.confirm) {
|
||||
const confirmed = await this.showConfirmation(config.confirm);
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Set loading state
|
||||
const loadingText = config.loadingText || this.options.loadingTexts[action] || 'Processing...';
|
||||
this.showLoading(element, loadingText);
|
||||
|
||||
try {
|
||||
// Process URL template first (needed for both window and fetch)
|
||||
let url = this.processUrlTemplate(config.url, element);
|
||||
|
||||
// Handle special actions (like logs that open in new window)
|
||||
if (config.type === 'window') {
|
||||
// Ensure URL is absolute for window.open (relative URLs don't work reliably)
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
url = `${window.location.origin}${url}`;
|
||||
}
|
||||
window.open(url, config.windowTarget || '_blank');
|
||||
this.resetLoading(element);
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle inline expandable content (like logs in table rows)
|
||||
if (config.type === 'inline') {
|
||||
const containerId = element.dataset.actionParamId;
|
||||
const logsRow = document.querySelector(`[data-logs-container="${containerId}"]`);
|
||||
const logsContent = logsRow?.querySelector(`[data-logs-content="${containerId}"]`);
|
||||
|
||||
if (!logsRow || !logsContent) {
|
||||
console.warn(`[ActionHandler] Logs row not found for container: ${containerId}`);
|
||||
this.resetLoading(element);
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle visibility
|
||||
const isVisible = logsRow.style.display !== 'none';
|
||||
|
||||
if (isVisible) {
|
||||
// Collapse
|
||||
logsRow.style.display = 'none';
|
||||
const icon = element.querySelector('.logs-icon');
|
||||
if (icon) {
|
||||
icon.textContent = '📋';
|
||||
}
|
||||
element.classList.remove('active');
|
||||
this.resetLoading(element);
|
||||
return;
|
||||
}
|
||||
|
||||
// Expand and load logs
|
||||
logsRow.style.display = '';
|
||||
const icon = element.querySelector('.logs-icon');
|
||||
if (icon) {
|
||||
icon.textContent = '📖';
|
||||
}
|
||||
element.classList.add('active');
|
||||
|
||||
// Check if already loaded
|
||||
if (logsContent.dataset.loaded === 'true') {
|
||||
this.resetLoading(element);
|
||||
return;
|
||||
}
|
||||
|
||||
// Ensure URL is absolute
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
url = `${window.location.origin}${url}`;
|
||||
}
|
||||
|
||||
// Fetch logs
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
...config.headers
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
this.resetLoading(element);
|
||||
|
||||
if (data.success && data.data?.logs) {
|
||||
// Render logs
|
||||
logsContent.innerHTML = `<pre class="docker-logs"><code>${this.escapeHtml(data.data.logs)}</code></pre>`;
|
||||
logsContent.dataset.loaded = 'true';
|
||||
} else {
|
||||
logsContent.innerHTML = '<div class="alert alert-error">Failed to load logs</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
this.resetLoading(element);
|
||||
logsContent.innerHTML = `<div class="alert alert-error">Error loading logs: ${this.escapeHtml(error.message)}</div>`;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Get CSRF token
|
||||
const { token, formId } = this.getCsrfToken(element);
|
||||
|
||||
// Make request
|
||||
const response = await fetch(url, {
|
||||
method: config.method || 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': token,
|
||||
...config.headers
|
||||
},
|
||||
body: JSON.stringify({
|
||||
_form_id: formId,
|
||||
_token: token,
|
||||
...config.body
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success !== false) {
|
||||
// Success
|
||||
const successMessage = config.successToast || config.successMessage ||
|
||||
(handler?.successMessages?.[action]) ||
|
||||
`Action ${action} completed successfully`;
|
||||
this.showToast(successMessage, 'success');
|
||||
|
||||
// Auto refresh if enabled
|
||||
if (this.options.autoRefresh && config.autoRefresh !== false) {
|
||||
this.refresh();
|
||||
}
|
||||
} else {
|
||||
// Error from server
|
||||
const errorMessage = config.errorToast || config.errorMessage ||
|
||||
(handler?.errorMessages?.[action]) ||
|
||||
data.message ||
|
||||
`Failed to ${action}`;
|
||||
this.showToast(errorMessage, 'error');
|
||||
this.resetLoading(element);
|
||||
}
|
||||
} catch (error) {
|
||||
this.handleError(error, element, config);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get action configuration from element attributes and handler
|
||||
*/
|
||||
getActionConfig(action, element, handler) {
|
||||
const config = {
|
||||
action: action,
|
||||
url: element.dataset.actionUrl,
|
||||
handler: element.dataset.actionHandler,
|
||||
method: element.dataset.actionMethod || 'POST',
|
||||
confirm: element.dataset.actionConfirm,
|
||||
loadingText: element.dataset.actionLoadingText,
|
||||
successToast: element.dataset.actionSuccessToast,
|
||||
errorToast: element.dataset.actionErrorToast,
|
||||
type: element.dataset.actionType,
|
||||
windowTarget: element.dataset.actionWindowTarget,
|
||||
autoRefresh: element.dataset.actionAutoRefresh !== 'false',
|
||||
headers: {},
|
||||
body: {}
|
||||
};
|
||||
|
||||
// Merge with handler config if available
|
||||
if (handler) {
|
||||
// Don't override explicit URL, but use template if no URL set
|
||||
if (!config.url && handler.urlTemplate) {
|
||||
config.url = handler.urlTemplate;
|
||||
}
|
||||
if (handler.confirmations?.[action]) {
|
||||
config.confirm = config.confirm || handler.confirmations[action];
|
||||
}
|
||||
if (handler.loadingTexts?.[action]) {
|
||||
config.loadingText = config.loadingText || handler.loadingTexts[action];
|
||||
}
|
||||
if (handler.successMessages?.[action]) {
|
||||
config.successToast = config.successToast || handler.successMessages[action];
|
||||
}
|
||||
if (handler.errorMessages?.[action]) {
|
||||
config.errorToast = config.errorToast || handler.errorMessages[action];
|
||||
}
|
||||
}
|
||||
|
||||
// Extract parameters from data-action-param-* attributes for request body
|
||||
Object.keys(element.dataset).forEach(key => {
|
||||
if (key.startsWith('actionParam')) {
|
||||
// Convert camelCase to lowercase (e.g., actionParamId -> id)
|
||||
const paramName = key.replace(/^actionParam/, '').replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
config.body[paramName] = element.dataset[key];
|
||||
}
|
||||
});
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
/**
|
||||
* Process URL template with placeholders
|
||||
*/
|
||||
processUrlTemplate(url, element) {
|
||||
if (!url) return url;
|
||||
|
||||
// Replace {action} placeholder
|
||||
url = url.replace('{action}', element.dataset.action || '');
|
||||
|
||||
// Replace {id} placeholder - check multiple sources
|
||||
if (url.includes('{id}')) {
|
||||
// Try data-action-param-id (camelCase from dataset)
|
||||
const id = element.dataset.actionParamId ||
|
||||
// Try data-container-id (for backward compatibility)
|
||||
element.dataset.containerId ||
|
||||
// Try data-id
|
||||
element.dataset.id ||
|
||||
// Try data-action-id
|
||||
element.dataset.actionId ||
|
||||
// Try data-action-param-id as kebab-case attribute
|
||||
element.getAttribute('data-action-param-id');
|
||||
|
||||
if (id) {
|
||||
url = url.replace(/\{id\}/g, id);
|
||||
} else {
|
||||
console.warn(`[ActionHandler] Missing ID for URL template: ${url}`, element);
|
||||
}
|
||||
}
|
||||
|
||||
// Replace {param:name} placeholders
|
||||
url = url.replace(/\{param:(\w+)\}/g, (match, paramName) => {
|
||||
// Try camelCase (dataset converts kebab-case to camelCase)
|
||||
const camelCase = `actionParam${paramName.charAt(0).toUpperCase() + paramName.slice(1)}`;
|
||||
const value = element.dataset[camelCase] ||
|
||||
element.dataset[`actionParam${paramName}`] ||
|
||||
element.dataset[paramName] ||
|
||||
// Try kebab-case attribute
|
||||
element.getAttribute(`data-action-param-${paramName}`);
|
||||
return value || match;
|
||||
});
|
||||
|
||||
// Replace {data:name} placeholders
|
||||
url = url.replace(/\{data:(\w+)\}/g, (match, attrName) => {
|
||||
// Try camelCase from dataset
|
||||
const camelCase = attrName.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
return element.dataset[camelCase] ||
|
||||
element.dataset[attrName] ||
|
||||
element.getAttribute(`data-${attrName}`) ||
|
||||
match;
|
||||
});
|
||||
|
||||
return url;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get CSRF token from various sources
|
||||
*/
|
||||
getCsrfToken(element) {
|
||||
// Try element itself
|
||||
if (element.dataset.csrfToken) {
|
||||
return {
|
||||
token: element.dataset.csrfToken,
|
||||
formId: this.getFormId(element)
|
||||
};
|
||||
}
|
||||
|
||||
// Try closest LiveComponent
|
||||
const componentElement = element.closest(this.options.csrfTokenSelector);
|
||||
if (componentElement?.dataset.csrfToken) {
|
||||
return {
|
||||
token: componentElement.dataset.csrfToken,
|
||||
formId: componentElement.dataset.liveComponent
|
||||
? `livecomponent:${componentElement.dataset.liveComponent}`
|
||||
: this.getFormId(element)
|
||||
};
|
||||
}
|
||||
|
||||
// Try container
|
||||
if (this.container?.dataset.csrfToken) {
|
||||
return {
|
||||
token: this.container.dataset.csrfToken,
|
||||
formId: this.getFormId(element)
|
||||
};
|
||||
}
|
||||
|
||||
// Try meta tag
|
||||
const metaToken = document.querySelector('meta[name="csrf-token"]');
|
||||
if (metaToken) {
|
||||
return {
|
||||
token: metaToken.content,
|
||||
formId: this.getFormId(element)
|
||||
};
|
||||
}
|
||||
|
||||
// Fallback
|
||||
return {
|
||||
token: '',
|
||||
formId: this.getFormId(element)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate form ID for CSRF validation
|
||||
*/
|
||||
getFormId(element) {
|
||||
// If LiveComponent available, use component ID
|
||||
const componentElement = element.closest('[data-live-component]');
|
||||
if (componentElement?.dataset.liveComponent) {
|
||||
return `livecomponent:${componentElement.dataset.liveComponent}`;
|
||||
}
|
||||
|
||||
// Generate from URL
|
||||
const url = element.dataset.actionUrl;
|
||||
if (url) {
|
||||
// Extract path from URL
|
||||
const path = url.split('?')[0];
|
||||
return `action:${path}`;
|
||||
}
|
||||
|
||||
// Fallback
|
||||
return `action:${element.dataset.action}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show loading state on button
|
||||
*/
|
||||
showLoading(element, text) {
|
||||
element.dataset.originalText = element.textContent;
|
||||
element.disabled = true;
|
||||
element.textContent = text;
|
||||
element.style.opacity = '0.6';
|
||||
element.style.cursor = 'not-allowed';
|
||||
element.classList.add('action-loading');
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset loading state
|
||||
*/
|
||||
resetLoading(element) {
|
||||
element.disabled = false;
|
||||
element.textContent = element.dataset.originalText || element.textContent;
|
||||
element.style.opacity = '1';
|
||||
element.style.cursor = 'pointer';
|
||||
element.classList.remove('action-loading');
|
||||
}
|
||||
|
||||
/**
|
||||
* Show confirmation dialog
|
||||
*/
|
||||
async showConfirmation(message) {
|
||||
if (this.options.confirmationHandler) {
|
||||
return await this.options.confirmationHandler(message);
|
||||
}
|
||||
return confirm(message);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show toast notification
|
||||
*/
|
||||
showToast(message, type = 'info') {
|
||||
if (this.options.toastHandler) {
|
||||
this.options.toastHandler(message, type);
|
||||
return;
|
||||
}
|
||||
|
||||
// Try LiveComponentUIHelper
|
||||
if (window.LiveComponentUIHelper) {
|
||||
const componentElement = document.querySelector(this.options.csrfTokenSelector);
|
||||
const componentId = componentElement?.dataset.liveComponent || 'global';
|
||||
window.LiveComponentUIHelper.showNotification(componentId, {
|
||||
message: message,
|
||||
type: type,
|
||||
duration: 5000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Try global showToast
|
||||
if (typeof window.showToast === 'function') {
|
||||
window.showToast(message, type);
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback: Simple alert
|
||||
if (type === 'error') {
|
||||
alert(`Error: ${message}`);
|
||||
} else {
|
||||
console.log(`[${type.toUpperCase()}] ${message}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh page or component
|
||||
*/
|
||||
refresh() {
|
||||
if (this.options.refreshHandler) {
|
||||
this.options.refreshHandler();
|
||||
return;
|
||||
}
|
||||
|
||||
// Try LiveComponent refresh
|
||||
const componentElement = document.querySelector(this.options.csrfTokenSelector);
|
||||
if (componentElement?.dataset.liveComponent) {
|
||||
const componentId = componentElement.dataset.liveComponent;
|
||||
if (window.LiveComponent && typeof window.LiveComponent.refresh === 'function') {
|
||||
window.LiveComponent.refresh(componentId);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: Reload page
|
||||
setTimeout(() => window.location.reload(), 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle errors
|
||||
*/
|
||||
handleError(error, element, config) {
|
||||
console.error('[ActionHandler] Error:', error);
|
||||
|
||||
const errorMessage = config.errorToast ||
|
||||
config.errorMessage ||
|
||||
`Error: ${error.message}`;
|
||||
|
||||
this.showToast(errorMessage, 'error');
|
||||
this.resetLoading(element);
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS
|
||||
*/
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
104
resources/js/modules/common/ActionHandlers.js
Normal file
104
resources/js/modules/common/ActionHandlers.js
Normal file
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* Predefined Action Handlers
|
||||
*
|
||||
* Contains configuration for common action patterns
|
||||
*/
|
||||
|
||||
/**
|
||||
* Docker Container Handler
|
||||
*/
|
||||
export const dockerContainerHandler = {
|
||||
urlTemplate: '/admin/infrastructure/docker/api/containers/{id}/{action}',
|
||||
method: 'POST',
|
||||
confirmations: {
|
||||
stop: 'Are you sure you want to stop this container?',
|
||||
restart: 'Are you sure you want to restart this container?'
|
||||
},
|
||||
loadingTexts: {
|
||||
start: 'Starting...',
|
||||
stop: 'Stopping...',
|
||||
restart: 'Restarting...',
|
||||
reload: 'Reloading...',
|
||||
logs: 'Loading logs...'
|
||||
},
|
||||
successMessages: {
|
||||
start: 'Container started successfully',
|
||||
stop: 'Container stopped successfully',
|
||||
restart: 'Container restarted successfully',
|
||||
reload: 'Container reloaded successfully'
|
||||
},
|
||||
errorMessages: {
|
||||
start: 'Failed to start container',
|
||||
stop: 'Failed to stop container',
|
||||
restart: 'Failed to restart container',
|
||||
reload: 'Failed to reload container'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generic API Handler
|
||||
*/
|
||||
export const genericApiHandler = {
|
||||
urlTemplate: '/api/{entity}/{id}/{action}',
|
||||
method: 'POST',
|
||||
confirmations: {
|
||||
delete: 'Are you sure you want to delete this item?'
|
||||
},
|
||||
loadingTexts: {
|
||||
delete: 'Deleting...',
|
||||
update: 'Updating...',
|
||||
create: 'Creating...'
|
||||
},
|
||||
successMessages: {
|
||||
delete: 'Item deleted successfully',
|
||||
update: 'Item updated successfully',
|
||||
create: 'Item created successfully'
|
||||
},
|
||||
errorMessages: {
|
||||
delete: 'Failed to delete item',
|
||||
update: 'Failed to update item',
|
||||
create: 'Failed to create item'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Bulk Operations Handler
|
||||
*/
|
||||
export const bulkOperationsHandler = {
|
||||
urlTemplate: '/admin/api/{entity}/bulk/{action}',
|
||||
method: 'POST',
|
||||
confirmations: {
|
||||
delete: 'Are you sure you want to delete the selected items?',
|
||||
publish: 'Are you sure you want to publish the selected items?',
|
||||
unpublish: 'Are you sure you want to unpublish the selected items?'
|
||||
},
|
||||
loadingTexts: {
|
||||
delete: 'Deleting...',
|
||||
publish: 'Publishing...',
|
||||
unpublish: 'Unpublishing...',
|
||||
tag: 'Tagging...'
|
||||
},
|
||||
successMessages: {
|
||||
delete: 'Items deleted successfully',
|
||||
publish: 'Items published successfully',
|
||||
unpublish: 'Items unpublished successfully',
|
||||
tag: 'Items tagged successfully'
|
||||
},
|
||||
errorMessages: {
|
||||
delete: 'Failed to delete items',
|
||||
publish: 'Failed to publish items',
|
||||
unpublish: 'Failed to unpublish items',
|
||||
tag: 'Failed to tag items'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Default handler for actions without specific handler
|
||||
*/
|
||||
export const defaultHandler = {
|
||||
method: 'POST',
|
||||
loadingTexts: {
|
||||
default: 'Processing...'
|
||||
}
|
||||
};
|
||||
|
||||
98
resources/js/modules/common/index.js
Normal file
98
resources/js/modules/common/index.js
Normal file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Common Utilities Module
|
||||
*
|
||||
* Provides shared utilities and helpers used across the application
|
||||
*/
|
||||
|
||||
import { ActionHandler } from './ActionHandler.js';
|
||||
import { dockerContainerHandler, genericApiHandler, bulkOperationsHandler, defaultHandler } from './ActionHandlers.js';
|
||||
|
||||
// Export ActionHandler and handlers
|
||||
export { ActionHandler };
|
||||
export { dockerContainerHandler, genericApiHandler, bulkOperationsHandler, defaultHandler };
|
||||
|
||||
// Make ActionHandler globally available for easy access
|
||||
if (typeof window !== 'undefined') {
|
||||
window.ActionHandler = ActionHandler;
|
||||
window.ActionHandlers = {
|
||||
dockerContainer: dockerContainerHandler,
|
||||
genericApi: genericApiHandler,
|
||||
bulkOperations: bulkOperationsHandler,
|
||||
default: defaultHandler
|
||||
};
|
||||
}
|
||||
|
||||
// Framework module definition
|
||||
export const definition = {
|
||||
name: 'common',
|
||||
version: '1.0.0',
|
||||
dependencies: [],
|
||||
provides: ['ActionHandler'],
|
||||
priority: 0
|
||||
};
|
||||
|
||||
// Framework module initialization
|
||||
export async function init(config = {}, state = {}) {
|
||||
console.log('[Common] Module initialized');
|
||||
|
||||
// Auto-initialize ActionHandlers for elements with data-action-handler attribute
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const containers = document.querySelectorAll('[data-action-handler-container]');
|
||||
containers.forEach(container => {
|
||||
const selector = container.dataset.actionHandlerContainer || container.className.split(' ')[0];
|
||||
const handlerName = container.dataset.actionHandler || 'default';
|
||||
|
||||
const handler = new ActionHandler(selector, {
|
||||
csrfTokenSelector: '[data-live-component]',
|
||||
autoRefresh: true
|
||||
});
|
||||
|
||||
// Register handler if specified
|
||||
if (handlerName && window.ActionHandlers[handlerName]) {
|
||||
handler.registerHandler(handlerName, window.ActionHandlers[handlerName]);
|
||||
}
|
||||
|
||||
// Store handler on element for debugging
|
||||
container.actionHandler = handler;
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
ActionHandler,
|
||||
handlers: {
|
||||
dockerContainer: dockerContainerHandler,
|
||||
genericApi: genericApiHandler,
|
||||
bulkOperations: bulkOperationsHandler,
|
||||
default: defaultHandler
|
||||
},
|
||||
state
|
||||
};
|
||||
}
|
||||
|
||||
// Framework DOM element initialization
|
||||
export function initElement(element, options = {}) {
|
||||
// Check if element needs ActionHandler
|
||||
if (element.hasAttribute('data-action-handler-container')) {
|
||||
const selector = element.dataset.actionHandlerContainer || `.${element.className.split(' ')[0]}`;
|
||||
const handlerName = element.dataset.actionHandler || 'default';
|
||||
|
||||
const handler = new ActionHandler(selector, {
|
||||
csrfTokenSelector: '[data-live-component]',
|
||||
autoRefresh: true,
|
||||
...options
|
||||
});
|
||||
|
||||
// Register handler if specified
|
||||
if (handlerName && window.ActionHandlers?.[handlerName]) {
|
||||
handler.registerHandler(handlerName, window.ActionHandlers[handlerName]);
|
||||
}
|
||||
|
||||
// Store handler on element
|
||||
element.actionHandler = handler;
|
||||
|
||||
return handler;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -280,6 +280,214 @@ export class DomPatcher {
|
||||
// Fallback - not guaranteed to be unique
|
||||
return element.tagName.toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Swap element content using different strategies
|
||||
*
|
||||
* Supports multiple swap strategies similar to htmx:
|
||||
* - innerHTML: Replace inner content (default)
|
||||
* - outerHTML: Replace element itself
|
||||
* - beforebegin: Insert before element
|
||||
* - afterbegin: Insert at start of element
|
||||
* - afterend: Insert after element
|
||||
* - beforeend: Insert at end of element
|
||||
* - none: No DOM update (only events/state)
|
||||
*
|
||||
* @param {HTMLElement} target - Target element to swap
|
||||
* @param {string} html - HTML content to swap
|
||||
* @param {string} strategy - Swap strategy (default: 'innerHTML')
|
||||
* @param {string} transition - Optional transition type (fade, slide, none)
|
||||
* @param {Object} scrollOptions - Optional scroll options { enabled, target, behavior }
|
||||
* @returns {boolean} - True if swap was successful
|
||||
*/
|
||||
swapElement(target, html, strategy = 'innerHTML', transition = null, scrollOptions = null) {
|
||||
if (!target || !target.parentNode) {
|
||||
console.warn('[DomPatcher] Invalid target element for swap');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Preserve focus state before swap
|
||||
const restoreFocus = this.preserveFocus(target);
|
||||
|
||||
// Apply transition if specified
|
||||
if (transition && transition !== 'none') {
|
||||
this.applyTransition(target, transition, strategy);
|
||||
}
|
||||
|
||||
// Parse HTML into document fragment
|
||||
const temp = document.createElement('div');
|
||||
temp.innerHTML = html;
|
||||
const newContent = temp.firstElementChild || temp;
|
||||
|
||||
try {
|
||||
switch (strategy) {
|
||||
case 'innerHTML':
|
||||
// Replace inner content (default behavior)
|
||||
target.innerHTML = html;
|
||||
break;
|
||||
|
||||
case 'outerHTML':
|
||||
// Replace element itself
|
||||
if (newContent.nodeType === Node.ELEMENT_NODE) {
|
||||
target.parentNode.replaceChild(newContent.cloneNode(true), target);
|
||||
} else {
|
||||
// If HTML doesn't have a single root element, wrap it
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = html;
|
||||
while (wrapper.firstChild) {
|
||||
target.parentNode.insertBefore(wrapper.firstChild, target);
|
||||
}
|
||||
target.parentNode.removeChild(target);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'beforebegin':
|
||||
// Insert before target element
|
||||
if (newContent.nodeType === Node.ELEMENT_NODE) {
|
||||
target.parentNode.insertBefore(newContent.cloneNode(true), target);
|
||||
} else {
|
||||
// Multiple nodes - insert all
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = html;
|
||||
while (wrapper.firstChild) {
|
||||
target.parentNode.insertBefore(wrapper.firstChild, target);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'afterbegin':
|
||||
// Insert at start of target element
|
||||
if (newContent.nodeType === Node.ELEMENT_NODE) {
|
||||
target.insertBefore(newContent.cloneNode(true), target.firstChild);
|
||||
} else {
|
||||
// Multiple nodes - insert all at start
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = html;
|
||||
while (wrapper.firstChild) {
|
||||
target.insertBefore(wrapper.firstChild, target.firstChild);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'afterend':
|
||||
// Insert after target element
|
||||
if (newContent.nodeType === Node.ELEMENT_NODE) {
|
||||
target.parentNode.insertBefore(newContent.cloneNode(true), target.nextSibling);
|
||||
} else {
|
||||
// Multiple nodes - insert all after
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = html;
|
||||
const nextSibling = target.nextSibling;
|
||||
while (wrapper.firstChild) {
|
||||
target.parentNode.insertBefore(wrapper.firstChild, nextSibling);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'beforeend':
|
||||
// Insert at end of target element
|
||||
if (newContent.nodeType === Node.ELEMENT_NODE) {
|
||||
target.appendChild(newContent.cloneNode(true));
|
||||
} else {
|
||||
// Multiple nodes - append all
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = html;
|
||||
while (wrapper.firstChild) {
|
||||
target.appendChild(wrapper.firstChild);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'none':
|
||||
// No DOM update - only events/state will be handled
|
||||
// This is handled by the caller, so we just return success
|
||||
return true;
|
||||
|
||||
default:
|
||||
console.warn(`[DomPatcher] Unknown swap strategy: ${strategy}, falling back to innerHTML`);
|
||||
target.innerHTML = html;
|
||||
break;
|
||||
}
|
||||
|
||||
// Restore focus after swap (only for strategies that don't remove the target)
|
||||
if (strategy !== 'outerHTML' && strategy !== 'none') {
|
||||
restoreFocus();
|
||||
}
|
||||
|
||||
// Handle scroll behavior if specified
|
||||
if (scrollOptions && scrollOptions.enabled) {
|
||||
this.scrollToTarget(scrollOptions.target || target, scrollOptions.behavior || 'smooth');
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('[DomPatcher] Error during swap:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply CSS transition to element
|
||||
*
|
||||
* @param {HTMLElement} element - Element to apply transition to
|
||||
* @param {string} transition - Transition type (fade, slide)
|
||||
* @param {string} strategy - Swap strategy
|
||||
*/
|
||||
applyTransition(element, transition, strategy) {
|
||||
// Add transition class
|
||||
const transitionClass = `lc-transition-${transition}`;
|
||||
|
||||
// For fade/slide transitions, we need to apply the transition class
|
||||
// and then trigger the transition by adding an active class
|
||||
element.classList.add(transitionClass);
|
||||
|
||||
// Force reflow to ensure class is applied
|
||||
void element.offsetWidth;
|
||||
|
||||
// Add active class to trigger transition
|
||||
requestAnimationFrame(() => {
|
||||
element.classList.add('lc-transition-active');
|
||||
});
|
||||
|
||||
// Remove transition classes after animation completes
|
||||
const handleTransitionEnd = (e) => {
|
||||
// Only handle transition end for this element
|
||||
if (e.target === element) {
|
||||
element.classList.remove(transitionClass);
|
||||
element.classList.remove('lc-transition-active');
|
||||
element.removeEventListener('transitionend', handleTransitionEnd);
|
||||
}
|
||||
};
|
||||
|
||||
element.addEventListener('transitionend', handleTransitionEnd, { once: true });
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to target element
|
||||
*
|
||||
* @param {HTMLElement|string} target - Target element or selector
|
||||
* @param {string} behavior - Scroll behavior (smooth, instant)
|
||||
*/
|
||||
scrollToTarget(target, behavior = 'smooth') {
|
||||
let targetElement = target;
|
||||
|
||||
// If target is a string, try to find element
|
||||
if (typeof target === 'string') {
|
||||
targetElement = document.querySelector(target);
|
||||
}
|
||||
|
||||
if (!targetElement || !(targetElement instanceof HTMLElement)) {
|
||||
console.warn('[DomPatcher] Scroll target not found:', target);
|
||||
return;
|
||||
}
|
||||
|
||||
// Scroll to element
|
||||
targetElement.scrollIntoView({
|
||||
behavior: behavior === 'smooth' ? 'smooth' : 'auto',
|
||||
block: 'start',
|
||||
inline: 'nearest'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Create singleton instance
|
||||
|
||||
315
resources/js/modules/livecomponent/DrawerManager.js
Normal file
315
resources/js/modules/livecomponent/DrawerManager.js
Normal file
@@ -0,0 +1,315 @@
|
||||
/**
|
||||
* Drawer Manager for LiveComponents
|
||||
*
|
||||
* Manages drawer/sidebar components with:
|
||||
* - Slide-in animation (CSS Transitions)
|
||||
* - Overlay backdrop management
|
||||
* - ESC key handling
|
||||
* - Focus management (focus trapping)
|
||||
* - Stack management for multiple drawers
|
||||
*/
|
||||
|
||||
export class DrawerManager {
|
||||
constructor() {
|
||||
this.drawerStack = []; // Array of { componentId, drawerElement, overlayElement, zIndex, closeOnEscape, closeOnOverlay }
|
||||
this.baseZIndex = 1040;
|
||||
this.zIndexIncrement = 10;
|
||||
this.escapeHandler = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open drawer and add to stack
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {Object} options - Drawer options
|
||||
* @returns {Object} Drawer instance
|
||||
*/
|
||||
open(componentId, options = {}) {
|
||||
const {
|
||||
title = '',
|
||||
content = '',
|
||||
position = 'left',
|
||||
width = '400px',
|
||||
showOverlay = true,
|
||||
closeOnOverlay = true,
|
||||
closeOnEscape = true,
|
||||
animation = 'slide'
|
||||
} = options;
|
||||
|
||||
// Calculate z-index
|
||||
const zIndex = this.baseZIndex + (this.drawerStack.length * this.zIndexIncrement);
|
||||
|
||||
// Create overlay if needed
|
||||
let overlay = null;
|
||||
if (showOverlay) {
|
||||
overlay = this.createOverlay(zIndex, closeOnOverlay, componentId);
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
|
||||
// Create drawer element
|
||||
const drawer = this.createDrawerElement(componentId, title, content, position, width, animation, zIndex + 1);
|
||||
document.body.appendChild(drawer);
|
||||
|
||||
// Track in stack
|
||||
const stackItem = {
|
||||
componentId,
|
||||
drawerElement: drawer,
|
||||
overlayElement: overlay,
|
||||
zIndex: zIndex + 1,
|
||||
closeOnEscape,
|
||||
closeOnOverlay
|
||||
};
|
||||
this.drawerStack.push(stackItem);
|
||||
|
||||
// Setup event handlers
|
||||
this.setupDrawerHandlers(drawer, overlay, componentId, closeOnOverlay, closeOnEscape);
|
||||
|
||||
// Update ESC handler
|
||||
this.updateEscapeHandler();
|
||||
|
||||
// Animate in
|
||||
requestAnimationFrame(() => {
|
||||
if (overlay) {
|
||||
overlay.classList.add('drawer-overlay--show');
|
||||
}
|
||||
drawer.classList.add('drawer--show');
|
||||
});
|
||||
|
||||
// Focus management
|
||||
this.focusDrawer(drawer);
|
||||
|
||||
return {
|
||||
drawer: drawer,
|
||||
overlay: overlay,
|
||||
close: () => this.close(componentId),
|
||||
isOpen: () => drawer.classList.contains('drawer--show')
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Close drawer and remove from stack
|
||||
* @param {string} componentId - Component ID
|
||||
*/
|
||||
close(componentId) {
|
||||
const index = this.drawerStack.findIndex(item => item.componentId === componentId);
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { drawerElement, overlayElement } = this.drawerStack[index];
|
||||
|
||||
// Animate out
|
||||
drawerElement.classList.remove('drawer--show');
|
||||
if (overlayElement) {
|
||||
overlayElement.classList.remove('drawer-overlay--show');
|
||||
}
|
||||
|
||||
// Remove from DOM after animation
|
||||
setTimeout(() => {
|
||||
if (drawerElement.parentNode) {
|
||||
drawerElement.parentNode.removeChild(drawerElement);
|
||||
}
|
||||
if (overlayElement && overlayElement.parentNode) {
|
||||
overlayElement.parentNode.removeChild(overlayElement);
|
||||
}
|
||||
}, 300); // Match CSS transition duration
|
||||
|
||||
// Remove from stack
|
||||
this.drawerStack.splice(index, 1);
|
||||
|
||||
// Update ESC handler
|
||||
this.updateEscapeHandler();
|
||||
|
||||
// Focus previous drawer or return focus to body
|
||||
if (this.drawerStack.length > 0) {
|
||||
const previousDrawer = this.drawerStack[this.drawerStack.length - 1];
|
||||
this.focusDrawer(previousDrawer.drawerElement);
|
||||
} else {
|
||||
// Return focus to previously focused element
|
||||
const activeElement = document.activeElement;
|
||||
if (activeElement && activeElement !== document.body) {
|
||||
activeElement.blur();
|
||||
}
|
||||
document.body.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close all drawers
|
||||
*/
|
||||
closeAll() {
|
||||
while (this.drawerStack.length > 0) {
|
||||
const { componentId } = this.drawerStack[this.drawerStack.length - 1];
|
||||
this.close(componentId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get topmost drawer
|
||||
* @returns {Object|null}
|
||||
*/
|
||||
getTopDrawer() {
|
||||
if (this.drawerStack.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return this.drawerStack[this.drawerStack.length - 1];
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if drawer is open
|
||||
* @param {string} componentId - Component ID
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isOpen(componentId) {
|
||||
return this.drawerStack.some(item => item.componentId === componentId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create overlay element
|
||||
* @param {number} zIndex - Z-index value
|
||||
* @param {boolean} closeOnOverlay - Whether to close on overlay click
|
||||
* @param {string} componentId - Component ID
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
createOverlay(zIndex, closeOnOverlay, componentId) {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'drawer-overlay';
|
||||
overlay.style.zIndex = zIndex.toString();
|
||||
overlay.setAttribute('role', 'presentation');
|
||||
overlay.setAttribute('aria-hidden', 'true');
|
||||
|
||||
if (closeOnOverlay) {
|
||||
overlay.addEventListener('click', () => {
|
||||
this.close(componentId);
|
||||
});
|
||||
}
|
||||
|
||||
return overlay;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create drawer element
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {string} title - Drawer title
|
||||
* @param {string} content - Drawer content
|
||||
* @param {string} position - Position (left/right)
|
||||
* @param {string} width - Drawer width
|
||||
* @param {string} animation - Animation type
|
||||
* @param {number} zIndex - Z-index value
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
createDrawerElement(componentId, title, content, position, width, animation, zIndex) {
|
||||
const drawer = document.createElement('div');
|
||||
drawer.className = `drawer drawer--${position} drawer-animation-${animation}`;
|
||||
drawer.id = `drawer-${componentId}`;
|
||||
drawer.style.zIndex = zIndex.toString();
|
||||
drawer.style.width = width;
|
||||
drawer.setAttribute('role', 'dialog');
|
||||
drawer.setAttribute('aria-modal', 'true');
|
||||
drawer.setAttribute('aria-labelledby', title ? `drawer-title-${componentId}` : '');
|
||||
|
||||
drawer.innerHTML = `
|
||||
<div class="drawer-content">
|
||||
${title ? `
|
||||
<div class="drawer-header">
|
||||
<h3 class="drawer-title" id="drawer-title-${componentId}">${title}</h3>
|
||||
<button class="drawer-close" aria-label="Close drawer">×</button>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="drawer-body">${content}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return drawer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event handlers for drawer
|
||||
* @param {HTMLElement} drawer - Drawer element
|
||||
* @param {HTMLElement|null} overlay - Overlay element
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {boolean} closeOnOverlay - Whether to close on overlay click
|
||||
* @param {boolean} closeOnEscape - Whether to close on ESC key
|
||||
*/
|
||||
setupDrawerHandlers(drawer, overlay, componentId, closeOnOverlay, closeOnEscape) {
|
||||
// Close button
|
||||
const closeBtn = drawer.querySelector('.drawer-close');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
this.close(componentId);
|
||||
});
|
||||
}
|
||||
|
||||
// Overlay click (already handled in createOverlay, but ensure it's set)
|
||||
if (overlay && closeOnOverlay) {
|
||||
// Already set in createOverlay
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update ESC key handler
|
||||
*/
|
||||
updateEscapeHandler() {
|
||||
// Remove existing handler
|
||||
if (this.escapeHandler) {
|
||||
document.removeEventListener('keydown', this.escapeHandler);
|
||||
this.escapeHandler = null;
|
||||
}
|
||||
|
||||
// Add handler if there are drawers
|
||||
if (this.drawerStack.length > 0) {
|
||||
const topDrawer = this.getTopDrawer();
|
||||
if (topDrawer && topDrawer.closeOnEscape) {
|
||||
this.escapeHandler = (e) => {
|
||||
if (e.key === 'Escape' && !e.defaultPrevented) {
|
||||
e.preventDefault();
|
||||
this.close(topDrawer.componentId);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', this.escapeHandler);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus drawer element
|
||||
* @param {HTMLElement} drawer - Drawer element
|
||||
*/
|
||||
focusDrawer(drawer) {
|
||||
if (!drawer) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Find first focusable element
|
||||
const focusableSelectors = [
|
||||
'button:not([disabled])',
|
||||
'[href]',
|
||||
'input:not([disabled])',
|
||||
'select:not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
'[tabindex]:not([tabindex="-1"])'
|
||||
].join(', ');
|
||||
|
||||
const focusableElement = drawer.querySelector(focusableSelectors);
|
||||
if (focusableElement) {
|
||||
requestAnimationFrame(() => {
|
||||
focusableElement.focus();
|
||||
});
|
||||
} else {
|
||||
requestAnimationFrame(() => {
|
||||
drawer.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup all drawers
|
||||
*/
|
||||
destroy() {
|
||||
this.closeAll();
|
||||
if (this.escapeHandler) {
|
||||
document.removeEventListener('keydown', this.escapeHandler);
|
||||
this.escapeHandler = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,11 +53,23 @@ export class LazyComponentLoader {
|
||||
* Scan DOM for lazy components
|
||||
*/
|
||||
scanLazyComponents() {
|
||||
// Scan for regular lazy components
|
||||
const lazyElements = document.querySelectorAll('[data-live-component-lazy]');
|
||||
|
||||
lazyElements.forEach(element => {
|
||||
this.registerLazyComponent(element);
|
||||
});
|
||||
|
||||
// Scan for Island components (both lazy and non-lazy)
|
||||
const islandElements = document.querySelectorAll('[data-island-component]');
|
||||
islandElements.forEach(element => {
|
||||
if (element.dataset.liveComponentLazy) {
|
||||
// Lazy Island - register for lazy loading
|
||||
this.registerLazyComponent(element);
|
||||
} else if (element.dataset.liveComponentIsland) {
|
||||
// Non-lazy Island - load immediately
|
||||
this.loadIslandComponentImmediately(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -193,8 +205,14 @@ export class LazyComponentLoader {
|
||||
// Show loading indicator
|
||||
this.showLoadingIndicator(config.element);
|
||||
|
||||
// Check if this is an Island component
|
||||
const isIsland = config.element.dataset.islandComponent === 'true';
|
||||
const endpoint = isIsland
|
||||
? `/live-component/${config.componentId}/island`
|
||||
: `/live-component/${config.componentId}/lazy-load`;
|
||||
|
||||
// Request component HTML from server
|
||||
const response = await fetch(`/live-component/${config.componentId}/lazy-load`, {
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
@@ -218,6 +236,11 @@ export class LazyComponentLoader {
|
||||
// Mark element as regular LiveComponent (no longer lazy)
|
||||
config.element.setAttribute('data-live-component', config.componentId);
|
||||
config.element.removeAttribute('data-live-component-lazy');
|
||||
|
||||
// Keep island-component attribute for isolated initialization
|
||||
if (isIsland) {
|
||||
config.element.setAttribute('data-island-component', 'true');
|
||||
}
|
||||
|
||||
// Copy CSRF token to element
|
||||
if (data.csrf_token) {
|
||||
@@ -231,8 +254,8 @@ export class LazyComponentLoader {
|
||||
config.element.dataset.state = stateJson;
|
||||
}
|
||||
|
||||
// Initialize as regular LiveComponent
|
||||
this.liveComponentManager.init(config.element);
|
||||
// Initialize as regular LiveComponent (or Island if isolated)
|
||||
this.liveComponentManager.init(config.element, { isolated: isIsland });
|
||||
|
||||
// Mark as loaded
|
||||
config.loaded = true;
|
||||
@@ -241,11 +264,11 @@ export class LazyComponentLoader {
|
||||
// Stop observing
|
||||
this.observer.unobserve(config.element);
|
||||
|
||||
console.log(`[LazyLoader] Loaded: ${config.componentId}`);
|
||||
console.log(`[LazyLoader] Loaded: ${config.componentId}${isIsland ? ' (Island)' : ''}`);
|
||||
|
||||
// Dispatch custom event
|
||||
config.element.dispatchEvent(new CustomEvent('livecomponent:lazy:loaded', {
|
||||
detail: { componentId: config.componentId }
|
||||
detail: { componentId: config.componentId, isIsland }
|
||||
}));
|
||||
|
||||
} catch (error) {
|
||||
@@ -266,6 +289,88 @@ export class LazyComponentLoader {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load Island component immediately (non-lazy)
|
||||
*
|
||||
* @param {HTMLElement} element - Island component element
|
||||
*/
|
||||
async loadIslandComponentImmediately(element) {
|
||||
const componentId = element.dataset.liveComponentIsland;
|
||||
if (!componentId) {
|
||||
console.warn('[LazyLoader] Island component missing componentId:', element);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(`[LazyLoader] Loading Island immediately: ${componentId}`);
|
||||
|
||||
// Show loading indicator
|
||||
this.showLoadingIndicator(element);
|
||||
|
||||
// Request component HTML from Island endpoint
|
||||
const response = await fetch(`/live-component/${componentId}/island`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.success) {
|
||||
throw new Error(data.error || 'Failed to load Island component');
|
||||
}
|
||||
|
||||
// Replace placeholder with component HTML
|
||||
element.innerHTML = data.html;
|
||||
|
||||
// Mark element as Island component
|
||||
element.setAttribute('data-live-component', componentId);
|
||||
element.setAttribute('data-island-component', 'true');
|
||||
element.removeAttribute('data-live-component-island');
|
||||
|
||||
// Copy CSRF token to element
|
||||
if (data.csrf_token) {
|
||||
element.dataset.csrfToken = data.csrf_token;
|
||||
}
|
||||
|
||||
// Copy state to element
|
||||
if (data.state) {
|
||||
const stateJson = JSON.stringify(data.state);
|
||||
element.dataset.state = stateJson;
|
||||
}
|
||||
|
||||
// Initialize as isolated Island component
|
||||
this.liveComponentManager.init(element, { isolated: true });
|
||||
|
||||
console.log(`[LazyLoader] Loaded Island: ${componentId}`);
|
||||
|
||||
// Dispatch custom event
|
||||
element.dispatchEvent(new CustomEvent('livecomponent:island:loaded', {
|
||||
detail: { componentId }
|
||||
}));
|
||||
|
||||
} catch (error) {
|
||||
console.error(`[LazyLoader] Failed to load Island ${componentId}:`, error);
|
||||
|
||||
// Show error state
|
||||
this.showError(element, error.message);
|
||||
|
||||
// Dispatch error event
|
||||
element.dispatchEvent(new CustomEvent('livecomponent:island:error', {
|
||||
detail: {
|
||||
componentId,
|
||||
error: error.message
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show placeholder
|
||||
*
|
||||
@@ -415,3 +520,4 @@ export class LazyComponentLoader {
|
||||
|
||||
// Export for use in LiveComponent module
|
||||
export default LazyComponentLoader;
|
||||
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
*/
|
||||
|
||||
import { UIManager } from '../ui/UIManager.js';
|
||||
import { ToastQueue } from './ToastQueue.js';
|
||||
import { ModalManager } from './ModalManager.js';
|
||||
|
||||
export class LiveComponentUIHelper {
|
||||
constructor(liveComponentManager) {
|
||||
@@ -13,6 +15,11 @@ export class LiveComponentUIHelper {
|
||||
this.uiManager = UIManager;
|
||||
this.activeDialogs = new Map(); // componentId → dialog instances
|
||||
this.activeNotifications = new Map(); // componentId → notification instances
|
||||
this.toastQueue = new ToastQueue(5); // Max 5 toasts
|
||||
|
||||
// Use ModalManager with native <dialog> element
|
||||
// Native <dialog> provides automatic backdrop, focus management, and ESC handling
|
||||
this.modalManager = new ModalManager();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -34,27 +41,29 @@ export class LiveComponentUIHelper {
|
||||
onConfirm = null
|
||||
} = options;
|
||||
|
||||
// Create dialog content
|
||||
const dialogContent = this.createDialogContent(title, content, buttons, {
|
||||
onClose,
|
||||
onConfirm
|
||||
});
|
||||
|
||||
// Show modal via UIManager
|
||||
const modal = this.uiManager.open('modal', {
|
||||
content: dialogContent,
|
||||
className: `livecomponent-dialog livecomponent-dialog--${size}`,
|
||||
onClose: () => {
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
this.activeDialogs.delete(componentId);
|
||||
}
|
||||
// Use ModalManager for better stack management
|
||||
const modal = this.modalManager.open(componentId, {
|
||||
title: title,
|
||||
content: content,
|
||||
size: size,
|
||||
buttons: buttons,
|
||||
closeOnBackdrop: closeOnBackdrop,
|
||||
closeOnEscape: closeOnEscape
|
||||
});
|
||||
|
||||
// Store reference
|
||||
this.activeDialogs.set(componentId, modal);
|
||||
|
||||
// Setup onClose callback
|
||||
if (onClose && modal.dialog) {
|
||||
const originalClose = modal.close;
|
||||
modal.close = () => {
|
||||
originalClose.call(modal);
|
||||
onClose();
|
||||
this.activeDialogs.delete(componentId);
|
||||
};
|
||||
}
|
||||
|
||||
return modal;
|
||||
}
|
||||
|
||||
@@ -142,11 +151,9 @@ export class LiveComponentUIHelper {
|
||||
* @param {string} componentId - Component ID
|
||||
*/
|
||||
closeDialog(componentId) {
|
||||
const dialog = this.activeDialogs.get(componentId);
|
||||
if (dialog && typeof dialog.close === 'function') {
|
||||
dialog.close();
|
||||
this.activeDialogs.delete(componentId);
|
||||
}
|
||||
// Use ModalManager to close
|
||||
this.modalManager.close(componentId);
|
||||
this.activeDialogs.delete(componentId);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -164,74 +171,20 @@ export class LiveComponentUIHelper {
|
||||
action = null
|
||||
} = options;
|
||||
|
||||
// Create notification element
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `livecomponent-notification livecomponent-notification--${type} livecomponent-notification--${position}`;
|
||||
notification.setAttribute('role', 'alert');
|
||||
notification.setAttribute('aria-live', 'polite');
|
||||
|
||||
notification.innerHTML = `
|
||||
<div class="notification-content">
|
||||
<span class="notification-message">${message}</span>
|
||||
${action ? `<button class="notification-action">${action.text}</button>` : ''}
|
||||
<button class="notification-close" aria-label="Close">×</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add styles
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
${position.includes('top') ? 'top' : 'bottom'}: 1rem;
|
||||
${position.includes('left') ? 'left' : 'right'}: 1rem;
|
||||
max-width: 400px;
|
||||
padding: 1rem;
|
||||
background: ${this.getNotificationColor(type)};
|
||||
color: white;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
transform: translateY(${position.includes('top') ? '-20px' : '20px'});
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
`;
|
||||
|
||||
// Add to DOM
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Animate in
|
||||
requestAnimationFrame(() => {
|
||||
notification.style.opacity = '1';
|
||||
notification.style.transform = 'translateY(0)';
|
||||
// Use ToastQueue for better management
|
||||
const toast = this.toastQueue.add(componentId, {
|
||||
message: message,
|
||||
type: type,
|
||||
duration: duration,
|
||||
position: position
|
||||
});
|
||||
|
||||
// Setup close button
|
||||
const closeBtn = notification.querySelector('.notification-close');
|
||||
closeBtn.addEventListener('click', () => {
|
||||
this.hideNotification(notification);
|
||||
});
|
||||
|
||||
// Setup action button
|
||||
if (action) {
|
||||
const actionBtn = notification.querySelector('.notification-action');
|
||||
actionBtn.addEventListener('click', () => {
|
||||
if (action.handler) {
|
||||
action.handler();
|
||||
}
|
||||
this.hideNotification(notification);
|
||||
});
|
||||
// Store reference for compatibility
|
||||
if (toast) {
|
||||
this.activeNotifications.set(componentId, toast);
|
||||
}
|
||||
|
||||
// Auto-hide after duration
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
this.hideNotification(notification);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
// Store reference
|
||||
this.activeNotifications.set(componentId, notification);
|
||||
|
||||
return notification;
|
||||
return toast;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -240,31 +193,17 @@ export class LiveComponentUIHelper {
|
||||
* @param {HTMLElement|string} notificationOrComponentId - Notification element or component ID
|
||||
*/
|
||||
hideNotification(notificationOrComponentId) {
|
||||
const notification = typeof notificationOrComponentId === 'string'
|
||||
? this.activeNotifications.get(notificationOrComponentId)
|
||||
: notificationOrComponentId;
|
||||
const componentId = typeof notificationOrComponentId === 'string'
|
||||
? notificationOrComponentId
|
||||
: notificationOrComponentId.dataset?.componentId;
|
||||
|
||||
if (!notification) {
|
||||
if (!componentId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Animate out
|
||||
notification.style.opacity = '0';
|
||||
notification.style.transform = `translateY(${notification.classList.contains('livecomponent-notification--top') ? '-20px' : '20px'})`;
|
||||
|
||||
setTimeout(() => {
|
||||
if (notification.parentNode) {
|
||||
notification.parentNode.removeChild(notification);
|
||||
}
|
||||
|
||||
// Remove from map
|
||||
for (const [componentId, notif] of this.activeNotifications.entries()) {
|
||||
if (notif === notification) {
|
||||
this.activeNotifications.delete(componentId);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, 300);
|
||||
// Use ToastQueue to remove
|
||||
this.toastQueue.remove(componentId);
|
||||
this.activeNotifications.delete(componentId);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -39,13 +39,29 @@ export class LoadingStateManager {
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {HTMLElement} element - Component element
|
||||
* @param {Object} options - Loading options
|
||||
* @param {HTMLElement} actionElement - Optional action element (for per-action indicators)
|
||||
*/
|
||||
showLoading(componentId, element, options = {}) {
|
||||
showLoading(componentId, element, options = {}, actionElement = null) {
|
||||
const config = this.loadingConfigs.get(componentId) || {
|
||||
type: this.config.defaultType,
|
||||
showDelay: this.config.showDelay
|
||||
};
|
||||
|
||||
// Check for per-action indicator (data-lc-indicator)
|
||||
if (actionElement?.dataset.lcIndicator) {
|
||||
const indicatorSelector = actionElement.dataset.lcIndicator;
|
||||
const indicators = document.querySelectorAll(indicatorSelector);
|
||||
indicators.forEach(indicator => {
|
||||
if (indicator instanceof HTMLElement) {
|
||||
indicator.style.display = '';
|
||||
indicator.setAttribute('aria-busy', 'true');
|
||||
indicator.classList.add('lc-indicator-active');
|
||||
}
|
||||
});
|
||||
// Don't show default loading if custom indicator is used
|
||||
return;
|
||||
}
|
||||
|
||||
const loadingType = options.type || config.type;
|
||||
|
||||
// Skip if type is 'none' or optimistic UI is enabled
|
||||
@@ -86,8 +102,21 @@ export class LoadingStateManager {
|
||||
* Hide loading state
|
||||
*
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {HTMLElement} actionElement - Optional action element (for per-action indicators)
|
||||
*/
|
||||
hideLoading(componentId) {
|
||||
hideLoading(componentId, actionElement = null) {
|
||||
// Hide per-action indicators if specified
|
||||
if (actionElement?.dataset.lcIndicator) {
|
||||
const indicatorSelector = actionElement.dataset.lcIndicator;
|
||||
const indicators = document.querySelectorAll(indicatorSelector);
|
||||
indicators.forEach(indicator => {
|
||||
if (indicator instanceof HTMLElement) {
|
||||
indicator.removeAttribute('aria-busy');
|
||||
indicator.classList.remove('lc-indicator-active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hide skeleton loading
|
||||
this.actionLoadingManager.hideLoading(componentId);
|
||||
|
||||
|
||||
270
resources/js/modules/livecomponent/ModalManager.js
Normal file
270
resources/js/modules/livecomponent/ModalManager.js
Normal file
@@ -0,0 +1,270 @@
|
||||
/**
|
||||
* Modal Manager for LiveComponents
|
||||
*
|
||||
* Manages modal stack using native <dialog> element with showModal().
|
||||
*
|
||||
* Native <dialog> Features:
|
||||
* - Automatic backdrop/overlay (::backdrop pseudo-element)
|
||||
* - Automatic focus management (focus trapping)
|
||||
* - Automatic ESC handling (cancel event)
|
||||
* - Native modal semantics (blocks background interaction)
|
||||
* - Better accessibility (ARIA attributes)
|
||||
*
|
||||
* Browser Support:
|
||||
* - Chrome 37+ (2014)
|
||||
* - Firefox 98+ (2022)
|
||||
* - Safari 15.4+ (2022)
|
||||
*/
|
||||
|
||||
export class ModalManager {
|
||||
constructor() {
|
||||
this.modalStack = []; // Array of { componentId, dialogElement, zIndex, closeOnEscape, closeOnBackdrop }
|
||||
this.baseZIndex = 1050; // Bootstrap modal default
|
||||
this.zIndexIncrement = 10;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open modal using native <dialog> element
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {Object} options - Modal options
|
||||
* @returns {Object} Modal instance with dialog element
|
||||
*/
|
||||
open(componentId, options = {}) {
|
||||
const {
|
||||
title = '',
|
||||
content = '',
|
||||
size = 'medium',
|
||||
buttons = [],
|
||||
closeOnBackdrop = true,
|
||||
closeOnEscape = true
|
||||
} = options;
|
||||
|
||||
// Calculate z-index for stacking
|
||||
const zIndex = this.baseZIndex + (this.modalStack.length * this.zIndexIncrement);
|
||||
|
||||
// Create native <dialog> element
|
||||
const dialog = document.createElement('dialog');
|
||||
dialog.className = `livecomponent-modal livecomponent-modal--${size}`;
|
||||
dialog.id = `modal-${componentId}`;
|
||||
dialog.style.zIndex = zIndex.toString();
|
||||
|
||||
// Set content
|
||||
dialog.innerHTML = this.createModalContent(title, content, buttons);
|
||||
|
||||
// Add to DOM
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
// Setup event handlers BEFORE showing modal
|
||||
this.setupDialogHandlers(dialog, componentId, closeOnBackdrop, closeOnEscape, buttons);
|
||||
|
||||
// Show modal using native showModal() - this blocks background interaction
|
||||
dialog.showModal();
|
||||
|
||||
// Track in stack
|
||||
const stackItem = {
|
||||
componentId,
|
||||
dialogElement: dialog,
|
||||
zIndex,
|
||||
closeOnEscape,
|
||||
closeOnBackdrop
|
||||
};
|
||||
this.modalStack.push(stackItem);
|
||||
|
||||
// Focus management (native <dialog> handles focus trapping, but we set initial focus)
|
||||
this.focusModal(dialog);
|
||||
|
||||
// Return wrapper object for compatibility
|
||||
return {
|
||||
dialog: dialog,
|
||||
close: () => this.close(componentId),
|
||||
isOpen: () => dialog.open
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event handlers for dialog element
|
||||
* @param {HTMLDialogElement} dialog - Dialog element
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {boolean} closeOnBackdrop - Whether to close on backdrop click
|
||||
* @param {boolean} closeOnEscape - Whether to close on ESC key
|
||||
* @param {Array} buttons - Button configurations
|
||||
*/
|
||||
setupDialogHandlers(dialog, componentId, closeOnBackdrop, closeOnEscape, buttons) {
|
||||
// Native cancel event (triggered by ESC key)
|
||||
dialog.addEventListener('cancel', (e) => {
|
||||
e.preventDefault();
|
||||
if (closeOnEscape) {
|
||||
this.close(componentId);
|
||||
}
|
||||
});
|
||||
|
||||
// Backdrop click handling
|
||||
// Note: Native <dialog> doesn't have built-in backdrop click handling
|
||||
// We need to check if click target is the dialog element itself (backdrop)
|
||||
if (closeOnBackdrop) {
|
||||
dialog.addEventListener('click', (e) => {
|
||||
// If click target is the dialog element itself (not its children), it's a backdrop click
|
||||
if (e.target === dialog) {
|
||||
this.close(componentId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close button
|
||||
const closeBtn = dialog.querySelector('.modal-close');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
this.close(componentId);
|
||||
});
|
||||
}
|
||||
|
||||
// Button actions
|
||||
dialog.querySelectorAll('[data-modal-action]').forEach((btn, index) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const buttonConfig = buttons[index];
|
||||
if (buttonConfig && buttonConfig.action) {
|
||||
// Trigger action if specified
|
||||
if (buttonConfig.action === 'close') {
|
||||
this.close(componentId);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Close modal and remove from stack
|
||||
* @param {string} componentId - Component ID
|
||||
*/
|
||||
close(componentId) {
|
||||
const index = this.modalStack.findIndex(item => item.componentId === componentId);
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { dialogElement } = this.modalStack[index];
|
||||
|
||||
// Close dialog using native close() method
|
||||
if (dialogElement && dialogElement.open) {
|
||||
dialogElement.close();
|
||||
}
|
||||
|
||||
// Remove from DOM
|
||||
if (dialogElement.parentNode) {
|
||||
dialogElement.parentNode.removeChild(dialogElement);
|
||||
}
|
||||
|
||||
// Remove from stack
|
||||
this.modalStack.splice(index, 1);
|
||||
|
||||
// Focus previous modal or return focus to body
|
||||
if (this.modalStack.length > 0) {
|
||||
const previousModal = this.modalStack[this.modalStack.length - 1];
|
||||
this.focusModal(previousModal.dialogElement);
|
||||
} else {
|
||||
// Return focus to previously focused element or body
|
||||
// Native <dialog> handles this automatically, but we ensure it
|
||||
const activeElement = document.activeElement;
|
||||
if (activeElement && activeElement !== document.body) {
|
||||
activeElement.blur();
|
||||
}
|
||||
document.body.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close all modals
|
||||
*/
|
||||
closeAll() {
|
||||
while (this.modalStack.length > 0) {
|
||||
const { componentId } = this.modalStack[this.modalStack.length - 1];
|
||||
this.close(componentId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get topmost modal
|
||||
* @returns {Object|null}
|
||||
*/
|
||||
getTopModal() {
|
||||
if (this.modalStack.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return this.modalStack[this.modalStack.length - 1];
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if modal is open
|
||||
* @param {string} componentId - Component ID
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isOpen(componentId) {
|
||||
return this.modalStack.some(item => item.componentId === componentId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus modal element
|
||||
* Native <dialog> handles focus trapping automatically, but we set initial focus
|
||||
* @param {HTMLDialogElement} dialog - Dialog element
|
||||
*/
|
||||
focusModal(dialog) {
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Find first focusable element
|
||||
const focusableSelectors = [
|
||||
'button:not([disabled])',
|
||||
'[href]',
|
||||
'input:not([disabled])',
|
||||
'select:not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
'[tabindex]:not([tabindex="-1"])'
|
||||
].join(', ');
|
||||
|
||||
const focusableElement = dialog.querySelector(focusableSelectors);
|
||||
if (focusableElement) {
|
||||
// Small delay to ensure dialog is fully rendered
|
||||
requestAnimationFrame(() => {
|
||||
focusableElement.focus();
|
||||
});
|
||||
} else {
|
||||
// Fallback: focus dialog itself
|
||||
requestAnimationFrame(() => {
|
||||
dialog.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create modal content HTML
|
||||
* @param {string} title - Modal title
|
||||
* @param {string} content - Modal content
|
||||
* @param {Array} buttons - Button configurations
|
||||
* @returns {string}
|
||||
*/
|
||||
createModalContent(title, content, buttons) {
|
||||
const buttonsHtml = buttons.map((btn, index) => {
|
||||
const btnClass = btn.class || btn.className || 'btn-secondary';
|
||||
return `<button class="btn ${btnClass}" data-modal-action="${index}">${btn.text || 'Button'}</button>`;
|
||||
}).join('');
|
||||
|
||||
return `
|
||||
<div class="livecomponent-modal-content">
|
||||
${title ? `<div class="modal-header">
|
||||
<h3 class="modal-title">${title}</h3>
|
||||
<button class="modal-close" aria-label="Close">×</button>
|
||||
</div>` : ''}
|
||||
<div class="modal-body">${content}</div>
|
||||
${buttons.length > 0 ? `<div class="modal-footer">${buttonsHtml}</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup all modals
|
||||
*/
|
||||
destroy() {
|
||||
this.closeAll();
|
||||
}
|
||||
}
|
||||
346
resources/js/modules/livecomponent/PopoverManager.js
Normal file
346
resources/js/modules/livecomponent/PopoverManager.js
Normal file
@@ -0,0 +1,346 @@
|
||||
/**
|
||||
* Popover Manager for LiveComponents
|
||||
*
|
||||
* Manages popover components with:
|
||||
* - Native Popover API support (Chrome 114+)
|
||||
* - Fallback for older browsers
|
||||
* - Position calculation relative to anchor
|
||||
* - Auto-repositioning on scroll/resize
|
||||
* - Light-dismiss handling
|
||||
*/
|
||||
|
||||
/**
|
||||
* Check if Popover API is supported
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function supportsPopoverAPI() {
|
||||
// Check for popover property
|
||||
if (HTMLElement.prototype.hasOwnProperty('popover')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check for showPopover method
|
||||
if ('showPopover' in HTMLElement.prototype) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check for CSS @supports (only in browser environment)
|
||||
if (typeof CSS !== 'undefined' && CSS.supports) {
|
||||
try {
|
||||
return CSS.supports('popover', 'auto');
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export class PopoverManager {
|
||||
constructor() {
|
||||
this.popovers = new Map(); // componentId → popover element
|
||||
this.usePopoverAPI = supportsPopoverAPI();
|
||||
this.resizeHandler = null;
|
||||
this.scrollHandler = null;
|
||||
|
||||
if (this.usePopoverAPI) {
|
||||
console.log('[PopoverManager] Using native Popover API');
|
||||
} else {
|
||||
console.log('[PopoverManager] Using fallback implementation');
|
||||
this.setupGlobalHandlers();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show popover
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {Object} options - Popover options
|
||||
* @returns {Object} Popover instance
|
||||
*/
|
||||
show(componentId, options = {}) {
|
||||
const {
|
||||
content = '',
|
||||
title = '',
|
||||
anchorId = null,
|
||||
position = 'top',
|
||||
showArrow = true,
|
||||
offset = 8,
|
||||
closeOnOutsideClick = true,
|
||||
zIndex = 1060
|
||||
} = options;
|
||||
|
||||
if (!anchorId) {
|
||||
console.warn('[PopoverManager] Popover requires anchorId');
|
||||
return null;
|
||||
}
|
||||
|
||||
const anchor = document.getElementById(anchorId);
|
||||
if (!anchor) {
|
||||
console.warn(`[PopoverManager] Anchor element not found: ${anchorId}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
// Remove existing popover for this component
|
||||
this.hide(componentId);
|
||||
|
||||
if (this.usePopoverAPI) {
|
||||
return this.showWithPopoverAPI(componentId, anchor, content, title, position, showArrow, offset, zIndex);
|
||||
} else {
|
||||
return this.showWithFallback(componentId, anchor, content, title, position, showArrow, offset, closeOnOutsideClick, zIndex);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show popover using native Popover API
|
||||
*/
|
||||
showWithPopoverAPI(componentId, anchor, content, title, position, showArrow, offset, zIndex) {
|
||||
const popover = document.createElement('div');
|
||||
popover.setAttribute('popover', 'auto'); // 'auto' = light-dismiss enabled
|
||||
popover.className = `livecomponent-popover popover--${position}`;
|
||||
popover.id = `popover-${componentId}`;
|
||||
popover.style.zIndex = zIndex.toString();
|
||||
|
||||
popover.innerHTML = `
|
||||
${showArrow ? `<div class="popover-arrow popover-arrow--${position}"></div>` : ''}
|
||||
${title ? `<div class="popover-header"><h4>${title}</h4></div>` : ''}
|
||||
<div class="popover-body">${content}</div>
|
||||
`;
|
||||
|
||||
// Set anchor using anchor attribute (when supported)
|
||||
if (popover.setPopoverAnchor) {
|
||||
popover.setPopoverAnchor(anchor);
|
||||
} else {
|
||||
// Fallback: position manually
|
||||
this.positionPopover(popover, anchor, position, offset);
|
||||
}
|
||||
|
||||
document.body.appendChild(popover);
|
||||
popover.showPopover();
|
||||
|
||||
this.popovers.set(componentId, popover);
|
||||
|
||||
// Setup repositioning on scroll/resize
|
||||
this.setupRepositioning(popover, anchor, position, offset);
|
||||
|
||||
return {
|
||||
element: popover,
|
||||
hide: () => this.hide(componentId),
|
||||
isVisible: () => popover.matches(':popover-open')
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Show popover using fallback implementation
|
||||
*/
|
||||
showWithFallback(componentId, anchor, content, title, position, showArrow, offset, closeOnOutsideClick, zIndex) {
|
||||
const popover = document.createElement('div');
|
||||
popover.className = `livecomponent-popover popover-fallback popover--${position}`;
|
||||
popover.id = `popover-${componentId}`;
|
||||
popover.style.zIndex = zIndex.toString();
|
||||
popover.setAttribute('role', 'tooltip');
|
||||
popover.setAttribute('aria-hidden', 'false');
|
||||
|
||||
popover.innerHTML = `
|
||||
${showArrow ? `<div class="popover-arrow popover-arrow--${position}"></div>` : ''}
|
||||
${title ? `<div class="popover-header"><h4>${title}</h4></div>` : ''}
|
||||
<div class="popover-body">${content}</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(popover);
|
||||
|
||||
// Position popover
|
||||
this.positionPopover(popover, anchor, position, offset);
|
||||
|
||||
// Show popover
|
||||
popover.style.display = 'block';
|
||||
popover.classList.add('popover--show');
|
||||
|
||||
this.popovers.set(componentId, popover);
|
||||
|
||||
// Setup click-outside handling
|
||||
if (closeOnOutsideClick) {
|
||||
const clickHandler = (e) => {
|
||||
if (!popover.contains(e.target) && !anchor.contains(e.target)) {
|
||||
this.hide(componentId);
|
||||
}
|
||||
};
|
||||
setTimeout(() => {
|
||||
document.addEventListener('click', clickHandler);
|
||||
popover._clickHandler = clickHandler;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// Setup repositioning on scroll/resize
|
||||
this.setupRepositioning(popover, anchor, position, offset);
|
||||
|
||||
return {
|
||||
element: popover,
|
||||
hide: () => this.hide(componentId),
|
||||
isVisible: () => popover.classList.contains('popover--show')
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide popover
|
||||
* @param {string} componentId - Component ID
|
||||
*/
|
||||
hide(componentId) {
|
||||
const popover = this.popovers.get(componentId);
|
||||
if (!popover) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.usePopoverAPI) {
|
||||
if (popover.hidePopover) {
|
||||
popover.hidePopover();
|
||||
}
|
||||
} else {
|
||||
popover.classList.remove('popover--show');
|
||||
popover.style.display = 'none';
|
||||
|
||||
// Remove click handler
|
||||
if (popover._clickHandler) {
|
||||
document.removeEventListener('click', popover._clickHandler);
|
||||
delete popover._clickHandler;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove from DOM
|
||||
if (popover.parentNode) {
|
||||
popover.parentNode.removeChild(popover);
|
||||
}
|
||||
|
||||
this.popovers.delete(componentId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Position popover relative to anchor
|
||||
* @param {HTMLElement} popover - Popover element
|
||||
* @param {HTMLElement} anchor - Anchor element
|
||||
* @param {string} position - Position (top, bottom, left, right)
|
||||
* @param {number} offset - Offset in pixels
|
||||
*/
|
||||
positionPopover(popover, anchor, position, offset) {
|
||||
const anchorRect = anchor.getBoundingClientRect();
|
||||
const popoverRect = popover.getBoundingClientRect();
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
let top = 0;
|
||||
let left = 0;
|
||||
|
||||
switch (position) {
|
||||
case 'top':
|
||||
top = anchorRect.top - popoverRect.height - offset;
|
||||
left = anchorRect.left + (anchorRect.width / 2) - (popoverRect.width / 2);
|
||||
break;
|
||||
case 'bottom':
|
||||
top = anchorRect.bottom + offset;
|
||||
left = anchorRect.left + (anchorRect.width / 2) - (popoverRect.width / 2);
|
||||
break;
|
||||
case 'left':
|
||||
top = anchorRect.top + (anchorRect.height / 2) - (popoverRect.height / 2);
|
||||
left = anchorRect.left - popoverRect.width - offset;
|
||||
break;
|
||||
case 'right':
|
||||
top = anchorRect.top + (anchorRect.height / 2) - (popoverRect.height / 2);
|
||||
left = anchorRect.right + offset;
|
||||
break;
|
||||
case 'auto':
|
||||
// Auto-position: choose best position based on viewport
|
||||
const positions = ['bottom', 'top', 'right', 'left'];
|
||||
for (const pos of positions) {
|
||||
const testPos = this.calculatePosition(anchorRect, popoverRect, pos, offset);
|
||||
if (this.isPositionValid(testPos, popoverRect, viewportWidth, viewportHeight)) {
|
||||
position = pos;
|
||||
({ top, left } = testPos);
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Ensure popover stays within viewport
|
||||
left = Math.max(8, Math.min(left, viewportWidth - popoverRect.width - 8));
|
||||
top = Math.max(8, Math.min(top, viewportHeight - popoverRect.height - 8));
|
||||
|
||||
popover.style.position = 'fixed';
|
||||
popover.style.top = `${top}px`;
|
||||
popover.style.left = `${left}px`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate position for a given direction
|
||||
*/
|
||||
calculatePosition(anchorRect, popoverRect, position, offset) {
|
||||
let top = 0;
|
||||
let left = 0;
|
||||
|
||||
switch (position) {
|
||||
case 'top':
|
||||
top = anchorRect.top - popoverRect.height - offset;
|
||||
left = anchorRect.left + (anchorRect.width / 2) - (popoverRect.width / 2);
|
||||
break;
|
||||
case 'bottom':
|
||||
top = anchorRect.bottom + offset;
|
||||
left = anchorRect.left + (anchorRect.width / 2) - (popoverRect.width / 2);
|
||||
break;
|
||||
case 'left':
|
||||
top = anchorRect.top + (anchorRect.height / 2) - (popoverRect.height / 2);
|
||||
left = anchorRect.left - popoverRect.width - offset;
|
||||
break;
|
||||
case 'right':
|
||||
top = anchorRect.top + (anchorRect.height / 2) - (popoverRect.height / 2);
|
||||
left = anchorRect.right + offset;
|
||||
break;
|
||||
}
|
||||
|
||||
return { top, left };
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if position is valid (within viewport)
|
||||
*/
|
||||
isPositionValid({ top, left }, popoverRect, viewportWidth, viewportHeight) {
|
||||
return top >= 0 &&
|
||||
left >= 0 &&
|
||||
top + popoverRect.height <= viewportHeight &&
|
||||
left + popoverRect.width <= viewportWidth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup repositioning on scroll/resize
|
||||
*/
|
||||
setupRepositioning(popover, anchor, position, offset) {
|
||||
const reposition = () => {
|
||||
if (this.popovers.has(popover.id.replace('popover-', ''))) {
|
||||
this.positionPopover(popover, anchor, position, offset);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', reposition, { passive: true });
|
||||
window.addEventListener('resize', reposition);
|
||||
|
||||
popover._repositionHandlers = {
|
||||
scroll: reposition,
|
||||
resize: reposition
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup global handlers for fallback mode
|
||||
*/
|
||||
setupGlobalHandlers() {
|
||||
// Global handlers are set up per-popover in showWithFallback
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup all popovers
|
||||
*/
|
||||
destroy() {
|
||||
for (const componentId of this.popovers.keys()) {
|
||||
this.hide(componentId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
347
resources/js/modules/livecomponent/ProgressiveEnhancement.js
Normal file
347
resources/js/modules/livecomponent/ProgressiveEnhancement.js
Normal file
@@ -0,0 +1,347 @@
|
||||
/**
|
||||
* Progressive Enhancement for LiveComponents
|
||||
*
|
||||
* Provides automatic AJAX handling for links and forms within data-lc-boost containers.
|
||||
* Falls back gracefully to normal navigation/submit when JavaScript is disabled.
|
||||
*
|
||||
* Features:
|
||||
* - Automatic AJAX for links and forms
|
||||
* - Graceful degradation (works without JS)
|
||||
* - Integration with LiveComponents system
|
||||
* - SPA Router coordination (if available)
|
||||
*/
|
||||
|
||||
export class ProgressiveEnhancement {
|
||||
constructor(liveComponentManager) {
|
||||
this.liveComponentManager = liveComponentManager;
|
||||
this.boostContainers = new Set();
|
||||
this.initialized = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize progressive enhancement
|
||||
*
|
||||
* Sets up event listeners for boost containers and their links/forms.
|
||||
*/
|
||||
init() {
|
||||
if (this.initialized) {
|
||||
console.warn('[ProgressiveEnhancement] Already initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
// Find all boost containers
|
||||
this.findBoostContainers();
|
||||
|
||||
// Setup mutation observer to handle dynamically added boost containers
|
||||
this.setupMutationObserver();
|
||||
|
||||
// Setup global click handler for links
|
||||
document.addEventListener('click', (e) => this.handleLinkClick(e), true);
|
||||
|
||||
// Setup global submit handler for forms
|
||||
document.addEventListener('submit', (e) => this.handleFormSubmit(e), true);
|
||||
|
||||
this.initialized = true;
|
||||
console.log('[ProgressiveEnhancement] Initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Find all boost containers and setup handlers
|
||||
*/
|
||||
findBoostContainers() {
|
||||
const containers = document.querySelectorAll('[data-lc-boost="true"]');
|
||||
containers.forEach(container => {
|
||||
this.setupBoostContainer(container);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup boost container
|
||||
*
|
||||
* @param {HTMLElement} container - Boost container element
|
||||
*/
|
||||
setupBoostContainer(container) {
|
||||
if (this.boostContainers.has(container)) {
|
||||
return; // Already setup
|
||||
}
|
||||
|
||||
this.boostContainers.add(container);
|
||||
|
||||
// Mark links and forms as boosted (for identification)
|
||||
container.querySelectorAll('a[href], form[action]').forEach(element => {
|
||||
if (!element.hasAttribute('data-lc-boost')) {
|
||||
element.setAttribute('data-lc-boost', 'true');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup mutation observer to detect new boost containers
|
||||
*/
|
||||
setupMutationObserver() {
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
mutation.addedNodes.forEach((node) => {
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
// Check if node itself is a boost container
|
||||
if (node.hasAttribute && node.hasAttribute('data-lc-boost') &&
|
||||
node.getAttribute('data-lc-boost') === 'true') {
|
||||
this.setupBoostContainer(node);
|
||||
}
|
||||
|
||||
// Check for boost containers within added node
|
||||
const boostContainers = node.querySelectorAll?.('[data-lc-boost="true"]');
|
||||
if (boostContainers) {
|
||||
boostContainers.forEach(container => {
|
||||
this.setupBoostContainer(container);
|
||||
});
|
||||
}
|
||||
|
||||
// Check for links/forms within boost containers
|
||||
const links = node.querySelectorAll?.('a[href], form[action]');
|
||||
if (links) {
|
||||
links.forEach(element => {
|
||||
const boostContainer = element.closest('[data-lc-boost="true"]');
|
||||
if (boostContainer && !element.hasAttribute('data-lc-boost')) {
|
||||
element.setAttribute('data-lc-boost', 'true');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle link clicks
|
||||
*
|
||||
* @param {Event} event - Click event
|
||||
*/
|
||||
handleLinkClick(event) {
|
||||
const link = event.target.closest('a[href]');
|
||||
if (!link) return;
|
||||
|
||||
// Check if link is in a boost container
|
||||
const boostContainer = link.closest('[data-lc-boost="true"]');
|
||||
if (!boostContainer) return;
|
||||
|
||||
// Check if link explicitly opts out
|
||||
if (link.hasAttribute('data-lc-boost') && link.getAttribute('data-lc-boost') === 'false') {
|
||||
return; // Let normal navigation happen
|
||||
}
|
||||
|
||||
// Check for special link types that should not be boosted
|
||||
const href = link.getAttribute('href');
|
||||
if (!href || href === '#' || href.startsWith('javascript:') || href.startsWith('mailto:') || href.startsWith('tel:')) {
|
||||
return; // Let normal behavior happen
|
||||
}
|
||||
|
||||
// Check if target is _blank (new window)
|
||||
if (link.getAttribute('target') === '_blank') {
|
||||
return; // Let normal behavior happen
|
||||
}
|
||||
|
||||
// Prevent default navigation
|
||||
event.preventDefault();
|
||||
|
||||
// Try to use SPA Router if available
|
||||
if (window.SPARouter && typeof window.SPARouter.navigate === 'function') {
|
||||
window.SPARouter.navigate(href);
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback: Use fetch to load content
|
||||
this.loadContentViaAjax(href, link);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle form submissions
|
||||
*
|
||||
* @param {Event} event - Submit event
|
||||
*/
|
||||
handleFormSubmit(event) {
|
||||
const form = event.target;
|
||||
if (!form || form.tagName !== 'FORM') return;
|
||||
|
||||
// Check if form is in a boost container
|
||||
const boostContainer = form.closest('[data-lc-boost="true"]');
|
||||
if (!boostContainer) return;
|
||||
|
||||
// Check if form explicitly opts out
|
||||
if (form.hasAttribute('data-lc-boost') && form.getAttribute('data-lc-boost') === 'false') {
|
||||
return; // Let normal submit happen
|
||||
}
|
||||
|
||||
// Check if form has data-live-action (handled by LiveComponents)
|
||||
if (form.hasAttribute('data-live-action')) {
|
||||
return; // Let LiveComponents handle it
|
||||
}
|
||||
|
||||
// Prevent default submission
|
||||
event.preventDefault();
|
||||
|
||||
// Submit form via AJAX
|
||||
this.submitFormViaAjax(form);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load content via AJAX
|
||||
*
|
||||
* @param {string} url - URL to load
|
||||
* @param {HTMLElement} link - Link element that triggered the load
|
||||
*/
|
||||
async loadContentViaAjax(url, link) {
|
||||
try {
|
||||
// Show loading state
|
||||
link.setAttribute('aria-busy', 'true');
|
||||
link.classList.add('lc-loading');
|
||||
|
||||
// Fetch content
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Accept': 'text/html'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const html = await response.text();
|
||||
|
||||
// Try to extract main content (look for <main> tag)
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const mainContent = doc.querySelector('main') || doc.body;
|
||||
|
||||
// Update page content
|
||||
const currentMain = document.querySelector('main') || document.body;
|
||||
if (currentMain) {
|
||||
currentMain.innerHTML = mainContent.innerHTML;
|
||||
} else {
|
||||
document.body.innerHTML = mainContent.innerHTML;
|
||||
}
|
||||
|
||||
// Update URL without reload
|
||||
window.history.pushState({}, '', url);
|
||||
|
||||
// Reinitialize LiveComponents
|
||||
if (this.liveComponentManager) {
|
||||
const components = document.querySelectorAll('[data-live-component]');
|
||||
components.forEach(component => {
|
||||
this.liveComponentManager.init(component);
|
||||
});
|
||||
}
|
||||
|
||||
// Dispatch custom event
|
||||
window.dispatchEvent(new CustomEvent('lc:boost:navigated', {
|
||||
detail: { url, link }
|
||||
}));
|
||||
|
||||
} catch (error) {
|
||||
console.error('[ProgressiveEnhancement] Failed to load content:', error);
|
||||
|
||||
// Fallback to normal navigation on error
|
||||
window.location.href = url;
|
||||
} finally {
|
||||
// Remove loading state
|
||||
link.removeAttribute('aria-busy');
|
||||
link.classList.remove('lc-loading');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit form via AJAX
|
||||
*
|
||||
* @param {HTMLFormElement} form - Form element
|
||||
*/
|
||||
async submitFormViaAjax(form) {
|
||||
try {
|
||||
// Show loading state
|
||||
form.setAttribute('aria-busy', 'true');
|
||||
form.classList.add('lc-loading');
|
||||
|
||||
const formData = new FormData(form);
|
||||
const method = form.method.toUpperCase() || 'POST';
|
||||
const action = form.action || window.location.href;
|
||||
|
||||
// Fetch response
|
||||
const response = await fetch(action, {
|
||||
method: method,
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Accept': 'text/html'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const html = await response.text();
|
||||
|
||||
// Check if response is a redirect
|
||||
if (response.redirected) {
|
||||
// Follow redirect
|
||||
await this.loadContentViaAjax(response.url, form);
|
||||
return;
|
||||
}
|
||||
|
||||
// Try to extract main content
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const mainContent = doc.querySelector('main') || doc.body;
|
||||
|
||||
// Update page content
|
||||
const currentMain = document.querySelector('main') || document.body;
|
||||
if (currentMain) {
|
||||
currentMain.innerHTML = mainContent.innerHTML;
|
||||
} else {
|
||||
document.body.innerHTML = mainContent.innerHTML;
|
||||
}
|
||||
|
||||
// Update URL if form has action
|
||||
if (form.action && form.action !== window.location.href) {
|
||||
window.history.pushState({}, '', form.action);
|
||||
}
|
||||
|
||||
// Reinitialize LiveComponents
|
||||
if (this.liveComponentManager) {
|
||||
const components = document.querySelectorAll('[data-live-component]');
|
||||
components.forEach(component => {
|
||||
this.liveComponentManager.init(component);
|
||||
});
|
||||
}
|
||||
|
||||
// Dispatch custom event
|
||||
window.dispatchEvent(new CustomEvent('lc:boost:submitted', {
|
||||
detail: { form, action }
|
||||
}));
|
||||
|
||||
} catch (error) {
|
||||
console.error('[ProgressiveEnhancement] Failed to submit form:', error);
|
||||
|
||||
// Fallback to normal submit on error
|
||||
form.submit();
|
||||
} finally {
|
||||
// Remove loading state
|
||||
form.removeAttribute('aria-busy');
|
||||
form.classList.remove('lc-loading');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ProgressiveEnhancement;
|
||||
|
||||
|
||||
|
||||
|
||||
288
resources/js/modules/livecomponent/ToastQueue.js
Normal file
288
resources/js/modules/livecomponent/ToastQueue.js
Normal file
@@ -0,0 +1,288 @@
|
||||
/**
|
||||
* Toast Queue Manager
|
||||
*
|
||||
* Manages multiple toast notifications with:
|
||||
* - Queue system for multiple toasts
|
||||
* - Position management (stacking toasts)
|
||||
* - Auto-dismiss with queue management
|
||||
* - Maximum number of simultaneous toasts
|
||||
*/
|
||||
|
||||
export class ToastQueue {
|
||||
constructor(maxToasts = 5) {
|
||||
this.maxToasts = maxToasts;
|
||||
this.queue = [];
|
||||
this.activeToasts = new Map(); // componentId → toast element
|
||||
this.positionOffsets = new Map(); // position → current offset
|
||||
}
|
||||
|
||||
/**
|
||||
* Add toast to queue
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {Object} options - Toast options
|
||||
* @returns {HTMLElement|null} Toast element or null if queue full
|
||||
*/
|
||||
add(componentId, options = {}) {
|
||||
const {
|
||||
message = '',
|
||||
type = 'info',
|
||||
duration = 5000,
|
||||
position = 'top-right'
|
||||
} = options;
|
||||
|
||||
// Check if we already have a toast for this component
|
||||
if (this.activeToasts.has(componentId)) {
|
||||
// Replace existing toast
|
||||
this.remove(componentId);
|
||||
}
|
||||
|
||||
// Check if we've reached max toasts for this position
|
||||
const positionCount = this.getPositionCount(position);
|
||||
if (positionCount >= this.maxToasts) {
|
||||
// Remove oldest toast at this position
|
||||
this.removeOldestAtPosition(position);
|
||||
}
|
||||
|
||||
// Create toast element
|
||||
const toast = this.createToastElement(message, type, position, componentId);
|
||||
|
||||
// Calculate offset for stacking
|
||||
const offset = this.getNextOffset(position);
|
||||
this.setToastPosition(toast, position, offset);
|
||||
|
||||
// Add to DOM
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Animate in
|
||||
requestAnimationFrame(() => {
|
||||
toast.style.opacity = '1';
|
||||
toast.style.transform = 'translateY(0)';
|
||||
});
|
||||
|
||||
// Store reference
|
||||
this.activeToasts.set(componentId, toast);
|
||||
this.updatePositionOffset(position, offset);
|
||||
|
||||
// Setup auto-dismiss
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
this.remove(componentId);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
// Setup close button
|
||||
const closeBtn = toast.querySelector('.toast-close');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
this.remove(componentId);
|
||||
});
|
||||
}
|
||||
|
||||
return toast;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove toast
|
||||
* @param {string} componentId - Component ID
|
||||
*/
|
||||
remove(componentId) {
|
||||
const toast = this.activeToasts.get(componentId);
|
||||
if (!toast) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Animate out
|
||||
toast.style.opacity = '0';
|
||||
const position = this.getToastPosition(toast);
|
||||
toast.style.transform = `translateY(${position.includes('top') ? '-20px' : '20px'})`;
|
||||
|
||||
setTimeout(() => {
|
||||
if (toast.parentNode) {
|
||||
toast.parentNode.removeChild(toast);
|
||||
}
|
||||
this.activeToasts.delete(componentId);
|
||||
this.recalculateOffsets(position);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove all toasts
|
||||
*/
|
||||
clear() {
|
||||
for (const componentId of this.activeToasts.keys()) {
|
||||
this.remove(componentId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove oldest toast at position
|
||||
* @param {string} position - Position
|
||||
*/
|
||||
removeOldestAtPosition(position) {
|
||||
let oldestToast = null;
|
||||
let oldestComponentId = null;
|
||||
let oldestTimestamp = Infinity;
|
||||
|
||||
for (const [componentId, toast] of this.activeToasts.entries()) {
|
||||
if (this.getToastPosition(toast) === position) {
|
||||
const timestamp = parseInt(toast.dataset.timestamp || '0');
|
||||
if (timestamp < oldestTimestamp) {
|
||||
oldestTimestamp = timestamp;
|
||||
oldestToast = toast;
|
||||
oldestComponentId = componentId;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (oldestComponentId) {
|
||||
this.remove(oldestComponentId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get count of toasts at position
|
||||
* @param {string} position - Position
|
||||
* @returns {number}
|
||||
*/
|
||||
getPositionCount(position) {
|
||||
let count = 0;
|
||||
for (const toast of this.activeToasts.values()) {
|
||||
if (this.getToastPosition(toast) === position) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get next offset for position
|
||||
* @param {string} position - Position
|
||||
* @returns {number}
|
||||
*/
|
||||
getNextOffset(position) {
|
||||
const currentOffset = this.positionOffsets.get(position) || 0;
|
||||
return currentOffset + 80; // 80px spacing between toasts
|
||||
}
|
||||
|
||||
/**
|
||||
* Update position offset
|
||||
* @param {string} position - Position
|
||||
* @param {number} offset - Offset value
|
||||
*/
|
||||
updatePositionOffset(position, offset) {
|
||||
this.positionOffsets.set(position, offset);
|
||||
}
|
||||
|
||||
/**
|
||||
* Recalculate offsets for position after removal
|
||||
* @param {string} position - Position
|
||||
*/
|
||||
recalculateOffsets(position) {
|
||||
const toastsAtPosition = [];
|
||||
for (const [componentId, toast] of this.activeToasts.entries()) {
|
||||
if (this.getToastPosition(toast) === position) {
|
||||
toastsAtPosition.push({ componentId, toast });
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by DOM order
|
||||
toastsAtPosition.sort((a, b) => {
|
||||
const positionA = a.toast.compareDocumentPosition(b.toast);
|
||||
return positionA & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
|
||||
});
|
||||
|
||||
// Recalculate offsets
|
||||
let offset = 0;
|
||||
for (const { toast } of toastsAtPosition) {
|
||||
this.setToastPosition(toast, position, offset);
|
||||
offset += 80;
|
||||
}
|
||||
|
||||
this.positionOffsets.set(position, offset);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create toast element
|
||||
* @param {string} message - Toast message
|
||||
* @param {string} type - Toast type
|
||||
* @param {string} position - Position
|
||||
* @param {string} componentId - Component ID
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
createToastElement(message, type, position, componentId) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast-queue-toast toast-queue-toast--${type} toast-queue-toast--${position}`;
|
||||
toast.setAttribute('role', 'alert');
|
||||
toast.setAttribute('aria-live', 'polite');
|
||||
toast.dataset.componentId = componentId;
|
||||
toast.dataset.timestamp = Date.now().toString();
|
||||
|
||||
const colors = {
|
||||
info: '#3b82f6',
|
||||
success: '#10b981',
|
||||
warning: '#f59e0b',
|
||||
error: '#ef4444'
|
||||
};
|
||||
|
||||
toast.innerHTML = `
|
||||
<div class="toast-content">
|
||||
<span class="toast-message">${message}</span>
|
||||
<button class="toast-close" aria-label="Close">×</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
${position.includes('top') ? 'top' : 'bottom'}: 1rem;
|
||||
${position.includes('left') ? 'left' : 'right'}: 1rem;
|
||||
max-width: 400px;
|
||||
padding: 1rem;
|
||||
background: ${colors[type] || colors.info};
|
||||
color: white;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
transform: translateY(${position.includes('top') ? '-20px' : '20px'});
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
`;
|
||||
|
||||
return toast;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set toast position with offset
|
||||
* @param {HTMLElement} toast - Toast element
|
||||
* @param {string} position - Position
|
||||
* @param {number} offset - Offset in pixels
|
||||
*/
|
||||
setToastPosition(toast, position, offset) {
|
||||
if (position.includes('top')) {
|
||||
toast.style.top = `${1 + offset / 16}rem`; // Convert px to rem (assuming 16px base)
|
||||
} else {
|
||||
toast.style.bottom = `${1 + offset / 16}rem`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get toast position from element
|
||||
* @param {HTMLElement} toast - Toast element
|
||||
* @returns {string}
|
||||
*/
|
||||
getToastPosition(toast) {
|
||||
if (toast.classList.contains('toast-queue-toast--top-right')) {
|
||||
return 'top-right';
|
||||
}
|
||||
if (toast.classList.contains('toast-queue-toast--top-left')) {
|
||||
return 'top-left';
|
||||
}
|
||||
if (toast.classList.contains('toast-queue-toast--bottom-right')) {
|
||||
return 'bottom-right';
|
||||
}
|
||||
if (toast.classList.contains('toast-queue-toast--bottom-left')) {
|
||||
return 'bottom-left';
|
||||
}
|
||||
return 'top-right'; // default
|
||||
}
|
||||
}
|
||||
|
||||
299
resources/js/modules/livecomponent/TriggerManager.js
Normal file
299
resources/js/modules/livecomponent/TriggerManager.js
Normal file
@@ -0,0 +1,299 @@
|
||||
/**
|
||||
* Trigger Manager for LiveComponents
|
||||
*
|
||||
* Handles advanced trigger options:
|
||||
* - delay: Delay before execution
|
||||
* - throttle: Throttle instead of debounce
|
||||
* - once: Execute only once
|
||||
* - changed: Only execute on value change
|
||||
* - from: Event from another element
|
||||
* - load: Execute on element load
|
||||
*/
|
||||
|
||||
export class TriggerManager {
|
||||
constructor() {
|
||||
this.triggeredOnce = new Set(); // Track elements that have triggered once
|
||||
this.throttleTimers = new Map(); // Track throttle timers
|
||||
this.lastValues = new Map(); // Track last values for 'changed' trigger
|
||||
this.loadHandled = new Set(); // Track elements that have handled load event
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup trigger for an element
|
||||
*
|
||||
* @param {HTMLElement} element - Element to setup trigger for
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {string} action - Action name
|
||||
* @param {Function} handler - Action handler function
|
||||
* @param {string} defaultEvent - Default event type (click, input, change, etc.)
|
||||
*/
|
||||
setupTrigger(element, componentId, action, handler, defaultEvent = 'click') {
|
||||
// Parse trigger options
|
||||
const delay = this.parseDelay(element.dataset.lcTriggerDelay);
|
||||
const throttle = this.parseThrottle(element.dataset.lcTriggerThrottle);
|
||||
const once = element.dataset.lcTriggerOnce === 'true';
|
||||
const changed = element.dataset.lcTriggerChanged === 'true';
|
||||
const from = element.dataset.lcTriggerFrom;
|
||||
const load = element.dataset.lcTriggerLoad === 'true';
|
||||
|
||||
// Handle 'once' trigger - check if already triggered
|
||||
if (once) {
|
||||
const triggerKey = `${componentId}_${action}_${this.getElementKey(element)}`;
|
||||
if (this.triggeredOnce.has(triggerKey)) {
|
||||
return; // Already triggered, don't setup again
|
||||
}
|
||||
}
|
||||
|
||||
// Handle 'load' trigger
|
||||
if (load) {
|
||||
const loadKey = `${componentId}_${action}_${this.getElementKey(element)}`;
|
||||
if (!this.loadHandled.has(loadKey)) {
|
||||
this.loadHandled.add(loadKey);
|
||||
// Execute immediately if element is already loaded
|
||||
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
||||
this.executeWithOptions(element, componentId, action, handler, delay, throttle, changed);
|
||||
} else {
|
||||
// Wait for load
|
||||
window.addEventListener('load', () => {
|
||||
this.executeWithOptions(element, componentId, action, handler, delay, throttle, changed);
|
||||
}, { once: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle 'from' trigger - delegate event from another element
|
||||
if (from) {
|
||||
const sourceElement = document.querySelector(from);
|
||||
if (sourceElement) {
|
||||
this.setupDelegatedTrigger(sourceElement, element, componentId, action, handler, defaultEvent, delay, throttle, changed);
|
||||
return; // Don't setup direct trigger
|
||||
} else {
|
||||
console.warn(`[TriggerManager] Source element not found for trigger-from: ${from}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Setup direct trigger
|
||||
const eventType = this.getEventType(element, defaultEvent);
|
||||
const wrappedHandler = (e) => {
|
||||
// Check 'once' trigger
|
||||
if (once) {
|
||||
const triggerKey = `${componentId}_${action}_${this.getElementKey(element)}`;
|
||||
if (this.triggeredOnce.has(triggerKey)) {
|
||||
return; // Already triggered
|
||||
}
|
||||
this.triggeredOnce.add(triggerKey);
|
||||
}
|
||||
|
||||
this.executeWithOptions(element, componentId, action, handler, delay, throttle, changed, e);
|
||||
};
|
||||
|
||||
element.addEventListener(eventType, wrappedHandler);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup delegated trigger (trigger-from)
|
||||
*
|
||||
* @param {HTMLElement} sourceElement - Element that triggers the event
|
||||
* @param {HTMLElement} targetElement - Element that receives the action
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {string} action - Action name
|
||||
* @param {Function} handler - Action handler
|
||||
* @param {string} eventType - Event type
|
||||
* @param {number} delay - Delay in ms
|
||||
* @param {number} throttle - Throttle in ms
|
||||
* @param {boolean} changed - Only on value change
|
||||
*/
|
||||
setupDelegatedTrigger(sourceElement, targetElement, componentId, action, handler, eventType, delay, throttle, changed) {
|
||||
const wrappedHandler = (e) => {
|
||||
this.executeWithOptions(targetElement, componentId, action, handler, delay, throttle, changed, e);
|
||||
};
|
||||
|
||||
sourceElement.addEventListener(eventType, wrappedHandler);
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute handler with trigger options
|
||||
*
|
||||
* @param {HTMLElement} element - Element
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {string} action - Action name
|
||||
* @param {Function} handler - Handler function
|
||||
* @param {number} delay - Delay in ms
|
||||
* @param {number} throttle - Throttle in ms
|
||||
* @param {boolean} changed - Only on value change
|
||||
* @param {Event} event - Original event
|
||||
*/
|
||||
executeWithOptions(element, componentId, action, handler, delay, throttle, changed, event) {
|
||||
// Check 'changed' trigger
|
||||
if (changed) {
|
||||
const currentValue = this.getElementValue(element);
|
||||
const valueKey = `${componentId}_${action}_${this.getElementKey(element)}`;
|
||||
const lastValue = this.lastValues.get(valueKey);
|
||||
|
||||
if (currentValue === lastValue) {
|
||||
return; // Value hasn't changed
|
||||
}
|
||||
|
||||
this.lastValues.set(valueKey, currentValue);
|
||||
}
|
||||
|
||||
// Apply throttle
|
||||
if (throttle > 0) {
|
||||
const throttleKey = `${componentId}_${action}_${this.getElementKey(element)}`;
|
||||
const lastExecution = this.throttleTimers.get(throttleKey);
|
||||
|
||||
if (lastExecution && Date.now() - lastExecution < throttle) {
|
||||
return; // Throttled
|
||||
}
|
||||
|
||||
this.throttleTimers.set(throttleKey, Date.now());
|
||||
}
|
||||
|
||||
// Apply delay
|
||||
if (delay > 0) {
|
||||
setTimeout(() => {
|
||||
handler(event);
|
||||
}, delay);
|
||||
} else {
|
||||
handler(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse delay value (e.g., "500ms", "1s", "500")
|
||||
*
|
||||
* @param {string} delayStr - Delay string
|
||||
* @returns {number} - Delay in milliseconds
|
||||
*/
|
||||
parseDelay(delayStr) {
|
||||
if (!delayStr) return 0;
|
||||
|
||||
const match = delayStr.match(/^(\d+)(ms|s)?$/);
|
||||
if (!match) return 0;
|
||||
|
||||
const value = parseInt(match[1]);
|
||||
const unit = match[2] || 'ms';
|
||||
|
||||
return unit === 's' ? value * 1000 : value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse throttle value (e.g., "100ms", "1s", "100")
|
||||
*
|
||||
* @param {string} throttleStr - Throttle string
|
||||
* @returns {number} - Throttle in milliseconds
|
||||
*/
|
||||
parseThrottle(throttleStr) {
|
||||
if (!throttleStr) return 0;
|
||||
|
||||
const match = throttleStr.match(/^(\d+)(ms|s)?$/);
|
||||
if (!match) return 0;
|
||||
|
||||
const value = parseInt(match[1]);
|
||||
const unit = match[2] || 'ms';
|
||||
|
||||
return unit === 's' ? value * 1000 : value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get event type for element
|
||||
*
|
||||
* @param {HTMLElement} element - Element
|
||||
* @param {string} defaultEvent - Default event type
|
||||
* @returns {string} - Event type
|
||||
*/
|
||||
getEventType(element, defaultEvent) {
|
||||
// For form elements, use appropriate event
|
||||
if (element.tagName === 'FORM') {
|
||||
return 'submit';
|
||||
}
|
||||
if (element.tagName === 'SELECT') {
|
||||
return 'change';
|
||||
}
|
||||
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
|
||||
return element.type === 'checkbox' || element.type === 'radio' ? 'change' : 'input';
|
||||
}
|
||||
|
||||
return defaultEvent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get element value for 'changed' trigger
|
||||
*
|
||||
* @param {HTMLElement} element - Element
|
||||
* @returns {string} - Element value
|
||||
*/
|
||||
getElementValue(element) {
|
||||
if (element.tagName === 'INPUT') {
|
||||
if (element.type === 'checkbox' || element.type === 'radio') {
|
||||
return element.checked ? 'true' : 'false';
|
||||
}
|
||||
return element.value || '';
|
||||
}
|
||||
if (element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
|
||||
return element.value || '';
|
||||
}
|
||||
return element.textContent || '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get unique key for element (for tracking)
|
||||
*
|
||||
* @param {HTMLElement} element - Element
|
||||
* @returns {string} - Unique key
|
||||
*/
|
||||
getElementKey(element) {
|
||||
return element.id || element.name || `${element.tagName}_${element.className}` || 'unknown';
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up resources for component
|
||||
*
|
||||
* @param {string} componentId - Component ID
|
||||
*/
|
||||
cleanup(componentId) {
|
||||
// Remove all entries for this component
|
||||
const keysToRemove = [];
|
||||
for (const key of this.triggeredOnce) {
|
||||
if (key.startsWith(`${componentId}_`)) {
|
||||
keysToRemove.push(key);
|
||||
}
|
||||
}
|
||||
keysToRemove.forEach(key => this.triggeredOnce.delete(key));
|
||||
|
||||
// Clean throttle timers
|
||||
const timersToRemove = [];
|
||||
for (const key of this.throttleTimers.keys()) {
|
||||
if (key.startsWith(`${componentId}_`)) {
|
||||
timersToRemove.push(key);
|
||||
}
|
||||
}
|
||||
timersToRemove.forEach(key => this.throttleTimers.delete(key));
|
||||
|
||||
// Clean last values
|
||||
const valuesToRemove = [];
|
||||
for (const key of this.lastValues.keys()) {
|
||||
if (key.startsWith(`${componentId}_`)) {
|
||||
valuesToRemove.push(key);
|
||||
}
|
||||
}
|
||||
valuesToRemove.forEach(key => this.lastValues.delete(key));
|
||||
|
||||
// Clean load handled
|
||||
const loadToRemove = [];
|
||||
for (const key of this.loadHandled) {
|
||||
if (key.startsWith(`${componentId}_`)) {
|
||||
loadToRemove.push(key);
|
||||
}
|
||||
}
|
||||
loadToRemove.forEach(key => this.loadHandled.delete(key));
|
||||
}
|
||||
}
|
||||
|
||||
// Create singleton instance
|
||||
export const triggerManager = new TriggerManager();
|
||||
export default triggerManager;
|
||||
|
||||
|
||||
|
||||
|
||||
529
resources/js/modules/livecomponent/UIEventHandler.js
Normal file
529
resources/js/modules/livecomponent/UIEventHandler.js
Normal file
@@ -0,0 +1,529 @@
|
||||
/**
|
||||
* UI Event Handler for LiveComponents
|
||||
*
|
||||
* Listens to UI-related events from LiveComponents and automatically
|
||||
* displays Toasts, Modals, and other UI components.
|
||||
*
|
||||
* Supported Events:
|
||||
* - toast:show - Show toast notification
|
||||
* - toast:hide - Hide toast notification
|
||||
* - modal:show - Show modal dialog
|
||||
* - modal:close - Close modal dialog
|
||||
* - modal:confirm - Show confirmation dialog
|
||||
* - modal:alert - Show alert dialog
|
||||
*/
|
||||
|
||||
import { LiveComponentUIHelper } from './LiveComponentUIHelper.js';
|
||||
|
||||
export class UIEventHandler {
|
||||
constructor(liveComponentManager) {
|
||||
this.manager = liveComponentManager;
|
||||
this.uiHelper = liveComponentManager.uiHelper || new LiveComponentUIHelper(liveComponentManager);
|
||||
this.eventListeners = new Map();
|
||||
this.isInitialized = false;
|
||||
this.drawerManager = null; // Lazy-loaded when needed
|
||||
this.popoverManager = null; // Lazy-loaded when needed
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize event listeners
|
||||
*/
|
||||
init() {
|
||||
if (this.isInitialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Toast events
|
||||
this.addEventListener('toast:show', (e) => this.handleToastShow(e));
|
||||
this.addEventListener('toast:hide', (e) => this.handleToastHide(e));
|
||||
|
||||
// Modal events
|
||||
this.addEventListener('modal:show', (e) => this.handleModalShow(e));
|
||||
this.addEventListener('modal:close', (e) => this.handleModalClose(e));
|
||||
this.addEventListener('modal:confirm', (e) => this.handleModalConfirm(e));
|
||||
this.addEventListener('modal:alert', (e) => this.handleModalAlert(e));
|
||||
|
||||
// Also listen to livecomponent: prefixed events for compatibility
|
||||
this.addEventListener('livecomponent:toast:show', (e) => this.handleToastShow(e));
|
||||
this.addEventListener('livecomponent:toast:hide', (e) => this.handleToastHide(e));
|
||||
this.addEventListener('livecomponent:modal:show', (e) => this.handleModalShow(e));
|
||||
this.addEventListener('livecomponent:modal:close', (e) => this.handleModalClose(e));
|
||||
this.addEventListener('livecomponent:modal:confirm', (e) => this.handleModalConfirm(e));
|
||||
this.addEventListener('livecomponent:modal:alert', (e) => this.handleModalAlert(e));
|
||||
|
||||
// Drawer events
|
||||
this.addEventListener('drawer:open', (e) => this.handleDrawerOpen(e));
|
||||
this.addEventListener('drawer:close', (e) => this.handleDrawerClose(e));
|
||||
this.addEventListener('drawer:toggle', (e) => this.handleDrawerToggle(e));
|
||||
this.addEventListener('livecomponent:drawer:open', (e) => this.handleDrawerOpen(e));
|
||||
this.addEventListener('livecomponent:drawer:close', (e) => this.handleDrawerClose(e));
|
||||
this.addEventListener('livecomponent:drawer:toggle', (e) => this.handleDrawerToggle(e));
|
||||
|
||||
// Popover events
|
||||
this.addEventListener('popover:show', (e) => this.handlePopoverShow(e));
|
||||
this.addEventListener('popover:hide', (e) => this.handlePopoverHide(e));
|
||||
this.addEventListener('popover:toggle', (e) => this.handlePopoverToggle(e));
|
||||
this.addEventListener('livecomponent:popover:show', (e) => this.handlePopoverShow(e));
|
||||
this.addEventListener('livecomponent:popover:hide', (e) => this.handlePopoverHide(e));
|
||||
this.addEventListener('livecomponent:popover:toggle', (e) => this.handlePopoverToggle(e));
|
||||
|
||||
this.isInitialized = true;
|
||||
console.log('[UIEventHandler] Initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Add event listener
|
||||
* @param {string} eventName - Event name
|
||||
* @param {Function} handler - Event handler
|
||||
*/
|
||||
addEventListener(eventName, handler) {
|
||||
const wrappedHandler = (e) => {
|
||||
try {
|
||||
handler(e);
|
||||
} catch (error) {
|
||||
console.error(`[UIEventHandler] Error handling event ${eventName}:`, error);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener(eventName, wrappedHandler);
|
||||
this.eventListeners.set(eventName, wrappedHandler);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove event listener
|
||||
* @param {string} eventName - Event name
|
||||
*/
|
||||
removeEventListener(eventName) {
|
||||
const handler = this.eventListeners.get(eventName);
|
||||
if (handler) {
|
||||
document.removeEventListener(eventName, handler);
|
||||
this.eventListeners.delete(eventName);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle toast:show event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
handleToastShow(e) {
|
||||
const payload = e.detail || {};
|
||||
const {
|
||||
message = '',
|
||||
type = 'info',
|
||||
duration = 5000,
|
||||
position = 'top-right',
|
||||
componentId = 'global'
|
||||
} = payload;
|
||||
|
||||
if (!message) {
|
||||
console.warn('[UIEventHandler] toast:show event missing message');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Showing toast: ${message} (${type})`);
|
||||
|
||||
this.uiHelper.showNotification(componentId, {
|
||||
message: message,
|
||||
type: type,
|
||||
duration: duration,
|
||||
position: position
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle toast:hide event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
handleToastHide(e) {
|
||||
const payload = e.detail || {};
|
||||
const { componentId = 'global' } = payload;
|
||||
|
||||
console.log(`[UIEventHandler] Hiding toast for component: ${componentId}`);
|
||||
|
||||
this.uiHelper.hideNotification(componentId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle modal:show event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
handleModalShow(e) {
|
||||
const payload = e.detail || {};
|
||||
const {
|
||||
componentId,
|
||||
title = '',
|
||||
content = '',
|
||||
size = 'medium',
|
||||
buttons = [],
|
||||
closeOnBackdrop = true,
|
||||
closeOnEscape = true,
|
||||
onClose = null,
|
||||
onConfirm = null
|
||||
} = payload;
|
||||
|
||||
if (!componentId) {
|
||||
console.warn('[UIEventHandler] modal:show event missing componentId');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Showing modal for component: ${componentId}`);
|
||||
|
||||
this.uiHelper.showDialog(componentId, {
|
||||
title: title,
|
||||
content: content,
|
||||
size: size,
|
||||
buttons: buttons,
|
||||
closeOnBackdrop: closeOnBackdrop,
|
||||
closeOnEscape: closeOnEscape,
|
||||
onClose: onClose,
|
||||
onConfirm: onConfirm
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle modal:close event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
handleModalClose(e) {
|
||||
const payload = e.detail || {};
|
||||
const { componentId } = payload;
|
||||
|
||||
if (!componentId) {
|
||||
console.warn('[UIEventHandler] modal:close event missing componentId');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Closing modal for component: ${componentId}`);
|
||||
|
||||
this.uiHelper.closeDialog(componentId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle modal:confirm event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
async handleModalConfirm(e) {
|
||||
const payload = e.detail || {};
|
||||
const {
|
||||
componentId,
|
||||
title = 'Confirm',
|
||||
message = 'Are you sure?',
|
||||
confirmText = 'Confirm',
|
||||
cancelText = 'Cancel',
|
||||
confirmClass = 'btn-primary',
|
||||
cancelClass = 'btn-secondary',
|
||||
confirmAction = null,
|
||||
confirmParams = null,
|
||||
onConfirm = null,
|
||||
onCancel = null
|
||||
} = payload;
|
||||
|
||||
if (!componentId) {
|
||||
console.warn('[UIEventHandler] modal:confirm event missing componentId');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Showing confirmation dialog for component: ${componentId}`);
|
||||
|
||||
try {
|
||||
const confirmed = await this.uiHelper.showConfirm(componentId, {
|
||||
title: title,
|
||||
message: message,
|
||||
confirmText: confirmText,
|
||||
cancelText: cancelText,
|
||||
confirmClass: confirmClass,
|
||||
cancelClass: cancelClass
|
||||
});
|
||||
|
||||
// If user confirmed and confirmAction is provided, call the LiveComponent action
|
||||
if (confirmed && confirmAction) {
|
||||
console.log(`[UIEventHandler] User confirmed, calling action: ${confirmAction}`, confirmParams);
|
||||
|
||||
// Call LiveComponent action via manager
|
||||
if (this.manager && typeof this.manager.callAction === 'function') {
|
||||
await this.manager.callAction(componentId, confirmAction, confirmParams || {});
|
||||
} else if (this.manager && typeof this.manager.executeAction === 'function') {
|
||||
// Fallback to executeAction for backward compatibility
|
||||
await this.manager.executeAction(componentId, confirmAction, confirmParams || {});
|
||||
} else {
|
||||
console.warn('[UIEventHandler] Cannot execute confirmAction: manager.callAction/executeAction not available');
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy callback support
|
||||
if (confirmed && onConfirm) {
|
||||
onConfirm();
|
||||
} else if (!confirmed && onCancel) {
|
||||
onCancel();
|
||||
}
|
||||
|
||||
// Dispatch result event
|
||||
document.dispatchEvent(new CustomEvent('modal:confirm:result', {
|
||||
detail: {
|
||||
componentId: componentId,
|
||||
confirmed: confirmed
|
||||
}
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('[UIEventHandler] Error showing confirmation dialog:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle modal:alert event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
handleModalAlert(e) {
|
||||
const payload = e.detail || {};
|
||||
const {
|
||||
componentId,
|
||||
title = 'Alert',
|
||||
message = '',
|
||||
buttonText = 'OK',
|
||||
type = 'info',
|
||||
onClose = null
|
||||
} = payload;
|
||||
|
||||
if (!componentId) {
|
||||
console.warn('[UIEventHandler] modal:alert event missing componentId');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Showing alert dialog for component: ${componentId}`);
|
||||
|
||||
this.uiHelper.showAlert(componentId, {
|
||||
title: title,
|
||||
message: message,
|
||||
buttonText: buttonText,
|
||||
type: type
|
||||
});
|
||||
|
||||
if (onClose) {
|
||||
// Note: showAlert doesn't return a promise, so we'll call onClose after a delay
|
||||
// This is a limitation - ideally showAlert would return a promise
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drawer:open event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
async handleDrawerOpen(e) {
|
||||
const payload = e.detail || {};
|
||||
const {
|
||||
componentId,
|
||||
title = '',
|
||||
content = '',
|
||||
position = 'left',
|
||||
width = '400px',
|
||||
showOverlay = true,
|
||||
closeOnOverlay = true,
|
||||
closeOnEscape = true,
|
||||
animation = 'slide'
|
||||
} = payload;
|
||||
|
||||
if (!componentId) {
|
||||
console.warn('[UIEventHandler] drawer:open event missing componentId');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Opening drawer for component: ${componentId}`);
|
||||
|
||||
// Initialize DrawerManager if not already done
|
||||
if (!this.drawerManager) {
|
||||
const { DrawerManager } = await import('./DrawerManager.js');
|
||||
this.drawerManager = new DrawerManager();
|
||||
}
|
||||
|
||||
this.drawerManager.open(componentId, {
|
||||
title: title,
|
||||
content: content,
|
||||
position: position,
|
||||
width: width,
|
||||
showOverlay: showOverlay,
|
||||
closeOnOverlay: closeOnOverlay,
|
||||
closeOnEscape: closeOnEscape,
|
||||
animation: animation
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drawer:close event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
handleDrawerClose(e) {
|
||||
const payload = e.detail || {};
|
||||
const { componentId } = payload;
|
||||
|
||||
if (!componentId) {
|
||||
console.warn('[UIEventHandler] drawer:close event missing componentId');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Closing drawer for component: ${componentId}`);
|
||||
|
||||
if (this.drawerManager) {
|
||||
this.drawerManager.close(componentId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drawer:toggle event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
handleDrawerToggle(e) {
|
||||
const payload = e.detail || {};
|
||||
const { componentId } = payload;
|
||||
|
||||
if (!componentId) {
|
||||
console.warn('[UIEventHandler] drawer:toggle event missing componentId');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Toggling drawer for component: ${componentId}`);
|
||||
|
||||
if (this.drawerManager) {
|
||||
const isOpen = this.drawerManager.isOpen(componentId);
|
||||
if (isOpen) {
|
||||
this.drawerManager.close(componentId);
|
||||
} else {
|
||||
// For toggle, we need the full options - this is a limitation
|
||||
// In practice, components should use open/close explicitly
|
||||
console.warn('[UIEventHandler] drawer:toggle requires full options - use drawer:open/close instead');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle popover:show event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
async handlePopoverShow(e) {
|
||||
const payload = e.detail || {};
|
||||
const {
|
||||
componentId,
|
||||
anchorId,
|
||||
content = '',
|
||||
title = '',
|
||||
position = 'top',
|
||||
showArrow = true,
|
||||
offset = 8,
|
||||
closeOnOutsideClick = true
|
||||
} = payload;
|
||||
|
||||
if (!componentId || !anchorId) {
|
||||
console.warn('[UIEventHandler] popover:show event missing componentId or anchorId');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Showing popover for component: ${componentId}`);
|
||||
|
||||
// Initialize PopoverManager if not already done
|
||||
if (!this.popoverManager) {
|
||||
const { PopoverManager } = await import('./PopoverManager.js');
|
||||
this.popoverManager = new PopoverManager();
|
||||
}
|
||||
|
||||
this.popoverManager.show(componentId, {
|
||||
anchorId: anchorId,
|
||||
content: content,
|
||||
title: title,
|
||||
position: position,
|
||||
showArrow: showArrow,
|
||||
offset: offset,
|
||||
closeOnOutsideClick: closeOnOutsideClick
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle popover:hide event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
handlePopoverHide(e) {
|
||||
const payload = e.detail || {};
|
||||
const { componentId } = payload;
|
||||
|
||||
if (!componentId) {
|
||||
console.warn('[UIEventHandler] popover:hide event missing componentId');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[UIEventHandler] Hiding popover for component: ${componentId}`);
|
||||
|
||||
if (this.popoverManager) {
|
||||
this.popoverManager.hide(componentId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle popover:toggle event
|
||||
* @param {CustomEvent} e - Event object
|
||||
*/
|
||||
async handlePopoverToggle(e) {
|
||||
const payload = e.detail || {};
|
||||
const {
|
||||
componentId,
|
||||
anchorId,
|
||||
content = '',
|
||||
title = '',
|
||||
position = 'top',
|
||||
showArrow = true,
|
||||
offset = 8,
|
||||
closeOnOutsideClick = true
|
||||
} = payload;
|
||||
|
||||
if (!componentId || !anchorId) {
|
||||
console.warn('[UIEventHandler] popover:toggle event missing componentId or anchorId');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize PopoverManager if not already done
|
||||
if (!this.popoverManager) {
|
||||
const { PopoverManager } = await import('./PopoverManager.js');
|
||||
this.popoverManager = new PopoverManager();
|
||||
}
|
||||
|
||||
// Check if popover is visible
|
||||
const isVisible = this.popoverManager.popovers.has(componentId);
|
||||
|
||||
if (isVisible) {
|
||||
this.popoverManager.hide(componentId);
|
||||
} else {
|
||||
this.popoverManager.show(componentId, {
|
||||
anchorId: anchorId,
|
||||
content: content,
|
||||
title: title,
|
||||
position: position,
|
||||
showArrow: showArrow,
|
||||
offset: offset,
|
||||
closeOnOutsideClick: closeOnOutsideClick
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup all event listeners
|
||||
*/
|
||||
destroy() {
|
||||
for (const [eventName, handler] of this.eventListeners.entries()) {
|
||||
document.removeEventListener(eventName, handler);
|
||||
}
|
||||
this.eventListeners.clear();
|
||||
|
||||
// Cleanup managers
|
||||
if (this.drawerManager) {
|
||||
this.drawerManager.destroy();
|
||||
}
|
||||
|
||||
if (this.popoverManager) {
|
||||
this.popoverManager.destroy();
|
||||
}
|
||||
|
||||
this.isInitialized = false;
|
||||
console.log('[UIEventHandler] Destroyed');
|
||||
}
|
||||
}
|
||||
|
||||
150
resources/js/modules/livecomponent/UrlManager.js
Normal file
150
resources/js/modules/livecomponent/UrlManager.js
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* URL Manager for LiveComponents
|
||||
*
|
||||
* Handles URL updates without page reload:
|
||||
* - data-lc-push-url: Push URL to browser history
|
||||
* - data-lc-replace-url: Replace URL without history entry
|
||||
* - Browser Back/Forward support
|
||||
* - SPA Router coordination
|
||||
*/
|
||||
|
||||
export class UrlManager {
|
||||
constructor() {
|
||||
this.initialized = false;
|
||||
this.popStateHandler = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize URL manager
|
||||
*/
|
||||
init() {
|
||||
if (this.initialized) {
|
||||
console.warn('[UrlManager] Already initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
// Setup popstate handler for browser back/forward
|
||||
this.popStateHandler = (event) => {
|
||||
this.handlePopState(event);
|
||||
};
|
||||
window.addEventListener('popstate', this.popStateHandler);
|
||||
|
||||
this.initialized = true;
|
||||
console.log('[UrlManager] Initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Push URL to browser history
|
||||
*
|
||||
* @param {string} url - URL to push
|
||||
* @param {string} title - Optional page title
|
||||
*/
|
||||
pushUrl(url, title = '') {
|
||||
try {
|
||||
window.history.pushState({ url, title }, title || document.title, url);
|
||||
|
||||
// Update document title if provided
|
||||
if (title) {
|
||||
document.title = title;
|
||||
}
|
||||
|
||||
// Dispatch custom event
|
||||
window.dispatchEvent(new CustomEvent('lc:url:pushed', {
|
||||
detail: { url, title }
|
||||
}));
|
||||
|
||||
console.log(`[UrlManager] Pushed URL: ${url}`);
|
||||
} catch (error) {
|
||||
console.error('[UrlManager] Failed to push URL:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace URL without history entry
|
||||
*
|
||||
* @param {string} url - URL to replace
|
||||
* @param {string} title - Optional page title
|
||||
*/
|
||||
replaceUrl(url, title = '') {
|
||||
try {
|
||||
window.history.replaceState({ url, title }, title || document.title, url);
|
||||
|
||||
// Update document title if provided
|
||||
if (title) {
|
||||
document.title = title;
|
||||
}
|
||||
|
||||
// Dispatch custom event
|
||||
window.dispatchEvent(new CustomEvent('lc:url:replaced', {
|
||||
detail: { url, title }
|
||||
}));
|
||||
|
||||
console.log(`[UrlManager] Replaced URL: ${url}`);
|
||||
} catch (error) {
|
||||
console.error('[UrlManager] Failed to replace URL:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle browser back/forward navigation
|
||||
*
|
||||
* @param {PopStateEvent} event - PopState event
|
||||
*/
|
||||
handlePopState(event) {
|
||||
const state = event.state;
|
||||
|
||||
if (state && state.url) {
|
||||
// Dispatch custom event for popstate
|
||||
window.dispatchEvent(new CustomEvent('lc:url:popstate', {
|
||||
detail: { url: state.url, state }
|
||||
}));
|
||||
|
||||
// If SPA Router is available, let it handle navigation
|
||||
if (window.SPARouter && typeof window.SPARouter.navigate === 'function') {
|
||||
window.SPARouter.navigate(state.url);
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, trigger a page reload or custom handling
|
||||
// This is a fallback - in most cases, SPA Router should handle it
|
||||
console.log('[UrlManager] PopState detected, URL:', state.url);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current URL
|
||||
*
|
||||
* @returns {string} - Current URL
|
||||
*/
|
||||
getCurrentUrl() {
|
||||
return window.location.href;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current path
|
||||
*
|
||||
* @returns {string} - Current path
|
||||
*/
|
||||
getCurrentPath() {
|
||||
return window.location.pathname;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup URL manager
|
||||
*/
|
||||
cleanup() {
|
||||
if (this.popStateHandler) {
|
||||
window.removeEventListener('popstate', this.popStateHandler);
|
||||
this.popStateHandler = null;
|
||||
}
|
||||
this.initialized = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Create singleton instance
|
||||
export const urlManager = new UrlManager();
|
||||
export default urlManager;
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -23,6 +23,16 @@ import { accessibilityManager } from './AccessibilityManager.js';
|
||||
import { ErrorBoundary } from './ErrorBoundary.js';
|
||||
import { RequestDeduplicator } from './RequestDeduplicator.js';
|
||||
import * as StateSerializer from './StateSerializer.js';
|
||||
import { UIEventHandler } from './UIEventHandler.js';
|
||||
import { triggerManager } from './TriggerManager.js';
|
||||
import { sharedConfig } from './SharedConfig.js';
|
||||
import { tooltipManager } from './TooltipManager.js';
|
||||
import { actionLoadingManager } from './ActionLoadingManager.js';
|
||||
import { LiveComponentUIHelper } from './LiveComponentUIHelper.js';
|
||||
import { LoadingStateManager } from './LoadingStateManager.js';
|
||||
import { ProgressiveEnhancement } from './ProgressiveEnhancement.js';
|
||||
import { urlManager } from './UrlManager.js';
|
||||
import { LiveComponentCoreAttributes, LiveComponentFeatureAttributes, LiveComponentLazyAttributes, toDatasetKey } from '../../core/DataAttributes.js';
|
||||
|
||||
class LiveComponentManager {
|
||||
constructor() {
|
||||
@@ -64,11 +74,21 @@ class LiveComponentManager {
|
||||
// UI Helper
|
||||
this.uiHelper = new LiveComponentUIHelper(this);
|
||||
|
||||
// UI Event Handler
|
||||
this.uiEventHandler = new UIEventHandler(this);
|
||||
this.uiEventHandler.init();
|
||||
|
||||
// Loading State Manager
|
||||
this.loadingStateManager = new LoadingStateManager(
|
||||
this.actionLoadingManager,
|
||||
optimisticStateManager
|
||||
);
|
||||
|
||||
// Progressive Enhancement
|
||||
this.progressiveEnhancement = new ProgressiveEnhancement(this);
|
||||
|
||||
// URL Manager
|
||||
urlManager.init();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -132,17 +152,24 @@ class LiveComponentManager {
|
||||
|
||||
/**
|
||||
* Initialize LiveComponent
|
||||
*
|
||||
* @param {HTMLElement} element - Component element
|
||||
* @param {Object} options - Initialization options
|
||||
* @param {boolean} options.isolated - If true, component is isolated (Island) and won't receive parent events
|
||||
*/
|
||||
init(element) {
|
||||
const componentId = element.dataset.liveComponent;
|
||||
init(element, options = {}) {
|
||||
const componentId = element.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_COMPONENT)];
|
||||
if (!componentId) return;
|
||||
|
||||
const isIsland = options.isolated === true || element.dataset[toDatasetKey(LiveComponentLazyAttributes.ISLAND_COMPONENT)] === 'true';
|
||||
|
||||
const config = {
|
||||
id: componentId,
|
||||
element,
|
||||
pollInterval: parseInt(element.dataset.pollInterval) || null,
|
||||
pollInterval: parseInt(element.dataset[toDatasetKey(LiveComponentCoreAttributes.POLL_INTERVAL)]) || null,
|
||||
pollTimer: null,
|
||||
observer: null
|
||||
observer: null,
|
||||
isolated: isIsland
|
||||
};
|
||||
|
||||
this.components.set(componentId, config);
|
||||
@@ -162,7 +189,8 @@ class LiveComponentManager {
|
||||
this.setupLifecycleObserver(element, componentId);
|
||||
|
||||
// Setup SSE connection if component has a channel
|
||||
this.setupSseConnection(element, componentId);
|
||||
// Islands have isolated SSE channels (no parent events)
|
||||
this.setupSseConnection(element, componentId, { isolated: isIsland });
|
||||
|
||||
// Setup accessibility features
|
||||
this.setupAccessibility(componentId, element);
|
||||
@@ -170,7 +198,12 @@ class LiveComponentManager {
|
||||
// Initialize tooltips for component
|
||||
this.tooltipManager.initComponent(element);
|
||||
|
||||
console.log(`[LiveComponent] Initialized: ${componentId}`);
|
||||
// Initialize progressive enhancement if not already done
|
||||
if (!this.progressiveEnhancement.initialized) {
|
||||
this.progressiveEnhancement.init();
|
||||
}
|
||||
|
||||
console.log(`[LiveComponent] Initialized: ${componentId}${isIsland ? ' (Island)' : ''}`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -178,7 +211,7 @@ class LiveComponentManager {
|
||||
*/
|
||||
setupAccessibility(componentId, element) {
|
||||
// Create component-specific ARIA live region
|
||||
const politeness = element.dataset.livePolite === 'assertive' ? 'assertive' : 'polite';
|
||||
const politeness = element.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_POLITE)] === 'assertive' ? 'assertive' : 'polite';
|
||||
this.accessibilityManager.createComponentLiveRegion(componentId, element, politeness);
|
||||
|
||||
console.log(`[LiveComponent] Accessibility features enabled for ${componentId}`);
|
||||
@@ -217,9 +250,9 @@ class LiveComponentManager {
|
||||
* Setup SSE connection for component
|
||||
* Automatically connects to SSE if component has data-sse-channel attribute
|
||||
*/
|
||||
setupSseConnection(element, componentId) {
|
||||
setupSseConnection(element, componentId, options = {}) {
|
||||
// Check if component has SSE channel
|
||||
const sseChannel = element.dataset.sseChannel;
|
||||
const sseChannel = element.dataset[toDatasetKey(LiveComponentCoreAttributes.SSE_CHANNEL)];
|
||||
if (!sseChannel) {
|
||||
return; // No SSE channel, skip
|
||||
}
|
||||
@@ -433,14 +466,112 @@ class LiveComponentManager {
|
||||
* Setup action click handlers
|
||||
*/
|
||||
setupActionHandlers(element) {
|
||||
element.querySelectorAll('[data-live-action]').forEach(actionEl => {
|
||||
// Handle form submissions
|
||||
if (actionEl.tagName === 'FORM') {
|
||||
element.querySelectorAll(`[${LiveComponentCoreAttributes.LIVE_ACTION}]`).forEach(actionEl => {
|
||||
// Find the component ID: check if action element has explicit component ID,
|
||||
// otherwise find closest parent component
|
||||
let componentId = actionEl.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_COMPONENT)];
|
||||
|
||||
if (!componentId) {
|
||||
// Find the innermost (most nested) component element
|
||||
// We need to collect all ancestor elements with data-live-component
|
||||
// and use the first one (which is the innermost/closest one)
|
||||
let current = actionEl.parentElement;
|
||||
const componentElements = [];
|
||||
|
||||
// Collect all ancestor elements with data-live-component
|
||||
while (current && current !== document.body) {
|
||||
if (current.hasAttribute && current.hasAttribute(LiveComponentCoreAttributes.LIVE_COMPONENT)) {
|
||||
componentElements.push(current);
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
|
||||
// Use the first element (innermost/closest component)
|
||||
if (componentElements.length > 0) {
|
||||
componentId = componentElements[0].dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_COMPONENT)];
|
||||
} else {
|
||||
// Fallback to closest() if manual traversal didn't work
|
||||
const fallbackElement = actionEl.closest(`[${LiveComponentCoreAttributes.LIVE_COMPONENT}]`);
|
||||
if (fallbackElement) {
|
||||
componentId = fallbackElement.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_COMPONENT)];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!componentId) {
|
||||
console.warn('[LiveComponent] No component found for action:', actionEl, actionEl.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_ACTION)]);
|
||||
return;
|
||||
}
|
||||
|
||||
// Debug logging to help diagnose issues
|
||||
if (import.meta.env.DEV && actionEl.dataset.liveAction === 'togglePreview') {
|
||||
const closestComp = actionEl.closest('[data-live-component]');
|
||||
let current = actionEl.parentElement;
|
||||
const allComponents = [];
|
||||
while (current && current !== document.body) {
|
||||
if (current.hasAttribute && current.hasAttribute(LiveComponentCoreAttributes.LIVE_COMPONENT)) {
|
||||
allComponents.push(current.dataset.liveComponent);
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
console.log('[LiveComponent] Action setup:', {
|
||||
action: actionEl.dataset.liveAction,
|
||||
componentId: componentId,
|
||||
closestComponentId: closestComp?.dataset.liveComponent,
|
||||
allAncestorComponents: allComponents,
|
||||
actionElement: actionEl,
|
||||
});
|
||||
}
|
||||
|
||||
// Check if advanced trigger options are used
|
||||
const hasAdvancedTriggers = actionEl.dataset[toDatasetKey(LiveComponentFeatureAttributes.LC_TRIGGER_DELAY)] ||
|
||||
actionEl.dataset[toDatasetKey(LiveComponentFeatureAttributes.LC_TRIGGER_THROTTLE)] ||
|
||||
actionEl.dataset[toDatasetKey(LiveComponentFeatureAttributes.LC_TRIGGER_ONCE)] === 'true' ||
|
||||
actionEl.dataset[toDatasetKey(LiveComponentFeatureAttributes.LC_TRIGGER_CHANGED)] === 'true' ||
|
||||
actionEl.dataset[toDatasetKey(LiveComponentFeatureAttributes.LC_TRIGGER_FROM)] ||
|
||||
actionEl.dataset[toDatasetKey(LiveComponentFeatureAttributes.LC_TRIGGER_LOAD)] === 'true';
|
||||
|
||||
// Create action handler function
|
||||
const createActionHandler = async (e, paramsOverride = {}) => {
|
||||
const action = actionEl.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_ACTION)];
|
||||
let params = { ...this.extractParams(actionEl), ...paramsOverride };
|
||||
|
||||
// For submit/navigation actions, collect all form values
|
||||
if (action === 'submit' || action === 'nextStep' || action === 'previousStep') {
|
||||
const formValues = this.collectFormValues(element);
|
||||
params = { ...formValues, ...params };
|
||||
}
|
||||
|
||||
// Extract fragments for partial rendering
|
||||
const fragments = this.extractFragments(actionEl);
|
||||
|
||||
await this.executeAction(componentId, action, params, fragments, actionEl);
|
||||
};
|
||||
|
||||
// Use TriggerManager if advanced triggers are present
|
||||
if (hasAdvancedTriggers) {
|
||||
triggerManager.setupTrigger(actionEl, componentId, actionEl.dataset.liveAction, async (e) => {
|
||||
if (actionEl.tagName === 'FORM' && e) {
|
||||
e.preventDefault();
|
||||
const formValues = {};
|
||||
const formData = new FormData(actionEl);
|
||||
for (const [key, value] of formData.entries()) {
|
||||
formValues[key] = value;
|
||||
}
|
||||
await createActionHandler(e, formValues);
|
||||
} else {
|
||||
if (e) e.preventDefault();
|
||||
await createActionHandler(e);
|
||||
}
|
||||
}, actionEl.tagName === 'FORM' ? 'submit' : 'click');
|
||||
// Skip default handler setup - TriggerManager handles it
|
||||
} else {
|
||||
// Handle form submissions (default behavior)
|
||||
if (actionEl.tagName === 'FORM') {
|
||||
actionEl.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const componentId = element.dataset.liveComponent;
|
||||
const action = actionEl.dataset.liveAction;
|
||||
const action = actionEl.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_ACTION)];
|
||||
|
||||
// Collect all form values
|
||||
const formValues = {};
|
||||
@@ -452,44 +583,77 @@ class LiveComponentManager {
|
||||
// Extract fragments for partial rendering
|
||||
const fragments = this.extractFragments(actionEl);
|
||||
|
||||
await this.executeAction(componentId, action, formValues, fragments);
|
||||
await this.executeAction(componentId, action, formValues, fragments, actionEl);
|
||||
});
|
||||
}
|
||||
// Handle input elements with debouncing
|
||||
else if (actionEl.tagName === 'INPUT' || actionEl.tagName === 'TEXTAREA' || actionEl.tagName === 'SELECT') {
|
||||
}
|
||||
// Handle input elements with debouncing
|
||||
else if (actionEl.tagName === 'INPUT' || actionEl.tagName === 'TEXTAREA' || actionEl.tagName === 'SELECT') {
|
||||
// Default debounce for text inputs: 300ms, others: 0ms
|
||||
const defaultDebounce = (actionEl.type === 'text' || actionEl.type === 'email' || actionEl.type === 'url' || actionEl.type === 'tel' || actionEl.tagName === 'TEXTAREA') ? 300 : 0;
|
||||
const debounceMs = parseInt(actionEl.dataset.liveDebounce) ?? defaultDebounce;
|
||||
|
||||
actionEl.addEventListener('input', async (e) => {
|
||||
const componentId = element.dataset.liveComponent;
|
||||
const action = actionEl.dataset.liveAction;
|
||||
const params = this.extractParams(actionEl);
|
||||
// For SELECT elements, use 'change' event (SELECT doesn't fire 'input' event)
|
||||
if (actionEl.tagName === 'SELECT') {
|
||||
actionEl.addEventListener('change', async (e) => {
|
||||
const action = actionEl.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_ACTION)];
|
||||
const params = this.extractParams(actionEl);
|
||||
|
||||
// Add input value to params
|
||||
if (actionEl.type === 'checkbox') {
|
||||
params[actionEl.name || 'value'] = actionEl.checked ? 'yes' : 'no';
|
||||
} else if (actionEl.type === 'radio') {
|
||||
params[actionEl.name || 'value'] = actionEl.value;
|
||||
} else {
|
||||
params[actionEl.name || 'value'] = actionEl.value;
|
||||
}
|
||||
// Add select value to params
|
||||
// Convert snake_case name to camelCase for PHP method parameter binding
|
||||
const name = actionEl.name || 'content_type_id';
|
||||
const camelCaseName = name.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
|
||||
|
||||
// Use camelCase for parameter name to match PHP method signature
|
||||
params[camelCaseName] = actionEl.value;
|
||||
|
||||
// Also keep original name for backwards compatibility
|
||||
if (name !== camelCaseName) {
|
||||
params[name] = actionEl.value;
|
||||
}
|
||||
|
||||
// Extract fragments for partial rendering
|
||||
const fragments = this.extractFragments(actionEl);
|
||||
console.log('[LiveComponent] SELECT change:', {
|
||||
action,
|
||||
name,
|
||||
camelCaseName,
|
||||
value: actionEl.value,
|
||||
params
|
||||
});
|
||||
|
||||
if (debounceMs > 0) {
|
||||
this.debouncedAction(componentId, action, params, debounceMs, fragments);
|
||||
} else {
|
||||
await this.executeAction(componentId, action, params, fragments);
|
||||
}
|
||||
});
|
||||
// Extract fragments for partial rendering
|
||||
const fragments = this.extractFragments(actionEl);
|
||||
|
||||
await this.executeAction(componentId, action, params, fragments, actionEl);
|
||||
});
|
||||
} else {
|
||||
// For INPUT and TEXTAREA, use 'input' event
|
||||
actionEl.addEventListener('input', async (e) => {
|
||||
const action = actionEl.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_ACTION)];
|
||||
const params = this.extractParams(actionEl);
|
||||
|
||||
// Add input value to params
|
||||
if (actionEl.type === 'checkbox') {
|
||||
params[actionEl.name || 'value'] = actionEl.checked ? 'yes' : 'no';
|
||||
} else if (actionEl.type === 'radio') {
|
||||
params[actionEl.name || 'value'] = actionEl.value;
|
||||
} else {
|
||||
params[actionEl.name || 'value'] = actionEl.value;
|
||||
}
|
||||
|
||||
// Extract fragments for partial rendering
|
||||
const fragments = this.extractFragments(actionEl);
|
||||
|
||||
if (debounceMs > 0) {
|
||||
this.debouncedAction(componentId, action, params, debounceMs, fragments, actionEl);
|
||||
} else {
|
||||
await this.executeAction(componentId, action, params, fragments, actionEl);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// For radio buttons and checkboxes, also listen to 'change' event
|
||||
if (actionEl.type === 'radio' || actionEl.type === 'checkbox') {
|
||||
actionEl.addEventListener('change', async (e) => {
|
||||
const componentId = element.dataset.liveComponent;
|
||||
const action = actionEl.dataset.liveAction;
|
||||
const action = actionEl.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_ACTION)];
|
||||
const params = this.extractParams(actionEl);
|
||||
|
||||
if (actionEl.type === 'checkbox') {
|
||||
@@ -498,31 +662,31 @@ class LiveComponentManager {
|
||||
params[actionEl.name || 'value'] = actionEl.value;
|
||||
}
|
||||
|
||||
await this.executeAction(componentId, action, params);
|
||||
await this.executeAction(componentId, action, params, null, actionEl);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Handle button clicks
|
||||
actionEl.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
// Handle button clicks (default behavior)
|
||||
actionEl.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const componentId = element.dataset.liveComponent;
|
||||
const action = actionEl.dataset.liveAction;
|
||||
let params = this.extractParams(actionEl);
|
||||
const action = actionEl.dataset[toDatasetKey(LiveComponentCoreAttributes.LIVE_ACTION)];
|
||||
let params = this.extractParams(actionEl);
|
||||
|
||||
// For submit/navigation actions, collect all form values
|
||||
if (action === 'submit' || action === 'nextStep' || action === 'previousStep') {
|
||||
const formValues = this.collectFormValues(element);
|
||||
console.log('[LiveComponent] Collected form values:', formValues);
|
||||
params = { ...formValues, ...params };
|
||||
console.log('[LiveComponent] Final params:', params);
|
||||
}
|
||||
// For submit/navigation actions, collect all form values
|
||||
if (action === 'submit' || action === 'nextStep' || action === 'previousStep') {
|
||||
const formValues = this.collectFormValues(element);
|
||||
console.log('[LiveComponent] Collected form values:', formValues);
|
||||
params = { ...formValues, ...params };
|
||||
console.log('[LiveComponent] Final params:', params);
|
||||
}
|
||||
|
||||
// Extract fragments for partial rendering
|
||||
const fragments = this.extractFragments(actionEl);
|
||||
// Extract fragments for partial rendering
|
||||
const fragments = this.extractFragments(actionEl);
|
||||
|
||||
await this.executeAction(componentId, action, params, fragments);
|
||||
});
|
||||
await this.executeAction(componentId, action, params, fragments, actionEl);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -530,7 +694,7 @@ class LiveComponentManager {
|
||||
/**
|
||||
* Debounced action execution
|
||||
*/
|
||||
debouncedAction(componentId, action, params, delay, fragments = null) {
|
||||
debouncedAction(componentId, action, params, delay, fragments = null, actionElement = null) {
|
||||
const timerKey = `${componentId}_${action}`;
|
||||
|
||||
// Clear existing timer
|
||||
@@ -540,7 +704,7 @@ class LiveComponentManager {
|
||||
|
||||
// Set new timer
|
||||
const timer = setTimeout(async () => {
|
||||
await this.executeAction(componentId, action, params, fragments);
|
||||
await this.executeAction(componentId, action, params, fragments, actionElement);
|
||||
this.debounceTimers.delete(timerKey);
|
||||
}, delay);
|
||||
|
||||
@@ -636,8 +800,9 @@ class LiveComponentManager {
|
||||
* @param {string} method - Action method name
|
||||
* @param {Object} params - Action parameters
|
||||
* @param {Array<string>} fragments - Optional fragment names for partial rendering
|
||||
* @param {HTMLElement} actionElement - Optional element that triggered the action (for target/swap support)
|
||||
*/
|
||||
async executeAction(componentId, method, params = {}, fragments = null) {
|
||||
async executeAction(componentId, method, params = {}, fragments = null, actionElement = null) {
|
||||
const config = this.components.get(componentId);
|
||||
if (!config) {
|
||||
console.error(`[LiveComponent] Unknown component: ${componentId}`);
|
||||
@@ -661,19 +826,39 @@ class LiveComponentManager {
|
||||
let operationId = null;
|
||||
const startTime = performance.now();
|
||||
|
||||
// Find the correct component element (may differ from config.element for nested components)
|
||||
let componentElement = config.element;
|
||||
if (componentElement.dataset.liveComponent !== componentId) {
|
||||
// If config.element doesn't match, find the correct element
|
||||
componentElement = document.querySelector(`[data-live-component="${componentId}"]`);
|
||||
if (!componentElement) {
|
||||
console.error(`[LiveComponent] Component element not found: ${componentId}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Show loading state (uses LoadingStateManager for configurable indicators)
|
||||
const loadingConfig = this.loadingStateManager.getConfig(componentId);
|
||||
this.loadingStateManager.showLoading(componentId, config.element, {
|
||||
this.loadingStateManager.showLoading(componentId, componentElement, {
|
||||
fragments,
|
||||
type: loadingConfig.type,
|
||||
optimistic: true // Check optimistic UI first
|
||||
});
|
||||
}, actionElement);
|
||||
|
||||
// Create request promise
|
||||
const requestPromise = (async () => {
|
||||
try {
|
||||
if (componentElement.dataset.liveComponent !== componentId) {
|
||||
// If config.element doesn't match, find the correct element
|
||||
componentElement = document.querySelector(`[data-live-component="${componentId}"]`);
|
||||
if (!componentElement) {
|
||||
console.error(`[LiveComponent] Component element not found: ${componentId}`);
|
||||
throw new Error(`Component element ${componentId} not found in DOM`);
|
||||
}
|
||||
}
|
||||
|
||||
// Get current state from element using StateSerializer
|
||||
const stateWrapper = StateSerializer.getStateFromElement(config.element) || {
|
||||
const stateWrapper = StateSerializer.getStateFromElement(componentElement) || {
|
||||
id: componentId,
|
||||
component: '',
|
||||
data: {},
|
||||
@@ -683,6 +868,45 @@ class LiveComponentManager {
|
||||
// Extract actual state data from wrapper format
|
||||
// Wrapper format: {id, component, data, version}
|
||||
// Server expects just the data object
|
||||
|
||||
// Check if there are pending operations - if so, use the optimistic version
|
||||
const pendingOps = optimisticStateManager.getPendingOperations(componentId);
|
||||
|
||||
// CRITICAL: Always read version from stateWrapper first
|
||||
let currentVersion = 1;
|
||||
if (stateWrapper && typeof stateWrapper.version === 'number') {
|
||||
currentVersion = stateWrapper.version;
|
||||
}
|
||||
|
||||
// If there are pending operations, use the version from the latest optimistic state
|
||||
if (pendingOps.length > 0) {
|
||||
const latestOp = pendingOps[pendingOps.length - 1];
|
||||
if (latestOp.optimisticState && typeof latestOp.optimisticState.version === 'number') {
|
||||
currentVersion = latestOp.optimisticState.version;
|
||||
}
|
||||
}
|
||||
|
||||
// CRITICAL DEBUG: Always log, even in production
|
||||
console.error('[LiveComponent] VERSION DEBUG START', {
|
||||
stateWrapperVersion: stateWrapper?.version,
|
||||
stateWrapperVersionType: typeof stateWrapper?.version,
|
||||
currentVersion,
|
||||
pendingOpsCount: pendingOps.length,
|
||||
hasStateWrapper: !!stateWrapper,
|
||||
stateWrapperKeys: stateWrapper ? Object.keys(stateWrapper) : []
|
||||
});
|
||||
|
||||
// If there are pending operations, use the version from the latest optimistic state
|
||||
// This ensures we always send the most recent version, even with optimistic updates
|
||||
if (pendingOps.length > 0) {
|
||||
// Get the latest optimistic state version
|
||||
// The optimistic state has version = currentVersion + 1, so we use that
|
||||
const latestOp = pendingOps[pendingOps.length - 1];
|
||||
if (latestOp.optimisticState && latestOp.optimisticState.version) {
|
||||
currentVersion = latestOp.optimisticState.version;
|
||||
}
|
||||
}
|
||||
|
||||
const state = stateWrapper.data || {};
|
||||
|
||||
// Apply optimistic update for immediate UI feedback
|
||||
@@ -706,36 +930,123 @@ class LiveComponentManager {
|
||||
);
|
||||
|
||||
operationId = optimisticStateManager.getPendingOperations(componentId)[0]?.id;
|
||||
|
||||
// Debug logging for version management
|
||||
if (import.meta.env.DEV) {
|
||||
console.log(`[LiveComponent] Executing ${method} for ${componentId}`, {
|
||||
currentVersion,
|
||||
pendingOpsCount: pendingOps.length,
|
||||
operationId
|
||||
});
|
||||
}
|
||||
|
||||
// Get component-specific CSRF token from element
|
||||
const csrfToken = config.element.dataset.csrfToken;
|
||||
// Get component-specific CSRF token from the component element
|
||||
const csrfToken = componentElement.dataset.csrfToken;
|
||||
if (!csrfToken) {
|
||||
console.error(`[LiveComponent] Missing CSRF token for component: ${componentId}`);
|
||||
console.error('[LiveComponent] Component element:', componentElement);
|
||||
console.error('[LiveComponent] Component element dataset:', componentElement?.dataset);
|
||||
console.error('[LiveComponent] Component element HTML:', componentElement?.outerHTML?.substring(0, 500));
|
||||
throw new Error('CSRF token is required for component actions');
|
||||
}
|
||||
|
||||
// Debug logging for CSRF token
|
||||
if (import.meta.env.DEV) {
|
||||
console.log(`[LiveComponent] CSRF token for ${componentId}:`, csrfToken?.substring(0, 20) + '...');
|
||||
}
|
||||
|
||||
// Build request body
|
||||
const requestBody = {
|
||||
method,
|
||||
params,
|
||||
state,
|
||||
_csrf_token: csrfToken
|
||||
};
|
||||
|
||||
// CRITICAL: Always ensure version is a valid number
|
||||
// Read version from stateWrapper first, then check pending ops
|
||||
let versionToSend = 1;
|
||||
|
||||
// Try to get version from stateWrapper
|
||||
if (stateWrapper && typeof stateWrapper.version === 'number') {
|
||||
versionToSend = stateWrapper.version;
|
||||
}
|
||||
|
||||
// If there are pending operations, use the version from the latest optimistic state
|
||||
if (pendingOps.length > 0) {
|
||||
const latestOp = pendingOps[pendingOps.length - 1];
|
||||
if (latestOp.optimisticState && typeof latestOp.optimisticState.version === 'number') {
|
||||
versionToSend = latestOp.optimisticState.version;
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure versionToSend is always a valid number
|
||||
if (typeof versionToSend !== 'number' || isNaN(versionToSend)) {
|
||||
versionToSend = 1;
|
||||
}
|
||||
|
||||
// CRITICAL DEBUG: Always log, even in production
|
||||
console.error('[LiveComponent] VERSION DEBUG', {
|
||||
stateWrapperVersion: stateWrapper?.version,
|
||||
currentVersion,
|
||||
versionToSend,
|
||||
pendingOpsCount: pendingOps.length,
|
||||
hasStateWrapper: !!stateWrapper
|
||||
});
|
||||
|
||||
// CRITICAL: Build request body with version ALWAYS included as explicit property
|
||||
// Use object literal with explicit version to ensure it's never undefined
|
||||
const requestBody = {};
|
||||
requestBody.method = method;
|
||||
requestBody.params = params;
|
||||
requestBody.state = state;
|
||||
requestBody.version = versionToSend; // CRITICAL: Always send version (never undefined)
|
||||
requestBody._csrf_token = csrfToken;
|
||||
|
||||
// Add fragments parameter if specified
|
||||
if (fragments && Array.isArray(fragments) && fragments.length > 0) {
|
||||
requestBody.fragments = fragments;
|
||||
}
|
||||
|
||||
// CRITICAL: Double-check version is still present after adding fragments
|
||||
if (typeof requestBody.version !== 'number' || isNaN(requestBody.version)) {
|
||||
requestBody.version = versionToSend || 1;
|
||||
}
|
||||
|
||||
// Send AJAX request with CSRF token in body
|
||||
// Component ID is in the URL, not in the body
|
||||
|
||||
// CRITICAL DEBUG: Log the exact request body before sending
|
||||
const requestBodyString = JSON.stringify(requestBody);
|
||||
|
||||
// CRITICAL: Verify version is in JSON string - if not, force add it
|
||||
let finalRequestBody = requestBodyString;
|
||||
if (!requestBodyString.includes('"version"')) {
|
||||
console.error('[LiveComponent] ERROR: Version missing in JSON! Forcing version...', {
|
||||
jsonPreview: requestBodyString.substring(0, 300),
|
||||
versionToSend,
|
||||
requestBodyKeys: Object.keys(requestBody)
|
||||
});
|
||||
// Parse and re-add version
|
||||
try {
|
||||
const parsed = JSON.parse(requestBodyString);
|
||||
parsed.version = versionToSend || 1;
|
||||
finalRequestBody = JSON.stringify(parsed);
|
||||
console.error('[LiveComponent] Corrected JSON preview:', finalRequestBody.substring(0, 300));
|
||||
} catch (e) {
|
||||
console.error('[LiveComponent] Failed to parse/correct JSON:', e);
|
||||
// Last resort: manually add version to JSON string
|
||||
const jsonObj = JSON.parse(requestBodyString);
|
||||
jsonObj.version = versionToSend || 1;
|
||||
finalRequestBody = JSON.stringify(jsonObj);
|
||||
}
|
||||
}
|
||||
|
||||
// CRITICAL: Final verification
|
||||
if (!finalRequestBody.includes('"version"')) {
|
||||
console.error('[LiveComponent] CRITICAL ERROR: Version still missing after correction!');
|
||||
}
|
||||
|
||||
const response = await fetch(`/live-component/${componentId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify(requestBody)
|
||||
body: finalRequestBody
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
@@ -758,7 +1069,6 @@ class LiveComponentManager {
|
||||
|
||||
// Check for version conflict
|
||||
const serverState = data.state || {};
|
||||
const currentVersion = stateWrapper.version || 1;
|
||||
const serverVersion = serverState.version || 1;
|
||||
|
||||
if (serverVersion !== currentVersion + 1) {
|
||||
@@ -789,18 +1099,54 @@ class LiveComponentManager {
|
||||
}
|
||||
}
|
||||
|
||||
// Resolve target element (supports data-lc-target)
|
||||
const targetElement = this.resolveTarget(actionElement, componentId);
|
||||
if (!targetElement) {
|
||||
throw new Error(`[LiveComponent] Could not resolve target element for component: ${componentId}`);
|
||||
}
|
||||
|
||||
// Get swap strategy from action element or use default
|
||||
const swapStrategy = actionElement?.dataset.lcSwap || 'innerHTML';
|
||||
|
||||
// Handle fragment-based response (partial rendering)
|
||||
if (data.fragments) {
|
||||
// For fragments, always use the component element as container
|
||||
this.updateFragments(config.element, data.fragments);
|
||||
}
|
||||
// Handle full HTML response (fallback or no fragments requested)
|
||||
else if (data.html) {
|
||||
config.element.innerHTML = data.html;
|
||||
this.setupActionHandlers(config.element);
|
||||
// Use swap strategy if specified, otherwise default to innerHTML
|
||||
if (swapStrategy === 'innerHTML') {
|
||||
// Default behavior - maintain backwards compatibility
|
||||
targetElement.innerHTML = data.html;
|
||||
} else {
|
||||
// Use swapElement for other strategies with transitions and scroll
|
||||
const success = this.domPatcher.swapElement(targetElement, data.html, swapStrategy, transition, scrollOptions);
|
||||
if (!success) {
|
||||
console.warn(`[LiveComponent] Swap failed, falling back to innerHTML`);
|
||||
targetElement.innerHTML = data.html;
|
||||
}
|
||||
}
|
||||
|
||||
// Re-setup action handlers on the updated element
|
||||
// For outerHTML swap, targetElement might be replaced, so we need to find it again
|
||||
if (swapStrategy === 'outerHTML') {
|
||||
// Find the new element if it was replaced
|
||||
const newElement = document.querySelector(`[data-live-component="${componentId}"]`);
|
||||
if (newElement) {
|
||||
this.setupActionHandlers(newElement);
|
||||
} else {
|
||||
// Fallback: setup handlers on parent or document
|
||||
this.setupActionHandlers(targetElement.parentElement || document.body);
|
||||
}
|
||||
} else {
|
||||
this.setupActionHandlers(targetElement);
|
||||
}
|
||||
}
|
||||
|
||||
// Re-initialize tooltips after DOM update
|
||||
this.tooltipManager.initComponent(config.element);
|
||||
// Use targetElement for tooltips (might differ from config.element if target was used)
|
||||
this.tooltipManager.initComponent(targetElement);
|
||||
|
||||
// Update component state using StateSerializer
|
||||
if (data.state) {
|
||||
@@ -812,6 +1158,16 @@ class LiveComponentManager {
|
||||
this.handleServerEvents(data.events);
|
||||
}
|
||||
|
||||
// Handle URL updates (data-lc-push-url or data-lc-replace-url)
|
||||
const pushUrl = actionElement?.dataset.lcPushUrl;
|
||||
const replaceUrl = actionElement?.dataset.lcReplaceUrl;
|
||||
|
||||
if (pushUrl) {
|
||||
urlManager.pushUrl(pushUrl, data.title);
|
||||
} else if (replaceUrl) {
|
||||
urlManager.replaceUrl(replaceUrl, data.title);
|
||||
}
|
||||
|
||||
console.log(`[LiveComponent] Action executed: ${componentId}.${method}`, data);
|
||||
|
||||
// Log successful action to DevTools
|
||||
@@ -822,7 +1178,7 @@ class LiveComponentManager {
|
||||
this.requestDeduplicator.cacheResult(componentId, method, params, data);
|
||||
|
||||
// Hide loading state
|
||||
this.loadingStateManager.hideLoading(componentId);
|
||||
this.loadingStateManager.hideLoading(componentId, actionElement);
|
||||
|
||||
return data;
|
||||
|
||||
@@ -844,7 +1200,7 @@ class LiveComponentManager {
|
||||
}
|
||||
|
||||
// Hide loading state on error
|
||||
this.loadingStateManager.hideLoading(componentId);
|
||||
this.loadingStateManager.hideLoading(componentId, null);
|
||||
|
||||
// Handle error via ErrorBoundary
|
||||
await this.errorBoundary.handleError(componentId, method, error, {
|
||||
@@ -860,6 +1216,49 @@ class LiveComponentManager {
|
||||
return this.requestDeduplicator.registerPendingRequest(componentId, method, params, requestPromise);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve target element for action updates
|
||||
*
|
||||
* Supports data-lc-target attribute to specify where updates should be applied.
|
||||
* Falls back to component element if no target is specified or target not found.
|
||||
*
|
||||
* @param {HTMLElement} actionElement - Element that triggered the action
|
||||
* @param {string} componentId - Component ID
|
||||
* @returns {HTMLElement|null} - Target element or null if not found
|
||||
*/
|
||||
resolveTarget(actionElement, componentId) {
|
||||
const targetSelector = actionElement?.dataset.lcTarget;
|
||||
|
||||
// If no target specified, use component element
|
||||
if (!targetSelector) {
|
||||
const config = this.components.get(componentId);
|
||||
return config?.element || null;
|
||||
}
|
||||
|
||||
// Try to find target element
|
||||
let targetElement = null;
|
||||
|
||||
// First try: querySelector from document
|
||||
targetElement = document.querySelector(targetSelector);
|
||||
|
||||
// Second try: querySelector from action element's closest component
|
||||
if (!targetElement && actionElement) {
|
||||
const componentElement = actionElement.closest(`[${LiveComponentCoreAttributes.LIVE_COMPONENT}]`);
|
||||
if (componentElement) {
|
||||
targetElement = componentElement.querySelector(targetSelector);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: use component element if target not found
|
||||
if (!targetElement) {
|
||||
console.warn(`[LiveComponent] Target element not found: ${targetSelector}, falling back to component element`);
|
||||
const config = this.components.get(componentId);
|
||||
return config?.element || null;
|
||||
}
|
||||
|
||||
return targetElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update specific fragments using DOM patching
|
||||
*
|
||||
@@ -922,12 +1321,15 @@ class LiveComponentManager {
|
||||
// Log event to DevTools
|
||||
this.logEventToDevTools(name, { payload, target }, 'server');
|
||||
|
||||
// Convert payload to object if it's an array (from EventPayload)
|
||||
const eventPayload = Array.isArray(payload) ? payload : (payload || {});
|
||||
|
||||
if (target) {
|
||||
// Targeted event - only for specific component
|
||||
this.dispatchToComponent(target, name, payload);
|
||||
this.dispatchToComponent(target, name, eventPayload);
|
||||
} else {
|
||||
// Broadcast event - to all listening components
|
||||
this.broadcast(name, payload);
|
||||
this.broadcast(name, eventPayload);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -943,6 +1345,37 @@ class LiveComponentManager {
|
||||
handler.callback(payload);
|
||||
}
|
||||
});
|
||||
|
||||
// Also dispatch as custom DOM event
|
||||
document.dispatchEvent(new CustomEvent(`livecomponent:${eventName}`, {
|
||||
detail: payload
|
||||
}));
|
||||
|
||||
// Dispatch direct event for UI events
|
||||
if (this.isUIEvent(eventName)) {
|
||||
document.dispatchEvent(new CustomEvent(eventName, {
|
||||
detail: payload
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatch component event (used for batch operations)
|
||||
* @param {string} componentId - Component ID
|
||||
* @param {string} eventName - Event name
|
||||
* @param {Object} payload - Event payload
|
||||
*/
|
||||
dispatchComponentEvent(componentId, eventName, payload) {
|
||||
// Convert payload to object if needed
|
||||
const eventPayload = Array.isArray(payload) ? payload : (payload || {});
|
||||
|
||||
// Dispatch to component-specific handlers
|
||||
this.dispatchToComponent(componentId, eventName, eventPayload);
|
||||
|
||||
// Also broadcast if no target specified (for UI events)
|
||||
if (this.isUIEvent(eventName)) {
|
||||
this.broadcast(eventName, eventPayload);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -955,10 +1388,28 @@ class LiveComponentManager {
|
||||
handler.callback(payload);
|
||||
});
|
||||
|
||||
// Also dispatch as custom DOM event
|
||||
// Dispatch as custom DOM event with livecomponent: prefix for compatibility
|
||||
document.dispatchEvent(new CustomEvent(`livecomponent:${eventName}`, {
|
||||
detail: payload
|
||||
}));
|
||||
|
||||
// Also dispatch direct event (without prefix) for UI events
|
||||
// This allows UIEventHandler to listen to toast:show, modal:show, etc.
|
||||
if (this.isUIEvent(eventName)) {
|
||||
document.dispatchEvent(new CustomEvent(eventName, {
|
||||
detail: payload
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if event name is a UI event
|
||||
* @param {string} eventName - Event name
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isUIEvent(eventName) {
|
||||
const uiEventPrefixes = ['toast:', 'modal:'];
|
||||
return uiEventPrefixes.some(prefix => eventName.startsWith(prefix));
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1352,7 +1803,7 @@ class LiveComponentManager {
|
||||
this.tooltipManager.cleanupComponent(config.element);
|
||||
|
||||
// Hide any active loading states
|
||||
this.loadingStateManager.hideLoading(componentId);
|
||||
this.loadingStateManager.hideLoading(componentId, null);
|
||||
this.loadingStateManager.clearConfig(componentId);
|
||||
|
||||
// Cleanup UI components
|
||||
@@ -1599,7 +2050,7 @@ window.LiveComponent = LiveComponent;
|
||||
// Auto-initialize on DOM ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('[data-live-component]').forEach(el => {
|
||||
document.querySelectorAll(`[${LiveComponentCoreAttributes.LIVE_COMPONENT}]`).forEach(el => {
|
||||
LiveComponent.init(el);
|
||||
});
|
||||
});
|
||||
@@ -1629,7 +2080,7 @@ export async function init(config = {}, state = {}) {
|
||||
|
||||
// Initialize all regular LiveComponents in the page
|
||||
// This is needed when loaded as a core module (not via data-module attributes)
|
||||
const components = document.querySelectorAll('[data-live-component]');
|
||||
const components = document.querySelectorAll(`[${LiveComponentCoreAttributes.LIVE_COMPONENT}]`);
|
||||
console.log(`[LiveComponent] Found ${components.length} regular components to initialize`);
|
||||
|
||||
components.forEach(el => {
|
||||
@@ -1637,7 +2088,7 @@ export async function init(config = {}, state = {}) {
|
||||
});
|
||||
|
||||
// Lazy components are automatically initialized by LazyComponentLoader
|
||||
const lazyComponents = document.querySelectorAll('[data-live-component-lazy]');
|
||||
const lazyComponents = document.querySelectorAll(`[${LiveComponentLazyAttributes.LIVE_COMPONENT_LAZY}]`);
|
||||
console.log(`[LiveComponent] Found ${lazyComponents.length} lazy components (will load on demand)`);
|
||||
|
||||
// Log nested component stats
|
||||
@@ -1663,7 +2114,7 @@ export function initElement(element, options = {}) {
|
||||
console.log('[LiveComponent] Initializing element with data-module:', element);
|
||||
|
||||
// Find all LiveComponents within this element (or the element itself)
|
||||
const components = element.querySelectorAll('[data-live-component]');
|
||||
const components = element.querySelectorAll(`[${LiveComponentCoreAttributes.LIVE_COMPONENT}]`);
|
||||
|
||||
if (components.length === 0 && element.hasAttribute('data-live-component')) {
|
||||
// Element itself is a LiveComponent
|
||||
@@ -1687,6 +2138,7 @@ export { ChunkedUploader } from './ChunkedUploader.js';
|
||||
export { tooltipManager } from './TooltipManager.js';
|
||||
export { actionLoadingManager } from './ActionLoadingManager.js';
|
||||
export { LiveComponentUIHelper } from './LiveComponentUIHelper.js';
|
||||
export { UIEventHandler } from './UIEventHandler.js';
|
||||
export { LoadingStateManager } from './LoadingStateManager.js';
|
||||
|
||||
export default LiveComponent;
|
||||
|
||||
@@ -16,7 +16,7 @@ export class CsrfManager {
|
||||
headerName: config.headerName || 'X-CSRF-TOKEN',
|
||||
refreshInterval: config.refreshInterval || 30 * 60 * 1000, // 30 minutes
|
||||
autoRefresh: config.autoRefresh ?? true,
|
||||
endpoint: config.endpoint || '/api/csrf-token',
|
||||
endpoint: config.endpoint || '/api/csrf/token',
|
||||
...config
|
||||
};
|
||||
|
||||
|
||||
52
resources/views/errors/403.view.php
Normal file
52
resources/views/errors/403.view.php
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>403 - Forbidden</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.error-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 {
|
||||
color: #d32f2f;
|
||||
margin-top: 0;
|
||||
}
|
||||
.error-message {
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-container">
|
||||
<h1>403 - Forbidden</h1>
|
||||
<div class="error-message">
|
||||
<p>{{$message ?? 'Access denied. You do not have permission to access this resource.'}}</p>
|
||||
</div>
|
||||
@if(isset($debug) && $debug['isDebugMode'] ?? false)
|
||||
<div class="debug-info">
|
||||
<h3>Debug Information</h3>
|
||||
<p><strong>Exception:</strong> {{$debug['exceptionClass'] ?? 'Unknown'}}</p>
|
||||
<p><strong>File:</strong> {{$debug['file'] ?? 'Unknown'}}:{{$debug['line'] ?? 'Unknown'}}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
16
resources/views/test/honeypot-test.view.php
Normal file
16
resources/views/test/honeypot-test.view.php
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Honeypot Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Honeypot Test Form</h1>
|
||||
<form method="POST" action="/test/honeypot-submit">
|
||||
<input type="text" name="name" placeholder="Name" required>
|
||||
<input type="email" name="email" placeholder="Email" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user