@edu-tosel/design 1.0.44 → 1.0.46

package/globals.css

@@ -1,226 +1,226 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: "Pretendard-Medium";
-  src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Pretendard-Bold";
-  src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Pretendard-Light";
-  src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Kostar";
-  src: url("./asset/fonts/Kostar.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "NicoMoji";
-  src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Megrim";
-  src: url("./asset/fonts/Megrim.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Times-Newer-Roman-Bold";
-  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Times-Newer-Roman-BoldItalic";
-  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
-}
-
-input[type="date"]::-webkit-inner-spin-button,
-input[type="date"]::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}
-
-::-webkit-scrollbar {
-  width: 3px;
-  padding-right: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #808080;
-  opacity: 0.5;
-  border-radius: 10px;
-}
-
-.box-shadow {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
-}
-
-.box-shadow-sm {
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-}
-
-.border-gradient-green-to-red {
-}
-
-.x-shape {
-  position: relative;
-  width: 0.83625rem;
-  height: 0.83625rem;
-}
-
-.x-shape::before,
-.x-shape::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 2.5px;
-  border-radius: 2px;
-  height: 100%;
-  background-color: white;
-  transform-origin: center;
-}
-
-.x-shape::before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.x-shape::after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-.border-inner {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-.box-shadow-focus:focus {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-.box-shadow-focus-red:focus {
-  box-shadow: 0px 0px 10px 0px #ff8383;
-}
-.box-green {
-  background: rgba(16, 86, 82, 0.1);
-  color: #105652;
-}
-.box-green-focus:focus {
-  background: white;
-  color: black;
-  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
-}
-/* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
-.box-inner-shadow:hover {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-/* Date Picker Css */
-.react-datepicker__day--selected {
-  background-color: #105652 !important;
-}
-.react-datepicker__header {
-  background: white !important;
-  border: none !important;
-}
-.react-datepicker {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
-  border-radius: 0.375rem !important;
-  border: none !important;
-}
-.react-datepicker__day--keyboard-selected {
-  background-color: white !important;
-  color: black !important;
-}
-.react-datepicker__day--outside-month {
-  color: rgb(161 161 170) !important;
-}
-.react-datepicker__month-container {
-  padding-top: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 0.5rem;
-}
-.react-datepicker-popper {
-  transform: translate(0px 295px) !important;
-}
-.react-datepicker__input-container {
-  text-align: center !important;
-  border-radius: 0.375rem !important;
-  transition: all 0.3s;
-}
-.react-datepicker__input-container > input {
-  cursor: pointer !important;
-}
-.react-datepicker__input-container:hover {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
-}
-.react-datepicker__navigation {
-  top: 18px !important;
-}
-.react-datepicker__navigation--next {
-  right: 20px !important;
-}
-.react-datepicker__navigation--previous {
-  left: 182px !important;
-}
-.react-datepicker__current-month {
-  text-align: left !important;
-  margin-left: 16px !important;
-}
-.react-datepicker__triangle {
-  display: none !important;
-}
-.react-datepicker__children-container {
-  width: 16rem !important;
-}
-/* toggle button */
-.toggle[type="checkbox"]::before {
-  content: "";
-  position: absolute;
-  left: 1px;
-  top: 1px;
-  width: 1.1rem;
-  height: 1.1rem;
-  border-radius: 50%;
-  transform: scale(0.9);
-  background-color: white;
-  transition: left 100ms linear;
-}
-.toggle[type="checkbox"]:checked::before {
-  background-color: white;
-  left: 1.32rem;
-}
-.toggle[type="checkbox"]:checked {
-  background-color: #105652;
-}
-.toggle[type="checkbox"]:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.toggle[type="checkbox"]:disabled + span {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-/* checkbox */
-.check-box[type="checkbox"]:checked {
-  border-color: transparent;
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
-  background-size: 150%;
-  background-position: 50%;
-  background-repeat: no-repeat;
-}
-.check-box[type="checkbox"]:disabled {
-  background-color: #7f7f7f;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Pretendard-Medium";
+  src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pretendard-Bold";
+  src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pretendard-Light";
+  src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Kostar";
+  src: url("./asset/fonts/Kostar.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "NicoMoji";
+  src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Megrim";
+  src: url("./asset/fonts/Megrim.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-Bold";
+  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-BoldItalic";
+  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
+}
+
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+::-webkit-scrollbar {
+  width: 3px;
+  padding-right: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #808080;
+  opacity: 0.5;
+  border-radius: 10px;
+}
+
+.box-shadow {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
+}
+
+.box-shadow-sm {
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+}
+
+.border-gradient-green-to-red {
+}
+
+.x-shape {
+  position: relative;
+  width: 0.83625rem;
+  height: 0.83625rem;
+}
+
+.x-shape::before,
+.x-shape::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.5px;
+  border-radius: 2px;
+  height: 100%;
+  background-color: white;
+  transform-origin: center;
+}
+
+.x-shape::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.x-shape::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.border-inner {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.box-shadow-focus:focus {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.box-shadow-focus-red:focus {
+  box-shadow: 0px 0px 10px 0px #ff8383;
+}
+.box-green {
+  background: rgba(16, 86, 82, 0.1);
+  color: #105652;
+}
+.box-green-focus:focus {
+  background: white;
+  color: black;
+  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
+}
+/* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
+.box-inner-shadow:hover {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+/* Date Picker Css */
+.react-datepicker__day--selected {
+  background-color: #105652 !important;
+}
+.react-datepicker__header {
+  background: white !important;
+  border: none !important;
+}
+.react-datepicker {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+  border-radius: 0.375rem !important;
+  border: none !important;
+}
+.react-datepicker__day--keyboard-selected {
+  background-color: white !important;
+  color: black !important;
+}
+.react-datepicker__day--outside-month {
+  color: rgb(161 161 170) !important;
+}
+.react-datepicker__month-container {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.5rem;
+}
+.react-datepicker-popper {
+  transform: translate(0px 295px) !important;
+}
+.react-datepicker__input-container {
+  text-align: center !important;
+  border-radius: 0.375rem !important;
+  transition: all 0.3s;
+}
+.react-datepicker__input-container > input {
+  cursor: pointer !important;
+}
+.react-datepicker__input-container:hover {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+}
+.react-datepicker__navigation {
+  top: 18px !important;
+}
+.react-datepicker__navigation--next {
+  right: 20px !important;
+}
+.react-datepicker__navigation--previous {
+  left: 182px !important;
+}
+.react-datepicker__current-month {
+  text-align: left !important;
+  margin-left: 16px !important;
+}
+.react-datepicker__triangle {
+  display: none !important;
+}
+.react-datepicker__children-container {
+  width: 16rem !important;
+}
+/* toggle button */
+.toggle[type="checkbox"]::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  transform: scale(0.9);
+  background-color: white;
+  transition: left 100ms linear;
+}
+.toggle[type="checkbox"]:checked::before {
+  background-color: white;
+  left: 1.32rem;
+}
+.toggle[type="checkbox"]:checked {
+  background-color: #105652;
+}
+.toggle[type="checkbox"]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.toggle[type="checkbox"]:disabled + span {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* checkbox */
+.check-box[type="checkbox"]:checked {
+  border-color: transparent;
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+  background-size: 150%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+.check-box[type="checkbox"]:disabled {
+  background-color: #7f7f7f;
+}

package/hook/useFlag.js

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import { useWidgetStore } from "../store";
+import { useActionStore } from "../store";
 export default function useFlag({ safe, state, }) {
     const [value, action] = state;
-    const { flag, isOwn, setIsOwn } = useWidgetStore();
+    const { flag, isOwn, setIsOwn } = useActionStore();
     safe;
     useEffect(() => {
         if (isOwn) {

package/index.d.ts

@@ -2,7 +2,7 @@ import "./globals.css";
 export * from "./board";
 export * from "./card";
 export * from "./layout";
-export * from "./html";
+export * from "./widget";
 export * from "./interaction";
 export * from "./modal";
 export * from "./overlay";

package/index.js

@@ -2,7 +2,7 @@ import "./globals.css";
 export * from "./board";
 export * from "./card";
 export * from "./layout";
-export * from "./html";
+export * from "./widget";
 export * from "./interaction";
 export * from "./modal";
 export * from "./overlay";

package/interaction/template/Loading.d.ts

@@ -1,6 +1,6 @@
-import Jumper from "../widget/Jumper.design";
-import Spinner from "../widget/Spinner.design";
-import Worm from "../widget/Worm.design";
+import Jumper from "../design/Jumper.design";
+import Spinner from "../design/Spinner.design";
+import Worm from "../design/Worm.design";
 declare const Loading: {
     Jumper: typeof Jumper;
     Spinner: typeof Spinner;

package/interaction/template/Loading.js

@@ -1,6 +1,6 @@
-import Jumper from "../widget/Jumper.design";
-import Spinner from "../widget/Spinner.design";
-import Worm from "../widget/Worm.design";
+import Jumper from "../design/Jumper.design";
+import Spinner from "../design/Spinner.design";
+import Worm from "../design/Worm.design";
 const Loading = {
     Jumper,
     Spinner,

package/interaction/template/NoData.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ScriptDesign from "../widget/Script.design";
-import SignDesign from "../widget/Sign.design";
+import ScriptDesign from "../design/Script.design";
+import SignDesign from "../design/Sign.design";
 function Script(props) {
     return _jsx(ScriptDesign, { ...props });
 }

package/interface/{Widget.d.ts → Action.d.ts}

@@ -1,6 +1,6 @@
 import { HTMLLabelElement } from "./HTMLElement";
 import { DataField, OnClick } from "./Property";
-export interface WidgetEvent {
+export interface ActionEvent {
     event: string;
     type: "view" | "modal";
 }
@@ -15,11 +15,11 @@ export interface ShowAction {
     isVisible: boolean;
 }
 export interface ShowProps {
-    widgets?: Show[];
+    actions?: Show[];
     children: React.ReactNode;
 }
 export interface ReplaceProps {
-    widgets?: Replace[];
+    actions?: Replace[];
     children: React.ReactNode;
 }
 export interface EventsProps {

package/interface/Board.d.ts

@@ -1,5 +1,5 @@
 import { DataField, DataSet, Size, Titles } from "./Property";
-import { EventsProps } from "./Widget";
+import { EventsProps } from "./Action";
 import { HTMLInput, HTMLLabelElement, HTMLSelectElement } from "./HTMLElement";
 interface OptionsProps {
     className?: string;
@@ -15,7 +15,7 @@ interface OptionsProps {
 export interface BoardProps<B> {
     header?: BoardHeaderProps<B>;
     children?: React.ReactNode;
-    widgets?: EventsProps;
+    action?: EventsProps;
     options?: OptionsProps;
     debug?: string;
     buttons?: HTMLLabelElement[];

package/interface/Card.d.ts

@@ -1,4 +1,5 @@
 import { Button, DataField, DataSet, Disabled, ImageSize, OnClick, Size, State, Titles } from "./Property";
+import { Flexify } from "./UtilityType";
 interface CardOptions {
     className?: string;
     boundary?: string;
@@ -10,7 +11,7 @@ interface CardOptions {
     border?: string;
     onClick?: OnClick;
     onMouse?: State<boolean>;
-    overflow?: "hiden" | "y-scroll" | "auto";
+    overflow?: string;
     noPadding?: boolean;
     padding?: string | false;
     noShadow?: boolean;
@@ -109,7 +110,7 @@ export interface AddCardProps extends Omit<CardProps, "children"> {
     onClick: OnClick;
 }
 export interface TableCardProps<T> extends Omit<CardProps, "children"> {
-    dataSet: Omit<DataSet<T>, "renderItem">;
+    dataSet: Flexify<DataSet<T>, "renderItem">;
     dataField?: DataField<T>;
     options?: CardOptions & {
         className?: string;
@@ -120,4 +121,10 @@ export interface TableCardProps<T> extends Omit<CardProps, "children"> {
         noHeader?: boolean;
     };
 }
+export interface RollCardProps extends CardProps {
+    titles: Titles & {
+        icon?: string;
+    };
+    state: State<boolean>;
+}
 export {};

package/interface/HTMLElement.d.ts

@@ -38,10 +38,6 @@ export interface HTMLInput extends HTMLElement {
     type?: HTMLInputType;
     label?: HTMLLabelElement;
 }
-export interface HTMLToggleElement extends HTMLElement {
-    state: State<boolean>;
-    labels?: [[true, string], [false, string]];
-}
 export type ColorType = "red" | "blue" | "green";
 export interface HTMLCheckBoxElement extends HTMLElement {
     state: State<boolean>;

package/interface/Layout.d.ts

@@ -1,5 +1,5 @@
 import { OnClick, State } from "./Property";
-import { ShowAction } from "./Widget";
+import { ShowAction } from "./Action";
 interface Notification {
     id: number;
     userId: number;
@@ -16,7 +16,7 @@ interface NotificationProps {
     color?: string;
 }
 export interface MenuProps {
-    action?: ShowAction;
+    showAction?: ShowAction;
     profile?: {
         name: string;
         belong: string;
@@ -54,7 +54,7 @@ export interface MyPageProps extends DashboardProps {
     };
 }
 export interface DashboardNotification {
-    action?: ShowAction;
+    showAction?: ShowAction;
     notifications?: Partial<Notification>[];
 }
 export {};

package/interface/Modal.d.ts

@@ -1,16 +1,19 @@
 import { Button, Scripts, Size, Titles } from "./Property";
-import { ShowAction } from "./Widget";
+import { ShowAction } from "./Action";
 interface Options {
     width: Size;
     height: Size;
     padding: boolean;
     buttons: Button[];
+    position: string;
     noClose: boolean;
+    noBackground: boolean;
+    isShadow: boolean;
 }
 interface ModalProps {
     titles: Titles;
     children: React.ReactNode;
-    action?: ShowAction;
+    showAction?: ShowAction;
     className?: string;
     options?: Partial<Options>;
     debug?: string;

package/interface/Overlay.d.ts

@@ -1,9 +1,9 @@
 import { HTMLElementFrame, HTMLLabelElement } from "./HTMLElement";
 import { Titles } from "./Property";
-import { ShowAction } from "./Widget";
+import { ShowAction } from "./Action";
 export interface OverlayProps {
     titles: Titles;
-    action?: ShowAction;
+    showAction?: ShowAction;
     children?: React.ReactNode;
 }
 export interface InfoOverlayProps extends OverlayProps {