mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-06 13:05:36 -04:00
75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
v-if="displayPreview"
|
|
class="d-flex justify-end"
|
|
>
|
|
<BaseButtonGroup
|
|
:buttons="[
|
|
{
|
|
icon: previewState ? $globals.icons.edit : $globals.icons.eye,
|
|
text: previewState ? $t('general.edit') : $t('markdown-editor.preview-markdown-button-label'),
|
|
event: 'toggle',
|
|
},
|
|
]"
|
|
@toggle="previewState = !previewState"
|
|
/>
|
|
</div>
|
|
<v-textarea
|
|
v-if="!previewState"
|
|
v-bind="textarea"
|
|
v-model="modelValue"
|
|
:class="label == '' ? '' : 'mt-5'"
|
|
:label="label"
|
|
auto-grow
|
|
density="compact"
|
|
rows="4"
|
|
variant="underlined"
|
|
/>
|
|
<SafeMarkdown
|
|
v-else
|
|
:source="modelValue"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
preview: {
|
|
type: Boolean,
|
|
default: undefined,
|
|
},
|
|
displayPreview: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
textarea: {
|
|
type: Object as () => unknown,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(e: "input:preview", value: boolean): void;
|
|
}>();
|
|
|
|
const modelValue = defineModel<string>("modelValue");
|
|
|
|
const fallbackPreview = ref(false);
|
|
const previewState = computed({
|
|
get: () => props.preview ?? fallbackPreview.value,
|
|
set: (val: boolean) => {
|
|
if (props.preview) {
|
|
emit("input:preview", val);
|
|
}
|
|
else {
|
|
fallbackPreview.value = val;
|
|
}
|
|
},
|
|
});
|
|
</script>
|