Upgrade eslint tooling to v10 and fix linting bugs (#601)

- Upgrade eslint 9→10, eslint-config-prettier 9→10, eslint-plugin-vue 9→10 - Upgrade @types/node 20→24 - Migrate from legacy .eslintrc.mjs to flat config eslint.config.mjs - Remove --ext flag from npm test script (dropped in eslint 10) - Fix vue/no-ref-as-operand: add missing .value to ref assignments (5 files) - Fix vue/return-in-computed-property: add default returns (2 files) - Fix vue/no-side-effects-in-computed-properties: move mutation to watcher - Fix vue/no-dupe-keys: remove ref shadowing prop in DomPDFDriver - Fix vue/no-deprecated-slot-attribute: migrate to v-slot syntax (3 files) - Fix vue/require-valid-default-prop: use factory function for array default - Fix vue/no-unused-vars: remove unused slot destructure - Disable vue/no-mutating-props (false positive for Pinia store props)
2026-04-07 05:31:24 +00:00 · 2026-04-02 17:33:18 +02:00
parent 9e5b9fdaad
commit 5014a75fbc
17 changed files with 227 additions and 345 deletions
--- a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
+++ b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
@@ -11,7 +11,7 @@
      }}
    </p>

-    <form action="" @submit.prevent="submitBulkUpdate">
+    <form id="bulk-update-form" action="" @submit.prevent="submitBulkUpdate">
      <ValidateEach
        v-for="(c, i) in exchangeRateStore.bulkCurrencies"
        :key="i"
@@ -50,22 +50,21 @@
          </BaseInputGroup>
        </template>
      </ValidateEach>
+    </form>
+
+    <template #footer>
      <div
-        slot="footer"
        class="
          z-0
          flex
          justify-end
-          mt-4
-          pt-4
-          border-t border-gray-200 border-solid
        "
      >
-        <BaseButton :loading="isSaving" variant="primary" type="submit">
+        <BaseButton :loading="isSaving" variant="primary" type="submit" form="bulk-update-form">
          {{ $t('general.save') }}
        </BaseButton>
      </div>
-    </form>
+    </template>
  </BaseCard>
 </template>

--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
@@ -106,7 +106,7 @@ const props = defineProps({
  },
  taxes: {
    type: Array,
-    default: [],
+    default: () => [],
  },
  total: {
    type: Number,
--- a/resources/scripts/admin/components/estimate-invoice-common/SalesTax.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SalesTax.vue
@@ -79,6 +79,7 @@ const addressData = computed(() => {
      address: pick(address, ['address_street_1', 'city', 'state', 'zip']),
    }
  }
+  return null
 })

 const isAddressAvailable = computed(() => {
--- a/resources/scripts/admin/views/SampleTable.vue
+++ b/resources/scripts/admin/views/SampleTable.vue
@@ -37,7 +37,7 @@
        </span>
      </template>

-      <template #cell-actions="{ row }">
+      <template #cell-actions>
        <base-dropdown width-class="w-48" margin-class="mt-1">
          <template #activator>
            <div class="flex items-center justify-center">
--- a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
+++ b/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
@@ -15,7 +15,7 @@
 </template>

 <script>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import Mysql from './database/MysqlDatabase.vue'
 import Pgsql from './database/PgsqlDatabase.vue'
 import Sqlite from './database/SqliteDatabase.vue'
@@ -41,10 +41,11 @@ export default {
    const notificationStore = useNotificationStore()
    const installationStore = useInstallationStore()

-    const databaseData = computed(() => {
-      installationStore.currentDataBaseData.app_locale = global.locale.value
-      return installationStore.currentDataBaseData
-    })
+    const databaseData = computed(() => installationStore.currentDataBaseData)
+
+    watch(() => global.locale.value, (newLocale) => {
+      installationStore.currentDataBaseData.app_locale = newLocale
+    }, { immediate: true })

    async function getDatabaseConfig(connection) {
      let params = {}
--- a/resources/scripts/admin/views/modules/View.vue
+++ b/resources/scripts/admin/views/modules/View.vue
@@ -908,19 +908,19 @@ function getErrorMessage(message) {

  switch (message) {
    case 'module_not_found':
-      msg = t('modules.module_not_found')
+      msg.value = t('modules.module_not_found')
      break

    case 'module_not_purchased':
-      msg = t('modules.module_not_purchased')
+      msg.value = t('modules.module_not_purchased')
      break

    case 'version_not_supported':
-      msg = t('modules.version_not_supported')
+      msg.value = t('modules.version_not_supported')
      break

    default:
-      msg = message
+      msg.value = message
      break
  }

--- a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
+++ b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
@@ -1,31 +1,33 @@
 <template>
  <ExchangeRateProviderModal />
  <BaseCard>
-    <div slot="header" class="flex flex-wrap justify-between lg:flex-nowrap">
-      <div>
-        <h6 class="text-lg font-medium text-left">
-          {{ $t('settings.menu_title.exchange_rate') }}
-        </h6>
-        <p
-          class="mt-2 text-sm leading-snug text-left text-gray-500"
-          style="max-width: 680px"
-        >
-          {{ $t('settings.exchange_rate.providers_description') }}
-        </p>
+    <template #header>
+      <div class="flex flex-wrap justify-between lg:flex-nowrap">
+        <div>
+          <h6 class="text-lg font-medium text-left">
+            {{ $t('settings.menu_title.exchange_rate') }}
+          </h6>
+          <p
+            class="mt-2 text-sm leading-snug text-left text-gray-500"
+            style="max-width: 680px"
+          >
+            {{ $t('settings.exchange_rate.providers_description') }}
+          </p>
+        </div>
+        <div class="mt-4 lg:mt-0 lg:ml-2">
+          <BaseButton
+            variant="primary-outline"
+            size="lg"
+            @click="addExchangeRate"
+          >
+            <template #left="slotProps">
+              <PlusIcon :class="slotProps.class" />
+            </template>
+            {{ $t('settings.exchange_rate.new_driver') }}
+          </BaseButton>
+        </div>
      </div>
-      <div class="mt-4 lg:mt-0 lg:ml-2">
-        <BaseButton
-          variant="primary-outline"
-          size="lg"
-          @click="addExchangeRate"
-        >
-          <template #left="slotProps">
-            <PlusIcon :class="slotProps.class" />
-          </template>
-          {{ $t('settings.exchange_rate.new_driver') }}
-        </BaseButton>
-      </div>
-    </div>
+    </template>

    <BaseTable ref="table" class="mt-16" :data="fetchData" :columns="drivers">
      <template #cell-driver="{ row }">
--- a/resources/scripts/admin/views/settings/UpdateAppSetting.vue
+++ b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
@@ -346,7 +346,7 @@ async function checkUpdate() {
    isCheckingforUpdate.value = true
    let response = await http.get('/api/v1/check/update', {
      params: {
-        channel: insiderChannel ? 'insider' : ''
+        channel: insiderChannel.value ? 'insider' : ''
      }
    });
    isCheckingforUpdate.value = false
--- a/resources/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue
+++ b/resources/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue
@@ -70,8 +70,6 @@

  const emit = defineEmits(['submit-data', 'on-change-driver'])

-  let isFetchingInitialData = ref(false)
-
  const pdfDriverStore = usePDFDriverStore();
  const { t } = useI18n();

--- a/resources/scripts/components/base-select/composables/useOptions.js
+++ b/resources/scripts/components/base-select/composables/useOptions.js
@@ -108,11 +108,13 @@ export default function useOptions(props, context, dep) {
      case 'multiple':
      case 'tags':
        return !isNullish(iv.value) && iv.value.length > 0
+
+      default: return null
    }
  })

  const multipleLabelText = computed(() => {
-    return multipleLabel !== undefined && multipleLabel.value !== undefined
+    return multipleLabel.value !== undefined && multipleLabel.value !== undefined
      ? multipleLabel.value(iv.value)
      : (iv.value && iv.value.length > 1 ? `${iv.value.length} options selected` : `1 option selected`)
  })
@@ -148,6 +150,8 @@ export default function useOptions(props, context, dep) {
      case 'multiple':
      case 'tags':
        return []
+
+      default: return null
    }
  })

@@ -243,7 +247,7 @@ export default function useOptions(props, context, dep) {
  }

  const isMax = () => {
-    if (max === undefined || max.value === -1 || (!hasSelected.value && max.value > 0)) {
+    if (max.value === undefined || max.value === -1 || (!hasSelected.value && max.value > 0)) {
      return false
    }

@@ -519,7 +523,7 @@ export default function useOptions(props, context, dep) {
    throw new Error(`v-model must be an array when using "${mode.value}" mode`)
  }

-  if (options && typeof options.value == 'function') {
+  if (options.value && typeof options.value == 'function') {
    if (resolveOnLoad.value) {
      resolveOptions(initInternalValue)
    } else if (object.value == true) {
--- a/resources/scripts/components/base/BaseFileUploader.vue
+++ b/resources/scripts/components/base/BaseFileUploader.vue
@@ -441,7 +441,7 @@ let currentStatus = ref(null)

 function reset() {
  // reset form to initial state
-  currentStatus = STATUS_INITIAL
+  currentStatus.value = STATUS_INITIAL

  uploadedFiles.value = []

@@ -451,7 +451,7 @@ function reset() {
    localFiles.value = []
  }

-  uploadError = null
+  uploadError.value = null
 }

 function upload(formData) {
@@ -467,16 +467,16 @@ function upload(formData) {

 // upload data to the server
 function save(formData) {
-  currentStatus = STATUS_SAVING
+  currentStatus.value = STATUS_SAVING

  upload(formData)
    .then((x) => {
-      uploadedFiles = [].concat(x)
-      currentStatus = STATUS_SUCCESS
+      uploadedFiles.value = [].concat(x)
+      currentStatus.value = STATUS_SUCCESS
    })
    .catch((err) => {
-      uploadError = err.response
-      currentStatus = STATUS_FAILED
+      uploadError.value = err.response
+      currentStatus.value = STATUS_FAILED
    })
 }

--- a/resources/scripts/components/notifications/NotificationItem.vue
+++ b/resources/scripts/components/notifications/NotificationItem.vue
@@ -161,7 +161,7 @@ function clearNotificationTimeOut() {
 }

 function setNotificationTimeOut() {
-  notiTimeOut = setTimeout(() => {
+  notiTimeOut.value = setTimeout(() => {
    notificationStore.hideNotification(props.notification)
  }, props.notification.time || 5000)
 }
--- a/resources/scripts/customer/views/payments/Index.vue
+++ b/resources/scripts/customer/views/payments/Index.vue
@@ -1,14 +1,16 @@
 <template>
  <BasePage>
    <BasePageHeader :title="$t('payments.title')">
-      <BaseBreadcrumb slot="breadcrumbs">
-        <BaseBreadcrumbItem
-          :title="$t('general.home')"
-          :to="`/${globalStore.companySlug}/customer/dashboard`"
-        />
+      <template #breadcrumbs>
+        <BaseBreadcrumb>
+          <BaseBreadcrumbItem
+            :title="$t('general.home')"
+            :to="`/${globalStore.companySlug}/customer/dashboard`"
+          />

-        <BaseBreadcrumbItem :title="$t('payments.payment', 2)" to="#" active />
-      </BaseBreadcrumb>
+          <BaseBreadcrumbItem :title="$t('payments.payment', 2)" to="#" active />
+        </BaseBreadcrumb>
+      </template>

      <template #actions>
        <BaseButton