@thinkpixellab-public/px-vue 4.0.17 → 4.0.19

package/assets/icons/ellipsis.svg

@@ -1 +1,7 @@
-<svg viewBox="0 0 24 24"><g transform="translate(4 11)" fill="currentColor" fill-rule="evenodd"><circle cx="1.5" cy="1.5" r="1.5"/><circle cx="8" cy="1.5" r="1.5"/><circle cx="14.5" cy="1.5" r="1.5"/></g></svg>
+<svg viewBox="0 0 24 24">
+    <g transform="translate(4 11)" fill="currentColor" fill-rule="evenodd">
+        <circle cx="1.5" cy="1.5" r="1.5"/>
+        <circle cx="8" cy="1.5" r="1.5"/>
+        <circle cx="14.5" cy="1.5" r="1.5"/>
+    </g>
+</svg>

package/assets/icons/eyedropper.svg

@@ -1 +1,5 @@
-<svg viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="2"><path d="M16.716 2.498a3.067 3.067 0 0 1 2.962-.793c1.059.283 2.654 1.878 2.937 2.937a3.067 3.067 0 0 1-.793 2.962l-4.152 4.152-.538-.537-9.72 9.72L1.6 22.72l1.78-5.811 9.721-9.721-.537-.538 4.152-4.152ZM11.315 5.402l7.526 7.526"/></g></svg>
+<svg viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="2">
+        <path d="M16.716 2.498a3.067 3.067 0 0 1 2.962-.793c1.059.283 2.654 1.878 2.937 2.937a3.067 3.067 0 0 1-.793 2.962l-4.152 4.152-.538-.537-9.72 9.72L1.6 22.72l1.78-5.811 9.721-9.721-.537-.538 4.152-4.152ZM11.315 5.402l7.526 7.526"/>
+    </g>
+</svg>

package/bases/PxBaseItemsSelect.vue

@@ -43,6 +43,7 @@ export default {
         return {
             selectedKeys: [],
             baseUpdateMode: 'single',
+            isMounted: false,
         };
     },
 
@@ -157,11 +158,16 @@ export default {
     },
 
     mounted() {
+        this.isMounted = true;
         this.$nextTick(() => {
             this.tryAutoSelect();
         });
     },
 
+    unmounted() {
+        this.isMounted = false;
+    },
+
     methods: {
         tryAutoSelect() {
             if (this.autoSelectFirst && isKeySetEmpty(this.selected) && this.items?.length) {
@@ -173,6 +179,10 @@ export default {
          * Emit the change / update:selected event
          */
         emitUpdateEvent() {
+            if (!this.isMounted) {
+                return;
+            }
+
             let updateArg;
 
             if (this.updateMode == 'single') {

package/components/PxArrowScroller.vue

@@ -207,7 +207,8 @@ export default {
     &__button {
         position: relative;
         align-self: center;
-        padding: 1em 0.75em;
+        padding: 0;
+        height: 1.25em;
 
         &--start {
             grid-area: arrow-start;
@@ -242,6 +243,9 @@ export default {
                 padding-left: 0;
                 padding-right: 0;
             }
+
+            min-height: 0.8em;
+            height: 100%;
         }
     }
 

package/components/PxBalancedText.vue

@@ -22,6 +22,9 @@
                 {{ text }}
             </slot>
         </component>
+
+        <!-- after -->
+        <slot name="after"></slot>
     </component>
 </template>
 

package/components/PxBaseColor.vue

@@ -0,0 +1,187 @@
+<script>
+import tinycolor from 'tinycolor2';
+import {
+    hsvaEnsureObject,
+    hsvaIsEqual,
+    hsvaToHsla,
+    hslaToStr,
+    hsvaContrastColor,
+} from '../utils/color.js';
+
+const TINY_FORMATS = ['rgb', 'prgb', 'hex6', 'hex3', 'hex8', 'name', 'hsl', 'hsv'];
+
+export default {
+    name: 'px-color-picker',
+
+    props: {
+        /**
+         * The color value.
+         */
+        color: { default: '#FF0000' },
+
+        /**
+         * The format of the color value (used for emitting events, v-model, and the default format
+         * for getColor). Allowed values are the same as those available from the tinycolor library
+         * (rgb, prgb, hex6, hex3, hex8, name, hsl, hsv) as well as 'auto' (which will attempt to
+         * use the same format as the last value set with the color prop) and 'tiny' (which will
+         * return a tinycolor object) and 'hsva' which will return hsva values as an object. The
+         * format has the advantage of not requiring a tinycolor object to be created when the color
+         * changes.
+         *
+         * @values rgb, prgb, hex6, hex3, hex8, name, hsl, hsv, auto, tiny
+         */
+        format: { type: String, default: 'hsva' },
+
+        /**
+         * Whether alpha colors are enabled.
+         */
+        alphaEnabled: { type: Boolean, default: false },
+    },
+
+    data() {
+        return { autoFormat: this.format, h: 0, s: 0, v: 0, a: 1 };
+    },
+
+    computed: {
+        hsva() {
+            return { h: this.h, s: this.s, v: this.v, a: this.alphaEnabled ? this.a : 1 };
+        },
+        hsla() {
+            return hsvaToHsla(this.hsva);
+        },
+        hslStr() {
+            return hslaToStr(this.hsla, false);
+        },
+        hslaStr() {
+            return hslaToStr(this.hsla, true);
+        },
+        hslaTransparentStr() {
+            return hslaToStr({ ...this.hsla, a: 0 }, true);
+        },
+        hueStr() {
+            return `hsl(${this.h}, 100%, 50%)`;
+        },
+        contrastStr() {
+            return hsvaContrastColor(this.hsva);
+        },
+        eyedropperSupported() {
+            return window?.EyeDropper;
+        },
+    },
+
+    watch: {
+        color(nv) {
+            // update colorValue when color changes
+            this.setColor(nv);
+        },
+        hsla() {
+            // emit change when this changes as a proxy for changes to hsva as individual props
+            this.emitChange();
+        },
+    },
+
+    mounted() {
+        if (this.color) {
+            this.setColor(this.color);
+        }
+
+        // TODO: default is hsva, but that isn't in the TINY_FORMATS list
+        // if (this.format) {
+        //     if (!TINY_FORMATS.includes(this.format)) {
+        //         console.warn(
+        //             `[PxBaseColor] Invalid format: "${this.format}". See comments in PxBaseColor.vue`,
+        //         );
+        //     }
+        // }
+    },
+    methods: {
+        setColor(strOrHsva) {
+            if (typeof strOrHsva === 'string') {
+                this.setColorStr(strOrHsva);
+            }
+
+            if (typeof strOrHsva === 'object') {
+                this.setColorHsva(strOrHsva);
+            }
+        },
+
+        setColorStr(str) {
+            // this is for efficiency but also to prevent color creep as we convert between formats
+            if (this.lastEmit == str) {
+                return;
+            }
+
+            const tiny = tinycolor(str);
+            this.autoFormat = tiny.getFormat();
+
+            const hsva = tiny.toHsv();
+            this.setColorHsva(hsva);
+        },
+
+        setColorHsva(hsva) {
+            if (this.isCurrentHsva(hsva)) {
+                return;
+            }
+
+            this.h = hsva.h;
+            this.s = hsva.s;
+            this.v = hsva.v;
+            this.a = hsva.a;
+        },
+
+        emitChange() {
+            const clr = this.getColor(this.format);
+
+            this.lastEmit = clr;
+
+            this.$emit('update:color', clr);
+            this.$emit('change', clr);
+        },
+
+        getColor(format = null) {
+            format = format || this.format;
+
+            if (format == 'auto') {
+                format = this.autoFormat;
+            }
+
+            let clr = { h: this.h, s: this.s, v: this.v, a: this.a };
+
+            if (format == 'hsva') {
+                return clr;
+            }
+
+            if (format && [...TINY_FORMATS, 'tiny'].includes(format)) {
+                const tiny = tinycolor(clr);
+
+                if (format == 'tiny') {
+                    clr = tiny;
+                } else {
+                    clr = tiny.toString(format);
+                }
+            }
+
+            return clr;
+        },
+
+        colorStrToHsva(str) {
+            const tiny = tinycolor(str);
+            return tiny.toHsv();
+        },
+
+        isCurrentHsva(hOrObj, s, v, a) {
+            const hsvaCompare = hsvaEnsureObject(hOrObj, s, v, a);
+            return hsvaIsEqual(this.hsva, hsvaCompare);
+        },
+
+        setColorFromEyedropper() {
+            if (this.eyedropperSupported) {
+                const eyeDropper = new EyeDropper();
+                eyeDropper.open().then(result => {
+                    this.setColorStr(result.sRGBHex);
+                });
+            }
+        },
+    },
+};
+</script>

package/components/PxColorPalette.vue

@@ -1,3 +1,6 @@
+<!--
+    Describe this component...
+-->
 <template>
     <div :class="bem()">
         <PxColorPaletteButton
@@ -20,10 +23,10 @@
 </template>
 
 <script>
-import PxBaseColor from '../bases/PxBaseColor.vue';
+import PxBaseColor from './PxBaseColor.vue';
 import tinycolor from 'tinycolor2';
 import PxColorPaletteButton from './PxColorPaletteButton.vue';
-import { PxColorPicker, PxColorPickerPropsFilter } from './PxColorPicker.vue';
+import PxColorPicker from './PxColorPicker.vue';
 
 export default {
     name: 'px-color-palette',
@@ -74,12 +77,12 @@ export default {
                 'eyedropper-only': 'eyedropper',
             }[this.pickerMode];
 
-            return PxColorPickerPropsFilter({
+            return {
                 iconFallback,
                 eyedropperMode,
                 alphaEnabled: this.alphaEnabled,
                 ...this.pickerAttrs,
-            });
+            };
         },
         showPicker() {
             return this.pickerMode != 'none';

package/components/PxDropdown.vue

@@ -138,9 +138,6 @@ export default {
             return this.getItemLabel(this.selectedItem);
         },
     },
-    mounted() {
-        this.select;
-    },
     methods: {
         itemClick(item) {
             this.selectItemOnly(item);

package/components/PxIconButton.vue

@@ -9,7 +9,7 @@
         "
         @click="tryToggleChecked"
     >
-        <px-icon v-bind="calcIconAttrs" />
+        <px-icon :class="iconClass" v-bind="calcIconAttrs" />
     </button>
 </template>
 
@@ -65,6 +65,8 @@ export default {
          * Set this to true to enable toggling on the button (see PxBaseToggle for details).
          **/
         toggles: { type: Boolean, default: false },
+
+        iconClass: { type: String, default: null },
     },
     computed: {
         calcIcon() {

package/components/PxPivot.vue

@@ -128,7 +128,13 @@ export default {
                 return;
             }
 
-            const selected = this.$refs[this.getTabContentRefName(this.selectedItem)][0];
+            const refName = this.getTabContentRefName(this.selectedItem);
+
+            if (!this.$refs[refName]) {
+                return;
+            }
+
+            const selected = this.$refs[refName][0];
             const selectedRect = getClientRect(selected, this.$refs.tabs);
 
             if (selected) {

package/components/PxToggleButtonList.vue

@@ -57,9 +57,6 @@ export default {
     mixins: [PxBaseItemsSelect, PxBaseVariants],
     components: { PxToggleButton, PxRadioButton },
     props: {
-        // // spacing between items (see PxFlex for details)
-        // gap: { default: 0.5 },
-
         /**
          * The icon that gets displayed when a button is checked
          */
@@ -118,7 +115,7 @@ export default {
 
     // variant: connected
 
-    gap: 0.25em;
+    gap: 0.6em;
     display: flex;
 
     &--connected {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thinkpixellab-public/px-vue",
-  "version": "4.0.17",
+  "version": "4.0.19",
   "description": "General purpose Vue components and helpers that can be used across projects.",
   "author": {
     "name": "Pixel Lab"
@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.7",
     "@popperjs/core": "^2.11.8",
     "@storybook/test": "^8.2.6",
-    "@thinkpixellab-public/px-styles": "^4.0.2",
+    "@thinkpixellab-public/px-styles": "^4.0.3",
     "@thinkpixellab-public/px-vue-tester": "^2.0.0",
     "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
     "body-scroll-lock": "^3.1.5",

package/utils/SharedHeightManager.js

@@ -0,0 +1,213 @@
+class HeightGroup {
+    constructor(id, ops = {}) {
+        this.id = id;
+
+        this.ops = {
+            // set to null to disable css variables
+            varsParent: window.document.body,
+
+            // debounce time in ms
+            debounce: 0,
+
+            // css variable prefix (e.g. --hg-groupId-h)
+            prefix: 'hg',
+
+            // ignore heights that are larger than this value in pixels
+            ignoreMax: null,
+
+            // ignore heights that are larger than this value as a standard deviation of the mean height
+            ignoreVariance: null,
+
+            // debug mode (adds some loging that can help with debugging)
+            debug: false,
+
+            changeCallback: null,
+
+            ...ops,
+        };
+
+        this.max = null;
+        this.elements = [];
+        this.currentMaxElements = [];
+    }
+
+    updateOptions(ops) {
+        this.ops = { ...this.ops, ...ops };
+    }
+
+    getVariableName() {
+        return '--' + (this.ops.prefix ? this.ops.prefix + '-' : '') + this.id + '-h';
+    }
+
+    trySync() {
+        clearTimeout(this.lastTimeout);
+
+        this.lastTimeout = setTimeout(() => {
+            let heights = this.elements.map(el => el.height);
+            let ignore = Number.MAX_VALUE;
+
+            if (this.ops.ignoreVariance) {
+                const mean = heights.reduce((sum, height) => sum + height, 0) / heights.length;
+                const variance =
+                    heights.reduce((sum, height) => sum + Math.pow(height - mean, 2), 0) /
+                    heights.length;
+                const stdDev = Math.sqrt(variance);
+
+                if (this.ops.debug) {
+                    console.log(`stdDev: ${stdDev}`);
+                }
+
+                ignore = this.ops.ignoreVariance * stdDev + mean;
+            }
+
+            if (this.ops.ignoreMax) {
+                ignore = Math.min(ignore, this.ops.ignoreMax);
+            }
+
+            const max = Math.max(...heights.filter(height => height <= ignore));
+
+            if (this.max !== max) {
+                this.max = max;
+
+                // store the elements that have the max height
+                this.currentMaxElements = this.elements.filter(el => el.height === max);
+
+                if (this.ops.varsParent) {
+                    this.ops.varsParent.style.setProperty(this.getVariableName(), max + 'px');
+                }
+
+                if (this.ops.changeCallback) {
+                    this.ops.changeCallback(this.id, this.max);
+                }
+            }
+
+            if (this.ops.debug) {
+                console.log(`ignore: ${ignore}`);
+                console.log(
+                    'valid heights:',
+                    heights.filter(height => height <= ignore)
+                );
+                console.log(
+                    'invalid heights:',
+                    heights.filter(height => height > ignore)
+                );
+            }
+        }, this.ops.debounce);
+    }
+
+    updateElement(element, height) {
+        if (!element) {
+            return;
+        }
+
+        let el = this.elements.find(el => el.element == element);
+
+        if (!el) {
+            el = { element, height: null };
+            this.elements.push(el);
+        }
+
+        if (el.height !== height) {
+            el.height = height;
+
+            if (this.currentMaxElements.includes(el)) {
+                // this element was the max height, so we need to recalculate the max height even if smaller
+                this.max = null;
+            }
+
+            this.trySync();
+        }
+    }
+
+    removeElement(element) {
+        const el = this.elements.find(el => el.element === element);
+        if (el) {
+            this.elements = this.elements.filter(el => el.element !== element);
+
+            if (this.currentMaxElements.includes(el.element)) {
+                this.currentMaxElements = [];
+                this.max = null;
+            }
+
+            this.trySync();
+        }
+    }
+}
+
+export default {
+    getGroups() {
+        if (!window.$heightGroups) {
+            window.$heightGroups = {};
+        }
+
+        return window.$heightGroups;
+    },
+
+    getGroup(id) {
+        if (!id) {
+            return null;
+        }
+
+        const groups = this.getGroups();
+
+        if (id in groups) {
+            return groups[id];
+        }
+
+        return null;
+    },
+
+    addGroup(group) {
+        const groups = this.getGroups();
+        groups[group.id] = group;
+    },
+
+    createGroup(id, ops) {
+        if (!id) {
+            return null;
+        }
+
+        const group = new HeightGroup(id, ops);
+        this.addGroup(group);
+
+        return group;
+    },
+};
+
+export class SharedHeightScopeManager {
+    constructor(scopeElement, changeCallback) {
+        this.groups = {};
+        this.scopeElement = scopeElement;
+        this.groupMaxChanged = changeCallback;
+    }
+
+    getGroup(id) {
+        if (!id) {
+            return null;
+        }
+
+        if (id in this.groups) {
+            return this.groups[id];
+        }
+
+        return null;
+    }
+
+    addGroup(group) {
+        this.groups[group.id] = group;
+    }
+
+    createGroup(id, ops = {}) {
+        if (!id) {
+            return null;
+        }
+
+        ops.varsParent = this.scopeElement;
+        ops.changeCallback = this.groupMaxChanged;
+
+        const group = new HeightGroup(id, ops);
+        this.addGroup(group);
+
+        return group;
+    }
+}

package/utils/textWidth.js

@@ -36,4 +36,4 @@ const getFontFromElement = element => {
 };
 
 export default textWidth;
-export { getFontFromElement };
+export { textWidth, getFontFromElement };