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

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.7-alpha.0",
+  "version": "3.0.8-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",
+  "types": "src/index.d.ts",
   "scripts": {
     "_postinstall": "node prepare.js",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "build": "vue-cli-service build --target lib --name carbon-vue-3 ./src/index.js --no-clean",
     "lint": "vue-cli-service lint",
-    "ci-check": "yarn format:diff && yarn test --no-coverage && yarn build",
+    "ci-check": "yarn format:diff && yarn test && yarn build",
     "format": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{build,es,lib,storybook,ts,umd,.coverage}/**'",
     "format:diff": "prettier --list-different '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static,.coverage}/**'",
     "format:staged": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static,.coverage}/**'",
     "lint:css": "stylelint '{packages,storybook}/**/*.{vue,scss}'",
     "lint:es": "eslint src/**/*.{js,vue}",
     "lint:style": "vue-cli-service lint:style",
-    "test": "vue-cli-service test:unit",
+    "serve:storybook": "cd ./storybook && yarn run serve",
+    "test": "vue-cli-service test:unit --no-coverage",
     "a11test": "node -v"
   },
   "workspaces": [
@@ -28,6 +30,7 @@
     "@carbon/icons-vue": "^10.60.0",
     "@vueuse/core": "^4.11.2",
     "carbon-components": "^10.58.5",
+    "eslint-plugin-prettier-vue": "^4.2.0",
     "flatpickr": "^4.6.13",
     "mitt": "^3.0.0"
   },
@@ -203,5 +206,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "39152672459e58bef32b4eba92078c4ebdbe7ec9"
+  "gitHead": "15a95f30d38d6b600fd1b70274502895e777e02c"
 }

package/src/components/CvCheckbox/CvCheckbox.stories.js

@@ -4,7 +4,7 @@ import {
   storyParametersObject,
 } from '../../global/storybook-utils';
 
-import { CvCheckbox } from '.';
+import { CvCheckbox, CvCheckboxSkeleton } from '.';
 import { action } from '@storybook/addon-actions';
 import { props as propsCvCheck } from '../../use/cvCheck';
 import { ref } from 'vue';
@@ -14,21 +14,18 @@ export default {
   component: CvCheckbox,
   argTypes: {
     ...storybookControlsFromProps(propsCvCheck),
-    label: { description: 'checkbox label' },
     value: {
       type: 'string',
+      description:
+        'The value associated with the input (this is also the value that is sent on submit)',
       table: {
         type: { summary: 'string' },
         category: 'props',
       },
     },
-    hideLabel: {
-      description:
-        'makes the label visually hidden but still labels the checkbox',
-    },
     mixed: {
       type: 'boolean',
-      description: 'if true aria-checkbox set to mixed if checked is false',
+      description: 'Specify whether the Checkbox is in an indeterminate state',
       table: {
         type: { summary: 'boolean' },
         category: 'props',
@@ -47,12 +44,14 @@ export default {
     },
     checked: {
       type: 'boolean',
+      description: 'Specify whether the underlying input should be checked',
       table: {
         type: { summary: 'boolean' },
         category: 'props',
       },
     },
   },
+  parameters: { controls: { exclude: ['change', 'update:modelValue'] } },
 };
 
 const template = `
@@ -109,3 +108,15 @@ vModel.parameters = storyParametersObject(
   templateVModel,
   vModel.args
 );
+
+const templateSkeleton = `<cv-checkbox-skeleton></cv-checkbox-skeleton>`;
+
+const TemplateSkeleton = () => {
+  return {
+    components: { CvCheckboxSkeleton },
+    setup: () => {},
+    template: templateSkeleton,
+  };
+};
+
+export const Skeleton = TemplateSkeleton.bind({});

package/src/components/CvCheckbox/CvCheckbox.vue

@@ -23,8 +23,7 @@
       :class="[
         `${carbonPrefix}--checkbox-label`,
         {
-          [`${carbonPrefix}--label--disabled`]:
-            $attrs.disabled !== undefined && this.$attrs.disabled,
+          [`${carbonPrefix}--label--disabled`]: disabled,
           [`${carbonPrefix}--checkbox-label__focus`]: hasFocus,
         },
       ]"
@@ -41,16 +40,33 @@
 </template>
 
 <script setup>
-import { ref, toRefs } from 'vue';
+// noinspection ES6PreferShortImport
 import { carbonPrefix } from '../../global/settings';
+import { ref, toRefs } from 'vue';
 import { useCheck, props as propsCvCheck } from '../../use/cvCheck';
 import { useCvId, props as propsCvId } from '../../use/cvId';
 
 const props = defineProps({
+  /**
+   * Specify whether the label should be hidden, or not
+   */
   hideLabel: { type: Boolean, default: null },
+  /**
+   * Provide a label to provide a description of the Checkbox input that you are exposing to the user
+   */
   label: { type: String, default: null },
+  /**
+   * Specify whether the "bx--form-item" style should be applied
+   */
   formItem: { type: Boolean, default: true },
+  /**
+   * Specify whether the "bx--checkbox--inline" style should be applied
+   */
   inline: { type: Boolean, default: false },
+  /**
+   * Specify whether the Checkbox should be disabled
+   */
+  disabled: { type: Boolean, default: false },
   ...propsCvCheck,
   ...propsCvId,
 });

package/src/components/CvCheckbox/CvCheckboxSkeleton.vue

@@ -0,0 +1,16 @@
+<template>
+  <div
+    class="cv-checkbox"
+    :class="`${carbonPrefix}--form-item ${carbonPrefix}--checkbox-wrapper`"
+  >
+    <label :class="`${carbonPrefix}--checkbox-label ${carbonPrefix}--skeleton`">
+      <span
+        :class="`${carbonPrefix}--checkbox-label-text ${carbonPrefix}--skeleton`"
+      ></span>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvCheckbox/__tests__/__snapshots__/CvCheckboxSkeleton.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvCheckboxSkeleton renders checkbox skeleton 1`] = `<div class="cv-checkbox bx--form-item bx--checkbox-wrapper"><label class="bx--checkbox-label bx--skeleton"><span class="bx--checkbox-label-text bx--skeleton"></span></label></div>`;

package/src/components/CvCheckbox/index.js

@@ -1,3 +1,4 @@
 import CvCheckbox from './CvCheckbox.vue';
-export { CvCheckbox };
+import CvCheckboxSkeleton from './CvCheckboxSkeleton.vue';
+export { CvCheckbox, CvCheckboxSkeleton };
 export default CvCheckbox;

package/src/components/CvDropdown/CvDropdown.vue

@@ -325,8 +325,6 @@ const wrapperStyleOverride = computed(() => {
 });
 const el = ref(null);
 function onClickOut() {
-  // eslint-disable-next-line no-console
-  console.log('onClickOut');
   open.value = false;
 }
 onClickOutside(el, onClickOut);

package/src/components/CvFileUploader/CvFileUploader.stories.mdx

@@ -0,0 +1,333 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { CvFileUploader, CvFileUploaderSkeleton } from '.';
+import { KINDS } from './const';
+import { action } from '@storybook/addon-actions';
+import { nextTick, ref } from 'vue';
+import { Add16 } from '@carbon/icons-vue';
+import { buttonKinds, buttonSizes } from '../CvButton/consts';
+
+<Meta title={`${sbCompPrefix}/CvFileUploader`} component={CvFileUploader} />
+
+export const Template = args => ({
+  components: {
+    CvFileUploader,
+    CvFileUploaderSkeleton,
+    Add16
+  },
+  setup() {
+    return {
+      slotContent: args.slot,
+      args: {
+        ...args,
+        template: undefined,
+      },
+    };
+  },
+  template: args.template,
+});
+const defaultTemplate = `
+  <div style="display: inline-flex; align-items: flex-start;">
+    <cv-file-uploader v-bind="args" />
+  </div>
+`;
+const slotTemplate = `
+  <div style="display: inline-flex; align-items: flex-start;">
+    <cv-file-uploader v-bind="args">
+      <template v-slot:drop-target>
+        <Add16 />
+        <span>File Drop</span>
+        <Add16 />
+      </template>
+    </cv-file-uploader>
+  </div>
+`;
+const skeletonTemplate = `
+  <div style="display: inline-flex; align-items: flex-start;">
+    <cv-file-uploader-skeleton />
+  </div>
+`;
+
+export const args = {
+  // attributes
+  multiple: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'attributes',
+    },
+    description: 'standard input attribute for file type, allow multiple files to be added in a single prompt',
+  },
+  // props
+  accept: {
+    type: 'string',
+    table: {
+      type: { summary: 'string' },
+      category: 'props',
+    },
+    description: 'standard input attribute for file type',
+  },
+  buttonKind: {
+    control: 'select',
+    options: buttonKinds,
+    defaultValue: 'primary',
+    table: {
+      type: { summary: 'string' },
+      category: 'props',
+      defaultValue: { summary: 'primary' },
+    },
+    description: 'Button kind',
+  },
+  buttonLabel: {
+    type: 'string',
+    deprecated: true,
+    table: {
+      type: { summary: 'string' },
+      category: 'props',
+    },
+    description: '`button-label` prop deprecated in favour of drop-target-label',
+  },
+  buttonSize: {
+    control: 'select',
+    options: buttonSizes,
+    defaultValue: '',
+    table: {
+      type: { summary: 'string' },
+      category: 'props',
+      defaultValue: { summary: '' },
+    },
+    description: 'Button size',
+  },
+  clearOnReselect: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'props',
+    },
+    description: 'Reset file list when files are added',
+  },
+  dropTargetLabel: {
+    type: 'string',
+    table: {
+      type: { summary: 'string' },
+      category: 'props',
+    },
+    description: "Drag & drop zone label. Also used as button label for button kind file uploader",
+  },
+  helperText: {
+    type: 'string',
+    table: {
+      type: { summary: 'string' },
+      category: 'props',
+    },
+    description: 'Helper text positioned below label',
+  },
+  kind: {
+    type: 'string',
+    control: 'select',
+    defaultValue: KINDS.DRAG_TARGET,
+    options: [KINDS.DRAG_TARGET, KINDS.BUTTON],
+    table: {
+      type: { summary: `${KINDS.DRAG_TARGET} | ${KINDS.BUTTON}` },
+      category: 'props',
+      defaultValue: { summary: KINDS.DRAG_TARGET },
+    },
+    description: 'Kind of file uploader to present',
+  },
+  label: {
+    table: {
+      type: { summary: 'text' },
+      category: 'props',
+    },
+    description: 'File input label',
+  },
+  removable: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'props',
+    },
+    description: 'Enable file items remove button',
+  },
+  removeAriaLabel: {
+    type: 'string',
+    defaultValue: 'Remove selected file',
+    table: {
+      type: { summary: 'string' },
+      category: 'props',
+      defaultValue: { summary: 'Remove selected file' },
+    },
+    description: 'Aria label for item remove button',
+  },
+  // exposed methods
+  clear: {
+    control: 'none',
+    type: 'function',
+    table: {
+      type: { summary: '() => void' },
+      category: 'exposed methods',
+    },
+    description: 'Clear file list',
+  },
+  remove: {
+    control: 'none',
+    type: 'function',
+    table: {
+      type: { summary: '(index: number) => void' },
+      category: 'exposed methods',
+    },
+    description: 'Removes an individual file',
+  },
+  setState: {
+    control: 'none',
+    type: 'function',
+    table: {
+      type: { summary: '(index: number, state: string) => void' },
+      category: 'exposed methods',
+    },
+    description: 'Update the "state" field of a file. State must be `""`, `complete` or `loading`',
+  },
+  setInvalidMessage: {
+    control: 'none',
+    type: 'function',
+    table: {
+      type: { summary: '(index: number, invalidMessage: string) => void' },
+      category: 'exposed methods',
+    },
+    description: 'Update the "invalidMessage" field of a file.',
+  },
+  // slots
+  'drop-target': {
+    control: 'none',
+    type: 'string',
+    table: {
+      type: { summary: 'string | HTML | Component' },
+      category: 'slots',
+    },
+    description: 'Overrides the drop-target-label with slotted content',
+  },
+};
+
+# CvFileUploader
+
+Migration notes:
+
+- The `v-model` is different in Vue 3 than Vue 2. You can still specify the `v-model="something"` for two way data bind,
+  but the value property is now `modelValue` instead of `files` and event linked to v-model is `update:modelValue`.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'template',
+          'props',
+          'modelValue',
+          'update:modelValue',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      label: 'Choose files to upload',
+      helperText: 'Select the files you want to upload',
+      removable: true,
+    }}
+    argTypes={args}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# CvFileUploader Button
+
+<Canvas>
+  <Story
+    name="FilerUploader Button"
+    parameters={{
+      controls: {
+        exclude: [
+          'template',
+          'props',
+          'modelValue',
+          'update:modelValue',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      label: 'Choose files to upload',
+      helperText: 'Select the files you want to upload',
+      kind: KINDS.BUTTON,
+      removable: true,
+    }}
+    argTypes={{
+      ...args,
+      kind: {
+        ...args.kind,
+        control: 'none',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# CvFileUploader Slotted
+
+<Canvas>
+  <Story
+    name="Slot"
+    parameters={{
+      controls: {
+        exclude: [
+          'template',
+          'props',
+          'modelValue',
+          'update:modelValue',
+        ],
+      },
+      docs: { source: { code: slotTemplate } },
+    }}
+    args={{
+      template: slotTemplate,
+      label: 'Choose files to upload',
+      helperText: 'Select the files you want to upload',
+      removable: true,
+    }}
+    argTypes={{
+      ...args,
+      kind: {
+        ...args.kind,
+        control: 'none',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# CvFileUploaderSkeleton
+
+<Canvas>
+  <Story
+    name="Skeleton"
+    parameters={{
+      controls: {
+        exclude: [
+          'template',
+        ],
+      },
+      docs: { source: { code: skeletonTemplate } },
+    }}
+    args={{
+      template: skeletonTemplate,
+    }}
+    argTypes={{}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>