PATCH: feat: add vue3 build for smart components (#237)

* PATCH: feat: add vue3 build for smart components * get rid of template + add constraint when no ghost ref in MultiLineTextBox Co-authored-by: NicolasRichel <nicolas@bimdata.io> Co-authored-by: Paul Vilalta <vilaltapaul@gmail.com>
bimdata · Oct 6, 2022 · f770af5 · f770af5
1 parent 12ca6f0
commit f770af5
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 100 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -140,8 +140,8 @@ function getAllComponentsBundleConfiguration() {
 function getSingleSmartComponentConfigurations() {
   const componentNames = ["BIMDataFileManager"];
 
-  // Build Vue 2.x compatible components
   return [
+    // Build Vue 2.x compatible components
     ...componentNames.map(componentName => ({
       input: [
         `src/BIMDataSmartComponents/${componentName}/${componentName}.vue`,
@@ -166,6 +166,38 @@ function getSingleSmartComponentConfigurations() {
         terser(),
       ],
     })),
+    // Build Vue 3.x compatible components
+    ...componentNames.map(componentName => ({
+      input: [
+        `src/BIMDataSmartComponents/${componentName}/${componentName}.vue`,
+      ],
+      output: {
+        file: `dist/js/BIMDataSmartComponents/vue3/${componentName}.js`,
+        format: "esm",
+      },
+      plugins: [
+        alias({
+          entries: [
+            {
+              find: /BIMDataDirectives\//,
+              replacement: "BIMDataDirectives/vue3/",
+            },
+          ],
+        }),
+        replace({
+          "~@/assets": "node_modules/@bimdata/design-system/dist",
+          delimiters: ["", ""],
+          preventAssignment: true,
+        }),
+        vue3({
+          template: { isProduction: true },
+          preprocessStyles: true,
+        }),
+        postcss(),
+        image(),
+        terser(),
+      ],
+    })),
   ];
 }
 

diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.vue b/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.vue
@@ -1,114 +1,112 @@
 <template>
   <div class="bimdata-file-manager">
-    <template>
+    <div
+      class="bimdata-file-manager__header"
+      :class="{
+        'bimdata-file-manager__header--xs': xsLayout,
+        'bimdata-file-manager__header--s': sLayout,
+        'bimdata-file-manager__header--m': mLayout,
+        'bimdata-file-manager__header--l': lLayout,
+      }"
+      v-if="headerButtons || headerSearch"
+    >
+      <template v-if="headerButtons">
+        <NewFolderButton
+          :disabled="!currentFolder || currentFolder.user_permission < 100"
+          :projectId="projectId"
+          :spaceId="spaceId"
+          :apiClient="apiClient"
+          :folder="currentFolder"
+          @success="onNewFolder"
+          @error="$emit('error', $event)"
+        />
+        <UploadFileButton
+          class="bimdata-file-manager__header__upload"
+          width="25%"
+          :disabled="!currentFolder || currentFolder.user_permission < 100"
+          multiple
+          @upload="uploadFiles"
+        />
+      </template>
+      <BIMDataSearch
+        v-if="headerSearch"
+        :color="searchColor"
+        class="bimdata-file-manager__search"
+        width="100%"
+        placeholder="Search"
+        v-model="searchText"
+        ref="search"
+        clear
+        radius
+      />
+    </div>
+    <div class="bimdata-file-manager__navigation">
       <div
-        class="bimdata-file-manager__header"
-        :class="{
-          'bimdata-file-manager__header--xs': xsLayout,
-          'bimdata-file-manager__header--s': sLayout,
-          'bimdata-file-manager__header--m': mLayout,
-          'bimdata-file-manager__header--l': lLayout,
-        }"
-        v-if="headerButtons || headerSearch"
+        v-if="navigationShown"
+        class="bimdata-file-manager__navigation__content"
       >
-        <template v-if="headerButtons">
-          <NewFolderButton
-            :disabled="!currentFolder || currentFolder.user_permission < 100"
-            :projectId="projectId"
-            :spaceId="spaceId"
-            :apiClient="apiClient"
-            :folder="currentFolder"
-            @success="onNewFolder"
-            @error="$emit('error', $event)"
-          />
-          <UploadFileButton
-            class="bimdata-file-manager__header__upload"
-            width="25%"
-            :disabled="!currentFolder || currentFolder.user_permission < 100"
-            multiple
-            @upload="uploadFiles"
-          />
-        </template>
-        <BIMDataSearch
-          v-if="headerSearch"
-          :color="searchColor"
-          class="bimdata-file-manager__search"
-          width="100%"
-          placeholder="Search"
-          v-model="searchText"
-          ref="search"
-          clear
+        <BIMDataButton
+          color="default"
+          icon
           radius
+          ghost
+          width="33px"
+          height="31px"
+          @click="back"
+        >
+          <BIMDataIcon name="arrow" />
+        </BIMDataButton>
+        <BIMDataTextbox
+          :text="currentFolder.name"
+          cutPosition="middle"
+          tooltipPosition="bottom"
+          tooltipColor="primary"
+          width="calc(100% - 45px)"
         />
       </div>
-      <div class="bimdata-file-manager__navigation">
-        <div
-          v-if="navigationShown"
-          class="bimdata-file-manager__navigation__content"
+      <div v-else class="bimdata-file-manager__navigation__content--empty">
+        {{ translate("dmsRoot") }}
+      </div>
+    </div>
+    <template v-if="fileStructure">
+      <div class="bimdata-file-manager__container" v-if="files.length > 0">
+        <BIMDataResponsiveGrid
+          :itemWidth="itemWidth"
+          rowGap="4px"
+          columnGap="6px"
         >
-          <BIMDataButton
-            color="default"
-            icon
-            radius
-            ghost
-            width="33px"
-            height="31px"
-            @click="back"
-          >
-            <BIMDataIcon name="arrow" />
-          </BIMDataButton>
-          <BIMDataTextbox
-            :text="currentFolder.name"
-            cutPosition="middle"
-            tooltipPosition="bottom"
-            tooltipColor="primary"
-            width="calc(100% - 45px)"
+          <FileCard
+            :width="itemWidth"
+            v-for="file of files"
+            :key="file.id"
+            :file="file"
+            :projectId="projectId"
+            :spaceId="spaceId"
+            :apiUrl="apiUrl"
+            :accessToken="accessToken"
+            @open-folder="openFolder(file)"
+            :select="select"
+            :disabled="isDisabled(file)"
+            :multi="multi"
+            :selected="isFileSelected(file)"
+            :success="isFileSucess(file.id)"
+            @toggle-select="onToggleFileSelect(file)"
+            @rename="onRename(file)"
+            @delete="onDelete(file)"
+            @dowload="onDowload(file)"
+            @loaded="onFileLoaded(file, $event)"
+            :writeAccess="currentFolder.user_permission >= 100"
           />
-        </div>
-        <div v-else class="bimdata-file-manager__navigation__content--empty">
-          {{ translate("dmsRoot") }}
-        </div>
+        </BIMDataResponsiveGrid>
       </div>
-      <template v-if="fileStructure">
-        <div class="bimdata-file-manager__container" v-if="files.length > 0">
-          <BIMDataResponsiveGrid
-            :itemWidth="itemWidth"
-            rowGap="4px"
-            columnGap="6px"
-          >
-            <FileCard
-              :width="itemWidth"
-              v-for="file of files"
-              :key="file.id"
-              :file="file"
-              :projectId="projectId"
-              :spaceId="spaceId"
-              :apiUrl="apiUrl"
-              :accessToken="accessToken"
-              @open-folder="openFolder(file)"
-              :select="select"
-              :disabled="isDisabled(file)"
-              :multi="multi"
-              :selected="isFileSelected(file)"
-              :success="isFileSucess(file.id)"
-              @toggle-select="onToggleFileSelect(file)"
-              @rename="onRename(file)"
-              @delete="onDelete(file)"
-              @dowload="onDowload(file)"
-              @loaded="onFileLoaded(file, $event)"
-              :writeAccess="currentFolder.user_permission >= 100"
-            />
-          </BIMDataResponsiveGrid>
-        </div>
-        <div v-else class="bimdata-file-manager__container--empty">
-          <div>
-            <BIMDataIcon name="folderOpen" size="xxxl" fill color="silver" />
-            <span>{{ translate("emptyFolder") }}</span>
-          </div>
+      <div v-else class="bimdata-file-manager__container--empty">
+        <div>
+          <BIMDataIcon name="folderOpen" size="xxxl" fill color="silver" />
+          <span>{{ translate("emptyFolder") }}</span>
         </div>
-      </template>
-      <BIMDataLoading v-else />
+      </div>
     </template>
+    <BIMDataLoading v-else />
     <div class="bimdata-file-manager__modal" v-if="modalDisplayed">
       <RenameModal
         :projectId="projectId"

diff --git a/...IMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/MultiLineTextBox.vue b/...IMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/MultiLineTextBox.vue
@@ -87,6 +87,8 @@ export default {
   },
   methods: {
     onResize() {
+      if (!this.$refs.ghost) return;
+
       const height = this.lines * this.lineHeight;
       const { height: neededHeight } = this.$refs.ghost.getBoundingClientRect();