q-layout(view='hHh lpR fFf', container)
q-header.card-header.q-px-md.q-py-sm
q-icon(name='img:/_assets/icons/fluent-sidebar-menu.svg', left, size='md')
span {{t(`navEdit.editMenuItems`)}}
q-space
transition(name='syncing')
q-spinner-tail.q-mr-sm(
v-show='state.loading > 0'
color='accent'
size='24px'
)
q-btn.q-mr-sm(
flat
rounded
color='white'
:aria-label='t(`common.actions.viewDocs`)'
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'
:disabled='state.loading > 0'
@click='save'
)
q-drawer.bg-dark-6(:model-value='true', :width='295', dark)
q-scroll-area.nav-edit(
:thumb-style='thumbStyle'
:bar-style='barStyle'
)
sortable(
class='q-list q-list--dense q-list--dark nav-edit-list'
:list='state.items'
item-key='id'
:options='sortableOptions'
@end='updateItemPosition'
)
template(#item='{element}')
.nav-edit-item.nav-edit-item-header(
v-if='element.type === `header`'
:class='state.selected === element.id ? `is-active` : ``'
@click='setItem(element)'
)
q-item-label.text-caption(
header
) {{ element.label }}
q-space
q-item-section(side)
q-icon.handle(name='mdi-drag-horizontal', size='sm')
q-item.nav-edit-item.nav-edit-item-link(
v-else-if='element.type === `link`'
:class='{ "is-active": state.selected === element.id, "is-nested": element.isNested }'
@click='setItem(element)'
clickable
)
q-item-section(side)
q-icon(:name='element.icon', color='white')
q-item-section.text-wordbreak-all {{ element.label }}
q-item-section(side)
q-icon.handle(name='mdi-drag-horizontal', size='sm')
.nav-edit-item.nav-edit-item-separator(
v-else
:class='state.selected === element.id ? `is-active` : ``'
@click='setItem(element)'
)
q-separator(
dark
inset
style='flex: 1; margin-top: 11px;'
)
q-item-section(side)
q-icon.handle(name='mdi-drag-horizontal', size='sm')
.q-pa-md.flex
q-btn.acrylic-btn(
style='flex: 1;'
flat
color='positive'
:label='t(`common.actions.add`)'
:aria-label='t(`common.actions.add`)'
icon='las la-plus-circle'
)
q-menu(fit, :offset='[0, 10]', auto-close)
q-list(separator)
q-item(clickable, @click='addItem(`header`)')
q-item-section(side)
q-icon(name='las la-heading')
q-item-section
q-item-label {{t('navEdit.header')}}
q-item(clickable, @click='addItem(`link`)')
q-item-section(side)
q-icon(name='las la-link')
q-item-section
q-item-label {{t('navEdit.link')}}
q-item(clickable, @click='addItem(`separator`)')
q-item-section(side)
q-icon(name='las la-minus')
q-item-section
q-item-label {{t('navEdit.separator')}}
q-btn.q-ml-sm.acrylic-btn(
flat
color='grey'
:aria-label='t(`common.actions.add`)'
icon='las la-ellipsis-v'
padding='xs sm'
)
q-menu(:offset='[0, 10]' anchor='bottom right' self='top right' auto-close)
q-list(separator)
q-item(clickable, @click='clearItems', :disable='state.items.length < 1')
q-item-section(side)
q-icon(name='las la-trash-alt', color='negative')
q-item-section
q-item-label {{t('navEdit.clearItems')}}
//- q-item(clickable)
//- q-item-section(side)
//- q-icon(name='mdi-import')
//- q-item-section
//- q-item-label Copy from...
q-page-container
q-page.q-pa-md
template(v-if='state.items.length < 1')
q-card
q-card-section
q-icon.q-mr-sm(name='las la-arrow-left', size='xs')
span {{ t('navEdit.emptyMenuText') }}
template(v-else-if='!state.selected')
q-card
q-card-section
q-icon.q-mr-sm(name='las la-arrow-left', size='xs')
span {{ t('navEdit.noSelection') }}
template(v-if='state.current.type === `header`')
q-card.q-pb-sm
q-card-section
.text-subtitle1 {{t('navEdit.header')}}
q-item
blueprint-icon(icon='typography')
q-item-section
q-item-label {{t(`navEdit.label`)}}
q-item-label(caption) {{t(`navEdit.labelHint`)}}
q-item-section
q-input(
outlined
v-model='state.current.label'
dense
hide-bottom-space
:aria-label='t(`navEdit.label`)'
)
q-item
blueprint-icon(icon='user-groups')
q-item-section
q-item-label {{t(`navEdit.visibility`)}}
q-item-label(caption) {{t(`navEdit.visibilityHint`)}}
q-item-section(avatar)
q-btn-toggle(
v-model='state.current.visibilityLimited'
push
glossy
no-caps
toggle-color='primary'
:options='visibilityOptions'
)
q-item.items-center(v-if='state.current.visibilityLimited')
q-space
.text-caption.q-mr-md {{ t('navEdit.selectGroups') }}
q-select(
style='width: 100%; max-width: calc(50% - 34px);'
outlined
v-model='state.current.visibilityGroups'
:options='state.groups'
option-value='id'
option-label='name'
emit-value
map-options
dense
multiple
:aria-label='t(`navEdit.selectGroups`)'
)
q-card.q-pa-md.q-mt-md.flex
q-space
q-btn.acrylic-btn(
flat
icon='las la-trash-alt'
:label='t(`common.actions.delete`)'
color='negative'
padding='xs md'
@click='removeItem(state.current.id)'
)
template(v-if='state.current.type === `link`')
q-card.q-pb-sm
q-card-section
.text-subtitle1 {{t('navEdit.link')}}
q-item
blueprint-icon(icon='typography')
q-item-section
q-item-label {{t(`navEdit.label`)}}
q-item-label(caption) {{t(`navEdit.labelHint`)}}
q-item-section
q-input(
outlined
v-model='state.current.label'
dense
hide-bottom-space
:aria-label='t(`navEdit.label`)'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='spring')
q-item-section
q-item-label {{t(`navEdit.icon`)}}
q-item-label(caption) {{t(`navEdit.iconHint`)}}
q-item-section
q-input(
outlined
v-model='state.current.icon'
dense
:aria-label='t(`navEdit.icon`)'
)
template(#append)
q-icon.cursor-pointer(
name='las la-icons'
color='primary'
)
q-menu(content-class='shadow-7')
.q-pa-lg: em [ TODO: Icon Picker Dialog ]
// icon-picker-dialog(v-model='pageStore.icon')
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='link')
q-item-section
q-item-label {{t(`navEdit.target`)}}
q-item-label(caption) {{t(`navEdit.targetHint`)}}
q-item-section
q-input(
outlined
v-model='state.current.target'
dense
hide-bottom-space
:aria-label='t(`navEdit.target`)'
)
q-separator.q-my-sm(inset)
q-item(tag='label')
blueprint-icon(icon='external-link')
q-item-section
q-item-label {{t(`navEdit.openInNewWindow`)}}
q-item-label(caption) {{t(`navEdit.openInNewWindowHint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.current.openInNewWindow'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`navEdit.openInNewWindow`)'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='user-groups')
q-item-section
q-item-label {{t(`navEdit.visibility`)}}
q-item-label(caption) {{t(`navEdit.visibilityHint`)}}
q-item-section(avatar)
q-btn-toggle(
v-model='state.current.visibilityLimited'
push
glossy
no-caps
toggle-color='primary'
:options='visibilityOptions'
)
q-item.items-center(v-if='state.current.visibilityLimited')
q-space
.text-caption.q-mr-md {{ t('navEdit.selectGroups') }}
q-select(
style='width: 100%; max-width: calc(50% - 34px);'
outlined
v-model='state.current.visibilityGroups'
:options='state.groups'
option-value='id'
option-label='name'
emit-value
map-options
dense
multiple
:aria-label='t(`navEdit.selectGroups`)'
)
q-card.q-pa-md.q-mt-md.flex.items-start
div
q-btn.acrylic-btn(
v-if='state.current.isNested'
flat
:label='t(`navEdit.unnestItem`)'
icon='mdi-format-indent-decrease'
color='teal'
padding='xs md'
@click='state.current.isNested = false'
)
q-btn.acrylic-btn(
v-else
flat
:label='t(`navEdit.nestItem`)'
icon='mdi-format-indent-increase'
color='teal'
padding='xs md'
@click='state.current.isNested = true'
)
.text-caption.q-mt-md.text-grey-7 {{ t('navEdit.nestingWarn') }}
q-space
q-btn.acrylic-btn(
flat
icon='las la-trash-alt'
:label='t(`common.actions.delete`)'
color='negative'
padding='xs md'
@click='removeItem(state.current.id)'
)
template(v-if='state.current.type === `separator`')
q-card.q-pb-sm
q-card-section
.text-subtitle1 {{t('navEdit.separator')}}
q-item
blueprint-icon(icon='user-groups')
q-item-section
q-item-label {{t(`navEdit.visibility`)}}
q-item-label(caption) {{t(`navEdit.visibilityHint`)}}
q-item-section(avatar)
q-btn-toggle(
v-model='state.current.visibilityLimited'
push
glossy
no-caps
toggle-color='primary'
:options='visibilityOptions'
)
q-item.items-center(v-if='state.current.visibilityLimited')
q-space
.text-caption.q-mr-md {{ t('navEdit.selectGroups') }}
q-select(
style='width: 100%; max-width: calc(50% - 34px);'
outlined
v-model='state.current.visibilityGroups'
:options='state.groups'
option-value='id'
option-label='name'
emit-value
map-options
dense
multiple
:aria-label='t(`navEdit.selectGroups`)'
)
q-card.q-pa-md.q-mt-md.flex
q-space
q-btn.acrylic-btn(
flat
icon='las la-trash-alt'
:label='t(`common.actions.delete`)'
color='negative'
padding='xs md'
@click='removeItem(state.current.id)'
)