From 295124bfb9ce568a92643bc9cb99730847d575a0 Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Thu, 14 Dec 2023 01:22:20 +0900
Subject: [PATCH 01/11] fix: Complementary validation of the "directiveSource"
 - Add "on" prefix.

---
 code/renderers/vue3/src/docs/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index 707feb46e58f..e11ecee35479 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -24,7 +24,7 @@ const htmlEventAttributeToVueEventAttribute = (key: string) => {
 };
 
 const directiveSource = (key: string, value: unknown) =>
-  key.includes('on')
+  key.startsWith("on") || key.startsWith("On")
     ? `${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`
     : `${key}="${value}"`;
 

From 807872ae6c759319fde7eba271d6e950a7a25c6b Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Thu, 14 Dec 2023 01:25:27 +0900
Subject: [PATCH 02/11] update: Return value "undefined" to empty string.

---
 code/renderers/vue3/src/docs/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index e11ecee35479..1838b757767f 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -26,7 +26,7 @@ const htmlEventAttributeToVueEventAttribute = (key: string) => {
 const directiveSource = (key: string, value: unknown) =>
   key.startsWith("on") || key.startsWith("On")
     ? `${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`
-    : `${key}="${value}"`;
+    : `${key}="${value ?? ""}"`;
 
 const attributeSource = (key: string, value: unknown, dynamic?: boolean) =>
   // convert html event key to vue event key

From 7a840019a497ec8c68c33b4f44befc84318b9bbd Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Thu, 14 Dec 2023 01:29:36 +0900
Subject: [PATCH 03/11] test: Add function test code

---
 code/renderers/vue3/src/docs/sourceDecorator.test.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index ec59ae61c9b3..49964cbfff2b 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -286,6 +286,9 @@ describe('Vue3: sourceDecorator->attributeSoure()', () => {
   test('normal html attribute should not convert to vue event directive', () => {
     expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
   });
+  test('The value ()=>({}) must not be returned.', () => {
+    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=''`);
+  });
   test('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
     const htmlEventAttributeToVueEventAttribute = (attribute: string) => {
       return htmlEventToVueEvent(attribute);

From fa60836a2e17c04b21738e580584ce553192fb38 Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Thu, 14 Dec 2023 01:46:53 +0900
Subject: [PATCH 04/11] fix: Return "key" string lowercase

---
 code/renderers/vue3/src/docs/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index 1838b757767f..917b9289e460 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -24,7 +24,7 @@ const htmlEventAttributeToVueEventAttribute = (key: string) => {
 };
 
 const directiveSource = (key: string, value: unknown) =>
-  key.startsWith("on") || key.startsWith("On")
+  key.toLowerCase().startsWith("on")
     ? `${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`
     : `${key}="${value ?? ""}"`;
 

From 4c4a9fdeb9d1b00236196d005a7f893b390826b7 Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Thu, 14 Dec 2023 11:18:46 +0900
Subject: [PATCH 05/11] fix: Modify lint error

---
 code/renderers/vue3/src/docs/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index 917b9289e460..3af2606c90ac 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -24,9 +24,9 @@ const htmlEventAttributeToVueEventAttribute = (key: string) => {
 };
 
 const directiveSource = (key: string, value: unknown) =>
-  key.toLowerCase().startsWith("on")
+  key.toLowerCase().startsWith('on')
     ? `${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`
-    : `${key}="${value ?? ""}"`;
+    : `${key}="${value ?? ''}"`;
 
 const attributeSource = (key: string, value: unknown, dynamic?: boolean) =>
   // convert html event key to vue event key

From 5fda6d7eb676578cf3572e32fc8eed874023b558 Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Thu, 14 Dec 2023 11:20:38 +0900
Subject: [PATCH 06/11] test: Modify toMatchInlineSnapshot

---
 code/renderers/vue3/src/docs/sourceDecorator.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index 49964cbfff2b..22ce8895f8fc 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -287,7 +287,7 @@ describe('Vue3: sourceDecorator->attributeSoure()', () => {
     expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
   });
   test('The value ()=>({}) must not be returned.', () => {
-    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=''`);
+    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=""`);
   });
   test('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
     const htmlEventAttributeToVueEventAttribute = (attribute: string) => {

From 7fcd797e023ac33f2bc40f1c709512a942d4ff76 Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Thu, 14 Dec 2023 14:19:33 +0900
Subject: [PATCH 07/11] fix: Add empty object test code

---
 code/renderers/vue3/src/docs/sourceDecorator.test.ts | 2 +-
 code/renderers/vue3/src/docs/utils.ts                | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index 22ce8895f8fc..49964cbfff2b 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -287,7 +287,7 @@ describe('Vue3: sourceDecorator->attributeSoure()', () => {
     expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
   });
   test('The value ()=>({}) must not be returned.', () => {
-    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=""`);
+    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=''`);
   });
   test('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
     const htmlEventAttributeToVueEventAttribute = (attribute: string) => {
diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index 3af2606c90ac..513a7ae131ba 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -23,10 +23,14 @@ const htmlEventAttributeToVueEventAttribute = (key: string) => {
   return /^on[A-Za-z]/.test(key) ? key.replace(/^on/, 'v-on:').toLowerCase() : key;
 };
 
+const isEmptyObject = (value) => {
+  return String(value).replace(/(\s*)/g, "") === "()=>{}";
+}
+
 const directiveSource = (key: string, value: unknown) =>
   key.toLowerCase().startsWith('on')
     ? `${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`
-    : `${key}="${value ?? ''}"`;
+    : `${key}=${isEmptyObject(value) ? '' : value}`
 
 const attributeSource = (key: string, value: unknown, dynamic?: boolean) =>
   // convert html event key to vue event key

From 6845ff034d1225f43d23040c53a86a52ad1c3ad0 Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Thu, 14 Dec 2023 14:42:49 +0900
Subject: [PATCH 08/11] fix: Lint error

---
 code/renderers/vue3/src/docs/sourceDecorator.test.ts | 2 +-
 code/renderers/vue3/src/docs/utils.ts                | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index 49964cbfff2b..22ce8895f8fc 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -287,7 +287,7 @@ describe('Vue3: sourceDecorator->attributeSoure()', () => {
     expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
   });
   test('The value ()=>({}) must not be returned.', () => {
-    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=''`);
+    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=""`);
   });
   test('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
     const htmlEventAttributeToVueEventAttribute = (attribute: string) => {
diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index 513a7ae131ba..a072e16b5057 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -23,14 +23,13 @@ const htmlEventAttributeToVueEventAttribute = (key: string) => {
   return /^on[A-Za-z]/.test(key) ? key.replace(/^on/, 'v-on:').toLowerCase() : key;
 };
 
-const isEmptyObject = (value) => {
-  return String(value).replace(/(\s*)/g, "") === "()=>{}";
-}
+const isEmptyObject = (value: unknown) => 
+  String(value).replace(/(\s*)/g, '') === '()=>{}';
 
 const directiveSource = (key: string, value: unknown) =>
   key.toLowerCase().startsWith('on')
     ? `${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`
-    : `${key}=${isEmptyObject(value) ? '' : value}`
+    : `${key}=${isEmptyObject(value) ? '' : value}`;
 
 const attributeSource = (key: string, value: unknown, dynamic?: boolean) =>
   // convert html event key to vue event key

From dc1ec028eb2d2e7ac9d2e6ed03321cdfe6193c59 Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Fri, 15 Dec 2023 13:54:55 +0900
Subject: [PATCH 09/11] fix: ci error - lint, unit test

---
 code/renderers/vue3/src/docs/sourceDecorator.test.ts | 2 +-
 code/renderers/vue3/src/docs/utils.ts                | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index 22ce8895f8fc..c2482efc1e3c 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -287,7 +287,7 @@ describe('Vue3: sourceDecorator->attributeSoure()', () => {
     expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
   });
   test('The value ()=>({}) must not be returned.', () => {
-    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=""`);
+    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=`);
   });
   test('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
     const htmlEventAttributeToVueEventAttribute = (attribute: string) => {
diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index a072e16b5057..575211340131 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -23,8 +23,7 @@ const htmlEventAttributeToVueEventAttribute = (key: string) => {
   return /^on[A-Za-z]/.test(key) ? key.replace(/^on/, 'v-on:').toLowerCase() : key;
 };
 
-const isEmptyObject = (value: unknown) => 
-  String(value).replace(/(\s*)/g, '') === '()=>{}';
+const isEmptyObject = (value: unknown) => String(value).replace(/(\s*)/g, '') === '()=>{}';
 
 const directiveSource = (key: string, value: unknown) =>
   key.toLowerCase().startsWith('on')

From a165460a42f49b050ae665dfa2f95b6bef4f5343 Mon Sep 17 00:00:00 2001
From: devTap <rlaxogus0517@gmail.com>
Date: Fri, 15 Dec 2023 18:19:01 +0900
Subject: [PATCH 10/11] fix: ci error - unit test

---
 code/renderers/vue3/src/docs/sourceDecorator.test.ts | 2 +-
 code/renderers/vue3/src/docs/utils.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index c2482efc1e3c..22ce8895f8fc 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -287,7 +287,7 @@ describe('Vue3: sourceDecorator->attributeSoure()', () => {
     expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
   });
   test('The value ()=>({}) must not be returned.', () => {
-    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=`);
+    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=""`);
   });
   test('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
     const htmlEventAttributeToVueEventAttribute = (attribute: string) => {
diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index 575211340131..356b6891a180 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -28,7 +28,7 @@ const isEmptyObject = (value: unknown) => String(value).replace(/(\s*)/g, '') ==
 const directiveSource = (key: string, value: unknown) =>
   key.toLowerCase().startsWith('on')
     ? `${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`
-    : `${key}=${isEmptyObject(value) ? '' : value}`;
+    : `${key}=${isEmptyObject(value) ? `""` : `"${value}"`}`;
 
 const attributeSource = (key: string, value: unknown, dynamic?: boolean) =>
   // convert html event key to vue event key

From 7e1dce6692e60170803cbccb4309c55f3fc4c18c Mon Sep 17 00:00:00 2001
From: devTap <93532696+Tap-Kim@users.noreply.github.com>
Date: Tue, 19 Dec 2023 10:02:05 +0900
Subject: [PATCH 11/11] fix: Reflect empty function logic removal feedback

---
 code/renderers/vue3/src/docs/sourceDecorator.test.ts | 5 +++--
 code/renderers/vue3/src/docs/utils.ts                | 4 +---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index 22ce8895f8fc..cd5cda5de555 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -286,8 +286,9 @@ describe('Vue3: sourceDecorator->attributeSoure()', () => {
   test('normal html attribute should not convert to vue event directive', () => {
     expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
   });
-  test('The value ()=>({}) must not be returned.', () => {
-    expect(attributeSource('icon', () => {})).toMatchInlineSnapshot(`icon=""`);
+  test('The value undefined or empty string must not be returned.', () => {
+    expect(attributeSource('icon', undefined)).toMatchInlineSnapshot(`icon=""`);
+    expect(attributeSource('icon', '')).toMatchInlineSnapshot(`icon=""`);
   });
   test('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
     const htmlEventAttributeToVueEventAttribute = (attribute: string) => {
diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index 356b6891a180..b4e502952dfd 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -23,12 +23,10 @@ const htmlEventAttributeToVueEventAttribute = (key: string) => {
   return /^on[A-Za-z]/.test(key) ? key.replace(/^on/, 'v-on:').toLowerCase() : key;
 };
 
-const isEmptyObject = (value: unknown) => String(value).replace(/(\s*)/g, '') === '()=>{}';
-
 const directiveSource = (key: string, value: unknown) =>
   key.toLowerCase().startsWith('on')
     ? `${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`
-    : `${key}=${isEmptyObject(value) ? `""` : `"${value}"`}`;
+    : `${key}="${value || ''}"`;
 
 const attributeSource = (key: string, value: unknown, dynamic?: boolean) =>
   // convert html event key to vue event key