45 lines
1.9 KiB
Vue
45 lines
1.9 KiB
Vue
<template>
|
|
<CollapsibleRoot :disabled="disabled" :defaultOpen="fold === true || fold === undefined" class="callout group overflow-hidden my-4 p-3 ps-4 bg-blend-lighten !bg-opacity-25 border-l-4 inline-block pe-8 bg-light-blue dark:bg-dark-blue" :data-type="type">
|
|
<CollapsibleTrigger>
|
|
<div :class="{ 'cursor-pointer': fold !== undefined }" class="flex flex-row items-center justify-start ps-2">
|
|
<Icon :icon="calloutIconByType[type] ?? defaultCalloutIcon" inline class="w-6 h-6 stroke-2 float-start me-2 flex-shrink-0" />
|
|
<span v-if="title" class="block font-bold text-start">{{ title }}</span>
|
|
<Icon icon="radix-icons:caret-right" v-if="fold !== undefined" class="transition-transform group-data-[state=open]:rotate-90 w-6 h-6 mx-6" />
|
|
</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] data-[state=closed]:h-0">
|
|
<div class="px-2">
|
|
<slot />
|
|
</div>
|
|
</CollapsibleContent>
|
|
</CollapsibleRoot>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
const calloutIconByType: Record<string, string> = {
|
|
note: 'radix-icons:pencil-1',
|
|
abstract: 'radix-icons:file-text',
|
|
info: 'radix-icons:info-circled',
|
|
todo: 'radix-icons:check-circled',
|
|
tip: 'radix-icons:star',
|
|
success: 'radix-icons:check',
|
|
question: 'radix-icons:question-mark-circled',
|
|
warning: 'radix-icons:exclamation-triangle',
|
|
failure: 'radix-icons:cross-circled',
|
|
danger: 'radix-icons:circle-backslash',
|
|
bug: 'solar:bug-linear',
|
|
example: 'radix-icons:list-bullet',
|
|
quote: 'radix-icons:quote',
|
|
};
|
|
const defaultCalloutIcon = 'radix-icons:info-circled';
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
const { type, title, fold } = defineProps<{
|
|
type: string;
|
|
title?: string;
|
|
fold?: boolean;
|
|
}>();
|
|
const disabled = computed(() => fold === undefined);
|
|
</script> |