refactor!: port vue-portal to teleport or extension system

README.md

@@ -56,7 +56,7 @@ The repository's `packages` also contains the following apps, which can be en-/d
 - **ocm:** Open Cloud Mesh integration to allow for collaboration across OpenCloud instances
 - **pdf-viewer:** An extension for opening PDF files without leaving the UI
 - **preview:** An extension for opening audio, video and image files
-- **search:** An extension for registering search providers, which then get rendered into the layout in the **runtime** using a portal
+- **search:** An extension for registering search providers, which then get rendered into the layout in the **runtime** using an extension point
 - **text-editor:** An extension for creating, opening and editing plain text files, like e.g. `.md` or `.txt`
 - **webfinger:** Redirect app for the OpenCloud webfinger service
 

package.json

@@ -106,8 +106,7 @@
   "pnpm": {
     "patchedDependencies": {
       "caf@15.0.1": "patches/caf@15.0.1.patch",
-      "vue3-gettext@2.4.0": "patches/vue3-gettext@2.4.0.patch",
-      "portal-vue@3.0.0": "patches/portal-vue@3.0.0.patch"
+      "vue3-gettext@2.4.0": "patches/vue3-gettext@2.4.0.patch"
     }
   }
 }

packages/design-system/docs/.vitepress/theme/index.ts

@@ -1,6 +1,5 @@
 import './tailwind.css'
 import DefaultTheme from 'vitepress/theme-without-fonts'
-import PortalVue from 'portal-vue'
 import './../../../src/styles/layers.css'
 import { createGettext } from 'vue3-gettext'
 import { createPinia } from 'pinia'
@@ -17,7 +16,6 @@ export default {
     const pinia = createPinia()
     app.use(gettext)
     app.use(pinia)
-    app.use(PortalVue)
 
     app.component('LiveCodeBlock', LiveCodeBlock)
     app.component('ComponentApi', ComponentApi)

packages/design-system/docs/components/OcDrop/OcDrop.md

@@ -52,7 +52,7 @@ The following example shows how to use the component to display action items.
 
 ### Mobile
 
-The mobile version of the drop uses a bottom drawer to display its content. It requires a portal to `app.runtime.bottom.drawer` to be set up in your application layout.
+The mobile version of the drop uses a bottom drawer to display its content. It requires a div with the id `app-runtime-bottom-drawer` to be set up in your application layout.
 
 You can specify a title for the bottom drawer using the `title` prop.
 

packages/design-system/docs/components/OcDrop/mobile.vue

@@ -1,10 +1,7 @@
 <template>
-  <portal-target name="app.runtime.bottom.drawer" />
+  <div id="app-runtime-bottom-drawer" />
   <oc-button id="drop-btn-mobile">Open drop</oc-button>
   <oc-drop toggle="#drop-btn-mobile" title="Mobile drop title" mode="click" padding-size="medium">
     Some content.
   </oc-drop>
 </template>
-<script setup lang="ts">
-import { PortalTarget } from 'portal-vue'
-</script>

packages/design-system/package.json

@@ -110,7 +110,6 @@
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
     "luxon": "^3.5.0",
-    "portal-vue": "^3.0.0",
     "tippy.js": "^6.3.7",
     "vue-inline-svg": "^4.0.0",
     "vue-router": "^5.0.0",

packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap

@@ -5,12 +5,12 @@ exports[`OcDatePicker > renders 1`] = `
     <!--v-if-->
   </label>
   <div class="relative">
-    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input" type="date" teleport-id="v-0" value="">
     <!--v-if-->
   </div>
   <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
     <!--v-if-->
   </div>
-  <!--v-if-->
+  <div id="v-0"></div>
 </div>"
 `;

packages/design-system/src/components/OcDrop/OcMobileDrop.spec.ts

@@ -143,7 +143,7 @@ const getWrapper = (props = { closeOnClick: false }) => {
         ...props
       },
       attachTo: document.body,
-      global: { renderStubDefaultSlot: true, plugins }
+      global: { renderStubDefaultSlot: true, plugins, stubs: { Teleport: true } }
     })
   }
 }

packages/design-system/src/components/OcDrop/OcMobileDrop.vue

@@ -1,5 +1,5 @@
 <template>
-  <portal v-if="isActive" to="app.runtime.bottom.drawer">
+  <teleport v-if="isActive" to="#app-runtime-bottom-drawer">
     <oc-bottom-drawer
       :id="drawerId"
       :is-drawer-active="isCurrentlyOnTop"
@@ -36,7 +36,7 @@
         </div>
       </oc-card>
     </oc-bottom-drawer>
-  </portal>
+  </teleport>
 </template>
 
 <script setup lang="ts">

packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts

@@ -8,10 +8,6 @@ import OcTextInput from './OcTextInput.vue'
 import { PasswordPolicy } from '../../helpers'
 import { mock } from 'vitest-mock-extended'
 
-vi.mock('portal-vue', () => ({
-  PortalTarget: undefined
-}))
-
 vi.mock('lodash-es', () => ({
   debounce: (fn: any) => fn,
   kebabCase: (str: string) => str
@@ -65,7 +61,8 @@ describe('OcTextInput', () => {
         ...options.props
       },
       global: {
-        plugins: [...defaultPlugins()]
+        plugins: [...defaultPlugins()],
+        stubs: { Teleport: true }
       }
     })
   }

packages/design-system/src/components/OcTextInput/OcTextInput.vue

@@ -28,6 +28,7 @@
         :type="type"
         :value="modelValue"
         :disabled="disabled || readOnly"
+        :teleport-id="teleportId"
         v-on="additionalListeners"
         @change="onChange(($event.target as HTMLInputElement).value)"
         @input="onInput(($event.target as HTMLInputElement).value)"
@@ -78,17 +79,16 @@
         v-text="descriptionMessage"
       />
     </div>
-    <portal-target v-if="type === 'password'" name="app.design-system.password-policy" />
+    <div :id="teleportId" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, unref, useAttrs, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, ref, unref, useAttrs, useId, useTemplateRef, watch } from 'vue'
 import { PasswordPolicy, uniqueId } from '../../helpers'
 import OcButton from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcTextInputPassword from '../OcTextInputPassword/OcTextInputPassword.vue'
-import { PortalTarget } from 'portal-vue'
 import { debounce } from 'lodash-es'
 
 defineOptions({
@@ -242,6 +242,8 @@ const {
 const emit = defineEmits<Emits>()
 defineSlots<Slots>()
 
+const teleportId = useId()
+
 const showErrorMessage = ref(false)
 const showDescriptionMessage = computed(() => {
   return !!descriptionMessage

packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap

@@ -31,7 +31,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
       </button>
       <!--v-if-->
     </div>
-    <portal to="app.design-system.password-policy">
+    <teleport-stub defer="" to="#v-0">
       <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
         <div class="flex items-center oc-text-input-password-policy-rule"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 mr-1"><svg data-testid="inline-svg-stub" src="icons/close-circle-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -45,11 +45,11 @@ exports[`OcTextInput > password input field > password policy > displays error s
           <!--v-if-->
         </div>
       </div>
-    </portal>
+    </teleport-stub>
     <!--v-if-->
   </div>
   <!--v-if-->
-  <!---->
+  <div id="v-0"></div>
 </div>"
 `;
 
@@ -84,7 +84,7 @@ exports[`OcTextInput > password input field > password policy > displays success
       </button>
       <!--v-if-->
     </div>
-    <portal to="app.design-system.password-policy">
+    <teleport-stub defer="" to="#v-0">
       <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
         <div class="flex items-center oc-text-input-password-policy-rule"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 mr-1"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -98,10 +98,10 @@ exports[`OcTextInput > password input field > password policy > displays success
           <!--v-if-->
         </div>
       </div>
-    </portal>
+    </teleport-stub>
     <!--v-if-->
   </div>
   <!--v-if-->
-  <!---->
+  <div id="v-0"></div>
 </div>"
 `;

packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue

@@ -52,7 +52,7 @@
       <oc-icon size="small" name="refresh" fill-type="line" />
     </oc-button>
   </div>
-  <portal v-if="showPasswordPolicyInformation" to="app.design-system.password-policy">
+  <teleport v-if="showPasswordPolicyInformation" defer :to="`#${teleportId}`">
     <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
       <div
         v-for="(testedRule, index) in testedPasswordPolicy.rules"
@@ -76,7 +76,7 @@
         />
       </div>
     </div>
-  </portal>
+  </teleport>
 </template>
 
 <script setup lang="ts">
@@ -91,6 +91,7 @@ export interface Props {
   generatePasswordMethod?: (...args: unknown[]) => string
   hasError?: boolean
   passwordPolicy?: PasswordPolicy
+  teleportId?: string
   value?: string
 }
 
@@ -99,7 +100,8 @@ const {
   generatePasswordMethod,
   hasError = false,
   passwordPolicy,
-  value = ''
+  value = '',
+  teleportId = ''
 } = defineProps<Props>()
 
 const emit = defineEmits([

packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap

@@ -6,11 +6,11 @@ exports[`MembersPanel > should display an empty result if no matching members fo
       <!--v-if-->
     </label>
     <div class="relative">
-      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input" type="text" value="no-match">
+      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input" type="text" teleport-id="v-0" value="no-match">
       <!--v-if-->
     </div>
     <!--v-if-->
-    <!--v-if-->
+    <div id="v-0"></div>
   </div>
   <div data-testid="space-members">
     <div>
@@ -36,11 +36,11 @@ exports[`MembersPanel > should render all members accordingly to their role assi
       <!--v-if-->
     </label>
     <div class="relative">
-      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input" type="text" value="">
+      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input" type="text" teleport-id="v-0" value="">
       <!--v-if-->
     </div>
     <!--v-if-->
-    <!--v-if-->
+    <div id="v-0"></div>
   </div>
   <div data-testid="space-members">
     <!--v-if-->

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -7,11 +7,11 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <!--v-if-->
       </label>
       <div class="relative">
-        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text" value="">
+        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text" teleport-id="v-0" value="">
         <!--v-if-->
       </div>
       <!--v-if-->
-      <!--v-if-->
+      <div id="v-0"></div>
     </div>
   </div>
   <table data-v-3c9ab66c="" class="oc-table oc-table-hover oc-table-sticky has-item-context-menu settings-spaces-table">

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap

@@ -40,11 +40,11 @@ exports[`Users view > list view > renders initially warning if filters are manda
                   <!--v-if-->
                 </label>
                 <div class="relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text" teleport-id="v-0">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
-                <!--v-if-->
+                <div id="v-0"></div>
               </div>
               <oc-button-stub arialabel="Search users" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="users-filter-confirm" class="ml-1 p-1 mt-5"></oc-button-stub>
             </div>
@@ -100,11 +100,11 @@ exports[`Users view > list view > renders list initially 1`] = `
                   <!--v-if-->
                 </label>
                 <div class="relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text" teleport-id="v-0">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
-                <!--v-if-->
+                <div id="v-0"></div>
               </div>
               <oc-button-stub arialabel="Search users" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="users-filter-confirm" class="ml-1 p-1 mt-5"></oc-button-stub>
             </div>

packages/web-app-files/src/components/FilesViewWrapper.vue

@@ -7,23 +7,16 @@
     </div>
   </div>
 
-  <portal v-if="isEmbedModeEnabled" to="app.runtime.footer">
+  <teleport v-if="isEmbedModeEnabled" to="#app-runtime-footer">
     <embed-actions />
-  </portal>
+  </teleport>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useEmbedMode } from '@opencloud-eu/web-pkg'
 import EmbedActions from './EmbedActions/EmbedActions.vue'
 
-export default defineComponent({
-  components: { EmbedActions },
-  inheritAttrs: false,
-  setup() {
-    const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
+defineOptions({ inheritAttrs: false })
 
-    return { isEmbedModeEnabled }
-  }
-})
+const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
 </script>

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -102,11 +102,7 @@
             </oc-button>
           </dd>
         </template>
-        <portal-target
-          name="app.files.sidebar.file.details.table"
-          :slot-props="{ space, resource }"
-          :multiple="true"
-        />
+        <custom-component-target :extension-point="fileSideBarFileDetailsTableExtensionPoint" />
         <template v-if="hasTags">
           <dt>
             {{ $gettext('Tags') }}
@@ -157,7 +153,8 @@ import { ResourceIcon } from '@opencloud-eu/web-pkg'
 import { tagsHelper } from '../../../helpers/contextualHelpers'
 import { ContextualHelper } from '@opencloud-eu/design-system/helpers'
 import TagsSelect from './TagsSelect.vue'
-import { WebDavDetails } from '@opencloud-eu/web-pkg'
+import { WebDavDetails, CustomComponentTarget } from '@opencloud-eu/web-pkg'
+import { fileSideBarFileDetailsTableExtensionPoint } from '../../../extensionPoints'
 
 const { previewEnabled = true, tagsEnabled = true } = defineProps<{
   previewEnabled?: boolean