@loword/loword-design-system 0.2.1 → 0.2.3
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/components/LDDataCalendar/LDDataCalendar.js +1 -1
- package/dist/components/LDDatePicker/LDDatePicker.js +1 -1
- package/dist/components/LDDateRangePicker/LDDateRangePicker.js +2 -2
- package/dist/components/LDEditor/EditorBase.d.ts.map +1 -1
- package/dist/components/LDEditor/EditorBase.js +25 -2
- package/dist/components/LDEditor/LDEditor.d.ts.map +1 -1
- package/dist/components/LDEditor/LDEditor.js +2 -1
- package/dist/components/LDFileUpload/FileUploadBase.d.ts +20 -4
- package/dist/components/LDFileUpload/FileUploadBase.d.ts.map +1 -1
- package/dist/components/LDFileUpload/FileUploadBase.js +41 -18
- package/dist/components/LDFileUpload/LDFileUpload.d.ts +19 -6
- package/dist/components/LDFileUpload/LDFileUpload.d.ts.map +1 -1
- package/dist/components/LDFileUpload/LDFileUpload.js +124 -28
- package/dist/components/LDFileUpload/LDFileUploadList.js +1 -1
- package/dist/components/LDInput/LDInput.d.ts +3 -1
- package/dist/components/LDInput/LDInput.d.ts.map +1 -1
- package/dist/components/LDInput/LDInput.js +10 -4
- package/dist/components/LDLNB/LDLNB.d.ts.map +1 -1
- package/dist/components/LDLNB/LDLNB.js +1 -2
- package/dist/components/LDLNB/LNBBase.d.ts +1 -2
- package/dist/components/LDLNB/LNBBase.d.ts.map +1 -1
- package/dist/components/LDLNB/LNBBase.js +10 -4
- package/dist/components/LDModal/LDModal.d.ts +7 -6
- package/dist/components/LDModal/LDModal.d.ts.map +1 -1
- package/dist/components/LDModal/LDModalView.d.ts +3 -3
- package/dist/components/LDModal/LDModalView.d.ts.map +1 -1
- package/dist/components/LDModal/LDModalView.js +6 -5
- package/dist/components/LDSelect/LDMultiSelect.js +1 -1
- package/dist/components/LDSelect/LDSelect.js +1 -1
- package/dist/components/LDTable/HeadlessTable.d.ts +4 -0
- package/dist/components/LDTable/HeadlessTable.d.ts.map +1 -1
- package/dist/components/LDTable/HeadlessTable.js +12 -1
- package/dist/components/LDTable/LDCollapsibleTanstackTable.d.ts.map +1 -1
- package/dist/components/LDTable/LDCollapsibleTanstackTable.js +2 -2
- package/dist/components/LDTable/LDTable.js +2 -2
- package/dist/components/LDTable/LDTanstackTable.d.ts.map +1 -1
- package/dist/components/LDTable/LDTanstackTable.js +2 -2
- package/dist/components/LDTextarea/LDTextarea.js +7 -7
- package/dist/components/LDTimePicker/LDTimePicker.js +1 -1
- package/dist/index.css +231 -21
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/utils/file.d.ts +2 -0
- package/dist/utils/file.d.ts.map +1 -1
- package/dist/utils/file.js +1 -0
- package/dist/utils/utils.d.ts +29 -3
- package/dist/utils/utils.d.ts.map +1 -1
- package/dist/utils/utils.js +93 -4
- package/package.json +1 -1
- package/src/styles/components/editor.css +14 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import LDFileUpload from '../../components/LDFileUpload/LDFileUpload.js';
|
|
3
3
|
/** 여러 개의 일반 파일을 업로드하는 기본 조합입니다. */
|
|
4
|
-
const LDFileUploadList = ({ recommendedSize = { width: 1200, height: 800 }, isExistDescription, fileList, maxFileCount, disabled, ...props }) => (_jsxs(LDFileUpload.Root, { ...props, fileList: fileList, recommendedSize: recommendedSize, maxFileCount: maxFileCount, disabled: disabled, children: [fileList.length < maxFileCount && !disabled && (_jsx(LDFileUpload.Input, {
|
|
4
|
+
const LDFileUploadList = ({ recommendedSize = { width: 1200, height: 800 }, isExistDescription, fileList, maxFileCount, disabled, ...props }) => (_jsxs(LDFileUpload.Root, { ...props, fileList: fileList, recommendedSize: recommendedSize, maxFileCount: maxFileCount, disabled: disabled, children: [fileList.length > 0 && _jsx(LDFileUpload.CardList, {}), fileList.length < maxFileCount && !disabled && (_jsx(LDFileUpload.Input, { type: "attachment" })), isExistDescription && _jsx(LDFileUpload.Description, {})] }));
|
|
5
5
|
export default LDFileUploadList;
|
|
@@ -19,6 +19,8 @@ export interface LDInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>
|
|
|
19
19
|
block?: boolean;
|
|
20
20
|
/** 래퍼(Root div)에 적용할 className */
|
|
21
21
|
rootClassName?: string;
|
|
22
|
+
/** 좌측 부가 요소 (아이콘 등) */
|
|
23
|
+
leftAddon?: ReactNode;
|
|
22
24
|
/** 우측 부가 요소 (아이콘 등) */
|
|
23
25
|
rightAddon?: ReactNode;
|
|
24
26
|
/** 우측 addon 컨테이너 ref (addon 폭·위치 측정용) */
|
|
@@ -28,6 +30,6 @@ export interface LDInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>
|
|
|
28
30
|
/** input 요소 ref */
|
|
29
31
|
ref?: Ref<HTMLInputElement>;
|
|
30
32
|
}
|
|
31
|
-
declare const LDInput: ({ variant, color, size, block, type, disabled, className, rootClassName, style, rightAddon, addonRef, suffix, hiddenPasswordToggle, ref, value, defaultValue, onChange, ...props }: LDInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
declare const LDInput: ({ variant, color, size, block, type, disabled, className, rootClassName, style, leftAddon, rightAddon, addonRef, suffix, hiddenPasswordToggle, ref, value, defaultValue, onChange, ...props }: LDInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
32
34
|
export default LDInput;
|
|
33
35
|
//# sourceMappingURL=LDInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDInput/LDInput.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAK7C,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AACvE,MAAM,MAAM,SAAS,GAAG,MAAM,CAC5B,IAAI,EACJ,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAC/D,CAAC;AAKF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAOvD,CAAC;AAIF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAO/C,CAAC;AAqKF,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,MAAM,CACjB;IACC,mBAAmB;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAChC,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,GAAI,
|
|
1
|
+
{"version":3,"file":"LDInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDInput/LDInput.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAK7C,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AACvE,MAAM,MAAM,SAAS,GAAG,MAAM,CAC5B,IAAI,EACJ,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAC/D,CAAC;AAKF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAOvD,CAAC;AAIF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAO/C,CAAC;AAqKF,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,MAAM,CACjB;IACC,mBAAmB;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uBAAuB;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAChC,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,GAAI,+LAoBd,YAAY,4CAqLd,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -172,13 +172,14 @@ const passwordToggleVariants = tv({
|
|
|
172
172
|
disabled: { true: 'cursor-not-allowed', false: 'cursor-pointer' },
|
|
173
173
|
},
|
|
174
174
|
});
|
|
175
|
-
const LDInput = ({ variant, color = 'neutral', size, block = false, type = 'text', disabled = false, className, rootClassName, style, rightAddon, addonRef, suffix, hiddenPasswordToggle = false, ref, value, defaultValue, onChange, ...props }) => {
|
|
175
|
+
const LDInput = ({ variant, color = 'neutral', size, block = false, type = 'text', disabled = false, className, rootClassName, style, leftAddon, rightAddon, addonRef, suffix, hiddenPasswordToggle = false, ref, value, defaultValue, onChange, ...props }) => {
|
|
176
176
|
const [passwordVisible, setPasswordVisible] = useState(false);
|
|
177
177
|
const [inputValue, setInputValue] = useState(() => String(value ?? defaultValue ?? ''));
|
|
178
178
|
const [suffixLeft, setSuffixLeft] = useState(0); // suffix의 최종 left 위치(px)
|
|
179
179
|
const valueRef = useRef(null); // 값 폭 측정용 숨은 span
|
|
180
180
|
const suffixRef = useRef(null); // suffix 자체 폭 측정용
|
|
181
181
|
const rootRef = useRef(null); // Root 래퍼(패딩·폭 측정용, suffix 위치 계산)
|
|
182
|
+
const leftAddonRef = useRef(null); // 좌측 addon 폭 측정용(suffix 위치 보정)
|
|
182
183
|
const isPasswordToggle = !hiddenPasswordToggle && type === 'password';
|
|
183
184
|
const resolvedType = isPasswordToggle
|
|
184
185
|
? passwordVisible
|
|
@@ -206,11 +207,16 @@ const LDInput = ({ variant, color = 'neutral', size, block = false, type = 'text
|
|
|
206
207
|
const cs = getComputedStyle(root);
|
|
207
208
|
const padLeft = parseFloat(cs.paddingLeft) || 0; // "12px" → 12
|
|
208
209
|
const padRight = parseFloat(cs.paddingRight) || 0;
|
|
210
|
+
// leftAddon이 있으면 input 시작점이 addon 폭 + gap만큼 밀린다. suffix도 같이 밀어야 값 뒤에 붙는다.
|
|
211
|
+
const leftAddonEl = leftAddonRef.current;
|
|
212
|
+
const leftOffset = leftAddonEl
|
|
213
|
+
? leftAddonEl.offsetWidth + (parseFloat(cs.columnGap) || 0)
|
|
214
|
+
: 0;
|
|
209
215
|
// 값 뒤에 붙이되, suffix 오른끝이 Root 안쪽 오른 경계를 넘지 않게 clamp.
|
|
210
216
|
// clientWidth = content+padding (border 제외) → 안쪽 폭
|
|
211
217
|
const maxLeft = root.clientWidth - padRight - suffixWidth;
|
|
212
|
-
setSuffixLeft(Math.min(padLeft + valueWidth + SUFFIX_GAP, maxLeft));
|
|
213
|
-
}, [displayedValue, resolvedSize, suffix]);
|
|
218
|
+
setSuffixLeft(Math.min(padLeft + leftOffset + valueWidth + SUFFIX_GAP, maxLeft));
|
|
219
|
+
}, [displayedValue, resolvedSize, suffix, leftAddon]);
|
|
214
220
|
const passwordToggleAddon = isPasswordToggle ? (_jsxs("button", { type: "button", "aria-label": passwordVisible ? '비밀번호 숨기기' : '비밀번호 표시', "aria-pressed": passwordVisible, onClick: () => setPasswordVisible(!passwordVisible), disabled: disabled, style: { width: iconSize, height: iconSize }, className: passwordToggleVariants({ disabled }), children: [_jsx(Eye, { size: iconSize, className: cn('absolute top-1/2 left-1/2 -translate-1/2 ld-transition', passwordVisible ? 'opacity-100' : 'opacity-0') }), _jsx(EyeOff, { size: iconSize, className: cn('absolute top-1/2 left-1/2 -translate-1/2 ld-transition', passwordVisible ? 'opacity-0' : 'opacity-100') })] })) : null;
|
|
215
221
|
const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...fieldStyle } = style ?? {};
|
|
216
222
|
// 텍스트 - addon 간격(gap)은 inline으로 부여(패딩의 절반).
|
|
@@ -236,7 +242,7 @@ const LDInput = ({ variant, color = 'neutral', size, block = false, type = 'text
|
|
|
236
242
|
const hasAddon = Boolean(rightAddon) || Boolean(passwordToggleAddon);
|
|
237
243
|
// label 없이 쓰일 수 있어 접근 가능한 이름을 placeholder/name으로 폴백한다.
|
|
238
244
|
const ariaLabel = props['aria-label'] ?? props.placeholder ?? props.name;
|
|
239
|
-
return (_jsxs(InputBase.Root, { ref: rootRef, block: block, style: rootStyle, className: rootClass, children: [_jsx(InputBase.Field, { ref: ref, type: resolvedType, disabled: disabled, className: fieldClassName, style: fieldStyle, value: value, defaultValue: defaultValue, onChange: (event) => {
|
|
245
|
+
return (_jsxs(InputBase.Root, { ref: rootRef, block: block, style: rootStyle, className: rootClass, children: [leftAddon && (_jsx(InputBase.Addon, { ref: leftAddonRef, style: { gap: addonGap }, className: addonVariants({ size: resolvedSize }), children: leftAddon })), _jsx(InputBase.Field, { ref: ref, type: resolvedType, disabled: disabled, className: fieldClassName, style: fieldStyle, value: value, defaultValue: defaultValue, onChange: (event) => {
|
|
240
246
|
setInputValue(event.target.value);
|
|
241
247
|
onChange?.(event);
|
|
242
248
|
}, ...props, "aria-label": ariaLabel }), suffix && displayedValue && (_jsxs(_Fragment, { children: [_jsx("span", { ref: valueRef, "aria-hidden": "true", className: suffixMeasureVariants({ size: resolvedSize }), children: displayedValue }), _jsx("span", { ref: suffixRef, "aria-hidden": "true", className: suffixVariants({ size: resolvedSize }), style: { left: `${suffixLeft}px` }, children: suffix })] })), hasAddon && (_jsxs(InputBase.Addon, { ref: addonRef, style: { gap: addonGap }, className: addonVariants({ size: resolvedSize }), children: [rightAddon, passwordToggleAddon] }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDLNB.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LDLNB.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAgB,EAAE,KAAK,QAAQ,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"LDLNB.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LDLNB.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAgB,EAAE,KAAK,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAGpE,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,yDAAyD;IACzD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD;;;;GAIG;AACH,QAAA,MAAM,KAAK,GAAI,yKAgBZ,UAAU,4CAoGZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -6,7 +6,6 @@ import { useEffect, useState } from 'react';
|
|
|
6
6
|
import LDDrawer from '../../components/LDDrawer/LDDrawer.js';
|
|
7
7
|
import LNBBase from '../../components/LDLNB/LNBBase.js';
|
|
8
8
|
import cn from '../../utils/cn.js';
|
|
9
|
-
import { isActivePath } from '../../utils/utils.js';
|
|
10
9
|
// mobile: variant(max-width: calc(--size_md - 1px) = 767px)와 동일 기준
|
|
11
10
|
const MOBILE_QUERY = '(max-width: 767px)';
|
|
12
11
|
// tablet: variant(--size_md 768px ~ calc(--size_lg - 1px) 991px)와 동일 기준
|
|
@@ -39,7 +38,7 @@ const LDLNB = ({ items, pathname, as = Link, onNavigate, name, email, profileIma
|
|
|
39
38
|
};
|
|
40
39
|
}, []);
|
|
41
40
|
const resolvedSize = size ?? (isTablet ? TABLET_SIZE : PC_SIZE);
|
|
42
|
-
const nav = (isMobile) => (_jsx(LNBBase.Provider, { isMobile: isMobile, items: items, pathname: pathname, defaultCollapsed: isMobile ? false : defaultCollapsed, size: resolvedSize, minWidth: minWidth, children: _jsxs(LNBBase.Root, { className: className, trigger: _jsx(LNBBase.Trigger, {}), children: [_jsx(LNBBase.Header, { name: name, email: email, profileImage: profileImage, handleLogout: handleLogout }), isMobile && children, _jsx(LNBBase.Content, { children: items.map((group) => (_jsx(LNBBase.Group, { label: group.label, noSlider: group.noSlider, children: _jsx(LNBBase.Menu, { label: group.label, noSlider: group.noSlider, tabCount: group.tabs?.length ?? 0, children: group.tabs?.map((tab) => (_jsx(LNBBase.MenuItem, { as: as, href: tab.path, icon: tab.icon,
|
|
41
|
+
const nav = (isMobile) => (_jsx(LNBBase.Provider, { isMobile: isMobile, items: items, pathname: pathname, defaultCollapsed: isMobile ? false : defaultCollapsed, size: resolvedSize, minWidth: minWidth, children: _jsxs(LNBBase.Root, { className: className, trigger: _jsx(LNBBase.Trigger, {}), children: [_jsx(LNBBase.Header, { name: name, email: email, profileImage: profileImage, handleLogout: handleLogout }), isMobile && children, _jsx(LNBBase.Content, { children: items.map((group) => (_jsx(LNBBase.Group, { label: group.label, noSlider: group.noSlider, children: _jsx(LNBBase.Menu, { label: group.label, noSlider: group.noSlider, tabCount: group.tabs?.length ?? 0, children: group.tabs?.map((tab) => (_jsx(LNBBase.MenuItem, { as: as, href: tab.path, icon: tab.icon, onClick: () => {
|
|
43
42
|
onNavigate?.(tab.path);
|
|
44
43
|
setOpen(false);
|
|
45
44
|
}, children: tab.label }, tab.path))) }) }, group.label))) }), _jsx(LNBBase.ResizeWidthBar, { className: "absolute inset-y-0 right-0" })] }) }));
|
|
@@ -58,7 +58,6 @@ interface MenuProps {
|
|
|
58
58
|
interface MenuItemProps {
|
|
59
59
|
as?: ElementType;
|
|
60
60
|
href: string;
|
|
61
|
-
isActive?: boolean;
|
|
62
61
|
children: ReactNode;
|
|
63
62
|
icon?: ReactNode;
|
|
64
63
|
className?: string;
|
|
@@ -75,7 +74,7 @@ declare const LNBBase: {
|
|
|
75
74
|
Content: ({ children, className }: ContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
76
75
|
Group: ({ children, label, noSlider }: GroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
77
76
|
Menu: ({ children, label, noSlider, tabCount }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
78
|
-
MenuItem: ({ as: Comp, href,
|
|
77
|
+
MenuItem: ({ as: Comp, href, children, icon, className, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
79
78
|
ResizeWidthBar: ({ className }: IResizeWidthBar) => import("react/jsx-runtime").JSX.Element | null;
|
|
80
79
|
};
|
|
81
80
|
export default LNBBase;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LNBBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LNBBase.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAEV,WAAW,EAEX,SAAS,EAEV,MAAM,OAAO,CAAC;AAoBf,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"LNBBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LNBBase.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAEV,WAAW,EAEX,SAAS,EAEV,MAAM,OAAO,CAAC;AAoBf,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmDD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0GD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAgCD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAqCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgCD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmDD,QAAA,MAAM,OAAO;2FAhZV,aAAa;6CA6GgC,SAAS;6BAkCzB,YAAY;0DAgCiB,WAAW;uCAwC9B,YAAY;2CAsBR,UAAU;oDA4CG,SAAS;uEA2CjE,aAAa;oCA2BuB,eAAe;CA2DrD,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useState, }
|
|
|
5
5
|
import LDAvatar from '../../components/LDAvatar/LDAvatar.js';
|
|
6
6
|
import RenderIcon from '../../components/RenderIcon/RenderIcon.js';
|
|
7
7
|
import cn from '../../utils/cn.js';
|
|
8
|
-
import {
|
|
8
|
+
import { findActivePath } from '../../utils/utils.js';
|
|
9
9
|
const DEFAULT_MIN_WIDTH = 144;
|
|
10
10
|
const DEFAULT_SIZE = 300;
|
|
11
11
|
const LNBContext = createContext(null);
|
|
@@ -36,6 +36,9 @@ const Provider = ({ children, isMobile, items = [], pathname = '', size = DEFAUL
|
|
|
36
36
|
setOpenGroups((prev) => prev.includes(label) ? prev.filter((g) => g !== label) : [...prev, label]);
|
|
37
37
|
}, []);
|
|
38
38
|
const isGroupOpen = useCallback((label) => openGroups.includes(label), [openGroups]);
|
|
39
|
+
// 항목마다 따로 판정하면 `/admin` 과 `/admin/group` 이 동시에 켜진다.
|
|
40
|
+
// 후보 전체에서 가장 구체적인 경로 하나만 골라 MenuItem·그룹 펼침이 함께 쓴다.
|
|
41
|
+
const activePath = useMemo(() => findActivePath(pathname, items.flatMap((item) => item.tabs?.map((tab) => tab.path) ?? [])), [items, pathname]);
|
|
39
42
|
// size(펼침 기본 너비)는 뷰포트 구간에 따라 바뀐다. width는 useState 초기값이라
|
|
40
43
|
// 그대로 두면 마운트 시점 값에 고정되므로, size가 바뀌면 새 기본값으로 맞춘다.
|
|
41
44
|
useEffect(() => {
|
|
@@ -48,7 +51,7 @@ const Provider = ({ children, isMobile, items = [], pathname = '', size = DEFAUL
|
|
|
48
51
|
setOpenGroups([]);
|
|
49
52
|
return;
|
|
50
53
|
}
|
|
51
|
-
const matchedLabel = items.find((item) => item.tabs?.some((tab) =>
|
|
54
|
+
const matchedLabel = items.find((item) => item.tabs?.some((tab) => tab.path === activePath))?.label;
|
|
52
55
|
if (matchedLabel && !openGroups.includes(matchedLabel)) {
|
|
53
56
|
setOpenGroups((prev) => [...prev, matchedLabel]);
|
|
54
57
|
}
|
|
@@ -57,6 +60,7 @@ const Provider = ({ children, isMobile, items = [], pathname = '', size = DEFAUL
|
|
|
57
60
|
}, [pathname]);
|
|
58
61
|
const contextValue = useMemo(() => ({
|
|
59
62
|
isMobile,
|
|
63
|
+
activePath,
|
|
60
64
|
collapsed,
|
|
61
65
|
toggleCollapsed,
|
|
62
66
|
openGroups,
|
|
@@ -67,6 +71,7 @@ const Provider = ({ children, isMobile, items = [], pathname = '', size = DEFAUL
|
|
|
67
71
|
size,
|
|
68
72
|
}), [
|
|
69
73
|
isMobile,
|
|
74
|
+
activePath,
|
|
70
75
|
collapsed,
|
|
71
76
|
toggleCollapsed,
|
|
72
77
|
openGroups,
|
|
@@ -115,8 +120,9 @@ const Menu = ({ children, label, noSlider, tabCount = 0 }) => {
|
|
|
115
120
|
: 'auto',
|
|
116
121
|
}, children: children }));
|
|
117
122
|
};
|
|
118
|
-
const MenuItem = ({ as: Comp = 'a', href,
|
|
119
|
-
const { collapsed } = useLNBContext();
|
|
123
|
+
const MenuItem = ({ as: Comp = 'a', href, children, icon, className, ...rest }) => {
|
|
124
|
+
const { collapsed, activePath } = useLNBContext();
|
|
125
|
+
const isActive = href === activePath;
|
|
120
126
|
return (_jsxs(Comp, { href: href, className: cn('flex w-full items-center gap-sm p-sm display16 bold mobile:display14 mobile:medium', 'cursor-pointer rounded-[5px] text-neutral500 ld-transition hover:bg-neutral100 hover:text-neutral900', 'overflow-hidden whitespace-nowrap', collapsed && 'justify-center', isActive &&
|
|
121
127
|
'bg-tintBlue text-blue400 hover:bg-tintBlue hover:text-blue400', className), ...rest, children: [_jsx(RenderIcon, { className: "icon-md", children: icon }), !collapsed && children] }));
|
|
122
128
|
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
import { type CSSProperties, type ReactNode } from 'react';
|
|
1
2
|
import { type ModalSize, TModalClassNames } from '../../components/LDModal/LDModalView.js';
|
|
2
3
|
import type { Variant } from '../../types/common.js';
|
|
3
4
|
import type { Subset } from '../../types/subset.js';
|
|
4
5
|
export interface LDModalOptions<T = undefined> {
|
|
5
|
-
name?:
|
|
6
|
-
title?:
|
|
7
|
-
description?:
|
|
8
|
-
content?:
|
|
6
|
+
name?: ReactNode;
|
|
7
|
+
title?: ReactNode;
|
|
8
|
+
description?: ReactNode;
|
|
9
|
+
content?: ReactNode | ((args: {
|
|
9
10
|
onClose: (value?: T) => void;
|
|
10
|
-
}) =>
|
|
11
|
+
}) => ReactNode);
|
|
11
12
|
buttons?: {
|
|
12
13
|
value: T;
|
|
13
14
|
label: string;
|
|
@@ -24,7 +25,7 @@ export interface LDModalOptions<T = undefined> {
|
|
|
24
25
|
/** 모달 패널에 적용할 추가 CSS 클래스 */
|
|
25
26
|
className?: string;
|
|
26
27
|
/** 모달 패널 인라인 스타일 (자유 width/height 등) */
|
|
27
|
-
style?:
|
|
28
|
+
style?: CSSProperties;
|
|
28
29
|
onBeforeClose?: () => Promise<boolean> | boolean;
|
|
29
30
|
classNames?: TModalClassNames;
|
|
30
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDModal.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LDModal.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAG7E,OAAoB,EAElB,KAAK,SAAS,EACd,gBAAgB,EACjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,SAAS;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IAC9E,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,CAAC,CAAC;QACT,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;QACzD,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;QACvC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;KAC1D,EAAE,CAAC;IACJ,eAAe;IACf,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,OAAO,GAAI,CAAC,GAAG,SAAS,EAC5B,SAAS,cAAc,CAAC,CAAC,CAAC,KACzB,OAAO,CAAC,CAAC,GAAG,SAAS,CA2EvB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -35,11 +35,11 @@ export interface LDModalViewProps {
|
|
|
35
35
|
/** 열림 상태 변경 시 호출되는 콜백 */
|
|
36
36
|
onOpenChange?: (open: boolean) => void;
|
|
37
37
|
/** 서브 타이틀 (title 위에 표시) */
|
|
38
|
-
name?:
|
|
38
|
+
name?: ReactNode;
|
|
39
39
|
/** 모달 제목 */
|
|
40
|
-
title?:
|
|
40
|
+
title?: ReactNode;
|
|
41
41
|
/** 모달 설명 텍스트 */
|
|
42
|
-
description?:
|
|
42
|
+
description?: ReactNode;
|
|
43
43
|
/** 본문 콘텐츠 */
|
|
44
44
|
children?: ReactNode;
|
|
45
45
|
/** 모달 너비 프리셋 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDModalView.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModalView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"LDModalView.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModalView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAK/C,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAI7C,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;IACzD,eAAe;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,eAAe;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa;IACb,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AA6CD,QAAA,MAAM,WAAW,GAAI,iJAelB,gBAAgB,4CAkLlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { Check, CircleAlert, X } from 'lucide-react';
|
|
|
3
3
|
import { useRef } from 'react';
|
|
4
4
|
import LDButton from '../../components/LDButton/LDButton.js';
|
|
5
5
|
import ModalBase from '../../components/LDModal/ModalBase.js';
|
|
6
|
+
import Show from '../../components/Show/Show.js';
|
|
6
7
|
import cn from '../../utils/cn.js';
|
|
7
8
|
// ── 스타일 매핑 ──
|
|
8
9
|
const sizeClasses = {
|
|
@@ -62,10 +63,10 @@ const LDModalView = ({ open, defaultOpen, onOpenChange, name, title, description
|
|
|
62
63
|
overlayRef.current)
|
|
63
64
|
onOpenChange?.(false);
|
|
64
65
|
overlayRef.current = false;
|
|
65
|
-
}, children: _jsxs("div", { className: cn('relative rounded-2xl bg-white p-5', sizeClasses[size], 'mobile:max-w-[calc(100vw-40px)]', scrollBehavior === 'inside' && 'flex max-h-[90dvh] flex-col', classNames?.layout), style: style, onClick: (e) => e.stopPropagation(), children: [_jsx(ModalBase.Close, { asChild: true, className: cn('absolute top-4 right-5 cursor-pointer text-neutral500 outline-hidden', classNames?.close), children: _jsx(LDButton, { variant: "ghost", color: "neutral", leftIcon: _jsx(X, {}), compact: true }) }), _jsxs("div", { className: cn('flex w-full shrink-0 flex-col', scrollBehavior === 'inside' && 'min-h-0 flex-1', layoutGapSizeClasses[size], !hasHeader && noHeaderPaddingTopSizeClasses[size], classNames?.panel), children: [hasHeader
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
}, children: _jsxs("div", { className: cn('relative rounded-2xl bg-white p-5', sizeClasses[size], 'mobile:max-w-[calc(100vw-40px)]', scrollBehavior === 'inside' && 'flex max-h-[90dvh] flex-col', classNames?.layout), style: style, onClick: (e) => e.stopPropagation(), children: [_jsx(ModalBase.Close, { asChild: true, className: cn('absolute top-4 right-5 cursor-pointer text-neutral500 outline-hidden', classNames?.close), children: _jsx(LDButton, { variant: "ghost", color: "neutral", leftIcon: _jsx(X, {}), compact: true }) }), _jsxs("div", { className: cn('flex w-full shrink-0 flex-col', scrollBehavior === 'inside' && 'min-h-0 flex-1', layoutGapSizeClasses[size], !hasHeader && noHeaderPaddingTopSizeClasses[size], classNames?.panel), children: [_jsx(Show, { when: hasHeader, children: _jsxs("div", { className: "flex w-full shrink-0 flex-col items-center gap-5 py-5 text-center", children: [_jsx(Show, { when: icon === 'success', children: _jsx("div", { className: cn('flex items-center justify-center rounded-full bg-hyper-blue', statusIconSizeClasses[size]), children: _jsx(Check, { className: "text-white" }) }) }), _jsx(Show, { when: icon === 'fail', children: _jsx("div", { className: cn('flex items-center justify-center rounded-full bg-danger600', statusIconSizeClasses[size]), children: _jsx(CircleAlert, { className: "text-white" }) }) }), _jsx(Show, { when: name, children: _jsx("span", { className: "display16 bold whitespace-pre-wrap text-neutral500", children: name }) }), _jsx(Show, { when: title, children: _jsx(ModalBase.Title, { className: cn('text-center display28 bold whitespace-pre-wrap', classNames?.title), children: title }) }), _jsx(Show, { when: description, children: _jsx(ModalBase.Description, { className: cn('text-center display14 whitespace-pre-wrap text-neutral500', classNames?.description), children: description }) })] }) }), _jsx(Show, { when: children, children: _jsx("div", { className: cn(scrollBehavior === 'inside' &&
|
|
67
|
+
'min-h-10 flex-1 overflow-y-auto'), children: children }) }), _jsx(Show, { when: buttons?.list?.length, children: _jsx("div", { className: cn('flex mobile:flex-1 mobile:flex-col mobile:items-center', buttons?.direction === 'column' ? 'flex-col' : 'flex-row', buttonsGapSizeClasses[size]), children: buttons?.list?.map((button, index) => {
|
|
68
|
+
const isFirst = index === 0;
|
|
69
|
+
return (_jsx("div", { className: "flex w-full flex-1", children: _jsx(LDButton, { type: "button", onClick: () => handleClick(button), variant: button.variant ?? (isFirst ? 'solid' : 'outline'), color: button.color ?? (isFirst ? 'point' : 'neutral'), size: buttonSizeClasses[size], block: true, children: button.label }) }, String(button.value)));
|
|
70
|
+
}) }) })] })] }) })] }));
|
|
70
71
|
};
|
|
71
72
|
export default LDModalView;
|
|
@@ -136,7 +136,7 @@ const LDMultiSelect = ({ items, placeholder = '선택해주세요', value = [],
|
|
|
136
136
|
size,
|
|
137
137
|
disabled,
|
|
138
138
|
className,
|
|
139
|
-
}), children: truncate ? (_jsxs("div", { className: "flex w-full items-center justify-center gap-sm px-3 py-1.5", children: [_jsx(SelectBase.Value, { placeholder: placeholder, className: valueVariants({ align }), placeholderClassName: "text-
|
|
139
|
+
}), children: truncate ? (_jsxs("div", { className: "flex w-full items-center justify-center gap-sm px-3 py-1.5", children: [_jsx(SelectBase.Value, { placeholder: placeholder, className: valueVariants({ align }), placeholderClassName: "text-neutral300" }), chevron] })) : (_jsxs("div", { className: "flex w-full items-center justify-between gap-sm px-3 py-1.5", children: [_jsx("div", { className: chipListVariants({ align }), children: value.length === 0 ? (_jsx("span", { className: "text-neutral300", children: placeholder })) : (value.map((v) => {
|
|
140
140
|
const label = items.find((i) => i.value === v)?.label || v;
|
|
141
141
|
return (_jsxs("span", { className: "flex animate-fade-in items-center justify-between rounded-sm border border-neutral100 bg-white px-2 py-1 display12 text-neutral900", children: [label, _jsx("div", { role: "button", "aria-label": `${label} 삭제`, onClick: (e) => {
|
|
142
142
|
e.stopPropagation();
|
|
@@ -129,7 +129,7 @@ const Trigger = ({ className, ...props }) => {
|
|
|
129
129
|
/** 현재 선택값을 표시하는 Styled Compound 영역입니다. */
|
|
130
130
|
const Value = ({ className, ...props }) => {
|
|
131
131
|
const { align } = useContext(LDSelectStyleContext);
|
|
132
|
-
return (_jsx(SelectBase.Value, { ...props, className: valueVariants({ align, className }), placeholderClassName: cn('text-
|
|
132
|
+
return (_jsx(SelectBase.Value, { ...props, className: valueVariants({ align, className }), placeholderClassName: cn('text-neutral300', props.placeholderClassName) }));
|
|
133
133
|
};
|
|
134
134
|
/** 옵션 목록을 표시하는 Styled Compound 영역입니다. */
|
|
135
135
|
const Content = ({ className, openClassName = 'opacity-100', closedClassName = 'pointer-events-none opacity-0', ...props }) => (_jsx(SelectBase.Content, { ...props, className: cn('mt-1 scrollbar-hide flex max-h-57.5 w-full flex-col gap-3xs overflow-y-auto rounded-[5px] border border-mono100 bg-white p-2 transition-opacity duration-300 ease-out', className), openClassName: openClassName, closedClassName: closedClassName }));
|
|
@@ -4,6 +4,10 @@ export interface TableColumnMeta {
|
|
|
4
4
|
headerAlign?: 'left' | 'center' | 'right';
|
|
5
5
|
/** 체크박스/액션 컬럼처럼 헤더에 시각적 텍스트가 없을 때 스크린리더에만 노출할 이름 */
|
|
6
6
|
headerScreenReaderLabel?: string;
|
|
7
|
+
/** 이 컬럼 헤더 셀(`<th>`)에 추가할 클래스 — `classNames.headCell` 뒤에 병합된다 */
|
|
8
|
+
headerClassName?: string;
|
|
9
|
+
/** 이 컬럼 바디 셀(`<td>`)에 추가할 클래스 — `classNames.cell` 뒤에 병합된다 */
|
|
10
|
+
cellClassName?: string;
|
|
7
11
|
}
|
|
8
12
|
export type TOpenRowState = Record<string | number, boolean>;
|
|
9
13
|
export interface HeadlessTableProps<TData, TColumn> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeadlessTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/HeadlessTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,SAAS,EAId,KAAK,MAAM,EACX,WAAW,EACX,eAAe,EACf,GAAG,EACH,iBAAiB,EACjB,YAAY,EAEb,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,oDAAoD;IACpD,uBAAuB,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"HeadlessTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/HeadlessTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -124,6 +124,16 @@ const HeadlessTable = ({ columns, data, rowCount, paginationState, onPageChange,
|
|
|
124
124
|
id: c.id,
|
|
125
125
|
width: headerCells[i]?.getBoundingClientRect().width ?? 0,
|
|
126
126
|
min: c.columnDef.minSize ?? 0,
|
|
127
|
+
/**
|
|
128
|
+
* NOTE: size 미지정 = 남는 공간 흡수 컬럼.
|
|
129
|
+
* 이 컬럼에 px를 기록하면 columnWidths의 undefined가 사라져
|
|
130
|
+
* tableStyle이 [CASE 2] 고정폭으로 뒤집히고, 그 뒤로는 viewport를
|
|
131
|
+
* 넓혀도 테이블이 드래그 시점 폭에 갇힌다.
|
|
132
|
+
* 그래서 배분 계산에는 참여시키되 columnSizing에는 쓰지 않는다.
|
|
133
|
+
* 남는 공간은 table-fixed가 이 컬럼에 주고, 그 값은 아래에서
|
|
134
|
+
* 계산한 width와 같다(총합이 컨테이너 폭으로 보존되므로).
|
|
135
|
+
*/
|
|
136
|
+
absorbs: c.columnDef.size === undefined,
|
|
127
137
|
}));
|
|
128
138
|
const index = cols.findIndex((c) => c.id === columnId);
|
|
129
139
|
const target = cols[index];
|
|
@@ -148,7 +158,8 @@ const HeadlessTable = ({ columns, data, rowCount, paginationState, onPageChange,
|
|
|
148
158
|
ideal -= delta * (shareOf(c) / shareTotal);
|
|
149
159
|
}
|
|
150
160
|
const width = Math.round(ideal) - assigned;
|
|
151
|
-
|
|
161
|
+
if (!c.absorbs)
|
|
162
|
+
next[c.id] = width;
|
|
152
163
|
assigned += width;
|
|
153
164
|
});
|
|
154
165
|
table.setColumnSizing((old) => ({ ...old, ...next }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDCollapsibleTanstackTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDCollapsibleTanstackTable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAsB,EACpB,KAAK,kBAAkB,EACxB,MAAM,oCAAoC,CAAC;AAK5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,+BAA+B,CAAC,KAAK,EAAE,OAAO,CAAE,SAAQ,IAAI,CAC3E,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,EAClC,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,kBAAkB,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,SAAS,CAAC;IAC9C,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,QAAA,MAAM,0BAA0B,GAAI,KAAK,EAAE,OAAO,EAAE,4OAiBjD,+BAA+B,CAAC,KAAK,EAAE,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"LDCollapsibleTanstackTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDCollapsibleTanstackTable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAsB,EACpB,KAAK,kBAAkB,EACxB,MAAM,oCAAoC,CAAC;AAK5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,+BAA+B,CAAC,KAAK,EAAE,OAAO,CAAE,SAAQ,IAAI,CAC3E,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,EAClC,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,kBAAkB,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,SAAS,CAAC;IAC9C,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,QAAA,MAAM,0BAA0B,GAAI,KAAK,EAAE,OAAO,EAAE,4OAiBjD,+BAA+B,CAAC,KAAK,EAAE,OAAO,CAAC,4CA2MjD,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
|
|
@@ -13,7 +13,7 @@ const LDCollapsibleTanstackTable = ({ columns, data, rowCount, paginationState,
|
|
|
13
13
|
root: cn('table-fixed', classNames?.root),
|
|
14
14
|
}, children: [_jsx(LDTable.Header, { className: classNames?.thead, children: headerGroups.map((hg) => (_jsx(LDTable.HeaderRow, { className: cn('group w-full', classNames?.headRow), children: hg.headers.map((header) => {
|
|
15
15
|
const h = getHeader(header);
|
|
16
|
-
return (_jsxs(LDTable.HeaderCell, { className: cn('relative overflow-hidden', h.canSort && 'cursor-pointer', classNames?.headCell), style: { width: h.size }, onClick: h.toggleSortingHandler, children: [_jsxs("span", { className: cn('flex items-center gap-0.5 align-middle', h.meta?.headerAlign === 'right'
|
|
16
|
+
return (_jsxs(LDTable.HeaderCell, { className: cn('relative overflow-hidden', h.canSort && 'cursor-pointer', classNames?.headCell, h.meta?.headerClassName), style: { width: h.size }, onClick: h.toggleSortingHandler, children: [_jsxs("span", { className: cn('flex items-center gap-0.5 align-middle', h.meta?.headerAlign === 'right'
|
|
17
17
|
? 'justify-end'
|
|
18
18
|
: h.meta?.headerAlign === 'left'
|
|
19
19
|
? 'justify-start'
|
|
@@ -25,7 +25,7 @@ const LDCollapsibleTanstackTable = ({ columns, data, rowCount, paginationState,
|
|
|
25
25
|
row.toggleSelected();
|
|
26
26
|
}, children: row.getVisibleCells().map((cell, idx) => {
|
|
27
27
|
const c = getCell(cell);
|
|
28
|
-
return (_jsxs(LDTable.Cell, { className: classNames?.cell, children: [_jsx("div", { className: cn('flex w-full items-center', c.meta?.headerAlign === 'left'
|
|
28
|
+
return (_jsxs(LDTable.Cell, { className: cn(classNames?.cell, c.meta?.cellClassName), children: [_jsx("div", { className: cn('flex w-full items-center', c.meta?.headerAlign === 'left'
|
|
29
29
|
? 'justify-start'
|
|
30
30
|
: c.meta?.headerAlign === 'right'
|
|
31
31
|
? 'justify-end'
|
|
@@ -12,10 +12,10 @@ const Toolbar = ({ title, totalCount, rightSideContents, className, }) => {
|
|
|
12
12
|
// ── Styled Sub-components ──
|
|
13
13
|
const Header = ({ className, children, ...props }) => (_jsx(TableBase.Header, { className: cn('h-9 border-b border-neutral700 bg-mono100 ld-transition hover:bg-mono200', className), ...props, children: children }));
|
|
14
14
|
const HeaderRow = ({ className, children, ...props }) => (_jsx(TableBase.HeaderRow, { className: className, ...props, children: children }));
|
|
15
|
-
const HeaderCell = ({ className, children, ...props }) => (_jsx(TableBase.HeaderCell, { className: cn('px-5 display12
|
|
15
|
+
const HeaderCell = ({ className, children, ...props }) => (_jsx(TableBase.HeaderCell, { className: cn('px-5 display14 bold tablet-down:display12', className), ...props, children: children }));
|
|
16
16
|
const Body = ({ className, children, ...props }) => (_jsx(TableBase.Body, { className: className, ...props, children: children }));
|
|
17
17
|
const Row = ({ className, children, ...props }) => (_jsx(TableBase.Row, { className: cn('h-13 border-b border-neutral100 ld-transition hover:bg-mono50', className), ...props, children: children }));
|
|
18
|
-
const Cell = ({ className, children, ...props }) => (_jsx(TableBase.Cell, { className: cn('px-5
|
|
18
|
+
const Cell = ({ className, children, ...props }) => (_jsx(TableBase.Cell, { className: cn('px-5 display16 regular tablet-down:display14', className), ...props, children: children }));
|
|
19
19
|
LDTable.Header = Header;
|
|
20
20
|
LDTable.HeaderRow = HeaderRow;
|
|
21
21
|
LDTable.HeaderCell = HeaderCell;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDTanstackTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDTanstackTable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAsB,EACpB,KAAK,kBAAkB,EACxB,MAAM,oCAAoC,CAAC;AAW5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAE,SAAQ,IAAI,CAChE,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,EAClC,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,eAAe,GAAI,KAAK,EAAE,OAAO,EAAE,0OAiBtC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"LDTanstackTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDTanstackTable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAsB,EACpB,KAAK,kBAAkB,EACxB,MAAM,oCAAoC,CAAC;AAW5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAE,SAAQ,IAAI,CAChE,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,EAClC,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,eAAe,GAAI,KAAK,EAAE,OAAO,EAAE,0OAiBtC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC,4CAoMtC,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -27,7 +27,7 @@ const LDTanstackTable = ({ columns, data, rowCount, paginationState, onPageChang
|
|
|
27
27
|
const RowComp = enableRowDragging ? SortableRow : PlainRow;
|
|
28
28
|
const bodyRows = rows.map((row) => (_jsx(RowComp, { rowId: row.id, selected: row.getIsSelected(), className: classNames?.row, onClick: () => row.toggleSelected(), children: row.getVisibleCells().map((cell) => {
|
|
29
29
|
const c = getCell(cell);
|
|
30
|
-
return (_jsx(LDTable.Cell, { className: classNames?.cell, children: _jsx("div", { className: cn('flex w-full items-center', c.meta?.headerAlign === 'left'
|
|
30
|
+
return (_jsx(LDTable.Cell, { className: cn(classNames?.cell, c.meta?.cellClassName), children: _jsx("div", { className: cn('flex w-full items-center', c.meta?.headerAlign === 'left'
|
|
31
31
|
? 'justify-start'
|
|
32
32
|
: c.meta?.headerAlign === 'right'
|
|
33
33
|
? 'justify-end'
|
|
@@ -38,7 +38,7 @@ const LDTanstackTable = ({ columns, data, rowCount, paginationState, onPageChang
|
|
|
38
38
|
root: cn('table-fixed', classNames?.root),
|
|
39
39
|
}, children: [_jsx(LDTable.Header, { className: classNames?.thead, children: headerGroups.map((hg) => (_jsx(LDTable.HeaderRow, { className: cn('group w-full', classNames?.headRow), children: hg.headers.map((header) => {
|
|
40
40
|
const h = getHeader(header);
|
|
41
|
-
return (_jsxs(LDTable.HeaderCell, { className: cn('relative overflow-hidden', h.canSort && 'cursor-pointer', classNames?.headCell), style: { width: h.size }, onClick: h.toggleSortingHandler, children: [h.meta?.headerScreenReaderLabel && (_jsx("span", { className: "sr-only", children: h.meta.headerScreenReaderLabel })), _jsxs("span", { className: cn('flex items-center gap-0.5 align-middle', h.meta?.headerAlign === 'right'
|
|
41
|
+
return (_jsxs(LDTable.HeaderCell, { className: cn('relative overflow-hidden', h.canSort && 'cursor-pointer', classNames?.headCell, h.meta?.headerClassName), style: { width: h.size }, onClick: h.toggleSortingHandler, children: [h.meta?.headerScreenReaderLabel && (_jsx("span", { className: "sr-only", children: h.meta.headerScreenReaderLabel })), _jsxs("span", { className: cn('flex items-center gap-0.5 align-middle', h.meta?.headerAlign === 'right'
|
|
42
42
|
? 'justify-end'
|
|
43
43
|
: h.meta?.headerAlign === 'left'
|
|
44
44
|
? 'justify-start'
|
|
@@ -53,15 +53,15 @@ const fieldVariants = tv({
|
|
|
53
53
|
],
|
|
54
54
|
});
|
|
55
55
|
const textareaVariants = tv({
|
|
56
|
-
base: 'w-full bg-transparent px-1 py-0 outline-none placeholder:text-
|
|
56
|
+
base: 'w-full bg-transparent px-1 py-0 outline-none placeholder:text-neutral300 read-only:cursor-default disabled:cursor-not-allowed disabled:text-mono400',
|
|
57
57
|
variants: {
|
|
58
58
|
size: {
|
|
59
|
-
'2xsmall': 'display10',
|
|
60
|
-
xsmall: 'display12',
|
|
61
|
-
small: 'display14',
|
|
62
|
-
medium: 'display16',
|
|
63
|
-
large: 'display18',
|
|
64
|
-
xlarge: 'display20',
|
|
59
|
+
'2xsmall': 'display10 leading-relaxed',
|
|
60
|
+
xsmall: 'display12 leading-relaxed',
|
|
61
|
+
small: 'display14 leading-relaxed',
|
|
62
|
+
medium: 'display16 leading-relaxed',
|
|
63
|
+
large: 'display18 leading-relaxed',
|
|
64
|
+
xlarge: 'display20 leading-relaxed',
|
|
65
65
|
},
|
|
66
66
|
},
|
|
67
67
|
});
|
|
@@ -87,7 +87,7 @@ const LDTimePicker = ({ value, defaultValue, onChange, placeholder = 'HH:MM', di
|
|
|
87
87
|
e.preventDefault();
|
|
88
88
|
setOpen(true);
|
|
89
89
|
}
|
|
90
|
-
}, placeholder: placeholder, "aria-label": "\uC2DC\uAC04 \uC785\uB825", disabled: disabled, readOnly: !isEditable, className: cn('absolute inset-0 w-full flex-1 rounded-[5px] bg-transparent px-4 outline-none', !resolved && 'text-
|
|
90
|
+
}, placeholder: placeholder, "aria-label": "\uC2DC\uAC04 \uC785\uB825", disabled: disabled, readOnly: !isEditable, className: cn('absolute inset-0 w-full flex-1 rounded-[5px] bg-transparent px-4 outline-none', !resolved && 'text-neutral300', !isEditable && 'cursor-pointer') }) }), _jsxs("div", { className: "z-10 flex shrink-0 items-center gap-2", onClick: () => {
|
|
91
91
|
if (disabled)
|
|
92
92
|
return;
|
|
93
93
|
setOpen((o) => !o);
|