@carbon/vue 2.45.1 → 3.0.4-alpha.0

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

@@ -1,20 +0,0 @@
-<template>
-  <div
-    disabled
-    :class="[
-      `${carbonPrefix}--list-box ${carbonPrefix}--dropdown ${carbonPrefix}--skeleton`,
-      { [`${carbonPrefix}--list-box--inline`]: inline },
-    ]"
-  ></div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvDropdownSkeleton',
-  mixins: [carbonPrefixMixin],
-  props: {
-    inline: { type: Boolean, default: false },
-  },
-};
-</script>

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

@@ -1,373 +0,0 @@
-<!--
-  Carbon Style Dropdown
-
-  Attributes:
-    placeholder: Placeholder text displayed before any  selection is made.
-
-  Usage:
-    <cv-dropdown placeholder="Choose an option">
-      <cv-dropdown-item value="10">Option 1</cv-dropdown-item>
-      <cv-dropdown-item value="20">Option 2</cv-dropdown-item>
-      <cv-dropdown-item value="30">Option 3</cv-dropdown-item>
-      <cv-dropdown-item value="40">Option 4</cv-dropdown-item>
-      <cv-dropdown-item value="50">Option 5</cv-dropdown-item>
-    </cv-dropdown>
-
--->
-
-<template>
-  <div :class="{ [`${carbonPrefix}--form-item`]: formItem }" :id="uid">
-    <div
-      :class="[
-        `${carbonPrefix}--dropdown__wrapper`,
-        `${carbonPrefix}--list-box__wrapper`,
-        {
-          [`${carbonPrefix}--dropdown__wrapper--inline`]: inline,
-          [`${carbonPrefix}--list-box__wrapper--inline`]: inline,
-          'cv-dropdown': !formItem,
-        },
-      ]"
-      :style="wrapperStyleOverride"
-    >
-      <span
-        v-if="label"
-        :id="`${uid}-label`"
-        :class="[`${carbonPrefix}--label`, { [`${carbonPrefix}--label--disabled`]: disabled }]"
-        >{{ label }}</span
-      >
-
-      <div
-        data-dropdown
-        :data-value="internalValue"
-        :data-invalid="isInvalid"
-        :class="[
-          `${carbonPrefix}--dropdown ${carbonPrefix}--list-box`,
-          {
-            [`${carbonPrefix}--dropdown--light`]: isLight,
-            [`${carbonPrefix}--dropdown--up`]: up,
-            [`${carbonPrefix}--dropdown--open`]: open,
-            [`${carbonPrefix}--list-box--expanded`]: open,
-            [`${carbonPrefix}--dropdown--invalid`]: isInvalid,
-            [`${carbonPrefix}--dropdown--disabled`]: disabled,
-            [`${carbonPrefix}--dropdown--inline`]: inline,
-            [`${carbonPrefix}--dropdown--show-selected`]: !hideSelected,
-          },
-        ]"
-        v-bind="$attrs"
-        @keydown.down.prevent="onDown"
-        @keydown.up.prevent="onUp"
-        @keydown.enter.prevent="onClick"
-        @keydown.esc.prevent="onEsc"
-        @keydown.tab="onTab"
-        @click="onClick"
-        v-clickout="onClickout"
-        ref="listbox"
-      >
-        <button
-          :class="`${carbonPrefix}--list-box__field`"
-          :aria-disabled="disabled"
-          aria-haspopup="true"
-          :aria-expanded="open ? 'true' : 'false'"
-          :aria-controls="`${uid}-menu`"
-          :aria-labelledby="ariaLabeledBy"
-          :disabled="disabled"
-          type="button"
-          ref="button"
-        >
-          <WarningFilled16 v-if="isInvalid" :class="`${carbonPrefix}--list-box__invalid-icon`" />
-          <span
-            :class="`${carbonPrefix}--list-box__label`"
-            :id="`${uid}-value`"
-            data-test="internalCaption"
-            v-html="internalCaption"
-          />
-          <div
-            :class="[`${carbonPrefix}--list-box__menu-icon`, { [`${carbonPrefix}--list-box__menu-icon--open`]: open }]"
-          >
-            <chevron-down-16 :aria-label="open ? 'Close menu' : 'Open menu'" />
-          </div>
-        </button>
-        <ul
-          :class="`${carbonPrefix}--list-box__menu`"
-          :id="`${uid}-menu`"
-          role="menu"
-          :aria-hidden="!open ? 'true' : 'false'"
-          :aria-labelledby="`${uid}-label`"
-          ref="droplist"
-          tabindex="-1"
-        >
-          <slot>
-            <cv-dropdown-item v-for="item in items" v-bind:key="item" :value="item">{{ item }}</cv-dropdown-item>
-          </slot>
-        </ul>
-      </div>
-      <div v-if="isInvalid && inline" :class="`${carbonPrefix}--form-requirement`">
-        <slot name="invalid-message">{{ invalidMessage }}</slot>
-      </div>
-    </div>
-    <div v-if="isInvalid && !inline" :class="`${carbonPrefix}--form-requirement`">
-      <slot name="invalid-message">{{ invalidMessage }}</slot>
-    </div>
-    <div
-      v-if="!inline && !isInvalid && isHelper"
-      :class="[`${carbonPrefix}--form__helper-text`, { [`${carbonPrefix}--form__helper-text--disabled`]: disabled }]"
-      :aria-disabled="disabled"
-    >
-      <slot name="helper-text">{{ helperText }}</slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import { themeMixin, uidMixin, methodsMixin, carbonPrefixMixin } from '../../mixins';
-import CvDropdownItem from './cv-dropdown-item';
-import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
-import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
-import clickout from '../../directives/clickout';
-
-export default {
-  name: 'CvDropdown',
-  inheritAttrs: false,
-  directives: { clickout },
-  mixins: [themeMixin, uidMixin, carbonPrefixMixin, methodsMixin({ button: ['blur', 'focus'] })],
-  components: { WarningFilled16, ChevronDown16, CvDropdownItem },
-  props: {
-    disabled: Boolean,
-    formItem: { type: Boolean, default: true },
-    inline: Boolean,
-    invalidMessage: { type: String, default: undefined },
-    helperText: { type: String, default: undefined },
-    label: String,
-    items: {
-      type: Array,
-      validator(arr) {
-        if (!Array.isArray(arr)) {
-          console.warn('CvDropdown - items must be in array');
-        }
-        return arr;
-      },
-    },
-    placeholder: {
-      type: String,
-      default: 'Choose an option',
-    },
-    up: Boolean,
-    value: String, // initial value of the dropdown,
-    hideSelected: Boolean,
-  },
-  data() {
-    return {
-      open: false,
-      dataValue: this.value,
-      isHelper: false,
-      isInvalid: false,
-      selectedChild: null,
-    };
-  },
-  created() {
-    // add these on created otherwise cv:mounted is too late.
-    this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
-    this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
-  },
-  mounted() {
-    this.updateChildren(this.internalValue);
-    this.checkSlots();
-  },
-  updated() {
-    document.body.removeEventListener('click', this.checkSlots);
-    this.checkSlots();
-  },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  watch: {
-    value(val) {
-      this.internalValue = val;
-    },
-  },
-  computed: {
-    ariaLabeledBy() {
-      if (this.label) {
-        return `${this.uid}-label ${this.uid}-value`;
-      } else {
-        return `${this.uid}-value`;
-      }
-    },
-    internalCaption() {
-      if (this.selectedChild) {
-        return this.selectedChild.internalContent;
-      } else {
-        return this.placeholder;
-      }
-    },
-    internalValue: {
-      get() {
-        return this.dataValue;
-      },
-      set(val) {
-        this.updateChildren(val);
-
-        if (this.dataValue !== val) {
-          // only raise event on change
-          this.dataValue = val;
-          this.$emit('change', this.dataValue);
-        }
-      },
-    },
-    chevronStyleOveride() {
-      // This allows the same chevron to be used in dropdown and tabs
-      return {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '16px',
-        width: '16px',
-      };
-    },
-    wrapperStyleOverride() {
-      // ensures correct width when used inside tabs component
-      return { width: '100%' };
-    },
-  },
-  methods: {
-    onClickout() {
-      this.open = false;
-    },
-    updateChildren(val) {
-      const childItems = this.dropdownItems();
-      let foundSelection = false;
-
-      for (let index in childItems) {
-        let child = childItems[index];
-        let selected = child.value === val;
-        child.internalSelected = selected;
-
-        if (selected) {
-          foundSelection = true;
-          this.selectedChild = child;
-        }
-      }
-
-      if (!foundSelection) {
-        this.selectedChild = null;
-      }
-    },
-    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));
-    },
-    onCvMount(srcComponent) {
-      if (srcComponent.internalSelected) {
-        this.internalValue = srcComponent.value;
-      } else {
-        if (this.internalValue === srcComponent.value) {
-          srcComponent.internalSelected = true;
-          this.internalValue = srcComponent.value;
-        }
-      }
-    },
-    onCvBeforeDestroy(srcComponent) {
-      if (srcComponent.value === this.internalValue) {
-        this.dataValue = null;
-      }
-    },
-    dropdownItems() {
-      return this.$children.filter(item => item.$_CvDropdownItem);
-    },
-    doMove(up) {
-      // requery could have changed
-      let currentFocusEl = this.$el.querySelector('.cv-dropdown-item :focus');
-      let currentFocusValue;
-      let childItems = this.dropdownItems();
-      let last = childItems.length - 1;
-      let currentFocusIndex = up ? 0 : last;
-      let nextFocusIndex;
-
-      if (currentFocusEl) {
-        currentFocusValue = currentFocusEl.parentNode.getAttribute('data-value');
-      }
-
-      if (currentFocusValue !== undefined) {
-        currentFocusIndex = childItems.findIndex(child => child.value === currentFocusValue);
-      }
-
-      if (up) {
-        nextFocusIndex = currentFocusIndex > 0 ? currentFocusIndex - 1 : last;
-        if (childItems[nextFocusIndex].internalSelected) {
-          nextFocusIndex = nextFocusIndex > 0 ? nextFocusIndex - 1 : last;
-        }
-      } else {
-        nextFocusIndex = currentFocusIndex < last ? currentFocusIndex + 1 : 0;
-        if (childItems[nextFocusIndex].internalSelected) {
-          nextFocusIndex = nextFocusIndex < last ? nextFocusIndex + 1 : 0;
-        }
-      }
-
-      childItems[nextFocusIndex].setFocus();
-    },
-    doFocus() {
-      this.$nextTick(() => {
-        if (this.open) {
-          this.$refs.droplist.focus();
-        } else {
-          this.focus();
-        }
-      });
-    },
-    onDown() {
-      if (!this.open) {
-        this.open = true;
-      } else {
-        this.doMove(false);
-      }
-    },
-    onUp() {
-      if (this.open) {
-        this.doMove(true);
-      }
-    },
-    onEsc() {
-      this.open = false;
-      this.doFocus();
-    },
-    onTab(ev) {
-      if (this.open) {
-        if (this.$refs.button.$el === ev.target) {
-          // button has focus ensure we are closed
-          this.open = false;
-        } else if (ev.target === null || this.$refs.listbox.contains(ev.target)) {
-          // list has focus, close and return focus to dropdown
-          this.open = false;
-          this.doFocus();
-          ev.preventDefault();
-        }
-      }
-    },
-    onClick(ev) {
-      if (this.disabled) {
-        ev.preventDefault();
-      } else {
-        this.open = !this.open;
-        this.doFocus(); // open or close (Some browsers do not focus on button when clicked)
-
-        let target = ev.target;
-        while (
-          !target.classList.contains(`${this.carbonPrefix}--dropdown-link`) &&
-          this.$refs.droplist.contains(target)
-        ) {
-          target = target.parentNode; // try next one up
-        }
-
-        if (target.classList.contains(`${this.carbonPrefix}--dropdown-link`)) {
-          const targetItemEl = target.parentNode;
-          const newValue = targetItemEl.getAttribute('data-value');
-
-          this.internalValue = newValue;
-        }
-      }
-    },
-  },
-};
-</script>

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

@@ -1,5 +0,0 @@
-import CvDropdown from './cv-dropdown';
-import CvDropdownItem from './cv-dropdown-item';
-import CvDropdownSkeleton from './cv-dropdown-skeleton';
-
-export { CvDropdown, CvDropdownItem, CvDropdownSkeleton };

package/src/components/cv-feedback-button/_cv-feedback-button.vue

@@ -1,74 +0,0 @@
-<template>
-  <button
-    :aria-label="ariaLabel"
-    type="button"
-    class="cv-feedback-button"
-    v-bind="$attrs"
-    data-copy-btn
-    :class="{
-      [`${carbonPrefix}--copy-btn`]: !inline,
-      [`${carbonPrefix}--copy-btn--animating`]: feedbackPhase && feedbackPhase !== feedbackPhases.DEFAULT,
-      [`${carbonPrefix}--copy-btn--fade-in`]: feedbackPhase && feedbackPhase === feedbackPhases.FADE_IN,
-      [`${carbonPrefix}--copy-btn--fade-out`]: feedbackPhase && feedbackPhase === feedbackPhases.FADE_OUT,
-    }"
-    @click="onClick"
-    @animationend="onAnimationEnd"
-  >
-    <slot></slot>
-    <span :class="`${carbonPrefix}--assistive-text ${carbonPrefix}--copy-btn__feedback`">{{ feedback }}</span>
-  </button>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-const feedbackPhases = {
-  DEFAULT: 0,
-  FADE_IN: 1,
-  ACTIVE: 2,
-  FADE_OUT: 3,
-};
-export default {
-  name: 'cvFeedbackButton',
-  mixins: [carbonPrefixMixin],
-  inheritAttrs: false,
-  props: {
-    ariaLabel: { type: String, default: 'Feedback button' },
-    feedback: { type: String, required: true },
-    inline: Boolean,
-    timeout: { type: Number, default: 2000 },
-  },
-  created() {
-    this.feedbackPhases = feedbackPhases;
-  },
-  data() {
-    return {
-      feedbackPhase: feedbackPhases.DEFAULT,
-    };
-  },
-  methods: {
-    onClick() {
-      if (this.feedbackPhase === feedbackPhases.DEFAULT) {
-        this.$emit('click');
-
-        // start fade in animation
-        this.feedbackPhase = feedbackPhases.FADE_IN;
-      }
-    },
-    onAnimationEnd() {
-      if (this.feedbackPhase === feedbackPhases.FADE_IN) {
-        // fade in animation complete
-        this.feedbackPhase = feedbackPhases.ACTIVE;
-
-        setTimeout(() => {
-          // queue fade out
-          this.feedbackPhase = feedbackPhases.FADE_OUT;
-        }, 2000);
-      }
-      if (this.feedbackPhase === feedbackPhases.FADE_OUT) {
-        // reset to start
-        this.feedbackPhase = feedbackPhases.DEFAULT;
-      }
-    },
-  },
-};
-</script>

package/src/components/cv-file-uploader/consts.js

@@ -1,12 +0,0 @@
-const STATES = {
-  NONE: '',
-  UPLOADING: 'uploading',
-  COMPLETE: 'complete',
-};
-
-const KINDS = {
-  DRAG_TARGET: 'drag-target',
-  BUTTON: 'button',
-};
-
-export { KINDS, STATES };

package/src/components/cv-file-uploader/cv-file-uploader-skeleton.vue

@@ -1,22 +0,0 @@
-<template>
-  <div :class="`${carbonPrefix}--form-item`">
-    <cv-skeleton-text heading width="100px" />
-    <cv-skeleton-text width="225px" :class="`${carbonPrefix}--label-description`" />
-    <cv-button-skeleton />
-  </div>
-</template>
-
-<script>
-import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
-import CvButtonSkeleton from '../cv-button/cv-button-skeleton';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvFileUploaderSkeleton',
-  mixins: [carbonPrefixMixin],
-  components: {
-    CvSkeletonText,
-    CvButtonSkeleton,
-  },
-};
-</script>