@rancher/shell 0.3.23 → 0.3.25

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

@@ -1,11 +1,11 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, Wrapper } from '@vue/test-utils';
 import { ToggleSwitch } from './index';
 
-describe('ToggleSwitch.vue', () => {
+describe('toggleSwitch.vue', () => {
   it('renders falsy by default', () => {
     const wrapper = shallowMount(ToggleSwitch);
 
-    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
 
     expect(toggleInput.checked).toBeFalsy();
   });
@@ -13,71 +13,58 @@ describe('ToggleSwitch.vue', () => {
   it('renders a true value', () => {
     const wrapper = shallowMount(
       ToggleSwitch,
-      {
-        propsData: {
-          value: true
-        }
-      });
+      { propsData: { value: true } });
 
-    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
 
     expect(toggleInput.checked).toBe(true);
   });
 
-  it('updates from falsy to truthy when props change', async () => {
+  it('updates from falsy to truthy when props change', async() => {
     const wrapper = shallowMount(ToggleSwitch);
-  
-    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
+
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
 
     expect(toggleInput.checked).toBe(false);
 
     await wrapper.setProps({ value: true });
-  
+
     expect(toggleInput.checked).toBe(true);
   });
 
-  it('emits an input event with a true value', async () => {
-    const wrapper = shallowMount(ToggleSwitch);
+  it('emits an input event with a true value', async() => {
+    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(ToggleSwitch);
 
-    (wrapper.vm as any).toggle(true);
+    wrapper.vm.toggle(true);
 
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(true);
-
   });
 
-  it('emits an input event with a false value', async () => {
-    const wrapper = shallowMount(
+  it('emits an input event with a false value', async() => {
+    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
       ToggleSwitch,
-      {
-        propsData: {
-          value: true
-        }
-      }
+      { propsData: { value: true } }
     );
 
-    (wrapper.vm as any).toggle(false);
+    wrapper.vm.toggle(false);
 
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(false);
-  })
+  });
 
-  it('emits an input event with a custom onValue', async () => {
+  it('emits an input event with a custom onValue', async() => {
     const onValue = 'THE TRUTH';
 
-    const wrapper = shallowMount(
+    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
       ToggleSwitch,
-      {
-        propsData: {
-          onValue,
-        }
-      });
+      { propsData: { onValue } });
 
-    (wrapper.vm as any).toggle(true);
+    wrapper.vm.toggle(true);
 
     await wrapper.vm.$nextTick();
 
@@ -85,10 +72,10 @@ describe('ToggleSwitch.vue', () => {
     expect(wrapper.emitted().input?.[0][0]).toBe(onValue);
   });
 
-  it('emits an input event with a custom offValue', async () => {
+  it('emits an input event with a custom offValue', async() => {
     const offValue = 'NOT THE TRUTH';
 
-    const wrapper = shallowMount(
+    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
       ToggleSwitch,
       {
         propsData: {
@@ -97,11 +84,11 @@ describe('ToggleSwitch.vue', () => {
         }
       });
 
-    (wrapper.vm as any).toggle(false);
+    wrapper.vm.toggle(false);
 
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(offValue);
-  })
+  });
 });

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

@@ -31,13 +31,6 @@ export default Vue.extend({
     return { state: false as boolean | string | number };
   },
 
-  methods: {
-    toggle(neu: boolean | string | number) {
-      this.state = neu === null ? !this.state : neu;
-      this.$emit('input', this.state ? this.onValue : this.offValue);
-    }
-  },
-
   watch: {
     value: {
       handler() {
@@ -45,18 +38,37 @@ export default Vue.extend({
       },
       immediate: true
     }
+  },
+
+  methods: {
+    toggle(neu: boolean | string | number) {
+      this.state = neu === null ? !this.state : neu;
+      this.$emit('input', this.state ? this.onValue : this.offValue);
+    }
   }
 });
 </script>
 
 <template>
   <span class="toggle-container">
-    <span class="label no-select hand" :class="{ active: !state}" @click="toggle(false)">{{ offLabel }}</span>
+    <span
+      class="label no-select hand"
+      :class="{ active: !state}"
+      @click="toggle(false)"
+    >{{ offLabel }}</span>
     <label class="switch hand">
-      <input type="checkbox" :checked="state" @input="toggle(null)">
-      <span class="slider round"></span>
+      <input
+        type="checkbox"
+        :checked="state"
+        @input="toggle(null)"
+      >
+      <span class="slider round" />
     </label>
-    <span class="label no-select hand" :class="{ active: state}" @click="toggle(true)">{{ onLabel }}</span>
+    <span
+      class="label no-select hand"
+      :class="{ active: state}"
+      @click="toggle(true)"
+    >{{ onLabel }}</span>
   </span>
 </template>
 

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -37,13 +37,28 @@ export default Vue.extend({
 </script>
 
 <template>
-  <div ref="container" class="labeled-tooltip" :class="{[status]: true, hoverable: hover}">
+  <div
+    ref="container"
+    class="labeled-tooltip"
+    :class="{[status]: true, hoverable: hover}"
+  >
     <template v-if="hover">
-      <i v-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value" :class="{'hover':!value, [iconClass]: true}" class="icon status-icon" />
+      <i
+        v-clean-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
+        :class="{'hover':!value, [iconClass]: true}"
+        class="icon status-icon"
+      />
     </template>
     <template v-else>
-      <i :class="{'hover':!value}" class="icon status-icon" />
-      <div v-if="value" class="tooltip" x-placement="bottom">
+      <i
+        :class="{'hover':!value}"
+        class="icon status-icon"
+      />
+      <div
+        v-if="value"
+        class="tooltip"
+        x-placement="bottom"
+      >
         <div class="tooltip-arrow" />
         <div class="tooltip-inner">
           {{ value }}
@@ -69,7 +84,6 @@ export default Vue.extend({
         position:  absolute;
         right: 30px;
         top: $input-padding-lg;
-        font-size: 20px;
         z-index: z-index(hoverOverContent);
      }