comento-ui/src/components/fileInput/FileInputFileItem.vue at 2b6a4b899bb082d740a6ea220d4e046489cc0d63 · comento/comento-ui · GitHub

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
	<ListItem class="c-application px-10" size="large" @click="handleClickFileItem({ file, index })">
		<div class="c-file-input-file-item--content" @click.stop="handleClickFileItemContent({ file, index })">
			<div class="icon-wrapper">
				<Loader v-if="isRemovable && isLoading" size="small" />
				<Icon v-else-if="isRemovable && isError" name="IconExclamationSmallFill" color="accent" />
				<img v-else src="https://cdn.comento.kr/images/illust/illust-file.svg" alt="" />
			</div>
			<Typography
				type="body2"
				:color="isRemovable && isError ? 'accent' : 'gray700'"
				:font-weight="400"
				class="text-truncate"
			>
				{{ file.title || file.name }}
			</Typography>
		</div>
		<Icon
			v-if="isRemovable"
			name="IconCloseSmallLine"
			color="gray500"
			style="flex-shrink: 0"
			@click.stop="handleClickFileTrashIcon({ file, index })"
		/>
		<template v-else>
			<Loader v-if="isLoading" size="small" />
			<Icon
				v-else
				name="IconDownloadSmallLine"
				color="gray500"
				@click.stop="handleClickFileDownloadIcon({ file, index })"
			/>
		</template>
	</ListItem>
</template>

<script>
import ListItem from '@/components/list/list/ListItem.vue';
import Icon from '@/components/icon/Icon.vue';
import Loader from '@/components/loader/Loader.vue';
import Typography from '@/components/typography/Typography.vue';

/**
 * @displayName c-file-input-file-item
 */
export default {
	name: 'FileInputFileItem',
	props: {
		file: {
			// 파일은 내장 타입이 없음.
			required: true,
		},
		/**
		 * 파일 리스트 내부 인덱스
		 */
		index: {
			type: Number,
			required: true,
		},
		/**
		 * 수정 or 다운로드
		 */
		isRemovable: {
			type: Boolean,
			default: false,
		},
		isLoading: {
			type: Boolean,
			default: false,
		},
		isError: {
			type: Boolean,
			default: false,
		},
	},
	methods: {
		handleClickFileItem({ file, index }) {
			this.$emit('click-item', { file, index });
		},
		handleClickFileDownloadIcon({ file, index }) {
			this.$emit('download-item', { file, index });
		},
		handleClickFileItemContent({ file, index }) {
			this.$emit('click-item-content', { file, index });
		},
		handleClickFileTrashIcon({ file, index }) {
			this.$emit('remove-item', { file, index });
		},
	},
	components: { Icon, Loader, Typography, ListItem },
};
</script>

<style lang="scss" scoped>
.c-file-input-file-item {
	&--content {
		height: 20px;
		@include flexbox();
		@include align-items(center);
		overflow: hidden;
		gap: 8px;
	}
}

.icon-wrapper {
	width: 20px;
	height: 20px;
	@include flexbox();
	@include align-items(center);
	@include justify-content(center);
	flex: none;
}
</style>