/** * 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', };