@thinkpixellab-public/px-vue 3.0.2 → 3.0.3

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/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.3",
     "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.6.3",
         "@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);