@frankenstyle/uikit 0.0.1 → 0.0.3

package/package.json

@@ -2,7 +2,7 @@
     "name": "@frankenstyle/uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -31,35 +31,34 @@
         "url": "https://github.com/uikit/uikit/issues"
     },
     "homepage": "https://getuikit.com",
-    "packageManager": "pnpm@10.18.0",
+    "packageManager": "pnpm@10.27.0",
     "devDependencies": {
-        "@eslint/js": "^9.19.0",
-        "@rollup/plugin-alias": "^5.1.0",
-        "@rollup/plugin-replace": "^6.0.1",
+        "@eslint/js": "^9.39.2",
+        "@rollup/plugin-alias": "^6.0.0",
+        "@rollup/plugin-replace": "^6.0.3",
         "archiver": "^7.0.1",
-        "camelcase": "^8.0.0",
+        "camelcase": "^9.0.0",
         "chokidar-cli": "^3.0.0",
         "clean-css": "^5.3.3",
-        "dateformat": "^5.0.3",
-        "esbuild": "^0.25.0",
-        "eslint": "^9.19.0",
-        "eslint-config-prettier": "^10.0.1",
-        "execa": "^9.3.0",
-        "fs-extra": "^11.3.0",
-        "glob": "^11.0.1",
-        "globals": "^16.0.0",
-        "inquirer": "^12.4.1",
-        "less": "^4.2.2",
+        "date-fns": "^4.1.0",
+        "esbuild": "^0.27.2",
+        "eslint": "^9.39.2",
+        "eslint-config-prettier": "^10.1.8",
+        "execa": "^9.6.1",
+        "fs-extra": "^11.3.2",
+        "glob": "^13.0.0",
+        "globals": "^17.0.0",
+        "inquirer": "^13.1.0",
+        "less": "^4.5.1",
         "minimist": "^1.2.8",
         "number-precision": "^1.6.0",
-        "p-limit": "^7.1.0",
-        "prettier": "^3.2.5",
-        "prettier-plugin-organize-imports": "^4.0.0",
-        "rollup": "^4.34.2",
-        "rollup-plugin-esbuild": "^6.1.1",
-        "rollup-plugin-modify": "^3.0.0",
-        "rtlcss": "^4.1.1",
-        "semver": "^7.7.1",
+        "p-limit": "^7.2.0",
+        "prettier": "^3.7.4",
+        "prettier-plugin-organize-imports": "^4.3.0",
+        "rollup": "^4.53.5",
+        "rollup-plugin-esbuild": "^6.2.1",
+        "rtlcss": "^4.3.0",
+        "semver": "^7.7.3",
         "strip-css-comments": "^5.0.0",
         "svgo": "^4.0.0"
     }

package/src/images/components/accordion-icon.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
+    <style>
+
+        .uk-accordion-icon svg > [class*='line-'] {
+            transition: 0.2s ease-out;
+            transition-property: transform, opacity;
+            transform-origin: center;
+        }
+
+        [aria-expanded="true"] .uk-accordion-icon svg > .line-1 {
+            transform: rotate(-45deg);
+            opacity: 0;
+        }
+        
+        [aria-expanded="true"] .uk-accordion-icon svg > .line-2 { transform: rotate(90deg); }
+
+    </style>
+    <rect class="line-1" fill="#000" width="13" height="1" x="0" y="6" />
+    <rect class="line-2" fill="#000" width="1" height="13" x="6" y="0" />
+</svg>

package/src/js/components/internal/slider-transitioner.js

@@ -160,7 +160,7 @@ export function getWidth(list, index) {
 }
 
 function centerEl(el, list) {
-    return dimensions(list).width / 2 - dimensions(el).width / 2;
+    return (dimensions(list).width - dimensions(el).width) / 2;
 }
 
 function getElLeft(el, list) {

package/src/js/components/slider.js

@@ -98,7 +98,7 @@ export default {
                             width / 2
                     ) {
                         sets.push(i);
-                        left = width / 2 - slideWidth / 2;
+                        left = (width - slideWidth) / 2;
                     }
                 } else if (left === 0) {
                     sets.push(Math.min(i, this.maxIndex));
@@ -228,7 +228,7 @@ export default {
             }
 
             const next = this.slides[index];
-            let width = dimensions(this.list).width / 2 - dimensions(next).width / 2;
+            let width = (dimensions(this.list).width - dimensions(next).width) / 2;
             let j = 0;
 
             while (width > 0) {
@@ -290,7 +290,7 @@ export default {
             const left = -width;
             const right = width * 2;
             const slideWidth = dimensions(this.slides[this.index]).width;
-            const slideLeft = this.center ? width / 2 - slideWidth / 2 : 0;
+            const slideLeft = this.center ? (width - slideWidth) / 2 : 0;
             const slides = new Set();
             for (const i of [-1, 1]) {
                 let currentLeft = slideLeft + (i > 0 ? slideWidth : 0);
@@ -308,7 +308,7 @@ export default {
             let index = -1;
             const scrollDist = this.center
                 ? getWidth(this.list) -
-                  (dimensions(this.slides[0]).width / 2 + dimensions(last(this.slides)).width / 2)
+                  (dimensions(this.slides[0]).width + dimensions(last(this.slides)).width) / 2
                 : getWidth(this.list, this.maxIndex);
 
             let dist = percent * scrollDist;
@@ -317,7 +317,7 @@ export default {
             do {
                 const slideWidth = dimensions(this.slides[++index]).width;
                 const slideDist = this.center
-                    ? slideWidth / 2 + dimensions(this.slides[index + 1]).width / 2
+                    ? (slideWidth + dimensions(this.slides[index + 1]).width) / 2
                     : slideWidth;
                 slidePercent = (dist / slideDist) % 1;
                 dist -= slideDist;
@@ -363,8 +363,7 @@ function isFinite(list, center) {
             }
             diff = Math.max(
                 diff,
-                slideWidth / 2 +
-                    dimensions(slides[getIndex(+index + i, slides)]).width / 2 -
+                (slideWidth + dimensions(slides[getIndex(+index + i, slides)]).width) / 2 -
                     (left - listHalf),
             );
         }

package/src/js/components/sortable.js

@@ -142,8 +142,7 @@ export default {
                 sortable.target,
                 target,
                 placeholder,
-                x,
-                y,
+                { x, y },
                 sortable === previous && data.moved !== target,
             );
 
@@ -365,7 +364,7 @@ function findTarget(items, point) {
     return items[findIndex(items, (item) => pointInRect(point, dimensions(item)))];
 }
 
-function findInsertTarget(list, target, placeholder, x, y, sameList) {
+function findInsertTarget(list, target, placeholder, point, sameList) {
     if (!children(list).length) {
         return;
     }
@@ -373,7 +372,7 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
     const rect = dimensions(target);
     if (!sameList) {
         if (!isHorizontal(list, placeholder)) {
-            return y < rect.top + rect.height / 2 ? target : target.nextElementSibling;
+            return point.y < rect.top + rect.height / 2 ? target : target.nextElementSibling;
         }
 
         return target;
@@ -386,8 +385,8 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
     );
 
     const [pointerPos, lengthProp, startProp, endProp] = sameRow
-        ? [x, 'width', 'left', 'right']
-        : [y, 'height', 'top', 'bottom'];
+        ? [point.x, 'width', 'left', 'right']
+        : [point.y, 'height', 'top', 'bottom'];
 
     const diff =
         placeholderRect[lengthProp] < rect[lengthProp]

package/src/js/core/accordion.js

@@ -47,8 +47,8 @@ export default {
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
-        toggle: '> .uk-accordion-title',
-        content: '> .uk-accordion-content',
+        toggle: '.uk-accordion-title',
+        content: '.uk-accordion-content',
         offset: 0,
     },
 
@@ -104,21 +104,25 @@ export default {
 
             delegate: ({ targets, $props }) => `${targets} ${$props.toggle}`,
 
-            async handler(e) {
+            handler(e) {
                 if (e.type === 'keydown' && e.keyCode !== keyMap.SPACE) {
                     return;
                 }
 
+                const item = index(this.toggles, e.current);
+
+                if (item === -1) {
+                    return;
+                }
+
                 maybeDefaultPreventClick(e);
 
-                this._off?.();
-                this._off = keepScrollPosition(e.target);
-                await this.toggle(index(this.toggles, e.current));
-                this._off();
+                const off = keepScrollPosition(e.target);
+                this.toggle(item).finally(off);
             },
         },
         {
-            name: 'shown hidden',
+            name: 'show hide shown hidden',
 
             self: true,
 
@@ -170,7 +174,7 @@ export default {
             }
 
             if (!this.collapsible && activeItems.length < 2 && includes(activeItems, item)) {
-                return;
+                items = [];
             }
 
             return Promise.all(
@@ -214,7 +218,7 @@ async function transition(el, show, { content, duration, velocity, transition })
         dimensions(content).height;
 
     const percent = currentHeight / endHeight;
-    duration = (velocity * endHeight + duration) * (show ? 1 - percent : percent);
+    duration = endHeight ? (velocity * endHeight + duration) * (show ? 1 - percent : percent) : 0;
     css(wrapper, 'height', currentHeight);
 
     await Transition.start(wrapper, { height: show ? endHeight : 0 }, duration, transition);

package/src/js/core/drop.js

@@ -338,6 +338,9 @@ export default {
                 append(this.container, this.$el);
             }
 
+            // Mark enter early so isToggled() detects show when using delayShow
+            addClass(this.$el, this.clsEnter);
+
             this.showTimer = setTimeout(
                 () => this.toggleElement(this.$el, true),
                 (delay && this.delayShow) || 0,
@@ -345,7 +348,11 @@ export default {
         },
 
         hide(delay = true, animate = true) {
-            const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
+            const hide = () => {
+                // Ensure enter class is removed if show is canceled early
+                removeClass(this.$el, this.clsEnter);
+                this.toggleElement(this.$el, false, this.animateOut && animate);
+            };
 
             this.clearTimers();
 

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

@@ -14,8 +14,11 @@ import {
     toFloat,
 } from 'uikit-util';
 import { resize, viewport } from '../api/observables';
+import Media from '../mixin/media';
 
 export default {
+    mixins: [Media],
+
     props: {
         expand: Boolean,
         offsetTop: Boolean,
@@ -44,6 +47,10 @@ export default {
                 return false;
             }
 
+            if (!this.matchMedia) {
+                return { minHeight: false };
+            }
+
             let minHeight = '';
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
@@ -90,7 +97,11 @@ export default {
         },
 
         write({ minHeight }) {
-            css(this.$el, this.property, `max(${this.min || 0}px, ${minHeight})`);
+            css(
+                this.$el,
+                this.property,
+                minHeight === false ? '' : `max(${this.min || 0}px, ${minHeight})`,
+            );
         },
 
         events: ['resize'],

package/src/js/core/icon.js

@@ -13,6 +13,7 @@ import {
     isTag,
     swap,
 } from 'uikit-util';
+import accordionIcon from '../../images/components/accordion-icon.svg';
 import closeIcon from '../../images/components/close-icon.svg';
 import closeLarge from '../../images/components/close-large.svg';
 import dropParentIcon from '../../images/components/drop-parent-icon.svg';
@@ -31,15 +32,16 @@ import slidenavNextLarge from '../../images/components/slidenav-next-large.svg';
 import slidenavNext from '../../images/components/slidenav-next.svg';
 import slidenavPreviousLarge from '../../images/components/slidenav-previous-large.svg';
 import slidenavPrevious from '../../images/components/slidenav-previous.svg';
-import spinner from '../../images/components/spinner.svg';
 import totop from '../../images/components/totop.svg';
 import I18n from '../mixin/i18n';
 import Svg, { parseSVG } from '../mixin/svg';
 
 const icons = {
-    spinner,
+    spinner:
+        '<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><circle fill="none" stroke="#000" cx="15" cy="15" r="14" /></svg>',
     totop,
     marker,
+    'accordion-icon': accordionIcon,
     'close-icon': closeIcon,
     'close-large': closeLarge,
     'drop-parent-icon': dropParentIcon,

package/src/js/core/index.js

@@ -32,6 +32,7 @@ export { default as Video } from './video';
 
 // Icon components
 export {
+    IconComponent as AccordionIcon,
     Close,
     IconComponent as DropParentIcon,
     Marker,

package/src/js/core/modal.js

@@ -96,7 +96,7 @@ function install({ modal }) {
                 isString(message) ? message : html(message)
             }</div>
             <div class="uk-modal-footer uk-text-right">
-                <button class="uk-btn uk-btn-primary uk-modal-close" type="button" autofocus>${
+                <button class="uk-button uk-button-primary uk-modal-close" type="button" autofocus>${
                     i18n.ok
                 }</button>
             </div>`,
@@ -109,10 +109,10 @@ function install({ modal }) {
             ({ i18n }) => `<form>
                 <div class="uk-modal-body">${isString(message) ? message : html(message)}</div>
                 <div class="uk-modal-footer uk-text-right">
-                    <button class="uk-btn uk-btn-default uk-modal-close" type="button">${
+                    <button class="uk-button uk-button-default uk-modal-close" type="button">${
                         i18n.cancel
                     }</button>
-                    <button class="uk-btn uk-btn-primary" autofocus>${i18n.ok}</button>
+                    <button class="uk-button uk-button-primary" autofocus>${i18n.ok}</button>
                 </div>
             </form>`,
             options,
@@ -128,10 +128,10 @@ function install({ modal }) {
                     <input class="uk-input" autofocus>
                 </div>
                 <div class="uk-modal-footer uk-text-right">
-                    <button class="uk-btn uk-btn-default uk-modal-close" type="button">${
+                    <button class="uk-button uk-button-default uk-modal-close" type="button">${
                         i18n.cancel
                     }</button>
-                    <button class="uk-btn uk-btn-primary">${i18n.ok}</button>
+                    <button class="uk-button uk-button-primary">${i18n.ok}</button>
                 </div>
             </form>`,
             options,

package/src/js/core/overflow-fade.js

@@ -1,22 +1,45 @@
-import { children, clamp, css, toggleClass } from 'uikit-util';
+import {
+    children,
+    clamp,
+    css,
+    getEventPos,
+    hasClass,
+    isInput,
+    isTouch,
+    on,
+    pointerCancel,
+    pointerDown,
+    pointerMove,
+    pointerUp,
+    selInput,
+    toggleClass,
+} from 'uikit-util';
 import { mutation, resize } from '../api/observables';
 
 export default {
     data: {
+        threshold: 5,
         fadeDuration: 0.05,
     },
 
-    events: {
-        name: 'scroll',
+    events: [
+        {
+            name: 'scroll',
 
-        self: true,
+            self: true,
 
-        passive: true,
+            passive: true,
 
-        handler() {
-            this.$emit();
+            handler() {
+                this.$emit();
+            },
         },
-    },
+        {
+            name: pointerDown,
+
+            handler: handleMouseDrag,
+        },
+    ],
 
     observe: [
         mutation({
@@ -65,3 +88,55 @@ export default {
         events: ['resize'],
     },
 };
+
+function handleMouseDrag(e) {
+    const { target, button, defaultPrevented } = e;
+
+    if (
+        defaultPrevented ||
+        button > 0 ||
+        isTouch(e) ||
+        target.closest(selInput) ||
+        isInput(target)
+    ) {
+        return;
+    }
+
+    e.preventDefault();
+
+    const pointerOptions = { passive: false, capture: true };
+    const { $el: el, threshold, $options } = this;
+    let started;
+
+    const off = on(document, pointerMove, move(e), pointerOptions);
+    on(document, [pointerUp, pointerCancel], end, { capture: true, once: true });
+
+    function move(e) {
+        let origin = getEventPos(e);
+        let pos = origin;
+        let lastPos = pos;
+
+        return function (e) {
+            lastPos = pos;
+            pos = getEventPos(e);
+
+            const isVertical = hasClass(el, `${$options.id}-vertical`);
+            const prop = isVertical ? 'y' : 'x';
+
+            started ||= Math.abs(pos[prop] - origin[prop]) > threshold;
+
+            if (started) {
+                const delta = lastPos[prop] - pos[prop];
+                el[isVertical ? 'scrollTop' : 'scrollLeft'] += delta;
+            }
+        };
+    }
+
+    function end() {
+        off();
+
+        if (started) {
+            setTimeout(on(el, 'click', (e) => e.preventDefault(), pointerOptions));
+        }
+    }
+}

package/src/js/mixin/slider-drag.js

@@ -2,6 +2,7 @@ import {
     css,
     getEventPos,
     includes,
+    isEqual,
     isRtl,
     isTouch,
     noop,
@@ -13,7 +14,6 @@ import {
 } from 'uikit-util';
 
 const pointerOptions = { passive: false, capture: true };
-const pointerUpOptions = { passive: true, capture: true };
 const pointerDown = 'touchstart mousedown';
 const pointerMove = 'touchmove mousemove';
 const pointerUp = 'touchend touchcancel mouseup click input scroll';
@@ -26,15 +26,20 @@ export default {
     data: {
         draggable: true,
         threshold: 10,
+        angleThreshold: 45,
     },
 
     created() {
         for (const key of ['start', 'move', 'end']) {
             const fn = this[key];
             this[key] = (e) => {
-                const pos = getEventPos(e).x * (isRtl ? -1 : 1);
+                const pos = getEventPos(e);
 
-                this.prevPos = pos === this.pos ? this.prevPos : this.pos;
+                if (isRtl) {
+                    pos.x = -pos.x;
+                }
+
+                this.prevPos = isEqual(pos, this.pos) ? this.prevPos : this.pos;
                 this.pos = pos;
 
                 fn(e);
@@ -89,7 +94,7 @@ export default {
 
             if (this._transitioner) {
                 this.percent = this._transitioner.percent();
-                this.drag += this._transitioner.getDistance() * this.percent * this.dir;
+                this.drag.x += this._transitioner.getDistance() * this.percent * this.dir;
 
                 this._transitioner.cancel();
                 this._transitioner.translate(this.percent);
@@ -104,17 +109,17 @@ export default {
             on(document, pointerMove, this.move, pointerOptions);
 
             // 'input' event is triggered by video controls
-            on(document, pointerUp, this.end, pointerUpOptions);
+            on(document, pointerUp, this.end, { passive: true, capture: true, once: true });
 
             css(this.list, 'userSelect', 'none');
         },
 
         move(e) {
-            const distance = this.pos - this.drag;
-
+            const distance = this.pos.x - this.drag.x;
             if (
                 distance === 0 ||
-                this.prevPos === this.pos ||
+                (!this.dragging && getAngle(this.pos, this.drag) > this.angleThreshold) ||
+                this.prevPos.x === this.pos.x ||
                 (!this.dragging && Math.abs(distance) < this.threshold)
             ) {
                 return;
@@ -131,7 +136,7 @@ export default {
             let width = getDistance.call(this, prevIndex, nextIndex);
 
             while (nextIndex !== prevIndex && dis > width) {
-                this.drag -= width * this.dir;
+                this.drag.x -= width * this.dir;
 
                 prevIndex = nextIndex;
                 dis -= width;
@@ -181,7 +186,6 @@ export default {
 
         end() {
             off(document, pointerMove, this.move, pointerOptions);
-            off(document, pointerUp, this.end, pointerUpOptions);
 
             if (this.dragging) {
                 setTimeout(on(this.list, 'click', (e) => e.preventDefault(), pointerOptions));
@@ -194,15 +198,14 @@ export default {
                     this._show(false, this.index, true);
                     this._transitioner = null;
                 } else {
-                    const dirChange =
-                        (isRtl ? this.dir * (isRtl ? 1 : -1) : this.dir) < 0 ===
-                        this.prevPos > this.pos;
-                    this.index = dirChange ? this.index : this.prevIndex;
+                    const dirChange = this.dir < 0 === this.prevPos.x > this.pos.x;
 
                     if (dirChange) {
                         trigger(this.slides[this.prevIndex], 'itemhidden', [this]);
                         trigger(this.slides[this.index], 'itemshown', [this]);
                         this.percent = 1 - this.percent;
+                    } else {
+                        this.index = this.prevIndex;
                     }
 
                     this.show(
@@ -234,3 +237,7 @@ function hasSelectableText(el) {
         toArray(el.childNodes).some((el) => el.nodeType === 3 && el.textContent.trim())
     );
 }
+
+function getAngle(pos1, pos2) {
+    return (Math.atan2(Math.abs(pos2.y - pos1.y), Math.abs(pos2.x - pos1.x)) * 180) / Math.PI;
+}

package/src/js/mixin/slider-nav.js

@@ -24,7 +24,6 @@ export default {
         previous: 'Previous slide',
         slideX: 'Slide %s',
         slideLabel: '%s of %s',
-        role: 'String',
     },
 
     data: {
@@ -33,10 +32,10 @@ export default {
     },
 
     computed: {
-        nav: ({ selNav }, $el) => $(selNav, $el),
+        nav: ({ selNav }, $el) => $$(selNav, $el),
 
         navChildren() {
-            return children(this.nav);
+            return this.nav.map((nav) => children(nav)).flat();
         },
 
         selNavItem: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
@@ -109,9 +108,9 @@ export default {
         slides(slides) {
             slides.forEach((slide, i) =>
                 attr(slide, {
-                    role: this.nav ? 'tabpanel' : 'group',
+                    role: this.nav.length ? 'tabpanel' : 'group',
                     'aria-label': this.t('slideLabel', i + 1, this.length),
-                    'aria-roledescription': this.nav ? null : 'slide',
+                    'aria-roledescription': this.nav.length ? null : 'slide',
                 }),
             );
 
@@ -229,19 +228,18 @@ export default {
         },
 
         padNavitems() {
-            if (!this.nav) {
-                return;
-            }
-
-            const children = [];
-            for (let i = 0; i < this.length; i++) {
-                const attr = `${this.attrItem}="${i}"`;
-                children[i] =
-                    this.navChildren.findLast((el) => el.matches(`[${attr}]`)) ||
-                    $(`<li ${attr}><a href></a></li>`);
-            }
-            if (!isEqual(children, this.navChildren)) {
-                html(this.nav, children);
+            for (const nav of this.nav) {
+                const navChildren = children(nav);
+                const navItems = [];
+                for (let i = 0; i < this.length; i++) {
+                    const attr = `${this.attrItem}="${i}"`;
+                    navItems[i] =
+                        navChildren.findLast((el) => el.matches(`[${attr}]`)) ||
+                        $(`<li ${attr}><a href></a></li>`);
+                }
+                if (!isEqual(navItems, navChildren)) {
+                    html(this.nav, navItems);
+                }
             }
         },
     },