@bimdata/bcf-components 6.4.4 → 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.
Files changed (3) hide show
  1. package/package.json +5 -4
  2. package/src/components/bcf-topic-card/BcfTopicCard.scss +29 -5
  3. package/src/components/bcf-topic-card/BcfTopicCard.vue +49 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bimdata/bcf-components",
3
- "version": "6.4.4",
3
+ "version": "6.4.6",
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.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.1.3"
30
+ "semantic-release": "^24.2.0"
30
31
  }
31
32
  }
package/src/components/bcf-topic-card/BcfTopicCard.scss CHANGED
@@ -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: 336px;
4
- height: 308px;
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: 32px;
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: 171px;
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: 105px;
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,18 @@
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
+
113
+ display: flex;
114
+ justify-content: center;
115
+ align-items: center;
116
+
117
+ .bimdata-spinner {
118
+ transform: scale(2);
119
+ }
120
+ }
package/src/components/bcf-topic-card/BcfTopicCard.vue CHANGED
@@ -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,16 @@
78
79
  </div>
79
80
  </div>
80
81
  </div>
82
+
83
+ <div v-else ref="placeholder" class="bcf-topic-card-placeholder">
84
+ <BIMDataSpinner v-if="loading" />
85
+ </div>
81
86
  </template>
82
87
 
83
88
  <script>
84
89
  import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
85
- import { computed, ref } from "vue";
90
+ import { computed, onMounted, onUnmounted, ref, watch } from "vue";
91
+ import service from "../../service.js";
86
92
  import { getPriorityColor, getStatusColor } from "../../utils/topic.js";
87
93
  // Components
88
94
  import BcfTopicDefaultImage from "./BcfTopicDefaultImage.vue";
@@ -92,6 +98,10 @@ export default {
92
98
  BcfTopicDefaultImage,
93
99
  },
94
100
  props: {
101
+ project: {
102
+ type: Object,
103
+ required: true,
104
+ },
95
105
  detailedExtensions: {
96
106
  type: Object,
97
107
  required: true,
@@ -111,6 +121,9 @@ export default {
111
121
  },
112
122
  emits: ["open-topic", "update:selected"],
113
123
  setup(props) {
124
+ const visible = ref(false);
125
+ const loading = ref(false);
126
+ const placeholder = ref(null);
114
127
  const hover = ref(false);
115
128
 
116
129
  const priorityColor = computed(() => getPriorityColor(props.topic, props.detailedExtensions));
@@ -123,13 +136,48 @@ export default {
123
136
 
124
137
  const topicObjects = computed(() => props.topic.viewpoints?.[0]?.components?.selection ?? []);
125
138
 
139
+ let unwatchTopic;
140
+
141
+ onMounted(() => {
142
+ const observer = new IntersectionObserver(
143
+ ([{ isIntersecting }]) => {
144
+ if (!isIntersecting) return;
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
+
157
+ observer.disconnect();
158
+ },
159
+ {
160
+ rootMargin: `${placeholder.value.clientHeight}px`
161
+ }
162
+ );
163
+
164
+ observer.observe(placeholder.value);
165
+ });
166
+
167
+ onUnmounted(() => {
168
+ unwatchTopic?.();
169
+ });
170
+
126
171
  return {
127
172
  // References
128
173
  hover,
174
+ loading,
175
+ placeholder,
129
176
  priorityColor,
130
177
  statusColor,
131
178
  topicImage,
132
179
  topicObjects,
180
+ visible,
133
181
  // Methods
134
182
  adjustTextColor,
135
183
  };