@bimdata/bcf-components 6.0.1 → 6.0.2-rc.2

package/README.md

@@ -24,8 +24,11 @@ and make all components available globally.
 import { createApp } from "vue";
 import { createI18n } from "vue-i18n"; // v9.x
 import { makeBIMDataApiClient } from "@bimdata/typescript-fetch-api-client"; // v8.2+
+import DesignSystem from "@bimdata/design-system/vue3-plugin.js"; // v2+
+import BIMDataComponents from "@bimdata/components/vue3-plugin.js"; // v1+
+
 // Import Vue 3 plugin factory
-import BIMDataBcfComponents from "@bimdata/bcf-components/vue3-plugin.js";
+import BcfComponents from "@bimdata/bcf-components/vue3-plugin.js";
 
 // Instanciate i18n plugin
 const i18nPlugin = createI18n({ ... });
@@ -34,8 +37,10 @@ const apiClient = makeBIMDataApiClient({ ... });
 
 const app = createApp()
   .use(i18nPlugin)
+  .use(DesignSystem())
+  .use(BIMDataComponents())
   // Provide both i18n plugin and API client as plugin config
-  .use(BIMDataBcfComponents({ i18nPlugin, apiClient }));
+  .use(BcfComponents({ i18nPlugin, apiClient }));
 ...
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimdata/bcf-components",
-  "version": "6.0.1",
+  "version": "6.0.2-rc.2",
   "files": [
     "src",
     "vue3-plugin.js"

package/src/components/bcf-filters/BcfFilters.vue

@@ -113,16 +113,6 @@
 <script>
 import { computed, ref, toRaw, watch } from "vue";
 import { useBcfFilter } from "../../composables/filter.js";
-// Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import {
-  BIMDataIconClose,
-  BIMDataIconFilterList,
-  BIMDataIconSearch,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
-import BIMDataInput from "@bimdata/design-system/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
-import BIMDataSelect from "@bimdata/design-system/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue";
-import BIMDataText from "@bimdata/design-system/src/BIMDataComponents/BIMDataText/BIMDataText.vue";
 
 function getSelectOptions(list) {
   return Array.from(new Set(list)).sort((a, b) =>
@@ -131,15 +121,6 @@ function getSelectOptions(list) {
 }
 
 export default {
-  components: {
-    BIMDataButton,
-    BIMDataIconClose,
-    BIMDataIconFilterList,
-    BIMDataIconSearch,
-    BIMDataInput,
-    BIMDataSelect,
-    BIMDataText
-  },
   props: {
     topics: {
       type: Array,

package/src/components/bcf-settings/BcfSettings.vue

@@ -44,21 +44,12 @@
 
 <script>
 import { EXTENSION_TYPES } from "../../config.js";
-import { useService } from "../../service.js";
+import service from "../../service.js";
 // Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-
-import {
-  BIMDataIconArrow,
-  BIMDataIconClose,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
 import SettingCard from "./setting-card/SettingCard.vue";
 
 export default {
   components: {
-    BIMDataButton,
-    BIMDataIconArrow,
-    BIMDataIconClose,
     SettingCard,
   },
   props: {
@@ -81,12 +72,12 @@ export default {
   emits: ["back", "close", "extension-created", "extension-updated", "extension-deleted"],
   setup(props, { emit }) {
     const createExtension = async (event) => {
-      const ext = await useService().createExtension(props.project, event.extensionType, event.data);
+      const ext = await service.createExtension(props.project, event.extensionType, event.data);
       emit("extension-created", ext);
     };
 
     const updateExtension = async (event) => {
-      const ext = await useService().updateExtension(
+      const ext = await service.updateExtension(
         props.project,
         event.extensionType,
         event.extension,
@@ -96,7 +87,7 @@ export default {
     };
 
     const deleteExtension = async (event) => {
-      await useService().deleteExtension(props.project, event.extensionType, event.extension);
+      await service.deleteExtension(props.project, event.extensionType, event.extension);
       emit("extension-deleted", event.extension);
     };
 

package/src/components/bcf-settings/setting-card/SettingCard.vue

@@ -60,20 +60,10 @@
 import { computed, ref } from "vue";
 import { getAvailableExtensions } from "../../../utils/extensions.js";
 // Compopnents
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import {
-  BIMDataIconChevron,
-  BIMDataIconPlus,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
-import BIMDataInput from "@bimdata/design-system/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
 import SettingCardItem from "./SettingCardItem.vue";
 
 export default {
   components: {
-    BIMDataButton,
-    BIMDataIconChevron,
-    BIMDataIconPlus,
-    BIMDataInput,
     SettingCardItem,
   },
   props: {

package/src/components/bcf-settings/setting-card/SettingCardItem.vue

@@ -62,23 +62,8 @@ import { adjustBorderColor } from "@bimdata/design-system/src/BIMDataComponents/
 import { ref, watch } from "vue";
 import { EXTENSION_WITH_COLOR } from "../../../config.js";
 import { getExtensionField } from "../../../utils/extensions.js";
-// Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import BIMDataColorSelector from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/BIMDataColorSelector.vue";
-import {
-  BIMDataIconDelete,
-  BIMDataIconClose,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
-import BIMDataInput from "@bimdata/design-system/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
 
 export default {
-  components: {
-    BIMDataButton,
-    BIMDataColorSelector,
-    BIMDataIconDelete,
-    BIMDataIconClose,
-    BIMDataInput,
-  },
   props: {
     extensionType: {
       type: String,

package/src/components/bcf-statistics/BcfStatistics.vue

@@ -53,15 +53,8 @@
 import { computed } from "vue";
 import { DEFAULT_PRIORITY_COLOR } from "../../config.js";
 import { getAvailableExtensions, getExtensionField } from "../../utils/extensions.js";
-// Components
-import BIMDataPaginatedList from "@bimdata/design-system/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue";
-import BIMDataSimplePieChart from "@bimdata/design-system/src/BIMDataComponents/BIMDataSimplePieChart/BIMDataSimplePieChart.vue";
 
 export default {
-  components: {
-    BIMDataPaginatedList,
-    BIMDataSimplePieChart,
-  },
   props: {
     detailedExtensions: {
       type: Object,

package/src/components/bcf-topic-card/BcfTopicCard.vue

@@ -85,21 +85,11 @@ import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BI
 import { computed, ref } from "vue";
 import { getPriorityColor, getStatusColor } from "../../utils/topic.js";
 // Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import {
-  BIMDataIconInformation,
-  BIMDataIconModel3D,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
-import BIMDataTextbox from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
 import BcfTopicDefaultImage from "./BcfTopicDefaultImage.vue";
 
 export default {
   components: {
     BcfTopicDefaultImage,
-    BIMDataButton,
-    BIMDataIconInformation,
-    BIMDataIconModel3D,
-    BIMDataTextbox,
   },
   props: {
     detailedExtensions: {

package/src/components/bcf-topic-creation-card/BcfTopicCreationCard.vue

@@ -20,15 +20,11 @@
 
 <script>
 // Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import BIMDataIconPlus from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconPlus.vue";
 import BcfTopicCreationCardImage from "./BcfTopicCreationCardImage.vue";
 
 export default {
   components: {
     BcfTopicCreationCardImage,
-    BIMDataButton,
-    BIMDataIconPlus,
   },
   emits: ["create-topic"],
 };

package/src/components/bcf-topic-form/BcfTopicForm.vue

@@ -197,24 +197,10 @@
 
 <script>
 import { computed, ref, watch } from "vue";
-import { useService } from "../../service.js";
+import service from "../../service.js";
 import { getViewerList } from "../../utils/viewer.js";
 import { setViewpointDefaults } from "../../utils/viewpoints.js";
 // Components
-import BIMDataSafeZoneModal from "@bimdata/components/src/BIMDataSafeZoneModal/BIMDataSafeZoneModal.vue";
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import BIMDataDatePicker from "@bimdata/design-system/src/BIMDataComponents/BIMDataDatePicker/BIMDataDatePicker.vue";
-import {
-  BIMDataIconArrow,
-  BIMDataIconClose,
-  BIMDataIconPlus,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
-import BIMDataInput from "@bimdata/design-system/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
-import BIMDataLoading from "@bimdata/design-system/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue";
-import BIMDataSelect from "@bimdata/design-system/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue";
-import BIMDataTextarea from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue";
-import BIMDataTextbox from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
-import BIMDataTooltip from "@bimdata/design-system/src/BIMDataComponents/BIMDataTooltip/BIMDataTooltip.vue";
 import BcfTopicImages from "./bcf-topic-images/BcfTopicImages.vue";
 import BcfTopicSnapshots from "./bcf-topic-snapshots/BcfTopicSnapshots.vue";
 import BcfTopicSnapshotsActions from "./bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue";
@@ -224,18 +210,6 @@ export default {
     BcfTopicImages,
     BcfTopicSnapshots,
     BcfTopicSnapshotsActions,
-    BIMDataButton,
-    BIMDataDatePicker,
-    BIMDataIconArrow,
-    BIMDataIconClose,
-    BIMDataIconPlus,
-    BIMDataInput,
-    BIMDataLoading,
-    BIMDataSafeZoneModal,
-    BIMDataSelect,
-    BIMDataTextarea,
-    BIMDataTextbox,
-    BIMDataTooltip,
   },
   props: {
     uiConfig: {
@@ -417,8 +391,6 @@ export default {
     };
 
     const submit = async () => {
-      const service = useService();
-
       if (!topicTitle.value) {
         hasErrorTitle.value = true;
         return;

package/src/components/bcf-topic-form/bcf-topic-images/BcfTopicImages.vue

@@ -67,21 +67,8 @@
 
 <script>
 import { isTabletOrMobile } from "../../../utils/browser.js";
-// Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import {
-  BIMDataIconDelete,
-  BIMDataIconCamera,
-  BIMDataIconUnarchive,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
 
 export default {
-  components: {
-    BIMDataButton,
-    BIMDataIconDelete,
-    BIMDataIconCamera,
-    BIMDataIconUnarchive,
-  },
   props: {
     viewpoints: {
       type: Array,

package/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue

@@ -44,19 +44,10 @@
 
 <script>
 import BcfTopicSnapshotsActions from "../bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue";
-// Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import {
-  BIMDataIconDelete,
-  BIMDataIconCamera,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
 
 export default {
   components: {
     BcfTopicSnapshotsActions,
-    BIMDataButton,
-    BIMDataIconDelete,
-    BIMDataIconCamera,
   },
   props: {
     viewpoints: {

package/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue

@@ -53,7 +53,6 @@ export default {
   },
   emits: ["create-viewpoint", "upload-viewpoint"],
   setup(props) {
-
     // Computed filtering viewpoints on isUpload = false
     const snapshotedViewpoints = computed(() =>
       props.viewpoints.filter((viewpoint) => !viewpoint.isUpload)

package/src/components/bcf-topic-overview/BcfTopicOverview.vue

@@ -232,14 +232,9 @@
 <script>
 import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
 import { computed, onMounted, ref } from "vue";
-import { useService } from "../../service.js";
+import service from "../../service.js";
 import { getPriorityColor } from "../../utils/topic.js";
 // Components
-import BIMDataSafeZoneModal from "@bimdata/components/src/BIMDataSafeZoneModal/BIMDataSafeZoneModal.vue";
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import {BIMDataIconArrow,BIMDataIconEdit, BIMDataIconDelete, BIMDataIconClose, BIMDataIconModel3D } from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
-import BIMDataLoading from "@bimdata/design-system/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue";
-import BIMDataTextbox from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
 import BcfTopicComments from "./bcf-topic-comments/BcfTopicComments.vue";
 import BcfTopicDefaultImage from "../bcf-topic-card/BcfTopicDefaultImage.vue";
 import BcfTopicViewpoints from "./bcf-topic-viewpoints/BcfTopicViewpoints.vue";
@@ -249,11 +244,6 @@ export default {
     BcfTopicComments,
     BcfTopicDefaultImage,
     BcfTopicViewpoints,
-    BIMDataButton,
-    BIMDataIconArrow,BIMDataIconEdit, BIMDataIconDelete, BIMDataIconClose, BIMDataIconModel3D,
-    BIMDataLoading,
-    BIMDataSafeZoneModal,
-    BIMDataTextbox,
   },
   props: {
     uiConfig: {
@@ -310,14 +300,14 @@ export default {
 
     const currentUserEmail = ref("");
     const loadCurrentUserEmail = async () => {
-      currentUserEmail.value = (await useService().fetchCurrentUser()).email ?? "";
+      currentUserEmail.value = (await service.fetchCurrentUser()).email ?? "";
     };
 
     const deleteTopic = async () => {
       try {
         showDeleteModal.value = false;
         loading.value = true;
-        await useService().deleteTopic(props.project, props.topic);
+        await service.deleteTopic(props.project, props.topic);
         emit("topic-deleted", props.topic);
       } catch (error) {
         console.error(error);

package/src/components/bcf-topic-overview/bcf-topic-comments/BcfTopicComments.vue

@@ -94,28 +94,14 @@
 
 <script>
 import { onMounted, inject, ref, watch, onBeforeUnmount } from "vue";
-import { useService } from "../../../service.js";
+import service from "../../../service.js";
 import { getViewerOptions, highlightViewer, unhighlightViewer } from "../../../utils/viewer.js";
 
 // Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import BIMDataDropdownList from "@bimdata/design-system/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue";
-import {
-  BIMDataIconCamera,
-  BIMDataIconDelete,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
-import BIMDataLoading from "@bimdata/design-system/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue";
-import BIMDataTextarea from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue";
 import TopicComment from "./topic-comment/TopicComment.vue";
 
 export default {
   components: {
-    BIMDataButton,
-    BIMDataDropdownList,
-    BIMDataIconCamera,
-    BIMDataIconDelete,
-    BIMDataLoading,
-    BIMDataTextarea,
     TopicComment,
   },
   props: {
@@ -156,7 +142,7 @@ export default {
     const viewerSelectOptions = ref([]);
 
     const loadComments = async () => {
-      comments.value = await useService().fetchTopicComments(props.project, props.topic);
+      comments.value = await service.fetchTopicComments(props.project, props.topic);
     };
 
     const setCommentViewpoint = async () => {
@@ -179,7 +165,6 @@ export default {
 
     const submitComment = async () => {
       try {
-        const service = useService();
         loading.value = true;
         if (viewpoint.value) {
           viewpoint.value = await service.createViewpoint(

package/src/components/bcf-topic-overview/bcf-topic-comments/topic-comment/TopicComment.vue

@@ -138,42 +138,14 @@
 
 <script>
 import { inject, onMounted, ref, onBeforeUnmount } from "vue";
-import { useService } from "../../../../service.js";
+import service from "../../../../service.js";
 import { getViewerOptions, highlightViewer, unhighlightViewer } from "../../../../utils/viewer.js";
 
-// Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import {
-  BIMDataIconCamera,
-  BIMDataIconClose,
-  BIMDataIconDelete,
-  BIMDataIconEdit,
-  BIMDataIconEllipsis,
-  BIMDataIconUndo,
-  BIMDataIconUser,
-  BIMDataIconValidate,
-} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
-import BIMDataLoading from "@bimdata/design-system/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue";
-import BIMDataTextarea from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue";
-import BIMDataTextbox from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
-
 // TODO: should be imported from DS
 import UserAvatar from "../../../user-avatar/UserAvatar.vue";
 
 export default {
   components: {
-    BIMDataButton,
-    BIMDataIconCamera,
-    BIMDataIconClose,
-    BIMDataIconDelete,
-    BIMDataIconEdit,
-    BIMDataIconEllipsis,
-    BIMDataIconUndo,
-    BIMDataIconUser,
-    BIMDataIconValidate,
-    BIMDataLoading,
-    BIMDataTextarea,
-    BIMDataTextbox,
     UserAvatar,
   },
   props: {
@@ -217,7 +189,7 @@ export default {
     const toggleMenu = () => (showMenu.value = !showMenu.value);
 
     const loadViewpoint = async () => {
-      viewpoint.value = await useService().fetchTopicCommentViewpoint(
+      viewpoint.value = await service.fetchTopicCommentViewpoint(
         props.project,
         props.topic,
         props.comment
@@ -234,7 +206,7 @@ export default {
     };
     const deleteViewpoint = async () => {
       if (viewpoint.value.guid) {
-        await useService().deleteViewpoint(props.project, props.topic, viewpoint.value);
+        await service.deleteViewpoint(props.project, props.topic, viewpoint.value);
       }
       viewpoint.value = null;
     };
@@ -260,7 +232,7 @@ export default {
           return;
         }
         if (viewpoint.value && !viewpoint.value.guid) {
-          viewpoint.value = await useService().createViewpoint(
+          viewpoint.value = await service.createViewpoint(
             props.project,
             props.topic,
             viewpoint.value
@@ -272,7 +244,7 @@ export default {
         ) {
           loading.value = true;
 
-          const newComment = await useService().updateComment(
+          const newComment = await service.updateComment(
             props.project,
             props.topic,
             props.comment,
@@ -293,7 +265,7 @@ export default {
     const submitDelete = async () => {
       try {
         loading.value = true;
-        await useService().deleteComment(props.project, props.topic, props.comment);
+        await service.deleteComment(props.project, props.topic, props.comment);
         emit("comment-deleted", props.comment);
         isDeleting.value = false;
       } finally {

package/src/components/bcf-topic-overview/bcf-topic-viewpoints/BcfTopicViewpoints.vue

@@ -35,17 +35,11 @@ import { computed } from "vue";
 import { getStatusColor } from "../../../utils/topic.js";
 import { getViewpointConfig } from "../../../utils/viewpoints.js";
 // Components
-import BIMDataCarousel from "@bimdata/design-system/src/BIMDataComponents/BIMDataCarousel/BIMDataCarousel.vue";
-import BIMDataIconInformation from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconInformation.vue";
-import BIMDataIcon from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue";
 import BcfTopicDefaultImage from "../../bcf-topic-card/BcfTopicDefaultImage.vue";
 
 export default {
   components: {
     BcfTopicDefaultImage,
-    BIMDataCarousel,
-    BIMDataIcon,
-    BIMDataIconInformation,
   },
   props: {
     detailedExtensions: {

package/src/components/bcf-topics-table/BcfTopicsTable.vue

@@ -66,9 +66,6 @@
 import { computed } from "vue";
 import columnsDef from "./columns.js";
 // Components
-import BIMDataTable from "@bimdata/design-system/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue";
-import BIMDataTextbox from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
-import BIMDataTooltip from "@bimdata/design-system/src/BIMDataComponents/BIMDataTooltip/BIMDataTooltip.vue";
 import BcfTopicActionsCell from "./bcf-topic-actions-cell/BcfTopicActionsCell.vue";
 import BcfTopicIndexCell from "./bcf-topic-index-cell/BcfTopicIndexCell.vue";
 import BcfTopicPriorityCell from "./bcf-topic-priority-cell/BcfTopicPriorityCell.vue";
@@ -83,9 +80,6 @@ export default {
     BcfTopicIndexCell,
     BcfTopicPriorityCell,
     BcfTopicStatusCell,
-    BIMDataTable,
-    BIMDataTextbox,
-    BIMDataTooltip,
     UserAvatar
   },
   props: {

package/src/components/bcf-topics-table/bcf-topic-actions-cell/BcfTopicActionsCell.vue

@@ -13,15 +13,7 @@
 </template>
 
 <script>
-// Components
-import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
-import BIMDataIconShow from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconShow.vue";
-
 export default {
-  components: {
-    BIMDataButton,
-    BIMDataIconShow,
-  },
   props: {
     topic: {
       type: Object,

package/src/components/user-avatar/UserAvatar.vue

@@ -23,12 +23,7 @@
 <script>
 import { computed } from "vue";
 
-import BIMDataIconUser from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconUser.vue";
-
 export default {
-  components: {
-    BIMDataIconUser,
-  },
   props: {
     user: {
       type: Object,

package/src/index.js

@@ -1,19 +1,11 @@
 import * as config from "./config.js";
-import { createService, setService, useService } from "./service.js";
+import { getPriorityColor, getStatusColor } from "./utils/topic.js";
+import { getViewpointConfig } from "./utils/viewpoints.js";
 
 import { useBcfFilter } from "./composables/filter.js";
 import { useBcfSearch } from "./composables/search.js";
 import { useBcfSort } from "./composables/sort.js";
 
-import {
-  getPriorityColor,
-  getStatusColor
-} from "./utils/topic.js";
-
-import {
-  getViewpointConfig
-} from "./utils/viewpoints.js";
-
 import BcfFilters from "./components/bcf-filters/BcfFilters.vue";
 import BcfSettings from "./components/bcf-settings/BcfSettings.vue";
 import BcfStatistics from "./components/bcf-statistics/BcfStatistics.vue";
@@ -36,15 +28,12 @@ const components = {
 
 export {
   config,
-  createService,
-  setService,
-  useService,
-  useBcfFilter,
-  useBcfSearch,
-  useBcfSort,
   getPriorityColor,
   getStatusColor,
   getViewpointConfig,
+  useBcfFilter,
+  useBcfSearch,
+  useBcfSort,
   components,
 
   // Export components individually

package/src/service.js

@@ -4,22 +4,29 @@ import { getExtensionField } from "./utils/extensions.js";
 import { getPriorityColor } from "./utils/topic.js";
 import { downloadBlobAs } from "./utils/download.js";
 
-let libService = null;
-
-function createService(apiClient, { fetchUsers }) {
-  const getUsers = fetchUsers
-    ? (project) => fetchUsers(project)
-    : (project) => apiClient.collaborationApi.getProjectUsers(project.cloud.id, project.id);
-
-  const fetchCurrentUser = () => apiClient.bcfApi.getUser();
+class Service {
+  setup({ apiClient, fetchUsers }) {
+    this.apiClient = apiClient;
+    this.fetchUsers = fetchUsers;
+  }
+
+  _getUsers() {
+    return this.fetchUsers
+      ? (project) => this.fetchUsers(project)
+      : (project) => this.apiClient.collaborationApi.getProjectUsers(project.cloud.id, project.id);
+  }
+
+  fetchCurrentUser() {
+    return this.apiClient.bcfApi.getUser();
+  }
 
   // --- BCF Topics API ---
 
-  const fetchTopics = async (project, { extensions, users } = {}) => {
-    const _extensions = extensions ?? (await apiClient.bcfApi.getDetailedExtensions(project.id));
-    const _users = users ?? (await getUsers(project));
+  async fetchTopics(project, { extensions, users } = {}) {
+    const _extensions = extensions ?? (await this.apiClient.bcfApi.getDetailedExtensions(project.id));
+    const _users = users ?? (await this._getUsers(project));
 
-    const topics = await apiClient.bcfApi.getTopics(project.id);
+    const topics = await this.apiClient.bcfApi.getTopics(project.id);
     topics.sort((a, b) => b.index - a.index);
     topics.forEach((topic) => {
       topic.color = getPriorityColor(topic, _extensions);
@@ -27,180 +34,147 @@ function createService(apiClient, { fetchUsers }) {
     });
 
     return topics;
-  };
+  }
 
-  const fecthTopicByGuid = async (project, guid) => {
-    const extensions = await apiClient.bcfApi.getDetailedExtensions(project.id);
-    const topic = await apiClient.bcfApi.getFullTopic(guid, project.id, "url");
+  async fecthTopicByGuid(project, guid) {
+    const extensions = await this.apiClient.bcfApi.getDetailedExtensions(project.id);
+    const topic = await this.apiClient.bcfApi.getFullTopic(guid, project.id, "url");
     topic.color = getPriorityColor(topic, extensions);
     return topic;
-  };
+  }
 
-  const createTopic = (project, topic) => {
-    return apiClient.bcfApi.createTopic(project.id, topic);
-  };
+  createTopic(project, topic) {
+    return this.apiClient.bcfApi.createTopic(project.id, topic);
+  }
 
-  const updateTopic = (project, topic) => {
-    return apiClient.bcfApi.updateTopic(topic.guid, project.id, topic);
-  };
+  updateTopic(project, topic) {
+    return this.apiClient.bcfApi.updateTopic(topic.guid, project.id, topic);
+  }
 
-  const deleteTopic = (project, topic) => {
-    return apiClient.bcfApi.deleteTopic(topic.guid, project.id);
-  };
+  deleteTopic(project, topic) {
+    return this.apiClient.bcfApi.deleteTopic(topic.guid, project.id);
+  }
 
-  const importBcf = async (project, file) => {
+  async importBcf(project, file) {
     const formData = new FormData();
     formData.append("name", file.name);
     formData.append("file", file);
-    await fetch(`${apiClient.config.basePath}/bcf/2.1/projects/${project.id}/import`, {
+    await fetch(`${this.apiClient.config.basePath}/bcf/2.1/projects/${project.id}/import`, {
       method: "POST",
       credentials: "include",
       headers: {
-        ...apiClient.authHeader,
+        ...this.apiClient.authHeader,
       },
       body: formData,
     });
-  };
+  }
 
-  const exportBcf = async (project, topics) => {
-    const response = await apiClient.bcfApi.downloadBcfExport(
+  async exportBcf(project, topics) {
+    const response = await this.apiClient.bcfApi.downloadBcfExport(
       project.id,
       undefined, // Format
       topics.map((t) => t.guid).join(",")
     );
     downloadBlobAs(`${project.name}.bcf`, response);
-  };
+  }
 
-  const exportBcfXLSX = async (project, topics) => {
-    const response = await apiClient.bcfApi.downloadBcfExportXlsx(
+  async exportBcfXLSX(project, topics) {
+    const response = await this.apiClient.bcfApi.downloadBcfExportXlsx(
       project.id,
       undefined, // Format
       undefined, // Locale
       topics.map((t) => t.guid).join(",")
     );
     downloadBlobAs(`${project.name}.xlsx`, response);
-  };
+  }
 
   // --- BCF Topic Viewpoints API ---
 
-  const loadTopicsViewpoints = async (project, topics) => {
-    await eachLimit(topics, 10, (topic, cb) => {
+  async loadTopicsViewpoints(project, topics) {
+    await eachLimit(topics, 10, (topic, done) => {
       fetchTopicViewpoints(project, topic).then(viewpoints => {
         topic.viewpoints = viewpoints;
-        cb();
-      }, cb);
+        done();
+      }, done);
     });
     return topics;
-  };
+  }
 
-  const fetchTopicViewpoints = (project, topic) => {
-    return apiClient.bcfApi.getTopicViewpoints(project.id, topic.guid, "url");
-  };
+  fetchTopicViewpoints(project, topic) {
+    return this.apiClient.bcfApi.getTopicViewpoints(project.id, topic.guid, "url");
+  }
 
-  const fetchTopicCommentViewpoint = (project, topic, comment) => {
-    return apiClient.bcfApi.getViewpoint(comment.viewpoint_guid, project.id, topic.guid);
-  };
+  fetchTopicCommentViewpoint(project, topic, comment) {
+    return this.apiClient.bcfApi.getViewpoint(comment.viewpoint_guid, project.id, topic.guid);
+  }
 
-  const createViewpoint = (project, topic, viewpoint) => {
-    return apiClient.bcfApi.createViewpoint(project.id, topic.guid, "url", viewpoint);
-  };
+  createViewpoint(project, topic, viewpoint) {
+    return this.apiClient.bcfApi.createViewpoint(project.id, topic.guid, "url", viewpoint);
+  }
 
-  const updateViewpoint = (project, topic, viewpoint) => {
-    return apiClient.bcfApi.updateViewpoint(viewpoint.guid, project.id, topic.guid, "url", viewpoint);
-  };
+  updateViewpoint(project, topic, viewpoint) {
+    return this.apiClient.bcfApi.updateViewpoint(viewpoint.guid, project.id, topic.guid, "url", viewpoint);
+  }
 
-  const deleteViewpoint = (project, topic, viewpoint) => {
-    return apiClient.bcfApi.deleteViewpoint(viewpoint.guid, project.id, topic.guid);
-  };
+  deleteViewpoint(project, topic, viewpoint) {
+    return this.apiClient.bcfApi.deleteViewpoint(viewpoint.guid, project.id, topic.guid);
+  }
 
   // --- BCF Topic Comments API ---
 
-  const fetchTopicComments = async (project, topic) => {
-    const users = await getUsers(project);
+  async fetchTopicComments(project, topic) {
+    const users = await this._getUsers(project);
 
-    const comments = await apiClient.bcfApi.getComments(project.id, topic.guid);
+    const comments = await this.apiClient.bcfApi.getComments(project.id, topic.guid);
     comments.sort((a, b) => (a.date > b.date ? -1 : 1));
     comments.forEach((c) => {
       c.user = users.find((u) => u.email === c.author);
     });
 
     return comments;
-  };
+  }
 
-  const createComment = (project, topic, data) => {
-    return apiClient.bcfApi.createComment(project.id, topic.guid, data);
-  };
+  createComment(project, topic, data) {
+    return this.apiClient.bcfApi.createComment(project.id, topic.guid, data);
+  }
 
-  const updateComment = (project, topic, comment, data) => {
-    return apiClient.bcfApi.updateComment(comment.guid, project.id, topic.guid, data);
-  };
+  updateComment(project, topic, comment, data) {
+    return this.apiClient.bcfApi.updateComment(comment.guid, project.id, topic.guid, data);
+  }
 
-  const deleteComment = (project, topic, comment) => {
-    return apiClient.bcfApi.deleteComment(comment.guid, project.id, topic.guid);
-  };
+  deleteComment(project, topic, comment) {
+    return this.apiClient.bcfApi.deleteComment(comment.guid, project.id, topic.guid);
+  }
 
   // --- BCF Extensions API ---
 
-  const fetchExtensions = (project) => {
-    return apiClient.bcfApi.getExtensions(project.id);
-  };
+  fetchExtensions(project) {
+    return this.apiClient.bcfApi.getExtensions(project.id);
+  }
 
-  const fetchDetailedExtensions = (project) => {
-    return apiClient.bcfApi.getDetailedExtensions(project.id);
-  };
+  fetchDetailedExtensions(project) {
+    return this.apiClient.bcfApi.getDetailedExtensions(project.id);
+  }
 
-  const createExtension = async (project, type, data) => {
-    return await apiClient.bcfApi[`createExtension${type}`](project.id, {
+  createExtension(project, type, data) {
+    return this.apiClient.bcfApi[`createExtension${type}`](project.id, {
       [getExtensionField(type)]: data.value,
       color: getRandomHexColor(),
     });
-  };
+  }
 
-  const updateExtension = async (project, type, extension, data) => {
-    return await apiClient.bcfApi[`updateExtension${type}`](extension.id, project.id, {
+  updateExtension(project, type, extension, data) {
+    return this.apiClient.bcfApi[`updateExtension${type}`](extension.id, project.id, {
       [getExtensionField(type)]: data.value,
       color: data.color,
     });
-  };
-
-  const deleteExtension = async (project, type, extension) => {
-    await apiClient.bcfApi[`deleteExtension${type}`](extension.id, project.id);
-  };
-
-  return {
-    fetchCurrentUser,
-    fetchTopics,
-    fecthTopicByGuid,
-    createTopic,
-    updateTopic,
-    deleteTopic,
-    importBcf,
-    exportBcf,
-    exportBcfXLSX,
-    loadTopicsViewpoints,
-    fetchTopicViewpoints,
-    fetchTopicCommentViewpoint,
-    createViewpoint,
-    updateViewpoint,
-    deleteViewpoint,
-    fetchTopicComments,
-    createComment,
-    updateComment,
-    deleteComment,
-    fetchExtensions,
-    fetchDetailedExtensions,
-    createExtension,
-    updateExtension,
-    deleteExtension,
-  };
-}
+  }
 
-function setService(service) {
-  libService = service;
+  deleteExtension(project, type, extension) {
+    return this.apiClient.bcfApi[`deleteExtension${type}`](extension.id, project.id);
+  }
 }
 
-function useService() {
-  return libService;
-}
+const service = new Service();
 
-export { createService, setService, useService };
+export default service;

package/vue3-plugin.js

@@ -1,9 +1,6 @@
-import {
-  components,
-  createService,
-  setService,
-} from "./src/index.js";
+import { components } from "./src/index.js";
 import messages from "./src/i18n/index.js";
+import service from "./src/service.js";
 
 /**
  * BCF Components library plugin for Vue 3.
@@ -28,8 +25,7 @@ const pluginFactory = ({
   return {
     install(app) {
       if (apiClient) {
-        const service = createService(apiClient, { fetchUsers });
-        setService(service);
+        service.setup({ apiClient, fetchUsers });
       } else {
         console.error(
           "[BCF Components Plugin] No api client provided. " +