@thinkpixellab-public/px-vue 3.0.12 → 3.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/PxAutoClamp.vue +12 -6
- package/components/PxContain.vue +27 -6
- package/package.json +2 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Automatically computes line clamp based on the available height and current line height.
|
|
3
3
|
-->
|
|
4
4
|
<template>
|
|
5
|
-
<
|
|
5
|
+
<component :is="tag" :class="bem()" :style="{}">
|
|
6
6
|
<span
|
|
7
7
|
:class="bem('clamp')"
|
|
8
8
|
:style="{
|
|
@@ -11,9 +11,11 @@
|
|
|
11
11
|
height: cssPx(maxHeight),
|
|
12
12
|
}"
|
|
13
13
|
>
|
|
14
|
-
|
|
14
|
+
<slot>
|
|
15
|
+
{{ text }}
|
|
16
|
+
</slot>
|
|
15
17
|
</span>
|
|
16
|
-
</
|
|
18
|
+
</component>
|
|
17
19
|
</template>
|
|
18
20
|
|
|
19
21
|
<script>
|
|
@@ -24,6 +26,7 @@ export default {
|
|
|
24
26
|
mixins: [PxBaseResize],
|
|
25
27
|
props: {
|
|
26
28
|
text: { type: String, default: null },
|
|
29
|
+
tag: { type: String, default: 'div' },
|
|
27
30
|
},
|
|
28
31
|
data() {
|
|
29
32
|
return {
|
|
@@ -38,8 +41,12 @@ export default {
|
|
|
38
41
|
return;
|
|
39
42
|
}
|
|
40
43
|
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
let availableHeight = this.$el.clientHeight;
|
|
45
|
+
let lineHeight = parseFloat(window.getComputedStyle(this.$el).lineHeight);
|
|
46
|
+
|
|
47
|
+
if (isNaN(lineHeight)) {
|
|
48
|
+
lineHeight = parseFloat(window.getComputedStyle(this.$el).fontSize) * 1.33;
|
|
49
|
+
}
|
|
43
50
|
|
|
44
51
|
this.lineCount = Math.floor(availableHeight / lineHeight);
|
|
45
52
|
this.height = this.lineCount * this.lineHeight;
|
|
@@ -65,7 +72,6 @@ export default {
|
|
|
65
72
|
display: block;
|
|
66
73
|
display: -webkit-box;
|
|
67
74
|
overflow: hidden;
|
|
68
|
-
|
|
69
75
|
max-height: 100%;
|
|
70
76
|
height: auto;
|
|
71
77
|
overflow: hidden;
|
package/components/PxContain.vue
CHANGED
|
@@ -32,6 +32,8 @@ export default {
|
|
|
32
32
|
mixins: [PxBaseResize],
|
|
33
33
|
|
|
34
34
|
props: {
|
|
35
|
+
enabled: { type: Boolean, default: true },
|
|
36
|
+
|
|
35
37
|
// an optional aspect ratio that should be maintained when calculating size and position, if
|
|
36
38
|
// not provided then width and height will always cover the full outer container (can be a
|
|
37
39
|
// number or ratio string like '16:9')
|
|
@@ -75,13 +77,14 @@ export default {
|
|
|
75
77
|
container: null,
|
|
76
78
|
|
|
77
79
|
contain: {
|
|
80
|
+
enabled: this.enabled,
|
|
78
81
|
current: false,
|
|
79
|
-
width:
|
|
80
|
-
height:
|
|
81
|
-
top:
|
|
82
|
-
right:
|
|
83
|
-
bottom:
|
|
84
|
-
left:
|
|
82
|
+
width: null,
|
|
83
|
+
height: null,
|
|
84
|
+
top: null,
|
|
85
|
+
right: null,
|
|
86
|
+
bottom: null,
|
|
87
|
+
left: null,
|
|
85
88
|
scale: 1,
|
|
86
89
|
},
|
|
87
90
|
};
|
|
@@ -136,6 +139,9 @@ export default {
|
|
|
136
139
|
},
|
|
137
140
|
|
|
138
141
|
watch: {
|
|
142
|
+
enabled() {
|
|
143
|
+
this.resize();
|
|
144
|
+
},
|
|
139
145
|
aspectNumber() {
|
|
140
146
|
this.resize();
|
|
141
147
|
},
|
|
@@ -150,6 +156,20 @@ export default {
|
|
|
150
156
|
this.resize();
|
|
151
157
|
},
|
|
152
158
|
resize() {
|
|
159
|
+
if (!this.enabled) {
|
|
160
|
+
this.contain = {
|
|
161
|
+
enabled: false,
|
|
162
|
+
current: true,
|
|
163
|
+
width: null,
|
|
164
|
+
height: null,
|
|
165
|
+
top: null,
|
|
166
|
+
right: null,
|
|
167
|
+
bottom: null,
|
|
168
|
+
left: null,
|
|
169
|
+
scale: 1,
|
|
170
|
+
};
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
153
173
|
let p = this.toBoxModelObject(this.padding);
|
|
154
174
|
let b = this.toBoxModelObject(this.border);
|
|
155
175
|
|
|
@@ -195,6 +215,7 @@ export default {
|
|
|
195
215
|
|
|
196
216
|
let c = {
|
|
197
217
|
current: true,
|
|
218
|
+
enabled: true,
|
|
198
219
|
width: r.width + b.w,
|
|
199
220
|
height: r.height + b.h,
|
|
200
221
|
top: r.y + p.top,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thinkpixellab-public/px-vue",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.13",
|
|
4
4
|
"description": "General purpose Vue components and helpers that can be used across projects.",
|
|
5
5
|
"author": "Pixel Lab",
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@floating-ui/dom": "^1.0.1",
|
|
16
16
|
"@popperjs/core": "^2.11.5",
|
|
17
|
-
"@thinkpixellab-public/px-styles": "^3.7.
|
|
17
|
+
"@thinkpixellab-public/px-styles": "^3.7.3",
|
|
18
18
|
"@thinkpixellab-public/px-vue-tester": "^2.0.0",
|
|
19
19
|
"@thinkpixellab-public/vue-resize-directive": "^1.2.2",
|
|
20
20
|
"body-scroll-lock": "^3.1.5",
|