@carbon/vue 2.45.1 → 3.0.4-alpha.0

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

@@ -1,194 +0,0 @@
-<template>
-  <cv-wrapper :tag-type="formItem ? 'div' : ''" :class="`cv-search ${carbonPrefix}--form-item`">
-    <div
-      v-bind="wrapperAttrs"
-      :class="[
-        `${carbonPrefix}--search`,
-        {
-          [`${carbonPrefix}--search--light`]: isLight,
-          [`${carbonPrefix}--search--${internalSize}`]: internalSize,
-          [`${carbonPrefix}--toolbar-search`]: isToolbarKind,
-          [`${carbonPrefix}--toolbar-search--active`]: toolbarActive,
-          'cv-search': !formItem,
-        },
-      ]"
-      role="search"
-      ref="search"
-    >
-      <button
-        type="button"
-        v-if="isToolbarKind"
-        :class="`${carbonPrefix}--toolbar-search__btn`"
-        :aria-label="toolbarAriaLabel"
-        @click="toggleActive(true)"
-        @blur="checkFocus"
-      >
-        <component :is="icon" :class="`${carbonPrefix}--search-magnifier`" />
-      </button>
-
-      <div v-if="!isToolbarKind" :class="`${carbonPrefix}--search-magnifier`">
-        <Search20 :class="`${carbonPrefix}--search-magnifier-icon`" />
-      </div>
-
-      <label v-show="label" :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
-
-      <input
-        :id="uid"
-        :class="`${carbonPrefix}--search-input`"
-        v-bind="$attrs"
-        v-model="internalValue"
-        v-on="inputListeners"
-        type="text"
-        ref="input"
-        :placeholder="placeholder"
-        :aria-labelledby="uid"
-        @blur="checkFocus"
-      />
-
-      <button
-        type="button"
-        :class="[`${carbonPrefix}--search-close`, { [`${carbonPrefix}--search-close--hidden`]: !clearVisible }]"
-        :title="clearAriaLabel"
-        :aria-label="clearAriaLabel"
-        @click="onClearClick"
-      >
-        <Close16 />
-      </button>
-    </div>
-  </cv-wrapper>
-</template>
-
-<script>
-import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-import Search16 from '@carbon/icons-vue/es/search/16';
-import Search20 from '@carbon/icons-vue/es/search/20';
-import Close16 from '@carbon/icons-vue/es/close/16';
-import CvWrapper from '../cv-wrapper/_cv-wrapper';
-
-export default {
-  name: 'CvSearch',
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  components: { Close16, CvWrapper, Search20 },
-  inheritAttrs: false,
-  props: {
-    ariaLabel: String,
-    clearAriaLabel: { type: String, default: 'Clear search input' },
-    formItem: { type: Boolean, default: true },
-    kind: { type: String, default: undefined },
-    label: String,
-    size: { type: String, default: undefined },
-    small: {
-      type: Boolean,
-      default: undefined,
-      validator(val) {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('DEPRECARTED: Prefer size property: small, large or xl (default)');
-        }
-        return true;
-      },
-    },
-    large: {
-      type: Boolean,
-      default: undefined,
-      validator(val) {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('DEPRECARTED: Prefer size property: small, large or xl (default)');
-        }
-        return true;
-      },
-    },
-    value: String,
-    placeholder: { type: String, default: 'Search' },
-    toolbarAriaLabel: { type: String, default: 'Toolbar search' },
-  },
-  data() {
-    return {
-      clearVisible: this.value ? this.value.length : false,
-      internalValue: this.value,
-      toolbarActive: false,
-    };
-  },
-  watch: {
-    value() {
-      this.clearVisible = this.value ? this.value.length : false;
-      this.internalValue = this.value;
-    },
-  },
-  computed: {
-    wrapperAttrs() {
-      const attrs = {};
-      if (this.ariaLabel) {
-        attrs['aria-label'] = this.ariaLabel;
-      } else if (this.label) {
-        attrs['aria-labelledby'] = this.uid;
-      } else {
-        attrs['aria-label'] = 'Search box';
-      }
-      return attrs;
-    },
-    // 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: this.onInput,
-      };
-    },
-    internalSize() {
-      let size;
-
-      if (this.size !== undefined && (this.size || (this.small === undefined && this.large === undefined))) {
-        switch (this.size) {
-          case 'small':
-            size = 'sm';
-            break;
-          case 'large':
-            size = 'lg';
-            break;
-          default:
-            size = 'xl';
-            break;
-        }
-      } else {
-        size = this.small ? 'sm' : 'xl';
-      }
-      return size;
-    },
-    isToolbarKind() {
-      return this.kind === 'toolbar';
-    },
-    icon() {
-      return this.size === 'xl' ? Search20 : Search16;
-    },
-  },
-  methods: {
-    onClearClick() {
-      this.internalValue = '';
-      this.clearVisible = false;
-      this.$emit('input', this.internalValue);
-    },
-    onInput() {
-      this.clearVisible = this.internalValue.length > 0;
-      return this.$emit('input', this.internalValue);
-    },
-    toggleActive(force) {
-      if (typeof force === 'boolean') {
-        this.toolbarActive = force;
-      } else {
-        this.toolbarActive = !this.toolbarActive;
-      }
-      if (this.toolbarActive) {
-        this.$refs.input.focus();
-      }
-    },
-    checkFocus(ev) {
-      if (this.isToolbarKind) {
-        if (!this.$el.contains(ev.relatedTarget)) {
-          this.toolbarActive = false;
-        }
-      }
-    },
-  },
-};
-</script>

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

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

package/src/components/cv-select/cv-select-optgroup.vue

@@ -1,14 +0,0 @@
-<template>
-  <optgroup :class="`cv-select-optgroup ${carbonPrefix}--select-optgroup`">
-    <slot></slot>
-  </optgroup>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvSelectOptgroup',
-  mixins: [carbonPrefixMixin],
-  // html props: label
-};
-</script>

package/src/components/cv-select/cv-select-option.vue

@@ -1,14 +0,0 @@
-<template>
-  <option :class="`cv-select-option ${carbonPrefix}--select-option`">
-    <slot></slot>
-  </option>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvSelectOption',
-  mixins: [carbonPrefixMixin],
-  // HTML props disabled selected hidden
-};
-</script>

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

@@ -1,158 +0,0 @@
-<template>
-  <cv-wrapper :tag-type="formItem ? 'div' : ''" :class="`cv-select ${carbonPrefix}--form-item`">
-    <div
-      :data-test="value"
-      :class="[
-        `${carbonPrefix}--select`,
-        {
-          'cv-select': !formItem,
-          [`${carbonPrefix}--select--inline`]: inline,
-          [`${carbonPrefix}--select--light`]: isLight,
-          [`${carbonPrefix}--select--invalid`]: isInvalid,
-          [`${carbonPrefix}--select--disabled`]: $attrs.disabled,
-        },
-      ]"
-    >
-      <label
-        :for="uid"
-        :class="[
-          `${carbonPrefix}--label`,
-          {
-            [`${carbonPrefix}--visually-hidden`]: hideLabel,
-            [`${carbonPrefix}--label--disabled`]: $attrs.disabled,
-          },
-        ]"
-        >{{ label }}</label
-      >
-
-      <cv-wrapper :tag-type="inline ? 'div' : ''" :class="`${carbonPrefix}--select-input--inline__wrapper`">
-        <div :class="`${carbonPrefix}--select-input__wrapper`" :data-invalid="isInvalid">
-          <select
-            v-bind="$attrs"
-            :id="uid"
-            :class="`${carbonPrefix}--select-input`"
-            v-on="inputListeners"
-            ref="select"
-            :value="internalValue"
-          >
-            <slot></slot>
-          </select>
-          <chevron-down-glyph :class="`${carbonPrefix}--select__arrow`" />
-          <warning-filled-16 v-if="isInvalid" :class="`${carbonPrefix}--select__invalid-icon`" />
-        </div>
-
-        <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
-          <slot name="invalid-message">{{ invalidMessage }}</slot>
-        </div>
-        <div v-if="!isInvalid && !inline && isHelper" :class="`${carbonPrefix}--form__helper-text`">
-          <slot name="helper-text">{{ helperText }}</slot>
-        </div>
-
-        <!-- cv-wrapper div ${carbonPrefix}--select-input--inline__wrapper -->
-      </cv-wrapper>
-    </div>
-    <!-- cv-wrapper div ${carbonPrefix}--form-item -->
-  </cv-wrapper>
-</template>
-
-<script>
-import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import ChevronDownGlyph from '@carbon/icons-vue/es/chevron--down';
-import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
-
-export default {
-  name: 'CvSelect',
-  inheritAttrs: false,
-  components: { CvWrapper, ChevronDownGlyph, WarningFilled16 },
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ select: ['blur', 'focus'] })],
-  props: {
-    inline: Boolean,
-    invalidMessage: { type: String, default: undefined },
-    helperText: { type: String, default: undefined },
-    formItem: { type: Boolean, default: true },
-    hideLabel: Boolean,
-    label: { type: String, required: true },
-    // *********************
-    // declare here to prevent the following from being added to the select
-    // *********************
-    // multiple does not work with styling from carbon-components 9.20
-    multiple: {
-      type: String,
-      validator: () => {
-        console.warn('property multiple not supported in CvSelect');
-        return false;
-      },
-    },
-    value: { type: String, default: undefined },
-  },
-  beforeCreate() {
-    // *********************
-    // delete here to prevent the following from being added to the select
-    // *********************
-    // multiple does not work with styling from carbon-components 9.20
-    delete this.$attrs.multiple;
-  },
-  data() {
-    return {
-      dataValue: undefined,
-      isHelper: false,
-      isInvalid: false,
-    };
-  },
-  mounted() {
-    // this is needed to ensure selected for an option when no value is supplied
-    if (this.value === undefined) {
-      let options = this.$el.querySelectorAll('option');
-      for (let i = 0; i < options.length; i++) {
-        if (options[i].attributes.selected) {
-          this.dataValue = options[i].value;
-        }
-      }
-    }
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  watch: {
-    value() {
-      // this is needed to ensure selected for an option when no value is supplied
-      if (this.value === undefined) {
-        let options = this.$el.querySelectorAll('option');
-        for (let i = 0; i < options.length; i++) {
-          if (options[i].attributes.selected) {
-            this.dataValue = options[i].value;
-          }
-        }
-      }
-    },
-  },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  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 {
-        ...this.$listeners,
-        input: event => this.$emit('input', event.target.value),
-        change: event => this.$emit('change', event.target.value), // use change event for ie11 compatibility
-      };
-    },
-    internalValue() {
-      return this.dataValue ? this.dataValue : this.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.$slots['helper-text'] || (this.helperText && this.helperText.length));
-    },
-  },
-};
-</script>

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

@@ -1,4 +0,0 @@
-import CvSelect from './cv-select';
-import CvSelectOption from './cv-select-option';
-import CvSelectOptgroup from './cv-select-optgroup';
-export { CvSelect, CvSelectOption, CvSelectOptgroup };

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

@@ -1,64 +0,0 @@
-<template>
-  <div :style="{ width: width }">
-    <p
-      :class="[`${carbonPrefix}--skeleton__text`, { [`${carbonPrefix}--skeleton__heading`]: heading }]"
-      :style="{ width: line.width }"
-      :key="index"
-      v-for="(line, index) in lines"
-    ></p>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvSkeletonText',
-  mixins: [carbonPrefixMixin],
-  props: {
-    width: { type: String, default: '100%' },
-    heading: { type: Boolean, default: false },
-    lineCount: { type: Number, default: 3 },
-    paragraph: { type: Boolean, default: false },
-  },
-  methods: {
-    getRandomInt: function(min, max) {
-      return Math.floor(Math.random() * (max - min + 1)) + min;
-    },
-    calcWidth() {
-      let width = this.width;
-      if (this.paragraph) {
-        const { num, unit } = this.widthObj;
-        if (unit === '%') {
-          const randomWidth = this.getRandomInt(0, 75) + 'px';
-          width = `calc(${width} - ${randomWidth})`;
-        } else if (unit === 'px') {
-          width = this.getRandomInt(num - 75, num) + 'px';
-        }
-      }
-      return width;
-    },
-  },
-  computed: {
-    widthObj() {
-      const widthObj = { num: parseInt(this.width, 10) };
-      if (this.width.includes('px')) {
-        widthObj.unit = 'px';
-      }
-      if (this.width.includes('%')) {
-        widthObj.unit = '%';
-      }
-      return widthObj;
-    },
-    lines() {
-      return Array.from(
-        {
-          length: this.paragraph ? this.lineCount : 1,
-        },
-        () => ({
-          width: this.calcWidth(),
-        })
-      );
-    },
-  },
-};
-</script>

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

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

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

@@ -1,22 +0,0 @@
-<template>
-  <div :class="`cv-slider ${carbonPrefix}--form-item`">
-    <label :class="`${carbonPrefix}--label ${carbonPrefix}--skeleton`"></label>
-    <div :class="`${carbonPrefix}--slider-container ${carbonPrefix}--skeleton`">
-      <span :class="`${carbonPrefix}--slider__range-label`"></span>
-      <div :class="`${carbonPrefix}--slider`">
-        <div :class="`${carbonPrefix}--slider__track`"></div>
-        <div :class="`${carbonPrefix}--slider__filled-track`"></div>
-        <div :class="`${carbonPrefix}--slider__thumb`"></div>
-      </div>
-      <span :class="`${carbonPrefix}--slider__range-label`"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvSliderSkeleton',
-  mixins: [carbonPrefixMixin],
-};
-</script>