Resolve typescript warnings for Rancher Components

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
rancher · Sep 19, 2024 · 44911da · 44911da
1 parent c29f3ae
commit 44911da
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 20 deletions.
diff --git 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, PropType } 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 },
 
@@ -28,7 +31,7 @@ export default defineComponent({
      * @values text, cron, multiline, multiline-password
      */
     type: {
-      type:    String,
+      type:    String as PropType<'multiline' | 'multiline-password' | string>,
       default: 'text'
     },
 
@@ -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
@@ -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
@@ -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
@@ -1,5 +1,4 @@
 <script lang="ts">
-// @ts-nocheck
 import { PropType, defineComponent } from 'vue';
 
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';