58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
<script setup>
|
|
/**
|
|
* 게시물 Export 파일 선택 행
|
|
* @property {Object} file - Export 파일
|
|
* @property {boolean} selected - 선택 여부
|
|
* @property {boolean} disabled - 선택 비활성 여부
|
|
*/
|
|
defineProps({
|
|
file: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
selected: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
defineEmits(['toggle'])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="admin-post-export-file-row grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-[#edf0f3] px-3 py-2 last:border-b-0">
|
|
<button
|
|
class="admin-post-export-file-row__check inline-flex size-4 items-center justify-center rounded border border-[#cfd6de] bg-white transition focus:outline-none focus:ring-2 focus:ring-[#15171a] focus:ring-offset-1 disabled:cursor-not-allowed disabled:bg-[#f4f6f8]"
|
|
type="button"
|
|
role="checkbox"
|
|
:aria-checked="selected"
|
|
:disabled="disabled"
|
|
:aria-label="`${file.fileName} 선택`"
|
|
@click="$emit('toggle')"
|
|
>
|
|
<span
|
|
v-if="selected"
|
|
class="admin-post-export-file-row__check-mark block size-2 rounded-sm bg-[#15171a]"
|
|
/>
|
|
</button>
|
|
<div class="admin-post-export-file-row__body min-w-0">
|
|
<p class="admin-post-export-file-row__name truncate text-sm font-medium text-[#15171a]">
|
|
{{ file.fileName }}
|
|
</p>
|
|
<p class="admin-post-export-file-row__range mt-0.5 text-xs text-[#9aa3ad]">
|
|
{{ file.postStart }}-{{ file.postEnd }}
|
|
</p>
|
|
</div>
|
|
<span
|
|
v-if="file.status !== 'ready' || !file.filePath"
|
|
class="admin-post-export-file-row__status inline-flex h-8 items-center justify-center rounded px-2 text-xs font-semibold text-[#a6b0bb]"
|
|
>
|
|
{{ file.status === 'processing' ? '생성 중' : file.status === 'failed' ? '실패' : '다운로드 대기' }}
|
|
</span>
|
|
</div>
|
|
</template>
|