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

package/dist/cjs/components/link/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var CLink = require('./CLink.js');
+
+const CCLinkPlugin = {
+    install: (app) => {
+        app.component(CLink.CLink.name, CLink.CLink);
+    },
+};
+
+exports.CLink = CLink.CLink;
+exports.CCLinkPlugin = CCLinkPlugin;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/link/index.ts"],"sourcesContent":[null],"names":["CLink"],"mappings":";;;;AAGA,MAAM,YAAY,GAAG;AACnB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAACA,WAAK,CAAC,IAAI,EAAEA,WAAK,CAAC,CAAA;KACjC;;;;;;"}

package/dist/cjs/components/list-group/CListGroup.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var vue = require('vue');
+
+const CListGroup = vue.defineComponent({
+    name: 'CListGroup',
+    props: {
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            default: 'ul',
+        },
+        /**
+         * Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`)
+         */
+        flush: Boolean,
+        /**
+         * Specify a layout type.
+         *
+         * @values 'horizontal', 'horizontal-sm', 'horizontal-md', 'horizontal-lg', 'horizontal-xl', 'horizontal-xxl',
+         */
+        layout: {
+            type: String,
+            validator: (value) => {
+                return [
+                    'horizontal',
+                    'horizontal-sm',
+                    'horizontal-md',
+                    'horizontal-lg',
+                    'horizontal-xl',
+                    'horizontal-xxl',
+                ].includes(value);
+            },
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h(props.component, {
+            class: [
+                'list-group',
+                {
+                    'list-group-flush': props.flush,
+                    [`list-group-${props.layout}`]: props.layout,
+                },
+            ],
+        }, slots.default && slots.default());
+    },
+});
+
+exports.CListGroup = CListGroup;
+//# sourceMappingURL=CListGroup.js.map

package/dist/cjs/components/list-group/CListGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CListGroup.js","sources":["../../../../src/components/list-group/CListGroup.ts"],"sourcesContent":[null],"names":["defineComponent","h"],"mappings":";;;;AAEM,MAAA,UAAU,GAAGA,mBAAe,CAAC;AACjC,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;AAEG;AACH,QAAA,KAAK,EAAE,OAAO;AACd;;;;AAIG;AACH,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,SAAS,EAAE,CAAC,KAAa,KAAI;gBAC3B,OAAO;oBACL,YAAY;oBACZ,eAAe;oBACf,eAAe;oBACf,eAAe;oBACf,eAAe;oBACf,gBAAgB;AACjB,iBAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aAClB;AACF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;QACpB,OAAO,MACLC,KAAC,CACC,KAAK,CAAC,SAAS,EACf;AACE,YAAA,KAAK,EAAE;gBACL,YAAY;AACZ,gBAAA;oBACE,kBAAkB,EAAE,KAAK,CAAC,KAAK;oBAC/B,CAAC,CAAA,WAAA,EAAc,KAAK,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM;AAC7C,iBAAA;AACF,aAAA;SACF,EACD,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACjC,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/cjs/components/list-group/CListGroupItem.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var vue = require('vue');
+var props = require('../../props.js');
+
+const CListGroupItem = vue.defineComponent({
+    name: 'CListGroupItem',
+    props: {
+        /**
+         * Toggle the active state for the component.
+         */
+        active: Boolean,
+        /**
+         * Sets the color context of the component to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
+         */
+        color: props.Color,
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: Boolean,
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            default: 'li',
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h(props.component, {
+            class: [
+                'list-group-item',
+                {
+                    [`list-group-item-${props.color}`]: props.color,
+                    'list-group-item-action': props.component === 'a' || props.component === 'button',
+                    [`active`]: props.active,
+                    [`disabled`]: props.disabled,
+                },
+            ],
+            ...((props.component === 'a' || props.component === 'button') && {
+                active: props.active,
+                disabled: props.disabled,
+            }),
+            ...(props.active && { 'aria-current': true }),
+            ...(props.disabled && { 'aria-disabled': true }),
+        }, slots.default && slots.default());
+    },
+});
+
+exports.CListGroupItem = CListGroupItem;
+//# sourceMappingURL=CListGroupItem.js.map

package/dist/cjs/components/list-group/CListGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CListGroupItem.js","sources":["../../../../src/components/list-group/CListGroupItem.ts"],"sourcesContent":[null],"names":["defineComponent","Color","h"],"mappings":";;;;;AAIM,MAAA,cAAc,GAAGA,mBAAe,CAAC;AACrC,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,MAAM,EAAE,OAAO;AACf;;;;AAIG;AACH,QAAA,KAAK,EAAEC,WAAK;AACZ;;AAEG;AACH,QAAA,QAAQ,EAAE,OAAO;AACjB;;AAEG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;QACpB,OAAO,MACLC,KAAC,CACC,KAAK,CAAC,SAAS,EACf;AACE,YAAA,KAAK,EAAE;gBACL,iBAAiB;AACjB,gBAAA;oBACE,CAAC,CAAA,gBAAA,EAAmB,KAAK,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK;oBAC/C,wBAAwB,EAAE,KAAK,CAAC,SAAS,KAAK,GAAG,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ;AACjF,oBAAA,CAAC,CAAQ,MAAA,CAAA,GAAG,KAAK,CAAC,MAAM;AACxB,oBAAA,CAAC,CAAU,QAAA,CAAA,GAAG,KAAK,CAAC,QAAQ;AAC7B,iBAAA;AACF,aAAA;AACD,YAAA,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,KAAK;gBAC/D,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ;aACzB;YACD,IAAI,KAAK,CAAC,MAAM,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE;YAC5C,IAAI,KAAK,CAAC,QAAQ,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE;SAChD,EACD,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACjC,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/cjs/components/list-group/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var CListGroup = require('./CListGroup.js');
+var CListGroupItem = require('./CListGroupItem.js');
+
+const CListGroupPlugin = {
+    install: (app) => {
+        app.component(CListGroup.CListGroup.name, CListGroup.CListGroup);
+        app.component(CListGroupItem.CListGroupItem.name, CListGroupItem.CListGroupItem);
+    },
+};
+
+exports.CListGroup = CListGroup.CListGroup;
+exports.CListGroupItem = CListGroupItem.CListGroupItem;
+exports.CListGroupPlugin = CListGroupPlugin;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/list-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/list-group/index.ts"],"sourcesContent":[null],"names":["CListGroup","CListGroupItem"],"mappings":";;;;;AAIA,MAAM,gBAAgB,GAAG;AACvB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAACA,qBAAU,CAAC,IAAI,EAAEA,qBAAU,CAAC,CAAA;QAC1C,GAAG,CAAC,SAAS,CAACC,6BAAc,CAAC,IAAI,EAAEA,6BAAc,CAAC,CAAA;KACnD;;;;;;;"}

package/dist/cjs/components/loading-button/CLoadingButton.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var vue = require('vue');
+var CButton = require('../button/CButton.js');
+var CSpinner = require('../spinner/CSpinner.js');
+
+const CLoadingButton = vue.defineComponent({
+    name: 'CLoadingButton',
+    props: {
+        /**
+         * Makes button disabled when loading.
+         */
+        disabledOnLoading: Boolean,
+        /**
+         * Loading state (set to true to start animation).
+         */
+        loading: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+        /**
+         * Sets type of spinner.
+         *
+         * @values 'border', 'grow'
+         * @default 'border'
+         */
+        spinnerType: {
+            type: String,
+            default: 'border',
+            required: false,
+            validator: (value) => {
+                return ['border', 'grow'].includes(value);
+            },
+        },
+        /**
+         * Automatically starts loading animation and stops after a determined amount of milliseconds.
+         */
+        timeout: {
+            type: Number,
+            default: undefined,
+            required: false,
+        },
+        ...CButton.CButton.props,
+    },
+    emits: [
+        /**
+         * Event called when the user clicks on a component.
+         */
+        'click',
+    ],
+    setup(props, { emit, slots }) {
+        const loading = vue.ref(props.loading);
+        vue.watch(() => props.loading, () => {
+            loading.value = props.loading;
+        });
+        const handleOnClick = () => {
+            emit('click');
+            if (props.timeout) {
+                loading.value = true;
+                setTimeout(() => {
+                    loading.value = false;
+                }, props.timeout);
+            }
+        };
+        return () => vue.h(CButton.CButton, {
+            ...props,
+            class: ['btn-loading', { ['is-loading']: loading.value }],
+            ...(props.disabledOnLoading && loading.value && { disabled: true }),
+            onClick: () => handleOnClick(),
+        }, {
+            default: () => [
+                vue.h(CSpinner.CSpinner, { class: 'btn-loading-spinner', size: 'sm', variant: props.spinnerType }),
+                slots.default && slots.default(),
+            ],
+        });
+    },
+});
+
+exports.CLoadingButton = CLoadingButton;
+//# sourceMappingURL=CLoadingButton.js.map

package/dist/cjs/components/loading-button/CLoadingButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CLoadingButton.js","sources":["../../../../src/components/loading-button/CLoadingButton.ts"],"sourcesContent":[null],"names":["defineComponent","CButton","ref","watch","h","CSpinner"],"mappings":";;;;;;AAIM,MAAA,cAAc,GAAGA,mBAAe,CAAC;AACrC,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,iBAAiB,EAAE,OAAO;AAC1B;;AAEG;AACH,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AAChB,SAAA;AACD;;;;;AAKG;AACH,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,SAAS,EAAE,CAAC,KAAa,KAAI;gBAC3B,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aAC1C;AACF,SAAA;AACD;;AAEG;AACH,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,KAAK;AAChB,SAAA;QACD,GAAGC,eAAO,CAAC,KAAK;AACjB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;AAEG;QACH,OAAO;AACR,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAA;QAC1B,MAAM,OAAO,GAAGC,OAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAElCC,SAAK,CACH,MAAM,KAAK,CAAC,OAAO,EACnB,MAAK;AACH,YAAA,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;AAC/B,SAAC,CACF,CAAA;QAED,MAAM,aAAa,GAAG,MAAK;YACzB,IAAI,CAAC,OAAO,CAAC,CAAA;YACb,IAAI,KAAK,CAAC,OAAO,EAAE;AACjB,gBAAA,OAAO,CAAC,KAAK,GAAG,IAAI,CAAA;gBACpB,UAAU,CAAC,MAAK;AACd,oBAAA,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;AACvB,iBAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;AAClB,aAAA;AACH,SAAC,CAAA;AAED,QAAA,OAAO,MACLC,KAAC,CACCH,eAAO,EACP;AACE,YAAA,GAAG,KAAK;AACR,YAAA,KAAK,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC,YAAY,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC;AACzD,YAAA,IAAI,KAAK,CAAC,iBAAiB,IAAI,OAAO,CAAC,KAAK,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;AAClE,YAAA,OAAO,EAAE,MAAM,aAAa,EAAE;SAC/B,EACD;YACE,OAAO,EAAE,MAAM;AACb,gBAAAG,KAAC,CAACC,iBAAQ,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC;AACrF,gBAAA,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE;AACjC,aAAA;AACF,SAAA,CACF,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/cjs/components/loading-button/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var CLoadingButton = require('./CLoadingButton.js');
+
+const CLoadingButtonPlugin = {
+    install: (app) => {
+        app.component(CLoadingButton.CLoadingButton.name, CLoadingButton.CLoadingButton);
+    },
+};
+
+exports.CLoadingButton = CLoadingButton.CLoadingButton;
+exports.CLoadingButtonPlugin = CLoadingButtonPlugin;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/loading-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/loading-button/index.ts"],"sourcesContent":[null],"names":["CLoadingButton"],"mappings":";;;;AAGA,MAAM,oBAAoB,GAAG;AAC3B,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAACA,6BAAc,CAAC,IAAI,EAAEA,6BAAc,CAAC,CAAA;KACnD;;;;;;"}

package/dist/cjs/components/modal/CModal.d.ts

@@ -0,0 +1,178 @@
+import { RendererElement } from 'vue';
+declare const CModal: import("vue").DefineComponent<{
+    /**
+     * Align the modal in the center or top of the screen.
+     *
+     * @values 'top', 'center'
+     */
+    alignment: {
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Apply a backdrop on body while offcanvas is open.
+     *
+     * @values boolean | 'static'
+     */
+    backdrop: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+        validator: (value: boolean | string) => boolean;
+    };
+    /**
+     * A string of all className you want applied to the modal content component.
+     */
+    contentClassName: StringConstructor;
+    /**
+     * Puts the focus on the modal when shown.
+     *
+     * @since v5.0.0-beta.0
+     */
+    focus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Set modal to covers the entire user viewport
+     *
+     * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl'
+     */
+    fullscreen: {
+        type: (StringConstructor | BooleanConstructor)[];
+        validator: (value: boolean | string) => boolean;
+    };
+    /**
+     * Closes the modal when escape key is pressed.
+     */
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Create a scrollable modal that allows scrolling the modal body.
+     */
+    scrollable: BooleanConstructor;
+    /**
+     * Size the component small, large, or extra large.
+     *
+     * @values 'sm', 'lg', 'xl'
+     */
+    size: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Remove animation to create modal that simply appear rather than fade in to view.
+     */
+    transition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+     */
+    unmountOnClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Toggle the visibility of alert component.
+     */
+    visible: BooleanConstructor;
+}, () => (false | "" | import("vue").VNode<import("vue").RendererNode, RendererElement, {
+    [key: string]: any;
+}>)[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "show" | "close-prevented")[], "close" | "show" | "close-prevented", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Align the modal in the center or top of the screen.
+     *
+     * @values 'top', 'center'
+     */
+    alignment: {
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Apply a backdrop on body while offcanvas is open.
+     *
+     * @values boolean | 'static'
+     */
+    backdrop: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+        validator: (value: boolean | string) => boolean;
+    };
+    /**
+     * A string of all className you want applied to the modal content component.
+     */
+    contentClassName: StringConstructor;
+    /**
+     * Puts the focus on the modal when shown.
+     *
+     * @since v5.0.0-beta.0
+     */
+    focus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Set modal to covers the entire user viewport
+     *
+     * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl'
+     */
+    fullscreen: {
+        type: (StringConstructor | BooleanConstructor)[];
+        validator: (value: boolean | string) => boolean;
+    };
+    /**
+     * Closes the modal when escape key is pressed.
+     */
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Create a scrollable modal that allows scrolling the modal body.
+     */
+    scrollable: BooleanConstructor;
+    /**
+     * Size the component small, large, or extra large.
+     *
+     * @values 'sm', 'lg', 'xl'
+     */
+    size: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Remove animation to create modal that simply appear rather than fade in to view.
+     */
+    transition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+     */
+    unmountOnClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Toggle the visibility of alert component.
+     */
+    visible: BooleanConstructor;
+}>> & {
+    onShow?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onClose-prevented"?: ((...args: any[]) => any) | undefined;
+}, {
+    transition: boolean;
+    focus: boolean;
+    visible: boolean;
+    alignment: string;
+    backdrop: string | boolean;
+    keyboard: boolean;
+    scrollable: boolean;
+    unmountOnClose: boolean;
+}, {}>;
+export { CModal };

package/dist/cjs/components/modal/CModal.js

@@ -0,0 +1,245 @@
+'use strict';
+
+var vue = require('vue');
+var CBackdrop = require('../backdrop/CBackdrop.js');
+var transition = require('../../utils/transition.js');
+
+const CModal = vue.defineComponent({
+    name: 'CModal',
+    inheritAttrs: false,
+    props: {
+        /**
+         * Align the modal in the center or top of the screen.
+         *
+         * @values 'top', 'center'
+         */
+        alignment: {
+            default: 'top',
+            validator: (value) => {
+                return ['top', 'center'].includes(value);
+            },
+        },
+        /**
+         * Apply a backdrop on body while offcanvas is open.
+         *
+         * @values boolean | 'static'
+         */
+        backdrop: {
+            type: [Boolean, String],
+            default: true,
+            validator: (value) => {
+                if (typeof value == 'string') {
+                    return ['static'].includes(value);
+                }
+                if (typeof value == 'boolean') {
+                    return true;
+                }
+                return false;
+            },
+        },
+        /**
+         * 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
+         *
+         * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl'
+         */
+        fullscreen: {
+            type: [Boolean, String],
+            validator: (value) => {
+                if (typeof value == 'string') {
+                    return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
+                }
+                if (typeof value == 'boolean') {
+                    return true;
+                }
+                return false;
+            },
+        },
+        /**
+         * Closes the modal when escape key is pressed.
+         */
+        keyboard: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Create a scrollable modal that allows scrolling the modal body.
+         */
+        scrollable: Boolean,
+        /**
+         * Size the component small, large, or extra large.
+         *
+         * @values 'sm', 'lg', 'xl'
+         */
+        size: {
+            type: String,
+            validator: (value) => {
+                return ['sm', 'lg', 'xl'].includes(value);
+            },
+        },
+        /**
+         * Remove animation to create modal that simply appear rather than fade in to view.
+         */
+        transition: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+         */
+        unmountOnClose: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Toggle the visibility of alert component.
+         */
+        visible: Boolean,
+    },
+    emits: [
+        /**
+         * Callback fired when the component requests to be closed.
+         */
+        'close',
+        /**
+         * Callback fired when the component requests to be closed.
+         */
+        'close-prevented',
+        /**
+         * Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.
+         */
+        'show',
+    ],
+    setup(props, { slots, attrs, emit }) {
+        const activeElementRef = vue.ref();
+        const modalRef = vue.ref();
+        const modalContentRef = vue.ref();
+        const visible = vue.ref(props.visible);
+        vue.watch(() => props.visible, () => {
+            visible.value = props.visible;
+        });
+        const handleEnter = (el, done) => {
+            activeElementRef.value = document.activeElement;
+            transition.executeAfterTransition(() => done(), el);
+            document.body.classList.add('modal-open');
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = '0px';
+            el.style.display = 'block';
+            setTimeout(() => {
+                el.classList.add('show');
+            }, 1);
+            emit('show');
+        };
+        const handleAfterEnter = () => {
+            props.focus && modalRef.value?.focus();
+            window.addEventListener('mousedown', handleMouseDown);
+            window.addEventListener('keyup', handleKeyUp);
+        };
+        // eslint-disable-next-line unicorn/consistent-function-scoping
+        const handleLeave = (el, done) => {
+            transition.executeAfterTransition(() => done(), el);
+            document.body.classList.remove('modal-open');
+            document.body.style.removeProperty('overflow');
+            document.body.style.removeProperty('padding-right');
+            if (document.body.className === '') {
+                document.body.removeAttribute('class');
+            }
+            el.classList.remove('show');
+        };
+        const handleAfterLeave = (el) => {
+            activeElementRef.value?.focus();
+            window.removeEventListener('mousedown', handleMouseDown);
+            window.removeEventListener('keyup', handleKeyUp);
+            el.style.display = 'none';
+        };
+        const handleDismiss = () => {
+            emit('close');
+            visible.value = false;
+        };
+        const handleKeyUp = (event) => {
+            if (modalContentRef.value && !modalContentRef.value.contains(event.target)) {
+                if (props.backdrop !== 'static' && event.key === 'Escape' && props.keyboard) {
+                    handleDismiss();
+                }
+                if (props.backdrop === 'static') {
+                    modalRef.value.classList.add('modal-static');
+                    emit('close-prevented');
+                    setTimeout(() => {
+                        modalRef.value.classList.remove('modal-static');
+                    }, 300);
+                }
+            }
+        };
+        const handleMouseDown = (event) => {
+            window.addEventListener('mouseup', () => handleMouseUp(event), { once: true });
+        };
+        const handleMouseUp = (event) => {
+            if (modalContentRef.value && !modalContentRef.value.contains(event.target)) {
+                if (props.backdrop !== 'static') {
+                    handleDismiss();
+                }
+                if (props.backdrop === 'static') {
+                    modalRef.value.classList.add('modal-static');
+                    setTimeout(() => {
+                        modalRef.value.classList.remove('modal-static');
+                    }, 300);
+                }
+            }
+        };
+        vue.provide('handleDismiss', handleDismiss);
+        const modal = () => vue.h('div', {
+            ...attrs,
+            class: [
+                'modal',
+                {
+                    ['fade']: props.transition,
+                },
+                attrs.class,
+            ],
+            ...(visible.value ? { 'aria-modal': true, role: 'dialog' } : { 'aria-hidden': 'true' }),
+            ref: modalRef,
+        }, vue.h('div', {
+            class: [
+                'modal-dialog',
+                {
+                    'modal-dialog-centered': props.alignment === 'center',
+                    [`modal-fullscreen-${props.fullscreen}-down`]: props.fullscreen && typeof props.fullscreen === 'string',
+                    'modal-fullscreen': props.fullscreen && typeof props.fullscreen === 'boolean',
+                    ['modal-dialog-scrollable']: props.scrollable,
+                    [`modal-${props.size}`]: props.size,
+                },
+            ],
+        }, vue.h('div', { class: ['modal-content', props.contentClassName], ref: modalContentRef }, slots.default && slots.default())));
+        return () => [
+            vue.h(vue.Transition, {
+                css: false,
+                onEnter: (el, done) => handleEnter(el, done),
+                onAfterEnter: () => handleAfterEnter(),
+                onLeave: (el, done) => handleLeave(el, done),
+                onAfterLeave: (el) => handleAfterLeave(el),
+            }, () => props.unmountOnClose
+                ? visible.value && modal()
+                : vue.withDirectives(modal(), [[vue.vShow, visible.value]])),
+            props.backdrop &&
+                vue.h(CBackdrop.CBackdrop, {
+                    class: 'modal-backdrop',
+                    visible: visible.value,
+                }),
+        ];
+    },
+});
+
+exports.CModal = CModal;
+//# sourceMappingURL=CModal.js.map