@coreui/vue-pro 4.1.3 → 4.3.0-beta.0

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,59 @@ const CDropdownMenu = defineComponent({
       return classNames
     }
 
+    const handleKeyup = (event: KeyboardEvent) => {
+      if (autoClose === false) {
+        return
+      }
+
+      if (event.key === 'Escape') {
+        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,109 @@ 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')) && {
+        onClick: () => {
+          if (props.disabled) {
+            return
+          }
+
+          toggleMenu()
+        },
+      }),
+      ...((props.trigger === 'focus' || props.trigger.includes('focus')) && {
+        onfocus: () => {
+          if (props.disabled) {
+            return
+          }
+
+          toggleMenu(true)
+        },
+        onblur: () => {
+          if (props.disabled) {
+            return
+          }
+          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\\">"`;

package/src/components/index.ts

@@ -6,11 +6,14 @@ export * from './badge'
 export * from './breadcrumb'
 export * from './button'
 export * from './button-group'
+export * from './calendar'
 export * from './callout'
 export * from './card'
 export * from './carousel'
 export * from './close-button'
 export * from './collapse'
+export * from './date-picker'
+export * from './date-range-picker'
 export * from './dropdown'
 export * from './element-cover'
 export * from './footer'
@@ -27,6 +30,7 @@ export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
 export * from './pagination'
+export * from './picker'
 export * from './placeholder'
 export * from './progress'
 export * from './popover'
@@ -35,6 +39,7 @@ export * from './smart-table'
 export * from './spinner'
 export * from './table'
 export * from './tabs'
+export * from './time-picker'
 export * from './toast'
 export * from './tooltip'
 export * from './widgets'

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

@@ -7,7 +7,8 @@ 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`] = `