vlist-svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Floor IO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# vlist-svelte
+
+Svelte action for [vlist](https://github.com/floor/vlist) - lightweight, zero-dependency virtual scrolling.
+
+## Installation
+
+```bash
+npm install @floor/vlist vlist-svelte
+```
+
+## Usage
+
+```svelte
+<script>
+  import { vlist } from 'vlist-svelte';
+  import '@floor/vlist/styles';
+
+  let users = [...];
+  let instance;
+
+  const config = {
+    item: {
+      height: 48,
+      template: (user) => `<div class="user">${user.name}</div>`,
+    },
+    items: users,
+  };
+</script>
+
+<div
+  use:vlist={{ config, onInstance: (i) => (instance = i) }}
+  style="height: 400px"
+/>
+```
+
+## API
+
+### `vlist` action
+
+**Parameters:**
+- `config` - VList configuration (same as core vlist, minus `container`)
+- `onInstance` - Callback to receive the vlist instance
+
+**Example with instance access:**
+
+```svelte
+<script>
+  import { vlist } from 'vlist-svelte';
+  
+  let instance;
+  
+  function scrollToTop() {
+    instance?.scrollToIndex(0);
+  }
+</script>
+
+<div use:vlist={{ config, onInstance: (i) => (instance = i) }} />
+<button on:click={scrollToTop}>Top</button>
+```
+
+## Documentation
+
+For full documentation, see [vlist.dev](https://vlist.dev)
+
+## License
+
+MIT © [Floor IO](https://floor.io)

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Svelte action for vlist - lightweight virtual scrolling
+ *
+ * @packageDocumentation
+ */
+import type { VListConfig, VListItem, VList, VListEvents, EventHandler, Unsubscribe } from "@floor/vlist";
+/** Configuration for vlist action (VListConfig without container) */
+export type VListActionConfig<T extends VListItem = VListItem> = Omit<VListConfig<T>, "container">;
+/** Options for the vlist action */
+export interface VListActionOptions<T extends VListItem = VListItem> {
+    /** VList configuration */
+    config: VListActionConfig<T>;
+    /** Callback to receive the vlist instance */
+    onInstance?: (instance: VList<T>) => void;
+}
+/** Return value from the vlist action */
+export interface VListActionReturn<T extends VListItem = VListItem> {
+    /** Update the configuration */
+    update?: (options: VListActionOptions<T>) => void;
+    /** Cleanup */
+    destroy?: () => void;
+}
+/**
+ * Svelte action for vlist integration.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { vlist } from 'vlist-svelte';
+ *   import '@floor/vlist/styles';
+ *
+ *   let users = [...];
+ *   let instance;
+ *
+ *   const config = {
+ *     item: {
+ *       height: 48,
+ *       template: (user) => `<div>${user.name}</div>`,
+ *     },
+ *     items: users,
+ *   };
+ * </script>
+ *
+ * <div
+ *   use:vlist={{ config, onInstance: (i) => (instance = i) }}
+ *   style="height: 400px"
+ * />
+ * ```
+ */
+export declare function vlist<T extends VListItem = VListItem>(node: HTMLElement, options: VListActionOptions<T>): VListActionReturn<T>;
+/**
+ * Helper to subscribe to vlist events in Svelte
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { vlist, onVListEvent } from 'vlist-svelte';
+ *
+ *   let instance;
+ *
+ *   $: if (instance) {
+ *     onVListEvent(instance, 'selection:change', ({ selected }) => {
+ *       console.log('Selected:', selected);
+ *     });
+ *   }
+ * </script>
+ * ```
+ */
+export declare function onVListEvent<T extends VListItem, K extends keyof VListEvents<T>>(instance: VList<T>, event: K, handler: EventHandler<VListEvents<T>[K]>): Unsubscribe;

package/dist/index.js

@@ -0,0 +1 @@
+import{vlist as J}from"@floor/vlist";import{withAsync as K,withGrid as M,withSections as N,withSelection as I,withScrollbar as Q,withScale as R,withSnapshots as T,withPage as U}from"@floor/vlist";function Z(D,q){let k=q.config,j=J({...k,container:D});if(k.scroll?.element===window)j=j.use(U());if(k.adapter)j=j.use(K({adapter:k.adapter,...k.loading&&{loading:k.loading}}));if(k.layout==="grid"&&k.grid)j=j.use(M(k.grid));if(k.groups)j=j.use(N(k.groups));if((k.selection?.mode||"none")!=="none")j=j.use(I(k.selection));else j=j.use(I({mode:"none"}));j=j.use(R());let F=k.scroll?.scrollbar||k.scrollbar;if(F!=="none"){let B=typeof F==="object"?F:{};j=j.use(Q(B))}j=j.use(T());let z=j.build();if(q.onInstance)q.onInstance(z);return{update(B){if(B.config.items&&z)z.setItems(B.config.items)},destroy(){if(z)z.destroy()}}}function _(D,q,k){return D.on(q,k)}export{Z as vlist,_ as onVListEvent};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "vlist-svelte",
+  "version": "0.1.0",
+  "description": "Svelte action for vlist - lightweight virtual scrolling",
+  "author": {
+    "name": "Floor IO",
+    "url": "https://floor.io"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/floor/vlist-svelte.git"
+  },
+  "keywords": [
+    "vlist",
+    "virtual-list",
+    "svelte",
+    "action",
+    "virtual-scrolling",
+    "typescript"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@floor/vlist": "^0.6.0",
+    "svelte": ">=3.0.0"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "!dist/**/*.d.ts.map"
+  ],
+  "scripts": {
+    "build": "bun run build.ts",
+    "dev": "bun run build.ts --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "devDependencies": {
+    "@floor/vlist": "link:../vlist",
+    "@types/bun": "^1.0.0",
+    "bun": "^1.0.0",
+    "svelte": "^5.0.0",
+    "typescript": "^5.0.0"
+  }
+}