@coreui/vue-pro 4.9.0 → 4.10.1

package/package.json

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

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -477,7 +477,9 @@ const CDateRangePicker = defineComponent({
     const maxDate = ref(props.maxDate && new Date(props.maxDate))
     const minDate = ref(props.minDate && new Date(props.minDate))
     const selectEndDate = ref(false)
-    const isValid = ref(props.valid || (props.invalid && false))
+    const isValid = ref<boolean | undefined>(
+      props.valid ?? (props.invalid === true ? false : undefined),
+    )
     const isMobile = ref(false)
 
     onMounted(() => {
@@ -487,7 +489,7 @@ const CDateRangePicker = defineComponent({
     watch(
       () => [props.valid, props.invalid],
       () => {
-        isValid.value = props.valid || (props.invalid && false)
+        isValid.value = props.valid ?? (props.invalid === true ? false : undefined)
       },
     )
 

package/src/components/form/CFormCheck.ts

@@ -14,6 +14,12 @@ const CFormCheck = defineComponent({
      * @see http://coreui.io/vue/docs/components/button.html
      */
     button: Object,
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
+     *
+     * @since 4.10.0
+     */
+    falseValue: String,
     /**
      * Provide valuable, actionable feedback.
      *
@@ -66,7 +72,7 @@ const CFormCheck = defineComponent({
      * The default name for a value passed using v-model.
      */
     modelValue: {
-      type: [Boolean, String],
+      type: [Array, Boolean, String],
       value: undefined,
     },
     /**
@@ -81,6 +87,12 @@ const CFormCheck = defineComponent({
      * @since 4.3.0
      */
     tooltipFeedback: Boolean,
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
+     *
+     * @since 4.10.0
+     */
+    trueValue: String,
     /**
      * Specifies the type of component.
      *
@@ -111,8 +123,35 @@ const CFormCheck = defineComponent({
   ],
   setup(props, { attrs, emit, slots }) {
     const handleChange = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
       emit('change', event)
-      emit('update:modelValue', (event.target as HTMLInputElement).value)
+
+      if (props.falseValue && props.trueValue) {
+        emit('update:modelValue', target.checked ? props.trueValue : props.falseValue)
+        return
+      }
+
+      if (props.value && Array.isArray(props.modelValue)) {
+        if (props.modelValue.includes(props.value)) {
+          emit(
+            'update:modelValue',
+            props.modelValue.filter((value) => value !== props.value),
+          )
+        } else {
+          emit('update:modelValue', [...props.modelValue, props.value])
+        }
+
+        return
+      }
+
+      if (props.value === undefined) {
+        emit('update:modelValue', target.checked)
+        return
+      }
+
+      if (props.value && (props.modelValue === undefined || typeof props.modelValue === 'string')) {
+        emit('update:modelValue', target.checked ? props.value : undefined)
+      }
     }
 
     const className = [
@@ -135,12 +174,22 @@ const CFormCheck = defineComponent({
       },
     ]
 
-    const isChecked = computed(() => props.modelValue == props.value)
+    const isChecked = computed(() => {
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(props.value)
+      }
+
+      if (typeof props.modelValue === 'string') {
+        return props.modelValue === props.value
+      }
+
+      return props.modelValue
+    })
 
     const formControl = () => {
       return h('input', {
         ...attrs,
-        ...(props.modelValue && { checked: isChecked.value }),
+        ...(props.modelValue && props.value && { checked: isChecked.value }),
         class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,
@@ -210,4 +259,4 @@ const CFormCheck = defineComponent({
   },
 })
 
-export { CFormCheck }
+export { CFormCheck }

package/src/components/smart-pagination/CSmartPagination.ts

@@ -140,11 +140,26 @@ const CSmartPagination = defineComponent({
     const limit = ref(props.limit)
     const pages = ref(props.pages)
 
-    watch(props, () => {
-      activePage.value = props.activePage
-      limit.value = props.limit
-      pages.value = props.pages
-    })
+    watch(
+      () => props.activePage,
+      () => {
+        activePage.value = props.activePage
+      },
+    )
+
+    watch(
+      () => props.limit,
+      () => {
+        limit.value = props.limit
+      },
+    )
+
+    watch(
+      () => props.pages,
+      () => {
+        pages.value = props.pages
+      },
+    )
 
     const showDots = computed(() => {
       return props.dots && limit.value > 4 && limit.value < pages.value

package/src/components/time-picker/CTimePicker.ts

@@ -293,7 +293,9 @@ const CTimePicker = defineComponent({
       listOfSeconds: [],
       hour12: false,
     })
-    const isValid = ref(props.valid || (props.invalid && false))
+    const isValid = ref<boolean | undefined>(
+      props.valid ?? (props.invalid === true ? false : undefined),
+    )
 
     watch(
       () => props.time,
@@ -305,7 +307,7 @@ const CTimePicker = defineComponent({
     watch(
       () => [props.valid, props.invalid],
       () => {
-        isValid.value = props.valid || (props.invalid && false)
+        isValid.value = props.valid ?? (props.invalid === true ? false : undefined)
       },
     )