voidable-hotwire 0.5.2 → 0.6.0
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 +4 -4
- data/lib/generators/voidable/install/install_generator.rb +2 -2
- data/lib/generators/voidable/install/templates/application_sidebar.html.erb.tt +2 -2
- data/lib/generators/voidable/install/templates/application_topbar.html.erb.tt +1 -1
- data/lib/generators/voidable/install/templates/sidebar.html.erb.tt +2 -2
- data/lib/generators/voidable/install/templates/topbar.html.erb.tt +1 -1
- data/lib/generators/voidable/install/templates/voidable-devise.css +8 -2
- data/lib/generators/voidable/install/templates/voidable-layout-sidebar.css +19 -15
- data/lib/generators/voidable/install/templates/voidable-layout-topbar.css +14 -14
- data/lib/voidable/hotwire/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 59c7b2cc1d547ce69e4a1e1c2ac846ec6edbd2cd19073a85fa55344f3ebb6068
|
|
4
|
+
data.tar.gz: 560fadb3f3418b0de825ddf510f8d45e27cc0f5e5ca55a5be9637d910d2f6336
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8047f63314accf8dbb84d088543ec9e118baaeb245ad3e2b8af860bb57340d379ef9a9296947565c73307b60db75fc3115efdbd1ae4068aae54c0c173fee633f
|
|
7
|
+
data.tar.gz: c9fa0a2593164ca0a92dbaf6c0b39c17b51ec3775bf86a3f2a1927d347e6714f17c20d8576435cb68142b66823e6602a73c6664c4db7d034bb9038cbc6be848c
|
|
@@ -21,8 +21,8 @@ module Voidable
|
|
|
21
21
|
append_to_file importmap, <<~RUBY
|
|
22
22
|
|
|
23
23
|
# Voidable UI
|
|
24
|
-
pin "@voidable/ui", to: "https://cdn.jsdelivr.net/npm/@voidable/ui@0.5.
|
|
25
|
-
pin "@voidable/ui-hotwire", to: "https://cdn.jsdelivr.net/npm/@voidable/ui-hotwire@0.3.
|
|
24
|
+
pin "@voidable/ui", to: "https://cdn.jsdelivr.net/npm/@voidable/ui@0.5.3/+esm"
|
|
25
|
+
pin "@voidable/ui-hotwire", to: "https://cdn.jsdelivr.net/npm/@voidable/ui-hotwire@0.3.1/dist/index.js"
|
|
26
26
|
RUBY
|
|
27
27
|
say "Pinned @voidable/ui and @voidable/ui-hotwire in importmap", :green
|
|
28
28
|
end
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<script type="module" src="<%%= vite_asset_path('application.js') %>" data-turbo-track="reload"></script>
|
|
14
14
|
<% else %>
|
|
15
15
|
<%%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
|
16
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voidable/theme@0.
|
|
16
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voidable/theme@0.6.0/src/index.css" data-turbo-track="reload">
|
|
17
17
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.44.0/dist/tabler-icons.min.css">
|
|
18
18
|
<%%= stylesheet_link_tag "voidable-layout", "data-turbo-track": "reload" %>
|
|
19
19
|
<%%= stylesheet_link_tag "voidable-devise", "data-turbo-track": "reload" %>
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
<body>
|
|
25
25
|
<div class="app-shell">
|
|
26
|
-
<void-sidebar width="
|
|
26
|
+
<void-sidebar width="var(--void-app-sidebar-width)">
|
|
27
27
|
<div class="sidebar-header">
|
|
28
28
|
<div class="sidebar-brand-initial"><%= app_name.first.upcase %></div>
|
|
29
29
|
<div class="sidebar-brand-info">
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<script type="module" src="<%%= vite_asset_path('application.js') %>" data-turbo-track="reload"></script>
|
|
14
14
|
<% else %>
|
|
15
15
|
<%%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
|
16
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voidable/theme@0.
|
|
16
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voidable/theme@0.6.0/src/index.css" data-turbo-track="reload">
|
|
17
17
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.44.0/dist/tabler-icons.min.css">
|
|
18
18
|
<%%= stylesheet_link_tag "voidable-layout", "data-turbo-track": "reload" %>
|
|
19
19
|
<%%= stylesheet_link_tag "voidable-devise", "data-turbo-track": "reload" %>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<script type="module" src="<%%= vite_asset_path('application.js') %>" data-turbo-track="reload"></script>
|
|
14
14
|
<% else %>
|
|
15
15
|
<%%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
|
16
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voidable/theme@0.
|
|
16
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voidable/theme@0.6.0/src/index.css" data-turbo-track="reload">
|
|
17
17
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.44.0/dist/tabler-icons.min.css">
|
|
18
18
|
<%%= stylesheet_link_tag "voidable-layout-sidebar", "data-turbo-track": "reload" %>
|
|
19
19
|
<%%= stylesheet_link_tag "voidable-devise", "data-turbo-track": "reload" %>
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
<body>
|
|
25
25
|
<div class="app-shell">
|
|
26
|
-
<void-sidebar width="
|
|
26
|
+
<void-sidebar width="var(--void-app-sidebar-width)">
|
|
27
27
|
<div class="sidebar-header">
|
|
28
28
|
<div class="sidebar-brand-initial"><%= app_name.first.upcase %></div>
|
|
29
29
|
<div class="sidebar-brand-info">
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<script type="module" src="<%%= vite_asset_path('application.js') %>" data-turbo-track="reload"></script>
|
|
14
14
|
<% else %>
|
|
15
15
|
<%%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
|
16
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voidable/theme@0.
|
|
16
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@voidable/theme@0.6.0/src/index.css" data-turbo-track="reload">
|
|
17
17
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.44.0/dist/tabler-icons.min.css">
|
|
18
18
|
<%%= stylesheet_link_tag "voidable-layout-topbar", "data-turbo-track": "reload" %>
|
|
19
19
|
<%%= stylesheet_link_tag "voidable-devise", "data-turbo-track": "reload" %>
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
/* Devise view styles */
|
|
2
2
|
|
|
3
|
+
:root {
|
|
4
|
+
/* Gem-scoped tokens — override on :root in your app to customise. */
|
|
5
|
+
--void-app-form-max-width: 28rem;
|
|
6
|
+
--void-app-form-max-width-wide: 36rem;
|
|
7
|
+
}
|
|
8
|
+
|
|
3
9
|
/* Page-level container: centers content with max-width */
|
|
4
|
-
.devise-container { max-width:
|
|
5
|
-
.devise-container--wide { max-width:
|
|
10
|
+
.devise-container { max-width: var(--void-app-form-max-width); margin: 0 auto; padding: var(--void-space-8); }
|
|
11
|
+
.devise-container--wide { max-width: var(--void-app-form-max-width-wide); }
|
|
6
12
|
|
|
7
13
|
/* Card body padding */
|
|
8
14
|
.devise-card-body { padding: var(--void-space-6); }
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Gem-scoped layout tokens. Override on :root in your app to customise. */
|
|
3
|
+
--void-app-sidebar-width: 13.75rem; /* sidebar width AND .app-main offset */
|
|
4
|
+
--void-app-search-width: 13.75rem; /* topbar/header search input width */
|
|
5
|
+
--void-app-menu-min-width: 10rem; /* settings popover menu */
|
|
6
|
+
}
|
|
7
|
+
|
|
1
8
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
2
9
|
|
|
3
10
|
html {
|
|
@@ -19,6 +26,10 @@ a { color: inherit; text-decoration: none; }
|
|
|
19
26
|
|
|
20
27
|
/* Sidebar shell */
|
|
21
28
|
.app-shell {
|
|
29
|
+
/* Pin --void-sidebar-width (consumed by @voidable/theme's void-sidebar CSS)
|
|
30
|
+
to our gem-scoped token so the rendered width stays consistent even if
|
|
31
|
+
the void-sidebar component's JS hasn't upgraded the element yet. */
|
|
32
|
+
--void-sidebar-width: var(--void-app-sidebar-width);
|
|
22
33
|
display: flex;
|
|
23
34
|
min-height: 100dvh;
|
|
24
35
|
width: 100%;
|
|
@@ -207,7 +218,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
207
218
|
}
|
|
208
219
|
|
|
209
220
|
.settings-btn i {
|
|
210
|
-
font-size:
|
|
221
|
+
font-size: var(--void-text-base);
|
|
211
222
|
}
|
|
212
223
|
|
|
213
224
|
.sidebar-footer void-popover {
|
|
@@ -231,7 +242,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
231
242
|
display: flex;
|
|
232
243
|
flex-direction: column;
|
|
233
244
|
gap: var(--void-space-1);
|
|
234
|
-
min-width:
|
|
245
|
+
min-width: var(--void-app-menu-min-width);
|
|
235
246
|
}
|
|
236
247
|
|
|
237
248
|
.settings-menu-item {
|
|
@@ -258,7 +269,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
258
269
|
}
|
|
259
270
|
|
|
260
271
|
.settings-menu-item i {
|
|
261
|
-
font-size:
|
|
272
|
+
font-size: var(--void-text-md);
|
|
262
273
|
color: var(--void-color-text-secondary);
|
|
263
274
|
}
|
|
264
275
|
|
|
@@ -282,7 +293,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
282
293
|
}
|
|
283
294
|
|
|
284
295
|
.settings-menu-action i {
|
|
285
|
-
font-size:
|
|
296
|
+
font-size: var(--void-text-md);
|
|
286
297
|
color: var(--void-color-text-secondary);
|
|
287
298
|
}
|
|
288
299
|
|
|
@@ -296,7 +307,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
296
307
|
min-width: 0;
|
|
297
308
|
display: flex;
|
|
298
309
|
flex-direction: column;
|
|
299
|
-
margin-left:
|
|
310
|
+
margin-left: var(--void-app-sidebar-width);
|
|
300
311
|
height: 100dvh;
|
|
301
312
|
}
|
|
302
313
|
|
|
@@ -341,7 +352,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
341
352
|
color: var(--void-color-text-muted);
|
|
342
353
|
}
|
|
343
354
|
|
|
344
|
-
.app-content-header-search { width:
|
|
355
|
+
.app-content-header-search { width: var(--void-app-search-width); height: var(--void-space-8); }
|
|
345
356
|
.app-content-header-right void-button { height: var(--void-space-8); }
|
|
346
357
|
|
|
347
358
|
.app-content-body {
|
|
@@ -363,8 +374,8 @@ a { color: inherit; text-decoration: none; }
|
|
|
363
374
|
/* Scrollbar styling */
|
|
364
375
|
.app-content-body::-webkit-scrollbar,
|
|
365
376
|
.table-section void-table::-webkit-scrollbar {
|
|
366
|
-
width:
|
|
367
|
-
height:
|
|
377
|
+
width: var(--void-space-1h);
|
|
378
|
+
height: var(--void-space-1h);
|
|
368
379
|
}
|
|
369
380
|
|
|
370
381
|
.app-content-body::-webkit-scrollbar-track,
|
|
@@ -407,10 +418,6 @@ a { color: inherit; text-decoration: none; }
|
|
|
407
418
|
/* Detail views */
|
|
408
419
|
.detail-card-body { padding: var(--void-space-5); }
|
|
409
420
|
.detail-section-label { font-family: var(--void-font-sans); font-size: var(--void-text-xs); font-weight: var(--void-weight-semibold); color: var(--void-color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--void-space-3) 0; }
|
|
410
|
-
.detail-grid { display: grid; grid-template-columns: 10rem 1fr; gap: var(--void-space-3) var(--void-space-4); margin: 0; }
|
|
411
|
-
.detail-label { font-family: var(--void-font-sans); font-size: var(--void-text-sm); color: var(--void-color-text-secondary); margin: 0; padding-top: 2px; }
|
|
412
|
-
.detail-value { font-family: var(--void-font-sans); font-size: var(--void-text-sm); color: var(--void-color-text); margin: 0; }
|
|
413
|
-
.detail-value-mono { font-family: var(--void-font-mono); font-size: var(--void-text-sm); color: var(--void-color-text); margin: 0; }
|
|
414
421
|
|
|
415
422
|
/* Danger zone */
|
|
416
423
|
.danger-zone { margin-top: var(--void-space-5); padding: var(--void-space-4); border: 1px solid var(--void-color-border); border-radius: var(--void-radius-md); }
|
|
@@ -426,9 +433,6 @@ a { color: inherit; text-decoration: none; }
|
|
|
426
433
|
.form-error-list { margin: var(--void-space-2) 0 0 var(--void-space-4); padding: 0; }
|
|
427
434
|
.flash-alert { margin-bottom: var(--void-space-4); }
|
|
428
435
|
|
|
429
|
-
/* Dialog action row spaced from preceding content */
|
|
430
|
-
.modal-actions { display: flex; gap: var(--void-space-2); justify-content: flex-end; margin-top: var(--void-space-4); }
|
|
431
|
-
|
|
432
436
|
/* Table section */
|
|
433
437
|
.table-section {
|
|
434
438
|
flex: 1;
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Gem-scoped layout tokens. Override on :root in your app to customise. */
|
|
3
|
+
--void-app-sidebar-width: 13.75rem; /* sidebar width AND .app-main offset */
|
|
4
|
+
--void-app-search-width: 13.75rem; /* topbar/header search input width */
|
|
5
|
+
--void-app-menu-min-width: 10rem; /* settings popover menu */
|
|
6
|
+
}
|
|
7
|
+
|
|
1
8
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
2
9
|
|
|
3
10
|
html {
|
|
@@ -103,7 +110,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
103
110
|
}
|
|
104
111
|
|
|
105
112
|
.settings-btn i {
|
|
106
|
-
font-size:
|
|
113
|
+
font-size: var(--void-text-base);
|
|
107
114
|
}
|
|
108
115
|
|
|
109
116
|
.app-nav-right void-popover[position="bottom"] .void-popover-body {
|
|
@@ -115,7 +122,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
115
122
|
display: flex;
|
|
116
123
|
flex-direction: column;
|
|
117
124
|
gap: var(--void-space-1);
|
|
118
|
-
min-width:
|
|
125
|
+
min-width: var(--void-app-menu-min-width);
|
|
119
126
|
}
|
|
120
127
|
|
|
121
128
|
.settings-menu-item {
|
|
@@ -142,7 +149,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
142
149
|
}
|
|
143
150
|
|
|
144
151
|
.settings-menu-item i {
|
|
145
|
-
font-size:
|
|
152
|
+
font-size: var(--void-text-md);
|
|
146
153
|
color: var(--void-color-text-secondary);
|
|
147
154
|
}
|
|
148
155
|
|
|
@@ -166,7 +173,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
166
173
|
}
|
|
167
174
|
|
|
168
175
|
.settings-menu-action i {
|
|
169
|
-
font-size:
|
|
176
|
+
font-size: var(--void-text-md);
|
|
170
177
|
color: var(--void-color-text-secondary);
|
|
171
178
|
}
|
|
172
179
|
|
|
@@ -233,7 +240,7 @@ a { color: inherit; text-decoration: none; }
|
|
|
233
240
|
color: var(--void-color-text-muted);
|
|
234
241
|
}
|
|
235
242
|
|
|
236
|
-
.app-content-header-search { width:
|
|
243
|
+
.app-content-header-search { width: var(--void-app-search-width); height: var(--void-space-8); }
|
|
237
244
|
.app-content-header-right void-button { height: var(--void-space-8); }
|
|
238
245
|
|
|
239
246
|
/* Flash messages */
|
|
@@ -247,8 +254,8 @@ a { color: inherit; text-decoration: none; }
|
|
|
247
254
|
/* Scrollbar styling */
|
|
248
255
|
.app-content-body::-webkit-scrollbar,
|
|
249
256
|
.table-section void-table::-webkit-scrollbar {
|
|
250
|
-
width:
|
|
251
|
-
height:
|
|
257
|
+
width: var(--void-space-1h);
|
|
258
|
+
height: var(--void-space-1h);
|
|
252
259
|
}
|
|
253
260
|
|
|
254
261
|
.app-content-body::-webkit-scrollbar-track,
|
|
@@ -283,10 +290,6 @@ a { color: inherit; text-decoration: none; }
|
|
|
283
290
|
/* Detail views */
|
|
284
291
|
.detail-card-body { padding: var(--void-space-5); }
|
|
285
292
|
.detail-section-label { font-family: var(--void-font-sans); font-size: var(--void-text-xs); font-weight: var(--void-weight-semibold); color: var(--void-color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--void-space-3) 0; }
|
|
286
|
-
.detail-grid { display: grid; grid-template-columns: 10rem 1fr; gap: var(--void-space-3) var(--void-space-4); margin: 0; }
|
|
287
|
-
.detail-label { font-family: var(--void-font-sans); font-size: var(--void-text-sm); color: var(--void-color-text-secondary); margin: 0; padding-top: 2px; }
|
|
288
|
-
.detail-value { font-family: var(--void-font-sans); font-size: var(--void-text-sm); color: var(--void-color-text); margin: 0; }
|
|
289
|
-
.detail-value-mono { font-family: var(--void-font-mono); font-size: var(--void-text-sm); color: var(--void-color-text); margin: 0; }
|
|
290
293
|
|
|
291
294
|
/* Danger zone */
|
|
292
295
|
.danger-zone { margin-top: var(--void-space-5); padding: var(--void-space-4); border: 1px solid var(--void-color-border); border-radius: var(--void-radius-md); }
|
|
@@ -302,9 +305,6 @@ a { color: inherit; text-decoration: none; }
|
|
|
302
305
|
.form-error-list { margin: var(--void-space-2) 0 0 var(--void-space-4); padding: 0; }
|
|
303
306
|
.flash-alert { margin-bottom: var(--void-space-4); }
|
|
304
307
|
|
|
305
|
-
/* Dialog action row spaced from preceding content */
|
|
306
|
-
.modal-actions { display: flex; gap: var(--void-space-2); justify-content: flex-end; margin-top: var(--void-space-4); }
|
|
307
|
-
|
|
308
308
|
/* Table section */
|
|
309
309
|
.table-section {
|
|
310
310
|
flex: 1;
|