solid-tiny-ui 0.4.0 → 0.6.0

package/dist/primitives/pagination/context.jsx

@@ -0,0 +1,88 @@
+import { inRange, max } from "solid-tiny-utils";
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/primitives/pagination/context.ts
+const context = createComponentState({
+	state: () => ({
+		current: 1,
+		total: 1,
+		pageSize: 10,
+		disabled: false,
+		maxVisiblePages: 7
+	}),
+	getters: {
+		totalPages() {
+			return Math.ceil(this.state.total / this.state.pageSize);
+		},
+		renderedPages() {
+			const total = this.state.totalPages;
+			const current = this.state.current;
+			const maxVisiblePages = this.state.maxVisiblePages;
+			const pages = [];
+			if (total <= 1) return [{
+				type: "page",
+				page: 1
+			}];
+			if (total <= maxVisiblePages) {
+				for (let i = 1; i <= total; i++) pages.push({
+					type: "page",
+					page: i
+				});
+				return pages;
+			}
+			pages.push({
+				type: "page",
+				page: 1
+			});
+			const centerCount = maxVisiblePages - 2;
+			let start = max(2, current - Math.floor(centerCount / 2));
+			let end = start + centerCount - 1;
+			if (end >= total) {
+				end = total - 1;
+				start = end - centerCount + 1;
+			}
+			if (start > 2) pages.push({
+				type: "ellipsis-left",
+				page: start - 1
+			});
+			else pages.push({
+				type: "page",
+				page: 2
+			});
+			for (let i = start + 1; i <= end - 1; i++) pages.push({
+				type: "page",
+				page: i
+			});
+			if (end < total - 1) pages.push({
+				type: "ellipsis-right",
+				page: end + 1
+			});
+			else pages.push({
+				type: "page",
+				page: total - 1
+			});
+			pages.push({
+				type: "page",
+				page: total
+			});
+			return pages;
+		}
+	},
+	methods: {
+		gotoPage(page) {
+			if (this.state.disabled) return;
+			const safePage = Math.floor(page);
+			const total = this.state.totalPages;
+			if (inRange(safePage, 1, total)) this.actions.setState("current", safePage);
+		},
+		next() {
+			this.actions.gotoPage(this.state.current + 1);
+		},
+		prev() {
+			this.actions.gotoPage(this.state.current - 1);
+		}
+	}
+});
+
+//#endregion
+export { context };

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

@@ -0,0 +1,33 @@
+import { PaginationPageType, PaginationPager } from "./context.js";
+import { Items } from "./items.js";
+import { Root } from "./root.js";
+import * as solid_js_store4 from "solid-js/store";
+
+//#region src/primitives/pagination/index.d.ts
+declare const PaginationCore: typeof Root & {
+  Items: typeof Items;
+  useContext: () => [Readonly<{
+    current: number;
+    total: number;
+    pageSize: number;
+    disabled: boolean;
+    maxVisiblePages: number;
+  } & {
+    totalPages: number;
+    renderedPages: PaginationPager[];
+  }>, Omit<{
+    gotoPage(page: number): void;
+    next(): void;
+    prev(): void;
+  }, "setState" | "totalPages" | "renderedPages"> & {
+    setState: solid_js_store4.SetStoreFunction<{
+      current: number;
+      total: number;
+      pageSize: number;
+      disabled: boolean;
+      maxVisiblePages: number;
+    }>;
+  }, {}];
+};
+//#endregion
+export { PaginationCore };

package/dist/primitives/pagination/index.js

@@ -0,0 +1,12 @@
+import { context } from "./context.js";
+import { Items } from "./items.js";
+import { Root } from "./root.js";
+
+//#region src/primitives/pagination/index.ts
+const PaginationCore = Object.assign(Root, {
+	Items,
+	useContext: context.useContext
+});
+
+//#endregion
+export { PaginationCore };

package/dist/primitives/pagination/index.jsx

@@ -0,0 +1,12 @@
+import { context } from "./context.jsx";
+import { Items } from "./items.jsx";
+import { Root } from "./root.jsx";
+
+//#region src/primitives/pagination/index.ts
+const PaginationCore = Object.assign(Root, {
+	Items,
+	useContext: context.useContext
+});
+
+//#endregion
+export { PaginationCore };

package/dist/primitives/pagination/items.d.ts

@@ -0,0 +1,9 @@
+import { PaginationPager } from "./context.js";
+import { JSX } from "solid-js";
+
+//#region src/primitives/pagination/items.d.ts
+declare function Items(props: {
+  render: (page: PaginationPager) => JSX.Element;
+}): JSX.Element;
+//#endregion
+export { Items };

package/dist/primitives/pagination/items.js

@@ -0,0 +1,19 @@
+import { context } from "./context.js";
+import { createComponent } from "solid-js/web";
+import { For as For$1 } from "solid-js";
+
+//#region src/primitives/pagination/items.tsx
+function Items(props) {
+	const [state] = context.useContext();
+	return createComponent(For$1, {
+		get each() {
+			return state.renderedPages;
+		},
+		get children() {
+			return props.render;
+		}
+	});
+}
+
+//#endregion
+export { Items };

package/dist/primitives/pagination/items.jsx

@@ -0,0 +1,11 @@
+import { context } from "./context.jsx";
+import { For } from "solid-js";
+
+//#region src/primitives/pagination/items.tsx
+function Items(props) {
+	const [state] = context.useContext();
+	return <For each={state.renderedPages}>{props.render}</For>;
+}
+
+//#endregion
+export { Items };

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

@@ -0,0 +1,16 @@
+import { context } from "./context.js";
+import * as solid_js8 from "solid-js";
+import { MaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/primitives/pagination/root.d.ts
+declare function Root(props: {
+  current?: number;
+  total?: number;
+  pageSize?: number;
+  onChange?: (page: number) => void;
+  disabled?: boolean;
+  maxVisiblePages?: number;
+  children?: MaybeCallableChild<ReturnType<typeof context.useContext>>;
+}): solid_js8.JSX.Element;
+//#endregion
+export { Root };

package/dist/primitives/pagination/root.js

@@ -0,0 +1,24 @@
+import { context } from "./context.js";
+import { createComponent } from "solid-js/web";
+import { callMaybeCallableChild, createWatch, isDefined, max } from "solid-tiny-utils";
+
+//#region src/primitives/pagination/root.tsx
+function Root(props) {
+	const Context = context.initial({
+		current: () => props.current,
+		total: () => props.total,
+		pageSize: () => max(props.pageSize ?? 10, 1),
+		disabled: () => props.disabled,
+		maxVisiblePages: () => max(props.maxVisiblePages ?? 7, 5)
+	});
+	const [state] = Context.value;
+	createWatch(() => state.current, (v) => {
+		if (isDefined(v) && v !== props.current) props.onChange?.(v);
+	});
+	return createComponent(Context.Provider, { get children() {
+		return callMaybeCallableChild(props.children, ...Context.value);
+	} });
+}
+
+//#endregion
+export { Root };

package/dist/primitives/pagination/root.jsx

@@ -0,0 +1,23 @@
+import { context } from "./context.jsx";
+import { callMaybeCallableChild, createWatch, isDefined, max } from "solid-tiny-utils";
+
+//#region src/primitives/pagination/root.tsx
+function Root(props) {
+	const Context = context.initial({
+		current: () => props.current,
+		total: () => props.total,
+		pageSize: () => max(props.pageSize ?? 10, 1),
+		disabled: () => props.disabled,
+		maxVisiblePages: () => max(props.maxVisiblePages ?? 7, 5)
+	});
+	const [state] = Context.value;
+	createWatch(() => state.current, (v) => {
+		if (isDefined(v) && v !== props.current) props.onChange?.(v);
+	});
+	return <Context.Provider>
+      {callMaybeCallableChild(props.children, ...Context.value)}
+    </Context.Provider>;
+}
+
+//#endregion
+export { Root };

package/dist/primitives/radio-group/context.d.ts

@@ -0,0 +1,91 @@
+import * as solid_js39 from "solid-js";
+import * as solid_tiny_context9 from "solid-tiny-context";
+import * as solid_js_store19 from "solid-js/store";
+
+//#region src/primitives/radio-group/context.d.ts
+declare const rootContext: {
+  useContext: () => [Readonly<{
+    value: unknown;
+    name: string;
+    disabled: boolean;
+  } & {}>, Omit<{}, "setState"> & {
+    setState: solid_js_store19.SetStoreFunction<{
+      value: unknown;
+      name: string;
+      disabled: boolean;
+    }>;
+  }, {}];
+  initial(initialState?: Partial<solid_tiny_context9.MaybeSignals<{
+    value: unknown;
+    name: string;
+    disabled: boolean;
+  }>> | undefined): {
+    Provider(props: {
+      children?: solid_js39.JSX.Element;
+    }): solid_js39.JSX.Element;
+    value: [Readonly<{
+      value: unknown;
+      name: string;
+      disabled: boolean;
+    } & {}>, Omit<ThisType<solid_tiny_context9.RealContextThis<{
+      value: unknown;
+      name: string;
+      disabled: boolean;
+    }, {}, {}, {}>>, "setState"> & {
+      setState: solid_js_store19.SetStoreFunction<{
+        value: unknown;
+        name: string;
+        disabled: boolean;
+      }>;
+    }, {}];
+  };
+  defaultValue: () => {
+    value: unknown;
+    name: string;
+    disabled: boolean;
+  };
+};
+declare const itemContext: {
+  useContext: () => [Readonly<{
+    value: unknown;
+    disabled: boolean;
+    checked: boolean;
+  } & {}>, Omit<{}, "setState"> & {
+    setState: solid_js_store19.SetStoreFunction<{
+      value: unknown;
+      disabled: boolean;
+      checked: boolean;
+    }>;
+  }, {}];
+  initial(initialState?: Partial<solid_tiny_context9.MaybeSignals<{
+    value: unknown;
+    disabled: boolean;
+    checked: boolean;
+  }>> | undefined): {
+    Provider(props: {
+      children?: solid_js39.JSX.Element;
+    }): solid_js39.JSX.Element;
+    value: [Readonly<{
+      value: unknown;
+      disabled: boolean;
+      checked: boolean;
+    } & {}>, Omit<ThisType<solid_tiny_context9.RealContextThis<{
+      value: unknown;
+      disabled: boolean;
+      checked: boolean;
+    }, {}, {}, {}>>, "setState"> & {
+      setState: solid_js_store19.SetStoreFunction<{
+        value: unknown;
+        disabled: boolean;
+        checked: boolean;
+      }>;
+    }, {}];
+  };
+  defaultValue: () => {
+    value: unknown;
+    disabled: boolean;
+    checked: boolean;
+  };
+};
+//#endregion
+export { itemContext, rootContext };

package/dist/primitives/radio-group/context.js

@@ -0,0 +1,16 @@
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/primitives/radio-group/context.ts
+const rootContext = createComponentState({ state: () => ({
+	value: void 0,
+	name: "",
+	disabled: false
+}) });
+const itemContext = createComponentState({ state: () => ({
+	value: void 0,
+	disabled: false,
+	checked: false
+}) });
+
+//#endregion
+export { itemContext, rootContext };

package/dist/primitives/radio-group/context.jsx

@@ -0,0 +1,16 @@
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/primitives/radio-group/context.ts
+const rootContext = createComponentState({ state: () => ({
+	value: void 0,
+	name: "",
+	disabled: false
+}) });
+const itemContext = createComponentState({ state: () => ({
+	value: void 0,
+	disabled: false,
+	checked: false
+}) });
+
+//#endregion
+export { itemContext, rootContext };

package/dist/primitives/radio-group/index.d.ts

@@ -0,0 +1,34 @@
+import { Item, ItemInput, ItemLabel } from "./item.js";
+import { Root } from "./root.js";
+import * as solid_js_store5 from "solid-js/store";
+
+//#region src/primitives/radio-group/index.d.ts
+declare const RadioGroupCore: typeof Root & {
+  Item: typeof Item;
+  ItemInput: typeof ItemInput;
+  ItemLabel: typeof ItemLabel;
+  useRootContext: () => [Readonly<{
+    value: unknown;
+    name: string;
+    disabled: boolean;
+  } & {}>, Omit<{}, "setState"> & {
+    setState: solid_js_store5.SetStoreFunction<{
+      value: unknown;
+      name: string;
+      disabled: boolean;
+    }>;
+  }, {}];
+  useItemContext: () => [Readonly<{
+    value: unknown;
+    disabled: boolean;
+    checked: boolean;
+  } & {}>, Omit<{}, "setState"> & {
+    setState: solid_js_store5.SetStoreFunction<{
+      value: unknown;
+      disabled: boolean;
+      checked: boolean;
+    }>;
+  }, {}];
+};
+//#endregion
+export { RadioGroupCore };

package/dist/primitives/radio-group/index.js

@@ -0,0 +1,15 @@
+import { itemContext, rootContext } from "./context.js";
+import { Item, ItemInput, ItemLabel } from "./item.js";
+import { Root } from "./root.js";
+
+//#region src/primitives/radio-group/index.ts
+const RadioGroupCore = Object.assign(Root, {
+	Item,
+	ItemInput,
+	ItemLabel,
+	useRootContext: rootContext.useContext,
+	useItemContext: itemContext.useContext
+});
+
+//#endregion
+export { RadioGroupCore };

package/dist/primitives/radio-group/index.jsx

@@ -0,0 +1,15 @@
+import { itemContext, rootContext } from "./context.jsx";
+import { Item, ItemInput, ItemLabel } from "./item.jsx";
+import { Root } from "./root.jsx";
+
+//#region src/primitives/radio-group/index.ts
+const RadioGroupCore = Object.assign(Root, {
+	Item,
+	ItemInput,
+	ItemLabel,
+	useRootContext: rootContext.useContext,
+	useItemContext: itemContext.useContext
+});
+
+//#endregion
+export { RadioGroupCore };

package/dist/primitives/radio-group/item.d.ts

@@ -0,0 +1,19 @@
+import { OmitComponentProps } from "../../utils/types.js";
+import { itemContext } from "./context.js";
+import * as solid_js13 from "solid-js";
+import { ComponentProps } from "solid-js";
+import { MaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/primitives/radio-group/item.d.ts
+declare function Item<T>(props: OmitComponentProps<"div", "children"> & {
+  value: T;
+  disabled?: boolean;
+  children?: MaybeCallableChild<ReturnType<typeof itemContext.useContext>>;
+}): solid_js13.JSX.Element;
+declare function ItemLabel(props: ComponentProps<"label">): solid_js13.JSX.Element;
+/**
+ * visually hidden radio input for the radio item
+ */
+declare function ItemInput(props: Omit<ComponentProps<"input">, "name" | "type">): solid_js13.JSX.Element;
+//#endregion
+export { Item, ItemInput, ItemLabel };

package/dist/primitives/radio-group/item.js

@@ -0,0 +1,74 @@
+import { VisuallyHidden } from "../../components/visually-hidden/index.js";
+import { itemContext, rootContext } from "./context.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { callMaybeCallableChild, dataIf, isUndefined } from "solid-tiny-utils";
+
+//#region src/primitives/radio-group/item.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<label>`);
+function Item(props) {
+	const [local, others] = splitProps(props, [
+		"children",
+		"value",
+		"disabled"
+	]);
+	const [rootState] = rootContext.useContext();
+	const Context = itemContext.initial({
+		value: () => local.value,
+		disabled: () => rootState.disabled || local.disabled,
+		checked: () => {
+			if (isUndefined(rootState.value)) return false;
+			return rootState.value === local.value;
+		}
+	});
+	const [state] = Context.value;
+	return createComponent(Context.Provider, { get children() {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({
+			get ["data-checked"]() {
+				return dataIf(state.checked);
+			},
+			get ["data-disabled"]() {
+				return dataIf(state.disabled);
+			}
+		}, others), false, true);
+		insert(_el$, () => callMaybeCallableChild(local.children, ...Context.value));
+		return _el$;
+	} });
+}
+function ItemLabel(props) {
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, props, false, false);
+		return _el$2;
+	})();
+}
+/**
+* visually hidden radio input for the radio item
+*/
+function ItemInput(props) {
+	const [rootState, rootActs] = rootContext.useContext();
+	const [itemState] = itemContext.useContext();
+	return createComponent(VisuallyHidden, mergeProps({
+		as: "input",
+		get checked() {
+			return itemState.checked;
+		},
+		get disabled() {
+			return itemState.disabled;
+		},
+		get name() {
+			return rootState.name;
+		},
+		onChange: (e) => {
+			if (e.currentTarget.checked) rootActs.setState("value", () => itemState.value);
+		},
+		type: "radio",
+		get value() {
+			return String(itemState.value);
+		}
+	}, props));
+}
+
+//#endregion
+export { Item, ItemInput, ItemLabel };

package/dist/primitives/radio-group/item.jsx

@@ -0,0 +1,44 @@
+import { VisuallyHidden } from "../../components/visually-hidden/index.jsx";
+import { itemContext, rootContext } from "./context.jsx";
+import { splitProps } from "solid-js";
+import { callMaybeCallableChild, dataIf, isUndefined } from "solid-tiny-utils";
+
+//#region src/primitives/radio-group/item.tsx
+function Item(props) {
+	const [local, others] = splitProps(props, [
+		"children",
+		"value",
+		"disabled"
+	]);
+	const [rootState] = rootContext.useContext();
+	const Context = itemContext.initial({
+		value: () => local.value,
+		disabled: () => rootState.disabled || local.disabled,
+		checked: () => {
+			if (isUndefined(rootState.value)) return false;
+			return rootState.value === local.value;
+		}
+	});
+	const [state] = Context.value;
+	return <Context.Provider>
+      <div data-checked={dataIf(state.checked)} data-disabled={dataIf(state.disabled)} {...others}>
+        {callMaybeCallableChild(local.children, ...Context.value)}
+      </div>
+    </Context.Provider>;
+}
+function ItemLabel(props) {
+	return <label {...props} />;
+}
+/**
+* visually hidden radio input for the radio item
+*/
+function ItemInput(props) {
+	const [rootState, rootActs] = rootContext.useContext();
+	const [itemState] = itemContext.useContext();
+	return <VisuallyHidden as="input" checked={itemState.checked} disabled={itemState.disabled} name={rootState.name} onChange={(e) => {
+		if (e.currentTarget.checked) rootActs.setState("value", () => itemState.value);
+	}} type="radio" value={String(itemState.value)} {...props} />;
+}
+
+//#endregion
+export { Item, ItemInput, ItemLabel };

package/dist/primitives/radio-group/root.d.ts

@@ -0,0 +1,14 @@
+import { rootContext } from "./context.js";
+import * as solid_js9 from "solid-js";
+import { MaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/primitives/radio-group/root.d.ts
+declare function Root<T>(props: {
+  value?: T;
+  onChange?: (value: T) => void;
+  name?: string;
+  children?: MaybeCallableChild<ReturnType<typeof rootContext.useContext>>;
+  disabled?: boolean;
+}): solid_js9.JSX.Element;
+//#endregion
+export { Root };

package/dist/primitives/radio-group/root.js

@@ -0,0 +1,23 @@
+import { rootContext } from "./context.js";
+import { createComponent } from "solid-js/web";
+import { createUniqueId } from "solid-js";
+import { callMaybeCallableChild, createWatch, isDefined } from "solid-tiny-utils";
+
+//#region src/primitives/radio-group/root.tsx
+function Root(props) {
+	const Context = rootContext.initial({
+		value: () => props.value,
+		name: () => props.name || `radio-group_${createUniqueId()}`,
+		disabled: () => props.disabled
+	});
+	const [state] = Context.value;
+	createWatch(() => state.value, (v) => {
+		if (isDefined(v) && v !== props.value) props.onChange?.(v);
+	});
+	return createComponent(Context.Provider, { get children() {
+		return callMaybeCallableChild(props.children, ...Context.value);
+	} });
+}
+
+//#endregion
+export { Root };

package/dist/primitives/radio-group/root.jsx

@@ -0,0 +1,22 @@
+import { rootContext } from "./context.jsx";
+import { createUniqueId } from "solid-js";
+import { callMaybeCallableChild, createWatch, isDefined } from "solid-tiny-utils";
+
+//#region src/primitives/radio-group/root.tsx
+function Root(props) {
+	const Context = rootContext.initial({
+		value: () => props.value,
+		name: () => props.name || `radio-group_${createUniqueId()}`,
+		disabled: () => props.disabled
+	});
+	const [state] = Context.value;
+	createWatch(() => state.value, (v) => {
+		if (isDefined(v) && v !== props.value) props.onChange?.(v);
+	});
+	return <Context.Provider>
+      {callMaybeCallableChild(props.children, ...Context.value)}
+    </Context.Provider>;
+}
+
+//#endregion
+export { Root };