@thinkpixellab-public/px-vue 4.1.9 → 4.1.13

package/bases/PxBaseItemsSelect.vue

@@ -37,6 +37,12 @@ export default {
          * items is updated and no other item is selected
          */
         autoSelectFirst: { type: Boolean, default: false },
+
+        /**
+         * If true, the update and change events will only be emitted after if the component is
+         * mounted.
+         */
+        emitEventsBeforeMounted: { type: Boolean, default: false },
     },
 
     data() {
@@ -179,7 +185,7 @@ export default {
          * Emit the change / update:selected event
          */
         emitUpdateEvent() {
-            if (!this.isMounted) {
+            if (!this.isMounted && !this.emitEventsBeforeMounted) {
                 return;
             }
 

package/bases/PxBaseUniqueId.vue

@@ -1,8 +1,8 @@
 <script>
 export default {
     beforeCreate() {
-        const id = typeof useId === 'function' ? useId() : Math.floor(Math.random() * 0x10000);
-        this.$__uniqueId = id;
+        const id = this.$.uid || Math.floor(Math.random() * 1000);
+        this.$__uniqueId = String(id).padStart(4, '0');
     },
     methods: {
         /**

package/components/PxContain.vue

@@ -233,7 +233,7 @@ export default {
 
             let r;
 
-            if (this.aspect) {
+            if (this.aspect || (this.naturalWidth && this.naturalHeight)) {
                 r = contain(
                     inner,
                     outer,

package/components/PxIcon.vue

@@ -136,8 +136,8 @@ const PxIcon = {
 
             if (offset || spacing || this.strokeWidth) {
                 return {
-                    transform: offset ? `translateY(${cssEmFallback(offset)})` : null,
-                    margin: spacing ? `auto ${cssEmFallback(spacing)}` : null,
+                    transform: offset ? `translateY(${cssEmFallback(this.offset)})` : null,
+                    margin: spacing ? `auto ${cssEmFallback(this.spacing)}` : null,
                     strokeWidth: cssPx(this.strokeWidth, false),
                 };
             }

package/components/PxResizer.vue

@@ -115,6 +115,7 @@ export default {
 
                 this.updateSize(r.width, r.height, this.downDirection);
 
+                document.body.style.userSelect = 'none';
                 document.addEventListener('mousemove', this.mousemove);
                 document.addEventListener('mouseup', this.mouseup);
             }
@@ -130,6 +131,7 @@ export default {
             e.preventDefault();
         },
         mouseup() {
+            document.body.style.removeProperty('user-select');
             this.resizing = false;
             this.emitResizeEnd();
             document.removeEventListener('mousemove', this.mousemove);
@@ -143,6 +145,16 @@ export default {
 @use '../styles/px.scss' as *;
 @use 'sass:color';
 
+@at-root {
+    :root {
+        --px-resizer-color: #{accent()};
+        --px-resizer-color-hover: #{color.adjust(accent(), $lightness: -10%)};
+        --px-resizer-width: 3px;
+        --px-resizer-height: 24px;
+        --px-resizer-hit-width: 24px;
+        --px-resizer-offset: 10px;
+    }
+}
 .px-resizer {
     position: relative;
     margin: 0 auto;
@@ -165,16 +177,16 @@ export default {
 
     &--show-overlay {
         &::after {
-            border: 1px dashed accent();
+            border: 1px dashed var(--px-resizer-color);
             border-radius: inherit;
         }
     }
 
     &__resize-x,
     &__resize-y {
-        color: accent();
+        color: var(--px-resizer-color);
         &:hover {
-            color: color.adjust(accent(), $lightness: -10%);
+            color: var(--px-resizer-color-hover);
         }
         &:active {
             opacity: 0.5;
@@ -184,13 +196,16 @@ export default {
     &__resize-x {
         @include center-y();
         cursor: ew-resize;
-        width: 24px;
-        height: 36px;
-        right: -24px;
+        width: var(--px-resizer-hit-width);
+        height: var(--px-resizer-height);
+        right: calc(var(--px-resizer-hit-width) * -1);
+
         @include after() {
-            @include center();
-            width: 3px;
-            height: 24px;
+            position: absolute;
+            top: 0;
+            left: var(--px-resizer-offset);
+            width: var(--px-resizer-width);
+            height: var(--px-resizer-height);
             background-color: currentColor;
         }
     }
@@ -198,13 +213,17 @@ export default {
     &__resize-y {
         @include center-x();
         cursor: ns-resize;
-        width: 36px;
-        height: 24px;
-        bottom: -24px;
+
+        height: var(--px-resizer-hit-width);
+        width: var(--px-resizer-height);
+        bottom: calc(var(--px-resizer-hit-width) * -1);
+
         @include after() {
-            @include center();
-            height: 3px;
-            width: 24px;
+            position: absolute;
+            left: 0;
+            top: var(--px-resizer-offset);
+            height: var(--px-resizer-width);
+            width: var(--px-resizer-height);
             background-color: currentColor;
         }
     }

package/composables/useSettings.js

@@ -0,0 +1,49 @@
+import { ref, watch, onMounted } from 'vue';
+import { deepMerge } from '../utils/utils.js';
+
+/**
+ * Provides a reactive settings object that syncs with localStorage. Basic usage:
+ *
+ * setup() {
+ *    const settings = useSettings("appSettings", {
+ *         setting1: true,
+ *         setting2: 'awesome'
+ *    }, (loadedSettings) => {
+ *         console.log("Settings initialized:", loadedSettings);
+ *    });
+ *    return { settings }
+ * }
+ */
+
+export default function useSettings(key, defaultSettings = {}, onInit = null) {
+    const settings = ref(defaultSettings);
+
+    const loadSettings = () => {
+        if (process.client) {
+            const stored = localStorage.getItem(key);
+            const parsed = stored ? JSON.parse(stored) : {};
+
+            settings.value = deepMerge(settings.value, parsed, true);
+
+            if (onInit && typeof onInit === 'function') {
+                onInit(settings.value);
+            }
+        }
+    };
+
+    onMounted(() => {
+        loadSettings();
+    });
+
+    watch(
+        settings,
+        nv => {
+            if (process.client) {
+                localStorage.setItem(key, JSON.stringify(nv));
+            }
+        },
+        { deep: true },
+    );
+
+    return settings;
+}

package/package.json

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

package/stories/PxContain.stories.js

@@ -37,6 +37,44 @@ export const Basic = {
         </PxResizer>
 
 
+        `,
+    }),
+};
+
+export const ScaledContentExample = {
+    render: (args, { argTypes }) => ({
+        components: { PxResizer, PxContain },
+        setup() {
+            return { args };
+        },
+        template: `
+        <PxResizer :initialWidth="400" initialHeight="400" class="story-bounds" >
+            <PxContain #default="{width, height, left, top, scale}" :naturalWidth="1000" :naturalHeight="1000" :round="true" :to-px="true" v-bind="args" >
+                <div
+                    class="story-fill"
+                    :style="{
+                        top,
+                        left,
+                        width: '1000px',
+                        height: '1000px',
+                        position: 'absolute',
+                        transform: 'scale(' + scale + ')',
+                        transformOrigin: '0 0',
+                        fontSize: '50px',
+                    }">
+                    Outer natural size: 1000px x 1000px<br>
+                    Font-size: 50px<br>
+                    Scale {{Math.round(1000 * scale) / 1000}}
+
+
+                    <div style="width: 500px; height: 500px; background-color: rgba(0,0,0,0.5); top: 250px; left: 250px; position: absolute;">
+                        Inner Rectangle Size: 500px x 500px
+                    </div>
+                </div>
+            </PxContain>
+        </PxResizer>
+
+
         `,
     }),
 };

package/test/PxBaseItemsSelect.test.js

@@ -99,6 +99,7 @@ test('single', async () => {
         props: {
             items: items,
             selected: [items[3].id, items[2].id],
+            emitEventsBeforeMounted: true,
         },
     });
 

package/test/PxBaseUniqueId.test.js

@@ -4,9 +4,11 @@ import PxBaseUniqueId from '@/bases/PxBaseUniqueId.vue';
 
 test('Ensure uniqueId method works', () => {
     const wrapper = shallowMount(MockComponent, {
-        mixins: [PxBaseUniqueId],
-        props: {},
+        global: {
+            mixins: [PxBaseUniqueId],
+        },
     });
+
     expect(wrapper.vm.uniqueId()).toEqual('0001');
 });
 
@@ -18,7 +20,6 @@ test('Ensure uniqueId method works with a prefix', () => {
     expect(wrapper.vm.uniqueId('label')).toEqual('label-0003');
 });
 
-
 test('Ensure uniqueId method trims extra spaces', () => {
     const wrapper = shallowMount(MockComponent, {
         mixins: [PxBaseUniqueId],

package/test/utils.test.js

@@ -1,4 +1,4 @@
-import { objectToArray } from '../utils/utils.js';
+import { objectToArray, deepMerge } from '../utils/utils.js';
 
 test('objectToArray (defaults with value type value)', () => {
     expect(objectToArray({ one: 1, two: 2, three: 3 })).toEqual([
@@ -44,3 +44,17 @@ test('objectToArray (expand objects)', () => {
         { key: 'three', number: 3, ordinal: 'third' },
     ]);
 });
+
+test('deepMerge', () => {
+    const target = { a: 1, b: { c: 2, d: 3 } };
+    const source = { b: { d: 4, e: 5 } };
+
+    expect(deepMerge(target, source)).toEqual({ a: 1, b: { c: 2, d: 4, e: 5 } });
+});
+
+test('deepMerge (overwrite is false)', () => {
+    const target = { a: 1, b: { c: 2, d: 3 } };
+    const source = { b: { d: 4, e: 5 } };
+
+    expect(deepMerge(target, source, false)).toEqual({ a: 1, b: { c: 2, d: 3, e: 5 } });
+});

package/utils/drag.js

@@ -36,6 +36,9 @@ const defaults = {
 
     // initial value for the disabled property
     disabled: false,
+
+    // disable text selection during drag
+    disableTextSelection: true,
 };
 
 function Drag(element, options) {
@@ -310,6 +313,11 @@ function Drag(element, options) {
 
     this.addRuntimeEvents = () => {
         this.removeRuntimeEvents();
+
+        if (this.ops.disableTextSelection) {
+            document.body.style.userSelect = 'none';
+        }
+
         if (this.supportsTouch) {
             document.addEventListener('touchmove', this.onDrag, { passive: false });
             document.addEventListener('touchend', this.onEnd);
@@ -320,6 +328,10 @@ function Drag(element, options) {
     };
 
     this.removeRuntimeEvents = () => {
+        if (this.ops.disableTextSelection) {
+            document.body.style.removeProperty('user-select');
+        }
+
         if (this.supportsTouch) {
             document.removeEventListener('touchmove', this.onDrag, { passive: false });
             document.removeEventListener('touchend', this.onEnd);

package/utils/utils.js

@@ -251,6 +251,42 @@ export function filterObjectByKeys(obj, allowedKeys) {
         }, {});
 }
 
+/**
+ * Performs a deep merge of two objects by merging source into target. This function is similar to
+ * Object.assign, but it recursively merges objects.
+ *
+ * @param {Object} target - The object to merge into.
+ * @param {Object} source - The object to merge from.
+ * @param {boolean} [overwrite=true] - If true, properties in source will overwrite properties in
+ * target with the same key. If false, properties in source will only be added if the key doesn't
+ * already exist in target.
+ * @returns {Object} The merged object.
+ *
+ * @example
+ * const target = { a: 1, b: { c: 2 } };
+ * const source = { b: { d: 3 } };
+ * const result = deepMerge(target, source);
+ * // result is { a: 1, b: { c: 2, d: 3 } }
+ */
+
+export function deepMerge(target, source, overwrite = true) {
+    if (typeof target !== 'object' || typeof source !== 'object') return source;
+
+    for (const key in source) {
+        if (source.hasOwnProperty(key)) {
+            if (
+                typeof source[key] === 'object' &&
+                !Array.isArray(source[key]) &&
+                typeof target[key] === 'object'
+            ) {
+                target[key] = deepMerge(target[key], source[key], overwrite); // Recursively merge objects
+            } else if (overwrite || !(key in target)) {
+                target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
 /**
  * Returns an object representing the current query string parameters.
  */