feat(vue3): codegen: handle boolean props

histoire-dev · Feb 15, 2023 · 22b7456 · 22b7456
1 parent dcf0ad6
commit 22b7456
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git a/examples/vue3/cypress/integration/codegen-vue3.js b/examples/vue3/cypress/integration/codegen-vue3.js
@@ -62,6 +62,16 @@ describe('Codegen (Vue 3)', () => {
 >`)
   })
 
+  it('boolean props', () => {
+    cy.visit('/story/src-components-codegen-story-vue?variantId=boolean+props')
+    cy.get('[data-test-id="story-source-code"]').should('have.text', `<BaseButton disabled>
+   Button 
+</BaseButton>
+<BaseButton :disabled="false">
+   Button 
+</BaseButton>`)
+  })
+
   it('click-events', () => {
     cy.visit('/story/src-components-codegen-story-vue?variantId=click-events')
     cy.get('[data-test-id="story-source-code"]').should('have.text', `<button @click="onClick">

diff --git a/examples/vue3/src/components/CodeGen.story.vue b/examples/vue3/src/components/CodeGen.story.vue
@@ -15,6 +15,7 @@ export default defineComponent({
 <script lang="ts" setup>
 import ModalWithSlots from './ModalWithSlots.vue'
 import SlotWithProps from './SlotWithProps.vue'
+import BaseButton from './BaseButton.vue'
 
 function initState () {
   return {
@@ -98,6 +99,17 @@ function onClick (event) {
         >
       </template>
     </Variant>
+    <Variant
+      id="boolean props"
+      title="boolean props"
+    >
+      <BaseButton disabled>
+        Button
+      </BaseButton>
+      <BaseButton :disabled="false">
+        Button
+      </BaseButton>
+    </Variant>
     <Variant
       id="click-events"
       title="click event"

diff --git a/packages/histoire-plugin-vue/src/client/codegen.ts b/packages/histoire-plugin-vue/src/client/codegen.ts
@@ -180,6 +180,9 @@ async function printVNode (vnode: VNode, propsOverrides: Record<string, any> = n
         } else {
           attrs.push([`${directive}${arg}="${serialized[0]}"`])
         }
+        // @ts-ignore
+      } else if (vnode.type?.props?.[prop]?.type === Boolean) {
+        attrs.push([prop])
       } else {
         attrs.push([`${prop}="${value}"`])
       }