@zuzjs/ui 0.7.1 → 0.7.3

package/dist/comps/Table/row.js

@@ -5,15 +5,18 @@ import TColumn from "./col";
 import { TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
 import { useDelayed } from "../../hooks";
 const TRow = (props) => {
-    const { index, schema, data, ids, styles, animate } = props;
+    const { index, schema, data, ids, styles, animate, rowClassName, onContextMenu } = props;
     const mounted = useDelayed();
     const _animation = useMemo(() => ({
         transition: TRANSITIONS.SlideInBottom,
         curve: TRANSITION_CURVES.EaseInOut,
         delay: .02 * (index + 1),
     }), []);
-    return _jsxs(Box, { ...(animate ? { animate: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${index == -1 ? `--row-head` : ``}`, children: [index == -1 && schema.map((c, i) => _jsx(TColumn, { idx: -1, ...c, style: styles[c.id] }, `--col-${c.id}`)), index > -1 && ids && data && schema.map((c, i) => {
-                return ids.includes(String(c.id)) ? _jsx(TColumn, { idx: i, id: String(c.id), style: styles[String(c.id)], value: c.render ? c.render(data) : data[String(c.id)] }, `--${String(c.id)}-val-${i}`) : null;
+    return _jsxs(Box, { onContextMenu: e => onContextMenu ? onContextMenu(e, data) : null, ...(animate ? { animate: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${index == -1 ? `--row-head` : ``} ${rowClassName || ``}`, children: [index == -1 && schema.map((c, i) => {
+                const { renderWhenHeader, render, value, ...cc } = c;
+                return _jsx(TColumn, { idx: -1, value: renderWhenHeader && render ? render(index == -1 ? c : data, index) : value, ...cc, style: styles[c.id] }, `--col-${c.id}`);
+            }), index > -1 && ids && data && schema.map((c, i) => {
+                return ids.includes(String(c.id)) ? _jsx(TColumn, { idx: i, id: String(c.id), style: styles[String(c.id)], value: c.render ? c.render(data, index) : data[String(c.id)] }, `--${String(c.id)}-val-${i}`) : null;
             })] });
 };
 export default TRow;

package/dist/comps/Table/types.d.ts

@@ -9,10 +9,12 @@ export type Row = {
     ids?: string[];
     animate?: boolean;
     data?: dynamicObject;
+    rowClassName?: string;
+    onContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: dynamicObject) => void;
 };
 export type Column = {
     id: string | number;
-    value: string | dynamicObject;
+    value: string | ReactNode | dynamicObject;
     weight?: number;
     w?: number | string;
     maxW?: number | string;
@@ -22,15 +24,20 @@ export type Column = {
     minH?: number | string;
     resize?: boolean;
     sort?: boolean;
-    render?: (row: dynamicObject) => ReactNode;
+    renderWhenHeader?: boolean;
+    render?: (row: dynamicObject, index: number) => ReactNode;
 };
 export type TableProps = BoxProps & {
     schema: Column[];
     rows?: dynamicObject[];
     rowCount?: number;
     rowsPerPage?: number;
+    rowClassName?: string;
     currentPage?: number;
     pagination?: boolean;
+    showPaginationOnZeroPageCount?: boolean;
     animateRows?: boolean;
+    header?: boolean;
+    onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: dynamicObject) => void;
     onPageChange?: PaginationCallback;
 };

package/dist/comps/TextArea/index.d.ts

@@ -1,8 +1,11 @@
 import { Props } from '../../types';
+import { Variant } from '../../types/enums';
 export type TextAreaProps = Props<`textarea`> & {
     autoResize?: boolean;
+    variant?: Variant;
 };
 declare const TextArea: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof import("../../types").ZuzProps> & {
     autoResize?: boolean;
+    variant?: Variant;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/dist/comps/TextArea/index.js

@@ -2,11 +2,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
+import { Variant } from '../../types/enums';
 const TextArea = forwardRef((props, ref) => {
-    const { autoResize, ...pops } = props;
+    const { autoResize, variant, ...pops } = props;
     const { style, className, rest } = useBase(pops);
     const handleInput = (event) => {
     };
-    return _jsx("textarea", { className: `--input --textarea flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
+    return _jsx("textarea", { className: `--input --textarea --${variant || Variant.Small} flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
 });
 export default TextArea;

package/dist/comps/Treeview/index.js

@@ -19,6 +19,6 @@ const TreeView = forwardRef((props, ref) => {
     }, [_selected]);
     return _jsx(Box, { className: `--treeview flex cols`, children: nodes
             .filter(node => roots.includes(node.tag))
-            .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: e => handleSelect(e), icons: icons, meta: node, nodes: nodes }, `--node-${node.tag}`)) });
+            .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: e => handleSelect(e), icons: icons, meta: node, skeleton: rest.skeleton, nodes: nodes }, `--node-${node.tag}`)) });
 });
 export default TreeView;

package/dist/comps/Treeview/item.js

@@ -21,6 +21,6 @@ const TreeItem = forwardRef((props, ref) => {
             setIsOpen(localStorage.getItem(`--tn${treeTag}-${tag}`) == `1`);
     }, []);
     const _nodes = nodes.filter(x => x.under == tag);
-    return _jsxs(Box, { className: `--treenode --treenode-${tag} flex cols`, children: [_jsxs(Box, { className: `--node --node-${tag} flex aic${selected == tag ? ` --selected` : ``}`, children: [_jsx(Button, { onClick: toggle, className: `--node-aro-btn`, children: _jsx(Icon, { className: `--node-aro-icon`, name: isOpen ? icons?.arrowOpen : icons?.arrowClose }) }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [_jsx(Icon, { className: `--node-icon`, name: icon || (isOpen ? icons?.dirOpen : icons?.dirClose) }), _jsx(Text, { ...{ className: `--node-label` }, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
+    return _jsxs(Box, { className: `--treenode --treenode-${tag} flex cols`, children: [_jsxs(Box, { className: `--node --node-${tag} flex aic${selected == tag ? ` --selected` : ``}`, children: [_jsx(Button, { skeleton: rest.skeleton, onClick: toggle, className: `--node-aro-btn`, children: _jsx(Icon, { skeleton: rest.skeleton, className: `--node-aro-icon`, name: isOpen ? icons?.arrowOpen : icons?.arrowClose }) }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [_jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon`, name: icon || (isOpen ? icons?.dirOpen : icons?.dirClose) }), _jsx(Text, { ...{ className: `--node-label` }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
 });
 export default TreeItem;

package/dist/funs/css.d.ts

@@ -3,32 +3,34 @@ import Hashids from "hashids";
 import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
 import { OptionValues } from "commander";
 declare class CSS {
-    cx: string[];
     cache: dynamicObject;
     PROPS: dynamicObject;
     DIRECT: dynamicObject;
+    IGNORE: string[];
+    PROPS_KEYS: string[];
+    DIRECT_KEYS: string[];
+    cx: string[];
     hashids: Hashids;
     chars: string;
     rgbaRegex: RegExp;
-    IGNORE: string[];
     unit: any;
     keysWithoutCommaToSpace: string[];
     propCounter: dynamicObject;
     seperator: string;
     pseudoList: string[];
     ids: string[];
+    DIRECT_VALUES: string[];
+    PROPS_VALUES: string[];
     mediaQueries: dynamicObject;
+    debug: OptionValues | undefined;
+    _darkQueries: dynamicObject;
     _mediaQueries: dynamicObject;
     _mediaQueriesLabels: dynamicObject;
-    PROPS_KEYS: string[];
-    DIRECT_KEYS: string[];
     _cli: boolean;
-    DIRECT_VALUES: string[];
-    PROPS_VALUES: string[];
     _currentFile: string;
-    debug: OptionValues | undefined;
     constructor(options?: dynamicObject | undefined, debug?: OptionValues);
     buildMediaQueries(queries: dynamicObject): string;
+    buildDarkModeQueries(queries: dynamicObject): string;
     styleSheet(cache: dynamicObject, pseudo?: string): string;
     _styleSheet(cache: dynamicObject): string;
     cleanKey(key: string): string;
@@ -44,6 +46,7 @@ declare class CSS {
         cx: string[];
         sheet: string;
         mediaQuery: dynamicObject;
+        darkQueries: dynamicObject;
     };
 }
 export default CSS;

package/dist/funs/css.js

@@ -5,34 +5,36 @@ import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
 import md5 from "md5";
 import pc from "picocolors";
 class CSS {
-    cx;
     cache;
     PROPS;
     DIRECT;
+    IGNORE;
+    PROPS_KEYS;
+    DIRECT_KEYS;
+    cx;
     hashids;
     chars;
     rgbaRegex;
-    IGNORE;
     unit;
     keysWithoutCommaToSpace;
     propCounter;
     seperator;
     pseudoList;
     ids;
+    DIRECT_VALUES;
+    PROPS_VALUES;
     mediaQueries;
+    debug;
+    _darkQueries;
     _mediaQueries;
     _mediaQueriesLabels;
-    PROPS_KEYS;
-    DIRECT_KEYS;
     _cli;
-    DIRECT_VALUES;
-    PROPS_VALUES;
     _currentFile;
-    debug;
     constructor(options, debug) {
         const opts = options || {};
         this.debug = debug;
         this._cli = false;
+        this._darkQueries = [];
         this._mediaQueries = {};
         this._mediaQueriesLabels = {
             ph: `Extra Small Devices (Phones)`,
@@ -60,7 +62,7 @@ class CSS {
             "@before", "@after", "@active", "@checked", "@default", "@disabled", "@empty", "@enabled", "@first", "@firstChild", "@firstOfType", "@focus", "@hover", "@indeterminate", "@inRange", "@invalid", "@lastChild", "@lastOfType", "@link", "@not", "@nthChild", "@nthLastChild", "@nthLastOfType", "@nthOfType", "@onlyChild", "@onlyOfType", "@optional", "@outOfRange", "@readOnly", "@readWrite", "@required", "@root", "@scope", "@target", "@valid", "@visited"
         ];
         this.IGNORE = [
-            `flex`, `opacity`, `z-index`, `zIndex`, `color`, `line-height`, `anim`, `scale`, `saturate`
+            `flex`, `opacity`, `z-index`, `zIndex`, `color`, `line-height`, `anim`, `scale`, `saturate`, `brightness`
         ];
         this.keysWithoutCommaToSpace = [
             `transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`, `backgroundImage`, `background-image`,
@@ -91,11 +93,24 @@ class CSS {
         Object.keys(queries).forEach((key) => {
             scss.push(`/**\n*${self._mediaQueriesLabels[key]}\n*/`);
             scss.push(`@media screen and ${self.mediaQueries[key]}{`);
-            scss.push(queries[key].join(`\n`));
+            scss.push(`\t${queries[key].join(`\n\t`)}`);
             scss.push(`}`);
         });
         return scss.join(`\n`);
     }
+    buildDarkModeQueries(queries) {
+        const self = this;
+        const scss = [`\n`];
+        if (Object.keys(queries).length > 0) {
+            scss.push(`/**\n*Dark Scheme\n*/`);
+            scss.push(`[color-scheme="dark"]{`);
+            Object.keys(queries).forEach((key) => {
+                scss.push(`\t.${key}{${queries[key]}${queries[key].endsWith(`;`) ? `` : `;`}}`);
+            });
+            scss.push(`}`);
+        }
+        return scss.join(`\n`);
+    }
     styleSheet(cache, pseudo = ``) {
         const self = this;
         const scss = [];
@@ -266,11 +281,13 @@ class CSS {
                 if (!_[_id]) {
                     const cleaned = self.deepClean(cache[_k], level + 1);
                     if (level == 0 &&
-                        (self.pseudoList.includes(`@${__k}`) || __k in self.mediaQueries)) {
+                        (self.pseudoList.includes(`@${__k}`) ||
+                            __k in self.mediaQueries ||
+                            __k in self._darkQueries)) {
                         self.cx.push(_id);
                         _[_id] = { [__k]: cleaned };
                     }
-                    else
+                    else if (__k !== `dark`)
                         _[__k] = cleaned;
                 }
             }
@@ -314,7 +331,6 @@ class CSS {
     }
     makeValue(k, v) {
         const self = this;
-        // console.log(`makeValue`, k, v)
         if (k in this.PROPS) {
             const key = this.PROPS[k];
             let value;
@@ -663,6 +679,11 @@ class CSS {
                             self.mediaQueries[_mediaQuery].push({ [_id]: _out });
                             return {};
                         }
+                        if (pseudo.startsWith(`dark`)) {
+                            self._darkQueries[_id] = _out;
+                            self.cx.push(_id);
+                            return {};
+                        }
                         return { [_id]: _out };
                     }
                     else if (key in self.DIRECT) {
@@ -733,6 +754,11 @@ class CSS {
                             self.mediaQueries[_mediaQuery].push({ [_id]: _out });
                             return {};
                         }
+                        if (pseudo.startsWith(`dark`)) {
+                            self._darkQueries[_id] = _out;
+                            self.cx.push(_id);
+                            return {};
+                        }
                         return { [_id]: _out };
                     }
                 }
@@ -746,6 +772,11 @@ class CSS {
                         self.mediaQueries[_mediaQuery].push({ [_id]: _out });
                         return {};
                     }
+                    if (pseudo.startsWith(`dark`)) {
+                        self._darkQueries[_id] = _out;
+                        self.cx.push(_id);
+                        return {};
+                    }
                     return { [_id]: _out };
                 }
                 else if (_k.trim().match(/^[a-zA-Z0-9\-]+$/g)) {
@@ -801,13 +832,15 @@ class CSS {
         self._cli = cli;
         self.cx = [];
         self.cache = {};
+        self._darkQueries = {};
         self._mediaQueries = {};
         self._currentFile = ff;
         if (undefined == css)
             return {
                 cx: self.cx,
                 sheet: ``,
-                mediaQuery: {}
+                mediaQuery: {},
+                darkQueries: []
             };
         if (`string` == typeof css) {
             css = [[css]];
@@ -827,6 +860,7 @@ class CSS {
         // }
         const _cleaned = self.deepClean(self.cache);
         const _stylesheet = self.styleSheet(_cleaned);
+        // console.log(_cleaned, _stylesheet)
         // const _mediaQueries : dynamicObject = {}
         // if ( !cli ){
         //     console.log(css, self.cx, self.styleSheet(_cleaned))
@@ -843,10 +877,13 @@ class CSS {
             console.log(pc.cyan(`[sheet]`), _stylesheet);
         if (self.debug?.media)
             console.log(pc.cyan(`[mediaquery]`), self._mediaQueries);
+        if (self.debug?.dark)
+            console.log(pc.cyan(`[darkquery]`), self._darkQueries);
         const _ = {
             cx: self.cx,
             sheet: _stylesheet,
-            mediaQuery: self._mediaQueries
+            mediaQuery: self._mediaQueries,
+            darkQueries: self._darkQueries
         };
         // console.log(css, _)
         return _;

package/dist/funs/stylesheet.js

@@ -322,6 +322,7 @@ export const cssDirect = {
     "inlineblock": "display: inline-block;",
     "blur": "filter: blur(__VALUE__);",
     "saturate": "filter: saturate(__VALUE__);",
+    "brightness": "filter: brightness(__VALUE__);",
     "ratio": "aspect-ratio: __VALUE__;",
     "center-h": "left: 50%;transform: translateX(-50%);",
     "center-v": "top: 50%;transform: translateY(-50%);",

package/dist/hooks/useBase.js

@@ -24,7 +24,7 @@ const buildSkeletonStyle = (s) => {
         }
     }
     else {
-        style.minWidth = style.minHeight = `100%`;
+        style.minWidth = style.minHeight = s.defaultSize || `100%`;
     }
     return style;
 };

package/dist/hooks/useColorScheme.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { ColorTheme } from "../types/enums";
 export type ColorScheme = `light` | `dark` | `system`;
 export type ThemeContextProps = {
     colorScheme: ColorScheme;
@@ -7,7 +8,8 @@ export type ThemeContextProps = {
 };
 export interface ThemeProviderProps {
     children: ReactNode;
+    forceTheme?: ColorTheme;
     storageKey?: string;
 }
 export declare const useColorScheme: () => ThemeContextProps;
-export declare const ThemeProvider: ({ children, storageKey }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ children, storageKey, forceTheme }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useColorScheme.js

@@ -11,12 +11,12 @@ export const useColorScheme = () => {
     }
     return context;
 };
-export const ThemeProvider = ({ children, storageKey = `--ucs` }) => {
-    return _jsx(Theme, { storageKey: storageKey, children: children });
+export const ThemeProvider = ({ children, storageKey = `--ucs`, forceTheme }) => {
+    return _jsx(Theme, { storageKey: storageKey, forceTheme: forceTheme, children: children });
 };
-const Theme = ({ children, storageKey }) => {
-    const [colorScheme, setThemeState] = useState(() => getTheme(storageKey, `system`));
-    const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
+const Theme = ({ children, storageKey, forceTheme }) => {
+    const [colorScheme, setThemeState] = useState(() => forceTheme || getTheme(storageKey, `system`));
+    const [resolvedTheme, setResolvedTheme] = useState(() => forceTheme || getTheme(storageKey));
     // const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark' | undefined>(() => {
     //     if ( SSR ) return undefined
     //     return colorScheme === 'system' ? window?.matchMedia(MATCH_MEDIA).matches ? 'dark' : 'light' : colorScheme
@@ -69,10 +69,10 @@ const Theme = ({ children, storageKey }) => {
         return () => window.removeEventListener(`storage`, handleStorage);
     }, [switchColorScheme]);
     useEffect(() => {
-        applyColorScheme((colorScheme || `system`));
+        applyColorScheme((forceTheme || colorScheme || `system`));
     }, [colorScheme]);
     return (_jsxs(ThemeContext, { value: { colorScheme: colorScheme, resolvedScheme: resolvedTheme, setColorScheme: switchColorScheme }, children: [_jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: {
-                    __html: `const el = document.documentElement
+                    __html: forceTheme ? `` : `const el = document.documentElement
                     const themes = ['light', 'dark']
                     let theme = localStorage.getItem(\`${storageKey}\`) || "system";
                     if (theme === "system") {

package/dist/hooks/useDB.js

@@ -61,7 +61,7 @@ const useDB = (options) => {
             };
         })
             .catch(err => {
-            reject('Database either corrupted or not initialized');
+            reject(err.message || 'Database either corrupted or not initialized');
         });
     });
     const getByID = (storeName, id) => new Promise((resolve, reject) => {
@@ -95,7 +95,7 @@ const useDB = (options) => {
             };
         })
             .catch(err => {
-            reject('Database either corrupted or not initialized');
+            reject(err.message || 'Database either corrupted or not initialized');
         });
     });
     const update = (storeName, value, key) => new Promise((resolve, reject) => {