@rancher/shell 0.1.0 → 0.1.1

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

@@ -1,50 +1,73 @@
-<script>
+<script lang="ts">
+import Vue from 'vue';
 import { _VIEW } from '@shell/config/query-params';
-export default {
+
+export default Vue.extend({
   props: {
-    // The name of the input, for grouping
+    /**
+     * The name of the input, for grouping.
+     */
     name: {
       type:    String,
       default: ''
     },
 
-    // The value for this option
+    /** 
+     * The value for this option.
+     */ 
     val: {
       required:  true,
-      validator: x => true,
+      validator: x => true
     },
 
-    // The selected value...
+    /** 
+     * The selected value.
+     */ 
     value: {
       required:  true,
-      validator: x => true,
+      validator: x => true
     },
 
-    // The label shown next to the radio
+    /**
+     * 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',
+      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() {
@@ -52,11 +75,17 @@ export default {
   },
 
   computed: {
-    isDisabled() {
+    /**
+     * Determines if the radio is disabled.
+     */
+    isDisabled(): boolean {
       return this.mode === _VIEW || this.disabled;
     },
 
-    muteLabel() {
+    /**
+     * 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);
     }
@@ -65,26 +94,25 @@ export default {
   watch: {
     value(neu) {
       this.isChecked = this.val === neu;
-      if ( this.isChecked ) {
-        this.$refs.custom.focus();
+      if (this.isChecked) {
+        (this.$refs.custom as HTMLElement).focus();
       }
     }
   },
 
   methods: {
-    clicked(e) {
-      if (this.isDisabled) {
-        return;
-      }
-
-      if (e.srcElement?.tagName === 'A') {
+    /**
+     * Emits the input event.
+     */
+    clicked({ target }: { target?: HTMLElement }) {
+      if (this.isDisabled || target?.tagName === 'A') {
         return;
       }
 
       this.$emit('input', this.val);
-    },
+    }
   }
-};
+});
 </script>
 
 <template>

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

@@ -1,65 +1,101 @@
-<script>
-import RadioButton from '@shell/components/form/RadioButton';
+<script lang="ts">
+import Vue, { PropType } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
+import RadioButton from '@components/Form/Radio/RadioButton.vue';
 
-export default {
+interface Option {
+  value: unknown,
+  label: string
+}
+
+export default Vue.extend({
   components: { RadioButton },
   props:      {
-    // Name for the checkbox grouping, must be unique on page
+    /**
+     * Name for the checkbox grouping, must be unique on page.
+     */
     name: {
       type:     String,
-      required: true,
+      required: true
     },
 
-    // Options can be an array of {label, value}, or just values
+    /**
+     * Options can be an array of {label, value}, or just values.
+     */
     options: {
-      type:     Array,
+      type:     Array as PropType<Option[] | string[]>,
       required: true
     },
 
-    // If options are just values, then labels can be a corresponding display value
+    /**
+     * If options are just values, then labels can be a corresponding display 
+     * value.
+     */
     labels: {
-      type:    Array,
-      default: null,
+      type:    Array as PropType<string[]>,
+      default: null
     },
 
-    // The selected value
+    /**
+     * 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 for above the radios.
+     */
     label: {
       type:    String,
       default: null
     },
+
+    /**
+     * The i18n key to use for the radio group label.
+     */
     labelKey: {
       type:    String,
       default: null
     },
 
-    // Label for above the radios
+    /**
+     * 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
+    /**
+     * Show radio buttons in column or row.
+     */
     row: {
       type:    Boolean,
       default: false
@@ -67,18 +103,21 @@ export default {
   },
 
   computed: {
-    normalizedOptions() {
-      const out = [];
+    /**
+     * Creates a collection of Options from the provided props.
+     */
+    normalizedOptions(): Option[] {
+      const out: Option[] = [];
 
-      for ( let i = 0 ; i < this.options.length ; i++ ) {
+      for (let i = 0; i < this.options.length; i++) {
         const opt = this.options[i];
 
-        if ( typeof opt === 'object' && opt ) {
+        if (typeof opt === 'object' && opt) {
           out.push(opt);
-        } else if ( this.labels ) {
+        } else if (this.labels) {
           out.push({
             label: this.labels[i],
-            value: opt,
+            value: opt
           });
         } else {
           out.push({
@@ -91,32 +130,41 @@ export default {
       return out;
     },
 
-    isView() {
+    /**
+     * Determines the view mode for the radio group.
+     */
+    isView(): boolean {
       return this.mode === _VIEW;
     },
 
-    isDisabled() {
+    /**
+     * 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
-    clickNext(direction) {
+    /**
+     * 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;
+      let newIndex = (selected ? opts.indexOf(selected) : -1) + direction;
 
-      if ( newIndex >= opts.length ) {
+      if (newIndex >= opts.length) {
         newIndex = opts.length - 1;
-      } else if ( newIndex < 0 ) {
+      } else if (newIndex < 0) {
         newIndex = 0;
       }
 
       this.$emit('input', opts[newIndex].value);
     }
   }
-};
+});
 </script>
 
 <template>

package/rancher-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/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/Form/TextArea/index.ts

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

package/rancher-components/Form/index.ts

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

package/{components/form → rancher-components/LabeledTooltip}/LabeledTooltip.vue

@@ -1,31 +1,48 @@
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
   props: {
+    /**
+     * The Labeled Tooltip value.
+     */
     value: {
       type:    [String, Object],
       default: null
     },
 
+    /**
+     * The status for the Labeled Tooltip. Controls the Labeled Tooltip class.
+     * @values info, success, warning, error
+     */
     status: {
       type:    String,
       default: 'error'
     },
 
+    /**
+     * Displays the Labeled Tooltip on mouse hover.
+     */
     hover: {
       type:    Boolean,
       default: true
     }
   },
-};
+  computed: {
+    iconClass() {
+      return this.status === 'error' ? 'icon-warning' : 'icon-info';
+    }
+  }
+});
 </script>
 
 <template>
   <div ref="container" class="labeled-tooltip" :class="{[status]: true, hoverable: hover}">
     <template v-if="hover">
-      <i v-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value" :class="{'hover':!value}" class="icon icon-info status-icon" />
+      <i v-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value" :class="{'hover':!value, [iconClass]: true}" class="icon status-icon" />
     </template>
     <template v-else>
-      <i :class="{'hover':!value}" class="icon icon-info status-icon" />
+      <i :class="{'hover':!value}" class="icon status-icon" />
       <div v-if="value" class="tooltip" x-placement="bottom">
         <div class="tooltip-arrow" />
         <div class="tooltip-inner">
@@ -49,12 +66,11 @@ export default {
     }
 
      .status-icon {
-         position:  absolute;
-         right: 30px;
-         top: $input-padding-lg;
-         font-size: 20px;
-         z-index: z-index(hoverOverContent);
-
+        position:  absolute;
+        right: 30px;
+        top: $input-padding-lg;
+        font-size: 20px;
+        z-index: z-index(hoverOverContent);
      }
 
     .tooltip {
@@ -93,6 +109,11 @@ export default {
 
     &.error {
         @include tooltipColors(var(--error));
+
+        .status-icon {
+          top: 7px;
+          right: 5px;
+        }
     }
 
     &.warning {

package/rancher-components/LabeledTooltip/index.ts

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

package/scripts/build-pkg.sh

@@ -3,6 +3,7 @@
 SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 BASE_DIR="$( cd $SCRIPT_DIR && cd ../.. & pwd)"
 SHELL_DIR=$BASE_DIR/shell/
+EXIT_CODE=0
 
 # Use shell folder in node modules when we have @rancher/shell installed as a node module
 # rather than the use-case of the mono-repo with the shell folder at the top-level
@@ -42,6 +43,7 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
   fi
 
   ${BASE_DIR}/node_modules/.bin/vue-cli-service build --name ${NAME} --target lib ${FILE} --dest ${PKG_DIST} --formats umd-min --filename ${NAME}
+  EXIT_CODE=$?
   cp -f ./package.json ${PKG_DIST}/package.json
   node ${SCRIPT_DIR}/pkgfile.js ${PKG_DIST}/package.json
   rm -rf ${PKG_DIST}/*.bak
@@ -49,3 +51,5 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
 
   popd  
 fi
+
+exit $EXIT_CODE