@thinkpixellab-public/px-vue 3.0.11 → 3.0.13

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/PxContain.vue

@@ -32,6 +32,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 +77,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 +139,9 @@ export default {
     },
 
     watch: {
+        enabled() {
+            this.resize();
+        },
         aspectNumber() {
             this.resize();
         },
@@ -150,6 +156,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 +215,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

@@ -549,11 +549,20 @@ $d: 0.4s;
     // styles
 
     &--none {
-        // reset
+        // reset (do nothing)
     }
 
-    &--dialog &,
     &--default & {
+        // default does natural center spacing and that's it
+        &__popup {
+            top: 40%;
+            left: 50%;
+            transform: translate(-50%, -40%);
+        }
+    }
+
+    &--dialog & {
+        // dialog adds basic popup styling
         &__popup {
             @include css-map(
                 popup(
@@ -565,14 +574,6 @@ $d: 0.4s;
         }
     }
 
-    &--dialog & {
-        &__popup {
-            top: 40%;
-            left: 50%;
-            transform: translate(-50%, -40%);
-        }
-    }
-
     // sizes
 
     &--sm & {
@@ -625,7 +626,7 @@ $d: 0.4s;
 // default 'fade' transition
 // ----------------------------------------------------------------------------
 
-@include vue-transition-fade(px-float-fade, $dur: $d);
+@include vue-transition-fade(px-float-fade, $dur: $d, $leave-pointer-events: none);
 
 // ----------------------------------------------------------------------------
 // blur variant transition (uses filter for opacity and animates backdrop-filter)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.11",
+    "version": "3.0.13",
     "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.1",
+        "@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

@@ -45,5 +45,15 @@ export default {
         Vue.prototype.hasSlot = function (slotName) {
             return this.$slots && slotName in this.$slots;
         };
+
+        /*
+        Get a unique id derived from vue's unique component identifier (this._uid) for use when an
+        id is required for an inputs, labels, etc.
+            uniqueId('label') => 'label-0003'
+        */
+        Vue.prototype.uniqueId = function (prefix = null) {
+            let id = ('000000' + Number(this._uid).toString(16).toLowerCase()).slice(-4);
+            return prefix ? prefix + '-' + id : id;
+        };
     },
 };