@rancher/shell 0.1.0 → 0.1.1

package/{components/form → rancher-components/Form/Checkbox}/Checkbox.vue

@@ -1,78 +1,144 @@
-<script>
-import $ from 'jquery';
+<script lang="ts">
+import Vue, { PropType } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 
-export default {
+export default Vue.extend({
   props: {
+    /**
+     * The checkbox value.
+     */
     value: {
-      type:    [Boolean, Array],
+      type:    [Boolean, Array] as PropType<boolean | boolean[]>,
       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,
+      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:    null,
+      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: {
-    isDisabled() {
-      return (this.disabled || this.mode === _VIEW );
+    /**
+     * 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);
     },
-    isChecked() {
-      return this.isMulti() ? this.value.find(v => v === this.valueWhenTrue) : this.value === this.valueWhenTrue;
+    /**
+     * 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: {
-    clicked(event) {
-      if ( event.target.tagName === 'A' && event.target.href ) {
+    /**
+     * 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;
       }
@@ -84,15 +150,19 @@ export default {
         return;
       }
 
-      const click = $.Event('click');
+      const customEvent = {
+        bubbles:    true,
+        cancelable: false,
+        shiftKey:   event.shiftKey,
+        altKey:     event.altKey,
+        ctrlKey:    event.ctrlKey,
+        metaKey:    event.metaKey
+      };
 
-      click.shiftKey = event.shiftKey;
-      click.altKey = event.altKey;
-      click.ctrlKey = event.ctrlKey;
-      click.metaKey = event.metaKey;
+      const click = new CustomEvent('click', customEvent);
 
       // Flip the value
-      if (this.isMulti()) {
+      if (this.isMulti(this.value)) {
         if (this.isChecked) {
           removeObject(this.value, this.valueWhenTrue);
         } else {
@@ -101,15 +171,26 @@ export default {
         this.$emit('input', this.value);
       } else {
         this.$emit('input', !this.value);
-        $(this.$el).trigger(click);
+        this.$el.dispatchEvent(click);
       }
     },
 
-    isMulti() {
-      return Array.isArray(this.value);
+    /**
+     * Determines if there are multiple values for the checkbox.
+     */
+    isMulti(value: boolean | boolean[]): value is boolean[] {
+      return Array.isArray(value);
+    },
+
+    /**
+     * 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>
@@ -117,6 +198,7 @@ export default {
     <label
       class="checkbox-container"
       :class="{ 'disabled': isDisabled}"
+      :for="id"
       @keydown.enter.prevent="clicked($event)"
       @keydown.space.prevent="clicked($event)"
       @click="clicked($event)"
@@ -127,6 +209,7 @@ export default {
         :value="valueWhenTrue"
         type="checkbox"
         :tabindex="-1"
+        :name="id"
         @click.stop.prevent
       />
       <span
@@ -140,6 +223,7 @@ export default {
       <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" />
@@ -166,9 +250,10 @@ $fontColor: var(--input-label);
   flex-direction: column;
   &-description {
     color: $fontColor;
-    font-size: 11px;
-    margin-left: 20px;
+    font-size: 14px;
+    margin-left: 19px;
     margin-top: 5px;
+    opacity: 0.8;
   }
 }
 
@@ -186,6 +271,11 @@ $fontColor: var(--input-label);
     color: var(--input-label);
     display: inline-flex;
     margin: 0px 10px 0px 5px;
+
+    &.checkbox-primary {
+      color: inherit;
+      font-weight: 600;
+    }
   }
 
   .checkbox-info {
@@ -203,7 +293,10 @@ $fontColor: var(--input-label);
   }
 
   input {
-    display: none;
+    // display: none;
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
   }
 
   input:checked ~ .checkbox-custom {

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

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

package/{components/form/__tests__ → rancher-components/Form/LabeledInput}/LabeledInput.test.ts

@@ -1,12 +1,23 @@
 
 import { mount } from '@vue/test-utils';
-import LabeledInput from '@shell/components/form/LabeledInput.vue';
+import { LabeledInput } from './index';
+import Vue from 'vue';
+import Vuex from 'vuex';
 
 describe('component: LabeledInput', () => {
   it('should emit input only once', () => {
     const value = '2';
     const delay = 1;
-    const wrapper = mount(LabeledInput, { propsData: { delay } });
+    const wrapper = mount(LabeledInput, { 
+      propsData: { delay },
+      mocks:      {
+        $store: {
+          getters: {
+            'i18n/t': jest.fn()
+          }
+        }
+      }
+    });
 
     jest.useFakeTimers();
     wrapper.find('input').setValue('1');

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

@@ -0,0 +1,341 @@
+<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
+      }
+    },
+
+    /**
+     * 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/Form/LabeledInput/index.ts

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