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

package/dist/esm/components/pagination/CPaginationItem.d.ts

@@ -0,0 +1,41 @@
+declare const CPaginationItem: import("vue").DefineComponent<{
+    /**
+     * Toggle the active state for the component.
+     */
+    active: BooleanConstructor;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component: StringConstructor;
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * The href attribute specifies the URL of the page the link goes to.
+     */
+    href: StringConstructor;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Toggle the active state for the component.
+     */
+    active: BooleanConstructor;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component: StringConstructor;
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * The href attribute specifies the URL of the page the link goes to.
+     */
+    href: StringConstructor;
+}>>, {
+    disabled: boolean;
+    active: boolean;
+}, {}>;
+export { CPaginationItem };

package/dist/esm/components/pagination/CPaginationItem.js

@@ -0,0 +1,50 @@
+import { defineComponent, h } from 'vue';
+import { CLink } from '../link/CLink.js';
+
+const CPaginationItem = defineComponent({
+    name: 'CPaginationItem',
+    props: {
+        /**
+         * Toggle the active state for the component.
+         */
+        active: Boolean,
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: String,
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: Boolean,
+        /**
+         * The href attribute specifies the URL of the page the link goes to.
+         */
+        href: String,
+    },
+    setup(props, { slots }) {
+        return () => {
+            const component = props.component ?? (props.active ? 'span' : 'a');
+            return h('li', {
+                class: [
+                    'page-item',
+                    {
+                        ['active']: props.active,
+                        ['disabled']: props.disabled,
+                    },
+                ],
+                ...(props.active && { active: props.active, 'aria-current': 'page' }),
+            }, component === 'a'
+                ? h(CLink, {
+                    class: ['page-link'],
+                    component: component,
+                    href: props.href,
+                }, {
+                    default: () => slots.default && slots.default(),
+                })
+                : h(component, { class: ['page-link'] }, slots.default && slots.default()));
+        };
+    },
+});
+
+export { CPaginationItem };
+//# sourceMappingURL=CPaginationItem.js.map

package/dist/esm/components/pagination/CPaginationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CPaginationItem.js","sources":["../../../../src/components/pagination/CPaginationItem.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIM,MAAA,eAAe,GAAG,eAAe,CAAC;AACtC,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,MAAM,EAAE,OAAO;AACf;;AAEG;AACH,QAAA,SAAS,EAAE,MAAM;AACjB;;AAEG;AACH,QAAA,QAAQ,EAAE,OAAO;AACjB;;AAEG;AACH,QAAA,IAAI,EAAE,MAAM;AACb,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;AACpB,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,CAAA;YAClE,OAAO,CAAC,CACN,IAAI,EACJ;AACE,gBAAA,KAAK,EAAE;oBACL,WAAW;AACX,oBAAA;AACE,wBAAA,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM;AACxB,wBAAA,CAAC,UAAU,GAAG,KAAK,CAAC,QAAQ;AAC7B,qBAAA;AACF,iBAAA;AACD,gBAAA,IAAI,KAAK,CAAC,MAAM,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE;aACrE,EACD,SAAS,KAAK,GAAG;AACf,kBAAE,CAAC,CACC,KAAK,EACL;oBACE,KAAK,EAAE,CAAC,WAAW,CAAC;AACpB,oBAAA,SAAS,EAAE,SAAS;oBACpB,IAAI,EAAE,KAAK,CAAC,IAAI;iBACjB,EACD;oBACE,OAAO,EAAE,MAAM,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE;iBAChD,CACF;kBACD,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,WAAW,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC,CAC7E,CAAA;AACH,SAAC,CAAA;KACF;AACF,CAAA;;;;"}

package/dist/esm/components/pagination/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+import { CPagination } from './CPagination';
+import { CPaginationItem } from './CPaginationItem';
+declare const CPaginationPlugin: {
+    install: (app: App) => void;
+};
+export { CPaginationPlugin, CPagination, CPaginationItem };

package/dist/esm/components/pagination/index.js

@@ -0,0 +1,12 @@
+import { CPagination } from './CPagination.js';
+import { CPaginationItem } from './CPaginationItem.js';
+
+const CPaginationPlugin = {
+    install: (app) => {
+        app.component(CPagination.name, CPagination);
+        app.component(CPaginationItem.name, CPaginationItem);
+    },
+};
+
+export { CPagination, CPaginationItem, CPaginationPlugin };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/pagination/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA,MAAM,iBAAiB,GAAG;AACxB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;QAC5C,GAAG,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,CAAA;KACrD;;;;;"}

package/dist/esm/components/picker/CPicker.d.ts

@@ -0,0 +1,61 @@
+import { PropType } from 'vue';
+declare const CPicker: import("vue").DefineComponent<{
+    /**
+     * Set container type for the component.
+     */
+    container: {
+        type: PropType<"dropdown" | "inline">;
+        default: string;
+    };
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * A string of all className you want applied to the dropdown menu.
+     */
+    dropdownClassNames: StringConstructor;
+    /**
+     * Toggle visibility of footer element or set the content of footer.
+     */
+    footer: BooleanConstructor;
+    /**
+     * Toggle the visibility of the component.
+     */
+    visible: BooleanConstructor;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Set container type for the component.
+     */
+    container: {
+        type: PropType<"dropdown" | "inline">;
+        default: string;
+    };
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * A string of all className you want applied to the dropdown menu.
+     */
+    dropdownClassNames: StringConstructor;
+    /**
+     * Toggle visibility of footer element or set the content of footer.
+     */
+    footer: BooleanConstructor;
+    /**
+     * Toggle the visibility of the component.
+     */
+    visible: BooleanConstructor;
+}>> & {
+    onHide?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+}, {
+    visible: boolean;
+    disabled: boolean;
+    footer: boolean;
+    container: "dropdown" | "inline";
+}, {}>;
+export { CPicker };

package/dist/esm/components/picker/CPicker.js

@@ -0,0 +1,147 @@
+import { defineComponent, ref, watch, h, cloneVNode } from 'vue';
+import { createPopper } from '@popperjs/core';
+import isRTL from '../../utils/isRTL.js';
+
+const CPicker = defineComponent({
+    name: 'CPicker',
+    props: {
+        /**
+         * Set container type for the component.
+         */
+        container: {
+            type: String,
+            default: 'dropdown',
+        },
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: Boolean,
+        /**
+         * A string of all className you want applied to the dropdown menu.
+         */
+        dropdownClassNames: String,
+        /**
+         * Toggle visibility of footer element or set the content of footer.
+         */
+        footer: Boolean,
+        /**
+         * Toggle the visibility of the component.
+         */
+        visible: Boolean,
+    },
+    emits: [
+        /**
+         * Callback fired when the component requests to be hidden.
+         */
+        'hide',
+        /**
+         * Callback fired when the component requests to be shown.
+         */
+        'show',
+    ],
+    setup(props, { attrs, emit, slots }) {
+        const pickerRef = ref();
+        const dropdownRef = ref();
+        const togglerRef = ref();
+        const popper = ref();
+        const visible = ref(props.visible);
+        watch(() => props.visible, () => {
+            visible.value = props.visible;
+        });
+        watch(visible, () => {
+            if (props.container === 'inline') {
+                return;
+            }
+            if (visible.value) {
+                emit('show');
+                window.addEventListener('mouseup', handleMouseUp);
+                window.addEventListener('keyup', handleKeyUp);
+                initPopper();
+                return;
+            }
+            emit('hide');
+            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('keyup', handleKeyUp);
+            destroyPopper();
+        });
+        const initPopper = () => {
+            if (togglerRef.value && dropdownRef.value) {
+                popper.value = createPopper(togglerRef.value, dropdownRef.value, {
+                    placement: isRTL(pickerRef.value) ? 'bottom-end' : 'bottom-start',
+                    modifiers: [
+                        {
+                            name: 'preventOverflow',
+                            options: {
+                                boundary: 'clippingParents',
+                            },
+                        },
+                        {
+                            name: 'offset',
+                            options: {
+                                offset: [0, 2],
+                            },
+                        },
+                    ],
+                });
+            }
+        };
+        const destroyPopper = () => {
+            if (popper.value) {
+                popper.value.destroy();
+            }
+            popper.value = undefined;
+        };
+        const handleKeyUp = (event) => {
+            if (event.key === 'Escape') {
+                visible.value = false;
+            }
+        };
+        const handleMouseUp = (event) => {
+            if (pickerRef.value && pickerRef.value.contains(event.target)) {
+                return;
+            }
+            visible.value = false;
+        };
+        switch (props.container) {
+            case 'inline': {
+                return () => h('div', { class: 'picker', ref: pickerRef }, slots.default && slots.default());
+            }
+            default: {
+                return () => h('div', {
+                    class: [
+                        attrs.class,
+                        {
+                            show: visible.value,
+                        },
+                    ],
+                    ref: pickerRef,
+                }, [
+                    /**
+                     * @slot Location for the toggler element.
+                     */
+                    slots.toggler &&
+                        slots.toggler().map((slot) => cloneVNode(slot, {
+                            onClick: () => {
+                                if (!props.disabled && !visible.value) {
+                                    visible.value = true;
+                                }
+                            },
+                            ref: (el) => {
+                                togglerRef.value = el;
+                            },
+                        })),
+                    h('div', { class: props.dropdownClassNames, ref: dropdownRef }, [
+                        slots.default && slots.default(),
+                        /**
+                         * @slot Location for the footer element.
+                         */
+                        props.footer && slots.footer && slots.footer(),
+                    ]),
+                ]);
+            }
+        }
+    },
+});
+
+export { CPicker };
+//# sourceMappingURL=CPicker.js.map

package/dist/esm/components/picker/CPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CPicker.js","sources":["../../../../src/components/picker/CPicker.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/components/picker/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+import { CPicker } from './CPicker';
+declare const CPickerPlugin: {
+    install: (app: App) => void;
+};
+export { CPicker, CPickerPlugin };

package/dist/esm/components/picker/index.js

@@ -0,0 +1,10 @@
+import { CPicker } from './CPicker.js';
+
+const CPickerPlugin = {
+    install: (app) => {
+        app.component(CPicker.name, CPicker);
+    },
+};
+
+export { CPicker, CPickerPlugin };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/picker/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,MAAM,aAAa,GAAG;AACpB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;KACrC;;;;;"}

package/dist/esm/components/placeholder/CPlaceholder.d.ts

@@ -0,0 +1,123 @@
+export declare const CPlaceholder: import("vue").DefineComponent<{
+    /**
+     * Set animation type to better convey the perception of something being actively loaded.
+     *
+     * @values 'glow', 'wave'
+     */
+    animation: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Size the component extra small, small, or large.
+     *
+     * @values 'xs', 'sm', 'lg'
+     */
+    size: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The number of columns on extra small devices (<576px).
+     */
+    xs: NumberConstructor;
+    /**
+     * The number of columns on small devices (<768px).
+     */
+    sm: NumberConstructor;
+    /**
+     * The number of columns on medium devices (<992px).
+     */
+    md: NumberConstructor;
+    /**
+     * The number of columns on large devices (<1200px).
+     */
+    lg: NumberConstructor;
+    /**
+     * The number of columns on X-Large devices (<1400px).
+     */
+    xl: NumberConstructor;
+    /**
+     * The number of columns on XX-Large devices (≥1400px).
+     */
+    xxl: NumberConstructor;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Set animation type to better convey the perception of something being actively loaded.
+     *
+     * @values 'glow', 'wave'
+     */
+    animation: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Size the component extra small, small, or large.
+     *
+     * @values 'xs', 'sm', 'lg'
+     */
+    size: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The number of columns on extra small devices (<576px).
+     */
+    xs: NumberConstructor;
+    /**
+     * The number of columns on small devices (<768px).
+     */
+    sm: NumberConstructor;
+    /**
+     * The number of columns on medium devices (<992px).
+     */
+    md: NumberConstructor;
+    /**
+     * The number of columns on large devices (<1200px).
+     */
+    lg: NumberConstructor;
+    /**
+     * The number of columns on X-Large devices (<1400px).
+     */
+    xl: NumberConstructor;
+    /**
+     * The number of columns on XX-Large devices (≥1400px).
+     */
+    xxl: NumberConstructor;
+}>>, {
+    component: string;
+}, {}>;

package/dist/esm/components/placeholder/CPlaceholder.js

@@ -0,0 +1,101 @@
+import { defineComponent, h } from 'vue';
+import { Color } from '../../props.js';
+
+const BREAKPOINTS = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+const CPlaceholder = defineComponent({
+    name: 'CPlaceholder',
+    props: {
+        /**
+         * Set animation type to better convey the perception of something being actively loaded.
+         *
+         * @values 'glow', 'wave'
+         */
+        animation: {
+            type: String,
+            validator: (value) => {
+                return ['glow', 'wave'].includes(value);
+            },
+        },
+        /**
+         * Sets the color context of the component to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         */
+        color: Color,
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            default: 'span',
+        },
+        /**
+         * Size the component extra small, small, or large.
+         *
+         * @values 'xs', 'sm', 'lg'
+         */
+        size: {
+            type: String,
+            validator: (value) => {
+                return ['xs', 'sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * The number of columns on extra small devices (<576px).
+         */
+        xs: Number,
+        /**
+         * The number of columns on small devices (<768px).
+         */
+        sm: Number,
+        /**
+         * The number of columns on medium devices (<992px).
+         */
+        md: Number,
+        /**
+         * The number of columns on large devices (<1200px).
+         */
+        lg: Number,
+        /**
+         * The number of columns on X-Large devices (<1400px).
+         */
+        xl: Number,
+        /**
+         * The number of columns on XX-Large devices (≥1400px).
+         */
+        xxl: Number,
+    },
+    setup(props, { slots }) {
+        const repsonsiveClassNames = [];
+        BREAKPOINTS.forEach((bp) => {
+            const breakpoint = props[bp];
+            const infix = bp === 'xs' ? '' : `-${bp}`;
+            if (typeof breakpoint === 'number') {
+                repsonsiveClassNames.push(`col${infix}-${breakpoint}`);
+            }
+            if (typeof breakpoint === 'boolean') {
+                repsonsiveClassNames.push(`col${infix}`);
+            }
+        });
+        return () => h(props.component, {
+            class: [
+                props.animation ? `placeholder-${props.animation}` : 'placeholder',
+                {
+                    [`bg-${props.color}`]: props.color,
+                    [`placeholder-${props.size}`]: props.size,
+                },
+                repsonsiveClassNames,
+            ],
+        }, slots.default && slots.default());
+    },
+});
+
+export { CPlaceholder };
+//# sourceMappingURL=CPlaceholder.js.map

package/dist/esm/components/placeholder/CPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CPlaceholder.js","sources":["../../../../src/components/placeholder/CPlaceholder.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA,MAAM,WAAW,GAAG;IAClB,KAAc;IACd,IAAa;IACb,IAAa;IACb,IAAa;IACb,IAAa;IACb,IAAa;CACd,CAAA;AAEM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC1C,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,SAAS,EAAE,CAAC,KAAa,KAAI;gBAC3B,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aACxC;AACF,SAAA;AACD;;;;AAIG;AACH,QAAA,KAAK,EAAE,KAAK;AACZ;;AAEG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD;;;;AAIG;AACH,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,SAAS,EAAE,CAAC,KAAa,KAAI;AAC3B,gBAAA,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aAC1C;AACF,SAAA;AACD;;AAEG;AACH,QAAA,EAAE,EAAE,MAAM;AACV;;AAEG;AACH,QAAA,EAAE,EAAE,MAAM;AACV;;AAEG;AACH,QAAA,EAAE,EAAE,MAAM;AACV;;AAEG;AACH,QAAA,EAAE,EAAE,MAAM;AACV;;AAEG;AACH,QAAA,EAAE,EAAE,MAAM;AACV;;AAEG;AACH,QAAA,GAAG,EAAE,MAAM;AACZ,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;QACpB,MAAM,oBAAoB,GAAa,EAAE,CAAA;AAEzC,QAAA,WAAW,CAAC,OAAO,CAAC,CAAC,EAAE,KAAI;AACzB,YAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,CAAC,CAAA;AAE5B,YAAA,MAAM,KAAK,GAAG,EAAE,KAAK,IAAI,GAAG,EAAE,GAAG,CAAI,CAAA,EAAA,EAAE,EAAE,CAAA;AAEzC,YAAA,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;gBAClC,oBAAoB,CAAC,IAAI,CAAC,CAAA,GAAA,EAAM,KAAK,CAAI,CAAA,EAAA,UAAU,CAAE,CAAA,CAAC,CAAA;AACvD,aAAA;AAED,YAAA,IAAI,OAAO,UAAU,KAAK,SAAS,EAAE;AACnC,gBAAA,oBAAoB,CAAC,IAAI,CAAC,MAAM,KAAK,CAAA,CAAE,CAAC,CAAA;AACzC,aAAA;AACH,SAAC,CAAC,CAAA;QAEF,OAAO,MACL,CAAC,CACC,KAAK,CAAC,SAAS,EACf;AACE,YAAA,KAAK,EAAE;AACL,gBAAA,KAAK,CAAC,SAAS,GAAG,CAAA,YAAA,EAAe,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,aAAa;AAClE,gBAAA;oBACE,CAAC,CAAA,GAAA,EAAM,KAAK,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK;oBAClC,CAAC,CAAA,YAAA,EAAe,KAAK,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI;AAC1C,iBAAA;gBACD,oBAAoB;AACrB,aAAA;SACF,EACD,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACjC,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/esm/components/placeholder/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+import { CPlaceholder } from './CPlaceholder';
+declare const CPlaceholderPlugin: {
+    install: (app: App) => void;
+};
+export { CPlaceholderPlugin, CPlaceholder };

package/dist/esm/components/placeholder/index.js

@@ -0,0 +1,10 @@
+import { CPlaceholder } from './CPlaceholder.js';
+
+const CPlaceholderPlugin = {
+    install: (app) => {
+        app.component(CPlaceholder.name, CPlaceholder);
+    },
+};
+
+export { CPlaceholder, CPlaceholderPlugin };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/placeholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/placeholder/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,MAAM,kBAAkB,GAAG;AACzB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;KAC/C;;;;;"}