@newlogic-digital/ui 3.3.0 → 3.4.2

package/src/templates/Sections/Ui/Docs/Default.twig

@@ -1147,32 +1147,32 @@
                     <div class="col col-12 items-start" id="dialog">
                         <h1 class="ui-title uppercase text-primary mb-5">Dialog</h1>
                         <div class="ui-text mb-5">
-                            <p>On any element you can add <code>data-action="click->lib-dialog#show"</code> with attribute <code>data-action-url</code> which is url to <code>*.json</code> file or url request which contains html. For closing the dialog window, you can add <code>data-action="click->lib-dialog#hide"</code> to any element</p>
+                            <p>On any element you can add <code>data-action="click->lib-dialog#show"</code> with attribute <code>data-lib-dialog-url-param</code> which is url to <code>*.json</code> file or url request which contains html. For closing the dialog window, you can add <code>data-action="click->lib-dialog#hide"</code> to any element</p>
                             <p></p>
-                            <p>Adding <code>data-lib-dialog-open</code> attribute on <code>data-controller="lib-dialog"</code> (by default located on body), then the dialog gets open upon page load</p>
-                            <p>Url is passed the same way as normal, you can also add selector to <code>data-lib-dialog-open</code> and HTML content of that selector opens as dialog.</p>
+                            <p>Adding <code>data-lib-dialog-open-option</code> attribute on <code>data-controller="lib-dialog"</code> (by default located on body), then the dialog gets open upon page load</p>
+                            <p>Url is passed the as <code>data-lib-dialog-url-option</code>, you can also add selector to <code>data-lib-dialog-open-option</code> and HTML content of that selector opens as a dialog.</p>
                             <p></p>
                             <p></p>
                             <h3>Methods</h3>
-                            <ul>
-                                <li>open dialog with dialog with fetch request: <code>LibDialog.action(url)</code></li>
-                                <li>open dialog with any content: <code>LibDialog.show(content)</code></li>
-                                <li>close dialog: <code>LibDialog.hide()</code></li>
-                            </ul>
-                            <p>All methods returns promise</p>
+                            <p>See docs at <a href="https://legendary-muffin-ebbe68.netlify.app/docs/lib/dialog.html">Winduum</a></p>
                             <p></p>
                             <p></p>
                             <h3>Attributes (c-dialog)</h3>
                             <ul>
-                                <li>data-size: <code>sm</code>, <code>base</code>, <code>lg</code></li>
-                                <li>data-type: <code>scrollable</code> - scroll inside dialog</li>
-                                <li>class: <code>justify-center</code> - vertical align to center</li>
+                                <li><code>data-size</code> - <code>sm</code>, <code>lg</code></li>
+                                <li><code>data-type</code> - <code>scrollable</code> - scroll inside dialog</li>
+                            </ul>
+                            <h3>Attributes (click->lib-dialog#show)</h3>
+                            <ul>
+                                <li><code>data-lib-dialog-url-param</code> - url of <code>*.json</code> file</li>
+                                <li><code>data-lib-dialog-remove-param</code> - <code>true/false</code> whenever to remove dialog element from dom after closing</li>
+                                <li><code>data-lib-dialog-append-param</code> - <code>true/false</code> whenever to append new dialog element after the previous dialog, otherwise the previous is replaced</li>
                             </ul>
                         </div>
                          {% code "html:mirror" %}
-                            <button class="ui-btn" data-action="click->lib-dialog#show" data-action-url="/dialog/basic.json">
-                                Open dialog window
-                            </button>
+                             <button class="ui-btn" data-action="click->lib-dialog#show" data-lib-dialog-url-param="/dialog/basic.json">
+                                 Open dialog window
+                             </button>
                          {% endcode %}
                     </div>
                     <div class="col-12" id="drawer">

package/src/templates/Sections/Ui/Intro.html

@@ -16,7 +16,7 @@
                 </div>
                 <div class="col">
                     <a href="https://github.com/newlogic-digital/ui" target="_blank" rel="noopener" class="ui-btn bg-secondary">
-                        <span>Github v3.3.x</span>
+                        <span>Github v3.4.x</span>
                     </a>
                 </div>
             </div>

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

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

package/src/views/email/email.twig

@@ -0,0 +1,6 @@
+<extends src="emails/templates/Layout.twig">
+    <block name="body">
+        <include src="emails/templates/Header.twig"></include>
+        <include src="emails/templates/Content.twig"></include>
+    </block>
+</extends>

package/vite.config.js

@@ -1,10 +1,26 @@
-import { defineConfig } from 'vituum'
 import core from '@newlogic-digital/core'
 import postcssHasPseudo from 'css-has-pseudo'
+import postcssCustomSelectors from 'postcss-custom-selectors'
 
-export default defineConfig({
-    integrations: [core()],
-    postcss: {
-        plugins: [postcssHasPseudo()]
+export default {
+    plugins: [
+        core({
+            format: ['twig'],
+            twig: {
+                globals: {
+                    template: './src/templates/Layout/Main.twig'
+                }
+            },
+            tailwindcss: {
+                nesting: {
+                    noIsPseudoSelector: true
+                }
+            }
+        })
+    ],
+    css: {
+        postcss: {
+            plugins: [postcssCustomSelectors(), postcssHasPseudo()]
+        }
     }
-})
+}

package/.eslintrc

@@ -1,13 +0,0 @@
-{
-  "extends": "standard",
-  "rules": {
-    "indent": ["error", 4],
-    "no-new": "off",
-    "space-before-function-paren": ["error", "never"],
-    "import/extensions": ["error", "ignorePackages"]
-  },
-  "env": {
-    "browser": true
-  },
-  "ignorePatterns": ["**/+.js"]
-}

package/.stylelintrc

@@ -1,18 +0,0 @@
-{
-  "extends": "stylelint-config-standard",
-  "rules": {
-    "at-rule-no-unknown": [true, {"ignoreAtRules": ["layer", "tailwind"]}],
-    "selector-list-comma-newline-after": "always-multi-line",
-    "string-quotes": "double",
-    "comment-empty-line-before": ["always", {"except": ["first-nested"], "ignore": ["stylelint-commands"], "ignoreComments": ["/^clean-css/"]}],
-    "length-zero-no-unit": [true, {"ignore": ["custom-properties"]}],
-    "value-keyword-case": ["lower", { "camelCaseSvgKeywords": true }],
-    "alpha-value-notation": "number",
-    "property-no-vendor-prefix": [true, { "ignoreProperties": "appearance" }],
-    "number-max-precision": [4, { "ignoreProperties": "letter-spacing" }],
-    "max-line-length": 140,
-    "selector-class-pattern": null,
-    "import-notation": "string"
-  },
-  "ignoreFiles": ["**/+.css", "src/styles/Utils/normalize.css"]
-}

package/public/sw.js

@@ -1,30 +0,0 @@
-const offlineUrl = '/offline'
-
-self.addEventListener('install', function(event) {
-    const offlineRequest = new Request(offlineUrl)
-
-    event.waitUntil(
-        fetch(offlineRequest).then(function(response) {
-            return caches.open('offline').then(function(cache) {
-                console.log('[oninstall] Cached offline page', response.url)
-                return cache.put(offlineRequest, response)
-            })
-        })
-    )
-})
-
-self.addEventListener('fetch', function(event) {
-    const request = event.request
-
-    if (request.url.match(/\.(css|jpg|jpeg|png|gif|js|woff|woff2|ttf|svg|mp4|webp)$/) || request.url.indexOf(request.referrer) !== 0) {
-    } else if (request.method === 'GET') {
-        event.respondWith(
-            fetch(request).catch(function(error) {
-                console.log('[onfetch] Failed. Serving cached offline fallback ' + error)
-                return caches.open('offline').then(function(cache) {
-                    return cache.match(offlineUrl)
-                })
-            })
-        )
-    }
-})

package/src/emails/email.prod.html

@@ -1,6 +0,0 @@
-<extends src="templates/Layout.twig">
-    <block name="body">
-        <include src="templates/Header.twig"></include>
-        <include src="templates/Content.twig"></include>
-    </block>
-</extends>

package/src/emails/email.twig.html

@@ -1,6 +0,0 @@
-<extends src="templates/Layout.twig">
-    <block name="body">
-        <include src="templates/Header.twig"></include>
-        <include src="templates/Content.twig"></include>
-    </block>
-</extends>

package/src/scripts/Utils/Functions/inView.js

@@ -1,24 +0,0 @@
-export default function inView(element, options = {}) {
-    let inView = false
-
-    return new Promise((resolve) => {
-        if (typeof IntersectionObserver === 'undefined') {
-            resolve()
-            return false
-        }
-
-        if (!options.rootMargin) {
-            options.rootMargin = '100px'
-        }
-
-        const observer = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting && inView === false) {
-                inView = entries[0].isIntersecting
-                observer.disconnect()
-                resolve()
-            }
-        }, options || {})
-
-        observer.observe(element)
-    })
-}

package/tailwind.config.cjs

@@ -1,69 +0,0 @@
-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))
-    })
-  ],
-}