Merge branch 'master' into frontend-performance-improvements

resources/scripts/admin/views/settings/AccountSetting.vue

@@ -86,7 +86,7 @@
         <template #left="slotProps">
           <BaseIcon
             v-if="!isSaving"
-            name="SaveIcon"
+            name="ArrowDownOnSquareIcon"
             :class="slotProps.class"
           ></BaseIcon>
         </template>

resources/scripts/admin/views/settings/BackupSetting.vue

@@ -47,12 +47,12 @@
         <BaseDropdown>
           <template #activator>
             <div class="inline-block">
-              <BaseIcon name="DotsHorizontalIcon" class="text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
             </div>
           </template>
 
           <BaseDropdownItem @click="onDownloadBckup(row.data)">
-            <BaseIcon name="CloudDownloadIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="CloudArrowDownIcon" class="mr-3 text-gray-600" />
 
             {{ $t('general.download') }}
           </BaseDropdownItem>

resources/scripts/admin/views/settings/CompanyInfoSettings.vue

@@ -103,7 +103,7 @@
         class="mt-6"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
         </template>
         {{ $t('settings.company_info.save') }}
       </BaseButton>

resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue

@@ -47,7 +47,7 @@
         <BaseDropdown>
           <template #activator>
             <div class="inline-block">
-              <DotsHorizontalIcon class="w-5 text-gray-500" />
+              <EllipsisHorizontalIcon class="w-5 text-gray-500" />
             </div>
           </template>
 
@@ -71,10 +71,17 @@ import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useDialogStore } from '@/scripts/stores/dialog'
-import { DotsHorizontalIcon, PencilIcon, PlusIcon, TrashIcon } from '@heroicons/vue/outline'
-import { computed, inject, reactive, ref } from 'vue'
+import { ArrowDownOnSquareIcon } from '@heroicons/vue/24/outline'
+import { ref, computed, inject, reactive } from 'vue'
 import ExchangeRateProviderModal from '@/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue'
 import { useI18n } from 'vue-i18n'
+import {
+  PlusIcon,
+  EllipsisHorizontalIcon,
+  PencilIcon,
+  TrashIcon,
+} from '@heroicons/vue/24/outline'
+
 import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
 import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
 import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'

resources/scripts/admin/views/settings/FileDiskSetting.vue

@@ -39,7 +39,7 @@
         <BaseDropdown v-if="isNotSystemDisk(row.data)">
           <template #activator>
             <div class="inline-block">
-              <BaseIcon name="DotsHorizontalIcon" class="text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
             </div>
           </template>
 

resources/scripts/admin/views/settings/NotesSetting.vue

@@ -31,6 +31,10 @@
           :load-data="refreshTable"
         />
       </template>
+      <template #cell-name="{ row }">
+        {{ row.data.name }}
+        <BaseIcon v-if="row.data.is_default" name="StarIcon" class="w-3 h-3 text-primary-400" />
+      </template>
       <template #cell-type="{ row }">
         {{ getLabelNote(row.data.type) }}
       </template>
@@ -42,9 +46,7 @@
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useModalStore } from '@/scripts/stores/modal'
-import { useDialogStore } from '@/scripts/stores/dialog'
 import { useNotesStore } from '@/scripts/admin/stores/note'
-import { useNotificationStore } from '@/scripts/stores/notification'
 import NoteDropdown from '@/scripts/admin/components/dropdowns/NoteIndexDropdown.vue'
 import NoteModal from '@/scripts/admin/components/modal-components/NoteModal.vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
@@ -57,9 +59,7 @@ import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 const { t } = useI18n()
 
 const modalStore = useModalStore()
-const dialogStore = useDialogStore()
 const noteStore = useNotesStore()
-const notificationStore = useNotificationStore()
 const userStore = useUserStore()
 
 const table = ref('')
@@ -70,7 +70,7 @@ const notesColumns = computed(() => {
       key: 'name',
       label: t('settings.customization.notes.name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-gray-900 flex gap-1 items-center',
     },
     {
       key: 'type',

resources/scripts/admin/views/settings/NotificationsSetting.vue

@@ -33,7 +33,7 @@
             <BaseIcon
               v-if="!isSaving"
               :class="slotProps.class"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
             />
           </template>
 

resources/scripts/admin/views/settings/PDFGenerationSetting.vue

@@ -0,0 +1,72 @@
+<template>
+    <BaseSettingCard
+      :title="$t('settings.pdf.pdf_configuration')"
+      :description="$t('settings.pdf.section_description')"
+    >
+    <div v-if="pdfDriverStore && pdfDriverStore.pdfDriverConfig" class="mt-14">
+      <component
+        :is="pdfDriver"
+        :config-data="pdfDriverStore.pdfDriverConfig"
+        :is-saving="isSaving"
+        :drivers="pdfDriverStore.pdf_drivers"
+        :is-fetching-initial-data="isFetchingInitialData"
+        @on-change-driver="(val) => changeDriver(val)"
+        @submit-data="saveConfig"
+      >
+      </component>
+    </div>
+    </BaseSettingCard>
+</template>
+
+<script setup>
+  import GotenbergDriver from '@/scripts/admin/views/settings/pdf-driver/GotenbergDriver.vue';
+  import DomPDFDriver from '@/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue';
+  import { ref, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { usePDFDriverStore } from '@/scripts/admin/stores/pdf-driver'
+  const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+  let isFetchingInitialData = ref(false)
+  let isSaving = ref(false)
+
+  const pdfDriverStore = usePDFDriverStore();
+  const { t } = useI18n();
+
+  function changeDriver(value) {
+    pdfDriverStore.pdf_driver = value
+    pdfDriverStore.pdfDriverConfig.pdf_driver = value
+  }
+
+  async function loadData() {
+    isFetchingInitialData.value = true
+    await Promise.all([
+      pdfDriverStore.fetchDrivers(),
+      pdfDriverStore.fetchConfig(),
+    ])
+    isFetchingInitialData.value = false
+  }
+  loadData();
+
+  async function saveConfig(value) {
+    try {
+      isSaving.value = true
+      await pdfDriverStore.updateConfig(value)
+    } catch (e) {
+      console.error(e)
+    } finally {
+      isSaving.value = false
+      return false
+    }
+  }
+
+  const pdfDriver = computed(() => {
+    switch (pdfDriverStore.pdf_driver) {
+      case 'dompdf':
+        return DomPDFDriver
+      case 'gotenberg':
+        return GotenbergDriver
+      default:
+        return DomPDFDriver
+    }
+  })
+</script>

resources/scripts/admin/views/settings/PreferencesSetting.vue

@@ -143,7 +143,7 @@
         class="mt-6"
       >
         <template #left="slotProps">
-          <BaseIcon name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('settings.company_info.save') }}
       </BaseButton>
@@ -183,7 +183,7 @@
             class="mt-6"
           >
             <template #left="slotProps">
-              <BaseIcon name="SaveIcon" :class="slotProps.class" />
+              <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
             </template>
             {{ $t('general.save') }}
           </BaseButton>

resources/scripts/admin/views/settings/TaxTypesSetting.vue

@@ -20,7 +20,20 @@
       :data="fetchData"
       :columns="taxTypeColumns"
     >
-      <template #cell-percent="{ row }"> {{ row.data.percent }} % </template>
+    <template #cell-calculation_type="{ row }">
+      {{ $t(`settings.tax_types.${row.data.calculation_type}`) }}
+    </template>
+    <template #cell-amount="{ row }">
+      <template v-if="row.data.calculation_type === 'percentage'">
+        {{ row.data.percent }} %
+      </template>
+      <template v-else-if="row.data.calculation_type === 'fixed'">
+        <BaseFormatMoney :amount="row.data.fixed_amount" :currency="defaultCurrency" />
+      </template>
+      <template v-else>
+        -
+      </template>
+    </template>
 
       <template v-if="hasAtleastOneAbility()" #cell-actions="{ row }">
         <TaxTypeDropdown
@@ -70,9 +83,9 @@ const taxTypeStore = useTaxTypeStore()
 const modalStore = useModalStore()
 const userStore = useUserStore()
 const moduleStore = useModuleStore()
-
 const table = ref(null)
 const taxPerItemSetting = ref(companyStore.selectedCompanySettings.tax_per_item)
+const defaultCurrency = computed(() => companyStore.selectedCompanyCurrency)
 
 const taxTypeColumns = computed(() => {
   return [
@@ -83,8 +96,14 @@ const taxTypeColumns = computed(() => {
       tdClass: 'font-medium text-gray-900',
     },
     {
-      key: 'percent',
-      label: t('settings.tax_types.percent'),
+      key: 'calculation_type',
+      label: t('settings.tax_types.calculation_type'),
+      thClass: 'extra',
+      tdClass: 'font-medium text-gray-900',
+    },
+    {
+      key: 'amount',
+      label: t('settings.tax_types.amount'),
       thClass: 'extra',
       tdClass: 'font-medium text-gray-900',
     },

resources/scripts/admin/views/settings/customization/NumberCustomizer.vue

@@ -129,7 +129,7 @@
                 {{ $t('general.remove') }}
                 <template #left="slotProps">
                   <BaseIcon
-                    name="XIcon"
+                    name="XMarkIcon"
                     class="!sm:m-0"
                     :class="slotProps.class"
                   />
@@ -189,7 +189,7 @@
     @click="submitForm"
   >
     <template #left="slotProps">
-      <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+      <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
     </template>
     {{ $t('settings.customization.save') }}
   </BaseButton>

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue

@@ -57,7 +57,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue

@@ -46,7 +46,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue

@@ -55,7 +55,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue

@@ -44,7 +44,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>

resources/scripts/admin/views/settings/customization/items/ItemsTab.vue

@@ -15,7 +15,7 @@
       <BaseDropdown>
         <template #activator>
           <div class="inline-block">
-            <BaseIcon name="DotsHorizontalIcon" class="text-gray-500" />
+            <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
           </div>
         </template>
 

resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue

@@ -47,7 +47,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>

resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue

@@ -67,7 +67,7 @@
         type="submit"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
         </template>
         {{ $t('general.save') }}
       </BaseButton>

resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue

@@ -59,7 +59,7 @@
         >
           <template #right>
             <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
               class="mr-1 text-gray-500 cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
@@ -133,7 +133,7 @@
         type="submit"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('general.save') }}
       </BaseButton>

resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue

@@ -154,13 +154,33 @@
         >
           <template #right>
             <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
               class="mr-1 text-gray-500 cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
           </template>
         </BaseInput>
       </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.ses_region')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.sesConfig.mail_ses_region.$error &&
+          v$.sesConfig.mail_ses_region.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.sesConfig.mail_ses_region"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_ses_region"
+          :invalid="v$.sesConfig.mail_ses_region.$error"
+          @input="v$.sesConfig.mail_ses_region.$touch()"
+        />
+      </BaseInputGroup>
+
     </BaseInputGrid>
 
     <div class="flex my-10">
@@ -172,7 +192,7 @@
         type="submit"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('general.save') }}
       </BaseButton>
@@ -244,6 +264,9 @@ const rules = computed(() => {
       mail_ses_secret: {
         required: helpers.withMessage(t('validation.required'), required),
       },
+      mail_ses_region: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
       mail_encryption: {
         required: helpers.withMessage(t('validation.required'), required),
       },

resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue

@@ -63,7 +63,7 @@
         >
           <template #right>
             <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
               class="mr-1 text-gray-500 cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
@@ -159,7 +159,7 @@
         variant="primary"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('general.save') }}
       </BaseButton>

resources/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue

@@ -0,0 +1,117 @@
+<template>
+  <form @submit.prevent="saveConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.pdf.driver')"
+        :error="
+          v$.dompdf.pdf_driver.$error &&
+          v$.dompdf.pdf_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="pdfDriverStore.dompdf.pdf_driver"
+          :content-loading="isFetchingInitialData"
+          :options="drivers"
+          :can-deselect="false"
+          :invalid="v$.dompdf.pdf_driver.$error"
+          @update:modelValue="onChangeDriver"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+    <div class="flex my-10">
+      <BaseButton
+        :disabled="isSaving"
+        :content-loading="isFetchingInitialData"
+        :loading="isSaving"
+        type="submit"
+        variant="primary"
+      >
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { usePDFDriverStore } from '@/scripts/admin/stores/pdf-driver'
+  import {required, email, helpers} from '@vuelidate/validators'
+  import useVuelidate from '@vuelidate/core'
+
+  const props = defineProps({
+    configData: {
+      type: Object,
+      require: true,
+      default: Object,
+    },
+    isSaving: {
+      type: Boolean,
+      require: true,
+      default: false,
+    },
+    isFetchingInitialData: {
+      type: Boolean,
+      require: true,
+      default: false,
+    },
+    drivers: {
+      type: Array,
+      require: true,
+      default: Array,
+    },
+  })
+
+
+  const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+  let isFetchingInitialData = ref(false)
+
+  const pdfDriverStore = usePDFDriverStore();
+  const { t } = useI18n();
+
+  const rules = computed(() => {
+    return {
+      dompdf: {
+        pdf_driver: {
+          required: helpers.withMessage(t('validation.required'), required),
+        },
+      },
+    }
+  })
+
+  const v$ = useVuelidate(
+    rules,
+    computed(() => pdfDriverStore)
+  )
+
+  function onChangeDriver() {
+    // validation
+    v$.value.dompdf.pdf_driver.$touch()
+    emit('on-change-driver', pdfDriverStore.dompdf.pdf_driver)
+  }
+
+  async function saveConfig() {
+    v$.value.dompdf.$touch()
+    if (!v$.value.dompdf.$invalid) {
+      emit('submit-data', pdfDriverStore.dompdf)
+    }
+    return false
+  }
+
+  onMounted(() => {
+    for (const key in pdfDriverStore.dompdf) {
+      if (props.configData.hasOwnProperty(key)) {
+        pdfDriverStore.$patch((state) => {
+          state.dompdf[key] = props.configData[key]
+        });
+      }
+    }
+  })
+
+</script>

resources/scripts/admin/views/settings/pdf-driver/GotenbergDriver.vue

@@ -0,0 +1,128 @@
+<template>
+  <form @submit.prevent="saveConfig">
+    <BaseInputGrid>
+      <BaseInputGroup :label="$t('settings.pdf.driver')" :error="
+          v$.gotenberg.pdf_driver.$error &&
+          v$.gotenberg.pdf_driver.$errors[0].$message
+        " required>
+        <BaseMultiselect v-model="pdfDriverStore.gotenberg.pdf_driver" :content-loading="isFetchingInitialData"
+          :options="drivers" :can-deselect="false" @update:modelValue="onChangeDriver"
+          :invalid="v$.gotenberg.pdf_driver.$error" />
+      </BaseInputGroup>
+      <BaseInputGroup :label="$t('settings.pdf.gotenberg_host')" :content-loading="isFetchingInitialData"
+        :error="
+          v$.gotenberg.gotenberg_host.$error &&
+          v$.gotenberg.gotenberg_host.$errors[0].$message
+        " required>
+        <BaseInput v-model="pdfDriverStore.gotenberg.gotenberg_host" :content-loading="isFetchingInitialData"
+          :invalid="v$.gotenberg.gotenberg_host.$error" type="text" name="gotenberg_host" />
+      </BaseInputGroup>
+      <BaseInputGroup :label="$t('settings.pdf.papersize')" :content-loading="isFetchingInitialData" :error="
+          v$.gotenberg.gotenberg_papersize.$error &&
+          v$.gotenberg.gotenberg_papersize.$errors[0].$message
+        "
+          :help-text="$t('settings.pdf.papersize_hint')"
+        required>
+        <BaseInput v-model="pdfDriverStore.gotenberg.gotenberg_papersize" :content-loading="isFetchingInitialData"
+          :invalid="v$.gotenberg.gotenberg_papersize.$error" type="text" name="gotenberg_papersize" />
+      </BaseInputGroup>
+    </BaseInputGrid>
+    <div class="flex my-10">
+      <BaseButton :disabled="isSaving" :content-loading="isFetchingInitialData" :loading="isSaving" type="submit"
+        variant="primary">
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
+
+<script setup>
+  import {ref, computed, onMounted} from 'vue'
+  import {useI18n} from 'vue-i18n'
+  import {usePDFDriverStore} from '@/scripts/admin/stores/pdf-driver'
+  import {required, email, helpers} from '@vuelidate/validators'
+  import useVuelidate from '@vuelidate/core'
+
+  const props = defineProps({
+    configData: {
+      type: Object,
+      require: true,
+      default: Object,
+    },
+    isSaving: {
+      type: Boolean,
+      require: true,
+      default: false,
+    },
+    isFetchingInitialData: {
+      type: Boolean,
+      require: true,
+      default: false,
+    },
+    drivers: {
+      type: Array,
+      require: true,
+      default: Array,
+    },
+  })
+
+
+  const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+  const pdfDriverStore = usePDFDriverStore();
+  const {t} = useI18n();
+
+  const rules = computed(() => {
+    return {
+      gotenberg: {
+        pdf_driver: {
+          required: helpers.withMessage(t('validation.required'), required),
+        },
+        gotenberg_host: {
+          required: helpers.withMessage(t('validation.required'), required),
+        },
+        gotenberg_papersize: {
+          required: helpers.withMessage(t('validation.required'), required),
+        },
+      },
+    }
+  })
+
+  const v$ = useVuelidate(
+    rules,
+    computed(() => pdfDriverStore)
+  )
+
+  function onChangeDriver() {
+    v$.value.gotenberg.pdf_driver.$touch()
+    emit('on-change-driver', pdfDriverStore.gotenberg.pdf_driver)
+  }
+
+  async function saveConfig() {
+    v$.value.gotenberg.$touch()
+    if (!v$.value.gotenberg.$invalid) {
+      emit('submit-data', pdfDriverStore.gotenberg)
+    }
+    return false
+  }
+
+  // Fill pdfDriverStore.gotenbergConfig with data from config prop
+  onMounted(() => {
+    for (const key in pdfDriverStore.gotenberg) {
+      if (props.configData.hasOwnProperty(key)) {
+        pdfDriverStore.$patch((state) => {
+          state.gotenberg[key] = props.configData[key]
+        });
+      }
+    }
+    if (pdfDriverStore.gotenberg.gotenberg_papersize == '')
+      pdfDriverStore.$patch((state) => {
+        state.gotenberg.gotenberg_papersize = '210mm 297mm';
+      });
+  })
+
+</script>