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

package/src/components/CvInlineLoading/CvInlineLoading.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    data-inline-loading
+    :class="`${carbonPrefix}--inline-loading`"
+    role="alert"
+    aria-live="assertive"
+  >
+    <div
+      :class="[
+        `${carbonPrefix}--inline-loading__animation`,
+        { [`${carbonPrefix}--loading--stop`]: internalState === STATES.ENDING },
+      ]"
+      @animationend="onLoadingEnd"
+    >
+      <div
+        v-show="internalActive"
+        :class="`${carbonPrefix}--loading ${carbonPrefix}--loading--small`"
+      >
+        <cv-loading
+          :class="`${carbonPrefix}--inline-loading__animation`"
+          :description="description"
+          :active="undefined"
+          :small="true"
+        />
+      </div>
+      <checkmark-filled16
+        v-if="internalState === STATES.LOADED"
+        :class="`${carbonPrefix}--inline-loading__checkmark-container`"
+      />
+      <error-filled16
+        v-if="internalState === STATES.ERROR"
+        :class="`${carbonPrefix}--inline-loading--error`"
+      />
+    </div>
+    <p :class="`${carbonPrefix}--inline-loading__text`">{{ stateText }}</p>
+  </div>
+</template>
+
+<script setup>
+import { STATES } from './consts';
+import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
+import { carbonPrefix } from '../../global/settings';
+import CvLoading from '../CvLoading/CvLoading.vue';
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+  /**
+   * Deprecated: Please use state property
+   * @deprecated
+   */
+  active: {
+    type: Boolean,
+    default: undefined,
+    deprecated: true,
+    validator: val => {
+      if (val !== undefined && process.env.NODE_ENV === 'development') {
+        console.warn(
+          'CvInlineLoading: active prop deprecated in favour of state prop'
+        );
+      }
+      return true;
+    },
+  },
+  /**
+   * Specify the description for the inline loading text
+   */
+  description: { type: String, default: 'Loading' },
+  /**
+   * Specify the text to show while the loading is ending (state: 'ending')
+   */
+  endingText: { type: String, default: 'Load ending...' },
+  /**
+   * Specify the text to show for the error state (state: 'error')
+   */
+  errorText: { type: String, default: 'Loading data failed.' },
+  /**
+   * Specify the text to show while loading (state: 'loading')
+   */
+  loadingText: { type: String, default: 'Loading data...' },
+  /**
+   * Specify the text to show while loading (state: 'loaded')
+   */
+  loadedText: { type: String, default: 'Data loaded.' },
+  /**
+   * Specify the loading status
+   * @values ['loading','ending','loaded','error']
+   */
+  state: {
+    type: String,
+    default: STATES.LOADING,
+    required: true,
+    validator: val => {
+      if (Object.values(STATES).includes(val)) {
+        return true;
+      } else {
+        console.error(
+          `CvInlineLoading: Valid states are ${Object.values(STATES)}`
+        );
+        return false;
+      }
+    },
+  },
+});
+const internalState = ref(stateFromProps());
+function stateFromProps() {
+  if (props.state.includes(':')) {
+    return props.state.split(':')[0];
+  } else {
+    return props.state;
+  }
+}
+watch(
+  () => props.state,
+  () => {
+    internalState.value = stateFromProps();
+  }
+);
+function onLoadingEnd(ev) {
+  if (ev.animationName === 'rotate-end-p2' && props.state.includes(':')) {
+    internalState.value = props.state.split(':')[1];
+  }
+}
+const internalActive = computed(() => {
+  if (props.active !== undefined) {
+    return props.active;
+  } else {
+    return [STATES.LOADING, STATES.ENDING].includes(internalState.value);
+  }
+});
+
+const stateText = computed(() => {
+  switch (internalState.value) {
+    case STATES.LOADED:
+      return props.loadedText;
+    case STATES.ERROR:
+      return props.errorText;
+    case STATES.ENDING:
+      return props.endingText;
+    default:
+      return props.loadingText;
+  }
+});
+</script>

package/src/components/CvInlineLoading/consts.js

@@ -0,0 +1,9 @@
+const STATES = {
+  LOADED: 'loaded',
+  ERROR: 'error',
+  LOADING: 'loading',
+  ENDING: 'ending',
+  ENDING_LOADED: 'ending:loaded',
+  ENDING_ERROR: 'ending:error',
+};
+export { STATES };

package/src/components/CvInlineLoading/index.js

@@ -0,0 +1,4 @@
+import CvInlineLoading from './CvInlineLoading.vue';
+import { STATES } from './consts';
+
+export { CvInlineLoading, STATES };

package/src/components/CvModal/CvModal.stories.mdx

@@ -3,8 +3,6 @@ import { sbCompPrefix } from '../../global/storybook-utils';
 import CvModal from './CvModal.vue';
 import { action } from '@storybook/addon-actions';
 import { nextTick, ref } from 'vue';
-const visible = ref(false);
-const visible3btn = ref(false);
 
 <Meta title={`${sbCompPrefix}/CvModal`} component={CvModal} />
 
@@ -15,6 +13,8 @@ export const Template = args => ({
   },
   // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
+    const visible = ref(false);
+    const visible3btn = ref(false);
     return {
       ...args,
       props: args.props,
@@ -32,12 +32,14 @@ export const Template = args => ({
       primaryButtonDisabled: args.primaryButtonDisabled,
       disableTeleport: args.disableTeleport,
       show: () => {
+        if (visible3btn.value) visible3btn.value = false;
         if (visible.value) visible.value = false;
         nextTick(() => {
           visible.value = true;
         }).catch(() => console.warn('cannot show'));
       },
       show3btn: () => {
+        if (visible.value) visible.value = false;
         if (visible3btn.value) visible3btn.value = false;
         nextTick(() => {
           visible3btn.value = true;

package/src/components/CvModal/CvModal.vue

@@ -262,7 +262,7 @@ function onShown() {
   } else {
     focusBeforeContent();
   }
-  emit('modal-shown');
+  emit('modal-shown', uid.value);
 
   // check to see if content scrollable
   data.scrollable = content.value?.scrollHeight > content.value?.clientHeight;
@@ -306,10 +306,10 @@ function hide() {
 
   if (dataVisible.value) {
     el.value?.addEventListener('transitionend', afterHide);
+    emit('modal-hidden', uid.value);
   }
 
   dataVisible.value = false;
-  emit('modal-hidden');
 }
 function afterHide(event) {
   if (event.propertyName === 'opacity') {
@@ -396,8 +396,6 @@ function onOtherBtnClick(ev) {
   onFooterButtonClick('other-btn-click', ev);
 }
 onBeforeUnmount(() => {
-  if (dataVisible.value) {
-    emit('after-modal-hidden');
-  }
+  if (dataVisible.value) hide();
 });
 </script>

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

@@ -0,0 +1,333 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import CvMultiSelect from './CvMultiSelect.vue';
+import { tagKinds } from '../CvTag/consts';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { DIRECTIONS, selectionFeedbackOptions } from './consts';
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+const myValue = ref(['iran_deckard']);
+const pkdCharacters = [
+  'Rick Deckard',
+  'Garland',
+  'Rachael Rosen',
+  'Roy Batty',
+  'Harry Bryant',
+  'Hannibal Chew',
+  'Dave Holden',
+  'Leon Kowalski',
+  'Taffey Lewis',
+  'Pris Stratton',
+  'J.F. Sebastian',
+  'Dr. Eldon Rosen',
+  'Zhora Salome',
+  'John "J.R." Isidore',
+  'Iran Deckard',
+  'Wilbur Mercer',
+  'Buster Friendly',
+  'Phil Resch',
+];
+const pkdOptions = pkdCharacters.map(item => {
+  const nameVal = item.replace(/\W+/g, '_').toLowerCase();
+  return {
+    name: nameVal,
+    label: item,
+    value: nameVal,
+    disabled: false,
+  };
+});
+const pkdValues = pkdOptions.map(item => item.value);
+
+<Meta title={`${sbCompPrefix}/CvMultiSelect`} component={CvMultiSelect} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvMultiSelect,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      options: args.options,
+      autoFilter: args.autoFilter,
+      autoHighlight: args.autoHighlight,
+      disabled: args.disabled,
+      filterTagKind: args.filterTagKind,
+      inline: args.inline,
+      invalidMessage: args.invalidMessage,
+      helperText: args.helperText,
+      title: args.title,
+      label: args.label,
+      highlight: args.highlight,
+      value: args.value,
+      selectionFeedback: args.selectionFeedback,
+      filterable: args.filterable,
+      light: args.light,
+      direction: args.direction,
+      warningMessage: args.warningMessage,
+      slotInvalidText: args.slotInvalidText,
+      slotWarningText: args.slotWarningText,
+      slotHelperText: args.slotHelperText,
+      myValue: myValue,
+      onChange: action('change'),
+      onFilter: action('filter'),
+      onVmodel: action('update:value'),
+    };
+  },
+  template: args.template,
+});
+const defaultTemplate = `
+  <div :style="{width: '19rem', paddingTop: direction==='top' ? '90px' : undefined}">
+  <cv-multi-select
+  :autoFilter="autoFilter"
+  :autoHighlight="autoHighlight"
+  :direction="direction"
+  :disabled="disabled"
+  :filterable="filterable"
+  :filterTagKind="filterTagKind"
+  :helperText="helperText"
+  :highlight="highlight"
+  :inline="inline"
+  :invalidMessage="invalidMessage"
+  :label="label"
+  :light="light"
+  :options="options"
+  :selectionFeedback="selectionFeedback"
+  :title="title"
+  :value="value"
+  :warningMessage="warningMessage"
+  @change="onChange"
+  @filter="onFilter"
+  >
+  </cv-multi-select>
+  </div>
+`;
+const slotsTemplate = `
+  <div :style="{width: '19rem'}">
+  <cv-multi-select
+  :label="label"
+  :options="options"
+  :title="title"
+  @change="onChange"
+  @filter="onFilter"
+  >
+    <template v-if="slotInvalidText" v-slot:invalid-message>That is <span style="font-weight:900">NOT</span> a replicant</template>
+    <template v-if="slotWarningText" v-slot:warning-message>Are you sure that is a <span style="font-variant-caps: petite-caps;">Replicant</span></template>
+    <template v-if="slotHelperText" v-slot:helper-text>Help Rick Deckard <span style="font-variant: small-caps;">“retire”</span> rogue androids</template>
+  </cv-multi-select>
+  </div>
+`;
+const vModelTemplate = `
+  <div :style="{width: '19rem'}">
+  <div>current values: {{myValue}} </div>
+  <cv-multi-select
+  :label="label"
+  :options="options"
+  :title="title"
+  v-model:value="myValue"
+  @change="onChange"
+  @filter="onFilter"
+  >
+  </cv-multi-select>
+  <div style="margin-top:2rem">
+    <div>v-model:value</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>
+  </div>
+  </div>
+`;
+
+# CvMultiSelect
+
+Migration notes:
+
+- Added the `direction` option to match Carbon React. Note that in the similar dropdown component,
+  this property is named `up` and uses a boolean value. If you prefer the boolean here,
+  let us know in the Slack channel.
+- 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
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'change',
+          'filter',
+          'helper-text',
+          'invalid-message',
+          'modelValue',
+          'template',
+          'update:modelValue',
+          'update:value',
+          'warning-message',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      options: pkdOptions,
+      light: false,
+      label: 'Choose replicants',
+      helperText: 'Do Androids Dream of Electric Sheep?',
+      title: 'Characters',
+    }}
+    argTypes={{
+      filterTagKind: {
+        control: 'select',
+        default: 'high-contrast',
+        options: tagKinds,
+      },
+      highlight: {
+        control: 'select',
+        default: undefined,
+        options: ['', ...pkdValues],
+      },
+      selectionFeedback: {
+        control: 'select',
+        default: 'top-after-reopen',
+        options: selectionFeedbackOptions,
+        table: { defaultValue: { summary: 'top-after-reopen' } },
+      },
+      light: {
+        description: '`true` to use the light version.',
+        table: { category: 'props', defaultValue: { summary: false } },
+      },
+      direction: {
+        control: 'select',
+        default: 'bottom',
+        options: DIRECTIONS,
+        table: { defaultValue: { summary: 'bottom' } },
+      },
+      options: {
+        description: `options in the form [{ label: '', value: '', name: '', disabled: false}]`,
+        control: 'inline-radio',
+        options: [],
+      },
+      value: {
+        control: 'multi-select',
+        options: pkdValues,
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Use slots with helper, invalid, & warning text
+
+<Canvas>
+  <Story
+    name="Slots"
+    parameters={{
+      controls: {
+        exclude: [
+          'autoFilter',
+          'autoHighlight',
+          'change',
+          'direction',
+          'disabled',
+          'filter',
+          'filterTagKind',
+          'filterable',
+          'helper-text',
+          'helperText',
+          'highlight',
+          'inline',
+          'invalid-message',
+          'invalidMessage',
+          'light',
+          'modelValue',
+          'options',
+          'selectionFeedback',
+          'template',
+          'update:modelValue',
+          'update:value',
+          'value',
+          'warning-message',
+          'warningMessage',
+        ],
+      },
+      docs: { source: { code: slotsTemplate } },
+    }}
+    args={{
+      template: slotsTemplate,
+      options: pkdOptions,
+      label: 'Choose replicants',
+      title: 'Characters',
+      slotInvalidText: false,
+      slotWarningText: false,
+      slotHelperText: true,
+    }}
+    argTypes={{}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# v-model
+
+Note: Specifying `v-model="something"` will not work. Use `v-model:value=something` instead.
+
+<Canvas>
+  <Story
+    name="v-model"
+    parameters={{
+      controls: {
+        exclude: [
+          'autoFilter',
+          'autoHighlight',
+          'change',
+          'direction',
+          'disabled',
+          'filter',
+          'filterTagKind',
+          'filterable',
+          'helper-text',
+          'helperText',
+          'highlight',
+          'inline',
+          'invalid-message',
+          'invalidMessage',
+          'light',
+          'modelValue',
+          'options',
+          'selectionFeedback',
+          'template',
+          'update:modelValue',
+          'update:value',
+          'value',
+          'warning-message',
+          'warningMessage',
+        ],
+      },
+      docs: { source: { code: vModelTemplate } },
+    }}
+    args={{
+      template: vModelTemplate,
+      options: pkdOptions,
+      light: false,
+      label: 'Choose replicants',
+      helperText: 'Do Androids Dream of Electric Sheep?',
+      title: 'Characters',
+    }}
+    argTypes={{
+      options: {
+        description: `options in the form [{ label: '', value: '', name: '', disabled: false}]`,
+        control: 'inline-radio',
+        options: [],
+      },
+      value: {
+        control: 'multi-select',
+        options: pkdValues,
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>