uikit 3.17.9-dev.73842811 → 3.17.9-dev.9f100be74

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.17.9-dev.73842811",
+  "version": "3.17.9-dev.9f100be74",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/events.js

@@ -24,12 +24,7 @@ export function registerEvent(instance, event, key) {
         : { name: key, handler: event };
     el = isFunction(el) ? el.call(instance, instance) : el || instance.$el;
 
-    if (isArray(el)) {
-        el.forEach((el) => registerEvent(instance, { ...event, el }, key));
-        return;
-    }
-
-    if (!el || (filter && !filter.call(instance))) {
+    if (!el || (isArray(el) && !el.length) || (filter && !filter.call(instance))) {
         return;
     }
 

package/src/js/api/instance.js

@@ -1,4 +1,4 @@
-import { includes, remove, within } from 'uikit-util';
+import { remove, within } from 'uikit-util';
 import { attachToElement, createComponent, detachFromElement, getComponent } from './component';
 import { update } from './global';
 import { callConnected, callDisconnected, callHook } from './hooks';
@@ -60,7 +60,7 @@ export default function (App) {
     });
 }
 
-const ids = [];
+const ids = Object.create(null);
 export function generateId(instance, el = instance.$el, postfix = '') {
     if (el.id) {
         return el.id;
@@ -68,11 +68,11 @@ export function generateId(instance, el = instance.$el, postfix = '') {
 
     let id = `${instance.$options.id}-${instance._uid}${postfix}`;
 
-    if (includes(ids, id)) {
+    if (ids[id]) {
         id = generateId(instance, el, `${postfix}-2`);
     }
 
-    ids.push(id);
+    ids[id] = true;
 
     return id;
 }

package/src/js/api/options.js

@@ -168,12 +168,13 @@ export function coerce(type, value) {
     return type ? type(value) : value;
 }
 
+const listRe = /,(?![^(]*\))/;
 function toList(value) {
     return isArray(value)
         ? value
         : isString(value)
         ? value
-              .split(/,(?![^(]*\))/)
+              .split(listRe)
               .map((value) => (isNumeric(value) ? toNumber(value) : toBoolean(value.trim())))
         : [value];
 }

package/src/js/api/props.js

@@ -1,4 +1,5 @@
 import {
+    assign,
     camelize,
     data as getData,
     hasOwn,
@@ -11,23 +12,24 @@ import { registerObserver } from './observer';
 import { coerce, parseOptions } from './options';
 
 export function initProps(instance) {
-    const props = getProps(instance.$options);
+    const { $options, $props } = instance;
+    const props = getProps($options);
 
-    for (let key in props) {
-        if (!isUndefined(props[key])) {
-            instance.$props[key] = props[key];
-        }
-    }
+    assign($props, props);
 
-    const exclude = [instance.$options.computed, instance.$options.methods];
-    for (let key in instance.$props) {
-        if (key in props && notIn(exclude, key)) {
-            instance[key] = instance.$props[key];
+    const { computed, methods } = $options;
+    for (let key in $props) {
+        if (
+            key in props &&
+            (!computed || !hasOwn(computed, key)) &&
+            (!methods || !hasOwn(methods, key))
+        ) {
+            instance[key] = $props[key];
         }
     }
 }
 
-export function getProps(opts) {
+function getProps(opts) {
     const data = {};
     const { args = [], props = {}, el, id } = opts;
 
@@ -64,10 +66,6 @@ export function getProps(opts) {
     return data;
 }
 
-function notIn(options, key) {
-    return options.every((arr) => !arr || !hasOwn(arr, key));
-}
-
 const getAttributes = memoize((id, props) => {
     const attributes = Object.keys(props);
     const filter = attributes

package/src/js/components/tooltip.js

@@ -1,6 +1,7 @@
 import {
     append,
     attr,
+    data,
     flipPosition,
     hasAttr,
     includes,
@@ -18,6 +19,7 @@ import {
     within,
 } from 'uikit-util';
 import { generateId } from '../api/instance';
+import { parseOptions } from '../api/options';
 import Container from '../mixin/container';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
@@ -26,48 +28,42 @@ import { keyMap } from '../util/keys';
 export default {
     mixins: [Container, Togglable, Position],
 
-    args: 'title',
-
-    props: {
-        delay: Number,
-        title: String,
-    },
-
     data: {
         pos: 'top',
-        title: '',
-        delay: 0,
         animation: ['uk-animation-scale-up'],
         duration: 100,
         cls: 'uk-active',
     },
 
-    beforeConnect() {
-        this.id = generateId(this, {});
-        this._hasTitle = hasAttr(this.$el, 'title');
-        attr(this.$el, {
-            title: '',
-            'aria-describedby': this.id,
-        });
+    connected() {
         makeFocusable(this.$el);
     },
 
     disconnected() {
         this.hide();
-
-        if (!attr(this.$el, 'title')) {
-            attr(this.$el, 'title', this._hasTitle ? this.title : null);
-        }
     },
 
     methods: {
         show() {
-            if (this.isToggled(this.tooltip || null) || !this.title) {
+            if (this.isToggled(this.tooltip || null)) {
+                return;
+            }
+
+            const { delay = 0, title } = parseProps(this.$options);
+
+            if (!title) {
                 return;
             }
 
+            this.title = title;
+            this.id ||= generateId(this, {});
+            this._hasTitle = hasAttr(this.$el, 'title');
+            attr(this.$el, { title: null, 'aria-describedby': this.id });
+
+            once(this.$el, ['blur', pointerLeave], (e) => !isTouch(e) && this.hide());
+
             clearTimeout(this.showTimer);
-            this.showTimer = setTimeout(this._show, this.delay);
+            this.showTimer = setTimeout(this._show, delay);
         },
 
         async hide() {
@@ -81,6 +77,7 @@ export default {
                 await this.toggleElement(this.tooltip, false, false);
             }
 
+            attr(this.$el, { title: this._hasTitle ? this.title : null, 'aria-describedby': null });
             remove(this.tooltip);
             this.tooltip = null;
         },
@@ -134,19 +131,10 @@ export default {
     },
 
     events: {
-        focus: 'show',
-        blur: 'hide',
-
-        [`${pointerEnter} ${pointerLeave}`](e) {
-            if (!isTouch(e)) {
-                this[e.type === pointerEnter ? 'show' : 'hide']();
-            }
-        },
-
         // Clicking a button does not give it focus on all browsers and platforms
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
-        [pointerDown](e) {
-            if (isTouch(e)) {
+        [`focus ${pointerEnter} ${pointerDown}`](e) {
+            if (!isTouch(e)) {
                 this.show();
             }
         },
@@ -189,3 +177,11 @@ function getAlignment(el, target, [dir, align]) {
 
     return [dir, align];
 }
+
+function parseProps(options) {
+    const { el, id } = options;
+    return ['delay', 'title'].reduce(
+        (obj, key) => ({ [key]: data(el, key), ...obj }),
+        parseOptions(data(el, id), ['title']),
+    );
+}