mtrl-addons 0.2.1 → 0.2.3

package/src/components/vlist/config.ts

@@ -1,323 +0,0 @@
-/**
- * mtrl-addons List Component Configuration
- *
- * Configuration utilities and defaults for the list component.
- * Follows mtrl patterns for component configuration.
- */
-
-import { createComponentConfig, createElementConfig } from "mtrl";
-import { VLIST_CLASSES } from "./constants";
-import type { ListConfig, ListItem } from "./types";
-import type { ListComponent } from "./types";
-
-/**
- * Default configuration for the mtrl-addons List component
- */
-export const defaultConfig: Partial<ListConfig> = {
-  // Collection settings (for API-connected lists)
-  adapter: undefined,
-
-  // Static data (for in-memory lists)
-  items: [],
-
-  // Template settings
-  template: undefined, // Will use default template if not provided
-
-  // Selection settings
-  selection: {
-    enabled: false,
-    mode: "none",
-    selectedIndices: [],
-  },
-
-  // Scroll settings
-  scroll: {
-    virtual: true,
-    itemSize: 50,
-    overscan: 5,
-    animation: false,
-    restorePosition: false,
-  },
-
-  // Component settings
-  className: VLIST_CLASSES.LIST,
-  prefix: "mtrl",
-  componentName: "list",
-  ariaLabel: "List",
-  debug: false,
-};
-
-/**
- * Creates the base configuration for List component
- * @param {ListConfig} config - User provided configuration
- * @returns {ListConfig} Complete configuration with defaults applied
- */
-// Minimal converter to avoid hardcoding external helpers
-function convertRenderItemToTemplate(render: any) {
-  if (typeof render === "function") return render;
-  if (render && typeof render === "object") {
-    const { headline, supporting, leading, trailing } = render as any;
-    return (item: any, index: number) => {
-      const container = document.createElement("div");
-      container.className = "mtrl-list-item";
-      if (leading) {
-        const el = document.createElement("div");
-        el.className = "mtrl-list-item__leading";
-        el.innerHTML =
-          typeof leading === "function"
-            ? leading(item, index)
-            : String(leading);
-        container.appendChild(el);
-      }
-      const content = document.createElement("div");
-      content.className = "mtrl-list-item__content";
-      if (headline) {
-        const h = document.createElement("div");
-        h.className = "mtrl-list-item__headline";
-        h.innerHTML =
-          typeof headline === "function"
-            ? headline(item, index)
-            : String(headline);
-        content.appendChild(h);
-      }
-      if (supporting) {
-        const s = document.createElement("div");
-        s.className = "mtrl-list-item__supporting";
-        s.innerHTML =
-          typeof supporting === "function"
-            ? supporting(item, index)
-            : String(supporting);
-        content.appendChild(s);
-      }
-      container.appendChild(content);
-      if (trailing) {
-        const el = document.createElement("div");
-        el.className = "mtrl-list-item__trailing";
-        el.innerHTML =
-          typeof trailing === "function"
-            ? trailing(item, index)
-            : String(trailing);
-        container.appendChild(el);
-      }
-      return container;
-    };
-  }
-  return (item: any) => String(item);
-}
-
-export function createBaseConfig<T extends ListItem = ListItem>(
-  config: ListConfig<T> = {}
-): Required<ListConfig<T>> {
-  console.log("🔧 [MTRL-ADDONS-LIST] Creating base configuration");
-
-  // Validate required configuration
-  if (!config.items && !config.adapter) {
-    throw new Error(
-      "List requires either static items or an adapter for data loading"
-    );
-  }
-
-  const mergedConfig = createComponentConfig(
-    defaultConfig as any,
-    config as any,
-    "list"
-  ) as any;
-
-  // Convert renderItem object to template function if provided
-  if ((config as any).renderItem && !mergedConfig.template) {
-    mergedConfig.template = convertRenderItemToTemplate(
-      (config as any).renderItem
-    );
-  }
-
-  // Validate selection configuration
-  if (
-    mergedConfig.selection?.enabled &&
-    mergedConfig.selection?.mode === undefined
-  ) {
-    mergedConfig.selection.mode = "single";
-  }
-
-  return mergedConfig as Required<ListConfig<T>>;
-}
-
-/**
- * Creates element configuration for withElement
- * @param {ListConfig} config - List configuration
- * @returns {Object} Element configuration
- */
-export function getElementConfig<T extends ListItem = ListItem>(
-  config: ListConfig<T>
-): any {
-  const attributes = {
-    "data-component": "list",
-    "data-addons": "true",
-    role: "list",
-    "aria-label": config.ariaLabel || "List",
-  };
-
-  return createElementConfig(config as any, {
-    tag: "div",
-    attributes,
-    className: VLIST_CLASSES.LIST,
-  });
-}
-
-/**
- * Creates API configuration for the List component
- * @param {Object} component - Component with list functionality
- * @returns {Object} API configuration object for withApi
- */
-export function getApiConfig<T extends ListItem = ListItem>(component: any) {
-  return {
-    // Data operations
-    data: {
-      add: component.add,
-      update: component.update,
-      remove: component.remove,
-      clear: component.clear,
-      refresh: component.refresh,
-      getItems: component.getItems,
-      getItem: component.getItem,
-      query: component.query,
-      sort: component.sort,
-      getSize: component.getSize,
-      isEmpty: component.isEmpty,
-      isLoading: component.isLoading,
-      getError: component.getError,
-    },
-
-    // Selection operations (if enabled)
-    selection: component.config?.selection?.enabled
-      ? {
-          selectItem: component.selectItem,
-          deselectItem: component.deselectItem,
-          selectAll: component.selectAll,
-          deselectAll: component.deselectAll,
-          getSelectedItems: component.getSelectedItems,
-          getSelectedIds: component.getSelectedIds,
-        }
-      : undefined,
-
-    // Scrolling operations
-    scrolling: {
-      scrollToItem: component.scrollToItem,
-      scrollToIndex: component.scrollToIndex,
-      scrollToPage: component.scrollToPage,
-    },
-
-    // Performance operations
-    performance: {
-      getMetrics: component.getMetrics,
-      resetMetrics: component.resetMetrics,
-    },
-
-    // Template operations
-    template: {
-      setTemplate: component.setTemplate,
-      getTemplate: component.getTemplate,
-    },
-
-    // Events system
-    events: {
-      on: component.on,
-      off: component.off,
-      emit: component.emit,
-      subscribe: component.subscribe,
-    },
-
-    // Lifecycle operations
-    lifecycle: {
-      destroy: component.destroy,
-    },
-
-    // Configuration access
-    config: {
-      selection: component.config?.selection,
-      scroll: component.config?.scroll,
-    },
-  };
-}
-
-/**
- * Validates list configuration
- */
-export const validateConfig = (config: ListConfig): void => {
-  // Validate container
-  if (config.container) {
-    if (typeof config.container === "string") {
-      const element = document.querySelector(config.container);
-      if (!element) {
-        throw new Error(
-          `List container element not found: ${config.container}`
-        );
-      }
-    } else if (!(config.container instanceof HTMLElement)) {
-      throw new Error(
-        "List container must be an HTMLElement or CSS selector string"
-      );
-    }
-  }
-
-  // Validate template
-  if (config.template && typeof config.template !== "function") {
-    throw new Error("List template must be a function");
-  }
-
-  // Validate items
-  if (config.items && !Array.isArray(config.items)) {
-    throw new Error("List items must be an array");
-  }
-
-  // Validate selection mode
-  if (
-    config.selection?.mode &&
-    !["single", "multiple", "none"].includes(config.selection.mode)
-  ) {
-    throw new Error(
-      'List selection mode must be "single", "multiple", or "none"'
-    );
-  }
-
-  // Validate scroll configuration
-  if (
-    config.scroll?.itemSize !== "auto" &&
-    typeof config.scroll?.itemSize === "number" &&
-    config.scroll.itemSize <= 0
-  ) {
-    throw new Error('List item size must be positive number or "auto"');
-  }
-
-  // Validate density
-  if (
-    config.density &&
-    !["default", "compact", "comfortable"].includes(config.density)
-  ) {
-    throw new Error(
-      'List density must be "default", "compact", or "comfortable"'
-    );
-  }
-
-  // Validate variant
-  if (
-    config.variant &&
-    !["default", "dense", "comfortable"].includes(config.variant)
-  ) {
-    throw new Error(
-      'List variant must be "default", "dense", or "comfortable"'
-    );
-  }
-};
-
-/**
- * Creates Collection configuration from List config
- */
-export const getCollectionConfig = (config: ListConfig) => ({
-  adapter: config.adapter,
-  items: config.items,
-  cache: (config.collection as any)?.cache || {
-    enabled: true,
-    maxSize: 1000,
-    ttl: 300000, // 5 minutes
-  },
-});

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

@@ -1,322 +0,0 @@
-/**
- * API feature for VList
- * Provides a clean public API for the VList component
- */
-
-import type { VListConfig, VListItem } from "../types";
-
-/**
- * Adds public API methods to VList
- */
-export const withAPI = <T extends VListItem = VListItem>(
-  config: VListConfig<T>
-) => {
-  return (component: any) => {
-    // Initialize viewport on creation
-    setTimeout(() => {
-      if (component.viewport && component.viewport.initialize) {
-        component.viewport.initialize();
-      }
-    }, 0);
-
-    // Track loading state
-    let isLoading = false;
-    let selectedIds = new Set<string | number>();
-
-    // Listen for collection events
-    component.on?.("collection:range-loaded", () => {
-      isLoading = false;
-    });
-    component.on?.("collection:range-failed", () => {
-      isLoading = false;
-    });
-
-    return {
-      ...component,
-
-      // Data operations
-      setItems(items: T[]) {
-        if (component.viewport?.collection) {
-          component.viewport.collection.setItems(items);
-        } else {
-          component.items = items;
-          component.totalItems = items.length;
-        }
-        component.emit?.("items:set", { items, total: items.length });
-      },
-
-      getItems(): T[] {
-        // Collection is added directly to component, not to viewport.collection
-        if ((component as any).collection?.getItems) {
-          return (component as any).collection.getItems();
-        }
-        return component.items || [];
-      },
-
-      getVisibleItems(): T[] {
-        const range = component.viewport?.getVisibleRange() || {
-          start: 0,
-          end: 0,
-        };
-        const items = this.getItems();
-        return items.slice(range.start, range.end);
-      },
-
-      getItemCount(): number {
-        if (component.viewport?.collection) {
-          return component.viewport.collection.getTotalItems();
-        }
-        return component.totalItems || component.items?.length || 0;
-      },
-
-      // Loading operations
-      async loadRange(
-        page: number,
-        limit: number,
-        strategy: string = "page",
-        alignment?: string
-      ) {
-        isLoading = true;
-
-        if (component.viewport?.collection) {
-          const offset = strategy === "page" ? (page - 1) * limit : page;
-          try {
-            await component.viewport.collection.loadRange(offset, limit);
-            component.emit?.("load", { page, limit, strategy });
-
-            // Scroll to the loaded range if alignment is specified
-            if (alignment) {
-              const index = offset;
-              this.scrollToIndex(index, alignment);
-            }
-          } catch (error) {
-            component.emit?.("error", { error });
-            throw error;
-          } finally {
-            isLoading = false;
-          }
-        }
-      },
-
-      // Data loading
-      loadNext: async function () {
-        console.log(`[VList] loadNext()`);
-
-        if (component.viewport?.collection) {
-          const totalItems = component.viewport.collection.getTotalItems();
-          const loadedRanges = component.viewport.collection.getLoadedRanges();
-
-          // Find the next unloaded range
-          let nextOffset = 0;
-          for (const rangeId of loadedRanges) {
-            const rangeEnd = (rangeId + 1) * (config.pagination?.limit || 20);
-            if (rangeEnd > nextOffset) {
-              nextOffset = rangeEnd;
-            }
-          }
-
-          if (nextOffset < totalItems) {
-            await component.viewport.collection.loadRange(
-              nextOffset,
-              config.pagination?.limit || 20
-            );
-          }
-        }
-
-        return Promise.resolve();
-      },
-
-      isLoading(): boolean {
-        return isLoading;
-      },
-
-      hasNext(): boolean {
-        if (component.viewport?.collection) {
-          const total = component.viewport.collection.getTotalItems();
-          const items = component.viewport.collection.getItems();
-          return items.length < total;
-        }
-        return false;
-      },
-
-      // Note: Selection operations are handled by the withSelection feature
-      // These are kept for backward compatibility but delegate to selection feature if available
-      getSelectedIds(): (string | number)[] {
-        if (typeof component.getSelectedIndices === "function") {
-          // Use selection feature if available
-          const items = this.getItems();
-          const indices = component.getSelectedIndices();
-          return indices.map((idx: number) => (items[idx] as any)?.id || idx);
-        }
-        // Fallback to local tracking
-        return Array.from(selectedIds);
-      },
-
-      selectItem(id: string | number) {
-        if (typeof component.selectItems === "function") {
-          // Use selection feature if available
-          const items = this.getItems();
-          const index = items.findIndex((item: any) => item.id === id);
-          if (index >= 0) {
-            component.selectItems([index]);
-          }
-        } else {
-          // Fallback to local tracking
-          selectedIds.add(id);
-          component.emit?.("selection:change", {
-            selected: this.getSelectedIds(),
-          });
-        }
-      },
-
-      deselectItem(id: string | number) {
-        if (typeof component.deselectItems === "function") {
-          // Use selection feature if available
-          const items = this.getItems();
-          const index = items.findIndex((item: any) => item.id === id);
-          if (index >= 0) {
-            component.deselectItems([index]);
-          }
-        } else {
-          // Fallback to local tracking
-          selectedIds.delete(id);
-          component.emit?.("selection:change", {
-            selected: this.getSelectedIds(),
-          });
-        }
-      },
-
-      clearSelection() {
-        if (typeof component.clearSelection === "function") {
-          // Use selection feature if available
-          component.clearSelection();
-        } else {
-          // Fallback to local tracking
-          selectedIds.clear();
-          component.emit?.("selection:change", { selected: [] });
-        }
-      },
-
-      // Scrolling methods
-      scrollToIndex: (
-        index: number,
-        alignment: "start" | "center" | "end" = "start",
-        animate?: boolean
-      ) => {
-        if (component.viewport) {
-          component.viewport.scrollToIndex(index, alignment);
-        }
-        return Promise.resolve();
-      },
-
-      scrollToItem: async function (
-        itemId: string,
-        alignment: "start" | "center" | "end" = "start",
-        animate?: boolean
-      ) {
-        const items = this.getItems();
-        const index = items.findIndex(
-          (item: any) => String(item.id) === String(itemId)
-        );
-
-        if (index >= 0) {
-          return this.scrollToIndex(index, alignment, animate);
-        }
-
-        console.warn(`Item ${itemId} not found`);
-        return Promise.resolve();
-      },
-
-      scrollToTop: function () {
-        return this.scrollToIndex(0, "start");
-      },
-
-      scrollToBottom: function () {
-        const totalItems = this.getItemCount();
-        if (totalItems > 0) {
-          return this.scrollToIndex(totalItems - 1, "end");
-        }
-        return Promise.resolve();
-      },
-
-      scrollToPage: async function (
-        pageNum: number,
-        alignment: "start" | "center" | "end" = "start",
-        animate?: boolean
-      ) {
-        // console.log(`[VList] scrollToPage(${pageNum})`);
-
-        // Get limit from config (rangeSize) or default
-        const limit = config.pagination?.limit || 20;
-
-        // Check if we're in cursor mode
-        if (config.pagination?.strategy === "cursor") {
-          // In cursor mode, we need to handle sequential loading
-          const collection = (component.viewport as any)?.collection;
-          if (collection) {
-            const loadedRanges = collection.getLoadedRanges();
-            const highestLoadedPage = loadedRanges.size;
-
-            if (pageNum > highestLoadedPage + 1) {
-              console.warn(
-                `[VList] Cannot jump to page ${pageNum} in cursor mode. ` +
-                  `Loading pages sequentially from ${
-                    highestLoadedPage + 1
-                  } to ${pageNum}`
-              );
-            }
-          }
-        }
-
-        // Use viewport's scrollToPage if available
-        if ((component.viewport as any)?.scrollToPage) {
-          (component.viewport as any).scrollToPage(pageNum, limit, alignment);
-        } else {
-          // Fallback to scrollToIndex
-          const targetIndex = (pageNum - 1) * limit;
-          await this.scrollToIndex(targetIndex, alignment);
-        }
-      },
-
-      getScrollPosition: () => {
-        return component.viewport?.getScrollPosition() || 0;
-      },
-
-      getCurrentCursor: () => {
-        const collection = (component.viewport as any)?.collection;
-        return collection?.getCurrentCursor?.() || null;
-      },
-
-      setScrollAnimation(enabled: boolean) {
-        // Store animation preference (would be used by viewport scrolling feature)
-        component.scrollAnimation = enabled;
-      },
-
-      // State
-      getState() {
-        return {
-          items: this.getItems(),
-          totalItems: component.viewport?.collection
-            ? component.viewport.collection.getTotalItems()
-            : component.totalItems || 0,
-          visibleRange: component.viewport?.getVisibleRange() || {
-            start: 0,
-            end: 0,
-          },
-          scrollPosition: component.viewport?.getScrollPosition() || 0,
-          selectedIds: this.getSelectedIds(),
-          isLoading: this.isLoading(),
-        };
-      },
-
-      // Lifecycle
-      destroy() {
-        if (component.viewport?.destroy) {
-          component.viewport.destroy();
-        }
-        selectedIds.clear();
-        component.emit?.("destroyed");
-      },
-    };
-  };
-};