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.

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

Migrate from deprecated title prop #4052

Merged
merged 1 commit into from May 9, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/NcActionButton/NcActionButton.vue
Expand Up @@ -196,9 +196,9 @@ export default {
</slot>

<!-- long text with name -->
<p v-if="nameTitleFallback">
<p v-if="name">
<strong class="action-button__title">
{{ nameTitleFallback }}
{{ name }}
</strong>
<br>
<!-- white space is shown on longtext, so we can't
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcActionLink/NcActionLink.vue
Expand Up @@ -67,9 +67,9 @@ export default {
</slot>

<!-- long text with name -->
<p v-if="nameTitleFallback">
<p v-if="name">
<strong class="action-link__title">
{{ nameTitleFallback }}
{{ name }}
</strong>
<br>
<!-- white space is shown on longtext, so we can't
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcActionRouter/NcActionRouter.vue
Expand Up @@ -38,9 +38,9 @@
</slot>

<!-- long text with name -->
<p v-if="nameTitleFallback">
<p v-if="name">
<strong class="action-router__title">
{{ nameTitleFallback }}
{{ name }}
</strong>
<br>
<!-- white space is shown on longtext, so we can't
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcActionText/NcActionText.vue
Expand Up @@ -35,9 +35,9 @@
</slot>

<!-- long text with name -->
<p v-if="nameTitleFallback">
<p v-if="name">
<strong class="action-text__title">
{{ nameTitleFallback }}
{{ name }}
</strong>
<br>
<!-- white space is shown on longtext, so we can't
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcActionTextEditable/NcActionTextEditable.vue
Expand Up @@ -76,8 +76,8 @@ export default {
<input :id="id" type="submit" class="action-text-editable__submit">

<!-- name -->
<strong v-if="nameTitleFallback" class="action-text__title">
{{ nameTitleFallback }}
<strong v-if="name" class="action-text__title">
{{ name }}
</strong>

<textarea :disabled="disabled"
Expand Down
31 changes: 6 additions & 25 deletions src/components/NcAppNavigationItem/NcAppNavigationItem.vue
Expand Up @@ -228,7 +228,7 @@ Just set the `pinned` prop.
:aria-expanded="opened.toString()"
:href="href || routerLinkHref || '#'"
:target="isExternal(href) ? '_blank' : ''"
:title="title || nameTitleFallback"
:title="title || name"
@blur="handleBlur"
@click="onClick($event, navigate, routerLinkHref)"
@focus="handleFocus"
Expand All @@ -242,12 +242,12 @@ Just set the `pinned` prop.
<slot v-else-if="isIconShown" name="icon" />
</div>
<span v-if="!editingActive" class="app-navigation-entry__title">
{{ nameTitleFallback }}
{{ name }}
</span>
<div v-if="editingActive" class="editingContainer">
<NcInputConfirmCancel ref="editingInput"
v-model="editingValue"
:placeholder="editPlaceholder !== '' ? editPlaceholder : nameTitleFallback"
:placeholder="editPlaceholder !== '' ? editPlaceholder : name"
@cancel="cancelEditing"
@confirm="handleEditingDone" />
</div>
Expand All @@ -257,7 +257,7 @@ Just set the `pinned` prop.
<!-- undo entry -->
<div v-if="undo" class="app-navigation-entry__deleted">
<div class="app-navigation-entry__deleted-description">
{{ nameTitleFallback }}
{{ name }}
</div>
</div>

Expand Down Expand Up @@ -347,20 +347,14 @@ export default {
props: {
/**
* The main text content of the entry.
* Previously called `title`, now deprecated
*/
name: {
type: String,
// TODO: Make it required in the next major release (see title prop)
default: '',
required: true,
},

/**
* The title attribute of the element.
*
* ⚠ Using this prop as the main content text is DEPRECATED
* Please use `name` instead. If you were planning to define the
* html element title attribute, this is the proper way.
*/
title: {
type: String,
Expand Down Expand Up @@ -561,17 +555,6 @@ export default {
},

computed: {
/**
* TODO: drop on the 8.0.0 major, see title/name prop
*/
nameTitleFallback() {
if (!this.name) {
console.warn('The `name` prop is required. Please migrate away from the deprecated `title` prop.')
return this.title
}
return this.name
},

isRouterLink() {
return this.to && !this.href
},
Expand Down Expand Up @@ -665,7 +648,7 @@ export default {

// Edition methods
handleEdit() {
this.editingValue = this.nameTitleFallback
this.editingValue = this.name
this.editingActive = true
this.onMenuToggle(false)
this.$nextTick(() => {
Expand All @@ -676,8 +659,6 @@ 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
24 changes: 4 additions & 20 deletions src/components/NcBreadcrumb/NcBreadcrumb.vue
Expand Up @@ -40,22 +40,22 @@ This component is meant to be used inside a Breadcrumbs component.
@dragenter="dragEnter"
@dragleave="dragLeave">
<component :is="tag"
v-if="(nameTitleFallback || icon) && !$slots.default"
v-if="(name || icon) && !$slots.default"
:title="title"
v-bind="linkAttributes"
v-on="$listeners">
<!-- @slot Slot for passing a material design icon. Precedes the icon and title prop. -->
<slot name="icon">
<span v-if="icon" :class="icon" class="icon" />
<span v-else>{{ nameTitleFallback }}</span>
<span v-else>{{ name }}</span>
</slot>
</component>
<NcActions v-if="$slots.default"
ref="actions"
type="tertiary"
:force-menu="forceMenu"
:open="open"
:menu-title="nameTitleFallback"
:menu-title="name"
:title="title"
:force-title="true"
:container="`.vue-crumb[${crumbId}]`"
Expand Down Expand Up @@ -86,19 +86,13 @@ export default {
props: {
/**
* The main text content of the entry.
* Previously called `title`, now deprecated
*/
name: {
type: String,
// TODO: Make it required in the next major release (see title prop)
default: null,
required: true,
},
/**
* The title attribute of the element.
*
* ⚠ Using this prop as the main content text is DEPRECATED
* Please use `name` instead. If you were planning to define the
* html element title attribute, this is the proper way.
*/
title: {
type: String,
Expand Down Expand Up @@ -183,16 +177,6 @@ export default {
}
},
computed: {
/**
* TODO: drop on the 8.0.0 major, see title/name prop
*/
nameTitleFallback() {
if (this.name === null) {
console.warn('The `name` prop is required. Please migrate away from the deprecated `title` prop.')
return this.title
}
return this.name
},
/**
* Determines which element tag to use
*
Expand Down
4 changes: 1 addition & 3 deletions src/components/NcBreadcrumbs/NcBreadcrumbs.vue
Expand Up @@ -552,8 +552,7 @@ export default {
const href = crumb.componentOptions.propsData.href
const disabled = crumb.componentOptions.propsData.disableDrop
const title = crumb.componentOptions.propsData.title
// TODO: Remove this fallback once nameTitleFallback is removed from NcBreadcrumb
const name = crumb.componentOptions.propsData.name || title
const name = crumb.componentOptions.propsData.name

// Decide whether to show the breadcrumbs as ActionRouter or ActionLink
let element = 'NcActionLink'
Expand All @@ -573,7 +572,6 @@ export default {
props: {
href,
title,
name: '', // TODO: Remove this once nameTitleFallback is removed from actionText.js mixin
nickvergessen marked this conversation as resolved.
Show resolved Hide resolved
to,
},
// Prevent the breadcrumbs from being draggable
Expand Down
19 changes: 1 addition & 18 deletions src/mixins/actionText.js
Expand Up @@ -35,19 +35,13 @@ export default {
},
/**
* The main text content of the entry.
* Previously called `title`, now deprecated
*/
name: {
type: String,
// TODO: Make the default an empty string in the next major release (see title prop)
default: null,
default: '',
},
/**
* The title attribute of the element.
*
* ⚠ Using this prop as the main content text is DEPRECATED
* Please use `name` instead. If you were planning to define the
* html element title attribute, this is the proper way.
*/
title: {
type: String,
Expand Down Expand Up @@ -81,17 +75,6 @@ export default {
],

computed: {
/**
* TODO: drop on the 8.0.0 major, see title/name prop
*/
nameTitleFallback() {
if (this.name === null && this.title) {
console.warn('The `title` prop was renamed. Please use the `name` prop instead if you intend to set the main content text.')
return this.title
}
return this.name
},

isIconUrl() {
try {
return new URL(this.icon)
Expand Down