@newlogic-digital/ui 3.2.0 → 3.4.2

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 (89) hide show
  1. package/README.md +1 -5
  2. package/package.json +21 -14
  3. package/src/data/main.json +5 -1
  4. package/src/emails/{email.css → styles/email.css} +1 -1
  5. package/src/emails/templates/Content.twig +16 -0
  6. package/src/emails/templates/Header.twig +14 -0
  7. package/src/emails/templates/Layout.twig +23 -0
  8. package/src/scripts/Components/CookieConsent.js +0 -1
  9. package/src/scripts/Layout/Header.js +23 -11
  10. package/src/scripts/Layout/Main.js +6 -39
  11. package/src/scripts/Libraries/+.js +2 -1
  12. package/src/scripts/Libraries/Dialog.js +35 -65
  13. package/src/scripts/Libraries/Drawer.js +21 -15
  14. package/src/scripts/Libraries/Form.js +14 -18
  15. package/src/scripts/Libraries/Naja.js +35 -0
  16. package/src/scripts/Libraries/NativeSlider.js +3 -2
  17. package/src/scripts/Libraries/ReCaptcha.js +24 -4
  18. package/src/scripts/Libraries/Stimulus.js +1 -31
  19. package/src/scripts/Libraries/Swup.js +24 -32
  20. package/src/scripts/Libraries/Tabs.js +5 -5
  21. package/src/scripts/Libraries/Tippy.js +3 -1
  22. package/src/scripts/Ui/+.js +0 -1
  23. package/src/scripts/Ui/Checkbox.js +4 -13
  24. package/src/scripts/Ui/Input.js +19 -65
  25. package/src/scripts/Ui/Select.js +11 -39
  26. package/src/scripts/Ui/Text.js +2 -4
  27. package/src/scripts/Utils/Functions/+.js +1 -1
  28. package/src/scripts/Utils/Functions/checkValidity.js +44 -0
  29. package/src/scripts/Utils/Functions/loadStimulus.js +4 -1
  30. package/src/scripts/Utils/cdn.js +3 -3
  31. package/src/scripts/Utils/global.js +6 -8
  32. package/src/styles/Components/+.css +1 -1
  33. package/src/styles/Components/Dialog/Default.css +17 -52
  34. package/src/styles/Components/Dropdown/+.css +1 -0
  35. package/src/styles/{Ui/Dropdown.css → Components/Dropdown/Default.css} +1 -1
  36. package/src/styles/Layout/Main.css +4 -20
  37. package/src/styles/Libraries/+.css +0 -1
  38. package/src/styles/Libraries/Dialog.css +23 -7
  39. package/src/styles/Libraries/Drawer.css +3 -9
  40. package/src/styles/Libraries/Hint.css +4 -3
  41. package/src/styles/Libraries/NativeSlider.css +8 -0
  42. package/src/styles/Libraries/Ripple.css +4 -17
  43. package/src/styles/Libraries/Tippy.css +1 -1
  44. package/src/styles/Ui/+.css +0 -1
  45. package/src/styles/Ui/Badge.css +1 -1
  46. package/src/styles/Ui/Btn.css +24 -6
  47. package/src/styles/Ui/Checkbox.css +28 -3
  48. package/src/styles/Ui/Heading.css +2 -1
  49. package/src/styles/Ui/Icon.css +2 -2
  50. package/src/styles/Ui/Image.css +1 -7
  51. package/src/styles/Ui/Input.css +65 -18
  52. package/src/styles/Ui/Label.css +2 -2
  53. package/src/styles/Ui/Link.css +13 -6
  54. package/src/styles/Ui/Notice.css +1 -1
  55. package/src/styles/Ui/Select.css +3 -5
  56. package/src/styles/Ui/Text.css +18 -4
  57. package/src/styles/Ui/Title.css +3 -2
  58. package/src/styles/Utils/+.css +1 -0
  59. package/src/styles/Utils/breakpoints.css +9 -0
  60. package/src/styles/Utils/default.css +12 -115
  61. package/src/styles/Utils/tailwind/+.css +1 -0
  62. package/src/styles/Utils/tailwind/base.css +0 -12
  63. package/src/styles/Utils/tailwind/utilities.css +48 -0
  64. package/src/styles/Utils/vars.css +28 -39
  65. package/src/styles/Utils/vendor.css +2 -1
  66. package/src/styles/main.css +2 -3
  67. package/src/templates/Components/Dialogs/Basic.twig +15 -17
  68. package/src/templates/Layout/Main.twig +0 -6
  69. package/src/templates/Sections/Ui/Docs/@intro.html +97 -0
  70. package/src/templates/Sections/Ui/Docs/@nav.html +195 -0
  71. package/src/templates/Sections/Ui/Docs/@styles.html +100 -0
  72. package/src/templates/Sections/Ui/Docs/Default.twig +1600 -0
  73. package/src/templates/Sections/Ui/Icons.html +28 -0
  74. package/src/templates/Sections/Ui/Intro.html +136 -0
  75. package/src/templates/Sections/Ui.twig +5 -2090
  76. package/src/templates/Utils/sections.twig +2 -2
  77. package/src/views/{dialog-basic.json.twig → dialog/basic.json.twig} +1 -1
  78. package/src/views/{json-tippy.json.twig → dropdown/tippy.json.twig} +3 -3
  79. package/src/views/email/email.twig +6 -0
  80. package/src/views/gdpr.json +2 -1
  81. package/src/views/index.json +2 -2
  82. package/src/views/ui-icons.json +12 -0
  83. package/src/views/ui.json +2 -2
  84. package/vite.config.js +24 -4
  85. package/src/emails/email.twig +0 -60
  86. package/src/scripts/Ui/Radio.js +0 -23
  87. package/src/scripts/Utils/Functions/inView.js +0 -25
  88. package/src/styles/Components/Item/+.css +0 -1
  89. package/src/styles/Libraries/Lazysizes.css +0 -9
package/src/templates/Sections/Ui/Docs/Default.twig ADDED
@@ -0,0 +1,1600 @@
1
+ <section class="s-ui" data-controller="s-ui">
2
+ <div class="wrp_s_body row">
3
+ {% include '@nav.html' %}
4
+ <div class="col col-right t:col-9 m:col-12">
5
+ <div class="container">
6
+ {% include '@intro.html' %}
7
+ <div class="row g-8 flex-wrap" style="padding-top: 4rem">
8
+ <div class="col-12">
9
+ <h1 class="ui-heading">Components</h1>
10
+ <div class="ui-text">
11
+ <p>List of basic components used in Newlogic UI</p>
12
+ </div>
13
+ </div>
14
+ <div class="col-12" id="headings">
15
+ <h1 class="ui-title uppercase text-primary mb-5">Headings</h1>
16
+ <div class="ui-text mb-5">
17
+ <h3>Attributes</h3>
18
+ <ul>
19
+ <li>data-size: <code>lg</code> <code>sm</code></li>
20
+ </ul>
21
+ </div>
22
+ {% code "html:mirror" %}
23
+ <h2 class="ui-heading" data-size="lg">Big heading</h2>
24
+ {% endcode %}
25
+ {% code "html:mirror" %}
26
+ <h2 class="ui-heading" data-size="lg">Big heading</h2>
27
+ {% endcode %}
28
+ {% code "html:mirror" %}
29
+ <h2 class="ui-heading">Normal heading</h2>
30
+ {% endcode %}
31
+ {% code "html:mirror" %}
32
+ <h2 class="ui-heading" data-size="sm">Small heading</h2>
33
+ {% endcode %}
34
+ {% code "html:mirror" %}
35
+ <strong class="ui-title uppercase">Title</strong>
36
+ {% endcode %}
37
+ <hr/>
38
+ </div>
39
+ <div class="col-12 items-start" id="buttons">
40
+ <h1 class="ui-title uppercase text-primary mb-5">Buttons</h1>
41
+ <div class="ui-text mb-5">
42
+ <p>Button can be extended with <code>svg</code> icon</p>
43
+ <p>Position of the icon can be done with class&nbsp;<code>icon-r</code>&nbsp;(to right) or
44
+ <code>icon-l</code> (to left)</p>
45
+ <p>CSS properties can be adjusted with <code>--ui-btn</code> prefix</p>
46
+ <p>You can change the button color with following tailwind classes - <code>accent-*</code>, <code>bg-*</code>, <code>text-*</code></p>
47
+ <p></p>
48
+ <h3>Attributes</h3>
49
+ <ul>
50
+ <li>data-size: <code>lg</code></li>
51
+ <li>data-type: <code>outline</code>, <code>square</code>, <code>m:square</code>, <code>circle</code>, <code>m:circle</code></li>
52
+ <li>data-state: <code>active</code>, <code>loading</code></li>
53
+ </ul>
54
+ </div>
55
+ {% code "html:mirror" %}
56
+ <button class="ui-btn">
57
+ Flat button
58
+ </button>
59
+ {% endcode %}
60
+ {% code "html:mirror" %}
61
+ <button class="ui-btn" data-type="outline">
62
+ Outline button
63
+ </button>
64
+ {% endcode %}
65
+ {% code "html:mirror" %}
66
+ <button class="ui-btn text-primary" data-type="outline" style="--ui-btn-outline-opacity: 0.3">
67
+ Outline button - primary color
68
+ </button>
69
+ {% endcode %}
70
+ {% code "html:mirror" %}
71
+ <button class="ui-btn" data-type="m:square">
72
+ <svg class="icon-l">
73
+ <use href="#icon-at-symbol"></use>
74
+ </svg>
75
+ <span class="m:hidden">Button with icon</span>
76
+ </button>
77
+ {% endcode %}
78
+ {% code "html:mirror" %}
79
+ <button class="ui-btn bg-default">
80
+ <svg class="icon-r">
81
+ <use href="#icon-chevron-right"></use>
82
+ </svg>
83
+ Next
84
+ </button>
85
+ {% endcode %}
86
+ {% code "html:mirror" %}
87
+ <button class="ui-btn bg-secondary">
88
+ <svg class="icon-l">
89
+ <use href="#icon-chevron-left"></use>
90
+ </svg>
91
+ Previous
92
+ </button>
93
+ {% endcode %}
94
+ {% code "html:mirror" %}
95
+ <button class="ui-btn">
96
+ <svg class="icon-r">
97
+ <use href="#icon-angle-down"></use>
98
+ </svg>
99
+ Continue
100
+ </button>
101
+ {% endcode %}
102
+ {% code "html:mirror" %}
103
+ <button class="ui-btn bg-secondary" data-type="square">
104
+ <svg class="icon">
105
+ <use href="#icon-at-symbol"></use>
106
+ </svg>
107
+ </button>
108
+ {% endcode %}
109
+ {% code "html:mirror" %}
110
+ <button class="ui-btn bg-secondary" data-type="circle">
111
+ <svg class="icon">
112
+ <use href="#icon-at-symbol"></use>
113
+ </svg>
114
+ </button>
115
+ {% endcode %}
116
+ {% code "html:mirror" %}
117
+ <button class="ui-btn bg-secondary" data-size="lg" data-type="circle" style="--ui-btn-height: 4rem">
118
+ <svg class="icon">
119
+ <use href="#icon-at-symbol"></use>
120
+ </svg>
121
+ </button>
122
+ {% endcode %}
123
+ {% code "html:mirror" %}
124
+ <button class="ui-btn" data-size="lg">
125
+ Large flat button
126
+ </button>
127
+ {% endcode %}
128
+ {% code "html:mirror" %}
129
+ <button class="ui-btn" data-size="lg" style="background-color: rgb(var(--color-facebook))">
130
+ <svg class="icon-l">
131
+ <use href="#icon-at-symbol"></use>
132
+ </svg>
133
+ Large flat button
134
+ </button>
135
+ {% endcode %}
136
+ {% code "html:mirror" %}
137
+ <button class="ui-btn" data-state="loading">
138
+ Loading state
139
+ </button>
140
+ {% endcode %}
141
+ {% code "html:mirror" %}
142
+ <div class="ui-btn-group">
143
+ <button class="ui-btn">
144
+ Flat button
145
+ </button>
146
+ <button class="ui-btn" data-state="active">
147
+ Flat button
148
+ </button>
149
+ <button class="ui-btn">
150
+ Flat button
151
+ </button>
152
+ <button class="ui-btn">
153
+ Flat button
154
+ </button>
155
+ </div>
156
+ {% endcode %}
157
+ {% code "html:mirror" %}
158
+ <div class="ui-btn-group">
159
+ <button class="ui-btn">
160
+ Flat button
161
+ </button>
162
+ <button class="ui-btn" data-type="square" style="--ui-btn-icon-size: 1.5rem">
163
+ <svg class="icon">
164
+ <use href="#icon-angle-down"></use>
165
+ </svg>
166
+ </button>
167
+ </div>
168
+ {% endcode %}
169
+ <hr/>
170
+ </div>
171
+ <div class="col-12 items-start" id="links">
172
+ <h1 class="ui-title uppercase text-primary mb-5">Links</h1>
173
+ <div class="ui-text mb-5">
174
+ <p>CSS properties can be adjusted with <code>--ui-link</code> prefix</p>
175
+ </div>
176
+ {% code "html:mirror" %}
177
+ <a href="#" class="ui-link accent-default" title="">
178
+ Show more
179
+ </a>
180
+ {% endcode %}
181
+ {% code "html:mirror" %}
182
+ <a href="#" class="ui-link text-primary" title="" data-type="underline">
183
+ With underline
184
+ </a>
185
+ {% endcode %}
186
+ <hr/>
187
+ </div>
188
+ <div class="col-12 items-start" id="icons">
189
+ <h1 class="ui-title uppercase text-primary mb-5">Icons</h1>
190
+ <div class="ui-text mb-5">
191
+ <p>Icons can be added to <code>src/icons.svg</code> as symbols. They are inlined into HTML and used as with <code>href</code> linking.</p>
192
+ <p>We use few icons from <a href="https://heroicons.com" target="_blank">heroicons.com</a></p>
193
+ </div>
194
+ {% code "html:mirror" %}
195
+ <button class="ui-icon lib-hint-top" aria-label="Show menu">
196
+ <svg>
197
+ <use href="#icon-menu"></use>
198
+ </svg>
199
+ </button>
200
+ {% endcode %}
201
+ {% code "html:mirror" %}
202
+ <svg class="ui-icon text-4xl" style="color: rgb(var(--color-twitter))">
203
+ <use href="#icon-sun"></use>
204
+ </svg>
205
+ {% endcode %}
206
+ {% code "html:mirror" %}
207
+ <a href="#" class="ui-icon text-4xl" style="color: rgb(var(--color-youtube))">
208
+ <svg>
209
+ <use href="#icon-moon"></use>
210
+ </svg>
211
+ </a>
212
+ {% endcode %}
213
+ {% code "html:mirror" %}
214
+ <button class="ui-icon-text space-x-2 text-primary">
215
+ <svg class="ui-icon">
216
+ <use href="#icon-menu"></use>
217
+ </svg>
218
+ <span class="ui-title font-medium">Show menu</span>
219
+ </button>
220
+ {% endcode %}
221
+ <hr/>
222
+ </div>
223
+ <div class="col-12" id="form">
224
+ <h1 class="ui-title uppercase text-primary mb-5">Forms</h1>
225
+ <div class="ui-text mb-5">
226
+ <p><code>label</code> is animated upon interaction, if you add it after select, input or textarea</p>
227
+ <p>You can also use variant without label with attribute <code>placeholder</code> and <code>data-placeholder</code> for select</p>
228
+ <p></p>
229
+ <p>Forms elements have visual validation for invalid items</p>
230
+ <p>This functionality can be turned off with attribute <code>data-novalidate</code> on element</p>
231
+ <p>CSS properties can be adjusted with <code>--ui-input</code> and <code>--ui-checkbox</code> prefix</p>
232
+ <p></p>
233
+ <h3>Attributes</h3>
234
+ <ul>
235
+ <li>data-state: <code>active</code> (element is not empty), <code>valid</code>, <code>invalid</code>, <code>placeholder</code> (label is always up)</li>
236
+ </ul>
237
+ </div>
238
+ {% code "html:mirror" %}
239
+ <div class="ui-select">
240
+ <select>
241
+ <option selected value="">- select option -</option>
242
+ <option value="1">Option 1</option>
243
+ <option value="2">Option 2</option>
244
+ <option value="3">Option 3</option>
245
+ </select>
246
+ <label>How are you?</label>
247
+ </div>
248
+ {% endcode %}
249
+ {% code "html:mirror" %}
250
+ <div class="ui-select" data-has="icon-l">
251
+ <select>
252
+ <option selected value="">- select option -</option>
253
+ <option value="1">Option 1</option>
254
+ <option value="2">Option 2</option>
255
+ <option value="3">Option 3</option>
256
+ </select>
257
+ <label>With icon</label>
258
+ <svg class="icon-l">
259
+ <use href="#icon-at-symbol"></use>
260
+ </svg>
261
+ </div>
262
+ {% endcode %}
263
+ {% code "html:mirror" %}
264
+ <div class="ui-select">
265
+ <select data-placeholder>
266
+ <option selected value="">- select option -</option>
267
+ <option value="1">Option 1</option>
268
+ <option value="2">Option 2</option>
269
+ <option value="3">Option 3</option>
270
+ </select>
271
+ </div>
272
+ {% endcode %}
273
+ {% code "html:mirror" %}
274
+ <div class="ui-select" tabindex="-1">
275
+ <select>
276
+ <option selected value="">- select option -</option>
277
+ <option value="1">Option 1</option>
278
+ <option value="2">Option 2</option>
279
+ <option value="3">Option 3</option>
280
+ </select>
281
+ <label>Javascript select</label>
282
+ <div aria-hidden="true">
283
+ <div data-option="">- select option -</div>
284
+ <div data-option="1">Option 1</div>
285
+ <div data-option="2">Option 2</div>
286
+ <div data-option="3">Option 3</div>
287
+ </div>
288
+ </div>
289
+ {% endcode %}
290
+ {% code "html:mirror" %}
291
+ <div class="ui-select">
292
+ <select data-placeholder disabled>
293
+ <option selected value="">Disabled state</option>
294
+ <option value="1">Option 1</option>
295
+ <option value="2">Option 2</option>
296
+ <option value="3">Option 3</option>
297
+ </select>
298
+ </div>
299
+ {% endcode %}
300
+ {% code "html:mirror" %}
301
+ <div class="ui-input">
302
+ <input type="email" required>
303
+ <label>E-mail</label>
304
+ </div>
305
+ {% endcode %}
306
+ {% code "html:mirror" %}
307
+ <div class="ui-input">
308
+ <input type="tel" placeholder="Tel" />
309
+ </div>
310
+ {% endcode %}
311
+ {% code "html:mirror" %}
312
+ <div class="ui-input" data-has="icon-r" data-state="placeholder">
313
+ <input type="text" required placeholder="Please fill">
314
+ <label>Amount</label>
315
+ <span class="icon-r" aria-label="Kč"></span>
316
+ </div>
317
+ {% endcode %}
318
+ {% code "html:mirror" %}
319
+ <div class="ui-input">
320
+ <input type="tel" disabled>
321
+ <label>Disabled state</label>
322
+ </div>
323
+ {% endcode %}
324
+ {% code "html:mirror" %}
325
+ <div class="ui-input">
326
+ <textarea></textarea>
327
+ <label>Message</label>
328
+ </div>
329
+ {% endcode %}
330
+ {% code "html:mirror" %}
331
+ <div class="ui-input">
332
+ <input type="color" placeholder="Select color">
333
+ </div>
334
+ {% endcode %}
335
+ {% code "html:mirror" %}
336
+ <div class="ui-input">
337
+ <input type="file" multiple="multiple" title="Upload files" placeholder="Select or drag file(s)">
338
+ </div>
339
+ {% endcode %}
340
+ {% code "html:mirror" %}
341
+ <div class="ui-input">
342
+ <input type="number" min="1" max="99" step="1">
343
+ <label>Select number</label>
344
+ </div>
345
+ {% endcode %}
346
+ {% code "html:mirror" %}
347
+ <div class="ui-input">
348
+ <input type="datetime-local">
349
+ <label>Select date and time</label>
350
+ </div>
351
+ {% endcode %}
352
+ {% code "html:mirror" %}
353
+ <div class="ui-input">
354
+ <input type="date">
355
+ <label>Select date</label>
356
+ </div>
357
+ {% endcode %}
358
+ {% code "html:mirror" %}
359
+ <div class="ui-input">
360
+ <input type="time" placeholder="Select time">
361
+ </div>
362
+ {% endcode %}
363
+ </div>
364
+ <div class="col-12 items-start">
365
+ {% code "html:mirror" %}
366
+ <div class="ui-input w-28" data-has="icon-r">
367
+ <input type="number" placeholder="" value="1" min="1" max="99" step="1">
368
+ <span class="icon-r" aria-label="ks"></span>
369
+ </div>
370
+ {% endcode %}
371
+ {% code "html:mirror" %}
372
+ <div class="p-5 bg-gray-200 dark:bg-dark rounded-lg">
373
+ <label class="ui-checkbox">
374
+ <input type="checkbox">
375
+ <span>I agree to the <a href="#">processing of personal data</a></span>
376
+ </label>
377
+ </div>
378
+ {% endcode %}
379
+ {% code "html:mirror" %}
380
+ <div class="p-5 text-light bg-dark rounded-lg">
381
+ <label class="ui-checkbox accent-light" data-theme="dark">
382
+ <input type="checkbox">
383
+ <span>I agree to the <a href="#">processing of personal data</a></span>
384
+ </label>
385
+ </div>
386
+ {% endcode %}
387
+ {% code "html:mirror" %}
388
+ <div class="p-5 text-light bg-dark rounded-lg">
389
+ <label class="ui-checkbox accent-info">
390
+ <input type="checkbox">
391
+ <span>I agree to the <a href="#">processing of personal data</a></span>
392
+ </label>
393
+ </div>
394
+ {% endcode %}
395
+ {% code "html:mirror" %}
396
+ <label class="ui-checkbox flex-row-reverse">
397
+ <input type="checkbox" class="checked:border-primary" style="--ui-checkbox-checked-bg: transparent; --ui-checkbox-checked-fg: var(--color-primary);" />
398
+ <span>I agree to the <a href="#">processing of personal data</a></span>
399
+ </label>
400
+ {% endcode %}
401
+ {% code "html:mirror" %}
402
+ <label class="ui-radio">
403
+ <input type="radio" name="radio">
404
+ <span>Click on this radio button</span>
405
+ </label>
406
+ {% endcode %}
407
+ {% code "html:mirror" %}
408
+ <label class="ui-checkbox">
409
+ <input type="checkbox" class="mr-3" />
410
+ Without inner span
411
+ </label>
412
+ {% endcode %}
413
+ {% code "html:mirror" %}
414
+ <label class="ui-checkbox">
415
+ <input type="checkbox">
416
+ </label>
417
+ {% endcode %}
418
+ {% code "html:mirror" %}
419
+ <label class="ui-radio">
420
+ <input type="radio" name="radio">
421
+ </label>
422
+ {% endcode %}
423
+ </div>
424
+ <div class="col-12">
425
+ <div class="ui-text mb-5">
426
+ <p>Example form, for javascript form validation upon send you can add attribute <code>data-controller="lib-form"</code></p>
427
+ </div>
428
+ {% code "html:mirror" %}
429
+ <form class="c-form" data-controller="lib-form">
430
+ <div class="wrp_form_body grid gap-3">
431
+ <div class="ui-select">
432
+ <select required>
433
+ <option selected disabled value="">- select option -</option>
434
+ <option>Czechia</option>
435
+ <option>Slovakia</option>
436
+ </select>
437
+ <label>Select country</label>
438
+ </div>
439
+ <div class="ui-input">
440
+ <textarea required></textarea>
441
+ <label>Message</label>
442
+ </div>
443
+ </div>
444
+ <div class="wrp_form_info grid gap-3 py-4">
445
+ <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>
446
+ <label class="ui-checkbox">
447
+ <input type="checkbox" required>
448
+ <span>I agree with <a href="#">terms of use</a> and <a href="#">privacy policy</a></span>
449
+ </label>
450
+ </div>
451
+ <div class="wrp_form_foot">
452
+ <button class="ui-btn" aria-label="Send">Send</button>
453
+ </div>
454
+ </form>
455
+ {% endcode %}
456
+ <hr/>
457
+ </div>
458
+ <div class="col col-12" id="notice">
459
+ <h1 class="ui-title uppercase text-primary mb-5">Notice</h1>
460
+ <div class="ui-text mb-5">
461
+ <p>Notice is an easy notice frame that you can combine with text or button and change the accent color as you need.</p>
462
+ </div>
463
+ {% code "html:mirror" %}
464
+ <div class="ui-notice accent-warning">
465
+ Warning notice
466
+ </div>
467
+ {% endcode %}
468
+ {% code "html:mirror" %}
469
+ <div class="ui-notice accent-success">
470
+ Success notice
471
+ </div>
472
+ {% endcode %}
473
+ {% code "html:mirror" %}
474
+ <div class="ui-notice accent-info">
475
+ Info notice
476
+ </div>
477
+ {% endcode %}
478
+ {% code "html:mirror" %}
479
+ <div class="ui-notice accent-error">
480
+ Error notice
481
+ </div>
482
+ {% endcode %}
483
+ {% code "html:mirror" %}
484
+ <div class="ui-notice accent-error">
485
+ Error notice
486
+ <hr/>
487
+ <button class="ui-btn">
488
+ <span>Button</span>
489
+ </button>
490
+ </div>
491
+ {% endcode %}
492
+ {% code "html:mirror" %}
493
+ <div class="ui-notice accent-success">
494
+ <div class="ui-text">
495
+ <h4>Nicely done!</h4>
496
+ <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>
497
+ </div>
498
+ <hr/>
499
+ <button class="ui-btn">
500
+ <span>Button</span>
501
+ </button>
502
+ </div>
503
+ {% endcode %}
504
+ {% code "html:mirror" %}
505
+ <div class="ui-notice accent-info">
506
+ Info notice
507
+ <hr/>
508
+ <button class="ui-btn">
509
+ <span>Button</span>
510
+ </button>
511
+ </div>
512
+ {% endcode %}
513
+ {% code "html:mirror" %}
514
+ <div class="ui-notice accent-warning">
515
+ Warning notice
516
+ <hr/>
517
+ <button class="ui-btn">
518
+ <span>Button</span>
519
+ </button>
520
+ </div>
521
+ {% endcode %}
522
+ {% code "html:mirror" %}
523
+ <div class="ui-notice bg-error text-light">
524
+ <div class="ui-text">
525
+ <h4>Badly done!</h4>
526
+ <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>
527
+ </div>
528
+ <hr/>
529
+ <button class="ui-btn bg-light bg-opacity-20">
530
+ <span>Button</span>
531
+ </button>
532
+ </div>
533
+ {% endcode %}
534
+ </div>
535
+ <div class="col-12" id="badge">
536
+ <h1 class="ui-title uppercase text-primary mb-5">Badge</h1>
537
+ <div class="ui-text mb-5">
538
+ <p>CSS properties can be adjusted with <code>--ui-badge</code> prefix</p>
539
+ <p></p>
540
+ <h3>Attributes</h3>
541
+ <ul>
542
+ <li>data-size: <code>sm</code>, <code>md</code>, <code>lg</code></li>
543
+ <li>data-type: <code>square</code>, <code>circle</code></li>
544
+ </ul>
545
+ </div>
546
+ {% code "html:mirror" %}
547
+ <div class="ui-badge" data-size="sm">
548
+ Default
549
+ </div>
550
+ {% endcode %}
551
+ {% code "html:mirror" %}
552
+ <div class="ui-badge bg-dark">
553
+ Dark
554
+ </div>
555
+ {% endcode %}
556
+ {% code "html:mirror" %}
557
+ <div class="ui-badge bg-light text-dark">
558
+ Light
559
+ </div>
560
+ {% endcode %}
561
+ {% code "html:mirror" %}
562
+ <div class="ui-badge bg-primary rounded-full">
563
+ <span>Primary</span>
564
+ </div>
565
+ {% endcode %}
566
+ {% code "html:mirror" %}
567
+ <a href="#" class="ui-badge bg-secondary">
568
+ Secondary
569
+ </a>
570
+ {% endcode %}
571
+ {% code "html:mirror" %}
572
+ <button class="ui-badge bg-secondary" data-type="circle">
573
+ 9
574
+ </button>
575
+ {% endcode %}
576
+ {% code "html:mirror" %}
577
+ <button class="ui-badge bg-secondary" data-type="square" data-size="md">
578
+ 99
579
+ </button>
580
+ {% endcode %}
581
+ {% code "html:mirror" %}
582
+ <button class="ui-badge bg-secondary" data-type="circle">
583
+ <svg class="icon">
584
+ <use href="#icon-x"></use>
585
+ </svg>
586
+ </button>
587
+ {% endcode %}
588
+ {% code "html:mirror" %}
589
+ <div class="ui-badge-group">
590
+ <div class="ui-badge bg-dark">
591
+ <span>npm</span>
592
+ </div>
593
+ <div class="ui-badge bg-info">
594
+ <span>7.1.2</span>
595
+ </div>
596
+ </div>
597
+ {% endcode %}
598
+ <hr/>
599
+ </div>
600
+ <div class="col-12" id="progress">
601
+ <h1 class="ui-title uppercase text-primary mb-5">Progress</h1>
602
+ <div class="ui-text mb-5">
603
+ <p>Progress bar is easy UI element, which uses native <code>&lt;progress&gt;</code> tag</p>
604
+ <p>If you skip <code>value</code> attribute, the bar is animated as intermediate</p>
605
+ <p>CSS properties can be adjusted with <code>--ui-progress</code></p>
606
+ <p></p>
607
+ <h3>Attributes</h3>
608
+ <ul>
609
+ <li>data-size: <code>sm</code>, <code>lg</code></li>
610
+ </ul>
611
+ </div>
612
+ <div>
613
+ {% code "html:mirror" %}
614
+ <progress class="ui-progress" value="15" max="100">15%</progress>
615
+ {% endcode %}
616
+ {% code "html:mirror" %}
617
+ <progress class="ui-progress text-primary" value="50" max="100">15%</progress>
618
+ {% endcode %}
619
+ {% code "html:mirror" %}
620
+ <progress class="ui-progress text-secondary" value="35" max="100" data-size="lg">15%</progress>
621
+ {% endcode %}
622
+ {% code "html:mirror" %}
623
+ <progress class="ui-progress text-error" value="75" max="100" data-size="sm">15%</progress>
624
+ {% endcode %}
625
+ {% code "html:mirror" %}
626
+ <progress class="ui-progress text-error" max="100">15%</progress>
627
+ {% endcode %}
628
+ </div>
629
+ <hr/>
630
+ </div>
631
+ <div class="col col-12" id="text">
632
+ <h1 class="ui-title uppercase text-primary mb-5">Texty</h1>
633
+ <div class="ui-text mb-5">
634
+ <p>Into text element you can add all elements as <code>h1-6</code>, <code>p</code>, <code>ul</code>, <code>ul</code>, <code>table</code> etc.</p>
635
+ </div>
636
+ {% code "html:mirror" %}
637
+ <div class="ui-text">
638
+ <h1>h1 heading</h1>
639
+ <h2>h2 heading</h2>
640
+ <h3>h3 heading</h3>
641
+ <h4>h4 heading</h4>
642
+ <h5>h5 heading</h5>
643
+ <h6>h6 heading</h6>
644
+ <p>Lorem ipsum dolor</p>
645
+ <hr>
646
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur
647
+ metus. In bibendum nisi et dui <a href="#">sagittis efficitur</a>. Proin porttitor diam at quam
648
+ finibus, quis porttitor turpis ullamcorper. Quisque iaculis imperdiet nunc in
649
+ hendrerit. Nulla facilisi. Sed at sodales ex. Vivamus ornare auctor ligula et
650
+ lobortis. Nunc metus augue, tristique vitae sagittis ac, interdum eu nisl.
651
+ Curabitur aliquet, lectus ut interdum commodo, ipsum elit gravida libero, in
652
+ laoreet lectus nisl a erat. Sed consequat justo pulvinar turpis pharetra mattis.
653
+ Phasellus non pretium libero.</p>
654
+ <p></p>
655
+ <ul style="max-width: 400px">
656
+ <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
657
+ bibendum nisi et dui
658
+ </li>
659
+ <li>Donec eget efficitur metus</li>
660
+ </ul>
661
+ <p></p>
662
+ <ul style="max-width: 400px; list-style: square">
663
+ <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
664
+ bibendum nisi et dui
665
+ </li>
666
+ <li>Donec eget efficitur metus</li>
667
+ </ul>
668
+ <p></p>
669
+ <ul style="max-width: 400px; list-style: circle">
670
+ <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
671
+ bibendum nisi et dui
672
+ </li>
673
+ <li>Donec eget efficitur metus</li>
674
+ </ul>
675
+ <p></p>
676
+ <ol style="max-width: 400px;">
677
+ <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
678
+ bibendum nisi et dui
679
+ </li>
680
+ <li>Donec eget efficitur metus</li>
681
+ </ol>
682
+ <ol type="1">
683
+ <li>Coffee</li>
684
+ <li>Tea</li>
685
+ <li>Milk</li>
686
+ </ol>
687
+ <ol type="A">
688
+ <li>Coffee</li>
689
+ <li>Tea</li>
690
+ <li>Milk</li>
691
+ </ol>
692
+ <ol type="a">
693
+ <li>Coffee</li>
694
+ <li>Tea</li>
695
+ <li>Milk</li>
696
+ </ol>
697
+ <ol type="I">
698
+ <li>Coffee</li>
699
+ <li>Tea</li>
700
+ <li>Milk</li>
701
+ </ol>
702
+ <ol type="i">
703
+ <li>Coffee</li>
704
+ <li>Tea</li>
705
+ <li>Milk</li>
706
+ </ol>
707
+ <p></p>
708
+ <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
709
+ <p></p>
710
+ <figure>
711
+ <img src="https://bulma.io/images/placeholders/256x256.png">
712
+ <figcaption>
713
+ Figure 1: Some beautiful placeholders
714
+ </figcaption>
715
+ </figure>
716
+ <h2>Heading</h2>
717
+ <table>
718
+ <thead>
719
+ <tr>
720
+ <th scope="col">#</th>
721
+ <th scope="col">First</th>
722
+ <th scope="col">Last</th>
723
+ <th scope="col">Handle</th>
724
+ </tr>
725
+ </thead>
726
+ <tbody>
727
+ <tr>
728
+ <th scope="row">1</th>
729
+ <td>Mark</td>
730
+ <td>Otto</td>
731
+ <td>@mdo</td>
732
+ </tr>
733
+ <tr>
734
+ <th scope="row">2</th>
735
+ <td>Jacob</td>
736
+ <td>Thornton</td>
737
+ <td>@fat</td>
738
+ </tr>
739
+ <tr>
740
+ <th scope="row">3</th>
741
+ <td>Larry</td>
742
+ <td>the Bird</td>
743
+ <td>@twitter</td>
744
+ </tr>
745
+ </tbody>
746
+ </table>
747
+ <p></p>
748
+ <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>
749
+ </div>
750
+ {% endcode %}
751
+ </div>
752
+ </div>
753
+ <div class="row g-8 flex-wrap" style="padding-top: 3rem;">
754
+ <div class="col-12" style="padding-top: 0">
755
+ <h1 class="ui-heading">Tailwind</h1>
756
+ </div>
757
+ <div class="ui-text">
758
+ <p>Newlogic UI uses <a href="https://tailwindcss.com/docs/" target="_blank">Tailwind CSS</a> for all utility classes. It is extednded by CSS properties, custom colors, flex grid and alternative responsive classes</p>
759
+ </div>
760
+ <div class="col-12 items-start" id="colors">
761
+ <h1 class="ui-title uppercase text-primary mb-5">Colors</h1>
762
+ <div class="ui-text">
763
+ <p>Colors are defined as CSS properties, so you can refer the colors in code as <code>var(--color-primary)</code> and you can use other colors from <a href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Tailwind</a></p>
764
+ <p></p>
765
+ <h3>Use for text</h3>
766
+ </div>
767
+ {% code "html:mirror" %}
768
+ <div class="current-primary">text-primary</div>
769
+ <div class="text-primary">text-primary</div>
770
+ <div class="text-secondary mb-2">text-secondary</div>
771
+ <div class="text-success mb-2">text-success</div>
772
+ <div class="text-error mb-2">text-error</div>
773
+ <div class="text-info mb-2">text-info</div>
774
+ <div class="text-warning mb-2">text-warning</div>
775
+ <div class="text-default mb-2">text-default</div>
776
+ <div class="text-invert bg-default py-1 px-2 mb-2 rounded-md inline-flex">text-invert</div><br>
777
+ <div class="text-light bg-dark py-1 px-2 mb-2 rounded-md inline-flex">text-light</div><br>
778
+ <div class="text-dark bg-light py-1 px-2 mb-2 rounded-md inline-flex">text-dark</div>
779
+ {% endcode %}
780
+ <div class="ui-text">
781
+ <h3>Use as background</h3>
782
+ </div>
783
+ {% code "html:mirror" %}
784
+ <div class="bg-primary p-4 mb-2 rounded-md">bg-primary</div>
785
+ <div class="bg-secondary p-4 mb-2 rounded-md">bg-secondary</div>
786
+ <div class="bg-success p-4 mb-2 rounded-md">bg-success</div>
787
+ <div class="bg-error p-4 mb-2 rounded-md">bg-error</div>
788
+ <div class="bg-info p-4 mb-2 rounded-md">bg-info</div>
789
+ <div class="bg-warning p-4 mb-2 rounded-md">bg-warning</div>
790
+ <div class="bg-default text-invert p-4 mb-2 rounded-md">bg-default</div>
791
+ <div class="bg-invert text-default p-4 mb-2 border border-dashed border-default rounded-md">bg-invert</div>
792
+ <div class="bg-light text-dark p-4 mb-2 border border-dashed border-dark rounded-md">bg-light</div>
793
+ <div class="bg-dark text-light p-4 rounded-md border border-dashed border-default">bg-dark</div>
794
+ {% endcode %}
795
+ <div class="ui-text">
796
+ <h3>Use as accent</h3>
797
+ <p>You can change accent of any element globally with <code>accent-</code> color</p>
798
+ <p></p>
799
+ </div>
800
+ {% code "html:mirror" %}
801
+ <div class="accent-error space-y-3">
802
+ <div class="ui-input">
803
+ <input type="text">
804
+ <label>Inherited accent input</label>
805
+ </div>
806
+ <div class="ui-notice">
807
+ Notice with inherited accent
808
+ </div>
809
+ <button class="ui-btn">Inherited accent button</button>
810
+ </div>
811
+ {% endcode %}
812
+ </div>
813
+ <div class="col-12 items-start" id="responsive">
814
+ <h1 class="ui-title uppercase text-primary mb-5">Responsive</h1>
815
+ <div class="ui-text">
816
+ <p>Newlogic UI is <b>mobile-first</b> and has 7 main breakpoints, these breakpoints are used instead of Tailwind syntax as <code>lg</code>, <code>sm</code> etc.</p>
817
+ <p></p>
818
+ <ul>
819
+ <li><code>m:</code> mobile <small>(&lt;768)</small></li>
820
+ <li><code>t:</code> tablet <small>(&gt;768)</small></li>
821
+ <li><code>d:</code> desktop <small>(&gt;960)</small></li>
822
+ <li><code>w:</code> widescreen <small>(&gt;1216)</small></li>
823
+ <li><code>hd:</code> hd <small>(&gt;1360)</small></li>
824
+ <li><code>mhd:</code> midhd <small>(&gt;1408)</small></li>
825
+ <li><code>fhd:</code> fullhd <small>(&gt;1600)</small></li>
826
+ <li><code>touch:</code> touch <small>(&lt;960)</small></li>
827
+ </ul>
828
+ <p></p>
829
+ <table class="w-full">
830
+ <thead>
831
+ <tr>
832
+ <th style="width: 20%;">
833
+ <code>&lt;768px</code>
834
+ </th>
835
+ <th style="width: 20%;">
836
+ <code>768-959px</code>
837
+ </th>
838
+ <th style="width: 20%;">
839
+ <code>960-1215px</code>
840
+ </th>
841
+ <th style="width: 20%;">
842
+ <code>1216-1360px</code>
843
+ </th>
844
+ <th style="width: 20%;">
845
+ <code>1360-1408px</code>
846
+ </th>
847
+ <th style="width: 20%;">
848
+ <code>1408-1600px</code>
849
+ </th>
850
+ <th style="width: 20%;">
851
+ <code>&gt;1600px</code>
852
+ </th>
853
+ </tr>
854
+ </thead>
855
+ <tbody>
856
+ <tr>
857
+ <td>
858
+ <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">m:</span>
859
+ </td>
860
+ <td colspan="6">
861
+ <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
862
+ </td>
863
+ </tr>
864
+ <tr>
865
+ <td>
866
+ <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
867
+ </td>
868
+ <td colspan="6">
869
+ <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">t:</span>
870
+ </td>
871
+ </tr>
872
+ <tr>
873
+ <td colspan="2">
874
+ <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
875
+ </td>
876
+ <td colspan="5">
877
+ <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">d:</span>
878
+ </td>
879
+ </tr>
880
+ <tr>
881
+ <td colspan="3">
882
+ <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
883
+ </td>
884
+ <td colspan="4">
885
+ <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">w:</span>
886
+ </td>
887
+ </tr>
888
+ <tr>
889
+ <td colspan="4">
890
+ <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
891
+ </td>
892
+ <td colspan="3">
893
+ <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">hd:</span>
894
+ </td>
895
+ </tr>
896
+ <tr>
897
+ <td colspan="5">
898
+ <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
899
+ </td>
900
+ <td colspan="2">
901
+ <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">shd:</span>
902
+ </td>
903
+ </tr>
904
+ <tr>
905
+ <td colspan="6">
906
+ <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
907
+ </td>
908
+ <td>
909
+ <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">fhd:</span>
910
+ </td>
911
+ </tr>
912
+ <tr>
913
+ <td colspan="2">
914
+ <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">touch:</span>
915
+ </td>
916
+ <td colspan="5">
917
+ <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
918
+ </td>
919
+ </tr>
920
+ </tbody>
921
+ </table>
922
+ </div>
923
+ <hr/>
924
+ </div>
925
+ <div class="col-12" id="container" data-offset="128">
926
+ <h1 class="ui-title uppercase text-primary mb-5">Container</h1>
927
+ <div class="ui-text mb-5">
928
+ <p>Container aligns content to center with maximum width of <code>1200px</code></p>
929
+ <p>You can adjust following CSS properties <code>--container-width</code> <code>--container-width-sm</code>, <code>--container-padding</code></p>
930
+ <p></p>
931
+ <h3>Attributes</h3>
932
+ <ul>
933
+ <li>data-size: <code>sm</code> <small>(=800px)</small></li>
934
+ </ul>
935
+ </div>
936
+ <div class="col-container">
937
+ {% code "html:mirror" %}
938
+ <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
939
+ <div class="container">
940
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">container</div>
941
+ </div>
942
+ {% endcode %}
943
+ </div>
944
+ <hr/>
945
+ </div>
946
+ <div class="col-12 col-grid" id="grid">
947
+ <h1 class="ui-title uppercase text-primary mb-5">Grid</h1>
948
+ <div class="ui-text">
949
+ <p>For grid system you can use native <a href="https://tailwindcss.com/docs/grid-column" target="_blank">Tailwind Grid</a>, but Newlogic UI has also its own flex grid system similiar to Boostrap grid</p>
950
+ <p></p>
951
+ <h3>Features</h3>
952
+ <ul>
953
+ <li>classes: <code>row</code>, <code>row-x</code>, <code>row-y</code></li>
954
+ <li>
955
+ spacing: <a href="https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale" target="_blank">https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale</a>
956
+ <ul>
957
+ <li>vertical & horizontal: <code>g-4</code></li>
958
+ <li>horizontal: <code>gx-6</code></li>
959
+ <li>vertical: <code>gy-6</code></li>
960
+ </ul>
961
+ </li>
962
+ <li>
963
+ column width <small>(0% - 100%)</small>: <code>col-1</code> - <code>col-12</code>
964
+ (same principle as Bootstrap - <a href="https://getbootstrap.com/docs/5.0/layout/grid/" target="_blank">https://getbootstrap.com/docs/5.0/layout/grid/</a>)
965
+ </li>
966
+ <li>column width can be defined also with Tailwind classes: <code>w-1/5</code>, <code>w-3/6</code> (<a href="https://tailwindcss.com/docs/width" target="_blank">https://tailwindcss.com/docs/width</a>)</li>
967
+ </ul>
968
+ <p></p>
969
+ <p>You can use following responsive prefixes for all classes: <code>m:</code> <small>(&lt;768)</small>, <code>t:</code> <small>(&gt;768)</small>, <code>d:</code> <small>(&gt;960)</small>, <code>w:</code> <small>(&gt;1216)</small>, <code>hd:</code> <small>(&gt;1408)</small></p>
970
+ <p>Rows are not wrapped by default, for wrapping you have to use <code>flex-wrap</code></p>
971
+ <p></p>
972
+ </div>
973
+ {% code "html:mirror" %}
974
+ <div class="row g-4">
975
+ <div class="col col-6">
976
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
977
+ </div>
978
+ <div class="col col-6">
979
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">2</div>
980
+ </div>
981
+ </div>
982
+ {% endcode %}
983
+ {% code "html:mirror" %}
984
+ <div class="row g-4 justify-between">
985
+ <div class="col col-4 items-end">
986
+ <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
987
+ <div class="h-16 w-20 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">1</div>
988
+ </div>
989
+ <div class="col col-4">
990
+ <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
991
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
992
+ </div>
993
+ </div>
994
+ {% endcode %}
995
+ {% code "html:mirror" %}
996
+ <div class="row g-4">
997
+ <div class="col col-12 t:col-auto flex-grow items-center">
998
+ <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
999
+ <div class="h-16 w-20 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">1</div>
1000
+ </div>
1001
+ <div class="col col-12 t:col-4 items-center justify-center">
1002
+ <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
1003
+ <div class="h-16 w-20 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">2</div>
1004
+ </div>
1005
+ </div>
1006
+ {% endcode %}
1007
+ {% code "html:mirror" %}
1008
+ <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1009
+ <div class="row t:gx-6">
1010
+ <div class="col col-12 t:col-6">
1011
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1012
+ </div>
1013
+ <div class="col col-12 t:col-6">
1014
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1015
+ </div>
1016
+ </div>
1017
+ <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1018
+ <div class="row t:g-6 flex-wrap">
1019
+ <div class="col col-12 t:col-6 flex-row space-x-6">
1020
+ <div class="col col-6 flex-row space-x-6">
1021
+ <div class="col col-6">
1022
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1023
+ </div>
1024
+ <div class="col col-6">
1025
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">2</div>
1026
+ </div>
1027
+ </div>
1028
+ <div class="col col-6">
1029
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1030
+ </div>
1031
+ </div>
1032
+ <div class="col col-12 t:col-6">
1033
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">2</div>
1034
+ </div>
1035
+ <div class="col col-12 t:col-6">
1036
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1037
+ </div>
1038
+ <div class="col col-12 t:col-6 flex-row space-x-6">
1039
+ <div class="col col-6 flex-row space-x-6">
1040
+ <div class="col col-6">
1041
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1042
+ </div>
1043
+ <div class="col col-6">
1044
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">2</div>
1045
+ </div>
1046
+ </div>
1047
+ <div class="col col-6">
1048
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+ <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1053
+ <div class="row t:g-6">
1054
+ <div class="col col-12 t:col-6 space-y-6">
1055
+ <div class="col col-12">
1056
+ <div class="row gx-6">
1057
+ <div class="col col-6">
1058
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500">1</div>
1059
+ </div>
1060
+ <div class="col col-6">
1061
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">2</div>
1062
+ </div>
1063
+ </div>
1064
+ </div>
1065
+ <div class="col col-12">
1066
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1067
+ </div>
1068
+ </div>
1069
+ <div class="col col-12 t:col-6 space-y-6">
1070
+ <div class="col col-12">
1071
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">1</div>
1072
+ </div>
1073
+ <div class="col col-12">
1074
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">2</div>
1075
+ </div>
1076
+ </div>
1077
+ </div>
1078
+ <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1079
+ <div class="row-y flex-col t:gy-6">
1080
+ <div class="row-x gx-6">
1081
+ <div class="col col-6">
1082
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1083
+ </div>
1084
+ <div class="col col-6">
1085
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500">2</div>
1086
+ </div>
1087
+ </div>
1088
+ <div class="row-x gx-6">
1089
+ <div class="col col-6">
1090
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">1</div>
1091
+ </div>
1092
+ <div class="col col-6">
1093
+ <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1094
+ </div>
1095
+ </div>
1096
+ </div>
1097
+ <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1098
+ {% endcode %}
1099
+ </div>
1100
+ </div>
1101
+ <div class="row g-8 flex-wrap" style="padding-top: 3rem;">
1102
+ <div class="col-12" style="padding-top: 0">
1103
+ <h1 class="ui-heading">Libraries</h1>
1104
+ </div>
1105
+ <div class="col-12" id="anchor">
1106
+ <h1 class="ui-title uppercase text-primary mb-5">Anchor</h1>
1107
+ <div class="ui-text">
1108
+ <p>Located in <code>src/scripts/Libraries/Anchor.js</code></p>
1109
+ <p>Anchors works native by default and are defined normally as always in the browser</p>
1110
+ <p></p>
1111
+ <p>For adding extra functionality you can add following attributes <code>data-action="click->lib#anchor"</code> and <code>data-lib-anchor="silent mobile"</code></p>
1112
+ <p></p>
1113
+ <p>Silent determines if we want to hide the hash and mobile if the anchor should only work on the phone. If we do not want either, we do not specify the attribute</p>
1114
+ <p></p>
1115
+ <p>Offset is calculated automatically with CSS property <code>--l-scroll-padding-top</code></p>
1116
+ <p></p>
1117
+ <p></p>
1118
+ <p><b>Examples:</b></p>
1119
+ </div>
1120
+ {% code "html:mirror" %}
1121
+ <a href="#section">Link to anchor</a>
1122
+ <div id="section"></div>
1123
+ {% endcode %}
1124
+ {% code "html:mirror" %}
1125
+ <button data-action="click->lib#anchor" data-action-href="#sekce" data-lib-anchor="mobile">Link to anchor</button>
1126
+ <div id="sekce"></div>
1127
+ {% endcode %}
1128
+ <hr/>
1129
+ </div>
1130
+ <div class="col-12" id="cookieconsent">
1131
+ <h1 class="ui-title uppercase text-primary mb-5">CookieConsent</h1>
1132
+ <div class="ui-text">
1133
+ <p>Located in <code>src/scripts/Libraries/CookieConsent.js</code>, <code>src/styles/Components/CookieConsent.css</code>, <code>src/styles/Components/Form/CookieConsent.css</code></p>
1134
+ <p></p>
1135
+ <p>The content is being prepared ...</p>
1136
+ </div>
1137
+ </div>
1138
+ <div class="col-12" id="datepicker">
1139
+ <h1 class="ui-title uppercase text-primary mb-5">Datepicker</h1>
1140
+ <div class="ui-text">
1141
+ <p>Mainlly used for <code>ui-input</code> for <code>type="date"</code> and <code>type="datetime-local"</code></p>
1142
+ <p>Located in <code>src/styles/Libraries/Datepicker.css</code> and <a href="https://github.com/mymth/vanillajs-datepicker" target="_blank">Vanilla JS Datepicker</a> is used as library</p>
1143
+ <p></p>
1144
+ <p>The content is being prepared ...</p>
1145
+ </div>
1146
+ </div>
1147
+ <div class="col col-12 items-start" id="dialog">
1148
+ <h1 class="ui-title uppercase text-primary mb-5">Dialog</h1>
1149
+ <div class="ui-text mb-5">
1150
+ <p>On any element you can add <code>data-action="click->lib-dialog#show"</code> 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#hide"</code> to any element</p>
1151
+ <p></p>
1152
+ <p>Adding <code>data-lib-dialog-open-option</code> attribute on <code>data-controller="lib-dialog"</code> (by default located on body), then the dialog gets open upon page load</p>
1153
+ <p>Url is passed the as <code>data-lib-dialog-url-option</code>, you can also add selector to <code>data-lib-dialog-open-option</code> and HTML content of that selector opens as a dialog.</p>
1154
+ <p></p>
1155
+ <p></p>
1156
+ <h3>Methods</h3>
1157
+ <p>See docs at <a href="https://legendary-muffin-ebbe68.netlify.app/docs/lib/dialog.html">Winduum</a></p>
1158
+ <p></p>
1159
+ <p></p>
1160
+ <h3>Attributes (c-dialog)</h3>
1161
+ <ul>
1162
+ <li><code>data-size</code> - <code>sm</code>, <code>lg</code></li>
1163
+ <li><code>data-type</code> - <code>scrollable</code> - scroll inside dialog</li>
1164
+ </ul>
1165
+ <h3>Attributes (click->lib-dialog#show)</h3>
1166
+ <ul>
1167
+ <li><code>data-lib-dialog-url-param</code> - url of <code>*.json</code> file</li>
1168
+ <li><code>data-lib-dialog-remove-param</code> - <code>true/false</code> whenever to remove dialog element from dom after closing</li>
1169
+ <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>
1170
+ </ul>
1171
+ </div>
1172
+ {% code "html:mirror" %}
1173
+ <button class="ui-btn" data-action="click->lib-dialog#show" data-lib-dialog-url-param="/dialog/basic.json">
1174
+ Open dialog window
1175
+ </button>
1176
+ {% endcode %}
1177
+ </div>
1178
+ <div class="col-12" id="drawer">
1179
+ <h1 class="ui-title uppercase text-primary mb-5">Drawer</h1>
1180
+ <div class="ui-text">
1181
+ <p>Located in <code>src/scripts/Libraries/Drawer.js</code>, <code>src/styles/Libraries/Drawer.css</code></p>
1182
+ <p></p>
1183
+ <p>The content is being prepared ...</p>
1184
+ </div>
1185
+ </div>
1186
+ <div class="col-12" id="hint">
1187
+ <h1 class="ui-title uppercase text-primary mb-5">Hint</h1>
1188
+ <div class="ui-text">
1189
+ <p>Located in <code>src/styles/Libraries/Hint.css</code></p>
1190
+ <p></p>
1191
+ <p>The content is being prepared ...</p>
1192
+ </div>
1193
+ </div>
1194
+ <div class="col-12 col-images" id="lazyload">
1195
+ <h1 class="ui-title uppercase text-primary mb-5">Lazyload</h1>
1196
+ <div class="ui-text mb-5">
1197
+ <p>Images should be wrapped insude <code>.ui-image</code> class and as <code>div</code> or <code>picture</code></p>
1198
+ <p>You can add lazyload for the images with <code>loading="lazy"</code> attribute.</p>
1199
+ <p>To maintain ratio of the images you have to add ratio class from Tailwind, for example <code>aspect-[4/3]</code></p>
1200
+ </div>
1201
+ <style>
1202
+ .col-images .ui-image {
1203
+ max-width: 10rem;
1204
+ }
1205
+ </style>
1206
+ <div>
1207
+ {% code "html:mirror" %}
1208
+ <div class="ui-image aspect-[3/2]">
1209
+ <img src="https://via.placeholder.com/300x200" alt="" loading="lazy" />
1210
+ </div>
1211
+ {% endcode %}
1212
+ </div>
1213
+ <div>
1214
+ {% code "html:mirror" %}
1215
+ <picture class="ui-image aspect-[3/2]">
1216
+ <source srcset="https://via.placeholder.com/300x200" />
1217
+ <img src="https://via.placeholder.com/300x200" alt="" loading="lazy" />
1218
+ </picture>
1219
+ {% endcode %}
1220
+ </div>
1221
+ <div class="ui-text mb-5">
1222
+ <p>Lazyload can be added also on <code>iframe</code></p>
1223
+ </div>
1224
+ <div>
1225
+ {% code "html:mirror" %}
1226
+ <div class="ui-image aspect-square">
1227
+ <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>
1228
+ </div>
1229
+ {% endcode %}
1230
+ </div>
1231
+ <hr/>
1232
+ </div>
1233
+ <div class="col-12" id="nativeslider">
1234
+ <h1 class="ui-title uppercase text-primary mb-5">NativeSlider</h1>
1235
+ <div class="ui-text mb-5">
1236
+ <p>Lightweight scroll based slider, which uses CSS <code>scroll-snap</code></p>
1237
+ <p>It is intended for a simple solution, for advanced sliders it is recommended to use sliders such as <a href="https://github.com/metafizzy/flickity" target="_blank">Flickity</a></p>
1238
+ <p></p>
1239
+ <p>Dot navigation can be generated with <code>data-lib-ns-nav</code> attribute or manually with each <code>data-lib-ns-nav-item</code> attribute</p>
1240
+ <p>Arrow control can be controlled with <code>data-lib-ns-prev</code> and <code>data-lib-ns-next</code> attributes</p>
1241
+ <p></p>
1242
+ <p>Slider area is defined with <code>data-lib-ns</code> attribute, you can set autoplay by entering a number in the attribute</p>
1243
+ <p>Other advanced params are <code>&lt;progress data-lib-ns-progress&gt;&lt;/progress&gt;</code>, <code>data-lib-ns-counter="min"</code> and <code>data-lib-ns-counter="max"</code></p>
1244
+ <p></p>
1245
+ <p>The sliders is initialized with <code>data-controller="lib-ns"</code> on parent element</p>
1246
+ </div>
1247
+ <div>
1248
+ {% code "html:mirror" %}
1249
+ <div data-controller="lib-ns">
1250
+ <div class="row gx-3" data-lib-ns>
1251
+ {% for i in 1..6 %}
1252
+ <div class="col col-4">
1253
+ <div class="ui-image rounded-md overflow-hidden aspect-[8/5]">
1254
+ <img src="{{ placeholder(1200, 750) }}" alt="" loading="lazy" />
1255
+ </div>
1256
+ </div>
1257
+ {% endfor %}
1258
+ </div>
1259
+ <div class="row-x justify-between items-center mt-4">
1260
+ <div class="col col-left">
1261
+ <button class="ui-btn" data-type="square" aria-label="Previous" data-lib-ns-prev>
1262
+ <svg class="icon">
1263
+ <use href="#icon-chevron-left"></use>
1264
+ </svg>
1265
+ </button>
1266
+ </div>
1267
+ <div class="col col-counter m:hidden">
1268
+ <div class="row py-3 gx-6 items-center justify-center">
1269
+ <div class="col">
1270
+ <div class="flex" data-lib-ns-nav></div>
1271
+ </div>
1272
+ <div class="col">
1273
+ <div><span data-lib-ns-counter="min">1</span>/<span data-lib-ns-counter="max"></span></div>
1274
+ </div>
1275
+ </div>
1276
+ <progress class="ui-progress" data-size="sm" value="50" max="100" data-lib-ns-progress></progress>
1277
+ </div>
1278
+ <div class="col col-right">
1279
+ <button class="ui-btn" data-type="square" aria-label="Next" data-lib-ns-next>
1280
+ <svg class="icon">
1281
+ <use href="#icon-chevron-right"></use>
1282
+ </svg>
1283
+ </button>
1284
+ </div>
1285
+ </div>
1286
+ </div>
1287
+ {% endcode %}
1288
+ </div>
1289
+ <hr/>
1290
+ </div>
1291
+ <div class="col-12" id="recaptcha">
1292
+ <h1 class="ui-title uppercase text-primary mb-5">ReCaptcha</h1>
1293
+ <div class="ui-text">
1294
+ <p>Located in <code>src/scripts/Libraries/ReCaptcha.js</code></p>
1295
+ <p></p>
1296
+ <p>Uses Google's <a href="https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages" target="_blank">recaptcha-enterprise</a></p>
1297
+ <p></p>
1298
+ <p>ReCaptcha can be added to various types of forms, which can be optionally distinguished with attribute <code>data-lib-recaptcha-action</code></p>
1299
+ <p>Api key has to be added with <code>data-lib-recaptcha-api</code> attribute</p>
1300
+ <p></p>
1301
+ <p>It can be evaluated upon submitting the form, with attribute <code>data-action="submit->lib-recaptcha#submit"</code></p>
1302
+ </div>
1303
+ <pre><code class="language-html">
1304
+ <form data-controller="lib-recaptcha" data-lib-recaptcha-api="RECAPTCHA_KEY" data-lib-recaptcha-action="contact" data-action="submit->lib-recaptcha#submit">
1305
+ <input name="gtoken" type="hidden">
1306
+ <button>Send</button>
1307
+ </form>
1308
+ </code></pre>
1309
+ </div>
1310
+ <div class="col-12 items-start" id="ripple">
1311
+ <h1 class="ui-title uppercase text-primary mb-5">Ripple</h1>
1312
+ <div class="ui-text">
1313
+ <p>The ripple effect is automatically applied to buttons and other components</p>
1314
+ <p>The effect is possible apply anywhere using the attribute <code>data-action="click->lib#ripple"</code></p>
1315
+ <p>Background color can be changed with CSS property <code>--lib-ripple-bg</code></p>
1316
+ <p></p>
1317
+ <h3>Methods</h3>
1318
+ <ul>
1319
+ <li>initialization to any selector: <code>LibRipple(element)</code></li>
1320
+ </ul>
1321
+ <p></p>
1322
+ </div>
1323
+ {% code "html:mirror" %}
1324
+ <div data-action="click->lib#ripple" class="cursor-pointer" style="--lib-ripple-bg: rgb(var(--color-primary))">Ripple me</div>
1325
+ {% endcode %}
1326
+ <hr/>
1327
+ </div>
1328
+ <div class="col-12" id="stimulus">
1329
+ <h1 class="ui-title uppercase text-primary mb-5">Stimulus</h1>
1330
+ <div class="ui-text">
1331
+ <p><a href="https://stimulusjs.org/" target="_blank" rel="noopener">Stimulus</a> is used for component definition, events and other JS interaction</p>
1332
+ <p>This library ensures the life of individual components and initializes them automatically when the content is redrawn</p>
1333
+ <p></p>
1334
+ <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> (ref element in DOM)</p>
1335
+ <p></p>
1336
+ <p>Example usage of all attributes </p>
1337
+ <p></p>
1338
+ </div>
1339
+ <pre><code class="language-html">
1340
+ <div data-controller="lib-example" data-lib-example-active-class="active" data-lib-example-text-value="0">
1341
+ <button data-action="click->lib-example#show" data-action-color="red"></button>
1342
+ <div data-lib-example-target="itemTarget"></div>
1343
+ </div>
1344
+ </code></pre>
1345
+ <pre><code class="language-js">
1346
+ import { LibStimulus, Controller, getController } from "../Libraries/Stimulus.js";
1347
+
1348
+ LibStimulus.register("lib-example", class extends Controller {
1349
+ // alternative target definitions (you can also use this.queryTarget or this.queryTargetAll instead)
1350
+ static targets = ['item']
1351
+ static classes = [ 'active' ]
1352
+ static values = {
1353
+ text: Number
1354
+ }
1355
+
1356
+ connect() {
1357
+ // starts when the controller is loaded into DOM
1358
+ }
1359
+
1360
+ disconnect() {
1361
+ // starts when the controller is deleted from DOM, use mainly if event listeners that are outside the controller are created in connect
1362
+ }
1363
+
1364
+ show(e) {
1365
+ // specific action to which the event can be applied
1366
+ let currentTarget = e.currentTarget;
1367
+
1368
+ // refer to a specific target element and add a class and color settings
1369
+ this.itemTarget.classList.add(this.activeClass);
1370
+ this.itemTarget.style.color = currentTarget.dataset.actionColor;
1371
+
1372
+ // extract custom text defined by the controller, this always refers to the controller
1373
+ if (!this.hasTextValue) {
1374
+ this.textValue = 1;
1375
+ }
1376
+
1377
+ this.itemTarget.textContent = this.textValue;
1378
+ this.textValue = 2;
1379
+
1380
+ // This method can be used to communicate with another controller
1381
+ getController(document.querySelector(".other_controller"), "other_controller").doSomething()
1382
+ }
1383
+ })
1384
+ </code></pre>
1385
+ <div class="ui-text">
1386
+ <p>To fully understand the functionality, we recommend studying <a href="https://stimulusjs.org/reference/controllers" target="_blank" rel="noopener">documentation</a></p>
1387
+ </div>
1388
+ <hr/>
1389
+ </div>
1390
+ <div class="col-12" id="swup">
1391
+ <h1 class="ui-title uppercase text-primary mb-5">Swup</h1>
1392
+ <div class="ui-text">
1393
+ <p>Full-page animations are used between pages using a library <a href="https://github.com/gmrchk/swup" target="_blank" rel="noopener">Swup</a>
1394
+ </p>
1395
+ <p>Everything is automatic and if the JS is correctly defined via Stimulus, all JS is automatically reinitialized after site navigation</p>
1396
+ <p></p>
1397
+ <p>If you do not want to use Swup on a specific link, you can use the attribute <code>data-no-swup</code></p>
1398
+ </div>
1399
+ <hr/>
1400
+ </div>
1401
+ <div class="col col-12 items-start" id="tabs">
1402
+ <h1 class="ui-title uppercase text-primary mb-5">Tabs</h1>
1403
+ <div class="ui-text mb-5">
1404
+ <p>Tabs are divided into navigation section <code>data-lib-tabs-nav</code> and content section <code>data-lib-tabs-area</code></p>
1405
+ <p></p>
1406
+ <p>In the navigation section, select the items that will be switched by the attribute <code>data-lib-tabs-item="nav"</code>, in the content section, we mark individual items with an attribute <code>data-lib-tabs-item="area"</code></p>
1407
+ <p></p>
1408
+ <p>In order to define that these are switch tabs, it is necessary to define the element by an attribute <code>data-controller="lib-tabs"</code> or you can self-initialize on any selector with method</p>
1409
+ <p></p>
1410
+ <h3>Methods</h3>
1411
+ <ul>
1412
+ <li>initialization: <code>LibTabs(element)</code></li>
1413
+ </ul>
1414
+ </div>
1415
+ {% code "html:mirror" %}
1416
+ <div data-controller="lib-tabs">
1417
+ <div class="row gx-4" data-lib-tabs-nav>
1418
+ <div class="col">
1419
+ <button class="ui-btn" data-lib-tabs-item="nav" data-state="active">
1420
+ <span>Tab 1</span>
1421
+ </button>
1422
+ </div>
1423
+ <div class="col">
1424
+ <button class="ui-btn" data-lib-tabs-item="nav">
1425
+ <span>Tab 2</span>
1426
+ </button>
1427
+ </div>
1428
+ <div class="col">
1429
+ <button class="ui-btn" data-lib-tabs-item="nav">
1430
+ <span>Tab 3</span>
1431
+ </button>
1432
+ </div>
1433
+ </div>
1434
+ <div class="mt-4" data-lib-tabs-area>
1435
+ <div data-lib-tabs-item="area" data-state="active">
1436
+ <div class="ui-text">
1437
+ <p>Lorem ipsum dolor sit amet, consectetur
1438
+ adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui
1439
+ sagittis efficitur. Proin porttitor diam at quam finibus, quis porttitor
1440
+ turpis ullamcorper. 1</p>
1441
+ </div>
1442
+ </div>
1443
+ <div data-lib-tabs-item="area">
1444
+ <div class="ui-text">
1445
+ <p>Lorem ipsum dolor sit amet, consectetur
1446
+ adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui
1447
+ sagittis efficitur. Proin porttitor diam at quam finibus, quis porttitor
1448
+ turpis ullamcorper. 2</p>
1449
+ </div>
1450
+ </div>
1451
+ <div data-lib-tabs-item="area">
1452
+ <div class="ui-text">
1453
+ <p>Lorem ipsum dolor sit amet, consectetur
1454
+ adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui
1455
+ sagittis efficitur. Proin porttitor diam at quam finibus, quis porttitor
1456
+ turpis ullamcorper. 3</p>
1457
+ </div>
1458
+ </div>
1459
+ </div>
1460
+ </div>
1461
+ {% endcode %}
1462
+ </div>
1463
+ <div class="col col-12 items-start" id="tippy">
1464
+ <h1 class="ui-title uppercase text-primary mb-5">Tippy</h1>
1465
+ <div class="ui-text mb-5">
1466
+ <p>For dropdowns and tooltips the <a href="https://atomiks.github.io/tippyjs/" target="_blank">Tippy.js</a> library is used</p>
1467
+ <p>Tippy properties can be freely modified using attributes <a href="https://atomiks.github.io/tippyjs/v6/customization/" target="_blank">data-tippy-*</a></p>
1468
+ <p>The basic properties are defined by <code>data-lib-tippy="type, template"</code></p>
1469
+ <ul>
1470
+ <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>
1471
+ <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>
1472
+ </ul>
1473
+ <p></p>
1474
+ <h3>Methods</h3>
1475
+ <ul>
1476
+ <li>initialization: <code>new LibTippy(element, attributes)</code></li>
1477
+ </ul>
1478
+ </div>
1479
+ <div class="ui-text mb-5">
1480
+ <p>Loading tippy template from external file</p>
1481
+ </div>
1482
+ {% code "html:mirror" %}
1483
+ <button class="ui-btn" type="button" data-type="square" data-controller="lib-tippy" data-lib-tippy="dropdown-full, /dropdown/tippy.json" data-lib-tippy-slot='{ "edit": "Upravit položku", "delete": "Smazat položku" }'>
1484
+ <svg class="icon"><use href="#icon-at-symbol"></use></svg>
1485
+ </button>
1486
+ {% endcode %}
1487
+ <div class="ui-text mb-5">
1488
+ <p>Loading a tippy template from an inline template</p>
1489
+ </div>
1490
+ {% code "html:mirror" %}
1491
+ <button class="ui-btn" 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" }'>
1492
+ Tooltip arrow
1493
+ </button>
1494
+ <template id="tippy-template">
1495
+ <div class="c-dropdown">
1496
+ <ul class="wrp_c_list flex-col row-y gy-4">
1497
+ <li class="col">
1498
+ <button class="ui-link">
1499
+ <span>{ edit }</span>
1500
+ </button>
1501
+ </li>
1502
+ <li class="col">
1503
+ <button class="ui-link">
1504
+ <span>{ delete }</span>
1505
+ </button>
1506
+ </li>
1507
+ </ul>
1508
+ </div>
1509
+ </template>
1510
+ {% endcode %}
1511
+ <div class="ui-text mb-5">
1512
+ <p>Classic tooltip</p>
1513
+ </div>
1514
+ {% code "html:mirror" %}
1515
+ <button class="ui-btn" type="button" data-controller="lib-tippy" aria-label="Hello world">
1516
+ Basic tooltip
1517
+ </button>
1518
+ {% endcode %}
1519
+ </div>
1520
+ </div>
1521
+ <div class="row g-8 flex-wrap" style="padding-top: 3rem;">
1522
+ <div class="col-12" style="padding-top: 0">
1523
+ <h1 class="ui-heading">Other</h1>
1524
+ </div>
1525
+ <div class="col-12" id="functions">
1526
+ <h1 class="ui-title uppercase text-primary mb-5">Functions</h1>
1527
+ <div class="ui-text mb-5">
1528
+ <p>Additional helper functions which you can use in JS </p>
1529
+ <p></p>
1530
+ <h3>checkValidity(element, options)</h3>
1531
+ <p>checks validity of ui-input, ui-select, ui-checkbox or ui-radio components</p>
1532
+ <p></p>
1533
+ <ul><li>options - <code>{ validate: true, message: false }</code></li></ul>
1534
+ <p></p>
1535
+ <h3>dataValue - working with data attributes</h3>
1536
+ <p><code>_addDataValue(key,value)</code> - adds value to data-key</p>
1537
+ <p><code>_removeDataValue(key,value)</code> - removes value from data-key</p>
1538
+ <p><code>_hasDataValue(key,value)</code> - if value exists in data-key, returns <code>true</code> or <code>false</code></p>
1539
+ <p></p>
1540
+ <h3>importScript</h3>
1541
+ <ul>
1542
+ <li>can be used to load scripts the old way into <code>window</code>with <code>importScript(url)</code> (returns promise)</li>
1543
+ </ul>
1544
+ <p></p>
1545
+ <h3>importStyle</h3>
1546
+ <ul>
1547
+ <li>can be used to load styles into <code>head</code>with <code>importStyle(url)</code> (returns promise)</li>
1548
+ </ul>
1549
+ <h3>inView - is the conent in viewport?</h3>
1550
+ <ul>
1551
+ <li>can be used to call code if the content is visible in the viewport <code>inView(selector, options)</code> (returns promise)</li>
1552
+ <li>options are optional and you can add same params asi in <code>IntersectionObserver</code></li>
1553
+ </ul>
1554
+ <p></p>
1555
+ <h3>loadStimulus - dynamic load of stimulus elements</h3>
1556
+ <ul>
1557
+ <li>reload elements within a particular selector : <code>loadStimulus(selector)</code></li>
1558
+ <li>the definition of which elements are dynamically loaded is in the array: <code>dynamicControllers</code> and <code>dynamicActions</code></li>
1559
+ </ul>
1560
+ <p></p>
1561
+ <h3>replaceTag(documentElement) - used mainly for swup</h3>
1562
+ <ul>
1563
+ <li>checks documentElement (eg. previous swup page) and replaces all <code>[data-lib-replace-tag]</code> in current DOM with the same name.</li>
1564
+ </ul>
1565
+ </div>
1566
+ <hr/>
1567
+ </div>
1568
+ <div class="col-12" id="build">
1569
+ <h1 class="ui-title uppercase text-primary mb-5">Build</h1>
1570
+ <div class="ui-text">
1571
+ <p>Newlogic UI can be used with other tools, without the need to use Vituum, Newlogic Core or in a completely different environment than NodeJS</p>
1572
+ <p></p>
1573
+ <p>Following PostCSS plugins are used:</p>
1574
+ <pre><code class="language-json">
1575
+ {
1576
+ "devDependencies": {
1577
+ "autoprefixer": "*",
1578
+ "tailwindcss": "*",
1579
+ "postcss-custom-media": "*",
1580
+ "postcss-custom-selectors": "*",
1581
+ "postcss-import": "*",
1582
+ "postcss-nesting": "*",
1583
+ }
1584
+ }
1585
+ </code></pre>
1586
+ <p></p>
1587
+ <p>Tailwind config is located at root in <code>tailwind.config.cjs</code></p>
1588
+ <p></p>
1589
+ <p>The CSS framework can be configured for use in modern build tools such as Vite or any other. </p>
1590
+ <p>Theoretically it is even possible to build outside the NodeJS environment in <a href="https://deno.land/manual/tools/bundler" target="_blank">Deno</a> with <a href="https://github.com/postcss/postcss-deno" target="_blank">PostCSS</a></p>
1591
+ <p></p>
1592
+ <p>Without use of Vituum and Newlogic Core you can't use compilation of twig/latte templates from <code>src/templates</code></p>
1593
+ </div>
1594
+ <hr/>
1595
+ </div>
1596
+ </div>
1597
+ </div>
1598
+ </div>
1599
+ </div>
1600
+ </section>