@coreui/vue-pro 4.1.0 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -43,14 +43,14 @@
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
     "@vue/test-utils": "^2.0.0-0",
-    "rollup": "^2.60.1",
+    "rollup": "^2.60.2",
     "rollup-plugin-vue": "^6.0.0",
     "typescript": "^4.5.2",
-    "vue": "^3.2.23",
+    "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/modal/CModal.ts

@@ -133,7 +133,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 +144,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 +168,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()

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/smart-table/CSmartTable.ts

@@ -67,7 +67,6 @@ const CSmartTable = defineComponent({
      */
     columnFilter: {
       type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
-      default: undefined,
       required: false,
     },
     /**
@@ -144,7 +143,6 @@ const CSmartTable = defineComponent({
      */
     itemsPerPage: {
       type: Number,
-      default: 10,
       required: false,
     },
     /**
@@ -216,7 +214,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 +403,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 || {})
@@ -657,6 +656,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,7 +706,8 @@ const CSmartTable = defineComponent({
                         {
                           component: 'head',
                           ...props.tableHeadProps,
-                          columnFilter: columnFilterState.value,
+                          columnFilter: props.columnFilter,
+                          columnFilterValue: columnFilterState.value,
                           columns: props.columns,
                           columnSorter: props.columnSorter,
                           selectable: props.selectable,

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)],
                                 }),
                             }),
                         },