Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@vaadin/virtual-list
Advanced tools
@vaadin/virtual-list - npm Package Compare versions
Comparing version 24.3.0-alpha9 to 24.3.0-beta1
| { | ||
| "name": "@vaadin/virtual-list", | ||
| "version": "24.3.0-alpha9", | ||
| "version": "24.3.0-beta1", | ||
| "publishConfig": { | ||
@@ -40,8 +40,9 @@ "access": "public" | ||
| "dependencies": { | ||
| "@open-wc/dedupe-mixin": "^1.3.0", | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/component-base": "24.3.0-alpha9", | ||
| "@vaadin/lit-renderer": "24.3.0-alpha9", | ||
| "@vaadin/vaadin-lumo-styles": "24.3.0-alpha9", | ||
| "@vaadin/vaadin-material-styles": "24.3.0-alpha9", | ||
| "@vaadin/vaadin-themable-mixin": "24.3.0-alpha9" | ||
| "@vaadin/component-base": "24.3.0-beta1", | ||
| "@vaadin/lit-renderer": "24.3.0-beta1", | ||
| "@vaadin/vaadin-lumo-styles": "24.3.0-beta1", | ||
| "@vaadin/vaadin-material-styles": "24.3.0-beta1", | ||
| "@vaadin/vaadin-themable-mixin": "24.3.0-beta1" | ||
| }, | ||
@@ -58,3 +59,3 @@ "devDependencies": { | ||
| ], | ||
| "gitHead": "ea39f40613cb73b237d08d4c48b890ee7d1844cb" | ||
| "gitHead": "a197041861e1bbf8d3e966d893648f5dd462b036" | ||
| } |
@@ -6,19 +6,13 @@ /** | ||
| */ | ||
| import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'; | ||
| import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import type { | ||
| VirtualListDefaultItem, | ||
| VirtualListItemModel, | ||
| VirtualListMixinClass, | ||
| VirtualListRenderer, | ||
| } from './vaadin-virtual-list-mixin.js'; | ||
| export type VirtualListDefaultItem = any; | ||
| export { VirtualListDefaultItem, VirtualListItemModel, VirtualListRenderer }; | ||
| export interface VirtualListItemModel<TItem> { | ||
| index: number; | ||
| item: TItem; | ||
| } | ||
| export type VirtualListRenderer<TItem> = ( | ||
| root: HTMLElement, | ||
| virtualList: VirtualList<TItem>, | ||
| model: VirtualListItemModel<TItem>, | ||
| ) => void; | ||
| /** | ||
@@ -50,48 +44,8 @@ * `<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items. | ||
| * @mixes ThemableMixin | ||
| * @mixes VirtualListMixin | ||
| */ | ||
| declare class VirtualList<TItem = VirtualListDefaultItem> extends ElementMixin( | ||
| ControllerMixin(ThemableMixin(HTMLElement)), | ||
| ) { | ||
| /** | ||
| * Gets the index of the first visible item in the viewport. | ||
| */ | ||
| readonly firstVisibleIndex: number; | ||
| declare class VirtualList<TItem = VirtualListDefaultItem> extends ThemableMixin(ElementMixin(HTMLElement)) {} | ||
| /** | ||
| * Gets the index of the last visible item in the viewport. | ||
| */ | ||
| readonly lastVisibleIndex: number; | ||
| interface VirtualList<TItem = VirtualListDefaultItem> extends VirtualListMixinClass<TItem> {} | ||
| /** | ||
| * Custom function for rendering the content of every item. | ||
| * Receives three arguments: | ||
| * | ||
| * - `root` The render target element representing one item at a time. | ||
| * - `virtualList` The reference to the `<vaadin-virtual-list>` element. | ||
| * - `model` The object with the properties related with the rendered | ||
| * item, contains: | ||
| * - `model.index` The index of the rendered item. | ||
| * - `model.item` The item. | ||
| */ | ||
| renderer: VirtualListRenderer<TItem> | undefined; | ||
| /** | ||
| * An array containing items determining how many instances to render. | ||
| */ | ||
| items: TItem[] | undefined; | ||
| /** | ||
| * Scroll to a specific index in the virtual list. | ||
| */ | ||
| scrollToIndex(index: number): void; | ||
| /** | ||
| * Requests an update for the content of the rows. | ||
| * While performing the update, it invokes the renderer passed in the `renderer` property for each visible row. | ||
| * | ||
| * It is not guaranteed that the update happens immediately (synchronously) after it is requested. | ||
| */ | ||
| requestContentUpdate(): void; | ||
| } | ||
| declare global { | ||
@@ -98,0 +52,0 @@ interface HTMLElementTagNameMap { |
@@ -7,10 +7,10 @@ /** | ||
| import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'; | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { ElementMixin } from '@vaadin/component-base/src/element-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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { VirtualListMixin } from './vaadin-virtual-list-mixin.js'; | ||
| import { virtualListStyles } from './vaadin-virtual-list-styles.js'; | ||
| registerStyles('vaadin-virtual-list', virtualListStyles, { moduleId: 'vaadin-virtual-list-styles' }); | ||
| /** | ||
@@ -41,31 +41,9 @@ * `<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items. | ||
| * @extends HTMLElement | ||
| * @mixes ControllerMixin | ||
| * @mixes ElementMixin | ||
| * @mixes ThemableMixin | ||
| * @mixes VirtualListMixin | ||
| */ | ||
| class VirtualList extends ElementMixin(ControllerMixin(ThemableMixin(PolymerElement))) { | ||
| class VirtualList extends ElementMixin(ThemableMixin(VirtualListMixin(PolymerElement))) { | ||
| static get template() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| height: 400px; | ||
| overflow: auto; | ||
| flex: auto; | ||
| align-self: stretch; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| :host(:not([grid])) #items > ::slotted(*) { | ||
| width: 100%; | ||
| } | ||
| #items { | ||
| position: relative; | ||
| } | ||
| </style> | ||
| <div id="items"> | ||
@@ -80,132 +58,2 @@ <slot></slot> | ||
| } | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * An array containing items determining how many instances to render. | ||
| * @type {Array<!VirtualListItem> | undefined} | ||
| */ | ||
| items: { type: Array }, | ||
| /** | ||
| * Custom function for rendering the content of every item. | ||
| * Receives three arguments: | ||
| * | ||
| * - `root` The render target element representing one item at a time. | ||
| * - `virtualList` The reference to the `<vaadin-virtual-list>` element. | ||
| * - `model` The object with the properties related with the rendered | ||
| * item, contains: | ||
| * - `model.index` The index of the rendered item. | ||
| * - `model.item` The item. | ||
| * @type {VirtualListRenderer | undefined} | ||
| */ | ||
| renderer: Function, | ||
| /** @private */ | ||
| __virtualizer: Object, | ||
| }; | ||
| } | ||
| static get observers() { | ||
| return ['__itemsOrRendererChanged(items, renderer, __virtualizer)']; | ||
| } | ||
| /** | ||
| * Gets the index of the first visible item in the viewport. | ||
| * | ||
| * @return {number} | ||
| */ | ||
| get firstVisibleIndex() { | ||
| return this.__virtualizer.firstVisibleIndex; | ||
| } | ||
| /** | ||
| * Gets the index of the last visible item in the viewport. | ||
| * | ||
| * @return {number} | ||
| */ | ||
| get lastVisibleIndex() { | ||
| return this.__virtualizer.lastVisibleIndex; | ||
| } | ||
| /** @protected */ | ||
| ready() { | ||
| super.ready(); | ||
| this.__virtualizer = new Virtualizer({ | ||
| createElements: this.__createElements, | ||
| updateElement: this.__updateElement.bind(this), | ||
| elementsContainer: this, | ||
| scrollTarget: this, | ||
| scrollContainer: this.shadowRoot.querySelector('#items'), | ||
| }); | ||
| this.__overflowController = new OverflowController(this); | ||
| this.addController(this.__overflowController); | ||
| processTemplates(this); | ||
| } | ||
| /** | ||
| * Scroll to a specific index in the virtual list. | ||
| * | ||
| * @param {number} index Index to scroll to | ||
| */ | ||
| scrollToIndex(index) { | ||
| this.__virtualizer.scrollToIndex(index); | ||
| } | ||
| /** @private */ | ||
| __createElements(count) { | ||
| return [...Array(count)].map(() => document.createElement('div')); | ||
| } | ||
| /** @private */ | ||
| __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 }); | ||
| } | ||
| } | ||
| /** | ||
| * Clears the content of a render target. | ||
| * @private | ||
| */ | ||
| __clearRenderTargetContent(element) { | ||
| element.innerHTML = ''; | ||
| // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into. | ||
| // When clearing the rendered content, this part needs to be manually disposed of. | ||
| // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward. | ||
| delete element._$litPart$; | ||
| } | ||
| /** @private */ | ||
| __itemsOrRendererChanged(items, renderer, virtualizer) { | ||
| // If the renderer is removed but there are elements created by | ||
| // a previous renderer, we need to request an update from the virtualizer | ||
| // to get the already existing elements properly cleared. | ||
| const hasRenderedItems = this.childElementCount > 0; | ||
| if ((renderer || hasRenderedItems) && virtualizer) { | ||
| virtualizer.size = (items || []).length; | ||
| virtualizer.update(); | ||
| } | ||
| } | ||
| /** | ||
| * Requests an update for the content of the rows. | ||
| * While performing the update, it invokes the renderer passed in the `renderer` property for each visible row. | ||
| * | ||
| * It is not guaranteed that the update happens immediately (synchronously) after it is requested. | ||
| */ | ||
| requestContentUpdate() { | ||
| if (this.__virtualizer) { | ||
| this.__virtualizer.update(); | ||
| } | ||
| } | ||
| } | ||
@@ -212,0 +60,0 @@ |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/virtual-list", | ||
| "version": "24.3.0-alpha9", | ||
| "version": "24.3.0-beta1", | ||
| "description-markup": "markdown", | ||
@@ -6,0 +6,0 @@ "contributions": { |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/virtual-list", | ||
| "version": "24.3.0-alpha9", | ||
| "version": "24.3.0-beta1", | ||
| "description-markup": "markdown", | ||
@@ -6,0 +6,0 @@ "framework": "lit", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.38%
34884
- Number of package files
- increased by26.67%
19
- Lines of code
- increased by9.22%
545
Worsened metrics
- Dependency count
- increased by16.67%
7
Dependency changes
+ Added@open-wc/dedupe-mixin@^1.3.0
+ Added@vaadin/component-base@24.3.0-beta1(transitive)
+ Added@vaadin/icon@24.3.0-beta1(transitive)
+ Added@vaadin/lit-renderer@24.3.0-beta1(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.3.0-beta1(transitive)
+ Added@vaadin/vaadin-material-styles@24.3.0-beta1(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.3.0-beta1(transitive)
- Removed@vaadin/component-base@24.3.0-alpha9(transitive)
- Removed@vaadin/icon@24.3.0-alpha9(transitive)
- Removed@vaadin/lit-renderer@24.3.0-alpha9(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.3.0-alpha9(transitive)
- Removed@vaadin/vaadin-material-styles@24.3.0-alpha9(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.3.0-alpha9(transitive)