@thinkpixellab-public/px-vue 3.0.25 → 3.0.26

package/components/PxCardGrid.vue

@@ -109,9 +109,10 @@ You can define a template using space notation like this:
                     :key="spaceIndex"
                 >
                     <div
-                        :class="bem('card')"
                         v-for="(item, cardIndex) in space.cards"
                         :key="cardIndex"
+                        :class="bem('card')"
+                        :ref="cardRefFromItem(item)"
                     >
                         <slot
                             name="default"
@@ -382,6 +383,7 @@ export default {
 
             this.rowTemplates = rowTemplates;
         },
+
         resize() {
             let count = 1;
             let availableWidth = this.$el.offsetWidth;
@@ -401,6 +403,29 @@ export default {
             }
             this.columnCount = count;
         },
+
+        cardRefFromItem(item) {
+            if (!item) {
+                return null;
+            }
+
+            const key = this.getItemKey(item);
+
+            if (key && key.toString) {
+                const ref = `card-${key.toString()}`;
+                return ref;
+            }
+
+            return null;
+        },
+
+        cardElementFromItem(item) {
+            const ref = this.cardRefFromItem(item);
+            if (ref && this.$refs[ref] && this.$refs[ref].length) {
+                return this.$refs[ref][0];
+            }
+            return null;
+        },
     },
 };
 </script>

package/components/PxFloat.vue

@@ -503,6 +503,8 @@ export default {
                 }
             }
 
+            console.log(`reference: ${reference}`);
+
             return reference;
         },
 

package/components/PxNineGrid.vue

@@ -55,8 +55,6 @@ export default {
         },
 
         borderStyle() {
-            //console.log(`this.slice: 👉 ${JSON.stringify(this.slice, null, 4)}`);
-
             let borderImageSlice = this.sliceArray
                 .map((v, idx) => {
                     return (v / (idx % 2 ? this.srcWidth : this.srcHeight)) * 100 + '%';

package/components/PxSpinner.vue

@@ -0,0 +1,130 @@
+<!--
+    Shows a simple CSS based spinner. Future implementations can pull from here:
+    https://cssloaders.github.io/
+
+    Supported variants:
+
+        * 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
+    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,
+    additional colors, stroke thickness, etc.
+-->
+
+<template>
+    <span :class="bem(variantsMap)" v-if="visible">
+        <span :class="bem('spinner')"></span>
+    </span>
+</template>
+
+<script>
+import PxBaseVariants from './PxBaseVariants.vue';
+import PxBaseVisible from './PxBaseVisible.vue';
+
+export default {
+    name: 'px-spinner',
+    mixins: [PxBaseVariants, PxBaseVisible],
+    props: { variant: { type: String, default: 'classic' } },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-spinner {
+    display: inline-block;
+    position: relative;
+    pointer-events: none;
+
+    &__spinner {
+        display: block;
+        position: relative;
+    }
+
+    // classic
+
+    &--classic & {
+        &__spinner {
+            width: 1.33em;
+            height: 1.33em;
+            border: 0.15em solid currentColor;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            display: inline-block;
+            box-sizing: border-box;
+            animation: px-spinner-classic 1s linear infinite;
+        }
+    }
+
+    @keyframes px-spinner-classic {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    // dots
+
+    &--dots {
+        width: 12.5em * 0.2;
+        height: 2.5em * 0.2;
+    }
+
+    &--dots & {
+        $dur: 1.8s;
+
+        &__spinner {
+            font-size: 0.2em;
+        }
+
+        &__spinner,
+        &__spinner:before,
+        &__spinner:after {
+            position: absolute;
+            top: -2.5em;
+            width: 2.5em;
+            height: 2.5em;
+            border-radius: 50%;
+            animation-fill-mode: both;
+            animation: px-spinner-dots $dur infinite $ease-in-out-quart;
+        }
+        &__spinner {
+            left: 5em;
+            color: currentColor;
+            position: relative;
+            text-indent: -9999em;
+            transform: translateZ(0);
+            animation-delay: ($dur * -0.088888888);
+        }
+        &__spinner:before,
+        &__spinner:after {
+            content: '';
+            position: absolute;
+            top: 0;
+        }
+        &__spinner:before {
+            left: -5em;
+            animation-delay: ($dur * -0.088888888 * 2);
+        }
+        &__spinner:after {
+            left: 5em;
+        }
+
+        @keyframes px-spinner-dots {
+            0%,
+            80%,
+            100% {
+                box-shadow: 0 2.5em 0 -1.3em;
+            }
+            40% {
+                box-shadow: 0 2.5em 0 0;
+            }
+        }
+    }
+}
+</style>

package/package.json

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

package/utils/cardGrid.js

@@ -94,7 +94,6 @@
 //         return result;
 //     });
 
-//     console.log(`rows: 👉 ${JSON.stringify(rows, null, 4)}`);
 // };
 
 // export default cardGrid;

package/utils/textWidth.js

@@ -0,0 +1,36 @@
+/**
+ * Uses canvas.measureText to compute the width of a string in px.
+ *
+ * @param str The text to be measured.
+ * @param fontOrElement The css font descriptor (e.g bold 15px arial) or an element from which to extract the font.
+ */
+const textWidth = (str, fontOrElement, roundUp = true) => {
+    // get font metrics from an element
+    let font = fontOrElement;
+    if (typeof font !== 'string') {
+        const element = fontOrElement || document.body;
+        font = getFontFromElement(element);
+    }
+
+    // re-use canvas object for better performance
+    const canvas = textWidth.canvas || (textWidth.canvas = document.createElement('canvas'));
+    const context = canvas.getContext('2d');
+
+    context.font = font;
+    const metrics = context.measureText(str);
+    return roundUp ? Math.ceil(metrics.width) : metrics.width;
+};
+
+const getCssProp = (element, prop) => {
+    return window.getComputedStyle(element, null).getPropertyValue(prop);
+};
+
+const getFontFromElement = element => {
+    const fontWeight = getCssProp(element, 'font-weight') || 'normal';
+    const fontSize = getCssProp(element, 'font-size') || '16px';
+    const fontFamily = getCssProp(element, 'font-family') || 'sans-serif';
+
+    return `${fontWeight} ${fontSize} ${fontFamily}`;
+};
+
+export default textWidth;