rails_modal_manager 1.0.58 → 1.0.60
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.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 87d8b1b59e52bb56527c8c36d3d2848e7ee1c89eb215acaa63c94d2155f43f75
|
|
4
|
+
data.tar.gz: ecd6594800a1efc07f7b206fb02946500dd251c4415c8eb8bfb7a800a2ec2a14
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7e7917843b1919d861d35f46cbeefcb6bf59d0dcef492d4919ab9488d838f6361fa0ae994c6a8a0711d4601c14b071360ca6d0dea4a27ba7f3d8f82076860607
|
|
7
|
+
data.tar.gz: b9c82943073405e3875d96a327951ff3bb27aba67160d626f90387dbd88ad59688d254ef2eea6bc933c73e3efdc7d60c8c530a679d658f137e8888a2482f72d5
|
data/README.md
CHANGED
|
@@ -3,7 +3,22 @@
|
|
|
3
3
|
Rails 애플리케이션을 위한 고급 모달 매니저입니다.
|
|
4
4
|
`@reshacs/react-modal-manager`에서 포팅되었습니다.
|
|
5
5
|
|
|
6
|
-
**Version:** 1.0.
|
|
6
|
+
**Version:** 1.0.59
|
|
7
|
+
|
|
8
|
+
> ⚠️ **이 README 의 본문 설명은 v1.0.37 기준입니다.** v1.0.38 이후의 변경(디자인 개편, 푸터 버튼 패턴, z-index 계층 등)은
|
|
9
|
+
> **[OPTIONS.md](OPTIONS.md) 최상단**이 최신 기준입니다. 두 문서가 어긋나면 OPTIONS.md 를 따르세요.
|
|
10
|
+
>
|
|
11
|
+
> 특히 아래 항목은 README 본문이 오래됐습니다:
|
|
12
|
+
> - **헤더 색상** — 본문의 `#3b82f6` 파란색 → v1.0.57 부터 `#3e6187` 블루 차콜
|
|
13
|
+
> - **푸터 버튼** — `onclick` 은 v1.0.55 에서 deprecated. `type: "submit"` + `form:` 패턴 사용
|
|
14
|
+
> - **z-index** — v1.0.58 에서 계층 재배치 (overlay 1400 < modal 1500~8000 < taskbar 9000 < confirm 10000)
|
|
15
|
+
>
|
|
16
|
+
> ⚠️ **이벤트 이름 (2026-08-07 교정)** — 아래 본문과 구 OPTIONS.md 에 `rmm:closed` / `rmm:minimize` /
|
|
17
|
+
> `rmm:maximize` 로 적혀 있던 것은 **오기입니다. 그 이름으로는 발화되지 않습니다.**
|
|
18
|
+
> 실제 이름은 `rmm-modal:closed` / `rmm-modal:minimize` / `rmm-modal:maximize` 이며
|
|
19
|
+
> (Stimulus `this.dispatch()` 가 컨트롤러 identifier `rmm-modal` 을 접두어로 붙임),
|
|
20
|
+
> `rmm:open` · `rmm:close` 만 `index.js` 가 직접 dispatch 해 접두어가 없습니다.
|
|
21
|
+
> 정확한 목록·권장 패턴은 **[OPTIONS.md → Events](OPTIONS.md#events)** 참조.
|
|
7
22
|
|
|
8
23
|
---
|
|
9
24
|
|
|
@@ -638,6 +653,9 @@ const descendants = modalStore.getAllDescendants('parent-modal')
|
|
|
638
653
|
--rmm-bg: #ffffff;
|
|
639
654
|
--rmm-border: #e2e8f0;
|
|
640
655
|
--rmm-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
656
|
+
/* v1.0.60 — 오버레이 닫기 어포던스. 끄려면 closable 을 default 로 덮으면 된다 */
|
|
657
|
+
--rmm-overlay-cursor: default; /* 오버레이로는 닫을 수 없음 */
|
|
658
|
+
--rmm-overlay-cursor-closable: pointer; /* 클릭 또는 더블클릭으로 닫힘 */
|
|
641
659
|
|
|
642
660
|
/* Header */
|
|
643
661
|
--rmm-header-height: 48px;
|
|
@@ -798,6 +816,19 @@ MIT License
|
|
|
798
816
|
|
|
799
817
|
## 변경 이력
|
|
800
818
|
|
|
819
|
+
> v1.0.38 ~ v1.0.58 의 상세 변경 이력은 **[OPTIONS.md](OPTIONS.md)** 참조. 아래는 주요 항목만.
|
|
820
|
+
|
|
821
|
+
### v1.0.59
|
|
822
|
+
|
|
823
|
+
- **submenu_groups 초기 footer 버그 픽스** — 여러 서브메뉴 그룹 사용 시 마지막 그룹의 active 탭 `footer_buttons` 가 초기 footer 를 덮어쓰던 문제. connect 시 초기 footer 반영을 활성 그룹(`rmm-submenu-group-active`)으로 한정.
|
|
824
|
+
|
|
825
|
+
### v1.0.58
|
|
826
|
+
|
|
827
|
+
- **z-index 계층 재배치** — v1.0.57 의 `modal > taskbar` 배치가 모달이 태스크바를 덮어 최소화 항목을 클릭할 수 없게 만든 문제 수정
|
|
828
|
+
- `overlay 1400 < modal 1500~8000 < taskbar 9000 < 내장 confirm 10000`
|
|
829
|
+
- **`MAX_Z_INDEX` (8000) 상한 도입** — 모달을 반복해서 앞으로 가져올 때 z-index 가 무한 증가해 태스크바를 다시 덮던 근본 원인 제거. 상한 도달 시 쌓임 순서를 보존한 채 재할당
|
|
830
|
+
- ⚠️ 호스트 앱의 `position: fixed` 요소는 **1500~8000 대역을 비워두고**, 모달 위에 떠야 하는 전역 UI(스낵바·토스트·컨텍스트 메뉴)는 9000 초과로 배치 권장
|
|
831
|
+
|
|
801
832
|
### v1.0.37
|
|
802
833
|
|
|
803
834
|
- **커스텀 헤더 색상 옵션 추가**:
|
|
@@ -39,6 +39,10 @@
|
|
|
39
39
|
/* Overlay */
|
|
40
40
|
--rmm-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
41
41
|
--rmm-overlay-blur: 0px;
|
|
42
|
+
/* v1.0.60 — 오버레이 닫기 가능 여부를 커서로 알린다.
|
|
43
|
+
끄려면 프로젝트에서 --rmm-overlay-cursor-closable: default; 로 덮으면 된다. */
|
|
44
|
+
--rmm-overlay-cursor: default; /* 오버레이로는 닫을 수 없음 */
|
|
45
|
+
--rmm-overlay-cursor-closable: pointer; /* 클릭 또는 더블클릭으로 닫힘 */
|
|
42
46
|
|
|
43
47
|
/* Header — v1.0.57 블루 차콜 (사용자 지정 팔레트) */
|
|
44
48
|
--rmm-header-bg: #3e6187;
|
|
@@ -228,6 +232,29 @@
|
|
|
228
232
|
visibility var(--rmm-animation-duration) var(--rmm-animation-timing);
|
|
229
233
|
backdrop-filter: blur(1px);
|
|
230
234
|
-webkit-backdrop-filter: blur(1px);
|
|
235
|
+
/* v1.0.60 — 기본은 "닫을 수 없음". 닫히는 경우만 아래 속성 선택자가 덮는다. */
|
|
236
|
+
cursor: var(--rmm-overlay-cursor);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/* ⭐v1.0.60 — 오버레이 닫기 어포던스
|
|
240
|
+
오버레이 클릭으로 닫히는지 여부는 지금까지 화면에 아무 단서가 없어서, 사용자는 눌러 보기 전까지
|
|
241
|
+
알 수 없었다(닫히지 않으면 "고장난 것"으로 읽힌다). 정책은 이미 오버레이 요소의 data 속성에
|
|
242
|
+
실려 있으므로, 그 값을 그대로 커서로 표현한다.
|
|
243
|
+
|
|
244
|
+
⚠ 색상이 아니라 커서를 쓰는 이유:
|
|
245
|
+
· 모달 중첩 시 오버레이가 여러 장 겹치는데, 색은 섞여서 판별이 안 되지만 커서는 항상 최상단 것만 보인다
|
|
246
|
+
· 색만으로 정보를 전달하면 색각 이상 사용자가 구분할 수 없다 (WCAG 1.4.1)
|
|
247
|
+
· 학습이 필요 없다 — pointer 는 웹의 보편 규약이다
|
|
248
|
+
|
|
249
|
+
⚠ 선언 순서 주의: dblclick 규칙이 반드시 뒤에 와야 한다.
|
|
250
|
+
rmm_overlay_controller#handleClick 은 `if (!closeOnClick || closeOnDblclick) return` 이라
|
|
251
|
+
더블클릭 모드에서는 close_on_click 값과 무관하게 단일 클릭이 무시된다. 반대로 handleDblclick 은
|
|
252
|
+
closeOnDblclick 만 확인하므로, close_on_click=false + dblclick=true 조합도 "닫을 수 있는" 상태다. */
|
|
253
|
+
.rmm-overlay[data-rmm-overlay-close-on-click-value="true"] {
|
|
254
|
+
cursor: var(--rmm-overlay-cursor-closable);
|
|
255
|
+
}
|
|
256
|
+
.rmm-overlay[data-rmm-overlay-close-on-dblclick-value="true"] {
|
|
257
|
+
cursor: var(--rmm-overlay-cursor-closable);
|
|
231
258
|
}
|
|
232
259
|
|
|
233
260
|
.rmm-overlay.rmm-active {
|
|
@@ -53,10 +53,24 @@ export default class extends Controller {
|
|
|
53
53
|
this.currentItemId = activeItem.dataset.itemId
|
|
54
54
|
// v1.0.50+: 초기 active 탭에 탭별 footer 가 지정돼 있으면 바로 반영
|
|
55
55
|
// (모달 레벨 footer_buttons 로 렌더된 기본값을 override)
|
|
56
|
-
|
|
56
|
+
// v1.0.59: submenu_groups 사용 시 비활성 그룹은 초기 반영에서 제외.
|
|
57
|
+
// 모든 그룹의 controller 가 connect 되므로, 가드 없이는 DOM 상 마지막 그룹의
|
|
58
|
+
// active 탭 footer 가 실제 표시 중인 그룹의 footer 를 덮어쓴다.
|
|
59
|
+
if (this._isGroupActive()) {
|
|
60
|
+
this._applyFooterFromItem(activeItem)
|
|
61
|
+
}
|
|
57
62
|
}
|
|
58
63
|
}
|
|
59
64
|
|
|
65
|
+
/**
|
|
66
|
+
* 이 submenu 가 속한 그룹이 현재 표시 중인지 판정.
|
|
67
|
+
* 그룹 래퍼(.rmm-submenu-group)가 없으면 단일 submenu 이므로 항상 활성.
|
|
68
|
+
*/
|
|
69
|
+
_isGroupActive() {
|
|
70
|
+
const group = this.element.closest('.rmm-submenu-group')
|
|
71
|
+
return !group || group.classList.contains('rmm-submenu-group-active')
|
|
72
|
+
}
|
|
73
|
+
|
|
60
74
|
/**
|
|
61
75
|
* Increment the shared request counter on the content container.
|
|
62
76
|
* Called synchronously from selectItem/forceReloadActive BEFORE async loadAjaxContent.
|