@signal24/vue-foundation 3.0.0 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signal24/vue-foundation",
-  "version": "3.0.0",
+  "version": "3.3.2",
   "description": "Common components, directives, and helpers for Vue 3 apps",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/alert.vue

@@ -1,11 +1,11 @@
 <template>
     <modal class="vf-alert" :class="classes">
-        <h1 v-if="!this.isBare" slot="header">{{ title }}</h1>
+        <h1 v-if="!this.isBare" v-slot:header>{{ title }}</h1>
 
         <div v-if="isHtml" v-html="message" class="user-message"></div>
         <div v-else v-user-text="message"></div>
 
-        <template v-if="!this.isBare" slot="footer">
+        <template v-if="!this.isBare" v-slot:footer>
             <template v-if="shouldConfirm">
                 <button class="primary" @click="ok" v-autofocus>Confirm</button>
                 <button class="default" @click="$dismiss()">Cancel</button>

package/src/components/smart-select.vue

@@ -538,6 +538,7 @@ export default {
         border-style: solid;
         border-width: 5px 5px 0 5px;
         border-color: #333333 transparent transparent transparent;
+        pointer-events: none;
     }
 
     &.open:after {

package/src/filters/index.js

@@ -55,10 +55,25 @@ const filterFns = {
     }
 };
 
+function registerFilters(filters) {
+    for (let filterName of Object.keys(filters)) {
+        registerFilter(filterName, filters[filterName]);
+    }
+}
+
+function registerFilter(name, fn) {
+    filterFns[name] = fn;
+}
+
 app.config.globalProperties.$filter = (value, ...filters) => {
     for (let filter of filters) {
         value = filterFns[filter](value);
     }
 
     return value;
+};
+
+export {
+    registerFilter,
+    registerFilters
 };

package/src/helpers/array.js

@@ -7,7 +7,7 @@ Object.defineProperty(Array.prototype, 'diff', {
                     return false;
                 }
             }
-            
+
             return true;
         });
     }
@@ -29,19 +29,12 @@ Object.defineProperty(Array.prototype, 'intersect', {
                     return true;
                 }
             }
-            
+
             return false;
         });
     }
 });
 
-Object.defineProperty(Array.prototype, 'unique', {
-    enumerable: false,
-    value: function() {
-        return [...new Set(this)]
-    }
-});
-
 Object.defineProperty(Array.prototype, 'keyBy', {
     enumerable: false,
     value: function(keyProp) {
@@ -77,7 +70,7 @@ Object.defineProperty(Array.prototype, 'pluck', {
 Object.defineProperty(Array.prototype, 'remove', {
     enumerable: false,
     value: function(element) {
-        let index = this.indexOf(element);
+        const index = this.indexOf(element);
         index > -1 && this.splice(index, 1);
     }
 });
@@ -85,7 +78,7 @@ Object.defineProperty(Array.prototype, 'remove', {
 Object.defineProperty(Array.prototype, 'replace', {
     enumerable: false,
     value: function(element, replacement) {
-        let index = this.indexOf(element);
+        const index = this.indexOf(element);
         index > -1 && this.splice(index, 1, replacement);
     }
 });
@@ -98,3 +91,10 @@ Object.defineProperty(Array.prototype, 'sortBy', {
         });
     }
 });
+
+Object.defineProperty(Array.prototype, 'unique', {
+    enumerable: false,
+    value: function() {
+        return [...new Set(this)]
+    }
+});

package/src/helpers/delay.js

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

package/src/helpers/error.js

@@ -15,6 +15,12 @@ app.config.globalProperties.$reportError = 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')

package/src/helpers/index.js

@@ -1,5 +1,6 @@
 import './array';
 import './context-menu';
+import './delay';
 import './error';
 import './http';
 import './mask';

package/src/index.js

@@ -7,14 +7,16 @@ import vfConfig from './config';
 import app, { setRootComponent } from './app';
 import './components';
 import './directives';
-import './filters';
+import { registerFilter, registerFilters } from './filters';
 import './helpers';
 import './plugins';
 
 export default {
+    getApp,
     configure,
     mount,
-    getApp
+    registerFilter,
+    registerFilters
 };
 
 function configure(options) {

package/src/plugins/infinite-scroll.js

@@ -4,6 +4,19 @@ import InfiniteScrollHook from './infinite-scroll/hook';
 
 class InfiniteScroll {
     static install(app, options) {
+        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));
@@ -14,6 +27,16 @@ class InfiniteScroll {
                 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() {
@@ -24,6 +47,10 @@ class InfiniteScroll {
             if (this._elScrollHandler) {
                 this._elScrollHandler.install();
             }
+
+            if (this._ancestorScrollHook) {
+                this._ancestorScrollHook.install();
+            }
         };
 
         const removeScrollHook = function() {
@@ -34,6 +61,10 @@ class InfiniteScroll {
             if (this._elScrollHandler) {
                 this._elScrollHandler.uninstall();
             }
+
+            if (this._ancestorScrollHook) {
+                this._ancestorScrollHook.uninstall();
+            }
         }
 
         app.mixin({