mtrl-addons 0.1.2 → 0.2.2

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;