MintApps Javascript client application
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.
 
 
 
 

87 lines
2.3 KiB

<template>
<article>
<PageTitle
:title="t('title')"
:subtitle="t('subtitle')"
:button="t('btn-wiki')"
buttonhref="https://www.wikipedia.org/wiki/TeX"
/>
<MintCardContainer>
<MintCard title="Eingabe – TeX">
<textarea
v-model="text"
class="tex form"
spellcheck="false"
:placeholder="t('input-placeholder')"
@keyup="encode"
/>
</MintCard>
<MintCard :title="t('output')">
<!-- eslint-disable-next-line -->
<div v-html="texHtml" />
<div
v-if="!texHtml"
class="text-muted"
>
{{ t('text-muted') }}
</div>
</MintCard>
<MintCard :title="t('example-title')">
<p>{{ t('example-txt') }}</p>
<select
v-model="example"
class="form"
@change="text=example; encode()"
>
<option value="f(x)=mx+t">
{{ t('linear-eq') }}
</option>
<option value="f(x)=ax^2+bx+c">
{{ t('quad-eq') }}
</option>
<option value="x_{1,2}=\frac{-b\pm\sqrt{b^2-4ac}}{2a}">
{{ t('solution-quad-eq') }}
</option>
<option value="f(x)=\frac{1}{\sqrt{2\pi\sigma^2}}\exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right)">
{{ t('gaussian-normal-distribution') }}
</option>
</select>
</MintCard>
<MintCard :title="t('card-hints')">
<p>{{ t('hint') }}</p>
</MintCard>
</MintCardContainer>
<MintContributors
authors="tk100"
thanks=""
/>
</article>
</template>
<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PageTitle from '@/main/components/PageTitle.vue'
import MintCard from '../components/MintCard.vue'
import MintCardContainer from '../components/MintCardContainer.vue'
import MintContributors from '../components/MintContributors.vue'
import texit from '@/main/js/texit.js'
const { t } = useI18n()
const text = ref('')
const example = ref('')
const texHtml = ref('')
function encode () {
texHtml.value = texit.texToHtml(text.value, true)
}
</script>
<style scoped>
textarea.tex {font-family: monospace;}
</style>
<i18n src="../locales/General.json" />
<i18n src='../locales/TexTrainer.json' />
<style src='../../../node_modules/katex/dist/katex.min.css' />