@rancher/shell 0.2.5 → 0.3.0

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

@@ -0,0 +1,253 @@
+<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

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

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

@@ -0,0 +1,169 @@
+<script lang="ts">
+import Vue from 'vue';
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+declare module 'vue/types/vue' {
+  /* eslint-disable no-unused-vars */
+  interface Vue {
+    queueResize(): void;
+  }
+}
+
+export default Vue.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

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

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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,149 @@
+<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" />
+    </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

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

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

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