@idbrnd/design-system 2.0.0 → 2.1.0
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/README.md +42 -21
- package/dist/components/Pagination/Pagination.d.ts +1 -1
- package/dist/components/Pagination/Pagination.types.d.ts +4 -0
- package/dist/icons/generated/DocumentPdfIcon.d.ts +3 -0
- package/dist/icons/generated/index.d.ts +1 -0
- package/dist/icons/iconMap.d.ts +1 -0
- package/dist/index.js +1607 -1590
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -1616,6 +1616,26 @@ const table = useReactTable({
|
|
|
1616
1616
|
/>;
|
|
1617
1617
|
```
|
|
1618
1618
|
|
|
1619
|
+
**범위 벗어난 페이지 이동 차단 (outOfRangeToastText)**
|
|
1620
|
+
|
|
1621
|
+
`trailingContent`와 함께 `outOfRangeToastText`를 지정하면, 유효 범위(1 ~ pageCount)를 벗어난 값을 입력했을 때 페이지 이동을 막고 Toast 메시지를 표시합니다.
|
|
1622
|
+
|
|
1623
|
+
```tsx
|
|
1624
|
+
<Pagination
|
|
1625
|
+
pageIndex={pageIndex}
|
|
1626
|
+
pageCount={pageCount}
|
|
1627
|
+
onPageChange={setPageIndex}
|
|
1628
|
+
canPreviousPage={pageIndex > 0}
|
|
1629
|
+
canNextPage={pageIndex < pageCount - 1}
|
|
1630
|
+
onPreviousPage={() => setPageIndex((p) => p - 1)}
|
|
1631
|
+
onNextPage={() => setPageIndex((p) => p + 1)}
|
|
1632
|
+
trailingContent
|
|
1633
|
+
outOfRangeToastText="유효하지 않은 페이지 번호입니다."
|
|
1634
|
+
/>
|
|
1635
|
+
```
|
|
1636
|
+
|
|
1637
|
+
> `outOfRangeToastText`를 생략하면 기존 동작(유효 범위로 자동 클램핑)을 유지합니다.
|
|
1638
|
+
|
|
1619
1639
|
**variant / boundary / trailingContent**
|
|
1620
1640
|
|
|
1621
1641
|
```tsx
|
|
@@ -1648,26 +1668,27 @@ const table = useReactTable({
|
|
|
1648
1668
|
/>
|
|
1649
1669
|
```
|
|
1650
1670
|
|
|
1651
|
-
| Prop | 타입 | 기본값 | 설명
|
|
1652
|
-
| ---------------------- | ------------------------------------------- | --------------- |
|
|
1653
|
-
| `pageIndex` | `number` | — | **(필수)** 현재 페이지 인덱스 (0-based)
|
|
1654
|
-
| `pageCount` | `number` | — | **(필수)** 전체 페이지 수
|
|
1655
|
-
| `onPageChange` | `(pageIndex: number) => void` | — | **(필수)** 페이지 번호 클릭 시 호출. 0-based 인덱스 전달
|
|
1656
|
-
| `canPreviousPage` | `boolean` | — | **(필수)** 이전 버튼 활성화 여부
|
|
1657
|
-
| `canNextPage` | `boolean` | — | **(필수)** 다음 버튼 활성화 여부
|
|
1658
|
-
| `onPreviousPage` | `() => void` | — | **(필수)** 이전 버튼 클릭 콜백
|
|
1659
|
-
| `onNextPage` | `() => void` | — | **(필수)** 다음 버튼 클릭 콜백
|
|
1660
|
-
| `variant` | `"extended"` \| `"compact"` \| `"minimize"` | `"extended"` | `extended`: 최대 10개, `compact`: 최대 7개, `minimize`: 현재/전체 텍스트만
|
|
1661
|
-
| `boundary` | `boolean` | `true` | `false`: 슬라이딩 윈도우, `true`: 첫·끝 페이지 고정 + `...` 생략
|
|
1662
|
-
| `trailingContent` | `boolean` | `false` | 우측에 "페이지 이동" 입력란 표시
|
|
1663
|
-
| `trailingContentGap` | `number \| string` | `40` | 버튼 그룹과 입력란 사이 간격. 숫자는 px로 자동 변환
|
|
1664
|
-
| `isTrailingContentEnd` | `boolean` | `false` | `true`이면 입력란을 컨테이너 맨 우측에 고정
|
|
1665
|
-
| `prevLabel` | `string` | `"이전"` | 이전 버튼 레이블
|
|
1666
|
-
| `nextLabel` | `string` | `"다음"` | 다음 버튼 레이블
|
|
1667
|
-
| `jumpLabel` | `string` | `"페이지 이동"` | 페이지 이동 입력란 레이블
|
|
1668
|
-
| `
|
|
1669
|
-
| `
|
|
1670
|
-
| `
|
|
1671
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
1672
|
+
| ---------------------- | ------------------------------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1673
|
+
| `pageIndex` | `number` | — | **(필수)** 현재 페이지 인덱스 (0-based) |
|
|
1674
|
+
| `pageCount` | `number` | — | **(필수)** 전체 페이지 수 |
|
|
1675
|
+
| `onPageChange` | `(pageIndex: number) => void` | — | **(필수)** 페이지 번호 클릭 시 호출. 0-based 인덱스 전달 |
|
|
1676
|
+
| `canPreviousPage` | `boolean` | — | **(필수)** 이전 버튼 활성화 여부 |
|
|
1677
|
+
| `canNextPage` | `boolean` | — | **(필수)** 다음 버튼 활성화 여부 |
|
|
1678
|
+
| `onPreviousPage` | `() => void` | — | **(필수)** 이전 버튼 클릭 콜백 |
|
|
1679
|
+
| `onNextPage` | `() => void` | — | **(필수)** 다음 버튼 클릭 콜백 |
|
|
1680
|
+
| `variant` | `"extended"` \| `"compact"` \| `"minimize"` | `"extended"` | `extended`: 최대 10개, `compact`: 최대 7개, `minimize`: 현재/전체 텍스트만 |
|
|
1681
|
+
| `boundary` | `boolean` | `true` | `false`: 슬라이딩 윈도우, `true`: 첫·끝 페이지 고정 + `...` 생략 |
|
|
1682
|
+
| `trailingContent` | `boolean` | `false` | 우측에 "페이지 이동" 입력란 표시 |
|
|
1683
|
+
| `trailingContentGap` | `number \| string` | `40` | 버튼 그룹과 입력란 사이 간격. 숫자는 px로 자동 변환 |
|
|
1684
|
+
| `isTrailingContentEnd` | `boolean` | `false` | `true`이면 입력란을 컨테이너 맨 우측에 고정 |
|
|
1685
|
+
| `prevLabel` | `string` | `"이전"` | 이전 버튼 레이블 |
|
|
1686
|
+
| `nextLabel` | `string` | `"다음"` | 다음 버튼 레이블 |
|
|
1687
|
+
| `jumpLabel` | `string` | `"페이지 이동"` | 페이지 이동 입력란 레이블 |
|
|
1688
|
+
| `outOfRangeToastText` | `string` | — | `trailingContent`가 `true`일 때, 범위를 벗어난 페이지 번호 입력 시 표시할 Toast 메시지. 지정하지 않으면 기존과 같이 유효 범위로 클램핑 |
|
|
1689
|
+
| `loading` | `boolean` | `false` | 로딩 스켈레톤 표시 |
|
|
1690
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
1691
|
+
| `className` | `string` | — | 추가 클래스명 |
|
|
1671
1692
|
|
|
1672
1693
|
---
|
|
1673
1694
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { PaginationProps, PaginationVariant } from "./Pagination.types";
|
|
2
2
|
export type { PaginationVariant };
|
|
3
3
|
export type { PaginationProps };
|
|
4
|
-
declare function Pagination({ pageIndex, pageCount, onPageChange, canPreviousPage, canNextPage, onPreviousPage, onNextPage, variant, boundary, trailingContent, trailingContentGap, isTrailingContentEnd, loading, prevLabel, nextLabel, jumpLabel, customStyle, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function Pagination({ pageIndex, pageCount, onPageChange, canPreviousPage, canNextPage, onPreviousPage, onNextPage, variant, boundary, trailingContent, trailingContentGap, isTrailingContentEnd, loading, prevLabel, nextLabel, jumpLabel, outOfRangeToastText, customStyle, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export default Pagination;
|
|
@@ -52,6 +52,10 @@ export interface PaginationProps {
|
|
|
52
52
|
* @defaultValue `'페이지 이동'`
|
|
53
53
|
*/
|
|
54
54
|
jumpLabel?: string;
|
|
55
|
+
/** trailingContent가 true일 때, 범위를 벗어난 페이지 번호 입력 시 표시할 Toast 메시지
|
|
56
|
+
* - 값이 없으면 범위 클램핑 동작(기존 동작)을 유지
|
|
57
|
+
*/
|
|
58
|
+
outOfRangeToastText?: string;
|
|
55
59
|
/** 로딩 스켈레톤 상태 */
|
|
56
60
|
loading?: boolean;
|
|
57
61
|
/** 루트 엘리먼트 인라인 스타일 */
|
|
@@ -100,6 +100,7 @@ export { default as DataUploadIcon } from "./DataUploadIcon";
|
|
|
100
100
|
export { default as DesktopFillIcon } from "./DesktopFillIcon";
|
|
101
101
|
export { default as DesktopIcon } from "./DesktopIcon";
|
|
102
102
|
export { default as DocumentAddIcon } from "./DocumentAddIcon";
|
|
103
|
+
export { default as DocumentPdfIcon } from "./DocumentPdfIcon";
|
|
103
104
|
export { default as DocumentTextFillIcon } from "./DocumentTextFillIcon";
|
|
104
105
|
export { default as DocumentTextIcon } from "./DocumentTextIcon";
|
|
105
106
|
export { default as DotIcon } from "./DotIcon";
|
package/dist/icons/iconMap.d.ts
CHANGED
|
@@ -101,6 +101,7 @@ export declare const iconMap: {
|
|
|
101
101
|
readonly "desktop-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
102
102
|
readonly desktop: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
103
103
|
readonly "document-add": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
104
|
+
readonly "document-pdf": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
104
105
|
readonly "document-text-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
105
106
|
readonly "document-text": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
106
107
|
readonly dot: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|