@thinkpixellab-public/px-vue 3.0.1

package/utils/utils.js

@@ -0,0 +1,167 @@
+// Common utility functions. Anything in here must be static and must be small and must be common
+// enough to warrant inclusion.
+
+export default {
+    /**
+     * Clamps a number between a min and max value
+     * @param  {} value The value to be clampled
+     * @param  {} min The minimum allowed value
+     * @param  {} max The maximum allowed value
+     */
+    clamp: function (value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    },
+
+    /**
+     * Method for calculating a safe index into an array for a given starting point and offset.
+     * Offset can be very large or negative.
+     * @param {*} arr The array.
+     * @param {*} index The starting index.
+     * @param {*} offset The offset from the starting index.
+     * @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;
+        }
+        if (wrap) {
+            return (index + (offset % arr.length) + arr.length) % arr.length;
+        }
+
+        return this.clamp(index + offset, 0, arr.length - 1);
+    },
+
+    /**
+     * According to stack overflow this is the fastest way to remove an item from an array.
+     * https://stackoverflow.com/questions/30304719/javascript-fastest-way-to-remove-object-from-array
+     * @param  {} arr The array.
+     * @param  {} index The index of the item to be removed.
+     */
+    arrayRemoveIndex: function (arr, index) {
+        let stop = arr.length - 1;
+        while (index < stop) {
+            arr[index] = arr[++index];
+        }
+        arr.pop();
+    },
+
+    /**
+     * Same as arrayRemoveIndex but takes an item in the array instead of an index
+     * https://stackoverflow.com/questions/30304719/javascript-fastest-way-to-remove-object-from-array
+     * @param  {} arr The array.
+     * @param  {} item The index of the item to be removed.
+     */
+    arrayRemoveItem: function (arr, item) {
+        let index = arr.indexOf(item);
+        if (index > -1) {
+            this.arrayRemoveIndex(arr, index);
+        }
+    },
+
+    /**
+     * According to stack overflow this is the fastest way to filter an array.
+     * https://stackoverflow.com/questions/30304719/javascript-fastest-way-to-remove-object-from-array
+     * @param  {} arr The array
+     * @param  {} predicate
+     */
+    arrayFilter: function (arr, predicate) {
+        let i, j;
+
+        for (i = 0, j = 0; i < arr.length; ++i) {
+            if (predicate(arr[i])) {
+                arr[j] = arr[i];
+                ++j;
+            }
+        }
+
+        while (j < arr.length) {
+            arr.pop();
+        }
+    },
+
+    /**
+     * Returns an object representing the current query string parameters.
+     */
+    getQueryParams() {
+        if (process.server || typeof window == undefined) {
+            return {};
+        }
+        return new Proxy(new URLSearchParams(window.location.search), {
+            get: (searchParams, prop) => searchParams.get(prop),
+        });
+    },
+
+    /**
+     * Returns the string value for a query string parameter with an optional fallback.
+     *
+     * @param {string} name The name of the query string parameter (NOT case sensitive)
+     * @param {string} fallback The fallback value if the parameter doesnt' exist
+     */
+    getQueryParam(name, fallback = null) {
+        let params = this.getQueryParams();
+        return params[name] || fallback;
+    },
+
+    /**
+     * Retrieves the boolean value for a query string parameter. The function will return false if
+     * the parameter doesn't exist or has an obviously falsy value (0, false, null, undefined).
+     * Otherwise it will return true.
+     *
+     * @param {*} name The name of the query string parameter
+     */
+    getQueryBool(name) {
+        let val = this.getQueryParam(name, 'false').toLowerCase();
+        return !(val == '0' || val == 'false' || val == 'null' || val == 'undefined');
+    },
+
+    /**
+     * Returns true if the query parameter has been defined even if it has no value.
+     *
+     * @param {*} name The name of the query string parameter
+     */
+    getQueryExists(name) {
+        let params = this.getQueryParams();
+        return params[name] !== null;
+    },
+
+    /**
+     * Load an image with a load complete callback.
+     *
+     * @param {*} src The url for the image to be loaded
+     * @param {*} callback The function to execute when the image has been loaded
+     */
+    loadImage(src, callback) {
+        const img = new Image();
+        img.addEventListener('load', callback);
+        img.src = src;
+    },
+
+    /**
+     * Returns a simplified (only left, top, width, height) client rectangle for an element
+     * with an option to calculate relative to another element.
+     *
+     * @param {element} element The element to be measured
+     * @param {element} relativeTo The relative element (null is valid, we'll just ignore and you can still get the scroll adjust benefit)
+     * @param {boolean} scrollAdjust If true, adjust the value based on current window scroll position
+     */
+    getClientRect(element, relativeTo = null, scrollAdjust = true) {
+        const clientRect = element.getBoundingClientRect();
+        const relRect = relativeTo ? relativeTo.getBoundingClientRect() : { left: 0, top: 0 };
+
+        // TODO: do we need to adjust for other scroll containers?
+
+        let scroll = { left: 0, top: 0 };
+        if (scrollAdjust && typeof window !== undefined) {
+            scroll.left = window.scrollX;
+            scroll.top = window.scrollY;
+        }
+
+        return {
+            left: clientRect.left - relRect.left + scroll.left,
+            top: clientRect.top - relRect.top + scroll.top,
+            width: clientRect.width,
+            height: clientRect.height,
+        };
+    },
+};

package/utils/variants.js

@@ -0,0 +1,33 @@
+/**
+ * Converts a variant string to an array of variants
+ * (e.g. 'rounded shadow-lg' becomes ['rounded', 'shadow-lg'])
+ */
+const stringToVariants = str => {
+    if (typeof str != 'string') {
+        str = str + '';
+    }
+    if (str && str.trim && str.trim().length) {
+        return str.trim().split(/\s+|,/);
+    }
+    return [];
+};
+
+/**
+ * Converts a variant string to a map where variant names are keys and values are all true.
+ * (e.g. 'rounded shadow-lg' becomes {rounded: true, 'shadow-lg': true})
+ */
+const stringToVariantsMap = str => {
+    let variants = stringToVariants(str);
+    if (variants.length) {
+        return variants.reduce((map, variant) => {
+            map[variant] = true;
+            return map;
+        }, {});
+    }
+    return {};
+};
+
+export default {
+    stringToVariants,
+    stringToVariantsMap,
+};

package/vue.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+    configureWebpack: {
+        resolve: {
+            alias: {
+                // uncomment to use local px styles during development
+                // '@thinkpixellab-public/px-styles': path.resolve(__dirname, '../px-styles'),
+            },
+        },
+    },
+};