@thinkpixellab-public/px-vue 3.0.87 → 3.0.89

package/components/PxSpinner.vue

@@ -7,7 +7,7 @@
         * classic - rotating semi-circle
         * dots - three dots that fade in and out in turn
 
-    Size is derived from the current font size and color is derived from currentColor. These
+    Size is derived from the current font size and color is derived from var(--px-spinner-color). These
     properties (as well as a transform) can be set on the component itself without side effects.
 
     Future enhancements could include additional properties for controlling things like timing,
@@ -27,7 +27,10 @@ import PxBaseVisible from './PxBaseVisible.vue';
 export default {
     name: 'px-spinner',
     mixins: [PxBaseVariants, PxBaseVisible],
-    props: { variant: { type: String, default: 'classic' } },
+    props: {
+        variant: { type: String, default: 'classic' },
+        duration: { type: Number, default: 2 },
+    },
 };
 </script>
 
@@ -39,6 +42,11 @@ export default {
     position: relative;
     pointer-events: none;
 
+    --px-spinner-dur: 2s;
+    --px-spinner-linewidth: 0.15em;
+    --px-spinner-color: currentColor;
+    --px-spinner-color-secondary: transparent;
+
     &__spinner {
         display: block;
         position: relative;
@@ -48,14 +56,15 @@ export default {
 
     &--classic & {
         &__spinner {
+            position: relative;
             width: 1.33em;
             height: 1.33em;
-            border: 0.15em solid currentColor;
-            border-bottom-color: transparent;
+            border: var(--px-spinner-linewidth) solid var(--px-spinner-color);
+            border-bottom-color: var(--px-spinner-color-secondary);
             border-radius: 50%;
             display: inline-block;
             box-sizing: border-box;
-            animation: px-spinner-classic 1s linear infinite;
+            animation: px-spinner-classic var(--px-spinner-dur) linear infinite;
         }
     }
 
@@ -91,15 +100,15 @@ export default {
             height: 2.5em;
             border-radius: 50%;
             animation-fill-mode: both;
-            animation: px-spinner-dots $dur infinite $ease-in-out-quart;
+            animation: px-spinner-dots var(--px-spinner-dur) infinite $ease-in-out-quart;
         }
         &__spinner {
             left: 5em;
-            color: currentColor;
+            color: var(--px-spinner-color);
             position: relative;
             text-indent: -9999em;
             transform: translateZ(0);
-            animation-delay: ($dur * -0.088888888);
+            animation-delay: calc((var(--px-spinner-dur) * -0.088888888));
         }
         &__spinner:before,
         &__spinner:after {
@@ -109,7 +118,7 @@ export default {
         }
         &__spinner:before {
             left: -5em;
-            animation-delay: ($dur * -0.088888888 * 2);
+            animation-delay: calc((var(--px-spinner-dur) * -0.088888888 * 2));
         }
         &__spinner:after {
             left: 5em;

package/package.json

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

package/utils/utils.js

@@ -27,6 +27,16 @@ export default {
         return Array.isArray(value) ? value : [value];
     },
 
+    /**
+     * Returns a new array containing the specified number of items generated by the provided
+     * function.
+     * @param {*} count The number of items to be generated.
+     * @param {*} fn The function to be called to generate each item.
+     */
+    arrayFill: function (count, fn) {
+        return Array.from({ count }, (_, i) => fn(i));
+    },
+
     /**
      * Safely gets an item from an array, otherwise returns a fallback value.
      * @param {*} arr The array.
@@ -344,6 +354,53 @@ export default {
         });
     },
 
+    /**
+     * Converts a floating-point number to a string value based on a map where the keys are string
+     * values and the corresponding values define ranges in the format 'start, end'. Open-ended
+     * ranges can be specified by using `null` for the start or end value. This approach avoids
+     * ambiguity with negative numbers by using commas to separate the range values. If the input
+     * value does not fall within any of the defined ranges, a fallback value is returned.
+     *
+     * @param {number} value - The floating-point number to be converted.
+     * @param {Object} valueMap - An object where keys are string values and values define ranges in
+     * the format 'start, end'. Use `null` to specify an open-ended start or end of a range.
+     * @param {string} fallbackValue - The value to return if the input does not match any defined
+     * range.
+     * @returns {string} - The string value corresponding to the range within which the input value
+     * falls, or the fallback value.
+     *
+     * @example
+     * const valueMap = {
+     *   'low': 'null, 0.5',
+     *   'medium': '0.5, 1',
+     *   'high': '1, null'
+     * };
+     * const fallback = 'unknown';
+     *
+     * console.log(floatToEnum(0.25, valueMap, fallback)); // Expected "low"
+     * console.log(floatToEnum(0.75, valueMap, fallback)); // Expected "medium"
+     * console.log(floatToEnum(1.5, valueMap, fallback));  // Expected "high"
+     * console.log(floatToEnum(-1, valueMap, fallback));   // Expected "unknown"
+     **/
+
+    floatToEnum(value, valueMap, fallbackValue) {
+        const rangeRegex = /^\s*(null|[+-]?\d*(?:\.\d+)?)\s*,\s*(null|[+-]?\d*(?:\.\d+)?)\s*$/;
+
+        for (const [stringValue, range] of Object.entries(valueMap)) {
+            const match = range.match(rangeRegex);
+            if (!match) continue; // Skip invalid ranges
+
+            const start = match[1] !== 'null' ? parseFloat(match[1]) : -Infinity;
+            const end = match[2] !== 'null' ? parseFloat(match[2]) : Infinity;
+
+            if ((start === -Infinity || value >= start) && (end === Infinity || value < end)) {
+                return stringValue;
+            }
+        }
+
+        return fallbackValue;
+    },
+
     /**
      * Generate a 6 letter random sequence of letters and numbers, based on this:
      * https://stackoverflow.com/questions/6248666/how-to-generate-short-uid-like-ax4j9z-in-js