@carbon/vue 2.45.0 → 3.0.4-alpha.0

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

@@ -1,247 +0,0 @@
-<template>
-  <div :class="`cv-slider ${carbonPrefix}--form-item`">
-    <label
-      v-show="label"
-      :for="uid"
-      :class="[`${carbonPrefix}--label`, { [`${carbonPrefix}--label--disabled`]: disabled }]"
-      :id="labelId"
-    >
-      {{ label }}
-    </label>
-    <div :class="`${carbonPrefix}--slider-container`">
-      <span :class="`${carbonPrefix}--slider__range-label`">{{ internalMinLabel }}</span>
-      <div
-        :class="[`${carbonPrefix}--slider`, { [`${carbonPrefix}--slider--disabled`]: disabled }]"
-        data-slider
-        data-slider-input-box="#slider-input-box"
-      >
-        <div :class="`${carbonPrefix}--slider__track`" @click="onTrackClick" ref="track"></div>
-        <div :class="`${carbonPrefix}--slider__filled-track`" :style="`width: ${percentage};`"></div>
-        <div
-          :class="[
-            `${carbonPrefix}--slider__thumb`,
-            {
-              [`${carbonPrefix}--slider__thumb--clicked`]: animateClick,
-            },
-          ]"
-          tabindex="0"
-          :aria-labelledby="labelId"
-          :style="`left: ${percentage};`"
-          ref="thumb"
-          @keydown.up.right.prevent="onUp"
-          @keydown.down.left.prevent="onDown"
-          @mousedown="onStartDrag"
-        ></div>
-        <input
-          :id="uid"
-          :class="`${carbonPrefix}--slider__input`"
-          type="range"
-          :step="step"
-          :min="min"
-          :max="max"
-          ref="range"
-        />
-      </div>
-      <span :class="`${carbonPrefix}--slider__range-label`">{{ internalMaxLabel }}</span>
-      <input
-        type="number"
-        :class="[
-          `${carbonPrefix}--text-input ${carbonPrefix}--slider-text-input`,
-          { [`${carbonPrefix}--text-input--light`]: isLight },
-        ]"
-        :placeholder="min"
-        v-model="internalValue"
-        @change="onChange"
-        ref="inputBox"
-        @keydown.up.prevent="onUp"
-        @keydown.down.prevent="onDown"
-        :disabled="disabled"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-
-export default {
-  name: 'CvSlider',
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ thumb: ['blur', 'focus'] })],
-  props: {
-    disabled: Boolean,
-    label: String,
-    // NOTE: It is not safe to rely on Numbers for non-integer steps
-    min: { type: String, default: '0' },
-    max: { type: String, default: '100' },
-    step: { type: String, default: '1' },
-    stepMultiplier: {
-      type: String,
-      default: '4',
-      validator(val) {
-        if (val.length) {
-          let intMultiplier = parseInt(val);
-          if (isNaN(intMultiplier) || intMultiplier < 1) {
-            console.warn('cv-slider: multiplier must be >= 1');
-            return false;
-          }
-        }
-        return true;
-      },
-    },
-    value: String,
-    minLabel: String,
-    maxLabel: String,
-  },
-  model: {
-    prop: 'value',
-    event: 'modelEvent',
-  },
-  data() {
-    return {
-      internalValue: '',
-      animateClick: false,
-      isDragging: false,
-      dragStartX: 0,
-      dragStartValue: 0,
-      percentage: '0%',
-    };
-  },
-  computed: {
-    labelId() {
-      return `${this.uid}-label`;
-    },
-    internalMinLabel() {
-      return this.minLabel !== undefined ? this.minLabel : this.getMin();
-    },
-    internalMaxLabel() {
-      return this.maxLabel !== undefined ? this.maxLabel : this.getMax();
-    },
-    internalMultiplier() {
-      let intMultiplier = parseInt(this.stepMultiplier);
-      // default to 4 fro multiplier
-      return isNaN(intMultiplier) ? 4 : Math.max(intMultiplier, 1);
-    },
-  },
-  mounted() {
-    this.$refs.range.value = this.value;
-    this.internalValue = this.$refs.range.value;
-    this.percentage = `${((this.internalValue - this.getMin()) * 100) / (this.getMax() - this.getMin())}%`;
-  },
-  watch: {
-    value(val) {
-      this.setValue(val);
-    },
-    min() {
-      this.$nextTick(() => {
-        this.setValue(this.internalValue);
-      });
-      //      this.internalMin = val && val.length ? val : '0';
-    },
-    max() {
-      this.$nextTick(() => {
-        this.setValue(this.internalValue);
-      });
-    },
-    step() {
-      this.$nextTick(() => {
-        this.setValue(this.internalValue);
-      });
-    },
-  },
-  methods: {
-    // NOTE: It is not safe to rely on Numbers for non-integer steps
-    getMin() {
-      if (this.$refs.range) {
-        const val = parseFloat(this.$refs.range.min);
-        return isNaN(val) ? 0 : val;
-      }
-      return 0;
-    },
-    getMax() {
-      if (this.$refs.range) {
-        const val = parseFloat(this.$refs.range.max);
-        return isNaN(val) ? 100 : val;
-      }
-      return 100;
-    },
-    getValue() {
-      if (this.$refs.range) {
-        const val = parseFloat(this.$refs.range.value);
-        return isNaN(val) ? 0 : val;
-      }
-      return (this.getMax() + this.getMin()) / 2;
-    },
-    getStep() {
-      if (this.$refs.range) {
-        const val = parseFloat(this.$refs.range.step);
-        return isNaN(val) ? 0 : val;
-      }
-      return 1;
-    },
-
-    setValue(newValue) {
-      if (this.disabled) return;
-
-      this.$refs.range.value = newValue;
-      this.internalValue = this.$refs.range.value;
-
-      this.percentage = `${((this.internalValue - this.getMin()) * 100) / (this.getMax() - this.getMin())}%`;
-
-      this.$emit('modelEvent', this.$refs.range.value);
-      this.$emit('change', this.$refs.range.value);
-    },
-    onChange() {
-      let newValue = this.internalValue.length ? parseFloat(this.internalValue) : this.getMin();
-      this.setValue(newValue);
-    },
-    onStartDrag(ev) {
-      document.body.addEventListener('mousemove', this.onDrag);
-      document.body.addEventListener('mouseup', this.onStopDrag);
-
-      this.dragStartX = ev.clientX;
-      this.dragStartValue = this.getValue();
-      this.isDragging = true;
-    },
-    onDrag(ev) {
-      if (this.isDragging) {
-        // percentage change
-        let newValue = (ev.clientX - this.dragStartX) / this.$refs.track.offsetWidth;
-        // uncapped new value
-        newValue = this.dragStartValue + (this.getMax() - this.getMin()) * newValue;
-
-        this.setValue(newValue, ev);
-      }
-    },
-    onStopDrag() {
-      this.isDragging = false;
-      document.body.removeEventListener('mousemove', this.onDrag);
-      document.body.removeEventListener('mouseup', this.onStopDrag);
-    },
-    onTrackClick(ev) {
-      const afterAnimate = ev => {
-        if (ev.propertyName === 'left') {
-          this.animateClick = false;
-          this.$refs.thumb.removeEventListener('transitionend', afterAnimate);
-        }
-      };
-
-      let newValue = ev.offsetX / this.$refs.track.offsetWidth;
-      newValue = (this.getMax() - this.getMin()) * newValue + this.getMin();
-      this.$refs.thumb.addEventListener('transitionend', afterAnimate);
-      this.animateClick = true;
-
-      this.setValue(newValue, ev);
-    },
-    onUp(ev) {
-      let curValue = ev.target.type === 'number' ? parseFloat(ev.target.value) : this.getValue();
-      let newValue = curValue + (ev.shiftKey ? this.internalMultiplier * this.getStep() : this.getStep());
-      this.setValue(newValue, ev);
-    },
-    onDown(ev) {
-      let curValue = ev.target.type === 'number' ? parseFloat(ev.target.value) : this.getValue();
-      let newValue = curValue - (ev.shiftKey ? this.internalMultiplier * this.getStep() : this.getStep());
-      this.setValue(newValue, ev);
-    },
-  },
-};
-</script>

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

@@ -1,4 +0,0 @@
-import CvSliderSkeleton from './cv-slider-skeleton';
-import CvSlider from './cv-slider';
-
-export { CvSlider, CvSliderSkeleton };

package/src/components/cv-structured-list/_cv-structured-list-item-selectable.vue

@@ -1,37 +0,0 @@
-<template>
-  <label
-    :for="uid"
-    :aria-label="label"
-    :class="[
-      `cv-structured-list-item--selectable ${carbonPrefix}--structured-list-row`,
-      { ' ${carbonPrefix}--structured-list-row--selected': isChecked },
-    ]"
-    tabindex="0"
-  >
-    <slot></slot>
-    <input
-      v-bind="$attrs"
-      v-on="inputListeners"
-      tabindex="-1"
-      :id="uid"
-      :class="`${carbonPrefix}--structured-list-input`"
-      :checked="isChecked"
-      :value="value"
-      type="radio"
-    />
-    <div :class="`${carbonPrefix}--structured-list-td`">
-      <CheckmarkFilled16 :class="`${carbonPrefix}--structured-list-svg`" />
-    </div>
-  </label>
-</template>
-
-<script>
-import { uidMixin, radioMixin, carbonPrefixMixin } from '../../mixins';
-import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
-export default {
-  name: 'CvStructuredListItemSelectable',
-  components: { CheckmarkFilled16 },
-  inheritAttrs: false,
-  mixins: [uidMixin, radioMixin, carbonPrefixMixin],
-};
-</script>

package/src/components/cv-structured-list/_cv-structured-list-item-standard.vue

@@ -1,13 +0,0 @@
-<template>
-  <div :class="`cv-structured-list-item--standard ${carbonPrefix}--structured-list-row`">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvStructuredListItemStandard',
-  mixins: [carbonPrefixMixin],
-};
-</script>

package/src/components/cv-structured-list/cv-structured-list-data.vue

@@ -1,23 +0,0 @@
-<template>
-  <div
-    :class="[
-      `cv-structured-list-data ${carbonPrefix}--structured-list-td`,
-      {
-        [`${carbonPrefix}--structured-list-content--nowrap`]: noWrap,
-      },
-    ]"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvStructuredListData',
-  mixins: [carbonPrefixMixin],
-  props: {
-    noWrap: Boolean,
-  },
-};
-</script>

package/src/components/cv-structured-list/cv-structured-list-heading.vue

@@ -1,13 +0,0 @@
-<template>
-  <div :class="`cv-structured-list-heading ${carbonPrefix}--structured-list-th`">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvStructuredListHeading',
-  mixins: [carbonPrefixMixin],
-};
-</script>

package/src/components/cv-structured-list/cv-structured-list-item.vue

@@ -1,46 +0,0 @@
-<template>
-  <component
-    :is="tagType"
-    v-bind="$attrs"
-    v-on="$listeners"
-    class="cv-structured-list-item"
-    :value="value"
-    :modelValue="modelValue"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-import CvStructuredListItemStandard from './_cv-structured-list-item-standard';
-import CvStructuredListItemSelectable from './_cv-structured-list-item-selectable';
-
-export default {
-  name: 'CvStructuredListItem',
-  inheritAttrs: false,
-  components: { CvStructuredListItemStandard, CvStructuredListItemSelectable },
-  props: {
-    value: { type: String, default: '' },
-    modelValue: { type: String },
-  },
-  mounted() {
-    // pass on cv-structured-list-item-selectable change events
-    this.$on('cv:change', val => {
-      this.$parent.$emit('cv:change', this.value); // emit to parent
-      this.$emit('change', val);
-    });
-  },
-  computed: {
-    tagType() {
-      return this.selectable ? 'cv-structured-list-item-selectable' : 'cv-structured-list-item-standard';
-    },
-    selectable() {
-      return this.$parent.selectable;
-    },
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'change',
-  },
-};
-</script>

package/src/components/cv-structured-list/cv-structured-list.vue

@@ -1,38 +0,0 @@
-<template>
-  <div
-    :class="[
-      `${carbonPrefix}--structured-list`,
-      {
-        [`${carbonPrefix}--structured-list--selection`]: selectable,
-        [`${carbonPrefix}--structured-list--condensed`]: condensed,
-      },
-    ]"
-    :data-structured-list="selectable"
-  >
-    <div :class="`${carbonPrefix}--structured-list-thead`">
-      <div :class="`${carbonPrefix}--structured-list-row ${carbonPrefix}--structured-list-row--header-row`">
-        <slot name="headings"></slot>
-        <div v-if="selectable" :class="`${carbonPrefix}--structured-list-th`"></div>
-      </div>
-    </div>
-    <div :class="`${carbonPrefix}--structured-list-tbody`">
-      <slot name="items"></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvStructuredList',
-  mixins: [carbonPrefixMixin],
-  props: {
-    selectable: Boolean,
-    condensed: Boolean,
-  },
-  mounted() {
-    // pass on cv-structured-list-item change events
-    this.$on('cv:change', val => this.$emit('change', val));
-  },
-};
-</script>

package/src/components/cv-structured-list/index.js

@@ -1,5 +0,0 @@
-import CvStructuredListData from './cv-structured-list-data';
-import CvStructuredListHeading from './cv-structured-list-heading';
-import CvStructuredListItem from './cv-structured-list-item';
-import CvStructuredList from './cv-structured-list';
-export { CvStructuredList, CvStructuredListItem, CvStructuredListHeading, CvStructuredListData };

package/src/components/cv-svg/_cv-svg.vue

@@ -1,38 +0,0 @@
-<script>
-export default {
-  name: 'CvSvg',
-  props: {
-    svg: {
-      type: [String, Object],
-      default: undefined,
-      validator(val) {
-        if (!val || typeof val === 'string') {
-          return true;
-        }
-        return val.render !== null;
-      },
-    },
-  },
-  computed: {
-    isSvg() {
-      return this.svg !== undefined && this.svg.indexOf('<svg') >= 0;
-    },
-    isSymbol() {
-      return this.svg !== undefined && !this.isSvg && this.svg.indexOf('#') >= 0;
-    },
-  },
-  render(createElement) {
-    if (typeof this.svg === 'object') {
-      return createElement('component', { is: this.svg });
-    } else if (this.isSvg) {
-      return createElement('svg', { domProps: { innerHTML: this.svg } });
-    } else {
-      if (this.isSymbol) {
-        return createElement('svg', {}, [createElement('use', { attrs: { href: this.svg } })]);
-      } else {
-        return createElement('img', { attrs: { src: this.svg } });
-      }
-    }
-  },
-};
-</script>

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

@@ -1,68 +0,0 @@
-<template>
-  <div
-    class="cv-tab"
-    :id="uid"
-    role="tabpanel"
-    :aria-labelledby="`${uid}-link`"
-    :aria-hidden="!dataSelected ? 'true' : 'false'"
-    :hidden="!dataSelected"
-  >
-    <slot>
-      <!-- Content for first tab goes here. -->
-    </slot>
-  </div>
-</template>
-
-<script>
-import { uidMixin } from '../../mixins';
-
-export default {
-  name: 'CvTab',
-  mixins: [uidMixin],
-  props: {
-    selected: Boolean,
-    disabled: Boolean,
-    label: { type: String, required: true },
-  },
-  data() {
-    return {
-      dataSelected: this.selected,
-    };
-  },
-  watch: {
-    selected() {
-      if (this.selected) {
-        this.$parent.$emit('cv:selected', this);
-      }
-    },
-    disabled() {
-      if (this.disabled) {
-        this.$parent.$emit('cv:disabled', this);
-      } else {
-        this.$parent.$emit('cv:enabled', this);
-      }
-    },
-  },
-  computed: {
-    internalSelected: {
-      get() {
-        return this.dataSelected;
-      },
-      set(val) {
-        this.dataSelected = val;
-      },
-    },
-    internalDisabled() {
-      return this.disabled;
-    },
-  },
-  mounted() {
-    this.$_CvTab = true; // for use by parent with $children
-
-    this.$parent.$emit('cv:mounted', this);
-  },
-  beforeDestroy() {
-    this.$parent.$emit('cv:beforeDestroy', this);
-  },
-};
-</script>

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

@@ -1,20 +0,0 @@
-<template>
-  <div :class="`cv-tabs ${carbonPrefix}--tabs ${carbonPrefix}--skeleton ${carbonPrefix}--tabs--scrollable`">
-    <ul :class="`${carbonPrefix}--tabs--scrollable__nav`">
-      <li v-for="index in tabCount" :key="index" :class="`${carbonPrefix}--tabs--scrollable__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`"><span></span></div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvTabsSkeleton',
-  mixins: [carbonPrefixMixin],
-  props: {
-    tabCount: { type: Number, default: 5 },
-  },
-};
-</script>