@newlogic-digital/ui 3.3.0 → 3.5.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 (151) hide show
  1. package/README.md +10 -14
  2. package/package.json +23 -23
  3. package/src/data/main.json +2 -8
  4. package/src/emails/{templates/Content.twig → templates.test/Content.latte} +10 -2
  5. package/src/emails/{templates/Header.twig → templates.test/Header.latte} +1 -1
  6. package/src/emails/{templates/Layout.twig → templates.test/Layout.latte} +2 -2
  7. package/src/icons.svg +34 -28
  8. package/src/scripts/Components/CookieConsent.js +22 -28
  9. package/src/scripts/Layout/Header.js +25 -11
  10. package/src/scripts/Layout/Main.js +25 -55
  11. package/src/scripts/Libraries/+.js +4 -5
  12. package/src/scripts/Libraries/Dialog.js +37 -72
  13. package/src/scripts/Libraries/Drawer.js +22 -21
  14. package/src/scripts/Libraries/Form.js +8 -13
  15. package/src/scripts/Libraries/Naja.js +33 -0
  16. package/src/scripts/Libraries/ReCaptcha.js +14 -4
  17. package/src/scripts/Libraries/Ripple.js +6 -22
  18. package/src/scripts/Libraries/Script.js +1 -2
  19. package/src/scripts/Libraries/Slider.js +160 -0
  20. package/src/scripts/Libraries/Stimulus.js +0 -1
  21. package/src/scripts/Libraries/Swup.js +54 -38
  22. package/src/scripts/Libraries/Tippy.js +17 -20
  23. package/src/scripts/Ui/+.js +3 -3
  24. package/src/scripts/Ui/Check.js +8 -0
  25. package/src/scripts/Ui/Control.js +186 -0
  26. package/src/scripts/Ui/ControlSelect.js +24 -0
  27. package/src/scripts/Ui/Text.js +8 -10
  28. package/src/scripts/Utils/Functions/+.js +3 -3
  29. package/src/scripts/Utils/Functions/importScript.js +1 -1
  30. package/src/scripts/Utils/Functions/importStyle.js +1 -1
  31. package/src/scripts/Utils/Functions/inputStep.js +9 -0
  32. package/src/scripts/Utils/Functions/inputValidity.js +57 -0
  33. package/src/scripts/Utils/Functions/loadStimulus.js +12 -9
  34. package/src/scripts/Utils/Functions/replaceScript.js +4 -0
  35. package/src/scripts/Utils/Functions/replaceTag.js +1 -5
  36. package/src/scripts/Utils/cdn.js +2 -3
  37. package/src/scripts/Utils/global.js +1 -1
  38. package/src/styles/Components/+.css +1 -1
  39. package/src/styles/Components/CookieConsent.css +22 -25
  40. package/src/styles/Components/Dialog/Default.css +10 -62
  41. package/src/styles/Components/Dropdown/Default.css +6 -3
  42. package/src/styles/Components/Field.css +1 -0
  43. package/src/styles/Layout/Header.css +13 -17
  44. package/src/styles/Layout/Main.css +8 -91
  45. package/src/styles/Layout/Nav.css +31 -27
  46. package/src/styles/Libraries/+.css +1 -2
  47. package/src/styles/Libraries/Datepicker.css +38 -229
  48. package/src/styles/Libraries/Dialog.css +1 -19
  49. package/src/styles/Libraries/Drawer.css +17 -29
  50. package/src/styles/Libraries/Hint.css +86 -101
  51. package/src/styles/Libraries/Pickr.css +13 -0
  52. package/src/styles/Libraries/Ripple.css +1 -29
  53. package/src/styles/Libraries/Tippy.css +25 -39
  54. package/src/styles/Ui/+.css +6 -5
  55. package/src/styles/Ui/Badge.css +7 -82
  56. package/src/styles/Ui/Btn.css +13 -226
  57. package/src/styles/Ui/Check.css +1 -0
  58. package/src/styles/Ui/Control.css +47 -0
  59. package/src/styles/Ui/ControlSelect.css +66 -0
  60. package/src/styles/Ui/Dot.css +22 -0
  61. package/src/styles/Ui/Group.css +1 -0
  62. package/src/styles/Ui/Heading.css +3 -22
  63. package/src/styles/Ui/Image.css +1 -17
  64. package/src/styles/Ui/Info.css +1 -0
  65. package/src/styles/Ui/Label.css +1 -14
  66. package/src/styles/Ui/Link.css +2 -41
  67. package/src/styles/Ui/Notice.css +1 -47
  68. package/src/styles/Ui/Progress.css +1 -56
  69. package/src/styles/Ui/Switch.css +1 -70
  70. package/src/styles/Ui/Text.css +4 -245
  71. package/src/styles/Ui/Title.css +5 -13
  72. package/src/styles/Utils/+.css +3 -4
  73. package/src/styles/Utils/breakpoints.css +1 -0
  74. package/src/styles/Utils/config.css +5 -0
  75. package/src/styles/Utils/default.css +8 -122
  76. package/src/styles/Utils/icons.css +3 -7
  77. package/src/styles/Utils/keyframes.css +1 -182
  78. package/src/styles/Utils/{tailwind/base.css → tailwind.css} +31 -21
  79. package/src/styles/Utils/theme/+.css +1 -1
  80. package/src/styles/Utils/theme/main.css +14 -23
  81. package/src/styles/main.css +19 -15
  82. package/src/styles/tinymce.css +34 -0
  83. package/src/templates/Components/CookieConsent.latte +28 -0
  84. package/src/templates/Components/Dialogs/Basic.latte +22 -0
  85. package/src/templates/Layout/{Header.twig → Header.latte} +15 -17
  86. package/src/templates/Layout/Main.latte +62 -0
  87. package/src/templates/Sections/Gdpr.latte +127 -0
  88. package/src/templates/Sections/Site.latte +141 -0
  89. package/src/templates/Sections/Ui/Docs/@intro.html +13 -62
  90. package/src/templates/Sections/Ui/Docs/@nav.html +41 -92
  91. package/src/templates/Sections/Ui/Docs/@styles.html +2 -6
  92. package/src/templates/Sections/Ui/Docs/Default.latte +1059 -0
  93. package/src/templates/Sections/Ui/Icons.html +11 -9
  94. package/src/templates/Sections/Ui/Intro.html +66 -37
  95. package/src/templates/Sections/Ui.latte +8 -0
  96. package/src/templates/Ui/+.latte +5 -0
  97. package/src/templates/Ui/Check.latte +7 -0
  98. package/src/templates/Ui/Control.latte +9 -0
  99. package/src/templates/Ui/ControlDate.latte +14 -0
  100. package/src/templates/Ui/ControlSelect.latte +9 -0
  101. package/src/templates/Ui/ControlTime.latte +14 -0
  102. package/src/templates/Utils/sections.latte +3 -0
  103. package/src/views/dialog/basic.json.latte +5 -0
  104. package/src/views/dropdown/{tippy.json.twig → tippy.json.latte} +7 -4
  105. package/src/views/email/email.latte +6 -0
  106. package/src/views/email/email.test.latte +6 -0
  107. package/src/views/gdpr.json +1 -1
  108. package/src/views/index.json +1 -1
  109. package/src/views/site.json +11 -0
  110. package/src/views/ui-icons.json +1 -1
  111. package/src/views/ui.json +1 -1
  112. package/vite.config.js +16 -6
  113. package/.eslintrc +0 -13
  114. package/.stylelintrc +0 -18
  115. package/public/sw.js +0 -30
  116. package/src/emails/email.prod.html +0 -6
  117. package/src/emails/email.twig.html +0 -6
  118. package/src/scripts/Libraries/Anchor.js +0 -35
  119. package/src/scripts/Libraries/NativeSlider.js +0 -138
  120. package/src/scripts/Libraries/Tabs.js +0 -16
  121. package/src/scripts/Ui/Checkbox.js +0 -10
  122. package/src/scripts/Ui/Input.js +0 -259
  123. package/src/scripts/Ui/Select.js +0 -53
  124. package/src/scripts/Utils/Functions/checkValidity.js +0 -44
  125. package/src/scripts/Utils/Functions/dataValue.js +0 -52
  126. package/src/scripts/Utils/Functions/inView.js +0 -24
  127. package/src/styles/Components/Form/+.css +0 -1
  128. package/src/styles/Components/Form/CookieConsent.css +0 -31
  129. package/src/styles/Libraries/NativeSlider.css +0 -60
  130. package/src/styles/Libraries/Tabs.css +0 -19
  131. package/src/styles/Ui/Checkbox.css +0 -151
  132. package/src/styles/Ui/Icon.css +0 -33
  133. package/src/styles/Ui/Input.css +0 -467
  134. package/src/styles/Ui/Radio.css +0 -4
  135. package/src/styles/Ui/Select.css +0 -137
  136. package/src/styles/Utils/normalize.css +0 -223
  137. package/src/styles/Utils/tailwind/+.css +0 -2
  138. package/src/styles/Utils/tailwind/gutters.css +0 -346
  139. package/src/styles/Utils/vars.css +0 -126
  140. package/src/styles/Utils/vendor.css +0 -1
  141. package/src/templates/Components/CookieConsent.twig +0 -30
  142. package/src/templates/Components/Dialogs/Basic.twig +0 -24
  143. package/src/templates/Layout/Main.twig +0 -49
  144. package/src/templates/Sections/Gdpr.twig +0 -64
  145. package/src/templates/Sections/Ui/Docs/Default.twig +0 -1600
  146. package/src/templates/Sections/Ui.twig +0 -8
  147. package/src/templates/Utils/sections.twig +0 -3
  148. package/src/views/dialog/basic.json.twig +0 -3
  149. package/tailwind.config.cjs +0 -69
  150. /package/src/emails/{templates.prod → templates}/.gitkeep +0 -0
  151. /package/src/templates/Layout/{Footer.twig → Footer.latte} +0 -0
package/src/templates/Sections/Ui/Docs/@intro.html CHANGED
@@ -1,12 +1,12 @@
1
- <div class="row g-8 flex-wrap">
1
+ <div class="row gap-8 flex-wrap">
2
2
  <div class="col-12" style="padding-top: 0">
3
- <h1 class="ui-heading">Get started</h1>
3
+ <h1 class="ui-heading lg mb-4">Get started</h1>
4
4
  <div class="ui-text">
5
- <p>Minimal version <b>Node.js 14+</b> and <b>NPM 7+</b></p>
5
+ <p>Minimal versions are <b>Node.js 16+</b> and <b>NPM 9+</b></p>
6
6
  </div>
7
7
  </div>
8
8
  <div class="col-12" id="installation">
9
- <h1 class="ui-title uppercase text-primary mb-5">Instalation</h1>
9
+ <h1 class="ui-heading mb-4">Installation</h1>
10
10
  <div class="ui-text">
11
11
  <p>In existing project (with <b>Vituum and Newlogic Core</b>)</p>
12
12
  </div>
@@ -26,72 +26,23 @@
26
26
  <pre><code class="language-bash">
27
27
  $ npm i @newlogic-digital/ui
28
28
  </code></pre>
29
- <pre><code class="language-bash">
29
+ <pre><code class="language-css">
30
30
  /* main.css or separate modules */
31
- @import "node_modules/@newlogic-digital/ui/src/styles/main.css"
31
+ @import "@newlogic-digital/ui/src/styles/main.css"
32
32
  </code></pre>
33
- <pre><code class="language-bash">
33
+ <pre><code class="language-js">
34
34
  /* main.js or separate modules */
35
- import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
35
+ import "@newlogic-digital/ui/src/scripts/main.js"
36
36
  </code></pre>
37
+ <hr>
37
38
  </div>
38
39
  <div class="col-12" id="core">
39
- <h1 class="ui-title uppercase text-primary mb-5">Core</h1>
40
+ <h1 class="ui-heading mb-4">Core</h1>
40
41
  <div class="ui-text">
41
42
  <p><b>Vituum and Newlogic Core</b> is used as the main toolset, the complete documentation is at <a href="https://vituum.dev" target="_blank">vituum.dev</a>.</p>
42
- <p>Newlogic Core is predefined config with plugins, filters etc. - <a href="https://vituum.dev" target="_blank">https://github.com/newlogic-digital/core</a></p>
43
- <p>Framework can also be used with other tools, more information is in the section <a href="#build" title="">Build</a></p>
44
- </div>
45
- </div>
46
- <div class="col-12" id="theme">
47
- <h1 class="ui-title uppercase text-primary mb-5">Theme</h1>
48
- <div class="ui-text">
49
- <p>Main CSS variables can be configured in <code>styles/Utils/theme/main.css</code> a <code>styles/Utils/vars.css</code>,
50
- you can also create any number of color variations.
51
- </p>
52
- <p></p>
53
- <p>Keyframes can be added in <code>styles/Utils/keyframes.css</code>, print styles in <code>styles/Utils/print.css</code>,
54
- import of external css in <code>styles/Utils/vendor.css</code> and tailwind styles can be extended
55
- in<code>styles/Utils/tailwind</code>
56
- </p>
43
+ <p>Newlogic Core is predefined config with plugins, filters etc. - <a href="https://core.newlogic.cz" target="_blank">core.newlogic.cz</a></p>
44
+ <p>Winduum is used as a main CSS component framework, learn more about it at <a href="https://winduum.dev" title="">winduum.dev</a></p>
57
45
  </div>
58
- </div>
59
- <div class="col-12" id="layout">
60
- <h1 class="ui-title uppercase text-primary mb-5">Layout</h1>
61
- <div class="ui-text">
62
- <p>Global styles are located at <code>styles/Layout/Main.css</code>, others layout styles are for eg. <code>Header.css</code>,
63
- <code>Footer.css</code> and naming should be done in following format <code>#l-header</code>, <code>#l-footer</code>
64
- </p>
65
- <p></p>
66
- <p>Global scripts are located at <code>scripts/Layout/Main.js</code></p>
67
- <p></p>
68
- <p>Example of basic layout in HTML:</p>
69
- </div>
70
- <pre><code class="language-html">
71
- <html class="no-js no-sw" lang="cs">
72
- <head>
73
- <title></title>
74
- <link rel="stylesheet" href="/src/styles/main.css">
75
- <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"
76
- async></script>
77
-
78
- <script>'dark' !== localStorage.theme && ('theme' in localStorage || !window.matchMedia('(prefers-color-scheme: dark)').matches) || document.documentElement.classList.add('dark'), document.documentElement.className = document.documentElement.className.replace('no-js', 'js'), matchMedia('(hover: hover) and (pointer: fine)').matches && document.documentElement.classList.add('no-touch'), /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) && document.documentElement.classList.add('mobile'), document.documentElement.classList.add(navigator.platform.toLowerCase().replace(/ .*/, '')), function (e) {
79
- var t
80
- e.match(/(msie|trident)/i) ? document.documentElement.classList.add('ie') : e.match(/edge/) ? document.documentElement.classList.add('edge') : (t = e.match(/(chrome|safari|firefox)/i)) && document.documentElement.classList.add(t[0])
81
- }(navigator.userAgent.toLowerCase())</script>
82
-
83
- <script src="/src/scripts/main.js" type="module"></script>
84
- </head>
85
- <body data-controller="lib lib-dialog lib-drawer">
86
- <div class="l-default">
87
- <header id="l-header" data-controller="l-header"></header>
88
- <main id="l-main" class="transition-fade">
89
- <!--PAGE CONTENT-->
90
- </main>
91
- <footer id="l-footer"></footer>
92
- </div>
93
- </body>
94
- </html>
95
- </code></pre>
46
+ <hr>
96
47
  </div>
97
48
  </div>
package/src/templates/Sections/Ui/Docs/@nav.html CHANGED
@@ -1,6 +1,6 @@
1
- <div class="col col-left touch:hidden">
1
+ <div class="col col-left max-md:hidden">
2
2
  <div class="sticky">
3
- <div class="mb-5">
3
+ <div class="mb-6">
4
4
  <h2 class="ui-title uppercase text-primary mb-3">Get started</h2>
5
5
  <ul class="row flex-col g-2">
6
6
  <li class="col col-12">
@@ -13,45 +13,39 @@
13
13
  <span>Core</span>
14
14
  </a>
15
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
16
  </ul>
28
17
  </div>
29
- <div class="mb-5">
18
+ <div class="mb-6">
30
19
  <h2 class="ui-title uppercase text-primary mb-3">Components</h2>
31
20
  <ul class="row flex-col g-2">
32
21
  <li class="col col-12">
33
- <a href="#headings" class="ui-link" title="">
34
- <span>Headings</span>
22
+ <a href="#heading" class="ui-link" title="">
23
+ <span>Heading</span>
35
24
  </a>
36
25
  </li>
37
26
  <li class="col col-12">
38
- <a href="#buttons" class="ui-link" title="">
39
- <span>Buttons</span>
27
+ <a href="#title" class="ui-link" title="">
28
+ <span>Title</span>
40
29
  </a>
41
30
  </li>
42
31
  <li class="col col-12">
43
- <a href="#links" class="ui-link" title="">
44
- <span>Links</span>
32
+ <a href="#button" class="ui-link" title="">
33
+ <span>Button</span>
45
34
  </a>
46
35
  </li>
47
36
  <li class="col col-12">
48
- <a href="#icons" class="ui-link" title="">
49
- <span>Icons</span>
37
+ <a href="#link" class="ui-link" title="">
38
+ <span>Link</span>
50
39
  </a>
51
40
  </li>
52
41
  <li class="col col-12">
53
- <a href="#form" class="ui-link" title="">
54
- <span>Forms</span>
42
+ <a href="#control" class="ui-link" title="">
43
+ <span>Control</span>
44
+ </a>
45
+ </li>
46
+ <li class="col col-12">
47
+ <a href="#check" class="ui-link" title="">
48
+ <span>Check</span>
55
49
  </a>
56
50
  </li>
57
51
  <li class="col col-12">
@@ -74,49 +68,19 @@
74
68
  <span>Text</span>
75
69
  </a>
76
70
  </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
71
  <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>
72
+ <a href="#image" class="ui-link" title="">
73
+ <span>Image</span>
100
74
  </a>
101
75
  </li>
102
76
  </ul>
103
77
  </div>
104
- <div class="mb-5">
78
+ <div class="mb-6">
105
79
  <h2 class="ui-title uppercase text-primary mb-3">Libraries</h2>
106
80
  <ul class="row flex-col g-2">
107
81
  <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>
82
+ <a href="#form" class="ui-link" title="">
83
+ <span>Form</span>
120
84
  </a>
121
85
  </li>
122
86
  <li class="col col-12">
@@ -130,63 +94,48 @@
130
94
  </a>
131
95
  </li>
132
96
  <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>
97
+ <a href="#ripple" class="ui-link" title="">
98
+ <span>Ripple</span>
145
99
  </a>
146
100
  </li>
147
101
  <li class="col col-12">
148
- <a href="#recaptcha" class="ui-link" title="">
149
- <span>ReCaptcha</span>
102
+ <a href="#datepicker" class="ui-link" title="">
103
+ <span>Datepicker</span>
150
104
  </a>
151
105
  </li>
152
106
  <li class="col col-12">
153
- <a href="#ripple" class="ui-link" title="">
154
- <span>Ripple</span>
107
+ <a href="#slider" class="ui-link" title="">
108
+ <span>Slider</span>
155
109
  </a>
156
110
  </li>
157
111
  <li class="col col-12">
158
- <a href="#stimulus" class="ui-link" title="">
159
- <span>Stimulus</span>
112
+ <a href="#swup" class="ui-link" title="">
113
+ <span>Swup</span>
160
114
  </a>
161
115
  </li>
162
116
  <li class="col col-12">
163
- <a href="#swup" class="ui-link" title="">
164
- <span>Swup</span>
117
+ <a href="#tippy" class="ui-link" title="">
118
+ <span>Tippy</span>
165
119
  </a>
166
120
  </li>
167
121
  <li class="col col-12">
168
- <a href="#tabs" class="ui-link" title="">
169
- <span>Tabs</span>
122
+ <a href="#hint" class="ui-link" title="">
123
+ <span>Hint</span>
170
124
  </a>
171
125
  </li>
172
126
  <li class="col col-12">
173
- <a href="#tippy" class="ui-link" title="">
174
- <span>Tippy</span>
127
+ <a href="#cookieconsent" class="ui-link" title="">
128
+ <span>CookieConsent</span>
175
129
  </a>
176
130
  </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
131
  <li class="col col-12">
183
- <a href="#functions" class="ui-link" title="">
184
- <span>Functions</span>
132
+ <a href="#recaptcha" class="ui-link" title="">
133
+ <span>ReCaptcha</span>
185
134
  </a>
186
135
  </li>
187
136
  <li class="col col-12">
188
- <a href="#build" class="ui-link" title="">
189
- <span>Build</span>
137
+ <a href="#stimulus" class="ui-link" title="">
138
+ <span>Stimulus</span>
190
139
  </a>
191
140
  </li>
192
141
  </ul>
package/src/templates/Sections/Ui/Docs/@styles.html CHANGED
@@ -3,14 +3,14 @@
3
3
  margin: 1rem 0 2rem !important;
4
4
  padding: 1.25rem 1.5rem !important;
5
5
  border-radius: 0.5rem !important;
6
- background: #282c34 none repeat scroll 0 0 !important;
6
+ background: var(--color-main) none repeat scroll 0 0 !important;
7
7
  max-width: 100%;
8
8
  font-size: 14px !important;
9
9
  overflow: auto;
10
10
  }
11
11
 
12
12
  .dark pre {
13
- background: rgb(var(--color-background-100)) none repeat scroll 0% 0% !important;
13
+ background: var(--color-body-secondary) none repeat scroll 0% 0% !important;
14
14
  }
15
15
 
16
16
  @media all and (min-width: 48rem) {
@@ -25,10 +25,6 @@
25
25
  }
26
26
  }
27
27
 
28
- .ui-heading + .ui-text {
29
- margin-top: 1rem;
30
- }
31
-
32
28
  code {
33
29
  margin-left: 0;
34
30
  }