From 793bcefbc1b70f7f6fc74c370503d47d8b3a4aeb Mon Sep 17 00:00:00 2001
From: Jasenko Karovic <karovicm995@gmail.com>
Date: Sat, 5 Mar 2022 17:24:31 +0100
Subject: [PATCH] feat: Add option to reverse years order (resolves #113)

---
 index.d.ts                                       | 1 +
 src/Vue3DatePicker/Vue3DatePicker.vue            | 2 ++
 src/Vue3DatePicker/components/DatepickerMenu.vue | 2 ++
 src/Vue3DatePicker/components/MonthYearInput.vue | 7 +++++--
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index cee68f1..fee9264 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -192,6 +192,7 @@ interface Vue3DatePicker {
     fixedEnd?: boolean;
     utc?: boolean;
     multiDatesLimit?: number | string;
+    reverseYears?: boolean;
 }
 
 interface PublicMethods extends MethodOptions {
diff --git a/src/Vue3DatePicker/Vue3DatePicker.vue b/src/Vue3DatePicker/Vue3DatePicker.vue
index 68658c8..8833d82 100644
--- a/src/Vue3DatePicker/Vue3DatePicker.vue
+++ b/src/Vue3DatePicker/Vue3DatePicker.vue
@@ -114,6 +114,7 @@
                     fixedStart,
                     fixedEnd,
                     multiDatesLimit,
+                    reverseYears,
                 }"
                 v-model:internalModelValue="internalModelValue"
                 @close-picker="closeMenu"
@@ -289,6 +290,7 @@
         fixedEnd: { type: Boolean as PropType<boolean>, default: false },
         utc: { type: Boolean as PropType<boolean>, default: false },
         multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
+        reverseYears: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const isOpen = ref(false);
diff --git a/src/Vue3DatePicker/components/DatepickerMenu.vue b/src/Vue3DatePicker/components/DatepickerMenu.vue
index 1223d93..2c10154 100644
--- a/src/Vue3DatePicker/components/DatepickerMenu.vue
+++ b/src/Vue3DatePicker/components/DatepickerMenu.vue
@@ -53,6 +53,7 @@
                                 preventMinMaxNavigation,
                                 internalModelValue,
                                 range,
+                                reverseYears,
                             }"
                             @mount="childMount('monthYearInput')"
                             @reset-flow="resetFlow"
@@ -296,6 +297,7 @@
         fixedStart: { type: Boolean as PropType<boolean>, default: false },
         fixedEnd: { type: Boolean as PropType<boolean>, default: false },
         multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
+        reverseYears: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const calendarWrapperRef = ref(null);
diff --git a/src/Vue3DatePicker/components/MonthYearInput.vue b/src/Vue3DatePicker/components/MonthYearInput.vue
index 00cb091..a6dc9ca 100644
--- a/src/Vue3DatePicker/components/MonthYearInput.vue
+++ b/src/Vue3DatePicker/components/MonthYearInput.vue
@@ -204,6 +204,7 @@
         preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false },
         internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null },
         range: { type: Boolean as PropType<boolean>, default: false },
+        reverseYears: { type: Boolean as PropType<boolean>, default: false },
     });
 
     const { transitionName, showTransition } = useTransitions();
@@ -255,7 +256,8 @@
         const list = [];
 
         for (let i = 0; i < items.length; i += 3) {
-            list.push([items[i], items[i + 1], items[i + 2]]);
+            const listItems = [items[i], items[i + 1], items[i + 2]];
+            list.push(props.reverseYears ? listItems.reverse() : listItems);
         }
         return list;
     };
@@ -271,7 +273,8 @@
     });
 
     const groupedYears = computed((): IDefaultSelect[][] => {
-        return getGroupedList(props.years);
+        const list = getGroupedList(props.years);
+        return props.reverseYears ? list.reverse() : list;
     });
 
     const showLeftIcon = computed(() => {