@edu-tosel/design 1.0.7 → 1.0.9

package/card/template/RowCard.js

@@ -11,7 +11,7 @@ export default function RowCard({ row, fields, sizes, }) {
             height: "xs",
             boundary: "none",
             rounded: "none",
-        }, children: _jsxs("div", { className: "flex items-center h-full", children: [entries.map(([type, key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100` ?? "auto"}`, children: Array.isArray(type) && type[0] === "select" ? (_jsx(Select, { type: type, entry: [key, value], row: rowState, setRow: setRowState }, key + type + value.toString())) : (_jsx("div", { className: "w-full truncate", children: value ?? "No Data" }, key + value.toString())) }, key))), _jsx("button", { onClick: () => {
+        }, children: _jsxs("div", { className: "flex items-center h-full", children: [entries.map(([type, key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100` ?? "auto"}`, children: Array.isArray(type) && type[0] === "select" ? (_jsx(Select, { type: type, entry: [key, value], row: rowState, setRow: setRowState }, key + type + value.toString())) : (_jsx("div", { className: "w-full truncate", children: value ?? "No Data" }, key)) }, key))), _jsx("button", { onClick: () => {
                         setTempData(row);
                         setView("sideMenu");
                     }, children: "click" })] }) }));

package/interaction/index.d.ts

@@ -1,2 +1,4 @@
-export { default as Exception } from "./Exception";
-export { default as LoadingSpinner } from "./LoadingSpinner";
+export { default as Exception } from "./template/Exception";
+export { default as LoadingSpinner } from "./widget/LoadingSpinner";
+export { default as LoadingJumper } from "./widget/LoadingJumper";
+export { default as NoData } from "./widget/NoData";

package/interaction/index.js

@@ -1,2 +1,4 @@
-export { default as Exception } from "./Exception";
-export { default as LoadingSpinner } from "./LoadingSpinner";
+export { default as Exception } from "./template/Exception";
+export { default as LoadingSpinner } from "./widget/LoadingSpinner";
+export { default as LoadingJumper } from "./widget/LoadingJumper";
+export { default as NoData } from "./widget/NoData";

package/interaction/{Exception.d.ts → template/Exception.d.ts}

@@ -1,2 +1,2 @@
-import { ExceptionProps } from "../interface/Interaction";
+import { ExceptionProps } from "../../interface/Interaction";
 export default function Exception({ exceptions, children }: ExceptionProps): import("react/jsx-runtime").JSX.Element;

package/interaction/{Exception.js → template/Exception.js}

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
 export default function Exception({ exceptions, children }) {
     if (!exceptions)
         return _jsx(_Fragment, { children: children });
     const trueComponents = exceptions
         .filter(([exception]) => exception)
-        .map(([, component]) => component);
+        .map(([, Component], index) => (_jsx(Fragment, { children: Component }, index)));
     return _jsx(_Fragment, { children: trueComponents.length > 0 ? trueComponents : children });
 }

package/interaction/widget/LoadingJumper.d.ts

@@ -0,0 +1 @@
+export default function LoadingJumper(): import("react/jsx-runtime").JSX.Element;

package/interaction/widget/LoadingJumper.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function LoadingJumper() {
+    return (_jsxs("div", { className: "w-full h-full flex items-center justify-center mt-10", children: [_jsx("div", { className: "w-6 h-6 mx-2 bg-gradient-to-br from-[#9979F6] to-[#44C5F3] opacity-40 rounded-full animate-bounce" }), _jsx("div", { className: "w-6 h-6 mx-2 bg-gradient-to-br from-[#9979F6] to-[#44C5F3] opacity-40 rounded-full animate-bounce delay-100" }), _jsx("div", { className: "w-6 h-6 mx-2 bg-gradient-to-br from-[#9979F6] to-[#44C5F3] opacity-40 rounded-full animate-bounce delay-200" })] }));
+}

package/interface/Menu.d.ts

@@ -1,5 +1,6 @@
-import { Log, HTMLElementSetting } from "../interface";
+import { Log, HTMLElementSetting, Button } from "../interface";
 export interface SideMenuProps<K extends string, T extends string | number> {
-    log: Log<K, T>;
     setting: HTMLElementSetting;
+    log?: Log<K, T>;
+    buttons?: Button[];
 }

package/interface/Property.d.ts

@@ -21,7 +21,7 @@ export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
  * @property {"full"} full - Full size
  */
 export type ImageSize = "sub" | "full";
-export type OnClick = () => unknown | Promise<unknown>;
+export type OnClick = () => unknown | (() => Promise<unknown>);
 export type Button = [string, OnClick];
 export type Scripts = {
     script: string;

package/menu/index.d.ts

@@ -1 +1 @@
-export { default as SideMenu } from "./SideMenu";
+export { default as SideMenu } from "./template/SideMenu";

package/menu/index.js

@@ -1 +1 @@
-export { default as SideMenu } from "./SideMenu";
+export { default as SideMenu } from "./template/SideMenu";

package/menu/template/SideMenu.d.ts

@@ -0,0 +1,2 @@
+import { SideMenuProps } from "../../interface/Menu";
+export default function SideMenu<K extends string, T extends string | number>({ log, setting, buttons, }: SideMenuProps<K, T>): import("react/jsx-runtime").JSX.Element;

package/menu/template/SideMenu.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useWidgetStore } from "../../store";
+import { cn } from "../../util";
+import HTMLElement from "../widget/HTMLElement";
+export default function SideMenu({ log, setting, buttons, }) {
+    const { tempData, setTempData, clearTempData, events, removeView } = useWidgetStore();
+    const isOpen = events.some(({ event }) => event === "sideMenu");
+    const positions = "absolute top-20 right-0";
+    const paddings = "pt-8";
+    const sizes = `${isOpen ? "w-160" : "w-0"} h-full xl:h-158`;
+    const styles = `${isOpen ? "opacity-100 z-30" : "opacity-0 z-0"} bg-gray-200 duration-500`;
+    const { prints, logs } = log ?? {};
+    return (_jsx("div", { className: cn(positions, sizes, styles, paddings), children: _jsxs("div", { className: `relative w-full h-full flex flex-col items-center gap-12 ${isOpen ? "block" : "hidden"}`, children: [_jsxs("div", { className: "w-9/10 border-2 border-black p-2 h-80 relative", children: [_jsx("div", { className: "grid grid-cols-2", children: Object.entries(setting).map(([key, value]) => (_jsxs("div", { className: "text-base font-bold flex gap-2", children: [_jsxs("div", { className: "w-16", children: [value["label"], ":"] }), _jsx(HTMLElement, { type: value["type"], value: tempData[key], options: value["options"], onChange: (value) => setTempData({
+                                            ...tempData,
+                                            [key]: value,
+                                        }) })] }, key))) }), _jsx("div", { className: "absolute bottom-2 right-2 flex justify-end gap-2", children: buttons?.map(([title, onClick]) => (_jsx("button", { onClick: onClick, className: "px-2 py-1 bg-blue-500 text-white", children: title }, title))) })] }), _jsx("div", { className: "border-2 border-black w-9/10 p-2 h-48 overflow-y-scroll", children: logs?.map((log, i) => (_jsx("div", { className: "text-base flex gap-2", children: prints?.map((print) => (_jsx("div", { className: "", children: log[print] }, print))) }, i))) }), _jsx("button", { onClick: () => {
+                        clearTempData();
+                        return removeView("sideMenu");
+                    }, className: "absolute left-0 top-2/5 text-3xl font-bold", children: ">" })] }) }));
+}

package/menu/widget/HTMLElement.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch } from "react";
+import { HTMLElementType } from "../../interface";
+export default function HTMLElement({ type, value, options, onChange, }: {
+    type: HTMLElementType;
+    value: string | number;
+    options?: [string, string][];
+    onChange?: Dispatch<string>;
+}): import("react/jsx-runtime").JSX.Element | undefined;

package/menu/widget/HTMLElement.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function HTMLElement({ type, value, options, onChange, }) {
+    if (type === "text")
+        return _jsx("div", { children: value });
+    if (type === "input")
+        return (_jsx("input", { className: "w-32", value: value, onChange: (e) => onChange?.(e.target.value) }));
+    if (type === "select")
+        return (_jsx("select", { value: value, onChange: (e) => onChange?.(e.target.value), children: options?.map(([value, label]) => (_jsx("option", { value: value, children: label }, value))) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/tailwind.config.ts

@@ -416,6 +416,23 @@ export default {
         "7/10": "70%",
         "9/10": "90%",
       },
+      zIndex: {
+        "50": "50",
+        "49": "49",
+        "48": "48",
+        "47": "47",
+        "46": "46",
+        "45": "45",
+        "44": "44",
+        "43": "43",
+        "42": "42",
+        "41": "41",
+        "40": "40",
+        "30": "30",
+        "20": "20",
+        "10": "10",
+        "0": "0",
+      },
     },
   },
   safelist: [

package/version.txt

@@ -1 +1 @@
-1.0.7
+1.0.9

package/menu/SideMenu.d.ts

@@ -1,2 +0,0 @@
-import { SideMenuProps } from "../interface/Menu";
-export default function SideMenu<K extends string, T extends string | number>({ log, setting, }: SideMenuProps<K, T>): import("react/jsx-runtime").JSX.Element;

package/menu/SideMenu.js

@@ -1,27 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useWidgetStore } from "../store";
-import { cn } from "../util";
-export default function SideMenu({ log, setting, }) {
-    const { tempData, setTempData, clearTempData, events, removeView } = useWidgetStore();
-    const isOpen = events.some(({ event }) => event === "sideMenu");
-    const positions = "absolute top-20 right-0";
-    const paddings = "pt-8";
-    const sizes = `${isOpen ? "w-160" : "w-0"} h-full`;
-    const styles = `${isOpen ? "opacity-100 z-30" : "opacity-0 z-0"} bg-gray-200 duration-500`;
-    const { prints, logs } = log ?? {};
-    return (_jsx("div", { className: cn(positions, sizes, styles, paddings), children: _jsxs("div", { className: `relative w-full h-full flex flex-col items-center gap-12 ${isOpen ? "block" : "hidden"}`, children: [_jsx("div", { className: "w-9/10 border-2 border-black p-2 h-80", children: _jsx("div", { className: "grid grid-cols-2", children: Object.entries(setting).map(([key, value]) => (_jsxs("div", { className: "text-base font-bold flex gap-2", children: [_jsxs("div", { className: "w-16", children: [value["label"], ":"] }), _jsx(HTMLElement, { type: value["type"], value: tempData[key], options: value["options"], onChange: (value) => setTempData({
-                                        ...tempData,
-                                        [key]: value,
-                                    }) })] }, key))) }) }), _jsx("div", { className: "border-2 border-black w-9/10 p-2 h-48 overflow-y-scroll", children: logs?.map((log, i) => (_jsx("div", { className: "text-base flex gap-2", children: prints?.map((print) => (_jsx("div", { className: "", children: log[print] }, print))) }, i))) }), _jsx("button", { onClick: () => {
-                        clearTempData();
-                        return removeView("sideMenu");
-                    }, className: "absolute left-0 top-2/5 text-3xl font-bold", children: ">" })] }) }));
-}
-function HTMLElement({ type, value, options, onChange, }) {
-    if (type === "text")
-        return _jsx("div", { children: value });
-    if (type === "input")
-        return (_jsx("input", { className: "w-32", value: value, onChange: (e) => onChange?.(e.target.value) }));
-    if (type === "select")
-        return (_jsx("select", { value: value, onChange: (e) => onChange?.(e.target.value), children: options?.map(([value, label]) => (_jsx("option", { value: value, children: label }, value))) }));
-}