uikit 3.15.7-dev.05c3b3f6c → 3.15.7-dev.36b565a98

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.15.7-dev.05c3b3f6c",
+    "version": "3.15.7-dev.36b565a98",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/api/boot.js

@@ -45,15 +45,13 @@ export default function (UIkit) {
     function applyAttributeMutation({ target, attributeName }) {
         const name = getComponentName(attributeName);
 
-        if (!name || !(name in UIkit)) {
-            return;
-        }
+        if (name) {
+            if (hasAttr(target, attributeName)) {
+                UIkit[name](target);
+                return;
+            }
 
-        if (hasAttr(target, attributeName)) {
-            UIkit[name](target);
-            return;
+            UIkit.getComponent(target, name)?.$destroy();
         }
-
-        UIkit.getComponent(target, name)?.$destroy();
     }
 }

package/src/js/api/component.js

@@ -1,23 +1,23 @@
-import { $$, camelize, hyphenate, isPlainObject, memoize, startsWith } from 'uikit-util';
+import { $$, camelize, hyphenate, isPlainObject } from 'uikit-util';
 
+const components = {};
 export default function (UIkit) {
-    const DATA = UIkit.data;
-
-    const components = {};
+    const { data: DATA, prefix: PREFIX } = UIkit;
 
     UIkit.component = function (name, options) {
-        const id = hyphenate(name);
-
-        name = camelize(id);
+        name = hyphenate(name);
+        const id = PREFIX + name;
 
         if (!options) {
-            if (isPlainObject(components[name])) {
-                components[name] = UIkit.extend(components[name]);
+            if (isPlainObject(components[id])) {
+                components[id] = components[`data-${id}`] = UIkit.extend(components[id]);
             }
 
-            return components[name];
+            return components[id];
         }
 
+        name = camelize(name);
+
         UIkit[name] = function (element, data) {
             const component = UIkit.component(name);
 
@@ -44,15 +44,16 @@ export default function (UIkit) {
 
         const opt = isPlainObject(options) ? { ...options } : options.options;
 
+        opt.id = id;
         opt.name = name;
 
         opt.install?.(UIkit, opt, name);
 
         if (UIkit._initialized && !opt.functional) {
-            requestAnimationFrame(() => UIkit[name](`[uk-${id}],[data-uk-${id}]`));
+            requestAnimationFrame(() => UIkit[name](`[${id}],[data-${id}]`));
         }
 
-        return (components[name] = isPlainObject(options) ? opt : options);
+        return (components[id] = components[`data-${id}`] = isPlainObject(options) ? opt : options);
     };
 
     UIkit.getComponents = (element) => element?.[DATA] || {};
@@ -67,10 +68,7 @@ export default function (UIkit) {
 
         for (const attribute of node.attributes) {
             const name = getComponentName(attribute.name);
-
-            if (name && name in components) {
-                UIkit[name](node);
-            }
+            name && UIkit[name](node);
         }
     };
 
@@ -81,8 +79,7 @@ export default function (UIkit) {
     };
 }
 
-export const getComponentName = memoize((attribute) => {
-    return startsWith(attribute, 'uk-') || startsWith(attribute, 'data-uk-')
-        ? camelize(attribute.replace('data-uk-', '').replace('uk-', ''))
-        : false;
-});
+export function getComponentName(attribute) {
+    const cmp = components[attribute];
+    return cmp && (isPlainObject(cmp) ? cmp : cmp.options).name;
+}

package/src/js/api/instance.js

@@ -1,4 +1,4 @@
-import { hyphenate, isEmpty, memoize, remove, within } from 'uikit-util';
+import { isEmpty, remove, within } from 'uikit-util';
 
 export default function (UIkit) {
     const DATA = UIkit.data;
@@ -66,14 +66,9 @@ export default function (UIkit) {
 
     UIkit.prototype.$getComponent = UIkit.getComponent;
 
-    const componentName = memoize((name) => UIkit.prefix + hyphenate(name));
-    Object.defineProperties(UIkit.prototype, {
-        $container: Object.getOwnPropertyDescriptor(UIkit, 'container'),
-
-        $name: {
-            get() {
-                return componentName(this.$options.name);
-            },
-        },
-    });
+    Object.defineProperty(
+        UIkit.prototype,
+        '$container',
+        Object.getOwnPropertyDescriptor(UIkit, 'container')
+    );
 }

package/src/js/api/state.js

@@ -73,7 +73,7 @@ export default function (UIkit) {
     UIkit.prototype._initProps = function (props) {
         let key;
 
-        props = props || getProps(this.$options, this.$name);
+        props = props || getProps(this.$options);
 
         for (key in props) {
             if (!isUndefined(props[key])) {
@@ -124,9 +124,9 @@ export default function (UIkit) {
     };
 }
 
-function getProps(opts, name) {
+function getProps(opts) {
     const data = {};
-    const { args = [], props = {}, el } = opts;
+    const { args = [], props = {}, el, id } = opts;
 
     if (!props) {
         return data;
@@ -149,7 +149,7 @@ function getProps(opts, name) {
         data[key] = value;
     }
 
-    const options = parseOptions(getData(el, name), args);
+    const options = parseOptions(getData(el, id), args);
 
     for (const key in options) {
         const prop = camelize(key);
@@ -277,24 +277,24 @@ function initChildListObserver(component) {
 }
 
 function initPropsObserver(component) {
-    const { $name, $options, $props } = component;
-    const { attrs, props, el } = $options;
+    const { $options, $props } = component;
+    const { id, attrs, props, el } = $options;
 
     if (!props || attrs === false) {
         return;
     }
 
     const attributes = isArray(attrs) ? attrs : Object.keys(props);
-    const filter = attributes.map((key) => hyphenate(key)).concat($name);
+    const filter = attributes.map((key) => hyphenate(key)).concat(id);
 
     const observer = new MutationObserver((records) => {
-        const data = getProps($options, $name);
+        const data = getProps($options);
         if (
             records.some(({ attributeName }) => {
                 const prop = attributeName.replace('data-', '');
-                return (
-                    prop === $name ? attributes : [camelize(prop), camelize(attributeName)]
-                ).some((prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]);
+                return (prop === id ? attributes : [camelize(prop), camelize(attributeName)]).some(
+                    (prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]
+                );
             })
         ) {
             component.$reset();

package/src/js/components/filter.js

@@ -155,8 +155,7 @@ function applyState(state, target, children) {
 }
 
 function mergeState(el, attr, state) {
-    const filterBy = getFilter(el, attr);
-    const { filter, group, sort, order = 'asc' } = filterBy;
+    const { filter, group, sort, order = 'asc' } = getFilter(el, attr);
 
     if (filter || isUndefined(sort)) {
         if (group) {

package/src/js/components/lightbox-panel.js

@@ -206,7 +206,6 @@ export default {
 
                 let matches;
                 const iframeAttrs = {
-                    frameborder: '0',
                     allowfullscreen: '',
                     style: 'max-width: 100%; box-sizing: border-box;',
                     'uk-responsive': '',
@@ -248,7 +247,6 @@ export default {
                         item,
                         createEl('iframe', {
                             src,
-                            frameborder: '0',
                             allowfullscreen: '',
                             class: 'uk-lightbox-iframe',
                             ...attrs,

package/src/js/components/tooltip.js

@@ -59,13 +59,12 @@ export default {
 
             this._unbind = once(
                 document,
-                `show keydown ${pointerDown}`,
+                `keydown ${pointerDown}`,
                 this.hide,
                 false,
                 (e) =>
                     (e.type === pointerDown && !within(e.target, this.$el)) ||
-                    (e.type === 'keydown' && e.keyCode === 27) ||
-                    (e.type === 'show' && e.detail[0] !== this && e.detail[0].$name === this.$name)
+                    (e.type === 'keydown' && e.keyCode === 27)
             );
 
             clearTimeout(this.showTimer);

package/src/js/core/accordion.js

@@ -11,9 +11,7 @@ import {
     hasClass,
     includes,
     index,
-    isInView,
-    noop,
-    scrollIntoView,
+    scrollParents,
     toFloat,
     toggleClass,
     Transition,
@@ -108,52 +106,46 @@ export default {
                 return `${this.targets} ${this.$props.toggle}`;
             },
 
-            handler(e) {
+            async handler(e) {
                 e.preventDefault();
-                this.toggle(index(this.toggles, e.current));
+
+                this._off?.();
+                this._off = keepScrollPosition(e.target);
+                await this.toggle(index(this.toggles, e.current));
+                this._off();
             },
         },
     ],
 
     methods: {
-        toggle(item, animate) {
-            let items = [this.items[getIndex(item, this.items)]];
+        async toggle(item, animate) {
+            item = this.items[getIndex(item, this.items)];
+            let items = [item];
             const activeItems = filter(this.items, `.${this.clsOpen}`);
 
             if (!this.multiple && !includes(activeItems, items[0])) {
                 items = items.concat(activeItems);
             }
 
-            if (
-                !this.collapsible &&
-                activeItems.length < 2 &&
-                !filter(items, `:not(.${this.clsOpen})`).length
-            ) {
+            if (!this.collapsible && activeItems.length < 2 && includes(activeItems, item)) {
                 return;
             }
 
-            for (const el of items) {
-                this.toggleElement(el, !hasClass(el, this.clsOpen), (el, show) => {
-                    toggleClass(el, this.clsOpen, show);
-                    attr($(this.$props.toggle, el), 'aria-expanded', show);
-
-                    if (animate === false || !this.animation) {
-                        hide($(this.content, el), !show);
-                        return;
-                    }
-
-                    return transition(el, show, this).then(() => {
-                        if (show) {
-                            const toggle = $(this.$props.toggle, el);
-                            requestAnimationFrame(() => {
-                                if (!isInView(toggle)) {
-                                    scrollIntoView(toggle, { offset: this.offset });
-                                }
-                            });
+            await Promise.all(
+                items.map((el) =>
+                    this.toggleElement(el, !includes(activeItems, el), (el, show) => {
+                        toggleClass(el, this.clsOpen, show);
+                        attr($(this.$props.toggle, el), 'aria-expanded', show);
+
+                        if (animate === false || !this.animation) {
+                            hide($(this.content, el), !show);
+                            return;
                         }
-                    }, noop);
-                });
-            }
+
+                        return transition(el, show, this);
+                    })
+                )
+            );
         },
     },
 };
@@ -193,3 +185,19 @@ async function transition(el, show, { content, duration, velocity, transition })
         hide(content, true);
     }
 }
+
+function keepScrollPosition(el) {
+    const scrollParent = scrollParents(el)[0];
+    let frame;
+    (function scroll() {
+        frame = requestAnimationFrame(() => {
+            const { top } = el.getBoundingClientRect();
+            if (top < 0) {
+                scrollParent.scrollTop += top;
+            }
+            scroll();
+        });
+    })();
+
+    return () => requestAnimationFrame(() => cancelAnimationFrame(frame));
+}

package/src/js/core/icon.js

@@ -99,7 +99,7 @@ export const IconComponent = {
     }),
 
     beforeConnect() {
-        addClass(this.$el, this.$name);
+        addClass(this.$el, this.$options.id);
     },
 };
 

package/src/js/mixin/class.js

@@ -1,7 +1,7 @@
-import { addClass, hasClass } from 'uikit-util';
+import { addClass } from 'uikit-util';
 
 export default {
     connected() {
-        !hasClass(this.$el, this.$name) && addClass(this.$el, this.$name);
+        addClass(this.$el, this.$options.id);
     },
 };