@signal24/vue-foundation 3.8.1 → 4.0.0

package/src/helpers/context-menu.js

@@ -1,66 +0,0 @@
-import $ from 'jquery';
-
-import app from '../app';
-
-app.config.globalProperties.$contextMenu = function (e, config) {
-    var $wrapper = $('<div class="vf-overlay">').click(_closeMenu).appendTo(document.body);
-    var $menu = $('<div class="vf-context-menu">').css('position', 'absolute').appendTo($wrapper);
-
-    var $target = $(e.currentTarget);
-    $target.css('user-select', 'none');
-
-    $target.addClass('context-menu-active');
-
-    config.targetClass && $target.addClass(config.targetClass);
-    config.class && $menu.addClass(config.class);
-
-    config.items &&
-        config.items.forEach(item => {
-            if (item == '-') return $('<div class="separator">').appendTo($menu);
-            var $item = $('<div class="item">').css('user-select', 'none').text(item.title).appendTo($menu);
-            item.class && $item.addClass(item.class);
-            if (item.shouldConfirm) $item.data('handler', item.handler).click(_confirmAction);
-            else if (item.handler) $item.click(item.handler);
-        });
-
-    const dx = window.innerWidth - e.clientX;
-    const dy = window.innerHeight - e.clientY;
-    const menuHeight = $menu.outerHeight();
-    const menuWidth = $menu.outerWidth();
-
-    const left = dx < menuWidth ? e.clientX - menuWidth - 1 : e.clientX + 1;
-    const top = dy < menuHeight ? e.clientY - menuHeight - 1 : e.clientY + 1;
-
-    $menu.css('left', left + 'px');
-    $menu.css('top', top + 'px');
-
-    config.onCreate && config.onCreate($menu[0]);
-
-    setTimeout(() => {
-        $menu.css('width', $menu.outerWidth() + 'px');
-    }, 50);
-
-    function _closeMenu() {
-        config.targetClass && $target.removeClass(config.targetClass);
-        $target.removeClass('context-menu-active');
-        $target.css('user-select', '');
-        $wrapper.remove();
-    }
-
-    function _confirmAction(e) {
-        var $item = $(e.currentTarget);
-        if ($item.hasClass('pending-confirm')) {
-            var handler = $item.data('handler');
-            handler && handler();
-        } else {
-            var originalContent = $item.html();
-            $item.addClass('pending-confirm').text('Confirm');
-            $item.one('mouseleave', function () {
-                $item.removeClass('pending-confirm').html(originalContent);
-            });
-            e.stopPropagation();
-        }
-    }
-};
-
-// TODO: actually de-select text rather than just using CSS to hide its selection

package/src/helpers/delay.js

@@ -1,3 +0,0 @@
-import app from '../app';
-
-app.config.globalProperties.$delay = ms => new Promise(resolve => setTimeout(resolve, ms));

package/src/helpers/error.js

@@ -1,36 +0,0 @@
-import app from '../app';
-import vfConfig from '../config';
-
-app.config.globalProperties.$reportError = err => {
-    if (!(err instanceof Error)) {
-        err = new Error(err);
-    }
-
-    if (vfConfig.reportErrorHandler) {
-        vfConfig.reportErrorHandler(err);
-    } else {
-        console.error(err);
-    }
-};
-
-app.config.globalProperties.$throwUserError = msg => {
-    let err = new Error(msg);
-    err.code = 'USERERR';
-    throw err;
-};
-
-Object.defineProperty(Error.prototype, 'userMessage', {
-    get() {
-        if (this.code == 'USERERR') return this.message;
-        else
-            return `An application error has occurred:\n\n${this.message}\n\nPlease refresh the page and try again. If this error persists, ${vfConfig.unhandledErrorSupportText}.`;
-    }
-});
-
-Error.prototype.handle = function () {
-    if (this.code != 'USERERR') {
-        app.config.globalProperties.$reportError(this);
-    }
-
-    return this;
-};

package/src/helpers/http.js

@@ -1,44 +0,0 @@
-import axios from 'axios';
-
-import app from '../app';
-app.config.globalProperties.$http = axios;
-
-axios.postOrPut = (baseUrl, id, ...args) => {
-    const method = id ? 'put' : 'post';
-    const url = id ? `${baseUrl}/${id}` : baseUrl;
-    return axios[method](url, ...args);
-};
-
-import vfConfig from '../config';
-
-axios.interceptors.response.use(
-    response => {
-        // TODO: will Axios auto-reject non-JSON?
-        if (response.data && typeof response.data != 'object') {
-            throw new Error('response was not JSON');
-        }
-
-        return response;
-    },
-
-    err => {
-        if (err.response && err.response.status == 401) {
-            if (vfConfig.unauthorizedHttpResponseHandler) {
-                const result = vfConfig.unauthorizedHttpResponseHandler(err.response);
-
-                // if the handler said "ok, handled", then we're going to
-                // return a promise that never resolves to prevent the userland code
-                // from ever proceeding
-                if (result) return new Promise(() => {});
-            }
-        }
-
-        if (err.response && err.response.data && err.response.data.error) {
-            err.code = err.response.status == 422 ? 'USERERR' : 'APIERR';
-            err.message = err.response.data.error;
-            err.field = err.response.data.errorField;
-        }
-
-        throw err;
-    }
-);

package/src/helpers/index.js

@@ -1,9 +0,0 @@
-import './array';
-import './context-menu';
-import './delay';
-import './error';
-import './http';
-import './mask';
-import './number';
-import './string';
-import './vue';

package/src/helpers/mask.js

@@ -1,90 +0,0 @@
-import $ from 'jquery';
-
-import app from '../app';
-
-/*///////////////////////////////////////////////
-Masking
-//////////////////////////////////////////////*/
-app.config.globalProperties.$mask = function (message) {
-    let $el = $(this.$el);
-    this.$maskEl($el.hasClass('vf-overlay') ? $el.find('.vf-modal')[0] : this.$el, message);
-};
-
-app.config.globalProperties.$maskEl = function (el, message) {
-    if (this._currentMask) return;
-    this._currentMask = $('<div class="mask">')
-        .text(message || 'Please wait...')
-        .appendTo(el);
-};
-
-app.config.globalProperties.$unmask = function () {
-    if (!this._currentMask) return;
-    $(this._currentMask).remove();
-    delete this._currentMask;
-};
-
-app.config.globalProperties.$maskForm = function (waitButton, waitText) {
-    let el = this.$el;
-
-    if (waitButton !== undefined && waitButton.tagName == 'FORM') {
-        el = waitButton;
-        waitButton = undefined;
-    }
-
-    let $form = el.tagName == 'FORM' ? $(el) : $(el).find('form');
-    let $inputs = $form.find('input, select, textarea, button').not('[disabled]');
-    $form.addClass('masked');
-    $form.data('vf-masked-inputs', $inputs);
-    $inputs.attr('disabled', 'disabled');
-
-    if (waitButton === undefined) {
-        waitButton = $form.find('button:first');
-    }
-
-    if (waitButton) {
-        let $waitButton = $form.find(waitButton);
-        $waitButton.disable(waitText || 'Please wait...');
-        $form.data('vf-masked-wait-btn', $waitButton);
-    }
-};
-
-app.config.globalProperties.$unmaskForm = function () {
-    let $form = this.$el.tagName == 'FORM' ? $(this.$el) : $(this.$el).find('form.masked');
-    if (!$form.length) return;
-    let $inputs = $form.data('vf-masked-inputs');
-    $inputs.removeAttr('disabled');
-    $form.removeData('vf-masked-inputs');
-    let $waitButton = $form.data('vf-masked-wait-btn');
-    if ($waitButton) {
-        $form.removeData('vf-masked-wait-btn');
-        $waitButton.enable();
-    }
-    $form.removeClass('masked');
-};
-
-/*///////////////////////////////////////////////
-Button Enable/Disable
-//////////////////////////////////////////////*/
-$.fn.disable = function (newText) {
-    this.each(function (index, item) {
-        var $item = $(item);
-        var isInput = item.tagName == 'INPUT';
-        newText &&
-            $item.data('originalValue', isInput ? $item.val() : $item.html()) &&
-            $item[isInput ? 'val' : 'text'](newText);
-        $item.attr('disabled', 'disabled');
-    });
-    return this;
-};
-
-$.fn.enable = function () {
-    this.each(function (index, item) {
-        var $item = $(item);
-        $item.removeAttr('disabled');
-        var originalValue = $item.data('originalValue');
-        originalValue != undefined &&
-            $item[item.tagName == 'INPUT' ? 'val' : 'html'](originalValue) &&
-            $item.removeData('originalValue');
-    });
-    return this;
-};

package/src/helpers/number.js

@@ -1,6 +0,0 @@
-/*///////////////////////////////////////////////
-Number Prototype Functions
-///////////////////////////////////////////////*/
-Number.prototype.format = function () {
-    return this.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-};

package/src/helpers/string.js

@@ -1,36 +0,0 @@
-String.prototype.escapeHtml = function () {
-    return this.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-};
-
-String.prototype.nl2br = function () {
-    return this.replace(/\n/g, '<br>');
-};
-
-// this isn't implemented in Vue filters because why would you ever turn something _into_ kebab case for user display?
-String.prototype.kebab = function () {
-    return this.replace(/ /g, '-');
-};
-
-// TODO: what would this be used for?
-String.prototype.lcfirst = function () {
-    return this.substr(0, 1).toLowerCase() + this.substr(1);
-};
-
-// this isn't implemented in Vue filters because why would you ever turn something _into_ Snake case for user display?
-String.prototype.snake = function () {
-    return this.replace(/ /g, '_');
-};
-
-String.prototype.ucfirst = function () {
-    return this.substr(0, 1).toUpperCase() + this.substr(1);
-};
-
-String.prototype.ucwords = function () {
-    return this.replace(/^[a-z]| [a-z]/gi, function (value) {
-        return value.toUpperCase();
-    });
-};
-
-String.prototype.unsnake = function () {
-    return this.replace(/_/g, ' ');
-};

package/src/helpers/vue.js

@@ -1,5 +0,0 @@
-import app from '../app';
-
-app.config.globalProperties.$isPropTruthy = function (value) {
-    return value !== undefined && (value === '' || value);
-};

package/src/index.js

@@ -1,33 +0,0 @@
-// REMINDER: if there is a node_modules folder here during development of another app linking to this dev build,
-// the 'Vue' imports here will _not_ be the same as the 'Vue' imports from the app due to absolute path differences
-// thus, nothing that's attached to Vue here will be attached to Vue there, and everything will be broken
-
-import './components';
-import './directives';
-import './helpers';
-import './plugins';
-
-import app, { setRootComponent } from './app';
-import vfConfig from './config';
-import { registerFilter, registerFilters } from './filters';
-
-export default {
-    getApp,
-    configure,
-    mount,
-    registerFilter,
-    registerFilters
-};
-
-function configure(options) {
-    vfConfig.set(options);
-}
-
-function mount(rootComponent, target) {
-    setRootComponent(rootComponent);
-    app.vm = app.mount(target);
-}
-
-function getApp() {
-    return app;
-}

package/src/plugins/index.js

@@ -1,10 +0,0 @@
-import VueStash from 'vue-stash-nested';
-
-import app from '../app';
-app.use(VueStash);
-
-import InfiniteScroll from './infinite-scroll';
-app.use(InfiniteScroll);
-
-import ResizeWatcher from './resize-watcher';
-app.use(ResizeWatcher);

package/src/plugins/infinite-scroll/hook.js

@@ -1,30 +0,0 @@
-// TODO: switch to intersection observer
-
-export default class InfiniteScrollHook {
-    constructor(el, handler) {
-        this.el = el;
-        this.handler = handler;
-
-        this.isTripped = false;
-        this.onScroll = this._onScroll.bind(this);
-    }
-
-    install() {
-        this.el.addEventListener('scroll', this.onScroll);
-    }
-
-    uninstall() {
-        this.el.removeEventListener('scroll', this.onScroll);
-    }
-
-    _onScroll(e) {
-        if (Math.ceil(this.el.scrollTop + this.el.clientHeight + 5) >= this.el.scrollHeight) {
-            if (!this.isTripped) {
-                this.handler(e);
-                this.isTripped = true;
-            }
-        } else if (this.isTripped) {
-            this.isTripped = false;
-        }
-    }
-}

package/src/plugins/infinite-scroll.js

@@ -1,100 +0,0 @@
-// TODO: switch to intersection observer
-
-import InfiniteScrollHook from './infinite-scroll/hook';
-
-class InfiniteScroll {
-    static install(app) {
-        const scrollableValues = ['auto', 'scroll'];
-        const discoverScrollableAncestorEl = function (el) {
-            el = el.parentElement;
-            if (!el) return null;
-
-            const computedStyle = window.getComputedStyle(el);
-            if (
-                scrollableValues.includes(computedStyle.overflow) ||
-                scrollableValues.includes(computedStyle.overflowX) ||
-                scrollableValues.includes(computedStyle.overflowY)
-            ) {
-                return el;
-            }
-
-            return discoverScrollableAncestorEl(el);
-        };
-
-        const installScrollHook = function () {
-            if (this.$options.windowScrolledToBottom) {
-                this._windowScrollHook = new InfiniteScrollHook(
-                    window,
-                    this.$options.windowScrolledToBottom.bind(this)
-                );
-                this._windowScrollHook.install();
-            }
-
-            if (this.$options.elScrolledToBottom) {
-                this._elScrollHook = new InfiniteScrollHook(this.$el, this.$options.elScrolledToBottom.bind(this));
-                this._elScrollHook.install();
-            }
-
-            if (this.$options.ancestorScrolledToBottom) {
-                const scrollableAncestorEl = discoverScrollableAncestorEl(this.$el);
-                if (scrollableAncestorEl) {
-                    this._ancestorScrollHook = new InfiniteScrollHook(
-                        scrollableAncestorEl,
-                        this.$options.ancestorScrolledToBottom.bind(this)
-                    );
-                    this._ancestorScrollHook.install();
-                } else {
-                    console.warn('no scollable ancestor found for component:', this);
-                }
-            }
-        };
-
-        const reinstallScrollHook = function () {
-            if (this._windowScrollHandler) {
-                this._windowScrollHandler.install();
-            }
-
-            if (this._elScrollHandler) {
-                this._elScrollHandler.install();
-            }
-
-            if (this._ancestorScrollHook) {
-                this._ancestorScrollHook.install();
-            }
-        };
-
-        const removeScrollHook = function () {
-            if (this._windowScrollHandler) {
-                this._windowScrollHandler.uninstall();
-            }
-
-            if (this._elScrollHandler) {
-                this._elScrollHandler.uninstall();
-            }
-
-            if (this._ancestorScrollHook) {
-                this._ancestorScrollHook.uninstall();
-            }
-        };
-
-        app.mixin({
-            mounted() {
-                installScrollHook.call(this);
-            },
-
-            activated() {
-                reinstallScrollHook.call(this);
-            },
-
-            deactivated() {
-                removeScrollHook.call(this);
-            },
-
-            beforeUnmount() {
-                removeScrollHook.call(this);
-            }
-        });
-    }
-}
-
-export default InfiniteScroll;

package/src/plugins/resize-watcher.js

@@ -1,28 +0,0 @@
-// TODO: find out if we can use the Vue options array for the functions instead of making them part of "methods"
-
-class ResizeWatcher {
-    static install(app) {
-        app.mixin({
-            mounted() {
-                if (this.$options.windowResized) {
-                    this._resizeWatcherHandler = this.$options.windowResized.bind(this);
-                    window.addEventListener('resize', this._resizeWatcherHandler);
-                }
-            },
-
-            activated() {
-                this._resizeWatcherHandler && window.addEventListener('resize', this._resizeWatcherHandler);
-            },
-
-            deactivated() {
-                this._resizeWatcherHandler && window.removeEventListener('resize', this._resizeWatcherHandler);
-            },
-
-            beforeUnmount() {
-                this._resizeWatcherHandler && window.removeEventListener('resize', this._resizeWatcherHandler);
-            }
-        });
-    }
-}
-
-export default ResizeWatcher;