Collapse.vue

<template>
  <div
    :aria-hidden="isCollapsed ? 'true' : 'false'"
    :style="{ height }"
    class="tw-p-4 -tw-m-4 tw-overflow-y-hidden tw-relative"
    :class="{ collapsed: isCollapsed }"
  >
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

defineOptions({
  compatConfig: {
    MODE: 3,
  },
})

const props = defineProps<{
  isCollapsed: boolean
  peek?: string
}>()
defineEmits<{
  'update:isCollapsed': [boolean]
}>()

const height = computed(() => {
  return !props.isCollapsed ? 'auto' : props.peek ?? '0'
})
</script>

<style lang="postcss" scoped>
.collapsed::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  top: 60%;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
}
</style>