@zuzjs/ui 0.7.6 → 0.7.8

package/dist/esm/comps/Treeview/item.js

@@ -1,28 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import Box from "../Box";
 import Button from "../Button";
 import Icon from "../Icon";
 import Text from "../Text";
 import SVGIcons from "../svgicons";
 const TreeItem = forwardRef((props, ref) => {
-    const { as, meta, nodes, icons, onSelect, treeTag, selected, ...rest } = props;
+    const { as, meta, nodes, icons, onSelect, treeTag, selected, isRoot, expanded, ...rest } = props;
     const { tag, label, icon, under, isHead } = meta;
-    const [isOpen, setIsOpen] = useState(tag == `root`);
+    const [isOpen, setIsOpen] = useState(expanded);
     const toggle = () => {
         localStorage.setItem(`--tn${treeTag}-${tag}`, isOpen ? `0` : `1`);
         setIsOpen(!isOpen);
     };
     useEffect(() => {
-        if (tag == `root` && !localStorage.getItem(`--tn${treeTag}-${tag}`)) {
+        if (expanded || (isRoot && !localStorage.getItem(`--tn${treeTag}-${tag}`))) {
             localStorage.setItem(`--tn${treeTag}-${tag}`, `1`);
             setIsOpen(true);
         }
         else
             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, { skeleton: rest.skeleton, onClick: toggle, className: `--node-aro-btn`, disabled: _nodes.length == 0, children: icons ? _jsx(Icon, { skeleton: rest.skeleton, className: `--node-aro-icon`, name: _nodes.length == 0 ? icons?.arrowDisabled || icons?.arrowClose : isOpen ? icons?.arrowOpen : icons?.arrowClose })
-                            : _nodes.length == 0 ? SVGIcons.chevronBottom : isOpen ? SVGIcons.chevronBottom : SVGIcons.chevronRight }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [icons?.nodeOpen && icons?.nodeClose && _jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon`, name: icon || (isOpen ? icons?.nodeOpen : icons?.nodeClose) }), _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}`)) })] });
+    const _nodes = useMemo(() => nodes.filter(x => x.under == tag), [nodes, tag]);
+    return _jsxs(Box, { className: `--treenode --treenode-${tag} flex cols`, children: [_jsxs(Box, { className: `--node --node-${tag} flex aic ${isRoot ? `--node-root` : ``} ${selected == tag ? ` --selected` : ``}`, children: [_jsx(Button, { skeleton: rest.skeleton, onClick: toggle, className: `--node-aro-btn`, disabled: _nodes.length == 0, children: icons?.arrowClose && icons?.arrowOpen ? _jsx(Icon, { skeleton: rest.skeleton, className: `--node-aro-icon`, name: _nodes.length == 0 ? icons?.arrowDisabled || icons?.arrowClose : isOpen ? icons?.arrowOpen : icons?.arrowClose })
+                            : _nodes.length == 0 ? SVGIcons.chevronBottom : isOpen ? SVGIcons.chevronBottom : SVGIcons.chevronRight }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [((icons?.nodeOpen && icons?.nodeClose) || (isRoot && icons?.rootOpen && icons?.rootClose)) &&
+                                _jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon`, name: icon || (isOpen ?
+                                        isRoot ? icons?.rootOpen || icons.nodeOpen : icons.nodeOpen
+                                        : isRoot ? icons?.rootClose || icons?.nodeClose : icons?.nodeClose) }), _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, isRoot: false, expanded: node.expanded || false, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
 });
+TreeItem.displayName = `TreeItem`;
 export default TreeItem;

package/dist/esm/comps/Treeview/types.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode } from "react";
 import { BoxProps } from "../Box";
 export interface TreeNodeIcons {
+    rootOpen?: ReactNode;
+    rootClose?: ReactNode;
     nodeOpen?: ReactNode;
     nodeClose?: ReactNode;
-    arrowOpen: ReactNode;
-    arrowClose: ReactNode;
+    arrowOpen?: ReactNode;
+    arrowClose?: ReactNode;
     arrowDisabled?: ReactNode;
 }
 export type TreeViewProps = Omit<BoxProps, `tag`> & {
@@ -31,6 +33,8 @@ export type TreeItemProps = BoxProps & {
     treeTag: string;
     meta: TreeNode;
     nodes: TreeNode[];
+    isRoot: boolean;
+    expanded: boolean;
     onSelect: (tag: string) => void;
     selected?: String;
     icons?: TreeNodeIcons;

package/dist/esm/funs/index.d.ts

@@ -1,8 +1,8 @@
-import CSS from "./css.js";
-import { dynamicObject, FormatNumberParams, sortOptions } from "../types/index.js";
 import { AxiosProgressEvent } from "axios";
-import { KeyCode } from "../types/enums.js";
 import { ReactElement, ReactNode, Ref } from "react";
+import { KeyCode } from "../types/enums.js";
+import { dynamicObject, FormatNumberParams, sortOptions } from "../types/index.js";
+import CSS from "./css.js";
 export declare const __SALT: string;
 export declare const FIELNAME_KEY = "__FILENAME__";
 export declare const LINE_KEY = "__LINE__";
@@ -29,8 +29,8 @@ export declare const isEmail: (e: string) => boolean;
 export declare const isUrl: (o: string) => boolean;
 export declare const toLowerCase: (o: string) => string;
 export declare const ucfirst: (o: any) => string;
-export declare const toHash: (n: number, len?: number) => string;
-export declare const fromHash: (n: string) => number;
+export declare const toHash: (n: number, len?: number, SALT?: string | null) => string;
+export declare const fromHash: (n: string, SALT?: string | null) => number;
 export declare const css: () => CSS;
 export declare const withCSS: (cx: string | string[]) => string;
 export declare const uuid: (len?: number) => string;
@@ -49,7 +49,8 @@ export declare const cleanProps: <T extends dynamicObject>(props: T, withProps?:
 export declare const withZuz: (cx: string | string[]) => string;
 export declare const setDeep: (object: dynamicObject, path: string, value: any, seperator?: string) => dynamicObject;
 export declare const removeDuplicatesFromArray: <T>(array: T[]) => T[];
-export declare const withPost: (uri: string, data: dynamicObject | FormData, timeout?: number, onProgress?: (ev: AxiosProgressEvent) => void) => Promise<dynamicObject>;
+export declare const withPost: <T>(uri: string, data: dynamicObject | FormData, timeout?: number, onProgress?: (ev: AxiosProgressEvent) => void) => Promise<T>;
+export declare const withGet: <T>(uri: string, timeout?: number) => Promise<T>;
 export declare const withTime: (fun: (...args: any[]) => any) => {
     result: any;
     executionTime: number;
@@ -62,7 +63,8 @@ export declare const formatSize: (bytes: number | string) => string;
 export declare const copyToClipboard: (text: string) => Promise<unknown>;
 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 camelCase: (str: string, ucf?: boolean) => string;
+export declare const camelCaseToDash: (str: string) => string;
 export declare const pluralize: (word: string, count: number) => string;
 export declare const addPropsToChildren: (children: ReactNode, conditions: (child: ReactElement<any>) => boolean, newProps: object) => ReactNode;
 export declare const getPositionAroundElement: (x: number, y: number, distance: number, childCount: number) => {

package/dist/esm/funs/index.js

@@ -1,14 +1,14 @@
-import Hashids from "hashids";
-import CSS from "./css.js";
-import { nanoid } from "nanoid";
-import md5 from "md5";
-import { colorNames } from "./colors.js";
-import { cssProps } from "./stylesheet.js";
 import axios from "axios";
+import Hashids from "hashids";
 import Cookies from "js-cookie";
+import md5 from "md5";
 import moment from "moment";
-import { SORT } from "../types/enums.js";
+import { nanoid } from "nanoid";
 import { Children, cloneElement, isValidElement } from "react";
+import { SORT } from "../types/enums.js";
+import { colorNames } from "./colors.js";
+import CSS from "./css.js";
+import { cssProps } from "./stylesheet.js";
 let __css;
 export const __SALT = `zuzjs-ui`;
 export const FIELNAME_KEY = `__FILENAME__`;
@@ -129,8 +129,8 @@ export const isEmail = (e) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.te
 export const isUrl = (o) => /^(https?:\/\/)?(www\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[^\s]*)?$/.test(o);
 export const toLowerCase = (o) => (String.prototype.toLocaleLowerCase || String.prototype.toLowerCase)(o);
 export const ucfirst = (o) => `${o.charAt(0).toUpperCase()}${o.substring(1, o.length)}`;
-export const toHash = (n, len = 6) => new Hashids(__SALT, len).encode(n);
-export const fromHash = (n) => Number(new Hashids(__SALT).decode(n));
+export const toHash = (n, len = 6, SALT = null) => new Hashids(SALT || __SALT, len).encode(n);
+export const fromHash = (n, SALT = null) => Number(new Hashids(SALT || __SALT).decode(n));
 export const css = () => __css ? __css : __css = new CSS();
 export const withCSS = (cx) => css().Build([[`string` == typeof cx ? cx : cx.join(` `)]]).cx.join(` `);
 export const uuid = (len) => nanoid(len);
@@ -260,6 +260,33 @@ export const withPost = async (uri, data, timeout = 60, onProgress) => {
         });
     });
 };
+export const withGet = async (uri, timeout = 60) => {
+    return new Promise((resolve, reject) => {
+        axios
+            .get(uri, { timeout: timeout * 1000 })
+            .then((resp) => {
+            if (resp.data && "kind" in resp.data) {
+                resolve(resp.data);
+            }
+            else {
+                reject(resp.data);
+            }
+        })
+            .catch((err) => {
+            if (err?.response?.data)
+                reject(err.response.data);
+            else
+                reject(err.code === `ERR_NETWORK`
+                    ? {
+                        error: err.code,
+                        message: navigator.onLine
+                            ? `Unable to connect to the server. It may be temporarily down.`
+                            : `Network error: Unable to connect. Please check your internet connection and try again.`,
+                    }
+                    : err);
+        });
+    });
+};
 export const withTime = (fun) => {
     const start = new Date().getTime();
     const result = fun();
@@ -441,15 +468,16 @@ export const bindKey = (key, fun, element) => {
     };
     (element || document.documentElement).addEventListener('keydown', handleKeydown);
 };
-export const camelCase = (str) => {
+export const camelCase = (str, ucf = false) => {
     return str
         .toLowerCase()
         .split(/[^a-zA-Z0-9]+/) // Split by any non-alphanumeric character
         .map((word, index) => index === 0
-        ? word
-        : word.charAt(0).toUpperCase() + word.slice(1))
+        ? ucf ? ucfirst(word) : word
+        : ucfirst(word))
         .join('');
 };
+export const camelCaseToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 export const pluralize = (word, count) => `${word}${count !== 1 ? 's' : ''}`;
 export const addPropsToChildren = (children, conditions, newProps) => {
     return Children.map(children, (child) => {

package/dist/esm/hooks/index.d.ts

@@ -3,19 +3,18 @@ export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';
 export { default as useContextMenu } from './useContextMenu';
-export { type IDBOptions, type IDBSchema, default as useDB } from './useDB';
+export { default as useDB, type IDBOptions, type IDBSchema } from './useDB';
 export { default as useDebounce } from './useDebounce';
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
-export { default as useDrag } from './useDrag';
-export { type DragOptions } from './useDrag';
+export { default as useDrag, type DragOptions } from './useDrag';
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useKeyBind } from './useKeyBind';
 /**
  * @deprecated use useDelayed hook instead
  */
-export { default as useMounted } from './useMounted';
-export { default as useDelayed } from './useMounted';
+export { default as useMounted } from './useDelayed';
+export { default as useDelayed } from './useDelayed';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';

package/dist/esm/hooks/index.js

@@ -14,8 +14,8 @@ export { default as useKeyBind } from './useKeyBind';
 /**
  * @deprecated use useDelayed hook instead
  */
-export { default as useMounted } from './useMounted';
-export { default as useDelayed } from './useMounted';
+export { default as useMounted } from './useDelayed';
+export { default as useDelayed } from './useDelayed';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
 // export { default as useDomSelector } from './useDomSelector';

package/dist/esm/hooks/useDelayed.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Custom hook that sets a mounted state to true after a specified delay.
+ *
+ * @param {number} [delay=100] - The delay in milliseconds before setting the mounted state to true.
+ * @returns {boolean} - The mounted state.
+ *
+ * @example
+ * const isMounted = useMounted(200);
+ *
+ * useEffect(() => {
+ *   if (isMounted) {
+ *     // Component is mounted after 200ms
+ *   }
+ * }, [isMounted]);
+ */
+declare const useMounted: (delay?: number) => boolean;
+export default useMounted;

package/dist/esm/hooks/useDelayed.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+/**
+ * Custom hook that sets a mounted state to true after a specified delay.
+ *
+ * @param {number} [delay=100] - The delay in milliseconds before setting the mounted state to true.
+ * @returns {boolean} - The mounted state.
+ *
+ * @example
+ * const isMounted = useMounted(200);
+ *
+ * useEffect(() => {
+ *   if (isMounted) {
+ *     // Component is mounted after 200ms
+ *   }
+ * }, [isMounted]);
+ */
+const useMounted = (delay = 100) => {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => setMounted(true), delay);
+        return () => clearTimeout(timer); // Cleanup the timer on unmount
+    }, [delay]);
+    return mounted;
+};
+export default useMounted;

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' '); };
 export * from "./comps";
 export { withCSS as css } from "./funs";
 export * from "./funs";