michaelschiemer/resources/js/core/DataAttributes.js

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