okonomi_ui_kit 0.1.4 → 0.1.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 +4 -4
- data/app/assets/builds/okonomi_ui_kit/application.tailwind.css +280 -4
- data/app/helpers/okonomi_ui_kit/component.rb +18 -0
- data/app/helpers/okonomi_ui_kit/components/alert.rb +9 -0
- data/app/helpers/okonomi_ui_kit/components/badge.rb +26 -0
- data/app/helpers/okonomi_ui_kit/components/typography.rb +42 -0
- data/app/helpers/okonomi_ui_kit/form_builder.rb +11 -0
- data/app/helpers/okonomi_ui_kit/theme.rb +52 -0
- data/app/helpers/okonomi_ui_kit/ui_helper.rb +39 -27
- data/app/javascript/okonomi_ui_kit/controllers/modal_controller.js +94 -0
- data/app/views/okonomi/components/alert/_alert.html.erb +3 -0
- data/app/views/okonomi/components/typography/_typography.html.erb +7 -0
- data/app/views/okonomi/modals/_confirmation_modal.html.erb +77 -0
- data/lib/okonomi_ui_kit/version.rb +1 -1
- metadata +14 -4
- data/app/views/okonomi/components/_typography.html.erb +0 -7
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2c9f6e01883b276ac9f9698f3d62b837b2b015e43c58928c2dce2a8f7d989ec9
|
|
4
|
+
data.tar.gz: 70f433e695cec861ff14035220709e8d56115b4747d18e4397b342d8f5693e0d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b1477d7d86ad3def41842194405981bfcaed050bde961961f1e75f74ccc7057b9c0dbd4c06686f1c6639042e17bfef01fe5947a27fc895f516f257c878ac3f68
|
|
7
|
+
data.tar.gz: 3ac01a8f7d26c04b62b3af528e32003f98b59f4caa06da35fd1f974e36017b7fe4c21589a32bf3ca50d14eecee641a719871ee7bb1b2ef3f3bef15652de4a503
|
|
@@ -27,9 +27,12 @@
|
|
|
27
27
|
--color-amber-700: oklch(55.5% 0.163 48.998);
|
|
28
28
|
--color-amber-800: oklch(47.3% 0.137 46.201);
|
|
29
29
|
--color-amber-900: oklch(41.4% 0.112 45.904);
|
|
30
|
+
--color-yellow-50: oklch(98.7% 0.026 102.212);
|
|
30
31
|
--color-yellow-100: oklch(97.3% 0.071 103.193);
|
|
32
|
+
--color-yellow-200: oklch(94.5% 0.129 101.54);
|
|
31
33
|
--color-yellow-400: oklch(85.2% 0.199 91.936);
|
|
32
34
|
--color-yellow-500: oklch(79.5% 0.184 86.047);
|
|
35
|
+
--color-yellow-700: oklch(55.4% 0.135 66.442);
|
|
33
36
|
--color-yellow-800: oklch(47.6% 0.114 61.907);
|
|
34
37
|
--color-green-50: oklch(98.2% 0.018 155.826);
|
|
35
38
|
--color-green-100: oklch(96.2% 0.044 156.743);
|
|
@@ -94,6 +97,8 @@
|
|
|
94
97
|
--color-white: #fff;
|
|
95
98
|
--spacing: 0.25rem;
|
|
96
99
|
--container-xs: 20rem;
|
|
100
|
+
--container-sm: 24rem;
|
|
101
|
+
--container-lg: 32rem;
|
|
97
102
|
--container-2xl: 42rem;
|
|
98
103
|
--container-4xl: 56rem;
|
|
99
104
|
--container-7xl: 80rem;
|
|
@@ -113,6 +118,8 @@
|
|
|
113
118
|
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
114
119
|
--text-4xl: 2.25rem;
|
|
115
120
|
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
121
|
+
--text-6xl: 3.75rem;
|
|
122
|
+
--text-6xl--line-height: 1;
|
|
116
123
|
--font-weight-normal: 400;
|
|
117
124
|
--font-weight-medium: 500;
|
|
118
125
|
--font-weight-semibold: 600;
|
|
@@ -322,21 +329,36 @@
|
|
|
322
329
|
.absolute {
|
|
323
330
|
position: absolute;
|
|
324
331
|
}
|
|
332
|
+
.fixed {
|
|
333
|
+
position: fixed;
|
|
334
|
+
}
|
|
325
335
|
.relative {
|
|
326
336
|
position: relative;
|
|
327
337
|
}
|
|
328
338
|
.static {
|
|
329
339
|
position: static;
|
|
330
340
|
}
|
|
341
|
+
.-inset-0 {
|
|
342
|
+
inset: calc(var(--spacing) * -0);
|
|
343
|
+
}
|
|
331
344
|
.-inset-0\.5 {
|
|
332
345
|
inset: calc(var(--spacing) * -0.5);
|
|
333
346
|
}
|
|
347
|
+
.-inset-1 {
|
|
348
|
+
inset: calc(var(--spacing) * -1);
|
|
349
|
+
}
|
|
334
350
|
.-inset-1\.5 {
|
|
335
351
|
inset: calc(var(--spacing) * -1.5);
|
|
336
352
|
}
|
|
353
|
+
.inset-0 {
|
|
354
|
+
inset: calc(var(--spacing) * 0);
|
|
355
|
+
}
|
|
337
356
|
.inset-y-0 {
|
|
338
357
|
inset-block: calc(var(--spacing) * 0);
|
|
339
358
|
}
|
|
359
|
+
.top-0 {
|
|
360
|
+
top: calc(var(--spacing) * 0);
|
|
361
|
+
}
|
|
340
362
|
.top-2 {
|
|
341
363
|
top: calc(var(--spacing) * 2);
|
|
342
364
|
}
|
|
@@ -388,6 +410,12 @@
|
|
|
388
410
|
.mx-auto {
|
|
389
411
|
margin-inline: auto;
|
|
390
412
|
}
|
|
413
|
+
.mt-0 {
|
|
414
|
+
margin-top: calc(var(--spacing) * 0);
|
|
415
|
+
}
|
|
416
|
+
.mt-0\.5 {
|
|
417
|
+
margin-top: calc(var(--spacing) * 0.5);
|
|
418
|
+
}
|
|
391
419
|
.mt-1 {
|
|
392
420
|
margin-top: calc(var(--spacing) * 1);
|
|
393
421
|
}
|
|
@@ -400,6 +428,9 @@
|
|
|
400
428
|
.mt-4 {
|
|
401
429
|
margin-top: calc(var(--spacing) * 4);
|
|
402
430
|
}
|
|
431
|
+
.mt-5 {
|
|
432
|
+
margin-top: calc(var(--spacing) * 5);
|
|
433
|
+
}
|
|
403
434
|
.mt-6 {
|
|
404
435
|
margin-top: calc(var(--spacing) * 6);
|
|
405
436
|
}
|
|
@@ -525,6 +556,9 @@
|
|
|
525
556
|
.max-h-32 {
|
|
526
557
|
max-height: calc(var(--spacing) * 32);
|
|
527
558
|
}
|
|
559
|
+
.min-h-full {
|
|
560
|
+
min-height: 100%;
|
|
561
|
+
}
|
|
528
562
|
.min-h-screen {
|
|
529
563
|
min-height: 100vh;
|
|
530
564
|
}
|
|
@@ -558,6 +592,9 @@
|
|
|
558
592
|
.w-full {
|
|
559
593
|
width: 100%;
|
|
560
594
|
}
|
|
595
|
+
.w-screen {
|
|
596
|
+
width: 100vw;
|
|
597
|
+
}
|
|
561
598
|
.max-w-2xl {
|
|
562
599
|
max-width: var(--container-2xl);
|
|
563
600
|
}
|
|
@@ -579,12 +616,26 @@
|
|
|
579
616
|
.flex-1 {
|
|
580
617
|
flex: 1;
|
|
581
618
|
}
|
|
619
|
+
.flex-shrink {
|
|
620
|
+
flex-shrink: 1;
|
|
621
|
+
}
|
|
582
622
|
.shrink-0 {
|
|
583
623
|
flex-shrink: 0;
|
|
584
624
|
}
|
|
625
|
+
.border-collapse {
|
|
626
|
+
border-collapse: collapse;
|
|
627
|
+
}
|
|
585
628
|
.origin-top-right {
|
|
586
629
|
transform-origin: top right;
|
|
587
630
|
}
|
|
631
|
+
.translate-y-0 {
|
|
632
|
+
--tw-translate-y: calc(var(--spacing) * 0);
|
|
633
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
634
|
+
}
|
|
635
|
+
.translate-y-4 {
|
|
636
|
+
--tw-translate-y: calc(var(--spacing) * 4);
|
|
637
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
638
|
+
}
|
|
588
639
|
.scale-75 {
|
|
589
640
|
--tw-scale-x: 75%;
|
|
590
641
|
--tw-scale-y: 75%;
|
|
@@ -615,6 +666,9 @@
|
|
|
615
666
|
.cursor-pointer {
|
|
616
667
|
cursor: pointer;
|
|
617
668
|
}
|
|
669
|
+
.resize {
|
|
670
|
+
resize: both;
|
|
671
|
+
}
|
|
618
672
|
.appearance-none {
|
|
619
673
|
appearance: none;
|
|
620
674
|
}
|
|
@@ -636,6 +690,9 @@
|
|
|
636
690
|
.items-center {
|
|
637
691
|
align-items: center;
|
|
638
692
|
}
|
|
693
|
+
.items-end {
|
|
694
|
+
align-items: flex-end;
|
|
695
|
+
}
|
|
639
696
|
.items-start {
|
|
640
697
|
align-items: flex-start;
|
|
641
698
|
}
|
|
@@ -773,6 +830,9 @@
|
|
|
773
830
|
.overflow-x-auto {
|
|
774
831
|
overflow-x: auto;
|
|
775
832
|
}
|
|
833
|
+
.overflow-y-auto {
|
|
834
|
+
overflow-y: auto;
|
|
835
|
+
}
|
|
776
836
|
.rounded {
|
|
777
837
|
border-radius: 0.25rem;
|
|
778
838
|
}
|
|
@@ -886,6 +946,9 @@
|
|
|
886
946
|
.border-warning-700 {
|
|
887
947
|
border-color: var(--color-warning-700);
|
|
888
948
|
}
|
|
949
|
+
.border-yellow-200 {
|
|
950
|
+
border-color: var(--color-yellow-200);
|
|
951
|
+
}
|
|
889
952
|
.bg-blue-50 {
|
|
890
953
|
background-color: var(--color-blue-50);
|
|
891
954
|
}
|
|
@@ -895,6 +958,9 @@
|
|
|
895
958
|
.bg-blue-600 {
|
|
896
959
|
background-color: var(--color-blue-600);
|
|
897
960
|
}
|
|
961
|
+
.bg-danger-50 {
|
|
962
|
+
background-color: var(--color-danger-50);
|
|
963
|
+
}
|
|
898
964
|
.bg-danger-100 {
|
|
899
965
|
background-color: var(--color-danger-100);
|
|
900
966
|
}
|
|
@@ -916,12 +982,24 @@
|
|
|
916
982
|
.bg-gray-300 {
|
|
917
983
|
background-color: var(--color-gray-300);
|
|
918
984
|
}
|
|
985
|
+
.bg-gray-500 {
|
|
986
|
+
background-color: var(--color-gray-500);
|
|
987
|
+
}
|
|
988
|
+
.bg-gray-500\/75 {
|
|
989
|
+
background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 75%, transparent);
|
|
990
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
991
|
+
background-color: color-mix(in oklab, var(--color-gray-500) 75%, transparent);
|
|
992
|
+
}
|
|
993
|
+
}
|
|
919
994
|
.bg-gray-900 {
|
|
920
995
|
background-color: var(--color-gray-900);
|
|
921
996
|
}
|
|
922
997
|
.bg-green-100 {
|
|
923
998
|
background-color: var(--color-green-100);
|
|
924
999
|
}
|
|
1000
|
+
.bg-green-500 {
|
|
1001
|
+
background-color: var(--color-green-500);
|
|
1002
|
+
}
|
|
925
1003
|
.bg-info-600 {
|
|
926
1004
|
background-color: var(--color-info-600);
|
|
927
1005
|
}
|
|
@@ -940,15 +1018,24 @@
|
|
|
940
1018
|
.bg-secondary-600 {
|
|
941
1019
|
background-color: var(--color-secondary-600);
|
|
942
1020
|
}
|
|
1021
|
+
.bg-success-50 {
|
|
1022
|
+
background-color: var(--color-success-50);
|
|
1023
|
+
}
|
|
943
1024
|
.bg-success-600 {
|
|
944
1025
|
background-color: var(--color-success-600);
|
|
945
1026
|
}
|
|
1027
|
+
.bg-warning-50 {
|
|
1028
|
+
background-color: var(--color-warning-50);
|
|
1029
|
+
}
|
|
946
1030
|
.bg-warning-600 {
|
|
947
1031
|
background-color: var(--color-warning-600);
|
|
948
1032
|
}
|
|
949
1033
|
.bg-white {
|
|
950
1034
|
background-color: var(--color-white);
|
|
951
1035
|
}
|
|
1036
|
+
.bg-yellow-50 {
|
|
1037
|
+
background-color: var(--color-yellow-50);
|
|
1038
|
+
}
|
|
952
1039
|
.bg-yellow-100 {
|
|
953
1040
|
background-color: var(--color-yellow-100);
|
|
954
1041
|
}
|
|
@@ -991,6 +1078,9 @@
|
|
|
991
1078
|
.px-6 {
|
|
992
1079
|
padding-inline: calc(var(--spacing) * 6);
|
|
993
1080
|
}
|
|
1081
|
+
.py-0 {
|
|
1082
|
+
padding-block: calc(var(--spacing) * 0);
|
|
1083
|
+
}
|
|
994
1084
|
.py-0\.5 {
|
|
995
1085
|
padding-block: calc(var(--spacing) * 0.5);
|
|
996
1086
|
}
|
|
@@ -1000,12 +1090,18 @@
|
|
|
1000
1090
|
.py-2 {
|
|
1001
1091
|
padding-block: calc(var(--spacing) * 2);
|
|
1002
1092
|
}
|
|
1093
|
+
.py-3 {
|
|
1094
|
+
padding-block: calc(var(--spacing) * 3);
|
|
1095
|
+
}
|
|
1003
1096
|
.py-3\.5 {
|
|
1004
1097
|
padding-block: calc(var(--spacing) * 3.5);
|
|
1005
1098
|
}
|
|
1006
1099
|
.py-4 {
|
|
1007
1100
|
padding-block: calc(var(--spacing) * 4);
|
|
1008
1101
|
}
|
|
1102
|
+
.py-5 {
|
|
1103
|
+
padding-block: calc(var(--spacing) * 5);
|
|
1104
|
+
}
|
|
1009
1105
|
.py-6 {
|
|
1010
1106
|
padding-block: calc(var(--spacing) * 6);
|
|
1011
1107
|
}
|
|
@@ -1024,6 +1120,9 @@
|
|
|
1024
1120
|
.pt-4 {
|
|
1025
1121
|
padding-top: calc(var(--spacing) * 4);
|
|
1026
1122
|
}
|
|
1123
|
+
.pt-5 {
|
|
1124
|
+
padding-top: calc(var(--spacing) * 5);
|
|
1125
|
+
}
|
|
1027
1126
|
.pr-3 {
|
|
1028
1127
|
padding-right: calc(var(--spacing) * 3);
|
|
1029
1128
|
}
|
|
@@ -1039,6 +1138,9 @@
|
|
|
1039
1138
|
.pb-3 {
|
|
1040
1139
|
padding-bottom: calc(var(--spacing) * 3);
|
|
1041
1140
|
}
|
|
1141
|
+
.pb-4 {
|
|
1142
|
+
padding-bottom: calc(var(--spacing) * 4);
|
|
1143
|
+
}
|
|
1042
1144
|
.pl-3 {
|
|
1043
1145
|
padding-left: calc(var(--spacing) * 3);
|
|
1044
1146
|
}
|
|
@@ -1069,6 +1171,10 @@
|
|
|
1069
1171
|
font-size: var(--text-4xl);
|
|
1070
1172
|
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
|
1071
1173
|
}
|
|
1174
|
+
.text-6xl {
|
|
1175
|
+
font-size: var(--text-6xl);
|
|
1176
|
+
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
|
1177
|
+
}
|
|
1072
1178
|
.text-base {
|
|
1073
1179
|
font-size: var(--text-base);
|
|
1074
1180
|
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
@@ -1108,10 +1214,6 @@
|
|
|
1108
1214
|
--tw-leading: calc(var(--spacing) * 4);
|
|
1109
1215
|
line-height: calc(var(--spacing) * 4);
|
|
1110
1216
|
}
|
|
1111
|
-
.leading-6 {
|
|
1112
|
-
--tw-leading: calc(var(--spacing) * 6);
|
|
1113
|
-
line-height: calc(var(--spacing) * 6);
|
|
1114
|
-
}
|
|
1115
1217
|
.leading-7 {
|
|
1116
1218
|
--tw-leading: calc(var(--spacing) * 7);
|
|
1117
1219
|
line-height: calc(var(--spacing) * 7);
|
|
@@ -1243,9 +1345,15 @@
|
|
|
1243
1345
|
.text-yellow-500 {
|
|
1244
1346
|
color: var(--color-yellow-500);
|
|
1245
1347
|
}
|
|
1348
|
+
.text-yellow-700 {
|
|
1349
|
+
color: var(--color-yellow-700);
|
|
1350
|
+
}
|
|
1246
1351
|
.text-yellow-800 {
|
|
1247
1352
|
color: var(--color-yellow-800);
|
|
1248
1353
|
}
|
|
1354
|
+
.underline {
|
|
1355
|
+
text-decoration-line: underline;
|
|
1356
|
+
}
|
|
1249
1357
|
.opacity-0 {
|
|
1250
1358
|
opacity: 0%;
|
|
1251
1359
|
}
|
|
@@ -1264,10 +1372,17 @@
|
|
|
1264
1372
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1265
1373
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1266
1374
|
}
|
|
1375
|
+
.shadow-xl {
|
|
1376
|
+
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1377
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1378
|
+
}
|
|
1267
1379
|
.ring-1 {
|
|
1268
1380
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1269
1381
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1270
1382
|
}
|
|
1383
|
+
.ring-black {
|
|
1384
|
+
--tw-ring-color: var(--color-black);
|
|
1385
|
+
}
|
|
1271
1386
|
.ring-black\/5 {
|
|
1272
1387
|
--tw-ring-color: color-mix(in srgb, #000 5%, transparent);
|
|
1273
1388
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -1307,11 +1422,21 @@
|
|
|
1307
1422
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1308
1423
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1309
1424
|
}
|
|
1425
|
+
.transition-all {
|
|
1426
|
+
transition-property: all;
|
|
1427
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1428
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1429
|
+
}
|
|
1310
1430
|
.transition-colors {
|
|
1311
1431
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
1312
1432
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1313
1433
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1314
1434
|
}
|
|
1435
|
+
.transition-opacity {
|
|
1436
|
+
transition-property: opacity;
|
|
1437
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1438
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1439
|
+
}
|
|
1315
1440
|
.transition-shadow {
|
|
1316
1441
|
transition-property: box-shadow;
|
|
1317
1442
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
@@ -1329,6 +1454,10 @@
|
|
|
1329
1454
|
--tw-duration: 200ms;
|
|
1330
1455
|
transition-duration: 200ms;
|
|
1331
1456
|
}
|
|
1457
|
+
.duration-300 {
|
|
1458
|
+
--tw-duration: 300ms;
|
|
1459
|
+
transition-duration: 300ms;
|
|
1460
|
+
}
|
|
1332
1461
|
.ease-in {
|
|
1333
1462
|
--tw-ease: var(--ease-in);
|
|
1334
1463
|
transition-timing-function: var(--ease-in);
|
|
@@ -1606,6 +1735,11 @@
|
|
|
1606
1735
|
border-color: var(--color-blue-500);
|
|
1607
1736
|
}
|
|
1608
1737
|
}
|
|
1738
|
+
.focus\:border-indigo-500 {
|
|
1739
|
+
&:focus {
|
|
1740
|
+
border-color: var(--color-indigo-500);
|
|
1741
|
+
}
|
|
1742
|
+
}
|
|
1609
1743
|
.focus\:ring-0 {
|
|
1610
1744
|
&:focus {
|
|
1611
1745
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
@@ -1628,6 +1762,11 @@
|
|
|
1628
1762
|
--tw-ring-color: var(--color-danger-600);
|
|
1629
1763
|
}
|
|
1630
1764
|
}
|
|
1765
|
+
.focus\:ring-indigo-500 {
|
|
1766
|
+
&:focus {
|
|
1767
|
+
--tw-ring-color: var(--color-indigo-500);
|
|
1768
|
+
}
|
|
1769
|
+
}
|
|
1631
1770
|
.focus\:ring-primary-500 {
|
|
1632
1771
|
&:focus {
|
|
1633
1772
|
--tw-ring-color: var(--color-primary-500);
|
|
@@ -1697,21 +1836,51 @@
|
|
|
1697
1836
|
grid-column: span 3 / span 3;
|
|
1698
1837
|
}
|
|
1699
1838
|
}
|
|
1839
|
+
.sm\:mx-0 {
|
|
1840
|
+
@media (width >= 40rem) {
|
|
1841
|
+
margin-inline: calc(var(--spacing) * 0);
|
|
1842
|
+
}
|
|
1843
|
+
}
|
|
1700
1844
|
.sm\:-my-px {
|
|
1701
1845
|
@media (width >= 40rem) {
|
|
1702
1846
|
margin-block: -1px;
|
|
1703
1847
|
}
|
|
1704
1848
|
}
|
|
1849
|
+
.sm\:my-8 {
|
|
1850
|
+
@media (width >= 40rem) {
|
|
1851
|
+
margin-block: calc(var(--spacing) * 8);
|
|
1852
|
+
}
|
|
1853
|
+
}
|
|
1705
1854
|
.sm\:mt-0 {
|
|
1706
1855
|
@media (width >= 40rem) {
|
|
1707
1856
|
margin-top: calc(var(--spacing) * 0);
|
|
1708
1857
|
}
|
|
1709
1858
|
}
|
|
1859
|
+
.sm\:mt-4 {
|
|
1860
|
+
@media (width >= 40rem) {
|
|
1861
|
+
margin-top: calc(var(--spacing) * 4);
|
|
1862
|
+
}
|
|
1863
|
+
}
|
|
1864
|
+
.sm\:ml-3 {
|
|
1865
|
+
@media (width >= 40rem) {
|
|
1866
|
+
margin-left: calc(var(--spacing) * 3);
|
|
1867
|
+
}
|
|
1868
|
+
}
|
|
1869
|
+
.sm\:ml-4 {
|
|
1870
|
+
@media (width >= 40rem) {
|
|
1871
|
+
margin-left: calc(var(--spacing) * 4);
|
|
1872
|
+
}
|
|
1873
|
+
}
|
|
1710
1874
|
.sm\:ml-6 {
|
|
1711
1875
|
@media (width >= 40rem) {
|
|
1712
1876
|
margin-left: calc(var(--spacing) * 6);
|
|
1713
1877
|
}
|
|
1714
1878
|
}
|
|
1879
|
+
.sm\:block {
|
|
1880
|
+
@media (width >= 40rem) {
|
|
1881
|
+
display: block;
|
|
1882
|
+
}
|
|
1883
|
+
}
|
|
1715
1884
|
.sm\:flex {
|
|
1716
1885
|
@media (width >= 40rem) {
|
|
1717
1886
|
display: flex;
|
|
@@ -1733,16 +1902,84 @@
|
|
|
1733
1902
|
height: calc(var(--spacing) * 4);
|
|
1734
1903
|
}
|
|
1735
1904
|
}
|
|
1905
|
+
.sm\:size-10 {
|
|
1906
|
+
@media (width >= 40rem) {
|
|
1907
|
+
width: calc(var(--spacing) * 10);
|
|
1908
|
+
height: calc(var(--spacing) * 10);
|
|
1909
|
+
}
|
|
1910
|
+
}
|
|
1911
|
+
.sm\:w-auto {
|
|
1912
|
+
@media (width >= 40rem) {
|
|
1913
|
+
width: auto;
|
|
1914
|
+
}
|
|
1915
|
+
}
|
|
1916
|
+
.sm\:w-full {
|
|
1917
|
+
@media (width >= 40rem) {
|
|
1918
|
+
width: 100%;
|
|
1919
|
+
}
|
|
1920
|
+
}
|
|
1921
|
+
.sm\:max-w-2xl {
|
|
1922
|
+
@media (width >= 40rem) {
|
|
1923
|
+
max-width: var(--container-2xl);
|
|
1924
|
+
}
|
|
1925
|
+
}
|
|
1926
|
+
.sm\:max-w-4xl {
|
|
1927
|
+
@media (width >= 40rem) {
|
|
1928
|
+
max-width: var(--container-4xl);
|
|
1929
|
+
}
|
|
1930
|
+
}
|
|
1931
|
+
.sm\:max-w-lg {
|
|
1932
|
+
@media (width >= 40rem) {
|
|
1933
|
+
max-width: var(--container-lg);
|
|
1934
|
+
}
|
|
1935
|
+
}
|
|
1936
|
+
.sm\:max-w-sm {
|
|
1937
|
+
@media (width >= 40rem) {
|
|
1938
|
+
max-width: var(--container-sm);
|
|
1939
|
+
}
|
|
1940
|
+
}
|
|
1941
|
+
.sm\:translate-y-0 {
|
|
1942
|
+
@media (width >= 40rem) {
|
|
1943
|
+
--tw-translate-y: calc(var(--spacing) * 0);
|
|
1944
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1945
|
+
}
|
|
1946
|
+
}
|
|
1947
|
+
.sm\:scale-95 {
|
|
1948
|
+
@media (width >= 40rem) {
|
|
1949
|
+
--tw-scale-x: 95%;
|
|
1950
|
+
--tw-scale-y: 95%;
|
|
1951
|
+
--tw-scale-z: 95%;
|
|
1952
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
1953
|
+
}
|
|
1954
|
+
}
|
|
1955
|
+
.sm\:scale-100 {
|
|
1956
|
+
@media (width >= 40rem) {
|
|
1957
|
+
--tw-scale-x: 100%;
|
|
1958
|
+
--tw-scale-y: 100%;
|
|
1959
|
+
--tw-scale-z: 100%;
|
|
1960
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
1961
|
+
}
|
|
1962
|
+
}
|
|
1736
1963
|
.sm\:grid-cols-3 {
|
|
1737
1964
|
@media (width >= 40rem) {
|
|
1738
1965
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1739
1966
|
}
|
|
1740
1967
|
}
|
|
1968
|
+
.sm\:flex-row-reverse {
|
|
1969
|
+
@media (width >= 40rem) {
|
|
1970
|
+
flex-direction: row-reverse;
|
|
1971
|
+
}
|
|
1972
|
+
}
|
|
1741
1973
|
.sm\:items-center {
|
|
1742
1974
|
@media (width >= 40rem) {
|
|
1743
1975
|
align-items: center;
|
|
1744
1976
|
}
|
|
1745
1977
|
}
|
|
1978
|
+
.sm\:items-start {
|
|
1979
|
+
@media (width >= 40rem) {
|
|
1980
|
+
align-items: flex-start;
|
|
1981
|
+
}
|
|
1982
|
+
}
|
|
1746
1983
|
.sm\:gap-4 {
|
|
1747
1984
|
@media (width >= 40rem) {
|
|
1748
1985
|
gap: calc(var(--spacing) * 4);
|
|
@@ -1757,17 +1994,38 @@
|
|
|
1757
1994
|
}
|
|
1758
1995
|
}
|
|
1759
1996
|
}
|
|
1997
|
+
.sm\:p-0 {
|
|
1998
|
+
@media (width >= 40rem) {
|
|
1999
|
+
padding: calc(var(--spacing) * 0);
|
|
2000
|
+
}
|
|
2001
|
+
}
|
|
2002
|
+
.sm\:p-6 {
|
|
2003
|
+
@media (width >= 40rem) {
|
|
2004
|
+
padding: calc(var(--spacing) * 6);
|
|
2005
|
+
}
|
|
2006
|
+
}
|
|
1760
2007
|
.sm\:px-6 {
|
|
1761
2008
|
@media (width >= 40rem) {
|
|
1762
2009
|
padding-inline: calc(var(--spacing) * 6);
|
|
1763
2010
|
}
|
|
1764
2011
|
}
|
|
2012
|
+
.sm\:text-left {
|
|
2013
|
+
@media (width >= 40rem) {
|
|
2014
|
+
text-align: left;
|
|
2015
|
+
}
|
|
2016
|
+
}
|
|
1765
2017
|
.sm\:text-3xl {
|
|
1766
2018
|
@media (width >= 40rem) {
|
|
1767
2019
|
font-size: var(--text-3xl);
|
|
1768
2020
|
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
1769
2021
|
}
|
|
1770
2022
|
}
|
|
2023
|
+
.sm\:text-sm {
|
|
2024
|
+
@media (width >= 40rem) {
|
|
2025
|
+
font-size: var(--text-sm);
|
|
2026
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
2027
|
+
}
|
|
2028
|
+
}
|
|
1771
2029
|
.sm\:text-sm\/6 {
|
|
1772
2030
|
@media (width >= 40rem) {
|
|
1773
2031
|
font-size: var(--text-sm);
|
|
@@ -1841,6 +2099,21 @@
|
|
|
1841
2099
|
}
|
|
1842
2100
|
}
|
|
1843
2101
|
}
|
|
2102
|
+
@property --tw-translate-x {
|
|
2103
|
+
syntax: "*";
|
|
2104
|
+
inherits: false;
|
|
2105
|
+
initial-value: 0;
|
|
2106
|
+
}
|
|
2107
|
+
@property --tw-translate-y {
|
|
2108
|
+
syntax: "*";
|
|
2109
|
+
inherits: false;
|
|
2110
|
+
initial-value: 0;
|
|
2111
|
+
}
|
|
2112
|
+
@property --tw-translate-z {
|
|
2113
|
+
syntax: "*";
|
|
2114
|
+
inherits: false;
|
|
2115
|
+
initial-value: 0;
|
|
2116
|
+
}
|
|
1844
2117
|
@property --tw-scale-x {
|
|
1845
2118
|
syntax: "*";
|
|
1846
2119
|
inherits: false;
|
|
@@ -2042,6 +2315,9 @@
|
|
|
2042
2315
|
@layer properties {
|
|
2043
2316
|
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
2044
2317
|
*, ::before, ::after, ::backdrop {
|
|
2318
|
+
--tw-translate-x: 0;
|
|
2319
|
+
--tw-translate-y: 0;
|
|
2320
|
+
--tw-translate-z: 0;
|
|
2045
2321
|
--tw-scale-x: 1;
|
|
2046
2322
|
--tw-scale-y: 1;
|
|
2047
2323
|
--tw-scale-z: 1;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
module OkonomiUiKit
|
|
2
|
+
class Component
|
|
3
|
+
attr_reader :view, :theme
|
|
4
|
+
|
|
5
|
+
def initialize(view, theme)
|
|
6
|
+
@view = view
|
|
7
|
+
@theme = theme || OkonomiUiKit::Theme::DEFAULT_THEME
|
|
8
|
+
end
|
|
9
|
+
|
|
10
|
+
def template_path
|
|
11
|
+
"okonomi/components/#{name}/#{name}"
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
def name
|
|
15
|
+
self.class.name.demodulize.underscore
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
end
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
module OkonomiUiKit
|
|
2
|
+
module Components
|
|
3
|
+
class Badge < OkonomiUiKit::Component
|
|
4
|
+
def render(text, options = {})
|
|
5
|
+
severity = options.delete(:severity) || :default
|
|
6
|
+
color_classes = case severity.to_sym
|
|
7
|
+
when :success
|
|
8
|
+
"bg-green-100 text-green-800"
|
|
9
|
+
when :danger
|
|
10
|
+
"bg-red-100 text-red-800"
|
|
11
|
+
when :info
|
|
12
|
+
"bg-blue-100 text-blue-800"
|
|
13
|
+
when :warning
|
|
14
|
+
"bg-yellow-100 text-yellow-800"
|
|
15
|
+
else
|
|
16
|
+
"bg-gray-100 text-gray-800"
|
|
17
|
+
end
|
|
18
|
+
|
|
19
|
+
base_classes = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
|
20
|
+
full_classes = "#{base_classes} #{color_classes} #{options[:class] || ''}".strip
|
|
21
|
+
|
|
22
|
+
view.tag.span(text, class: full_classes, **options.except(:class))
|
|
23
|
+
end
|
|
24
|
+
end
|
|
25
|
+
end
|
|
26
|
+
end
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
module OkonomiUiKit
|
|
2
|
+
module Components
|
|
3
|
+
class Typography < OkonomiUiKit::Component
|
|
4
|
+
TYPOGRAPHY_COMPONENTS = {
|
|
5
|
+
body1: 'p',
|
|
6
|
+
body2: 'p',
|
|
7
|
+
h1: 'h1',
|
|
8
|
+
h2: 'h2',
|
|
9
|
+
h3: 'h3',
|
|
10
|
+
h4: 'h4',
|
|
11
|
+
h5: 'h5',
|
|
12
|
+
h6: 'h6',
|
|
13
|
+
}.freeze
|
|
14
|
+
|
|
15
|
+
def render(text = nil, options = {}, &block)
|
|
16
|
+
options, text = text, nil if block_given?
|
|
17
|
+
options ||= {}
|
|
18
|
+
options = options.with_indifferent_access
|
|
19
|
+
|
|
20
|
+
variant = (options.delete(:variant) || 'body1').to_sym
|
|
21
|
+
component = (TYPOGRAPHY_COMPONENTS[variant] || 'span').to_s
|
|
22
|
+
color = (options.delete(:color) || 'default').to_sym
|
|
23
|
+
|
|
24
|
+
classes = [
|
|
25
|
+
theme.dig(:components, :typography, :variants, variant) || '',
|
|
26
|
+
theme.dig(:components, :typography, :colors, color) || '',
|
|
27
|
+
options.delete(:class) || ''
|
|
28
|
+
].reject(&:blank?).join(' ')
|
|
29
|
+
|
|
30
|
+
view.render(
|
|
31
|
+
template_path,
|
|
32
|
+
text: text,
|
|
33
|
+
options: options,
|
|
34
|
+
variant: variant,
|
|
35
|
+
component: component,
|
|
36
|
+
classes: classes,
|
|
37
|
+
&block
|
|
38
|
+
)
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
end
|
|
42
|
+
end
|
|
@@ -119,6 +119,17 @@ module OkonomiUiKit
|
|
|
119
119
|
end
|
|
120
120
|
end
|
|
121
121
|
|
|
122
|
+
def multi_select(method, **options)
|
|
123
|
+
@template.render(
|
|
124
|
+
partial: 'okonomi/forms/tailwind/multi_select',
|
|
125
|
+
locals: {
|
|
126
|
+
form: self,
|
|
127
|
+
method: method,
|
|
128
|
+
options: options
|
|
129
|
+
}
|
|
130
|
+
)
|
|
131
|
+
end
|
|
132
|
+
|
|
122
133
|
def label(method, text = nil, options = {}, &block)
|
|
123
134
|
base_classes = ui.get_theme.dig(:components, :label, :root)
|
|
124
135
|
super(method, text, merge_class(options, base_classes), &block)
|
|
@@ -98,6 +98,58 @@ module OkonomiUiKit
|
|
|
98
98
|
hint: {
|
|
99
99
|
root: "cursor-pointer text-sm text-gray-400"
|
|
100
100
|
}
|
|
101
|
+
},
|
|
102
|
+
modal: {
|
|
103
|
+
backdrop: "fixed inset-0 bg-gray-500/75 transition-opacity duration-300 ease-out opacity-0",
|
|
104
|
+
container: "fixed inset-0 z-10 w-screen overflow-y-auto",
|
|
105
|
+
wrapper: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0",
|
|
106
|
+
panel: {
|
|
107
|
+
base: "relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all duration-300 ease-out sm:my-8 sm:w-full sm:p-6 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
|
108
|
+
sizes: {
|
|
109
|
+
sm: "sm:max-w-sm",
|
|
110
|
+
md: "sm:max-w-lg",
|
|
111
|
+
lg: "sm:max-w-2xl",
|
|
112
|
+
xl: "sm:max-w-4xl"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
close_button: {
|
|
116
|
+
wrapper: "absolute top-0 right-0 hidden pt-4 pr-4 sm:block",
|
|
117
|
+
button: "rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none",
|
|
118
|
+
icon: {
|
|
119
|
+
file: "heroicons/outline/x-mark",
|
|
120
|
+
class: "size-6"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
icon: {
|
|
124
|
+
wrapper: "mx-auto flex size-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10",
|
|
125
|
+
class: "size-6",
|
|
126
|
+
variants: {
|
|
127
|
+
warning: {
|
|
128
|
+
wrapper: "bg-red-100",
|
|
129
|
+
icon: "text-red-600",
|
|
130
|
+
file: "heroicons/outline/exclamation-triangle"
|
|
131
|
+
},
|
|
132
|
+
info: {
|
|
133
|
+
wrapper: "bg-blue-100",
|
|
134
|
+
icon: "text-blue-600",
|
|
135
|
+
file: "heroicons/outline/information-circle"
|
|
136
|
+
},
|
|
137
|
+
success: {
|
|
138
|
+
wrapper: "bg-green-100",
|
|
139
|
+
icon: "text-green-600",
|
|
140
|
+
file: "heroicons/outline/check-circle"
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
content: {
|
|
145
|
+
wrapper: "sm:flex sm:items-start",
|
|
146
|
+
text_wrapper: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left",
|
|
147
|
+
title: "text-base font-semibold text-gray-900",
|
|
148
|
+
message: "mt-2 text-sm text-gray-500"
|
|
149
|
+
},
|
|
150
|
+
actions: {
|
|
151
|
+
wrapper: "mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"
|
|
152
|
+
}
|
|
101
153
|
}
|
|
102
154
|
}
|
|
103
155
|
}
|
|
@@ -75,36 +75,48 @@ module OkonomiUiKit
|
|
|
75
75
|
@template.page(&block)
|
|
76
76
|
end
|
|
77
77
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
options ||= {}
|
|
92
|
-
|
|
93
|
-
variant = (options.delete(:variant) || 'body1').to_sym
|
|
94
|
-
component = (TYPOGRAPHY_COMPONENTS[variant] || 'span').to_s
|
|
95
|
-
color = (options.delete(:color) || 'default').to_sym
|
|
96
|
-
classes = [
|
|
97
|
-
get_theme.dig(:components, :typography, :variants, variant) || '',
|
|
98
|
-
get_theme.dig(:components, :typography, :colors, color) || '',
|
|
99
|
-
options.delete(:class) || ''
|
|
100
|
-
]
|
|
78
|
+
def confirmation_modal(title:, message:, confirm_text: "Confirm", cancel_text: "Cancel", variant: :warning, size: :md, **options, &block)
|
|
79
|
+
modal_options = {
|
|
80
|
+
title: title,
|
|
81
|
+
message: message,
|
|
82
|
+
confirm_text: confirm_text,
|
|
83
|
+
cancel_text: cancel_text,
|
|
84
|
+
variant: variant,
|
|
85
|
+
size: size,
|
|
86
|
+
has_custom_actions: block_given?,
|
|
87
|
+
**options
|
|
88
|
+
}
|
|
89
|
+
@template.render("okonomi/modals/confirmation_modal", options: modal_options, ui: self, &block)
|
|
90
|
+
end
|
|
101
91
|
|
|
102
|
-
|
|
103
|
-
|
|
92
|
+
def modal_data_attributes(options)
|
|
93
|
+
return "" unless options[:data]
|
|
94
|
+
|
|
95
|
+
options[:data].map { |k, v| "data-#{k.to_s.dasherize}=\"#{v}\"" }.join(' ').html_safe
|
|
96
|
+
end
|
|
97
|
+
|
|
98
|
+
def modal_panel_class(size)
|
|
99
|
+
[
|
|
100
|
+
get_theme.dig(:components, :modal, :panel, :base),
|
|
101
|
+
get_theme.dig(:components, :modal, :panel, :sizes, size)
|
|
102
|
+
].compact.join(' ')
|
|
103
|
+
end
|
|
104
|
+
|
|
105
|
+
def modal_icon_wrapper_class(variant)
|
|
106
|
+
[
|
|
107
|
+
get_theme.dig(:components, :modal, :icon, :wrapper),
|
|
108
|
+
get_theme.dig(:components, :modal, :icon, :variants, variant, :wrapper)
|
|
109
|
+
].compact.join(' ')
|
|
110
|
+
end
|
|
111
|
+
|
|
112
|
+
def method_missing(method_name, *args, &block)
|
|
113
|
+
component_name = "OkonomiUiKit::Components::#{method_name.to_s.camelize}"
|
|
114
|
+
if Object.const_defined?(component_name)
|
|
115
|
+
return component_name.constantize.new(@template, get_theme).render(*args, &block)
|
|
104
116
|
else
|
|
105
|
-
|
|
117
|
+
super
|
|
106
118
|
end
|
|
107
119
|
end
|
|
108
120
|
end
|
|
109
121
|
end
|
|
110
|
-
end
|
|
122
|
+
end
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
static targets = ["container", "backdrop", "panel"]
|
|
5
|
+
static values = {
|
|
6
|
+
size: String,
|
|
7
|
+
autoOpen: Boolean
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
connect() {
|
|
11
|
+
this.close()
|
|
12
|
+
if (this.autoOpenValue) {
|
|
13
|
+
this.open()
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Bind escape key handler
|
|
17
|
+
this.handleEscape = this.handleEscape.bind(this)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
disconnect() {
|
|
21
|
+
this.unlockBodyScroll()
|
|
22
|
+
document.removeEventListener('keydown', this.handleEscape)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
open() {
|
|
26
|
+
this.containerTarget.style.display = 'block'
|
|
27
|
+
this.lockBodyScroll()
|
|
28
|
+
document.addEventListener('keydown', this.handleEscape)
|
|
29
|
+
|
|
30
|
+
// Focus trap - focus first focusable element in modal
|
|
31
|
+
this.focusFirstElement()
|
|
32
|
+
|
|
33
|
+
// Add entrance animations
|
|
34
|
+
requestAnimationFrame(() => {
|
|
35
|
+
this.backdropTarget.classList.remove('opacity-0')
|
|
36
|
+
this.backdropTarget.classList.add('opacity-100')
|
|
37
|
+
|
|
38
|
+
this.panelTarget.classList.remove('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95')
|
|
39
|
+
this.panelTarget.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100')
|
|
40
|
+
})
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
close() {
|
|
44
|
+
// Add exit animations
|
|
45
|
+
this.backdropTarget.classList.remove('opacity-100')
|
|
46
|
+
this.backdropTarget.classList.add('opacity-0')
|
|
47
|
+
|
|
48
|
+
this.panelTarget.classList.remove('opacity-100', 'translate-y-0', 'sm:scale-100')
|
|
49
|
+
this.panelTarget.classList.add('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95')
|
|
50
|
+
|
|
51
|
+
// Hide after animation completes
|
|
52
|
+
setTimeout(() => {
|
|
53
|
+
this.containerTarget.style.display = 'none'
|
|
54
|
+
this.unlockBodyScroll()
|
|
55
|
+
document.removeEventListener('keydown', this.handleEscape)
|
|
56
|
+
}, 200)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
confirm() {
|
|
60
|
+
// Dispatch confirm event for custom handling
|
|
61
|
+
this.dispatch('confirm', { detail: { modal: this } })
|
|
62
|
+
this.close()
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
cancel() {
|
|
66
|
+
// Dispatch cancel event for custom handling
|
|
67
|
+
this.dispatch('cancel', { detail: { modal: this } })
|
|
68
|
+
this.close()
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
handleEscape(event) {
|
|
72
|
+
if (event.key === 'Escape') {
|
|
73
|
+
this.close()
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
lockBodyScroll() {
|
|
78
|
+
document.body.style.overflow = 'hidden'
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
unlockBodyScroll() {
|
|
82
|
+
document.body.style.overflow = ''
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
focusFirstElement() {
|
|
86
|
+
const focusableElements = this.panelTarget.querySelectorAll(
|
|
87
|
+
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
88
|
+
)
|
|
89
|
+
|
|
90
|
+
if (focusableElements.length > 0) {
|
|
91
|
+
focusableElements[0].focus()
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<div data-controller="modal"
|
|
2
|
+
data-modal-size-value="<%= options[:size] %>"
|
|
3
|
+
<% if options[:auto_open] %>data-modal-auto-open-value="true"<% end %>
|
|
4
|
+
class="relative z-10"
|
|
5
|
+
style="display: none;"
|
|
6
|
+
data-modal-target="container"
|
|
7
|
+
<%= ui.modal_data_attributes(options) %>>
|
|
8
|
+
|
|
9
|
+
<!-- Backdrop -->
|
|
10
|
+
<div class="<%= ui.get_theme.dig(:components, :modal, :backdrop) %>"
|
|
11
|
+
data-modal-target="backdrop"
|
|
12
|
+
data-action="click->modal#close"
|
|
13
|
+
aria-hidden="true"></div>
|
|
14
|
+
|
|
15
|
+
<!-- Modal container -->
|
|
16
|
+
<div class="<%= ui.get_theme.dig(:components, :modal, :container) %>">
|
|
17
|
+
<div class="<%= ui.get_theme.dig(:components, :modal, :wrapper) %>">
|
|
18
|
+
<!-- Modal panel -->
|
|
19
|
+
<div class="<%= ui.modal_panel_class(options[:size]) %>"
|
|
20
|
+
data-modal-target="panel"
|
|
21
|
+
role="dialog"
|
|
22
|
+
aria-modal="true"
|
|
23
|
+
aria-labelledby="modal-title">
|
|
24
|
+
|
|
25
|
+
<!-- Close button -->
|
|
26
|
+
<div class="<%= ui.get_theme.dig(:components, :modal, :close_button, :wrapper) %>">
|
|
27
|
+
<button type="button"
|
|
28
|
+
class="<%= ui.get_theme.dig(:components, :modal, :close_button, :button) %>"
|
|
29
|
+
data-action="click->modal#close">
|
|
30
|
+
<span class="sr-only">Close</span>
|
|
31
|
+
<%= svg_icon(ui.get_theme.dig(:components, :modal, :close_button, :icon, :file),
|
|
32
|
+
class: ui.get_theme.dig(:components, :modal, :close_button, :icon, :class)) %>
|
|
33
|
+
</button>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<!-- Content -->
|
|
37
|
+
<div class="<%= ui.get_theme.dig(:components, :modal, :content, :wrapper) %>">
|
|
38
|
+
<!-- Icon -->
|
|
39
|
+
<div class="<%= ui.modal_icon_wrapper_class(options[:variant]) %>">
|
|
40
|
+
<%= svg_icon(ui.get_theme.dig(:components, :modal, :icon, :variants, options[:variant], :file),
|
|
41
|
+
class: [ui.get_theme.dig(:components, :modal, :icon, :class),
|
|
42
|
+
ui.get_theme.dig(:components, :modal, :icon, :variants, options[:variant], :icon)].join(' ')) %>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<!-- Text content -->
|
|
46
|
+
<div class="<%= ui.get_theme.dig(:components, :modal, :content, :text_wrapper) %>">
|
|
47
|
+
<h3 id="modal-title" class="<%= ui.get_theme.dig(:components, :modal, :content, :title) %>">
|
|
48
|
+
<%= options[:title] %>
|
|
49
|
+
</h3>
|
|
50
|
+
<div class="<%= ui.get_theme.dig(:components, :modal, :content, :message) %>">
|
|
51
|
+
<p><%= options[:message] %></p>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<!-- Actions -->
|
|
57
|
+
<div class="<%= ui.get_theme.dig(:components, :modal, :actions, :wrapper) %>">
|
|
58
|
+
<% if options[:has_custom_actions] %>
|
|
59
|
+
<%= yield %>
|
|
60
|
+
<% else %>
|
|
61
|
+
<% button_color = options[:variant] == :warning ? :danger : options[:variant] %>
|
|
62
|
+
<button type="button"
|
|
63
|
+
class="<%= ui.button_class(variant: :contained, color: button_color) %> sm:ml-3 sm:w-auto"
|
|
64
|
+
data-action="click->modal#confirm">
|
|
65
|
+
<%= options[:confirm_text] %>
|
|
66
|
+
</button>
|
|
67
|
+
<button type="button"
|
|
68
|
+
class="<%= ui.button_class(variant: :outlined, color: :default) %> mt-3 sm:mt-0 sm:w-auto"
|
|
69
|
+
data-action="click->modal#close">
|
|
70
|
+
<%= options[:cancel_text] %>
|
|
71
|
+
</button>
|
|
72
|
+
<% end %>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
metadata
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: okonomi_ui_kit
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.6
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Okonomi GmbH
|
|
8
|
+
autorequire:
|
|
8
9
|
bindir: bin
|
|
9
10
|
cert_chain: []
|
|
10
|
-
date:
|
|
11
|
+
date: 2025-07-31 00:00:00.000000000 Z
|
|
11
12
|
dependencies:
|
|
12
13
|
- !ruby/object:Gem::Dependency
|
|
13
14
|
name: rails
|
|
@@ -1358,6 +1359,10 @@ files:
|
|
|
1358
1359
|
- app/helpers/okonomi_ui_kit/attribute_section_helper.rb
|
|
1359
1360
|
- app/helpers/okonomi_ui_kit/badge_helper.rb
|
|
1360
1361
|
- app/helpers/okonomi_ui_kit/breadcrumbs_helper.rb
|
|
1362
|
+
- app/helpers/okonomi_ui_kit/component.rb
|
|
1363
|
+
- app/helpers/okonomi_ui_kit/components/alert.rb
|
|
1364
|
+
- app/helpers/okonomi_ui_kit/components/badge.rb
|
|
1365
|
+
- app/helpers/okonomi_ui_kit/components/typography.rb
|
|
1361
1366
|
- app/helpers/okonomi_ui_kit/form_builder.rb
|
|
1362
1367
|
- app/helpers/okonomi_ui_kit/icon_helper.rb
|
|
1363
1368
|
- app/helpers/okonomi_ui_kit/navigation_helper.rb
|
|
@@ -1372,6 +1377,7 @@ files:
|
|
|
1372
1377
|
- app/javascript/okonomi_ui_kit/controllers/file_input_controller.js
|
|
1373
1378
|
- app/javascript/okonomi_ui_kit/controllers/flash_controller.js
|
|
1374
1379
|
- app/javascript/okonomi_ui_kit/controllers/form_field_visibility_controller.js
|
|
1380
|
+
- app/javascript/okonomi_ui_kit/controllers/modal_controller.js
|
|
1375
1381
|
- app/javascript/okonomi_ui_kit/controllers/upload_controller.js
|
|
1376
1382
|
- app/javascript/okonomi_ui_kit_manifest.js
|
|
1377
1383
|
- app/jobs/okonomi_ui_kit/application_job.rb
|
|
@@ -1379,13 +1385,15 @@ files:
|
|
|
1379
1385
|
- app/models/okonomi_ui_kit/application_record.rb
|
|
1380
1386
|
- app/views/layouts/okonomi_ui_kit/application.html.erb
|
|
1381
1387
|
- app/views/okonomi/attribute_sections/_section.html.erb
|
|
1382
|
-
- app/views/okonomi/components/
|
|
1388
|
+
- app/views/okonomi/components/alert/_alert.html.erb
|
|
1389
|
+
- app/views/okonomi/components/typography/_typography.html.erb
|
|
1383
1390
|
- app/views/okonomi/forms/tailwind/_checkbox_label.html.erb
|
|
1384
1391
|
- app/views/okonomi/forms/tailwind/_field.html.erb
|
|
1385
1392
|
- app/views/okonomi/forms/tailwind/_field_set.html.erb
|
|
1386
1393
|
- app/views/okonomi/forms/tailwind/_multi_select.html.erb
|
|
1387
1394
|
- app/views/okonomi/forms/tailwind/_radio_button.html.erb
|
|
1388
1395
|
- app/views/okonomi/forms/tailwind/_upload_field.html.erb
|
|
1396
|
+
- app/views/okonomi/modals/_confirmation_modal.html.erb
|
|
1389
1397
|
- app/views/okonomi/navigation/_link.html.erb
|
|
1390
1398
|
- app/views/okonomi/navigation/_menu.html.erb
|
|
1391
1399
|
- app/views/okonomi/navigation/_navbar.html.erb
|
|
@@ -1405,6 +1413,7 @@ metadata:
|
|
|
1405
1413
|
homepage_uri: https://okonomi.gmbh
|
|
1406
1414
|
source_code_uri: https://okonomi.gmbh
|
|
1407
1415
|
changelog_uri: https://okonomi.gmbh
|
|
1416
|
+
post_install_message:
|
|
1408
1417
|
rdoc_options: []
|
|
1409
1418
|
require_paths:
|
|
1410
1419
|
- lib
|
|
@@ -1419,7 +1428,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
1419
1428
|
- !ruby/object:Gem::Version
|
|
1420
1429
|
version: '0'
|
|
1421
1430
|
requirements: []
|
|
1422
|
-
rubygems_version: 3.
|
|
1431
|
+
rubygems_version: 3.4.10
|
|
1432
|
+
signing_key:
|
|
1423
1433
|
specification_version: 4
|
|
1424
1434
|
summary: UI Kit for Okonomi applications
|
|
1425
1435
|
test_files: []
|