@coreui/vue-pro 5.17.1 → 5.19.0

package/src/components/form/CFormFloating.ts

@@ -9,7 +9,7 @@ const CFormFloating = defineComponent({
         {
           class: 'form-floating',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/form/CFormInput.ts

@@ -168,7 +168,7 @@ const CFormInput = defineComponent({
                 type: props.type,
                 ...((props.modelValue || props.modelValue === 0) && { value: props.modelValue }),
               },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             ),
           ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
           ...(slots.feedbackInvalid && {
@@ -179,7 +179,7 @@ const CFormInput = defineComponent({
           }),
           ...(slots.label && { label: () => slots.label && slots.label() }),
           ...(slots.text && { text: () => slots.text && slots.text() }),
-        },
+        }
       )
   },
 })

package/src/components/form/CFormLabel.ts

@@ -15,7 +15,7 @@ const CFormLabel = defineComponent({
         {
           class: props.customClassName ?? 'form-label',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/form/CFormRange.ts

@@ -33,7 +33,7 @@ const CFormRange = defineComponent({
     /**
      * Specifies the interval between legal numbers in the component.
      */
-    steps: Number,
+    step: Number,
     /**
      * The `value` attribute of component.
      *
@@ -67,7 +67,7 @@ const CFormRange = defineComponent({
           },
           {
             default: () => (slots.label && slots.label()) || props.label,
-          },
+          }
         ),
       h(
         'input',
@@ -79,11 +79,11 @@ const CFormRange = defineComponent({
           min: props.min,
           onChange: (event: InputEvent) => handleChange(event),
           readonly: props.readonly,
-          steps: props.steps,
+          step: props.step,
           type: 'range',
           value: props.modelValue,
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       ),
     ]
   },

package/src/components/form/CFormSelect.ts

@@ -170,10 +170,10 @@ const CFormSelect = defineComponent({
                           }),
                         }),
                       },
-                      typeof option === 'string' ? option : option.label,
+                      typeof option === 'string' ? option : option.label
                     )
                   })
-                : slots.default && slots.default(),
+                : slots.default && slots.default()
             ),
           ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
           ...(slots.feedbackInvalid && {
@@ -184,7 +184,7 @@ const CFormSelect = defineComponent({
           }),
           ...(slots.label && { label: () => slots.label && slots.label() }),
           ...(slots.text && { text: () => slots.text && slots.text() }),
-        },
+        }
       )
   },
 })

package/src/components/form/CFormSwitch.ts

@@ -109,9 +109,9 @@ const CFormSwitch = defineComponent({
               },
               {
                 default: () => props.label,
-              },
+              }
             ),
-        ],
+        ]
       )
   },
 })

package/src/components/form/CFormTextarea.ts

@@ -141,7 +141,7 @@ const CFormTextarea = defineComponent({
                 onInput: (event: InputEvent) => handleInput(event),
                 ...(props.modelValue && { value: props.modelValue }),
               },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             ),
           ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
           ...(slots.feedbackInvalid && {
@@ -152,7 +152,7 @@ const CFormTextarea = defineComponent({
           }),
           ...(slots.label && { label: () => slots.label && slots.label() }),
           ...(slots.text && { text: () => slots.text && slots.text() }),
-        },
+        }
       )
   },
 })

package/src/components/form/CInputGroup.ts

@@ -27,7 +27,7 @@ const CInputGroup = defineComponent({
             },
           ],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/form/__tests__/CFormRange.spec.ts

@@ -16,7 +16,7 @@ const customWrapper = mount(Component, {
     max: 400,
     min: 50,
     readonly: true,
-    steps: 10,
+    step: 10,
     value: 250,
   },
   slots: {
@@ -50,6 +50,6 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.find('input').attributes('max')).toBe('400')
     expect(customWrapper.find('input').attributes('min')).toBe('50')
     expect(customWrapper.find('input').attributes('readonly')).toBe('')
-    expect(customWrapper.find('input').attributes('steps')).toBe('10')
+    expect(customWrapper.find('input').attributes('step')).toBe('10')
   })
 })

package/src/components/form/__tests__/CFormText.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    as 'p',
+    as: 'p',
   },
   slots: {
     default: 'Default slot',

package/src/components/form/__tests__/__snapshots__/CFormRange.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormRange component renders correctly 1`] = `"<input class="form-range" disabled="" max="400" min="50" readonly="" steps="10" type="range">"`;
+exports[`Customize CFormRange component renders correctly 1`] = `"<input class="form-range" disabled="" max="400" min="50" readonly="" step="10" type="range">"`;
 
 exports[`Loads and display CFormRange component renders correctly 1`] = `"<input class="form-range" type="range">"`;

package/src/components/grid/CCol.ts

@@ -114,7 +114,7 @@ const CCol = defineComponent({
         {
           class: [repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col'],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/grid/CContainer.ts

@@ -43,7 +43,9 @@ const CContainer = defineComponent({
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = props[bp]
 
-      breakpoint && repsonsiveClassNames.push(`container-${bp}`)
+      if (breakpoint) {
+        repsonsiveClassNames.push(`container-${bp}`)
+      }
     })
     return () =>
       h(
@@ -51,7 +53,7 @@ const CContainer = defineComponent({
         {
           class: [repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container'],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/grid/CRow.ts

@@ -85,7 +85,7 @@ const CRow = defineComponent({
         {
           class: ['row', repsonsiveClassNames],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/header/CHeader.ts

@@ -44,9 +44,9 @@ const CHeader = defineComponent({
           ? h(
               'div',
               { class: `container${props.container === true ? '' : '-' + props.container}` },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             )
-          : slots.default && slots.default(),
+          : slots.default && slots.default()
       )
   },
 })

package/src/components/header/CHeaderNav.ts

@@ -19,7 +19,7 @@ const CHeaderNav = defineComponent({
           class: 'header-nav',
           role: 'navigation',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/header/CHeaderToggler.ts

@@ -11,7 +11,7 @@ const CHeaderToggler = defineComponent({
           type: 'button',
           'aria-label': 'Toggle navigation',
         },
-        slots.default ? slots.default() : h('span', { class: ['header-toggler-icon'] }),
+        slots.default ? slots.default() : h('span', { class: ['header-toggler-icon'] })
       )
   },
 })

package/src/components/header/__tests__/CHeader.spec.ts

@@ -54,7 +54,6 @@ describe(`Customize ${ComponentName} component`, () => {
   })
 })
 
-
 describe(`Customize (number two) ${ComponentName} component`, () => {
   it('renders correctly', () => {
     expect(customWrapperTwo.html()).toMatchSnapshot()
@@ -62,4 +61,4 @@ describe(`Customize (number two) ${ComponentName} component`, () => {
   it('tag name is custom', () => {
     expect(customWrapperTwo.element.tagName).toBe('HEADER')
   })
-})
+})

package/src/components/header/__tests__/__snapshots__/CHeader.spec.ts.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Customize (number two) CHeader component renders correctly 1`] = `"<header class="header">Default slot</header>"`;
+
 exports[`Customize CHeader component renders correctly 1`] = `
 "<div class="header header-fixed">
   <div class="container-lg">Default slot</div>

package/src/components/index.ts

@@ -11,6 +11,9 @@ export * from './calendar'
 export * from './callout'
 export * from './card'
 export * from './carousel'
+export * from './chip'
+export * from './chip-input'
+export * from './chip-set'
 export * from './close-button'
 export * from './collapse'
 export * from './conditional-teleport'
@@ -41,6 +44,7 @@ export * from './progress'
 export * from './popover'
 export * from './range-slider'
 export * from './rating'
+export * from './search-button'
 export * from './sidebar'
 export * from './smart-pagination'
 export * from './smart-table'

package/src/components/link/CLink.ts

@@ -49,7 +49,7 @@ const CLink = defineComponent({
           }),
           href: props.href,
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/list-group/CListGroup.ts

@@ -46,7 +46,7 @@ const CListGroup = defineComponent({
             },
           ],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/list-group/CListGroupItem.ts

@@ -48,7 +48,7 @@ const CListGroupItem = defineComponent({
           ...(props.active && { 'aria-current': true }),
           ...(props.disabled && { 'aria-disabled': true }),
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/modal/CModal.ts

@@ -181,12 +181,13 @@ const CModal = defineComponent({
     }
 
     const handleAfterEnter = () => {
-      props.focus && modalRef.value?.focus()
+      if (props.focus) {
+        modalRef.value?.focus()
+      }
       window.addEventListener('mousedown', handleMouseDown)
       window.addEventListener('keydown', handleKeyDown)
     }
 
-    // eslint-disable-next-line unicorn/consistent-function-scoping
     const handleLeave = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.remove('modal-open')

package/src/components/modal/CModalHeader.ts

@@ -18,9 +18,16 @@ const CModalHeader = defineComponent({
     return () =>
       h('span', { class: 'modal-header' }, [
         slots.default && slots.default(),
-        props.closeButton && h(CCloseButton, { onClick: () => {
-          visible.value = false
-        } }, ''),
+        props.closeButton &&
+          h(
+            CCloseButton,
+            {
+              onClick: () => {
+                visible.value = false
+              },
+            },
+            ''
+          ),
       ])
   },
 })

package/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap

@@ -1,17 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CModal component renders correctly 1`] = `
-"<transition-stub appear="false" persisted="false" css="false">
+"<!--teleport start-->
+<transition-stub appear="false" persisted="false" css="false">
   <div class="modal" aria-modal="true" role="dialog">
     <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg">
       <div class="modal-content bazinga">Default slot</div>
     </div>
   </div>
-</transition-stub>"
+</transition-stub>
+<!---->
+<!--teleport end-->"
 `;
 
 exports[`Loads and display CModal component renders correctly 1`] = `
-"<transition-stub appear="false" persisted="false" css="false">
+"<!--teleport start-->
+<transition-stub appear="false" persisted="false" css="false">
   <div class="modal fade" aria-modal="true" role="dialog">
     <div class="modal-dialog modal-fullscreen">
       <div class="modal-content">Default slot</div>
@@ -20,5 +24,6 @@ exports[`Loads and display CModal component renders correctly 1`] = `
 </transition-stub>
 <transition-stub appear="false" persisted="false" css="true" class="modal-backdrop">
   <div class="fade"></div>
-</transition-stub>"
+</transition-stub>
+<!--teleport end-->"
 `;