@newlogic-digital/ui 3.2.0 → 3.3.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.
Files changed (82) hide show
  1. package/.eslintrc +13 -0
  2. package/.stylelintrc +18 -0
  3. package/README.md +1 -5
  4. package/package.json +16 -8
  5. package/public/sw.js +30 -0
  6. package/src/data/main.json +5 -0
  7. package/src/emails/email.prod.html +6 -0
  8. package/src/emails/email.twig.html +6 -0
  9. package/src/emails/{email.css → styles/email.css} +1 -1
  10. package/src/emails/templates/Content.twig +16 -0
  11. package/src/emails/templates/Header.twig +14 -0
  12. package/src/emails/templates/Layout.twig +23 -0
  13. package/src/emails/templates.prod/.gitkeep +0 -0
  14. package/src/scripts/Layout/Main.js +3 -3
  15. package/src/scripts/Libraries/Dialog.js +8 -1
  16. package/src/scripts/Libraries/Drawer.js +16 -14
  17. package/src/scripts/Libraries/Form.js +12 -18
  18. package/src/scripts/Libraries/NativeSlider.js +2 -1
  19. package/src/scripts/Libraries/ReCaptcha.js +9 -4
  20. package/src/scripts/Libraries/Stimulus.js +1 -31
  21. package/src/scripts/Libraries/Swup.js +5 -1
  22. package/src/scripts/Libraries/Tabs.js +5 -5
  23. package/src/scripts/Libraries/Tippy.js +3 -1
  24. package/src/scripts/Ui/+.js +0 -1
  25. package/src/scripts/Ui/Checkbox.js +4 -13
  26. package/src/scripts/Ui/Input.js +18 -64
  27. package/src/scripts/Ui/Select.js +11 -39
  28. package/src/scripts/Ui/Text.js +2 -4
  29. package/src/scripts/Utils/Functions/+.js +1 -0
  30. package/src/scripts/Utils/Functions/checkValidity.js +44 -0
  31. package/src/scripts/Utils/Functions/inView.js +7 -8
  32. package/src/scripts/Utils/cdn.js +1 -1
  33. package/src/scripts/Utils/global.js +6 -8
  34. package/src/styles/Components/+.css +1 -1
  35. package/src/styles/Components/Dropdown/+.css +1 -0
  36. package/src/styles/{Ui/Dropdown.css → Components/Dropdown/Default.css} +1 -1
  37. package/src/styles/Libraries/+.css +0 -1
  38. package/src/styles/Libraries/Drawer.css +1 -1
  39. package/src/styles/Libraries/Hint.css +4 -3
  40. package/src/styles/Libraries/NativeSlider.css +8 -0
  41. package/src/styles/Libraries/Tippy.css +1 -1
  42. package/src/styles/Ui/+.css +0 -1
  43. package/src/styles/Ui/Badge.css +1 -1
  44. package/src/styles/Ui/Btn.css +24 -6
  45. package/src/styles/Ui/Checkbox.css +28 -2
  46. package/src/styles/Ui/Heading.css +2 -1
  47. package/src/styles/Ui/Icon.css +2 -2
  48. package/src/styles/Ui/Image.css +1 -7
  49. package/src/styles/Ui/Input.css +65 -18
  50. package/src/styles/Ui/Label.css +2 -2
  51. package/src/styles/Ui/Link.css +12 -5
  52. package/src/styles/Ui/Notice.css +1 -1
  53. package/src/styles/Ui/Select.css +3 -5
  54. package/src/styles/Ui/Text.css +13 -4
  55. package/src/styles/Ui/Title.css +3 -2
  56. package/src/styles/Utils/+.css +9 -9
  57. package/src/styles/Utils/default.css +0 -7
  58. package/src/styles/Utils/tailwind/+.css +2 -2
  59. package/src/styles/Utils/tailwind/base.css +25 -0
  60. package/src/styles/Utils/theme/+.css +1 -1
  61. package/src/styles/Utils/vars.css +32 -8
  62. package/src/templates/Layout/Main.twig +0 -6
  63. package/src/templates/Sections/Ui/Docs/@intro.html +97 -0
  64. package/src/templates/Sections/Ui/Docs/@nav.html +195 -0
  65. package/src/templates/Sections/Ui/Docs/@styles.html +100 -0
  66. package/src/templates/Sections/Ui/Docs/Default.twig +1600 -0
  67. package/src/templates/Sections/Ui/Icons.html +28 -0
  68. package/src/templates/Sections/Ui/Intro.html +136 -0
  69. package/src/templates/Sections/Ui.twig +5 -2090
  70. package/src/templates/Utils/sections.twig +2 -2
  71. package/src/views/{dialog-basic.json.twig → dialog/basic.json.twig} +0 -0
  72. package/src/views/{json-tippy.json.twig → dropdown/tippy.json.twig} +3 -3
  73. package/src/views/gdpr.json +2 -1
  74. package/src/views/index.json +2 -2
  75. package/src/views/ui-icons.json +12 -0
  76. package/src/views/ui.json +2 -2
  77. package/tailwind.config.cjs +69 -0
  78. package/vite.config.js +5 -1
  79. package/src/emails/email.twig +0 -60
  80. package/src/scripts/Ui/Radio.js +0 -23
  81. package/src/styles/Components/Item/+.css +0 -1
  82. package/src/styles/Libraries/Lazysizes.css +0 -9
package/src/templates/Sections/Ui/Docs/@nav.html ADDED
@@ -0,0 +1,195 @@
1
+ <div class="col col-left touch:hidden">
2
+ <div class="sticky">
3
+ <div class="mb-5">
4
+ <h2 class="ui-title uppercase text-primary mb-3">Get started</h2>
5
+ <ul class="row flex-col g-2">
6
+ <li class="col col-12">
7
+ <a href="#installation" class="ui-link" title="">
8
+ <span>Installation</span>
9
+ </a>
10
+ </li>
11
+ <li class="col col-12">
12
+ <a href="#core" class="ui-link" title="">
13
+ <span>Core</span>
14
+ </a>
15
+ </li>
16
+ <li class="col col-12">
17
+ <a href="#theme"
18
+ class="ui-link" title="">
19
+ <span>Theme</span>
20
+ </a>
21
+ </li>
22
+ <li class="col col-12">
23
+ <a href="#layout" class="ui-link" title="">
24
+ <span>Layout</span>
25
+ </a>
26
+ </li>
27
+ </ul>
28
+ </div>
29
+ <div class="mb-5">
30
+ <h2 class="ui-title uppercase text-primary mb-3">Components</h2>
31
+ <ul class="row flex-col g-2">
32
+ <li class="col col-12">
33
+ <a href="#headings" class="ui-link" title="">
34
+ <span>Headings</span>
35
+ </a>
36
+ </li>
37
+ <li class="col col-12">
38
+ <a href="#buttons" class="ui-link" title="">
39
+ <span>Buttons</span>
40
+ </a>
41
+ </li>
42
+ <li class="col col-12">
43
+ <a href="#links" class="ui-link" title="">
44
+ <span>Links</span>
45
+ </a>
46
+ </li>
47
+ <li class="col col-12">
48
+ <a href="#icons" class="ui-link" title="">
49
+ <span>Icons</span>
50
+ </a>
51
+ </li>
52
+ <li class="col col-12">
53
+ <a href="#form" class="ui-link" title="">
54
+ <span>Forms</span>
55
+ </a>
56
+ </li>
57
+ <li class="col col-12">
58
+ <a href="#notice" class="ui-link" title="">
59
+ <span>Notice</span>
60
+ </a>
61
+ </li>
62
+ <li class="col col-12">
63
+ <a href="#badge" class="ui-link" title="">
64
+ <span>Badge</span>
65
+ </a>
66
+ </li>
67
+ <li class="col col-12">
68
+ <a href="#progress" class="ui-link" title="">
69
+ <span>Progress</span>
70
+ </a>
71
+ </li>
72
+ <li class="col col-12">
73
+ <a href="#text" class="ui-link" title="">
74
+ <span>Text</span>
75
+ </a>
76
+ </li>
77
+ </ul>
78
+ </div>
79
+ <div class="mb-5">
80
+ <h2 class="ui-title uppercase text-primary mb-3">Tailwind</h2>
81
+ <ul class="row flex-col g-2">
82
+ <li class="col col-12">
83
+ <a href="#colors" class="ui-link" title="">
84
+ <span>Colors</span>
85
+ </a>
86
+ </li>
87
+ <li class="col col-12">
88
+ <a href="#responsive" class="ui-link" title="">
89
+ <span>Responsive</span>
90
+ </a>
91
+ </li>
92
+ <li class="col col-12">
93
+ <a href="#container" class="ui-link" title="">
94
+ <span>Container</span>
95
+ </a>
96
+ </li>
97
+ <li class="col col-12">
98
+ <a href="#grid" class="ui-link" title="">
99
+ <span>Grid</span>
100
+ </a>
101
+ </li>
102
+ </ul>
103
+ </div>
104
+ <div class="mb-5">
105
+ <h2 class="ui-title uppercase text-primary mb-3">Libraries</h2>
106
+ <ul class="row flex-col g-2">
107
+ <li class="col col-12">
108
+ <a href="#anchor" class="ui-link" title="">
109
+ <span>Anchor</span>
110
+ </a>
111
+ </li>
112
+ <li class="col col-12">
113
+ <a href="#cookieconsent" class="ui-link" title="">
114
+ <span>CookieConsent</span>
115
+ </a>
116
+ </li>
117
+ <li class="col col-12">
118
+ <a href="#datepicker" class="ui-link" title="">
119
+ <span>Datepicker</span>
120
+ </a>
121
+ </li>
122
+ <li class="col col-12">
123
+ <a href="#dialog" class="ui-link" title="">
124
+ <span>Dialog</span>
125
+ </a>
126
+ </li>
127
+ <li class="col col-12">
128
+ <a href="#drawer" class="ui-link" title="">
129
+ <span>Drawer</span>
130
+ </a>
131
+ </li>
132
+ <li class="col col-12">
133
+ <a href="#hint" class="ui-link" title="">
134
+ <span>Hint</span>
135
+ </a>
136
+ </li>
137
+ <li class="col col-12">
138
+ <a href="#lazyload" class="ui-link" title="">
139
+ <span>Lazyload</span>
140
+ </a>
141
+ </li>
142
+ <li class="col col-12">
143
+ <a href="#nativeslider" class="ui-link" title="">
144
+ <span>NativeSlider</span>
145
+ </a>
146
+ </li>
147
+ <li class="col col-12">
148
+ <a href="#recaptcha" class="ui-link" title="">
149
+ <span>ReCaptcha</span>
150
+ </a>
151
+ </li>
152
+ <li class="col col-12">
153
+ <a href="#ripple" class="ui-link" title="">
154
+ <span>Ripple</span>
155
+ </a>
156
+ </li>
157
+ <li class="col col-12">
158
+ <a href="#stimulus" class="ui-link" title="">
159
+ <span>Stimulus</span>
160
+ </a>
161
+ </li>
162
+ <li class="col col-12">
163
+ <a href="#swup" class="ui-link" title="">
164
+ <span>Swup</span>
165
+ </a>
166
+ </li>
167
+ <li class="col col-12">
168
+ <a href="#tabs" class="ui-link" title="">
169
+ <span>Tabs</span>
170
+ </a>
171
+ </li>
172
+ <li class="col col-12">
173
+ <a href="#tippy" class="ui-link" title="">
174
+ <span>Tippy</span>
175
+ </a>
176
+ </li>
177
+ </ul>
178
+ </div>
179
+ <div class="mb-5">
180
+ <h2 class="ui-title uppercase text-primary mb-3">Other</h2>
181
+ <ul class="row flex-col g-2">
182
+ <li class="col col-12">
183
+ <a href="#functions" class="ui-link" title="">
184
+ <span>Functions</span>
185
+ </a>
186
+ </li>
187
+ <li class="col col-12">
188
+ <a href="#build" class="ui-link" title="">
189
+ <span>Build</span>
190
+ </a>
191
+ </li>
192
+ </ul>
193
+ </div>
194
+ </div>
195
+ </div>
package/src/templates/Sections/Ui/Docs/@styles.html ADDED
@@ -0,0 +1,100 @@
1
+ <style>
2
+ pre {
3
+ margin: 1rem 0 2rem !important;
4
+ padding: 1.25rem 1.5rem !important;
5
+ border-radius: 0.5rem !important;
6
+ background: #282c34 none repeat scroll 0 0 !important;
7
+ max-width: 100%;
8
+ font-size: 14px !important;
9
+ overflow: auto;
10
+ }
11
+
12
+ .dark pre {
13
+ background: rgb(var(--color-background-100)) none repeat scroll 0% 0% !important;
14
+ }
15
+
16
+ @media all and (min-width: 48rem) {
17
+ pre {
18
+ max-width: 63vw;
19
+ }
20
+ }
21
+
22
+ @media all and (min-width: 60rem) {
23
+ pre {
24
+ max-width: 90vw;
25
+ }
26
+ }
27
+
28
+ .ui-heading + .ui-text {
29
+ margin-top: 1rem;
30
+ }
31
+
32
+ code {
33
+ margin-left: 0;
34
+ }
35
+
36
+ .col-12 > hr {
37
+ margin: 2rem 0 1rem;
38
+ }
39
+
40
+ @media all and (min-width: 60rem) {
41
+ .ui-text code {
42
+ white-space: nowrap;
43
+ }
44
+ }
45
+
46
+ @media all and (max-width: 767px) {
47
+ .wrp_s_body > .t\:col-9 {
48
+ padding-left: 0 !important;
49
+ border-left: 0 !important;
50
+ }
51
+ }
52
+
53
+ .s-ui .wrp_s_body > .col-left {
54
+ width: 15rem;
55
+ }
56
+
57
+ .s-ui .wrp_s_body > .col-left .col {
58
+ padding-bottom: 0.375rem;
59
+ }
60
+
61
+ .s-ui .wrp_s_body > .col-left > .sticky {
62
+ height: calc(100vh - 4rem);
63
+ overflow-y: hidden;
64
+ overflow-x: hidden;
65
+ top: 4rem;
66
+ padding: 2rem;
67
+ }
68
+
69
+ .s-ui .wrp_s_body > .col-left > .sticky:hover {
70
+ overflow-y: auto;
71
+ }
72
+
73
+ .s-ui .wrp_s_body > .col-right {
74
+ padding-top: 1.625rem;
75
+ border-left: 1px solid #ddd;
76
+ overflow: hidden;
77
+ }
78
+
79
+ .dark .s-ui .wrp_s_body > .col-right {
80
+ border-left: 1px solid rgb(var(--color-light) / 0.1);
81
+ }
82
+
83
+ @media all and (min-width: 60rem) {
84
+ .s-ui .wrp_s_body > .col-right {
85
+ padding-left: 4rem;
86
+ padding-top: 4rem;
87
+ }
88
+ }
89
+
90
+ @media all and (max-width: 59.9375rem) {
91
+ .s-ui .wrp_s_body > .col-right {
92
+ display: block;
93
+ }
94
+ .s-ui .wrp_s_body > .col-right > .container {
95
+ padding-left: 2rem;
96
+ padding-right: 2rem;
97
+ }
98
+ }
99
+ </style>
100
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/themes/prism-tomorrow.min.css"/>