From 4418a15faeeab1811333068b9a5433ce276025ad Mon Sep 17 00:00:00 2001
From: Polymeta <40173118+Polymeta@users.noreply.github.com>
Date: Sun, 26 Jan 2025 01:53:29 +0000
Subject: [PATCH 1/2] re-introduce linting to ui package and run linter

---
 packages/ui/eslint.config.mjs                 | 12 ++++++++
 packages/ui/package.json                      |  4 ++-
 .../ui/src/components/ForgeActionButton.vue   |  4 +--
 packages/ui/src/components/ForgeAlert.vue     |  2 +-
 .../ui/src/components/ForgeAutoComplete.vue   |  6 ++--
 packages/ui/src/components/ForgeChip.vue      |  4 ++-
 .../ui/src/components/ForgeDatepicker.vue     | 17 ++++++-----
 packages/ui/src/components/ForgeForm.vue      |  7 +++--
 .../ui/src/components/ForgeInlineEditor.vue   | 14 +++++-----
 packages/ui/src/components/ForgeLink.vue      |  6 ++--
 .../components/ForgeMultiSelectPreview.vue    |  9 ++++--
 .../ui/src/components/ForgeScratchpad.vue     |  8 +++---
 .../file-uploader/ForgeFileUploader.vue       |  4 +--
 .../file-uploader/components/DragDropArea.vue |  2 +-
 .../file-uploader/components/FileInfo.vue     | 28 +++++++++++--------
 .../file-uploader/components/UploadButton.vue |  6 ++--
 .../file-uploader/components/UploadStatus.vue |  4 +--
 .../file-uploader/utilities/utilities.ts      |  2 +-
 .../table/ForgeColumnCustomiser.vue           |  7 +++--
 .../table/ForgePaginationHeader.vue           |  3 +-
 .../ui/src/components/table/ForgeTable.vue    | 21 +++++++-------
 packages/ui/src/passthroughs/Tree.pt.ts       |  2 --
 22 files changed, 101 insertions(+), 71 deletions(-)
 create mode 100644 packages/ui/eslint.config.mjs

diff --git a/packages/ui/eslint.config.mjs b/packages/ui/eslint.config.mjs
new file mode 100644
index 000000000..0a37f9636
--- /dev/null
+++ b/packages/ui/eslint.config.mjs
@@ -0,0 +1,12 @@
+import {config} from "eslint-config-custom/vue"
+
+export default [
+  ...config,
+  {
+    "rules": {
+      "@typescript-eslint/no-explicit-any": "warn",
+      "vue/require-prop-types": "warn",
+      "vue/valid-v-for": "warn"
+    }
+  }
+];
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d490c3ac7..19a5047f6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -30,7 +30,9 @@
     "test:unit": "vitest --ui --coverage",
     "build": "vite build",
     "build:watch": "vite build --watch",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix"
   },
   "dependencies": {
     "@azure/abort-controller": "^2.0.0",
diff --git a/packages/ui/src/components/ForgeActionButton.vue b/packages/ui/src/components/ForgeActionButton.vue
index f9dbfb5cf..a35e2114e 100644
--- a/packages/ui/src/components/ForgeActionButton.vue
+++ b/packages/ui/src/components/ForgeActionButton.vue
@@ -11,8 +11,8 @@ import { ref } from "vue";
 const loading = ref<boolean>(false)
 
 export interface ForgeActionButtonProps extends /* @vue-ignore */ ButtonProps {
-  action: Function,
-  errorAction: Function,
+  action: (...param: any[]) => Promise<void>,
+  errorAction: (...param: any[]) => Promise<void>,
   errorParams?: Array<any>,
   params?: Array<any>
 }
diff --git a/packages/ui/src/components/ForgeAlert.vue b/packages/ui/src/components/ForgeAlert.vue
index 5fbf00e36..048795672 100644
--- a/packages/ui/src/components/ForgeAlert.vue
+++ b/packages/ui/src/components/ForgeAlert.vue
@@ -2,7 +2,7 @@
   <Message v-bind="{...$attrs, ...props}">
     <template #icon>
       <div :class="props.icon ? 'me-2 pe-1' : ''">
-        <Icon data-cy="message-icon" v-if="props.icon" :icon="props.icon" :class="`text-${props.severity}`" :height="35" />
+        <Icon v-if="props.icon" data-cy="message-icon" :icon="props.icon" :class="`text-${props.severity}`" :height="35" />
       </div>
     </template>
     <slot/>
diff --git a/packages/ui/src/components/ForgeAutoComplete.vue b/packages/ui/src/components/ForgeAutoComplete.vue
index 51f850390..3234af64d 100644
--- a/packages/ui/src/components/ForgeAutoComplete.vue
+++ b/packages/ui/src/components/ForgeAutoComplete.vue
@@ -1,6 +1,8 @@
 <template>
-  <AutoComplete v-bind="{ ...$attrs, ...$props }" inputClass="form-control border-0">
-    <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+  <AutoComplete v-bind="{ ...$attrs, ...$props }" input-class="form-control border-0">
+    <template v-for="(_, name) in $slots" #[name]>
+<slot   :name="name" />
+</template>
   </AutoComplete>
 </template>
 
diff --git a/packages/ui/src/components/ForgeChip.vue b/packages/ui/src/components/ForgeChip.vue
index d1710f28b..d81e42e9a 100644
--- a/packages/ui/src/components/ForgeChip.vue
+++ b/packages/ui/src/components/ForgeChip.vue
@@ -1,6 +1,8 @@
 <template>
   <Chip v-bind="{ ...$attrs, ...$props }" :pt="chipPt">
-    <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+    <template v-for="(_, name) in $slots" #[name]>
+<slot   :name="name" />
+</template>
   </Chip>
 </template>
 
diff --git a/packages/ui/src/components/ForgeDatepicker.vue b/packages/ui/src/components/ForgeDatepicker.vue
index c11139bc7..f0380dd2a 100644
--- a/packages/ui/src/components/ForgeDatepicker.vue
+++ b/packages/ui/src/components/ForgeDatepicker.vue
@@ -5,15 +5,18 @@
     </span>
 
     <div class="position-relative w-100">
-      <DatePicker v-bind="{...props, ...$attrs}" :pt="pt" v-model="model" @update:model-value="handleChange"
-                @blur="() => handleBlur" :input-class="{'datepicker-invalid': hasErrors}"/>
-      <Icon data-cy="icon" icon="bi:calendar4" v-show="props.showIcon"
+      <DatePicker
+v-bind="{...props, ...$attrs}" v-model="model" :pt="pt" :input-class="{'datepicker-invalid': hasErrors}"
+                @update:model-value="handleChange" @blur="() => handleBlur"/>
+      <Icon
+v-show="props.showIcon" data-cy="icon" icon="bi:calendar4"
             class="position-absolute end-0 top-50 bottom-50 my-auto me-2 bg-white" 
             :class="`${ hasErrors ? 'text-danger-dark' : 'text-muted'}`"
       />
-      <Icon data-cy="icon" icon="bi:x" v-show="props.modelValue" @click="clear"
-            class="position-absolute end-0 top-50 bottom-50 my-auto text-muted cursor-pointer bg-white"
-            :class="props.showIcon ? 'datepicker-close-icon' : 'me-2'" />
+      <Icon
+v-show="props.modelValue" data-cy="icon" icon="bi:x" class="position-absolute end-0 top-50 bottom-50 my-auto text-muted cursor-pointer bg-white"
+            :class="props.showIcon ? 'datepicker-close-icon' : 'me-2'"
+            @click="clear" />
     </div>
 
 
@@ -22,7 +25,7 @@
     </span>
   </div>
 
-  <small data-cy="error" class="text-invalid" v-show="hasErrors">{{ errorMessage }}</small>
+  <small v-show="hasErrors" data-cy="error" class="text-invalid">{{ errorMessage }}</small>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/ui/src/components/ForgeForm.vue b/packages/ui/src/components/ForgeForm.vue
index 441c9a06d..cafd45172 100644
--- a/packages/ui/src/components/ForgeForm.vue
+++ b/packages/ui/src/components/ForgeForm.vue
@@ -21,7 +21,8 @@
         Triggered when the cancel button is clicked
         @event cancel
         -->
-        <Button v-if="!hideCancel" data-cy="cancel-btn" type="reset" severity="secondary" outlined
+        <Button
+v-if="!hideCancel" data-cy="cancel-btn" type="reset" severity="secondary" outlined
                   @click="$emit('cancel')">{{ cancelText }}
         </Button>
       </slot>
@@ -31,7 +32,7 @@
         </Button>
       </slot>
     </div>
-    <forge-loader data-cy="loading-spinner" v-if="loading"/>
+    <forge-loader v-if="loading" data-cy="loading-spinner"/>
   </form>
 </template>
 
@@ -41,7 +42,7 @@ import ForgeAlert from "./ForgeAlert.vue";
 import ForgeLoader from "./ForgeLoader.vue";
 
 export interface ForgeFormProps {
-  onSubmit: Function,
+  onSubmit: () => Promise<void>,
   title?: string,
   hideTitle?: boolean,
   titleClass?: string,
diff --git a/packages/ui/src/components/ForgeInlineEditor.vue b/packages/ui/src/components/ForgeInlineEditor.vue
index 0f3494f70..5083bdaed 100644
--- a/packages/ui/src/components/ForgeInlineEditor.vue
+++ b/packages/ui/src/components/ForgeInlineEditor.vue
@@ -2,18 +2,18 @@
   <div :id="props.name">
     <div v-if="!readonly">
       <div v-if="editing">
-        <div class="d-flex justify-content-between align-items-center position-relative" v-on-click-outside="editFinished">
+        <div v-on-click-outside="editFinished" class="d-flex justify-content-between align-items-center position-relative">
           <slot name="editor" :class="{ 'is-invalid': hasErrors }" :edit-finished="editFinished" :cancel="cancel" :val="value">
             <InputText
+                ref="input"
                 v-model.trim="value"
                 data-cy="input"
-                ref="input"
                 :class="{ 'is-invalid': hasErrors }"
                 @keydown.enter="editFinished"
                 @keydown.esc="cancel"
             />
           </slot>
-          <Icon icon="bi:x-circle" class="mx-2 cursor-pointer" @click="reset" @keydown.enter="reset" data-cy="clear-icon"/>
+          <Icon icon="bi:x-circle" class="mx-2 cursor-pointer" data-cy="clear-icon" @click="reset" @keydown.enter="reset"/>
         </div>
       </div>
       <div v-else class="d-flex text-muted" @click="beginEdit" @focus="beginEdit" >
@@ -42,8 +42,8 @@ import { vOnClickOutside } from '@vueuse/components'
 
 export interface ForgeInlineEditorProps {
   name?: string,
-  completeAction?: Function,
-  errorAction?: Function,
+  completeAction?: (...params: any[]) => Promise<void>,
+  errorAction?: (...params: any[]) => Promise<void>,
   params?: Array<any>,
   errorParams?: Array<any>,
   readonly?: boolean,
@@ -73,9 +73,9 @@ const editFinished = async () => {
     try {
       await props.completeAction.apply(this, props.params);
       editing.value = !editing.value;
-    } catch (completeActionError) {
+    } catch {
       if (props.errorAction) {
-        await props.errorAction.apply(this, props.errorParams);
+        await props.errorAction.apply(this, props.errorParams ?? []);
       }
     }
   } else {
diff --git a/packages/ui/src/components/ForgeLink.vue b/packages/ui/src/components/ForgeLink.vue
index b172ddf0d..491508cb5 100644
--- a/packages/ui/src/components/ForgeLink.vue
+++ b/packages/ui/src/components/ForgeLink.vue
@@ -7,7 +7,7 @@
       :class="linkClasses"
   >
     <slot>
-      <Icon id="link-icon" :icon="iconName" class="bi my-auto" :class="iconClasses" v-if="iconName"/>
+      <Icon v-if="iconName" id="link-icon" :icon="iconName" class="bi my-auto" :class="iconClasses"/>
       {{ label }}
     </slot>
   </a>
@@ -52,7 +52,7 @@ const {
   url
 } = defineProps<ForgeLinkProps>()
 
-const linkClasses = computed<Object>(() => ({
+const linkClasses = computed<object>(() => ({
   [`link-${severity}`]: severity,
   [`link-underline-${underlineSeverity}`]: underlineSeverity,
   [`link-opacity-${opacity}`]: opacity,
@@ -63,7 +63,7 @@ const linkClasses = computed<Object>(() => ({
   'icon-link icon-link-hover': animateIconOnHover,
 }))
 
-const iconClasses = computed<Object>(() => ({
+const iconClasses = computed<object>(() => ({
   'order-2': positionIconEnd,
   'me-1': !positionIconEnd && !animateIconOnHover,
   'ms-1': positionIconEnd && !animateIconOnHover,
diff --git a/packages/ui/src/components/ForgeMultiSelectPreview.vue b/packages/ui/src/components/ForgeMultiSelectPreview.vue
index b22b7104e..0516a3c59 100644
--- a/packages/ui/src/components/ForgeMultiSelectPreview.vue
+++ b/packages/ui/src/components/ForgeMultiSelectPreview.vue
@@ -1,8 +1,10 @@
 <template>
   <div :class="orientation === 'column' ? 'row' : ''" data-cy="multiselect-preview">
     <div :class="orientation === 'row' ? 'col-12 mb-1' : 'col'" data-cy="multiselect-container">
-      <MultiSelect v-model="model" v-bind="{...$attrs}" :options="props.options ?? []" optionLabel="label" :placeholder="multiselectPlaceholder" data-cy="multiselect">
-        <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+      <MultiSelect v-model="model" v-bind="{...$attrs}" :options="props.options ?? []" option-label="label" :placeholder="multiselectPlaceholder" data-cy="multiselect">
+        <template v-for="(_, name) in $slots" #[name]>
+<slot   :name="name" />
+</template>
       </MultiSelect>
       <!-- @slot If you need to display some content below the multi select such as validation content-->
       <slot name="after-multi-select" />
@@ -11,7 +13,8 @@
       <div :style="{ height: height }" class="overflow-auto">
         <div class="border alternating-item-list">
           <div v-if="title" class="p-2 border-top border-bottom" data-cy="title">{{ title }}</div>
-          <div v-for="item in model" :key="item.id"
+          <div
+v-for="item in model" :key="item.id"
                class="p-2 item d-flex justify-content-between align-items-center">
             <!-- @slot Use this slot if the default labels is not enough, maybe for a b-link to redirect the user to the item -->
             <slot name="list-item" :item="item">
diff --git a/packages/ui/src/components/ForgeScratchpad.vue b/packages/ui/src/components/ForgeScratchpad.vue
index f7d57bb4d..7f70ff37c 100644
--- a/packages/ui/src/components/ForgeScratchpad.vue
+++ b/packages/ui/src/components/ForgeScratchpad.vue
@@ -12,10 +12,10 @@
         :line-join="lineJoin"
     />
     <div class="d-flex flex-row mt-1 gap-1">
-      <Button v-if="props.showUndo" @click="undo" outlined data-cy="undo-button">Undo</Button>
-      <Button v-if="props.showRedo" @click="redo" outlined data-cy="redo-button">Redo</Button>
-      <Button v-if="props.showClear" @click="clear" outlined data-cy="clear-button">Clear</Button>
-      <Button v-if="props.showSave" @click="save" class="ms-auto" data-cy="save-button">Save</Button>
+      <Button v-if="props.showUndo" outlined data-cy="undo-button" @click="undo">Undo</Button>
+      <Button v-if="props.showRedo" outlined data-cy="redo-button" @click="redo">Redo</Button>
+      <Button v-if="props.showClear" outlined data-cy="clear-button" @click="clear">Clear</Button>
+      <Button v-if="props.showSave" class="ms-auto" data-cy="save-button" @click="save">Save</Button>
     </div>
   </div>
 </template>
diff --git a/packages/ui/src/components/file-uploader/ForgeFileUploader.vue b/packages/ui/src/components/file-uploader/ForgeFileUploader.vue
index aa06ce581..2e618c0df 100644
--- a/packages/ui/src/components/file-uploader/ForgeFileUploader.vue
+++ b/packages/ui/src/components/file-uploader/ForgeFileUploader.vue
@@ -2,14 +2,14 @@
   <div data-cy="file-uploader">
     <UploadButton v-bind="props" v-model="files" />
     <div v-if="showDragDropArea">
-      <DragDropArea :max-file-input="props.maxFileInput" :max-file-size="props.maxFileSize" :accepted-file-types="props.acceptedFileTypes" v-model="files">
+      <DragDropArea v-model="files" :max-file-input="props.maxFileInput" :max-file-size="props.maxFileSize" :accepted-file-types="props.acceptedFileTypes">
       <span v-for="({ file }, index) in files">
         <FileInfo
             :key="file.name"
-            :class="index === files.length - 1 || files.length == 1 ? '' : 'border-bottom'"
             v-model:file="files[index].file"
             v-model:blob-file-name="files[index].blobFileName"
             v-model:upload-status="files[index].status"
+            :class="index === files.length - 1 || files.length == 1 ? '' : 'border-bottom'"
             v-bind="props"
             @deleted="deleteFiles"
         />
diff --git a/packages/ui/src/components/file-uploader/components/DragDropArea.vue b/packages/ui/src/components/file-uploader/components/DragDropArea.vue
index e393c77a5..e2d5c8576 100644
--- a/packages/ui/src/components/file-uploader/components/DragDropArea.vue
+++ b/packages/ui/src/components/file-uploader/components/DragDropArea.vue
@@ -6,7 +6,7 @@
       @dragover.prevent="dragInput = true"
       @drop.prevent="dropFiles"
   >
-    <div v-if="files.length === 0" class="py-4 px-3" id="placeholder-message">
+    <div v-if="files.length === 0" id="placeholder-message" class="py-4 px-3">
       <Icon icon="bi:upload" class="me-2" height="20px" width="20px" />
       Drag and drop files here
     </div>
diff --git a/packages/ui/src/components/file-uploader/components/FileInfo.vue b/packages/ui/src/components/file-uploader/components/FileInfo.vue
index db8a0b5be..ac6b6f5a7 100644
--- a/packages/ui/src/components/file-uploader/components/FileInfo.vue
+++ b/packages/ui/src/components/file-uploader/components/FileInfo.vue
@@ -1,32 +1,36 @@
 <template>
   <div class="py-4 px-3 d-flex" :data-cy="`file-info-${file.name}`">
     <div>
-      <Image v-if="isImage(file.type)" id="thumbnail-image" image-class="image-file-thumbnail border"
+      <Image
+v-if="isImage(file.type)" id="thumbnail-image" image-class="image-file-thumbnail border"
         :src="getThumbnailUrl(file)" :alt="file.name" width="75px" preview />
       <Icon v-else id="file-earmark" icon="bi:file-earmark" color="black" width="75px" />
     </div>
     <div class="ms-3 d-flex flex-column">
       <div>
-        <ForgeInlineEditor v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFileNameRules"
+        <ForgeInlineEditor
+v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFileNameRules"
           :name="file.name" :complete-action="updateFileName" />
         <span v-else id="file-name">{{ fileName }}</span>
       </div>
-      <span class="text-black-50" id="file-type">File type: {{ file.type.split('/').pop() }}</span>
-      <span class="text-black-50" id="file-size">File size: {{ formatFileSize(file.size) }}</span>
+      <span id="file-type" class="text-black-50">File type: {{ file.type.split('/').pop() }}</span>
+      <span id="file-size" class="text-black-50">File size: {{ formatFileSize(file.size) }}</span>
     </div>
 
     <div class="ms-auto my-auto d-flex">
-      <UploadStatus :key="uploadStatus" :file-size="file.size" :upload-status="uploadStatus"
+      <UploadStatus
+:key="uploadStatus" :file-size="file.size" :upload-status="uploadStatus"
         :bytes-uploaded="bytesUploaded" :max-file-size="maxFileSize" />
-      <Button link @click="uploadBlob"
-        v-if="uploadStatus === 'Not Uploaded' || uploadStatus === 'Failed' || uploadStatus === 'Duplicate' || uploadStatus === 'Aborted'">
+      <Button
+v-if="uploadStatus === 'Not Uploaded' || uploadStatus === 'Failed' || uploadStatus === 'Duplicate' || uploadStatus === 'Aborted'" link
+        @click="uploadBlob">
         <Icon
           :icon="uploadStatus === 'Not Uploaded' || uploadStatus === 'Duplicate' ? 'bi:upload' : 'bi:arrow-clockwise'" />
       </Button>
-      <Button link @click="controller.value.abort()" v-if="uploadStatus === 'Uploading'">
+      <Button v-if="uploadStatus === 'Uploading'" link @click="controller.value.abort()">
         <Icon :icon="'bi:x-circle-fill'" />
       </Button>
-      <Button link @click="deleteFileFromBlob" v-else id="delete-button">
+      <Button v-else id="delete-button" link @click="deleteFileFromBlob">
         <Icon :icon="'bi:trash'" />
       </Button>
     </div>
@@ -90,9 +94,9 @@ const updateFileName = () => {
 }
 
 const ensureFileNameHasCorrectExtension = () => {
-  let fileNameSections = fileName.value.split('.');
-  let fileExtensionFromMime = mime.getExtension(fileMimeType.value!);
-  let lastWordInFileName = fileName.value.split('.').pop();
+  const fileNameSections = fileName.value.split('.');
+  const fileExtensionFromMime = mime.getExtension(fileMimeType.value!);
+  const lastWordInFileName = fileName.value.split('.').pop();
   // add missing file extension
   if (fileNameSections.length === 1) {
     if (lastWordInFileName && lastWordInFileName.length > 0) {
diff --git a/packages/ui/src/components/file-uploader/components/UploadButton.vue b/packages/ui/src/components/file-uploader/components/UploadButton.vue
index 8d33d4380..bffd56602 100644
--- a/packages/ui/src/components/file-uploader/components/UploadButton.vue
+++ b/packages/ui/src/components/file-uploader/components/UploadButton.vue
@@ -11,16 +11,16 @@
           :multiple="maxFileInput > 1"
           @input="(event) => addUploadedFiles([...(event.target as any).files])"
       />
-      <label :class="{ disabled: uploadDisabled }" class="btn btn-primary" id="file-input-button" for="file-input">
+      <label id="file-input-button" :class="{ disabled: uploadDisabled }" class="btn btn-primary" for="file-input">
         <slot name="button-content">
           <Icon icon="bi:upload" class="me-2" height="20px" width="20px" />
           Browse your computer
         </slot>
       </label>
     </div>
-    <Button link class="ms-auto" v-if="showDragDropArea" :key="acceptedFileTypes.length" id="accepted-file-types" @click="toggleAcceptedFileTypesOverlay">Accepted File Types</Button>
+    <Button v-if="showDragDropArea" id="accepted-file-types" :key="acceptedFileTypes.length" link class="ms-auto" @click="toggleAcceptedFileTypesOverlay">Accepted File Types</Button>
     <Popover ref="acceptedFilesOverlay">
-      <div class="text-break accepted-file-types-container" id="accepted-file-types-overlay">
+      <div id="accepted-file-types-overlay" class="text-break accepted-file-types-container">
         {{acceptedFileTypes.map((type) => (type.label ?? type.fileType.split('/').pop())).join(", ")}}
       </div>
     </Popover>
diff --git a/packages/ui/src/components/file-uploader/components/UploadStatus.vue b/packages/ui/src/components/file-uploader/components/UploadStatus.vue
index 4ac6636be..ef38b84ea 100644
--- a/packages/ui/src/components/file-uploader/components/UploadStatus.vue
+++ b/packages/ui/src/components/file-uploader/components/UploadStatus.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex align-items-center me-2">
-    <ForgeProgressBar v-if="uploadStatus === 'Uploading'" :pixelWidth="200" animate striped >{{ ((bytesUploaded / fileSize) * 100).toFixed(0)}}%</ForgeProgressBar>
-    <ForgeAlert id="upload-status-alert" v-if="uploadStatus !== 'Uploading' && uploadStatus !== 'Not Uploaded' && uploadStatus !== 'Uploaded' && uploadStatus !== 'Preparing'" :severity="alertSeverity" class="mb-0 w-75 ms-auto">{{ alertMessage }}</ForgeAlert>
+    <ForgeProgressBar v-if="uploadStatus === 'Uploading'" :pixel-width="200" animate striped >{{ ((bytesUploaded / fileSize) * 100).toFixed(0)}}%</ForgeProgressBar>
+    <ForgeAlert v-if="uploadStatus !== 'Uploading' && uploadStatus !== 'Not Uploaded' && uploadStatus !== 'Uploaded' && uploadStatus !== 'Preparing'" id="upload-status-alert" :severity="alertSeverity" class="mb-0 w-75 ms-auto">{{ alertMessage }}</ForgeAlert>
   </div>
 </template>
 
diff --git a/packages/ui/src/components/file-uploader/utilities/utilities.ts b/packages/ui/src/components/file-uploader/utilities/utilities.ts
index 2f9200ef3..e6311e3ef 100644
--- a/packages/ui/src/components/file-uploader/utilities/utilities.ts
+++ b/packages/ui/src/components/file-uploader/utilities/utilities.ts
@@ -1,6 +1,6 @@
 import { ForgeFileStatus } from "../../../types/forge-types";
 import { BlockBlobClient } from "@azure/storage-blob";
-import { Mime } from "mime";
+import { Mime } from "mime";
 import standardTypes from "mime/types/standard.js";
 import otherTypes from "mime/types/other.js";
 
diff --git a/packages/ui/src/components/table/ForgeColumnCustomiser.vue b/packages/ui/src/components/table/ForgeColumnCustomiser.vue
index 903b353ad..a6c42f29c 100644
--- a/packages/ui/src/components/table/ForgeColumnCustomiser.vue
+++ b/packages/ui/src/components/table/ForgeColumnCustomiser.vue
@@ -1,5 +1,5 @@
 <template>
-  <Button @click="togglePanel" class="ms-2">
+  <Button class="ms-2" @click="togglePanel">
     <div class="d-flex">
       <div class="me-3">
         <Icon icon="bi:layout-three-columns" />
@@ -13,7 +13,8 @@
 
   <Popover ref="columnCustomiserPanel" class="column-customiser" @hide="() =>  panelVisible = false" @show="() => panelVisible = true">
     <div class="d-flex flex-column w-100">
-      <div v-for="(column, index) in columns" class="d-flex cursor-pointer"
+      <div
+v-for="(column, index) in columns" class="d-flex cursor-pointer"
            :class="{
             'border-top': index !== 0,
             'py-1': index !== 0 && columns.length - 1 !== index,
@@ -31,7 +32,7 @@
 import Button from 'primevue/button';
 import Popover from "primevue/popover";
 import { Icon } from '@iconify/vue'
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { ForgeColumn } from "@/types/forge-types.ts";
 import ForgeCheckbox from "@/components/ForgeCheckbox.vue";
 
diff --git a/packages/ui/src/components/table/ForgePaginationHeader.vue b/packages/ui/src/components/table/ForgePaginationHeader.vue
index 1e9986ccf..16f9cd2ee 100644
--- a/packages/ui/src/components/table/ForgePaginationHeader.vue
+++ b/packages/ui/src/components/table/ForgePaginationHeader.vue
@@ -2,7 +2,8 @@
   <div class="d-flex justify-content-start align-items-baseline" data-cy="pagination-header">
     Number of results per page
     <div class="ms-2">
-      <Select :options="props.pageSizes" :model-value="props.perPage" class="page-size"
+      <Select
+:options="props.pageSizes" :model-value="props.perPage" class="page-size"
                 @change="(event : SelectChangeEvent) => update(event)" />
     </div>
     <div v-if="props.total">
diff --git a/packages/ui/src/components/table/ForgeTable.vue b/packages/ui/src/components/table/ForgeTable.vue
index 9c4f3b392..858a9f740 100644
--- a/packages/ui/src/components/table/ForgeTable.vue
+++ b/packages/ui/src/components/table/ForgeTable.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="position-relative">
     <span data-cy="above-table-slot" ><slot name="above-table" /></span>
-    <DataTable class="w-100" :class="`${props.severity ? `forge-table-${props.severity}` : ''}`"
-               v-bind="{...props, ...$attrs }" :pt="pt"  :rows="perPage" :total-records="total" :filter-display="props.filters ? 'row' : undefined" ref="forgeTable" data-cy="table"
-               @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage" showHeaders>
+    <DataTable
+v-bind="{...props, ...$attrs }" ref="forgeTable"
+               class="w-100" :class="`${props.severity ? `forge-table-${props.severity}` : ''}`"  :pt="pt" :rows="perPage" :total-records="total" :filter-display="props.filters ? 'row' : undefined" data-cy="table"
+               show-headers @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage">
       <template v-for="(_, name) in $slots as unknown as DataTableSlots" #[name]="slotProps">
         <slot :name="name" v-bind="slotProps || {}"></slot>
       </template>
@@ -17,15 +18,15 @@
           <div class="d-flex">
             <div class="d-flex align-items-end mb-2">
               <span v-if="paginator && !legacyPaginationFooter">
-                <forge-pagination-header :total="total" :page-sizes="pageSizes" v-model:per-page="perPage"  @update:perPage="emitPageSize" />
+                <forge-pagination-header v-model:per-page="perPage" :total="total" :page-sizes="pageSizes"  @update:per-page="emitPageSize" />
               </span>
             </div>
             <div class="ms-auto">
-              <Button v-if="showClearButton" outlined :class="showExporterButton ? 'me-2' : ''" @click="clearAllFilters" data-cy="clear-all">
+              <Button v-if="showClearButton" outlined :class="showExporterButton ? 'me-2' : ''" data-cy="clear-all" @click="clearAllFilters">
                 <Icon icon="bi:funnel-fill" width="24" height="24" />
                 Clear
               </Button>
-              <Button v-if="showExporterButton" outlined @click="exportData" data-cy="exporter">
+              <Button v-if="showExporterButton" outlined data-cy="exporter" @click="exportData">
                 <Icon icon="typcn:export" width="24" height="24" />
                 Export
               </Button>
@@ -35,13 +36,13 @@
         </div>
       </template>
       <slot />
-      <template #paginatorstart v-if="legacyPaginationFooter">
+      <template v-if="legacyPaginationFooter" #paginatorstart>
         <span class="d-flex" :class="props.loading ? 'opacity-50' : ''" data-cy="legacy-page-size">
           <span class="me-2 my-auto text-nowrap">Page Size:</span>
-          <Select :options="pageSizes" v-model="perPage" class="ms-2" @click="emitPageSize"/>
+          <Select v-model="perPage" :options="pageSizes" class="ms-2" @click="emitPageSize"/>
         </span>
       </template>
-      <template #paginatorend v-if="legacyPaginationFooter" >
+      <template v-if="legacyPaginationFooter" #paginatorend >
         <span data-cy="legacy-total" :class="props.loading ? 'opacity-50' : ''">
         {{ total }} {{ pluralise(total, "result") }} across {{ pageText }}
         </span>
@@ -72,7 +73,7 @@ export interface ForgeTableProps extends DataTableProps {
   showExporterButton?: boolean,
   stickyHeader?: boolean,
   severity?: Severity,
-  clearAll?: Function,
+  clearAll?: () => void,
   emptyMessage?: string
 }
 
diff --git a/packages/ui/src/passthroughs/Tree.pt.ts b/packages/ui/src/passthroughs/Tree.pt.ts
index 1c7414937..2a5d0adc0 100644
--- a/packages/ui/src/passthroughs/Tree.pt.ts
+++ b/packages/ui/src/passthroughs/Tree.pt.ts
@@ -1,5 +1,3 @@
-import { TreeSelectPassThroughOptions } from "primevue/treeselect";
-import { SelectPassThroughMethodOptions } from "primevue/select";
 import { TreePassThroughOptions, TreePassThroughMethodOptions } from "primevue/tree";
 
 export default {

From 37f023e857a7bae7f1d155be2fb9112a17e2fdbb Mon Sep 17 00:00:00 2001
From: Polymeta <40173118+Polymeta@users.noreply.github.com>
Date: Thu, 27 Feb 2025 16:16:12 +0000
Subject: [PATCH 2/2] update and fix lint

---
 packages/ui/src/components/ForgeCheckbox.vue  |  8 ++--
 packages/ui/src/components/ForgeFormField.vue | 47 +++++++++++--------
 packages/ui/src/components/ForgeModal.vue     | 13 ++---
 .../ui/src/components/ForgeSelectButton.vue   |  9 ++--
 .../file-uploader/components/FileInfo.vue     |  8 ++--
 .../components/table/ForgeFilterHeader.vue    | 29 +++++++-----
 .../ui/src/components/table/ForgeTable.vue    |  2 +-
 7 files changed, 66 insertions(+), 50 deletions(-)

diff --git a/packages/ui/src/components/ForgeCheckbox.vue b/packages/ui/src/components/ForgeCheckbox.vue
index a2675e3af..83293f027 100644
--- a/packages/ui/src/components/ForgeCheckbox.vue
+++ b/packages/ui/src/components/ForgeCheckbox.vue
@@ -3,29 +3,29 @@
     <div
       class="d-flex"
       data-cy="checkbox-container"
-      @click="evt => onChange(evt, value)"
       v-bind="{ ...$attrs }"
+      @click="evt => onChange(evt, value)"
     >
       <Checkbox
         v-bind="{ ...props }"
-        binary
         v-model="value"
+        binary
         :input-id="props.name"
         :input-class="{ 'is-invalid': hasErrors }"
         :class="(props.disabled || props.readonly) ? '' : 'cursor-pointer'"
       />
       <label
         :for="props.name"
-        @click="evt => onChange(evt, !value)"
         :class="`${(props.disabled || props.readonly) ? 'opacity-50' : 'cursor-pointer'} ${
           hasErrors ? 'text-danger-dark' : ''
         }`"
         class="w-100 my-auto"
+        @click="evt => onChange(evt, !value)"
       >
         <slot>{{ props.label }}</slot>
       </label>
     </div>
-    <small data-cy="error" class="text-invalid" v-show="hasErrors">{{
+    <small v-show="hasErrors" data-cy="error" class="text-invalid">{{
       errorMessage
     }}</small>
   </div>
diff --git a/packages/ui/src/components/ForgeFormField.vue b/packages/ui/src/components/ForgeFormField.vue
index 1b3970d4d..bac0c1cc5 100644
--- a/packages/ui/src/components/ForgeFormField.vue
+++ b/packages/ui/src/components/ForgeFormField.vue
@@ -1,7 +1,8 @@
 <template>
-  <forge-checkbox :id="props.name" v-if="props.type === 'checkbox'" :label="props.fieldLabel" v-bind="$attrs"
-                  :name="props.name" v-model="model" />
-  <div class="d-flex flex-column w-100" v-else>
+  <forge-checkbox
+v-if="props.type === 'checkbox'" :id="props.name" v-bind="$attrs" v-model="model"
+                  :label="props.fieldLabel" :name="props.name" />
+  <div v-else class="d-flex flex-column w-100">
     <div data-cy="input-wrapper" class="d-flex" :class="props.fieldLabelPosition === 'top' ? 'flex-column' : 'flex-row'">
       <label :for="props.name" :class="props.fieldLabelPosition === 'top' ? 'mb-1' : ('me-2 ' + props.labelWidthClass)">
         {{ props.fieldLabel }} <span v-if="required" class="text-danger fw-600">*</span>
@@ -10,31 +11,39 @@
       <!-- Slot for Custom Inputs -->
       <slot v-bind="{ modelValue: model, updateModel: handleChange, hasErrors  }">
         <!-- Default Inputs (if no input is provided) -->
-        <InputNumber :id="props.name" v-if="props.type === 'number'" v-bind="$attrs"
-                     :placeholder="props.placeholder" :input-class="{'is-invalid': hasErrors }" :class="{'is-invalid': hasErrors }"
-                     @input="change"         v-model="model"
+        <InputNumber
+          v-if="props.type === 'number'" :id="props.name" v-bind="$attrs"
+                     v-model="model" :placeholder="props.placeholder" :input-class="{'is-invalid': hasErrors }"
+                     :class="{'is-invalid': hasErrors }"         @input="change"
         />
-        <Textarea :id="props.name" v-else-if="props.type === 'textarea'" v-bind="$attrs"
-                  :placeholder="props.placeholder" :class="{'is-invalid': hasErrors }"
-                  v-model="model"
+        <Textarea
+          v-else-if="props.type === 'textarea'" :id="props.name" v-bind="$attrs"
+                  v-model="model" :placeholder="props.placeholder"
+                  :class="{'is-invalid': hasErrors }"
                   @input="change" @blur="handleBlur"
         />
-        <InputMask :id="props.name" v-else-if="props.type === 'mask'" v-bind="$attrs"
-                   :placeholder="props.placeholder" :mask="props.mask" :class="{'is-invalid': hasErrors }"
-                   v-model="model" @complete="change" @blur="handleBlur"
+        <InputMask
+          v-else-if="props.type === 'mask'" :id="props.name" v-bind="$attrs"
+                   v-model="model" :placeholder="props.placeholder" :mask="props.mask"
+                   :class="{'is-invalid': hasErrors }" @complete="change" @blur="handleBlur"
         />
-        <InputText :id="props.name" v-else-if="props.type === 'text'" v-bind="$attrs"
-                   :placeholder="props.placeholder" :class="{'is-invalid': hasErrors }"
-                   v-model="model"
+        <InputText
+          v-else-if="props.type === 'text'" :id="props.name" v-bind="$attrs"
+                   v-model="model" :placeholder="props.placeholder"
+                   :class="{'is-invalid': hasErrors }"
                    @input="change" @blur="handleBlur"
         />
-        <Select v-else-if="props.type === 'select'" v-bind="{...props,...$attrs}" v-model="model"
+        <Select
+          v-else-if="props.type === 'select'" v-bind="{...props,...$attrs}" v-model="model"
                 :class="{'is-invalid': hasErrors }" />
-        <MultiSelect v-else-if="props.type === 'multiselect'" v-bind="{...props,...$attrs}" v-model="model"
+        <MultiSelect
+          v-else-if="props.type === 'multiselect'" v-bind="{...props,...$attrs}" v-model="model"
                      :class="{'is-invalid': hasErrors }" />
-        <ForgeMultiSelectPreview v-else-if="props.type === 'multiselect-preview'" v-bind="{...props,...$attrs}" v-model="model"
+        <ForgeMultiSelectPreview
+          v-else-if="props.type === 'multiselect-preview'" v-bind="{...props,...$attrs}" v-model="model"
                                  :class="{'is-invalid': hasErrors }" />
-        <ForgeDatepicker v-else-if="props.type === 'datepicker'" v-bind="{...props,...$attrs}" v-model="model"
+        <ForgeDatepicker
+          v-else-if="props.type === 'datepicker'" v-bind="{...props,...$attrs}" v-model="model"
                          :class="{'is-invalid': hasErrors }" />
       </slot>
 
diff --git a/packages/ui/src/components/ForgeModal.vue b/packages/ui/src/components/ForgeModal.vue
index 4e1951a72..c98dc9fb0 100644
--- a/packages/ui/src/components/ForgeModal.vue
+++ b/packages/ui/src/components/ForgeModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-bind="props" @maximize="maximise" @unmaximize="minimise" :pt="pt">
+  <Dialog v-bind="props" :pt="pt" @maximize="maximise" @unmaximize="minimise">
     <template #closeicon>
       <Icon data-cy="close-icon" icon="bi:x-lg" width="18" height="18" @click="closeModal" />
     </template>
@@ -22,11 +22,12 @@
         <forge-loader data-cy="loader" />
       </slot>
     </template>
-    <template #footer v-if="showFooter">
+    <template v-if="showFooter" #footer>
       <div class="d-flex w-100" data-cy="footer">
-        <Button :label="cancelText" :class="props.cancelClass" outlined @click="closeModal" id="cancel-button" :type="props.cancelButtonType" />
-        <Button :label="submitText" :class="props.submitClass" class="ms-auto" @click="success" id="submit-button"
-                :type="props.submitButtonType" />
+        <Button id="cancel-button" :label="cancelText" :class="props.cancelClass" outlined :type="props.cancelButtonType" @click="closeModal" />
+        <Button
+          id="submit-button" :label="submitText" :class="props.submitClass" class="ms-auto" :type="props.submitButtonType"
+                @click="success" />
       </div>
     </template>
 
@@ -52,7 +53,7 @@ export interface ForgeModalProps extends DialogProps {
   cancelText?: string,
   submitText?: string,
   showFooter?: boolean,
-  onConfirm?: Function | null,
+  onConfirm?: () => Promise<void> | null,
   submitButtonType?: 'button' | 'reset' | 'submit',
   cancelButtonType?: 'button' | 'reset' | 'submit',
   size?: Size | 'xl'
diff --git a/packages/ui/src/components/ForgeSelectButton.vue b/packages/ui/src/components/ForgeSelectButton.vue
index 345a65970..6368e12b2 100644
--- a/packages/ui/src/components/ForgeSelectButton.vue
+++ b/packages/ui/src/components/ForgeSelectButton.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="btn-group" data-cy="forge-select-button">
-    <ForgeToggleButton v-for="(option, index) in options" :key="index"
-                       :onLabel="option.label" :offLabel="option.label" 
+    <ForgeToggleButton
+      v-for="(option, index) in options" :key="index"
+                       :on-label="option.label" :off-label="option.label" 
                        :severity="option.severity"
-                       @change="onOptionSelected(option)" :defaultValue="isSelected(option)" :disabled="option.disabled" :data-cy="`toggle-button-${option.value}`"
-                       :invalid="invalid"
+                       :default-value="isSelected(option)" :disabled="option.disabled" :data-cy="`toggle-button-${option.value}`" :invalid="invalid"
+                       @change="onOptionSelected(option)"
     />
   </div>
 </template>
diff --git a/packages/ui/src/components/file-uploader/components/FileInfo.vue b/packages/ui/src/components/file-uploader/components/FileInfo.vue
index ac6b6f5a7..b0b66fede 100644
--- a/packages/ui/src/components/file-uploader/components/FileInfo.vue
+++ b/packages/ui/src/components/file-uploader/components/FileInfo.vue
@@ -2,14 +2,14 @@
   <div class="py-4 px-3 d-flex" :data-cy="`file-info-${file.name}`">
     <div>
       <Image
-v-if="isImage(file.type)" id="thumbnail-image" image-class="image-file-thumbnail border"
+        v-if="isImage(file.type)" id="thumbnail-image" image-class="image-file-thumbnail border"
         :src="getThumbnailUrl(file)" :alt="file.name" width="75px" preview />
       <Icon v-else id="file-earmark" icon="bi:file-earmark" color="black" width="75px" />
     </div>
     <div class="ms-3 d-flex flex-column">
       <div>
         <ForgeInlineEditor
-v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFileNameRules"
+          v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFileNameRules"
           :name="file.name" :complete-action="updateFileName" />
         <span v-else id="file-name">{{ fileName }}</span>
       </div>
@@ -19,10 +19,10 @@ v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFil
 
     <div class="ms-auto my-auto d-flex">
       <UploadStatus
-:key="uploadStatus" :file-size="file.size" :upload-status="uploadStatus"
+        :key="uploadStatus" :file-size="file.size" :upload-status="uploadStatus"
         :bytes-uploaded="bytesUploaded" :max-file-size="maxFileSize" />
       <Button
-v-if="uploadStatus === 'Not Uploaded' || uploadStatus === 'Failed' || uploadStatus === 'Duplicate' || uploadStatus === 'Aborted'" link
+        v-if="uploadStatus === 'Not Uploaded' || uploadStatus === 'Failed' || uploadStatus === 'Duplicate' || uploadStatus === 'Aborted'" link
         @click="uploadBlob">
         <Icon
           :icon="uploadStatus === 'Not Uploaded' || uploadStatus === 'Duplicate' ? 'bi:upload' : 'bi:arrow-clockwise'" />
diff --git a/packages/ui/src/components/table/ForgeFilterHeader.vue b/packages/ui/src/components/table/ForgeFilterHeader.vue
index b5823268c..568f4d223 100644
--- a/packages/ui/src/components/table/ForgeFilterHeader.vue
+++ b/packages/ui/src/components/table/ForgeFilterHeader.vue
@@ -1,29 +1,34 @@
 <template>
   <div class="d-flex position-relative">
     <InputNumber v-if="dataType === 'numeric'" v-model.trim="modelValue" v-bind="$attrs" />
-    <ForgeDatepicker v-else-if="dataType === 'date'" v-model="modelValue" v-bind="$attrs" :show-icon="false"
+    <ForgeDatepicker
+      v-else-if="dataType === 'date'" v-model="modelValue" v-bind="$attrs" :show-icon="false"
                      :show-on-focus="true" />
-    <Select v-else-if="dataType === 'select'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
+    <Select
+      v-else-if="dataType === 'select'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
               :option-value="optionValue" :option-label="optionLabel"
     >
       <template #value="{ value, placeholder }">
         <div class="d-flex w-100">
           <span :class="{ 'filter-placeholder': value === null }">{{ label(value, placeholder) }}</span>
-          <Button v-if="showClearButton && modelValue !== null"
-                  @click.prevent="clear" size="small"
-                  class="bg-transparent border-0 ms-auto p-0 pe-1">
+          <Button
+            v-if="showClearButton && modelValue !== null"
+                  size="small" class="bg-transparent border-0 ms-auto p-0 pe-1"
+                  @click.prevent="clear">
             <Icon icon="bi:x" width="1rem" height="1rem" class="text-black" />
           </Button>
         </div>
       </template>
     </Select>
-    <MultiSelect v-else-if="dataType === 'multiselect'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
-                 :showToggleAll="false" :option-label="optionLabel" :option-value="optionValue" filter >
+    <MultiSelect
+      v-else-if="dataType === 'multiselect'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
+                 :show-toggle-all="false" :option-label="optionLabel" :option-value="optionValue" filter >
     </MultiSelect>
     <InputText v-else v-model.trim="modelValue" v-bind="$attrs" />
-    <Button v-if="showClearButton && modelValue !== null && dataType !== 'select' && dataType !== 'multiselect' && dataType !== 'date'"
-            @click.prevent="clear" size="small"
-            class="bg-transparent border-0 ms-auto p-0 pe-1 position-absolute end-0 top-0 bottom-0">
+    <Button
+      v-if="showClearButton && modelValue !== null && dataType !== 'select' && dataType !== 'multiselect' && dataType !== 'date'"
+            size="small" class="bg-transparent border-0 ms-auto p-0 pe-1 position-absolute end-0 top-0 bottom-0"
+            @click.prevent="clear">
       <Icon icon="bi:x" width="1rem" height="1rem" class="text-black bg-white" />
     </Button>
   </div>
@@ -42,7 +47,7 @@ export interface ForgeFilterHeaderProps {
   dataType: ForgeColumnDataType,
   dropdownOptions?: any[],
   showClearButton?: boolean
-  clearFilter?: Function,
+  clearFilter?: () => void,
   optionLabel?: string,
   optionValue?: string
 }
@@ -65,7 +70,7 @@ const label = (values: string[] | string | object, placeholder: string): string
 
   const getLabel = (value: any): string => {
     const option = dropdownOptions?.find(opt =>
-        optionValue ? opt[optionValue as string] === value : Object.keys(opt).every(key => value.hasOwnProperty(key) && opt[key] === value[key])
+        optionValue ? opt[optionValue as string] === value : Object.keys(opt).every(key => Object.prototype.hasOwnProperty.call(value, key) && opt[key] === value[key])
     );
     
     return optionLabel ? option[optionLabel] : option;
diff --git a/packages/ui/src/components/table/ForgeTable.vue b/packages/ui/src/components/table/ForgeTable.vue
index 858a9f740..59d725097 100644
--- a/packages/ui/src/components/table/ForgeTable.vue
+++ b/packages/ui/src/components/table/ForgeTable.vue
@@ -2,7 +2,7 @@
   <div class="position-relative">
     <span data-cy="above-table-slot" ><slot name="above-table" /></span>
     <DataTable
-v-bind="{...props, ...$attrs }" ref="forgeTable"
+      v-bind="{...props, ...$attrs }" ref="forgeTable"
                class="w-100" :class="`${props.severity ? `forge-table-${props.severity}` : ''}`"  :pt="pt" :rows="perPage" :total-records="total" :filter-display="props.filters ? 'row' : undefined" data-cy="table"
                show-headers @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage">
       <template v-for="(_, name) in $slots as unknown as DataTableSlots" #[name]="slotProps">