@carbon/vue 3.0.8-alpha.0 → 3.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.8-alpha.0",
+  "version": "3.0.9",
   "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",
@@ -206,5 +206,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "15a95f30d38d6b600fd1b70274502895e777e02c"
+  "gitHead": "746ba85d1d2060314ea9bb7f8ae9c45783572efc"
 }

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

@@ -48,7 +48,7 @@ const skeletonTemplate = `
   </div>
 `;
 
-export const args = {
+export const argTypes = {
   // attributes
   multiple: {
     type: 'boolean',
@@ -61,6 +61,7 @@ export const args = {
   // props
   accept: {
     type: 'string',
+    defaultValue: '.jpg,.png',
     table: {
       type: { summary: 'string' },
       category: 'props',
@@ -106,6 +107,14 @@ export const args = {
     },
     description: 'Reset file list when files are added',
   },
+  disabled: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'props',
+    },
+    description: 'Disables input',
+  },
   dropTargetLabel: {
     type: 'string',
     table: {
@@ -122,6 +131,14 @@ export const args = {
     },
     description: 'Helper text positioned below label',
   },
+  initialStateUploading: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'props',
+    },
+    description: 'Set "UPLOADING" state to new files',
+  },
   kind: {
     type: 'string',
     control: 'select',
@@ -235,7 +252,7 @@ Migration notes:
       helperText: 'Select the files you want to upload',
       removable: true,
     }}
-    argTypes={args}
+    argTypes={argTypes}
   >
     {Template.bind({})}
   </Story>
@@ -263,11 +280,12 @@ Migration notes:
       helperText: 'Select the files you want to upload',
       kind: KINDS.BUTTON,
       removable: true,
+      dropTargetLabel: 'Add file',
     }}
     argTypes={{
-      ...args,
+      ...argTypes,
       kind: {
-        ...args.kind,
+        ...argTypes.kind,
         control: 'none',
       },
     }}
@@ -299,9 +317,9 @@ Migration notes:
       removable: true,
     }}
     argTypes={{
-      ...args,
+      ...argTypes,
       kind: {
-        ...args.kind,
+        ...argTypes.kind,
         control: 'none',
       },
     }}

package/src/components/CvFileUploader/CvFileUploader.vue

@@ -1,11 +1,28 @@
 <template>
   <cv-form-item class="cv-file-uploader">
-    <p :class="`${carbonPrefix}--file--label`">{{ label }}</p>
-    <p :class="`${carbonPrefix}--label-description`">{{ helperText }}</p>
+    <p
+      :class="[
+        `${carbonPrefix}--file--label`,
+        { [`${carbonPrefix}--file--label--disabled`]: disabled },
+      ]"
+    >
+      {{ label }}
+    </p>
+    <p
+      :class="[
+        `${carbonPrefix}--label-description`,
+        { [`${carbonPrefix}--label-description--disabled`]: disabled },
+      ]"
+    >
+      {{ helperText }}
+    </p>
     <div v-if="kind === 'button'" :class="`${carbonPrefix}--file`" data-file>
       <label
         :for="cvId"
-        :class="buttonClasses"
+        :class="[
+          buttonClasses,
+          { [`${carbonPrefix}--btn--disabled`]: disabled },
+        ]"
         tabindex="0"
         @keydown.enter.prevent="onKeyHit"
         @keydown.space.prevent="onKeyHit"
@@ -17,6 +34,7 @@
         ref="fileInput"
         :class="`${carbonPrefix}--file-input`"
         :accept="accept"
+        :disabled="disabled"
         type="file"
         v-bind="$attrs"
         data-file-uploader
@@ -34,8 +52,10 @@
             `${carbonPrefix}--file-browse-btn`,
             `${carbonPrefix}--file__drop-container`,
             {
-              [`${carbonPrefix}--file__drop-container--drag-over`]: allowDrop,
+              [`${carbonPrefix}--file__drop-container--drag-over`]:
+                allowDrop && !disabled,
             },
+            { [`${carbonPrefix}--file-browse-btn--disabled`]: disabled },
           ]"
           @dragover="onDragEvent"
           @dragleave="onDragEvent"
@@ -50,6 +70,7 @@
           ref="fileInput"
           :class="`${carbonPrefix}--file-input`"
           :accept="accept"
+          :disabled="disabled"
           type="file"
           v-bind="$attrs"
           tabindex="-1"
@@ -107,8 +128,10 @@ const props = defineProps({
   },
   buttonSize: commonCvButtonProps.size,
   clearOnReselect: Boolean,
+  disabled: Boolean,
   dropTargetLabel: String,
   helperText: String,
+  initialStateUploading: Boolean,
   kind: {
     type: String,
     default: KINDS.DRAG_TARGET,
@@ -178,7 +201,7 @@ function addFiles(files) {
     const newFile = createInternalFile(internalFile?.file || file);
 
     if (internalFile) {
-      internalFile.state = newFile.initialState;
+      internalFile.state = newFile.state;
       internalFile.invalidMessageTitle = newFile.invalidMessageTitle;
       internalFile.invalidMessage = newFile.invalidMessage;
     } else {
@@ -216,6 +239,11 @@ function onChange(ev) {
 }
 
 function onDragEvent(evt) {
+  if (props.disabled) {
+    evt.preventDefault();
+    return;
+  }
+
   if (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') === -1) {
     return;
   }
@@ -249,7 +277,7 @@ function onDragEvent(evt) {
 
 function onItemRemove(index) {
   internalFiles.value.splice(index, 1);
-  emit('update:modelValue', this.internalFiles);
+  emit('update:modelValue', internalFiles.value);
 }
 
 function onKeyHit() {
@@ -262,20 +290,31 @@ onMounted(() => {
 });
 
 // exposed methods
+function clear() {
+  internalFiles.value = [];
+  emit('update:modelValue', internalFiles.value);
+}
+
+function remove(index) {
+  onItemRemove(index);
+}
+
+function setInvalidMessage(index, message) {
+  internalFiles.value[index].invalidMessage = message;
+}
+
+function setState(index, state) {
+  if ([STATES.COMPLETE, STATES.UPLOADING, STATES.NONE].includes(state)) {
+    internalFiles.value[index].state = state;
+  }
+}
+
+// exposing methods
 defineExpose({
-  setState(index, state) {
-    if ([STATES.COMPLETE, STATES.UPLOADING, STATES.NONE].includes(state)) {
-      internalFiles.value[index].state = state;
-    }
-  },
-  clear() {
-    internalFiles.value = [];
-    emit('update:modelValue', internalFiles);
-  },
-  setInvalidMessage(index, message) {
-    internalFiles.value[index].invalidMessage = message;
-  },
-  remove: onItemRemove,
+  clear,
+  remove,
+  setInvalidMessage,
+  setState,
 });
 </script>
 

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

@@ -58,10 +58,56 @@ export default {
     lowContrast: {
       control: { type: 'boolean' },
     },
+    // slots
+    default: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Slot for additional custom content.',
+    },
+    'title ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Title slot for more custom content.',
+    },
+    subtitle: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Subtitle slot for more custom content.',
+    },
+    'caption ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Caption slot for more custom content.',
+    },
   },
 };
 
-const template = `<cv-toast-notification v-bind="args" @close="onClose" />`;
+const template = `
+<cv-toast-notification v-bind="args" @close="onClose" >
+  <template v-if="args.titleSlot" #title>
+    <strong style="color: orange; font-size: 1.25rem;">Custom</strong> <span style="color: yellow;">title</span>
+  </template>
+
+  <template v-if="args.subtitleSlot" #subtitle>
+    Some <strong style="color: orange; font-size: 1.25rem;">custom</strong> <span style="color: yellow;">subtitle</span>
+  </template>
+
+  <template v-if="args.captionSlot" #caption>
+    Some <span style="color: green;">custom</span> <strong style="color: orange; font-size: 0.75rem;">caption</strong>
+  </template>
+
+  <template v-if="args.defaultSlot">
+    Default slot content.
+  </template>
+</cv-toast-notification>`;
 const Template = args => {
   return {
     components: { CvToastNotification },
@@ -106,3 +152,27 @@ export const Error = Template.bind({});
 Error.args = {
   kind: CvNotificationConsts.notificationKinds[5],
 };
+
+export const SlotDefault = Template.bind({});
+SlotDefault.args = {
+  kind: CvNotificationConsts.notificationKinds[4],
+  defaultSlot: true,
+};
+
+export const SlotTitle = Template.bind({});
+SlotTitle.args = {
+  kind: CvNotificationConsts.notificationKinds[0],
+  titleSlot: true,
+};
+
+export const SlotSubtitle = Template.bind({});
+SlotSubtitle.args = {
+  kind: CvNotificationConsts.notificationKinds[3],
+  subtitleSlot: true,
+};
+
+export const SlotCaption = Template.bind({});
+SlotCaption.args = {
+  kind: CvNotificationConsts.notificationKinds[1],
+  captionSlot: true,
+};

package/src/components/CvNotification/CvToastNotification.vue

@@ -13,12 +13,14 @@
       :class="`${carbonPrefix}--toast-notification__icon`"
     />
     <div :class="`${carbonPrefix}--toast-notification__details`">
-      <h3 :class="`${carbonPrefix}--toast-notification__title`">{{ title }}</h3>
+      <h3 :class="`${carbonPrefix}--toast-notification__title`">
+        <slot name="title">{{ title }}</slot>
+      </h3>
       <div :class="`${carbonPrefix}--toast-notification__subtitle`">
-        {{ subTitle }}
+        <slot name="subtitle">{{ subTitle }}</slot>
       </div>
       <div :class="`${carbonPrefix}--toast-notification__caption`">
-        {{ caption }}
+        <slot name="caption">{{ caption }}</slot>
       </div>
       <slot />
     </div>
@@ -28,7 +30,7 @@
       :class="`${carbonPrefix}--toast-notification__close-button`"
       @click="$emit('close')"
     >
-      <close20 :class="`${carbonPrefix}--inline-notification__close-icon`" />
+      <close20 :class="`${carbonPrefix}--toast-notification__close-icon`" />
     </button>
   </div>
 </template>

package/src/components/CvOverflowMenu/CvOverflowMenu.stories.mdx

@@ -25,18 +25,20 @@ export const Template = args => ({
   template: args.template,
 });
 const defaultTemplate = `
-<cv-overflow-menu
-  :flip-menu="flipMenu"
-  :up="up"
-  :offset="offset"
-  :label="label"
-  :tip-position="tipPosition"
-  :tip-alignment="tipAlignment"
-  @change=onChange>
-  <cv-overflow-menu-item value="item 1" primary-focus>list item 1</cv-overflow-menu-item>
-  <cv-overflow-menu-item value="item 2" disabled>list item 2</cv-overflow-menu-item>
-  <cv-overflow-menu-item value="item 3" danger>list item 3</cv-overflow-menu-item>
-</cv-overflow-menu>
+<div style="padding: 100px;">
+  <cv-overflow-menu
+    :flip-menu="flipMenu"
+    :up="up"
+    :offset="offset"
+    :label="label"
+    :tip-position="tipPosition"
+    :tip-alignment="tipAlignment"
+    @change=onChange>
+    <cv-overflow-menu-item value="item 1" primary-focus>list item 1</cv-overflow-menu-item>
+    <cv-overflow-menu-item value="item 2" disabled>list item 2</cv-overflow-menu-item>
+    <cv-overflow-menu-item value="item 3" danger>list item 3</cv-overflow-menu-item>
+  </cv-overflow-menu>
+</div>
 `;
 const slotsTemplate = `
 <cv-overflow-menu
@@ -117,3 +119,57 @@ Use slots for more control over the display.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name="Flipped"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'trigger', 'change'],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      label: 'Overflow menu',
+      flipMenu: true,
+      up: undefined,
+      offset: undefined,
+      tipPosition: undefined,
+      tipAlignment: undefined,
+    }}
+    argTypes={{
+      tipPosition: { control: 'select', default: 'right', options: ['top', 'left', 'bottom', 'right'] },
+      tipAlignment: { control: 'select', default: 'center', options: ['start', 'center', 'end'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Up"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'trigger', 'change'],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      label: 'Overflow menu',
+      flipMenu: undefined,
+      up: true,
+      offset: undefined,
+      tipPosition: undefined,
+      tipAlignment: undefined,
+    }}
+    argTypes={{
+      tipPosition: { control: 'select', default: 'right', options: ['top', 'left', 'bottom', 'right'] },
+      tipAlignment: { control: 'select', default: 'center', options: ['start', 'center', 'end'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvOverflowMenu/CvOverflowMenu.vue

@@ -38,40 +38,42 @@
         />
       </slot>
     </button>
-    <div
-      :class="[
-        `${carbonPrefix}--overflow-menu-options`,
-        {
-          [`${carbonPrefix}--overflow-menu--flip`]: flipMenu,
-          [`${carbonPrefix}--overflow-menu-options--open`]: open,
-        },
-      ]"
-      tabindex="-1"
-      ref="popup"
-      :aria-labelledby="`${uid}-trigger`"
-      :id="`${uid}-menu`"
-      :style="{ left: left + 'px', top: top + 'px' }"
-      @focusout="checkFocusOut"
-      @mousedown.prevent="preventFocusOut"
-    >
+    <Teleport to="body">
       <div
-        class="cv-overflow-menu__before-content"
-        ref="beforeContent"
-        tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
-        @focus="focusBeforeContent"
-      />
-      <ul :class="`${carbonPrefix}--overflow-menu-options__content`">
-        <slot></slot>
-      </ul>
-      <div
-        class="cv-overflow-menu__after-content"
-        ref="afterContent"
-        tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
-        @focus="focusAfterContent"
-      />
-    </div>
+        :class="[
+          `${carbonPrefix}--overflow-menu-options`,
+          {
+            [`${carbonPrefix}--overflow-menu--flip`]: flipMenu,
+            [`${carbonPrefix}--overflow-menu-options--open`]: open,
+          },
+        ]"
+        tabindex="-1"
+        ref="popup"
+        :aria-labelledby="`${uid}-trigger`"
+        :id="`${uid}-menu`"
+        :style="{ left: left + 'px', top: top + 'px' }"
+        @focusout="checkFocusOut"
+        @mousedown.prevent="preventFocusOut"
+      >
+        <div
+          class="cv-overflow-menu__before-content"
+          ref="beforeContent"
+          tabindex="0"
+          style="position: absolute; height: 1px; width: 1px; left: -9999px"
+          @focus="focusBeforeContent"
+        />
+        <ul :class="`${carbonPrefix}--overflow-menu-options__content`">
+          <slot></slot>
+        </ul>
+        <div
+          class="cv-overflow-menu__after-content"
+          ref="afterContent"
+          tabindex="0"
+          style="position: absolute; height: 1px; width: 1px; left: -9999px"
+          @focus="focusAfterContent"
+        />
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -79,8 +81,7 @@
 import { carbonPrefix } from '../../global/settings';
 import { props as propsCvId, useCvId } from '../../use/cvId';
 import OverflowMenuVertical16 from '@carbon/icons-vue/es/overflow-menu--vertical/16';
-import { computed, nextTick, onBeforeMount, onUnmounted, ref } from 'vue';
-import { getBus, removeBus } from '../../global/component-utils/event-bus';
+import { computed, nextTick, provide, ref } from 'vue';
 const props = defineProps({
   /**
    * assistive text shown as a tooltip
@@ -135,15 +136,8 @@ const offsetTop = computed(() => {
   return props.offset ? props.offset.top : 0;
 });
 
-let bus = undefined;
-onBeforeMount(() => {
-  bus = getBus(uid.value);
-  bus.on('cv:close', doClose);
-  bus.on('cv:click', menuItemClick);
-});
-onUnmounted(() => {
-  removeBus(uid.value);
-});
+provide('cv:close', doClose);
+provide('cv:click', menuItemClick);
 
 const trigger = ref(null);
 const popup = ref(null);
@@ -216,7 +210,7 @@ async function positionMenu() {
           popup.value.offsetHeight +
           pixelsScrolledY;
       } else {
-        top.value = menuPosition.left + offsetLeft.value + pixelsScrolledX;
+        top.value = menuPosition.bottom + offsetTop.value + pixelsScrolledY;
       }
     });
   }

package/src/components/CvOverflowMenu/CvOverflowMenuItem.vue

@@ -26,27 +26,22 @@
 
 <script setup>
 import { carbonPrefix } from '../../global/settings';
-import { onMounted, ref, useAttrs } from 'vue';
-import { getBus } from '../../global/component-utils/event-bus';
+import { ref, useAttrs, inject } from 'vue';
 
 defineProps({
   primaryFocus: Boolean,
   disabled: Boolean,
   danger: Boolean,
 });
-let bus = undefined;
 const el = ref(null);
-onMounted(() => {
-  const pe = el.value.closest('[data-overflow-menu]');
-  const parent = pe?.getAttribute('id');
-  if (parent) bus = getBus(parent);
-  else console.warn('overflow menu not found');
-});
+const emitClick = inject('cv:click');
+const emitClose = inject('cv:close');
+
 const attrs = useAttrs();
 function onClick() {
-  bus?.emit('cv:click', attrs.value);
+  emitClick(attrs.value);
 }
 function onEsc() {
-  bus?.emit('cv:close');
+  emitClose();
 }
 </script>

package/src/components/CvOverflowMenu/index.js

@@ -1,3 +1,4 @@
 import CvOverflowMenu from './CvOverflowMenu.vue';
-export { CvOverflowMenu };
+import CvOverflowMenuItem from './CvOverflowMenuItem.vue';
+export { CvOverflowMenu, CvOverflowMenuItem };
 export default CvOverflowMenu;