@carbon/vue 3.0.10 → 3.0.12

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.9",
+  "version": "3.0.11",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1679,15 +1679,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "value",
-              "description": "Render with a value already selected. Available as `v-model:value`.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
             {
               "name": "warningMessage",
               "description": "Provide the text that is displayed and put the control in warning state",
@@ -1699,6 +1690,7 @@
             },
             {
               "name": "modelValue",
+              "description": "Render with a value already selected. Available as `v-model`.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1707,9 +1699,6 @@
             }
           ],
           "events": [
-            {
-              "name": "update:value"
-            },
             {
               "name": "update:modelValue"
             },
@@ -2498,7 +2487,7 @@
             },
             {
               "name": "subTitle",
-              "description": "Notification sub title (supports HTML)",
+              "description": "Notification subtitle",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2531,6 +2520,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "hideCloseButton",
+              "description": "Set to true to hide the code button",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "events": [
@@ -2543,6 +2541,14 @@
               "description": "Emitted on clicking the close button"
             }
           ],
+          "slots": [
+            {
+              "name": "title"
+            },
+            {
+              "name": "subtitle"
+            }
+          ],
           "source": {
             "module": "./src/components/CvNotification/CvInlineNotification.vue",
             "symbol": "default"
@@ -3031,14 +3037,6 @@
               },
               "default": "undefined"
             },
-            {
-              "name": "value",
-              "value": {
-                "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
-            },
             {
               "name": "warningMessage",
               "description": "Provide the text that is displayed and put the control in warning state",
@@ -3054,12 +3052,12 @@
                 "kind": "expression",
                 "type": "array"
               },
-              "default": "undefined"
+              "default": "[]"
             }
           ],
           "events": [
             {
-              "name": "update:value"
+              "name": "update:modelValue"
             },
             {
               "name": "change"
@@ -3488,6 +3486,24 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "CvProgressSkeleton",
+          "description": "",
+          "attributes": [
+            {
+              "name": "vertical",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/CvProgress/CvProgressSkeleton.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "CvProgressStep",
           "description": "",
@@ -3764,17 +3780,9 @@
               },
               "default": "undefined"
             },
-            {
-              "name": "value",
-              "description": "Optionally provide the default value of the `<input>`",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
             {
               "name": "modelValue",
+              "description": "Optionally provide the default value of the `<input>`",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3803,9 +3811,6 @@
             {
               "name": "input"
             },
-            {
-              "name": "update:value"
-            },
             {
               "name": "update:modelValue"
             }

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.10",
+  "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",
   "types": "src/index.d.ts",
   "web-types": "dist/web-types.json",
   "scripts": {
-    "_postinstall": "node prepare.js",
+    "_postinstall": "node prepare.js && node .storybook/postinstall.js",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "build": "vue-cli-service build --target lib --name carbon-vue-3 ./src/index.js --no-clean",
@@ -174,5 +174,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "337cb41677bb308c20c43938f3485faaf7db87c0"
+  "gitHead": "f685b28f8725fb4f61078e347e394ea08e4c0b5c"
 }

package/src/components/CvComboBox/CvComboBox.vue

@@ -59,7 +59,7 @@
           :aria-controls="cvId"
           aria-autocomplete="list"
           role="combobox"
-          :aria-disabled="disabled"
+          :aria-disabled="disabled || null"
           :aria-expanded="open ? 'true' : 'false'"
           autocomplete="off"
           :disabled="disabled"

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/CvDataTable.vue

@@ -23,7 +23,7 @@
       <section v-if="hasToolbar" :class="`${carbonPrefix}--table-toolbar`">
         <div
           v-show="hasBatchActions"
-          :aria-hidden="!batchActive"
+          :aria-hidden="`${!batchActive}`"
           :class="[
             `${carbonPrefix}--batch-actions`,
             { [`${carbonPrefix}--batch-actions--active`]: batchActive },

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/CvDropdown/CvDropdown.stories.mdx

@@ -49,7 +49,7 @@ const defaultTemplate = `
 <cv-dropdown
   :light="light"
   :placeholder="placeholder"
-  :value="value"
+  :modelValue="modelValue"
   :up="up"
   :inline="inline"
   :helper-text="helperText"
@@ -71,7 +71,7 @@ const defaultTemplate = `
 const slotsTemplate = `
 <div :style="{width: '300px'}">
 <cv-dropdown
-  v-model:value="myValue"
+  v-model="myValue"
   :light="light"
   :placeholder="placeholder"
   :up="up"
@@ -101,7 +101,7 @@ const itemsTemplate = `
 <cv-dropdown
   :light="light"
   :placeholder="placeholder"
-  :value="value"
+  :modelValue="modelValue"
   :up="up"
   :inline="inline"
   :helper-text="helperText"
@@ -119,7 +119,7 @@ const itemsTemplate = `
 const vmodelTemplate = `
 <div :style="{width: '300px'}">
 <cv-dropdown
-  v-model:value="myValue"
+  v-model="myValue"
   :label="label"
   :placeholder="placeholder"
   @change="onChange">
@@ -151,10 +151,7 @@ Notes:
 
 - You can place a Dropdown inline with other content by using the inline variant
   Migration notes:
-
-- The `v-model` is different in Vue 3 than Vue 2. You can still specify the `v-model=something` to control the visibility but
-  if you specify it like this you will see a deprecation message in the log. Please use `v-model:value=something` instead.
-- Add the `size` option to match Carbon React
+- Added the `size` option to match Carbon React
 - Added the `warningMessage` option to match Carbon React
 
 <Canvas>
@@ -168,21 +165,16 @@ Notes:
           'template',
           'change',
           'update:modelValue',
-          'update:value',
           'helper-text',
           'invalid-message',
           'warning-message',
           'internal-caption',
-          'modelValue',
         ],
       },
       docs: { source: { code: defaultTemplate } },
     }}
     args={{
       template: defaultTemplate,
-      props: {
-        modelValue: undefined,
-      },
       label: 'Characters',
       placeholder: 'Choose an ally',
       helperText: 'May the force be with you',
@@ -273,7 +265,6 @@ Notes:
           'template',
           'change',
           'update:modelValue',
-          'update:value',
           'helper-text',
           'invalid-message',
           'warning-message',
@@ -316,32 +307,7 @@ Notes:
     name="v-model"
     parameters={{
       controls: {
-        exclude: [
-          'props',
-          'default',
-          'template',
-          'change',
-          'update:modelValue',
-          'update:value',
-          'helper-text',
-          'invalid-message',
-          'warning-message',
-          'internal-caption',
-          'modelValue',
-          'ariaLabel',
-          'disabled',
-          'formItem',
-          'helperText',
-          'hideSelected',
-          'inline',
-          'invalidMessage',
-          'items',
-          'label',
-          'placeholder',
-          'size',
-          'up',
-          'value',
-          'warningMessage',
+        include: [
         ],
       },
       docs: { source: { code: vmodelTemplate } },
@@ -367,32 +333,7 @@ Notes:
     name="skeleton"
     parameters={{
       controls: {
-        exclude: [
-          'props',
-          'default',
-          'template',
-          'change',
-          'update:modelValue',
-          'update:value',
-          'helper-text',
-          'invalid-message',
-          'warning-message',
-          'internal-caption',
-          'modelValue',
-          'ariaLabel',
-          'disabled',
-          'formItem',
-          'helperText',
-          'hideSelected',
-          'invalidMessage',
-          'items',
-          'label',
-          'placeholder',
-          'size',
-          'up',
-          'value',
-          'warningMessage',
-          'inline',
+        include: [
         ],
       },
       docs: { source: { code: skeletonTemplate } },

package/src/components/CvDropdown/CvDropdown.vue

@@ -73,7 +73,7 @@
         <button
           ref="button"
           :aria-controls="`${uid}-menu`"
-          :aria-disabled="disabled"
+          :aria-disabled="disabled || null"
           :aria-expanded="open ? 'true' : 'false'"
           :aria-labelledby="ariaLabeledBy"
           :class="`${carbonPrefix}--list-box__field`"
@@ -129,7 +129,7 @@
       </div>
       <div
         v-else-if="data.isHelper"
-        :aria-disabled="disabled"
+        :aria-disabled="disabled || null"
         :class="[
           `${carbonPrefix}--form__helper-text`,
           { [`${carbonPrefix}--form__helper-text--disabled`]: disabled },
@@ -228,25 +228,15 @@ const props = defineProps({
    * Specify the direction of the dropdown. Can be either true (top) or (false) bottom.
    */
   up: { type: Boolean, default: false },
-  /**
-   * Render with a value already selected. Available as `v-model:value`.
-   */
-  value: { type: String, default: undefined },
   /**
    * Provide the text that is displayed and put the control in warning state
    */
   warningMessage: { type: String, default: undefined },
   /**
-   * @deprecated - use v-model:value
+   * Render with a value already selected. Available as `v-model`.
    */
   modelValue: {
     type: String,
-    validator: val => {
-      console.warn(
-        `v-model for cv-dropdown is deprecated. Specify "v-model:value" instead [${val}]`
-      );
-      return true;
-    },
     default: undefined,
   },
 
@@ -255,7 +245,7 @@ const props = defineProps({
 });
 const uid = useCvId(props, true);
 const isLight = useIsLight(props);
-const dataValue = ref(props.value);
+const dataValue = ref(props.modelValue);
 provide('dropdown-selected', dataValue);
 const focusItem = ref(undefined);
 provide('dropdown-focus', focusItem);
@@ -287,16 +277,15 @@ const isWarning = computed(() => {
 });
 onMounted(checkSlots);
 onUpdated(checkSlots);
-const emit = defineEmits(['update:value', 'update:modelValue', 'change']);
+const emit = defineEmits(['update:modelValue', 'change']);
 watch(
-  () => props.value,
+  () => props.modelValue,
   () => {
-    dataValue.value = props.value;
+    dataValue.value = props.modelValue;
   }
 );
 watch(dataValue, () => {
   emit('change', dataValue.value);
-  emit('update:value', dataValue.value);
   emit('update:modelValue', dataValue.value);
 });
 watch(open, () => {

package/src/components/CvDropdown/CvDropdownItem.vue

@@ -21,7 +21,7 @@
   >
     <a
       ref="link"
-      :aria-checked="dataSelected"
+      :aria-checked="`${dataSelected}`"
       :class="`${carbonPrefix}--dropdown-link`"
       href="javascript:void(0)"
       role="menuitemradio"