Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use new named slot syntax #2160

Merged
merged 1 commit into from
Aug 6, 2021
Merged

Use new named slot syntax #2160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions src/components/ActionButton/ActionButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,21 @@ You can also use a custom icon, for example from the vue-material-design-icons l
<template>
<Actions>
<ActionButton>
<HandLeft
slot="icon"
:size="24"
decorative
title="" />
<template #icon>
<HandLeft
:size="24"
decorative
title="" />
</template>
Raise left hand
</ActionButton>
<ActionButton>
<HandRight
slot="icon"
:size="24"
decorative
title="" />
<template #icon>
<HandRight
:size="24"
decorative
title="" />
</template>
Raise right hand
</ActionButton>
</Actions>
Expand Down
61 changes: 30 additions & 31 deletions src/components/Actions/Actions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,15 +89,13 @@ It can be used with one or multiple actions.
<div style="display: flex;align-items: center;">
<button @click="toggled = !toggled">Toggle multiple action</button>
<Actions>
<DotsHorizontalCircleOutline
slot="icon"
:size="24"
decorative />
<template #icon>
<DotsHorizontalCircleOutline :size="24" decorative />
</template>
<ActionButton>
<MicrophoneOff
slot="icon"
:size="24"
decorative />
<template #icon>
<MicrophoneOff :size="24" decorative />
</template>
Mute
</ActionButton>
<ActionButton v-if="toggled" icon="icon-delete">Delete</ActionButton>
Expand Down Expand Up @@ -174,29 +172,30 @@ export default {
@after-show="onOpen"
@hide="closeMenu">
<!-- Menu open/close trigger button -->
<button slot="trigger"
ref="menuButton"
:disabled="disabled"
class="icon action-item__menutoggle"
:class="{
[defaultIcon]: !iconSlotIsPopulated,
'action-item__menutoggle--with-title': menuTitle,
'action-item__menutoggle--with-icon-slot': iconSlotIsPopulated,
'action-item__menutoggle--default-icon': !iconSlotIsPopulated && defaultIcon === '',
'action-item__menutoggle--primary': primary
}"
aria-haspopup="true"
:aria-label="ariaLabel"
:aria-controls="randomId"
:aria-expanded="opened ? 'true' : 'false'"
test-attr="1"
type="button"
@focus="onFocus"
@blur="onBlur">
<slot v-if="iconSlotIsPopulated" name="icon" />
<DotsHorizontal v-else-if="defaultIcon === ''" :size="24" decorative />
{{ menuTitle }}
</button>
<template #trigger>
<button ref="menuButton"
:disabled="disabled"
class="icon action-item__menutoggle"
:class="{
[defaultIcon]: !iconSlotIsPopulated,
'action-item__menutoggle--with-title': menuTitle,
'action-item__menutoggle--with-icon-slot': iconSlotIsPopulated,
'action-item__menutoggle--default-icon': !iconSlotIsPopulated && defaultIcon === '',
'action-item__menutoggle--primary': primary
}"
aria-haspopup="true"
:aria-label="ariaLabel"
:aria-controls="randomId"
:aria-expanded="opened ? 'true' : 'false'"
test-attr="1"
type="button"
@focus="onFocus"
@blur="onBlur">
<slot v-if="iconSlotIsPopulated" name="icon" />
<DotsHorizontal v-else-if="defaultIcon === ''" :size="24" decorative />
{{ menuTitle }}
</button>
</template>

<!-- Menu content -->
<div v-show="opened"
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppContent/AppContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ can be added by providing content to the named slot `list`.
```vue
<template>
<AppContent>
<template slot="list">
<template #list>
<div>Resizable list content</div>
</template>

Expand Down
6 changes: 3 additions & 3 deletions src/components/AppNavigationCaption/AppNavigationCaption.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
```
<AppNavigationCaption
title="Your caption goes here">
<ActionButton
slot="actions"
icon="icon-add"/>
<template #actions>
<ActionButton icon="icon-add"/>
</template>
</AppNavigationCaption>
```
</docs>
Expand Down
12 changes: 9 additions & 3 deletions src/components/AppNavigationIconBullet/AppNavigationIconBullet.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,21 @@
This component is made to be used inside of the [AppNavigationItem](#AppNavigationItem) component slot: `icon`.

```
<AppNavigationIconBullet slot="icon" color="0082c9" />
<AppNavigationIconBullet slot="icon" color="#0082c9" />
<template #icon>
<AppNavigationIconBullet color="0082c9" />
</template>
<template #icon>
<AppNavigationIconBullet color="#0082c9" />
</template>

```

### AppNavigationItem example
```
<AppNavigationItem title="Entry 2" :pinned="true">
<AppNavigationIconBullet slot="icon" color="0082c9" />
<template #icon>
<AppNavigationIconBullet color="0082c9" />
</template>
</AppNavigationItem>
```
</docs>
Expand Down
12 changes: 7 additions & 5 deletions src/components/AppNavigationItem/AppNavigationItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ button will be automatically created.

```
<AppNavigationItem title="Item with actions" icon="icon-category-enabled">
<template slot="actions">
<template #actions>
<ActionButton icon="icon-edit" @click="alert('Edit')">
Edit
</ActionButton>
Expand All @@ -60,13 +60,15 @@ button will be automatically created.
```

### Element with counter
Just nest the counter into `<AppNavigationItem>` and add `slot="counter"` to it.
Just nest the counter in a template within `<AppNavigationItem>` and add `#counter` to it.

```
<AppNavigationItem title="Item with counter" icon="icon-folder">
<CounterBubble slot="counter">
99+
</CounterBubble>
<template #counter>
<CounterBubble>
99+
</CounterBubble>
</template>
</AppNavigationItem>
```

Expand Down
10 changes: 5 additions & 5 deletions src/components/AppNavigationToggle/AppNavigationToggle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@
:aria-expanded="open ? 'true' : 'false'"
aria-controls="app-navigation-vue"
@click="toggleNavigation">
<Menu
slot="icon"
:size="24"
title=""
decorative />
<template #icon>
<Menu :size="24"
title=""
decorative />
</template>
{{ label }}
</ActionButton>
</Actions>
Expand Down
6 changes: 4 additions & 2 deletions src/components/AppSidebar/AppSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@ include a standard-header like it's used by the files app.
title="cat-picture.jpg"
subtitle="last edited 3 weeks ago">
<AppSidebarTab icon="icon-settings" name="Settings" id="settings">
<Cog slot="icon" :size="24" decorative />
<template #icon>
<Cog :size="24" decorative />
</template>
Settings tab content
</AppSidebarTab>
<AppSidebarTab icon="icon-share" name="Sharing" id="share">
Expand Down Expand Up @@ -87,7 +89,7 @@ include a standard-header like it's used by the files app.
:title-placeholder="titlePlaceholder"
:subtitle="subtitle"
@update:title="titleUpdate">
<template slot="tertiary-actions">
<template #tertiary-actions>
<form>
<input type="checkbox" @click="toggledCheckbox"/>
</form>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Avatar/Avatar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
@after-show="handlePopoverAfterShow"
@after-hide="handlePopoverAfterHide">
<PopoverMenu ref="popoverMenu" :menu="menu" />
<template slot="trigger">
<template #trigger>
<div v-if="contactsMenuLoading" class="icon-loading" />
<DotsHorizontal v-else
:size="24"
Expand Down
7 changes: 3 additions & 4 deletions src/components/Breadcrumbs/Breadcrumbs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,9 @@ is dropped on a creadcrumb.
<div class="container">
<Breadcrumbs @dropped="dropped">
<Breadcrumb title="Home" href="/" @dropped="droppedOnCrumb">
<Folder
slot="icon"
:size="24"
decorative />
<template #icon>
<Folder :size="24" decorative />
</template>
</Breadcrumb>
<Breadcrumb title="Folder 1" href="/Folder 1" />
<Breadcrumb title="Folder 2" href="/Folder 1/Folder 2" :disable-drop="true" />
Expand Down
9 changes: 5 additions & 4 deletions src/components/DatetimePicker/DatetimePicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,10 +121,11 @@ export default {
<Popover
:open.sync="showTimezonePopover"
open-class="timezone-popover-wrapper">
<button slot="trigger"
class="datetime-picker-inline-icon icon-timezone icon"
:class="{'datetime-picker-inline-icon--highlighted': highlightTimezone}"
@mousedown.stop.prevent="() => {}" />
<template #trigger>
<button class="datetime-picker-inline-icon icon-timezone icon"
:class="{'datetime-picker-inline-icon--highlighted': highlightTimezone}"
@mousedown.stop.prevent="() => {}" />
</template>

<div class="timezone-popover-wrapper__title">
<strong>
Expand Down
4 changes: 3 additions & 1 deletion src/components/Multiselect/Multiselect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,9 @@ export default {
<slot :name="slot" v-bind="scope" />
</template>

<span slot="noResult">{{ t('No results') }}</span>
<template #noResult>
<span>{{ t('No results') }}</span>
</template>
</VueMultiselect>
</template>

Expand Down
4 changes: 3 additions & 1 deletion src/components/MultiselectTags/MultiselectTags.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,9 @@ export default {
:tag-width="60"
:disabled="disabled"
@input="update">
<span slot="noResult">{{ t('No results') }}</span>
<template #noResult>
<span>{{ t('No results') }}</span>
</template>
<template #option="scope">
{{ tagLabel(scope.option) }}
</template>
Expand Down
6 changes: 4 additions & 2 deletions src/components/Popover/Popover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ With a `<button>` as a trigger:
```vue
<template>
<Popover>
<button slot="trigger"> I am the trigger </button>
<template #trigger>
<button> I am the trigger </button>
</template>
<template>
<h2>this is some content</h2>
</template>
Expand All @@ -61,7 +63,7 @@ With a `<button>` as a trigger:
<!-- This will be the popover target (for the events and position) -->
<slot name="trigger" />
<!-- This will be the content of the popover -->
<template slot="popover">
<template #popover>
<slot />
</template>
</VPopover>
Expand Down
4 changes: 3 additions & 1 deletion src/components/SettingsSelectGroup/SettingsSelectGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@
:disabled="disabled"
@input="update"
@search-change="findGroup">
<span slot="noResult">{{ t( 'No results') }}</span>
<template #noResult>
<span>{{ t( 'No results') }}</span>
</template>
</Multiselect>
</template>

Expand Down
53 changes: 27 additions & 26 deletions src/components/UserBubble/UserBubble.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,34 +75,35 @@ This component has the following slot:
class="user-bubble__wrapper"
@update:open="onOpenChange">
<!-- Main userbubble structure -->
<div slot="trigger"
v-bind="isLinkComponent"
class="user-bubble__content"
:style="styles.content"
:class="primary ? 'user-bubble__content--primary' : ''"
@click="onClick">
<!-- Avatar -->
<Avatar :url="isCustomAvatar && isAvatarUrl ? avatarImage : undefined"
:icon-class="isCustomAvatar && !isAvatarUrl ? avatarImage : undefined"
:user="user"
:display-name="displayName"
:size="size - (margin * 2)"
:style="styles.avatar"
:disable-tooltip="true"
:disable-menu="true"
v-bind="$props"
class="user-bubble__avatar" />
<template #trigger>
<div v-bind="isLinkComponent"
class="user-bubble__content"
:style="styles.content"
:class="primary ? 'user-bubble__content--primary' : ''"
@click="onClick">
<!-- Avatar -->
<Avatar :url="isCustomAvatar && isAvatarUrl ? avatarImage : undefined"
:icon-class="isCustomAvatar && !isAvatarUrl ? avatarImage : undefined"
:user="user"
:display-name="displayName"
:size="size - (margin * 2)"
:style="styles.avatar"
:disable-tooltip="true"
:disable-menu="true"
v-bind="$props"
class="user-bubble__avatar" />

<!-- Title -->
<span class="user-bubble__title">
{{ displayName || user }}
</span>
<!-- Title -->
<span class="user-bubble__title">
{{ displayName || user }}
</span>

<!-- @slot Optional slot just after the title -->
<span v-if="$slots.title" class="user-bubble__secondary">
<slot name="title" />
</span>
</div>
<!-- @slot Optional slot just after the title -->
<span v-if="$slots.title" class="user-bubble__secondary">
<slot name="title" />
</span>
</div>
</template>

<!-- @slot Main Popover content on userbubble hover/focus -->
<slot />
Expand Down