File size: 2,291 Bytes
8ede856 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <template>
<BaseFolderTreeNode :folder="folder" :depth="depth" :current-folder-id="currentFolderId"
:search-query="searchQuery" :expanded-folder-ids="expandedFolderIds" :accept-drop-types="['persona']"
@folder-click="$emit('folder-click', $event)"
@folder-context-menu="handleContextMenu"
@item-dropped="handleItemDropped"
@toggle-expansion="toggleFolderExpansion"
@set-expansion="handleSetExpansion" />
</template>
<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import { usePersonaStore } from '@/stores/personaStore';
import { mapState, mapActions } from 'pinia';
import BaseFolderTreeNode from '@/components/folder/BaseFolderTreeNode.vue';
import type { FolderTreeNode as FolderTreeNodeType } from '@/components/folder/types';
export default defineComponent({
name: 'FolderTreeNode',
components: {
BaseFolderTreeNode
},
props: {
folder: {
type: Object as PropType<FolderTreeNodeType>,
required: true
},
depth: {
type: Number,
default: 0
},
currentFolderId: {
type: String as PropType<string | null>,
default: null
},
searchQuery: {
type: String,
default: ''
}
},
emits: ['folder-click', 'folder-context-menu', 'persona-dropped'],
computed: {
...mapState(usePersonaStore, ['expandedFolderIds'])
},
methods: {
...mapActions(usePersonaStore, ['toggleFolderExpansion', 'setFolderExpansion']),
handleContextMenu(event: { event: MouseEvent; folder: FolderTreeNodeType }) {
this.$emit('folder-context-menu', event);
},
handleItemDropped(data: { item_id: string; item_type: string; target_folder_id: string | null; source_data: any }) {
if (data.item_type === 'persona') {
this.$emit('persona-dropped', {
persona_id: data.item_id,
target_folder_id: data.target_folder_id
});
}
},
handleSetExpansion(data: { folderId: string; expanded: boolean }) {
this.setFolderExpansion(data.folderId, data.expanded);
}
}
});
</script>
|