@edu-tosel/design 1.0.55 → 1.0.57

package/board/{widget/Header.d.ts → design/Header.design.d.ts}

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

package/board/template/CanvasBoard.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Action } from "../..";
 import { cn } from "../../util";
 import { Board } from "../design/Board.design";
-import BoardHeader from "../widget/Header";
+import BoardHeader from "../design/Header.design";
 export default function CanvasBoard({ header, children, action, buttons, options, }) {
     const body = {
         displays: "flex flex-col lg:flex-row lg:flex-wrap gap-7.5",

package/board/template/ManageBoard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DataField, Action, Shelf } from "../..";
 import { Board } from "../design/Board.design";
-import BoardHeader from "../widget/Header";
+import BoardHeader from "../design/Header.design";
 import { cn, sortByOrder } from "../../util";
 import { useActionStore } from "../../store";
 import { useId } from "react";

package/interface/Action.d.ts

@@ -39,6 +39,7 @@ export interface RowProps<T> {
     dataField?: DataField<T>;
     onClick?: OnClick<T>;
     buttons?: HTMLLabelElement[];
+    flag?: boolean;
     options?: {
         height?: string;
         size?: string;

package/interface/Card.d.ts

@@ -43,7 +43,7 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
         score: number;
     };
 }
-interface ButtonInLay {
+export interface ButtonInLay {
     title: string;
     onClick: OnClick;
     disabled?: Disabled;

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

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

package/layout/design/Row.design.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../../util";
 import { Label } from "../../widget";
-export default function RowDesign({ item, dataField, options, onClick, buttons, }) {
+export default function RowDesign({ item, dataField, options, onClick, buttons, flag, }) {
     const { size, padding, text, noHover, className, isPointer } = options ?? {};
     const id = useId();
     const container = {
@@ -18,7 +18,13 @@ export default function RowDesign({ item, dataField, options, onClick, buttons,
         styles: "truncate",
         className,
     };
-    return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [dataField &&
+    const flagBox = (flag) => ({
+        positions: "absolute left-3.5",
+        backgrounds: flag ? "bg-green-500" : "bg-red-500",
+        sizes: "w-2 h-2",
+        styles: "rounded-full",
+    });
+    return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof flag !== "undefined" && _jsx("div", { className: cn(flagBox(flag)) }), dataField &&
                 Object.keys(dataField).map((key) => (_jsx("div", { className: cn(`w-${dataField[key]?.size}/100`, itemBox), children: String(item[key]) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
                         background: options?.background ?? "bg-crimson-dark",
                         text: options?.text ?? "text-white",

package/layout/template/Row.d.ts

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

package/layout/template/Row.js

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

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.55
+1.0.57