@edu-tosel/design 1.0.38 → 1.0.40

package/card/template/InfoCard/Finance.d.ts

@@ -1,8 +1,13 @@
-import { DataPackage, InfoCardProps, State } from "../../../interface";
+import { DataPackage, InfoCardProps, OnClick, State } from "../../../interface";
 export interface InfoCardFinanceProps<N, C> extends Omit<InfoCardProps, "children"> {
     data: {
         taxRate: number;
         taxState: State<boolean>;
+        result: string;
+        download: OnClick;
+        latestDownloadDate: string;
+        refresh: OnClick;
+        lock: State<boolean>;
         dataSets?: {
             title: string;
             sum: number | string;

package/card/template/InfoCard/Finance.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle } from "../../../html";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import { useId } from "react";
@@ -13,7 +14,10 @@ export default function Finance({ titles, data, }) {
             titleBorder: "border-green-dark",
             width: "2xl",
             height: "xl",
-        }, topRight: _jsxs("div", { className: "flex items-center gap-2.5 text-xs ", children: [_jsx("button", { onClick: () => setTaxOn(!taxOn), className: cn("w-4 h-4 rounded-md", taxOn ? "bg-green-dark" : "border-1") }), _jsxs("div", { children: ["\uC0AC\uC5C5\uC18C\uB4DD\uC138 ", taxRate, "%"] })] }), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex gap-7.5 mt-4.25 border-b-1 border-green-dark pb-2.5 ", children: dataSets?.map(({ title, sum, tax, total, rate, amount, number, result }, index) => (_jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("div", { className: "font-pretendard-bold text-green-dark", children: title }), _jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: "flex flex-col justify-between w-20", children: [number && (_jsx(Numbers, { title: number.title, dataSet: number.dataSet, dataField: number.dataField })), _jsx(Result, { title: "\uBE44\uC728", amount: `${rate}%` })] }), amount && (_jsxs("div", { className: "flex flex-col", children: [_jsx(Amount, { title: amount.title, dataSet: amount.dataSet, dataField: amount.dataField }), _jsxs("div", { className: "flex flex-col gap-1.5 mt-2.5", children: [_jsx(Result, { title: "\uD569\uACC4", amount: sum, cnTitle: "text-gray-dim" }), _jsx(Result, { title: "\uC0AC\uC5C5\uC18C\uB4DD\uC138", amount: `${typeof tax === "number" && tax ? "-" : ""}${tax.toLocaleString()}`, cnTitle: "text-gray-dim", cnAmount: "text-crimson-burgundy" }), _jsx(Result, { title: "\uCD1D\uACC4", amount: total, background: "bg-green-dark/10", cnTitle: "font-pretendard-bold" })] }), _jsx(Result, { title: "\uC9C0\uAE09\uBD84", amount: result, background: "bg-green-dark", cnTitle: "font-pretendard-bold text-white", className: "text-white mt-5" })] }))] })] }, id + index))) }), _jsx("div", { className: "flex items-center h-15.5", children: _jsx("div", { className: "w-45 h-10 bg-gray-light rounded-md" }) })] }) }));
+        }, topRight: _jsxs("div", { className: "flex items-center gap-2.5 text-xs ", children: [_jsx("button", { onClick: () => setTaxOn(!taxOn), className: cn("w-4 h-4 rounded-md", taxOn ? "bg-green-dark" : "border-1") }), _jsxs("div", { children: ["\uC0AC\uC5C5\uC18C\uB4DD\uC138 ", taxRate, "%"] })] }), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex gap-7.5 mt-4.25 border-b-1 border-green-dark pb-2.5 ", children: dataSets?.map(({ title, sum, tax, total, rate, amount, number, result }, index) => (_jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("div", { className: "font-pretendard-bold text-green-dark", children: title }), _jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: "flex flex-col justify-between w-20", children: [number && (_jsx(Numbers, { title: number.title, dataSet: number.dataSet, dataField: number.dataField })), _jsx(Result, { title: "\uBE44\uC728", amount: `${rate}%` })] }), amount && (_jsxs("div", { className: "flex flex-col", children: [_jsx(Amount, { title: amount.title, dataSet: amount.dataSet, dataField: amount.dataField }), _jsxs("div", { className: "flex flex-col gap-1.5 mt-2.5", children: [_jsx(Result, { title: "\uD569\uACC4", amount: sum, cnTitle: "text-gray-dim" }), _jsx(Result, { title: "\uC0AC\uC5C5\uC18C\uB4DD\uC138", amount: `${typeof tax === "number" && tax ? "-" : ""}${tax.toLocaleString()}`, cnTitle: "text-gray-dim", cnAmount: "text-crimson-burgundy" }), _jsx(Result, { title: "\uCD1D\uACC4", amount: total, background: "bg-green-dark/10", cnTitle: "font-pretendard-bold" })] }), _jsx(Result, { title: "\uC9C0\uAE09\uBD84", amount: result, background: "bg-green-dark", cnTitle: "font-pretendard-bold text-white", className: "text-white mt-5" })] }))] })] }, id + index))) }), _jsx("div", { className: "flex items-center w-full h-15.5", children: _jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsx("div", { className: "w-45 h-10 bg-gray-light rounded-md flex justify-center items-center text-sm font-pretendard-bold text-green-dark", children: data.result }), _jsxs("div", { className: "flex items-center gap-2.5", children: [_jsxs("div", { className: "text-xs text-gray-dim", children: ["\uB9C8\uC9C0\uB9C9 \uB2E4\uC6B4\uB85C\uB4DC: ", data.latestDownloadDate] }), _jsx("button", { onClick: data.refresh, className: "w-6.25 h-6.25 rounded-md box-shadow flex justify-center items-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M13.3526 7.78995H17.5126L14.8618 5.13745C14.0084 4.28401 12.9453 3.67028 11.7795 3.35795C10.6137 3.04563 9.38616 3.04572 8.22037 3.35822C7.05459 3.67072 5.99162 4.28461 5.13832 5.13817C4.28501 5.99174 3.67145 7.0549 3.35932 8.22078M2.48765 16.3699V12.2099M2.48765 12.2099H6.64765M2.48765 12.2099L5.13765 14.8624C5.99108 15.7159 7.05414 16.3296 8.21997 16.6419C9.3858 16.9543 10.6133 16.9542 11.7791 16.6417C12.9449 16.3292 14.0078 15.7153 14.8611 14.8617C15.7145 14.0082 16.328 12.945 16.6402 11.7791M17.5126 3.62995V7.78828", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { className: "bg-green-dark text-white w-22.5 h-6.25 text-xs rounded-md", onClick: data.download, children: "\uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC" }), _jsx(Toggle, { labels: [
+                                            [true, "잠금"],
+                                            [false, "수정 중"],
+                                        ], state: data.lock })] })] }) })] }) }));
 }
 function Numbers({ title, dataSet, dataField, }) {
     const id = useId();

package/html/widget/Toggle.js

@@ -10,5 +10,5 @@ const widthSize = {
 };
 export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
     const { disabled } = options ?? {};
-    return (_jsxs("div", { className: "w-24 h-6 flex", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "toggle bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
+    return (_jsxs("div", { className: "w-24 h-6 flex items-center", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "toggle bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all text-xs", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
 }

package/layout/widget/sign/Input.d.ts

@@ -1,6 +1,6 @@
 import { State } from "../../../interface";
 interface InputProps {
-    state: State<string>;
+    state: State<string | undefined>;
     placeholder: string;
     flag?: boolean;
     type?: "text" | "password" | "date" | "email" | "phone" | "number";

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.38
+1.0.40