@coreui/vue-pro 4.4.2 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.4.2",
+  "version": "4.6.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,7 +35,7 @@
     "watch": "rollup -c -w"
   },
   "config": {
-    "version_short": "4.4"
+    "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/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
       },
     },