113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
message?: string
|
|
title?: string
|
|
/** Context for default icon + copy */
|
|
variant?: 'default' | 'products' | 'catalogs' | 'orders' | 'cart' | 'checks' | 'search'
|
|
icon?: string
|
|
iconSize?: number
|
|
}>(),
|
|
{
|
|
message: undefined,
|
|
title: undefined,
|
|
variant: 'default',
|
|
icon: undefined,
|
|
iconSize: 72,
|
|
},
|
|
)
|
|
|
|
const variantIcons: Record<string, string> = {
|
|
default: 'vuesax-linear:clipboard-close',
|
|
products: 'vuesax-linear:box-remove',
|
|
catalogs: 'vuesax-linear:category',
|
|
orders: 'vuesax-linear:document-text',
|
|
cart: 'vuesax-linear:bag-cross',
|
|
checks: 'vuesax-linear:card-receive',
|
|
search: 'vuesax-linear:search-status',
|
|
}
|
|
|
|
const variantTitles: Record<string, string> = {
|
|
default: '',
|
|
products: 'محصولی یافت نشد',
|
|
catalogs: 'کالیتهای یافت نشد',
|
|
orders: 'سفارشی یافت نشد',
|
|
cart: 'سبد خرید خالی است',
|
|
checks: 'چکی ثبت نشده است',
|
|
search: 'نتیجهای یافت نشد',
|
|
}
|
|
|
|
const resolvedIcon = computed(
|
|
() => props.icon ?? variantIcons[props.variant] ?? 'vuesax-linear:clipboard-close',
|
|
)
|
|
const resolvedTitle = computed(() => props.title ?? variantTitles[props.variant] ?? '')
|
|
const resolvedMessage = computed(() => props.message ?? '')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="empty-state">
|
|
<div class="empty-state__icon" aria-hidden="true">
|
|
<slot name="icon">
|
|
<BasicIcon :icon="resolvedIcon" :size="iconSize" :stroke-width="1.25" />
|
|
</slot>
|
|
</div>
|
|
<h2 v-if="resolvedTitle || $slots.title" class="empty-state__title">
|
|
<slot name="title">{{ resolvedTitle }}</slot>
|
|
</h2>
|
|
<p v-if="resolvedMessage || $slots.message" class="empty-state__message">
|
|
<slot name="message">{{ resolvedMessage }}</slot>
|
|
</p>
|
|
<div v-if="$slots.default" class="empty-state__action">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
width: 100%;
|
|
padding: 48px 24px;
|
|
min-height: 280px;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-state__icon {
|
|
margin-bottom: 16px;
|
|
color: var(--color-text-muted);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.empty-state__title {
|
|
margin: 0 0 8px;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.empty-state__message {
|
|
margin: 0 0 24px;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-muted);
|
|
line-height: 1.5;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.empty-state__message:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.empty-state__action {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|