@edu-tosel/design 1.0.79 → 1.0.80

package/card/design/TableCard.design.js

@@ -5,6 +5,7 @@ import { cn, sortByOrder } from "../../util";
 import Card from "./Card.design";
 import { DataField, Action, Row, Lock } from "../..";
 import { Obstacle } from "../..";
+import { v4 } from "uuid";
 export default function TableCardDesign({ dataSet, dataField, option, }) {
     const { width, height, padding, boundary, isDisabled, disabledScript } = option ?? {};
     const { order } = useActionStore();
@@ -21,7 +22,12 @@ 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) => {
+                    const uuid = v4();
+                    if (dataSet.renderItem)
+                        return dataSet.renderItem(item);
+                    return (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, uuid));
+                }), _jsx(Obstacle, { disabled: isDisabled }), _jsx(Obstacle.Blur, { disabled: isDisabled, option: {
                         position: "top-10",
                     }, children: _jsx(Lock, { script: disabledScript }) })] }) }));
 }

package/interface/Action.d.ts

@@ -50,6 +50,6 @@ export interface RowElementProps<T> {
     item: T;
     entry: [string, unknown];
     stateAction?: (item: T) => void;
-    data?: DataFieldType;
+    data?: DataFieldType<T>;
 }
 export {};

package/interface/Data.d.ts

@@ -12,15 +12,15 @@ export type DataSet<T = any> = {
     onClick?: OnClick<T>;
     replaces?: Replace[];
 };
-type DataFieldProps = {
+type DataFieldProps<T> = {
     title: string | number;
     size: string | number;
-    data?: DataFieldType;
+    data?: DataFieldType<T>;
 };
 export type DataField<T = any> = Partial<{
-    [p in keyof T]: Partial<DataFieldProps>;
+    [p in keyof T]: Partial<DataFieldProps<T>>;
 }>;
-export type DataFieldType = DataFiledTypeText | DataSelectRoll | DataButton;
+export type DataFieldType<T> = DataFiledTypeText | DataSelectRoll | DataButton<T>;
 type DataFiledTypeText = {
     type: "text";
 };
@@ -37,15 +37,15 @@ type DataSelectRoll = {
     options: SelectRollOption[];
 };
 declare function isDataSelectRoll(obj: any): obj is DataSelectRoll;
-type DataButton = {
+type DataButton<T> = {
     type: "button";
-    onClick: OnClick;
+    onClick: OnClick<T>;
     hoverTitle?: string;
     option?: {
         text?: string;
         background?: string;
     };
 };
-declare function isDataButton(obj: any): obj is DataButton;
+declare function isDataButton<T>(obj: any): obj is DataButton<T>;
 export type { DataFiledTypeText, DataSelectRoll };
 export { isDataSelectRoll, isDataButton };

package/layout/design/DataField.design.d.ts

@@ -1,2 +1,2 @@
 import { DataFieldProps } from "../../interface";
-export default function DataFieldDesign<T extends Record<string, any>>({ id, dataField, option, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function DataFieldDesign<T = any>({ id, dataField, option, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/DataField.design.js

@@ -23,7 +23,8 @@ export default function DataFieldDesign({ id, dataField, option, }) {
         sizes: container.sizes,
     };
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: dataField &&
-                    Object.keys(dataField).map((key) => (_jsx("div", { className: widthSizes[dataField[key]?.size], children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center", children: [_jsx("div", { children: dataField[key]?.title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
+                    Object.keys(dataField).map((key) => (_jsx("div", { className: widthSizes[dataField[key]
+                            ?.size], children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center", children: [_jsx("div", { children: dataField[key]?.title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
                                         if (orderBy === key) {
                                             if (orderHow === "asc")
                                                 return _jsx(SVG.Direction.Asc, {});

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

@@ -45,6 +45,6 @@ function RowElement(props) {
         return _jsx(SelectRoll, { item: item, 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(Label.Button, { title: item[key], hoverTitle: data.hoverTitle, onClick: () => data.onClick(item), option: { ...data.option, width: "xs", height: "xs" } }));
     return _jsx(_Fragment, { children: item[key] });
 }

package/layout/template/DataField.d.ts

@@ -1,5 +1,5 @@
 import { DataFieldProps } from "../../interface";
-declare function Board<T>({ id, dataField }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Board<T extends Record<string, any>>({ id, dataField, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 declare function Card<T>({ id, dataField }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const DataField: {
     Board: typeof Board;

package/layout/template/DataField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataFieldDesign from "../design/DataField.design";
-function Board({ id, dataField }) {
+function Board({ id, dataField, }) {
     return (_jsx(DataFieldDesign, { id: id, dataField: dataField, option: {
             position: "fixed top-34 xl:top-0 left-0 xl:relative z-20",
             padding: "px-2 xs:px-4 xl:px-7.5",

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 namespace Row {
-    var Card: <T>({ item, dataField, stateAction, onClick, buttons, height, noPadding, noHover, dot, }: Omit<RowProps<T>, "option"> & {
+    var Board: <T>({ item, dataField, onClick, buttons, dot, option, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Card: <T>({ item, dataField, stateAction, onClick, buttons, height, noPadding, noHover, dot, option, }: RowProps<T> & {
         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;
 }
 export default Row;

package/layout/template/Row.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.79",
+  "version": "1.0.80",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -29,6 +29,7 @@
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2",
+    "uuid": "^10.0.0",
     "zustand": "^4.5.0"
   },
   "devDependencies": {}

package/version.txt

@@ -1 +1 @@
-1.0.79
+1.0.80