enabled multiple highlighting

changelog/unreleased/change-enable-multiple-highlighting

@@ -0,0 +1,7 @@
+Change: Enable multiple highlighting for OcTableFiles
+
+We changed the highlighting in a way that now every selected file
+is highlighted automatically. The `highlighted` prop has been removed as it's not used anymore. 
+
+https://github.com/owncloud/web/issues/5164
+https://github.com/owncloud/owncloud-design-system/pull/1568

src/components/table/OcTableFiles.vue

@@ -2,7 +2,7 @@
   <oc-table
     :data="resources"
     :fields="fields"
-    :highlighted="highlighted"
+    :highlighted="selectedIds"
     :disabled="disabled"
     :sticky="true"
     :header-position="headerPosition"
@@ -197,14 +197,6 @@ export default {
       required: false,
       default: true,
     },
-    /**
-     * The ids of highlighted resources. Null or an empty string/array for no highlighting.
-     */
-    highlighted: {
-      type: [String, Array],
-      required: false,
-      default: null,
-    },
     /**
      * Target route path used to build the link when navigating into a resource
      */
@@ -379,11 +371,15 @@ export default {
     areAllResourcesSelected() {
       return this.selection.length === this.resources.length
     },
+
+    selectedIds() {
+      return this.selectedResources.map(r => r.id)
+    },
   },
   methods: {
     fileDragged(file) {
       const selectedResourceInResources = this.selectedResources.some(e => e.id === file.id)
-      if (selectedResourceInResources) {
+      if (!selectedResourceInResources) {
         this.selectedResources.push(file)
       }
       this.$emit("select", this.selectedResources)
@@ -565,8 +561,8 @@ export default {
 ```js
 <template>
   <div>
-    <oc-table-files :resources="resources" :highlighted="highlighted" disabled="notes" v-model="selected" class="oc-mb"
-                    @showDetails="highlightResource" @action="handleAction" @fileDropped="fileDropped" :drag-drop="true">
+    <oc-table-files :resources="resources" disabled="notes" v-model="selected" class="oc-mb"
+                    @action="handleAction" @fileDropped="fileDropped" :drag-drop="true">
       <template v-slot:quickActions="props">
         <oc-button @click.stop variation="passive" appearance="raw" aria-label="Share with other people">
           <oc-icon name="group-add" />
@@ -590,8 +586,7 @@ export default {
 <script>
   export default {
     data: () => ({
-      selected: [],
-      highlighted: "forest"
+      selected: []
     }),
     computed: {
       resources() {
@@ -654,9 +649,6 @@ export default {
         const selectedString = this.selectedIds.join(`, `)
         alert(selectedString + ` -> ` + fileId);
       },
-      highlightResource(resource) {
-        this.highlighted = resource.id
-      },
       handleAction(resource) {
         alert(`Clicked ${resource.name}`)
       }