uikit 3.12.3-dev.cbf065cc2 → 3.13.1-dev.4a671f35d

package/src/js/util/selector.js

@@ -28,40 +28,41 @@ function getContext(selector, context = document) {
 }
 
 const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+const sanatize = memoize((selector) => selector.replace(contextSanitizeRe, '$1 *'));
 
 function _query(selector, context = document, queryFn) {
     if (!selector || !isString(selector)) {
         return selector;
     }
 
-    selector = selector.replace(contextSanitizeRe, '$1 *');
+    selector = sanatize(selector);
 
     if (isContextSelector(selector)) {
-        selector = splitSelector(selector)
-            .map((selector) => {
-                let ctx = context;
-
-                if (selector[0] === '!') {
-                    const selectors = selector.substr(1).trim().split(' ');
-                    ctx = closest(parent(context), selectors[0]);
-                    selector = selectors.slice(1).join(' ').trim();
-                }
-
-                if (selector[0] === '-') {
-                    const selectors = selector.substr(1).trim().split(' ');
-                    const prev = (ctx || context).previousElementSibling;
-                    ctx = matches(prev, selector.substr(1)) ? prev : null;
-                    selector = selectors.slice(1).join(' ');
+        const split = splitSelector(selector);
+        selector = '';
+        for (let sel of split) {
+            let ctx = context;
+
+            if (sel[0] === '!') {
+                const selectors = sel.substr(1).trim().split(' ');
+                ctx = closest(parent(context), selectors[0]);
+                sel = selectors.slice(1).join(' ').trim();
+                if (!sel.length && split.length === 1) {
+                    return ctx;
                 }
+            }
 
-                if (!ctx) {
-                    return null;
-                }
+            if (sel[0] === '-') {
+                const selectors = sel.substr(1).trim().split(' ');
+                const prev = (ctx || context).previousElementSibling;
+                ctx = matches(prev, sel.substr(1)) ? prev : null;
+                sel = selectors.slice(1).join(' ');
+            }
 
-                return `${domPath(ctx)} ${selector}`;
-            })
-            .filter(Boolean)
-            .join(',');
+            if (ctx) {
+                selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
+            }
+        }
 
         context = document;
     }

package/src/less/components/modal.less

@@ -139,8 +139,9 @@
 /*
  * 1. Create position context for spinner and close button
  * 2. Dimensions
- * 3. Style
- * 4. Slide-in transition
+ * 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
+ * 4. Style
+ * 5. Slide-in transition
  */
 
 .uk-modal-dialog {
@@ -151,8 +152,10 @@
     margin: 0 auto;
     width: @modal-dialog-width;
     /* 3 */
-    background: @modal-dialog-background;
+    max-width: 100% !important;
     /* 4 */
+    background: @modal-dialog-background;
+    /* 5 */
     opacity: 0;
     transform: translateY(-100px);
     transition: 0.3s linear;

package/src/scss/components/modal.scss

@@ -139,8 +139,9 @@ $modal-close-outside-hover-color:                $global-inverse-color !default;
 /*
  * 1. Create position context for spinner and close button
  * 2. Dimensions
- * 3. Style
- * 4. Slide-in transition
+ * 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
+ * 4. Style
+ * 5. Slide-in transition
  */
 
 .uk-modal-dialog {
@@ -151,8 +152,10 @@ $modal-close-outside-hover-color:                $global-inverse-color !default;
     margin: 0 auto;
     width: $modal-dialog-width;
     /* 3 */
-    background: $modal-dialog-background;
+    max-width: 100% !important;
     /* 4 */
+    background: $modal-dialog-background;
+    /* 5 */
     opacity: 0;
     transform: translateY(-100px);
     transition: 0.3s linear;

package/tests/grid.html

@@ -508,15 +508,15 @@
             <h3>Medium / Small</h3>
 
             <div class="uk-grid-divider uk-grid-column-medium uk-grid-row-small uk-child-width-1-4@m" uk-grid>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                </div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+            </div>
 
             <h2>Divider</h2>
 

package/tests/slider.html

@@ -470,7 +470,7 @@
 
         <div class="uk-container">
 
-            <h3>JavaScript Options</h3>
+            <h2>JavaScript Options</h2>
 
             <div class="uk-overflow-auto">
                 <table class="uk-table uk-table-striped">

package/tests/slideshow.html

@@ -356,7 +356,7 @@
 
         <div class="uk-container">
 
-            <h3>JavaScript Options</h3>
+            <h2>JavaScript Options</h2>
 
             <div class="uk-overflow-auto">
                 <table class="uk-table uk-table-striped">

package/tests/sticky.html

@@ -143,12 +143,6 @@
                             <td>self</td>
                             <td>The target element to apply active and inactive classes to. Defaults to the element itself.</td>
                         </tr>
-                        <tr>
-                            <td><code>width-element</code></td>
-                            <td>CSS Selector</td>
-                            <td>false</td>
-                            <td>The element the Sticky should get its width from in active mode.</td>
-                        </tr>
                         <tr>
                             <td><code>show-on-up</code></td>
                             <td>Boolean</td>

package/src/js/core/gif.js

@@ -1,24 +0,0 @@
-import { isInView, observeIntersection } from 'uikit-util';
-
-// Deprecated
-export default {
-    connected() {
-        this.registerObserver(observeIntersection(this.$el, () => this.$emit()));
-    },
-
-    update: {
-        read(data) {
-            const inview = isInView(this.$el);
-
-            if (!inview || data.isInView === inview) {
-                return false;
-            }
-
-            data.isInView = inview;
-        },
-
-        write() {
-            this.$el.src = '' + this.$el.src; // force self-assign
-        },
-    },
-};