solid-tiny-ui 0.4.0 → 0.6.0

package/dist/components/toaster/icon.js

@@ -0,0 +1,50 @@
+import { IconCheckboxCircleLine } from "../../icons/checkbox-circle-line.js";
+import { IconErrorWarningLine } from "../../icons/error-warning-line.js";
+import { InformationLine } from "../../icons/information-line.js";
+import { IconLoading } from "../../icons/loading.js";
+import "../../icons/index.js";
+import { createComponent, memo } from "solid-js/web";
+import { Match, Switch } from "solid-js";
+
+//#region src/components/toaster/icon.tsx
+function ToasterIcon(props) {
+	return createComponent(Switch, { get children() {
+		return [
+			createComponent(Match, {
+				get when() {
+					return props.type === "info";
+				},
+				get children() {
+					return createComponent(InformationLine, { size: "20px" });
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return props.type === "success";
+				},
+				get children() {
+					return createComponent(IconCheckboxCircleLine, { size: "20px" });
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return props.type === "error" || props.type === "warning";
+				},
+				get children() {
+					return createComponent(IconErrorWarningLine, { size: "20px" });
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return props.type === "loading";
+				},
+				get children() {
+					return createComponent(IconLoading, { size: "20px" });
+				}
+			})
+		];
+	} });
+}
+
+//#endregion
+export { ToasterIcon };

package/dist/components/toaster/icon.jsx

@@ -0,0 +1,27 @@
+import { IconCheckboxCircleLine } from "../../icons/checkbox-circle-line.jsx";
+import { IconErrorWarningLine } from "../../icons/error-warning-line.jsx";
+import { InformationLine } from "../../icons/information-line.jsx";
+import { IconLoading } from "../../icons/loading.jsx";
+import "../../icons/index.jsx";
+import { Match, Switch } from "solid-js";
+
+//#region src/components/toaster/icon.tsx
+function ToasterIcon(props) {
+	return <Switch>
+      <Match when={props.type === "info"}>
+        <InformationLine size="20px" />
+      </Match>
+      <Match when={props.type === "success"}>
+        <IconCheckboxCircleLine size="20px" />
+      </Match>
+      <Match when={props.type === "error" || props.type === "warning"}>
+        <IconErrorWarningLine size="20px" />
+      </Match>
+      <Match when={props.type === "loading"}>
+        <IconLoading size="20px" />
+      </Match>
+    </Switch>;
+}
+
+//#endregion
+export { ToasterIcon };

package/dist/components/toaster/index.d.ts

@@ -0,0 +1,3 @@
+import { Toast, ToastPosition, ToastType } from "./type.js";
+import { TinyToasterProvider } from "./provider.js";
+import { useToaster } from "./use-toaster.js";

package/dist/components/toaster/index.js

@@ -0,0 +1,2 @@
+import { TinyToasterProvider } from "./provider.js";
+import { useToaster } from "./use-toaster.js";

package/dist/components/toaster/index.jsx

@@ -0,0 +1,2 @@
+import { TinyToasterProvider } from "./provider.jsx";
+import { useToaster } from "./use-toaster.jsx";

package/dist/components/toaster/locator.js

@@ -0,0 +1,67 @@
+import { Flex } from "../../layout/flex/index.js";
+import "../../layout/index.js";
+import { createComponent } from "solid-js/web";
+import { createMemo } from "solid-js";
+
+//#region src/components/toaster/locator.tsx
+function ToasterLocator(props) {
+	const inset = createMemo(() => {
+		switch (props.position) {
+			case "top-left": return {
+				top: "0",
+				left: "0"
+			};
+			case "top-center": return {
+				top: "0",
+				left: "50%",
+				transform: "translateX(-50%)"
+			};
+			case "top-right": return {
+				top: "0",
+				right: "0"
+			};
+			case "bottom-left": return {
+				bottom: "0",
+				left: "0"
+			};
+			case "bottom-center": return {
+				bottom: "0",
+				left: "50%",
+				transform: "translateX(-50%)"
+			};
+			case "bottom-right": return {
+				bottom: "0",
+				right: "0"
+			};
+			default: return {};
+		}
+	});
+	const alignItems = createMemo(() => {
+		const pos = props.position;
+		if (pos.includes("left")) return "flex-start";
+		if (pos.includes("center")) return "center";
+		if (pos.includes("right")) return "flex-end";
+	});
+	return createComponent(Flex, {
+		get align() {
+			return alignItems();
+		},
+		get reverse() {
+			return props.position.startsWith("bottom");
+		},
+		get style() {
+			return {
+				position: "absolute",
+				width: "fit-content",
+				...inset()
+			};
+		},
+		vertical: true,
+		get children() {
+			return props.children;
+		}
+	});
+}
+
+//#endregion
+export { ToasterLocator };

package/dist/components/toaster/locator.jsx

@@ -0,0 +1,54 @@
+import { Flex } from "../../layout/flex/index.jsx";
+import "../../layout/index.jsx";
+import { createMemo } from "solid-js";
+
+//#region src/components/toaster/locator.tsx
+function ToasterLocator(props) {
+	const inset = createMemo(() => {
+		switch (props.position) {
+			case "top-left": return {
+				top: "0",
+				left: "0"
+			};
+			case "top-center": return {
+				top: "0",
+				left: "50%",
+				transform: "translateX(-50%)"
+			};
+			case "top-right": return {
+				top: "0",
+				right: "0"
+			};
+			case "bottom-left": return {
+				bottom: "0",
+				left: "0"
+			};
+			case "bottom-center": return {
+				bottom: "0",
+				left: "50%",
+				transform: "translateX(-50%)"
+			};
+			case "bottom-right": return {
+				bottom: "0",
+				right: "0"
+			};
+			default: return {};
+		}
+	});
+	const alignItems = createMemo(() => {
+		const pos = props.position;
+		if (pos.includes("left")) return "flex-start";
+		if (pos.includes("center")) return "center";
+		if (pos.includes("right")) return "flex-end";
+	});
+	return <Flex align={alignItems()} reverse={props.position.startsWith("bottom")} style={{
+		position: "absolute",
+		width: "fit-content",
+		...inset()
+	}} vertical>
+      {props.children}
+    </Flex>;
+}
+
+//#endregion
+export { ToasterLocator };

package/dist/components/toaster/one-toaster.js

@@ -0,0 +1,146 @@
+import { context } from "./context.js";
+import { ToasterIcon } from "./icon.js";
+import { addEventListener, createComponent, effect, insert, memo, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+import { Show, children, createSignal, onMount } from "solid-js";
+import { callMaybeCallableChild, createPresence, createWatch, dataIf } from "solid-tiny-utils";
+
+//#region src/components/toaster/one-toaster.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div style=width:100%;position:absolute>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=tiny-toast__icon>`), _tmpl$3 = /* @__PURE__ */ template(`<div class=tiny-toast-wrapper role=presentation><div class=tiny-toast><div class=tiny-toast__content>`);
+function HiddenAutoDismiss(props) {
+	let ref;
+	onMount(() => {
+		ref.offsetHeight;
+		createWatch(() => [props.duration, props.pause], ([duration, pause], prevInput) => {
+			if (prevInput) {
+				const [prevDuration] = prevInput;
+				if (duration !== prevDuration) ref.style.width = "100%";
+			}
+			const percent = ref.offsetWidth / ref.parentElement.offsetWidth;
+			if (percent === 0 && duration > 0) {
+				props.onEnd();
+				return;
+			}
+			if (pause) {
+				ref.style.width = `${percent * 100}%`;
+				ref.style.transition = "none";
+			} else {
+				ref.style.width = "0";
+				ref.style.transition = `width ${duration * percent}ms linear`;
+			}
+		});
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = ref;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
+		addEventListener(_el$, "transitionend", props.onEnd);
+		return _el$;
+	})();
+}
+function getElRealHeight(el) {
+	const prevAnimationName = el.style.animationName;
+	el.style.animationName = "none";
+	const height = el.offsetHeight;
+	el.style.animationName = prevAnimationName;
+	return height;
+}
+function OneToaster(props) {
+	const [state, actions] = context.useContext();
+	const [show, setShow] = createSignal(true);
+	const [height, setHeight] = createSignal(0);
+	const presence = createPresence(show, {
+		enterDuration: 400,
+		exitDuration: 350,
+		initialEnter: true
+	});
+	createWatch(presence.isMounted, (shouldMount) => {
+		if (!shouldMount) actions.removeToast(props.id);
+	});
+	createWatch(() => state.dismissSignal[props.id], (signal) => {
+		if (signal) setShow(false);
+	});
+	let ref;
+	onMount(() => {
+		createWatch(presence.phase, (phase) => {
+			if (["pre-enter", "exiting"].includes(phase)) setHeight(getElRealHeight(ref));
+		});
+	});
+	const icon = children(() => callMaybeCallableChild(props.icon, {
+		id: props.id,
+		type: props.type,
+		duration: props.duration,
+		position: props.position
+	}));
+	return createComponent(Show, {
+		get when() {
+			return presence.isMounted();
+		},
+		get children() {
+			var _el$2 = _tmpl$3(), _el$3 = _el$2.firstChild, _el$5 = _el$3.firstChild;
+			var _ref$2 = ref;
+			typeof _ref$2 === "function" ? use(_ref$2, _el$2) : ref = _el$2;
+			_el$2.addEventListener("mouseleave", () => {
+				actions.setState("pauseRemoval", false);
+			});
+			_el$2.addEventListener("mouseenter", () => {
+				actions.setState("pauseRemoval", true);
+			});
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return icon() || [
+						"info",
+						"success",
+						"warning",
+						"error",
+						"loading"
+					].includes(props.type);
+				},
+				get children() {
+					var _el$4 = _tmpl$2();
+					insert(_el$4, () => icon() || createComponent(ToasterIcon, { get type() {
+						return props.type;
+					} }));
+					return _el$4;
+				}
+			}), _el$5);
+			insert(_el$5, () => callMaybeCallableChild(props.message, {
+				id: props.id,
+				type: props.type,
+				duration: props.duration,
+				position: props.position
+			}));
+			insert(_el$2, createComponent(HiddenAutoDismiss, {
+				get duration() {
+					return props.duration;
+				},
+				onEnd: () => {
+					setShow(false);
+				},
+				get pause() {
+					return state.pauseRemoval;
+				}
+			}), null);
+			effect((_p$) => {
+				var _v$ = dataIf(["entering", "pre-enter"].includes(presence.phase())), _v$2 = dataIf(["exiting"].includes(presence.phase())), _v$3 = presence.phase(), _v$4 = `${height()}px`, _v$5 = props.type, _v$6 = props.position.startsWith("top") ? "-20%" : "20%";
+				_v$ !== _p$.e && setAttribute(_el$2, "data-entering", _p$.e = _v$);
+				_v$2 !== _p$.t && setAttribute(_el$2, "data-exiting", _p$.t = _v$2);
+				_v$3 !== _p$.a && setAttribute(_el$2, "data-presence-phase", _p$.a = _v$3);
+				_v$4 !== _p$.o && setStyleProperty(_el$2, "--height", _p$.o = _v$4);
+				_v$5 !== _p$.i && setAttribute(_el$3, "data-type", _p$.i = _v$5);
+				_v$6 !== _p$.n && setStyleProperty(_el$3, "--from-y", _p$.n = _v$6);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0
+			});
+			return _el$2;
+		}
+	});
+}
+
+//#endregion
+export { OneToaster };

package/dist/components/toaster/one-toaster.jsx

@@ -0,0 +1,104 @@
+import { context } from "./context.jsx";
+import { ToasterIcon } from "./icon.jsx";
+import { Show, children, createSignal, onMount } from "solid-js";
+import { callMaybeCallableChild, createPresence, createWatch, dataIf } from "solid-tiny-utils";
+
+//#region src/components/toaster/one-toaster.tsx
+function HiddenAutoDismiss(props) {
+	let ref;
+	onMount(() => {
+		ref.offsetHeight;
+		createWatch(() => [props.duration, props.pause], ([duration, pause], prevInput) => {
+			if (prevInput) {
+				const [prevDuration] = prevInput;
+				if (duration !== prevDuration) ref.style.width = "100%";
+			}
+			const percent = ref.offsetWidth / ref.parentElement.offsetWidth;
+			if (percent === 0 && duration > 0) {
+				props.onEnd();
+				return;
+			}
+			if (pause) {
+				ref.style.width = `${percent * 100}%`;
+				ref.style.transition = "none";
+			} else {
+				ref.style.width = "0";
+				ref.style.transition = `width ${duration * percent}ms linear`;
+			}
+		});
+	});
+	return <div onTransitionEnd={props.onEnd} ref={ref} style={{
+		width: "100%",
+		position: "absolute"
+	}} />;
+}
+function getElRealHeight(el) {
+	const prevAnimationName = el.style.animationName;
+	el.style.animationName = "none";
+	const height = el.offsetHeight;
+	el.style.animationName = prevAnimationName;
+	return height;
+}
+function OneToaster(props) {
+	const [state, actions] = context.useContext();
+	const [show, setShow] = createSignal(true);
+	const [height, setHeight] = createSignal(0);
+	const presence = createPresence(show, {
+		enterDuration: 400,
+		exitDuration: 350,
+		initialEnter: true
+	});
+	createWatch(presence.isMounted, (shouldMount) => {
+		if (!shouldMount) actions.removeToast(props.id);
+	});
+	createWatch(() => state.dismissSignal[props.id], (signal) => {
+		if (signal) setShow(false);
+	});
+	let ref;
+	onMount(() => {
+		createWatch(presence.phase, (phase) => {
+			if (["pre-enter", "exiting"].includes(phase)) setHeight(getElRealHeight(ref));
+		});
+	});
+	const icon = children(() => callMaybeCallableChild(props.icon, {
+		id: props.id,
+		type: props.type,
+		duration: props.duration,
+		position: props.position
+	}));
+	return <Show when={presence.isMounted()}>
+      <div class="tiny-toast-wrapper" data-entering={dataIf(["entering", "pre-enter"].includes(presence.phase()))} data-exiting={dataIf(["exiting"].includes(presence.phase()))} data-presence-phase={presence.phase()} onMouseEnter={() => {
+		actions.setState("pauseRemoval", true);
+	}} onMouseLeave={() => {
+		actions.setState("pauseRemoval", false);
+	}} ref={ref} role="presentation" style={{ "--height": `${height()}px` }}>
+        <div class="tiny-toast" data-type={props.type} style={{ "--from-y": props.position.startsWith("top") ? "-20%" : "20%" }}>
+          <Show when={icon() || [
+		"info",
+		"success",
+		"warning",
+		"error",
+		"loading"
+	].includes(props.type)}>
+            <div class="tiny-toast__icon">
+              {icon() || <ToasterIcon type={props.type} />}
+            </div>
+          </Show>
+          <div class="tiny-toast__content">
+            {callMaybeCallableChild(props.message, {
+		id: props.id,
+		type: props.type,
+		duration: props.duration,
+		position: props.position
+	})}
+          </div>
+        </div>
+        <HiddenAutoDismiss duration={props.duration} onEnd={() => {
+		setShow(false);
+	}} pause={state.pauseRemoval} />
+      </div>
+    </Show>;
+}
+
+//#endregion
+export { OneToaster };

package/dist/components/toaster/provider.d.ts

@@ -0,0 +1,11 @@
+import { ToastPosition } from "./type.js";
+import { JSX } from "solid-js/jsx-runtime";
+
+//#region src/components/toaster/provider.d.ts
+declare function TinyToasterProvider(props: {
+  children: JSX.Element;
+  defaultDuration?: number;
+  defaultPosition?: ToastPosition;
+}): JSX.Element;
+//#endregion
+export { TinyToasterProvider };

package/dist/components/toaster/provider.js

@@ -0,0 +1,64 @@
+import toaster_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/toaster/toaster.js";
+import { context } from "./context.js";
+import { ToasterLocator } from "./locator.js";
+import { OneToaster } from "./one-toaster.js";
+import { For, Portal, createComponent, effect, insert, memo, setStyleProperty, template } from "solid-js/web";
+import { mountStyle } from "solid-tiny-utils";
+
+//#region src/components/toaster/provider.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div style=position:fixed;pointer-events:none>`);
+function ToasterContainer(props) {
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => props.children);
+		effect((_p$) => {
+			var _v$ = props.zIndex ?? 9999, _v$2 = props.padding ? `${props.padding}px` : "16px";
+			_v$ !== _p$.e && setStyleProperty(_el$, "z-index", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$, "inset", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+}
+function TinyToasterProvider(props) {
+	mountStyle(toaster_default, "tiny-toaster");
+	const Context = context.initial({
+		defaultDuration: () => props.defaultDuration,
+		defaultPosition: () => props.defaultPosition
+	});
+	const [, actions] = Context.value;
+	const positions = [
+		"top-left",
+		"top-center",
+		"top-right",
+		"bottom-left",
+		"bottom-center",
+		"bottom-right"
+	];
+	return createComponent(Context.Provider, { get children() {
+		return [createComponent(Portal, { get children() {
+			return createComponent(ToasterContainer, { get children() {
+				return createComponent(For, {
+					each: positions,
+					children: (pos) => createComponent(ToasterLocator, {
+						position: pos,
+						get children() {
+							return createComponent(For, {
+								get each() {
+									return actions.getToastsByPosition(pos);
+								},
+								children: (toast) => createComponent(OneToaster, toast)
+							});
+						}
+					})
+				});
+			} });
+		} }), memo(() => props.children)];
+	} });
+}
+
+//#endregion
+export { TinyToasterProvider };

package/dist/components/toaster/provider.jsx

@@ -0,0 +1,51 @@
+import toaster_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/toaster/toaster.jsx";
+import { context } from "./context.jsx";
+import { ToasterLocator } from "./locator.jsx";
+import { OneToaster } from "./one-toaster.jsx";
+import { mountStyle } from "solid-tiny-utils";
+import { For, Portal } from "solid-js/web";
+
+//#region src/components/toaster/provider.tsx
+function ToasterContainer(props) {
+	return <div style={{
+		"z-index": props.zIndex ?? 9999,
+		position: "fixed",
+		inset: props.padding ? `${props.padding}px` : "16px",
+		"pointer-events": "none"
+	}}>
+      {props.children}
+    </div>;
+}
+function TinyToasterProvider(props) {
+	mountStyle(toaster_default, "tiny-toaster");
+	const Context = context.initial({
+		defaultDuration: () => props.defaultDuration,
+		defaultPosition: () => props.defaultPosition
+	});
+	const [, actions] = Context.value;
+	const positions = [
+		"top-left",
+		"top-center",
+		"top-right",
+		"bottom-left",
+		"bottom-center",
+		"bottom-right"
+	];
+	return <Context.Provider>
+      <Portal>
+        <ToasterContainer>
+          <For each={positions}>
+            {(pos) => <ToasterLocator position={pos}>
+                <For each={actions.getToastsByPosition(pos)}>
+                  {(toast) => <OneToaster {...toast} />}
+                </For>
+              </ToasterLocator>}
+          </For>
+        </ToasterContainer>
+      </Portal>
+      {props.children}
+    </Context.Provider>;
+}
+
+//#endregion
+export { TinyToasterProvider };

package/dist/components/toaster/type.d.ts

@@ -0,0 +1,15 @@
+import { MaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/components/toaster/type.d.ts
+interface Toast {
+  id: string;
+  type: ToastType;
+  duration: number;
+  position: ToastPosition;
+  message: MaybeCallableChild<[Omit<Toast, "icon" | "message">]>;
+  icon: MaybeCallableChild<[Omit<Toast, "icon" | "message">]>;
+}
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastType = "success" | "error" | "warning" | "info" | "blank" | "loading";
+//#endregion
+export { Toast, ToastPosition, ToastType };

package/dist/components/toaster/use-toaster.d.ts

@@ -0,0 +1,48 @@
+import { Toast } from "./type.js";
+import { MaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/components/toaster/use-toaster.d.ts
+declare function useToaster(): ((msg: MaybeCallableChild<[{
+  id: string;
+}]>, opt?: {
+  duration?: number;
+  position?: Toast["position"];
+  type?: Toast["type"];
+  icon?: Toast["icon"];
+}) => string) & {
+  blank: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  loading: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type" | "duration"> | undefined) => string;
+  success: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  error: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  info: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  warning: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  promise: <T>(promise: Promise<T>, phase: {
+    loading: MaybeCallableChild<[{
+      id: string;
+    }]>;
+    success: MaybeCallableChild<[{
+      id: string;
+      data: T;
+    }]>;
+    error: MaybeCallableChild<[{
+      id: string;
+      error: unknown;
+    }]>;
+  }) => void;
+  dismiss: (id: string) => void;
+  update: (id: string, updatedProps: Partial<Toast>) => void;
+};
+//#endregion
+export { useToaster };