uikit 3.16.6-dev.7e4b0cb00 → 3.16.7-dev.fcb5a4616

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.16.6-dev.7e4b0cb00",
+  "version": "3.16.7-dev.fcb5a4616",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -19,6 +19,7 @@
     "url": "https://github.com/uikit/uikit/issues"
   },
   "homepage": "https://getuikit.com",
+  "packageManager": "pnpm@7.29.1",
   "devDependencies": {
     "@rollup/plugin-alias": "^4.0.3",
     "@rollup/plugin-replace": "^5.0.2",
@@ -26,9 +27,9 @@
     "camelcase": "^7.0.1",
     "clean-css": "^5.3.2",
     "dateformat": "^5.0.3",
-    "esbuild": "^0.17.10",
-    "eslint": "^8.35.0",
-    "eslint-config-prettier": "^8.6.0",
+    "esbuild": "^0.17.11",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.7.0",
     "fs-extra": "^11.1.0",
     "glob": "^9.2.1",
     "inquirer": "^9.1.4",
@@ -37,7 +38,7 @@
     "number-precision": "^1.6.0",
     "p-limit": "^4.0.0",
     "prettier": "^2.8.4",
-    "rollup": "^3.17.3",
+    "rollup": "^3.19.1",
     "rollup-plugin-esbuild": "^5.0.0",
     "rollup-plugin-html": "^0.2.1",
     "rollup-plugin-modify": "^3.0.0",
@@ -48,10 +49,10 @@
   },
   "scripts": {
     "build-scss": "node build/scss",
-    "compile": "yarn compile-less && yarn compile-js",
+    "compile": "pnpm compile-less && pnpm compile-js",
     "compile-js": "node build/build",
-    "compile-less": "yarn icons && node build/less",
-    "compile-rtl": "yarn compile-less rtl",
+    "compile-less": "pnpm icons && node build/less",
+    "compile-rtl": "pnpm compile-less rtl",
     "icons": "node build/icons",
     "prefix": "node build/prefix",
     "scope": "node build/scope",

package/src/js/api/app.js

@@ -1,5 +1,5 @@
 import { init } from './state';
-import * as util from '../util';
+import * as util from 'uikit-util';
 
 const App = function (options) {
     init(this, options);

package/src/js/api/boot.js

@@ -1,6 +1,6 @@
 import { callConnected, callDisconnected } from './hooks';
 import { components, createComponent, getComponent, getComponents } from './component';
-import { apply, hasAttr, inBrowser, isPlainObject, startsWith, trigger } from '../util';
+import { apply, hasAttr, inBrowser, isPlainObject, startsWith, trigger } from 'uikit-util';
 
 export default function (App) {
     if (inBrowser && window.MutationObserver) {

package/src/js/api/component.js

@@ -1,5 +1,5 @@
 import App from './app';
-import { $$, camelize, hyphenate, isEmpty, isPlainObject } from '../util';
+import { $$, camelize, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
 
 const PREFIX = 'uk-';
 const DATA = '__uikit__';
@@ -60,7 +60,7 @@ export function createComponent(name, element, data, ...args) {
 }
 
 export function getComponents(element) {
-    return element[DATA] || {};
+    return element?.[DATA] || {};
 }
 
 export function getComponent(element, name) {

package/src/js/api/computed.js

@@ -1,4 +1,4 @@
-import { hasOwn, isUndefined } from '../util';
+import { hasOwn, isUndefined } from 'uikit-util';
 
 export function initComputed(instance) {
     const { computed } = instance.$options;

package/src/js/api/events.js

@@ -1,4 +1,4 @@
-import { hasOwn, isArray, isFunction, isPlainObject, isString, on } from '../util';
+import { hasOwn, isArray, isFunction, isPlainObject, isString, on } from 'uikit-util';
 
 export function initEvents(instance) {
     instance._events = [];

package/src/js/api/global.js

@@ -1,47 +1,60 @@
-import App from './app';
 import { init } from './state';
 import { callUpdate } from './update';
 import { mergeOptions } from './options';
 import { component, getComponent, getComponents } from './component';
-import { $, apply, isString, parents, toNode } from '../util';
+import { $, apply, isString, parents, toNode } from 'uikit-util';
 
-App.component = component;
-App.getComponents = getComponents;
-App.getComponent = getComponent;
+export default function (App) {
+    App.component = component;
+    App.getComponents = getComponents;
+    App.getComponent = getComponent;
+    App.update = update;
 
-App.use = function (plugin) {
-    if (plugin.installed) {
-        return;
-    }
+    App.use = function (plugin) {
+        if (plugin.installed) {
+            return;
+        }
+
+        plugin.call(null, this);
+        plugin.installed = true;
 
-    plugin.call(null, this);
-    plugin.installed = true;
+        return this;
+    };
 
-    return this;
-};
+    App.mixin = function (mixin, component) {
+        component = (isString(component) ? this.component(component) : component) || this;
+        component.options = mergeOptions(component.options, mixin);
+    };
 
-App.mixin = function (mixin, component) {
-    component = (isString(component) ? this.component(component) : component) || this;
-    component.options = mergeOptions(component.options, mixin);
-};
+    App.extend = function (options) {
+        options = options || {};
 
-App.extend = function (options) {
-    options = options || {};
+        const Super = this;
+        const Sub = function UIkitComponent(options) {
+            init(this, options);
+        };
 
-    const Super = this;
-    const Sub = function UIkitComponent(options) {
-        init(this, options);
-    };
+        Sub.prototype = Object.create(Super.prototype);
+        Sub.prototype.constructor = Sub;
+        Sub.options = mergeOptions(Super.options, options);
 
-    Sub.prototype = Object.create(Super.prototype);
-    Sub.prototype.constructor = Sub;
-    Sub.options = mergeOptions(Super.options, options);
+        Sub.super = Super;
+        Sub.extend = Super.extend;
 
-    Sub.super = Super;
-    Sub.extend = Super.extend;
+        return Sub;
+    };
 
-    return Sub;
-};
+    let container;
+    Object.defineProperty(App, 'container', {
+        get() {
+            return container || document.body;
+        },
+
+        set(element) {
+            container = $(element);
+        },
+    });
+}
 
 export function update(element, e) {
     element = element ? toNode(element) : document.body;
@@ -53,22 +66,9 @@ export function update(element, e) {
     apply(element, (element) => updateElement(element, e));
 }
 
-App.update = update;
-
 function updateElement(element, e) {
     const components = getComponents(element);
     for (const name in components) {
         callUpdate(components[name], e);
     }
 }
-
-let container;
-Object.defineProperty(App, 'container', {
-    get() {
-        return container || document.body;
-    },
-
-    set(element) {
-        container = $(element);
-    },
-});

package/src/js/api/index.js

@@ -1,8 +1,8 @@
 import App from './app';
-import './component';
-import './global';
-import './hooks';
-import './state';
-import './instance';
+import globalApi from './global';
+import instanceApi from './instance';
+
+globalApi(App);
+instanceApi(App);
 
 export default App;

package/src/js/api/instance.js

@@ -1,63 +1,64 @@
-import App from './app';
 import { update } from './global';
 import { callUpdate } from './update';
-import { $, remove, within } from '../util';
+import { $, remove, within } from 'uikit-util';
 import { callConnected, callDisconnected, callHook } from './hooks';
 import { attachToElement, createComponent, detachFromElement, getComponent } from './component';
 
-App.prototype.$mount = function (el) {
-    const instance = this;
-    attachToElement(el, instance);
+export default function (App) {
+    App.prototype.$mount = function (el) {
+        const instance = this;
+        attachToElement(el, instance);
 
-    instance.$options.el = el;
+        instance.$options.el = el;
 
-    if (within(el, document)) {
-        callConnected(instance);
-    }
-};
+        if (within(el, document)) {
+            callConnected(instance);
+        }
+    };
 
-App.prototype.$destroy = function (removeEl = false) {
-    const instance = this;
-    const { el } = instance.$options;
+    App.prototype.$destroy = function (removeEl = false) {
+        const instance = this;
+        const { el } = instance.$options;
 
-    if (el) {
-        callDisconnected(instance);
-    }
+        if (el) {
+            callDisconnected(instance);
+        }
 
-    callHook(instance, 'destroy');
+        callHook(instance, 'destroy');
 
-    detachFromElement(el, instance);
+        detachFromElement(el, instance);
 
-    if (removeEl) {
-        remove(instance.$el);
-    }
-};
+        if (removeEl) {
+            remove(instance.$el);
+        }
+    };
 
-App.prototype.$create = createComponent;
-App.prototype.$emit = function (e) {
-    callUpdate(this, e);
-};
+    App.prototype.$create = createComponent;
+    App.prototype.$emit = function (e) {
+        callUpdate(this, e);
+    };
 
-App.prototype.$update = function (element = this.$el, e) {
-    update(element, e);
-};
+    App.prototype.$update = function (element = this.$el, e) {
+        update(element, e);
+    };
 
-App.prototype.$reset = function () {
-    callDisconnected(this);
-    callConnected(this);
-};
+    App.prototype.$reset = function () {
+        callDisconnected(this);
+        callConnected(this);
+    };
 
-App.prototype.$getComponent = getComponent;
+    App.prototype.$getComponent = getComponent;
 
-Object.defineProperties(App.prototype, {
-    $el: {
-        get() {
-            return this.$options.el;
+    Object.defineProperties(App.prototype, {
+        $el: {
+            get() {
+                return this.$options.el;
+            },
         },
-    },
 
-    $container: Object.getOwnPropertyDescriptor(App, 'container'),
-});
+        $container: Object.getOwnPropertyDescriptor(App, 'container'),
+    });
+}
 
 export function generateId(instance, el = instance.$el, postfix = '') {
     if (el.id) {

package/src/js/api/observables.js

@@ -16,7 +16,7 @@ import {
     removeAttr,
     toNodes,
     trigger,
-} from '../util';
+} from 'uikit-util';
 
 export function resize(options) {
     return observe(observeResize, options, 'resize');

package/src/js/api/observer.js

@@ -1,4 +1,12 @@
-import { hasOwn, includes, isArray, isEqual, isFunction, isPlainObject, isString } from '../util';
+import {
+    hasOwn,
+    includes,
+    isArray,
+    isEqual,
+    isFunction,
+    isPlainObject,
+    isString,
+} from 'uikit-util';
 
 export function initObservers(instance) {
     instance._observers = [];

package/src/js/api/options.js

@@ -10,7 +10,7 @@ import {
     startsWith,
     toBoolean,
     toNumber,
-} from '../util';
+} from 'uikit-util';
 
 const strats = {};
 

package/src/js/api/props.js

@@ -8,7 +8,7 @@ import {
     isArray,
     isUndefined,
     startsWith,
-} from '../util';
+} from 'uikit-util';
 
 export function initProps(instance) {
     const props = getProps(instance.$options);

package/src/js/api/state.js

@@ -1,7 +1,7 @@
 import { callHook } from './hooks';
 import { initComputed } from './computed';
 import { coerce, mergeOptions } from './options';
-import { assign, isArray, isPlainObject, isUndefined } from '../util';
+import { assign, isArray, isPlainObject, isUndefined } from 'uikit-util';
 
 let uid = 0;
 

package/src/js/api/update.js

@@ -1,6 +1,6 @@
 import { registerObserver } from './observer';
 import { callWatches } from './watch';
-import { assign, fastdom, isFunction, isPlainObject } from '../util';
+import { assign, fastdom, isFunction, isPlainObject } from 'uikit-util';
 
 export function callUpdate(instance, e = 'update') {
     if (!instance._connected) {

package/src/js/api/watch.js

@@ -1,4 +1,4 @@
-import { fastdom, hasOwn, isEqual } from '../util';
+import { fastdom, hasOwn, isEqual } from 'uikit-util';
 import { callObserverUpdates } from './observer';
 
 export function callWatches(instance) {

package/src/less/components/dropdown.less

@@ -26,7 +26,7 @@
 @dropdown-large-padding:                        40px;
 
 @dropdown-dropbar-padding-top:                  @dropdown-padding;
-@dropdown-dropbar-padding-bottom:               @dropdown-dropbar-padding-top;
+@dropdown-dropbar-padding-bottom:               @dropdown-padding;
 @dropdown-dropbar-viewport-margin:              15px;
 @dropdown-dropbar-viewport-margin-s:            @global-gutter;
 @dropdown-dropbar-viewport-margin-m:            @global-medium-gutter;

package/src/less/theme/dropdown.less

@@ -10,6 +10,8 @@
 @dropdown-padding:                              25px;
 @dropdown-background:                           @global-background;
 
+@dropdown-dropbar-padding-top:                  5px;
+
 @dropdown-nav-subtitle-font-size:               12px;
 
 //

package/src/scss/components/dropdown.scss

@@ -26,7 +26,7 @@ $dropdown-color-mode:                            none !default;
 $dropdown-large-padding:                         40px !default;
 
 $dropdown-dropbar-padding-top:                   $dropdown-padding !default;
-$dropdown-dropbar-padding-bottom:                $dropdown-dropbar-padding-top !default;
+$dropdown-dropbar-padding-bottom:                $dropdown-padding !default;
 $dropdown-dropbar-viewport-margin:               15px !default;
 $dropdown-dropbar-viewport-margin-s:             $global-gutter !default;
 $dropdown-dropbar-viewport-margin-m:             $global-medium-gutter !default;

package/src/scss/theme/dropdown.scss

@@ -10,6 +10,8 @@
 $dropdown-padding:                               25px !default;
 $dropdown-background:                            $global-background !default;
 
+$dropdown-dropbar-padding-top:                   5px !default;
+
 $dropdown-nav-subtitle-font-size:                12px !default;
 
 //

package/src/scss/variables-theme.scss

@@ -389,8 +389,8 @@ $dropdown-background: $global-background !default;
 $dropdown-color: $global-color !default;
 $dropdown-color-mode: none !default;
 $dropdown-large-padding: 40px !default;
-$dropdown-dropbar-padding-top: $dropdown-padding !default;
-$dropdown-dropbar-padding-bottom: $dropdown-dropbar-padding-top !default;
+$dropdown-dropbar-padding-top: 5px !default;
+$dropdown-dropbar-padding-bottom: $dropdown-padding !default;
 $dropdown-dropbar-viewport-margin: 15px !default;
 $dropdown-dropbar-viewport-margin-s: $global-gutter !default;
 $dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;

package/src/scss/variables.scss

@@ -389,7 +389,7 @@ $dropdown-color: $global-color !default;
 $dropdown-color-mode: none !default;
 $dropdown-large-padding: 40px !default;
 $dropdown-dropbar-padding-top: $dropdown-padding !default;
-$dropdown-dropbar-padding-bottom: $dropdown-dropbar-padding-top !default;
+$dropdown-dropbar-padding-bottom: $dropdown-padding !default;
 $dropdown-dropbar-viewport-margin: 15px !default;
 $dropdown-dropbar-viewport-margin-s: $global-gutter !default;
 $dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;