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

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>