@carbon/vue 2.45.1 → 3.0.4-alpha.0

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

@@ -1,348 +0,0 @@
-<template>
-  <cv-form-item class="cv-file-uploader">
-    <p :class="`${carbonPrefix}--file--label`">{{ label }}</p>
-    <p :class="`${carbonPrefix}--label-description`">{{ helperText }}</p>
-    <div :class="`${carbonPrefix}--file`" data-file>
-      <label
-        v-if="kind === 'button'"
-        :for="uid"
-        :class="[
-          {
-            [`${carbonPrefix}--file-browse-btn`]: kind !== 'button',
-            [`${carbonPrefix}--btn`]: kind === 'button',
-            [`${carbonPrefix}--btn--primary`]: kind === 'button',
-          },
-        ]"
-        tabindex="0"
-        ref="focusTarget"
-        @keydown.enter.prevent="onShow()"
-        @keydown.space.prevent
-        @keyup.space.prevent="onShow()"
-      >
-        <slot name="drop-target">{{ internalDropTargetLabel }}</slot>
-        <input
-          v-if="kind !== 'button'"
-          v-bind="$attrs"
-          type="file"
-          :accept="accept"
-          :class="`${carbonPrefix}--file-input`"
-          :id="uid"
-          data-file-uploader
-          data-target="[data-file-container]"
-          v-on="inputListeners"
-          ref="file-input"
-        />
-      </label>
-      <label v-else :for="uid">
-        <div
-          tabindex="0"
-          ref="focusTarget"
-          data-file-drop-container
-          :class="wrapperClass"
-          role="button"
-          @dragover="onDragEvent"
-          @dragleave="onDragEvent"
-          @drop="onDragEvent"
-          @keydown.enter.prevent="onShow()"
-          @keydown.space.prevent
-          @keyup.space.prevent="onShow()"
-        >
-          <slot name="drop-target">{{ internalDropTargetLabel }}</slot>
-          <input
-            v-if="kind !== 'button'"
-            v-bind="$attrs"
-            type="file"
-            :accept="accept"
-            :class="`${carbonPrefix}--file-input`"
-            :id="uid"
-            data-file-uploader
-            data-target="[data-file-container]"
-            v-on="inputListeners"
-            ref="file-input"
-          />
-        </div>
-      </label>
-      <input
-        v-if="kind === 'button'"
-        v-bind="$attrs"
-        type="file"
-        :accept="accept"
-        :class="`${carbonPrefix}--file-input`"
-        :id="uid"
-        data-file-uploader
-        data-target="[data-file-container]"
-        v-on="inputListeners"
-        ref="file-input"
-      />
-
-      <div data-file-container :class="`${carbonPrefix}--file-container`">
-        <div
-          v-for="(file, index) in internalFiles"
-          :key="index"
-          :class="
-            isInvalid(index)
-              ? `${carbonPrefix}--file__selected-file--invalid__wrapper`
-              : `${carbonPrefix}--file__selected-file`
-          "
-        >
-          <cv-wrapper
-            :tag-type="isInvalid(index) ? 'div' : ''"
-            :class="`${carbonPrefix}--file__selected-file ${carbonPrefix}--file__selected-file--invalid`"
-          >
-            <p :class="`${carbonPrefix}--file-filename`" :title="file.file.name">{{ file.file.name }}</p>
-
-            <span
-              :data-for="uid"
-              :class="`${carbonPrefix}--file__state-container`"
-              :data-test="file.state"
-              :style="stateStyleOverides"
-            >
-              <div v-if="file.state === 'uploading'" :class="`${carbonPrefix}--inline-loading__animation`">
-                <div data-inline-loading-spinner :class="`${carbonPrefix}--loading ${carbonPrefix}--loading--small`">
-                  <svg :class="`${carbonPrefix}--loading__svg`" viewBox="-75 -75 150 150">
-                    <circle :class="`${carbonPrefix}--loading__background`" cx="0" cy="0" r="37.5" />
-                    <circle :class="`${carbonPrefix}--loading__stroke`" cx="0" cy="0" r="37.5" />
-                  </svg>
-                </div>
-              </div>
-              <CheckmarkFilled16 v-if="file.state === 'complete'" :class="`${carbonPrefix}--file-complete`" />
-              <WarningFilled16 v-if="isInvalid(index)" :class="`${carbonPrefix}--file--invalid`" />
-              <button
-                type="button"
-                :class="`${carbonPrefix}--file-close`"
-                v-if="removable"
-                :alt="removeAriaLabel"
-                :arial-label="removeAriaLabel"
-                @click="remove(index)"
-              >
-                <Close16 />
-              </button>
-            </span>
-            <div v-if="isInvalid(index)" :class="`${carbonPrefix}--form-requirement`">
-              <div :class="`${carbonPrefix}--form-requirement__title`">
-                {{ file.invalidMessageTitle || 'Invalid file' }}
-              </div>
-              <p :class="`${carbonPrefix}--form-requirement__supplement`">{{ file.invalidMessage }}</p>
-            </div>
-          </cv-wrapper>
-        </div>
-      </div>
-    </div>
-  </cv-form-item>
-</template>
-
-<script>
-import { uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-import CvFormItem from '../cv-form/cv-form-item';
-import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
-import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
-import Close16 from '@carbon/icons-vue/es/close/16';
-import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import { STATES, KINDS } from './consts.js';
-
-export default {
-  name: 'CvFileUploader',
-  components: { CvFormItem, CheckmarkFilled16, WarningFilled16, Close16, CvWrapper },
-  mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ focusTarget: ['blur', 'focus'] })],
-  inheritAttrs: false,
-  props: {
-    clearOnReselect: Boolean,
-    files: Array,
-    kind: {
-      type: String,
-      default: 'drag-target',
-      validator: val => {
-        const validValues = Object.values(KINDS);
-
-        if (!validValues.includes(val)) {
-          console.warn(`CvFileUploader: valid values for 'kind' are ${validValues}`);
-        }
-        return true;
-      },
-    },
-    label: String,
-    helperText: String,
-    accept: String,
-    initialStateUploading: Boolean,
-    removable: Boolean,
-    buttonLabel: {
-      type: String,
-      default: undefined,
-      deprecated: true,
-      validator: val => {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('CvFileUploader: button-label prop deprecated in favour of drop-target-label');
-        }
-        return true;
-      },
-    },
-    dropTargetLabel: { type: String, default: undefined },
-    removeAriaLabel: { type: String, default: 'Remove selected file' },
-  },
-  model: {
-    prop: 'files',
-    event: 'change',
-  },
-  created() {
-    this.STATES = Object.freeze(STATES);
-  },
-  data() {
-    return {
-      internalFiles: [],
-      allowDrop: false,
-    };
-  },
-  mounted() {
-    this.internalFiles = this.files ? this.files : [];
-  },
-  watch: {
-    files() {
-      this.internalFiles = this.files ? this.files : [];
-    },
-  },
-  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,
-        change: event => this.onChange(event),
-      };
-    },
-    isInvalid() {
-      return index => {
-        const result = this.internalFiles[index].invalidMessage && this.internalFiles[index].invalidMessage.length;
-        return result;
-      };
-    },
-    internalDropTargetLabel() {
-      return this.dropTargetLabel || this.buttonLabel || 'Drag and drop files here or upload';
-    },
-    stateStyleOverides() {
-      // <style carbon tweaks - DO NOT USE STYLE TAG as it causes SSR issues
-      return { display: 'inline-flex', alignItems: 'center' };
-    },
-    allowDropClass() {
-      return this.allowDrop ? ` ${this.carbonPrefix}--file__drop-container--drag-over` : '';
-    },
-    wrapperClass() {
-      const staticClass = `${this.carbonPrefix}--file__drop-container${this.allowDropClass}`;
-      const dynamicClass =
-        this.kind !== 'button'
-          ? `${this.carbonPrefix}--file-browse-btn`
-          : `${this.carbonPrefix}--btn ${this.carbonPrefix}--btn--primary`;
-
-      return `${staticClass} ${dynamicClass}`;
-    },
-  },
-  methods: {
-    remove(index) {
-      this.internalFiles.splice(index, 1);
-      this.$emit('change', this.internalFiles);
-    },
-    addFiles(files) {
-      for (const file of files) {
-        const internalFile = this.internalFiles.find(item => item.file.name === file.name);
-
-        if (internalFile) {
-          internalFile.state = this.initialStateUploading ? STATES.UPLOADING : STATES.NONE;
-          internalFile.invalidMessageTitle = '';
-          internalFile.invalidMessage = '';
-        } else {
-          const internalFile = {
-            state: this.initialStateUploading ? STATES.UPLOADING : STATES.NONE,
-            file,
-            invalidMessageTitle: '',
-            invalidMessage: '',
-          };
-
-          if (file.messageBundle) {
-            internalFile.invalidMessageTitle = file.messageBundle.invalidMessageTitle;
-            internalFile.invalidMessage = file.messageBundle.invalidMessage;
-            delete file.messageBundle;
-          }
-          this.internalFiles.push(internalFile);
-        }
-      }
-      // clear input we do not need to maintain it
-      this.$refs['file-input'].value = '';
-      this.$emit('change', this.internalFiles);
-    },
-    onChange(ev) {
-      if (ev.target.files.length !== 0 && this.clearOnReselect) {
-        this.internalFiles = [];
-      }
-      this.addFiles(ev.target.files);
-    },
-    onShow() {
-      this.$refs['file-input'].click();
-    },
-    setState(index, state) {
-      if (['uploading', 'complete', ''].includes(state)) {
-        this.internalFiles[index].state = state;
-      }
-    },
-    clear() {
-      this.internalFiles = [];
-      this.$emit('change', this.internalFiles);
-    },
-    setInvalidMessage(index, message) {
-      this.internalFiles[index].invalidMessage = message;
-    },
-    onDragEvent(evt) {
-      if (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') === -1) {
-        return;
-      }
-
-      if (evt.type === 'dragleave') {
-        this.allowDrop = false;
-        return;
-      }
-
-      if (evt.type === 'dragover') {
-        evt.preventDefault();
-        const dropEffect = 'copy';
-        if (Array.isArray(evt.dataTransfer.types)) {
-          try {
-            // IE11 throws a "permission denied" error accessing `.effectAllowed`
-            evt.dataTransfer.effectAllowed = dropEffect;
-          } catch (e) {
-            // ignore
-          }
-        }
-        evt.dataTransfer.dropEffect = dropEffect;
-        this.allowDrop = true;
-      }
-
-      if (evt.type === 'drop') {
-        evt.preventDefault();
-        if (this.accept) {
-          this.markInvalidFileTypes(evt.dataTransfer.files);
-        }
-        this.addFiles(evt.dataTransfer.files);
-        this.allowDrop = false;
-      }
-    },
-    markInvalidFileTypes(files) {
-      const isFileAllowed = file => {
-        const extension = '.' + file.name.split('.').pop();
-        const allowed = this.accept.split(',').map(x => x.trim());
-        if (allowed.includes('.jpg')) {
-          allowed.push('.jpeg');
-        }
-        return allowed.includes(file.type) || allowed.includes(extension);
-      };
-
-      for (const file of files) {
-        if (!isFileAllowed(file)) {
-          file.messageBundle = {
-            invalidMessageTitle: 'Invalid file type',
-            invalidMessage: `"${file.name}" does not have a valid file type.`,
-          };
-        }
-      }
-    },
-  },
-};
-</script>

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

@@ -1,5 +0,0 @@
-import CvFileUploader from './cv-file-uploader';
-import CvFileUploaderSkeleton from './cv-file-uploader-skeleton';
-import { KINDS, STATES } from './consts';
-
-export { CvFileUploader, CvFileUploaderSkeleton, KINDS, STATES };

package/src/components/cv-form/cv-form-group.vue

@@ -1,32 +0,0 @@
-<template>
-  <fieldset
-    :class="[
-      `cv-form-group ${carbonPrefix}--fieldset`,
-      {
-        [`${carbonPrefix}--fieldset--no-margin`]: noMargin,
-      },
-    ]"
-    :data-invalid="invalid"
-  >
-    <legend :class="`${carbonPrefix}--label`">
-      <slot name="label"></slot>
-    </legend>
-    <slot name="content"></slot>
-    <div v-if="message" :class="`${carbonPrefix}--form__requirements`">
-      {{ message }}
-    </div>
-  </fieldset>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvFormGroup',
-  mixins: [carbonPrefixMixin],
-  props: {
-    noMargin: Boolean,
-    invalid: Boolean,
-    message: String,
-  },
-};
-</script>

package/src/components/cv-form/cv-form-item.vue

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

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

@@ -1,13 +0,0 @@
-<template>
-  <form :class="`cv-form ${carbonPrefix}--form`" v-on="$listeners">
-    <slot></slot>
-  </form>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvForm',
-  mixins: [carbonPrefixMixin],
-};
-</script>

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

@@ -1,5 +0,0 @@
-import CvForm from './cv-form';
-import CvFormItem from './cv-form-item';
-import CvFormGroup from './cv-form-group';
-
-export { CvForm, CvFormItem, CvFormGroup };

package/src/components/cv-grid/cv-column.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="cv-column" :class="classes">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-
-const breakpointProp = {
-  type: [Boolean, Number, Object],
-  validator: value => {
-    if (typeof value === 'number' || typeof value === 'boolean') {
-      return true;
-    } else if (typeof value === 'object') {
-      return 'span' in value && typeof value.span === 'number' && 'offset' in value && typeof value.offset === 'number';
-    }
-
-    return false;
-  },
-};
-
-export default {
-  name: 'CvColumn',
-  mixins: [carbonPrefixMixin],
-  props: {
-    sm: breakpointProp,
-    md: breakpointProp,
-    lg: breakpointProp,
-    xlg: breakpointProp,
-    max: breakpointProp,
-  },
-  computed: {
-    classes() {
-      const classnames = [];
-
-      const breakpoints = [
-        { name: 'sm', value: this.sm },
-        { name: 'md', value: this.md },
-        { name: 'lg', value: this.lg },
-        { name: 'xlg', value: this.xlg },
-        { name: 'max', value: this.max },
-      ].filter(breakpoint => breakpoint.value !== false);
-
-      for (let i = 0; i < breakpoints.length; i += 1) {
-        const { name, value } = breakpoints[i];
-
-        if (typeof value === 'boolean') {
-          // auto-column
-          classnames.push(`${this.carbonPrefix}--col-${name}`);
-        } else if (typeof value === 'number') {
-          classnames.push(`${this.carbonPrefix}--col-${name}-${value}`);
-        } else {
-          const { span, offset } = value;
-
-          if (typeof span === 'boolean') {
-            classnames.push(`${this.carbonPrefix}--col-${name}`);
-          } else if (typeof span === 'number') {
-            classnames.push(`${this.carbonPrefix}--col-${name}-${span}`);
-          }
-
-          if (typeof offset === 'number') {
-            classnames.push(`${this.carbonPrefix}--offset-${name}-${offset}`);
-          }
-        }
-      }
-
-      if (classnames.length === 0) {
-        // no breakpoints were defined. use auto-column
-        classnames.push(`${this.carbonPrefix}--col`);
-      }
-
-      return classnames;
-    },
-  },
-};
-</script>

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

@@ -1,32 +0,0 @@
-<template>
-  <div
-    class="cv-grid"
-    :class="[
-      `${carbonPrefix}--grid`,
-      {
-        [`${carbonPrefix}--grid--full-width`]: fullWidth,
-        [`${carbonPrefix}--grid--condensed`]: kind === 'condensed',
-        [`${carbonPrefix}--grid--narrow`]: kind === 'narrow',
-      },
-    ]"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-
-export default {
-  name: 'CvGrid',
-  mixins: [carbonPrefixMixin],
-  props: {
-    fullWidth: Boolean,
-    kind: {
-      type: String,
-      default: 'wide',
-      validator: val => ['wide', 'narrow', 'condensed'].includes(val),
-    },
-  },
-};
-</script>

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

@@ -1,5 +0,0 @@
-import CvGrid from './cv-grid';
-import CvRow from './cv-row';
-import CvColumn from './cv-column';
-
-export { CvGrid, CvRow, CvColumn };

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

@@ -1,30 +0,0 @@
-<template>
-  <svg class="cv-icon">
-    <title v-if="title">{{ title }}</title>
-    <use v-bind:xlink:href="iconHref" />
-  </svg>
-</template>
-
-<script>
-const spritePath = require('../../assets/images/component-icons.svg');
-
-export default {
-  name: 'CvIcon',
-  props: {
-    href: {
-      type: String,
-      required: true,
-    },
-    title: { type: String, default: undefined },
-  },
-  computed: {
-    iconHref() {
-      // syntax used to load a knwon icon
-      if (this.href.toLowerCase().startsWith('cv(')) {
-        return `${spritePath}#${this.href.substring(3, this.href.length - 1)}`;
-      }
-      return this.href;
-    },
-  },
-};
-</script>

package/src/components/cv-inline-loading/consts.js

@@ -1,8 +0,0 @@
-const STATES = {
-  LOADED: 'loaded',
-  ERROR: 'error',
-  LOADING: 'loading',
-  ENDING: 'ending',
-};
-
-export { STATES };

package/src/components/cv-inline-loading/cv-inline-loading.vue

@@ -1,91 +0,0 @@
-<template>
-  <div data-inline-loading :class="`${carbonPrefix}--inline-loading`" role="alert" aria-live="assertive">
-    <div
-      :class="[
-        `${carbonPrefix}--inline-loading__animation`,
-        { [`${carbonPrefix}--loading--stop`]: internalState === STATES.ENDING },
-      ]"
-    >
-      <div
-        v-show="internalState === STATES.LOADING || internalState === STATES.ENDING"
-        :class="`${carbonPrefix}--loading ${carbonPrefix}--loading--small`"
-      >
-        <cv-loading :description="description" :active="active" small />
-      </div>
-      <CheckmarkFilled16
-        :hidden="internalState !== STATES.LOADED"
-        :class="`${carbonPrefix}--inline-loading__checkmark-container`"
-      />
-      <ErrorFilled16 :hidden="internalState !== STATES.ERROR" :class="`${carbonPrefix}--inline-loading--error`" />
-    </div>
-    <p :class="`${carbonPrefix}--inline-loading__text`">{{ stateText }}</p>
-  </div>
-</template>
-
-<script>
-import { STATES } from './consts';
-import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
-import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
-import { carbonPrefixMixin } from '../../mixins';
-import CvLoading from '../cv-loading/cv-loading.vue';
-
-export default {
-  name: 'CvInlineLoading',
-  components: { ErrorFilled16, CheckmarkFilled16, CvLoading },
-  mixins: [carbonPrefixMixin],
-  created() {
-    this.STATES = STATES;
-  },
-  props: {
-    active: {
-      type: Boolean,
-      default: undefined,
-      deprecated: true,
-      validator: val => {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('CvInlineLoading: active prop deprecated in favour of state prop');
-        }
-        return true;
-      },
-    },
-    description: { type: String, default: 'Loading' },
-    endingText: { type: String, default: 'Load ending...' },
-    errorText: { type: String, default: 'Loading data failed.' },
-    loadingText: { type: String, default: 'Loading data...' },
-    loadedText: { type: String, default: 'Data loaded.' },
-    state: {
-      type: String,
-      default: undefined,
-      validator: val => {
-        if (Object.keys(STATES).some(state => STATES[state] === val.toLowerCase())) {
-          return true;
-        } else {
-          console.error(`CvInlineLoading: Valid states are ${JSON.stringify(Object.values(STATES))}`);
-          return false;
-        }
-      },
-    },
-  },
-  computed: {
-    internalState() {
-      if (this.state !== undefined) {
-        return this.state.toLowerCase();
-      } else {
-        return this.active ? STATES.LOADING : STATES.LOADED;
-      }
-    },
-    stateText() {
-      switch (this.internalState) {
-        case STATES.LOADED:
-          return this.loadedText;
-        case STATES.ERROR:
-          return this.errorText;
-        case STATES.ENDING:
-          return this.endingText;
-        default:
-          return this.loadingText;
-      }
-    },
-  },
-};
-</script>

package/src/components/cv-inline-loading/index.js

@@ -1,4 +0,0 @@
-import CvInlineLoading from './cv-inline-loading';
-import { STATES } from './consts';
-
-export { CvInlineLoading, STATES };