2024-10-28 23:15:05 +03:00
< script lang = "ts" setup >
2024-07-07 18:32:30 +03:00
import { SvgIcon } from '../svg.ts' ;
import { diffTreeStore } from '../modules/stores.ts' ;
2024-10-28 23:15:05 +03:00
import { ref } from 'vue' ;
2022-09-27 08:22:19 +03:00
2024-10-28 23:15:05 +03:00
type File = {
Name : string ;
NameHash : string ;
Type : number ;
IsViewed : boolean ;
}
type Item = {
name : string ;
isFile : boolean ;
file ? : File ;
children ? : Item [ ] ;
2022-09-27 08:22:19 +03:00
} ;
2024-10-28 23:15:05 +03:00
defineProps < {
item : Item ,
} > ( ) ;
const store = diffTreeStore ( ) ;
const collapsed = ref ( false ) ;
function getIconForDiffType ( pType ) {
const diffTypes = {
1 : { name : 'octicon-diff-added' , classes : [ 'text' , 'green' ] } ,
2 : { name : 'octicon-diff-modified' , classes : [ 'text' , 'yellow' ] } ,
3 : { name : 'octicon-diff-removed' , classes : [ 'text' , 'red' ] } ,
4 : { name : 'octicon-diff-renamed' , classes : [ 'text' , 'teal' ] } ,
5 : { name : 'octicon-diff-renamed' , classes : [ 'text' , 'green' ] } , // there is no octicon for copied, so renamed should be ok
} ;
return diffTypes [ pType ] ;
}
2022-09-27 08:22:19 +03:00
< / script >
2024-10-28 23:15:05 +03:00
2023-09-02 17:59:07 +03:00
< template >
<!-- title instead of tooltip above as the tooltip needs too much work with the current methods , i . e . not being loaded or staying open for "too long" -- >
< a
v - if = "item.isFile" class = "item-file"
: class = "{'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': item.file.IsViewed}"
: title = "item.name" : href = "'#diff-' + item.file.NameHash"
>
<!-- file -- >
< SvgIcon name = "octicon-file" / >
2024-03-22 16:45:10 +03:00
< span class = "gt-ellipsis tw-flex-1" > { { item . name } } < / span >
2023-09-02 17:59:07 +03:00
< SvgIcon :name ="getIconForDiffType(item.file.Type).name" :class ="getIconForDiffType(item.file.Type).classes" / >
< / a >
< div v -else class = "item-directory" :title ="item.name" @ click.stop = " collapsed = ! collapsed " >
<!-- directory -- >
< SvgIcon : name = "collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" / >
< SvgIcon class = "text primary" name = "octicon-file-directory-fill" / >
< span class = "gt-ellipsis" > { { item . name } } < / span >
< / div >
2022-09-27 08:22:19 +03:00
2023-09-02 17:59:07 +03:00
< div v-if ="item.children?.length" v-show="!collapsed" class="sub-items" >
< DiffFileTreeItem v -for = " childItem in item.children " :key ="childItem.name" :item ="childItem" / >
< / div >
< / template >
2022-09-27 08:22:19 +03:00
< style scoped >
2023-08-18 22:55:56 +03:00
a , a : hover {
text - decoration : none ;
color : var ( -- color - text ) ;
2022-09-27 08:22:19 +03:00
}
2023-08-18 22:55:56 +03:00
. sub - items {
2023-10-21 13:38:19 +03:00
display : flex ;
flex - direction : column ;
gap : 1 px ;
2023-10-25 13:00:53 +03:00
margin - left : 13 px ;
border - left : 1 px solid var ( -- color - secondary ) ;
2022-09-27 08:22:19 +03:00
}
2023-10-21 13:38:19 +03:00
. sub - items . item - file {
2023-10-25 13:00:53 +03:00
padding - left : 18 px ;
2022-09-27 08:22:19 +03:00
}
2023-08-18 22:55:56 +03:00
. item - file . selected {
2023-04-07 21:27:10 +03:00
color : var ( -- color - text ) ;
background : var ( -- color - active ) ;
border - radius : 4 px ;
}
2023-08-18 22:55:56 +03:00
. item - file . viewed {
color : var ( -- color - text - light - 3 ) ;
2022-09-27 08:22:19 +03:00
}
2023-08-18 22:55:56 +03:00
. item - file ,
. item - directory {
display : flex ;
align - items : center ;
gap : 0.25 em ;
2023-10-21 13:38:19 +03:00
padding : 3 px 6 px ;
2022-09-27 08:22:19 +03:00
}
2023-08-18 22:55:56 +03:00
. item - file : hover ,
. item - directory : hover {
2023-03-30 15:06:10 +03:00
color : var ( -- color - text ) ;
2023-08-18 22:55:56 +03:00
background : var ( -- color - hover ) ;
border - radius : 4 px ;
cursor : pointer ;
2023-06-25 03:46:30 +03:00
}
2022-09-27 08:22:19 +03:00
< / style >