Skip to content

Commit 299aa59

Browse files
AntreesyAntreesy
committed
feat(NcAppSidebar): introduce 'content' slot
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
1 parent 30846e5 commit 299aa59

File tree

1 file changed

+93
-90
lines changed

1 file changed

+93
-90
lines changed

‎src/components/NcAppSidebar/NcAppSidebar.vue‎

Lines changed: 93 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -576,101 +576,104 @@ export default {
576576
'app-sidebar-header--compact': compact,
577577
}"
578578
class="app-sidebar-header">
579-
<!-- container for figure and description, allows easy switching to compact mode -->
580-
<div class="app-sidebar-header__info">
581-
<!-- sidebar header illustration/figure -->
582-
<div v-if="hasFigure && !empty"
583-
:class="{
584-
'app-sidebar-header__figure--with-action': hasFigureClickListener
585-
}"
586-
class="app-sidebar-header__figure"
587-
:style="{
588-
backgroundImage: `url(${background})`
589-
}"
590-
tabindex="0"
591-
@click="onFigureClick"
592-
@keydown.enter="onFigureClick">
593-
<slot class="app-sidebar-header__background" name="header" />
594-
</div>
595-
596-
<!-- sidebar details -->
597-
<div v-if="!empty"
598-
:class="{
599-
'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],
600-
'app-sidebar-header__desc--editable': nameEditable && !subname,
601-
'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
602-
'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],
603-
}"
604-
class="app-sidebar-header__desc">
605-
<!-- favourite icon -->
606-
<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
607-
<slot name="tertiary-actions">
608-
<NcButton v-if="canStar"
609-
:aria-label="favoriteTranslated"
610-
:pressed="isStarred"
611-
class="app-sidebar-header__star"
612-
variant="secondary"
613-
@click.prevent="toggleStarred">
614-
<template #icon>
615-
<NcLoadingIcon v-if="starLoading" />
616-
<Star v-else-if="isStarred" :size="20" />
617-
<StarOutline v-else :size="20" />
618-
</template>
619-
</NcButton>
620-
</slot>
579+
<!-- @slot Alternative to the default header content: use for bare NcAppSidebar with tabs. NcAppSidebarHeader would be required to use for accessibility reasons -->
580+
<slot name="content">
581+
<!-- container for figure and description, allows easy switching to compact mode -->
582+
<div class="app-sidebar-header__info">
583+
<!-- sidebar header illustration/figure -->
584+
<div v-if="hasFigure && !empty"
585+
:class="{
586+
'app-sidebar-header__figure--with-action': hasFigureClickListener
587+
}"
588+
class="app-sidebar-header__figure"
589+
:style="{
590+
backgroundImage: `url(${background})`
591+
}"
592+
tabindex="0"
593+
@click="onFigureClick"
594+
@keydown.enter="onFigureClick">
595+
<slot class="app-sidebar-header__background" name="header" />
621596
</div>
622597

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

675678
<NcButton ref="closeButton"
676679
:aria-label="closeTranslated"

0 commit comments

Comments
 (0)