@carbon/vue 3.0.9-alpha.0 → 3.0.10

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>