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

package/src/components/CvDatePicker/plugins/monthSelectPlugin.js

@@ -0,0 +1,86 @@
+/*
+ * COPIED FROM carbon-components-react
+ */
+
+/**
+ * @param {number} monthNumber The month number.
+ * @param {boolean} shorthand `true` to use shorthand month.
+ * @param {Locale} locale The Flatpickr locale data.
+ * @returns {string} The month string.
+ */
+const monthToStr = (monthNumber, shorthand, locale) =>
+  locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];
+
+/**
+ * @param {object} config Plugin configuration.
+ * @param {boolean} [config.shorthand] `true` to use shorthand month.
+ * @param {string} config.selectorFlatpickrMonthYearContainer The CSS selector for the container of month/year selection UI.
+ * @param {string} config.selectorFlatpickrYearContainer The CSS selector for the container of year selection UI.
+ * @param {string} config.selectorFlatpickrCurrentMonth The CSS selector for the text-based month selection UI.
+ * @param {string} config.classFlatpickrCurrentMonth The CSS class for the text-based month selection UI.
+ * @returns {Plugin} A Flatpickr plugin to use text instead of `<select>` for month picker.
+ */
+export default config => fp => {
+  const setupElements = () => {
+    if (!fp.monthElements || fp.monthElements.length < 1) {
+      return;
+    }
+    fp.monthElements.forEach(elem => {
+      if (!elem.parentNode) return;
+      elem.parentNode.removeChild(elem);
+    });
+    fp.monthElements.splice(
+      0,
+      fp.monthElements.length,
+      ...fp.monthElements.map(() => {
+        // eslint-disable-next-line no-underscore-dangle
+        const monthElement = fp._createElement(
+          'span',
+          config.classFlatpickrCurrentMonth
+        );
+        monthElement.textContent = monthToStr(
+          fp.currentMonth,
+          config.shorthand === true,
+          fp.l10n
+        );
+        fp.yearElements[0]
+          .closest(config.selectorFlatpickrMonthYearContainer)
+          .insertBefore(
+            monthElement,
+            fp.yearElements[0].closest(config.selectorFlatpickrYearContainer)
+          );
+        return monthElement;
+      })
+    );
+  };
+
+  const updateCurrentMonth = () => {
+    const monthStr = monthToStr(
+      fp.currentMonth,
+      config.shorthand === true,
+      fp.l10n
+    );
+    fp.yearElements.forEach(elem => {
+      const currentMonthContainer = elem.closest(
+        config.selectorFlatpickrMonthYearContainer
+      );
+      Array.prototype.forEach.call(
+        currentMonthContainer.querySelectorAll('.cur-month'),
+        monthElement => {
+          monthElement.textContent = monthStr;
+        }
+      );
+    });
+  };
+
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrMonthSelectPlugin');
+  };
+
+  return {
+    onMonthChange: updateCurrentMonth,
+    onValueUpdate: updateCurrentMonth,
+    onOpen: updateCurrentMonth,
+    onReady: [setupElements, updateCurrentMonth, register],
+  };
+};

package/src/components/CvDatePicker/plugins/rangePlugin.js

@@ -0,0 +1,47 @@
+import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
+
+/*
+ * COPIED FROM carbon-components-react
+ */
+
+/**
+ * @param {object} config Plugin configuration.
+ * @returns {Plugin} An extension of Flatpickr `rangePlugin` that does the following:
+ *   * Better ensures the calendar dropdown is always aligned to the `<input>` for the starting date.
+ *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
+ *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
+ */
+export default config => {
+  const factory = rangePlugin(Object.assign({ position: 'left' }, config));
+
+  return fp => {
+    const origSetDate = fp.setDate;
+
+    const init = () => {
+      fp.setDate = function setDate(dates, triggerChange, format) {
+        origSetDate.call(this, dates, triggerChange, format);
+        // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
+        // where Flatpickr's range plugin takes care of fixing the first `<input>`
+        if (!triggerChange) {
+          const { _input: inputFrom } = fp;
+          const { input: inputTo } = config;
+          [inputFrom, inputTo].forEach((input, i) => {
+            if (input) {
+              input.value = !dates[i]
+                ? ''
+                : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
+            }
+          });
+        }
+      };
+    };
+
+    const origRangePlugin = factory(fp);
+    const { onReady: origOnReady } = origRangePlugin;
+
+    return Object.assign(origRangePlugin, {
+      onReady: [init, origOnReady],
+      onPreCalendarPosition() {},
+    });
+  };
+};

package/src/components/CvForm/CvForm.stories.mdx

@@ -0,0 +1,193 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { action } from '@storybook/addon-actions';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import CvButton from '../CvButton';
+import CvTextInput from '../CvTextInput';
+import CvTextArea from '../CvTextArea';
+import { CvForm, CvFormGroup, CvFormItem } from '.';
+
+<Meta title={`${sbCompPrefix}/CvForm`} component={CvForm} />
+
+export const Template = args => ({
+  components: {
+    CvForm,
+    CvFormGroup,
+    CvFormItem,
+    CvButton,
+    CvTextInput,
+    CvTextArea,
+  },
+  setup: () => {
+    const doSubmit = action('cv-form -submit event');
+    return {
+      args: { ...args, template: undefined },
+      onSubmit(ev) {
+        console.dir([].slice.call(ev.target, [0, ev.target.length]));
+        doSubmit(ev);
+      },
+    }
+  },
+  template: args.template,
+});
+
+export const defaultTemplate = `
+  <cv-form @submit.prevent="onSubmit">
+    <cv-text-input
+      label="Text input label"
+      placeholder="Optional placeholder text"
+      helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
+    />
+    <cv-text-area
+      label="Text area label"
+      placeholder="Optional placeholder text"
+      helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
+    />
+    <cv-button>Submit</cv-button>
+  </cv-form>
+`;
+
+export const formGroupTemplate = `
+  <cv-form-group v-bind="args">
+    <template #label>
+      FormGroup label-legend
+    </template>
+    <template #content>
+      <cv-text-input label="First name" />
+      <cv-text-input label="Last name" />
+    </template>
+  </cv-form-group>
+`;
+
+export const formItemTemplate = `
+  <cv-form-item>
+    <label for="text-input-3" class="bx--label">Text Input label</label>
+    <input id="text-input-3" type="text" class="bx--text-input" placeholder="Optional placeholder text" />
+  </cv-form-item>
+`;
+
+# CvForm
+
+These components are purely wrapper elements for use in creating forms.
+
+## Usage CvForm
+
+CvForm has no properties and a single default slot
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: ['template']
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+    }}
+    argTypes={{
+      default: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        }
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+
+## CvFormGroup
+
+Used inside a form to group components such as checkboxes and radio buttons.
+
+<Canvas>
+  <Story
+    name="FormGroup-Default"
+    parameters={{
+      controls: {
+        exclude: ['template', 'default']
+      },
+      docs: { source: { code: formGroupTemplate.replace('v-bind="args"', '') } },
+    }}
+    args={{
+      template: formGroupTemplate,
+    }}
+    argTypes={{
+      content: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        },
+      },
+      label: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        },
+        description: 'Legend element content',
+      },
+      invalid: {
+        type: 'boolean',
+        table: {
+          type: { summary: 'boolean' },
+          category: 'props',
+        },
+        description: 'Specify whether the `FormGroup` is invalid',
+      },
+      message: {
+        type: 'string',
+        table: {
+          type: { summary: 'string' },
+          category: 'props',
+        },
+        description: 'Specify a message to be placed at the end of the `FormGroup`',
+      },
+      noMargin: {
+        type: 'boolean',
+        table: {
+          type: { summary: 'boolean' },
+          category: 'props',
+        },
+        description: 'Remove default margins set on `FormGroup`',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## CvFormItem
+
+Used inside a form to provide positional styling.
+
+<Canvas>
+  <Story
+    name="FormItem-Default"
+    parameters={{
+      controls: {
+        exclude: ['template']
+      },
+      docs: { source: { code: formItemTemplate } },
+    }}
+    args={{
+      template: formItemTemplate,
+    }}
+    argTypes={{
+      default: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        }
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvForm/CvForm.vue

@@ -0,0 +1,9 @@
+<template>
+  <form :class="`cv-form ${carbonPrefix}--form`">
+    <slot></slot>
+  </form>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvForm/CvFormGroup.vue

@@ -0,0 +1,27 @@
+<template>
+  <fieldset
+    :class="[
+      `cv-form-group ${carbonPrefix}--fieldset`,
+      { [`${carbonPrefix}--fieldset--no-margin`]: noMargin },
+    ]"
+    :data-invalid="invalid"
+  >
+    <legend :class="`${carbonPrefix}--label`">
+      <slot name="label"></slot>
+    </legend>
+    <slot name="content"></slot>
+    <div v-if="message" :class="`${carbonPrefix}--form__requirements`">
+      {{ message }}
+    </div>
+  </fieldset>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+
+const props = defineProps({
+  invalid: Boolean,
+  message: String,
+  noMargin: Boolean,
+});
+</script>

package/src/components/CvForm/CvFormItem.vue

@@ -0,0 +1,9 @@
+<template>
+  <div :class="`cv-form-item ${carbonPrefix}--form-item`">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvForm/index.js

@@ -0,0 +1,5 @@
+import CvForm from './CvForm';
+import CvFormGroup from './CvFormGroup';
+import CvFormItem from './CvFormItem';
+
+export { CvForm, CvFormGroup, CvFormItem };

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

@@ -0,0 +1,234 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+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} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvModal,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      ...args,
+      props: args.props,
+      onModalHidden: action('modal-hidden'),
+      onModalHideRequest: action('modal-hide-request'),
+      onModalShown: action('modal-shown'),
+      onOtherBtnClick: action('other-btn-click'),
+      onPrimaryClick: action('primary-click'),
+      onSecondaryClick: action('secondary-click'),
+      visible,
+      visible3btn,
+      kind: args.kind,
+      size: args.size,
+      autoHideOff: args.autoHideOff,
+      primaryButtonDisabled: args.primaryButtonDisabled,
+      disableTeleport: args.disableTeleport,
+      show: () => {
+        if (visible.value) visible.value = false;
+        nextTick(() => {
+          visible.value = true;
+        }).catch(() => console.warn('cannot show'));
+      },
+      show3btn: () => {
+        if (visible3btn.value) visible3btn.value = false;
+        nextTick(() => {
+          visible3btn.value = true;
+        }).catch(() => console.warn('cannot show'));
+      },
+      onAfterModalHidden() {
+        action('after-modal-hidden')();
+        visible.value = false;
+        visible3btn.value = false;
+      },
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+<div>
+<cv-modal v-bind="props"
+  :visible="visible"
+  :kind="kind"
+  :size="size"
+  :autoHideOff="autoHideOff"
+  :primaryButtonDisabled="primaryButtonDisabled"
+  :disableTeleport="disableTeleport"
+  @after-modal-hidden="onAfterModalHidden"
+  @modal-hidden="onModalHidden"
+  @modal-hide-request="onModalHideRequest"
+  @modal-shown="onModalShown"
+  @other-btn-click="onOtherBtnClick"
+  @primary-click="onPrimaryClick"
+  @secondary-click="onSecondaryClick">
+  <template v-slot:label>Label of modal</template>
+  <template v-slot:title>Title of modal</template>
+  <template v-slot:content><p>Space: the final frontier. These are the voyages of the starship Enterprise. Its five-year mission: to explore strange new worlds; to seek out new life and new civilizations; to boldly go where no one has gone before!</p></template>
+</cv-modal>
+<!-- The show function sets the visible property to true  -->
+<button @click="show">show</button>
+</div>
+`;
+const buttonTemplate = `
+<div>
+<cv-modal v-bind="props"
+  :visible="visible3btn"
+  :kind="kind"
+  :size="size"
+  :autoHideOff="autoHideOff"
+  :primaryButtonDisabled="primaryButtonDisabled"
+  :disableTeleport="disableTeleport"
+  @after-modal-hidden="onAfterModalHidden"
+  @modal-hidden="onModalHidden"
+  @modal-hide-request="onModalHideRequest"
+  @modal-shown="onModalShown"
+  @other-btn-click="onOtherBtnClick"
+  @primary-click="onPrimaryClick"
+  @secondary-click="onSecondaryClick">
+  <template v-slot:label>Label of modal</template>
+  <template v-slot:title>Title of modal</template>
+  <template v-slot:content>
+  <p>The term 'shields' first appears in the Star Trek episode "Balance of Terror", in which they were deployed, albeit to little effect, by a Federation outpost under attack from a Romulan Warbird. The first depicted use by a starship was in the Star Trek episode "Arena", in which the USS Enterprise raises its 'screens' after being attacked by an alien warship although the term 'shields' is not used in this episode. Shields are not mentioned during the earlier seasons of the Star Trek: Enterprise series, starships instead using "polarized hull plating" to make their hull more resistant to damage.</p>
+  <br />
+  <p>Like most technologies in the Star Trek fictional universe, the exact operation of shield technology is never precisely described. Characters discuss its existence and manipulation, while only superficially describing its exact physics, which result in a field being projected around a ship or other body, deflecting or dispersing projectiles and energy weapons. Shields are not shown unless struck, and are then often shown briefly for dramatic effect as a translucent bubble of energy.</p>
+  <br />
+  <p>Shields are said to be made of a screen of gravitons that can deflect beam and projectile weaponry.</p>
+  <br />
+  <p>https://en.wikipedia.org/wiki/Shields_(Star_Trek)</p>
+  </template>
+  <template v-slot:other-button>other</template>
+  <template v-slot:secondary-button>secondary</template>
+  <template v-slot:primary-button>primary</template>
+</cv-modal>
+<!-- The show function sets the visible property to true  -->
+<button @click="show3btn">show</button>
+</div>
+`;
+
+# CvModal
+
+Migration notes:
+
+- The modal uses the Vue [teleport](https://vuejs.org/guide/built-ins/teleport.html#basic-usage) to move the modal to the document body. This resolves some scrolling issues seen in the Vue 2 implementation.
+  Set `disableTeleport` to true to revert to the Vue 2 behaviour.
+- The `v-model` is different in Vue 3 than Vue 2. You can still specify the `v-model=something` to control the visibility but
+  if you specify it like this you will see a deprecation message in the log. Please use `v-model:visible=something` instead.
+- For the `size` attribute please use of the standard sizes 'xs', 'sm', 'md', or 'lg'. The 'large' and 'small' values still
+  work but avoid using them.
+- The `arial-label` was derived from the title slot but in this version it is an additional property with a default of 'Information modal'
+- The `show` and `hide` methods can no longer be called directly. Use the `visible` property to control visability.
+- The `modal-hide-request` no longer emits a `PointerEvent` instead just the reason is emitted. i.e. `{cv:reason: "external-click"}`
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'props',
+          'default',
+          'template',
+          'content',
+          'label',
+          'other-button',
+          'primary-button',
+          'secondary-button',
+          'title',
+          'after-modal-hidden',
+          'modal-hidden',
+          'modal-hide-request',
+          'modal-shown',
+          'other-btn-click',
+          'primary-click',
+          'secondary-click',
+          'update:modelValue',
+          'update:visible',
+          'modelValue',
+          'visible',
+          'onOtherBtnClick',
+          'onPrimaryClick',
+          'onSecondaryClick',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      props: {
+        modelValue: undefined,
+      },
+    }}
+    argTypes={{
+      kind: { control: 'select', default: '', options: ['', 'danger'] },
+      size: {
+        control: 'select',
+        default: 'md',
+        options: ['xs', 'sm', 'md', 'lg'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# CvModal with three buttons
+
+<Canvas>
+  <Story
+    name="Three buttons"
+    parameters={{
+      controls: {
+        exclude: [
+          'props',
+          'default',
+          'template',
+          'content',
+          'label',
+          'other-button',
+          'primary-button',
+          'secondary-button',
+          'title',
+          'after-modal-hidden',
+          'modal-hidden',
+          'modal-hide-request',
+          'modal-shown',
+          'other-btn-click',
+          'primary-click',
+          'secondary-click',
+          'update:modelValue',
+          'update:visible',
+          'modelValue',
+          'visible',
+          'onOtherBtnClick',
+          'onPrimaryClick',
+          'onSecondaryClick',
+        ],
+      },
+      docs: { source: { code: buttonTemplate } },
+    }}
+    args={{
+      template: buttonTemplate,
+      props: {
+        modelValue: undefined,
+      },
+    }}
+    argTypes={{
+      kind: { control: 'select', default: '', options: ['', 'danger'] },
+      size: {
+        control: 'select',
+        default: 'md',
+        options: ['xs', 'sm', 'md', 'lg'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>