Merge pull request #25219 from Tap-Kim/fix-vue3-showcode-attributeSor…

…uce-prefix-validation Vue3: Fix support for `onX` and empty attributes in Show Code
storybookjs · Jan 24, 2024 · 3eeb562 · 3eeb562
2 parents 6733062 + 709b759
commit 3eeb562
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -286,6 +286,10 @@ describe('Vue3: sourceDecorator->attributeSoure()', () => {
   it('normal html attribute should not convert to vue event directive', () => {
     expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
   });
+  it('The value undefined or empty string must not be returned.', () => {
+    expect(attributeSource('icon', undefined)).toMatchInlineSnapshot(`icon=""`);
+    expect(attributeSource('icon', '')).toMatchInlineSnapshot(`icon=""`);
+  });
   it('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
     const htmlEventAttributeToVueEventAttribute = (attribute: string) => {
       return htmlEventToVueEvent(attribute);

diff --git 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.includes('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