bulk-operations change MultiSelect component

resources/js/components/FilesView/DragUI.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <MultiSelected :title="title" :subtitle="subtitle" id="multi-select-ui" v-show="draged" />
+    </div>
+</template>
+
+<script>
+import MultiSelected from '@/components/FilesView/MultiSelected'
+import {mapGetters} from 'vuex'
+import {events} from '@/bus'
+
+    export default {
+        name:"DragUI",
+        components: {MultiSelected},
+        computed: {
+            ...mapGetters(['fileInfoDetail']),
+            title(){
+                if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.dragedItem)) {
+                    return this.$t('file_detail.selected_multiple')
+                }
+
+                if((this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.dragedItem)) && this.dragedItem ) {
+                    return this.dragedItem.name
+                }
+            },
+            subtitle(){
+                if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.dragedItem) ) {
+                    return this.fileInfoDetail.length + ' ' + this.$tc('file_detail.items', this.fileInfoDetail.length)
+                }
+            },
+        },
+        data () {
+            return {
+                draged: false,
+                dragedItem: undefined
+            }
+        },
+        mounted () {
+
+            // Hnadle Drag & Drop Ghost show
+            
+            events.$on('dragstart', (data) => {
+                this.draged = true
+                this.dragedItem = data
+            })
+            events.$on('drop', () => {
+                this.draged = false
+            })
+            
+        }
+        
+    }
+</script>
+
+<style lang="scss" scoped>
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
+
+#multi-select-ui {
+    max-width: 300px;
+    min-width: 250px;
+    position: fixed;
+    z-index: 10;
+    pointer-events: none;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
+    background:white;
+     /deep/.text{
+            .title {
+                color: $text;
+            }
+            .count {
+                color: $text-muted;
+            }
+        }
+    /deep/.icon-wrapper {
+            .icon { 
+                stroke: $theme;
+            }
+        }
+}
+
+@media (prefers-color-scheme: dark) {
+    #multi-select-ui {
+        background: $dark_mode_foreground;
+        /deep/.text {
+            .title {
+                color: $dark_mode_text_primary;
+            }
+            .count {
+                color: $dark_mode_text_secondary;
+            }
+        }    
+        /deep/.icon-wrapper {
+            .icon { 
+                stroke: $theme;
+            }   
+        }  
+    }
+}
+
+</style>