Skip to content

Commit

Permalink
feat(AppNavigationItem): Rename title to name
Browse files Browse the repository at this point in the history 
Signed-off-by: John Molakvoæ <[email protected]>
  • Loading branch information
@skjnldsv
skjnldsv committed Jan 5, 2023
1 parent 5649184 commit a8a0ffa
Showing 1 changed file with 47 additions and 29 deletions.
76 changes: 47 additions & 29 deletions src/components/NcAppNavigationItem/NcAppNavigationItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@
* With an icon:

```
<NcAppNavigationItem title="My title" icon="icon-category-enabled" />
<NcAppNavigationItem name="My title" icon="icon-category-enabled" />

```
* With a spinning loader instead of the icon:

```
<NcAppNavigationItem title="Loading Item" :loading="true" />
<NcAppNavigationItem name="Loading Item" :loading="true" />
```

### Element with actions
Expand All @@ -47,7 +47,7 @@ button will be automatically created.

```
<div id="app-navigation-vue"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->
<NcAppNavigationItem title="Item with actions" icon="icon-category-enabled">
<NcAppNavigationItem name="Item with actions" icon="icon-category-enabled">
<template #actions>
<NcActionButton icon="icon-edit" @click="alert('Edit')">
Edit
Expand All @@ -65,7 +65,7 @@ button will be automatically created.
Just nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.

```
<NcAppNavigationItem title="Item with counter" icon="icon-folder">
<NcAppNavigationItem name="Item with counter" icon="icon-folder">
<template #counter>
<NcCounterBubble>
99+
Expand All @@ -80,48 +80,52 @@ Wrap the children in a template with the `slot` property and use the prop `allow
prevent the user from collapsing the items.

```
<NcAppNavigationItem title="Item with children" :allowCollapse="true" :open="true">
<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
<template>
<NcAppNavigationItem title="AppNavigationItemChild1" />
<NcAppNavigationItem title="AppNavigationItemChild2" />
<NcAppNavigationItem title="AppNavigationItemChild3" />
<NcAppNavigationItem title="AppNavigationItemChild4" />
<NcAppNavigationItem name="AppNavigationItemChild1" />
<NcAppNavigationItem name="AppNavigationItemChild2" />
<NcAppNavigationItem name="AppNavigationItemChild3" />
<NcAppNavigationItem name="AppNavigationItemChild4" />
</template>
</NcAppNavigationItem>
```

### Editable element
Add the prop `:editable=true` and an edit placeholder if you need it. By default
the placeholder is the previous title of the element.
the placeholder is the previous name of the element.

```
<NcAppNavigationItem title="Editable Item" :editable="true"
editPlaceholder="your_placeholder_here" icon="icon-folder" @update:title="function(value){alert(value)}" />
<NcAppNavigationItem name="Editable Item" :editable="true"
editPlaceholder="your_placeholder_here" icon="icon-folder" @update:name="function(value){alert(value)}" />
```

### Undo element
Just set the `undo` and `title` props. When clicking the undo button, an `undo` event is emitted.
Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.

```
<NcAppNavigationItem :undo="true" title="Deleted important entry" @undo="alert('undo delete')" />
<NcAppNavigationItem :undo="true" name="Deleted important entry" @undo="alert('undo delete')" />

```

### Link element
Href that start by http will be treated as external and opened in a new tab
```
<div>
<NcAppNavigationItem title="Files" href="/index.php/apps/files" />
<NcAppNavigationItem title="Nextcloud" href="https://nextcloud.com" />
<NcAppNavigationItem name="Files" href="/index.php/apps/files" />
<NcAppNavigationItem name="Nextcloud" href="https://nextcloud.com" />
</div>
```

### Custom title
```
<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
```

### Pinned element
Just set the `pinned` prop.
```
<NcAppNavigationItem title="Pinned item" :pinned="true" />
<NcAppNavigationItem name="Pinned item" :pinned="true" />
```

</docs>

<template>
Expand All @@ -140,14 +144,14 @@ Just set the `pinned` prop.
'active': isActive,
}"
class="app-navigation-entry">
<!-- Icon and title -->
<!-- Icon and name -->
<a v-if="!undo"
class="app-navigation-entry-link"
:aria-description="ariaDescription"
:aria-expanded="opened.toString()"
:href="href || '#'"
:target="isExternal(href) ? '_blank' : ''"
@focus="handleFocus"
:title="title || name"
@blur="handleBlur"
@keydown.tab.exact="handleTab"
@click="onClick">
Expand All @@ -159,13 +163,13 @@ Just set the `pinned` prop.
<NcLoadingIcon v-if="loading" />
<slot v-else-if="isIconShown" name="icon" />
</div>
<span v-if="!editingActive" class="app-navigation-entry__title" :title="title">
{{ title }}
<span v-if="!editingActive" class="app-navigation-entry__title">
{{ name }}
</span>
<div v-if="editingActive" class="editingContainer">
<NcInputConfirmCancel ref="editingInput"
v-model="editingValue"
:placeholder="editPlaceholder !== '' ? editPlaceholder : title"
:placeholder="editPlaceholder !== '' ? editPlaceholder : name"
@cancel="cancelEditing"
@confirm="handleEditingDone" />
</div>
Expand All @@ -175,7 +179,7 @@ Just set the `pinned` prop.
<!-- undo entry -->
<div v-if="undo" class="app-navigation-entry__deleted">
<div class="app-navigation-entry__deleted-description">
{{ title }}
{{ name }}
</div>
</div>

Expand Down Expand Up @@ -265,13 +269,25 @@ export default {
props: {
/**
* The title of the element.
* The main text content of the entry.
*/
title: {
name: {
type: String,
required: true,
},
/**
* The title attribute of the element.
*
* @deprecated Fallback to name if undefined.
* Previously, the name prop was called `title`.
* For the main content text, please use `name`.
*/
title: {
type: String,
default: null,
},
/**
* id attribute of the list item element
*/
Expand Down Expand Up @@ -336,7 +352,7 @@ export default {
},
/**
* Makes the title of the item editable by providing an `ActionButton`
* Makes the name of the item editable by providing an `ActionButton`
* component that toggles a form
*/
editable: {
Expand Down Expand Up @@ -438,7 +454,7 @@ export default {
emits: [
'update:menuOpen',
'update:open',
'update:title',
'update:name',
'click',
'undo',
],
Expand Down Expand Up @@ -553,7 +569,7 @@ export default {
// Edition methods
handleEdit() {
this.editingValue = this.title
this.editingValue = this.name
this.editingActive = true
this.onMenuToggle(false)
this.$nextTick(() => {
Expand All @@ -564,7 +580,9 @@ export default {
this.editingActive = false
},
handleEditingDone() {
// @deprecated, please use `name` instead
this.$emit('update:title', this.editingValue)
this.$emit('update:name', this.editingValue)
this.editingValue = ''
this.editingActive = false
},
Expand Down

0 comments on commit a8a0ffa

Please sign in to comment.