mtrl-addons 0.1.2 → 0.2.1

package/src/components/{list → vlist}/config.ts

@@ -5,19 +5,10 @@
  * Follows mtrl patterns for component configuration.
  */
 
-import {
-  createComponentConfig,
-  createElementConfig as coreCreateElementConfig,
-} from "mtrl/src/core/config/component";
-import { LIST_DEFAULTS, LIST_CLASSES } from "./constants";
+import { createComponentConfig, createElementConfig } from "mtrl";
+import { VLIST_CLASSES } from "./constants";
 import type { ListConfig, ListItem } from "./types";
 import type { ListComponent } from "./types";
-import { DATA_PAGINATION } from "../../core/collection/constants";
-import { VIRTUAL_SCROLLING } from "../../core/list-manager/constants";
-import {
-  convertRenderItemToTemplate,
-  getDefaultTemplate,
-} from "../../core/list-manager/features/viewport/template";
 
 /**
  * Default configuration for the mtrl-addons List component
@@ -42,15 +33,14 @@ export const defaultConfig: Partial<ListConfig> = {
   // Scroll settings
   scroll: {
     virtual: true,
-    itemSize: "auto",
-    estimatedItemSize: 50,
+    itemSize: 50,
     overscan: 5,
     animation: false,
     restorePosition: false,
   },
 
   // Component settings
-  className: LIST_CLASSES.BASE,
+  className: VLIST_CLASSES.LIST,
   prefix: "mtrl",
   componentName: "list",
   ariaLabel: "List",
@@ -62,6 +52,59 @@ export const defaultConfig: Partial<ListConfig> = {
  * @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>> {
@@ -74,15 +117,14 @@ export function createBaseConfig<T extends ListItem = ListItem>(
     );
   }
 
-  // Use mtrl core config system for proper merging and validation
-  const mergedConfig = createComponentConfig(defaultConfig, config, "list");
+  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 &&
-    typeof (config as any).renderItem === "object" &&
-    !mergedConfig.template
-  ) {
+  if ((config as any).renderItem && !mergedConfig.template) {
     mergedConfig.template = convertRenderItemToTemplate(
       (config as any).renderItem
     );
@@ -114,11 +156,10 @@ export function getElementConfig<T extends ListItem = ListItem>(
     "aria-label": config.ariaLabel || "List",
   };
 
-  // Create element config using mtrl core system
-  return coreCreateElementConfig(config, {
+  return createElementConfig(config as any, {
     tag: "div",
     attributes,
-    className: [LIST_CLASSES.BASE, LIST_CLASSES.ADDONS], // Clean: list list-addons
+    className: VLIST_CLASSES.LIST,
   });
 }
 
@@ -274,79 +315,9 @@ export const validateConfig = (config: ListConfig): void => {
 export const getCollectionConfig = (config: ListConfig) => ({
   adapter: config.adapter,
   items: config.items,
-  pageSize: config.collection?.limit || DATA_PAGINATION.DEFAULT_PAGE_SIZE,
-  cache: config.collection?.cache || {
+  cache: (config.collection as any)?.cache || {
     enabled: true,
     maxSize: 1000,
     ttl: 300000, // 5 minutes
   },
 });
-
-/**
- * Creates List Manager configuration from List config
- */
-export const getListManagerConfig = (config: ListConfig) => ({
-  // Container
-  container: config.container,
-
-  // Collection configuration
-  collection: getCollectionConfig(config),
-
-  // Template configuration
-  template: {
-    template: config.template,
-  },
-
-  // Component prefix
-  prefix: config.prefix || "mtrl",
-
-  // Orientation configuration
-  orientation: {
-    orientation: config.orientation?.orientation || "vertical",
-    autoDetect: config.orientation?.autoDetect || false,
-    reverse: config.orientation?.reverse || false,
-    crossAxisAlignment: config.orientation?.crossAxisAlignment || "stretch",
-  },
-
-  // Virtual scrolling
-  virtual: {
-    enabled: config.scroll?.virtual ?? true,
-    itemSize: config.scroll?.itemSize ?? "auto",
-    estimatedItemSize: config.scroll?.estimatedItemSize ?? 50,
-    overscan: config.scroll?.overscan ?? VIRTUAL_SCROLLING.DEFAULT_OVERSCAN,
-    ...config.listManager?.virtual,
-  },
-
-  // Element recycling
-  recycling: {
-    enabled: config.listManager?.recycling?.enabled ?? true,
-    maxPoolSize: config.listManager?.recycling?.maxPoolSize ?? 100,
-    minPoolSize: config.listManager?.recycling?.minPoolSize ?? 10,
-    ...config.listManager?.recycling,
-  },
-
-  // Intersection observers
-  intersection: {
-    pagination: {
-      enabled: true,
-      rootMargin: "200px",
-      threshold: 0.1,
-      ...config.listManager?.intersection?.pagination,
-    },
-    loading: {
-      enabled: true,
-      ...config.listManager?.intersection?.loading,
-    },
-  },
-
-  // Performance configuration
-  performance: {
-    frameScheduling: true,
-    memoryCleanup: true,
-    ...config.listManager?.performance,
-  },
-
-  // Debug and styling
-  debug: config.debug || false,
-  componentName: "list-manager",
-});

package/src/components/vlist/constants.ts

@@ -0,0 +1,23 @@
+/**
+ * mtrl-addons List Component Constants
+ *
+ * Constants for the addons list component.
+ * Note: Base mtrl list functionality is handled by mtrl core.
+ * These constants are for addons-specific features only.
+ */
+
+/**
+ * CSS class names for VList component
+ * Following BEM convention: component__element--modifier
+ * Note: mtrl prefix is added automatically by core DOM classes system
+ */
+export const VLIST_CLASSES = {
+  /** List element */
+  LIST: "vlist",
+  /** List item */
+  ITEM: "viewport-item",
+  /** Selected list item */
+  SELECTED: "viewport-item--selected",
+  /** Empty state */
+  EMPTY: "vlist--empty",
+} as const;

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

@@ -0,0 +1,322 @@
+/**
+ * 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");
+      },
+    };
+  };
+};

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

@@ -0,0 +1,10 @@
+/**
+ * VList Component Features
+ *
+ * List-specific features and enhancements.
+ */
+
+// VList-specific features
+export { withViewport } from "./viewport";
+export { withAPI } from "./api";
+export { withSelection } from "./selection";