@tipp/ui 1.0.11 → 1.0.13
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.
- package/dist/atoms/drawer.cjs +16 -7
- package/dist/atoms/drawer.cjs.map +1 -1
- package/dist/atoms/drawer.js +2 -1
- package/dist/atoms/index.cjs +16 -7
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.js +4 -3
- package/dist/atoms/pagination.cjs.map +1 -1
- package/dist/atoms/pagination.js +2 -2
- package/dist/chunk-7FECZT7I.js +45 -0
- package/dist/chunk-7FECZT7I.js.map +1 -0
- package/dist/chunk-M474I6JB.js +41 -0
- package/dist/chunk-M474I6JB.js.map +1 -0
- package/dist/chunk-PCWFGDAX.js +104 -0
- package/dist/chunk-PCWFGDAX.js.map +1 -0
- package/dist/chunk-S3SAB2S2.js +104 -0
- package/dist/chunk-S3SAB2S2.js.map +1 -0
- package/dist/chunk-WVS3CXK5.js +104 -0
- package/dist/chunk-WVS3CXK5.js.map +1 -0
- package/dist/chunk-XD7EVGEL.js +45 -0
- package/dist/chunk-XD7EVGEL.js.map +1 -0
- package/dist/icon.cjs +2 -0
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.d.cts +1 -1
- package/dist/icon.d.ts +1 -1
- package/dist/icon.js +3 -1
- package/dist/index.cjs +47 -43
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +11 -9
- package/dist/molecules/expand-table/index.cjs +29 -23
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +4 -3
- package/dist/molecules/expand-table/row.cjs +12 -6
- package/dist/molecules/expand-table/row.cjs.map +1 -1
- package/dist/molecules/expand-table/row.js +4 -3
- package/dist/molecules/index.cjs +35 -29
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +4 -3
- package/dist/molecules/navigation.cjs +12 -6
- package/dist/molecules/navigation.cjs.map +1 -1
- package/dist/molecules/navigation.js +4 -3
- package/package.json +3 -3
- package/src/atoms/drawer.tsx +9 -6
- package/src/icon.ts +1 -0
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Typo
|
|
3
|
+
} from "./chunk-O3XTRD7R.js";
|
|
4
|
+
import {
|
|
5
|
+
Flex
|
|
6
|
+
} from "./chunk-25HMMI7R.js";
|
|
7
|
+
import {
|
|
8
|
+
IconButton
|
|
9
|
+
} from "./chunk-O3DNDMV3.js";
|
|
10
|
+
import {
|
|
11
|
+
ChevronLeftIcon,
|
|
12
|
+
ChevronRightIcon
|
|
13
|
+
} from "./chunk-M474I6JB.js";
|
|
14
|
+
import {
|
|
15
|
+
__spreadProps,
|
|
16
|
+
__spreadValues
|
|
17
|
+
} from "./chunk-N552FDTV.js";
|
|
18
|
+
|
|
19
|
+
// src/atoms/pagination.tsx
|
|
20
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
21
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
22
|
+
function Pagination(props) {
|
|
23
|
+
const { onChange, count = 0 } = props;
|
|
24
|
+
const siblingCount = 2;
|
|
25
|
+
const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
|
|
26
|
+
const visibleItems = useMemo(() => {
|
|
27
|
+
let start = Math.max(1, page - siblingCount);
|
|
28
|
+
let end = Math.min(count, page + siblingCount);
|
|
29
|
+
if (page - siblingCount <= 0 && end < count) {
|
|
30
|
+
end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
|
|
31
|
+
} else if (page + siblingCount > count && start > 1) {
|
|
32
|
+
start = Math.max(1, start - (page + siblingCount - count));
|
|
33
|
+
}
|
|
34
|
+
return Array.from({ length: end - start + 1 }, (_, i) => i + start);
|
|
35
|
+
}, [count, page]);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
onChange == null ? void 0 : onChange(page);
|
|
38
|
+
}, [onChange, page]);
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
if (props.page) {
|
|
41
|
+
setPage(props.page);
|
|
42
|
+
}
|
|
43
|
+
}, [props.page]);
|
|
44
|
+
const onClickPrev = useCallback(() => {
|
|
45
|
+
setPage((prev) => Math.max(1, prev - 1));
|
|
46
|
+
}, []);
|
|
47
|
+
const onClickNext = useCallback(() => {
|
|
48
|
+
setPage((prev) => Math.min(count, prev + 1));
|
|
49
|
+
}, [count]);
|
|
50
|
+
const moveButtonProps = {
|
|
51
|
+
variant: "ghost",
|
|
52
|
+
size: "3",
|
|
53
|
+
style: { borderRadius: "50%" }
|
|
54
|
+
};
|
|
55
|
+
const iconSize = {
|
|
56
|
+
height: 24,
|
|
57
|
+
width: 24
|
|
58
|
+
};
|
|
59
|
+
const prevDisabled = useMemo(() => {
|
|
60
|
+
return page - siblingCount <= 1;
|
|
61
|
+
}, [page]);
|
|
62
|
+
const nextDisabled = useMemo(() => {
|
|
63
|
+
return page + siblingCount >= count;
|
|
64
|
+
}, [count, page]);
|
|
65
|
+
return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
|
|
66
|
+
/* @__PURE__ */ jsx(
|
|
67
|
+
IconButton,
|
|
68
|
+
__spreadProps(__spreadValues({
|
|
69
|
+
disabled: prevDisabled,
|
|
70
|
+
onClick: onClickPrev
|
|
71
|
+
}, moveButtonProps), {
|
|
72
|
+
children: /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({}, iconSize))
|
|
73
|
+
})
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ jsx(Flex, { gap: "1", children: visibleItems.map((item) => {
|
|
76
|
+
return /* @__PURE__ */ jsx(
|
|
77
|
+
"button",
|
|
78
|
+
{
|
|
79
|
+
className: `page-button ${item === page ? "active" : ""}`,
|
|
80
|
+
onClick: () => {
|
|
81
|
+
setPage(item);
|
|
82
|
+
},
|
|
83
|
+
type: "button",
|
|
84
|
+
children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
|
|
85
|
+
},
|
|
86
|
+
item
|
|
87
|
+
);
|
|
88
|
+
}) }),
|
|
89
|
+
/* @__PURE__ */ jsx(
|
|
90
|
+
IconButton,
|
|
91
|
+
__spreadProps(__spreadValues({
|
|
92
|
+
disabled: nextDisabled,
|
|
93
|
+
onClick: onClickNext
|
|
94
|
+
}, moveButtonProps), {
|
|
95
|
+
children: /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({}, iconSize))
|
|
96
|
+
})
|
|
97
|
+
)
|
|
98
|
+
] });
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export {
|
|
102
|
+
Pagination
|
|
103
|
+
};
|
|
104
|
+
//# sourceMappingURL=chunk-S3SAB2S2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../icon';\nimport type { IconButtonProps } from './icon-button';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n /** 현재 선택된 페이지 */\n page?: number;\n /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n defaultPage?: number;\n /** 선택한 페이지 변경 이벤트 cb */\n onChange?: (page: number) => void;\n /** 전체 페이지의 수 */\n count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n const { onChange, count = 0 } = props;\n const siblingCount = 2;\n\n const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n const visibleItems = useMemo(() => {\n let start = Math.max(1, page - siblingCount);\n let end = Math.min(count, page + siblingCount);\n if (page - siblingCount <= 0 && end < count) {\n end = Math.min(count, end + Math.abs(page - siblingCount) + 1);\n } else if (page + siblingCount > count && start > 1) {\n start = Math.max(1, start - (page + siblingCount - count));\n }\n\n return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n }, [count, page]);\n\n useEffect(() => {\n onChange?.(page);\n }, [onChange, page]);\n\n useEffect(() => {\n if (props.page) {\n setPage(props.page);\n }\n }, [props.page]);\n\n const onClickPrev = useCallback(() => {\n setPage((prev) => Math.max(1, prev - 1));\n }, []);\n\n const onClickNext = useCallback(() => {\n setPage((prev) => Math.min(count, prev + 1));\n }, [count]);\n\n const moveButtonProps: IconButtonProps = {\n variant: 'ghost',\n size: '3',\n style: { borderRadius: '50%' },\n };\n\n const iconSize = {\n height: 24,\n width: 24,\n };\n\n const prevDisabled = useMemo(() => {\n return page - siblingCount <= 1;\n }, [page]);\n\n const nextDisabled = useMemo(() => {\n return page + siblingCount >= count;\n }, [count, page]);\n\n return (\n <Flex align=\"center\" className=\"tipp-pagination\" gap=\"4\">\n <IconButton\n disabled={prevDisabled}\n onClick={onClickPrev}\n {...moveButtonProps}\n >\n <ChevronLeftIcon {...iconSize} />\n </IconButton>\n <Flex gap=\"1\">\n {visibleItems.map((item) => {\n return (\n <button\n className={`page-button ${item === page ? 'active' : ''}`}\n key={item}\n onClick={() => {\n setPage(item);\n }}\n type=\"button\"\n >\n <Typo variant=\"body\">{item}</Typo>\n </button>\n );\n })}\n </Flex>\n <IconButton\n disabled={nextDisabled}\n onClick={onClickNext}\n {...moveButtonProps}\n >\n <ChevronRightIcon {...iconSize} />\n </IconButton>\n </Flex>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AA0E7D,SAMI,KANJ;AAxDG,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,EAAE,IAAI;AAChC,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,QAAQ,KAAK,IAAI,GAAG,OAAO,YAAY;AAC3C,QAAI,MAAM,KAAK,IAAI,OAAO,OAAO,YAAY;AAC7C,QAAI,OAAO,gBAAgB,KAAK,MAAM,OAAO;AAC3C,YAAM,KAAK,IAAI,OAAO,MAAM,KAAK,IAAI,OAAO,YAAY,IAAI,CAAC;AAAA,IAC/D,WAAW,OAAO,eAAe,SAAS,QAAQ,GAAG;AACnD,cAAQ,KAAK,IAAI,GAAG,SAAS,OAAO,eAAe,MAAM;AAAA,IAC3D;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,OAAO,OAAO,CAAC,CAAC;AAAA,EAC7C,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,kBAAmC;AAAA,IACvC,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO,EAAE,cAAc,MAAM;AAAA,EAC/B;AAEA,QAAM,WAAW;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO,OAAO,gBAAgB;AAAA,EAChC,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO,OAAO,gBAAgB;AAAA,EAChC,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE,qBAAC,QAAK,OAAM,UAAS,WAAU,mBAAkB,KAAI,KACnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,SACL,kBAHL;AAAA,QAKC,8BAAC,oCAAoB,SAAU;AAAA;AAAA,IACjC;AAAA,IACA,oBAAC,QAAK,KAAI,KACP,uBAAa,IAAI,CAAC,SAAS;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,eAAe,SAAS,OAAO,WAAW,EAAE;AAAA,UAEvD,SAAS,MAAM;AACb,oBAAQ,IAAI;AAAA,UACd;AAAA,UACA,MAAK;AAAA,UAEL,8BAAC,QAAK,SAAQ,QAAQ,gBAAK;AAAA;AAAA,QANtB;AAAA,MAOP;AAAA,IAEJ,CAAC,GACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,SACL,kBAHL;AAAA,QAKC,8BAAC,qCAAqB,SAAU;AAAA;AAAA,IAClC;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import {
|
|
2
|
+
IconButton
|
|
3
|
+
} from "./chunk-O3DNDMV3.js";
|
|
4
|
+
import {
|
|
5
|
+
Flex
|
|
6
|
+
} from "./chunk-25HMMI7R.js";
|
|
7
|
+
import {
|
|
8
|
+
Typo
|
|
9
|
+
} from "./chunk-O3XTRD7R.js";
|
|
10
|
+
import {
|
|
11
|
+
ChevronLeftIcon,
|
|
12
|
+
ChevronRightIcon
|
|
13
|
+
} from "./chunk-M474I6JB.js";
|
|
14
|
+
import {
|
|
15
|
+
__spreadProps,
|
|
16
|
+
__spreadValues
|
|
17
|
+
} from "./chunk-N552FDTV.js";
|
|
18
|
+
|
|
19
|
+
// src/atoms/pagination.tsx
|
|
20
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
21
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
22
|
+
function Pagination(props) {
|
|
23
|
+
const { onChange, count = 0 } = props;
|
|
24
|
+
const siblingCount = 2;
|
|
25
|
+
const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
|
|
26
|
+
const visibleItems = useMemo(() => {
|
|
27
|
+
let start = Math.max(1, page - siblingCount);
|
|
28
|
+
let end = Math.min(count, page + siblingCount);
|
|
29
|
+
if (page - siblingCount <= 0 && end < count) {
|
|
30
|
+
end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
|
|
31
|
+
} else if (page + siblingCount > count && start > 1) {
|
|
32
|
+
start = Math.max(1, start - (page + siblingCount - count));
|
|
33
|
+
}
|
|
34
|
+
return Array.from({ length: end - start + 1 }, (_, i) => i + start);
|
|
35
|
+
}, [count, page]);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
onChange == null ? void 0 : onChange(page);
|
|
38
|
+
}, [onChange, page]);
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
if (props.page) {
|
|
41
|
+
setPage(props.page);
|
|
42
|
+
}
|
|
43
|
+
}, [props.page]);
|
|
44
|
+
const onClickPrev = useCallback(() => {
|
|
45
|
+
setPage((prev) => Math.max(1, prev - 1));
|
|
46
|
+
}, []);
|
|
47
|
+
const onClickNext = useCallback(() => {
|
|
48
|
+
setPage((prev) => Math.min(count, prev + 1));
|
|
49
|
+
}, [count]);
|
|
50
|
+
const moveButtonProps = {
|
|
51
|
+
variant: "ghost",
|
|
52
|
+
size: "3",
|
|
53
|
+
style: { borderRadius: "50%" }
|
|
54
|
+
};
|
|
55
|
+
const iconSize = {
|
|
56
|
+
height: 24,
|
|
57
|
+
width: 24
|
|
58
|
+
};
|
|
59
|
+
const prevDisabled = useMemo(() => {
|
|
60
|
+
return page - siblingCount <= 1;
|
|
61
|
+
}, [page]);
|
|
62
|
+
const nextDisabled = useMemo(() => {
|
|
63
|
+
return page + siblingCount >= count;
|
|
64
|
+
}, [count, page]);
|
|
65
|
+
return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
|
|
66
|
+
/* @__PURE__ */ jsx(
|
|
67
|
+
IconButton,
|
|
68
|
+
__spreadProps(__spreadValues({
|
|
69
|
+
disabled: prevDisabled,
|
|
70
|
+
onClick: onClickPrev
|
|
71
|
+
}, moveButtonProps), {
|
|
72
|
+
children: /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({}, iconSize))
|
|
73
|
+
})
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ jsx(Flex, { gap: "1", children: visibleItems.map((item) => {
|
|
76
|
+
return /* @__PURE__ */ jsx(
|
|
77
|
+
"button",
|
|
78
|
+
{
|
|
79
|
+
className: `page-button ${item === page ? "active" : ""}`,
|
|
80
|
+
onClick: () => {
|
|
81
|
+
setPage(item);
|
|
82
|
+
},
|
|
83
|
+
type: "button",
|
|
84
|
+
children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
|
|
85
|
+
},
|
|
86
|
+
item
|
|
87
|
+
);
|
|
88
|
+
}) }),
|
|
89
|
+
/* @__PURE__ */ jsx(
|
|
90
|
+
IconButton,
|
|
91
|
+
__spreadProps(__spreadValues({
|
|
92
|
+
disabled: nextDisabled,
|
|
93
|
+
onClick: onClickNext
|
|
94
|
+
}, moveButtonProps), {
|
|
95
|
+
children: /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({}, iconSize))
|
|
96
|
+
})
|
|
97
|
+
)
|
|
98
|
+
] });
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export {
|
|
102
|
+
Pagination
|
|
103
|
+
};
|
|
104
|
+
//# sourceMappingURL=chunk-WVS3CXK5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../icon';\nimport type { IconButtonProps } from './icon-button';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n /** 현재 선택된 페이지 */\n page?: number;\n /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n defaultPage?: number;\n /** 선택한 페이지 변경 이벤트 cb */\n onChange?: (page: number) => void;\n /** 전체 페이지의 수 */\n count?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n const { onChange, count = 0 } = props;\n const siblingCount = 2;\n\n const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n const visibleItems = useMemo(() => {\n let start = Math.max(1, page - siblingCount);\n let end = Math.min(count, page + siblingCount);\n if (page - siblingCount <= 0 && end < count) {\n end = Math.min(count, end + Math.abs(page - siblingCount) + 1);\n } else if (page + siblingCount > count && start > 1) {\n start = Math.max(1, start - (page + siblingCount - count));\n }\n\n return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n }, [count, page]);\n\n useEffect(() => {\n onChange?.(page);\n }, [onChange, page]);\n\n useEffect(() => {\n if (props.page) {\n setPage(props.page);\n }\n }, [props.page]);\n\n const onClickPrev = useCallback(() => {\n setPage((prev) => Math.max(1, prev - 1));\n }, []);\n\n const onClickNext = useCallback(() => {\n setPage((prev) => Math.min(count, prev + 1));\n }, [count]);\n\n const moveButtonProps: IconButtonProps = {\n variant: 'ghost',\n size: '3',\n style: { borderRadius: '50%' },\n };\n\n const iconSize = {\n height: 24,\n width: 24,\n };\n\n const prevDisabled = useMemo(() => {\n return page - siblingCount <= 1;\n }, [page]);\n\n const nextDisabled = useMemo(() => {\n return page + siblingCount >= count;\n }, [count, page]);\n\n return (\n <Flex align=\"center\" className=\"tipp-pagination\" gap=\"4\">\n <IconButton\n disabled={prevDisabled}\n onClick={onClickPrev}\n {...moveButtonProps}\n >\n <ChevronLeftIcon {...iconSize} />\n </IconButton>\n <Flex gap=\"1\">\n {visibleItems.map((item) => {\n return (\n <button\n className={`page-button ${item === page ? 'active' : ''}`}\n key={item}\n onClick={() => {\n setPage(item);\n }}\n type=\"button\"\n >\n <Typo variant=\"body\">{item}</Typo>\n </button>\n );\n })}\n </Flex>\n <IconButton\n disabled={nextDisabled}\n onClick={onClickNext}\n {...moveButtonProps}\n >\n <ChevronRightIcon {...iconSize} />\n </IconButton>\n </Flex>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AA0E7D,SAMI,KANJ;AAxDG,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,EAAE,IAAI;AAChC,QAAM,eAAe;AAErB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,QAAQ,KAAK,IAAI,GAAG,OAAO,YAAY;AAC3C,QAAI,MAAM,KAAK,IAAI,OAAO,OAAO,YAAY;AAC7C,QAAI,OAAO,gBAAgB,KAAK,MAAM,OAAO;AAC3C,YAAM,KAAK,IAAI,OAAO,MAAM,KAAK,IAAI,OAAO,YAAY,IAAI,CAAC;AAAA,IAC/D,WAAW,OAAO,eAAe,SAAS,QAAQ,GAAG;AACnD,cAAQ,KAAK,IAAI,GAAG,SAAS,OAAO,eAAe,MAAM;AAAA,IAC3D;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,CAAC,SAAS,KAAK,IAAI,OAAO,OAAO,CAAC,CAAC;AAAA,EAC7C,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,kBAAmC;AAAA,IACvC,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO,EAAE,cAAc,MAAM;AAAA,EAC/B;AAEA,QAAM,WAAW;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO,OAAO,gBAAgB;AAAA,EAChC,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO,OAAO,gBAAgB;AAAA,EAChC,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE,qBAAC,QAAK,OAAM,UAAS,WAAU,mBAAkB,KAAI,KACnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,SACL,kBAHL;AAAA,QAKC,8BAAC,oCAAoB,SAAU;AAAA;AAAA,IACjC;AAAA,IACA,oBAAC,QAAK,KAAI,KACP,uBAAa,IAAI,CAAC,SAAS;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,eAAe,SAAS,OAAO,WAAW,EAAE;AAAA,UAEvD,SAAS,MAAM;AACb,oBAAQ,IAAI;AAAA,UACd;AAAA,UACA,MAAK;AAAA,UAEL,8BAAC,QAAK,SAAQ,QAAQ,gBAAK;AAAA;AAAA,QANtB;AAAA,MAOP;AAAA,IAEJ,CAAC,GACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,SACL,kBAHL;AAAA,QAKC,8BAAC,qCAAqB,SAAU;AAAA;AAAA,IAClC;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ThemeProvider
|
|
3
|
+
} from "./chunk-PL3Q4UVY.js";
|
|
4
|
+
import {
|
|
5
|
+
__objRest,
|
|
6
|
+
__spreadValues
|
|
7
|
+
} from "./chunk-N552FDTV.js";
|
|
8
|
+
|
|
9
|
+
// src/atoms/drawer.tsx
|
|
10
|
+
import * as Dialog from "@radix-ui/react-dialog";
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
+
function Root2(props) {
|
|
13
|
+
return /* @__PURE__ */ jsx(Dialog.Root, __spreadValues({}, props));
|
|
14
|
+
}
|
|
15
|
+
function Content2(props) {
|
|
16
|
+
const _a = props, { position = "right", className } = _a, rest = __objRest(_a, ["position", "className"]);
|
|
17
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(ThemeProvider, { children: [
|
|
18
|
+
/* @__PURE__ */ jsx(Dialog.Overlay, { className: "DrawerOverlay" }),
|
|
19
|
+
/* @__PURE__ */ jsx(
|
|
20
|
+
Dialog.Content,
|
|
21
|
+
__spreadValues({
|
|
22
|
+
className: `DrawerContent ${position} ${className || ""}`
|
|
23
|
+
}, rest)
|
|
24
|
+
)
|
|
25
|
+
] }) });
|
|
26
|
+
}
|
|
27
|
+
function Trigger2(props) {
|
|
28
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, __spreadValues({ asChild: true }, props));
|
|
29
|
+
}
|
|
30
|
+
var Drawer = {
|
|
31
|
+
Root: Dialog.Root,
|
|
32
|
+
Trigger: Trigger2,
|
|
33
|
+
Content: Content2,
|
|
34
|
+
Close: Dialog.Close,
|
|
35
|
+
Title: Dialog.Title,
|
|
36
|
+
Description: Dialog.Description
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export {
|
|
40
|
+
Root2 as Root,
|
|
41
|
+
Content2 as Content,
|
|
42
|
+
Trigger2 as Trigger,
|
|
43
|
+
Drawer
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=chunk-XD7EVGEL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/drawer.tsx"],"sourcesContent":["import React from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { ThemeProvider } from '../theme/theme-provider';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n /** Drawer가 붙는 위치, 기본값 right */\n position?: 'left' | 'right' | 'bottom' | 'top';\n};\n\nexport function Content(props: ContentProps): React.ReactNode {\n const { position = 'right', className, ...rest } = props;\n return (\n <Dialog.Portal>\n <ThemeProvider>\n <Dialog.Overlay className=\"DrawerOverlay\" />\n <Dialog.Content\n className={`DrawerContent ${position} ${className || ''}`}\n {...rest}\n />\n </ThemeProvider>\n </Dialog.Portal>\n );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n Root: Dialog.Root,\n Trigger,\n Content,\n Close: Dialog.Close,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n"],"mappings":";;;;;;;;;AACA,YAAY,YAAY;AAIf,cAYH,YAZG;AADF,SAASA,MAAK,OAA4C;AAC/D,SAAO,oBAAQ,aAAP,mBAAgB,MAAO;AACjC;AAOO,SAASC,SAAQ,OAAsC;AAC5D,QAAmD,YAA3C,aAAW,SAAS,UAd9B,IAcqD,IAAT,iBAAS,IAAT,CAAlC,YAAoB;AAC5B,SACE,oBAAQ,eAAP,EACC,+BAAC,iBACC;AAAA,wBAAQ,gBAAP,EAAe,WAAU,iBAAgB;AAAA,IAC1C;AAAA,MAAQ;AAAA,MAAP;AAAA,QACC,WAAW,iBAAiB,QAAQ,IAAI,aAAa,EAAE;AAAA,SACnD;AAAA,IACN;AAAA,KACF,GACF;AAEJ;AAEO,SAASC,SAAQ,OAAmD;AACzE,SAAO,oBAAQ,gBAAP,iBAAe,SAAO,QAAK,MAAO;AAC5C;AAEO,IAAM,SAAS;AAAA,EACpB,MAAa;AAAA,EACb,SAAAA;AAAA,EACA,SAAAD;AAAA,EACA,OAAc;AAAA,EACd,OAAc;AAAA,EACd,aAAoB;AACtB;","names":["Root","Content","Trigger"]}
|
package/dist/icon.cjs
CHANGED
|
@@ -28,6 +28,7 @@ __export(icon_exports, {
|
|
|
28
28
|
ChevronRightIcon: () => import_react_icons.ChevronRightIcon,
|
|
29
29
|
ClipboardIcon: () => import_react_icons.ClipboardIcon,
|
|
30
30
|
DotsHorizontalIcon: () => import_react_icons.DotsHorizontalIcon,
|
|
31
|
+
DotsVerticalIcon: () => import_react_icons.DotsVerticalIcon,
|
|
31
32
|
ExclamationTriangleIcon: () => import_react_icons.ExclamationTriangleIcon,
|
|
32
33
|
ExitIcon: () => import_react_icons.ExitIcon,
|
|
33
34
|
GearIcon: () => import_react_icons.GearIcon,
|
|
@@ -49,6 +50,7 @@ var import_react_icons = require("@radix-ui/react-icons");
|
|
|
49
50
|
ChevronRightIcon,
|
|
50
51
|
ClipboardIcon,
|
|
51
52
|
DotsHorizontalIcon,
|
|
53
|
+
DotsVerticalIcon,
|
|
52
54
|
ExclamationTriangleIcon,
|
|
53
55
|
ExitIcon,
|
|
54
56
|
GearIcon,
|
package/dist/icon.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n BookmarkIcon,\n ExitIcon,\n InfoCircledIcon,\n ExclamationTriangleIcon,\n MagnifyingGlassIcon,\n DotsHorizontalIcon,\n ChatBubbleIcon,\n PlusIcon,\n BookmarkFilledIcon,\n MixerHorizontalIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ClipboardIcon,\n BarChartIcon,\n PersonIcon,\n GearIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n BookmarkIcon,\n ExitIcon,\n InfoCircledIcon,\n ExclamationTriangleIcon,\n MagnifyingGlassIcon,\n DotsHorizontalIcon,\n ChatBubbleIcon,\n PlusIcon,\n BookmarkFilledIcon,\n MixerHorizontalIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ClipboardIcon,\n BarChartIcon,\n PersonIcon,\n GearIcon,\n DotsVerticalIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAkBO;","names":[]}
|
package/dist/icon.d.cts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, DotsHorizontalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
|
|
1
|
+
export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
|
|
2
2
|
import '@radix-ui/themes';
|
|
3
3
|
import '@radix-ui/themes/dist/cjs/props/index.js';
|
package/dist/icon.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, DotsHorizontalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
|
|
1
|
+
export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
|
|
2
2
|
import '@radix-ui/themes';
|
|
3
3
|
import '@radix-ui/themes/dist/cjs/props/index.js';
|
package/dist/icon.js
CHANGED
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
ChevronRightIcon,
|
|
8
8
|
ClipboardIcon,
|
|
9
9
|
DotsHorizontalIcon,
|
|
10
|
+
DotsVerticalIcon,
|
|
10
11
|
ExclamationTriangleIcon,
|
|
11
12
|
ExitIcon,
|
|
12
13
|
GearIcon,
|
|
@@ -15,7 +16,7 @@ import {
|
|
|
15
16
|
MixerHorizontalIcon,
|
|
16
17
|
PersonIcon,
|
|
17
18
|
PlusIcon
|
|
18
|
-
} from "./chunk-
|
|
19
|
+
} from "./chunk-M474I6JB.js";
|
|
19
20
|
import "./chunk-N552FDTV.js";
|
|
20
21
|
export {
|
|
21
22
|
BarChartIcon,
|
|
@@ -26,6 +27,7 @@ export {
|
|
|
26
27
|
ChevronRightIcon,
|
|
27
28
|
ClipboardIcon,
|
|
28
29
|
DotsHorizontalIcon,
|
|
30
|
+
DotsVerticalIcon,
|
|
29
31
|
ExclamationTriangleIcon,
|
|
30
32
|
ExitIcon,
|
|
31
33
|
GearIcon,
|
package/dist/index.cjs
CHANGED
|
@@ -86,6 +86,7 @@ __export(src_exports, {
|
|
|
86
86
|
DatePicker: () => DatePicker,
|
|
87
87
|
Dialog: () => import_themes16.Dialog,
|
|
88
88
|
DotsHorizontalIcon: () => import_react_icons.DotsHorizontalIcon,
|
|
89
|
+
DotsVerticalIcon: () => import_react_icons.DotsVerticalIcon,
|
|
89
90
|
Drawer: () => Drawer,
|
|
90
91
|
DropdownMenu: () => import_themes17.DropdownMenu,
|
|
91
92
|
EllipsisTooltip: () => EllipsisTooltip,
|
|
@@ -643,24 +644,33 @@ function EllipsisTooltip(props) {
|
|
|
643
644
|
|
|
644
645
|
// src/atoms/drawer.tsx
|
|
645
646
|
var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
647
|
+
|
|
648
|
+
// src/theme/theme-provider.tsx
|
|
649
|
+
var import_themes50 = require("@radix-ui/themes");
|
|
646
650
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
651
|
+
function ThemeProvider(props) {
|
|
652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes50.Theme, __spreadValues({ accentColor: "iris", radius: "large" }, props));
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
// src/atoms/drawer.tsx
|
|
656
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
647
657
|
function Root3(props) {
|
|
648
|
-
return /* @__PURE__ */ (0,
|
|
658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog2.Root, __spreadValues({}, props));
|
|
649
659
|
}
|
|
650
660
|
function Content2(props) {
|
|
651
|
-
const _a = props, { position = "
|
|
652
|
-
return /* @__PURE__ */ (0,
|
|
653
|
-
/* @__PURE__ */ (0,
|
|
654
|
-
/* @__PURE__ */ (0,
|
|
661
|
+
const _a = props, { position = "right", className } = _a, rest = __objRest(_a, ["position", "className"]);
|
|
662
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ThemeProvider, { children: [
|
|
663
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog2.Overlay, { className: "DrawerOverlay" }),
|
|
664
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
655
665
|
Dialog2.Content,
|
|
656
666
|
__spreadValues({
|
|
657
667
|
className: `DrawerContent ${position} ${className || ""}`
|
|
658
668
|
}, rest)
|
|
659
669
|
)
|
|
660
|
-
] });
|
|
670
|
+
] }) });
|
|
661
671
|
}
|
|
662
672
|
function Trigger2(props) {
|
|
663
|
-
return /* @__PURE__ */ (0,
|
|
673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog2.Trigger, __spreadValues({ asChild: true }, props));
|
|
664
674
|
}
|
|
665
675
|
var Drawer = {
|
|
666
676
|
Root: Dialog2.Root,
|
|
@@ -677,11 +687,11 @@ var import_react14 = require("react");
|
|
|
677
687
|
|
|
678
688
|
// src/icons/down.tsx
|
|
679
689
|
var React8 = __toESM(require("react"), 1);
|
|
680
|
-
var
|
|
690
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
681
691
|
var TriangleArrowDownIcon = React8.forwardRef(
|
|
682
692
|
(_a, forwardedRef) => {
|
|
683
693
|
var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
|
|
684
|
-
return /* @__PURE__ */ (0,
|
|
694
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
685
695
|
"svg",
|
|
686
696
|
__spreadProps(__spreadValues({
|
|
687
697
|
fill: "none",
|
|
@@ -691,7 +701,7 @@ var TriangleArrowDownIcon = React8.forwardRef(
|
|
|
691
701
|
xmlns: "http://www.w3.org/2000/svg"
|
|
692
702
|
}, props), {
|
|
693
703
|
ref: forwardedRef,
|
|
694
|
-
children: /* @__PURE__ */ (0,
|
|
704
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
695
705
|
"path",
|
|
696
706
|
{
|
|
697
707
|
d: "M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z",
|
|
@@ -706,11 +716,11 @@ TriangleArrowDownIcon.displayName = "ArrowDownIcon";
|
|
|
706
716
|
|
|
707
717
|
// src/icons/up.tsx
|
|
708
718
|
var React9 = __toESM(require("react"), 1);
|
|
709
|
-
var
|
|
719
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
710
720
|
var TriangleArrowUpIcon = React9.forwardRef(
|
|
711
721
|
(_a, forwardedRef) => {
|
|
712
722
|
var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
|
|
713
|
-
return /* @__PURE__ */ (0,
|
|
723
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
714
724
|
"svg",
|
|
715
725
|
__spreadProps(__spreadValues({
|
|
716
726
|
fill: "none",
|
|
@@ -720,7 +730,7 @@ var TriangleArrowUpIcon = React9.forwardRef(
|
|
|
720
730
|
xmlns: "http://www.w3.org/2000/svg"
|
|
721
731
|
}, props), {
|
|
722
732
|
ref: forwardedRef,
|
|
723
|
-
children: /* @__PURE__ */ (0,
|
|
733
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
724
734
|
"path",
|
|
725
735
|
{
|
|
726
736
|
d: "M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z",
|
|
@@ -736,7 +746,7 @@ TriangleArrowUpIcon.displayName = "ArrowUpIcon";
|
|
|
736
746
|
// src/molecules/expand-table/row.tsx
|
|
737
747
|
var import_react_table = require("@tanstack/react-table");
|
|
738
748
|
var import_react13 = require("react");
|
|
739
|
-
var
|
|
749
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
740
750
|
function Row(props) {
|
|
741
751
|
const { row, ExpandComp, gridColTemp } = props;
|
|
742
752
|
const [open, setOpen] = (0, import_react13.useState)(false);
|
|
@@ -745,12 +755,12 @@ function Row(props) {
|
|
|
745
755
|
(_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
|
|
746
756
|
setOpen((prev) => !prev);
|
|
747
757
|
}, [props, row.original]);
|
|
748
|
-
return /* @__PURE__ */ (0,
|
|
758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
749
759
|
"div",
|
|
750
760
|
{
|
|
751
761
|
className: `tr-wrapper ${ExpandComp ? "expandable" : ""}`,
|
|
752
762
|
children: [
|
|
753
|
-
/* @__PURE__ */ (0,
|
|
763
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
754
764
|
"button",
|
|
755
765
|
{
|
|
756
766
|
className: "tr",
|
|
@@ -760,7 +770,7 @@ function Row(props) {
|
|
|
760
770
|
children: row.getVisibleCells().map((cell) => {
|
|
761
771
|
var _a, _b;
|
|
762
772
|
const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
|
|
763
|
-
return /* @__PURE__ */ (0,
|
|
773
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
764
774
|
"div",
|
|
765
775
|
{
|
|
766
776
|
className: "td",
|
|
@@ -770,7 +780,7 @@ function Row(props) {
|
|
|
770
780
|
},
|
|
771
781
|
children: [
|
|
772
782
|
(0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
|
|
773
|
-
((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0,
|
|
783
|
+
((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
774
784
|
cell.column.columnDef.meta.OpenBtn,
|
|
775
785
|
{
|
|
776
786
|
data: row.original,
|
|
@@ -786,7 +796,7 @@ function Row(props) {
|
|
|
786
796
|
},
|
|
787
797
|
`tr_${row.id}`
|
|
788
798
|
),
|
|
789
|
-
ExpandComp ? /* @__PURE__ */ (0,
|
|
799
|
+
ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExpandComp, { row }) }) }) : null
|
|
790
800
|
]
|
|
791
801
|
},
|
|
792
802
|
`tr-wrapper_${row.id}`
|
|
@@ -794,7 +804,7 @@ function Row(props) {
|
|
|
794
804
|
}
|
|
795
805
|
|
|
796
806
|
// src/molecules/expand-table/index.tsx
|
|
797
|
-
var
|
|
807
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
798
808
|
function ExpandTable(props) {
|
|
799
809
|
const { data, columns, ExpandComp, placeholder, onRowClick } = props;
|
|
800
810
|
const [sorting, setSorting] = (0, import_react14.useState)([]);
|
|
@@ -817,8 +827,8 @@ function ExpandTable(props) {
|
|
|
817
827
|
}).join(" ");
|
|
818
828
|
}, [columns]);
|
|
819
829
|
const rowModels = getRowModel();
|
|
820
|
-
return /* @__PURE__ */ (0,
|
|
821
|
-
/* @__PURE__ */ (0,
|
|
830
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "expand-table", children: [
|
|
831
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
822
832
|
"div",
|
|
823
833
|
{
|
|
824
834
|
className: "tr",
|
|
@@ -826,30 +836,30 @@ function ExpandTable(props) {
|
|
|
826
836
|
children: headerGroup.headers.map((header) => {
|
|
827
837
|
const sortable = header.column.getCanSort();
|
|
828
838
|
const sortedState = header.column.getIsSorted();
|
|
829
|
-
return /* @__PURE__ */ (0,
|
|
839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "th", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
830
840
|
"button",
|
|
831
841
|
{
|
|
832
842
|
onClick: header.column.getToggleSortingHandler(),
|
|
833
843
|
style: sortable ? { cursor: "pointer" } : void 0,
|
|
834
844
|
type: "button",
|
|
835
845
|
children: [
|
|
836
|
-
/* @__PURE__ */ (0,
|
|
846
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
|
|
837
847
|
header.column.columnDef.header,
|
|
838
848
|
header.getContext()
|
|
839
849
|
) }),
|
|
840
|
-
sortable ? /* @__PURE__ */ (0,
|
|
850
|
+
sortable ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
841
851
|
import_themes19.Flex,
|
|
842
852
|
{
|
|
843
853
|
direction: "column",
|
|
844
854
|
style: { marginLeft: "var(--space-2)" },
|
|
845
855
|
children: [
|
|
846
|
-
/* @__PURE__ */ (0,
|
|
856
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
847
857
|
TriangleArrowUpIcon,
|
|
848
858
|
{
|
|
849
859
|
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
850
860
|
}
|
|
851
861
|
),
|
|
852
|
-
/* @__PURE__ */ (0,
|
|
862
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
853
863
|
TriangleArrowDownIcon,
|
|
854
864
|
{
|
|
855
865
|
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
@@ -865,10 +875,10 @@ function ExpandTable(props) {
|
|
|
865
875
|
},
|
|
866
876
|
headerGroup.id
|
|
867
877
|
)) }),
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
869
|
-
rowModels.rows.length === 0 && /* @__PURE__ */ (0,
|
|
878
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "tbody", children: [
|
|
879
|
+
rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
|
|
870
880
|
rowModels.rows.map((row) => {
|
|
871
|
-
return /* @__PURE__ */ (0,
|
|
881
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
872
882
|
Row,
|
|
873
883
|
{
|
|
874
884
|
ExpandComp,
|
|
@@ -884,14 +894,14 @@ function ExpandTable(props) {
|
|
|
884
894
|
}
|
|
885
895
|
|
|
886
896
|
// src/molecules/navigation.tsx
|
|
887
|
-
var
|
|
897
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
888
898
|
function Navigation({
|
|
889
899
|
items,
|
|
890
900
|
fontColor,
|
|
891
901
|
backgroundColor,
|
|
892
902
|
activeKey
|
|
893
903
|
}) {
|
|
894
|
-
return /* @__PURE__ */ (0,
|
|
904
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
895
905
|
import_themes19.Flex,
|
|
896
906
|
{
|
|
897
907
|
direction: "column",
|
|
@@ -903,13 +913,13 @@ function Navigation({
|
|
|
903
913
|
},
|
|
904
914
|
children: items == null ? void 0 : items.map((item) => {
|
|
905
915
|
const { key, title, icon, itemRender, onClick, children } = item;
|
|
906
|
-
return /* @__PURE__ */ (0,
|
|
907
|
-
itemRender ? itemRender(item) : /* @__PURE__ */ (0,
|
|
916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_themes19.Flex, { direction: "column", onClick, children: [
|
|
917
|
+
itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_themes19.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
|
|
908
918
|
icon,
|
|
909
|
-
/* @__PURE__ */ (0,
|
|
919
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typo, { variant: "subtitle", children: title })
|
|
910
920
|
] }),
|
|
911
921
|
children == null ? void 0 : children.map((menu) => {
|
|
912
|
-
return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0,
|
|
922
|
+
return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
913
923
|
Button,
|
|
914
924
|
{
|
|
915
925
|
className: `tipp-navigation-button ${activeKey === menu.key ? "active" : ""}`,
|
|
@@ -928,13 +938,6 @@ function Navigation({
|
|
|
928
938
|
);
|
|
929
939
|
}
|
|
930
940
|
|
|
931
|
-
// src/theme/theme-provider.tsx
|
|
932
|
-
var import_themes50 = require("@radix-ui/themes");
|
|
933
|
-
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
934
|
-
function ThemeProvider(props) {
|
|
935
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes50.Theme, __spreadValues({ accentColor: "iris", radius: "large" }, props));
|
|
936
|
-
}
|
|
937
|
-
|
|
938
941
|
// src/theme/use-theme.tsx
|
|
939
942
|
var import_themes51 = require("@radix-ui/themes");
|
|
940
943
|
|
|
@@ -969,6 +972,7 @@ var uiProps = __toESM(require("@radix-ui/themes/dist/cjs/props/index.js"), 1);
|
|
|
969
972
|
DatePicker,
|
|
970
973
|
Dialog,
|
|
971
974
|
DotsHorizontalIcon,
|
|
975
|
+
DotsVerticalIcon,
|
|
972
976
|
Drawer,
|
|
973
977
|
DropdownMenu,
|
|
974
978
|
EllipsisTooltip,
|