@vaadin/component-base 24.5.0-alpha1 → 24.5.0-alpha11

package/README.md

@@ -4,7 +4,7 @@ A set of helpers and mixins used by Vaadin components.
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -38,9 +38,9 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.6.0",
-    "sinon": "^13.0.2"
+    "@vaadin/chai-plugins": "24.5.0-alpha11",
+    "@vaadin/testing-helpers": "^1.0.0",
+    "sinon": "^18.0.0"
   },
-  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
+  "gitHead": "8426cea2803a10db518fc85752eeea4c5c755687"
 }

package/src/browser-utils.js

@@ -29,7 +29,7 @@ export const isTouch = (() => {
   try {
     document.createEvent('TouchEvent');
     return true;
-  } catch (e) {
+  } catch (_) {
     return false;
   }
 })();

package/src/data-provider-controller/cache.js

@@ -16,13 +16,6 @@ export class Cache {
    */
   context;
 
-  /**
-   * The number of items.
-   *
-   * @type {number}
-   */
-  size = 0;
-
   /**
    * The number of items to display per page.
    *
@@ -58,6 +51,14 @@ export class Cache {
    */
   __subCacheByIndex = {};
 
+  /**
+   * The number of items.
+   *
+   * @type {number}
+   * @private
+   */
+  __size = 0;
+
   /**
    * The total number of items, including items from expanded sub-caches.
    *
@@ -76,7 +77,7 @@ export class Cache {
   constructor(context, pageSize, size, parentCache, parentCacheIndex) {
     this.context = context;
     this.pageSize = pageSize;
-    this.size = size || 0;
+    this.size = size;
     this.parentCache = parentCache;
     this.parentCacheIndex = parentCacheIndex;
     this.__flatSize = size || 0;
@@ -136,6 +137,43 @@ export class Cache {
     return this.flatSize;
   }
 
+  /**
+   * The number of items.
+   *
+   * @return {number}
+   */
+  get size() {
+    return this.__size;
+  }
+
+  /**
+   * Sets the number of items.
+   *
+   * @param {number} size
+   */
+  set size(size) {
+    const oldSize = this.__size;
+    if (oldSize === size) {
+      return;
+    }
+
+    this.__size = size;
+
+    if (this.context.placeholder !== undefined) {
+      this.items.length = size || 0;
+      for (let i = 0; i < size || 0; i++) {
+        this.items[i] ||= this.context.placeholder;
+      }
+    }
+
+    Object.keys(this.pendingRequests).forEach((page) => {
+      const startIndex = parseInt(page) * this.pageSize;
+      if (startIndex >= this.size || 0) {
+        delete this.pendingRequests[page];
+      }
+    });
+  }
+
   /**
    * Recalculates the flattened size for the cache and its descendant caches recursively.
    */
@@ -160,7 +198,10 @@ export class Cache {
   setPage(page, items) {
     const startIndex = page * this.pageSize;
     items.forEach((item, i) => {
-      this.items[startIndex + i] = item;
+      const itemIndex = startIndex + i;
+      if (this.size === undefined || itemIndex < this.size) {
+        this.items[itemIndex] = item;
+      }
     });
   }
 

package/src/data-provider-controller/data-provider-controller.d.ts

@@ -43,11 +43,6 @@ export class DataProviderController<TItem, TDataProviderParams extends Record<st
    */
   dataProviderParams: () => TDataProviderParams;
 
-  /**
-   * A number of items in the root cache.
-   */
-  size?: number;
-
   /**
    * A number of items to display per page.
    */
@@ -69,11 +64,23 @@ export class DataProviderController<TItem, TDataProviderParams extends Record<st
    */
   rootCache: Cache<TItem>;
 
+  /**
+   * A placeholder item that is used to indicate that the item is not loaded yet.
+   */
+  placeholder?: unknown;
+
+  /**
+   * A callback that returns whether the given item is a placeholder.
+   */
+  isPlaceholder?: (item: unknown) => boolean;
+
   constructor(
     host: HTMLElement,
     config: {
       size?: number;
       pageSize: number;
+      placeholder?: unknown;
+      isPlaceholder?(item: unknown): boolean;
       getItemId(item: TItem): unknown;
       isExpanded(item: TItem): boolean;
       dataProvider: DataProvider<TItem, TDataProviderParams>;

package/src/data-provider-controller/data-provider-controller.js

@@ -29,13 +29,6 @@ export class DataProviderController extends EventTarget {
    */
   dataProviderParams;
 
-  /**
-   * A number of items in the root cache.
-   *
-   * @type {number}
-   */
-  size;
-
   /**
    * A number of items to display per page.
    *
@@ -65,12 +58,31 @@ export class DataProviderController extends EventTarget {
    */
   rootCache;
 
-  constructor(host, { size, pageSize, isExpanded, getItemId, dataProvider, dataProviderParams }) {
+  /**
+   * A placeholder item that is used to indicate that the item is not loaded yet.
+   *
+   * @type {unknown}
+   */
+  placeholder;
+
+  /**
+   * A callback that returns whether the given item is a placeholder.
+   *
+   * @type {(item: unknown) => boolean}
+   */
+  isPlaceholder;
+
+  constructor(
+    host,
+    { size, pageSize, isExpanded, getItemId, isPlaceholder, placeholder, dataProvider, dataProviderParams },
+  ) {
     super();
     this.host = host;
     this.pageSize = pageSize;
     this.getItemId = getItemId;
     this.isExpanded = isExpanded;
+    this.placeholder = placeholder;
+    this.isPlaceholder = isPlaceholder;
     this.dataProvider = dataProvider;
     this.dataProviderParams = dataProviderParams;
     this.rootCache = this.__createRootCache(size);
@@ -87,6 +99,7 @@ export class DataProviderController extends EventTarget {
   get __cacheContext() {
     return {
       isExpanded: this.isExpanded,
+      placeholder: this.placeholder,
       // The controller instance is needed to ensure deprecated cache methods work.
       __controller: this,
     };
@@ -187,7 +200,7 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexLoaded(flatIndex) {
     const { cache, page, item } = this.getFlatIndexContext(flatIndex);
 
-    if (!item) {
+    if (!this.__isItemLoaded(item)) {
       this.__loadCachePage(cache, page);
     }
   }
@@ -202,7 +215,7 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexHierarchy(flatIndex) {
     const { cache, item, index } = this.getFlatIndexContext(flatIndex);
 
-    if (item && this.isExpanded(item) && !cache.getSubCache(index)) {
+    if (this.__isItemLoaded(item) && this.isExpanded(item) && !cache.getSubCache(index)) {
       const subCache = cache.createSubCache(index);
       this.__loadCachePage(subCache, 0);
     }
@@ -264,4 +277,14 @@ export class DataProviderController extends EventTarget {
 
     this.dataProvider(params, callback);
   }
+
+  /** @private */
+  __isItemLoaded(item) {
+    if (this.isPlaceholder) {
+      return !this.isPlaceholder(item);
+    } else if (this.placeholder) {
+      return item !== this.placeholder;
+    }
+    return !!item;
+  }
 }

package/src/define.js

@@ -9,7 +9,7 @@ export function defineCustomElement(CustomElement) {
   if (!defined) {
     Object.defineProperty(CustomElement, 'version', {
       get() {
-        return '24.5.0-alpha1';
+        return '24.5.0-alpha11';
       },
     });
 

package/src/gestures.js

@@ -45,7 +45,7 @@ const MOUSE_WHICH_TO_BUTTONS = [0, 1, 4, 2];
 const MOUSE_HAS_BUTTONS = (function () {
   try {
     return new MouseEvent('test', { buttons: 1 }).buttons === 1;
-  } catch (e) {
+  } catch (_) {
     return false;
   }
 })();
@@ -71,7 +71,7 @@ let supportsPassive = false;
     });
     window.addEventListener('test', null, opts);
     window.removeEventListener('test', null, opts);
-  } catch (e) {}
+  } catch (_) {}
 })();
 
 /**

package/src/overflow-controller.js

@@ -48,7 +48,7 @@ export class OverflowController {
   observe() {
     const { host } = this;
 
-    this.__resizeObserver = new ResizeObserver((entries) => {
+    this.__resizeObserver = new ResizeObserver(() => {
       this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
         this.__updateOverflow();
       });

package/src/slot-controller.d.ts

@@ -38,6 +38,7 @@ export class SlotController extends EventTarget implements ReactiveController {
       multiple?: boolean;
       observe?: boolean;
       useUniqueId?: boolean;
+      uniqueIdPrefix?: string;
       initializer?(host: HTMLElement, node: HTMLElement): void;
     },
   );

package/src/slot-controller.js

@@ -19,15 +19,14 @@ export class SlotController extends EventTarget {
    * @return {string}
    * @protected
    */
-  static generateId(host, slotName) {
-    const prefix = slotName || 'default';
+  static generateId(host, prefix = 'default') {
     return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
 
   constructor(host, slotName, tagName, config = {}) {
     super();
 
-    const { initializer, multiple, observe, useUniqueId } = config;
+    const { initializer, multiple, observe, useUniqueId, uniqueIdPrefix } = config;
 
     this.host = host;
     this.slotName = slotName;
@@ -42,7 +41,7 @@ export class SlotController extends EventTarget {
 
     // Only generate the default ID if requested by the controller.
     if (useUniqueId) {
-      this.defaultId = this.constructor.generateId(host, slotName);
+      this.defaultId = this.constructor.generateId(host, uniqueIdPrefix || slotName);
     }
   }
 

package/src/url-utils.js

@@ -27,15 +27,17 @@ function containsQueryParams(actual, expected) {
  *
  * @param {string} actual The actual URL to match.
  * @param {string} expected The expected URL to match.
+ * @param {Object} matchOptions Options for path matching.
  */
-export function matchPaths(actual, expected) {
+export function matchPaths(actual, expected, matchOptions = { matchNested: false }) {
   const base = document.baseURI;
   const actualUrl = new URL(actual, base);
   const expectedUrl = new URL(expected, base);
 
-  return (
-    actualUrl.origin === expectedUrl.origin &&
-    actualUrl.pathname === expectedUrl.pathname &&
-    containsQueryParams(actualUrl.searchParams, expectedUrl.searchParams)
-  );
+  const matchesOrigin = actualUrl.origin === expectedUrl.origin;
+  const matchesPath = matchOptions.matchNested
+    ? actualUrl.pathname === expectedUrl.pathname || actualUrl.pathname.startsWith(`${expectedUrl.pathname}/`)
+    : actualUrl.pathname === expectedUrl.pathname;
+
+  return matchesOrigin && matchesPath && containsQueryParams(actualUrl.searchParams, expectedUrl.searchParams);
 }

package/src/virtualizer-iron-list-adapter.js

@@ -56,7 +56,7 @@ export class IronListAdapter {
     this.scrollTarget.addEventListener('wheel', (e) => this.__onWheel(e));
 
     this.scrollTarget.addEventListener('virtualizer-element-focused', (e) => this.__onElementFocused(e));
-    this.elementsContainer.addEventListener('focusin', (e) => {
+    this.elementsContainer.addEventListener('focusin', () => {
       this.scrollTarget.dispatchEvent(
         new CustomEvent('virtualizer-element-focused', { detail: { element: this.__getFocusedElement() } }),
       );