rails_modal_manager 1.0.5 → 1.0.6
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: 0725e8d17ce5169b19c2f37ee399a214d79f4a8b7100b6ef21f57f43b17491bb
|
|
4
|
+
data.tar.gz: a843fe209ad313a64ec6221b3909dbc09e6066facbd84c14c22f0e344ad0fb82
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9b30aad93209f7069f017bde3ce88a97caa690dfc9a4be49da13e4d5d72370a1fe80fd325aac2fbc347a623dd2a64f668b333c2f5ba2d321193bcf58cf22e962
|
|
7
|
+
data.tar.gz: eaf415db4876d87a2d179183d499b0a18f7d1e106e8250392e2cacefc00431db72dccdbdb01e0e1a5b95d38a4beb64da33f1d5a83201035373ef884ec120f88c
|
data/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Rails 애플리케이션을 위한 고급 모달 매니저입니다.
|
|
4
4
|
`@reshacs/react-modal-manager`에서 포팅되었습니다.
|
|
5
5
|
|
|
6
|
-
**Version:** 1.0.
|
|
6
|
+
**Version:** 1.0.6
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
@@ -272,7 +272,26 @@ closeModal('my-modal')
|
|
|
272
272
|
</div>
|
|
273
273
|
```
|
|
274
274
|
|
|
275
|
-
**버튼 순서 권장:** [최소화] [크기조절] [닫기]
|
|
275
|
+
**버튼 순서 권장:** [최소화] [크기조절] [커스텀 버튼들] [닫기]
|
|
276
|
+
|
|
277
|
+
#### Header 커스텀 버튼
|
|
278
|
+
|
|
279
|
+
헤더에 커스텀 버튼을 추가할 수 있습니다:
|
|
280
|
+
|
|
281
|
+
```ruby
|
|
282
|
+
header_buttons: [
|
|
283
|
+
{ id: "delete-btn", icon: "trash", title: "삭제", variant: "danger", onclick: "deleteItem()" },
|
|
284
|
+
{ id: "edit-btn", icon: "edit", title: "수정", onclick: "editItem()" }
|
|
285
|
+
]
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
**Header Button Options:**
|
|
289
|
+
- `id` - 버튼 ID (선택)
|
|
290
|
+
- `icon` - 미리 정의된 아이콘: trash, edit, settings, info, warning, download, refresh, plus
|
|
291
|
+
- `icon_svg` - 커스텀 SVG 아이콘 (icon 옵션보다 우선)
|
|
292
|
+
- `title` - 툴팁 텍스트
|
|
293
|
+
- `variant` - 스타일: default, danger, warning, success, info
|
|
294
|
+
- `onclick` - JavaScript 클릭 핸들러
|
|
276
295
|
|
|
277
296
|
### Sidebar
|
|
278
297
|
|
|
@@ -384,6 +384,52 @@
|
|
|
384
384
|
height: 18px;
|
|
385
385
|
}
|
|
386
386
|
|
|
387
|
+
/* Custom header buttons */
|
|
388
|
+
.rmm-header-btn-custom {
|
|
389
|
+
opacity: 0.8;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.rmm-header-btn-custom:hover {
|
|
393
|
+
opacity: 1;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
/* Header button variants */
|
|
397
|
+
.rmm-header-btn-danger {
|
|
398
|
+
color: var(--rmm-btn-danger-bg);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.rmm-header-btn-danger:hover {
|
|
402
|
+
background: rgba(239, 68, 68, 0.15);
|
|
403
|
+
color: var(--rmm-btn-danger-hover);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.rmm-header-btn-warning {
|
|
407
|
+
color: var(--rmm-btn-warning-bg);
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.rmm-header-btn-warning:hover {
|
|
411
|
+
background: rgba(245, 158, 11, 0.15);
|
|
412
|
+
color: var(--rmm-btn-warning-hover);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.rmm-header-btn-success {
|
|
416
|
+
color: var(--rmm-btn-success-bg);
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.rmm-header-btn-success:hover {
|
|
420
|
+
background: rgba(34, 197, 94, 0.15);
|
|
421
|
+
color: var(--rmm-btn-success-hover);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.rmm-header-btn-info {
|
|
425
|
+
color: var(--rmm-btn-primary-bg);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.rmm-header-btn-info:hover {
|
|
429
|
+
background: rgba(59, 130, 246, 0.15);
|
|
430
|
+
color: var(--rmm-btn-primary-hover);
|
|
431
|
+
}
|
|
432
|
+
|
|
387
433
|
/* Size controls dropdown */
|
|
388
434
|
.rmm-size-controls {
|
|
389
435
|
position: relative;
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
show_size_controls: Boolean - Show size dropdown (default: false)
|
|
12
12
|
show_sidebar_toggle: Boolean - Show sidebar toggle on mobile (default: false)
|
|
13
13
|
current_size: String - Current modal size (default: "md")
|
|
14
|
+
header_buttons: Array - Custom header buttons (default: [])
|
|
15
|
+
Each button: { id: String, icon_svg: String, title: String, variant: String (default/danger/warning/success), onclick: String }
|
|
14
16
|
%>
|
|
15
17
|
<%
|
|
16
18
|
modal_id ||= ""
|
|
@@ -22,9 +24,22 @@
|
|
|
22
24
|
show_size_controls ||= false
|
|
23
25
|
show_sidebar_toggle ||= false
|
|
24
26
|
current_size ||= "md"
|
|
27
|
+
header_buttons ||= []
|
|
25
28
|
|
|
26
29
|
header_classes = ["rmm-header"]
|
|
27
30
|
header_classes << "rmm-draggable" if draggable
|
|
31
|
+
|
|
32
|
+
# Predefined icons
|
|
33
|
+
header_button_icons = {
|
|
34
|
+
"trash" => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>',
|
|
35
|
+
"edit" => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>',
|
|
36
|
+
"settings" => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>',
|
|
37
|
+
"info" => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>',
|
|
38
|
+
"warning" => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',
|
|
39
|
+
"download" => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>',
|
|
40
|
+
"refresh" => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>',
|
|
41
|
+
"plus" => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>'
|
|
42
|
+
}
|
|
28
43
|
%>
|
|
29
44
|
<div class="<%= header_classes.join(' ') %>"
|
|
30
45
|
data-controller="rmm-header"
|
|
@@ -128,6 +143,29 @@
|
|
|
128
143
|
</button>
|
|
129
144
|
<% end %>
|
|
130
145
|
|
|
146
|
+
<%# Custom header buttons %>
|
|
147
|
+
<% header_buttons.each do |btn| %>
|
|
148
|
+
<%
|
|
149
|
+
btn_id = btn[:id]
|
|
150
|
+
btn_icon = btn[:icon]
|
|
151
|
+
btn_icon_svg = btn[:icon_svg] || (btn_icon && header_button_icons[btn_icon])
|
|
152
|
+
btn_title = btn[:title] || ""
|
|
153
|
+
btn_variant = btn[:variant] || "default"
|
|
154
|
+
btn_onclick = btn[:onclick]
|
|
155
|
+
btn_class = "rmm-header-btn rmm-header-btn-custom"
|
|
156
|
+
btn_class += " rmm-header-btn-#{btn_variant}" if btn_variant != "default"
|
|
157
|
+
%>
|
|
158
|
+
<button type="button"
|
|
159
|
+
<% if btn_id.present? %>id="<%= btn_id %>"<% end %>
|
|
160
|
+
class="<%= btn_class %>"
|
|
161
|
+
<% if btn_onclick.present? %>onclick="<%= btn_onclick %>"<% end %>
|
|
162
|
+
title="<%= btn_title %>">
|
|
163
|
+
<% if btn_icon_svg.present? %>
|
|
164
|
+
<%= btn_icon_svg.html_safe %>
|
|
165
|
+
<% end %>
|
|
166
|
+
</button>
|
|
167
|
+
<% end %>
|
|
168
|
+
|
|
131
169
|
<% if closable %>
|
|
132
170
|
<button type="button"
|
|
133
171
|
class="rmm-header-btn rmm-close-btn"
|
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
submenu_items ||= []
|
|
79
79
|
footer_message ||= nil
|
|
80
80
|
footer_buttons ||= []
|
|
81
|
+
header_buttons ||= []
|
|
81
82
|
extra_class ||= ""
|
|
82
83
|
extra_data ||= {}
|
|
83
84
|
|
|
@@ -145,7 +146,8 @@
|
|
|
145
146
|
closable: closable,
|
|
146
147
|
show_size_controls: show_size_controls,
|
|
147
148
|
show_sidebar_toggle: show_sidebar,
|
|
148
|
-
current_size: size
|
|
149
|
+
current_size: size,
|
|
150
|
+
header_buttons: header_buttons
|
|
149
151
|
%>
|
|
150
152
|
<% end %>
|
|
151
153
|
|