@coreui/vue-pro 4.1.0 → 4.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.1.0",
+  "version": "4.1.4",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -38,19 +38,19 @@
     "version_short": "4.1"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.0",
+    "@popperjs/core": "^2.11.2",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.0",
     "@vue/test-utils": "^2.0.0-0",
-    "rollup": "^2.60.1",
+    "rollup": "^2.66.0",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.5.2",
-    "vue": "^3.2.23",
+    "typescript": "^4.5.5",
+    "vue": "^3.2.24",
     "vue-types": "^4.1.1"
   },
   "peerDependencies": {
-    "@coreui/coreui": "^4.1.0",
+    "@coreui/coreui-pro": "^4.1.0",
     "vue": "^3.2.21"
   },
   "standard": {

package/src/components/form/CFormSelect.ts

@@ -3,6 +3,7 @@ import { defineComponent, h, PropType } from 'vue'
 type Option = {
   disabled?: boolean
   label?: string
+  selected?: boolean
   value?: string
 }
 
@@ -28,10 +29,14 @@ const CFormSelect = defineComponent({
      * The default name for a value passed using v-model.
      */
     modelValue: {
-      type: String,
+      type: [String, Array] as PropType<string | string[]>,
       default: undefined,
       require: false,
     },
+    multiple: {
+      type: Boolean,
+      required: false,
+    },
     /**
      * Options list of the select component. Available keys: `label`, `value`, `disabled`.
      * Examples:
@@ -80,9 +85,8 @@ const CFormSelect = defineComponent({
       const selected = Array.from(target.options)
         .filter((option) => option.selected)
         .map((option) => option.value)
-      const value = target.multiple ? selected : selected[0]
       emit('change', event)
-      emit('update:modelValue', value)
+      emit('update:modelValue', target.multiple ? selected : selected[0])
     }
 
     return () =>
@@ -97,17 +101,26 @@ const CFormSelect = defineComponent({
               'is-valid': props.valid,
             },
           ],
+          multiple: props.multiple,
           onChange: (event: InputEvent) => handleChange(event),
           size: props.htmlSize,
+          ...(props.modelValue && !props.multiple && { value: props.modelValue }),
         },
         props.options
           ? props.options.map((option: Option | string) => {
               return h(
                 'option',
                 {
-                  ...(typeof option === 'object' &&
-                    option.disabled && { disabled: option.disabled }),
-                  ...(typeof option === 'object' && option.value && { value: option.value }),
+                  ...(typeof option === 'object' && {
+                    ...(option.disabled && { disabled: option.disabled }),
+                    ...(option.selected && { selected: option.selected }),
+                    ...(option.value && {
+                      value: option.value,
+                      ...(props.modelValue &&
+                        props.multiple &&
+                        props.modelValue.includes(option.value) && { selected: true }),
+                    }),
+                  }),
                 },
                 typeof option === 'string' ? option : option.label,
               )

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

@@ -1,7 +1,13 @@
 // 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 class=\\"btn btn-outline-warning btn-lg rounded-circle\\" for=\\"uniqueid\\">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 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 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__/CFormSelect.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormSelect component renders correctly 1`] = `"<select class=\\"form-select form-select-lg\\" size=\\"200\\">Default slot</select>"`;
+exports[`Customize CFormSelect component renders correctly 1`] = `"<select class=\\"form-select form-select-lg is-invalid is-valid\\" size=\\"200\\">Default slot</select>"`;
 
 exports[`Loads and display CFormSelect component renders correctly 1`] = `"<select class=\\"form-select\\">Default slot</select>"`;

package/src/components/modal/CModal.ts

@@ -1,4 +1,14 @@
-import { defineComponent, h, provide, ref, RendererElement, Transition, watch } from 'vue'
+import {
+  defineComponent,
+  h,
+  provide,
+  ref,
+  RendererElement,
+  Transition,
+  vShow,
+  watch,
+  withDirectives,
+} from 'vue'
 
 import { CBackdrop } from './../backdrop/CBackdrop'
 
@@ -90,6 +100,14 @@ const CModal = defineComponent({
       default: true,
       required: false,
     },
+    /**
+     * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+     */
+    unmountOnClose: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
     /**
      * Toggle the visibility of alert component.
      */
@@ -133,7 +151,7 @@ const CModal = defineComponent({
       emit('show')
     }
     const handleAfterEnter = () => {
-      window.addEventListener('click', handleClickOutside)
+      window.addEventListener('mousedown', handleMouseDown)
       window.addEventListener('keyup', handleKeyUp)
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
@@ -144,7 +162,7 @@ const CModal = defineComponent({
       el.classList.remove('show')
     }
     const handleAfterLeave = (el: RendererElement) => {
-      window.removeEventListener('click', handleClickOutside)
+      window.removeEventListener('mousedown', handleMouseDown)
       window.removeEventListener('keyup', handleKeyUp)
       el.style.display = 'none'
     }
@@ -168,7 +186,12 @@ const CModal = defineComponent({
         }
       }
     }
-    const handleClickOutside = (event: Event) => {
+
+    const handleMouseDown = (event: Event) => {
+      window.addEventListener('mouseup', () => handleMouseUp(event), { once: true })
+    }
+
+    const handleMouseUp = (event: Event) => {
       if (modalContentRef.value && !modalContentRef.value.contains(event.target as HTMLElement)) {
         if (props.backdrop !== 'static') {
           handleDismiss()
@@ -184,52 +207,57 @@ const CModal = defineComponent({
 
     provide('handleDismiss', handleDismiss)
 
+    const modal = () =>
+      h(
+        'div',
+        {
+          class: [
+            'modal',
+            {
+              ['fade']: props.transition,
+            },
+            attrs.class,
+          ],
+          ref: modalRef,
+        },
+        h(
+          'div',
+          {
+            class: [
+              'modal-dialog',
+              {
+                'modal-dialog-centered': props.alignment === 'center',
+                [`modal-fullscreen-${props.fullscreen}-down`]:
+                  props.fullscreen && typeof props.fullscreen === 'string',
+                'modal-fullscreen': props.fullscreen && typeof props.fullscreen === 'boolean',
+                ['modal-dialog-scrollable']: props.scrollable,
+                [`modal-${props.size}`]: props.size,
+              },
+            ],
+            role: 'dialog',
+          },
+          h(
+            'div',
+            { class: ['modal-content', props.contentClassName], ref: modalContentRef },
+            slots.default && slots.default(),
+          ),
+        ),
+      )
+
     return () => [
       h(
         Transition,
         {
+          css: false,
           onEnter: (el, done) => handleEnter(el, done),
           onAfterEnter: () => handleAfterEnter(),
           onLeave: (el, done) => handleLeave(el, done),
           onAfterLeave: (el) => handleAfterLeave(el),
         },
         () =>
-          visible.value &&
-          h(
-            'div',
-            {
-              class: [
-                'modal',
-                {
-                  ['fade']: props.transition,
-                },
-                attrs.class,
-              ],
-              ref: modalRef,
-            },
-            h(
-              'div',
-              {
-                class: [
-                  'modal-dialog',
-                  {
-                    'modal-dialog-centered': props.alignment === 'center',
-                    [`modal-fullscreen-${props.fullscreen}-down`]:
-                      props.fullscreen && typeof props.fullscreen === 'string',
-                    'modal-fullscreen': props.fullscreen && typeof props.fullscreen === 'boolean',
-                    ['modal-dialog-scrollable']: props.scrollable,
-                    [`modal-${props.size}`]: props.size,
-                  },
-                ],
-                role: 'dialog',
-              },
-              h(
-                'div',
-                { class: ['modal-content', props.contentClassName], ref: modalContentRef },
-                slots.default && slots.default(),
-              ),
-            ),
-          ),
+          props.unmountOnClose
+            ? visible.value && modal()
+            : withDirectives(modal(), [[vShow, visible.value]]),
       ),
       props.backdrop &&
         h(CBackdrop, {

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

@@ -7,8 +7,7 @@ exports[`Customize CModal component renders correctly 1`] = `
       <div class=\\"modal-content bazinga\\">Default slot</div>
     </div>
   </div>
-</transition-stub>
-<!---->"
+</transition-stub>"
 `;
 
 exports[`Loads and display CModal component renders correctly 1`] = `

package/src/components/offcanvas/COffcanvas.ts

@@ -97,19 +97,20 @@ const COffcanvas = defineComponent({
       }, 1)
     }
     const handleAfterEnter = () => {
-      window.addEventListener('click', handleClickOutside)
+      window.addEventListener('mousedown', handleMouseDown)
+      // window.addEventListener('click', handleClickOutside)
       window.addEventListener('keyup', handleKeyUp)
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
       el.addEventListener('transitionend', () => {
         done()
       })
+      window.removeEventListener('mousedown', handleMouseDown)
+      window.removeEventListener('keyup', handleKeyUp)
       el.classList.remove('show')
     }
     const handleAfterLeave = (el: RendererElement) => {
       el.style.visibility = 'hidden'
-      window.removeEventListener('click', handleClickOutside)
-      window.removeEventListener('keyup', handleKeyUp)
     }
 
     const handleDismiss = () => {
@@ -124,7 +125,12 @@ const COffcanvas = defineComponent({
         }
       }
     }
-    const handleClickOutside = (event: Event) => {
+
+    const handleMouseDown = (event: Event) => {
+      window.addEventListener('mouseup', () => handleMouseUp(event), { once: true })
+    }
+
+    const handleMouseUp = (event: Event) => {
       if (offcanvasRef.value && !offcanvasRef.value.contains(event.target as HTMLElement)) {
         props.backdrop && handleDismiss()
       }
@@ -134,6 +140,7 @@ const COffcanvas = defineComponent({
       h(
         Transition,
         {
+          css: false,
           onEnter: (el, done) => handleEnter(el, done),
           onAfterEnter: () => handleAfterEnter(),
           onLeave: (el, done) => handleLeave(el, done),

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap

@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSidebar component renders correctly 1`] = `
-"<div class=\\"sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable\\">Default slot</div>
-<!---->"
-`;
+exports[`Customize CSidebar component renders correctly 1`] = `"<div class=\\"sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable\\">Default slot</div>"`;
 
-exports[`Loads and display CSidebar component renders correctly 1`] = `
-"<div class=\\"sidebar hide\\">Default slot</div>
-<!---->"
-`;
+exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class=\\"sidebar hide\\">Default slot</div>"`;

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

@@ -67,7 +67,6 @@ const CSmartTable = defineComponent({
      */
     columnFilter: {
       type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
-      default: undefined,
       required: false,
     },
     /**
@@ -95,7 +94,6 @@ const CSmartTable = defineComponent({
      */
     columns: {
       type: Array as PropType<Column[] | string[]>,
-      default: () => [],
       required: false,
     },
     /**
@@ -144,7 +142,6 @@ const CSmartTable = defineComponent({
      */
     itemsPerPage: {
       type: Number,
-      default: 10,
       required: false,
     },
     /**
@@ -216,7 +213,8 @@ const CSmartTable = defineComponent({
      */
     selectable: Boolean,
     /**
-     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes.
+     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes. eg.:
+     * { column: 'status', state: 'asc' }
      *
      * @type SorterValue
      */
@@ -404,7 +402,7 @@ const CSmartTable = defineComponent({
       }
     })
 
-    const itemsPerPage = ref<number>(props.itemsPerPage)
+    const itemsPerPage = ref<number>(props.itemsPerPage || items.value.length)
     const activePage = ref(props.activePage)
 
     const sorterState: SorterValue = reactive(props.sorterValue || {})
@@ -423,7 +421,7 @@ const CSmartTable = defineComponent({
     // functions
 
     const isSortable = (i: number): boolean | undefined => {
-      const isDataColumn = itemsDataColumns.value.includes(rawColumnNames[i])
+      const isDataColumn = itemsDataColumns.value.includes(rawColumnNames.value[i])
       let column
       if (props.columns) column = props.columns[i]
       return (
@@ -539,16 +537,22 @@ const CSmartTable = defineComponent({
 
     // computed
 
-    const genCols = Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_')
+    const genCols = computed(() =>
+      Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_'),
+    )
 
-    const rawColumnNames = props.columns
-      ? props.columns.map((column: Column | string) => {
-          if (typeof column === 'object') return column.key
-          else return column
-        })
-      : genCols //! || el
+    const rawColumnNames = computed(() =>
+      props.columns
+        ? props.columns.map((column: Column | string) => {
+            if (typeof column === 'object') return column.key
+            else return column
+          })
+        : genCols.value,
+    ) //! || el
 
-    const itemsDataColumns = computed(() => rawColumnNames.filter((name) => genCols.includes(name)))
+    const itemsDataColumns = computed(() =>
+      rawColumnNames.value.filter((name) => genCols.value.includes(name)),
+    )
 
     // variables
 
@@ -657,6 +661,8 @@ const CSmartTable = defineComponent({
                   },
                   props.tableFilter &&
                     h(CSmartTableFilter, {
+                      filterLabel: props.tableFilterLabel,
+                      filterPlaceholder: props.tableFilterPlaceholder,
                       onFilterInput: (value: string) => tableFilterChange(value, 'input'),
                       onFilterChange: (value: string) => tableFilterChange(value, 'change'),
                       value: tableFilterState.value,
@@ -705,8 +711,9 @@ const CSmartTable = defineComponent({
                         {
                           component: 'head',
                           ...props.tableHeadProps,
-                          columnFilter: columnFilterState.value,
-                          columns: props.columns,
+                          columnFilter: props.columnFilter,
+                          columnFilterValue: columnFilterState.value,
+                          columns: props.columns ? props.columns : rawColumnNames.value,
                           columnSorter: props.columnSorter,
                           selectable: props.selectable,
                           selectAll: selectedAll.value,
@@ -760,7 +767,6 @@ const CSmartTable = defineComponent({
                       currentItems: currentItems.value,
                       firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                       noItemsLabel: props.noItemsLabel,
-                      columns: props.columns,
                       scopedSlots: slots,
                       selectable: props.selectable,
                       onRowChecked: (id: number, value: boolean) => handleRowChecked(id, value),
@@ -770,7 +776,7 @@ const CSmartTable = defineComponent({
                         columnName: string,
                         event: MouseEvent | boolean,
                       ) => handleRowClick(item, index, columnName, event),
-                      rawColumnNames: rawColumnNames,
+                      rawColumnNames: rawColumnNames.value,
                       clickableRows: props.clickableRows,
                       ...props.tableBodyProps,
                     }),
@@ -780,7 +786,7 @@ const CSmartTable = defineComponent({
                         ...props.tableFootProps,
                         columnFilter: false,
                         columnSorter: false,
-                        columns: props.columns,
+                        columns: props.columns ? props.columns : rawColumnNames.value,
                         selectable: props.selectable,
                         selectAll: selectedAll.value,
                         onFilterInput: (key: string, value: string) =>
@@ -820,7 +826,6 @@ const CSmartTable = defineComponent({
                       pages: numberOfPages.value,
                       activePage: activePage.value,
                       onActivePageChange: handleActivePageChange,
-                      limit: itemsPerPage.value,
                     })
                   : '',
               ),

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

@@ -27,11 +27,6 @@ const CSmartTableBody = defineComponent({
       default: undefined,
       require: false,
     },
-    columns: {
-      type: Array,
-      default: () => [],
-      require: true,
-    },
     rawColumnNames: {
       type: Array as PropType<string[]>,
       default: () => [],

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

@@ -5,7 +5,13 @@ import { CTableRow } from '../table/CTableRow'
 
 import { CFormCheck, CFormInput } from '../form/'
 
-import { Column, ColumnFilter, Sorter, SorterValue } from './CSmartTableInterface'
+import {
+  Column,
+  ColumnFilter,
+  ColumnFilterValue,
+  Sorter,
+  SorterValue,
+} from './CSmartTableInterface'
 
 const CSmartTableHead = defineComponent({
   name: 'CSmartTableHead',
@@ -17,9 +23,12 @@ const CSmartTableHead = defineComponent({
     },
     columnFilter: {
       type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
-      default: undefined,
       require: false,
     },
+    columnFilterValue: {
+      type: Object as PropType<ColumnFilterValue>,
+      required: false,
+    },
     columnSorter: {
       type: [Boolean, Object] as PropType<boolean | Sorter>,
       default: undefined,
@@ -221,9 +230,9 @@ const CSmartTableHead = defineComponent({
                                   (event.target as HTMLInputElement).value,
                                 ),
                               'aria-label': `column name: '${label(column)}' filter input`,
-                              ...(props.columnFilter &&
-                                props.columnFilter[key(column)] && {
-                                  value: props.columnFilter[key(column)],
+                              ...(props.columnFilterValue &&
+                                props.columnFilterValue[key(column)] && {
+                                  value: props.columnFilterValue[key(column)],
                                 }),
                             }),
                         },