@coreui/vue-pro 4.1.4 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.1.4",
+  "version": "4.2.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,18 +35,18 @@
     "watch": "rollup -c -w"
   },
   "config": {
-    "version_short": "4.1"
+    "version_short": "4.2"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.2",
-    "@rollup/plugin-commonjs": "^21.0.1",
+    "@popperjs/core": "^2.11.4",
+    "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@vue/test-utils": "^2.0.0-0",
-    "rollup": "^2.66.0",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@vue/test-utils": "^2.0.0-rc.17",
+    "rollup": "^2.70.1",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.5.5",
-    "vue": "^3.2.24",
+    "typescript": "^4.6.2",
+    "vue": "^3.2.31",
     "vue-types": "^4.1.1"
   },
   "peerDependencies": {

package/src/components/accordion/CAccordionButton.ts

@@ -10,6 +10,7 @@ const CAccordionButton = defineComponent({
       h(
         'button',
         {
+          type: 'button',
           'aria-expanded': !visible.value,
           class: ['accordion-button', { ['collapsed']: !visible.value }],
           onClick: () => toggleVisibility(),

package/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CAccordionButton component renders correctly 1`] = `"<button aria-expanded=\\"true\\" class=\\"accordion-button collapsed\\">Default slot</button>"`;
+exports[`Loads and display CAccordionButton component renders correctly 1`] = `"<button type=\\"button\\" aria-expanded=\\"true\\" class=\\"accordion-button collapsed\\">Default slot</button>"`;

package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CAccordionHeader component renders correctly 1`] = `"<div class=\\"accordion-header\\"><button aria-expanded=\\"true\\" class=\\"accordion-button collapsed\\">Default slot</button></div>"`;
+exports[`Loads and display CAccordionHeader component renders correctly 1`] = `"<div class=\\"accordion-header\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"accordion-button collapsed\\">Default slot</button></div>"`;

package/src/components/button/CButton.ts

@@ -60,6 +60,20 @@ export const CButton = defineComponent({
         return ['sm', 'lg'].includes(value)
       },
     },
+    /**
+     * Specifies the type of button. Always specify the type attribute for the `<button>` element.
+     * Different browsers may use different default types for the `<button>` element.
+     *
+     * @values 'button', 'submit', 'reset'
+     */
+    type: {
+      type: String,
+      default: 'button',
+      required: false,
+      validator: (value: string) => {
+        return ['button', 'submit', 'reset'].includes(value)
+      },
+    },
     /**
      * Set the button variant to an outlined button or a ghost button.
      *
@@ -74,7 +88,20 @@ export const CButton = defineComponent({
       },
     },
   },
-  setup(props, { slots }) {
+  emits: [
+    /**
+     * Event called when the user clicks on the button.
+     */
+    'click',
+  ],
+  setup(props, { emit, slots }) {
+    const handleClick = () => {
+      if (props.disabled) {
+        return
+      }
+
+      emit('click')
+    }
     return () =>
       h(
         props.component,
@@ -92,6 +119,8 @@ export const CButton = defineComponent({
           disabled: props.disabled && props.component !== 'a',
           ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
           ...(props.component === 'a' && props.href && { href: props.href }),
+          ...(props.component === 'button' && { type: props.type }),
+          onClick: handleClick,
         },
         slots.default && slots.default(),
       )

package/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap

@@ -4,4 +4,4 @@ exports[`Customize (number two) CButton component renders correctly 1`] = `"<a c
 
 exports[`Customize CButton component renders correctly 1`] = `"<div class=\\"btn btn-outline-warning btn-lg active disabled rounded-pill\\" disabled=\\"true\\">Default slot</div>"`;
 
-exports[`Loads and display CButton component renders correctly 1`] = `"<button class=\\"btn btn-undefined\\">Default slot</button>"`;
+exports[`Loads and display CButton component renders correctly 1`] = `"<button class=\\"btn btn-undefined\\" type=\\"button\\">Default slot</button>"`;

package/src/components/close-button/CCloseButton.ts

@@ -18,7 +18,6 @@ export const CCloseButton = defineComponent({
       required: false,
     },
   },
-
   emits: [
     /**
      * Event called when the user clicks on the component.
@@ -27,6 +26,10 @@ export const CCloseButton = defineComponent({
   ],
   setup(props, { emit }) {
     const handleClick = () => {
+      if (props.disabled) {
+        return
+      }
+
       emit('click')
     }
     return () =>

package/src/components/dropdown/CDropdown.ts

@@ -1,15 +1,4 @@
-import {
-  defineComponent,
-  h,
-  ref,
-  onUnmounted,
-  onMounted,
-  provide,
-  reactive,
-  toRefs,
-  watch,
-  PropType,
-} from 'vue'
+import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
 const CDropdown = defineComponent({
@@ -51,6 +40,20 @@ const CDropdown = defineComponent({
         }
       },
     },
+    /**
+     * Configure the auto close behavior of the dropdown:
+     * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+     * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+     * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+     * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+     */
+    autoClose: {
+      type: [Boolean, String],
+      default: true,
+      validator: (value: boolean | string) => {
+        return typeof value === 'boolean' || ['inside', 'outside'].includes(value)
+      },
+    },
     /**
      * Sets a darker color scheme to match a dark navbar.
      */
@@ -136,25 +139,29 @@ const CDropdown = defineComponent({
     'show',
   ],
   setup(props, { slots, emit }) {
-    const dropdownRef = ref()
+    const dropdownToggleRef = ref()
     const dropdownMenuRef = ref()
     const placement = ref(props.placement)
     const popper = ref()
+    const visible = ref(props.visible)
+
+    watch(
+      () => props.visible,
+      () => {
+        visible.value = props.visible
+      },
+    )
 
-    const config = reactive({
+    provide('config', {
+      autoClose: props.autoClose,
       alignment: props.alignment,
       dark: props.dark,
       popper: props.popper,
-      visible: props.visible,
     })
 
-    const { visible } = toRefs(config)
-
-    provide('config', config)
-
     provide('variant', props.variant)
     provide('visible', visible)
-    provide('dropdownRef', dropdownRef)
+    provide('dropdownToggleRef', dropdownToggleRef)
     provide('dropdownMenuRef', dropdownMenuRef)
 
     if (props.direction === 'dropup') {
@@ -176,8 +183,8 @@ const CDropdown = defineComponent({
         return
       }
 
-      if (dropdownRef.value) {
-        popper.value = createPopper(dropdownRef.value, dropdownMenuRef.value, {
+      if (dropdownToggleRef.value) {
+        popper.value = createPopper(dropdownToggleRef.value, dropdownMenuRef.value, {
           placement: placement.value,
         })
       }
@@ -190,43 +197,35 @@ const CDropdown = defineComponent({
       popper.value = undefined
     }
 
-    const toggleMenu = function () {
-      if (props.disabled === false) {
-        if (visible.value === true) {
-          visible.value = false
-        } else {
-          visible.value = true
-        }
+    const toggleMenu = (_visible?: boolean) => {
+      if (props.disabled) {
+        return
       }
-    }
 
-    provide('toggleMenu', toggleMenu)
+      if (typeof _visible == 'boolean') {
+        visible.value = _visible
+        return
+      }
 
-    const hideMenu = function () {
-      if (props.disabled === false) {
+      if (visible.value === true) {
         visible.value = false
+        return
       }
-    }
 
-    const handleKeyup = (event: Event) => {
-      if (dropdownRef.value && !dropdownRef.value.contains(event.target as HTMLElement)) {
-        hideMenu()
-      }
+      visible.value = true
     }
-    const handleClickOutside = (event: Event) => {
-      if (dropdownRef.value && !dropdownRef.value.contains(event.target as HTMLElement)) {
-        hideMenu()
+
+    provide('toggleMenu', toggleMenu)
+
+    const hideMenu = () => {
+      if (props.disabled) {
+        return
       }
+
+      visible.value = false
     }
 
-    onMounted(() => {
-      window.addEventListener('click', handleClickOutside)
-      window.addEventListener('keyup', handleKeyup)
-    })
-    onUnmounted(() => {
-      window.removeEventListener('click', handleClickOutside)
-      window.removeEventListener('keyup', handleKeyup)
-    })
+    provide('hideMenu', hideMenu)
 
     watch(visible, () => {
       props.popper && (visible.value ? initPopper() : destroyPopper())

package/src/components/dropdown/CDropdownMenu.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, toRefs, Ref } from 'vue'
+import { defineComponent, h, inject, onUnmounted, onUpdated, Ref } from 'vue'
 
 const CDropdownMenu = defineComponent({
   name: 'CDropdownMenu',
@@ -15,11 +15,13 @@ const CDropdownMenu = defineComponent({
     },
   },
   setup(props, { slots }) {
+    const dropdownToggleRef = inject('dropdownToggleRef') as Ref<HTMLElement>
     const dropdownMenuRef = inject('dropdownMenuRef') as Ref<HTMLElement>
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const config = inject('config') as any
+    const config = inject('config') as any // eslint-disable-line @typescript-eslint/no-explicit-any
+    const hideMenu = inject('hideMenu') as () => void
+    const visible = inject('visible') as Ref<boolean>
 
-    const { alignment, dark, popper, visible } = toRefs(config)
+    const { autoClose, alignment, dark, popper } = config
 
     // eslint-disable-next-line @typescript-eslint/ban-types
     const alignmentClassNames = (alignment: object | string) => {
@@ -35,16 +37,57 @@ const CDropdownMenu = defineComponent({
       return classNames
     }
 
+    const handleKeyup = (event: Event) => {
+      if (autoClose === false) {
+        return
+      }
+      if (!dropdownMenuRef.value?.contains(event.target as HTMLElement)) {
+        hideMenu()
+      }
+    }
+    const handleMouseUp = (event: Event) => {
+      if (dropdownToggleRef.value?.contains(event.target as HTMLElement)) {
+        return
+      }
+
+      if (autoClose === true) {
+        hideMenu()
+        return
+      }
+
+      if (autoClose === 'inside' && dropdownMenuRef.value?.contains(event.target as HTMLElement)) {
+        hideMenu()
+        return
+      }
+
+      if (
+        autoClose === 'outside' &&
+        !dropdownMenuRef.value?.contains(event.target as HTMLElement)
+      ) {
+        hideMenu()
+      }
+    }
+
+    onUpdated(() => {
+      visible.value && window.addEventListener('mouseup', handleMouseUp)
+      visible.value && window.addEventListener('keyup', handleKeyup)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+    })
+
     return () =>
       h(
         props.component,
         {
           class: [
             'dropdown-menu',
-            { 'dropdown-menu-dark': dark.value, show: visible.value },
-            alignmentClassNames(alignment.value),
+            { 'dropdown-menu-dark': dark, show: visible.value },
+            alignmentClassNames(alignment),
           ],
-          ...((typeof alignment.value === 'object' || !popper.value) && {
+          ...((typeof alignment === 'object' || !popper) && {
             'data-coreui-popper': 'static',
           }),
           ref: dropdownMenuRef,

package/src/components/dropdown/CDropdownToggle.ts

@@ -1,6 +1,7 @@
-import { defineComponent, h, inject, Ref } from 'vue'
-
+import { cloneVNode, defineComponent, h, inject, onMounted, PropType, Ref, ref } from 'vue'
+import { CButton } from '../button'
 import { Color, Shape } from '../props'
+import { Triggers } from '../Types'
 
 const CDropdownToggle = defineComponent({
   name: 'CDropdownToggle',
@@ -35,6 +36,10 @@ const CDropdownToggle = defineComponent({
       default: 'button',
       require: false,
     },
+    /**
+     * Create a custom toggler which accepts any content.
+     */
+    custom: Boolean,
     /**
      * Toggle the disabled state for the component.
      */
@@ -66,6 +71,16 @@ const CDropdownToggle = defineComponent({
       type: Boolean,
       required: false,
     },
+    /**
+     * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+     *
+     * @type 'hover' | 'focus' | 'click'
+     */
+    trigger: {
+      type: String as PropType<Triggers>,
+      default: 'click',
+      required: false,
+    },
     /**
      * Set the button variant to an outlined button or a ghost button.
      *
@@ -81,60 +96,94 @@ const CDropdownToggle = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const dropdownRef = inject('dropdownRef') as Ref<HTMLElement>
+    const togglerRef = ref()
+    const dropdownToggleRef = inject('dropdownToggleRef') as Ref<HTMLElement>
     const dropdownVariant = inject('variant') as string
-    const visible = inject('visible') as boolean
-    const toggleMenu = inject('toggleMenu') as () => void
+    const visible = inject('visible') as Ref<boolean>
+    const toggleMenu = inject('toggleMenu') as (_visible?: boolean) => void
+
     const className = [
       {
         'dropdown-toggle': props.caret,
         'dropdown-toggle-split': props.split,
-        show: visible,
         active: props.active,
         disabled: props.disabled,
       },
     ]
 
-    const buttonClassName = [
-      'btn',
-      props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`,
-      {
-        [`btn-${props.size}`]: props.size,
-      },
-      props.shape,
-    ]
+    const triggers = {
+      ...((props.trigger === 'click' || props.trigger.includes('click')) &&
+        !props.disabled && {
+          onClick: () => toggleMenu(),
+        }),
+      ...((props.trigger === 'focus' || props.trigger.includes('focus')) &&
+        !props.disabled && {
+          onfocus: () => toggleMenu(true),
+          onblur: () => toggleMenu(false),
+        }),
+    }
+
+    onMounted(() => {
+      if (togglerRef.value) {
+        dropdownToggleRef.value = togglerRef.value.$el
+      }
+    })
 
     return () =>
-      dropdownVariant === 'nav-item'
+      props.custom
+        ? slots.default &&
+          slots.default().map((slot) =>
+            cloneVNode(slot, {
+              ref: (el) => {
+                togglerRef.value = el
+              },
+              ...triggers,
+            }),
+          )
+        : dropdownVariant === 'nav-item'
         ? h(
             'a',
             {
               active: props.active,
-              class: ['nav-link', className],
+              class: [
+                'nav-link',
+                className,
+                {
+                  show: visible.value,
+                },
+              ],
               disabled: props.disabled,
               href: '#',
-              onClick: (event: Event) => {
-                event.preventDefault()
-                return toggleMenu()
-              },
-              ref: dropdownRef,
+              ref: dropdownToggleRef,
+              ...triggers,
             },
             { default: () => slots.default && slots.default() },
           )
         : h(
-            // TODO: check how to use CButton component
-            props.component,
+            CButton,
             {
-              class: [...className, ...buttonClassName],
+              class: [
+                className,
+                {
+                  show: visible.value,
+                },
+              ],
               active: props.active,
+              color: props.color,
               disabled: props.disabled,
-              onClick: () => toggleMenu(),
+              ref: (el) => {
+                togglerRef.value = el
+              },
+              shape: props.shape,
+              size: props.size,
+              ...triggers,
               ...(props.component === 'button' && { type: 'button' }),
-              ref: dropdownRef,
+              variant: props.variant,
             },
-            props.split
-              ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
-              : slots.default && slots.default(),
+            () =>
+              props.split
+                ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
+                : slots.default && slots.default(),
           )
   },
 })

package/src/components/dropdown/__tests__/CDropdownMenu.spec.ts

@@ -1,22 +1,20 @@
 import { mount } from '@vue/test-utils'
 import { CDropdownMenu as Component } from '../../../index'
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 
 const ComponentName = 'CDropdownMenu'
 
-const config = reactive({
+const config = {
   alignment: { lg: 'end' },
   dark: false,
   popper: true,
-  visible: false,
-})
+}
 
-const customConfig = reactive({
+const customConfig = {
   alignment: { lg: 'end' },
   dark: true,
   popper: false,
-  visible: true,
-})
+}
 
 const defaultWrapper = mount(Component, {
   propsData: {},
@@ -27,6 +25,7 @@ const defaultWrapper = mount(Component, {
     provide: {
       config: config,
       dropdownMenuRef: ref(),
+      visible: ref(false),
     },
   },
 })
@@ -42,6 +41,7 @@ const customWrapper = mount(Component, {
     provide: {
       config: customConfig,
       dropdownMenuRef: ref(),
+      visible: ref(true),
     },
   },
 })

package/src/components/dropdown/__tests__/CDropdownToggle.spec.ts

@@ -18,9 +18,9 @@ const defaultWrapper = mount(Component, {
   },
   global: {
     provide: {
-      dropdownRef: ref(),
+      dropdownToggleRef: ref(),
       variant: 'input-group',
-      visible: true,
+      visible: ref(true),
       toggleMenu: function () {
         return true
       },
@@ -44,9 +44,9 @@ const customWrapper = mount(Component, {
   },
   global: {
     provide: {
-      dropdownRef: ref(),
+      dropdownToggleRef: ref(),
       variant: 'nav-item',
-      visible: true,
+      visible: ref(true),
       toggleMenu: function () {
         return true
       },
@@ -71,7 +71,6 @@ describe(`Loads and display ${ComponentName} component`, () => {
     expect(defaultWrapper.classes('active')).toBe(true)
     expect(defaultWrapper.classes('disabled')).toBe(true)
     expect(defaultWrapper.attributes('disabled')).toBe('')
-    expect(defaultWrapper.attributes('active')).toBe('true')
     expect(defaultWrapper.find('span').classes('visually-hidden')).toBe(true)
     expect(defaultWrapper.find('span').text()).toContain('Toggle Dropdown')
   })

package/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a active=\\"true\\" class=\\"nav-link dropdown-toggle-split show active disabled\\" disabled=\\"true\\" href=\\"#\\">Default slot</a>"`;
+exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a active=\\"true\\" class=\\"nav-link dropdown-toggle-split active disabled show\\" disabled=\\"true\\" href=\\"#\\">Default slot</a>"`;
 
-exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class=\\"dropdown-toggle dropdown-toggle-split show active disabled btn btn-outline-warning btn-lg rounded-pill\\" active=\\"true\\" disabled=\\"\\" type=\\"button\\"><span class=\\"visually-hidden\\">Toggle Dropdown</span></button>"`;
+exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class=\\"btn btn-outline-warning btn-lg active disabled rounded-pill dropdown-toggle dropdown-toggle-split active disabled show\\" disabled=\\"\\" type=\\"button\\"><span class=\\"visually-hidden\\">Toggle Dropdown</span></button>"`;

package/src/components/form/CFormCheck.ts

@@ -128,6 +128,7 @@ const CFormCheck = defineComponent({
 
     const formControl = () => {
       return h('input', {
+        ...attrs,
         checked: props.modelValue,
         class: [
           props.button ? 'btn-check' : 'form-check-input',
@@ -140,7 +141,6 @@ const CFormCheck = defineComponent({
         indeterminate: props.indeterminate,
         onChange: (event: InputEvent) => handleChange(event),
         type: props.type,
-        ...attrs,
       })
     }
     const formLabel = () => {
@@ -181,6 +181,7 @@ const CFormCheck = defineComponent({
                   'is-invalid': props.invalid,
                   'is-valid': props.valid,
                 },
+                attrs.class,
               ],
             },
             [formControl(), props.label && formLabel()],

package/src/components/form/CFormSwitch.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, onMounted, watch, ref } from 'vue'
+import { defineComponent, h, watch, ref } from 'vue'
 
 import { CFormLabel } from './CFormLabel'
 
@@ -81,12 +81,6 @@ const CFormSwitch = defineComponent({
   setup(props, { attrs, emit }) {
     const checked = ref(attrs.checked)
 
-    onMounted(() => {
-      if (props.modelValue && typeof props.modelValue === 'boolean') {
-        console.log(props.modelValue)
-      }
-    })
-
     watch(
       () => props.modelValue,
       () => {

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

@@ -1,13 +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 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\\">"`;