@coreui/vue-pro 4.0.1 → 4.1.0

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize with label - CFormCheck component renders correctly 1`] = `"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\"><label for=\\"uniqueid\\" class=\\"btn btn-outline-warning btn-lg rounded-circle\\">some label</label>"`;
+exports[`Customize with label - CFormCheck component renders correctly 1`] = `"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\"><label class=\\"btn btn-outline-warning btn-lg rounded-circle\\" for=\\"uniqueid\\">some label</label>"`;
 
-exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\"><label for=\\"uniqueid\\" class=\\"btn btn-outline-warning btn-lg rounded-circle\\">some label</label>"`;
+exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\"><label class=\\"btn btn-outline-warning btn-lg rounded-circle\\" for=\\"uniqueid\\">some label</label>"`;
 
 exports[`Loads and display CFormCheck component renders correctly 1`] = `"<input class=\\"form-check-input\\" type=\\"checkbox\\">"`;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (two) CFormInput component renders correctly 1`] = `"<input type=\\"color\\" class=\\"form-control form-control-color form-control-lg is-invalid is-valid\\">"`;
+exports[`Customize (two) CFormInput component renders correctly 1`] = `"<input class=\\"form-control form-control-color form-control-lg is-invalid is-valid\\" disabled=\\"\\" readonly=\\"\\" type=\\"color\\">"`;
 
-exports[`Customize CFormInput component renders correctly 1`] = `"<input type=\\"color\\" class=\\"form-control-plaintext form-control-color form-control-lg is-invalid is-valid\\">"`;
+exports[`Customize CFormInput component renders correctly 1`] = `"<input class=\\"form-control-plaintext form-control-color form-control-lg is-invalid is-valid\\" disabled=\\"\\" readonly=\\"\\" type=\\"color\\">"`;
 
-exports[`Loads and display CFormInput component renders correctly 1`] = `"<input type=\\"text\\" class=\\"form-control\\">"`;
+exports[`Loads and display CFormInput component renders correctly 1`] = `"<input class=\\"form-control\\" type=\\"text\\">"`;

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\\" type=\\"range\\" disabled=\\"\\" max=\\"400\\" min=\\"50\\" readonly=\\"\\" steps=\\"10\\">"`;
+exports[`Customize CFormRange component renders correctly 1`] = `"<input class=\\"form-range\\" disabled=\\"\\" max=\\"400\\" min=\\"50\\" steps=\\"10\\" readonly=\\"\\" type=\\"range\\">"`;
 
 exports[`Loads and display CFormRange component renders correctly 1`] = `"<input class=\\"form-range\\" type=\\"range\\">"`;

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormSwitch component renders correctly 1`] = `"<div class=\\"form-check form-switch form-switch-lg is-invalid is-valid\\"><input id=\\"uniqueid\\" type=\\"radio\\" class=\\"form-check-input is-invalid is-valid\\"><label for=\\"uniqueid\\" class=\\"form-label form-check-label\\">some label</label></div>"`;
+exports[`Customize CFormSwitch component renders correctly 1`] = `"<div class=\\"form-check form-switch form-switch-lg is-invalid is-valid\\"><input class=\\"form-check-input is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"radio\\"><label class=\\"form-label form-check-label\\" for=\\"uniqueid\\">some label</label></div>"`;
 
 exports[`Loads and display CFormSwitch component renders correctly 1`] = `
-"<div class=\\"form-check form-switch\\"><input type=\\"checkbox\\" class=\\"form-check-input\\">
+"<div class=\\"form-check form-switch\\"><input class=\\"form-check-input\\" type=\\"checkbox\\">
   <!---->
 </div>"
 `;

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

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormTextarea component renders correctly 1`] = `"<textarea class=\\"form-control-plaintext is-invalid is-valid\\">Default slot</textarea>"`;
+exports[`Customize CFormTextarea component renders correctly 1`] = `"<textarea disabled=\\"\\" readonly=\\"\\" class=\\"form-control-plaintext is-invalid is-valid\\">Default slot</textarea>"`;
 
 exports[`Loads and display CFormTextarea component renders correctly 1`] = `"<textarea class=\\"form-control\\">Default slot</textarea>"`;

package/src/components/grid/CCol.ts

@@ -84,7 +84,7 @@ const CCol = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const repsonsiveCLassNames: string[] = []
+    const repsonsiveClassNames: string[] = []
 
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = props[bp]
@@ -93,29 +93,29 @@ const CCol = defineComponent({
 
       if (breakpoint) {
         if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
-          repsonsiveCLassNames.push(`col${infix}-${breakpoint}`)
+          repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
         }
 
         if (typeof breakpoint === 'boolean') {
-          repsonsiveCLassNames.push(`col${infix}`)
+          repsonsiveClassNames.push(`col${infix}`)
         }
       }
 
       if (breakpoint && typeof breakpoint === 'object') {
         if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
-          repsonsiveCLassNames.push(`col${infix}-${breakpoint.span}`)
+          repsonsiveClassNames.push(`col${infix}-${breakpoint.span}`)
         }
 
         if (typeof breakpoint.span === 'boolean') {
-          repsonsiveCLassNames.push(`col${infix}`)
+          repsonsiveClassNames.push(`col${infix}`)
         }
 
         if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
-          repsonsiveCLassNames.push(`order${infix}-${breakpoint.order}`)
+          repsonsiveClassNames.push(`order${infix}-${breakpoint.order}`)
         }
 
         if (typeof breakpoint.offset === 'number') {
-          repsonsiveCLassNames.push(`offset${infix}-${breakpoint.offset}`)
+          repsonsiveClassNames.push(`offset${infix}-${breakpoint.offset}`)
         }
       }
     })
@@ -124,7 +124,7 @@ const CCol = defineComponent({
       h(
         'div',
         {
-          class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'col'],
+          class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'col'],
         },
         slots.default && slots.default(),
       )

package/src/components/grid/CContainer.ts

@@ -56,18 +56,18 @@ const CContainer = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const repsonsiveCLassNames: string[] = []
+    const repsonsiveClassNames: string[] = []
 
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = props[bp]
 
-      breakpoint && repsonsiveCLassNames.push(`container-${bp}`)
+      breakpoint && repsonsiveClassNames.push(`container-${bp}`)
     })
     return () =>
       h(
         'div',
         {
-          class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'container'],
+          class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'container'],
         },
         slots.default && slots.default(),
       )

package/src/components/grid/CRow.ts

@@ -81,7 +81,7 @@ const CRow = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const repsonsiveCLassNames: string[] = []
+    const repsonsiveClassNames: string[] = []
 
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = props[bp]
@@ -89,16 +89,16 @@ const CRow = defineComponent({
 
       if (typeof breakpoint === 'object') {
         if (breakpoint.cols) {
-          repsonsiveCLassNames.push(`row-cols${infix}-${breakpoint.cols}`)
+          repsonsiveClassNames.push(`row-cols${infix}-${breakpoint.cols}`)
         }
         if (typeof breakpoint.gutter === 'number') {
-          repsonsiveCLassNames.push(`g${infix}-${breakpoint.gutter}`)
+          repsonsiveClassNames.push(`g${infix}-${breakpoint.gutter}`)
         }
         if (typeof breakpoint.gutterX === 'number') {
-          repsonsiveCLassNames.push(`gx${infix}-${breakpoint.gutterX}`)
+          repsonsiveClassNames.push(`gx${infix}-${breakpoint.gutterX}`)
         }
         if (typeof breakpoint.gutterY === 'number') {
-          repsonsiveCLassNames.push(`gy${infix}-${breakpoint.gutterY}`)
+          repsonsiveClassNames.push(`gy${infix}-${breakpoint.gutterY}`)
         }
       }
     })
@@ -107,7 +107,7 @@ const CRow = defineComponent({
       h(
         'div',
         {
-          class: ['row', repsonsiveCLassNames],
+          class: ['row', repsonsiveClassNames],
         },
         slots.default && slots.default(),
       )

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './carousel'
 export * from './close-button'
 export * from './collapse'
 export * from './dropdown'
+export * from './element-cover'
 export * from './footer'
 export * from './form'
 export * from './grid'
@@ -26,6 +27,7 @@ export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
 export * from './pagination'
+export * from './placeholder'
 export * from './progress'
 export * from './popover'
 export * from './sidebar'

package/src/components/offcanvas/COffcanvas.ts

@@ -1,5 +1,6 @@
-import { defineComponent, h, ref, RendererElement, Transition, watch } from 'vue'
+import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue'
 import { CBackdrop } from '../backdrop'
+import { vVisible } from '../../directives/v-c-visible'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
@@ -139,25 +140,27 @@ const COffcanvas = defineComponent({
           onAfterLeave: (el) => handleAfterLeave(el),
         },
         () =>
-          visible.value &&
-          h(
-            'div',
-            {
-              class: [
-                'offcanvas',
-                {
-                  [`offcanvas-${props.placement}`]: props.placement,
-                },
-              ],
-              ref: offcanvasRef,
-              role: 'dialog',
-            },
-            slots.default && slots.default(),
+          withDirectives(
+            h(
+              'div',
+              {
+                class: [
+                  'offcanvas',
+                  {
+                    [`offcanvas-${props.placement}`]: props.placement,
+                  },
+                ],
+                ref: offcanvasRef,
+                role: 'dialog',
+              },
+              slots.default && slots.default(),
+            ),
+            [[vVisible, props.visible]],
           ),
       ),
       props.backdrop &&
         h(CBackdrop, {
-          class: 'modal-backdrop',
+          class: 'offcanvas-backdrop',
           visible: visible.value,
         }),
     ]

package/src/components/offcanvas/__tests__/COffcanvas.spec.ts

@@ -47,6 +47,6 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.text()).toContain('Default slot')
     expect(customWrapper.find('div').classes('offcanvas')).toBe(true)
     expect(customWrapper.find('div').classes('offcanvas-bottom')).toBe(true)
-    expect(customWrapper.find('.modal-backdrop').classes('modal-backdrop')).toBe(true)
+    expect(customWrapper.find('.offcanvas-backdrop').classes('offcanvas-backdrop')).toBe(true)
   })
 })

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`Customize COffcanvas component renders correctly 1`] = `
 "<transition-stub>
   <div class=\\"offcanvas offcanvas-bottom\\" role=\\"dialog\\">Default slot</div>
 </transition-stub>
-<transition-stub class=\\"modal-backdrop\\">
+<transition-stub class=\\"offcanvas-backdrop\\">
   <div class=\\"fade\\"></div>
 </transition-stub>"
 `;
@@ -13,7 +13,7 @@ exports[`Loads and display COffcanvas component renders correctly 1`] = `
 "<transition-stub>
   <div class=\\"offcanvas offcanvas-end\\" role=\\"dialog\\">Default slot</div>
 </transition-stub>
-<transition-stub class=\\"modal-backdrop\\">
+<transition-stub class=\\"offcanvas-backdrop\\">
   <div class=\\"fade\\"></div>
 </transition-stub>"
 `;

package/src/components/pagination/CSmartPagination.ts

@@ -214,7 +214,7 @@ const CSmartPagination = defineComponent({
       h(
         CPagination,
         {
-          class: [`justify-content-${props.align}`],
+          align: props.align,
           'aria-label': 'pagination',
           size: props.size,
         },

package/src/components/placeholder/CPlaceholder.ts

@@ -0,0 +1,139 @@
+import { defineComponent, h } from 'vue'
+
+import { Color } from '../props'
+
+const BREAKPOINTS = [
+  'xxl' as const,
+  'xl' as const,
+  'lg' as const,
+  'md' as const,
+  'sm' as const,
+  'xs' as const,
+]
+
+export const CPlaceholder = defineComponent({
+  name: 'CPlaceholder',
+  props: {
+    /**
+     * Set animation type to better convey the perception of something being actively loaded.
+     *
+     * @values 'glow', 'wave'
+     */
+    animation: {
+      type: String,
+      default: undefined,
+      require: false,
+      validator: (value: string) => {
+        return ['glow', 'wave'].includes(value)
+      },
+    },
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: Color,
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component: {
+      type: String,
+      default: 'span',
+      required: false,
+    },
+    /**
+     * Size the component extra small, small, or large.
+     *
+     * @values 'xs', 'sm', 'lg'
+     */
+    size: {
+      type: String,
+      default: undefined,
+      required: false,
+      validator: (value: string) => {
+        return ['xs', 'sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * The number of columns on extra small devices (<576px).
+     */
+    xs: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on small devices (<768px).
+     */
+    sm: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on medium devices (<992px).
+     */
+    md: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on large devices (<1200px).
+     */
+    lg: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on X-Large devices (<1400px).
+     */
+    xl: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on XX-Large devices (≥1400px).
+     */
+    xxl: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+  },
+  setup(props, { slots }) {
+    const repsonsiveClassNames: string[] = []
+
+    BREAKPOINTS.forEach((bp) => {
+      const breakpoint = props[bp]
+
+      const infix = bp === 'xs' ? '' : `-${bp}`
+
+      if (typeof breakpoint === 'number') {
+        repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
+      }
+
+      if (typeof breakpoint === 'boolean') {
+        repsonsiveClassNames.push(`col${infix}`)
+      }
+    })
+
+    return () =>
+      h(
+        props.component,
+        {
+          class: [
+            props.animation ? `placeholder-${props.animation}` : 'placeholder',
+            {
+              [`bg-${props.color}`]: props.color,
+              [`placeholder-${props.size}`]: props.size,
+            },
+            repsonsiveClassNames,
+          ],
+        },
+        slots.default && slots.default(),
+      )
+  },
+})

package/src/components/placeholder/__tests__/CPlaceholder.spec.ts

@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils'
+import { CPlaceholder as Component } from './../../'
+
+const ComponentName = 'CPlaceholder'
+const wrapper = shallowMount(Component)
+const customWrapper = shallowMount(Component, {
+  props: {
+    animation: 'glow',
+    color: 'secondary',
+    size: 'lg',
+    sm: 7,
+  },
+  attrs: {
+    class: 'bazinga',
+  },
+  slots: {
+    default: 'Hello World!',
+  },
+})
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('renders correctly with slot', () => {
+    expect(customWrapper.element).toMatchSnapshot()
+  })
+})
+
+describe(`Customize ${ComponentName} component`, () => {
+  it('has a prope class names', () => {
+    expect(customWrapper.find('span').classes('bazinga')).toBe(true)
+    expect(customWrapper.find('span').classes('bg-secondary')).toBe(true)
+    expect(customWrapper.find('span').classes('col-sm-7')).toBe(true)
+    expect(customWrapper.find('span').classes('placeholder-glow')).toBe(true)
+    expect(customWrapper.find('span').classes('placeholder-lg')).toBe(true)
+  })
+  it('default slot contains text', () => {
+    expect(customWrapper.text()).toBe('Hello World!')
+  })
+})

package/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loads and display CPlaceholder component renders correctly 1`] = `
+<span
+  class="placeholder"
+/>
+`;
+
+exports[`Loads and display CPlaceholder component renders correctly with slot 1`] = `
+<span
+  class="placeholder-glow bg-secondary placeholder-lg col-sm-7 bazinga"
+>
+  Hello World!
+</span>
+`;

package/src/components/placeholder/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CPlaceholder } from './CPlaceholder'
+
+const CPlaceholderPlugin = {
+  install: (app: App): void => {
+    app.component(CPlaceholder.name, CPlaceholder)
+  },
+}
+
+export { CPlaceholderPlugin, CPlaceholder }

package/src/components/smart-table/CSmartTable.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, reactive, ref, PropType, watch } from 'vue'
+import { computed, defineComponent, h, reactive, ref, PropType, watch, onMounted } from 'vue'
 
 import { CSmartPagination } from '../pagination/CSmartPagination'
 import { CElementCover } from '../element-cover/CElementCover'
@@ -46,7 +46,6 @@ const CSmartTable = defineComponent({
      */
     cleaner: {
       type: Boolean,
-      default: true,
       required: false,
     },
     /**
@@ -257,7 +256,6 @@ const CSmartTable = defineComponent({
      */
     tableFilter: {
       type: [Boolean, Object] as PropType<boolean | TableFilter>,
-      default: undefined,
       required: false,
     },
     /**
@@ -370,18 +368,26 @@ const CSmartTable = defineComponent({
       }),
     )
 
-    watch(props.items, () => {
-      items.value = props.items.map((item: Item, index: number) => {
-        return { ...item, _id: index }
-      })
-      console.log(props.items)
-    })
+    watch(
+      () => props.items,
+      () => {
+        items.value = props.items.map((item: Item, index: number) => {
+          return { ...item, _id: index }
+        })
+        if (
+          items.value &&
+          items.value.length < itemsPerPage.value * activePage.value - itemsPerPage.value
+        ) {
+          activePage.value = 1
+        }
+      },
+    )
 
     const selectedAll = ref()
 
     watch(items, () => {
-      console.log(items.value)
       const selected = items.value.filter((item) => item._selected === true)
+      emit('selectedItemsChange', selected)
 
       if (selected.length === items.value.length) {
         selectedAll.value = true
@@ -396,8 +402,6 @@ const CSmartTable = defineComponent({
       if (selected.length !== 0 && selected.length !== items.value.length) {
         selectedAll.value = 'indeterminate'
       }
-
-      emit('selectedItemsChange', selected)
     })
 
     const itemsPerPage = ref<number>(props.itemsPerPage)
@@ -407,6 +411,15 @@ const CSmartTable = defineComponent({
     const columnFilterState = ref(props.columnFilterValue ? props.columnFilterValue : {})
     const tableFilterState = ref(props.tableFilterValue ? props.tableFilterValue : '')
 
+    onMounted(() => {
+      if (
+        items.value &&
+        items.value.length < itemsPerPage.value * activePage.value - itemsPerPage.value
+      ) {
+        activePage.value = 1
+      }
+    })
+
     // functions
 
     const isSortable = (i: number): boolean | undefined => {
@@ -436,7 +449,11 @@ const CSmartTable = defineComponent({
         } else if (state.state === 'asc') {
           state.state = 'desc'
         } else {
-          state.state = 0
+          if (typeof props.columnSorter === 'object' && !props.columnSorter.resetable) {
+            state.state = 'asc'
+          } else {
+            state.state = 0
+          }
         }
       } else {
         state.column = column
@@ -450,7 +467,6 @@ const CSmartTable = defineComponent({
 
     const handleActivePageChange = (page: number) => {
       activePage.value = page
-      // currentItems.value = updatePage(sortedItems)
       emit('activePageChange', page)
     }
 
@@ -626,14 +642,14 @@ const CSmartTable = defineComponent({
 
     return () =>
       h('div', {}, [
-        h(
-          'div',
-          {
-            class: 'row my-2 mx-0',
-          },
-          {
-            default: () =>
-              (props.tableFilter || props.cleaner) && [
+        (props.tableFilter || props.cleaner) &&
+          h(
+            'div',
+            {
+              class: 'row my-2 mx-0',
+            },
+            [
+              props.tableFilter &&
                 h(
                   'div',
                   {
@@ -646,30 +662,29 @@ const CSmartTable = defineComponent({
                       value: tableFilterState.value,
                     }),
                 ),
+              props.cleaner &&
                 h(
                   'div',
                   {
                     class: 'col-auto p-0',
                   },
-                  props.cleaner &&
-                    h(
-                      CSmartTableCleaner,
-                      {
-                        onClick: () => clean(),
-                        isFiltered: isFiltered.value,
-                      },
-                      {
-                        // @slot Cleaner icon.
-                        cleanerIcon: () =>
-                          slots.cleanerIcon
-                            ? slots.cleanerIcon()
-                            : h(CIcon, { width: '18', content: cilFilterX }),
-                      },
-                    ),
+                  h(
+                    CSmartTableCleaner,
+                    {
+                      onClick: () => clean(),
+                      isFiltered: isFiltered.value,
+                    },
+                    {
+                      // @slot Cleaner icon.
+                      cleanerIcon: () =>
+                        slots.cleanerIcon
+                          ? slots.cleanerIcon()
+                          : h(CIcon, { width: '18', content: cilFilterX }),
+                    },
+                  ),
                 ),
-              ],
-          },
-        ), //h
+            ],
+          ), //h
         h(
           'div',
           {
@@ -797,7 +812,7 @@ const CSmartTable = defineComponent({
               h(
                 'div',
                 {
-                  class: 'col-auto',
+                  class: 'col',
                 },
                 props.pagination && numberOfPages.value > 1
                   ? h(CSmartPagination, {