@coreui/vue-pro 4.1.4 → 4.2.0

package/README.md

@@ -43,7 +43,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v4.1.4.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v4.2.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-vue-pro.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue-pro`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue-pro`

package/dist/components/button/CButton.d.ts

@@ -59,6 +59,18 @@ export declare const CButton: import("vue").DefineComponent<{
         required: false;
         validator: (value: string) => boolean;
     };
+    /**
+     * 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: StringConstructor;
+        default: string;
+        required: false;
+        validator: (value: string) => boolean;
+    };
     /**
      * Set the button variant to an outlined button or a ghost button.
      *
@@ -72,7 +84,7 @@ export declare const CButton: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Toggle the active state for the component.
      */
@@ -133,6 +145,18 @@ export declare const CButton: import("vue").DefineComponent<{
         required: false;
         validator: (value: string) => boolean;
     };
+    /**
+     * 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: StringConstructor;
+        default: string;
+        required: false;
+        validator: (value: string) => boolean;
+    };
     /**
      * Set the button variant to an outlined button or a ghost button.
      *
@@ -144,7 +168,10 @@ export declare const CButton: import("vue").DefineComponent<{
         required: false;
         validator: (value: string) => boolean;
     };
-}>>, {
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    type: string;
     disabled: boolean;
     variant: string;
     component: string;

package/dist/components/dropdown/CDropdown.d.ts

@@ -12,6 +12,18 @@ declare const CDropdown: import("vue").DefineComponent<{
         required: false;
         validator: (value: string | any) => boolean;
     };
+    /**
+     * 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: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+        validator: (value: boolean | string) => boolean;
+    };
     /**
      * Sets a darker color scheme to match a dark navbar.
      */
@@ -97,6 +109,18 @@ declare const CDropdown: import("vue").DefineComponent<{
         required: false;
         validator: (value: string | any) => boolean;
     };
+    /**
+     * 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: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+        validator: (value: boolean | string) => boolean;
+    };
     /**
      * Sets a darker color scheme to match a dark navbar.
      */
@@ -176,6 +200,7 @@ declare const CDropdown: import("vue").DefineComponent<{
     variant: string;
     direction: string;
     alignment: string | Record<string, any>;
+    autoClose: string | boolean;
     placement: Placement;
     popper: boolean;
     trigger: string | unknown[];

package/dist/components/dropdown/CDropdownToggle.d.ts

@@ -1,3 +1,5 @@
+import { PropType } from 'vue';
+import { Triggers } from '../Types';
 declare const CDropdownToggle: import("vue").DefineComponent<{
     /**
      * Toggle the active state for the component.
@@ -32,6 +34,10 @@ declare const CDropdownToggle: import("vue").DefineComponent<{
         default: string;
         require: boolean;
     };
+    /**
+     * Create a custom toggler which accepts any content.
+     */
+    custom: BooleanConstructor;
     /**
      * Toggle the disabled state for the component.
      */
@@ -64,6 +70,16 @@ declare const CDropdownToggle: import("vue").DefineComponent<{
         type: BooleanConstructor;
         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: PropType<Triggers>;
+        default: string;
+        required: false;
+    };
     /**
      * Set the button variant to an outlined button or a ghost button.
      *
@@ -77,7 +93,9 @@ declare const CDropdownToggle: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Toggle the active state for the component.
      */
@@ -111,6 +129,10 @@ declare const CDropdownToggle: import("vue").DefineComponent<{
         default: string;
         require: boolean;
     };
+    /**
+     * Create a custom toggler which accepts any content.
+     */
+    custom: BooleanConstructor;
     /**
      * Toggle the disabled state for the component.
      */
@@ -143,6 +165,16 @@ declare const CDropdownToggle: import("vue").DefineComponent<{
         type: BooleanConstructor;
         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: PropType<Triggers>;
+        default: string;
+        required: false;
+    };
     /**
      * Set the button variant to an outlined button or a ghost button.
      *
@@ -161,6 +193,8 @@ declare const CDropdownToggle: import("vue").DefineComponent<{
     component: string;
     size: string;
     active: boolean;
+    trigger: Triggers;
     caret: boolean;
+    custom: boolean;
 }>;
 export { CDropdownToggle };

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, reactive, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, nextTick, vShow, computed, Teleport, onBeforeUnmount } from 'vue';
+import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, reactive, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, cloneVNode, nextTick, vShow, computed, Teleport, onBeforeUnmount } from 'vue';
 
 const CAccordion = defineComponent({
     name: 'CAccordion',
@@ -172,6 +172,7 @@ const CAccordionButton = defineComponent({
         const toggleVisibility = inject('toggleVisibility');
         const visible = inject('visible');
         return () => h$1('button', {
+            type: 'button',
             'aria-expanded': !visible.value,
             class: ['accordion-button', { ['collapsed']: !visible.value }],
             onClick: () => toggleVisibility(),
@@ -343,6 +344,9 @@ const CCloseButton = defineComponent({
     ],
     setup(props, { emit }) {
         const handleClick = () => {
+            if (props.disabled) {
+                return;
+            }
             emit('click');
         };
         return () => h$1('button', {
@@ -818,6 +822,20 @@ 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) => {
+                return ['button', 'submit', 'reset'].includes(value);
+            },
+        },
         /**
          * Set the button variant to an outlined button or a ghost button.
          *
@@ -832,7 +850,19 @@ 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$1(props.component, {
             class: [
                 'btn',
@@ -847,6 +877,8 @@ 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());
     },
 });
@@ -1805,6 +1837,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -2037,7 +2073,7 @@ function mapToStyles(_ref2) {
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
       offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
@@ -2045,7 +2081,7 @@ function mapToStyles(_ref2) {
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
       offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
@@ -3504,6 +3540,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) => {
+                return typeof value === 'boolean' || ['inside', 'outside'].includes(value);
+            },
+        },
         /**
          * Sets a darker color scheme to match a dark navbar.
          */
@@ -3589,21 +3639,23 @@ 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 config = reactive({
+        const visible = ref(props.visible);
+        watch(() => props.visible, () => {
+            visible.value = props.visible;
+        });
+        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') {
             placement.value = 'top-start';
@@ -3622,8 +3674,8 @@ const CDropdown = defineComponent({
             if (typeof props.alignment === 'object') {
                 return;
             }
-            if (dropdownRef.value) {
-                popper.value = createPopper(dropdownRef.value, dropdownMenuRef.value, {
+            if (dropdownToggleRef.value) {
+                popper.value = createPopper(dropdownToggleRef.value, dropdownMenuRef.value, {
                     placement: placement.value,
                 });
             }
@@ -3634,40 +3686,28 @@ 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) => {
+            if (props.disabled) {
+                return;
             }
-        };
-        provide('toggleMenu', toggleMenu);
-        const hideMenu = function () {
-            if (props.disabled === false) {
-                visible.value = false;
+            if (typeof _visible == 'boolean') {
+                visible.value = _visible;
+                return;
             }
-        };
-        const handleKeyup = (event) => {
-            if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
-                hideMenu();
+            if (visible.value === true) {
+                visible.value = false;
+                return;
             }
+            visible.value = true;
         };
-        const handleClickOutside = (event) => {
-            if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
-                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());
             visible.value ? emit('show') : emit('hide');
@@ -3773,10 +3813,12 @@ const CDropdownMenu = defineComponent({
         },
     },
     setup(props, { slots }) {
+        const dropdownToggleRef = inject('dropdownToggleRef');
         const dropdownMenuRef = inject('dropdownMenuRef');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const config = inject('config');
-        const { alignment, dark, popper, visible } = toRefs(config);
+        const config = inject('config'); // eslint-disable-line @typescript-eslint/no-explicit-any
+        const hideMenu = inject('hideMenu');
+        const visible = inject('visible');
+        const { autoClose, alignment, dark, popper } = config;
         // eslint-disable-next-line @typescript-eslint/ban-types
         const alignmentClassNames = (alignment) => {
             const classNames = [];
@@ -3790,13 +3832,46 @@ const CDropdownMenu = defineComponent({
             }
             return classNames;
         };
+        const handleKeyup = (event) => {
+            if (autoClose === false) {
+                return;
+            }
+            if (!dropdownMenuRef.value?.contains(event.target)) {
+                hideMenu();
+            }
+        };
+        const handleMouseUp = (event) => {
+            if (dropdownToggleRef.value?.contains(event.target)) {
+                return;
+            }
+            if (autoClose === true) {
+                hideMenu();
+                return;
+            }
+            if (autoClose === 'inside' && dropdownMenuRef.value?.contains(event.target)) {
+                hideMenu();
+                return;
+            }
+            if (autoClose === 'outside' &&
+                !dropdownMenuRef.value?.contains(event.target)) {
+                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$1(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,
@@ -3839,6 +3914,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.
          */
@@ -3870,6 +3949,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,
+            default: 'click',
+            required: false,
+        },
         /**
          * Set the button variant to an outlined button or a ghost button.
          *
@@ -3885,7 +3974,8 @@ const CDropdownToggle = defineComponent({
         },
     },
     setup(props, { slots }) {
-        const dropdownRef = inject('dropdownRef');
+        const togglerRef = ref();
+        const dropdownToggleRef = inject('dropdownToggleRef');
         const dropdownVariant = inject('variant');
         const visible = inject('visible');
         const toggleMenu = inject('toggleMenu');
@@ -3893,43 +3983,70 @@ const CDropdownToggle = defineComponent({
             {
                 '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,
-        ];
-        return () => dropdownVariant === 'nav-item'
-            ? h$1('a', {
-                active: props.active,
-                class: ['nav-link', className],
-                disabled: props.disabled,
-                href: '#',
-                onClick: (event) => {
-                    event.preventDefault();
-                    return toggleMenu();
-                },
-                ref: dropdownRef,
-            }, { default: () => slots.default && slots.default() })
-            : h$1(
-            // TODO: check how to use CButton component
-            props.component, {
-                class: [...className, ...buttonClassName],
-                active: props.active,
-                disabled: props.disabled,
+        const triggers = {
+            ...((props.trigger === 'click' || props.trigger.includes('click')) &&
+                !props.disabled && {
                 onClick: () => toggleMenu(),
-                ...(props.component === 'button' && { type: 'button' }),
-                ref: dropdownRef,
-            }, props.split
-                ? h$1('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
-                : slots.default && slots.default());
+            }),
+            ...((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 () => props.custom
+            ? slots.default &&
+                slots.default().map((slot) => cloneVNode(slot, {
+                    ref: (el) => {
+                        togglerRef.value = el;
+                    },
+                    ...triggers,
+                }))
+            : dropdownVariant === 'nav-item'
+                ? h$1('a', {
+                    active: props.active,
+                    class: [
+                        'nav-link',
+                        className,
+                        {
+                            show: visible.value,
+                        },
+                    ],
+                    disabled: props.disabled,
+                    href: '#',
+                    ref: dropdownToggleRef,
+                    ...triggers,
+                }, { default: () => slots.default && slots.default() })
+                : h$1(CButton, {
+                    class: [
+                        className,
+                        {
+                            show: visible.value,
+                        },
+                    ],
+                    active: props.active,
+                    color: props.color,
+                    disabled: props.disabled,
+                    ref: (el) => {
+                        togglerRef.value = el;
+                    },
+                    shape: props.shape,
+                    size: props.size,
+                    ...triggers,
+                    ...(props.component === 'button' && { type: 'button' }),
+                    variant: props.variant,
+                }, () => props.split
+                    ? h$1('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
+                    : slots.default && slots.default());
     },
 });
 
@@ -4335,6 +4452,7 @@ const CFormCheck = defineComponent({
         };
         const formControl = () => {
             return h$1('input', {
+                ...attrs,
                 checked: props.modelValue,
                 class: [
                     props.button ? 'btn-check' : 'form-check-input',
@@ -4347,7 +4465,6 @@ const CFormCheck = defineComponent({
                 indeterminate: props.indeterminate,
                 onChange: (event) => handleChange(event),
                 type: props.type,
-                ...attrs,
             });
         };
         const formLabel = () => {
@@ -4380,6 +4497,7 @@ const CFormCheck = defineComponent({
                             'is-invalid': props.invalid,
                             'is-valid': props.valid,
                         },
+                        attrs.class,
                     ],
                 }, [formControl(), props.label && formLabel()])
                 : formControl();
@@ -4828,11 +4946,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, () => {
             if (typeof props.modelValue === 'boolean')
                 checked.value = props.modelValue;