@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvUIShell/CvHeaderGlobalAction.vue

@@ -0,0 +1,105 @@
+<template>
+  <cv-icon-button
+    :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"
+    ref="el"
+  >
+    <template v-slot:icon>
+      <slot />
+    </template>
+  </cv-icon-button>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+} from 'vue';
+import { getBus } from '../../global/component-utils/event-bus';
+import CvIconButton from '../CvButton/CvIconButton.vue';
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  ariaControls: { type: 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),
+  },
+  ...propsCvId,
+});
+const uid = useCvId(props, true);
+const el = ref(null);
+const panelExpanded = computed({
+  get() {
+    return dataActive.value;
+  },
+  /**
+   * Set expanded
+   * @param {boolean} val
+   */
+  set(val) {
+    // do not emit 'cv:panel-control-toggle'
+    dataActive.value = val;
+  },
+});
+
+/**
+ * @type {CvHeaderController}
+ */
+const controlData = reactive({
+  id: uid.value,
+  panelExpanded,
+  el: el,
+  ariaControls: props.ariaControls,
+  hasRail: false,
+});
+
+let bus = undefined;
+const parent = inject('cv-header-id');
+onMounted(() => {
+  if (parent.value) bus = getBus(parent);
+  else console.warn('header not found');
+
+  bus?.emit('cv:panel-control-mounted', controlData);
+});
+onBeforeUnmount(() => {
+  bus?.emit('cv:panel-control-beforeDestroy', controlData);
+});
+
+const dataActive = ref(props.active);
+
+function gaToggle() {
+  el.value?.$el?.focus();
+
+  bus?.emit('cv:panel-control-toggle', controlData);
+}
+function gaFocusout(ev) {
+  bus?.emit('cv:panel-control-focusout', { ctrl: controlData, ev });
+}
+</script>

package/src/components/{cv-ui-shell/cv-header-menu.vue → CvUIShell/CvHeaderMenu.vue}

@@ -3,10 +3,11 @@
     :class="`cv-header-menu ${carbonPrefix}--header__submenu`"
     @mouseenter="doHoverToggle(true)"
     @mouseleave="doHoverToggle(false)"
+    ref="el"
   >
     <a
       aria-haspopup="true"
-      :aria-expanded="expanded ? 'true' : 'false'"
+      :aria-expanded="data.expanded ? 'true' : 'false'"
       :class="`${carbonPrefix}--header__menu-item ${carbonPrefix}--header__menu-title`"
       href="javascript:void(0)"
       role="menuitem"
@@ -19,7 +20,10 @@
       @focusout="onFocusout"
     >
       {{ title }}
-      <chevron-down-glyph :class="`${carbonPrefix}--header__menu-arrow`" :aria-label="$attrs.ariaLabel" />
+      <chevron-down-glyph
+        :class="`${carbonPrefix}--header__menu-arrow`"
+        :aria-label="$attrs.ariaLabel"
+      />
     </a>
     <ul
       :aria-label="$attrs.ariaLabel"
@@ -34,41 +38,41 @@
   </li>
 </template>
 
-<script>
+<script setup>
+import { carbonPrefix } from '../../global/settings';
 import ChevronDownGlyph from '@carbon/icons-vue/es/chevron--down';
-import { carbonPrefixMixin } from '../../mixins';
+import { reactive, ref } from 'vue';
 
-export default {
-  name: 'CvHeaderMenu',
-  mixins: [carbonPrefixMixin],
-  components: { ChevronDownGlyph },
-  props: {
-    title: String,
-    hoverToggle: { type: Boolean, default: true },
-  },
-  data() {
-    return {
-      expanded: false,
-    };
-  },
-  methods: {
-    doHoverToggle(force) {
-      if (this.hoverToggle) {
-        this.doToggle(force);
-      }
-    },
-    doToggle(force) {
-      if (typeof force === 'boolean') {
-        this.expanded = force;
-      } else {
-        this.expanded = !this.expanded;
-      }
-    },
-    onFocusout(ev) {
-      if (!(this.$el.contains(ev.relatedTarget) || this.$refs.menu.contains(ev.relatedTarget))) {
-        this.expanded = false;
-      }
-    },
-  },
-};
+const props = defineProps({
+  title: String,
+  hoverToggle: { type: Boolean, default: true },
+});
+const data = reactive({
+  expanded: false,
+});
+
+function doHoverToggle(force) {
+  if (props.hoverToggle) {
+    doToggle(force);
+  }
+}
+function doToggle(force) {
+  if (typeof force === 'boolean') {
+    data.expanded = force;
+  } else {
+    data.expanded = !data.expanded;
+  }
+}
+const el = ref(null);
+const menu = ref(null);
+function onFocusout(ev) {
+  if (
+    !(
+      el.value?.contains(ev.relatedTarget) ||
+      menu?.value.contains(ev.relatedTarget)
+    )
+  ) {
+    data.expanded = false;
+  }
+}
 </script>

package/src/components/CvUIShell/CvHeaderMenuButton.vue

@@ -0,0 +1,103 @@
+<template>
+  <button
+    class="cv-header-menu-button"
+    :class="[
+      `${carbonPrefix}--header__action`,
+      `${carbonPrefix}--header__menu-trigger`,
+      `${carbonPrefix}--header__menu-toggle`,
+      {
+        [`${carbonPrefix}--header__action--active`]: dataActive,
+        [`${carbonPrefix}--header__menu-toggle__hidden`]: !controlData.hasRail,
+      },
+    ]"
+    type="button"
+    aria-haspopup="true"
+    :aria-controls="ariaControls"
+    :aria-expanded="active ? 'true' : 'false'"
+    @click="gaToggle"
+    @focusout="gaFocusout"
+    :id="uid"
+    ref="el"
+  >
+    <close20 v-if="dataActive" />
+    <menu20 v-if="!dataActive" />
+  </button>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId } from '../../use/cvId';
+import Close20 from '@carbon/icons-vue/es/close/20';
+import Menu20 from '@carbon/icons-vue/es/menu/20';
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
+import { getBus } from '../../global/component-utils/event-bus';
+
+const props = defineProps({
+  active: Boolean,
+  ariaControls: { type: String, required: true },
+});
+const uid = useCvId(props, true);
+const dataActive = ref(props.active);
+const panelExpanded = computed({
+  get() {
+    return dataActive.value;
+  },
+  /**
+   * Set expanded
+   * @param {boolean} val
+   */
+  set(val) {
+    // do not emit 'cv:panel-control-toggle'
+    dataActive.value = val;
+  },
+});
+const el = ref(null);
+
+/**
+ * @type {CvHeaderController}
+ */
+const controlData = reactive({
+  id: uid.value,
+  panelExpanded,
+  el: el,
+  ariaControls: props.ariaControls,
+  hasRail: false,
+});
+
+let bus = undefined;
+const parent = inject('cv-header-id');
+onMounted(() => {
+  if (parent.value) bus = getBus(parent);
+  else console.warn('header not found');
+
+  bus?.emit('cv:panel-control-mounted', controlData);
+});
+onBeforeUnmount(() => {
+  bus?.emit('cv:panel-control-beforeDestroy', controlData);
+});
+
+watch(
+  () => props.active,
+  () => {
+    if (props.active !== dataActive.value) {
+      gaToggle();
+    }
+  }
+);
+
+function gaToggle() {
+  el.value?.focus();
+  bus?.emit('cv:panel-control-toggle', controlData);
+}
+function gaFocusout(ev) {
+  bus?.emit('cv:panel-control-focusout', { ctrl: controlData, ev });
+}
+</script>

package/src/components/CvUIShell/CvHeaderMenuItem.vue

@@ -0,0 +1,38 @@
+<template>
+  <li class="cv-header-menu-item" :role="role">
+    <component
+      :is="tagType"
+      v-bind="{ ...$attrs, ...linkProps }"
+      :class="[
+        `${carbonPrefix}--header__menu-item`,
+        { [`${carbonPrefix}--header__menu-item--current`]: activePage },
+      ]"
+      role="menuitem"
+      :aria-current="ariaCurrent"
+    >
+      <span :class="`${carbonPrefix}--text-truncate--end`">
+        <slot />
+      </span>
+    </component>
+  </li>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useTagType, useLinkProps, props as propsLink } from '../../use/cvLink';
+import { computed } from 'vue';
+
+const props = defineProps({
+  active: Boolean,
+  ariaCurrent: String,
+  role: String,
+  ...propsLink,
+});
+
+const tagType = useTagType(props);
+const linkProps = useLinkProps(props);
+
+const activePage = computed(() => {
+  return props.active && props.ariaCurrent !== 'page';
+});
+</script>

package/src/components/CvUIShell/CvHeaderName.vue

@@ -0,0 +1,25 @@
+<template>
+  <component
+    :is="tagType"
+    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 setup>
+import { carbonPrefix } from '../../global/settings';
+import { useTagType, useLinkProps, props as propsLink } from '../../use/cvLink';
+
+const props = defineProps({
+  prefix: String,
+  ...propsLink,
+});
+
+const tagType = useTagType(props);
+const linkProps = useLinkProps(props);
+</script>

package/src/components/CvUIShell/CvHeaderNav.vue

@@ -0,0 +1,18 @@
+<template>
+  <nav :class="`cv-header-nav ${carbonPrefix}--header__nav`">
+    <ul
+      :class="`${carbonPrefix}--header__menu-bar`"
+      role="menubar"
+      :ariaLabeldBy="ariaLabelledBy"
+    >
+      <slot />
+    </ul>
+  </nav>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+defineProps({
+  ariaLabelledBy: String,
+});
+</script>

package/src/components/CvUIShell/CvHeaderPanel.vue

@@ -0,0 +1,106 @@
+<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"
+    ref="el"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
+import { getBus } from '../../global/component-utils/event-bus';
+
+const props = defineProps({
+  modelValue: {
+    validator(value) {
+      if (value !== undefined) {
+        console.error(
+          'v-model has changed in Vue3 please specify v-model:expanded'
+        );
+        return false;
+      }
+      return true;
+    },
+  },
+  expanded: Boolean,
+  id: { type: String, required: true },
+});
+const data = reactive({
+  dataExpanded: props.expanded,
+});
+const el = ref(null);
+const panelExpanded = computed({
+  get() {
+    return data.dataExpanded;
+  },
+  /**
+   * @param {boolean} val
+   */
+  set(val) {
+    data.dataExpanded = val;
+  },
+});
+
+/**
+ * @type {CvHeaderPanel}
+ */
+const panelData = {
+  id: props.id,
+  rail: false,
+  headerEmbedded: undefined,
+  panelExpanded,
+  el,
+};
+
+const parent = inject('cv-header-id');
+let bus = undefined;
+onMounted(() => {
+  if (parent.value) bus = getBus(parent);
+  else console.warn('header not found');
+
+  bus?.emit('cv:panel-mounted', panelData);
+});
+onBeforeUnmount(() => {
+  bus?.emit('cv:panel-beforeDestroy', panelData);
+});
+
+function onFocusout(ev) {
+  bus?.emit('cv:panel-focusout', { panel: panelData, ev });
+}
+function onMouseDown(ev) {
+  if (el.value === ev.target || el.value.contains(ev.target)) {
+    // ignore mousedown on panel can cause focus event
+    ev.preventDefault();
+  }
+}
+watch(
+  () => props.expanded,
+  () => {
+    panelExpanded.value = props.expanded;
+  }
+);
+
+const emit = defineEmits(['update:expanded', 'panel-resize']);
+watch(panelExpanded, current => {
+  emit('update:expanded', current);
+  emit('panel-resize', { id: props.id, expanded: current });
+});
+</script>

package/src/components/CvUIShell/CvSideNav.vue

@@ -0,0 +1,131 @@
+<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"
+    ref="el"
+  >
+    <slot></slot>
+    <cv-side-nav-footer
+      v-if="!fixed && !rail && !panelData.headerEmbedded"
+      :expanded="panelExpanded"
+      :assistiveText="assistiveToggleText"
+      @toggle-expand="toggleExpand"
+    />
+  </nav>
+</template>
+
+<script setup>
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  unref,
+  watch,
+} from 'vue';
+import CvSideNavFooter from './_CvSideNavFooter.vue';
+import { carbonPrefix } from '../../global/settings';
+import { getBus } from '../../global/component-utils/event-bus';
+
+const props = defineProps({
+  modelValue: {
+    validator(value) {
+      if (value !== undefined) {
+        console.error(
+          'v-model has changed in Vue3 please specify v-model:expanded'
+        );
+        return false;
+      }
+      return true;
+    },
+  },
+  expanded: Boolean,
+  fixed: Boolean,
+  id: { type: String, required: true },
+  assistiveToggleText: String,
+  rail: Boolean,
+});
+
+const el = ref(null);
+const panelExpanded = computed({
+  get() {
+    return data.dataExpanded;
+  },
+  /**
+   * @param {boolean} val
+   */
+  set(val) {
+    data.dataExpanded = val;
+  },
+});
+/**
+ * @type {CvHeaderPanel}
+ */
+const panelData = {
+  id: props.id,
+  rail: props.rail,
+  headerEmbedded: undefined,
+  panelExpanded,
+  el,
+};
+
+const parent = inject('cv-header-id', '');
+const bus = ref(undefined);
+onMounted(() => {
+  if (unref(parent)) bus.value = getBus(parent);
+  // side nav may be fixed and not part of the header
+
+  bus.value?.emit('cv:panel-mounted', panelData);
+});
+onBeforeUnmount(() => {
+  bus.value?.emit('cv:panel-beforeDestroy', panelData);
+});
+
+const data = reactive({
+  dataExpanded: props.expanded,
+});
+
+watch(
+  () => props.expanded,
+  () => {
+    panelExpanded.value = props.expanded;
+  }
+);
+const emit = defineEmits(['update:expanded', 'panel-resize']);
+watch(panelExpanded, current => {
+  emit('update:expanded', current);
+  emit('panel-resize', { id: props.id, expanded: current });
+});
+
+const isChildOfHeader = computed(() => {
+  return !!bus.value;
+});
+
+function onFocusout(ev) {
+  bus.value?.emit('cv:panel-focusout', { panel: panelData, ev });
+}
+function onMouseDown(ev) {
+  if (el.value === ev.target || el.value?.contains(ev.target)) {
+    // ignore mousedown on panel can cause focus event
+    ev.preventDefault();
+  }
+}
+function toggleExpand() {
+  panelExpanded.value = data.dataExpanded;
+}
+</script>

package/src/components/CvUIShell/CvSideNavIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--side-nav__icon`,
+      { [`${carbonPrefix}--side-nav__icon--small`]: small },
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+defineProps({
+  small: Boolean,
+});
+</script>

package/src/components/CvUIShell/CvSideNavItems.vue

@@ -0,0 +1,22 @@
+<template>
+  <ul
+    :class="`cv-side-nav-items ${carbonPrefix}--side-nav__items`"
+    @mousedown="onMousedown"
+    ref="el"
+  >
+    <slot />
+  </ul>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { ref } from 'vue';
+
+const el = ref(null);
+function onMousedown(ev) {
+  if (ev.target === el.value) {
+    // non-css fix for #448
+    ev.preventDefault();
+  }
+}
+</script>