refactor: name changes

shubhadip · Nov 4, 2023 · 02b066e · 02b066e
1 parent 6220e04
commit 02b066e
Show file tree

Hide file tree

Showing 31 changed files with 82 additions and 95 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -43,6 +43,18 @@ module.exports = {
     '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'error',
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/indent': ['error', 2],
+    // TODO: refactor these rules starts here
+    'vuejs-accessibility/form-control-has-label': 'off',
+    'import/extensions': 'off',
+    'vue/require-default-prop': 'warn',
+    '@typescript-eslint/no-unsafe-argument': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    'vuejs-accessibility/click-events-have-key-events':'warn',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off',
+    'vue/multi-word-component-names': 'off',
+    // TODO: refactor these rules ends here
     '@typescript-eslint/naming-convention': [
       'warn',
       {

diff --git a/package.json b/package.json
@@ -65,7 +65,8 @@
     "vue-tsc": "^1.8.5"
   },
   "lint-staged": {
-    "*.ts": "eslint --cache --fix"
+    "*.ts": "eslint --cache --fix",
+    "*.vue": "eslint --cache --fix"
   },
   "types": "./types/index.d.ts",
   "keywords": [

diff --git a/src/components/datepicker/DateInput.vue b/src/components/datepicker/DateInput.vue
@@ -4,7 +4,7 @@
     <span
       v-if="calendarButton"
       class="vuejs3-datepicker__calendar-button"
-      :class="{ 'input-group-prepend': addBootstrapClass, 'cursor-na' : disabled }"
+      :class="{ 'input-group-prepend': addBootstrapClass, 'cursor-na': disabled }"
       @click="showCalendar"
     >
       <span :class="{ 'input-group-text': addBootstrapClass }">
@@ -81,11 +81,11 @@ export default defineComponent({
   props: {
     selectedDate: {
       type: [Date, String],
-      default: null
+      default: null,
     },
     resetTypedDate: {
       type: [Date as new () => Date],
-      default: new Date()
+      default: new Date(),
     },
     format: {
       type: [String, Function],
@@ -133,15 +133,15 @@ export default defineComponent({
       type: Boolean,
     },
     typeable: {
-      type: Boolean
+      type: Boolean,
     },
     addBootstrapClass: {
       type: Boolean,
       default: false,
       required: false,
       validator: (value: boolean) => {
-        return !!value
-      }
+        return !!value;
+      },
     },
     useUtc: {
       type: Boolean,
@@ -177,7 +177,7 @@ export default defineComponent({
     theme: {
       default: 'green',
       type: String,
-    }
+    },
   },
   emits: ['show-calendar', 'typed-date', 'clear-date', 'close-calendar'],
   setup(props, { emit }) {
@@ -191,7 +191,7 @@ export default defineComponent({
         }
         return {
           'form-control': true,
-          ...((props.inputClass as unknown) as Record<string, any>),
+          ...(props.inputClass as unknown as Record<string, any>),
         };
       }
       return props.inputClass;
@@ -301,7 +301,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-  .cursor-na {
-    cursor: 'not-allowed';
-  }
+.cursor-na {
+  cursor: 'not-allowed';
+}
 </style>
diff --git a/src/components/datepicker/Datepicker.vue → ...onents/datepicker/DatePickerComponent.vue b/src/components/datepicker/Datepicker.vue → ...onents/datepicker/DatePickerComponent.vue
@@ -270,7 +270,7 @@ export default defineComponent({
     theme: {
       default: 'green',
       type: String,
-    }
+    },
   },
   emits: [
     'input',
@@ -284,7 +284,7 @@ export default defineComponent({
     'selected-disabled',
   ],
   setup(props, { emit }) {
-    const initmodelvalue = new Date((props.modelValue as unknown) as Date);
+    const initmodelvalue = new Date(props.modelValue as unknown as Date);
     const pageTimestamp = ref<number>(0);
     const selectedDate = ref<Date | string | null>(null);
     if (props.modelValue && isValidDate(initmodelvalue)) {

diff --git a/src/components/datepicker/PickerDay.vue b/src/components/datepicker/PickerDay.vue
@@ -19,7 +19,8 @@
           >{{ isYmd ? currYearName : currMonthName }} {{ isYmd ? currMonthName : currYearName }}</span
         >
         <span @click="isRtl ? previousMonth() : nextMonth()" class="next" :class="{ disabled: isRightNavDisabled }"
-          >&gt;</span>
+          >&gt;</span
+        >
       </header>
       <div :class="isRtl ? 'flex-rtl' : ''">
         <span class="cell day-header" v-for="d in daysOfWeek" :key="d.timestamp">{{ d }}</span>
@@ -88,15 +89,12 @@ export default defineComponent({
       type: Date as PropType<Date>,
       default: new Date(),
     },
-    pageTimestamp: {
-      type: Number,
-    },
     fullMonthName: {
       type: Boolean,
     },
     allowedToShowView: {
       type: Function,
-      required: true
+      required: true,
     },
     dayCellContent: {
       type: Function,

diff --git a/src/components/datepicker/PickerMonth.vue b/src/components/datepicker/PickerMonth.vue
@@ -21,7 +21,8 @@
           pageYearName
         }}</span>
         <span @click="isRtl ? previousYear() : nextYear()" class="next" :class="{ disabled: isRightNavDisabled }"
-          >&gt;</span>
+          >&gt;</span
+        >
       </header>
       <span
         class="cell month"
@@ -73,9 +74,6 @@ export default defineComponent({
       type: Date as PropType<Date>,
       default: new Date(),
     },
-    pageTimestamp: {
-      type: Number,
-    },
     disabledDates: {
       type: Object,
     },

diff --git a/src/components/datepicker/PickerYear.vue b/src/components/datepicker/PickerYear.vue
@@ -19,7 +19,8 @@
         >
         <span>{{ getPageDecade }}</span>
         <span @click="isRtl ? previousDecade() : nextDecade()" class="next" :class="{ disabled: isRightNavDisabled }"
-          >&gt;</span>
+          >&gt;</span
+        >
       </header>
       <span
         class="cell year"
@@ -43,7 +44,7 @@ import {
   getMonthNameAbbr,
   setFullYear,
   stringToDate,
-} from './utils/DateUtils';
+} from './utils/DateUtils.ts';
 
 export default defineComponent({
   name: 'PickerYear',
@@ -63,9 +64,6 @@ export default defineComponent({
       type: Date as PropType<Date>,
       default: new Date(),
     },
-    pageTimestamp: {
-      type: Number,
-    },
     disabledDates: {
       type: Object,
     },
@@ -86,7 +84,7 @@ export default defineComponent({
     },
     allowedToShowView: {
       type: Function,
-      required: true
+      required: true,
     },
     useUtc: {
       type: Boolean,

diff --git a/src/components/examples/CalendarIcon.vue b/src/components/examples/CalendarIcon.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Calendar Icon Details
-    </template>
+    <template v-slot:label> Calendar Icon Details </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker placeholder="Select Date" iconColor="red" :iconHeight="18" :iconWidth="18"> </appdate-picker>
@@ -14,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'InlineView',

diff --git a/src/components/examples/DayView.vue b/src/components/examples/DayView.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Day View
-    </template>
+    <template v-slot:label> Day View </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker placeholder="Select Day" :minimum-view="'day'" :maximum-view="'day'" @input="handleChangedDay">
@@ -15,7 +13,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'DayView',

diff --git a/src/components/examples/DefaultValue.vue b/src/components/examples/DefaultValue.vue
@@ -5,7 +5,7 @@
       <div class="flex-block">
         <appdate-picker placeholder="Select Date" @input="dateSelected" :value="defaultValue"> </appdate-picker>
         <div class="change-btn">
-          <button @click="changeDefaultValue">Change Default Value</button>
+          <button type="button" @click="changeDefaultValue">Change Default Value</button>
         </div>
       </div>
     </template>
@@ -15,7 +15,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'DefaultValue',

diff --git a/src/components/examples/Disabled.vue b/src/components/examples/Disabled.vue
@@ -1,13 +1,11 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Disabled
-    </template>
+    <template v-slot:label> Disabled </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker
           placeholder="Select Date"
-          @input="dateSelected" 
+          @input="dateSelected"
           :value="defaultValue"
           :openDate="new Date('2020-11-06')"
           :disabled-dates="{
@@ -26,7 +24,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'Disabled',

diff --git a/src/components/examples/HighlightedView.vue b/src/components/examples/HighlightedView.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Highlighted View
-    </template>
+    <template v-slot:label> Highlighted View </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker
@@ -21,7 +19,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'HighlightedView',
@@ -46,7 +44,7 @@ export default defineComponent({
   import { ref } from 'vue';
   export default {
     setup(){
-      return {  
+      return {
       }
     }
   }

diff --git a/src/components/examples/InlineView.vue b/src/components/examples/InlineView.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Inline View
-    </template>
+    <template v-slot:label> Inline View </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker :inline="true"></appdate-picker>
@@ -14,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'InlineView',

diff --git a/src/components/examples/Language.vue b/src/components/examples/Language.vue
@@ -6,7 +6,7 @@
         <appdate-picker language="hi" placeholder="Select Date" @input="dateSelected" :value="defaultValue">
         </appdate-picker>
         <div class="change-btn">
-          <button @click="changeDefaultValue">Change Default Value</button>
+          <button type="button" @click="changeDefaultValue">Change Default Value</button>
         </div>
       </div>
     </template>
@@ -16,7 +16,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'DefaultValue',

diff --git a/src/components/examples/MonthView.vue b/src/components/examples/MonthView.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Month View
-    </template>
+    <template v-slot:label> Month View </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker
@@ -21,7 +19,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'MonthView',