@newlogic-digital/ui 3.7.5 → 4.2.0

package/src/templates/Sections/Site.latte

@@ -1,213 +0,0 @@
-{import TEMPLATES_DIR . 'Ui/+.latte'}
-
-<div class="py-section" data-controller="lib-reveal">
-    <div class="py-12 grid-cols-container">
-        <div class="w-full flex-col gap-4">
-            <div class="c-popover focus w-max">
-                <div class="c-tooltip focus bottom" aria-label="I am tooltip">
-                    <div role="button" class="ui-btn" tabindex="0">Popover</div>
-                </div>
-                <div class="c-popover-content shadow mt-2.5 p-2 w-32 flex-col">
-                    <div class="c-tooltip right" aria-label="I am tooltip">
-                        <button class="ui-btn ghosted accent-main justify-start w-full">Item 1</button>
-                    </div>
-                    <div class="c-popover hover">
-                        <button class="ui-btn ghosted accent-main justify-start w-full">Item 2</button>
-                        <div class="c-popover-content right shadow ml-4 p-2 w-32 flex-col">
-                            <div class="c-tooltip right" aria-label="I am tooltip">
-                                <button class="ui-btn ghosted accent-main justify-start w-full">Item 1</button>
-                            </div>
-                            <button class="ui-btn ghosted accent-main justify-start">Item 2</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="c-tooltip focus bottom w-max" aria-label="I am tooltip">
-                <div role="button" class="ui-btn" tabindex="0">Popover</div>
-            </div>
-            <div class="c-popover mt-12" data-controller="c-popover">
-                <button
-                    class="ui-btn"
-                    role="button"
-                    data-c-popover-placement-param="bottom-end"
-                    popovertargetaction="toggle"
-                    popovertarget="popover"
-                >Popover</button>
-                <div class="c-popover-content shadow h-48" id="popover" popover="manual">
-                    <input type="text" autofocus>
-                    <button type="button" data-action="c-popover#hide">x</button>
-                </div>
-            </div>
-            <div
-                class="c-popover mt-12"
-                data-controller="c-popover"
-                data-c-popover-url-value="/popover/info.json"
-                data-c-popover-insert-to-value="body"
-                id="popoverAction"
-            >
-                <button
-                    class="ui-btn"
-                    role="button"
-                    popovertargetaction="toggle"
-                    popovertarget="popover2"
-                >Popover</button>
-            </div>
-        </div>
-    </div>
-    <div class="[--test:theme(spacing[1.5])]"></div>
-    <svg>
-        <use href="#icon-x-mark"></use>
-    </svg>
-    <svg>
-        <use href="#icon-angle-down-solid"></use>
-    </svg>
-    <form class="grid grid-cols-3 gap-2" data-controller="lib-naja" data-lib-recaptcha-api-value="6Ldvm2scAAAAAL3GHSR6zJb8ilfCdFfNe9dh8pn9" data-action="submit->lib-recaptcha#execute:prevent" data-naja action="/">
-        <div class="ui-control">
-            <input required name="given-name">
-        </div>
-        <div class="ui-control">
-            <input required name="surname">
-        </div>
-        <input type="hidden" name="gtoken" autocomplete="off">
-        <button class="ui-btn" type="button" data-action="utils#submit">
-            Odeslat
-        </button>
-    </form>
-    <form class="container flex flex-col gap-4" data-lib-reveal-target="item" data-controller-name-param="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="ms-auto">
-                        <div>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="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 versions are <b>Node.js 16+</b> and <b>NPM 9+</b></p>
-        </div>
-    </div>
-    <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>
-        <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="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://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 class="mt-6">
-    </div>
-</div>

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

@@ -1,134 +0,0 @@
-<div class="flex-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="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="flex-col">
-                    <a href="#core" class="ui-link underline decoration-transparent" 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="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="flex-col">
-                    <a href="#button" class="ui-link underline decoration-transparent" title="">
-                        <span>Button</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#link" class="ui-link underline decoration-transparent" title="">
-                        <span>Link</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#control" class="ui-link underline decoration-transparent" title="">
-                        <span>Control</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#check" class="ui-link underline decoration-transparent" title="">
-                        <span>Check</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#notice" class="ui-link underline decoration-transparent" title="">
-                        <span>Notice</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#badge" class="ui-link underline decoration-transparent" title="">
-                        <span>Badge</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#progress" class="ui-link underline decoration-transparent" title="">
-                        <span>Progress</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#text" class="ui-link underline decoration-transparent" title="">
-                        <span>Text</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#image" class="ui-link underline decoration-transparent" 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="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="flex-col">
-                    <a href="#dialog" class="ui-link underline decoration-transparent" title="">
-                        <span>Dialog</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#drawer" class="ui-link underline decoration-transparent" title="">
-                        <span>Drawer</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#ripple" class="ui-link underline decoration-transparent" title="">
-                        <span>Ripple</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#datepicker" class="ui-link underline decoration-transparent" title="">
-                        <span>Datepicker</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#swup" class="ui-link underline decoration-transparent" title="">
-                        <span>Swup</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#tippy" class="ui-link underline decoration-transparent" title="">
-                        <span>Tippy</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#cookieconsent" class="ui-link underline decoration-transparent" title="">
-                        <span>CookieConsent</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#recaptcha" class="ui-link underline decoration-transparent" title="">
-                        <span>ReCaptcha</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#stimulus" class="ui-link underline decoration-transparent" 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">