@edu-tosel/design 1.0.68 → 1.0.70

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

@@ -1,2 +1,2 @@
 import { TableCardProps } from "../../interface";
-export default function TableCardDesign<T>({ dataSet, dataField, option, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function TableCardDesign<T, S>({ dataSet, dataField, option, }: TableCardProps<T, S>): import("react/jsx-runtime").JSX.Element;

package/card/design/TableCard.design.js

@@ -21,7 +21,7 @@ export default function TableCardDesign({ dataSet, dataField, option, }) {
             height: height ?? "3xl",
             overflow: "overflow-y-scroll overflow-x-hidden",
             noPadding: true,
-        }, children: _jsxs(Action.Replace, { actions: dataSet?.replaces, children: [sortByOrder({ items: dataSet?.items, orders }).map((item, index) => dataSet.renderItem ? (dataSet.renderItem(item)) : (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, id + index))), _jsx(Obstacle, { disabled: isDisabled }), _jsx(Obstacle.Blur, { disabled: isDisabled, option: {
+        }, children: _jsxs(Action.Replace, { actions: dataSet?.replaces, children: [sortByOrder({ items: dataSet?.items, orders }).map((item, index) => dataSet.renderItem ? (dataSet.renderItem(item)) : (_jsx(Row.Card, { item: item, state: dataSet.state, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, id + index))), _jsx(Obstacle, { disabled: isDisabled }), _jsx(Obstacle.Blur, { disabled: isDisabled, option: {
                         position: "top-10",
                     }, children: _jsx(Lock, { script: disabledScript }) })] }) }));
 }

package/card/template/TableCard.d.ts

@@ -1,6 +1,6 @@
 import { TableCardProps } from "../../interface";
-declare function TableCard<T>(props: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function TableCard<T, S>(props: TableCardProps<T, S>): import("react/jsx-runtime").JSX.Element;
 declare namespace TableCard {
-    var Log: <T>(props: TableCardProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Log: <T, S>(props: TableCardProps<T, S>) => import("react/jsx-runtime").JSX.Element;
 }
 export default TableCard;

package/interface/Action.d.ts

@@ -1,5 +1,5 @@
 import { LabelWidget } from "./widget";
-import { OnClick, Size } from "./Property";
+import { OnClick, Size, State } from "./Property";
 import { DataField, DataFieldType } from "./Data";
 import { Color } from "./Color";
 export interface ActionEvent {
@@ -29,8 +29,9 @@ export interface DataFieldProps<T> {
         padding?: string;
     };
 }
-export interface RowProps<T> {
+export interface RowProps<T, S> {
     item: T;
+    state?: State<S[] | undefined>;
     dataField?: DataField<T>;
     onClick?: OnClick<T>;
     buttons?: LabelWidget[];
@@ -45,8 +46,10 @@ export interface RowProps<T> {
         className?: string;
     };
 }
-export interface RowElementProps {
-    item: string;
+export interface RowElementProps<T, S> {
+    item: T;
+    entry: [string, unknown];
+    state?: State<S[] | undefined>;
     data?: DataFieldType;
 }
 export {};

package/interface/Card.d.ts

@@ -116,8 +116,8 @@ export interface AddCardProps extends Omit<CardProps, "children"> {
     icon?: string;
     onClick: OnClick;
 }
-export interface TableCardProps<T> extends Omit<CardProps, "children"> {
-    dataSet: Flexify<DataSet<T>, "renderItem">;
+export interface TableCardProps<T, S> extends Omit<CardProps, "children"> {
+    dataSet: Flexify<DataSet<T, S>, "renderItem">;
     dataField?: DataField<T>;
     option?: CardOption & {
         className?: string;

package/interface/Data.d.ts

@@ -1,11 +1,12 @@
 import { Replace } from "./Action";
-import { OnClick, Titles } from "./Property";
+import { OnClick, State, Titles } from "./Property";
 export interface DataPackage<T> {
     dataField: DataField<T>;
     dataSet: Omit<DataSet<T>, "renderItem">;
 }
-export type DataSet<T = any> = {
+export type DataSet<T = any, S = any> = {
     items?: T[];
+    state?: State<S[] | undefined>;
     renderItem: (item: T, index?: number) => React.ReactNode;
     titles?: Titles;
     interaction?: React.ReactNode;
@@ -20,7 +21,7 @@ type DataFieldProps = {
 export type DataField<T = any> = Partial<{
     [p in keyof T]: Partial<DataFieldProps>;
 }>;
-export type DataFieldType = DataFiledTypeText | DataSelectRoll;
+export type DataFieldType = DataFiledTypeText | DataSelectRoll | DataButton;
 type DataFiledTypeText = {
     type: "text";
 };
@@ -37,5 +38,15 @@ type DataSelectRoll = {
     options: SelectRollOption[];
 };
 declare function isDataSelectRoll(obj: any): obj is DataSelectRoll;
+type DataButton = {
+    type: "button";
+    onClick: OnClick;
+    hoverTitle?: string;
+    option?: {
+        text?: string;
+        background?: string;
+    };
+};
+declare function isDataButton(obj: any): obj is DataButton;
 export type { DataFiledTypeText, DataSelectRoll };
-export { isDataSelectRoll };
+export { isDataSelectRoll, isDataButton };

package/interface/Data.js

@@ -1,4 +1,7 @@
 function isDataSelectRoll(obj) {
     return typeof obj === "object" && obj.type === "selectRoll";
 }
-export { isDataSelectRoll };
+function isDataButton(obj) {
+    return typeof obj === "object" && obj.type === "button";
+}
+export { isDataSelectRoll, isDataButton };

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

@@ -1,7 +1,9 @@
-import { DataSelectRoll } from "../../../interface";
-interface SelectRollProps {
-    item: string | number;
+import { DataSelectRoll, State } from "../../../interface";
+interface SelectRollProps<T, S> {
+    item: T;
+    entry: [string, unknown];
+    state: State<S[] | undefined>;
     data: DataSelectRoll;
 }
-export default function SelectRoll({ item, data }: SelectRollProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectRoll<T, S>({ item, entry, state, data, }: SelectRollProps<T, S>): import("react/jsx-runtime").JSX.Element;
 export {};

package/layout/design/Row.design/SelectRoll.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { cn } from "../../../util";
-export default function SelectRoll({ item, data }) {
+export default function SelectRoll({ item, entry, state, data, }) {
     const { options } = data ?? {};
+    const [key, value] = entry;
+    const [rows, setRows] = state ?? [];
     const [isHover, setIsHover] = useState(false);
     const keys = options?.map((option) => option.key);
     const values = options?.map((option) => option.value);
-    const [index, setIndex] = useState(keys?.indexOf(String(item)) ?? 0);
+    const [index, setIndex] = useState(keys?.indexOf(String(item[key])) ?? 0);
     const container = {
         styles: "group cursor-default",
         displays: "flex justify-center",
@@ -29,11 +31,21 @@ export default function SelectRoll({ item, data }) {
         sizes: "w-[20px] h-full",
         styles: "duration-300 text-gray-dark",
     };
+    useEffect(() => {
+        setRows(rows?.map((row) => {
+            if (row === item) {
+                return { ...row, [key]: keys[index] };
+            }
+            return row;
+        }));
+    }, [index]);
     return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onMouseLeave: () => setIsHover(false), onMouseEnter: () => setIsHover(true), children: [values[index], _jsx("button", { onClick: () => {
-                        if (index > 0)
+                        if (index > 0) {
                             setIndex(index - 1);
+                        }
                     }, className: cn(toggle, "-left-4 group-hover:left-1"), children: "-" }), _jsx("button", { onClick: () => {
-                        if (index < keys.length - 1)
+                        if (index < keys.length - 1) {
                             setIndex(index + 1);
+                        }
                     }, className: cn(toggle, "-right-4 group-hover:right-1"), children: "+" })] }) }));
 }

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

@@ -1,2 +1,2 @@
 import { RowProps } from "../../../interface";
-export default function RowDesign<T>({ item, dataField, option, onClick, buttons, dot, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function RowDesign<T, S>({ item, state, dataField, option, onClick, buttons, dot, }: RowProps<T, S>): import("react/jsx-runtime").JSX.Element;

package/layout/design/Row.design/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId } from "react";
-import { ColorSet, isDataSelectRoll, } from "../../../interface";
+import { ColorSet, isDataButton, isDataSelectRoll, } from "../../../interface";
 import { cn } from "../../../util";
 import { Label } from "../../../widget";
 import { widthSizes } from "../../../asset/sizes";
 import SelectRoll from "./SelectRoll";
-export default function RowDesign({ item, dataField, option, onClick, buttons, dot, }) {
+export default function RowDesign({ item, state, dataField, option, onClick, buttons, dot, }) {
     const { size, padding, text, noHover, className, isPointer } = option ?? {};
     const id = useId();
     const container = {
@@ -28,7 +28,7 @@ export default function RowDesign({ item, dataField, option, onClick, buttons, d
         styles: "rounded-full",
     };
     return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof dot !== "undefined" && _jsx("div", { className: cn(flagBox) }), dataField &&
-                Object.keys(dataField).map((key) => (_jsx("div", { className: cn(widthSizes[dataField[key]?.size], itemBox), children: _jsx(RowElement, { data: dataField[key]?.data, item: item[key] }) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+                Object.entries(dataField).map(([key, value]) => (_jsx("div", { className: cn(widthSizes[dataField[key]?.size], itemBox), children: _jsx(RowElement, { state: state, entry: [key, value], item: item, data: dataField[key]?.data }) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                         background: option?.background ?? "bg-crimson-dark",
                         text: option?.text ?? "text-white",
                         width: "xs",
@@ -36,8 +36,12 @@ export default function RowDesign({ item, dataField, option, onClick, buttons, d
                     } }, id + title))) })] }));
 }
 function RowElement(props) {
-    const { data } = props;
-    if (isDataSelectRoll(data))
-        return _jsx(SelectRoll, { item: props.item, data: data });
-    return _jsx(_Fragment, { children: props.item });
+    const { item, data } = props;
+    const [key, value] = props.entry;
+    if (isDataSelectRoll(data) && props.state) {
+        return (_jsx(SelectRoll, { item: item, state: props.state, entry: props.entry, data: data }));
+    }
+    if (isDataButton(data))
+        return (_jsx(Label.Button, { title: item[key], hoverTitle: data.hoverTitle, onClick: data.onClick, option: { ...data.option, width: "xs", height: "xs" } }));
+    return _jsx(_Fragment, { children: item[key] });
 }

package/layout/template/Row.d.ts

@@ -1,11 +1,11 @@
 import { RowProps } from "../../interface";
-declare function Row<T>({ item, dataField, onClick, buttons, dot }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Row<T, S>({ item, dataField, onClick, buttons, dot }: RowProps<T, S>): import("react/jsx-runtime").JSX.Element;
 declare namespace Row {
-    var Card: <T>({ item, dataField, onClick, buttons, height, noPadding, noHover, dot, }: Omit<RowProps<T>, "option"> & {
+    var Card: <T, S>({ item, dataField, state, onClick, buttons, height, noPadding, noHover, dot, }: Omit<RowProps<T, S>, "option"> & {
         height?: string | undefined;
         noPadding?: boolean | undefined;
         noHover?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    var Board: <T>({ item, dataField, onClick, buttons, dot, option, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Board: <T, S>({ item, dataField, onClick, buttons, dot, option, }: RowProps<T, S>) => import("react/jsx-runtime").JSX.Element;
 }
 export default Row;

package/layout/template/Row.js

@@ -18,9 +18,9 @@ function Board({ item, dataField, onClick, buttons, dot, option, }) {
             text: "text-xl",
         } }, id));
 }
-function Card({ item, dataField, onClick, buttons, height, noPadding, noHover, dot, }) {
+function Card({ item, dataField, state, onClick, buttons, height, noPadding, noHover, dot, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, option: {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, state: state, dataField: dataField, buttons: buttons, dot: dot, option: {
             size: `w-full ${height ?? "h-15"}`,
             padding: !noPadding ? "px-2 xs:px-4 xl:px-5" : "",
             text: "text-base",

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.68
+1.0.70

package/widget/design/Label.design.js

@@ -2,13 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Obstacle } from "../..";
 const widthSize = {
-    xs: "w-10",
+    "2xs": "w-10",
+    xs: "w-20",
     sm: "w-22.5",
     md: "w-45",
     lg: "w-50",
 };
 const heightSize = {
-    xs: "h-6.25",
+    "2xs": "h-6.25",
+    xs: "h-7.5",
     sm: "h-11.25",
     md: "h-12.25",
 };

package/widget/template/Pagination.js

@@ -12,7 +12,7 @@ export default function Pagination({ state, selectOptions, }) {
     };
     const index = selectOptions.indexOf(value);
     return (_jsxs("div", { className: cn(container), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => {
-                    if (index > 1)
+                    if (index > 0)
                         setValue(selectOptions[index - 1]);
                 } }), _jsxs("div", { className: "flex items-center gap-x-[3px] text-white", children: [index + 1, _jsx("div", { className: "text-gray-medium text-base font-pretendard-bold", children: "/" }), selectOptions.length] }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => {
                     if (index < selectOptions.length - 1)