@coreui/vue-pro 4.5.0 → 4.6.0

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

@@ -1,5 +1,6 @@
 import { defineComponent, h, PropType, provide, ref, watch } from 'vue'
 
+import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
@@ -36,6 +37,50 @@ const CMultiSelect = defineComponent({
       required: false,
       default: false,
     },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedback: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedbackInvalid: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+     *
+     * @since 4.6.0
+     */
+    feedbackValid: {
+      type: String,
+    },
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     */
+    id: {
+      type: String,
+    },
+    /**
+     * Set component validation state to invalid.
+     *
+     * @since 4.6.0
+     */
+    invalid: Boolean,
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.6.0
+     */
+    label: {
+      type: String,
+    },
     /**
      * It specifies that multiple options can be selected at once.
      *
@@ -160,6 +205,26 @@ const CMultiSelect = defineComponent({
         return ['sm', 'lg'].includes(value)
       },
     },
+    /**
+     * Add helper text to the component.
+     *
+     * @since 4.6.0
+     */
+    text: {
+      type: String,
+    },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.6.0
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Set component validation state to valid.
+     *
+     * @since 4.6.0
+     */
+    valid: Boolean,
     /**
      * Toggle the visibility of multi select dropdown.
      *
@@ -177,7 +242,7 @@ const CMultiSelect = defineComponent({
      */
     'change',
   ],
-  setup(props, { emit }) {
+  setup(props, { attrs, emit }) {
     const flattenArray = (options: Option[]): Option[] => {
       return options.reduce((acc: Option[], val: Option) => {
         return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
@@ -324,6 +389,14 @@ const CMultiSelect = defineComponent({
 
     const handleOptionClick = (option: Option) => {
       options.value = updateOptions(option.value)
+
+      if (!props.multiple) {
+        visible.value = false
+        search.value = ''
+        if (searchRef.value) {
+          searchRef.value.value = ''
+        }
+      }
     }
 
     const handleSelectAll = () => {
@@ -344,83 +417,110 @@ const CMultiSelect = defineComponent({
         onChange: () => emit('change', selected.value),
       }),
       h(
-        CPicker,
+        CFormControlWrapper,
         {
-          class: [
-            'form-multi-select',
-            {
-              'form-multi-select-with-cleaner': props.cleaner,
-              disabled: props.disabled,
-              [`form-multi-select-${props.size}`]: props.size,
-              'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
-              show: visible.value,
-            },
-          ],
-          disabled: props.disabled,
-          onShow: () => {
-            props.search && searchRef.value && searchRef.value.focus()
-          },
+          describedby: attrs['aria-describedby'],
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          id: props.id,
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
         },
         {
-          toggler: () =>
-            h('div', {}, [
-              h(CMultiSelectSelection, {
-                multiple: props.multiple,
-                onRemove: (option: Option) => !props.disabled && handleOptionClick(option),
-                search: props.search,
-                selected: selected.value,
-                selectionType: props.selectionType,
-                selectionTypeCounterText: props.selectionTypeCounterText,
-              }),
-              props.multiple &&
-                props.cleaner &&
-                selected.value.length > 0 &&
-                !props.disabled &&
-                h('button', {
-                  type: 'button',
-                  class: 'form-multi-select-selection-cleaner',
-                  onClick: () => handleDeselectAll(),
-                }),
-              props.search &&
-                h('input', {
-                  type: 'text',
-                  class: 'form-multi-select-search',
-                  autocomplete: 'off',
-                  ...(selected.value.length === 0 && { placeholder: props.placeholder }),
-                  ...(selected.value.length &&
-                    props.selectionType === 'counter' && {
-                      placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+          default: () =>
+            h(
+              CPicker,
+              {
+                class: [
+                  'form-multi-select',
+                  {
+                    'form-multi-select-with-cleaner': props.cleaner,
+                    disabled: props.disabled,
+                    [`form-multi-select-${props.size}`]: props.size,
+                    'form-multi-select-selection-tags':
+                      props.multiple && props.selectionType === 'tags',
+                    show: visible.value,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                  },
+                ],
+                disabled: props.disabled,
+                id: props.id,
+                onHide: () => {
+                  visible.value = false
+                },
+                onShow: () => {
+                  props.search && searchRef.value && searchRef.value.focus()
+                  visible.value = true
+                },
+                visible: visible.value,
+              },
+              {
+                toggler: () =>
+                  h('div', {}, [
+                    h(CMultiSelectSelection, {
+                      multiple: props.multiple,
+                      onRemove: (option: Option) => !props.disabled && handleOptionClick(option),
+                      search: props.search,
+                      selected: selected.value,
+                      selectionType: props.selectionType,
+                      selectionTypeCounterText: props.selectionTypeCounterText,
                     }),
-                  ...(selected.value.length &&
-                    !props.multiple && {
-                      placeholder: selected.value.map((option) => option.text)[0],
+                    props.multiple &&
+                      props.cleaner &&
+                      selected.value.length > 0 &&
+                      !props.disabled &&
+                      h('button', {
+                        type: 'button',
+                        class: 'form-multi-select-selection-cleaner',
+                        onClick: () => handleDeselectAll(),
+                      }),
+                    props.search &&
+                      h('input', {
+                        type: 'text',
+                        class: 'form-multi-select-search',
+                        autocomplete: 'off',
+                        ...(selected.value.length === 0 && { placeholder: props.placeholder }),
+                        ...(selected.value.length &&
+                          props.selectionType === 'counter' && {
+                            placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+                          }),
+                        ...(selected.value.length &&
+                          !props.multiple && {
+                            placeholder: selected.value.map((option) => option.text)[0],
+                          }),
+                        disabled: props.disabled,
+                        onInput: (event: InputEvent) => handleSearchChange(event),
+                        onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
+                        ...(props.multiple &&
+                          selected.value.length &&
+                          props.selectionType !== 'counter' && { size: search.value.length + 2 }),
+                        ref: searchRef,
+                      }),
+                  ]),
+                default: () =>
+                  h('div', {}, [
+                    props.multiple &&
+                      props.selectAll &&
+                      h(
+                        'button',
+                        { class: 'form-multi-select-all', onClick: () => handleSelectAll() },
+                        props.selectAllLabel,
+                      ),
+                    h(CMultiSelectOptions, {
+                      onOptionClick: (option: Option) => handleOptionClick(option),
+                      options: vOptions.value,
+                      optionsMaxHeight: props.optionsMaxHeight,
+                      optionsStyle: props.optionsStyle,
+                      searchNoResultsLabel: props.searchNoResultsLabel,
                     }),
-                  disabled: props.disabled,
-                  onInput: (event: InputEvent) => handleSearchChange(event),
-                  onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
-                  ...(props.multiple &&
-                    selected.value.length &&
-                    props.selectionType !== 'counter' && { size: search.value.length + 2 }),
-                  ref: searchRef,
-                }),
-            ]),
-          default: () =>
-            h('div', {}, [
-              props.multiple &&
-                props.selectAll &&
-                h(
-                  'button',
-                  { class: 'form-multi-select-all', onClick: () => handleSelectAll() },
-                  props.selectAllLabel,
-                ),
-              h(CMultiSelectOptions, {
-                onOptionClick: (option: Option) => handleOptionClick(option),
-                options: vOptions.value,
-                optionsMaxHeight: props.optionsMaxHeight,
-                optionsStyle: props.optionsStyle,
-                searchNoResultsLabel: props.searchNoResultsLabel,
-              }),
-            ]),
+                  ]),
+              },
+            ),
         },
       ),
     ]

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

@@ -1,6 +1,7 @@
 import { defineComponent, h, ref, watch } from 'vue'
 
 import { CFormInput, CFormSelect, CInputGroup, CInputGroupText } from '../form/'
+import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePickerRollCol } from './CTimePickerRollCol'
 
@@ -110,6 +111,34 @@ const CTimePicker = defineComponent({
         return ['ghost', 'outline'].includes(value)
       },
     },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedback: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedbackInvalid: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+     *
+     * @since 4.6.0
+     */
+    feedbackValid: {
+      type: String,
+    },
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     */
+    id: String,
     /**
      * Toggle visibility or set the content of the input indicator.
      */
@@ -121,6 +150,20 @@ const CTimePicker = defineComponent({
      * Toggle the readonly state for the component.
      */
     inputReadOnly: Boolean,
+    /**
+     * Set component validation state to invalid.
+     *
+     * @since 4.6.0
+     */
+    invalid: Boolean,
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.6.0
+     */
+    label: {
+      type: String,
+    },
     /**
      * Sets the default locale for components. If not set, it is inherited from the navigator.language.
      */
@@ -147,12 +190,32 @@ const CTimePicker = defineComponent({
         return ['sm', 'lg'].includes(value)
       },
     },
+    /**
+     * Add helper text to the component.
+     *
+     * @since 4.6.0
+     */
+    text: {
+      type: String,
+    },
     /**
      * Initial selected time.
      */
     time: {
       type: [Date, String],
     },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.6.0
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Set component validation state to valid.
+     *
+     * @since 4.6.0
+     */
+    valid: Boolean,
     /**
      * Set the time picker variant to a roll or select.
      *
@@ -180,7 +243,7 @@ const CTimePicker = defineComponent({
      */
     'show',
   ],
-  setup(props, { emit, slots }) {
+  setup(props, { emit, attrs, slots }) {
     const date = ref<Date | null>(convertTimeToDate(props.time))
     const initialDate = ref<Date | null>(null)
     const ampm = ref<'am' | 'pm'>(date.value ? getAmPm(new Date(date.value), props.locale) : 'am')
@@ -348,56 +411,74 @@ const CTimePicker = defineComponent({
 
     return () =>
       h(
-        CPicker,
+        CFormControlWrapper,
         {
-          cancelButton: props.cancelButton,
-          cancelButtonColor: props.cancelButtonColor,
-          cancelButtonSize: props.cancelButtonSize,
-          cancelButtonVariant: props.cancelButtonVariant,
-          class: 'time-picker',
-          confirmButton: props.confirmButton,
-          confirmButtonColor: props.confirmButtonColor,
-          confirmButtonSize: props.confirmButtonSize,
-          confirmButtonVariant: props.confirmButtonVariant,
-          container: props.container,
-          disabled: props.disabled,
-          footer: true,
-          onCancel: () => {
-            if (initialDate.value) {
-              date.value = new Date(initialDate.value)
-            }
-          },
-          onHide: () => {
-            emit('hide')
-          },
-          onShow: () => {
-            if (date.value) {
-              initialDate.value = new Date(date.value)
-            }
-
-            emit('show')
-          },
+          describedby: attrs['aria-describedby'],
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          id: props.id,
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
         },
         {
-          ...(slots.cancelButton && {
-            cancelButton: () => slots.cancelButton && slots.cancelButton(),
-          }),
-          ...(slots.confirmButton && {
-            confirmButton: () => slots.confirmButton && slots.confirmButton(),
-          }),
-          toggler: () => InputGroup(),
           default: () =>
             h(
-              'div',
+              CPicker,
+              {
+                cancelButton: props.cancelButton,
+                cancelButtonColor: props.cancelButtonColor,
+                cancelButtonSize: props.cancelButtonSize,
+                cancelButtonVariant: props.cancelButtonVariant,
+                class: ['time-picker', { 'is-invalid': props.invalid, 'is-valid': props.valid }],
+                confirmButton: props.confirmButton,
+                confirmButtonColor: props.confirmButtonColor,
+                confirmButtonSize: props.confirmButtonSize,
+                confirmButtonVariant: props.confirmButtonVariant,
+                container: props.container,
+                disabled: props.disabled,
+                footer: true,
+                onCancel: () => {
+                  if (initialDate.value) {
+                    date.value = new Date(initialDate.value)
+                  }
+                },
+                onHide: () => {
+                  emit('hide')
+                },
+                onShow: () => {
+                  if (date.value) {
+                    initialDate.value = new Date(date.value)
+                  }
+
+                  emit('show')
+                },
+              },
               {
-                class: [
-                  'time-picker-body',
-                  {
-                    ['time-picker-roll']: props.variant === 'roll',
-                  },
-                ],
+                ...(slots.cancelButton && {
+                  cancelButton: () => slots.cancelButton && slots.cancelButton(),
+                }),
+                ...(slots.confirmButton && {
+                  confirmButton: () => slots.confirmButton && slots.confirmButton(),
+                }),
+                toggler: () => InputGroup(),
+                default: () =>
+                  h(
+                    'div',
+                    {
+                      class: [
+                        'time-picker-body',
+                        {
+                          ['time-picker-roll']: props.variant === 'roll',
+                        },
+                      ],
+                    },
+                    props.variant === 'select' ? TimePickerSelect() : TimePickerRoll(),
+                  ),
               },
-              props.variant === 'select' ? TimePickerSelect() : TimePickerRoll(),
             ),
         },
       )