You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.5 KiB
95 lines
2.5 KiB
<script setup lang="ts">
|
|
import {defineEmits, onMounted, ref} from 'vue'
|
|
import {MathStatement} from '../support/parse'
|
|
import Katex from './Katex.vue'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import {StatementID} from '../support/types'
|
|
|
|
const props = defineProps<{
|
|
statement?: MathStatement,
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(eventName: 'save', statement: MathStatement): void
|
|
}>()
|
|
|
|
const expressionPreview = ref(MathStatement.temp(''))
|
|
const expressionPreviewKey = ref(uuidv4())
|
|
const expressionError = ref<string|undefined>(undefined)
|
|
const expressionValue = ref<string>('')
|
|
|
|
const updateExpressionPreview = () => {
|
|
const previewStmt = MathStatement.temp(expressionValue.value)
|
|
if ( previewStmt.isValid() ) {
|
|
expressionPreview.value = MathStatement.temp(expressionValue.value)
|
|
expressionPreviewKey.value = uuidv4()
|
|
}
|
|
}
|
|
|
|
const validateExpression = () => {
|
|
const stmt = MathStatement.temp(expressionValue.value)
|
|
if ( !stmt.isValid() ) {
|
|
return 'The expression is invalid'
|
|
}
|
|
|
|
if ( stmt.defines().length > 0 || stmt.isFunctionDeclaration() ) {
|
|
return 'Expressions cannot declare variables or functions'
|
|
}
|
|
}
|
|
|
|
const saveExpression = () => {
|
|
expressionError.value = validateExpression()
|
|
if ( expressionError.value ) {
|
|
return
|
|
}
|
|
|
|
if ( props.statement ) {
|
|
props.statement.raw = expressionValue.value
|
|
emit('save', props.statement)
|
|
} else {
|
|
emit('save', new MathStatement(
|
|
uuidv4() as StatementID,
|
|
expressionValue.value
|
|
))
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if ( props.statement ) {
|
|
expressionValue.value = props.statement.raw
|
|
updateExpressionPreview()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-card>
|
|
<q-card-section v-if="expressionValue">
|
|
<div style="display: flex; justify-content: center">
|
|
<Katex
|
|
:key="expressionPreviewKey"
|
|
:statement="expressionPreview"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section v-if="expressionError">
|
|
<div style="color: darkred; font-weight: bold">{{ expressionError }}</div>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-input
|
|
v-model="expressionValue"
|
|
v-on:update:model-value="() => updateExpressionPreview()"
|
|
outlined
|
|
autogrow
|
|
type="textarea"
|
|
autofocus
|
|
label="Expression"
|
|
/>
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="text-primary">
|
|
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
|
<q-btn flat label="Save" @click="() => saveExpression()"></q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</template>
|