vlist-vue 0.1.1 → 1.2.0

package/README.md

@@ -1,24 +1,20 @@
 # vlist-vue
 
-Vue composable for [vlist](https://github.com/floor/vlist) - lightweight, zero-dependency virtual scrolling.
+Vue composable for [@floor/vlist](https://github.com/floor/vlist) — lightweight, zero-dependency virtual scrolling.
 
-## Installation
+## Install
 
 ```bash
 npm install @floor/vlist vlist-vue
 ```
 
-## Usage
-
-### Composition API
+## Quick Start
 
 ```vue
 <script setup>
 import { useVList } from 'vlist-vue';
 import '@floor/vlist/styles';
 
-const users = ref([...]);
-
 const { containerRef, instance } = useVList({
   item: {
     height: 48,
@@ -33,42 +29,17 @@ const { containerRef, instance } = useVList({
 </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
+- **`useVList(config)`** — Creates a virtual list. Returns `{ containerRef, instance }`. Config can be a plain object or a reactive `Ref` for automatic updates.
+- **`useVListEvent(instance, event, handler)`** — Subscribe to vlist events with automatic cleanup.
 
-**Returns:**
-- `containerRef` - Template ref for the container
-- `instance` - Reactive ref to the vlist instance
+Config accepts all [@floor/vlist options](https://vlist.dev/docs/api/reference) minus `container` (handled by the ref). Feature fields like `adapter`, `grid`, `groups`, `selection`, and `scrollbar` are translated into `.use(withX())` calls automatically.
 
 ## Documentation
 
-For full documentation, see [vlist.dev](https://vlist.dev)
+Full usage guide, feature config examples, and TypeScript types: **[Framework Adapters — Vue](https://vlist.dev/docs/frameworks#vue)**
 
 ## License
 
-MIT © [Floor IO](https://floor.io)
+MIT © [Floor IO](https://floor.io)

package/dist/index.d.ts

@@ -3,11 +3,11 @@
  */
 import { type Ref, type ShallowRef } from "vue";
 import type { VListConfig, VListItem, VListEvents, EventHandler } from "@floor/vlist";
-import { type BuiltVList } from "@floor/vlist";
+import { type VList } from "@floor/vlist";
 export type UseVListConfig<T extends VListItem = VListItem> = Omit<VListConfig<T>, "container">;
 export interface UseVListReturn<T extends VListItem = VListItem> {
     containerRef: Ref<HTMLDivElement | null>;
-    instance: ShallowRef<BuiltVList<T> | null>;
+    instance: ShallowRef<VList<T> | null>;
 }
 export declare function useVList<T extends VListItem = VListItem>(configInput: UseVListConfig<T> | Ref<UseVListConfig<T>>): UseVListReturn<T>;
-export declare function useVListEvent<T extends VListItem, K extends keyof VListEvents<T>>(instanceRef: Ref<BuiltVList<T> | null> | ShallowRef<BuiltVList<T> | null>, event: K, handler: EventHandler<VListEvents<T>[K]>): void;
+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

@@ -1 +1 @@
-import{ref as f,shallowRef as p,onMounted as L,onBeforeUnmount as c,watch as d,isRef as h,unref as V}from"vue";import{vlist as v}from"@floor/vlist";import{withAsync as g,withGrid as T,withSections as w,withSelection as a,withScrollbar as b,withScale as y,withSnapshots as R,withPage as x}from"@floor/vlist";function S(o){let r=f(null),n=p(null);if(L(()=>{let s=r.value;if(!s)return;let t=V(o),e=v({...t,container:s});if(t.scroll?.element===window)e=e.use(x());if(t.adapter)e=e.use(g({adapter:t.adapter,...t.loading&&{loading:t.loading}}));if(t.layout==="grid"&&t.grid)e=e.use(T(t.grid));if(t.groups){let i=t.groups,m=typeof i.headerHeight==="function"?i.headerHeight("",0):i.headerHeight;e=e.use(w({getGroupForIndex:i.getGroupForIndex,headerHeight:m,headerTemplate:i.headerTemplate,...i.sticky!==void 0&&{sticky:i.sticky}}))}if((t.selection?.mode||"none")!=="none")e=e.use(a(t.selection));else e=e.use(a({mode:"none"}));e=e.use(y());let l=t.scroll?.scrollbar||t.scrollbar;if(l!=="none"){let i=typeof l==="object"?l:{};e=e.use(b(i))}e=e.use(R()),n.value=e.build()}),c(()=>{n.value?.destroy(),n.value=null}),h(o))d(()=>o.value.items,(s)=>{if(n.value&&s)n.value.setItems(s)});return{containerRef:r,instance:n}}function U(o,r,n){let s=f(n);d(()=>o.value,(t)=>{if(!t)return;let e=(l)=>{s.value(l)},u=t.on(r,e);c(()=>{u()})},{immediate:!0})}export{U as useVListEvent,S as useVList};
+import{ref as f,shallowRef as p,onMounted as h,onBeforeUnmount as c,watch as d,isRef as L,unref as V}from"vue";import{vlist as v}from"@floor/vlist";import{withAsync as g,withGrid as T,withMasonry as y,withGroups as w,withSelection as u,withScrollbar as b,withScale as R,withSnapshots as x,withPage as E}from"@floor/vlist";function C(o){let r=f(null),s=p(null);if(h(()=>{let n=r.value;if(!n)return;let t=V(o),e=v({...t,container:n});if(t.scroll?.element===window)e=e.use(E());if(t.adapter)e=e.use(g({adapter:t.adapter,...t.loading&&{loading:t.loading}}));if(t.layout==="grid"&&t.grid)e=e.use(T(t.grid));if(t.layout==="masonry"&&t.masonry)e=e.use(y(t.masonry));if(t.groups){let i=t.groups,m=typeof i.headerHeight==="function"?i.headerHeight("",0):i.headerHeight;e=e.use(w({getGroupForIndex:i.getGroupForIndex,headerHeight:m,headerTemplate:i.headerTemplate,...i.sticky!==void 0&&{sticky:i.sticky}}))}if((t.selection?.mode||"none")!=="none")e=e.use(u(t.selection));else e=e.use(u({mode:"none"}));e=e.use(R());let l=t.scroll?.scrollbar||t.scrollbar;if(l!=="none"){let i=typeof l==="object"?l:{};e=e.use(b(i))}e=e.use(x()),s.value=e.build()}),c(()=>{s.value?.destroy(),s.value=null}),L(o))d(()=>o.value.items,(n)=>{if(s.value&&n)s.value.setItems(n)});return{containerRef:r,instance:s}}function S(o,r,s){let n=f(s);d(()=>o.value,(t)=>{if(!t)return;let e=(l)=>{n.value(l)},a=t.on(r,e);c(()=>{a()})},{immediate:!0})}export{S as useVListEvent,C as useVList};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vlist-vue",
-  "version": "0.1.1",
+  "version": "1.2.0",
   "description": "Vue composable for vlist - lightweight virtual scrolling",
   "author": {
     "name": "Floor IO",
@@ -32,7 +32,7 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@floor/vlist": "^0.6.0",
+    "@floor/vlist": "^1.2.0",
     "vue": ">=3.0.0"
   },
   "files": [