132 lines
3.4 KiB
Vue
132 lines
3.4 KiB
Vue
<template>
|
|
<CollapsibleRoot :disabled="fold === undefined" :defaultOpen="fold === true || fold === undefined" class="overflow-hidden my-4 p-3 ps-6 bg-blend-lighten !bg-opacity-25 border-l-4 inline-block pe-8 bg-light-blue dark:bg-dark-blue" :data-type="type">
|
|
<CollapsibleTrigger asChild>
|
|
<div :class="{ 'cursor-pointer': fold !== undefined }">
|
|
<Icon icon="caret-left" v-if="fold !== undefined" :class="{ '-rotate-90': fold }" class="transition-transform" />
|
|
<Icon :icon="calloutIconByType[type] ?? defaultCalloutIcon" class="w-6 h-6 stroke-2 float-start me-2" />
|
|
<span v-if="title" class="block font-bold ps-8">{{ title }}</span>
|
|
</div>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out]">
|
|
<div class="mt-2 font-semibold">
|
|
<slot />
|
|
</div>
|
|
</CollapsibleContent>
|
|
</CollapsibleRoot>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
const calloutIconByType: Record<string, string> = {
|
|
note: '',
|
|
abstract: '',
|
|
info: '',
|
|
todo: '',
|
|
tip: '',
|
|
success: '',
|
|
question: '',
|
|
warning: '',
|
|
failure: '',
|
|
danger: '',
|
|
bug: '',
|
|
example: '',
|
|
quote: '',
|
|
};
|
|
const defaultCalloutIcon = '';
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
const { type, title, fold } = defineProps<{
|
|
type: string;
|
|
title?: string;
|
|
fold?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<style>
|
|
.callout[data-type="abstract"],
|
|
.callout[data-type="summary"],
|
|
.callout[data-type="tldr"] {
|
|
@apply bg-light-cyan;
|
|
@apply dark:bg-dark-cyan;
|
|
@apply text-light-cyan;
|
|
@apply dark:text-dark-cyan;
|
|
}
|
|
.callout[data-type="info"] {
|
|
@apply bg-light-blue;
|
|
@apply dark:bg-dark-blue;
|
|
@apply text-light-blue;
|
|
@apply dark:text-dark-blue;
|
|
}
|
|
.callout[data-type="todo"] {
|
|
@apply bg-light-blue;
|
|
@apply dark:bg-dark-blue;
|
|
@apply text-light-blue;
|
|
@apply dark:text-dark-blue;
|
|
}
|
|
.callout[data-type="important"] {
|
|
@apply bg-light-cyan;
|
|
@apply dark:bg-dark-cyan;
|
|
@apply text-light-cyan;
|
|
@apply dark:text-dark-cyan;
|
|
}
|
|
.callout[data-type="tip"],
|
|
.callout[data-type="hint"] {
|
|
@apply bg-light-cyan;
|
|
@apply dark:bg-dark-cyan;
|
|
@apply text-light-cyan;
|
|
@apply dark:text-dark-cyan;
|
|
}
|
|
.callout[data-type="success"],
|
|
.callout[data-type="check"],
|
|
.callout[data-type="done"] {
|
|
@apply bg-light-green;
|
|
@apply dark:bg-dark-green;
|
|
@apply text-light-green;
|
|
@apply dark:text-dark-green;
|
|
}
|
|
.callout[data-type="question"],
|
|
.callout[data-type="help"],
|
|
.callout[data-type="faq"] {
|
|
@apply bg-light-orange;
|
|
@apply dark:bg-dark-orange;
|
|
@apply text-light-orange;
|
|
@apply dark:text-dark-orange;
|
|
}
|
|
.callout[data-type="warning"],
|
|
.callout[data-type="caution"],
|
|
.callout[data-type="attention"] {
|
|
@apply bg-light-orange;
|
|
@apply dark:bg-dark-orange;
|
|
@apply text-light-orange;
|
|
@apply dark:text-dark-orange;
|
|
}
|
|
.callout[data-type="failure"],
|
|
.callout[data-type="fail"],
|
|
.callout[data-type="missing"] {
|
|
@apply bg-light-red;
|
|
@apply dark:bg-dark-red;
|
|
@apply text-light-red;
|
|
@apply dark:text-dark-red;
|
|
}
|
|
.callout[data-type="danger"],
|
|
.callout[data-type="error"] {
|
|
@apply bg-light-red;
|
|
@apply dark:bg-dark-red;
|
|
@apply text-light-red;
|
|
@apply dark:text-dark-red;
|
|
}
|
|
.callout[data-type="bug"] {
|
|
@apply bg-light-red;
|
|
@apply dark:bg-dark-red;
|
|
@apply text-light-red;
|
|
@apply dark:text-dark-red;
|
|
}
|
|
.callout[data-type="example"] {
|
|
@apply bg-light-purple;
|
|
@apply dark:bg-dark-purple;
|
|
@apply text-light-purple;
|
|
@apply dark:text-dark-purple;
|
|
}
|
|
|
|
</style> |