Nikita Kiselev
01458e3b4c
Some checks failed
Telegram Mini App Shop Builder / Compute version metadata (push) Has been cancelled
Telegram Mini App Shop Builder / Run Frontend tests (push) Has been cancelled
Telegram Mini App Shop Builder / Run Backend tests (push) Has been cancelled
Telegram Mini App Shop Builder / Run PHP_CodeSniffer (push) Has been cancelled
Telegram Mini App Shop Builder / Build module. (push) Has been cancelled
Telegram Mini App Shop Builder / release (push) Has been cancelled
71 lines
2.0 KiB
Vue
71 lines
2.0 KiB
Vue
<template>
|
|
<div class="tw:flex-1 tw:flex tw:flex-col tw:gap-2 tw:h-full">
|
|
<Message v-if="isCustom" severity="info" class="tw:mb-2">
|
|
Вы находитесь в режиме ручного редактирования схемы.
|
|
<a
|
|
href="https://formkit.com/essentials/schema"
|
|
target="_blank"
|
|
title="Документация FormKit Schema"
|
|
class="tw:ml-1 tw:text-blue-600 hover:tw:underline"
|
|
>
|
|
Документация по схеме <i class="fa fa-external-link"></i>
|
|
</a>
|
|
</Message>
|
|
<Panel class="tw:flex-1 tw:flex tw:flex-col tw:overflow-hidden">
|
|
<template #header>
|
|
<div class="tw:flex tw:justify-between tw:items-center tw:w-full">
|
|
<div class="tw:flex tw:items-center tw:gap-2">
|
|
<span class="tw:font-medium">Редактор FormKit Schema</span>
|
|
</div>
|
|
<div v-if="error" class="tw:text-red-500 tw:text-sm">
|
|
<i class="fa fa-exclamation-circle"></i> {{ error }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="tw:flex-1 tw:h-full tw:overflow-hidden">
|
|
<Codemirror
|
|
:modelValue="modelValue"
|
|
@update:modelValue="onCodeChange"
|
|
placeholder="Code goes here..."
|
|
:style="{ height: '600px' }"
|
|
:autofocus="true"
|
|
:indent-with-tab="true"
|
|
:tab-size="2"
|
|
:extensions="extensions"
|
|
/>
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Message, Panel } from 'primevue';
|
|
import { Codemirror } from 'vue-codemirror';
|
|
import { json } from '@codemirror/lang-json';
|
|
import { oneDark } from '@codemirror/theme-one-dark';
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
error: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
isCustom: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue', 'change']);
|
|
|
|
const extensions = [json(), oneDark];
|
|
|
|
function onCodeChange(newVal) {
|
|
emit('update:modelValue', newVal);
|
|
emit('change', newVal);
|
|
}
|
|
</script>
|