uikit 3.11.2-dev.9433cd5fd → 3.11.2-dev.946d2efea

package/.eslintrc.json

@@ -1,62 +1,17 @@
 {
-    "root":true,
+    "root": true,
     "env": {
         "es6": true,
         "browser": true
     },
-    "extends": [
-        "eslint:recommended"
-    ],
+    "extends": ["eslint:recommended", "prettier"],
     "parserOptions": {
-        "sourceType": "module"
+        "sourceType": "module",
+        "ecmaVersion": 2022
     },
     "globals": {
         "VERSION": true,
         "ICONS": true,
         "NAME": true
-    },
-    "rules": {
-        "arrow-parens": ["error", "as-needed"],
-        "brace-style": ["error", "1tbs", {"allowSingleLine": true}],
-        "comma-dangle": ["error", "never"],
-        "comma-spacing": "error",
-        "comma-style": "error",
-        "eqeqeq": ["error", "smart"],
-        "eol-last": "error",
-        "indent": "off",
-        "indent-legacy": ["error", 4, {"SwitchCase": 1}],
-        "key-spacing": "error",
-        "keyword-spacing": "error",
-        "linebreak-style": ["error", "unix"],
-        "no-array-constructor": "error",
-        "no-case-declarations": "warn",
-        "no-duplicate-imports": "error",
-        "no-empty": ["error", {"allowEmptyCatch": true}],
-        "no-extend-native": "error",
-        "no-lone-blocks": "error",
-        "no-lonely-if": "error",
-        "no-multi-spaces": "error",
-        "no-multiple-empty-lines": ["error", {"max": 2, "maxEOF": 1, "maxBOF": 0}],
-        "no-template-curly-in-string": "error",
-        "no-trailing-spaces": "error",
-        "no-unused-vars": ["error", {"vars": "local", "args": "none"}],
-        "no-var": "error",
-        "object-curly-spacing": "error",
-        "object-shorthand": "error",
-        "prefer-const": ["error", {"destructuring": "all"}],
-        "prefer-destructuring": "warn",
-        "quotes": ["error", "single", {"avoidEscape": true}],
-        "semi": ["error", "always"],
-        "sort-imports": ["error", {
-            "ignoreCase": true,
-            "ignoreDeclarationSort": true
-        }],
-        "space-before-blocks": "error",
-        "space-before-function-paren": ["error", {"anonymous": "always", "named": "never", "asyncArrow": "always"}],
-        "space-in-parens": "error",
-        "space-infix-ops": "error",
-        "space-unary-ops": "error",
-        "spaced-comment": "error",
-        "template-curly-spacing": "error"
     }
 }

package/.prettierignore

@@ -0,0 +1,14 @@
+/*
+!/*.js
+!/*.json
+!/.github
+!/.circleci
+!/build
+!/src
+/src/*
+!/src/js
+!/tests
+/tests/*
+!/tests/js
+/tests/js/*
+!/tests/js/index.js

package/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+    "tabWidth": 4,
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+        {
+            "files": ["**/*.yml"],
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
+}

package/.webstorm.js

@@ -1,6 +1,6 @@
 // Webstorm Module resolution config
 System.config({
-    "paths": {
-        "uikit-util": "./src/js/util/index.js",
-    }
+    paths: {
+        'uikit-util': './src/js/util/index.js',
+    },
 });

package/CHANGELOG.md

@@ -1,33 +1,50 @@
 # Changelog
 
-## WIP Picture element
-
-### Added
-
-- Add support for <picture> element in Img component
-- Add `sources` option to Img component
-
-### Changed
-
-- Img component no longer sets a placeholder (use height/width instead)
-
 ## WIP
 
 ### Added
 
+- Add support for `<picture>` element to Image component
+- Add `sources` option to emulate `<picture>` element for background images to Image component
+- Add `loading` option to avoid lazy loading background images in first visible viewport to Image component
+- Add support for `loading="lazy"` attribute to SVG component
 - Add `position` option with `top`, `bottom` and `auto` values to Sticky component
 - Add support for basic math operands in `offset` option of Sticky component
+- Add animation stop positions to Parallax component
+- Add object fit and position classes to Utility component
+- Add height viewport classes to Height component
 
 ### Changed
 
+- Image elements need `width` and `height` attributes to prevent layout shifts
+- Image component no longer relies on session storage to check for cached images to immediately show an image
+- Slider and Switcher remove native `loading="lazy"` attribute from adjacent slides
+- Accordion, Drop, Switcher and Toggle remove native `loading="lazy"` attribute from their children when entering the viewport
 - Improve sticky behavior if sticky content is larger than the viewport
+- Sticky component's `bottom` option checks for bottom padding if sticky element is within referenced element
+- Height Viewport component sets `uk-height-viewport` class to reduce initial layout shifts
+
+### Deprecated
+
+- Deprecate `uk-img` for `<img>` element: Use native `loading="lazy"` attribute instead
+
+## Removed
+
+- Remove IE11 support
+- Removed `data-width` and `data-height` for `<img>` element from Image component. Use native attributes instead.
 
 ### Fixed
 
 - Fix infinite sliding in Slider component with equally sized slides
-- Fix Sticky component setting wrong margin for placeholder
+- Fix Slider component sets calculation
 - Fix dropdowns not closing in Navbar component when hovering dropbar and navigation with keyboard
 - Fix dropdown no longer closes if pointer is still moving towards it
+- Fix `fadein` not transformed correctly to `fade-in` in scss build
+- Fix Sticky component setting wrong margin for placeholder
+- Fix Sticky placeholder sets height with fraction
+- Fix Sticky component does not animate in if scroll position equals top offset
+- Fix Sticky component prevents transition on `selTarget` if forced to hide for recalculation
+- Fix Parallax component initial jump in background image
 
 ## 3.11.1 (February 7, 2022)
 
@@ -66,7 +83,7 @@
 - Fix usage of `data-` prefix for Cover and Responsive component
 - Fix pointer events for iframes in Cover component
 - Fix Slideshow component no longer throws if items list does not exist
-- Fix space key no longer triggers Toggle on `input` elements
+- Fix space key no longer triggers Toggle on `<input>` element
 
 ## 3.10.0 (January 12, 2022)
 
@@ -383,7 +400,7 @@
 
 - Fix component update handling
 - Fix Tooltip position
-- Fix Tooltip component applied to button elements in iOS
+- Fix Tooltip component applied to `<button>` element in iOS
 - Fix regression in Switcher component
 
 ## 3.6.8 (January 5, 2021)
@@ -932,7 +949,7 @@
 ### Fixed
 
 - Fix Slideshow invisible after switching tabs in Switcher
-- Fix lazy loading images in Img component in UC Browser
+- Fix lazy loading images in Image component in UC Browser
 - Fix opening Offcanvas/Modal through buttons
 
 ## 3.1.8 (August 29, 2019)
@@ -1102,8 +1119,8 @@
 ### Fixed
 
 - Fix touch event detection
-- Fix background images are shown too large on retina displays in Img component
-- Fix correctly calculate offsetLeft in Img component
+- Fix background images are shown too large on retina displays in Image component
+- Fix correctly calculate offsetLeft in Image component
 - Fix autofocus elements not blurring within Toggable on hide
 
 ## 3.0.2 (January 15, 2019)
@@ -1112,7 +1129,7 @@
 
 - Fix offcanvas overlay transition
 - Fix active state in Switcher component
-- Fix background images on displays with higher devicePixelRatio in Img component
+- Fix background images on displays with higher devicePixelRatio in Image component
 
 ## 3.0.1 (January 14, 2019)
 
@@ -1145,7 +1162,7 @@
 ### Fixed
 
 - Fix visible toggle and its child elements not being focusable through keyboard navigation
-- Fix Img component correctly escapes urls on background images
+- Fix Image component correctly escapes urls on background images
 
 ## 3.0.0 rc 26 (January 3, 2019)
 
@@ -1164,8 +1181,8 @@
 - Fix `flex bug` mixin (IE 11)
 - Fix properly resolving css custom properties in scss
 - Fix order of variable assignments in scss
-- Fix background images are shown too large on retina displays in Img component
-- Fix lazy loading images in Img component in Safari
+- Fix background images are shown too large on retina displays in Image component
+- Fix lazy loading images in Image component in Safari
 - Limit positioned element to container width and margin in Position component
 
 ## 3.0.0 rc 25 (November 30, 2018)
@@ -1253,7 +1270,7 @@
 
 ### Fixed
 
-- Fix preserve color not working if class is set on svg element in Icon component
+- Fix preserve color not working if class is set on `<svg>` element in Icon component
 - Fix inverse hover color for accordion title
 - Fix close color being overwritten from toolbar in Lightbox component
 - Fix Modal not hiding upon being destroyed
@@ -1497,7 +1514,7 @@
 
 ### Added
 
-- Add Img component to lazy load images
+- Add Image component to lazy load images
 - Add Filter component to filter and sort any kind of layout
 - Add `masonry` option to Grid component
 - Add inverse style for form icon
@@ -1660,7 +1677,7 @@
 
 ### Changed
 
-- IMPORTANT: Use `a` element instead of headings for the accordion title
+- IMPORTANT: Use `<a>` element instead of headings for the accordion title
 - Calling a component constructor with data on an already initialized component will reset the component
 - Dropbar no longer repositions Dropdowns in DOM upon opening
 
@@ -1761,7 +1778,7 @@
 - Fix slide animations stacking when tab is not focused in Slideshow component
 - Fix overlay not showing in Offcanvas component
 - Fix Slideshow Parallax in Slideshow component for IE11
-- Fix default border-radius for button elements in Chrome 62.
+- Fix default border-radius for `<button>` element in Chrome 62.
 
 ## 3.0.0 beta 31 (October 20, 2017)
 
@@ -1870,7 +1887,7 @@
 
 - Offcanvas will keep scroll position if anchor link was clicked
 - Fix margin modifier in Position component for IE11
-- Fix divider-small text alignment for `hr` elements Edge and IE
+- Fix divider-small text alignment for `<hr>` element Edge and IE
 - Fix setting the ratio of Spinner component
 - Fix event handling in Sortable component
 - Fix grid calculation (Firefox)
@@ -1906,7 +1923,7 @@
 
 ### Changed
 
-- Make Icon component work with button elements
+- Make Icon component work with `<button>` element
 
 ### Fixed
 
@@ -2236,7 +2253,7 @@
 
 ### Changed
 
-- UIkit observes `body` element too now
+- UIkit observes `<body>` element too now
 - Performance improvements
 
 ### Fixed
@@ -2282,7 +2299,7 @@
 
 ### Fixed
 
-- Fix Icon component on canvas elements (Safari)
+- Fix Icon component on `<canvas>` elements (Safari)
 
 ## 3.0.0 beta 1 (January 09, 2017)
 

package/build/.eslintrc.json

@@ -6,9 +6,7 @@
         "browser": false,
         "commonjs": false
     },
-    "extends": [
-        "../.eslintrc.json"
-    ],
+    "extends": ["../.eslintrc.json"],
     "parserOptions": {
         "ecmaVersion": 2022
     },

package/build/build.js

@@ -1,12 +1,13 @@
 import camelize from 'camelcase';
-import {basename, resolve} from 'path';
-import {args, compile, glob, icons} from './util.js';
+import { basename, resolve } from 'path';
+import { args, compile, glob, icons } from './util.js';
 
 const bundles = getBundleTasks();
 const components = await getComponentTasks();
-const buildAll = args.all || !Object.keys(args).filter(name =>
-    !['d', 'debug', 'nominify', 'watch', '_'].includes(name)
-).length;
+const buildAll =
+    args.all ||
+    !Object.keys(args).filter((name) => !['d', 'debug', 'nominify', 'watch', '_'].includes(name))
+        .length;
 
 if (args.h || args.help) {
     console.log(`
@@ -30,62 +31,59 @@ if (args.h || args.help) {
 }
 
 let tasks;
-const allTasks = {...bundles, ...components};
+const allTasks = { ...bundles, ...components };
 if (buildAll) {
     tasks = allTasks;
 } else if (args.components) {
     tasks = components;
 } else {
     tasks = Object.keys(args)
-        .map(step => allTasks[step])
-        .filter(t => t);
+        .map((step) => allTasks[step])
+        .filter((t) => t);
 }
 
-await Promise.all(Object.values(tasks).map(task => task()));
+await Promise.all(Object.values(tasks).map((task) => task()));
 
 function getBundleTasks() {
     return {
-
         core: () => compile('src/js/uikit-core.js', 'dist/js/uikit-core'),
 
         uikit: () => compile('src/js/uikit.js', 'dist/js/uikit'),
 
-        icons: async () => compile('build/wrapper/icons.js', 'dist/js/uikit-icons', {
-            name: 'icons',
-            replaces: {ICONS: await icons('{src/images,custom}/icons/*.svg')}
-        }),
-
-        tests: async () => compile('tests/js/index.js', 'tests/js/test', {
-            name: 'test',
-            replaces: {TESTS: await getTestFiles()}
-        })
-
+        icons: async () =>
+            compile('build/wrapper/icons.js', 'dist/js/uikit-icons', {
+                name: 'icons',
+                replaces: { ICONS: await icons('{src/images,custom}/icons/*.svg') },
+            }),
+
+        tests: async () =>
+            compile('tests/js/index.js', 'tests/js/test', {
+                name: 'test',
+                replaces: { TESTS: await getTestFiles() },
+            }),
     };
 }
 
 async function getComponentTasks() {
-
     const components = await glob('src/js/components/!(index).js');
 
     return components.reduce((components, file) => {
-
         const name = basename(file, '.js');
 
         components[name] = () =>
             compile('build/wrapper/component.js', `dist/js/components/${name}`, {
                 name,
                 external: ['uikit', 'uikit-util'],
-                globals: {uikit: 'UIkit', 'uikit-util': 'UIkit.util'},
-                aliases: {component: resolve('src/js/components', name)},
-                replaces: {NAME: `'${camelize(name)}'`}
+                globals: { uikit: 'UIkit', 'uikit-util': 'UIkit.util' },
+                aliases: { component: resolve('src/js/components', name) },
+                replaces: { NAME: `'${camelize(name)}'` },
             });
 
         return components;
-
     }, {});
 }
 
 async function getTestFiles() {
-    const files = await glob('tests/!(index).html', {nosort: true});
-    return JSON.stringify(files.map(file => basename(file, '.html')));
+    const files = await glob('tests/!(index).html', { nosort: true });
+    return JSON.stringify(files.map((file) => basename(file, '.html')));
 }

package/build/icons.js

@@ -1,4 +1,4 @@
-import {args, compile, glob, icons} from './util.js';
+import { args, compile, glob, icons } from './util.js';
 
 if (args.h || args.help) {
     console.log(`
@@ -25,14 +25,10 @@ await Promise.all((await glob(path)).map(compileIcons));
 
 async function compileIcons(folder) {
     const [, name] = folder.toString().match(new RegExp(match, 'i'));
-    return compile(
-        'build/wrapper/icons.js',
-        `dist/js/uikit-icons-${name}`,
-        {
-            name,
-            replaces: {
-                ICONS: await icons(`{src/images/icons,${folder}}/*.svg`)
-            }
-        }
-    );
+    return compile('build/wrapper/icons.js', `dist/js/uikit-icons-${name}`, {
+        name,
+        replaces: {
+            ICONS: await icons(`{src/images/icons,${folder}}/*.svg`),
+        },
+    });
 }

package/build/less.js

@@ -1,59 +1,72 @@
 import rtlcss from 'rtlcss';
-import {basename} from 'path';
-import {args, banner, glob, minify, pathExists, read, readJson, renderLess, write} from './util.js';
+import { basename } from 'path';
+import {
+    args,
+    banner,
+    glob,
+    minify,
+    pathExists,
+    read,
+    readJson,
+    renderLess,
+    write,
+} from './util.js';
 
-const {rtl} = args;
+const { rtl } = args;
 const develop = args.develop || args.debug || args.d || args.nominify;
 const sources = [
-    {src: 'src/less/uikit.less', dist: `dist/css/uikit-core${rtl ? '-rtl' : ''}.css`},
-    {src: 'src/less/uikit.theme.less', dist: `dist/css/uikit${rtl ? '-rtl' : ''}.css`}
+    { src: 'src/less/uikit.less', dist: `dist/css/uikit-core${rtl ? '-rtl' : ''}.css` },
+    { src: 'src/less/uikit.theme.less', dist: `dist/css/uikit${rtl ? '-rtl' : ''}.css` },
 ];
 
-const themes = await pathExists('themes.json') ? await readJson('themes.json') : {};
+const themes = (await pathExists('themes.json')) ? await readJson('themes.json') : {};
 
 for (const src of await glob('custom/*.less')) {
     const theme = basename(src, '.less');
     const dist = `dist/css/uikit.${theme}${rtl ? '-rtl' : ''}.css`;
 
-    themes[theme] = {css: `../${dist}`};
+    themes[theme] = { css: `../${dist}` };
 
     if (await pathExists(`dist/js/uikit-icons-${theme}.js`)) {
         themes[theme].icons = `../dist/js/uikit-icons-${theme}.js`;
     }
 
-    sources.push({src, dist});
+    sources.push({ src, dist });
 }
 
-await Promise.all(sources.map(({src, dist}) => compile(src, dist, develop, rtl)));
+await Promise.all(sources.map(({ src, dist }) => compile(src, dist, develop, rtl)));
 
-if (!rtl && (Object.keys(themes).length || !await pathExists('themes.json'))) {
+if (!rtl && (Object.keys(themes).length || !(await pathExists('themes.json')))) {
     await write('themes.json', JSON.stringify(themes));
 }
 
 async function compile(file, dist, develop, rtl) {
-
     const less = await read(file);
 
-    let output = (await renderLess(less, {
-        relativeUrls: true,
-        rootpath: '../../',
-        paths: ['src/less/', 'custom/']
-    })).replace(/\.\.\/dist\//g, '');
+    let output = (
+        await renderLess(less, {
+            relativeUrls: true,
+            rootpath: '../../',
+            paths: ['src/less/', 'custom/'],
+        })
+    ).replace(/\.\.\/dist\//g, '');
 
     if (rtl) {
         output = rtlcss.process(
             output,
             {
-                stringMap: [{
-                    name: 'previous-next',
-                    priority: 100,
-                    search: ['previous', 'Previous', 'PREVIOUS'],
-                    replace: ['next', 'Next', 'NEXT'],
-                    options: {
-                        scope: '*',
-                        ignoreCase: false
-                    }
-                }]
+                stringMap: [
+                    {
+                        name: 'previous-next',
+                        priority: 100,
+                        search: ['previous', 'Previous', 'PREVIOUS'],
+                        replace: ['next', 'Next', 'NEXT'],
+                        options: {
+                            scope: '*',
+                            ignoreCase: false,
+                        },
+                    },
+                ],
             },
             [
                 {
@@ -61,23 +74,23 @@ async function compile(file, dist, develop, rtl) {
                     priority: 50,
                     directives: {
                         control: {},
-                        value: []
+                        value: [],
                     },
                     processors: [
                         {
                             expr: ['--uk-position-translate-x', 'stroke-dashoffset'].join('|'),
                             action(prop, value, context) {
-                                return {prop, value: context.util.negate(value)};
-                            }
-                        }
-                    ]
-                }
+                                return { prop, value: context.util.negate(value) };
+                            },
+                        },
+                    ],
+                },
             ],
             {
                 pre(root, postcss) {
-                    root.prepend(postcss.comment({text: 'rtl:begin:rename'}));
-                    root.append(postcss.comment({text: 'rtl:end:rename'}));
-                }
+                    root.prepend(postcss.comment({ text: 'rtl:begin:rename' }));
+                    root.append(postcss.comment({ text: 'rtl:end:rename' }));
+                },
             }
         );
     }
@@ -87,5 +100,4 @@ async function compile(file, dist, develop, rtl) {
     if (!develop) {
         await minify(dist);
     }
-
 }

package/build/package.json

@@ -1,4 +1,4 @@
 {
-  "private": true,
-  "type": "module"
+    "private": true,
+    "type": "module"
 }

package/build/prefix.js

@@ -1,5 +1,5 @@
 import inquirer from 'inquirer';
-import {args, glob, read, replaceInFile, validClassName} from './util.js';
+import { args, glob, read, replaceInFile, validClassName } from './util.js';
 
 if (args.h || args.help) {
     console.log(`
@@ -26,24 +26,27 @@ if (currentPrefix === prefix) {
 await replacePrefix(currentPrefix, prefix);
 
 async function findExistingPrefix() {
-    const data = await read('dist/css/uikit.css');
-    const res = data.match(new RegExp(`(${validClassName.source})(-[a-z]+)?-grid`));
-    return res && res[1];
+    return (await read('dist/css/uikit.css')).match(
+        new RegExp(`(${validClassName.source})(-[a-z]+)?-grid`)
+    )?.[1];
 }
 
 async function getPrefix() {
-
     const prefixFromInput = args.p || args.prefix;
 
     if (!prefixFromInput) {
-
         const prompt = inquirer.createPromptModule();
 
-        return (await prompt({
-            name: 'prefix',
-            message: 'enter a prefix',
-            validate: (val, res) => val.length && val.match(validClassName) ? !!(res.prefix = val) : 'invalid prefix'
-        })).prefix;
+        return (
+            await prompt({
+                name: 'prefix',
+                message: 'enter a prefix',
+                validate: (val, res) =>
+                    val.length && val.match(validClassName)
+                        ? !!(res.prefix = val)
+                        : 'invalid prefix',
+            })
+        ).prefix;
     }
 
     if (validClassName.test(prefixFromInput)) {
@@ -55,16 +58,16 @@ async function getPrefix() {
 
 async function replacePrefix(from, to) {
     for (const file of await glob('dist/**/*.css')) {
-        await replaceInFile(file, data => data.replace(
-            new RegExp(`${from}-${/([a-z\d-]+)/.source}`, 'g'),
-            `${to}-$1`
-        ));
+        await replaceInFile(file, (data) =>
+            data.replace(new RegExp(`${from}-${/([a-z\d-]+)/.source}`, 'g'), `${to}-$1`)
+        );
     }
 
     for (const file of await glob('dist/**/*.js')) {
-        await replaceInFile(file, data => data
-            .replace(new RegExp(`${from}-`, 'g'), `${to}-`)
-            .replace(new RegExp(`(${from})?UIkit`, 'g'), `${to === 'uk' ? '' : to}UIkit`)
+        await replaceInFile(file, (data) =>
+            data
+                .replace(new RegExp(`${from}-`, 'g'), `${to}-`)
+                .replace(new RegExp(`(${from})?UIkit`, 'g'), `${to === 'uk' ? '' : to}UIkit`)
         );
     }
 }