mtrl-addons 0.2.1 → 0.2.3

package/src/components/vlist/features/selection.ts

@@ -1,444 +0,0 @@
-// src/components/vlist/features/selection.ts
-
-import type { VListConfig, VListComponent, VListItem } from "../types";
-import { VLIST_CLASSES } from "../constants";
-import { PREFIX, addClass, removeClass } from "mtrl";
-
-/**
- * Selection state interface
- */
-interface SelectionState {
-  selectedIds: Set<string | number>;
-  mode: "none" | "single" | "multiple";
-  lastSelectedIndex?: number;
-}
-
-/**
- * Adds selection management capabilities to VList component
- * Works with viewport's virtual scrolling architecture
- *
- * @param config - VList configuration with selection options
- * @returns Function that enhances a component with selection management
- */
-export const withSelection = <T extends VListItem = VListItem>(
-  config: VListConfig<T>
-) => {
-  return (component: VListComponent<T>): VListComponent<T> => {
-    // Skip if selection is not enabled
-    if (!config.selection?.enabled || config.selection?.mode === "none") {
-      // console.log("🎯 [Selection] Skipped - not enabled or mode is none");
-      return component;
-    }
-
-    // console.log("🎯 [Selection] Initializing selection feature", {
-    //   enabled: config.selection?.enabled,
-    //   mode: config.selection?.mode,
-    // });
-
-    // Initialize selection state
-    const state: SelectionState = {
-      selectedIds: new Set(),
-      mode: config.selection?.mode || "single",
-      lastSelectedIndex: undefined,
-    };
-
-    // Get configuration options
-    const requireModifiers = config.selection?.requireModifiers ?? false;
-
-    // Add BEM modifier class to container element
-    const addContainerModifier = () => {
-      if (component.element) {
-        // Add selection mode modifier class following BEM convention
-        addClass(component.element, `vlist--selection`);
-        // Also add specific mode modifier
-        addClass(component.element, `vlist--selection-${state.mode}`);
-      }
-    };
-
-    // Defer initialization of pre-selected items until after setup
-    const initializePreselectedItems = () => {
-      if (config.selection?.selectedIndices && component.getItems) {
-        config.selection.selectedIndices.forEach((index) => {
-          const items = component.getItems();
-          const item = items?.[index];
-          if (item && (item as any).id !== undefined) {
-            state.selectedIds.add((item as any).id);
-          }
-        });
-      }
-    };
-
-    /**
-     * Apply selection class to an element
-     */
-    const applySelectionClass = (element: HTMLElement, isSelected: boolean) => {
-      if (isSelected) {
-        addClass(element, VLIST_CLASSES.SELECTED);
-      } else {
-        removeClass(element, VLIST_CLASSES.SELECTED);
-      }
-    };
-
-    /**
-     * Get item ID from element or item data
-     */
-    const getItemId = (item: any): string | number | undefined => {
-      if (item?.id !== undefined) return item.id;
-      if (typeof item === "string" || typeof item === "number") return item;
-      return undefined;
-    };
-
-    /**
-     * Handle item click for selection
-     */
-    const handleItemClick = (e: MouseEvent) => {
-      // console.log("🎯 [Selection] Click detected on:", e.target);
-
-      // Find the clicked viewport item element (wrapper)
-      const viewportItem = (e.target as HTMLElement).closest(
-        `.${PREFIX}-viewport-item[data-index]`
-      ) as HTMLElement;
-      if (!viewportItem) {
-        console.log("🎯 [Selection] No viewport item found for click");
-        return;
-      }
-
-      const index = parseInt(viewportItem.dataset.index || "-1");
-      // console.log(`🎯 [Selection] Clicked item index: ${index}`);
-      if (index < 0) return;
-
-      // Get the item data
-      const enhancedComponent = component as any;
-      const items = enhancedComponent.getItems?.();
-      const item = items?.[index];
-      if (!item) return;
-
-      const itemId = getItemId(item);
-      if (itemId === undefined) return;
-
-      // Handle selection based on mode
-      const wasSelected = state.selectedIds.has(itemId);
-
-      // console.log("🎯 [Selection] Click detected:", {
-      //   index,
-      //   itemId,
-      //   wasSelected,
-      //   mode: state.mode,
-      //   shiftKey: e.shiftKey,
-      //   ctrlKey: e.ctrlKey,
-      //   metaKey: e.metaKey,
-      //   lastSelectedIndex: state.lastSelectedIndex,
-      // });
-
-      if (state.mode === "single") {
-        // Clear previous selection
-        state.selectedIds.clear();
-
-        // Toggle selection
-        if (!wasSelected) {
-          state.selectedIds.add(itemId);
-          state.lastSelectedIndex = index;
-        } else {
-          state.lastSelectedIndex = undefined;
-        }
-      } else if (state.mode === "multiple") {
-        // Handle multi-select with keyboard modifiers
-        if (e.shiftKey && state.lastSelectedIndex !== undefined) {
-          // Range selection
-          const start = Math.min(state.lastSelectedIndex, index);
-          const end = Math.max(state.lastSelectedIndex, index);
-
-          if (!e.ctrlKey && !e.metaKey) {
-            // Clear existing selection if not holding ctrl/cmd
-            state.selectedIds.clear();
-          }
-
-          for (let i = start; i <= end; i++) {
-            const rangeItem = items?.[i];
-            const rangeItemId = getItemId(rangeItem);
-            if (rangeItemId !== undefined) {
-              state.selectedIds.add(rangeItemId);
-            }
-          }
-        } else if (e.ctrlKey || e.metaKey) {
-          // Toggle individual selection with Ctrl/Cmd
-          if (wasSelected) {
-            state.selectedIds.delete(itemId);
-          } else {
-            state.selectedIds.add(itemId);
-          }
-          state.lastSelectedIndex = index;
-        } else {
-          // Single click without modifiers
-          // console.log("🎯 [Selection] Single click without modifiers:", {
-          //   requireModifiers,
-          //   wasSelected,
-          //   willToggle: !requireModifiers,
-          // });
-
-          if (requireModifiers) {
-            // If modifiers are required, single click selects only this item
-            state.selectedIds.clear();
-            state.selectedIds.add(itemId);
-          } else {
-            // If modifiers are NOT required, single click toggles selection
-            if (wasSelected) {
-              state.selectedIds.delete(itemId);
-            } else {
-              state.selectedIds.add(itemId);
-            }
-          }
-          state.lastSelectedIndex = index;
-        }
-      }
-
-      // Update visible elements
-      updateVisibleElements();
-
-      // Emit selection change event
-      const selectedItems =
-        items?.filter((item: any) => {
-          const id = getItemId(item);
-          return id !== undefined && state.selectedIds.has(id);
-        }) || [];
-
-      const selectedIndices =
-        items?.reduce((acc: number[], item: any, idx: number) => {
-          const id = getItemId(item);
-          if (id !== undefined && state.selectedIds.has(id)) {
-            acc.push(idx);
-          }
-          return acc;
-        }, [] as number[]) || [];
-
-      component.emit?.("selection:change", {
-        selectedItems,
-        selectedIndices,
-      });
-
-      // Call the selection change callback if provided
-      if (config.selection?.onSelectionChange) {
-        config.selection.onSelectionChange(selectedItems, selectedIndices);
-      }
-
-      // Emit individual item selection event
-      component.emit?.("item:selection:change", {
-        item,
-        index,
-        isSelected: state.selectedIds.has(itemId),
-      });
-    };
-
-    /**
-     * Update selection state for visible elements
-     */
-    const updateVisibleElements = () => {
-      const container = component.element?.querySelector(
-        `.${PREFIX}-viewport-items`
-      );
-      if (!container) {
-        // console.warn("🎯 [Selection] No viewport items container found");
-        return;
-      }
-
-      const viewportItems = container.querySelectorAll(
-        `.${PREFIX}-viewport-item[data-index]`
-      );
-      // console.log(
-      //   `🎯 [Selection] Updating ${viewportItems.length} visible elements`
-      // );
-
-      const enhancedComponent = component as any;
-      const items = enhancedComponent.getItems?.();
-
-      viewportItems.forEach((viewportItem) => {
-        const index = parseInt(
-          (viewportItem as HTMLElement).dataset.index || "-1"
-        );
-        if (index < 0) return;
-
-        const item = items?.[index];
-        if (!item) return;
-
-        const itemId = getItemId(item);
-        if (itemId === undefined) return;
-
-        const isSelected = state.selectedIds.has(itemId);
-
-        // Apply selection class to the viewport item itself
-        // The new layout system doesn't have a separate inner item
-        applySelectionClass(viewportItem as HTMLElement, isSelected);
-      });
-    };
-
-    // Setup listeners after component is fully initialized
-    // Since selection is applied last, we can just use a timeout
-    setTimeout(() => {
-      // console.log("🎯 [Selection] Setting up listeners after initialization");
-
-      // Add BEM modifier classes to the container
-      addContainerModifier();
-
-      setupSelectionListeners();
-    }, 0);
-
-    function setupSelectionListeners() {
-      // Wait for viewport to be ready
-      setTimeout(() => {
-        // Initialize pre-selected items now that component is ready
-        initializePreselectedItems();
-
-        // Listen for render complete to update selection state
-        // Using type assertion since viewport:rendered is not in ListEvents type
-        (component as any).on?.("viewport:rendered", () => {
-          updateVisibleElements();
-        });
-
-        // Add click listener to the viewport element
-        if (component.element) {
-          // Use capture phase to ensure we get the event
-          component.element.addEventListener("click", handleItemClick, true);
-          // console.log(
-          //   "🎯 [Selection] Click handler attached to element (capture phase)"
-          // );
-
-          // Test if handler works
-          // setTimeout(() => {
-          //   const testItem = component.element?.querySelector(
-          //     `.${PREFIX}-viewport-item`
-          //   );
-          //   // console.log("🎯 [Selection] Test item found:", !!testItem);
-          // }, 500);
-        }
-      }, 100);
-    }
-
-    // Clean up on destroy
-    const originalDestroy = component.destroy;
-    component.destroy = () => {
-      if (component.element) {
-        component.element.removeEventListener("click", handleItemClick, true);
-      }
-      originalDestroy?.();
-    };
-
-    // Create the enhanced component
-    const enhancedComponent = {
-      ...component,
-
-      // Selection API methods
-      selectItems(indices: number[]) {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
-          console.warn("🎯 [Selection] getItems not available yet");
-          return;
-        }
-        const items = getItemsFn();
-
-        if (state.mode === "single" && indices.length > 1) {
-          // In single mode, only select the first item
-          indices = [indices[0]];
-        }
-
-        indices.forEach((index) => {
-          const item = items?.[index];
-          const itemId = getItemId(item);
-          if (itemId !== undefined) {
-            state.selectedIds.add(itemId);
-          }
-        });
-
-        // Update lastSelectedIndex for shift+click range selection
-        if (indices.length > 0) {
-          state.lastSelectedIndex = indices[indices.length - 1];
-        }
-
-        updateVisibleElements();
-        (this as any).emit?.("selection:change", {
-          selectedItems: (this as any).getSelectedItems(),
-          selectedIndices: (this as any).getSelectedIndices(),
-        });
-      },
-
-      deselectItems(indices: number[]) {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
-          console.warn("🎯 [Selection] getItems not available yet");
-          return;
-        }
-        const items = getItemsFn();
-
-        indices.forEach((index) => {
-          const item = items?.[index];
-          const itemId = getItemId(item);
-          if (itemId !== undefined) {
-            state.selectedIds.delete(itemId);
-          }
-        });
-
-        updateVisibleElements();
-        (this as any).emit?.("selection:change", {
-          selectedItems: (this as any).getSelectedItems(),
-          selectedIndices: (this as any).getSelectedIndices(),
-        });
-      },
-
-      clearSelection() {
-        state.selectedIds.clear();
-        state.lastSelectedIndex = undefined;
-        updateVisibleElements();
-        (this as any).emit?.("selection:change", {
-          selectedItems: [],
-          selectedIndices: [],
-        });
-      },
-
-      getSelectedItems(): T[] {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
-          return [];
-        }
-        const items = getItemsFn() || [];
-        return items.filter((item: any) => {
-          const id = getItemId(item);
-          return id !== undefined && state.selectedIds.has(id);
-        });
-      },
-
-      getSelectedIndices(): number[] {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
-          return [];
-        }
-        const items = getItemsFn() || [];
-        return items.reduce((acc: number[], item: any, index: number) => {
-          const id = getItemId(item);
-          if (id !== undefined && state.selectedIds.has(id)) {
-            acc.push(index);
-          }
-          return acc;
-        }, [] as number[]);
-      },
-
-      isSelected(index: number): boolean {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
-          return false;
-        }
-        const items = getItemsFn();
-        const item = items?.[index];
-        const itemId = getItemId(item);
-        return itemId !== undefined && state.selectedIds.has(itemId);
-      },
-    };
-
-    return enhancedComponent;
-  };
-};
-
-export default withSelection;

package/src/components/vlist/features/viewport.ts

@@ -1,65 +0,0 @@
-// src/components/vlist/features/viewport.ts
-
-/**
- * Viewport feature for VList
- * Integrates the core viewport functionality with VList component
- */
-
-import type { VListConfig, VListItem } from "../types";
-import { createViewport } from "../../../core/viewport";
-
-/**
- * Adds viewport functionality to VList
- */
-export const withViewport = <T extends VListItem = VListItem>(
-  config: VListConfig<T>
-) => {
-  return (component: any) => {
-    // console.log("📋 [VList] Applying viewport feature", {
-    //   hasElement: !!component.element,
-    //   hasItems: !!config.items,
-    //   itemCount: config.items?.length || 0,
-    // });
-
-    // Set initial items if provided
-    if (config.items) {
-      component.items = config.items;
-      component.totalItems = config.items.length;
-    }
-
-    // Set template if provided
-    if (config.template) {
-      component.template = config.template;
-    }
-
-    // Ensure the element has both vlist and viewport classes
-    const viewportConfig = {
-      ...config,
-      className: "mtrl-viewport", // This will be added by viewport base feature
-    };
-
-    // Pass VList config directly to viewport
-    const viewportEnhanced = createViewport(viewportConfig as any)(component);
-
-    // Handle parent element if provided
-    if (config.parent || config.container) {
-      const container = config.parent || config.container;
-      const element =
-        typeof container === "string"
-          ? document.querySelector(container)
-          : container;
-
-      if (element && viewportEnhanced.element) {
-        element.appendChild(viewportEnhanced.element);
-
-        // Ensure viewport is initialized after DOM attachment
-        if (viewportEnhanced.viewport && viewportEnhanced.viewport.initialize) {
-          // console.log("📋 [VList] Initializing viewport after DOM attachment");
-          viewportEnhanced.viewport.initialize();
-        }
-      }
-    }
-
-    return viewportEnhanced;
-  };
-};

package/src/components/vlist/features.ts

@@ -1,112 +0,0 @@
-/**
- * List component features
- *
- * Modular features that can be composed with the list component.
- * Following mtrl's functional composition pattern.
- */
-
-import type { ListComponent, ListConfig, ListItem } from "./types";
-
-/**
- * Virtual scrolling feature (future implementation)
- * This will provide window-based virtual scrolling for massive datasets
- */
-export function withVirtualScroll<T extends ListItem = ListItem>(
-  config: any = {}
-) {
-  return (list: ListComponent<T>): ListComponent<T> => {
-    console.log(
-      "🔄 [MTRL-ADDONS-LIST] Virtual scrolling feature (future implementation)"
-    );
-
-    // TODO: Implement virtual scrolling
-    // - Window-based strategy
-    // - Dynamic height calculation
-    // - GPU-accelerated positioning
-
-    return list;
-  };
-}
-
-/**
- * Enhanced list selection feature (future implementation)
- * This will provide advanced selection patterns
- */
-export function withListSelection<T extends ListItem = ListItem>(
-  config: any = {}
-) {
-  return (list: ListComponent<T>): ListComponent<T> => {
-    console.log(
-      "✅ [MTRL-ADDONS-LIST] Enhanced selection feature (future implementation)"
-    );
-
-    // TODO: Implement advanced selection
-    // - Keyboard navigation
-    // - Range selection (Shift+Click)
-    // - Checkbox selection modes
-    // - Selection persistence
-
-    return list;
-  };
-}
-
-/**
- * Advanced list styling feature (future implementation)
- * This will provide theme integration and advanced styling
- */
-export function withListStyling<T extends ListItem = ListItem>(
-  config: any = {}
-) {
-  return (list: ListComponent<T>): ListComponent<T> => {
-    console.log(
-      "�� [MTRL-ADDONS-LIST] Advanced styling feature (future implementation)"
-    );
-
-    // TODO: Implement advanced styling
-    // - Theme integration
-    // - Dynamic styling
-    // - CSS custom properties
-    // - Responsive layouts
-
-    return list;
-  };
-}
-
-/**
- * Performance optimization feature (future implementation)
- * This will provide advanced performance monitoring and optimization
- */
-export function withListPerformance<T extends ListItem = ListItem>(
-  config: any = {}
-) {
-  return (list: ListComponent<T>): ListComponent<T> => {
-    console.log(
-      "⚡ [MTRL-ADDONS-LIST] Advanced performance feature (future implementation)"
-    );
-
-    // TODO: Implement performance optimizations
-    // - Memory usage tracking
-    // - Render time optimization
-    // - Batch updates
-    // - Performance budgets
-
-    return list;
-  };
-}
-
-/**
- * Re-export the internal composition functions for advanced usage
- * These are the actual working implementations used in createList
- */
-// export {
-//   // These would be imported from the main list.ts file
-//   // withListBase,
-//   // withListStyling as withListStylingInternal,
-//   // withListSelection as withListSelectionInternal,
-//   // withListPerformance as withListPerformanceInternal,
-//   // withListAPI
-// } from './list';
-
-// Note: The above imports are commented out because they would create circular imports
-// In a real implementation, we'd restructure to have the composition functions
-// in separate files to avoid this issue