@coreui/vue-pro 4.4.2 → 4.6.0

package/src/components/table/CTable.ts

@@ -1,6 +1,51 @@
-import { defineComponent, h } from 'vue'
+import { computed, defineComponent, h, PropType } from 'vue'
 
 import { Color } from '../props'
+import { CTableBody } from './CTableBody'
+import { CTableCaption } from './CTableCaption'
+import { CTableDataCell } from './CTableDataCell'
+import { CTableFoot } from './CTableFoot'
+import { CTableHead } from './CTableHead'
+import { CTableHeaderCell } from './CTableHeaderCell'
+import { CTableRow } from './CTableRow'
+
+export interface Column {
+  label?: string
+  key: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _style?: any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _props?: any
+}
+
+export interface FooterItem {
+  label?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _props?: any
+}
+
+export type Item = {
+  [key: string]: number | string | any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _props?: any
+}
+
+const pretifyName = (name: string) => {
+  return name
+    .replace(/[-_.]/g, ' ')
+    .replace(/ +/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+const label = (column: Column | string) =>
+  typeof column === 'object'
+    ? column.label !== undefined
+      ? column.label
+      : pretifyName(column.key)
+    : pretifyName(column)
 
 const CTable = defineComponent({
   name: 'CTable',
@@ -41,15 +86,39 @@ const CTable = defineComponent({
     /**
      * Put the `<caption>` on the top of the table.
      *
-     * @values 'top'
+     * @values 'top' | string
      */
     caption: {
       type: String,
       default: undefined,
       required: false,
-      validator: (value: string) => {
-        return value === 'top'
-      },
+    },
+    /**
+     * Set the text of the table caption and the caption on the top of the table.
+     *
+     * @since 4.5.0
+     */
+    captionTop: {
+      type: String,
+      default: undefined,
+      required: false,
+    },
+    /**
+     * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
+     *
+     * In columns prop each array item represents one column. Item might be specified in two ways:
+     * String: each item define column name equal to item value.
+     * Object: item is object with following keys available as column configuration:
+     * - key (required)(String) - define column name equal to item key.
+     * - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
+     * - _props (Object) - adds classes to all cels in column, ex. _props: { scope: 'col', className: 'custom-class' },
+     * - _style (Object) - adds styles to the column header (useful for defining widths)
+     *
+     * @since 4.5.0
+     */
+    columns: {
+      type: Array as PropType<Column[] | string[]>,
+      required: false,
     },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
@@ -57,6 +126,21 @@ const CTable = defineComponent({
      * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
      */
     color: Color,
+    /**
+     * Array of objects or strings, where each element represents one cell in the table footer.
+     *
+     * Example items:
+     * ['FooterCell', 'FooterCell', 'FooterCell']
+     * or
+     * [{ label: 'FooterCell', _props: { color: 'success' }, ...]
+     *
+     * @since 4.5.0
+     */
+    footer: {
+      type: Array as PropType<FooterItem[]>,
+      default: () => [],
+      required: false,
+    },
     /**
      * Enable a hover state on table rows within a `<CTableBody>`.
      */
@@ -65,10 +149,18 @@ const CTable = defineComponent({
       required: false,
     },
     /**
-     * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+     * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.
      *
-     * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl'
+     * Example item:
+     * { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}
+     *
+     * @since 4.5.0
      */
+    items: {
+      type: Array as PropType<Item[]>,
+      default: () => [],
+      required: false,
+    },
     responsive: {
       type: [Boolean, String],
       default: undefined,
@@ -106,8 +198,39 @@ const CTable = defineComponent({
       type: Boolean,
       required: false,
     },
+    /**
+     * Properties that will be passed to the table footer component.
+     *
+     * Properties to [CTableFoot](#ctablefoot) component.
+     * @since 4.5.0
+     */
+    tableFootProps: {
+      type: Object,
+      default: undefined,
+      required: false,
+    },
+    /**
+     * Properties that will be passed to the table head component.
+     *
+     *  Properties to [CTableHead](#ctablehead) component.
+     * @since 4.5.0
+     */
+    tableHeadProps: {
+      type: Object,
+      default: undefined,
+      required: false,
+    },
   },
   setup(props, { slots, attrs }) {
+    const rawColumnNames = computed(() =>
+      props.columns
+        ? props.columns.map((column: Column | string) => {
+            if (typeof column === 'object') return column.key
+            else return column
+          })
+        : Object.keys(props.items[0] || {}).filter((el) => el.charAt(0) !== '_'),
+    )
+
     const table = () =>
       h(
         'table',
@@ -116,7 +239,7 @@ const CTable = defineComponent({
             'table',
             {
               [`align-${props.align}`]: props.align,
-              [`caption-${props.caption}`]: props.caption,
+              [`caption-top`]: props.captionTop || props.caption === 'top',
               [`border-${props.borderColor}`]: props.borderColor,
               'table-bordered': props.bordered,
               'table-borderless': props.borderless,
@@ -129,7 +252,118 @@ const CTable = defineComponent({
             attrs.class,
           ],
         },
-        slots.default && slots.default(),
+        {
+          default: () => [
+            ((props.caption && props.caption !== 'top') || props.captionTop) &&
+              h(
+                CTableCaption,
+                {},
+                {
+                  default: () => props.caption || props.captionTop,
+                },
+              ),
+            props.columns &&
+              h(
+                CTableHead,
+                {
+                  ...props.tableHeadProps,
+                },
+                {
+                  default: () =>
+                    h(
+                      CTableRow,
+                      {},
+                      {
+                        default: () => [
+                          props.columns &&
+                            props.columns.map((column: Column | string) =>
+                              h(
+                                CTableHeaderCell,
+                                {
+                                  ...(typeof column === 'object' &&
+                                    column._props && { ...column._props }),
+                                  ...(typeof column === 'object' &&
+                                    column._style && { style: { ...column._style } }),
+                                },
+                                {
+                                  default: () => label(column),
+                                },
+                              ),
+                            ),
+                        ],
+                      },
+                    ),
+                },
+              ),
+            props.items &&
+              h(
+                CTableBody,
+                {},
+                {
+                  default: () => [
+                    props.items.map((item: Item) =>
+                      h(
+                        CTableRow,
+                        {
+                          ...(item._props && { ...item._props }),
+                        },
+                        {
+                          default: () => [
+                            rawColumnNames.value.map(
+                              (colName: string) =>
+                                item[colName] &&
+                                h(
+                                  CTableDataCell,
+                                  {
+                                    ...(item._cellProps &&
+                                      item._cellProps['all'] && { ...item._cellProps['all'] }),
+                                    ...(item._cellProps &&
+                                      item._cellProps[colName] && { ...item._cellProps[colName] }),
+                                  },
+                                  {
+                                    default: () => item[colName],
+                                  },
+                                ),
+                            ),
+                          ],
+                        },
+                      ),
+                    ),
+                  ],
+                },
+              ),
+            slots.default && slots.default(),
+            props.footer &&
+              h(
+                CTableFoot,
+                {
+                  ...props.tableFootProps,
+                },
+                {
+                  default: () =>
+                    h(
+                      CTableRow,
+                      {},
+                      {
+                        default: () => [
+                          props.footer.map((item: FooterItem | string) =>
+                            h(
+                              CTableDataCell,
+                              {
+                                ...(typeof item === 'object' && item._props && { ...item._props }),
+                              },
+                              {
+                                default: () => (typeof item === 'object' ? item.label : item),
+                              },
+                            ),
+                          ),
+                        ],
+                      },
+                    ),
+                },
+              ),
+          ],
+        },
       )
     return () => [
       props.responsive

package/src/components/table/CTableDataCell.ts

@@ -31,11 +31,18 @@ const CTableDataCell = defineComponent({
      * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
      */
     color: Color,
+    /**
+     * @ignore
+     */
+    scope: {
+      type: String,
+      required: false,
+    },
   },
   setup(props, { slots }) {
     return () =>
       h(
-        'td',
+        props.scope ? 'th' : 'td',
         {
           class: [
             {
@@ -44,6 +51,7 @@ const CTableDataCell = defineComponent({
               [`table-${props.color}`]: props.color,
             },
           ],
+          ...(props.scope && { scope: props.scope }),
         },
         slots.default && slots.default(),
       )

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(),
             ),
         },
       )