After Width: | Height: | Size: 830 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 860 B |
After Width: | Height: | Size: 4.4 KiB |
After Width: | Height: | Size: 718 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 791 B |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.5 KiB |
@ -1,69 +0,0 @@
|
|||||||
<template lang="pug">
|
|
||||||
q-dialog(ref='dialogRef', @hide='onDialogHide')
|
|
||||||
q-card(style='min-width: 850px;')
|
|
||||||
q-card-section.card-header
|
|
||||||
q-icon(name='img:/_assets/icons/ultraviolet-markdown.svg', left, size='sm')
|
|
||||||
span {{t(`admin.editors.markdownName`)}}
|
|
||||||
q-card-section.q-pa-none
|
|
||||||
span Test
|
|
||||||
q-card-actions.card-actions
|
|
||||||
q-space
|
|
||||||
q-btn.acrylic-btn(
|
|
||||||
flat
|
|
||||||
:label='t(`common.actions.cancel`)'
|
|
||||||
color='grey'
|
|
||||||
padding='xs md'
|
|
||||||
@click='onDialogCancel'
|
|
||||||
)
|
|
||||||
q-btn(
|
|
||||||
unelevated
|
|
||||||
:label='t(`common.actions.save`)'
|
|
||||||
color='primary'
|
|
||||||
padding='xs md'
|
|
||||||
@click='save'
|
|
||||||
:loading='state.loading > 0'
|
|
||||||
)
|
|
||||||
|
|
||||||
q-inner-loading(:showing='state.loading > 0')
|
|
||||||
q-spinner(color='accent', size='lg')
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import { useDialogPluginComponent, useQuasar } from 'quasar'
|
|
||||||
import { reactive, ref } from 'vue'
|
|
||||||
|
|
||||||
import { useAdminStore } from '../stores/admin'
|
|
||||||
|
|
||||||
// EMITS
|
|
||||||
|
|
||||||
defineEmits([
|
|
||||||
...useDialogPluginComponent.emits
|
|
||||||
])
|
|
||||||
|
|
||||||
// QUASAR
|
|
||||||
|
|
||||||
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
|
|
||||||
const $q = useQuasar()
|
|
||||||
|
|
||||||
// STORES
|
|
||||||
|
|
||||||
const adminStore = useAdminStore()
|
|
||||||
|
|
||||||
// I18N
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
// DATA
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
config: [],
|
|
||||||
loading: 0
|
|
||||||
})
|
|
||||||
|
|
||||||
// METHODS
|
|
||||||
|
|
||||||
async function save () {
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -0,0 +1,316 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
q-layout(view='hHh lpR fFf', container)
|
||||||
|
q-header.card-header.q-px-md.q-py-sm
|
||||||
|
q-icon(name='img:/_assets/icons/ultraviolet-markdown.svg', left, size='md')
|
||||||
|
span {{t(`admin.editors.markdownName`)}}
|
||||||
|
q-space
|
||||||
|
q-btn.q-mr-sm(
|
||||||
|
flat
|
||||||
|
rounded
|
||||||
|
color='white'
|
||||||
|
:aria-label='t(`common.actions.refresh`)'
|
||||||
|
icon='las la-question-circle'
|
||||||
|
:href='siteStore.docsBase + `/admin/editors/markdown`'
|
||||||
|
target='_blank'
|
||||||
|
type='a'
|
||||||
|
)
|
||||||
|
q-btn-group(push)
|
||||||
|
q-btn(
|
||||||
|
push
|
||||||
|
color='white'
|
||||||
|
text-color='grey-7'
|
||||||
|
:label='t(`common.actions.cancel`)'
|
||||||
|
:aria-label='t(`common.actions.cancel`)'
|
||||||
|
icon='las la-times'
|
||||||
|
@click='close'
|
||||||
|
)
|
||||||
|
q-btn(
|
||||||
|
push
|
||||||
|
color='positive'
|
||||||
|
text-color='white'
|
||||||
|
:label='t(`common.actions.save`)'
|
||||||
|
:aria-label='t(`common.actions.save`)'
|
||||||
|
icon='las la-check'
|
||||||
|
@click='save'
|
||||||
|
:disabled='state.loading > 0'
|
||||||
|
)
|
||||||
|
q-page-container
|
||||||
|
q-page.q-pa-md
|
||||||
|
q-card.shadow-1.q-pb-sm
|
||||||
|
q-card-section
|
||||||
|
.text-subtitle1 {{t('admin.editors.markdown.general')}}
|
||||||
|
q-item(tag='label')
|
||||||
|
blueprint-icon(icon='html')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.allowHTML`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.allowHTMLHint`)}}
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-toggle(
|
||||||
|
v-model='state.config.allowHTML'
|
||||||
|
color='primary'
|
||||||
|
checked-icon='las la-check'
|
||||||
|
unchecked-icon='las la-times'
|
||||||
|
:aria-label='t(`admin.editors.markdown.allowHTML`)'
|
||||||
|
)
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item(tag='label')
|
||||||
|
blueprint-icon(icon='link')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.linkify`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.linkifyHint`)}}
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-toggle(
|
||||||
|
v-model='state.config.linkify'
|
||||||
|
color='primary'
|
||||||
|
checked-icon='las la-check'
|
||||||
|
unchecked-icon='las la-times'
|
||||||
|
:aria-label='t(`admin.editors.markdown.linkify`)'
|
||||||
|
)
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item(tag='label')
|
||||||
|
blueprint-icon(icon='enter-key')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.lineBreaks`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.lineBreaksHint`)}}
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-toggle(
|
||||||
|
v-model='state.config.lineBreaks'
|
||||||
|
color='primary'
|
||||||
|
checked-icon='las la-check'
|
||||||
|
unchecked-icon='las la-times'
|
||||||
|
:aria-label='t(`admin.editors.markdown.lineBreaks`)'
|
||||||
|
)
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item
|
||||||
|
blueprint-icon(icon='width')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.tabWidth`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.tabWidthHint`)}}
|
||||||
|
q-item-section(side)
|
||||||
|
q-input(
|
||||||
|
type='number'
|
||||||
|
min='1'
|
||||||
|
max='8'
|
||||||
|
style='width: 100px;'
|
||||||
|
outlined
|
||||||
|
v-model='state.config.tabWidth'
|
||||||
|
dense
|
||||||
|
:aria-label='t(`admin.editors.markdown.tabWidth`)'
|
||||||
|
)
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item
|
||||||
|
blueprint-icon(icon='sigma')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.latexEngine`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.latexEngineHint`)}}
|
||||||
|
q-item-section.col-auto
|
||||||
|
q-btn-toggle(
|
||||||
|
v-model='state.config.latexEngine'
|
||||||
|
push
|
||||||
|
glossy
|
||||||
|
no-caps
|
||||||
|
toggle-color='primary'
|
||||||
|
:options='latexEngines'
|
||||||
|
)
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item
|
||||||
|
blueprint-icon(icon='data-sheet')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.multimdTable`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.multimdTableHint`)}}
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-toggle(
|
||||||
|
v-model='state.config.multimdTable'
|
||||||
|
color='primary'
|
||||||
|
checked-icon='las la-check'
|
||||||
|
unchecked-icon='las la-times'
|
||||||
|
:aria-label='t(`admin.editors.markdown.multimdTable`)'
|
||||||
|
)
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item(tag='label')
|
||||||
|
blueprint-icon(icon='asterisk')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.typographer`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.typographerHint`)}}
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-toggle(
|
||||||
|
v-model='state.config.typographer'
|
||||||
|
color='primary'
|
||||||
|
checked-icon='las la-check'
|
||||||
|
unchecked-icon='las la-times'
|
||||||
|
:aria-label='t(`admin.editors.markdown.typographer`)'
|
||||||
|
)
|
||||||
|
template(v-if='state.config.typographer')
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item(tag='label')
|
||||||
|
blueprint-icon(icon='quote-left')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.quotes`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.quotesHint`)}}
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-select(
|
||||||
|
style='width: 200px;'
|
||||||
|
outlined
|
||||||
|
v-model='state.config.quotes'
|
||||||
|
:options='quoteStyles'
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:aria-label='t(`admin.editors.markdown.quotes`)'
|
||||||
|
)
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item(tag='label')
|
||||||
|
blueprint-icon(icon='underline')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.underline`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.underlineHint`)}}
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-toggle(
|
||||||
|
v-model='state.config.underline'
|
||||||
|
color='primary'
|
||||||
|
checked-icon='las la-check'
|
||||||
|
unchecked-icon='las la-times'
|
||||||
|
:aria-label='t(`admin.editors.markdown.underline`)'
|
||||||
|
)
|
||||||
|
|
||||||
|
q-card.shadow-1.q-pb-sm.q-mt-md
|
||||||
|
q-card-section
|
||||||
|
.text-subtitle1 {{t('admin.editors.markdown.plantuml')}}
|
||||||
|
q-item(tag='label')
|
||||||
|
blueprint-icon(icon='workflow')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.plantuml`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.plantumlHint`)}}
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-toggle(
|
||||||
|
v-model='state.config.plantuml'
|
||||||
|
color='primary'
|
||||||
|
checked-icon='las la-check'
|
||||||
|
unchecked-icon='las la-times'
|
||||||
|
:aria-label='t(`admin.editors.markdown.plantuml`)'
|
||||||
|
)
|
||||||
|
template(v-if='state.config.plantuml')
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item
|
||||||
|
blueprint-icon(icon='website')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.plantumlServerUrl`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.plantumlServerUrlHint`)}}
|
||||||
|
q-item-section(side)
|
||||||
|
q-input(
|
||||||
|
style='width: 450px;'
|
||||||
|
outlined
|
||||||
|
v-model='state.config.plantumlServerUrl'
|
||||||
|
dense
|
||||||
|
:aria-label='t(`admin.editors.markdown.plantumlServerUrl`)'
|
||||||
|
)
|
||||||
|
|
||||||
|
q-card.shadow-1.q-pb-sm.q-mt-md
|
||||||
|
q-card-section
|
||||||
|
.text-subtitle1 {{t('admin.editors.markdown.kroki')}}
|
||||||
|
q-item(tag='label')
|
||||||
|
blueprint-icon(icon='workflow')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.kroki`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.krokiHint`)}}
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-toggle(
|
||||||
|
v-model='state.config.kroki'
|
||||||
|
color='primary'
|
||||||
|
checked-icon='las la-check'
|
||||||
|
unchecked-icon='las la-times'
|
||||||
|
:aria-label='t(`admin.editors.markdown.kroki`)'
|
||||||
|
)
|
||||||
|
template(v-if='state.config.kroki')
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-item
|
||||||
|
blueprint-icon(icon='website')
|
||||||
|
q-item-section
|
||||||
|
q-item-label {{t(`admin.editors.markdown.krokiServerUrl`)}}
|
||||||
|
q-item-label(caption) {{t(`admin.editors.markdown.krokiServerUrlHint`)}}
|
||||||
|
q-item-section(side)
|
||||||
|
q-input(
|
||||||
|
style='width: 450px;'
|
||||||
|
outlined
|
||||||
|
v-model='state.config.krokiServerUrl'
|
||||||
|
dense
|
||||||
|
:aria-label='t(`admin.editors.markdown.krokiServerUrl`)'
|
||||||
|
)
|
||||||
|
|
||||||
|
q-inner-loading(:showing='state.loading > 0')
|
||||||
|
q-spinner(color='accent', size='lg')
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
|
import { reactive, ref } from 'vue'
|
||||||
|
|
||||||
|
import { useAdminStore } from '../stores/admin'
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const adminStore = useAdminStore()
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
config: {
|
||||||
|
allowHTML: false,
|
||||||
|
linkify: false,
|
||||||
|
lineBreaks: false,
|
||||||
|
typographer: false,
|
||||||
|
quotes: 'english',
|
||||||
|
underline: false,
|
||||||
|
tabWidth: 2,
|
||||||
|
latexEngine: 'katex',
|
||||||
|
multimdTable: false,
|
||||||
|
plantuml: false,
|
||||||
|
plantumlServerUrl: 'https://',
|
||||||
|
kroki: false,
|
||||||
|
krokiServerUrl: 'https://'
|
||||||
|
},
|
||||||
|
loading: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const latexEngines = [
|
||||||
|
{ value: 'katex', label: 'KaTeX' },
|
||||||
|
{ value: 'mathjax', label: 'Mathjax' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const quoteStyles = [
|
||||||
|
{ value: 'chinese', label: 'Chinese' },
|
||||||
|
{ value: 'english', label: 'English' },
|
||||||
|
{ value: 'french', label: 'French' },
|
||||||
|
{ value: 'german', label: 'German' },
|
||||||
|
{ value: 'greek', label: 'Greek' },
|
||||||
|
{ value: 'japanese', label: 'Japanese' },
|
||||||
|
{ value: 'hungarian', label: 'Hungarian' },
|
||||||
|
{ value: 'polish', label: 'Polish' },
|
||||||
|
{ value: 'portuguese', label: 'Portuguese' },
|
||||||
|
{ value: 'russian', label: 'Russian' },
|
||||||
|
{ value: 'spanish', label: 'Spanish' },
|
||||||
|
{ value: 'swedish', label: 'Swedish' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
function close () {
|
||||||
|
adminStore.$patch({ overlay: '' })
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save () {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|