@thinkpixellab-public/px-vue 4.0.25 → 4.0.27

package/components/PxBalancedText.vue

@@ -11,13 +11,20 @@
         <component
             v-if="hasHtml"
             :class="[bem('inner', { html: true }), innerClass]"
+            :style="innerStyle"
             :is="calcInnerTag"
             ref="text"
             v-html="html"
         />
 
         <!-- 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>
@@ -47,8 +54,16 @@ export default {
          */
         innerTag: { type: String, default: null },
 
-        // the inner tag element
+        /**
+         * Class applied to the inner element.
+         */
         innerClass: { type: String, default: null },
+
+        /**
+         * Style applied to the inner element.
+         */
+        innerStyle: { type: [String, Object], default: null },
+
         /**
          * Html that gets set on the inner tag element
          */
@@ -131,6 +146,7 @@ export default {
             return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
         },
         isHeadless() {
+            // TODO: replace with isUnderTest
             if (isServer()) {
                 return false;
             }
@@ -182,6 +198,9 @@ export default {
                 }
             }
         },
+        getInnerTextRef() {
+            return this.$refs.text;
+        },
     },
 };
 </script>

package/components/PxCardGrid.vue

@@ -137,6 +137,7 @@ You can define a template using space notation like this:
 <script>
 import aspect from '../plugins/filters/aspect.js';
 import PxBaseItems from '../bases/PxBaseItems.vue';
+import PxBaseResize from '../bases/PxBaseResize.vue';
 
 // prettier-ignore
 const defaultTemplates = {
@@ -193,7 +194,7 @@ const cardCountInRowTemplate = rowTemplate => {
 
 export default {
     name: 'px-card-grid',
-    mixins: [PxBaseItems],
+    mixins: [PxBaseResize, PxBaseItems],
     props: {
         templates: { type: Object, default: () => defaultTemplates },
         maxColumns: { type: Number, default: 6 },
@@ -327,12 +328,6 @@ export default {
         },
     },
     mounted() {
-        this.resizeObserver = new ResizeObserver(() => {
-            this.resize();
-        });
-        this.resizeObserver.observe(this.$el);
-
-        this.resize();
         this.updateRowTemplates();
     },
     beforeDestroy() {

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.25",
+  "version": "4.0.27",
   "description": "General purpose Vue components and helpers that can be used across projects.",
   "author": {
     "name": "Pixel Lab"

package/utils/textWidth.js

@@ -27,11 +27,21 @@ const getCssProp = (element, prop) => {
     return window.getComputedStyle(element, null).getPropertyValue(prop);
 };
 
-const getFontFromElement = element => {
+const getFontFromElement = (element, asObject = false) => {
     const fontWeight = getCssProp(element, 'font-weight') || 'normal';
     const fontSize = getCssProp(element, 'font-size') || '16px';
     const fontFamily = getCssProp(element, 'font-family') || 'sans-serif';
 
+    if (asObject) {
+        const lineHeight = getCssProp(element, 'line-height') || 1.2;
+        return {
+            fontWeight,
+            fontSize,
+            fontFamily,
+            lineHeight,
+        };
+    }
+
     return `${fontWeight} ${fontSize} ${fontFamily}`;
 };