Merge pull request #12 from joffreyBerrier/fix/add-component-name

fix(global): add component name

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-calendar-3",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "repository": "https://github.com/joffreyBerrier/vue-datepicker",
   "funding": "https://github.com/sponsors/joffreyBerrier",
   "license": "MIT",

src/components/BaseIcon.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "BaseIcon",
+};
+</script>
+
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import type { Ref, ComputedRef } from "vue";

src/components/Calendar.vue

@@ -1,5 +1,11 @@
+<script lang="ts">
+export default {
+  name: "VueCalendar",
+};
+</script>
+
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, onBeforeMount, onUnmounted } from "vue";
 import type { ComputedRef, PropType, Ref } from "vue";
 
 import { format } from "fecha";
@@ -129,7 +135,16 @@ const countOfMonth = getMonthDiff(props.startDate, props.endDate) + 11;
 const multipleMonths = useCreateMultipleMonths(props.startDate, countOfMonth);
 months.value.push(...multipleMonths);
 
-const { calendarRef, openCalendar, showCalendar } = useToggleCalendar(props);
+const { addClickOusideListener, calendarRef, openCalendar, showCalendar } =
+  useToggleCalendar(props);
+
+onBeforeMount(() => {
+  if (!props.showYear) addClickOusideListener();
+});
+
+onUnmounted(() => {
+  if (!props.showYear) removeClickOusideListener();
+});
 
 // Create array of disabledDates for each types of period
 const saturdayWeeklyPeriods = computed(() => {
@@ -448,7 +463,7 @@ const getBookingType = (day: Day): string | null => {
 
 <template>
   <div ref="calendarRef" class="calendar">
-    <calendar-input
+    <CalendarInput
       v-if="showInputCalendar"
       :placeholder="placeholder"
       :check-in="checkIn"
@@ -479,7 +494,7 @@ const getBookingType = (day: Day): string | null => {
       v-if="showCalendar"
       :class="['calendar_wrapper', { 'calendar_wrapper--year': showYear }]"
     >
-      <calendar-header
+      <CalendarHeader
         v-if="!showYear"
         :active-index="activeIndex"
         :months="months"
@@ -490,7 +505,7 @@ const getBookingType = (day: Day): string | null => {
         <div v-for="month in slicedMonths" :key="month.monthKey">
           <span v-if="showYear" class="font-bold">{{ month.monthName }}</span>
 
-          <calendar-days />
+          <CalendarDays />
 
           <div class="calendar_wrapper_content-days">
             <div

src/components/CalendarDays.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "CalendarDays",
+};
+</script>
+
 <script setup lang="ts">
 import { ref } from "vue";
 import type { Ref } from "vue";

src/components/CalendarHeader.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "CalendarHeader",
+};
+</script>
+
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ComputedRef, PropType } from "vue";

src/components/CalendarInput.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "CalendarInput",
+};
+</script>
+
 <script setup lang="ts">
 import type { PropType } from "vue";
 import type { Placeholder } from "~/types";

src/components/compose/useToggleCalendar.ts

@@ -1,4 +1,4 @@
-import { ref, watch, onBeforeMount, onUnmounted } from "vue";
+import { ref, watch } from "vue";
 
 export const useToggleCalendar = (props) => {
   const showCalendar = ref(props.showYear);
@@ -39,14 +39,8 @@ export const useToggleCalendar = (props) => {
     }
   );
 
-  onBeforeMount(() => {
-    if (!props.showYear) addClickOusideListener();
-  });
-  onUnmounted(() => {
-    if (!props.showYear) removeClickOusideListener();
-  });
-
   return {
+    addClickOusideListener,
     calendarRef,
     openCalendar,
     showCalendar,

vite.config.ts

@@ -28,5 +28,6 @@ export default defineConfig({
     alias: {
       "~": fileURLToPath(new URL("./src", import.meta.url)),
     },
+    // preserveSymlinks: true,
   },
 });