@thinkpixellab-public/px-vue 3.0.68 → 3.0.70

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

@@ -0,0 +1,50 @@
+<!--
+
+    Usage:
+
+    To perform an action the first time the browser tab becomes active, override the browserTabFirstActive() method.
+
+    To watch for changes to the browser tab's active state, watch the isBrowserTabActive property.
+
+-->
+<script>
+export default {
+    data() {
+        return { isBrowserTabActive: false, browserTabActivationCount: 0 };
+    },
+    mounted() {
+        if (typeof document == undefined) {
+            console.warn('Unable to create visibility change listener.  No document object.');
+            return;
+        }
+
+        document.addEventListener('visibilitychange', this.onTabVisibilityChange);
+        this.onTabVisibilityChange();
+    },
+    beforeDestroy() {
+        document.removeEventListener('visibilitychange', this.onTabVisibilityChange);
+    },
+    methods: {
+        onTabVisibilityChange() {
+            if (document.visibilityState === 'visible') {
+                this.isBrowserTabActive = true;
+                this.browserTabActivationCount++;
+
+                if (this.browserTabActivationCount == 1) {
+                    if (this.browserTabFirstActive) {
+                        this.browserTabFirstActive();
+                    }
+                }
+            } else {
+                this.isBrowserTabActive = false;
+            }
+        },
+
+        // OVERRIDE this method to perform an action the first time the browser tab becomes active
+        //
+        // browserTabFirstActive() {
+        //     console.log('browser tab first active');}
+        // }
+    },
+};
+</script>

package/components/PxFlip.vue

@@ -0,0 +1,78 @@
+<!--
+    Usage:
+
+    <px-flip :states="['select', 'interact']" :current="'select'">
+        <template :state="state">
+            <div :class="bem('container', { state })">
+                <div data-pxflip>...</div>
+                <div data-pxflip>...</div>
+            </div>
+        </template>
+    </px-flip>
+-->
+
+<template>
+    <div :class="bem()">
+        <!-- in the component -->
+        <slot name="default" :state="currentStateValue">
+            <!-- fallback -->
+        </slot>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+import { gsap } from 'gsap';
+import { Flip } from 'gsap/Flip';
+
+export default {
+    name: 'px-flip',
+    // components: { Component },
+    // mixins: [ Mixin ],
+    props: {
+        states: { type: Array, default: null },
+        current: { type: String, default: null },
+        otherProps: { type: String, default: 'opacity,color,backgroundColor' },
+        selector: { type: String, default: '[data-flip]' },
+        targets: { default: null },
+    },
+    data() {
+        return { currentStateValue: this.current };
+    },
+    // computed: {},
+    watch: {
+        async current(nv) {
+            const targetElements = this.targets || this.$el.querySelectorAll(this.selector);
+
+            console.log(targetElements);
+
+            // save initial state
+            const state = Flip.getState(targetElements, { props: this.otherProps, absolute: true });
+
+            // make state changes
+            this.currentStateValue = nv;
+
+            await this.$nextTick();
+            // animate from the old state to the new one
+            // animate from the previous state to the current one:
+
+            Flip.from(state, {
+                duration: 1,
+                ease: 'power1.inOut',
+                absolute: true,
+            });
+        },
+    },
+    mounted() {
+        gsap.registerPlugin(Flip);
+    },
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+.px-flip {
+    // add styles here
+}
+</style>

package/components/PxGsapScrubber.vue

@@ -81,13 +81,16 @@ export default {
             }
 
             this.timeline = t;
-            this.progress = this.timeline.progress();
-            this.isPlaying = !this.timeline.paused();
 
-            this.timeline.eventCallback('onUpdate', () => {
+            if (this.timeline) {
                 this.progress = this.timeline.progress();
                 this.isPlaying = !this.timeline.paused();
-            });
+
+                this.timeline.eventCallback('onUpdate', () => {
+                    this.progress = this.timeline.progress();
+                    this.isPlaying = !this.timeline.paused();
+                });
+            }
         },
         pause() {
             if (this.timeline) {

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

@@ -0,0 +1,87 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <PxFlip :states="['open', 'close']" :current="currentState">
+            <template #default="{ state }">
+                {{ state }}
+                <br />
+                <br />
+                <span :class="bem('container', { state })">
+                    <span data-flip />
+                    <span data-flip />
+                    <span data-flip />
+                </span>
+            </template>
+        </PxFlip>
+        <button @click="toggleState">Toggle</button>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+
+import PxFlip from '../../components/PxFlip.vue';
+
+export default {
+    name: 'demo-px-flip',
+    components: { PxFlip },
+
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    data() {
+        return {
+            currentState: 'open',
+        };
+    },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    methods: {
+        toggleState() {
+            if (this.currentState == 'open') {
+                this.currentState = 'close';
+            } else {
+                this.currentState = 'open';
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../../styles/px.scss' as *;
+.demo-px-flip {
+    padding: 5em;
+    &__container {
+        width: 4em;
+        height: 4em;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        position: relative;
+
+        span {
+            width: 100%;
+            height: 0.5em;
+            background-color: currentColor;
+        }
+
+        &--state-open {
+            span {
+                transform: rotate(0deg) scale(1);
+            }
+        }
+
+        &--state-close {
+            span {
+                transform: scale(0.5);
+                opacity: 0.5;
+            }
+        }
+    }
+}
+</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,8 @@ 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';
+import DemoPxFlip from './demos/Demo-PxFlip.vue';
 
 export default Vue.extend({
     components: {
@@ -32,6 +34,8 @@ export default Vue.extend({
         DemoPxPivot,
         DemoPxFloat,
         DemoPxContain,
+        DemoPxMenu,
+        DemoPxFlip,
     },
     name: 'ServeDev',
     data() {
@@ -44,7 +48,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 || 'DemoPxFlip';
         console.log(`this.componentToRender: ${this.componentToRender}`);
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.68",
+    "version": "3.0.70",
     "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/balanceText.js

@@ -110,8 +110,8 @@ function textElementIsMultipleLines(element) {
     // Update the first word variable in the dom
     firstWord = document.getElementById('element-first-word');
 
-    firstWordHeight = firstWord.offsetHeight;
-    elementHeight = element.offsetHeight;
+    firstWordHeight = firstWord?.offsetHeight;
+    elementHeight = element?.offsetHeight;
 
     // Restore the original element text
     element.innerHTML = ORIGINAL_ELEMENT_TEXT;