New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vaadin/vaadin-virtual-list
Advanced tools
@vaadin/vaadin-virtual-list - npm Package Compare versions
Comparing version 22.0.0-alpha6 to 22.0.0-alpha7
| { | ||
| "name": "@vaadin/vaadin-virtual-list", | ||
| "version": "22.0.0-alpha6", | ||
| "description": "Web Component for displaying a virtual/infinite list or items.", | ||
| "version": "22.0.0-alpha7", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "description": "Web Component for displaying a virtual/infinite list of items.", | ||
| "license": "Apache-2.0", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/vaadin/web-components.git", | ||
| "directory": "packages/vaadin-virtual-list" | ||
| }, | ||
| "author": "Vaadin Ltd", | ||
| "homepage": "https://vaadin.com", | ||
| "bugs": { | ||
| "url": "https://github.com/vaadin/web-components/issues" | ||
| }, | ||
| "main": "vaadin-virtual-list.js", | ||
| "module": "vaadin-virtual-list.js", | ||
| "repository": "vaadin/web-components", | ||
| "files": [ | ||
| "src", | ||
| "theme", | ||
| "vaadin-*.d.ts", | ||
| "vaadin-*.js" | ||
| ], | ||
| "keywords": [ | ||
@@ -15,31 +34,6 @@ "Vaadin", | ||
| ], | ||
| "author": "Vaadin Ltd", | ||
| "license": "Apache-2.0", | ||
| "bugs": { | ||
| "url": "https://github.com/vaadin/web-components/issues" | ||
| }, | ||
| "homepage": "https://vaadin.com", | ||
| "files": [ | ||
| "vaadin-*.d.ts", | ||
| "vaadin-*.js", | ||
| "src", | ||
| "theme" | ||
| ], | ||
| "dependencies": { | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6", | ||
| "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6", | ||
| "@vaadin/vaadin-material-styles": "^22.0.0-alpha6", | ||
| "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6" | ||
| "@vaadin/virtual-list": "22.0.0-alpha7" | ||
| }, | ||
| "devDependencies": { | ||
| "@esm-bundle/chai": "^4.3.4", | ||
| "@vaadin/testing-helpers": "^0.3.0", | ||
| "lit": "^2.0.0-rc.1", | ||
| "sinon": "^9.2.4" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45" | ||
| "gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52" | ||
| } |
@@ -1,80 +0,18 @@ | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| /** | ||
| * @license | ||
| * Copyright (c) 2021 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
| */ | ||
| import { VirtualList, VirtualListDefaultItem } from '@vaadin/virtual-list/src/vaadin-virtual-list.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| /** | ||
| * @deprecated Import `VirtualList` from `@vaadin/virtual-list` instead. | ||
| */ | ||
| export type VirtualListElement<TItem = VirtualListDefaultItem> = VirtualList<TItem>; | ||
| export type VirtualListDefaultItem = any; | ||
| export interface VirtualListItemModel<TItem> { | ||
| index: number; | ||
| item: TItem; | ||
| } | ||
| export type VirtualListRenderer<TItem> = ( | ||
| root: HTMLElement, | ||
| virtualList: VirtualListElement<TItem>, | ||
| model: VirtualListItemModel<TItem> | ||
| ) => void; | ||
| /** | ||
| * `<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list or items. | ||
| * | ||
| * ```html | ||
| * <vaadin-virtual-list></vaadin-virtual-list> | ||
| * ``` | ||
| * | ||
| * ```js | ||
| * const list = document.querySelector('vaadin-virtual-list'); | ||
| * list.items = items; // An array of data items | ||
| * list.renderer = (root, list, {item, index}) => { | ||
| * root.textContent = `#${index}: ${item.name}` | ||
| * } | ||
| * ``` | ||
| * | ||
| * See [Virtual List](https://vaadin.com/docs/latest/ds/components/virtual-list) documentation. | ||
| * | ||
| * @extends HTMLElement | ||
| * @mixes ElementMixin | ||
| * @mixes ThemableMixin | ||
| * @deprecated Import `VirtualList` from `@vaadin/virtual-list` instead. | ||
| */ | ||
| declare class VirtualListElement<TItem = VirtualListDefaultItem> extends ElementMixin(ThemableMixin(HTMLElement)) { | ||
| /** | ||
| * 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; | ||
| export const VirtualListElement: typeof VirtualList; | ||
| /** | ||
| * An array containing items determining how many instances to render. | ||
| */ | ||
| items: Array<TItem> | undefined; | ||
| /** | ||
| * Scroll to a specific index in the virtual list. | ||
| */ | ||
| scrollToIndex(index: number): void; | ||
| /** | ||
| * Gets the index of the first visible item in the viewport. | ||
| */ | ||
| readonly firstVisibleIndex: number; | ||
| /** | ||
| * Gets the index of the last visible item in the viewport. | ||
| */ | ||
| readonly lastVisibleIndex: number; | ||
| } | ||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'vaadin-virtual-list': VirtualListElement; | ||
| } | ||
| } | ||
| export { VirtualListElement }; | ||
| export * from '@vaadin/virtual-list/src/vaadin-virtual-list.js'; |
@@ -6,181 +6,9 @@ /** | ||
| */ | ||
| import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js'; | ||
| import { Virtualizer } from './virtualizer.js'; | ||
| import { VirtualList } from '@vaadin/virtual-list/src/vaadin-virtual-list.js'; | ||
| /** | ||
| * `<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list or items. | ||
| * | ||
| * ```html | ||
| * <vaadin-virtual-list></vaadin-virtual-list> | ||
| * ``` | ||
| * | ||
| * ```js | ||
| * const list = document.querySelector('vaadin-virtual-list'); | ||
| * list.items = items; // An array of data items | ||
| * list.renderer = (root, list, {item, index}) => { | ||
| * root.textContent = `#${index}: ${item.name}` | ||
| * } | ||
| * ``` | ||
| * | ||
| * See [Virtual List](https://vaadin.com/docs/latest/ds/components/virtual-list) documentation. | ||
| * | ||
| * @extends HTMLElement | ||
| * @mixes ElementMixin | ||
| * @mixes ThemableMixin | ||
| * @deprecated Import `VirtualList` from `@vaadin/virtual-list` instead. | ||
| */ | ||
| class VirtualListElement extends ElementMixin(ThemableMixin(PolymerElement)) { | ||
| static get template() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| height: 400px; | ||
| overflow: auto; | ||
| flex: auto; | ||
| align-self: stretch; | ||
| } | ||
| export const VirtualListElement = VirtualList; | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| :host(:not([grid])) #items > ::slotted(*) { | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| <div id="items"> | ||
| <slot></slot> | ||
| </div> | ||
| `; | ||
| } | ||
| static get is() { | ||
| return 'vaadin-virtual-list'; | ||
| } | ||
| 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)']; | ||
| } | ||
| /** @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') | ||
| }); | ||
| 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) { | ||
| if (items.length === virtualizer.size) { | ||
| virtualizer.update(); | ||
| } else { | ||
| virtualizer.size = items.length; | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * 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; | ||
| } | ||
| } | ||
| customElements.define(VirtualListElement.is, VirtualListElement); | ||
| export { VirtualListElement }; | ||
| export * from '@vaadin/virtual-list/src/vaadin-virtual-list.js'; |
@@ -1,1 +0,1 @@ | ||
| import '../../src/vaadin-virtual-list.js'; | ||
| import '@vaadin/virtual-list/theme/lumo/vaadin-virtual-list.js'; |
@@ -1,1 +0,1 @@ | ||
| import '../../src/vaadin-virtual-list.js'; | ||
| import '@vaadin/virtual-list/theme/material/vaadin-virtual-list.js'; |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-80%
1
- Dev dependency count
- decreased by-100%
0
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-81.19%
15264
- Number of package files
- decreased by-35.71%
9
- Lines of code
- decreased by-98.41%
31
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@vaadin/component-base@22.0.0-alpha7(transitive)
+ Added@vaadin/icon@22.0.0-alpha7(transitive)
+ Added@vaadin/vaadin-lumo-styles@22.0.0-alpha7(transitive)
+ Added@vaadin/vaadin-material-styles@22.0.0-alpha7(transitive)
+ Added@vaadin/vaadin-themable-mixin@22.0.0-alpha7(transitive)
+ Added@vaadin/virtual-list@22.0.0-alpha7(transitive)
- Removed@polymer/polymer@^3.0.0
- Removed@open-wc/dedupe-mixin@1.4.0(transitive)
- Removed@vaadin/component-base@22.1.0(transitive)
- Removed@vaadin/icon@22.1.0(transitive)
- Removed@vaadin/vaadin-element-mixin@22.0.0-alpha6(transitive)
- Removed@vaadin/vaadin-lumo-styles@22.1.0(transitive)
- Removed@vaadin/vaadin-material-styles@22.1.0(transitive)
- Removed@vaadin/vaadin-themable-mixin@22.1.0(transitive)