q-dialog(ref='dialogRef', @hide='onDialogHide')
q-card.page-save-dialog(style='width: 860px; max-width: 90vw;')
q-card-section.card-header
q-icon(name='img:/_assets/icons/fluent-save-as.svg', left, size='sm')
span {{t('pageSaveDialog.title')}}
.row.page-save-dialog-browser
.col-4
q-scroll-area(
:thumb-style='thumbStyle'
:bar-style='barStyle'
style='height: 300px'
)
.q-px-sm
tree(
:nodes='state.treeNodes'
:roots='state.treeRoots'
v-model:selected='state.currentFolderId'
@lazy-load='treeLazyLoad'
:use-lazy-load='true'
@context-action='treeContextAction'
:context-action-list='[`newFolder`]'
:display-mode='state.displayMode'
)
.col-8
q-list.page-save-dialog-filelist(dense)
q-item(
v-for='item of files'
:key='item.id'
clickable
active-class='active'
:active='item.id === state.currentFileId'
@click.native='state.currentFileId = item.id'
@dblclick.native='openItem(item)'
)
q-item-section(side)
q-icon(:name='item.icon', size='sm')
q-item-section
q-item-label {{item.title}}
.page-save-dialog-path.font-robotomono {{currentFolderPath}}
q-list.q-py-sm
q-item
blueprint-icon(icon='new-document')
q-item-section
q-input(
v-model='state.title'
label='Page Title'
dense
outlined
)
q-item
blueprint-icon(icon='file-submodule')
q-item-section
q-input(
v-model='state.path'
label='Path Name'
dense
outlined
)
q-card-actions.card-actions.q-px-md
q-btn.acrylic-btn(
icon='las la-ellipsis-h'
color='blue-grey'
padding='xs sm'
flat
)
q-tooltip(anchor='center right' self='center left') Display Options
q-menu(
auto-close
transition-show='jump-down'
transition-hide='jump-up'
anchor='top left'
self='bottom left'
)
q-card.q-pa-sm
q-list(dense)
q-item(clickable, @click='state.displayMode = `path`')
q-item-section(side)
q-icon(
:name='state.displayMode === `path` ? `las la-check-circle` : `las la-circle`'
:color='state.displayMode === `path` ? `positive` : `grey`'
size='xs'
)
q-item-section.q-pr-sm {{ t('pageSaveDialog.displayModePath') }}
q-item(clickable, @click='state.displayMode = `title`')
q-item-section(side)
q-icon(
:name='state.displayMode === `title` ? `las la-check-circle` : `las la-circle`'
:color='state.displayMode === `title` ? `positive` : `grey`'
size='xs'
)
q-item-section.q-pr-sm {{ t('pageSaveDialog.displayModeTitle') }}
q-space
q-btn.acrylic-btn(
icon='las la-times'
:label='t(`common.actions.cancel`)'
color='grey-7'
padding='xs md'
@click='onDialogCancel'
flat
)
q-btn(
icon='las la-check'
:label='t(`common.actions.save`)'
unelevated
color='primary'
padding='xs md'
@click='save'
v-close-popup
)