@coreui/vue-pro 5.2.0 → 5.4.0

package/src/components/modal/CModal.ts

@@ -1,6 +1,7 @@
 import {
   defineComponent,
   h,
+  PropType,
   provide,
   ref,
   RendererElement,
@@ -11,6 +12,7 @@ import {
 } from 'vue'
 
 import { CBackdrop } from '../backdrop/CBackdrop'
+import { CConditionalTeleport } from '../conditional-teleport'
 
 import { executeAfterTransition } from '../../utils/transition'
 
@@ -47,6 +49,15 @@ const CModal = defineComponent({
         return false
       },
     },
+    /**
+     * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since 5.3.0
+     */
+    container: {
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
+      default: 'body',
+    },
     /**
      * A string of all className you want applied to the modal content component.
      */
@@ -54,7 +65,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     focus: {
       type: Boolean,
@@ -99,6 +110,15 @@ const CModal = defineComponent({
         return ['sm', 'lg', 'xl'].includes(value)
       },
     },
+    /**
+     * Generates modal using Teleport.
+     *
+     * @since 5.3.0
+     */
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Remove animation to create modal that simply appear rather than fade in to view.
      */
@@ -264,27 +284,37 @@ const CModal = defineComponent({
         ),
       )
 
-    return () => [
+    return () =>
       h(
-        Transition,
+        CConditionalTeleport,
         {
-          css: false,
-          onEnter: (el, done) => handleEnter(el, done),
-          onAfterEnter: () => handleAfterEnter(),
-          onLeave: (el, done) => handleLeave(el, done),
-          onAfterLeave: (el) => handleAfterLeave(el),
+          container: props.container,
+          teleport: props.teleport,
         },
-        () =>
-          props.unmountOnClose
-            ? visible.value && modal()
-            : withDirectives(modal(), [[vShow, visible.value]]),
-      ),
-      props.backdrop &&
-        h(CBackdrop, {
-          class: 'modal-backdrop',
-          visible: visible.value,
-        }),
-    ]
+        {
+          default: () => [
+            h(
+              Transition,
+              {
+                css: false,
+                onEnter: (el, done) => handleEnter(el, done),
+                onAfterEnter: () => handleAfterEnter(),
+                onLeave: (el, done) => handleLeave(el, done),
+                onAfterLeave: (el) => handleAfterLeave(el),
+              },
+              () =>
+                props.unmountOnClose
+                  ? visible.value && modal()
+                  : withDirectives(modal(), [[vShow, visible.value]]),
+            ),
+            props.backdrop &&
+              h(CBackdrop, {
+                class: 'modal-backdrop',
+                visible: visible.value,
+              }),
+          ],
+        },
+      )
   },
 })
 

package/src/components/multi-select/CMultiSelect.ts

@@ -60,7 +60,10 @@ const CMultiSelect = defineComponent({
      */
     feedbackValid: String,
     /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     * Set the id attribute for the native select element.
+     *
+     * **[Deprecated since v5.3.0]** The name attribute for the native select element is generated based on the `id` property:
+     * - `<select name="\{id\}-multi-select" />`
      */
     id: String,
     /**
@@ -90,6 +93,12 @@ const CMultiSelect = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * The name attribute for the select element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * List of option elements.
      */
@@ -132,6 +141,12 @@ const CMultiSelect = defineComponent({
      * When it is present, it indicates that the user must choose a value before submitting the form.
      */
     required: Boolean,
+    /**
+     * Determines whether the selected options should be cleared when the options list is updated. When set to true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided.
+     *
+     * @since 5.3.0
+     */
+    resetSelectionOnOptionsChange: Boolean,
     /**
      * Enables search input element.
      */
@@ -298,7 +313,8 @@ const CMultiSelect = defineComponent({
       if (
         props.allowCreateOptions &&
         filteredOptions.value.some(
-          (option) => option.label && option.label.toLowerCase() === searchValue.value.toLowerCase(),
+          (option) =>
+            option.label && option.label.toLowerCase() === searchValue.value.toLowerCase(),
         )
       ) {
         return false
@@ -312,6 +328,12 @@ const CMultiSelect = defineComponent({
       (newValue, oldValue) => {
         if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
           options.value = newValue
+
+          if (props.resetSelectionOnOptionsChange) {
+            selected.value = []
+            return
+          }
+
           const _selected = flattenedOptions.value.filter(
             (option: Option | OptionsGroup) => option.selected === true,
           )
@@ -511,6 +533,7 @@ const CMultiSelect = defineComponent({
       h(CMultiSelectNativeSelect, {
         id: props.id,
         multiple: props.multiple,
+        name: props.name,
         options: selected.value,
         required: props.required,
         value: props.multiple
@@ -548,7 +571,6 @@ const CMultiSelect = defineComponent({
                   },
                 ],
                 'aria-expanded': visible.value,
-                id: props.id,
                 ref: multiSelectRef,
               },
               {

package/src/components/multi-select/CMultiSelectNativeSelect.ts

@@ -10,6 +10,7 @@ const CMultiSelectNativeSelect = defineComponent({
       type: Boolean,
       default: true,
     },
+    name: String,
     options: {
       type: Array as PropType<Option[]>,
       default: () => [],
@@ -38,8 +39,9 @@ const CMultiSelectNativeSelect = defineComponent({
         'select',
         {
           className: 'multi-select-new',
-          ...(props.id && { id: `${props.id}-multi-select` }),
-          ...(props.id && { name: `${props.id}-multi-select` }),
+          id: props.id,
+          ...(props.id && !props.name && { name: `${props.id}-multi-select` }), // TODO: remove in v6
+          ...(props.name && { name: props.name }), // TODO: change to `name: props.name` in v6
           multiple: props.multiple,
           tabIndex: '-1',
           style: { display: 'none' },

package/src/components/popover/CPopover.ts

@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

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

@@ -170,7 +170,7 @@ const CTimePicker = defineComponent({
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -213,6 +213,12 @@ const CTimePicker = defineComponent({
       >,
       default: true,
     },
+    /**
+     * Set the name attribute for the input element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * Specifies a short hint that is visible in the input.
      */
@@ -436,6 +442,8 @@ const CTimePicker = defineComponent({
           autocomplete: 'off',
           class: 'time-picker-input',
           disabled: props.disabled,
+          id: props.id,
+          name: props.name,
           onInput: (event: Event) =>
             useDebouncedCallback(() => {
               if (isValidTime((event.target as HTMLInputElement).value)) {

package/src/components/tooltip/CTooltip.ts

@@ -23,7 +23,7 @@ const CTooltip = defineComponent({
     /**
      * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,