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

package/dist/index.js

@@ -1983,10 +1983,13 @@ const CCarousel = vue.defineComponent({
     },
     setup(props, { slots }) {
         const carouselRef = vue.ref();
-        const timeout = vue.ref();
+        const active = vue.ref(props.index);
         const animating = vue.ref(false);
-        const visible = vue.ref();
         const customInterval = vue.ref(props.interval);
+        const direction = vue.ref('next');
+        const items = vue.ref([]);
+        const timeout = vue.ref();
+        const visible = vue.ref();
         const setAnimating = (value) => {
             animating.value = value;
         };
@@ -2002,27 +2005,16 @@ const CCarousel = vue.defineComponent({
                 timeout.value = setTimeout(() => nextItemWhenVisible(), typeof customInterval.value === 'number' ? customInterval.value : props.interval);
             }
         };
-        const state = vue.reactive({
-            items: [],
-            active: props.index,
-            direction: 'next',
-        });
-        vue.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 = () => {
@@ -2033,17 +2025,17 @@ const CCarousel = vue.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 = () => {
@@ -2054,6 +2046,15 @@ const CCarousel = vue.defineComponent({
                 visible.value = false;
             }
         };
+        vue.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');
+                }
+            }
+        });
         vue.onMounted(() => {
             window.addEventListener('scroll', handleScroll);
         });
@@ -2063,7 +2064,7 @@ const CCarousel = vue.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();
                 }
             });
@@ -2084,19 +2085,19 @@ const CCarousel = vue.defineComponent({
             props.indicators &&
                 vue.h('div', {
                     class: 'carousel-indicators',
-                }, state.items.map((_, index) => {
+                }, items.value.map((_, index) => {
                     return vue.h('button', {
                         type: 'button',
                         id: index,
                         'data-coreui-target': '',
-                        ...(state.active === index && { class: 'active' }),
+                        ...(active.value === index && { class: 'active' }),
                         onClick: () => handleIndicatorClick(index),
                     });
                 })),
-            vue.h('div', { class: 'carousel-inner' }, state.items.map((item, index) => {
+            vue.h('div', { class: 'carousel-inner' }, items.value.map((item, index) => {
                 return vue.h(item, {
-                    active: state.active === index ? true : false,
-                    direction: state.direction,
+                    active: active.value === index ? true : false,
+                    direction: direction.value,
                 });
             })),
             props.controls && [
@@ -4815,6 +4816,12 @@ const CFormCheck = vue.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.
          *
@@ -4857,6 +4864,7 @@ const CFormCheck = vue.defineComponent({
             'form-check',
             {
                 'form-check-inline': props.inline,
+                'form-check-reverse': props.reverse,
                 'is-invalid': props.invalid,
                 'is-valid': props.valid,
             },
@@ -5554,6 +5562,12 @@ const CFormSwitch = vue.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`.
          *
@@ -5601,6 +5615,7 @@ const CFormSwitch = vue.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,