Skip to content

Commit 7bd618c

Browse files
AntreesyAntreesy
committed
feat(NcAppSidebar): introduce 'info' slot for customization
Signed-off-by: Maksim Sukharev <[email protected]>
1 parent 4c89007 commit 7bd618c

File tree

1 file changed

+96
-91
lines changed

1 file changed

+96
-91
lines changed

‎src/components/NcAppSidebar/NcAppSidebar.vue

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

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

0 commit comments

Comments
 (0)