@bimdata/bcf-components 6.4.5 → 6.4.6
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
|
@@ -109,4 +109,12 @@
|
|
|
109
109
|
height: var(--card-height);
|
|
110
110
|
box-shadow: var(--box-shadow);
|
|
111
111
|
background-color: var(--color-silver-light);
|
|
112
|
+
|
|
113
|
+
display: flex;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
align-items: center;
|
|
116
|
+
|
|
117
|
+
.bimdata-spinner {
|
|
118
|
+
transform: scale(2);
|
|
119
|
+
}
|
|
112
120
|
}
|
|
@@ -80,12 +80,15 @@
|
|
|
80
80
|
</div>
|
|
81
81
|
</div>
|
|
82
82
|
|
|
83
|
-
<div v-else ref="placeholder" class="bcf-topic-card-placeholder"
|
|
83
|
+
<div v-else ref="placeholder" class="bcf-topic-card-placeholder">
|
|
84
|
+
<BIMDataSpinner v-if="loading" />
|
|
85
|
+
</div>
|
|
84
86
|
</template>
|
|
85
87
|
|
|
86
88
|
<script>
|
|
87
89
|
import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
|
|
88
|
-
import { computed, onMounted, ref } from "vue";
|
|
90
|
+
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
|
|
91
|
+
import service from "../../service.js";
|
|
89
92
|
import { getPriorityColor, getStatusColor } from "../../utils/topic.js";
|
|
90
93
|
// Components
|
|
91
94
|
import BcfTopicDefaultImage from "./BcfTopicDefaultImage.vue";
|
|
@@ -95,6 +98,10 @@ export default {
|
|
|
95
98
|
BcfTopicDefaultImage,
|
|
96
99
|
},
|
|
97
100
|
props: {
|
|
101
|
+
project: {
|
|
102
|
+
type: Object,
|
|
103
|
+
required: true,
|
|
104
|
+
},
|
|
98
105
|
detailedExtensions: {
|
|
99
106
|
type: Object,
|
|
100
107
|
required: true,
|
|
@@ -115,6 +122,7 @@ export default {
|
|
|
115
122
|
emits: ["open-topic", "update:selected"],
|
|
116
123
|
setup(props) {
|
|
117
124
|
const visible = ref(false);
|
|
125
|
+
const loading = ref(false);
|
|
118
126
|
const placeholder = ref(null);
|
|
119
127
|
const hover = ref(false);
|
|
120
128
|
|
|
@@ -128,11 +136,24 @@ export default {
|
|
|
128
136
|
|
|
129
137
|
const topicObjects = computed(() => props.topic.viewpoints?.[0]?.components?.selection ?? []);
|
|
130
138
|
|
|
139
|
+
let unwatchTopic;
|
|
140
|
+
|
|
131
141
|
onMounted(() => {
|
|
132
142
|
const observer = new IntersectionObserver(
|
|
133
143
|
([{ isIntersecting }]) => {
|
|
134
144
|
if (!isIntersecting) return;
|
|
135
|
-
|
|
145
|
+
|
|
146
|
+
unwatchTopic = watch(
|
|
147
|
+
() => props.topic,
|
|
148
|
+
async topic => {
|
|
149
|
+
loading.value = true;
|
|
150
|
+
topic.viewpoints = await service.fetchTopicViewpoints(props.project, topic);
|
|
151
|
+
loading.value = false;
|
|
152
|
+
visible.value = true;
|
|
153
|
+
},
|
|
154
|
+
{ immediate: true }
|
|
155
|
+
);
|
|
156
|
+
|
|
136
157
|
observer.disconnect();
|
|
137
158
|
},
|
|
138
159
|
{
|
|
@@ -143,9 +164,14 @@ export default {
|
|
|
143
164
|
observer.observe(placeholder.value);
|
|
144
165
|
});
|
|
145
166
|
|
|
167
|
+
onUnmounted(() => {
|
|
168
|
+
unwatchTopic?.();
|
|
169
|
+
});
|
|
170
|
+
|
|
146
171
|
return {
|
|
147
172
|
// References
|
|
148
173
|
hover,
|
|
174
|
+
loading,
|
|
149
175
|
placeholder,
|
|
150
176
|
priorityColor,
|
|
151
177
|
statusColor,
|