@zuzjs/ui 0.5.2 → 0.5.4

package/dist/bin.js

@@ -85,9 +85,9 @@ const rebuildAll = () => {
     if (files.length > 0) {
         const as = [];
         if (options.file) {
-            const r = rebuild(files.filter(f => f.endsWith(options.file))[0]);
+            const r = rebuild(files.filter(f => f.endsWith(options.file.replace(path.resolve(`./`), ``)))[0]);
             if (r && r.length > 0) {
-                as.push(cssBuilder.Build([r], true).sheet);
+                as.push(cssBuilder.Build([r], true, options.file).sheet);
             }
         }
         else {
@@ -95,7 +95,7 @@ const rebuildAll = () => {
             files.map(f => {
                 const r = rebuild(f);
                 if (r && r.length > 0) {
-                    const _built = cssBuilder.Build([r], true);
+                    const _built = cssBuilder.Build([r], true, f.replace(path.resolve(`./`), ``));
                     as.push(_built.sheet);
                     Object.keys(_built.mediaQuery).map(mq => {
                         if (!mediaQueries[mq])

package/dist/comps/alert.d.ts

@@ -0,0 +1,15 @@
+import { BaseProps } from "../types/interfaces";
+import { ALERT } from "../types/enums";
+export interface AlertProps {
+    type?: ALERT;
+    icon?: string;
+    iconSize?: number;
+    message?: string;
+    title: string;
+}
+export interface AlertHandler {
+    open: () => void;
+    close: () => void;
+}
+declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & BaseProps & import("react").RefAttributes<AlertHandler>>;
+export default Alert;

package/dist/comps/alert.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ALERT } from "../types/enums";
+import With from "./base";
+const Icons = {
+    [ALERT.Info]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { fill: "#292D32", d: "M21.56 10.738l-1.35-1.58c-.25-.3-.46-.86-.46-1.26v-1.7c0-1.06-.87-1.93-1.93-1.93h-1.7c-.4 0-.97-.21-1.27-.46l-1.58-1.35c-.69-.59-1.82-.59-2.51 0l-1.6 1.35c-.3.25-.86.46-1.26.46H6.17c-1.06 0-1.93.87-1.93 1.93v1.7c0 .39-.2.95-.45 1.25l-1.35 1.59c-.58.7-.58 1.82 0 2.5l1.35 1.59c.25.29.45.86.45 1.25v1.71c0 1.06.87 1.93 1.93 1.93h1.74c.39 0 .96.21 1.26.46l1.58 1.35c.69.59 1.82.59 2.51 0l1.58-1.35c.3-.25.86-.46 1.26-.46h1.7c1.06 0 1.93-.87 1.93-1.93v-1.7c0-.4.21-.96.46-1.26l1.35-1.58c.61-.68.61-1.81.02-2.51zm-10.31-2.61c0-.41.34-.75.75-.75s.75.34.75.75v4.83c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-4.83zm.75 8.74c-.55 0-1-.45-1-1s.44-1 1-1c.55 0 1 .45 1 1s-.44 1-1 1z" }) }),
+    [ALERT.Warning]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { fill: "#292D32", d: "M19.51 5.85l-5.94-3.43c-.97-.56-2.17-.56-3.15 0L4.49 5.85a3.15 3.15 0 00-1.57 2.73v6.84c0 1.12.6 2.16 1.57 2.73l5.94 3.43c.97.56 2.17.56 3.15 0l5.94-3.43a3.15 3.15 0 001.57-2.73V8.58a3.192 3.192 0 00-1.58-2.73zm-8.26 1.9c0-.41.34-.75.75-.75s.75.34.75.75V13c0 .41-.34.75-.75.75s-.75-.34-.75-.75V7.75zm1.67 8.88c-.05.12-.12.23-.21.33a.99.99 0 01-1.09.21c-.13-.05-.23-.12-.33-.21-.09-.1-.16-.21-.22-.33a.986.986 0 01-.07-.38c0-.26.1-.52.29-.71.1-.09.2-.16.33-.21.37-.16.81-.07 1.09.21.09.1.16.2.21.33.05.12.08.25.08.38s-.03.26-.08.38z" }) }),
+    [ALERT.Error]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }),
+    [ALERT.Success]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) })
+};
+const Alert = forwardRef((props, ref) => {
+    const { type, icon, title, message, iconSize, ...rest } = props;
+    return _jsxs(With, { className: `--alert --${(type || ALERT.Info).toLowerCase()} flex aic`, ...rest, children: [_jsx(With, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { width: iconSize, height: iconSize } : {}, children: !icon && Icons[type || ALERT.Info] }), _jsxs(With, { className: `--meta flex cols`, tag: `h1`, children: [_jsx(With, { className: `--title ${message ? `--tm` : ``}`, tag: `h1`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(With, { className: `--message`, tag: `h2`, children: message })] })] });
+});
+export default Alert;

package/dist/comps/avatar.d.ts

@@ -0,0 +1,13 @@
+import { BaseProps } from "../types/interfaces";
+import { AVATAR } from "../types/enums";
+export interface AvatarProps {
+    type?: AVATAR;
+    size?: number;
+    src: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+}
+export interface AvatarHandler {
+}
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & BaseProps & import("react").RefAttributes<AvatarHandler>>;
+export default Avatar;

package/dist/comps/avatar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AVATAR } from "../types/enums";
+import With from "./base";
+import { useImage } from "../hooks";
+const Avatar = forwardRef((props, ref) => {
+    const { src, size, type, crossOrigin, referrerPolicy, ...rest } = props;
+    const [img, imgStatus, imgError] = useImage(src, crossOrigin, referrerPolicy);
+    return _jsx(With, { tag: `img`, src: img, style: size ? { width: size, height: size } : {}, crossOrigin: crossOrigin, referrerPolicy: referrerPolicy, className: `--avatar --${(type || AVATAR.Circle).toLowerCase()}`, ...rest });
+});
+export default Avatar;

package/dist/comps/base.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { dynamicObject } from "../types";
 import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { Skeleton } from "../types/interfaces";
 export interface animationProps {
     transition?: TRANSITIONS;
     from?: dynamicObject;
@@ -13,9 +14,10 @@ export interface animationProps {
 interface BaseProps<T extends ElementType> {
     tag?: T;
     as?: string | string[];
+    animate?: animationProps;
     className?: string;
     propsToRemove?: string[];
-    animate?: animationProps;
+    skeleton?: Skeleton;
 }
 export type Props<T extends ElementType> = BaseProps<T> & ComponentPropsWithoutRef<T>;
 declare const With: import("react").ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & import("react").RefAttributes<Element>>;

package/dist/comps/base.js

@@ -1,7 +1,33 @@
 import { createElement, forwardRef } from "react";
 import { css, cleanProps } from "../funs";
 import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
-const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, ...rest }, ref) => {
+const buildSkeletonStyle = (s) => {
+    const makeValue = (v, unit = `px`) => {
+        return v ?
+            `string` == typeof v ? v : `${v}${unit}`
+            : `inherit`;
+    };
+    const style = {};
+    if (s.radius) {
+        style.borderRadius = makeValue(s.radius);
+    }
+    if (s.size) {
+        style.width = style.minWidth = style.maxWidth = style.height = style.minHeight = style.maxHeight = makeValue(s.size);
+    }
+    else if (s.width || s.height) {
+        if (s.width) {
+            style.width = style.minWidth = style.maxWidth = makeValue(s.width);
+        }
+        if (s.height) {
+            style.height = style.minHeight = style.maxHeight = makeValue(s.height);
+        }
+    }
+    else {
+        style.minWidth = style.minHeight = `100%`;
+    }
+    return style;
+};
+const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, skeleton, ...rest }, ref) => {
     const Comp = tag || 'div';
     let cx = [];
     if (as) {
@@ -19,14 +45,22 @@ const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, ..
     else {
         _style = transition ? getAnimationTransition(transition, false, true) : from || {};
     }
+    const { children, ...restProps } = cleanProps(rest, propsToRemove ? [...propsToRemove, `skeleton`] : [`skeleton`]);
     return createElement(Comp, {
         style: {
             ...buildWithStyles(_style),
             ..._transition,
-            ...style
+            ...style,
+            ...(skeleton?.enabled ? buildSkeletonStyle(skeleton) : {})
         },
-        className: [className, ...cx].join(' ').trim(),
-        ...cleanProps(rest, propsToRemove || []),
+        className: [
+            className,
+            ...cx,
+            skeleton?.enabled ? `--skeleton` : ``
+        ].join(' ').trim(),
+        children: skeleton?.enabled ? ` `.repeat(6)
+            : children,
+        ...restProps,
         ref
     });
 });

package/dist/comps/box.d.ts

@@ -1,6 +1,3 @@
-import { animationProps } from "./base";
-declare const Box: import("react").ForwardRefExoticComponent<{
-    as?: string;
-    animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { BaseProps } from "../types/interfaces";
+declare const Box: import("react").ForwardRefExoticComponent<BaseProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Box;

package/dist/comps/checkbox.js

@@ -4,8 +4,8 @@ import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import With from "./base";
 import { CHECKBOX } from "../types/enums";
 const CheckBox = forwardRef((props, ref) => {
-    const { as, name, required, type, value, onChange, ...rest } = props;
-    const [checked, _setChecked] = useState(props.checked || false);
+    const { as, name, required, type, value, checked: defaultCheck, onChange, ...rest } = props;
+    const [checked, _setChecked] = useState(defaultCheck || false);
     const bRef = useRef(null);
     useImperativeHandle(ref, () => ({
         setChecked(mod, triggerChange = true) {
@@ -24,7 +24,7 @@ const CheckBox = forwardRef((props, ref) => {
             _setChecked(!checked);
         }
     }));
-    return _jsx(With, { tag: `label`, className: `${type == CHECKBOX.Default ? `checkbox icon-check` : `zuz-checkbox`} flex aic jcc ${checked ? `is-checked` : ``} rel`.trim(), as: as, ...rest, children: _jsx(With, { tag: `input`, ref: bRef, value: value || `cb`, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => {
+    return _jsx(With, { tag: `label`, className: `${type == CHECKBOX.Default ? `checkbox icon-check` : `zuz-checkbox`} flex aic jcc ${checked ? `is-checked` : ``} rel`.trim(), as: as, ...rest, children: _jsx(With, { tag: `input`, ref: bRef, defaultChecked: checked, value: value || `cb`, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => {
                 onChange && onChange(e.target.checked, value || `cb`);
                 _setChecked(e.target.checked);
             } }) });

package/dist/comps/contextmenu.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import With from "./base";
 const ContextMenu = forwardRef((props, ref) => {
     const { as, items, ...rest } = props;
-    return _jsx(With, { as: as, className: `zuz-context-menu abs flex cols`, ...rest, ref: ref, children: items.map((item, index) => item.label == `-` ? _jsx(With, { as: `context-line` }, `${index}-line`) :
+    return _jsx(With, { as: as, className: `context-menu abs flex cols`, ...rest, ref: ref, children: items.map((item, index) => item.label == `-` ? _jsx(With, { as: `context-line` }, `${index}-line`) :
             _jsxs(With, { onClick: item.onSelect, as: `button`, className: `context-menu-item flex aic ${item.className || ``}`.trim(), children: [_jsx(With, { as: `div`, className: `ico icon-${item.icon}`.trim(), style: item.iconColor ? { color: item.iconColor } : {} }), _jsx(With, { as: `h1`, className: `flex aic`, style: item.labelColor ? { color: item.labelColor } : {}, children: item.label })] }, `item-${item.label.replace(/\s/g, `-`)}-${index}`)) });
 });
 export default ContextMenu;

package/dist/comps/drawer.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import With from "./base";
-import { DRAWER_SIDE, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { bindKey } from "../funs";
 const Drawer = forwardRef((props, ref) => {
     const { as, from, speed, children, prerender, ...rest } = props;
     const [render, setRender] = useState(undefined == prerender ? true : prerender);
@@ -11,6 +12,9 @@ const Drawer = forwardRef((props, ref) => {
     useEffect(() => {
         setContent(children);
     }, [children]);
+    useEffect(() => {
+        bindKey(KeyCode.Escape, () => visible && setVisible(false));
+    }, []);
     const style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:

package/dist/comps/form.d.ts

@@ -18,6 +18,7 @@ export interface FormProps {
 }
 export interface FormHandler {
     setLoading: (mode: boolean) => void;
+    hideError: () => void;
 }
 declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<FormHandler>>;
 export default Form;

package/dist/comps/form.js

@@ -19,6 +19,9 @@ const Form = forwardRef((props, ref) => {
             if (el.type == `checkbox` && el.checked == false) {
                 return false;
             }
+            if (el.classList.contains(`--select`) && el.dataset.value == `-1`) {
+                return false;
+            }
             if (el.value == ``)
                 return false;
         }
@@ -70,9 +73,9 @@ const Form = forwardRef((props, ref) => {
                 valid = _validate(el);
             data[el.name] = {
                 valid: valid,
-                value: el.value
+                value: el.classList.contains(`--select`) ? el.dataset.value : el.value
             };
-            payload[el.name] = el.value;
+            payload[el.name] = el.classList.contains(`--select`) ? el.dataset.value : el.value;
             if (!valid) {
                 if (_error == null && errors) {
                     _error = el;
@@ -136,13 +139,19 @@ const Form = forwardRef((props, ref) => {
     };
     useImperativeHandle(ref, () => ({
         setLoading(mod) {
+            if (mod) {
+                sheet.current.hide();
+            }
             setLoading(mod);
         },
         showError(errorMsg) {
             sheet.current.show(errorMsg, 4, SHEET.Error);
+        },
+        hideError() {
+            sheet.current.hide();
         }
     }));
     useEffect(_init, []);
-    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
+    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet, as: `toast-form` }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
 });
 export default Form;

package/dist/comps/heading.d.ts

@@ -1,9 +1,7 @@
 import { ReactNode } from "react";
-import { animationProps } from "./base";
+import { BaseProps } from "../types/interfaces";
 declare const Heading: import("react").ForwardRefExoticComponent<{
-    as?: string;
     h?: number | string;
     html?: ReactNode | string;
-    animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+} & BaseProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Heading;

package/dist/comps/heading.js

@@ -2,7 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import With from "./base";
 const Heading = forwardRef((props, ref) => {
-    const { as, h, html, children, ...rest } = props;
-    return _jsx(With, { tag: `h${h || 1}`, as: as, ref: ref, ...rest, children: props.html ? _jsx("span", { ...({ dangerouslySetInnerHTML: { __html: html } }) }) : children });
+    const { as, h, html, ...rest } = props;
+    return _jsx(With, { tag: `h${h || 1}`, as: as, ref: ref, ...rest, children: props.children ?
+            props.html ? _jsx("span", { ...({ dangerouslySetInnerHTML: { __html: html } }) }) : props.children
+            : null });
 });
 export default Heading;

package/dist/comps/progressbar.d.ts

@@ -0,0 +1,11 @@
+import { BaseProps } from "../types/interfaces";
+import { PROGRESS } from "../types/enums";
+export interface ProgressBarProps {
+    progress: number;
+    type?: PROGRESS;
+}
+export interface ProgressHandler {
+    setWidth?: (w: number) => void;
+}
+declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & BaseProps & import("react").RefAttributes<ProgressHandler>>;
+export default ProgressBar;

package/dist/comps/progressbar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import With from "./base";
+const ProgressBar = forwardRef((props, ref) => {
+    const { as } = props;
+    const bar = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setWidth: (progress) => {
+            bar.current.style.width = `${progress * 100}%`;
+        }
+    }), []);
+    return _jsx(With, { className: `--progress flex rel`, as: as, children: _jsx(With, { ref: bar, className: `--bar rel` }) });
+});
+export default ProgressBar;

package/dist/comps/select.js

@@ -19,14 +19,13 @@ const Select = forwardRef((props, ref) => {
             setChoosing(false);
         });
     }, []);
-    return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { popovertarget: _id, tag: `button`, as: as, className: `zuz-select rel flex aic`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsx(With, { popover: "true", id: _id, className: `zuz-select-options abs flex cols`, style: {
+    return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, name: name, tag: `button`, as: as, className: `zuz-select rel flex aic --select`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsx(With, { id: _id, className: `zuz-select-options abs flex cols`, style: {
                     pointerEvents: choosing ? `auto` : `none`,
                 }, animate: {
-                    from: { height: 0, opacity: 0 },
-                    to: { height: `auto`, opacity: 1 },
+                    from: { y: 5, opacity: 0 },
+                    to: { y: 0, opacity: 1 },
                     when: choosing,
-                    curve: `spring`,
-                    duration: .4
+                    duration: .05
                 }, children: options.map((o) => _jsx(With, { onClick: (e) => updateValue(o), className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, tag: `button`, children: `string` == typeof o ? o : o.label }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`)) })] });
 });
 export default Select;

package/dist/comps/sheet.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { SHEET, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
 import { BaseProps } from "../types/interfaces";
 export interface SheetProps {
     title?: string;
@@ -8,10 +8,13 @@ export interface SheetProps {
     curve?: TRANSITION_CURVES;
     speed?: Number;
     type?: SHEET;
+    actionPosition?: SHEET_ACTION_POSITION;
 }
 export interface SheetActionHandler {
+    key?: string;
     label: string;
-    handler: () => void;
+    handler?: () => void;
+    onClick?: () => void;
 }
 export interface SheetHandler {
     showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;

package/dist/comps/sheet.js

@@ -2,22 +2,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import With from "./base";
-import { SHEET, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
 import Cover from "./cover";
 import { animationTransition } from "../funs/css";
-import useComponentEditor from "../hooks/useCompEditor";
 import ComponentEditor from "./editor";
+import { uuid } from "../funs";
 let _sheetTimeout = null;
 let _sheetWobbleTimeout = null;
 const Sheet = forwardRef((props, ref) => {
-    const { as, transition, curve, speed, editor, type, ...rest } = props;
-    const _editor = useComponentEditor();
+    const { as, transition, curve, speed, editor, type, actionPosition, ...rest } = props;
+    const sheetID = useMemo(() => uuid(), []);
     const [visible, setVisible] = useState(false);
     const [title, setTitle] = useState(``);
     const [msg, setMsg] = useState(``);
     const [action, setAction] = useState(null);
     const [_errorType, setErrorType] = useState(type || SHEET.Default);
     const [loading, setLoading] = useState(false);
+    const [render, setRender] = useState(true);
+    const _render = useRef(null);
     const divRef = useRef(null);
     const lastTransform = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -41,7 +43,13 @@ const Sheet = forwardRef((props, ref) => {
             setMsg(message);
             setTitle(title);
             if (action)
-                setAction(action);
+                setAction(action.reduce((ar, b) => {
+                    ar.push({
+                        ...b,
+                        key: b.key || uuid()
+                    });
+                    return ar;
+                }, []));
             setVisible(true);
             setTimeout(() => onShow ? onShow() : () => { }, 1000);
         },
@@ -167,17 +175,25 @@ const Sheet = forwardRef((props, ref) => {
         }
     }), []);
     useEffect(() => {
-    }, []);
+        if (_render.current)
+            clearTimeout(_render.current);
+        if (!visible) {
+            _render.current = setTimeout(() => setRender(false), 1000);
+        }
+        else {
+            setRender(true);
+        }
+    }, [visible]);
     if (_errorType == SHEET.Dialog) {
         return _jsxs(_Fragment, { children: [_jsx(With, { "aria-hidden": !visible, className: `zuz-overlay fixed fill`, animate: {
                         transition: TRANSITIONS.FadeIn,
                         when: visible,
                         duration: 0.1,
-                    } }), _jsxs(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: [_jsx(Cover, { ...({ when: loading }) }), _jsxs(With, { className: `sheet-head flex aic rel`, children: [_jsx(With, { className: `sheet-${title ? `title` : `dot`}`, children: title || `` }), _jsx(With, { tag: `button`, onClick: (e) => setVisible(false), className: `sheet-closer abs`, children: "\u00D7" })] }), _jsx(With, { className: `sheet-body flex aic rel`, children: msg }), action && _jsx(With, { className: `sheet-footer flex aic rel`, children: action.map((a, i) => _jsx(With, { onClick: a.handler, tag: `button`, as: `sheet-action-btn`, children: a.label })) })] }), props.editor && visible && _jsx(ComponentEditor, { element: `.zuz-sheet`, title: `Sheet`, attrs: {
+                    } }), _jsxs(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: [_jsx(Cover, { ...({ when: loading }) }), _jsxs(With, { className: `sheet-head flex aic rel`, children: [_jsx(With, { className: `sheet-${title ? `title` : `dot`}`, children: title || `` }), _jsx(With, { tag: `button`, onClick: (e) => setVisible(false), className: `sheet-closer abs`, children: "\u00D7" })] }), _jsx(With, { className: `sheet-body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? msg : null }), action && _jsx(With, { className: `sheet-footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`, children: action.map((a, i) => _jsx(With, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), tag: `button`, as: `sheet-action-btn`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] }), props.editor && visible && _jsx(ComponentEditor, { element: `.zuz-sheet`, title: `Sheet`, attrs: {
                         ...sheetProps,
                         ...(_errorType == SHEET.Dialog ? dialogProps : toastProps)
                     } })] });
     }
-    return _jsx(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: visible ? msg : null });
+    return _jsx(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} abs`.trim(), ...rest, ref: divRef, children: visible ? msg : null });
 });
 export default Sheet;

package/dist/comps/tabview.d.ts

@@ -1,14 +1,18 @@
 import { ReactNode } from "react";
 import { BaseProps } from "../types/interfaces";
 export interface Tab {
-    onSelect: (index: number) => void;
+    onSelect: (tab: Tab, index: number) => void;
+    tag?: string;
+    key?: string;
     label: string | ReactNode | ReactNode[];
     body: string | ReactNode | ReactNode[];
     render?: boolean;
 }
 export interface TabViewProps {
+    onChange?: (tab: Tab, index: number) => void;
     speed?: number;
     tabs: Tab[];
+    prerender?: boolean;
 }
 export interface TabViewHandler {
     setTab: (index: number) => void;

package/dist/comps/tabview.js

@@ -5,27 +5,37 @@ import { uuid } from "../funs";
 import { useResizeObserver } from "../hooks";
 import ComponentEditor from "./editor";
 const TabView = forwardRef((props, ref) => {
-    const { as, tabs, speed, ...rest } = props;
+    const { as, tabs: _tabs, speed, prerender, onChange, ...rest } = props;
+    const tabs = useMemo(() => _tabs.reduce((ts, t) => {
+        ts.push({
+            ...t,
+            key: t.key || uuid()
+        });
+        return ts;
+    }, []), [_tabs]);
     const tabview = useRef(null);
     const tabViewID = useMemo(() => uuid(), []);
     const [activeTab, setActiveTab] = useState(0);
     const size = useResizeObserver(tabview);
+    const render = useMemo(() => prerender == undefined || prerender == true ? true : false, []);
     const handleTabClick = (index) => {
         setActiveTab(index);
     };
     useEffect(() => {
+        onChange && onChange(tabs[0], 0);
     }, []);
     return _jsxs(_Fragment, { children: [_jsxs(With, { ref: tabview, className: `tabview flex cols`, ...rest, children: [_jsx(With, { className: `tab-head flex aic`, children: tabs.map((tab, index) => _jsx(With, { tag: `button`, className: `tab-label rel ${index === activeTab ? 'active' : ''}`.trim(), onClick: () => {
                                 handleTabClick(index);
-                                tab.onSelect && tab.onSelect(index);
-                            }, children: tab.label }, `tab-label-${tabViewID}-${index}`)) }), _jsx(With, { className: `tab-content rel`, children: _jsx(With, { className: `tabs-track flex aic`, style: { transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)` }, children: tabs.map((tab, index) => {
+                                tab.onSelect && tab.onSelect(tab, index);
+                                onChange && onChange(tab, index);
+                            }, children: tab.label }, `tab-${tabViewID}-${tab.key}`)) }), _jsx(With, { className: `tab-content rel`, children: _jsx(With, { className: `tabs-track flex aic`, style: { transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)` }, children: tabs.map((tab, index) => {
                                 return _jsx(With, { className: `tab-body rel`, style: {
                                         width: size.width,
                                         minWidth: size.width,
                                         maxWidth: size.width,
                                         opacity: index === activeTab ? 1 : 0,
                                         transition: 'opacity 0.5s ease',
-                                    }, children: tab.body }, `tab-body-${tabViewID}-${index}`);
+                                    }, children: (render || activeTab == index) && tab.body }, `tab-body-${tabViewID}-${tab.key}`);
                             }) }) })] }), props.editor && _jsx(ComponentEditor, { element: `.tabview`, title: `TabView`, attrs: {
                     "@group-Head": {
                         label: "Head",

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

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { BaseProps } from "../../types/interfaces";
+export interface TreeNodeIcons {
+    dirOpen: ReactNode;
+    dirClose: ReactNode;
+    arrowOpen: ReactNode;
+    arrowClose: ReactNode;
+}
+export interface TreeViewProps {
+    tag?: string;
+    roots: string[];
+    nodes: TreeNode[];
+    onSelect: (tag: string) => void;
+    icons?: TreeNodeIcons;
+    selected?: string;
+}
+export interface TreeViewHandler {
+    getSelected?: () => String;
+}
+export interface TreeNode {
+    tag: string;
+    label: string;
+    under?: string;
+    selected?: string;
+    expanded?: boolean;
+}
+declare const TreeView: import("react").ForwardRefExoticComponent<TreeViewProps & BaseProps & import("react").RefAttributes<TreeViewHandler>>;
+export default TreeView;

package/dist/comps/treeview/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import With from "../base";
+import TreeItem from "./item";
+const TreeView = forwardRef((props, ref) => {
+    const { as, nodes, onSelect, tag: treeViewTag, icons, roots, selected: _selected, ...rest } = props;
+    const [selected, setSelected] = useState(_selected);
+    useImperativeHandle(ref, () => ({
+        getSelected: () => selected
+    }), [onSelect]);
+    const handleSelect = (tag) => {
+        setSelected(tag);
+        onSelect && onSelect(tag);
+    };
+    useEffect(() => {
+        if (selected != _selected) {
+            setSelected(_selected);
+        }
+    }, [_selected]);
+    return _jsx(With, { className: `treeview flex cols`, children: nodes
+            .filter(node => roots.includes(node.tag))
+            .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: handleSelect, icons: icons, meta: node, nodes: nodes }, `tree-node-${node.tag}`)) });
+});
+export default TreeView;

package/dist/comps/treeview/item.d.ts

@@ -0,0 +1,15 @@
+import { TreeNode, TreeNodeIcons } from ".";
+import { BaseProps } from "../../types/interfaces";
+export interface TreeItemProps {
+    treeTag: string;
+    meta: TreeNode;
+    nodes: TreeNode[];
+    onSelect: (tag: string) => void;
+    selected?: String;
+    icons?: TreeNodeIcons;
+}
+export interface TreeItemHandler {
+    onSelect?: (v: TreeNode) => void;
+}
+declare const TreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & BaseProps & import("react").RefAttributes<TreeItemHandler>>;
+export default TreeItem;

package/dist/comps/treeview/item.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import With from "../base";
+const TreeItem = forwardRef((props, ref) => {
+    const { as, meta, nodes, icons, onSelect, treeTag, selected, ...rest } = props;
+    const { tag, label, under } = meta;
+    const [isOpen, setIsOpen] = useState(tag == `root`);
+    const toggle = () => {
+        localStorage.setItem(`--tn${treeTag}-${tag}`, isOpen ? `0` : `1`);
+        setIsOpen(!isOpen);
+    };
+    useEffect(() => {
+        if (tag == `root` && !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(With, { as: `tree-node tree-node-${tag} flex cols`, children: [_jsxs(With, { as: `--node --node-${tag} flex aic${selected == tag ? ` --selected` : ``}`, children: [_jsx(With, { tag: `button`, onClick: toggle, className: `--node-aro-btn`, children: _jsx(With, { className: `--node-aro-icon icon-${isOpen ? icons?.arrowOpen : icons?.arrowClose}` }) }), _jsxs(With, { tag: `button`, className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [_jsx(With, { className: `--node-icon icon-${isOpen ? icons?.dirOpen : icons?.dirClose}` }), _jsx(With, { tag: `h1`, className: `--node-label`, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(With, { 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 }, `tree-node-${node.tag}`)) })] });
+});
+export default TreeItem;