Skip to content

Commit

Permalink
docs(NcAppSIdebarTabs): add JSDocs and examples
Browse files Browse the repository at this point in the history 
Signed-off-by: Grigorii Shartsev <grigorii.shartsev@nextcloud.com>
  • Loading branch information
@ShGKme
ShGKme committed Mar 28, 2023
1 parent f9bc507 commit f1acfcc
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 50 deletions.
173 changes: 134 additions & 39 deletions src/components/NcAppSidebar/NcAppSidebar.vue
View file
Expand Up @@ -31,54 +31,48 @@ include a standard-header like it's used by the files app.

```vue
<template>
<div>
<NcCheckboxRadioSwitch :checked.sync="hideFirstTab">
The first tab is hidden
</NcCheckboxRadioSwitch>
<NcAppSidebar
title="cat-picture.jpg"
subtitle="last edited 3 weeks ago">
<NcAppSidebarTab v-if="!hideFirstTab" name="Fist tab" id="first-tab">
<template #icon>
<Cog :size="20" />
</template>
New tab
</NcAppSidebarTab>
<NcAppSidebarTab name="Settings" id="settings-tab">
<template #icon>
<Cog :size="20" />
</template>
Settings tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Sharing" id="share-tab">
<template #icon>
<ShareVariant :size="20" />
</template>
Sharing tab content
</NcAppSidebarTab>
</NcAppSidebar>
</div>
<NcAppSidebar
title="cat-picture.jpg"
subtitle="last edited 3 weeks ago">
<NcAppSidebarTab name="Search" id="search-tab">
<template #icon>
<Magnify :size="20" />
</template>
Search tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Settings" id="settings-tab">
<template #icon>
<Cog :size="20" />
</template>
Settings tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Sharing" id="share-tab">
<template #icon>
<ShareVariant :size="20" />
</template>
Sharing tab content
</NcAppSidebarTab>
</NcAppSidebar>
</template>
<script>
import Magnify from 'vue-material-design-icons/Magnify'
import Cog from 'vue-material-design-icons/Cog'
import ShareVariant from 'vue-material-design-icons/ShareVariant'
export default {
components: {
Magnify,
Cog,
ShareVariant,
},
data() {
return {
hideFirstTab: true,
}
},
}
</script>
```

### One tab

Single tab is rendered without navigation.

```vue
<template>
<div>
Expand All @@ -89,7 +83,7 @@ include a standard-header like it's used by the files app.
<template #icon>
<Cog :size="20" />
</template>
New tab
Single tab content
</NcAppSidebarTab>
</NcAppSidebar>
</div>
Expand All @@ -105,18 +99,117 @@ export default {
</script>
```

### One or two tabs with condition
### Dynamic tabs

```vue
<template>
<div>
<NcCheckboxRadioSwitch :checked.sync="hideFirstTab">
The first tab is hidden
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :checked.sync="showTabs[0]">Show search tab</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :checked.sync="showTabs[1]">Show settings tab</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :checked.sync="showTabs[2]">Show sharing tab</NcCheckboxRadioSwitch>
<NcAppSidebar
title="cat-picture.jpg"
subtitle="last edited 3 weeks ago">
<NcAppSidebarTab v-if="!hideFirstTab" name="Settings" id="settings-tab">
<NcAppSidebarTab v-if="showTabs[0]" name="Search" id="search-tab">
<template #icon>
<Magnify :size="20" />
</template>
Search tab content
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showTabs[1]" name="Settings" id="settings-tab">
<template #icon>
<Cog :size="20" />
</template>
Settings
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showTabs[2]" name="Sharing" id="share-tab">
<template #icon>
<ShareVariant :size="20" />
</template>
Sharing tab content
</NcAppSidebarTab>
</NcAppSidebar>
</div>
</template>
<script>
import Magnify from 'vue-material-design-icons/Magnify'
import Cog from 'vue-material-design-icons/Cog'
import ShareVariant from 'vue-material-design-icons/ShareVariant'
export default {
components: {
Magnify,
Cog,
ShareVariant,
},
data() {
return {
showTabs: [true, true, false],
}
},
}
</script>
```

### Custom order

```vue
<template>
<NcAppSidebar
title="cat-picture.jpg"
subtitle="last edited 3 weeks ago">
<NcAppSidebarTab name="Search" id="search-tab" order="3">
<template #icon>
<Magnify :size="20" />
</template>
Search tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Settings" id="settings-tab" order="2">
<template #icon>
<Cog :size="20" />
</template>
Settings tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Sharing" id="share-tab" order="1">
<template #icon>
<ShareVariant :size="20" />
</template>
Sharing tab content
</NcAppSidebarTab>
</NcAppSidebar>
</template>
<script>
import Magnify from 'vue-material-design-icons/Magnify'
import Cog from 'vue-material-design-icons/Cog'
import ShareVariant from 'vue-material-design-icons/ShareVariant'
export default {
components: {
Magnify,
Cog,
ShareVariant,
},
}
</script>
```

### Activating tab programmatically

```vue
<template>
<div>
<NcMultiselect v-model="active" :options="['search-tab', 'settings-tab', 'share-tab']" />
<NcAppSidebar
title="cat-picture.jpg"
subtitle="last edited 3 weeks ago"
:active.sync="active">
<NcAppSidebarTab name="Search" id="search-tab">
<template #icon>
<Magnify :size="20" />
</template>
Search tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Settings" id="settings-tab">
<template #icon>
<Cog :size="20" />
</template>
Expand All @@ -132,17 +225,19 @@ export default {
</div>
</template>
<script>
import Magnify from 'vue-material-design-icons/Magnify'
import Cog from 'vue-material-design-icons/Cog'
import ShareVariant from 'vue-material-design-icons/ShareVariant'
export default {
components: {
Magnify,
Cog,
ShareVariant,
},
data() {
return {
hideFirstTab: true,
active: 'search-tab',
}
},
}
Expand Down
31 changes: 20 additions & 11 deletions src/components/NcAppSidebar/NcAppSidebarTabs.vue
View file
Expand Up @@ -60,6 +60,7 @@
<!-- tabs content -->
<div :class="{'app-sidebar-tabs__content--multiple': hasMultipleTabs}"
class="app-sidebar-tabs__content">
<!-- @slot Tabs content - NcAppSidebarTab components or any content if there is no tabs -->
<slot />
</div>
</div>
Expand All @@ -72,7 +73,6 @@ export default {
name: 'NcAppSidebarTabs',
components: {
// Component to render the material design icon (vnodes)
NcVNodes,
},
Expand Down Expand Up @@ -100,22 +100,28 @@ export default {
data() {
return {
/**
* The tab component instances to build the tab navbar from.
* Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.
*/
tabs: [],
/**
* The id of the currently active tab.
* Local active (open) tab's ID. It allows to use component without active.sync
*/
activeTab: '',
}
},
computed: {
/**
* Has multiple tabs. If only one tab - its content is shown without navigation
*
* @return {boolean}
*/
hasMultipleTabs() {
return this.tabs.length > 1
},
currentTabIndex() {
return this.tabs.findIndex(tab => tab.id === this.activeTab)
return this.tabs.findIndex((tab) => tab.id === this.activeTab)
},
},
Expand All @@ -137,6 +143,9 @@ export default {
*/
setActive(id) {
this.activeTab = id
/**
* @property {string} active - active tab's id
*/
this.$emit('update:active', this.activeTab)
},
Expand All @@ -148,7 +157,7 @@ export default {
if (this.currentTabIndex > 0) {
this.setActive(this.tabs[this.currentTabIndex - 1].id)
}
this.focusActiveTab() // focus nav item
this.focusActiveTab()
},
/**
Expand All @@ -159,7 +168,7 @@ export default {
if (this.currentTabIndex < this.tabs.length - 1) {
this.setActive(this.tabs[this.currentTabIndex + 1].id)
}
this.focusActiveTab() // focus nav item
this.focusActiveTab()
},
/**
Expand All @@ -168,7 +177,7 @@ export default {
*/
focusFirstTab() {
this.setActive(this.tabs[0].id)
this.focusActiveTab() // focus nav item
this.focusActiveTab()
},
/**
Expand All @@ -177,7 +186,7 @@ export default {
*/
focusLastTab() {
this.setActive(this.tabs[this.tabs.length - 1].id)
this.focusActiveTab() // focus nav item
this.focusActiveTab()
},
/**
Expand Down Expand Up @@ -210,7 +219,7 @@ export default {
/**
* Register child tab in the tabs
*
* @param {object} tab - tab props (only the "id" is used actually)
* @param {object} tab child tab passed to slot
*/
registerTab(tab) {
this.tabs.push(tab)
Expand All @@ -226,9 +235,9 @@ export default {
},
/**
* Unregister child tab in the tabs
* Unregister child tab from the tabs
*
* @param {string} id - tab's id
* @param {string} id tab's id
*/
unregisterTab(id) {
const tabIndex = this.tabs.findIndex((tab) => tab.id === id)
Expand Down

0 comments on commit f1acfcc

Please sign in to comment.