Storybookのアクションを追加

aocm · Mar 10, 2021 · fdb8b44 · fdb8b44
1 parent 7a581d2
commit fdb8b44
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/front/quasar-app/src/components/molecules/TaskItem.stories.js b/front/quasar-app/src/components/molecules/TaskItem.stories.js
@@ -1,6 +1,6 @@
 
 import TaskItem from './TaskItem'
-// import { action } from '@storybook/addon-actions'
+import { action } from '@storybook/addon-actions'
 
 export default {
   title: 'TaskItem',
@@ -10,13 +10,15 @@ export default {
 }
 
 export const actionsData = {
+  onDelete: action('delete-emit'),
+  onDetail: action('detail-emit')
 }
 
 const Template = (args, { argTypes }) => ({
   components: { TaskItem },
   props: Object.keys(argTypes),
   methods: actionsData,
-  template: '<TaskItem :title="title" />'
+  template: '<TaskItem :title="title" @delete-emit="onDelete" @detail-emit="onDetail" />'
 })
 
 export const Default = Template.bind({})

diff --git a/front/quasar-app/src/components/organisms/TaskList.stories.js b/front/quasar-app/src/components/organisms/TaskList.stories.js
@@ -1,6 +1,7 @@
 
 import TaskList from './TaskList'
-// import { action } from '@storybook/addon-actions'
+import { action } from '@storybook/addon-actions'
+import * as TaskStories from '../molecules/TaskItem.stories';
 
 export default {
   title: 'TaskList',
@@ -9,14 +10,15 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const actionsData = {
-}
-
+// export const actionsData = {
+//   onDelete: action('delete-emit'),
+//   onDetail: action('detail-emit')
+// }
 const Template = (args, { argTypes }) => ({
   components: { TaskList },
   props: Object.keys(argTypes),
-  methods: actionsData,
-  template: '<TaskList :task-list="taskList" />'
+  methods: TaskStories.actionsData,
+  template: '<TaskList v-bind="$props" :task-list="taskList" @delete-emit="onDelete" @detail-emit="onDetail" />'
 })
 
 export const Default = Template.bind({})

diff --git a/front/quasar-app/src/components/organisms/TaskList.vue b/front/quasar-app/src/components/organisms/TaskList.vue
@@ -4,10 +4,9 @@
     <template v-for="(taskItem, index) in taskList">
       <q-separator :key="`${index}+separator`" spaced />
       <task-item
+        v-on="$listeners"
         :key="index"
         :title="taskItem.title"
-        @delete-emit="deleteButton"
-        @detail-emit="detailButton"
       />
     </template>
   </q-list>