@zuzjs/ui 0.8.6 → 0.8.7

package/dist/cjs/comps/Crumb/index.d.ts

@@ -1,5 +1,5 @@
 declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     items: import("./types").CrumbItem[];
     maxItems?: number;
-} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
 export default Crumb;

package/dist/cjs/comps/Drawer/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { DRAWER_SIDE } from "../../types/enums";
+import { DRAWER_SIDE, TRANSITION_CURVES } from "../../types/enums";
 import { BoxProps } from "../Box";
 import { DrawerHandler } from "./types";
 declare const Drawer: import("react").ForwardRefExoticComponent<BoxProps & {
@@ -9,6 +9,7 @@ declare const Drawer: import("react").ForwardRefExoticComponent<BoxProps & {
     children?: string | ReactNode | ReactNode[];
     prerender?: boolean;
     margin?: number;
+    animation?: TRANSITION_CURVES;
     onClose?: () => void;
 } & import("react").RefAttributes<DrawerHandler>>;
 export default Drawer;

package/dist/cjs/comps/Drawer/index.js

@@ -6,7 +6,7 @@ import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
 import Overlay from "../Overlay";
 const Drawer = forwardRef((props, ref) => {
-    const { from, speed, children, margin, prerender, onClose, ...pops } = props;
+    const { from, speed, children, margin, animation, prerender, onClose, ...pops } = props;
     const [render, setRender] = useState(undefined == prerender ? true : prerender);
     const [visible, setVisible] = useState(false);
     const divRef = useRef(null);
@@ -60,7 +60,7 @@ const Drawer = forwardRef((props, ref) => {
                     from: { ..._style.from, opacity: 0 },
                     to: { ..._style.to, opacity: 1 },
                     when: visible,
-                    curve: TRANSITION_CURVES.EaseInOut,
+                    curve: animation || TRANSITION_CURVES.EaseInOut,
                     duration: speed || .5,
                 }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(Box, { className: `--handle` }) : null, render ? content : visible ? content : null] })] });
 });

package/dist/cjs/comps/Drawer/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { DRAWER_SIDE } from "../../types/enums";
+import { DRAWER_SIDE, TRANSITION_CURVES } from "../../types/enums";
 import { BoxProps } from "../Box";
 export type DrawerProps = BoxProps & {
     as?: string;
@@ -8,6 +8,7 @@ export type DrawerProps = BoxProps & {
     children?: string | ReactNode | ReactNode[];
     prerender?: boolean;
     margin?: number;
+    animation?: TRANSITION_CURVES;
     onClose?: () => void;
 };
 export interface DrawerHandler {

package/dist/cjs/comps/List/index.d.ts

@@ -6,5 +6,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     direction?: "cols" | "rows";
     seperator?: import("react").ReactNode;
     ol?: boolean;
-} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
 export default List;

package/dist/cjs/comps/Sheet/index.js

@@ -178,7 +178,7 @@ const Sheet = forwardRef((props, ref) => {
         }
     }, [visible]);
     if (sheetType == SHEET.Dialog) {
-        return _jsxs(_Fragment, { children: [_jsx(Overlay, { when: visible }), _jsxs(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} fixed`.trim(), style: style, fx: buildAnimation, ...rest, ref: innerRef, children: [_jsx(Cover, { when: loading, spinner: spinner, message: loadingMessage }), _jsxs(Box, { className: `--head flex aic rel`, children: [_jsx(Box, { className: `--${title ? `title` : `dot`} flex aic rel`, children: title || `` }), _jsx(Button, { onClick: (e) => setVisible(false), className: `--closer abs`, children: "\u00D7" })] }), _jsx(Box, { className: `--body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? renderMessage : null }), action && _jsx(Box, { className: `--footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`.trim(), children: action.map((a, i) => _jsx(Button, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), className: `--action`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] })] });
+        return _jsxs(_Fragment, { children: [_jsx(Overlay, { when: visible }), _jsxs(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${visible ? `is-visible` : ``} ${className} fixed`.trim(), style: style, fx: buildAnimation, ...rest, ref: innerRef, children: [_jsx(Cover, { when: loading, spinner: spinner, message: loadingMessage }), _jsxs(Box, { className: `--head flex aic rel`, children: [_jsx(Box, { className: `--${title ? `title` : `dot`} flex aic rel`, children: title || `` }), _jsx(Button, { onClick: (e) => setVisible(false), className: `--closer abs`, children: "\u00D7" })] }), _jsx(Box, { className: `--body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? renderMessage : null }), action && _jsx(Box, { className: `--footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`.trim(), children: action.map((a, i) => _jsx(Button, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), className: `--action`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] })] });
     }
     return _jsx(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} abs`.trim(), style: style, ...rest, fx: buildAnimation, ref: innerRef, children: visible ? msg : null });
 });

package/dist/cjs/funs/css.js

@@ -935,6 +935,8 @@ export const getAnimationCurve = (curve) => {
     switch (curve.toUpperCase()) {
         case TRANSITION_CURVES.Bounce:
             return `var(--bounce)`;
+        case TRANSITION_CURVES.Liquid:
+            return `var(--liquid)`;
         case TRANSITION_CURVES.Spring:
             // return `cubic-bezier(0.2, -0.36, 0, 1.46)`
             return `var(--spring)`;

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

@@ -29,6 +29,6 @@ export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';
 export { default as useTruncateText } from './useTruncateText';
-export { default as useUploader } from './useUploader';
+export { QueItem as UploadQueItem, Status as UploadStatus, default as useUploader, type Uploadify } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket, type WebSocketOptions } from './useWebSocket';

package/dist/cjs/hooks/index.js

@@ -30,6 +30,6 @@ export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';
 export { default as useTruncateText } from './useTruncateText';
-export { default as useUploader } from './useUploader';
+export { Status as UploadStatus, default as useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket } from './useWebSocket';

package/dist/cjs/hooks/useSlider.d.ts

@@ -2,6 +2,6 @@ declare const useSlider: () => {
     push: (key: string) => void;
     goBack: () => void;
     prevKey: string | null;
-    direction: "left" | "right";
+    direction: "right" | "left";
 };
 export default useSlider;

package/dist/cjs/hooks/useUploader.d.ts

@@ -5,7 +5,8 @@ export declare enum Status {
     Idle = 0,
     FetchingServer = 1,
     Uploading = 2,
-    Saving = 3
+    Saving = 3,
+    Saved = 4
 }
 export interface QueItem {
     ID: string;
@@ -37,9 +38,12 @@ export type Uploadify = {
 export interface Uploader {
     apiUrl: string;
     onChange?: (file: QueItem | null) => void;
+    onComplete?: (index: number, que: QueItem[], currentFile: QueItem | null) => void;
+    onError?: (index: number, que: QueItem[], currentFile: QueItem | null) => void;
     onQueFinished?: () => void;
 }
 declare const useUploader: (conf: Uploader) => {
+    get: () => import("react").RefObject<Uploadify>;
     getQue: () => QueItem[];
     addToQue: (f: dynamic) => void;
 };

package/dist/cjs/hooks/useUploader.js

@@ -1,4 +1,6 @@
+"use client";
 import { getCancelToken, withPost } from "@zuzjs/core";
+import { useRef } from "react";
 import { uuid } from "..";
 export var Status;
 (function (Status) {
@@ -7,21 +9,22 @@ export var Status;
     Status[Status["FetchingServer"] = 1] = "FetchingServer";
     Status[Status["Uploading"] = 2] = "Uploading";
     Status[Status["Saving"] = 3] = "Saving";
+    Status[Status["Saved"] = 4] = "Saved";
 })(Status || (Status = {}));
 const useUploader = (conf) => {
     const { apiUrl, onChange, onQueFinished } = conf;
-    const self = {
+    const self = useRef({
         que: [],
         index: -1,
         speed: 0,
         stamp: null,
         token: null,
         status: Status.Idle
-    };
+    });
     const sync = () => onChange?.(currentFile());
     const importFile = () => { };
     const uploadFile = () => {
-        self.stamp = Date.now();
+        self.current.stamp = Date.now();
         const file = currentFile();
         const formData = new FormData();
         formData.append("ID", file.ID);
@@ -30,47 +33,54 @@ const useUploader = (conf) => {
         formData.append("token", file.server.token);
         formData.append('file', file.file);
         formData.append('fs', file.file.size.toString());
-        self.cancelToken = getCancelToken();
-        withPost(`${self.que[self.index].server.uri}/receive`, formData, 86400, true, (ev) => {
-            console.log(ev);
+        self.current.cancelToken = getCancelToken();
+        withPost(`${self.current.que[self.current.index].server.uri}/receive`, formData, 86400, true, undefined, (ev) => {
+            self.current.que[self.current.index].status = Status.Uploading;
+            onChange?.({ ...currentFile(), progress: (ev.progress || 0) });
         })
-            .catch(resp => {
-            console.log(`Uploaded`, resp);
+            .then(resp => {
+            // console.log(`Uploaded`, resp)
+            self.current.que[self.current.index].progress = 1;
+            self.current.que[self.current.index].status = Status.Saved;
+            self.current.status = Status.Idle;
+            sync();
+            Que();
         })
             .catch(err => {
-            self.que[self.index].status = Status.Error;
-            self.status = Status.Idle;
+            // console.error(`UploadFailed`, err)
+            self.current.que[self.current.index].status = Status.Error;
+            self.current.status = Status.Idle;
             sync();
             Que();
         });
     };
     const getServer = (force) => {
-        self.que[self.index].status = Status.FetchingServer;
+        self.current.que[self.current.index].status = Status.FetchingServer;
         sync();
         withPost(`${apiUrl}get_server`, { size: currentFile().file.size })
             .then((resp) => {
-            self.que[self.index].server = resp.server;
-            self.que[self.index].status = Status.Uploading;
+            self.current.que[self.current.index].server = resp.server;
+            self.current.que[self.current.index].status = Status.Uploading;
             sync();
             uploadFile();
         })
             .catch((err) => {
-            self.que[self.index].status = Status.Error;
-            self.status = Status.Idle;
+            self.current.que[self.current.index].status = Status.Error;
+            self.current.status = Status.Idle;
             sync();
             Que();
         });
     };
-    const currentFile = () => self.que[self.index];
-    const getQue = () => self.que;
+    const currentFile = () => self.current.que[self.current.index];
+    const getQue = () => self.current.que;
     const Que = () => {
-        if (self.status == Status.Idle &&
-            (self.que.length - 1) > self.index) {
-            self.status = Status.Uploading;
-            self.index++;
-            self.que[self.index].status = Status.Uploading;
+        if (self.current.status == Status.Idle &&
+            (self.current.que.length - 1) > self.current.index) {
+            self.current.status = Status.Uploading;
+            self.current.index++;
+            self.current.que[self.current.index].status = Status.Uploading;
             sync();
-            if (self.que[self.index].remote)
+            if (self.current.que[self.current.index].remote)
                 importFile();
             else
                 getServer(true);
@@ -79,7 +89,7 @@ const useUploader = (conf) => {
             onQueFinished?.();
     };
     const addToQue = (f) => {
-        self.que.push({
+        self.current.que.push({
             ID: uuid(),
             file: f.file,
             dir: f.dir,
@@ -94,6 +104,7 @@ const useUploader = (conf) => {
         Que();
     };
     return {
+        get: () => self,
         getQue,
         addToQue,
     };

package/dist/cjs/types/enums.d.ts

@@ -34,6 +34,7 @@ export declare enum SHEET_ACTION_POSITION {
 }
 export declare enum TRANSITION_CURVES {
     Spring = "SPRING",
+    Liquid = "LIQUID",
     EaseInOut = "EASEINOUT",
     Bounce = "BOUNCE"
 }

package/dist/cjs/types/enums.js

@@ -45,6 +45,7 @@ export var TRANSITION_CURVES;
     // Ease = "EASE",
     // EaseIn = "EASEIN",
     // EaseOut = "EASEOUT",
+    TRANSITION_CURVES["Liquid"] = "LIQUID";
     TRANSITION_CURVES["EaseInOut"] = "EASEINOUT";
     TRANSITION_CURVES["Bounce"] = "BOUNCE";
     // Linear = "LINEAR",