[full-ci] Vue 3: Disable compat mode

changelog/unreleased/change-update-vue

@@ -22,3 +22,4 @@ https://github.com/owncloud/web/pull/8282
 https://github.com/owncloud/web/pull/8289
 https://github.com/owncloud/web/pull/8287
 https://github.com/owncloud/web/pull/8285
+https://github.com/owncloud/web/pull/8288

package.json

@@ -32,7 +32,6 @@
     "not OperaMobile > 0"
   ],
   "dependencies": {
-    "@vue/compat": "3.2.45",
     "@vue/compiler-dom": "^3.2.45",
     "@vue/compiler-sfc": "3.2.45",
     "@vue/runtime-dom": "^3.2.45",

packages/design-system/package.json

@@ -50,7 +50,6 @@
     "@babel/preset-env": "^7.14.8",
     "@babel/runtime": "^7.19.4",
     "@popperjs/core": "^2.4.0",
-    "@vue/compat": "3.2.45",
     "autoprefixer": "^10.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.0.2",

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

@@ -12,7 +12,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
     </li>
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <!--v-if-->
-      <oc-button-stub appearance="raw" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
+      <oc-button-stub appearance="raw" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
         <span>Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
@@ -35,13 +35,13 @@ exports[`OcBreadcrumb displays all items 1`] = `
       <span aria-current="page" class="oc-breadcrumb-drop-label-text oc-text-truncate">Deeper ellipsize in responsive mode</span>
       <oc-icon-stub accessiblelabel="Expand more" class="oc-breadcrumb-drop-label-icon" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
     </label>
-    <oc-drop-stub dropid="oc-drop-2" mode="click" paddingsize="medium" position="bottom-start" toggle="">
+    <oc-drop-stub closeonclick="false" dropid="oc-drop-2" isnested="false" mode="click" paddingsize="medium" position="bottom-start" toggle="">
       <ol>
         <li>
           <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
         </li>
         <li>
-          <oc-button-stub appearance="raw" gapsize="medium" justifycontent="left" size="medium" submit="button" type="button" variation="passive">Subfolder</oc-button-stub>
+          <oc-button-stub appearance="raw" disabled="false" gapsize="medium" justifycontent="left" size="medium" submit="button" type="button" variation="passive">Subfolder</oc-button-stub>
         </li>
         <li>
           <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
@@ -64,7 +64,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
     </li>
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <!--v-if-->
-      <oc-button-stub appearance="raw" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
+      <oc-button-stub appearance="raw" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
         <span>Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
@@ -87,13 +87,13 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
       <span aria-current="page" class="oc-breadcrumb-drop-label-text oc-text-truncate">Deeper ellipsize in responsive mode</span>
       <oc-icon-stub accessiblelabel="Expand more" class="oc-breadcrumb-drop-label-icon" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
     </label>
-    <oc-drop-stub dropid="oc-drop-1" mode="click" paddingsize="medium" position="bottom-start" toggle="">
+    <oc-drop-stub closeonclick="false" dropid="oc-drop-1" isnested="false" mode="click" paddingsize="medium" position="bottom-start" toggle="">
       <ol>
         <li>
           <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
         </li>
         <li>
-          <oc-button-stub appearance="raw" gapsize="medium" justifycontent="left" size="medium" submit="button" type="button" variation="passive">Subfolder</oc-button-stub>
+          <oc-button-stub appearance="raw" disabled="false" gapsize="medium" justifycontent="left" size="medium" submit="button" type="button" variation="passive">Subfolder</oc-button-stub>
         </li>
         <li>
           <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>

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

@@ -24,7 +24,6 @@ export default defineComponent({
   name: 'OcCheckbox',
   status: 'ready',
   release: '1.0.0',
-  compatConfig: { MODE: 3 },
   props: {
     /**
      * Id for the checkbox. If it's empty, a generated one will be used.

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

@@ -23,10 +23,6 @@ import 'v-calendar/dist/style.css'
  * Datepicker component based on [v-calendar](https://vcalendar.io/). For detailed documentation, please visit https://vcalendar.io/vue-3.html
  */
 export default defineComponent({
-  compatConfig: {
-    MODE: 3
-  },
-
   name: 'OcDatepicker',
   status: 'ready',
   release: '1.0.0',

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

@@ -2,20 +2,20 @@
 
 exports[`OcModal displays input 1`] = `
 <div aria-labelledby="oc-modal-title" class="oc-modal-background">
-  <focus-trap-stub active="true" allowoutsideclick="true" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
+  <focus-trap-stub active="true" allowoutsideclick="true" clickoutsidedeactivates="false" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" preventscroll="false" returnfocusondeactivate="true" setreturnfocus="false">
     <div aria-modal="true" class="oc-modal oc-modal-passive" role="dialog" tabindex="0">
       <div class="oc-modal-title">
         <!--v-if-->
         <h2 id="oc-modal-title">Create new folder</h2>
       </div>
       <div class="oc-modal-body">
-        <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" type="text"></oc-text-input-stub>
+        <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" type="text"></oc-text-input-stub>
         <!--v-if-->
         <!--v-if-->
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
-          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
           <!--v-if-->
-          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
         </div>
       </div>
     </div>
@@ -25,7 +25,7 @@ exports[`OcModal displays input 1`] = `
 
 exports[`OcModal hides icon if not specified 1`] = `
 <div aria-labelledby="oc-modal-title" class="oc-modal-background">
-  <focus-trap-stub active="true" allowoutsideclick="true" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
+  <focus-trap-stub active="true" allowoutsideclick="true" clickoutsidedeactivates="false" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" preventscroll="false" returnfocusondeactivate="true" setreturnfocus="false">
     <div aria-modal="true" class="oc-modal oc-modal-passive" role="dialog" tabindex="0">
       <div class="oc-modal-title">
         <!--v-if-->
@@ -36,9 +36,9 @@ exports[`OcModal hides icon if not specified 1`] = `
         <!--v-if-->
         <!--v-if-->
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
-          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
           <!--v-if-->
-          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
         </div>
       </div>
     </div>
@@ -48,7 +48,7 @@ exports[`OcModal hides icon if not specified 1`] = `
 
 exports[`OcModal matches snapshot 1`] = `
 <div aria-labelledby="oc-modal-title" class="oc-modal-background">
-  <focus-trap-stub active="true" allowoutsideclick="true" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
+  <focus-trap-stub active="true" allowoutsideclick="true" clickoutsidedeactivates="false" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" preventscroll="false" returnfocusondeactivate="true" setreturnfocus="false">
     <div aria-modal="true" class="oc-modal oc-modal-passive" role="dialog" tabindex="0">
       <div class="oc-modal-title">
         <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="info" size="medium" type="span" variation="passive"></oc-icon-stub>
@@ -59,9 +59,9 @@ exports[`OcModal matches snapshot 1`] = `
         <!--v-if-->
         <!--v-if-->
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
-          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
           <!--v-if-->
-          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
         </div>
       </div>
     </div>
@@ -71,7 +71,7 @@ exports[`OcModal matches snapshot 1`] = `
 
 exports[`OcModal overrides props message with slot 1`] = `
 <div aria-labelledby="oc-modal-title" class="oc-modal-background">
-  <focus-trap-stub active="true" allowoutsideclick="true" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
+  <focus-trap-stub active="true" allowoutsideclick="true" clickoutsidedeactivates="false" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" preventscroll="false" returnfocusondeactivate="true" setreturnfocus="false">
     <div aria-modal="true" class="oc-modal oc-modal-passive" role="dialog" tabindex="0">
       <div class="oc-modal-title">
         <!--v-if-->
@@ -84,9 +84,9 @@ exports[`OcModal overrides props message with slot 1`] = `
         <!--v-if-->
         <!--v-if-->
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
-          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
           <!--v-if-->
-          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
         </div>
       </div>
     </div>

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

@@ -26,7 +26,6 @@ export default defineComponent({
   name: 'OcRadio',
   status: 'ready',
   release: '1.0.0',
-  compatConfig: { MODE: 3 },
   props: {
     /**
      * Id for the radio. If it's empty, a generated one will be used.

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

@@ -93,7 +93,7 @@ describe('OcSearchBar', () => {
       })
       it('should enable search button', async () => {
         await wrapper.find(selectors.searchInput).setValue('a') // search query should also be not null
-        expect(wrapper.find(selectors.searchButton).attributes('disabled')).toBe(undefined)
+        expect(wrapper.find(selectors.searchButton).attributes('disabled')).toBe('false')
       })
     })
   })

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

@@ -41,7 +41,6 @@ export default defineComponent({
   name: 'OcSelect',
   status: 'ready',
   release: '4.3.0',
-  compatConfig: { MODE: 3 },
   components: { VueSelect },
 
   inheritAttrs: true,

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

@@ -69,9 +69,6 @@ export default defineComponent({
   status: 'ready',
   release: '1.0.0',
   inheritAttrs: false,
-  compatConfig: {
-    COMPONENT_V_MODEL: false
-  },
   props: {
     /**
      * The ID of the element.

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

@@ -10,7 +10,7 @@ exports[`OcTile component renders default space correctly 1`] = `
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
       <div class="oc-flex oc-flex-middle oc-text-truncate">
-        <oc-resource-stub isextensiondisplayed="true" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
+        <oc-resource-stub isextensiondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
@@ -24,15 +24,15 @@ exports[`OcTile component renders default space correctly 1`] = `
 exports[`OcTile component renders disabled space correctly 1`] = `
 <div class="oc-tile-card oc-card oc-card-default oc-rounded state-trashed">
   <oc-resource-link-stub class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle" isresourceclickable="true" resource="[object Object]">
-    <oc-tag-stub class="resource-disabled-indicator oc-position-absolute" size="medium" type="span">
+    <oc-tag-stub class="resource-disabled-indicator oc-position-absolute" rounded="false" size="medium" type="span">
       <span>Disabled</span>
     </oc-tag-stub> <!-- Slot for resource image, renders resource type icon by default -->
     <oc-resource-icon-stub class="tile-default-image oc-p-m" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
       <div class="oc-flex oc-flex-middle oc-text-truncate">
-        <oc-resource-stub isextensiondisplayed="true" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
+        <oc-resource-stub isextensiondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->

packages/tsconfig/tsconfig.json

@@ -84,12 +84,6 @@
     "node_modules"
   ],
   "vueCompilerOptions": {
-    "experimentalCompatMode": 2,
-    "experimentalTemplateCompilerOptions": {
-      "compatConfig": {
-        "MODE": 2
-      } // optional
-    },
-    "target": 2.7
+    "target": 3
   }
 }

packages/web-app-admin-settings/src/views/Users.vue

@@ -264,8 +264,7 @@ export default defineComponent({
           component: EditPanel,
           default: false,
           enabled: this.selectedUsers.length === 1,
-          componentAttrs: { user: this.loadedUser, roles: this.roles },
-          componentListeners: { confirm: this.editUser }
+          componentAttrs: { user: this.loadedUser, roles: this.roles, confirm: this.editUser }
         },
         {
           app: 'GroupAssignmentsPanel',
@@ -274,8 +273,11 @@ export default defineComponent({
           component: GroupAssignmentsPanel,
           default: false,
           enabled: this.selectedUsers.length === 1,
-          componentAttrs: { user: this.loadedUser, groups: this.groups },
-          componentListeners: { confirm: this.editUserGroupAssignments }
+          componentAttrs: {
+            user: this.loadedUser,
+            groups: this.groups,
+            confirm: this.editUserGroupAssignments
+          }
         }
       ].filter((p) => p.enabled)
     }

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

@@ -2,7 +2,7 @@
 
 exports[`MembersPanel should display an empty result if no matching members found 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" id="oc-textinput-3" label="Filter members" modelvalue="no-match" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" type="text"></oc-text-input-stub>
   <div>
     <div>
       <h3 class="oc-text-bold oc-text-medium">No members found</h3>
@@ -16,7 +16,7 @@ exports[`MembersPanel should display an empty result if no matching members foun
 
 exports[`MembersPanel should render all members accordingly to their role assignments 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" id="oc-textinput-1" label="Filter members" modelvalue="" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" type="text"></oc-text-input-stub>
   <div>
     <!--v-if-->
     <div class="oc-mb-m">