zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

ui: redesign spoiler

Browse source
This commit is contained in:
Anthony Fu 2022-11-30 10:07:13 +08:00
parent afed995138
commit ba93e6d235
5 changed files with 30 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/status/StatusSpoiler.vue
View file

@ -10,11 +10,19 @@ watchEffect(() => {
</script>
<template>
<div v-if="enabled" flex flex-col items-start gap-2>
<slot name="spoiler" />
<button btn-outline px-2 py-1 text-3 @click="toggleContent()">
{{ showContent ? 'Show less' : 'Show more' }}
</button>
<div v-if="enabled" flex flex-col items-start>
<div class="content-rich">
<slot name="spoiler" />
</div>
<div flex="~ gap-1 center" w-full>
<div border="t base" w-5 h-1px />
<button btn-text px-2 py-1 text-3 flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
<div v-if="showContent" i-ri:eye-line />
<div v-else i-ri:eye-close-line />
{{ showContent ? $t('status.spoiler_show_less') : $t('status.spoiler_show_more') }}
</button>
<div border="t base" flex-auto h-1px />
</div>
</div>
<slot v-if="!enabled || showContent" />
</template>