@coreui/vue-pro 4.1.2 → 4.2.0

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;
@@ -8550,11 +8663,6 @@ const CSmartTableBody = defineComponent({
             default: undefined,
             require: false,
         },
-        columns: {
-            type: Array,
-            default: () => [],
-            require: true,
-        },
         rawColumnNames: {
             type: Array,
             default: () => [],
@@ -9148,7 +9256,6 @@ const CSmartTable = defineComponent({
          */
         columns: {
             type: Array,
-            default: () => [],
             required: false,
         },
         /**
@@ -9456,7 +9563,7 @@ const CSmartTable = defineComponent({
         });
         // functions
         const isSortable = (i) => {
-            const isDataColumn = itemsDataColumns.value.includes(rawColumnNames[i]);
+            const isDataColumn = itemsDataColumns.value.includes(rawColumnNames.value[i]);
             let column;
             if (props.columns)
                 column = props.columns[i];
@@ -9554,16 +9661,16 @@ const CSmartTable = defineComponent({
             sorterState.state = '';
         };
         // computed
-        const genCols = Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_');
-        const rawColumnNames = props.columns
+        const genCols = computed(() => Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_'));
+        const rawColumnNames = computed(() => props.columns
             ? props.columns.map((column) => {
                 if (typeof column === 'object')
                     return column.key;
                 else
                     return column;
             })
-            : genCols; //! || el
-        const itemsDataColumns = computed(() => rawColumnNames.filter((name) => genCols.includes(name)));
+            : genCols.value); //! || el
+        const itemsDataColumns = computed(() => rawColumnNames.value.filter((name) => genCols.value.includes(name)));
         // variables
         const columnFiltered = () => {
             let _items = items.value;
@@ -9669,7 +9776,7 @@ const CSmartTable = defineComponent({
                                     ...props.tableHeadProps,
                                     columnFilter: props.columnFilter,
                                     columnFilterValue: columnFilterState.value,
-                                    columns: props.columns,
+                                    columns: props.columns ? props.columns : rawColumnNames.value,
                                     columnSorter: props.columnSorter,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
@@ -9716,12 +9823,11 @@ const CSmartTable = defineComponent({
                                 currentItems: currentItems.value,
                                 firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                                 noItemsLabel: props.noItemsLabel,
-                                columns: props.columns,
                                 scopedSlots: slots,
                                 selectable: props.selectable,
                                 onRowChecked: (id, value) => handleRowChecked(id, value),
                                 onRowClick: (item, index, columnName, event) => handleRowClick(item, index, columnName, event),
-                                rawColumnNames: rawColumnNames,
+                                rawColumnNames: rawColumnNames.value,
                                 clickableRows: props.clickableRows,
                                 ...props.tableBodyProps,
                             }),
@@ -9731,7 +9837,7 @@ const CSmartTable = defineComponent({
                                     ...props.tableFootProps,
                                     columnFilter: false,
                                     columnSorter: false,
-                                    columns: props.columns,
+                                    columns: props.columns ? props.columns : rawColumnNames.value,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
                                     onFilterInput: (key, value) => columnFilterChange(key, value, 'input'),
@@ -9761,7 +9867,6 @@ const CSmartTable = defineComponent({
                             pages: numberOfPages.value,
                             activePage: activePage.value,
                             onActivePageChange: handleActivePageChange,
-                            limit: itemsPerPage.value,
                         })
                         : ''),
                     h$1('div', {