@thinkpixellab-public/px-vue 3.0.95 → 3.0.96

package/components/PxFit.vue

@@ -1,24 +1,10 @@
-<!--
-
-    <px-fit :fits="['lg', 'md', 'sm']" :debug="true">
-        <template #default="{ fit }">
-            <div :class="`fit fit--${fit}`">
-                <span v-if="fit == 'lg'">LARGE</span>
-                <span v-if="fit == 'md'">MEDIUM</span>
-                <span v-if="fit == 'sm'">SMALL</span>
-                One Two Three Four Five Size Seven Eight Nine Ten
-            </div>
-        </template>
-    </px-fit>
-
--->
 <template>
     <div :class="bem({ debug: debug, fitting: fitting })">
-        <div ref="outer" :class="bem('outer')" :style="{ opacity: resizing ? 0 : null }">
+        <div ref="outer" :class="bem('outer')" :style="{ opacity: contentOpacity }">
             <slot
                 name="default"
                 v-bind="{
-                    fit: fit,
+                    fit: fitting ? fit : selectedFit,
                     fitting: fitting,
                 }"
             />
@@ -28,37 +14,89 @@
 
 <script>
 import PxBaseResize from './PxBaseResize.vue';
+import { asyncTimeout } from '../utils/utils.js';
+
+/**
+ * A flexibile container that allows you to choose different possible renderings based on the size
+ * of the container. You provide a collection of "fits" (essentially just tags). Each tag is
+ * provided to the default slot template and the template can determine how to render based on that
+ * tag. Once rendered, the content is measured and compared against the size of the parent and the
+ * first that "fits" within the bounds of the parent is selected.
+ *
+ * ```html
+ * <PxFit>
+ *     <template #default="{ fit }">
+ *         <div >
+ *             <div v-if="fit == 'lg'" style="width: 600px">lg (600px)</div>
+ *             <div v-if="fit == 'md'" style="width: 400px">md (400px)</div>
+ *             <div v-if="fit == 'sm'" style="width: 200px">sm (200px)</div>
+ *         </div>
+ *     </template>
+ * </PxFit>
+ * ```
+ */
 
 export default {
     name: 'px-fit',
     mixins: [PxBaseResize],
     props: {
-        // list of "fits" that will be attempted during resize (must be ordered small to large, will
-        // be attempted from large to small)
+        /**
+         * A list of named "fits" that will be applied during resize. These have no intrinsic size
+         * or meaning. Instead it is up to the template to use these to modify the size of the
+         * content. PxFit will apply each named fit from largest to smallest (by default in reverse
+         * order of what is listed) and keep the first that fits within the bounds of the element.
+         *
+         */
         fits: { type: Array, default: () => ['sm', 'md', 'lg'] },
 
-        // by default the last fit attempted will be kept when no fit is found,
-        // but you can set this to specific a different fallback
+        /**
+         * By default, fits will be tested in reverse order since it's natural to list them from
+         * smallest to largest but they oftend need to be tested largest first (assuming we want to
+         * show as much content as possible). To disable this behavior, set this to false.
+         */
+        reverseFitTestOrder: { type: Boolean, default: true },
+
+        /**
+         * By default the last fit attempted will be kept when no fit is found, but you can set this
+         * to specific a different fallback. Note that fallback does not need to be a valid fit from
+         * the fits collection, so you could set it to something like 'none' and use that to flag
+         * that no fit was found and you need to render an alternative.
+         */
         fallback: { type: String, default: null },
 
-        // whether to width, height or both when looking for a fit
+        /**
+         * Whether to evaluate width, height or both when looking for a fit
+         */
         mode: { type: String, default: 'both' },
 
-        // disables resize events (and fitting) when true
+        /**
+         * Set this to something other than 0 to debounce resize events.
+         */
+        resizeDebounce: { type: Number, default: 0 },
+
+        /**
+         * If true, we set the opacity of the content to 0 while fitting is in progress. Doesn't
+         * seem like this is necessary is most cases.
+         */
+        hideFitTests: { type: Boolean, default: true },
+
+        /**
+         * Use this to override the function that evaluates whether a particular fit is valid. Takes
+         * the current mode, available size, content size (with fit applied) and fit as arguments
+         * and should return a boolean.
+         */
+        fitTestFn: { default: null },
+
+        /**
+         * Disables resize events (and fitting) when true
+         */
         disabled: { type: Boolean, default: false },
 
-        // wait this amount of time (in ms) before restoring the sized element after a resize pass
-        // (setting this to something other than 0 can help prventing flickering but comes at the
-        // expense of the element disappearing during resize)
-        restoreDelay: { type: Number, default: 0 },
-
-        // whether to show the debug version of the component
+        /**
+         * Whether to show the debug version of the component (allows you to see the component in
+         * each fit state as it is evaluated).
+         */
         debug: { type: Boolean, default: false },
-
-        // override the function that evaluates whether a particular fit is valid (called after the
-        // component has been placed into the "fit" state, takes the current mode, available
-        // outer size and fit being evaluated as parameters and should return true or false)
-        testFitFunction: { default: null },
     },
 
     data() {
@@ -66,23 +104,20 @@ export default {
             fit: null,
             selectedFit: null,
             fitting: false,
-            availableSize: { w: 0, h: 0 },
-            outerSize: { w: 0, h: 0 },
+            resizeId: 0,
         };
     },
 
     computed: {
         resizeDebounceValue() {
-            return 200;
+            return this.resizeDebounce;
         },
 
-        fitMap() {
-            let map = this.fits?.reduce((map, val, idx) => {
-                return (map[val] = idx);
-            }, {});
-            map.fit = this.fits.indexOf(this.fit);
-            map.fitting = this.fitting;
-            return map;
+        contentOpacity() {
+            if (this.hideFitTests && this.fitting) {
+                return this.debug ? 0.75 : 0;
+            }
+            return null;
         },
     },
 
@@ -93,129 +128,97 @@ export default {
     },
 
     methods: {
-        testFitDefault(mode, available, fit) {
-            const outer = this.$refs.outer;
-
-            if (outer) {
-                const outerSize = {
-                    w: outer.offsetWidth,
-                    h: outer.offsetHeight,
-                };
-
-                let doesFit = true;
-
-                if (mode == 'width' || mode == 'both') {
-                    doesFit = doesFit && available.w >= outerSize.w;
-                }
-                if (mode == 'height' || mode == 'both') {
-                    doesFit = doesFit && available.h >= outerSize.h;
-                }
-
-                if (this.debug) {
-                    console.log(`${fit}: ${doesFit}`);
-                }
-
-                return doesFit;
+        async wait() {
+            await this.$nextTick();
+            if (this.debug) {
+                await asyncTimeout(1000);
             }
-            return false;
         },
 
-        async tryFit(fit, signal) {
-            if (process.server) {
-                return;
+        testFitDefault(mode, availableSize, contentSize, fit) {
+            if (!availableSize || !contentSize || availableSize.w == 0 || availableSize.h == 0) {
+                return false;
             }
 
-            const promise = new Promise((resolve, reject) => {
-                // on the next frame, check the size
-                this.fit = fit;
-
-                let timeout;
-
-                const abortListener = () => {
-                    if (timeout) {
-                        clearTimeout(timeout);
-                    }
-                    signal.removeEventListener('abort', abortListener);
-                    reject();
-                };
-
-                signal.addEventListener('abort', abortListener);
+            let doesFit = true;
 
-                timeout = setTimeout(
-                    () => {
-                        signal.removeEventListener('abort', abortListener);
-
-                        const testFn = this.testFitFunction || this.testFitDefault;
-                        const doesFit = testFn(this.mode, this.availableSize, fit);
-
-                        resolve(doesFit);
-                    },
-                    this.debug ? 1000 : this.restoreDelay
-                );
-            });
-
-            return promise;
-        },
+            if (mode == 'width' || mode == 'both') {
+                doesFit = doesFit && availableSize.w >= contentSize.w;
+            }
 
-        async tryAllFits() {
-            if (this.aborter) {
-                this.aborter.abort();
+            if (mode == 'height' || mode == 'both') {
+                doesFit = doesFit && availableSize.h >= contentSize.h;
             }
 
-            this.aborter = new AbortController();
-            let signal = this.aborter.signal;
+            return doesFit;
+        },
 
-            // get the current size
-            this.availableSize = {
+        async tryFits(id) {
+            const availableSize = {
                 w: this.$el.clientWidth,
                 h: this.$el.clientHeight,
             };
 
-            // places the component into a state where it can be sized independently
             this.fitting = true;
 
+            const $outer = this.$refs.outer;
+            const orderedFits = this.reverseFitTestOrder ? this.fits.slice().reverse() : this.fits;
+            const testFn = this.fitTestFn || this.testFitDefault;
+
             let fit;
+            let selectedFit;
 
-            for (let i = this.fits.length - 1; i >= 0 && !signal.aborted; i--) {
-                fit = this.fits[i];
-
-                try {
-                    const doesFit = await this.tryFit(fit, signal);
-                    if (doesFit) {
-                        // we found a fit so clean up and return
-                        this.selectedFit = fit;
-                        this.aborter = null;
-                        this.abortSignal = null;
-                        this.fitting = false;
-                        return;
-                    }
-                } catch {
-                    // aborted
+            for (let i = 0; i < orderedFits.length; i++) {
+                // we can abort the test if another has been started
+                if (id != this.resizeId) {
                     return;
                 }
-            }
 
-            // no fit was found
+                fit = orderedFits[i];
+                this.fit = fit;
+
+                await this.wait();
+
+                // need to test his again after the wait
+                if (id != this.resizeId) {
+                    return;
+                }
+
+                const contentSize = {
+                    w: $outer.offsetWidth,
+                    h: $outer.offsetHeight,
+                };
+
+                const doesFit = testFn(this.mode, availableSize, contentSize, fit);
 
-            // set the fallback if specified (otherwise last tested will be maintained)
-            this.fit = this.fallback || this.fit;
-            this.selectedFit = this.fit;
-            this.aborter = null;
-            this.abortSignal = null;
+                if (this.debug) {
+                    console.log(`----- ${id} Test ${this.fit} -----`);
+                    console.log(`availableSize: ${availableSize.w} x ${availableSize.h}`);
+                    console.log(`contentSize: ${contentSize.w} x ${contentSize.h}`);
+                    console.log(`doesFit: ${doesFit}`);
+                }
+
+                if (doesFit) {
+                    selectedFit = fit;
+                    break;
+                }
+            }
+
+            this.selectedFit = selectedFit ? selectedFit : this.fallback || fit;
             this.fitting = false;
         },
 
-        resizeStarted() {
-            this.$emit('resize-start');
-        },
         async resize() {
             if (!this.disabled) {
-                this.outerSize = {
-                    w: this.$el.offsetWidth,
-                    h: this.$el.offsetHeight,
-                };
+                this.$emit('resize-start');
+
+                this.resizeId++;
+
+                if (this.debug) {
+                    console.log(`===== RESIZE ${this.resizeId} =====`);
+                }
 
-                await this.tryAllFits();
+                await this.tryFits(this.resizeId);
 
                 this.$emit('resize-end');
             }
@@ -260,7 +263,7 @@ export default {
             width: auto;
             height: auto;
             pointer-events: none;
-            opacity: 0;
+            //opacity: 0;
         }
     }
 

package/components/PxProgressCircle.vue

@@ -6,7 +6,7 @@
 
 -->
 <template>
-    <div :class="bem()" v-resize="resize">
+    <div :class="bem()">
         <svg
             width="100%"
             height="100%"
@@ -16,13 +16,26 @@
             xmlns:xlink="http://www.w3.org/1999/xlink"
         >
             <circle
+                v-if="backgroundVisible"
+                :class="bem('bg')"
                 stroke="currentColor"
-                :stroke-width="strokeWidth"
+                :stroke-width="calcStrokeWidth"
+                :stroke-linecap="rounded ? 'round' : null"
+                fill="transparent"
+                :cx="width ? width / 2 : 0"
+                :cy="width ? width / 2 : 0"
+                :r="width ? Math.max(0, width / 2 - calcStrokeWidth / 2) : 0"
+            ></circle>
+            <circle
+                :class="bem('fg')"
+                stroke="currentColor"
+                :stroke-width="calcStrokeWidth"
                 :stroke-dasharray="strokeDashArray"
+                :stroke-linecap="rounded ? 'round' : null"
                 fill="transparent"
                 :cx="width ? width / 2 : 0"
                 :cy="width ? width / 2 : 0"
-                :r="width ? Math.max(0, width / 2 - strokeWidth / 2) : 0"
+                :r="width ? Math.max(0, width / 2 - calcStrokeWidth / 2) : 0"
             ></circle>
         </svg>
     </div>
@@ -30,26 +43,49 @@
 
 <script>
 import PxBase from './PxBase.vue';
+import PxBaseResize from '@thinkpixellab-public/px-vue/components/PxBaseResize.vue';
+import tween from '../utils/tween.js';
 
 export default {
     name: 'progress-circle',
-    mixins: [PxBase],
+    mixins: [PxBase, PxBaseResize],
     props: {
-        strokeWidth: { type: Number, default: 10 },
+        // if stroke width is a string with a percentage it will be calculated as a percentage of the total width
+        strokeWidth: { type: [Number, String], default: 10 },
         progress: { type: Number, default: 0 },
+        rounded: { type: Boolean, default: false },
+        backgroundVisible: { type: Boolean, default: false },
     },
     data() {
-        return { width: 0, p: 0 };
+        return { width: 0, p: 0, animatedProgress: this.progress };
     },
     computed: {
         strokeDashArray() {
-            let c = (this.width - this.strokeWidth) * Math.PI;
-            return `${c * Math.max(0, Math.min(1, this.progress))},${c}`;
+            let c = (this.width - this.calcStrokeWidth) * Math.PI;
+            return `${c * Math.max(0, Math.min(1, this.animatedProgress))},${c}`;
+        },
+        calcStrokeWidth() {
+            if (typeof this.strokeWidth === 'string' && this.strokeWidth.endsWith('%')) {
+                return (parseFloat(this.strokeWidth) / 100) * this.width;
+            }
+            return this.strokeWidth;
         },
     },
-    mounted() {
-        this.resize();
+    watch: {
+        progress(nv) {
+            if (this.progressTween) {
+                this.progressTween.cancel();
+            }
+
+            this.progressTween = tween({
+                from: this.animatedProgress,
+                to: nv,
+                dur: 1000,
+                update: v => (this.animatedProgress = v),
+            });
+        },
     },
+
     methods: {
         resize() {
             this.width = this.$el.getBoundingClientRect()?.width;
@@ -61,13 +97,35 @@ export default {
 <style lang="scss">
 @use '../styles/px.scss' as *;
 .progress-circle {
+    width: 100%;
+    height: 100%;
+
+    @at-root {
+        :root {
+            --px-circle-progress-bg: currentColor;
+            --px-circle-progress-bg-alpha: 0.1;
+            --px-circle-progress-fg: currentColor;
+            --px-circle-progress-alpha: 1;
+        }
+    }
+
     aspect-ratio: 1;
     font-size: 0;
+
     svg {
         width: 100%;
         height: 100%;
         display: block;
         transform: rotate(-90deg);
     }
+
+    &__bg {
+        stroke: var(--px-circle-progress-bg, currentColor);
+        opacity: var(--px-circle-progress-bg-alpha, 0.2);
+    }
+    &__fg {
+        stroke: var(--px-circle-progress-fg, currentColor);
+        opacity: var(--px-circle-progress-fg-alpha, 1);
+    }
 }
 </style>

package/components/PxSelectionBar.vue

@@ -0,0 +1,132 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <div :class="bem('selector-container', {})" :style="selectorStyle">
+            <div :class="[bem('selector'), selectorClass]"></div>
+        </div>
+        <slot />
+    </div>
+</template>
+
+<script>
+import PxBaseResize from './PxBaseResize.vue';
+import utils from '../utils/utils';
+
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+
+export default {
+    name: 'px-selection-bar',
+    // components: { Component },
+    mixins: [PxBaseResize],
+    props: {
+        // above, below, start | left, end | right
+        placement: { type: String, default: 'below' },
+
+        selectorClass: { type: String, default: null },
+
+        selectedSelector: { type: String, default: '[data-selected]' },
+
+        selectorThickness: { type: Number, default: 2 },
+
+        // used only to create a watcher for when selection changes, the actual placement of the
+        // selection is handled by finding the selected element using selectedSelector
+        selectedIndex: { type: Number, default: null },
+    },
+    data() {
+        return { selectionOffset: 0, selectionSize: 100 };
+    },
+    computed: {
+        calcPlacement() {
+            if (this.placement == 'start' || this.placement == 'left') {
+                return 'start';
+            } else if (this.placement == 'end' || this.placement == 'right') {
+                return 'end';
+            } else {
+                return this.placement;
+            }
+        },
+        isHorizontal() {
+            return this.calcPlacement == 'above' || this.calcPlacement == 'below';
+        },
+        isVertical() {
+            return !this.isHorizontal;
+        },
+        selectorStyle() {
+            const style = {};
+
+            style[this.isHorizontal ? 'left' : 'top'] = this.cssPx(this.selectionOffset);
+            style[this.isHorizontal ? 'width' : 'height'] = this.cssPx(this.selectionSize);
+
+            if (this.isHorizontal) {
+                style.top = this.calcPlacement == 'above' ? 0 : 'auto';
+                style.bottom = this.calcPlacement == 'below' ? 0 : 'auto';
+                style.height = this.cssPx(this.selectorThickness);
+            } else {
+                style.left = this.calcPlacement == 'start' ? 0 : 'auto';
+                style.right = this.calcPlacement == 'end' ? 0 : 'auto';
+                style.width = this.cssPx(this.selectorThickness);
+            }
+
+            return style;
+        },
+    },
+    watch: {
+        selectionPlacement() {
+            this.$nextTick(() => {
+                this.updateSelection();
+            });
+        },
+        selectedIndex() {
+            this.$nextTick(() => {
+                this.updateSelection();
+            });
+        },
+    },
+    mounted() {
+        this.updateSelection();
+    },
+    methods: {
+        resize() {
+            this.updateSelection();
+        },
+
+        updateSelection() {
+            const selected = this.$el.querySelector(this.selectedSelector);
+            if (selected) {
+                const rect = utils.getClientRect(selected, this.$el);
+                //const rect = selected.getBoundingClientRect();
+                if (this.isHorizontal) {
+                    this.selectionOffset = rect.left;
+                    this.selectionSize = rect.width;
+                } else {
+                    this.selectionOffset = rect.top;
+                    this.selectionSize = rect.height;
+                }
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-selection-bar {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    &__selector-container {
+        position: absolute;
+        @include transition(top left width height);
+    }
+
+    &__selector {
+        @include abs();
+        background-color: currentColor;
+    }
+}
+</style>

package/package.json

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