Replace Vue.extend with defineComponent in Rancher Components

Signed-off-by: Phillip Rak <[email protected]>
rancher · Jan 3, 2024 · ab31302 · ab31302
1 parent c73846e
commit ab31302
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 34 deletions.
diff --git a/pkg/rancher-components/src/components/BadgeState/BadgeState.vue b/pkg/rancher-components/src/components/BadgeState/BadgeState.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 interface Badge {
   stateBackground: string;
@@ -11,7 +11,7 @@ interface Badge {
  * <p>Represents a badge whose label and color is either taken from the value property or
  * from the label and color properties. The state property takes precedence.</p>
  */
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * A value having the properties `stateBackground` and `stateDisplay`
@@ -47,7 +47,7 @@ export default Vue.extend({
   },
 
   computed: {
-    bg(): string | null {
+    bg(): string {
       return this.value?.stateBackground || this.color;
     },
 

diff --git a/pkg/rancher-components/src/components/Banner/Banner.vue b/pkg/rancher-components/src/components/Banner/Banner.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { nlToBr } from '@shell/utils/string';
 import { stringify } from '@shell/utils/error';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * A color class that represents the color of the banner.

diff --git a/pkg/rancher-components/src/components/Card/Card.vue b/pkg/rancher-components/src/components/Card/Card.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name:  'Card',
   props: {
     /**
@@ -22,7 +22,7 @@ export default Vue.extend({
      * The function to invoke when the default action button is clicked.
      */
     buttonAction: {
-      type:    Function,
+      type:    Function as PropType<(event: MouseEvent) => void>,
       default: (): void => { }
     },
     /**

diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Checkbox',
 
   props: {
@@ -140,7 +140,7 @@ export default Vue.extend({
     /**
      * Toggles the checked state for the checkbox and emits an 'input' event.
      */
-    clicked(event: MouseEvent): boolean | void {
+    clicked(event: MouseEvent | KeyboardEvent): boolean | void {
       if ((event.target as HTMLLinkElement).tagName === 'A' && (event.target as HTMLLinkElement).href) {
         // Ignore links inside the checkbox label so you can click them
         return true;

diff --git a/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue b/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
+import { randomStr } from '@shell/utils/string';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * The name of the input, for grouping.
@@ -115,12 +116,21 @@ export default Vue.extend({
     /**
      * Emits the input event.
      */
-    clicked({ target }: { target?: HTMLElement }) {
-      if (this.isDisabled || target?.tagName === 'A') {
+    clicked(event: MouseEvent | KeyboardEvent) {
+      const target = event.target;
+
+      if (this.isDisabled || (target instanceof HTMLElement && target.tagName === 'A')) {
         return;
       }
 
       this.$emit('input', this.val);
+    },
+
+    /**
+     * Generates a random string for the input id
+     */
+    randomString() {
+      return `${ randomStr() }-radio`;
     }
   }
 });
@@ -134,7 +144,7 @@ export default Vue.extend({
     @click.stop="clicked($event)"
   >
     <input
-      :id="_uid+'-radio'"
+      :id="randomString"
       :disabled="isDisabled"
       :name="name"
       :value="''+val"

diff --git a/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue b/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue
@@ -1,14 +1,15 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 
 interface Option {
   value: unknown,
-  label: string
+  label: string,
+  description?: string,
 }
 
-export default Vue.extend({
+export default defineComponent({
   components: { RadioButton },
   props:      {
     /**

diff --git a/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue b/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
@@ -10,7 +10,7 @@ declare module 'vue/types/vue' {
   }
 }
 
-export default Vue.extend({
+export default defineComponent({
   inheritAttrs: false,
 
   props: {
@@ -115,7 +115,9 @@ export default Vue.extend({
     /**
      * Emits the input event and resizes the Text Area.
     */
-    onInput(val: string): void {
+    onInput(event: Event): void {
+      const val = (event?.target as HTMLInputElement)?.value;
+
       this.$emit('input', val);
       this.queueResize();
     },
@@ -163,7 +165,7 @@ export default Vue.extend({
     v-bind="$attrs"
     :spellcheck="spellcheck"
     @paste="$emit('paste', $event)"
-    @input="onInput($event.target.value)"
+    @input="onInput($event)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
   />

diff --git a/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue b/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
   props: {
     value: {
       type:    [Boolean, String, Number],
@@ -28,7 +28,7 @@ export default Vue.extend({
     },
   },
   data() {
-    return { state: false as boolean | string | number };
+    return { state: false as boolean | 'true' | 'false' | undefined };
   },
 
   watch: {
@@ -41,7 +41,7 @@ export default Vue.extend({
   },
 
   methods: {
-    toggle(neu: boolean | string | number) {
+    toggle(neu: boolean | 'true' | 'false' | undefined | null) {
       this.state = neu === null ? !this.state : neu;
       this.$emit('input', this.state ? this.onValue : this.offValue);
     }

diff --git a/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue b/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * The Labeled Tooltip value.
@@ -29,9 +29,14 @@ export default Vue.extend({
     }
   },
   computed: {
-    iconClass() {
+    iconClass(): string {
       return this.status === 'error' ? 'icon-warning' : 'icon-info';
     }
+  },
+  methods: {
+    isObject(value: string | Record<string, unknown>): value is Record<string, unknown> {
+      return typeof value === 'object' && value !== null && !!value.content;
+    }
   }
 });
 </script>
@@ -44,7 +49,7 @@ export default Vue.extend({
   >
     <template v-if="hover">
       <i
-        v-clean-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="isObject(value) ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
       />

diff --git a/pkg/rancher-components/src/components/StringList/StringList.vue b/pkg/rancher-components/src/components/StringList/StringList.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import Vue, { PropType, defineComponent } from 'vue';
 
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { findStringIndex, hasDuplicatedStrings } from '@shell/utils/array';
@@ -29,7 +29,7 @@ const CLASS = {
 /**
  * Manage a list of strings
  */
-export default Vue.extend({
+export default defineComponent({
 
   name:       'StringList',
   components: { LabeledInput },
@@ -502,7 +502,7 @@ export default Vue.extend({
         <button
           data-testid="button-add"
           class="btn btn-sm role-tertiary add-button"
-          :disabled="isCreateItem || editedItem"
+          :disabled="!!isCreateItem || !!editedItem"
           @click.prevent="onClickPlusButton"
         >
           <span class="icon icon-plus icon-sm" />