Skip to content

Commit b94acdf

Browse files
AntreesyAntreesy
committed
feat(NcAppSidebar): introduce 'info' slot for customization
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
1 parent 12f45e0 commit b94acdf

File tree

1 file changed

+96
-90
lines changed

1 file changed

+96
-90
lines changed

‎src/components/NcAppSidebar/NcAppSidebar.vue‎

Lines changed: 96 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -577,101 +577,107 @@ export default {
577577
:name
578578
tabindex="-1" />
579579

580-
<!-- container for figure and description, allows easy switching to compact mode -->
581-
<div class="app-sidebar-header__info">
582-
<!-- sidebar header illustration/figure -->
583-
<div v-if="(isSlotPopulated($slots.header?.()) || background) && !empty"
584-
:class="{
585-
'app-sidebar-header__figure--with-action': hasFigureClickListener
586-
}"
587-
class="app-sidebar-header__figure"
588-
:style="{
589-
backgroundImage: `url(${background})`
590-
}"
591-
tabindex="0"
592-
@click="onFigureClick"
593-
@keydown.enter="onFigureClick">
594-
<slot class="app-sidebar-header__background" name="header" />
595-
</div>
596-
597-
<!-- sidebar details -->
598-
<div v-if="!empty"
599-
:class="{
600-
'app-sidebar-header__desc--with-tertiary-action': canStar || isSlotPopulated($slots['tertiary-actions']?.()),
601-
'app-sidebar-header__desc--editable': nameEditable && !subname,
602-
'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
603-
'app-sidebar-header__desc--without-actions': !isSlotPopulated($slots['secondary-actions']?.()),
604-
}"
605-
class="app-sidebar-header__desc">
606-
<!-- favourite icon -->
607-
<div v-if="canStar || isSlotPopulated($slots['tertiary-actions']?.())" class="app-sidebar-header__tertiary-actions">
608-
<slot name="tertiary-actions">
609-
<NcButton v-if="canStar"
610-
:aria-label="favoriteTranslated"
611-
:pressed="isStarred"
612-
class="app-sidebar-header__star"
613-
variant="secondary"
614-
@click.prevent="toggleStarred">
615-
<template #icon>
616-
<NcLoadingIcon v-if="starLoading" />
617-
<IconStar v-else-if="isStarred" :size="20" />
618-
<IconStarOutline v-else :size="20" />
619-
</template>
620-
</NcButton>
621-
</slot>
580+
<!-- @slot Alternative to the default header info: use for bare NcAppSidebar with tabs.
581+
NcAppSidebarHeader would be required to use for accessibility reasons.
582+
This overrides the behaviour of `empty` prop.
583+
-->
584+
<slot name="info">
585+
<!-- container for figure and description, allows easy switching to compact mode -->
586+
<div class="app-sidebar-header__info">
587+
<!-- sidebar header illustration/figure -->
588+
<div v-if="(isSlotPopulated($slots.header?.()) || background) && !empty"
589+
:class="{
590+
'app-sidebar-header__figure--with-action': hasFigureClickListener
591+
}"
592+
class="app-sidebar-header__figure"
593+
:style="{
594+
backgroundImage: `url(${background})`
595+
}"
596+
tabindex="0"
597+
@click="onFigureClick"
598+
@keydown.enter="onFigureClick">
599+
<slot class="app-sidebar-header__background" name="header" />
622600
</div>
623601

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

676682
<NcButton ref="closeButton"
677683
:aria-label="closeTranslated"

0 commit comments

Comments
 (0)