diff --git a/src/components/CvAccordion/CvAccordion.stories.mdx b/src/components/CvAccordion/CvAccordion.stories.mdx
index bb49a4ec1..cec9004dc 100644
--- a/src/components/CvAccordion/CvAccordion.stories.mdx
+++ b/src/components/CvAccordion/CvAccordion.stories.mdx
@@ -13,6 +13,11 @@ const open = ref({
accItem3: false,
accItem4: false,
});
+const disabledItems = ref(new Set())
+function onToggleEpisode3(){
+ if (disabledItems.value.has(3)) disabledItems.value.delete(3)
+ else disabledItems.value.add(3)
+}
@@ -24,19 +29,23 @@ export const Template = args => ({
align: alignConsts[alignConsts.$labels[args.align]],
size: sizeConsts[sizeConsts.$labels[args.size]],
onChange: action('change'),
+ disabledItems,
+ onToggleEpisode3,
open,
};
},
template: args.template,
});
const template = `
-
+
Episode {{n}}
Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? R2! R2-D2, where are you? At last! Where have you been? They're heading in this direction.
- `;
+
+
Disable Episode 3
+`;
const Default = Template.bind({});
Default.args = {};
Default.parameters = storyParametersObject(
diff --git a/src/components/CvAccordion/CvAccordionItem.vue b/src/components/CvAccordion/CvAccordionItem.vue
index a595f4b59..133ec7697 100644
--- a/src/components/CvAccordion/CvAccordionItem.vue
+++ b/src/components/CvAccordion/CvAccordionItem.vue
@@ -15,7 +15,7 @@
>
{{ label }}
diff --git a/src/components/CvComboBox/CvComboBox.vue b/src/components/CvComboBox/CvComboBox.vue
index ebc73864c..39852ec05 100644
--- a/src/components/CvComboBox/CvComboBox.vue
+++ b/src/components/CvComboBox/CvComboBox.vue
@@ -62,7 +62,7 @@
:aria-disabled="disabled || null"
:aria-expanded="open ? 'true' : 'false'"
autocomplete="off"
- :disabled="disabled"
+ :disabled="disabled || null"
:placeholder="label"
@input="onInput"
@focus="inputFocus"
diff --git a/src/components/CvDropdown/CvDropdown.vue b/src/components/CvDropdown/CvDropdown.vue
index ba2486004..759b7b33a 100644
--- a/src/components/CvDropdown/CvDropdown.vue
+++ b/src/components/CvDropdown/CvDropdown.vue
@@ -77,7 +77,7 @@
:aria-expanded="open ? 'true' : 'false'"
:aria-labelledby="ariaLabeledBy"
:class="`${carbonPrefix}--list-box__field`"
- :disabled="disabled"
+ :disabled="disabled || null"
aria-haspopup="true"
type="button"
>
@@ -293,9 +293,9 @@ watch(open, () => {
});
const ariaLabeledBy = computed(() => {
if (props.label) {
- return `${uid}-label ${uid}-value`;
+ return `${uid.value}-label ${uid.value}-value`;
} else {
- return `${uid}-value`;
+ return `${uid.value}-value`;
}
});
const internalCaption = computed(() => {
diff --git a/src/components/CvFileUploader/CvFileUploader.vue b/src/components/CvFileUploader/CvFileUploader.vue
index e1ce89349..278a1ccaf 100644
--- a/src/components/CvFileUploader/CvFileUploader.vue
+++ b/src/components/CvFileUploader/CvFileUploader.vue
@@ -34,7 +34,7 @@
ref="fileInput"
:class="`${carbonPrefix}--file-input`"
:accept="accept"
- :disabled="disabled"
+ :disabled="disabled || null"
type="file"
v-bind="$attrs"
data-file-uploader
@@ -70,7 +70,7 @@
ref="fileInput"
:class="`${carbonPrefix}--file-input`"
:accept="accept"
- :disabled="disabled"
+ :disabled="disabled || null"
type="file"
v-bind="$attrs"
tabindex="-1"
diff --git a/src/components/CvNumberInput/CvNumberInput.vue b/src/components/CvNumberInput/CvNumberInput.vue
index 018de4173..592ac6bff 100644
--- a/src/components/CvNumberInput/CvNumberInput.vue
+++ b/src/components/CvNumberInput/CvNumberInput.vue
@@ -38,7 +38,7 @@
:data-invalid="isInvalid || null"
type="number"
v-bind="$attrs"
- :disabled="disabled"
+ :disabled="disabled || null"
:step="step"
:min="min"
:max="max"
@@ -53,7 +53,7 @@
:class="`${carbonPrefix}--number__control-btn down-icon`"
type="button"
:aria-label="ariaLabelForDownButton"
- :disabled="disabled"
+ :disabled="disabled || null"
aria-live="polite"
aria-atomic="true"
@click="doDown"
@@ -67,7 +67,7 @@
:class="`${carbonPrefix}--number__control-btn up-icon`"
type="button"
:aria-label="ariaLabelForUpButton"
- :disabled="disabled"
+ :disabled="disabled || null"
aria-live="polite"
aria-atomic="true"
@click="doUp"
diff --git a/src/components/CvOverflowMenu/CvOverflowMenuItem.vue b/src/components/CvOverflowMenu/CvOverflowMenuItem.vue
index 02d60e540..6ac2810a2 100644
--- a/src/components/CvOverflowMenu/CvOverflowMenuItem.vue
+++ b/src/components/CvOverflowMenu/CvOverflowMenuItem.vue
@@ -13,8 +13,8 @@
diff --git a/src/components/CvSlider/CvSlider.vue b/src/components/CvSlider/CvSlider.vue
index 88280f7de..f93688861 100644
--- a/src/components/CvSlider/CvSlider.vue
+++ b/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"
diff --git a/src/components/CvTag/CvTag.vue b/src/components/CvTag/CvTag.vue
index 3de29a22a..cae385261 100644
--- a/src/components/CvTag/CvTag.vue
+++ b/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"
>