@carbon/vue 3.0.9 → 3.0.10

package/src/components/CvTooltip/CvInteractiveTooltip.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="cv-interactive-tooltip" ref="root">
+  <div ref="root" class="cv-interactive-tooltip">
     <div :id="`${cvId}-label`" :class="`${carbonPrefix}--tooltip__label`">
       <slot name="label"></slot>
 
       <button
+        ref="trigger"
         :aria-expanded="dataVisible ? 'true' : 'false'"
         :aria-labelledby="`${cvId}-label`"
         :class="`${carbonPrefix}--tooltip__trigger`"
         :aria-controls="`${cvId}`"
         aria-haspopup="true"
-        ref="trigger"
         type="button"
         @click="toggle(dataVisible)"
         @keydown.tab="onTriggerTab"
@@ -23,6 +23,7 @@
 
     <div
       :id="cvId"
+      ref="popup"
       :aria-hidden="!dataVisible"
       :data-floating-menu-direction="direction"
       :class="[
@@ -33,18 +34,17 @@
           [`${carbonPrefix}--tooltip--align-${alignment}`]: alignment,
         },
       ]"
-      ref="popup"
       role="dialog"
       :aria-describedby="`${cvId}-body`"
       :aria-labelledby="`${cvId}-label`"
-      @focusout="checkFocusOut"
       :style="{ left: left + 'px', top: top + 'px' }"
       tabindex="-1"
+      @focusout="checkFocusOut"
       @mousedown.prevent="preventFocusOut"
     >
       <div
-        class="cv-interactive-tooltip__before-content"
         ref="beforeContent"
+        class="cv-interactive-tooltip__before-content"
         tabindex="0"
         style="position: absolute; left: -9999px; width: 1px; height: 1px"
         @focus="focusBeforeContent"
@@ -54,8 +54,8 @@
         <slot name="content"></slot>
       </div>
       <div
-        class="cv-interactive-tooltip__after-content"
         ref="afterContent"
+        class="cv-interactive-tooltip__after-content"
         tabindex="0"
         style="position: absolute; left: -9999px; width: 1px; height: 1px"
         @focus="focusAfterContent"

package/src/components/CvTooltip/__tests__/__snapshots__/CvTooltip.spec.js.snap

@@ -1,44 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CvDefinitionTooltip should render definition tooltip with aligment and direction set as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-end" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-end" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with aligment set to \`center\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with aligment set to \`end\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-end" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-end" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with aligment set to \`start\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-start" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-start" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with direction set to \`bottom\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-center" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with direction set to \`top\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip: minimal as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 

package/src/components/CvUIShell/CvHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header :class="`cv-header ${carbonPrefix}--header`" data-header :id="uid">
+  <header :id="uid" :class="`cv-header ${carbonPrefix}--header`" data-header>
     <slot />
     <div v-if="hasGlobalHeader" :class="`${carbonPrefix}--header__global`">
       <slot name="header-global" />

package/src/components/CvUIShell/CvHeaderGlobalAction.vue

@@ -1,5 +1,7 @@
 <template>
   <cv-icon-button
+    :id="uid"
+    ref="el"
     :class="[
       `cv-header-global-action`,
       `${carbonPrefix}--header__action`,
@@ -9,15 +11,13 @@
     aria-haspopup="true"
     :aria-controls="ariaControls"
     :aria-expanded="active ? 'true' : 'false'"
+    :label="label"
+    :tip-alignment="tipAlignment"
+    :tip-position="tipPosition"
     @click="gaToggle"
     @focusout="gaFocusout"
-    :id="uid"
-    :label="label"
-    :tipAlignment="tipAlignment"
-    :tipPosition="tipPosition"
-    ref="el"
   >
-    <template v-slot:icon>
+    <template #icon>
       <slot />
     </template>
   </cv-icon-button>
@@ -39,7 +39,7 @@ import CvIconButton from '../CvButton/CvIconButton.vue';
 
 const props = defineProps({
   active: { type: Boolean, default: false },
-  ariaControls: { type: String },
+  ariaControls: { type: String, default: undefined },
   label: { type: String, default: undefined },
   tipPosition: {
     type: String,

package/src/components/CvUIShell/CvHeaderMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <li
+    ref="el"
     :class="`cv-header-menu ${carbonPrefix}--header__submenu`"
     @mouseenter="doHoverToggle(true)"
     @mouseleave="doHoverToggle(false)"
-    ref="el"
   >
     <a
       aria-haspopup="true"
@@ -26,11 +26,11 @@
       />
     </a>
     <ul
+      ref="menu"
       :aria-label="$attrs.ariaLabel"
       :aria-labelledby="$attrs.ariaLabelledBy"
       :class="`${carbonPrefix}--header__menu`"
       role="menu"
-      ref="menu"
       @focusout="onFocusout"
     >
       <slot></slot>
@@ -44,7 +44,7 @@ import ChevronDownGlyph from '@carbon/icons-vue/es/chevron--down';
 import { reactive, ref } from 'vue';
 
 const props = defineProps({
-  title: String,
+  title: { type: String, default: undefined },
   hoverToggle: { type: Boolean, default: true },
 });
 const data = reactive({

package/src/components/CvUIShell/CvHeaderMenuButton.vue

@@ -1,5 +1,7 @@
 <template>
   <button
+    :id="uid"
+    ref="el"
     class="cv-header-menu-button"
     :class="[
       `${carbonPrefix}--header__action`,
@@ -16,8 +18,6 @@
     :aria-expanded="active ? 'true' : 'false'"
     @click="gaToggle"
     @focusout="gaFocusout"
-    :id="uid"
-    ref="el"
   >
     <close20 v-if="dataActive" />
     <menu20 v-if="!dataActive" />

package/src/components/CvUIShell/CvHeaderMenuItem.vue

@@ -24,8 +24,8 @@ import { computed } from 'vue';
 
 const props = defineProps({
   active: Boolean,
-  ariaCurrent: String,
-  role: String,
+  ariaCurrent: { type: String, default: undefined },
+  role: { type: String, default: undefined },
   ...propsLink,
 });
 

package/src/components/CvUIShell/CvHeaderName.vue

@@ -16,7 +16,7 @@ import { carbonPrefix } from '../../global/settings';
 import { useTagType, useLinkProps, props as propsLink } from '../../use/cvLink';
 
 const props = defineProps({
-  prefix: String,
+  prefix: { type: String, default: undefined },
   ...propsLink,
 });
 

package/src/components/CvUIShell/CvHeaderNav.vue

@@ -13,6 +13,6 @@
 <script setup>
 import { carbonPrefix } from '../../global/settings';
 defineProps({
-  ariaLabelledBy: String,
+  ariaLabelledBy: { type: String, default: undefined },
 });
 </script>

package/src/components/CvUIShell/CvHeaderPanel.vue

@@ -1,15 +1,15 @@
 <template>
   <div
+    :id="id"
+    ref="el"
     :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>
@@ -39,6 +39,7 @@ const props = defineProps({
       }
       return true;
     },
+    default: undefined,
   },
   expanded: Boolean,
   id: { type: String, required: true },

package/src/components/CvUIShell/CvSideNav.vue

@@ -1,5 +1,7 @@
 <template>
   <nav
+    :id="id"
+    ref="el"
     :class="[
       `cv-side-nav`,
       `${carbonPrefix}--side-nav`,
@@ -12,18 +14,16 @@
       },
     ]"
     :aria-hidden="!panelExpanded && !fixed ? 'true' : 'false'"
-    :id="id"
     @focusout="onFocusout"
     @mousedown="onMouseDown"
     @mouseenter="onHoverToggle(true)"
     @mouseleave="onHoverToggle(false)"
-    ref="el"
   >
     <slot></slot>
     <cv-side-nav-footer
       v-if="!fixed && !rail && !panelData.headerEmbedded"
       :expanded="panelExpanded"
-      :assistiveText="assistiveToggleText"
+      :assistive-text="assistiveToggleText"
       @toggle-expand="toggleExpand"
     />
   </nav>
@@ -55,11 +55,12 @@ const props = defineProps({
       }
       return true;
     },
+    default: undefined,
   },
   expanded: Boolean,
   fixed: Boolean,
   id: { type: String, required: true },
-  assistiveToggleText: String,
+  assistiveToggleText: { type: String, default: undefined },
   rail: Boolean,
 });
 

package/src/components/CvUIShell/CvSideNavItems.vue

@@ -1,8 +1,8 @@
 <template>
   <ul
+    ref="el"
     :class="`cv-side-nav-items ${carbonPrefix}--side-nav__items`"
     @mousedown="onMousedown"
-    ref="el"
   >
     <slot />
   </ul>

package/src/components/CvUIShell/CvSideNavLink.vue

@@ -28,7 +28,7 @@ import { onMounted, onUpdated, reactive, useSlots } from 'vue';
 
 const props = defineProps({
   active: Boolean,
-  icon: Object,
+  icon: { type: Object, default: undefined },
   ...propsLink,
 });
 const tagType = useTagType(props);

package/src/components/CvUIShell/_CvSideNavFooter.vue

@@ -4,8 +4,8 @@
       :class="`${carbonPrefix}--side-nav__toggle`"
       type="button"
       v-bind="$attrs"
-      @click="$emit('toggle-expand')"
       :title="assistiveText"
+      @click="$emit('toggle-expand')"
     >
       <div :class="`${carbonPrefix}--side-nav__icon`">
         <close20
@@ -33,4 +33,5 @@ defineProps({
   assistiveText: { type: String, default: 'Open / close side nav' },
   expanded: Boolean,
 });
+defineEmits(['toggle-expand']);
 </script>