elk/components/status/StatusSpoiler.vue

29 lines
1.3 KiB
Vue
Raw Normal View History

<script setup lang="ts">
const props = defineProps<{ enabled?: boolean; filter?: boolean; isDM?: boolean }>()
const expandSpoilersByDefault = computed(() => currentUser.value ? getExpandSpoilersByDefault(currentUser.value.account) : false)
const showContent = ref(expandSpoilersByDefault.value ? true : !props.enabled)
2022-11-27 07:20:33 +00:00
const toggleContent = useToggle(showContent)
watchEffect(() => {
showContent.value = expandSpoilersByDefault.value ? true : !props.enabled
2022-11-27 07:20:33 +00:00
})
</script>
<template>
2022-11-30 02:07:13 +00:00
<div v-if="enabled" flex flex-col items-start>
<div class="content-rich" p="x-4 b-2.5" text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
2022-11-30 02:07:13 +00:00
<slot name="spoiler" />
</div>
<div flex="~ gap-1 center" w-full :mb="isDM && !showContent ? '4' : ''" mt="-4.5">
<button btn-text px-2 py-1 :bg="isDM ? 'transparent' : 'base'" flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
2022-11-30 02:07:13 +00:00
<div v-if="showContent" i-ri:eye-line />
<div v-else i-ri:eye-close-line />
2022-12-04 20:00:02 +00:00
{{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }}
2022-11-30 02:07:13 +00:00
</button>
</div>
</div>
2022-11-27 07:20:33 +00:00
<slot v-if="!enabled || showContent" />
</template>