@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/cv-tabs/cv-tabs.vue

@@ -1,410 +0,0 @@
-<template>
-  <div class="cv-tabs" ref="tabs" style="width: 100%;">
-    <div
-      data-tabs
-      :class="[`cv-tab ${carbonPrefix}--tabs--scrollable`, { [`${carbonPrefix}--tabs--container`]: container }]"
-      role="navigation"
-      v-on="$listeners"
-      v-bind="$attrs"
-      @keydown.right.prevent.stop="onRight"
-      @keydown.left.prevent.stop="onLeft"
-    >
-      <button
-        aria-hidden="true"
-        aria-label="scroll left"
-        :class="[
-          {
-            [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,
-            [`${carbonPrefix}--tab--overflow-nav-button--hidden`]: leftOverflowNavButtonHidden,
-          },
-        ]"
-        @click.stop.prevent="e => onOverflowClick(e, { direction: -1 })"
-        @mousedown.stop.prevent="e => onOverflowMouseDown(e, { direction: -1 })"
-        @mouseup.stop.prevent="onOverflowMouseUp"
-        tabIndex="-1"
-        type="button"
-        ref="leftOverflow"
-      >
-        <ChevronLeft16 />
-      </button>
-      <div v-if="!leftOverflowNavButtonHidden" :class="`${carbonPrefix}--tabs__overflow-indicator--left`" />
-
-      <ul :class="`${carbonPrefix}--tabs--scrollable__nav`" role="tablist" ref="tablist">
-        <li
-          v-for="tab in tabs"
-          :key="tab.uid"
-          :class="[
-            `cv-tabs-button  ${carbonPrefix}--tabs--scrollable__nav-item`,
-            {
-              [`${carbonPrefix}--tabs__nav-item--selected`]: selectedId == tab.uid,
-              [`${carbonPrefix}--tabs__nav-item--disabled`]: disabledTabs.indexOf(tab.uid) !== -1,
-              // TODO: remove scrollable in next major release
-              [`${carbonPrefix}--tabs--scrollable__nav-item--disabled`]: disabledTabs.indexOf(tab.uid) !== -1,
-              [`${carbonPrefix}--tabs--scrollable__nav-item--selected`]: selectedId == tab.uid,
-            },
-          ]"
-          role="presentation"
-        >
-          <button
-            :class="`${carbonPrefix}--tabs--scrollable__nav-link`"
-            role="tab"
-            :aria-controls="tab.uid"
-            :aria-disabled="disabledTabs.indexOf(tab.uid) !== -1"
-            :aria-selected="selectedId == tab.uid"
-            :id="`${tab.uid}-link`"
-            @click="onTabClick(tab.uid)"
-            ref="link"
-            eslint-disable-next-line
-            :tabindex="
-              // eslint-disable-nextx-line
-              selectedId == tab.uid ? 0 : -1
-            "
-            type="button"
-          >
-            {{ tab.label }}
-          </button>
-        </li>
-      </ul>
-
-      <div v-if="!rightOverflowNavButtonHidden" :class="`${carbonPrefix}--tabs__overflow-indicator--right`" />
-      <button
-        aria-hidden="true"
-        aria-label="scroll right"
-        :class="[
-          {
-            [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,
-            [`${carbonPrefix}--tab--overflow-nav-button--hidden`]: rightOverflowNavButtonHidden,
-          },
-        ]"
-        @click="e => onOverflowClick(e, { direction: 1 })"
-        @mousedown="e => onOverflowMouseDown(e, { direction: 1 })"
-        @mouseup="onOverflowMouseUp"
-        tabIndex="-1"
-        type="button"
-        ref="rightOverflow"
-      >
-        <ChevronRight16 />
-      </button>
-    </div>
-    <div class="cv-tabs__panels">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ChevronLeft16, ChevronRight16 } from '@carbon/icons-vue';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvTabs',
-  mixins: [carbonPrefixMixin],
-  props: {
-    container: Boolean,
-    leftOverflowIconButtonProps: Object,
-    noDefaultToFirst: Boolean,
-    rightOverflowIconButtonProps: Object,
-    scrollIntoView: { type: Boolean, default: true },
-  },
-  components: { ChevronLeft16, ChevronRight16 },
-  data() {
-    return {
-      disabledTabs: [],
-      horizontalOverflow: false,
-      leftOverflowNavButtonHidden: false,
-      rightOverflowNavButtonHidden: false,
-      // scrollIntoView,
-      // selectionMode,
-      selectedId: undefined,
-      tabs: [],
-    };
-  },
-  created() {
-    // add these on created otherwise cv:mounted is too early.
-    this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
-    this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
-    this.$on('cv:selected', srcComponent => this.onCvSelected(srcComponent));
-    this.$on('cv:disabled', srcComponent => this.onCvDisabled(srcComponent));
-    this.$on('cv:enabled', srcComponent => this.onCvEnabled(srcComponent));
-    this.OVERFLOW_BUTTON_OFFSET = 40;
-  },
-  mounted() {
-    window.addEventListener('resize', this.handleResize);
-    this.$refs.tablist.addEventListener('scroll', this.checkScroll);
-    this.checkScroll();
-  },
-  updated() {
-    this.checkScroll();
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize);
-    this.$refs.tablist.removeEventListener('scroll', this.checkScroll);
-  },
-  computed: {
-    currentTabLabel() {
-      const index = this.tabs.findIndex(tab => tab.uid === this.selectedId);
-
-      return index > -1 ? this.tabs[index].label : '';
-    },
-  },
-  methods: {
-    checkScroll() {
-      if (!this.skipScroll) {
-        if (this.$refs.tablist) {
-          this.horizontalOverflow = this.$refs.tablist.scrollWidth > this.$refs.tablist.clientWidth;
-
-          if (this.$refs.link && this.$refs.link.length > 0) {
-            this.leftOverflowNavButtonHidden = this.$refs.tablist.scrollLeft <= 0;
-            this.rightOverflowNavButtonHidden =
-              this.$refs.tablist.scrollLeft + this.$refs.tablist.clientWidth >= this.$refs.tablist.scrollWidth;
-          }
-        }
-      }
-    },
-    handleResize() {
-      this.checkScroll();
-    },
-    onCvMount(srcComponent) {
-      this.tabs.push(srcComponent);
-      if (this.tabs.filter(item => item.uid === srcComponent.uid).length > 1) {
-        console.error(`CvTabs: Duplicate ID specified for CvTab, this may cause issues. {id: ${srcComponent.id}}}`);
-      }
-
-      this.checkDisabled(srcComponent);
-      if (this.selectedId === undefined) {
-        this.checkSelected();
-      } else {
-        if (srcComponent.internalSelected) {
-          this.doTabClick(srcComponent.uid);
-        }
-      }
-    },
-    onCvBeforeDestroy(srcComponent) {
-      const tabIndex = this.tabs.findIndex(item => item.uid === srcComponent.uid);
-      if (tabIndex > -1) {
-        const wasSelected = srcComponent.uid === this.selectedId;
-
-        this.tabs.splice(tabIndex, 1);
-
-        this.checkDisabled(srcComponent);
-
-        if (wasSelected && this.tabs.length) {
-          this.doTabClick(this.tabs[Math.max(tabIndex - 1, 0)].uid);
-        }
-      }
-    },
-    doScrollIntoView(index) {
-      const tab = this.$refs.link[index];
-      const scrollContainer = tab && tab.parentNode ? tab.parentNode.parentNode : null;
-      let newScrollLeft;
-
-      if (tab && scrollContainer) {
-        const scrollLeft = scrollContainer.scrollLeft;
-        const tabLeft = tab.offsetLeft - scrollContainer.offsetLeft;
-
-        if (index === 0) {
-          newScrollLeft = 0;
-        } else if (index === this.$refs.link.length - 1) {
-          newScrollLeft = scrollContainer.scrollWidth - scrollContainer.offsetWidth;
-        } else if (tabLeft < scrollLeft) {
-          newScrollLeft = tabLeft;
-        } else {
-          const rightOfTab = tab.offsetLeft - scrollContainer.offsetLeft + tab.offsetWidth;
-          if (rightOfTab > scrollContainer.offsetWidth + scrollLeft) {
-            newScrollLeft = rightOfTab - scrollContainer.offsetWidth;
-
-            if (!this.rightOverflowNavButtonHidden) {
-              newScrollLeft += this.OVERFLOW_BUTTON_OFFSET;
-            }
-          }
-        }
-      }
-
-      if (newScrollLeft !== undefined) {
-        this.skipScroll = true;
-        this.leftOverflowNavButtonHidden = newScrollLeft <= 0;
-        this.rightOverflowNavButtonHidden =
-          newScrollLeft + this.$refs.tablist.clientWidth >= this.$refs.tablist.scrollWidth;
-
-        this.$nextTick(() => {
-          // allow left and right nav hide to propegate before setting scroll
-          scrollContainer.scrollLeft = newScrollLeft;
-          this.skipScroll = false;
-        });
-      }
-    },
-    doTabClick(id, setFocus = false) {
-      if (this.disabledTabs.indexOf(id) === -1) {
-        if (this.selectedId !== id) {
-          let newIndex = -1;
-
-          this.selectedId = id;
-
-          for (let i = 0; i < this.tabs.length; i++) {
-            if (this.tabs[i].uid === id) {
-              this.doScrollIntoView(i, setFocus);
-              if (setFocus) {
-                this.$nextTick(() => {
-                  this.$refs.link[i].focus();
-                });
-              }
-
-              this.tabs[i].internalSelected = true;
-              newIndex = i;
-            } else {
-              this.tabs[i].internalSelected = false;
-            }
-          }
-
-          this.$emit('tab-selected', newIndex);
-        }
-      }
-    },
-    onTabClick(id) {
-      this.doTabClick(id);
-    },
-    onCvSelected(srcComponent) {
-      this.doTabClick(srcComponent.uid);
-    },
-    onCvDisabled(srcComponent) {
-      this.disabledTabs.push(srcComponent.uid);
-    },
-    onCvEnabled(srcComponent) {
-      let arrIdx = this.disabledTabs.indexOf(srcComponent.uid);
-      if (arrIdx !== -1) {
-        this.disabledTabs.splice(arrIdx, 1);
-      }
-    },
-    checkDisabled(srcComponent) {
-      if (srcComponent.internalDisabled) {
-        this.onCvDisabled(srcComponent);
-      } else {
-        this.onCvEnabled(srcComponent);
-      }
-    },
-    checkSelected() {
-      let id;
-
-      for (let i = 0; i < this.tabs.length; i++) {
-        if (this.tabs[i].internalSelected) {
-          id = this.tabs[i].uid;
-        }
-      }
-
-      if (!this.noDefaultToFirst && id === undefined && this.tabs.length) {
-        id = this.tabs[0].uid;
-      }
-
-      if (id !== undefined) {
-        this.$nextTick(() => {
-          this.doTabClick(id);
-        });
-      }
-    },
-    isAllTabsDisabled() {
-      return this.disabledTabs.length === this.tabs.length;
-    },
-    onLeft() {
-      if (this.isAllTabsDisabled()) {
-        return;
-      }
-
-      const curIndex = this.move(this.selectedId, false);
-      const newId = this.tabs[curIndex].uid;
-
-      this.doTabClick(newId, true);
-    },
-    move(id, next) {
-      let newIndex;
-      let newId;
-
-      newIndex = this.tabs.findIndex(tab => tab.uid === id);
-
-      if (newIndex > -1) {
-        newIndex = next ? newIndex + 1 : newIndex - 1;
-      }
-      if (newIndex < 0 || newIndex >= this.tabs.length) {
-        newIndex = next ? 0 : this.tabs.length - 1;
-      }
-
-      newId = this.tabs[newIndex].uid;
-      while (newId === this.selectedId || this.disabledTabs.indexOf(newId) !== -1) {
-        if (newIndex > -1) {
-          newIndex = next ? newIndex + 1 : newIndex - 1;
-        }
-        if (newIndex < 0 || newIndex >= this.tabs.length) {
-          newIndex = next ? 0 : this.tabs.length - 1;
-        }
-        newId = this.tabs[newIndex].uid;
-      }
-
-      return newIndex;
-    },
-    onRight() {
-      if (this.isAllTabsDisabled()) {
-        return;
-      }
-
-      const curIndex = this.move(this.selectedId, true);
-      const newId = this.tabs[curIndex].uid;
-
-      this.doTabClick(newId, true);
-    },
-    selected(index) {
-      let selItem = this.tabs[index ? index : -1];
-      this.selectedId = selItem ? selItem.uid : undefined;
-
-      // const selectedTab = this.tabs.find(tab => tab.id === id);
-      // selectedTab.$el.scrollIntoView();
-    },
-    onOverflowClick(e, { direction, multiplier = 10 }) {
-      const { scrollLeft } = this.$refs.tablist;
-
-      // account for overflow button appearing and causing tablist width change
-      if (direction === 1 && !scrollLeft) {
-        this.$refs.tablist.scrollLeft += this.OVERFLOW_BUTTON_OFFSET;
-      }
-
-      this.$refs.tablist.scrollLeft += direction * multiplier;
-
-      if (this.leftEdgeReached(direction)) {
-        this.$refs.tablist.scrollLeft = 0;
-      }
-
-      // account for reaching left edge
-      if (this.leftEdgeReached(direction)) {
-        this.$refs.rightOverflow.focus();
-      }
-      if (this.rightEdgeReached(direction)) {
-        this.$refs.leftOverflow.focus();
-      }
-    },
-    onOverflowMouseDown(e, { direction }) {
-      // disregard mouse buttons aside from LMB
-      if (e.buttons !== 1) {
-        return;
-      }
-
-      this.overflowNavInterval = setInterval(() => {
-        if (this.leftEdgeReached(direction) || this.rightEdgeReached(direction)) {
-          clearInterval(this.overflowNavInterval);
-        }
-
-        this.onOverflowClick(e, { direction });
-      });
-    },
-    onOverflowMouseUp() {
-      clearInterval(this.overflowNavInterval);
-    },
-    leftEdgeReached(direction) {
-      const { scrollLeft } = this.$refs.tablist;
-
-      return direction === -1 && scrollLeft <= this.OVERFLOW_BUTTON_OFFSET;
-    },
-    rightEdgeReached(direction) {
-      const { clientWidth, scrollLeft, scrollWidth } = this.$refs.tablist;
-      return direction === 1 && scrollLeft + clientWidth >= scrollWidth;
-    },
-  },
-};
-</script>

package/src/components/cv-tabs/index.js

@@ -1,5 +0,0 @@
-import CvTabs from './cv-tabs';
-import CvTab from './cv-tab';
-import CvTabsSkeleton from './cv-tabs-skeleton';
-
-export { CvTab, CvTabs, CvTabsSkeleton };

package/src/components/cv-tag/cv-tag-skeleton.vue

@@ -1,19 +0,0 @@
-<template>
-  <div
-    :class="[`cv-tag ${carbonPrefix}--tag ${carbonPrefix}--skeleton`, { [`${carbonPrefix}--tag--${size}`]: size }]"
-  ></div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvTagSkeleton',
-  mixins: [carbonPrefixMixin],
-  props: {
-    size: {
-      type: String,
-      validator: val => ['sm', ''].includes(val),
-    },
-  },
-};
-</script>

package/src/components/cv-tag/cv-tag.vue

@@ -1,121 +0,0 @@
-<template>
-  <component
-    :is="!isFilter && hasClickListener ? 'button' : 'div'"
-    v-on="this.$listeners"
-    :id="uid"
-    :class="[
-      `cv-tag ${carbonPrefix}--tag`,
-      `${carbonPrefix}--tag--${tagKind}`,
-      {
-        [`${carbonPrefix}--tag--disabled`]: disabled,
-        [`${carbonPrefix}--tag--filter`]: isFilter,
-        [`${carbonPrefix}--tag--interactive`]: hasClickListener,
-        [`${carbonPrefix}--tag--${size}`]: size,
-      },
-    ]"
-    :title="title"
-    @keydown.enter.stop.prevent="$emit('remove')"
-    @keydown.space.prevent
-    @keyup.space.prevent="$emit('remove')"
-  >
-    <div v-if="icon && !filter" :class="`${carbonPrefix}--tag__custom-icon`">
-      <CvSvg :svg="icon" />
-    </div>
-    <span :class="`${carbonPrefix}--tag__label`" :title="hasClickListener ? label : ''">{{ label }}</span>
-    <button
-      v-if="isFilter"
-      :class="`${carbonPrefix}--tag__close-icon`"
-      :aria-label="clearAriaLabel"
-      @click.stop.prevent="onRemove"
-      :disabled="disabled"
-      type="button"
-    >
-      <Close16 />
-    </button>
-  </component>
-</template>
-
-<script>
-import Close16 from '@carbon/icons-vue/es/close/16';
-import { carbonPrefixMixin, uidMixin } from '../../mixins';
-import CvSvg from '../cv-svg/_cv-svg';
-
-export const tagKinds = [
-  'red',
-  'magenta',
-  'purple',
-  'blue',
-  'cyan',
-  'teal',
-  'green',
-  'gray',
-  'cool-gray',
-  'warm-gray',
-  'high-contrast',
-];
-
-export default {
-  name: 'CvTag',
-  mixins: [carbonPrefixMixin, uidMixin],
-  components: { Close16, CvSvg },
-  props: {
-    clearAriaLabel: { type: String, default: 'Clear filter' },
-    disabled: Boolean,
-    icon: {
-      type: [String, Object],
-      default: undefined,
-      validator(val) {
-        if (!val || typeof val === 'string') {
-          return true;
-        }
-        return val.render !== null;
-      },
-    },
-    label: { type: String, required: true },
-    kind: {
-      type: String,
-      validator: val => {
-        if (val === 'filter' && process.env.NODE_ENV === 'development') {
-          console.warn('DEPRECARTED: Prefer props.filter (bool)');
-          return true;
-        }
-        return tagKinds.includes(val);
-      },
-    },
-    filter: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      validator: val => ['sm'].includes(val),
-    },
-  },
-  data() {
-    return {
-      hasClickListener: !!this.$listeners.click,
-    };
-  },
-  updated() {
-    this.hasClickListener = !!this.$listeners.click;
-  },
-  computed: {
-    isFilter() {
-      return this.filter || this.kind === 'filter';
-    },
-    tagKind() {
-      return this.kind === 'filter' ? 'high-contrast' : this.kind;
-    },
-    title() {
-      return this.isFilter ? this.clearAriaLabel : null;
-    },
-  },
-  methods: {
-    onRemove() {
-      if (!this.disabled) {
-        this.$emit('remove');
-      }
-    },
-  },
-};
-</script>

package/src/components/cv-tag/index.js

@@ -1,4 +0,0 @@
-import CvTag, { tagKinds } from './cv-tag';
-import CvTagSkeleton from './cv-tag-skeleton';
-
-export { CvTag, CvTagSkeleton, tagKinds };

package/src/components/cv-text-area/cv-text-area.vue

@@ -1,98 +0,0 @@
-<template>
-  <div :class="`cv-text-area ${carbonPrefix}--form-item`">
-    <label
-      :for="uid"
-      :class="[
-        `${carbonPrefix}--label`,
-        {
-          [`${carbonPrefix}--label--disabled`]: $attrs.disabled !== undefined && $attrs.disabled,
-        },
-      ]"
-      >{{ label }}</label
-    >
-    <div :class="`${carbonPrefix}--text-area__wrapper`" :data-invalid="isInvalid">
-      <WarningFilled16 v-if="isInvalid" :class="`${carbonPrefix}--text-area__invalid-icon`" />
-      <textarea
-        :aria-invalid="isInvalid"
-        :aria-describedby="isInvalid ? errorId : undefined"
-        :id="uid"
-        :class="[
-          `${carbonPrefix}--text-area`,
-          {
-            [`${carbonPrefix}--text-area--light`]: isLight,
-            [`${carbonPrefix}--text-area--invalid`]: isInvalid,
-          },
-        ]"
-        v-bind="$attrs"
-        :value="value"
-        v-on="inputListeners"
-        ref="textarea"
-      ></textarea>
-    </div>
-    <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid" :id="errorId">
-      <slot name="invalid-message">{{ invalidMessage }}</slot>
-    </div>
-    <div
-      v-if="isHelper"
-      :class="[
-        `${carbonPrefix}--form__helper-text`,
-        { [`${carbonPrefix}--form__helper-text--disabled`]: $attrs.disabled },
-      ]"
-    >
-      <slot name="helper-text">{{ helperText }}</slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import { uidMixin, themeMixin, methodsMixin, carbonPrefixMixin } from '../../mixins';
-import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
-
-export default {
-  name: 'CvTextArea',
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ textarea: ['blur', 'focus'] })],
-  inheritAttrs: false,
-  components: { WarningFilled16 },
-  props: {
-    helperText: { type: String, default: undefined },
-    invalidMessage: { type: String, default: undefined },
-    label: String,
-    value: String,
-    warnText: { type: String, default: undefined },
-  },
-  data() {
-    return {
-      isHelper: false,
-      isInvalid: false,
-      isWarn: false,
-    };
-  },
-  mounted() {
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  computed: {
-    errorId() {
-      return `error-${this.uid}`;
-    },
-    // 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 {
-        ...this.$listeners,
-        input: event => this.$emit('input', event.target.value),
-      };
-    },
-  },
-  methods: {
-    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.isHelper = !this.isInvalid && !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
-    },
-  },
-};
-</script>

package/src/components/cv-text-area/index.js

@@ -1,2 +0,0 @@
-import CvTextArea from './cv-text-area';
-export { CvTextArea };