@zuzjs/ui 0.5.0 → 0.5.2

package/dist/comps/drawer.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import With from "./base";
 import { DRAWER_SIDE, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
 const Drawer = forwardRef((props, ref) => {
     const { as, from, speed, children, prerender, ...rest } = props;
+    const [render, setRender] = useState(undefined == prerender ? true : prerender);
     const [visible, setVisible] = useState(false);
     const divRef = useRef(null);
     const [content, setContent] = useState(children);
+    useEffect(() => {
+        setContent(children);
+    }, [children]);
     const style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:
@@ -44,6 +48,6 @@ const Drawer = forwardRef((props, ref) => {
                     when: visible,
                     curve: TRANSITION_CURVES.EaseInOut,
                     duration: speed || .5,
-                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(With, { className: "drawer-handle" }) : null, visible && content] })] });
+                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(With, { className: "drawer-handle" }) : null, render ? content : visible ? content : null] })] });
 });
 export default Drawer;

package/dist/comps/tabview.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { BaseProps } from "../types/interfaces";
 export interface Tab {
     onSelect: (index: number) => void;
-    label: string;
+    label: string | ReactNode | ReactNode[];
     body: string | ReactNode | ReactNode[];
     render?: boolean;
 }

package/dist/funs/css.js

@@ -55,7 +55,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`
+            `flex`, `opacity`, `z-index`, `zIndex`, `color`, `line-height`, `anim`, `scale`, `saturate`
         ];
         this.keysWithoutCommaToSpace = [
             `transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`,
@@ -546,7 +546,7 @@ class CSS {
                             _out = _out.replace(`;`, `${important};`);
                         }
                         else {
-                            const __value = `${val}${key == `extend` ? `` : self.makeUnit(key, val)}`;
+                            const __value = `${val}${self.IGNORE.includes(key) ? `` : self.makeUnit(key, val)}`;
                             _out = self.DIRECT[key].includes(`__VALUE__`) ?
                                 self.DIRECT[key].replace(/__VALUE__/g, __value).replace(`;`, `${important};`) : self.DIRECT[key];
                         }

package/dist/funs/index.d.ts

@@ -35,4 +35,4 @@ export declare const withTime: (fun: (...args: any[]) => any) => {
 export declare const time: (stamp?: number, format?: string) => string;
 export declare const arrayRand: (arr: any[]) => any;
 export declare const formatNumber: ({ number, locale, style, decimal, currency }: FormatNumberParams) => string;
-export declare const copyToClipboard: (text: string) => Promise<void>;
+export declare const copyToClipboard: (text: string) => Promise<unknown>;

package/dist/funs/index.js

@@ -190,4 +190,26 @@ export const formatNumber = ({ number, locale = 'en-US', style = `decimal`, deci
         maximumFractionDigits: +number % 1 > 0 ? 2 : 0
     }).format(+number);
 };
-export const copyToClipboard = (text) => navigator.clipboard.writeText(text);
+export const copyToClipboard = (text) => {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+        return navigator.clipboard.writeText(text);
+    }
+    else {
+        return new Promise((resolve, reject) => {
+            const textarea = document.createElement("textarea");
+            textarea.value = text;
+            textarea.style.position = "fixed";
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            try {
+                document.execCommand("copy");
+                resolve(`Copied to clipboard`);
+            }
+            catch (err) {
+                reject(err);
+            }
+            document.body.removeChild(textarea);
+        });
+    }
+};

package/dist/funs/stylesheet.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.5.0",
+    "version": "0.5.2",
     "keywords": [
         "react",
         "zuz",