@thinkpixellab-public/px-vue 3.0.85 → 3.0.87

package/components/PxAutoClamp.vue

@@ -2,8 +2,9 @@
     Automatically computes line clamp based on the available height and current line height.
 -->
 <template>
-    <component :is="tag" :class="bem()" :style="{}">
+    <component :is="tag" :class="bem()">
         <span
+            v-if="enabled"
             :class="bem('clamp')"
             :style="{
                 '-webkit-line-clamp': lineCount,
@@ -15,6 +16,11 @@
                 {{ text }}
             </slot>
         </span>
+        <span v-else>
+            <slot>
+                {{ text }}
+            </slot>
+        </span>
     </component>
 </template>
 
@@ -25,6 +31,7 @@ export default {
     name: 'px-auto-clamp',
     mixins: [PxBaseResize],
     props: {
+        enabled: { type: Boolean, default: true },
         text: { type: String, default: null },
         tag: { type: String, default: 'div' },
     },

package/components/PxBaseMobileAware.vue

@@ -6,7 +6,7 @@
 export default {
     inject: {
         mediaQuery: {
-            default: { isMobile: null, currentBreakpoint: null },
+            default: { isMobile: null, currentBreakpoint: null, breakpoints: {} },
         },
     },
     computed: {
@@ -17,5 +17,22 @@ export default {
             return this.mediaQuery.currentBreakpoint;
         },
     },
+
+    methods: {
+        isBreakpointOrSmaller(breakpoint) {
+            if (this.currentBreakpoint === null) {
+                return false;
+            }
+
+            if (this.currentBreakpoint === breakpoint) {
+                return true;
+            }
+
+            return (
+                this.mediaQuery.breakpoints[breakpoint] >=
+                this.mediaQuery.breakpoints[this.currentBreakpoint]
+            );
+        },
+    },
 };
 </script>

package/components/PxBaseMobileProvide.vue

@@ -21,9 +21,38 @@ export default {
     },
     mixins: [PxBaseResize],
     data() {
-        return { mediaQuery: { isMobile: null, currentBreakpoint: null } };
+        return { mediaQuery: { isMobile: null, currentBreakpoint: null, breakpoints: {} } };
     },
+    mounted() {
+        const breakpointNames = getComputedStyle(document.documentElement)
+            .getPropertyValue('--breakpoint-names')
+            .trim()
+            .split(' ');
 
+        const breakpointSizes = getComputedStyle(document.documentElement)
+            .getPropertyValue('--breakpoint-sizes')
+            .trim()
+            .split(' ');
+
+        if (breakpointNames.length !== breakpointSizes.length) {
+            console.warn('Breakpoint names and sizes do not match');
+            return;
+        }
+
+        try {
+            this.mediaQuery.breakpoints = Object.fromEntries(
+                breakpointNames
+                    .map((name, index) => {
+                        return [name, parseInt(breakpointSizes[index])];
+                    })
+                    .sort((a, b) => a[1] - b[1])
+            );
+        } catch {
+            console.warn(
+                'Could not parse breakpoint sizes. Check the format of the breakpoint-sizes variable in the theme file.'
+            );
+        }
+    },
     methods: {
         updateMediaQuery() {
             this.mediaQuery.isMobile =

package/components/PxBaseVariantsOverride.vue

@@ -18,7 +18,7 @@ export default {
         variantValue() {
             return (
                 (this.variantBase ? `${this.variantBase} ` : '') +
-                (this.variant !== 'default' ? this.variant : this.variantDefault)
+                (this.variant && this.variant !== 'default' ? this.variant : this.variantDefault)
             );
         },
     },

package/package.json

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

package/utils/bem.js

@@ -32,7 +32,8 @@ function hyphenate(str, shouldHyphenate = true) {
 // Get block name
 function getBlockName(component) {
     if (!component.$options._blockName) {
-        let block = component.$options.name || component.$options._componentTag;
+        let block = 'bemBlockName' in component && component.bemBlockName();
+        block = block || component.$options.name || component.$options._componentTag;
         if (block && block.indexOf('/') > -1) {
             block = block.split('/').pop().split('.')[0];
         }