@simplysm/angular 14.0.51 → 14.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/dist/data/sheet/sd-sheet.d.ts +9 -12
  2. package/dist/data/sheet/sd-sheet.d.ts.map +1 -1
  3. package/dist/data/sheet/sd-sheet.js +150 -168
  4. package/dist/data/sheet/types.d.ts +1 -0
  5. package/dist/data/sheet/types.d.ts.map +1 -1
  6. package/dist/data/sheet/useSheetCellStyling.d.ts +2 -2
  7. package/dist/data/sheet/useSheetCellStyling.d.ts.map +1 -1
  8. package/dist/data/sheet/useSheetCellStyling.js +20 -12
  9. package/dist/data/sheet/useSheetColumnFixing.d.ts +3 -8
  10. package/dist/data/sheet/useSheetColumnFixing.d.ts.map +1 -1
  11. package/dist/data/sheet/useSheetColumnFixing.js +19 -27
  12. package/dist/data/sheet/useSheetLayoutEngine.d.ts.map +1 -1
  13. package/dist/data/sheet/useSheetLayoutEngine.js +4 -1
  14. package/dist/layout/dock/sd-dock-container.d.ts.map +1 -1
  15. package/dist/layout/dock/sd-dock-container.js +3 -3
  16. package/package.json +7 -8
  17. package/src/data/sheet/sd-sheet.ts +39 -60
  18. package/src/data/sheet/types.ts +1 -0
  19. package/src/data/sheet/useSheetCellStyling.ts +19 -11
  20. package/src/data/sheet/useSheetColumnFixing.ts +21 -28
  21. package/src/data/sheet/useSheetLayoutEngine.ts +4 -1
  22. package/src/layout/dock/sd-dock-container.ts +1 -0
  23. package/README.md +0 -476
  24. package/docs/bootstrap/provide-sd-angular.md +0 -37
  25. package/docs/bootstrap/sd-angular-config-provider.md +0 -16
  26. package/docs/directives/sd-command-directive.md +0 -30
  27. package/docs/directives/sd-events.md +0 -25
  28. package/docs/directives/sd-intersection-directive.md +0 -36
  29. package/docs/directives/sd-invalid.md +0 -24
  30. package/docs/directives/sd-resize-directive.md +0 -42
  31. package/docs/directives/sd-ripple.md +0 -23
  32. package/docs/directives/sd-router-link.md +0 -38
  33. package/docs/directives/sd-show-effect.md +0 -18
  34. package/docs/directives/sd-typed-template.md +0 -69
  35. package/docs/features/sd-address-search-modal.md +0 -50
  36. package/docs/features/sd-permission-table.md +0 -20
  37. package/docs/features/sd-shared-data-components.md +0 -158
  38. package/docs/features/sd-tiptap-editor.md +0 -26
  39. package/docs/pipes/format-pipe.md +0 -41
  40. package/docs/plugins/sd-global-error-handler.md +0 -23
  41. package/docs/plugins/sd-option-event-plugin.md +0 -34
  42. package/docs/provider-types/sd-menu.md +0 -65
  43. package/docs/provider-types/sd-modal-content-def.md +0 -148
  44. package/docs/provider-types/sd-toast-content-def.md +0 -73
  45. package/docs/provider-types/shared-data-base.md +0 -59
  46. package/docs/providers/sd-activated-modal-provider.md +0 -34
  47. package/docs/providers/sd-app-structure-provider.md +0 -81
  48. package/docs/providers/sd-busy-provider.md +0 -18
  49. package/docs/providers/sd-file-dialog-provider.md +0 -40
  50. package/docs/providers/sd-local-storage-provider.md +0 -20
  51. package/docs/providers/sd-modal-provider.md +0 -67
  52. package/docs/providers/sd-navigate-window-provider.md +0 -18
  53. package/docs/providers/sd-print-provider.md +0 -25
  54. package/docs/providers/sd-service-client-factory-provider.md +0 -43
  55. package/docs/providers/sd-shared-data-provider.md +0 -64
  56. package/docs/providers/sd-system-config-provider.md +0 -46
  57. package/docs/providers/sd-system-log-provider.md +0 -18
  58. package/docs/providers/sd-theme-provider.md +0 -38
  59. package/docs/providers/sd-toast-provider.md +0 -65
  60. package/docs/recipes/_common-rules.md +0 -244
  61. package/docs/recipes/crud-detail/extension-a-edit-save.md +0 -230
  62. package/docs/recipes/crud-detail/extension-b-delete-restore.md +0 -142
  63. package/docs/recipes/crud-detail/extension-c-modal-view.md +0 -214
  64. package/docs/recipes/crud-detail/extension-d-control-view.md +0 -103
  65. package/docs/recipes/crud-detail/extension-e-auxiliary.md +0 -87
  66. package/docs/recipes/crud-detail/extension-f-complex-detail.md +0 -234
  67. package/docs/recipes/crud-detail.md +0 -353
  68. package/docs/recipes/crud-list/extension-a-inline-edit.md +0 -410
  69. package/docs/recipes/crud-list/extension-b-selection.md +0 -226
  70. package/docs/recipes/crud-list/extension-c-inline-delete.md +0 -87
  71. package/docs/recipes/crud-list/extension-d-select-modal.md +0 -207
  72. package/docs/recipes/crud-list/extension-e-readonly-modal.md +0 -165
  73. package/docs/recipes/crud-list/extension-f-modal-edit.md +0 -177
  74. package/docs/recipes/crud-list/extension-g-excel.md +0 -157
  75. package/docs/recipes/crud-list.md +0 -446
  76. package/docs/recipes/data-select-button.md +0 -412
  77. package/docs/recipes/page-modal-container.md +0 -260
  78. package/docs/styling/classes.md +0 -149
  79. package/docs/styling/mixins.md +0 -100
  80. package/docs/styling/themes.md +0 -35
  81. package/docs/styling/variables.md +0 -147
  82. package/docs/type-utilities/directive-input-signals.md +0 -232
  83. package/docs/ui-data/sd-list.md +0 -37
  84. package/docs/ui-data/sd-sheet.md +0 -227
  85. package/docs/ui-form/sd-additional-button.md +0 -26
  86. package/docs/ui-form/sd-anchor.md +0 -31
  87. package/docs/ui-form/sd-button.md +0 -105
  88. package/docs/ui-form/sd-checkbox-group.md +0 -39
  89. package/docs/ui-form/sd-checkbox.md +0 -81
  90. package/docs/ui-form/sd-date-range-picker.md +0 -27
  91. package/docs/ui-form/sd-form.md +0 -89
  92. package/docs/ui-form/sd-modal-select-button.md +0 -54
  93. package/docs/ui-form/sd-numpad.md +0 -26
  94. package/docs/ui-form/sd-range.md +0 -26
  95. package/docs/ui-form/sd-select.md +0 -68
  96. package/docs/ui-form/sd-shared-data-select.md +0 -52
  97. package/docs/ui-form/sd-state-preset.md +0 -37
  98. package/docs/ui-form/sd-switch.md +0 -27
  99. package/docs/ui-form/sd-textarea.md +0 -33
  100. package/docs/ui-form/sd-textfield.md +0 -145
  101. package/docs/ui-layout/sd-dock-container.md +0 -64
  102. package/docs/ui-layout/sd-dock.md +0 -37
  103. package/docs/ui-layout/sd-gap.md +0 -26
  104. package/docs/ui-layout/sd-kanban-board.md +0 -96
  105. package/docs/ui-layout/sd-kanban-lane.md +0 -34
  106. package/docs/ui-layout/sd-kanban.md +0 -29
  107. package/docs/ui-navigation/sd-collapse.md +0 -35
  108. package/docs/ui-navigation/sd-pagination.md +0 -26
  109. package/docs/ui-navigation/sd-sidebar-container.md +0 -49
  110. package/docs/ui-navigation/sd-sidebar-menu.md +0 -22
  111. package/docs/ui-navigation/sd-sidebar-user.md +0 -43
  112. package/docs/ui-navigation/sd-tab.md +0 -51
  113. package/docs/ui-navigation/sd-topbar-container.md +0 -97
  114. package/docs/ui-navigation/sd-topbar-menu.md +0 -23
  115. package/docs/ui-navigation/sd-topbar-user.md +0 -38
  116. package/docs/ui-navigation/sd-topbar.md +0 -30
  117. package/docs/ui-overlay/sd-busy-container.md +0 -69
  118. package/docs/ui-overlay/sd-confirm-modal.md +0 -30
  119. package/docs/ui-overlay/sd-dropdown.md +0 -40
  120. package/docs/ui-overlay/sd-modal.md +0 -34
  121. package/docs/ui-overlay/sd-prompt-modal.md +0 -30
  122. package/docs/ui-overlay/sd-toast.md +0 -35
  123. package/docs/ui-visual/sd-barcode.md +0 -36
  124. package/docs/ui-visual/sd-calendar.md +0 -34
  125. package/docs/ui-visual/sd-echarts.md +0 -32
  126. package/docs/ui-visual/sd-label.md +0 -24
  127. package/docs/ui-visual/sd-note.md +0 -23
  128. package/docs/ui-visual/sd-progress.md +0 -23
  129. package/docs/utils/inject-routing-signals.md +0 -161
  130. package/docs/utils/inject-sd-system-config-resource.md +0 -35
  131. package/docs/utils/mark.md +0 -43
  132. package/docs/utils/selection-managers.md +0 -96
  133. package/docs/utils/set-safe-style.md +0 -19
  134. package/docs/utils/setup-functions.md +0 -93
@@ -1,29 +0,0 @@
1
- # `SdKanban`
2
-
3
- 칸반 아이템 컴포넌트. `SdKanbanLane` 내부에 배치되며, 드래그앤드롭으로 레인 간 이동이 가능하다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-kanban", ... })
7
- export class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget<L, T>
8
- ```
9
-
10
- ## Members
11
-
12
- | Member | Kind | Type | Description |
13
- |--------|------|------|-------------|
14
- | `value` | input | `T \| undefined` | 이 카드의 데이터 값 |
15
- | `selectable` | input | `boolean` | 선택 가능 여부 (기본값: `false`) |
16
- | `draggable` | input | `boolean` | 드래그 가능 여부 (기본값: `false`) |
17
- | `contentClass` | input | `string \| undefined` | 카드 콘텐츠 CSS 클래스 |
18
-
19
- ## Usage
20
-
21
- ```html
22
- <sd-kanban-lane [value]="lane">
23
- @for (item of lane.items; track item.id) {
24
- <sd-kanban [value]="item" [draggable]="true">
25
- {{ item.title }}
26
- </sd-kanban>
27
- }
28
- </sd-kanban-lane>
29
- ```
@@ -1,35 +0,0 @@
1
- # `SdCollapse`
2
-
3
- 접기/펼치기 패널 컴포넌트.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-collapse" })
7
- class SdCollapse {
8
- open = input(false, { transform: booleanAttribute });
9
- }
10
- ```
11
-
12
- ## Members
13
-
14
- | Member | Kind | Type | Default | Description |
15
- |--------|------|------|---------|-------------|
16
- | `open` | input | `boolean` | `false` | 펼침 상태 |
17
-
18
- ## Related Types
19
-
20
- ### `SdCollapseIcon`
21
-
22
- 접기/펼치기 아이콘 컴포넌트. 화살표 회전 애니메이션.
23
-
24
- ```typescript
25
- @Component({ selector: "sd-collapse-icon" })
26
- class SdCollapseIcon {
27
- open = input(false, { transform: booleanAttribute });
28
- openRotate = input(90, { transform: numberAttribute });
29
- }
30
- ```
31
-
32
- | Input | Type | Default | Description |
33
- |-------|------|---------|-------------|
34
- | `open` | `boolean` | `false` | 펼침 상태 |
35
- | `openRotate` | `number` | `90` | 열림 시 회전 각도 |
@@ -1,26 +0,0 @@
1
- # `SdPagination`
2
-
3
- 페이지네이션 컴포넌트. 현재 페이지와 전체 페이지 수를 표시하고 네비게이션을 제공한다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-pagination", ... })
7
- export class SdPagination
8
- ```
9
-
10
- ## Members
11
-
12
- | Member | Kind | Type | Description |
13
- |--------|------|------|-------------|
14
- | `currentPage` | model | `number` | 현재 페이지 (0-based, 기본값: `0`) |
15
- | `totalPageCount` | input | `number` | 전체 페이지 수 (기본값: `0`) |
16
- | `visiblePageCount` | input | `number` | 한 번에 표시할 페이지 버튼 수 (기본값: `10`) |
17
-
18
- ## Usage
19
-
20
- ```html
21
- <sd-pagination
22
- [(currentPage)]="searchParams.page"
23
- [totalPageCount]="totalPageCount()"
24
- (currentPageChange)="onPageChange()"
25
- />
26
- ```
@@ -1,49 +0,0 @@
1
- # `SdSidebarContainer`
2
-
3
- 사이드바 컨테이너.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-sidebar-container" })
7
- class SdSidebarContainer { }
8
- ```
9
-
10
- ## Related Types
11
-
12
- ### `SdSidebar`
13
-
14
- 사이드바 컴포넌트.
15
-
16
- ```typescript
17
- @Component({ selector: "sd-sidebar" })
18
- class SdSidebar { }
19
- ```
20
-
21
- ### `SdSidebarMenu`
22
-
23
- 사이드바 메뉴 항목. 재귀적 트리 구조 지원.
24
-
25
- ```typescript
26
- @Component({ selector: "sd-sidebar-menu" })
27
- class SdSidebarMenu {
28
- menus = input<SdMenu[]>([]);
29
- layout = input<"accordion" | "flat">();
30
- getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
31
- }
32
- ```
33
-
34
- | Input | Type | Default | Description |
35
- |-------|------|---------|-------------|
36
- | `menus` | `SdMenu[]` | `[]` | 메뉴 항목 |
37
- | `layout` | `"accordion" \| "flat" \| undefined` | `undefined` | 레이아웃 모드 |
38
- | `getMenuIsSelectedFn` | `((menu) => boolean) \| undefined` | `undefined` | 커스텀 메뉴 선택 여부 함수 |
39
-
40
- ### `SdSidebarUser`
41
-
42
- 사이드바 사용자 영역 컴포넌트.
43
-
44
- ```typescript
45
- @Component({ selector: "sd-sidebar-user" })
46
- class SdSidebarUser {
47
- userMenu = input<SdSidebarUserMenu>();
48
- }
49
- ```
@@ -1,22 +0,0 @@
1
- # `SdSidebarMenu`
2
-
3
- 사이드바 메뉴 컴포넌트. `SdMenu[]` 트리를 받아 아코디언 또는 플랫 레이아웃으로 렌더링한다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-sidebar-menu", ... })
7
- export class SdSidebarMenu
8
- ```
9
-
10
- ## Members
11
-
12
- | Member | Kind | Type | Description |
13
- |--------|------|------|-------------|
14
- | `menus` | input | `SdMenu[]` | 메뉴 트리 (기본값: `[]`) |
15
- | `layout` | input | `"accordion" \| "flat" \| undefined` | 레이아웃. 미지정 시 메뉴 수 ≤ 3이면 `"flat"`, 초과이면 `"accordion"` |
16
- | `getMenuIsSelectedFn` | input | `(menu: SdMenu) => boolean` | 메뉴 선택 여부 커스텀 함수 |
17
-
18
- ## Usage
19
-
20
- ```html
21
- <sd-sidebar-menu [menus]="sdAppStructure.usableMenus()" />
22
- ```
@@ -1,43 +0,0 @@
1
- # `SdSidebarUser`
2
-
3
- 사이드바 하단 사용자 영역 컴포넌트. 사용자 정보를 표시하고, 선택적으로 드롭다운 메뉴를 제공한다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-sidebar-user", ... })
7
- export class SdSidebarUser
8
- ```
9
-
10
- ## Members
11
-
12
- | Member | Kind | Type | Description |
13
- |--------|------|------|-------------|
14
- | `userMenu` | input | `SdSidebarUserMenu \| undefined` | 사용자 메뉴 정보. `title`이 있으면 메뉴 버튼 표시 |
15
-
16
- ## Related Types
17
-
18
- ### `SdSidebarUserMenu`
19
-
20
- ```typescript
21
- interface SdSidebarUserMenu {
22
- title: string;
23
- menus: {
24
- title: string;
25
- onClick: () => void;
26
- }[];
27
- }
28
- ```
29
-
30
- | Field | Type | Description |
31
- |-------|------|-------------|
32
- | `title` | `string` | 메뉴 버튼 라벨 |
33
- | `menus` | `{ title: string; onClick: () => void }[]` | 드롭다운 메뉴 항목 목록 |
34
-
35
- ## Usage
36
-
37
- ```html
38
- <sd-sidebar-user
39
- [userMenu]="{ title: '홍길동', menus: [{ title: '로그아웃', onClick: logout }] }"
40
- >
41
- <span>홍길동</span>
42
- </sd-sidebar-user>
43
- ```
@@ -1,51 +0,0 @@
1
- # `SdTab`
2
-
3
- 탭 컨테이너 컴포넌트. 선택된 값을 `value` model로 보관한다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-tab" })
7
- class SdTab<T> {
8
- value = model<T>();
9
- }
10
- ```
11
-
12
- > **CRITICAL — 역할 범위**
13
- > `sd-tab`/`sd-tab-item`은 **상단의 탭 선택 UI만** 담당한다. 내부 뷰(패널) 전환 기능은 **없다**.
14
- > `sd-tab-item`의 `<ng-content>`는 **탭 라벨 전용**이다. 이 안에 시트/폼/상세 등 뷰 콘텐츠를 넣지 않는다.
15
- > 뷰 콘텐츠는 `sd-tab` **바깥**에서 선택된 `value`를 기준으로 `@if` / `@switch`로 제어한다.
16
-
17
- ## Members
18
-
19
- | Member | Kind | Type | Description |
20
- |--------|------|------|-------------|
21
- | `value` | model | `T \| undefined` | 선택된 탭 값 (two-way) |
22
-
23
- ## Related Types
24
-
25
- ### `SdTabItem`
26
-
27
- 탭 항목 컴포넌트. 자신의 `value`가 부모 `SdTab.value`와 같으면 선택 상태가 된다.
28
-
29
- ```typescript
30
- @Component({ selector: "sd-tab-item" })
31
- class SdTabItem<T> {
32
- value = input.required<T>();
33
- }
34
- ```
35
-
36
- ## Usage
37
-
38
- ```html
39
- <!-- ✅ 올바른 사용: 탭은 선택 UI, 뷰는 @if로 제어 -->
40
- <sd-tab [(value)]="tab">
41
- <sd-tab-item [value]="'list'">목록</sd-tab-item>
42
- <sd-tab-item [value]="'detail'">상세</sd-tab-item>
43
- </sd-tab>
44
-
45
- @if (tab() === "list") {
46
- <sd-sheet ...></sd-sheet>
47
- }
48
- @if (tab() === "detail") {
49
- <app-detail ...></app-detail>
50
- }
51
- ```
@@ -1,97 +0,0 @@
1
- # `SdTopbarContainer`
2
-
3
- 탑바 컨테이너.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-topbar-container" })
7
- class SdTopbarContainer { }
8
- ```
9
-
10
- ## Related Types
11
-
12
- ### `SdTopbar`
13
-
14
- 탑바 컴포넌트.
15
-
16
- ```typescript
17
- @Component({ selector: "sd-topbar" })
18
- class SdTopbar { }
19
- ```
20
-
21
- ### `SdTopbarMenu`
22
-
23
- 탑바 메뉴 항목.
24
-
25
- ```typescript
26
- @Component({ selector: "sd-topbar-menu" })
27
- class SdTopbarMenu {
28
- menus = input<SdMenu[]>([]);
29
- getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
30
- }
31
- ```
32
-
33
- | Input | Type | Default | Description |
34
- |-------|------|---------|-------------|
35
- | `menus` | `SdMenu[]` | `[]` | 메뉴 항목 |
36
- | `getMenuIsSelectedFn` | `((menu) => boolean) \| undefined` | `undefined` | 커스텀 메뉴 선택 여부 함수 |
37
-
38
- ### `SdTopbarUser`
39
-
40
- 탑바 사용자 영역 컴포넌트.
41
-
42
- ```typescript
43
- @Component({ selector: "sd-topbar-user" })
44
- class SdTopbarUser {
45
- menus = input.required<SdTopbarUserMenu[]>();
46
- }
47
- ```
48
-
49
- ## Usage
50
-
51
- ### topbar 내부 슬롯 활용
52
-
53
- ```html
54
- <sd-topbar-container>
55
- @if (viewType() === "page") {
56
- <sd-topbar>
57
- <h4>{{ viewTitle() }}</h4>
58
- <sd-button [size]="'sm'" [theme]="'link-info'" (click)="onRefreshButtonClick()">
59
- <ng-icon [svg]="icons.tablerRefresh" />
60
- 새로고침
61
- <small>(Ctrl+Alt+L)</small>
62
- </sd-button>
63
- </sd-topbar>
64
- }
65
- <!-- 메인 콘텐츠 -->
66
- </sd-topbar-container>
67
- ```
68
-
69
- 페이지/모달/control 뷰에서 **재사용**되는 화면은 topbar를 page 뷰에서만 렌더한다. `@if (viewType() === "page")` 조건을 사용한다.
70
-
71
- ### 실사용 예
72
-
73
- - [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — topbar + 새로고침 버튼 + 단축키 힌트
74
- - [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — topbar 내 저장·등록 버튼 추가
75
- - [crud-list.md §11 확장 G: 엑셀 업로드/다운로드](../recipes/crud-list.md#11-확장-g-엑셀-업로드다운로드) — topbar 내 엑셀 버튼 추가
76
- - [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — topbar 조건 없이 렌더 (page 뷰 전용)
77
- - [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — topbar 내 저장 버튼 추가
78
- - [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — `@if (viewType() === "page")` 조건부 렌더
79
-
80
- ## `SdPagination`
81
-
82
- 페이지네이션 컴포넌트.
83
-
84
- ```typescript
85
- @Component({ selector: "sd-pagination" })
86
- class SdPagination {
87
- currentPage = model(0);
88
- totalPageCount = input(0, { transform: numberAttribute });
89
- visiblePageCount = input(10, { transform: numberAttribute });
90
- }
91
- ```
92
-
93
- | Input | Type | Default | Description |
94
- |-------|------|---------|-------------|
95
- | `currentPage` | `number` | `0` | 현재 페이지 (0-based, two-way) |
96
- | `totalPageCount` | `number` | `0` | 총 페이지 수 |
97
- | `visiblePageCount` | `number` | `10` | 한 번에 표시할 페이지 수 |
@@ -1,23 +0,0 @@
1
- # `SdTopbarMenu`
2
-
3
- 탑바 메뉴 컴포넌트. `SdMenu[]` 트리를 드롭다운 방식으로 렌더링한다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-topbar-menu", ... })
7
- export class SdTopbarMenu
8
- ```
9
-
10
- ## Members
11
-
12
- | Member | Kind | Type | Description |
13
- |--------|------|------|-------------|
14
- | `menus` | input | `SdMenu[]` | 메뉴 트리 (기본값: `[]`) |
15
- | `getMenuIsSelectedFn` | input | `(menu: SdMenu) => boolean \| undefined` | 메뉴 선택 여부 커스텀 함수 |
16
-
17
- ## Usage
18
-
19
- ```html
20
- <sd-topbar>
21
- <sd-topbar-menu [menus]="sdAppStructure.usableMenus()" />
22
- </sd-topbar>
23
- ```
@@ -1,38 +0,0 @@
1
- # `SdTopbarUser`
2
-
3
- 탑바 사용자 영역 컴포넌트. 사용자 이름을 버튼으로 표시하고, 클릭 시 드롭다운 메뉴를 제공한다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-topbar-user", ... })
7
- export class SdTopbarUser
8
- ```
9
-
10
- ## Members
11
-
12
- | Member | Kind | Type | Description |
13
- |--------|------|------|-------------|
14
- | `menus` | input (required) | `SdTopbarUserMenu[]` | 드롭다운 메뉴 항목 목록 |
15
-
16
- ## Related Types
17
-
18
- ### `SdTopbarUserMenu`
19
-
20
- ```typescript
21
- interface SdTopbarUserMenu {
22
- title: string;
23
- onClick: () => void;
24
- }
25
- ```
26
-
27
- | Field | Type | Description |
28
- |-------|------|-------------|
29
- | `title` | `string` | 메뉴 항목 텍스트 |
30
- | `onClick` | `() => void` | 클릭 핸들러 |
31
-
32
- ## Usage
33
-
34
- ```html
35
- <sd-topbar-user [menus]="[{ title: '내 정보', onClick: goToProfile }, { title: '로그아웃', onClick: logout }]">
36
- 홍길동
37
- </sd-topbar-user>
38
- ```
@@ -1,30 +0,0 @@
1
- # `SdTopbar`
2
-
3
- 탑바 컴포넌트. `SdTopbarContainer` 내부에서 사용하며, 사이드바 토글 버튼과 콘텐츠 슬롯을 제공한다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-topbar", ... })
7
- export class SdTopbar
8
- ```
9
-
10
- `SdSidebarContainer`가 상위에 있으면 자동으로 사이드바 토글 버튼을 표시한다.
11
-
12
- ### 실사용 예
13
-
14
- - [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — `<h4>` 타이틀 + 새로고침 버튼 + `<small>` 단축키 힌트
15
- - [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 저장·등록 버튼 추가
16
- - [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — `<h4>` 타이틀 + 새로고침 버튼
17
- - [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — `@if (viewType() === "page")` 조건부 렌더
18
-
19
- ## Usage
20
-
21
- ```html
22
- <sd-topbar-container>
23
- <sd-topbar>
24
- <h1>앱 타이틀</h1>
25
- <sd-topbar-menu [menus]="menus()" />
26
- <sd-topbar-user [menus]="userMenus()" />
27
- </sd-topbar>
28
- ...
29
- </sd-topbar-container>
30
- ```
@@ -1,69 +0,0 @@
1
- # `SdBusyContainer`
2
-
3
- busy 상태(로딩 중) 표시 컨테이너 컴포넌트. `busy` 입력이 `true`일 때 스크린 오버레이와 인디케이터를 표시한다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-busy-container", ... })
7
- export class SdBusyContainer
8
- ```
9
-
10
- ## Members
11
-
12
- | Member | Kind | Type | Description |
13
- |--------|------|------|-------------|
14
- | `busy` | input | `boolean` | busy 상태 (기본값: `false`) |
15
- | `type` | input | `SdBusyType` | 인디케이터 유형. 미지정 시 `SdBusyProvider.type()` 값 사용 |
16
-
17
- 글로벌 busy 표시는 [`SdBusyProvider`](../providers/sd-busy-provider.md)를 통해 관리한다.
18
-
19
- ## Usage
20
-
21
- ```html
22
- <!-- 컴포넌트 로컬 busy -->
23
- <sd-busy-container [busy]="busyCount() > 0">
24
- <!-- 콘텐츠 -->
25
- </sd-busy-container>
26
- ```
27
-
28
- ### busyCount 카운트 패턴
29
-
30
- 비동기 작업마다 카운트를 증감하여 동시 요청을 안전하게 처리한다:
31
-
32
- ```typescript
33
- busyCount = signal(0);
34
-
35
- async _refresh(): Promise<void> {
36
- this.busyCount.update((v) => v + 1);
37
- await this._sdToast.try(async () => {
38
- // ... 비동기 작업
39
- });
40
- this.busyCount.update((v) => v - 1);
41
- }
42
- ```
43
-
44
- ```html
45
- <sd-busy-container [busy]="busyCount() > 0">
46
- ```
47
-
48
- ### busyMessage 선택적 패턴
49
-
50
- 긴 작업(엑셀 업로드 등) 시에만 사용. 기본적으로는 메시지 없이 인디케이터만 표시한다:
51
-
52
- ```typescript
53
- busyMessage = signal<string | undefined>(undefined);
54
-
55
- // 긴 작업 시
56
- this.busyMessage.set("엑셀 업로드 중...");
57
- // ... 작업 완료 후
58
- this.busyMessage.set(undefined);
59
- ```
60
-
61
- ```html
62
- <sd-busy-container [busy]="busyCount() > 0" [message]="busyMessage()">
63
- ```
64
-
65
- ### 실사용 예
66
-
67
- - [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — busyCount 기본 패턴
68
- - [crud-list.md §11 확장 G: 엑셀 업로드/다운로드](../recipes/crud-list.md#11-확장-g-엑셀-업로드다운로드) — busyMessage 패턴
69
- - [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — busyCount 기본 패턴
@@ -1,30 +0,0 @@
1
- # `SdConfirmModal`
2
-
3
- 범용 확인 모달. `SdModalContentDef<boolean>`을 구현한다.
4
- 메시지를 표시하고 확인/취소한다. 확인 시 `true` 반환, 취소 시 `undefined` 반환.
5
-
6
- ```typescript
7
- @Component({ selector: "sd-confirm-modal", ... })
8
- export class SdConfirmModal implements SdModalContentDef<boolean>
9
- ```
10
-
11
- ## Members
12
-
13
- | Member | Kind | Type | Description |
14
- |--------|------|------|-------------|
15
- | `message` | input (required) | `string` | 표시할 메시지 (HTML 허용) |
16
- | `initialized` | property | `Signal<boolean>` | 항상 `true` (SdModalContentDef 요구사항) |
17
- | `close` | output | `boolean \| undefined` | 확인: `true`, 취소: `undefined` |
18
-
19
- ## Usage
20
-
21
- ```typescript
22
- const confirmed = await this._sdModal.showAsync({
23
- title: "삭제 확인",
24
- type: SdConfirmModal,
25
- inputs: { message: "정말 삭제하시겠습니까?" },
26
- });
27
- if (confirmed) {
28
- await this._delete();
29
- }
30
- ```
@@ -1,40 +0,0 @@
1
- # `SdDropdown`
2
-
3
- 드롭다운 트리거 컴포넌트. 클릭 또는 키보드로 `SdDropdownPopup`을 열고 닫는다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-dropdown", ... })
7
- export class SdDropdown
8
- ```
9
-
10
- ## Members
11
-
12
- | Member | Kind | Type | Description |
13
- |--------|------|------|-------------|
14
- | `open` | model | `boolean` | 팝업 열림 상태 (기본값: `false`) |
15
- | `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
16
-
17
- ## Related Types
18
-
19
- ### `SdDropdownPopup`
20
-
21
- ```typescript
22
- @Component({ selector: "sd-dropdown-popup", ... })
23
- export class SdDropdownPopup
24
- ```
25
-
26
- 드롭다운 팝업 영역. `SdDropdown` 내부에서만 사용한다.
27
-
28
- ## Usage
29
-
30
- ```html
31
- <sd-dropdown>
32
- <sd-button>메뉴 열기</sd-button>
33
- <sd-dropdown-popup>
34
- <sd-list>
35
- <sd-list-item (click)="onAction1()">동작 1</sd-list-item>
36
- <sd-list-item (click)="onAction2()">동작 2</sd-list-item>
37
- </sd-list>
38
- </sd-dropdown-popup>
39
- </sd-dropdown>
40
- ```
@@ -1,34 +0,0 @@
1
- # `SdModal`
2
-
3
- 모달 래퍼 컴포넌트. `SdModalProvider.showAsync()`에 의해 프로그래밍 방식으로 생성된다. 직접 템플릿에 배치하지 않는다.
4
-
5
- ```typescript
6
- @Component({ selector: "sd-modal", ... })
7
- export class SdModal
8
- ```
9
-
10
- ## Members
11
-
12
- | Member | Kind | Type | Description |
13
- |--------|------|------|-------------|
14
- | `open` | model | `boolean` | 열림 상태 (기본값: `false`) |
15
- | `key` | input | `string \| undefined` | 설정 저장 키 (크기/위치 저장) |
16
- | `title` | input | `string` | 모달 제목 (기본값: `""`) |
17
- | `hideHeader` | input | `boolean` | 헤더 숨김 (기본값: `false`) |
18
- | `hideCloseButton` | input | `boolean` | 닫기 버튼 숨김 (기본값: `false`) |
19
- | `headerStyle` | input | `string \| undefined` | 헤더 인라인 스타일 |
20
- | `useCloseByBackdrop` | input | `boolean` | 배경 클릭으로 닫기 (기본값: `true`) |
21
- | `useCloseByEscapeKey` | input | `boolean` | ESC 키로 닫기 (기본값: `true`) |
22
- | `float` | input | `boolean` | 플로팅 모달 (backdrop 없음) (기본값: `false`) |
23
- | `fill` | input | `boolean` | 전체 화면 채우기 (기본값: `false`) |
24
- | `resizable` | input | `boolean` | 크기 조절 가능 (기본값: `false`) |
25
- | `movable` | input | `boolean` | 이동 가능 (기본값: `false`) |
26
- | `position` | input | `"bottom-right" \| "top-right" \| undefined` | 초기 위치 |
27
- | `minHeightPx` | input | `number \| undefined` | 최소 높이 |
28
- | `minWidthPx` | input | `number \| undefined` | 최소 너비 |
29
- | `heightPx` | input | `number \| undefined` | 초기 높이 |
30
- | `widthPx` | input | `number \| undefined` | 초기 너비 |
31
- | `actionTplRef` | input | `TemplateRef<any> \| undefined` | 헤더 액션 영역 템플릿 |
32
- | `closeRequest` | output | `void` | 닫기 요청 (배경 클릭, ESC, X 버튼) |
33
-
34
- 모달 컴포넌트를 직접 사용하는 대신 [`SdModalProvider`](../providers/sd-modal-provider.md)를 사용한다.
@@ -1,30 +0,0 @@
1
- # `SdPromptModal`
2
-
3
- 범용 프롬프트 입력 모달. `SdModalContentDef<string>`을 구현한다.
4
- 메시지를 표시하고 텍스트 입력 후 확인/취소한다. 확인 시 입력값 반환, 취소 시 `undefined` 반환.
5
-
6
- ```typescript
7
- @Component({ selector: "sd-prompt-modal", ... })
8
- export class SdPromptModal implements SdModalContentDef<string>
9
- ```
10
-
11
- ## Members
12
-
13
- | Member | Kind | Type | Description |
14
- |--------|------|------|-------------|
15
- | `message` | input (required) | `string` | 표시할 메시지 (HTML 허용) |
16
- | `initialized` | property | `Signal<boolean>` | 항상 `true` (SdModalContentDef 요구사항) |
17
- | `close` | output | `string \| undefined` | 확인: 입력값, 취소: `undefined` |
18
-
19
- ## Usage
20
-
21
- ```typescript
22
- const name = await this._sdModal.showAsync({
23
- title: "이름 입력",
24
- type: SdPromptModal,
25
- inputs: { message: "새 항목의 이름을 입력하세요." },
26
- });
27
- if (name != null) {
28
- // 입력한 이름 사용
29
- }
30
- ```