plutonium 0.23.0 → 0.23.1
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/app/assets/plutonium.css +2 -2
- data/app/views/resource/interactive_resource_action.html.erb +1 -5
- data/app/views/rodauth/create_account.html.erb +1 -2
- data/config/initializers/sqlite_json_alias.rb +8 -0
- data/lib/plutonium/ui/form/theme.rb +2 -1
- data/lib/plutonium/ui/panel.rb +2 -6
- data/lib/plutonium/version.rb +1 -1
- data/src/css/core.css +13 -10
- data/src/css/easymde.css +1048 -572
- data/src/css/plutonium.entry.css +6 -15
- data/src/css/slim_select.css +227 -247
- data/tailwind.options.js +0 -1
- metadata +7 -37
- data/config/initializers/simple_form.rb +0 -74
- data/lib/plutonium/simple_form/attachment_component.rb +0 -85
- data/lib/plutonium/simple_form/input_group_component.rb +0 -17
data/src/css/plutonium.entry.css
CHANGED
@@ -4,20 +4,11 @@
|
|
4
4
|
@config '../../tailwind.config.js';
|
5
5
|
|
6
6
|
/*
|
7
|
-
|
8
|
-
|
9
|
-
looks the same as it did with Tailwind CSS v3.
|
10
|
-
|
11
|
-
If we ever want to remove these styles, we need to add an explicit border
|
12
|
-
color utility to any element that depends on these defaults.
|
7
|
+
Border color compatibility for Tailwind CSS v4
|
8
|
+
The default border color changed from gray-200 to currentColor in v4
|
13
9
|
*/
|
14
|
-
@layer base {
|
15
10
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
::file-selector-button {
|
21
|
-
border-color: var(--color-gray-200, currentColor);
|
22
|
-
}
|
23
|
-
}
|
11
|
+
/**
|
12
|
+
* File Upload Button Styling
|
13
|
+
* Styles for input[type="file"]::file-selector-button
|
14
|
+
*/
|
data/src/css/slim_select.css
CHANGED
@@ -1,313 +1,293 @@
|
|
1
1
|
/**
|
2
|
-
* Slim Select
|
3
|
-
*
|
4
|
-
|
5
|
-
*/
|
6
|
-
|
7
|
-
@layer components {
|
8
|
-
:root {
|
9
|
-
--ss-primary-color: theme('colors.primary.500');
|
10
|
-
--ss-bg-color: theme('colors.white');
|
11
|
-
--ss-font-color: theme('colors.gray.900');
|
12
|
-
--ss-font-placeholder-color: theme('colors.gray.500');
|
13
|
-
--ss-disabled-color: theme('colors.gray.100');
|
14
|
-
--ss-border-color: theme('colors.gray.300');
|
15
|
-
--ss-highlight-color: theme('colors.yellow.200');
|
16
|
-
--ss-success-color: theme('colors.green.500');
|
17
|
-
--ss-error-color: theme('colors.red.500');
|
18
|
-
--ss-focus-color: theme('colors.primary.500');
|
19
|
-
}
|
2
|
+
* Slim Select with Tailwind CSS
|
3
|
+
* Converted to use Tailwind design tokens and dark mode support
|
4
|
+
*/
|
20
5
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
--ss-disabled-color: theme('colors.gray.800');
|
27
|
-
--ss-border-color: theme('colors.gray.600');
|
28
|
-
--ss-highlight-color: theme('colors.yellow.300');
|
29
|
-
--ss-success-color: theme('colors.green.400');
|
30
|
-
--ss-error-color: theme('colors.red.400');
|
31
|
-
--ss-focus-color: theme('colors.primary.400');
|
6
|
+
/* Animation keyframes */
|
7
|
+
@keyframes ss-valueIn {
|
8
|
+
0% {
|
9
|
+
transform: scale(0);
|
10
|
+
opacity: 0;
|
32
11
|
}
|
33
12
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
opacity: 0;
|
38
|
-
}
|
39
|
-
|
40
|
-
100% {
|
41
|
-
transform: scale(1);
|
42
|
-
opacity: 1;
|
43
|
-
}
|
13
|
+
100% {
|
14
|
+
transform: scale(1);
|
15
|
+
opacity: 1;
|
44
16
|
}
|
17
|
+
}
|
45
18
|
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
}
|
51
|
-
|
52
|
-
100% {
|
53
|
-
transform: scale(0);
|
54
|
-
opacity: 0;
|
55
|
-
}
|
19
|
+
@keyframes ss-valueOut {
|
20
|
+
0% {
|
21
|
+
transform: scale(1);
|
22
|
+
opacity: 1;
|
56
23
|
}
|
57
24
|
|
58
|
-
|
59
|
-
|
25
|
+
100% {
|
26
|
+
transform: scale(0);
|
27
|
+
opacity: 0;
|
60
28
|
}
|
29
|
+
}
|
61
30
|
|
62
|
-
|
63
|
-
|
64
|
-
|
31
|
+
/* Hide utility */
|
32
|
+
.ss-hide {
|
33
|
+
@apply !hidden;
|
34
|
+
}
|
65
35
|
|
66
|
-
|
67
|
-
|
68
|
-
|
36
|
+
/* Main container */
|
37
|
+
.ss-main {
|
38
|
+
@apply flex flex-row relative select-none w-full min-h-8 p-1 cursor-pointer border border-gray-300 rounded bg-white text-gray-700 outline-none transition-colors duration-200 overflow-hidden focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200;
|
39
|
+
}
|
69
40
|
|
70
|
-
|
71
|
-
|
72
|
-
|
41
|
+
.ss-main.ss-disabled {
|
42
|
+
@apply cursor-not-allowed bg-gray-100 text-gray-500 dark:bg-gray-900 dark:text-gray-400;
|
43
|
+
}
|
73
44
|
|
74
|
-
|
75
|
-
|
76
|
-
|
45
|
+
.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete {
|
46
|
+
@apply cursor-not-allowed;
|
47
|
+
}
|
77
48
|
|
78
|
-
|
79
|
-
|
80
|
-
|
49
|
+
.ss-main.ss-open-above {
|
50
|
+
@apply rounded-t-none;
|
51
|
+
}
|
81
52
|
|
82
|
-
|
83
|
-
|
84
|
-
|
53
|
+
.ss-main.ss-open-below {
|
54
|
+
@apply rounded-b-none;
|
55
|
+
}
|
85
56
|
|
86
|
-
|
87
|
-
|
88
|
-
|
57
|
+
/* Values container */
|
58
|
+
.ss-main .ss-values {
|
59
|
+
@apply inline-flex flex-wrap gap-1 flex-1;
|
60
|
+
}
|
89
61
|
|
90
|
-
|
91
|
-
|
92
|
-
|
62
|
+
.ss-main .ss-values .ss-placeholder {
|
63
|
+
@apply flex px-2 py-1 my-auto leading-none items-center w-full text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap dark:text-gray-400;
|
64
|
+
}
|
93
65
|
|
94
|
-
|
95
|
-
|
96
|
-
|
66
|
+
.ss-main .ss-values .ss-max {
|
67
|
+
@apply flex select-none items-center w-fit text-xs text-white leading-none px-2 py-1 bg-primary-500 rounded;
|
68
|
+
}
|
97
69
|
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
}
|
70
|
+
.ss-main .ss-values .ss-single {
|
71
|
+
@apply flex my-auto ml-1;
|
72
|
+
}
|
102
73
|
|
103
|
-
|
104
|
-
|
105
|
-
|
74
|
+
.ss-main .ss-values .ss-value {
|
75
|
+
@apply flex select-none items-center w-fit bg-primary-500 rounded text-white;
|
76
|
+
animation: ss-valueIn 0.2s ease-out forwards;
|
77
|
+
}
|
106
78
|
|
107
|
-
|
108
|
-
|
109
|
-
|
79
|
+
.ss-main .ss-values .ss-value.ss-value-out {
|
80
|
+
animation: ss-valueOut 0.2s ease-out forwards;
|
81
|
+
}
|
110
82
|
|
111
|
-
|
112
|
-
|
113
|
-
|
83
|
+
.ss-main .ss-values .ss-value .ss-value-text {
|
84
|
+
@apply text-xs leading-none px-2 py-1;
|
85
|
+
}
|
114
86
|
|
115
|
-
|
116
|
-
|
117
|
-
|
87
|
+
.ss-main .ss-values .ss-value .ss-value-delete {
|
88
|
+
@apply flex items-center h-2 w-2 px-2 py-1 cursor-pointer border-l border-solid border-white;
|
89
|
+
box-sizing: content-box;
|
90
|
+
}
|
118
91
|
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
stroke-linecap: round;
|
123
|
-
stroke-linejoin: round;
|
124
|
-
}
|
92
|
+
.ss-main .ss-values .ss-value .ss-value-delete svg {
|
93
|
+
@apply h-2 w-2;
|
94
|
+
}
|
125
95
|
|
126
|
-
|
127
|
-
|
128
|
-
|
96
|
+
.ss-main .ss-values .ss-value .ss-value-delete svg path {
|
97
|
+
@apply fill-none stroke-white;
|
98
|
+
stroke-width: 18;
|
99
|
+
stroke-linecap: round;
|
100
|
+
stroke-linejoin: round;
|
101
|
+
}
|
129
102
|
|
130
|
-
|
131
|
-
|
132
|
-
|
103
|
+
/* Deselect button */
|
104
|
+
.ss-main .ss-deselect {
|
105
|
+
@apply flex-none flex items-center justify-center w-fit h-auto px-2;
|
106
|
+
}
|
133
107
|
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
stroke-linecap: round;
|
138
|
-
stroke-linejoin: round;
|
139
|
-
}
|
108
|
+
.ss-main .ss-deselect svg {
|
109
|
+
@apply w-2 h-2;
|
110
|
+
}
|
140
111
|
|
141
|
-
|
142
|
-
|
143
|
-
|
112
|
+
.ss-main .ss-deselect svg path {
|
113
|
+
@apply fill-none stroke-gray-700 dark:stroke-gray-300;
|
114
|
+
stroke-width: 20;
|
115
|
+
stroke-linecap: round;
|
116
|
+
stroke-linejoin: round;
|
117
|
+
}
|
144
118
|
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
stroke-linejoin: round;
|
150
|
-
}
|
119
|
+
/* Arrow */
|
120
|
+
.ss-main .ss-arrow {
|
121
|
+
@apply flex-none flex items-center justify-end w-3 h-3 mx-2 my-auto;
|
122
|
+
}
|
151
123
|
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
124
|
+
.ss-main .ss-arrow path {
|
125
|
+
@apply fill-none stroke-gray-700 transition-transform duration-200 dark:stroke-gray-300;
|
126
|
+
stroke-width: 18;
|
127
|
+
stroke-linecap: round;
|
128
|
+
stroke-linejoin: round;
|
129
|
+
}
|
157
130
|
|
158
|
-
|
159
|
-
|
160
|
-
|
131
|
+
/* Content container */
|
132
|
+
.ss-content {
|
133
|
+
@apply absolute flex h-auto flex-col w-auto max-h-72 border border-gray-300 bg-white shadow-lg transition-all duration-200 opacity-0 z-[10000] overflow-hidden dark:bg-gray-800 dark:border-gray-600;
|
134
|
+
transform: scaleY(0);
|
135
|
+
transform-origin: top;
|
136
|
+
}
|
161
137
|
|
162
|
-
|
163
|
-
|
164
|
-
|
138
|
+
.ss-content.ss-relative {
|
139
|
+
@apply relative h-full;
|
140
|
+
}
|
165
141
|
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
transform-origin: bottom;
|
170
|
-
}
|
142
|
+
.ss-content.ss-fixed {
|
143
|
+
@apply fixed;
|
144
|
+
}
|
171
145
|
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
146
|
+
.ss-content.ss-open-above {
|
147
|
+
@apply flex-col-reverse opacity-100 rounded-t;
|
148
|
+
transform: scaleY(1);
|
149
|
+
transform-origin: bottom;
|
150
|
+
}
|
177
151
|
|
178
|
-
|
179
|
-
|
180
|
-
|
152
|
+
.ss-content.ss-open-below {
|
153
|
+
@apply opacity-100 rounded-b;
|
154
|
+
transform: scaleY(1);
|
155
|
+
transform-origin: top;
|
156
|
+
}
|
181
157
|
|
182
|
-
|
183
|
-
|
184
|
-
|
158
|
+
/* Search */
|
159
|
+
.ss-content .ss-search {
|
160
|
+
@apply flex-none flex flex-row p-2;
|
161
|
+
}
|
185
162
|
|
186
|
-
|
187
|
-
|
188
|
-
|
163
|
+
.ss-content .ss-search input {
|
164
|
+
@apply inline-flex flex-auto w-full min-w-0 p-2 m-0 border border-gray-300 rounded bg-white outline-none text-left placeholder:text-gray-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder:text-gray-400;
|
165
|
+
box-sizing: border-box;
|
166
|
+
font-size: inherit;
|
167
|
+
line-height: inherit;
|
168
|
+
}
|
189
169
|
|
190
|
-
|
191
|
-
|
192
|
-
|
170
|
+
.ss-content .ss-search .ss-addable {
|
171
|
+
@apply inline-flex justify-center items-center cursor-pointer flex-none h-auto ml-2 border border-gray-300 rounded dark:border-gray-600;
|
172
|
+
}
|
193
173
|
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
stroke-linecap: round;
|
198
|
-
stroke-linejoin: round;
|
199
|
-
}
|
174
|
+
.ss-content .ss-search .ss-addable svg {
|
175
|
+
@apply flex items-center justify-end flex-none w-3 h-3 mx-2 my-auto;
|
176
|
+
}
|
200
177
|
|
201
|
-
|
202
|
-
|
203
|
-
|
178
|
+
.ss-content .ss-search .ss-addable svg path {
|
179
|
+
@apply fill-none stroke-gray-700 dark:stroke-gray-300;
|
180
|
+
stroke-width: 18;
|
181
|
+
stroke-linecap: round;
|
182
|
+
stroke-linejoin: round;
|
183
|
+
}
|
204
184
|
|
205
|
-
|
206
|
-
|
207
|
-
|
185
|
+
/* List */
|
186
|
+
.ss-content .ss-list {
|
187
|
+
@apply flex-auto h-auto overflow-x-hidden overflow-y-auto;
|
188
|
+
}
|
208
189
|
|
209
|
-
|
210
|
-
|
211
|
-
|
190
|
+
.ss-content .ss-list .ss-error {
|
191
|
+
@apply text-red-500 p-2 dark:text-red-400;
|
192
|
+
}
|
212
193
|
|
213
|
-
|
214
|
-
|
215
|
-
|
194
|
+
.ss-content .ss-list .ss-searching {
|
195
|
+
@apply text-gray-700 p-2 dark:text-gray-200;
|
196
|
+
}
|
216
197
|
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
}
|
198
|
+
.ss-content .ss-list .ss-optgroup.ss-close .ss-option {
|
199
|
+
@apply !hidden;
|
200
|
+
}
|
221
201
|
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
202
|
+
/* Option groups */
|
203
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label {
|
204
|
+
@apply flex flex-row items-center justify-between p-2 bg-gray-50 dark:bg-gray-700;
|
205
|
+
}
|
226
206
|
|
227
|
-
|
228
|
-
|
229
|
-
|
207
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text {
|
208
|
+
@apply flex-auto font-bold text-gray-700 dark:text-gray-200;
|
209
|
+
}
|
230
210
|
|
231
|
-
|
232
|
-
|
233
|
-
|
211
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow) {
|
212
|
+
@apply cursor-pointer;
|
213
|
+
}
|
234
214
|
|
235
|
-
|
236
|
-
|
237
|
-
|
215
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions {
|
216
|
+
@apply flex-none flex flex-row items-center justify-center gap-1;
|
217
|
+
}
|
238
218
|
|
239
|
-
|
240
|
-
|
241
|
-
|
219
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall {
|
220
|
+
@apply flex-none flex flex-row cursor-pointer hover:opacity-50;
|
221
|
+
}
|
242
222
|
|
243
|
-
|
244
|
-
|
245
|
-
|
223
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path {
|
224
|
+
@apply stroke-red-500 dark:stroke-red-400;
|
225
|
+
}
|
246
226
|
|
247
|
-
|
248
|
-
|
249
|
-
|
227
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span {
|
228
|
+
@apply flex-none flex items-center justify-center text-[60%] text-center pr-1;
|
229
|
+
}
|
250
230
|
|
251
|
-
|
252
|
-
|
253
|
-
|
231
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg {
|
232
|
+
@apply flex-none w-3 h-3;
|
233
|
+
}
|
254
234
|
|
255
|
-
|
256
|
-
|
257
|
-
|
235
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path {
|
236
|
+
@apply fill-none stroke-green-500 dark:stroke-green-400;
|
237
|
+
stroke-linecap: round;
|
238
|
+
stroke-linejoin: round;
|
239
|
+
}
|
258
240
|
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
stroke-linejoin: round;
|
263
|
-
}
|
241
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child {
|
242
|
+
stroke-width: 5;
|
243
|
+
}
|
264
244
|
|
265
|
-
|
266
|
-
|
267
|
-
|
245
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child {
|
246
|
+
stroke-width: 11;
|
247
|
+
}
|
268
248
|
|
269
|
-
|
270
|
-
|
271
|
-
|
249
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable {
|
250
|
+
@apply flex-none flex flex-row cursor-pointer;
|
251
|
+
}
|
272
252
|
|
273
|
-
|
274
|
-
|
275
|
-
|
253
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow {
|
254
|
+
@apply flex-auto w-2.5 h-2.5;
|
255
|
+
}
|
276
256
|
|
277
|
-
|
278
|
-
|
279
|
-
|
257
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path {
|
258
|
+
@apply fill-none stroke-gray-700 transition-transform duration-200 dark:stroke-gray-300;
|
259
|
+
stroke-width: 18;
|
260
|
+
stroke-linecap: round;
|
261
|
+
stroke-linejoin: round;
|
262
|
+
}
|
280
263
|
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
stroke-linecap: round;
|
285
|
-
stroke-linejoin: round;
|
286
|
-
}
|
264
|
+
.ss-content .ss-list .ss-optgroup .ss-option {
|
265
|
+
@apply p-1 pl-6;
|
266
|
+
}
|
287
267
|
|
288
|
-
|
289
|
-
|
290
|
-
|
268
|
+
/* Options */
|
269
|
+
.ss-content .ss-list .ss-option {
|
270
|
+
@apply block p-2 whitespace-normal text-gray-700 cursor-pointer select-none hover:bg-primary-500 hover:text-white dark:text-gray-200 dark:hover:bg-primary-500 dark:hover:text-white;
|
271
|
+
min-height: 0;
|
272
|
+
}
|
291
273
|
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
}
|
274
|
+
.ss-content .ss-list .ss-option:empty {
|
275
|
+
@apply hidden p-0 m-0;
|
276
|
+
}
|
296
277
|
|
297
|
-
|
298
|
-
|
299
|
-
|
278
|
+
.ss-content .ss-list .ss-option.ss-highlighted,
|
279
|
+
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
|
280
|
+
@apply text-white bg-primary-500;
|
281
|
+
}
|
300
282
|
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
}
|
283
|
+
.ss-content .ss-list .ss-option.ss-disabled {
|
284
|
+
@apply cursor-not-allowed bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400;
|
285
|
+
}
|
305
286
|
|
306
|
-
|
307
|
-
|
308
|
-
|
287
|
+
.ss-content .ss-list .ss-option.ss-disabled:hover {
|
288
|
+
@apply text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800;
|
289
|
+
}
|
309
290
|
|
310
|
-
|
311
|
-
|
312
|
-
}
|
291
|
+
.ss-content .ss-list .ss-option .ss-search-highlight {
|
292
|
+
@apply inline-block bg-yellow-200 dark:bg-yellow-300;
|
313
293
|
}
|
data/tailwind.options.js
CHANGED