@thinkpixellab-public/px-vue 4.1.13 → 4.1.14

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/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/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);
         },
     },