@newlogic-digital/ui 3.2.0 → 3.4.2

package/src/templates/Components/Dialogs/Basic.twig

@@ -1,24 +1,22 @@
-<div class="c-dialog c-dialog-basic" data-size="sm" data-type="scrollable">
-    <form class="wrp_dialog">
-        <button class="elm_dialog_close ui-icon" type="button" data-action="click->lib-dialog#hide">
+<form class="c-dialog c-dialog-basic" data-size="sm" data-type="scrollable">
+    <div class="wrp_dialog_head flex justify-between">
+        <h2 class="ui-heading">Info</h2>
+        <button class="ui-icon" type="button" data-action="click->lib-dialog#hide">
             <svg>
                 <use href="#icon-x"></use>
             </svg>
         </button>
-        <div class="wrp_dialog_head">
-            <h2 class="ui-heading">Info</h2>
-        </div>
-        <div class="wrp_dialog_body py-4">
-            <div class="ui-text">
-                {% for i in 1..44 %}
+    </div>
+    <div class="wrp_dialog_body py-4">
+        <div class="ui-text">
+            {% for i in 1..44 %}
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui sagittis efficitur.</p>
-                {% endfor %}
-            </div>
+            {% endfor %}
         </div>
-        <div class="wrp_dialog_foot">
-            <div class="col m:col-12">
-                <button class="ui-btn" type="button" data-action="click->lib-dialog#hide">Continue</button>
-            </div>
+    </div>
+    <div class="wrp_dialog_foot">
+        <div class="col m:col-12">
+            <button class="ui-btn" type="button" data-action="click->lib-dialog#hide">Continue</button>
         </div>
-    </form>
-</div>
+    </div>
+</form>

package/src/templates/Layout/Main.twig

@@ -23,12 +23,6 @@
             <link rel="stylesheet" href="{{ url|asset }}">
         {% endfor %}
 
-        {% if config.serve.mode == 'dev' %}
-            <link rel="stylesheet" href="{{ attribute(assets.css, 'tailwind.src') }}">
-        {% endif %}
-
-        <script src="{{ assets.js.lazysizes }}" async></script>
-
         <script>
             (localStorage.theme === 'dark' || (!('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');(p => document.documentElement.classList.add(p.includes('macintel') && navigator.maxTouchPoints > 2 ? 'ipad' : p))(navigator.platform.toLowerCase().replace(/ .*/, ''));(u => document.documentElement.classList.add(u && u[0]))(navigator.userAgent.toLowerCase().match(/chrome|safari|firefox/i))

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

@@ -0,0 +1,97 @@
+<div class="row g-8 flex-wrap">
+    <div class="col-12" style="padding-top: 0">
+        <h1 class="ui-heading">Get started</h1>
+        <div class="ui-text">
+            <p>Minimal version <b>Node.js 14+</b> and <b>NPM 7+</b></p>
+        </div>
+    </div>
+    <div class="col-12" id="installation">
+        <h1 class="ui-title uppercase text-primary mb-5">Instalation</h1>
+        <div class="ui-text">
+            <p>In existing project (with <b>Vituum and Newlogic Core</b>)</p>
+        </div>
+        <pre><code class="language-bash">
+            npm i
+        </code></pre>
+        <div class="ui-text">
+            <p>Creating a new project (with <b>Vituum and Newlogic Core</b>)</p>
+        </div>
+        <pre><code class="language-bash">
+            $ git clone --depth 1 https://github.com/newlogic-digital/ui.git . && rm -r .git
+            $ npm i
+        </code></pre>
+        <div class="ui-text">
+            <p>Use with in any other environment</p>
+        </div>
+        <pre><code class="language-bash">
+            $ npm i @newlogic-digital/ui
+        </code></pre>
+        <pre><code class="language-bash">
+            /* main.css or separate modules */
+            @import "node_modules/@newlogic-digital/ui/src/styles/main.css"
+        </code></pre>
+        <pre><code class="language-bash">
+            /* main.js or separate modules */
+            import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
+        </code></pre>
+    </div>
+    <div class="col-12" id="core">
+        <h1 class="ui-title uppercase text-primary mb-5">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>
+        </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>
+    </div>
+</div>

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

@@ -0,0 +1,195 @@
+<div class="col col-left touch:hidden">
+    <div class="sticky">
+        <div class="mb-5">
+            <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="">
+                        <span>Installation</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#core" class="ui-link" 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">
+            <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>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#buttons" class="ui-link" title="">
+                        <span>Buttons</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#links" class="ui-link" title="">
+                        <span>Links</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#icons" class="ui-link" title="">
+                        <span>Icons</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#form" class="ui-link" title="">
+                        <span>Forms</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#notice" class="ui-link" title="">
+                        <span>Notice</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#badge" class="ui-link" title="">
+                        <span>Badge</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#progress" class="ui-link" title="">
+                        <span>Progress</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#text" class="ui-link" 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>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="mb-5">
+            <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>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#dialog" class="ui-link" title="">
+                        <span>Dialog</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#drawer" class="ui-link" 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="">
+                        <span>Ripple</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#stimulus" class="ui-link" title="">
+                        <span>Stimulus</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#swup" class="ui-link" title="">
+                        <span>Swup</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#tabs" class="ui-link" title="">
+                        <span>Tabs</span>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#tippy" class="ui-link" title="">
+                        <span>Tippy</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>
+                    </a>
+                </li>
+                <li class="col col-12">
+                    <a href="#build" class="ui-link" title="">
+                        <span>Build</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,100 @@
+<style>
+  pre {
+    margin: 1rem 0 2rem !important;
+    padding: 1.25rem 1.5rem !important;
+    border-radius: 0.5rem !important;
+    background: #282c34 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;
+  }
+
+  @media all and (min-width: 48rem) {
+    pre {
+      max-width: 63vw;
+    }
+  }
+
+  @media all and (min-width: 60rem) {
+    pre {
+      max-width: 90vw;
+    }
+  }
+
+  .ui-heading + .ui-text {
+    margin-top: 1rem;
+  }
+
+  code {
+    margin-left: 0;
+  }
+
+  .col-12 > hr {
+    margin: 2rem 0 1rem;
+  }
+
+  @media all and (min-width: 60rem) {
+    .ui-text code {
+      white-space: nowrap;
+    }
+  }
+
+  @media all and (max-width: 767px) {
+    .wrp_s_body > .t\:col-9 {
+      padding-left: 0 !important;
+      border-left: 0 !important;
+    }
+  }
+
+  .s-ui .wrp_s_body > .col-left {
+    width: 15rem;
+  }
+
+  .s-ui .wrp_s_body > .col-left .col {
+    padding-bottom: 0.375rem;
+  }
+
+  .s-ui .wrp_s_body > .col-left > .sticky {
+    height: calc(100vh - 4rem);
+    overflow-y: hidden;
+    overflow-x: hidden;
+    top: 4rem;
+    padding: 2rem;
+  }
+
+  .s-ui .wrp_s_body > .col-left > .sticky:hover {
+    overflow-y: auto;
+  }
+
+  .s-ui .wrp_s_body > .col-right {
+    padding-top: 1.625rem;
+    border-left: 1px solid #ddd;
+    overflow: hidden;
+  }
+
+  .dark .s-ui .wrp_s_body > .col-right {
+    border-left: 1px solid rgb(var(--color-light) / 0.1);
+  }
+
+  @media all and (min-width: 60rem) {
+    .s-ui .wrp_s_body > .col-right {
+      padding-left: 4rem;
+      padding-top: 4rem;
+    }
+  }
+
+  @media all and (max-width: 59.9375rem) {
+    .s-ui .wrp_s_body > .col-right {
+      display: block;
+    }
+    .s-ui .wrp_s_body > .col-right > .container {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+  }
+</style>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/themes/prism-tomorrow.min.css"/>