solid-tiny-ui 0.4.0 → 0.5.0

package/dist/primitives/fake-scroll-list/listbox.js

@@ -0,0 +1,72 @@
+import { context } from "./context.js";
+import { createComponent, effect, insert, setStyleProperty, template, use } from "solid-js/web";
+import { For, createMemo, onMount } from "solid-js";
+import { runAtNextAnimationFrame } from "solid-tiny-utils";
+
+//#region src/primitives/fake-scroll-list/listbox.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function Listbox(props) {
+	const [state, actions] = context.useContext();
+	const renderItems = createMemo(() => {
+		const keyedItems = state.items.map((item, index) => ({
+			item,
+			key: `${index}`
+		}));
+		if (state.shouldFake) {
+			const items = [
+				...keyedItems.map((k) => ({
+					item: k.item,
+					key: `${k.key}-pre`
+				})),
+				...keyedItems,
+				...keyedItems.map((k) => ({
+					item: k.item,
+					key: `${k.key}-post`
+				}))
+			];
+			const startIndex = state.items.length - state.overScan;
+			const endIndex = 2 * state.items.length + state.overScan;
+			return items.slice(startIndex, endIndex);
+		}
+		return keyedItems;
+	});
+	let ref;
+	onMount(() => {
+		runAtNextAnimationFrame(() => {
+			ref.style.transition = "transform 0.2s ease";
+		});
+	});
+	const checkPos = () => {
+		if (state.inViewIndex < 0 || state.inViewIndex >= state.items.length) {
+			ref.style.transition = "none";
+			actions.setState("inViewIndex", state.fixedInViewIndex);
+			runAtNextAnimationFrame(() => {
+				ref.style.transition = "transform 0.2s ease";
+			});
+		}
+	};
+	const translateY = createMemo(() => {
+		const centerHeight = Math.floor(state.visibleItemsCount / 2) * state.itemHeight;
+		const overScanHeight = state.overScan * state.itemHeight;
+		return -state.inViewIndex * state.itemHeight + centerHeight - overScanHeight;
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = ref;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
+		_el$.addEventListener("transitionend", () => {
+			checkPos();
+		});
+		insert(_el$, createComponent(For, {
+			get each() {
+				return renderItems();
+			},
+			children: (item) => props.children(item.item, item.key)
+		}));
+		effect((_$p) => setStyleProperty(_el$, "transform", `translateY(${translateY()}px)`));
+		return _el$;
+	})();
+}
+
+//#endregion
+export { Listbox };

package/dist/primitives/fake-scroll-list/listbox.jsx

@@ -0,0 +1,61 @@
+import { context } from "./context.jsx";
+import { For, createMemo, onMount } from "solid-js";
+import { runAtNextAnimationFrame } from "solid-tiny-utils";
+
+//#region src/primitives/fake-scroll-list/listbox.tsx
+function Listbox(props) {
+	const [state, actions] = context.useContext();
+	const renderItems = createMemo(() => {
+		const keyedItems = state.items.map((item, index) => ({
+			item,
+			key: `${index}`
+		}));
+		if (state.shouldFake) {
+			const items = [
+				...keyedItems.map((k) => ({
+					item: k.item,
+					key: `${k.key}-pre`
+				})),
+				...keyedItems,
+				...keyedItems.map((k) => ({
+					item: k.item,
+					key: `${k.key}-post`
+				}))
+			];
+			const startIndex = state.items.length - state.overScan;
+			const endIndex = 2 * state.items.length + state.overScan;
+			return items.slice(startIndex, endIndex);
+		}
+		return keyedItems;
+	});
+	let ref;
+	onMount(() => {
+		runAtNextAnimationFrame(() => {
+			ref.style.transition = "transform 0.2s ease";
+		});
+	});
+	const checkPos = () => {
+		if (state.inViewIndex < 0 || state.inViewIndex >= state.items.length) {
+			ref.style.transition = "none";
+			actions.setState("inViewIndex", state.fixedInViewIndex);
+			runAtNextAnimationFrame(() => {
+				ref.style.transition = "transform 0.2s ease";
+			});
+		}
+	};
+	const translateY = createMemo(() => {
+		const centerHeight = Math.floor(state.visibleItemsCount / 2) * state.itemHeight;
+		const overScanHeight = state.overScan * state.itemHeight;
+		return -state.inViewIndex * state.itemHeight + centerHeight - overScanHeight;
+	});
+	return <div onTransitionEnd={() => {
+		checkPos();
+	}} ref={ref} style={{ transform: `translateY(${translateY()}px)` }}>
+      <For each={renderItems()}>
+        {(item) => props.children(item.item, item.key)}
+      </For>
+    </div>;
+}
+
+//#endregion
+export { Listbox };

package/dist/primitives/fake-scroll-list/root.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from "solid-js";
+
+//#region src/primitives/fake-scroll-list/root.d.ts
+declare function Root(props: {
+  children: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties | string;
+  items: string[];
+  visibleItemsCount: number;
+  itemHeight: number;
+  inViewIndex: number;
+  onInViewIndexChange: (index: number) => void;
+}): JSX.Element;
+//#endregion
+export { Root };

package/dist/primitives/fake-scroll-list/root.js

@@ -0,0 +1,52 @@
+import { context } from "./context.js";
+import { className, createComponent, effect, insert, style, template } from "solid-js/web";
+import { combineStyle, createWatch } from "solid-tiny-utils";
+
+//#region src/primitives/fake-scroll-list/root.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function Root(props) {
+	const Context = context.initial({
+		items: () => props.items,
+		visibleItemsCount: () => props.visibleItemsCount,
+		itemHeight: () => props.itemHeight
+	});
+	const [state, actions] = Context.value;
+	createWatch(() => props.inViewIndex, (index) => {
+		if (index !== state.fixedInViewIndex) actions.setState("inViewIndex", index);
+	});
+	createWatch(() => state.fixedInViewIndex, (inViewIndex) => {
+		if (inViewIndex !== props.inViewIndex) props.onInViewIndexChange(inViewIndex);
+	});
+	const handleOnWheel = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const { deltaY } = e;
+		const index = state.inViewIndex;
+		const newIndex = deltaY > 0 ? index + 1 : index - 1;
+		if (state.shouldFake) {
+			if (newIndex >= -state.overScan + 3 && newIndex < state.items.length + state.overScan - 3) actions.setState("inViewIndex", newIndex);
+		} else if (newIndex >= 0 && newIndex < state.items.length) actions.setState("inViewIndex", newIndex);
+	};
+	return createComponent(Context.Provider, { get children() {
+		var _el$ = _tmpl$();
+		_el$.addEventListener("wheel", handleOnWheel);
+		insert(_el$, () => props.children);
+		effect((_p$) => {
+			var _v$ = props.class, _v$2 = combineStyle({
+				height: `${props.itemHeight * props.visibleItemsCount}px`,
+				width: "100%",
+				overflow: "hidden"
+			}, props.style);
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_p$.t = style(_el$, _v$2, _p$.t);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	} });
+}
+
+//#endregion
+export { Root };

package/dist/primitives/fake-scroll-list/root.jsx

@@ -0,0 +1,40 @@
+import { context } from "./context.jsx";
+import { combineStyle, createWatch } from "solid-tiny-utils";
+
+//#region src/primitives/fake-scroll-list/root.tsx
+function Root(props) {
+	const Context = context.initial({
+		items: () => props.items,
+		visibleItemsCount: () => props.visibleItemsCount,
+		itemHeight: () => props.itemHeight
+	});
+	const [state, actions] = Context.value;
+	createWatch(() => props.inViewIndex, (index) => {
+		if (index !== state.fixedInViewIndex) actions.setState("inViewIndex", index);
+	});
+	createWatch(() => state.fixedInViewIndex, (inViewIndex) => {
+		if (inViewIndex !== props.inViewIndex) props.onInViewIndexChange(inViewIndex);
+	});
+	const handleOnWheel = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const { deltaY } = e;
+		const index = state.inViewIndex;
+		const newIndex = deltaY > 0 ? index + 1 : index - 1;
+		if (state.shouldFake) {
+			if (newIndex >= -state.overScan + 3 && newIndex < state.items.length + state.overScan - 3) actions.setState("inViewIndex", newIndex);
+		} else if (newIndex >= 0 && newIndex < state.items.length) actions.setState("inViewIndex", newIndex);
+	};
+	return <Context.Provider>
+      <div class={props.class} onWheel={handleOnWheel} style={combineStyle({
+		height: `${props.itemHeight * props.visibleItemsCount}px`,
+		width: "100%",
+		overflow: "hidden"
+	}, props.style)}>
+        {props.children}
+      </div>
+    </Context.Provider>;
+}
+
+//#endregion
+export { Root };

package/dist/primitives/floating/context.d.ts

@@ -1,8 +1,8 @@
-import * as solid_js21 from "solid-js";
+import * as solid_js23 from "solid-js";
 import * as _floating_ui_dom23 from "@floating-ui/dom";
 import { Derivable, OffsetOptions, Placement } from "@floating-ui/dom";
 import * as solid_tiny_context5 from "solid-tiny-context";
-import * as solid_js_store9 from "solid-js/store";
+import * as solid_js_store10 from "solid-js/store";
 import * as _floating_ui_core75 from "@floating-ui/core";
 
 //#region src/primitives/floating/context.d.ts
@@ -129,7 +129,7 @@ declare const context: {
     _setOpen(open: boolean): void;
     updatePos(): Promise<void>;
   }, "setState"> & {
-    setState: solid_js_store9.SetStoreFunction<{
+    setState: solid_js_store10.SetStoreFunction<{
       x: number;
       y: number;
       open: boolean;
@@ -369,8 +369,8 @@ declare const context: {
     };
   }>> | undefined): {
     Provider(props: {
-      children?: solid_js21.JSX.Element;
-    }): solid_js21.JSX.Element;
+      children?: solid_js23.JSX.Element;
+    }): solid_js23.JSX.Element;
     value: [Readonly<{
       x: number;
       y: number;
@@ -616,7 +616,7 @@ declare const context: {
       _setOpen(open: boolean): void;
       updatePos(): Promise<void>;
     }>>, "setState"> & {
-      setState: solid_js_store9.SetStoreFunction<{
+      setState: solid_js_store10.SetStoreFunction<{
         x: number;
         y: number;
         open: boolean;

package/dist/primitives/floating/index.d.ts

@@ -3,7 +3,7 @@ import { Content } from "./content.js";
 import { FloatingUiCoreProps, Placement as Placement$1 } from "./types.js";
 import { Root } from "./root.js";
 import * as _floating_ui_dom0 from "@floating-ui/dom";
-import * as solid_js_store2 from "solid-js/store";
+import * as solid_js_store9 from "solid-js/store";
 import * as _floating_ui_core0 from "@floating-ui/core";
 
 //#region src/primitives/floating/index.d.ts
@@ -132,7 +132,7 @@ declare const FloatingUiCore: typeof Root & {
     _setOpen(open: boolean): void;
     updatePos(): Promise<void>;
   }, "setState"> & {
-    setState: solid_js_store2.SetStoreFunction<{
+    setState: solid_js_store9.SetStoreFunction<{
       x: number;
       y: number;
       open: boolean;

package/dist/primitives/index.d.ts

@@ -1,5 +1,6 @@
 import { ModalCore } from "./modal/index.js";
 import { AnimatedGroup } from "./animated-group/index.js";
+import { FakeScrollListCore } from "./fake-scroll-list/index.js";
 import { Listbox } from "./listbox/listbox.js";
 import "./listbox/index.js";
-export { AnimatedGroup, Listbox, ModalCore };
+export { AnimatedGroup, FakeScrollListCore, Listbox, ModalCore };

package/dist/primitives/index.js

@@ -2,5 +2,6 @@ import { Listbox } from "./listbox/listbox.js";
 import "./listbox/index.js";
 import { ModalCore } from "./modal/index.js";
 import { AnimatedGroup } from "./animated-group/index.js";
+import { FakeScrollListCore } from "./fake-scroll-list/index.js";
 
-export { AnimatedGroup, Listbox, ModalCore };
+export { AnimatedGroup, FakeScrollListCore, Listbox, ModalCore };

package/dist/primitives/index.jsx

@@ -2,5 +2,6 @@ import { Listbox } from "./listbox/listbox.jsx";
 import "./listbox/index.jsx";
 import { ModalCore } from "./modal/index.jsx";
 import { AnimatedGroup } from "./animated-group/index.jsx";
+import { FakeScrollListCore } from "./fake-scroll-list/index.jsx";
 
-export { AnimatedGroup, Listbox, ModalCore };
+export { AnimatedGroup, FakeScrollListCore, Listbox, ModalCore };

package/dist/primitives/listbox/listbox.d.ts

@@ -1,14 +1,14 @@
-import * as solid_js7 from "solid-js";
+import * as solid_js9 from "solid-js";
 import { ComponentProps } from "solid-js";
 
 //#region src/primitives/listbox/listbox.d.ts
 declare function Root(props: Omit<ComponentProps<"div">, "role" | "tabIndex" | "tabindex"> & {
   autofocus?: boolean;
-}): solid_js7.JSX.Element;
+}): solid_js9.JSX.Element;
 declare function Item(props: Omit<ComponentProps<"div">, "role" | "tabIndex" | "tabindex"> & {
   focus?: boolean;
   disabled?: boolean;
-}): solid_js7.JSX.Element;
+}): solid_js9.JSX.Element;
 declare const Listbox: typeof Root & {
   Item: typeof Item;
 };

package/dist/primitives/modal/content.d.ts

@@ -1,8 +1,8 @@
-import * as solid_js4 from "solid-js";
+import * as solid_js6 from "solid-js";
 import { ComponentProps } from "solid-js";
 
 //#region src/primitives/modal/content.d.ts
-declare function ContentWrapper(props: ComponentProps<"div">): solid_js4.JSX.Element;
-declare function Content(props: ComponentProps<"div">): solid_js4.JSX.Element;
+declare function ContentWrapper(props: ComponentProps<"div">): solid_js6.JSX.Element;
+declare function Content(props: ComponentProps<"div">): solid_js6.JSX.Element;
 //#endregion
 export { Content, ContentWrapper };

package/dist/primitives/modal/context.d.ts

@@ -1,6 +1,6 @@
-import * as solid_js16 from "solid-js";
-import * as solid_tiny_context1 from "solid-tiny-context";
-import * as solid_js_store5 from "solid-js/store";
+import * as solid_js11 from "solid-js";
+import * as solid_tiny_context0 from "solid-tiny-context";
+import * as solid_js_store3 from "solid-js/store";
 
 //#region src/primitives/modal/context.d.ts
 declare const context: {
@@ -12,7 +12,7 @@ declare const context: {
     closeOnClickMask: boolean;
     closeOnEsc: boolean;
   } & {}>, Omit<{}, "setState"> & {
-    setState: solid_js_store5.SetStoreFunction<{
+    setState: solid_js_store3.SetStoreFunction<{
       id: string;
       open: boolean;
       refContent: HTMLElement | null;
@@ -24,7 +24,7 @@ declare const context: {
     shouldMount: () => boolean;
     presenceState: () => string;
   }];
-  initial(initialState?: Partial<solid_tiny_context1.MaybeSignals<{
+  initial(initialState?: Partial<solid_tiny_context0.MaybeSignals<{
     id: string;
     open: boolean;
     refContent: HTMLElement | null;
@@ -33,8 +33,8 @@ declare const context: {
     closeOnEsc: boolean;
   }>> | undefined): {
     Provider(props: {
-      children?: solid_js16.JSX.Element;
-    }): solid_js16.JSX.Element;
+      children?: solid_js11.JSX.Element;
+    }): solid_js11.JSX.Element;
     value: [Readonly<{
       id: string;
       open: boolean;
@@ -42,7 +42,7 @@ declare const context: {
       preventScroll: boolean;
       closeOnClickMask: boolean;
       closeOnEsc: boolean;
-    } & {}>, Omit<ThisType<solid_tiny_context1.RealContextThis<{
+    } & {}>, Omit<ThisType<solid_tiny_context0.RealContextThis<{
       id: string;
       open: boolean;
       refContent: HTMLElement | null;
@@ -53,7 +53,7 @@ declare const context: {
       shouldMount: () => boolean;
       presenceState: () => string;
     }, {}, {}>>, "setState"> & {
-      setState: solid_js_store5.SetStoreFunction<{
+      setState: solid_js_store3.SetStoreFunction<{
         id: string;
         open: boolean;
         refContent: HTMLElement | null;

package/dist/primitives/modal/root.d.ts

@@ -1,5 +1,5 @@
 import { context } from "./context.js";
-import * as solid_js3 from "solid-js";
+import * as solid_js5 from "solid-js";
 import { MaybeCallableChild } from "solid-tiny-utils";
 
 //#region src/primitives/modal/root.d.ts
@@ -10,6 +10,6 @@ declare function Root(props: {
   preventScroll?: boolean;
   closeOnClickMask?: boolean;
   closeOnEsc?: boolean;
-}): solid_js3.JSX.Element;
+}): solid_js5.JSX.Element;
 //#endregion
 export { Root };

package/dist/root-provider/context.d.ts

@@ -1,28 +1,28 @@
-import * as solid_js11 from "solid-js";
-import * as solid_tiny_context0 from "solid-tiny-context";
-import * as solid_js_store3 from "solid-js/store";
+import * as solid_js20 from "solid-js";
+import * as solid_tiny_context3 from "solid-tiny-context";
+import * as solid_js_store7 from "solid-js/store";
 
 //#region src/root-provider/context.d.ts
 declare const context: {
   useContext: () => [Readonly<{
     hue: number;
   } & {}>, Omit<{}, "setState"> & {
-    setState: solid_js_store3.SetStoreFunction<{
+    setState: solid_js_store7.SetStoreFunction<{
       hue: number;
     }>;
   }, {}];
-  initial(initialState?: Partial<solid_tiny_context0.MaybeSignals<{
+  initial(initialState?: Partial<solid_tiny_context3.MaybeSignals<{
     hue: number;
   }>> | undefined): {
     Provider(props: {
-      children?: solid_js11.JSX.Element;
-    }): solid_js11.JSX.Element;
+      children?: solid_js20.JSX.Element;
+    }): solid_js20.JSX.Element;
     value: [Readonly<{
       hue: number;
-    } & {}>, Omit<ThisType<solid_tiny_context0.RealContextThis<{
+    } & {}>, Omit<ThisType<solid_tiny_context3.RealContextThis<{
       hue: number;
     }, {}, {}, {}>>, "setState"> & {
-      setState: solid_js_store3.SetStoreFunction<{
+      setState: solid_js_store7.SetStoreFunction<{
         hue: number;
       }>;
     }, {}];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-tiny-ui",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Core package for solid tiny UI library",
   "author": "solid tiny",
   "license": "MIT",
@@ -34,11 +34,12 @@
     "solid-js": "^1.9.9"
   },
   "dependencies": {
+    "@floating-ui/core": "^1.7.3",
+    "@floating-ui/dom": "^1.7.4",
+    "@solid-primitives/refs": "^1.1.2",
     "solid-tiny-context": "0.2.3",
     "solid-tiny-utils": "0.11.0",
-    "@solid-primitives/refs": "^1.1.2",
-    "@floating-ui/core": "^1.7.3",
-    "@floating-ui/dom": "^1.7.4"
+    "time-core": "^0.1.0"
   },
   "devDependencies": {
     "@iconify-json/ri": "^1.2.6",
@@ -48,14 +49,14 @@
     "@vitest/browser-playwright": "^4.0.16",
     "rolldown-plugin-solid": "^0.2.1",
     "rollup-plugin-inline-import": "^0.3.0",
-    "vite-plugin-solid-pages": "^0.3.0",
     "tsdown": "^0.18.3",
     "typescript": "^5.9.3",
     "unocss": "66.5.10",
     "vite": "^7.1.10",
     "vite-plugin-solid": "^2.11.10",
+    "vite-plugin-solid-pages": "^0.3.0",
     "vitest": "^4.0.16",
-    "@solid-tiny-ui/unocss-preset": "0.4.0"
+    "@solid-tiny-ui/unocss-preset": "0.5.0"
   },
   "scripts": {
     "build": "tsdown",