@edu-tosel/design 1.0.23 → 1.0.25

package/card/widget/Card.design.js

@@ -52,9 +52,5 @@ export default function CardDesign({ header, children, options, debug, }) {
         overflow: `overflow-${overflow ?? "hidden"}`,
         classNames,
     };
-    return (_jsxs("div", { className: cn(container), children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick &&
-                    (() => {
-                        setIsOwn(true);
-                        return onClick();
-                    }), className: cn(body), children: children })] }));
+    return (_jsxs("div", { className: cn(container), children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick && onClick, className: cn(body), children: children })] }));
 }

package/html/widget/Input.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../../util";
+import Obstacle from "./Obstacle";
 const widthSize = {
     xs: "w-28",
     sm: "w-48",
@@ -11,14 +12,20 @@ const widthSize = {
     full: "w-full",
 };
 export default function Input({ state, onKeyDown, placeholder, options, }) {
-    const { width } = options ?? {};
+    const { width, disabled } = options ?? {};
     const id = useId();
     const [value, setValue] = state;
     const container = {
+        positions: "relative",
         width: `${widthSize[width ?? "xs"]} h-8`,
-        styles: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-slate-200 text-xs",
+        displays: "flex items-center",
+    };
+    const body = {
+        styles: "rounded-md bg-slate-200 text-xs",
+        sizes: "w-full h-full",
+        paddings: "pl-4",
         pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
         effect: `transition-all`,
     };
-    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
 }

package/html/widget/Label.design.js

@@ -32,7 +32,7 @@ export default function LabelDesign({ title, onClick, options, }) {
     const obstacle = {
         positions: "absolute",
         sizes: "w-full h-full",
-        background: "bg-white/80 rounded-xl",
+        background: "bg-white/80 ",
     };
     return (_jsx("div", { className: className, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle) }))] }) }));
 }

package/html/widget/Obstacle.d.ts

@@ -0,0 +1,4 @@
+import { Disabled } from "../../interface";
+export default function Obstacle({ disabled }: {
+    disabled?: Disabled;
+}): false | import("react/jsx-runtime").JSX.Element | undefined;

package/html/widget/Obstacle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+export default function Obstacle({ disabled }) {
+    const obstacle = {
+        positions: "absolute",
+        sizes: "w-full h-full",
+        background: "bg-white/80 ",
+    };
+    return (disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle) })));
+}

package/interface/Card.d.ts

@@ -1,4 +1,4 @@
-import { Button, DataField, ImageSize, OnClick, Size, Titles } from "./Property";
+import { Button, DataField, Disabled, ImageSize, OnClick, Size, Titles } from "./Property";
 import { Replace } from "./Widget";
 interface CardOptions {
     classNames?: string;
@@ -45,7 +45,7 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
 interface ButtonInLay {
     title: string;
     onClick: OnClick;
-    disabled?: boolean | OnClick;
+    disabled?: Disabled;
     width?: Size;
     height?: Size;
     background?: string;

package/interface/HTMLElement.d.ts

@@ -1,4 +1,4 @@
-import { OnClick, Size, State } from "./Property";
+import { Disabled, OnClick, Size, State } from "./Property";
 export declare const HTMLElementType: {
     readonly TEXT: "text";
     readonly BUTTON: "button";
@@ -14,7 +14,7 @@ export interface HTMLElement {
         height?: Size;
         background?: string;
         text?: string;
-        disabled?: boolean | OnClick;
+        disabled?: Disabled;
     };
 }
 export interface HTMLLabelElement extends HTMLElement {

package/interface/Overlay.d.ts

@@ -1,20 +1,23 @@
-import { HTMLElementType } from "./HTMLElement";
-import { State, Titles } from "./Property";
+import { HTMLElementType, HTMLLabelElement } from "./HTMLElement";
+import { Disabled, OnClick, State, Titles } from "./Property";
 export interface OverlayProps {
     titles: Titles;
     isVisible?: boolean;
     event?: string;
     children?: React.ReactNode;
 }
+export interface HTMLElementFrame {
+    title: string;
+    type: HTMLElementType;
+    state: State<string> | State<boolean>;
+    selectOptions?: [string | number, string][];
+    labels?: [string | boolean, string][];
+    disabled?: Disabled;
+    onClick?: OnClick;
+}
 export interface InfoOverlayProps extends OverlayProps {
 }
-export interface ManageOverlayProps extends InfoOverlayProps {
-    elements?: {
-        title: string;
-        state: State<string> | State<boolean>;
-        type: HTMLElementType;
-        selectOptions?: [string | number, string][];
-        labels?: [string | boolean, string][];
-        isDisabled?: boolean;
-    }[];
+export interface ManageOverlayProps extends OverlayProps {
+    elements?: HTMLElementFrame[];
+    buttons?: HTMLLabelElement[];
 }

package/interface/Property.d.ts

@@ -36,6 +36,7 @@ export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
  */
 export type OnClick<T = unknown> = (prop?: T) => unknown | ((prop?: T) => Promise<unknown>);
 export type Button = [string, OnClick];
+export type Disabled = boolean | OnClick;
 export type Scripts = {
     script: string;
     subScript?: string;

package/layout/template/Shelf.js

@@ -9,7 +9,7 @@ function Shelf({ titles, debug, children }) {
 }
 function Wrap({ classNames, titles, children, debug, }) {
     const container = {
-        displays: "flex flex-col xl:flex-row flex-wrap gap-x-7.5",
+        displays: "flex flex-row flex-wrap gap-x-7.5",
         classNames,
     };
     return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {

package/layout/widget/DataField.design.js

@@ -20,9 +20,9 @@ export default function DataFieldDesign({ id, dataField, options, }) {
                     Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100`, 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", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z", fill: "#105652" }) }));
+                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z", fill: "#105652" }) }, id + key + "asc"));
                                             else if (orderHow === "desc")
-                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z", fill: "#105652" }) }));
+                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z", fill: "#105652" }) }, id + key + "asc"));
                                             else
                                                 return "";
                                         }

package/overlay/template/Manage.d.ts

@@ -1,2 +1,2 @@
 import { ManageOverlayProps } from "../../interface";
-export default function Manage({ titles, isVisible, event, elements, }: ManageOverlayProps): import("react/jsx-runtime").JSX.Element;
+export default function Manage({ titles, isVisible, event, elements, buttons, }: ManageOverlayProps): import("react/jsx-runtime").JSX.Element;

package/overlay/template/Manage.js

@@ -1,17 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, Toggle } from "../..";
+import { Input, Label, Select, Toggle } from "../..";
 import OverlayDesign from "../widget/Overlay.design";
+import Frame from "../widget/Frame.design";
 import { useId } from "react";
-export default function Manage({ titles, isVisible, event, elements, }) {
+import { cn } from "../../util";
+export default function Manage({ titles, isVisible, event, elements, buttons, }) {
     const id = useId();
-    return (_jsx(OverlayDesign, { titles: titles, event: event, isVisible: isVisible, children: elements?.map(({ title, type, labels, state, isDisabled, selectOptions }) => {
-            if (type === "select")
-                return (_jsx(Frame, { title: title, children: _jsx(Select, { state: state, selectOptions: selectOptions }) }, id + title));
-            if (type === "toggle")
-                return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, options: { disabled: isDisabled } }) }, id + title));
-            return null;
-        }) }));
-}
-function Frame({ title, children, }) {
-    return (_jsxs("div", { className: "flex items-center gap-3.75", children: [_jsx("div", { className: "w-20 text-sm font-pretendard-bold text-gray-dim", children: title }), children] }));
+    const body = {
+        sizes: "w-full xl:h-120 ",
+        styles: "overflow-y-scroll",
+    };
+    return (_jsxs(OverlayDesign, { titles: titles, event: event, isVisible: isVisible, children: [_jsx("div", { className: cn(body), children: elements?.map(({ title, type, labels, state, selectOptions, disabled }) => {
+                    if (type === "select")
+                        return (_jsx(Frame, { title: title, children: _jsx(Select, { state: state, selectOptions: selectOptions }) }, id + title));
+                    if (type === "toggle")
+                        return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, options: { disabled } }) }, id + title));
+                    if (type === "input")
+                        return (_jsx(Frame, { title: title, children: _jsx(Input, { state: state, options: {
+                                    width: "md",
+                                    disabled,
+                                } }) }, id + title));
+                    return null;
+                }) }), _jsx("div", { className: "absolute bottom-12 right-12 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                        width: "sm",
+                        height: "xs",
+                        background: options?.background ?? "bg-crimson-dark",
+                        text: options?.text ?? "text-white",
+                        disabled: !onClick ? true : false,
+                    } }, id + title))) })] }));
 }

package/overlay/widget/Frame.design.d.ts

@@ -0,0 +1,4 @@
+export default function Frame({ title, children, }: {
+    title: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/overlay/widget/Frame.design.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Frame({ title, children, }) {
+    return (_jsxs("div", { className: "flex items-center gap-3.75 h-9 ", children: [_jsx("div", { className: "w-20 text-sm font-pretendard-bold text-gray-dim", children: title }), children] }));
+}

package/overlay/widget/Overlay.design.js

@@ -7,19 +7,25 @@ export default function OverlayDesign({ titles, children, event, isVisible, }) {
     const { title } = titles;
     const container = {
         positions: "absolute top-0 right-0 z-30",
-        sizes: "h-full h",
+        sizes: "h-full",
         styles: "box-shadow-sm bg-white",
     };
     const body = {
         positions: "relative",
+        sizes: "h-full",
         paddings: "pt-12 pl-12",
         displays: "flex flex-col gap-3.5",
     };
+    const button = {
+        positions: "absolute top-2 left-2",
+        displays: "flex justify-center items-center ",
+        sizes: "w-7 h-7",
+    };
     const transitions = useTransition(isVisible, {
-        from: { width: "0%" },
-        enter: { width: "80%", maxWidth: "540px" },
-        leave: { width: "0%" },
+        from: { width: "10%", opacity: 0 },
+        enter: { width: "80%", maxWidth: "540px", opacity: 1 },
+        leave: { width: "10%", opacity: 0 },
         config: { duration: 300 },
     });
-    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: cn(body), children: [_jsx("div", { className: "font-pretendard-bold text-2xl", children: title }), _jsx("div", { className: "flex flex-col gap-3", children: children })] }), event && (_jsx("button", { className: "absolute top-3 left-3 bg-black w-6 h-6", onClick: () => removeView(event) }))] })));
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: cn(body), children: [_jsx("div", { className: "font-pretendard-bold text-2xl", children: title }), _jsx("div", { className: "flex flex-col gap-3", children: children })] }), event && (_jsx("button", { onClick: () => removeView(event), className: cn(button), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M6.28003 5.22C6.13786 5.08752 5.94981 5.0154 5.75551 5.01882C5.56121 5.02225 5.37582 5.10096 5.23841 5.23838C5.101 5.37579 5.02228 5.56118 5.01886 5.75548C5.01543 5.94978 5.08755 6.13782 5.22003 6.28L8.94003 10L5.22003 13.72C5.14634 13.7887 5.08724 13.8715 5.04625 13.9635C5.00526 14.0555 4.98322 14.1548 4.98144 14.2555C4.97966 14.3562 4.99819 14.4562 5.03591 14.5496C5.07363 14.643 5.12977 14.7278 5.20099 14.799C5.27221 14.8703 5.35705 14.9264 5.45043 14.9641C5.54382 15.0018 5.64385 15.0204 5.74455 15.0186C5.84526 15.0168 5.94457 14.9948 6.03657 14.9538C6.12857 14.9128 6.21137 14.8537 6.28003 14.78L10 11.06L13.72 14.78C13.7887 14.8537 13.8715 14.9128 13.9635 14.9538C14.0555 14.9948 14.1548 15.0168 14.2555 15.0186C14.3562 15.0204 14.4562 15.0018 14.5496 14.9641C14.643 14.9264 14.7279 14.8703 14.7991 14.799C14.8703 14.7278 14.9264 14.643 14.9642 14.5496C15.0019 14.4562 15.0204 14.3562 15.0186 14.2555C15.0168 14.1548 14.9948 14.0555 14.9538 13.9635C14.9128 13.8715 14.8537 13.7887 14.78 13.72L11.06 10L14.78 6.28C14.9125 6.13782 14.9846 5.94978 14.9812 5.75548C14.9778 5.56118 14.8991 5.37579 14.7617 5.23838C14.6242 5.10096 14.4389 5.02225 14.2446 5.01882C14.0503 5.0154 13.8622 5.08752 13.72 5.22L10 8.94L6.28003 5.22Z", fill: "#7F7F7F" }) }) }))] })));
 }

package/package.json

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

package/store/index.js

@@ -2,6 +2,7 @@ import { create } from "zustand";
 export const useWidgetStore = create((set) => ({
     events: [],
     setView: (prop) => set((state) => {
+        state.setIsOwn(true);
         if (state.events.find(({ event }) => event === prop) !== undefined)
             return state;
         return {

package/version.txt

@@ -1 +1 @@
-1.0.23
+1.0.25