@coreui/vue-pro 4.2.0 → 4.3.0

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,7 @@ const CFormTextarea = defineComponent({
      */
     'update:modelValue',
   ],
-  setup(props, { emit, slots }) {
+  setup(props, { attrs, emit, slots }) {
     const handleInput = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       emit('input', event)
@@ -70,21 +121,50 @@ 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',
+              {
+                ...attrs,
+                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),
+                ...(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/index.ts

@@ -6,11 +6,14 @@ export * from './badge'
 export * from './breadcrumb'
 export * from './button'
 export * from './button-group'
+export * from './calendar'
 export * from './callout'
 export * from './card'
 export * from './carousel'
 export * from './close-button'
 export * from './collapse'
+export * from './date-picker'
+export * from './date-range-picker'
 export * from './dropdown'
 export * from './element-cover'
 export * from './footer'
@@ -27,6 +30,7 @@ export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
 export * from './pagination'
+export * from './picker'
 export * from './placeholder'
 export * from './progress'
 export * from './popover'
@@ -35,6 +39,7 @@ export * from './smart-table'
 export * from './spinner'
 export * from './table'
 export * from './tabs'
+export * from './time-picker'
 export * from './toast'
 export * from './tooltip'
 export * from './widgets'

package/src/components/modal/CModal.ts

@@ -12,8 +12,11 @@ import {
 
 import { CBackdrop } from './../backdrop/CBackdrop'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CModal = defineComponent({
   name: 'CModal',
+  inheritAttrs: false,
   props: {
     /**
      * Align the modal in the center or top of the screen.
@@ -140,9 +143,7 @@ const CModal = defineComponent({
     )
 
     const handleEnter = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.add('modal-open')
       el.style.display = 'block'
       setTimeout(() => {
@@ -150,17 +151,22 @@ const CModal = defineComponent({
       }, 1)
       emit('show')
     }
+
     const handleAfterEnter = () => {
       window.addEventListener('mousedown', handleMouseDown)
       window.addEventListener('keyup', handleKeyUp)
     }
+
     const handleLeave = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.remove('modal-open')
+      if (document.body.className === '') {
+        document.body.removeAttribute('class')
+      }
+
       el.classList.remove('show')
     }
+
     const handleAfterLeave = (el: RendererElement) => {
       window.removeEventListener('mousedown', handleMouseDown)
       window.removeEventListener('keyup', handleKeyUp)
@@ -177,6 +183,7 @@ const CModal = defineComponent({
         if (props.backdrop !== 'static' && event.key === 'Escape' && props.keyboard) {
           handleDismiss()
         }
+
         if (props.backdrop === 'static') {
           modalRef.value.classList.add('modal-static')
           emit('close-prevented')
@@ -196,6 +203,7 @@ const CModal = defineComponent({
         if (props.backdrop !== 'static') {
           handleDismiss()
         }
+
         if (props.backdrop === 'static') {
           modalRef.value.classList.add('modal-static')
           setTimeout(() => {

package/src/components/nav/CNavGroup.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, onMounted, ref, RendererElement, Transition, watch } from 'vue'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CNavGroup = defineComponent({
   name: 'CNavGroup',
   props: {
@@ -62,9 +64,7 @@ const CNavGroup = defineComponent({
     }
 
     const handleEnter = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       el.style.height = `${el.scrollHeight}px`
     }
 
@@ -77,9 +77,7 @@ const CNavGroup = defineComponent({
     }
 
     const handleLeave = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       setTimeout(() => {
         el.style.height = '0px'
       }, 1)

package/src/components/offcanvas/COffcanvas.ts

@@ -1,6 +1,9 @@
 import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue'
+
 import { CBackdrop } from '../backdrop'
+
 import { vVisible } from '../../directives/v-c-visible'
+import { executeAfterTransition } from './../../utils/transition'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
@@ -88,9 +91,7 @@ const COffcanvas = defineComponent({
 
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       setTimeout(() => {
         el.style.visibility = 'visible'
         el.classList.add('show')
@@ -98,13 +99,10 @@ const COffcanvas = defineComponent({
     }
     const handleAfterEnter = () => {
       window.addEventListener('mousedown', handleMouseDown)
-      // window.addEventListener('click', handleClickOutside)
       window.addEventListener('keyup', handleKeyUp)
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       window.removeEventListener('mousedown', handleMouseDown)
       window.removeEventListener('keyup', handleKeyUp)
       el.classList.remove('show')

package/src/components/pagination/CSmartPagination.ts

@@ -225,7 +225,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(1)
+                    activePage.value !== 1 && setPage(1)
                   },
                   'aria-label': 'Go to first page',
                   ...(activePage.value === 1 && {
@@ -247,7 +247,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(activePage.value - 1)
+                    activePage.value !== 1 && setPage(activePage.value - 1)
                   },
                   'aria-label': 'Go to previous page',
                   ...(activePage.value === 1 && {
@@ -304,7 +304,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(activePage.value + 1)
+                    activePage.value !== pages.value && setPage(activePage.value + 1)
                   },
                   'aria-label': 'Go to next page',
                   ...(activePage.value === pages.value && {
@@ -326,7 +326,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(pages.value)
+                    activePage.value !== pages.value && setPage(pages.value)
                   },
                   'aria-label': 'Go to last page',
                   ...(activePage.value === pages.value && {

package/src/components/picker/CPicker.ts

@@ -0,0 +1,221 @@
+import { defineComponent, h, PropType, ref, watch } from 'vue'
+
+import { CButton } from '../button/'
+import { CDropdown, CDropdownMenu, CDropdownToggle } from '../dropdown/'
+
+import { Color } from '../props'
+
+const CPicker = defineComponent({
+  name: 'CPicker',
+  props: {
+    ...CDropdown.props,
+    /**
+     * Toggle visibility or set the content of cancel button.
+     */
+    cancelButton: {
+      type: [Boolean, String],
+      default: 'Cancel',
+    },
+    /**
+     * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    cancelButtonColor: {
+      ...Color,
+      default: 'primary',
+    },
+    /**
+     * Size the cancel button small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    cancelButtonSize: {
+      type: String,
+      default: 'sm',
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Set the cancel button variant to an outlined button or a ghost button.
+     *
+     * @values 'ghost', 'outline'
+     */
+    cancelButtonVariant: {
+      type: String,
+      default: 'ghost',
+      validator: (value: string) => {
+        return ['ghost', 'outline'].includes(value)
+      },
+    },
+    /**
+     * Toggle visibility or set the content of confirm button.
+     */
+    confirmButton: {
+      type: [Boolean, String],
+      default: 'OK',
+    },
+    /**
+     * Sets the color context of the confirm button to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    confirmButtonColor: {
+      ...Color,
+      default: 'primary',
+    },
+    /**
+     * Size the confirm button small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    confirmButtonSize: {
+      type: String,
+      default: 'sm',
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Set the confirm button variant to an outlined button or a ghost button.
+     *
+     * @values 'ghost', 'outline'
+     */
+    confirmButtonVariant: {
+      type: String,
+      validator: (value: string) => {
+        return ['ghost', 'outline'].includes(value)
+      },
+    },
+    /**
+     * Set container type for the component.
+     */
+    container: {
+      type: String as PropType<'dropdown' | 'inline'>,
+      default: 'dropdown',
+    },
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: Boolean,
+    /**
+     * Toggle visibility of footer element or set the content of footer.
+     */
+    footer: Boolean,
+    /**
+     * Toggle the visibility of the component.
+     */
+    visible: Boolean,
+  },
+  emits: [
+    /**
+     * Callback fired when the cancel button has been clicked.
+     */
+    'cancel',
+    /**
+     * Callback fired when the confirm button has been clicked.
+     */
+    'confirm',
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { emit, slots }) {
+    const visible = ref(props.visible)
+
+    watch(
+      () => props.visible,
+      () => {
+        visible.value = props.visible
+      },
+    )
+
+    const handleConfirm = () => {
+      emit('confirm')
+      visible.value = false
+    }
+
+    const Footer = () =>
+      h('div', { class: 'picker-footer' }, [
+        slots.footer && slots.footer(),
+        props.cancelButton &&
+          h(
+            CButton,
+            {
+              color: props.cancelButtonColor,
+              onClick: () => emit('cancel'),
+              size: props.cancelButtonSize,
+              variant: props.cancelButtonVariant,
+            },
+            /**
+             * @slot Location for the cancel button content.
+             */
+            () => (slots.cancelButton ? slots.cancelButton() : props.cancelButton),
+          ),
+        props.confirmButton &&
+          h(
+            CButton,
+            {
+              color: props.confirmButtonColor,
+              onClick: handleConfirm,
+              size: props.confirmButtonSize,
+              variant: props.confirmButtonVariant,
+            },
+            /**
+             * @slot Location for the confirm button content.
+             */
+            () => (slots.confirmButton ? slots.confirmButton() : props.confirmButton),
+          ),
+      ])
+
+    switch (props.container) {
+      case 'inline':
+        return () => h('div', { class: 'picker' }, slots.default && slots.default())
+      default:
+        return () =>
+          h(
+            CDropdown,
+            {
+              autoClose: 'outside',
+              class: 'picker',
+              onHide: () => {
+                visible.value = false
+                emit('hide')
+              },
+              onShow: () => {
+                visible.value = true
+                emit('show')
+              },
+              variant: 'dropdown',
+              visible: visible.value,
+            },
+            () => [
+              h(
+                CDropdownToggle,
+                {
+                  custom: true,
+                  disabled: visible.value || props.disabled,
+                },
+                {
+                  /**
+                   * @slot Location for the toggler element.
+                   */
+                  default: () => slots.toggler && slots.toggler(),
+                },
+              ),
+              h(CDropdownMenu, {}, () => [
+                slots.default && slots.default(),
+                props.footer && Footer(),
+              ]),
+            ],
+          )
+    }
+  },
+})
+export { CPicker }

package/src/components/picker/index.ts

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

package/src/components/popover/CPopover.ts

@@ -1,6 +1,8 @@
 import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CPopover = defineComponent({
   name: 'CPopover',
   props: {
@@ -83,18 +85,16 @@ const CPopover = defineComponent({
       emit('show')
       initPopper()
       el.classList.add('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
     }
 
     const handleLeave = (el: RendererElement, done: () => void) => {
       emit('hide')
       el.classList.remove('show')
-      el.addEventListener('transitionend', () => {
+      executeAfterTransition(() => {
         done()
         destroyPopper()
-      })
+      }, el as HTMLElement)
     }
 
     const handleToggle = (event: Event) => {