@simplysm/angular 14.0.48 → 14.0.51
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 +234 -226
- package/dist/controls/select/sd-select.js +3 -3
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -2
- package/dist/layout/dock/sd-dock-container.js +1 -1
- package/dist/styles.css +9 -0
- package/docs/bootstrap/provide-sd-angular.md +37 -0
- package/docs/bootstrap/sd-angular-config-provider.md +16 -0
- package/docs/directives/sd-command-directive.md +30 -0
- package/docs/directives/sd-events.md +25 -0
- package/docs/directives/sd-intersection-directive.md +36 -0
- package/docs/directives/sd-invalid.md +24 -0
- package/docs/directives/sd-resize-directive.md +42 -0
- package/docs/directives/sd-ripple.md +23 -0
- package/docs/directives/sd-router-link.md +38 -0
- package/docs/directives/sd-show-effect.md +18 -0
- package/docs/directives/sd-typed-template.md +69 -0
- package/docs/features/sd-address-search-modal.md +50 -0
- package/docs/features/sd-permission-table.md +20 -0
- package/docs/features/sd-shared-data-components.md +158 -0
- package/docs/features/sd-tiptap-editor.md +26 -0
- package/docs/{pipes.md → pipes/format-pipe.md} +14 -5
- package/docs/plugins/sd-global-error-handler.md +23 -0
- package/docs/{plugins.md → plugins/sd-option-event-plugin.md} +9 -12
- package/docs/provider-types/sd-menu.md +65 -0
- package/docs/provider-types/sd-modal-content-def.md +148 -0
- package/docs/provider-types/sd-toast-content-def.md +73 -0
- package/docs/provider-types/shared-data-base.md +59 -0
- package/docs/providers/sd-activated-modal-provider.md +34 -0
- package/docs/providers/sd-app-structure-provider.md +81 -0
- package/docs/providers/sd-busy-provider.md +18 -0
- package/docs/providers/sd-file-dialog-provider.md +40 -0
- package/docs/providers/sd-local-storage-provider.md +20 -0
- package/docs/providers/sd-modal-provider.md +67 -0
- package/docs/providers/sd-navigate-window-provider.md +18 -0
- package/docs/providers/sd-print-provider.md +25 -0
- package/docs/providers/sd-service-client-factory-provider.md +43 -0
- package/docs/providers/sd-shared-data-provider.md +64 -0
- package/docs/providers/sd-system-config-provider.md +46 -0
- package/docs/providers/sd-system-log-provider.md +18 -0
- package/docs/providers/sd-theme-provider.md +38 -0
- package/docs/providers/sd-toast-provider.md +65 -0
- package/docs/recipes/_common-rules.md +244 -0
- package/docs/recipes/crud-detail/extension-a-edit-save.md +230 -0
- package/docs/recipes/crud-detail/extension-b-delete-restore.md +142 -0
- package/docs/recipes/crud-detail/extension-c-modal-view.md +214 -0
- package/docs/recipes/crud-detail/extension-d-control-view.md +103 -0
- package/docs/recipes/crud-detail/extension-e-auxiliary.md +87 -0
- package/docs/recipes/crud-detail/extension-f-complex-detail.md +234 -0
- package/docs/recipes/crud-detail.md +215 -722
- package/docs/recipes/crud-list/extension-a-inline-edit.md +410 -0
- package/docs/recipes/crud-list/extension-b-selection.md +226 -0
- package/docs/recipes/crud-list/extension-c-inline-delete.md +87 -0
- package/docs/recipes/crud-list/extension-d-select-modal.md +207 -0
- package/docs/recipes/crud-list/extension-e-readonly-modal.md +165 -0
- package/docs/recipes/crud-list/extension-f-modal-edit.md +177 -0
- package/docs/recipes/crud-list/extension-g-excel.md +157 -0
- package/docs/recipes/crud-list.md +293 -626
- package/docs/recipes/data-select-button.md +194 -101
- package/docs/recipes/page-modal-container.md +168 -86
- package/docs/styling/classes.md +149 -0
- package/docs/styling/mixins.md +100 -0
- package/docs/styling/themes.md +35 -0
- package/docs/styling/variables.md +147 -0
- package/docs/{type-utilities.md → type-utilities/directive-input-signals.md} +17 -35
- package/docs/ui-data/sd-list.md +37 -0
- package/docs/ui-data/sd-sheet.md +227 -0
- package/docs/ui-form/sd-additional-button.md +26 -0
- package/docs/ui-form/sd-anchor.md +31 -0
- package/docs/ui-form/sd-button.md +105 -0
- package/docs/ui-form/sd-checkbox-group.md +39 -0
- package/docs/ui-form/sd-checkbox.md +81 -0
- package/docs/ui-form/sd-date-range-picker.md +27 -0
- package/docs/ui-form/sd-form.md +89 -0
- package/docs/ui-form/sd-modal-select-button.md +54 -0
- package/docs/ui-form/sd-numpad.md +26 -0
- package/docs/ui-form/sd-range.md +26 -0
- package/docs/ui-form/sd-select.md +68 -0
- package/docs/ui-form/sd-shared-data-select.md +52 -0
- package/docs/ui-form/sd-state-preset.md +37 -0
- package/docs/ui-form/sd-switch.md +27 -0
- package/docs/ui-form/sd-textarea.md +33 -0
- package/docs/ui-form/sd-textfield.md +145 -0
- package/docs/ui-layout/sd-dock-container.md +64 -0
- package/docs/ui-layout/sd-dock.md +37 -0
- package/docs/ui-layout/sd-gap.md +26 -0
- package/docs/{ui-layout.md → ui-layout/sd-kanban-board.md} +41 -85
- package/docs/ui-layout/sd-kanban-lane.md +34 -0
- package/docs/ui-layout/sd-kanban.md +29 -0
- package/docs/ui-navigation/sd-collapse.md +35 -0
- package/docs/ui-navigation/sd-pagination.md +26 -0
- package/docs/ui-navigation/sd-sidebar-container.md +49 -0
- package/docs/ui-navigation/sd-sidebar-menu.md +22 -0
- package/docs/ui-navigation/sd-sidebar-user.md +43 -0
- package/docs/ui-navigation/sd-tab.md +51 -0
- package/docs/ui-navigation/sd-topbar-container.md +97 -0
- package/docs/ui-navigation/sd-topbar-menu.md +23 -0
- package/docs/ui-navigation/sd-topbar-user.md +38 -0
- package/docs/ui-navigation/sd-topbar.md +30 -0
- package/docs/ui-overlay/sd-busy-container.md +69 -0
- package/docs/ui-overlay/sd-confirm-modal.md +30 -0
- package/docs/ui-overlay/sd-dropdown.md +40 -0
- package/docs/ui-overlay/sd-modal.md +34 -0
- package/docs/ui-overlay/sd-prompt-modal.md +30 -0
- package/docs/ui-overlay/sd-toast.md +35 -0
- package/docs/ui-visual/sd-barcode.md +36 -0
- package/docs/ui-visual/sd-calendar.md +34 -0
- package/docs/ui-visual/sd-echarts.md +32 -0
- package/docs/ui-visual/sd-label.md +24 -0
- package/docs/ui-visual/sd-note.md +23 -0
- package/docs/ui-visual/sd-progress.md +23 -0
- package/docs/utils/inject-routing-signals.md +161 -0
- package/docs/utils/inject-sd-system-config-resource.md +35 -0
- package/docs/utils/mark.md +43 -0
- package/docs/utils/selection-managers.md +96 -0
- package/docs/utils/set-safe-style.md +19 -0
- package/docs/utils/setup-functions.md +93 -0
- package/package.json +7 -7
- package/scss/commons/_styles.scss +12 -0
- package/src/controls/select/sd-select.ts +3 -3
- package/src/core/modal/sd-modal.provider.ts +1 -1
- package/src/core/modal/sd-modal.ts +1 -1
- package/src/core/routing/menu-utils.ts +1 -1
- package/src/core/shared-data/sd-shared-data.provider.ts +7 -7
- package/src/data/shared-data/sd-shared-data-select.ts +2 -2
- package/src/index.ts +0 -3
- package/src/layout/dock/sd-dock-container.ts +1 -1
- package/dist/data/getOrmDataEditToastErrorMessage.d.ts +0 -2
- package/dist/data/getOrmDataEditToastErrorMessage.d.ts.map +0 -1
- package/dist/data/getOrmDataEditToastErrorMessage.js +0 -8
- package/docs/bootstrap.md +0 -38
- package/docs/directives.md +0 -236
- package/docs/features.md +0 -169
- package/docs/provider-types.md +0 -283
- package/docs/providers.md +0 -379
- package/docs/styling.md +0 -222
- package/docs/ui-data.md +0 -333
- package/docs/ui-form.md +0 -502
- package/docs/ui-navigation.md +0 -273
- package/docs/ui-overlay.md +0 -157
- package/docs/ui-visual.md +0 -127
- package/docs/utils.md +0 -244
- package/src/data/getOrmDataEditToastErrorMessage.ts +0 -10
package/README.md
CHANGED
|
@@ -16,323 +16,331 @@ npm install @simplysm/angular
|
|
|
16
16
|
|
|
17
17
|
| API | Type | Description |
|
|
18
18
|
|-----|------|-------------|
|
|
19
|
-
| `provideSdAngular` | function | 모든 기반 설정을 제공하는 환경 프로바이더 팩토리 |
|
|
20
|
-
| `SdAngularConfigProvider` | class | `clientName` 설정을 보유하는 프로바이더 |
|
|
21
|
-
|
|
22
|
-
-> See [docs/bootstrap.md](./docs/bootstrap.md) for details.
|
|
19
|
+
| [`provideSdAngular`](./docs/bootstrap/provide-sd-angular.md) | function | 모든 기반 설정을 제공하는 환경 프로바이더 팩토리 |
|
|
20
|
+
| [`SdAngularConfigProvider`](./docs/bootstrap/sd-angular-config-provider.md) | class | `clientName` 설정을 보유하는 프로바이더 |
|
|
23
21
|
|
|
24
22
|
### Providers
|
|
25
23
|
|
|
26
24
|
| API | Type | Description |
|
|
27
25
|
|-----|------|-------------|
|
|
28
|
-
| `SdThemeProvider` | class | 다크모드/폰트 크기 프로바이더 (`dark`, `fontSize` signal) |
|
|
29
|
-
| `SdThemeSelector` | component | 테마 설정 드롭다운 (다크모드 토글, 폰트 크기 조절) |
|
|
30
|
-
| `SdSystemLogProvider` | class | 시스템 로그 기록 프로바이더 |
|
|
31
|
-
| `SdAppStructureProvider` | class | 앱 구조(메뉴/권한) 관리 프로바이더 |
|
|
32
|
-
| `injectPermsSignal` | function | 현재 뷰의 권한 목록을 signal로 반환 |
|
|
33
|
-
| `SdAppStructureUtils` | class | 앱 구조 유틸리티 (메뉴/권한 조회 정적 메서드) |
|
|
34
|
-
| `SdFileDialogProvider` | class | 네이티브 파일 선택 대화상자 프로바이더 |
|
|
35
|
-
| `SdLocalStorageProvider` | class | `clientName` 스코프 localStorage 래퍼 |
|
|
36
|
-
| `SdSystemConfigProvider` | class | 비동기 설정 저장/조회 프로바이더 |
|
|
37
|
-
| `SdServiceClientFactoryProvider` | class | ServiceClient 인스턴스 팩토리/관리 |
|
|
38
|
-
| `SdSharedDataProvider` | class | 이벤트 기반 공유 데이터 캐시 추상 프로바이더 |
|
|
39
|
-
| `SdSharedDataChangeEvent` | const | 공유 데이터 변경 이벤트 정의 |
|
|
40
|
-
| `SdNavigateWindowProvider` | class | 새 윈도우 네비게이션 + 자동 닫기 |
|
|
41
|
-
| `SdActivatedModalProvider` | class | 모달 내부에서 inject하여 모달/컨텐츠 참조 |
|
|
42
|
-
| `SdToastProvider` | class | 토스트 알림 (info/success/warning/danger) |
|
|
43
|
-
| `SdBusyProvider` | class | 글로벌 busy 상태 관리 (spinner/bar/cube) |
|
|
44
|
-
| `SdPrintProvider` | class | 인쇄 및 PDF 생성 프로바이더 |
|
|
45
|
-
| `SdModalProvider` | class | 프로그래밍 방식 모달 생성 |
|
|
46
|
-
|
|
47
|
-
-> See [docs/providers.md](./docs/providers.md) for details.
|
|
26
|
+
| [`SdThemeProvider`](./docs/providers/sd-theme-provider.md) | class | 다크모드/폰트 크기 프로바이더 (`dark`, `fontSize` signal) |
|
|
27
|
+
| [`SdThemeSelector`](./docs/providers/sd-theme-provider.md) | component | 테마 설정 드롭다운 (다크모드 토글, 폰트 크기 조절) |
|
|
28
|
+
| [`SdSystemLogProvider`](./docs/providers/sd-system-log-provider.md) | class | 시스템 로그 기록 프로바이더 |
|
|
29
|
+
| [`SdAppStructureProvider`](./docs/providers/sd-app-structure-provider.md) | class | 앱 구조(메뉴/권한) 관리 프로바이더 |
|
|
30
|
+
| [`injectPermsSignal`](./docs/providers/sd-app-structure-provider.md) | function | 현재 뷰의 권한 목록을 signal로 반환 |
|
|
31
|
+
| [`SdAppStructureUtils`](./docs/providers/sd-app-structure-provider.md) | class | 앱 구조 유틸리티 (메뉴/권한 조회 정적 메서드) |
|
|
32
|
+
| [`SdFileDialogProvider`](./docs/providers/sd-file-dialog-provider.md) | class | 네이티브 파일 선택 대화상자 프로바이더 |
|
|
33
|
+
| [`SdLocalStorageProvider`](./docs/providers/sd-local-storage-provider.md) | class | `clientName` 스코프 localStorage 래퍼 |
|
|
34
|
+
| [`SdSystemConfigProvider`](./docs/providers/sd-system-config-provider.md) | class | 비동기 설정 저장/조회 프로바이더 |
|
|
35
|
+
| [`SdServiceClientFactoryProvider`](./docs/providers/sd-service-client-factory-provider.md) | class | ServiceClient 인스턴스 팩토리/관리 |
|
|
36
|
+
| [`SdSharedDataProvider`](./docs/providers/sd-shared-data-provider.md) | class | 이벤트 기반 공유 데이터 캐시 추상 프로바이더 |
|
|
37
|
+
| [`SdSharedDataChangeEvent`](./docs/providers/sd-shared-data-provider.md) | const | 공유 데이터 변경 이벤트 정의 |
|
|
38
|
+
| [`SdNavigateWindowProvider`](./docs/providers/sd-navigate-window-provider.md) | class | 새 윈도우 네비게이션 + 자동 닫기 |
|
|
39
|
+
| [`SdActivatedModalProvider`](./docs/providers/sd-activated-modal-provider.md) | class | 모달 내부에서 inject하여 모달/컨텐츠 참조 |
|
|
40
|
+
| [`SdToastProvider`](./docs/providers/sd-toast-provider.md) | class | 토스트 알림 (info/success/warning/danger) |
|
|
41
|
+
| [`SdBusyProvider`](./docs/providers/sd-busy-provider.md) | class | 글로벌 busy 상태 관리 (spinner/bar/cube) |
|
|
42
|
+
| [`SdPrintProvider`](./docs/providers/sd-print-provider.md) | class | 인쇄 및 PDF 생성 프로바이더 |
|
|
43
|
+
| [`SdModalProvider`](./docs/providers/sd-modal-provider.md) | class | 프로그래밍 방식 모달 생성 |
|
|
48
44
|
|
|
49
45
|
### Provider Types
|
|
50
46
|
|
|
51
47
|
| API | Type | Description |
|
|
52
48
|
|-----|------|-------------|
|
|
53
|
-
| `SdMenu` | interface | 메뉴 트리 노드 |
|
|
54
|
-
| `SdFlatMenu` | interface | 플랫 메뉴 항목 |
|
|
55
|
-
| `SdPermission` | interface | 권한 트리 노드 |
|
|
56
|
-
| `SharedDataBase` | interface | 공유 데이터 기본 인터페이스 |
|
|
57
|
-
| `SharedDataInfo` | interface | 공유 데이터 등록 정보 |
|
|
58
|
-
| `SharedDataHandle` | interface | 공유 데이터 핸들 (items signal + get) |
|
|
59
|
-
| `SdModalContentDef` | interface | 모달 컴포넌트 구현 인터페이스 |
|
|
60
|
-
| `SdModalInfo` | interface | 모달 생성 시 전달하는 정보 |
|
|
61
|
-
| `SdModalOptions` | interface | 모달 옵션 (크기, 위치, 동작) |
|
|
62
|
-
| `SdToastContentDef` | interface | 토스트 컴포넌트 구현 인터페이스 |
|
|
63
|
-
| `SdToastInput` | interface | 커스텀 토스트 생성 입력 |
|
|
64
|
-
| `SdToastSeverity` | type | 토스트 심각도 (`"info" \| "success" \| "warning" \| "danger"`) |
|
|
65
|
-
| `SdToastTheme` | type | 토스트 테마 (severity + `"primary" \| "secondary" \| "gray" \| "blue-gray"`) |
|
|
66
|
-
| `SdBusyType` | type | busy 표시 유형 (`"spinner" \| "bar" \| "cube"`) |
|
|
67
|
-
| `SdPrint` | interface | 인쇄 컴포넌트 구현 인터페이스 |
|
|
68
|
-
| `SdPrintInput` | interface | 인쇄 생성 입력 |
|
|
69
|
-
| `SelectModalOutputResult` | interface | 모달 선택 결과 (`selectedItemKeys`, `selectedItems`) |
|
|
70
|
-
|
|
71
|
-
-> See [docs/provider-types.md](./docs/provider-types.md) for details.
|
|
49
|
+
| [`SdMenu`](./docs/provider-types/sd-menu.md) | interface | 메뉴 트리 노드 |
|
|
50
|
+
| [`SdFlatMenu`](./docs/provider-types/sd-menu.md) | interface | 플랫 메뉴 항목 |
|
|
51
|
+
| [`SdPermission`](./docs/provider-types/sd-menu.md) | interface | 권한 트리 노드 |
|
|
52
|
+
| [`SharedDataBase`](./docs/provider-types/shared-data-base.md) | interface | 공유 데이터 기본 인터페이스 |
|
|
53
|
+
| [`SharedDataInfo`](./docs/provider-types/shared-data-base.md) | interface | 공유 데이터 등록 정보 |
|
|
54
|
+
| [`SharedDataHandle`](./docs/provider-types/shared-data-base.md) | interface | 공유 데이터 핸들 (items signal + get) |
|
|
55
|
+
| [`SdModalContentDef`](./docs/provider-types/sd-modal-content-def.md) | interface | 모달 컴포넌트 구현 인터페이스 |
|
|
56
|
+
| [`SdModalInfo`](./docs/provider-types/sd-modal-content-def.md) | interface | 모달 생성 시 전달하는 정보 |
|
|
57
|
+
| [`SdModalOptions`](./docs/provider-types/sd-modal-content-def.md) | interface | 모달 옵션 (크기, 위치, 동작) |
|
|
58
|
+
| [`SdToastContentDef`](./docs/provider-types/sd-toast-content-def.md) | interface | 토스트 컴포넌트 구현 인터페이스 |
|
|
59
|
+
| [`SdToastInput`](./docs/provider-types/sd-toast-content-def.md) | interface | 커스텀 토스트 생성 입력 |
|
|
60
|
+
| [`SdToastSeverity`](./docs/provider-types/sd-toast-content-def.md) | type | 토스트 심각도 (`"info" \| "success" \| "warning" \| "danger"`) |
|
|
61
|
+
| [`SdToastTheme`](./docs/provider-types/sd-toast-content-def.md) | type | 토스트 테마 (severity + `"primary" \| "secondary" \| "gray" \| "blue-gray"`) |
|
|
62
|
+
| [`SdBusyType`](./docs/provider-types/sd-toast-content-def.md) | type | busy 표시 유형 (`"spinner" \| "bar" \| "cube"`) |
|
|
63
|
+
| [`SdPrint`](./docs/provider-types/sd-toast-content-def.md) | interface | 인쇄 컴포넌트 구현 인터페이스 |
|
|
64
|
+
| [`SdPrintInput`](./docs/provider-types/sd-toast-content-def.md) | interface | 인쇄 생성 입력 |
|
|
65
|
+
| [`SelectModalOutputResult`](./docs/provider-types/sd-modal-content-def.md) | interface | 모달 선택 결과 (`selectedItemKeys`, `selectedItems`) |
|
|
72
66
|
|
|
73
67
|
### Directives
|
|
74
68
|
|
|
75
69
|
| API | Type | Description |
|
|
76
70
|
|-----|------|-------------|
|
|
77
|
-
| `SdEvents` | directive | `.capture`, `.passive`, `.once` 수식어 및 커스텀 이벤트 바인딩 |
|
|
78
|
-
| `SdRipple` | directive | `[sdRipple]` 리플 효과 |
|
|
79
|
-
| `SdShowEffect` | directive | `[sdShowEffect]` 뷰포트 진입 시 reveal 애니메이션 |
|
|
80
|
-
| `SdInvalid` | directive | `[sdInvalid]` 유효성 검증 표시기 |
|
|
81
|
-
| `SdTypedTemplate` | directive | `ng-template[typed]` 템플릿 컨텍스트 타입 가드 |
|
|
82
|
-
| `SdItemOfTemplate` | directive | `ng-template[itemOf]` 항목 반복 템플릿 타입 가드 |
|
|
83
|
-
| `SdItemOfTemplateContext` | interface | itemOf 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`) |
|
|
84
|
-
| `SdRouterLink` | directive | `[sdRouterLink]` 라우터 네비게이션 (Ctrl+클릭 새 창) |
|
|
85
|
-
| `SdCommandDirective` | directive | `[sdSaveCommand]`, `[sdRefreshCommand]`, `[sdInsertCommand]` 키보드 단축키 output 이벤트 디렉티브 |
|
|
86
|
-
| `SdResizeDirective` | directive | `[sdResize]` ResizeObserver 기반 resize output 이벤트 디렉티브 |
|
|
87
|
-
| `SdResizeEvent` | interface | resize 이벤트 데이터 (`heightChanged`, `widthChanged`, `target`, `contentRect`) |
|
|
88
|
-
| `SdIntersectionDirective` | directive | `[sdIntersection]` IntersectionObserver 기반 intersection output 이벤트 디렉티브 |
|
|
89
|
-
| `SdIntersectionEvent` | interface | intersection 이벤트 데이터 (`entry`) |
|
|
90
|
-
|
|
91
|
-
-> See [docs/directives.md](./docs/directives.md) for details.
|
|
71
|
+
| [`SdEvents`](./docs/directives/sd-events.md) | directive | `.capture`, `.passive`, `.once` 수식어 및 커스텀 이벤트 바인딩 |
|
|
72
|
+
| [`SdRipple`](./docs/directives/sd-ripple.md) | directive | `[sdRipple]` 리플 효과 |
|
|
73
|
+
| [`SdShowEffect`](./docs/directives/sd-show-effect.md) | directive | `[sdShowEffect]` 뷰포트 진입 시 reveal 애니메이션 |
|
|
74
|
+
| [`SdInvalid`](./docs/directives/sd-invalid.md) | directive | `[sdInvalid]` 유효성 검증 표시기 |
|
|
75
|
+
| [`SdTypedTemplate`](./docs/directives/sd-typed-template.md) | directive | `ng-template[typed]` 템플릿 컨텍스트 타입 가드 |
|
|
76
|
+
| [`SdItemOfTemplate`](./docs/directives/sd-typed-template.md) | directive | `ng-template[itemOf]` 항목 반복 템플릿 타입 가드 |
|
|
77
|
+
| [`SdItemOfTemplateContext`](./docs/directives/sd-typed-template.md) | interface | itemOf 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`) |
|
|
78
|
+
| [`SdRouterLink`](./docs/directives/sd-router-link.md) | directive | `[sdRouterLink]` 라우터 네비게이션 (Ctrl+클릭 새 창) |
|
|
79
|
+
| [`SdCommandDirective`](./docs/directives/sd-command-directive.md) | directive | `[sdSaveCommand]`, `[sdRefreshCommand]`, `[sdInsertCommand]` 키보드 단축키 output 이벤트 디렉티브 |
|
|
80
|
+
| [`SdResizeDirective`](./docs/directives/sd-resize-directive.md) | directive | `[sdResize]` ResizeObserver 기반 resize output 이벤트 디렉티브 |
|
|
81
|
+
| [`SdResizeEvent`](./docs/directives/sd-resize-directive.md) | interface | resize 이벤트 데이터 (`heightChanged`, `widthChanged`, `target`, `contentRect`) |
|
|
82
|
+
| [`SdIntersectionDirective`](./docs/directives/sd-intersection-directive.md) | directive | `[sdIntersection]` IntersectionObserver 기반 intersection output 이벤트 디렉티브 |
|
|
83
|
+
| [`SdIntersectionEvent`](./docs/directives/sd-intersection-directive.md) | interface | intersection 이벤트 데이터 (`entry`) |
|
|
92
84
|
|
|
93
85
|
### Plugins
|
|
94
86
|
|
|
95
87
|
| API | Type | Description |
|
|
96
88
|
|-----|------|-------------|
|
|
97
|
-
| `SdOptionEventPlugin` | class | `.capture`, `.passive`, `.once` 이벤트 옵션 플러그인 (`provideSdAngular`에서 자동 등록) |
|
|
98
|
-
| `SdGlobalErrorHandlerPlugin` | class | 글로벌 에러 핸들러 (PromiseRejection, ErrorEvent 등) |
|
|
99
|
-
|
|
100
|
-
-> See [docs/plugins.md](./docs/plugins.md) for details.
|
|
89
|
+
| [`SdOptionEventPlugin`](./docs/plugins/sd-option-event-plugin.md) | class | `.capture`, `.passive`, `.once` 이벤트 옵션 플러그인 (`provideSdAngular`에서 자동 등록) |
|
|
90
|
+
| [`SdGlobalErrorHandlerPlugin`](./docs/plugins/sd-global-error-handler.md) | class | 글로벌 에러 핸들러 (PromiseRejection, ErrorEvent 등) |
|
|
101
91
|
|
|
102
92
|
### Pipes
|
|
103
93
|
|
|
104
94
|
| API | Type | Description |
|
|
105
95
|
|-----|------|-------------|
|
|
106
|
-
| `FormatPipe` | pipe | DateTime/DateOnly/string 포매팅 파이프 |
|
|
107
|
-
|
|
108
|
-
-> See [docs/pipes.md](./docs/pipes.md) for details.
|
|
96
|
+
| [`FormatPipe`](./docs/pipes/format-pipe.md) | pipe | DateTime/DateOnly/string 포매팅 파이프 |
|
|
109
97
|
|
|
110
98
|
### Utils & Setups
|
|
111
99
|
|
|
112
100
|
| API | Type | Description |
|
|
113
101
|
|-----|------|-------------|
|
|
114
|
-
| `mark` | function | WritableSignal 변경 알림 트리거 (shallow copy) |
|
|
115
|
-
| `setSafeStyle` | function | Renderer2로 여러 CSS 스타일 일괄 적용 |
|
|
116
|
-
| `injectSdSystemConfigResource` | function | 시스템 설정 resource 래퍼 |
|
|
117
|
-
| `injectCurrentPageCodeSignal` | function | 현재 페이지 코드 signal |
|
|
118
|
-
| `injectFullPageCodeSignal` | function | 전체 페이지 코드 signal (NavigationEnd 기반) |
|
|
119
|
-
| `injectViewTitleSignal` | function | 현재 뷰 타이틀 signal |
|
|
120
|
-
| `injectViewTypeSignal` | function | 현재 뷰 타입 signal (`page \| modal \| control`) |
|
|
121
|
-
| `useSelectionManager` | function | 선택 관리 composable (single/multi) |
|
|
122
|
-
| `useSortingManager` | function | 정렬 관리 composable |
|
|
123
|
-
| `useExpandingManager` | function | 트리 확장/축소 관리 composable |
|
|
124
|
-
| `setupBgTheme` | function | body 배경 테마 색상 설정 |
|
|
125
|
-
| `setupRipple` | function | 리플 효과 설정 |
|
|
126
|
-
| `setupRevealOnShow` | function | 뷰포트 진입 시 reveal 애니메이션 설정 |
|
|
127
|
-
| `setupInvalid` | function | 유효성 검증 표시기 설정 |
|
|
128
|
-
| `setupModelHook` | function | model signal의 set을 가드 함수로 래핑 |
|
|
129
|
-
| `setupCanDeactivate` | function | 모달/라우트 canDeactivate 설정 |
|
|
130
|
-
|
|
131
|
-
-> See [docs/utils.md](./docs/utils.md) for details.
|
|
102
|
+
| [`mark`](./docs/utils/mark.md) | function | WritableSignal 변경 알림 트리거 (shallow copy) |
|
|
103
|
+
| [`setSafeStyle`](./docs/utils/set-safe-style.md) | function | Renderer2로 여러 CSS 스타일 일괄 적용 |
|
|
104
|
+
| [`injectSdSystemConfigResource`](./docs/utils/inject-sd-system-config-resource.md) | function | 시스템 설정 resource 래퍼 |
|
|
105
|
+
| [`injectCurrentPageCodeSignal`](./docs/utils/inject-routing-signals.md) | function | 현재 페이지 코드 signal |
|
|
106
|
+
| [`injectFullPageCodeSignal`](./docs/utils/inject-routing-signals.md) | function | 전체 페이지 코드 signal (NavigationEnd 기반) |
|
|
107
|
+
| [`injectViewTitleSignal`](./docs/utils/inject-routing-signals.md) | function | 현재 뷰 타이틀 signal |
|
|
108
|
+
| [`injectViewTypeSignal`](./docs/utils/inject-routing-signals.md) | function | 현재 뷰 타입 signal (`page \| modal \| control`) |
|
|
109
|
+
| [`useSelectionManager`](./docs/utils/selection-managers.md) | function | 선택 관리 composable (single/multi) |
|
|
110
|
+
| [`useSortingManager`](./docs/utils/selection-managers.md) | function | 정렬 관리 composable |
|
|
111
|
+
| [`useExpandingManager`](./docs/utils/selection-managers.md) | function | 트리 확장/축소 관리 composable |
|
|
112
|
+
| [`setupBgTheme`](./docs/utils/setup-functions.md) | function | body 배경 테마 색상 설정 |
|
|
113
|
+
| [`setupRipple`](./docs/utils/setup-functions.md) | function | 리플 효과 설정 |
|
|
114
|
+
| [`setupRevealOnShow`](./docs/utils/setup-functions.md) | function | 뷰포트 진입 시 reveal 애니메이션 설정 |
|
|
115
|
+
| [`setupInvalid`](./docs/utils/setup-functions.md) | function | 유효성 검증 표시기 설정 |
|
|
116
|
+
| [`setupModelHook`](./docs/utils/setup-functions.md) | function | model signal의 set을 가드 함수로 래핑 |
|
|
117
|
+
| [`setupCanDeactivate`](./docs/utils/setup-functions.md) | function | 모달/라우트 canDeactivate 설정 |
|
|
132
118
|
|
|
133
119
|
### Type Utilities
|
|
134
120
|
|
|
135
121
|
| API | Type | Description |
|
|
136
122
|
|-----|------|-------------|
|
|
137
|
-
| `DirectiveInputSignals` | type | InputSignal 프로퍼티에서 값 타입 추출 |
|
|
138
|
-
| `UndefToOptional` | type | undefined 포함 프로퍼티를 optional로 변환 |
|
|
139
|
-
| `WithOptional` | type | 특정 키를 optional로 변환 |
|
|
140
|
-
| `SdViewType` | type | 뷰 타입 (`"page" \| "modal" \| "control"`) |
|
|
141
|
-
| `SortingDef` | interface | 정렬 정의 (`key`, `desc`) |
|
|
142
|
-
| `ExpandItemDef` | interface | 트리 확장 항목 정의 |
|
|
143
|
-
| `SdSelectModal` | interface | 모달 선택 컴포넌트 인터페이스 |
|
|
144
|
-
| `SdSelectModalInfo` | type | 모달 선택 정보 타입 |
|
|
145
|
-
| `SdTextfieldTypes` | type | 텍스트필드 타입별 값 타입 매핑 |
|
|
146
|
-
| `sdTextfieldTypes` | const | 텍스트필드 타입 문자열 배열 |
|
|
147
|
-
| `SelectModeValue` | type | select mode별 value 타입 매핑 |
|
|
148
|
-
|
|
149
|
-
-> See [docs/type-utilities.md](./docs/type-utilities.md) for details.
|
|
123
|
+
| [`DirectiveInputSignals`](./docs/type-utilities/directive-input-signals.md) | type | InputSignal 프로퍼티에서 값 타입 추출 |
|
|
124
|
+
| [`UndefToOptional`](./docs/type-utilities/directive-input-signals.md) | type | undefined 포함 프로퍼티를 optional로 변환 |
|
|
125
|
+
| [`WithOptional`](./docs/type-utilities/directive-input-signals.md) | type | 특정 키를 optional로 변환 |
|
|
126
|
+
| [`SdViewType`](./docs/type-utilities/directive-input-signals.md) | type | 뷰 타입 (`"page" \| "modal" \| "control"`) |
|
|
127
|
+
| [`SortingDef`](./docs/type-utilities/directive-input-signals.md) | interface | 정렬 정의 (`key`, `desc`) |
|
|
128
|
+
| [`ExpandItemDef`](./docs/type-utilities/directive-input-signals.md) | interface | 트리 확장 항목 정의 |
|
|
129
|
+
| [`SdSelectModal`](./docs/type-utilities/directive-input-signals.md) | interface | 모달 선택 컴포넌트 인터페이스 |
|
|
130
|
+
| [`SdSelectModalInfo`](./docs/type-utilities/directive-input-signals.md) | type | 모달 선택 정보 타입 |
|
|
131
|
+
| [`SdTextfieldTypes`](./docs/type-utilities/directive-input-signals.md) | type | 텍스트필드 타입별 값 타입 매핑 |
|
|
132
|
+
| [`sdTextfieldTypes`](./docs/type-utilities/directive-input-signals.md) | const | 텍스트필드 타입 문자열 배열 |
|
|
133
|
+
| [`SelectModeValue`](./docs/type-utilities/directive-input-signals.md) | type | select mode별 value 타입 매핑 |
|
|
150
134
|
|
|
151
135
|
### Features
|
|
152
136
|
|
|
153
137
|
| API | Type | Description |
|
|
154
138
|
|-----|------|-------------|
|
|
155
|
-
| `SdAddressSearchModal` | component | Daum Postcode 주소 검색 모달 |
|
|
156
|
-
| `Address` | interface | 주소 검색 결과 |
|
|
157
|
-
| `SdPermissionTable` | component | 권한 매트릭스 테이블 (items, value) |
|
|
158
|
-
|
|
|
159
|
-
|
|
|
160
|
-
|
|
|
161
|
-
| `
|
|
162
|
-
| `SdSharedDataSelectButton` | component | 공유 데이터 모달 선택 버튼 (→ [recipes/data-select-button.md](./docs/recipes/data-select-button.md)) |
|
|
163
|
-
| `SdSharedDataSelectList` | component | 공유 데이터 목록형 선택 (selectedItem model) |
|
|
164
|
-
| `matchesSearchText` | function | 공백 구분 AND 조건 텍스트 검색 매칭 |
|
|
165
|
-
| `getOrmDataEditToastErrorMessage` | function | ORM 편집 에러 메시지 변환 (FK 위반 등 DB 에러를 한국어 메시지로) |
|
|
166
|
-
|
|
167
|
-
-> See [docs/features.md](./docs/features.md) for details.
|
|
139
|
+
| [`SdAddressSearchModal`](./docs/features/sd-address-search-modal.md) | component | Daum Postcode 주소 검색 모달 |
|
|
140
|
+
| [`Address`](./docs/features/sd-address-search-modal.md) | interface | 주소 검색 결과 |
|
|
141
|
+
| [`SdPermissionTable`](./docs/features/sd-permission-table.md) | component | 권한 매트릭스 테이블 (items, value) |
|
|
142
|
+
| [`SdSharedDataSelect`](./docs/features/sd-shared-data-components.md) | component | 공유 데이터 드롭다운 선택 |
|
|
143
|
+
| [`SdSharedDataSelectButton`](./docs/features/sd-shared-data-components.md) | component | 공유 데이터 모달 선택 버튼 |
|
|
144
|
+
| [`SdSharedDataSelectList`](./docs/features/sd-shared-data-components.md) | component | 공유 데이터 목록형 선택 (selectedItem model) |
|
|
145
|
+
| [`matchesSearchText`](./docs/features/sd-shared-data-components.md) | function | 공백 구분 AND 조건 텍스트 검색 매칭 |
|
|
168
146
|
|
|
169
147
|
### UI - Layout
|
|
170
148
|
|
|
171
149
|
| API | Type | Description |
|
|
172
150
|
|-----|------|-------------|
|
|
173
|
-
| `SdDockContainer` | component | 도킹 레이아웃 컨테이너 |
|
|
174
|
-
| `SdDock` | component | 도킹 영역 (top/bottom/left/right) |
|
|
175
|
-
| `SdGap` | component | 간격 (gap) 컴포넌트 |
|
|
176
|
-
| `SdKanbanBoard` | component | 칸반 보드 (드래그앤드롭, selectedValues) |
|
|
177
|
-
| `SdKanbanBoardDropInfo` | interface | 칸반 보드 드롭 이벤트 정보 |
|
|
178
|
-
| `SdKanbanDragRef` | interface | 칸반 드래그 참조 인터페이스 |
|
|
179
|
-
| `SdKanbanDropTarget` | interface | 칸반 드롭 타겟 인터페이스 |
|
|
180
|
-
| `SdKanban` | component | 칸반 아이템 |
|
|
181
|
-
| `SdKanbanLane` | component | 칸반 레인 |
|
|
182
|
-
|
|
183
|
-
-> See [docs/ui-layout.md](./docs/ui-layout.md) for details.
|
|
151
|
+
| [`SdDockContainer`](./docs/ui-layout/sd-dock-container.md) | component | 도킹 레이아웃 컨테이너 |
|
|
152
|
+
| [`SdDock`](./docs/ui-layout/sd-dock.md) | component | 도킹 영역 (top/bottom/left/right) |
|
|
153
|
+
| [`SdGap`](./docs/ui-layout/sd-gap.md) | component | 간격 (gap) 컴포넌트 |
|
|
154
|
+
| [`SdKanbanBoard`](./docs/ui-layout/sd-kanban-board.md) | component | 칸반 보드 (드래그앤드롭, selectedValues) |
|
|
155
|
+
| [`SdKanbanBoardDropInfo`](./docs/ui-layout/sd-kanban-board.md) | interface | 칸반 보드 드롭 이벤트 정보 |
|
|
156
|
+
| [`SdKanbanDragRef`](./docs/ui-layout/sd-kanban-board.md) | interface | 칸반 드래그 참조 인터페이스 |
|
|
157
|
+
| [`SdKanbanDropTarget`](./docs/ui-layout/sd-kanban-board.md) | interface | 칸반 드롭 타겟 인터페이스 |
|
|
158
|
+
| [`SdKanban`](./docs/ui-layout/sd-kanban.md) | component | 칸반 아이템 |
|
|
159
|
+
| [`SdKanbanLane`](./docs/ui-layout/sd-kanban-lane.md) | component | 칸반 레인 |
|
|
184
160
|
|
|
185
161
|
### UI - Form
|
|
186
162
|
|
|
187
163
|
| API | Type | Description |
|
|
188
164
|
|-----|------|-------------|
|
|
189
|
-
| `SdButton` | component | 버튼 |
|
|
190
|
-
| `SdAnchor` | component | 앵커 (인라인 버튼) |
|
|
191
|
-
| `SdAdditionalButton` | component | 추가 동작 버튼 (드롭다운 포함) |
|
|
192
|
-
| `SdModalSelectButton` | component | 모달 선택 버튼 |
|
|
193
|
-
| `SdTextfield` | component | 텍스트 입력 (13가지 타입: number, text, password, color, email, format, date, month, year, datetime, datetime-sec, time, time-sec) |
|
|
194
|
-
| `SdTextarea` | component | 멀티라인 텍스트 입력 |
|
|
195
|
-
| `SdNumpad` | component | 숫자 패드 |
|
|
196
|
-
| `SdRange` | component | 범위 슬라이더 |
|
|
197
|
-
| `SdDateRangePicker` | component | 날짜 범위 선택기 |
|
|
198
|
-
| `SdStatePreset` | component | 상태 프리셋 저장/불러오기 |
|
|
199
|
-
| `SdStatePresetDef` | interface | 상태 프리셋 데이터 (name, state) |
|
|
200
|
-
| `SdCheckbox` | component | 체크박스 |
|
|
201
|
-
| `SdSwitch` | component | 스위치 토글 |
|
|
202
|
-
| `SdCheckboxGroup` | component | 체크박스 그룹 |
|
|
203
|
-
| `SdCheckboxGroupItem` | component | 체크박스 그룹 항목 |
|
|
204
|
-
| `SdTiptapEditor` | component | TipTap 리치 텍스트 에디터 |
|
|
205
|
-
| `SdSelect` | component | 드롭다운 선택 (single/multi) |
|
|
206
|
-
| `SdSelectItem` | component | 드롭다운 선택 항목 |
|
|
207
|
-
| `SdSelectButton` | component | 버튼 스타일 선택 |
|
|
208
|
-
| `SdForm` | component | 폼 래퍼 (submit 이벤트, busy 관리) |
|
|
209
|
-
|
|
210
|
-
-> See [docs/ui-form.md](./docs/ui-form.md) for details.
|
|
165
|
+
| [`SdButton`](./docs/ui-form/sd-button.md) | component | 버튼 |
|
|
166
|
+
| [`SdAnchor`](./docs/ui-form/sd-anchor.md) | component | 앵커 (인라인 버튼) |
|
|
167
|
+
| [`SdAdditionalButton`](./docs/ui-form/sd-additional-button.md) | component | 추가 동작 버튼 (드롭다운 포함) |
|
|
168
|
+
| [`SdModalSelectButton`](./docs/ui-form/sd-modal-select-button.md) | component | 모달 선택 버튼 |
|
|
169
|
+
| [`SdTextfield`](./docs/ui-form/sd-textfield.md) | component | 텍스트 입력 (13가지 타입: number, text, password, color, email, format, date, month, year, datetime, datetime-sec, time, time-sec) |
|
|
170
|
+
| [`SdTextarea`](./docs/ui-form/sd-textarea.md) | component | 멀티라인 텍스트 입력 |
|
|
171
|
+
| [`SdNumpad`](./docs/ui-form/sd-numpad.md) | component | 숫자 패드 |
|
|
172
|
+
| [`SdRange`](./docs/ui-form/sd-range.md) | component | 범위 슬라이더 |
|
|
173
|
+
| [`SdDateRangePicker`](./docs/ui-form/sd-date-range-picker.md) | component | 날짜 범위 선택기 |
|
|
174
|
+
| [`SdStatePreset`](./docs/ui-form/sd-state-preset.md) | component | 상태 프리셋 저장/불러오기 |
|
|
175
|
+
| [`SdStatePresetDef`](./docs/ui-form/sd-state-preset.md) | interface | 상태 프리셋 데이터 (name, state) |
|
|
176
|
+
| [`SdCheckbox`](./docs/ui-form/sd-checkbox.md) | component | 체크박스 |
|
|
177
|
+
| [`SdSwitch`](./docs/ui-form/sd-switch.md) | component | 스위치 토글 |
|
|
178
|
+
| [`SdCheckboxGroup`](./docs/ui-form/sd-checkbox-group.md) | component | 체크박스 그룹 |
|
|
179
|
+
| [`SdCheckboxGroupItem`](./docs/ui-form/sd-checkbox-group.md) | component | 체크박스 그룹 항목 |
|
|
180
|
+
| [`SdTiptapEditor`](./docs/features/sd-tiptap-editor.md) | component | TipTap 리치 텍스트 에디터 |
|
|
181
|
+
| [`SdSelect`](./docs/ui-form/sd-select.md) | component | 드롭다운 선택 (single/multi) |
|
|
182
|
+
| [`SdSelectItem`](./docs/ui-form/sd-select.md) | component | 드롭다운 선택 항목 |
|
|
183
|
+
| [`SdSelectButton`](./docs/ui-form/sd-select.md) | component | 버튼 스타일 선택 |
|
|
184
|
+
| [`SdForm`](./docs/ui-form/sd-form.md) | component | 폼 래퍼 (submit 이벤트, busy 관리) |
|
|
211
185
|
|
|
212
186
|
### UI - Navigation
|
|
213
187
|
|
|
214
188
|
| API | Type | Description |
|
|
215
189
|
|-----|------|-------------|
|
|
216
|
-
| `SdCollapse` | component | 접기/펼치기 패널 |
|
|
217
|
-
| `SdCollapseIcon` | component | 접기/펼치기 아이콘 |
|
|
218
|
-
| `SdTab` | component | 탭 컨테이너 |
|
|
219
|
-
| `SdTabItem` | component | 탭 항목 |
|
|
220
|
-
| `SdPagination` | component | 페이지네이션 |
|
|
221
|
-
| `SdSidebarContainer` | component | 사이드바 컨테이너 |
|
|
222
|
-
| `SdSidebar` | component | 사이드바 |
|
|
223
|
-
| `SdSidebarMenu` | component | 사이드바 메뉴 |
|
|
224
|
-
| `SdSidebarUser` | component | 사이드바 사용자 영역 |
|
|
225
|
-
| `SdSidebarUserMenu` | interface | 사이드바 사용자 메뉴 항목 |
|
|
226
|
-
| `SdTopbarContainer` | component | 탑바 컨테이너 |
|
|
227
|
-
| `SdTopbar` | component | 탑바 |
|
|
228
|
-
| `SdTopbarMenu` | component | 탑바 메뉴 |
|
|
229
|
-
| `SdTopbarUser` | component | 탑바 사용자 영역 |
|
|
230
|
-
| `SdTopbarUserMenu` | interface | 탑바 사용자 메뉴 항목 |
|
|
231
|
-
| `getMenuRouterLinkOption` | function | 메뉴에서 라우터 링크 옵션 추출 |
|
|
232
|
-
| `getIsMenuSelected` | function | 메뉴 선택 여부 확인 |
|
|
233
|
-
|
|
234
|
-
-> See [docs/ui-navigation.md](./docs/ui-navigation.md) for details.
|
|
190
|
+
| [`SdCollapse`](./docs/ui-navigation/sd-collapse.md) | component | 접기/펼치기 패널 |
|
|
191
|
+
| [`SdCollapseIcon`](./docs/ui-navigation/sd-collapse.md) | component | 접기/펼치기 아이콘 |
|
|
192
|
+
| [`SdTab`](./docs/ui-navigation/sd-tab.md) | component | 탭 컨테이너 |
|
|
193
|
+
| [`SdTabItem`](./docs/ui-navigation/sd-tab.md) | component | 탭 항목 |
|
|
194
|
+
| [`SdPagination`](./docs/ui-navigation/sd-pagination.md) | component | 페이지네이션 |
|
|
195
|
+
| [`SdSidebarContainer`](./docs/ui-navigation/sd-sidebar-container.md) | component | 사이드바 컨테이너 |
|
|
196
|
+
| [`SdSidebar`](./docs/ui-navigation/sd-sidebar-container.md) | component | 사이드바 |
|
|
197
|
+
| [`SdSidebarMenu`](./docs/ui-navigation/sd-sidebar-menu.md) | component | 사이드바 메뉴 |
|
|
198
|
+
| [`SdSidebarUser`](./docs/ui-navigation/sd-sidebar-user.md) | component | 사이드바 사용자 영역 |
|
|
199
|
+
| [`SdSidebarUserMenu`](./docs/ui-navigation/sd-sidebar-user.md) | interface | 사이드바 사용자 메뉴 항목 |
|
|
200
|
+
| [`SdTopbarContainer`](./docs/ui-navigation/sd-topbar-container.md) | component | 탑바 컨테이너 |
|
|
201
|
+
| [`SdTopbar`](./docs/ui-navigation/sd-topbar.md) | component | 탑바 |
|
|
202
|
+
| [`SdTopbarMenu`](./docs/ui-navigation/sd-topbar-menu.md) | component | 탑바 메뉴 |
|
|
203
|
+
| [`SdTopbarUser`](./docs/ui-navigation/sd-topbar-user.md) | component | 탑바 사용자 영역 |
|
|
204
|
+
| [`SdTopbarUserMenu`](./docs/ui-navigation/sd-topbar-user.md) | interface | 탑바 사용자 메뉴 항목 |
|
|
205
|
+
| [`getMenuRouterLinkOption`](./docs/ui-navigation/sd-sidebar-menu.md) | function | 메뉴에서 라우터 링크 옵션 추출 |
|
|
206
|
+
| [`getIsMenuSelected`](./docs/ui-navigation/sd-sidebar-menu.md) | function | 메뉴 선택 여부 확인 |
|
|
235
207
|
|
|
236
208
|
### UI - Data
|
|
237
209
|
|
|
238
210
|
| API | Type | Description |
|
|
239
211
|
|-----|------|-------------|
|
|
240
|
-
| `SdList` | component | 리스트 |
|
|
241
|
-
| `SdListItem` | component | 리스트 항목 |
|
|
242
|
-
| `SdSheet` | component | 스프레드시트 (정렬, 고정, 리사이즈). `key`로 설정 저장 |
|
|
243
|
-
| `SdSheetColumn` | directive | 시트 컬럼 정의 (헤더, 너비, 고정, 정렬 등) |
|
|
244
|
-
| `SdSheetColumnCellTemplate` | directive | 시트 컬럼 셀 내용 정의 (`ng-template[cell]`), `SdSheetCellContext` 타입 가드 제공 |
|
|
245
|
-
| `SdSheetCellContext` | interface | 시트 셀 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`, `edit`) |
|
|
246
|
-
| `SdSheetConfigModal` | component | 시트 설정 모달 |
|
|
247
|
-
| `SdSheetColumnDef` | interface | 시트 컬럼 정의 데이터 |
|
|
248
|
-
| `SdSheetConfig` | interface | 시트 설정 데이터 |
|
|
249
|
-
| `SdSheetHeaderDef` | interface | 시트 헤더 정의 |
|
|
250
|
-
| `SdSheetItemKeydownEventParam` | interface | 시트 항목 keydown 이벤트 파라미터 |
|
|
251
|
-
| `SdSheetCellKeydownEventParam` | interface | 시트 셀 keydown 이벤트 파라미터 |
|
|
252
|
-
|
|
253
|
-
-> See [docs/ui-data.md](./docs/ui-data.md) for details.
|
|
212
|
+
| [`SdList`](./docs/ui-data/sd-list.md) | component | 리스트 |
|
|
213
|
+
| [`SdListItem`](./docs/ui-data/sd-list.md) | component | 리스트 항목 |
|
|
214
|
+
| [`SdSheet`](./docs/ui-data/sd-sheet.md) | component | 스프레드시트 (정렬, 고정, 리사이즈). `key`로 설정 저장 |
|
|
215
|
+
| [`SdSheetColumn`](./docs/ui-data/sd-sheet.md) | directive | 시트 컬럼 정의 (헤더, 너비, 고정, 정렬 등) |
|
|
216
|
+
| [`SdSheetColumnCellTemplate`](./docs/ui-data/sd-sheet.md) | directive | 시트 컬럼 셀 내용 정의 (`ng-template[cell]`), `SdSheetCellContext` 타입 가드 제공 |
|
|
217
|
+
| [`SdSheetCellContext`](./docs/ui-data/sd-sheet.md) | interface | 시트 셀 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`, `edit`) |
|
|
218
|
+
| [`SdSheetConfigModal`](./docs/ui-data/sd-sheet.md) | component | 시트 설정 모달 |
|
|
219
|
+
| [`SdSheetColumnDef`](./docs/ui-data/sd-sheet.md) | interface | 시트 컬럼 정의 데이터 |
|
|
220
|
+
| [`SdSheetConfig`](./docs/ui-data/sd-sheet.md) | interface | 시트 설정 데이터 |
|
|
221
|
+
| [`SdSheetHeaderDef`](./docs/ui-data/sd-sheet.md) | interface | 시트 헤더 정의 |
|
|
222
|
+
| [`SdSheetItemKeydownEventParam`](./docs/ui-data/sd-sheet.md) | interface | 시트 항목 keydown 이벤트 파라미터 |
|
|
223
|
+
| [`SdSheetCellKeydownEventParam`](./docs/ui-data/sd-sheet.md) | interface | 시트 셀 keydown 이벤트 파라미터 |
|
|
254
224
|
|
|
255
225
|
### UI - Visual
|
|
256
226
|
|
|
257
227
|
| API | Type | Description |
|
|
258
228
|
|-----|------|-------------|
|
|
259
|
-
| `SdLabel` | component | 라벨 (테마, 크기) |
|
|
260
|
-
| `SdNote` | component | 노트/알림 메시지 |
|
|
261
|
-
| `SdProgress` | component | 진행률 바 |
|
|
262
|
-
| `SdCalendar` | component | 캘린더 |
|
|
263
|
-
| `SdBarcode` | component | 바코드 생성 (bwip-js) |
|
|
264
|
-
| `SdEcharts` | component | ECharts 차트 래퍼 |
|
|
265
|
-
| `BarcodeType` | type | 바코드 타입 |
|
|
266
|
-
|
|
267
|
-
-> See [docs/ui-visual.md](./docs/ui-visual.md) for details.
|
|
229
|
+
| [`SdLabel`](./docs/ui-visual/sd-label.md) | component | 라벨 (테마, 크기) |
|
|
230
|
+
| [`SdNote`](./docs/ui-visual/sd-note.md) | component | 노트/알림 메시지 |
|
|
231
|
+
| [`SdProgress`](./docs/ui-visual/sd-progress.md) | component | 진행률 바 |
|
|
232
|
+
| [`SdCalendar`](./docs/ui-visual/sd-calendar.md) | component | 캘린더 |
|
|
233
|
+
| [`SdBarcode`](./docs/ui-visual/sd-barcode.md) | component | 바코드 생성 (bwip-js) |
|
|
234
|
+
| [`SdEcharts`](./docs/ui-visual/sd-echarts.md) | component | ECharts 차트 래퍼 |
|
|
235
|
+
| [`BarcodeType`](./docs/ui-visual/sd-barcode.md) | type | 바코드 타입 |
|
|
268
236
|
|
|
269
237
|
### UI - Overlay
|
|
270
238
|
|
|
271
239
|
| API | Type | Description |
|
|
272
240
|
|-----|------|-------------|
|
|
273
|
-
| `SdDropdown` | component | 드롭다운 트리거 |
|
|
274
|
-
| `SdDropdownPopup` | component | 드롭다운 팝업 |
|
|
275
|
-
| `SdModal` | component | 모달 래퍼 컴포넌트 |
|
|
276
|
-
| `SdPromptModal` | component | 프롬프트 입력 모달 |
|
|
277
|
-
| `SdConfirmModal` | component | 확인/취소 모달 |
|
|
278
|
-
| `SdToast` | component | 토스트 개별 항목 |
|
|
279
|
-
| `SdToastContainer` | component | 토스트 컨테이너 |
|
|
280
|
-
| `SdBusyContainer` | component | busy 표시 컨테이너 |
|
|
281
|
-
|
|
282
|
-
|
|
241
|
+
| [`SdDropdown`](./docs/ui-overlay/sd-dropdown.md) | component | 드롭다운 트리거 |
|
|
242
|
+
| [`SdDropdownPopup`](./docs/ui-overlay/sd-dropdown.md) | component | 드롭다운 팝업 |
|
|
243
|
+
| [`SdModal`](./docs/ui-overlay/sd-modal.md) | component | 모달 래퍼 컴포넌트 |
|
|
244
|
+
| [`SdPromptModal`](./docs/ui-overlay/sd-prompt-modal.md) | component | 프롬프트 입력 모달 |
|
|
245
|
+
| [`SdConfirmModal`](./docs/ui-overlay/sd-confirm-modal.md) | component | 확인/취소 모달 |
|
|
246
|
+
| [`SdToast`](./docs/ui-overlay/sd-toast.md) | component | 토스트 개별 항목 |
|
|
247
|
+
| [`SdToastContainer`](./docs/ui-overlay/sd-toast.md) | component | 토스트 컨테이너 |
|
|
248
|
+
| [`SdBusyContainer`](./docs/ui-overlay/sd-busy-container.md) | component | busy 표시 컨테이너 |
|
|
249
|
+
|
|
250
|
+
### Recipes
|
|
251
|
+
|
|
252
|
+
화면 조립 레시피. "무엇을 만들고 싶은가" 기준으로 진입한다.
|
|
253
|
+
|
|
254
|
+
| Recipe | Description |
|
|
255
|
+
|--------|-------------|
|
|
256
|
+
| [페이지/모달 컨테이너](./docs/recipes/page-modal-container.md) | `<sd-busy-container>` · `<sd-topbar-container>` · `<sd-topbar>` 직접 조립으로 page/modal/control 뷰 재사용 |
|
|
257
|
+
| [CRUD 리스트](./docs/recipes/crud-list.md) | 조회 전용 page → 인라인 편집 → 선택 모달 → 엑셀 내보내기까지 누적 확장 |
|
|
258
|
+
| [CRUD 상세폼](./docs/recipes/crud-detail.md) | 읽기 전용 상세 → 편집/저장 → 삭제/복원 → modal/control 뷰까지 누적 확장 |
|
|
259
|
+
| [모달 선택 버튼](./docs/recipes/data-select-button.md) | `<sd-modal-select-button>` 직접 사용 / `<sd-shared-data-select-button>` / 사용자 정의 wrapper |
|
|
283
260
|
|
|
284
261
|
### Styling
|
|
285
262
|
|
|
286
|
-
|
|
|
287
|
-
|
|
288
|
-
|
|
|
289
|
-
|
|
|
290
|
-
|
|
|
291
|
-
|
|
|
292
|
-
| `.table` | CSS class | 테이블 스타일 |
|
|
293
|
-
| `.p-*`, `.m-*`, `.gap-*` 등 | CSS class | 간격 유틸리티 |
|
|
294
|
-
| `--theme-*-*` | CSS custom property | OKLCH 색상 팔레트 (17+5색 x 7단계) |
|
|
295
|
-
| `.sd-theme-dark` | theme class | 다크 모드 테마 |
|
|
296
|
-
|
|
297
|
-
-> See [docs/styling.md](./docs/styling.md) for details.
|
|
263
|
+
| Entry | Description |
|
|
264
|
+
|-------|-------------|
|
|
265
|
+
| [CSS Classes](./docs/styling/classes.md) | 레이아웃, 유틸리티, 폼, 테이블 클래스 |
|
|
266
|
+
| [CSS Custom Properties](./docs/styling/variables.md) | OKLCH 색상 팔레트, 간격, 폰트, 레이아웃 변수 |
|
|
267
|
+
| [Themes](./docs/styling/themes.md) | 다크 모드 테마 클래스 |
|
|
268
|
+
| [Mixins / Functions](./docs/styling/mixins.md) | 공개 SCSS mixin/function |
|
|
298
269
|
|
|
299
270
|
## 컴포넌트 비동기 초기화 규칙
|
|
300
271
|
|
|
301
|
-
컴포넌트에서 비동기 초기화가 필요한 경우 `async
|
|
272
|
+
컴포넌트에서 비동기 초기화가 필요한 경우 constructor `effect()` + `void untracked(async () => ...)` 패턴을 사용한다. signal 의존성을 `effect` 콜백의 동기 부분에서 읽어 등록하고, 비동기 작업은 `untracked` 안에서 수행한다. 의존 signal이 변경되면 effect가 자동 재실행된다.
|
|
302
273
|
|
|
303
274
|
```typescript
|
|
304
|
-
export class SomePage
|
|
275
|
+
export class SomePage {
|
|
305
276
|
busyCount = signal(0);
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
//
|
|
277
|
+
initialized = signal(false);
|
|
278
|
+
|
|
279
|
+
constructor() {
|
|
280
|
+
effect(() => {
|
|
281
|
+
// signal 의존성 등록 (untracked 바깥)
|
|
282
|
+
this.someInput();
|
|
283
|
+
this.lastFilter();
|
|
284
|
+
|
|
285
|
+
void untracked(async () => {
|
|
286
|
+
this.busyCount.update((v) => v + 1);
|
|
287
|
+
await this._sdToast.try(async () => {
|
|
288
|
+
// 비동기 초기화 로직
|
|
289
|
+
});
|
|
290
|
+
this.busyCount.update((v) => v - 1);
|
|
291
|
+
this.initialized.set(true);
|
|
292
|
+
});
|
|
311
293
|
});
|
|
312
|
-
this.busyCount.update((v) => v - 1);
|
|
313
294
|
}
|
|
314
295
|
}
|
|
315
296
|
```
|
|
316
297
|
|
|
317
298
|
- constructor 내 `void (async () => { ... })()` IIFE 패턴 **금지**
|
|
318
|
-
- constructor 내 `void this._init()` 같은 수동 호출 패턴 **금지** —
|
|
299
|
+
- constructor 내 `void this._init()` 같은 수동 호출 패턴 **금지** — effect가 이미 같은 역할
|
|
300
|
+
- `async ngOnInit()` 패턴 **금지** — 1회만 실행되어 input signal 변경에 반응하지 않는다. effect는 의존 signal 변경 시 자동 재실행된다
|
|
319
301
|
- `resource()` / `httpResource()`는 데이터 로딩 → signal 매핑 용도. 사이드이펙트(라우팅, toast 등) 포함 초기화에는 사용하지 않는다
|
|
320
302
|
|
|
321
303
|
## 소비 프로젝트 네이밍 규칙
|
|
322
304
|
|
|
323
|
-
`@simplysm/angular`를 소비하는 앱 프로젝트에서의
|
|
305
|
+
`@simplysm/angular`를 소비하는 앱 프로젝트에서의 파일명·클래스명·selector 규칙이다.
|
|
324
306
|
파일명은 **kebab-case + dot-suffix**, 클래스명은 **PascalCase**를 따른다.
|
|
325
307
|
|
|
326
|
-
| 접미어 | 조건 | 파일명 예시 | 클래스명 예시 |
|
|
327
|
-
|
|
328
|
-
| `.
|
|
329
|
-
| `.detail.ts` / `*Detail` |
|
|
330
|
-
| `.view.ts` / `*View` |
|
|
331
|
-
| `.modal.ts` / `*Modal` | 모달 전용 컴포넌트 | `item-select.modal.ts` | `ItemSelectModal` |
|
|
332
|
-
| `.
|
|
333
|
-
|
|
|
308
|
+
| 접미어 | 조건 | 파일명 예시 | 클래스명 예시 | selector 예시 |
|
|
309
|
+
|--------|------|-------------|---------------|---------------|
|
|
310
|
+
| `.list.ts` / `*List` | 여러 레코드를 조회·관리하는 화면 ([recipes/crud-list.md](./docs/recipes/crud-list.md)) | `outbound-instruction.list.ts` | `OutboundInstructionList` | `app-outbound-instruction-list` |
|
|
311
|
+
| `.detail.ts` / `*Detail` | 단일 레코드를 조회·편집하는 화면 ([recipes/crud-detail.md](./docs/recipes/crud-detail.md)) | `outbound-instruction.detail.ts` | `OutboundInstructionDetail` | `app-outbound-instruction-detail` |
|
|
312
|
+
| `.view.ts` / `*View` | list/detail 아닌 route 연결 화면 (대시보드, 설정 등) | `dashboard.view.ts` | `DashboardView` | `app-dashboard-view` |
|
|
313
|
+
| `.modal.ts` / `*Modal` | 모달 전용 컴포넌트 (route 없이 `SdModalProvider.showAsync`로만 열림) | `item-select.modal.ts` | `ItemSelectModal` | `app-item-select-modal` |
|
|
314
|
+
| `.print-template.ts` / `*PrintTemplate` | 인쇄 전용 컴포넌트 (`SdPrintProvider`로 호출, `SdPrint` 구현) | `box-label.print-template.ts` | `BoxLabelPrintTemplate` | `app-box-label-print-template` |
|
|
315
|
+
| `.provider.ts` / `*Provider` | `@Injectable` 클래스 (**`*Service` 금지**) | `app-service.provider.ts` | `AppServiceProvider` | — |
|
|
316
|
+
| 접미어 없음 | route 미연결 일반 컨트롤 컴포넌트 | `instruction-item.ts` | `InstructionItem` | `app-instruction-item` |
|
|
334
317
|
|
|
335
318
|
- `pipe`, `directive` 등 기타 Angular 구성요소는 `@simplysm/angular` 패키지 자체의 네이밍 패턴(`.pipe.ts`, `.directive.ts`)을 따른다
|
|
319
|
+
- route 화면이 모달로도 재사용되는 경우(예: 선택 모달 겸용 리스트) **주 용도(route)의 suffix**를 유지한다 (예: `CustomerList` + `implements SdSelectModal`)
|
|
320
|
+
|
|
321
|
+
### selector 규칙
|
|
322
|
+
|
|
323
|
+
selector는 `app-{도메인}-{suffix}` 형식이다. 같은 도메인에 list와 detail이 공존할 수 있으므로 suffix를 반드시 포함한다.
|
|
324
|
+
|
|
325
|
+
| 클래스명 | selector |
|
|
326
|
+
|----------|----------|
|
|
327
|
+
| `CustomerList` | `app-customer-list` |
|
|
328
|
+
| `CustomerDetail` | `app-customer-detail` |
|
|
329
|
+
| `DashboardView` | `app-dashboard-view` |
|
|
330
|
+
| `ItemSelectModal` | `app-item-select-modal` |
|
|
331
|
+
|
|
332
|
+
### interface 네이밍
|
|
333
|
+
|
|
334
|
+
소비앱 내부의 로컬 interface에는 **`I` prefix**를 사용한다. 라이브러리에서 import하는 타입(`SortingDef`, `SharedDataBase` 등)에는 붙이지 않는다.
|
|
335
|
+
|
|
336
|
+
```typescript
|
|
337
|
+
// 소비앱 로컬 interface — I prefix 사용
|
|
338
|
+
interface IFilter { searchText?: string; }
|
|
339
|
+
interface ICustomer { id: number; name: string; }
|
|
340
|
+
|
|
341
|
+
// 라이브러리 타입 — 그대로 사용
|
|
342
|
+
import type { SortingDef, SharedDataBase } from "@simplysm/angular";
|
|
343
|
+
```
|
|
336
344
|
|
|
337
345
|
## 소비 프로젝트 디렉토리 구조
|
|
338
346
|
|
|
@@ -344,8 +352,8 @@ src/
|
|
|
344
352
|
│ ├── {메뉴-그룹}/ # 사이드바 메뉴 그룹
|
|
345
353
|
│ │ └── {도메인}/ # 개별 도메인 (트리 깊이 제한 없음)
|
|
346
354
|
│ │ ├── {도메인}.view.ts # route 연결 병합 컴포넌트
|
|
347
|
-
│ │ ├── {도메인}.
|
|
348
|
-
│ │ ├── {도메인}.detail.ts #
|
|
355
|
+
│ │ ├── {도메인}.list.ts # 여러 레코드 조회·관리 (recipes/crud-list.md)
|
|
356
|
+
│ │ ├── {도메인}.detail.ts # 단일 레코드 조회·편집 (recipes/crud-detail.md)
|
|
349
357
|
│ │ ├── {이름}.modal.ts # 도메인 전용 모달
|
|
350
358
|
│ │ └── {이름}.ts # 일반 컨트롤 (route 미연결)
|
|
351
359
|
│ └── main/
|
|
@@ -198,11 +198,11 @@ export class SdSelect {
|
|
|
198
198
|
const items = this._itemControls();
|
|
199
199
|
const currentValue = this.value();
|
|
200
200
|
if (this.selectMode() === "multi") {
|
|
201
|
-
|
|
202
|
-
if (arr == null || arr.length === 0) {
|
|
201
|
+
if (!Array.isArray(currentValue) || currentValue.length === 0) {
|
|
203
202
|
this._selectedItemContentHTML.set(undefined);
|
|
204
203
|
return;
|
|
205
204
|
}
|
|
205
|
+
const arr = currentValue;
|
|
206
206
|
const selectedItems = untracked(() => items.filter((item) => arr.includes(item.value())));
|
|
207
207
|
const isVertical = this.multiSelectionDisplayDirection() === "vertical";
|
|
208
208
|
const separator = isVertical ? "<div class='p-sm-0'></div>" : ", ";
|
|
@@ -251,7 +251,7 @@ export class SdSelect {
|
|
|
251
251
|
}
|
|
252
252
|
else {
|
|
253
253
|
this.value.update((v) => {
|
|
254
|
-
const arr = v
|
|
254
|
+
const arr = Array.isArray(v) ? v : [];
|
|
255
255
|
if (arr.includes(itemValue)) {
|
|
256
256
|
return arr.filter((item) => item !== itemValue);
|
|
257
257
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -97,7 +97,6 @@ export { SdSheetColumn, type SdSheetCellContext } from "./data/sheet/sd-sheet-co
|
|
|
97
97
|
export { SdSheetColumnCellTemplate } from "./data/sheet/sd-sheet-column-cell-template";
|
|
98
98
|
export { SdSheetConfigModal } from "./data/sheet/sd-sheet-config.modal";
|
|
99
99
|
export type { SdSheetColumnDef, SdSheetConfig, SdSheetHeaderDef, SdSheetItemKeydownEventParam, SdSheetCellKeydownEventParam, } from "./data/sheet/types";
|
|
100
|
-
export { getOrmDataEditToastErrorMessage } from "./data/getOrmDataEditToastErrorMessage";
|
|
101
100
|
export { SdSharedDataSelect } from "./data/shared-data/sd-shared-data-select";
|
|
102
101
|
export { SdSharedDataSelectButton } from "./data/shared-data/sd-shared-data-select-button";
|
|
103
102
|
export { SdSharedDataSelectList } from "./data/shared-data/sd-shared-data-select-list";
|