From 1b9ad75d9388c2d462db7b7cb14f3e788c6b08bf Mon Sep 17 00:00:00 2001 From: Joffrey Berrier Date: Sat, 25 Mar 2023 18:47:05 +0100 Subject: [PATCH] feat(calendar): add some features --- README.md | 156 +- example/.eslintrc.cjs | 10 +- example/package.json | 3 +- example/postcss.config.js | 2 +- example/src/App.vue | 186 +- example/src/components/BaseCalendar.vue | 34 +- example/tsconfig.json | 1 + example/vite.config.ts | 10 + package-lock.json | 4696 +++++++++++------ package.json | 41 +- src/components/BaseIcon.vue | 29 +- src/components/Calendar.vue | 952 ++-- src/components/CalendarDays.vue | 10 +- src/components/CalendarFooter.vue | 71 + src/components/CalendarHalfDay.vue | 97 + src/components/CalendarHeader.vue | 66 +- src/components/CalendarInput.vue | 2 +- src/components/CalendarTooltip.vue | 75 + src/components/__tests__/BaseIcon.spec.ts | 8 +- src/components/__tests__/Calendar.spec.ts | 44 +- .../__snapshots__/CalendarDays.spec.ts.snap | 50 +- .../__snapshots__/CalendarHeader.spec.ts.snap | 23 - .../__snapshots__/CalendarInput.spec.ts.snap | 10 - src/components/compose/index.ts | 1 + src/components/compose/useBookingStyle.ts | 11 +- .../compose/useCheckIncheckOutHalfDay.ts | 2 +- .../compose/useCreateHalfDayDates.ts | 13 +- src/components/compose/useCreateMonth.ts | 3 +- .../compose/useCreateMultipleMonths.ts | 2 +- src/components/compose/useFlatBooking.ts | 2 +- .../compose/useGetFlattenedPeriods.ts | 31 + .../compose/useGetNextBookingDate.ts | 12 +- src/components/compose/useGetPeriod.ts | 33 +- src/components/compose/useToggleCalendar.ts | 10 +- src/components/generateMonth.ts | 32 +- src/components/helpers.ts | 47 +- src/plugins/day.ts | 11 +- src/types/index.ts | 1 + tailwind.config.cjs | 5 +- tsconfig.vitest.json | 1 - 40 files changed, 4550 insertions(+), 2243 deletions(-) create mode 100644 src/components/CalendarFooter.vue create mode 100644 src/components/CalendarHalfDay.vue create mode 100644 src/components/CalendarTooltip.vue delete mode 100644 src/components/__tests__/__snapshots__/CalendarHeader.spec.ts.snap delete mode 100644 src/components/__tests__/__snapshots__/CalendarInput.spec.ts.snap create mode 100644 src/components/compose/useGetFlattenedPeriods.ts diff --git a/README.md b/README.md index e014910..ba959ab 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# vue-datepicker 1.3.91 +# vue-datepicker 2.0.0 πŸ‘Š An easier datePicker in Vue.js πŸ‘Š @@ -58,33 +58,43 @@ Use css variable ```css --calendar-wrapper: #fff; ---calendar-tooltip-bg: #fff; ---calendar-tooltip-border: #ececec; ---calendar-input-bg: #fff; ---calendar-input-border: #eee; +--calendar-tooltip-bg: #202020; +--calendar-tooltip-border: #202020; +--calendar-tooltip-text: #fff; + +--calendar-half-day-color: #757575; +--calendar-half-day-color-active: #222; + +--calendar-text-color: #202020; + +--day-border: #fff; +--day-checkIn-checkOut: #8ebbbb; +--day-disabled: #aaa; +--day-hovering-with-checkIn: #8ebbbb; +--day-range-days: #daebeb; ---calendar-paginate-bg: rgb(236 252 203); ---calendar-paginate-text-color: rgb(163 230 53); ---calendar-paginate-border-color: rgb(163 230 53); +--calendar-disabled-opacity: 0.5; ---calendar-paginate-hover-bg: rgb(163 230 53); ---calendar-paginate-hover-border: rgb(163 230 53); ---calendar-paginate-hover-text: #ffffff; +--calendar-mobile-header-border-bottom-days: #eee; ---calendar-paginate-disabled-bg: rgba(101, 163, 13, 0.5); ---calendar-paginate-disabled-border: rgb(101 163 13); ---calendar-paginate-disabled-text: #ffffff; +--calendar-input-bg: #fff; +--calendar-input-border: #f0f2f6; +--calendar-input-shadow: 0 0 0 0.2rem #eee; ---day-disabled: rgb(241 245 249); +--calendar-paginate-bg: #fff; +--calendar-paginate-text-color: #202020; +--calendar-paginate-border-color: #f0f2f6; ---day-border: rgb(226 232 240); ---day-range-days: rgb(236 252 203); ---day-hovering-with-checkIn: rgb(163 230 53); +--calendar-paginate-hover-bg: #fff; +--calendar-paginate-hover-text: #202020; +--calendar-paginate-hover-border: #202020; ---day-checkIn-checkOut: rgb(190 242 100); +--calendar-paginate-disabled-bg: #ffffff; +--calendar-paginate-disabled-border: #f0f2f6; +--calendar-paginate-disabled-text: #f0f2f6; ---day-today: rgb(217 249 157); +--day-today: #264646; ``` ## Data binding @@ -94,14 +104,14 @@ Use css variable - Type: `Date` - Default: `null` -Exemple : `v-model:checkIn=""` +Example: `v-model:checkIn=""` ### CheckOut - Type: `Date` - Default: `null` -Exemple : `v-model:checkOut=""` +Example: `v-model:checkOut=""` ## Props/Options @@ -119,7 +129,7 @@ Show calendar by default Allows you to define colors for your bookings, the name of the key must be equal to your type key in the booking object -Exemple: +Example: ```javascript bookingColor: { @@ -135,7 +145,7 @@ bookingColor: { Allows you to define a date range (Booking) -Exemple: +Example: ```javascript bookingDates: [ @@ -166,6 +176,13 @@ Disabled days after the current date Disabled days before the current date +### disabled + +- Type: `Boolean` +- Default: `true` + +Disabled the click on input calendar + ### startDate - Type: `Date` @@ -194,6 +211,13 @@ Define the format of your date Define the text of you input calendar +### position + +- Type: `String` +- Default: `left` + +Define the position of the calendar (right or left) + ### showYear - Type: `Boolean` @@ -215,7 +239,7 @@ hide / show the input calendar This data is an array of your booked dates, the date is already booked is appear it in disabled -Exemple: +Example: ```javascript bookedDates: [ @@ -263,7 +287,7 @@ Corresponds to the start of your periods with the format `YYYY-MM-DD` - If the periodType is `nightly` the count corresponds the number of days - If the periodType is `weekly_by_saturday`, `weekly_by_sunday` or `weekly_by_monday` the count corresponds to the number of weeks -Exemple: +Example: ```javascript periodDates: [ @@ -291,9 +315,78 @@ periodDates: [ ]; ``` +### The **translations** +```js +fr: {...}, +en: { + clearDates: "Clear dates", + close: "Close", + days: { + monday: "Mo", + tuesday: "Tu", + wednesday: "We", + thursday: "Th", + friday: "Fr", + saturday: "Sa", + sunday: "Su", + }, + today: "Today", + periodType: { + weeklyBySaturday: "From Saturday to Saturday", + weeklyBySunday: "From Sunday to Sunday", + weeklyByMonday: "From Monday to Monday", + nightly: "A minimum of %{minimumDuration} night is required", + }, + halfDay: { + checkIn: "Possible end of stay", + checkOut: "Possible start of stay", + }, +} +``` + ## Events -`@render-next-month` : fires when the user clicks on paginate +* `@render-next-month` : Fires when the user clicks on paginate +* `@click-on-date` : Fires when user click on a date +* `select-booking-date` : Fires when user click on a booking +* `toggle-calendar` : Fires when user open the calendar + +## Slots +### Calendar Header Input +* **Name**: `calendar-input-header` +* **Data**: + * today: +* **Methods**: + * paginate: + * paginateToToday: + +**Example:** +``` +calendar-footer="{ today, paginate, paginateToToday }" +``` +### Calendar Header mobile +* **Name**: `calendar-header` +* **Methods**: + * clearDates: + * closeDatePicker: + +**Example:** +``` +calendar-footer="{ clearDates, closeDatePicker }" +``` + +### Calendar Footer +* **Name**: `calendar-footer` +* **Methods**: + * clearDates: + * closeDatePicker: + +**Example:** +``` +calendar-footer="{ clearDates, closeDatePicker }" +``` + +## Header #### Example : @@ -359,13 +452,14 @@ e | Mouse Event - Manage BookingDates πŸ‘Š - Show checkIn checkOut date πŸ‘Š - When click on checkIn checkOut date open calendar πŸ‘Š -- Refacto code, using setup syntax -- Enable the calendar years view +- Refacto code, using setup syntax πŸ‘Š +- Enable the calendar years view πŸ‘Š +- Manage translations πŸ‘Š +- Manage monday to monday and others days πŸ‘Š # To Do -- Manage translations -- Manage monday to monday and others days +- A11Y ## Contributing to development πŸ’β€β™‚οΈπŸ’β€β™€οΈ diff --git a/example/.eslintrc.cjs b/example/.eslintrc.cjs index 8291baa..1a66a0a 100644 --- a/example/.eslintrc.cjs +++ b/example/.eslintrc.cjs @@ -2,11 +2,11 @@ require("@rushstack/eslint-patch/modern-module-resolution"); module.exports = { - "root": true, - "extends": [ + root: true, + extends: [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/eslint-config-typescript/recommended", - "@vue/eslint-config-prettier" - ] -} + "@vue/eslint-config-prettier", + ], +}; diff --git a/example/package.json b/example/package.json index 93c95f8..cdeb17b 100644 --- a/example/package.json +++ b/example/package.json @@ -3,9 +3,8 @@ "version": "0.0.0", "scripts": { "dev": "vite", - "build": "run-p type-check build-only", + "build": "vite build", "preview": "vite preview --port 4173", - "build-only": "vite build", "type-check": "vue-tsc --noEmit", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, diff --git a/example/postcss.config.js b/example/postcss.config.js index 33ad091..12a703d 100644 --- a/example/postcss.config.js +++ b/example/postcss.config.js @@ -3,4 +3,4 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/example/src/App.vue b/example/src/App.vue index b70429c..ab81388 100644 --- a/example/src/App.vue +++ b/example/src/App.vue @@ -6,7 +6,12 @@ import type { Ref } from "vue"; import type { Booking, Day, Period } from "../../src/types"; const calendar = ref(null); -const bookedDates = ref(["2022-05-13", "2022-05-12"]); +const bookedDates: Ref = ref([ + "2023-09-12", + "2023-09-13", + "2023-09-14", + "2023-09-15", +]); const bookingColor = ref({ type1: "#BFD3D9", type2: "#ACBA77", @@ -18,169 +23,84 @@ const bookingColor = ref({ }) as Ref>; const bookingDates: Ref = ref([ { - id: 1, - checkInDate: "2022-07-01", - checkOutDate: "2022-07-10", + checkInDate: "2023-07-01", + checkOutDate: "2023-07-10", type: "type1", }, { - id: 2, - checkInDate: "2022-07-10", - checkOutDate: "2022-07-20", + checkInDate: "2023-07-10", + checkOutDate: "2023-07-20", type: "type2", }, { - id: 3, - checkInDate: "2022-07-20", - checkOutDate: "2022-07-30", + checkInDate: "2023-07-20", + checkOutDate: "2023-07-30", type: "type3", }, { - id: 4, - checkInDate: "2022-08-01", - checkOutDate: "2022-08-20", + checkInDate: "2023-08-01", + checkOutDate: "2023-08-20", type: "type4", }, { - id: 5, - checkInDate: "2022-10-01", - checkOutDate: "2022-10-20", + checkInDate: "2023-10-01", + checkOutDate: "2023-10-20", type: "type5", }, { - id: 6, - checkInDate: "2022-10-20", - checkOutDate: "2022-10-30", + checkInDate: "2023-10-20", + checkOutDate: "2023-10-30", type: "type6", }, { - id: 7, - checkInDate: "2022-11-01", - checkOutDate: "2022-11-12", + checkInDate: "2023-11-01", + checkOutDate: "2023-11-12", type: "type7", }, ]); - const periodDates: Ref = ref([ { - startAt: "2022-08-06", - endAt: "2022-09-10", - periodType: "weekly_by_saturday", - minimumDuration: 2, - }, - { - startAt: "2022-09-10", - endAt: "2022-10-01", - periodType: "weekly_by_saturday", + id: "1", + endAt: "2023-05-27", minimumDuration: 2, - }, - { - startAt: "2022-10-08", - endAt: "2022-10-22", - periodType: "weekly_by_saturday", - minimumDuration: 2, - }, - { - startAt: "2022-10-22", - endAt: "2022-11-26", + minimumDurationNights: 14, periodType: "weekly_by_saturday", - minimumDuration: 3, + startAt: "2023-05-13", + house: "2812", }, { - startAt: "2022-12-18", - endAt: "2023-01-01", - periodType: "weekly_by_sunday", + id: "2", + endAt: "2023-06-25", minimumDuration: 1, - }, - { - startAt: "2023-01-01", - endAt: "2023-01-05", - periodType: "nightly", - minimumDuration: 3, - }, - { - startAt: "2023-01-05", - endAt: "2023-01-15", - periodType: "nightly", - minimumDuration: 7, - }, - { - startAt: "2023-01-15", - endAt: "2023-01-29", + minimumDurationNights: 7, periodType: "weekly_by_sunday", - minimumDuration: 1, - }, - { - startAt: "2023-01-29", - endAt: "2023-02-26", - periodType: "nightly", - minimumDuration: 10, - }, - { - startAt: "2023-02-26", - endAt: "2023-03-05", - periodType: "weekly_by_sunday", - minimumDuration: 1, - }, - { - startAt: "2023-03-11", - endAt: "2023-04-15", - periodType: "weekly_by_saturday", - minimumDuration: 3, - }, - { - startAt: "2023-04-16", - endAt: "2023-05-21", - periodType: "weekly_by_sunday", - minimumDuration: 1, - }, - { - startAt: "2023-05-21", - endAt: "2023-05-25", - periodType: "nightly", - minimumDuration: 2, - }, - { - startAt: "2023-05-25", - endAt: "2023-05-28", - periodType: "nightly", - minimumDuration: 3, - }, - { - startAt: "2023-05-28", - endAt: "2023-06-04", - periodType: "nightly", - minimumDuration: 7, - }, - { - startAt: "2023-11-27", - endAt: "2023-12-25", - periodType: "weekly_by_monday", - minimumDuration: 1, + startAt: "2023-06-04", + house: "2812", }, ]); -const checkIn = ref(new Date("2023-07-01")); -const checkOut = ref(new Date("2023-07-10")); -const nextBookedDates: Ref = ref([]); +const checkIn = ref(new Date("2023-05-01")); +const checkOut = ref(new Date("2023-05-10")); +const showAlwaysVisible = ref(false); const showYear = ref(false); const placeholder = { checkIn: "Check-in", checkOut: "Check-out", }; const clearDates = () => { - checkIn.value = null; - checkOut.value = null; + checkIn.value = new Date(); + checkOut.value = new Date(); }; const toggleCalendar = () => { showYear.value = !showYear.value; }; +const toggleAlwaysVisible = () => { + showAlwaysVisible.value = !showAlwaysVisible.value; +}; const clickOnDate = (day: Date, currentBooking: Booking) => { console.log(day, currentBooking); }; const renderNextMonth = () => { - if (bookedDates.value.length === 6) { - bookedDates.value.push(...nextBookedDates); - } + console.log("renderNextMonth"); }; const selectBookingDate = (day: Day, booking: Booking, e: Event) => { console.log(day, booking, e); @@ -203,28 +123,40 @@ const pushBookingDates = () => {