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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.8.0-next.1",
+  "version": "4.8.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",

package/src/components/carousel/CCarousel.ts

@@ -1,7 +1,6 @@
 import {
   defineComponent,
   h,
-  reactive,
   ref,
   VNode,
   onBeforeMount,
@@ -79,10 +78,15 @@ 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<boolean | number>(props.interval)
+    const direction = ref('next')
+    const items = ref<VNode[]>([])
+    const timeout = ref()
+    const visible = ref()
+    
     const setAnimating = (value: boolean) => {
       animating.value = value
     }
@@ -105,28 +109,15 @@ const CCarousel = defineComponent({
       }
     }
 
-    const state = reactive({
-      items: [] as VNode[],
-      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: string) => {
+    const handleControlClick = (_direction: string) => {
       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--
       }
     }
 
@@ -139,19 +130,19 @@ const CCarousel = defineComponent({
     }
 
     const handleIndicatorClick = (index: number) => {
-      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
       }
     }
 
@@ -163,6 +154,17 @@ const CCarousel = defineComponent({
       }
     }
 
+    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)
     })
@@ -174,7 +176,7 @@ const CCarousel = defineComponent({
           return
         }
 
-        if (!props.wrap && state.active < state.items.length - 1) {
+        if (!props.wrap && active.value < items.value.length - 1) {
           !animating.value && cycle()
         }
       })
@@ -204,12 +206,12 @@ const CCarousel = defineComponent({
               {
                 class: 'carousel-indicators',
               },
-              state.items.map((_, index) => {
+              items.value.map((_, index) => {
                 return h('button', {
                   type: 'button',
                   id: index,
                   'data-coreui-target': '',
-                  ...(state.active === index && { class: 'active' }),
+                  ...(active.value === index && { class: 'active' }),
                   onClick: () => handleIndicatorClick(index),
                 })
               }),
@@ -217,10 +219,10 @@ const CCarousel = defineComponent({
           h(
             'div',
             { class: 'carousel-inner' },
-            state.items.map((item, index) => {
+            items.value.map((item, index) => {
               return h(item, {
-                active: state.active === index ? true : false,
-                direction: state.direction,
+                active: active.value === index ? true : false,
+                direction: direction.value,
               })
             }),
           ),

package/src/components/form/CFormCheck.ts

@@ -83,6 +83,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.
      *
@@ -126,6 +132,7 @@ const CFormCheck = defineComponent({
       'form-check',
       {
         'form-check-inline': props.inline,
+        'form-check-reverse': props.reverse,
         'is-invalid': props.invalid,
         'is-valid': props.valid,
       },

package/src/components/form/CFormSwitch.ts

@@ -31,6 +31,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`.
      *
@@ -82,6 +88,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,

package/dist/components/accordion/CAccordionCollapse.d.ts

@@ -1,22 +0,0 @@
-declare const CAccordionCollapse: import("vue").DefineComponent<{
-    /**
-     * Toggle the visibility of component.
-     */
-    visible: {
-        type: BooleanConstructor;
-        required: false;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Toggle the visibility of component.
-     */
-    visible: {
-        type: BooleanConstructor;
-        required: false;
-    };
-}>>, {
-    visible: boolean;
-}>;
-export { CAccordionCollapse };

package/dist/components/multi-select/CMultiSelect copy.d.ts

@@ -1,305 +0,0 @@
-import { PropType } from 'vue';
-export interface Option {
-    disabled?: boolean;
-    label?: string;
-    options?: Option[];
-    order?: number;
-    selected?: boolean;
-    text: string;
-    value: number | string;
-}
-declare const CMultiSelect: import("vue").DefineComponent<{
-    /**
-     * Enables selection cleaner element.
-     *
-     * @default true
-     */
-    cleaner: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * It specifies that multiple options can be selected at once.
-     *
-     * @default true
-     */
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-    /**
-     * List of option elements.
-     */
-    options: {
-        type: PropType<Option[]>;
-        default: () => never[];
-        required: false;
-    };
-    /**
-     * Sets maxHeight of options list.
-     *
-     * @default 'auto'
-     */
-    optionsMaxHeight: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
-        required: false;
-    };
-    /**
-     * Sets option style.
-     *
-     * @values 'checkbox', 'text'
-     * @default 'checkbox'
-     */
-    optionsStyle: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Specifies a short hint that is visible in the search input.
-     *
-     * @default 'Select...''
-     */
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Enables search input element.
-     */
-    search: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-    /**
-     * Sets the label for no results when filtering.
-     */
-    searchNoResultsLabel: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Enables select all button.
-     *
-     * @default true
-     */
-    selectAll: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * Sets the select all button label.
-     *
-     * @default 'Select all options'
-     */
-    selectAllLabel: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    /**
-     * Sets the selection style.
-     *
-     * @values 'counter', 'tags', 'text'
-     * @default 'tags'
-     */
-    selectionType: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Sets the counter selection label.
-     *
-     * @default 'item(s) selected'
-     */
-    selectionTypeCounterText: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Toggle the visibility of multi select dropdown.
-     *
-     * @default false
-     */
-    visible: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Enables selection cleaner element.
-     *
-     * @default true
-     */
-    cleaner: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * It specifies that multiple options can be selected at once.
-     *
-     * @default true
-     */
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-    /**
-     * List of option elements.
-     */
-    options: {
-        type: PropType<Option[]>;
-        default: () => never[];
-        required: false;
-    };
-    /**
-     * Sets maxHeight of options list.
-     *
-     * @default 'auto'
-     */
-    optionsMaxHeight: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
-        required: false;
-    };
-    /**
-     * Sets option style.
-     *
-     * @values 'checkbox', 'text'
-     * @default 'checkbox'
-     */
-    optionsStyle: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Specifies a short hint that is visible in the search input.
-     *
-     * @default 'Select...''
-     */
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Enables search input element.
-     */
-    search: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-    /**
-     * Sets the label for no results when filtering.
-     */
-    searchNoResultsLabel: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Enables select all button.
-     *
-     * @default true
-     */
-    selectAll: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * Sets the select all button label.
-     *
-     * @default 'Select all options'
-     */
-    selectAllLabel: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    /**
-     * Sets the selection style.
-     *
-     * @values 'counter', 'tags', 'text'
-     * @default 'tags'
-     */
-    selectionType: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Sets the counter selection label.
-     *
-     * @default 'item(s) selected'
-     */
-    selectionTypeCounterText: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Toggle the visibility of multi select dropdown.
-     *
-     * @default false
-     */
-    visible: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-}>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-}, {
-    search: boolean;
-    visible: boolean;
-    disabled: boolean;
-    multiple: boolean;
-    options: Option[];
-    cleaner: boolean;
-    placeholder: string;
-    optionsMaxHeight: string | number;
-    optionsStyle: string;
-    searchNoResultsLabel: string;
-    selectionType: string;
-    selectionTypeCounterText: string;
-    selectAll: boolean;
-    selectAllLabel: string;
-}>;
-export { CMultiSelect };