From c29f3aed2d4e1266ac410ea21a5aad5f4eb23b1f Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Thu, 19 Sep 2024 15:08:36 -0700
Subject: [PATCH 1/3] Update Vue shim for Vue3

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 pkg/rancher-components/src/shim-vue.d.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/pkg/rancher-components/src/shim-vue.d.ts b/pkg/rancher-components/src/shim-vue.d.ts
index 7c30dd2f277..713a24274e0 100644
--- a/pkg/rancher-components/src/shim-vue.d.ts
+++ b/pkg/rancher-components/src/shim-vue.d.ts
@@ -1,14 +1,12 @@
-import Vue from 'vue';
-declare module '*.vue' {
+import { DefineComponent } from 'vue'
 
-  export default Vue;
+declare module '*.vue' {
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }
 
-// This is required to keep typescript from complaining. It is required for
-// our i18n plugin. For more info see:
-// https://v2.vuejs.org/v2/guide/typescript.html?redirect=true#Augmenting-Types-for-Use-with-Plugins
-declare module 'vue/types/vue' {
-  interface Vue {
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
     /**
      * Lookup a given string with the given arguments
      * @param raw if set, do not do HTML escaping.

From 39928dd9046063844676ee583415ac5ef1e7f345 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Thu, 19 Sep 2024 15:18:50 -0700
Subject: [PATCH 2/3] Resolve typescript warnings for Rancher Components

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 .../Form/LabeledInput/LabeledInput.vue        | 22 ++++++++++------
 .../src/components/Form/Radio/RadioButton.vue |  1 -
 .../Form/TextArea/TextAreaAutoGrow.vue        | 26 ++++++++++++-------
 .../src/components/StringList/StringList.vue  |  1 -
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
index 4ee769b0078..4856b7ba56d 100644
--- a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
+++ b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
-// @ts-nocheck
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml } from '@shell/utils/string';
@@ -10,12 +9,16 @@ import { debounce } from 'lodash';
 import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
 import { useCompactInput } from '@shell/composables/useCompactInput';
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    onInput: (event: Event) => void | ((event: Event) => void);
-  }
+interface NonReactiveProps {
+  onInput: (event: Event) => void | ((event: Event) => void);
 }
 
+const provideProps: NonReactiveProps = {
+  onInput() {
+    // noop
+  },
+};
+
 export default defineComponent({
   components: { LabeledTooltip, TextAreaAutoGrow },
 
@@ -116,10 +119,13 @@ export default defineComponent({
     } = useLabeledFormElement(props, emit);
     const { isCompact } = useCompactInput(props);
 
+    const onInput = inject('onInput', provideProps.onInput);
+
     return {
       focused,
       onFocusLabeled,
       onBlurLabeled,
+      onInput,
       isDisabled,
       validationMessage,
       requiredField,
@@ -175,7 +181,7 @@ export default defineComponent({
         return this.t('generic.invalidCron');
       }
       try {
-        const hint = cronstrue.toString(this.value);
+        const hint = cronstrue.toString(this.value.toString());
 
         return hint;
       } catch (e) {
@@ -326,7 +332,7 @@ export default defineComponent({
         v-bind="$attrs"
         :maxlength="_maxlength"
         :disabled="isDisabled"
-        :value="value"
+        :value="value.toString()"
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
diff --git a/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue b/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue
index 088e204af1f..fcae3a90e26 100644
--- a/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue
+++ b/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-// @ts-nocheck
 import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import { randomStr } from '@shell/utils/string';
diff --git a/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue b/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue
index f2e70996503..5a9a7de80a7 100644
--- a/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue
+++ b/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue
@@ -1,16 +1,18 @@
 <script lang="ts">
-// @ts-nocheck
-import { defineComponent } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
-declare module 'vue/types/vue' {
-  /* eslint-disable no-unused-vars */
-  interface Vue {
-    queueResize(): void;
-  }
+interface NonReactiveProps {
+  queueResize(): void;
 }
 
+const provideProps: NonReactiveProps = {
+  queueResize() {
+    // noop
+  }
+};
+
 export default defineComponent({
   inheritAttrs: false,
 
@@ -21,7 +23,7 @@ export default defineComponent({
     },
 
     class: {
-      type:    String,
+      type:    [String, Array, Object] as PropType<string | unknown[] | Record<string, boolean>>,
       default: ''
     },
 
@@ -78,6 +80,12 @@ export default defineComponent({
     }
   },
 
+  setup() {
+    const queueResize = inject('queueResize', provideProps.queueResize);
+
+    return { queueResize };
+  },
+
   data() {
     return {
       curHeight: this.minHeight,
@@ -101,7 +109,7 @@ export default defineComponent({
       return `height: ${ this.curHeight }px; overflow: ${ this.overflow };`;
     },
 
-    className(): string {
+    className(): string | unknown[] | Record<string, boolean> {
       return this.class;
     }
   },
diff --git a/pkg/rancher-components/src/components/StringList/StringList.vue b/pkg/rancher-components/src/components/StringList/StringList.vue
index c5cb0b8f05e..c2e5219697d 100644
--- a/pkg/rancher-components/src/components/StringList/StringList.vue
+++ b/pkg/rancher-components/src/components/StringList/StringList.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-// @ts-nocheck
 import { PropType, defineComponent } from 'vue';
 
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';

From 532c185476aeb4b265f68bd27f6c23f975748aa1 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Fri, 20 Sep 2024 15:13:46 -0700
Subject: [PATCH 3/3] Resolve typepscript errors in `StringList.vue`

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 .../src/components/StringList/StringList.vue  | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/pkg/rancher-components/src/components/StringList/StringList.vue b/pkg/rancher-components/src/components/StringList/StringList.vue
index c2e5219697d..ce6d9d000c6 100644
--- a/pkg/rancher-components/src/components/StringList/StringList.vue
+++ b/pkg/rancher-components/src/components/StringList/StringList.vue
@@ -1,8 +1,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-
-import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { findStringIndex, hasDuplicatedStrings } from '@shell/utils/array';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 type Error = 'duplicate';
 type ErrorMessages = Record<Error, string>;
@@ -30,19 +29,15 @@ const CLASS = {
  * Manage a list of strings
  */
 export default defineComponent({
-
   name:       'StringList',
   components: { LabeledInput },
-
-  props: {
+  props:      {
     /**
      * The items source
      */
     items: {
-      type: Array as PropType<string[]>,
-      default() {
-        return [];
-      },
+      type:    Array as PropType<string[]>,
+      default: () => [],
     },
     /**
      * Determines if items with same text will be treated differently, depending on the letters case
@@ -77,10 +72,8 @@ export default defineComponent({
      * Custom Error messages
      */
     errorMessages: {
-      type: Object as PropType<ErrorMessages>,
-      default() {
-        return {} as ErrorMessages;
-      },
+      type:    Object as PropType<ErrorMessages>,
+      default: () => ({} as ErrorMessages),
     },
     /**
      * Enables bulk addition and defines the delimiter to split the input string.
@@ -415,7 +408,6 @@ export default defineComponent({
       this.$emit('change', items);
     },
   },
-
 });
 </script>