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

package/dist/utils/calendar.d.ts

@@ -0,0 +1,21 @@
+export declare const convertToLocalDate: (d: Date, locale: string, options?: {}) => string;
+export declare const convertToLocalTime: (d: Date, locale: string, options?: {}) => string;
+export declare const createGroupsInArray: (arr: any[], numberOfGroups: number) => any[][];
+export declare const getCurrentYear: () => number;
+export declare const getCurrentMonth: () => number;
+export declare const getMonthName: (month: number, locale: string) => string;
+export declare const getMonthsNames: (locale: string) => string[];
+export declare const getYears: (year: number) => number[];
+export declare const getMonthDetails: (year: number, month: number, firstDayOfWeek: number) => {
+    date: Date;
+    month: string;
+}[][];
+export declare const isDateDisabled: (date: Date, min?: Date | null | undefined, max?: Date | null | undefined, dates?: Date[] | Date[][] | undefined) => boolean | undefined;
+export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isDateSelected: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isEndDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isLastDayOfMonth: (date: Date) => boolean;
+export declare const isSameDateAs: (date: Date, date2: Date) => boolean;
+export declare const isStartDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isToday: (date: Date) => boolean;
+export declare const isValidDate: (date: string) => number | false;

package/dist/utils/time.d.ts

@@ -0,0 +1,17 @@
+export declare const convert12hTo24h: (abbr: 'am' | 'pm', hour: number) => number;
+export declare const convert24hTo12h: (hour: number) => number;
+export declare const convertTimeToDate: (time: Date | string | null | undefined) => Date | null;
+export declare const getAmPm: (date: Date, locale: string) => "am" | "pm";
+export declare const getListOfHours: (locale: string) => {
+    value: number;
+    label: string;
+}[];
+export declare const getMinutesOrSeconds: (locale: string) => {
+    value: number;
+    label: string;
+}[];
+export declare const getSelectedHour: (date: Date | null, locale: string) => number | "";
+export declare const getSelectedMinutes: (date: Date | null) => number | "";
+export declare const getSelectedSeconds: (date: Date | null) => number | "";
+export declare const isAmPm: (locale: string) => boolean;
+export declare const isValidTime: (time: string) => number | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.1.4",
+  "version": "4.3.0-beta.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,18 +35,18 @@
     "watch": "rollup -c -w"
   },
   "config": {
-    "version_short": "4.1"
+    "version_short": "4.2"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.2",
-    "@rollup/plugin-commonjs": "^21.0.1",
+    "@popperjs/core": "^2.11.4",
+    "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@vue/test-utils": "^2.0.0-0",
-    "rollup": "^2.66.0",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@vue/test-utils": "^2.0.0-rc.17",
+    "rollup": "^2.70.1",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.5.5",
-    "vue": "^3.2.24",
+    "typescript": "^4.6.2",
+    "vue": "^3.2.31",
     "vue-types": "^4.1.1"
   },
   "peerDependencies": {

package/src/components/accordion/CAccordionButton.ts

@@ -10,6 +10,7 @@ const CAccordionButton = defineComponent({
       h(
         'button',
         {
+          type: 'button',
           'aria-expanded': !visible.value,
           class: ['accordion-button', { ['collapsed']: !visible.value }],
           onClick: () => toggleVisibility(),

package/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CAccordionButton component renders correctly 1`] = `"<button aria-expanded=\\"true\\" class=\\"accordion-button collapsed\\">Default slot</button>"`;
+exports[`Loads and display CAccordionButton component renders correctly 1`] = `"<button type=\\"button\\" aria-expanded=\\"true\\" class=\\"accordion-button collapsed\\">Default slot</button>"`;

package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CAccordionHeader component renders correctly 1`] = `"<div class=\\"accordion-header\\"><button aria-expanded=\\"true\\" class=\\"accordion-button collapsed\\">Default slot</button></div>"`;
+exports[`Loads and display CAccordionHeader component renders correctly 1`] = `"<div class=\\"accordion-header\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"accordion-button collapsed\\">Default slot</button></div>"`;

package/src/components/button/CButton.ts

@@ -60,6 +60,20 @@ export const CButton = defineComponent({
         return ['sm', 'lg'].includes(value)
       },
     },
+    /**
+     * Specifies the type of button. Always specify the type attribute for the `<button>` element.
+     * Different browsers may use different default types for the `<button>` element.
+     *
+     * @values 'button', 'submit', 'reset'
+     */
+    type: {
+      type: String,
+      default: 'button',
+      required: false,
+      validator: (value: string) => {
+        return ['button', 'submit', 'reset'].includes(value)
+      },
+    },
     /**
      * Set the button variant to an outlined button or a ghost button.
      *
@@ -74,7 +88,20 @@ export const CButton = defineComponent({
       },
     },
   },
-  setup(props, { slots }) {
+  emits: [
+    /**
+     * Event called when the user clicks on the button.
+     */
+    'click',
+  ],
+  setup(props, { emit, slots }) {
+    const handleClick = () => {
+      if (props.disabled) {
+        return
+      }
+
+      emit('click')
+    }
     return () =>
       h(
         props.component,
@@ -92,6 +119,8 @@ export const CButton = defineComponent({
           disabled: props.disabled && props.component !== 'a',
           ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
           ...(props.component === 'a' && props.href && { href: props.href }),
+          ...(props.component === 'button' && { type: props.type }),
+          onClick: handleClick,
         },
         slots.default && slots.default(),
       )

package/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap

@@ -4,4 +4,4 @@ exports[`Customize (number two) CButton component renders correctly 1`] = `"<a c
 
 exports[`Customize CButton component renders correctly 1`] = `"<div class=\\"btn btn-outline-warning btn-lg active disabled rounded-pill\\" disabled=\\"true\\">Default slot</div>"`;
 
-exports[`Loads and display CButton component renders correctly 1`] = `"<button class=\\"btn btn-undefined\\">Default slot</button>"`;
+exports[`Loads and display CButton component renders correctly 1`] = `"<button class=\\"btn btn-undefined\\" type=\\"button\\">Default slot</button>"`;

package/src/components/calendar/CCalendar.ts

@@ -0,0 +1,546 @@
+import { defineComponent, h, PropType, ref, watch } from 'vue'
+
+import { CButton } from '../button'
+
+import {
+  createGroupsInArray,
+  getMonthDetails,
+  getMonthsNames,
+  getYears,
+  isDateDisabled,
+  isDateInRange,
+  isDateSelected,
+  isLastDayOfMonth,
+  isSameDateAs,
+  isToday,
+  isStartDate,
+  isEndDate,
+} from '../../utils/calendar'
+
+const CCalendar = defineComponent({
+  name: 'CCalendar',
+  props: {
+    /**
+     * Default date of the component
+     */
+    calendarDate: {
+      type: [Date, String],
+    },
+    /**
+     * Specify the list of dates that cannot be selected.
+     */
+    disabledDates: {
+      type: Array as PropType<Date[] | Date[][]>,
+    },
+    /**
+     * Initial selected to date (range).
+     */
+    endDate: {
+      type: [Date, String],
+    },
+    /**
+     * Sets the day of start week.
+     * - 0 - Sunday,
+     * - 1 - Monday,
+     * - 2 - Tuesday,
+     * - 3 - Wednesday,
+     * - 4 - Thursday,
+     * - 5 - Friday,
+     * - 6 - Saturday,
+     * - 7 - Sunday
+     */
+    firstDayOfWeek: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+     */
+    locale: {
+      type: String,
+      default: 'default',
+    },
+    /**
+     * Max selectable date.
+     */
+    maxDate: {
+      type: [Date, String],
+    },
+    /**
+     * Min selectable date.
+     */
+    minDate: {
+      type: [Date, String],
+    },
+    /**
+     * Show arrows navigation.
+     */
+    navigation: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Allow range selection.
+     */
+    range: Boolean,
+    /**
+     * Toggle select mode between start and end date.
+     */
+    selectEndDate: Boolean,
+    /**
+     * Initial selected date.
+     */
+    startDate: {
+      type: [Date, String],
+    },
+    /**
+     * Set length or format of day name.
+     *
+     * @type  number | 'long' | 'narrow' | 'short'
+     */
+    weekdayFormat: {
+      type: [Number, String],
+      default: 2,
+      validator: (value: string | number) => {
+        if (typeof value === 'string') {
+          return ['long', 'narrow', 'short'].includes(value)
+        }
+        if (typeof value === 'number') {
+          return true
+        }
+        return false
+      },
+    },
+  },
+  emits: [
+    /**
+     * Callback fired when the user hovers over the calendar cell.
+     *
+     * @property {Date | null} date
+     */
+    'calendar-cell-hover',
+    /**
+     * Callback fired when the calendar date changed.
+     *
+     * @property {Date | null} date
+     */
+    'calendar-date-change',
+    /**
+     * Callback fired when the start date changed.
+     *
+     * @property {Date | null} date
+     */
+    'start-date-change',
+    /**
+     * Callback fired when the end date changed.
+     *
+     * @property {Date | null} date
+     */
+    'end-date-change',
+  ],
+  setup(props, { slots, emit }) {
+    const calendarDate = ref(props.calendarDate ? new Date(props.calendarDate) : new Date())
+    const startDate = ref(props.startDate ? new Date(props.startDate) : null)
+    const endDate = ref(props.endDate ? new Date(props.endDate) : null)
+    const selectEndDate = ref(props.selectEndDate)
+    const view = ref('days')
+
+    const maxDate = props.maxDate ? new Date(props.maxDate) : null
+    const minDate = props.minDate ? new Date(props.minDate) : null
+
+    watch(
+      () => props.calendarDate,
+      () => {
+        if (props.calendarDate) calendarDate.value = new Date(props.calendarDate)
+      },
+    )
+
+    watch(
+      () => props.startDate,
+      () => {
+        if (props.startDate === null) {
+          startDate.value = null
+          return
+        }
+
+        if (props.startDate) {
+          const d = new Date(props.startDate)
+          if (startDate.value === null) {
+            startDate.value = d
+            return
+          }
+
+          if (startDate.value && !isSameDateAs(d, startDate.value)) {
+            startDate.value = d
+          }
+        }
+      },
+    )
+
+    watch(
+      () => props.endDate,
+      () => {
+        if (props.endDate === null) {
+          endDate.value = null
+          return
+        }
+
+        if (props.endDate) {
+          const d = new Date(props.endDate)
+          if (endDate.value === null) {
+            endDate.value = d
+            return
+          }
+
+          if (endDate.value && !isSameDateAs(d, endDate.value)) {
+            endDate.value = d
+          }
+        }
+      },
+    )
+
+    watch(
+      () => props.selectEndDate,
+      () => {
+        selectEndDate.value = props.selectEndDate
+      },
+    )
+
+    watch(startDate, () => {
+      emit('start-date-change', startDate.value)
+    })
+
+    watch(endDate, () => {
+      emit('end-date-change', endDate.value)
+    })
+
+    const setCalendarPage = (years: number, months = 0) => {
+      const year = calendarDate.value.getFullYear()
+      const month = calendarDate.value.getMonth()
+      const d = new Date(year, month, 1)
+
+      years && d.setFullYear(d.getFullYear() + years)
+      months && d.setMonth(d.getMonth() + months)
+
+      calendarDate.value = d
+
+      emit('calendar-date-change', d)
+    }
+
+    const handleCellOnClick = (date: Date) => {
+      if (isDateDisabled(date, minDate, maxDate, props.disabledDates)) {
+        return
+      }
+
+      if (props.range) {
+        if (selectEndDate.value) {
+          // If endDate > date
+          if (startDate.value && startDate.value > date) {
+            endDate.value = startDate.value
+            startDate.value = date
+          } else {
+            endDate.value = date
+          }
+          selectEndDate.value = false
+        } else {
+          startDate.value = date
+          selectEndDate.value = true
+        }
+      } else {
+        startDate.value = date
+      }
+    }
+
+    const handleCellMouseEnter = (date: Date) => {
+      if (isDateDisabled(date, minDate, maxDate, props.disabledDates)) {
+        return
+      }
+      emit('calendar-cell-hover', date)
+    }
+
+    const handleCellMouseLeave = () => {
+      emit('calendar-cell-hover', null)
+    }
+
+    const handleNavigationOnClick = (direction: string, double = false) => {
+      if (direction === 'prev') {
+        if (double) {
+          setCalendarPage(view.value !== 'days' ? -10 : -1)
+          return
+        }
+        if (view.value !== 'days') {
+          setCalendarPage(-1)
+          return
+        }
+        setCalendarPage(0, -1)
+        return
+      }
+      if (direction === 'next') {
+        if (double) {
+          setCalendarPage(view.value !== 'days' ? 10 : 1)
+          return
+        }
+        if (view.value !== 'days') {
+          setCalendarPage(1)
+          return
+        }
+        setCalendarPage(0, 1)
+        return
+      }
+    }
+
+    const Calendar = () => {
+      const monthDetails = getMonthDetails(
+        calendarDate.value.getFullYear(),
+        calendarDate.value.getMonth(),
+        props.firstDayOfWeek,
+      )
+      const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4)
+      const listOfYears = createGroupsInArray(getYears(calendarDate.value.getFullYear()), 4)
+      const weekDays = monthDetails[0]
+
+      return h('table', {}, [
+        view.value === 'days' &&
+          h(
+            'thead',
+            {},
+            h(
+              'tr',
+              {},
+              weekDays.map(({ date }: { date: Date }) => {
+                return h(
+                  'th',
+                  { class: 'calendar-cell' },
+                  h(
+                    'div',
+                    {
+                      class: 'calendar-header-cell-inner',
+                    },
+                    props.weekdayFormat === 'string'
+                      ? date.toLocaleDateString(props.locale, { weekday: props.weekdayFormat })
+                      : date
+                          .toLocaleDateString(props.locale, { weekday: 'long' })
+                          .slice(0, props.weekdayFormat),
+                  ),
+                )
+              }),
+            ),
+          ),
+        h('tbody', {}, [
+          view.value === 'days' &&
+            monthDetails.map((week) => {
+              return h(
+                'tr',
+                {},
+                week.map(({ date, month }: { date: Date; month: string }) => {
+                  return h(
+                    'td',
+                    {
+                      class: [
+                        'calendar-cell',
+                        {
+                          today: isToday(date),
+                          disabled: isDateDisabled(date, minDate, maxDate, props.disabledDates),
+                          next: month === 'next',
+                          previous: month === 'previous',
+                          last: isLastDayOfMonth(date),
+                          range:
+                            month === 'current' &&
+                            isDateInRange(date, startDate.value, endDate.value),
+                          selected: isDateSelected(date, startDate.value, endDate.value),
+                          start: isStartDate(date, startDate.value, endDate.value),
+                          end: isEndDate(date, startDate.value, endDate.value),
+                        },
+                      ],
+                      title: date.toLocaleDateString(props.locale),
+                      onClick: () => handleCellOnClick(date),
+                      onmouseenter: () => handleCellMouseEnter(date),
+                      onmouseleave: () => handleCellMouseLeave(),
+                    },
+                    h(
+                      'div',
+                      {
+                        class: 'calendar-cell-inner',
+                      },
+                      date.toLocaleDateString(props.locale, { day: 'numeric' }),
+                    ),
+                  )
+                }),
+              )
+            }),
+          view.value === 'months' &&
+            listOfMonths.map((row, index) => {
+              return h(
+                'tr',
+                {},
+                row.map((month, idx) => {
+                  return h(
+                    'td',
+                    {
+                      class: 'calendar-cell month',
+                      onClick: () => {
+                        setCalendarPage(0, index * 3 + idx)
+                        view.value = 'days'
+                      },
+                    },
+                    h('div', { class: 'calendar-cell-inner' }, month),
+                  )
+                }),
+              )
+            }),
+          view.value === 'years' &&
+            listOfYears.map((row) => {
+              return h(
+                'tr',
+                {},
+                row.map((year) => {
+                  return h(
+                    'td',
+                    {
+                      class: 'calendar-cell year',
+                      onClick: () => {
+                        calendarDate.value = new Date(
+                          year,
+                          calendarDate.value.getMonth(),
+                          calendarDate.value.getDate(),
+                        )
+                        view.value = 'months'
+                      },
+                    },
+                    h('div', { class: 'calendar-cell-inner' }, year),
+                  )
+                }),
+              )
+            }),
+        ]),
+      ])
+    }
+
+    const Navigation = () => {
+      return h('div', { class: 'calendar-nav' }, [
+        props.navigation &&
+          h(
+            'div',
+            {
+              class: 'calendar-nav-prev',
+            },
+            [
+              h(
+                CButton,
+                {
+                  color: 'transparent',
+                  size: 'sm',
+                  onClick: () => handleNavigationOnClick('prev', true),
+                },
+                {
+                  /**
+                   * @slot Location for double previous icon.
+                   */
+                  default: () =>
+                    slots.navPrevDoubleIcon
+                      ? slots.navPrevDoubleIcon()
+                      : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-prev' }),
+                },
+              ),
+              view.value === 'days' &&
+                h(
+                  CButton,
+                  {
+                    color: 'transparent',
+                    size: 'sm',
+                    onClick: () => handleNavigationOnClick('prev'),
+                  },
+                  {
+                    /**
+                     * @slot Location for previous icon.
+                     */
+                    default: () =>
+                      slots.navPrevIcon
+                        ? slots.navPrevIcon()
+                        : h('span', { class: 'calendar-nav-icon calendar-nav-icon-prev' }),
+                  },
+                ),
+            ],
+          ),
+        h(
+          'div',
+          {
+            class: 'calendar-nav-date',
+          },
+          [
+            view.value === 'days' &&
+              h(
+                CButton,
+                {
+                  color: 'transparent',
+                  size: 'sm',
+                  onClick: () => {
+                    if (props.navigation) view.value = 'months'
+                  },
+                },
+                () => calendarDate.value.toLocaleDateString(props.locale, { month: 'long' }),
+              ),
+            h(
+              CButton,
+              {
+                color: 'transparent',
+                size: 'sm',
+                onClick: () => {
+                  if (props.navigation) view.value = 'years'
+                },
+              },
+              () => calendarDate.value.toLocaleDateString(props.locale, { year: 'numeric' }),
+            ),
+          ],
+        ),
+        props.navigation &&
+          h(
+            'div',
+            {
+              class: 'calendar-nav-next',
+            },
+            [
+              view.value === 'days' &&
+                h(
+                  CButton,
+                  {
+                    color: 'transparent',
+                    size: 'sm',
+                    onClick: () => handleNavigationOnClick('next'),
+                  },
+                  {
+                    /**
+                     * @slot Location for next icon.
+                     */
+                    default: () =>
+                      slots.navNextIcon
+                        ? slots.navNextIcon()
+                        : h('span', { class: 'calendar-nav-icon calendar-nav-icon-next' }),
+                  },
+                ),
+              h(
+                CButton,
+                {
+                  color: 'transparent',
+                  size: 'sm',
+                  onClick: () => handleNavigationOnClick('next', true),
+                },
+                {
+                  /**
+                   * @slot Location for double next icon.
+                   */
+                  default: () =>
+                    slots.navNextDoubleIcon
+                      ? slots.navNextDoubleIcon()
+                      : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-next' }),
+                },
+              ),
+            ],
+          ),
+      ])
+    }
+    return () => h('div', { class: ['calendar', view.value] }, [h(Navigation), h(Calendar)])
+  },
+})
+
+export { CCalendar }