@carbon/vue 2.45.1 → 3.0.5-alpha.0

package/src/components/cv-ui-shell/cv-header-name.vue

@@ -1,18 +0,0 @@
-<template>
-  <component :is="tagType" v-on="$listeners" v-bind="linkProps" :class="`cv-header-name ${carbonPrefix}--header__name`">
-    <span v-if="prefix" :class="`${carbonPrefix}--header__name--prefix`">{{ prefix }}&nbsp;</span>
-    <slot />
-  </component>
-</template>
-
-<script>
-import { linkMixin, carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvHeaderName',
-  mixins: [linkMixin, carbonPrefixMixin],
-  props: {
-    prefix: String,
-  },
-};
-</script>

package/src/components/cv-ui-shell/cv-header-nav.vue

@@ -1,18 +0,0 @@
-<template>
-  <nav :class="`cv-header-nav ${carbonPrefix}--header__nav`">
-    <ul :class="`${carbonPrefix}--header__menu-bar`" role="menubar" :ariaLabeldBy="ariaLabelledBy">
-      <slot />
-    </ul>
-  </nav>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvHeaderNav',
-  mixins: [carbonPrefixMixin],
-  props: {
-    ariaLabelledBy: String,
-  },
-};
-</script>

package/src/components/cv-ui-shell/cv-header-panel.vue

@@ -1,72 +0,0 @@
-<template>
-  <div
-    :class="[
-      `cv-header-panel`,
-      `${carbonPrefix}--header-panel`,
-      { [`${carbonPrefix}--header-panel--expanded`]: panelExpanded },
-    ]"
-    :aria-hidden="!panelExpanded ? 'true' : 'false'"
-    :id="id"
-    @focusout="onFocusout"
-    @mousedown="onMouseDown"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvHeaderPanel',
-  mixins: [carbonPrefixMixin],
-  props: {
-    expanded: Boolean,
-    id: { type: String, required: true },
-  },
-  mounted() {
-    this.$parent.$emit('cv:panel-mounted', this);
-  },
-  beforeDestroy() {
-    this.$parent.$emit('cv:panel-beforeDestroy', this);
-  },
-  data() {
-    return {
-      dataExpanded: this.expanded,
-    };
-  },
-  model: {
-    event: 'modelEvent',
-    prop: 'expanded',
-  },
-  watch: {
-    expanded() {
-      this.panelExpanded = this.expanded;
-    },
-  },
-  computed: {
-    panelExpanded: {
-      get() {
-        return this.dataExpanded;
-      },
-      set(val) {
-        if (this.dataExpanded !== val) {
-          this.dataExpanded = val;
-          this.$emit('modelEvent', val);
-          this.$emit('panel-resize', this);
-        }
-      },
-    },
-  },
-  methods: {
-    onFocusout(ev) {
-      this.$parent.$emit('cv:panel-focusout', this, ev);
-    },
-    onMouseDown(ev) {
-      if (this.$el == ev.target || this.$el.contains(ev.target)) {
-        // ignore mousedown on panel can cause focus event
-        ev.preventDefault();
-      }
-    },
-  },
-};
-</script>

package/src/components/cv-ui-shell/cv-header-side-nav-items.vue

@@ -1,21 +0,0 @@
-<template>
-  <div
-    :class="[
-      `${carbonPrefix}--side-nav__header-navigation`,
-      { [`${carbonPrefix}--side-nav__header-divider`]: divider },
-    ]"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvHeaderSideNavItems',
-  mixins: [carbonPrefixMixin],
-  props: {
-    divider: Boolean,
-  },
-};
-</script>

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

@@ -1,119 +0,0 @@
-<template>
-  <header :class="`cv-header ${carbonPrefix}--header`" data-header>
-    <slot />
-    <div v-if="hasGlobalHeader" :class="`${carbonPrefix}--header__global`">
-      <slot name="header-global" />
-    </div>
-    <slot name="left-panels" />
-    <slot name="right-panels" />
-  </header>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvHeader',
-  mixins: [carbonPrefixMixin],
-  created() {
-    // add these on created otherwise cv:mounted is too late.
-    this.$on('cv:panel-control-mounted', this.onCvPanelControlMounted);
-    this.$on('cv:panel-control-beforeDestroy', this.onCvPanelControlBeforeDestroy);
-    this.$on('cv:panel-control-toggle', this.onCvPanelControlToggle);
-    this.$on('cv:panel-control-focusout', this.onCvPanelControlFocusout);
-    this.$on('cv:panel-mounted', this.onCvPanelMounted);
-    this.$on('cv:panel-beforeDestroy', this.onCvPanelBeforeDestroy);
-    this.$on('cv:panel-focusout', this.onCvPanelFocusout);
-  },
-  data() {
-    return {
-      panelControllers: [],
-      panels: [],
-      hasGlobalHeader: false,
-    };
-  },
-  mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on updated
-    this.hasGlobalHeader = !!this.$slots['header-global'];
-  },
-  updated() {
-    this.hasGlobalHeader = !!this.$slots['header-global'];
-  },
-  computed: {
-    isCvHeader() {
-      return true;
-    },
-  },
-  methods: {
-    hasRail(_ctrl, _panel) {
-      let panel = _panel;
-      let ctrl = _ctrl;
-      if (ctrl) {
-        panel = this.panels.find(item => item.id === ctrl.ariaControls);
-      } else {
-        if (panel) {
-          ctrl = this.panelControllers.find(item => item.ariaControls === panel.id);
-        }
-      }
-      if (ctrl) {
-        ctrl.hasRail = !!(panel && ctrl) && panel.rail;
-      }
-    },
-    onCvPanelControlMounted(srcComponent) {
-      this.panelControllers.push(srcComponent);
-      this.hasRail(srcComponent);
-    },
-    onCvPanelControlBeforeDestroy(srcComponent) {
-      const index = this.panelControllers.findIndex(item => item.id === srcComponent.id);
-      if (index > -1) {
-        this.panelControllers.splice(index, 1);
-      }
-    },
-    onCvPanelControlToggle(srcComponent, force) {
-      const foundIndex = this.panels.findIndex(item => item.id === srcComponent.ariaControls);
-      if (foundIndex > -1) {
-        const newValue = force !== undefined ? force : !srcComponent.panelExpanded;
-
-        for (let index in this.panels) {
-          this.panels[index].panelExpanded = false;
-        }
-        for (let index in this.panelControllers) {
-          this.panelControllers[index].panelExpanded = false;
-        }
-
-        srcComponent.panelExpanded = newValue;
-        this.panels[foundIndex].panelExpanded = newValue;
-      }
-    },
-    onCvPanelControlFocusout(srcComponent, srcEvent) {
-      const found = this.panels.find(item => item.id === srcComponent.ariaControls);
-
-      if (found && !found.rail && found.$el !== srcEvent.relatedTarget && !found.$el.contains(srcEvent.relatedTarget)) {
-        // close when not a rail
-        this.onCvPanelControlToggle(srcComponent, false);
-      }
-    },
-    onCvPanelMounted(srcComponent) {
-      this.panels.push(srcComponent);
-      srcComponent.headerEmbedded = true;
-      this.hasRail(undefined, srcComponent);
-    },
-    onCvPanelBeforeDestroy(srcComponent) {
-      const index = this.panels.findIndex(item => item.id === srcComponent.id);
-      if (index > -1) {
-        this.panels.splice(index, 1);
-      }
-    },
-    onCvPanelFocusout(srcComponent, srcEvent) {
-      const found = this.panelControllers.find(item => item.ariaControls === srcComponent.id);
-      if (
-        srcComponent.$el !== srcEvent.relatedTarget &&
-        !srcComponent.$el.contains(srcEvent.relatedTarget) &&
-        found &&
-        found.$el !== srcEvent.relatedTarget
-      ) {
-        this.onCvPanelControlToggle(found, false);
-      }
-    },
-  },
-};
-</script>

package/src/components/cv-ui-shell/cv-side-nav-divider.vue

@@ -1,12 +0,0 @@
-<template>
-  <li :class="`${carbonPrefix}--side-nav__divider`" />
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvSideNavMenuDivider',
-  mixins: [carbonPrefixMixin],
-};
-</script>

package/src/components/cv-ui-shell/cv-side-nav-icon.vue

@@ -1,16 +0,0 @@
-<template>
-  <div :class="[`${carbonPrefix}--side-nav__icon`, { [`${carbonPrefix}--side-nav__icon--small`]: small }]">
-    <slot />
-  </div>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvSideNavIcon',
-  mixins: [carbonPrefixMixin],
-  props: {
-    small: Boolean,
-  },
-};
-</script>

package/src/components/cv-ui-shell/cv-side-nav-items.vue

@@ -1,21 +0,0 @@
-<template>
-  <ul :class="`cv-side-nav-items ${carbonPrefix}--side-nav__items`" @mousedown="onMousedown">
-    <slot />
-  </ul>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvSideNavItems',
-  mixins: [carbonPrefixMixin],
-  methods: {
-    onMousedown(ev) {
-      if (ev.target === this.$el) {
-        // non-css fix for #448
-        ev.preventDefault();
-      }
-    },
-  },
-};
-</script>

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

@@ -1,54 +0,0 @@
-<template>
-  <li :class="`${carbonPrefix}--side-nav__item`">
-    <component
-      :is="tagType"
-      v-on="$listeners"
-      :class="[
-        'cv-side-nav-item-link',
-        `${carbonPrefix}--side-nav__link`,
-        { [`${carbonPrefix}--side-nav__link--current`]: active },
-      ]"
-      v-bind="{ ...$attrs, ...linkProps }"
-    >
-      <cv-side-nav-icon v-if="hasNavIcon" small>
-        <slot name="nav-icon" />
-      </cv-side-nav-icon>
-      <cv-side-nav-link-text>
-        <slot />
-      </cv-side-nav-link-text>
-    </component>
-  </li>
-</template>
-
-<script>
-import { linkMixin, carbonPrefixMixin } from '../../mixins';
-import CvSideNavIcon from './cv-side-nav-icon';
-import CvSideNavLinkText from './_cv-side-nav-link-text';
-
-export default {
-  name: 'CvSideNavLink',
-  inheritAttrs: false,
-  mixins: [linkMixin, carbonPrefixMixin],
-  components: { CvSideNavIcon, CvSideNavLinkText },
-  props: {
-    active: Boolean,
-    icon: Object,
-  },
-  data() {
-    return {
-      hasNavIcon: false,
-    };
-  },
-  mounted() {
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  methods: {
-    checkSlots() {
-      this.hasNavIcon = !!this.$slots['nav-icon'];
-    },
-  },
-};
-</script>

package/src/components/cv-ui-shell/cv-side-nav-menu-item.vue

@@ -1,30 +0,0 @@
-<template>
-  <li :class="`${carbonPrefix}--side-nav__menu-item`">
-    <component
-      :is="tagType"
-      v-on="$listeners"
-      :class="[`${carbonPrefix}--side-nav__link`, { [`${carbonPrefix}--side-nav__link--current`]: active }]"
-      v-bind="{ ...$attrs, ...linkProps }"
-      role="menuitem"
-    >
-      <cv-side-nav-link-text>
-        <slot />
-      </cv-side-nav-link-text>
-    </component>
-  </li>
-</template>
-
-<script>
-import { linkMixin, carbonPrefixMixin } from '../../mixins';
-import CvSideNavLinkText from './_cv-side-nav-link-text';
-
-export default {
-  name: 'CvSideNavMenuItem',
-  inheritAttrs: false,
-  mixins: [linkMixin, carbonPrefixMixin],
-  components: { CvSideNavLinkText },
-  props: {
-    active: Boolean,
-  },
-};
-</script>

package/src/components/cv-ui-shell/cv-side-nav-menu.vue

@@ -1,84 +0,0 @@
-<template>
-  <li
-    :class="[
-      `cv-side-nav-menu`,
-      `${carbonPrefix}--side-nav__item`,
-      { [`${carbonPrefix}--side-nav__item--active`]: active, [`${carbonPrefix}--side-nav__item--icon`]: hasIcon },
-    ]"
-  >
-    <button
-      aria-haspopup="true"
-      :aria-expanded="isExpanded ? 'true' : 'false'"
-      :class="`${carbonPrefix}--side-nav__submenu`"
-      role="menuitem"
-      type="button"
-      @click="doToggle"
-      @keydown.space.prevent
-      @keyup.space.prevent="doToggle"
-      @keydown.enter.prevent="doToggle"
-    >
-      <cv-side-nav-icon v-if="hasIcon">
-        <slot name="nav-icon" />
-      </cv-side-nav-icon>
-      <span :class="`${carbonPrefix}--side-nav__submenu-title`">{{ title }}</span>
-      <cv-side-nav-icon
-        :class="`${carbonPrefix}--side-nav__submenu-chevron`"
-        small
-        :aria-label="isExpanded ? 'collapse nav menu' : 'expand nav menu'"
-      >
-        <ChevronDown20 class="cv-side-nav-menu__chevron-svg" />
-      </cv-side-nav-icon>
-    </button>
-    <ul :class="`${carbonPrefix}--side-nav__menu`" ref="menu">
-      <slot></slot>
-    </ul>
-  </li>
-</template>
-
-<script>
-import ChevronDown20 from '@carbon/icons-vue/es/chevron--down/20';
-import CvSideNavIcon from './cv-side-nav-icon';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvSideNavMenu',
-  mixins: [carbonPrefixMixin],
-  components: { CvSideNavIcon, ChevronDown20 },
-  props: {
-    active: Boolean,
-    title: { type: String, required: true },
-    expanded: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      isExpanded: false,
-      hasNavIcon: false,
-    };
-  },
-  mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on updated
-    this.hasNavIcon = !!this.$slots['nav-icon'];
-  },
-  updated() {
-    this.hasNavIcon = !!this.$slots['nav-icon'];
-  },
-  computed: {
-    hasIcon() {
-      return !!this.$slots['nav-icon'];
-    },
-  },
-  methods: {
-    doToggle() {
-      this.isExpanded = !this.isExpanded;
-    },
-  },
-  watch: {
-    expanded: {
-      immediate: true,
-      handler(value) {
-        this.isExpanded = value;
-      },
-    },
-  },
-};
-</script>

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

@@ -1,97 +0,0 @@
-<template>
-  <nav
-    :class="[
-      `cv-side-nav`,
-      `${carbonPrefix}--side-nav`,
-      `${carbonPrefix}--side-nav__navigation`,
-      {
-        [`${carbonPrefix}--side-nav--expanded`]: panelExpanded,
-        [`${carbonPrefix}--side-nav--rail`]: rail,
-        [`${carbonPrefix}--side-nav--collapsed`]: !panelExpanded && fixed,
-        [`${carbonPrefix}--side-nav--ux`]: isChildOfHeader,
-      },
-    ]"
-    :aria-hidden="!panelExpanded && !fixed ? 'true' : 'false'"
-    :id="id"
-    @focusout="onFocusout"
-    @mousedown="onMouseDown"
-  >
-    <slot></slot>
-    <cv-side-nav-footer
-      v-if="!fixed && !rail && !headerEmbedded"
-      :expanded="panelExpanded"
-      :assistiveText="assistiveToggleText"
-      @toggle-expand="toggleExpand"
-    />
-  </nav>
-</template>
-
-<script>
-import CvSideNavFooter from './_cv-side-nav-footer';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvSideNav',
-  components: { CvSideNavFooter },
-  mixins: [carbonPrefixMixin],
-  props: {
-    expanded: Boolean,
-    fixed: Boolean,
-    id: { type: String, required: true },
-    assistiveToggleText: String,
-    rail: Boolean,
-  },
-  mounted() {
-    this.$parent.$emit('cv:panel-mounted', this);
-  },
-  beforeDestroy() {
-    this.$parent.$emit('cv:panel-beforeDestroy', this);
-  },
-  data() {
-    return {
-      dataExpanded: this.expanded,
-      headerEmbedded: false,
-    };
-  },
-  watch: {
-    expanded() {
-      this.panelExpanded = this.expanded;
-    },
-  },
-  computed: {
-    isChildOfHeader() {
-      return this.$parent.isCvHeader;
-    },
-    panelExpanded: {
-      get() {
-        return this.dataExpanded;
-      },
-      set(val) {
-        if (this.dataExpanded !== val) {
-          this.dataExpanded = val;
-          this.$emit('modelEvent', val);
-          this.$emit('panel-resize', this);
-        }
-      },
-    },
-  },
-  methods: {
-    onFocusout(ev) {
-      this.$parent.$emit('cv:panel-focusout', this, ev);
-    },
-    onMouseDown(ev) {
-      if (this.$el == ev.target || this.$el.contains(ev.target)) {
-        // ignore mousedown on panel can cause focus event
-        ev.preventDefault();
-      }
-    },
-    toggleExpand() {
-      this.panelExpanded = !this.dataExpanded;
-    },
-  },
-  model: {
-    event: 'modelEvent',
-    prop: 'expanded',
-  },
-};
-</script>

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

@@ -1,19 +0,0 @@
-<template>
-  <component
-    :is="tagType"
-    v-on="$listeners"
-    v-bind="linkProps"
-    :class="`cv-skip-to-content ${carbonPrefix}--skip-to-content`"
-  >
-    <slot>Skip to main content</slot>
-  </component>
-</template>
-
-<script>
-import { linkMixin, carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvSkipToContent',
-  mixins: [linkMixin, carbonPrefixMixin],
-};
-</script>

package/src/components/cv-ui-shell/cv-switcher-item-link.vue

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

package/src/components/cv-ui-shell/cv-switcher-item.vue

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

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

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

package/src/components/cv-ui-shell/index.js

@@ -1,45 +0,0 @@
-import CvHeaderGlobalAction from './cv-header-global-action';
-import CvHeaderMenuButton from './cv-header-menu-button';
-import CvHeaderMenuItem from './cv-header-menu-item';
-import CvHeaderMenu from './cv-header-menu';
-import CvHeaderName from './cv-header-name';
-import CvHeaderNav from './cv-header-nav';
-import CvHeaderSideNavItems from './cv-header-side-nav-items';
-import CvHeaderPanel from './cv-header-panel';
-import CvHeader from './cv-header';
-import CvSideNavIcon from './cv-side-nav-icon';
-import CvSideNavItems from './cv-side-nav-items';
-import CvSideNavLink from './cv-side-nav-link';
-import CvSideNavMenuItem from './cv-side-nav-menu-item';
-import CvSideNavMenu from './cv-side-nav-menu';
-import CvSideNav from './cv-side-nav';
-import CvSideNavDivider from './cv-side-nav-divider';
-import CvSkipToContent from './cv-skip-to-content';
-import CvSwitcherItemLink from './cv-switcher-item-link';
-import CvSwitcherItem from './cv-switcher-item';
-import CvSwitcher from './cv-switcher';
-import CvContent from './cv-content';
-
-export {
-  CvContent,
-  CvHeaderGlobalAction,
-  CvHeaderMenuButton,
-  CvHeaderMenuItem,
-  CvHeaderMenu,
-  CvHeaderName,
-  CvHeaderPanel,
-  CvHeaderNav,
-  CvHeaderSideNavItems,
-  CvHeader,
-  CvSideNav,
-  CvSideNavDivider,
-  CvSideNavIcon,
-  CvSideNavItems,
-  CvSideNavLink,
-  CvSideNavMenuItem,
-  CvSideNavMenu,
-  CvSkipToContent,
-  CvSwitcherItemLink,
-  CvSwitcherItem,
-  CvSwitcher,
-};