@simplysm/sd-claude 14.0.82 → 14.0.84
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/claude/references/sd-requirement-source-handling.md +20 -20
- package/claude/references/sd-simplysm14/README.md +13 -13
- package/claude/references/sd-simplysm14/manuals/client-component.md +92 -92
- package/claude/references/sd-simplysm14/manuals/client-crud.md +11 -11
- package/claude/references/sd-simplysm14/manuals/client-demo.md +28 -28
- package/claude/references/sd-simplysm14/manuals/client-rules.md +1 -1
- package/claude/references/sd-simplysm14/manuals/client-setup.md +21 -21
- package/claude/references/sd-simplysm14/manuals/client-tab.md +3 -3
- package/claude/references/sd-simplysm14/manuals/logging.md +15 -15
- package/claude/references/sd-simplysm14/manuals/orm-union.md +6 -6
- package/claude/references/sd-simplysm14/manuals/orm.md +19 -19
- package/claude/references/sd-simplysm14/manuals/test.md +33 -33
- package/claude/rules/sd-design-rules.md +18 -18
- package/claude/sd-system-prompt.md +369 -0
- package/claude/skills/sd-commit/SKILL.md +10 -10
- package/claude/skills/sd-config/SKILL.md +2 -2
- package/claude/skills/sd-demo/SKILL.md +45 -45
- package/claude/skills/sd-dev/SKILL.md +15 -15
- package/claude/skills/sd-docs/SKILL.md +7 -7
- package/claude/skills/sd-docs/references/subagent-prompt.md +33 -33
- package/claude/skills/sd-impl/SKILL.md +60 -60
- package/claude/skills/sd-review/SKILL.md +9 -9
- package/claude/skills/sd-skill/SKILL.md +74 -74
- package/claude/skills/sd-skill/evals/fixtures/existing-skill/.claude/skills/todo-format/SKILL.md +1 -1
- package/claude/skills/sd-spec/SKILL.md +354 -319
- package/claude/skills/sd-spec/references/example-spec.md +104 -104
- package/claude/skills/sd-unpack/SKILL.md +34 -34
- package/claude/skills/sd-unpack/scripts/handlers/__pycache__/office_com.cpython-314.pyc +0 -0
- package/claude/skills/sd-unpack/scripts/handlers/office_com.py +234 -159
- package/claude/skills/sd-use/SKILL.md +4 -4
- package/package.json +1 -1
- package/claude/references/sd-simplysm14/apis/angular/README.md +0 -37
- package/claude/references/sd-simplysm14/apis/angular/app-structure.md +0 -92
- package/claude/references/sd-simplysm14/apis/angular/buttons.md +0 -88
- package/claude/references/sd-simplysm14/apis/angular/crud.md +0 -100
- package/claude/references/sd-simplysm14/apis/angular/forms.md +0 -200
- package/claude/references/sd-simplysm14/apis/angular/infrastructure.md +0 -231
- package/claude/references/sd-simplysm14/apis/angular/kanban.md +0 -80
- package/claude/references/sd-simplysm14/apis/angular/layout.md +0 -92
- package/claude/references/sd-simplysm14/apis/angular/modal.md +0 -115
- package/claude/references/sd-simplysm14/apis/angular/routing.md +0 -107
- package/claude/references/sd-simplysm14/apis/angular/select-dropdown.md +0 -35
- package/claude/references/sd-simplysm14/apis/angular/selection-managers.md +0 -82
- package/claude/references/sd-simplysm14/apis/angular/shared-data.md +0 -134
- package/claude/references/sd-simplysm14/apis/angular/sheet.md +0 -127
- package/claude/references/sd-simplysm14/apis/angular/toast.md +0 -97
- package/claude/references/sd-simplysm14/apis/angular/visual.md +0 -167
- package/claude/references/sd-simplysm14/apis/capacitor-plugin-auto-update/README.md +0 -79
- package/claude/references/sd-simplysm14/apis/capacitor-plugin-file-system/README.md +0 -83
- package/claude/references/sd-simplysm14/apis/capacitor-plugin-intent/README.md +0 -91
- package/claude/references/sd-simplysm14/apis/capacitor-plugin-usb-storage/README.md +0 -49
- package/claude/references/sd-simplysm14/apis/core-browser/README.md +0 -143
- package/claude/references/sd-simplysm14/apis/core-common/README.md +0 -58
- package/claude/references/sd-simplysm14/apis/core-common/extensions.md +0 -88
- package/claude/references/sd-simplysm14/apis/core-common/features.md +0 -51
- package/claude/references/sd-simplysm14/apis/core-common/types.md +0 -88
- package/claude/references/sd-simplysm14/apis/core-common/utils.md +0 -189
- package/claude/references/sd-simplysm14/apis/core-node/README.md +0 -12
- package/claude/references/sd-simplysm14/apis/core-node/consola.md +0 -59
- package/claude/references/sd-simplysm14/apis/core-node/cpx.md +0 -44
- package/claude/references/sd-simplysm14/apis/core-node/fs-watcher.md +0 -42
- package/claude/references/sd-simplysm14/apis/core-node/fsx.md +0 -53
- package/claude/references/sd-simplysm14/apis/core-node/pathx.md +0 -24
- package/claude/references/sd-simplysm14/apis/core-node/worker.md +0 -65
- package/claude/references/sd-simplysm14/apis/excel/README.md +0 -193
- package/claude/references/sd-simplysm14/apis/lint/README.md +0 -94
- package/claude/references/sd-simplysm14/apis/orm-common/README.md +0 -58
- package/claude/references/sd-simplysm14/apis/orm-common/db-context.md +0 -77
- package/claude/references/sd-simplysm14/apis/orm-common/executable.md +0 -20
- package/claude/references/sd-simplysm14/apis/orm-common/expr.md +0 -92
- package/claude/references/sd-simplysm14/apis/orm-common/queryable.md +0 -98
- package/claude/references/sd-simplysm14/apis/orm-common/schema-builders.md +0 -128
- package/claude/references/sd-simplysm14/apis/orm-node/README.md +0 -69
- package/claude/references/sd-simplysm14/apis/sd-claude/README.md +0 -32
- package/claude/references/sd-simplysm14/apis/sd-cli/README.md +0 -80
- package/claude/references/sd-simplysm14/apis/sd-cli/sd-config.md +0 -155
- package/claude/references/sd-simplysm14/apis/service-client/README.md +0 -131
- package/claude/references/sd-simplysm14/apis/service-common/README.md +0 -29
- package/claude/references/sd-simplysm14/apis/service-common/app-structure.md +0 -63
- package/claude/references/sd-simplysm14/apis/service-common/messages.md +0 -56
- package/claude/references/sd-simplysm14/apis/service-common/protocol.md +0 -64
- package/claude/references/sd-simplysm14/apis/service-common/service-types.md +0 -43
- package/claude/references/sd-simplysm14/apis/service-server/README.md +0 -13
- package/claude/references/sd-simplysm14/apis/service-server/auth.md +0 -39
- package/claude/references/sd-simplysm14/apis/service-server/builtin-services.md +0 -71
- package/claude/references/sd-simplysm14/apis/service-server/define-service.md +0 -55
- package/claude/references/sd-simplysm14/apis/service-server/internals.md +0 -82
- package/claude/references/sd-simplysm14/apis/service-server/server.md +0 -57
- package/claude/references/sd-simplysm14/apis/storage/README.md +0 -71
- package/claude/rules/sd-base-rules.md +0 -306
|
@@ -1,231 +0,0 @@
|
|
|
1
|
-
# @simplysm/angular — infrastructure
|
|
2
|
-
|
|
3
|
-
앱 인프라 프로바이더·DOM 이벤트/효과 디렉티브·유틸 함수·타입 헬퍼. 전부 standalone, root 제공자거나 함수.
|
|
4
|
-
|
|
5
|
-
## 설정·저장 프로바이더
|
|
6
|
-
|
|
7
|
-
### SdSystemLogProvider (root)
|
|
8
|
-
|
|
9
|
-
```ts
|
|
10
|
-
writeFn?: (severity, ...data) => Promise<void>|void;
|
|
11
|
-
writeAsync(severity: "error"|"warn"|"log", ...data): Promise<void>;
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
- consola 태그(`angular:system-log`)로 로컬 로그. `writeFn` 세팅 시 서버 등으로 추가 전송. 전송 실패는 로컬 error 만 남기고 throw 안 함.
|
|
15
|
-
|
|
16
|
-
### SdLocalStorageProvider<T> (root)
|
|
17
|
-
|
|
18
|
-
```ts
|
|
19
|
-
set<K>(key: K, value: T[K]); get<K>(key: K): T[K]|undefined; remove(key: K);
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
- 키 prefix = `clientName` (`SdAngularConfigProvider`). JSON 직렬화. 파싱 실패 시 undefined.
|
|
23
|
-
|
|
24
|
-
### SdSystemConfigProvider<T> (root)
|
|
25
|
-
|
|
26
|
-
```ts
|
|
27
|
-
fn?: { set<K>(key, data): Promise<void>|void; get(key): PromiseLike<any> };
|
|
28
|
-
setAsync<K>(key, data): Promise<void>;
|
|
29
|
-
getAsync(key): Promise<...>;
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
- `fn` 미세팅이면 `SdLocalStorageProvider` 위임. `fn` 세팅 시 서버 영구 저장으로 전환. 모달 사이즈·시트 컬럼 설정·프리셋이 이걸 통함.
|
|
33
|
-
|
|
34
|
-
### injectSdSystemConfigResource<T>
|
|
35
|
-
|
|
36
|
-
```ts
|
|
37
|
-
function injectSdSystemConfigResource<T>(options: { key: Signal<string|undefined> }): {
|
|
38
|
-
value: Signal<T|undefined>; isLoading: Signal<boolean>;
|
|
39
|
-
status; hasValue(); reload();
|
|
40
|
-
set(value: T|undefined): void;
|
|
41
|
-
update(fn: (prev: T|undefined) => T|undefined): void;
|
|
42
|
-
};
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
- 컴포넌트의 element tag + key signal 조합으로 `SdSystemConfigProvider` 값 resource 화. `set`/`update` 시 microtask 로 server 저장(에러는 `ErrorHandler.handleError`).
|
|
46
|
-
|
|
47
|
-
## 서비스 클라이언트
|
|
48
|
-
|
|
49
|
-
### SdServiceClientFactoryProvider (root)
|
|
50
|
-
|
|
51
|
-
```ts
|
|
52
|
-
connectAsync(key: string, options?: Partial<ServiceConnectionOptions>): Promise<void>;
|
|
53
|
-
closeAsync(key: string): Promise<void>;
|
|
54
|
-
get(key: string): ServiceClient;
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
- key 별 `ServiceClient` 풀. `connectAsync` 시 기본 host/port 는 현재 `location` 기준(https 면 443, http 면 80). request/response progress 시 자동으로 `SdToastProvider.info(..., true)` progress 토스트.
|
|
58
|
-
- 중복 connect 또는 closed key 재사용은 throw. destroy 시 모든 클라이언트 close.
|
|
59
|
-
|
|
60
|
-
## 파일·에러·테마
|
|
61
|
-
|
|
62
|
-
### SdFileDialogProvider (root)
|
|
63
|
-
|
|
64
|
-
```ts
|
|
65
|
-
showAsync(multiple?: false, accept?: string): Promise<File|undefined>;
|
|
66
|
-
showAsync(multiple: true, accept?: string): Promise<File[]|undefined>;
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
- `<input type="file">` 동적 생성 → click → 선택 후 결과. 취소 시 undefined.
|
|
70
|
-
- `accept` — MIME/확장자(`"image/*"`·`".pdf,.docx"`).
|
|
71
|
-
|
|
72
|
-
### SdGlobalErrorHandlerPlugin (Angular `ErrorHandler` 교체용)
|
|
73
|
-
|
|
74
|
-
- `provideSdAngular` 가 자동 등록. 직접 등록 안 해도 됨.
|
|
75
|
-
- `PromiseRejectionEvent`/`ErrorEvent`/`Error`/임의 값 분류해 `SdSystemLogProvider.writeAsync('error', ...)` + 전체 화면 에러 오버레이 표시 + Angular `ApplicationRef.destroy()`. 오버레이 클릭 → 홈으로 reload.
|
|
76
|
-
|
|
77
|
-
### SdThemeProvider (root)
|
|
78
|
-
|
|
79
|
-
```ts
|
|
80
|
-
dark: WritableSignal<boolean>;
|
|
81
|
-
readonly fontSizePresets: readonly number[]; // [12,14,16,20,24,28]
|
|
82
|
-
fontSize: WritableSignal<number>; // body html font-size px
|
|
83
|
-
increaseFontSize(): void; decreaseFontSize(): void;
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
- `dark` 효과 → `<body class="sd-theme-dark">`. `fontSize` → `<html style="font-size:Npx">`.
|
|
87
|
-
- `increase`/`decrease` — presets 의 인접 값으로만 이동.
|
|
88
|
-
|
|
89
|
-
### SdThemeSelector — `<sd-theme-selector>`
|
|
90
|
-
|
|
91
|
-
- inputs 없음. 팔레트(다크 토글) + 폰트 크기 ± 버튼 UI.
|
|
92
|
-
|
|
93
|
-
## 유틸 함수
|
|
94
|
-
|
|
95
|
-
### FormatPipe — `{{ value | format: pattern }}`
|
|
96
|
-
|
|
97
|
-
- `value: string|DateTime|DateOnly|undefined`, `format: string` → 포맷팅된 string.
|
|
98
|
-
- DateTime/DateOnly → `toFormatString(format)`.
|
|
99
|
-
- 문자열 → `X` 자리에 1글자씩 매핑. `|` 로 여러 패턴 alt 가능(value 길이 일치하는 첫 패턴 선택). 매칭 실패 시 원본 반환.
|
|
100
|
-
- 예: `"01012345678" | format: "XXX-XXXX-XXXX|XXX-XXX-XXXX"` → `"010-1234-5678"`.
|
|
101
|
-
|
|
102
|
-
### mark
|
|
103
|
-
|
|
104
|
-
```ts
|
|
105
|
-
function mark(sig: WritableSignal<any>): void
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
- in-place mutation 후 signal 소비자에게 변경 알림. 배열은 shallow copy, 객체는 spread. mutable 데이터로 setter 호출 누락 방지용.
|
|
109
|
-
|
|
110
|
-
### setSafeStyle
|
|
111
|
-
|
|
112
|
-
```ts
|
|
113
|
-
function setSafeStyle(renderer: Renderer2, el: HTMLElement, style: Partial<CSSStyleDeclaration>): void
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
- `Renderer2.setStyle` 을 객체 단위로 일괄 적용. SSR/zoneless 안전.
|
|
117
|
-
|
|
118
|
-
### setupBgTheme
|
|
119
|
-
|
|
120
|
-
```ts
|
|
121
|
-
function setupBgTheme(options?: {
|
|
122
|
-
theme?: "primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray";
|
|
123
|
-
lightness?: "lightest"|"lighter";
|
|
124
|
-
}): void
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
- 컴포넌트 진입 동안 `document.body --background-color` 를 테마 변수로 설정. destroy 시 원복.
|
|
128
|
-
- `lightness` 기본 `lightest`.
|
|
129
|
-
|
|
130
|
-
### setupModelHook
|
|
131
|
-
|
|
132
|
-
```ts
|
|
133
|
-
function setupModelHook<T>(model: WritableSignal<T>, canFn: Signal<(item: T) => boolean|Promise<boolean>>): void
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
- model 의 `set`/`update` 를 가로채 `canFn(value)` 결과가 true(또는 Promise<true>) 일 때만 적용. false 면 무시. Promise reject 는 `ErrorHandler`.
|
|
137
|
-
- 체크박스/스위치 등의 `canChangeFn` 패턴 구현체.
|
|
138
|
-
|
|
139
|
-
## 타입 헬퍼
|
|
140
|
-
|
|
141
|
-
```ts
|
|
142
|
-
type UndefToOptional<T> // undefined 가능 prop 을 optional 로
|
|
143
|
-
type DirectiveInputSignals<T> // 컴포넌트의 InputSignal prop → 값 타입 객체
|
|
144
|
-
type WithOptional<T, K extends keyof T> // 일부 키를 optional 로
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
- `SdModalInfo.inputs` / `SdPrintInput.inputs` 등의 타입 빌딩에 사용.
|
|
148
|
-
|
|
149
|
-
## DOM 이벤트 디렉티브
|
|
150
|
-
|
|
151
|
-
### SdEvents — `<el (click.capture)="..." (scroll.passive)="..." ...>`
|
|
152
|
-
|
|
153
|
-
- 이벤트 이름 끝에 `.capture`/`.passive`/`.once` 조합 가능한 다중 셀렉터 디렉티브. 표준 Angular 이벤트 바인딩으로는 옵션 못 주는 listener option 활성.
|
|
154
|
-
- 지원 이벤트: click/mouse*/keydown/keyup/focus/blur/invalid/scroll/wheel/touch*/drag*/transitionend/animationend.
|
|
155
|
-
|
|
156
|
-
### SdOptionEventPlugin
|
|
157
|
-
|
|
158
|
-
- `provideSdAngular` 가 `EVENT_MANAGER_PLUGINS` 에 등록. `SdEvents` 가 의존. 직접 호출 X.
|
|
159
|
-
|
|
160
|
-
### SdResizeDirective — `[sdResize]`
|
|
161
|
-
|
|
162
|
-
```ts
|
|
163
|
-
sdResize = output<SdResizeEvent>();
|
|
164
|
-
interface SdResizeEvent { heightChanged: boolean; widthChanged: boolean; target: HTMLElement; contentRect: DOMRectReadOnly; }
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
- `ResizeObserver` + rAF 디바운스. 너비/높이 변경 플래그 포함.
|
|
168
|
-
|
|
169
|
-
### SdIntersectionDirective — `[sdIntersection]`
|
|
170
|
-
|
|
171
|
-
```ts
|
|
172
|
-
sdIntersection = output<SdIntersectionEvent>();
|
|
173
|
-
interface SdIntersectionEvent { entry: IntersectionObserverEntry; }
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
- `IntersectionObserver` 래퍼. 무한 스크롤 트리거 등.
|
|
177
|
-
|
|
178
|
-
### SdCommandDirective — `[sdRefreshCommand]`/`[sdSaveCommand]`/`[sdInsertCommand]`
|
|
179
|
-
|
|
180
|
-
- 전역 키 단축키 출력. `Ctrl+Alt+L` → refresh, `Ctrl+S` → save, `Insert` → insert. 최상위 열린 모달 또는 호스트가 활성 영역일 때만 발화(다른 모달 위면 무시).
|
|
181
|
-
|
|
182
|
-
## 효과 디렉티브
|
|
183
|
-
|
|
184
|
-
### SdRipple — `[sdRipple]` + setupRipple
|
|
185
|
-
|
|
186
|
-
```ts
|
|
187
|
-
enabled = input.required({ alias: "sdRipple", transform: booleanAttribute });
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
- 클릭 시 머티리얼풍 잉크 효과. `setupRipple(enableFn?)` 은 컴포넌트 안에서 inject 후 직접 호출하는 형태.
|
|
191
|
-
|
|
192
|
-
### SdShowEffect — `[sdShowEffect]` + setupRevealOnShow
|
|
193
|
-
|
|
194
|
-
```ts
|
|
195
|
-
enabled = input.required({ alias: "sdShowEffect", transform: booleanAttribute });
|
|
196
|
-
sdShowEffectType = input<"l2r"|"t2b">("t2b");
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
- 스크롤로 첫 표시 시 페이드인 + 슬라이드. `l2r`: 좌→우, `t2b`: 위→아래(기본).
|
|
200
|
-
|
|
201
|
-
### SdInvalid — `[sdInvalid]` + setupInvalid
|
|
202
|
-
|
|
203
|
-
```ts
|
|
204
|
-
invalidMessage = input.required<string>({ alias: "sdInvalid" });
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
- 호스트 요소를 invalid 상태로 표시(빨간 점 인디케이터 + form submit 막기). 빈 문자열이면 valid. 직접 form 검증 메시지 표시할 때.
|
|
208
|
-
|
|
209
|
-
## 템플릿 디렉티브
|
|
210
|
-
|
|
211
|
-
### SdTypedTemplate — `<ng-template typed>`
|
|
212
|
-
|
|
213
|
-
```ts
|
|
214
|
-
class SdTypedTemplate<T> { typed = input.required<T>(); }
|
|
215
|
-
```
|
|
216
|
-
|
|
217
|
-
- 템플릿 컨텍스트 타입 명시용. `typed` 에 token 값/객체 바인딩.
|
|
218
|
-
|
|
219
|
-
### SdItemOfTemplate — `<ng-template itemOf>`
|
|
220
|
-
|
|
221
|
-
```ts
|
|
222
|
-
class SdItemOfTemplate<TItem> { itemOf = input.required<TItem[]>(); }
|
|
223
|
-
interface SdItemOfTemplateContext<TItem> { $implicit: TItem; item: TItem; index: number; depth: number; }
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
- 리스트 아이템 템플릿 컨텍스트 타입 추론. `let-item`, `let-index="index"`, `let-depth="depth"` 사용 가능. `SdCalendar` 등이 자식으로 요구.
|
|
227
|
-
|
|
228
|
-
## 주의
|
|
229
|
-
|
|
230
|
-
- `provideSdAngular` 호출만으로 `SdGlobalErrorHandlerPlugin`/`SdOptionEventPlugin`/`SdEvents` 가 모두 활성. 별도 추가 불필요.
|
|
231
|
-
- `SdLocalStorageProvider`/`SdSystemConfigProvider` 의 키는 `clientName.<key>` 형태. 같은 도메인의 다른 simplysm 앱과 충돌 방지.
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
# @simplysm/angular — kanban
|
|
2
|
-
|
|
3
|
-
드래그·드롭 칸반 보드. lane 간 카드 이동·다중 선택.
|
|
4
|
-
|
|
5
|
-
## SdKanbanBoard — `<sd-kanban-board>`
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
class SdKanbanBoard<L, T>
|
|
9
|
-
selectedValues = model<T[]>([]); // 선택된 카드 value 목록
|
|
10
|
-
drop = output<SdKanbanBoardDropInfo<L, T>>();
|
|
11
|
-
|
|
12
|
-
interface SdKanbanBoardDropInfo<L, T> {
|
|
13
|
-
sourceKanbanValue?: T;
|
|
14
|
-
targetLaneValue?: L;
|
|
15
|
-
targetKanbanValue?: T; // 특정 카드 위에 떨어뜨렸을 때
|
|
16
|
-
}
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
- 자식으로 `<sd-kanban-lane>` 들. 카드를 lane 또는 다른 카드 위로 드롭하면 `drop` 발화. 호출자는 데이터 reorder 책임.
|
|
20
|
-
- `selectedValues` — `<sd-kanban selectable>` 의 클릭 시 선택 토글.
|
|
21
|
-
|
|
22
|
-
```html
|
|
23
|
-
<sd-kanban-board (drop)="onDrop($event)">
|
|
24
|
-
@for (lane of lanes; track lane.id) {
|
|
25
|
-
<sd-kanban-lane [value]="lane">
|
|
26
|
-
<div sd-kanban-lane-title>{{ lane.title }}</div>
|
|
27
|
-
@for (card of lane.cards; track card.id) {
|
|
28
|
-
<sd-kanban [value]="card" draggable>{{ card.title }}</sd-kanban>
|
|
29
|
-
}
|
|
30
|
-
</sd-kanban-lane>
|
|
31
|
-
}
|
|
32
|
-
</sd-kanban-board>
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## SdKanbanLane — `<sd-kanban-lane>`
|
|
36
|
-
|
|
37
|
-
```ts
|
|
38
|
-
class SdKanbanLane<L, T>
|
|
39
|
-
value = input<L>(); // lane 식별 데이터
|
|
40
|
-
busy = input(false); // lane 영역에 SdBusyContainer 효과
|
|
41
|
-
useCollapse = input(false); // 접기 버튼 노출
|
|
42
|
-
collapse = model(false); // 접힌 상태
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
- `value` 는 `drop.targetLaneValue` 로 사용.
|
|
46
|
-
- `useCollapse=true` + `collapse(true)` 면 컨텐츠 숨김(헤더만).
|
|
47
|
-
|
|
48
|
-
## SdKanban — `<sd-kanban>`
|
|
49
|
-
|
|
50
|
-
```ts
|
|
51
|
-
class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget<L, T>
|
|
52
|
-
value = input<T>();
|
|
53
|
-
selectable = input(false);
|
|
54
|
-
draggable = input(false);
|
|
55
|
-
contentClass = input<string>();
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
- `draggable=true` 면 드래그 핸들 활성. `selectable=true` 면 클릭 시 `SdKanbanBoard.selectedValues` 토글.
|
|
59
|
-
- `value` 는 `drop.sourceKanbanValue`/`targetKanbanValue` 로 사용.
|
|
60
|
-
- `<ng-content>` 가 카드 본문.
|
|
61
|
-
|
|
62
|
-
## 타입
|
|
63
|
-
|
|
64
|
-
```ts
|
|
65
|
-
interface SdKanbanDragRef<_L, T> {
|
|
66
|
-
value(): T|undefined;
|
|
67
|
-
heightOnDrag(): number;
|
|
68
|
-
}
|
|
69
|
-
interface SdKanbanDropTarget<L, T> {
|
|
70
|
-
targetLaneValue(): L|undefined;
|
|
71
|
-
targetKanbanValue?(): T|undefined;
|
|
72
|
-
}
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
- 보드 내부에서 드래그 소스/드롭 타겟 구분에 사용. 컴포넌트 클래스가 직접 구현. 외부에서 직접 구현할 일은 거의 없음.
|
|
76
|
-
|
|
77
|
-
## 주의
|
|
78
|
-
|
|
79
|
-
- 드롭 후 데이터 반영은 호출자가 해야 함. `drop` 이벤트만으로 자동 재정렬되지 않음.
|
|
80
|
-
- 같은 카드를 자기 자신에 드롭하면 `sourceKanbanValue === targetKanbanValue`. 호출자가 무시 처리.
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
# @simplysm/angular — layout
|
|
2
|
-
|
|
3
|
-
앱 셸 레이아웃. 사이드바·탑바 컨테이너와 메뉴 위젯.
|
|
4
|
-
|
|
5
|
-
## SdSidebarContainer — `<sd-sidebar-container>`
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
toggle: WritableSignal<boolean>; // 사이드바 표시 여부
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
- 사이드바 + 메인 영역 컨테이너. `Router` 네비게이션 시작 시 `toggle` 자동 false(모바일에서 메뉴 자동 닫힘).
|
|
12
|
-
- 자식: `<sd-sidebar>` + 본문 컨텐츠.
|
|
13
|
-
|
|
14
|
-
## SdSidebar — `<sd-sidebar>`
|
|
15
|
-
|
|
16
|
-
```ts
|
|
17
|
-
toggle = computed(() => parent.toggle());
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
- 사이드바 패널. 부모 `SdSidebarContainer.toggle` 에 연동되어 슬라이드 표시.
|
|
21
|
-
- `<ng-content>` 가 사이드바 내부 컨텐츠(보통 `<sd-sidebar-user>` + `<sd-sidebar-menu>`).
|
|
22
|
-
|
|
23
|
-
## SdSidebarMenu — `<sd-sidebar-menu>`
|
|
24
|
-
|
|
25
|
-
```ts
|
|
26
|
-
menus = input<SdMenu[]>([]);
|
|
27
|
-
layout = input<"accordion"|"flat">();
|
|
28
|
-
getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
- `menus` — 보통 `sdAppStructure.usableMenus()` 결과.
|
|
32
|
-
- `layout` — `accordion`: 그룹 메뉴 펼침/접힘, `flat`: 상시 전개. 미지정 시 메뉴 ≤3 → `flat`, 초과 → `accordion`.
|
|
33
|
-
- `getMenuIsSelectedFn` — 현재 선택 메뉴 판정 커스텀. 미지정 시 `fullPageCode === menu.codeChain.join(".")`.
|
|
34
|
-
|
|
35
|
-
## SdSidebarUser — `<sd-sidebar-user>`
|
|
36
|
-
|
|
37
|
-
```ts
|
|
38
|
-
userMenu = input<SdSidebarUserMenu>();
|
|
39
|
-
|
|
40
|
-
interface SdSidebarUserMenu {
|
|
41
|
-
title: string;
|
|
42
|
-
menus: { title: string; onClick: () => void }[];
|
|
43
|
-
}
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
- 사이드바 상단 사용자 정보 + 드롭다운 메뉴(로그아웃 등). `<ng-content>` 가 사용자 표시 영역(아바타·이름).
|
|
47
|
-
|
|
48
|
-
## SdTopbarContainer — `<sd-topbar-container>`
|
|
49
|
-
|
|
50
|
-
- 탑바 + 본문 컨테이너. inputs 없음. 자식: `<sd-topbar>` + 본문.
|
|
51
|
-
|
|
52
|
-
## SdTopbar — `<sd-topbar>`
|
|
53
|
-
|
|
54
|
-
```ts
|
|
55
|
-
sidebarContainer = input<SdSidebarContainer>();
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
- 상단 바. 햄버거 버튼 클릭 시 사이드바 토글. `sidebarContainer` 명시 안 하면 ancestor inject 자동 탐색.
|
|
59
|
-
|
|
60
|
-
## SdTopbarMenu — `<sd-topbar-menu>`
|
|
61
|
-
|
|
62
|
-
```ts
|
|
63
|
-
menus = input<SdMenu[]>([]);
|
|
64
|
-
getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
- 탑바 가로 메뉴. 그룹 메뉴는 드롭다운 자동.
|
|
68
|
-
|
|
69
|
-
## SdTopbarUser — `<sd-topbar-user>`
|
|
70
|
-
|
|
71
|
-
```ts
|
|
72
|
-
menus = input.required<SdTopbarUserMenu[]>();
|
|
73
|
-
|
|
74
|
-
interface SdTopbarUserMenu { title: string; onClick: () => void }
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
- 탑바 우측 사용자 드롭다운(아바타 → 메뉴). `<ng-content>` 가 트리거 표시 영역.
|
|
78
|
-
|
|
79
|
-
## 사용 예
|
|
80
|
-
|
|
81
|
-
```html
|
|
82
|
-
<sd-sidebar-container>
|
|
83
|
-
<sd-sidebar>
|
|
84
|
-
<sd-sidebar-user [userMenu]="userMenu()">{{ user().name }}</sd-sidebar-user>
|
|
85
|
-
<sd-sidebar-menu [menus]="appStructure.usableMenus()" />
|
|
86
|
-
</sd-sidebar>
|
|
87
|
-
<sd-topbar-container>
|
|
88
|
-
<sd-topbar><h1>{{ viewTitle() }}</h1><sd-topbar-user [menus]="topbarMenus()" /></sd-topbar>
|
|
89
|
-
<router-outlet />
|
|
90
|
-
</sd-topbar-container>
|
|
91
|
-
</sd-sidebar-container>
|
|
92
|
-
```
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
# @simplysm/angular — modal
|
|
2
|
-
|
|
3
|
-
`SdModalProvider.showAsync` 로 프로그래밍 호출, 또는 `<sd-modal>` 컴포넌트 직접 배치.
|
|
4
|
-
|
|
5
|
-
## SdModalProvider (root)
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
modalCount: WritableSignal<number>;
|
|
9
|
-
showAsync<T extends SdModalContentDef<any>>(modal: SdModalInfo<T>, options?: SdModalOptions): Promise<O|undefined>;
|
|
10
|
-
|
|
11
|
-
interface SdModalContentDef<O> {
|
|
12
|
-
initialized: Signal<boolean>;
|
|
13
|
-
close: OutputEmitterRef<O|undefined>;
|
|
14
|
-
actionTplRef?: TemplateRef<any>;
|
|
15
|
-
readonly _optionalModalInputs?: string; // type-level marker, optional inputs 이름 union
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
interface SdModalInfo<T, X = ""> {
|
|
19
|
-
title: string;
|
|
20
|
-
type: Type<T>;
|
|
21
|
-
inputs: ...; // T 의 InputSignal prop 들 (close/initialized 등 제외, _optionalModalInputs 마킹 prop 은 optional)
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
interface SdModalOptions {
|
|
25
|
-
key?: string; hideHeader?: boolean; hideCloseButton?: boolean;
|
|
26
|
-
headerStyle?: string;
|
|
27
|
-
useCloseByBackdrop?: boolean; useCloseByEscapeKey?: boolean;
|
|
28
|
-
float?: boolean; fill?: boolean;
|
|
29
|
-
resizable?: boolean; movable?: boolean;
|
|
30
|
-
position?: "bottom-right"|"top-right";
|
|
31
|
-
minHeightPx?: number; minWidthPx?: number;
|
|
32
|
-
heightPx?: number; widthPx?: number;
|
|
33
|
-
noFirstControlFocusing?: boolean;
|
|
34
|
-
}
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
- `showAsync` — 컴포넌트 동적 생성·body 부착·열림 애니메이션·포커스 캡처. 컨텐츠 컴포넌트가 `close.emit(result)` 또는 배경/ESC/닫기버튼으로 `closeRequest` 발화하면 close 진행, Promise 가 result 로 resolve(취소는 undefined).
|
|
38
|
-
- `modalCount` — 동시 열린 모달 수. 키보드 이벤트 핸들러 등에서 활용.
|
|
39
|
-
- `SdModalContentDef.initialized` — 모달 컴포넌트가 자기 준비 끝났을 때 `true` 로 set. `SdPrintProvider` 등은 이걸 기다림(`SdModalProvider` 는 직접 사용 안 함).
|
|
40
|
-
- `SdModalContentDef.actionTplRef` — 모달 헤더 우측 추가 액션 영역에 띄울 `TemplateRef`. set 하면 자동으로 `<sd-modal>` 의 `actionTplRef` 로 브릿지.
|
|
41
|
-
- `_optionalModalInputs` — `SdModalInfo.inputs` 의 일부 prop 을 optional 로 만들 때 사용하는 type-level 마커(`= "fieldA" | "fieldB"`). 런타임 값 없음.
|
|
42
|
-
- `SdModalOptions` 필드별:
|
|
43
|
-
- `key` — 지정 시 `SdSystemConfigProvider` 키 `sd-modal.<key>` 로 width/height/left/top 자동 저장·복원.
|
|
44
|
-
- `hideHeader`/`hideCloseButton` — 헤더 영역 전체/닫기 버튼만 숨김.
|
|
45
|
-
- `headerStyle` — 헤더 인라인 style 문자열.
|
|
46
|
-
- `useCloseByBackdrop`/`useCloseByEscapeKey` — 기본 true. false 면 배경 클릭/ESC 무시.
|
|
47
|
-
- `float` — true 면 배경 어둡지 않고 그림자만(비차단 플로팅).
|
|
48
|
-
- `fill` — true 면 전체 화면. 헤더 투명·테두리 없음.
|
|
49
|
-
- `resizable` — true 면 8방향 리사이즈 핸들.
|
|
50
|
-
- `movable` — true 면 헤더 드래그로 이동.
|
|
51
|
-
- `position` — `bottom-right`/`top-right` 절대 배치. 미지정 = 상단 가운데.
|
|
52
|
-
- `minWidthPx`/`minHeightPx`/`widthPx`/`heightPx` — 사이즈 제약·고정.
|
|
53
|
-
- `noFirstControlFocusing` — true 면 첫 탭가능 요소가 아니라 dialog 박스 자체에 포커스.
|
|
54
|
-
|
|
55
|
-
```ts
|
|
56
|
-
const result = await sdModal.showAsync({ title: "직원선택", type: EmpSelectModal, inputs: {} }, { resizable: true, key: "emp-select" });
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
## SdModal — `<sd-modal>`
|
|
60
|
-
|
|
61
|
-
`SdModalProvider` 가 내부에서 사용. 직접 템플릿에 두려면:
|
|
62
|
-
|
|
63
|
-
```ts
|
|
64
|
-
open = model(false); key = input<string|undefined>();
|
|
65
|
-
title = input(""); hideHeader = input(false); hideCloseButton = input(false);
|
|
66
|
-
headerStyle = input<string|undefined>();
|
|
67
|
-
useCloseByBackdrop = input(true); useCloseByEscapeKey = input(true);
|
|
68
|
-
float = input(false); fill = input(false);
|
|
69
|
-
resizable = input(false); movable = input(false);
|
|
70
|
-
position = input<"bottom-right"|"top-right"|undefined>();
|
|
71
|
-
minHeightPx/minWidthPx/heightPx/widthPx = input<number|undefined>();
|
|
72
|
-
actionTplRef = input<TemplateRef<any>|undefined>();
|
|
73
|
-
closeRequest = output<void>();
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
- 의미는 위 `SdModalOptions` 와 1:1. `closeRequest` 발화 시 부모가 `open.set(false)` 책임.
|
|
77
|
-
|
|
78
|
-
## SdActivatedModalProvider (inject inside modal content)
|
|
79
|
-
|
|
80
|
-
```ts
|
|
81
|
-
modalComponent: WritableSignal<SdModal|undefined>;
|
|
82
|
-
contentComponent: WritableSignal<T|undefined>;
|
|
83
|
-
canDeactivateFn: () => boolean; // 닫기 차단 시 false 반환
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
- 컨텐츠 컴포넌트 내부에서 `inject(SdActivatedModalProvider)` 로 자기 모달 참조 가져오기. `canDeactivateFn` 을 함수로 덮어쓰면 ESC/배경/닫기버튼이 false 시 닫힘 차단(저장 안된 변경 사항 보호 패턴).
|
|
87
|
-
- `setupCanDeactivate(fn)` 헬퍼가 이걸 set 함 ([routing.md](./routing.md)).
|
|
88
|
-
|
|
89
|
-
## SdPromptModal / SdConfirmModal (사전 정의 컨텐츠)
|
|
90
|
-
|
|
91
|
-
```ts
|
|
92
|
-
class SdPromptModal implements SdModalContentDef<string> { message = input.required<string>(); }
|
|
93
|
-
class SdConfirmModal implements SdModalContentDef<boolean> { message = input.required<string>(); }
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
- 확인 시 prompt 는 입력값, confirm 은 `true` emit. 취소는 둘 다 `undefined`.
|
|
97
|
-
|
|
98
|
-
```ts
|
|
99
|
-
const input = await sdModal.showAsync({ title: "입력", type: SdPromptModal, inputs: { message: "이름?" } });
|
|
100
|
-
const ok = await sdModal.showAsync({ title: "확인", type: SdConfirmModal, inputs: { message: "삭제할까요?" } });
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
## SelectModalOutputResult<TKey>
|
|
104
|
-
|
|
105
|
-
```ts
|
|
106
|
-
interface SelectModalOutputResult<TKey = any> { selectedKeys: TKey[]; }
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
- `SdModalSelectButton`/`SdSharedDataSelect*` 가 선택 모달을 호출할 때 모달이 emit 할 표준 출력 형태.
|
|
110
|
-
|
|
111
|
-
## 주의
|
|
112
|
-
|
|
113
|
-
- 컨텐츠 컴포넌트가 `close.emit(value)` 를 호출해야 Promise 가 resolve. 닫기 버튼/ESC/배경 클릭은 `closeRequest` → `undefined` resolve.
|
|
114
|
-
- 컨텐츠 안에 `<ng-template #actionTpl>...</ng-template>` 두고 컴포넌트 클래스에서 `actionTplRef = viewChild('actionTpl')` 한 뒤 set 하면 헤더 액션 영역 표시됨.
|
|
115
|
-
- `resizable`/`movable`/`key` 조합 시 사용자 조정 사이즈·위치가 `sd-modal.<key>` 키로 `SdSystemConfigProvider` 에 저장됨.
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
# @simplysm/angular — routing
|
|
2
|
-
|
|
3
|
-
Angular Router 위에 페이지 코드(`a.b.c` 점 표기)·뷰 타입·새창 네비게이션 헬퍼.
|
|
4
|
-
|
|
5
|
-
## SdRouterLink — `[sdRouterLink]` (Directive)
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
option = input<{
|
|
9
|
-
link: string;
|
|
10
|
-
params?: Record<string, string>;
|
|
11
|
-
window?: { width?: number; height?: number }; // 새창 띄울 때 크기
|
|
12
|
-
outletName?: string;
|
|
13
|
-
queryParams?: Record<string, string>;
|
|
14
|
-
} | undefined>(undefined, { alias: "sdRouterLink" });
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
- click 처리. `Alt+click` 무시(브라우저 기본 다운로드 거동 보존). 새창 모드(`SdNavigateWindowProvider.isWindow=true` 또는 `Ctrl/Shift+click`)면 `window.open` 으로 새창 띄움. 일반 모드면 `Router.navigate`.
|
|
18
|
-
- `link` — 라우터 경로. `window` 옵션 지정 시 width/height (기본 800x800) 으로 새창.
|
|
19
|
-
- `outletName` — 보조 outlet 라우팅용. 미지정 시 primary.
|
|
20
|
-
- `params`/`queryParams` — 라우터 매트릭스 파라미터/쿼리 파라미터.
|
|
21
|
-
|
|
22
|
-
```html
|
|
23
|
-
<sd-anchor [sdRouterLink]="{ link: '/home/sales/invoice', params: { id: '1' } }">송장</sd-anchor>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## SdNavigateWindowProvider (root)
|
|
27
|
-
|
|
28
|
-
```ts
|
|
29
|
-
get isWindow: boolean; // 현재 URL hash 의 ;window=true 여부
|
|
30
|
-
open(navigate: string, params?: Record<string, string>, features?: string): void;
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
- 현재 창이 simplysm 새창 모드인지 판단(`location.hash` 의 `;window=true`).
|
|
34
|
-
- `open` — 새창이거나 `features` 가 주어지면 `window.open(... features)`. 일반 모드면 `_blank` 탭. 부모창 close 시 자식들도 일괄 종료.
|
|
35
|
-
|
|
36
|
-
## injectCurrentPageCodeSignal
|
|
37
|
-
|
|
38
|
-
```ts
|
|
39
|
-
function injectCurrentPageCodeSignal(): Signal<string> | undefined
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
- `ActivatedRoute.pathFromRoot.slice(2)` 의 url segments 를 `.` 으로 join. 라우터 컨텍스트 없으면 undefined.
|
|
43
|
-
- 예: `/home/sales/invoice` → `"sales.invoice"`.
|
|
44
|
-
|
|
45
|
-
## injectFullPageCodeSignal
|
|
46
|
-
|
|
47
|
-
```ts
|
|
48
|
-
function injectFullPageCodeSignal(): Signal<string>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
- `Router.events` 의 NavigationEnd → URL → segment 2개부터 `.` join. matrix/query 제거.
|
|
52
|
-
- "전체 페이지 코드" 로 메뉴 선택 상태 판정에 사용.
|
|
53
|
-
|
|
54
|
-
## injectViewTitleSignal
|
|
55
|
-
|
|
56
|
-
```ts
|
|
57
|
-
function injectViewTitleSignal(): Signal<string>
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
- 모달 안이면 `SdActivatedModalProvider.modalComponent().title()`.
|
|
61
|
-
- 그 외엔 `SdAppStructureProvider.getTitleByFullCode(currentPageCode ?? fullPageCode)`.
|
|
62
|
-
- 페이지/모달 상단에 표시할 제목.
|
|
63
|
-
|
|
64
|
-
## injectViewTypeSignal
|
|
65
|
-
|
|
66
|
-
```ts
|
|
67
|
-
function injectViewTypeSignal(): Signal<SdViewType>;
|
|
68
|
-
type SdViewType = "page" | "modal" | "control";
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
- `page`: 라우터 진입 페이지 컴포넌트, `modal`: 모달 컨텐츠, `control`: 그 외(다른 컴포넌트의 자식). 컴포넌트가 자기 컨텍스트별로 다르게 그릴 때.
|
|
72
|
-
|
|
73
|
-
## setupCanDeactivate
|
|
74
|
-
|
|
75
|
-
```ts
|
|
76
|
-
function setupCanDeactivate(fn: () => boolean): void
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
- 모달 안: `SdActivatedModalProvider.canDeactivateFn = fn` 으로 ESC/배경/닫기 차단.
|
|
80
|
-
- 라우터 페이지: route config 에 `CanDeactivate` 가드 추가(컴포넌트 파괴 시 자동 제거).
|
|
81
|
-
- 저장 안된 변경 사항 보호용.
|
|
82
|
-
|
|
83
|
-
```ts
|
|
84
|
-
setupCanDeactivate(() => !isDirty() || confirm("변경 사항이 있습니다. 나가시겠습니까?"));
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
## getMenuRouterLinkOption
|
|
88
|
-
|
|
89
|
-
```ts
|
|
90
|
-
function getMenuRouterLinkOption(menu: SdMenu): { link: string; queryParams: Record<string, string>|undefined } | undefined
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
- leaf 메뉴(`children` 도 `url` 도 없음)만 결과 반환. 그룹/외부URL 메뉴는 undefined.
|
|
94
|
-
- 반환 link 는 `/home/<codeChain join "/">`. 마지막 segment 에 `?key=val` 포함 시 분리해 queryParams 로.
|
|
95
|
-
|
|
96
|
-
## getIsMenuSelected
|
|
97
|
-
|
|
98
|
-
```ts
|
|
99
|
-
function getIsMenuSelected(menu: SdMenu, fullPageCode: string|undefined, customFn?: (menu) => boolean): boolean
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
- 커스텀 함수 있으면 그것 사용. 없으면 `fullPageCode === menu.codeChain.join(".")`.
|
|
103
|
-
|
|
104
|
-
## 주의
|
|
105
|
-
|
|
106
|
-
- 페이지 코드는 `/home/` 다음의 segment 들 `.` join. 라우터를 이 컨벤션에 맞춰 설계해야 메뉴 선택 표시·뷰 타이틀 자동 동작.
|
|
107
|
-
- `SdRouterLink` 의 `link` 는 라우터 절대경로 또는 상대경로. `link` 에 `?queryString` 직접 쓰지 말고 `queryParams` 객체로 분리.
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
# @simplysm/angular — select-dropdown
|
|
2
|
-
|
|
3
|
-
## `<sd-dropdown>` / `<sd-dropdown-popup>`
|
|
4
|
-
|
|
5
|
-
```html
|
|
6
|
-
<sd-dropdown [(open)]="open" [disabled]="false">
|
|
7
|
-
trigger 컨텐츠
|
|
8
|
-
<sd-dropdown-popup>팝업 컨텐츠</sd-dropdown-popup>
|
|
9
|
-
</sd-dropdown>
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
- `open` 시 popup을 body로 이동(트리거 위치 기준 배치). 모바일(`max-width:520px`)이면 backdrop+bottom sheet.
|
|
13
|
-
- 트리거 클릭/Enter/ArrowDown 으로 open.
|
|
14
|
-
|
|
15
|
-
## `<sd-select<M extends "single"|"multi", T>>`
|
|
16
|
-
|
|
17
|
-
```html
|
|
18
|
-
<sd-select [items]="items" [(value)]="value" [selectMode]="'single'" [trackByFn]="byId">
|
|
19
|
-
<sd-select-item *ngFor="let it of items" [value]="it.id">{{ it.name }}</sd-select-item>
|
|
20
|
-
</sd-select>
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
`SelectModeValue<T> = { single: T; multi: T[] }`. value type = `SelectModeValue<T>[M]`.
|
|
24
|
-
|
|
25
|
-
주요 input: `selectMode`, `value` (model), `placeholder`, `disabled`, `inline`, `inset`, `size`, `required`, `hideSelectAll`, `multiSelectionDisplayDirection: "vertical"`, `items`, `trackByFn`, `getChildrenFn` (트리), `contentClass/Style`, `dropdownOpen` (model).
|
|
26
|
-
|
|
27
|
-
`<ng-template #headerTpl>`, `<ng-template #beforeTpl>`, `<ng-template itemOf>` (`SdItemOfTemplate`) 으로 커스터마이즈.
|
|
28
|
-
|
|
29
|
-
## `<sd-select-item<T> [value]>`
|
|
30
|
-
|
|
31
|
-
projected content 가 옵션 라벨.
|
|
32
|
-
|
|
33
|
-
## `<sd-select-button>`
|
|
34
|
-
|
|
35
|
-
검색 트리거 버튼만 노출하는 경량 select (내부 사용용).
|