@thinkpixellab-public/px-vue 4.1.13 → 4.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.1.13",
+    "version": "4.1.15",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"
@@ -39,37 +39,36 @@
         "vue-inline-svg": "^3.1.4"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.7",
-        "@chromatic-com/storybook": "^3.2.4",
+        "@babel/core": "^7.26.10",
+        "@chromatic-com/storybook": "^3.2.6",
         "@nuxt/kit": "^3.15.4",
-        "@rushstack/eslint-patch": "^1.10.5",
-        "@storybook/addon-essentials": "^8.5.3",
-        "@storybook/addon-interactions": "^8.5.3",
-        "@storybook/addon-links": "^8.5.3",
-        "@storybook/addon-mdx-gfm": "^8.5.3",
-        "@storybook/blocks": "^8.5.3",
-        "@storybook/manager-api": "^8.5.3",
-        "@storybook/test": "^8.5.3",
-        "@storybook/theming": "^8.5.3",
-        "@storybook/vue3": "^8.5.3",
-        "@storybook/vue3-vite": "^8.5.3",
-        "@vitejs/plugin-vue": "^5.2.1",
+        "@rushstack/eslint-patch": "^1.11.0",
+        "@storybook/addon-essentials": "^8.6.7",
+        "@storybook/addon-interactions": "^8.6.7",
+        "@storybook/addon-links": "^8.6.7",
+        "@storybook/addon-mdx-gfm": "^8.6.7",
+        "@storybook/blocks": "^8.6.7",
+        "@storybook/manager-api": "^8.6.7",
+        "@storybook/test": "^8.6.7",
+        "@storybook/theming": "^8.6.7",
+        "@storybook/vue3": "^8.6.7",
+        "@storybook/vue3-vite": "^8.6.7",
+        "@vitejs/plugin-vue": "^5.2.3",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/test-utils": "^2.4.6",
         "babel-eslint": "^10.1.0",
-        "babel-loader": "^9.2.1",
-        "chromatic": "^11.25.2",
-        "eslint": "^9.19.0",
-        "eslint-plugin-storybook": "^0.11.2",
+        "chromatic": "^11.27.0",
+        "eslint": "^9.22.0",
+        "eslint-plugin-storybook": "^0.11.6",
         "eslint-plugin-vue": "^9.32.0",
         "jsdom": "^26.0.0",
-        "prettier": "^3.4.2",
+        "prettier": "^3.5.3",
         "sass": "^1.83.4",
-        "storybook": "^8.5.3",
-        "storybook-addon-pseudo-states": "^4.0.2",
+        "storybook": "^8.6.7",
+        "storybook-addon-pseudo-states": "^4.0.3",
         "storybook-dark-mode": "^4.0.2",
-        "vite": "^6.0.11",
-        "vitest": "^3.0.5",
+        "vite": "^6.2.2",
+        "vitest": "^3.0.9",
         "vue-loader": "^17.4.2"
     },
     "bugs": {

package/stories/PxToolPanel.stories.js

@@ -0,0 +1,351 @@
+// Reference:
+// https://storybook.js.org/blog/storybook-7-docs/
+// https://storybook.js.org/docs/7.5/writing-docs/autodocs
+
+import { ref } from 'vue';
+import PxToolPanel from '@/components/PxToolPanel.vue';
+import PxToggleButton from '@/components/PxToggleButton.vue';
+import { extractArgTypes } from '@/storybook/sb-utils.js';
+
+export default {
+    title: 'Components/PxToolPanel',
+    component: PxToolPanel,
+    argTypes: {
+        title: { control: 'text' },
+        allowResize: {
+            control: 'select',
+            options: ['N', 'S', 'E', 'W', 'NS', 'EW', 'NSEW', 'NEWS', 'SWEN'],
+        },
+        showHeader: { control: 'boolean' },
+        teleportToBody: { control: 'boolean' },
+        minWidth: { control: 'number' },
+        minHeight: { control: 'number' },
+        constrainingRect: { control: 'object' },
+        bounds: { control: 'object' },
+    },
+};
+
+const Basic = {
+    args: {
+        title: 'Basic Panel',
+        allowResize: 'NSEW',
+        showHeader: true,
+        bounds: { x: 50, y: 50, width: 300, height: 200 },
+    },
+    render: (args, { argTypes }) => ({
+        components: { PxToolPanel },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div class="drag-container">
+                <PxToolPanel v-bind="args">
+                    <div class="panel-content">
+                        <p>Basic panel with all resize handles enabled</p>
+                    </div>
+                </PxToolPanel>
+            </div>
+        `,
+    }),
+};
+
+export const WithCustomHeader = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        headerClass: 'custom-header',
+    },
+    render: (args, { argTypes }) => ({
+        components: { PxToolPanel },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div class="drag-container">
+                <PxToolPanel v-bind="args">
+                    <template #header="{ title }">
+                        <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
+                            <span>{{ title }}</span>
+                            <button>⚙️</button>
+                        </div>
+                    </template>
+                    <div class="panel-content">
+                        <p>Panel with custom header template</p>
+                    </div>
+                </PxToolPanel>
+            </div>
+        `,
+    }),
+};
+
+export const WithoutHeader = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        allowResize: 'NEWS',
+        showHeader: false,
+    },
+};
+
+export const AllResizeHandles = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        allowResize: 'NSEW',
+        title: 'All Resize Handles',
+    },
+};
+
+export const HorizontalResizeOnly = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        allowResize: 'EW',
+        title: 'Horizontal Resize Only',
+    },
+};
+
+export const VerticalResizeOnly = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        allowResize: 'NS',
+        title: 'Vertical Resize Only',
+    },
+};
+
+export const CustomResizeHandleWidth = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        allowResize: 'NSEW',
+        title: 'Custom Resize Handle Width',
+    },
+    parameters: {
+        customCSS: `
+            .drag-container { width: 100%; height: 800px; position: relative; border: 1px dashed gray; }
+            .custom-resize-handles .px-tool-panel {
+                --px-tool-panel-resize-width: 20px;
+            }
+        `,
+    },
+    render: (args, { argTypes }) => ({
+        components: { PxToolPanel },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div class="drag-container custom-resize-handles">
+                <PxToolPanel v-bind="args">
+                    <div class="panel-content">
+                        <p>Panel with larger resize handles (20px)</p>
+                        <p>The resize handles should be visibly larger than other stories.</p>
+                    </div>
+                </PxToolPanel>
+            </div>
+        `,
+    }),
+};
+
+export const ConstrainedMovement = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        title: 'Constrained Panel',
+        constrainingRect: { x: 100, y: 100, width: 600, height: 400 },
+        bounds: { x: 150, y: 150, width: 300, height: 200 },
+    },
+    render: (args, { argTypes }) => ({
+        components: { PxToolPanel },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div class="drag-container">
+                <!-- Visual representation of the constraining rect -->
+                <div
+                    style="
+                        position: absolute;
+                        left: 100px;
+                        top: 100px;
+                        width: 600px;
+                        height: 400px;
+                        border: 2px dashed #666;
+                        background: rgba(0,0,0,0.05);
+                    "
+                ></div>
+                <PxToolPanel v-bind="args">
+                    <div class="panel-content">
+                        <p>This panel is constrained within the dashed rectangle</p>
+                    </div>
+                </PxToolPanel>
+            </div>
+        `,
+    }),
+};
+
+export const MultiplePanels = {
+    ...Basic,
+    parameters: {
+        customCSS: `
+            .drag-container { width: min(100%, 800px); height: 800px; position: relative; border: 1px dashed gray; padding: 1em; }
+        `,
+    },
+    render: (args, { argTypes }) => ({
+        components: { PxToolPanel },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div class="drag-container">
+                <PxToolPanel
+                    v-bind="args"
+                    title="Panel 1"
+                    :bounds="{ x: 50, y: 50, width: 300, height: 200 }"
+                    allowResize="NSEW"
+                >
+                    <div class="panel-content">
+                        <p>Try interacting with multiple panels</p>
+                    </div>
+                </PxToolPanel>
+                <PxToolPanel
+                    v-bind="args"
+                    title="Panel 2"
+                    :bounds="{ x: 400, y: 50, width: 300, height: 200 }"
+                    allowResize="NSEW"
+                >
+                    <div class="panel-content">
+                        <p>Panels can be moved and resized independently</p>
+                    </div>
+                </PxToolPanel>
+            </div>
+        `,
+    }),
+};
+
+export const TeleportToBody = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        teleportToBody: true,
+        title: 'Teleported Panel',
+        allowResize: 'NSEW',
+    },
+    render: (args, { argTypes }) => ({
+        components: { PxToolPanel, PxToggleButton },
+        setup() {
+            const showPanel = ref(false);
+            return { args, showPanel };
+        },
+        template: `
+            <div>
+                <div class="drag-container">
+                    <p>Click the button below to show a panel that will be teleported to the body element.</p>
+                    <p>This is the original container. When shown, the panel can move outside of it.</p>
+                    <p>Panel visible: {{ showPanel }}</p>
+                    <PxToggleButton v-model:checked="showPanel">
+                        {{ showPanel ? 'Hide Panel' : 'Show Panel' }}
+                    </PxToggleButton>
+                    <PxToolPanel v-if="showPanel" v-bind="args">
+                        <div class="panel-content">
+                            <p>This panel is rendered directly in the body element.</p>
+                            <p>You can drag it anywhere on the page!</p>
+                        </div>
+                    </PxToolPanel>
+                </div>
+            </div>
+        `,
+    }),
+};
+
+export const ContentConstrainedSize = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        allowResize: 'NSEW',
+        title: 'Content-Constrained Size',
+        bounds: { x: 100, y: 100, width: 200, height: 200 }, // Intentionally smaller than minWidth/minHeight
+        minWidth: 300,
+        minHeight: 300,
+    },
+    parameters: {
+        customCSS: `
+            .drag-container { width: min(100%, 800px); height: 800px; position: relative; border: 1px dashed gray; padding: 1em; }
+            .content-constrained {
+                padding: 1em;
+            }
+            .content-constrained p {
+                margin: 0.5em 0;
+            }
+        `,
+    },
+    render: (args, { argTypes }) => ({
+        components: { PxToolPanel },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div class="drag-container">
+                <PxToolPanel v-bind="args">
+                    <div class="panel-content content-constrained">
+                        <p>Size-Constrained Panel</p>
+                        <p>Try resizing the panel smaller than the minimum dimensions.</p>
+                    </div>
+                </PxToolPanel>
+            </div>
+        `,
+    }),
+};
+
+export const AutoHeight = {
+    ...Basic,
+    args: {
+        ...Basic.args,
+        allowResize: 'EW', // Only allow horizontal resizing
+        title: 'Auto Height Panel',
+        bounds: {
+            x: 50,
+            y: 50,
+            width: 300, // Initial width
+            height: null, // null height for auto sizing
+        },
+    },
+    parameters: {
+        customCSS: `
+            .drag-container { width: min(100%, 800px); height: 800px; position: relative; border: 1px dashed gray; padding: 1em; }
+            .auto-height-content {
+                padding: 1em;
+            }
+            .auto-height-content p {
+                margin: 0.5em 0;
+            }
+            .spacer {
+                height: 20px;
+            }
+        `,
+    },
+    render: (args, { argTypes }) => ({
+        components: { PxToolPanel },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div class="drag-container">
+                <PxToolPanel v-bind="args">
+                    <div class="panel-content auto-height-content">
+                        <p>This panel's height is determined by its content.</p>
+                        <p>You can only resize it horizontally.</p>
+                        <div class="spacer"></div>
+                        <p>The panel will automatically grow...</p>
+                        <div class="spacer"></div>
+                        <p>...or shrink...</p>
+                        <div class="spacer"></div>
+                        <p>...to fit its content!</p>
+                        <div class="spacer"></div>
+                        <p>Try resizing horizontally - the height will stay fitted to content.</p>
+                    </div>
+                </PxToolPanel>
+            </div>
+        `,
+    }),
+};

package/utils/balanceText.js

@@ -58,11 +58,43 @@ function squeezeContainer(headline, originalHeight, bottomRange, topRange, lineA
     }
 }
 
+function textElementIsMultipleLines(element) {
+    if (!element) {
+        console.warn('textElementIsMultipleLines called with no element');
+        return false;
+    }
+
+    // get font metrics with getComputedStyle
+    const computedStyle = window.getComputedStyle(element);
+    const fontSize = parseFloat(computedStyle.fontSize);
+    const lineHeight =
+        computedStyle.lineHeight === 'normal'
+            ? fontSize * 1.2
+            : parseFloat(computedStyle.lineHeight);
+
+    // calculate total vertical spacing
+    const padding = parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
+    const border =
+        parseFloat(computedStyle.borderTopWidth) + parseFloat(computedStyle.borderBottomWidth);
+
+    // calculate expected single line height including padding and borders
+    const expectedSingleLineHeight = lineHeight + padding + border;
+
+    // get actual element height
+    const actualHeight = element.offsetHeight;
+
+    // add a small buffer (20% of line height) to account for font variations
+    const buffer = lineHeight * 0.2;
+
+    // return true if actual height is significantly larger than expected single line height
+    return actualHeight > expectedSingleLineHeight + buffer;
+}
+
 // Function to see if a headline is multiple lines we only want to break if the headline is multiple
 // lines. We achieve this by turning the first word into a span and then we compare the height of
 // that span to the height of the entire headline. If the headline is bigger than the span by 10px
 // we balance the headline.
-function textElementIsMultipleLines(element) {
+function textElementIsMultipleLinesLEGACY(element) {
     if (!element) {
         console.warn('textElementIsMultipleLines called with no element');
         return false;

package/utils/utils.js

@@ -270,23 +270,49 @@ export function filterObjectByKeys(obj, allowedKeys) {
  */
 
 export function deepMerge(target, source, overwrite = true) {
-    if (typeof target !== 'object' || typeof source !== 'object') return source;
+    // Handle non-object source
+    if (!source || typeof source !== 'object') {
+        return source;
+    }
+
+    // Handle non-object target
+    if (!target || typeof target !== 'object') {
+        return source;
+    }
 
     for (const key in source) {
         if (source.hasOwnProperty(key)) {
+            const sourceValue = source[key];
+            const targetValue = target[key];
+
+            // Skip if source value is undefined and we're not overwriting
+            if (!overwrite && sourceValue === undefined) {
+                continue;
+            }
+
+            // Handle null values and arrays directly
+            if (sourceValue === null || targetValue === null || Array.isArray(sourceValue)) {
+                target[key] = sourceValue;
+                continue;
+            }
+
+            // Recursively merge objects
             if (
-                typeof source[key] === 'object' &&
-                !Array.isArray(source[key]) &&
-                typeof target[key] === 'object'
+                typeof sourceValue === 'object' &&
+                typeof targetValue === 'object' &&
+                !Array.isArray(targetValue)
             ) {
-                target[key] = deepMerge(target[key], source[key], overwrite); // Recursively merge objects
-            } else if (overwrite || !(key in target)) {
-                target[key] = source[key];
+                target[key] = deepMerge(targetValue, sourceValue, overwrite);
+            }
+            // Handle all other cases (primitives, functions, etc.)
+            else if (overwrite || !(key in target)) {
+                target[key] = sourceValue;
             }
         }
     }
     return target;
 }
+
 /**
  * Returns an object representing the current query string parameters.
  */
@@ -514,3 +540,33 @@ export function findScrollParent(node) {
 
     return document.scrollingElement || document.documentElement;
 }
+
+/**
+ * Converts strings into an array of items compatible with PxBaseItems.
+ * Each string will be used as the id, label, and value of the resulting item.
+ * Can accept either an array of strings or multiple string arguments.
+ *
+ * @param {string[]|...string} strings - Either an array of strings or multiple string arguments
+ * @returns {Array<{id: string, label: string, value: string}>} Array of PxBaseItems-compatible objects
+ * @example
+ * // Using array argument
+ * const items1 = stringsToBaseItems(['Apple', 'Banana', 'Orange']);
+ * // Returns: [
+ * //   { id: 'Apple', label: 'Apple', value: 'Apple' },
+ * //   { id: 'Banana', label: 'Banana', value: 'Banana' },
+ * //   { id: 'Orange', label: 'Orange', value: 'Orange' }
+ * // ]
+ *
+ * // Using rest parameters
+ * const items2 = stringsToBaseItems('Apple', 'Banana', 'Orange');
+ * // Returns the same result as above
+ */
+export function stringsToBaseItems(...strings) {
+    // If first argument is an array, use it directly, otherwise use all arguments
+    const items = Array.isArray(strings[0]) ? strings[0] : strings;
+    return items.map(str => ({
+        id: str.toLowerCase().replace(/ /g, '-'),
+        label: str,
+        value: str.toLowerCase().replace(/ /g, '-'),
+    }));
+}

package/utils/utils.test.js

@@ -0,0 +1,52 @@
+import { deepMerge } from './utils.js';
+
+describe('deepMerge', () => {
+    test('handles basic object merging', () => {
+        const target = { a: 1, b: 2 };
+        const source = { b: 3, c: 4 };
+        expect(deepMerge(target, source)).toEqual({ a: 1, b: 3, c: 4 });
+    });
+
+    test('handles nested object merging', () => {
+        const target = { a: { x: 1, y: 2 }, b: 2 };
+        const source = { a: { y: 3, z: 4 }, c: 4 };
+        expect(deepMerge(target, source)).toEqual({ a: { x: 1, y: 3, z: 4 }, b: 2, c: 4 });
+    });
+
+    test('handles null values in source', () => {
+        const target = { a: { x: 1 }, b: 2 };
+        const source = { a: null, c: 3 };
+        expect(deepMerge(target, source)).toEqual({ a: null, b: 2, c: 3 });
+    });
+
+    test('handles null values in target', () => {
+        const target = { a: null, b: 2 };
+        const source = { a: { x: 1 }, c: 3 };
+        expect(deepMerge(target, source)).toEqual({ a: { x: 1 }, b: 2, c: 3 });
+    });
+
+    test('handles primitive values in nested objects', () => {
+        const target = { a: { x: 1 }, b: { y: 2 } };
+        const source = { a: 'string', b: { z: 3 } };
+        expect(deepMerge(target, source)).toEqual({ a: 'string', b: { y: 2, z: 3 } });
+    });
+
+    test('handles arrays', () => {
+        const target = { a: [1, 2], b: 2 };
+        const source = { a: [3, 4], c: 3 };
+        expect(deepMerge(target, source)).toEqual({ a: [3, 4], b: 2, c: 3 });
+    });
+
+    test('handles undefined values', () => {
+        const target = { a: { x: 1 }, b: undefined };
+        const source = { a: { y: 2 }, b: { z: 3 } };
+        expect(deepMerge(target, source)).toEqual({ a: { x: 1, y: 2 }, b: { z: 3 } });
+    });
+
+    test('handles non-object inputs', () => {
+        expect(deepMerge(null, { a: 1 })).toEqual({ a: 1 });
+        expect(deepMerge({ a: 1 }, null)).toEqual(null);
+        expect(deepMerge(undefined, { a: 1 })).toEqual({ a: 1 });
+        expect(deepMerge({ a: 1 }, undefined)).toEqual(undefined);
+    });
+});

package/utils/utilsSsr.js

@@ -10,19 +10,15 @@ export function getQueryParams() {
         return params;
     };
 
-    let queryParams;
-
-    let ctx;
-
-    if (typeof window === 'undefined') {
-        ctx = useSSRContext();
-    }
-
-    if (ctx) {
-        queryParams = getQueryParams(ctx.url);
-    } else {
+    let queryParams = {};
+    if (import.meta.server) {
+        const ctx = useSSRContext();
+        // there are some error situations where ctx is not available
+        if (ctx) {
+            queryParams = getQueryParams(ctx.url);
+        }
+    } else if (typeof window !== 'undefined') {
         const { search } = window.location;
-
         queryParams = getQueryParams(search);
     }