@thinkpixellab-public/px-vue 3.0.58 → 3.0.60

package/components/PxBaseVariants.vue

@@ -38,11 +38,31 @@ export default {
         },
     },
     methods: {
-        // true if the given variant is present
-        isVariant(variantName) {
-            return this.variants?.includes(variantName);
+        // true if the given variant (string) or variants (array) are present
+        isVariant(val) {
+            // if (val.includes && val.includes('offset')) {
+            //     debugger;
+            // }
+
+            if (this.variants && this.variants.length && val) {
+                if (typeof val == 'string') {
+                    return this.variants?.includes(val);
+                }
+                if (Array.isArray(val) && val.length) {
+                    for (let i = 0; i < val.length; i++) {
+                        if (this.variants?.includes(val[i])) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
         },
-        // find the first matching variant key in a map and return the correspond value
+
+        // Find the first matching variant key in a map and return the correspond value
+        // Example:
+        //     <MyComponent variant="red" />
+        //     variantsToValue({'red': '#F00', 'blue': '#0F0'}) => '#F00'
         variantsToValue(valueMap, fallback) {
             for (let key in valueMap) {
                 if (this.isVariant(key)) {

package/components/PxCardGrid.vue

@@ -114,6 +114,9 @@ You can define a template using space notation like this:
                         :class="bem('card')"
                         :ref="cardRefFromItem(item)"
                     >
+                        <div v-if="item.id" :id="item.id" :class="bem('scroll-id')">
+                            {{ item.id }}
+                        </div>
                         <slot
                             name="default"
                             :index="items.indexOf(item)"
@@ -512,5 +515,15 @@ export default {
             }
         }
     }
+
+    // element with id set to the section id, placed just outside the top of the section to help
+    // with scroll position
+    &__scroll-id {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        top: -80px;
+        opacity: 0;
+    }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.58",
+    "version": "3.0.60",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",

package/utils/cssStr.js

@@ -94,17 +94,15 @@ function cssNum(val, nanValue = 0) {
 }
 
 /*
-Attempts to convert multiple input styles into valid aspect-ratio property syntax (the number version)
+Attempts to convert multiple input styles into valid aspect-ratio number that can be used in css or javascript
 
     cssAspect(1.5) => 1.5
     cssAspect('1.5') => 1.5
     cssAspect('3 / 2') => 1.5
     cssAspect('3:2') => 1.5
     cssAspect('3 : 2') => 1.5
-    this.cssAspect('3:2:1') => null
-    cssAspect('auto') => auto
+    cssAspect('3:2:1') => null
     cssAspect('blah') => null
-    cssAspect('auto', 1.5) => auto
     cssAspect('blah', 1.5) => 1.5
     cssAspect(null, 1.5) => 1.5
 
@@ -124,11 +122,6 @@ function cssAspect(val, fallback = null) {
     if (typeof val == 'string') {
         val = val.trim();
 
-        // special case 'auto' since it's valid
-        if (val == 'auto') {
-            return val;
-        }
-
         // look for a delimiter first
 
         let delimiter = null;

package/utils/utils.js

@@ -9,7 +9,7 @@ export default {
      * @param  {} min The minimum allowed value
      * @param  {} max The maximum allowed value
      */
-    clamp: function (value, min, max) {
+    clamp: function (value, min = 0, max = 1) {
         return Math.min(Math.max(value, min), max);
     },
 
@@ -38,9 +38,9 @@ export default {
      * @param {*} wrap When true out-of-bounds indices will wrap, otherwise they will be clamped.
      * @return {*} A safe index into the array.
      */
-    arraySafeIndex: function (arr, index, offset, wrap) {
-        if (!arr || !arr.length) {
-            return -1;
+    arraySafeIndex: function (arr, index, offset = 0, wrap = false, fallback = -1) {
+        if (!arr || !arr.length || typeof index !== 'number') {
+            return fallback;
         }
         if (wrap) {
             return (index + (offset % arr.length) + arr.length) % arr.length;