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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.5-alpha.0",
+  "version": "3.0.7-alpha.0",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
   "packageManager": "yarn@3.2.0",
   "main": "dist/carbon-vue-3.umd.min.js",
@@ -28,6 +28,7 @@
     "@carbon/icons-vue": "^10.60.0",
     "@vueuse/core": "^4.11.2",
     "carbon-components": "^10.58.5",
+    "flatpickr": "^4.6.13",
     "mitt": "^3.0.0"
   },
   "devDependencies": {
@@ -42,7 +43,7 @@
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "@vue/compiler-sfc": "^3.2.45",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.4",
     "@vue/vue3-jest": "^27.0.0",
@@ -69,7 +70,7 @@
     "stylelint": "^14.15.0",
     "stylelint-config-property-sort-order-smacss": "^9.0.0",
     "stylelint-config-sass-guidelines": "^9.0.1",
-    "vue": "^3.2.45",
+    "vue": "^3.3.4",
     "vue-loader": "^17.0.1",
     "webpack": "^5.75.0"
   },
@@ -202,5 +203,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "797d1eaacec0dcb8802ff5fea1fb08947955c9aa"
+  "gitHead": "39152672459e58bef32b4eba92078c4ebdbe7ec9"
 }

package/src/components/CvAccordion/CvAccordion.stories.js

@@ -30,6 +30,7 @@ const template = `<cv-accordion @change="onChange" v-bind="args">
   </cv-accordion-item>
 </cv-accordion>`;
 const Template = (args, { argTypes }) => {
+  // eslint-disable-next-line no-param-reassign
   args = {
     ...args,
     align: alignConsts[alignConsts.$labels[args.align]],

package/src/components/CvButton/CvButton.stories.js

@@ -87,7 +87,7 @@ Secondary.parameters = storyParametersObject(
 
 export const Field = Template.bind({});
 Field.args = {
-  'slotArgs.default': 'Field size',
+  default: 'Field size',
   size: 'field',
 };
 Field.parameters = storyParametersObject(
@@ -98,7 +98,7 @@ Field.parameters = storyParametersObject(
 
 export const Small = Template.bind({});
 Small.args = {
-  'slotArgs.default': 'sm',
+  default: 'sm',
   size: 'sm',
 };
 Small.parameters = storyParametersObject(
@@ -109,7 +109,7 @@ Small.parameters = storyParametersObject(
 
 export const Large = Template.bind({});
 Large.args = {
-  'slotArgs.default': 'Large size',
+  default: 'Large size',
   size: 'lg',
 };
 Large.parameters = storyParametersObject(

package/src/components/CvButton/CvButtonSkeleton.stories.js

@@ -0,0 +1,79 @@
+import { CvButtonSkeleton } from '.';
+import { buttonSizes } from './consts.js';
+import {
+  sbCompPrefix,
+  storybookControlsFromProps,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { sbBtnPrefix } from './sbBtnPrefix';
+
+import { props as commonCvButtonProps } from './CvButtonCommon';
+
+export default {
+  title: `${sbCompPrefix}/${sbBtnPrefix}/CvButtonSkeleton`,
+  component: CvButtonSkeleton,
+  argTypes: {
+    ...storybookControlsFromProps({ size: commonCvButtonProps.size }),
+    size: {
+      control: { type: 'select', options: buttonSizes },
+      defaultValue: 'default',
+    },
+  },
+};
+
+const template = `<cv-button-skeleton v-bind="buttonProps" />`;
+const Template = (args, { argTypes }) => {
+  const buttonProps = { ...args };
+  return {
+    props: Object.keys(argTypes),
+    components: { CvButtonSkeleton },
+    template,
+    setup() {
+      return { buttonProps };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  size: 'default',
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args,
+  'v-bind="buttonProps"'
+);
+
+export const Field = Template.bind({});
+Field.args = {
+  size: 'field',
+};
+Field.parameters = storyParametersObject(
+  Field.parameters,
+  template,
+  Field.args,
+  'v-bind="buttonProps"'
+);
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'sm',
+};
+Small.parameters = storyParametersObject(
+  Small.parameters,
+  template,
+  Small.args,
+  'v-bind="buttonProps"'
+);
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'lg',
+};
+Large.parameters = storyParametersObject(
+  Large.parameters,
+  template,
+  Large.args,
+  'v-bind="buttonProps"'
+);

package/src/components/CvButton/CvButtonSkeleton.vue

@@ -0,0 +1,19 @@
+<template>
+  <button disabled :class="buttonClasses" type="button"></button>
+</template>
+
+<script setup>
+import {
+  props as commonCvButtonProps,
+  useCvButtonCommon,
+} from './CvButtonCommon';
+
+const props = defineProps({
+  /**
+   * Size of the button
+   */
+  size: commonCvButtonProps.size,
+});
+
+const { buttonClasses } = useCvButtonCommon(undefined, props.size, true);
+</script>

package/src/components/CvButton/index.js

@@ -1,7 +1,14 @@
 import CvButton from './CvButton.vue';
 import CvIconButton from './CvIconButton.vue';
 import CvButtonSet from './CvButtonSet.vue';
+import CvButtonSkeleton from './CvButtonSkeleton.vue';
 import CvButtonConsts from './consts';
 
-export { CvButton, CvButtonConsts, CvButtonSet, CvIconButton };
+export {
+  CvButton,
+  CvButtonConsts,
+  CvButtonSet,
+  CvIconButton,
+  CvButtonSkeleton,
+};
 export default CvButton;

package/src/components/CvDatePicker/CvDatePicker-notes.md

@@ -0,0 +1,86 @@
+# cv-date-picker
+
+A Vue implementation of a Carbon Components date-picker.
+
+http://www.carbondesignsystem.com/components/date-picker/code
+
+## Usage
+
+### Short
+
+```html
+<cv-date-picker
+  kind="short"
+  pattern="\d{1,2}/\d{2}"
+  placeholder="mm/yy"
+  @onChange="actionChange"
+>
+</cv-date-picker>
+```
+
+### Simple
+
+```html
+<cv-date-picker
+  kind="simple"
+  pattern="\d{1,2}/\d{1,2}/\d{4}"
+  placeholder="mm/dd/yyyy"
+  @onChange="actionChange"
+>
+</cv-date-picker>
+```
+
+### Single
+
+```html
+<cv-date-picker
+  kind="single"
+  pattern="\d{1,2}/\d{1,2}/\d{4}"
+  placeholder="mm/dd/yyyy"
+  :cal-options="calOptions"
+  @onChange="actionChange"
+>
+</cv-date-picker>
+```
+
+### Range
+
+```html
+<cv-date-picker
+  kind="range"
+  pattern="\d{1,2}/\d{1,2}/\d{4}"
+  placeholder="mm/dd/yyyy"
+  :cal-options="calOptions"
+  @onChange="actionChange"
+>
+</cv-date-picker>
+```
+
+## Attributes
+
+- dateLabel: optional label for the date input (first in range)
+- dateEndLabel: optional for the end range date input (first in range)
+- kind: 'short', 'simple', 'single', 'range' as per carbon components core only single and range have a date picker
+- calOptions: Options to confiure flatpickr, see flatpickr for full details.
+
+  - e.g. { dateFormat: 'd/m/Y', defaultDate: '01/01/2019' }
+  - NOTE: passing event handlers onChange and onValueUpdate are swallowed internally. Both produce an onChange.
+
+- pattern: Regex pattern used for form validation '\\d{1,2}/\\d{1,2}/\\d{4}',
+- placeholder: Shown when date picker is empty,
+- invalidMessage: Message displayed if invalid is true
+
+- value: can be
+  - Javascript Date
+  - String with a date matching the format based on the calendar options
+  - Object (kind === 'range' only): { startDate: val, endDate: val2 } where val and val2 are a javascript date or date string as per format option
+
+## Slots
+
+invalid-message: Overrides the invalid message property
+
+###
+
+## Events
+
+- change raised when single or ranged date picker value changes.

package/src/components/CvDatePicker/CvDatePicker.stories.js

@@ -0,0 +1,241 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+import { CvDatePicker } from '.';
+import { CvDatePickerSkeleton } from '.';
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+
+const initArgs = {
+  dateLabel: 'Date label',
+  invalidMessage: '',
+};
+
+const now = new Date();
+const tomorrow = new Date();
+tomorrow.setDate(now.getDate() + 1);
+
+export default {
+  title: `${sbCompPrefix}/CvDatePicker`,
+  component: CvDatePicker,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [],
+      },
+      manual: true,
+    },
+  },
+  argTypes: {
+    dateLabel: { type: String, description: 'Date picker label' },
+    invalidMessage: {
+      type: String,
+      description: 'Date picker text on invalid value',
+    },
+  },
+};
+
+/* DEFAULT STORY */
+
+const template = `
+<div>
+  <cv-date-picker v-bind='args' @change='onChange'>
+  </cv-date-picker>
+</div>
+`;
+const Template = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = initArgs;
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+/* V-MODEL STORY */
+
+const modelValue = ref('');
+const templateVModel = `
+<div>
+  <cv-date-picker v-bind='args' @change='onChange' v-model="modelValue">
+  </cv-date-picker>
+</div>
+<div style="margin: 32px 0;">
+  <div style="font-size: 150%;">Sample interaction</div>
+  <label for="date-model" style='margin-right: 0.5rem'>V-model:</label>
+  <input id="date-model" type="text" :value="modelValue.startDate || modelValue" @change="ev => { if (args.kind === 'range') { modelValue.startDate = ev.currentTarget.value } else { modelValue = ev.currentTarget.value } }"/>
+  <input v-if="args.kind === 'range'" id="date-model" type="text" :value="modelValue.endDate" @change="ev => modelValue.endDate = ev.currentTarget.value"/>
+</div>
+`;
+
+const TemplateVModel = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      modelValue,
+      now,
+      onChange: action('change'),
+    }),
+    template: templateVModel,
+  };
+};
+
+export const vModel = TemplateVModel.bind({});
+vModel.args = initArgs;
+vModel.parameters = storyParametersObject(
+  vModel.parameters,
+  templateVModel,
+  vModel.args
+);
+
+/* INVALID MESSAGE STORY */
+
+const templateInvalidMessage = `
+<div>
+  <cv-date-picker v-bind='args' @change='onChange'>
+  </cv-date-picker>
+</div>
+`;
+
+const TemplateInvalidMessage = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template: templateInvalidMessage,
+  };
+};
+
+export const InvalidMessage = TemplateInvalidMessage.bind({});
+InvalidMessage.args = { ...initArgs, invalidMessage: 'Invalid date' };
+
+/* INVALID MESSAGE SLOT STORY */
+
+const templateInvalidMessageSlot = `
+<div>
+  <cv-date-picker v-bind='args' @change='onChange'>
+    <template #invalid-message>Invalid date slot</template>
+  </cv-date-picker>
+</div>
+`;
+
+const TemplateInvalidMessageSlot = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template: templateInvalidMessageSlot,
+  };
+};
+
+export const InvalidMessageSlot = TemplateInvalidMessageSlot.bind({});
+InvalidMessageSlot.args = initArgs;
+
+/* SINGLE USING DATE STORY */
+
+const templateSingleUsingDate = `
+<div>
+  <cv-date-picker v-bind='args' @change='onChange' kind="single" :value="now">
+  </cv-date-picker>
+</div>
+`;
+
+const TemplateSingleUsingDate = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      now,
+      onChange: action('change'),
+    }),
+    template: templateSingleUsingDate,
+  };
+};
+
+export const SingleUsingDate = TemplateSingleUsingDate.bind({});
+SingleUsingDate.args = initArgs;
+
+/* RANGE USING DATE STORY */
+
+const templateRangeUsingDate = `
+<div>
+  <cv-date-picker v-bind='args' @change='onChange' kind="range" :value="{startDate: now.toLocaleDateString(), endDate: tomorrow.toLocaleDateString()}">
+  </cv-date-picker>
+</div>
+`;
+
+const TemplateRangeUsingDate = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      now,
+      tomorrow,
+      onChange: action('change'),
+    }),
+    template: templateRangeUsingDate,
+  };
+};
+
+export const RangeUsingDate = TemplateRangeUsingDate.bind({});
+RangeUsingDate.args = initArgs;
+
+/* MINIMAL STORY */
+
+const templateMinimal = `
+<div>
+  <cv-date-picker v-bind='args' @change='onChange'>
+  </cv-date-picker>
+</div>
+`;
+
+const TemplateMinimal = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template: templateMinimal,
+  };
+};
+
+export const Minimal = TemplateMinimal.bind({});
+
+/* SKELETON STORY */
+
+const templateSkeleton = `
+<div>
+  <cv-date-picker-skeleton v-bind='args'></cv-date-picker-skeleton>
+</div>
+`;
+
+const TemplateSkeleton = args => {
+  return {
+    components: { CvDatePicker, CvDatePickerSkeleton },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template: templateSkeleton,
+  };
+};
+
+export const Skeleton = TemplateSkeleton.bind({});