{"_id":"@amundsan/virtual-list","_rev":"3-8ab6467298cff105dcbc2713c193303d","name":"@amundsan/virtual-list","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@amundsan/virtual-list","version":"0.1.0","description":"Virtual list web component for creating selection lists with a large number of lines. The basic principle is to render the rows currently visible.","keywords":["web-component","custom-element","virtual-list","scroll","select"],"type":"module","main":"index.js","repository":{"type":"git","url":"git+https://github.com/Amund/virtual-list.git"},"author":{"name":"Dimitri Avenel"},"license":"MIT","bugs":{"url":"https://github.com/Amund/virtual-list/issues"},"homepage":"https://github.com/Amund/virtual-list#readme","devDependencies":{"prettier":"^3.1.1","stylelint":"^16.1.0","stylelint-config-recess-order":"^4.4.0"},"_id":"@amundsan/virtual-list@0.1.0","gitHead":"c245a33fc223179b87d13c161b8076148e9057b3","_nodeVersion":"20.7.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-VaeAmBWtdNuHkJQQ8D/2iPniyNP8rYzkLkDZGCZn4QWY9/+lDzn9iSVKI/N+w3Y+HgAdlipdnh++lDteMOAemA==","shasum":"a6f736a37f1684e64818830b824af3fc54440232","tarball":"https://registry.npmjs.org/@amundsan/virtual-list/-/virtual-list-0.1.0.tgz","fileCount":4,"unpackedSize":9570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhy3M+3V54ouQbONA5uODEQGjh7jHbyhIRXehYRdLX9gIgEAXqQGCmB6KIQild4/ye9xz/wxxtZUMSRx+VdtNX2ts="}]},"_npmUser":{"name":"amundsan","email":"mailamund@gmail.com"},"directories":{},"maintainers":[{"name":"amundsan","email":"mailamund@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/virtual-list_0.1.0_1704324967973_0.694109684216812"},"_hasShrinkwrap":false},"0.1.1":{"name":"@amundsan/virtual-list","version":"0.1.1","description":"Virtual list web component for creating selection lists with a large number of lines. The basic principle is to render the rows currently visible.","keywords":["web-component","custom-element","virtual-list","scroll","select"],"type":"module","main":"index.js","repository":{"type":"git","url":"git+https://github.com/Amund/virtual-list.git"},"author":{"name":"Dimitri Avenel"},"license":"MIT","bugs":{"url":"https://github.com/Amund/virtual-list/issues"},"homepage":"https://github.com/Amund/virtual-list#readme","devDependencies":{"prettier":"^3.1.1","stylelint":"^16.1.0","stylelint-config-recess-order":"^4.4.0"},"_id":"@amundsan/virtual-list@0.1.1","gitHead":"235fba5f7220fc79426d3e9f2d15b9d632e299b2","_nodeVersion":"20.7.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-RW4EqMeSGFgU+qiFRAnTzLE8FRoIt+V2kiYZ379aPpP8CIwRy/Au5XM3z/J1VXyXXe5itjlgz2tDbTPrZdD6Lg==","shasum":"38beb75172b34b8f08f63d60e8fae873b322bfe1","tarball":"https://registry.npmjs.org/@amundsan/virtual-list/-/virtual-list-0.1.1.tgz","fileCount":4,"unpackedSize":9590,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+DYR/gfrEQ5O5s/nczrv8lY1ChbsZlb+beqSK9OU70gIgUhAE++ez9+Rb/ArjDPRNqgGIEQinpu4TNJ4+n56PgKk="}]},"_npmUser":{"name":"amundsan","email":"mailamund@gmail.com"},"directories":{},"maintainers":[{"name":"amundsan","email":"mailamund@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/virtual-list_0.1.1_1704327364274_0.43716932511718865"},"_hasShrinkwrap":false},"0.1.2":{"name":"@amundsan/virtual-list","version":"0.1.2","description":"Virtual list web component for creating selection lists with a large number of lines. The basic principle is to render the rows currently visible.","keywords":["web-component","custom-element","virtual-list","scroll","select"],"type":"module","main":"index.js","repository":{"type":"git","url":"git+https://github.com/Amund/virtual-list.git"},"author":{"name":"Dimitri Avenel"},"license":"MIT","bugs":{"url":"https://github.com/Amund/virtual-list/issues"},"homepage":"https://github.com/Amund/virtual-list#readme","devDependencies":{"prettier":"^3.1.1","stylelint":"^16.1.0","stylelint-config-recess-order":"^4.4.0"},"_id":"@amundsan/virtual-list@0.1.2","gitHead":"b96e3c022756dc3c69247dd521cc9afd83b1a100","_nodeVersion":"20.7.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-7a/FoQqvtJ8pknsy8DRA/P/6vyQW7v4ieJ4c3TW+CQtwHR5cFyZfweO42SofzlQ+U9f3Lb2nMaaOevfbr4ThEQ==","shasum":"fbbbeace30d371929cd43de155a1238c1259ab33","tarball":"https://registry.npmjs.org/@amundsan/virtual-list/-/virtual-list-0.1.2.tgz","fileCount":4,"unpackedSize":9754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZRShg8ZTTZqBBrvrv9pjfo5IMvS/oGX9BHQJliuXyVAiA1vQAhxxziCAIOp/LG0oxNZ6LG76r+cXPXlE0LxqJ5UA=="}]},"_npmUser":{"name":"amundsan","email":"mailamund@gmail.com"},"directories":{},"maintainers":[{"name":"amundsan","email":"mailamund@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/virtual-list_0.1.2_1704552646118_0.917306996574816"},"_hasShrinkwrap":false},"0.1.3":{"name":"@amundsan/virtual-list","version":"0.1.3","description":"Virtual list web component for creating selection lists with a large number of lines. The basic principle is to render the rows currently visible.","keywords":["web-component","custom-element","virtual-list","scroll","select"],"type":"module","main":"index.js","repository":{"type":"git","url":"git+https://github.com/Amund/virtual-list.git"},"author":{"name":"Dimitri Avenel"},"license":"MIT","bugs":{"url":"https://github.com/Amund/virtual-list/issues"},"homepage":"https://github.com/Amund/virtual-list#readme","devDependencies":{"prettier":"^3.1.1","stylelint":"^16.1.0","stylelint-config-recess-order":"^4.4.0"},"_id":"@amundsan/virtual-list@0.1.3","gitHead":"945a33551e0f8c898d80dd91c8bf55cc4d8d2c32","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-yjnrg4nz3RzdRrwcHEz6tnS0wHZdrWb3Q1Xp1qVawJi0i24AW/XUQc1WhXF22Abawgf/dCoNeal8xswZPLrQAg==","shasum":"93308bb639880c0b28f6ea6d38e9289c709b2e93","tarball":"https://registry.npmjs.org/@amundsan/virtual-list/-/virtual-list-0.1.3.tgz","fileCount":4,"unpackedSize":9795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiPoAnz+VAyDotxbuYa60RSKYy2ESsKwKBySnhCTAkUAiEA6ohcEmkHLgdSsAn7ws8YZa8xU6FnJM61tVLDU1spDeU="}]},"_npmUser":{"name":"amundsan","email":"mailamund@gmail.com"},"directories":{},"maintainers":[{"name":"amundsan","email":"mailamund@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/virtual-list_0.1.3_1707644250729_0.013078843463928846"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-03T23:36:07.902Z","0.1.0":"2024-01-03T23:36:08.110Z","modified":"2024-02-11T09:37:31.097Z","0.1.1":"2024-01-04T00:16:04.452Z","0.1.2":"2024-01-06T14:50:46.336Z","0.1.3":"2024-02-11T09:37:30.919Z"},"maintainers":[{"name":"amundsan","email":"mailamund@gmail.com"}],"description":"Virtual list web component for creating selection lists with a large number of lines. The basic principle is to render the rows currently visible.","homepage":"https://github.com/Amund/virtual-list#readme","keywords":["web-component","custom-element","virtual-list","scroll","select"],"repository":{"type":"git","url":"git+https://github.com/Amund/virtual-list.git"},"author":{"name":"Dimitri Avenel"},"bugs":{"url":"https://github.com/Amund/virtual-list/issues"},"license":"MIT","readme":"# Web Component : virtual-list\n\nVirtual list web component for creating selection lists with a large number of lines. The basic principle is to render the rows currently visible.\n\n[Check out the demo](https://amund.github.io/virtual-list/)\n\n## Install\n\n```\n$ npm i --save @amundsan/virtual-list\n```\n\n## Import\n\n```js\nimport '@amundsan/virtual-list'\n\n// ...or, without node_modules pollution\nimport 'https://cdn.jsdelivr.net/npm/@amundsan/virtual-list'\n```\n\n## Usage\n\nThis custom element extends the div tag.\n\n```html\n<div is=\"virtual-list\"></div>\n```\n\nThis package doesn't contain any CSS style files, but you can take inspiration from this basic example.\n\n```css\n[is='virtual-list'] {\n    overflow-y: auto;\n    height: 200px;\n\n    > ul {\n        position: relative;\n        margin: 0;\n        padding: 0;\n\n        > li {\n            position: absolute;\n            display: flex;\n            align-items: center;\n            padding-inline: 5px;\n            white-space: nowrap;\n            cursor: pointer;\n            width: 100%;\n            overflow: hidden;\n\n            &:hover {\n                background-color: #eee;\n            }\n\n            &.selected {\n                background-color: #333;\n                color: #fff;\n            }\n        }\n    }\n}\n```\n\nFinally, add some code :\n\n```js\nconst div = document.querySelector('div')\n\n// assign an array to `items` property to populate the list\ndiv.items = ['item 1', 'item 2', ...]\n\n// item height must be controlled by this property\ndiv.itemHeight = 35 // in px, default to 22\n\n// then listen to selection\ndiv.addEventListener('input', () => console.log(div.items[div.selected]))\n```\n\nYou can modify the row template :\n\n```js\n// define the template, it must be a function, returning a string\ndiv.template = ({ initials, title, num }) =>\n    `<b>${initials}</b><div>${title}</div><em>${num}</em>`\n\n// and set corresponding items\ndiv.items = [\n    {\n        initials: 'DE',\n        title: 'gima ki dary delikuca',\n        num: 27\n    },\n    ...\n]\n```\n","readmeFilename":"README.md"}