vaadin · tomivirkki · Nov 22, 2024 · Nov 25, 2024 · Nov 25, 2024 · Nov 27, 2024
diff --git a/dev/virtual-list.html b/dev/virtual-list.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -9,23 +9,70 @@
 
     <script type="module">
       import '@vaadin/virtual-list';
-      // import '@vaadin/virtual-list/vaadin-lit-virtual-list.js';
 
-      const items = Array.from({ length: 100000 }).map((_, i) => {
-        return { label: `Item ${i}` };
-      });
+      import { render, html } from 'lit';
+
+      function generateItems(count) {
+        return Array.from({ length: count }).map((_, i) => {
+          return { label: `Item ${i}` };
+        });
+      }
 
       const renderer = (root, _, { item }) => {
-        root.innerHTML = `<div>${item.label}</div>`;
+        render(html`<div>${item.label}</div>`, root);
       };
 
       const list = document.querySelector('vaadin-virtual-list');
-      list.items = items;
+      list.items = generateItems(10000);
       list.renderer = renderer;
+      list.selectionMode = 'multi';
+      list.itemIdPath = 'label';
+
+      const selectionMode = document.querySelector('#selection-mode');
+      selectionMode.value = list.selectionMode;
+      selectionMode.addEventListener('change', (e) => {
+        list.selectionMode = e.target.value;
+      });
+
+      document.querySelector('#empty').addEventListener('click', () => {
+        list.items = [];
+      });
+
+      document.querySelector('#set-1000-items').addEventListener('click', () => {
+        list.items = generateItems(1000);
+      });
+
+      document.querySelector('#set-5-items').addEventListener('click', () => {
+        list.items = generateItems(5);
+      });
     </script>
+
+    <style>
+      vaadin-virtual-list[navigating] > [focused] {
+        box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+      }
+
+      vaadin-virtual-list > [selected] {
+        background-color: var(--lumo-primary-color-10pct);
+      }
+
+      vaadin-virtual-list > * {
+        outline: none;
+      }
+    </style>
   </head>
 
   <body>
     <vaadin-virtual-list style="height: 400px"></vaadin-virtual-list>
+
+    <select id="selection-mode">
+      <option>none</option>
+      <option>single</option>
+      <option>multi</option>
+    </select>
+
+    <button id="empty">Empty items</button>
+    <button id="set-1000-items">Set 1000 items</button>
+    <button id="set-5-items">Set 5 items</button>
   </body>
 </html>
diff --git a/packages/virtual-list/package.json b/packages/virtual-list/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
+    "@vaadin/a11y-base": "24.7.0-alpha1",
     "@vaadin/component-base": "24.7.0-alpha1",
     "@vaadin/lit-renderer": "24.7.0-alpha1",
     "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",

diff --git a/packages/virtual-list/src/vaadin-lit-virtual-list.js b/packages/virtual-list/src/vaadin-lit-virtual-list.js
@@ -34,6 +34,8 @@ class VirtualList extends VirtualListMixin(ThemableMixin(ElementMixin(PolylitMix
       <div id="items">
         <slot></slot>
       </div>
+
+      <div id="focusexit" tabindex="0" hidden></div>
     `;
   }
 }

diff --git a/packages/virtual-list/src/vaadin-virtual-list-mixin.d.ts b/packages/virtual-list/src/vaadin-virtual-list-mixin.d.ts
@@ -6,12 +6,14 @@
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { VirtualList } from './vaadin-virtual-list.js';
+import type { VirtualListSelectionMixinClass } from './vaadin-virtual-list-selection-mixin.js';
 
 export type VirtualListDefaultItem = any;
 
 export interface VirtualListItemModel<TItem> {
   index: number;
   item: TItem;
+  selected?: boolean;
 }
 
 export type VirtualListRenderer<TItem> = (
@@ -20,11 +22,24 @@ export type VirtualListRenderer<TItem> = (
   model: VirtualListItemModel<TItem>,
 ) => void;
 
+/**
+ * Fired when the `selectedItems` property changes.
+ */
+export type VirtualListSelectedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
+
+export interface VirtualListCustomEventMap<TItem> {
+  'selected-items-changed': VirtualListSelectedItemsChangedEvent<TItem>;
+}
+
+export interface VirtualListEventMap<TItem> extends HTMLElementEventMap, VirtualListCustomEventMap<TItem> {}
+
 export declare function VirtualListMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ControllerMixinClass> & Constructor<VirtualListMixinClass<TItem>> & T;
 
-export declare class VirtualListMixinClass<TItem = VirtualListDefaultItem> {
+export declare class VirtualListMixinClass<
+  TItem = VirtualListDefaultItem,
+> extends VirtualListSelectionMixinClass<TItem> {
   /**
    * Gets the index of the first visible item in the viewport.
    */

diff --git a/packages/virtual-list/src/vaadin-virtual-list-mixin.js b/packages/virtual-list/src/vaadin-virtual-list-mixin.js
@@ -7,13 +7,15 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
 import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
+import { SelectionMixin } from './vaadin-virtual-list-selection-mixin.js';
 
 /**
  * @polymerMixin
+ * @mixes SelectionMixin
  * @mixes ControllerMixin
  */
 export const VirtualListMixin = (superClass) =>
-  class VirtualListMixinClass extends ControllerMixin(superClass) {
+  class VirtualListMixinClass extends SelectionMixin(ControllerMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -118,13 +120,31 @@ export const VirtualListMixin = (superClass) =>
 
     /** @private */
     __updateElement(el, index) {
+      if (super.__updateElement) {
+        super.__updateElement(el, index);
+      }
+
       if (el.__renderer !== this.renderer) {
         el.__renderer = this.renderer;
         this.__clearRenderTargetContent(el);
       }
 
       if (this.renderer) {
-        this.renderer(el, this, { item: this.items[index], index });
+        const model = {};
+        this.__updateItemModel(model, this.items[index], index);
+
+        this.renderer(el, this, model);
+      }
+    }
+
+    /**
+     * @private
+     */
+    __updateItemModel(model, item, index) {
+      model.item = this.items[index];
+      model.index = index;
+      if (super.__updateItemModel) {
+        super.__updateItemModel(model, item, index);
-    __updateItemModel(model, item, index) {
-      model.item = this.items[index];
-      model.index = index;
-      if (super.__updateItemModel) {
-        super.__updateItemModel(model, item, index);
+    __getItemModel(index) {
+      return {
+        item: this.items[index],
+        index,
+        ...super.__updateItemModel ? super.__updateItemModel(index) : {}
+      }
-    __updateItemModel(model, item, index) {
-      model.item = this.items[index];
-      model.index = index;
-      if (super.__updateItemModel) {
-        super.__updateItemModel(model, item, index);
+    __getItemModel(index) {
+      return {
+        item: this.items[index],
+        index,
+        ...super.__updateItemModel ? super.__updateItemModel(index) : {}
+      }
       }
     }
 

diff --git a/packages/virtual-list/src/vaadin-virtual-list-selection-mixin.d.ts b/packages/virtual-list/src/vaadin-virtual-list-selection-mixin.d.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { VirtualListDefaultItem } from './vaadin-virtual-list.js';
+
+export declare function VirtualListSelectionMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<TItem> & T;
+
+export declare class VirtualListSelectionMixinClass<TItem = VirtualListDefaultItem> {
+  /**
+   * Selection mode for the virtual list. Available modes are: `none`, `single` and `multi`.
+   */
+  selectionMode: 'none' | 'single' | 'multi';
+
+  /**
+   * Path to an item sub-property that identifies the item.
+   * @attr {string} item-id-path
+   */
+  itemIdPath: string | null | undefined;
+
+  /**
+   * An array that contains the selected items.
+   */
+  selectedItems: TItem[];
+
+  /**
+   * A function that generates accessible names for virtual list items.
+   */
+  itemAccessibleNameGenerator?: (item: TItem) => string;
+}
-Original file line number
+Diff line change
@@ Expand Up @@
           <div id="items">
             <slot></slot>
           </div>
+          <div id="focusexit" tabindex="0" hidden></div>
         `;
       }
     }
@@ Expand Down @@