fix: Resolve linting issues due to stricter rules from Typescript parser

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

.eslintrc.js

@@ -21,4 +21,17 @@ module.exports = {
 			],
 		},
 	},
+	rules: {
+		'jsdoc/check-tag-names': [
+			'warn',
+			{
+				definedTags: [
+					'values', // required for vue-styleguideist
+					'notExported',
+					'packageDocumentation',
+					'jest-environment',
+				],
+			},
+		],
+	},
 }

package.json

@@ -120,7 +120,7 @@
     "@mdi/svg": "^7.0.96",
     "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^3.0.0",
-    "@nextcloud/eslint-config": "github:nextcloud-libraries/eslint-config#fe67f6b84e3c13eb0ea2478f44939abc2fe7c99c",
+    "@nextcloud/eslint-config": "github:nextcloud-libraries/eslint-config#0d785eb6d1d62b91be1452759a615a476c87db4c",
     "@nextcloud/stylelint-config": "^2.3.1",
     "@nextcloud/vite-config": "github:nextcloud-libraries/nextcloud-vite-config#36ae8cf759a30e1b020d90a6c3585fa7b7734dc7",
     "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#1f4277c6ab14be63810f425ef6b762d8ca59697b",
@@ -145,7 +145,7 @@
     "vue-eslint-parser": "^9.0.3",
     "vue-material-design-icons": "^5.2.0",
     "vue-router": "^4.2.5",
-    "vue-styleguidist": "~4.72.0",
+    "vue-styleguidist": "^4.72.4",
     "webpack": "^5.88.1",
     "webpack-merge": "^5.9.0"
   },

src/components/NcActionCheckbox/NcActionCheckbox.vue

@@ -137,7 +137,7 @@ export default {
 	},
 
 	methods: {
-		checkInput(event) {
+		checkInput(/* event */) {
 			// by clicking we also trigger the change event
 			this.$refs.label.click()
 		},

src/components/NcActionRadio/NcActionRadio.vue

@@ -148,7 +148,7 @@ export default {
 	},
 
 	methods: {
-		toggleInput(event) {
+		toggleInput(/* event */) {
 			// by clicking we also trigger the change event
 			this.$refs.label.click()
 		},

src/components/NcActions/NcActions.vue

@@ -797,10 +797,10 @@ p {
 </docs>
 
 <script>
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import NcPopover from '../NcPopover/index.js'
 import GenRandomId from '../../utils/GenRandomId.js'
-import isSlotPopulated from '../../utils/isSlotPopulated.js'
+import isSlotPopulated from '../../utils/isSlotPopulated.ts'
 import { t } from '../../l10n.js'
 
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -1036,7 +1036,7 @@ export default {
 		},
 
 		// MENU STATE MANAGEMENT
-		openMenu(e) {
+		openMenu() {
 			if (this.opened) {
 				return
 			}
@@ -1298,7 +1298,7 @@ export default {
 						disabled: this.disabled || action?.props?.disabled,
 						onFocus: this.onFocus,
 						onBlur: this.onBlur,
-					}
+					},
 				),
 				{
 					default: () => buttonText,

src/components/NcAppContent/NcAppDetailsToggle.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import { t } from '../../l10n.js'
 import Tooltip from '../../directives/Tooltip/index.js'
 

src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue

@@ -37,9 +37,8 @@
 </template>
 
 <script>
-import NcButton from '../NcButton/index.js'
 import { t } from '../../l10n.js'
-
+import NcButton from '../NcButton/index.ts'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 

src/components/NcAppNavigationItem/NcInputConfirmCancel.vue

@@ -59,7 +59,7 @@
 	</div>
 </template>
 <script>
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import { t } from '../../l10n.js'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'

src/components/NcAppNavigationNew/NcAppNavigationNew.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 
 export default {
 	components: {

src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import { t } from '../../l10n.js'
 
 import MenuIcon from 'vue-material-design-icons/Menu.vue'

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -493,15 +493,15 @@ export default {
 import NcAppSidebarTabs from './NcAppSidebarTabs.vue'
 import NcActions from '../NcActions/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import NcEmptyContent from '../NcEmptyContent/index.js'
 import Focus from '../../directives/Focus/index.js'
 import Linkify from '../../directives/Linkify/index.js'
 import Tooltip from '../../directives/Tooltip/index.js'
 import { useIsSmallMobile } from '../../composables/useIsMobile/index.js'
 import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
-import isSlotPopulated from '../../utils/isSlotPopulated.js'
+import isSlotPopulated from '../../utils/isSlotPopulated.ts'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'

src/components/NcAvatar/NcAvatar.vue

@@ -186,7 +186,7 @@ export default {
 <script>
 import NcActions from '../NcActions/index.js'
 import NcActionLink from '../NcActionLink/index.js'
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 import usernameToColor from '../../functions/usernameToColor/index.js'

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -226,10 +226,8 @@ export default {
 		},
 		/**
 		 * Add the hovering state on drag enter
-		 *
-		 * @param {object} e The drag enter event
 		 */
-		dragEnter(e) {
+		dragEnter(/* event */) {
 			/**
 			 * Don't do anything if dropping is disabled.
 			 */

src/components/NcBreadcrumbs/NcBreadcrumbs.vue

@@ -321,7 +321,7 @@ export default {
 		 * @return {number} The total width
 		 */
 		getTotalWidth(breadcrumbs) {
-			return breadcrumbs.reduce((width, crumb, index) => width + this.getWidth(crumb.$el), 0)
+			return breadcrumbs.reduce((width, crumb) => width + this.getWidth(crumb.$el), 0)
 		},
 		/**
 		 * Calculates the width of the provided element

src/components/NcButton/NcButton.vue

@@ -438,7 +438,7 @@ import type { PropType } from 'vue'
 
 import { defineComponent, h, resolveComponent } from 'vue'
 
-import isSlotPopulated from '../../utils/isSlotPopulated.js'
+import isSlotPopulated from '../../utils/isSlotPopulated'
 
 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

src/components/NcColorPicker/NcColorPicker.vue

@@ -212,7 +212,7 @@ export default {
 </template>
 
 <script>
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import NcPopover from '../NcPopover/index.js'
 import { t } from '../../l10n.js'
 import { defaultPalette } from '../../utils/GenColors.js'

src/components/NcDateTime/NcDateTime.vue

@@ -227,9 +227,8 @@ export default {
 		 * Set or clear interval if relative time is dis/enabled
 		 *
 		 * @param {boolean} newValue The new value of the relativeTime property
-		 * @param {boolean} _oldValue The old value of the relativeTime property
 		 */
-		relativeTime(newValue, _oldValue) {
+		relativeTime(newValue) {
 			window.clearInterval(this.intervalId)
 			this.intervalId = undefined
 			if (newValue) {

src/components/NcDialogButton/NcDialogButton.vue

@@ -38,7 +38,7 @@ Dialog button component used by NcDialog in the actions slot to display the butt
 
 <script>
 import { defineComponent } from 'vue'
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 
 export default defineComponent({

src/components/NcInputField/NcInputField.vue

@@ -111,7 +111,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 </template>
 
 <script>
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import GenRandomId from '../../utils/GenRandomId.js'
 
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'

src/components/NcModal/NcModal.vue

@@ -338,7 +338,7 @@ import { t } from '../../l10n.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 import l10n from '../../mixins/l10n.js'
 import NcActions from '../NcActions/index.js'
-import NcButton from '../../components/NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 import Timer from '../../utils/Timer.js'
 import Tooltip from '../../directives/Tooltip/index.js'
 

src/components/NcRelatedResourcesPanel/NcResource.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import NcButton from '../NcButton/index.js'
+import NcButton from '../NcButton/index.ts'
 
 import { t } from '../../l10n.js'
 

src/components/NcRichText/NcReferencePicker/NcProviderList.vue

@@ -96,7 +96,7 @@ export default {
 				this.selectedProvider = null
 			}
 		},
-		onSearch(query, loading) {
+		onSearch(query) {
 			this.query = query
 		},
 	},

src/components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue

@@ -40,7 +40,7 @@
 <script>
 import NcReferencePicker from './NcReferencePicker.vue'
 import { getCustomPickerElementSize, isCustomPickerElementRegistered } from './customPickerElements.js'
-import NcButton from '../../NcButton/index.js'
+import NcButton from '../../NcButton/index.ts'
 import NcModal from '../../NcModal/index.js'
 import { t } from '../../../l10n.js'
 

src/components/NcRichText/NcReferencePicker/NcSearch.vue

@@ -206,7 +206,7 @@ export default {
 				this.abortController.abort()
 			}
 		},
-		onSearchInput(query, loading) {
+		onSearchInput(query) {
 			this.searchQuery = query
 			delay(() => {
 				this.updateSearch()

src/components/NcRichText/NcRichText.vue

@@ -306,16 +306,15 @@ export default {
 	},
 	methods: {
 		renderPlaintext() {
-			const context = this
-			const placeholders = this.text.split(/(\{[a-z\-_.0-9]+\})/ig).map(function(entry, index, list) {
+			const placeholders = this.text.split(/(\{[a-z\-_.0-9]+\})/ig).map((entry) => {
 				const matches = entry.match(/^\{([a-z\-_.0-9]+)\}$/i)
 				// just return plain string nodes as text
 				if (!matches) {
-					return prepareTextNode({ h, context }, entry)
+					return prepareTextNode({ h, context: this }, entry)
 				}
 				// return component instance if argument is an object
 				const argumentId = matches[1]
-				const argument = context.arguments[argumentId]
+				const argument = this.arguments[argumentId]
 				if (typeof argument === 'object') {
 					const { component, props } = argument
 					return h((typeof component === 'string') ? resolveComponent(component) : component, {

src/components/NcSelect/NcSelect.vue

@@ -934,7 +934,7 @@ export default {
 
 				const addClass = {
 					name: 'addClass',
-					fn(_middlewareArgs) {
+					fn(/* middlewareArgs */) {
 						dropdownMenu.classList.add('vs__dropdown-menu--floating')
 						return {}
 					},
@@ -1014,15 +1014,12 @@ export default {
 		},
 
 		propsToForward() {
-			const {
-				// Props handled by this component
-				inputClass,
-				noWrap,
-				placement,
-				userSelect,
-				// Props to forward
-				...initialPropsToForward
-			} = this.$props
+			const initialPropsToForward = { ...this.$props }
+			// Props handled by this component
+			delete initialPropsToForward.inputClass
+			delete initialPropsToForward.noWrap
+			delete initialPropsToForward.placement
+			delete initialPropsToForward.userSelect
 
 			const propsToForward = {
 				...initialPropsToForward,

src/components/NcSelectTags/NcSelectTags.vue

@@ -312,14 +312,11 @@ export default {
 		},
 
 		propsToForward() {
-			const {
-				// Props handled by this component
-				fetchTags,
-				optionsFilter,
-				passthru,
-				// Props to forward
-				...propsToForward
-			} = this.$props
+			const propsToForward = { ...this.$props }
+			// Props handled by this component
+			delete propsToForward.fetchTags
+			delete propsToForward.optionsFilter
+			delete propsToForward.passthru
 
 			return propsToForward
 		},

src/components/NcUserBubble/NcUserBubble.vue

@@ -170,7 +170,7 @@ export default {
 			validator: (url) => {
 				try {
 					url = new URL(url, url?.startsWith?.('/') ? window.location.href : undefined)
-					return true
+					return !!url
 				} catch (error) {
 					return false
 				}

src/utils/isSlotPopulated.ts

@@ -20,7 +20,8 @@
  *
  */
 
-import { Fragment, Comment, Text, type VNode, type VNodeNormalizedChildren } from 'vue'
+import type { VNode, VNodeNormalizedChildren } from 'vue'
+import { Fragment, Comment, Text } from 'vue'
 
 /**
  * Checks whether a slot is populated

styleguide.config.js

@@ -43,11 +43,6 @@ module.exports = async () => {
 					},
 				},
 			},
-			resolve: {
-				alias: {
-					vue: 'vue/dist/vue.js',
-				},
-			},
 		}),
 
 		exampleMode: 'collapse',

tests/tsconfig.json

@@ -1,4 +1,7 @@
 {
 	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"rootDir": ".."
+	},
 	"include": ["./**/*.ts"],
 }