@carbon/vue 3.0.13 → 3.0.14

package/src/components/CvProgress/CvProgress.stories.mdx

@@ -4,6 +4,19 @@ import { Time20 as TimeIcon } from '@carbon/icons-vue';
 // noinspection ES6PreferShortImport
 import { sbCompPrefix } from '../../global/storybook-utils';
 import { action } from '@storybook/addon-actions';
+import {ref } from "vue";
+const step3Invalid = ref(false)
+const step4Disable = ref(false)
+const step5Complete = ref(false)
+function onStep4Disable() {
+  step4Disable.value = !step4Disable.value
+}
+function onStep3Invalid() {
+  step3Invalid.value = !step3Invalid.value
+}
+function onStep5Complete() {
+  step5Complete.value = !step5Complete.value
+}
 
 <Meta title={`${sbCompPrefix}/CvProgress`} component={CvProgress} />
 
@@ -31,6 +44,12 @@ export const Template = args => ({
       invalidIds: args.invalidIds,
       disabledIds: args.disabledIds,
       onStepClicked: action('step-clicked'),
+      step3Invalid,
+      onStep3Invalid,
+      step4Disable,
+      onStep4Disable,
+      step5Complete,
+      onStep5Complete,
     };
   },
   // And then the `args` are bound to your component with `v-bind="args"`
@@ -79,7 +98,7 @@ const slotTemplate = `
       id="step-3"
       :label="step3"
       :complete="completeIds.includes('step-3')"
-      :invalid="invalidIds.includes('step-3')"
+      :invalid="step3Invalid"
       :disabled="disabledIds.includes('step-3')"
       additionalInfo="save the world"
       @step-clicked="onStepClicked"
@@ -90,7 +109,7 @@ const slotTemplate = `
       :label="step4"
       :complete="completeIds.includes('step-4')"
       :invalid="invalidIds.includes('step-4')"
-      :disabled="disabledIds.includes('step-4')"
+      :disabled="step4Disable"
       additionalInfo="Twins Dennys and Sandy"
       @step-clicked="onStepClicked"
       >
@@ -98,7 +117,7 @@ const slotTemplate = `
     <cv-progress-step
       id="step-5"
       :label="step5"
-      :complete="completeIds.includes('step-5')"
+      :complete="step5Complete"
       :invalid="invalidIds.includes('step-5')"
       :disabled="disabledIds.includes('step-5')"
       additionalInfo="with Polyhymnia O'Keefe"
@@ -106,6 +125,9 @@ const slotTemplate = `
       >
     </cv-progress-step>
   </cv-progress>
+  <div><button @click=onStep3Invalid>Toggle step 3 invalid</button></div>
+  <div><button @click=onStep4Disable>Toggle step 4 disabled</button></div>
+  <div><button @click=onStep5Complete>Toggle step 5 complete</button></div>
 `;
 const skeletonTemplate = `<cv-progress-skeleton :vertical="vertical" />`;
 
@@ -187,15 +209,15 @@ Use `cv-progress-step` for more control over the display.
       },
       disabledIds: {
         control: 'multi-select',
-        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+        options: ['step-1', 'step-2', 'step-3', 'step-5'],
       },
       completeIds: {
         control: 'multi-select',
-        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+        options: ['step-1', 'step-2', 'step-3', 'step-4'],
       },
       invalidIds: {
         control: 'multi-select',
-        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+        options: ['step-1', 'step-2', 'step-4', 'step-5'],
       },
     }}
   >
@@ -221,4 +243,4 @@ Use `cv-progress-step` for more control over the display.
   >
     {Template.bind({})}
   </Story>
-</Canvas>
+</Canvas>

package/src/components/CvProgress/CvProgress.vue

@@ -75,4 +75,5 @@ function updateSteps() {
 }
 onMounted(updateSteps);
 watch(() => props.initialStep, updateSteps);
+watch(progressSteps, updateSteps);
 </script>

package/src/components/CvProgress/CvProgressStep.vue

@@ -106,6 +106,8 @@ function checkCurrentStep() {
 onMounted(checkCurrentStep);
 watch(currentStep, checkCurrentStep);
 watch(completedSteps, checkCurrentStep);
+watch(() => props.complete, checkCurrentStep);
+watch(() => props.disabled, checkCurrentStep);
 
 onBeforeUnmount(() => {
   const index = progressSteps.value.findIndex(step => step.uid === uid.value);

package/src/components/CvSlider/CvSlider.vue

@@ -76,7 +76,7 @@
           { [`${carbonPrefix}--text-input--light`]: isLight },
         ]"
         :placeholder="min"
-        :disabled="disabled"
+        :disabled="disabled || null"
         @change="onChange"
         @keydown.up.prevent="onUp"
         @keydown.down.prevent="onDown"

package/src/components/CvTag/CvTag.vue

@@ -8,7 +8,7 @@
       v-if="filter"
       :class="`${carbonPrefix}--tag__close-icon`"
       :aria-label="clearAriaLabel"
-      :disabled="disabled"
+      :disabled="disabled || null"
       @click.stop.prevent="onRemove"
     >
       <Close16 />

package/telemetry.yml

@@ -0,0 +1,8 @@
+# yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
+
+version: 1
+projectId: 084968c7-d247-4ddb-bc07-cbdbe57fdd43
+endpoint: https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics
+collect:
+  npm:
+    dependencies: null