@thinkpixellab-public/px-vue 3.0.67 → 3.0.69

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/PxArrowScroller.vue

@@ -55,7 +55,7 @@ ar
 // import Component from '~/components/Component.vue';
 // import Mixin from '~/components/Mixin.vue';
 import PxBaseResize from './PxBaseResize.vue';
-import PxIcon from '@thinkpixellab-public/px-vue/components/PxIcon.vue';
+import PxIcon from './PxIcon.vue';
 
 export default {
     name: 'px-arrow-scroller',

package/components/PxIconButton.vue

@@ -29,6 +29,7 @@
             :viewBox="svgViewBox"
             :height="calcHeight"
             :width="calcWidth"
+            :title="title"
         />
     </button>
 </template>
@@ -111,5 +112,12 @@ export default {
             color: accent(-2);
         }
     }
+
+    &--subtle {
+        opacity: 0.33;
+        &:hover {
+            opacity: 1;
+        }
+    }
 }
 </style>

package/components/PxMenu.vue

@@ -0,0 +1,240 @@
+<!--
+    The general idea here is that you define a context menu and then use the v-context-menu
+    directive to assign it to an element and pass in optional context.
+
+    The directive creates a handler for the element's contextmenu event and shows the appropriate
+    context menu with the provided context.
+
+    Here is what all of that looks like:
+
+    // define the context menu
+
+    <px-menu ref="mymenu" :items="[
+        {
+            id: 'copy',
+            icon: require('myicon.svg'),
+            label: 'Copy',
+
+            // function with a single arg which will be the context from the directive
+            handler: 'onContextMenuCopy',
+
+            // visible / enabled can be a function or bool
+            enabled: (ctx) => ctx.isSomething,
+            visible: true
+        },
+        {
+            id: 'copy',
+            icon: require('myicon.svg'),
+            label: 'Copy',
+
+            // function with a single arg which will be the context from the directive
+            handler: 'onContextMenuCopy',
+
+            // visible / enabled can be a function or bool
+            enabled: (ctx) => ctx.isSomething,
+            visible: true
+        },
+        {
+            isSeparator: true
+        },
+        {
+            id: 'advanced',
+            label: 'Advanced',
+            items: [],
+        },
+    ]" />
+
+    // use the context menu (no context)
+    <div v-context-menu="'mymenu'" />
+
+    // use the context menu (pass dynamic mydata as context)
+    <div v-context-menu:[mydata]="'mymenu'" />
+
+
+-->
+<template>
+    <px-float
+        v-bind="{
+            placement: 'right-start',
+            ...floatProps,
+        }"
+        :popup-class="bem('popup')"
+        ref="popup"
+        variant="none"
+        @hide="afterHide"
+    >
+        <div :class="bem()">
+            <slot v-for="item in items" :item="item" :data="data" :done="hide">
+                <PxMenuItem
+                    :key="item.id"
+                    :separator="item.separator"
+                    :label="item.label"
+                    :hint="item.hint"
+                    :items="item.items"
+                    :icon="item.icon"
+                    :visible="item.visible"
+                    :disabled="item.disabled"
+                    :handler="item.handler"
+                    :iconSize="calcIconSize"
+                    :iconClass="iconClass"
+                    :data="data"
+                    @done="hide"
+                    @iconsized="iconSized"
+                />
+            </slot>
+        </div>
+    </px-float>
+</template>
+
+<script>
+import PxFloat from './PxFloat.vue';
+import PxMenuItem from './PxMenuItem.vue';
+
+// ================================================================================
+// Component
+// ================================================================================
+
+const PxMenu = {
+    name: 'px-menu',
+    components: { PxFloat, PxMenuItem },
+    mixins: [],
+    props: {
+        items: { type: Array, default: null },
+        iconSize: { type: [String, Number], default: 1 },
+        iconClass: { type: String, default: null },
+        floatProps: { type: Object, default: null },
+    },
+    data() {
+        return {
+            data: null,
+        };
+    },
+    computed: {
+        calcIconSize() {
+            if (this.items.find(item => !!item.icon)) {
+                return this.iconSize;
+            }
+            return 0;
+        },
+    },
+    methods: {
+        showAtCursor(mouseEvent, data) {
+            this.data = data;
+            this.$refs.popup?.showAtCursor(mouseEvent);
+        },
+        show(data) {
+            this.data = data;
+            this.$refs.popup?.show();
+        },
+        hide() {
+            this.$refs.popup?.hide();
+        },
+        afterHide() {
+            this.data = null;
+        },
+        iconSized(e) {
+            console.log(e);
+        },
+    },
+};
+
+// ================================================================================
+// Directives
+// ================================================================================
+
+const contextMenuDirective = {
+    //bind: (el, binding, vnode) => {
+    bind(el, binding, vnode) {
+        if (!binding || !vnode) {
+            return;
+        }
+
+        binding.el = vnode?.elm;
+        binding.contextMenuHandler = e => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const name = binding?.value;
+            const data = binding?.arg;
+            const $refs = vnode?.context?.$refs;
+
+            if ($refs && name in $refs) {
+                const menu = $refs[name];
+
+                if (typeof menu?.show == 'function') {
+                    menu.showAtCursor(e, data);
+                }
+            }
+        };
+
+        if (binding.el) {
+            binding.el.addEventListener('contextmenu', binding.contextMenuHandler);
+        }
+    },
+    unbind(el, binding) {
+        if (binding.el) {
+            binding.el.removeEventListener('contextmenu', binding.contextMenuHandler);
+        }
+    },
+};
+
+const menuDirective = {
+    //bind: (el, binding, vnode) => {
+    bind(el, binding, vnode) {
+        if (!binding || !vnode) {
+            return;
+        }
+
+        binding.el = vnode?.elm;
+        binding.contextMenuHandler = e => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const name = binding?.value;
+            const data = binding?.arg;
+            const $refs = vnode?.context?.$refs;
+
+            if ($refs && name in $refs) {
+                const menu = $refs[name];
+
+                if (typeof menu?.show == 'function') {
+                    menu.show(e, data);
+                }
+            }
+        };
+
+        if (binding.el) {
+            binding.el.addEventListener('click', binding.contextMenuHandler);
+        }
+    },
+    unbind(el, binding) {
+        if (binding.el) {
+            binding.el.removeEventListener('click', binding.contextMenuHandler);
+        }
+    },
+};
+
+export {
+    PxMenu as default,
+    contextMenuDirective as contextMenuDirective,
+    menuDirective as menuDirective,
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-menu {
+    font-family: get('font-family');
+    background-color: clr(page-bg);
+    color: clr(page-fg);
+    border-radius: get('controls:border-radius');
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+
+    &__popup {
+        @include css-map(popup());
+    }
+}
+</style>

package/components/PxMenuItem.vue

@@ -0,0 +1,147 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <button
+        v-if="!separator && isVisible"
+        :class="bem({ clicked, disabled: isDisabled })"
+        :title="hint"
+        :disabled="isDisabled"
+        @click="onClick"
+    >
+        <span
+            ref="icon"
+            v-if="iconSize"
+            :class="[bem('icon'), iconClass]"
+            :style="{ minWidth: cssEmFallback(iconSize) }"
+        >
+            <PxIcon :src="icon" :size="cssEmFallback(iconSize)" size-bias="width" />
+        </span>
+        <span :class="bem('label')">
+            {{ label }}
+        </span>
+    </button>
+
+    <hr v-else-if="visible" :class="bem({ separator: true })" :visible="isVisible" />
+</template>
+
+<script>
+import PxIcon from './PxIcon.vue';
+
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+
+export default {
+    name: 'px-menu-item',
+    components: { PxIcon },
+    // mixins: [ Mixin ],
+    props: {
+        separator: { type: Boolean, default: false },
+        label: { type: String, default: null },
+        hint: { type: String, default: null },
+        items: { type: Array, default: null },
+        icon: { type: String, default: null },
+        iconSize: { type: [String, Number], default: 1 },
+        iconClass: { type: String, default: null },
+        disabled: { type: [Function, Boolean], default: false },
+        visible: { type: [Function, Boolean], default: true },
+        handler: { type: Function, default: null },
+        data: { default: null },
+    },
+    data() {
+        return {
+            // used only to track visual state
+            clicked: false,
+        };
+    },
+    computed: {
+        isVisible() {
+            if (typeof this.visible == 'boolean') {
+                return this.visible;
+            }
+            if (typeof this.visible == 'function') {
+                return this.visible(this.data);
+            }
+            return true;
+        },
+        isDisabled() {
+            if (typeof this.disabled == 'boolean') {
+                return this.disabled;
+            }
+            if (typeof this.disabled == 'function') {
+                return this.disabled(this.data);
+            }
+            return false;
+        },
+    },
+    // watch: {},
+    mounted() {
+        this.clicked = false;
+    },
+    methods: {
+        onClick() {
+            this.clicked = true;
+
+            if (typeof this.handler == 'function') {
+                this.handler(this.data);
+            }
+            setTimeout(() => {
+                this.$emit('done');
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-menu-item {
+    @include control-reset();
+    font-size: inherit;
+    background-color: inherit;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    min-width: 7em;
+    max-width: 20em;
+    white-space: wrap;
+    line-height: 1.33;
+    text-align: left;
+    padding: 0.33em 1em;
+
+    &__icon {
+        margin-left: -0.25em;
+        flex: none;
+        display: flex;
+        align-items: center;
+    }
+
+    &__label {
+        white-space: nowrap;
+    }
+
+    &--clicked,
+    &:hover {
+        background-color: clr(select);
+        color: contrast-color(clr(select));
+    }
+
+    &:disabled {
+        background-color: transparent !important;
+        color: inherit !important;
+        opacity: 0.5;
+    }
+
+    &--separator {
+        background-color: currentColor;
+        opacity: 0.25;
+        height: 1px;
+        min-height: 1px;
+        max-height: 1px;
+        padding: 0;
+    }
+}
+</style>

package/components/PxSvg.vue

@@ -23,10 +23,11 @@
     <inline-svg
         class="px-svg"
         :transformSource="transform"
-        :src="src"
+        :src="src || ''"
         :viewBox="svgViewBox"
         :height="calcHeight"
         :width="calcWidth"
+        :title="title"
         v-on="$listeners"
     />
 </template>
@@ -59,6 +60,9 @@ export default {
 
         // string replacements to be made on the svg (we replace black with currentColor by default)
         replacements: { type: Object, default: null },
+
+        // set the title for accessibility
+        title: { type: String, default: null },
     },
     data() {
         return { svgWidth: null, svgHeight: null, svgViewBox: null };

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/dev/demos/Demo-PxFloat.vue

@@ -41,7 +41,7 @@
 
         <!-- mouse -->
         <div :class="bem('button')" @click="showMouseFloat">Mouse</div>
-        <px-float ref="mouseFloat" :placement="'bottom-start'" variant="default sm">
+        <px-float ref="mouseFloat" :placement="'bottom-start'" variant="dialog sm">
             Positioned with showAtCursor! (Note: needs to be done pogramatically because we only
             have access to mouse coordinates in a mouse event.)
         </px-float>

package/dev/demos/Demo-PxMenu.vue

@@ -0,0 +1,90 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <PxMenu
+            ref="menu"
+            :items="[
+                {
+                    id: 'copy',
+                    label: 'Copy',
+                    icon: require('../../assets/feather/copy.svg'),
+                    iconSize: 1,
+                    handler: onCopy,
+                },
+                {
+                    id: 'paste',
+                    label: 'Paste',
+                    icon: require('../../assets/feather/clipboard.svg'),
+                    iconSize: 1,
+                    handler: onPaste,
+                },
+                {
+                    id: 'sep1',
+                    separator: true,
+                },
+                {
+                    id: 'paste2',
+                    label: 'Paste',
+
+                    iconSize: 1,
+                },
+                {
+                    id: 'paste3',
+                    label: 'Paste',
+                    icon: require('../../assets/feather/clipboard.svg'),
+                    iconSize: 1.5,
+                },
+            ]"
+        />
+
+        <div :class="bem('target')" v-context-menu:[mydata]="'menu'" v-if="visible">
+            Right Click Me!
+        </div>
+
+        <button @click="visible = !visible">{{ visible ? 'Hide' : 'Show' }}</button>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+
+import { contextMenuDirective } from '../../components/PxMenu.vue';
+import PxMenu from '../../components/PxMenu.vue';
+
+export default {
+    name: 'demo-px-menu',
+    components: { PxMenu },
+    directives: { contextMenu: contextMenuDirective },
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    data() {
+        return { visible: true, mydata: 'This is some data.' };
+    },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    methods: {
+        onCopy(data) {
+            console.log('copy: ' + data);
+        },
+        onPaste(data) {
+            console.log('paste: ' + data);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../../styles/px.scss' as *;
+.demo-px-menu {
+    &__target {
+        width: 300px;
+        height: 300px;
+        background-color: orange;
+    }
+}
+</style>

package/dev/dev.vue

@@ -18,6 +18,7 @@ import DemoPxStylesPreview from './demos/Demo-PxStylesPreview.vue';
 import DemoPxPivot from './demos/Demo-PxPivot.vue';
 import DemoPxFloat from './demos/Demo-PxFloat.vue';
 import DemoPxContain from './demos/Demo-PxContain.vue';
+import DemoPxMenu from './demos/Demo-PxMenu.vue';
 
 export default Vue.extend({
     components: {
@@ -32,6 +33,7 @@ export default Vue.extend({
         DemoPxPivot,
         DemoPxFloat,
         DemoPxContain,
+        DemoPxMenu,
     },
     name: 'ServeDev',
     data() {
@@ -44,7 +46,7 @@ export default Vue.extend({
         const params = new Proxy(new URLSearchParams(window.location.search), {
             get: (searchParams, prop) => searchParams.get(prop),
         });
-        this.componentToRender = params.component || 'DemoPxFloat';
+        this.componentToRender = params.component || 'DemoPxMenu';
         console.log(`this.componentToRender: ${this.componentToRender}`);
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.67",
+    "version": "3.0.69",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -9,7 +9,7 @@
         "url": "git+https://github.com/thinkpixellab/px-vue.git"
     },
     "scripts": {
-        "serve": "vue-cli-service serve dev/serve.js"
+        "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve dev/serve.js"
     },
     "dependencies": {
         "@floating-ui/dom": "^1.0.1",

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),
+    };
+}