@coreui/vue-pro 4.3.1 → 4.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.3.1",
+  "version": "4.4.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,23 +35,23 @@
     "watch": "rollup -c -w"
   },
   "config": {
-    "version_short": "4.2"
+    "version_short": "4.4"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-commonjs": "^22.0.1",
+    "@popperjs/core": "^2.11.6",
+    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
+    "@rollup/plugin-typescript": "^8.5.0",
     "@vue/test-utils": "^2.0.2",
-    "date-fns": "^2.29.1",
-    "rollup": "^2.77.2",
+    "date-fns": "^2.29.3",
+    "rollup": "^2.79.0",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.7.4",
-    "vue": "^3.2.37",
-    "vue-types": "^4.2.0"
+    "typescript": "^4.8.3",
+    "vue": "^3.2.39",
+    "vue-types": "^4.2.1"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": "^4.3.2",
+    "@coreui/coreui-pro": "^4.3.4",
     "vue": "^3.2.21"
   },
   "standard": {

package/src/components/date-picker/CDatePicker.ts

@@ -225,9 +225,12 @@ const CDatePicker = defineComponent({
       },
     },
   },
-  emit: [
+  emits: [
     /**
      * Callback fired when the date changed.
+     *
+     * @property {Date} date - date object
+     * @property {string} formatedDate - formated date
      */
     'date-change',
   ],

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -308,9 +308,12 @@ const CDateRangePicker = defineComponent({
       },
     },
   },
-  emit: [
+  emits: [
     /**
      * Callback fired when the end date changed.
+     *
+     * @property {Date} date - date object
+     * @property {string} formatedDate - formated date
      */
     'end-date-change',
     /**
@@ -323,6 +326,9 @@ const CDateRangePicker = defineComponent({
     'show',
     /**
      * Callback fired when the start date changed.
+     *
+     * @property {Date} date - date object
+     * @property {string} formatedDate - formated date
      */
     'start-date-change',
   ],
@@ -458,11 +464,12 @@ const CDateRangePicker = defineComponent({
         },
         () => [
           h(CFormInput, {
+            autocomplete: 'off',
             class: {
               hover: inputStartHoverValue.value,
             },
             disabled: props.disabled,
-            name: props.range ? `${props.id}-start-date` : `${props.id}-date`,
+            ...(props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }),
             onClick: () => {
               selectEndDate.value = false
             },
@@ -494,11 +501,12 @@ const CDateRangePicker = defineComponent({
             ),
           props.range &&
             h(CFormInput, {
+              autocomplete: 'off',
               class: {
                 hover: inputEndHoverValue.value,
               },
               disabled: props.disabled,
-              name: `${props.id}-end-date`,
+              ...(props.id && { name: `${props.id}-end-date` }),
               onClick: () => {
                 selectEndDate.value = true
               },

package/src/components/dropdown/CDropdown.ts

@@ -64,14 +64,14 @@ const CDropdown = defineComponent({
     /**
      * Sets a specified  direction and location of the dropdown menu.
      *
-     * @values 'dropup', 'dropend', 'dropstart'
+     * @values 'center', 'dropup', 'dropup-center', 'dropend', 'dropstart'
      */
     direction: {
       type: String,
       default: undefined,
       required: false,
       validator: (value: string) => {
-        return ['dropup', 'dropend', 'dropstart'].includes(value)
+        return ['center', 'dropup', 'dropup-center', 'dropend', 'dropstart'].includes(value)
       },
     },
     /**
@@ -164,15 +164,26 @@ const CDropdown = defineComponent({
     provide('dropdownToggleRef', dropdownToggleRef)
     provide('dropdownMenuRef', dropdownMenuRef)
 
+    if (props.direction === 'center') {
+      placement.value = 'bottom'
+    }
+
     if (props.direction === 'dropup') {
       placement.value = 'top-start'
     }
+
+    if (props.direction === 'dropup-center') {
+      placement.value = 'top'
+    }
+
     if (props.direction === 'dropend') {
       placement.value = 'right-start'
     }
+
     if (props.direction === 'dropstart') {
       placement.value = 'left-start'
     }
+
     if (props.alignment === 'end') {
       placement.value = 'bottom-end'
     }
@@ -240,7 +251,11 @@ const CDropdown = defineComponent({
             {
               class: [
                 props.variant === 'nav-item' ? 'nav-item dropdown' : props.variant,
-                props.direction,
+                props.direction === 'center'
+                  ? 'dropdown-center'
+                  : props.direction === 'dropup-center'
+                  ? 'dropup dropup-center'
+                  : props.direction,
               ],
             },
             slots.default && slots.default(),

package/src/components/modal/CModal.ts

@@ -145,6 +145,8 @@ const CModal = defineComponent({
     const handleEnter = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.add('modal-open')
+      document.body.style.overflow = 'hidden'
+      document.body.style.paddingRight = '0px'
       el.style.display = 'block'
       setTimeout(() => {
         el.classList.add('show')
@@ -160,6 +162,8 @@ const CModal = defineComponent({
     const handleLeave = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.remove('modal-open')
+      document.body.style.removeProperty('overflow')
+      document.body.style.removeProperty('padding-right')
       if (document.body.className === '') {
         document.body.removeAttribute('class')
       }

package/src/components/sidebar/CSidebar.ts

@@ -144,6 +144,7 @@ const CSidebar = defineComponent({
 
     const handleHide = () => {
       visible.value = false
+      emit('visible-change', false)
     }
 
     const handleResize = () => {
@@ -198,9 +199,7 @@ const CSidebar = defineComponent({
         h(CBackdrop, {
           class: 'sidebar-backdrop d-none',
           visible: props.visible,
-          onClick: () => {
-            visible.value = false
-          },
+          onClick: () => handleHide(),
         }),
     ]
   },

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

@@ -75,7 +75,7 @@ const CSmartTableHead = defineComponent({
         style.cursor = 'pointer'
       }
 
-      if (typeof column === 'object' && column._props) {
+      if (typeof column === 'object' && column._style) {
         return { ...style, ...column._style }
       }
       return style

package/src/components/table/CTable.ts

@@ -97,6 +97,15 @@ const CTable = defineComponent({
       type: Boolean,
       required: false,
     },
+    /**
+     * Add zebra-striping to any table column.
+     *
+     * @since 4.4.0
+     */
+    stripedColumns: {
+      type: Boolean,
+      required: false,
+    },
   },
   setup(props, { slots, attrs }) {
     const table = () =>
@@ -115,6 +124,7 @@ const CTable = defineComponent({
               'table-hover': props.hover,
               'table-sm': props.small,
               'table-striped': props.striped,
+              'table-striped-columns': props.stripedColumns,
             },
             attrs.class,
           ],

package/src/components/time-picker/CTimePicker.ts

@@ -238,6 +238,7 @@ const CTimePicker = defineComponent({
     const InputGroup = () =>
       h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
         h(CFormInput, {
+          autocomplete: 'off',
           disabled: props.disabled,
           onInput: (event) => {
             if (isValidTime(event.target.value)) {

package/src/components/accordion/CAccordionCollapse.ts

@@ -1,28 +0,0 @@
-import { defineComponent, h } from 'vue'
-import { CCollapse } from '../collapse/CCollapse'
-
-const CAccordionCollapse = defineComponent({
-  name: 'CAccordionCollapse',
-  props: {
-    /**
-     * Toggle the visibility of component.
-     */
-    visible: {
-      type: Boolean,
-      required: false,
-    },
-  },
-  setup(props, { slots }) {
-    return () =>
-      h(
-        CCollapse,
-        {
-          class: 'accordion-collapse',
-          visible: props.visible,
-        },
-        slots.default && slots.default(),
-      )
-  },
-})
-
-export { CAccordionCollapse }