refactor(components): use composition API and teleport for side-panel…

… generic component

public/index.html

@@ -15,5 +15,7 @@
       </strong>
     </noscript>
     <div id="app"></div>
+    <div id="side-panel-container"></div>
+    <div id="notification-container"></div>
   </body>
 </html>

src/components/generic/side-panel/SidePanel.scss

@@ -1,16 +1,12 @@
 .side-panel {
-  $title-height: 44px;
-
-  position: fixed;
-  z-index: 200;
-  top: 0;
-  right: 0;
   width: 400px;
   height: 100vh;
   padding: $spacing-unit;
   box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.1);
   background-color: $color-white;
 
+  $title-height: 44px;
+
   &__title {
     display: flex;
     justify-content: space-between;

src/components/generic/side-panel/SidePanel.vue

@@ -1,18 +1,23 @@
 <template>
-  <div class="side-panel">
-    <div class="side-panel__title">
-      <span>{{ title }}</span>
-      <BIMDataButton ghost rounded icon @click="$emit('close')">
-        <BIMDataIcon name="close" size="xxxs" />
-      </BIMDataButton>
-    </div>
-    <div class="side-panel__content">
-      <slot></slot>
-    </div>
-  </div>
+  <teleport to="#side-panel-container">
+    <transition name="slide-fade-right">
+      <div class="side-panel" v-show="showSidePanelOpen">
+        <div class="side-panel__title">
+          <span>{{ title }}</span>
+          <BIMDataButton ghost rounded icon @click="closeSidePanel">
+            <BIMDataIcon name="close" size="xxxs" />
+          </BIMDataButton>
+        </div>
+        <div class="side-panel__content">
+          <slot></slot>
+        </div>
+      </div>
+    </transition>
+  </teleport>
 </template>
 
 <script>
+import { useSidePanel } from "@/composables/side-panel";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
@@ -28,7 +33,14 @@ export default {
       default: ""
     }
   },
-  emits: ["close"]
+  setup() {
+    const { showSidePanelOpen, closeSidePanel } = useSidePanel();
+
+    return {
+      showSidePanelOpen,
+      closeSidePanel
+    };
+  }
 };
 </script>
 

src/composables/side-panel.js

@@ -0,0 +1,11 @@
+import { useToggle } from "./toggle";
+
+const { isOpen, open, close } = useToggle();
+
+export function useSidePanel() {
+  return {
+    showSidePanelOpen: isOpen,
+    openSidePanel: open,
+    closeSidePanel: close
+  };
+}

src/composables/toggle.js

@@ -0,0 +1,16 @@
+import { ref } from "vue";
+
+export function useToggle() {
+  const isOpen = ref(false);
+
+  const open = () => isOpen.value = true;
+  const close = () => isOpen.value = false;
+  const toggle = () => isOpen.value = !isOpen.value;
+
+  return {
+    isOpen,
+    open,
+    close,
+    toggle
+  }
+};

src/styles/global.scss

@@ -13,5 +13,19 @@ html {
   body {
     margin: 0;
     padding: 0;
+
+    #side-panel-container {
+      position: fixed;
+      z-index: 200;
+      top: 0;
+      right: 0;
+    }
+
+    #notification-container {
+      position: fixed;
+      z-index: 300;
+      top: 0;
+      right: 0;
+    }
   }
 }

src/views/space-board/SpaceBoard.vue

@@ -48,19 +48,13 @@
       </template>
     </ViewHeader>
 
-    <transition name="fade">
-      <SidePanel
-        v-show="showUsersManager"
-        :title="$t('SpaceUsersManager.title')"
-        @close="closeUsersManager"
-      >
-        <SpaceUsersManager
-          :space="space"
-          :users="users"
-          :invitations="invitations"
-        />
-      </SidePanel>
-    </transition>
+    <SidePanel :title="$t('SpaceUsersManager.title')">
+      <SpaceUsersManager
+        :space="space"
+        :users="users"
+        :invitations="invitations"
+      />
+    </SidePanel>
 
     <ResponsiveGrid itemWidth="320px">
       <ProjectCreationCard
@@ -81,6 +75,7 @@
 
 <script>
 import { ref, watchEffect } from "vue";
+import { useSidePanel } from "@/composables/side-panel";
 import { useProjects } from "@/state/projects";
 import { useSpaces } from "@/state/spaces";
 // Components
@@ -111,6 +106,7 @@ export default {
   setup() {
     const { currentSpace, spaceUsers, spaceInvitations } = useSpaces();
     const { spaceProjects } = useProjects();
+    const { openSidePanel } = useSidePanel();
 
     const displayedProjects = ref([]);
     watchEffect(() => (displayedProjects.value = spaceProjects.value));
@@ -137,26 +133,16 @@ export default {
         .sort((a, b) => (a.name < b.name ? -1 : 1) * n);
     };
 
-    const showUsersManager = ref(false);
-    const openUsersManager = () => {
-      showUsersManager.value = true;
-    };
-    const closeUsersManager = () => {
-      showUsersManager.value = false;
-    };
-
     return {
       // References
       invitations: spaceInvitations,
       projects: displayedProjects,
       searchText,
-      showUsersManager,
       space: currentSpace,
       users: spaceUsers,
       // Methods
-      closeUsersManager,
       filterProjects,
-      openUsersManager,
+      openUsersManager: openSidePanel,
       sortProjects
     };
   }