@newlogic-digital/ui 3.4.2 → 3.7.5

package/src/templates/Sections/Text.latte

@@ -0,0 +1,64 @@
+<div class="s-text py-12 grid-cols-container gap-8">
+    <h1 class="ui-heading">Zásady ochrany osobních údajů</h1>
+    <div class="ui-text">
+        <p><strong>Správce osobních údajů a subjekt údajů</strong></p>
+        <p>Správcem osobních údajů je společnost provozující tento web, rezervační službu.</p>
+        <p>Subjektem údajů je fyzická osoba, která správci poskytla svoje osobní údaje na základě nájemní smlouvy, kupní
+            smlouvy, servisní smlouvy či jiné smlouvy uzavřené se správcem nebo na základě souhlasu se zpracováním
+            osobních údajů v rámci přihlášení k&nbsp;odběru novinek (newsletterů) zasílaných správcem. Subjektem údajů
+            může být též fyzická osoba, jejíž osobní údaje správce získal z&nbsp;jiných zákonných zdrojů.</p>
+        <p>&nbsp;</p>
+        <p><strong>Rozsah zpracování osobních údajů</strong></p>
+        <p>Správce zpracovává osobní údaje v&nbsp;rozsahu, v&nbsp;jakém jsou mu poskytnuty subjekty údajů, nebo v&nbsp;jakém
+            rozsahu je správce získá z&nbsp;jiných zákonných zdrojů. Jedná se o: jméno, příjmení, datum narození,
+            bydliště, místo podnikání, identifikační číslo, číslo platební karty daňové identifikační číslo, e-mail,
+            telefon, podpis.</p>
+        <p>&nbsp;</p>
+        <p><strong>Účel zpracování osobních údajů, souhlas obecný</strong></p>
+        <p>Správce zpracovává osobní údaje subjektů údajů za účelem splnění smlouvy uzavřené mezi subjektem údajů a
+            správcem a to formou elektronických komunikačních prostředků na dálku, nebo písemnou formou, plnění právních
+            povinností a za účelem přímého marketingu (tj. nabízení produktů a služeb správce) včetně zasílání
+            obchodních sdělení ve smyslu zákona č. 480/2004 Sb., o některých službách informační společnosti. Obchodní
+            sdělení správce zasílá pouze v případě, že se subjekt údajů přihlásil k odběru novinek (newsletterů) a
+            vyslovil druhý souhlas se zpracováním osobních údjaů pro marketingové účely.</p>
+        <p>&nbsp;</p>
+        <p><strong>Účel zpracování osobních údajů, souhlas pro marketingové účely</strong></p>
+        <p>Správce zpracovává osobní údaje subjektů údajů za účelem splnění smlouvy uzavřené mezi subjektem údajů a
+            správcem a to formou elektronických komunikačních prostředků na dálku, nebo písemnou formou, plnění právních
+            povinností a za účelem přímého marketing, nabídek, informací o hotelu a jeho aktivitách. Sbjekt údajů má
+            možnost se jednoduchým způsobem a zdarma z odběru novinek (newsletterů) odhlásit.</p>
+        <p>&nbsp;</p>
+        <p><strong>Posouzení nezbytnosti zpracování</strong></p>
+        <p>Správce dbá na ochranu soukromí subjektů údajů, a proto zpracovává pouze osobní údaje, které jsou nezbytně
+            nutné pro stanovené účely zpracování.</p>
+        <p>&nbsp;</p>
+        <p><strong>Právní základ zpracování osobních údajů</strong></p>
+        <p>Právním základem zpracování prováděného za účelem přímého marketingu je souhlas subjektů údajů se zpracováním
+            osobních údajů (přihlášení k odběru newsletterů) nebo oprávněný zájem správce (získání elektronického
+            kontaktu v souvislosti s prodejem výrobku nebo služby správce dle zák. č. 480/2004 Sb.).</p>
+        <p>V ostatních případech je právním základem zpracování splnění smlouvy, ochrana oprávněných zájmů správce
+            (ochrana majetku, uplatnění práv ze smlouvy v soudním řízení apod.) a splnění právní povinnosti.</p>
+        <p>&nbsp;</p>
+        <p><strong>Doba zpracovávání osobních údajů</strong></p>
+        <p>V&nbsp;případě osobních údajů zpracovávaných za účelem splnění smlouvy správce zpracovává osobní údaje po
+            dobu trvání smluvního vztahu a následně po dobu dalších 10 let, a to s&nbsp;ohledem na délku promlčecí lhůty
+            u náhrady škody či újmy. V&nbsp;případě zpracování za účelem splnění právní povinnosti správce zpracovává
+            osobní údaje po dobu stanovenou právními předpisy. V&nbsp;případě osobních údajů zpracovávaných na základě
+            souhlasu subjektu údajů správce zpracovává osobní údaje po dobu 10 let, nebude-li souhlas se zpracováním
+            osobních údajů do té doby odvolán. Tím není dotčena povinnost správce zpracovávat osobní údaje po dobu
+            stanovenou příslušnými právními předpisy či v souladu s nimi.</p>
+        <p>&nbsp;</p>
+        <p><strong>Odvolání souhlasu se zpracováním osobních údajů</strong></p>
+        <p>Jestliže subjekt údajů udělil správci souhlas se zpracováním osobních údajů, může svůj dobrovolně udělený
+            souhlas se zpracováním osobních údajů kdykoli bezplatně odvolat. Odvoláním souhlasu není dotčena zákonnost
+            zpracování vycházejícího ze souhlasu, který byl dán před jeho odvoláním. Odvolání souhlasu též nemá vliv na
+            zpracování osobních údajů, které správce zpracovává na základě jiného právního základu, než je souhlas (tj.
+            zejména je-li zpracování nezbytné pro splnění smlouvy, právní povinnosti či z&nbsp;jiných důvodů uvedených v&nbsp;platných
+            právních předpisech).</p>
+        <p>&nbsp;</p>
+        <p><strong>Přístup k&nbsp;osobním údajům</strong></p>
+        <p>K osobním údajům subjektů údajů má přístup správce a případně též třetí osoby - příjemci, kteří poskytují
+            vhodné záruky a jejichž zpracování splňuje požadavky dle platných právních předpisů a které zajišťuje
+            náležitou ochranu práv subjektů údajů</p>
+    </div>
+</div>

package/src/templates/Sections/Ui/Docs/@intro.html

@@ -1,12 +1,12 @@
-<div class="row g-8 flex-wrap">
-    <div class="col-12" style="padding-top: 0">
-        <h1 class="ui-heading">Get started</h1>
+<div class="flex-col gap-8 flex-wrap">
+    <div class="w-full" style="padding-top: 0">
+        <h1 class="ui-heading lg mb-4">Get started</h1>
         <div class="ui-text">
-            <p>Minimal version <b>Node.js 14+</b> and <b>NPM 7+</b></p>
+            <p>Minimal versions are <b>Node.js 16+</b> and <b>NPM 9+</b></p>
         </div>
     </div>
-    <div class="col-12" id="installation">
-        <h1 class="ui-title uppercase text-primary mb-5">Instalation</h1>
+    <div class="w-full" id="installation">
+        <h1 class="ui-heading mb-4">Installation</h1>
         <div class="ui-text">
             <p>In existing project (with <b>Vituum and Newlogic Core</b>)</p>
         </div>
@@ -26,72 +26,23 @@
         <pre><code class="language-bash">
             $ npm i @newlogic-digital/ui
         </code></pre>
-        <pre><code class="language-bash">
+        <pre><code class="language-css">
             /* main.css or separate modules */
-            @import "node_modules/@newlogic-digital/ui/src/styles/main.css"
+            @import "@newlogic-digital/ui/src/styles/main.css"
         </code></pre>
-        <pre><code class="language-bash">
+        <pre><code class="language-js">
             /* main.js or separate modules */
-            import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
+            import "@newlogic-digital/ui/src/scripts/main.js"
         </code></pre>
+        <hr>
     </div>
-    <div class="col-12" id="core">
-        <h1 class="ui-title uppercase text-primary mb-5">Core</h1>
+    <div class="w-full" id="core">
+        <h1 class="ui-heading mb-4">Core</h1>
         <div class="ui-text">
             <p><b>Vituum and Newlogic Core</b> is used as the main toolset, the complete documentation is at <a href="https://vituum.dev" target="_blank">vituum.dev</a>.</p>
-            <p>Newlogic Core is predefined config with plugins, filters etc. - <a href="https://vituum.dev" target="_blank">https://github.com/newlogic-digital/core</a></p>
-            <p>Framework can also be used with other tools, more information is in the section <a href="#build" title="">Build</a></p>
-        </div>
-    </div>
-    <div class="col-12" id="theme">
-        <h1 class="ui-title uppercase text-primary mb-5">Theme</h1>
-        <div class="ui-text">
-            <p>Main CSS variables can be configured in <code>styles/Utils/theme/main.css</code> a <code>styles/Utils/vars.css</code>,
-                you can also create any number of color variations.
-            </p>
-            <p></p>
-            <p>Keyframes can be added in <code>styles/Utils/keyframes.css</code>, print styles in <code>styles/Utils/print.css</code>,
-                import of external css in <code>styles/Utils/vendor.css</code> and tailwind styles can be extended
-                in<code>styles/Utils/tailwind</code>
-            </p>
+            <p>Newlogic Core is predefined config with plugins, filters etc. - <a href="https://core.newlogic.cz" target="_blank">core.newlogic.cz</a></p>
+            <p>Winduum is used as a main CSS component framework, learn more about it at <a href="https://winduum.dev" title="">winduum.dev</a></p>
         </div>
-    </div>
-    <div class="col-12" id="layout">
-        <h1 class="ui-title uppercase text-primary mb-5">Layout</h1>
-        <div class="ui-text">
-            <p>Global styles are located at <code>styles/Layout/Main.css</code>, others layout styles are for eg. <code>Header.css</code>,
-                <code>Footer.css</code> and naming should be done in following format <code>#l-header</code>, <code>#l-footer</code>
-            </p>
-            <p></p>
-            <p>Global scripts are located at <code>scripts/Layout/Main.js</code></p>
-            <p></p>
-            <p>Example of basic layout in HTML:</p>
-        </div>
-        <pre><code class="language-html">
-            <html class="no-js no-sw" lang="cs">
-                <head>
-                    <title></title>
-                    <link rel="stylesheet" href="/src/styles/main.css">
-                    <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"
-                            async></script>
-
-                    <script>'dark' !== localStorage.theme && ('theme' in localStorage || !window.matchMedia('(prefers-color-scheme: dark)').matches) || document.documentElement.classList.add('dark'), document.documentElement.className = document.documentElement.className.replace('no-js', 'js'), matchMedia('(hover: hover) and (pointer: fine)').matches && document.documentElement.classList.add('no-touch'), /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) && document.documentElement.classList.add('mobile'), document.documentElement.classList.add(navigator.platform.toLowerCase().replace(/ .*/, '')), function (e) {
-                        var t
-                        e.match(/(msie|trident)/i) ? document.documentElement.classList.add('ie') : e.match(/edge/) ? document.documentElement.classList.add('edge') : (t = e.match(/(chrome|safari|firefox)/i)) && document.documentElement.classList.add(t[0])
-                    }(navigator.userAgent.toLowerCase())</script>
-
-                    <script src="/src/scripts/main.js" type="module"></script>
-                </head>
-                <body data-controller="lib lib-dialog lib-drawer">
-                    <div class="l-default">
-                        <header id="l-header" data-controller="l-header"></header>
-                        <main id="l-main" class="transition-fade">
-                            <!--PAGE CONTENT-->
-                        </main>
-                        <footer id="l-footer"></footer>
-                    </div>
-                </body>
-            </html>
-        </code></pre>
+        <hr class="mt-6">
     </div>
 </div>

package/src/templates/Sections/Ui/Docs/@nav.html

@@ -1,192 +1,131 @@
-<div class="col col-left touch:hidden">
+<div class="flex-col col-left max-md:hidden">
     <div class="sticky">
-        <div class="mb-5">
+        <div class="mb-6">
             <h2 class="ui-title uppercase text-primary mb-3">Get started</h2>
-            <ul class="row flex-col g-2">
-                <li class="col col-12">
-                    <a href="#installation" class="ui-link" title="">
+            <ul class="flex-col gap-3">
+                <li class="flex-col">
+                    <a href="#installation" class="ui-link underline decoration-transparent" title="">
                         <span>Installation</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#core" class="ui-link" title="">
+                <li class="flex-col">
+                    <a href="#core" class="ui-link underline decoration-transparent" title="">
                         <span>Core</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#theme"
-                       class="ui-link" title="">
-                        <span>Theme</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#layout" class="ui-link" title="">
-                        <span>Layout</span>
-                    </a>
-                </li>
             </ul>
         </div>
-        <div class="mb-5">
+        <div class="mb-6">
             <h2 class="ui-title uppercase text-primary mb-3">Components</h2>
-            <ul class="row flex-col g-2">
-                <li class="col col-12">
-                    <a href="#headings" class="ui-link" title="">
-                        <span>Headings</span>
+            <ul class="flex-col gap-3">
+                <li class="flex-col">
+                    <a href="#heading" class="ui-link underline decoration-transparent" title="">
+                        <span>Heading</span>
+                    </a>
+                </li>
+                <li class="flex-col">
+                    <a href="#title" class="ui-link underline decoration-transparent" title="">
+                        <span>Title</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#buttons" class="ui-link" title="">
-                        <span>Buttons</span>
+                <li class="flex-col">
+                    <a href="#button" class="ui-link underline decoration-transparent" title="">
+                        <span>Button</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#links" class="ui-link" title="">
-                        <span>Links</span>
+                <li class="flex-col">
+                    <a href="#link" class="ui-link underline decoration-transparent" title="">
+                        <span>Link</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#icons" class="ui-link" title="">
-                        <span>Icons</span>
+                <li class="flex-col">
+                    <a href="#control" class="ui-link underline decoration-transparent" title="">
+                        <span>Control</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#form" class="ui-link" title="">
-                        <span>Forms</span>
+                <li class="flex-col">
+                    <a href="#check" class="ui-link underline decoration-transparent" title="">
+                        <span>Check</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#notice" class="ui-link" title="">
+                <li class="flex-col">
+                    <a href="#notice" class="ui-link underline decoration-transparent" title="">
                         <span>Notice</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#badge" class="ui-link" title="">
+                <li class="flex-col">
+                    <a href="#badge" class="ui-link underline decoration-transparent" title="">
                         <span>Badge</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#progress" class="ui-link" title="">
+                <li class="flex-col">
+                    <a href="#progress" class="ui-link underline decoration-transparent" title="">
                         <span>Progress</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#text" class="ui-link" title="">
+                <li class="flex-col">
+                    <a href="#text" class="ui-link underline decoration-transparent" title="">
                         <span>Text</span>
                     </a>
                 </li>
-            </ul>
-        </div>
-        <div class="mb-5">
-            <h2 class="ui-title uppercase text-primary mb-3">Tailwind</h2>
-            <ul class="row flex-col g-2">
-                <li class="col col-12">
-                    <a href="#colors" class="ui-link" title="">
-                        <span>Colors</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#responsive" class="ui-link" title="">
-                        <span>Responsive</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#container" class="ui-link" title="">
-                        <span>Container</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#grid" class="ui-link" title="">
-                        <span>Grid</span>
+                <li class="flex-col">
+                    <a href="#image" class="ui-link underline decoration-transparent" title="">
+                        <span>Image</span>
                     </a>
                 </li>
             </ul>
         </div>
-        <div class="mb-5">
+        <div class="mb-6">
             <h2 class="ui-title uppercase text-primary mb-3">Libraries</h2>
-            <ul class="row flex-col g-2">
-                <li class="col col-12">
-                    <a href="#anchor" class="ui-link" title="">
-                        <span>Anchor</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#cookieconsent" class="ui-link" title="">
-                        <span>CookieConsent</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#datepicker" class="ui-link" title="">
-                        <span>Datepicker</span>
+            <ul class="flex-col gap-3">
+                <li class="flex-col">
+                    <a href="#form" class="ui-link underline decoration-transparent" title="">
+                        <span>Form</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#dialog" class="ui-link" title="">
+                <li class="flex-col">
+                    <a href="#dialog" class="ui-link underline decoration-transparent" title="">
                         <span>Dialog</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#drawer" class="ui-link" title="">
+                <li class="flex-col">
+                    <a href="#drawer" class="ui-link underline decoration-transparent" title="">
                         <span>Drawer</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#hint" class="ui-link" title="">
-                        <span>Hint</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#lazyload" class="ui-link" title="">
-                        <span>Lazyload</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#nativeslider" class="ui-link" title="">
-                        <span>NativeSlider</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#recaptcha" class="ui-link" title="">
-                        <span>ReCaptcha</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#ripple" class="ui-link" title="">
+                <li class="flex-col">
+                    <a href="#ripple" class="ui-link underline decoration-transparent" title="">
                         <span>Ripple</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#stimulus" class="ui-link" title="">
-                        <span>Stimulus</span>
+                <li class="flex-col">
+                    <a href="#datepicker" class="ui-link underline decoration-transparent" title="">
+                        <span>Datepicker</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#swup" class="ui-link" title="">
+                <li class="flex-col">
+                    <a href="#swup" class="ui-link underline decoration-transparent" title="">
                         <span>Swup</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#tabs" class="ui-link" title="">
-                        <span>Tabs</span>
+                <li class="flex-col">
+                    <a href="#tippy" class="ui-link underline decoration-transparent" title="">
+                        <span>Tippy</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#tippy" class="ui-link" title="">
-                        <span>Tippy</span>
+                <li class="flex-col">
+                    <a href="#cookieconsent" class="ui-link underline decoration-transparent" title="">
+                        <span>CookieConsent</span>
                     </a>
                 </li>
-            </ul>
-        </div>
-        <div class="mb-5">
-            <h2 class="ui-title uppercase text-primary mb-3">Other</h2>
-            <ul class="row flex-col g-2">
-                <li class="col col-12">
-                    <a href="#functions" class="ui-link" title="">
-                        <span>Functions</span>
+                <li class="flex-col">
+                    <a href="#recaptcha" class="ui-link underline decoration-transparent" title="">
+                        <span>ReCaptcha</span>
                     </a>
                 </li>
-                <li class="col col-12">
-                    <a href="#build" class="ui-link" title="">
-                        <span>Build</span>
+                <li class="flex-col">
+                    <a href="#stimulus" class="ui-link underline decoration-transparent" title="">
+                        <span>Stimulus</span>
                     </a>
                 </li>
             </ul>

package/src/templates/Sections/Ui/Docs/@styles.html

@@ -3,14 +3,14 @@
     margin: 1rem 0 2rem !important;
     padding: 1.25rem 1.5rem !important;
     border-radius: 0.5rem !important;
-    background: #282c34 none repeat scroll 0 0 !important;
+    background: var(--color-main) none repeat scroll 0 0 !important;
     max-width: 100%;
     font-size: 14px !important;
     overflow: auto;
   }
 
   .dark pre {
-    background: rgb(var(--color-background-100)) none repeat scroll 0% 0% !important;
+    background: var(--color-body-secondary) none repeat scroll 0% 0% !important;
   }
 
   @media all and (min-width: 48rem) {
@@ -25,10 +25,6 @@
     }
   }
 
-  .ui-heading + .ui-text {
-    margin-top: 1rem;
-  }
-
   code {
     margin-left: 0;
   }
@@ -97,4 +93,4 @@
     }
   }
 </style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/themes/prism-tomorrow.min.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/themes/prism-tomorrow.min.css">