feat: introduce limitView - navigate limatation

Author: farnabaz

bili.config.js

@@ -1,11 +1,11 @@
 module.exports = {
-  // js: 'buble',
-  plugins: [
-    'vue',
-  ],
-  formats: [
-    'cjs-min',
-    'umd-min',
-    'es',
-  ],
+    // js: 'buble',
+    plugins: [
+        'vue',
+    ],
+    formats: [
+        'cjs-min',
+        'umd-min',
+        'es',
+    ],
 };

demo/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
-  <main>
-    <Nuxt />
-  </main>
+    <main>
+        <Nuxt />
+    </main>
 </template>
 
 <script>

demo/nuxt.config.js

@@ -1,16 +1,16 @@
 import path from 'path';
 
 export default {
-  head: {
-    meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    head: {
+        meta: [
+            { charset: 'utf-8' },
+            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        ],
+    },
+    css: [
+        '~/assets/styles.scss',
     ],
-  },
-  css: [
-    '~/assets/styles.scss',
-  ],
 
-  srcDir: path.resolve(__dirname),
-  rootDir: path.resolve(__dirname, '..'),
+    srcDir: path.resolve(__dirname),
+    rootDir: path.resolve(__dirname, '..'),
 };

src/components/core/calendar.vue

@@ -10,6 +10,7 @@
         >
             <span
                 class="vuec-btn-prev"
+                :class="{ disabled: disablePreviousButton }"
                 @click="previousPage"
             >
                 <slot name="prev-page">
@@ -18,6 +19,7 @@
             </span>
             <span
                 class="vuec-btn-next"
+                :class="{ disabled: disableNextButton }"
                 @click="nextPage"
             >
                 <slot name="next-page">
@@ -67,8 +69,12 @@
                 </template>
                 <template
                     slot="month-title"
-                    slot-scope="scope">
-                    <slot name="month-title" v-bind="scope">
+                    slot-scope="scope"
+                >
+                    <slot
+                        name="month-title"
+                        v-bind="scope"
+                    >
                         <h2>{{ scope.date.format('MMMM') }}</h2>
                     </slot>
                 </template>
@@ -131,6 +137,10 @@ export default {
             type: Array,
             default: () => [],
         },
+        limitView: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -177,6 +187,16 @@ export default {
 
             return months;
         },
+        disablePreviousButton() {
+            return this.limitView
+                && this.minDate
+                && !this.localDate.isAfter(this.minDate, 'month');
+        },
+        disableNextButton() {
+            return this.limitView
+                && this.maxDate
+                && !this.localDate.isBefore(this.maxDate, 'month');
+        },
     },
     watch: {
         date(newDate) {
@@ -201,11 +221,21 @@ export default {
             this.$emit('click-day', $event);
         },
         previousPage() {
+            if (this.disablePreviousButton) {
+                return;
+            }
+
             this.localDate = this.localDate.subtract(this.visibleMonths, 'Month').startOf('Month');
+
             this.$emit('previous-page', this.localDate);
         },
         nextPage() {
+            if (this.disableNextButton) {
+                return;
+            }
+
             this.localDate = this.localDate.add(this.visibleMonths, 'Month').startOf('Month');
+
             this.$emit('next-page', this.localDate);
         },
     },
@@ -235,6 +265,9 @@ export default {
       flex: 1;
       text-align: center;
     }
+    .disabled {
+        opacity: 0.3;
+    }
   }
 }
 </style>

src/components/core/month.vue

@@ -4,7 +4,10 @@
             :show="showTitle"
             class="vuec-month-name"
         >
-            <slot name="month-title" :date="date" />
+            <slot
+                name="month-title"
+                :date="date"
+            />
         </div>
         <div class="vuec-week-nav vuec-7col">
             <div

src/utils.js

@@ -2,16 +2,16 @@
  * Persian numeric characters
  */
 export const PERSIAN_DIGITS = [
-  '۰',
-  '۱',
-  '۲',
-  '۳',
-  '۴',
-  '۵',
-  '۶',
-  '۷',
-  '۸',
-  '۹',
+    '۰',
+    '۱',
+    '۲',
+    '۳',
+    '۴',
+    '۵',
+    '۶',
+    '۷',
+    '۸',
+    '۹',
 ];
 
 /**
@@ -29,19 +29,19 @@ export const PERSIAN_ZERO_CHAR_CODE = PERSIAN_DIGITS[0].charCodeAt(0);
 export const ARABIC_ZERO_CHAR_CODE = ARABIC_DIGITS[0].charCodeAt(0);
 
 export function toNumeric(value) {
-  return String(value).replace(/[^-\d]/g, '');
+    return String(value).replace(/[^-\d]/g, '');
 }
 
 export function toPersianDigits(value) {
-  return String(value).replace(/[0-9]/g, w => PERSIAN_DIGITS[parseInt(w)]);
+    return String(value).replace(/[0-9]/g, w => PERSIAN_DIGITS[parseInt(w)]);
 }
 
 export function toEnglishDigits(value) {
-  return String(value)
-    .replace(/[۰-۹]/g, w => w.charCodeAt(0) - PERSIAN_ZERO_CHAR_CODE)
-    .replace(/[٠-٩]/g, w => w.charCodeAt(0) - ARABIC_ZERO_CHAR_CODE);
+    return String(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));
+    return arr.slice(n, arr.length).concat(arr.slice(0, n));
 }