@coreui/vue-pro 4.8.0-next.1 → 4.8.0

package/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v4.7.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v4.8.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-vue-pro.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue-pro`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue-pro`

package/dist/components/form/CFormCheck.d.ts

@@ -71,6 +71,12 @@ declare const CFormCheck: import("vue").DefineComponent<{
         type: (StringConstructor | BooleanConstructor)[];
         value: undefined;
     };
+    /**
+     * Put checkboxes or radios on the opposite side.
+     *
+     * @sinve 4.8.0
+     */
+    reverse: BooleanConstructor;
     /**
      * Display validation feedback in a styled tooltip.
      *
@@ -169,6 +175,12 @@ declare const CFormCheck: import("vue").DefineComponent<{
         type: (StringConstructor | BooleanConstructor)[];
         value: undefined;
     };
+    /**
+     * Put checkboxes or radios on the opposite side.
+     *
+     * @sinve 4.8.0
+     */
+    reverse: BooleanConstructor;
     /**
      * Display validation feedback in a styled tooltip.
      *
@@ -194,6 +206,7 @@ declare const CFormCheck: import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    reverse: boolean;
     type: string;
     invalid: boolean;
     valid: boolean;

package/dist/components/form/CFormSwitch.d.ts

@@ -24,6 +24,12 @@ declare const CFormSwitch: import("vue").DefineComponent<{
         type: (StringConstructor | BooleanConstructor)[];
         value: undefined;
     };
+    /**
+     * Put checkboxes or radios on the opposite side.
+     *
+     * @sinve 4.8.0
+     */
+    reverse: BooleanConstructor;
     /**
      * Size the component large or extra large. Works only with `switch`.
      *
@@ -76,6 +82,12 @@ declare const CFormSwitch: import("vue").DefineComponent<{
         type: (StringConstructor | BooleanConstructor)[];
         value: undefined;
     };
+    /**
+     * Put checkboxes or radios on the opposite side.
+     *
+     * @sinve 4.8.0
+     */
+    reverse: BooleanConstructor;
     /**
      * Size the component large or extra large. Works only with `switch`.
      *
@@ -104,6 +116,7 @@ declare const CFormSwitch: import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    reverse: boolean;
     type: string;
     invalid: boolean;
     valid: boolean;

package/dist/components/smart-table/CSmartTable.d.ts

@@ -501,12 +501,12 @@ declare const CSmartTable: import("vue").DefineComponent<{
     onSorterChange?: ((...args: any[]) => any) | undefined;
     onTableFilterChange?: ((...args: any[]) => any) | undefined;
 }, {
-    items: Item[];
     selected: Item[];
     header: boolean;
     cleaner: boolean;
     loading: boolean;
     activePage: number;
+    items: Item[];
     clickableRows: boolean;
     noItemsLabel: string;
     selectable: boolean;

package/dist/components/smart-table/CSmartTableHead.d.ts

@@ -54,8 +54,8 @@ declare const CSmartTableHead: import("vue").DefineComponent<{
     onSortClick?: ((...args: any[]) => any) | undefined;
 }, {
     component: string;
-    items: Item[];
     columns: (string | Column)[];
+    items: Item[];
     selectable: boolean;
 }>;
 export { CSmartTableHead };

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, cloneVNode, nextTick, vShow, computed, Teleport, onBeforeUnmount } from 'vue';
+import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, cloneVNode, nextTick, vShow, computed, Teleport, onBeforeUnmount } from 'vue';
 
 const CAccordion = defineComponent({
     name: 'CAccordion',
@@ -1979,10 +1979,13 @@ const CCarousel = defineComponent({
     },
     setup(props, { slots }) {
         const carouselRef = ref();
-        const timeout = ref();
+        const active = ref(props.index);
         const animating = ref(false);
-        const visible = ref();
         const customInterval = ref(props.interval);
+        const direction = ref('next');
+        const items = ref([]);
+        const timeout = ref();
+        const visible = ref();
         const setAnimating = (value) => {
             animating.value = value;
         };
@@ -1998,27 +2001,16 @@ const CCarousel = defineComponent({
                 timeout.value = setTimeout(() => nextItemWhenVisible(), typeof customInterval.value === 'number' ? customInterval.value : props.interval);
             }
         };
-        const state = reactive({
-            items: [],
-            active: props.index,
-            direction: 'next',
-        });
-        onBeforeMount(() => {
-            if (slots.default) {
-                // @ts-expect-error TODO: fix types
-                state.items = slots.default().filter((child) => child.type.name === 'CCarouselItem');
-            }
-        });
-        const handleControlClick = (direction) => {
+        const handleControlClick = (_direction) => {
             if (animating.value) {
                 return;
             }
-            state.direction = direction;
-            if (direction === 'next') {
-                state.active === state.items.length - 1 ? (state.active = 0) : state.active++;
+            direction.value = _direction;
+            if (_direction === 'next') {
+                active.value === items.value.length - 1 ? (active.value = 0) : active.value++;
             }
             else {
-                state.active === 0 ? (state.active = state.items.length - 1) : state.active--;
+                active.value === 0 ? (active.value = items.value.length - 1) : active.value--;
             }
         };
         const nextItemWhenVisible = () => {
@@ -2029,17 +2021,17 @@ const CCarousel = defineComponent({
             }
         };
         const handleIndicatorClick = (index) => {
-            if (state.active === index) {
+            if (active.value === index) {
                 return;
             }
-            if (state.active < index) {
-                state.direction = 'next';
-                state.active = index;
+            if (active.value < index) {
+                direction.value = 'next';
+                active.value = index;
                 return;
             }
-            if (state.active > index) {
-                state.direction = 'prev';
-                state.active = index;
+            if (active.value > index) {
+                direction.value = 'prev';
+                active.value = index;
             }
         };
         const handleScroll = () => {
@@ -2050,6 +2042,15 @@ const CCarousel = defineComponent({
                 visible.value = false;
             }
         };
+        onBeforeMount(() => {
+            if (slots.default) {
+                const children = typeof slots.default()[0].type === 'symbol' ? slots.default()[0].children : slots.default();
+                if (children && Array.isArray(children)) {
+                    // @ts-expect-error TODO: fix types
+                    items.value = children.filter((child) => child.type.name === 'CCarouselItem');
+                }
+            }
+        });
         onMounted(() => {
             window.addEventListener('scroll', handleScroll);
         });
@@ -2059,7 +2060,7 @@ const CCarousel = defineComponent({
                     !animating.value && cycle();
                     return;
                 }
-                if (!props.wrap && state.active < state.items.length - 1) {
+                if (!props.wrap && active.value < items.value.length - 1) {
                     !animating.value && cycle();
                 }
             });
@@ -2080,19 +2081,19 @@ const CCarousel = defineComponent({
             props.indicators &&
                 h$1('div', {
                     class: 'carousel-indicators',
-                }, state.items.map((_, index) => {
+                }, items.value.map((_, index) => {
                     return h$1('button', {
                         type: 'button',
                         id: index,
                         'data-coreui-target': '',
-                        ...(state.active === index && { class: 'active' }),
+                        ...(active.value === index && { class: 'active' }),
                         onClick: () => handleIndicatorClick(index),
                     });
                 })),
-            h$1('div', { class: 'carousel-inner' }, state.items.map((item, index) => {
+            h$1('div', { class: 'carousel-inner' }, items.value.map((item, index) => {
                 return h$1(item, {
-                    active: state.active === index ? true : false,
-                    direction: state.direction,
+                    active: active.value === index ? true : false,
+                    direction: direction.value,
                 });
             })),
             props.controls && [
@@ -4811,6 +4812,12 @@ const CFormCheck = defineComponent({
             type: [Boolean, String],
             value: undefined,
         },
+        /**
+         * Put checkboxes or radios on the opposite side.
+         *
+         * @sinve 4.8.0
+         */
+        reverse: Boolean,
         /**
          * Display validation feedback in a styled tooltip.
          *
@@ -4853,6 +4860,7 @@ const CFormCheck = defineComponent({
             'form-check',
             {
                 'form-check-inline': props.inline,
+                'form-check-reverse': props.reverse,
                 'is-invalid': props.invalid,
                 'is-valid': props.valid,
             },
@@ -5550,6 +5558,12 @@ const CFormSwitch = defineComponent({
             type: [Boolean, String],
             value: undefined,
         },
+        /**
+         * Put checkboxes or radios on the opposite side.
+         *
+         * @sinve 4.8.0
+         */
+        reverse: Boolean,
         /**
          * Size the component large or extra large. Works only with `switch`.
          *
@@ -5597,6 +5611,7 @@ const CFormSwitch = defineComponent({
             class: [
                 'form-check form-switch',
                 {
+                    'form-check-reverse': props.reverse,
                     [`form-switch-${props.size}`]: props.size,
                     'is-invalid': props.invalid,
                     'is-valid': props.valid,