vlist-vue 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,74 @@
+# vlist-vue
+
+Vue composable for [vlist](https://github.com/floor/vlist) - lightweight, zero-dependency virtual scrolling.
+
+## Installation
+
+```bash
+npm install @floor/vlist vlist-vue
+```
+
+## Usage
+
+### Composition API
+
+```vue
+<script setup>
+import { useVList } from 'vlist-vue';
+import '@floor/vlist/styles';
+
+const users = ref([...]);
+
+const { containerRef, instance } = useVList({
+  item: {
+    height: 48,
+    template: (user) => `<div class="user">${user.name}</div>`,
+  },
+  items: users,
+});
+</script>
+
+<template>
+  <div ref="containerRef" style="height: 400px" />
+</template>
+```
+
+### Options API
+
+```vue
+<script>
+import { useVList } from 'vlist-vue';
+
+export default {
+  setup() {
+    return useVList({
+      item: {
+        height: 48,
+        template: (user) => `<div>${user.name}</div>`,
+      },
+      items: [],
+    });
+  },
+};
+</script>
+```
+
+## API
+
+### `useVList(config)`
+
+**Parameters:**
+- `config` - VList configuration (same as core vlist, minus `container`)
+  - Can be a reactive `Ref` for automatic updates
+
+**Returns:**
+- `containerRef` - Template ref for the container
+- `instance` - Reactive ref to the vlist instance
+
+## 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,57 @@
+/**
+ * Vue composable for vlist - lightweight virtual scrolling
+ *
+ * @packageDocumentation
+ */
+import { type Ref, type ShallowRef } from "vue";
+import type { VListConfig, VListItem, VList, VListEvents, EventHandler } from "@floor/vlist";
+/** Configuration for useVList (VListConfig without container) */
+export type UseVListConfig<T extends VListItem = VListItem> = Omit<VListConfig<T>, "container">;
+/** Return value from the useVList composable */
+export interface UseVListReturn<T extends VListItem = VListItem> {
+    /** Template ref to attach to your container element */
+    containerRef: Ref<HTMLDivElement | null>;
+    /** Reactive ref to the vlist instance */
+    instance: ShallowRef<VList<T> | null>;
+}
+/**
+ * Vue composable for vlist integration.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useVList } from 'vlist-vue';
+ * import { ref } from 'vue';
+ *
+ * const users = ref([...]);
+ *
+ * const { containerRef, instance } = useVList({
+ *   item: {
+ *     height: 48,
+ *     template: (user) => `<div>${user.name}</div>`,
+ *   },
+ *   items: users,
+ * });
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef" style="height: 400px" />
+ * </template>
+ * ```
+ */
+export declare function useVList<T extends VListItem = VListItem>(configInput: UseVListConfig<T> | Ref<UseVListConfig<T>>): UseVListReturn<T>;
+/**
+ * Subscribe to vlist events within Vue lifecycle
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { instance } = useVList(config);
+ *
+ * useVListEvent(instance, 'selection:change', ({ selected }) => {
+ *   console.log('Selected:', selected);
+ * });
+ * </script>
+ * ```
+ */
+export declare function useVListEvent<T extends VListItem, K extends keyof VListEvents<T>>(instanceRef: Ref<VList<T> | null> | ShallowRef<VList<T> | null>, event: K, handler: EventHandler<VListEvents<T>[K]>): void;

package/dist/index.js

@@ -0,0 +1 @@
+import{ref as K,shallowRef as T,onMounted as V,onBeforeUnmount as L,watch as N,isRef as W,unref as X}from"vue";import{vlist as Y}from"@floor/vlist";import{withAsync as Z,withGrid as _,withSections as $,withSelection as J,withScrollbar as A,withScale as G,withSnapshots as H,withPage as M}from"@floor/vlist";function U(z){let E=K(null),q=T(null);if(V(()=>{let x=E.value;if(!x)return;let k=X(z),j=Y({...k,container:x});if(k.scroll?.element===window)j=j.use(M());if(k.adapter)j=j.use(Z({adapter:k.adapter,...k.loading&&{loading:k.loading}}));if(k.layout==="grid"&&k.grid)j=j.use(_(k.grid));if(k.groups)j=j.use($(k.groups));if((k.selection?.mode||"none")!=="none")j=j.use(J(k.selection));else j=j.use(J({mode:"none"}));j=j.use(G());let D=k.scroll?.scrollbar||k.scrollbar;if(D!=="none"){let Q=typeof D==="object"?D:{};j=j.use(A(Q))}j=j.use(H()),q.value=j.build()}),L(()=>{q.value?.destroy(),q.value=null}),W(z))N(()=>z.value.items,(x)=>{if(q.value&&x)q.value.setItems(x)});return{containerRef:E,instance:q}}function y(z,E,q){let x=K(q);N(()=>z.value,(k)=>{if(!k)return;let j=(D)=>{x.value(D)},F=k.on(E,j);L(()=>{F()})},{immediate:!0})}export{y as useVListEvent,U as useVList};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "vlist-vue",
+  "version": "0.1.0",
+  "description": "Vue composable for vlist - lightweight virtual scrolling",
+  "author": {
+    "name": "Floor IO",
+    "url": "https://floor.io"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/floor/vlist-vue.git"
+  },
+  "keywords": [
+    "vlist",
+    "virtual-list",
+    "vue",
+    "composable",
+    "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",
+    "vue": ">=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",
+    "typescript": "^5.0.0",
+    "vue": "^3.5.28"
+  }
+}