Skip to content

Commit f086d2e

Browse files
AntreesyAntreesy
committed
feat(NcAppSidebar): provide 'content' slot for customization
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
1 parent a7ab7ff commit f086d2e

File tree

1 file changed

+97
-94
lines changed

1 file changed

+97
-94
lines changed

‎src/components/NcAppSidebar/NcAppSidebar.vue‎

Lines changed: 97 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -565,105 +565,108 @@ export default {
565565
'app-sidebar-header--compact': compact,
566566
}"
567567
class="app-sidebar-header">
568-
<!-- container for figure and description, allows easy switching to compact mode -->
569-
<div class="app-sidebar-header__info">
570-
<!-- sidebar header illustration/figure -->
571-
<div v-if="hasFigure && !empty"
572-
:class="{
573-
'app-sidebar-header__figure--with-action': hasFigureClickListener
574-
}"
575-
class="app-sidebar-header__figure"
576-
:style="{
577-
backgroundImage: `url(${background})`
578-
}"
579-
tabindex="0"
580-
@click="onFigureClick"
581-
@keydown.enter="onFigureClick">
582-
<slot class="app-sidebar-header__background" name="header" />
583-
</div>
584-
585-
<!-- sidebar details -->
586-
<div v-if="!empty"
587-
:class="{
588-
'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],
589-
'app-sidebar-header__desc--editable': nameEditable && !subname,
590-
'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
591-
'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],
592-
}"
593-
class="app-sidebar-header__desc">
594-
<!-- favourite icon -->
595-
<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
596-
<slot name="tertiary-actions">
597-
<NcButton v-if="canStar"
598-
:aria-label="favoriteTranslated"
599-
:pressed="isStarred"
600-
class="app-sidebar-header__star"
601-
variant="secondary"
602-
@click.prevent="toggleStarred">
603-
<template #icon>
604-
<NcLoadingIcon v-if="starLoading" />
605-
<Star v-else-if="isStarred" :size="20" />
606-
<StarOutline v-else :size="20" />
607-
</template>
608-
</NcButton>
609-
</slot>
568+
<!-- @slot Alternative to the default header content: use for bare NcAppSidebar with tabs -->
569+
<slot name="content">
570+
<!-- container for figure and description, allows easy switching to compact mode -->
571+
<div class="app-sidebar-header__info">
572+
<!-- sidebar header illustration/figure -->
573+
<div v-if="hasFigure && !empty"
574+
:class="{
575+
'app-sidebar-header__figure--with-action': hasFigureClickListener
576+
}"
577+
class="app-sidebar-header__figure"
578+
:style="{
579+
backgroundImage: `url(${background})`
580+
}"
581+
tabindex="0"
582+
@click="onFigureClick"
583+
@keydown.enter="onFigureClick">
584+
<slot class="app-sidebar-header__background" name="header" />
610585
</div>
611586

612-
<!-- name -->
613-
<div class="app-sidebar-header__name-container">
614-
<div class="app-sidebar-header__mainname-container">
615-
<!-- main name -->
616-
<h2 v-show="!nameEditable"
617-
:id="`app-sidebar-vue-${uid}__header`"
618-
ref="header"
619-
v-linkify="{text: name, linkify: linkifyName}"
620-
:aria-label="title"
621-
:title="title"
622-
class="app-sidebar-header__mainname"
623-
:tabindex="nameEditable ? 0 : -1"
624-
@click.self="editName">
625-
{{ name }}
626-
</h2>
627-
<template v-if="nameEditable">
628-
<form v-click-outside="() => onSubmitName()"
629-
class="app-sidebar-header__mainname-form"
630-
@submit.prevent="onSubmitName">
631-
<input ref="nameInput"
632-
v-focus
633-
class="app-sidebar-header__mainname-input"
634-
type="text"
635-
:placeholder="namePlaceholder"
636-
:value="name"
637-
@keydown.esc.stop="onDismissEditing"
638-
@input="onNameInput">
639-
<NcButton :aria-label="changeNameTranslated"
640-
type="submit"
641-
variant="tertiary-no-background">
642-
<template #icon>
643-
<ArrowRight :size="20" />
644-
</template>
645-
</NcButton>
646-
</form>
647-
</template>
648-
<!-- header main menu -->
649-
<NcActions v-if="$slots['secondary-actions']"
650-
class="app-sidebar-header__menu"
651-
:force-menu="forceMenu">
652-
<slot name="secondary-actions" />
653-
</NcActions>
654-
</div>
655-
<!-- secondary name -->
656-
<p v-if="subname.trim() !== '' || $slots['subname']"
657-
:title="subtitle || undefined"
658-
class="app-sidebar-header__subname">
659-
<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->
660-
<slot name="subname">
661-
{{ subname }}
587+
<!-- sidebar details -->
588+
<div v-if="!empty"
589+
:class="{
590+
'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],
591+
'app-sidebar-header__desc--editable': nameEditable && !subname,
592+
'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
593+
'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],
594+
}"
595+
class="app-sidebar-header__desc">
596+
<!-- favourite icon -->
597+
<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
598+
<slot name="tertiary-actions">
599+
<NcButton v-if="canStar"
600+
:aria-label="favoriteTranslated"
601+
:pressed="isStarred"
602+
class="app-sidebar-header__star"
603+
variant="secondary"
604+
@click.prevent="toggleStarred">
605+
<template #icon>
606+
<NcLoadingIcon v-if="starLoading" />
607+
<Star v-else-if="isStarred" :size="20" />
608+
<StarOutline v-else :size="20" />
609+
</template>
610+
</NcButton>
662611
</slot>
663-
</p>
612+
</div>
613+
614+
<!-- name -->
615+
<div class="app-sidebar-header__name-container">
616+
<div class="app-sidebar-header__mainname-container">
617+
<!-- main name -->
618+
<h2 v-show="!nameEditable"
619+
:id="`app-sidebar-vue-${uid}__header`"
620+
ref="header"
621+
v-linkify="{text: name, linkify: linkifyName}"
622+
:aria-label="title"
623+
:title="title"
624+
class="app-sidebar-header__mainname"
625+
:tabindex="nameEditable ? 0 : -1"
626+
@click.self="editName">
627+
{{ name }}
628+
</h2>
629+
<template v-if="nameEditable">
630+
<form v-click-outside="() => onSubmitName()"
631+
class="app-sidebar-header__mainname-form"
632+
@submit.prevent="onSubmitName">
633+
<input ref="nameInput"
634+
v-focus
635+
class="app-sidebar-header__mainname-input"
636+
type="text"
637+
:placeholder="namePlaceholder"
638+
:value="name"
639+
@keydown.esc.stop="onDismissEditing"
640+
@input="onNameInput">
641+
<NcButton :aria-label="changeNameTranslated"
642+
type="submit"
643+
variant="tertiary-no-background">
644+
<template #icon>
645+
<ArrowRight :size="20" />
646+
</template>
647+
</NcButton>
648+
</form>
649+
</template>
650+
<!-- header main menu -->
651+
<NcActions v-if="$slots['secondary-actions']"
652+
class="app-sidebar-header__menu"
653+
:force-menu="forceMenu">
654+
<slot name="secondary-actions" />
655+
</NcActions>
656+
</div>
657+
<!-- secondary name -->
658+
<p v-if="subname.trim() !== '' || $slots['subname']"
659+
:title="subtitle || undefined"
660+
class="app-sidebar-header__subname">
661+
<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->
662+
<slot name="subname">
663+
{{ subname }}
664+
</slot>
665+
</p>
666+
</div>
664667
</div>
665668
</div>
666-
</div>
669+
</slot>
667670

668671
<NcButton v-if="!noClose"
669672
ref="closeButton"

0 commit comments

Comments
 (0)