@newlogic-digital/ui 3.1.0 → 3.3.0

package/src/templates/Utils/sections.twig

@@ -1,3 +1,3 @@
 {% for section in sections %}
-    {% include '../' ~ section.src ~ '.twig' %}
-{% endfor %}
+    {% include '../' ~ section.src %}
+{% endfor %}

package/src/views/dialog/basic.json.twig

@@ -0,0 +1,3 @@
+{% json 'dialog' %}
+    {% include '@templates/Components/Dialogs/Basic.twig' %}
+{% endjson %}

package/src/{templates/json-tippy.twig → views/dropdown/tippy.json.twig}

@@ -1,6 +1,6 @@
 {% json 'content' %}
-    <div class="ui-dropdown">
-        <ul class="wrp_ui_list flex-col row-y gy-4">
+    <div class="c-dropdown">
+        <ul class="wrp_c_list flex-col row-y gy-4">
             <li class="col">
                 <button class="ui-link">
                     <span>{edit}</span>
@@ -13,4 +13,4 @@
             </li>
         </ul>
     </div>
-{% endjson %}
+{% endjson %}

package/src/views/gdpr.json

@@ -0,0 +1,12 @@
+{
+  "headerNormal": true,
+  "page": {
+    "title": "Newlogic UI",
+    "body": [
+      {
+        "src": "Sections/Gdpr.twig",
+        "intro": true
+      }
+    ]
+  }
+}

package/src/{templates → views}/index.json

@@ -4,9 +4,9 @@
     "title": "Newlogic UI",
     "body": [
       {
-        "src": "Sections/Ui",
+        "src": "Sections/Ui.twig",
         "intro": true
       }
     ]
   }
-}
+}

package/src/{templates/ui.json → views/ui-icons.json}

@@ -4,8 +4,9 @@
     "title": "Newlogic UI",
     "body": [
       {
-        "src": "Sections/Ui"
+        "src": "Sections/Ui.twig",
+        "icons": true
       }
     ]
   }
-}
+}

package/src/{templates/gdpr.json → views/ui.json}

@@ -4,7 +4,7 @@
     "title": "Newlogic UI",
     "body": [
       {
-        "src": "Sections/Gdpr"
+        "src": "Sections/Ui.twig"
       }
     ]
   }

package/tailwind.config.cjs

@@ -0,0 +1,69 @@
+const { tailwindColors, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations, tailwindRadius } = require('@vituum/tailwind/helpers.cjs')
+const plugin = require('tailwindcss/plugin')
+
+const colors = [
+  'background', 'default', 'invert', 'light', 'dark', 'primary', 'secondary',
+  'warning', 'error', 'info', 'success', 'accent'
+]
+
+const radius = ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full']
+
+const animations = [
+  'fade-in', 'fade-out'
+]
+
+module.exports = {
+  darkMode: 'class',
+  content: [
+    './src/**/*.{js,html,twig}'
+  ],
+  corePlugins: {
+    preflight: false,
+    container: false,
+    ringWidth: false,
+    ringColor: false,
+    ringOpacity: false,
+    ringOffsetWidth: false,
+    ringOffsetColor: false,
+    gradientColorStops: false,
+    backgroundImage: false,
+    accentColor: false,
+    borderRadius: false
+  },
+  theme: {
+    extend: {
+      colors: tailwindColors(colors),
+      fontFamily: tailwindVariables('font', ['primary', 'secondary']),
+      fontWeight: tailwindVariables('font', ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold']),
+      zIndex: tailwindVariables('z', [10, 20, 30, 40, 50, 60], {
+        0: 0,
+        auto: 'auto'
+      }),
+      spacing: tailwindVariables('spacing', ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section']),
+      screens: {
+        m: { max: '47.9375em' },
+        t: '48em',
+        d: '60em',
+        w: '76em',
+        hd: '85em',
+        mhd: '88em',
+        fhd: '100em',
+        touch: { max: '59.9375em' }
+      }
+    },
+  },
+  plugins: [
+    plugin(({ addUtilities }) => {
+      addUtilities(tailwindColorsAccent(colors))
+    }),
+    plugin(({ addUtilities }) => {
+      addUtilities(tailwindColorsCurrent(colors))
+    }),
+    plugin(({ addUtilities }) => {
+      addUtilities(tailwindAnimations(animations))
+    }),
+    plugin(({ addUtilities }) => {
+      addUtilities(tailwindRadius(radius))
+    })
+  ],
+}

package/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vituum'
+import core from '@newlogic-digital/core'
+import postcssHasPseudo from 'css-has-pseudo'
+
+export default defineConfig({
+    integrations: [core()],
+    postcss: {
+        plugins: [postcssHasPseudo()]
+    }
+})

package/gulpfile.js

@@ -1,41 +0,0 @@
-import { defineConfig } from '@newlogic-digital/core'
-import cms from "./src/module.cms.js"
-
-export default defineConfig({
-    config: true,
-    modules: {cms},
-    serve: {
-        https: true
-    },
-    scripts: {
-        importResolution: {
-            directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Utils/Functions', 'Ui']
-        },
-        importMap: {
-            build: false,
-            trailingSlashes: /(vanillajs-datepicker)/
-        }
-    },
-    styles: {
-        purge: {
-            enabled: true,
-            content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'www/templates/**/*.tpl', 'temp/cdn/*.js', 'admin_ex/js/templates/*.html', 'index.html'],
-            options: {
-                safelist: {
-                    standard: [/(class|is-|to-|grecaptcha)/],
-                    deep: [/(ui-text|wsw|datepicker)/]
-                }
-            }
-        },
-        vendor: {
-            path: 'Utils/vendor.css'
-        },
-        importResolution: {
-            directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Ui']
-        },
-        themePath: 'Utils/theme/{THEME}.{FORMAT}',
-        postcss: {
-            extend: []
-        }
-    }
-})

package/src/emails/email.twig

@@ -1,60 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <title>Email Template</title>
-        <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style type="text/css" n:syntax="off">
-            {{ fetch ('/temp/emails/email.css') }}
-        </style>
-    </head>
-    <body>
-        <table class="elm_container_wrapper">
-            <tr>
-                <td>
-                    <table class="elm_container">
-                        <tr class="elm_header">
-                            <td>
-                                <table class="elm_inner_container">
-                                    <tr>
-                                        <td>
-                                            <br />
-                                            <a href="#"><img src="https://via.placeholder.com/160x60" width="160" alt="" style="width: 160px" /></a>
-                                            <br />
-                                            <br />
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                        </tr>
-                        <tr class="nlm_content">
-                            <td>
-                                <table class="elm_inner_container">
-                                    <tr>
-                                        <td>
-                                            <br />
-                                            <div class="elm_content_heading">Děkujeme za Váš zájem</div>
-                                            <br />
-                                            Jsme opravdu rádi že jste se nám ozvali! Toto jsou Vaše údaje z formuláře:
-                                            <br />
-                                            <br />
-                                            <p><strong>Jméno</strong>: Pavel Novák</p>
-                                            <p><strong>Email</strong>: jmeno.prijmeni@email.cz</p>
-                                            <p><strong>Telefon</strong>: +420111222333</p>
-                                            <br/>
-                                            <p><strong>Zpráva</strong>:</p>
-                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae est dui. Vestibulum vehicula in mi in interdum. Aliquam quis tempor nibh. Duis tincidunt vel purus tincidunt iaculis. In bibendum leo justo, et elementum justo dapibus et. Aliquam eu elementum magna. Fusce egestas urna ac venenatis auctor. Phasellus felis leo, suscipit non est sit amet, lobortis pellentesque urna. Ut enim leo, posuere eget mauris vel, egestas pellentesque metus. Curabitur ut est ut orci blandit suscipit. Morbi lacinia sapien luctus lectus maximus, vitae gravida lectus aliquet. Vestibulum ut placerat diam. Fusce dapibus tincidunt justo, sed venenatis nisl porttitor vitae.</p>
-                                            <br />
-                                            <div class="elm_content_info"><a href="https://www.nazevwebu.cz"><span>www.nazevwebu.cz</span></a></div>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                        </tr>
-                    </table>
-                </td>
-            </tr>
-        </table>
-    </body>
-</html>

package/src/scripts/Components/Form.js

@@ -1,33 +0,0 @@
-import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
-
-LibStimulus.register('c-form', class extends Controller {
-    validate(element, e) {
-        if (element.reportValidity() === false) {
-            e.preventDefault()
-            e.stopPropagation()
-        }
-
-        element.querySelectorAll('.ui-input').forEach(element => {
-            getController(element, 'ui-input').validate(element, true)
-        })
-
-        element.querySelectorAll('.ui-select:not([data-state*="active"]) select[required]').forEach(select => {
-            getController(select.parentNode, 'ui-select').validate(select.parentNode, select)
-        })
-
-        element.querySelectorAll('[data-controller="ui-checkbox"] input:not([type="hidden"])').forEach(input => {
-            input.parentNode._removeDataValue('state', 'valid invalid')
-
-            if (input.checkValidity()) {
-                input.parentNode._addDataValue('state', 'valid')
-            } else {
-                input.parentNode._addDataValue('state', 'invalid')
-            }
-        })
-    }
-
-    connect() {
-        this.element.setAttribute('novalidate', '')
-        this.element.addEventListener('submit', e => this.validate(this.element, e))
-    }
-})

package/src/scripts/Ui/Radio.js

@@ -1,23 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-
-LibStimulus.register('ui-radio', class extends Controller {
-    validate(element) {
-        element.parentNode._removeDataValue('state', 'valid invalid')
-
-        if (element.checkValidity()) {
-            element.parentNode._addDataValue('state', 'valid')
-
-            document.querySelectorAll(`input[name="${element.name}"]`).forEach(element => {
-                element.parentNode._addDataValue('state', 'valid')
-            })
-        } else {
-            element.parentNode._addDataValue('state', 'invalid')
-        }
-    }
-
-    connect() {
-        const input = this.element.querySelector('input:not([type="hidden"])')
-
-        input.addEventListener('change', () => this.validate(input))
-    }
-})

package/src/styles/Components/Item/+.css

@@ -1 +0,0 @@
-/* empty */

package/src/styles/Libraries/Lazysizes.css

@@ -1,9 +0,0 @@
-.lazyload,
-.lazyloading {
-  opacity: 0;
-}
-
-.lazyloaded {
-  opacity: 1;
-  transition: var(--transition-opacity);
-}

package/src/styles/tailwind.css

@@ -1,2 +0,0 @@
-@import "Utils/tailwind/base.css";
-@import "Utils/tailwind/gutters.css";

package/src/templates/dialog-basic.twig

@@ -1,3 +0,0 @@
-{% json 'dialog' %}
-    {% include 'Components/Dialogs/Basic.twig' %}
-{% endjson %}