@mrts/soltw 0.3.1 → 0.3.2

package/dist/source/items/Item.jsx

@@ -1,13 +1,29 @@
 import { createMemo, Show } from "solid-js";
 import { twMerge } from "tailwind-merge";
+import { Stylers } from "../stylers/Stylers.js";
 import { buildIdLabel } from "./IdLabel.js";
-import { themeAlpha } from "../theme/StyleBoxes.js";
 export const Item = (props) => {
     const itemData = () => buildIdLabel(props.idLabel);
-    const styleBox = () => {
-        return props.theme != undefined ? props.theme : themeAlpha["item"];
+    const currentSTags = () => {
+        const r = [];
+        r.push("item");
+        if (props.selected) {
+            r.push("item:selected");
+        }
+        if (props.disabled) {
+            r.push("item:disabled");
+        }
+        return r;
     };
-    const propsClass = createMemo(() => {
+    const currentStyler = () => {
+        if (props.styler) {
+            return props.styler;
+        }
+        else {
+            return Stylers.base;
+        }
+    };
+    const classProp = createMemo(() => {
         if (props.class == undefined) {
             return {};
         }
@@ -19,42 +35,45 @@ export const Item = (props) => {
         }
     });
     const itemClasses = createMemo(() => {
-        const rawClasses = ["px-1"];
-        rawClasses.push(styleBox().base);
-        // const stylerClasses = styler
-        //   ? styler.classes(stags, props.vtags)
-        //   : undefined;
-        // rawClasses.push(...(stylerClasses ?? []));
-        if (props.action) {
+        const stags = currentSTags();
+        const styler = currentStyler();
+        const rawClasses = [];
+        const stylerClasses = styler
+            ? styler.classes(stags, props.vtags)
+            : undefined;
+        rawClasses.push(...(stylerClasses ?? []));
+        if (props.callback) {
             rawClasses.push("select-none cursor-pointer");
         }
-        const customClasses = propsClass();
+        const customClasses = classProp();
         if (customClasses.item) {
             rawClasses.push(customClasses.item);
         }
-        if (props.selected) {
-            rawClasses.push(styleBox().selected, customClasses.selected);
+        if (props.selected && customClasses.selected) {
+            rawClasses.push(customClasses.selected);
         }
-        if (props.disabled) {
-            rawClasses.push(styleBox().disabled, customClasses.disabled);
+        if (props.disabled && customClasses.disabled) {
+            rawClasses.push(customClasses.disabled);
         }
         rawClasses.push("relative");
-        const r = twMerge(...rawClasses);
+        const r = twMerge(rawClasses);
         return r;
     });
     const disablerClasses = createMemo(() => {
         const rawClasses = [];
-        rawClasses.push(styleBox().disabler);
-        if (propsClass().disabler) {
-            rawClasses.push(propsClass().disabler);
+        if (currentStyler()) {
+            rawClasses.push(...currentStyler().classes("item/disabler", props.vtags));
+        }
+        if (classProp().disabler) {
+            rawClasses.push(classProp().disabler);
         }
         rawClasses.push("absolute inset-0");
-        const r = twMerge(...rawClasses);
+        const r = twMerge(rawClasses);
         return r;
     });
     function handleClick() {
-        if (props.action != undefined) {
-            props.action(itemData());
+        if (props.callback != undefined) {
+            props.callback(itemData());
         }
     }
     return (<div onClick={handleClick} class={itemClasses()}>

package/dist/source/items/ItemGroup.jsx

@@ -0,0 +1,62 @@
+import { twMerge } from "tailwind-merge";
+import { Block } from "../Block.jsx";
+import { Item } from "./Item.js";
+import { buildIdLabel } from "./IdLabel.js";
+import { createMemo, For } from "solid-js";
+import { normalizeTagListArgument } from "../stylers/tagRules.js";
+export 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(...normalizeTagListArgument(_vtags));
+        }
+        else if (typeof _vtags == "object") {
+            group.push(...normalizeTagListArgument(_vtags.group));
+            item.push(...normalizeTagListArgument(_vtags.item));
+        }
+        return { group, item };
+    });
+    const classes = createMemo(() => {
+        let group = "";
+        let item = "";
+        if (typeof props.class == "string") {
+            group = props.class;
+        }
+        else if (props.class != undefined) {
+            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>);
+};

package/dist/source/stylers/SVTStyler.js

@@ -0,0 +1,60 @@
+import { normalizeTagListArgument, tagRuleMatches } from "./tagRules.js";
+import { deduplicate } from "./utils.js";
+export 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 = normalizeTagListArgument(stags);
+        let vtagsNormalized = normalizeTagListArgument(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(normalizeTagListArgument(rule.stags));
+        let vtags = deduplicate(normalizeTagListArgument(rule.vtags));
+        let classes = deduplicate(normalizeTagListArgument(rule.classes));
+        if (rule.stags == undefined && rule.stagMode == undefined) {
+            stagMode = "any";
+        }
+        if (rule.vtags == undefined && rule.vtagMode == undefined) {
+            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));
+    }
+}

package/dist/source/stylers/Stylers.js

@@ -0,0 +1,18 @@
+import { baseStyler } from "./base.styler.js";
+export class Stylers {
+    static _base;
+    static _stylersMap = 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);
+    }
+}

package/dist/source/stylers/base.styler.js

@@ -0,0 +1,62 @@
+import { mainTagNormalize, twMergeNormalize, exlusiveTagNormalize, } from "./stylersUtils.js";
+import { SVTStyler } from "./SVTStyler.js";
+export 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) => exlusiveTagNormalize(mainTagNormalize(tags, "A"), new Set(["SM", "BASE", "LG"]), "BASE"),
+});

package/dist/source/stylers/index.js

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export * from "./Stylers.js";
+export * from "./stylersUtils.js";
+export * from "./SVTStyler.js";
+export * from "./base.styler.js";

package/dist/source/stylers/stylersUtils.js

@@ -0,0 +1,63 @@
+import { twMerge } from "tailwind-merge";
+import { splitCleanString } from "./utils.js";
+export class SVTStylerNormalizer {
+    styler;
+    constructor(styler) {
+        this.styler = styler;
+    }
+    classes(stags, vtags) {
+        const r = this.styler.classes(stags, vtags);
+        return r ?? [];
+    }
+}
+export function twMergeNormalize(raw) {
+    return splitCleanString(twMerge(...raw));
+}
+export function mainTagNormalize(rawTags, defaultTag) {
+    const rhead = [];
+    const rtail = [];
+    let rtag = undefined;
+    for (const tag of rawTags) {
+        if (tag.length == 1 && tag.toUpperCase() == tag) {
+            rtag = tag;
+            rhead.push(...rtail);
+            rtail.length = 0;
+        }
+        else {
+            if (rtag == undefined) {
+                rhead.push(tag);
+            }
+            else {
+                rtail.push(tag);
+            }
+        }
+    }
+    rtag = rtag ?? defaultTag;
+    const r = rtag == undefined ? [...rhead, ...rtail] : [...rhead, rtag, ...rtail];
+    // console.log("MAIN TAGS NORM:", rawTags, r);
+    return r;
+}
+export function exlusiveTagNormalize(rawTags, tagSet, defaultTag) {
+    const rhead = [];
+    const rtail = [];
+    let rtag = undefined;
+    for (const tag of rawTags) {
+        if (tagSet.has(tag)) {
+            rtag = tag;
+            rhead.push(...rtail);
+            rtail.length = 0;
+        }
+        else {
+            if (rtag == undefined) {
+                rhead.push(tag);
+            }
+            else {
+                rtail.push(tag);
+            }
+        }
+    }
+    rtag = rtag ?? defaultTag;
+    const r = rtag == undefined ? [...rhead, ...rtail] : [...rhead, rtag, ...rtail];
+    //console.log("EXCLU TAGS NORM:", rawTags, r);
+    return r;
+}

package/dist/source/stylers/tagRules.js

@@ -0,0 +1,36 @@
+import { splitCleanString } from "./utils.js";
+export function normalizeTagListArgument(arg) {
+    if (typeof arg == "string") {
+        return splitCleanString(arg);
+    }
+    else if (Array.isArray(arg)) {
+        const r = [];
+        for (const a of arg) {
+            r.push(...normalizeTagListArgument(a));
+        }
+        return r;
+    }
+    return [];
+}
+export 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;
+}

package/dist/source/stylers/utils.js

@@ -0,0 +1,17 @@
+export function splitCleanString(s, options = {}) {
+    const separator = options.separator ?? /\s+/;
+    const filter = options.filter ?? ((s) => s.length > 0);
+    const r = s.split(separator).filter(filter);
+    return r;
+}
+export function deduplicate(items) {
+    const r = [];
+    const itemSet = new Set();
+    for (const item of items) {
+        if (!itemSet.has(item)) {
+            r.push(item);
+            itemSet.add(item);
+        }
+    }
+    return r;
+}

package/dist/types/Block.d.ts

@@ -0,0 +1,10 @@
+import type { Component, ParentProps } from "solid-js";
+import { type ISVTStyler, type TagListArgument } from "./stylers/index.js";
+type TProps = ParentProps & {
+    vtags?: TagListArgument;
+    styler?: ISVTStyler;
+    class?: string;
+    element?: string;
+};
+export declare const Block: Component<TProps>;
+export {};

package/dist/types/index.d.ts

@@ -1,2 +1,6 @@
+export * from "./items/IdLabel.js";
+export * from "./items/Item.jsx";
+export * from "./Block.js";
+export * from "./items/ItemGroup.jsx";
+export * from "./stylers/index.js";
 export * from "./soltw.js";
-export * from "./items/index.js";

package/dist/types/items/Item.d.ts

@@ -1,6 +1,6 @@
 import { type Component } from "solid-js";
+import { type ISVTStyler, type TagListArgument } from "../stylers/index.js";
 import { type IdLabel, type IdLabelArg } from "./IdLabel.js";
-import type { IStyleBox } from "../theme/StyleBox.js";
 export type TItemClass = {
     item?: string;
     selected?: string;
@@ -10,11 +10,12 @@ export type TItemClass = {
 export type TItemClassArg = TItemClass | string;
 export type TItemProps = {
     idLabel: IdLabelArg;
-    action?: (item: IdLabel) => void;
+    callback?: (item: IdLabel) => void;
     selected?: boolean;
     disabled?: boolean;
     clickableWhendisabled?: boolean;
+    styler?: ISVTStyler;
+    vtags?: TagListArgument;
     class?: TItemClassArg;
-    theme?: IStyleBox;
 };
 export declare const Item: Component<TItemProps>;

package/dist/types/items/ItemGroup.d.ts

@@ -0,0 +1,21 @@
+import { type TItemClassArg } from "./Item.js";
+import { type IdLabel, type IdLabelArg } from "./IdLabel.js";
+import { type Component } from "solid-js";
+import { type TagListArgument } from "../stylers/types.js";
+type TProps = {
+    items: IdLabelArg[];
+    callback?: (item: IdLabel) => void;
+    class?: string | {
+        group?: string;
+        item?: TItemClassArg;
+    };
+    selection?: string | {
+        [id: string]: boolean;
+    };
+    vtags?: TagListArgument | {
+        group?: TagListArgument;
+        item?: TagListArgument;
+    };
+};
+export declare const ItemGroup: Component<TProps>;
+export {};

package/dist/types/stylers/SVTStyler.d.ts

@@ -0,0 +1,28 @@
+import type { ISVTStyler, TagListArgument, TagRule, TagRuleMode } from "./types.js";
+export type SVTRule = {
+    stagRule: TagRule;
+    vtagRule: TagRule;
+    classes: string[];
+};
+export 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[];
+};
+export 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;
+}
+export {};

package/dist/types/stylers/Stylers.d.ts

@@ -0,0 +1,8 @@
+import type { ISVTStyler } from "./types.js";
+export declare class Stylers {
+    private static _base;
+    private static _stylersMap;
+    static get base(): ISVTStyler | undefined;
+    static setBase(base: ISVTStyler | undefined): ISVTStyler;
+    static get(name: string): ISVTStyler | undefined;
+}

package/dist/types/stylers/base.styler.d.ts

@@ -0,0 +1,2 @@
+import { SVTStyler } from "./SVTStyler.js";
+export declare const baseStyler: SVTStyler;

package/dist/types/stylers/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export * from "./Stylers.js";
+export * from "./stylersUtils.js";
+export * from "./SVTStyler.js";
+export * from "./base.styler.js";

package/dist/types/stylers/stylersUtils.d.ts

@@ -0,0 +1,9 @@
+import type { ISVTStyler, TagListArgument } from "./types.js";
+export declare class SVTStylerNormalizer implements ISVTStyler {
+    private readonly styler;
+    constructor(styler: ISVTStyler);
+    classes(stags: TagListArgument, vtags: TagListArgument): string[];
+}
+export declare function twMergeNormalize(raw: string[]): string[];
+export declare function mainTagNormalize(rawTags: string[], defaultTag?: string): string[];
+export declare function exlusiveTagNormalize(rawTags: string[], tagSet: Set<String>, defaultTag?: string): string[];

package/dist/types/stylers/tagRules.d.ts

@@ -0,0 +1,3 @@
+import type { TagListArgument, TagRule } from "./types.js";
+export declare function normalizeTagListArgument(arg: TagListArgument): string[];
+export declare function tagRuleMatches(rule: TagRule, candidateTags: string[]): boolean;

package/dist/types/stylers/types.d.ts

@@ -0,0 +1,9 @@
+export type TagListArgument = string | string[] | TagListArgument[] | undefined;
+export type TagRuleMode = "or" | "and" | "any";
+export type TagRule = {
+    mode: TagRuleMode;
+    tags: string[];
+};
+export interface ISVTStyler {
+    classes(stags: TagListArgument, vtags: TagListArgument): string[] | undefined;
+}

package/dist/types/stylers/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function splitCleanString(s: string, options?: {
+    separator?: string | RegExp;
+    filter?: (s: string) => boolean;
+}): string[];
+export declare function deduplicate<T>(items: T[]): T[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mrts/soltw",
   "description": "S O L T W : SolidJS + tailwindcss ui components",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -34,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dc5c746473031e764be23f5efb7271a33fb5a1a9"
+  "gitHead": "e08b5c423be3441bea8cf8f2388201a19f2c6146"
 }

package/dist/source/items/index.js

@@ -1,2 +0,0 @@
-export * from "./IdLabel.js";
-export * from "./Item.js";

package/dist/source/theme/StyleBoxes.js

@@ -1,14 +0,0 @@
-export const themeAlpha = {
-    "block": {
-        base: "bg-stone-100 text-stone-900",
-        selected: "bg-stone-100 text-orange-800 font-bold",
-        disabled: "bg-stone-100 text-stone-600 italic",
-        disabler: "bg-white/30"
-    },
-    "item": {
-        base: "bg-orange-900 text-stone-100",
-        selected: "bg-orange-800 text-stone-100 font-bold underline",
-        disabled: "bg-orange-900 text-stone-300 italic",
-        disabler: "bg-white/70"
-    },
-};

package/dist/types/items/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./IdLabel.js";
-export * from "./Item.js";

package/dist/types/theme/StyleBox.d.ts

@@ -1,6 +0,0 @@
-export interface IStyleBox {
-    base: string;
-    selected: string;
-    disabled: string;
-    disabler: string;
-}

package/dist/types/theme/StyleBoxes.d.ts

@@ -1,2 +0,0 @@
-import type { IStyleBox } from "./StyleBox";
-export declare const themeAlpha: Record<string, IStyleBox>;