@thinkpixellab-public/px-vue 3.0.2 → 3.0.4

package/README.md

@@ -13,7 +13,7 @@ be preserved.
 There is no primary entry point into this package so individual components or other files need to be imported directly. The package uses the same project structure as most of our other Vue projects (e.g. components in the /components folder, etc.).
 
 ```javascript
-import PxToggle from '@thinkpixellab/px-vue/components/PxToggle.vue';
+import PxToggle from '@thinkpixellab-public/px-vue/components/PxToggle.vue';
 ```
 
 ## Dependency on px-styles
@@ -57,7 +57,7 @@ Because we use a hard coded path to px-styles.scss, that file will get resolved
 
 ## Aliasing a Local Version During Development
 
-To resolve `@thinkpixellab/px-vue` from a local folder during development, you can extend webpack as follows
+To resolve `@thinkpixellab-public/px-vue` from a local folder during development, you can extend webpack as follows
 
 ```js
 const path = require('path');
@@ -66,7 +66,7 @@ const path = require('path');
 {
     resolve: {
         alias: {
-            '@thinkpixellab/px-vue': path.resolve(__dirname, '../px-vue'),
+            '@thinkpixellab-public/px-vue': path.resolve(__dirname, '../px-vue'),
         },
     }
 }

package/components/PxDropdown.vue

@@ -122,16 +122,10 @@ export default {
 
     // popup
 
-    $dropdown-popup: flat-merge(
-        get(
-            'controls:popup',
-            (
-                display: flex,
-                flex-direction: column,
-                background-color: clr(page-bg),
-                border-radius: get('controls:border-radius'),
-                box-shadow: shadow(15),
-            )
+    $dropdown-popup: popup(
+        (
+            display: flex,
+            flex-direction: column,
         )
     );
 

package/components/PxFloat.vue

@@ -1,32 +1,631 @@
 <!--
-    Describe this component...
+
+    Floating ui container. Can be used for dialogs, modals, popups, menus, etc. Used floating-ui
+    (https://floating-ui.com/) for positioning. Can handle modal things like disabling scrolling,
+    focus management, etc. but doesn't by default. API is designed to be somewhat progressive (does
+    more as you ask for more).
+
+    Common variants:
+
+    none - removes all styling
+    default - provides basic popup styling
+    dialog - provides same basic popup style as default but centered in the screen
+    sm, md, lg, xl - provides min/max sizes (expected to be used with dialog)
+    gray - gives the overlay a gray shade
+    blur - gives the overlay a blurred backdrop filter
+
 -->
+
 <template>
-    <div :class="bem()"></div>
+    <px-portal :disabled="!portalEnabled" v-if="keepInDom || visibleValue || transitionVisible">
+        <transition
+            :name="calcTransitionName"
+            @before-enter="transitionVisible = true"
+            @after-leave="transitionVisible = false"
+            :style="{ zIndex: zStart + currentLayerIndex }"
+        >
+            <div
+                :class="bem({ ...variantsMap, absolute: strategy == 'absolute' })"
+                v-show="visibleValueNext"
+            >
+                <!-- overlay element -->
+                <slot name="overlay" v-if="overlayEnabled">
+                    <div
+                        :class="[bem('overlay'), overlayClass]"
+                        @click="overlayClick"
+                        v-bind="overlayAttributes"
+                        :style="{
+                            pointerEvents: visibleValue ? null : 'none',
+                            userSelect: visibleValue ? null : 'none',
+                        }"
+                    >
+                        <slot name="overlay-content"></slot>
+                    </div>
+                </slot>
+
+                <!-- popup element -->
+                <div
+                    ref="popup"
+                    :class="[bem('popup'), popupClass]"
+                    :style="{
+                        pointerEvents: visibleValue ? null : 'none',
+                        userSelect: visibleValue ? null : 'none',
+                        ...(positionCss || {}),
+                        ...popupStyle,
+                    }"
+                >
+                    <slot />
+                </div>
+            </div>
+        </transition>
+    </px-portal>
 </template>
 
 <script>
-// import { mapState } from 'vuex';
-// import Component from '~/components/Component.vue';
-// import Mixin from '~/components/Mixin.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
+import PxPortal from './PxPortal.vue';
+
+import { computePosition, autoUpdate, flip, shift, offset } from '@floating-ui/dom';
+import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+
+const FOCUS_ELEMENTS = [
+    'button',
+    '[href]:not(.disabled)',
+    'input',
+    'select',
+    'textarea',
+    '[tabindex]',
+    '[contenteditable]',
+];
+
+let globalLayerIndex = 0;
+let globalClearLayerIndex = 0;
+
 export default {
-    name: 'px-float'
-    // components: { Component },
-    // mixins: [ Mixin ],
+    name: 'px-float',
+    components: { PxPortal },
+    mixins: [PxBaseVariants],
     props: {
-        a: { type: Boolean, default: false }
+        visible: { type: Boolean, default: false },
+
+        // whether to keep the popup element in the DOM even if not visible
+        keepInDom: { type: Boolean, default: false },
+
+        // whether to use a portal (often required for correct layout, esp. if using an overlay)
+        portalEnabled: { type: Boolean, default: true },
+
+        // automatically move focus to the contents of the modal when opened
+        autoFocusEnabled: { type: Boolean, default: true },
+
+        // automatically restore focus with then modal closes
+        restoreFocusEnabled: { type: Boolean, default: true },
+
+        // Selector to find the first element that gets focus when focus is set on the dialog
+        autoFocusSelector: { type: String, default: '[autofocus]' },
+
+        // whether to disable scrolling when visible
+        disablesScroll: { type: Boolean, default: true },
+
+        // if true, esc key will close the popup
+        escCloses: { type: Boolean, default: true },
+
+        // The starting point for the z-index (note: incremented as more layers of popups are opened
+        // to ensure that the last opened from the same starting z will be on top of each other)
+        zStart: { type: Number, default: 999999 },
+
+        // An additional class set on the popup element
+        popupClass: { type: String, default: '' },
+
+        // Style object that gets merged onto the popup
+        popupStyle: { type: Object, default: null },
+
+        // Whether to render an overlay element
+        overlayEnabled: { type: Boolean, default: true },
+
+        // An additional class set on the overlay element
+        overlayClass: { type: String, default: '' },
+
+        // Additional attributes that get set on the overlay (can be used for adding analytics attributes, etc.)
+        overlayAttributes: { type: Object, default: null },
+
+        // Whether clicking the overlay element will close the popup
+        overlayClose: { type: Boolean, default: true },
+
+        // The name of the transition (null will defaults to a basic fade but variants can override)
+        transitionName: { type: String, default: null },
+
+        // floating ui options
+
+        // The reference element when positioning. Can be an element, a virtual element (see docs)
+        // or a string. Supported strings include:
+        // - previous (previous sibling element)
+        // - next (next sibling element)
+        // - cursor (show at cursor location)
+        // - css selector (will use first found element)
+        reference: { default: 'previous' },
+
+        // null (no placement - use css or variant)
+        // top | right | bottom | left (+? -start / -end)
+        placement: { type: String, default: null },
+
+        // whether the position updates automatically when placement has been set
+        autoUpdate: { type: Boolean, default: true },
+
+        // fixed or absolute positioning
+        strategy: { type: String, default: 'fixed' },
+
+        // add spacing along the core axis, can be a number or an options object
+        // (see https://floating-ui.com/docs/offset)
+        offset: { default: 0 },
+
+        // flip to the other side of the reference element when space is limited
+        flip: { default: true },
+
+        // like flip but for the start/end direction
+        shift: { default: true },
+
+        // NOT IMPLEMENTED
+        // hiddenClass: { type: String, default: null },
+
+        // NOT IMPLEMENTED
+        // inline: { type: Boolean, default: false },
+
+        // use translate instead of left/top css properties (may increase performance in some cases)
+        useTranslate: { type: Boolean, default: false },
+    },
+    data() {
+        return {
+            // mirrors visible
+            visibleValue: false,
+
+            // mirrors visibleValue but one tick behind (so that we can trigger actions that require the popup to be in the DOM)
+            visibleValueNext: false,
+
+            // mirrors reference
+            referenceValue: null,
+
+            // css for positioning the element with floating-ui
+            positionCss: null,
+
+            // true while the element remains visible during a transition (even if visible/visibleValue are false)
+            transitionVisible: false,
+
+            // z offset of the current layer
+            currentLayerIndex: 0,
+        };
+    },
+    computed: {
+        // the name of the transition to use ()
+        calcTransitionName() {
+            if (this.transitionName) {
+                return this.transitionName;
+            }
+
+            return this.isVariant('blur') ? 'px-float-fade-blur' : 'px-float-fade';
+        },
+    },
+
+    watch: {
+        reference(nv) {
+            this.referenceValue = nv;
+        },
+
+        referenceValue(nv) {
+            this.$emit('update:reference', nv);
+        },
+
+        visible(nv) {
+            this.visibleValue = nv;
+        },
+
+        visibleValue(nv, ov) {
+            // emit update when visibleValue changes (enables .sync on parent)
+            this.$emit('update:visible', nv);
+
+            if (this.isServer) {
+                return;
+            }
+
+            // layer management
+
+            // show
+            if (ov === false && nv === true) {
+                globalLayerIndex += 1;
+                this.currentLayerIndex = globalLayerIndex;
+            }
+
+            // hide
+            if (ov === true && nv === false) {
+                setTimeout(() => {
+                    globalLayerIndex -= 1;
+                }, 30);
+            }
+
+            this.$nextTick(() => {
+                this.visibleValueNext = nv;
+            });
+        },
+
+        visibleValueNext(nv) {
+            // key handler
+
+            if (nv) {
+                document.addEventListener('keydown', this.onKey);
+            } else {
+                document.removeEventListener('keydown', this.onKey);
+            }
+
+            // delayed actions (settimeout seems to work but $nextTick doesn't)
+
+            setTimeout(() => {
+                // floating-ui
+
+                if (nv) {
+                    let reference = this.getReferenceElement();
+                    let popup = this.$refs.popup;
+
+                    this.updatePosition(reference, popup);
+
+                    if (this.autoUpdate) {
+                        this.cleanup = autoUpdate(reference, popup, () =>
+                            this.updatePosition(reference, popup)
+                        );
+                    }
+                } else {
+                    if (this.cleanup) {
+                        console.log('cleanup');
+                        this.cleanup();
+                        this.cleanup = null;
+                    }
+                }
+
+                // focus
+
+                if (nv) {
+                    // track the element that was focused on open
+                    this.previousActiveElement = document.activeElement;
+
+                    // focus the first focusable element (or autofocus element if set)
+                    if (this.autoFocusEnabled) {
+                        this.setAutoFocus();
+                    }
+                } else {
+                    // restore focus
+                    if (this.previousActiveElement && this.restoreFocusEnabled) {
+                        this.previousActiveElement.focus({ preventScroll: true });
+                        this.previousActiveElement = null;
+                    }
+                }
+
+                // disable scrolling
+
+                if (nv) {
+                    if (this.disablesScroll) {
+                        disableBodyScroll(this.$refs.popup, { reserveScrollBarGap: true });
+                        if (!globalClearLayerIndex) {
+                            globalClearLayerIndex = globalLayerIndex;
+                        }
+                    }
+                } else {
+                    if (globalLayerIndex <= globalClearLayerIndex) {
+                        clearAllBodyScrollLocks();
+                        globalClearLayerIndex = 0;
+                    }
+                }
+            });
+        },
+    },
+    mounted() {
+        this.visibleValue = this.visible;
+        this.transitionVisible = this.visible;
+        this.referenceValue = this.reference;
+    },
+    methods: {
+        show(reference) {
+            this.hideSource = null;
+            this.visibleValue = true;
+            this.referenceValue = reference;
+        },
+
+        showAtCursor(mouseEvent) {
+            this.show({
+                getBoundingClientRect() {
+                    return {
+                        width: 0,
+                        height: 0,
+                        x: mouseEvent.clientX,
+                        y: mouseEvent.clientY,
+                        top: mouseEvent.clientY,
+                        left: mouseEvent.clientX,
+                        right: mouseEvent.clientX,
+                        bottom: mouseEvent.clientY,
+                    };
+                },
+            });
+        },
+
+        hide(hideSource) {
+            this.hideSource = hideSource;
+            this.visibleValue = false;
+        },
+
+        overlayClick() {
+            if (this.overlayClose) {
+                this.visibleValue = false;
+            }
+        },
+
+        onKey(e) {
+            if (this.visibleValue) {
+                if (e.keyCode === 27 && this.escCloses) {
+                    this.onEsc(e);
+                } else if (e.keyCode === 9) {
+                    this.onTab(e);
+                }
+            }
+        },
+
+        onEsc() {
+            if (this.currentLayerIndex == globalLayerIndex) {
+                this.hide('esc');
+                this.$emit('cancel');
+            }
+        },
+
+        onTab(e) {
+            // Refresh this on every tab press in case visibility of something has changed
+            let focusables = this.getFocusableChildren();
+            let focusedIndex = focusables.indexOf(document.activeElement);
+
+            // Trap tab focus
+            if (e.shiftKey && focusedIndex <= 0) {
+                focusables[focusables.length - 1].focus();
+                e.preventDefault();
+            } else if (!e.shiftKey && focusedIndex === focusables.length - 1) {
+                focusables[0].focus();
+                event.preventDefault();
+            }
+        },
+
+        setAutoFocus() {
+            let focusables = this.getFocusableChildren();
+            let dialogFocusable = this.$refs.popup?.querySelector(this.autoFocusSelector);
+            let focused = dialogFocusable || focusables[0];
+            if (focused) {
+                focused.focus({ preventScroll: true });
+            }
+        },
+
+        getFocusableChildren() {
+            let f = [...(this.$refs.popup?.querySelectorAll(FOCUS_ELEMENTS.join(',')) || [])];
+
+            // filter to visible only
+            f = f.filter(child => {
+                return (
+                    child.tabIndex >= 0 &&
+                    !!(child.offsetWidth || child.offsetHeight || child.getClientRects().length)
+                );
+            });
+
+            return f.sort((a, b) => {
+                if (a.tabIndex > b.tabIndex) {
+                    return 1;
+                }
+                if (a.tabIndex < b.tabIndex) {
+                    return -1;
+                }
+                return 0;
+            });
+        },
+
+        updatePosition(reference) {
+            if (this.isServer) {
+                return;
+            }
+
+            const middleware = [];
+
+            if (this.offset) {
+                middleware.push(offset(this.offset));
+            }
+
+            if (this.shift) {
+                middleware.push(shift(this.shift));
+            }
+
+            if (this.flip) {
+                middleware.push(flip(this.flip));
+            }
+
+            if (this.placement && this.$refs.popup && reference) {
+                computePosition(reference, this.$refs.popup, {
+                    placement: this.placement,
+                    strategy: this.strategy,
+                    middleware: middleware,
+                }).then(({ x, y }) => {
+                    if (this.useTranslate) {
+                        this.positionCss = {
+                            transform: `translate(${this.cssPx(x)},${this.cssPx(y)})`,
+                        };
+                    } else {
+                        this.positionCss = {
+                            left: this.cssPx(x),
+                            top: this.cssPx(y),
+                        };
+                    }
+                });
+            } else {
+                this.positionCss = null;
+            }
+        },
+
+        getReferenceElement() {
+            let reference = this.referenceValue;
+
+            if (typeof reference == 'string') {
+                // previous sibling
+                if (reference == 'previous') {
+                    reference = this.$el.previousSibling;
+                }
+
+                // next sibling
+                else if (reference == 'next') {
+                    reference = this.$el.nextSibling;
+                }
+
+                // selector
+                else {
+                    reference = document.querySelector(reference);
+                }
+            }
+
+            return reference;
+        },
     },
-    // data() { return { b: 0 }; },
-    // computed: {},
-    // watch: {},
-    // mounted() {},
-    // methods: {},
 };
 </script>
 
 <style lang="scss">
-@import '@/styles/include.scss';
+@use '../styles/px.scss' as *;
+
+$d: 0.4s;
+
 .px-float {
-    // add styles here
+    position: relative;
+    top: 0;
+    left: 0;
+
+    &__overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+    }
+
+    &__popup {
+        position: fixed;
+        top: 0;
+        left: 0;
+    }
+
+    &--absolute {
+        position: absolute;
+    }
+
+    // variants
+
+    // styles
+
+    &--none {
+        // reset
+    }
+
+    &--dialog &,
+    &--default & {
+        &__popup {
+            @include css-map(
+                popup(
+                    (
+                        padding: sp(2),
+                    )
+                )
+            );
+        }
+    }
+
+    &--dialog & {
+        &__popup {
+            top: 40%;
+            left: 50%;
+            transform: translate(-50%, -40%);
+        }
+    }
+
+    // sizes
+
+    &--sm & {
+        &__popup {
+            max-width: min(94vw, 320px);
+        }
+    }
+
+    &--md & {
+        &__popup {
+            max-width: min(94vw, 600px);
+        }
+    }
+
+    &--lg & {
+        &__popup {
+            max-width: min(94vw, 800px);
+        }
+    }
+
+    &--lx & {
+        &__popup {
+            max-width: min(94vw, 1280px);
+        }
+    }
+
+    &--container {
+        max-width: min(94vw, get('container:width'));
+    }
+
+    // overlays
+
+    &--gray & {
+        &__overlay {
+            background-color: rgba(gray(-4), 0.4);
+        }
+    }
+
+    &--blur & {
+        // also see the transition below
+
+        &__overlay {
+            backdrop-filter: blur(4px);
+        }
+    }
+}
+
+// ----------------------------------------------------------------------------
+// default 'fade' transition
+// ----------------------------------------------------------------------------
+
+@include vue-transition-fade(px-float-fade, $dur: $d);
+
+// ----------------------------------------------------------------------------
+// blur variant transition (uses filter for opacity and animates backdrop-filter)
+// ----------------------------------------------------------------------------
+
+@include vue-transition(px-float-fade-blur) {
+    @include vt-transition {
+        transition-delay: $d;
+
+        .px-float__overlay {
+            transition: filter $d, backdrop-filter $d;
+        }
+        .px-float__popup {
+            transition: filter $d;
+        }
+    }
+
+    // define the hidden state (the non-hidden state is implicty -- the normal state)
+    @include vt-hidden {
+        .px-float__overlay {
+            filter: opacity(0);
+            backdrop-filter: blur(0px);
+        }
+        .px-float__popup {
+            filter: opacity(0);
+        }
+    }
+
+    @include vt-hidden-leave {
+        .px-float__overlay {
+            pointer-events: none;
+        }
+    }
 }
 </style>

package/components/PxModal.vue

@@ -152,7 +152,7 @@ export default {
         // whether to disable scrolling when the modal is open
         disablesScroll: { type: Boolean, default: true },
 
-        // if ture, esc key will close the popup
+        // if true, esc key will close the popup
         escCloses: { type: Boolean, default: true },
 
         // The starting point for the z-index (note: incremented as more layers of popups are opened

package/components/PxPortalTarget.vue

@@ -14,7 +14,9 @@ export default Vue.extend({
     }),
     destroyed() {
         const { $el: el } = this;
-        el.parentNode.removeChild(el);
+        if (el.parentNode) {
+            el.parentNode.removeChild(el);
+        }
     },
     render(h) {
         const nodes = this.updatedNodes && this.updatedNodes();

package/components/PxStylesPreview.vue

@@ -3,6 +3,13 @@
 -->
 <template>
     <div :class="bem()">
+        <div :class="bem('section')">
+            <h3 class="h3">Container</h3>
+        </div>
+        <div :class="[bem('container'), containerClass]">
+            <div :class="bem('container-inner')"></div>
+        </div>
+
         <div :class="bem('section', { color: true })">
             <h3 class="h3">Color</h3>
 
@@ -52,8 +59,6 @@ export default {
                 ].includes(c);
             });
 
-            console.log(`f: 👉 ${JSON.stringify(f, null, 4)}`);
-
             return f.map(colorName => {
                 return {
                     name: colorName,
@@ -61,6 +66,11 @@ export default {
                 };
             });
         },
+
+        containerClass() {
+            let sel = this.config?.container?.selector;
+            return sel && sel.slice(1);
+        },
     },
     // watch: {},
     mounted() {
@@ -71,11 +81,10 @@ export default {
 
         try {
             this.config = JSON.parse(configStr);
+            console.log(`this.config: 👉 ${JSON.stringify(this.config, null, 4)}`);
         } catch {
             console.error('Could not parse px-styles config string.');
         }
-
-        console.log(configStr);
     },
     // methods: {},
 };
@@ -125,5 +134,27 @@ export default {
         display: flex;
         gap: 1px;
     }
+
+    // container
+
+    &__container {
+        height: 100px;
+        position: relative;
+        @include after() {
+            position: absolute;
+            height: 1px;
+            background-color: black;
+            top: 50%;
+            left: 0;
+            right: 0;
+        }
+    }
+
+    &__container-inner {
+        height: 20px;
+        width: 100%;
+        border-left: 1px solid red;
+        border-right: 1px solid red;
+    }
 }
 </style>

package/components/PxSvg.vue

@@ -3,7 +3,7 @@
     provided by vue-inline-svg, this component will ensure a consistent approach to sizing and
     perform basic string replacements.
 
-    @import PxSvg from '@thinkpixellab/px-vue/components/PxSvg.vue';
+    @import PxSvg from '@thinkpixellab-public/px-vue/components/PxSvg.vue';
 
     // show the icon at it's natural size
     <px-svg src="require('~assets/icons/arrow.svg')" />

package/components/PxValidator.vue

@@ -37,8 +37,8 @@
     </template>
 
     <script>
-    import PxValidator from '@thinkpixellab/px-vue/components/PxValidator.vue';
-    import PxTextbox from '@thinkpixellab/px-vue/components/PxTextbox.vue';
+    import PxValidator from '@thinkpixellab-public/px-vue/components/PxValidator.vue';
+    import PxTextbox from '@thinkpixellab-public/px-vue/components/PxTextbox.vue';
 
     export default {
         components: { PxValidator, PxTextbox },

package/components/PxVueTest.vue

@@ -531,7 +531,7 @@
 <script>
 // import { mapState } from 'vuex';
 // import Component from '~/components/Component.vue';
-import { PxTester, PxTest } from '@thinkpixellab/px-vue-tester';
+import { PxTester, PxTest } from '@thinkpixellab-public/px-vue-tester';
 import PxToggle from './PxToggle.vue';
 import PxToggleButton from './PxToggleButton.vue';
 import PxFlex from './PxFlex.vue';

package/dev/demos/Demo-PxFloat.vue

@@ -0,0 +1,105 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <div :class="bem('dialog-buttons')">
+            <button :class="bem('button')" @click="visible = true">Toggle Dialog</button>
+
+            <px-float :visible.sync="visible" variant="dialog gray" :disablesScroll="false">
+                This is some content
+
+                <button :class="bem('button')" @click="innerVisible = true">Inner Toggle</button>
+
+                <!-- inner dialogs need to be used with a portal if they are contained -->
+                <px-float :visible.sync="innerVisible" variant="dialog blur">
+                    This is some inner content
+
+                    <button :class="bem('button')" @click="innerInnerVisible = true">
+                        Inner Inner Toggle
+                    </button>
+
+                    <!-- inner dialogs need to be used with a portal if they are contained -->
+                    <px-float :visible.sync="innerInnerVisible" variant="dialog blur gray">
+                        Wow this is deep
+                    </px-float>
+                </px-float>
+            </px-float>
+        </div>
+
+        <div :class="bem('position-buttons')">
+            <div :class="bem('button')" @click="showPosition('top')">Top</div>
+            <px-float
+                :visible.sync="positionVisible"
+                :placement="'top-start'"
+                :disablesScroll="false"
+                :offset="10"
+            >
+                Position: {{ position }}
+            </px-float>
+        </div>
+
+        <!-- mouse -->
+        <div :class="bem('button')" @click="showMouseFloat">Mouse</div>
+        <px-float ref="mouseFloat" :placement="'bottom-start'" variant="default sm">
+            Positioned with showAtCursor! (Note: needs to be done pogramatically because we only
+            have access to mouse coordinates in a mouse event.)
+        </px-float>
+    </div>
+</template>
+
+<script>
+import PxFloat from '../../components/PxFloat.vue';
+export default {
+    name: 'demo-px-swiper',
+    components: { PxFloat },
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    data() {
+        return {
+            visible: false,
+            innerVisible: false,
+            innerInnerVisible: false,
+            position: 'top',
+            positionVisible: false,
+        };
+    },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    methods: {
+        showPosition(pos) {
+            this.position = pos;
+            this.positionVisible = true;
+        },
+        showMouseFloat(e) {
+            this.$refs.mouseFloat.showAtCursor(e);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../../styles/px.scss' as *;
+
+.demo-px-swiper {
+    min-height: 500vh;
+    @include debug-zebra(rgba(black, 0.03), rgba(black, 0));
+    &__button {
+        position: relative;
+        margin-top: 20px;
+        margin-left: 20px;
+        @include button();
+        &:focus {
+            outline: 2px dashed accent();
+            outline-offset: 5px;
+        }
+    }
+    &__position-buttons {
+        @include center(0%, 50%);
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+    }
+}
+</style>

package/dev/dev.vue

@@ -16,6 +16,7 @@ import DemoPxSwiper from './demos/Demo-PxSwiper.vue';
 import DemoPxBaseDrag from './demos/Demo-PxBaseDrag.vue';
 import DemoPxStylesPreview from './demos/Demo-PxStylesPreview.vue';
 import DemoPxPivot from './demos/Demo-PxPivot.vue';
+import DemoPxFloat from './demos/Demo-PxFloat.vue';
 
 export default Vue.extend({
     components: {
@@ -28,6 +29,7 @@ export default Vue.extend({
         DemoPxBaseDrag,
         DemoPxStylesPreview,
         DemoPxPivot,
+        DemoPxFloat,
     },
     name: 'ServeDev',
     data() {
@@ -40,7 +42,7 @@ export default Vue.extend({
         const params = new Proxy(new URLSearchParams(window.location.search), {
             get: (searchParams, prop) => searchParams.get(prop),
         });
-        this.componentToRender = params.component || 'PxVueTest';
+        this.componentToRender = params.component || 'DemoPxFloat';
         console.log(`this.componentToRender: ${this.componentToRender}`);
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.2",
+    "version": "3.0.4",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -12,8 +12,9 @@
         "serve": "vue-cli-service serve dev/serve.js"
     },
     "dependencies": {
+        "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "^2.11.5",
-        "@thinkpixellab-public/px-styles": "^3.6.2",
+        "@thinkpixellab-public/px-styles": "^3.7.1",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^3.1.5",

package/plugins/common.js

@@ -21,7 +21,6 @@ export default {
         Vue.prototype.cssEm = cssEm;
         Vue.prototype.cssPcnt = cssPcnt;
         Vue.prototype.cssUrl = cssUrl;
-        Vue.prototype.isServer = isServer;
 
         // filters
         Vue.filter('aspect', aspect);
@@ -30,6 +29,15 @@ export default {
         Vue.filter('spacenator', spacenator);
         Vue.filter('date', date);
 
+        // mixins
+        Vue.mixin({
+            computed: {
+                isServer() {
+                    return isServer();
+                },
+            },
+        });
+
         // event bus
         eventBus.install(Vue);
 

package/styles/helpers.scss

@@ -5,7 +5,7 @@
     To import include the following at the top of any scss file:
 
         // import px-vue helpers
-        @use '@thinkpixellab/px-vue/styles/helpers.scss' as pxvue;
+        @use '@thinkpixellab-public/px-vue/styles/helpers.scss' as pxvue;
 
     And then access mixins from the prefix pxvue (or import as * if you're feeling dangerous).