@zuzjs/ui 0.7.5 → 0.7.7

package/dist/esm/comps/TabView/body.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@zuzjs/ui';
 import { useEffect, useRef, useState } from 'react';
+import Box from '../Box';
 const TabBody = ({ size, index, active, render, content }) => {
     const _ref = useRef(null);
     const [style, setStyle] = useState({});

package/dist/esm/comps/TabView/index.d.ts

@@ -1,6 +1,5 @@
 import { Tab, TabViewHandler } from "./types";
-import { BoxProps } from "../Box";
-declare const TabView: import("react").ForwardRefExoticComponent<BoxProps & {
+declare const TabView: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     onChange?: (tab: Tab, index: number) => void;
     speed?: number;
     variant?: "fixed" | "default";

package/dist/esm/comps/TabView/index.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { SelectTabs } from "../..";
 import { uuid } from "../../funs";
 import { useBase, useResizeObserver } from "../../hooks";
 import Box from "../Box";
-import { SelectTabs } from "../..";
 import TabBody from "./body";
 const TabView = forwardRef((props, ref) => {
     const { tabs: _tabs, speed, prerender, variant, onChange, ...rest } = props;

package/dist/esm/comps/Table/col.d.ts

@@ -1,9 +1,10 @@
 import { CSSProperties } from "react";
-import type { Column } from "./types";
 import { PubSub } from "../..";
+import type { Column } from "./types";
 declare const TColumn: <T>(props: Column<T> & {
     idx: number;
     style?: CSSProperties;
     pubsub: PubSub;
+    sortBy?: string | null;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TColumn;

package/dist/esm/comps/Table/col.js

@@ -1,10 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SVGIcons } from "../..";
 import Box from "../Box";
 const TColumn = (props) => {
-    const { idx, id, as, weight, style, value, render, resize, sort } = props;
-    return _jsx(Box, { style: {
+    const { idx, id, as, weight, style, value, render, resize, sortBy, sortable, onSort } = props;
+    const [_sort, setSort] = useState(0);
+    const _onSort = () => {
+        if (sortable) {
+            onSort?.(String(id), _sort == 1 ? -1 : 1);
+            setSort(prev => prev == 1 ? -1 : 1);
+        }
+    };
+    return _jsxs(Box, { style: {
             flex: weight || 1,
             ...style
-        }, as: `--col flex aic ${as || ``}`, children: value });
+        }, as: `--col flex aic ${as || ``} ${sortable ? `--sortable` : ``}`, onClick: _onSort, children: [_jsx(Box, { children: value }), idx == -1
+                && sortable
+                && sortBy == id
+                && _jsx(Box, { as: `--arrow flex aib`, children: _sort == 1 ? SVGIcons.arrowUp : SVGIcons.arrowDown })] });
 };
 export default TColumn;

package/dist/esm/comps/Table/index.js

@@ -1,14 +1,15 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef } from "react";
-import Box from "../Box";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { PubSub, uuid } from "../..";
 import { useBase } from "../../hooks";
-import TRow from "./row";
+import Box from "../Box";
 import Pagination from "../Pagination";
 import { PaginationStyle } from "../Pagination/types";
-import { PubSub, uuid } from "../..";
+import TRow from "./row";
 // const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
 const Table = (props, ref) => {
-    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, animateRows, header, showPaginationOnZeroPageCount, rowClassName, selectableRows, hoverable, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
+    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, paginationHash, showPaginationOnZeroPageCount, animateRows, header, rowClassName, selectableRows, hoverable, sortBy, onSort, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
     const _schemaParsed = useMemo(() => schema.reduce((prev, c) => {
         prev[c.id] = {
             flex: c.weight || 1,
@@ -28,7 +29,12 @@ const Table = (props, ref) => {
     const _tableRef = useRef(null);
     const pubsub = useMemo(() => new PubSub(), []);
     const rowKeys = useMemo(() => rows.map(() => uuid()), [rows]);
-    return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, styles: _schemaParsed }), rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys[index]}-${schema[0].id}`)), pagination && _jsx(Box, { as: `--row flex aic --row-footer`, children: _jsx(Pagination, { renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
+    const [_sortBy, setSortBy] = useState(sortBy || null);
+    const handleSort = (col, dir) => {
+        setSortBy(col);
+        onSort?.(col, dir);
+    };
+    return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { sortBy: _sortBy, onSort: handleSort, tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, styles: _schemaParsed }), rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys[index]}-${schema[0].id}`)), pagination && _jsx(Box, { as: `--row flex aic --row-footer`, children: _jsx(Pagination, { hash: paginationHash, renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, startPage: currentPage, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
 };
 const ForwardedTable = forwardRef(Table);
 export default ForwardedTable;

package/dist/esm/comps/Table/row.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useMemo, useRef } from "react";
-import Box from "../Box";
-import TColumn from "./col";
-import { CHECKBOX, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
 import { useDelayed } from "../../hooks";
+import { CHECKBOX, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+import Box from "../Box";
 import CheckBox from "../CheckBox";
+import TColumn from "./col";
 const TRow = (props) => {
-    const { index, pubsub, schema, data, ids, styles, animate, selectable, tableRef, rowClassName, onSelect, onContextMenu } = props;
+    const { index, pubsub, schema, data, ids, styles, animate, sortBy, selectable, tableRef, rowClassName, onSort, onSelect, onContextMenu } = props;
     const mounted = useDelayed();
     const _animation = useMemo(() => ({
         transition: TRANSITIONS.SlideInBottom,
@@ -75,11 +75,11 @@ const TRow = (props) => {
     }, []);
     return _jsxs(Box, { onContextMenu: e => onContextMenu ? onContextMenu(e, data) : null, "data-index": index, ...(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 _jsxs(Fragment, { children: [selectable && i == 0 && Selector(-1, `--selector-${c.id}`, `all`), _jsx(TColumn, { idx: -1, 
+                return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(-1, `--selector-${c.id}`, `all`), _jsx(TColumn, { idx: -1, onSort: onSort, sortBy: sortBy, 
                             // value={renderWhenHeader && render ? render!(index == -1 ? c as dynamicObject : data as T, index) : value as string} 
                             value: value, ...cc, pubsub: pubsub, style: styles[c.id] })] }, `--col-${c.id}`);
             }), index > -1 && ids && data && schema.map((c, i) => {
-                return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(i, `--selector-${c.id}`, c.id.toString()), ids.includes(String(c.id)) ? _jsx(TColumn, { pubsub: pubsub, idx: i, id: String(c.id), style: styles[String(c.id)], value: c.render ? c.render(data, index) : data[c.id] }) : null] }, `--${String(c.id)}-val-${i}`);
+                return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(i, `--selector-${c.id}`, c.id.toString()), ids.includes(String(c.id)) ? _jsx(TColumn, { pubsub: pubsub, idx: i, id: String(c.id), style: styles[String(c.id)], value: c.render ? c.render(data, index) : data[String(c.id).includes(`.`) ? String(c.id).split(`.`).reverse()[0] : c.id] }) : null] }, `--${String(c.id)}-val-${i}`);
             })] });
 };
 export default TRow;

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

@@ -1,9 +1,10 @@
 import { ReactNode, RefObject } from "react";
-import { BoxProps } from "../Box";
+import { PubSub } from "../..";
 import { dynamicObject } from "../../types";
+import { BoxProps } from "../Box";
 import { PaginationCallback } from "../Pagination/types";
-import { PubSub } from "../..";
 export type RowSelectCallback<T> = (row: T, selected: boolean) => void;
+export type TableSortCallback = (col: string, dir: number) => void;
 export type Row<T> = {
     index: number;
     schema: Column<T>[];
@@ -13,14 +14,16 @@ export type Row<T> = {
     data?: T;
     rowClassName?: string;
     selectable?: boolean;
+    sortBy?: string | null;
     onSelect?: RowSelectCallback<T>;
+    onSort?: TableSortCallback;
     pubsub: PubSub;
     tableRef?: RefObject<HTMLDivElement | null>;
     onContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
 };
 export type Column<T> = {
     id: string | number;
-    value: string | ReactNode | dynamicObject;
+    value?: string | ReactNode | dynamicObject;
     weight?: number;
     w?: number | string;
     maxW?: number | string;
@@ -29,7 +32,8 @@ export type Column<T> = {
     maxH?: number | string;
     minH?: number | string;
     resize?: boolean;
-    sort?: boolean;
+    sortable?: boolean;
+    onSort?: TableSortCallback;
     as?: string;
     renderWhenHeader?: boolean;
     render?: (row: T, index: number) => ReactNode;
@@ -42,12 +46,15 @@ export type TableProps<T> = BoxProps & {
     rowClassName?: string;
     currentPage?: number;
     pagination?: boolean;
+    paginationHash?: number | null;
     showPaginationOnZeroPageCount?: boolean;
     animateRows?: boolean;
     header?: boolean;
+    sortBy?: string;
     selectableRows?: boolean;
     hoverable?: boolean;
     onRowSelectToggle?: RowSelectCallback<T>;
     onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
     onPageChange?: PaginationCallback;
+    onSort?: TableSortCallback;
 };

package/dist/esm/comps/TextWheel/index.js

@@ -1,6 +1,6 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import Box from '../Box';
 import Span from '../Span';
 const TextWheel = forwardRef((props, ref) => {
@@ -34,11 +34,11 @@ const TextWheel = forwardRef((props, ref) => {
         // console.log(value)
         _setValue(value || 0);
     }, [value]);
-    return _jsxs(Box, { className: `text-wheel flex aic jcc rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
+    return _jsxs(Box, { className: `--text-wheel flex aic jcc rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
                 if (isNaN(parseInt(char, 10))) {
-                    return _jsx(Span, { className: "wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
+                    return _jsx(Span, { className: "--wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
                 }
-                return _jsx(Span, { "data-value": char, className: `wheel-char grid ${index > char.toString().split('').length - 3 ? 'wheel-fraction' : ''}`.trim(), children: _jsxs(Span, { className: `wheel-char-track wheel-track-${direction || `down`} grid`, style: {
+                return _jsx(Span, { "data-value": char, className: `--wheel-char grid ${index > char.toString().split('').length - 3 ? '--wheel-fraction' : ''}`.trim(), children: _jsxs(Span, { className: `--wheel-char-track --wheel-track-${direction || `down`} grid`, style: {
                             '--v': char
                         }, children: [_jsx(Span, { children: !direction || direction == `down` ? 0 : 9 }), (!direction || direction == `down` ?
                                 [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]

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;

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();

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

@@ -1,5 +1,5 @@
-import { Props } from "../types";
 import { ComponentPropsWithRef, CSSProperties, JSX } from "react";
+import { Props } from "../types";
 declare const useBase: <T extends keyof JSX.IntrinsicElements>(props: Props<T>) => {
     style: CSSProperties;
     className: string;

package/dist/esm/hooks/useBase.js

@@ -1,7 +1,7 @@
 import { cleanProps, css } from "../funs";
 import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
-import useDrag from "./useDrag";
 import { cssFilterKeys, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
+import useDrag from "./useDrag";
 const buildSkeletonStyle = (s) => {
     const makeValue = (v, unit = `px`) => {
         return v ?
@@ -29,12 +29,12 @@ const buildSkeletonStyle = (s) => {
     return style;
 };
 const useBase = (props) => {
-    const { as, animate, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
+    const { as, fx, animate, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
     let cx = [];
     if (as) {
         cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
     }
-    const { transition, from, to, when, duration, delay, curve } = animate || {};
+    const { transition, from, to, when, duration, delay, curve } = fx || animate || {};
     let _style = {};
     if (undefined === when) {
         _style = transition ? getAnimationTransition(transition, true) : { ...from, ...to };

package/dist/esm/src/comps/TabView/body.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@zuzjs/ui';
 import { useEffect, useRef, useState } from 'react';
+import Box from '../Box';
 const TabBody = ({ size, index, active, render, content }) => {
     const _ref = useRef(null);
     const [style, setStyle] = useState({});

package/dist/esm/src/hooks/useBase.d.ts

@@ -1,5 +1,5 @@
-import { Props } from "../types";
 import { ComponentPropsWithRef, CSSProperties, JSX } from "react";
+import { Props } from "../types";
 declare const useBase: <T extends keyof JSX.IntrinsicElements>(props: Props<T>) => {
     style: CSSProperties;
     className: string;

package/dist/esm/src/hooks/useBase.js

@@ -1,7 +1,7 @@
 import { cleanProps, css } from "../funs";
 import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
-import useDrag from "./useDrag";
 import { cssFilterKeys, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
+import useDrag from "./useDrag";
 const buildSkeletonStyle = (s) => {
     const makeValue = (v, unit = `px`) => {
         return v ?
@@ -29,12 +29,12 @@ const buildSkeletonStyle = (s) => {
     return style;
 };
 const useBase = (props) => {
-    const { as, animate, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
+    const { as, fx, animate, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
     let cx = [];
     if (as) {
         cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
     }
-    const { transition, from, to, when, duration, delay, curve } = animate || {};
+    const { transition, from, to, when, duration, delay, curve } = fx || animate || {};
     let _style = {};
     if (undefined === when) {
         _style = transition ? getAnimationTransition(transition, true) : { ...from, ...to };