@zuzjs/ui 0.3.7 → 0.3.8

package/dist/funs/css.js

@@ -0,0 +1,339 @@
+import Hashids from "hashids";
+import { cssProps } from "./styles.js";
+class CSS {
+    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`
+        ];
+        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;",
+            "fill": "top: 0px;left: 0px;right: 0px;bottom: 0px;",
+            "rel": "position:relative;",
+            "abs": "position:absolute;",
+            "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__)"
+        };
+        this.keysWithoutCommaToSpace = [`transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`];
+        this.propCounter = {};
+        this.cx = [];
+        this.cache = {};
+        this.baseRegex = /(\$?[\w%!-]+:\$?\w+\[(.*?)\]+)|(\$?[\w%!-]+:\$?[-\w%,.!]+|\$?[-\w%,.!]+)/g;
+        // /(\$?[\w%-]+:\$?[-\w%,]+|\$?[-\w%,]+)/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" && /\d+(\.\d+)?$/.test(v) === false || 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();
+            let hasImportant = v.charAt(v.length - 1) == `!`;
+            v = hasImportant ? v.slice(0, -1) : v;
+            let important = hasImportant ? ` !important` : ``;
+            // console.log(`makevalue`, key, k, v)
+            /**
+             * Variable
+             */
+            if (v.includes(`$`)) {
+                value = `var(--${v.replace(`$`, ``)})`;
+            }
+            /**
+             * 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)
+            value = value.includes(`,`) && !this.keysWithoutCommaToSpace.includes(key) ? value.replace(`,`, ` `) : value;
+            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, ``);
+                });
+            }
+            const baseProperties = line.match(self.baseRegex);
+            if (baseProperties) {
+                baseProperties.forEach(prop => {
+                    const [key, value] = prop.split(':');
+                    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,17 @@
+import CSS from './css';
+import { dynamicObject } from "../types";
+export declare const css: 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 hexToRgba: (hex: string, alpha?: number) => string;
+export declare const ucfirst: (str: string) => string;
+export declare const cleanProps: (props: dynamicObject, withProps?: string[]) => {
+    [x: string]: any;
+};
+export declare const withZuz: (cx: string) => string;
+export declare const extendGlobals: () => void;

package/dist/funs/index.js

@@ -0,0 +1,60 @@
+import { cssProps } from "./styles";
+import CSS from './css';
+export const css = new CSS();
+// Hex color regex (#RGB, #RRGGBB)
+export const hexColorRegex = /^#([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) => isHexColor(color) || isRgbaColor(color) || isHslColor(color);
+// 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) => 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;
+    };
+};

package/dist/funs/styles.d.ts

@@ -0,0 +1,242 @@
+export declare const cssProps: {
+    alignContent: string;
+    alignItems: string;
+    alignSelf: string;
+    animation: string;
+    animationDelay: string;
+    animationDirection: string;
+    animationDuration: string;
+    animationFillMode: string;
+    animationIterationCount: string;
+    animationName: string;
+    animationPlayState: string;
+    animationTimingFunction: string;
+    background: string;
+    bg: string;
+    backgroundColor: string;
+    backgroundImage: string;
+    backgroundOrigin: string;
+    backgroundPosition: string;
+    backgroundRepeat: string;
+    backgroundSize: string;
+    backfaceVisibility: string;
+    backgroundAttachment: string;
+    backgroundBlendMode: string;
+    backgroundClip: string;
+    border: string;
+    borderBottom: string;
+    borderBottomColor: string;
+    borderBottomStyle: string;
+    borderBottomWidth: string;
+    borderCollapse: string;
+    borderColor: string;
+    borderImage: string;
+    borderImageOutset: string;
+    borderImageRepeat: string;
+    borderImageSlice: string;
+    borderImageSource: string;
+    borderImageWidth: string;
+    borderLeft: string;
+    borderLeftColor: string;
+    borderLeftStyle: string;
+    borderLeftWidth: string;
+    borderRight: string;
+    borderRightColor: string;
+    borderRightStyle: string;
+    borderRightWidth: string;
+    borderSpacing: string;
+    borderStyle: string;
+    borderTop: string;
+    borderTopColor: string;
+    borderTopStyle: string;
+    borderTopWidth: string;
+    borderWidth: string;
+    borderRadius: string;
+    r: string;
+    borderTopLeftRadius: string;
+    rtl: string;
+    borderTopRightRadius: string;
+    rtr: string;
+    borderBottomLeftRadius: string;
+    rbl: string;
+    borderBottomRightRadius: string;
+    rbr: string;
+    bottom: string;
+    boxDecorationBreak: string;
+    boxShadow: string;
+    boxSizing: string;
+    captionSide: string;
+    caretColor: string;
+    "@charset": string;
+    clear: string;
+    clip: string;
+    clipPath: string;
+    color: string;
+    c: string;
+    columnCount: string;
+    columnFill: string;
+    columnGap: string;
+    colGap: string;
+    columnRule: string;
+    columnRuleColor: string;
+    columnRuleStyle: string;
+    columnRuleWidth: string;
+    columnSpan: string;
+    columnWidth: string;
+    columns: string;
+    content: string;
+    counterIncrement: string;
+    counterReset: string;
+    cursor: string;
+    pointer: string;
+    direction: string;
+    display: string;
+    emptyCells: string;
+    filter: string;
+    flex: string;
+    flexBasis: string;
+    flexDirection: string;
+    flexDir: string;
+    flexFlow: string;
+    flexGrow: string;
+    flexShrink: string;
+    flexWrap: string;
+    float: string;
+    font: string;
+    fontFamily: string;
+    fontKerning: string;
+    s: string;
+    fontSize: string;
+    fontSizeAdjust: string;
+    fontStretch: string;
+    fontStyle: string;
+    fontVariant: string;
+    bold: string;
+    fontWeight: string;
+    b: string;
+    gap: string;
+    grid: string;
+    gridArea: string;
+    gridAutoColumns: string;
+    gridAutoFlow: string;
+    gridAutoRows: string;
+    gridColumn: string;
+    gridColumnEnd: string;
+    gridColumnGap: string;
+    gridColumnStart: string;
+    gridGap: string;
+    gridRow: string;
+    gridRowEnd: string;
+    gridRowGap: string;
+    gridRowStart: string;
+    gridTemplate: string;
+    gridTemplateAreas: string;
+    gridTemplateColumns: string;
+    gridTemplateRows: string;
+    hangingPunctuation: string;
+    hyphens: string;
+    isolation: string;
+    justifyContent: string;
+    left: string;
+    letterSpacing: string;
+    lineHeight: string;
+    lh: string;
+    listStyle: string;
+    listStyleImage: string;
+    listStylePosition: string;
+    listStyleType: string;
+    aspectRatio: string;
+    margin: string;
+    m: string;
+    marginBottom: string;
+    mb: string;
+    marginLeft: string;
+    ml: string;
+    marginRight: string;
+    mr: string;
+    marginTop: string;
+    mt: string;
+    height: string;
+    h: string;
+    minHeight: string;
+    minH: string;
+    maxHeight: string;
+    maxH: string;
+    width: string;
+    w: string;
+    minWidth: string;
+    minW: string;
+    maxWidth: string;
+    maxW: string;
+    mixBlendMode: string;
+    objectFit: string;
+    objectPosition: string;
+    opacity: string;
+    order: string;
+    outline: string;
+    outlineColor: string;
+    outlineOffset: string;
+    outlineStyle: string;
+    outlineWidth: string;
+    overflow: string;
+    overflowX: string;
+    overflowY: string;
+    padding: string;
+    p: string;
+    paddingBottom: string;
+    pb: string;
+    paddingLeft: string;
+    pl: string;
+    paddingRight: string;
+    pr: string;
+    paddingTop: string;
+    pt: string;
+    pageBreakAfter: string;
+    pageBreakBefore: string;
+    pageBreakInside: string;
+    perspective: string;
+    perspectiveOrigin: string;
+    pointerEvents: string;
+    position: string;
+    quotes: string;
+    resize: string;
+    right: string;
+    scrollBehavior: string;
+    tabSize: string;
+    tableLayout: string;
+    align: string;
+    textAlign: string;
+    textAlignLast: string;
+    textDecoration: string;
+    td: string;
+    textDecorationColor: string;
+    textDecorationLine: string;
+    textDecorationStyle: string;
+    textIndent: string;
+    textJustify: string;
+    textOverflow: string;
+    textShadow: string;
+    textTransform: string;
+    top: string;
+    transform: string;
+    "transform(2D)": string;
+    "transformOrigin(twoValue syntax)": string;
+    transformStyle: string;
+    transition: string;
+    transitionDelay: string;
+    transitionDuration: string;
+    transitionProperty: string;
+    transitionTimingFunction: string;
+    unicodeBidi: string;
+    userSelect: string;
+    verticalAlign: string;
+    visibility: string;
+    whiteSpace: string;
+    wordBreak: string;
+    wordSpacing: string;
+    textWrap: string;
+    wordWrap: string;
+    writingMode: string;
+    zIndex: string;
+    backdropFilter: string;
+};