@carbon/vue 2.45.1 → 3.0.4-alpha.0

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

@@ -1,268 +0,0 @@
-<template>
-  <div :class="`cv-pagination ${carbonPrefix}--pagination`" data-pagination>
-    <div :class="`${carbonPrefix}--pagination__left`">
-      <cv-select
-        :class="`${carbonPrefix}--select__item-count`"
-        :label="`${pageSizesLabel}`"
-        inline
-        ref="pageSizeSelect"
-        @change="onPageSizeChange"
-        :value="`${pageSizeValue}`"
-      >
-        <cv-select-option
-          v-for="(size, index) in pageSizes"
-          :key="index"
-          :value="`${size.value ? size.value : size}`"
-          >{{ size.label ? size.label : size.value ? size.value : size }}</cv-select-option
-        >
-      </cv-select>
-
-      <span :class="`${carbonPrefix}--pagination__text`">
-        <span data-displayed-item-range>
-          <slot name="range-text" v-bind:scope="rangeProps">{{ rangeText }}</slot>
-        </span>
-      </span>
-    </div>
-
-    <div :class="`${carbonPrefix}--pagination__right`">
-      <cv-select
-        :class="`${carbonPrefix}--select__page-number`"
-        :label="`${pageNumberLabel}:`"
-        inline
-        hideLabel
-        ref="pageSelect"
-        @change="onPageChange"
-        :value="`${pageValue}`"
-        v-if="numberOfItems !== Infinity"
-      >
-        <cv-select-option
-          v-for="pageNumber in pages"
-          :key="pageNumber"
-          :value="`${pageNumber}`"
-          :selected="pageValue === pageNumber"
-          >{{ pageNumber }}</cv-select-option
-        >
-      </cv-select>
-      <span :class="`${carbonPrefix}--pagination__text`">
-        <slot name="of-n-pages" v-bind:scope="ofNPagesProps">{{ pageOfPages }}</slot>
-      </span>
-
-      <button
-        type="button"
-        :class="[
-          `${carbonPrefix}--pagination__button ${carbonPrefix}--pagination__button--backward`,
-          { [`${carbonPrefix}--pagination__button--no-index`]: noWayBack },
-        ]"
-        data-page-backward
-        :aria-label="backwardText"
-        @click="onPrevPage"
-        :disabled="noWayBack"
-      >
-        <CaretLeft16 :class="`${carbonPrefix}--pagination__button-icon`" />
-      </button>
-
-      <button
-        type="button"
-        :class="[
-          `${carbonPrefix}--pagination__button ${carbonPrefix}--pagination__button--forward`,
-          { [`${carbonPrefix}--pagination__button--no-index`]: noWayForward },
-        ]"
-        data-page-forward
-        :aria-label="forwardText"
-        @click="onNextPage"
-        :disabled="noWayForward"
-      >
-        <CaretRight16 :class="`${carbonPrefix}--pagination__button-icon`" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import CvSelect from '../cv-select/cv-select';
-import CvSelectOption from '../cv-select/cv-select-option';
-import CaretLeft16 from '@carbon/icons-vue/es/caret--left/16';
-import CaretRight16 from '@carbon/icons-vue/es/caret--right/16';
-import { carbonPrefixMixin } from '../../mixins';
-
-const newPageValue = (page, lastPage) => {
-  let result = 1;
-  if (page && page > 0) {
-    if (page <= lastPage) {
-      result = page;
-    } else {
-      result = lastPage;
-    }
-  }
-  return result;
-};
-
-const newPageSizeValue = pageSizes => {
-  // ensure nearest value to valid page size used.
-  for (let size of pageSizes) {
-    if (size.selected) {
-      return size.value;
-    }
-  }
-
-  let firstOne = pageSizes[0];
-  return firstOne.value ? firstOne.value : firstOne;
-};
-
-const newPageCount = (numberOfItems, pageSizeValue) => {
-  if (numberOfItems === Infinity) {
-    return Infinity;
-  }
-  return Math.max(1, Math.ceil(numberOfItems / pageSizeValue));
-};
-
-const newPagesArray = pageCount => {
-  if (pageCount === Infinity) {
-    return [];
-  }
-  return Array.from({ length: pageCount }, (val, key) => key + 1);
-};
-
-const newFirstItem = (pageValue, pageSizeValue) => 1 + (pageValue - 1) * pageSizeValue;
-
-export default {
-  name: 'CvPagination',
-  mixins: [carbonPrefixMixin],
-  components: { CvSelect, CvSelectOption, CaretLeft16, CaretRight16 },
-  props: {
-    backwardsButtonDisabled: Boolean,
-    forwardsButtonDisabled: Boolean,
-    backwardText: { type: String, default: 'Prev page' },
-    forwardText: { type: String, default: 'Next page' },
-    pageNumberLabel: { type: String, default: 'Page number:' },
-    pageSizesLabel: { type: String, default: 'Items per page:' },
-    numberOfItems: { type: Number, default: Infinity },
-    actualItemsOnPage: { type: Number, default: Infinity },
-    page: Number,
-    pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
-  },
-  data() {
-    return {
-      firstItem: 1,
-      pageValue: 1,
-      pageSizeValue: 10,
-      pageCount: 1,
-      pages: [1],
-    };
-  },
-  mounted() {
-    this.pageSizeValue = newPageSizeValue(this.pageSizes);
-    this.pageCount = newPageCount(this.numberOfItems, this.pageSizeValue);
-    this.pageValue = newPageValue(this.page, this.pageCount);
-    this.pages = newPagesArray(this.pageCount);
-    this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
-    // console.log(this.pageValue);
-    // always emit on mount
-    this.$emit('change', this.internalValue);
-  },
-  watch: {
-    numberOfItems() {
-      this.pageCount = newPageCount(this.numberOfItems, this.pageSizeValue);
-      this.pages = newPagesArray(this.pageCount);
-      this.pageValue = Math.min(this.pageCount, Math.ceil(this.firstItem / this.pageSizeValue));
-      this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
-    },
-    page() {
-      this.pageValue = newPageValue(this.page, this.pageCount);
-      this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
-    },
-    pageSizes(a, b) {
-      if (!a.some(item => !b.includes(item))) return; // /possible issue when pageSizes defined in DOM
-
-      this.pageSizeValue = newPageSizeValue(this.pageSizes);
-      this.pageCount = newPageCount(this.numberOfItems, this.pageSizeValue);
-      this.pages = newPagesArray(this.pageCount);
-      // Do not adjust pageValue to match firstItem. Could be incorrect if
-      // page was also set at the same time
-      this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
-    },
-  },
-  computed: {
-    noWayBack() {
-      return this.backwardsButtonDisabled || this.pageValue === 1;
-    },
-    noWayForward() {
-      return this.forwardsButtonDisabled || this.pageValue === this.pageCount;
-    },
-    ofNPagesProps() {
-      return {
-        pages: this.pageCount,
-        items: this.numberOfItems,
-      };
-    },
-    pageOfPages() {
-      const { pages, items } = this.ofNPagesProps;
-      // console.log(this.pageValue, this.pageCount);
-      if (items !== Infinity) {
-        return `of ${pages} pages`;
-      }
-      return `Page ${this.pageValue}`;
-    },
-    rangeProps() {
-      return {
-        start: Math.min(this.firstItem, this.numberOfItems),
-        end: Math.min(
-          this.firstItem + Math.min(parseInt(this.pageSizeValue, 10), this.actualItemsOnPage) - 1,
-          this.numberOfItems
-        ),
-        items: this.numberOfItems,
-      };
-    },
-    rangeText() {
-      const { start, end, items } = this.rangeProps;
-
-      if (items !== Infinity) {
-        return `${start}-${end} of ${items} items`;
-      } else {
-        return `${start}-${end}`;
-      }
-    },
-    internalValue() {
-      return {
-        start: this.firstItem,
-        page: this.pageValue,
-        length: parseInt(this.pageSizeValue),
-      };
-    },
-  },
-  methods: {
-    onPageChange(newVal) {
-      this.pageValue = parseInt(newVal, 10);
-      this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
-      this.$emit('change', this.internalValue);
-    },
-    onPageSizeChange(newVal) {
-      this.pageSizeValue = parseInt(newVal, 10);
-      this.pageCount = newPageCount(this.numberOfItems, this.pageSizeValue);
-      this.pages = newPagesArray(this.pageCount);
-      // what page is firstItem on
-      this.$nextTick(() => {
-        // setting pageValue immediately seems to cause a problem - test set pageSize to 40, page to 3, set pageSize to 10
-        // this previously resulted in 1 being set on Chrome (other browsers untested)
-        this.pageValue = Math.ceil(this.firstItem / this.pageSizeValue);
-        this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
-        this.$emit('change', this.internalValue);
-      });
-    },
-    onPrevPage() {
-      if (this.pageValue > 1) {
-        this.pageValue--;
-        this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
-        this.$emit('change', this.internalValue);
-      }
-    },
-    onNextPage() {
-      if (this.pageValue < this.pageCount) {
-        this.pageValue++;
-        this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
-        this.$emit('change', this.internalValue);
-      }
-    },
-  },
-};
-</script>

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

@@ -1,2 +0,0 @@
-import CvPagination from './cv-pagination';
-export { CvPagination };

package/src/components/cv-progress/cv-progress-step.vue

@@ -1,135 +0,0 @@
-<template>
-  <li
-    :class="[
-      `cv-progress-step ${carbonPrefix}--progress-step`,
-      `${carbonPrefix}--progress-step--${stateString}`,
-      {
-        [`${carbonPrefix}--progress-step--disabled`]: disabled,
-        [`${carbonPrefix}--progress-step--invalid`]: invalid,
-      },
-    ]"
-    :aria-disabled="disabled"
-  >
-    <conponent :is="stepIcon" :class="stepClass">
-      <title>{{ description }}</title>
-    </conponent>
-
-    <p
-      :class="[`${carbonPrefix}--progress-label`, { [`${carbonPrefix}--progress-label-overflow`]: showOverflow }]"
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-      @click="$emit('step-clicked', $event)"
-      ref="label"
-    >
-      {{ label }}
-    </p>
-
-    <div role="tooltip" data-floating-menu-direction="bottom" :class="`${carbonPrefix}--tooltip`">
-      <span :class="`${carbonPrefix}--tooltip__caret`"></span>
-      <p :class="`${carbonPrefix}--tooltip__text`">{{ tip }}</p>
-    </div>
-
-    <p :class="`${carbonPrefix}--progress-optional`" v-if="additionalInfo">{{ additionalInfo }}</p>
-    <span :class="`${carbonPrefix}--progress-line`"></span>
-  </li>
-</template>
-
-<script>
-import { CircleFilled16, CheckmarkOutline16, Warning16, RadioButton16 } from '@carbon/icons-vue';
-import { carbonPrefixMixin } from '../../mixins';
-
-const states = ['incomplete', 'current', 'complete'];
-
-export default {
-  name: 'CvProgressStep',
-  mixins: [carbonPrefixMixin],
-  components: {
-    CheckmarkOutline16,
-    CircleFilled16,
-    RadioButton16,
-    Warning16,
-  },
-  props: {
-    additionalInfo: String,
-    description: String,
-    disabled: Boolean,
-    invalid: Boolean,
-    label: String,
-    tipText: String,
-    complete: Boolean,
-  },
-  data() {
-    return {
-      state: -1,
-      showOverflow: false,
-      tip: '',
-    };
-  },
-  mounted() {
-    this.$_CvProgressStep = true; // for use by parent with $children
-    this.$parent.$emit('cv:mounted');
-  },
-  beforeDestroy() {
-    this.$parent.$emit('cv:beforeDestroy');
-  },
-  watch: {
-    complete() {
-      this.$parent.$emit('cv:completed');
-    },
-  },
-  computed: {
-    internalState: {
-      get() {
-        return this.state;
-      },
-      set(val) {
-        this.state = Math.sign(val);
-      },
-    },
-    stateString() {
-      return states[this.state + 1];
-    },
-    isComplete() {
-      return this.state > 0;
-    },
-    isCurrent() {
-      return this.state === 0;
-    },
-    stepClass() {
-      return this.invalid ? `${this.carbonPrefix}--progress__warning` : '';
-    },
-    stepIcon() {
-      if (this.invalid) {
-        return Warning16;
-      } else {
-        if (this.isCurrent) {
-          return CircleFilled16;
-        } else if (this.isComplete) {
-          return CheckmarkOutline16;
-        } else {
-          return RadioButton16;
-        }
-      }
-    },
-  },
-  methods: {
-    onMouseEnter() {
-      if (this.tipText) {
-        this.tip = this.tipText;
-        this.showOverflow = true;
-      } else {
-        if (this.$refs.label.scrollWidth > this.$refs.label.clientWidth) {
-          this.tip = this.label;
-          this.showOverflow = true;
-        } else {
-          this.tip = '';
-          this.showOverflow = false;
-        }
-      }
-    },
-    onMouseLeave() {
-      this.showOverflow = false;
-    },
-  },
-};
-</script>

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

@@ -1,82 +0,0 @@
-<template>
-  <ul
-    data-progress
-    data-progress-current
-    :class="[`cv-progress ${carbonPrefix}--progress`, { [`${carbonPrefix}--progress--vertical`]: vertical }]"
-  >
-    <slot>
-      <cv-progress-step
-        v-for="(step, index) in steps"
-        :key="`step:${index}`"
-        :label="step"
-        :complete="initialStep > index"
-        ref="steps"
-        @step-clicked="$emit('step-clicked', $event)"
-      />
-    </slot>
-  </ul>
-</template>
-
-<script>
-import CvProgressStep from './cv-progress-step';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvProgress',
-  mixins: [carbonPrefixMixin],
-  components: {
-    CvProgressStep,
-  },
-  props: {
-    initialStep: { type: Number, default: 0 },
-    steps: Array,
-    vertical: Boolean,
-  },
-  created() {
-    // add these on created otherwise cv:mounted is too late.
-    this.$on('cv:completed', srcComponent => this.onCvCompleted(srcComponent));
-    this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
-    this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
-  },
-  computed: {
-    state() {
-      return () => {
-        console.warn('CvProgress: method deprecated');
-        return;
-      };
-    },
-  },
-  methods: {
-    onCvMount() {
-      this.processState();
-    },
-    onCvBeforeDestroy() {
-      this.processState();
-    },
-    onCvCompleted() {
-      this.processState();
-    },
-    processState() {
-      const steps = this.$children.filter(child => child.$_CvProgressStep);
-      let newStep = -1;
-      for (let i = 0; i < steps.length; i++) {
-        if (!steps[i].complete && newStep < 0) {
-          newStep = i;
-          steps[i].internalState = 0;
-        } else {
-          steps[i].internalState = newStep < 0 ? 1 : -1;
-        }
-      }
-    },
-    getCurrent() {
-      console.warn('CvProgress: method deprecated');
-    },
-    getSteps() {
-      console.warn('CvProgress: method deprecated');
-    },
-    setCurrent() {
-      console.warn('CvProgress: method deprecated');
-    },
-  },
-};
-</script>

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

@@ -1,4 +0,0 @@
-import CvProgress from './cv-progress';
-import CvProgressStep from './cv-progress-step';
-
-export { CvProgress, CvProgressStep };

package/src/components/cv-radio-button/cv-radio-button.vue

@@ -1,40 +0,0 @@
-<template>
-  <div
-    :class="[
-      `cv-radio-button ${carbonPrefix}--radio-button-wrapper`,
-      { [`${carbonPrefix}--radio-button-wrapper--label-left`]: labelLeft },
-    ]"
-  >
-    <input
-      v-bind="$attrs"
-      v-on="inputListeners"
-      :id="uid"
-      :checked="isChecked"
-      :class="`${carbonPrefix}--radio-button`"
-      ref="input"
-      type="radio"
-      :value="value"
-    />
-    <!-- symbol causes problem in codepen? -->
-    <label :for="uid" :class="`${carbonPrefix}--radio-button__label`">
-      <span :class="`${carbonPrefix}--radio-button__appearance`"></span>
-      <span v-if="label" :class="{ [`${carbonPrefix}--visually-hidden`]: hideLabel }">
-        {{ label }}
-      </span>
-    </label>
-  </div>
-</template>
-
-<script>
-import { uidMixin, radioMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-
-export default {
-  name: 'CvRadioButton',
-  inheritAttrs: false,
-  mixins: [uidMixin, radioMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  props: {
-    hideLabel: Boolean,
-    labelLeft: Boolean,
-  },
-};
-</script>

package/src/components/cv-radio-button/cv-radio-group.vue

@@ -1,24 +0,0 @@
-<template>
-  <div :class="`cv-radio-group ${carbonPrefix}--form-item`">
-    <div
-      :class="[`${carbonPrefix}--radio-button-group`, { [`${carbonPrefix}--radio-button-group--vertical`]: vertical }]"
-    >
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvRadioGroup',
-  mixins: [carbonPrefixMixin],
-  props: {
-    vertical: Boolean,
-  },
-  mounted() {
-    // pass on cv-radio-button change events
-    this.$on('cv:change', val => this.$emit('change', val));
-  },
-};
-</script>

package/src/components/cv-radio-button/index.js

@@ -1,4 +0,0 @@
-import CvRadioGroup from './cv-radio-group';
-import CvRadioButton from './cv-radio-button';
-
-export { CvRadioGroup, CvRadioButton };