@newlogic-digital/ui 3.5.0 → 4.0.0

package/src/templates/Sections/Site.latte

@@ -1,141 +0,0 @@
-{import TEMPLATES_DIR . 'Ui/+.latte'}
-
-<div class="py-section">
-    <form class="container flex flex-col gap-4" data-controller="lib-form">
-        <div class="grid grid-cols-3 gap-md">
-            <div class="c-field">
-                {embed UiControl}
-                    <label n:block=label>Jméno</label>
-                    <input n:block=body placeholder="Vyplňte pole">
-                {/embed}
-            </div>
-            <div class="c-field">
-                {embed UiControl}
-                    <input n:block=body required>
-                    <label n:block=label>Příjmení</label>
-                {/embed}
-            </div>
-            <div class="c-field">
-                {embed UiControl}
-                    <input n:block=body type="email" required>
-                    <label n:block=label>Email</label>
-                {/embed}
-            </div>
-            <div class="c-field">
-                {embed UiControlSelect}
-                    <label n:block=label>Select</label>
-                    <select n:block=body required data-placeholder>
-                        <option selected="" value="">- select an option -</option>
-                        <option value="1">Option 1</option>
-                        <option value="2" disabled>Option 2</option>
-                        <option value="3">Option 3</option>
-                    </select>
-                {/embed}
-            </div>
-            <div class="c-field">
-                {embed UiControlSelect}
-                    <select required n:block=body>
-                        <option selected="" value="">- select an option -</option>
-                        <option value="1">Option 1</option>
-                        <option value="2" disabled>Option 2</option>
-                        <option value="3">Option 3</option>
-                    </select>
-                    <label n:block=label>Select</label>
-                {/embed}
-            </div>
-            <div class="c-field">
-                {embed UiControl}
-                    <input n:block=body type="number" min="0" step="1" max="99" required>
-                    <div n:block=iconr class="icon-r">
-                        <div aria-label="Kč"></div>
-                    </div>
-                {/embed}
-            </div>
-            <div class="c-field">
-                {embed UiControl}
-                    <input n:block=body type="file" required>
-                {/embed}
-            </div>
-            <div class="c-field">
-                {var $disabledDays = '["2023-07-13"]'}
-                {embed UiControlDate, attributes: 'data-ui-control-date-disabled-value="' . ($disabledDays|escapeHtml) . '"'}
-                    <input n:block=body type="date" placeholder="dd.mm.rrrr" min="2023-07-12" required>
-                {/embed}
-            </div>
-            <div class="c-field">
-                {embed UiControlDate}
-                    <input n:block=body type="datetime-local" placeholder="dd.mm.rrrr" min="2023-07-12T10:00" step="12000" required>
-                {/embed}
-            </div>
-            <div class="c-field">
-                {embed UiControlDate}
-                    <input n:block=body type="datetime-local" required>
-                    <label n:block=label>Date</label>
-                {/embed}
-            </div>
-            <div class="c-field">
-                {embed UiControlTime}
-                    <input n:block=body type="time" required>
-                {/embed}
-            </div>
-            <div class="c-field">
-                <div class="ui-control" tabindex="-1" data-controller="ui-control-select">
-                    <select required>
-                        <option selected="" value="">- select an option -</option>
-                        <option value="1">Option 1</option>
-                        <option value="2" disabled>Option 2</option>
-                        <option value="3">Option 3</option>
-                    </select>
-                    <label>Floating</label>
-                    <div aria-hidden="true">
-                        <div data-option="" tabindex="0">- select option -</div>
-                        <div data-option="1" tabindex="0">Option 1</div>
-                        <div data-option="2" data-disabled>Option 2</div>
-                        <div data-option="3" tabindex="0">Option 3</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="c-field">
-            {embed UiCheck}
-                <input n:block=body type="checkbox" required>
-                <label n:block=label>Souhlasím s odesláním osobních údajů na super místa</label>
-            {/embed}
-        </div>
-        <div class="c-field">
-            <div class="ui-switch">
-                <input type="checkbox" id="switch" required>
-                <label for="switch">Text</label>
-            </div>
-        </div>
-        <button class="ui-btn">Odeslat</button>
-    </form>
-    <div class="container my-8" data-controller="lib-slider">
-        <div class="slider gap-4" data-lib-slider-target="slider">
-            <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
-                <img src="{placeholder(1200, 750)}" alt="" loading="lazy" />
-            </div>
-            <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
-                <img src="{placeholder(1200, 750)}" alt="" loading="lazy" />
-            </div>
-            <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
-                <img src="{placeholder(1200, 750)}" alt="" loading="lazy" />
-            </div>
-            <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
-                <img src="{placeholder(1200, 750)}" alt="" loading="lazy" />
-            </div>
-        </div>
-        <div class="dots flex gap-1.5 h-4 py-4" data-lib-slider-target="dots"></div>
-        <progress class="ui-progress sm" value="50" max="100" data-lib-slider-target="progress"></progress>
-        <div class="flex">
-            <div data-lib-slider-target="counterMin"></div>/
-            <div data-lib-slider-target="counterMax"></div>
-        </div>
-        <button class="ui-btn square" data-action="click->lib-slider#prev">Prev</button>
-        <button class="ui-btn square" data-action="click->lib-slider#next">Next</button>
-    </div>
-
-    <div class="container">
-        <div class="w-full h-32 skeleton rounded my-4"></div>
-    </div>
-</div>

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

@@ -1,48 +0,0 @@
-<div class="row gap-8 flex-wrap">
-    <div class="col-12" style="padding-top: 0">
-        <h1 class="ui-heading lg mb-4">Get started</h1>
-        <div class="ui-text">
-            <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-heading mb-4">Installation</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-css">
-            /* main.css or separate modules */
-            @import "@newlogic-digital/ui/src/styles/main.css"
-        </code></pre>
-        <pre><code class="language-js">
-            /* main.js or separate modules */
-            import "@newlogic-digital/ui/src/scripts/main.js"
-        </code></pre>
-        <hr>
-    </div>
-    <div class="col-12" 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://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>
-        <hr>
-    </div>
-</div>

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

@@ -1,144 +0,0 @@
-<div class="col col-left max-md:hidden">
-    <div class="sticky">
-        <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="">
-                        <span>Installation</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#core" class="ui-link" title="">
-                        <span>Core</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <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="#heading" class="ui-link" title="">
-                        <span>Heading</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#title" class="ui-link" title="">
-                        <span>Title</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#button" class="ui-link" title="">
-                        <span>Button</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#link" class="ui-link" title="">
-                        <span>Link</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#control" class="ui-link" title="">
-                        <span>Control</span>
-                    </a>
-                </li>
-                <li class="col col-12">
-                    <a href="#check" class="ui-link" title="">
-                        <span>Check</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>
-                <li class="col col-12">
-                    <a href="#image" class="ui-link" title="">
-                        <span>Image</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <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="#form" class="ui-link" title="">
-                        <span>Form</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="#ripple" class="ui-link" title="">
-                        <span>Ripple</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="#slider" class="ui-link" title="">
-                        <span>Slider</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="#tippy" class="ui-link" title="">
-                        <span>Tippy</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="#cookieconsent" class="ui-link" title="">
-                        <span>CookieConsent</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="#stimulus" class="ui-link" title="">
-                        <span>Stimulus</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-</div>

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

@@ -1,96 +0,0 @@
-<style>
-  pre {
-    margin: 1rem 0 2rem !important;
-    padding: 1.25rem 1.5rem !important;
-    border-radius: 0.5rem !important;
-    background: var(--color-main) none repeat scroll 0 0 !important;
-    max-width: 100%;
-    font-size: 14px !important;
-    overflow: auto;
-  }
-
-  .dark pre {
-    background: var(--color-body-secondary) 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;
-    }
-  }
-
-  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"/>