@carbon/vue 3.0.7-alpha.0 → 3.0.8-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/CvProgress/CvProgress.stories.mdx

@@ -0,0 +1,202 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { CvProgress, CvProgressStep } from '.';
+import { Time20 as TimeIcon } from '@carbon/icons-vue';
+// noinspection ES6PreferShortImport
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+
+<Meta title={`${sbCompPrefix}/CvProgress`} component={CvProgress} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvProgress,
+    CvProgressStep,
+    TimeIcon,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      initialStep: args.initialStep,
+      steps: args.steps,
+      vertical: args.vertical,
+      spaceEqually: args.spaceEqually,
+      step1: args.step1,
+      step2: args.step2,
+      step3: args.step3,
+      step4: args.step4,
+      step5: args.step5,
+      completeIds: args.completeIds,
+      invalidIds: args.invalidIds,
+      disabledIds: args.disabledIds,
+      onStepClicked: action('step-clicked'),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+  <cv-progress
+    :initial-step="initialStep"
+    :steps="steps"
+    :vertical="vertical"
+    :space-equally="spaceEqually"
+    @step-clicked="onStepClicked">
+  </cv-progress>
+`;
+const slotTemplate = `
+  <cv-progress
+    :initial-step="initialStep"
+    :vertical="vertical"
+    :spaceEqually="spaceEqually"
+    >
+    <cv-progress-step
+      id="step-1"
+      :label="step1"
+      :complete="completeIds.includes('step-1')"
+      :invalid="invalidIds.includes('step-1')"
+      :disabled="disabledIds.includes('step-1')"
+      additionalInfo="with Meg Murry"
+      description="time icon description"
+      @step-clicked="onStepClicked"
+      >
+      <template v-slot:step-icon>
+        <time-icon :class="[{['bx--progress__warning']:invalidIds.includes('step-1')}]"/>
+      </template>
+    </cv-progress-step>
+    <cv-progress-step
+      id="step-2"
+      :label="step2"
+      :complete="completeIds.includes('step-2')"
+      :invalid="invalidIds.includes('step-2')"
+      :disabled="disabledIds.includes('step-2')"
+      additionalInfo="save Charles Wallace"
+      @step-clicked="onStepClicked"
+      >
+    </cv-progress-step>
+    <cv-progress-step
+      id="step-3"
+      :label="step3"
+      :complete="completeIds.includes('step-3')"
+      :invalid="invalidIds.includes('step-3')"
+      :disabled="disabledIds.includes('step-3')"
+      additionalInfo="save the world"
+      @step-clicked="onStepClicked"
+      >
+    </cv-progress-step>
+    <cv-progress-step
+      id="step-4"
+      :label="step4"
+      :complete="completeIds.includes('step-4')"
+      :invalid="invalidIds.includes('step-4')"
+      :disabled="disabledIds.includes('step-4')"
+      additionalInfo="Twins Dennys and Sandy"
+      @step-clicked="onStepClicked"
+      >
+    </cv-progress-step>
+    <cv-progress-step
+      id="step-5"
+      :label="step5"
+      :complete="completeIds.includes('step-5')"
+      :invalid="invalidIds.includes('step-5')"
+      :disabled="disabledIds.includes('step-5')"
+      additionalInfo="with Polyhymnia O'Keefe"
+      @step-clicked="onStepClicked"
+      >
+    </cv-progress-step>
+  </cv-progress>
+`;
+
+# CvProgress
+
+**Migration notes:**
+
+- The "current" icon is updated to match Carbon React
+- Added the property `spaceEqually` to match Carbon React
+- The property name `initialStep` is misleading. It is treated as the Current progress (currentIndex).
+- To override the default icons, provide an icon in the `step-icon` slot in the `cv-progress-step`
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'step-clicked'],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      steps: [
+        'Planet Uriel',
+        'The Happy Medium',
+        'The Black Thing',
+        'Rescue Dr. Murry',
+        'Rescue Charles Wallace',
+        'Back to Earth',
+      ],
+    }}
+    argTypes={{
+      initialStep: {
+        control: {
+          type: 'number',
+          min: -1,
+          max: 6,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Slotted
+
+Use `cv-progress-step` for more control over the display.
+
+<Canvas>
+  <Story
+    name="slotted"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'step-clicked', 'steps'],
+      },
+      docs: { source: { code: slotTemplate } },
+    }}
+    args={{
+      template: slotTemplate,
+      step1: 'A Wrinkle in Time',
+      step2: 'A Wind in the Door',
+      step3: 'A Swiftly Tilting Planet',
+      step4: 'Many Waters',
+      step5: 'An Acceptable Time',
+      vertical: true,
+      completeIds: [],
+      invalidIds: [],
+      disabledIds: [],
+    }}
+    argTypes={{
+      initialStep: {
+        control: {
+          type: 'number',
+          min: -1,
+          max: 6,
+        },
+      },
+      disabledIds: {
+        control: 'multi-select',
+        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+      },
+      completeIds: {
+        control: 'multi-select',
+        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+      },
+      invalidIds: {
+        control: 'multi-select',
+        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>