@thinkpixellab-public/px-vue 3.0.67 → 3.0.68

package/components/PxArrow.vue

@@ -0,0 +1,128 @@
+<!--
+    Generates an SVG arrow based on props.
+-->
+<template>
+    <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        overflow="visible"
+        :viewBox="svgData.viewBox"
+    >
+        <g
+            :stroke-width="svgData.strokeWidth"
+            stroke="currentColor"
+            fill="none"
+            fill-rule="evenodd"
+            stroke-linecap="round"
+        >
+            <polyline :points="svgData.pointer"></polyline>
+            <polyline v-if="stemVisible" :points="svgData.stem"></polyline>
+        </g>
+    </svg>
+</template>
+
+<script>
+import PxBaseResize from '@thinkpixellab-public/px-vue/components/PxBaseResize.vue';
+import { getBoundingBox, rotatePoints } from '../utils/points.js';
+import { contain } from '@thinkpixellab-public/px-vue/utils/fit.js';
+
+export default {
+    name: 'px-arrow',
+    mixins: [PxBaseResize],
+    props: {
+        // the aspect of the arrow "rectangle"
+        pointerAspect: { type: [Number, String], default: 2 },
+
+        // the relative height of the arrow
+        pointerSize: { type: Number, default: 0.4 },
+
+        // the relative size of the stem
+        stemVisible: { type: Boolean, default: true },
+
+        // the angle in which the arrow is pointing (in degrees)
+        angle: { type: Number, default: 0 },
+
+        // the stroke thickness of the arrow
+        strokeWidth: { type: Number, default: 1 },
+
+        // when true, we scale the strokeWidth in the internal SVG to keep it at the specified value
+        // regardless of render size
+        scaleStrokeWidth: { type: Boolean, default: true },
+    },
+    data() {
+        return {
+            elementSize: { width: 100, height: 100 },
+        };
+    },
+    computed: {
+        svgData() {
+            const pointerHeight = this.pointerSize;
+            const pointerWidth = this.pointerAspect * pointerHeight;
+
+            // basic arrow (bottom left corner anchored to origin)
+            let points = [
+                // pointer
+                { x: 0, y: pointerHeight },
+                { x: pointerWidth / 2, y: 0 },
+                { x: pointerWidth, y: pointerHeight },
+
+                // stem
+                { x: pointerWidth / 2, y: 0 },
+                { x: pointerWidth / 2, y: 1 },
+            ];
+
+            // rotate
+            points = rotatePoints(points, this.angle);
+
+            // scale by 100 so the viewbox isn't ridiculous
+            points = points.map(p => {
+                return {
+                    x: p.x * 100,
+                    y: p.y * 100,
+                };
+            });
+
+            // get viewbox bounds
+            const bounds = getBoundingBox(points);
+
+            // get stroke scale
+            const strokeScale = this.scaleStrokeWidth ? contain(this.elementSize, bounds).scale : 1;
+
+            // convert points to a string
+            points = points.map(p => {
+                return `${p.x} ${p.y}`;
+            });
+
+            const svgData = {
+                viewBox: [bounds.x, bounds.y, bounds.width, bounds.height]
+                    .map(n => Math.round(n))
+                    .join(' '),
+                pointer: [points[0], points[1], points[2]].join(' '),
+                stem: [points[3], points[4]].join(' '),
+                strokeWidth: this.strokeWidth * strokeScale,
+            };
+
+            return svgData;
+        },
+    },
+    methods: {
+        resize() {
+            if (this.$el) {
+                const r = this.$el.getBoundingClientRect();
+                this.elementSize = {
+                    width: r.width,
+                    height: r.height,
+                };
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/include.scss';
+.px-arrow {
+    position: relative;
+}
+</style>

package/components/PxTransition.vue

@@ -0,0 +1,241 @@
+<!--
+    <PxTransition animation="fade up" />
+-->
+
+<template>
+    <transition @enter="enter" @leave="leave">
+        <slot />
+    </transition>
+</template>
+
+<script>
+import gsap from 'gsap';
+
+export default {
+    // components: { Component },
+    // mixins: [ Mixin ],
+    props: {
+        /*
+         *  Specifies the show/hide animation. Should contain a mix of the following keywords
+         *
+         *      - nofade - disables the standard fade (why would you want that?)
+         *      - up - translate y: 50 -> 0 / 0 -> -50
+         *      - down - translate y: 0 -> -50 / 0 -> 50
+         *      - left - translate x: from -50 to 0 / 0 -> 50
+         *      - right - translate x: from 50 to 0 / 0 -> -50
+         *      - zoomin - scale x: 0.66 -> 1 / 1 -> 1.33
+         *      - zoomout - scale x: 1.33 -> 1 / 1 -> 0.66
+         *      - lg - scales values by 1.5
+         *      - sm - scales values by 0.5
+         *      - xs - scales values by 0.25
+         *
+         *  Examples:
+         *
+         *  <px-transition show="fade zoomin" hide="fade zoomout" />
+         *
+         *  // if only one of show or hide are specified then we reverse missing transition so the following are equivalent
+         *  <px-transition show="fade up"  />
+         *  <px-transition show="fade up" hide="fade down"  />
+         *
+         */
+
+        animation: {
+            type: [String, Object],
+            default: 'fade',
+        },
+        duration: {
+            type: Number,
+            default: 0.5,
+        },
+        hideAnimation: {
+            type: [String, Object],
+            default: null,
+        },
+        easing: {
+            type: String,
+            default: 'power.out',
+        },
+        hideDuration: {
+            type: Number,
+            default: null,
+        },
+        hideEasing: {
+            type: String,
+            default: null,
+        },
+    },
+    // data() { return { b: 0 }; },f
+    computed: {
+        transitionName() {
+            return `pxtx-${this.name}`;
+        },
+        showDur() {
+            return this.duration;
+        },
+        showEase() {
+            return this.easing;
+        },
+        hideDur() {
+            return this.hideDuration || this.duration;
+        },
+        hideEase() {
+            return this.hideEasing || this.easing;
+        },
+    },
+    // watch: {},
+    // mounted() {},
+    methods: {
+        keywordsToParameters(keywords, direction, reverse) {
+            const words = keywords.split(/[, ]+/).map(s => s.trim());
+            const fr = { x: 0, y: 0, scale: 1 };
+            const to = { x: 0, y: 0, scale: 1 };
+            const isHide = direction == 'hide';
+            const isShow = !isHide;
+
+            // parameter scale and percent
+            let s = 0.33;
+            s = words.includes('xl') ? 0.75 : s;
+            s = words.includes('lg') ? 0.5 : s;
+            s = words.includes('sm') ? 0.15 : s;
+            s = words.includes('xs') ? 0.05 : s;
+
+            if (words && words.length) {
+                // fade - animates opacity: 0 -> 1 / 1 -> 0
+                if (!words.includes('nofade')) {
+                    fr['opacity'] = isShow ? 0 : 1;
+                    to['opacity'] = isShow ? 1 : 0;
+                }
+
+                // up - translate y: 50 -> 0 / 0 -> -50
+                if (words.includes('up')) {
+                    fr['y'] = isShow ? s : 0;
+                    to['y'] = isShow ? 0 : -s;
+                }
+
+                // down - translate y: -50 -> 0 / 0 -> 50
+                if (words.includes('down')) {
+                    fr['y'] = isShow ? -s : 0;
+                    to['y'] = isShow ? 0 : s;
+                }
+
+                // left - translate x: from -100 to 0 / 0 -> 100
+                if (words.includes('right')) {
+                    fr['x'] = isShow ? -s : 0;
+                    to['x'] = isShow ? 0 : s;
+                }
+
+                // right - translate x: from 0.33 to 0 / 0 -> -0.33
+                if (words.includes('left')) {
+                    fr['x'] = isShow ? s : 0;
+                    to['x'] = isShow ? 0 : -s;
+                }
+
+                // zoomin - scale x: 0.66 -> 1 / 1 -> 1.33
+                if (words.includes('zoomin')) {
+                    fr['scale'] = isShow ? 1 - s : 1;
+                    to['scale'] = isShow ? 1 : 1 + s;
+                }
+
+                // zoomout - scale x: 1.33 -> 1 / 1 -> 0.66
+                if (words.includes('zoomout')) {
+                    fr['scale'] = isShow ? 1 + s : 1;
+                    to['scale'] = isShow ? 1 : 1 + s;
+                }
+            }
+
+            // convert tranlsate to percentages
+
+            to.y = this.cssPcnt(to.y);
+            fr.y = this.cssPcnt(fr.y);
+            to.x = this.cssPcnt(to.x);
+            fr.x = this.cssPcnt(fr.x);
+
+            if (reverse) {
+                return {
+                    from: to,
+                    to: fr,
+                };
+            }
+            return {
+                from: fr,
+                to: to,
+            };
+        },
+        enter(element, done) {
+            const params = this.keywordsToParameters(this.animation, 'show');
+            if (params) {
+                gsap.fromTo(element, params.from, {
+                    ...params.to,
+                    duration: this.showDur,
+                    ease: this.showEase,
+                    onComplete: done,
+                });
+            }
+        },
+        leave(element, done) {
+            const params = this.hideAnimation
+                ? this.keywordsToParameters(this.hideAnimation, 'hide')
+                : this.keywordsToParameters(this.animation, 'show', true);
+            if (params) {
+                gsap.to(element, {
+                    ...params.to,
+                    duration: this.hideDur,
+                    ease: this.hideEase,
+                    onComplete: done,
+                });
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+// @at-root {
+//     body {
+//         --pxtx-transition-dur: 0.5s;
+//     }
+// }
+
+// $pxtx-dur: var(--pxtx-transition-dur);
+
+// @include vue-transition(pxtx-fade) {
+//     // define the hidden state (the non-hidden state is implicty -- the normal state)
+//     @include vt-transition {
+//         @include transition(opacity, $dur: $pxtx-dur);
+//     }
+
+// the hidden state before entering
+//     @include vt-hidden-enter {
+//         //transform: translateY(-100px);
+//         opacity: 0;
+//     }
+
+//     // the hidden after exiting
+//     @include vt-hidden-leave {
+//         //transform: translateY(100px);
+//         opacity: 0;
+//     }
+// }
+
+// @include vue-transition(pxtx-fade-up) {
+//     // define the hidden state (the non-hidden state is implicty -- the normal state)
+//     @include vt-transition {
+//         @include transition(opacity transform, $dur: 3s);
+//         //transform: translateY(0px);
+//     }
+
+//     // the hidden state before entering
+//     @include vt-hidden-enter {
+//         transform: scale(0.5);
+//         opacity: 0;
+//     }
+
+//     // the hidden after exiting
+//     @include vt-hidden-leave {
+//         transform: scale(0.5);
+//         opacity: 0;
+//     }
+// } ;
+</style>

package/package.json

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

package/utils/points.js

@@ -0,0 +1,110 @@
+// rounds things to 5 decimals (removes a lot of weird sin/cos noise)
+function fineRound(v) {
+    return Math.round(v * 10000) / 10000;
+}
+
+/**
+ * Returns the bounding box for an array of points {x,y}
+ */
+export function getBoundingBox(points) {
+    if (points.length === 0) {
+        return null; // Return null for an empty array
+    }
+
+    let minX = points[0].x;
+    let maxX = points[0].x;
+    let minY = points[0].y;
+    let maxY = points[0].y;
+
+    // Find the minimum and maximum x and y values
+    for (let i = 1; i < points.length; i++) {
+        const point = points[i];
+        minX = Math.min(minX, point.x);
+        maxX = Math.max(maxX, point.x);
+        minY = Math.min(minY, point.y);
+        maxY = Math.max(maxY, point.y);
+    }
+
+    // Calculate the width and height of the bounding box
+    const width = maxX - minX;
+    const height = maxY - minY;
+
+    // Return the bounding box rectangle
+    return {
+        x: minX,
+        y: minY,
+        width: width,
+        height: height,
+    };
+}
+
+/**
+ * @returns A new array contain all points in the points array after having been rotated angleDeg
+ * degrees around the center of the combined points bounding box.
+ */
+export function rotatePoints(points, angleDeg) {
+    if (angleDeg == 0) {
+        return points;
+    }
+
+    let bounds = getBoundingBox(points);
+
+    // distance to the origin
+    const dx = (bounds.x + bounds.width) / 2;
+    const dy = (bounds.y + bounds.height) / 2;
+
+    points = points.map(p => {
+        const x = p.x - dx;
+        const y = p.y - dy;
+        const angleRad = (angleDeg * Math.PI) / 180;
+        const cosTheta = Math.cos(angleRad);
+        const sinTheta = Math.sin(angleRad);
+        const newX = x * cosTheta - y * sinTheta;
+        const newY = x * sinTheta + y * cosTheta;
+        return { x: fineRound(newX + dx), y: fineRound(newY + dy) };
+    });
+
+    // shift back to the origin
+    bounds = getBoundingBox(points);
+    points = shiftPoints(points, bounds.x, bounds.y);
+
+    return points;
+}
+
+/**
+ * Shifts each point in an array of points {x,y} by dx, dy
+ */
+export function shiftPoints(points, dx, dy) {
+    return points.map(p => {
+        return {
+            x: p.x - dx,
+            y: p.y - dy,
+        };
+    });
+}
+
+/**
+ * Takes an angle in degrees and a line length and returns a point representing the end of that line
+ * relative to the origin
+ * @param {*} angleInDegrees an angle in degrees
+ * @param {*} lineLength a length
+ * @returns a point {x, y}
+ */
+
+export function getLineEndPoint(angleInDegrees, lineLength) {
+    const angleInRadians = (angleInDegrees * Math.PI) / 180;
+    return {
+        x: fineRound(lineLength * Math.cos(angleInRadians)),
+        y: fineRound(lineLength * Math.sin(angleInRadians)),
+    };
+}
+
+export function getLineRect(angleInDegrees, lineLength) {
+    const endPoint = getLineEndPoint(angleInDegrees, lineLength);
+    return {
+        x: 0,
+        y: 0,
+        width: Math.abs(endPoint.x),
+        height: Math.abs(endPoint.y),
+    };
+}