@rancher/shell 1.2.1 → 1.2.2

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

@@ -1,167 +0,0 @@
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-  name:  'Card',
-  props: {
-    /**
-     * The card's title.
-     */
-    title: {
-      type:    String,
-      default: ''
-    },
-    /**
-     * The text content for the card's body.
-     */
-    content: {
-      type:    String,
-      default: ''
-    },
-    /**
-     * The function to invoke when the default action button is clicked.
-     */
-    buttonAction: {
-      type:    Function,
-      default: (): void => { }
-    },
-    /**
-     * The text for the default action button.
-     */
-    buttonText: {
-      type:    String,
-      default: 'go'
-    },
-    /**
-     * Toggles the card's highlight-border class.
-     */
-    showHighlightBorder: {
-      type:    Boolean,
-      default: true
-    },
-    /**
-     * Toggles the card's Actions section.
-     */
-    showActions: {
-      type:    Boolean,
-      default: true
-    },
-    sticky: {
-      type:    Boolean,
-      default: false,
-    },
-  }
-});
-</script>
-
-<template>
-  <div
-    class="card-container"
-    :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
-    data-testid="card"
-  >
-    <div class="card-wrap">
-      <div
-        class="card-title"
-        data-testid="card-title-slot"
-      >
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </div>
-      <hr>
-      <div
-        class="card-body"
-        data-testid="card-body-slot"
-      >
-        <slot name="body">
-          {{ content }}
-        </slot>
-      </div>
-      <div
-        v-if="showActions"
-        class="card-actions"
-        data-testid="card-actions-slot"
-      >
-        <slot name="actions">
-          <button
-            class="btn role-primary"
-            @click="buttonAction"
-          >
-            {{ buttonText }}
-          </button>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='scss'>
- .card-container {
-  &.highlight-border {
-    border-left: 5px solid var(--primary);
-  }
-  border-radius: var(--border-radius);
-  display: flex;
-  flex-basis: 40%;
-  margin: 10px;
-  min-height: 100px;
-  padding: 10px;
-  box-shadow: 0 0 20px var(--shadow);
-  &:not(.top) {
-    align-items: top;
-    flex-direction: row;
-    justify-content: start;
-  }
-  .card-wrap {
-    width: 100%;
-  }
-   & .card-body {
-    color: var(--input-label);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-   }
-   & .card-actions {
-     align-self: end;
-     display: flex;
-     padding-top: 20px;
-   }
-   & .card-title {
-    align-items: center;
-    display: flex;
-    width: 100%;
-     h5 {
-       margin: 0;
-     }
-    .flex-right {
-      margin-left: auto;
-    }
-   }
-
-  // Sticky mode will stick header and footer to top and bottom with content in the middle scrolling
-   &.card-sticky {
-      // display: flex;
-      // flex-direction: column;
-      overflow: hidden;
-
-    .card-wrap {
-      display: flex;
-      flex-direction: column;
-
-      .card-body {
-        justify-content: flex-start;
-        overflow: scroll;
-      }
-
-      > * {
-        flex: 0;
-      }
-
-      .card-body {
-        flex: 1;
-      }
-    }
-   }
- }
-</style>

package/rancher-components/components/Card/index.ts

@@ -1 +0,0 @@
-export { default as Card } from './Card.vue';

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

@@ -1,68 +0,0 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
-import { Checkbox } from './index';
-
-describe('checkbox.vue', () => {
-  const event = {
-    target:          { tagName: 'input', href: null },
-    stopPropagation: () => { },
-    preventDefault:  () => { }
-  } as unknown as MouseEvent;
-
-  it('is unchecked by default', () => {
-    const wrapper = shallowMount(Checkbox);
-    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
-
-    expect(cbInput.checked).toBe(false);
-  });
-
-  it('renders a true value', () => {
-    const wrapper = shallowMount(Checkbox, { propsData: { value: true } });
-    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
-
-    expect(cbInput.checked).toBe(true);
-  });
-
-  it('updates from false to true when props change', async() => {
-    const wrapper = shallowMount(Checkbox);
-    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
-
-    expect(cbInput.checked).toBe(false);
-
-    await wrapper.setProps({ value: true });
-
-    expect(cbInput.checked).toBe(true);
-  });
-
-  it('emits an input event with a true value', async() => {
-    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox);
-
-    wrapper.vm.clicked(event);
-    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 custom valueWhenTrue', async() => {
-    const valueWhenTrue = 'BIG IF TRUE';
-
-    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
-
-    wrapper.vm.clicked(event);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted().input?.length).toBe(1);
-    expect(wrapper.emitted().input?.[0][0]).toBe(valueWhenTrue);
-  });
-
-  it('updates from valueWhenTrue to falsy', async() => {
-    const valueWhenTrue = 'REAL HUGE IF FALSE';
-
-    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
-
-    wrapper.vm.clicked(event);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted().input?.[0][0]).toBeNull();
-  });
-});

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

@@ -1,420 +0,0 @@
-<script lang="ts">
-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 Vue.extend({
-  name: 'Checkbox',
-
-  props: {
-    /**
-     * The checkbox value.
-     */
-    value: {
-      type:    [Boolean, Array, String] as PropType<boolean | boolean[] | string>,
-      default: false
-    },
-
-    /**
-     * The checkbox label.
-     */
-    label: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * The i18n key to use for the checkbox label.
-     */
-    labelKey: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * Random ID generated for binding label to input.
-     */
-    id: {
-      type:    String,
-      default: String(Math.random() * 1000)
-    },
-
-    /**
-     * Disable the checkbox.
-     */
-    disabled: {
-      type:    Boolean,
-      default: false
-    },
-
-    /**
-     * Display an indeterminate state. Useful for cases where a checkbox might
-     * be the parent to child checkboxes, and we need to show that a subset of
-     * children are checked.
-     */
-    indeterminate: {
-      type:    Boolean,
-      default: false
-    },
-
-    /**
-     * The checkbox editing mode.
-     * @values _EDIT, _VIEW
-     */
-    mode: {
-      type:    String,
-      default: _EDIT
-    },
-
-    /**
-     * The contents of the checkbox tooltip.
-     */
-    tooltip: {
-      type:    [String, Object],
-      default: null
-    },
-
-    /**
-     * The i18n key to use for the checkbox tooltip.
-     */
-    tooltipKey: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * A custom value to use when the checkbox is checked.
-     */
-    valueWhenTrue: {
-      type:    [Boolean, String, Number],
-      default: true
-    },
-
-    /**
-     * The i18n key to use for the checkbox description.
-     */
-    descriptionKey: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * The checkbox description.
-     */
-    description: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * Primary checkbox displays label so that it stands out more
-     */
-    primary: {
-      type:    Boolean,
-      default: false
-    },
-  },
-
-  computed: {
-    /**
-     * Determines if the checkbox is disabled.
-     * @returns boolean: True when the disabled prop is true or when mode is
-     * View.
-     */
-    isDisabled(): boolean {
-      return (this.disabled || this.mode === _VIEW);
-    },
-    /**
-     * Determines if the checkbox is checked when using custom values or
-     * multiple values.
-     * @returns boolean: True when at least one value is true in a collection or
-     * when value matches `this.valueWhenTrue`.
-     */
-    isChecked(): boolean {
-      return this.isMulti(this.value) ? this.findTrueValues(this.value) : this.value === this.valueWhenTrue;
-    }
-  },
-
-  methods: {
-    /**
-     * Toggles the checked state for the checkbox and emits an 'input' event.
-     */
-    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;
-      }
-
-      event.stopPropagation();
-      event.preventDefault();
-
-      if (this.isDisabled) {
-        return;
-      }
-
-      const customEvent = {
-        bubbles:    true,
-        cancelable: false,
-        shiftKey:   event.shiftKey,
-        altKey:     event.altKey,
-        ctrlKey:    event.ctrlKey,
-        metaKey:    event.metaKey
-      };
-
-      const click = new CustomEvent('click', customEvent);
-
-      // Flip the value
-      const value = cloneDeep(this.value);
-
-      if (this.isMulti(value)) {
-        if (this.isChecked) {
-          removeObject(value, this.valueWhenTrue);
-        } else {
-          addObject(value, this.valueWhenTrue);
-        }
-        this.$emit('input', value);
-      } else if (this.isString(this.valueWhenTrue)) {
-        if (this.isChecked) {
-          this.$emit('input', null);
-        } else {
-          this.$emit('input', this.valueWhenTrue);
-        }
-      } else {
-        this.$emit('input', !value);
-        this.$el.dispatchEvent(click);
-      }
-    },
-
-    /**
-     * Determines if there are multiple values for the checkbox.
-     */
-    isMulti(value: boolean | boolean[] | string): value is boolean[] {
-      return Array.isArray(value);
-    },
-
-    isString(value: boolean | number | string): value is boolean {
-      return typeof value === 'string';
-    },
-
-    /**
-     * Finds the first true value for multiple checkboxes.
-     * @param value A collection of values for the checkbox.
-     */
-    findTrueValues(value: boolean[]): boolean {
-      return value.find((v) => v === this.valueWhenTrue) || false;
-    }
-  }
-});
-</script>
-
-<template>
-  <div
-    class="checkbox-outer-container"
-    data-checkbox-ctrl
-  >
-    <label
-      class="checkbox-container"
-      :class="{ 'disabled': isDisabled}"
-      :for="id"
-      @keydown.enter.prevent="clicked($event)"
-      @keydown.space.prevent="clicked($event)"
-      @click="clicked($event)"
-    >
-      <input
-        :checked="isChecked"
-        :value="valueWhenTrue"
-        type="checkbox"
-        :tabindex="-1"
-        :name="id"
-        @click.stop.prevent
-      >
-      <span
-        class="checkbox-custom"
-        :class="{indeterminate: indeterminate}"
-        :tabindex="isDisabled ? -1 : 0"
-        :aria-label="label"
-        :aria-checked="!!value"
-        role="checkbox"
-      />
-      <span
-        v-if="$slots.label || label || labelKey || tooltipKey || tooltip"
-        class="checkbox-label"
-        :class="{ 'checkbox-primary': primary }"
-      >
-        <slot name="label">
-          <t
-            v-if="labelKey"
-            :k="labelKey"
-            :raw="true"
-          />
-          <template v-else-if="label">{{ label }}</template>
-          <i
-            v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
-            class="checkbox-info icon icon-info icon-lg"
-          />
-          <i
-            v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
-            class="checkbox-info icon icon-info icon-lg"
-          />
-        </slot>
-      </span>
-    </label>
-    <div
-      v-if="descriptionKey || description"
-      class="checkbox-outer-container-description"
-    >
-      <t
-        v-if="descriptionKey"
-        :k="descriptionKey"
-      />
-      <template v-else-if="description">
-        {{ description }}
-      </template>
-    </div>
-  </div>
-</template>
-
-<style lang='scss'>
-$fontColor: var(--input-label);
-
-.checkbox-outer-container {
-  display: inline-flex;
-  flex-direction: column;
-  &-description {
-    color: $fontColor;
-    font-size: 14px;
-    margin-left: 19px;
-    margin-top: 5px;
-    opacity: 0.8;
-  }
-}
-
-// NOTE: SortableTable depends on the names of this class, do not arbitrarily change.
-.checkbox-container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  cursor: pointer;
-  user-select: none;
-  border-radius: var(--border-radius);
-
-  .checkbox-label {
-    color: var(--input-label);
-    display: inline-flex;
-    margin: 0px 10px 0px 5px;
-
-    &.checkbox-primary {
-      color: inherit;
-      font-weight: 600;
-    }
-  }
-
-  .checkbox-info {
-    line-height: normal;
-    margin-left: 2px;
-  }
-
- .checkbox-custom {
-    height: 14px;
-    width: 14px;
-    background-color: var(--body-bg);
-    border-radius: var(--border-radius);
-    transition: all 0.3s ease-out;
-    border: 1px solid var(--border);
-  }
-
-  input {
-    // display: none;
-    opacity: 0;
-    position: absolute;
-    z-index: -1;
-  }
-
-  input:checked ~ .checkbox-custom {
-    background-color:var(--primary);
-    -webkit-transform: rotate(0deg) scale(1);
-    -ms-transform: rotate(0deg) scale(1);
-    transform: rotate(0deg) scale(1);
-    opacity:1;
-    border: 1px solid var(--primary);
-  }
-
-  // Custom Checkbox tick
-  .checkbox-custom::after {
-    position: absolute;
-    content: "";
-    left: 0px;
-    top: 0px;
-    height: 0px;
-    width: 0px;
-    border-radius: var(--border-radius);
-    border: solid;
-    border-color: var(--input-text);
-    border-width: 0 3px 3px 0;
-    -webkit-transform: rotate(0deg) scale(0);
-    -ms-transform: rotate(0deg) scale(0);
-    transform: rotate(0deg) scale(0);
-    opacity:1;
-  }
-
-  input:checked ~ .checkbox-custom::after {
-    -webkit-transform: rotate(45deg) scale(1);
-    -ms-transform: rotate(45deg) scale(1);
-    transform: rotate(45deg) scale(1);
-    opacity:1;
-    left: 4px;
-    width: 4px;
-    height: 10px;
-    border: solid;
-    border-color: var(--checkbox-tick);
-    border-width: 0 2px 2px 0;
-    background-color: transparent;
-  }
-
-  input:checked ~ .checkbox-custom.indeterminate::after {
-    -webkit-transform:  scale(1);
-    -ms-transform:  scale(1);
-    transform:  scale(1);
-    opacity:1;
-    left: 3px;
-    top:2px;
-    width: 6px;
-    height: 5px;
-    border: solid;
-    border-color: var(--checkbox-tick);
-    border-width: 0 0 2px 0;
-    background-color: transparent;
-  }
-
-  // Disabled styles
-  &.disabled {
-    .checkbox-custom {
-      background-color: var(--checkbox-disabled-bg);
-      border-color: var(--checkbox-disabled-bg);
-    }
-    input:checked ~ .checkbox-custom {
-      background-color: var(--checkbox-disabled-bg);
-      border-color: var(--checkbox-disabled-bg);
-      &::after {
-        border-color: var(--checkbox-tick-disabled);
-      }
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  .checkbox-view {
-    display: flex;
-    flex-direction: column;
-    LABEL {
-      color: $fontColor;
-    }
-  }
-}
-</style>

package/rancher-components/components/Form/Checkbox/index.ts

@@ -1 +0,0 @@
-export { default as Checkbox } from './Checkbox.vue';

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

@@ -1,23 +0,0 @@
-
-import { mount } from '@vue/test-utils';
-import { LabeledInput } from './index';
-
-describe('component: LabeledInput', () => {
-  it('should emit input only once', () => {
-    const value = '2';
-    const delay = 1;
-    const wrapper = mount(LabeledInput, {
-      propsData: { delay },
-      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
-    });
-
-    jest.useFakeTimers();
-    wrapper.find('input').setValue('1');
-    wrapper.find('input').setValue(value);
-    jest.advanceTimersByTime(delay);
-    jest.useRealTimers();
-
-    expect(wrapper.emitted('input')).toHaveLength(1);
-    expect(wrapper.emitted('input')![0][0]).toBe(value);
-  });
-});