@lotte-innovate/ui-component-test 0.2.70 → 0.2.71
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/globals.css +1 -1
- package/dist/lib/components/Avatar/index.js +1 -0
- package/dist/lib/components/Avatar/index.mjs +1 -1
- package/dist/lib/components/Editor/index.d.ts +0 -1
- package/dist/lib/components/Editor/index.js +12 -2
- package/dist/lib/components/Editor/index.mjs +1 -1
- package/dist/lib/components/Gnb/GnbMenuItem.js +1 -1
- package/dist/lib/components/Gnb/GnbMenuItem.mjs +1 -1
- package/dist/lib/components/Grid/NumberingPagination.d.ts +1 -1
- package/dist/lib/components/Grid/NumberingPagination.js +15 -15
- package/dist/lib/components/Grid/NumberingPagination.mjs +1 -1
- package/dist/lib/components/Grid/NumberingPagination.mjs.map +1 -1
- package/dist/lib/components/Grid/index.d.ts +2 -1
- package/dist/lib/components/Grid/index.js +4 -4
- package/dist/lib/components/Grid/index.mjs +1 -1
- package/dist/lib/components/Grid/useGrid.js +11 -0
- package/dist/lib/components/Grid/useGrid.mjs +1 -1
- package/dist/lib/components/SideBar/index.js +3 -1
- package/dist/lib/components/SideBar/index.mjs +1 -1
- package/dist/lib/components/Tabs/DynamicTabs.js +2 -0
- package/dist/lib/components/Tabs/DynamicTabs.mjs +1 -1
- package/dist/lib/components/Tree/index.d.ts +1 -2
- package/dist/lib/components/Tree/index.js +3 -2
- package/dist/lib/components/Tree/index.mjs +1 -1
- package/dist/lib/components/Tree/index.mjs.map +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/dist/lib/utils/useLoadTinyMCE.d.ts +1 -37
- package/dist/lib/utils/useLoadTinyMCE.js +151 -36
- package/dist/lib/utils/useLoadTinyMCE.mjs +2 -0
- package/dist/lib/utils/useLoadTinyMCE.mjs.map +1 -0
- package/dist/lib/utils/useWindowSize.d.ts +1 -0
- package/dist/lib/utils/useWindowSize.js +17 -18
- package/dist/lib/utils/useWindowSize.mjs +2 -0
- package/dist/lib/utils/useWindowSize.mjs.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/dist/lib/node_modules/react-complex-tree/lib/style-modern.mjs +0 -2
- package/dist/lib/node_modules/react-complex-tree/lib/style-modern.mjs.map +0 -1
- package/dist/lib/node_modules/style-inject/dist/style-inject.es.mjs +0 -2
- package/dist/lib/node_modules/style-inject/dist/style-inject.es.mjs.map +0 -1
|
@@ -59,6 +59,7 @@ var Avatar = forwardRef(function (_a, ref) {
|
|
|
59
59
|
radius: radius !== null && radius !== void 0 ? radius : theme.themeRadius,
|
|
60
60
|
scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
|
|
61
61
|
color: color !== null && color !== void 0 ? color : theme.themeColor,
|
|
62
|
+
size: size,
|
|
62
63
|
};
|
|
63
64
|
var imgAltText = alt || ariaLabel || 'Avatar Image';
|
|
64
65
|
return (_jsxs(AvatarPrimitive.Root, __assign({ className: cn("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants(avatarStyle), appearanceStyle(appearance, avatarStyle.color, false), className) }, props, { ref: ref, role: "img", "aria-label": ariaLabel || imgAltText, "aria-labelledby": ariaLabelledby, title: title || imgAltText, tabIndex: 0, children: [_jsx(AvatarPrimitive.Image, { className: "h-full w-full border-none object-cover", src: imagePath, alt: imgAltText, title: title || imgAltText }), _jsx(AvatarPrimitive.Fallback, { className: cn("leading-1 flex h-full w-full items-center justify-center", className), delayMs: delayMs, "aria-hidden": "true", children: fallback })] })));
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{forwardRef as t}from"react";import*as r from"@radix-ui/react-avatar";import{cva as l}from"class-variance-authority";import{cn as i}from"../../utils/utils.mjs";import{radiusVariants as o,scalingVariants as s,primaryColorStyle as n,appearanceStyle as p}from"../../constants.mjs";import{useTheme as c}from"../../theme/ThemeProvider.mjs";import{MAIN_COLOR as m}from"../../color/constants.mjs";var x=function(){return x=Object.assign||function(e){for(var a,t=1,r=arguments.length;t<r;t++)for(var l in a=arguments[t])Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l]);return e},x.apply(this,arguments)},f=function(e,a){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(r=Object.getOwnPropertySymbols(e);l<r.length;l++)a.indexOf(r[l])<0&&Object.prototype.propertyIsEnumerable.call(e,r[l])&&(t[r[l]]=e[r[l]])}return t},u=l("font-medium",{variants:{radius:x({},o.base),size:{1:"h-[24px] w-[24px] text-[12px]",2:"h-[32px] w-[32px] text-[14px]",3:"h-[40px] w-[40px] text-[16px]",4:"h-[48px] w-[48px] text-[18px]",5:"h-[64px] w-[64px] text-[24px]",6:"h-[80px] w-[80px] text-[28px]",7:"h-[96px] w-[96px] text-[28px]",8:"h-[128px] w-[128px] text-[35px]",9:"h-[160px] w-[160px] text-[60px]"},scaling:x({},s),color:n()},defaultVariants:{radius:"full",color:m,size:"3"}}),d=t((function(t,l){var o=t.className;t.fallbackClassName;var s=t.radius,n=t.scaling
|
|
2
|
+
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{forwardRef as t}from"react";import*as r from"@radix-ui/react-avatar";import{cva as l}from"class-variance-authority";import{cn as i}from"../../utils/utils.mjs";import{radiusVariants as o,scalingVariants as s,primaryColorStyle as n,appearanceStyle as p}from"../../constants.mjs";import{useTheme as c}from"../../theme/ThemeProvider.mjs";import{MAIN_COLOR as m}from"../../color/constants.mjs";var x=function(){return x=Object.assign||function(e){for(var a,t=1,r=arguments.length;t<r;t++)for(var l in a=arguments[t])Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l]);return e},x.apply(this,arguments)},f=function(e,a){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(r=Object.getOwnPropertySymbols(e);l<r.length;l++)a.indexOf(r[l])<0&&Object.prototype.propertyIsEnumerable.call(e,r[l])&&(t[r[l]]=e[r[l]])}return t},u=l("font-medium",{variants:{radius:x({},o.base),size:{1:"h-[24px] w-[24px] text-[12px]",2:"h-[32px] w-[32px] text-[14px]",3:"h-[40px] w-[40px] text-[16px]",4:"h-[48px] w-[48px] text-[18px]",5:"h-[64px] w-[64px] text-[24px]",6:"h-[80px] w-[80px] text-[28px]",7:"h-[96px] w-[96px] text-[28px]",8:"h-[128px] w-[128px] text-[35px]",9:"h-[160px] w-[160px] text-[60px]"},scaling:x({},s),color:n()},defaultVariants:{radius:"full",color:m,size:"3"}}),d=t((function(t,l){var o=t.className;t.fallbackClassName;var s=t.radius,n=t.scaling,m=t.size,d=t.fallback,h=t.imagePath,b=t.alt,y=t.appearance,v=void 0===y?"solid":y,g=t.color,w=t.ariaLabel,j=t.ariaLabelledby,O=t.title,N=t.delayMs,P=void 0===N?300:N,k=f(t,["className","fallbackClassName","radius","scaling","size","fallback","imagePath","alt","appearance","color","ariaLabel","ariaLabelledby","title","delayMs"]),z=c().theme,I={radius:null!=s?s:z.themeRadius,scaling:null!=n?n:z.themeScaling,color:null!=g?g:z.themeColor,size:m},L=b||w||"Avatar Image";return e(r.Root,x({className:i("inline-flex select-none items-center justify-center overflow-hidden align-middle",u(I),p(v,I.color,!1),o)},k,{ref:l,role:"img","aria-label":w||L,"aria-labelledby":j,title:O||L,tabIndex:0,children:[a(r.Image,{className:"h-full w-full border-none object-cover",src:h,alt:L,title:O||L}),a(r.Fallback,{className:i("leading-1 flex h-full w-full items-center justify-center",o),delayMs:P,"aria-hidden":"true",children:d})]}))}));d.displayName="Avatar";export{d as default};
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IAllProps } from '@tinymce/tinymce-react';
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
|
-
import '../../../lib/utils/useLoadTinyMCE';
|
|
5
4
|
import 'tinymce/skins/ui/oxide/skin.css';
|
|
6
5
|
export interface EditorProps extends VariantProps<typeof editorVariants> {
|
|
7
6
|
language?: 'ko_KR' | 'zh_CN' | 'ja' | 'it' | 'vi';
|
|
@@ -22,10 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
return t;
|
|
23
23
|
};
|
|
24
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
|
-
import { forwardRef, useEffect, useRef } from 'react';
|
|
25
|
+
import { useState, forwardRef, useEffect, useRef, } from 'react';
|
|
26
26
|
import { Editor as EditorUI } from '@tinymce/tinymce-react';
|
|
27
27
|
import { cva } from 'class-variance-authority';
|
|
28
|
-
import '../../../lib/utils/useLoadTinyMCE';
|
|
28
|
+
// import '../../../lib/utils/useLoadTinyMCE';
|
|
29
|
+
import { loadTinymce } from '../../../lib/utils/useLoadTinyMCE';
|
|
29
30
|
import { scalingVariants, radiusVariants } from '../../../lib/constants';
|
|
30
31
|
import { cn } from '../../../lib/utils/utils';
|
|
31
32
|
import { useTheme } from '../../../lib/theme';
|
|
@@ -51,6 +52,7 @@ var editorVariants = cva('', {
|
|
|
51
52
|
});
|
|
52
53
|
export var Editor = forwardRef(function (_a, ref) {
|
|
53
54
|
var className = _a.className, size = _a.size, scaling = _a.scaling, radius = _a.radius, init = _a.init, _b = _a.language, language = _b === void 0 ? 'en' : _b, props = __rest(_a, ["className", "size", "scaling", "radius", "init", "language"]);
|
|
55
|
+
var _c = useState(false), isClient = _c[0], setIsClient = _c[1];
|
|
54
56
|
var editorRef = useRef(null);
|
|
55
57
|
var theme = useTheme().theme;
|
|
56
58
|
var editorStyle = {
|
|
@@ -67,6 +69,11 @@ export var Editor = forwardRef(function (_a, ref) {
|
|
|
67
69
|
radiusTheme = '12px';
|
|
68
70
|
if (editorStyle.radius === 'full')
|
|
69
71
|
radiusTheme = '16px';
|
|
72
|
+
useEffect(function () {
|
|
73
|
+
loadTinymce().then(function () {
|
|
74
|
+
setIsClient(true);
|
|
75
|
+
});
|
|
76
|
+
}, []);
|
|
70
77
|
useEffect(function () {
|
|
71
78
|
if (editorRef.current) {
|
|
72
79
|
var editorContainer = editorRef.current.getContainer();
|
|
@@ -75,6 +82,9 @@ export var Editor = forwardRef(function (_a, ref) {
|
|
|
75
82
|
}
|
|
76
83
|
}
|
|
77
84
|
}, [radiusTheme]);
|
|
85
|
+
if (!isClient) {
|
|
86
|
+
return null;
|
|
87
|
+
}
|
|
78
88
|
return (_jsx("div", { className: cn(editorVariants(editorStyle), className), ref: ref, children: _jsx(EditorUI, __assign({ onInit: function (evt, editor) { return (editorRef.current = editor); }, init: __assign({ language: language, width: '100%', height: '100%', promotion: false, plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap accordion', menubar: 'file edit view insert format tools table', toolbar: 'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl', autosave_ask_before_unload: true, autosave_interval: '30s', autosave_restore_when_empty: false, autosave_retention: '2m', image_advtab: true, image_caption: true, quickbars_selection_toolbar: '', toolbar_mode: 'sliding', skin: false, content_css: false, content_style: "".concat(contentUiSkinCss, "\n").concat(contentCss, "\n body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }"), setup: function (editor) {
|
|
79
89
|
editor.ui.registry.addButton('inlinecode', {
|
|
80
90
|
icon: 'sourcecode',
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as
|
|
2
|
+
import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useState as n,useRef as i,useEffect as o}from"react";import{Editor as r}from"@tinymce/tinymce-react";import{cva as a}from"class-variance-authority";import{loadTinymce as s}from"../../utils/useLoadTinyMCE.mjs";import{radiusVariants as l,scalingVariants as c}from"../../constants.mjs";import{cn as u}from"../../utils/utils.mjs";import{useTheme as m}from"../../theme/ThemeProvider.mjs";import{marked as d}from"marked";import"tinymce/skins/ui/oxide/skin.css";import p from"!!raw-loader!tinymce/skins/ui/oxide/content.css";import f from"!!raw-loader!tinymce/skins/content/default/content.css";var g=function(){return g=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},g.apply(this,arguments)},v=function(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++)t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}return n},b=a("",{variants:{radius:g({},l.base),scaling:g({},c),size:{small:"w-[650px] h-[350px]",medium:"w-[700px] h-[400px]",large:"w-[750px] h-[450px]"}},defaultVariants:{radius:"medium",scaling:"100%",size:"medium"}}),h=t((function(t,a){var l=t.className,c=t.size,h=t.scaling,y=t.radius,k=t.init,x=t.language,w=void 0===x?"en":x,_=v(t,["className","size","scaling","radius","init","language"]),O=n(!1),j=O[0],N=O[1],z=i(null),C=m().theme,P={radius:null!=y?y:C.themeRadius,scaling:null!=h?h:C.themeScaling,size:c},S="8px";return"none"===P.radius&&(S="0px"),"small"===P.radius&&(S="4px"),"large"===P.radius&&(S="12px"),"full"===P.radius&&(S="16px"),o((function(){s().then((function(){N(!0)}))}),[]),o((function(){if(z.current){var e=z.current.getContainer();e&&(e.style.borderRadius="".concat(S))}}),[S]),j?e("div",{className:u(b(P),l),ref:a,children:e(r,g({onInit:function(e,t){return z.current=t},init:g({language:w,width:"100%",height:"100%",promotion:!1,plugins:"preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap accordion",menubar:"file edit view insert format tools table",toolbar:"undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",autosave_ask_before_unload:!0,autosave_interval:"30s",autosave_restore_when_empty:!1,autosave_retention:"2m",image_advtab:!0,image_caption:!0,quickbars_selection_toolbar:"",toolbar_mode:"sliding",skin:!1,content_css:!1,content_style:"".concat(p,"\n").concat(f,"\n body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }"),setup:function(e){e.ui.registry.addButton("inlinecode",{icon:"sourcecode",tooltip:"Inline code",onAction:function(){e.formatter.toggle("code")}}),e.on("init",(function(){e.formatter.register("code",{inline:"code",remove:"all"})})),e.ui.registry.addButton("markdown",{text:"Markdown",onAction:function(){var t=e.getContent({format:"text"}),n=d(t);e.setContent(n)}}),e.on("init",(function(){e.getContainer().style.borderRadius=S}))}},k)},_))}):null}));h.displayName="Editor";export{h as Editor,h as default};
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -43,4 +43,4 @@ export var GnbMenuItem = forwardRef(function (_a, ref) {
|
|
|
43
43
|
var size = useContext(GnbContext).size;
|
|
44
44
|
return (_jsx("a", __assign({ href: href, className: cn(gnbMenuItemVariants({ size: size }), active ? 'text-slate-12 dark:text-slateDark-12' : 'text-slate-10 dark:text-slateDark-10', className) }, props, { children: children })));
|
|
45
45
|
});
|
|
46
|
-
GnbMenuItem.displayName = 'Gnb.
|
|
46
|
+
GnbMenuItem.displayName = 'Gnb.MenuItem';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as t}from"react/jsx-runtime";import{forwardRef as e,useContext as r}from"react";import{cva as a}from"class-variance-authority";import{GnbContext as o}from"./GnbRoot.mjs";import{cn as
|
|
2
|
+
import{jsx as t}from"react/jsx-runtime";import{forwardRef as e,useContext as r}from"react";import{cva as a}from"class-variance-authority";import{GnbContext as o}from"./GnbRoot.mjs";import{cn as s}from"../../utils/utils.mjs";var n=function(){return n=Object.assign||function(t){for(var e,r=1,a=arguments.length;r<a;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},n.apply(this,arguments)},i=function(t,e){var r={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&e.indexOf(a)<0&&(r[a]=t[a]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(t);o<a.length;o++)e.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(t,a[o])&&(r[a[o]]=t[a[o]])}return r},l=a("hover:text-slate-11 dark:hover:text-slateDark-11 cursor-pointer",{variants:{size:{small:"text-xs",medium:"text-sm",large:"text-base"}},defaultVariants:{size:"medium"}}),c=e((function(e,a){var c=e.children,m=e.className,p=e.href,f=e.active,u=i(e,["children","className","href","active"]),h=r(o).size;return t("a",n({href:p,className:s(l({size:h}),f?"text-slate-12 dark:text-slateDark-12":"text-slate-10 dark:text-slateDark-10",m)},u,{children:c}))}));c.displayName="Gnb.MenuItem";export{c as GnbMenuItem};
|
|
3
3
|
//# sourceMappingURL=GnbMenuItem.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare function NumberingPagination({ table }: any): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
declare function NumberingPagination({ table, size }: any): import("react/jsx-runtime").JSX.Element;
|
|
2
2
|
export default NumberingPagination;
|
|
@@ -9,14 +9,14 @@ import TextField from '../TextField';
|
|
|
9
9
|
import Text from '../../Typography/Text';
|
|
10
10
|
function NumberingPagination(_a) {
|
|
11
11
|
var _b;
|
|
12
|
-
var table = _a.table;
|
|
12
|
+
var table = _a.table, size = _a.size;
|
|
13
13
|
var _c = useState('1'), nowPage = _c[0], setNowPage = _c[1];
|
|
14
14
|
var color = (_b = table.options.color) !== null && _b !== void 0 ? _b : MAIN_COLOR;
|
|
15
15
|
var renderPageNumbers = function () {
|
|
16
16
|
var pageNumbers = [];
|
|
17
17
|
var currentInx = table.getState().pagination.pageIndex;
|
|
18
18
|
var _loop_1 = function (i) {
|
|
19
|
-
pageNumbers.push(_jsx(Button, { appearance: "ghost", onClick: function () {
|
|
19
|
+
pageNumbers.push(_jsx(Button, { size: size, appearance: "ghost", onClick: function () {
|
|
20
20
|
table.setPageIndex(i);
|
|
21
21
|
setNowPage(String(i + 1));
|
|
22
22
|
}, color: table.getState().pagination.pageIndex === i ? color : 'slate', children: i + 1 }, i));
|
|
@@ -27,50 +27,50 @@ function NumberingPagination(_a) {
|
|
|
27
27
|
if (pageNumbers.length > 10) {
|
|
28
28
|
if (currentInx - 3 > 0 && currentInx + 3 < table.getPageCount()) {
|
|
29
29
|
pageNumbers = pageNumbers.slice(currentInx - 2, currentInx + 3);
|
|
30
|
-
pageNumbers.unshift(_jsx(Button, { appearance: "ghost", onClick: function () {
|
|
30
|
+
pageNumbers.unshift(_jsx(Button, { size: size, appearance: "ghost", onClick: function () {
|
|
31
31
|
table.setPageIndex(0);
|
|
32
32
|
setNowPage('1');
|
|
33
|
-
}, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: "ghost", disabled: true, children: "..." }));
|
|
34
|
-
pageNumbers.push(_jsx(Button, { appearance: "ghost", disabled: true, children: "..." }), _jsx(Button, { appearance: "ghost", onClick: function () {
|
|
33
|
+
}, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: "ghost", disabled: true, size: size, children: "..." }));
|
|
34
|
+
pageNumbers.push(_jsx(Button, { appearance: "ghost", disabled: true, size: size, children: "..." }), _jsx(Button, { size: size, appearance: "ghost", onClick: function () {
|
|
35
35
|
table.setPageIndex(table.getPageCount() - 1);
|
|
36
36
|
setNowPage(String(table.getPageCount()));
|
|
37
37
|
}, color: table.getState().pagination.pageIndex === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));
|
|
38
38
|
}
|
|
39
39
|
else if (currentInx - 3 <= 0) {
|
|
40
40
|
pageNumbers = pageNumbers.slice(0, 7);
|
|
41
|
-
pageNumbers.push(_jsx(Button, { appearance: "ghost", disabled: true, children: "..." }), _jsx(Button, { appearance: "ghost", onClick: function () {
|
|
41
|
+
pageNumbers.push(_jsx(Button, { appearance: "ghost", disabled: true, size: size, children: "..." }), _jsx(Button, { size: size, appearance: "ghost", onClick: function () {
|
|
42
42
|
table.setPageIndex(table.getPageCount() - 1);
|
|
43
43
|
setNowPage(String(table.getPageCount()));
|
|
44
44
|
}, color: table.getState().pagination.pageIndex === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));
|
|
45
45
|
}
|
|
46
46
|
else {
|
|
47
47
|
pageNumbers = pageNumbers.slice(table.getPageCount() - 7, table.getPageCount());
|
|
48
|
-
pageNumbers.unshift(_jsx(Button, { appearance: "ghost", onClick: function () {
|
|
48
|
+
pageNumbers.unshift(_jsx(Button, { size: size, appearance: "ghost", onClick: function () {
|
|
49
49
|
table.setPageIndex(0);
|
|
50
50
|
setNowPage('1');
|
|
51
|
-
}, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: "ghost", disabled: true, children: "..." }));
|
|
51
|
+
}, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: "ghost", disabled: true, size: size, children: "..." }));
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
return pageNumbers;
|
|
55
55
|
};
|
|
56
|
-
return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsxs(Select.Root, { color: color, value: String(table.getState().pagination.pageSize), defaultValue: String(table.getState().pagination.pageSize), onValueChange: function (e) {
|
|
56
|
+
return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsxs(Select.Root, { size: size, color: color, value: String(table.getState().pagination.pageSize), defaultValue: String(table.getState().pagination.pageSize), onValueChange: function (e) {
|
|
57
57
|
table.setPageSize(Number(e));
|
|
58
58
|
setNowPage('1');
|
|
59
59
|
table.setPageIndex(0);
|
|
60
|
-
}, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: [10, 20, 30, 50, 100].map(function (pageSize) { return (_jsx(Select.Item, { value: String(pageSize), children: pageSize }, pageSize)); }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(IconButton, { className: "rounded border p-1", color: color, onClick: function () {
|
|
60
|
+
}, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: [10, 20, 30, 50, 100].map(function (pageSize) { return (_jsx(Select.Item, { value: String(pageSize), children: pageSize }, pageSize)); }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(IconButton, { size: size, className: "rounded border p-1", color: color, onClick: function () {
|
|
61
61
|
table.firstPage();
|
|
62
62
|
setNowPage('1');
|
|
63
|
-
}, disabled: !table.getCanPreviousPage(), children: _jsx(DoubleArrowLeftIcon, {}) }), _jsx(IconButton, { className: "rounded border p-1", color: color, onClick: function () {
|
|
63
|
+
}, disabled: !table.getCanPreviousPage(), children: _jsx(DoubleArrowLeftIcon, {}) }), _jsx(IconButton, { size: size, className: "rounded border p-1", color: color, onClick: function () {
|
|
64
64
|
table.previousPage();
|
|
65
65
|
setNowPage(String(table.getState().pagination.pageIndex));
|
|
66
|
-
}, disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, {}) })] }), _jsx("div", { children: renderPageNumbers() }), _jsxs("div", { className: "flex gap-2", children: [_jsx(IconButton, { className: "rounded border p-1", color: color, onClick: function () {
|
|
66
|
+
}, disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, {}) })] }), _jsx("div", { children: renderPageNumbers() }), _jsxs("div", { className: "flex gap-2", children: [_jsx(IconButton, { size: size, className: "rounded border p-1", color: color, onClick: function () {
|
|
67
67
|
table.nextPage();
|
|
68
68
|
setNowPage(String(table.getState().pagination.pageIndex + 2));
|
|
69
|
-
}, disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { className: "rounded border p-1", color: color, onClick: function () {
|
|
69
|
+
}, disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { size: size, className: "rounded border p-1", color: color, onClick: function () {
|
|
70
70
|
table.lastPage();
|
|
71
71
|
setNowPage(String(table.getPageCount()));
|
|
72
|
-
}, disabled: !table.getCanNextPage(), children: _jsx(DoubleArrowRightIcon, {}) })] })] }), _jsxs("div", { className: "mt-4 flex items-center justify-center gap-2", children: [_jsx(TextField.Root, { type: "number", color: color, min: "1", max: table.getPageCount(), value: nowPage, onChange: function (e) {
|
|
72
|
+
}, disabled: !table.getCanNextPage(), children: _jsx(DoubleArrowRightIcon, {}) })] })] }), _jsxs("div", { className: "mt-4 flex items-center justify-center gap-2", children: [_jsx(TextField.Root, { size: size, type: "number", color: color, min: "1", max: table.getPageCount(), value: nowPage, onChange: function (e) {
|
|
73
73
|
setNowPage(e.target.value);
|
|
74
|
-
}, className: "w-[50px] rounded border" }), _jsxs(Text, { children: ["/ ", table.getPageCount()] }), _jsx(Button, { onClick: function () { return table.setPageIndex(nowPage ? Number(nowPage) - 1 : 0); }, children: "\uC774\uB3D9" })] })] }));
|
|
74
|
+
}, className: "w-[50px] rounded border" }), _jsxs(Text, { children: ["/ ", table.getPageCount()] }), _jsx(Button, { size: size, onClick: function () { return table.setPageIndex(nowPage ? Number(nowPage) - 1 : 0); }, children: "\uC774\uB3D9" })] })] }));
|
|
75
75
|
}
|
|
76
76
|
export default NumberingPagination;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n}from"react";import{IconButton as a}from"../IconButton/index.mjs";import{DoubleArrowLeftIcon as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n}from"react";import{IconButton as a}from"../IconButton/index.mjs";import{DoubleArrowLeftIcon as i,ChevronLeftIcon as o,ChevronRightIcon as r,DoubleArrowRightIcon as g}from"@radix-ui/react-icons";import c from"../Select/index.mjs";import{MAIN_COLOR as s}from"../../color/constants.mjs";import{Button as l}from"../Button/index.mjs";import d from"../TextField/index.mjs";import u from"../../Typography/Text/index.mjs";function p(p){var m,h=p.table,f=p.size,P=n("1"),x=P[0],C=P[1],S=null!==(m=h.options.color)&&void 0!==m?m:s;return e("div",{children:[e("div",{className:"flex items-center justify-center gap-2",children:[e(c.Root,{size:f,color:S,value:String(h.getState().pagination.pageSize),defaultValue:String(h.getState().pagination.pageSize),onValueChange:function(e){h.setPageSize(Number(e)),C("1"),h.setPageIndex(0)},children:[t(c.Trigger,{}),t(c.Content,{children:[10,20,30,50,100].map((function(e){return t(c.Item,{value:String(e),children:e},e)}))})]}),e("div",{className:"flex gap-2",children:[t(a,{size:f,className:"rounded border p-1",color:S,onClick:function(){h.firstPage(),C("1")},disabled:!h.getCanPreviousPage(),children:t(i,{})}),t(a,{size:f,className:"rounded border p-1",color:S,onClick:function(){h.previousPage(),C(String(h.getState().pagination.pageIndex))},disabled:!h.getCanPreviousPage(),children:t(o,{})})]}),t("div",{children:function(){for(var e=[],n=h.getState().pagination.pageIndex,a=function(n){e.push(t(l,{size:f,appearance:"ghost",onClick:function(){h.setPageIndex(n),C(String(n+1))},color:h.getState().pagination.pageIndex===n?S:"slate",children:n+1},n))},i=0;i<h.getPageCount();i++)a(i);return e.length>10&&(n-3>0&&n+3<h.getPageCount()?((e=e.slice(n-2,n+3)).unshift(t(l,{size:f,appearance:"ghost",onClick:function(){h.setPageIndex(0),C("1")},color:0===h.getState().pagination.pageIndex?S:"slate",children:1},0),t(l,{appearance:"ghost",disabled:!0,size:f,children:"..."})),e.push(t(l,{appearance:"ghost",disabled:!0,size:f,children:"..."}),t(l,{size:f,appearance:"ghost",onClick:function(){h.setPageIndex(h.getPageCount()-1),C(String(h.getPageCount()))},color:h.getState().pagination.pageIndex===h.getPageCount()-1?S:"slate",children:h.getPageCount()},h.getPageCount()-1))):n-3<=0?(e=e.slice(0,7)).push(t(l,{appearance:"ghost",disabled:!0,size:f,children:"..."}),t(l,{size:f,appearance:"ghost",onClick:function(){h.setPageIndex(h.getPageCount()-1),C(String(h.getPageCount()))},color:h.getState().pagination.pageIndex===h.getPageCount()-1?S:"slate",children:h.getPageCount()},h.getPageCount()-1)):(e=e.slice(h.getPageCount()-7,h.getPageCount())).unshift(t(l,{size:f,appearance:"ghost",onClick:function(){h.setPageIndex(0),C("1")},color:0===h.getState().pagination.pageIndex?S:"slate",children:1},0),t(l,{appearance:"ghost",disabled:!0,size:f,children:"..."}))),e}()}),e("div",{className:"flex gap-2",children:[t(a,{size:f,className:"rounded border p-1",color:S,onClick:function(){h.nextPage(),C(String(h.getState().pagination.pageIndex+2))},disabled:!h.getCanNextPage(),children:t(r,{})}),t(a,{size:f,className:"rounded border p-1",color:S,onClick:function(){h.lastPage(),C(String(h.getPageCount()))},disabled:!h.getCanNextPage(),children:t(g,{})})]})]}),e("div",{className:"mt-4 flex items-center justify-center gap-2",children:[t(d.Root,{size:f,type:"number",color:S,min:"1",max:h.getPageCount(),value:x,onChange:function(e){C(e.target.value)},className:"w-[50px] rounded border"}),e(u,{children:["/ ",h.getPageCount()]}),t(l,{size:f,onClick:function(){return h.setPageIndex(x?Number(x)-1:0)},children:"이동"})]})]})}export{p as default};
|
|
2
2
|
//# sourceMappingURL=NumberingPagination.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberingPagination.mjs","sources":["../../../lib/components/Grid/NumberingPagination.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useState } from 'react';\nimport IconButton from '../IconButton';\nimport { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, } from '@radix-ui/react-icons';\nimport Select from '../Select';\nimport { MAIN_COLOR } from '../../../lib/color/constants';\nimport Button from '../Button';\nimport TextField from '../TextField';\nimport Text from '../../Typography/Text';\nfunction NumberingPagination(_a) {\n var _b;\n var table = _a.table;\n var _c = useState('1'), nowPage = _c[0], setNowPage = _c[1];\n var color = (_b = table.options.color) !== null && _b !== void 0 ? _b : MAIN_COLOR;\n var renderPageNumbers = function () {\n var pageNumbers = [];\n var currentInx = table.getState().pagination.pageIndex;\n var _loop_1 = function (i) {\n pageNumbers.push(_jsx(Button, { appearance: \"ghost\", onClick: function () {\n table.setPageIndex(i);\n setNowPage(String(i + 1));\n }, color: table.getState().pagination.pageIndex === i ? color : 'slate', children: i + 1 }, i));\n };\n for (var i = 0; i < table.getPageCount(); i++) {\n _loop_1(i);\n }\n if (pageNumbers.length > 10) {\n if (currentInx - 3 > 0 && currentInx + 3 < table.getPageCount()) {\n pageNumbers = pageNumbers.slice(currentInx - 2, currentInx + 3);\n pageNumbers.unshift(_jsx(Button, { appearance: \"ghost\", onClick: function () {\n table.setPageIndex(0);\n setNowPage('1');\n }, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: \"ghost\", disabled: true, children: \"...\" }));\n pageNumbers.push(_jsx(Button, { appearance: \"ghost\", disabled: true, children: \"...\" }), _jsx(Button, { appearance: \"ghost\", onClick: function () {\n table.setPageIndex(table.getPageCount() - 1);\n setNowPage(String(table.getPageCount()));\n }, color: table.getState().pagination.pageIndex === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));\n }\n else if (currentInx - 3 <= 0) {\n pageNumbers = pageNumbers.slice(0, 7);\n pageNumbers.push(_jsx(Button, { appearance: \"ghost\", disabled: true, children: \"...\" }), _jsx(Button, { appearance: \"ghost\", onClick: function () {\n table.setPageIndex(table.getPageCount() - 1);\n setNowPage(String(table.getPageCount()));\n }, color: table.getState().pagination.pageIndex === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));\n }\n else {\n pageNumbers = pageNumbers.slice(table.getPageCount() - 7, table.getPageCount());\n pageNumbers.unshift(_jsx(Button, { appearance: \"ghost\", onClick: function () {\n table.setPageIndex(0);\n setNowPage('1');\n }, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: \"ghost\", disabled: true, children: \"...\" }));\n }\n }\n return pageNumbers;\n };\n return (_jsxs(\"div\", { children: [_jsxs(\"div\", { className: \"flex items-center justify-center gap-2\", children: [_jsxs(Select.Root, { color: color, value: String(table.getState().pagination.pageSize), defaultValue: String(table.getState().pagination.pageSize), onValueChange: function (e) {\n table.setPageSize(Number(e));\n setNowPage('1');\n table.setPageIndex(0);\n }, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: [10, 20, 30, 50, 100].map(function (pageSize) { return (_jsx(Select.Item, { value: String(pageSize), children: pageSize }, pageSize)); }) })] }), _jsxs(\"div\", { className: \"flex gap-2\", children: [_jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () {\n table.firstPage();\n setNowPage('1');\n }, disabled: !table.getCanPreviousPage(), children: _jsx(DoubleArrowLeftIcon, {}) }), _jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () {\n table.previousPage();\n setNowPage(String(table.getState().pagination.pageIndex));\n }, disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, {}) })] }), _jsx(\"div\", { children: renderPageNumbers() }), _jsxs(\"div\", { className: \"flex gap-2\", children: [_jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () {\n table.nextPage();\n setNowPage(String(table.getState().pagination.pageIndex + 2));\n }, disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () {\n table.lastPage();\n setNowPage(String(table.getPageCount()));\n }, disabled: !table.getCanNextPage(), children: _jsx(DoubleArrowRightIcon, {}) })] })] }), _jsxs(\"div\", { className: \"mt-4 flex items-center justify-center gap-2\", children: [_jsx(TextField.Root, { type: \"number\", color: color, min: \"1\", max: table.getPageCount(), value: nowPage, onChange: function (e) {\n setNowPage(e.target.value);\n }, className: \"w-[50px] rounded border\" }), _jsxs(Text, { children: [\"/ \", table.getPageCount()] }), _jsx(Button, { onClick: function () { return table.setPageIndex(nowPage ? Number(nowPage) - 1 : 0); }, children: \"\\uC774\\uB3D9\" })] })] }));\n}\nexport default NumberingPagination;\n"],"names":["NumberingPagination","_a","_b","table","_c","useState","nowPage","setNowPage","color","options","MAIN_COLOR","_jsxs","children","className","Select","Root","value","String","getState","pagination","pageSize","defaultValue","onValueChange","e","setPageSize","Number","setPageIndex","_jsx","Trigger","Content","map","Item","IconButton","onClick","firstPage","disabled","getCanPreviousPage","DoubleArrowLeftIcon","previousPage","pageIndex","ChevronLeftIcon","pageNumbers","currentInx","_loop_1","i","push","Button","appearance","getPageCount","length","slice","unshift","renderPageNumbers","nextPage","getCanNextPage","ChevronRightIcon","lastPage","DoubleArrowRightIcon","TextField","type","min","max","onChange","target","Text"],"mappings":"qeASA,SAASA,EAAoBC,GACzB,IAAIC,EACAC,EAAQF,EAAGE,MACXC,EAAKC,EAAS,KAAMC,EAAUF,EAAG,GAAIG,EAAaH,EAAG,GACrDI,EAAuC,QAA9BN,EAAKC,EAAMM,QAAQD,aAA0B,IAAPN,EAAgBA,EAAKQ,EA0CxE,OAAQC,EAAM,MAAO,CAAEC,SAAU,CAACD,EAAM,MAAO,CAAEE,UAAW,yCAA0CD,SAAU,CAACD,EAAMG,EAAOC,KAAM,CAAEP,MAAOA,EAAOQ,MAAOC,OAAOd,EAAMe,WAAWC,WAAWC,UAAWC,aAAcJ,OAAOd,EAAMe,WAAWC,WAAWC,UAAWE,cAAe,SAAUC,GACtQpB,EAAMqB,YAAYC,OAAOF,IACzBhB,EAAW,KACXJ,EAAMuB,aAAa,EACtB,EAAEd,SAAU,CAACe,EAAKb,EAAOc,QAAS,IAAKD,EAAKb,EAAOe,QAAS,CAAEjB,SAAU,CAAC,GAAI,GAAI,GAAI,GAAI,KAAKkB,KAAI,SAAUV,GAAY,OAAQO,EAAKb,EAAOiB,KAAM,CAAEf,MAAOC,OAAOG,GAAWR,SAAUQ,GAAYA,EAAW,SAAYT,EAAM,MAAO,CAAEE,UAAW,aAAcD,SAAU,CAACe,EAAKK,EAAY,CAAEnB,UAAW,qBAAsBL,MAAOA,EAAOyB,QAAS,WAC7U9B,EAAM+B,YACN3B,EAAW,IAC/C,EAAmC4B,UAAWhC,EAAMiC,qBAAsBxB,SAAUe,EAAKU,EAAqB,CAAE,KAAMV,EAAKK,EAAY,CAAEnB,UAAW,qBAAsBL,MAAOA,EAAOyB,QAAS,WAC7J9B,EAAMmC,eACN/B,EAAWU,OAAOd,EAAMe,WAAWC,WAAWoB,WAClF,EAAmCJ,UAAWhC,EAAMiC,qBAAsBxB,SAAUe,EAAKa,EAAiB,CAAA,QAAYb,EAAK,MAAO,CAAEf,SAnDxG,WASpB,IARA,IAAI6B,EAAc,GACdC,EAAavC,EAAMe,WAAWC,WAAWoB,UACzCI,EAAU,SAAUC,GACpBH,EAAYI,KAAKlB,EAAKmB,EAAQ,CAAEC,WAAY,QAASd,QAAS,WACtD9B,EAAMuB,aAAakB,GACnBrC,EAAWU,OAAO2B,EAAI,GAC1C,EAAmBpC,MAAOL,EAAMe,WAAWC,WAAWoB,YAAcK,EAAIpC,EAAQ,QAASI,SAAUgC,EAAI,GAAKA,GAC5G,EACiBA,EAAI,EAAGA,EAAIzC,EAAM6C,eAAgBJ,IACtCD,EAAQC,GA6BZ,OA3BIH,EAAYQ,OAAS,KACjBP,EAAa,EAAI,GAAKA,EAAa,EAAIvC,EAAM6C,iBAC7CP,EAAcA,EAAYS,MAAMR,EAAa,EAAGA,EAAa,IACjDS,QAAQxB,EAAKmB,EAAQ,CAAEC,WAAY,QAASd,QAAS,WACzD9B,EAAMuB,aAAa,GACnBnB,EAAW,IACd,EAAEC,MAAiD,IAA1CL,EAAMe,WAAWC,WAAWoB,UAAkB/B,EAAQ,QAASI,SAAU,GAAK,GAAIe,EAAKmB,EAAQ,CAAEC,WAAY,QAASZ,UAAU,EAAMvB,SAAU,SAC9J6B,EAAYI,KAAKlB,EAAKmB,EAAQ,CAAEC,WAAY,QAASZ,UAAU,EAAMvB,SAAU,QAAUe,EAAKmB,EAAQ,CAAEC,WAAY,QAASd,QAAS,WAC9H9B,EAAMuB,aAAavB,EAAM6C,eAAiB,GAC1CzC,EAAWU,OAAOd,EAAM6C,gBAChD,EAAuBxC,MAAOL,EAAMe,WAAWC,WAAWoB,YAAcpC,EAAM6C,eAAiB,EAAIxC,EAAQ,QAASI,SAAUT,EAAM6C,gBAAkB7C,EAAM6C,eAAiB,KAExJN,EAAa,GAAK,GACvBD,EAAcA,EAAYS,MAAM,EAAG,IACvBL,KAAKlB,EAAKmB,EAAQ,CAAEC,WAAY,QAASZ,UAAU,EAAMvB,SAAU,QAAUe,EAAKmB,EAAQ,CAAEC,WAAY,QAASd,QAAS,WAC9H9B,EAAMuB,aAAavB,EAAM6C,eAAiB,GAC1CzC,EAAWU,OAAOd,EAAM6C,gBAChD,EAAuBxC,MAAOL,EAAMe,WAAWC,WAAWoB,YAAcpC,EAAM6C,eAAiB,EAAIxC,EAAQ,QAASI,SAAUT,EAAM6C,gBAAkB7C,EAAM6C,eAAiB,KAG7JP,EAAcA,EAAYS,MAAM/C,EAAM6C,eAAiB,EAAG7C,EAAM6C,iBACpDG,QAAQxB,EAAKmB,EAAQ,CAAEC,WAAY,QAASd,QAAS,WACzD9B,EAAMuB,aAAa,GACnBnB,EAAW,IACd,EAAEC,MAAiD,IAA1CL,EAAMe,WAAWC,WAAWoB,UAAkB/B,EAAQ,QAASI,SAAU,GAAK,GAAIe,EAAKmB,EAAQ,CAAEC,WAAY,QAASZ,UAAU,EAAMvB,SAAU,UAG/J6B,CACf,CAW8IW,KAAwBzC,EAAM,MAAO,CAAEE,UAAW,aAAcD,SAAU,CAACe,EAAKK,EAAY,CAAEnB,UAAW,qBAAsBL,MAAOA,EAAOyB,QAAS,WAChQ9B,EAAMkD,WACN9C,EAAWU,OAAOd,EAAMe,WAAWC,WAAWoB,UAAY,GAC9F,EAAmCJ,UAAWhC,EAAMmD,iBAAkB1C,SAAUe,EAAK4B,EAAkB,CAAE,KAAM5B,EAAKK,EAAY,CAAEnB,UAAW,qBAAsBL,MAAOA,EAAOyB,QAAS,WACtJ9B,EAAMqD,WACNjD,EAAWU,OAAOd,EAAM6C,gBAC5D,EAAmCb,UAAWhC,EAAMmD,iBAAkB1C,SAAUe,EAAK8B,EAAsB,CAAE,WAAc9C,EAAM,MAAO,CAAEE,UAAW,8CAA+CD,SAAU,CAACe,EAAK+B,EAAU3C,KAAM,CAAE4C,KAAM,SAAUnD,MAAOA,EAAOoD,IAAK,IAAKC,IAAK1D,EAAM6C,eAAgBhC,MAAOV,EAASwD,SAAU,SAAUvC,GACjThB,EAAWgB,EAAEwC,OAAO/C,MAChD,EAA2BH,UAAW,4BAA8BF,EAAMqD,EAAM,CAAEpD,SAAU,CAAC,KAAMT,EAAM6C,kBAAoBrB,EAAKmB,EAAQ,CAAEb,QAAS,WAAc,OAAO9B,EAAMuB,aAAapB,EAAUmB,OAAOnB,GAAW,EAAI,EAAK,EAAEM,SAAU,YAC9O"}
|
|
1
|
+
{"version":3,"file":"NumberingPagination.mjs","sources":["../../../lib/components/Grid/NumberingPagination.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useState } from 'react';\nimport IconButton from '../IconButton';\nimport { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, } from '@radix-ui/react-icons';\nimport Select from '../Select';\nimport { MAIN_COLOR } from '../../../lib/color/constants';\nimport Button from '../Button';\nimport TextField from '../TextField';\nimport Text from '../../Typography/Text';\nfunction NumberingPagination(_a) {\n var _b;\n var table = _a.table, size = _a.size;\n var _c = useState('1'), nowPage = _c[0], setNowPage = _c[1];\n var color = (_b = table.options.color) !== null && _b !== void 0 ? _b : MAIN_COLOR;\n var renderPageNumbers = function () {\n var pageNumbers = [];\n var currentInx = table.getState().pagination.pageIndex;\n var _loop_1 = function (i) {\n pageNumbers.push(_jsx(Button, { size: size, appearance: \"ghost\", onClick: function () {\n table.setPageIndex(i);\n setNowPage(String(i + 1));\n }, color: table.getState().pagination.pageIndex === i ? color : 'slate', children: i + 1 }, i));\n };\n for (var i = 0; i < table.getPageCount(); i++) {\n _loop_1(i);\n }\n if (pageNumbers.length > 10) {\n if (currentInx - 3 > 0 && currentInx + 3 < table.getPageCount()) {\n pageNumbers = pageNumbers.slice(currentInx - 2, currentInx + 3);\n pageNumbers.unshift(_jsx(Button, { size: size, appearance: \"ghost\", onClick: function () {\n table.setPageIndex(0);\n setNowPage('1');\n }, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: \"ghost\", disabled: true, size: size, children: \"...\" }));\n pageNumbers.push(_jsx(Button, { appearance: \"ghost\", disabled: true, size: size, children: \"...\" }), _jsx(Button, { size: size, appearance: \"ghost\", onClick: function () {\n table.setPageIndex(table.getPageCount() - 1);\n setNowPage(String(table.getPageCount()));\n }, color: table.getState().pagination.pageIndex === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));\n }\n else if (currentInx - 3 <= 0) {\n pageNumbers = pageNumbers.slice(0, 7);\n pageNumbers.push(_jsx(Button, { appearance: \"ghost\", disabled: true, size: size, children: \"...\" }), _jsx(Button, { size: size, appearance: \"ghost\", onClick: function () {\n table.setPageIndex(table.getPageCount() - 1);\n setNowPage(String(table.getPageCount()));\n }, color: table.getState().pagination.pageIndex === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));\n }\n else {\n pageNumbers = pageNumbers.slice(table.getPageCount() - 7, table.getPageCount());\n pageNumbers.unshift(_jsx(Button, { size: size, appearance: \"ghost\", onClick: function () {\n table.setPageIndex(0);\n setNowPage('1');\n }, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: \"ghost\", disabled: true, size: size, children: \"...\" }));\n }\n }\n return pageNumbers;\n };\n return (_jsxs(\"div\", { children: [_jsxs(\"div\", { className: \"flex items-center justify-center gap-2\", children: [_jsxs(Select.Root, { size: size, color: color, value: String(table.getState().pagination.pageSize), defaultValue: String(table.getState().pagination.pageSize), onValueChange: function (e) {\n table.setPageSize(Number(e));\n setNowPage('1');\n table.setPageIndex(0);\n }, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: [10, 20, 30, 50, 100].map(function (pageSize) { return (_jsx(Select.Item, { value: String(pageSize), children: pageSize }, pageSize)); }) })] }), _jsxs(\"div\", { className: \"flex gap-2\", children: [_jsx(IconButton, { size: size, className: \"rounded border p-1\", color: color, onClick: function () {\n table.firstPage();\n setNowPage('1');\n }, disabled: !table.getCanPreviousPage(), children: _jsx(DoubleArrowLeftIcon, {}) }), _jsx(IconButton, { size: size, className: \"rounded border p-1\", color: color, onClick: function () {\n table.previousPage();\n setNowPage(String(table.getState().pagination.pageIndex));\n }, disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, {}) })] }), _jsx(\"div\", { children: renderPageNumbers() }), _jsxs(\"div\", { className: \"flex gap-2\", children: [_jsx(IconButton, { size: size, className: \"rounded border p-1\", color: color, onClick: function () {\n table.nextPage();\n setNowPage(String(table.getState().pagination.pageIndex + 2));\n }, disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { size: size, className: \"rounded border p-1\", color: color, onClick: function () {\n table.lastPage();\n setNowPage(String(table.getPageCount()));\n }, disabled: !table.getCanNextPage(), children: _jsx(DoubleArrowRightIcon, {}) })] })] }), _jsxs(\"div\", { className: \"mt-4 flex items-center justify-center gap-2\", children: [_jsx(TextField.Root, { size: size, type: \"number\", color: color, min: \"1\", max: table.getPageCount(), value: nowPage, onChange: function (e) {\n setNowPage(e.target.value);\n }, className: \"w-[50px] rounded border\" }), _jsxs(Text, { children: [\"/ \", table.getPageCount()] }), _jsx(Button, { size: size, onClick: function () { return table.setPageIndex(nowPage ? Number(nowPage) - 1 : 0); }, children: \"\\uC774\\uB3D9\" })] })] }));\n}\nexport default NumberingPagination;\n"],"names":["NumberingPagination","_a","_b","table","size","_c","useState","nowPage","setNowPage","color","options","MAIN_COLOR","_jsxs","children","className","Select","Root","value","String","getState","pagination","pageSize","defaultValue","onValueChange","e","setPageSize","Number","setPageIndex","_jsx","Trigger","Content","map","Item","IconButton","onClick","firstPage","disabled","getCanPreviousPage","DoubleArrowLeftIcon","previousPage","pageIndex","ChevronLeftIcon","pageNumbers","currentInx","_loop_1","i","push","Button","appearance","getPageCount","length","slice","unshift","renderPageNumbers","nextPage","getCanNextPage","ChevronRightIcon","lastPage","DoubleArrowRightIcon","TextField","type","min","max","onChange","target","Text"],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export declare const GridVariants: (props?: ({
|
|
2
2
|
color?: string | null | undefined;
|
|
3
3
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
4
|
-
declare function Grid({ table }: {
|
|
4
|
+
declare function Grid({ table, size }: {
|
|
5
5
|
table: any;
|
|
6
|
+
size?: 'small' | 'medium' | 'large';
|
|
6
7
|
}): import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
export default Grid;
|
|
@@ -18,15 +18,15 @@ export var GridVariants = cva("", {
|
|
|
18
18
|
});
|
|
19
19
|
function Grid(_a) {
|
|
20
20
|
var _b, _c, _d;
|
|
21
|
-
var table = _a.table;
|
|
21
|
+
var table = _a.table, _e = _a.size, size = _e === void 0 ? 'medium' : _e;
|
|
22
22
|
return (_jsx("div", { style: { direction: table.options.columnResizeDirection }, children: _jsxs("div", { className: "overflow-x-auto", children: [_jsxs(Table.Root, { style: {
|
|
23
23
|
// width: table.getCenterTotalSize(),
|
|
24
|
-
}, appearance: (_b = table.options) === null || _b === void 0 ? void 0 : _b.appearance, radius: (_c = table.options) === null || _c === void 0 ? void 0 : _c.radius, children: [_jsx(Table.Header, { children: table
|
|
24
|
+
}, size: size, appearance: (_b = table.options) === null || _b === void 0 ? void 0 : _b.appearance, radius: (_c = table.options) === null || _c === void 0 ? void 0 : _c.radius, children: [_jsx(Table.Header, { children: table
|
|
25
25
|
.getHeaderGroups()
|
|
26
26
|
.map(function (headerGroup) {
|
|
27
27
|
return (_jsx(Table.Row, { children: headerGroup.headers.map(function (header) {
|
|
28
28
|
var _a;
|
|
29
|
-
return (_jsxs(Table.ColumnHeaderCell, { colSpan: header.colSpan,
|
|
29
|
+
return (_jsxs(Table.ColumnHeaderCell, { size: size, colSpan: header.colSpan,
|
|
30
30
|
style: {
|
|
31
31
|
width: header.getSize(),
|
|
32
32
|
}, children: [header.isPlaceholder ? null : (_jsxs("div", { className: header.column.getCanSort() ? 'flex cursor-pointer select-none' : '', onClick: header.column.getToggleSortingHandler(), title: header.column.getCanSort()
|
|
@@ -54,6 +54,6 @@ function Grid(_a) {
|
|
|
54
54
|
.getRowModel()
|
|
55
55
|
.rows.map(function (row) { return (_jsx(Table.Row, { onClick: function () { return table.options.onRowClick && table.options.onRowClick(row); }, children: row.getVisibleCells().map(function (cell) { return (_jsx(Table.Cell, { style: {
|
|
56
56
|
width: cell.column.getSize(),
|
|
57
|
-
}, className: "h-[30px]", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); }) })] }), _jsx("div", { className: "h-2" }), ((_d = table.options) === null || _d === void 0 ? void 0 : _d.enableRowPagination) && _jsx(NumberingPagination, { table: table })] }) }));
|
|
57
|
+
}, className: "h-[30px]", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); }) })] }), _jsx("div", { className: "h-2" }), ((_d = table.options) === null || _d === void 0 ? void 0 : _d.enableRowPagination) && _jsx(NumberingPagination, { table: table, size: size })] }) }));
|
|
58
58
|
}
|
|
59
59
|
export default Grid;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{flexRender as n}from"@tanstack/react-table";import t from"../Table/index.mjs";import{ChevronUpIcon as i,ChevronDownIcon as r}from"@radix-ui/react-icons";import{cn as l}from"../../utils/utils.mjs";import{bgColorStyle as c}from"../../constants.mjs";import{cva as
|
|
2
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{flexRender as n}from"@tanstack/react-table";import t from"../Table/index.mjs";import{ChevronUpIcon as i,ChevronDownIcon as r}from"@radix-ui/react-icons";import{cn as l}from"../../utils/utils.mjs";import{bgColorStyle as c}from"../../constants.mjs";import{cva as s}from"class-variance-authority";import a from"./NumberingPagination.mjs";var u=s("",{variants:{color:c()},defaultVariants:{color:"red"}});function d(c){var s,d,m,p=c.table,g=c.size,f=void 0===g?"medium":g;return e("div",{style:{direction:p.options.columnResizeDirection},children:o("div",{className:"overflow-x-auto",children:[o(t.Root,{style:{},size:f,appearance:null===(s=p.options)||void 0===s?void 0:s.appearance,radius:null===(d=p.options)||void 0===d?void 0:d.radius,children:[e(t.Header,{children:p.getHeaderGroups().map((function(c){return e(t.Row,{children:c.headers.map((function(c){var s;return o(t.ColumnHeaderCell,{size:f,colSpan:c.colSpan,style:{width:c.getSize()},children:[c.isPlaceholder?null:o("div",{className:c.column.getCanSort()?"flex cursor-pointer select-none":"",onClick:c.column.getToggleSortingHandler(),title:c.column.getCanSort()?"asc"===c.column.getNextSortingOrder()?"Sort ascending":"desc"===c.column.getNextSortingOrder()?"Sort descending":"Clear sort":void 0,children:[n(c.column.columnDef.header,c.getContext()),"asc"==c.column.getIsSorted()?e(i,{}):"desc"==c.column.getIsSorted()?e(r,{}):null]}),e("div",{onDoubleClick:function(){return c.column.resetSize()},onMouseDown:c.getResizeHandler(),onTouchStart:c.getResizeHandler(),className:l("absolute top-0 h-full w-[3px] bg-slateA-3 cursor-col-resize select-none touch-none right-0 opacity-0 hover:opacity-100",p.options.columnResizeDirection,c.column.getIsResizing()?u({color:p.options.color}):""),style:{transform:c.column.getIsResizing()?"translateX(".concat(("rtl"===p.options.columnResizeDirection?-1:1)*(null!==(s=p.getState().columnSizingInfo.deltaOffset)&&void 0!==s?s:0),"px)"):""}})]},c.id)}))},c.id)}))}),e(t.Body,{children:p.getRowModel().rows.map((function(o){return e(t.Row,{onClick:function(){return p.options.onRowClick&&p.options.onRowClick(o)},children:o.getVisibleCells().map((function(o){return e(t.Cell,{style:{width:o.column.getSize()},className:"h-[30px]",children:n(o.column.columnDef.cell,o.getContext())},o.id)}))},o.id)}))})]}),e("div",{className:"h-2"}),(null===(m=p.options)||void 0===m?void 0:m.enableRowPagination)&&e(a,{table:p,size:f})]})})}export{u as GridVariants,d as default};
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -56,6 +56,17 @@ export var useGrid = function (_a) {
|
|
|
56
56
|
return (_jsxs("div", { className: "flex", style: { paddingLeft: "".concat(props.row.depth * 10, "px") }, children: [props.row.getCanExpand() ? (_jsx(IconButton, { onClick: props.row.getToggleExpandedHandler(), appearance: "ghost", className: "h-3 w-3", color: (_a = props.color) !== null && _a !== void 0 ? _a : theme.themeColor, children: props.row.getIsExpanded() ? _jsx(ChevronDownIcon, {}) : _jsx(ChevronRightIcon, {}) })) : (_jsx(_Fragment, {})), _jsx("div", { children: firstcell_1 ? firstcell_1(props) : props.getValue() })] }));
|
|
57
57
|
} });
|
|
58
58
|
}
|
|
59
|
+
if (props.enableIndexing && !props.enableExpanding) {
|
|
60
|
+
columnsData === null || columnsData === void 0 ? void 0 : columnsData.unshift({
|
|
61
|
+
id: 'index',
|
|
62
|
+
size: 50,
|
|
63
|
+
header: 'NO',
|
|
64
|
+
cell: function (_a) {
|
|
65
|
+
var row = _a.row;
|
|
66
|
+
return _jsx("div", { children: row.index + 1 });
|
|
67
|
+
},
|
|
68
|
+
});
|
|
69
|
+
}
|
|
59
70
|
if (props.enableRowSelection) {
|
|
60
71
|
columnsData === null || columnsData === void 0 ? void 0 : columnsData.unshift({
|
|
61
72
|
id: 'select',
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as
|
|
2
|
+
import{jsxs as e,jsx as n,Fragment as t}from"react/jsx-runtime";import{createColumnHelper as o,getSortedRowModel as r,getCoreRowModel as a,getExpandedRowModel as l,getPaginationRowModel as i,useReactTable as d}from"@tanstack/react-table";import c,{useRef as s}from"react";import{IconButton as u}from"../IconButton/index.mjs";import{ChevronDownIcon as g,ChevronRightIcon as p}from"@radix-ui/react-icons";import{Checkbox as m}from"../Checkbox/index.mjs";import{useTheme as h}from"../../theme/ThemeProvider.mjs";var f=function(){return f=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},f.apply(this,arguments)},b=function(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)n.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(t[o[r]]=e[o[r]])}return t};function w(e){var t=e.indeterminate,o=e.checked,r=e.disabled,a=e.onChange,l=s();return c.useEffect((function(){"boolean"==typeof t&&(l.current.indeterminate=o&&t)}),[l,t]),n(m,{ref:l,id:"checkbox",checked:o,disabled:r,onCheckedChange:function(e){return a&&a({target:{value:e}})},indeterminate:t})}var x=function(s){var m,x,v=b(s,[]),S=h().theme,R=c.useState([]),y=R[0],C=R[1],O=c.useState({}),E=O[0],I=O[1],j=c.useState({}),k=j[0],P=j[1],N=o(),A=null===(m=null==v?void 0:v.columns)||void 0===m?void 0:m.map((function(e){return N.accessor(e.id,f({},e))}));if(v.enableExpanding){var M=A[0].cell;A[0]=f(f({},A[0]),{cell:function(o){var r;return e("div",{className:"flex",style:{paddingLeft:"".concat(10*o.row.depth,"px")},children:[o.row.getCanExpand()?n(u,{onClick:o.row.getToggleExpandedHandler(),appearance:"ghost",className:"h-3 w-3",color:null!==(r=o.color)&&void 0!==r?r:S.themeColor,children:o.row.getIsExpanded()?n(g,{}):n(p,{})}):n(t,{}),n("div",{children:M?M(o):o.getValue()})]})}})}v.enableIndexing&&!v.enableExpanding&&(null==A||A.unshift({id:"index",size:50,header:"NO",cell:function(e){var t=e.row;return n("div",{children:t.index+1})}})),v.enableRowSelection&&(null==A||A.unshift({id:"select",size:50,header:function(e){var t=e.table;return n("div",{className:"header-checkbox",children:n(w,{checked:t.getIsAllRowsSelected()||t.getIsSomeRowsSelected(),indeterminate:t.getIsSomeRowsSelected(),onChange:t.getToggleAllRowsSelectedHandler()})})},cell:function(e){var t=e.row;return n("div",{className:"px-1",style:{paddingLeft:"".concat(10*t.depth,"px")},children:n(w,{checked:t.getIsSelected()||t.getIsSomeSelected()||t.getIsAllSubRowsSelected(),indeterminate:t.getIsSomeSelected()&&!t.getIsAllSubRowsSelected(),onChange:t.getToggleSelectedHandler()})})}}));var T=f(f({state:{sorting:y,rowSelection:k,expanded:E}},v),{data:v.data,columns:A,color:null!==(x=v.color)&&void 0!==x?x:S.themeColor,paginateExpandedRows:!0,enableExpanding:!!v.enableExpanding,getSubRows:function(e){return e.subRows},onExpandedChange:I,onSortingChange:C,onRowSelectionChange:P,getSortedRowModel:r(),getCoreRowModel:a(),getExpandedRowModel:l()});return v.enableRowPagination&&(T.getPaginationRowModel=i()),d(T)};export{x as useGrid};
|
|
3
3
|
//# sourceMappingURL=useGrid.mjs.map
|
|
@@ -28,6 +28,7 @@ import { cn } from '../../../lib/utils/utils';
|
|
|
28
28
|
import { bgColorStyle, scalingVariants } from '../../../lib/constants';
|
|
29
29
|
import { useTheme } from '../../../lib/theme';
|
|
30
30
|
import * as ReactProSidebar from 'react-pro-sidebar';
|
|
31
|
+
import { useWindowSize } from '../../../lib/utils/useWindowSize';
|
|
31
32
|
import * as alphaColors from '../../../lib/color/alpha';
|
|
32
33
|
var sidebarVariants = cva('', {
|
|
33
34
|
variants: {
|
|
@@ -39,11 +40,12 @@ export var Root = React.forwardRef(function (_a, forwardedRef) {
|
|
|
39
40
|
var _b;
|
|
40
41
|
var scaling = _a.scaling, size = _a.size, color = _a.color, className = _a.className, children = _a.children, props = __rest(_a, ["scaling", "size", "color", "className", "children"]);
|
|
41
42
|
var theme = useTheme().theme;
|
|
43
|
+
var windowSize = useWindowSize();
|
|
42
44
|
var sidebarStyle = {
|
|
43
45
|
scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
|
|
44
46
|
color: (_b = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _b !== void 0 ? _b : 'slate',
|
|
45
47
|
};
|
|
46
|
-
return (_jsx(ReactProSidebar.Sidebar, __assign({ className: cn("bg-".concat(sidebarStyle.color, "A-6 dark:bg-").concat(sidebarStyle.color, "DarkA-6"), sidebarVariants({ scaling: sidebarStyle.scaling }), className) }, props, { collapsed: props.collapsed, children: children })));
|
|
48
|
+
return (_jsx(ReactProSidebar.Sidebar, __assign({ className: cn("bg-".concat(sidebarStyle.color, "A-6 dark:bg-").concat(sidebarStyle.color, "DarkA-6"), sidebarVariants({ scaling: sidebarStyle.scaling }), className) }, props, { collapsed: props.collapsed === undefined ? windowSize <= 250 : props.collapsed, children: children })));
|
|
47
49
|
});
|
|
48
50
|
Root.displayName = 'Sidebar.Root';
|
|
49
51
|
export var Menu = React.forwardRef(function (_a, forwardedRef) {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e}from"react/jsx-runtime";import r from"react";import{cva as
|
|
2
|
+
import{jsx as e}from"react/jsx-runtime";import r from"react";import{cva as o}from"class-variance-authority";import{cn as a}from"../../utils/utils.mjs";import{scalingVariants as l,bgColorStyle as n}from"../../constants.mjs";import{useTheme as t}from"../../theme/ThemeProvider.mjs";import*as c from"react-pro-sidebar";import{useWindowSize as i}from"../../utils/useWindowSize.mjs";import*as s from"../../color/alpha.mjs";var m=function(){return m=Object.assign||function(e){for(var r,o=1,a=arguments.length;o<a;o++)for(var l in r=arguments[o])Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);return e},m.apply(this,arguments)},u=function(e,r){var o={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&r.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(a=Object.getOwnPropertySymbols(e);l<a.length;l++)r.indexOf(a[l])<0&&Object.prototype.propertyIsEnumerable.call(e,a[l])&&(o[a[l]]=e[a[l]])}return o},d=o("",{variants:{scaling:m({},l),color:n()}}),p=r.forwardRef((function(r,o){var l,n=r.scaling;r.size;var s=r.color,p=r.className,f=r.children,h=u(r,["scaling","size","color","className","children"]),v=t().theme,g=i(),b={scaling:null!=n?n:v.themeScaling,color:null!==(l=null!=s?s:v.themeColor)&&void 0!==l?l:"slate"};return e(c.Sidebar,m({className:a("bg-".concat(b.color,"A-6 dark:bg-").concat(b.color,"DarkA-6"),d({scaling:b.scaling}),p)},h,{collapsed:void 0===h.collapsed?g<=250:h.collapsed,children:f}))}));p.displayName="Sidebar.Root";var f=r.forwardRef((function(r,o){var a,l=r.scaling,n=r.size,i=r.color;r.className;var d=r.menuItemStyles,p=r.children,f=u(r,["scaling","size","color","className","menuItemStyles","children"]),h="50px",v="16px";"small"==n&&(h="40px",v="14px"),"large"==n&&(h="60px",v="18px");var g=t().theme,b={scaling:null!=l?l:g.themeScaling,color:null!==(a=null!=i?i:g.themeColor)&&void 0!==a?a:"slate"},y="".concat(b.color,"A"),S=s[y];return e(c.Menu,m({menuItemStyles:m({button:function(e){e.level;var r=e.active;return e.disabled,e.open,{height:h,fontSize:v,backgroundColor:r?S[5]:"","&:hover":{backgroundColor:S[3]}}}},d)},f,{children:p}))}));f.displayName="Sidebar.Menu";var h=r.forwardRef((function(r,o){r.scaling,r.size,r.color,r.className;var a=r.children,l=u(r,["scaling","size","color","className","children"]);return e(c.MenuItem,m({},l,{children:a}))}));h.displayName="Sidebar.Item";var v=r.forwardRef((function(r,o){r.scaling,r.size,r.color,r.className;var a=r.children,l=u(r,["scaling","size","color","className","children"]);return e(c.SubMenu,m({},l,{children:a}))}));v.displayName="Sidebar.SubMenu";var g={Root:p,Menu:f,Item:h,SubMenu:v};export{h as Item,f as Menu,p as Root,v as SubMenu,g as default};
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -47,6 +47,8 @@ var DynamicTabs = React.forwardRef(function (_a, ref) {
|
|
|
47
47
|
color: (_b = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _b !== void 0 ? _b : 'slate',
|
|
48
48
|
};
|
|
49
49
|
useEffect(function () {
|
|
50
|
+
if (tabData.length == 0 && defaultTab)
|
|
51
|
+
setTabData([defaultTab]);
|
|
50
52
|
if (tabData.length > 20)
|
|
51
53
|
setTabData(tabData.slice(0, 20));
|
|
52
54
|
}, [tabData]);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Cross1Icon as l,TrashIcon as n,ChevronLeftIcon as r,ChevronRightIcon as o}from"@radix-ui/react-icons";import{cva as a}from"class-variance-authority";import{weightVariants as i,scalingVariants as c,bgColorStyle as s}from"../../constants.mjs";import d,{useState as m,useEffect as u}from"react";import{Tabs as p,TabList as f,Tab as h,TabPanel as b}from"react-tabs";import{IconButton as v}from"../IconButton/index.mjs";import{cn as x}from"../../utils/utils.mjs";import{useTheme as g}from"../../theme/ThemeProvider.mjs";var y=function(){return y=Object.assign||function(e){for(var t,l=1,n=arguments.length;l<n;l++)for(var r in t=arguments[l])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},y.apply(this,arguments)},j=function(e,t){var l={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(l[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(l[n[r]]=e[n[r]])}return l},w=a("",{variants:{weight:y({},i),scaling:y({},c),color:s()}}),k=d.forwardRef((function(a,i){var c,s=a.tabData,d=a.scaling,k=a.color,O=a.setTabData,C=a.defaultTab,D=a.onDeleteTab,T=a.onDeleteAllTabs,N=a.onSelect;a.maxCount;var S=a.className,A=j(a,["tabData","scaling","color","setTabData","defaultTab","onDeleteTab","onDeleteAllTabs","onSelect","maxCount","className"]),P=m(0),z=P[0],I=P[1],B=g().theme,E={scaling:null!=d?d:B.themeScaling,color:null!==(c=null!=k?k:B.themeColor)&&void 0!==c?c:"slate"};return u((function(){s.length>20&&O(s.slice(0,20))}),[s]),e(p,y({selectedIndex:z,className:x("flex w-full text-slate-12",w({scaling:E.scaling}),S),onSelect:function(e,t,l){I(e),N&&N(e,t,l)}},A,{children:[t(f,{className:"mb-[10px] flex flex-1 overflow-x-auto overflow-y-hidden p-0",children:s.map((function(n,r){return t(h,{className:x("relative bottom-[-1px] inline-block w-[50px] max-w-[350px] flex-1 cursor-pointer list-none aria-selected:rounded-t-lg aria-selected:border aria-selected:border-b-0 aria-selected:border-slateA-8 aria-selected:bg-slate-1"),onClick:function(e){var t,l;return(null===(t=n.title)||void 0===t?void 0:t.onClick)&&(null===(l=n.title)||void 0===l?void 0:l.onClick(n))},children:e("div",{className:x("mx-[3px] my-[2px] flex justify-between rounded-lg px-[9px] py-[4px]","hover:bg-".concat(E.color,"A-6 hover:dark:bg-").concat(E.color,"DarkA-6")),children:[t("div",{className:"flex-1 overflow-hidden truncate text-ellipsis",children:n.title.children()}),((null==s?void 0:s.length)<15||z==r)&&t(v,{size:"small",appearance:"ghost",color:E.color,scaling:E.scaling,onClick:function(){var e=s.filter((function(e){return e.key!==n.key}));O(C&&0==e.length?[C]:e),0==e.length?I(0):z-1>=0&&I(z-1),D&&D(n)},children:t(l,{})})]})},r)}))}),s.map((function(e,l){var n;return t(b,{children:null===(n=null==e?void 0:e.content)||void 0===n?void 0:n.children()},l)})),e("div",{className:"right-5 mb-[10px] flex justify-end p-0 px-3 py-2",children:[t(v,{size:"small",appearance:"ghost",onClick:function(){I(0),O(C?[C]:[]),T&&T()},children:t(n,{})}),t(v,{size:"small",appearance:"ghost",onClick:function(){return z-1>=0&&I(z-1)},children:t(r,{})}),t(v,{size:"small",appearance:"ghost",onClick:function(){return z+1<s.length&&I(z+1)},children:t(o,{})})]})]}))}));k.displayName="DynamicTabs";export{k as default};
|
|
2
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Cross1Icon as l,TrashIcon as n,ChevronLeftIcon as r,ChevronRightIcon as o}from"@radix-ui/react-icons";import{cva as a}from"class-variance-authority";import{weightVariants as i,scalingVariants as c,bgColorStyle as s}from"../../constants.mjs";import d,{useState as m,useEffect as u}from"react";import{Tabs as p,TabList as f,Tab as h,TabPanel as b}from"react-tabs";import{IconButton as v}from"../IconButton/index.mjs";import{cn as x}from"../../utils/utils.mjs";import{useTheme as g}from"../../theme/ThemeProvider.mjs";var y=function(){return y=Object.assign||function(e){for(var t,l=1,n=arguments.length;l<n;l++)for(var r in t=arguments[l])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},y.apply(this,arguments)},j=function(e,t){var l={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(l[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(l[n[r]]=e[n[r]])}return l},w=a("",{variants:{weight:y({},i),scaling:y({},c),color:s()}}),k=d.forwardRef((function(a,i){var c,s=a.tabData,d=a.scaling,k=a.color,O=a.setTabData,C=a.defaultTab,D=a.onDeleteTab,T=a.onDeleteAllTabs,N=a.onSelect;a.maxCount;var S=a.className,A=j(a,["tabData","scaling","color","setTabData","defaultTab","onDeleteTab","onDeleteAllTabs","onSelect","maxCount","className"]),P=m(0),z=P[0],I=P[1],B=g().theme,E={scaling:null!=d?d:B.themeScaling,color:null!==(c=null!=k?k:B.themeColor)&&void 0!==c?c:"slate"};return u((function(){0==s.length&&C&&O([C]),s.length>20&&O(s.slice(0,20))}),[s]),e(p,y({selectedIndex:z,className:x("flex w-full text-slate-12",w({scaling:E.scaling}),S),onSelect:function(e,t,l){I(e),N&&N(e,t,l)}},A,{children:[t(f,{className:"mb-[10px] flex flex-1 overflow-x-auto overflow-y-hidden p-0",children:s.map((function(n,r){return t(h,{className:x("relative bottom-[-1px] inline-block w-[50px] max-w-[350px] flex-1 cursor-pointer list-none aria-selected:rounded-t-lg aria-selected:border aria-selected:border-b-0 aria-selected:border-slateA-8 aria-selected:bg-slate-1"),onClick:function(e){var t,l;return(null===(t=n.title)||void 0===t?void 0:t.onClick)&&(null===(l=n.title)||void 0===l?void 0:l.onClick(n))},children:e("div",{className:x("mx-[3px] my-[2px] flex justify-between rounded-lg px-[9px] py-[4px]","hover:bg-".concat(E.color,"A-6 hover:dark:bg-").concat(E.color,"DarkA-6")),children:[t("div",{className:"flex-1 overflow-hidden truncate text-ellipsis",children:n.title.children()}),((null==s?void 0:s.length)<15||z==r)&&t(v,{size:"small",appearance:"ghost",color:E.color,scaling:E.scaling,onClick:function(){var e=s.filter((function(e){return e.key!==n.key}));O(C&&0==e.length?[C]:e),0==e.length?I(0):z-1>=0&&I(z-1),D&&D(n)},children:t(l,{})})]})},r)}))}),s.map((function(e,l){var n;return t(b,{children:null===(n=null==e?void 0:e.content)||void 0===n?void 0:n.children()},l)})),e("div",{className:"right-5 mb-[10px] flex justify-end p-0 px-3 py-2",children:[t(v,{size:"small",appearance:"ghost",onClick:function(){I(0),O(C?[C]:[]),T&&T()},children:t(n,{})}),t(v,{size:"small",appearance:"ghost",onClick:function(){return z-1>=0&&I(z-1)},children:t(r,{})}),t(v,{size:"small",appearance:"ghost",onClick:function(){return z+1<s.length&&I(z+1)},children:t(o,{})})]})]}))}));k.displayName="DynamicTabs";export{k as default};
|
|
3
3
|
//# sourceMappingURL=DynamicTabs.mjs.map
|
|
@@ -2,7 +2,6 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
2
2
|
import { IColor } from '../../../lib/types';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { StaticTreeDataProvider } from 'react-complex-tree';
|
|
5
|
-
import 'react-complex-tree/lib/style-modern.css';
|
|
6
5
|
export interface TreeProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof treeVariants> {
|
|
7
6
|
color?: IColor;
|
|
8
7
|
items: any;
|
|
@@ -15,5 +14,5 @@ declare const treeVariants: (props?: ({
|
|
|
15
14
|
declare let treeProvider: StaticTreeDataProvider | null;
|
|
16
15
|
declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<import("react-complex-tree").UncontrolledTreeEnvironmentProps<unknown, string> & {
|
|
17
16
|
ref?: React.Ref<import("react-complex-tree").TreeEnvironmentRef<unknown, string>> | undefined;
|
|
18
|
-
}, "ref">, "children" | "viewState" | "canSearch" | "dataProvider"> & TreeProps & React.RefAttributes<import("react-complex-tree").TreeEnvironmentRef<unknown, string>>>;
|
|
17
|
+
}, "ref">, "children" | "viewState" | "getItemTitle" | "canSearch" | "dataProvider"> & TreeProps & React.RefAttributes<import("react-complex-tree").TreeEnvironmentRef<unknown, string>>>;
|
|
19
18
|
export { Tree, treeProvider };
|
|
@@ -70,7 +70,6 @@ import { cva } from 'class-variance-authority';
|
|
|
70
70
|
import { primaryColorStyle } from '../../../lib/constants';
|
|
71
71
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
72
72
|
import { StaticTreeDataProvider, Tree as ComplexTree, UncontrolledTreeEnvironment, } from 'react-complex-tree';
|
|
73
|
-
import 'react-complex-tree/lib/style-modern.css';
|
|
74
73
|
import TextField from '../TextField';
|
|
75
74
|
import Button from '../Button';
|
|
76
75
|
import { MAIN_COLOR } from '../../../lib/color/constants';
|
|
@@ -178,7 +177,9 @@ var Tree = React.forwardRef(function (_a, ref) {
|
|
|
178
177
|
setTreeData(t_1);
|
|
179
178
|
}
|
|
180
179
|
}, [items]);
|
|
181
|
-
return (_jsxs("div", { className: "text-slate-12", children: [isSearch && (_jsxs("div", { className: "flex", children: [_jsx(TextField.Root, { color: contextValue.color, value: search, onChange: function (e) { return setSearch(e.target.value); }, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: "mr-2" }), _jsx(Button, { color: contextValue.color, onClick: find, children: "\uAC80\uC0C9" })] })), _jsx(UncontrolledTreeEnvironment, __assign({ ref: ref, dataProvider: treeProvider,
|
|
180
|
+
return (_jsxs("div", { className: "text-slate-12", children: [isSearch && (_jsxs("div", { className: "flex", children: [_jsx(TextField.Root, { color: contextValue.color, value: search, onChange: function (e) { return setSearch(e.target.value); }, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: "mr-2" }), _jsx(Button, { color: contextValue.color, onClick: find, children: "\uAC80\uC0C9" })] })), _jsx(UncontrolledTreeEnvironment, __assign({ ref: ref, dataProvider: treeProvider, getItemTitle: function (item) {
|
|
181
|
+
return item.data;
|
|
182
|
+
}, viewState: (_b = {},
|
|
182
183
|
_b[treeId] = {
|
|
183
184
|
focusedItem: (_d = focusedItem[0]) !== null && _d !== void 0 ? _d : '',
|
|
184
185
|
expandedItems: expandedItems,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";import{primaryColorStyle as n}from"../../constants.mjs";import o,{useState as a,useRef as i,useCallback as l,useEffect as c}from"react";import{StaticTreeDataProvider as u,UncontrolledTreeEnvironment as s,Tree as f}from"react-complex-tree";import d from"../TextField/index.mjs";import{Button as m}from"../Button/index.mjs";import{MAIN_COLOR as p}from"../../color/constants.mjs";import{useTheme as h}from"../../theme/ThemeProvider.mjs";var v=function(){return v=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},v.apply(this,arguments)},y=function(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{c(n.next(e))}catch(e){a(e)}}function l(e){try{c(n.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,l)}c((n=n.apply(e,t||[])).next())}))},b=function(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(l){return function(c){return function(l){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,l[0]&&(i=0)),i;)try{if(r=1,n&&(o=2&l[0]?n.return:l[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,l[1])).done)return o;switch(n=0,o&&(l=[2&l[0],o.value]),l[0]){case 0:case 1:o=l;break;case 4:return i.label++,{value:l[1],done:!1};case 5:i.label++,n=l[1],l=[0];continue;case 7:l=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==l[0]&&2!==l[0])){i=0;continue}if(3===l[0]&&(!o||l[1]>o[0]&&l[1]<o[3])){i.label=l[1];break}if(6===l[0]&&i.label<o[1]){i.label=o[1],o=l;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(l);break}o[2]&&i.ops.pop(),i.trys.pop();continue}l=t.call(e,i)}catch(e){l=[6,e],n=0}finally{r=o=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,c])}}},x=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r},g=function(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))};function w(e,t){var r=[];return Object.values(e).forEach((function(e){e[t]&&r.push(e.index)})),r}r("",{variants:{color:n()}});var I=null,j=o.forwardRef((function(r,n){var o,j,O,S=r.items,P=r.treeId;r.className;var T=r.color,k=r.isSearch,E=x(r,["items","treeId","className","color","isSearch"]),N=a(""),C=N[0],F=N[1],R=i(null),B=a({}),L=B[0],A=B[1],q=w(S,"isFocusd"),z=w(S,"isExpanded"),D=w(S,"isSelected");I=new u(L,(function(e,t){return v(v({},e),{data:t})}));var G=h().theme,H={color:null!==(j=null!=T?T:G.themeColor)&&void 0!==j?j:p},J=l((function(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];return y(void 0,g([e],t,!0),void 0,(function(e,t){var r,n,o,a,i;return void 0===t&&(t="root"),b(this,(function(l){switch(l.label){case 0:return I?[4,I.getTreeItem(t)]:[2];case 1:return(r=l.sent()).data.toLowerCase().includes(e.toLowerCase())?[2,[r.index]]:[4,Promise.all(null!==(i=null===(a=r.children)||void 0===a?void 0:a.map((function(t){return J(e,t)})))&&void 0!==i?i:[])];case 2:return n=l.sent(),o=n.find((function(e){return null!==e})),o?[2,g([r.index],o,!0)]:[2,null]}}))}))}),[I]),K=l((function(e){e.preventDefault(),C&&J(C).then((function(e){var t;e&&(null===(t=R.current)||void 0===t||t.expandSubsequently(e).then((function(){var t,r;null===(t=R.current)||void 0===t||t.selectItems([e[e.length-1]]),null===(r=R.current)||void 0===r||r.focusItem(e[e.length-1])})))}))}),[J,C]);return c((function(){if(S){var e=[],t=[];S.map((function(e){t.push.apply(t,e.children)})),S.forEach((function(r){t.includes(r.index)||e.push(r.index)}));var r={};r.root={index:"root",isFolder:!0,children:e,data:"Root item"},S.map((function(e){r[e.index]=v(v({},e),{isFolder:e.children.length>0})})),A(r)}}),[S]),e("div",{className:"text-slate-12",children:[k&&e("div",{className:"flex",children:[t(d.Root,{color:H.color,value:C,onChange:function(e){return F(e.target.value)},placeholder:"검색어를 입력하세요",className:"mr-2"}),t(m,{color:H.color,onClick:K,children:"검색"})]}),t(s,v({ref:n,dataProvider:I,getItemTitle:function(e){return e.data},viewState:(o={},o[P]={focusedItem:null!==(O=q[0])&&void 0!==O?O:"",expandedItems:z,selectedItems:D},o),keyboardBindings:v({renameItem:["enter"],abortRenameItem:["control+z"]},E.keyboardBindings)},E,{canSearch:!1,children:t(f,{ref:R,treeId:P,rootItem:"root",treeLabel:"Tree Example"})}))]})}));j.displayName="Tree";export{j as Tree,I as treeProvider};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|