owncloud · kulmann · Jan 23, 2023 · Jan 20, 2023 · Jan 20, 2023 · Jan 20, 2023
diff --git a/changelog/unreleased/change-update-vue b/changelog/unreleased/change-update-vue
@@ -19,3 +19,6 @@ https://github.com/owncloud/web/pull/8256
 https://github.com/owncloud/web/pull/8257
 https://github.com/owncloud/web/pull/8258
 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
diff --git a/package.json b/package.json
@@ -85,8 +85,6 @@
     "ejs": "3.1.8",
     "eslint": "8.31.0",
     "flush-promises": "1.0.2",
-    "focus-trap": "6.9.4",
-    "focus-trap-vue": "1.1.1",
     "git-repo-info": "2.1.1",
     "jest": "29.3.1",
     "jest-axe": "5.0.1",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -65,8 +65,8 @@
     "depcheck": "^1.3.1",
     "file-loader": "^6.2.0",
     "filesize": "^9.0.11",
-    "focus-trap": "^6.4.0",
-    "focus-trap-vue": "^1.1.1",
+    "focus-trap": "^7.2.0",
+    "focus-trap-vue": "^4.0.1",
     "fuse.js": "^6.4.6",
     "glob": "^8.0.3",
     "html-loader": "^1.3.2",
@@ -126,8 +126,8 @@
   "peerDependencies": {
     "@popperjs/core": "^2.4.0",
     "filesize": "^9.0.11",
-    "focus-trap": "^6.4.0",
-    "focus-trap-vue": "^1.1.1",
+    "focus-trap": "^7.2.0",
+    "focus-trap-vue": "^4.0.1",
     "fuse.js": "^6.4.6",
     "luxon": "^3.0.1",
     "postcss-import": "^12.0.1",

diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -4,7 +4,6 @@
     v-bind="additionalAttributes"
     :aria-label="ariaLabel"
     :class="$_ocButton_buttonClass"
-    :disabled="disabled"
     v-on="handlers"
   >
     <!-- @slot Content of the button -->
@@ -159,7 +158,8 @@ export default defineComponent({
         ...(this.href && { href: this.href }),
         ...(this.target && { target: this.target }),
         ...(this.to && { to: this.to }),
-        ...(this.type === 'button' && { type: this.submit })
+        ...(this.type === 'button' && { type: this.submit }),
+        ...(this.type === 'button' && { disabled: this.disabled })
       }
     },
 

diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.spec.ts b/packages/design-system/src/components/OcCheckbox/OcCheckbox.spec.ts
@@ -59,7 +59,7 @@ describe('OcCheckbox', () => {
       const checkbox = wrapper.find(checkboxSelector)
       expect((checkbox.element as any).checked).toBeFalsy()
       await checkbox.setValue(true)
-      expect(wrapper.emitted('input')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
       expect((checkbox.element as any).checked).toBeTruthy()
     })
   })

diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -24,6 +24,7 @@ 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.
@@ -47,7 +48,7 @@ export default defineComponent({
      * Can be any type, but most common is boolean for singular checkbox use, or array when used in a group of checkboxes.
      **/
     // eslint-disable-next-line vue/require-prop-types
-    value: {
+    modelValue: {
       required: false,
       default: false
     },
@@ -99,14 +100,14 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['click'],
+  emits: ['click', 'update:modelValue'],
   computed: {
     model: {
       get() {
-        return this.value
+        return this.modelValue
       },
       set: function (value) {
-        this.$emit('input', value)
+        this.$emit('update:modelValue', value)
         this.setChecked(value)
       }
     },

diff --git a/packages/design-system/src/components/OcImage/OcImage.spec.ts b/packages/design-system/src/components/OcImage/OcImage.spec.ts
@@ -33,12 +33,12 @@ describe('OcImage', () => {
     it('should set the provided alt for image', () => {
       expect(wrapper.attributes('alt')).toBe('test alt text')
     })
-    it('should disable aria hidden property', () => {
-      expect(wrapper.attributes('aria-hidden')).toBe(undefined)
+    it('should set aria hidden property to "false"', () => {
+      expect(wrapper.attributes('aria-hidden')).toBe('false')
     })
   })
   describe('when alt is not set', () => {
-    it('should disable aria hidden property', () => {
+    it('should set aria hidden property to "true"', () => {
       const wrapper = getWrapper()
       expect(wrapper.attributes('aria-hidden')).toBe('true')
     })

diff --git a/packages/design-system/src/components/OcImage/OcImage.vue b/packages/design-system/src/components/OcImage/OcImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <img :src="src" :alt="alt" :aria-hidden="!alt" :title="title" :loading="loadingType" />
+  <img :src="src" :alt="alt" :aria-hidden="`${!alt}`" :title="title" :loading="loadingType" />
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -30,7 +30,7 @@
             :disabled="inputDisabled"
             :fix-message-line="true"
             :selection-range="inputSelectionRange"
-            @input="inputOnInput"
+            @update:modelValue="inputOnInput"
             @keydown.enter.prevent="confirm"
           />
           <p v-else key="modal-message" class="oc-modal-body-message" v-text="message" />
@@ -334,6 +334,7 @@ export default defineComponent({
       default: null
     }
   },
+  emits: ['cancel', 'confirm', 'confirm-secondary', 'input', 'checkbox-changed'],
   data() {
     return {
       userInputValue: null,

diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -2,14 +2,14 @@
 
 exports[`OcModal displays input 1`] = `
 <div aria-labelledby="oc-modal-title" class="oc-modal-background">
-  <focus-trap-stub active="true" allowoutsideclick="true" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
+  <focus-trap-stub active="true" allowoutsideclick="true" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
     <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" type="text" value="New folder"></oc-text-input-stub>
+        <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>
         <!--v-if-->
         <!--v-if-->
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
@@ -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" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
+  <focus-trap-stub active="true" allowoutsideclick="true" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
     <div aria-modal="true" class="oc-modal oc-modal-passive" role="dialog" tabindex="0">
       <div class="oc-modal-title">
         <!--v-if-->
@@ -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" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
+  <focus-trap-stub active="true" allowoutsideclick="true" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
     <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>
@@ -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" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
+  <focus-trap-stub active="true" allowoutsideclick="true" delayinitialfocus="true" escapedeactivates="true" initialfocus="[Function]" returnfocusondeactivate="true">
     <div aria-modal="true" class="oc-modal oc-modal-passive" role="dialog" tabindex="0">
       <div class="oc-modal-title">
         <!--v-if-->

diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -73,6 +73,7 @@ export default defineComponent({
       validator: (value) => value > 0
     }
   },
+  emits: ['close'],
   computed: {
     classes() {
       return `oc-notification-message-${this.status}`

diff --git a/packages/design-system/src/components/OcRadio/OcRadio.spec.ts b/packages/design-system/src/components/OcRadio/OcRadio.spec.ts
@@ -75,18 +75,18 @@ describe('OcRadio', () => {
     it('should emit input event if checked', async () => {
       const wrapper = getWrapper()
       const radioInput = wrapper.find(radioElementSelector)
-      expect(wrapper.emitted('input')).toBeFalsy()
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
       await radioInput.setValue(true)
       expect((radioInput.element as any).checked).toBeTruthy()
-      expect(wrapper.emitted('input')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
     })
     it('should not emit input event if disabled', async () => {
       const wrapper = getWrapper({ disabled: true })
       const radioInput = wrapper.find(radioElementSelector)
-      expect(wrapper.emitted('input')).toBeFalsy()
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
       await radioInput.trigger('click')
       expect((radioInput.element as any).checked).toBeFalsy()
-      expect(wrapper.emitted('input')).toBeFalsy()
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
     })
   })
   describe('input options', () => {

diff --git a/packages/design-system/src/components/OcRadio/OcRadio.vue b/packages/design-system/src/components/OcRadio/OcRadio.vue
@@ -6,7 +6,7 @@
       type="radio"
       name="radio"
       :class="classes"
-      :aria-checked="(option === value).toString()"
+      :aria-checked="(option === modelValue).toString()"
       :value="option"
       :disabled="disabled"
     />
@@ -26,6 +26,7 @@ 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.
@@ -51,7 +52,7 @@ export default defineComponent({
      * Can be any type.
      **/
     // eslint-disable-next-line vue/require-prop-types
-    value: {
+    modelValue: {
       required: false,
       default: false
     },
@@ -94,13 +95,14 @@ export default defineComponent({
       validator: (size) => /(small|medium|large)/.test(size)
     }
   },
+  emits: ['update:modelValue'],
   computed: {
     model: {
       get() {
-        return this.value
+        return this.modelValue
       },
       set(value) {
-        this.$emit('input', value)
+        this.$emit('update:modelValue', value)
       }
     },
     classes() {

diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -5,6 +5,9 @@
       ref="select"
       :disabled="disabled"
       :filter="filter"
+      :loading="loading"
+      :searchable="searchable"
+      :clearable="clearable"
       class="oc-select"
       style="background: transparent"
       v-bind="additionalAttributes"
@@ -38,8 +41,7 @@ export default defineComponent({
   name: 'OcSelect',
   status: 'ready',
   release: '4.3.0',
-
-  compatConfig: { COMPONENT_V_MODEL: false },
+  compatConfig: { MODE: 3 },
   components: { VueSelect },
 
   inheritAttrs: true,
@@ -100,9 +102,33 @@ export default defineComponent({
     optionLabel: {
       type: String,
       default: null
+    },
+    /**
+     * Determines if the select field is searchable
+     */
+    searchable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * Determines if the select field is clearable
+     */
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Determines if the select field loading
+     */
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['search:input', 'update:modelValue'],
 
   computed: {
     additionalAttributes() {

diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.spec.ts b/packages/design-system/src/components/OcSwitch/OcSwitch.spec.ts
@@ -14,10 +14,10 @@ describe('OcSwitch', () => {
 
     await wrapper.find('[data-testid="oc-switch-btn"]').trigger('click')
 
-    expect(wrapper.emitted().change[0][0]).toEqual(true)
+    expect(wrapper.emitted('update:checked')[0][0]).toEqual(true)
 
     await wrapper.find('[data-testid="oc-switch-btn"]').trigger('click')
 
-    expect(wrapper.emitted().change[0][0]).toEqual(true)
+    expect(wrapper.emitted('update:checked')[0][0]).toEqual(true)
   })
 })
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -24,10 +24,6 @@ export default defineComponent({
   name: 'OcSwitch',
   status: 'ready',
   release: '1.0.0',
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
   props: {
     /**
      * Value of the switch
@@ -57,15 +53,15 @@ export default defineComponent({
       default: () => uniqueId('oc-switch-label-')
     }
   },
-
+  emits: ['update:checked'],
   methods: {
     toggle() {
       /**
        * Change event
-       * @event change
+       * @event update:checked
        * @type {boolean}
        */
-      this.$emit('change', !this.checked)
+      this.$emit('update:checked', !this.checked)
     }
   }
 })

diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -253,6 +253,7 @@ export default defineComponent({
   },
   emits: [
     EVENT_ITEM_DROPPED,
+    EVENT_ITEM_DRAGGED,
     EVENT_THEAD_CLICKED,
     EVENT_TROW_CLICKED,
     EVENT_TROW_MOUNTED,

diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -58,6 +58,8 @@ export default defineComponent({
     }
   },
 
+  emits: ['click'],
+
   computed: {
     $_ocTag_class() {
       const classes = ['oc-tag', `oc-tag-${getSizeClass(this.size)}`]
@@ -73,7 +75,6 @@ export default defineComponent({
       return classes
     }
   },
-
   methods: {
     $_ocTag_click(event) {
       /**