@edu-tosel/design 1.0.20 → 1.0.22

package/board/template/CanvasBoard.d.ts

@@ -1,2 +1,2 @@
-import { BoardProps } from "../../interface/Board";
-export default function CanvasBoard({ children, options, widgets, }: BoardProps): import("react/jsx-runtime").JSX.Element;
+import { CanvasBoardProps } from "../../interface/Board";
+export default function CanvasBoard({ header, children, options, widgets, buttons, }: CanvasBoardProps): import("react/jsx-runtime").JSX.Element;

package/board/template/CanvasBoard.js

@@ -1,11 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Events } from "../..";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Events, Label } from "../..";
 import { cn } from "../../util";
 import { Board } from "../widget/Board.design";
-export default function CanvasBoard({ children, options, widgets, }) {
+import BoardHeader from "../widget/Header";
+export default function CanvasBoard({ header, children, options, widgets, buttons, }) {
     const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
     const sizes = "h-full ";
     const paddings = "pb-36 xl:pb-6 px-2 xs:px-4 xl:pl-7.5 xl:pr-2 pt-2 xs:pt-4 xl:pt-7.5";
     const styles = "overflow-y-scroll ";
-    return (_jsx(Board, { widgets: widgets, options: { ...options, isRounded: true }, children: _jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }) }));
+    return (_jsxs("div", { className: "relative w-full", children: [_jsxs(Board, { widgets: widgets, options: { ...options, isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) })] }), _jsx("div", { className: "absolute -bottom-18.5 right-0", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                        ...options,
+                        text: "text-white",
+                        background: "bg-crimson-burgundy",
+                    } }))) })] }));
 }

package/board/template/ManageBoard.d.ts

@@ -1,4 +1,4 @@
 import { ManageBoardProps } from "../../interface/Board";
 export default function ManageBoard<K extends string, T extends {
     [p in K]: any;
-}>({ header, data, widgets, options }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ header, dataSets, dataField, widgets, options }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;

package/board/template/ManageBoard.js

@@ -5,9 +5,8 @@ import BoardHeader from "../widget/Header";
 import { cn, sortByOrder } from "../../util";
 import { useWidgetStore } from "../../store";
 import { useId } from "react";
-export default function ManageBoard({ header, data, widgets, options }) {
+export default function ManageBoard({ header, dataSets, dataField, widgets, options }) {
     const { classNames, noPadding } = options ?? {};
-    const { dataSets, dataField } = data;
     const { order } = useWidgetStore();
     const id = useId();
     const orders = order[id] ?? [];

package/board/widget/Header.d.ts

@@ -1,2 +1,2 @@
 import { BoardHeaderProps } from "./../../interface/Board";
-export default function BoardHeader({ titles, tags, options, }: BoardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function BoardHeader({ titles, tag, options, }: BoardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/board/widget/Header.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Input, Select } from "../../html";
-export default function BoardHeader({ titles, tags, options, }) {
+export default function BoardHeader({ titles, tag, options, }) {
     const { title, icon } = titles ?? {};
-    const { selects, inputs } = tags ?? {};
+    const { selects, inputs } = tag ?? {};
     const { colors } = options ?? {};
     const { bgColor, textColor } = colors ?? {
         bgColor: "white",
@@ -20,5 +20,5 @@ export default function BoardHeader({ titles, tags, options, }) {
         displays: "xl:hidden block ",
         sizes: "w-full h-22",
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: "text-2xl font-bold text-green-dark", children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, state }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Select, { options: { width }, selectOptions: options, state: state }, title)] }, index))), inputs?.map(({ width, title, placeholder, state }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Input, { placeholder: placeholder, state: state, options: { width } })] }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: "text-2xl font-bold text-green-dark", children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, state }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Select, { options: { width }, selectOptions: options, state: state }, title)] }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
 }

package/card/template/InfoCard.js

@@ -1,5 +1,4 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useNavigate } from "react-router-dom";
 import { InfoCardDesign } from "../widget/InfoCard.design";
 import { Events, Label, NoData } from "../..";
 import { cn, gradient } from "../../util";
@@ -37,12 +36,11 @@ function Exam({ titles, data }) {
         displays: "flex flex-col justify-between mt-2.5",
         sizes: "h-19.25 w-full",
     };
-    const navigate = useNavigate();
     return (_jsx(InfoCardDesign, { titles: titles, options: {
             titleBorder: "border-red-crimson",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-bold ", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-xs", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-xs", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] })] }), _jsx(Label.Button, { title: status, onClick: () => navigate("/admin/grades/1"), options: { width: "sm", height: "xs", className: cn(label) } })] }) }));
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-bold ", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-xs", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-xs", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] })] }), _jsx(Label.Button, { title: status, onClick: () => { }, options: { width: "sm", height: "xs", className: cn(label) } })] }) }));
 }
 function ExamDataREG({ titles, data }) {
     const container = {

package/card/template/TableCard.js

@@ -4,7 +4,7 @@ function TableCard(props) {
     return _jsx(TableCardDesign, { ...props });
 }
 function Log(props) {
-    return (_jsx(TableCardDesign, { dataField: props.dataField, dataSets: props.dataSets, options: {
+    return (_jsx(TableCardDesign, { dataField: props.dataField, dataSet: props.dataSet, options: {
             ...props.options,
             rowHeight: "h-5",
             onClick: props.options?.onClick,

package/card/widget/TableCard.design.d.ts

@@ -1,4 +1,4 @@
 import { TableCardProps } from "../../interface";
 export default function TableCardDesign<K extends string, T extends {
     [p in K]: any;
-}>({ dataSets, dataField, options }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ dataSet, dataField, options }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/widget/TableCard.design.js

@@ -3,8 +3,8 @@ import { useId } from "react";
 import { useWidgetStore } from "../../store";
 import { cn, sortByOrder } from "../../util";
 import Card from "../widget/Card.design";
-import { DataField, Row } from "../../layout";
-export default function TableCardDesign({ dataSets, dataField, options }) {
+import { DataField, Events, NoData, Row } from "../..";
+export default function TableCardDesign({ dataSet, dataField, options }) {
     const { width, height } = options ?? {};
     const { order } = useWidgetStore();
     const id = useId();
@@ -19,5 +19,10 @@ export default function TableCardDesign({ dataSets, dataField, options }) {
             height: height ?? "lg",
             overflow: "y-scroll",
             noPadding: true,
-        }, children: sortByOrder(dataSets, orders).map((dataSet, index) => (_jsx(Row.Card, { dataSet: dataSet, dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }));
+        }, children: _jsx(Events.Replace, { widgets: [
+                [
+                    dataSet.items.length === 0,
+                    dataSet.noData ?? _jsx(NoData.Script, { script: "No Data" }),
+                ],
+            ], children: sortByOrder(dataSet.items, orders).map((item, index) => (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }) }));
 }

package/html/template/Label.d.ts

@@ -1,8 +1,6 @@
-import { HTMLLabelElement, OnClick } from "../../interface";
+import { HTMLLabelElement } from "../../interface";
 declare function Label({ title, options }: Omit<HTMLLabelElement, "onClick">): import("react/jsx-runtime").JSX.Element;
 declare namespace Label {
-    var Button: ({ title, onClick, options, }: HTMLLabelElement & {
-        onClick: OnClick;
-    }) => import("react/jsx-runtime").JSX.Element;
+    var Button: ({ title, onClick, options }: HTMLLabelElement) => import("react/jsx-runtime").JSX.Element;
 }
 export default Label;

package/html/template/Label.js

@@ -3,7 +3,7 @@ import LabelDesign from "./../widget/Label.design";
 function Label({ title, options }) {
     return (_jsx(LabelDesign, { title: title, options: { ...options, width: "sm", height: "xs" } }));
 }
-function Button({ title, onClick, options, }) {
+function Button({ title, onClick, options }) {
     return (_jsx(LabelDesign, { title: title, onClick: onClick, options: {
             ...options,
             width: options?.width ?? "md",

package/html/widget/EmailInput.js

@@ -40,5 +40,7 @@ export default function EmailInput({ state, placeholder, options, }) {
                         ? emailCss.true
                         : emailCss.false) +
                     (isValidEmail(value) && !focused ? emailCss.allTrue : ""), id: id, type: "text", placeholder: placeholder ?? "E-mail을 입력해주세요.", onChange: (e) => setValue(e.target.value), onBlur: handleBlur, onFocus: handleFocus }), value === "" ||
-                (!isValidEmail(value) && (_jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: _jsx("span", { className: "text-[#FF8383]", children: "!" }) }))), value.length > 5 && !isValidEmail(value) && (_jsx("div", { className: "absolute top-4 left-40 w-60 h-12 bg-black opacity-60 z-100 text-white p-2 text-xs rounded-md shadow-md invisible peer-hover:visible", children: text }))] }));
+                (!isValidEmail(value) && (_jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: _jsx("span", { className: "text-[#FF8383]", children: "!" }) }))), typeof value === "string" &&
+                value.length > 5 &&
+                !isValidEmail(value) && (_jsx("div", { className: "absolute top-4 left-40 w-60 h-12 bg-black opacity-60 z-100 text-white p-2 text-xs rounded-md shadow-md invisible peer-hover:visible", children: text }))] }));
 }

package/html/widget/Input.d.ts

@@ -1,2 +1,2 @@
 import { HTMLInputElement } from "../../interface";
-export default function Input({ state, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;
+export default function Input({ state, onKeyDown, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Input.js

@@ -10,15 +10,15 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function Input({ state, placeholder, options, }) {
+export default function Input({ state, onKeyDown, placeholder, options, }) {
     const { width } = options ?? {};
     const id = useId();
     const [value, setValue] = state;
     const container = {
-        width: `${widthSize[width ?? "md"]} h-8`,
+        width: `${widthSize[width ?? "xs"]} h-8`,
         styles: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-slate-200 text-xs",
         pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
         effect: `transition-all`,
     };
-    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "ID를 입력해주세요", onChange: (e) => setValue(e.target.value) }));
+    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }));
 }

package/interaction/template/NoData.d.ts

@@ -1,4 +1,6 @@
-declare function Script(): import("react/jsx-runtime").JSX.Element;
+declare function Script(props: {
+    script?: string;
+}): import("react/jsx-runtime").JSX.Element;
 declare function Sign(props: {
     script: string;
     color?: string;

package/interaction/template/NoData.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ScriptDesign from "../widget/Script.design";
 import SignDesign from "../widget/Sign.design";
-function Script() {
-    return _jsx(ScriptDesign, { script: "No Data" });
+function Script(props) {
+    return _jsx(ScriptDesign, { ...props });
 }
 function Sign(props) {
     return _jsx(SignDesign, { ...props });

package/interaction/widget/Script.design.d.ts

@@ -1,3 +1,3 @@
 export default function Script({ script }: {
-    script: string;
+    script?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/interaction/widget/Script.design.js

@@ -1,4 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
 export default function Script({ script }) {
-    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: script }));
+    const container = {
+        displays: "flex items-center justify-center",
+        sizes: "w-full h-full",
+        fonts: "text-xl",
+    };
+    return _jsx("div", { className: cn(container), children: script ?? "No Data" });
 }

package/interface/Board.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
 import { DataField, Size, State, Titles } from "./Property";
 import { EventsProps } from "./Widget";
+import { HTMLInputElement, HTMLLabelElement } from "./HTMLElement";
 interface OptionsProps {
     classNames?: string;
     width?: Size;
@@ -10,28 +10,25 @@ interface OptionsProps {
     noPadding?: boolean;
 }
 export interface BoardProps {
+    header?: BoardHeaderProps;
     children?: React.ReactNode;
     widgets?: EventsProps;
     options?: OptionsProps;
     debug?: string;
+    buttons?: HTMLLabelElement[];
 }
 export interface BoardHeaderProps {
-    titles?: Titles & {
+    titles?: Omit<Titles, "subtitle"> & {
         icon?: string;
     };
-    tags?: {
+    tag?: {
         selects?: {
             title: string;
             state: State<string>;
             options: [string | number, string][];
             width?: Size;
         }[];
-        inputs?: {
-            state: State<string>;
-            placeholder?: string;
-            title?: string;
-            width?: Size;
-        }[];
+        inputs?: HTMLInputElement[];
     };
     options?: {
         colors?: {
@@ -40,20 +37,18 @@ export interface BoardHeaderProps {
         };
     };
 }
+export interface CanvasBoardProps extends BoardProps {
+}
 export interface ManageBoardProps<T> extends BoardProps {
-    data: {
-        dataSets: {
-            items: T[] | undefined;
-            renderItem: (item: T) => React.ReactNode;
-            titles?: Titles;
-            interaction?: React.ReactNode;
-        }[];
-        dataField?: {
-            [p in keyof T]?: Partial<DataField>;
-        };
-        gap?: number;
+    dataSets: {
+        items: T[] | undefined;
+        renderItem: (item: T) => React.ReactNode;
+        titles?: Titles;
+        interaction?: React.ReactNode;
+    }[];
+    dataField?: {
+        [p in keyof T]?: Partial<DataField>;
     };
-    header?: BoardHeaderProps;
 }
 export interface PaperBoardProps extends BoardProps {
 }

package/interface/Card.d.ts

@@ -135,7 +135,11 @@ export interface AddCardProps extends Omit<CardProps, "children"> {
     onClick: OnClick;
 }
 export interface TableCardProps<T> extends Omit<CardProps, "children"> {
-    dataSets: T[];
+    dataSet: {
+        items: T[];
+        onClick?: OnClick<T>;
+        noData?: React.ReactNode;
+    };
     dataField: {
         [p in keyof T]?: Partial<DataField>;
     };

package/interface/HTMLElement.d.ts

@@ -26,7 +26,8 @@ export interface HTMLSelectElement extends HTMLElement {
     selectOptions?: [string | number, string][];
 }
 export interface HTMLInputElement extends HTMLElement {
-    state: State<string>;
+    state: State<string> | State<string | undefined>;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
     placeholder?: string;
 }
 export interface HTMLToggleElement extends HTMLElement {

package/interface/Widget.d.ts

@@ -32,8 +32,8 @@ export interface DataFieldProps<T> {
     };
 }
 export interface RowProps<T> {
-    onClick?: OnClick;
-    dataSet: T;
+    onClick?: OnClick<T>;
+    item: T;
     dataField?: {
         [p in keyof T]?: Partial<DataField>;
     };

package/layout/template/Row.d.ts

@@ -1,6 +1,6 @@
 import { RowProps } from "../../interface";
-declare function Board<T extends Record<string, any>>({ dataSet, dataField, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
-declare function Card<T extends Record<string, any>>({ dataSet, dataField, onClick, height, noPadding, noHover, }: Omit<RowProps<T>, "options"> & {
+declare function Board<T extends Record<string, any>>({ item, dataField, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Card<T extends Record<string, any>>({ item, dataField, onClick, height, noPadding, noHover, }: Omit<RowProps<T>, "options"> & {
     height?: string;
     noPadding?: boolean;
     noHover?: boolean;

package/layout/template/Row.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import RowDesign from "../widget/Row.design";
-function Board({ dataSet, dataField, onClick, }) {
+function Board({ item, dataField, onClick, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, dataSet: dataSet, dataField: dataField, options: {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, options: {
             size: "w-full h-12",
             padding: "px-2 xs:px-4 xl:px-7.5",
             text: "text-xl",
         } }, id));
 }
-function Card({ dataSet, dataField, onClick, height, noPadding, noHover, }) {
+function Card({ item, dataField, onClick, height, noPadding, noHover, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, dataSet: dataSet, dataField: dataField, options: {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, options: {
             size: `w-full ${height ?? "h-12"}`,
             padding: !noPadding ? "px-2 xs:px-4 xl:px-7.5" : "",
             text: "text-base",

package/layout/widget/Row.design.d.ts

@@ -1,2 +1,2 @@
 import { RowProps } from "../../interface";
-export default function RowDesign<T extends Record<string, any>>({ dataSet, dataField, options, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function RowDesign<T extends Record<string, any>>({ item, dataField, options, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/widget/Row.design.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../../util";
-export default function RowDesign({ dataSet, dataField, options, onClick, }) {
+export default function RowDesign({ item, dataField, options, onClick, }) {
     const { size, padding, text, noHover } = options ?? {};
     const id = useId();
     const container = {
@@ -11,6 +11,6 @@ export default function RowDesign({ dataSet, dataField, options, onClick, }) {
         text: text,
         styles: !noHover && "hover:bg-gray-100 duration-100",
     };
-    return (_jsx("div", { className: cn(container), onClick: onClick, children: dataField &&
-            Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: dataSet[key] }, id + key))) }));
+    return (_jsx("div", { className: cn(container), onClick: () => onClick?.(), children: dataField &&
+            Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: item[key] }, id + key))) }));
 }

package/package.json

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

package/tailwind.config.ts

@@ -114,6 +114,7 @@ export default {
         15: "3.75rem",
         16: "4rem",
         18: "4.5rem",
+        18.5: "4.625rem",
         18.75: "4.6875rem",
         19: "4.75rem",
         19.25: "4.8125rem",
@@ -179,6 +180,7 @@ export default {
         120: "30rem",
         122: "30.5rem",
         124: "31rem",
+        125: "31.25rem",
         126: "31.5rem",
         127.5: "31.875rem",
         128: "32rem",

package/version.txt

@@ -1 +1 @@
-1.0.20
+1.0.22