feat(useFormKitSchema): allow also boolean value for render

Author: sfxcode

src/composables/useFormKitSchema.ts

@@ -1,48 +1,48 @@
 export function useFormKitSchema() {
-  const addComponent = (component: string = 'Button', props: object = {}, render: string = 'true', formKitAttrs: object = {}): object => {
+  const addComponent = (component: string = 'Button', props: object = {}, render: string | boolean = true, formKitAttrs: object = {}): object => {
     return {
       $cmp: component,
-      if: render,
+      if: render.toString(),
       props,
       ...formKitAttrs,
     }
   }
 
-  const addElement = (element: string = 'div', children: any[] | string = [], attrs: object = {}, render: string = 'true', formKitAttrs: object = {}) => {
+  const addElement = (element: string = 'div', children: any[] | string = [], attrs: object = {}, render: string | boolean = true, formKitAttrs: object = {}) => {
     return {
       $el: element,
-      if: render,
+      if: render.toString(),
       attrs,
       children,
       ...formKitAttrs,
     }
   }
 
-  const addGroup = (name: string, children: object[] = [], render: string = 'true', formKitAttrs: object = {}) => {
+  const addGroup = (name: string, children: object[] = [], render: string | boolean = true, formKitAttrs: object = {}) => {
     return {
       $formkit: 'group',
-      if: render,
+      if: render.toString(),
       name,
       children,
       ...formKitAttrs,
     }
   }
 
-  const addList = (name: string, children: object[], dynamic: boolean = true, render: string = 'true', formKitAttrs: object = {}) => {
+  const addList = (name: string, children: object[] = [], dynamic: boolean = true, render: string | boolean = true, formKitAttrs: object = {}) => {
     return {
       $formkit: 'list',
-      if: render,
+      if: render.toString(),
       name,
       dynamic,
       children,
       ...formKitAttrs,
     }
   }
 
-  const addListGroup = (children: object[] = [], render: string = 'true', formKitAttrs: object = {}) => {
+  const addListGroup = (children: object[] = [], render: string | boolean = true, formKitAttrs: object = {}) => {
     return {
       $formkit: 'group',
-      if: render,
+      if: render.toString(),
       for: ['item', 'index', '$items'], // 👈 $items is in the slot’s scope
       key: '$item',
       index: '$index',
@@ -51,7 +51,7 @@ export function useFormKitSchema() {
     }
   }
 
-  const addElementsInOuterDiv = (children: object[] = [], innerClass: string = '', outerClass: string = '', label: string = '', help: string = '', render: string = 'true') => {
+  const addElementsInOuterDiv = (children: object[] = [], innerClass: string = '', outerClass: string = '', label: string = '', help: string = '', render: string | boolean = true) => {
     const inner = addElement('div', children, { class: `formkit-inner ${innerClass}`, style: 'position: relative;' })
     const labelDiv = addElement('label', [label], { class: 'formkit-label' })
     const wrapperDiv = addElement('div', [labelDiv, inner], { class: 'formkit-wrapper' })

test/useFormKitSchema.test.ts

@@ -17,13 +17,15 @@ it('add element', () => {
   expect(e2.$el).toBe('span')
   expect(renderToBoolean(e2)).toBe(false)
   expect(e2.children?.length).toBe(1)
+  // @ts-expect-error: name is not in the type`
   expect(e2.attrs?.name).toBe('test')
 })
 
 it('add component', () => {
   const { addComponent } = useFormKitSchema()
 
   const component = addComponent()
+  // @ts-expect-error: $cmp is not in the type
   expect(component.$cmp).toBe('Button')
   expect(renderToBoolean(component)).toBe(true)
 })