@mrts/soltw 0.3.6 → 0.3.10

package/dist/index.d.ts

@@ -0,0 +1,126 @@
+import { Component, ParentProps } from "solid-js";
+import { TokenizeArg } from "@mrts/common";
+
+//#region src/items/IdLabel.d.ts
+interface IdLabel {
+  id: string;
+  label: string;
+  [x: string | symbol]: unknown;
+}
+type IdLabelDef = {
+  id: string;
+  label?: string;
+  [x: string | symbol]: unknown;
+};
+type IdLabelArg = IdLabelDef | [string, string] | string;
+declare function buildIdLabel(arg: IdLabelArg): IdLabel;
+//#endregion
+//#region src/stylers/types.d.ts
+type TagListArgument = TokenizeArg;
+interface ISVTStyler {
+  classes(stags: TagListArgument, vtags: TagListArgument): string[] | undefined;
+}
+type TagRuleMode = "or" | "and" | "any";
+type TagRule = {
+  mode: TagRuleMode;
+  tags: string[];
+};
+//#endregion
+//#region src/stylers/Stylers.d.ts
+declare class Stylers {
+  private static _base;
+  private static _stylersMap;
+  static get base(): ISVTStyler | undefined;
+  static setBase(base: ISVTStyler | undefined): ISVTStyler | undefined;
+  static get(name: string): ISVTStyler | undefined;
+}
+//#endregion
+//#region src/stylers/normalizers.d.ts
+declare function twMergeNormalize(raw: string[]): string[];
+declare function mainTagNormalize(rawTags: string[], defaultTag?: string): string[];
+declare function exclusiveTagsNormalize(rawTags: string[], tagSet: Set<String> | ((tag: string) => boolean), defaultTag?: string): string[];
+//#endregion
+//#region src/stylers/SVTStyler.d.ts
+type SVTRule = {
+  stagRule: TagRule;
+  vtagRule: TagRule;
+  classes: string[];
+};
+type SVTRuleDef = {
+  stagMode?: TagRuleMode;
+  vtagMode?: TagRuleMode;
+  stags?: TagListArgument;
+  vtags?: TagListArgument;
+  classes?: TagListArgument;
+};
+type SVTStylerOptions = {
+  normalizer?: (rawClasses: string[]) => string[];
+  stagsNormaliser?: (rawTags: string[]) => string[];
+  vtagsNormaliser?: (rawTags: string[]) => string[];
+};
+declare class SVTStyler implements ISVTStyler {
+  readonly _rules: SVTRule[];
+  readonly options: SVTStylerOptions;
+  constructor(rules: SVTRuleDef[], options?: SVTStylerOptions);
+  with(rules: SVTRuleDef[], options?: SVTStylerOptions): SVTStyler;
+  classes(stags: TagListArgument, vtags: TagListArgument): string[];
+  static normalizeRule(rule: SVTRuleDef): SVTRule;
+  ruleMatches(rule: SVTRule, stags: string[], vtags: string[]): boolean;
+}
+declare function tagRuleMatches(rule: TagRule, candidateTags: string[]): boolean;
+//#endregion
+//#region src/stylers/base.styler.d.ts
+declare const baseStyler: SVTStyler;
+//#endregion
+//#region src/items/Item.d.ts
+type TItemClass = {
+  item?: string;
+  selected?: string;
+  disabled?: string;
+  disabler?: string;
+};
+type TItemClassArg = TItemClass | string;
+type TItemProps = {
+  idLabel: IdLabelArg;
+  callback?: (item: IdLabel) => void;
+  selected?: boolean;
+  disabled?: boolean;
+  clickableWhendisabled?: boolean;
+  styler?: ISVTStyler;
+  vtags?: TagListArgument;
+  class?: TItemClassArg;
+};
+declare const Item: Component<TItemProps>;
+//#endregion
+//#region src/Block.d.ts
+type TProps$2 = ParentProps & {
+  vtags?: TagListArgument;
+  styler?: ISVTStyler;
+  class?: string;
+  element?: string;
+};
+declare const Block: Component<TProps$2>;
+//#endregion
+//#region src/items/ItemGroup.d.ts
+type TProps$1 = {
+  items: IdLabelArg[];
+  callback?: (item: IdLabel) => void;
+  class?: string | {
+    group?: string;
+    item?: TItemClassArg;
+  };
+  selection?: string | {
+    [id: string]: boolean;
+  };
+  vtags?: TagListArgument | {
+    group?: TagListArgument;
+    item?: TagListArgument;
+  };
+};
+declare const ItemGroup: Component<TProps$1>;
+//#endregion
+//#region src/soltw.d.ts
+type TProps = {};
+declare const SolTw: Component<TProps>;
+//#endregion
+export { Block, ISVTStyler, IdLabel, IdLabelArg, IdLabelDef, Item, ItemGroup, SVTRule, SVTRuleDef, SVTStyler, SolTw, Stylers, TItemClass, TItemClassArg, TItemProps, TagListArgument, TagRule, TagRuleMode, baseStyler, buildIdLabel, exclusiveTagsNormalize, mainTagNormalize, tagRuleMatches, twMergeNormalize };

package/dist/index.js

@@ -0,0 +1,415 @@
+import { Dynamic, className, createComponent, delegateEvents, effect, insert, template } from "solid-js/web";
+import { For, Show, createMemo } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { argTokenizeBySpaces, deduplicate, tokenizeFilterString } from "@mrts/common";
+
+//#region src/items/IdLabel.ts
+function buildIdLabel(arg) {
+	if (typeof arg == "string") return {
+		id: arg,
+		label: arg
+	};
+	else if (Array.isArray(arg)) return {
+		id: arg[0],
+		label: arg[1]
+	};
+	else {
+		const r = Object.assign({}, arg);
+		if (r.label == void 0) r["label"] = r.id;
+		return r;
+	}
+}
+
+//#endregion
+//#region src/stylers/normalizers.ts
+function twMergeNormalize(raw) {
+	return tokenizeFilterString(twMerge(...raw));
+}
+function mainTagNormalize(rawTags, defaultTag) {
+	return exclusiveTagsNormalize(rawTags, (tag) => tag.length == 1 && tag.toUpperCase() == tag, defaultTag);
+}
+function exclusiveTagsNormalize(rawTags, tagSet, defaultTag) {
+	const rhead = [];
+	const rtail = [];
+	let rtag = void 0;
+	const tagSetFunc = typeof tagSet == "function" ? tagSet : (tag) => tagSet.has(tag);
+	for (const tag of rawTags) if (tagSetFunc(tag)) {
+		rtag = tag;
+		rhead.push(...rtail);
+		rtail.length = 0;
+	} else if (rtag == void 0) rhead.push(tag);
+	else rtail.push(tag);
+	rtag = rtag ?? defaultTag;
+	return rtag == void 0 ? [...rhead, ...rtail] : [
+		...rhead,
+		rtag,
+		...rtail
+	];
+}
+
+//#endregion
+//#region src/stylers/SVTStyler.ts
+var SVTStyler = class SVTStyler {
+	_rules = [];
+	options;
+	constructor(rules, options = {}) {
+		for (const r of rules) this._rules.push(SVTStyler.normalizeRule(r));
+		this.options = { ...options };
+	}
+	with(rules, options = {}) {
+		const addedRules = [];
+		for (const r of rules) addedRules.push(SVTStyler.normalizeRule(r));
+		const styler = new SVTStyler([], { ...this.options });
+		styler._rules.push(...this._rules, ...addedRules);
+		return styler;
+	}
+	classes(stags, vtags) {
+		const r = [];
+		let stagsNormalized = argTokenizeBySpaces(stags);
+		let vtagsNormalized = argTokenizeBySpaces(vtags);
+		if (this.options.stagsNormaliser) stagsNormalized = this.options.stagsNormaliser(stagsNormalized);
+		if (this.options.vtagsNormaliser) vtagsNormalized = this.options.vtagsNormaliser(vtagsNormalized);
+		for (const rule of this._rules) if (this.ruleMatches(rule, stagsNormalized, vtagsNormalized)) r.push(...rule.classes);
+		return this.options.normalizer ? this.options.normalizer(r) : r;
+	}
+	static normalizeRule(rule) {
+		let stagMode = rule.stagMode ?? "or";
+		let vtagMode = rule.vtagMode ?? "or";
+		let stags = deduplicate(argTokenizeBySpaces(rule.stags));
+		let vtags = deduplicate(argTokenizeBySpaces(rule.vtags));
+		let classes = deduplicate(argTokenizeBySpaces(rule.classes));
+		if (rule.stags == void 0 && rule.stagMode == void 0) stagMode = "any";
+		if (rule.vtags == void 0 && rule.vtagMode == void 0) vtagMode = "any";
+		return {
+			stagRule: {
+				mode: stagMode,
+				tags: stags
+			},
+			vtagRule: {
+				mode: vtagMode,
+				tags: vtags
+			},
+			classes
+		};
+	}
+	ruleMatches(rule, stags, vtags) {
+		return tagRuleMatches(rule.stagRule, stags) && tagRuleMatches(rule.vtagRule, vtags);
+	}
+};
+function tagRuleMatches(rule, candidateTags) {
+	if (rule.mode == "any") return true;
+	else if (rule.mode == "or") {
+		for (const ctag of candidateTags) if (rule.tags.indexOf(ctag) >= 0) return true;
+		return false;
+	} else if (rule.mode == "and") {
+		for (const rtag of rule.tags) if (candidateTags.indexOf(rtag) < 0) return false;
+		return true;
+	}
+	return false;
+}
+
+//#endregion
+//#region src/stylers/base.styler.ts
+const baseStyler = new SVTStyler([
+	{
+		vtags: "A",
+		classes: "bg-slate-100 text-slate-800"
+	},
+	{
+		vtags: "B",
+		classes: "bg-slate-800 text-slate-100"
+	},
+	{
+		vtags: "C",
+		classes: "bg-stone-300 text-orange-950"
+	},
+	{
+		vtags: "D",
+		classes: "bg-orange-900 text-stone-100"
+	},
+	{
+		vtags: "LG",
+		classes: "text-xl p-2"
+	},
+	{
+		vtags: "BASE",
+		classes: "text-base p-1"
+	},
+	{
+		vtags: "SM",
+		classes: "text-sm p-0.5"
+	},
+	{
+		vtags: "LG",
+		stags: "item",
+		classes: "text-xl px-2 py-1"
+	},
+	{
+		vtags: "BASE",
+		stags: "item",
+		classes: "text-base px-1 py-0.5"
+	},
+	{
+		vtags: "SM",
+		stags: "item",
+		classes: "text-sm p-0.5"
+	},
+	{
+		stags: "item:selected",
+		classes: "underline font-bold"
+	},
+	{
+		stags: "item:disabled",
+		classes: "blur-[1px]"
+	},
+	{
+		stags: "item/disabler",
+		classes: "bg-slate-300/85 cursor-not-allowed"
+	}
+], {
+	normalizer: twMergeNormalize,
+	vtagsNormaliser: (tags) => exclusiveTagsNormalize(mainTagNormalize(tags, "A"), new Set([
+		"SM",
+		"BASE",
+		"LG"
+	]), "BASE")
+});
+
+//#endregion
+//#region src/stylers/Stylers.ts
+var Stylers = class {
+	static _base;
+	static _stylersMap = /* @__PURE__ */ new Map();
+	static get base() {
+		return this._base;
+	}
+	static setBase(base) {
+		return this._base = base;
+	}
+	static {
+		this._stylersMap.set("default", baseStyler);
+		this.setBase(baseStyler);
+	}
+	static get(name) {
+		return this._stylersMap.get(name);
+	}
+};
+
+//#endregion
+//#region src/items/Item.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<div>`);
+const Item = (props) => {
+	const itemData = () => buildIdLabel(props.idLabel);
+	const currentSTags = () => {
+		const r = [];
+		r.push("item");
+		if (props.selected) r.push("item:selected");
+		if (props.disabled) r.push("item:disabled");
+		return r;
+	};
+	const currentStyler = () => {
+		if (props.styler) return props.styler;
+		else return Stylers.base;
+	};
+	const classProp = createMemo(() => {
+		if (props.class == void 0) return {};
+		else if (typeof props.class == "string") return { item: props.class };
+		else return props.class;
+	});
+	const itemClasses = createMemo(() => {
+		const stags = currentSTags();
+		const styler = currentStyler();
+		const rawClasses = [];
+		const stylerClasses = styler ? styler.classes(stags, props.vtags) : void 0;
+		rawClasses.push(...stylerClasses ?? []);
+		if (props.callback) rawClasses.push("select-none cursor-pointer");
+		const customClasses = classProp();
+		if (customClasses.item) rawClasses.push(customClasses.item);
+		if (props.selected && customClasses.selected) rawClasses.push(customClasses.selected);
+		if (props.disabled && customClasses.disabled) rawClasses.push(customClasses.disabled);
+		rawClasses.push("relative");
+		return twMerge(rawClasses);
+	});
+	const disablerClasses = createMemo(() => {
+		const rawClasses = [];
+		if (currentStyler()) rawClasses.push(...currentStyler().classes("item/disabler", props.vtags));
+		if (classProp().disabler) rawClasses.push(classProp().disabler);
+		rawClasses.push("absolute inset-0");
+		return twMerge(rawClasses);
+	});
+	function handleClick() {
+		if (props.callback != void 0) props.callback(itemData());
+	}
+	return (() => {
+		var _el$ = _tmpl$$1();
+		_el$.$$click = handleClick;
+		insert(_el$, () => itemData().label, null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.disabled;
+			},
+			get children() {
+				var _el$2 = _tmpl$$1();
+				_el$2.$$click = (e) => {
+					if (!props.clickableWhendisabled) e.stopPropagation();
+				};
+				effect(() => className(_el$2, disablerClasses()));
+				return _el$2;
+			}
+		}), null);
+		effect(() => className(_el$, itemClasses()));
+		return _el$;
+	})();
+};
+delegateEvents(["click"]);
+
+//#endregion
+//#region src/Block.tsx
+const Block = (props) => {
+	const elementTag = () => props.element ?? "div";
+	const currentStyler = () => {
+		if (props.styler) return props.styler;
+		else return Stylers.base;
+	};
+	function blockClasses() {
+		const classes = currentStyler().classes("block", props.vtags) ?? [];
+		if (props.class) classes.push(props.class);
+		return twMerge(classes);
+	}
+	return createComponent(Dynamic, {
+		get component() {
+			return elementTag();
+		},
+		get ["class"]() {
+			return blockClasses();
+		},
+		get children() {
+			return props.children;
+		}
+	});
+};
+
+//#endregion
+//#region ../common/dist/strings/tokenize.js
+function buildTokenizeFuncUsingSplitters(splitters) {
+	splitters = Array.isArray(splitters) ? splitters : [splitters];
+	const tokenize = (s) => {
+		let r = s.split(splitters[0]).filter((t) => t != "" && t != void 0);
+		for (const splitter of splitters.slice(1)) {
+			const r0 = [...r];
+			r = [];
+			for (const s$1 of r0) r.push(...tokenizeFilterString$1(s$1, {
+				splitter,
+				filter: (t) => t != "" && t != void 0
+			}));
+		}
+		return r;
+	};
+	return tokenize;
+}
+function buildArgTokenizeFunc(tokenize) {
+	const argTokenize = (arg) => {
+		if (arg == void 0) return [];
+		else if (Array.isArray(arg)) {
+			const r = [];
+			for (const a of arg) r.push(...argTokenize(a));
+			return r;
+		} else return tokenize(arg);
+	};
+	return argTokenize;
+}
+const tokenizeBySpaces = buildTokenizeFuncUsingSplitters(/\s+/);
+const argTokenizeBySpaces$1 = buildArgTokenizeFunc(tokenizeBySpaces);
+function tokenizeFilterString$1(s, options = {}) {
+	const separator = options.splitter ?? /\s+/;
+	const filter = options.filter ?? ((s$1) => s$1.length > 0);
+	return s.split(separator).filter(filter);
+}
+
+//#endregion
+//#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$1(_vtags));
+		else if (typeof _vtags == "object" && _vtags != null) {
+			group.push(...argTokenizeBySpaces$1(_vtags.group));
+			item.push(...argTokenizeBySpaces$1(_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
+//#region src/soltw.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div class=bg-red-600>- - S O L T W - -`);
+const SolTw = (props) => {
+	return _tmpl$();
+};
+
+//#endregion
+export { Block, Item, ItemGroup, SVTStyler, SolTw, Stylers, baseStyler, buildIdLabel, exclusiveTagsNormalize, mainTagNormalize, tagRuleMatches, twMergeNormalize };