@edu-tosel/design 1.0.83 → 1.0.85

package/interface/Data.d.ts

@@ -1,5 +1,5 @@
 import { Replace } from "./Action";
-import { OnClick, Titles } from "./Property";
+import { Click, OnClick, Titles } from "./Property";
 export interface DataPackage<T> {
     dataField: DataField<T>;
     dataSet: Omit<DataSet<T>, "renderItem">;
@@ -40,10 +40,10 @@ declare function isDataSelectRoll(obj: any): obj is DataSelectRoll;
 type DataButton<T> = {
     type: "button";
     onClick: OnClick<T>;
-    hoverTitle?: ((item: T) => string) | string;
+    hoverTitle?: Click<T, string> | string;
     option?: {
-        text?: string;
-        background?: string;
+        text?: Click<T, string> | string;
+        background?: Click<T, string> | string;
     };
 };
 declare function isDataButton<T>(obj: any): obj is DataButton<T>;

package/interface/Property.d.ts

@@ -41,6 +41,7 @@ export type Size = "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "
  * @property {"full"} full - Full size
  */
 export type ImageSize = "sub" | "full";
+export type Click<REQ = unknown, RES = any> = (prop?: REQ) => RES;
 export type OnClick<Request = unknown, Response = unknown> = (prop?: Request) => Response | ((prop?: Request) => Promise<Response>);
 export interface Button extends LabelWidget {
 }

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

@@ -45,9 +45,15 @@ function RowElement(props) {
         return _jsx(SelectRoll, { item: item, entry: props.entry, data: data });
     }
     if (isDataButton(data)) {
-        return (_jsx(Label.Button, { title: item[key], hoverTitle: typeof data.hoverTitle === "string"
-                ? data.hoverTitle
-                : data.hoverTitle?.(item), onClick: () => data.onClick(item), option: { ...data.option, width: "xs", height: "xs" } }));
+        const { onClick, hoverTitle, option } = data;
+        const { background, text } = option ?? {};
+        return (_jsx(Label.Button, { title: item[key], hoverTitle: typeof hoverTitle === "string" ? hoverTitle : hoverTitle?.(item), onClick: () => onClick(item), option: {
+                ...data.option,
+                background: typeof background === "string" ? background : background?.(item),
+                text: typeof text === "string" ? text : text?.(item),
+                width: "xs",
+                height: "xs",
+            } }));
     }
     return _jsx(_Fragment, { children: item[key] });
 }

package/package.json

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

package/store/index.d.ts

@@ -23,7 +23,7 @@ interface ActionProps<T = any> {
     setDark: () => void;
     items: T[];
     setItems: (prop: T[]) => void;
-    updateItem: (prop: T, key: string) => void;
+    updateItem: (prop: T, key: string | string[]) => void;
 }
 export declare const useActionStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ActionProps<any>>>;
 export {};

package/store/index.js

@@ -70,6 +70,17 @@ export const useActionStore = create((set) => ({
     items: [],
     setItems: (prop) => set({ items: prop }),
     updateItem: (item, key) => set((state) => ({
-        items: state.items.map((prevItem) => prevItem.id === item.id ? { ...prevItem, [key]: item[key] } : prevItem),
+        items: state.items.map((prevItem) => {
+            if (typeof key === "string")
+                return prevItem.id === item.id
+                    ? { ...prevItem, [key]: item[key] }
+                    : prevItem;
+            return prevItem.id === item.id
+                ? {
+                    ...prevItem,
+                    ...key.reduce((acc, cur) => ({ ...acc, [cur]: item[cur] }), {}),
+                }
+                : prevItem;
+        }),
     })),
 }));

package/version.txt

@@ -1 +1 @@
-1.0.83
+1.0.85