@zuzjs/ui 0.5.4 → 0.5.6

package/dist/funs/css.js

@@ -28,8 +28,10 @@ class CSS {
     DIRECT_VALUES;
     PROPS_VALUES;
     _currentFile;
-    constructor(options) {
+    debug;
+    constructor(options, debug) {
         const opts = options || {};
+        this.debug = debug;
         this._cli = false;
         this._mediaQueries = {};
         this._mediaQueriesLabels = {
@@ -40,11 +42,11 @@ class CSS {
             xl: `Extra Large Devices (Large Desktops)`,
         };
         this.mediaQueries = {
-            ph: `(max-width: 599px)`,
-            sm: `(min-width: 600px) and (max-width: 767px)`,
-            md: `(min-width: 768px) and (max-width: 991px)`,
-            lg: `(min-width: 992px) and (max-width: 1199px)`,
-            xl: `(min-width: 1200px)`,
+            ph: `(max-width: 599px)`, /* Extra Small Devices (Phones) */
+            sm: `(min-width: 600px) and (max-width: 767px)`, /* Small Devices (Tablets) */
+            md: `(min-width: 768px) and (max-width: 991px)`, /* Medium Devices (Small Laptops) */
+            lg: `(min-width: 992px) and (max-width: 1199px)`, /* Large Devices (Laptops and Desktops) */
+            xl: `(min-width: 1200px)`, /* Extra Large Devices (Large Desktops) */
         };
         this.cx = [];
         this.cache = {};
@@ -61,9 +63,10 @@ class CSS {
             `flex`, `opacity`, `z-index`, `zIndex`, `color`, `line-height`, `anim`, `scale`, `saturate`
         ];
         this.keysWithoutCommaToSpace = [
-            `transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`,
+            `transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`, `backgroundImage`, `background-image`,
             `border`, `border-bottom`, `border-top`, `border-left`, `border-right`,
-            `grid-template-rows`, `grid-template-columns`
+            `grid-template-rows`, `grid-template-columns`, `grid-auto-rows`, `grid-auto-columns`,
+            `clip-path`, `clipPath`,
         ];
         this.propCounter = {};
         this.ids = [];
@@ -80,6 +83,7 @@ class CSS {
                 arr.push(cssDirect[k].replace(/\s+/g, ``));
             return arr;
         }, []);
+        // extendGlobals()
     }
     buildMediaQueries(queries) {
         const self = this;
@@ -95,7 +99,9 @@ class CSS {
     styleSheet(cache, pseudo = ``) {
         const self = this;
         const scss = [];
+        // console.log(cache)
         const build = (key, value) => {
+            // console.log(`build`, key, value)
             const __build = (_key, _value) => {
                 let _css = `${self.pseudoList.includes(`@${_key}`) ? `&:` : `.`}${_key}{`;
                 if (`object` == typeof _value) {
@@ -117,6 +123,7 @@ class CSS {
             let css = ``;
             if (`object` == typeof value && Object.keys(value)[0] in this.mediaQueries) {
                 const mq = Object.keys(value)[0];
+                // css += `@media screen and ${this.mediaQueries[mq]}{`
                 let __css = `.${key}{`;
                 const _value = value[mq];
                 for (const prop in _value) {
@@ -131,6 +138,8 @@ class CSS {
                 this._mediaQueries[mq] = this._mediaQueries[mq] || [];
                 this._mediaQueries[mq].push(__css);
             }
+            // else if ( key in self.mediaQueries ){
+            // }
             else {
                 css += __build(key, value);
             }
@@ -184,9 +193,11 @@ class CSS {
                 for (const prop in value) {
                     if (`string` === typeof value[prop]) {
                         _extend.push(`.${prop}`);
+                        // _extend.push(self.buildCache[prop])
                     }
                 }
                 if (_extend.length > 0)
+                    // css += _extend.join(``)
                     css += `@extend ${_extend.join(`, `)};`;
                 for (const prop in value) {
                     if (`object` === typeof value[prop]) {
@@ -197,6 +208,9 @@ class CSS {
             css += `}`;
             return css;
         };
+        /**
+         * Build Master Keys
+         */
         for (const key in cache) {
             if (key == FIELNAME_KEY) {
                 scss.push(`/**\n* @file ${cache[key]}\n*/`);
@@ -204,17 +218,24 @@ class CSS {
             }
             extractMasterKeys(key, cache[key]);
         }
+        /**
+         * Extract LINE_KEY
+         */
         for (const key in cache) {
             if (key.startsWith(LINE_KEY)) {
                 scss.push(cache[key]);
                 delete cache[key];
             }
         }
+        /**
+         * Build Extends
+         */
         for (const key in cache) {
             if (`object` == typeof cache[key]) {
                 scss.push(build(key, cache[key]));
             }
         }
+        // scss.push(self.classLine)
         return scss.join(`\n`);
     }
     cleanKey(key) {
@@ -237,6 +258,7 @@ class CSS {
             const __k = self.cleanKey(_k);
             if (`object` == typeof cache[_k]) {
                 const _d = oid(_k, cache[_k]);
+                // console.log(_d)
                 let _indices = 0;
                 for (let i = 0; i < _d.length; i++) {
                     _indices += self.chars.indexOf(_d.charAt(i));
@@ -260,6 +282,7 @@ class CSS {
         return _;
     }
     makeUnit(k, v) {
+        // console.log(`unit`, k, v)
         if (k == `rotate`) {
             return `deg`;
         }
@@ -287,6 +310,7 @@ class CSS {
             return v.trim();
     }
     makeValue(k, v) {
+        // const hasGradient = v.includes(`gradient`)
         const self = this;
         if (k in this.PROPS) {
             const key = this.PROPS[k];
@@ -295,11 +319,17 @@ class CSS {
             let hasImportant = v.charAt(v.length - 1) == `!`;
             v = hasImportant ? v.slice(0, -1) : v;
             let important = hasImportant ? ` !important` : ``;
-            if (v.startsWith(`gradient`) || v.startsWith(`linear-gradient`) || v.startsWith(`radial-gradient`)) {
+            let isGradient = v.startsWith(`gradient`) || v.startsWith(`linear-gradient`) || v.startsWith(`radial-gradient`);
+            /**
+             * Gradients
+             */
+            if (isGradient) {
                 if (v.startsWith(`gradient`)) {
                     v = `linear-${v}`;
                 }
+                //linear-gradient-to-bottom-blue-green
                 const [_gtype, _xyz, _gto, _gdeg, ..._colors] = v.split(`-`);
+                // const _gdegree = _gdeg.isNumber() ? `${_gdeg}deg` : `to ${_gto}`
                 const _gdegree = /^[+-]?\d+(\.\d+)?$/.test(_gdeg) ? `${_gdeg}deg` : `to ${_gdeg}`;
                 const _gcolors = _colors.reduce((arr, val) => {
                     arr.push(self.makeColor(val));
@@ -310,24 +340,33 @@ class CSS {
                         value = `linear-gradient(${_gdegree}, ${_gcolors})`;
                         break;
                     case `radial`:
+                        // value = `radial-gradient(${_gparts[1]})`
                         break;
                     default:
                         value = v;
                         break;
                 }
             }
+            /**
+             * Variable
+             */
             else 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`)) {
@@ -349,8 +388,13 @@ class CSS {
                     }
                 });
                 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);
                 }
@@ -364,28 +408,69 @@ class CSS {
                 else
                     value = v.trim();
             }
+            /**
+             * FontWeight
+             */
             else if (key == `font-weight`) {
                 value = v;
             }
+            /**
+             * value with brackets like calc(), var() should be passed as calc[value]
+             */
             else if (v.match(/\[(.*?)\]/g)) {
+                const replaceBrackets = (input) => {
+                    const stack = [];
+                    const chars = input.split('');
+                    for (let i = 0; i < chars.length; i++) {
+                        if (chars[i] === '[') {
+                            stack.push('('); // Replace '[' with '('
+                        }
+                        else if (chars[i] === ']') {
+                            stack.push(')'); // Replace ']' with ')'
+                        }
+                        else if (chars[i] === `$`) {
+                            let varName = ``;
+                            i++;
+                            while (chars[i] && /[a-zA-Z0-9_-]/.test(chars[i])) {
+                                varName += chars[i];
+                                i++;
+                            }
+                            i--;
+                            stack.push(`var(--${varName})`);
+                        }
+                        else {
+                            stack.push(chars[i]); // Push other characters as-is
+                        }
+                    }
+                    return stack.join('');
+                };
                 try {
-                    const vs = v.match(/\[(.*?)\]/g)[0].slice(1, -1);
-                    const [_vc] = v.split(`[`);
-                    value = `${_vc.trim()}(${vs})`;
+                    // const vs = v.match(/\[(.*?)\]/g)[0].slice(1, -1)
+                    // const [ _vc ] = v.split(`[`)
+                    // value = `${_vc.trim()}(${vs})`
+                    value = replaceBrackets(v);
+                    // console.log(`started with []`, replaceBrackets(v))
                 }
                 catch (e) { }
             }
             else {
+                // ${v.charAt(0) == `$` ? `var(--${v.substring(1)})` : v}
+                // if ( key.includes(`padding`) ) console.log(`->padding`, v)
                 if (v.includes(`,`)) {
+                    // console.log(`vwithcomma`, v)
                     let __v = [];
                     v.split(`,`).map((_) => {
+                        // console.log(`comma`, _, cssPropsWithColor.includes(_) && isColor(`#${_}`))
                         if (_.charAt(0) == `#`) {
                             _ = _.substring(1);
                         }
+                        //Variable
                         if (_.startsWith(`$`)) {
                             __v.push(`var(--${_.substring(1)})`);
                         }
+                        //Color
                         else if (cssPropsWithColor.includes(_) && isColor(`#${_}`)) {
+                            // else if ( isColor(_) ){
                             if (_.includes(`rgb`) || _.includes(`rgba`)) {
                                 __v.push(_.replace(`[`, `(`).replace(`]`, `)`));
                             }
@@ -393,20 +478,32 @@ class CSS {
                                 __v.push(isHexColor(`#${_}`) ? `#${_}` : _);
                             }
                         }
+                        else if (isColor(`#${_}`)) {
+                            __v.push(self.makeColor(_));
+                        }
                         else {
+                            // console.log(`comma`, key, v, this.makeUnit(key, v))
                             __v.push(`${_}${this.makeUnit(key, _)}`);
                         }
                     });
                     value = __v.join(` `);
+                    // console.log(key, value)
+                    // if( k == `shadow` || k == `box-shadow` ) console.log(value)
                 }
                 else
                     value = `${v}${this.makeUnit(key, v)}`;
             }
             if (!value)
                 return ``;
+            // if ( key.includes(`border`) ) console.log(`--border`, `${key}: ${value}${important};`)
             value = value.includes(`,`) && !this.keysWithoutCommaToSpace.includes(key) ? value.replace(`,`, ` `) : value;
+            // if ( key == `grid-auto-rows` ) console.log(`makevalue`, key, value)
+            // if ( key.includes(`padding`) ) console.log(`->padding`, `${key}: ${value}${important};`)
             if (key == `content`)
                 value = `"${value}"`;
+            // if ( key == `grid-template-columns` || key == `grid-cols` ){
+            //     console.log(key, value)
+            // }
             return `${key}: ${value}${important};`;
         }
         return ``;
@@ -423,7 +520,9 @@ class CSS {
         const md = md5(_out);
         let _ = [];
         const _mi = (_k, _v) => {
+            // console.log(_k, _v, Math.abs(self.DIRECT_KEYS.indexOf(_k)) + Math.abs(self.PROPS_VALUES.indexOf(_k)))
             let i = Math.abs(self.DIRECT_KEYS.indexOf(_k)) + Math.abs(self.PROPS_VALUES.indexOf(_k));
+            // _k in self.DIRECT ? self.DIRECT_KEYS.indexOf(_k) : _k in self.PROPS_VALUES ? self.PROPS_VALUES.indexOf(_k) : 0
             _.push(i);
             const nums = _v.match(/[0-9]/g);
             if (nums) {
@@ -446,7 +545,9 @@ class CSS {
         if (ov == ``) {
             console.log(pc.yellow(`[${self._currentFile}]`), pc.cyan(k), pc.red(`value is empty.`));
             return ``;
+            // throw new TypeError()
         }
+        /**Prefix */
         let _cp = ok.charAt(0);
         if (self.PROPS[ok]?.indexOf("-") > -1) {
             _cp = "";
@@ -499,15 +600,23 @@ class CSS {
                 processWord();
             }
             else {
+                //SKIPABLE
+                // if([`(`].includes(char) && level == 0 ){
+                //     //DON'T ADD
+                // }
                 if ([`&`].includes(char)) {
                     isLevel = true;
                 }
+                //Level Start
                 else if ([`(`].includes(char) && isLevel) {
                     processWord();
                 }
+                //Level End
                 else if ([`)`].includes(char)) {
                     processWord();
+                    // console.log(`before->`, levels)
                     levels.splice(-1, 1);
+                    // console.log(`after->`, levels)
                     isLevel = false;
                 }
                 else {
@@ -546,8 +655,10 @@ class CSS {
                     if (key in self.PROPS) {
                         const _out = self.makeValue(key, _val);
                         const _id = self.makeID(key, _val + pseudo, _out);
+                        // console.log(`props`, _k, _id)
                         if (pseudo == ``)
                             self.cx.push(_id);
+                        // console.log(`_build`, key, _val, _id, _out)
                         if (_mediaQuery) {
                             self.mediaQueries[_mediaQuery].push({ [_id]: _out });
                             return {};
@@ -559,6 +670,9 @@ class CSS {
                         const important = hasImportant ? ` !important` : ``;
                         let val = hasImportant ? _val.slice(0, -1) : _val;
                         var _out = ``;
+                        // if ( key == `ratio` ){
+                        //     console.log(`RatioFound`, key, val)
+                        // }
                         if (key == `extend`) {
                             val = val.split(`,`).reduce((acc, v) => {
                                 acc.push(`${v.startsWith(`.`) ? `` : `.`}${v.trim()}`);
@@ -578,6 +692,8 @@ class CSS {
                                 const [_duration, ..._rest] = val.split(`,`);
                                 let rest = _rest.join(",").trim();
                                 duration = _duration;
+                                // if ( rest.includes(`],`) ){
+                                // }
                                 if (rest.includes(`[`) && rest.includes(`]`)) {
                                     for (const curv in cssAnimationCurves) {
                                         if (rest.startsWith(curv)) {
@@ -594,11 +710,14 @@ class CSS {
                             _out = _out.replace(`;`, `${important};`);
                         }
                         else {
+                            // const __value = `${val}${key == `extend` ? `` : self.makeUnit(key, val)}`
                             const __value = `${val}${self.IGNORE.includes(key) ? `` : self.makeUnit(key, val)}`;
                             _out = self.DIRECT[key].includes(`__VALUE__`) ?
                                 self.DIRECT[key].replace(/__VALUE__/g, __value).replace(`;`, `${important};`) : self.DIRECT[key];
                         }
+                        // console.log(`_build`, key, _val)
                         const _id = self.makeID(key, key + pseudo, _out);
+                        // console.log(`_buildid`, key, _id)
                         if (pseudo == ``)
                             self.cx.push(_id);
                         if (_mediaQuery) {
@@ -611,6 +730,7 @@ class CSS {
                 else if (_k in self.DIRECT) {
                     const _out = self.DIRECT[_k];
                     const _id = self.makeID(_k, _k + pseudo, _out);
+                    // console.log(_k, _id)
                     if (pseudo == ``)
                         self.cx.push(_id);
                     if (_mediaQuery) {
@@ -621,6 +741,7 @@ class CSS {
                 }
                 else if (_k.trim().match(/^[a-zA-Z0-9\-]+$/g)) {
                     self.cx.push(_k.trim());
+                    // self.cx.push(`--${_k.trim()}`)
                 }
                 return {};
             };
@@ -637,6 +758,9 @@ class CSS {
                 return out;
             };
             const _built = build(self.lexer(line));
+            if (self.debug?.lexer)
+                console.log(line, self.lexer(line), _built);
+            // console.log(line, self.lexer(line))
             self.cache = { ...self.cache, ..._built };
         }
     }
@@ -661,13 +785,36 @@ class CSS {
                 self.processLine(line);
             });
         });
+        // console.log(self.deepClean(self.cache))
+        // const _ = cli ? {
+        //     cx: [],
+        //     sheet: self.styleSheet(self.deepClean(self.cache))
+        // } : {
+        //     cx: self.cx,
+        //     sheet: ``
+        // }
         const _cleaned = self.deepClean(self.cache);
         const _stylesheet = self.styleSheet(_cleaned);
+        // const _mediaQueries : dynamicObject = {}
+        // if ( !cli ){
+        //     console.log(css, self.cx, self.styleSheet(_cleaned))
+        // }
+        if (self.debug?.classes)
+            console.log(`[${cli}]`, self.cx);
+        if (self.debug?.cache)
+            console.log(`[${cli}]`, self.cache);
+        if (self.debug?.cleaned)
+            console.log(`[${cli}]`, _cleaned);
+        if (self.debug?.sheet)
+            console.log(_stylesheet);
+        if (self.debug?.media)
+            console.log(self._mediaQueries);
         const _ = {
             cx: self.cx,
             sheet: _stylesheet,
             mediaQuery: self._mediaQueries
         };
+        // console.log(css, _)
         return _;
     }
 }
@@ -696,6 +843,7 @@ export const buildWithStyles = (source) => {
         if (_transform.length > 0) {
             _.transform = _transform.join(` `);
         }
+        // console.log(_, _transform)
     }
     return _;
 };
@@ -704,19 +852,22 @@ export const getAnimationCurve = (curve) => {
         return `linear`;
     switch (curve.toUpperCase()) {
         case TRANSITION_CURVES.Bounce:
-            return `linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%,
-                0.1407, 0.25, 0.3908, 0.5625, 0.7654,
-                1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657,
-                0.7539, 0.75, 0.7539, 0.7657, 0.7852,
-                0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532,
-                0.9414, 0.9375, 0.9414, 0.9531, 0.9726,
-                1, 0.9883, 0.9844, 0.9883, 1 )`;
+            return `var(--bounce)`;
+            // return `linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%,
+            //     0.1407, 0.25, 0.3908, 0.5625, 0.7654,
+            //     1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657,
+            //     0.7539, 0.75, 0.7539, 0.7657, 0.7852,
+            //     0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532,
+            //     0.9414, 0.9375, 0.9414, 0.9531, 0.9726,
+            //     1, 0.9883, 0.9844, 0.9883, 1 )`
             break;
         case TRANSITION_CURVES.Spring:
-            return `cubic-bezier(0.2, -0.36, 0, 1.46)`;
+            // return `cubic-bezier(0.2, -0.36, 0, 1.46)`
+            return `var(--spring)`;
             break;
         case TRANSITION_CURVES.EaseInOut:
-            return `cubic-bezier(0.42, 0, 0.58, 1)`;
+            // return `cubic-bezier(0.42, 0, 0.58, 1)`
+            return `ease-in-out`;
             break;
         default:
             return `linear`;

package/dist/funs/events.d.ts

@@ -1,7 +1,9 @@
 export interface Event {
     event: String | Symbol;
-    listeners: (() => void)[];
-    context?: any;
+    listeners: Array<{
+        fun: (...args: any[]) => void;
+        context?: any;
+    }>;
 }
 declare class Events {
     _events: Event[];

package/dist/funs/events.js

@@ -5,17 +5,18 @@ class Events {
     }
     addEvent(event, fun, context) {
         const evt = this._events.find(x => x.event == event);
+        const listener = { fun: context ? fun.bind(context) : fun, context };
         if (!evt) {
-            return this._events.push({ event: event, listeners: [fun], context });
+            return this._events.push({ event: event, listeners: [listener] });
         }
-        if (!evt.listeners.find(x => x == fun)) {
-            evt.listeners.push(fun);
+        if (!evt.listeners.find(x => x.fun == fun)) {
+            evt.listeners.push(listener);
         }
     }
     removeEvent(event, fun) {
         const evt = this._events.find(x => x.event == event);
         if (evt) {
-            evt.listeners = evt.listeners.filter(x => x != fun);
+            evt.listeners = evt.listeners.filter(x => x.fun != fun);
         }
     }
     on(event, fun, context) {
@@ -27,9 +28,11 @@ class Events {
     emit(event, ...args) {
         const evt = this._events.find(x => x.event == event);
         if (evt) {
-            evt.listeners.forEach((f) => {
+            // console.log(evt)
+            evt.listeners.forEach(({ fun, context }) => {
                 try {
-                    f.apply(evt.context || self, args);
+                    // f(args)
+                    fun.apply(context, args);
                 }
                 catch (e) {
                     console.error(e);

package/dist/funs/index.d.ts

@@ -9,7 +9,9 @@ export declare const toHash: (n: number, len?: number) => string;
 export declare const fromHash: (n: string) => number;
 export declare const css: () => CSS;
 export declare const uuid: (len?: number) => string;
+export declare const MD5: (str: string) => string;
 export declare const numberInRange: (min: number, max: number) => number;
+export declare const getCSSVariable: (el: HTMLElement, name: string) => string;
 export declare const toLowerCase: {
     (locales?: string | string[]): string;
     (locales?: Intl.LocalesArgument): string;
@@ -38,9 +40,16 @@ export declare const withTime: (fun: (...args: any[]) => any) => {
     executionTime: number;
 };
 export declare const time: (stamp?: number, format?: string) => string;
+export declare const timeSince: (stamp: number) => string;
 export declare const arrayRand: (arr: any[]) => any;
 export declare const formatNumber: ({ number, locale, style, decimal, currency }: FormatNumberParams) => string;
 export declare const formatSize: (bytes: number | string) => string;
 export declare const copyToClipboard: (text: string) => Promise<unknown>;
+/**
+ * Borrowed from https://github.com/bubkoo/natsort
+ * So we don't have to install a package for this
+ */
 export declare const natsort: (options?: sortOptions) => (a: string | number, b: string | number) => number;
 export declare const bindKey: (key: KeyCode, fun: () => void, element?: HTMLElement) => void;
+export declare const camelCase: (str: string) => string;
+export declare const pluralize: (word: string, count: number) => string;