@carbon/vue 3.0.11 → 3.0.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
   "packageManager": "yarn@3.2.0",
   "main": "dist/carbon-vue-3.umd.min.js",
@@ -174,5 +174,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "1a9b7dd369e0985937b5b1efcc1dea6ce9ce40a5"
+  "gitHead": "f685b28f8725fb4f61078e347e394ea08e4c0b5c"
 }

package/src/components/CvDataTable/CvDataTable.stories.mdx

@@ -10,16 +10,28 @@ import { sbCompPrefix } from '../../global/storybook-utils';
 import { action } from '@storybook/addon-actions';
 import { Terminal16 as CompileIcon, Debug16 as DebugIcon, Chip16 as EmbedIcon,
   TrashCan16 as TrashCanIcon} from '@carbon/icons-vue'
-const testData = [
-  { name:"Java", year:1995, oo:"Yes", purpose:"Applications", standard:"Java Language Specification", desc: "As of September 2022, Java 19 is the latest version, while Java 17, 11 and 8 are the current long-term support (LTS) versions."},
-  { name:"COBOL", year:1959, oo:"Yes", purpose:"Business applications", standard:"COBOL 2014", desc: "COBOL statements have an English-like syntax, which was designed to be self-documenting and highly readable."},
-  { name:"Pascal", year:1970, oo:"No", purpose:"Applications", standard:"None", desc: "Pascal was developed on the pattern of the ALGOL 60 language."},
-  { name:"Ada", year:1980, oo:"Yes", purpose:"US DoD projects", standard:"Ada 2012 TC1", desc: "Ada was named after Ada Lovelace (1815–1852), who has been credited as the first computer programmer."},
-  { name:"BASIC", year:1964, oo:"No", purpose:"Education", standard:"ANSI", desc: "BASIC declined in popularity in the 1990s"},
-  { name:"C++", year:1985, oo:"Yes", purpose:"Systems programming", standard:"ISO/IEC 2017", desc: "C++ is standardized by the International Organization for Standardization (ISO), with the latest standard version ratified and published by ISO in December 2020 as ISO/IEC 14882:2020 (informally known as C++20)."},
-  { name:"Fortran", year:1957, oo:"No", purpose:"Engineering applications", standard:"ANSI", desc: "Fortran was originally developed by IBM in the 1950s for scientific and engineering applications, and subsequently came to dominate scientific computing."},
-  { name:"Go", year:2009, oo:"Maybe", purpose:"Networked applications", standard:"Go Spec", desc: "Go's designers were primarily motivated by their shared dislike of C++."},
-];
+import { ref } from 'vue';
+const testData = ref([
+  { index:"0", name:"Java", year:1995, oo:"Yes", purpose:"Applications", standard:"Java Language Specification", desc: "As of September 2022, Java 19 is the latest version, while Java 17, 11 and 8 are the current long-term support (LTS) versions."},
+  { index:"1", name:"COBOL", year:1959, oo:"Yes", purpose:"Business applications", standard:"COBOL 2014", desc: "COBOL statements have an English-like syntax, which was designed to be self-documenting and highly readable."},
+  { index:"2", name:"Pascal", year:1970, oo:"No", purpose:"Applications", standard:"None", desc: "Pascal was developed on the pattern of the ALGOL 60 language."},
+  { index:"3", name:"Ada", year:1980, oo:"Yes", purpose:"US DoD projects", standard:"Ada 2012 TC1", desc: "Ada was named after Ada Lovelace (1815–1852), who has been credited as the first computer programmer."},
+  { index:"4", name:"BASIC", year:1964, oo:"No", purpose:"Education", standard:"ANSI", desc: "BASIC declined in popularity in the 1990s"},
+  { index:"5", name:"C++", year:1985, oo:"Yes", purpose:"Systems programming", standard:"ISO/IEC 2017", desc: "C++ is standardized by the International Organization for Standardization (ISO), with the latest standard version ratified and published by ISO in December 2020 as ISO/IEC 14882:2020 (informally known as C++20)."},
+  { index:"6", name:"Fortran", year:1957, oo:"No", purpose:"Engineering applications", standard:"ANSI", desc: "Fortran was originally developed by IBM in the 1950s for scientific and engineering applications, and subsequently came to dominate scientific computing."},
+  { index:"7", name:"Go", year:2009, oo:"Maybe", purpose:"Networked applications", standard:"Go Spec", desc: "Go's designers were primarily motivated by their shared dislike of C++."},
+]);
+function sortTestData(opts) {
+  action('sort')(opts)
+  if (opts.order === 'none')
+    return testData.value.sort((a, b) => a.index.localeCompare(b.index, 'en', { sensitivity: 'base' }));
+  let direction = 1
+  if (opts.order === 'descending') direction = -1
+  if (opts.name === 'name')
+    return testData.value.sort((a, b) => direction * a.name.localeCompare(b.name, 'en', { sensitivity: 'base' }));
+  else if (opts.name === 'year')
+    return testData.value.sort((a, b) => direction * (a.year - b.year));
+}
 
 <Meta title={`${sbCompPrefix}/CvDataTable`} component={CvDataTable} />
 
@@ -46,7 +58,7 @@ setup() {
       useHelperTextSlot: undefined,
       template: undefined},
     trashIcon: TrashCanIcon,
-    onSort: action('sort'),
+    onSort: sortTestData,
     onSearch: action('search'),
     onRowSelectChange: action('row-select-change'),
     onRowSelectChanges: action('row-select-changes'),
@@ -101,14 +113,14 @@ const defaultTemplate = `
       </embed-icon>
     </cv-data-table-action>
   </template>
-  <template v-slot:headings>
+  <template #headings>
     <cv-data-table-heading heading="Name" name="name" sortable/>
     <cv-data-table-heading heading="Year" name="year" sortable/>
     <cv-data-table-heading heading="Object Oriented"/>
     <cv-data-table-heading heading="Purpose" />
     <cv-data-table-heading heading="Standard" />
   </template>
-  <template v-slot:data>
+  <template #data>
     <cv-data-table-row v-for="row in testData" :key="row.name" :value="row.name">
       <cv-data-table-cell>{{row.name}}</cv-data-table-cell>
       <cv-data-table-cell>{{row.year}}</cv-data-table-cell>
@@ -122,7 +134,7 @@ const defaultTemplate = `
 `;
 const expandingRowsTemplate = defaultTemplate.replace(
   "<!-- Add optional expanding data here -->",
-  `<template v-slot:expandedContent>{{row.desc}}</template>`)
+  `<template #expandedContent>{{row.desc}}</template>`)
   .replace('@search="onSearch"', '')
 const skeletonTemplate = `
 <cv-data-table-skeleton
@@ -137,6 +149,19 @@ const skeletonTemplate = `
 
 **Usage:**
 - Sorting, filtering and pagination are the responsibility of the component user. This component raises events to facilitate this.
+  For example the test data is sorted like this but this is very specific to this data. Users will need to provide their own sort and filtering.
+  ```javascript
+  function sortTestData(opts) {
+    if (opts.order === 'none')
+      return testData.value.sort((a, b) => a.index.localeCompare(b.index, 'en', { sensitivity: 'base' }));
+    let direction = 1
+    if (opts.order === 'descending') direction = -1
+    if (opts.name === 'name')
+      return testData.value.sort((a, b) => direction * a.name.localeCompare(b.name, 'en', { sensitivity: 'base' }));
+    else if (opts.name === 'year')
+      return testData.value.sort((a, b) => direction * (a.year - b.year));
+  }
+  ```
 - The search bar appears only if the search event is listened for.
 
 **Row attributes:**

package/src/components/CvDataTable/CvDataTableHeading.vue

@@ -127,11 +127,9 @@ const internalOrder = computed(() => {
     return undefined;
   }
   const heading = store.findHeading(parent, cvId);
-  if (heading?.order !== 'ascending' && heading?.order !== 'descending') {
-    return 'none';
-  } else {
-    return heading?.order;
-  }
+  if (['ascending', 'descending', 'none'].includes(heading?.order))
+    return heading.order;
+  else return 'none';
 });
 
 const headingLabelTag = computed(() => {

package/src/components/CvDatePicker/CvDatePicker.vue

@@ -42,13 +42,12 @@
             data-date-picker-input
             role="datepicker"
             :data-invalid="isInvalid || null"
-            :disabled="disabled"
-            :data-date-picker-input-from="getKind === 'range'"
+            :disabled="disabled || null"
+            :data-date-picker-input-from="`${getKind === 'range'}`"
             :class="`${carbonPrefix}--date-picker__input`"
             :pattern="pattern"
             :placeholder="placeholder"
             @change="handleUpdateEvent"
-            @click="handleClick"
           />
           <Calendar16
             v-if="['single', 'range'].includes(getKind)"
@@ -87,9 +86,9 @@
             type="text"
             data-date-picker-input
             role="todatepicker"
-            :data-date-picker-input-to="kind === 'range'"
+            :data-date-picker-input-to="`${kind === 'range'}`"
             :data-invalid="isInvalid || null"
-            :disabled="disabled"
+            :disabled="disabled || null"
             :class="`${carbonPrefix}--date-picker__input`"
             :pattern="pattern"
             :placeholder="placeholder"
@@ -136,9 +135,6 @@ const dateWrapper = ref(null);
 const date = ref(null);
 const todate = ref(null);
 
-const cvId = useCvId(props, true, 'date-picker-');
-const isLight = useIsLight(props);
-
 let calendar;
 
 const props = defineProps({
@@ -169,6 +165,9 @@ const props = defineProps({
   ...propsCvTheme,
 });
 
+const cvId = useCvId(props, true, 'date-picker-');
+const isLight = useIsLight(props);
+
 const emit = defineEmits(['update:modelValue']);
 
 const getKind = computed({

package/src/components/CvModal/CvModal.vue

@@ -8,7 +8,7 @@
         `cv-modal ${carbonPrefix}--modal`,
         {
           'is-visible': dataVisible,
-          [`${carbonPrefix}--modal--danger`]: kind === 'danger',
+          [`${carbonPrefix}--modal--danger`]: kind === MODAL_KIND_DANGER,
         },
       ]"
       tabindex="-1"
@@ -119,6 +119,15 @@
 </template>
 
 <script setup>
+import {
+  MODAL_KIND_DANGER,
+  MODAL_KIND_PRIMARY,
+  MODAL_KINDS,
+  MODAL_SIZE_EXTRA_SMALL,
+  MODAL_SIZE_LARGE,
+  MODAL_SIZE_SMALL,
+  MODAL_SIZES,
+} from './index';
 import CvButton from '../CvButton/CvButton.vue';
 import { carbonPrefix } from '../../global/settings';
 import { props as propsCvId, useCvId } from '../../use/cvId';
@@ -155,7 +164,11 @@ const props = defineProps({
   kind: {
     type: String,
     default: '',
-    validator: val => ['', 'danger'].includes(val),
+    validator: val => {
+      const valid = MODAL_KINDS.includes(val);
+      if (!valid) console.warn('valid kinds:', MODAL_KINDS);
+      return valid;
+    },
   },
   /**
    * boolean value if true the component user is expected to close the modal via visible property.
@@ -187,8 +200,11 @@ const props = defineProps({
    */
   size: {
     type: String,
-    validator: val =>
-      ['', 'xs', 'sm', 'small', 'md', 'large', 'lg'].includes(val),
+    validator: val => {
+      const valid = MODAL_SIZES.includes(val);
+      if (!valid) console.warn('valid sizes:', MODAL_SIZES);
+      return valid;
+    },
     default: '',
   },
   /**
@@ -333,22 +349,22 @@ const dialogAttrs = computed(() => {
   return attrs;
 });
 const primaryKind = computed(() => {
-  if (props.kind === 'danger') {
-    return 'danger';
+  if (props.kind === MODAL_KIND_DANGER) {
+    return MODAL_KIND_DANGER;
   } else {
-    return 'primary';
+    return MODAL_KIND_PRIMARY;
   }
 });
 const internalSize = computed(() => {
   switch (props.size) {
-    case 'xs':
-      return 'xs';
-    case 'sm':
+    case MODAL_SIZE_EXTRA_SMALL:
+      return MODAL_SIZE_EXTRA_SMALL;
+    case MODAL_SIZE_SMALL:
     case 'small':
-      return 'sm';
-    case 'lg':
+      return MODAL_SIZE_SMALL;
+    case MODAL_SIZE_LARGE:
     case 'large':
-      return 'lg';
+      return MODAL_SIZE_LARGE;
     default:
       return '';
   }
@@ -398,4 +414,10 @@ function onOtherBtnClick(ev) {
 onBeforeUnmount(() => {
   if (dataVisible.value) hide();
 });
+
+// exposing methods
+defineExpose({
+  show,
+  hide,
+});
 </script>

package/src/components/CvModal/index.js

@@ -1,3 +1,31 @@
 import CvModal from './CvModal.vue';
-export { CvModal };
+
+const MODAL_SIZE_EXTRA_SMALL = 'xs';
+const MODAL_SIZE_SMALL = 'sm';
+const MODAL_SIZE_MEDIUM = 'md';
+const MODAL_SIZE_LARGE = 'lg';
+const MODAL_SIZES = [
+  '',
+  MODAL_SIZE_EXTRA_SMALL,
+  MODAL_SIZE_SMALL,
+  'small',
+  MODAL_SIZE_MEDIUM,
+  'medium',
+  'large',
+  MODAL_SIZE_LARGE,
+];
+const MODAL_KIND_PRIMARY = 'primary';
+const MODAL_KIND_DANGER = 'danger';
+const MODAL_KINDS = ['', MODAL_KIND_PRIMARY, MODAL_KIND_DANGER];
+
+export {
+  CvModal,
+  MODAL_SIZES,
+  MODAL_SIZE_EXTRA_SMALL,
+  MODAL_SIZE_SMALL,
+  MODAL_SIZE_LARGE,
+  MODAL_KINDS,
+  MODAL_KIND_PRIMARY,
+  MODAL_KIND_DANGER,
+};
 export default CvModal;

package/src/components/CvMultiSelect/CvMultiSelect.vue

@@ -426,8 +426,8 @@ onUpdated(checkSlots);
 onMounted(updateOptions);
 onMounted(updateSelectedItems);
 
-watch(() => props.modelValue, updateSelectedItems);
-watch(() => props.options, updateOptions);
+watch(() => props.modelValue, updateSelectedItems, { deep: true });
+watch(() => props.options, updateOptions, { deep: true });
 watch(() => props.selectionFeedback, updateOptions);
 
 const highlighted = computed({

package/src/components/CvNotification/CvInlineNotification.stories.js

@@ -1,7 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { sbCompPrefix } from '../../global/storybook-utils';
+import { sbCompPrefix, storySourceCode } from '../../global/storybook-utils';
 
 import { CvInlineNotification, CvNotificationConsts } from '.';
+import DocumentationTemplate from './CvInlineNotificationTemplate.mdx';
 
 export default {
   title: `${sbCompPrefix}/CvInlineNotification`,
@@ -59,6 +60,11 @@ export default {
       control: { type: 'boolean' },
     },
   },
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
 };
 
 const template = `<cv-inline-notification v-bind="args" @action="onAction" @close="onClose" />`;
@@ -79,6 +85,10 @@ const Template = args => {
 export const Info = Template.bind({});
 Info.args = {
   kind: CvNotificationConsts.notificationKinds[0],
+  primary: true,
+};
+Info.parameters = {
+  docs: { source: { code: storySourceCode(template, Info.args) } },
 };
 
 export const InfoSquare = Template.bind({});
@@ -86,24 +96,71 @@ InfoSquare.storyName = 'Info square';
 InfoSquare.args = {
   kind: CvNotificationConsts.notificationKinds[1],
 };
+InfoSquare.parameters = {
+  docs: { source: { code: storySourceCode(template, InfoSquare.args) } },
+};
 
 export const Success = Template.bind({});
 Success.args = {
   kind: CvNotificationConsts.notificationKinds[2],
 };
+Success.parameters = {
+  docs: { source: { code: storySourceCode(template, Success.args) } },
+};
 
 export const Warning = Template.bind({});
 Warning.args = {
   kind: CvNotificationConsts.notificationKinds[3],
 };
+Warning.parameters = {
+  docs: { source: { code: storySourceCode(template, Warning.args) } },
+};
 
 export const WarningAlt = Template.bind({});
 WarningAlt.storyName = 'Warning (alt)';
 WarningAlt.args = {
   kind: CvNotificationConsts.notificationKinds[4],
 };
+WarningAlt.parameters = {
+  docs: { source: { code: storySourceCode(template, WarningAlt.args) } },
+};
 
 export const Error = Template.bind({});
 Error.args = {
   kind: CvNotificationConsts.notificationKinds[5],
 };
+Error.parameters = {
+  docs: { source: { code: storySourceCode(template, Error.args) } },
+};
+
+const templateSlots = `
+  <cv-inline-notification v-bind="args">
+    <template #title>
+      <h2>Big title</h2>
+    </template>
+    <template #subtitle>
+    Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, seed do eiusmod tempor <strong>incididunt ut labore</strong> et dolore magna aliqua.
+    </template>
+  </cv-inline-notification>`;
+const SlotTemplate = args => {
+  return {
+    components: { CvInlineNotification },
+    template: templateSlots,
+    setup() {
+      return {
+        onAction: action('action'),
+        onClose: action('close'),
+        args,
+      };
+    },
+  };
+};
+export const Slots = SlotTemplate.bind({});
+Slots.args = {
+  kind: CvNotificationConsts.notificationKinds[0],
+  actionLabel: '',
+  hideCloseButton: true,
+};
+Slots.parameters = {
+  docs: { source: { code: storySourceCode(templateSlots, Slots.args) } },
+};

package/src/components/CvNotification/CvInlineNotification.vue

@@ -15,10 +15,14 @@
       />
       <div :class="`${carbonPrefix}--inline-notification__text-wrapper`">
         <p :class="`${carbonPrefix}--inline-notification__title`">
-          {{ title }}
+          <slot name="title">
+            {{ title }}
+          </slot>
         </p>
         <div :class="`${carbonPrefix}--inline-notification__subtitle`">
-          {{ subTitle }}
+          <slot name="subtitle">
+            {{ subTitle }}
+          </slot>
         </div>
       </div>
     </div>
@@ -35,6 +39,7 @@
       {{ actionLabel }}
     </button>
     <button
+      v-if="!hideCloseButton"
       type="button"
       :aria-label="closeAriaLabel"
       :class="`${carbonPrefix}--inline-notification__close-button`"
@@ -66,7 +71,7 @@ export default {
       type: String,
       default: '',
     },
-    /** Notification sub title (supports HTML) */
+    /** Notification subtitle */
     subTitle: {
       type: String,
       default: '',
@@ -86,6 +91,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    /** Set to true to hide the code button */
+    hideCloseButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     /** Emitted on clicking the action button */

package/src/components/CvNotification/CvInlineNotificationTemplate.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title,  Primary, Stories } from '@storybook/addon-docs';
+
+<Meta isTemplate />
+
+<Title />
+
+Migration notes:
+
+- **Breaking**. The `subTitle` property no longer renders html. Please use the `subtitle` slot instead.
+- The `title` content can now be provided in the `title` slot.
+
+<Primary />
+
+<Controls />
+
+<Stories />

package/src/components/CvSearch/CvSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="formItem ? 'div' : CvEmpty"
-    :class="`cv-search ${carbonPrefix}--form-item`"
+    :class="[`cv-search`, `${carbonPrefix}--form-item`, $attrs.class]"
   >
     <div
       ref="elSearch"

package/src/components/CvTabs/CvTabs.vue

@@ -71,7 +71,7 @@
             role="tab"
             :aria-controls="tab.uid"
             :aria-disabled="disabledTabs.has(tab.uid) || null"
-            :aria-selected="selectedId === tab.uid"
+            :aria-selected="`${selectedId === tab.uid}`"
             :tabindex="selectedId === tab.uid ? 0 : -1"
             type="button"
             @click="onTabClick(tab.uid)"
@@ -187,7 +187,7 @@ function maybeSelectFirstTab() {
   if (index > -1) selectedId.value = tabs.value[index].uid;
 }
 onMounted(maybeSelectFirstTab);
-watch(tabs, maybeSelectFirstTab);
+watch(tabs, maybeSelectFirstTab, { deep: true });
 watch(selectedId, () => {
   nextTick(() => {
     doTabClick(selectedId.value);