@bimdata/bcf-components 6.4.4 → 6.4.5
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bimdata/bcf-components",
|
|
3
|
-
"version": "6.4.
|
|
3
|
+
"version": "6.4.5",
|
|
4
4
|
"files": [
|
|
5
5
|
"src",
|
|
6
6
|
"vue3-plugin.js"
|
|
@@ -16,16 +16,17 @@
|
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"@bimdata/design-system": "*",
|
|
18
18
|
"@bimdata/components": "*",
|
|
19
|
-
"vue": "^3.0"
|
|
19
|
+
"vue": "^3.0",
|
|
20
|
+
"vue-i18n": "*"
|
|
20
21
|
},
|
|
21
22
|
"devDependencies": {
|
|
22
23
|
"@semantic-release/changelog": "^6.0.3",
|
|
23
24
|
"@semantic-release/commit-analyzer": "^13.0.0",
|
|
24
25
|
"@semantic-release/git": "^10.0.1",
|
|
25
|
-
"@semantic-release/github": "^11.0.
|
|
26
|
+
"@semantic-release/github": "^11.0.1",
|
|
26
27
|
"@semantic-release/npm": "^12.0.1",
|
|
27
28
|
"@semantic-release/release-notes-generator": "^14.0.1",
|
|
28
29
|
"conventional-changelog-eslint": "^6.0.0",
|
|
29
|
-
"semantic-release": "^24.
|
|
30
|
+
"semantic-release": "^24.2.0"
|
|
30
31
|
}
|
|
31
32
|
}
|
|
@@ -1,7 +1,16 @@
|
|
|
1
|
+
.bcf-topic-card,
|
|
2
|
+
.bcf-topic-card-placeholder {
|
|
3
|
+
--card-width: 336px;
|
|
4
|
+
--card-height: 308px;
|
|
5
|
+
--card-header-height: 32px;
|
|
6
|
+
--card-image-height: 171px;
|
|
7
|
+
--card-content-height: 105px;
|
|
8
|
+
}
|
|
9
|
+
|
|
1
10
|
.bcf-topic-card {
|
|
2
11
|
position: relative;
|
|
3
|
-
width:
|
|
4
|
-
height:
|
|
12
|
+
width: var(--card-width);
|
|
13
|
+
height: var(--card-height);
|
|
5
14
|
box-shadow: var(--box-shadow);
|
|
6
15
|
|
|
7
16
|
&.selected{
|
|
@@ -9,7 +18,7 @@
|
|
|
9
18
|
}
|
|
10
19
|
|
|
11
20
|
&__header {
|
|
12
|
-
height:
|
|
21
|
+
height: var(--card-header-height);
|
|
13
22
|
padding-right: var(--spacing-unit);
|
|
14
23
|
background-color: var(--color-white);
|
|
15
24
|
display: flex;
|
|
@@ -48,7 +57,7 @@
|
|
|
48
57
|
}
|
|
49
58
|
|
|
50
59
|
&__image {
|
|
51
|
-
height:
|
|
60
|
+
height: var(--card-image-height);
|
|
52
61
|
position: relative;
|
|
53
62
|
display: flex;
|
|
54
63
|
justify-content: center;
|
|
@@ -86,7 +95,7 @@
|
|
|
86
95
|
}
|
|
87
96
|
|
|
88
97
|
&__content {
|
|
89
|
-
height:
|
|
98
|
+
height: var(--card-content-height);
|
|
90
99
|
padding: var(--spacing-unit);
|
|
91
100
|
border-top: 3px solid var(--color-silver-light);
|
|
92
101
|
font-size: 12px;
|
|
@@ -94,3 +103,10 @@
|
|
|
94
103
|
color: var(--color-text);
|
|
95
104
|
}
|
|
96
105
|
}
|
|
106
|
+
|
|
107
|
+
.bcf-topic-card-placeholder {
|
|
108
|
+
width: var(--card-width);
|
|
109
|
+
height: var(--card-height);
|
|
110
|
+
box-shadow: var(--box-shadow);
|
|
111
|
+
background-color: var(--color-silver-light);
|
|
112
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
+
v-if="visible"
|
|
3
4
|
class="bcf-topic-card"
|
|
4
5
|
:class="{ selected }"
|
|
5
6
|
@mouseover="hover = true"
|
|
@@ -78,11 +79,13 @@
|
|
|
78
79
|
</div>
|
|
79
80
|
</div>
|
|
80
81
|
</div>
|
|
82
|
+
|
|
83
|
+
<div v-else ref="placeholder" class="bcf-topic-card-placeholder"></div>
|
|
81
84
|
</template>
|
|
82
85
|
|
|
83
86
|
<script>
|
|
84
87
|
import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
|
|
85
|
-
import { computed, ref } from "vue";
|
|
88
|
+
import { computed, onMounted, ref } from "vue";
|
|
86
89
|
import { getPriorityColor, getStatusColor } from "../../utils/topic.js";
|
|
87
90
|
// Components
|
|
88
91
|
import BcfTopicDefaultImage from "./BcfTopicDefaultImage.vue";
|
|
@@ -111,6 +114,8 @@ export default {
|
|
|
111
114
|
},
|
|
112
115
|
emits: ["open-topic", "update:selected"],
|
|
113
116
|
setup(props) {
|
|
117
|
+
const visible = ref(false);
|
|
118
|
+
const placeholder = ref(null);
|
|
114
119
|
const hover = ref(false);
|
|
115
120
|
|
|
116
121
|
const priorityColor = computed(() => getPriorityColor(props.topic, props.detailedExtensions));
|
|
@@ -123,13 +128,30 @@ export default {
|
|
|
123
128
|
|
|
124
129
|
const topicObjects = computed(() => props.topic.viewpoints?.[0]?.components?.selection ?? []);
|
|
125
130
|
|
|
131
|
+
onMounted(() => {
|
|
132
|
+
const observer = new IntersectionObserver(
|
|
133
|
+
([{ isIntersecting }]) => {
|
|
134
|
+
if (!isIntersecting) return;
|
|
135
|
+
visible.value = true;
|
|
136
|
+
observer.disconnect();
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
rootMargin: `${placeholder.value.clientHeight}px`
|
|
140
|
+
}
|
|
141
|
+
);
|
|
142
|
+
|
|
143
|
+
observer.observe(placeholder.value);
|
|
144
|
+
});
|
|
145
|
+
|
|
126
146
|
return {
|
|
127
147
|
// References
|
|
128
148
|
hover,
|
|
149
|
+
placeholder,
|
|
129
150
|
priorityColor,
|
|
130
151
|
statusColor,
|
|
131
152
|
topicImage,
|
|
132
153
|
topicObjects,
|
|
154
|
+
visible,
|
|
133
155
|
// Methods
|
|
134
156
|
adjustTextColor,
|
|
135
157
|
};
|