uikit 3.12.1 → 3.12.3-dev.4c7275bdd

package/src/js/core/scrollspy.js

@@ -1,3 +1,4 @@
+import Scroll from '../mixin/scroll';
 import {
     $$,
     css,
@@ -13,6 +14,8 @@ import {
 
 const stateKey = '_ukScrollspy';
 export default {
+    mixins: [Scroll],
+
     args: 'cls',
 
     props: {
@@ -54,23 +57,14 @@ export default {
 
     disconnected() {
         for (const el of this.elements) {
-            removeClass(el, this.inViewClass, el[stateKey] ? el[stateKey].cls : '');
+            removeClass(el, this.inViewClass, el[stateKey]?.cls || '');
             delete el[stateKey];
         }
     },
 
     update: [
         {
-            read(data) {
-                // Let child components be applied at least once first
-                if (!data.update) {
-                    Promise.resolve().then(() => {
-                        this.$emit();
-                        data.update = true;
-                    });
-                    return false;
-                }
-
+            read() {
                 for (const el of this.elements) {
                     if (!el[stateKey]) {
                         el[stateKey] = { cls: getData(el, 'uk-scrollspy-class') || this.cls };
@@ -110,7 +104,7 @@ export default {
         toggle(el, inview) {
             const state = el[stateKey];
 
-            state.off && state.off();
+            state.off?.();
 
             css(el, 'visibility', !inview && this.hidden ? 'hidden' : '');
 
@@ -118,9 +112,12 @@ export default {
             toggleClass(el, state.cls);
 
             if (/\buk-animation-/.test(state.cls)) {
-                state.off = once(el, 'animationcancel animationend', () =>
-                    removeClasses(el, 'uk-animation-[\\w-]+')
-                );
+                const removeAnimationClasses = () => removeClasses(el, 'uk-animation-[\\w-]+');
+                if (inview) {
+                    state.off = once(el, 'animationcancel animationend', removeAnimationClasses);
+                } else {
+                    removeAnimationClasses();
+                }
             }
 
             trigger(el, inview ? 'inview' : 'outview');

package/src/js/core/sticky.js

@@ -1,5 +1,7 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
+import Resize from '../mixin/resize';
+import Scroll from '../mixin/scroll';
 import {
     $,
     addClass,
@@ -32,7 +34,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Media],
+    mixins: [Class, Media, Resize, Scroll],
 
     props: {
         position: String,
@@ -75,6 +77,10 @@ export default {
             return query(widthElement, $el) || this.placeholder;
         },
 
+        resizeTargets() {
+            return document.documentElement;
+        },
+
         isActive: {
             get() {
                 return hasClass(this.selTarget, this.clsActive);
@@ -186,7 +192,6 @@ export default {
 
                 const overflow = Math.max(0, height + offset - windowHeight);
                 const topOffset = getOffset(referenceElement).top;
-                const offsetParentTop = getOffset(referenceElement.offsetParent).top;
 
                 const top = parseProp(this.top, this.$el, topOffset);
                 const bottom = parseProp(this.bottom, this.$el, topOffset + height, true);
@@ -202,7 +207,6 @@ export default {
                     offset,
                     overflow,
                     topOffset,
-                    offsetParentTop,
                     height,
                     margin,
                     width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el)
@@ -244,6 +248,7 @@ export default {
                     prevDir,
                     scroll,
                     prevScroll,
+                    offsetParentTop: getOffset(this.$el.offsetParent).top,
                     overflowScroll: clamp(
                         overflowScroll + clamp(scroll, start, end) - clamp(prevScroll, start, end),
                         0,

package/src/js/core/svg.js

@@ -6,10 +6,10 @@ import {
     attr,
     includes,
     isTag,
-    isVisible,
     isVoidElement,
     memoize,
     noop,
+    observeIntersection,
     once,
     remove,
     removeAttr,
@@ -59,10 +59,24 @@ export default {
                 }
 
                 this.applyAttributes(svg, el);
-                this.$emit();
+
                 return (this.svgEl = svg);
             }
         }, noop);
+
+        if (this.strokeAnimation) {
+            this.svg.then((el) => {
+                if (this._connected) {
+                    applyAnimation(el);
+                    this.registerObserver(
+                        observeIntersection(el, (records, observer) => {
+                            applyAnimation(el);
+                            observer.disconnect();
+                        })
+                    );
+                }
+            });
+        }
     },
 
     disconnected() {
@@ -82,18 +96,6 @@ export default {
         this.svg = null;
     },
 
-    update: {
-        read() {
-            return !!(this.strokeAnimation && this.svgEl && isVisible(this.svgEl));
-        },
-
-        write() {
-            applyAnimation(this.svgEl);
-        },
-
-        type: ['resize'],
-    },
-
     methods: {
         async getSvg() {
             if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {

package/src/js/core/toggle.js

@@ -189,22 +189,25 @@ export default {
                 }
             },
         },
-    ],
 
-    update: {
-        read() {
-            return includes(this.mode, 'media') && this.media ? { match: this.matchMedia } : false;
-        },
+        {
+            name: 'mediachange',
 
-        write({ match }) {
-            const toggled = this.isToggled(this.target);
-            if (match ? !toggled : toggled) {
-                this.toggle();
-            }
-        },
+            filter() {
+                return includes(this.mode, 'media');
+            },
 
-        events: ['resize'],
-    },
+            el() {
+                return this.target;
+            },
+
+            handler(e, mediaObj) {
+                if (mediaObj.matches ^ this.isToggled(this.target)) {
+                    this.toggle();
+                }
+            },
+        },
+    ],
 
     methods: {
         async toggle(type) {

package/src/js/core/video.js

@@ -23,13 +23,9 @@ export default {
         autoplay: true,
     },
 
-    computed: {
-        inView({ autoplay }) {
-            return autoplay === 'inview';
-        },
-    },
-
     connected() {
+        this.inView = this.autoplay === 'inview';
+
         if (this.inView && !hasAttr(this.$el, 'preload')) {
             this.$el.preload = 'none';
         }
@@ -60,7 +56,5 @@ export default {
                 play(this.$el);
             }
         },
-
-        events: ['resize', 'scroll'],
     },
 };

package/src/js/mixin/media.js

@@ -1,4 +1,13 @@
-import { getCssVar, isString, toFloat } from 'uikit-util';
+import {
+    getCssVar,
+    isString,
+    on,
+    trigger,
+    toFloat,
+    startsWith,
+    isNumeric,
+    createEvent,
+} from 'uikit-util';
 
 export default {
     props: {
@@ -11,15 +20,30 @@ export default {
 
     computed: {
         matchMedia() {
-            const media = toMedia(this.media);
-            return !media || window.matchMedia(media).matches;
+            return this.mediaObj?.matches;
         },
     },
+
+    connected() {
+        const media = toMedia(this.media);
+        this.mediaObj = window.matchMedia(media);
+        const handler = () =>
+            trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+        this.offMediaObj = on(this.mediaObj, 'change', () => {
+            handler();
+            this.$emit('resize');
+        });
+        handler();
+    },
+
+    disconnected() {
+        this.offMediaObj?.();
+    },
 };
 
 function toMedia(value) {
     if (isString(value)) {
-        if (value[0] === '@') {
+        if (startsWith(value, '@')) {
             const name = `breakpoint-${value.substr(1)}`;
             value = toFloat(getCssVar(name));
         } else if (isNaN(value)) {
@@ -27,5 +51,5 @@ function toMedia(value) {
         }
     }
 
-    return value && !isNaN(value) ? `(min-width: ${value}px)` : false;
+    return value && isNumeric(value) ? `(min-width: ${value}px)` : '';
 }

package/src/js/mixin/position.js

@@ -24,18 +24,10 @@ export default {
         clsPos: '',
     },
 
-    computed: {
-        pos({ pos }) {
-            return pos.split('-').concat('center').slice(0, 2);
-        },
-
-        dir() {
-            return this.pos[0];
-        },
-
-        align() {
-            return this.pos[1];
-        },
+    connected() {
+        this.pos = this.pos.split('-').concat('center').slice(0, 2);
+        this.dir = this.pos[0];
+        this.align = this.pos[1];
     },
 
     methods: {
@@ -44,6 +36,8 @@ export default {
 
             let { offset } = this;
             const axis = this.getAxis();
+            const dir = this.pos[0];
+            const align = this.pos[1];
 
             if (!isNumeric(offset)) {
                 const node = $(offset);
@@ -56,13 +50,11 @@ export default {
             const { x, y } = positionAt(
                 element,
                 target,
+                axis === 'x' ? `${flipPosition(dir)} ${align}` : `${align} ${flipPosition(dir)}`,
+                axis === 'x' ? `${dir} ${align}` : `${align} ${dir}`,
                 axis === 'x'
-                    ? `${flipPosition(this.dir)} ${this.align}`
-                    : `${this.align} ${flipPosition(this.dir)}`,
-                axis === 'x' ? `${this.dir} ${this.align}` : `${this.align} ${this.dir}`,
-                axis === 'x'
-                    ? `${this.dir === 'left' ? -offset : offset}`
-                    : ` ${this.dir === 'top' ? -offset : offset}`,
+                    ? `${dir === 'left' ? -offset : offset}`
+                    : ` ${dir === 'top' ? -offset : offset}`,
                 null,
                 this.flip,
                 boundary

package/src/js/mixin/resize.js

@@ -0,0 +1,13 @@
+import { observeResize } from 'uikit-util';
+
+export default {
+    computed: {
+        resizeTargets() {
+            return this.$el;
+        },
+    },
+
+    connected() {
+        this.registerObserver(observeResize(this.resizeTargets, () => this.$emit('resize')));
+    },
+};

package/src/js/mixin/scroll.js

@@ -0,0 +1,32 @@
+import { on } from 'uikit-util';
+
+export default {
+    connected() {
+        registerScrollListener(this._uid, () => this.$emit('scroll'));
+    },
+
+    disconnected() {
+        unregisterScrollListener(this._uid);
+    },
+};
+
+const scrollListeners = new Map();
+let unbindScrollListener;
+function registerScrollListener(id, listener) {
+    unbindScrollListener =
+        unbindScrollListener ||
+        on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
+            passive: true,
+            capture: true,
+        });
+
+    scrollListeners.set(id, listener);
+}
+
+function unregisterScrollListener(id) {
+    scrollListeners.delete(id);
+    if (unbindScrollListener && !scrollListeners.size) {
+        unbindScrollListener();
+        unbindScrollListener = null;
+    }
+}

package/src/js/mixin/slider.js

@@ -1,3 +1,4 @@
+import Resize from './resize';
 import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
 import SliderNav from './slider-nav';
@@ -15,7 +16,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [SliderAutoplay, SliderDrag, SliderNav],
+    mixins: [SliderAutoplay, SliderDrag, SliderNav, Resize],
 
     props: {
         clsActivated: Boolean,

package/src/js/util/class.js

@@ -20,12 +20,7 @@ export function replaceClass(element, ...args) {
 
 export function hasClass(element, cls) {
     [cls] = getClasses(cls);
-    for (const node of toNodes(element)) {
-        if (cls && node.classList.contains(cls)) {
-            return true;
-        }
-    }
-    return false;
+    return !!cls && toNodes(element).some((node) => node.classList.contains(cls));
 }
 
 export function toggleClass(element, cls, force) {

package/src/js/util/mouse.js

@@ -25,7 +25,7 @@ MouseTracker.prototype = {
     },
 
     cancel() {
-        this.unbind && this.unbind();
+        this.unbind?.();
         this.interval && clearInterval(this.interval);
     },
 

package/src/js/util/observer.js

@@ -1,33 +1,70 @@
+import { on } from './event';
 import { toNodes } from './lang';
+import { fastdom } from './fastdom';
 
-// Old chromium based browsers (UC Browser) did not implement `isIntersecting`
-export const hasIntersectionObserver =
-    window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
 export function observeIntersection(targets, cb, options, intersecting = true) {
-    if (!hasIntersectionObserver) {
-        return;
-    }
-
-    const observer = new IntersectionObserver((entries, observer) => {
-        if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
-            cb(entries, observer);
-        }
-    }, options);
-    for (const el of toNodes(targets)) {
-        observer.observe(el);
-    }
-    return observer;
+    return observe(
+        IntersectionObserver,
+        targets,
+        intersecting
+            ? (entries, observer) => {
+                  if (entries.some((entry) => entry.isIntersecting)) {
+                      cb(entries, observer);
+                  }
+              }
+            : cb,
+        options
+    );
 }
 
 const hasResizeObserver = window.ResizeObserver;
 export function observeResize(targets, cb, options = { box: 'border-box' }) {
-    if (!hasResizeObserver) {
+    if (hasResizeObserver) {
+        return observe(ResizeObserver, targets, cb, options);
+    }
+
+    // Fallback Safari < 13.1
+    initResizeListener();
+    listeners.add(cb);
+
+    return {
+        disconnect() {
+            listeners.delete(cb);
+        },
+    };
+}
+
+let listeners;
+function initResizeListener() {
+    if (listeners) {
         return;
     }
 
-    const observer = new ResizeObserver((entries, observer) => {
-        cb(entries, observer);
-    });
+    listeners = new Set();
+
+    // throttle 'resize'
+    let pendingResize;
+    const handleResize = () => {
+        if (pendingResize) {
+            return;
+        }
+        pendingResize = true;
+        fastdom.read(() => (pendingResize = false));
+        for (const listener of listeners) {
+            listener();
+        }
+    };
+
+    on(window, 'load resize', handleResize);
+    on(document, 'loadedmetadata load', handleResize, true);
+}
+
+export function observeMutation(targets, cb, options) {
+    return observe(MutationObserver, targets, cb, options);
+}
+
+function observe(Observer, targets, cb, options) {
+    const observer = new Observer(cb);
     for (const el of toNodes(targets)) {
         observer.observe(el, options);
     }

package/src/js/util/style.js

@@ -80,7 +80,7 @@ export function getCssVar(name) {
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => vendorPropName(name));
 
-const cssPrefixes = ['webkit', 'moz', 'ms'];
+const cssPrefixes = ['webkit', 'moz'];
 
 function vendorPropName(name) {
     name = hyphenate(name);

package/src/less/components/base.less

@@ -504,27 +504,8 @@ pre code { font-family: @base-pre-font-family; }
 /* Focus
  ========================================================================== */
 
-/*
- * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor.
- * 1. Fallback: Remove `:focus` for a negative tabindexes.
- * 2. Fallback: Set `:focus` style but not for negative tabindexes.
- * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
- * 4. Set `:focus-visible` style for browsers which support it.
- */
-
-/* 1 */
 :focus { outline: none; }
 
-/* 2 */
-:focus:not([tabindex^='-']) {
-    outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline;
-    outline-offset: @base-focus-outline-offset;
-}
-
-/* 3 */
-:focus:not(:focus-visible) { outline: none; }
-
-/* 4 */
 :focus-visible { outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline; }
 
 

package/src/less/components/form.less

@@ -310,10 +310,8 @@
  * Placeholder
  */
 
-.uk-input::-ms-input-placeholder { color: @form-placeholder-color !important; }
 .uk-input::placeholder { color: @form-placeholder-color; }
 
-.uk-textarea::-ms-input-placeholder { color: @form-placeholder-color !important; }
 .uk-textarea::placeholder { color: @form-placeholder-color; }
 
 
@@ -423,8 +421,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 /*
  * 1. Remove default style. Also works in Firefox
  * 2. Style
- * 3. Remove default style in IE 10/11
- * 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
+ * 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
  */
 
 .uk-select:not([multiple]):not([size]) {
@@ -439,9 +436,6 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 }
 
 /* 3 */
-.uk-select:not([multiple]):not([size])::-ms-expand { display: none; }
-
-/* 4 */
 .uk-select:not([multiple]):not([size]) option { color: @form-select-option-color; }
 
 /*
@@ -820,10 +814,8 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
     // Placeholder
     //
 
-    .uk-input::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
     .uk-input::placeholder { color: @inverse-form-placeholder-color; }
 
-    .uk-textarea::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
     .uk-textarea::placeholder { color: @inverse-form-placeholder-color; }
 
     //

package/src/less/components/icon.less

@@ -107,15 +107,21 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 
 /*
  * Display images in icon dimensions
+ * 1. Required for `span` with background image
+ * 2. Required for `image`
  */
 
 .uk-icon-image {
     width: @icon-image-size;
     height: @icon-image-size;
+    /* 1 */
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     vertical-align: middle;
+    /* 2 */
+    object-fit: scale-down;
+    max-width: none;
 }
 
 

package/src/less/components/list.less

@@ -133,6 +133,7 @@
 
 .uk-list-bullet > ::before {
     content: "";
+    display: list-item;
     position: relative;
     left: -@list-padding-left;
     width: @list-padding-left;

package/src/less/components/search.less

@@ -129,7 +129,6 @@
 .uk-search-input:focus { outline: none; }
 
 /* Placeholder */
-.uk-search-input:-ms-input-placeholder { color: @search-placeholder-color !important; }
 .uk-search-input::placeholder { color: @search-placeholder-color; }
 
 
@@ -334,10 +333,8 @@
 
     .uk-search-input { color: @inverse-search-color; }
 
-    .uk-search-input:-ms-input-placeholder { color: @inverse-search-placeholder-color !important; }
     .uk-search-input::placeholder { color: @inverse-search-placeholder-color; }
 
-
     //
     // Icon
     //

package/src/less/components/slider.less

@@ -59,6 +59,7 @@
 /*
  * 1. Optimize animation
  * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
+ * 3. Disable horizontal panning gestures
  */
 
 .uk-slider-items {
@@ -66,6 +67,8 @@
     will-change: transform;
     /* 2 */
     position: relative;
+    /* 3 */
+    touch-action: pan-y;
 }
 
 /*

package/src/less/components/slideshow.less

@@ -33,6 +33,7 @@
  * 2. Reset list
  * 3. Clip child elements
  * 4. Prevent displaying the callout information on iOS.
+ * 5. Disable horizontal panning gestures
  */
 
 .uk-slideshow-items {
@@ -47,6 +48,8 @@
     overflow: hidden;
     /* 4 */
     -webkit-touch-callout: none;
+    /* 5 */
+    touch-action: pan-y;
 }