@coreui/vue-pro 4.1.4 → 4.2.0

package/dist/index.js

@@ -176,6 +176,7 @@ const CAccordionButton = vue.defineComponent({
         const toggleVisibility = vue.inject('toggleVisibility');
         const visible = vue.inject('visible');
         return () => vue.h('button', {
+            type: 'button',
             'aria-expanded': !visible.value,
             class: ['accordion-button', { ['collapsed']: !visible.value }],
             onClick: () => toggleVisibility(),
@@ -347,6 +348,9 @@ const CCloseButton = vue.defineComponent({
     ],
     setup(props, { emit }) {
         const handleClick = () => {
+            if (props.disabled) {
+                return;
+            }
             emit('click');
         };
         return () => vue.h('button', {
@@ -822,6 +826,20 @@ const CButton = vue.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.
          *
@@ -836,7 +854,19 @@ const CButton = vue.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 () => vue.h(props.component, {
             class: [
                 'btn',
@@ -851,6 +881,8 @@ const CButton = vue.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());
     },
 });
@@ -1809,6 +1841,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.
@@ -2041,7 +2077,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;
@@ -2049,7 +2085,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;
@@ -3508,6 +3544,20 @@ const CDropdown = vue.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.
          */
@@ -3593,21 +3643,23 @@ const CDropdown = vue.defineComponent({
         'show',
     ],
     setup(props, { slots, emit }) {
-        const dropdownRef = vue.ref();
+        const dropdownToggleRef = vue.ref();
         const dropdownMenuRef = vue.ref();
         const placement = vue.ref(props.placement);
         const popper = vue.ref();
-        const config = vue.reactive({
+        const visible = vue.ref(props.visible);
+        vue.watch(() => props.visible, () => {
+            visible.value = props.visible;
+        });
+        vue.provide('config', {
+            autoClose: props.autoClose,
             alignment: props.alignment,
             dark: props.dark,
             popper: props.popper,
-            visible: props.visible,
         });
-        const { visible } = vue.toRefs(config);
-        vue.provide('config', config);
         vue.provide('variant', props.variant);
         vue.provide('visible', visible);
-        vue.provide('dropdownRef', dropdownRef);
+        vue.provide('dropdownToggleRef', dropdownToggleRef);
         vue.provide('dropdownMenuRef', dropdownMenuRef);
         if (props.direction === 'dropup') {
             placement.value = 'top-start';
@@ -3626,8 +3678,8 @@ const CDropdown = vue.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,
                 });
             }
@@ -3638,40 +3690,28 @@ const CDropdown = vue.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;
             }
-        };
-        vue.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();
+        vue.provide('toggleMenu', toggleMenu);
+        const hideMenu = () => {
+            if (props.disabled) {
+                return;
             }
+            visible.value = false;
         };
-        vue.onMounted(() => {
-            window.addEventListener('click', handleClickOutside);
-            window.addEventListener('keyup', handleKeyup);
-        });
-        vue.onUnmounted(() => {
-            window.removeEventListener('click', handleClickOutside);
-            window.removeEventListener('keyup', handleKeyup);
-        });
+        vue.provide('hideMenu', hideMenu);
         vue.watch(visible, () => {
             props.popper && (visible.value ? initPopper() : destroyPopper());
             visible.value ? emit('show') : emit('hide');
@@ -3777,10 +3817,12 @@ const CDropdownMenu = vue.defineComponent({
         },
     },
     setup(props, { slots }) {
+        const dropdownToggleRef = vue.inject('dropdownToggleRef');
         const dropdownMenuRef = vue.inject('dropdownMenuRef');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const config = vue.inject('config');
-        const { alignment, dark, popper, visible } = vue.toRefs(config);
+        const config = vue.inject('config'); // eslint-disable-line @typescript-eslint/no-explicit-any
+        const hideMenu = vue.inject('hideMenu');
+        const visible = vue.inject('visible');
+        const { autoClose, alignment, dark, popper } = config;
         // eslint-disable-next-line @typescript-eslint/ban-types
         const alignmentClassNames = (alignment) => {
             const classNames = [];
@@ -3794,13 +3836,46 @@ const CDropdownMenu = vue.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();
+            }
+        };
+        vue.onUpdated(() => {
+            visible.value && window.addEventListener('mouseup', handleMouseUp);
+            visible.value && window.addEventListener('keyup', handleKeyup);
+        });
+        vue.onUnmounted(() => {
+            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('keyup', handleKeyup);
+        });
         return () => vue.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,
@@ -3843,6 +3918,10 @@ const CDropdownToggle = vue.defineComponent({
             default: 'button',
             require: false,
         },
+        /**
+         * Create a custom toggler which accepts any content.
+         */
+        custom: Boolean,
         /**
          * Toggle the disabled state for the component.
          */
@@ -3874,6 +3953,16 @@ const CDropdownToggle = vue.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.
          *
@@ -3889,7 +3978,8 @@ const CDropdownToggle = vue.defineComponent({
         },
     },
     setup(props, { slots }) {
-        const dropdownRef = vue.inject('dropdownRef');
+        const togglerRef = vue.ref();
+        const dropdownToggleRef = vue.inject('dropdownToggleRef');
         const dropdownVariant = vue.inject('variant');
         const visible = vue.inject('visible');
         const toggleMenu = vue.inject('toggleMenu');
@@ -3897,43 +3987,70 @@ const CDropdownToggle = vue.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'
-            ? vue.h('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() })
-            : vue.h(
-            // 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
-                ? vue.h('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),
+            }),
+        };
+        vue.onMounted(() => {
+            if (togglerRef.value) {
+                dropdownToggleRef.value = togglerRef.value.$el;
+            }
+        });
+        return () => props.custom
+            ? slots.default &&
+                slots.default().map((slot) => vue.cloneVNode(slot, {
+                    ref: (el) => {
+                        togglerRef.value = el;
+                    },
+                    ...triggers,
+                }))
+            : dropdownVariant === 'nav-item'
+                ? vue.h('a', {
+                    active: props.active,
+                    class: [
+                        'nav-link',
+                        className,
+                        {
+                            show: visible.value,
+                        },
+                    ],
+                    disabled: props.disabled,
+                    href: '#',
+                    ref: dropdownToggleRef,
+                    ...triggers,
+                }, { default: () => slots.default && slots.default() })
+                : vue.h(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
+                    ? vue.h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
+                    : slots.default && slots.default());
     },
 });
 
@@ -4339,6 +4456,7 @@ const CFormCheck = vue.defineComponent({
         };
         const formControl = () => {
             return vue.h('input', {
+                ...attrs,
                 checked: props.modelValue,
                 class: [
                     props.button ? 'btn-check' : 'form-check-input',
@@ -4351,7 +4469,6 @@ const CFormCheck = vue.defineComponent({
                 indeterminate: props.indeterminate,
                 onChange: (event) => handleChange(event),
                 type: props.type,
-                ...attrs,
             });
         };
         const formLabel = () => {
@@ -4384,6 +4501,7 @@ const CFormCheck = vue.defineComponent({
                             'is-invalid': props.invalid,
                             'is-valid': props.valid,
                         },
+                        attrs.class,
                     ],
                 }, [formControl(), props.label && formLabel()])
                 : formControl();
@@ -4832,11 +4950,6 @@ const CFormSwitch = vue.defineComponent({
     ],
     setup(props, { attrs, emit }) {
         const checked = vue.ref(attrs.checked);
-        vue.onMounted(() => {
-            if (props.modelValue && typeof props.modelValue === 'boolean') {
-                console.log(props.modelValue);
-            }
-        });
         vue.watch(() => props.modelValue, () => {
             if (typeof props.modelValue === 'boolean')
                 checked.value = props.modelValue;