feat: components finished

carbon-design-system · Aug 14, 2023 · fe7c255 · fe7c255
1 parent c4e0959
commit fe7c255
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 59 deletions.
diff --git 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 = `
-<cv-structured-list v-bind="args">
-  <template v-slot:headings>
-    <cv-structured-list-heading>
-      Heading 1
-    </cv-structured-list-heading>
-    <cv-structured-list-heading>
-      Heading 2
-    </cv-structured-list-heading>
-    <cv-structured-list-heading>
-      Heading 3
-    </cv-structured-list-heading>
-  </template>
+<div>
+  <cv-structured-list v-bind="args">
+    <template v-slot:headings>
+      <cv-structured-list-heading>
+        Heading 1
+      </cv-structured-list-heading>
+      <cv-structured-list-heading>
+        Heading 2
+      </cv-structured-list-heading>
+      <cv-structured-list-heading>
+        Heading 3
+      </cv-structured-list-heading>
+    </template>
 
-  <template v-slot:items>
-    <cv-structured-list-item>
-      <cv-structured-list-data v-bind="{noWrap: args.noWrap}">Item_1</cv-structured-list-data>
-      <cv-structured-list-data v-bind="{noWrap: args.noWrap}">Item_1</cv-structured-list-data>
-      <cv-structured-list-data v-bind="{noWrap: args.noWrap}"
-        >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.</cv-structured-list-data
-      >
-    </cv-structured-list-item>
+    <template v-slot:items>
+      <cv-structured-list-item v-for="({id, data}, index) in DefaultListItems" :key="index" name="group-1" :value="id" v-model="listValue" @change="onChange">
+        <cv-structured-list-data v-for="(itemData, dataIndex) in data" :key="dataIndex" :no-wrap="args.noWrap">{{ itemData }}</cv-structured-list-data>
+      </cv-structured-list-item>
+    </template>
+  </cv-structured-list>
 
-    <cv-structured-list-item>
-      <cv-structured-list-data v-bind="{noWrap: args.noWrap}">Item_2</cv-structured-list-data>
-      <cv-structured-list-data v-bind="{noWrap: args.noWrap}">Item_2</cv-structured-list-data>
-      <cv-structured-list-data v-bind="{noWrap: args.noWrap}"
-        >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.</cv-structured-list-data
-      >
-    </cv-structured-list-item>
-  </template>
-</cv-structured-list>
+  <div style="margin-top:1rem; background-color: #888888; padding:1rem" v-if="withVModel">
+    <div style="font-size: 150%">Sample interaction</div>
+    <template
+      v-for="({id}, vmodelIndex) in DefaultListItems"
+      :key="vmodelIndex"
+    >
+      <input name="listValue" :id="id" type="radio" @change="(ev) => {listValue = ev.target.id}" :checked="id === listValue" />
+      <label :for="id" style="margin-right: 16px;">{{id}}:</label>
+    </template>
+
+    <div style="margin-top: 16px;">Checked: <span style="font-weight: bold;">{{ listValue }}</span></div>
+  </div>
+</div>
 `;
 
 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
@@ -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
@@ -11,15 +11,15 @@
 </template>
 
 <script setup>
-import { computed, inject, provide, watch } from 'vue';
+import { computed, inject, provide } from 'vue';
 import CvStructuredListItemStandard from './CvStructuredListItemStandard.vue';
 import CvStructuredListItemSelectable from './CvStructuredListItemSelectable.vue';
 
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = defineProps({
+defineProps({
   modelValue: {
     type: String,
     default: undefined,
@@ -45,21 +45,4 @@ provide('onRadioItemChange', clickedItemCvId => {
   emit('change', clickedItemCvId);
   change(clickedItemCvId); //emit to parent
 });
-
-watch(
-  () => props.modelValue,
-  val => {
-    console.log('WATCH modelValue: ', {
-      val,
-    });
-  }
-);
-watch(
-  () => props.value,
-  val => {
-    console.log('WATCH value: ', {
-      val,
-    });
-  }
-);
 </script>
diff --git 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);
   };