@coreui/vue-pro 4.3.0-beta.1 → 4.3.0

package/src/components/form/CFormCheck.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h } from 'vue'
-import { shape } from 'vue-types'
 
-import { Color, Shape } from '../props'
+import { CButton } from '../button'
+import { CFormControlValidation } from './CFormControlValidation'
 import { CFormLabel } from './CFormLabel'
 
 const CFormCheck = defineComponent({
@@ -10,52 +10,51 @@ const CFormCheck = defineComponent({
   props: {
     /**
      * Create button-like checkboxes and radio buttons.
+     *
+     * @see http://coreui.io/vue/docs/components/button.html
      */
-    button: shape({
-      /**
-       * Sets the color context of the component to one of CoreUI’s themed colors.
-       *
-       * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
-       */
-      color: Color,
-      /**
-       * Select the shape of the component.
-       *
-       * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
-       */
-      shape: Shape,
-      /**
-       * Size the component small or large.
-       *
-       * @values 'sm' | 'lg'
-       */
-      size: {
-        type: String,
-        default: undefined,
-        required: false,
-        validator: (value: string) => {
-          return ['sm', 'lg'].includes(value)
-        },
-      },
-      /**
-       * Set the button variant to an outlined button or a ghost button.
-       */
-      variant: {
-        type: String,
-        default: undefined,
-        required: false,
-        validator: (value: string) => {
-          return ['outline', 'ghost'].includes(value)
-        },
+    button: {
+      type: Object,
+    },
+    /**
+     * 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,
+    },
+    /**
+     * Sets hit area to the full area of the component.
+     */
+    hitArea: {
+      type: String,
+      validator: (value: string): boolean => {
+        // The value must match one of these strings
+        return ['full'].includes(value)
       },
-    }),
+    },
     /**
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      */
     id: {
       type: String,
-      default: undefined,
-      required: false,
     },
     /**
      * Input Checkbox indeterminate Property
@@ -66,22 +65,16 @@ const CFormCheck = defineComponent({
      */
     inline: {
       type: Boolean,
-      required: false,
     },
     /**
      * Set component validation state to invalid.
      */
-    invalid: {
-      type: Boolean,
-      required: false,
-    },
+    invalid: Boolean,
     /**
      * 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.
@@ -89,8 +82,13 @@ const CFormCheck = defineComponent({
     modelValue: {
       type: [Boolean, String],
       value: undefined,
-      required: false,
     },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.3.0
+     */
+    tooltipFeedback: Boolean,
     /**
      * Specifies the type of component.
      *
@@ -99,14 +97,12 @@ const CFormCheck = defineComponent({
     type: {
       type: String,
       default: 'checkbox',
-      required: false,
     },
     /**
      * Set component validation state to valid.
      */
     valid: {
       type: Boolean,
-      required: false,
     },
   },
   emits: [
@@ -126,66 +122,95 @@ const CFormCheck = defineComponent({
       emit('update:modelValue', target.checked)
     }
 
-    const formControl = () => {
-      return h('input', {
-        ...attrs,
-        checked: props.modelValue,
-        class: [
-          props.button ? 'btn-check' : 'form-check-input',
+    const className = [
+      'form-check',
+      {
+        'form-check-inline': props.inline,
+        'is-invalid': props.invalid,
+        'is-valid': props.valid,
+      },
+      attrs.class,
+    ]
+
+    const inputClassName = props.button
+      ? 'btn-check'
+      : [
+          'form-check-input',
           {
             'is-invalid': props.invalid,
             'is-valid': props.valid,
+            'me-2': props.hitArea,
           },
-        ],
+        ]
+
+    const formControl = () => {
+      return h('input', {
+        ...attrs,
+        ...(props.modelValue && { checked: props.modelValue }),
+        class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,
         onChange: (event: InputEvent) => handleChange(event),
         type: props.type,
       })
     }
-    const formLabel = () => {
-      return h(
-        CFormLabel,
-        {
-          customClassName: props.button
-            ? [
-                'btn',
-                props.button.variant
-                  ? `btn-${props.button.variant}-${props.button.color}`
-                  : `btn-${props.button.color}`,
-                {
-                  [`btn-${props.button.size}`]: props.button.size,
-                },
-                `${props.button.shape}`,
-              ]
-            : 'form-check-label',
-          ...(props.id && { for: props.id }),
-        },
-        {
-          default: () => (slots.label && slots.label()) || props.label,
-        },
-      )
+
+    const formLabel = () =>
+      props.button
+        ? h(
+            CButton,
+            {
+              component: 'label',
+              ...props.button,
+              ...(props.id && { for: props.id }),
+            },
+            {
+              default: () => (slots.label && slots.label()) || props.label,
+            },
+          )
+        : h(
+            CFormLabel,
+            { class: 'form-check-label', ...(props.id && { for: props.id }) },
+            {
+              default: () => (slots.label && slots.label()) || props.label,
+            },
+          )
+
+    const formValidation = () => {
+      return h(CFormControlValidation, {
+        describedby: attrs['aria-describedby'] as string,
+        feedback: props.feedback,
+        feedbackInvalid: props.feedbackInvalid,
+        feedbackValid: props.feedbackValid,
+        invalid: props.invalid,
+        tooltipFeedback: props.tooltipFeedback,
+        valid: props.valid,
+      })
     }
 
     return () =>
       props.button
-        ? [formControl(), (slots.label || props.label) && formLabel()]
+        ? [formControl(), (slots.label || props.label) && formLabel(), formValidation()]
         : props.label
-        ? h(
-            'div',
-            {
-              class: [
-                'form-check',
+        ? props.hitArea
+          ? [
+              h(
+                CFormLabel,
                 {
-                  'form-check-inline': props.inline,
-                  'is-invalid': props.invalid,
-                  'is-valid': props.valid,
+                  customClassName: className,
+                  ...(props.id && { for: props.id }),
                 },
-                attrs.class,
-              ],
-            },
-            [formControl(), props.label && formLabel()],
-          )
+                [formControl(), props.label],
+              ),
+              formValidation(),
+            ]
+          : h(
+              'div',
+              {
+                class: className,
+              },
+              [formControl(), props.label && formLabel(), formValidation()],
+            )
         : formControl()
   },
 })

package/src/components/form/CFormControlValidation.ts

@@ -0,0 +1,97 @@
+import { defineComponent, h } from 'vue'
+import { CFormFeedback } from './CFormFeedback'
+
+const CFormControlValidation = defineComponent({
+  name: 'CFormControlValidation',
+  inheritAttrs: false,
+  props: {
+    /**
+     * @ignore
+     */
+    describedby: {
+      type: String,
+    },
+    /**
+     * 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,
+    },
+    /**
+     * Set component validation state to invalid.
+     */
+    invalid: Boolean,
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.3.0
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Set component validation state to valid.
+     */
+    valid: Boolean,
+  },
+  setup(props, { slots }) {
+    return () => [
+      props.feedback &&
+        (props.valid || props.invalid) &&
+        h(
+          CFormFeedback,
+          {
+            ...(props.invalid && { id: props.describedby }),
+            invalid: props.invalid,
+            tooltip: props.tooltipFeedback,
+            valid: props.valid,
+          },
+          {
+            default: () => (slots.feedback && slots.feedback()) || props.feedback,
+          },
+        ),
+      (props.feedbackInvalid || slots.feedbackInvalid) &&
+        h(
+          CFormFeedback,
+          {
+            id: props.describedby,
+            invalid: true,
+            tooltip: props.tooltipFeedback,
+          },
+          {
+            default: () =>
+              (slots.feedbackInvalid && slots.feedbackInvalid()) || props.feedbackInvalid,
+          },
+        ),
+      (props.feedbackValid || slots.feedbackValid) &&
+        h(
+          CFormFeedback,
+          {
+            tooltip: props.tooltipFeedback,
+            valid: true,
+          },
+          {
+            default: () => (slots.feedbackValid && slots.feedbackValid()) || props.feedbackValid,
+          },
+        ),
+    ]
+  },
+})
+
+export { CFormControlValidation }

package/src/components/form/CFormControlWrapper.ts

@@ -0,0 +1,106 @@
+import { defineComponent, h } from 'vue'
+import { CFormControlValidation } from './CFormControlValidation'
+import { CFormFloating } from './CFormFloating'
+import { CFormLabel } from './CFormLabel'
+import { CFormText } from './CFormText'
+
+const CFormControlWrapper = defineComponent({
+  name: 'CFormControlWrapper',
+  inheritAttrs: false,
+  props: {
+    ...CFormControlValidation.props,
+    /**
+     * 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,
+    },
+    /**
+     * @ignore
+     */
+    id: {
+      type: String,
+    },
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.3.0
+     */
+    label: {
+      type: String,
+    },
+    /**
+     * Add helper text to the component.
+     *
+     * @since 4.3.0
+     */
+    text: {
+      type: String,
+    },
+  },
+  setup(props, { slots }) {
+    return () =>
+      props.floatingLabel
+        ? h(CFormFloating, [
+            slots.default && slots.default(),
+            h(
+              CFormLabel,
+              {
+                for: props.id,
+              },
+              {
+                default: () => (slots.label && slots.label()) || props.label || props.floatingLabel,
+              },
+            ),
+          ])
+        : [
+            (props.label || slots.label) &&
+              h(
+                CFormLabel,
+                {
+                  for: props.id,
+                },
+                {
+                  default: () => (slots.label && slots.label()) || props.label,
+                },
+              ),
+            slots.default && slots.default(),
+            (props.text || slots.text) &&
+              h(
+                CFormText,
+                {
+                  id: props.describedby,
+                },
+                {
+                  default: () => (slots.text && slots.text()) || props.text,
+                },
+              ),
+            h(
+              CFormControlValidation,
+              {
+                describedby: props.describedby,
+                feedback: props.feedback,
+                feedbackInvalid: props.feedbackInvalid,
+                feedbackValid: props.feedbackValid,
+                floatingLabel: props.floatingLabel,
+                invalid: props.invalid,
+                tooltipFeedback: props.tooltipFeedback,
+                valid: props.valid,
+              },
+              {
+                ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
+                ...(slots.feedbackInvalid && {
+                  feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+                }),
+                ...(slots.feedbackValid && {
+                  feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+                }),
+              },
+            ),
+          ]
+  },
+})
+
+export { CFormControlWrapper }

package/src/components/form/CFormInput.ts

@@ -1,4 +1,5 @@
 import { defineComponent, h } from 'vue'
+import { CFormControlWrapper } from './CFormControlWrapper'
 
 const CFormInput = defineComponent({
   name: 'CFormInput',
@@ -10,12 +11,57 @@ const CFormInput = defineComponent({
       type: Boolean,
       required: false,
     },
+
+    // Inherited Props from CFormControlWrapper
+    /**
+     * 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,7 +69,6 @@ const CFormInput = 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`.
@@ -46,12 +91,24 @@ const CFormInput = defineComponent({
      */
     size: {
       type: String,
-      default: undefined,
-      require: false,
       validator: (value: string) => {
         return ['sm', 'lg'].includes(value)
       },
     },
+    /**
+     * Add helper text to the component.
+     *
+     * @since 4.3.0
+     */
+    text: {
+      type: String,
+    },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.3.0
+     */
+    tooltipFeedback: Boolean,
     /**
      * Specifies the type of component.
      *
@@ -60,15 +117,11 @@ const CFormInput = defineComponent({
     type: {
       type: String,
       default: 'text',
-      require: false,
     },
     /**
      * Set component validation state to valid.
      */
-    valid: {
-      type: Boolean,
-      required: false,
-    },
+    valid: Boolean,
   },
   emits: [
     /**
@@ -84,12 +137,13 @@ const CFormInput = 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)
@@ -98,25 +152,55 @@ const CFormInput = defineComponent({
 
     return () =>
       h(
-        'input',
+        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: [
-            props.plainText ? 'form-control-plaintext' : 'form-control',
-            {
-              'form-control-color': props.type === 'color',
-              [`form-control-${props.size}`]: props.size,
-              'is-invalid': props.invalid,
-              'is-valid': props.valid,
-            },
-          ],
-          disabled: props.disabled,
-          onChange: (event: InputEvent) => handleChange(event),
-          onInput: (event: InputEvent) => handleInput(event),
-          readonly: props.readonly,
-          type: props.type,
-          value: props.modelValue,
+          default: () =>
+            h(
+              'input',
+              {
+                ...attrs,
+                class: [
+                  props.plainText ? 'form-control-plaintext' : 'form-control',
+                  {
+                    'form-control-color': props.type === 'color',
+                    [`form-control-${props.size}`]: props.size,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                  },
+                  attrs.class,
+                ],
+                disabled: props.disabled,
+                onChange: (event: InputEvent) => handleChange(event),
+                onInput: (event: InputEvent) => handleInput(event),
+                readonly: props.readonly,
+                type: props.type,
+                ...(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(),
       )
   },
 })