@carbon/vue 3.0.20 → 3.0.21

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.19",
+  "version": "3.0.20",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1342,8 +1342,18 @@
           "name": "CvDataTableRow",
           "description": "",
           "attributes": [
+            {
+              "name": "value",
+              "description": "The value associated with the input (required for tables with batch actions)",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
             {
               "name": "expanded",
+              "description": "This row will be initially expanded",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1504,6 +1514,9 @@
           "events": [
             {
               "name": "update:modelValue"
+            },
+            {
+              "name": "dateChange"
             }
           ],
           "slots": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.20",
+  "version": "3.0.21",
   "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",

package/src/components/CvCheckbox/CvCheckbox.stories.js

@@ -15,7 +15,7 @@ export default {
   argTypes: {
     ...storybookControlsFromProps(propsCvCheck),
     value: {
-      type: 'string',
+      type: { raw: 'string', required: true },
       description:
         'The value associated with the input (this is also the value that is sent on submit)',
       table: {
@@ -68,6 +68,7 @@ const Template = args => {
 
 export const Default = Template.bind({});
 Default.args = { label: 'checkbox', value: 'check-1' };
+Default.parameters = { controls: { sort: 'requiredFirst' } };
 Default.parameters = storyParametersObject(
   Default.parameters,
   template,
@@ -81,7 +82,7 @@ const templateVModel = `<div>
 </cv-checkbox>
 <div style="margin-top:1rem; background-color: #888888;  padding:1rem"><div style="font-size: 150%">Sample interaction</div>
 <label for="checkbox">V-model: Check 1:</label>
-<input id="checkbox" type="checkbox" @change="(ev) => {modelValue = ev.currentTarget.checked}" />
+<input id="checkbox" type="checkbox" v-model="modelValue" />
 <div>Checked: <span style="font-weight: bold;">{{modelValue}}</span></div>
 </div>
 </div>
@@ -103,6 +104,7 @@ vModel.args = {
   label: 'checkbox',
   value: 'check-1',
 };
+vModel.parameters = { controls: { sort: 'requiredFirst' } };
 vModel.parameters = storyParametersObject(
   vModel.parameters,
   templateVModel,

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

@@ -21,8 +21,10 @@ const testData = ref([
   { 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++."},
 ]);
+const sortOpts = ref({index: "0", order: "none", name: "name"})
 function sortTestData(opts) {
   action('sort')(opts)
+  sortOpts.value = opts
   if (opts.order === 'none')
     return testData.value.sort((a, b) => a.index.localeCompare(b.index, 'en', { sensitivity: 'base' }));
   let direction = 1
@@ -32,6 +34,16 @@ function sortTestData(opts) {
   else if (opts.name === 'year')
     return testData.value.sort((a, b) => direction * (a.year - b.year));
 }
+// duplicate the test data
+const originalTestData = ref(JSON.parse(JSON.stringify(testData.value)))
+const searchOpts = ref("")
+function searchTestData(opts) {
+  action('search')(opts)
+  searchOpts.value = opts
+  if (!opts) testData.value = JSON.parse(JSON.stringify(originalTestData.value))
+  else testData.value = originalTestData.value.filter(data => data.name.indexOf(opts) > -1)
+  return sortTestData(sortOpts.value)
+}
 
 <Meta title={`${sbCompPrefix}/CvDataTable`} component={CvDataTable} />
 
@@ -59,7 +71,7 @@ setup() {
       template: undefined},
     trashIcon: TrashCanIcon,
     onSort: sortTestData,
-    onSearch: action('search'),
+    onSearch: searchTestData,
     onRowSelectChange: action('row-select-change'),
     onRowSelectChanges: action('row-select-changes'),
     onOverflowMenuClick: action('overflow-menu-click'),
@@ -77,6 +89,8 @@ setup() {
     skeletonTitle: args.title,
     skeletonHelper: args.helperText,
     testData,
+    originalTestData,
+    searchOpts
     };
 },
 // And then the `args` are bound to your component with `v-bind="args"`
@@ -91,6 +105,7 @@ const defaultTemplate = `
   @overflow-menu-click="onOverflowMenuClick"
   @row-expanded="onRowExpanded"
   @pagination="onPagination"
+  :initialSearchValue="searchOpts"
   >
   <template v-if="useBatchActions" #batch-actions>
     <cv-button :icon="trashIcon" @click="onDelete">Delete</cv-button>
@@ -135,6 +150,7 @@ const expandingRowsTemplate = defaultTemplate.replace(
   "<!-- Add optional expanding data here -->",
   `<template #expandedContent>{{row.desc}}</template>`)
   .replace('@search="onSearch"', '')
+  .replace('testData', 'originalTestData')
 const skeletonTemplate = `
 <cv-data-table-skeleton
   :columns="skeletonCols"
@@ -160,7 +176,10 @@ const skeletonTemplate = `
 - 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
+  // sort example
+  const sortOpts = ref({index: "0", order: "none", name: "name"})
   function sortTestData(opts) {
+    sortOpts.value = opts // remember this so it can be used in filtering
     if (opts.order === 'none')
       return testData.value.sort((a, b) => a.index.localeCompare(b.index, 'en', { sensitivity: 'base' }));
     let direction = 1
@@ -170,6 +189,12 @@ const skeletonTemplate = `
     else if (opts.name === 'year')
       return testData.value.sort((a, b) => direction * (a.year - b.year));
   }
+  // filter example
+  function searchTestData(opts) {
+    if (!opts) testData.value = allData.value
+    else testData.value = allData.value.filter(data => data.name.indexOf(opts) > -1)
+    return sortTestData(sortOpts.value)
+  }
   ```
 - The search bar appears only if the search event is listened for.
 
@@ -178,6 +203,7 @@ const skeletonTemplate = `
 - aria-label-expand-row: Aria label for expanding row expansion button. default: 'Expand current row'
 - aria-label-collapse-row: Aria label for expanding row collapse button. default: 'Collapse current row'
 - expanded: initial state of the expanded row
+- value: this is the value assign to the checkbox for tables with batch actions.
 
 **Migration notes:**
 
@@ -190,9 +216,6 @@ completion for it. See [discussion](https://github.com/vuejs/core/issues/3432) f
 `search` emit is still emitted it is just not defined directly on the component.
 - The React does not seem to have an "autoWidth" property. It is still supported here but likely the better choice is `staticWidth`.
 - Row sizes in the React component are 'xs', 'sm', 'md', 'lg', & 'xl'. The rowSizes from Vue2 are still supported.
-- The Vue 3 implementation uses an internal store to manage the state of the table. You can see updates
-to the state by setting the debug variable in the local storage. `localStorage.debug="cv:data-table-store"`
-and then reloading the page.
 - If you were using something like `this.$refs.tableEditPath.batchActive = true` to force batch actions to show even
 when no items were select, please now use the new property `stickyBatchActive`.
 

package/src/components/CvDataTable/CvDataTable.vue

@@ -541,7 +541,8 @@ watch(
   () => store.state[uid.value],
   () => {
     const rows = store.rows(uid);
-    headingChecked.value = dataRowsSelected.value.length === rows.length;
+    headingChecked.value =
+      rows.length > 0 && dataRowsSelected.value.length === rows.length;
   },
   { deep: true }
 );

package/src/components/CvDataTable/CvDataTableRow.vue

@@ -8,6 +8,7 @@
       ref="row"
       :row-id="cvId"
       v-bind="$attrs"
+      :value="value"
       :expanding-row="dataExpandable"
       :expanded="dataExpanded"
       @expanded-change="onExpandedChange"
@@ -32,6 +33,7 @@
     v-bind="$attrs"
     :id="cvId"
     ref="row"
+    :value="value"
     class="cv-data-table-row"
     :row-id="cvId"
     @checked-change="onCheckedChange"
@@ -59,6 +61,9 @@ import store from './cvDataTableStore';
 import { getBus } from '../../global/component-utils/event-bus';
 
 const props = defineProps({
+  /** The value associated with the input (required for tables with batch actions) */
+  value: { type: String, default: undefined },
+  /** This row will be initially expanded */
   expanded: Boolean,
   ...propsCvId,
 });
@@ -142,6 +147,6 @@ function onCheckedChange(val) {
     id: cvId.value,
     isChecked: val,
   });
-  bus?.emit('cv:check-change', { value: attrs.value, checked: val });
+  bus?.emit('cv:check-change', { value: props.value, checked: val });
 }
 </script>

package/src/components/CvDatePicker/CvDatePicker.stories.js

@@ -44,7 +44,7 @@ export default {
 
 const template = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" :value="now">
+  <cv-date-picker v-bind="args" :value="now" @change="onChange">
   </cv-date-picker>
 </div>
 `;
@@ -64,7 +64,12 @@ export const Default = Template.bind({});
 Default.args = initArgs;
 Default.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'dateChange',
+    ],
   },
 };
 Default.parameters = storyParametersObject(
@@ -78,14 +83,13 @@ Default.parameters = storyParametersObject(
 const modelValue = ref(now);
 const templateVModel = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" v-model="modelValue">
+  <cv-date-picker v-bind="args" v-model="modelValue">
   </cv-date-picker>
 </div>
 <div style="margin-top:2rem; background-color: #888888;  padding:1rem">
   <div style="font-size: 150%;">Sample interaction</div>
   <label for="date-model" style='margin-right: 0.5rem'>V-model:</label>
-  <input id="date-model" type="text" :value="modelValue.startDate || modelValue" @change="ev => { if (args.kind === 'range') { modelValue.startDate = ev.currentTarget.value } else { modelValue = ev.currentTarget.value } }"/>
-  <input v-if="args.kind === 'range'" id="date-model" type="text" :value="modelValue.endDate" @change="ev => modelValue.endDate = ev.currentTarget.value"/>
+  <input id="date-model" type="text" :value="modelValue" @change="ev => { modelValue = ev.currentTarget.value }"/>
 </div>
 `;
 
@@ -96,7 +100,6 @@ const TemplateVModel = args => {
       args,
       modelValue,
       now,
-      onChange: action('change'),
     }),
     template: templateVModel,
   };
@@ -106,7 +109,14 @@ export const vModel = TemplateVModel.bind({});
 vModel.args = initArgs;
 vModel.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'kind',
+      'value',
+      'dateChange',
+    ],
   },
 };
 vModel.parameters = storyParametersObject(
@@ -115,11 +125,58 @@ vModel.parameters = storyParametersObject(
   vModel.args
 );
 
+/* range v-model */
+const rangeValue = ref({ startDate: now, endDate: now });
+const templateRangeVModel = `
+<div>
+  <cv-date-picker v-bind="args" kind="range" v-model="rangeValue">
+  </cv-date-picker>
+</div>
+<div style="margin-top:2rem; background-color: #888888;  padding:1rem">
+  <div style="font-size: 150%;">Sample range interaction</div>
+  <label for="date-model-1" style='margin-right: 0.5rem'>V-model:</label>
+  <input id="date-model-1" type="text" :value="rangeValue.startDate" @change="ev => { rangeValue.startDate = ev.currentTarget.value }"/>
+  <input id="date-model-2" type="text" :value="rangeValue.endDate" @change="ev => rangeValue.endDate = ev.currentTarget.value"/>
+</div>
+`;
+
+const TemplateRangeVModel = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      rangeValue,
+      now,
+    }),
+    template: templateRangeVModel,
+  };
+};
+
+export const rangeVmodel = TemplateRangeVModel.bind({});
+rangeVmodel.args = initArgs;
+rangeVmodel.parameters = {
+  controls: {
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'kind',
+      'value',
+      'dateChange',
+    ],
+  },
+};
+rangeVmodel.parameters = storyParametersObject(
+  rangeVmodel.parameters,
+  templateRangeVModel,
+  rangeVmodel.args
+);
+
 /* INVALID MESSAGE STORY */
 
 const templateInvalidMessage = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" :value="now">
+  <cv-date-picker v-bind="args" :value="now" @change="onChange">
   </cv-date-picker>
 </div>
 `;
@@ -153,7 +210,7 @@ InvalidMessage.parameters = storyParametersObject(
 
 const templateInvalidMessageSlot = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" :value="now">
+  <cv-date-picker v-bind="args" :value="now" @change="onChange">
     <template #invalid-message>Invalid date slot</template>
   </cv-date-picker>
 </div>
@@ -194,7 +251,7 @@ InvalidMessageSlot.parameters = storyParametersObject(
 const singleValue = ref(now);
 const templateSingleUsingDate = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" kind="single" v-model="singleValue">
+  <cv-date-picker v-bind="args" kind="single" v-model="singleValue" @dateChange="onDateChange">
   </cv-date-picker>
 </div>`;
 const templateSingleUsingDateVModel = `
@@ -212,7 +269,7 @@ const TemplateSingleUsingDate = args => {
       args,
       now,
       singleValue,
-      onChange: action('change'),
+      onDateChange: action('dateChange'),
     }),
     template: templateSingleUsingDate + templateSingleUsingDateVModel,
   };
@@ -258,7 +315,7 @@ function changeMaxDate(inc) {
 }
 const templateSingleUsingMinMax = `
 <div>
-  <cv-date-picker v-bind='args' @change="onChange" kind="single" :value="now" :cal-options="calOptions">
+  <cv-date-picker v-bind='args' kind="single" :value="now" :cal-options="calOptions" @dateChange="onDateChange">
   </cv-date-picker>
   <div style="margin-top:2rem; background-color: #888888;  padding:1rem; width:fit-content">
   <div>Reactive updates</div>
@@ -280,7 +337,7 @@ const TemplateSingleUsingMinMax = args => {
       toggleDateFormat,
       buttonLabel,
       changeMaxDate,
-      onChange: action('change'),
+      onDateChange: action('dateChange'),
     }),
     template: templateSingleUsingMinMax,
   };
@@ -303,7 +360,14 @@ SingleUsingMinMax.args = initArgs;
 
 SingleUsingMinMax.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'modelValue', 'kind'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'kind',
+      'dateChange',
+      'value',
+    ],
   },
   docs: {
     source: { code: codeMinMax },
@@ -317,8 +381,10 @@ SingleUsingMinMax.parameters = {
 
 const templateRangeUsingDate = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" kind="range"
-      :value="{startDate: now.toLocaleDateString(), endDate: tomorrow.toLocaleDateString()}">
+  <cv-date-picker v-bind="args"
+      kind="range"
+      :value="{startDate: now.toLocaleDateString(), endDate: tomorrow.toLocaleDateString()}"
+      @dateChange="onDateChange">
   </cv-date-picker>
 </div>
 `;
@@ -330,7 +396,7 @@ const TemplateRangeUsingDate = args => {
       args,
       now,
       tomorrow,
-      onChange: action('change'),
+      onDateChange: action('dateChange'),
     }),
     template: templateRangeUsingDate,
   };
@@ -340,7 +406,14 @@ export const RangeUsingDate = TemplateRangeUsingDate.bind({});
 RangeUsingDate.args = initArgs;
 RangeUsingDate.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'kind', 'modelValue'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'kind',
+      'modelValue',
+      'dateChange',
+      'value',
+    ],
   },
 };
 RangeUsingDate.parameters = storyParametersObject(
@@ -353,8 +426,7 @@ RangeUsingDate.parameters = storyParametersObject(
 
 const templateMinimal = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" :value="now">
-  </cv-date-picker>
+  <cv-date-picker v-bind="args" :value="now" @change="onChange"/>
 </div>
 `;
 
@@ -373,7 +445,13 @@ const TemplateMinimal = args => {
 export const Minimal = TemplateMinimal.bind({});
 Minimal.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'dateChange',
+      'value',
+    ],
   },
 };
 Minimal.parameters = storyParametersObject(
@@ -395,7 +473,6 @@ const TemplateSkeleton = args => {
     components: { CvDatePicker, CvDatePickerSkeleton },
     setup: () => ({
       args,
-      onChange: action('change'),
     }),
     template: templateSkeleton,
   };

package/src/components/CvDatePicker/CvDatePicker.vue

@@ -179,7 +179,7 @@ const props = defineProps({
 const cvId = useCvId(props, true, 'date-picker-');
 const isLight = useIsLight(props);
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'dateChange']);
 
 const getKind = computed({
   get() {
@@ -332,6 +332,7 @@ const handleDatePick = (selectedDates, dateStr, instance) => {
     });
 
     emit('update:modelValue', temp);
+    emit('dateChange', selectedDates);
   } else if (isRange.value && selectedDates[0] && selectedDates[1]) {
     const startDate = dateToString(selectedDates[0]);
     const endDate = dateToString(selectedDates[1]);
@@ -345,6 +346,7 @@ const handleDatePick = (selectedDates, dateStr, instance) => {
       startDate: startDate,
       endDate: endDate,
     });
+    emit('dateChange', selectedDates);
   }
 };