@newlogic-digital/ui 3.7.5 → 4.0.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 (214) hide show
  1. package/README.md +17 -31
  2. package/package.json +21 -12
  3. package/src/data/main.json +2 -32
  4. package/src/data/nav.json +12 -0
  5. package/src/icons.svg +0 -30
  6. package/src/pages/dialog/basic.json.latte +5 -0
  7. package/src/pages/email/index.json +12 -0
  8. package/src/pages/gdpr.json +11 -0
  9. package/src/pages/index.json +8 -0
  10. package/src/scripts/components/(ui)/+.js +12 -0
  11. package/src/scripts/components/(ui)/Button.js +4 -0
  12. package/src/scripts/components/(ui)/Compare.js +4 -0
  13. package/src/scripts/components/(ui)/Control.js +11 -0
  14. package/src/scripts/components/(ui)/ControlSelect.js +4 -0
  15. package/src/scripts/components/(ui)/Details.js +4 -0
  16. package/src/scripts/components/(ui)/Dialog.js +17 -0
  17. package/src/scripts/components/(ui)/Drawer.js +4 -0
  18. package/src/scripts/components/(ui)/Form.js +15 -0
  19. package/src/scripts/components/(ui)/Popover.js +4 -0
  20. package/src/scripts/components/(ui)/Range.js +4 -0
  21. package/src/scripts/components/(ui)/Tabs.js +4 -0
  22. package/src/scripts/components/(ui)/Toast.js +4 -0
  23. package/src/scripts/components/+.js +5 -0
  24. package/src/scripts/components/App.js +5 -0
  25. package/src/scripts/components/ReCaptcha.js +4 -0
  26. package/src/scripts/components/Reveal.js +4 -0
  27. package/src/scripts/components/cookieconsent/+.js +2 -0
  28. package/src/scripts/components/cookieconsent/CookieConsentDialog.js +4 -0
  29. package/src/scripts/components/cookieconsent/CookieConsentForm.js +4 -0
  30. package/src/scripts/composables/+.js +3 -0
  31. package/src/scripts/composables/naja.js +24 -0
  32. package/src/scripts/composables/stimulus.js +31 -0
  33. package/src/scripts/composables/swup.js +23 -0
  34. package/src/scripts/main.js +3 -6
  35. package/src/scripts/utils/+.js +1 -0
  36. package/src/scripts/{Utils → utils}/initAfter.js +3 -3
  37. package/src/styles/base/+.css +4 -0
  38. package/src/styles/{Utils/default.css → base/defaults.css} +11 -1
  39. package/src/styles/base/transitions.css +12 -0
  40. package/src/styles/components/(layout)/+.css +2 -0
  41. package/src/styles/components/(layout)/Header.css +11 -0
  42. package/src/styles/{Layout → components/(layout)}/Main.css +2 -13
  43. package/src/styles/components/(ui)/+.css +23 -0
  44. package/src/styles/components/(ui)/Badge.css +8 -0
  45. package/src/styles/components/(ui)/Button.css +12 -0
  46. package/src/styles/components/(ui)/Check.css +1 -0
  47. package/src/styles/components/(ui)/Compare.css +1 -0
  48. package/src/styles/components/(ui)/Control.css +29 -0
  49. package/src/styles/components/(ui)/ControlSelect.css +1 -0
  50. package/src/styles/components/(ui)/Drawer.css +14 -0
  51. package/src/styles/components/(ui)/Group.css +1 -0
  52. package/src/styles/components/(ui)/Heading.css +4 -0
  53. package/src/styles/components/(ui)/Image.css +1 -0
  54. package/src/styles/components/(ui)/Info.css +1 -0
  55. package/src/styles/components/(ui)/Label.css +1 -0
  56. package/src/styles/components/(ui)/Link.css +2 -0
  57. package/src/styles/components/(ui)/Notice.css +1 -0
  58. package/src/styles/components/(ui)/Progress.css +1 -0
  59. package/src/styles/components/(ui)/Range.css +1 -0
  60. package/src/styles/components/(ui)/Switch.css +1 -0
  61. package/src/styles/components/(ui)/Text.css +1 -0
  62. package/src/styles/components/(ui)/Title.css +4 -0
  63. package/src/styles/components/(ui)/dialog/+.css +2 -0
  64. package/src/styles/components/(ui)/dialog/Dialog.css +2 -0
  65. package/src/styles/components/(ui)/dialog/DialogContent.css +2 -0
  66. package/src/styles/components/+.css +3 -0
  67. package/src/styles/components/cookieconsent/+.css +1 -0
  68. package/src/styles/{Components/Dialog/CookieConsent.css → components/cookieconsent/CookieConsentDialog.css} +4 -4
  69. package/src/styles/emails/+.css +5 -0
  70. package/src/styles/emails/base/+.css +2 -0
  71. package/src/styles/emails/base/defaults.css +22 -0
  72. package/src/styles/emails/components/+.css +4 -0
  73. package/src/styles/emails/components/Button.css +31 -0
  74. package/src/styles/emails/components/Heading.css +7 -0
  75. package/src/styles/emails/components/Main.css +13 -0
  76. package/src/{emails/styles/main/Ui → styles/emails/components}/Text.css +7 -5
  77. package/src/styles/emails/main.css +9 -0
  78. package/src/styles/emails/theme/+.css +2 -0
  79. package/src/styles/emails/theme/config.css +5 -0
  80. package/src/styles/emails/theme/default.css +13 -0
  81. package/src/styles/emails/utils/+.css +1 -0
  82. package/src/styles/emails/utils/common.css +29 -0
  83. package/src/styles/main.css +5 -11
  84. package/src/styles/theme/+.css +2 -0
  85. package/src/styles/theme/dark.css +5 -0
  86. package/src/styles/theme/main.css +35 -0
  87. package/src/styles/tinymce.css +2 -34
  88. package/src/styles/utils/+.css +4 -0
  89. package/src/styles/utils/container.css +5 -0
  90. package/src/styles/utils/index.css +8 -0
  91. package/src/styles/utils/reveal.css +22 -0
  92. package/src/styles/utils/scrollbar.css +23 -0
  93. package/src/templates/components/(layout)/Footer.latte +1 -0
  94. package/src/templates/components/(layout)/Header.latte +7 -0
  95. package/src/templates/components/(ui)/Toast.latte +9 -0
  96. package/src/templates/{Sections/Text.latte → components/Content.latte} +3 -3
  97. package/src/templates/components/Example.latte +17 -0
  98. package/src/templates/{Sections/CookieConsent.latte → components/cookieconsent/CookieConsentContent.latte} +4 -4
  99. package/src/templates/components/cookieconsent/CookieConsentDialog.latte +27 -0
  100. package/src/templates/{Components/Form/CookieConsent.latte → components/cookieconsent/CookieConsentForm.latte} +9 -9
  101. package/src/templates/components/dialog/DialogBasic.latte +18 -0
  102. package/src/templates/emails/components/Content.latte +29 -0
  103. package/src/templates/emails/components/Footer.latte +13 -0
  104. package/src/templates/emails/components/Header.latte +8 -0
  105. package/src/{emails/templates.test/Layout.latte → templates/emails/layouts/default.latte} +12 -12
  106. package/src/templates/{Layout/Main.latte → layouts/default.latte} +24 -26
  107. package/vite.config.js +2 -21
  108. package/src/emails/styles/main/+.css +0 -3
  109. package/src/emails/styles/main/Base/+.css +0 -2
  110. package/src/emails/styles/main/Base/config.css +0 -22
  111. package/src/emails/styles/main/Components/+.css +0 -1
  112. package/src/emails/styles/main/Components/Card.css +0 -12
  113. package/src/emails/styles/main/Ui/+.css +0 -3
  114. package/src/emails/styles/main/Ui/Btn.css +0 -78
  115. package/src/emails/styles/main/Ui/Heading.css +0 -8
  116. package/src/emails/styles/main.css +0 -92
  117. package/src/emails/templates/.gitkeep +0 -0
  118. package/src/emails/templates.test/Sections/Footer.latte +0 -22
  119. package/src/emails/templates.test/Sections/Header.latte +0 -37
  120. package/src/emails/templates.test/Sections/Text.latte +0 -24
  121. package/src/scripts/Components/+.js +0 -2
  122. package/src/scripts/Components/Drawer.js +0 -60
  123. package/src/scripts/Components/Popover.js +0 -65
  124. package/src/scripts/Layout/+.js +0 -1
  125. package/src/scripts/Layout/Header.js +0 -20
  126. package/src/scripts/Libraries/+.js +0 -10
  127. package/src/scripts/Libraries/CookieConsent.js +0 -80
  128. package/src/scripts/Libraries/Dialog.js +0 -28
  129. package/src/scripts/Libraries/Form.js +0 -13
  130. package/src/scripts/Libraries/Naja.js +0 -37
  131. package/src/scripts/Libraries/ReCaptcha.js +0 -25
  132. package/src/scripts/Libraries/Reveal.js +0 -32
  133. package/src/scripts/Libraries/Ripple.js +0 -8
  134. package/src/scripts/Libraries/Stimulus.js +0 -56
  135. package/src/scripts/Libraries/Swup.js +0 -77
  136. package/src/scripts/Libraries/Toaster.js +0 -55
  137. package/src/scripts/Sections/+.js +0 -0
  138. package/src/scripts/Ui/+.js +0 -4
  139. package/src/scripts/Ui/Check.js +0 -8
  140. package/src/scripts/Ui/Control.js +0 -194
  141. package/src/scripts/Ui/ControlSelect.js +0 -25
  142. package/src/scripts/Ui/Text.js +0 -21
  143. package/src/scripts/Utils/+.js +0 -3
  144. package/src/scripts/Utils/cdn.js +0 -5
  145. package/src/scripts/Utils/naja.js +0 -41
  146. package/src/scripts/Utils/utilities.js +0 -8
  147. package/src/styles/Components/+.css +0 -5
  148. package/src/styles/Components/Dialog/+.css +0 -3
  149. package/src/styles/Components/Dialog/Content.css +0 -2
  150. package/src/styles/Components/Dialog/Default.css +0 -2
  151. package/src/styles/Components/Drawer.css +0 -18
  152. package/src/styles/Layout/+.css +0 -3
  153. package/src/styles/Layout/Header.css +0 -18
  154. package/src/styles/Layout/Nav.css +0 -23
  155. package/src/styles/Libraries/+.css +0 -2
  156. package/src/styles/Libraries/Datepicker.css +0 -54
  157. package/src/styles/Libraries/Pickr.css +0 -13
  158. package/src/styles/Sections/+.css +0 -1
  159. package/src/styles/Ui/+.css +0 -16
  160. package/src/styles/Ui/Badge.css +0 -8
  161. package/src/styles/Ui/Btn.css +0 -14
  162. package/src/styles/Ui/Check.css +0 -1
  163. package/src/styles/Ui/Control.css +0 -57
  164. package/src/styles/Ui/ControlSelect.css +0 -57
  165. package/src/styles/Ui/Group.css +0 -1
  166. package/src/styles/Ui/Heading.css +0 -4
  167. package/src/styles/Ui/Image.css +0 -1
  168. package/src/styles/Ui/Info.css +0 -1
  169. package/src/styles/Ui/Label.css +0 -1
  170. package/src/styles/Ui/Link.css +0 -8
  171. package/src/styles/Ui/Notice.css +0 -9
  172. package/src/styles/Ui/Progress.css +0 -1
  173. package/src/styles/Ui/Switch.css +0 -1
  174. package/src/styles/Ui/Text.css +0 -1
  175. package/src/styles/Ui/Title.css +0 -4
  176. package/src/styles/Utils/+.css +0 -6
  177. package/src/styles/Utils/config.css +0 -16
  178. package/src/styles/Utils/theme/+.css +0 -1
  179. package/src/styles/Utils/theme/main.css +0 -33
  180. package/src/styles/Utils/utilities.css +0 -42
  181. package/src/templates/Components/Dialog/Basic.latte +0 -24
  182. package/src/templates/Components/Dialog/CookieConsent.latte +0 -27
  183. package/src/templates/Layout/Footer.latte +0 -0
  184. package/src/templates/Layout/Header.latte +0 -38
  185. package/src/templates/Sections/Site.latte +0 -213
  186. package/src/templates/Sections/Ui/Docs/@intro.html +0 -48
  187. package/src/templates/Sections/Ui/Docs/@nav.html +0 -134
  188. package/src/templates/Sections/Ui/Docs/@styles.html +0 -96
  189. package/src/templates/Sections/Ui/Docs/Default.latte +0 -979
  190. package/src/templates/Sections/Ui/Icons.html +0 -30
  191. package/src/templates/Sections/Ui/Intro.html +0 -119
  192. package/src/templates/Sections/Ui.latte +0 -8
  193. package/src/templates/Ui/+.latte +0 -5
  194. package/src/templates/Ui/Check.latte +0 -7
  195. package/src/templates/Ui/Control.latte +0 -9
  196. package/src/templates/Ui/ControlDate.latte +0 -14
  197. package/src/templates/Ui/ControlSelect.latte +0 -9
  198. package/src/templates/Ui/ControlTime.latte +0 -14
  199. package/src/views/dialog/basic.json.latte +0 -5
  200. package/src/views/email/email.latte +0 -6
  201. package/src/views/email/email.test.latte +0 -6
  202. package/src/views/gdpr.json +0 -14
  203. package/src/views/index.json +0 -12
  204. package/src/views/popover/info.json.latte +0 -15
  205. package/src/views/site.json +0 -11
  206. package/src/views/ui-icons.json +0 -12
  207. package/src/views/ui.json +0 -11
  208. /package/src/styles/{Utils → base}/breakpoints.css +0 -0
  209. /package/src/styles/{Utils → base}/keyframes.css +0 -0
  210. /package/src/styles/{Components → components/(ui)}/Field.css +0 -0
  211. /package/src/styles/{Components → components/(ui)}/Popover.css +0 -0
  212. /package/src/styles/{Components → components/(ui)}/Toaster.css +0 -0
  213. /package/src/{emails/styles/main/Base/font.css → styles/emails/base/fonts.css} +0 -0
  214. /package/src/templates/{Utils → utils}/sections.latte +0 -0
package/src/templates/Sections/Ui/Docs/Default.latte DELETED
@@ -1,979 +0,0 @@
1
- <section class="s-ui" data-controller="s-ui">
2
- <div class="wrp_s_body flex">
3
- {include '@nav.html'}
4
- <div class="flex-col col-right md:w-9/12 py-12">
5
- <div class="container max-4xl:!max-w-full">
6
- {include '@intro.html'}
7
- <div class="flex-col gap-8 flex-wrap" style="padding-top: 4rem">
8
- <div class="w-full">
9
- <h1 class="ui-title lg uppercase text-primary mb-4">Components</h1>
10
- <div class="ui-text">
11
- <p>Examples of basic components that can be used in Newlogic UI, see <a href="https://winduum.dev" target="_blank">winduum.dev</a> for complete docs.</p>
12
- </div>
13
- </div>
14
- <div class="w-full" id="heading">
15
- <h1 class="ui-heading mb-4">Heading</h1>
16
- <div class="ui-text mb-6">
17
- <p>See <a href="https://winduum.dev/docs/ui/heading.html" target="_blank">ui/heading</a> for more info.</p>
18
- </div>
19
- {capture $code}
20
- <h2 class="ui-heading lg">Big heading</h2>
21
- {/capture}{$code|code('html', true)|noescape}
22
-
23
- {capture $code}
24
- <h2 class="ui-heading">Normal heading</h2>
25
- {/capture}{$code|code('html', true)|noescape}
26
-
27
- {capture $code}
28
- <h2 class="ui-heading sm">Small heading</h2>
29
- {/capture}{$code|code('html', true)|noescape}
30
- <hr>
31
- </div>
32
- <div class="w-full" id="title">
33
- <h1 class="ui-heading mb-4">Title</h1>
34
- <div class="ui-text mb-6">
35
- <p>See <a href="https://winduum.dev/docs/ui/title.html" target="_blank">ui/title</a> for more info.</p>
36
- </div>
37
- {capture $code}
38
- <strong class="ui-title sm">Title</strong>
39
- {/capture}{$code|code('html', true)|noescape}
40
-
41
- {capture $code}
42
- <strong class="ui-title lg">Title</strong>
43
- {/capture}{$code|code('html', true)|noescape}
44
-
45
- {capture $code}
46
- <strong class="ui-title uppercase text-primary">Title</strong>
47
- {/capture}{$code|code('html', true)|noescape}
48
- <hr>
49
- </div>
50
- <div class="w-full" id="button">
51
- <h1 class="ui-heading mb-4">Button</h1>
52
- <div class="ui-text mb-4">
53
- <p>See <a href="https://winduum.dev/docs/ui/button.html" target="_blank">ui/button</a> for more info.</p>
54
- </div>
55
- {capture $code}
56
- <button class="ui-btn">
57
- Flat button
58
- </button>
59
- {/capture}{$code|code('html', true)|noescape}
60
- {capture $code}
61
- <button class="ui-btn bordered">
62
- Outline button
63
- </button>
64
- {/capture}{$code|code('html', true)|noescape}
65
- {capture $code}
66
- <button class="ui-btn bordered accent-main">
67
- Outline button - base color
68
- </button>
69
- {/capture}{$code|code('html', true)|noescape}
70
- {capture $code}
71
- <button class="ui-btn max-md:square">
72
- <svg>
73
- <use href="#icon-at-symbol"></use>
74
- </svg>
75
- <span class="max-md:hidden">Button with icon</span>
76
- </button>
77
- {/capture}{$code|code('html', true)|noescape}
78
- {capture $code}
79
- <button class="ui-btn accent-main">
80
- Next
81
- <svg>
82
- <use href="#icon-chevron-right"></use>
83
- </svg>
84
- </button>
85
- {/capture}{$code|code('html', true)|noescape}
86
- {capture $code}
87
- <button class="ui-btn accent-main">
88
- <svg>
89
- <use href="#icon-chevron-left"></use>
90
- </svg>
91
- Previous
92
- </button>
93
- {/capture}{$code|code('html', true)|noescape}
94
- {capture $code}
95
- <button class="ui-btn accent-main">
96
- Continue
97
- <svg>
98
- <use href="#icon-angle-down-solid"></use>
99
- </svg>
100
- </button>
101
- {/capture}{$code|code('html', true)|noescape}
102
- {capture $code}
103
- <button class="ui-btn square accent-main">
104
- <svg class="icon">
105
- <use href="#icon-at-symbol"></use>
106
- </svg>
107
- </button>
108
- {/capture}{$code|code('html', true)|noescape}
109
- {capture $code}
110
- <button class="ui-btn circle accent-main">
111
- <svg class="icon">
112
- <use href="#icon-at-symbol"></use>
113
- </svg>
114
- </button>
115
- {/capture}{$code|code('html', true)|noescape}
116
- {capture $code}
117
- <button class="ui-btn lg circle accent-main">
118
- <svg class="icon">
119
- <use href="#icon-at-symbol"></use>
120
- </svg>
121
- </button>
122
- {/capture}{$code|code('html', true)|noescape}
123
- {capture $code}
124
- <button class="ui-btn lg">
125
- Large flat button
126
- </button>
127
- {/capture}{$code|code('html', true)|noescape}
128
- {capture $code}
129
- <button class="ui-btn loading">
130
- Loading state
131
- </button>
132
- {/capture}{$code|code('html', true)|noescape}
133
- {capture $code}
134
- <div class="ui-group">
135
- <button class="ui-btn">
136
- Flat button
137
- </button>
138
- <button class="ui-btn active">
139
- Flat button
140
- </button>
141
- <button class="ui-btn">
142
- Flat button
143
- </button>
144
- <button class="ui-btn">
145
- Flat button
146
- </button>
147
- </div>
148
- {/capture}{$code|code('html', true)|noescape}
149
- {capture $code}
150
- <div class="ui-group">
151
- <button class="ui-btn">
152
- Flat button
153
- </button>
154
- <button class="ui-btn square bg-opacity-80">
155
- <svg class="icon">
156
- <use href="#icon-angle-down-solid"></use>
157
- </svg>
158
- </button>
159
- </div>
160
- {/capture}{$code|code('html', true)|noescape}
161
- <hr>
162
- </div>
163
- <div class="w-full" id="link">
164
- <h1 class="ui-heading mb-4">Link</h1>
165
- <div class="ui-text mb-6">
166
- <p>See <a href="https://winduum.dev/docs/ui/link.html" target="_blank">ui/link</a> for more info.</p>
167
- </div>
168
- {capture $code}
169
- <a href="#" class="ui-link" title="">
170
- Show more
171
- </a>
172
- {/capture}{$code|code('html', true)|noescape}
173
- {capture $code}
174
- <a href="#" class="ui-link underline decoration-transparent accent-primary" title="">
175
- With underline
176
- </a>
177
- {/capture}{$code|code('html', true)|noescape}
178
- {capture $code}
179
- <a href="#" class="ui-link underline accent-primary" title="">
180
- With underline
181
- </a>
182
- {/capture}{$code|code('html', true)|noescape}
183
- <hr>
184
- </div>
185
- <div class="w-full" id="control">
186
- <h1 class="ui-heading mb-4">Control</h1>
187
- <div class="ui-text mb-6">
188
- <p>See <a href="https://winduum.dev/docs/ui/control.html" target="_blank">ui/control</a> for more info.</p>
189
- </div>
190
- {capture $code}
191
- <div class="ui-control">
192
- <select>
193
- <option selected value="">- select option -</option>
194
- <option value="1">Option 1</option>
195
- <option value="2">Option 2</option>
196
- <option value="3">Option 3</option>
197
- </select>
198
- <label>How are you?</label>
199
- </div>
200
- {/capture}{$code|code('html', true)|noescape}
201
- {capture $code}
202
- <div class="ui-control">
203
- <select>
204
- <option selected value="">- select option -</option>
205
- <option value="1">Option 1</option>
206
- <option value="2">Option 2</option>
207
- <option value="3">Option 3</option>
208
- </select>
209
- <label>With icon</label>
210
- <svg class="me-auto">
211
- <use href="#icon-at-symbol"></use>
212
- </svg>
213
- </div>
214
- {/capture}{$code|code('html', true)|noescape}
215
- {capture $code}
216
- <div class="ui-control">
217
- <select data-placeholder>
218
- <option selected value="">- select option -</option>
219
- <option value="1">Option 1</option>
220
- <option value="2">Option 2</option>
221
- <option value="3">Option 3</option>
222
- </select>
223
- </div>
224
- {/capture}{$code|code('html', true)|noescape}
225
- {capture $code}
226
- <div class="ui-control" tabindex="-1" data-controller="ui-control-select">
227
- <select>
228
- <option selected="" value="">- select an option -</option>
229
- <option value="1">Option 1</option>
230
- <option value="2" disabled>Option 2</option>
231
- <option value="3">Option 3</option>
232
- </select>
233
- <label>Javascript select</label>
234
- <div aria-hidden="true">
235
- <div data-option="" tabindex="0">- select option -</div>
236
- <div data-option="1" tabindex="0">Option 1</div>
237
- <div data-option="2" data-disabled>Option 2</div>
238
- <div data-option="3" tabindex="0">Option 3</div>
239
- </div>
240
- </div>
241
- {/capture}{$code|code('html', true)|noescape}
242
- {capture $code}
243
- <div class="ui-control">
244
- <select data-placeholder disabled>
245
- <option selected value="">Disabled state</option>
246
- <option value="1">Option 1</option>
247
- <option value="2">Option 2</option>
248
- <option value="3">Option 3</option>
249
- </select>
250
- </div>
251
- {/capture}{$code|code('html', true)|noescape}
252
- {capture $code}
253
- <div class="ui-control">
254
- <input type="email" required placeholder="Please fill..">
255
- <label>E-mail</label>
256
- </div>
257
- {/capture}{$code|code('html', true)|noescape}
258
- {capture $code}
259
- <div class="ui-control">
260
- <input type="tel" placeholder="Tel">
261
- </div>
262
- {/capture}{$code|code('html', true)|noescape}
263
- {capture $code}
264
- <div class="ui-control">
265
- <input type="text" required placeholder="Please fill">
266
- <label>Amount</label>
267
- <span class="ms-auto">Kč</span>
268
- </div>
269
- {/capture}{$code|code('html', true)|noescape}
270
- {capture $code}
271
- <div class="ui-control">
272
- <input type="tel" disabled>
273
- <label>Disabled state</label>
274
- </div>
275
- {/capture}{$code|code('html', true)|noescape}
276
- {capture $code}
277
- <div class="ui-control">
278
- <textarea></textarea>
279
- <label>Message</label>
280
- </div>
281
- {/capture}{$code|code('html', true)|noescape}
282
- {capture $code}
283
- <div class="ui-control">
284
- <input type="color" placeholder="Select color">
285
- </div>
286
- {/capture}{$code|code('html', true)|noescape}
287
- {capture $code}
288
- <div class="ui-control">
289
- <input type="file" multiple="multiple" title="Upload files" placeholder="Select or drag file(s)">
290
- </div>
291
- {/capture}{$code|code('html', true)|noescape}
292
- {capture $code}
293
- <div class="ui-control">
294
- <input type="number" min="1" max="99" step="1">
295
- <label>Select number</label>
296
- </div>
297
- {/capture}{$code|code('html', true)|noescape}
298
- {capture $code}
299
- <div class="ui-control">
300
- <input type="datetime-local">
301
- <label>Select date and time</label>
302
- <div class="ms-auto">
303
- <svg data-action="click->ui-control#showDatepicker">
304
- <use href="#icon-calendar"></use>
305
- </svg>
306
- </div>
307
- </div>
308
- {/capture}{$code|code('html', true)|noescape}
309
- {capture $code}
310
- <div class="ui-control">
311
- <input type="date">
312
- <label>Select date</label>
313
- </div>
314
- {/capture}{$code|code('html', true)|noescape}
315
- {capture $code}
316
- <div class="ui-control w-28">
317
- <input type="number" placeholder="" value="1" min="1" max="99" step="1">
318
- <div class="ms-auto">
319
- <div>Kč</div>
320
- </div>
321
- </div>
322
- {/capture}{$code|code('html', true)|noescape}
323
- {capture $code}
324
- <div class="ui-control">
325
- <input type="time" placeholder="Select time">
326
- <div class="ms-auto">
327
- <svg data-action="click->ui-control#showPicker">
328
- <use href="#icon-clock"></use>
329
- </svg>
330
- </div>
331
- </div>
332
- {/capture}{$code|code('html', true)|noescape}
333
- </div>
334
- <div class="w-full" id="check">
335
- <h1 class="ui-heading mb-4">Check</h1>
336
- <div class="ui-text mb-6">
337
- <p>See <a href="https://winduum.dev/docs/ui/check.html" target="_blank">ui/check</a> for more info.</p>
338
- </div>
339
- {capture $code}
340
- <div class="p-5 bg-gray-200 dark:bg-dark rounded-lg">
341
- <label class="ui-check">
342
- <input type="checkbox">
343
- <span>I agree to the <a href="#">processing of personal data</a></span>
344
- </label>
345
- </div>
346
- {/capture}{$code|code('html', true)|noescape}
347
- {capture $code}
348
- <div class="p-5 text-light bg-dark rounded-lg">
349
- <label class="ui-check accent-light" data-theme="dark">
350
- <input type="checkbox">
351
- <span>I agree to the <a href="#">processing of personal data</a></span>
352
- </label>
353
- </div>
354
- {/capture}{$code|code('html', true)|noescape}
355
- {capture $code}
356
- <div class="p-5 text-light bg-dark rounded-lg">
357
- <label class="ui-check accent-info">
358
- <input type="checkbox">
359
- <span>I agree to the <a href="#">processing of personal data</a></span>
360
- </label>
361
- </div>
362
- {/capture}{$code|code('html', true)|noescape}
363
- {capture $code}
364
- <label class="ui-check flex-row-reverse">
365
- <input type="checkbox" class="checked:border-primary" style="--ui-checkbox-checked-bg: transparent; --ui-checkbox-checked-fg: var(--color-primary);">
366
- <span>I agree to the <a href="#">processing of personal data</a></span>
367
- </label>
368
- {/capture}{$code|code('html', true)|noescape}
369
- {capture $code}
370
- <label class="ui-check">
371
- <input type="radio" name="radio">
372
- <span>Click on this radio button</span>
373
- </label>
374
- {/capture}{$code|code('html', true)|noescape}
375
- {capture $code}
376
- <label class="ui-check">
377
- <input type="checkbox" class="mr-3">
378
- Without inner span
379
- </label>
380
- {/capture}{$code|code('html', true)|noescape}
381
- {capture $code}
382
- <label class="ui-check">
383
- <input type="checkbox">
384
- </label>
385
- {/capture}{$code|code('html', true)|noescape}
386
- {capture $code}
387
- <label class="ui-check">
388
- <input type="radio" name="radio">
389
- </label>
390
- {/capture}{$code|code('html', true)|noescape}
391
- </div>
392
- <div class="w-full" id="notice">
393
- <h1 class="ui-heading mb-4">Notice</h1>
394
- <div class="ui-text mb-6">
395
- <p>See <a href="https://winduum.dev/docs/ui/notice.html" target="_blank">ui/notice</a> for more info.</p>
396
- </div>
397
- {capture $code}
398
- <div class="ui-notice accent-warning">
399
- Warning notice
400
- </div>
401
- {/capture}{$code|code('html', true)|noescape}
402
- {capture $code}
403
- <div class="ui-notice accent-success">
404
- Success notice
405
- </div>
406
- {/capture}{$code|code('html', true)|noescape}
407
- {capture $code}
408
- <div class="ui-notice accent-info">
409
- Info notice
410
- </div>
411
- {/capture}{$code|code('html', true)|noescape}
412
- {capture $code}
413
- <div class="ui-notice accent-error">
414
- Error notice
415
- </div>
416
- {/capture}{$code|code('html', true)|noescape}
417
- {capture $code}
418
- <div class="ui-notice accent-error flex-col gap-4">
419
- Error notice
420
- <hr>
421
- <button class="ui-btn">
422
- <span>Button</span>
423
- </button>
424
- </div>
425
- {/capture}{$code|code('html', true)|noescape}
426
- {capture $code}
427
- <div class="ui-notice accent-success flex-col gap-4">
428
- <div class="ui-text">
429
- <h4>Nicely done!</h4>
430
- <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
431
- </div>
432
- <hr>
433
- <button class="ui-btn">
434
- <span>Button</span>
435
- </button>
436
- </div>
437
- {/capture}{$code|code('html', true)|noescape}
438
- {capture $code}
439
- <div class="ui-notice accent-info flex-col gap-4">
440
- Info notice
441
- <hr>
442
- <button class="ui-btn">
443
- <span>Button</span>
444
- </button>
445
- </div>
446
- {/capture}{$code|code('html', true)|noescape}
447
- {capture $code}
448
- <div class="ui-notice accent-warning flex-col gap-4">
449
- Warning notice
450
- <hr>
451
- <button class="ui-btn">
452
- <span>Button</span>
453
- </button>
454
- </div>
455
- {/capture}{$code|code('html', true)|noescape}
456
- {capture $code}
457
- <div class="ui-notice bg-error accent-light flex-col gap-4">
458
- <div class="ui-text">
459
- <h4>Badly done!</h4>
460
- <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
461
- </div>
462
- <hr>
463
- <button class="ui-btn accent-light muted">
464
- <span>Button</span>
465
- </button>
466
- </div>
467
- {/capture}{$code|code('html', true)|noescape}
468
- </div>
469
- <div class="w-full" id="badge">
470
- <h1 class="ui-heading mb-4">Badge</h1>
471
- <div class="ui-text mb-6">
472
- <p>See <a href="https://winduum.dev/docs/ui/badge.html" target="_blank">ui/badge</a> for more info.</p>
473
- </div>
474
- {capture $code}
475
- <div class="ui-badge sm">
476
- Default
477
- </div>
478
- {/capture}{$code|code('html', true)|noescape}
479
- {capture $code}
480
- <div class="ui-badge accent-dark">
481
- Dark
482
- </div>
483
- {/capture}{$code|code('html', true)|noescape}
484
- {capture $code}
485
- <div class="ui-badge accent-light">
486
- Light
487
- </div>
488
- {/capture}{$code|code('html', true)|noescape}
489
- {capture $code}
490
- <div class="ui-badge accent-primary rounded-full">
491
- <span>Primary</span>
492
- </div>
493
- {/capture}{$code|code('html', true)|noescape}
494
- {capture $code}
495
- <a href="#" class="ui-badge accent-main">
496
- Secondary
497
- </a>
498
- {/capture}{$code|code('html', true)|noescape}
499
- {capture $code}
500
- <button class="ui-badge circle accent-main">
501
- 9
502
- </button>
503
- {/capture}{$code|code('html', true)|noescape}
504
- {capture $code}
505
- <button class="ui-badge md square accent-main">
506
- 99
507
- </button>
508
- {/capture}{$code|code('html', true)|noescape}
509
- {capture $code}
510
- <button class="ui-badge circle accent-main">
511
- <svg>
512
- <use href="#icon-x-mark"></use>
513
- </svg>
514
- </button>
515
- {/capture}{$code|code('html', true)|noescape}
516
- {capture $code}
517
- <div class="ui-group">
518
- <div class="ui-badge accent-dark">
519
- <span>npm</span>
520
- </div>
521
- <div class="ui-badge accent-info">
522
- <span>7.1.2</span>
523
- </div>
524
- </div>
525
- {/capture}{$code|code('html', true)|noescape}
526
- <hr>
527
- </div>
528
- <div class="w-full" id="progress">
529
- <h1 class="ui-heading mb-4">Progress</h1>
530
- <div class="ui-text mb-6">
531
- <p>See <a href="https://winduum.dev/docs/ui/progress.html" target="_blank">ui/progress</a> for more info.</p>
532
- </div>
533
- <div>
534
- {capture $code}
535
- <progress class="ui-progress accent-main" value="15" max="100">15%</progress>
536
- {/capture}{$code|code('html', true)|noescape}
537
- {capture $code}
538
- <progress class="ui-progress accent-primary" value="50" max="100">15%</progress>
539
- {/capture}{$code|code('html', true)|noescape}
540
-
541
- {capture $code}
542
- <progress class="ui-progress sm accent-error" value="75" max="100">15%</progress>
543
- {/capture}{$code|code('html', true)|noescape}
544
- {capture $code}
545
- <progress class="ui-progress accent-error" max="100">15%</progress>
546
- {/capture}{$code|code('html', true)|noescape}
547
- </div>
548
- <hr>
549
- </div>
550
- <div class="w-full" id="text">
551
- <h1 class="ui-heading mb-4">Text</h1>
552
- <div class="ui-text mb-6">
553
- <p>See <a href="https://winduum.dev/docs/ui/text.html" target="_blank">ui/text</a> for more info.</p>
554
- </div>
555
- {capture $code}
556
- <div class="ui-text">
557
- <h1>h1 heading</h1>
558
- <h2>h2 heading</h2>
559
- <h3>h3 heading</h3>
560
- <h4>h4 heading</h4>
561
- <h5>h5 heading</h5>
562
- <h6>h6 heading</h6>
563
- <p>Lorem ipsum dolor</p>
564
- <hr>
565
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur
566
- metus. In bibendum nisi et dui <a href="#">sagittis efficitur</a>. Proin porttitor diam at quam
567
- finibus, quis porttitor turpis ullamcorper. Quisque iaculis imperdiet nunc in
568
- hendrerit. Nulla facilisi. Sed at sodales ex. Vivamus ornare auctor ligula et
569
- lobortis. Nunc metus augue, tristique vitae sagittis ac, interdum eu nisl.
570
- Curabitur aliquet, lectus ut interdum commodo, ipsum elit gravida libero, in
571
- laoreet lectus nisl a erat. Sed consequat justo pulvinar turpis pharetra mattis.
572
- Phasellus non pretium libero.</p>
573
- <p></p>
574
- <ul style="max-width: 400px">
575
- <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
576
- bibendum nisi et dui
577
- </li>
578
- <li>Donec eget efficitur metus</li>
579
- </ul>
580
- <p></p>
581
- <ul style="max-width: 400px; list-style: square">
582
- <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
583
- bibendum nisi et dui
584
- </li>
585
- <li>Donec eget efficitur metus</li>
586
- </ul>
587
- <p></p>
588
- <ul style="max-width: 400px; list-style: circle">
589
- <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
590
- bibendum nisi et dui
591
- </li>
592
- <li>Donec eget efficitur metus</li>
593
- </ul>
594
- <p></p>
595
- <ol style="max-width: 400px;">
596
- <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
597
- bibendum nisi et dui
598
- </li>
599
- <li>Donec eget efficitur metus</li>
600
- </ol>
601
- <ol type="1">
602
- <li>Coffee</li>
603
- <li>Tea</li>
604
- <li>Milk</li>
605
- </ol>
606
- <ol type="A">
607
- <li>Coffee</li>
608
- <li>Tea</li>
609
- <li>Milk</li>
610
- </ol>
611
- <ol type="a">
612
- <li>Coffee</li>
613
- <li>Tea</li>
614
- <li>Milk</li>
615
- </ol>
616
- <ol type="I">
617
- <li>Coffee</li>
618
- <li>Tea</li>
619
- <li>Milk</li>
620
- </ol>
621
- <ol type="i">
622
- <li>Coffee</li>
623
- <li>Tea</li>
624
- <li>Milk</li>
625
- </ol>
626
- <p></p>
627
- <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
628
- <p></p>
629
- <figure>
630
- <img src="https://bulma.io/images/placeholders/256x256.png">
631
- <figcaption>
632
- Figure 1: Some beautiful placeholders
633
- </figcaption>
634
- </figure>
635
- <h2>Heading</h2>
636
- <table>
637
- <thead>
638
- <tr>
639
- <th scope="col">#</th>
640
- <th scope="col">First</th>
641
- <th scope="col">Last</th>
642
- <th scope="col">Handle</th>
643
- </tr>
644
- </thead>
645
- <tbody>
646
- <tr>
647
- <th scope="row">1</th>
648
- <td>Mark</td>
649
- <td>Otto</td>
650
- <td>@mdo</td>
651
- </tr>
652
- <tr>
653
- <th scope="row">2</th>
654
- <td>Jacob</td>
655
- <td>Thornton</td>
656
- <td>@fat</td>
657
- </tr>
658
- <tr>
659
- <th scope="row">3</th>
660
- <td>Larry</td>
661
- <td>the Bird</td>
662
- <td>@twitter</td>
663
- </tr>
664
- </tbody>
665
- </table>
666
- <p></p>
667
- <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
668
- </div>
669
- {/capture}{$code|code('html', true)|noescape}
670
- </div>
671
- <div class="w-full col-images" id="image">
672
- <h1 class="ui-heading mb-4">Image</h1>
673
- <div class="ui-text mb-6">
674
- <p>Images should be wrapped inside <code>.ui-image</code> class and as <code>div</code> or <code>picture</code></p>
675
- <p>You can add lazyload for the images with <code>loading="lazy"</code> attribute.</p>
676
- <p>To maintain ratio of the images you have to add ratio class from TailwindCSS, for example <code>aspect-[4/3]</code> or add <code>width</code> and <code>height</code> attributes to image.</p>
677
- </div>
678
- <div>
679
- {capture $code}
680
- <div class="ui-image aspect-[3/2]">
681
- <img src="https://via.placeholder.com/300x200" alt="" loading="lazy">
682
- </div>
683
- {/capture}{$code|code('html', true)|noescape}
684
- </div>
685
- <div>
686
- {capture $code}
687
- <picture class="ui-image aspect-[3/2]">
688
- <source srcset="https://via.placeholder.com/300x200">
689
- <img src="https://via.placeholder.com/300x200" alt="" loading="lazy">
690
- </picture>
691
- {/capture}{$code|code('html', true)|noescape}
692
- </div>
693
- <div class="ui-text mb-5">
694
- <p>Lazyload can be added also on <code>iframe</code></p>
695
- </div>
696
- <div>
697
- {capture $code}
698
- <div class="ui-image aspect-square">
699
- <iframe loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10243.539317839937!2d14.3677486!3d50.0697185!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x66f5877a189baf0d!2sTvorba+webov%C3%BDch+str%C3%A1nek+-+New+Logic+Studio!5e0!3m2!1sen!2scz!4v1547215701439" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
700
- </div>
701
- {/capture}{$code|code('html', true)|noescape}
702
- </div>
703
- <hr>
704
- </div>
705
- </div>
706
- <div class="flex-col gap-8 flex-wrap" style="padding-top: 3rem;">
707
- <div class="w-full" style="padding-top: 0">
708
- <h1 class="ui-title lg uppercase text-primary">Libraries</h1>
709
- </div>
710
- <div class="w-full" id="form">
711
- <h1 class="ui-heading mb-4">Form</h1>
712
- <div class="ui-text mb-6">
713
- <p>Provides javascript form validation upon send via <code>data-controller="lib-form"</code> attribute.</p>
714
- </div>
715
- {capture $code}
716
- <form class="c-form" data-controller="lib-form" action="/">
717
- <div class="grid gap-3">
718
- <div class="c-field">
719
- <div class="ui-control">
720
- <select required>
721
- <option selected disabled value="">- select option -</option>
722
- <option>Czechia</option>
723
- <option>Slovakia</option>
724
- </select>
725
- <label>Select country</label>
726
- </div>
727
- </div>
728
- <div class="c-field">
729
- <div class="ui-control">
730
- <textarea required></textarea>
731
- <label>Message</label>
732
- </div>
733
- </div>
734
- </div>
735
- <div class="grid gap-3 py-4">
736
- <div class="text-sm">Protected with reCAPTCHA <small>(<a href="https://www.google.com/intl/en/policies/privacy/" title="Privacy policy" target="_blank" rel="noopener">Privacy policy</a> - <a href="https://www.google.com/intl/en/policies/terms/" title="Terms of use" target="_blank" rel="noopener">Terms of use</a>)</small></div>
737
- <div class="c-field">
738
- <label class="ui-check">
739
- <input type="checkbox" required>
740
- <span>I agree with <a href="#">terms of use</a> and <a href="#">privacy policy</a></span>
741
- </label>
742
- </div>
743
- </div>
744
- <button class="ui-btn">Send</button>
745
- </form>
746
- {/capture}{$code|code('html', true)|noescape}
747
- <hr>
748
- </div>
749
- <div class="w-full" id="dialog">
750
- <h1 class="ui-heading mb-4">Dialog</h1>
751
- <div class="ui-text mb-6">
752
- <h5>Usage on click</h5>
753
- <p>You can add <code>data-action="click->lib-dialog#show"</code> on any element with attribute <code>data-lib-dialog-url-param</code> which is url to <code>*.json</code> file or url request which contains html. For closing the dialog window, you can add <code>data-action="click->lib-dialog#close"</code> to any element inside the dialog.</p>
754
- <h5>Usage on page load</h5>
755
- <p>To open dialog upon page load, add <code>data-lib-dialog-open-option</code> attribute on <code>data-controller="lib-dialog"</code> (by default located on body), </p>
756
- <p>Url is passed as <code>data-lib-dialog-url-option</code>, you can also add selector to <code>data-lib-dialog-open-option</code>, HTML content of that selector opens as a dialog.</p>
757
- <h5>Tokens (c-dialog-content)</h5>
758
- <ul>
759
- <li><code>scrollable</code> - scroll inside dialog</li>
760
- </ul>
761
- <h5>Attributes (click->lib-dialog#show)</h5>
762
- <ul>
763
- <li><code>data-lib-dialog-url-param</code> - url of <code>*.json</code> file</li>
764
- <li><code>data-lib-dialog-remove-param</code> - <code>true/false</code> whenever to remove dialog element from dom after closing</li>
765
- <li><code>data-lib-dialog-append-param</code> - <code>true/false</code> whenever to append new dialog element after the previous dialog, otherwise the previous is replaced</li>
766
- </ul>
767
- <p>See <a href="https://winduum.dev/docs/lib/dialog.html">libraries/dialog</a> for more info.</p>
768
- </div>
769
- {capture $code}
770
- <button class="ui-btn" data-action="click->lib-dialog#show" data-lib-dialog-url-param="/dialog/basic.json">
771
- Open dialog window
772
- </button>
773
- {/capture}{$code|code('html', true)|noescape}
774
- <hr>
775
- </div>
776
- <div class="w-full" id="ripple">
777
- <h1 class="ui-heading mb-4">Ripple</h1>
778
- <div class="ui-text mb-6">
779
- <p>The ripple effect is automatically applied to buttons and other components</p>
780
- <p>The effect is possible apply anywhere using the attribute <code>data-action="click->lib#ripple"</code></p>
781
- <p>Background color can be changed with CSS property <code>--lib-ripple-bg</code></p>
782
- <h5>Methods</h5>
783
- <ul>
784
- <li>initialization to any selector: <code>LibRipple(element)</code></li>
785
- </ul>
786
- </div>
787
- {capture $code}
788
- <div class="ui-btn" data-action="click->lib-ripple#show">Ripple me</div>
789
- {/capture}{$code|code('html', true)|noescape}
790
- <hr>
791
- </div>
792
- <div class="w-full" id="drawer">
793
- <h1 class="ui-heading mb-4">Drawer</h1>
794
- <div class="ui-text">
795
- <h5>Files:</h5>
796
- <ul class="mt-0">
797
- <li><code>src/scripts/Libraries/Drawer.js</code></li>
798
- <li><code>src/styles/Libraries/Drawer.css</code></li>
799
- </ul>
800
- </div>
801
- <hr>
802
- </div>
803
- <div class="w-full" id="datepicker">
804
- <h1 class="ui-heading mb-4">Datepicker</h1>
805
- <div class="ui-text">
806
- <p><a href="https://github.com/t1m0n/air-datepicker" target="_blank">Air Datepicker</a> is used as library in <code>ui-control</code> for <code>type="date"</code> and <code>type="datetime-local"</code>.</p>
807
- <h5>Files:</h5>
808
- <ul class="mt-0">
809
- <li><code>src/styles/Libraries/Datepicker.css</code></li>
810
- </ul>
811
- </div>
812
- <hr>
813
- </div>
814
- <div class="w-full" id="swup">
815
- <h1 class="ui-heading mb-4">Swup</h1>
816
- <div class="ui-text">
817
- <p>Full-page animations between pages are done using <a href="https://github.com/gmrchk/swup" target="_blank" rel="noopener">Swup</a></p>
818
- <p>Everything is automatic and if the JS is correctly defined via Stimulus, all JS is reinitialized after site navigation</p>
819
- <p>If you do not want to use Swup on a specific link, you can use the attribute <code>data-no-swup</code></p>
820
- <h5>Files:</h5>
821
- <ul class="mt-0">
822
- <li><code>src/scripts/Libraries/Swup.js</code></li>
823
- </ul>
824
- </div>
825
- <hr>
826
- </div>
827
- <div class="w-full" id="tippy">
828
- <h1 class="ui-heading mb-4">Tippy</h1>
829
- <div class="ui-text mb-6">
830
- <p>For dropdowns and tooltips the <a href="https://atomiks.github.io/tippyjs/" target="_blank">Tippy.js</a> library is used</p>
831
- <p>Tippy properties can be freely modified using attributes <a href="https://atomiks.github.io/tippyjs/v6/customization/" target="_blank">data-tippy-*</a></p>
832
- <p>The basic properties are defined by <code>data-lib-tippy="type, template"</code></p>
833
- <ul>
834
- <li><code>type</code> can be <code>dropdown</code> or <code>tooltip</code> with variants <code>-arrow</code> and <code>-full</code> (full width view on your phone)</li>
835
- <li><code>template</code> can be <code>id</code> section with html or url for <code>fetch</code> (the response must contain json with the key <code>content</code>)</li>
836
- </ul>
837
- <h5>Methods</h5>
838
- <ul>
839
- <li>initialization: <code>new LibTippy(element, attributes)</code></li>
840
- </ul>
841
- <h5>Files:</h5>
842
- <ul class="mt-0">
843
- <li><code>src/scripts/Libraries/Tippy.js</code></li>
844
- </ul>
845
- <p>Loading tippy template from external file:</p>
846
- </div>
847
- {capture $code}
848
- <button class="ui-btn square" type="button" data-controller="lib-tippy" data-lib-tippy="dropdown-full, /dropdown/tippy.json" data-lib-tippy-slot='{ "edit": "Upravit položku", "delete": "Smazat položku" }'>
849
- <svg class="icon"><use href="#icon-at-symbol"></use></svg>
850
- </button>
851
- {/capture}{$code|code('html', true)|noescape}
852
- <div class="ui-text mb-5">
853
- <p>Loading a tippy template from an inline template</p>
854
- </div>
855
- {capture $code}
856
- <button class="ui-btn max-w-fit" type="button" data-controller="lib-tippy" data-lib-tippy="tooltip-arrow, tippy-template" data-lib-tippy-slot='{ "edit": "Upravit položku", "delete": "Smazat položku" }'>
857
- Tooltip arrow
858
- </button>
859
- <template id="tippy-template">
860
- <div class="c-dropdown">
861
- <ul class="wrp_c_list flex-col gap-y-4">
862
- <li class="flex-col">
863
- <button class="ui-link underline decoration-transparent">
864
- <span>{ edit }</span>
865
- </button>
866
- </li>
867
- <li class="flex-col">
868
- <button class="ui-link underline decoration-transparent">
869
- <span>{ delete }</span>
870
- </button>
871
- </li>
872
- </ul>
873
- </div>
874
- </template>
875
- {/capture}{$code|code('html', true)|noescape}
876
- <div class="ui-text mb-5">
877
- <p>Classic tooltip</p>
878
- </div>
879
- {capture $code}
880
- <button class="ui-btn max-w-fit" type="button" data-controller="lib-tippy" aria-label="Hello world">
881
- Basic tooltip
882
- </button>
883
- {/capture}{$code|code('html', true)|noescape}
884
- <hr>
885
- </div>
886
- <div class="w-full" id="cookieconsent">
887
- <h1 class="ui-heading mb-4">CookieConsent</h1>
888
- <div class="ui-text">
889
- <h5>Files:</h5>
890
- <ul class="mt-0">
891
- <li><code>src/scripts/Libraries/CookieConsent.js</code></li>
892
- <li><code>src/styles/Components/Dialog/CookieConsent.css</code></li>
893
- <li><code>src/styles/Components/Form/CookieConsent.css</code></li>
894
- </ul>
895
- </div>
896
- <hr>
897
- </div>
898
- <div class="w-full" id="recaptcha">
899
- <h1 class="ui-heading mb-4">ReCaptcha</h1>
900
- <div class="ui-text mb-6">
901
- <p>Uses Google's <a href="https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages" target="_blank">recaptcha-enterprise</a></p>
902
- <p>ReCaptcha can be added to various types of forms, which can be optionally distinguished with attribute <code>data-lib-recaptcha-action-value</code></p>
903
- <p>Api key has to be added with <code>data-lib-recaptcha-api-value</code> attribute</p>
904
- <p>It can be evaluated upon submitting the form, with attribute <code>data-action="submit->lib-recaptcha#execute:prevent"</code> or can be submitted with <code>data-naja</code> which sends form via naja.</p>
905
- <h5>Files:</h5>
906
- <ul class="mt-0">
907
- <li><code>src/scripts/Libraries/ReCaptcha.js</code></li>
908
- </ul>
909
- </div>
910
- {capture $code}
911
- <form data-controller="lib-recaptcha" data-lib-recaptcha-api-value="RECAPTCHA_KEY" data-lib-recaptcha-action-value="contact" data-action="submit->lib-recaptcha#execute:prevent">
912
- <input name="gtoken" type="hidden">
913
- <button>Send</button>
914
- </form>
915
- {/capture}{$code|code('html', false)|noescape}
916
- <hr>
917
- </div>
918
- <div class="w-full" id="stimulus">
919
- <h1 class="ui-heading mb-4">Stimulus</h1>
920
- <div class="ui-text">
921
- <p><a href="https://stimulusjs.org/" target="_blank" rel="noopener">Stimulus</a> is used for controller definitions, events and other JS interactions.</p>
922
- <p>This library ensures the life of individual components and initializes them automatically when the content is redrawn.</p>
923
- <p>Stimulus uses three main attributes <code>data-controller</code> (component definition), <code>data-action</code> (event definition - click, change etc.), <code>data-target</code> (target element in DOM)</p>
924
- <p>Usage example with all attributes:</p>
925
- </div>
926
- <pre><code class="language-html">
927
- <div data-controller="lib-example" data-lib-example-active-class="active" data-lib-example-text-value="0">
928
- <button data-action="click->lib-example#show" data-action-color="red"></button>
929
- <div data-lib-example-target="itemTarget"></div>
930
- </div>
931
- </code></pre>
932
- <pre><code class="language-js">
933
- import { LibStimulus, Controller, getController } from "../Libraries/Stimulus.js";
934
-
935
- LibStimulus.register("lib-example", class extends Controller {
936
- // alternative target definitions (you can also use this.queryTarget or this.queryTargetAll instead)
937
- static targets = ['item']
938
- static classes = [ 'active' ]
939
- static values = {
940
- text: Number
941
- }
942
-
943
- connect() {
944
- // starts when the controller is loaded into DOM
945
- }
946
-
947
- disconnect() {
948
- // starts when the controller is deleted from DOM, use mainly if event listeners that are outside the controller are created in connect
949
- }
950
-
951
- show({ currentTarget }) {
952
- // specific action to which the event can be applied
953
-
954
- // refer to a specific target element and add a class and color settings
955
- this.itemTarget.classList.add(this.activeClass);
956
- this.itemTarget.style.color = currentTarget.dataset.actionColor;
957
-
958
- // extract custom text defined by the controller, this always refers to the controller
959
- if (!this.hasTextValue) {
960
- this.textValue = 1;
961
- }
962
-
963
- this.itemTarget.textContent = this.textValue;
964
- this.textValue = 2;
965
-
966
- // This method can be used to communicate with another controller
967
- getController(document.querySelector(".other_controller"), "other_controller").doSomething()
968
- }
969
- })
970
- </code></pre>
971
- <div class="ui-text">
972
- <p>To fully understand the functionality, we recommend studying <a href="https://stimulusjs.org/reference/controllers" target="_blank" rel="noopener">documentation</a></p>
973
- </div>
974
- </div>
975
- </div>
976
- </div>
977
- </div>
978
- </div>
979
- </section>