@bimdata/bcf-components 1.0.3 → 1.0.4

package/README.md

@@ -3,7 +3,7 @@
 A set (library) of Vue components to manage BCF and build BCF related
 features into your app.
 
-Made with :heart: by [BIMData.io](https://github.com/bimdata).
+Made with :heart: by [BIMData.io](https://bimdata.io/).
 
 ## Usage
 
@@ -21,11 +21,13 @@ In order to use the library in your Vue 2 app you'll need to use
 [Vue Composition API plugin](https://github.com/vuejs/composition-api).
 
 First add it to your dependencies:
+
 ```bash
 npm install @vue/composition-api
 ```
 
 Then, in your application bootstrap script, add the following:
+
 ```js
 import Vue from "vue";
 import VueCompositionApi from "@vue/composition-api";
@@ -36,15 +38,66 @@ Vue.use(VueCompositionApi);
 ```
 
 You can now use library components like so:
+
 ```js
-import { HelloWorld } from "@bimdata/bcf-components/dist/vue2/bcf-components.es.js";
+import { components } from "@bimdata/bcf-components/dist/vue2/bcf-components.es.js";
+
+const { BcfTopicCard } = components;
 ```
 
 ### Vue 3.x application
 
-In Vue 3 app you can directly use components that way:
+**Using Vue plugin**
+
+The package provide a Vue plugin that can be used to setup the library for your app
+and make all components available globally.
+
+```js
+import { createApp } from "vue";
+import { createI18n } from "vue-i18n";
+import { makeBIMDataApiClient } from "@bimdata/typescript-fetch-api-client";
+// Import Vue 3 plugin factory
+import BIMDataBcfComponents from "@bimdata/bcf-components/vue3-plugin.js";
+
+// Instanciate i18n plugin (v9+)
+const i18nPlugin = createI18n({ ... });
+// Instanciate BIMData API client (v8.2+)
+const apiClient = makeBIMDataApiClient({ ... });
+
+const app = createApp()
+  .use(i18nPlugin)
+  // Provide both i18n plugin and API client as plugin config
+  .use(BIMDataBcfComponents({ i18nPlugin, apiClient }));
+...
+```
+
+It is also possible to provide your own translations for i18n by removing
+`i18nPlugin` from plugin config and adding translation keys from
+[`src/i18n/lang/fr.js`](./src/i18n/lang/fr.json) to the translation files of your app.
+
+**Using "manual" setup**
+
+To setup the library without the use of the plugin you have to provide your own translations
+(as described above in the *Using Vue plugin* section) and inject an API client like so:
+
 ```js
-import { HelloWorld } from "@bimdata/bcf-components";
+import { makeBIMDataApiClient } from "@bimdata/typescript-fetch-api-client";
+// Import the `setApiClient` function
+import { setApiClient } from "@bimdata/bcf-components";
+
+// Instanciate BIMData API client (v8.2+)
+const apiClient = makeBIMDataApiClient({ ... });
+
+// Inject API client
+setApiClient(apiClient);
+```
+
+Then you can directly use components in your app that way:
+
+```js
+import { components } from "@bimdata/bcf-components";
+
+const { BcfTopicCard } = components;
 ```
 
 ## Build

package/dist/vue2/bcf-components.es.js

@@ -772,7 +772,7 @@ var render$i = function() {
   }, expression: "tags" } }), _c("div", { staticClass: "flex justify-center m-t-24" }, [_c("BIMDataButton", { staticClass: "m-r-12", attrs: { "color": "primary", "ghost": "", "radius": "" }, on: { "click": _vm.resetFilters } }, [_vm._v(_vm._s(_vm.$t("BcfComponents.BcfFilters.resetButton")))]), _c("BIMDataButton", { attrs: { "color": "primary", "fill": "", "radius": "" }, on: { "click": _vm.submitFilters } }, [_c("BIMDataIcon", { attrs: { "name": "search", "size": "xxs", "fill": "", "color": "default", "margin": "0 6px 0 0" } }), _c("span", [_vm._v(_vm._s(_vm.$t("BcfComponents.BcfFilters.searchButton")))])], 1)], 1)], 1)])], 1);
 };
 var staticRenderFns$i = [];
-var BcfFilters_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfFilters_2FBcfFilters_vue_src_scoped_true_lang = "";
+var BcfFilters_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfFilters_2FBcfFilters_vue_src_scoped_true_lang = "";
 function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
   if (render2) {
@@ -1236,7 +1236,7 @@ var render$h = function() {
   } } }, [_c("BIMDataIcon", { attrs: { "name": "close", "size": "xxxs" } })], 1)], 1)]) : _vm._e()], 1);
 };
 var staticRenderFns$h = [];
-var SettingCardItem_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfSettings_2FsettingCard_2FSettingCardItem_vue_src_scoped_true_lang = "";
+var SettingCardItem_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfSettings_2FsettingCard_2FSettingCardItem_vue_src_scoped_true_lang = "";
 const __vue2_script$h = {
   components: {
     BIMDataButton: c$5,
@@ -1344,7 +1344,7 @@ var render$g = function() {
   }), 1)], 1)]);
 };
 var staticRenderFns$g = [];
-var SettingCard_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfSettings_2FsettingCard_2FSettingCard_vue_src_scoped_true_lang = "";
+var SettingCard_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfSettings_2FsettingCard_2FSettingCard_vue_src_scoped_true_lang = "";
 const __vue2_script$g = {
   components: {
     BIMDataButton: c$5,
@@ -1428,7 +1428,7 @@ var render$f = function() {
   })], 2)]);
 };
 var staticRenderFns$f = [];
-var BcfSettings_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfSettings_2FBcfSettings_vue_src_scoped_true_lang = "";
+var BcfSettings_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfSettings_2FBcfSettings_vue_src_scoped_true_lang = "";
 const __vue2_script$f = {
   components: {
     BIMDataButton: c$5,
@@ -1725,7 +1725,7 @@ var render$e = function() {
   } }]) })], 1)], 1)]);
 };
 var staticRenderFns$e = [];
-var BcfStatistics_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfStatistics_2FBcfStatistics_vue_src_scoped_true_lang = "";
+var BcfStatistics_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfStatistics_2FBcfStatistics_vue_src_scoped_true_lang = "";
 const __vue2_script$e = {
   components: {
     BIMDataPaginatedList: b$1,
@@ -1874,7 +1874,7 @@ var render$c = function() {
   } } }, [_vm._v(" " + _vm._s(_vm.$t("BcfComponents.BcfTopicCard.see")) + " ")])], 1)])]);
 };
 var staticRenderFns$c = [];
-var BcfTopicCard_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicCard_2FBcfTopicCard_vue_src_scoped_true_lang = "";
+var BcfTopicCard_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicCard_2FBcfTopicCard_vue_src_scoped_true_lang = "";
 const __vue2_script$c = {
   components: {
     BcfTopicDefaultImage,
@@ -2103,7 +2103,7 @@ var render$b = function() {
   }, expression: "topicLabels" } })], 1)], 2), _c("div", { staticClass: "bcf-topic-create__footer" }, [_c("BIMDataButton", { attrs: { "disabled": !_vm.topicTitle, "width": "100%", "color": "primary", "fill": "", "radius": "" }, on: { "click": _vm.submit } }, [_vm._v(" " + _vm._s(_vm.$t("BcfComponents.BcfTopicCreate.validateButton")) + " ")])], 1), _vm.loading ? _c("div", { staticClass: "bcf-topic-create__loader" }, [_c("BIMDataLoading")], 1) : _vm._e()]);
 };
 var staticRenderFns$b = [];
-var BcfTopicCreate_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicCreate_2FBcfTopicCreate_vue_src_scoped_true_lang = "";
+var BcfTopicCreate_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicCreate_2FBcfTopicCreate_vue_src_scoped_true_lang = "";
 const __vue2_script$b = {
   components: {
     BIMDataButton: c$5,
@@ -2270,7 +2270,7 @@ var render$9 = function() {
   } } }, [_c("BIMDataIcon", { attrs: { "name": "plus", "size": "m", "fill": "", "color": "default" } })], 1)], 1);
 };
 var staticRenderFns$9 = [];
-var BcfTopicCreationCard_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicCreationCard_2FBcfTopicCreationCard_vue_src_scoped_true_lang = "";
+var BcfTopicCreationCard_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicCreationCard_2FBcfTopicCreationCard_vue_src_scoped_true_lang = "";
 const __vue2_script$9 = {
   components: {
     BcfTopicCreationCardImage,
@@ -2743,7 +2743,7 @@ var render$8 = function() {
   }, proxy: true }], null, false, 4095619558) }) : _vm._e()], 1);
 };
 var staticRenderFns$8 = [];
-var BcfTopicForm_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicForm_2FBcfTopicForm_vue_src_scoped_true_lang = "";
+var BcfTopicForm_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicForm_2FBcfTopicForm_vue_src_scoped_true_lang = "";
 const __vue2_script$8 = {
   components: {
     BIMDataButton: c$5,
@@ -3356,7 +3356,7 @@ var render$7 = function() {
   } }, [_vm.user.profilePicture ? [_c("img", { attrs: { "src": _vm.user.profilePicture } })] : _vm.initials ? [_vm._v(" " + _vm._s(_vm.initials) + " ")] : [_c("BIMDataIcon", { attrs: { "name": "user", "size": "s" } })]], 2);
 };
 var staticRenderFns$7 = [];
-var UserAvatar_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FuserAvatar_2FUserAvatar_vue_src_scoped_true_lang = "";
+var UserAvatar_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FuserAvatar_2FUserAvatar_vue_src_scoped_true_lang = "";
 const __vue2_script$7 = {
   props: {
     user: {
@@ -3407,7 +3407,7 @@ var render$6 = function() {
   }, expression: "text" } })], 1), _vm.loading ? [_c("BIMDataLoading")] : _vm._e()], 2);
 };
 var staticRenderFns$6 = [];
-var Comment_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicOverview_2FbcfTopicComments_2Fcomment_2FComment_vue_src_scoped_true_lang = "";
+var Comment_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicOverview_2FbcfTopicComments_2Fcomment_2FComment_vue_src_scoped_true_lang = "";
 const __vue2_script$6 = {
   components: {
     BIMDataButton: c$5,
@@ -3524,7 +3524,7 @@ var render$5 = function() {
   }), 1) : _vm._e()]), _vm.loading ? [_c("BIMDataLoading")] : _vm._e()], 2);
 };
 var staticRenderFns$5 = [];
-var BcfTopicComments_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicOverview_2FbcfTopicComments_2FBcfTopicComments_vue_src_scoped_true_lang = "";
+var BcfTopicComments_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicOverview_2FbcfTopicComments_2FBcfTopicComments_vue_src_scoped_true_lang = "";
 const __vue2_script$5 = {
   components: {
     BIMDataButton: c$5,
@@ -3625,7 +3625,7 @@ var render$4 = function() {
   }, proxy: true }], null, false, 2806232332) }) : _vm._e(), _vm.loading ? _c("div", [_c("BIMDataLoading")], 1) : _vm._e()], 1);
 };
 var staticRenderFns$4 = [];
-var BcfTopicOverview_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicOverview_2FBcfTopicOverview_vue_src_scoped_true_lang = "";
+var BcfTopicOverview_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicOverview_2FBcfTopicOverview_vue_src_scoped_true_lang = "";
 const __vue2_script$4 = {
   components: {
     BcfTopicComments,
@@ -3951,7 +3951,7 @@ var render$3 = function() {
   } } }, [_vm._v(" " + _vm._s(_vm.$t("BcfComponents.BcfTopicActionsCell.seeButton")) + " ")])], 1);
 };
 var staticRenderFns$3 = [];
-var BcfTopicActionsCell_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicsTable_2FbcfTopicActionsCell_2FBcfTopicActionsCell_vue_src_scoped_true_lang = "";
+var BcfTopicActionsCell_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicsTable_2FbcfTopicActionsCell_2FBcfTopicActionsCell_vue_src_scoped_true_lang = "";
 const __vue2_script$3 = {
   components: {
     BIMDataButton: c$5
@@ -3981,7 +3981,7 @@ var render$2 = function() {
   return _c("span", { staticClass: "bcf-topic-priority-cell", style: { color: _vm.priorityColor } }, [_vm._v(" " + _vm._s(_vm.bcfTopic.priority || _vm.$t("BcfComponents.BcfTopicPriorityCell.noPriority")) + " ")]);
 };
 var staticRenderFns$2 = [];
-var BcfTopicPriorityCell_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicsTable_2FbcfTopicPriorityCell_2FBcfTopicPriorityCell_vue_src_scoped_true_lang = "";
+var BcfTopicPriorityCell_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicsTable_2FbcfTopicPriorityCell_2FBcfTopicPriorityCell_vue_src_scoped_true_lang = "";
 const __vue2_script$2 = {
   props: {
     bcfTopic: {
@@ -4028,7 +4028,7 @@ var render$1 = function() {
   } }, [_vm._v(" " + _vm._s(_vm.bcfTopic.topicStatus) + " ")]);
 };
 var staticRenderFns$1 = [];
-var BcfTopicStatusCell_scss_vue_type_style_index_0_from__2Fhome_2Fnyko_2FWork_2Fprojects_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicsTable_2FbcfTopicStatusCell_2FBcfTopicStatusCell_vue_src_scoped_true_lang = "";
+var BcfTopicStatusCell_scss_vue_type_style_index_0_from__2Fhome_2Frunner_2FactionsRunner_2F_work_2FbcfComponents_2FbcfComponents_2Fsrc_2Fcomponents_2FbcfTopicsTable_2FbcfTopicStatusCell_2FBcfTopicStatusCell_vue_src_scoped_true_lang = "";
 const __vue2_script$1 = {
   props: {
     bcfTopic: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimdata/bcf-components",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "files": [
     "dist",
     "vue3-plugin.js"
@@ -19,7 +19,7 @@
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.4.9",
-    "vue": "^2.6 || >=3"
+    "vue": "^2.6 || ^3.0"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {

package/vue3-plugin.js

@@ -11,7 +11,7 @@ import messages from "./dist/i18n/index.js";
  * @param {
  *  {
  *    apiClient: Object,
- *    i18n: Object,
+ *    i18nPlugin: Object,
  *    includedComponents?: string[],
  *    excludedComponents?: string[],
  *  } 
@@ -19,9 +19,9 @@ import messages from "./dist/i18n/index.js";
  */
 const pluginFactory = ({
   apiClient,
+  i18nPlugin,
   includedComponents = [],
   excludedComponents = [],
-  i18n,
 } = {}) => {
   return {
     install(app) {
@@ -35,9 +35,9 @@ const pluginFactory = ({
         );
       }
 
-      if (i18n) {
+      if (i18nPlugin) {
         Object.entries(messages).forEach(([locale, translations]) => {
-          i18n.global.mergeLocaleMessage(locale, translations);
+          i18nPlugin.global.mergeLocaleMessage(locale, translations);
         });
       } else {
         console.warn(