uikit 3.11.2-dev.c08a5b5f0 → 3.11.2-dev.d8c101f07

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,20 +1,5 @@
 # Changelog
 
-## WIP Picture element
-
-### Added
-
-- Add support for <picture> element in Img component
-- Add `sources` option to Image component to allow for multiple image sources for background images
-- Add `loading` option to Image component (Avoid lazy loading images that are in first visible viewport)
-
-### Changed
-
-- Using Image component is deprecated for image elements (use native loading="lazy" instead)
-- The placeholder image, set by the Image component, no longer has a width/height. `data-` prefixed height/width attributes are ignored. (Use height/width attributes instead for the browser to infer the intrinsic size of the image being loaded)
-- Image component no longer relies on session storage to check for cached images to immediately show an image
-- Slideshow removes native loading="lazy" attribute from adjacent slides (Previously handled by Img component and its `target` option)
-
 ## WIP
 
 ### Added
@@ -26,6 +11,11 @@
 ### Changed
 
 - 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
+
+## Removed
+
+- Drop IE11 support from JavaScript
 
 ### Fixed
 

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`)
         );
     }
 }

package/build/publishDev.js

@@ -1,11 +1,10 @@
 import semver from 'semver';
-import {args, getVersion, run} from './util.js';
+import { args, getVersion, run } from './util.js';
 
-const {inc} = semver;
+const { inc } = semver;
 
 // default exec options
-if (args.f || args.force || await isDevCommit()) {
-
+if (args.f || args.force || (await isDevCommit())) {
     // increase version patch number
     const version = inc(await getVersion(), 'patch');
 
@@ -20,17 +19,16 @@ if (args.f || args.force || await isDevCommit()) {
 
     // publish to dev tag
     await run('npm publish --tag dev');
-
 }
 
 async function isDevCommit() {
-
     // check for changes to publish (%B: raw body (unwrapped subject and body)
     const message = await run('git log -1 --pretty=%B');
 
     // https://www.conventionalcommits.org/en/v1.0.0/
-    const type = message.match(/^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50}/);
+    const type = message.match(
+        /^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50}/
+    );
 
     return type && ['feat', 'fix', 'refactor', 'perf'].includes(type[2]);
-
 }

package/build/release.js

@@ -1,23 +1,26 @@
 import archiver from 'archiver';
 import inquirer from 'inquirer';
 import dateFormat from 'dateformat/lib/dateformat.js';
-import {createWriteStream} from 'fs';
+import { createWriteStream } from 'fs';
 import semver from 'semver';
-import {args, getVersion, glob, logFile, replaceInFile, run} from './util.js';
+import { args, getVersion, glob, logFile, replaceInFile, run } from './util.js';
 
-const {coerce, inc, prerelease, valid} = semver;
+const { coerce, inc, prerelease, valid } = semver;
 
 const prevVersion = await getVersion();
 const version = await inquireVersion(args.v || args.version);
 
 await Promise.all([
     run(`npm version ${version} --git-tag-version false`),
-    replaceInFile('CHANGELOG.md', data =>
-        data.replace(/^##\s*WIP/m, `## ${versionFormat(version)} (${dateFormat(Date.now(), 'mmmm d, yyyy')})`)
+    replaceInFile('CHANGELOG.md', (data) =>
+        data.replace(
+            /^##\s*WIP/m,
+            `## ${versionFormat(version)} (${dateFormat(Date.now(), 'mmmm d, yyyy')})`
+        )
     ),
-    replaceInFile('.github/ISSUE_TEMPLATE/bug-report.md', data =>
+    replaceInFile('.github/ISSUE_TEMPLATE/bug-report.md', (data) =>
         data.replace(prevVersion, version)
-    )
+    ),
 ]);
 
 await run('yarn compile');
@@ -27,20 +30,20 @@ await run('yarn build-scss');
 await createPackage(version);
 
 async function inquireVersion(v) {
-
     if (valid(v)) {
         return v;
     }
 
     const prompt = inquirer.createPromptModule();
 
-    return (await prompt({
-        name: 'version',
-        message: 'Enter a version',
-        default: () => inc(prevVersion, prerelease(prevVersion) ? 'prerelease' : 'patch'),
-        validate: val => !!val.length || 'Invalid version'
-    })).version;
-
+    return (
+        await prompt({
+            name: 'version',
+            message: 'Enter a version',
+            default: () => inc(prevVersion, prerelease(prevVersion) ? 'prerelease' : 'patch'),
+            validate: (val) => !!val.length || 'Invalid version',
+        })
+    ).version;
 }
 
 async function createPackage(version) {
@@ -49,8 +52,8 @@ async function createPackage(version) {
 
     archive.pipe(createWriteStream(file));
 
-    (await glob('dist/{js,css}/uikit?(-icons|-rtl)?(.min).{js,css}')).forEach(file =>
-        archive.file(file, {name: file.substring(5)})
+    (await glob('dist/{js,css}/uikit?(-icons|-rtl)?(.min).{js,css}')).forEach((file) =>
+        archive.file(file, { name: file.substring(5) })
     );
 
     await archive.finalize();