@thinkpixellab-public/px-vue 3.0.74 → 3.0.76

package/components/PxArrowScroller.vue

@@ -30,7 +30,12 @@ ar
             </slot>
         </button>
 
-        <div :class="bem('scroller', { disabled })" ref="scroller" @scroll="updateScrollArrows">
+        <div
+            :class="bem('scroller', { disabled })"
+            ref="scroller"
+            @scroll="updateScrollArrows"
+            data-no-drag
+        >
             <slot />
         </div>
 

package/components/PxBaseVariantsOverride.vue

@@ -18,7 +18,7 @@ export default {
         variantValue() {
             return (
                 (this.variantBase ? `${this.variantBase} ` : '') +
-                (this.variant ?? this.variantDefault)
+                (this.variant !== 'default' ? this.variant : this.variantDefault)
             );
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.74",
+    "version": "3.0.76",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -14,7 +14,7 @@
     "dependencies": {
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "^2.11.5",
-        "@thinkpixellab-public/px-styles": "^3.7.8",
+        "@thinkpixellab-public/px-styles": "^3.7.9",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^3.1.5",

package/utils/cssStr.js

@@ -58,6 +58,18 @@ function cssVar(val) {
     return null;
 }
 
+/*
+Extract the number from a css value
+    cssNum('10px') => 10
+    cssNum(10) => 10
+    cssNum('auto') => 0
+    cssNum('auto', null) => null
+*/
+function cssNum(val, nanValue = 0) {
+    const num = parseFloat(val);
+    return isNaN(num) ? nanValue : num;
+}
+
 /*
 Extract the unit from a css value
     cssUnit('10px') => 'px'
@@ -81,16 +93,16 @@ function cssUnit(val) {
     return '';
 }
 
-/*
-Extract the number from a css value
-    cssNum('10px') => 10
-    cssNum(10) => 10
-    cssNum('auto') => 0
-    cssNum('auto', null) => null
-*/
-function cssNum(val, nanValue = 0) {
-    const num = parseFloat(val);
-    return isNaN(num) ? nanValue : num;
+/**
+ * Scales a css value while leaving the unit intact.
+ * @param {string} val The css value to scale
+ * @example
+ *      cssUnitScale('10px', 2) => '20px'
+ */
+function cssUnitScale(val, scaler) {
+    const unit = cssUnit(val);
+    const num = cssNum(val);
+    return `${num * scaler}${unit}`;
 }
 
 /*
@@ -183,16 +195,16 @@ function cssUnitFallback(val, fallback, allowNumberless = false) {
     return `${num}${unit}`;
 }
 
-/*
-Ems version of cssUnitFallback
-*/
+/**
+ * Ems version of cssUnitFallback
+ */
 function cssEmFallback(val, allowNumberless = false) {
     return cssUnitFallback(val, 'em', allowNumberless);
 }
 
-/*
-Px version of cssUnitFallback
-*/
+/**
+ * Px version of cssUnitFallback
+ */
 function cssPxFallback(val, allowNumberless = false) {
     return cssUnitFallback(val, 'px', allowNumberless);
 }
@@ -206,6 +218,7 @@ export {
     cssAspect,
     cssNum,
     cssUnit,
+    cssUnitScale,
     cssUnitFallback,
     cssEmFallback,
     cssPxFallback,

package/utils/utils.js

@@ -13,6 +13,20 @@ export default {
         return Math.min(Math.max(value, min), max);
     },
 
+    /**
+     * Ensure that a value is an array. If the value isn't an array, wrap it. If the value is null
+     * or undefined, an empty array is returned (0 and false will be wrapped).
+     *
+     * @param {*} value Any array or non-array value.
+     * @return {*} An array.
+     */
+    ensureArray: function (value) {
+        if (value === null || value === undefined) {
+            return [];
+        }
+        return Array.isArray(value) ? value : [value];
+    },
+
     /**
      * Safely gets an item from an array, otherwise returns a fallback value.
      * @param {*} arr The array.
@@ -29,6 +43,7 @@ export default {
         }
         return fallback;
     },
+
     /**
      * Method for calculating a safe index into an array for a given starting point and offset.
      * Offset can be very large or negative.
@@ -148,6 +163,26 @@ export default {
         return arrA.filter(value => arrB.includes(value));
     },
 
+    /**
+     * Returns true if the two arrays have any common items.
+     * @param {*} arr1 The first array
+     * @param {*} arr2 The second array
+     * @return True if the arrays have any common items
+     */
+    arrayHasCommonItem(arr1, arr2) {
+        if (!arr1 || !arr2) {
+            return false;
+        }
+
+        for (let i = 0; i < arr1.length; i++) {
+            if (arr2.indexOf(arr1[i]) > -1) {
+                return true;
+            }
+        }
+
+        return false;
+    },
+
     /**
      * Returns an object representing the current query string parameters.
      */