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

package/src/components/CvFileUploader/CvFileUploader.vue

@@ -0,0 +1,286 @@
+<template>
+  <cv-form-item class="cv-file-uploader">
+    <p :class="`${carbonPrefix}--file--label`">{{ label }}</p>
+    <p :class="`${carbonPrefix}--label-description`">{{ helperText }}</p>
+    <div v-if="kind === 'button'" :class="`${carbonPrefix}--file`" data-file>
+      <label
+        :for="cvId"
+        :class="buttonClasses"
+        tabindex="0"
+        @keydown.enter.prevent="onKeyHit"
+        @keydown.space.prevent="onKeyHit"
+      >
+        <slot name="drop-target">{{ internalDropTargetLabel }}</slot>
+      </label>
+      <input
+        :id="cvId"
+        ref="fileInput"
+        :class="`${carbonPrefix}--file-input`"
+        :accept="accept"
+        type="file"
+        v-bind="$attrs"
+        data-file-uploader
+        data-target="[data-file-container]"
+        @change="onChange"
+      />
+    </div>
+    <div v-else :class="`${carbonPrefix}--file`" data-file>
+      <label :for="cvId">
+        <div
+          role="button"
+          tabindex="0"
+          data-file-drop-container
+          :class="[
+            `${carbonPrefix}--file-browse-btn`,
+            `${carbonPrefix}--file__drop-container`,
+            {
+              [`${carbonPrefix}--file__drop-container--drag-over`]: allowDrop,
+            },
+          ]"
+          @dragover="onDragEvent"
+          @dragleave="onDragEvent"
+          @drop="onDragEvent"
+          @keydown.enter.prevent="onKeyHit"
+          @keydown.space.prevent="onKeyHit"
+        >
+          <slot name="drop-target">{{ internalDropTargetLabel }}</slot>
+        </div>
+        <input
+          :id="cvId"
+          ref="fileInput"
+          :class="`${carbonPrefix}--file-input`"
+          :accept="accept"
+          type="file"
+          v-bind="$attrs"
+          tabindex="-1"
+          data-file-uploader
+          data-target="[data-file-container]"
+          @change="onChange"
+        />
+      </label>
+    </div>
+    <div
+      :class="`${carbonPrefix}--file ${carbonPrefix}--file-container`"
+      data-file-container
+    >
+      <cv-file-uploader-item
+        v-for="(item, index) in internalFiles"
+        :key="item.file.name"
+        :item="item"
+        :removable="removable"
+        :removeAriaLabel="removeAriaLabel"
+        @remove="onItemRemove(index)"
+      />
+    </div>
+  </cv-form-item>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import CvFileUploaderItem from './CvFileUploaderItem.vue';
+import { carbonPrefix } from '../../global/settings';
+import { CvFormItem } from '../CvForm';
+import { useCvId, props as cvIdProps } from '../../use/cvId';
+import { KINDS, STATES } from './const';
+import {
+  props as commonCvButtonProps,
+  useCvButtonCommon,
+} from '../CvButton/CvButtonCommon';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps({
+  accept: String,
+  buttonKind: commonCvButtonProps.kind,
+  buttonLabel: {
+    type: String,
+    default: undefined,
+    deprecated: true,
+    validator: val => {
+      if (val !== undefined && process.env.NODE_ENV === 'development') {
+        console.warn(
+          'CvFileUploader: button-label prop deprecated in favour of drop-target-label'
+        );
+      }
+      return true;
+    },
+  },
+  buttonSize: commonCvButtonProps.size,
+  clearOnReselect: Boolean,
+  dropTargetLabel: String,
+  helperText: String,
+  kind: {
+    type: String,
+    default: KINDS.DRAG_TARGET,
+    validator: val => {
+      const validValues = Object.values(KINDS);
+      if (!validValues.includes(val)) {
+        console.warn(
+          `CvFileUploader: valid values for 'kind' are ${validValues}`
+        );
+      }
+      return true;
+    },
+  },
+  label: String,
+  modelValue: Array,
+  removable: Boolean,
+  removeAriaLabel: String,
+  ...cvIdProps,
+});
+
+// DOM Elements
+const fileInput = ref(null);
+
+// Data
+const allowDrop = ref(false);
+const internalFiles = ref([]);
+
+// Computed
+const { buttonClasses } = useCvButtonCommon(props.buttonKind, props.buttonSize);
+const cvId = useCvId(props);
+const internalDropTargetLabel = computed(() => {
+  return (
+    props.dropTargetLabel ||
+    props.buttonLabel ||
+    'Drag and drop files here or upload'
+  );
+});
+const isFileTypeAllowed = computed(() => {
+  const acceptAny = !props.accept;
+  const allowedTypes = props.accept
+    ? props.accept.split(',').map(x => x.trim())
+    : [];
+  if (allowedTypes.includes('.jpg')) {
+    allowedTypes.push('.jpeg');
+  }
+  return file => {
+    if (acceptAny) return true;
+    const extension = '.' + file.name.split('.').pop();
+    return allowedTypes.includes(file.type) || allowedTypes.includes(extension);
+  };
+});
+
+// Watchers
+watch(
+  () => props.modelValue,
+  newValue => {
+    internalFiles.value = newValue || [];
+  }
+);
+
+// Methods
+function addFiles(files) {
+  for (const file of files) {
+    const internalFile = internalFiles.value.find(
+      item => item.file.name === file.name
+    );
+    const newFile = createInternalFile(internalFile?.file || file);
+
+    if (internalFile) {
+      internalFile.state = newFile.initialState;
+      internalFile.invalidMessageTitle = newFile.invalidMessageTitle;
+      internalFile.invalidMessage = newFile.invalidMessage;
+    } else {
+      internalFiles.value.push(newFile);
+    }
+  }
+  // clear input we do not need to maintain it
+  fileInput.value.value = '';
+  emit('update:modelValue', internalFiles.value);
+}
+
+function createInternalFile(file) {
+  const initialState = props.initialStateUploading
+    ? STATES.UPLOADING
+    : STATES.NONE;
+  const isTypeNotAllowed = !isFileTypeAllowed.value(file);
+  const invalidMessageTitle = isTypeNotAllowed ? 'Invalid file type' : '';
+  const invalidMessage = isTypeNotAllowed
+    ? `"${file.name}" does not have a valid file type.`
+    : '';
+
+  return {
+    state: initialState,
+    file,
+    invalidMessageTitle,
+    invalidMessage,
+  };
+}
+
+function onChange(ev) {
+  if (ev.target.files.length !== 0 && props.clearOnReselect) {
+    internalFiles.value = [];
+  }
+  addFiles(ev.target.files);
+}
+
+function onDragEvent(evt) {
+  if (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') === -1) {
+    return;
+  }
+
+  if (evt.type === 'dragleave') {
+    allowDrop.value = false;
+    return;
+  }
+
+  if (evt.type === 'dragover') {
+    evt.preventDefault();
+    const dropEffect = 'copy';
+    if (Array.isArray(evt.dataTransfer.types)) {
+      try {
+        // IE11 throws a "permission denied" error accessing `.effectAllowed`
+        evt.dataTransfer.effectAllowed = dropEffect;
+      } catch (e) {
+        // ignore
+      }
+    }
+    evt.dataTransfer.dropEffect = dropEffect;
+    allowDrop.value = true;
+  }
+
+  if (evt.type === 'drop') {
+    evt.preventDefault();
+    addFiles(evt.dataTransfer.files);
+    allowDrop.value = false;
+  }
+}
+
+function onItemRemove(index) {
+  internalFiles.value.splice(index, 1);
+  emit('update:modelValue', this.internalFiles);
+}
+
+function onKeyHit() {
+  fileInput.value.click();
+}
+
+// Lifecycle Hooks
+onMounted(() => {
+  internalFiles.value = props.modelValue || [];
+});
+
+// exposed 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,
+});
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>

package/src/components/CvFileUploader/CvFileUploaderItem.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--file__selected-file`,
+      { [`${carbonPrefix}--file__selected-file--invalid`]: isInvalid },
+    ]"
+  >
+    <p :class="`${carbonPrefix}--file-filename`" :title="item.file?.name">
+      {{ item.file?.name }}
+    </p>
+    <span :class="`${carbonPrefix}--file__state-container`">
+      <div
+        v-if="item.state === 'uploading'"
+        :class="`${carbonPrefix}--inline-loading__animation`"
+      >
+        <div
+          data-inline-loading-spinner
+          :class="`${carbonPrefix}--loading ${carbonPrefix}--loading--small`"
+        >
+          <svg
+            :class="`${carbonPrefix}--loading__svg`"
+            viewBox="-75 -75 150 150"
+          >
+            <circle
+              :class="`${carbonPrefix}--loading__background`"
+              cx="0"
+              cy="0"
+              r="37.5"
+            />
+            <circle
+              :class="`${carbonPrefix}--loading__stroke`"
+              cx="0"
+              cy="0"
+              r="37.5"
+            />
+          </svg>
+        </div>
+      </div>
+      <CheckmarkFilled16
+        v-if="item.state === 'complete'"
+        :class="`${carbonPrefix}--file-complete`"
+      />
+      <WarningFilled16
+        v-if="isInvalid"
+        :class="`${carbonPrefix}--file--invalid`"
+      />
+      <button
+        v-if="removable"
+        type="button"
+        :class="`${carbonPrefix}--file-close`"
+        :alt="removeAriaLabel"
+        :arial-label="removeAriaLabel"
+        @click="emit('remove', item)"
+      >
+        <Close16 />
+        <span :class="`${carbonPrefix}--visually-hidden`">
+          {{ removeAriaLabel }}
+        </span>
+      </button>
+    </span>
+    <!-- check role (alert) and id / accessibility -->
+    <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
+      <div :class="`${carbonPrefix}--form-requirement__title`">
+        {{ item.invalidMessageTitle || 'Invalid file' }}
+      </div>
+      <p :class="`${carbonPrefix}--form-requirement__supplement`">
+        {{ item.invalidMessage }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
+import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
+import Close16 from '@carbon/icons-vue/es/close/16';
+
+const emit = defineEmits(['remove']);
+
+const props = defineProps({
+  item: Object,
+  removable: Boolean,
+  removeAriaLabel: { type: String, default: 'Remove selected file' },
+});
+
+// Computed
+const isInvalid = computed(() => {
+  return props.item.invalidMessage && props.item.invalidMessage.length;
+});
+</script>

package/src/components/CvFileUploader/CvFileUploaderSkeleton.vue

@@ -0,0 +1,16 @@
+<template>
+  <div :class="`${carbonPrefix}--form-item`">
+    <cv-skeleton-text heading width="100px" />
+    <cv-skeleton-text
+      width="225px"
+      :class="`${carbonPrefix}--label-description`"
+    />
+    <cv-button-skeleton />
+  </div>
+</template>
+
+<script setup>
+import CvSkeletonText from '../CvSkeletonText';
+import { CvButtonSkeleton } from '../CvButton';
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvFileUploader/const.js

@@ -0,0 +1,10 @@
+export const STATES = {
+  NONE: '',
+  UPLOADING: 'uploading',
+  COMPLETE: 'complete',
+};
+
+export const KINDS = {
+  DRAG_TARGET: 'drag-target',
+  BUTTON: 'button',
+};

package/src/components/CvFileUploader/index.js

@@ -0,0 +1,5 @@
+import CvFileUploader from './CvFileUploader.vue';
+import CvFileUploaderSkeleton from './CvFileUploaderSkeleton.vue';
+
+export { CvFileUploader, CvFileUploaderSkeleton };
+export default CvFileUploader;

package/src/components/CvMultiSelect/CvMultiSelect.stories.mdx

@@ -176,6 +176,7 @@ Migration notes:
       label: 'Choose replicants',
       helperText: 'Do Androids Dream of Electric Sheep?',
       title: 'Characters',
+      disabled: false,
     }}
     argTypes={{
       filterTagKind: {
@@ -231,7 +232,6 @@ Migration notes:
           'autoHighlight',
           'change',
           'direction',
-          'disabled',
           'filter',
           'filterTagKind',
           'filterable',

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>