@thinkpixellab-public/px-vue 3.0.12 → 3.0.14

package/components/PxAutoClamp.vue

@@ -2,7 +2,7 @@
     Automatically computes line clamp based on the available height and current line height.
 -->
 <template>
-    <div :class="bem()" :style="{}">
+    <component :is="tag" :class="bem()" :style="{}">
         <span
             :class="bem('clamp')"
             :style="{
@@ -11,9 +11,11 @@
                 height: cssPx(maxHeight),
             }"
         >
-            {{ text }}
+            <slot>
+                {{ text }}
+            </slot>
         </span>
-    </div>
+    </component>
 </template>
 
 <script>
@@ -24,6 +26,7 @@ export default {
     mixins: [PxBaseResize],
     props: {
         text: { type: String, default: null },
+        tag: { type: String, default: 'div' },
     },
     data() {
         return {
@@ -38,8 +41,12 @@ export default {
                 return;
             }
 
-            const availableHeight = this.$el.clientHeight;
-            const lineHeight = parseFloat(window.getComputedStyle(this.$el).lineHeight);
+            let availableHeight = this.$el.clientHeight;
+            let lineHeight = parseFloat(window.getComputedStyle(this.$el).lineHeight);
+
+            if (isNaN(lineHeight)) {
+                lineHeight = parseFloat(window.getComputedStyle(this.$el).fontSize) * 1.33;
+            }
 
             this.lineCount = Math.floor(availableHeight / lineHeight);
             this.height = this.lineCount * this.lineHeight;
@@ -65,7 +72,6 @@ export default {
         display: block;
         display: -webkit-box;
         overflow: hidden;
-
         max-height: 100%;
         height: auto;
         overflow: hidden;

package/components/PxBaseResize.vue

@@ -29,22 +29,22 @@ export default {
                   }, this.resizeDebounceValue)
                 : null;
 
-        const resizeFn = entries => {
+        const resizeFn = () => {
             // debounced version
             if (resizeDebouncedFn) {
                 if (!this.resizing) {
                     this.resizing = true;
                     if (this.resizeStarted) {
-                        this.resizeStarted(entries[0]);
+                        this.resizeStarted();
                     }
                 }
-                resizeDebouncedFn(entries[0]);
+                resizeDebouncedFn();
             }
 
             // regular version
             else {
                 if (this.resize) {
-                    this.resize(entries[0]);
+                    this.resize();
                 }
             }
         };

package/components/PxContain.vue

@@ -18,6 +18,7 @@
             :width="contain.width"
             :height="contain.height"
             :scale="contain.scale"
+            :enabled="contain.enabled"
         ></slot>
     </div>
 </template>
@@ -32,6 +33,8 @@ export default {
     mixins: [PxBaseResize],
 
     props: {
+        enabled: { type: Boolean, default: true },
+
         // an optional aspect ratio that should be maintained when calculating size and position, if
         // not provided then width and height will always cover the full outer container (can be a
         // number or ratio string like '16:9')
@@ -75,13 +78,14 @@ export default {
             container: null,
 
             contain: {
+                enabled: this.enabled,
                 current: false,
-                width: 0,
-                height: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0,
+                width: null,
+                height: null,
+                top: null,
+                right: null,
+                bottom: null,
+                left: null,
                 scale: 1,
             },
         };
@@ -136,6 +140,9 @@ export default {
     },
 
     watch: {
+        enabled() {
+            this.resize();
+        },
         aspectNumber() {
             this.resize();
         },
@@ -150,6 +157,20 @@ export default {
             this.resize();
         },
         resize() {
+            if (!this.enabled) {
+                this.contain = {
+                    enabled: false,
+                    current: true,
+                    width: null,
+                    height: null,
+                    top: null,
+                    right: null,
+                    bottom: null,
+                    left: null,
+                    scale: 1,
+                };
+                return;
+            }
             let p = this.toBoxModelObject(this.padding);
             let b = this.toBoxModelObject(this.border);
 
@@ -195,6 +216,7 @@ export default {
 
             let c = {
                 current: true,
+                enabled: true,
                 width: r.width + b.w,
                 height: r.height + b.h,
                 top: r.y + p.top,

package/components/PxFloat.vue

@@ -487,12 +487,14 @@ export default {
             if (typeof reference == 'string') {
                 // previous sibling
                 if (reference == 'previous') {
-                    reference = this.$el.previousSibling;
+                    reference = this.$el.previousElementSibling;
+                    console.log(reference);
                 }
 
                 // next sibling
                 else if (reference == 'next') {
-                    reference = this.$el.nextSibling;
+                    reference = this.$el.nextElementSibling;
+                    console.log(reference);
                 }
 
                 // selector
@@ -574,6 +576,20 @@ $d: 0.4s;
         }
     }
 
+    &--menu & {
+        &__popup {
+            display: flex;
+            flex-direction: column;
+            @include css-map(
+                popup(
+                    (
+                        padding: 0,
+                    )
+                )
+            );
+        }
+    }
+
     // sizes
 
     &--sm & {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.12",
+    "version": "3.0.14",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -14,7 +14,7 @@
     "dependencies": {
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "^2.11.5",
-        "@thinkpixellab-public/px-styles": "^3.7.2",
+        "@thinkpixellab-public/px-styles": "^3.7.3",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^3.1.5",

package/plugins/common.js

@@ -23,6 +23,9 @@ export default {
         Vue.prototype.cssUrl = cssUrl;
 
         // filters
+        // note: filters can be called as methods with something like
+        // this.$options.filters.slug('Make me a slug.');
+
         Vue.filter('aspect', aspect);
         Vue.filter('kebab', kebab);
         Vue.filter('slug', slug);