@coreui/vue-pro 5.10.0 → 5.12.0

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

@@ -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,10 +417,10 @@ 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) {
@@ -405,14 +428,14 @@ const CMultiSelect = defineComponent({
             props.multiple,
             _selected,
             selected.value,
-            deselected,
+            deselected
           )
           if (!isEqual(newSelectedValue, selected.value)) {
             selected.value = newSelectedValue
           }
         }
       },
-      { immediate: true },
+      { immediate: true }
     )
 
     watch(selected, () => {
@@ -432,7 +455,7 @@ const CMultiSelect = defineComponent({
       },
       {
         immediate: true,
-      },
+      }
     )
 
     watch(isOpen, () => {
@@ -481,7 +504,7 @@ const CMultiSelect = defineComponent({
           items,
           target,
           event.key === 'ArrowDown',
-          !items.includes(target),
+          !items.includes(target)
         ).focus()
         return
       }
@@ -493,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,
           ]
         }
@@ -541,7 +564,7 @@ const CMultiSelect = defineComponent({
           items,
           target,
           event.key === 'ArrowDown',
-          !items.includes(target),
+          !items.includes(target)
         ).focus()
       }
     }
@@ -594,7 +617,7 @@ const CMultiSelect = defineComponent({
           ...flattenedOptions.value.filter((option: Option | OptionsGroup) => !option.disabled),
           ...userOptions.value,
         ],
-        selected.value,
+        selected.value
       )
     }
 
@@ -699,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 &&
@@ -717,9 +740,9 @@ const CMultiSelect = defineComponent({
                                     },
                                     {
                                       default: () => props.placeholder,
-                                    },
+                                    }
                                   ),
-                          },
+                          }
                         ),
                         h(
                           'div',
@@ -749,10 +772,10 @@ const CMultiSelect = defineComponent({
                                 ...(props.disabled && { tabIndex: -1 }),
                               }),
                             ],
-                          },
+                          }
                         ),
                       ],
-                    },
+                    }
                   ),
                   h(
                     CConditionalTeleport,
@@ -786,7 +809,7 @@ const CMultiSelect = defineComponent({
                                     onClick: () => handleSelectAll(),
                                     type: 'button',
                                   },
-                                  props.selectAllLabel,
+                                  props.selectAllLabel
                                 ),
                               h(CMultiSelectOptions, {
                                 loading: props.loading,
@@ -804,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/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 }