@carbon/vue 2.45.1 → 3.0.4-alpha.0

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

@@ -1,89 +0,0 @@
-<template>
-  <div
-    data-notification
-    :class="[
-      'cv-inline-notification',
-      `${carbonPrefix}--inline-notification`,
-      `${carbonPrefix}--inline-notification--${kind.toLowerCase()}`,
-      {
-        [`${carbonPrefix}--inline-notification--low-contrast`]: lowContrast,
-      },
-    ]"
-    v-on="$listeners"
-    :role="isAlert ? 'alert' : false"
-    :aria-live="!isAlert ? 'polite' : false"
-  >
-    <div :class="`${carbonPrefix}--inline-notification__details`">
-      <component :is="icon" :class="`${carbonPrefix}--inline-notification__icon`" />
-      <div :class="`${carbonPrefix}--inline-notification__text-wrapper`">
-        <p :class="`${carbonPrefix}--inline-notification__title`">{{ title }}</p>
-        <p :class="`${carbonPrefix}--inline-notification__subtitle`" v-html="subTitle"></p>
-      </div>
-    </div>
-    <button
-      v-if="actionLabel"
-      @click="$emit('action')"
-      :class="[
-        `${carbonPrefix}--inline-notification__action-button`,
-        `${carbonPrefix}--btn`,
-        `${carbonPrefix}--btn--sm`,
-        `${carbonPrefix}--btn--ghost`,
-      ]"
-      type="button"
-    >
-      {{ actionLabel }}
-    </button>
-    <button
-      v-if="!hideCloseButton"
-      type="button"
-      :aria-label="closeAriaLabel"
-      data-notification-btn
-      :class="`${carbonPrefix}--inline-notification__close-button`"
-      @click="$emit('close')"
-    >
-      <Close20 :class="`${carbonPrefix}--inline-notification__close-icon`" />
-    </button>
-  </div>
-</template>
-
-<script>
-import { notificationMixin, carbonPrefixMixin } from '../../mixins';
-import ErrorFilled20 from '@carbon/icons-vue/es/error--filled/20';
-import CheckmarkFilled20 from '@carbon/icons-vue/es/checkmark--filled/20';
-import WarningFilled20 from '@carbon/icons-vue/es/warning--filled/20';
-import Close20 from '@carbon/icons-vue/es/close/20';
-import InformationFilled20 from '@carbon/icons-vue/es/information--filled/20';
-
-export default {
-  name: 'CvInlineNotification',
-  components: { Close20 },
-  mixins: [notificationMixin, carbonPrefixMixin],
-  props: {
-    actionLabel: { type: String, default: '' },
-    closeAriaLabel: { type: String, default: 'Dismiss notification' },
-    kind: {
-      type: String,
-      default: 'info',
-      validator: val => ['error', 'info', 'warning', 'success'].includes(val),
-    },
-    lowContrast: Boolean,
-    hideCloseButton: Boolean,
-  },
-  computed: {
-    icon() {
-      switch (this.kind) {
-        case 'error':
-          return ErrorFilled20;
-        case 'warning':
-          return WarningFilled20;
-        case 'success':
-          return CheckmarkFilled20;
-        case 'info':
-          return InformationFilled20;
-        default:
-          return '';
-      }
-    },
-  },
-};
-</script>

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

@@ -1,3 +0,0 @@
-import CvInlineNotification from './cv-inline-notification';
-
-export { CvInlineNotification };

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

@@ -1,30 +0,0 @@
-<template>
-  <component
-    :is="tagType"
-    v-on="$listeners"
-    v-bind="linkProps"
-    class="cv-link"
-    :class="[
-      `${carbonPrefix}--link`,
-      {
-        [`${carbonPrefix}--link--disabled`]: disabled,
-        [`${carbonPrefix}--link--inline`]: inline,
-      },
-    ]"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-import { linkMixin, carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvLink',
-  mixins: [linkMixin, carbonPrefixMixin],
-  props: {
-    disabled: Boolean,
-    inline: Boolean,
-  },
-};
-</script>

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

@@ -1,3 +0,0 @@
-import CvLink from './cv-link';
-
-export { CvLink };

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

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

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

@@ -1,42 +0,0 @@
-<template>
-  <component
-    :is="tagType"
-    class="cv-list"
-    :class="{
-      [`${carbonPrefix}--list--nested`]: nested,
-      [`${carbonPrefix}--list--ordered`]: internalOrdered,
-      [`${carbonPrefix}--list--unordered`]: !internalOrdered,
-    }"
-    :data-nested="nested"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvList',
-  mixins: [carbonPrefixMixin],
-  props: {
-    ordered: { type: Boolean, default: undefined },
-    nested: Boolean,
-  },
-  computed: {
-    internalOrdered() {
-      if (this.nested && this.ordered === undefined) {
-        if (this.$parent && this.$parent.$parent && this.$parent.$parent.$_CvList) {
-          return this.$parent.$parent.internalOrdered;
-        }
-      }
-      return this.ordered;
-    },
-    tagType() {
-      return this.internalOrdered ? 'ol' : 'ul';
-    },
-  },
-  created() {
-    this.$_CvList = true;
-  },
-};
-</script>

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

@@ -1,4 +0,0 @@
-import CvList from './cv-list';
-import CvListItem from './cv-list-item';
-
-export { CvList, CvListItem };

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

@@ -1,86 +0,0 @@
-<template>
-  <cv-wrapper :tag-type="overlay ? 'div' : ''" class="cv-loading" :class="overlayClasses">
-    <div
-      data-loading
-      :class="{
-        'cv-loading': !overlay,
-        [`${carbonPrefix}--loading`]: active || stopping,
-        [`${carbonPrefix}--loading--stop`]: (!active && stopping) || stopped,
-        [`${carbonPrefix}--loading--small`]: small,
-      }"
-      ref="loading"
-    >
-      <label :class="`${carbonPrefix}--visually-hidden`">
-        {{ description }}
-      </label>
-      <svg :class="`${carbonPrefix}--loading__svg`" viewBox="0 0 100 100">
-        <title>{{ description }}</title>
-        <circle v-if="small" :class="`${carbonPrefix}--loading__background`" cx="50%" cy="50%" :r="loadingRadius" />
-        <circle :class="`${carbonPrefix}--loading__stroke`" cx="50%" cy="50%" :r="loadingRadius" />
-      </svg>
-    </div>
-  </cv-wrapper>
-</template>
-
-<script>
-import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvLoading',
-  mixins: [carbonPrefixMixin],
-  components: { CvWrapper },
-  props: {
-    active: { type: Boolean, default: true },
-    description: { type: String, default: 'Loading' },
-    overlay: Boolean,
-    small: Boolean,
-  },
-  computed: {
-    overlayClasses() {
-      const classes = [];
-      if (this.overlay) {
-        if (this.active || this.stopping) {
-          classes.push(`${this.carbonPrefix}--loading-overlay`);
-        } else {
-          classes.push(`${this.carbonPrefix}--loading-overlay--stop`);
-        }
-      }
-
-      return classes;
-    },
-    loadingRadius() {
-      return this.small ? '42' : '44';
-    },
-  },
-  data() {
-    return {
-      stopped: false,
-      stopping: false,
-    };
-  },
-  watch: {
-    active(val) {
-      this.onActiveUpdate(val);
-    },
-  },
-  methods: {
-    onEnd(ev) {
-      if (ev.animationName === 'rotate-end-p2') {
-        this.$refs.loading.removeEventListener('animationend', this.onEnd);
-
-        this.stopping = false;
-        this.stopped = true;
-        this.$emit('loading-end');
-      }
-    },
-    onActiveUpdate(newValue) {
-      this.stopped = false;
-      this.stopping = !newValue;
-      if (!newValue) {
-        this.$refs.loading.addEventListener('animationend', this.onEnd);
-      }
-    },
-  },
-};
-</script>

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

@@ -1,3 +0,0 @@
-import CvLoading from './cv-loading';
-
-export { CvLoading };

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

@@ -1,299 +0,0 @@
-<template>
-  <div
-    data-modal
-    :id="uid"
-    :class="[
-      `cv-modal ${carbonPrefix}--modal`,
-      {
-        'is-visible': dataVisible,
-        [`${carbonPrefix}--modal--danger`]: kind === 'danger',
-      },
-    ]"
-    tabindex="-1"
-    @keydown.esc.prevent="onEsc"
-    @click.self="onExternalClick"
-  >
-    <div
-      :class="[
-        `${carbonPrefix}--modal-container`,
-        { [`${carbonPrefix}--modal-container--${internalSize}`]: internalSize },
-      ]"
-      v-bind="dialogAttrs"
-      ref="modalDialog"
-    >
-      <div
-        class="cv-modal__before-content"
-        ref="beforeContent"
-        tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
-        role="separator"
-        aria-valuenow="0"
-        @focus="focusBeforeContent"
-      />
-      <div :class="`${carbonPrefix}--modal-header`">
-        <p :class="`${carbonPrefix}--modal-header__label`">
-          <slot name="label"></slot>
-        </p>
-        <p :class="`${carbonPrefix}--modal-header__heading`">
-          <slot name="title">Modal Title</slot>
-        </p>
-        <button
-          :class="`${carbonPrefix}--modal-close`"
-          type="button"
-          @click="onClose"
-          ref="close"
-          :aria-label="closeAriaLabel"
-        >
-          <Close16 :class="`${carbonPrefix}--modal-close__icon`" />
-        </button>
-      </div>
-
-      <div
-        :class="[`${carbonPrefix}--modal-content`, { [`${carbonPrefix}--modal-content--with-form`]: hasFormContent }]"
-        ref="content"
-        :tabindex="scrollable ? 0 : undefined"
-      >
-        <slot name="content"></slot>
-      </div>
-
-      <cv-button-set
-        :class="[
-          `${carbonPrefix}--modal-footer`,
-          { [`${carbonPrefix}--modal-footer--three-button`]: hasPrimary && hasSecondary && hasOtherBtn },
-        ]"
-        v-if="hasFooter"
-      >
-        <cv-button type="button" kind="secondary" @click="onOtherBtnClick" v-if="hasOtherBtn" ref="otherBtn">
-          <slot name="other-button">Other button</slot>
-        </cv-button>
-        <cv-button type="button" kind="secondary" @click="onSecondaryClick" v-if="hasSecondary" ref="secondary">
-          <slot name="secondary-button">Secondary button</slot>
-        </cv-button>
-        <cv-button
-          :disabled="primaryButtonDisabled"
-          type="button"
-          :kind="primaryKind"
-          @click="onPrimaryClick"
-          v-if="hasPrimary"
-          ref="primary"
-        >
-          <slot name="primary-button">Primary button</slot>
-        </cv-button>
-      </cv-button-set>
-      <div
-        class="cv-modal__after-content"
-        ref="afterContent"
-        tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
-        role="separator"
-        aria-valuenow="1"
-        @focus="focusAfterContent"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import CvButton from '../cv-button/cv-button';
-import { uidMixin, carbonPrefixMixin } from '../../mixins';
-import Close16 from '@carbon/icons-vue/es/close/16';
-import CvButtonSet from '../cv-button/cv-button-set.vue';
-
-export default {
-  name: 'CvModal',
-  mixins: [uidMixin, carbonPrefixMixin],
-  components: {
-    CvButton,
-    Close16,
-    CvButtonSet,
-  },
-  props: {
-    alert: Boolean,
-    closeAriaLabel: { type: String, default: 'Close modal' },
-    kind: {
-      type: String,
-      default: '',
-      validator: val => ['', 'danger'].includes(val),
-    },
-    autoHideOff: Boolean,
-    visible: Boolean,
-    primaryButtonDisabled: Boolean,
-    size: String,
-    hasFormContent: Boolean,
-  },
-  data() {
-    return {
-      dataVisible: false,
-      scrollable: false,
-      hasFooter: false,
-      hasHeaderLabel: false,
-      hasPrimary: false,
-      hasSecondary: false,
-      hasOtherBtn: false,
-    };
-  },
-  mounted() {
-    if (this.visible) {
-      this.show();
-    }
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  watch: {
-    visible(val) {
-      if (val) {
-        this.show();
-      } else {
-        this.hide();
-      }
-    },
-  },
-  computed: {
-    dialogAttrs() {
-      const passive = !this.hasFooter;
-      const attrs = {};
-      attrs['aria-label'] = this.$slots.title[0].text;
-      if (this.alert) {
-        if (passive) {
-          attrs.role = 'alert';
-        } else {
-          attrs.role = 'alertdialog';
-        }
-      } else {
-        attrs.role = 'dialog';
-      }
-      return attrs;
-    },
-    primaryKind() {
-      if (this.kind === 'danger') {
-        return 'danger';
-      } else {
-        return 'primary';
-      }
-    },
-    internalSize() {
-      switch (this.size) {
-        case 'xs':
-          return 'xs';
-        case 'small':
-          return 'sm';
-        case 'large':
-          return 'lg';
-        default:
-          return '';
-      }
-    },
-  },
-  model: {
-    event: 'modelEvent',
-    prop: 'visible',
-  },
-  methods: {
-    checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on updated
-      this.hasFooter = !!(
-        this.$slots['primary-button'] ||
-        this.$slots['secondary-button'] ||
-        this.$slots['other-button']
-      );
-      this.hasHeaderLabel = !!this.$slots.label;
-      this.hasPrimary = !!this.$slots['primary-button'];
-      this.hasSecondary = !!this.$slots['secondary-button'];
-      this.hasOtherBtn = !!this.$slots['other-button'];
-    },
-    focusBeforeContent() {
-      if (this.$slots['primary-button']) {
-        this.$refs.primary.$el.focus();
-      } else if (this.$slots['secondary-button']) {
-        this.$refs.secondary.$el.focus();
-      } else if (this.$slots['other-button']) {
-        this.$refs.otherBtn.$el.focus();
-      } else {
-        this.$refs.close.focus();
-      }
-    },
-    focusAfterContent() {
-      this.$refs.close.focus();
-    },
-    onShown() {
-      const focusEl = this.$refs.content.querySelector('[data-modal-primary-focus]');
-      if (focusEl) {
-        focusEl.focus();
-      } else {
-        this.focusBeforeContent();
-      }
-      this.$emit('modal-shown');
-
-      // check to see if content scrollable
-      this.scrollable = this.$refs.content.scrollHeight > this.$refs.content.clientHeight;
-
-      this.$el.removeEventListener('transitionend', this.onShown);
-    },
-    onExternalClick(ev) {
-      if (ev.target === this.$el) {
-        this._maybeHide(ev, 'external-click');
-      }
-    },
-    onEsc(ev) {
-      this._maybeHide(ev, 'escape-press');
-    },
-    onClose(ev) {
-      this._maybeHide(ev, 'close-click');
-    },
-    show() {
-      // prevent body scrolling
-      document.body.classList.add(`${this.carbonPrefix}--body--with-modal-open`);
-
-      this.$el.addEventListener('transitionend', this.onShown);
-      this.dataVisible = true;
-    },
-    _maybeHide(event, reason) {
-      if (!this.autoHideOff) {
-        this.hide();
-      } else {
-        event['cv:reason'] = reason;
-        this.$emit('modal-hide-request', event);
-      }
-    },
-    hide() {
-      //restore any previous scrollability
-      document.body.classList.remove(`${this.carbonPrefix}--body--with-modal-open`);
-
-      if (this.dataVisible) {
-        this.$el.addEventListener('transitionend', this.afterHide);
-      }
-
-      this.dataVisible = false;
-      this.$emit('modal-hidden');
-    },
-    afterHide(event) {
-      if (event.propertyName === 'opacity') {
-        this.$emit('after-modal-hidden');
-        this.$el.removeEventListener('transitionend', this.afterHide);
-      }
-    },
-    onFooterButtonClick(buttonId, ev) {
-      this.$emit(buttonId);
-      if (!this.$listeners[buttonId]) {
-        this._maybeHide(ev, buttonId);
-      }
-    },
-    onPrimaryClick(ev) {
-      this.onFooterButtonClick('primary-click', ev);
-    },
-    onSecondaryClick(ev) {
-      this.onFooterButtonClick('secondary-click', ev);
-    },
-    onOtherBtnClick(ev) {
-      this.onFooterButtonClick('other-btn-click', ev);
-    },
-  },
-  beforeDestroy() {
-    if (this.dataVisible) {
-      this.$emit('after-modal-hidden');
-    }
-  },
-};
-</script>

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

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