@thinkpixellab-public/px-vue 4.1.9 → 4.1.14

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/PxArrowScroller.vue

@@ -140,7 +140,7 @@ export default {
 
     methods: {
         combineIconClasses(...classNames) {
-            return classNames.filter((c) => c).join(' ');
+            return classNames.filter(c => c).join(' ');
         },
         pxIconProps(attrs) {
             return propsFilter(PxIcon)(attrs);

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/PxFloat.vue

@@ -39,6 +39,7 @@
                     ref="popup"
                     :class="[bem('popup'), popupClass]"
                     :style="{
+                        opacity: !popupPositioned ? 0 : null,
                         pointerEvents: visibleValue ? null : 'none',
                         userSelect: visibleValue ? null : 'none',
                         ...(positionCss || {}),
@@ -274,6 +275,9 @@ export default {
             // mirrors visibleValue but one tick behind (so that we can trigger actions that require the popup to be in the DOM)
             visibleValueNext: false,
 
+            // whether the popup has been finally positioned (used to trigger opacity)
+            popupPositioned: false,
+
             // mirrors reference
             referenceValue: null,
 
@@ -357,6 +361,10 @@ export default {
 
             // delayed actions (settimeout seems to work but $nextTick doesn't)
 
+            if (nv) {
+                this.popupPositioned = false;
+            }
+
             setTimeout(() => {
                 // floating-ui
 
@@ -412,6 +420,8 @@ export default {
                     // see watcher for transitionVisible
                 }
 
+                this.popupPositioned = true;
+
                 // show and hide events (also see beforeshow/beforehide in visibleValue watcher)
 
                 if (nv) {

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/components/PxToggle.vue

@@ -14,6 +14,19 @@
             :style="{ backgroundColor: checkedValue ? checkedColor : uncheckedColor }"
         >
             <span :class="bem('spacer')"></span>
+            <transition name="px-toggle-icon">
+                <span v-if="$slots['icon-on'] && checkedValue" :class="bem('icon', { on: true })">
+                    <slot name="icon-on" />
+                </span>
+            </transition>
+            <transition name="px-toggle-icon">
+                <span
+                    v-if="$slots['icon-off'] && !checkedValue"
+                    :class="bem('icon', { off: true })"
+                >
+                    <slot name="icon-off" />
+                </span>
+            </transition>
             <span
                 :class="[bem('thumb'), trackClass]"
                 :style="{ backroundColor: thumbColor }"
@@ -79,10 +92,18 @@ export default {
 @use '@thinkpixellab-public/px-styles/src/modules/controls' as *;
 
 .px-toggle {
-    --px-toggle-size: 1em;
-    --px-toggle-unchecked: #{gray(-8, 0.33)};
-    --px-toggle-checked: #{accent()};
-    --px-toggle-thumb: white;
+    @at-root {
+        @include vue-transition-fade(px-toggle-icon);
+
+        :root {
+            --px-toggle-size: 1em;
+            --px-toggle-unchecked: #{gray(-8, 0.33)};
+            --px-toggle-checked: #{accent()};
+            --px-toggle-thumb: white;
+            --px-toggle-track-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
+            --px-toggle-thumb-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
+        }
+    }
 
     @include toggle-switch(
         (
@@ -90,6 +111,8 @@ export default {
             '--thumb.font-size': var(--px-toggle-size),
             '--track.background-color': var(--px-toggle-unchecked),
             '--track.font-size': var(--px-toggle-size),
+            '--track.box-shadow': var(--px-toggle-track-shadow),
+            '--thumb.box-shadow': var(--px-toggle-thumb-shadow),
             'checked.--track.background-color': var(--px-toggle-checked),
         ),
         '.px-toggle__track',
@@ -97,6 +120,26 @@ export default {
         '.px-toggle__spacer'
     );
 
+    &__icon {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        aspect-ratio: 1;
+        border-radius: 50%;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &--on {
+            left: 0;
+        }
+
+        &--off {
+            right: 0;
+        }
+    }
+
     &--reverse {
         flex-direction: row-reverse;
     }

package/components/PxToggleButton.vue

@@ -163,12 +163,16 @@ export default {
             return this.mode === 'expander' ? 'button' : 'switch';
         },
         ariaChecked() {
-            if (!this.isSwitch) return null;
+            if (!this.isSwitch) {
+                return null;
+            }
 
             return this.checked ? 'true' : 'false';
         },
         ariaExpanded() {
-            if (this.isSwitch) return null;
+            if (this.isSwitch) {
+                return null;
+            }
 
             return this.checked ? 'true' : 'false';
         },

package/components/PxToggleButtonList.vue

@@ -28,7 +28,11 @@
             v-for="item in items"
             :key="getItemKey(item)"
             :is="isVariant('radio') ? 'px-radio-button' : 'px-toggle-button'"
-            :class="[bem('button'), buttonClass]"
+            :class="[
+                bem('button'),
+                buttonClass,
+                isItemSelected(item) ? buttonClass + '--checked' : null,
+            ]"
             :icon="icon"
             :iconSize="iconSize"
             :variant="isVariant('radio') ? 'default' : variant"
@@ -79,6 +83,11 @@ export default {
 
         //
         multiSelect: { type: Boolean, default: false },
+
+        /**
+         * When true, ensures that one item is always selected (radio button behavior)
+         */
+        requireSelection: { type: Boolean, default: true },
     },
     computed: {
         calculatedInputGroup() {
@@ -96,6 +105,15 @@ export default {
             this.selectItems(item);
         },
         itemUncheck(item) {
+            // Prevent unchecking if requireSelection is true and this is the last selected item
+            if (
+                this.requireSelection &&
+                !this.multiSelect &&
+                this.selectedItems.length === 1 &&
+                this.isItemSelected(item)
+            ) {
+                return;
+            }
             this.unselectItems(item);
         },
     },