@carbon/vue 3.0.6-alpha.0 → 3.0.7-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.6-alpha.0",
+  "version": "3.0.7-alpha.0",
   "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",
@@ -43,7 +43,7 @@
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "@vue/compiler-sfc": "^3.2.45",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.4",
     "@vue/vue3-jest": "^27.0.0",
@@ -70,7 +70,7 @@
     "stylelint": "^14.15.0",
     "stylelint-config-property-sort-order-smacss": "^9.0.0",
     "stylelint-config-sass-guidelines": "^9.0.1",
-    "vue": "^3.2.45",
+    "vue": "^3.3.4",
     "vue-loader": "^17.0.1",
     "webpack": "^5.75.0"
   },
@@ -203,5 +203,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "b428c30785a4cfc937c68a3122e0af82645fef8e"
+  "gitHead": "39152672459e58bef32b4eba92078c4ebdbe7ec9"
 }

package/src/components/CvAccordion/CvAccordion.stories.js

@@ -30,6 +30,7 @@ const template = `<cv-accordion @change="onChange" v-bind="args">
   </cv-accordion-item>
 </cv-accordion>`;
 const Template = (args, { argTypes }) => {
+  // eslint-disable-next-line no-param-reassign
   args = {
     ...args,
     align: alignConsts[alignConsts.$labels[args.align]],

package/src/components/CvButton/CvButton.stories.js

@@ -87,7 +87,7 @@ Secondary.parameters = storyParametersObject(
 
 export const Field = Template.bind({});
 Field.args = {
-  'slotArgs.default': 'Field size',
+  default: 'Field size',
   size: 'field',
 };
 Field.parameters = storyParametersObject(
@@ -98,7 +98,7 @@ Field.parameters = storyParametersObject(
 
 export const Small = Template.bind({});
 Small.args = {
-  'slotArgs.default': 'sm',
+  default: 'sm',
   size: 'sm',
 };
 Small.parameters = storyParametersObject(
@@ -109,7 +109,7 @@ Small.parameters = storyParametersObject(
 
 export const Large = Template.bind({});
 Large.args = {
-  'slotArgs.default': 'Large size',
+  default: 'Large size',
   size: 'lg',
 };
 Large.parameters = storyParametersObject(

package/src/components/CvButton/CvButtonSkeleton.stories.js

@@ -0,0 +1,79 @@
+import { CvButtonSkeleton } from '.';
+import { buttonSizes } from './consts.js';
+import {
+  sbCompPrefix,
+  storybookControlsFromProps,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { sbBtnPrefix } from './sbBtnPrefix';
+
+import { props as commonCvButtonProps } from './CvButtonCommon';
+
+export default {
+  title: `${sbCompPrefix}/${sbBtnPrefix}/CvButtonSkeleton`,
+  component: CvButtonSkeleton,
+  argTypes: {
+    ...storybookControlsFromProps({ size: commonCvButtonProps.size }),
+    size: {
+      control: { type: 'select', options: buttonSizes },
+      defaultValue: 'default',
+    },
+  },
+};
+
+const template = `<cv-button-skeleton v-bind="buttonProps" />`;
+const Template = (args, { argTypes }) => {
+  const buttonProps = { ...args };
+  return {
+    props: Object.keys(argTypes),
+    components: { CvButtonSkeleton },
+    template,
+    setup() {
+      return { buttonProps };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  size: 'default',
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args,
+  'v-bind="buttonProps"'
+);
+
+export const Field = Template.bind({});
+Field.args = {
+  size: 'field',
+};
+Field.parameters = storyParametersObject(
+  Field.parameters,
+  template,
+  Field.args,
+  'v-bind="buttonProps"'
+);
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'sm',
+};
+Small.parameters = storyParametersObject(
+  Small.parameters,
+  template,
+  Small.args,
+  'v-bind="buttonProps"'
+);
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'lg',
+};
+Large.parameters = storyParametersObject(
+  Large.parameters,
+  template,
+  Large.args,
+  'v-bind="buttonProps"'
+);

package/src/components/CvButton/CvButtonSkeleton.vue

@@ -0,0 +1,19 @@
+<template>
+  <button disabled :class="buttonClasses" type="button"></button>
+</template>
+
+<script setup>
+import {
+  props as commonCvButtonProps,
+  useCvButtonCommon,
+} from './CvButtonCommon';
+
+const props = defineProps({
+  /**
+   * Size of the button
+   */
+  size: commonCvButtonProps.size,
+});
+
+const { buttonClasses } = useCvButtonCommon(undefined, props.size, true);
+</script>

package/src/components/CvButton/index.js

@@ -1,7 +1,14 @@
 import CvButton from './CvButton.vue';
 import CvIconButton from './CvIconButton.vue';
 import CvButtonSet from './CvButtonSet.vue';
+import CvButtonSkeleton from './CvButtonSkeleton.vue';
 import CvButtonConsts from './consts';
 
-export { CvButton, CvButtonConsts, CvButtonSet, CvIconButton };
+export {
+  CvButton,
+  CvButtonConsts,
+  CvButtonSet,
+  CvIconButton,
+  CvButtonSkeleton,
+};
 export default CvButton;

package/src/components/CvDatePicker/CvDatePicker.vue

@@ -113,7 +113,6 @@ import {
   ref,
   computed,
   onMounted,
-  onUpdated,
   onBeforeMount,
   onUnmounted,
   watch,
@@ -305,6 +304,7 @@ let dateToString = val => {
   return calendar.formatDate(val, props.calOptions.dateFormat);
 };
 
+// eslint-disable-next-line no-unused-vars
 const handleDatePick = (selectedDates, dateStr, instance) => {
   if (isSingle.value) {
     const temp = dateToString(selectedDates[0]);

package/src/components/CvDropdown/CvDropdown.stories.mdx

@@ -0,0 +1,407 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import CvDropdown from './CvDropdown.vue';
+import CvDropdownItem from './CvDropdownItem.vue';
+import CvDropdownSkeleton from './CvDropdownSkeleton.vue';
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+const myValue = ref('baby-yoda');
+
+<Meta title={`${sbCompPrefix}/CvDropdown`} component={CvDropdown} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvDropdown,
+    CvDropdownItem,
+    CvDropdownSkeleton,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      ...args,
+      props: args.props,
+      light: args.light,
+      placeholder: args.placeholder,
+      value: args.value,
+      label: args.label,
+      up: args.up,
+      inline: args.inline,
+      helperText: args.helperText,
+      hideSelected: args.hideSelected,
+      warningMessage: args.warningMessage,
+      invalidMessage: args.invalidMessage,
+      disabled: args.disabled,
+      size: args.size,
+      items: args.items,
+      onChange: action('change'),
+      myValue: myValue,
+      slotInvalidText: args.slotInvalidText,
+      slotWarningText: args.slotWarningText,
+      slotHelperText: args.slotHelperText,
+      slotInternalCaption: args.slotInternalCaption,
+    };
+  },
+  template: args.template,
+});
+const defaultTemplate = `
+<div :style="{width: '300px', paddingTop: up ? '90px' : undefined}">
+<cv-dropdown
+  :light="light"
+  :placeholder="placeholder"
+  :value="value"
+  :up="up"
+  :inline="inline"
+  :helper-text="helperText"
+  :warning-message="warningMessage"
+  :hide-selected="hideSelected"
+  :invalid-message="invalidMessage"
+  :label="label"
+  :disabled="disabled"
+  :size="size"
+  @change="onChange">
+          <cv-dropdown-item value="mando"><span style="color: darkred">Din Djarin</span></cv-dropdown-item>
+          <cv-dropdown-item value="nite-owl">Bo-Katan Kryze</cv-dropdown-item>
+          <cv-dropdown-item value="baby-yoda">Din Grogu</cv-dropdown-item>
+          <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
+          <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
+ </cv-dropdown>
+</div>
+`;
+const slotsTemplate = `
+<div :style="{width: '300px'}">
+<cv-dropdown
+  v-model:value="myValue"
+  :light="light"
+  :placeholder="placeholder"
+  :up="up"
+  :inline="inline"
+  :helper-text="helperText"
+  :warning-message="warningMessage"
+  :hide-selected="hideSelected"
+  :invalid-message="invalidMessage"
+  :label="label"
+  :disabled="disabled"
+  :size="size"
+  @change="onChange">
+    <template v-if="slotInternalCaption" v-slot:internal-caption><h5>Edge case: {{ myValue }}</h5></template>
+    <template v-if="slotInvalidText" v-slot:invalid-message>Do not go to the dark side</template>
+    <template v-if="slotWarningText" v-slot:warning-message>Can this ally be trusted?</template>
+    <template v-if="slotHelperText" v-slot:helper-text>Choose ally strong with the force</template>
+    <cv-dropdown-item value="mando"><span>Din Djarin</span></cv-dropdown-item>
+    <cv-dropdown-item value="nite-owl">Bo-Katan Kryze</cv-dropdown-item>
+    <cv-dropdown-item value="baby-yoda">Din Grogu</cv-dropdown-item>
+    <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
+    <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
+ </cv-dropdown>
+</div>
+`;
+const itemsTemplate = `
+<div :style="{width: '300px'}">
+<cv-dropdown
+  :light="light"
+  :placeholder="placeholder"
+  :value="value"
+  :up="up"
+  :inline="inline"
+  :helper-text="helperText"
+  :warning-message="warningMessage"
+  :hide-selected="hideSelected"
+  :invalid-message="invalidMessage"
+  :label="label"
+  :disabled="disabled"
+  :size="size"
+  :items="items"
+  @change="onChange">
+ </cv-dropdown>
+</div>
+`;
+const vmodelTemplate = `
+<div :style="{width: '300px'}">
+<cv-dropdown
+  v-model:value="myValue"
+  :label="label"
+  :placeholder="placeholder"
+  @change="onChange">
+    <cv-dropdown-item value="mando"><span>Din Djarin</span></cv-dropdown-item>
+    <cv-dropdown-item value="nite-owl">Bo-Katan Kryze</cv-dropdown-item>
+    <cv-dropdown-item value="baby-yoda">Din Grogu</cv-dropdown-item>
+    <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
+    <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
+ </cv-dropdown>
+ <div>V-Model value: {{ myValue }}</div>
+  <select v-model="myValue">
+    <option value="mando">Mandalorian</option>
+    <option value="nite-owl">Bo-Katan</option>
+    <option value="baby-yoda">Grogu</option>
+    <option value="mysterious">Armorer</option>
+    <option value="bounty-hunter">Karga</option>
+  </select>
+</div>
+`;
+const skeletonTemplate = `
+<div :style="{width: '300px'}">
+<cv-dropdown-skeleton :inline="inline"></cv-dropdown-skeleton>
+</div>
+`;
+
+# CvDropdown
+
+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 `warningMessage` option to match Carbon React
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'props',
+          'default',
+          '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',
+      light: false,
+    }}
+    argTypes={{
+      light: {
+        type: String,
+        description: '`true` to use the light version',
+        table: { category: 'props' },
+      },
+      size: {
+        control: 'select',
+        default: 'md',
+        options: ['sm', 'md', 'lg'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Use slots with helper, invalid, warning text, and the internal caption
+
+<Canvas>
+  <Story
+    name="Slots"
+    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',
+        ],
+      },
+      docs: { source: { code: slotsTemplate } },
+    }}
+    args={{
+      template: slotsTemplate,
+      label: 'Characters',
+      placeholder: 'Choose an ally',
+      slotInvalidText: false,
+      slotWarningText: false,
+      slotHelperText: true,
+      slotInternalCaption: false,
+    }}
+    argTypes={{}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Use an array of strings as the dropdown options
+
+- Notes: this version does not seem very useful. Please comment in the Slack channel if you are using this.
+  Curious to know how it might be currently used.
+
+<Canvas>
+  <Story
+    name="Items"
+    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',
+        ],
+      },
+      docs: { source: { code: itemsTemplate } },
+    }}
+    args={{
+      template: itemsTemplate,
+      label: 'Planets',
+      placeholder: 'Where will you visit',
+      items: ['Coruscant', 'Tatooine', 'Naboo', 'Hoth', 'Kamino', 'Mandalore'],
+    }}
+    argTypes={{}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Use with v-model
+
+<Canvas>
+  <Story
+    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',
+        ],
+      },
+      docs: { source: { code: vmodelTemplate } },
+    }}
+    args={{
+      template: vmodelTemplate,
+      label: 'Characters',
+      placeholder: 'Choose an ally',
+    }}
+    argTypes={{}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Skeleton - loading mode
+
+- Notes: The Vue 2 story shows the `inline` attribute for the skeleton mode but this seems to have no effect on the display.
+  It is still supported but do not expect a change in display.
+
+<Canvas>
+  <Story
+    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',
+        ],
+      },
+      docs: { source: { code: skeletonTemplate } },
+    }}
+    args={{
+      template: skeletonTemplate,
+    }}
+    argTypes={{}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>