Skip to content

Commit

Permalink
refactor: Use boolean props with default value false
Browse files Browse the repository at this point in the history
Provide `disableSwipe` instead of `allowSwipeNavigation`
(`NcAppContent`) and `enableSwipe` (`NcModal`).

Boolean prop should always - when possible - have a default value of
`false` to allow shorthand prop assignment in the template.
Similar to native HTML boolean attributes:

```vue
<!-- native HTML -->
<button disabled>
<!-- boolean Vue prop with default false -->
<NcModal disable-swipe>
```

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Jan 23, 2025
1 parent 2990a39 commit 852c87e
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 4 deletions.
16 changes: 13 additions & 3 deletions src/components/NcAppContent/NcAppContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@ The list size must be between the min and the max width value.
'app-content-wrapper--show-list': !showDetails,
'app-content-wrapper--mobile': isMobile,}">
<NcAppDetailsToggle v-if="showDetails" @click.native.stop.prevent="hideDetails" />
<slot v-if="!showDetails" name="list" />

<slot v-if="!showDetails" name="list" />
<slot v-else />
</div>
<div v-else-if="layout === 'vertical-split' || layout === 'horizontal-split'" class="app-content-wrapper">
Expand Down Expand Up @@ -131,12 +131,21 @@ export default {
props: {
/**
* Allows to disable the control by swipe of the app navigation open state
* @deprecated will be removed with the next version - use `disableSwipe` instead
*/
allowSwipeNavigation: {
type: Boolean,
default: true,
},

/**
* Allows to disable the control by swipe of the app navigation open state.
*/
disableSwipe: {
type: Boolean,
default: false,
},

/**
* Allows you to set the default width of the resizable list in % on vertical-split
* Allows you to set the default height of the resizable list in % on horizontal-split
Expand Down Expand Up @@ -175,7 +184,8 @@ export default {
},

/**
* When in mobile view, only the list or the details are shown
* When in mobile view, only the list or the details are shown.
*
* If you provide a list, you need to provide a variable
* that will be set to true by the user when an element of
* the list gets selected. The details will then show a back
Expand Down Expand Up @@ -281,7 +291,7 @@ export default {
},

mounted() {
if (this.allowSwipeNavigation) {
if (this.allowSwipeNavigation && !this.disableSwipe) {
this.swiping = useSwipe(this.$el, {
onSwipeEnd: this.handleSwipe,
})
Expand Down
12 changes: 11 additions & 1 deletion src/components/NcModal/NcModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -409,13 +409,23 @@ export default {
type: Boolean,
default: false,
},

/**
* Enable swipe between slides
* @deprecated Will be removed in next version - use `disableSwipe` instead
*/
enableSwipe: {
type: Boolean,
default: true,
},
/**
* Disable swipe between slides
*/
disableSwipe: {
type: Boolean,
default: false,
},

spreadNavigation: {
type: Boolean,
default: false,
Expand Down Expand Up @@ -731,7 +741,7 @@ export default {
* @param {import('@vueuse/core').SwipeDirection} direction Swipe direction
*/
handleSwipe(e, direction) {
if (this.enableSwipe) {
if (this.enableSwipe && !this.disableSwipe) {
if (direction === 'left') {
// swiping to left to go to the next item
this.next(e)
Expand Down

0 comments on commit 852c87e

Please sign in to comment.