@frankenstyle/uikit 0.0.1

package/src/js/mixin/i18n.js

@@ -0,0 +1,21 @@
+export default {
+    props: {
+        i18n: Object,
+    },
+
+    data: {
+        i18n: null,
+    },
+
+    methods: {
+        t(key, ...params) {
+            let i = 0;
+            return (
+                (this.i18n?.[key] || this.$options.i18n?.[key])?.replace(
+                    /%s/g,
+                    () => params[i++] || '',
+                ) || ''
+            );
+        },
+    },
+};

package/src/js/mixin/internal/animate-fade.js

@@ -0,0 +1,141 @@
+import {
+    addClass,
+    children,
+    css,
+    hasClass,
+    height,
+    isInView,
+    isVisible,
+    once,
+    removeClass,
+    resetProps,
+    toNumber,
+    Transition,
+} from 'uikit-util';
+import { getRows } from '../../core/margin';
+import { awaitTimeout } from '../../util/await';
+
+const clsLeave = 'uk-transition-leave';
+const clsEnter = 'uk-transition-enter';
+
+export default function fade(action, target, duration, stagger = 0) {
+    const index = transitionIndex(target, true);
+    const propsIn = { opacity: 1 };
+    const propsOut = { opacity: 0 };
+
+    const isCurrentIndex = () => index === transitionIndex(target);
+    const wrapIndexFn = (fn) => () => (isCurrentIndex() ? fn() : Promise.reject());
+
+    const leaveFn = wrapIndexFn(async () => {
+        addClass(target, clsLeave);
+
+        await (stagger
+            ? getTransitionNodes(target).reduce(async (promise, child, i, array) => {
+                  await promise;
+
+                  if (!isInView(child) || !isCurrentIndex()) {
+                      css(child, propsOut);
+                      return;
+                  }
+
+                  await awaitTimeout(stagger);
+
+                  const transition = Transition.start(child, propsOut, duration / 2, 'ease');
+                  if (array.length - 1 === i) {
+                      await transition;
+                  }
+              }, Promise.resolve())
+            : Transition.start(target, propsOut, duration / 2, 'ease'));
+
+        removeClass(target, clsLeave);
+    });
+
+    const enterFn = wrapIndexFn(async () => {
+        const oldHeight = height(target);
+
+        addClass(target, clsEnter);
+        action();
+
+        css(stagger ? children(target) : target, propsOut);
+
+        // Ensure UIkit updates have propagated (e.g. Grid needs to reset margin classes)
+        height(target, oldHeight);
+        await awaitTimeout();
+        height(target, '');
+
+        const newHeight = height(target);
+
+        // Ensure Grid cells do not stretch when height is applied
+        css(target, 'alignContent', 'flex-start');
+        height(target, oldHeight);
+
+        let transitions = [];
+        let targetDuration = duration / 2;
+        if (stagger) {
+            const nodes = getTransitionNodes(target);
+            css(children(target), propsOut);
+
+            transitions = nodes.reduce(async (promise, child, i, array) => {
+                await promise;
+
+                if (!isInView(child) || !isCurrentIndex()) {
+                    resetProps(child, propsIn);
+                    return;
+                }
+
+                await awaitTimeout(stagger);
+
+                const transition = Transition.start(child, propsIn, duration / 2, 'ease').then(
+                    () => isCurrentIndex() && resetProps(child, propsIn),
+                );
+                if (array.length - 1 === i) {
+                    await transition;
+                }
+            }, Promise.resolve());
+
+            targetDuration += nodes.length * stagger;
+        }
+
+        if (!stagger || oldHeight !== newHeight) {
+            const targetProps = { height: newHeight, ...(stagger ? {} : propsIn) };
+            transitions.push(Transition.start(target, targetProps, targetDuration, 'ease'));
+        }
+
+        await Promise.all(transitions);
+
+        removeClass(target, clsEnter);
+        if (isCurrentIndex()) {
+            resetProps(target, { height: '', alignContent: '', ...propsIn });
+            delete target.dataset.transition;
+        }
+    });
+
+    return hasClass(target, clsLeave)
+        ? waitTransitionend(target).then(enterFn)
+        : hasClass(target, clsEnter)
+          ? waitTransitionend(target).then(leaveFn).then(enterFn)
+          : leaveFn().then(enterFn);
+}
+
+function transitionIndex(target, next) {
+    if (next) {
+        target.dataset.transition = 1 + transitionIndex(target);
+    }
+
+    return toNumber(target.dataset.transition) || 0;
+}
+
+function waitTransitionend(target) {
+    return Promise.all(
+        children(target)
+            .filter(Transition.inProgress)
+            .map(
+                (el) =>
+                    new Promise((resolve) => once(el, 'transitionend transitioncanceled', resolve)),
+            ),
+    );
+}
+
+function getTransitionNodes(target) {
+    return getRows(children(target)).flat().filter(isVisible);
+}

package/src/js/mixin/internal/animate-slide.js

@@ -0,0 +1,163 @@
+import {
+    attr,
+    children,
+    clamp,
+    css,
+    dimensions,
+    includes,
+    index,
+    isInView,
+    isVisible,
+    offsetViewport,
+    parent,
+    position,
+    resetProps,
+    Transition,
+    trigger,
+} from 'uikit-util';
+import { awaitFrame } from '../../util/await';
+
+export default async function (action, target, duration) {
+    await awaitFrame();
+
+    let nodes = children(target);
+
+    // Get current state
+    const currentProps = nodes.map((el) => getProps(el, true));
+    const targetProps = { ...css(target, ['height', 'padding']), display: 'block' };
+
+    const transitionNodes = nodes.filter((node) => isInView(node));
+    const targets = nodes.concat(target);
+
+    // Cancel previous animations
+    await Promise.all(targets.map(Transition.cancel));
+
+    // Force transition to be canceled in Safari
+    css(targets, 'transitionProperty', 'none');
+
+    // Adding, sorting, removing nodes
+    await action();
+
+    // Find new nodes
+
+    const newNodes = children(target).filter((el) => !includes(nodes, el));
+
+    nodes = nodes.concat(newNodes);
+
+    // Wait for update to propagate
+    await Promise.resolve();
+
+    // Reset the forced transition property
+    css(targets, 'transitionProperty', '');
+
+    // Get new state
+    const targetStyle = attr(target, 'style');
+    const targetPropsTo = css(target, ['height', 'padding']);
+    const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
+    const attrsTo = nodes.map((el) => ({ style: attr(el, 'style') }));
+
+    transitionNodes.push(...nodes.filter((node) => isInView(node)));
+
+    // Reset to previous state
+    nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
+    css(target, targetProps);
+
+    // Trigger update in e.g. parallax component
+    trigger(target, 'scroll');
+
+    // Start transitions on next frame
+    await awaitFrame();
+
+    const transitions = nodes
+        .map((el, i) => {
+            if (parent(el) === target && transitionNodes.includes(el)) {
+                return Transition.start(el, propsTo[i], duration, 'ease', !newNodes.includes(el));
+            }
+        })
+        .concat(Transition.start(target, targetPropsTo, duration, 'ease', true));
+
+    try {
+        await Promise.all(transitions);
+        nodes.forEach((el, i) => {
+            attr(el, attrsTo[i]);
+            if (parent(el) === target) {
+                css(el, 'display', propsTo[i].opacity === 0 ? 'none' : '');
+            }
+        });
+        attr(target, 'style', targetStyle);
+    } catch {
+        attr(nodes, 'style', '');
+        resetProps(target, targetProps);
+    }
+}
+
+function getProps(el, opacity) {
+    const zIndex = css(el, 'zIndex');
+
+    return isVisible(el)
+        ? {
+              display: '',
+              opacity: opacity ? css(el, 'opacity') : '0',
+              pointerEvents: 'none',
+              position: 'absolute',
+              zIndex: zIndex === 'auto' ? index(el) : zIndex,
+              ...getPositionWithMargin(el),
+          }
+        : false;
+}
+
+function getTransitionProps(target, nodes, currentProps) {
+    const propsTo = nodes.map((el, i) =>
+        parent(el) && i in currentProps
+            ? currentProps[i]
+                ? isVisible(el)
+                    ? getPositionWithMargin(el)
+                    : { opacity: 0 }
+                : { opacity: isVisible(el) ? 1 : 0 }
+            : false,
+    );
+
+    const propsFrom = propsTo.map((props, i) => {
+        const from = parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
+
+        if (!from) {
+            return false;
+        }
+
+        if (!props) {
+            delete from.opacity;
+        } else if (!('opacity' in props)) {
+            const { opacity } = from;
+
+            if (opacity % 1) {
+                props.opacity = 1;
+            } else {
+                delete from.opacity;
+            }
+        }
+
+        return from;
+    });
+
+    return [propsTo, propsFrom];
+}
+
+function getPositionWithMargin(el) {
+    const { height, width } = dimensions(el);
+
+    let { top, left } = position(el);
+
+    const viewport = offsetViewport(el.ownerDocument);
+
+    top = clamp(top, viewport.top - height - viewport.height, viewport.bottom + viewport.height);
+    left = clamp(left, viewport.left - width - viewport.width, viewport.right + viewport.width);
+
+    return {
+        height,
+        width,
+        top,
+        left,
+        transform: '',
+        ...css(el, ['marginTop', 'marginLeft']),
+    };
+}

package/src/js/mixin/internal/slideshow-animations.js

@@ -0,0 +1,28 @@
+import { css } from 'uikit-util';
+
+export default {
+    slide: {
+        show(dir) {
+            return [{ transform: translate(dir * -100) }, { transform: translate() }];
+        },
+
+        percent(current) {
+            return translated(current);
+        },
+
+        translate(percent, dir) {
+            return [
+                { transform: translate(dir * -100 * percent) },
+                { transform: translate(dir * 100 * (1 - percent)) },
+            ];
+        },
+    },
+};
+
+export function translated(el) {
+    return Math.abs(new DOMMatrix(css(el, 'transform')).m41 / el.offsetWidth);
+}
+
+export function translate(value = 0, unit = '%') {
+    return value ? `translate3d(${value + unit}, 0, 0)` : '';
+}

package/src/js/mixin/internal/slideshow-transitioner.js

@@ -0,0 +1,73 @@
+import { clamp, createEvent, css, noop, resetProps, Transition, trigger } from 'uikit-util';
+
+export default function Transitioner(prev, next, dir, { animation, easing }) {
+    const { percent, translate, show = noop } = animation;
+    const props = show(dir);
+
+    const { promise, resolve } = withResolvers();
+
+    return {
+        dir,
+
+        show(duration, percent = 0, linear) {
+            const timing = linear ? 'linear' : easing;
+            duration -= Math.round(duration * clamp(percent, -1, 1));
+
+            this.translate(percent);
+
+            triggerUpdate(next, 'itemin', { percent, duration, timing, dir });
+            triggerUpdate(prev, 'itemout', { percent: 1 - percent, duration, timing, dir });
+
+            Promise.all([
+                Transition.start(next, props[1], duration, timing),
+                Transition.start(prev, props[0], duration, timing),
+            ]).then(() => {
+                this.reset();
+                resolve();
+            }, noop);
+
+            return promise;
+        },
+
+        cancel() {
+            return Transition.cancel([next, prev]);
+        },
+
+        reset() {
+            resetProps([next, prev], props[0]);
+        },
+
+        async forward(duration, percent = this.percent()) {
+            await this.cancel();
+            return this.show(duration, percent, true);
+        },
+
+        translate(percent) {
+            this.reset();
+
+            const props = translate(percent, dir);
+            css(next, props[1]);
+            css(prev, props[0]);
+            triggerUpdate(next, 'itemtranslatein', { percent, dir });
+            triggerUpdate(prev, 'itemtranslateout', { percent: 1 - percent, dir });
+        },
+
+        percent() {
+            return percent(prev || next, next, dir);
+        },
+
+        getDistance() {
+            return prev?.offsetWidth;
+        },
+    };
+}
+
+export function triggerUpdate(el, type, data) {
+    trigger(el, createEvent(type, false, false, data));
+}
+
+// Use Promise.withResolvers() once it becomes baseline
+export function withResolvers() {
+    let resolve;
+    return { promise: new Promise((res) => (resolve = res)), resolve };
+}

package/src/js/mixin/media.js

@@ -0,0 +1,53 @@
+import {
+    createEvent,
+    css,
+    isNumeric,
+    isString,
+    on,
+    startsWith,
+    toFloat,
+    trigger,
+} from 'uikit-util';
+
+export default {
+    props: {
+        media: Boolean,
+    },
+
+    data: {
+        media: false,
+    },
+
+    connected() {
+        const media = toMedia(this.media, this.$el);
+        this.matchMedia = true;
+        if (media) {
+            this.mediaObj = window.matchMedia(media);
+            const handler = () => {
+                this.matchMedia = this.mediaObj.matches;
+                trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+            };
+            this.offMediaObj = on(this.mediaObj, 'change', () => {
+                handler();
+                this.$emit('resize');
+            });
+            handler();
+        }
+    },
+
+    disconnected() {
+        this.offMediaObj?.();
+    },
+};
+
+function toMedia(value, element) {
+    if (isString(value)) {
+        if (startsWith(value, '@')) {
+            value = toFloat(css(element, `--uk-breakpoint-${value.slice(1)}`));
+        } else if (isNaN(value)) {
+            return value;
+        }
+    }
+
+    return value && isNumeric(value) ? `(min-width: ${value}px)` : '';
+}