@rancher/shell 1.2.0 → 1.2.2

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

@@ -1,369 +0,0 @@
-<script lang="ts">
-import Vue, { VueConstructor } from 'vue';
-import CompactInput from '@shell/mixins/compact-input';
-import LabeledFormElement from '@shell/mixins/labeled-form-element';
-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';
-
-export default (
-  Vue as VueConstructor<Vue & InstanceType<typeof LabeledFormElement> & InstanceType<typeof CompactInput>>
-).extend({
-  components: { LabeledTooltip, TextAreaAutoGrow },
-  mixins:     [LabeledFormElement, CompactInput],
-
-  props: {
-    /**
-     * The type of the Labeled Input.
-     * @values text, cron, multiline, multiline-password
-     */
-    type: {
-      type:    String,
-      default: 'text'
-    },
-
-    /**
-     * The status class of the Labeled Input and tooltip.
-     * @values info, success, warning, error
-     */
-    status: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * The sub-label for the Labeled Input.
-     */
-    subLabel: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * The tooltip to display for the Labeled Input.
-     */
-    tooltip: {
-      default: null,
-      type:    [String, Object]
-    },
-
-    /**
-     * Renders the tooltip when hovering the cursor over the Labeled Input.
-     */
-    hoverTooltip: {
-      type:    Boolean,
-      default: true
-    },
-
-    /**
-     * Disables the password manager prompt to save the contents of the Labeled
-     * Input.
-     */
-    ignorePasswordManagers: {
-      default: false,
-      type:    Boolean
-    },
-
-    /**
-     * The max length of the Labeled Input.
-     */
-    maxlength: {
-      type:    Number,
-      default: null
-    },
-
-    /**
-     * Hides arrows on the Labeled Input.
-     * @deprecated This doesn't appear to be in use for Labeled Input.
-     */
-    hideArrows: {
-      type:    Boolean,
-      default: false
-    },
-
-    /**
-     * Optionally delay on input while typing.
-     */
-    delay: {
-      type:    Number,
-      default: 0
-    }
-  },
-
-  data() {
-    return {
-      updated:          false,
-      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.
-     */
-    hasLabel(): boolean {
-      return this.isCompact ? false : !!this.label || !!this.labelKey || !!this.$slots.label;
-    },
-
-    /**
-     * Determines if the Labeled Input should display a tooltip.
-     */
-    hasTooltip(): boolean {
-      return !!this.tooltip || !!this.tooltipKey;
-    },
-
-    tooltipValue(): string | undefined {
-      if (this.hasTooltip) {
-        return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip;
-      }
-
-      return undefined;
-    },
-
-    /**
-     * Determines if the Labeled Input makes use of the suffix slot.
-     */
-    hasSuffix(): boolean {
-      return !!this.$slots.suffix;
-    },
-
-    /**
-     * Determines if the Labeled Input should display a cron hint.
-     */
-    cronHint(): string | undefined {
-      if (this.type !== 'cron' || !this.value) {
-        return;
-      }
-      if (!isValidCron(this.value)) {
-        return this.t('generic.invalidCron');
-      }
-      try {
-        const hint = cronstrue.toString(this.value);
-
-        return hint;
-      } catch (e) {
-        return this.t('generic.invalidCron');
-      }
-    },
-
-    /**
-     * The placeholder value for the Labeled Input.
-     */
-    _placeholder(): string {
-      if (this.placeholder) {
-        return this.placeholder.toString();
-      }
-      if (this.placeholderKey) {
-        return this.t(this.placeholderKey);
-      }
-
-      return '';
-    },
-
-    /**
-     * The max length for the Labeled Input.
-     */
-    _maxlength(): number | null {
-      if (this.type === 'text' && this.maxlength) {
-        return this.maxlength;
-      }
-
-      return null;
-    },
-  },
-
-  methods: {
-    /**
-     * Attempts to give the Labeled Input focus.
-     */
-    focus(): void {
-      const comp = this.$refs.value as HTMLInputElement;
-
-      if (comp) {
-        comp.focus();
-      }
-    },
-
-    /**
-     * Attempts to select the Labeled Input.
-     * @deprecated
-     */
-    select(): void {
-      const comp = this.$refs.value as HTMLInputElement;
-
-      if (comp) {
-        comp.select();
-      }
-    },
-
-    /**
-     * 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.
-     */
-    delayInput(value: string): void {
-      this.$emit('input', value);
-    },
-
-    /**
-     * Handles the behavior of the Labeled Input when given focus.
-     * @see labeled-form-element.ts mixin for onFocusLabeled()
-     */
-    onFocus(): void {
-      this.onFocusLabeled();
-    },
-
-    /**
-     * Handles the behavior of the Labeled Input when blurred and emits the blur
-     * event.
-     * @see labeled-form-element.ts mixin for onBlurLabeled()
-     */
-    onBlur(event: string): void {
-      this.$emit('blur', event);
-      this.onBlurLabeled();
-    },
-
-    escapeHtml
-  }
-});
-</script>
-
-<template>
-  <div
-    :class="{
-      'labeled-input': true,
-      focused,
-      [mode]: true,
-      disabled: isDisabled,
-      [status]: status,
-      suffix: hasSuffix,
-      'has-tooltip': hasTooltip,
-      'compact-input': isCompact,
-      hideArrows
-    }"
-  >
-    <slot name="label">
-      <label v-if="hasLabel">
-        <t
-          v-if="labelKey"
-          :k="labelKey"
-        />
-        <template v-else-if="label">{{ label }}</template>
-
-        <span
-          v-if="requiredField"
-          class="required"
-        >*</span>
-      </label>
-    </slot>
-
-    <slot name="prefix" />
-
-    <slot name="field">
-      <TextAreaAutoGrow
-        v-if="type === 'multiline' || type === 'multiline-password'"
-        ref="value"
-        v-bind="$attrs"
-        :maxlength="_maxlength"
-        :disabled="isDisabled"
-        :value="value"
-        :placeholder="_placeholder"
-        autocapitalize="off"
-        :class="{ conceal: type === 'multiline-password' }"
-        @input="onInput($event)"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-      <input
-        v-else
-        ref="value"
-        :class="{ 'no-label': !hasLabel }"
-        v-bind="$attrs"
-        :maxlength="_maxlength"
-        :disabled="isDisabled"
-        :type="type === 'cron' ? 'text' : type"
-        :value="value"
-        :placeholder="_placeholder"
-        autocomplete="off"
-        autocapitalize="off"
-        :data-lpignore="ignorePasswordManagers"
-        @input="onInput($event.target.value)"
-        @focus="onFocus"
-        @blur="onBlur"
-        @change="onChange"
-      >
-    </slot>
-
-    <slot name="suffix" />
-    <LabeledTooltip
-      v-if="hasTooltip && !focused"
-      :hover="hoverTooltip"
-      :value="tooltipValue"
-      :status="status"
-    />
-    <LabeledTooltip
-      v-if="!!validationMessage"
-      :hover="hoverTooltip"
-      :value="validationMessage"
-    />
-    <div
-      v-if="cronHint || subLabel"
-      class="sub-label"
-    >
-      <div
-        v-if="cronHint"
-      >
-        {{ cronHint }}
-      </div>
-      <div
-        v-if="subLabel"
-        v-clean-html="subLabel"
-      />
-    </div>
-  </div>
-</template>
-<style scoped lang="scss">
-.labeled-input.view {
-  input {
-    text-overflow: ellipsis;
-  }
-}
-
-.hideArrows {
-  /* Hide arrows on number input when it overlaps with the unit */
-  /* Chrome, Safari, Edge, Opera */
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Firefox */
-  input[type=number] {
-    -moz-appearance: textfield;
-  }
-}
-</style>
-<style>
-.validation-message {
-  padding: 5px;
-  position: absolute;
-  bottom: -35px;
-}
-</style>

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

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

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

@@ -1,35 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { RadioButton } from './index';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
-
-describe('radioButton.vue', () => {
-  it('renders label slot contents', () => {
-    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' }, propsData: { val: {}, value: {} } });
-
-    expect(wrapper.find('.radio-label').text()).toBe('Test Label');
-  });
-
-  it('renders label prop contents', () => {
-    const wrapper = shallowMount(
-      RadioButton,
-      {
-        directives: { cleanHtmlDirective },
-        propsData:  {
-          label: 'Test Label', val: {}, value: {}
-        }
-      });
-
-    expect(wrapper.find('.radio-label').text()).toBe('Test Label');
-  });
-
-  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', val: {}, value: {}
-      },
-    });
-
-    expect(wrapper.find('.radio-label').text()).toBe('Test Label - Slot');
-  });
-});

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

@@ -1,287 +0,0 @@
-<script lang="ts">
-import Vue from 'vue';
-import { _VIEW } from '@shell/config/query-params';
-
-export default Vue.extend({
-  props: {
-    /**
-     * The name of the input, for grouping.
-     */
-    name: {
-      type:    String,
-      default: ''
-    },
-
-    /**
-     * The value for this option.
-     */
-    val: {
-      required:  true,
-      validator: () => true
-    },
-
-    /**
-     * The selected value.
-     */
-    value: {
-      required:  true,
-      validator: () => true
-    },
-
-    /**
-     * The label shown next to the radio.
-     */
-    label: {
-      type:    String,
-      default: ''
-    },
-
-    /**
-     * Disable the radio.
-     */
-    disabled: {
-      type:    Boolean,
-      default: false
-    },
-
-    /**
-     * The radio editing mode.
-     * @values _EDIT, _VIEW
-     */
-    mode: {
-      type:    String,
-      default: 'edit'
-    },
-
-    /**
-     * The i18n key to use for the radio description.
-     */
-    descriptionKey: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * The radio description.
-     */
-    description: {
-      type:    String,
-      default: null
-    }
-  },
-
-  data() {
-    return { isChecked: this.value === this.val };
-  },
-
-  computed: {
-    /**
-     * Determines if the radio is disabled.
-     */
-    isDisabled(): boolean {
-      return this.mode === _VIEW || this.disabled;
-    },
-
-    /**
-     * Determines if the label for the radio should be muted.
-     */
-    muteLabel(): boolean {
-      // Don't mute the label if the mode is view and the button is checked
-      return this.disabled && !(this.mode === _VIEW && this.isChecked);
-    },
-
-    /**
-     * Determines if the description slot is in use.
-     */
-    hasDescriptionSlot(): boolean {
-      return !!this.$slots.description;
-    },
-
-    hasLabelSlot(): boolean {
-      return !!this.$slots.label || !!this.$scopedSlots.label;
-    }
-  },
-
-  watch: {
-    value(neu) {
-      this.isChecked = this.val === neu;
-      if (this.isChecked) {
-        (this.$refs.custom as HTMLElement).focus();
-      }
-    }
-  },
-
-  methods: {
-    /**
-     * Emits the input event.
-     */
-    clicked({ target }: { target?: HTMLElement }) {
-      if (this.isDisabled || target?.tagName === 'A') {
-        return;
-      }
-
-      this.$emit('input', this.val);
-    }
-  }
-});
-</script>
-
-<template>
-  <label
-    :class="{'disabled': isDisabled, 'radio-container': true}"
-    @keydown.enter="clicked($event)"
-    @keydown.space="clicked($event)"
-    @click.stop="clicked($event)"
-  >
-    <input
-      :id="_uid+'-radio'"
-      :disabled="isDisabled"
-      :name="name"
-      :value="''+val"
-      :checked="isChecked"
-      type="radio"
-      :tabindex="-1"
-      @click.stop.prevent
-    >
-    <span
-      ref="custom"
-      :class="[ isDisabled ? 'text-muted' : '', 'radio-custom']"
-      :tabindex="isDisabled ? -1 : 0"
-      :aria-label="label"
-      :aria-checked="isChecked"
-      role="radio"
-    />
-    <div class="labeling">
-      <label
-        :class="[ muteLabel ? 'text-muted' : '', 'radio-label', 'm-0']"
-        :for="name"
-      >
-        <slot
-          v-if="hasLabelSlot"
-          name="label"
-        >
-          <!-- slot content -->
-        </slot>
-        <span
-          v-else-if="label"
-          v-clean-html="label"
-        />
-      </label>
-      <div
-        v-if="descriptionKey || description"
-        class="radio-button-outer-container-description"
-      >
-        <t
-          v-if="descriptionKey"
-          :k="descriptionKey"
-        />
-        <template v-else-if="description">
-          {{ description }}
-        </template>
-      </div>
-      <div
-        v-else-if="hasDescriptionSlot"
-        class="radio-button-outer-container-description"
-      >
-        <slot name="description" />
-      </div>
-    </div>
-  </label>
-</template>
-
-<style lang='scss'>
-$fontColor: var(--input-label);
-
-.radio-view {
-  display: flex;
-  flex-direction: column;
-  LABEL {
-    color: var(--input-label);
-  }
-}
-
-.radio-group {
-  .text-label {
-    display: block;
-    padding-bottom: 5px;
-  }
-}
-
-.radio-container {
-  position: relative;
-  display: inline-flex;
-  align-items: flex-start;
-  margin: 0;
-  user-select: none;
-  border-radius: var(--border-radius);
-  padding-bottom: 5px;
-
-  &,
-  .radio-label,
-  .radio-button-outer-container-description {
-    cursor: pointer;
-  }
-
-  &.disabled,
-  &.disabled .radio-label,
-  &.disabled .radio-button-outer-container-description {
-    cursor: not-allowed
-  }
-
- .radio-custom {
-    height: 14px;
-    width: 14px;
-    min-height: 14px;
-    min-width: 14px;
-    background-color: var(--input-bg);
-    border-radius: 50%;
-    transition: all 0.3s ease-out;
-    border: 1.5px solid var(--border);
-    margin-top: 5px;
-
-    &:focus {
-      outline: none;
-      border-radius: 50%;
-    }
-  }
-
-  input {
-    display: none;
-  }
-
-  .radio-custom {
-    &[aria-checked="true"] {
-      background-color: var(--primary);
-      -webkit-transform: rotate(0deg) scale(1);
-      -ms-transform: rotate(0deg) scale(1);
-      transform: rotate(0deg) scale(1);
-      opacity:1;
-      border: 1.5px solid var(--primary);
-
-      // Ensure that checked radio buttons are muted but still visibly selected when muted
-      &.text-muted {
-        opacity: .25;
-      }
-    }
-  }
-
-  input:disabled ~ .radio-custom:not([aria-checked="true"]) {
-    background-color: var(--disabled-bg);
-    opacity: .25;
-  }
-
-  .radio-button-outer-container-description {
-    color: $fontColor;
-    font-size: 11px;
-    margin-top: 5px;
-  }
-
-  .labeling {
-    display: inline-flex;
-    flex-direction: column;
-
-    margin: 3px 10px 0px 5px;
-  }
-}
-
-</style>

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

@@ -1,30 +0,0 @@
-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);
-    });
-  });
-});