@rancher/shell 0.4.0 → 0.5.0

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

@@ -1,21 +1,27 @@
 <script lang="ts">
-import Vue, { VueConstructor } from 'vue';
-import CompactInput from '@shell/mixins/compact-input';
-import LabeledFormElement from '@shell/mixins/labeled-form-element';
+import { defineComponent } from 'vue';
 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';
 
-export default (
-  Vue as VueConstructor<Vue & InstanceType<typeof LabeledFormElement> & InstanceType<typeof CompactInput>>
-).extend({
+declare module 'vue/types/vue' {
+  interface Vue {
+    onInput: (event: Event) => void | ((event: Event) => void);
+  }
+}
+
+export default defineComponent({
   components: { LabeledTooltip, TextAreaAutoGrow },
-  mixins:     [LabeledFormElement, CompactInput],
+
+  inheritAttrs: false,
 
   props: {
+    ...labeledFormElementProps,
     /**
      * The type of the Labeled Input.
      * @values text, cron, multiline, multiline-password
@@ -90,24 +96,39 @@ export default (
     delay: {
       type:    Number,
       default: 0
-    }
+    },
+  },
+
+  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.
      */
@@ -122,7 +143,7 @@ export default (
       return !!this.tooltip || !!this.tooltipKey;
     },
 
-    tooltipValue(): string | undefined {
+    tooltipValue(): string | Record<string, unknown> | undefined {
       if (this.hasTooltip) {
         return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip;
       }
@@ -144,7 +165,7 @@ export default (
       if (this.type !== 'cron' || !this.value) {
         return;
       }
-      if (!isValidCron(this.value)) {
+      if (typeof this.value === 'string' && !isValidCron(this.value)) {
         return this.t('generic.invalidCron');
       }
       try {
@@ -173,15 +194,22 @@ export default (
     /**
      * The max length for the Labeled Input.
      */
-    _maxlength(): number | null {
+    _maxlength(): number | undefined {
       if (this.type === 'text' && this.maxlength) {
         return this.maxlength;
       }
 
-      return null;
+      return undefined;
     },
   },
 
+  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.
@@ -206,11 +234,23 @@ export default (
       }
     },
 
+    /**
+     * Emit on input change
+     */
+    onChange(event: Event): void {
+      this.$emit('change', event);
+    },
+
     /**
      * Emit on input with delay. Note: Arrow function is avoided due context
      * binding.
+     *
+     * NOTE: In multiline, TextAreaAutoGrow emits a string with the value
+     * https://github.com/rancher/dashboard/issues/10249
      */
-    delayInput(value: string): void {
+    delayInput(val: string | Event): void {
+      const value = typeof val === 'string' ? val : (val?.target as HTMLInputElement)?.value;
+
       this.$emit('input', value);
     },
 
@@ -227,7 +267,7 @@ export default (
      * event.
      * @see labeled-form-element.ts mixin for onBlurLabeled()
      */
-    onBlur(event: string): void {
+    onBlur(event: string | FocusEvent): void {
       this.$emit('blur', event);
       this.onBlurLabeled();
     },
@@ -279,7 +319,7 @@ export default (
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
-        @input="onInput($event)"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -296,9 +336,10 @@ export default (
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
-        @input="onInput($event.target.value)"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
+        @change="onChange"
       >
     </slot>
 

package/rancher-components/Form/Radio/RadioButton.test.ts

@@ -4,7 +4,7 @@ import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('radioButton.vue', () => {
   it('renders label slot contents', () => {
-    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' } });
+    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' }, propsData: { val: {}, value: {} } });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label');
   });
@@ -14,7 +14,9 @@ describe('radioButton.vue', () => {
       RadioButton,
       {
         directives: { cleanHtmlDirective },
-        propsData:  { label: 'Test Label' }
+        propsData:  {
+          label: 'Test Label', val: {}, value: {}
+        }
       });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label');
@@ -23,7 +25,9 @@ describe('radioButton.vue', () => {
   it('renders slot contents when both slot and label prop are provided', () => {
     const wrapper = shallowMount(RadioButton, {
       slots:     { label: 'Test Label - Slot' },
-      propsData: { label: 'Test Label - Props' },
+      propsData: {
+        label: 'Test Label - Props', val: {}, value: {}
+      },
     });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label - Slot');

package/rancher-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.
@@ -71,7 +72,10 @@ export default Vue.extend({
   },
 
   data() {
-    return { isChecked: this.value === this.val };
+    return {
+      isChecked:    this.value === this.val,
+      randomString: `${ randomStr() }-radio`,
+    };
   },
 
   computed: {
@@ -115,13 +119,15 @@ 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);
-    }
+    },
   }
 });
 </script>
@@ -134,7 +140,7 @@ export default Vue.extend({
     @click.stop="clicked($event)"
   >
     <input
-      :id="_uid+'-radio'"
+      :id="randomString"
       :disabled="isDisabled"
       :name="name"
       :value="''+val"

package/rancher-components/Form/Radio/RadioGroup.test.ts

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import { RadioGroup } from './index';
+
+describe('component: RadioGroup', () => {
+  describe('when disabled', () => {
+    it.each([true, false])('should expose disabled slot prop for indexed slots for %p', (disabled) => {
+      const wrapper = mount(RadioGroup, {
+        propsData: {
+          name:    'whatever',
+          options: [{ label: 'whatever', value: 'whatever' }],
+          disabled
+        },
+        scopedSlots: {
+          0(props: {isDisabled: boolean}) {
+            return this.$createElement('input', {
+              attrs: {
+                id:       'test',
+                disabled: props.isDisabled
+              }
+            });
+          }
+        }
+      });
+
+      const slot = wrapper.find('#test').element as HTMLInputElement;
+
+      expect(slot.disabled).toBe(disabled);
+    });
+  });
+});

package/rancher-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:      {
     /**
@@ -169,6 +170,7 @@ export default Vue.extend({
 
 <template>
   <div>
+    <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
       class="radio-group label"
@@ -195,6 +197,8 @@ export default Vue.extend({
         </h3>
       </slot>
     </div>
+
+    <!-- Group -->
     <div
       class="radio-group"
       :class="{'row':row}"
@@ -212,6 +216,7 @@ export default Vue.extend({
           :is-disabled="isDisabled"
           :name="i"
         >
+          <!-- Default input -->
           <RadioButton
             :key="name+'-'+i"
             :name="name"

package/rancher-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)"
   />

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

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