@zuzjs/ui 0.3.7 → 0.3.9

package/dist/funs/css.js

@@ -0,0 +1,413 @@
+import Hashids from "hashids";
+import { cssProps } from "./stylesheet.js";
+import { isColor, isHexColor, isNumber } from "./index.js";
+class CSS {
+    unit;
+    PROPS;
+    DIRECT;
+    IGNORE;
+    chars;
+    hashids;
+    cx;
+    cache;
+    pseudoRegExp;
+    // pseudoPattern: string;
+    pseudoList;
+    baseRegex;
+    pseudoCounter;
+    pseudoPattern;
+    pseudoReg;
+    propCounter;
+    keysWithoutCommaToSpace;
+    rgbaRegex;
+    constructor(options) {
+        const opts = options || {};
+        this.unit = opts.unit || `px`;
+        this.hashids = new Hashids('', 4);
+        this.chars = "#abcdefghijklmnopqrstuvwxyz0123456789";
+        this.PROPS = cssProps;
+        this.IGNORE = [
+            `flex`, `opacity`, `z-index`, `zIndex`, `color`, `line-height`, `anim`
+        ];
+        this.DIRECT = {
+            "content": "content:'';",
+            "bold": "font-weight: bold;",
+            "flex": "display:flex;",
+            "cols": "flex-direction:column;",
+            "ass": "align-self:flex-start;",
+            "ais": "align-items:flex-start;",
+            "aic": "align-items:center;",
+            "aie": "align-items:flex-end;",
+            "jcs": "justify-content:flex-start;",
+            "jcc": "justify-content:center;",
+            "jce": "justify-content:flex-end;",
+            "tal": "text-align: left;",
+            "tac": "text-align: center;",
+            "tar": "text-align: right;",
+            "tas": "text-align: justify;",
+            "fill": "top: 0px;left: 0px;right: 0px;bottom: 0px;",
+            "rel": "position:relative;",
+            "abs": "position:absolute;",
+            "fixed": "position:fixed;",
+            "abc": "top: 50%;left: 50%;transform: translate(-50%, -50%);",
+            "tdn": "text-decoration:none;",
+            "tdu": "text-decoration:underline;",
+            "nous": "user-select:none;",
+            "nope": "pointer-events:none;",
+            "ph": "padding-left:__VALUE__;padding-right:__VALUE__;",
+            "pv": "padding-top:__VALUE__;padding-bottom:__VALUE__;",
+            "mh": "margin-left:__VALUE__;margin-right:__VALUE__;",
+            "mv": "margin-top:__VALUE__;margin-bottom:__VALUE__;",
+            "translate": "transform:translate(__VALUE__);",
+            "translateX": "transform:translateX(__VALUE__);",
+            "translateY": "transform:translateY(__VALUE__);",
+            "rotate": "transform: rotate(__VALUE__);",
+            "anim": "transition: all __VALUE__ linear 0s;",
+        };
+        this.keysWithoutCommaToSpace = [
+            `transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`,
+            `border`, `border-bottom`, `border-top`, `border-left`, `border-right`
+        ];
+        this.propCounter = {};
+        this.cx = [];
+        this.cache = {};
+        // 1. this.baseRegex = /(\$?[\w%!-]+:\$?[\w%!-]+(?:,[-\w%!.]+)*)|(\$?[\w%!-]+:\$?[-\w%,.!]+)/g;
+        // 2. this.baseRegex = /(\$?[\w%!-]+:\$?\w+\[(.*?)\]+)|(\$?[\w%!-]+:\$?[-\w%,.!]+|\$?[-\w%,.!]+)/g;
+        this.baseRegex = /(\$?[\w%!-]+:\$?[\w%!-]+(?:\[[^\]]*\])?(?:,[^\s,]+)*)|(\$?[\w%!-]+:\$?[-\w%,.!]+|\$?[-\w%,.!]+)/g;
+        this.rgbaRegex = /\b\w+\[\d+,\d+,\d+(?:,\d+)?\]/g;
+        this.pseudoList = [`hover`, `before`, `after`, `focus`, `blur`];
+        this.pseudoCounter = {};
+        this.pseudoList.map((p) => this.pseudoCounter[p] = 0);
+        this.pseudoPattern = this.pseudoList.map((word) => word).join('|');
+        this.pseudoReg = new RegExp(this.pseudoPattern, `g`);
+        this.pseudoRegExp = /&(\w+)\(\s*([^()]*?(?:\([^()]*\))*[^()]*)\s*\)/g;
+        // /&(\w+)\(([^()]+(?:\([^()]*\))*[^()]*)\)/g 
+    }
+    getStyleSheet(cache, indentLevel = 0, pseudo = false) {
+        const self = this;
+        const indent = ``; //`    `.repeat(indentLevel)
+        let scss = ``;
+        // for( const key in cache){
+        Object.keys(cache).map((key) => {
+            // console.log(`kc`, key, cache[key])
+            if (`object` == typeof cache[key]) {
+                const _key = self.pseudoList.filter(x => key.indexOf(x) > -1);
+                scss += `${indent}${_key.length > 0 ? `&:${_key[0]}` : `\n.${key}`}{`;
+                scss += self.getStyleSheet(cache[key], indentLevel + 1, _key.length > 0 ? true : false);
+                scss += `${indent}}`;
+            }
+            else {
+                if (pseudo) {
+                    scss += `${indent}${cache[key]}`;
+                }
+                else {
+                    scss += `\n${indent}.${key}{`;
+                    scss += `${indent}${cache[key]}`;
+                    scss += `${indent}}`;
+                }
+            }
+        });
+        return scss;
+    }
+    makeColor() {
+    }
+    makeUnit(k, v) {
+        // console.log(`unit`, k, v)
+        if (k == `rotate`) {
+            return `deg`;
+        }
+        if (typeof v == "string" && !isNumber(v) || this.IGNORE.indexOf(k) > -1)
+            return ``;
+        return this.unit;
+    }
+    makeValue(k, v) {
+        if (k in this.PROPS) {
+            const key = this.PROPS[k];
+            let value;
+            v = v.trim().replace(`\``, ``);
+            let hasImportant = v.charAt(v.length - 1) == `!`;
+            v = hasImportant ? v.slice(0, -1) : v;
+            let important = hasImportant ? ` !important` : ``;
+            // if ( key.includes(`border`)) console.log(`makevalue`, key, k, v)
+            /**
+             * Variable
+             */
+            if (v.charAt(0) == `$`) {
+                value = `var(--${v.replace(`$`, ``)})`;
+            }
+            else if (v.trim() == `transparent`) {
+                value = `rgba(0,0,0,0)`;
+            }
+            /**
+             * border
+             */
+            else if ([`border`, `borderBottom`, `borderTop`, `borderLeft`, `borderRight`].includes(k)) {
+                const _parts = [];
+                // console.log(`--border`, key, v)
+                if (v.match(this.rgbaRegex)) {
+                    _parts.push(v.match(this.rgbaRegex)[0].replace(`[`, `(`).replace(`]`, `)`));
+                    v = v.replace(this.rgbaRegex, ``).trim().replace(`,,`, `,`);
+                }
+                // console.log(`-border`, key, v, _parts)
+                v.split(`,`).map((p) => {
+                    if (p.includes(`rgb`) || p.includes(`rgba`) || isColor(`#${p}`) || p.startsWith(`$`)) {
+                        if (p.includes(`rgb`) || p.includes(`rgba`)) {
+                            _parts.push(p.replace(`[`, `(`).replace(`]`, `)`));
+                        }
+                        else {
+                            if (p.charAt(0) == `#`) {
+                                p = p.substring(1);
+                            }
+                            _parts.push(isHexColor(`#${p}`) ? `#${p}`
+                                : p.startsWith(`$`) ? `var(--${p.replace(`$`, ``)})` : p);
+                        }
+                    }
+                    else if (isNumber(p)) {
+                        _parts.push(`${p}${this.makeUnit(`border`, p)}`);
+                    }
+                    else if (['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset'].includes(p)) {
+                        _parts.push(p);
+                    }
+                });
+                value = _parts.join(` `);
+                // console.log(`border`, value)             
+            }
+            /**
+             * Color
+             */
+            else if ([`color`, `bg`, `background`, `background-color`, `backgroundColor`].includes(key)) {
+                // else if ( [`color`].includes( key  ) ){
+                if (v.charAt(0) == `#`) {
+                    v = v.substring(1);
+                }
+                if (/^#[0-9A-F]{6}[0-9a-f]{0,2}$/i.test(`#${v}`) ||
+                    /^#([0-9A-F]{3}){1,2}$/i.test(`#${v}`)) {
+                    value = `#${v}`;
+                }
+                else if (v.includes(`rgb`) || v.includes(`rgba`)) {
+                    value = v.replace(`[`, `(`).replace(`]`, `)`);
+                }
+            }
+            /**
+             * FontWeight
+             */
+            else if (key == `font-weight`) {
+                value = v;
+            }
+            /**
+             * calc
+             * passed as calc[value]
+             */
+            else if (v.match(/\[(.*?)\]/g)) {
+                try {
+                    const vs = v.match(/\[(.*?)\]/g)[0].slice(1, -1);
+                    const [_vc] = v.split(`[`);
+                    value = `${_vc.trim()}(${vs})`;
+                }
+                catch (e) { }
+            }
+            else {
+                // ${v.charAt(0) == `$` ? `var(--${v.substring(1)})` : v}
+                value = `${v}${this.makeUnit(key, v)}`;
+            }
+            if (!value)
+                return ``;
+            // if ( key == `background` ) console.log(`makevalue`, key, value)
+            // if ( key.includes(`border`) ) console.log(`--border`, `${key}: ${value}${important};`)
+            value = value.includes(`,`) && !this.keysWithoutCommaToSpace.includes(key) ? value.replace(`,`, ` `) : value;
+            // if ( key.includes(`border`) ) console.log(`->border`, `${key}: ${value}${important};`)
+            return `${key}: ${value}${important};`;
+        }
+        return ``;
+    }
+    makeID(k, v, _out) {
+        const self = this;
+        const _css = _out.toString().replace(/;|:|\s/g, "");
+        let _indices = 0;
+        for (let i = 0; i < _css.length; i++) {
+            _indices += self.chars.indexOf(_out.charAt(i));
+        }
+        let _cp = k.substring(0, 1);
+        if (self.PROPS[k]?.indexOf("-") > -1) {
+            _cp = "";
+            self.PROPS[k].split("-").map((c) => _cp += c.substring(0, 1));
+        }
+        if (v.toString().indexOf("-") > -1) {
+            v.toString().split("-").map(c => _cp += c.substring(0, 1));
+        }
+        return `${_cp}${self.hashids.encode((self.PROPS[k] ? self.PROPS[k].length : 0) + _indices + (isNaN(parseInt(v)) ? 0 : parseInt(v)))}`.replace(/\s|\$/g, '-');
+    }
+    makeIDFromObject(key, obj) {
+        const self = this;
+        const out = [key];
+        const fcs = [key.charAt(0)];
+        const vals = [];
+        const build = (o) => {
+            Object.keys(o).map((n) => {
+                if (`object` == typeof o[n]) {
+                    build(o[n]);
+                }
+                else {
+                    fcs.push(n.charAt(0));
+                    vals.push(o[n]);
+                }
+            });
+        };
+        build(obj);
+        let _indices = 0;
+        let _cp = "";
+        for (const ot of vals) {
+            const _css = ot.toString().replace(/;|:|\s/g, "");
+            for (let i = 0; i < _css.length; i++) {
+                _indices += self.chars.indexOf(ot.charAt(i));
+            }
+            if (ot.indexOf("-") > -1) {
+                ot.split("-").map((c) => _cp += c.substring(0, 1));
+            }
+        }
+        return `${_cp}${self.hashids.encode(_indices)}`.replace(/\s/g, '-');
+    }
+    parseRawLine(line) {
+        const self = this;
+        const result = {};
+        try {
+            const matches = line.match(self.pseudoRegExp);
+            if (matches) {
+                matches.map((m) => {
+                    const pseudo = self.pseudoRegExp.exec(m); ///&\w+/g.exec(m)
+                    if (pseudo) {
+                        const psd = `${pseudo[1]}${++self.pseudoCounter[pseudo[1]]}`;
+                        result[psd] = self.parseRawLine(pseudo[2]);
+                    }
+                    line = line.replace(self.pseudoRegExp, ``);
+                });
+            }
+            // line = line.charAt(0) == `\`` ? line.substring(1) : line
+            // line = line.charAt(line.length - 1) == `\`` ? line.substring(0,) : line
+            const baseProperties = line.match(self.baseRegex);
+            if (baseProperties) {
+                // console.log(line, baseProperties)
+                baseProperties.forEach(prop => {
+                    const [key, value] = prop.split(':');
+                    // if ( line.includes(`borderBottom`) )
+                    //     console.log(key, value)
+                    if (value) {
+                        if (result[key]) {
+                            const _kk = key in self.propCounter ? ++self.propCounter[key] : self.propCounter[key] = 1;
+                            result[`${key}${_kk}`] = `${key}:${value}`;
+                        }
+                        else
+                            result[key] = `${key}:${value}`;
+                    }
+                    else {
+                        const _kk = prop in self.propCounter ? ++self.propCounter[prop] : self.propCounter[prop] = 1;
+                        result[`${prop}${_kk}`] = prop; // true;
+                    }
+                });
+            }
+        }
+        catch (e) {
+            // console.log(e)
+        }
+        // console.log(result)
+        return result;
+    }
+    makeCSS(line) {
+        const self = this;
+        // console.log(line)
+        const rest = self.parseRawLine(line);
+        const value = (_k, pseudo = ``) => {
+            if (_k in self.DIRECT) {
+                const _out = self.DIRECT[_k];
+                const _id = self.makeID(_k, _k + pseudo, _out);
+                if (pseudo == ``)
+                    self.cx.push(_id);
+                return { [_id]: _out };
+            }
+            else if (_k.includes(`:`)) {
+                const [key, _val] = _k.split(`:`);
+                if (key in self.PROPS) {
+                    const _out = self.makeValue(key, _val);
+                    const _id = self.makeID(key, _val + pseudo, _out);
+                    if (pseudo == ``)
+                        self.cx.push(_id);
+                    return { [_id]: _out };
+                }
+                else if (key in self.DIRECT) {
+                    const hasImportant = _val.endsWith(`!`);
+                    const val = hasImportant ? _val.slice(0, -1) : _val;
+                    const important = hasImportant ? ` !important` : ``;
+                    const _out = self.DIRECT[key].includes(`__VALUE__`) ?
+                        self.DIRECT[key].replace(/__VALUE__/g, `${val}${self.makeUnit(key, val)}${important}`) : self.DIRECT[key];
+                    const _id = self.makeID(key, key + pseudo, _out);
+                    if (pseudo == ``)
+                        self.cx.push(_id);
+                    return { [_id]: _out };
+                }
+            }
+            else {
+                self.cx.push(_k.trim());
+            }
+            return {};
+        };
+        const build = (o, pseudo = ``) => {
+            let out = {};
+            Object.keys(o).map((_k) => {
+                if (`object` == typeof o[_k]) {
+                    out = { ...out, [_k]: build(o[_k], _k) };
+                    // self.makeIDFromObject(_k, cache[_k])
+                }
+                else {
+                    out = { ...out, ...value(o[_k], pseudo) };
+                }
+            });
+            return out;
+        };
+        // console.log(rest)
+        self.cache = { ...self.cache, ...build(rest) };
+    }
+    cleanPseudo(cache) {
+        const self = this;
+        const _ = {};
+        Object.keys(cache).map((_k) => {
+            if (`object` == typeof cache[_k]) {
+                const _id = self.makeIDFromObject(_k, cache[_k]);
+                self.cx.push(_id);
+                _[_id] = { [_k]: cache[_k] };
+            }
+            else {
+                _[_k] = cache[_k];
+            }
+        });
+        return _;
+    }
+    Build(css) {
+        let self = this;
+        self.cx = [];
+        self.cache = {};
+        if (undefined == css)
+            return {
+                cx: self.cx,
+                sheet: ``
+            };
+        if (`string` == typeof css) {
+            css = [[css]];
+        }
+        css.map((arr) => {
+            arr.map((line) => {
+                self.makeCSS(line);
+            });
+        });
+        // console.log({
+        //     cx: self.cx,
+        //     sheet: self.getStyleSheet(self.cleanPseudo(self.cache))
+        // })
+        // console.log(self.cache)
+        // console.log(self.getStyleSheet(self.cleanPseudo(self.cache)))
+        return {
+            cx: self.cx,
+            sheet: self.getStyleSheet(self.cleanPseudo(self.cache))
+        };
+    }
+}
+export default CSS;

package/dist/funs/index.d.ts

@@ -0,0 +1,20 @@
+import CSS from './css.js';
+import { dynamicObject } from "../types/index.js";
+export { CSS as css };
+export declare const hexColorRegex: RegExp;
+export declare const rgbaColorRegex: RegExp;
+export declare const hslColorRegex: RegExp;
+export declare const isHexColor: (color: string) => boolean;
+export declare const isRgbaColor: (color: string) => boolean;
+export declare const isHslColor: (color: string) => boolean;
+export declare const isColor: (color: string) => boolean;
+export declare const isUrl: (u: string) => boolean;
+export declare const isEmail: (e: string) => boolean;
+export declare const isIPv4: (ipaddress: string) => boolean;
+export declare const isNumber: (v: any) => boolean;
+export declare const hexToRgba: (hex: string, alpha?: number) => string;
+export declare const ucfirst: (str: string) => string;
+export declare const cleanProps: <T extends dynamicObject>(props: T, withProps?: string[]) => T;
+export declare const withZuz: (cx: string) => string;
+export declare const extendGlobals: () => void;
+export declare const withPost: (uri: string, data: dynamicObject, timeout?: number, fd?: dynamicObject) => Promise<unknown>;

package/dist/funs/index.js

@@ -0,0 +1,125 @@
+import { cssProps } from "./stylesheet.js";
+import CSS from './css.js';
+import axios from "axios";
+import { colorNames } from "./colors.js";
+export { CSS as css };
+// export const css = new CSS()
+// Hex color regex (#RGB, #RRGGBB)
+export const hexColorRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
+// export const hexColorRegex3 = /^#([A-Fa-f0-9]{3}){1,2}$/;
+// RGBA color regex (rgba(255, 255, 255, 1))
+export const rgbaColorRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*((0|1|0?\.\d+)\s*))?\)$/;
+// HSL color regex (hsl(360, 100%, 100%))
+export const hslColorRegex = /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/;
+export const isHexColor = (color) => hexColorRegex.test(color);
+export const isRgbaColor = (color) => rgbaColorRegex.test(color);
+export const isHslColor = (color) => hslColorRegex.test(color);
+// Function to validate a color string
+export const isColor = (color) => colorNames.includes(color) || isHexColor(color) || isRgbaColor(color) || isHslColor(color);
+export const isUrl = (u) => {
+    let url;
+    try {
+        url = new URL(u);
+    }
+    catch (_) {
+        return false;
+    }
+    return url.protocol === 'http:' || url.protocol === 'https:';
+};
+export const isEmail = (e) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(e);
+export const isIPv4 = (ipaddress) => {
+    return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress);
+};
+export const isNumber = (v) => /\d+(\.\d+)?$/g.test(v);
+// Convert hex to rgba
+export const hexToRgba = (hex, alpha = 1) => {
+    // Remove the hash symbol if present
+    hex = hex.replace(/^#/, '');
+    // If shorthand hex (#RGB), expand it to full form (#RRGGBB)
+    if (hex.length === 3) {
+        hex = hex.split('').map(char => char + char).join('');
+    }
+    // Convert to integer values for RGB
+    const bigint = parseInt(hex, 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+export const ucfirst = (str) => `${str.charAt(0).toUpperCase()}${str.substring(1, str.length)}`;
+export const cleanProps = (props, withProps = []) => {
+    let _extras = [`as`, ...withProps];
+    let _props = { ...props };
+    Object.keys(_props).map(k => {
+        if (k in cssProps) {
+            delete _props[k];
+        }
+    });
+    _extras.map(x => x in _props && delete _props[x]);
+    return _props;
+};
+export const withZuz = (cx) => new CSS().Build([[cx]]).cx.join(` `);
+export const extendGlobals = () => {
+    Object.prototype.is = function (v) { return typeof this === v; };
+    Object.prototype.typeof = function (v) { return typeof this === typeof v; };
+    Object.prototype.equals = function (v) { return this === v; };
+    Object.prototype.isNull = function () { return this === null; };
+    Object.prototype.isString = function () { return typeof this == `string`; };
+    Object.prototype.isNumber = function () { return /^[+-]?\d+(\.\d+)?$/.test(this); };
+    Object.prototype.isObject = function () { return typeof this == `object` && !Array.isArray(this) && this !== null; };
+    Object.prototype.isArray = function () { return Array.isArray(this); };
+    Object.prototype.isEmpty = function () {
+        if (Array.isArray(this))
+            return this.length === 0;
+        else if (`object` === typeof this)
+            return Object.keys(this).length == 0;
+        else
+            return this == "" || this.length == 0;
+    };
+};
+export const withPost = async (uri, data, timeout = 60, fd = {}) => {
+    if (Object.keys(fd).length > 0) {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: 'post',
+                url: uri,
+                data: data,
+                timeout: timeout * 1000,
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+                onUploadProgress: ev => {
+                }
+            })
+                .then(resp => {
+                if (resp.data && "kind" in resp.data) {
+                    resolve(resp.data);
+                }
+                else {
+                    reject(resp.data);
+                }
+            })
+                .catch(err => reject(err));
+        });
+    }
+    return new Promise((resolve, reject) => {
+        axios.post(uri, {
+            ...data,
+            __stmp: new Date().getTime() / 1000
+        }, {
+            timeout: 1000 * timeout,
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        })
+            .then(resp => {
+            if (resp.data && "kind" in resp.data) {
+                resolve(resp.data);
+            }
+            else {
+                reject(resp.data);
+            }
+        })
+            .catch(err => reject(err));
+    });
+};