54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
online: boolean
|
|
size?: 'sm' | 'md' | 'lg'
|
|
pending?: 'publish' | 'unpublish'
|
|
}>(),
|
|
{
|
|
size: 'md',
|
|
},
|
|
)
|
|
|
|
const themeSize = computed(() => (props.size === 'sm' ? 'md' : props.size))
|
|
const compact = computed(() => (props.size === 'sm' ? 'h-5 px-1.5' : undefined))
|
|
</script>
|
|
|
|
<template>
|
|
<UBadge
|
|
v-if="pending"
|
|
color="neutral"
|
|
variant="outline"
|
|
icon="i-lucide-loader-circle"
|
|
:size="themeSize"
|
|
:class="[size === 'lg' ? undefined : 'px-2', compact]"
|
|
:ui="{ leadingIcon: 'animate-spin' }"
|
|
>
|
|
{{ pending === 'publish' ? t('Publishing…') : t('Unpublishing…') }}
|
|
</UBadge>
|
|
<UBadge
|
|
v-else-if="online"
|
|
color="neutral"
|
|
variant="solid"
|
|
icon="i-lucide-globe"
|
|
:size="themeSize"
|
|
:class="compact"
|
|
>
|
|
{{ t('Online') }}
|
|
</UBadge>
|
|
<UBadge
|
|
v-else
|
|
color="neutral"
|
|
variant="outline"
|
|
icon="i-lucide-pencil-line"
|
|
:size="themeSize"
|
|
:class="[size === 'lg' ? undefined : 'px-2', compact]"
|
|
>
|
|
{{ t('Draft') }}
|
|
</UBadge>
|
|
</template>
|