@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/cv-number-input/cv-number-input.vue

@@ -1,215 +0,0 @@
-<template>
-  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-number-input" :class="`${carbonPrefix}--form-item`">
-    <div
-      :class="[
-        `${carbonPrefix}--number`,
-        {
-          [`${carbonPrefix}--number--light`]: isLight,
-          [`${carbonPrefix}--number--helpertext`]: isHelper,
-          [`cv-number-input`]: !formItem,
-          [`${carbonPrefix}--number--mobile`]: mobile,
-        },
-      ]"
-      :data-invalid="isInvalid"
-    >
-      <label v-show="label" :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
-      <div
-        :class="[
-          `${carbonPrefix}--number__input-wrapper`,
-          { [`${carbonPrefix}--number__input-wrapper--warning`]: isWarn },
-        ]"
-      >
-        <input
-          :data-invalid="isInvalid"
-          :id="uid"
-          type="number"
-          :value="internalValue"
-          v-bind="$attrs"
-          v-on="inputListeners"
-          :disabled="disabled"
-          :step="step"
-          :min="min"
-          :max="max"
-          ref="input"
-        />
-        <WarningFilled16 v-if="isInvalid" :class="iconClasses" />
-        <WarningAltFilled16 v-if="isWarn && !isInvalid" :class="iconClasses" />
-        <div :class="`${carbonPrefix}--number__controls`">
-          <button
-            :class="`${carbonPrefix}--number__control-btn down-icon`"
-            @click="doDown"
-            type="button"
-            :aria-label="ariaLabelForDownButton"
-            :disabled="disabled"
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            <Subtract16 class="down-icon" />
-          </button>
-          <div :class="`${carbonPrefix}--number__rule-divider`" />
-          <button
-            :class="`${carbonPrefix}--number__control-btn up-icon`"
-            @click="doUp"
-            type="button"
-            :aria-label="ariaLabelForUpButton"
-            :disabled="disabled"
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            <Add16 class="up-icon" />
-          </button>
-          <div :class="`${carbonPrefix}--number__rule-divider`" />
-        </div>
-      </div>
-      <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
-        <slot name="invalid-message">{{ invalidMessage }}</slot>
-      </div>
-      <div :class="`${carbonPrefix}--form-requirement`" v-if="isWarn && !isInvalid">
-        <slot name="warn-text">{{ warnText }}</slot>
-      </div>
-      <div :class="`${carbonPrefix}--form__helper-text`" v-if="!(isInvalid || isWarn) && isHelper">
-        <slot name="helper-text">{{ helperText }}</slot>
-      </div>
-    </div>
-  </cv-wrapper>
-</template>
-
-<script>
-import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-import Add16 from '@carbon/icons-vue/es/add/16';
-import Subtract16 from '@carbon/icons-vue/es/subtract/16';
-import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons-vue/es/warning--alt--filled/16';
-import CvWrapper from '../cv-wrapper/_cv-wrapper';
-
-export default {
-  name: 'CvNumberInput',
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  components: { Add16, Subtract16, WarningFilled16, WarningAltFilled16, CvWrapper },
-  inheritAttrs: false,
-  props: {
-    disabled: Boolean,
-    formItem: { type: Boolean, default: true },
-    helperText: { type: String, default: undefined },
-    invalidMessage: { type: String, default: undefined },
-    label: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    invalid: /* deprecate */ {
-      type: Boolean,
-      default: undefined,
-      deprecated: true,
-      validator(val) {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('CvNumberInput: invalid prop deprecated in favour of invalidMessage');
-        }
-        return true;
-      },
-    },
-    ariaLabelForUpButton: { type: String, default: 'Increase number input' },
-    ariaLabelForDownButton: { type: String, default: 'Decrease number input' },
-    min: { type: [String, Number], default: undefined },
-    max: { type: [String, Number], default: undefined },
-    step: { type: [String, Number], default: undefined },
-    mobile: /* deprecate */ {
-      type: Boolean,
-      default: undefined,
-      deprecated: true,
-      validator(val) {
-        if (val !== undefined) {
-          console.warn('CvNumberInput: mobile prop deprecated as no longer different to standard number input.');
-        }
-        return true;
-      },
-    },
-    warnText: { type: String, default: undefined },
-  },
-  data() {
-    return {
-      internalValue: 0,
-      isHelper: false,
-      isInvalid: false,
-      isWarn: false,
-    };
-  },
-  mounted() {
-    this.internalValue = this.valueAsString(this.value);
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  watch: {
-    value() {
-      // NOTE: DELIBERATE USE OF != TO COMPARE this.interanlValue and this.value
-      if (typeof this.value !== 'number' || this.internalValue != this.value) {
-        // prevents this.value of 1 updating this.internalValue of 1.0
-        // which improves the typing experience
-        // does not matter if this.value is string or number
-        this.internalValue = this.valueAsString(this.value);
-      }
-    },
-  },
-  computed: {
-    // Bind listeners at the component level to the embedded input element and
-    // add our own input listener to service the v-model. See:
-    // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
-    inputListeners() {
-      return Object.assign({}, this.$listeners, {
-        input: ev => this.onInput(ev.target.value),
-      });
-    },
-    iconClasses() {
-      const classes = [];
-      (this.isInvalid || this.isWarn) && classes.push(`${this.carbonPrefix}--number__invalid`);
-      this.isWarn && !this.isInvalid && classes.push(`${this.carbonPrefix}--number__invalid--warning`);
-      this.readOnly && classes.push(`${this.carbonPrefix}--number__readonly-icon`);
-
-      return classes.join(' ');
-    },
-  },
-  methods: {
-    onInput(val) {
-      this.internalValue = val;
-      this.emitValue();
-    },
-    checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on updated
-      this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
-      this.isWarn = !!(this.$slots['warn-text'] || (this.warnText && this.warnText.length));
-      this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
-    },
-    doUp() {
-      this.$refs.input.stepUp();
-      this.onInput(this.$refs.input.value);
-    },
-    doDown() {
-      this.$refs.input.stepDown();
-      this.onInput(this.$refs.input.value);
-    },
-    emitValue() {
-      if (typeof this.value === 'number') {
-        if (this.internalValue != this.value) {
-          const ePos = this.internalValue.indexOf('e-');
-          const dotPos = this.internalValue.indexOf('.');
-          if (ePos > -1 || dotPos > -1) {
-            this.$emit('input', parseFloat(this.internalValue));
-          } else {
-            this.$emit('input', parseInt(this.internalValue));
-          }
-        }
-      } else {
-        this.$emit('input', this.internalValue);
-      }
-    },
-    valueAsString(val) {
-      let strVal;
-      if (typeof val === 'number') {
-        strVal = Number.isFinite(val) ? val.toString() : '';
-      } else {
-        strVal = val;
-      }
-      return strVal;
-    },
-  },
-};
-</script>

package/src/components/cv-number-input/index.js

@@ -1,3 +0,0 @@
-import CvNumberInput from './cv-number-input';
-import CvNumberInputSkeleton from './cv-number-input-skeleton';
-export { CvNumberInput, CvNumberInputSkeleton };

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -1,253 +0,0 @@
-<template>
-  <div data-overflow-menu :class="`cv-overflow-menu ${carbonPrefix}--overflow-menu`" :id="uid">
-    <button
-      :class="[
-        `${carbonPrefix}--overflow-menu__trigger ${carbonPrefix}--tooltip__trigger`,
-        `${carbonPrefix}--tooltip--a11y`,
-        {
-          [`${this.carbonPrefix}--tooltip--${tipPosition}`]: label,
-          [`${this.carbonPrefix}--tooltip--align-${tipAlignment}`]: label,
-          [`${carbonPrefix}--overflow-menu--open`]: open,
-        },
-      ]"
-      aria-haspopup
-      type="button"
-      :aria-expanded="open ? 'true' : 'false'"
-      :aria-controls="`${uid}-menu`"
-      :aria-labelledby="`${uid}`"
-      :aria-label="ariaLabel"
-      :id="`${uid}-trigger`"
-      ref="trigger"
-      @click="doToggle"
-      @keydown.space.prevent
-      @keyup.space.prevent="doToggle"
-      @keydown.enter.prevent="doToggle"
-      @keydown.tab="onOverflowMenuTab"
-    >
-      <span :class="`${carbonPrefix}--assistive-text`" v-if="label">{{ label }}</span>
-
-      <slot name="trigger">
-        <OverflowMenuVertical16 :class="`${carbonPrefix}--overflow-menu__icon`" />
-      </slot>
-    </button>
-    <div
-      :class="[
-        `${carbonPrefix}--overflow-menu-options`,
-        {
-          [`${carbonPrefix}--overflow-menu--flip`]: flipMenu,
-          [`${carbonPrefix}--overflow-menu-options--open`]: open,
-        },
-      ]"
-      tabindex="-1"
-      ref="popup"
-      :aria-labelledby="`${uid}-trigger`"
-      :id="`${uid}-menu`"
-      :style="{ left: left + 'px', top: top + 'px' }"
-      @focusout="checkFocusOut"
-      @mousedown.prevent="preventFocusOut"
-    >
-      <div
-        class="cv-overflow-menu__before-content"
-        ref="beforeContent"
-        tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
-        @focus="focusBeforeContent"
-      />
-      <ul :class="`${carbonPrefix}--overflow-menu-options__content`">
-        <slot></slot>
-      </ul>
-      <div
-        class="cv-overflow-menu__after-content"
-        ref="afterContent"
-        tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
-        @focus="focusAfterContent"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import OverflowMenuVertical16 from '@carbon/icons-vue/es/overflow-menu--vertical/16';
-import { uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-
-export default {
-  name: 'CvOverflowMenu',
-  components: { OverflowMenuVertical16 },
-  mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ trigger: ['blur', 'focus'] })],
-  props: {
-    label: String,
-    ariaLabel: String,
-    flipMenu: Boolean,
-    up: Boolean,
-    offset: {
-      type: Object,
-      validator(value) {
-        return value && value.left !== undefined && value.top !== undefined;
-        // value.hasOwnProperty('left') && value.hasOwnProperty('top');
-      },
-    },
-    tipPosition: {
-      type: String,
-      default: 'right',
-      validator: val => ['top', 'left', 'bottom', 'right'].includes(val),
-    },
-    tipAlignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
-  },
-  data() {
-    return {
-      open: false,
-      left: -9999, // offscreen,
-      top: 0,
-    };
-  },
-  computed: {
-    offsetLeft() {
-      return this.offset ? this.offset.left : 0;
-    },
-    offsetTop() {
-      return this.offset ? this.offset.top : 0;
-    },
-  },
-  created() {
-    this.$on('cv:close', this.doClose);
-    this.$on('cv:click', this.menuItemclick);
-  },
-  methods: {
-    checkFocusOut(ev) {
-      if (this.open) {
-        if (
-          ev.relatedTarget === null ||
-          !(this.$refs.trigger === ev.relatedTarget || this.$refs.popup.contains(ev.relatedTarget))
-        ) {
-          this.open = false;
-          this.positionListen(false);
-
-          // DO NOT FOCUS if relatedTarget is not null, as focus is going somewhere
-          if (!ev.relatedTarget) {
-            this.$nextTick(() => {
-              this.doFocus();
-            });
-          }
-        }
-      }
-    },
-    menuItemclick() {
-      this.open = false;
-      this.positionListen(false);
-      this.$nextTick(() => {
-        this.doFocus();
-      });
-    },
-    doClose() {
-      this.open = false;
-      this.positionListen(false);
-    },
-    positionListen(on) {
-      if (on) {
-        window.addEventListener('scroll', this.positionMenu);
-        window.addEventListener('resize', this.positionMenu);
-      } else {
-        window.removeEventListener('scroll', this.positionMenu);
-        window.removeEventListener('resize', this.positionMenu);
-      }
-    },
-    async positionMenu() {
-      if (this.open) {
-        const menuPosition = this.$el.getBoundingClientRect();
-        return this.$nextTick(() => {
-          const pixelsScrolledX = window.scrollX || window.pageXOffset;
-          const pixelsScrolledY = window.scrollY || window.pageYOffset;
-          if (this.flipMenu) {
-            this.left =
-              menuPosition.left +
-              this.offsetLeft -
-              this.$refs.popup.offsetWidth +
-              this.$el.offsetWidth +
-              pixelsScrolledX;
-          } else {
-            this.left = menuPosition.left + this.offsetLeft + pixelsScrolledX;
-          }
-          if (this.up) {
-            this.top = menuPosition.top + this.offsetTop - this.$refs.popup.offsetHeight + pixelsScrolledY;
-          } else {
-            this.top = menuPosition.bottom + this.offsetTop + pixelsScrolledY;
-          }
-        });
-      }
-    },
-    doFocus() {
-      let focusOn;
-      if (this.open) {
-        // set focus somewhere sensible, first focusable item or leave on over flow
-        let focusOnList = this.$refs.popup.querySelectorAll(
-          `.${this.carbonPrefix}--overflow-menu-options__btn, button, link, input, textarea, [contentEditable="true"], [tabindex]`
-        );
-        for (let tryOn of focusOnList) {
-          if (
-            // don't focus on before after or something that can't be tabbed to
-            !(
-              tryOn.classList.contains('cv-overflow-menu__before-content') ||
-              tryOn.classList.contains('cv-overflow-menu__after-content') ||
-              tryOn.tabindex < 0
-            )
-          ) {
-            focusOn = tryOn;
-            break;
-          }
-        }
-        if (!focusOn) {
-          focusOn = this.$el;
-        }
-      } else {
-        focusOn = this.$el;
-      }
-      focusOn.focus();
-    },
-    async doToggle() {
-      this.open = !this.open;
-
-      // await positionMenu otherwise it can race doFocus.
-      // On initial open the menu is positioned 0,0 causing a jump
-      await this.positionMenu();
-      this.positionListen(this.open);
-      this.$nextTick(() => {
-        this.doFocus();
-      });
-    },
-    onOverflowMenuTab(ev) {
-      if (!ev.shiftKey) {
-        // move focus before content before tab press
-        this.$refs.beforeContent.focus();
-      }
-    },
-    focusBeforeContent(ev) {
-      if (this.$refs.popup.contains(ev.relatedTarget)) {
-        this.$refs.trigger.focus();
-        this.open = false;
-      }
-    },
-    focusAfterContent() {
-      this.$refs.trigger.focus();
-      this.open = false;
-    },
-    preventFocusOut() {
-      // This is here to prevent focus being lost if the user clicks on the contents of the interactive tool tip
-    },
-  },
-  mounted() {
-    // Check for los of focus
-    this.$el.addEventListener('focusout', this.checkFocusOut);
-
-    // move popup out to body to ensure it appears above other elements
-    this.popupEl = document.body.appendChild(this.$refs.popup);
-  },
-  beforeDestroy() {
-    this.positionListen(false);
-    if (this.popupEl) {
-      // move back to where it came from
-      this.$el.appendChild(this.popupEl);
-    }
-  },
-};
-</script>

package/src/components/cv-overflow-menu/index.js

@@ -1,4 +0,0 @@
-import CvOverflowMenu from './cv-overflow-menu';
-import CvOverflowMenuItem from './cv-overflow-menu-item';
-
-export { CvOverflowMenu, CvOverflowMenuItem };