@mrts/soltw 0.3.10 → 0.3.13

package/dist/items/ItemGroup.js

@@ -0,0 +1,86 @@
+import { buildIdLabel } from "./IdLabel.js";
+import { For, createComponent, createMemo } from "../node_modules/solid-js/dist/solid.js";
+import { twMerge } from "../node_modules/tailwind-merge/dist/bundle-mjs.js";
+import { argTokenizeBySpaces } from "../packages/common/dist/strings/tokenize.js";
+import { Item } from "./Item.js";
+import { Block } from "../Block.js";
+
+//#region src/items/ItemGroup.tsx
+const ItemGroup = (props) => {
+	const items = () => props.items.map(buildIdLabel);
+	const currentVTags = createMemo(() => {
+		const item = [];
+		const group = [];
+		const _vtags = props.vtags;
+		if (Array.isArray(_vtags) || typeof _vtags == "string") group.push(...argTokenizeBySpaces(_vtags));
+		else if (typeof _vtags == "object" && _vtags != null) {
+			group.push(...argTokenizeBySpaces(_vtags.group));
+			item.push(...argTokenizeBySpaces(_vtags.item));
+		}
+		return {
+			group,
+			item
+		};
+	});
+	const classes = createMemo(() => {
+		let group = "";
+		let item = "";
+		if (typeof props.class == "string") group = props.class;
+		else if (props.class != void 0) {
+			props.class;
+			group = props.class.group ?? "";
+			item = props.class.item ?? "";
+		}
+		return {
+			group,
+			item
+		};
+	});
+	const blockClasses = () => {
+		return twMerge("flex flex-row gap-1", classes().group);
+	};
+	const itemClasses = () => {
+		return classes().item;
+	};
+	const callCallback = (item) => {
+		if (props.callback) props.callback(item);
+	};
+	const itemSelected = (id) => {
+		if (typeof props.selection == "string") return id == props.selection;
+		else if (typeof props.selection == "object") return !!props.selection[id];
+		return false;
+	};
+	return createComponent(Block, {
+		get ["class"]() {
+			return blockClasses();
+		},
+		get vtags() {
+			return currentVTags().group;
+		},
+		get children() {
+			return createComponent(For, {
+				get each() {
+					return items();
+				},
+				children: (item) => {
+					return createComponent(Item, {
+						idLabel: item,
+						get selected() {
+							return itemSelected(item.id);
+						},
+						callback: () => callCallback(item),
+						get ["class"]() {
+							return itemClasses();
+						},
+						get vtags() {
+							return currentVTags().item;
+						}
+					});
+				}
+			});
+		}
+	});
+};
+
+//#endregion
+export { ItemGroup };

package/dist/items/ItemGroup.jsx

@@ -0,0 +1,63 @@
+import { buildIdLabel } from "./IdLabel.jsx";
+import { For, createMemo } from "../node_modules/solid-js/dist/solid.jsx";
+import { twMerge } from "../node_modules/tailwind-merge/dist/bundle-mjs.jsx";
+import { argTokenizeBySpaces } from "../packages/common/dist/strings/tokenize.jsx";
+import { Item } from "./Item.jsx";
+import { Block } from "../Block.jsx";
+
+//#region src/items/ItemGroup.tsx
+const ItemGroup = (props) => {
+	const items = () => props.items.map(buildIdLabel);
+	const currentVTags = createMemo(() => {
+		const item = [];
+		const group = [];
+		const _vtags = props.vtags;
+		if (Array.isArray(_vtags) || typeof _vtags == "string") group.push(...argTokenizeBySpaces(_vtags));
+		else if (typeof _vtags == "object" && _vtags != null) {
+			group.push(...argTokenizeBySpaces(_vtags.group));
+			item.push(...argTokenizeBySpaces(_vtags.item));
+		}
+		return {
+			group,
+			item
+		};
+	});
+	const classes = createMemo(() => {
+		let group = "";
+		let item = "";
+		if (typeof props.class == "string") group = props.class;
+		else if (props.class != void 0) {
+			props.class;
+			group = props.class.group ?? "";
+			item = props.class.item ?? "";
+		}
+		return {
+			group,
+			item
+		};
+	});
+	const blockClasses = () => {
+		return twMerge("flex flex-row gap-1", classes().group);
+	};
+	const itemClasses = () => {
+		return classes().item;
+	};
+	const callCallback = (item) => {
+		if (props.callback) props.callback(item);
+	};
+	const itemSelected = (id) => {
+		if (typeof props.selection == "string") return id == props.selection;
+		else if (typeof props.selection == "object") return !!props.selection[id];
+		return false;
+	};
+	return <Block class={blockClasses()} vtags={currentVTags().group}>
+      <For each={items()}>
+        {(item) => {
+		return <Item idLabel={item} selected={itemSelected(item.id)} callback={() => callCallback(item)} class={itemClasses()} vtags={currentVTags().item}></Item>;
+	}}
+      </For>
+    </Block>;
+};
+
+//#endregion
+export { ItemGroup };