@signal24/vue-foundation 3.1.0 → 3.3.3

package/package.json

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

package/src/components/alert.vue

@@ -1,11 +1,13 @@
 <template>
     <modal class="vf-alert" :class="classes">
-        <h1 v-if="!this.isBare" slot="header">{{ title }}</h1>
+        <template v-if="!this.isBare" v-slot:header>
+            <h1>{{ title }}</h1>
+        </template>
 
         <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/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/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({