32 lines
1.6 KiB
Vue
32 lines
1.6 KiB
Vue
<script setup>
|
|
import { toApiUrl } from '../../lib/runtime'
|
|
|
|
const props = defineProps({
|
|
customItems: { type: Array, required: true },
|
|
openCustomItemModal: { type: Function, required: true },
|
|
customItemPage: { type: Number, required: true },
|
|
customItemPageCount: { type: Number, required: true },
|
|
customItemTotal: { type: Number, required: true },
|
|
moveCustomItemPage: { type: Function, required: true },
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="panel">
|
|
<div v-if="!props.customItems.length" class="hint">조건에 맞는 관리 대상 아이템이 없어요.</div>
|
|
<div v-else class="customItemGrid">
|
|
<button v-for="item in props.customItems" :key="item.id" type="button" class="customItemCard" @click="props.openCustomItemModal(item)">
|
|
<span class="customItemCard__badge" :class="{ 'customItemCard__badge--template': item.sourceType === 'template' }">{{ item.sourceLabel }}</span>
|
|
<img class="customItemCard__image" :src="toApiUrl(item.src)" :alt="item.label" />
|
|
<div class="customItemCard__title" :title="item.label">{{ item.label }}</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="pager">
|
|
<button class="btn btn--ghost" :disabled="props.customItemPage <= 1" @click="props.moveCustomItemPage(-1)">이전</button>
|
|
<div class="pager__info">{{ props.customItemPage }} / {{ props.customItemPageCount }} 페이지 · 총 {{ props.customItemTotal }}개</div>
|
|
<button class="btn btn--ghost" :disabled="props.customItemPage >= props.customItemPageCount" @click="props.moveCustomItemPage(1)">다음</button>
|
|
</div>
|
|
</div>
|
|
</template>
|