@edu-tosel/design 1.0.164 → 1.0.165

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/card/design/RollCard.design.js +4 -3
  2. package/package.json +1 -1
  3. package/version.txt +1 -1
  4. package/widget/template/Select/Handle.js +5 -4
package/card/design/RollCard.design.js CHANGED
@@ -5,7 +5,7 @@ import { Action, Shelf } from "../../layout";
5
5
  import Card from "./Card.design";
6
6
  import { useEffect, useState } from "react";
7
7
  import { cn } from "../../util";
8
- import useMobile from "../../hook/useResponsive";
8
+ import useResponsive from "../../hook/useResponsive";
9
9
  export default function RollCardDesign({ titles, state, disabled, isFixed, children, }) {
10
10
  const [isOpen, setIsOpen] = state;
11
11
  const [isDisabled, disabledFn] = disabled || [false, () => { }];
@@ -23,10 +23,11 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
23
23
  sizes: "h-full",
24
24
  styles: isFixed && "hidden",
25
25
  };
26
- const isMobile = useMobile();
26
+ console.log(isFixed, isOpen);
27
+ const isMobile = useResponsive("md");
27
28
  return (_jsxs(Card, { option: {
28
29
  width: "3xl",
29
- height: !isMobile ? (!isFixed && isOpen ? "2xs" : "4xs") : "2xs",
30
+ height: isMobile ? (!isFixed && isOpen ? "2xs" : "4xs") : "2xs",
30
31
  background: isDisabled || flag ? "bg-green-dark/10" : "bg-white",
31
32
  className: "p-7.5 flex flex-col gap-y-6",
32
33
  }, children: [_jsxs("div", { className: "flex flex-col gap-y-3.5 sm:flex-row justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs("div", { className: "flex gap-x-2.5 items-center", children: [titles.icon && _jsx("img", { src: titles.icon, alt: "icon" }), _jsx("div", { className: "text-xl leading-none font-pretendard-bold text-green-dark", children: titles.title })] }), _jsx("div", { className: "leading-none", children: titles.subtitle })] }), _jsxs("div", { className: "flex justify-between sm:justify-start gap-3.5 items-center", children: [_jsx(Label, { title: !isDisabled
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edu-tosel/design",
3
- "version": "1.0.164",
3
+ "version": "1.0.165",
4
4
  "description": "UI components for International TOSEL Committee",
5
5
  "keywords": [
6
6
  "jsx",
package/version.txt CHANGED
@@ -1 +1 @@
1
- 1.0.164
1
+ 1.0.165
package/widget/template/Select/Handle.js CHANGED
@@ -13,11 +13,12 @@ export default function SelectHandle({ state, selectOptions: selectOptionsInput,
13
13
  className,
14
14
  };
15
15
  const body = {
16
- positions: "relative",
16
+ positions: "relative ",
17
17
  sizes: "w-102.5 h-10",
18
18
  styles: "rounded-full bg-gray-light p-1.25",
19
19
  };
20
20
  const area = {
21
+ positions: "relative z-10",
21
22
  sizes: `${widthSizes[Math.round(((valueIndex + 1) / length) * 100)]} h-7.5`,
22
23
  displays: "flex justify-end",
23
24
  background: gradient.bg.greenToRed,
@@ -28,7 +29,7 @@ export default function SelectHandle({ state, selectOptions: selectOptionsInput,
28
29
  sizes: "w-5 h-5",
29
30
  styles: "rounded-full bg-white",
30
31
  };
31
- 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: () => {
32
- return state?.[1](value);
33
- }, className: "flex flex-1 h-10 " }, value))) })] }) }));
32
+ 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 }) => (_jsxs("div", { className: "relative flex flex-1 items-center", children: [_jsx("button", { onClick: () => {
33
+ return state?.[1](value);
34
+ }, className: "w-full h-10 pr-[12px] relative z-10" }, value), _jsx("div", { className: "absolute z-0 right-[18px] bg-black w-1 h-1 rounded-full" })] }))) })] }) }));
34
35
  }