diff --git a/src/components/CvStructuredList/CvStructuredList.stories.js b/src/components/CvStructuredList/CvStructuredList.stories.js index f52bd8a63..8e2b287ed 100644 --- a/src/components/CvStructuredList/CvStructuredList.stories.js +++ b/src/components/CvStructuredList/CvStructuredList.stories.js @@ -1,3 +1,5 @@ +import { action } from '@storybook/addon-actions'; +import { ref } from 'vue'; import { sbCompPrefix, storyParametersObject, @@ -43,42 +45,60 @@ export default { }, }; +const DefaultListItems = [ + { + id: 'item-1', + data: [ + 'Item_1', + 'Item_1', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.', + ], + }, + { + id: 'item-2', + data: [ + 'Item_2', + 'Item_2', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.', + ], + }, +]; + const template = ` - - +
+ + - - +
+
Sample interaction
+ + +
Checked: {{ listValue }}
+
+
`; const Template = args => { @@ -89,7 +109,10 @@ const Template = args => { CvStructuredListData, CvStructuredListItem, }, - setup: () => ({ args }), + setup: () => ({ + args, + DefaultListItems, + }), template, }; }; @@ -101,3 +124,32 @@ Default.parameters = storyParametersObject( template, Default.args ); + +const VModelTemplate = args => { + return { + components: { + CvStructuredList, + CvStructuredListHeading, + CvStructuredListData, + CvStructuredListItem, + }, + setup: () => ({ + args, + listValue: ref(DefaultListItems[0].id), + DefaultListItems, + onChange: action('change'), + withVModel: true, + }), + template, + }; +}; + +export const VModel = VModelTemplate.bind({}); +VModel.args = { + selectable: true, +}; +VModel.parameters = storyParametersObject( + VModel.parameters, + template, + VModel.args +); diff --git a/src/components/CvStructuredList/CvStructuredList.vue b/src/components/CvStructuredList/CvStructuredList.vue index 35cbfd2af..18987945c 100644 --- a/src/components/CvStructuredList/CvStructuredList.vue +++ b/src/components/CvStructuredList/CvStructuredList.vue @@ -38,9 +38,6 @@ const props = defineProps({ const emit = defineEmits(['change']); provide('change', val => { - console.log('CvStructuredListItem change: ', { - val, - }); emit('change', val); }); provide('selectable', props.selectable); diff --git a/src/components/CvStructuredList/CvStructuredListItem.vue b/src/components/CvStructuredList/CvStructuredListItem.vue index 67ab1c6b2..4e3c90c7c 100644 --- a/src/components/CvStructuredList/CvStructuredListItem.vue +++ b/src/components/CvStructuredList/CvStructuredListItem.vue @@ -11,7 +11,7 @@ diff --git a/src/use/useRadio.js b/src/use/useRadio.js index bc572de5b..6882e459d 100644 --- a/src/use/useRadio.js +++ b/src/use/useRadio.js @@ -13,9 +13,6 @@ export const useRadio = (props, emit) => { const onChange = () => { onRadioItemChange(props.value); // emit to parent - console.log('useRadio onChange: ', { - value: props.value, - }); emit('update:modelValue', props.value); // emit for v-model emit('change', props.value); };