feat: add boolean prop alternatives with false as default value

CHANGELOG.md

@@ -8,6 +8,20 @@
 ## UNRELEASED
 
 ### 📝 Notes
+#### Boolean properties
+Some boolean props have been deprecated in favor of alternatives with default value `false`.
+This allows to use shorthand notation on the template, as a prop with a default value of `false`
+will be set to `true` if it is set (without any value) in the template,
+similar to native HTML boolean attributes.
+Following components have been adjusted:
+
+|     Component |         Deprecated prop | New alternative |
+|---------------|-------------------------|-----------------|
+|    `NcAvatar` |        `showUserStatus` |    `hideStatus` |
+|    `NcAvatar` | `showUserStatusCompact` | `verboseStatus` |
+|     `NcModal` |              `canClose` |       `noClose` |
+|    `NcDialog` |              `canClose` |       `noClose` |
+
 #### `NcButton` color variant and native type
 `NcButton` (and `NcDialogButton`) now provides a `variant` prop to set the color variant to use (e.g. `'primary'`) and allows to set the native button type using the `type` prop.
 The legacy behavior, `type` for the color variant and `nativeType` for the button type, still works but will be removed in the next major version.

src/components/NcAvatar/NcAvatar.vue

@@ -154,7 +154,7 @@
 <template>
 	<span ref="main"
 		:title="tooltip"
 		v-click-outside="closeMenu"
 		:class="{
 			'avatardiv--unknown': userDoesNotExist,
 			'avatardiv--with-menu': hasMenu,
@@ -318,14 +318,30 @@
 			default: undefined,
 		},
 		/**
-		 * Whether or not to display the user-status
+		 * Do not show the user status on the avatar.
+		 */
+		 hideStatus: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Whether or not to display the user-status.
+		 * @deprecated - Use `hideStatus` instead. Will be removed with v9.
 		 */
 		showUserStatus: {
 			type: Boolean,
 			default: true,
 		},
+		/**
+		 * Show the verbose user status (e.g. "online" / "away") instead of just the status icon.
+		 */
+		verboseStatus: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Whether or not to the status-icon should be used instead of online/away
+		 * @deprecated - Use `verboseStatus` instead. Will be removed with v9.
 		 */
 		showUserStatusCompact: {
 			type: Boolean,
@@ -365,7 +381,15 @@
 			default: 32,
 		},
 		/**
-		 * Placeholder avatars will be automatically generated when this is set to true
+		 * Do not automatically generate a placeholder avatars if there is no real avatar is available.
+		 */
+		 noPlaceholder: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Placeholder avatars will be automatically generated when this is set to true.
+		 * @deprecated - Use `noPlaceholder` instead. Will be removed in v9.
 		 */
 		allowPlaceholder: {
 			type: Boolean,
@@ -439,12 +463,15 @@
 			return t('Avatar of {displayName}', { displayName: this.displayName ?? this.user })
 		},
 		canDisplayUserStatus() {
-			return this.showUserStatus
+			return !this.hideStatus
+				&& this.showUserStatus
 				&& this.hasStatus
 				&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)
 		},
 		showUserStatusIconOnAvatar() {
-			return this.showUserStatus
+			return !this.hideStatus
+				&& this.showUserStatus
+				&& !this.verboseStatus
 				&& this.showUserStatusCompact
 				&& this.hasStatus
 				&& this.userStatus.status !== 'dnd'
@@ -486,7 +513,7 @@
 		 * True if initials should be shown as the user icon fallback
 		 */
 		showInitials() {
-			return this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon)
+			return !this.noPlaceholder && this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon)
 		},
 
 		avatarStyle() {

src/components/NcDialog/NcDialog.vue

@@ -342,8 +342,18 @@ export default defineComponent({
 			validator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),
 		},
 
+		/**
+		 * Do not show the close button for the dialog.
+		 * @default false
+		 */
+		noClose: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Set to false to no show a close button on the dialog
+		 * @deprecated - Use `noClose` instead. Will be removed in v9.
 		 * @default true
 		 */
 		canClose: {
@@ -578,7 +588,7 @@ export default defineComponent({
 		 * Properties to pass to the underlying NcModal
 		 */
 		const modalProps = computed(() => ({
-			canClose: props.canClose,
+			noClose: props.noClose || !props.canClose,
 			container: props.container === undefined ? 'body' : props.container,
 			// we do not pass the name as we already have the name as the headline
 			// name: props.name,

src/components/NcModal/NcModal.vue

@@ -258,7 +258,7 @@ export default {
 						</NcActions>
 
 						<!-- Close modal -->
-						<NcButton v-if="canClose && !closeButtonContained"
+						<NcButton v-if="!noClose && canClose && !closeButtonContained"
 							:aria-label="closeButtonAriaLabel"
 							class="header-close"
 							variant="tertiary"
@@ -300,7 +300,7 @@ export default {
 							<slot />
 						</div>
 						<!-- Close modal -->
-						<NcButton v-if="canClose && closeButtonContained"
+						<NcButton v-if="!noClose && canClose && closeButtonContained"
 							:aria-label="closeButtonAriaLabel"
 							class="modal-container__close"
 							variant="tertiary"
@@ -451,7 +451,18 @@ export default {
 		},
 
 		/**
-		 * Declare if the modal can be closed
+		 * Do not show the close button for the dialog.
+		 * @default false
+		 */
+		noClose: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Set to false to no show a close button on the dialog
+		 * @deprecated - Use `noClose` instead. Will be removed in v9.
+		 * @default true
 		 */
 		canClose: {
 			type: Boolean,
@@ -575,7 +586,7 @@ export default {
 		 * True if there are any buttons shown on the backdrop or a name (for accessibility)
 		 */
 		forceDarkBackdrop() {
-			return (this.canClose && !this.closeButtonContained)
+			return (!this.noClose && this.canClose && !this.closeButtonContained)
 				|| this.hasNext
 				|| this.hasPrevious
 				|| this.modalName !== ''
@@ -703,7 +714,7 @@ export default {
 		},
 		close(data) {
 			// do not fire event if forbidden
-			if (this.canClose) {
+			if (!this.noClose && this.canClose) {
 				// We set internalShow here, so the out transitions properly run before the component is destroyed
 				this.internalShow = false
 				this.$emit('update:show', false)