@frankenstyle/uikit 0.0.1

package/src/js/components/upload.js

@@ -0,0 +1,248 @@
+import { addClass, assign, matches, noop, on, removeClass, toArray, trigger } from 'uikit-util';
+import I18n from '../mixin/i18n';
+
+export default {
+    mixins: [I18n],
+
+    i18n: {
+        invalidMime: 'Invalid File Type: %s',
+        invalidName: 'Invalid File Name: %s',
+        invalidSize: 'Invalid File Size: %s Kilobytes Max',
+    },
+
+    props: {
+        allow: String,
+        clsDragover: String,
+        concurrent: Number,
+        maxSize: Number,
+        method: String,
+        mime: String,
+        multiple: Boolean,
+        name: String,
+        params: Object,
+        type: String,
+        url: String,
+    },
+
+    data: {
+        allow: false,
+        clsDragover: 'uk-dragover',
+        concurrent: 1,
+        maxSize: 0,
+        method: 'POST',
+        mime: false,
+        multiple: false,
+        name: 'files[]',
+        params: {},
+        type: '',
+        url: '',
+        abort: noop,
+        beforeAll: noop,
+        beforeSend: noop,
+        complete: noop,
+        completeAll: noop,
+        error: noop,
+        fail: noop,
+        load: noop,
+        loadEnd: noop,
+        loadStart: noop,
+        progress: noop,
+    },
+
+    events: {
+        change(e) {
+            if (!matches(e.target, 'input[type="file"]')) {
+                return;
+            }
+
+            e.preventDefault();
+
+            if (e.target.files) {
+                this.upload(e.target.files);
+            }
+
+            e.target.value = '';
+        },
+
+        drop(e) {
+            stop(e);
+
+            const transfer = e.dataTransfer;
+
+            if (!transfer?.files) {
+                return;
+            }
+
+            removeClass(this.$el, this.clsDragover);
+
+            this.upload(transfer.files);
+        },
+
+        dragenter(e) {
+            stop(e);
+        },
+
+        dragover(e) {
+            stop(e);
+            addClass(this.$el, this.clsDragover);
+        },
+
+        dragleave(e) {
+            stop(e);
+            removeClass(this.$el, this.clsDragover);
+        },
+    },
+
+    methods: {
+        async upload(files) {
+            files = toArray(files);
+
+            if (!files.length) {
+                return;
+            }
+
+            trigger(this.$el, 'upload', [files]);
+
+            for (const file of files) {
+                if (this.maxSize && this.maxSize * 1000 < file.size) {
+                    this.fail(this.t('invalidSize', this.maxSize));
+                    return;
+                }
+
+                if (this.allow && !match(this.allow, file.name)) {
+                    this.fail(this.t('invalidName', this.allow));
+                    return;
+                }
+
+                if (this.mime && !match(this.mime, file.type)) {
+                    this.fail(this.t('invalidMime', this.mime));
+                    return;
+                }
+            }
+
+            if (!this.multiple) {
+                files = files.slice(0, 1);
+            }
+
+            this.beforeAll(this, files);
+
+            const chunks = chunk(files, this.concurrent);
+            const upload = async (files) => {
+                const data = new FormData();
+
+                files.forEach((file) => data.append(this.name, file));
+
+                for (const key in this.params) {
+                    data.append(key, this.params[key]);
+                }
+
+                try {
+                    const xhr = await ajax(this.url, {
+                        data,
+                        method: this.method,
+                        responseType: this.type,
+                        beforeSend: (env) => {
+                            const { xhr } = env;
+                            on(xhr.upload, 'progress', this.progress);
+                            for (const type of ['loadStart', 'load', 'loadEnd', 'abort']) {
+                                on(xhr, type.toLowerCase(), this[type]);
+                            }
+
+                            return this.beforeSend(env);
+                        },
+                    });
+
+                    this.complete(xhr);
+
+                    if (chunks.length) {
+                        await upload(chunks.shift());
+                    } else {
+                        this.completeAll(xhr);
+                    }
+                } catch (e) {
+                    this.error(e);
+                }
+            };
+
+            await upload(chunks.shift());
+        },
+    },
+};
+
+function match(pattern, path) {
+    return path.match(
+        new RegExp(
+            `^${pattern
+                .replace(/\//g, '\\/')
+                .replace(/\*\*/g, '(\\/[^\\/]+)*')
+                .replace(/\*/g, '[^\\/]+')
+                .replace(/((?!\\))\?/g, '$1.')}$`,
+            'i',
+        ),
+    );
+}
+
+function chunk(files, size) {
+    const chunks = [];
+    for (let i = 0; i < files.length; i += size) {
+        chunks.push(files.slice(i, i + size));
+    }
+    return chunks;
+}
+
+function stop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+export async function ajax(url, options) {
+    const env = {
+        data: null,
+        method: 'GET',
+        headers: {},
+        xhr: new XMLHttpRequest(),
+        beforeSend: noop,
+        responseType: '',
+        ...options,
+    };
+    await env.beforeSend(env);
+    return send(url, env);
+}
+
+function send(url, env) {
+    return new Promise((resolve, reject) => {
+        const { xhr } = env;
+
+        for (const prop in env) {
+            if (prop in xhr) {
+                try {
+                    xhr[prop] = env[prop];
+                } catch {}
+            }
+        }
+
+        xhr.open(env.method.toUpperCase(), url);
+
+        for (const header in env.headers) {
+            xhr.setRequestHeader(header, env.headers[header]);
+        }
+
+        on(xhr, 'load', () => {
+            if (xhr.status === 0 || (xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
+                resolve(xhr);
+            } else {
+                reject(
+                    assign(Error(xhr.statusText), {
+                        xhr,
+                        status: xhr.status,
+                    }),
+                );
+            }
+        });
+
+        on(xhr, 'error', () => reject(assign(Error('Network Error'), { xhr })));
+        on(xhr, 'timeout', () => reject(assign(Error('Network Timeout'), { xhr })));
+
+        xhr.send(env.data);
+    });
+}

package/src/js/core/accordion.js

@@ -0,0 +1,244 @@
+import {
+    $,
+    $$,
+    attr,
+    children,
+    css,
+    dimensions,
+    filter,
+    getIndex,
+    hasClass,
+    includes,
+    index,
+    isTag,
+    scrollParent,
+    sumBy,
+    toFloat,
+    toggleClass,
+    Transition,
+    unwrap,
+    wrapAll,
+} from 'uikit-util';
+import { generateId } from '../api/instance';
+import { lazyload } from '../api/observables';
+import Class from '../mixin/class';
+import { maybeDefaultPreventClick } from '../mixin/event';
+import Togglable from '../mixin/togglable';
+import { keyMap } from '../util/keys';
+
+export default {
+    mixins: [Class, Togglable],
+
+    props: {
+        animation: Boolean,
+        targets: String,
+        active: null,
+        collapsible: Boolean,
+        multiple: Boolean,
+        toggle: String,
+        content: String,
+        offset: Number,
+    },
+
+    data: {
+        targets: '> *',
+        active: false,
+        animation: true,
+        collapsible: true,
+        multiple: false,
+        clsOpen: 'uk-open',
+        toggle: '> .uk-accordion-title',
+        content: '> .uk-accordion-content',
+        offset: 0,
+    },
+
+    computed: {
+        items: ({ targets }, $el) => $$(targets, $el),
+
+        toggles({ toggle }) {
+            return this.items.map((item) => $(toggle, item));
+        },
+
+        contents({ content }) {
+            return this.items.map((item) => item._wrapper?.firstElementChild || $(content, item));
+        },
+    },
+
+    watch: {
+        items(items, prev) {
+            if (prev || hasClass(items, this.clsOpen)) {
+                return;
+            }
+
+            const active =
+                (this.active !== false && items[Number(this.active)]) ||
+                (!this.collapsible && items[0]);
+
+            if (active) {
+                this.toggle(active, false);
+            }
+        },
+
+        toggles() {
+            this.$emit();
+        },
+
+        contents(items) {
+            for (const el of items) {
+                const isOpen = hasClass(
+                    this.items.find((item) => item.contains(el)),
+                    this.clsOpen,
+                );
+
+                hide(el, !isOpen);
+            }
+            this.$emit();
+        },
+    },
+
+    observe: lazyload(),
+
+    events: [
+        {
+            name: 'click keydown',
+
+            delegate: ({ targets, $props }) => `${targets} ${$props.toggle}`,
+
+            async handler(e) {
+                if (e.type === 'keydown' && e.keyCode !== keyMap.SPACE) {
+                    return;
+                }
+
+                maybeDefaultPreventClick(e);
+
+                this._off?.();
+                this._off = keepScrollPosition(e.target);
+                await this.toggle(index(this.toggles, e.current));
+                this._off();
+            },
+        },
+        {
+            name: 'shown hidden',
+
+            self: true,
+
+            delegate: ({ targets }) => targets,
+
+            handler() {
+                this.$emit();
+            },
+        },
+    ],
+
+    update() {
+        const activeItems = filter(this.items, `.${this.clsOpen}`);
+
+        for (const index in this.items) {
+            const toggle = this.toggles[index];
+            const content = this.contents[index];
+
+            if (!toggle || !content) {
+                continue;
+            }
+
+            toggle.id = generateId(this, toggle);
+            content.id = generateId(this, content);
+
+            const active = includes(activeItems, this.items[index]);
+            attr(toggle, {
+                role: isTag(toggle, 'a') ? 'button' : null,
+                'aria-controls': content.id,
+                'aria-expanded': active,
+                'aria-disabled': !this.collapsible && activeItems.length < 2 && active,
+            });
+
+            attr(content, { role: 'region', 'aria-labelledby': toggle.id });
+            if (isTag(content, 'ul')) {
+                attr(children(content), 'role', 'presentation');
+            }
+        }
+    },
+
+    methods: {
+        toggle(item, animate) {
+            item = this.items[getIndex(item, this.items)];
+            let items = [item];
+            const activeItems = filter(this.items, `.${this.clsOpen}`);
+
+            if (!this.multiple && !includes(activeItems, items[0])) {
+                items = items.concat(activeItems);
+            }
+
+            if (!this.collapsible && activeItems.length < 2 && includes(activeItems, item)) {
+                return;
+            }
+
+            return Promise.all(
+                items.map((el) =>
+                    this.toggleElement(el, !includes(activeItems, el), (el, show) => {
+                        toggleClass(el, this.clsOpen, show);
+
+                        if (animate === false || !this.animation) {
+                            hide($(this.content, el), !show);
+                            return;
+                        }
+
+                        return transition(el, show, this);
+                    }),
+                ),
+            );
+        },
+    },
+};
+
+function hide(el, hide) {
+    el && (el.hidden = hide);
+}
+
+async function transition(el, show, { content, duration, velocity, transition }) {
+    content = el._wrapper?.firstElementChild || $(content, el);
+
+    if (!el._wrapper) {
+        el._wrapper = wrapAll(content, '<div>');
+    }
+
+    const wrapper = el._wrapper;
+    css(wrapper, 'overflow', 'hidden');
+    const currentHeight = toFloat(css(wrapper, 'height'));
+
+    await Transition.cancel(wrapper);
+    hide(content, false);
+
+    const endHeight =
+        sumBy(['marginTop', 'marginBottom'], (prop) => css(content, prop)) +
+        dimensions(content).height;
+
+    const percent = currentHeight / endHeight;
+    duration = (velocity * endHeight + duration) * (show ? 1 - percent : percent);
+    css(wrapper, 'height', currentHeight);
+
+    await Transition.start(wrapper, { height: show ? endHeight : 0 }, duration, transition);
+
+    unwrap(content);
+    delete el._wrapper;
+
+    if (!show) {
+        hide(content, true);
+    }
+}
+
+function keepScrollPosition(el) {
+    const scrollElement = scrollParent(el, true);
+    let frame;
+    (function scroll() {
+        frame = requestAnimationFrame(() => {
+            const { top } = dimensions(el);
+            if (top < 0) {
+                scrollElement.scrollTop += top;
+            }
+            scroll();
+        });
+    })();
+
+    return () => requestAnimationFrame(() => cancelAnimationFrame(frame));
+}

package/src/js/core/alert.js

@@ -0,0 +1,59 @@
+import { css, toFloat, Transition } from 'uikit-util';
+import Class from '../mixin/class';
+import { maybeDefaultPreventClick } from '../mixin/event';
+import Togglable from '../mixin/togglable';
+
+export default {
+    mixins: [Class, Togglable],
+
+    args: 'animation',
+
+    props: {
+        animation: Boolean,
+        close: String,
+    },
+
+    data: {
+        animation: true,
+        selClose: '.uk-alert-close',
+        duration: 150,
+    },
+
+    events: {
+        name: 'click',
+
+        delegate: ({ selClose }) => selClose,
+
+        handler(e) {
+            maybeDefaultPreventClick(e);
+            this.close();
+        },
+    },
+
+    methods: {
+        async close() {
+            await this.toggleElement(this.$el, false, animate);
+            this.$destroy(true);
+        },
+    },
+};
+
+function animate(el, show, { duration, transition, velocity }) {
+    const height = toFloat(css(el, 'height'));
+    css(el, 'height', height);
+    return Transition.start(
+        el,
+        {
+            height: 0,
+            marginTop: 0,
+            marginBottom: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            borderTop: 0,
+            borderBottom: 0,
+            opacity: 0,
+        },
+        velocity * height + duration,
+        transition,
+    );
+}

package/src/js/core/cover.js

@@ -0,0 +1,57 @@
+import { css, Dimensions, isTag, parent } from 'uikit-util';
+import { resize } from '../api/observables';
+import Video from './video';
+
+export default {
+    mixins: [Video],
+
+    props: {
+        width: Number,
+        height: Number,
+    },
+
+    data: {
+        automute: true,
+    },
+
+    created() {
+        this.useObjectFit = isTag(this.$el, 'img', 'video');
+    },
+
+    observe: resize({
+        target: ({ $el }) => getPositionedParent($el) || parent($el),
+        filter: ({ useObjectFit }) => !useObjectFit,
+    }),
+
+    update: {
+        read() {
+            if (this.useObjectFit) {
+                return false;
+            }
+
+            const { $el, width = $el.clientWidth, height = $el.clientHeight } = this;
+
+            const el = getPositionedParent($el) || parent($el);
+            const dim = Dimensions.cover(
+                { width, height },
+                { width: el.offsetWidth, height: el.offsetHeight },
+            );
+
+            return dim.width && dim.height ? dim : false;
+        },
+
+        write({ height, width }) {
+            css(this.$el, { height, width });
+        },
+
+        events: ['resize'],
+    },
+};
+
+function getPositionedParent(el) {
+    while ((el = parent(el))) {
+        if (css(el, 'position') !== 'static') {
+            return el;
+        }
+    }
+}