@coreui/vue-pro 4.3.0-beta.0 → 4.3.1

package/src/components/form/CFormRange.ts

@@ -1,4 +1,5 @@
 import { defineComponent, h } from 'vue'
+import { CFormLabel } from './CFormLabel'
 
 const CFormRange = defineComponent({
   name: 'CFormRange',
@@ -9,7 +10,14 @@ const CFormRange = defineComponent({
     disabled: {
       type: Boolean,
       default: undefined,
-      required: false,
+    },
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.3.0
+     */
+    label: {
+      type: String,
     },
     /**
      * Specifies the maximum value for the component.
@@ -17,7 +25,6 @@ const CFormRange = defineComponent({
     max: {
       type: Number,
       default: undefined,
-      required: false,
     },
     /**
      * Specifies the minimum value for the component.
@@ -25,7 +32,6 @@ const CFormRange = defineComponent({
     min: {
       type: Number,
       default: undefined,
-      required: false,
     },
     /**
      * The default name for a value passed using v-model.
@@ -33,14 +39,12 @@ const CFormRange = defineComponent({
     modelValue: {
       type: String,
       value: undefined,
-      required: false,
     },
     /**
      * Toggle the readonly state for the component.
      */
     readonly: {
       type: Boolean,
-      required: false,
     },
     /**
      * Specifies the interval between legal numbers in the component.
@@ -48,7 +52,6 @@ const CFormRange = defineComponent({
     steps: {
       type: Number,
       default: undefined,
-      required: false,
     },
     /**
      * The `value` attribute of component.
@@ -58,7 +61,6 @@ const CFormRange = defineComponent({
     value: {
       type: Number,
       default: undefined,
-      required: false,
     },
   },
   emits: [
@@ -71,29 +73,41 @@ const CFormRange = defineComponent({
      */
     'update:modelValue',
   ],
-  setup(props, { emit, slots }) {
+  setup(props, { attrs, emit, slots }) {
     const handleChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       emit('change', event)
       emit('update:modelValue', target.value)
     }
 
-    return () =>
+    return () => [
+      props.label &&
+        h(
+          CFormLabel,
+          {
+            for: attrs.id,
+          },
+          {
+            default: () => (slots.label && slots.label()) || props.label,
+          },
+        ),
       h(
         'input',
         {
+          ...attrs,
           class: 'form-range',
           disabled: props.disabled,
           max: props.max,
           min: props.min,
           onChange: (event: InputEvent) => handleChange(event),
-          steps: props.steps,
           readonly: props.readonly,
+          steps: props.steps,
           type: 'range',
           value: props.modelValue,
         },
         slots.default && slots.default(),
-      )
+      ),
+    ]
   },
 })
 

package/src/components/form/CFormSelect.ts

@@ -1,4 +1,5 @@
 import { defineComponent, h, PropType } from 'vue'
+import { CFormControlWrapper } from './CFormControlWrapper'
 
 type Option = {
   disabled?: boolean
@@ -10,6 +11,38 @@ type Option = {
 const CFormSelect = defineComponent({
   name: 'CFormSelect',
   props: {
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.3.0
+     */
+    feedback: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.3.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.3.0
+     */
+    feedbackValid: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+     *
+     * @since 4.3.0
+     */
+    floatingLabel: {
+      type: String,
+    },
     /**
      * Specifies the number of visible options in a drop-down list.
      */
@@ -18,12 +51,23 @@ const CFormSelect = defineComponent({
       default: undefined,
       required: false,
     },
+    /**
+     * 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.
      */
-    invalid: {
-      type: Boolean,
-      required: false,
+    invalid: Boolean,
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.3.0
+     */
+    label: {
+      type: String,
     },
     /**
      * The default name for a value passed using v-model.
@@ -62,12 +106,23 @@ const CFormSelect = defineComponent({
       },
     },
     /**
-     * Set component validation state to valid.
+     * Add helper text to the component.
+     *
+     * @since 4.3.0
      */
-    valid: {
-      type: Boolean,
-      required: false,
+    text: {
+      type: String,
     },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.3.0
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Set component validation state to valid.
+     */
+    valid: Boolean,
   },
   emits: [
     /**
@@ -79,7 +134,7 @@ const CFormSelect = defineComponent({
      */
     'update:modelValue',
   ],
-  setup(props, { emit, slots }) {
+  setup(props, { attrs, emit, slots }) {
     const handleChange = (event: InputEvent) => {
       const target = event.target as HTMLSelectElement
       const selected = Array.from(target.options)
@@ -91,41 +146,72 @@ const CFormSelect = defineComponent({
 
     return () =>
       h(
-        'select',
+        CFormControlWrapper,
+        {
+          describedby: attrs['aria-describedby'],
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          floatingLabel: props.floatingLabel,
+          id: props.id,
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
+        },
         {
-          class: [
-            'form-select',
-            {
-              [`form-select-${props.size}`]: props.size,
-              'is-invalid': props.invalid,
-              'is-valid': props.valid,
-            },
-          ],
-          multiple: props.multiple,
-          onChange: (event: InputEvent) => handleChange(event),
-          size: props.htmlSize,
-          ...(props.modelValue && !props.multiple && { value: props.modelValue }),
+          default: () =>
+            h(
+              'select',
+              {
+                id: props.id,
+                ...attrs,
+                class: [
+                  'form-select',
+                  {
+                    [`form-select-${props.size}`]: props.size,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                  },
+                  attrs.class,
+                ],
+                multiple: props.multiple,
+                onChange: (event: InputEvent) => handleChange(event),
+                size: props.htmlSize,
+                ...(props.modelValue && !props.multiple && { value: props.modelValue }),
+              },
+              props.options
+                ? props.options.map((option: Option | string) => {
+                    return h(
+                      'option',
+                      {
+                        ...(typeof option === 'object' && {
+                          ...(option.disabled && { disabled: option.disabled }),
+                          ...(option.selected && { selected: option.selected }),
+                          ...(option.value && {
+                            value: option.value,
+                            ...(props.modelValue &&
+                              props.multiple &&
+                              props.modelValue.includes(option.value) && { selected: true }),
+                          }),
+                        }),
+                      },
+                      typeof option === 'string' ? option : option.label,
+                    )
+                  })
+                : slots.default && slots.default(),
+            ),
+          ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
+          ...(slots.feedbackInvalid && {
+            feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+          }),
+          ...(slots.feedbackValid && {
+            feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+          }),
+          ...(slots.label && { label: () => slots.label && slots.label() }),
+          ...(slots.text && { text: () => slots.text && slots.text() }),
         },
-        props.options
-          ? props.options.map((option: Option | string) => {
-              return h(
-                'option',
-                {
-                  ...(typeof option === 'object' && {
-                    ...(option.disabled && { disabled: option.disabled }),
-                    ...(option.selected && { selected: option.selected }),
-                    ...(option.value && {
-                      value: option.value,
-                      ...(props.modelValue &&
-                        props.multiple &&
-                        props.modelValue.includes(option.value) && { selected: true }),
-                    }),
-                  }),
-                },
-                typeof option === 'string' ? option : option.label,
-              )
-            })
-          : slots.default && slots.default(),
       )
   },
 })

package/src/components/form/CFormSwitch.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, watch, ref } from 'vue'
+import { defineComponent, h } from 'vue'
 
 import { CFormLabel } from './CFormLabel'
 
@@ -11,23 +11,18 @@ const CFormSwitch = defineComponent({
      */
     id: {
       type: String,
-      default: undefined,
-      required: false,
     },
     /**
      * Set component validation state to invalid.
      */
     invalid: {
       type: Boolean,
-      required: false,
     },
     /**
      * The element represents a caption for a component.
      */
     label: {
       type: String,
-      default: undefined,
-      required: false,
     },
     /**
      * The default name for a value passed using v-model.
@@ -35,7 +30,6 @@ const CFormSwitch = defineComponent({
     modelValue: {
       type: [Boolean, String],
       value: undefined,
-      required: false,
     },
     /**
      * Size the component large or extra large. Works only with `switch`.
@@ -44,8 +38,6 @@ const CFormSwitch = defineComponent({
      */
     size: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['lg', 'xl'].includes(value)
       },
@@ -58,14 +50,12 @@ const CFormSwitch = defineComponent({
     type: {
       type: String,
       default: 'checkbox',
-      required: false,
     },
     /**
      * Set component validation state to valid.
      */
     valid: {
       type: Boolean,
-      required: false,
     },
   },
   emits: [
@@ -79,15 +69,6 @@ const CFormSwitch = defineComponent({
     'update:modelValue',
   ],
   setup(props, { attrs, emit }) {
-    const checked = ref(attrs.checked)
-
-    watch(
-      () => props.modelValue,
-      () => {
-        if (typeof props.modelValue === 'boolean') checked.value = props.modelValue
-      },
-    )
-
     const handleChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       emit('change', event)
@@ -110,7 +91,7 @@ const CFormSwitch = defineComponent({
         [
           h('input', {
             ...attrs,
-            checked: checked.value,
+            ...(props.modelValue && { checked: props.modelValue }),
             class: [
               'form-check-input',
               {

package/src/components/form/CFormTextarea.ts

@@ -1,4 +1,5 @@
 import { defineComponent, h } from 'vue'
+import { CFormControlWrapper } from './CFormControlWrapper'
 
 const CFormTextarea = defineComponent({
   name: 'CFormTextarea',
@@ -8,14 +9,56 @@ const CFormTextarea = defineComponent({
      */
     disabled: {
       type: Boolean,
-      required: false,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.3.0
+     */
+    feedback: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.3.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.3.0
+     */
+    feedbackValid: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+     *
+     * @since 4.3.0
+     */
+    floatingLabel: {
+      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.
      */
-    invalid: {
-      type: Boolean,
-      required: false,
+    invalid: Boolean,
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.3.0
+     */
+    label: {
+      type: String,
     },
     /**
      * The default name for a value passed using v-model.
@@ -23,29 +66,37 @@ const CFormTextarea = defineComponent({
     modelValue: {
       type: String,
       default: undefined,
-      require: false,
     },
     /**
      * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
      */
     plainText: {
       type: Boolean,
-      required: false,
     },
     /**
      * Toggle the readonly state for the component.
      */
     readonly: {
       type: Boolean,
-      required: false,
     },
     /**
-     * Set component validation state to valid.
+     * Add helper text to the component.
+     *
+     * @since 4.3.0
      */
-    valid: {
-      type: Boolean,
-      required: false,
+    text: {
+      type: String,
     },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.3.0
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Set component validation state to valid.
+     */
+    valid: Boolean,
   },
   emits: [
     /**
@@ -61,7 +112,13 @@ const CFormTextarea = defineComponent({
      */
     'update:modelValue',
   ],
-  setup(props, { emit, slots }) {
+  setup(props, { attrs, emit, slots }) {
+    const handleChange = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
+      emit('change', event)
+      emit('update:modelValue', target.value)
+    }
+
     const handleInput = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       emit('input', event)
@@ -70,21 +127,52 @@ const CFormTextarea = defineComponent({
 
     return () =>
       h(
-        'textarea',
+        CFormControlWrapper,
+        {
+          describedby: attrs['aria-describedby'],
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          floatingLabel: props.floatingLabel,
+          id: props.id,
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
+        },
         {
-          disabled: props.disabled,
-          readonly: props.readonly,
-          class: [
-            props.plainText ? 'form-control-plaintext' : 'form-control',
-            {
-              'is-invalid': props.invalid,
-              'is-valid': props.valid,
-            },
-          ],
-          onInput: (event: InputEvent) => handleInput(event),
-          value: props.modelValue,
+          default: () =>
+            h(
+              'textarea',
+              {
+                id: props.id,
+                ...attrs,
+                disabled: props.disabled,
+                readonly: props.readonly,
+                class: [
+                  props.plainText ? 'form-control-plaintext' : 'form-control',
+                  {
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                  },
+                ],
+                onChange: (event: InputEvent) => handleChange(event),
+                onInput: (event: InputEvent) => handleInput(event),
+                ...(props.modelValue && { value: props.modelValue }),
+              },
+              slots.default && slots.default(),
+            ),
+          ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
+          ...(slots.feedbackInvalid && {
+            feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+          }),
+          ...(slots.feedbackValid && {
+            feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+          }),
+          ...(slots.label && { label: () => slots.label && slots.label() }),
+          ...(slots.text && { text: () => slots.text && slots.text() }),
         },
-        slots.default && slots.default(),
       )
   },
 })

package/src/components/form/__tests__/CFormInput.spec.ts

@@ -49,7 +49,7 @@ describe(`Loads and display ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('form-control')).toBe(true)
+    expect(defaultWrapper.find('input').classes('form-control')).toBe(true)
   })
 })
 
@@ -59,11 +59,11 @@ describe(`Customize ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(customWrapper.text()).toContain('Default slot')
-    expect(customWrapper.classes('form-control-plaintext')).toBe(true)
-    expect(customWrapper.classes('form-control-color')).toBe(true)
-    expect(customWrapper.classes('form-control-lg')).toBe(true)
-    expect(customWrapper.classes('is-invalid')).toBe(true)
-    expect(customWrapper.classes('is-valid')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-plaintext')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-color')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-lg')).toBe(true)
+    expect(customWrapper.find('input').classes('is-invalid')).toBe(true)
+    expect(customWrapper.find('input').classes('is-valid')).toBe(true)
   })
 })
 
@@ -73,10 +73,10 @@ describe(`Customize (two) ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(customWrapperTwo.text()).toContain('Default slot')
-    expect(customWrapperTwo.classes('form-control')).toBe(true)
-    expect(customWrapper.classes('form-control-color')).toBe(true)
-    expect(customWrapper.classes('form-control-lg')).toBe(true)
-    expect(customWrapper.classes('is-invalid')).toBe(true)
-    expect(customWrapper.classes('is-valid')).toBe(true)
+    expect(customWrapperTwo.find('input').classes('form-control')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-color')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-lg')).toBe(true)
+    expect(customWrapper.find('input').classes('is-invalid')).toBe(true)
+    expect(customWrapper.find('input').classes('is-valid')).toBe(true)
   })
 })

package/src/components/form/__tests__/CFormRange.spec.ts

@@ -33,8 +33,8 @@ describe(`Loads and display ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('form-range')).toBe(true)
-    expect(defaultWrapper.attributes('type')).toBe('range')
+    expect(defaultWrapper.find('input').classes('form-range')).toBe(true)
+    expect(defaultWrapper.find('input').attributes('type')).toBe('range')
   })
 })
 
@@ -44,12 +44,12 @@ describe(`Customize ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(customWrapper.text()).toContain('Default slot')
-    expect(customWrapper.classes('form-range')).toBe(true)
-    expect(customWrapper.attributes('type')).toBe('range')
-    expect(customWrapper.attributes('disabled')).toBe('')
-    expect(customWrapper.attributes('max')).toBe('400')
-    expect(customWrapper.attributes('min')).toBe('50')
-    expect(customWrapper.attributes('readonly')).toBe('')
-    expect(customWrapper.attributes('steps')).toBe('10')
+    expect(customWrapper.find('input').classes('form-range')).toBe(true)
+    expect(customWrapper.find('input').attributes('type')).toBe('range')
+    expect(customWrapper.find('input').attributes('disabled')).toBe('')
+    expect(customWrapper.find('input').attributes('max')).toBe('400')
+    expect(customWrapper.find('input').attributes('min')).toBe('50')
+    expect(customWrapper.find('input').attributes('readonly')).toBe('')
+    expect(customWrapper.find('input').attributes('steps')).toBe('10')
   })
 })

package/src/components/form/__tests__/CFormSelect.spec.ts

@@ -31,7 +31,7 @@ describe(`Loads and display ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('form-select')).toBe(true)
+    expect(defaultWrapper.find('select').classes('form-select')).toBe(true)
   })
 })
 
@@ -41,8 +41,8 @@ describe(`Customize ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(customWrapper.text()).toContain('Default slot')
-    expect(customWrapper.classes('form-select')).toBe(true)
-    expect(customWrapper.classes('form-select-lg')).toBe(true)
-    expect(customWrapper.attributes('size')).toBe('200')
+    expect(customWrapper.find('select').classes('form-select')).toBe(true)
+    expect(customWrapper.find('select').classes('form-select-lg')).toBe(true)
+    expect(customWrapper.find('select').attributes('size')).toBe('200')
   })
 })