feat(NcButton): Migrate component to Typescript

* Fix some minor issues related to stronger typing

Signed-off-by: Ferdinand Thiessen <[email protected]>

package.json

@@ -100,7 +100,6 @@
     "unified": "^11.0.4",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
-    "vue": "^3.3.7",
     "vue-datepicker-next": "^1.0.3",
     "vue-select": "^4.0.0-beta.6"
   },

src/components/NcButton/NcButton.vue

@@ -433,24 +433,33 @@ td.row-size {
 
 </docs>
 
-<script>
+<script lang="ts">
+import type { PropType } from 'vue'
+
+import { defineComponent, h, resolveComponent } from 'vue'
+
 import isSlotPopulated from '../../utils/isSlotPopulated.js'
 
-import { h, resolveComponent } from 'vue'
+const BUTTON_ALIGNMENT = ['start', 'start-reverse', 'center', 'center-reverse', 'end', 'end-reverse'] as const
+const BUTTON_TYPES = ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'] as const
+const NATIVE_TYPES = ['submit', 'reset', 'button'] as const
 
-export default {
+export default defineComponent({
 	name: 'NcButton',
 
 	props: {
 		/**
 		 * Set the text and icon alignment
 		 *
 		 * @default 'center'
+		 * @values 'start', 'start-reverse', 'center', 'center-reverse', 'end', 'end-reverse'
 		 */
 		alignment: {
-			type: String,
+			type: String as PropType<typeof BUTTON_ALIGNMENT[number]>,
 			default: 'center',
-			validator: (alignment) => ['start', 'start-reverse', 'center', 'center-reverse', 'end', 'end-reverse'].includes(alignment),
+			validator(alignment) {
+				return typeof alignment === 'string' && (BUTTON_ALIGNMENT as readonly string[]).includes(alignment)
+			},
 		},
 
 		/**
@@ -463,26 +472,29 @@ export default {
 
 		/**
 		 * Specifies the button type
-		 * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
-		 * the default button style will be applied.
+		 * If left empty, the default button style will be applied.
+		 *
+		 * @default 'secondary'
+		 * @values primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success
 		 */
 		type: {
-			type: String,
+			type: String as PropType<typeof BUTTON_TYPES[number]>,
 			validator(value) {
-				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].indexOf(value) !== -1
+				return typeof value === 'string' && (BUTTON_TYPES as readonly string[]).indexOf(value) !== -1
 			},
 			default: 'secondary',
 		},
 
 		/**
 		 * Specifies the button native type
-		 * Accepted values: submit, reset, button. If left empty,
-		 * the default "button" type will be used.
+		 * If left empty, the default "button" type will be used.
+		 *
+		 * @values 'submit', 'reset', 'button'
 		 */
 		nativeType: {
-			type: String,
+			type: String as PropType<typeof NATIVE_TYPES[number]>,
 			validator(value) {
-				return ['submit', 'reset', 'button'].indexOf(value) !== -1
+				return typeof value === 'string' && (NATIVE_TYPES as readonly string[]).includes(value)
 			},
 			default: 'button',
 		},
@@ -607,7 +619,7 @@ export default {
 			this)
 		}
 
-		const renderButton = ({ navigate, isActive } = {}) => h((this.to || !this.href) ? 'button' : 'a',
+		const renderButton = ({ navigate, isActive }: {navigate?: (ev: Event) => void, isActive?: boolean } = {}) => h((this.to || !this.href) ? 'button' : 'a',
 			{
 				class: [
 					'button-vue',
@@ -675,8 +687,7 @@ export default {
 		// Otherwise we simply return the button
 		return renderButton()
 	},
-}
-
+})
 </script>
 
 <style lang="scss" scoped>

src/plugin.ts

@@ -1,7 +1,7 @@
 import type { DefineComponent, Directive, Plugin } from 'vue'
 
-import * as NcComponents from './components/index.js'
-import * as NcDirectives from './directives/index.js'
+import * as NcComponents from './components/index'
+import * as NcDirectives from './directives/index'
 
 /**
  * Install all Nextcloud Vue components and directives globally
@@ -20,7 +20,7 @@ import * as NcDirectives from './directives/index.js'
 export const NextcloudVuePlugin: Plugin = {
 	install(app) {
 		// Install components
-		Object.entries(NcComponents as { [key: string]: DefineComponent }).forEach(([name, component]) => {
+		Object.entries(NcComponents).forEach(([name, component]) => {
 			app.component(component.name || name, component)
 		})
 

tests/unit/utils/isSlotPopulated.spec.js → tests/unit/utils/isSlotPopulated.spec.ts

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
-import isSlotPopulated from '../../../src/utils/isSlotPopulated.js'
-
+import isSlotPopulated from '../../../src/utils/isSlotPopulated'
+import { describe, expect, it } from '@jest/globals'
 
 const IsSlotPopulatedTest = {
 	name: 'IsSlotPopulatedTest',

webpack.config.js

@@ -62,7 +62,7 @@ webpackRules.RULE_NODE_MJS = {
 	type: 'javascript/auto',
 	resolve: {
 		fullySpecified: false,
-	}
+	},
 }
 
 webpackConfig.module.rules = Object.values(webpackRules)