re-introduce linting to ui package and run linter

packages/ui/eslint.config.mjs

@@ -0,0 +1,13 @@
+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",
+      "no-prototype-builtins": "warn"
+    }
+  }
+];

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",

packages/ui/src/components/ForgeActionButton.vue

@@ -11,8 +11,8 @@
 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>
 }

packages/ui/src/components/ForgeAlert.vue

@@ -2,10 +2,10 @@
   <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/>
+    <slot />
     <template #closeicon>
       <Icon icon="bi:x" />
     </template>
@@ -17,7 +17,7 @@ import { Icon } from '@iconify/vue'
 import { MessageProps } from "primevue/message";
 
 const props = withDefaults(
-    defineProps<MessageProps>(), 
+    defineProps<MessageProps>(),
     {
       life: undefined,
       closable: false,

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>
 

packages/ui/src/components/ForgeCheckbox.vue

@@ -1,33 +1,33 @@
 <template>
   <div class="d-flex flex-column">
     <div
-      class="d-flex"
-      data-cy="checkbox-container"
-      @click="evt => onChange(evt, value)"
-      v-bind="{ ...$attrs }"
+        class="d-flex"
+        data-cy="checkbox-container"
+        v-bind="{ ...$attrs }"
+        @click="evt => onChange(evt, value)"
     >
       <Checkbox
-        v-bind="{ ...props }"
-        binary
-        v-model="value"
-        :input-id="props.name"
-        :input-class="{ 'is-invalid': hasErrors }"
-        :class="(props.disabled || props.readonly) ? '' : 'cursor-pointer'"
+          v-bind="{ ...props }"
+          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'} ${
+          :for="props.name"
+          :class="`${(props.disabled || props.readonly) ? 'opacity-50' : 'cursor-pointer'} ${
           hasErrors ? 'text-danger-dark' : ''
         }`"
-        class="w-100 my-auto"
+          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">{{
-      errorMessage
-    }}</small>
+    <small v-show="hasErrors" data-cy="error" class="text-invalid">{{
+        errorMessage
+      }}</small>
   </div>
 </template>
 
@@ -50,19 +50,19 @@ const props = withDefaults(defineProps<ForgeCheckProps>(), {
 const value = defineModel<boolean>({ required: true });
 
 const { handleChange, errors, errorMessage } = useField(
-  () => props.name ?? "",
-  undefined,
-  {
-    type: "checkbox",
-    checkedValue: value.value,
-  }
+    () => props.name ?? "",
+    undefined,
+    {
+      type: "checkbox",
+      checkedValue: value.value,
+    }
 );
 
 const onChange = (event: MouseEvent, checkValue: boolean) => {
-  if(props.disabled || props.readonly) {
+  if (props.disabled || props.readonly) {
     event.preventDefault();
   }
-  if(props.name) handleChange(checkValue)
+  if (props.name) handleChange(checkValue)
   else value.value = checkValue
 }
 

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>
 
@@ -10,7 +12,7 @@ import { Severity } from "../types/forge-types";
 import { computed } from "vue";
 
 export interface ForgeChipProps
-  extends /* vue-ignore */ Omit<ChipProps, "aria-label" | "aria-labelledby"> {
+    extends /* vue-ignore */ Omit<ChipProps, "aria-label" | "aria-labelledby"> {
   chipSeverity?: Severity;
   pill?: boolean;
 }
@@ -28,16 +30,16 @@ const chipPt = computed(() => ({
     },
     {
       "bg-primary-subtle border-primary text-primary":
-        props.chipSeverity === undefined || props.chipSeverity === "primary",
+          props.chipSeverity === undefined || props.chipSeverity === "primary",
       "bg-brand-subtle border-brand text-brand": props.chipSeverity === "brand",
       "bg-secondary-subtle border-secondary text-secondary":
-        props.chipSeverity === "secondary",
+          props.chipSeverity === "secondary",
       "bg-success-subtle border-success text-success":
-        props.chipSeverity === "success",
+          props.chipSeverity === "success",
       "bg-warning-subtle border-warning text-warning":
-        props.chipSeverity === "warning",
+          props.chipSeverity === "warning",
       "bg-danger-subtle border-danger text-danger":
-        props.chipSeverity === "danger",
+          props.chipSeverity === "danger",
       "bg-info-subtle border-info text-info": props.chipSeverity === "info",
       "bg-info-success-alternate border-success-alternate text-success-alternate": props.chipSeverity === "success-alternate"
     },

packages/ui/src/components/ForgeConfirmPopup.vue

@@ -1,6 +1,8 @@
 <template>
   <ConfirmPopup :pt="pt" v-bind="{ ...$attrs, ...$props }">
-    <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
   </ConfirmPopup>
 </template>
 
@@ -16,7 +18,7 @@ const pt = computed<ConfirmPopupPassThroughOptions>(() => ({
     class: ["modal-footer gap-1 p-2"],
   }),
   content: 'pt-2 px-2',
-  pcRejectButton: {root: 'btn btn-outline-primary btn-sm'},
-  pcAcceptButton: {root: 'btn btn-primary btn-sm'}
+  pcRejectButton: { root: 'btn btn-outline-primary btn-sm' },
+  pcAcceptButton: { root: 'btn btn-primary btn-sm' }
 }))
 </script>

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"
-            class="position-absolute end-0 top-50 bottom-50 my-auto me-2 bg-white" 
-            :class="`${ hasErrors ? 'text-danger-dark' : 'text-muted'}`"
+      <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">
@@ -68,9 +71,9 @@ const clear = () => {
 const hasErrors = computed(() => errors.value.length > 0)
 
 const pt = computed(() => ({
-  dayCell: ({context} : DatePickerPassThroughMethodOptions) => ({
+  dayCell: ({ context }: DatePickerPassThroughMethodOptions) => ({
     class: [
-      `text-center date-${ props.severity === undefined ? 'primary' : props.severity }`,
+      `text-center date-${props.severity === undefined ? 'primary' : props.severity}`,
       {
         'cursor-pointer': !context.disabled,
         'pe-none': context.disabled,
@@ -90,8 +93,8 @@ const pt = computed(() => ({
       }
     ]
   }),
- 
-  dayLabel: ({ context } : DatePickerPassThroughMethodOptions) => ({
+
+  dayLabel: ({ context }: DatePickerPassThroughMethodOptions) => ({
     class: [
       // Disabled States
       {

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,

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,36 +11,44 @@
       <!-- 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"
-                  @input="change" @blur="handleBlur"
+        <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"
-                   @input="change" @blur="handleBlur"
+        <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"
-                :class="{'is-invalid': hasErrors }" />
-        <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"
-                                 :class="{'is-invalid': hasErrors }" />
-        <ForgeDatepicker v-else-if="props.type === 'datepicker'" v-bind="{...props,...$attrs}" v-model="model"
-                         :class="{'is-invalid': hasErrors }" />
+        <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"
+            :class="{'is-invalid': hasErrors }" />
+        <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"
+            :class="{'is-invalid': hasErrors }" />
       </slot>
 
     </div>
-    
+
     <!-- Validation Error Message -->
     <small v-show="hasErrors && props.type !== 'multiselect' && props.type !== 'datepicker'" data-cy="error" class="invalid-feedback">{{ errorMessage }}</small>
   </div>