uikit 3.15.21 → 3.15.22-dev.1a5585ce3

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.21",
+    "version": "3.15.22-dev.1a5585ce3",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/icons/eye-slash.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="none" stroke="#000" d="m7.56,7.56c.62-.62,1.49-1.01,2.44-1.01,1.91,0,3.45,1.54,3.45,3.45,0,.95-.39,1.82-1.01,2.44" />
+    <path fill="none" stroke="#000" d="m19.5,10c-2.4,3.66-5.26,7-9.5,7h0,0,0c-4.24,0-7.1-3.34-9.49-7C2.89,6.34,5.75,3,9.99,3h0,0,0c4.25,0,7.11,3.34,9.5,7Z" />
+    <line fill="none" stroke="#000" x1="2.5" y1="2.5" x2="17.5" y2="17.5" />
+</svg>

package/src/images/icons/eye.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <circle fill="none" stroke="#000" cx="10" cy="10" r="3.45" />
+    <path fill="none" stroke="#000" d="m19.5,10c-2.4,3.66-5.26,7-9.5,7h0,0,0c-4.24,0-7.1-3.34-9.49-7C2.89,6.34,5.75,3,9.99,3h0,0,0c4.25,0,7.11,3.34,9.5,7Z" />
+</svg>

package/src/js/components/sortable.js

@@ -320,7 +320,7 @@ function trackScroll(pos) {
         const dist = (Date.now() - last) * 0.3;
         last = Date.now();
 
-        scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/)
+        scrollParents(document.elementFromPoint(x, pos.y))
             .reverse()
             .some((scrollEl) => {
                 let { scrollTop: scroll, scrollHeight } = scrollEl;

package/src/js/components/tooltip.js

@@ -17,6 +17,7 @@ import {
     pointerEnter,
     pointerLeave,
     remove,
+    scrollParents,
     within,
 } from 'uikit-util';
 
@@ -95,8 +96,9 @@ export default {
         },
 
         _show() {
+            const [scrollParent] = scrollParents(this.$el);
             this.tooltip = append(
-                this.container,
+                within(scrollParent, this.container) ? scrollParent : this.container,
                 `<div id="${this.id}" class="uk-${this.$options.name}" role="tooltip">
                     <div class="uk-${this.$options.name}-inner">${this.title}</div>
                  </div>`

package/src/js/core/accordion.js

@@ -189,7 +189,7 @@ async function transition(el, show, { content, duration, velocity, transition })
 }
 
 function keepScrollPosition(el) {
-    const [scrollParent] = scrollParents(el, /auto|scroll/, true);
+    const [scrollParent] = scrollParents(el, true);
     let frame;
     (function scroll() {
         frame = requestAnimationFrame(() => {

package/src/js/core/drop.js

@@ -18,6 +18,7 @@ import {
     offsetViewport,
     on,
     once,
+    overflowParents,
     parent,
     pointerCancel,
     pointerDown,
@@ -26,7 +27,6 @@ import {
     pointerUp,
     query,
     removeClass,
-    scrollParents,
     within,
 } from 'uikit-util';
 import { isSameSiteAnchor, preventBackgroundScroll, preventOverscroll } from '../mixin/modal';
@@ -296,7 +296,7 @@ export default {
 
                     (() => {
                         const observer = observeResize(
-                            scrollParents(this.$el).concat(this.target),
+                            overflowParents(this.$el).concat(this.target),
                             update
                         );
                         return () => observer.disconnect();
@@ -304,7 +304,7 @@ export default {
 
                     ...(this.autoUpdate
                         ? [
-                              on([document, scrollParents(this.$el)], 'scroll', update, {
+                              on([document, overflowParents(this.$el)], 'scroll', update, {
                                   passive: true,
                               }),
                           ]
@@ -498,5 +498,5 @@ function getPositionedElements(el) {
 }
 
 function getViewport(el, target) {
-    return offsetViewport(scrollParents(target).find((parent) => within(el, parent)));
+    return offsetViewport(overflowParents(target).find((parent) => within(el, parent)));
 }

package/src/js/core/height-viewport.js

@@ -33,7 +33,7 @@ export default {
 
     resizeTargets() {
         // check for offsetTop change
-        return [this.$el, ...scrollParents(this.$el, /auto|scroll/)];
+        return [this.$el, ...scrollParents(this.$el)];
     },
 
     update: {
@@ -46,7 +46,7 @@ export default {
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
             const { body, scrollingElement } = document;
-            const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
+            const [scrollElement] = scrollParents(this.$el);
             const { height: viewportHeight } = offsetViewport(
                 scrollElement === body ? scrollingElement : scrollElement
             );

package/src/js/core/scroll.js

@@ -65,6 +65,7 @@ function isSameSiteLink(el) {
 
 export function getTargetElement(el) {
     if (isSameSiteLink(el)) {
-        return document.getElementById(decodeURIComponent(el.hash).substring(1));
+        const id = decodeURIComponent(el.hash).substring(1);
+        return document.getElementById(id) || document.getElementsByName(id)[0];
     }
 }

package/src/js/core/scrollspy-nav.js

@@ -63,7 +63,7 @@ export default {
                     return false;
                 }
 
-                const [scrollElement] = scrollParents(targets, /auto|scroll/, true);
+                const [scrollElement] = scrollParents(targets, true);
                 const { scrollTop, scrollHeight } = scrollElement;
                 const viewport = offsetViewport(scrollElement);
                 const max = scrollHeight - viewport.height;

package/src/js/mixin/modal.js

@@ -326,7 +326,7 @@ export function preventOverscroll(el) {
                     return;
                 }
 
-                let [scrollParent] = scrollParents(e.target, /auto|scroll/);
+                let [scrollParent] = scrollParents(e.target);
                 if (!within(scrollParent, el)) {
                     scrollParent = el;
                 }

package/src/js/mixin/position.js

@@ -50,7 +50,7 @@ export default {
                 placement.reverse();
             }
 
-            const [scrollElement] = scrollParents(element, /auto|scroll/);
+            const [scrollElement] = scrollParents(element);
             const { scrollTop, scrollLeft } = scrollElement;
 
             // Ensure none positioned element does not generate scrollbars

package/src/js/util/position.js

@@ -2,7 +2,7 @@ import { css } from './style';
 import { within } from './filter';
 import { offset } from './dimensions';
 import { clamp, isArray, ucfirst } from './lang';
-import { offsetViewport, scrollParents } from './viewport';
+import { offsetViewport, overflowParents } from './viewport';
 
 const dirs = [
     ['width', 'x', 'left', 'right'],
@@ -169,7 +169,7 @@ function getScrollArea(element, target, viewportOffset, i) {
 }
 
 function commonScrollParents(element, target) {
-    return scrollParents(target).filter((parent) => within(element, parent));
+    return overflowParents(target).filter((parent) => within(element, parent));
 }
 
 function getIntersectionArea(...rects) {

package/src/js/util/viewport.js

@@ -1,7 +1,16 @@
 import { css } from './style';
 import { isVisible, parents } from './filter';
 import { offset, offsetPosition } from './dimensions';
-import { clamp, findIndex, intersectRect, isWindow, toFloat, toWindow, ucfirst } from './lang';
+import {
+    clamp,
+    findIndex,
+    includes,
+    intersectRect,
+    isWindow,
+    toFloat,
+    toWindow,
+    ucfirst,
+} from './lang';
 
 export function isInView(element, offsetTop = 0, offsetLeft = 0) {
     if (!isVisible(element)) {
@@ -9,7 +18,7 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
     }
 
     return intersectRect(
-        ...scrollParents(element)
+        ...overflowParents(element)
             .map((parent) => {
                 const { top, left, bottom, right } = offsetViewport(parent);
 
@@ -25,7 +34,7 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
 }
 
 export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
-    const parents = isVisible(element) ? scrollParents(element, /auto|scroll|hidden/) : [];
+    const parents = isVisible(element) ? scrollParents(element, false, ['hidden']) : [];
     return parents.reduce(
         (fn, scrollElement, i) => {
             const { scrollTop, scrollHeight, offsetHeight } = scrollElement;
@@ -91,7 +100,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
         return 0;
     }
 
-    const [scrollElement] = scrollParents(element, /auto|scroll/, true);
+    const [scrollElement] = scrollParents(element, true);
     const { scrollHeight, scrollTop } = scrollElement;
     const { height: viewportHeight } = offsetViewport(scrollElement);
     const maxScroll = scrollHeight - viewportHeight;
@@ -103,7 +112,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
     return clamp((scrollTop - start) / (end - start));
 }
 
-export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, scrollable = false) {
+export function scrollParents(element, scrollable = false, props = []) {
     const scrollEl = scrollingElement(element);
 
     let ancestors = parents(element).reverse();
@@ -118,13 +127,17 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, s
         .concat(
             ancestors.filter(
                 (parent) =>
-                    overflowRe.test(css(parent, 'overflow')) &&
+                    includes(['auto', 'scroll', ...props], css(parent, 'overflow')) &&
                     (!scrollable || parent.scrollHeight > offsetViewport(parent).height)
             )
         )
         .reverse();
 }
 
+export function overflowParents(element) {
+    return scrollParents(element, false, ['hidden', 'clip']);
+}
+
 export function offsetViewport(scrollElement) {
     const window = toWindow(scrollElement);
     const {

package/tests/icon.html

@@ -87,6 +87,8 @@
                                 <li><span class="uk-margin-small-right" uk-icon="icon: trash"></span> trash</li>
                                 <li><span class="uk-margin-small-right" uk-icon="icon: move"></span> move</li>
                                 <li><span class="uk-margin-small-right" uk-icon="icon: link"></span> link</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: eye"></span> eye</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: eye-slash"></span> eye-slash</li>
                                 <li><span class="uk-margin-small-right" uk-icon="icon: question"></span> question</li>
                                 <li><span class="uk-margin-small-right" uk-icon="icon: info"></span> info</li>
                                 <li><span class="uk-margin-small-right" uk-icon="icon: warning"></span> warning</li>
@@ -264,9 +266,11 @@
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: future"></a></li>
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: crosshairs"></a></li>
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: pencil"></a></li>
-                        <li><a class="uk-icon-link" href="#" uk-icon="icon: link"></a></li>
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: trash"></a></li>
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: move"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: link"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: eye"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: eye-slash"></a></li>
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: question"></a></li>
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: info"></a></li>
                         <li><a class="uk-icon-link" href="#" uk-icon="icon: warning"></a></li>
@@ -428,9 +432,11 @@
                         <li><a class="uk-icon-button" href="#" uk-icon="icon: future"></a></li>
                         <li><a class="uk-icon-button" href="#" uk-icon="icon: crosshairs"></a></li>
                         <li><a class="uk-icon-button" href="#" uk-icon="icon: pencil"></a></li>
-                        <li><a class="uk-icon-button" href="#" uk-icon="icon: link"></a></li>
                         <li><a class="uk-icon-button" href="#" uk-icon="icon: trash"></a></li>
                         <li><a class="uk-icon-button" href="#" uk-icon="icon: move"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: link"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: eye"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: eye-slash"></a></li>
                         <li><a class="uk-icon-button" href="#" uk-icon="icon: question"></a></li>
                         <li><a class="uk-icon-button" href="#" uk-icon="icon: info"></a></li>
                         <li><a class="uk-icon-button" href="#" uk-icon="icon: warning"></a></li>
@@ -590,9 +596,11 @@
                         <li><span uk-icon="ratio: 2; icon: future"></span></li>
                         <li><span uk-icon="ratio: 2; icon: crosshairs"></span></li>
                         <li><span uk-icon="ratio: 2; icon: pencil"></span></li>
-                        <li><span uk-icon="ratio: 2; icon: link"></span></li>
                         <li><span uk-icon="ratio: 2; icon: trash"></span></li>
                         <li><span uk-icon="ratio: 2; icon: move"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: link"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: eye"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: eye-slash"></span></li>
                         <li><span uk-icon="ratio: 2; icon: question"></span></li>
                         <li><span uk-icon="ratio: 2; icon: info"></span></li>
                         <li><span uk-icon="ratio: 2; icon: warning"></span></li>