@coreui/vue-pro 5.0.0-alpha.0 → 5.0.0-beta.0

package/src/components/dropdown/CDropdownToggle.ts

@@ -1,4 +1,14 @@
-import { cloneVNode, defineComponent, h, inject, onMounted, PropType, Ref, ref } from 'vue'
+import {
+  cloneVNode,
+  computed,
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  PropType,
+  Ref,
+  ref,
+} from 'vue'
 
 import { CButton } from '../button'
 
@@ -8,10 +18,6 @@ import type { Triggers } from '../../types'
 const CDropdownToggle = defineComponent({
   name: 'CDropdownToggle',
   props: {
-    /**
-     * Toggle the active state for the component.
-     */
-    active: Boolean,
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -40,6 +46,15 @@ const CDropdownToggle = defineComponent({
      * Toggle the disabled state for the component.
      */
     disabled: Boolean,
+    /**
+     * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
+     *
+     * @since v5.0.0-beta.0
+     */
+    navLink: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
      */
@@ -87,18 +102,10 @@ const CDropdownToggle = defineComponent({
     const visible = inject('visible') as Ref<boolean>
     const setVisible = inject('setVisible') as (_visible?: boolean) => void
 
-    const className = [
-      {
-        'dropdown-toggle': props.caret,
-        'dropdown-toggle-split': props.split,
-        active: props.active,
-        disabled: props.disabled,
-      },
-    ]
-
     const triggers = {
       ...((props.trigger === 'click' || props.trigger.includes('click')) && {
-        onClick: () => {
+        onClick: (event: Event) => {
+          event.preventDefault()
           if (props.disabled) {
             return
           }
@@ -123,6 +130,20 @@ const CDropdownToggle = defineComponent({
       }),
     }
 
+    const togglerProps = computed(() => {
+      return {
+        class: {
+          'nav-link': dropdownVariant === 'nav-item' && props.navLink,
+          'dropdown-toggle': props.caret,
+          'dropdown-toggle-split': props.split,
+          disabled: props.disabled,
+          show: visible.value,
+        },
+        'aria-expanded': visible.value,
+        ...(!props.disabled && { ...triggers }),
+      }
+    })
+
     onMounted(() => {
       if (togglerRef.value) {
         dropdownToggleRef.value = togglerRef.value.$el
@@ -140,45 +161,30 @@ const CDropdownToggle = defineComponent({
               ...triggers,
             }),
           )
-        : dropdownVariant === 'nav-item'
+        : dropdownVariant === 'nav-item' && props.navLink
         ? h(
             'a',
             {
-              active: props.active,
-              class: [
-                'nav-link',
-                className,
-                {
-                  show: visible.value,
-                },
-              ],
-              disabled: props.disabled,
               href: '#',
+              ...togglerProps.value,
+              role: 'button',
               ref: dropdownToggleRef,
-              ...triggers,
             },
             { default: () => slots.default && slots.default() },
           )
         : h(
             CButton,
             {
-              class: [
-                className,
-                {
-                  show: visible.value,
-                },
-              ],
-              active: props.active,
+              ...togglerProps.value,
               color: props.color,
+              component: props.component,
               disabled: props.disabled,
-              ref: (el) => {
-                togglerRef.value = el
-              },
               shape: props.shape,
               size: props.size,
-              ...triggers,
-              ...(props.component === 'button' && { type: 'button' }),
               variant: props.variant,
+              ref: (el) => {
+                togglerRef.value = el
+              },
             },
             () =>
               props.split

package/src/components/dropdown/types.ts

@@ -0,0 +1,11 @@
+export type Directions = 'start' | 'end'
+
+export type Breakpoints =
+  | { xs: Directions }
+  | { sm: Directions }
+  | { md: Directions }
+  | { lg: Directions }
+  | { xl: Directions }
+  | { xxl: Directions }
+
+export type Alignments = Directions | Breakpoints

package/src/components/dropdown/utils.ts

@@ -0,0 +1,73 @@
+import type { Placement } from '@popperjs/core'
+import type { Placements } from '../../types'
+import type { Alignments, Breakpoints } from './types'
+
+export const getAlignmentClassNames = (alignment: Alignments) => {
+  const classNames: string[] = []
+  if (typeof alignment === 'object') {
+    for (const key in alignment) {
+      classNames.push(
+        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`,
+      )
+    }
+  }
+
+  if (typeof alignment === 'string') {
+    classNames.push(`dropdown-menu-${alignment}`)
+  }
+
+  return classNames
+}
+
+export const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean,
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
+export const getPlacement = (
+  placement: Placement,
+  direction: string | undefined,
+  alignment: Alignments | string | undefined,
+  isRTL: boolean,
+): Placements => {
+  let _placement = placement
+
+  if (direction === 'dropup') {
+    _placement = isRTL ? 'top-end' : 'top-start'
+  }
+
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
+  if (direction === 'dropend') {
+    _placement = isRTL ? 'left-start' : 'right-start'
+  }
+
+  if (direction === 'dropstart') {
+    _placement = isRTL ? 'right-start' : 'left-start'
+  }
+
+  if (alignment === 'end') {
+    _placement = isRTL ? 'bottom-start' : 'bottom-end'
+  }
+
+  return _placement
+}

package/src/components/element-cover/CElementCover.ts

@@ -41,15 +41,15 @@ const CElementCover = defineComponent({
         return {}
       }
 
-      const parentCoords = parent.getBoundingClientRect()
-      const customBoundaries = {}
+      const parentCoords: {[key: string]: any} = parent.getBoundingClientRect()
+      const customBoundaries: {[key: string]: string} = {}
       props.boundaries.forEach(({ sides, query }) => {
         const element = parent.querySelector(query)
         if (!element || !sides) {
           return
         }
 
-        const coords = element.getBoundingClientRect()
+        const coords: {[key: string]: any} = element.getBoundingClientRect()
         sides.forEach((side) => {
           const sideMargin = Math.abs(coords[side] - parentCoords[side])
           customBoundaries[side] = `${sideMargin}px`

package/src/components/form/CFormCheck.ts

@@ -17,7 +17,7 @@ const CFormCheck = defineComponent({
     /**
      * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
      *
-     * @since 4.9.0
+     * @since 4.10.0
      */
     falseValue: String,
     /**
@@ -90,7 +90,7 @@ const CFormCheck = defineComponent({
     /**
      * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
      *
-     * @since 4.9.0
+     * @since 4.10.0
      */
     trueValue: String,
     /**
@@ -189,7 +189,7 @@ const CFormCheck = defineComponent({
     const formControl = () => {
       return h('input', {
         ...attrs,
-        ...(props.modelValue && props.value && { checked: isChecked.value }),
+        ...((props.modelValue || props.value) && { checked: isChecked.value }),
         class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,
@@ -259,4 +259,4 @@ const CFormCheck = defineComponent({
   },
 })
 
-export { CFormCheck }
+export { CFormCheck }

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './card'
 export * from './carousel'
 export * from './close-button'
 export * from './collapse'
+export * from './conditional-teleport'
 export * from './date-picker'
 export * from './date-range-picker'
 export * from './dropdown'

package/src/components/modal/CModal.ts

@@ -51,6 +51,15 @@ const CModal = defineComponent({
      * A string of all className you want applied to the modal content component.
      */
     contentClassName: String,
+    /**
+     * Puts the focus on the modal when shown.
+     *
+     * @since v5.0.0-beta.0
+     */
+    focus: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Set modal to covers the entire user viewport
      *
@@ -124,6 +133,7 @@ const CModal = defineComponent({
     'show',
   ],
   setup(props, { slots, attrs, emit }) {
+    const activeElementRef = ref()
     const modalRef = ref()
     const modalContentRef = ref()
     const visible = ref(props.visible)
@@ -136,6 +146,7 @@ const CModal = defineComponent({
     )
 
     const handleEnter = (el: RendererElement, done: () => void) => {
+      activeElementRef.value = document.activeElement as HTMLElement | null
       executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.add('modal-open')
       document.body.style.overflow = 'hidden'
@@ -148,6 +159,7 @@ const CModal = defineComponent({
     }
 
     const handleAfterEnter = () => {
+      props.focus && modalRef.value?.focus()
       window.addEventListener('mousedown', handleMouseDown)
       window.addEventListener('keyup', handleKeyUp)
     }
@@ -166,6 +178,7 @@ const CModal = defineComponent({
     }
 
     const handleAfterLeave = (el: RendererElement) => {
+      activeElementRef.value?.focus()
       window.removeEventListener('mousedown', handleMouseDown)
       window.removeEventListener('keyup', handleKeyUp)
       el.style.display = 'none'
@@ -217,6 +230,7 @@ const CModal = defineComponent({
       h(
         'div',
         {
+          ...attrs,
           class: [
             'modal',
             {
@@ -224,6 +238,7 @@ const CModal = defineComponent({
             },
             attrs.class,
           ],
+          ...(visible.value ? { 'aria-modal': true, role: 'dialog' } : { 'aria-hidden': 'true' }),
           ref: modalRef,
         },
         h(
@@ -240,7 +255,6 @@ const CModal = defineComponent({
                 [`modal-${props.size}`]: props.size,
               },
             ],
-            role: 'dialog',
           },
           h(
             'div',

package/src/components/multi-select/CMultiSelect.ts

@@ -298,7 +298,7 @@ const CMultiSelect = defineComponent({
       if (
         props.allowCreateOptions &&
         filteredOptions.value.some(
-          (option) => option.text && option.text.toLowerCase() === searchValue.value.toLowerCase(),
+          (option) => option.label && option.label.toLowerCase() === searchValue.value.toLowerCase(),
         )
       ) {
         return false
@@ -425,7 +425,7 @@ const CMultiSelect = defineComponent({
           selected.value = [
             ...selected.value,
             filteredOptions.value.find(
-              (option) => String(option.text).toLowerCase() === searchValue.value.toLowerCase(),
+              (option) => String(option.label).toLowerCase() === searchValue.value.toLowerCase(),
             ) as Option,
           ]
         }
@@ -458,7 +458,7 @@ const CMultiSelect = defineComponent({
 
     const handleOptionClick = (option: Option) => {
       if (!props.multiple) {
-        selected.value = [{ value: option.value, text: option.text }] as SelectedOption[]
+        selected.value = [option] as SelectedOption[]
         visible.value = false
 
         if (searchRef.value) {
@@ -483,10 +483,7 @@ const CMultiSelect = defineComponent({
       if (selected.value.some((_option) => _option.value === option.value)) {
         selected.value = selected.value.filter((_option) => _option.value !== option.value)
       } else {
-        selected.value = [
-          ...selected.value,
-          { value: option.value, text: option.text },
-        ] as SelectedOption[]
+        selected.value = [...selected.value, option] as SelectedOption[]
       }
     }
 
@@ -592,7 +589,7 @@ const CMultiSelect = defineComponent({
                                   }),
                                 ...(selected.value.length > 0 &&
                                   !props.multiple && {
-                                    placeholder: selected.value.map((option) => option.text)[0],
+                                    placeholder: selected.value.map((option) => option.label)[0],
                                   }),
 
                                 ...(props.multiple &&

package/src/components/multi-select/CMultiSelectOptions.ts

@@ -94,7 +94,7 @@ const CMultiSelectOptions = defineComponent({
                   },
                   props.scopedSlots && props.scopedSlots['options']
                     ? h(props.scopedSlots['options'], { option: option })
-                    : option.text,
+                    : option.label,
                 )
               : [
                   h(

package/src/components/multi-select/CMultiSelectSelection.ts

@@ -59,7 +59,7 @@ const CMultiSelectSelection = defineComponent({
             props.selected.map((option: Option) => {
               if (props.selectionType === 'tags') {
                 return h('span', { class: 'form-multi-select-tag' }, [
-                  option.text,
+                  option.label,
                   !option.disabled &&
                     h('button', {
                       class: 'form-multi-select-tag-delete',
@@ -73,9 +73,9 @@ const CMultiSelectSelection = defineComponent({
           props.multiple &&
             props.selectionType === 'text' &&
             props.selected.map((option, index) =>
-              h('span', `${option.text}${index === props.selected.length - 1 ? '' : ','}\xA0`),
+              h('span', `${option.label}${index === props.selected.length - 1 ? '' : ','}\xA0`),
             ),
-          !props.multiple && !props.search && props.selected.map((option) => option.text)[0],
+          !props.multiple && !props.search && props.selected.map((option) => option.label)[0],
           slots.default && slots.default(),
         ],
       )

package/src/components/multi-select/types.ts

@@ -2,7 +2,7 @@ export type Option = {
   custom?: boolean
   disabled?: boolean
   selected?: boolean
-  text: string // TODO: change to label in v5
+  label: string
   value: number | string
   [key: string]: number | string | any
 }
@@ -15,7 +15,7 @@ export type OptionsGroup = {
 
 export type SelectedOption = {
   disabled?: boolean
-  text: string
+  label: string
   value: number | string
   [key: string]: number | string | any
 }

package/src/components/multi-select/utils.ts

@@ -1,7 +1,7 @@
 import type { Option, OptionsGroup, SelectedOption } from './types'
 
-export const createOption = (text: string, options: (Option | OptionsGroup)[]) => {
-  const value = text.toLowerCase().replace(/\s/g, '-')
+export const createOption = (label: string, options: (Option | OptionsGroup)[]) => {
+  const value = label.toLowerCase().replace(/\s/g, '-')
   let uniqueValue = value
   let i = 1
 
@@ -13,7 +13,7 @@ export const createOption = (text: string, options: (Option | OptionsGroup)[]) =
   return [
     {
       value: uniqueValue,
-      text,
+      label,
       custom: true,
     },
   ]
@@ -28,10 +28,10 @@ export const filterOptionsList = (search: string, _options: (Option | OptionsGro
         option.options &&
         option.options.filter(
           (option: Option) =>
-            option.text && option.text.toLowerCase().includes(search.toLowerCase()),
+            option.label && option.label.toLowerCase().includes(search.toLowerCase()),
         )
       if (
-        (option.text && option.text.toLowerCase().includes(search.toLowerCase())) ||
+        (option.label && option.label.toLowerCase().includes(search.toLowerCase())) ||
         (options && options.length > 0)
       ) {
         optionsList.push(Object.assign({}, option, options && options.length > 0 && { options }))

package/src/components/nav/CNav.ts

@@ -24,12 +24,12 @@ const CNav = defineComponent({
     /**
      * Set the nav variant to tabs or pills.
      *
-     * @values 'tabs', 'pills', 'underline'
+     * @values 'pills', 'tabs', 'underline', 'underline-border'
      */
     variant: {
       type: String,
       validator: (value: string) => {
-        return ['tabs', 'pills', 'underline'].includes(value)
+        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
       },
     },
   },

package/src/components/navbar/CNavbar.ts

@@ -74,13 +74,13 @@ const CNavbar = defineComponent({
             'navbar',
             {
               [`bg-${props.color}`]: props.color,
-              [`navbar-${props.colorScheme}`]: props.colorScheme,
               [typeof props.expand === 'boolean'
                 ? 'navbar-expand'
                 : `navbar-expand-${props.expand}`]: props.expand,
             },
             props.placement,
           ],
+          ...(props.colorScheme && { 'data-coreui-theme': props.colorScheme }),
         },
         props.container
           ? h(

package/src/components/offcanvas/COffcanvas.ts

@@ -26,6 +26,10 @@ const COffcanvas = defineComponent({
         return false
       },
     },
+    /**
+     * Sets a darker color scheme.
+     */
+    dark: Boolean,
     /**
      * Closes the offcanvas when escape key is pressed.
      */
@@ -159,6 +163,7 @@ const COffcanvas = defineComponent({
       h(
         Transition,
         {
+          appear: visible.value,
           css: false,
           onEnter: (el, done) => handleEnter(el, done),
           onAfterEnter: () => handleAfterEnter(),
@@ -182,6 +187,7 @@ const COffcanvas = defineComponent({
                 ref: offcanvasRef,
                 role: 'dialog',
                 tabindex: -1,
+                ...(props.dark && { 'data-coreui-theme': 'dark' }),
               },
               slots.default && slots.default(),
             ),

package/src/components/picker/CPicker.ts

@@ -159,7 +159,7 @@ const CPicker = defineComponent({
                 /**
                  * @slot Location for the footer element.
                  */
-                slots.footer && slots.footer(),
+                props.footer && slots.footer && slots.footer(),
               ]),
             ],
           )

package/src/components/popover/CPopover.ts

@@ -1,6 +1,7 @@
-import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
+import { defineComponent, h, PropType, ref, RendererElement, Transition } from 'vue'
 import type { Placement } from '@popperjs/core'
 
+import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
@@ -18,6 +19,17 @@ const CPopover = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v5.0.0-beta.0
+     */
+    container: {
+      type: [HTMLElement, () => HTMLElement, String] as PropType<
+        HTMLElement | (() => HTMLElement) | string
+      >,
+      default: 'body',
+    },
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
@@ -168,53 +180,57 @@ const CPopover = defineComponent({
 
     return () => [
       h(
-        Teleport,
+        CConditionalTeleport,
         {
-          to: 'body',
+          container: props.container,
+          teleport: true,
         },
-        h(
-          Transition,
-          {
-            onEnter: (el, done) => handleEnter(el, done),
-            onLeave: (el, done) => handleLeave(el, done),
-          },
-          () =>
-            visible.value &&
+        {
+          default: () =>
             h(
-              'div',
+              Transition,
               {
-                class: [
-                  'popover',
-                  'bs-popover-auto',
+                onEnter: (el, done) => handleEnter(el, done),
+                onLeave: (el, done) => handleLeave(el, done),
+              },
+              () =>
+                visible.value &&
+                h(
+                  'div',
                   {
-                    fade: props.animation,
+                    class: [
+                      'popover',
+                      'bs-popover-auto',
+                      {
+                        fade: props.animation,
+                      },
+                    ],
+                    ref: popoverRef,
+                    role: 'tooltip',
+                    ...attrs,
                   },
-                ],
-                ref: popoverRef,
-                role: 'tooltip',
-                ...attrs,
-              },
-              [
-                h('div', { class: 'popover-arrow' }),
-                (props.title || slots.title) &&
-                  h(
-                    'div',
-                    { class: 'popover-header' },
-                    {
-                      default: () => (slots.title && slots.title()) || props.title,
-                    },
-                  ),
-                (props.content || slots.content) &&
-                  h(
-                    'div',
-                    { class: 'popover-body' },
-                    {
-                      default: () => (slots.content && slots.content()) || props.content,
-                    },
-                  ),
-              ],
+                  [
+                    h('div', { class: 'popover-arrow' }),
+                    (props.title || slots.title) &&
+                      h(
+                        'div',
+                        { class: 'popover-header' },
+                        {
+                          default: () => (slots.title && slots.title()) || props.title,
+                        },
+                      ),
+                    (props.content || slots.content) &&
+                      h(
+                        'div',
+                        { class: 'popover-body' },
+                        {
+                          default: () => (slots.content && slots.content()) || props.content,
+                        },
+                      ),
+                  ],
+                ),
             ),
-        ),
+        },
       ),
       slots.toggler &&
         slots.toggler({