@rancher/shell 0.1.0 → 0.1.1

package/components/form/LabeledInput.vue

@@ -1,245 +0,0 @@
-<script>
-import CompactInput from '@shell/mixins/compact-input';
-import LabeledFormElement from '@shell/mixins/labeled-form-element';
-import TextAreaAutoGrow from '@shell/components/form/TextAreaAutoGrow';
-import LabeledTooltip from '@shell/components/form/LabeledTooltip';
-import { escapeHtml } from '@shell/utils/string';
-import cronstrue from 'cronstrue';
-import { isValidCron } from 'cron-validator';
-import { debounce } from 'lodash';
-
-export default {
-  components: { LabeledTooltip, TextAreaAutoGrow },
-  mixins:     [LabeledFormElement, CompactInput],
-
-  props: {
-    type: {
-      type:    String,
-      default: 'text',
-    },
-
-    status: {
-      type:    String,
-      default: null,
-    },
-
-    subLabel: {
-      type:    String,
-      default: null,
-    },
-
-    tooltip: {
-      default: null,
-      type:    [String, Object],
-    },
-
-    hoverTooltip: {
-      type:    Boolean,
-      default: true,
-    },
-
-    ignorePasswordManagers: {
-      default: false,
-      type:    Boolean,
-    },
-
-    maxlength: {
-      type:    Number,
-      default: null,
-    },
-
-    hideArrows: {
-      type:    Boolean,
-      default: false
-    },
-
-    /**
-     * Optionally delay on input while typing
-     */
-    delay: {
-      type:    Number,
-      default: 0
-    }
-  },
-
-  data() {
-    return {
-      updated:          false,
-      validationErrors: '',
-    };
-  },
-
-  computed: {
-    onInput() {
-      return this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
-    },
-
-    hasLabel() {
-      return this.isCompact ? false : !!this.label || !!this.labelKey || !!this.$slots.label;
-    },
-
-    hasTooltip() {
-      return !!this.tooltip || !!this.tooltipKey;
-    },
-
-    hasSuffix() {
-      return !!this.$slots.suffix;
-    },
-
-    cronHint() {
-      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');
-      }
-    },
-
-    _placeholder() {
-      if (this.placeholder) {
-        return this.placeholder;
-      }
-      if (this.placeholderKey) {
-        return this.t(this.placeholderKey);
-      }
-
-      return '';
-    },
-
-    _maxlength() {
-      if (this.type === 'text' && this.maxlength) {
-        return this.maxlength;
-      }
-
-      return null;
-    },
-  },
-
-  methods: {
-    focus() {
-      const comp = this.$refs.value;
-
-      if (comp) {
-        comp.focus();
-      }
-    },
-
-    select() {
-      const comp = this.$refs.value;
-
-      if (comp) {
-        comp.select();
-      }
-    },
-
-    /**
-     * Emit on input with delay
-     * Note: Arrow function is avoided due context binding
-     */
-    delayInput(value) {
-      this.$emit('input', value);
-    },
-
-    onFocus() {
-      this.onFocusLabeled();
-    },
-
-    onBlur() {
-      this.$emit('blur');
-      this.onBlurLabeled();
-    },
-
-    escapeHtml,
-  },
-};
-</script>
-
-<template>
-  <div
-    class="labeled-input"
-    :class="{
-      focused,
-      [mode]: true,
-      disabled: isDisabled,
-      [status]: status,
-      suffix: hasSuffix,
-    }"
-  >
-    <slot name="label">
-      <label>
-        <t v-if="labelKey" :k="labelKey" />
-        <template v-else-if="label">{{ label }}</template>
-
-        <span v-if="required" 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="tooltipKey && !focused"
-      :hover="hoverTooltip"
-      :value="t(tooltipKey)"
-      :status="status"
-    />
-    <LabeledTooltip
-      v-else-if="tooltip && !focused"
-      :hover="hoverTooltip"
-      :value="tooltip"
-      :status="status"
-    />
-    <label v-if="cronHint" class="cron-label">{{ cronHint }}</label>
-    <label v-if="subLabel" class="sub-label">{{ subLabel }}</label>
-  </div>
-  </div>
-</template>
-
-<style>
-.validation-message {
-  padding: 5px;
-  position: absolute;
-  bottom: -35px;
-}
-</style>

package/components/form/Scheduling.vue

@@ -1,115 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { isEmpty, get } from '@shell/utils/object';
-import Tolerations from '@shell/components/form/Tolerations';
-import LabeledInput from '@shell/components/form/LabeledInput';
-import { _VIEW } from '@shell/config/query-params';
-import PodScheduling from '@shell/components/form/PodScheduling';
-import NodeScheduling from '@shell/components/form/NodeScheduling';
-
-export default {
-  components: {
-    Tolerations,
-    LabeledInput,
-    PodScheduling,
-    NodeScheduling
-  },
-
-  props:      {
-    value: {
-      type:     Object,
-      required: true
-    },
-    nodes: {
-      type:    Array,
-      default: () => []
-    },
-    mode: { type: String, default: 'edit' },
-  },
-
-  computed: {
-    isView() {
-      return this.mode === _VIEW;
-    },
-
-    // hide affinity/anti-affinity sections on view mode if no selectors are defined
-    hasPodAffinity() {
-      const hasRequired = !!(get(this.podAffinity, 'requiredDuringSchedulingIgnoredDuringExecution') || []).length;
-      const hasPrefered = !!(get(this.podAffinity, 'preferredDuringSchedulingIgnoredDuringExecution') || []).length;
-
-      return (hasRequired || hasPrefered);
-    },
-
-    hasPodAntiAffinity() {
-      const hasRequired = !!(get(this.podAntiAffinity, 'requiredDuringSchedulingIgnoredDuringExecution') || []).length;
-      const hasPrefered = !!(get(this.podAntiAffinity, 'preferredDuringSchedulingIgnoredDuringExecution') || []).length;
-
-      return (hasRequired || hasPrefered);
-    },
-
-    hasPodScheduling() {
-      return this.hasPodAffinity || this.hasPodAntiAffinity;
-    },
-
-    ...mapGetters({ t: 'i18n/t' })
-  },
-
-  methods: { isEmpty },
-};
-
-</script>
-
-<template>
-  <div>
-    <NodeScheduling :value="value" :mode="mode" :nodes="nodes" />
-
-    <div>
-      <h3 class="mb-10">
-        <t k="workload.scheduling.titles.podScheduling" />
-      </h3>
-
-      <template v-if="!isView || hasPodScheduling">
-        <PodScheduling :value="value" :mode="mode" />
-      </template>
-
-      <template v-else>
-        <div class="row">
-          <t k="workload.scheduling.affinity.noPodRules" />
-        </div>
-      </template>
-    </div>
-    <div class="spacer"></div>
-
-    <div>
-      <h3 class="mb-10">
-        <t k="workload.scheduling.titles.tolerations" />
-      </h3>
-      <div class="row">
-        <Tolerations v-model="value.tolerations" :mode="mode" />
-      </div>
-    </div>
-    <div class="spacer"></div>
-
-    <div>
-      <div class="spacer"></div>
-      <h3 class="mb-10">
-        <t k="workload.scheduling.titles.priority" />
-      </h3>
-      <div class="row">
-        <div class="col span-6">
-          <LabeledInput v-model.number="value.priority" :mode="mode" :label="t('workload.scheduling.priority.priority')" />
-        </div>
-
-        <div class="col span-6">
-          <LabeledInput v-model="value.priorityClassname" :mode="mode" :label="t('workload.scheduling.priority.className')" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='scss' >
-  .label-tip {
-    z-index: z-index('overContent')+1 !important;
-  }
-</style>

package/components/form/TextAreaAutoGrow.vue

@@ -1,127 +0,0 @@
-<script>
-import $ from 'jquery';
-import debounce from 'lodash/debounce';
-import { _EDIT, _VIEW } from '@shell/config/query-params';
-
-export default {
-  inheritAttrs: false,
-
-  props: {
-    mode: {
-      type:    String,
-      default: _EDIT
-    },
-
-    minHeight: {
-      type:    Number,
-      default: 25,
-    },
-    maxHeight: {
-      type:    Number,
-      default: 200,
-    },
-    placeholder: {
-      type:    String,
-      default: '',
-    },
-    spellcheck: {
-      type:    Boolean,
-      default: true
-    },
-
-    disabled: {
-      type:    Boolean,
-      default: false,
-    }
-  },
-
-  data() {
-    return {
-      curHeight: this.minHeight,
-      overflow:  'hidden',
-    };
-  },
-
-  computed: {
-    isDisabled() {
-      return this.disabled || this.mode === _VIEW;
-    },
-
-    style() {
-      // This sets the height to one-line for SSR pageload so that it's already right
-      // (unless the input is long)
-      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).css('height', `${ this.curHeight }px`);
-    this.$nextTick(() => {
-      this.autoSize();
-    });
-  },
-
-  methods: {
-    onInput(val) {
-      this.$emit('input', val);
-      this.queueResize();
-    },
-
-    focus() {
-      this.$refs.ta.focus();
-    },
-
-    autoSize() {
-      const el = this.$refs.ta;
-
-      if ( !el ) {
-        return;
-      }
-
-      const $el = $(el);
-
-      $el.css('height', '1px');
-
-      const border = parseInt($el.css('borderTopWidth'), 10) || 0 + parseInt($el.css('borderBottomWidth'), 10) || 0;
-      const neu = Math.max(this.minHeight, Math.min(el.scrollHeight + border, this.maxHeight));
-
-      $el.css('overflowY', (el.scrollHeight > neu ? 'auto' : 'hidden'));
-      $el.css('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>
-
-<style lang='scss' scoped>
-</style>

package/mixins/labeled-form-element.js

@@ -1,137 +0,0 @@
-import { _EDIT, _VIEW } from '@shell/config/query-params';
-import $ from 'jquery';
-
-export default {
-  inheritAttrs: false,
-
-  props: {
-    mode: {
-      type:    String,
-      default: _EDIT,
-    },
-
-    label: {
-      type:     String,
-      default: null
-    },
-
-    labelKey: {
-      type:     String,
-      default: null
-    },
-
-    placeholderKey: {
-      type:     String,
-      default: null
-    },
-
-    tooltip: {
-      type:    [String, Object],
-      default: null
-    },
-
-    hoverTooltip: {
-      type:    Boolean,
-      default: true,
-    },
-
-    tooltipKey: {
-      type:     String,
-      default: null
-    },
-
-    required: {
-      type:    Boolean,
-      default: false,
-    },
-
-    disabled: {
-      type:    Boolean,
-      default: false,
-    },
-
-    placeholder: {
-      type:    [String, Number],
-      default: ''
-    },
-
-    value: {
-      type:    [String, Number, Object],
-      default: ''
-    },
-  },
-
-  data() {
-    return {
-      raised:  this.mode === _VIEW || !!`${ this.value }`,
-      focused: false,
-      blurred: null,
-    };
-  },
-
-  computed: {
-    empty() {
-      return !!`${ this.value }`;
-    },
-
-    isView() {
-      return this.mode === _VIEW;
-    },
-
-    isDisabled() {
-      return this.disabled || this.isView;
-    },
-
-    isSearchable() {
-      const { searchable } = this;
-      const options = ( this.options || [] );
-
-      if (searchable || options.length >= 10) {
-        return true;
-      }
-
-      return false;
-    },
-  },
-
-  methods: {
-    resizeHandler(e) {
-      // since the DD is positioned there is no way to 'inherit' the size of the input, this calcs the size of the parent and set the dd width if it is smaller. If not let it grow with the regular styles
-      this.$nextTick(() => {
-        const DD = $(this.$refs.select).find('ul.vs__dropdown-menu');
-        const selectWidth = $(this.$refs.select).width();
-        const dropWidth = DD.width();
-
-        if (dropWidth < selectWidth) {
-          DD.width(selectWidth);
-        }
-      });
-    },
-    onFocus() {
-      this.$emit('on-focus');
-
-      return this.onFocusLabeled();
-    },
-
-    onFocusLabeled() {
-      this.raised = true;
-      this.focused = true;
-    },
-
-    onBlur() {
-      this.$emit('on-blur');
-
-      return this.onBlurLabeled();
-    },
-
-    onBlurLabeled() {
-      this.focused = false;
-
-      if ( !this.value ) {
-        this.raised = false;
-      }
-
-      this.blurred = Date.now();
-    }
-  }
-};