@rancher/shell 0.5.0 → 0.5.1

package/rancher-components/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/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/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/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/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/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/tsconfig.paths.json

@@ -12,10 +12,7 @@
       ],
       "@pkg/*": [
         "../shell/pkg/*"
-      ],
-      "@components/*": [
-        "../pkg/rancher-components/src/components/*"
       ]
     },
   },
-}
+}

package/types/shell/index.d.ts

@@ -2134,97 +2134,35 @@ export default _default;
 // @shell/mixins/create-edit-view
 
 declare module '@shell/mixins/create-edit-view' {
-declare var _default: import("vue").DefineComponent<{
-    mode: {
-        type: StringConstructor;
-        default: any;
-    };
-    realMode: {
-        type: StringConstructor;
-        default: any;
-    };
-    as: {
-        type: StringConstructor;
-        default: any;
-    };
-    value: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    initialValue: {
-        type: ObjectConstructor;
-        default: any;
-    };
-    liveValue: {
-        type: ObjectConstructor;
-        default: any;
-    };
-    doneEvent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {}, {
+declare var _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>, {
     errors: any[];
-}, {
-    isCreate(): boolean;
-    isEdit(): boolean;
-    isView(): boolean;
-    schema(): any;
-    isNamespaced(): any;
-    labels: {
-        get(): any;
-        set(neu: any): void;
-    };
-    annotations: {
-        get(): any;
-        set(neu: any): void;
-    };
-    doneRoute(): any;
-    doneParams(): any;
 }, {
     done(): any;
     conflict(): Promise<any>;
     save(buttonDone: any, url: any, depth?: number): any;
     actuallySave(url: any): Promise<void>;
     setErrors(errors: any): void;
-}, any, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    mode: {
-        type: StringConstructor;
-        default: any;
-    };
-    realMode: {
-        type: StringConstructor;
-        default: any;
-    };
-    as: {
-        type: StringConstructor;
-        default: any;
-    };
-    value: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    initialValue: {
-        type: ObjectConstructor;
-        default: any;
-    };
-    liveValue: {
-        type: ObjectConstructor;
-        default: any;
-    };
-    doneEvent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
-    as: string;
-    mode: string;
+}, {
+    isCreate: boolean;
+    isEdit: boolean;
+    isView: boolean;
+    schema: any;
+    isNamespaced: any;
+    labels: any;
+    annotations: any;
+    doneRoute: any;
+    doneParams: any;
+}, {
+    mode: any;
+    realMode: any;
+    as: any;
+    value: any;
+    initialValue: any;
+    liveValue: any;
     doneEvent: boolean;
-    initialValue: Record<string, any>;
-    liveValue: Record<string, any>;
-    realMode: string;
-}>;
+}, {}, any, import("vue/types/v3-component-options").ComponentOptionsMixin>;
 export default _default;
+import Vue from "vue";
 }
 
 // @shell/models/namespace

package/utils/git.ts

@@ -9,7 +9,7 @@ interface Repo {
   name: string,
 }
 
-export interface Commit {
+interface Commit {
   message: string,
   htmlUrl: string,
   sha?: string,

package/composables/useCompactInput.test.ts

@@ -1,36 +0,0 @@
-import { ref } from 'vue';
-import { useCompactInput } from './useCompactInput';
-
-describe('useCompactInput', () => {
-  it('should compute isCompact correctly when compact is explicitly set', () => {
-    const props = ref({
-      compact:  true,
-      label:    'Test Label',
-      labelKey: 'testLabel',
-    });
-
-    const { isCompact } = useCompactInput(props.value);
-
-    expect(isCompact.value).toBe(true);
-
-    // When compact is explicitly set to false, isCompact should be false
-    props.value.compact = false;
-    expect(isCompact.value).toBe(false);
-  });
-
-  it('should compute isCompact correctly when compact is not explicitly set', () => {
-    const props = ref({
-      label:    '',
-      labelKey: '',
-    });
-
-    const { isCompact } = useCompactInput(props.value);
-
-    // When there is no label and labelKey is also not present, isCompact should be true
-    expect(isCompact.value).toBe(true);
-
-    // When label is present, isCompact should be false
-    props.value.label = 'Updated Label';
-    expect(isCompact.value).toBe(false);
-  });
-});

package/composables/useLabeledFormElement.test.ts

@@ -1,135 +0,0 @@
-import { ref } from 'vue';
-import { useLabeledFormElement } from './useLabeledFormElement';
-
-describe('useLabeledFormElement', () => {
-  it('should set raised to true when focused', () => {
-    const props = {
-      mode:     'edit',
-      value:    '',
-      required: true,
-      disabled: false,
-      rules:    [],
-    };
-
-    const emit = jest.fn();
-    const { onFocusLabeled, onBlurLabeled, raised } = useLabeledFormElement(props, emit);
-
-    onFocusLabeled();
-    expect(raised.value).toBe(true);
-
-    onBlurLabeled();
-    expect(raised.value).toBe(false);
-  });
-
-  it('should set focused to true when focused', () => {
-    const props = {
-      mode:     'edit',
-      value:    '',
-      required: true,
-      disabled: false,
-      rules:    [],
-    };
-
-    const emit = jest.fn();
-    const { onFocusLabeled, onBlurLabeled, focused } = useLabeledFormElement(props, emit);
-
-    onFocusLabeled();
-    expect(focused.value).toBe(true);
-
-    onBlurLabeled();
-    expect(focused.value).toBe(false);
-  });
-
-  it('should set blurred to current timestamp when blurred', () => {
-    const props = {
-      mode:     'edit',
-      value:    '',
-      required: true,
-      disabled: false,
-      rules:    [],
-    };
-
-    const emit = jest.fn();
-    const { onBlurLabeled, blurred } = useLabeledFormElement(props, emit);
-
-    onBlurLabeled();
-    expect(blurred.value).toBeTruthy();
-  });
-
-  it('should compute isDisabled correctly', () => {
-    const props = ref({
-      mode:     'edit',
-      value:    '',
-      required: true,
-      disabled: false,
-      rules:    [],
-    });
-
-    const emit = jest.fn();
-    const { isDisabled } = useLabeledFormElement(props.value, emit);
-
-    expect(isDisabled.value).toBe(false);
-
-    props.value.disabled = true;
-    expect(isDisabled.value).toBe(true);
-
-    props.value.mode = 'view';
-    expect(isDisabled.value).toBe(true);
-  });
-
-  it('should compute validationMessage correctly for required field', () => {
-    const props = ref({
-      mode:     'edit',
-      value:    '',
-      required: true,
-      disabled: false,
-      rules:    [
-        (value: string[]) => (value.length < 5 ? 'This field is required' : undefined),
-      ],
-    });
-
-    const emit = jest.fn();
-    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
-
-    onBlurLabeled();
-    expect(validationMessage.value).toBe('This field is required');
-  });
-
-  it('should compute validationMessage correctly for custom rules', () => {
-    const props = ref({
-      mode:     'edit',
-      value:    'test',
-      required: false,
-      disabled: false,
-      rules:    [
-        (value: string[]) => (value.length < 5 ? 'Value must be at least 5 characters long' : undefined),
-        (value: string[]) => (value.includes('test') ? 'Value cannot contain the word "test"' : undefined),
-      ],
-    });
-
-    const emit = jest.fn();
-    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
-
-    onBlurLabeled();
-    expect(validationMessage.value).toBe('Value must be at least 5 characters long, Value cannot contain the word "test"');
-  });
-
-  it('should compute requiredField correctly', () => {
-    const props = ref({
-      mode:     'edit',
-      value:    '',
-      required: true,
-      disabled: false,
-      rules:    [],
-    });
-
-    const emit = jest.fn();
-    const { requiredField } = useLabeledFormElement(props.value, emit);
-
-    expect(requiredField.value).toBe(true);
-
-    // When the field is not required, requiredField should be false
-    props.value.required = false;
-    expect(requiredField.value).toBe(false);
-  });
-});

package/types/vue-shim.d.ts

@@ -1,42 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-import Vue, { ComponentCustomProperties } from 'vue';
-declare module '*.vue' {
-  export default Vue;
-}
-
-// 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' {
-  // eslint-disable-next-line no-unused-vars
-  interface Vue {
-      /**
-       * Lookup a given string with the given arguments
-       * @param raw if set, do not do HTML escaping.
-       */
-      t: {
-        (key: string, args?: Record<string, any>, raw?: boolean): string;
-        (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
-      };
-  }
-}
-
-declare module '@vue/runtime-core' {
-  // eslint-disable-next-line no-unused-vars
-  interface Vue {
-    t: {
-      (key: string, args?: Record<string, any>, raw?: boolean): string;
-      (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
-    }
-  }
-
-  // eslint-disable-next-line no-unused-vars
-  interface ComponentCustomProperties {
-    $t: {
-      (key: string, args?: Record<string, any>, raw?: boolean): string;
-      (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
-    }
-  }
-}
-
-declare module 'js-yaml';