@rancher/shell 0.2.4 → 0.3.0

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

@@ -0,0 +1,355 @@
+<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 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"
+      >
+    </slot>
+
+    <slot name="suffix" />
+    <LabeledTooltip
+      v-if="hasTooltip && !focused"
+      :hover="hoverTooltip"
+      :value="tooltipValue"
+      :status="status"
+    />
+    <LabeledTooltip
+      v-if="!!validationMessage"
+      :hover="hoverTooltip"
+      :value="validationMessage"
+    />
+    <label
+      v-if="cronHint"
+      class="cron-label"
+    >{{ cronHint }}</label>
+    <label
+      v-if="subLabel"
+      class="sub-label"
+    >{{ subLabel }}</label>
+  </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

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

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

@@ -0,0 +1,276 @@
+<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: x => true
+    },
+
+    /**
+     * The selected value.
+     */
+    value: {
+      required:  true,
+      validator: x => 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;
+    },
+  },
+
+  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
+        v-if="label"
+        :class="[ muteLabel ? 'text-muted' : '', 'radio-label', 'm-0']"
+        :for="name"
+        v-html="label"
+      >
+        <slot name="label">{{ label }}</slot>
+      </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>