@carbon/vue 3.0.10 → 3.0.12

package/src/components/CvFileUploader/CvFileUploader.stories.mdx

@@ -1,9 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { sbCompPrefix } from '../../global/storybook-utils';
 import { CvFileUploader, CvFileUploaderSkeleton } from '.';
-import { KINDS } from './const';
+import { KINDS, STATES } from './const';
 import { action } from '@storybook/addon-actions';
-import { nextTick, ref } from 'vue';
+import { nextTick, ref, watch, onMounted } from 'vue';
 import { Add16 } from '@carbon/icons-vue';
 import { buttonKinds, buttonSizes } from '../CvButton/consts';
 
@@ -16,7 +16,57 @@ export const Template = args => ({
     Add16
   },
   setup() {
+    const fileUploader = ref(null);
+    const files = ref(storage.files);
+    // exposed methods handlers
+    function clear() {
+      if (args.clear && args.clear > storage.clearCount) {
+        storage.clearCount = args.clear;
+        fileUploader.value.clear();
+        action('cv-file-uploader clear')()
+      }
+    }
+    function remove() {
+      if (args.remove && args.remove > storage.removeCount && files.value.length > 0) {
+        const randomIndex = Math.floor(Math.random() * files.value.length);
+        storage.removeCount = args.remove;
+        fileUploader.value.remove(randomIndex);
+        action('cv-file-uploader remove')(randomIndex)
+      }
+    }
+    function setInvalidMessage(index) {
+      if (files.value[index].invalidMessage !== args.setInvalidMessage) {
+        fileUploader.value.setInvalidMessage(index, args.setInvalidMessage);
+        action('cv-file-uploader setInvalidMessage')(index, args.setInvalidMessage);
+      }
+    }
+    function setState(index) {
+      const newState = setStateOptionMap[args.setState];
+      if (files.value[index].state !== newState) {
+        fileUploader.value.setState(index, newState);
+        action('cv-file-uploader setState')(index, newState);
+      }
+    }
+    // exposed methods setState & setInvalidMessage handler
+    function changeFiles() {
+      const callbacks = [
+        typeof args.setState === 'string' ? setState : null,
+        typeof args.setInvalidMessage === 'string' ? setInvalidMessage : null,
+      ];
+      files.value.forEach((_, index) => callbacks.forEach(callback => callback && callback(index)));
+    }
+    watch(() => files.value, (newValue) => {
+      storage.files = newValue;
+      changeFiles();
+    }, { deep: true });
+    onMounted(() => {
+      clear();
+      remove();
+      changeFiles();
+    });
     return {
+      fileUploader,
+      files,
       slotContent: args.slot,
       args: {
         ...args,
@@ -26,9 +76,19 @@ export const Template = args => ({
   },
   template: args.template,
 });
+const storage = {
+  files: [],
+  clearCount: 0,
+  removeCount: 0,
+};
+const setStateOptionMap = {
+  [`Set files status to: None`]: STATES.NONE,
+  [`Set files status to: Complete (${STATES.COMPLETE})`]: STATES.COMPLETE,
+  [`Set files status to: Uploading (${STATES.UPLOADING})`]: STATES.UPLOADING,
+};
 const defaultTemplate = `
   <div style="display: inline-flex; align-items: flex-start;">
-    <cv-file-uploader v-bind="args" />
+    <cv-file-uploader v-bind="args" ref="fileUploader" v-model="files" />
   </div>
 `;
 const slotTemplate = `
@@ -178,7 +238,8 @@ export const argTypes = {
   },
   // exposed methods
   clear: {
-    control: 'none',
+    control: 'button',
+    buttonLabel: 'Clear',
     type: 'function',
     table: {
       type: { summary: '() => void' },
@@ -187,7 +248,8 @@ export const argTypes = {
     description: 'Clear file list',
   },
   remove: {
-    control: 'none',
+    control: 'button',
+    buttonLabel: 'Remove a random file',
     type: 'function',
     table: {
       type: { summary: '(index: number) => void' },
@@ -195,23 +257,24 @@ export const argTypes = {
     },
     description: 'Removes an individual file',
   },
-  setState: {
-    control: 'none',
+  setInvalidMessage: {
+    control: 'text',
     type: 'function',
     table: {
-      type: { summary: '(index: number, state: string) => void' },
+      type: { summary: '(index: number, invalidMessage: string) => void' },
       category: 'exposed methods',
     },
-    description: 'Update the "state" field of a file. State must be `""`, `complete` or `loading`',
+    description: 'Update the "invalidMessage" field of a file.',
   },
-  setInvalidMessage: {
-    control: 'none',
+  setState: {
+    control: 'select',
+    options: Object.keys(setStateOptionMap),
     type: 'function',
     table: {
-      type: { summary: '(index: number, invalidMessage: string) => void' },
+      type: { summary: '(index: number, state: string) => void' },
       category: 'exposed methods',
     },
-    description: 'Update the "invalidMessage" field of a file.',
+    description: 'Update the "state" field of a file. State must be `""`, `complete` or `uploading`',
   },
   // slots
   'drop-target': {
@@ -258,6 +321,8 @@ Migration notes:
   </Story>
 </Canvas>
 
+<ArgsTable story="Default" />
+
 # CvFileUploader Button
 
 <Canvas>

package/src/components/CvFileUploader/CvFileUploaderItem.vue

@@ -9,8 +9,12 @@
       {{ item.file?.name }}
     </p>
     <span :class="`${carbonPrefix}--file__state-container`">
+      <WarningFilled16
+        v-if="isInvalid"
+        :class="`${carbonPrefix}--file--invalid`"
+      />
       <div
-        v-if="item.state === 'uploading'"
+        v-if="!isInvalid && item.state === 'uploading'"
         :class="`${carbonPrefix}--inline-loading__animation`"
       >
         <div
@@ -37,15 +41,12 @@
         </div>
       </div>
       <CheckmarkFilled16
-        v-if="item.state === 'complete'"
+        v-else-if="!isInvalid && item.state === 'complete'"
         :class="`${carbonPrefix}--file-complete`"
       />
-      <WarningFilled16
-        v-if="isInvalid"
-        :class="`${carbonPrefix}--file--invalid`"
-      />
+      <!-- "edit" state at react -->
       <button
-        v-if="removable"
+        v-else-if="removable"
         type="button"
         :class="`${carbonPrefix}--file-close`"
         :alt="removeAriaLabel"

package/src/components/CvLink/CvLink.vue

@@ -14,7 +14,12 @@
     ]"
   >
     <slot></slot>
-    <CvSvg v-if="icon" :class="`${carbonPrefix}--link__icon`" :svg="icon" />
+    <CvSvg
+      v-if="icon"
+      :class="`${carbonPrefix}--link__icon`"
+      :svg="icon"
+      alt=""
+    />
   </component>
 </template>
 

package/src/components/CvLoading/CvLoading.vue

@@ -18,7 +18,7 @@
       :aria-labelledby="cvId"
       aria-live="assertive"
       role="progressbar"
-      :aria-busy="active || stopping"
+      :aria-busy="`${active || stopping}`"
     >
       <label :id="cvId" :class="`${carbonPrefix}--visually-hidden`">
         {{ description }}

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

@@ -58,7 +58,7 @@ export const Template = args => ({
       title: args.title,
       label: args.label,
       highlight: args.highlight,
-      value: args.value,
+      modelValue: args.modelValue,
       selectionFeedback: args.selectionFeedback,
       filterable: args.filterable,
       light: args.light,
@@ -70,7 +70,7 @@ export const Template = args => ({
       myValue: myValue,
       onChange: action('change'),
       onFilter: action('filter'),
-      onVmodel: action('update:value'),
+      onVmodel: action('update:modelValue'),
     };
   },
   template: args.template,
@@ -93,7 +93,7 @@ const defaultTemplate = `
   :options="options"
   :selectionFeedback="selectionFeedback"
   :title="title"
-  :value="value"
+  :modelValue="modelValue"
   :warningMessage="warningMessage"
   @change="onChange"
   @filter="onFilter"
@@ -123,13 +123,13 @@ const vModelTemplate = `
   :label="label"
   :options="options"
   :title="title"
-  v-model:value="myValue"
+  v-model="myValue"
   @change="onChange"
   @filter="onFilter"
   >
   </cv-multi-select>
   <div style="margin-top:2rem">
-    <div>v-model:value</div>
+    <div>v-model</div>
     <select name="cars" id="cars" v-model="myValue" multiple>
       <option v-for="opt in options" :key="opt.value" :value="opt.value">{{opt.value}}</option>
     </select>
@@ -147,8 +147,6 @@ Migration notes:
 - Added the `warningMessage` option to match Carbon React
 - Setting `autoFilter` to true now implies `filterable`. Previous versions required `filterable` to
   be explicitly set to `true` for `autoFilter` to work properly.
-- The `v-model` is different in Vue 3 than Vue 2.If you specify it you will see a error deprecation message in the log.
-  Please use `v-model:value=something` instead.
 
 <Canvas>
   <Story
@@ -160,10 +158,8 @@ Migration notes:
           'filter',
           'helper-text',
           'invalid-message',
-          'modelValue',
           'template',
           'update:modelValue',
-          'update:value',
           'warning-message',
         ],
       },
@@ -210,7 +206,7 @@ Migration notes:
         control: 'inline-radio',
         options: [],
       },
-      value: {
+      modelValue: {
         control: 'multi-select',
         options: pkdValues,
       },
@@ -242,15 +238,13 @@ Migration notes:
           'invalid-message',
           'invalidMessage',
           'light',
-          'modelValue',
           'options',
           'selectionFeedback',
           'template',
           'update:modelValue',
-          'update:value',
-          'value',
           'warning-message',
           'warningMessage',
+          'modelValue'
         ],
       },
       docs: { source: { code: slotsTemplate } },
@@ -272,8 +266,6 @@ Migration notes:
 
 # v-model
 
-Note: Specifying `v-model="something"` will not work. Use `v-model:value=something` instead.
-
 <Canvas>
   <Story
     name="v-model"
@@ -300,8 +292,6 @@ Note: Specifying `v-model="something"` will not work. Use `v-model:value=somethi
           'selectionFeedback',
           'template',
           'update:modelValue',
-          'update:value',
-          'value',
           'warning-message',
           'warningMessage',
         ],
@@ -322,7 +312,7 @@ Note: Specifying `v-model="something"` will not work. Use `v-model:value=somethi
         control: 'inline-radio',
         options: [],
       },
-      value: {
+      modelValue: {
         control: 'multi-select',
         options: pkdValues,
       },

package/src/components/CvMultiSelect/CvMultiSelect.vue

@@ -65,7 +65,7 @@
         ref="elButton"
         type="button"
         :class="`${carbonPrefix}--list-box__field`"
-        :aria-disabled="disabled"
+        :aria-disabled="disabled || null"
         aria-haspopup="listbox"
         :aria-expanded="data.open ? 'true' : 'false'"
         :aria-owns="uid"
@@ -342,23 +342,16 @@ const props = defineProps({
    * Provide text to be used in a <label> element that is tied to the multiselect via ARIA attributes.
    */
   title: { type: String, default: undefined },
-  /***
-   * Allow users to pass in arbitrary items from their collection that are pre-selected
-   */
-  value: { type: Array, default: () => [] },
   /**
    * Provide the text that is displayed and put the control in warning state
    */
   warningMessage: { type: String, default: undefined },
+  /***
+   * Allow users to pass in arbitrary items from their collection that are pre-selected
+   */
   modelValue: {
     type: Array,
-    validator: val => {
-      console.error(
-        `v-model for cv-multi-select is deprecated. Specify "v-model:value" instead [${val}]`
-      );
-      return true;
-    },
-    default: undefined,
+    default: () => [],
   },
   ...propsCvId,
   ...propsTheme,
@@ -379,13 +372,15 @@ const data = reactive({
   isWarning: false,
   isInvalid: false,
 });
-const emit = defineEmits(['update:value', 'change', 'filter']);
+const emit = defineEmits(['update:modelValue', 'change', 'filter']);
 watch(
   () => data.selectedItems,
   () => {
-    if (JSON.stringify(data.selectedItems) !== JSON.stringify(props.value)) {
+    if (
+      JSON.stringify(data.selectedItems) !== JSON.stringify(props.modelValue)
+    ) {
       emit('change', data.selectedItems);
-      emit('update:value', data.selectedItems);
+      emit('update:modelValue', data.selectedItems);
     }
   },
   {
@@ -409,7 +404,7 @@ const isFilterable = computed(() => {
 });
 
 function updateSelectedItems() {
-  data.selectedItems = props.value.filter(
+  data.selectedItems = props.modelValue.filter(
     /***
      * @param {string} item
      * @returns {boolean}
@@ -431,8 +426,8 @@ onUpdated(checkSlots);
 onMounted(updateOptions);
 onMounted(updateSelectedItems);
 
-watch(() => props.value, updateSelectedItems);
-watch(() => props.options, updateOptions);
+watch(() => props.modelValue, updateSelectedItems, { deep: true });
+watch(() => props.options, updateOptions, { deep: true });
 watch(() => props.selectionFeedback, updateOptions);
 
 const highlighted = computed({
@@ -462,7 +457,7 @@ const highlighted = computed({
   },
 });
 onMounted(() => {
-  highlighted.value = props.value ? props.value : props.highlight; // override highlight with value if provided
+  highlighted.value = props.modelValue ? props.modelValue : props.highlight; // override highlight with modelValue if provided
 });
 
 const internalFilter = 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 */