@coreui/vue-pro 5.9.0 → 5.11.0

package/src/components/form/CFormControlWrapper.ts

@@ -7,6 +7,7 @@ import { CFormText } from './CFormText'
 import type { ComponentProps } from '../../utils/ComponentProps'
 
 interface CFormControlWrapperProps extends ComponentProps<typeof CFormControlValidation> {
+  floatingClassName?: string
   floatingLabel?: string
   id?: string
   label?: string
@@ -18,6 +19,12 @@ const CFormControlWrapper = defineComponent({
   inheritAttrs: false,
   props: {
     ...CFormControlValidation.props,
+    /**
+     * A string of all className you want applied to the floating label wrapper.
+     *
+     * @since 5.5.0
+     */
+    floatingClassName: String,
     /**
      * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
      *
@@ -64,34 +71,41 @@ const CFormControlWrapper = defineComponent({
           ...(slots.feedbackValid && {
             feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
           }),
-        },
+        }
       )
 
     return () =>
       props.floatingLabel
-        ? h(CFormFloating, () => [
-            slots.default && slots.default(),
-            h(
-              CFormLabel,
-              {
-                for: props.id,
-              },
-              {
-                default: () => (slots.label && slots.label()) || props.label || props.floatingLabel,
-              },
-            ),
-            (props.text || slots.text) &&
+        ? h(
+            CFormFloating,
+            {
+              class: props.floatingClassName,
+            },
+            () => [
+              slots.default && slots.default(),
               h(
-                CFormText,
+                CFormLabel,
                 {
-                  id: props.describedby,
+                  for: props.id,
                 },
                 {
-                  default: () => (slots.text && slots.text()) || props.text,
-                },
+                  default: () =>
+                    (slots.label && slots.label()) || props.label || props.floatingLabel,
+                }
               ),
-            formControlValidation(),
-          ])
+              (props.text || slots.text) &&
+                h(
+                  CFormText,
+                  {
+                    id: props.describedby,
+                  },
+                  {
+                    default: () => (slots.text && slots.text()) || props.text,
+                  }
+                ),
+              formControlValidation(),
+            ]
+          )
         : [
             (props.label || slots.label) &&
               h(
@@ -101,7 +115,7 @@ const CFormControlWrapper = defineComponent({
                 },
                 {
                   default: () => (slots.label && slots.label()) || props.label,
-                },
+                }
               ),
             slots.default && slots.default(),
             (props.text || slots.text) &&
@@ -112,7 +126,7 @@ const CFormControlWrapper = defineComponent({
                 },
                 {
                   default: () => (slots.text && slots.text()) || props.text,
-                },
+                }
               ),
             formControlValidation(),
           ]

package/src/components/index.ts

@@ -30,6 +30,7 @@ export * from './multi-select'
 export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
+export * from './password-input'
 export * from './pagination'
 export * from './picker'
 export * from './placeholder'
@@ -41,6 +42,7 @@ export * from './sidebar'
 export * from './smart-pagination'
 export * from './smart-table'
 export * from './spinner'
+export * from './stepper'
 export * from './table'
 export * from './tabs'
 export * from './time-picker'

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

@@ -8,7 +8,7 @@ import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
 
 import { useDropdownWithPopper } from '../../composables'
-import { getNextActiveElement } from '../../utils'
+import { getNextActiveElement, isEqual } from '../../utils'
 
 import {
   createOption,
@@ -203,7 +203,7 @@ const CMultiSelect = defineComponent({
 
           // Ensure that all values corresponding to the keys are boolean
           const allValuesBoolean = keys.every(
-            (key) => typeof value[key as keyof typeof value] === 'boolean',
+            (key) => typeof value[key as keyof typeof value] === 'boolean'
           )
 
           return allValuesBoolean
@@ -296,6 +296,12 @@ const CMultiSelect = defineComponent({
      * @since 4.6.0
      */
     valid: Boolean,
+    /**
+     * Sets the initially selected values for the multi-select component.
+     *
+     * @since 5.11.0
+     */
+    value: [String, Number, Array] as PropType<string | number | (string | number)[]>,
     /**
      * Enable virtual scroller for the options list.
      *
@@ -365,18 +371,35 @@ const CMultiSelect = defineComponent({
         isExternalSearch(props.search)
           ? [...props.options, ...filterOptionsList(searchValue.value, userOptions.value)]
           : filterOptionsList(searchValue.value, [...props.options, ...userOptions.value]),
-        true,
-      ),
+        true
+      )
     )
 
-    const flattenedOptions = computed(() => flattenOptionsArray(props.options))
+    const flattenedOptions = computed(() => {
+      return flattenOptionsArray(props.options).map((option) => {
+        if (props.value && Array.isArray(props.value)) {
+          return {
+            ...option,
+            selected: props.value.includes(option.value),
+          }
+        }
+
+        if (props.value === option.value) {
+          return {
+            ...option,
+            selected: true,
+          }
+        }
+
+        return option
+      })
+    })
 
     const userOption = computed(() => {
       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
@@ -394,17 +417,25 @@ const CMultiSelect = defineComponent({
         }
 
         const _selected = flattenedOptions.value.filter(
-          (option: Option | OptionsGroup) => option.selected === true,
+          (option: Option | OptionsGroup) => option.selected === true
         )
         const deselected = flattenedOptions.value.filter(
-          (option: Option | OptionsGroup) => option.selected === false,
+          (option: Option | OptionsGroup) => option.selected === false
         ) as Option[]
 
         if (_selected.length > 0) {
-          selected.value = selectOptions(props.multiple, _selected, selected.value, deselected)
+          const newSelectedValue = selectOptions(
+            props.multiple,
+            _selected,
+            selected.value,
+            deselected
+          )
+          if (!isEqual(newSelectedValue, selected.value)) {
+            selected.value = newSelectedValue
+          }
         }
       },
-      { immediate: true },
+      { immediate: true }
     )
 
     watch(selected, () => {
@@ -424,7 +455,7 @@ const CMultiSelect = defineComponent({
       },
       {
         immediate: true,
-      },
+      }
     )
 
     watch(isOpen, () => {
@@ -473,7 +504,7 @@ const CMultiSelect = defineComponent({
           items,
           target,
           event.key === 'ArrowDown',
-          !items.includes(target),
+          !items.includes(target)
         ).focus()
         return
       }
@@ -485,7 +516,7 @@ const CMultiSelect = defineComponent({
           selected.value = [
             ...selected.value,
             filteredOptions.value.find(
-              (option) => String(option.label).toLowerCase() === searchValue.value.toLowerCase(),
+              (option) => String(option.label).toLowerCase() === searchValue.value.toLowerCase()
             ) as Option,
           ]
         }
@@ -533,7 +564,7 @@ const CMultiSelect = defineComponent({
           items,
           target,
           event.key === 'ArrowDown',
-          !items.includes(target),
+          !items.includes(target)
         ).focus()
       }
     }
@@ -586,7 +617,7 @@ const CMultiSelect = defineComponent({
           ...flattenedOptions.value.filter((option: Option | OptionsGroup) => !option.disabled),
           ...userOptions.value,
         ],
-        selected.value,
+        selected.value
       )
     }
 
@@ -691,7 +722,7 @@ const CMultiSelect = defineComponent({
                                     ...(selected.value.length > 0 &&
                                       !props.multiple && {
                                         placeholder: selected.value.map(
-                                          (option) => option.label,
+                                          (option) => option.label
                                         )[0],
                                       }),
                                     ...(props.multiple &&
@@ -709,9 +740,9 @@ const CMultiSelect = defineComponent({
                                     },
                                     {
                                       default: () => props.placeholder,
-                                    },
+                                    }
                                   ),
-                          },
+                          }
                         ),
                         h(
                           'div',
@@ -741,10 +772,10 @@ const CMultiSelect = defineComponent({
                                 ...(props.disabled && { tabIndex: -1 }),
                               }),
                             ],
-                          },
+                          }
                         ),
                       ],
-                    },
+                    }
                   ),
                   h(
                     CConditionalTeleport,
@@ -778,7 +809,7 @@ const CMultiSelect = defineComponent({
                                     onClick: () => handleSelectAll(),
                                     type: 'button',
                                   },
-                                  props.selectAllLabel,
+                                  props.selectAllLabel
                                 ),
                               h(CMultiSelectOptions, {
                                 loading: props.loading,
@@ -796,14 +827,14 @@ const CMultiSelect = defineComponent({
                                 visibleItems: props.visibleItems,
                               }),
                             ],
-                          },
+                          }
                         ),
-                    },
+                    }
                   ),
                 ],
-              },
+              }
             ),
-        },
+        }
       ),
     ]
   },

package/src/components/nav/CNav.ts

@@ -24,12 +24,12 @@ const CNav = defineComponent({
     /**
      * Set the nav variant to tabs or pills.
      *
-     * @values 'pills', 'tabs', 'underline', 'underline-border'
+     * @values 'enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'
      */
     variant: {
       type: String,
       validator: (value: string) => {
-        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
+        return ['enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'].includes(value)
       },
     },
   },
@@ -40,6 +40,7 @@ const CNav = defineComponent({
         {
           class: [
             'nav',
+            props.variant === 'enclosed-pills' && 'nav-enclosed',
             {
               [`nav-${props.layout}`]: props.layout,
               [`nav-${props.variant}`]: props.variant,

package/src/components/nav/CNavGroup.ts

@@ -41,7 +41,10 @@ const CNavGroup = defineComponent({
 
     onMounted(() => {
       visible.value = props.visible
-      props.visible && navGroupRef.value.classList.add('show')
+      if (props.visible) {
+        navGroupRef.value.classList.add('show')
+      }
+
       emit('visible-change', visible.value)
     })
 
@@ -60,7 +63,8 @@ const CNavGroup = defineComponent({
       emit('visible-change', visible.value)
     })
 
-    const handleTogglerClick = () => {
+    const handleTogglerClick = (event: Event) => {
+      event.preventDefault()
       visible.value = !visible.value
       emit('visible-change', visible.value)
     }
@@ -111,6 +115,7 @@ const CNavGroup = defineComponent({
               'a',
               {
                 class: ['nav-link', 'nav-group-toggle'],
+                href: '#',
                 onClick: handleTogglerClick,
               },
               slots.togglerContent && slots.togglerContent(),

package/src/components/password-input/CPasswordInput.ts

@@ -0,0 +1,214 @@
+// CPasswordInput.ts
+import { defineComponent, h, ref, toRefs, watch, computed } from 'vue'
+import { CFormControlWrapper } from '../form/CFormControlWrapper'
+
+export const CPasswordInput = defineComponent({
+  name: 'CPasswordInput',
+  inheritAttrs: false,
+  props: {
+    /**
+     * Accessible label for the toggle visibility button.
+     */
+    ariaLabelToggler: {
+      type: String,
+      default: 'Toggle password visibility',
+    },
+
+    /**
+     * Delay emitting `change` and `update:modelValue` events.
+     * `true` = 500ms delay, or specify custom delay in ms.
+     */
+    delay: {
+      type: [Boolean, Number],
+      default: false,
+    },
+
+    /**
+     * Disables the password input field. When `true`, the user cannot interact with the field.
+     */
+    disabled: Boolean,
+
+    /**
+     * General feedback text shown below the input.
+     */
+    feedback: String,
+
+    /**
+     * Feedback text shown when input is invalid.
+     */
+    feedbackInvalid: String,
+
+    /**
+     * Feedback text shown when input is valid.
+     */
+    feedbackValid: String,
+
+    /**
+     * Class for the floating label wrapper.
+     */
+    floatingClassName: String,
+
+    /**
+     * Floating label text.
+     */
+    floatingLabel: String,
+
+    /**
+     * ID of the input element.
+     */
+    id: String,
+
+    /**
+     * Marks the input as invalid.
+     */
+    invalid: Boolean,
+
+    /**
+     * Main label for the input.
+     */
+    label: String,
+
+    /**
+     * The current value of the password input, used with v-model.
+     */
+    modelValue: String,
+
+    /**
+     * Makes the input read-only, allowing text selection only.
+     */
+    readOnly: Boolean,
+
+    /**
+     * Controls the initial visibility of the password.
+     */
+    showPassword: Boolean,
+
+    /**
+     * Sets the visual size of the input. Accepts `'sm'`, `'lg'`, or undefined.
+     */
+    size: {
+      type: String as () => 'sm' | 'lg' | undefined,
+      default: undefined,
+    },
+
+    /**
+     * Helper or hint text displayed below the input.
+     */
+    text: String,
+
+    /**
+     * Enables tooltip-style validation feedback messages.
+     */
+    tooltipFeedback: Boolean,
+
+    /**
+     * Marks the input as valid.
+     */
+    valid: Boolean,
+
+    /**
+     * Alternative to `modelValue`, mostly for manual `:value` binding.
+     */
+    value: String,
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit, attrs }) {
+    const { delay, showPassword, size, invalid, valid } = toRefs(props)
+
+    const localValue = ref(props.modelValue ?? props.value ?? '')
+    const visible = ref(showPassword.value ?? false)
+
+    const inputType = computed(() => (visible.value ? 'text' : 'password'))
+
+    watch(
+      () => props.modelValue ?? props.value,
+      (val) => {
+        if (val !== localValue.value) {
+          localValue.value = val as string
+        }
+      }
+    )
+
+    let timeout: ReturnType<typeof setTimeout>
+    watch(localValue, (val) => {
+      if (delay.value) {
+        clearTimeout(timeout)
+        timeout = setTimeout(
+          () => {
+            emit('update:modelValue', val)
+            emit('change', val)
+          },
+          typeof delay.value === 'number' ? delay.value : 500
+        )
+      } else {
+        emit('update:modelValue', val)
+        emit('change', val)
+      }
+    })
+
+    const togglePassword = () => {
+      visible.value = !visible.value
+    }
+
+    return () =>
+      h(
+        CFormControlWrapper,
+        {
+          describedby: attrs['aria-describedby'] as string,
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          floatingClassName: props.floatingLabel
+            ? ['form-password', props.floatingClassName].join(' ')
+            : props.floatingClassName,
+          floatingLabel: props.floatingLabel,
+          id: props.id,
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
+        },
+        {
+          default: () => {
+            const inputEl = h('input', {
+              ...attrs,
+              id: props.id,
+              type: inputType.value,
+              class: [
+                'form-control',
+                {
+                  [`form-control-${size.value}`]: size.value,
+                  'is-invalid': invalid.value,
+                  'is-valid': valid.value,
+                },
+                attrs.class,
+              ],
+              value: localValue.value,
+              onInput: (e: Event) => {
+                localValue.value = (e.target as HTMLInputElement).value
+              },
+              disabled: props.disabled,
+              readOnly: props.readOnly,
+            })
+
+            const buttonEl = h(
+              'button',
+              {
+                type: 'button',
+                class: 'form-password-action',
+                'data-coreui-toggle': 'password',
+                'aria-label': props.ariaLabelToggler,
+                onClick: togglePassword,
+              },
+              [h('span', { class: 'form-password-action-icon' })]
+            )
+
+            const content = [inputEl, buttonEl]
+
+            return props.floatingLabel ? content : h('div', { class: 'form-password' }, content)
+          },
+        }
+      )
+  },
+})

package/src/components/password-input/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CPasswordInput } from './CPasswordInput'
+
+const CPasswordInputPlugin = {
+  install: (app: App): void => {
+    app.component(CPasswordInput.name as string, CPasswordInput)
+  },
+}
+
+export { CPasswordInput, CPasswordInputPlugin }

package/src/components/range-slider/CRangeSlider.ts

@@ -240,7 +240,12 @@ const CRangeSlider = defineComponent({
     }
 
     const handleInputsContainerMouseDown = (event: MouseEvent) => {
-      if (!trackRef.value || event.button !== 0) return
+      if (!trackRef.value || event.button !== 0 || props.disabled) return
+
+      const target = event.target as HTMLDivElement | HTMLInputElement
+      if (!(target instanceof HTMLInputElement) && target !== trackRef.value) {
+        return
+      }
 
       const clickValue = calculateClickValue(
         event,
@@ -266,7 +271,7 @@ const CRangeSlider = defineComponent({
     }
 
     const handleMouseMove = (event: MouseEvent) => {
-      if (!isDragging.value || !trackRef.value) return
+      if (!isDragging.value || !trackRef.value || props.disabled) return
 
       const moveValue = calculateMoveValue(
         event,