Maintenance: Mobile - Added eslint improvements for the usage of functions.

.eslintrc.js

@@ -22,15 +22,8 @@ module.exports = {
   rules: {
     'zammad/zammad-copyright': 'error',
     'zammad/zammad-detect-translatable-string': 'error',
-    'vue/script-setup-uses-vars': 'error',
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'vue/component-tags-order': [
-      'error',
-      {
-        order: ['script', 'template', 'style'],
-      },
-    ],
 
     // Loosen AirBnB's strict rules a bit to allow 'for .. of'
     'no-restricted-syntax': [
@@ -43,6 +36,8 @@ module.exports = {
 
     'no-param-reassign': 'off',
 
+    'func-style': ['error', 'expression'],
+
     'no-restricted-imports': 'off',
 
     // Disable the following rule, because it's not relevant for the tool chain and test envoirment.
@@ -89,11 +84,29 @@ module.exports = {
 
     '@typescript-eslint/no-explicit-any': ['error', { ignoreRestArgs: true }],
 
+    'vue/component-tags-order': [
+      'error',
+      {
+        order: ['script', 'template', 'style'],
+      },
+    ],
+
+    'vue/script-setup-uses-vars': 'error',
+
     // Don't require a default value for the props.
     'vue/require-default-prop': 'off',
 
     // Don't require multi word component names.
     'vue/multi-word-component-names': 'off',
+
+    // Enforce v-bind directive usage in short form as error instead of warning
+    'vue/v-bind-style': ['error', 'shorthand'],
+
+    // Enforce v-on directive usage in short form as error instead of warning
+    'vue/v-on-style': ['error', 'shorthand'],
+
+    // Enforce v-slot directive usage in short form as error instead of warning
+    'vue/v-slot-style': ['error', 'shorthand'],
   },
   overrides: [
     {

app/frontend/apps/mobile/components/layout/LayoutMain.vue

@@ -16,7 +16,7 @@ const showBottomNavigation = computed(() => {
 <template>
   <div class="flex h-full flex-col overflow-hidden">
     <main class="overflow-y-scroll" :class="{ 'pb-14': showBottomNavigation }">
-      <router-view v-slot="{ Component }">
+      <router-view #default="{ Component }">
         <TransitionViewNavigation>
           <component :is="Component" />
         </TransitionViewNavigation>

app/frontend/apps/mobile/components/transition/TransitionViewNavigation/TransitionViewNavigation.vue

@@ -1,7 +1,7 @@
 <!-- Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import useViewTransition from './composable'
+import { useViewTransition } from './composable'
 
 const { viewTransition } = useViewTransition()
 </script>

app/frontend/apps/mobile/components/transition/TransitionViewNavigation/composable.ts

@@ -5,8 +5,8 @@ import { ViewTransitions } from './types'
 
 const viewTransition = ref<ViewTransitions>(ViewTransitions.REPLACE)
 
-export default function useViewTransition() {
-  function setViewTransition(newViewTransition: ViewTransitions) {
+export const useViewTransition = () => {
+  const setViewTransition = (newViewTransition: ViewTransitions) => {
     viewTransition.value = newViewTransition
   }
 

app/frontend/apps/mobile/components/transition/TransitionViewNavigation/index.ts

@@ -2,4 +2,4 @@
 
 export { ViewTransitions } from './types'
 
-export { default as useViewTransition } from './composable'
+export { useViewTransition } from './composable'

app/frontend/apps/mobile/form/composable.ts

@@ -2,7 +2,9 @@
 
 import { FormSchemaNode } from '@shared/components/Form'
 
-export function defineFormSchema(schema: FormSchemaNode[]): FormSchemaNode[] {
+export const defineFormSchema = (
+  schema: FormSchemaNode[],
+): FormSchemaNode[] => {
   const needGroup = schema.every((node) => !('isLayout' in node))
   if (!needGroup) return schema
   return [

app/frontend/shared/components/CommonNotifications/composable.ts

@@ -7,18 +7,18 @@ import { NewNotification, type Notification, NotificationTypes } from './types'
 const notifications = ref<Notification[]>([])
 const defaultNotificationDurationMS = 5000
 
-function removeNotification(id: string) {
+const removeNotification = (id: string) => {
   notifications.value = notifications.value.filter(
     (notification: Notification) => notification.id !== id,
   )
 }
 
-function clearAllNotifications() {
+const clearAllNotifications = () => {
   notifications.value = []
 }
 
-export default function useNotifications() {
-  function notify(notification: NewNotification): string {
+const useNotifications = () => {
+  const notify = (notification: NewNotification): string => {
     let { id } = notification
     if (!id) {
       id = getUuid()
@@ -37,7 +37,7 @@ export default function useNotifications() {
     return newNotification.id
   }
 
-  function hasErrors() {
+  const hasErrors = () => {
     return notifications.value.some((notification) => {
       return notification.type === NotificationTypes.ERROR
     })
@@ -51,3 +51,5 @@ export default function useNotifications() {
     hasErrors,
   }
 }
+
+export default useNotifications

app/frontend/shared/components/Form/fields/FieldEditor/ImageResizable.vue

@@ -60,33 +60,33 @@ const wrapperStyle = computed(() => {
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="inline-block" v-bind:style="wrapperStyle">
+  <NodeViewWrapper as="div" class="inline-block" :style="wrapperStyle">
     <img
       v-if="!isResizing"
       class="inline-block"
-      v-bind:style="style"
-      v-bind:src="node.attrs.src"
-      v-bind:alt="node.attrs.alt"
-      v-bind:title="node.attrs.title"
-      v-bind:draggable="isDraggable"
-      v-on:load="onLoadImage"
-      v-on:click="isResizing = true"
+      :style="style"
+      :src="node.attrs.src"
+      :alt="node.attrs.alt"
+      :title="node.attrs.title"
+      :draggable="isDraggable"
+      @load="onLoadImage"
+      @click="isResizing = true"
     />
     <DraggableResizable
       v-else
       v-model:active="isResizing"
-      v-bind:h="dimensions.height"
-      v-bind:w="dimensions.width"
-      v-bind:draggable="false"
+      :h="dimensions.height"
+      :w="dimensions.width"
+      :draggable="false"
       lock-aspect-ratio
       parent
       class="!relative !inline-block"
-      v-on:resize-end="stopResizing"
+      @resize-end="stopResizing"
     >
       <img
         class="inline-block"
-        v-bind:src="node.attrs.src"
-        v-bind:draggable="isDraggable"
+        :src="node.attrs.src"
+        :draggable="isDraggable"
       />
     </DraggableResizable>
   </NodeViewWrapper>

app/frontend/shared/components/Form/fields/FieldEditor/index.ts

@@ -5,7 +5,7 @@ import createInput from '@shared/form/core/createInput'
 import extendSchemaDefinition from '@shared/form/utils/extendSchemaDefinition'
 import FieldEditorWrapper from './FieldEditorWrapper.vue'
 
-function addAriaLabel(node: FormKitNode) {
+const addAriaLabel = (node: FormKitNode) => {
   const { props } = node
 
   // Specification doesn't allow accessing non-labeled elements, which Editor is (<div />)

app/frontend/shared/composables/useAppMaintenanceCheck.ts

@@ -31,8 +31,8 @@ let subscription: SubscriptionHandler<
   AppMaintenanceSubscriptionVariables
 >
 
-export default function useAppMaintenanceCheck() {
-  function notify(message: string) {
+const useAppMaintenanceCheck = () => {
+  const notify = (message: string) => {
     useNotifications().notify({
       message,
       type: NotificationTypes.WARN,
@@ -103,3 +103,5 @@ export default function useAppMaintenanceCheck() {
     })
   })
 }
+
+export default useAppMaintenanceCheck