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>
|