@rancher/shell 0.5.0 → 0.5.2

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -1,27 +1,21 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue, { VueConstructor } from 'vue';
+import CompactInput from '@shell/mixins/compact-input';
+import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml } from '@shell/utils/string';
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 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);
-  }
-}
-
-export default defineComponent({
+export default (
+  Vue as VueConstructor<Vue & InstanceType<typeof LabeledFormElement> & InstanceType<typeof CompactInput>>
+).extend({
   components: { LabeledTooltip, TextAreaAutoGrow },
-
-  inheritAttrs: false,
+  mixins:     [LabeledFormElement, CompactInput],
 
   props: {
-    ...labeledFormElementProps,
     /**
      * The type of the Labeled Input.
      * @values text, cron, multiline, multiline-password
@@ -99,36 +93,21 @@ export default defineComponent({
     },
   },
 
-  setup(props, { emit }) {
-    const {
-      focused,
-      onFocusLabeled,
-      onBlurLabeled,
-      isDisabled,
-      validationMessage,
-      requiredField
-    } = useLabeledFormElement(props, emit);
-    const { isCompact } = useCompactInput(props);
-
-    return {
-      focused,
-      onFocusLabeled,
-      onBlurLabeled,
-      isDisabled,
-      validationMessage,
-      requiredField,
-      isCompact,
-    };
-  },
-
   data() {
     return {
       updated:          false,
-      validationErrors: '',
+      validationErrors: ''
     };
   },
 
   computed: {
+    /**
+     * Determines if the Labeled Input @input event should be debounced.
+     */
+    onInput(): ((value: string) => void) | void {
+      return this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
+    },
+
     /**
      * Determines if the Labeled Input should display a label.
      */
@@ -143,7 +122,7 @@ export default defineComponent({
       return !!this.tooltip || !!this.tooltipKey;
     },
 
-    tooltipValue(): string | Record<string, unknown> | undefined {
+    tooltipValue(): string | undefined {
       if (this.hasTooltip) {
         return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip;
       }
@@ -165,7 +144,7 @@ export default defineComponent({
       if (this.type !== 'cron' || !this.value) {
         return;
       }
-      if (typeof this.value === 'string' && !isValidCron(this.value)) {
+      if (!isValidCron(this.value)) {
         return this.t('generic.invalidCron');
       }
       try {
@@ -194,22 +173,15 @@ export default defineComponent({
     /**
      * The max length for the Labeled Input.
      */
-    _maxlength(): number | undefined {
+    _maxlength(): number | null {
       if (this.type === 'text' && this.maxlength) {
         return this.maxlength;
       }
 
-      return undefined;
+      return null;
     },
   },
 
-  created() {
-    /**
-     * Determines if the Labeled Input @input event should be debounced.
-    */
-    this.onInput = this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
-  },
-
   methods: {
     /**
      * Attempts to give the Labeled Input focus.
@@ -248,9 +220,7 @@ export default defineComponent({
      * NOTE: In multiline, TextAreaAutoGrow emits a string with the value
      * https://github.com/rancher/dashboard/issues/10249
      */
-    delayInput(val: string | Event): void {
-      const value = typeof val === 'string' ? val : (val?.target as HTMLInputElement)?.value;
-
+    delayInput(value: string): void {
       this.$emit('input', value);
     },
 
@@ -267,7 +237,7 @@ export default defineComponent({
      * event.
      * @see labeled-form-element.ts mixin for onBlurLabeled()
      */
-    onBlur(event: string | FocusEvent): void {
+    onBlur(event: string): void {
       this.$emit('blur', event);
       this.onBlurLabeled();
     },
@@ -319,7 +289,7 @@ export default defineComponent({
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
-        @input="onInput"
+        @input="onInput($event)"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -336,7 +306,7 @@ export default defineComponent({
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
-        @input="onInput"
+        @input="onInput($event.target.value)"
         @focus="onFocus"
         @blur="onBlur"
         @change="onChange"

package/rancher-components/Form/Radio/RadioButton.vue

@@ -1,9 +1,8 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 import { _VIEW } from '@shell/config/query-params';
-import { randomStr } from '@shell/utils/string';
 
-export default defineComponent({
+export default Vue.extend({
   props: {
     /**
      * The name of the input, for grouping.
@@ -72,10 +71,7 @@ export default defineComponent({
   },
 
   data() {
-    return {
-      isChecked:    this.value === this.val,
-      randomString: `${ randomStr() }-radio`,
-    };
+    return { isChecked: this.value === this.val };
   },
 
   computed: {
@@ -119,15 +115,13 @@ export default defineComponent({
     /**
      * Emits the input event.
      */
-    clicked(event: MouseEvent | KeyboardEvent) {
-      const target = event.target;
-
-      if (this.isDisabled || (target instanceof HTMLElement && target.tagName === 'A')) {
+    clicked({ target }: { target?: HTMLElement }) {
+      if (this.isDisabled || target?.tagName === 'A') {
         return;
       }
 
       this.$emit('input', this.val);
-    },
+    }
   }
 });
 </script>
@@ -140,7 +134,7 @@ export default defineComponent({
     @click.stop="clicked($event)"
   >
     <input
-      :id="randomString"
+      :id="_uid+'-radio'"
       :disabled="isDisabled"
       :name="name"
       :value="''+val"

package/rancher-components/Form/Radio/RadioGroup.vue

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

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue 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 defineComponent({
+export default Vue.extend({
   inheritAttrs: false,
 
   props: {
@@ -115,9 +115,7 @@ export default defineComponent({
     /**
      * Emits the input event and resizes the Text Area.
     */
-    onInput(event: Event): void {
-      const val = (event?.target as HTMLInputElement)?.value;
-
+    onInput(val: string): void {
       this.$emit('input', val);
       this.queueResize();
     },
@@ -165,7 +163,7 @@ export default defineComponent({
     v-bind="$attrs"
     :spellcheck="spellcheck"
     @paste="$emit('paste', $event)"
-    @input="onInput($event)"
+    @input="onInput($event.target.value)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
   />

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

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

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 
-export default defineComponent({
+export default Vue.extend({
   props: {
     /**
      * The Labeled Tooltip value.
@@ -29,14 +29,9 @@ export default defineComponent({
     }
   },
   computed: {
-    iconClass(): string {
+    iconClass() {
       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>
@@ -49,7 +44,7 @@ export default defineComponent({
   >
     <template v-if="hover">
       <i
-        v-clean-tooltip="isObject(value) ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
       />

package/rancher-components/StringList/StringList.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType, defineComponent } from 'vue';
+import Vue, { PropType } 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 defineComponent({
+export default Vue.extend({
 
   name:       'StringList',
   components: { LabeledInput },
@@ -92,9 +92,9 @@ export default defineComponent({
   },
   data() {
     return {
-      value:        undefined as string | undefined,
+      value:        null as string | null,
       selected:     null as string | null,
-      editedItem:   undefined as string | undefined,
+      editedItem:   null as string | null,
       isCreateItem: false,
       errors:       { duplicate: false } as Record<Error, boolean>
     };
@@ -281,7 +281,7 @@ export default defineComponent({
         this.isCreateItem = true;
         this.setFocus(INPUT.create);
       } else {
-        this.value = undefined;
+        this.value = null;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
@@ -303,11 +303,11 @@ export default defineComponent({
         this.editedItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
-        this.value = undefined;
+        this.value = null;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.editedItem = undefined;
+        this.editedItem = null;
       }
     },
 
@@ -502,7 +502,7 @@ export default defineComponent({
         <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" />

package/rancher-components/components/Accordion/Accordion.vue

@@ -1,8 +1,7 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 import { mapGetters } from 'vuex';
-
-export default defineComponent({
+export default Vue.extend({
   props: {
     title: {
       type:    String,

package/rancher-components/components/BadgeState/BadgeState.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import Vue, { PropType } 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 defineComponent({
+export default Vue.extend({
   props: {
     /**
      * A value having the properties `stateBackground` and `stateDisplay`
@@ -59,7 +59,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <span :class="['badge-state', bg]">
+  <span :class="{'badge-state': true, [bg]: true}">
     <i
       v-if="icon"
       class="icon"

package/rancher-components/components/Banner/Banner.vue

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

package/rancher-components/components/Card/Card.vue

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

package/rancher-components/components/Form/Checkbox/Checkbox.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import Vue, { PropType } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
 
-export default defineComponent({
+export default Vue.extend({
   name: 'Checkbox',
 
   props: {
@@ -140,7 +140,7 @@ export default defineComponent({
     /**
      * Toggles the checked state for the checkbox and emits an 'input' event.
      */
-    clicked(event: MouseEvent | KeyboardEvent): boolean | void {
+    clicked(event: MouseEvent): 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;

package/rancher-components/components/Form/LabeledInput/LabeledInput.test.ts

@@ -5,7 +5,7 @@ describe('component: LabeledInput', () => {
   it('should emit input only once', () => {
     const value = '2';
     const delay = 1;
-    const wrapper = mount(LabeledInput, {
+    const wrapper = mount(LabeledInput as any, {
       propsData: { delay },
       mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
     });

package/rancher-components/components/Form/LabeledInput/LabeledInput.vue

@@ -1,27 +1,21 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue, { VueConstructor } from 'vue';
+import CompactInput from '@shell/mixins/compact-input';
+import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml } from '@shell/utils/string';
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 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);
-  }
-}
-
-export default defineComponent({
+export default (
+  Vue as VueConstructor<Vue & InstanceType<typeof LabeledFormElement> & InstanceType<typeof CompactInput>>
+).extend({
   components: { LabeledTooltip, TextAreaAutoGrow },
-
-  inheritAttrs: false,
+  mixins:     [LabeledFormElement, CompactInput],
 
   props: {
-    ...labeledFormElementProps,
     /**
      * The type of the Labeled Input.
      * @values text, cron, multiline, multiline-password
@@ -99,36 +93,21 @@ export default defineComponent({
     },
   },
 
-  setup(props, { emit }) {
-    const {
-      focused,
-      onFocusLabeled,
-      onBlurLabeled,
-      isDisabled,
-      validationMessage,
-      requiredField
-    } = useLabeledFormElement(props, emit);
-    const { isCompact } = useCompactInput(props);
-
-    return {
-      focused,
-      onFocusLabeled,
-      onBlurLabeled,
-      isDisabled,
-      validationMessage,
-      requiredField,
-      isCompact,
-    };
-  },
-
   data() {
     return {
       updated:          false,
-      validationErrors: '',
+      validationErrors: ''
     };
   },
 
   computed: {
+    /**
+     * Determines if the Labeled Input @input event should be debounced.
+     */
+    onInput(): ((value: string) => void) | void {
+      return this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
+    },
+
     /**
      * Determines if the Labeled Input should display a label.
      */
@@ -143,7 +122,7 @@ export default defineComponent({
       return !!this.tooltip || !!this.tooltipKey;
     },
 
-    tooltipValue(): string | Record<string, unknown> | undefined {
+    tooltipValue(): string | undefined {
       if (this.hasTooltip) {
         return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip;
       }
@@ -165,7 +144,7 @@ export default defineComponent({
       if (this.type !== 'cron' || !this.value) {
         return;
       }
-      if (typeof this.value === 'string' && !isValidCron(this.value)) {
+      if (!isValidCron(this.value)) {
         return this.t('generic.invalidCron');
       }
       try {
@@ -194,22 +173,15 @@ export default defineComponent({
     /**
      * The max length for the Labeled Input.
      */
-    _maxlength(): number | undefined {
+    _maxlength(): number | null {
       if (this.type === 'text' && this.maxlength) {
         return this.maxlength;
       }
 
-      return undefined;
+      return null;
     },
   },
 
-  created() {
-    /**
-     * Determines if the Labeled Input @input event should be debounced.
-    */
-    this.onInput = this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
-  },
-
   methods: {
     /**
      * Attempts to give the Labeled Input focus.
@@ -248,9 +220,7 @@ export default defineComponent({
      * NOTE: In multiline, TextAreaAutoGrow emits a string with the value
      * https://github.com/rancher/dashboard/issues/10249
      */
-    delayInput(val: string | Event): void {
-      const value = typeof val === 'string' ? val : (val?.target as HTMLInputElement)?.value;
-
+    delayInput(value: string): void {
       this.$emit('input', value);
     },
 
@@ -267,7 +237,7 @@ export default defineComponent({
      * event.
      * @see labeled-form-element.ts mixin for onBlurLabeled()
      */
-    onBlur(event: string | FocusEvent): void {
+    onBlur(event: string): void {
       this.$emit('blur', event);
       this.onBlurLabeled();
     },
@@ -319,7 +289,7 @@ export default defineComponent({
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
-        @input="onInput"
+        @input="onInput($event)"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -336,7 +306,7 @@ export default defineComponent({
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
-        @input="onInput"
+        @input="onInput($event.target.value)"
         @focus="onFocus"
         @blur="onBlur"
         @change="onChange"