@thinkpixellab-public/px-vue 4.0.26 → 4.0.27

package/components/PxBalancedText.vue

@@ -18,7 +18,13 @@
         />
 
         <!-- slot -->
-        <component v-else :class="[bem('inner'), innerClass]" :is="calcInnerTag" ref="text">
+        <component
+            v-else
+            :class="[bem('inner'), innerClass]"
+            :style="innerStyle"
+            :is="calcInnerTag"
+            ref="text"
+        >
             <slot>
                 {{ text }}
             </slot>

package/components/PxFit.vue

@@ -221,6 +221,8 @@ export default {
                 await this.tryFits(this.resizeId);
 
                 this.$emit('resize-end');
+            } else {
+                this.selectedFit = this.fallback;
             }
         },
     },

package/components/PxSideDrawer.vue

@@ -30,10 +30,10 @@
             v-model:visible="visibleValue"
             v-bind="modalProps"
             :overlayClass="[bem('overlay-base'), overlayClass]"
-            transition-name="px-side-drawer__tr"
+            :transition-name="'px-side-drawer__' + mode"
             variant="none"
         >
-            <div :id="drawerA11yId" :class="bem()">
+            <div :id="drawerA11yId" :class="bem({ mode })">
                 <div :class="drawerClass">
                     <div :class="bem('top')">
                         <div :class="bem('close')">
@@ -99,6 +99,9 @@ export default {
 
         // accessibility props
         closeButtonLabel: { type: String, default: 'Close' },
+
+        // how it appears (from the top or side)
+        mode: { type: String, default: 'side' },
     },
     // data() { return { b: 0 }; },
     computed: {
@@ -120,7 +123,7 @@ export default {
 
 $dur: 400ms;
 
-@include vue-transition('px-side-drawer__tr') {
+@include vue-transition('px-side-drawer__side') {
     @include vt-transition {
         @include transition(color, $dur: $dur);
         .px-side-drawer__overlay-base {
@@ -141,6 +144,27 @@ $dur: 400ms;
     }
 }
 
+@include vue-transition('px-side-drawer__top') {
+    @include vt-transition {
+        @include transition(color, $dur: $dur);
+        .px-side-drawer__overlay-base {
+            @include transition(opacity, $dur: $dur);
+        }
+        .px-side-drawer__drawer {
+            @include transition(transform, $dur: $dur);
+        }
+    }
+
+    @include vt-hidden() {
+        .px-side-drawer__overlay-base {
+            opacity: 0;
+        }
+        .px-side-drawer__drawer {
+            transform: translateY(-100%);
+        }
+    }
+}
+
 .px-side-drawer {
     position: fixed;
     right: 0;
@@ -149,7 +173,7 @@ $dur: 400ms;
     min-width: 10px;
 
     &__overlay {
-        background-color: color(accent, 0.2, -6);
+        background-color: clr(page-fg, $alpha: 0.1);
     }
 
     &__drawer,
@@ -206,5 +230,17 @@ $dur: 400ms;
             backdrop-filter: blur(10px);
         }
     }
+
+    &--mode-top {
+        height: auto;
+    }
+
+    &--mode-top & {
+        &__drawer {
+            width: 100vw;
+            max-width: 100vw;
+            height: auto;
+        }
+    }
 }
 </style>

package/components/PxSticky.vue

@@ -5,14 +5,9 @@
 <template>
     <div
         :class="[bem({ disabled: !enabled }), stuck ? stuckClass : unstuckClass]"
-        :style="enabled ? { top: cssPx(top), position: 'sticky', zIndex: z } : null"
+        :style="elementStyle"
     >
-        <div
-            v-show="enabled"
-            ref="sentinel"
-            :class="bem('sentinel')"
-            :style="enabled ? { top: cssPx(-(top + overlap)), height: cssPx(top + overlap) } : null"
-        ></div>
+        <div v-show="enabled" ref="sentinel" :class="bem('sentinel')" :style="sentinelStyle"></div>
         <slot :stuck="stuck" />
     </div>
 </template>
@@ -22,7 +17,8 @@ export default {
     name: 'px-sticky',
     props: {
         enabled: { type: Boolean, default: true },
-        top: { type: Number, default: 0 },
+        mode: { type: String, default: 'top' },
+        offset: { type: Number, default: 0 },
         overlap: { type: Number, default: 1 },
         z: { type: Number, default: 1 },
         stuckClass: { type: String, default: '' },
@@ -34,6 +30,25 @@ export default {
             stuckScrollY: null,
         };
     },
+    computed: {
+        elementStyle() {
+            if (this.enabled) {
+                const style = { position: 'sticky', zIndex: this.z };
+                style[this.mode] = this.cssPx(this.offset);
+                return style;
+            }
+
+            return null;
+        },
+        sentinelStyle() {
+            if (this.enabled) {
+                const style = { height: this.cssPx(this.offset + this.overlap) };
+                style[this.mode] = this.cssPx(-(this.offset + this.overlap));
+                return style;
+            }
+            return null;
+        },
+    },
     watch: {
         enabled() {
             this.updateConnections();

package/package.json

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