vue-time-date-range-picker/dist/vdprDatePicker.umd.cjs.map

a vue time date range picker

{"version":3,"file":"vdprDatePicker.umd.cjs","sources":["../src/globalSideEffect.ts","../src/utils/helpers.ts","../src/utils/DateUtil.ts","../src/utils/propsValidator.ts","../src/components/DateInput/types.ts","../src/components/DateInput/DateInput.vue","../src/components/Calendar/types.ts","../src/components/Calendar/Calendar.vue","../src/components/SwitchButton/types.ts","../src/components/SwitchButton/SwitchButton.vue","../src/components/CalendarInputDate/types.ts","../src/components/CalendarInputDate/CalendarInputDate.vue","../src/components/CalendarInputTime/types.ts","../src/components/CalendarInputTime/CalendarInputTime.vue","../src/components/CalendarDialog/types.ts","../src/composables/useSelectedDates.ts","../src/composables/useCalendarDateUtil.ts","../src/components/CalendarDialog/CalendarDialog.vue","../src/components/DatePicker/types.ts","../src/components/DatePicker/DatePicker.vue"],"sourcesContent":["import { InferRecord } from \"@utils/helpers\";\nimport { ObjectEmitsOptions } from \"vue\";\n\ntype defineEmitOptions = typeof _defineEmitOptions;\n\nconst _defineEmitOptions = <T extends ObjectEmitsOptions>(emitOptions: T) => {\n  return emitOptions as InferRecord<T>;\n};\n\nObject.assign(globalThis, {\n  defineEmitOptions: _defineEmitOptions,\n});\n\nexport type { defineEmitOptions };\n","import { ToRefs, UnwrapRef } from \"vue\";\n\nexport type InferRecord<T extends object> = {\n  [K in keyof T]: T[K];\n};\n\nexport type UnwrapRefs<T extends ToRefs> = {\n  [K in keyof T]: UnwrapRef<T[K]>;\n};\n\nexport type Nullable<T> = T | null;\n\nexport type MappedRecord<\n  Type extends object,\n  Mapping extends Partial<Record<keyof Type, string>>\n> = {\n  [Property in keyof Type as Property extends keyof Mapping\n    ? Mapping[Property] extends string\n      ? Mapping[Property]\n      : Property\n    : Property]: Type[Property];\n};\n\n/**\n * check if value is an instance of Date\n * @param value\n * @returns\n */\nexport const isObjectDate = (value: any): value is Date => {\n  return (\n    typeof value === \"object\" &&\n    Object.prototype.toString.call(value) === \"[object Date]\"\n  );\n};\n\n/**\n * check if a literal object value's keys is empty\n * @param value\n * @returns\n */\nexport const isEmptyLiteralObject = <T extends object>(value: T): boolean => {\n  return isPlainObject(value) && Object.keys(value).length === 0;\n};\n\n/**\n * exclude listed property from object\n * @param obj\n * @param exclude\n * @returns\n */\nexport const omit = <T extends object, U extends Extract<keyof T, string>>(\n  obj: T,\n  exclude: U[]\n): Omit<T, U> => {\n  const clone = { ...obj };\n\n  exclude.forEach((prop) => delete clone[prop]);\n\n  return clone;\n};\n\n/*!\n * is-plain-object <https://github.com/jonschlinkert/is-plain-object>\n *\n * Copyright (c) 2014-2017, Jon Schlinkert.\n * Released under the MIT License.\n */\n/* istanbul ignore next */\nfunction hasObjectPrototype(o: any): boolean {\n  return Object.prototype.toString.call(o) === \"[object Object]\";\n}\n\n/* istanbul ignore next */\nexport function isPlainObject(o: any): o is object {\n  if (hasObjectPrototype(o) === false) return false;\n\n  // If has modified constructor\n  const ctor = o.constructor;\n  if (ctor === undefined) return true;\n\n  // If has modified prototype\n  const prot = ctor.prototype;\n  if (hasObjectPrototype(prot) === false) return false;\n\n  // If constructor does not have an Object-specific method\n  if (prot.hasOwnProperty!(\"isPrototypeOf\") === false) {\n    return false;\n  }\n\n  // Most likely a plain Object\n  return true;\n}\n","import moment from \"moment\";\nimport { isObjectDate } from \"./helpers\";\n\nexport default class {\n  private lang: string;\n  private localMoment: moment.Moment;\n\n  constructor(lang: string = \"\") {\n    this.lang = lang;\n    this.localMoment = moment().locale(lang);\n  }\n\n  createDate(...param: Parameters<typeof moment>) {\n    return moment(...param)\n      .locale(this.lang)\n      .toDate();\n  }\n\n  now(): Date {\n    return moment().locale(this.lang).toDate();\n  }\n\n  getDayNames() {\n    return this.localMoment.localeData().weekdays();\n  }\n\n  /**\n   * Get Abbreviated Day Names\n   */\n  getAbbrDayNames() {\n    return this.localMoment.localeData().weekdaysShort();\n  }\n\n  getMonthNames() {\n    return this.localMoment.localeData().months();\n  }\n\n  /**\n   * Get Abbreviated Month Names\n   */\n  getAbbrMonthNames() {\n    return this.localMoment.localeData().monthsShort();\n  }\n\n  formatDate(date: Date, format: string) {\n    return moment(date).locale(this.lang).format(format);\n  }\n\n  /**\n   * Check if date is the same on DD MM YYYY level\n   * @param date1 \n   * @param date2 \n   * @returns \n   */\n  isSameDate(date1: Date, date2: Date) {\n    return (\n      moment(date1).format(\"DD MM YYYY\") === moment(date2).format(\"DD MM YYYY\")\n    );\n  }\n\n  isAllDay(fromDate: Date, toDate: Date) {\n    const startFromDate = moment(fromDate).startOf(\"day\");\n    const endToDate = moment(toDate).endOf(\"day\");\n\n    return (\n      moment(fromDate).format(\"DD MM YYYY HH:mm:ss\") ===\n        startFromDate.format(\"DD MM YYYY HH:mm:ss\") &&\n      moment(toDate).format(\"DD MM YYYY HH:mm:ss\") ===\n        endToDate.format(\"DD MM YYYY HH:mm:ss\")\n    );\n  }\n\n  isValidDate(date: any): date is Date {\n    return isObjectDate(date) && moment(date).isValid();\n  }\n\n  toUnix(date: Date) {\n    return moment(date).unix();\n  }\n\n  fromUnix(unixTimestamp: number) {\n    return moment.unix(unixTimestamp).toDate();\n  }\n\n  startOf(date: Date, of: moment.unitOfTime.StartOf) {\n    return moment(date).locale(this.lang).startOf(of).toDate();\n  }\n\n  endOf(date: Date, of: moment.unitOfTime.StartOf) {\n    return moment(date).locale(this.lang).endOf(of).toDate();\n  }\n\n  /**\n   * Check if date is the same as comparing date\n   * @param date \n   * @param comparingDate \n   * @returns \n   */\n  isSame(date: Date, comparingDate: Date) {\n    return moment(date).isSame(comparingDate)\n  }\n\n  /**\n   * Check if date is before a comparingDate\n   */\n  isBefore(date: Date, comparingDate: Date) {\n    return moment(date).isBefore(comparingDate);\n  }\n\n  /**\n   * Check if date is same or before a comparingDate\n   */\n  isSameOrBefore(date: Date, comparingDate: Date) {\n    return moment(date).isSameOrBefore(comparingDate);\n  }\n\n  /**\n   * Check if date is after a comparingDate\n   */\n  isAfter(date: Date, comparingDate: Date) {\n    return moment(date).isAfter(comparingDate);\n  }\n\n  /**\n   * Check if date is same or after a comparingDate\n   */\n  isSameOrAfter(date: Date, comparingDate: Date) {\n    return moment(date).isSameOrAfter(comparingDate);\n  }\n\n  /**\n   * Check if a date is between fromDate and toDate\n   */\n  isBetween(date: Date, fromDate: Date, toDate: Date) {\n    return moment(date).isBetween(fromDate, toDate);\n  }\n\n  /**\n   * Check if a date is same or between as fromDate and toDate\n   */\n  isSameOrBetween(date: Date, fromDate: Date, toDate: Date) {\n    const theDate = moment(date);\n\n    return theDate.isSameOrAfter(fromDate) && theDate.isSameOrBefore(toDate);\n  }\n\n  /**\n   * Add number of timeKey to date\n   */\n  add(\n    date: Date,\n    number: moment.DurationInputArg1,\n    timeKey: moment.DurationInputArg2\n  ) {\n    return moment(date).locale(this.lang).add(number, timeKey).toDate();\n  }\n\n  /**\n   * Subtract number of timeKey to date\n   */\n  subtract(\n    date: Date,\n    number: moment.DurationInputArg1,\n    timeKey: moment.DurationInputArg2\n  ) {\n    return moment(date).locale(this.lang).subtract(number, timeKey).toDate();\n  }\n\n  /**\n   * Get Number of Day in A month from A Date\n   */\n  daysInMonth(date: Date) {\n    return moment(date).daysInMonth();\n  }\n\n  /**\n   * Get Day 0 - 6 from A Date\n   */\n  day(date: Date) {\n    return moment(date).day();\n  }\n\n  /**\n   * Get Month 0 - 11 from A Date\n   */\n  month(date: Date) {\n    return moment(date).month();\n  }\n\n  /**\n   * Get Year from A Date\n   */\n  year(date: Date) {\n    return moment(date).year();\n  }\n}\n","import {\n  HelperButtonShape,\n} from \"@components/CalendarDialog/types\";\n\nimport { isEmptyLiteralObject, isObjectDate } from \"./helpers\";\nimport { SameDateFormatConfig } from \"@components/DateInput/types\";\nimport { DatesAvailabilityConfig } from \"@composables/useCalendarDateUtil\";\nimport { InitialDate } from \"@composables/useSelectedDates\";\n\nexport const isValidInitialDate = (value: InitialDate | undefined | null) => {\n  if (!value || (value as Array<unknown>).length === 0) return true;\n\n  const [from, to] = value;  \n\n  if (from && to) {\n    return isObjectDate(from) && isObjectDate(to) && to.getTime() >= from.getTime()\n  }\n\n  if (from) {\n    return isObjectDate(from)\n  }\n\n  if (to) {\n    return isObjectDate(to)\n  }\n\n  return true\n};\n\nexport const isValidHelperButtons = (\n  value: Array<HelperButtonShape> | undefined | null\n) => {\n  if (!value || value.length === 0) return true;\n\n  return value.every((v) => {\n    const isButtonNameValid = typeof v.name === \"string\" && v.name !== \"\";\n    const isButtonFromDateValid = isObjectDate(v.from);\n    const isButtonToDateValid = isObjectDate(v.to);\n\n    return isButtonNameValid && isButtonFromDateValid && isButtonToDateValid;\n  });\n};\n\nexport const isValidDateAvailabilityConfig = (\n  value: DatesAvailabilityConfig | undefined | null\n) => {\n  if (!value || isEmptyLiteralObject(value)) return true;\n\n  const { dates, from, to, ranges, custom } = value;\n\n  if (Array.isArray(dates) && dates.some((v) => !isObjectDate(v))) return false;\n\n  if (from && !isObjectDate(from)) return false;\n\n  if (to && !isObjectDate(to)) return false;\n\n  if (\n    Array.isArray(ranges) &&\n    ranges.some((r) => !isObjectDate(r.from) || !isObjectDate(r.to))\n  )\n    return false;\n\n  if (custom && typeof custom !== \"function\") return false;\n\n  return true;\n};\n\nexport const isValidSameDateFormat = (\n  value: SameDateFormatConfig | undefined | null\n) => {\n  if (!value) return true;\n\n  if (isEmptyLiteralObject(value)) return false;\n\n  const { from, to } = value;\n\n  return (\n    typeof from === \"string\" &&\n    from !== \"\" &&\n    typeof to === \"string\" &&\n    to !== \"\"\n  );\n};\n","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { ClassValue, FromToRange } from \"@components/commonTypes\";\nimport { Nullable } from \"@utils/helpers\";\nimport { isValidSameDateFormat } from \"@utils/propsValidator\";\nimport { ExtractPropTypes, PropType } from \"vue\";\n\nexport type SameDateFormatConfig = FromToRange<string>;\n\nexport const dateInputProps = {\n  inputClass: [String, Object, Array] as PropType<ClassValue>,\n  refName: String as PropType<string>,\n  name: String as PropType<string>,\n  type: String as PropType<string>,\n  placeholder: String as PropType<string>,\n  id: String as PropType<string>,\n  required: Boolean as PropType<boolean>,\n  format: {\n    type: String as PropType<string>,\n    default: \"DD/MM/YYYY HH:mm\",\n  },\n  sameDateFormat: {\n    type: Object as PropType<SameDateFormatConfig>,\n    validator: isValidSameDateFormat,\n    default: () =>\n      ({\n        from: \"DD/MM/YYYY, HH:mm\",\n        to: \"HH:mm\",\n      } as SameDateFormatConfig),\n  },\n  language: {\n    type: String as PropType<string>,\n    default: \"en\",\n  },\n  selectedStartDate: Date as PropType<Nullable<Date>>,\n  selectedEndDate: Date as PropType<Nullable<Date>>,\n};\n\nexport type DateInputProps = ExtractPropTypes<typeof dateInputProps>;\n\nexport const dateInputEmits = defineEmitOptions({\n  click: (_e: Event) => true,\n});\n\nexport type DateInputEmits = typeof dateInputEmits;\n","<template>\n  <div>\n    <input\n      :id=\"id\"\n      :type=\"type\"\n      :ref=\"refName\"\n      :name=\"name\"\n      :placeholder=\"placeholder\"\n      :required=\"required\"\n      :value=\"formattedValue\"\n      :class=\"inputClass\"\n      @click=\"onClick\"\n      readonly\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: true,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport DateUtil from \"@utils/DateUtil\";\nimport { dateInputEmits, dateInputProps } from \"./types\";\nimport { computed } from \"vue\";\n\nconst props = defineProps(dateInputProps);\nconst emit = defineEmits(dateInputEmits);\n\nconst dateUtil = computed(() => new DateUtil(props.language));\n\nconst formattedValue = computed(() => {\n  if (!props.selectedStartDate || !props.selectedEndDate) return \"\";\n\n  if (\n    dateUtil.value.isSameDate(props.selectedStartDate, props.selectedEndDate)\n  ) {\n    const date1 = dateUtil.value.formatDate(\n      props.selectedStartDate,\n      props.sameDateFormat.from\n    );\n\n    const date2 = dateUtil.value.formatDate(\n      props.selectedEndDate,\n      props.sameDateFormat.to\n    );\n\n    return `${date1} - ${date2}`;\n  }\n\n  const date1 = dateUtil.value.formatDate(\n    props.selectedStartDate,\n    props.format\n  );\n\n  const date2 = dateUtil.value.formatDate(props.selectedEndDate, props.format);\n\n  return `${date1} - ${date2}`;\n});\n\nconst onClick = (e: Event) => {\n  emit(\"click\", e);\n};\n</script>\n","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { ExtractPropTypes, PropType } from \"vue\";\n\nexport type ComputedDay = {\n  date: Date;\n  timestamp: number;\n  dateNumber: number;\n  isHighlighted: boolean;\n  isDisabled: boolean;\n  isFaded: boolean;\n};\n\nexport const calendarProps = {\n  pageDate: {\n    type: Date as PropType<Date>,\n    required: true,\n  },\n  days: {\n    type: Array as PropType<Array<ComputedDay>>,\n    default: () => [] as Array<ComputedDay>,\n  },\n  dayNames: {\n    type: Array as PropType<Array<string>>,\n    default: () => [] as Array<string>,\n  },\n  isPrevPageDisabled: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  isNextPageDisabled: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  language: {\n    type: String as PropType<string>,\n    default: \"en\",\n  },\n};\n\nexport type CalendarProps = ExtractPropTypes<typeof calendarProps>;\n\nexport const calendarEmits = defineEmitOptions({\n  \"select-disabled-date\": (_d: Date) => true,\n  \"select-date\": (_d: Date) => true,\n  \"on-prev-calendar\": (_e: Event) => true,\n  \"on-next-calendar\": (_e: Event) => true,\n});\n","<template>\n  <div class=\"vdpr-datepicker__calendar\">\n    <div class=\"vdpr-datepicker__calendar-control\">\n      <span\n        class=\"vdpr-datepicker__calendar-control-prev\"\n        :class=\"{\n          'vdpr-datepicker__calendar-control-disabled': isPrevPageDisabled,\n        }\"\n        @click=\"onPrevClick\"\n      ></span>\n      <span class=\"vdpr-datepicker__calendar-month-year\">{{ monthYear }}</span>\n      <span\n        class=\"vdpr-datepicker__calendar-control-next\"\n        :class=\"{\n          'vdpr-datepicker__calendar-control-disabled': isNextPageDisabled,\n        }\"\n        @click=\"onNextClick\"\n      ></span>\n    </div>\n    <table class=\"vdpr-datepicker__calendar-table\">\n      <thead>\n        <tr>\n          <th v-for=\"dayName in dayNames\" :key=\"dayName\">{{ dayName }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-for=\"row in 6\" :key=\"row\">\n          <td\n            v-for=\"day in getRowDays(row)\"\n            :key=\"day.timestamp\"\n            :class=\"{\n              highlighted: day.isHighlighted,\n              faded: day.isFaded,\n              disabled: day.isDisabled,\n            }\"\n            @click=\"selectDate(day)\"\n          >\n            {{ day.dateNumber }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport DateUtil from \"@utils/DateUtil\";\nimport { calendarEmits, calendarProps, ComputedDay } from \"./types\";\nimport { computed } from \"vue\";\n\nconst props = defineProps(calendarProps);\nconst emit = defineEmits(calendarEmits);\n\nconst dateUtil = computed(() => new DateUtil(props.language));\n\nconst monthYear = computed(() => {\n  return props.pageDate\n    ? dateUtil.value.formatDate(props.pageDate, \"MMM YYYY\")\n    : \"MMM YYYY\";\n});\n\nconst getRowDays = (row: number) => {\n  const endIndex = row * 7;\n  const startIndex = endIndex - 7;\n\n  return props.days.slice(startIndex, endIndex);\n};\n\nconst selectDate = (day: ComputedDay) => {\n  if (day.isDisabled) {\n    return emit(\"select-disabled-date\", day.date);\n  }\n\n  return emit(\"select-date\", day.date);\n};\n\nconst onPrevClick = (e: Event) => {\n  if (props.isPrevPageDisabled) return;\n\n  emit(\"on-prev-calendar\", e);\n};\n\nconst onNextClick = (e: Event) => {\n  if (props.isNextPageDisabled) return;\n\n  emit(\"on-next-calendar\", e);\n};\n\ndefineExpose({\n  selectDate,\n  getRowDays,\n});\n</script>\n","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { ExtractPropTypes } from \"vue\";\n\nexport const switchButtonProps = {\n  checked: {\n    type: Boolean,\n  },\n};\n\nexport type SwitchButtonProps = ExtractPropTypes<typeof switchButtonProps>;\n\nexport const switchButtonEmits = defineEmitOptions({\n  change: (_e: Event) => true,\n});\n","<template>\n  <label class=\"vdpr-datepicker__switch\">\n    <input\n      type=\"checkbox\"\n      :checked=\"checked\"\n      @change=\"(e) => emit('change', e)\"\n    />\n    <span class=\"vdpr-datepicker__switch-slider\"></span>\n  </label>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { switchButtonEmits, switchButtonProps } from \"./types\";\n\ndefineProps(switchButtonProps);\n\nconst emit = defineEmits(switchButtonEmits);\n</script>\n","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { ClassValue } from \"@components/commonTypes\";\nimport { ExtractPropTypes, PropType } from \"vue\";\n\nexport const calendarInputDateProps = {\n  inputClass: [String, Object, Array] as PropType<ClassValue>,\n  timestamp: {\n    type: Number as PropType<number>,\n    default: 0,\n  },\n  format: {\n    type: String as PropType<string>,\n    default: \"DD/MM/YYYY\",\n  },\n  language: {\n    type: String as PropType<string>,\n    default: \"en\",\n  },\n};\n\nexport type CalendarInputDateProps = ExtractPropTypes<\n  typeof calendarInputDateProps\n>;\n\nexport const calendarInputDateEmits = defineEmitOptions({\n  change: (_d: Date) => true,\n});\n\nexport type CalendarInputDateEmits = typeof calendarInputDateEmits;\n","<template>\n  <div class=\"vdpr-datepicker__calendar-input-date\">\n    <input\n      ref=\"inputDateRef\"\n      class=\"vdpr-datepicker__calendar-input-date-elem\"\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"formattedValue\"\n      @change=\"onChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {};\n</script>\n\n<script lang=\"ts\" setup>\nimport DateUtil from \"@utils/DateUtil\";\nimport { calendarInputDateEmits, calendarInputDateProps } from \"./types\";\nimport { computed } from \"vue\";\n\nconst props = defineProps(calendarInputDateProps);\nconst emit = defineEmits(calendarInputDateEmits);\n\nconst dateUtil = computed(() => {\n  return new DateUtil(props.language);\n});\n\nconst formattedValue = computed(() => {\n  if (props.timestamp === 0) return;\n\n  const date = dateUtil.value.fromUnix(props.timestamp);\n  return dateUtil.value.formatDate(date, props.format);\n});\n\nconst onChange = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n\n  let lastTime = \"00:00:00\";\n\n  if (props.timestamp !== 0) {\n    const lastDateTime = dateUtil.value.fromUnix(props.timestamp);\n\n    lastTime = dateUtil.value.formatDate(lastDateTime, \"HH:mm:ss\");\n  }\n\n  const date = dateUtil.value.createDate(\n    `${target.value} ${lastTime}`,\n    `${props.format} HH:mm:ss`\n  );\n\n  if (!dateUtil.value.isValidDate(date)) {\n    return;\n  }\n\n  return emit(\"change\", date);\n};\n</script>\n","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { ClassValue } from \"@components/commonTypes\";\nimport { ExtractPropTypes, PropType } from \"vue\";\n\nexport const calendarInputTimeProps = {\n  inputClass: [String, Object, Array] as PropType<ClassValue>,\n  readonly: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  timestamp: {\n    type: Number as PropType<number>,\n    default: 0,\n  },\n  language: {\n    type: String as PropType<string>,\n    default: \"en\",\n  },\n  step: {\n    type: Number as PropType<number>,\n    default: 60, // in minutes\n  },\n};\n\nexport type CalendarInputTimeProps = ExtractPropTypes<\n  typeof calendarInputTimeProps\n>;\n\nexport const calendarInputTimeEmits = defineEmitOptions({\n  change: (_d: Date) => true,\n});\n\nexport type CalendarInputTimeEmits = typeof calendarInputTimeEmits;\n","<template>\n  <div class=\"vdpr-datepicker__calendar-input-time\">\n    <input\n      class=\"vdpr-datepicker__calendar-input-time-elem\"\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"formattedValue\"\n      :readonly=\"readonly\"\n      @change=\"onChange\"\n    />\n    <div class=\"vdpr-datepicker__calendar-input-time-control\">\n      <span\n        class=\"vdpr-datepicker__calendar-input-time-control-up\"\n        @click=\"onClickUp\"\n      >\n        &#9650;\n      </span>\n      <span\n        class=\"vdpr-datepicker__calendar-input-time-control-down\"\n        @click=\"onClickDown\"\n      >\n        &#9660;\n      </span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {};\n</script>\n\n<script lang=\"ts\" setup>\nimport DateUtil from \"@utils/DateUtil\";\nimport { calendarInputTimeEmits, calendarInputTimeProps } from \"./types\";\nimport { computed } from \"vue\";\n\nconst props = defineProps(calendarInputTimeProps);\nconst emit = defineEmits(calendarInputTimeEmits);\n\nconst dateUtil = computed(() => {\n  return new DateUtil(props.language);\n});\n\nconst formattedValue = computed(() => {\n  if (props.timestamp === 0) return \"\";\n\n  const date = dateUtil.value.fromUnix(props.timestamp);\n  return dateUtil.value.formatDate(date, \"HH:mm\");\n});\n\nconst onClickUp = () => {\n  if (props.timestamp === 0) return;\n\n  const date = dateUtil.value.fromUnix(props.timestamp + props.step * 60);\n\n  emit(\"change\", date);\n};\n\nconst onClickDown = () => {\n  if (props.timestamp === 0) return;\n\n  const date = dateUtil.value.fromUnix(props.timestamp - props.step * 60);\n\n  emit(\"change\", date);\n};\n\nconst onChange = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  const [hourString, minuteString] = target.value.trim().split(\":\");\n\n  const hours = parseInt(hourString, 10);\n  const minutes = parseInt(minuteString, 10);\n\n  if (isNaN(hours) || isNaN(minutes)) {\n    return false;\n  }\n\n  const totalMinutes = hours * 60 + minutes;\n  const startOfDate = dateUtil.value.startOf(\n    dateUtil.value.fromUnix(props.timestamp),\n    \"d\"\n  );\n  const date = dateUtil.value.add(startOfDate, totalMinutes, \"m\");\n\n  emit(\"change\", date);\n};\n</script>\n","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { CalendarInputDateProps } from \"@components/CalendarInputDate/types\";\nimport { CalendarInputTimeProps } from \"@components/CalendarInputTime/types\";\nimport { FromToRange } from \"@components/commonTypes\";\nimport { calendarProps } from \"@components/Calendar/types\";\nimport { ExtractPropTypes, PropType } from \"vue\";\nimport {\n  isValidDateAvailabilityConfig,\n  isValidHelperButtons,\n  isValidInitialDate,\n} from \"@utils/propsValidator\";\nimport { InitialDate } from \"@composables/useSelectedDates\";\nimport { Nullable } from \"@utils/helpers\";\nimport { DatesAvailabilityConfig } from \"@composables/useCalendarDateUtil\";\n\nexport type HelperButtonShape = Readonly<\n  {\n    name: string;\n  } & FromToRange<Date>\n>;\n\nexport type CalendarDialogInputTimeProps = Partial<\n  Pick<CalendarInputTimeProps, \"inputClass\" | \"readonly\" | \"step\">\n>;\n\nexport type CalendarDialogInputDateProps = Partial<\n  Pick<CalendarInputDateProps, \"format\" | \"inputClass\"> & {\n    labelStarts: string;\n    labelEnds: string;\n  }\n>;\n\nexport const calendarDialogProps = {\n  language: calendarProps.language,\n  disabledDates: {\n    type: Object as PropType<DatesAvailabilityConfig>,\n    validator: isValidDateAvailabilityConfig,\n    default: () => ({} as DatesAvailabilityConfig),\n  },\n  availableDates: {\n    type: Object as PropType<DatesAvailabilityConfig>,\n    validator: isValidDateAvailabilityConfig,\n    default: () => ({} as DatesAvailabilityConfig),\n  },\n  isMondayFirst: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  initialDates: {\n    type: Array as unknown as PropType<InitialDate>,\n    validator: isValidInitialDate,\n    default: () => [] as unknown as InitialDate,\n  },\n  inline: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  showHelperButtons: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  helperButtons: {\n    type: Array as unknown as PropType<Array<HelperButtonShape>>,\n    validator: isValidHelperButtons,\n    default: () => [] as unknown as Array<HelperButtonShape>,\n  },\n  timeInput: {\n    type: Object as PropType<CalendarDialogInputTimeProps>,\n    default: () =>\n      ({\n        inputClass: null,\n        readonly: false,\n        step: 60,\n      } as unknown as CalendarDialogInputTimeProps),\n  },\n  dateInput: {\n    type: Object as PropType<CalendarDialogInputDateProps>,\n    default: () =>\n      ({\n        inputClass: null,\n        labelStarts: \"Starts\",\n        labelEnds: \"Ends\",\n        format: \"DD/MM/YYYY\",\n      } as unknown as CalendarDialogInputDateProps),\n  },\n  switchButtonLabel: {\n    type: String as PropType<string>,\n    default: \"All Days\",\n  },\n  switchButtonInitial: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  applyButtonLabel: {\n    type: String as PropType<string>,\n    default: \"Apply\",\n  },\n  resetButtonLabel: {\n    type: String as PropType<string>,\n    default: \"Reset\",\n  },\n};\n\nexport type CalendarDialogProps = ExtractPropTypes<typeof calendarDialogProps>;\n\nexport const calendarDialogEmits = defineEmitOptions({\n  \"on-apply\": (_startDate: Date, _endDate: Date) => true,\n  \"on-reset\": (_e: Event) => true,\n  \"select-date\": (_startDate: Nullable<Date>, _endDate: Nullable<Date>) => true,\n  \"select-disabled-date\": (_date: Date) => true,\n  \"on-prev-calendar\": (_e: Event) => true,\n  \"on-next-calendar\": (_e: Event) => true,\n});\n\nexport type CalendarDialogEmits = typeof calendarDialogEmits;\n","import DateUtil from \"@utils/DateUtil\";\nimport { isObjectDate, Nullable } from \"@utils/helpers\";\nimport { ToRefs } from \"vue\";\nimport { computed, ref } from \"vue\";\n\nexport type InitialDate = [Nullable<Date>, Nullable<Date>];\n\ntype UseDatePickerProps = ToRefs<{\n  language: string;\n  initialDates: InitialDate;\n}>;\n\nexport const useSelectedDates = (props: UseDatePickerProps) => {\n  const dateUtil = computed(() => {\n    return new DateUtil(props.language.value);\n  });\n\n  const selectedStartDate = ref<Nullable<Date>>(\n    props.initialDates.value?.[0] ?? null\n  );\n  const selectedEndDate = ref<Nullable<Date>>(\n    props.initialDates.value?.[1] ?? null\n  );\n\n  const isAllDay = computed(() => {\n    if (selectedStartDate.value && selectedEndDate.value) {\n      return dateUtil.value.isAllDay(\n        selectedStartDate.value,\n        selectedEndDate.value\n      );\n    }\n\n    return false;\n  });\n\n  const isDateHighlighted = computed(() => (date: Date) => {\n    const hasStartDate = isObjectDate(selectedStartDate.value);\n    const hasEndDate = isObjectDate(selectedEndDate.value);\n\n    if (hasStartDate && hasEndDate)\n      return dateUtil.value.isSameOrBetween(\n        date,\n        dateUtil.value.startOf(selectedStartDate.value!, \"d\"),\n        dateUtil.value.startOf(selectedEndDate.value!, \"d\")\n      );\n\n    if (hasStartDate)\n      return dateUtil.value.isSameDate(date, selectedStartDate.value!);\n\n    if (hasEndDate)\n      return dateUtil.value.isSameDate(date, selectedEndDate.value!);\n\n    return false;\n  });\n\n  const setDates = (\n    startDate: Nullable<Date>,\n    endDate: Nullable<Date>\n  ): { startDate: Nullable<Date>; endDate: Nullable<Date> } => {\n    const selected = [\n      dateUtil.value.isValidDate(startDate) ? startDate : null,\n      dateUtil.value.isValidDate(endDate) ? endDate : null,\n    ];\n\n    if (\n      selected[0] &&\n      selected[1] &&\n      dateUtil.value.isAfter(selected[0], selected[1])\n    ) {\n      [selected[0], selected[1]] = [selected[1], selected[0]];\n    }\n\n    [selectedStartDate.value, selectedEndDate.value] = selected;\n\n    return {\n      startDate: selectedStartDate.value,\n      endDate: selectedEndDate.value,\n    };\n  };\n\n  return {\n    selectedStartDate,\n    selectedEndDate,\n    isAllDay,\n    isDateHighlighted,\n    setDates,\n  };\n};\n","import { FromToRange } from \"@components/commonTypes\";\nimport DateUtil from \"@utils/DateUtil\";\nimport { isEmptyLiteralObject } from \"@utils/helpers\";\nimport { computed, ref, ToRefs } from \"vue\";\n\nexport type Day = {\n  date: Date;\n  timestamp: number;\n  dateNumber: number;\n  isFaded: boolean;\n};\n\nexport type DisableDateCheckFunction = (date: Date) => boolean;\n\nexport type DatesAvailabilityConfig = Partial<\n  {\n    dates: Array<Date>;\n    ranges: Array<FromToRange<Date>>;\n    custom: DisableDateCheckFunction;\n  } & FromToRange<Date>\n>;\n\ntype UseCalendarProps = ToRefs<{\n  pageDate: Date;\n  language: string;\n  isMondayFirst: boolean;\n  disabledDates?: DatesAvailabilityConfig;\n  availableDates?: DatesAvailabilityConfig;\n}>;\n\nexport const useCalendar = (props: UseCalendarProps) => {\n  const dateUtil = computed(() => {\n    return new DateUtil(props.language.value);\n  });\n\n  const pageDate = ref<Date>(props.pageDate?.value ?? dateUtil.value.now());\n\n  const disableDateCheckFunction = computed(() => {\n    if (\n      !props?.disabledDates?.value ||\n      isEmptyLiteralObject(props?.disabledDates?.value)\n    )\n      return null;\n\n    return createDisableDateCheckFunction(\n      props?.disabledDates?.value,\n      dateUtil.value\n    );\n  });\n\n  const enableDateCheckFunction = computed(() => {\n    if (\n      !props?.availableDates?.value ||\n      isEmptyLiteralObject(props?.availableDates?.value)\n    )\n      return null;\n\n    return createEnableDateCheckFunction(\n      props?.availableDates?.value,\n      dateUtil.value\n    );\n  });\n\n  const isDisabledDate = computed(() => (date: Date) => {\n    // Disable date takes precedence\n\n    if (disableDateCheckFunction.value) {\n      return disableDateCheckFunction.value(date);\n    }\n\n    if (enableDateCheckFunction.value) {\n      return !enableDateCheckFunction.value(date);\n    }\n\n    return false;\n  });\n\n  const days = computed(() => {\n    return createDays(\n      pageDate.value,\n      props.isMondayFirst.value,\n      dateUtil.value\n    );\n  });\n\n  const isNextPageDisabled = computed(() => {\n    const disabledDatesConfig = props?.disabledDates?.value ?? {};\n    const availableDatesConfig = props?.availableDates?.value ?? {};\n\n    if (!isEmptyLiteralObject(disabledDatesConfig)) {\n      const { from, to } = disabledDatesConfig;\n\n      if (!from) {\n        return false;\n      }\n\n      // next is always available if there's 'to' date intersecting 'from' date\n      if (to && dateUtil.value.isAfter(to, from)) {\n        return false;\n      }\n\n      return (\n        (dateUtil.value.month(from) <= dateUtil.value.month(pageDate.value) &&\n          dateUtil.value.year(from) <= dateUtil.value.year(pageDate.value)) ||\n        dateUtil.value.year(from) < dateUtil.value.year(pageDate.value)\n      );\n    }\n    // availableDates cannot interfere disabledDates\n    if (\n      isEmptyLiteralObject(disabledDatesConfig) &&\n      !isEmptyLiteralObject(availableDatesConfig)\n    ) {\n      const { from, to } = availableDatesConfig;\n\n      if (!to) {\n        return false;\n      }\n\n      // next is always available if there's 'from' date intersecting 'to' date\n      if (from && dateUtil.value.isAfter(from, to)) {\n        return false;\n      }\n\n      return (\n        (dateUtil.value.month(to) <= dateUtil.value.month(pageDate.value) &&\n          dateUtil.value.year(to) <= dateUtil.value.year(pageDate.value)) ||\n        dateUtil.value.year(to) < dateUtil.value.year(pageDate.value)\n      );\n    }\n\n    return false;\n  });\n\n  const isPrevPageDisabled = computed(() => {\n    const disabledDatesConfig = props?.disabledDates?.value ?? {};\n    const availableDatesConfig = props?.availableDates?.value ?? {};\n\n    if (!isEmptyLiteralObject(disabledDatesConfig)) {\n      const { from, to } = disabledDatesConfig;\n\n      if (!to) {\n        return false;\n      }\n\n      // prev is always available if there's 'from' date intersecting 'to' date\n      if (from && dateUtil.value.isBefore(from, to)) {\n        return false;\n      }\n\n      return (\n        (dateUtil.value.month(to) >= dateUtil.value.month(pageDate.value) &&\n          dateUtil.value.year(to) >= dateUtil.value.year(pageDate.value)) ||\n        dateUtil.value.year(to) > dateUtil.value.year(pageDate.value)\n      );\n    }\n    // availableDates cannot interfere disabledDates\n    if (\n      isEmptyLiteralObject(disabledDatesConfig) &&\n      !isEmptyLiteralObject(availableDatesConfig)\n    ) {\n      const { from, to } = availableDatesConfig;\n\n      if (!from) {\n        return false;\n      }\n\n      // prev is always available if there's 'to' date intersecting 'from' date\n      if (to && dateUtil.value.isBefore(to, from)) {\n        return false;\n      }\n\n      return (\n        (dateUtil.value.month(from) >= dateUtil.value.month(pageDate.value) &&\n          dateUtil.value.year(from) >= dateUtil.value.year(pageDate.value)) ||\n        dateUtil.value.year(from) > dateUtil.value.year(pageDate.value)\n      );\n    }\n    return false;\n  });\n\n  const dayNames = computed(() => {\n    const dayNames = dateUtil.value.getAbbrDayNames();\n\n    if (props.isMondayFirst.value) {\n      const [sunday, ...restOfDays] = dayNames;\n\n      return [...restOfDays, sunday];\n    }\n\n    return dayNames;\n  });\n\n  const prevPage = (): boolean => {\n    if (isPrevPageDisabled.value) return false;\n\n    pageDate.value = dateUtil.value.subtract(pageDate.value, 1, \"month\");\n\n    return true;\n  };\n\n  const nextPage = (): boolean => {\n    if (isNextPageDisabled.value) return false;\n\n    pageDate.value = dateUtil.value.add(pageDate.value, 1, \"month\");\n\n    return true;\n  };\n\n  return {\n    pageDate,\n    dayNames,\n    days,\n    isNextPageDisabled,\n    isPrevPageDisabled,\n    nextPage,\n    prevPage,\n    isDisabledDate,\n  };\n};\n\nexport const createDay = (date: Date, isFaded: boolean): Day => {\n  return {\n    date,\n    timestamp: date.getTime(),\n    dateNumber: date.getDate(),\n    isFaded,\n  };\n};\n\n/**\n * returns full 42 days (1 row = 7 days) in specified pageDate's month, followed by the pre-days and post-days of the month\n * @param pageDate\n * @param isMondayFirst\n * @param dateUtil\n * @returns\n */\nexport const createDays = (\n  pageDate: Date,\n  isMondayFirst: boolean,\n  dateUtil: DateUtil\n) => {\n  let pointer = dateUtil.startOf(pageDate, \"month\");\n  const daysInMonth = dateUtil.daysInMonth(pageDate);\n\n  const days: Array<Day> = [];\n  const preDays: Array<Day> = [];\n  const postDays: Array<Day> = [];\n\n  for (let i = 0; i < daysInMonth; i += 1) {\n    days.push(createDay(pointer, false));\n    pointer = dateUtil.add(pointer, 1, \"day\");\n  }\n\n  let firstDay = days[0].date;\n  const SUNDAY = 0;\n  const MONDAY = 1;\n  const threshold = isMondayFirst ? MONDAY : SUNDAY;\n\n  while (firstDay.getDay() !== threshold) {\n    firstDay = dateUtil.subtract(firstDay, 1, \"day\");\n    preDays.unshift(createDay(firstDay, true));\n  }\n\n  let lastDay = days[days.length - 1].date;\n\n  for (let k = preDays.length + days.length; k < 42; k += 1) {\n    lastDay = dateUtil.add(lastDay, 1, \"day\");\n    postDays.push(createDay(lastDay, true));\n  }\n\n  return [...preDays, ...days, ...postDays];\n};\n\nexport const createDisableDateCheckFunction = (\n  datesAvailabilityConfig: DatesAvailabilityConfig,\n  dateUtil: DateUtil\n): DisableDateCheckFunction => {\n  const functions = createDisableDateCheckFuctions(\n    datesAvailabilityConfig,\n    dateUtil\n  );\n\n  return (date) =>\n    functions.length === 0 ? false : functions.some((f) => f(date));\n};\n\nexport const createEnableDateCheckFunction = (\n  datesAvailabilityConfig: DatesAvailabilityConfig,\n  dateUtil: DateUtil\n): DisableDateCheckFunction => {\n  return (date) =>\n    !createDisableDateCheckFunction(datesAvailabilityConfig, dateUtil)(date);\n};\n\nconst createDisableDateCheckFuctions = (\n  datesAvailabilityConfig: DatesAvailabilityConfig,\n  dateUtil: DateUtil\n): DisableDateCheckFunction[] => {\n  const result: DisableDateCheckFunction[] = [];\n  const { dates, from, to, ranges, custom } = datesAvailabilityConfig;\n\n  if (Array.isArray(dates)) {\n    dates.forEach((d) => {\n      result.push((date) => dateUtil.isSameDate(date, d));\n    });\n  }\n\n  if (Array.isArray(ranges)) {\n    ranges.forEach((r) => {\n      result.push((date) => dateUtil.isSameOrBetween(date, r.from, r.to));\n    });\n  }\n\n  // 'from' date smaller than 'to' date,\n  // disabling dates only happens between 'from' & 'to'\n  if (from && to && dateUtil.isBefore(from, to)) {\n    result.push((date) => dateUtil.isSameOrBetween(date, from, to));\n  } else {\n    if (from) {\n      result.push((date) => dateUtil.isSameOrAfter(date, from));\n    }\n    if (to) {\n      result.push((date) => dateUtil.isSameOrBefore(date, to));\n    }\n  }\n\n  if (custom && typeof custom === \"function\") {\n    result.push((date) => Boolean(custom(date)));\n  }\n\n  return result;\n};\n","<template>\n  <div\n    class=\"vdpr-datepicker__calendar-dialog\"\n    :class=\"{\n      'vdpr-datepicker__calendar-dialog--inline': inline,\n    }\"\n  >\n    <div class=\"vdpr-datepicker__calendar-button-helper\" v-if=\"helpers.length\">\n      <button\n        v-for=\"btn in helpers\"\n        :key=\"'btn' + btn.name\"\n        :class=\"[\n          'vdpr-datepicker__button',\n          'vdpr-datepicker__button--block',\n          'vdpr-datepicker__button-default',\n        ]\"\n        @click=\"\n          () => {\n            onHelperClick(btn.from, btn.to);\n          }\n        \"\n      >\n        {{ btn.name }}\n      </button>\n    </div>\n    <calendar\n      :language=\"language\"\n      :days=\"computedDays\"\n      :day-names=\"dayNames\"\n      :page-date=\"pageDate\"\n      :is-next-page-disabled=\"isNextPageDisabled\"\n      :is-prev-page-disabled=\"isPrevPageDisabled\"\n      @select-date=\"selectDate\"\n      @select-disabled-date=\"selectDisabledDate\"\n      @on-prev-calendar=\"onPrevCalendar\"\n      @on-next-calendar=\"onNextCalendar\"\n    />\n    <div class=\"vdpr-datepicker__calendar-actions\">\n      <div class=\"vdpr-datepicker__calendar-input-wrapper\">\n        <span>{{ switchButtonLabel }}</span>\n        <switch-button :checked=\"isAllDayChecked\" @change=\"onCheckChange\" />\n      </div>\n      <div class=\"vdpr-datepicker__calendar-input-wrapper\">\n        <span>{{ dateInput.labelStarts }}</span>\n        <calendar-input-date\n          :format=\"dateInput.format\"\n          :inputClass=\"dateInput.inputClass\"\n          :timestamp=\"unixSelectedStartDate\"\n          :language=\"language\"\n          @change=\"onStartInputDateChange\"\n        />\n      </div>\n      <div\n        class=\"vdpr-datepicker__calendar-input-wrapper vdpr-datepicker__calendar-input-wrapper--end\"\n      >\n        <calendar-input-time\n          v-show=\"isVisibleTimeInput\"\n          :step=\"timeInput.step\"\n          :readonly=\"timeInput.readonly\"\n          :inputClass=\"timeInput.inputClass\"\n          :timestamp=\"unixSelectedStartDate\"\n          @change=\"onTimeStartInputChange\"\n        />\n      </div>\n      <div class=\"vdpr-datepicker__calendar-input-wrapper\">\n        <span>{{ dateInput.labelEnds }}</span>\n        <calendar-input-date\n          :format=\"dateInput.format\"\n          :inputClass=\"dateInput.inputClass\"\n          :timestamp=\"unixSelectedEndDate\"\n          :language=\"language\"\n          @change=\"onEndDateInputDateChange\"\n        />\n      </div>\n      <div\n        class=\"vdpr-datepicker__calendar-input-wrapper vdpr-datepicker__calendar-input-wrapper--end\"\n      >\n        <calendar-input-time\n          v-show=\"isVisibleTimeInput\"\n          :step=\"timeInput.step\"\n          :readonly=\"timeInput.readonly\"\n          :inputClass=\"timeInput.inputClass\"\n          :timestamp=\"unixSelectedEndDate\"\n          @change=\"onTimeEndInputChange\"\n        />\n      </div>\n      <button\n        v-show=\"isVisibleButtonApply\"\n        :class=\"[\n          'vdpr-datepicker__button',\n          'vdpr-datepicker__button--block',\n          'vdpr-datepicker__button-submit',\n        ]\"\n        @click=\"onClickButtonApply\"\n      >\n        {{ applyButtonLabel }}\n      </button>\n      <button\n        :class=\"[\n          'vdpr-datepicker__button',\n          'vdpr-datepicker__button--block',\n          'vdpr-datepicker__button-reset',\n        ]\"\n        @click=\"onClickButtonReset\"\n      >\n        {{ resetButtonLabel }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport DateUtil from \"@utils/DateUtil\";\nimport Calendar from \"../Calendar/Calendar.vue\";\nimport SwitchButton from \"../SwitchButton/SwitchButton.vue\";\nimport CalendarInputDate from \"../CalendarInputDate/CalendarInputDate.vue\";\nimport CalendarInputTime from \"../CalendarInputTime/CalendarInputTime.vue\";\nimport { calendarDialogEmits, calendarDialogProps } from \"./types\";\nimport { computed, toRef } from \"vue\";\nimport { isObjectDate, Nullable } from \"@utils/helpers\";\nimport { InitialDate, useSelectedDates } from \"@composables/useSelectedDates\";\nimport { useCalendar } from \"@composables/useCalendarDateUtil\";\nimport { ref } from \"vue\";\nimport { ComputedDay } from \"@components/Calendar/types\";\n\nconst props = defineProps(calendarDialogProps);\nconst emit = defineEmits(calendarDialogEmits);\n\nconst dateUtil = computed(() => new DateUtil(props.language));\n\nconst {\n  selectedStartDate,\n  selectedEndDate,\n  isAllDay,\n  isDateHighlighted,\n  setDates,\n} = useSelectedDates({\n  initialDates: toRef(props, \"initialDates\"),\n  language: toRef(props, \"language\"),\n});\n\nconst initialPageDate = ref(\n  selectedStartDate.value ?? selectedEndDate.value ?? dateUtil.value.now()\n);\n\nconst {\n  pageDate,\n  dayNames,\n  days,\n  isPrevPageDisabled,\n  isNextPageDisabled,\n  nextPage,\n  prevPage,\n  isDisabledDate,\n} = useCalendar({\n  isMondayFirst: toRef(props, \"isMondayFirst\"),\n  language: toRef(props, \"language\"),\n  availableDates: toRef(props, \"availableDates\"),\n  disabledDates: toRef(props, \"disabledDates\"),\n  pageDate: initialPageDate,\n});\n\nconst computedDays = computed(() =>\n  days.value.map<ComputedDay>((d) => {\n    return {\n      ...d,\n      isDisabled: isDisabledDate.value(d.date),\n      isHighlighted: isDateHighlighted.value(d.date),\n    };\n  })\n);\n\nconst isAllDayChecked = ref(props.switchButtonInitial || isAllDay.value);\n\nconst helpers = computed(() => {\n  if (!props.showHelperButtons) return [];\n\n  if (props.helperButtons.length !== 0) return props.helperButtons;\n\n  return getDefaultHelpers();\n});\n\nconst unixSelectedStartDate = computed(() => {\n  if (!selectedStartDate.value) {\n    return 0;\n  }\n  return dateUtil.value.toUnix(selectedStartDate.value);\n});\n\nconst unixSelectedEndDate = computed(() => {\n  if (!selectedEndDate.value) {\n    return 0;\n  }\n  return dateUtil.value.toUnix(selectedEndDate.value);\n});\n\nconst isVisibleTimeInput = computed(() => {\n  return !isAllDayChecked.value;\n});\n\nconst isVisibleButtonApply = computed(() => {\n  return !props.inline;\n});\n\nconst onCheckChange = (e: Event) => {\n  const check = (e.target as HTMLInputElement).checked;\n\n  isAllDayChecked.value = check;\n\n  if (!selectedStartDate.value || !selectedEndDate.value) return;\n\n  const startDate = dateUtil.value.startOf(selectedStartDate.value, \"d\");\n\n  if (check) {\n    selectAndApplyIfInline(\n      startDate,\n      dateUtil.value.endOf(selectedEndDate.value, \"d\")\n    );\n  } else {\n    selectAndApplyIfInline(\n      startDate,\n      dateUtil.value.startOf(selectedEndDate.value, \"d\")\n    );\n  }\n};\nconst onStartInputDateChange = (value: Date) => {\n  if (isDisabledDate.value(value)) {\n    return emit(\"select-disabled-date\", value);\n  }\n\n  selectAndApplyIfInline(value, selectedEndDate.value);\n};\n\nconst onEndDateInputDateChange = (value: Date) => {\n  if (isDisabledDate.value(value)) {\n    return emit(\"select-disabled-date\", value);\n  }\n\n  selectAndApplyIfInline(selectedStartDate.value, value);\n};\n\nconst onTimeStartInputChange = (value: Date) => {\n  if (isDisabledDate.value(value)) {\n    return emit(\"select-disabled-date\", value);\n  }\n\n  selectAndApplyIfInline(value, selectedEndDate.value);\n};\n\nconst onTimeEndInputChange = (value: Date) => {\n  if (isDisabledDate.value(value)) {\n    return emit(\"select-disabled-date\", value);\n  }\n\n  selectAndApplyIfInline(selectedStartDate.value, value);\n};\n\nconst onHelperClick = (fromDate: Date, toDate: Date) => {\n  if (isDisabledDate.value(fromDate)) {\n    return emit(\"select-disabled-date\", fromDate);\n  }\n\n  if (isDisabledDate.value(toDate)) {\n    return emit(\"select-disabled-date\", toDate);\n  }\n\n  selectAndApplyIfInline(fromDate, toDate);\n};\n\nconst onClickButtonApply = () => {\n  if (selectedStartDate.value && selectedEndDate.value) {\n    emit(\"on-apply\", selectedStartDate.value, selectedEndDate.value);\n  }\n};\n\nconst onClickButtonReset = (e: Event) => {\n  setDates(null, null);\n  emit(\"on-reset\", e);\n};\n\nconst selectDate = (date: Date) => {\n  let [startDate, endDate]: InitialDate = [\n    selectedStartDate.value,\n    selectedEndDate.value,\n  ];\n\n  if (isObjectDate(startDate) && isObjectDate(endDate)) {\n    if (dateUtil.value.isSameDate(startDate, endDate)) {\n      if (dateUtil.value.isAfter(date, startDate)) {\n        endDate = date;\n      } else {\n        startDate = date;\n      }\n    } else {\n      startDate = date;\n      endDate = date;\n    }\n  } else {\n    [startDate, endDate] = [startDate ?? date, endDate ?? date];\n  }\n\n  if (isAllDayChecked.value) {\n    startDate = dateUtil.value.startOf(startDate, \"d\");\n    endDate = dateUtil.value.endOf(endDate, \"d\");\n  }\n\n  selectAndApplyIfInline(startDate, endDate);\n};\n\nconst selectDisabledDate = (date: Date) => {\n  emit(\"select-disabled-date\", date);\n};\n\nconst selectAndApplyIfInline = (\n  startDate: Nullable<Date>,\n  endDate: Nullable<Date>\n) => {\n  const selected = setDates(startDate, endDate);\n\n  emit(\"select-date\", selected.startDate, selected.endDate);\n\n  if (props.inline && selected.startDate && selected.endDate) {\n    emit(\"on-apply\", selected.startDate, selected.endDate);\n  }\n};\n\nconst getDefaultHelpers = () => {\n  const now = new Date();\n  const yesterday = dateUtil.value.subtract(now, 1, \"d\");\n  const lastWeek = dateUtil.value.subtract(now, 7, \"d\");\n  const lastMonth = dateUtil.value.subtract(now, 1, \"M\");\n  const lastYear = dateUtil.value.subtract(now, 1, \"y\");\n  const todayFrom = dateUtil.value.startOf(now, \"d\");\n  const todayTo = dateUtil.value.endOf(now, \"d\");\n  const yesterdayFrom = dateUtil.value.startOf(yesterday, \"d\");\n  const yesterdayTo = dateUtil.value.endOf(yesterday, \"d\");\n  const thisWeekFrom = dateUtil.value.startOf(now, \"week\");\n  const thisWeekTo = dateUtil.value.endOf(now, \"week\");\n  const lastWeekFrom = dateUtil.value.startOf(lastWeek, \"week\");\n  const lastWeekTo = dateUtil.value.endOf(lastWeek, \"week\");\n  const thisMonthFrom = dateUtil.value.startOf(now, \"month\");\n  const thisMonthTo = dateUtil.value.endOf(now, \"month\");\n  const lastMonthFrom = dateUtil.value.startOf(lastMonth, \"month\");\n  const lastMonthTo = dateUtil.value.endOf(lastMonth, \"month\");\n  const thisYearFrom = dateUtil.value.startOf(now, \"year\");\n  const thisYearTo = dateUtil.value.endOf(now, \"year\");\n  const lastYearFrom = dateUtil.value.startOf(lastYear, \"year\");\n  const lastYearTo = dateUtil.value.endOf(lastYear, \"year\");\n\n  return [\n    {\n      name: \"Today\",\n      from: todayFrom,\n      to: todayTo,\n    },\n    {\n      name: \"Yesterday\",\n      from: yesterdayFrom,\n      to: yesterdayTo,\n    },\n    {\n      name: \"This Week\",\n      from: thisWeekFrom,\n      to: thisWeekTo,\n    },\n    {\n      name: \"Last Week\",\n      from: lastWeekFrom,\n      to: lastWeekTo,\n    },\n    {\n      name: \"This Month\",\n      from: thisMonthFrom,\n      to: thisMonthTo,\n    },\n    {\n      name: \"Last Month\",\n      from: lastMonthFrom,\n      to: lastMonthTo,\n    },\n    {\n      name: \"This Year\",\n      f