uikit 3.23.6 → 3.23.7-dev.1d206253d

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

package/src/js/core/inverse.js

@@ -23,14 +23,31 @@ export default {
         selActive: false,
     },
 
+    connected() {
+        this.isIntersecting = 0;
+    },
+
     computed: {
         target: ({ target }, $el) => (target ? $$(target, $el) : $el),
     },
 
+    watch: {
+        target: {
+            handler() {
+                queueMicrotask(() => this.$reset());
+            },
+            immediate: false,
+        },
+    },
+
     observe: [
         intersection({
             handler(entries) {
-                this.isIntersecting = entries.some(({ isIntersecting }) => isIntersecting);
+                this.isIntersecting = entries.reduce(
+                    (sum, { isIntersecting }) =>
+                        sum + (isIntersecting ? 1 : this.isIntersecting ? -1 : 0),
+                    this.isIntersecting,
+                );
                 this.$emit();
             },
             target: ({ target }) => target,
@@ -38,7 +55,7 @@ export default {
         }),
         mutation({
             target: ({ target }) => target,
-            options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
+            options: { attributes: true, attributeFilter: ['class'] },
         }),
         {
             target: ({ target }) => target,

package/src/js/util/style.js

@@ -40,7 +40,7 @@ export function css(element, property, value, priority) {
             } else {
                 element.style.setProperty(
                     property,
-                    isNumeric(value) && !cssNumber[property]
+                    isNumeric(value) && !cssNumber[property] && !isCustomProperty(property)
                         ? `${value}px`
                         : value || isNumber(value)
                           ? value
@@ -71,7 +71,7 @@ export function resetProps(element, props) {
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => {
-    if (startsWith(name, '--')) {
+    if (isCustomProperty(name)) {
         return name;
     }
 
@@ -90,3 +90,7 @@ export const propName = memoize((name) => {
         }
     }
 });
+
+function isCustomProperty(name) {
+    return startsWith(name, '--');
+}

package/src/scss/components/_import.components.scss

@@ -1,56 +0,0 @@
-// Base
-@import "variables.scss";
-@import "mixin.scss";
-@import "base.scss";
-
-// Elements
-@import "link.scss";
-@import "heading.scss";
-@import "divider.scss";
-@import "list.scss";
-@import "description-list.scss";
-@import "table.scss";
-@import "icon.scss";
-@import "form.scss"; // After: Icon
-@import "button.scss";
-
-// Layout
-@import "section.scss";
-@import "container.scss";
-@import "grid.scss";
-@import "tile.scss";
-@import "card.scss";
-
-// Common
-@import "close.scss"; // After: Icon
-@import "spinner.scss"; // After: Icon
-@import "totop.scss"; // After: Icon
-@import "alert.scss"; // After: Close
-@import "badge.scss";
-@import "label.scss";
-@import "overlay.scss"; // After: Icon
-@import "article.scss"; // After: Subnav
-@import "comment.scss"; // After: Subnav
-@import "search.scss"; // After: Icon
-
-// Navs
-@import "nav.scss";
-@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search
-@import "subnav.scss";
-@import "breadcrumb.scss";
-@import "pagination.scss";
-@import "tab.scss";
-@import "slidenav.scss"; // After: Icon
-@import "dotnav.scss";
-
-// JavaScript
-@import "accordion.scss";
-@import "drop.scss"; // After: Card
-@import "dropdown.scss"; // After: Card
-@import "modal.scss"; // After: Close
-@import "sticky.scss";
-@import "offcanvas.scss";
-@import "switcher.scss";
-// Scrollspy
-// Toggle
-// Scroll

package/src/scss/components/_import.utilities.scss

@@ -1,19 +0,0 @@
-// Utilities
-@import "animation.scss";
-@import "width.scss";
-@import "text.scss";
-@import "column.scss";
-@import "cover.scss";
-@import "background.scss";
-@import "align.scss";
-@import "utility.scss";
-@import "flex.scss"; // After: Utility
-@import "margin.scss";
-@import "padding.scss";
-@import "position.scss";
-@import "transition.scss";
-@import "visibility.scss";
-@import "inverse.scss";
-
-// Need to be loaded last
-@import "print.scss";

package/src/scss/components/grid-masonry.scss

@@ -1,69 +0,0 @@
-// Name:            Grid
-// Description:     Component to create two dimensional grids
-//
-// Component:       `uk-grid2`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-$grid-column-xsmall:                             100px !default;
-$grid-column-small:                              200px !default;
-$grid-column-medium:                             300px !default;
-$grid-column-large:                              400px !default;
-$grid-column-xlarge:                             500px !default;
-$grid-column-xxlarge:                            600px !default;
-
-$grid-gap-small:                                 $global-small-gutter !default;
-$grid-gap-medium:                                $global-gutter !default;
-$grid-gap-large:                                 $global-large-gutter !default;
-
-
-/* ========================================================================
-   Component: Grid
- ========================================================================== */
-
-.uk-grid-masonry { display: grid; }
-.uk-grid-inline { display: inline-grid; }
-
-
-/* Columns Width
- ========================================================================== */
-
-.uk-grid-column-xsmall { grid-template-columns: repeat(auto-fill, minmax($grid-column-xsmall,1fr)); }
-.uk-grid-column-small { grid-template-columns: repeat(auto-fill, minmax($grid-column-small,1fr)); }
-.uk-grid-column-medium { grid-template-columns: repeat(auto-fill, minmax($grid-column-medium,1fr)); }
-.uk-grid-column-large { grid-template-columns: repeat(auto-fill, minmax($grid-column-large,1fr)); }
-.uk-grid-column-xlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xlarge,1fr)); }
-.uk-grid-column-xxlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xxlarge,1fr)); }
-
-
-/* Gap
- ========================================================================== */
-
-.uk-grid-gap-none { grid-gap: 0; }
-.uk-grid-gap-small { grid-gap: $grid-gap-small; }
-.uk-grid-gap-medium { grid-gap: $grid-gap-medium; }
-.uk-grid-gap-large { grid-gap: $grid-gap-large; }
-
-
-/* Auto Placement
- ========================================================================== */
-
-// Default
-.uk-grid-auto-flow-row { grid-auto-flow: row; }
-.uk-grid-auto-flow-column { grid-auto-flow: column; }
-.uk-grid-auto-flow-dense { grid-auto-flow: dense; }
-
-
-/* Item Span
- ========================================================================== */
-
-// TODO Fix implicit tracks if span is too large
-.uk-grid-item-span-2 { grid-column-start: span 2; }
-.uk-grid-item-span-3 { grid-column-start: span 3; }
-.uk-grid-item-span-4 { grid-column-start: span 4; }
-.uk-grid-item-span-5 { grid-column-start: span 5; }
-