fixup! feat(NcCounterBubble): add count and limit props instead of slot

nextcloud-libraries · Aug 5, 2024 · bb5e2be · bb5e2be
1 parent 1ba54c3
commit bb5e2be
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/src/components/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue
@@ -49,6 +49,7 @@
 table {
 	border-collapse: collapse;
 }
+
 th,
 td {
 	border: 1px solid var(--color-border);
@@ -97,6 +98,7 @@ th {
 table {
 	border-collapse: collapse;
 }
+
 th,
 td {
 	border: 1px solid var(--color-border);
@@ -123,8 +125,8 @@ Deprecated. Use the `count` prop instead.
 	<div :class="counterClassObject"
 		class="counter-bubble__counter">
 		<!--
-			@slot The content with the count number.
-			@deprecated Use the `count` prop instead.
+			@slot The content with the count number. Deprecated: use the `count` prop instead.
+			@deprecated
 		-->
 		<slot>
 			{{ countWithLimit }}
@@ -157,11 +159,11 @@ export default {
 		},
 
 		/**
-		 * The count to display in the counter bubble. String value is parsed to a number.
+		 * The count to display in the counter bubble.
 		 * Alternatively, you can pass any value to the default slot.
 		 */
 		count: {
-			type: [Number, String],
+			type: Number,
 			required: false,
 			default: 0,
 		},
@@ -170,11 +172,10 @@ export default {
 		 * The maximal count number to be display. If the count is higher then "max+" is displayed.
 		 * For example, with limit 999, 1000 will be displayed as "999+".
 		 * Only works if the count is set via the `count` prop and not via the default slot.
-		 * String value is parsed to a number.
 		 * Set 0 to disable the limit.
 		 */
 		limit: {
-			type: [Number, String],
+			type: Number,
 			required: false,
 			default: 999,
 		},
@@ -190,12 +191,9 @@ export default {
 		},
 
 		countWithLimit() {
-			const countNumber = typeof this.count === 'string' ? parseInt(this.count, 10) : this.count
-			const limitNumber = typeof this.limit === 'string' ? parseInt(this.limit, 10) : this.limit
-
-			return countNumber && limitNumber && countNumber > limitNumber
-				? `${limitNumber}+`
-				: countNumber
+			return this.count && this.limit && this.count > this.limit
+				? `${this.limit}+`
+				: this.count
 		},
 	},
 }
@@ -237,6 +235,7 @@ export default {
 		background: transparent;
 		box-shadow: inset 0 0 0 2px;
 	}
+
 	&--outlined.active {
 		color: var(--color-main-background);
 		box-shadow: inset 0 0 0 2px;

diff --git a/tests/unit/components/NcCounterBubble/NcCounterBubble.spec.js b/tests/unit/components/NcCounterBubble/NcCounterBubble.spec.js
@@ -1,3 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
 import { describe, it, expect } from '@jest/globals'
 import { mount } from '@vue/test-utils'
 import NcCounterBubble from '../../../../src/components/NcCounterBubble/NcCounterBubble.vue'
@@ -13,31 +18,26 @@ describe('NcCounterBubble', () => {
 			const wrapper = mount(NcCounterBubble, { propsData: { count: 314 } })
 			expect(wrapper.text()).toBe('314')
 		})
-
-		it('should render count from prop with string value', () => {
-			const wrapper = mount(NcCounterBubble, { propsData: { count: '314' } })
-			expect(wrapper.text()).toBe('314')
-		})
 	})
 
 	describe('using limit', () => {
 		it('should render count less than 999 as it is', () => {
-			const wrapper = mount(NcCounterBubble, { propsData: { count: '999' } })
+			const wrapper = mount(NcCounterBubble, { propsData: { count: 999 } })
 			expect(wrapper.text()).toBe('999')
 		})
 
 		it('should render count more than 999 as 999+ by default', () => {
-			const wrapper = mount(NcCounterBubble, { propsData: { count: '1000' } })
+			const wrapper = mount(NcCounterBubble, { propsData: { count: 1000 } })
 			expect(wrapper.text()).toBe('999+')
 		})
 
 		it('should render count more than limit as limit+', () => {
-			const wrapper = mount(NcCounterBubble, { propsData: { count: '10', limit: '9' } })
+			const wrapper = mount(NcCounterBubble, { propsData: { count: 10, limit: 9 } })
 			expect(wrapper.text()).toBe('9+')
 		})
 
 		it('should render count without limit when limit is 0', () => {
-			const wrapper = mount(NcCounterBubble, { propsData: { count: '10000000000', limit: '0' } })
+			const wrapper = mount(NcCounterBubble, { propsData: { count: 10000000000, limit: 0 } })
 			expect(wrapper.text()).toBe('10000000000')
 		})
 	})