@carbon/vue 2.45.1 → 3.0.4-alpha.0

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

@@ -1,52 +0,0 @@
-<template>
-  <div :class="{ [`${carbonPrefix}--form-item`]: formItem }">
-    <input
-      v-bind="$attrs"
-      v-on="inputListeners"
-      :class="[`${carbonPrefix}--toggle-input`, { 'bx--toggle-input--small': small }]"
-      type="checkbox"
-      :id="uid"
-      :checked="isChecked === true"
-      :value="value"
-      ref="input"
-    />
-    <label :class="`${carbonPrefix}--toggle-input__label`" :for="uid" :aria-label="hiddenLabel">
-      {{ visibleLabel }}
-      <span :class="`${carbonPrefix}--toggle__switch`">
-        <svg :class="`${carbonPrefix}--toggle__check`" width="6px" height="5px" viewBox="0 0 6 5">
-          <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
-        </svg>
-        <span :class="`${carbonPrefix}--toggle__text--off`" aria-hidden="true">
-          <slot name="text-left">Off</slot>
-        </span>
-        <span :class="`${carbonPrefix}--toggle__text--on`" aria-hidden="true">
-          <slot name="text-right">On</slot>
-        </span>
-      </span>
-    </label>
-  </div>
-</template>
-
-<script>
-import { uidMixin, checkMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-
-export default {
-  name: 'CvToggle',
-  mixins: [uidMixin, checkMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  inheritAttrs: false,
-  props: {
-    small: Boolean,
-    label: String,
-    formItem: { type: Boolean, default: true },
-    hideLabel: Boolean,
-  },
-  computed: {
-    hiddenLabel() {
-      return this.hideLabel ? this.label : undefined;
-    },
-    visibleLabel() {
-      return this.hideLabel ? undefined : this.label;
-    },
-  },
-};
-</script>

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

@@ -1,3 +0,0 @@
-import CvToggle from './cv-toggle';
-import CvToggleSkeleton from './cv-toggle-skeleton';
-export { CvToggle, CvToggleSkeleton };

package/src/components/cv-toolbar/cv-toolbar-divider.vue

@@ -1,11 +0,0 @@
-<template>
-  <hr :class="`cv-toolbar-divider ${carbonPrefix}--toolbar-menu__divider`" />
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvToolbarDivider',
-  mixins: [carbonPrefixMixin],
-};
-</script>

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

@@ -1,16 +0,0 @@
-<template>
-  <li
-    :class="`cv-toolbar-option ${carbonPrefix}--toolbar-menu__option`"
-    @keydown.esc.prevent="$parent.$emit('cv:close')"
-  >
-    <slot></slot>
-  </li>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvToolbarOption',
-  mixins: [carbonPrefixMixin],
-};
-</script>

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

@@ -1,40 +0,0 @@
-<template>
-  <cv-search
-    kind="toolbar"
-    class="cv-toolbar-search"
-    :form-item="false"
-    v-bind="$attrs"
-    v-on="$listeners"
-    @focus="onFocus"
-    @blur="onBlur"
-    :value="value"
-    small
-  ></cv-search>
-</template>
-
-<script>
-import CvSearch from '../cv-search/cv-search';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvToolbarSearch',
-  mixins: [carbonPrefixMixin],
-  components: {
-    CvSearch,
-  },
-  inheritAttrs: false,
-  props: {
-    value: String,
-  },
-  methods: {
-    onBlur(ev) {
-      if (!this.$el.contains(ev.target)) {
-        this.$el.classList.remove(`${this.carbonPrefix}--toolbar-search--active`);
-      }
-    },
-    onFocus() {
-      this.$el.classList.add(`${this.carbonPrefix}--toolbar-search--active`);
-    },
-  },
-};
-</script>

package/src/components/cv-toolbar/cv-toolbar-title.vue

@@ -1,14 +0,0 @@
-<template>
-  <li :class="`cv-toolbar-title ${carbonPrefix}--toolbar-menu__title`">{{ title }}</li>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvToolbarTitle',
-  mixins: [carbonPrefixMixin],
-  props: {
-    title: { type: String, required: true },
-  },
-};
-</script>

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

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

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

@@ -1,6 +0,0 @@
-import CvToolbar from './cv-toolbar';
-import CvToolbarTitle from './cv-toolbar-title';
-import CvToolbarSearch from './cv-toolbar-search';
-import CvToolbarOption from './cv-toolbar-option';
-import CvToolbarDivider from './cv-toolbar-divider';
-export { CvToolbar, CvToolbarTitle, CvToolbarSearch, CvToolbarOption, CvToolbarDivider };

package/src/components/cv-tooltip/consts.js

@@ -1,2 +0,0 @@
-export const alignments = ['start', 'center', 'end'];
-export const directions = ['top', 'bottom', 'right', 'left'];

package/src/components/cv-tooltip/cv-definition-tooltip.vue

@@ -1,44 +0,0 @@
-<template>
-  <div :class="`cv-definition-tooltip ${carbonPrefix}--tooltip--definition ${carbonPrefix}--tooltip--a11y`" :id="uid">
-    <button
-      :aria-describedby="`${uid}-label`"
-      :class="[
-        `${carbonPrefix}--tooltip__trigger`,
-        `${carbonPrefix}--tooltip--a11y`,
-        `${carbonPrefix}--tooltip__trigger--definition`,
-        `${carbonPrefix}--tooltip--${direction}`,
-        `${carbonPrefix}--tooltip--align-${alignment}`,
-      ]"
-      type="button"
-    >
-      {{ term }}
-    </button>
-    <div :class="`${carbonPrefix}--assistive-text`" :id="`${uid}-label`" role="tooltip">{{ definition }}</div>
-  </div>
-</template>
-
-<script>
-import { uidMixin, carbonPrefixMixin } from '../../mixins';
-import { alignments, directions } from './consts';
-
-export default {
-  name: 'CvDefinitionTooltip',
-  mixins: [uidMixin, carbonPrefixMixin],
-  props: {
-    alignment: { type: String, default: 'center', validator: val => alignments.includes(val) },
-    definition: { type: String, required: true },
-    direction: {
-      type: String,
-      default: 'top',
-      validator: val => {
-        const valid = directions.includes(val);
-        if (!valid) {
-          console.warn(`CVDefinitionTooltip.direction must be one of the following: ${directions}`);
-        }
-        return valid;
-      },
-    },
-    term: { type: String, required: true },
-  },
-};
-</script>

package/src/components/cv-tooltip/cv-interactive-tooltip.vue

@@ -1,241 +0,0 @@
-<template>
-  <div class="cv-interactive-tooltip">
-    <div :id="`${uid}-label`" :class="`${carbonPrefix}--tooltip__label`">
-      <slot name="label"></slot>
-
-      <button
-        :aria-expanded="dataVisible ? 'true' : 'false'"
-        :aria-labelledby="`${uid}-label`"
-        :class="`${carbonPrefix}--tooltip__trigger`"
-        :aria-controls="`${uid}`"
-        aria-haspopup="true"
-        ref="trigger"
-        type="button"
-        @click="toggle"
-        @keydown.tab="onTriggerTab"
-        @focusout="checkFocusOut"
-      >
-        <slot name="trigger">
-          <Information16 />
-        </slot>
-      </button>
-    </div>
-
-    <div
-      :id="uid"
-      aria-hidden="true"
-      :data-floating-menu-direction="direction"
-      :class="[
-        `${carbonPrefix}--tooltip`,
-        {
-          [`${carbonPrefix}--tooltip--shown`]: dataVisible,
-          [`${carbonPrefix}--tooltip--${direction}`]: direction,
-          [`${carbonPrefix}--tooltip--align-${alignment}`]: alignment,
-        },
-      ]"
-      ref="popup"
-      role="dialog"
-      :aria-describedby="`${uid}-body`"
-      :aria-labelledby="`${uid}-label`"
-      @focusout="checkFocusOut"
-      :style="{ left: left + 'px', top: top + 'px' }"
-      tabindex="-1"
-      @mousedown.prevent="preventFocusOut"
-    >
-      <div
-        class="cv-interactive-tooltip__before-content"
-        ref="beforeContent"
-        tabindex="0"
-        style="position: absolute; left: -9999px; width: 1px; height: 1px"
-        @focus="focusBeforeContent"
-      />
-      <span :class="`${carbonPrefix}--tooltip__caret`"></span>
-      <div :class="`${carbonPrefix}--tooltip__content`">
-        <slot name="content"></slot>
-      </div>
-      <div
-        class="cv-interactive-tooltip__after-content"
-        ref="afterContent"
-        tabindex="0"
-        style="position: absolute; left: -9999px; width: 1px; height: 1px"
-        @focus="focusAfterContent"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { uidMixin, carbonPrefixMixin } from '../../mixins';
-import Information16 from '@carbon/icons-vue/es/information/16';
-import { alignments, directions } from './consts';
-
-export default {
-  name: 'CvInteractiveTooltip',
-  mixins: [uidMixin, carbonPrefixMixin],
-  components: { Information16 },
-  props: {
-    alignment: { type: String, default: 'center', validator: val => alignments.includes(val) },
-    direction: {
-      type: String,
-      default: 'top',
-      validator: val => {
-        const valid = directions.includes(val);
-        if (!valid) {
-          console.warn(`CVInteractiveTooltip.direction must be one of the following: ${directions}`);
-        }
-        return valid;
-      },
-    },
-    visible: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      dataVisible: false,
-      left: -9999, // offscreen
-      top: 0,
-    };
-  },
-  computed: {
-    contentAfter() {
-      return this.direction === 'right' || this.direction === 'bottom';
-    },
-  },
-  watch: {
-    visible() {
-      if (this.visible) {
-        this.show();
-      } else {
-        this.hide();
-      }
-    },
-    direction() {
-      if (this.visible) {
-        this.position();
-      }
-    },
-    dataVisible() {
-      if (this.dataVisible) {
-        this.$emit('tooltip-shown');
-      } else {
-        this.$emit('tooltip-hidden');
-      }
-    },
-  },
-  methods: {
-    positionListen(on) {
-      if (on) {
-        window.addEventListener('scroll', this.position);
-        window.addEventListener('resize', this.position);
-      } else {
-        window.removeEventListener('scroll', this.position);
-        window.removeEventListener('resize', this.position);
-      }
-    },
-    position() {
-      const menuPosition = this.$refs.trigger.getBoundingClientRect();
-      const pixelsScrolledX = window.scrollX || window.pageXOffset;
-      const pixelsScrolledY = window.scrollY || window.pageYOffset;
-
-      if (this.direction === 'top' || this.direction === 'bottom') {
-        this.left =
-          menuPosition.left +
-          0.5 +
-          (this.$refs.trigger.offsetWidth - this.$refs.popup.offsetWidth) / 2 +
-          pixelsScrolledX;
-
-        if (this.direction === 'bottom') {
-          this.top = menuPosition.bottom + 10 + pixelsScrolledY;
-        } else {
-          this.top = menuPosition.top - 15 - this.$refs.popup.offsetHeight + pixelsScrolledY;
-        }
-      } else {
-        this.top =
-          menuPosition.top +
-          (this.$refs.trigger.offsetHeight - 0.5 - this.$refs.popup.offsetHeight) / 2 +
-          pixelsScrolledY;
-        if (this.direction === 'left') {
-          this.left = menuPosition.left - 10 - this.$refs.popup.offsetWidth + pixelsScrolledX;
-        } else {
-          this.left = menuPosition.right + 15 + pixelsScrolledX;
-        }
-      }
-    },
-    show() {
-      this.dataVisible = true;
-      this.positionListen(true);
-
-      this.$nextTick(() => {
-        this.position();
-        this.$refs.trigger.focus();
-      });
-    },
-    hide() {
-      this.dataVisible = false;
-      this.positionListen(true);
-    },
-    toggle() {
-      if (this.dataVisible) {
-        this.hide();
-      } else {
-        this.show();
-      }
-    },
-    onTriggerTab(ev) {
-      if (!ev.shiftKey) {
-        if (this.contentAfter) {
-          // move focus before content before tab press
-          this.$refs.beforeContent.focus();
-        }
-      } else {
-        if (!this.contentAfter) {
-          // move focus after content before tab press
-          this.$refs.afterContent.focus();
-        }
-      }
-    },
-    checkFocusOut(ev) {
-      this.dataVisible = ev.relatedTarget === this.$refs.trigger || this.$refs.popup.contains(ev.relatedTarget);
-    },
-    focusBeforeContent(ev) {
-      if (this.contentAfter) {
-        if (this.$refs.popup.contains(ev.relatedTarget)) {
-          this.$refs.trigger.focus();
-        }
-      } else {
-        this.$refs.trigger.focus();
-        this.dataVisible = this.contentAfter;
-      }
-    },
-    focusAfterContent(ev) {
-      if (!this.contentAfter) {
-        if (this.$refs.popup.contains(ev.relatedTarget)) {
-          this.$refs.trigger.focus();
-        }
-      } else {
-        this.$refs.trigger.focus();
-        this.dataVisible = !this.contentAfter;
-      }
-    },
-    preventFocusOut() {
-      // This is here to prevent focus being lost if the user clicks on the contents of the interactive tool tip
-    },
-  },
-  mounted() {
-    // move popup out to body to ensure it appears above other elements
-    this.popupEl = document.body.appendChild(this.$refs.popup);
-
-    if (this.visible) {
-      this.show();
-    } else {
-      this.hide();
-    }
-  },
-  beforeDestroy() {
-    this.positionListen(false);
-    if (this.popupEl) {
-      // move back to where it came from
-      this.$el.appendChild(this.popupEl);
-    }
-  },
-};
-</script>

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

@@ -1,44 +0,0 @@
-<template>
-  <button
-    :class="[
-      `cv-tooltip`,
-      `${carbonPrefix}--tooltip__trigger`,
-      `${carbonPrefix}--tooltip--a11y`,
-      `${carbonPrefix}--tooltip--${direction}`,
-      `${carbonPrefix}--tooltip--align-${alignment}`,
-    ]"
-    type="button"
-  >
-    <span :class="`${carbonPrefix}--assistive-text`">{{ tip }}</span>
-    <slot>
-      <Information16 />
-    </slot>
-  </button>
-</template>
-
-<script>
-import Information16 from '@carbon/icons-vue/es/information/16';
-import { carbonPrefixMixin } from '../../mixins';
-import { alignments, directions } from './consts';
-
-export default {
-  name: 'CvTooltip',
-  mixins: [carbonPrefixMixin],
-  components: { Information16 },
-  props: {
-    alignment: { type: String, default: 'center', validator: val => alignments.includes(val) },
-    direction: {
-      type: String,
-      default: 'top',
-      validator: val => {
-        const valid = directions.includes(val);
-        if (!valid) {
-          console.warn(`CVTooltip.direction must be one of the following: ${directions}`);
-        }
-        return valid;
-      },
-    },
-    tip: { type: String, required: true },
-  },
-};
-</script>

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

@@ -1,6 +0,0 @@
-import CvTooltip from './cv-tooltip';
-import CvInteractiveTooltip from './cv-interactive-tooltip';
-import CvDefinitionTooltip from './cv-definition-tooltip';
-
-export { alignments, directions } from './consts';
-export { CvTooltip, CvInteractiveTooltip, CvDefinitionTooltip };

package/src/components/cv-ui-shell/_cv-side-nav-link-text.vue

@@ -1,13 +0,0 @@
-<template>
-  <span :class="`${carbonPrefix}--side-nav__link-text`">
-    <slot />
-  </span>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvSideNavLinkText',
-  mixins: [carbonPrefixMixin],
-};
-</script>

package/src/components/cv-ui-shell/cv-content.vue

@@ -1,16 +0,0 @@
-<template>
-  <component :is="tagType" :class="`${carbonPrefix}--content`">
-    <slot />
-  </component>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvContent',
-  mixins: [carbonPrefixMixin],
-  props: {
-    tagType: { type: String, default: 'main' },
-  },
-};
-</script>

package/src/components/cv-ui-shell/cv-header-global-action.vue

@@ -1,84 +0,0 @@
-<template>
-  <cv-icon-button
-    v-on="$listeners"
-    :class="[
-      `cv-header-global-action`,
-      `${carbonPrefix}--header__action`,
-      { [`${carbonPrefix}--header__action--active`]: dataActive },
-    ]"
-    type="button"
-    aria-haspopup="true"
-    :aria-controls="ariaControls"
-    :aria-expanded="active ? 'true' : 'false'"
-    @click="gaToggle"
-    @focusout="gaFocusout"
-    :id="uid"
-    :label="label"
-    :tipAlignment="tipAlignment"
-    :tipPosition="tipPosition"
-  >
-    <template slot="icon">
-      <slot />
-    </template>
-  </cv-icon-button>
-</template>
-
-<script>
-import { uidMixin, carbonPrefixMixin } from '../../mixins';
-import { CvIconButton } from '../cv-button';
-
-export default {
-  components: { CvIconButton },
-  name: 'CvHeaderGlobalAction',
-  mixins: [uidMixin, carbonPrefixMixin],
-  props: {
-    active: Boolean,
-    ariaControls: String,
-    label: { type: String, default: undefined },
-    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) },
-  },
-  mounted() {
-    this.$parent.$emit('cv:panel-control-mounted', this);
-  },
-  beforeDestroy() {
-    this.$parent.$emit('cv:panel-control-beforeDestroy', this);
-  },
-  data() {
-    return {
-      dataActive: this.active,
-    };
-  },
-  watch: {
-    expanded() {
-      if (this.active !== this.dataActive) {
-        this.gaToggle();
-      }
-    },
-  },
-  computed: {
-    panelExpanded: {
-      get() {
-        return this.dataActive;
-      },
-      set(val) {
-        // do not emit 'cv:panel-control-toggle'
-        this.dataActive = val;
-      },
-    },
-  },
-  methods: {
-    gaToggle() {
-      this.$el.focus();
-      this.$parent.$emit('cv:panel-control-toggle', this);
-    },
-    gaFocusout(ev) {
-      this.$parent.$emit('cv:panel-control-focusout', this, ev);
-    },
-  },
-};
-</script>