@carbon/vue 3.0.9-alpha.0 → 3.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.9-alpha.0",
+  "version": "3.0.9",
   "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",
@@ -206,5 +206,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "39dd5beb19a710758bd9c2b44a413f9cc296d31b"
+  "gitHead": "746ba85d1d2060314ea9bb7f8ae9c45783572efc"
 }

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

@@ -48,7 +48,7 @@ const skeletonTemplate = `
   </div>
 `;
 
-export const args = {
+export const argTypes = {
   // attributes
   multiple: {
     type: 'boolean',
@@ -61,6 +61,7 @@ export const args = {
   // props
   accept: {
     type: 'string',
+    defaultValue: '.jpg,.png',
     table: {
       type: { summary: 'string' },
       category: 'props',
@@ -106,6 +107,14 @@ export const args = {
     },
     description: 'Reset file list when files are added',
   },
+  disabled: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'props',
+    },
+    description: 'Disables input',
+  },
   dropTargetLabel: {
     type: 'string',
     table: {
@@ -122,6 +131,14 @@ export const args = {
     },
     description: 'Helper text positioned below label',
   },
+  initialStateUploading: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'props',
+    },
+    description: 'Set "UPLOADING" state to new files',
+  },
   kind: {
     type: 'string',
     control: 'select',
@@ -235,7 +252,7 @@ Migration notes:
       helperText: 'Select the files you want to upload',
       removable: true,
     }}
-    argTypes={args}
+    argTypes={argTypes}
   >
     {Template.bind({})}
   </Story>
@@ -263,11 +280,12 @@ Migration notes:
       helperText: 'Select the files you want to upload',
       kind: KINDS.BUTTON,
       removable: true,
+      dropTargetLabel: 'Add file',
     }}
     argTypes={{
-      ...args,
+      ...argTypes,
       kind: {
-        ...args.kind,
+        ...argTypes.kind,
         control: 'none',
       },
     }}
@@ -299,9 +317,9 @@ Migration notes:
       removable: true,
     }}
     argTypes={{
-      ...args,
+      ...argTypes,
       kind: {
-        ...args.kind,
+        ...argTypes.kind,
         control: 'none',
       },
     }}

package/src/components/CvFileUploader/CvFileUploader.vue

@@ -1,11 +1,28 @@
 <template>
   <cv-form-item class="cv-file-uploader">
-    <p :class="`${carbonPrefix}--file--label`">{{ label }}</p>
-    <p :class="`${carbonPrefix}--label-description`">{{ helperText }}</p>
+    <p
+      :class="[
+        `${carbonPrefix}--file--label`,
+        { [`${carbonPrefix}--file--label--disabled`]: disabled },
+      ]"
+    >
+      {{ label }}
+    </p>
+    <p
+      :class="[
+        `${carbonPrefix}--label-description`,
+        { [`${carbonPrefix}--label-description--disabled`]: disabled },
+      ]"
+    >
+      {{ helperText }}
+    </p>
     <div v-if="kind === 'button'" :class="`${carbonPrefix}--file`" data-file>
       <label
         :for="cvId"
-        :class="buttonClasses"
+        :class="[
+          buttonClasses,
+          { [`${carbonPrefix}--btn--disabled`]: disabled },
+        ]"
         tabindex="0"
         @keydown.enter.prevent="onKeyHit"
         @keydown.space.prevent="onKeyHit"
@@ -17,6 +34,7 @@
         ref="fileInput"
         :class="`${carbonPrefix}--file-input`"
         :accept="accept"
+        :disabled="disabled"
         type="file"
         v-bind="$attrs"
         data-file-uploader
@@ -34,8 +52,10 @@
             `${carbonPrefix}--file-browse-btn`,
             `${carbonPrefix}--file__drop-container`,
             {
-              [`${carbonPrefix}--file__drop-container--drag-over`]: allowDrop,
+              [`${carbonPrefix}--file__drop-container--drag-over`]:
+                allowDrop && !disabled,
             },
+            { [`${carbonPrefix}--file-browse-btn--disabled`]: disabled },
           ]"
           @dragover="onDragEvent"
           @dragleave="onDragEvent"
@@ -50,6 +70,7 @@
           ref="fileInput"
           :class="`${carbonPrefix}--file-input`"
           :accept="accept"
+          :disabled="disabled"
           type="file"
           v-bind="$attrs"
           tabindex="-1"
@@ -107,8 +128,10 @@ const props = defineProps({
   },
   buttonSize: commonCvButtonProps.size,
   clearOnReselect: Boolean,
+  disabled: Boolean,
   dropTargetLabel: String,
   helperText: String,
+  initialStateUploading: Boolean,
   kind: {
     type: String,
     default: KINDS.DRAG_TARGET,
@@ -178,7 +201,7 @@ function addFiles(files) {
     const newFile = createInternalFile(internalFile?.file || file);
 
     if (internalFile) {
-      internalFile.state = newFile.initialState;
+      internalFile.state = newFile.state;
       internalFile.invalidMessageTitle = newFile.invalidMessageTitle;
       internalFile.invalidMessage = newFile.invalidMessage;
     } else {
@@ -216,6 +239,11 @@ function onChange(ev) {
 }
 
 function onDragEvent(evt) {
+  if (props.disabled) {
+    evt.preventDefault();
+    return;
+  }
+
   if (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') === -1) {
     return;
   }
@@ -249,7 +277,7 @@ function onDragEvent(evt) {
 
 function onItemRemove(index) {
   internalFiles.value.splice(index, 1);
-  emit('update:modelValue', this.internalFiles);
+  emit('update:modelValue', internalFiles.value);
 }
 
 function onKeyHit() {
@@ -262,20 +290,31 @@ onMounted(() => {
 });
 
 // exposed methods
+function clear() {
+  internalFiles.value = [];
+  emit('update:modelValue', internalFiles.value);
+}
+
+function remove(index) {
+  onItemRemove(index);
+}
+
+function setInvalidMessage(index, message) {
+  internalFiles.value[index].invalidMessage = message;
+}
+
+function setState(index, state) {
+  if ([STATES.COMPLETE, STATES.UPLOADING, STATES.NONE].includes(state)) {
+    internalFiles.value[index].state = state;
+  }
+}
+
+// exposing methods
 defineExpose({
-  setState(index, state) {
-    if ([STATES.COMPLETE, STATES.UPLOADING, STATES.NONE].includes(state)) {
-      internalFiles.value[index].state = state;
-    }
-  },
-  clear() {
-    internalFiles.value = [];
-    emit('update:modelValue', internalFiles);
-  },
-  setInvalidMessage(index, message) {
-    internalFiles.value[index].invalidMessage = message;
-  },
-  remove: onItemRemove,
+  clear,
+  remove,
+  setInvalidMessage,
+  setState,
 });
 </script>
 

package/src/components/CvTabs/CvTabs.stories.mdx

@@ -5,6 +5,7 @@ import CvTab from './CvTab.vue';
 import CvTabsSkeleton from './CvTabsSkeleton.vue';
 import SbContainer from './_SbContainer.vue';
 import { action } from '@storybook/addon-actions';
+import { IbmSecurity20 as SampleIcon } from '@carbon/icons-vue';
 
 <Meta
   title={`${sbCompPrefix}/CvTabs`}
@@ -23,6 +24,7 @@ export const Template = args => ({
     CvTabs,
     CvTab,
     CvTabsSkeleton,
+    SampleIcon,
   },
   // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
@@ -31,6 +33,7 @@ export const Template = args => ({
       noDefaultToFirst: args.noDefaultToFirst,
       selectedId: args.selectedId,
       disabledIds: args.disabledIds,
+      slottedTabs: args.slottedTabs,
       onTabSelected: action('tab-selected'),
       onTabSelectedId: action('tab-selected-id'),
     };
@@ -46,20 +49,47 @@ const defaultTemplate = `
   @tab-selected-id="onTabSelectedId"
   aria-label="navigation tab label">
     <cv-tab id="tab-1" label="House" :selected="selectedId === 'tab-1'" :disabled="disabledIds.includes('tab-1')">
-      <p>
+      <p v-if="slottedTabs">
+        To customise tab look, in CvTabs component use scoped slot named with tab's id.
+        Example: current tab has id "<strong>tab-1</strong>", so the code for customising tab looks like:
+        <div style="background-color: lightgrey; padding: 0.5rem;">
+          &lt;template #tab-1="tab"&gt;
+            {&nbsp;{ tab.label }&nbsp;} &lt;IbmSecurity20 /&gt;
+          &lt;template&gt;
+        </div>
+      </p>
+      <p v-else>
         29 Arlington Avenue is a house in Islington, London. Douglas Adams shared the house for a time
         with Jonny Brock and Clare Gorst. It is mentioned in the dedication of The Hitchhiker's Guide to
         the Galaxy, which is dedicated to the "Arlingtonians for tea, sympathy, and a sofa."
       </p>
     </cv-tab>
     <cv-tab id="tab-2" label="Bar" :selected="selectedId === 'tab-2'" :disabled="disabledIds.includes('tab-2')">
-      <p>
+      <p v-if="slottedTabs">
+        To customise tab look, in CvTabs component use scoped slot named with tab's id.
+        Example: current tab has id "<strong>tab-2</strong>", so the code for customising tab looks like:
+        <div style="background-color: lightgrey; padding: 0.5rem;">
+          &lt;template #tab-2="tab"&gt;
+            {&nbsp;{ tab.label }&nbsp;} &lt;strong style="color: red;"&gt;(*)&lt;/strong&gt;
+          &lt;template&gt;
+        </div>
+      </p>
+      <p v-else>
         The Old Pink Dog Bar was the bar in Han Dold City that Ford Prefect was in when he discovered
         that his Guide had his full entry on Earth on it.
       </p>
     </cv-tab>
     <cv-tab id="tab-3" label="Reach" :selected="selectedId === 'tab-3'" :disabled="disabledIds.includes('tab-3')">
-      <p>
+      <p v-if="slottedTabs">
+        To customise tab look, in CvTabs component use scoped slot named with tab's id.
+        Example: current tab has id "<strong>tab-3</strong>", so the code for customising tab looks like:
+        <div style="background-color: lightgrey; padding: 0.5rem;">
+          &lt;template #tab-3="tab"&gt;
+            {&nbsp;{ tab.label }&nbsp;} &lt;strong style="color: orange;"&gt;(!)&lt;/strong&gt;
+          &lt;template&gt;
+        </div>
+      </p>
+      <p v-else>
         The Third Reach of the Unknown is what might be loosely described as a "place" which exists only
         under high improbability conditions and was created on the starship Heart of Gold due to the
         Infinite Improbability Drive. During Arthur Dent and Ford Prefect's first trip on board the Heart
@@ -81,6 +111,15 @@ const defaultTemplate = `
         <a target='_blank' href='https://hitchhikers.fandom.com/wiki/Main_Page'>credits</a>
       </p>
     </cv-tab>
+    <template v-if="slottedTabs" #tab-1="tab">
+      House <SampleIcon/>
+    </template>
+    <template v-if="slottedTabs" #tab-2="tab">
+      {{tab.label}} <strong style="color: red;">(*)</strong>
+    </template>
+    <template v-if="slottedTabs" #tab-3="tab">
+      {{tab.label}} <strong style="color: orange;">(!)</strong>
+    </template>
 </cv-tabs>
 `;
 const skeletonTemplate = `<cv-tabs-skeleton></cv-tabs-skeleton>`;
@@ -173,3 +212,45 @@ screens, and so I suggest using a different component for mobile cases.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+# Tabs slotted
+
+<Canvas>
+  <Story
+    name="tabsSlot"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'leftOverflowIconButtonProps',
+          'rightOverflowIconButtonProps',
+          'scrollIntoView',
+          'tab-selected',
+          'tab-selected-id',
+          'slottedTabs',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      selectedId: '',
+      disabledIds: [],
+      slottedTabs: true
+    }}
+    argTypes={{
+      selectedId: {
+        control: 'select',
+        default: '',
+        options: ['', 'tab-1', 'tab-2', 'tab-3', 'tab-4', 'tab-5'],
+      },
+      disabledIds: {
+        control: 'multi-select',
+        options: ['tab-1', 'tab-2', 'tab-3', 'tab-4', 'tab-5'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvTabs/CvTabs.vue

@@ -76,7 +76,9 @@
             :tabindex="selectedId === tab.uid ? 0 : -1"
             type="button"
           >
-            {{ tab.label }}
+            <slot :name="tab.uid" v-bind="tab">
+              {{ tab.label }}
+            </slot>
           </button>
         </li>
       </ul>

package/src/components/CvTabs/__tests__/__snapshots__/CvTabs.spec.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvTabs CvTabs - test slotted tab buttons to match snapshot 1`] = `
+<div class="cv-tabs ABC-class-123" style="width: 100%;" aria-label="ABC-aria-label-123">
+  <div data-tabs="" class="cv-tab bx--tabs--scrollable ABC-class-123" role="navigation" aria-label="ABC-aria-label-123"><button aria-hidden="true" aria-label="scroll left" class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+        <path d="M5 8L10 3 10.7 3.7 6.4 8 10.7 12.3 10 13z"></path>
+      </svg></button>
+    <!--v-if-->
+    <ul class="bx--tabs--scrollable__nav" role="tablist">
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected" role="presentation"><button class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-1" aria-disabled="false" aria-selected="true" id="tab-1-link" tabindex="0" type="button">Hello <strong style="color: red;">(*)</strong></button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-2" aria-disabled="false" aria-selected="false" id="tab-2-link" tabindex="-1" type="button">Origin<strong style="color: orange;">(!)</strong></button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-3" aria-disabled="false" aria-selected="false" id="tab-3-link" tabindex="-1" type="button">Tab 3 label</button></li>
+    </ul>
+    <!--v-if--><button aria-hidden="true" aria-label="scroll right" class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+        <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>
+      </svg></button>
+  </div>
+  <div class="cv-tabs__panels">
+    <div class="cv-tab bx--tab-content" id="tab-1" role="tabpanel" aria-labelledby="tab-1-link" aria-hidden="false">Tab 1 content</div>
+    <div class="cv-tab bx--tab-content" id="tab-2" role="tabpanel" aria-labelledby="tab-2-link" aria-hidden="true" hidden="">Tab 2 content</div>
+    <div class="cv-tab bx--tab-content" id="tab-3" role="tabpanel" aria-labelledby="tab-3-link" aria-hidden="true" hidden="">Tab 3 content</div>
+  </div>
+</div>
+`;

package/src/components/CvTag/CvTag.stories.js

@@ -14,7 +14,7 @@ export default {
   },
 };
 
-const template = `<CvTag @remove="onRemove" v-bind="args" />`;
+const template = `<cv-tag @remove="onRemove" v-bind="args" />`;
 const Template = (args, { argTypes }) => {
   return {
     props: Object.keys(argTypes),
@@ -56,6 +56,7 @@ Filter.parameters = storyParametersObject(
 export const Skeleton = Template.bind({});
 Skeleton.args = {
   skeleton: true,
+  label: '',
 };
 Skeleton.parameters = storyParametersObject(
   Skeleton.parameters,

package/src/components/CvTag/CvTag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="skeleton" :class="tagClasses" />
+  <div v-if="skeleton" :class="tagClasses"></div>
   <div v-else :class="tagClasses" role="listitem" :title="title">
     <span :class="`${carbonPrefix}--tag__label`">
       {{ label }}
@@ -56,6 +56,10 @@ export default {
      * skeleton used when loading
      */
     skeleton: Boolean,
+    /**
+     * tag size small
+     */
+    small: Boolean,
   },
   emits: [
     /**
@@ -69,14 +73,15 @@ export default {
     });
 
     const tagClasses = computed(() => {
-      const classes = [
-        `${carbonPrefix}--tag`,
-        `${carbonPrefix}--tag--${props.kind}`,
-      ];
+      const classes = [`${carbonPrefix}--tag`];
+
+      if (props.small) classes.push(`${carbonPrefix}--tag--sm`);
 
       if (props.skeleton) {
         classes.push(`${carbonPrefix}--skeleton`);
       } else {
+        classes.push(`${carbonPrefix}--tag--${props.kind}`);
+
         if (props.filter) {
           classes.push(`${carbonPrefix}--tag--filter`);
         }

package/src/components/CvTag/CvTagSkeleton.stories.js

@@ -0,0 +1,39 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import CvTagSkeleton from './CvTagSkeleton.vue';
+
+export default {
+  title: `${sbCompPrefix}/CvTagSkeleton`,
+  component: CvTagSkeleton,
+};
+
+const template = `<cv-tag-skeleton v-bind="args"></cv-tag-skeleton>`;
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvTagSkeleton },
+    template,
+    setup() {
+      return { args };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const Small = Template.bind({});
+Small.args = {
+  small: true,
+};
+Small.parameters = storyParametersObject(
+  Small.parameters,
+  template,
+  Small.args
+);

package/src/components/CvTag/CvTagSkeleton.vue

@@ -0,0 +1,20 @@
+<template>
+  <CvTag skeleton :small="small" :label="''" />
+</template>
+
+<script>
+import CvTag from './CvTag.vue';
+
+export default {
+  name: 'CvTagSkeleton',
+  components: { CvTag },
+  props: {
+    /**
+     * tag size small
+     */
+    small: {
+      type: Boolean,
+    },
+  },
+};
+</script>

package/src/components/CvTag/index.js

@@ -1,5 +1,6 @@
 import CvTag from './CvTag.vue';
 import CvTagConsts from './consts';
+import CvTagSkeleton from './CvTagSkeleton.vue';
 
-export { CvTag, CvTagConsts };
+export { CvTag, CvTagConsts, CvTagSkeleton };
 export default CvTag;