@edu-tosel/design 1.0.284 → 1.0.286

package/board/design/Board.design.d.ts

@@ -1,2 +1,2 @@
 import { BoardProps } from "../../interface/Board";
-export declare function Board<B>({ children, action, option, debug, buttons, }: BoardProps<B>): import("react/jsx-runtime").JSX.Element;
+export declare function Board<B1, B2, B3, B4>({ children, action, option, debug, buttons, }: BoardProps<B1, B2, B3, B4>): import("react/jsx-runtime").JSX.Element;

package/board/design/Header.design.d.ts

@@ -1,2 +1,2 @@
 import { BoardHeaderProps } from "../../interface/Board";
-export default function BoardHeader<B>({ titles, tag, widgets, option, }: BoardHeaderProps<B>): import("react/jsx-runtime").JSX.Element;
+export default function BoardHeader<B1, B2, B3, B4>({ titles, tag, widgets, option, }: BoardHeaderProps<B1, B2, B3, B4>): import("react/jsx-runtime").JSX.Element;

package/board/design/Header.design.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
-import { Input, Select } from "../../widget";
+import { Input, Label, Select } from "../../widget";
 export default function BoardHeader({ titles, tag, widgets, option, }) {
     const { title, icon, titleColor } = titles ?? {};
     const { selects, inputs } = tag ?? {};
@@ -23,8 +23,18 @@ function HeaderWidgetRender(props) {
     if (props.type === "select") {
         return _jsx(Select, { ...props.data });
     }
+    if (props.type === "button") {
+        return (_jsx(Label.Button, { ...props.data, option: {
+                ...props.data.option,
+                width: "xs",
+                height: "xs",
+            } }));
+    }
     if (props.type === "selectToggle") {
-        return _jsx(Select.Toggle, { ...props.data });
+        return (_jsx(Select.Toggle, { ...props.data, option: {
+                ...props.data.option,
+                isText: true,
+            } }));
     }
     return null;
 }

package/board/template/CanvasBoard.d.ts

@@ -1,2 +1,2 @@
 import { CanvasBoardProps } from "../../interface/Board";
-export default function CanvasBoard<B>({ header, children, action, buttons, option, }: CanvasBoardProps<B>): import("react/jsx-runtime").JSX.Element;
+export default function CanvasBoard<B1, B2, B3, B4>({ header, children, action, buttons, option, }: CanvasBoardProps<B1, B2, B3, B4>): import("react/jsx-runtime").JSX.Element;

package/board/template/ManageBoard.d.ts

@@ -1,4 +1,4 @@
 import { ManageBoardProps } from "../../interface/Board";
-export default function ManageBoard<B, K extends string, T extends {
+export default function ManageBoard<B1, B2, B3, B4, K extends string, T extends {
     [p in K]: any;
-}>({ header, dataSets, dataField, action, option, buttons, }: ManageBoardProps<B, K, T>): import("react/jsx-runtime").JSX.Element;
+}>({ header, dataSets, dataField, action, option, buttons, }: ManageBoardProps<B1, B2, B3, B4, K, T>): import("react/jsx-runtime").JSX.Element;

package/board/template/PaperBoard.d.ts

@@ -1,2 +1,2 @@
 import { PaperBoardProps } from "../../interface/Board";
-export default function PaperBoard<B>({ children, debug, option, }: PaperBoardProps<B>): import("react/jsx-runtime").JSX.Element;
+export default function PaperBoard<B1, B2, B3, B4>({ children, debug, option, }: PaperBoardProps<B1, B2, B3, B4>): import("react/jsx-runtime").JSX.Element;

package/interface/Board.d.ts

@@ -14,8 +14,8 @@ interface BoardOption {
     noPadding?: boolean;
     noMobile?: boolean;
 }
-export interface BoardProps<B> {
-    header?: BoardHeaderProps<B>;
+export interface BoardProps<B1, B2, B3, B4> {
+    header?: BoardHeaderProps<B1, B2, B3, B4>;
     children?: React.ReactNode;
     action?: ActionProps;
     option?: BoardOption;
@@ -35,30 +35,34 @@ interface HeaderSelectToggleWidget<T> {
     type: "selectToggle";
     data: SelectToggleProps<T>;
 }
-export type HeaderWidgetType<B> = HeaderInputWidget | HeaderSelectWidget<B> | HeaderSelectToggleWidget<B>;
-export interface BoardHeaderProps<B> {
+interface HeaderButtonWidget {
+    type: "button";
+    data: LabelWidget;
+}
+export type HeaderWidgetType<B1, B2, B3, B4> = HeaderInputWidget | HeaderSelectWidget<B1> | HeaderSelectToggleWidget<B2> | HeaderButtonWidget;
+export interface BoardHeaderProps<B1, B2, B3, B4> {
     titles?: Omit<Titles, "subtitle"> & {
         icon?: string;
     };
     tag?: {
-        selects?: SelectWidget<B>[];
+        selects?: SelectWidget<B1>[];
         inputs?: InputWidget[];
     };
-    widgets?: HeaderWidgetType<B>[];
+    widgets?: HeaderWidgetType<B1, B2, B3, B4>[];
     option?: {
         background?: string;
         text?: string;
         boundary?: string;
     };
 }
-export interface CanvasBoardProps<B> extends BoardProps<B> {
+export interface CanvasBoardProps<B1, B2, B3, B4> extends BoardProps<B1, B2, B3, B4> {
 }
-export interface ManageBoardProps<B, K extends string, T extends {
+export interface ManageBoardProps<B1, B2, B3, B4, K extends string, T extends {
     [p in K]: any;
-}> extends BoardProps<B> {
+}> extends BoardProps<B1, B2, B3, B4> {
     dataSets: DataSet<T>[];
     dataField?: DataField<T>;
 }
-export interface PaperBoardProps<B> extends BoardProps<B> {
+export interface PaperBoardProps<B1, B2, B3, B4> extends BoardProps<B1, B2, B3, B4> {
 }
 export {};

package/interface/widget/Select.d.ts

@@ -53,6 +53,7 @@ export interface SelectToggleProps<T> {
     state: State<T>;
     selectOptions: [SelectOptionInput<T>, SelectOptionInput<T>];
     option?: {
+        isText?: boolean;
         className?: string;
     };
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.284
+1.0.286

package/widget/template/Select/Toggle.d.ts

@@ -1,2 +1,2 @@
 import { SelectToggleProps } from "../../../interface";
-export default function SelectToggle<T>({ state, selectOptions: selectOptionsInput, }: SelectToggleProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectToggle<T>({ state, selectOptions: selectOptionsInput, option, }: SelectToggleProps<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Toggle.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toSelectOption } from "../../../interface";
 import { cn } from "../../../util";
-export default function SelectToggle({ state, selectOptions: selectOptionsInput, }) {
+export default function SelectToggle({ state, selectOptions: selectOptionsInput, option, }) {
     const selectOptions = selectOptionsInput?.map(toSelectOption);
     const [value, setValue] = state;
     const isOff = value === selectOptions[0].value;
@@ -25,5 +25,6 @@ export default function SelectToggle({ state, selectOptions: selectOptionsInput,
             return setValue(selectOptions[1].value);
         return setValue(selectOptions[0].value);
     };
-    return (_jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(controller) }) }));
+    const selectedTitle = selectOptions?.find((option) => option.value === value)?.title;
+    return (_jsxs("div", { className: "flex items-center gap-x-1.5 ", children: [selectedTitle && option?.isText && (_jsx("div", { className: "text-sm leading-none", children: selectedTitle })), _jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(controller) }) })] }));
 }