From 33551817ef787353c44f0136ba9752ee798a66f1 Mon Sep 17 00:00:00 2001
From: chakir qatab <javachakir@gmail.com>
Date: Mon, 16 Jan 2023 01:16:51 +0400
Subject: [PATCH] refactory and optimisation .

---
 .../vue3/src/docs/sourceDecorator.ts          | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 6fc70b1e3ea..182b8b6a758 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -68,22 +68,20 @@ function generateAttributesSource(_args: Args, argTypes: ArgTypes, byRef?: boole
         ['children', 'slots'].indexOf(argTypes[key]?.table?.category) === -1 || !argTypes[key] // remove slots and children
     )
     .map((key) => {
-      const akey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      const akey =
+        argTypes[key]?.table?.category !== 'events' // is event
+          ? key
+              .replace(/([A-Z])/g, '-$1')
+              .replace(/^on-/, 'v-on:')
+              .replace(/^:/, '')
+              .toLowerCase()
+          : `v-on:${key}`;
       args[akey] = args[key];
-      if (
-        (typeof args[key] === 'function' && !argTypes[key]?.type) ||
-        argTypes[key]?.table?.category === 'events'
-      ) {
-        args[`:${akey}`] = '() => {}';
-        if (!akey.startsWith('on')) delete args[`:${akey}`]; // remove the event key
-        return `:${akey}`;
-      }
       return akey;
     })
     .filter((key, index, self) => self.indexOf(key) === index); // remove duplicated keys
-  // generate the source code for each key and filter out empty strings
-  const camelCase = (str: string) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
 
+  const camelCase = (str: string) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
   const source = argsKeys
     .map((key) =>
       generateAttributeSource(
@@ -92,20 +90,16 @@ function generateAttributesSource(_args: Args, argTypes: ArgTypes, byRef?: boole
         argTypes[key]
       )
     )
-    .filter((item) => item !== '')
     .join(' ');
 
   return source;
 }
 
 function generateAttributeSource(
-  _key: string,
+  key: string,
   value: Args[keyof Args],
   argType: ArgTypes[keyof ArgTypes]
 ): string {
-  const toKey = (key: string) => key.replace(/([A-Z])/g, '-$1').toLowerCase();
-  const key = toKey(_key); // .replace(':on-', 'on-');
-
   if (!value) {
     return '';
   }
@@ -114,8 +108,8 @@ function generateAttributeSource(
     return key;
   }
 
-  if (typeof value === 'function' || argType?.table?.category === 'events' || argType?.action) {
-    return `:${key}='${value}'`;
+  if (key.startsWith('v-on:')) {
+    return `${key}='() => {}'`;
   }
 
   if (typeof value === 'string') {
@@ -295,7 +289,7 @@ export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) =
 
   useEffect(() => {
     if (!skip && source) {
-      channel.emit(SNIPPET_RENDERED, (context || {}).id, source, 'html');
+      channel.emit(SNIPPET_RENDERED, (context || {}).id, source, 'vue');
     }
   });