fix: improve support for gregory calendar

Author: farnabaz

demo/assets/styles.scss

@@ -1,4 +1,4 @@
-.vuec-theme-indra {
+.vuec-theme-orange {
     .vuec-day {
         color: #979797;
         &.disabled {

demo/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <main>
-    <nuxt/>
+    <Nuxt />
   </main>
 </template>
 
@@ -12,7 +12,6 @@ export default {
 
 <style>
 main {
-  direction: rtl;
   margin: 50px;
 }
 </style>

demo/pages/index.vue

@@ -1,16 +1,33 @@
 <template>
   <div>
     <div>
-      <h3>Range Input</h3>
-      <vuec-range-input
-        :min-date="now"
-        :max-date="maxDate"
-        :mobile="false"
-        theme="indra" />
+      <h2>Gregory</h2>
+      <div>
+        <h3>Range Input</h3>
+        <VuecRangeInput
+          :min-date="now"
+          :max-date="maxDate"
+          :mobile="false"
+          theme="orange"
+        />
+      </div>
+      <div>
+        <h3>Single Input</h3>
+        <VuecSingleInput />
+      </div>
     </div>
-    <div>
-      <h3>Single Input</h3>
-      <vuec-single-input/>
+    <div class="jalali">
+      <h2>Jalali</h2>
+      <div>
+        <h3>Range Input</h3>
+        <VuecRangeInput
+          :date="todayInJalali"
+          :min-date="now"
+          :max-date="maxDate"
+          :mobile="false"
+          theme="orange"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -27,8 +44,18 @@ export default {
   data() {
     return {
       now: dayjs(),
+      todayInJalali: dayjs().calendar('jalali').locale('fa'),
       maxDate: dayjs().add(26, 'day'),
     };
   },
+  mounted() {
+    window.dayjs = dayjs;
+  },
 };
 </script>
+
+<style lang="scss">
+.jalali {
+    direction: rtl;
+}
+</style>

src/components/core/calendar.vue

@@ -1,30 +1,34 @@
 <template>
   <div
-    :class="['vuec-theme-' + theme]"
-    class="vuec-calendar">
+    :class="['vuec-theme-' + theme, date.$C]"
+    class="vuec-calendar"
+  >
     <div
       v-if="showNavigation"
       class="vuec-nav"
-      align-v="center">
+      align-v="center"
+    >
       <span
         class="vuec-btn-prev"
-        @click="previousPage">
+        @click="previousPage"
+      >
         <slot name="prev-page">
-          <icon-arrow-right />
+          <IconArrowRight />
         </slot>
       </span>
       <span
         class="vuec-btn-next"
-        @click="nextPage">
+        @click="nextPage"
+      >
         <slot name="next-page">
-          <icon-arrow-left />
+          <IconArrowLeft />
         </slot>
       </span>
     </div>
     <div class="vuec-month-wrapper">
-      <vuec-month
-        v-for="(month, index) in months"
-        :key="index"
+      <VuecMonth
+        v-for="(month, monthIndex) in months"
+        :key="monthIndex"
         :adapter="getDayData"
         :title="month.title"
         :date="month.date"
@@ -39,29 +43,29 @@
       >
         <template
           slot="day-of-week"
-          slot-scope="{ name, index, locale }">
+          slot-scope="{ name, index, locale }"
+        >
           <slot
             v-bind="{ name, index, locale }"
-            name="day-of-week">
+            name="day-of-week"
+          >
             {{ name }}
           </slot>
-
         </template>
         <template
           slot="day"
-          slot-scope="props">
-
+          slot-scope="props"
+        >
           <slot
             v-bind="props"
-            name="day">
+            name="day"
+          >
             <div class="vuec-default-day">
               {{ props.date.format('D') }}
             </div>
           </slot>
-
         </template>
-
-      </vuec-month>
+      </VuecMonth>
     </div>
   </div>
 </template>

src/components/core/day.vue

@@ -10,13 +10,14 @@
       <slot
         :data="data"
         :date="date"
-        name="day">
+        name="day"
+      >
         <div class="vuec-default-day">
           {{ date.format('D') }}
         </div>
       </slot>
     </div>
-    <div class="vuec-square-placeholder"/>
+    <div class="vuec-square-placeholder" />
   </div>
 </template>
 

src/components/core/month.vue

@@ -2,27 +2,30 @@
   <div class="vuec-month">
     <div
       :show="showTitle"
-      class="vuec-month-name">
+      class="vuec-month-name"
+    >
       <h2>{{ title || date.format('MMMM') }}</h2>
     </div>
     <div class="vuec-week-nav vuec-7col">
       <div
         v-for="(name, index) in weekDays"
         :key="index"
-        class="vuec-col">
+        class="vuec-col"
+      >
         <div class="vuec-week-content">
           <slot
             v-bind="{ name, index, locale }"
-            name="day-of-week">
+            name="day-of-week"
+          >
             {{ name }}
           </slot>
         </div>
-        <div class="vuec-week-placeholder"/>
+        <div class="vuec-week-placeholder" />
       </div>
     </div>
     <div class="vuec-month-content">
       <div class="vuec-month-days vuec-7col">
-        <day-view
+        <DayView
           v-for="(day, i) in days"
           :key="day.dayKey"
           :index="i"
@@ -40,24 +43,23 @@
         >
           <template
             slot="day"
-            slot-scope="props">
-
+            slot-scope="props"
+          >
             <slot
               v-bind="props"
-              name="day"/>
-
+              name="day"
+            />
           </template>
-
-        </day-view>
+        </DayView>
       </div>
-      <div class="vuec-month-placeholder"/>
+      <div class="vuec-month-placeholder" />
     </div>
   </div>
 </template>
 
 <script>
 import dayjs from '../../date';
-
+import { rotate } from '../../utils';
 import DayView from './day.vue';
 
 export default {
@@ -99,9 +101,10 @@ export default {
     },
   },
   data() {
+    const startOfWeek = this.date.startOf('week').day();
     return {
       locale: this.date.$locale().name,
-      weekDays: this.date.$locale().weekdays,
+      weekDays: rotate(this.date.$locale().weekdays, startOfWeek),
     };
   },
   computed: {

src/components/range-input.vue

@@ -4,10 +4,14 @@
       class="vuec-date-inputs"
       @click="showPicker"
     >
-      <div class="input">{{ formattedDates[0] }}</div>
-      <div class="input">{{ formattedDates[1] }}</div>
+      <div class="input">
+        {{ formattedDates[0] }}
+      </div>
+      <div class="input">
+        {{ formattedDates[1] }}
+      </div>
     </div>
-    <transition name="popup-animation">
+    <Transition name="popup-animation">
       <div
         v-if="visible"
         :class="{ mobile: mobile }"
@@ -16,26 +20,29 @@
       >
         <div
           v-if="mobile"
-          class="vuec-popup-header">
+          class="vuec-popup-header"
+        >
           <slot name="title">
             تاریخ ورود و خروج
           </slot>
           <div
             class="vuec-popup-close"
-            @click="showPicker(false)">
-            <icon-close/>
+            @click="showPicker(false)"
+          >
+            <IconClose />
           </div>
         </div>
-        <vuec-select-range
+        <VuecSelectRange
           :theme="theme"
           :value="dates"
+          :date="date"
           :min-date="minDate"
           :max-date="maxDate"
           :visible-months="2"
           :selectable="true"
         />
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 
@@ -66,6 +73,10 @@ export default {
       type: String,
       default: 'single',
     },
+    date: {
+      type: Object,
+      default: () => dayjs(),
+    },
     data: {
       type: Object,
       default: () => ({}),
@@ -96,7 +107,7 @@ export default {
     },
   },
   data() {
-    const [fromDate = dayjs(), toDate = dayjs()] = this.value;
+    const [fromDate = this.date, toDate = this.date] = this.value;
     return {
       visible: this.open,
       temporaryDisableClickListen: false,
@@ -163,12 +174,10 @@ export default {
         box-shadow: 0 15px 12px rgba(0,0,0,0.22), 0 0 38px rgba(0,0,0,0.30);
         border-radius: 4PX;
         padding: 16px;
-        direction: rtl;
         position: relative;
         z-index: 10;
         position: absolute;
         top: 100%;
-        right: 0;
     }
     .vuec-popup-header {
       padding: 10px 20px;
@@ -199,6 +208,7 @@ export default {
         width: 300px;
         .input {
             flex: 1;
+            padding: 16px;
         }
     }
     .mobile {

src/components/single-input.vue

@@ -4,15 +4,19 @@
       class="vuec-date-inputs"
       @click="showPicker"
     >
-      <div class="input">{{ formattedDates[0] }}</div>
-      <div class="input">{{ formattedDates[1] }}</div>
+      <div class="input">
+        {{ formattedDates[0] }}
+      </div>
+      <div class="input">
+        {{ formattedDates[1] }}
+      </div>
     </div>
     <div
       v-show="visible"
       class="vuec-popup"
       @click="onClickDelegate"
     >
-      <vuec-single-select
+      <VuecSingleSelect
         :theme="theme"
         :value="dates"
         :visible-months="1"

src/utils.js

@@ -41,3 +41,7 @@ export function toEnglishDigits(value) {
     .replace(/[۰-۹]/g, w => w.charCodeAt(0) - PERSIAN_ZERO_CHAR_CODE)
     .replace(/[٠-٩]/g, w => w.charCodeAt(0) - ARABIC_ZERO_CHAR_CODE);
 }
+
+export function rotate(arr, n) {
+  return arr.slice(n, arr.length).concat(arr.slice(0, n));
+}