Resolve typescript warnings for Rancher Components

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' }"

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';

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;
     }
   },

pkg/rancher-components/src/components/StringList/StringList.vue

@@ -1,9 +1,7 @@
 <script lang="ts">
-// @ts-nocheck
 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>;
@@ -31,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
@@ -78,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.
@@ -416,7 +408,6 @@ export default defineComponent({
       this.$emit('change', items);
     },
   },
-
 });
 </script>
 

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.