@carbon/vue 2.45.0 → 3.0.4-alpha.0

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

@@ -1,59 +0,0 @@
-<template>
-  <ul
-    data-accordion
-    :class="[
-      `cv-accordion ${carbonPrefix}--accordion`,
-      {
-        [`${carbonPrefix}--accordion--${align}`]: align,
-        [`${carbonPrefix}--accordion--${size}`]: size,
-      },
-    ]"
-  >
-    <slot></slot>
-  </ul>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvAccordion',
-  props: {
-    align: { type: String, default: 'start', validator: val => ['start', 'end', ''].includes(val) },
-    size: {
-      type: String,
-      default: '',
-      validator: val => ['sm', 'md', 'lg', 'xl', ''].includes(val),
-    },
-  },
-  mixins: [carbonPrefixMixin],
-  created() {
-    this.$on('cv:change', srcComponent => this.onCvChange(srcComponent));
-  },
-  computed: {
-    state: {
-      get() {
-        const items = this.$children.filter(item => item.$_CvAccordionItem);
-        return items.map(item => item.dataOpen);
-      },
-      set(val) {
-        const items = this.$children.filter(item => item.$_CvAccordionItem);
-
-        if (items.length > 0) {
-          // loop through all items setting
-          for (const i in items) {
-            // making no attempt to verify array
-            items[i].dataOpen = val[i] !== undefined ? !!val[i] : false;
-          }
-        }
-      },
-    },
-  },
-  methods: {
-    onCvChange(srcComponent) {
-      const index = this.$children.findIndex(item => item.uid === srcComponent.uid);
-      this.$emit('change', { changedIndex: index, state: this.state });
-    },
-  },
-};
-</script>

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

@@ -1,5 +0,0 @@
-import CvAccordion from './cv-accordion';
-import CvAccordionItem from './cv-accordion-item';
-import CvAccordionSkeleton from './cv-accordion-skeleton';
-
-export { CvAccordion, CvAccordionItem, CvAccordionSkeleton };

package/src/components/cv-aspect-ratio/cv-aspect-ratio.vue

@@ -1,28 +0,0 @@
-<template>
-  <div :class="[`${carbonPrefix}--aspect-ratio`, `${carbonPrefix}--aspect-ratio--${ratio}`]"><slot /></div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-
-export const ratios = ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'];
-export default {
-  name: 'CvAspectRatio',
-  mixins: [carbonPrefixMixin],
-  props: {
-    ratio: {
-      type: String,
-      validator: val => {
-        const result = ratios.includes(val);
-        if (!result) {
-          console.warn(`Invalid options supplied to "CvAspectRation"-"${val}".`);
-        }
-        return result;
-      },
-      required: true,
-    },
-  },
-};
-</script>
-
-<style lang="scss"></style>

package/src/components/cv-aspect-ratio/index.js

@@ -1,2 +0,0 @@
-import CvAspectRatio, { ratios } from './cv-aspect-ratio';
-export { CvAspectRatio, ratios };

package/src/components/cv-breadcrumb/_cv-breadcrumb-item-skeleton.vue

@@ -1,13 +0,0 @@
-<template>
-  <div :class="`${carbonPrefix}--breadcrumb-item`">
-    <a :class="`${carbonPrefix}--link`">&nbsp;</a>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvBreadcrumbItemSkeleton',
-  mixins: [carbonPrefixMixin],
-};
-</script>

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

@@ -1,28 +0,0 @@
-<template>
-  <div
-    :class="[
-      `cv-breadcrumb-item ${carbonPrefix}--breadcrumb-item`,
-      { [`${carbonPrefix}--breadcrumb-item--current`]: activePage },
-    ]"
-    :aria-current="ariaCurrent"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvBreadcrumbItem',
-  mixins: [carbonPrefixMixin],
-  props: {
-    active: Boolean,
-    ariaCurrent: String,
-  },
-  computed: {
-    activePage() {
-      return this.active && this.ariaCurrent !== 'page';
-    },
-  },
-};
-</script>

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

@@ -1,30 +0,0 @@
-<template>
-  <nav
-    :class="[
-      `${carbonPrefix}--breadcrumb ${carbonPrefix}--skeleton`,
-      { [`${carbonPrefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash },
-    ]"
-    :aria-label="ariaLabel"
-  >
-    <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
-    <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
-    <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
-  </nav>
-</template>
-
-<script>
-import CvBreadcrumbItemSkeleton from './_cv-breadcrumb-item-skeleton';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvBreadcrumbSkeleton',
-  mixins: [carbonPrefixMixin],
-  components: {
-    CvBreadcrumbItemSkeleton,
-  },
-  props: {
-    ariaLabel: { type: String, default: 'breadcrumb' },
-    noTrailingSlash: Boolean,
-  },
-};
-</script>

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

@@ -1,21 +0,0 @@
-<template>
-  <nav
-    class="cv-breadcrumb"
-    :class="[`${carbonPrefix}--breadcrumb`, { [`${carbonPrefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash }]"
-    :aria-label="ariaLabel"
-  >
-    <slot></slot>
-  </nav>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvBreadcrumb',
-  mixins: [carbonPrefixMixin],
-  props: {
-    ariaLabel: { type: String, default: 'breadcrumb' },
-    noTrailingSlash: Boolean,
-  },
-};
-</script>

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

@@ -1,5 +0,0 @@
-import CvBreadcrumb from './cv-breadcrumb';
-import CvBreadcrumbItem from './cv-breadcrumb-item';
-import CvBreadcrumbSkeleton from './cv-breadcrumb-skeleton';
-
-export { CvBreadcrumb, CvBreadcrumbItem, CvBreadcrumbSkeleton };

package/src/components/cv-button/button-mixin.js

@@ -1,91 +0,0 @@
-import { settings as carbonSettings } from 'carbon-components';
-
-export default {
-  props: {
-    icon: {
-      type: [String, Object],
-      default: undefined,
-      validator(val) {
-        if (!val || typeof val === 'string') {
-          return true;
-        }
-        return val.render !== null;
-      },
-    },
-    iconHref: {
-      deprecated: true,
-      type: String,
-      default: undefined,
-      validator(val) {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('CvButton: iconHref deprecated in favour of icon to be removed in future versions.');
-        }
-        return true;
-      },
-    },
-    kind: {
-      type: String,
-      default: 'primary',
-      validator: val =>
-        ['', 'primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--ghost', 'danger--tertiary'].includes(val),
-    },
-    small: {
-      deprecated: true,
-      type: Boolean,
-      default: undefined,
-      validator(val) {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('CvButton: small deprecated in favour of size.');
-        }
-        return true;
-      },
-    },
-    size: {
-      type: String,
-      default: undefined,
-      validator: val => ['', 'default', 'field', 'small', 'sm', 'lg', 'xl'].includes(val),
-    },
-  },
-  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 Object.assign({}, this.$listeners, {
-        click: event => this.$emit('click', event),
-      });
-    },
-    buttonClassOpts() {
-      return (opts = {}) => {
-        const classes = [`${carbonSettings.prefix}--btn`];
-        // ensure lower case and default to primary
-        const _kind = this.kind ? this.kind.toLowerCase() : 'primary';
-
-        if (opts.skeleton) {
-          classes.push(`${carbonSettings.prefix}--skeleton`);
-        }
-
-        if (opts.iconOnly) {
-          classes.push(`${carbonSettings.prefix}--btn--icon-only`);
-          if (this.selected && _kind === 'ghost') {
-            classes.push(`${carbonSettings.prefix}--btn--selected`);
-          }
-        }
-
-        if (_kind && !opts.skeleton) {
-          classes.push(`${carbonSettings.prefix}--btn--${_kind}`);
-        }
-
-        let size = this.size ? this.size : this.small && 'sm';
-        if (size === 'small') {
-          size = 'sm';
-        }
-        if (size && !(size === '' || size === 'default')) {
-          classes.push(`${carbonSettings.prefix}--btn--${size}`);
-        }
-
-        return classes;
-      };
-    },
-  },
-};

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

@@ -1,17 +0,0 @@
-<template>
-  <div class="cv-button-set" :class="[`${carbonPrefix}--btn-set`, { [`${carbonPrefix}--btn-set--stacked`]: stacked }]">
-    <slot />
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvButtonSet',
-  mixins: [carbonPrefixMixin],
-  props: {
-    stacked: Boolean,
-  },
-};
-</script>

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

@@ -1,12 +0,0 @@
-<template>
-  <button disabled :class="buttonClassOpts({ skeleton: true })" type="button"></button>
-</template>
-
-<script>
-import buttonMixin from './button-mixin';
-
-export default {
-  name: 'CvButtonSkeleton',
-  mixins: [buttonMixin],
-};
-</script>

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

@@ -1,19 +0,0 @@
-<template>
-  <button class="cv-button" :class="buttonClassOpts()" v-on="inputListeners" role="button">
-    <slot></slot>
-
-    <CvSvg v-if="icon || iconHref" :svg="icon || iconHref" :class="`${carbonPrefix}--btn__icon`" />
-  </button>
-</template>
-
-<script>
-import buttonMixin from './button-mixin';
-import { carbonPrefixMixin } from '../../mixins';
-import CvSvg from '../cv-svg/_cv-svg';
-
-export default {
-  name: 'CvButton',
-  mixins: [buttonMixin, carbonPrefixMixin],
-  components: { CvSvg },
-};
-</script>

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

@@ -1,42 +0,0 @@
-<template>
-  <button
-    :aria-pressed="kind === 'ghost' && selected"
-    class="cv-button"
-    :class="[
-      ...buttonClassOpts({ iconOnly: true }),
-      `${carbonPrefix}--tooltip__trigger`,
-      `${carbonPrefix}--tooltip--a11y`,
-      `${carbonPrefix}--tooltip--${tipPosition || 'bottom'}`,
-      `${carbonPrefix}--tooltip--align-${tipAlignment || 'center'}`,
-    ]"
-    v-on="inputListeners"
-    type="button"
-  >
-    <span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>
-    <slot name="icon">
-      <CvSvg v-if="icon || iconHref" :svg="icon || iconHref" :class="`${carbonPrefix}--btn__icon`" />
-    </slot>
-  </button>
-</template>
-
-<script>
-import buttonMixin from './button-mixin';
-import { carbonPrefixMixin } from '../../mixins';
-import CvSvg from '../cv-svg/_cv-svg';
-
-export default {
-  name: 'CvIconButton',
-  mixins: [buttonMixin, carbonPrefixMixin],
-  components: { CvSvg },
-  props: {
-    label: { type: String, default: undefined },
-    selected: Boolean,
-    tipPosition: {
-      type: String,
-      default: 'bottom',
-      validator: val => ['top', 'left', 'bottom', 'right'].includes(val),
-    },
-    tipAlignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
-  },
-};
-</script>

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

@@ -1,6 +0,0 @@
-import CvButton from './cv-button';
-import CvIconButton from './cv-icon-button';
-import CvButtonSkeleton from './cv-button-skeleton';
-import CvButtonSet from './cv-button-set';
-
-export { CvButton, CvIconButton, CvButtonSkeleton, CvButtonSet };

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

@@ -1,15 +0,0 @@
-<template>
-  <div class="cv-checkbox" :class="`${carbonPrefix}--form-item ${carbonPrefix}--checkbox-wrapper`">
-    <label :class="`${carbonPrefix}--checkbox-label ${carbonPrefix}--skeleton`">
-      <span :class="`${carbonPrefix}--checkbox-label-text ${carbonPrefix}--skeleton`"></span>
-    </label>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvCheckboxSkeleton',
-  mixins: [carbonPrefixMixin],
-};
-</script>

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

@@ -1,70 +0,0 @@
-<template>
-  <div class="cv-checkbox" :class="[`${carbonPrefix}--checkbox-wrapper`, { [`${carbonPrefix}--form-item`]: formItem }]">
-    <input
-      ref="input"
-      v-bind="$attrs"
-      v-on="inputListeners"
-      :class="`${carbonPrefix}--checkbox`"
-      type="checkbox"
-      :checked="isChecked === true"
-      @focus="onFocus"
-      @blur="onBlur"
-      :value="value"
-      :id="uid"
-    />
-    <label
-      :class="[
-        `${carbonPrefix}--checkbox-label`,
-        {
-          [`${carbonPrefix}--label--disabled`]: $attrs.disabled !== undefined && this.$attrs.disabled,
-          [`${carbonPrefix}--checkbox-label__focus`]: hasFocus,
-        },
-      ]"
-      :data-contained-checkbox-state="isChecked"
-      :data-contained-checkbox-disabled="$attrs.disabled"
-      :for="uid"
-    >
-      <span :class="[`${carbonPrefix}--checkbox-label-text`, { [`${carbonPrefix}--visually-hidden`]: hideLabel }]">
-        {{ label }}
-      </span>
-    </label>
-  </div>
-</template>
-
-<script>
-import { checkMixin, uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-
-export default {
-  name: 'CvCheckbox',
-  mixins: [checkMixin, uidMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  inheritAttrs: false,
-  props: {
-    hideLabel: Boolean,
-    label: String,
-    mixed: Boolean,
-    formItem: { type: Boolean, default: true },
-  },
-  watch: {
-    mixed() {
-      this.dataMixed = this.mixed;
-      if (this.dataMixed && this.checked !== true) {
-        this.isChecked = false; // reset check state so mixed takes
-      }
-    },
-  },
-  data() {
-    return {
-      hasFocus: false,
-      dataMixed: this.mixed,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.hasFocus = true;
-    },
-    onBlur() {
-      this.hasFocus = false;
-    },
-  },
-};
-</script>

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

@@ -1,3 +0,0 @@
-import CvCheckbox from './cv-checkbox';
-import CvCheckboxSkeleton from './cv-checkbox-skeleton';
-export { CvCheckbox, CvCheckboxSkeleton };

package/src/components/cv-code-snippet/_cv-code-snippet-inline.vue

@@ -1,39 +0,0 @@
-<template>
-  <cv-feedback-button
-    v-if="!hideCopyButton"
-    class="cv-code-snippet-inline"
-    :class="classes"
-    :disabled="disabled"
-    :feedback="copyFeedback"
-    inline
-    :title="feedbackAriaLabel"
-    :ariaLabel="feedbackAriaLabel"
-    @click="$emit('copy-code')"
-    ><slot
-  /></cv-feedback-button>
-  <span v-else :class="classes"><slot /></span>
-</template>
-
-<script>
-import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvCodeSnippetInline',
-  mixins: [carbonPrefixMixin],
-  components: {
-    CvFeedbackButton,
-  },
-  props: {
-    copyFeedback: String,
-    disabled: Boolean,
-    feedbackAriaLabel: String,
-    hideCopyButton: Boolean,
-  },
-  computed: {
-    classes() {
-      return [`${this.carbonPrefix}--snippet`, `${this.carbonPrefix}--snippet--inline`];
-    },
-  },
-};
-</script>

package/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue

@@ -1,79 +0,0 @@
-<template>
-  <div
-    class="cv-code-snippet-multiline"
-    :class="[
-      `${carbonPrefix}--snippet`,
-      `${carbonPrefix}--snippet--multi`,
-      { [`${carbonPrefix}--snippet--expand`]: expanded, [`${carbonPrefix}--snippet--disabled`]: disabled },
-    ]"
-    data-code-snippet
-  >
-    <div :class="[`${carbonPrefix}--snippet-container`]">
-      <pre><slot /></pre>
-    </div>
-    <cv-feedback-button
-      v-if="!hideCopyButton"
-      :disabled="disabled"
-      :feedback="copyFeedback"
-      :title="feedbackAriaLabel"
-      :ariaLabel="feedbackAriaLabel"
-      @click="$emit('copy-code')"
-    >
-      <Copy16 :class="`${carbonPrefix}--snippet__icon`" />
-    </cv-feedback-button>
-
-    <cv-button
-      type="button"
-      kind="ghost"
-      size="small"
-      :class="`${carbonPrefix}--snippet-btn--expand`"
-      @click="toggleExpand"
-    >
-      <span :class="`${carbonPrefix}--snippet-btn--text`">{{ expandButtonText }}</span>
-      <ChevronDown16 :class="`${carbonPrefix}--icon-chevron--down`" />
-    </cv-button>
-  </div>
-</template>
-
-<script>
-import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
-import CvButton from '../cv-button/cv-button';
-
-import Copy16 from '@carbon/icons-vue/es/copy/16';
-import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvCodeSnippetMultiline',
-  mixins: [carbonPrefixMixin],
-  components: {
-    CvButton,
-    CvFeedbackButton,
-    Copy16,
-    ChevronDown16,
-  },
-  props: {
-    copyFeedback: String,
-    disabled: Boolean,
-    feedbackAriaLabel: String,
-    hideCopyButton: Boolean,
-    lessText: { type: String, default: 'Show less' },
-    moreText: { type: String, default: 'Show more' },
-  },
-  data() {
-    return {
-      expanded: false,
-    };
-  },
-  computed: {
-    expandButtonText() {
-      return this.expanded ? this.lessText : this.moreText;
-    },
-  },
-  methods: {
-    toggleExpand() {
-      this.expanded = !this.expanded;
-    },
-  },
-};
-</script>

package/src/components/cv-code-snippet/_cv-code-snippet-oneline.vue

@@ -1,47 +0,0 @@
-<template>
-  <div
-    class="cv-code-snippet-oneline"
-    :class="[
-      `${carbonPrefix}--snippet`,
-      `${carbonPrefix}--snippet--single`,
-      {
-        [`${carbonPrefix}--snippet--disabled`]: disabled,
-      },
-    ]"
-  >
-    <div :class="`${carbonPrefix}--snippet-container`">
-      <pre><slot /></pre>
-    </div>
-    <cv-feedback-button
-      v-if="!hideCopyButton"
-      :disabled="disabled"
-      :feedback="copyFeedback"
-      :ariaLabel="feedbackAriaLabel"
-      :title="feedbackAriaLabel"
-      @click="$emit('copy-code')"
-    >
-      <Copy16 :class="`${carbonPrefix}--snippet__icon`" />
-    </cv-feedback-button>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
-import Copy16 from '@carbon/icons-vue/es/copy/16';
-
-export default {
-  name: 'CvCodeSnippetOneline',
-  mixins: [carbonPrefixMixin],
-  components: {
-    CvFeedbackButton,
-    Copy16,
-  },
-  props: {
-    copyFeedback: String,
-    disabled: Boolean,
-    feedbackAriaLabel: String,
-    hideCopyButton: Boolean,
-  },
-};
-</script>