@coreui/vue-pro 4.5.0 → 4.7.0-alpha.0

package/dist/utils/getNextSibling.d.ts

@@ -0,0 +1,2 @@
+declare const getNextSibling: (elem: HTMLElement, selector?: string) => Element | null | undefined;
+export default getNextSibling;

package/dist/utils/getPreviousSibling.d.ts

@@ -0,0 +1,2 @@
+declare const getPreviousSibling: (elem: HTMLElement, selector?: string) => Element | null | undefined;
+export default getPreviousSibling;

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+import getNextSibling from './getNextSibling';
+import getPreviousSibling from './getPreviousSibling';
+import isVisible from './isVisible';
+export { getNextSibling, getPreviousSibling, isVisible };

package/dist/utils/isVisible.d.ts

@@ -0,0 +1,2 @@
+declare const isVisible: (element: HTMLElement) => boolean;
+export default isVisible;

package/dist/utils/time.d.ts

@@ -2,7 +2,7 @@ export declare const convert12hTo24h: (abbr: 'am' | 'pm', hour: number) => numbe
 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) => {
+export declare const getListOfHours: (locale: string, ampm?: 'auto' | boolean) => {
     value: number;
     label: string;
 }[];
@@ -14,7 +14,7 @@ export declare const getListOfSeconds: (locale: string, valueAsString?: boolean)
     value: string | number;
     label: string;
 }[];
-export declare const getSelectedHour: (date: Date | null, locale: string) => number | "";
+export declare const getSelectedHour: (date: Date | null, locale: string, ampm?: 'auto' | boolean) => number | "";
 export declare const getSelectedMinutes: (date: Date | null) => number | "";
 export declare const getSelectedSeconds: (date: Date | null) => number | "";
 export declare const isAmPm: (locale: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.5.0",
+  "version": "4.7.0-alpha.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,7 +35,7 @@
     "watch": "rollup -c -w"
   },
   "config": {
-    "version_short": "4.5"
+    "version_short": "4.6"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.6",

package/src/components/calendar/CCalendar.ts

@@ -34,6 +34,29 @@ const CCalendar = defineComponent({
       type: Number,
       default: 1,
     },
+    /**
+     * Set the format of day name.
+     *
+     * @default 'numeric'
+     * @since 4.6.0
+     */
+    dayFormat: {
+      type: [Function, String],
+      default: 'numeric',
+      required: false,
+      validator: (value: string) => {
+        if (typeof value === 'string') {
+          return ['numeric', '2-digit'].includes(value)
+        }
+        if (typeof value === 'function') {
+          return true
+        }
+        if (typeof value === 'function') {
+          return true
+        }
+        return false
+      },
+    },
     /**
      * Specify the list of dates that cannot be selected.
      */
@@ -86,6 +109,12 @@ const CCalendar = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Reorder year-month navigation, and render year first.
+     *
+     * @since 4.6.0
+     */
+    navYearFirst: Boolean,
     /**
      * Allow range selection.
      */
@@ -106,7 +135,7 @@ const CCalendar = defineComponent({
      * @type  number | 'long' | 'narrow' | 'short'
      */
     weekdayFormat: {
-      type: [Number, String],
+      type: [Function, Number, String],
       default: 2,
       validator: (value: string | number) => {
         if (typeof value === 'string') {
@@ -115,6 +144,9 @@ const CCalendar = defineComponent({
         if (typeof value === 'number') {
           return true
         }
+        if (typeof value === 'function') {
+          return true
+        }
         return false
       },
     },
@@ -359,8 +391,12 @@ const CCalendar = defineComponent({
                     {
                       class: 'calendar-header-cell-inner',
                     },
-                    props.weekdayFormat === 'string'
-                      ? date.toLocaleDateString(props.locale, { weekday: props.weekdayFormat })
+                    typeof props.weekdayFormat === 'function'
+                      ? props.weekdayFormat(date)
+                      : typeof props.weekdayFormat === 'string'
+                      ? date.toLocaleDateString(props.locale, {
+                          weekday: <'long' | 'narrow' | 'short'>props.weekdayFormat,
+                        })
                       : date
                           .toLocaleDateString(props.locale, { weekday: 'long' })
                           .slice(0, props.weekdayFormat),
@@ -416,7 +452,11 @@ const CCalendar = defineComponent({
                       {
                         class: 'calendar-cell-inner',
                       },
-                      date.toLocaleDateString(props.locale, { day: 'numeric' }),
+                      typeof props.dayFormat === 'function'
+                        ? props.dayFormat(date)
+                        : date.toLocaleDateString(props.locale, {
+                            day: <'numeric' | '2-digit'>props.dayFormat,
+                          }),
                     ),
                   )
                 }),
@@ -530,6 +570,7 @@ const CCalendar = defineComponent({
           'div',
           {
             class: 'calendar-nav-date',
+            ...(props.navYearFirst && { style: { display: 'flex', justifyContent: 'center' } }),
           },
           [
             view.value === 'days' &&
@@ -552,6 +593,7 @@ const CCalendar = defineComponent({
                 onClick: () => {
                   if (props.navigation) view.value = 'years'
                 },
+                ...(props.navYearFirst && { style: { order: '-1' } }),
               },
               () => date.toLocaleDateString(props.locale, { year: 'numeric' }),
             ),

package/src/components/carousel/CCarousel.ts

@@ -11,15 +11,7 @@ import {
   watch,
 } from 'vue'
 
-const isVisible = (element: HTMLDivElement) => {
-  const rect = element.getBoundingClientRect()
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}
+import { isVisible } from './../../utils'
 
 const CCarousel = defineComponent({
   name: 'CCarousel',

package/src/components/date-picker/CDatePicker.ts

@@ -99,6 +99,29 @@ const CDatePicker = defineComponent({
         return ['ghost', 'outline'].includes(value)
       },
     },
+    /**
+     * Set the format of day name.
+     *
+     * @default 'numeric'
+     * @since 4.6.0
+     */
+    dayFormat: {
+      type: [Function, String],
+      default: 'numeric',
+      required: false,
+      validator: (value: string) => {
+        if (typeof value === 'string') {
+          return ['numeric', '2-digit'].includes(value)
+        }
+        if (typeof value === 'function') {
+          return true
+        }
+        if (typeof value === 'function') {
+          return true
+        }
+        return false
+      },
+    },
     /**
      * Toggle the disabled state for the component.
      */
@@ -183,6 +206,12 @@ const CDatePicker = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Reorder year-month navigation, and render year first.
+     *
+     * @since 4.6.0
+     */
+    navYearFirst: Boolean,
     /**
      * Specifies a short hint that is visible in the input.
      */
@@ -212,7 +241,7 @@ const CDatePicker = defineComponent({
      * @type  number | 'long' | 'narrow' | 'short'
      */
     weekdayFormat: {
-      type: [Number, String],
+      type: [Function, Number, String],
       default: 2,
       validator: (value: string | number) => {
         if (typeof value === 'string') {
@@ -221,6 +250,9 @@ const CDatePicker = defineComponent({
         if (typeof value === 'number') {
           return true
         }
+        if (typeof value === 'function') {
+          return true
+        }
         return false
       },
     },
@@ -233,13 +265,22 @@ const CDatePicker = defineComponent({
      * @property {string} formatedDate - formated date
      */
     'date-change',
+    /**
+     * Callback fired when the date changed.
+     *
+     * @property {Date | null} date - date object
+     * @since 4.7.0
+     */
+    'update:date',
   ],
   setup(props, { emit }) {
     return () =>
       h(CDateRangePicker, {
         calendars: 1,
-        onStartDateChange: (date: Date, formatedDate: String) =>
-          emit('date-change', date, formatedDate),
+        onStartDateChange: (date: Date, formatedDate: String) => {
+          emit('date-change', date, formatedDate)
+          emit('update:date', date)
+        },
         range: false,
         startDate: props.date,
         ...props,