@rancher/shell 0.2.1 → 0.2.3

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

@@ -1,235 +0,0 @@
-<script lang="ts">
-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
-}
-
-export default Vue.extend({
-  components: { RadioButton },
-  props:      {
-    /**
-     * Name for the checkbox grouping, must be unique on page.
-     */
-    name: {
-      type:     String,
-      required: true
-    },
-
-    /**
-     * Options can be an array of {label, value}, or just values.
-     */
-    options: {
-      type:     Array as PropType<Option[] | string[]>,
-      required: true
-    },
-
-    /**
-     * If options are just values, then labels can be a corresponding display 
-     * value.
-     */
-    labels: {
-      type:    Array as PropType<string[]>,
-      default: null
-    },
-
-    /**
-     * The selected value.
-     */
-    value: {
-      type:    [Boolean, String, Object],
-      default: null
-    },
-
-    /**
-     * Disable the radio group.
-     */
-    disabled: {
-      type:    Boolean,
-      default: false
-    },
-
-    /**
-     * The radio group editing mode.
-     * @values _EDIT, _VIEW
-     */
-    mode: {
-      type:    String,
-      default: 'edit'
-    },
-
-    /**
-     * Label for above the radios.
-     */
-    label: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * The i18n key to use for the radio group label.
-     */
-    labelKey: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * Radio group tooltip.
-     */
-    tooltip: {
-      type:    [String, Object],
-      default: null
-    },
-
-    /**
-     * The i18n key to use for the radio group tooltip.
-     */
-    tooltipKey: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * Show radio buttons in column or row.
-     */
-    row: {
-      type:    Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    /**
-     * Creates a collection of Options from the provided props.
-     */
-    normalizedOptions(): Option[] {
-      const out: Option[] = [];
-
-      for (let i = 0; i < this.options.length; i++) {
-        const opt = this.options[i];
-
-        if (typeof opt === 'object' && opt) {
-          out.push(opt);
-        } else if (this.labels) {
-          out.push({
-            label: this.labels[i],
-            value: opt
-          });
-        } else {
-          out.push({
-            label: opt,
-            value: opt
-          });
-        }
-      }
-
-      return out;
-    },
-
-    /**
-     * Determines the view mode for the radio group.
-     */
-    isView(): boolean {
-      return this.mode === _VIEW;
-    },
-
-    /**
-     * Determines if the radio group is disabled.
-     */
-    isDisabled(): boolean {
-      return (this.disabled || this.isView);
-    }
-  },
-
-  methods: {
-    /**
-     * Keyboard left/right event listener to select next/previous option. Emits
-     * the input event.
-     */
-    clickNext(direction: number): void {
-      const opts = this.normalizedOptions;
-      const selected = opts.find(x => x.value === this.value);
-      let newIndex = (selected ? opts.indexOf(selected) : -1) + direction;
-
-      if (newIndex >= opts.length) {
-        newIndex = opts.length - 1;
-      } else if (newIndex < 0) {
-        newIndex = 0;
-      }
-
-      this.$emit('input', opts[newIndex].value);
-    }
-  }
-});
-</script>
-
-<template>
-  <div>
-    <div v-if="label || labelKey || tooltip || tooltipKey || $slots.label" class="radio-group label">
-      <slot name="label">
-        <h3>
-          <t v-if="labelKey" :k="labelKey" />
-          <template v-else-if="label">
-            {{ label }}
-          </template>
-          <i v-if="tooltipKey" v-tooltip="t(tooltipKey)" class="icon icon-info icon-lg" />
-          <i v-else-if="tooltip" v-tooltip="tooltip" class="icon icon-info icon-lg" />
-        </h3>
-      </slot>
-    </div>
-    <div
-      class="radio-group"
-      :class="{'row':row}"
-      tabindex="0"
-      @keyup.down.stop="clickNext(1)"
-      @keyup.up.stop="clickNext(-1)"
-    >
-      <div
-        v-for="(option, i) in normalizedOptions"
-        :key="name+'-'+i"
-      >
-        <slot :listeners="$listeners" :option="option" :name="i">
-          <RadioButton
-            :key="name+'-'+i"
-            :name="name"
-            :value="value"
-            :label="option.label"
-            :description="option.description"
-            :val="option.value"
-            :disabled="isDisabled"
-            :mode="mode"
-            v-on="$listeners"
-          />
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='scss'>
-.radio-group {
-  &:focus {
-    border:none;
-    outline:none;
-  }
-
-  h3 {
-    position: relative;
-  }
-
-  &.row {
-    display: flex;
-    .radio-container {
-      margin-right: 10px;
-    }
-  }
-
-  .label{
-    font-size: 14px !important;
-  }
-}
-</style>

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

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

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

@@ -1,168 +0,0 @@
-<script lang="ts">
-import Vue, { VueConstructor } from 'vue';
-import debounce from 'lodash/debounce';
-import { _EDIT, _VIEW } from '@shell/config/query-params';
-
-interface TextAreaResize {
-  queueResize(): void;
-}
-
-export default (
-  Vue as VueConstructor<Vue & TextAreaResize>
-).extend({
-  inheritAttrs: false,
-
-  props: {
-    /**
-     * Sets the edit mode for Text Area.
-     * @values _EDIT, _VIEW
-     */
-    mode: {
-      type:    String,
-      default: _EDIT
-    },
-
-    /**
-     * Sets the Minimum height for Text Area. Prevents the height from becoming 
-     * smaller than the value specified in minHeight.
-     */
-    minHeight: {
-      type:    Number,
-      default: 25
-    },
-    
-    /**
-     * Sets the maximum height for Text Area. Prevents the height from becoming
-     * larger than the value specified in maxHeight.
-     */
-    maxHeight: {
-      type:    Number,
-      default: 200
-    },
-
-    /**
-     * Text that appears in the Text Area when it has no value set.
-     */
-    placeholder: {
-      type:    String,
-      default: ''
-    },
-
-    /**
-     * Specifies whether Text Area is subject to spell checking by the 
-     * underlying browser/OS.
-     */
-    spellcheck: {
-      type:    Boolean,
-      default: true
-    },
-
-    /**
-     * Disables the Text Area.
-     */
-    disabled: {
-      type:    Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      curHeight: this.minHeight,
-      overflow:  'hidden'
-    };
-  },
-
-  computed: {
-    /**
-     * Determines if the Text Area should be disabled.
-     */
-    isDisabled(): boolean {
-      return this.disabled || this.mode === _VIEW;
-    },
-
-    /**
-     * Sets the height to one-line for SSR pageload so that it's already right 
-     * (unless the input is long)
-     */
-    style(): string {
-      return `height: ${ this.curHeight }px; overflow: ${ this.overflow };`;
-    }
-  },
-
-  watch: {
-    $attrs: {
-      deep: true,
-      handler() {
-        this.queueResize();
-      }
-    }
-  },
-
-  created() {
-    this.queueResize = debounce(this.autoSize, 100);
-  },
-
-  mounted() {
-    (this.$refs.ta as HTMLElement).style.height = `${ this.curHeight }px`;
-    this.$nextTick(() => {
-      this.autoSize();
-    });
-  },
-
-  methods: {
-    /** 
-     * Emits the input event and resizes the Text Area.
-    */
-    onInput(val: string): void {
-      this.$emit('input', val);
-      this.queueResize();
-    },
-
-    /**
-     * Gives focus to the Text Area.
-     */
-    focus(): void {
-      (this.$refs?.ta as HTMLElement).focus();
-    },
-
-    /**
-     * Sets the overflowY and height of the Text Area based on the content 
-     * entered (calculated via scroll height).
-     */
-    autoSize(): void {
-      const el = this.$refs.ta as HTMLElement;
-
-      if (!el) {
-        return;
-      }
-
-      el.style.height = '1px';
-
-      const border = parseInt(getComputedStyle(el).getPropertyValue('borderTopWidth'), 10) || 0 + parseInt(getComputedStyle(el).getPropertyValue('borderBottomWidth'), 10) || 0;
-      const neu = Math.max(this.minHeight, Math.min(el.scrollHeight + border, this.maxHeight));
-
-      el.style.overflowY = el.scrollHeight > neu ? 'auto' : 'hidden';
-      el.style.height = `${ neu }px`;
-
-      this.curHeight = neu;
-    }
-  }
-});
-</script>
-
-<template>
-  <textarea
-    ref="ta"
-    :disabled="isDisabled"
-    :style="style"
-    :placeholder="placeholder"
-    class="no-resize no-ease"
-    v-bind="$attrs"
-    :spellcheck="spellcheck"
-    @paste="$emit('paste', $event)"
-    @input="onInput($event.target.value)"
-    @focus="$emit('focus', $event)"
-    @blur="$emit('blur', $event)"
-  />
-</template>

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

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

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

@@ -1,107 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { ToggleSwitch } from './index';
-
-describe('ToggleSwitch.vue', () => {
-  it('renders falsy by default', () => {
-    const wrapper = shallowMount(ToggleSwitch);
-
-    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
-
-    expect(toggleInput.checked).toBeFalsy();
-  });
-
-  it('renders a true value', () => {
-    const wrapper = shallowMount(
-      ToggleSwitch,
-      {
-        propsData: {
-          value: true
-        }
-      });
-
-    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 () => {
-    const wrapper = shallowMount(ToggleSwitch);
-  
-    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);
-
-    (wrapper.vm as any).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(
-      ToggleSwitch,
-      {
-        propsData: {
-          value: true
-        }
-      }
-    );
-
-    (wrapper.vm as any).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 () => {
-    const onValue = 'THE TRUTH';
-
-    const wrapper = shallowMount(
-      ToggleSwitch,
-      {
-        propsData: {
-          onValue,
-        }
-      });
-
-    (wrapper.vm as any).toggle(true);
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted().input?.length).toBe(1);
-    expect(wrapper.emitted().input?.[0][0]).toBe(onValue);
-  });
-
-  it('emits an input event with a custom offValue', async () => {
-    const offValue = 'NOT THE TRUTH';
-
-    const wrapper = shallowMount(
-      ToggleSwitch,
-      {
-        propsData: {
-          value: true,
-          offValue,
-        }
-      });
-
-    (wrapper.vm as any).toggle(false);
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted().input?.length).toBe(1);
-    expect(wrapper.emitted().input?.[0][0]).toBe(offValue);
-  })
-});

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

@@ -1,137 +0,0 @@
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-  props: {
-    value: {
-      type:    [Boolean, String, Number],
-      default: false
-    },
-
-    offValue: {
-      type:    [Boolean, String, Number],
-      default: false,
-    },
-
-    onValue: {
-      type:    [Boolean, String, Number],
-      default: true,
-    },
-
-    offLabel: {
-      type:    String,
-      default: '',
-    },
-
-    onLabel: {
-      type:    String,
-      default: '',
-    },
-  },
-  data() {
-    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() {
-        this.state = this.value === this.onValue;
-      },
-      immediate: true
-    }
-  }
-});
-</script>
-
-<template>
-  <span class="toggle-container">
-    <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>
-    </label>
-    <span class="label no-select hand" :class="{ active: state}" @click="toggle(true)">{{ onLabel }}</span>
-  </span>
-</template>
-
-<style lang="scss" scoped>
-$toggle-height: 16px;
-
-.toggle-container {
-  align-items: center;
-  display: flex;
-
-  span:first-child {
-    padding-right: 6px;
-  }
-  span:last-child {
-    padding-left: 6px;
-  }
-}
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 48px;
-  height: $toggle-height + 8px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--checkbox-disabled-bg);
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: $toggle-height;
-  width: $toggle-height;
-  left: 4px;
-  bottom: 4px;
-  background-color: var(--checkbox-tick);
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: var(--checkbox-ticked-bg);
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px var(--checkbox-ticked-bg);
-}
-
-input:checked + .slider:before {
-  transform: translateX(24px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-</style>

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

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

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

@@ -1,5 +0,0 @@
-export * from './Checkbox';
-export * from './LabeledInput';
-export * from './Radio';
-export * from './TextArea';
-export * from './ToggleSwitch';