fix: update stories

vinayakkulkarni · Jul 20, 2021 · 3d80a4d · 3d80a4d
1 parent 7e1c523
commit 3d80a4d
Showing 1 changed file with 17 additions and 17 deletions.
diff --git a/stories/Tweakpane.stories.ts b/stories/Tweakpane.stories.ts
@@ -5,23 +5,13 @@ export default {
   title: 'Tweakpane/Examples',
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => ({
+export const SinglePane = (args) => ({
   components: { VTweakpane },
   setup() {
-    //👇 The args will now be passed down to the template
     return { args };
   },
-  template: `<div v-if="args.pane"> 
-      <v-tweakpane :pane="args.pane" /> 
-    </div>
-    <div v-if="args.panes">
-      <v-tweakpane v-for="pane in args.panes" :key="pane" :pane="pane" />
-    </div>`,
+  template: `<v-tweakpane :pane="args.pane" />`,
 });
-
-//👇 Each story then reuses that template
-export const SinglePane = Template.bind({});
 SinglePane.args = {
   pane: {
     title: 'My Awesome Pane',
@@ -52,11 +42,23 @@ SinglePane.args = {
   },
 };
 
-export const MultiplePanes = Template.bind({});
+export const MultiplePanes = (args) => ({
+  components: { VTweakpane },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div v-for="(pane, idx) in args.panes" :key="idx">
+    <div style="margin-bottom: 10px; margin-bottom: 10px;">
+      <v-tweakpane :pane="pane" />
+    </div>
+  </div>
+  `,
+});
 MultiplePanes.args = {
   panes: [
     {
-      title: 'My Awesome Pane',
+      title: 'My 1st Awesome Pane',
       inputs: [
         {
           factor: 123,
@@ -83,11 +85,9 @@ MultiplePanes.args = {
       ],
     },
     {
-      title: 'My Awesome Pane',
+      title: 'My 2nd Awesome Pane',
       inputs: [
         {
-          factor: 123,
-          title: 'hello',
           color: '#0f0',
         },
       ],