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

package/dist/esm/components/grid/CCol.d.ts

@@ -0,0 +1,110 @@
+import { PropType } from 'vue';
+type Span = 'auto' | number | string | boolean | null;
+type BPObject = {
+    span?: Span;
+    offset?: number | string | null;
+    order?: 'first' | 'last' | number | string | null;
+};
+type Col = Span | BPObject;
+declare const CCol: import("vue").DefineComponent<{
+    /**
+     * The number of columns/offset/order on extra small devices (<576px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    xs: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on small devices (<768px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    sm: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on medium devices (<992px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    md: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on large devices (<1200px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    lg: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on X-Large devices (<1400px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    xl: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on XX-Large devices (≥1400px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    xxl: {
+        type: PropType<Col>;
+    };
+}, () => 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<{
+    /**
+     * The number of columns/offset/order on extra small devices (<576px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    xs: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on small devices (<768px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    sm: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on medium devices (<992px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    md: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on large devices (<1200px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    lg: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on X-Large devices (<1400px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    xl: {
+        type: PropType<Col>;
+    };
+    /**
+     * The number of columns/offset/order on XX-Large devices (≥1400px).
+     *
+     * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+     */
+    xxl: {
+        type: PropType<Col>;
+    };
+}>>, {}, {}>;
+export { CCol };

package/dist/esm/components/grid/CCol.js

@@ -0,0 +1,98 @@
+import { defineComponent, h } from 'vue';
+
+const BREAKPOINTS = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+const CCol = defineComponent({
+    name: 'CCol',
+    props: {
+        /**
+         * The number of columns/offset/order on extra small devices (<576px).
+         *
+         * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+         */
+        xs: {
+            type: [Boolean, Number, String, Object],
+        },
+        /**
+         * The number of columns/offset/order on small devices (<768px).
+         *
+         * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+         */
+        sm: {
+            type: [Boolean, Number, String, Object],
+        },
+        /**
+         * The number of columns/offset/order on medium devices (<992px).
+         *
+         * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+         */
+        md: {
+            type: [Boolean, Number, String, Object],
+        },
+        /**
+         * The number of columns/offset/order on large devices (<1200px).
+         *
+         * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+         */
+        lg: {
+            type: [Boolean, Number, String, Object],
+        },
+        /**
+         * The number of columns/offset/order on X-Large devices (<1400px).
+         *
+         * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+         */
+        xl: {
+            type: [Boolean, Number, String, Object],
+        },
+        /**
+         * The number of columns/offset/order on XX-Large devices (≥1400px).
+         *
+         * @values 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }
+         */
+        xxl: {
+            type: [Boolean, Number, String, Object],
+        },
+    },
+    setup(props, { slots }) {
+        const repsonsiveClassNames = [];
+        BREAKPOINTS.forEach((bp) => {
+            const breakpoint = props[bp];
+            const infix = bp === 'xs' ? '' : `-${bp}`;
+            if (breakpoint) {
+                if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
+                    repsonsiveClassNames.push(`col${infix}-${breakpoint}`);
+                }
+                if (typeof breakpoint === 'boolean') {
+                    repsonsiveClassNames.push(`col${infix}`);
+                }
+            }
+            if (breakpoint && typeof breakpoint === 'object') {
+                if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
+                    repsonsiveClassNames.push(`col${infix}-${breakpoint.span}`);
+                }
+                if (typeof breakpoint.span === 'boolean') {
+                    repsonsiveClassNames.push(`col${infix}`);
+                }
+                if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
+                    repsonsiveClassNames.push(`order${infix}-${breakpoint.order}`);
+                }
+                if (typeof breakpoint.offset === 'number') {
+                    repsonsiveClassNames.push(`offset${infix}-${breakpoint.offset}`);
+                }
+            }
+        });
+        return () => h('div', {
+            class: [repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col'],
+        }, slots.default && slots.default());
+    },
+});
+
+export { CCol };
+//# sourceMappingURL=CCol.js.map

package/dist/esm/components/grid/CCol.js.map

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

package/dist/esm/components/grid/CContainer.d.ts

@@ -0,0 +1,61 @@
+declare const CContainer: import("vue").DefineComponent<{
+    /**
+     * Set container 100% wide until small breakpoint.
+     */
+    sm: BooleanConstructor;
+    /**
+     * Set container 100% wide until medium breakpoint.
+     */
+    md: BooleanConstructor;
+    /**
+     * Set container 100% wide until large breakpoint.
+     */
+    lg: BooleanConstructor;
+    /**
+     * Set container 100% wide until X-large breakpoint.
+     */
+    xl: BooleanConstructor;
+    /**
+     * Set container 100% wide until XX-large breakpoint.
+     */
+    xxl: BooleanConstructor;
+    /**
+     * Set container 100% wide, spanning the entire width of the viewport.
+     */
+    fluid: BooleanConstructor;
+}, () => 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 container 100% wide until small breakpoint.
+     */
+    sm: BooleanConstructor;
+    /**
+     * Set container 100% wide until medium breakpoint.
+     */
+    md: BooleanConstructor;
+    /**
+     * Set container 100% wide until large breakpoint.
+     */
+    lg: BooleanConstructor;
+    /**
+     * Set container 100% wide until X-large breakpoint.
+     */
+    xl: BooleanConstructor;
+    /**
+     * Set container 100% wide until XX-large breakpoint.
+     */
+    xxl: BooleanConstructor;
+    /**
+     * Set container 100% wide, spanning the entire width of the viewport.
+     */
+    fluid: BooleanConstructor;
+}>>, {
+    sm: boolean;
+    md: boolean;
+    lg: boolean;
+    xl: boolean;
+    xxl: boolean;
+    fluid: boolean;
+}, {}>;
+export { CContainer };

package/dist/esm/components/grid/CContainer.js

@@ -0,0 +1,52 @@
+import { defineComponent, h } from 'vue';
+
+const BREAKPOINTS = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'fluid',
+];
+const CContainer = defineComponent({
+    name: 'CContainer',
+    props: {
+        /**
+         * Set container 100% wide until small breakpoint.
+         */
+        sm: Boolean,
+        /**
+         * Set container 100% wide until medium breakpoint.
+         */
+        md: Boolean,
+        /**
+         * Set container 100% wide until large breakpoint.
+         */
+        lg: Boolean,
+        /**
+         * Set container 100% wide until X-large breakpoint.
+         */
+        xl: Boolean,
+        /**
+         * Set container 100% wide until XX-large breakpoint.
+         */
+        xxl: Boolean,
+        /**
+         * Set container 100% wide, spanning the entire width of the viewport.
+         */
+        fluid: Boolean,
+    },
+    setup(props, { slots }) {
+        const repsonsiveClassNames = [];
+        BREAKPOINTS.forEach((bp) => {
+            const breakpoint = props[bp];
+            breakpoint && repsonsiveClassNames.push(`container-${bp}`);
+        });
+        return () => h('div', {
+            class: [repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container'],
+        }, slots.default && slots.default());
+    },
+});
+
+export { CContainer };
+//# sourceMappingURL=CContainer.js.map

package/dist/esm/components/grid/CContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CContainer.js","sources":["../../../../src/components/grid/CContainer.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA,MAAM,WAAW,GAAG;IAClB,KAAc;IACd,IAAa;IACb,IAAa;IACb,IAAa;IACb,IAAa;IACb,OAAgB;CACjB,CAAA;AAEK,MAAA,UAAU,GAAG,eAAe,CAAC;AACjC,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,EAAE,EAAE,OAAO;AACX;;AAEG;AACH,QAAA,EAAE,EAAE,OAAO;AACX;;AAEG;AACH,QAAA,EAAE,EAAE,OAAO;AACX;;AAEG;AACH,QAAA,EAAE,EAAE,OAAO;AACX;;AAEG;AACH,QAAA,GAAG,EAAE,OAAO;AACZ;;AAEG;AACH,QAAA,KAAK,EAAE,OAAO;AACf,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;YAE5B,UAAU,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAa,UAAA,EAAA,EAAE,CAAE,CAAA,CAAC,CAAA;AAC5D,SAAC,CAAC,CAAA;AACF,QAAA,OAAO,MACL,CAAC,CACC,KAAK,EACL;AACE,YAAA,KAAK,EAAE,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,GAAG,oBAAoB,GAAG,WAAW,CAAC;SAC9E,EACD,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACjC,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/esm/components/grid/CRow.d.ts

@@ -0,0 +1,84 @@
+export type BPObject = {
+    cols?: 'auto' | number | string | null;
+    gutter?: number | string | null;
+    gutterX?: number | string | null;
+    gutterY?: number | string | null;
+};
+declare const CRow: import("vue").DefineComponent<{
+    /**
+     * The number of columns/offset/order on extra small devices (<576px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    xs: () => BPObject;
+    /**
+     * The number of columns/offset/order on small devices (<768px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    sm: () => BPObject;
+    /**
+     * The number of columns/offset/order on medium devices (<992px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    md: () => BPObject;
+    /**
+     * The number of columns/offset/order on large devices (<1200px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    lg: () => BPObject;
+    /**
+     * The number of columns/offset/order on X-Large devices (<1400px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    xl: () => BPObject;
+    /**
+     * The number of columns/offset/order on XX-Large devices (≥1400px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    xxl: () => BPObject;
+}, () => 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<{
+    /**
+     * The number of columns/offset/order on extra small devices (<576px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    xs: () => BPObject;
+    /**
+     * The number of columns/offset/order on small devices (<768px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    sm: () => BPObject;
+    /**
+     * The number of columns/offset/order on medium devices (<992px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    md: () => BPObject;
+    /**
+     * The number of columns/offset/order on large devices (<1200px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    lg: () => BPObject;
+    /**
+     * The number of columns/offset/order on X-Large devices (<1400px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    xl: () => BPObject;
+    /**
+     * The number of columns/offset/order on XX-Large devices (≥1400px).
+     *
+     * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+     */
+    xxl: () => BPObject;
+}>>, {}, {}>;
+export { CRow };

package/dist/esm/components/grid/CRow.js

@@ -0,0 +1,78 @@
+import { defineComponent, h } from 'vue';
+
+const BREAKPOINTS = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+const CRow = defineComponent({
+    name: 'CRow',
+    props: {
+        /**
+         * The number of columns/offset/order on extra small devices (<576px).
+         *
+         * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+         */
+        xs: Object,
+        /**
+         * The number of columns/offset/order on small devices (<768px).
+         *
+         * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+         */
+        sm: Object,
+        /**
+         * The number of columns/offset/order on medium devices (<992px).
+         *
+         * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+         */
+        md: Object,
+        /**
+         * The number of columns/offset/order on large devices (<1200px).
+         *
+         * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+         */
+        lg: Object,
+        /**
+         * The number of columns/offset/order on X-Large devices (<1400px).
+         *
+         * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+         */
+        xl: Object,
+        /**
+         * The number of columns/offset/order on XX-Large devices (≥1400px).
+         *
+         * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+         */
+        xxl: Object,
+    },
+    setup(props, { slots }) {
+        const repsonsiveClassNames = [];
+        BREAKPOINTS.forEach((bp) => {
+            const breakpoint = props[bp];
+            const infix = bp === 'xs' ? '' : `-${bp}`;
+            if (typeof breakpoint === 'object') {
+                if (breakpoint.cols) {
+                    repsonsiveClassNames.push(`row-cols${infix}-${breakpoint.cols}`);
+                }
+                if (typeof breakpoint.gutter === 'number') {
+                    repsonsiveClassNames.push(`g${infix}-${breakpoint.gutter}`);
+                }
+                if (typeof breakpoint.gutterX === 'number') {
+                    repsonsiveClassNames.push(`gx${infix}-${breakpoint.gutterX}`);
+                }
+                if (typeof breakpoint.gutterY === 'number') {
+                    repsonsiveClassNames.push(`gy${infix}-${breakpoint.gutterY}`);
+                }
+            }
+        });
+        return () => h('div', {
+            class: ['row', repsonsiveClassNames],
+        }, slots.default && slots.default());
+    },
+});
+
+export { CRow };
+//# sourceMappingURL=CRow.js.map

package/dist/esm/components/grid/CRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CRow.js","sources":["../../../../src/components/grid/CRow.ts"],"sourcesContent":[null],"names":[],"mappings":";;AASA,MAAM,WAAW,GAAG;IAClB,KAAc;IACd,IAAa;IACb,IAAa;IACb,IAAa;IACb,IAAa;IACb,IAAa;CACd,CAAA;AAEK,MAAA,IAAI,GAAG,eAAe,CAAC;AAC3B,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,EAAE,EAAE,MAAwB;AAC5B;;;;AAIG;AACH,QAAA,EAAE,EAAE,MAAwB;AAC5B;;;;AAIG;AACH,QAAA,EAAE,EAAE,MAAwB;AAC5B;;;;AAIG;AACH,QAAA,EAAE,EAAE,MAAwB;AAC5B;;;;AAIG;AACH,QAAA,EAAE,EAAE,MAAwB;AAC5B;;;;AAIG;AACH,QAAA,GAAG,EAAE,MAAwB;AAC9B,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;AAC5B,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,IAAI,UAAU,CAAC,IAAI,EAAE;oBACnB,oBAAoB,CAAC,IAAI,CAAC,CAAW,QAAA,EAAA,KAAK,CAAI,CAAA,EAAA,UAAU,CAAC,IAAI,CAAE,CAAA,CAAC,CAAA;AACjE,iBAAA;AACD,gBAAA,IAAI,OAAO,UAAU,CAAC,MAAM,KAAK,QAAQ,EAAE;oBACzC,oBAAoB,CAAC,IAAI,CAAC,CAAI,CAAA,EAAA,KAAK,CAAI,CAAA,EAAA,UAAU,CAAC,MAAM,CAAE,CAAA,CAAC,CAAA;AAC5D,iBAAA;AACD,gBAAA,IAAI,OAAO,UAAU,CAAC,OAAO,KAAK,QAAQ,EAAE;oBAC1C,oBAAoB,CAAC,IAAI,CAAC,CAAK,EAAA,EAAA,KAAK,CAAI,CAAA,EAAA,UAAU,CAAC,OAAO,CAAE,CAAA,CAAC,CAAA;AAC9D,iBAAA;AACD,gBAAA,IAAI,OAAO,UAAU,CAAC,OAAO,KAAK,QAAQ,EAAE;oBAC1C,oBAAoB,CAAC,IAAI,CAAC,CAAK,EAAA,EAAA,KAAK,CAAI,CAAA,EAAA,UAAU,CAAC,OAAO,CAAE,CAAA,CAAC,CAAA;AAC9D,iBAAA;AACF,aAAA;AACH,SAAC,CAAC,CAAA;AAEF,QAAA,OAAO,MACL,CAAC,CACC,KAAK,EACL;AACE,YAAA,KAAK,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC;SACrC,EACD,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACjC,CAAA;KACJ;AACF,CAAA;;;;"}

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

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+import { CCol } from './CCol';
+import { CContainer } from './CContainer';
+import { CRow } from './CRow';
+declare const CGridPlugin: {
+    install: (app: App) => void;
+};
+export { CGridPlugin, CCol, CContainer, CRow };

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

@@ -0,0 +1,14 @@
+import { CCol } from './CCol.js';
+import { CContainer } from './CContainer.js';
+import { CRow } from './CRow.js';
+
+const CGridPlugin = {
+    install: (app) => {
+        app.component(CCol.name, CCol);
+        app.component(CContainer.name, CContainer);
+        app.component(CRow.name, CRow);
+    },
+};
+
+export { CCol, CContainer, CGridPlugin, CRow };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/grid/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKA,MAAM,WAAW,GAAG;AAClB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QAC9B,GAAG,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;QAC1C,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;KAC/B;;;;;"}

package/dist/esm/components/header/CHeader.d.ts

@@ -0,0 +1,42 @@
+declare const CHeader: import("vue").DefineComponent<{
+    /**
+     * Defines optional container wrapping children elements.
+     *
+     * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'
+     */
+    container: {
+        type: (StringConstructor | BooleanConstructor)[];
+        validator: (value: boolean | string) => boolean;
+    };
+    /**
+     * Place header in non-static positions.
+     *
+     * @values 'fixed', 'sticky'
+     */
+    position: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+}, () => 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<{
+    /**
+     * Defines optional container wrapping children elements.
+     *
+     * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'
+     */
+    container: {
+        type: (StringConstructor | BooleanConstructor)[];
+        validator: (value: boolean | string) => boolean;
+    };
+    /**
+     * Place header in non-static positions.
+     *
+     * @values 'fixed', 'sticky'
+     */
+    position: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+}>>, {}, {}>;
+export { CHeader };

package/dist/esm/components/header/CHeader.js

@@ -0,0 +1,37 @@
+import { defineComponent, h } from 'vue';
+
+const CHeader = defineComponent({
+    name: 'CHeader',
+    props: {
+        /**
+         * Defines optional container wrapping children elements.
+         *
+         * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'
+         */
+        container: {
+            type: [Boolean, String],
+            validator: (value) => {
+                return (typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl', 'fluid'].includes(value));
+            },
+        },
+        /**
+         * Place header in non-static positions.
+         *
+         * @values 'fixed', 'sticky'
+         */
+        position: {
+            type: String,
+            validator: (value) => {
+                return ['fixed', 'sticky'].includes(value);
+            },
+        },
+    },
+    setup(props, { slots }) {
+        return () => h('div', { class: ['header', { [`header-${props.position}`]: props.position }] }, props.container
+            ? h('div', { class: `container${props.container === true ? '' : '-' + props.container}` }, slots.default && slots.default())
+            : slots.default && slots.default());
+    },
+});
+
+export { CHeader };
+//# sourceMappingURL=CHeader.js.map

package/dist/esm/components/header/CHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CHeader.js","sources":["../../../../src/components/header/CHeader.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEM,MAAA,OAAO,GAAG,eAAe,CAAC;AAC9B,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;AACvB,YAAA,SAAS,EAAE,CAAC,KAAuB,KAAI;gBACrC,QACE,OAAO,KAAK,KAAK,SAAS,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EACvF;aACF;AACF,SAAA;AACD;;;;AAIG;AACH,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,SAAS,EAAE,CAAC,KAAa,KAAI;gBAC3B,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aAC3C;AACF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;AACpB,QAAA,OAAO,MACL,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAU,OAAA,EAAA,KAAK,CAAC,QAAQ,CAAE,CAAA,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,EAAE,EACvE,KAAK,CAAC,SAAS;AACb,cAAE,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,CAAY,SAAA,EAAA,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,EAAE,GAAG,GAAG,GAAG,KAAK,CAAC,SAAS,CAAE,CAAA,EAAE,EAC9E,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACjC;cACD,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACrC,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/esm/components/header/CHeaderBrand.d.ts

@@ -0,0 +1,22 @@
+declare const CHeaderBrand: import("vue").DefineComponent<{
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => 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<{
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    component: string;
+}, {}>;
+export { CHeaderBrand };

package/dist/esm/components/header/CHeaderBrand.js

@@ -0,0 +1,20 @@
+import { defineComponent, h } from 'vue';
+
+const CHeaderBrand = defineComponent({
+    name: 'CHeaderBrand',
+    props: {
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            default: 'a',
+        },
+    },
+    setup(props, { slots }) {
+        return () => h(props.component, { class: 'header-brand' }, slots.default && slots.default());
+    },
+});
+
+export { CHeaderBrand };
+//# sourceMappingURL=CHeaderBrand.js.map

package/dist/esm/components/header/CHeaderBrand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CHeaderBrand.js","sources":["../../../../src/components/header/CHeaderBrand.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEM,MAAA,YAAY,GAAG,eAAe,CAAC;AACnC,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;QACpB,OAAO,MAAM,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC,CAAA;KAC7F;AACF,CAAA;;;;"}