@edu-tosel/design 1.0.90 → 1.0.91

package/interface/Modal.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { Button, Scripts, Size, State, Titles } from "./Property";
 import { ShowAction } from "./Action";
-import { InputWidget, SelectSwitchProps, SelectTagProps } from "./widget";
+import { InputWidget, SelectHandleProps, SelectPaginationProps, SelectSwitchProps, SelectTagProps } from "./widget";
 interface Option {
     className?: string;
     width: Size;
@@ -25,15 +25,23 @@ interface ConfirmModalProps<T = any> extends ModalProps {
     buttons: [Button, Button];
     widgets?: ConfirmModalWidget<T>[];
 }
-type ConfirmModalWidget<T = string> = ConfirmModalSelectSwitchProps<T> | ConfirmModalSelectTagProps<T> | ConfirmModalInputFormProps | ConfirmModalNodeProps;
+type ConfirmModalWidget<T = string> = ConfirmModalSelectSwitchProps<T> | ConfirmModalSelectHandleProps<T> | ConfirmModalSelectTagProps<T> | ConfirmModalPaginationProps<T> | ConfirmModalInputFormProps | ConfirmModalNodeProps;
 interface ConfirmModalSelectSwitchProps<T> {
     type: "selectSwitch";
     data: SelectSwitchProps<T>;
 }
+interface ConfirmModalSelectHandleProps<T> {
+    type: "selectHandle";
+    data: SelectHandleProps<T>;
+}
 interface ConfirmModalSelectTagProps<T> {
     type: "selectTag";
     data: SelectTagProps<T>;
 }
+interface ConfirmModalPaginationProps<T> {
+    type: "selectPagination";
+    data: SelectPaginationProps<T>;
+}
 interface ConfirmModalInputFormProps {
     type: "inputForm";
     data: InputWidget;

package/interface/widget/Select.d.ts

@@ -2,8 +2,8 @@ import { Widget } from ".";
 import { Size, State } from "../Property";
 type SelectOptionTuple<T> = [T, string];
 export interface SelectOption<T> {
-    title: string;
     value: T;
+    title?: string;
     icon?: string;
 }
 export type SelectOptionInput<T> = SelectOption<T> | SelectOptionTuple<T>;
@@ -42,4 +42,11 @@ export interface SelectHandleProps<T> {
         className?: string;
     };
 }
+export interface SelectPaginationProps<T> {
+    state: State<T>;
+    selectOptions: SelectOptionInput<T>[];
+    option?: {
+        className?: string;
+    };
+}
 export {};

package/modal/template/Confirm/Confirm.js

@@ -18,8 +18,13 @@ export default function Confirm(props) {
         } }));
 }
 function ConfirmModalWidget({ type, data }) {
+    const arrange = "w-full justify-center flex";
     if (type === "selectSwitch")
-        return _jsx(Select.Switch, { ...data });
+        return _jsx(Select.Switch, { ...data, option: { className: arrange } });
+    if (type === "selectHandle")
+        return _jsx(Select.Handle, { ...data, option: { className: arrange } });
+    if (type === "selectPagination")
+        return (_jsx(Select.Pagination, { ...data, option: { className: "flex w-full justify-end" } }));
     if (type === "selectTag")
         return _jsx(Select.Tag, { ...data });
     if (type === "inputForm")

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.90
+1.0.91

package/widget/template/Pagination.d.ts

@@ -1,7 +1,6 @@
 import { State } from "../../interface";
-interface PaginationProps<T> {
+export interface SelectPaginationProps<T> {
     state: State<T>;
     selectOptions: T[];
 }
-export default function Pagination<T>({ state, selectOptions, }: PaginationProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function Pagination<T>({ state, selectOptions, }: SelectPaginationProps<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Handle.js

@@ -10,10 +10,12 @@ export default function SelectHandle({ state, selectOptions: selectOptionsInput,
         .map(({ value }) => value)
         ?.indexOf(state?.[0]);
     const container = {
+        className,
+    };
+    const body = {
         positions: "relative",
         sizes: "w-102.5 h-10",
         styles: "rounded-full bg-gray-light p-1.25",
-        className,
     };
     const area = {
         sizes: `${widthSizes[Math.round(((valueIndex + 1) / length) * 100)]} h-7.5`,
@@ -26,7 +28,7 @@ export default function SelectHandle({ state, selectOptions: selectOptionsInput,
         sizes: "w-5 h-5",
         styles: "rounded-full bg-white",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(area), children: _jsx("div", { className: cn(handle) }) }), _jsx("div", { className: "absolute flex w-full h-full top-0 left-0", children: selectOptions?.map(({ value }) => (_jsx("button", { onClick: () => {
-                        return state?.[1](value);
-                    }, className: "flex flex-1 h-10 " }, value))) })] }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { className: cn(area), children: _jsx("div", { className: cn(handle) }) }), _jsx("div", { className: "absolute flex w-full h-full top-0 left-0", children: selectOptions?.map(({ value }) => (_jsx("button", { onClick: () => {
+                            return state?.[1](value);
+                        }, className: "flex flex-1 h-10 " }, value))) })] }) }));
 }

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

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

package/widget/template/Select/Pagination.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { toSelectOption } from "../../../interface";
+import SVG from "../../../asset/SVG";
+export default function Pagination({ state, selectOptions: selectOptionsInput, option, }) {
+    const { className } = option ?? {};
+    const selectOptions = selectOptionsInput?.map(toSelectOption);
+    const [value, setValue] = state;
+    const container = {
+        className,
+    };
+    const body = {
+        displays: "flex items-center justify-between",
+        sizes: "w-23.5 h-6.25",
+        backgrounds: "bg-gray-dark",
+        boundaries: "rounded-full px-2.5",
+        fonts: "text-xs",
+    };
+    const index = selectOptions.indexOf(selectOptions.find((option) => option.value === value) ?? selectOptions[0]);
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => {
+                        if (index > 0)
+                            setValue(selectOptions[index - 1].value);
+                    } }), _jsxs("div", { className: "flex items-center gap-x-[3px] text-white", children: [index + 1, _jsx("div", { className: "text-gray-medium text-base font-pretendard-bold", children: "/" }), selectOptions.length] }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => {
+                        if (index < selectOptions.length - 1)
+                            setValue(selectOptions[index + 1].value);
+                    } })] }) }));
+}

package/widget/template/Select/Select.LG.js

@@ -36,7 +36,7 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
         if (typeof index === "undefined")
             return setIndex(0);
         if (e.key === "Enter") {
-            setText(filteredOptions[index]?.title);
+            setText(String(filteredOptions[index]?.title));
             return setValue(filteredOptions[index]?.value);
         }
         if (e.key === "ArrowDown") {
@@ -47,7 +47,7 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
         }
     };
     useEffect(() => {
-        setFilterdOptions(selectOptions?.filter(({ title }) => title.includes(search)));
+        setFilterdOptions(selectOptions?.filter(({ title }) => title?.includes(search)));
     }, [search, selectOptions]);
     useEffect(() => {
         if (typeof index === "number" && itemRefs.current[index]) {
@@ -109,7 +109,7 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
                 item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
                                 setValue(value);
-                                setText(title);
+                                setText(String(title));
                                 return setIsOpen(false);
                             }, className: cn(label(order === index)), children: title }) }, id + value))) })));
             })] }));

package/widget/template/Select/Select.js

@@ -32,7 +32,7 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
         if (typeof index === "undefined")
             return setIndex(0);
         if (e.key === "Enter") {
-            setText(filteredOptions[index]?.title);
+            setText(String(filteredOptions[index]?.title));
             return setValue(filteredOptions[index]?.value);
         }
         if (e.key === "ArrowDown")
@@ -41,7 +41,7 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
             return setIndex((index - 1 + filteredOptions.length) % filteredOptions.length);
     };
     useEffect(() => {
-        setFilterdOptions(selectOptions?.filter(({ title }) => text.includes(title)));
+        setFilterdOptions(selectOptions?.filter(({ title }) => text.includes(String(title))));
     }, [search, selectOptions]);
     // scrollIntoViews
     const listRef = useRef(null);
@@ -113,7 +113,7 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
                 item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
                                 setValue(value);
-                                setText(title);
+                                setText(String(title));
                                 return setIsOpen(false);
                             }, className: cn(label, order === index ? "w-full" : "w-auto"), children: title }) }, id + value))) })));
             })] }));

package/widget/template/Select/Switch.js

@@ -25,11 +25,13 @@ function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
     const selectOptions = selectOptionsInput.map(toSelectOption);
     const { text, size, className } = option ?? {};
     const container = {
+        className,
+    };
+    const body = {
         sizes: `${widthSize[size ?? "md"]} ${heightSize[size ?? "md"]}`,
         displays: `flex ${gapSize[size ?? "md"]}`,
         paddings: paddingSize[size ?? "md"],
         styles: "rounded-full bg-gray-light",
-        className,
     };
     const button = (flag) => ({
         displays: "flex flex-1 gap-x-3 justify-center items-center",
@@ -38,6 +40,6 @@ function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
         textSizes: textSize[size ?? "md"],
         styles: "rounded-full ",
     });
-    return (_jsx("div", { className: cn(container), children: selectOptions?.map(({ value, icon, title }) => (_jsxs("button", { onClick: () => state[1](value), className: cn(button(value === state[0])), children: [icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }, String(value)))) }));
+    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(body), children: selectOptions?.map(({ value, icon, title }) => (_jsxs("button", { onClick: () => state[1](value), className: cn(button(value === state[0])), children: [icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }, String(value)))) }) }));
 }
 export default SelectSwitch;

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

@@ -4,11 +4,13 @@ import Tag from "./Tag";
 import Handle from "./Handle";
 import Switch from "./Switch";
 import Swipe from "./Swipe";
+import Pagination from "./Pagination";
 declare const Select: typeof _Select & {
     LG: typeof LG;
     Tag: typeof Tag;
     Handle: typeof Handle;
     Switch: typeof Switch;
     Swipe: typeof Swipe;
+    Pagination: typeof Pagination;
 };
 export default Select;

package/widget/template/Select/index.js

@@ -4,5 +4,13 @@ import Tag from "./Tag";
 import Handle from "./Handle";
 import Switch from "./Switch";
 import Swipe from "./Swipe";
-const Select = Object.assign(_Select, { LG, Tag, Handle, Switch, Swipe });
+import Pagination from "./Pagination";
+const Select = Object.assign(_Select, {
+    LG,
+    Tag,
+    Handle,
+    Switch,
+    Swipe,
+    Pagination,
+});
 export default Select;