vueless 0.0.492 → 0.0.494

package/ui.form-date-picker-range/UDatePickerRangeInputs.vue

@@ -1,90 +1,48 @@
-<template>
-  <div>
-    <UInput
-      ref="rangeInputStartRef"
-      v-model="rangeStart"
-      :error="inputRangeFromError"
-      size="md"
-      v-bind="rangeInputFirstAttrs"
-      :name="rangeInputName"
-      @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
-    />
-
-    <UInput
-      ref="rangeInputEndRef"
-      v-model="rangeEnd"
-      :error="inputRangeToError"
-      size="md"
-      v-bind="rangeInputLastAttrs"
-      :name="rangeInputName"
-      @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
-    />
-  </div>
-</template>
-
-<script setup>
-import { isWrongDateFormat, isWrongMonthNumber, isWrongDayNumber } from "./utilValidation.js";
+<script setup lang="ts" generic="TLocalValue extends RangeDate">
+import { isWrongDateFormat, isWrongMonthNumber, isWrongDayNumber } from "./utilValidation.ts";
+import { useTemplateRef } from "vue";
 
 import { dateIsOutOfRange, parseDate } from "../ui.form-calendar/utilCalendar.ts";
 
 import UInput from "../ui.form-input/UInput.vue";
 
-import { INPUT_RANGE_TYPE, INPUT_RANGE_FORMAT } from "./constants.js";
-
-const props = defineProps({
-  locale: {
-    type: Object,
-    required: true,
-  },
-
-  dateFormat: {
-    type: [String, undefined],
-    default: undefined,
-  },
-
-  rangeInputName: {
-    type: String,
-    required: true,
-  },
-
-  config: {
-    type: Object,
-    required: true,
-  },
-
-  attrs: {
-    type: Object,
-    required: true,
-  },
-});
+import { InputRangeType, INPUT_RANGE_FORMAT } from "./constants.ts";
+
+import type { UDatePickerRangeInputsProps } from "./types.ts";
+import type { RangeDate } from "src/ui.form-calendar/types.ts";
+
+type UInputRef = InstanceType<typeof UInput>;
+
+const props = defineProps<UDatePickerRangeInputsProps>();
 
-const { rangeInputFirstAttrs, rangeInputLastAttrs } = props.attrs;
+const rangeInputStartRef = useTemplateRef<UInputRef>("range-input-start");
+const rangeInputEndRef = useTemplateRef<UInputRef>("range-input-end");
 
-const localValue = defineModel("localValue", { required: true, type: Object });
-const inputRangeFromError = defineModel("inputRangeFromError", { required: true, type: String });
-const inputRangeToError = defineModel("inputRangeToError", { required: true, type: String });
-const rangeStart = defineModel("rangeStart", { type: String, required: true });
-const rangeEnd = defineModel("rangeEnd", { type: String, required: true });
+const localValue = defineModel<TLocalValue>("localValue", { required: true });
+const inputRangeFromError = defineModel<string>("inputRangeFromError", { required: true });
+const inputRangeToError = defineModel<string>("inputRangeToError", { required: true });
+const rangeStart = defineModel<string>("rangeStart", { required: true });
+const rangeEnd = defineModel<string>("rangeEnd", { required: true });
 
-function isGraterThanTo(value) {
+function isGraterThanTo(value: string) {
   if (!value) return false;
 
   const parsedValue = parseDate(value, INPUT_RANGE_FORMAT, props.locale);
   const parsedTo = parseDate(localValue.value.to, props.dateFormat, props.locale);
 
-  return parsedValue > parsedTo;
+  return parsedValue && parsedTo && parsedValue > parsedTo;
 }
 
-function isSmallerThanFrom(value) {
+function isSmallerThanFrom(value: string) {
   if (!value) return false;
 
   const parsedValue = parseDate(value, INPUT_RANGE_FORMAT, props.locale);
   const parsedFrom = parseDate(localValue.value.from, props.dateFormat, props.locale);
 
-  return parsedValue < parsedFrom;
+  return parsedValue && parsedFrom && parsedValue < parsedFrom;
 }
 
-function onInputRangeInput(value, type) {
+function onInputRangeInput(value: string, type: `${InputRangeType}`) {
   const isInvalidDateFormat = isWrongDateFormat(value);
 
   let error = "";
@@ -95,22 +53,26 @@ function onInputRangeInput(value, type) {
     error = props.locale.notCorrectMonthNumber;
   } else if (isWrongDayNumber(value) && value) {
     error = props.locale.notCorrectDayNumber;
-  } else if (isGraterThanTo(value) && type === INPUT_RANGE_TYPE.start) {
+  } else if (isGraterThanTo(value) && type === InputRangeType.Start) {
     error = props.locale.fromDateGraterThanSecond;
-  } else if (isSmallerThanFrom(value) && type === INPUT_RANGE_TYPE.end) {
+  } else if (isSmallerThanFrom(value) && type === InputRangeType.End) {
     error = props.locale.toDateSmallerThanFirst;
   }
 
-  if (type === INPUT_RANGE_TYPE.start) {
+  if (type === InputRangeType.Start) {
     inputRangeFromError.value = error;
   }
 
-  if (type === INPUT_RANGE_TYPE.end) {
+  if (type === InputRangeType.End) {
     inputRangeToError.value = error;
   }
 
   if (!isInvalidDateFormat) {
     const parsedValue = parseDate(value || new Date(), INPUT_RANGE_FORMAT, props.locale);
+    const parsedDateFrom = parseDate(localValue.value.from, props.dateFormat, props.locale);
+    const parsedDateTo = parseDate(localValue.value.to, props.dateFormat, props.locale);
+
+    if (!parsedValue) return;
 
     const isOutOfRange = dateIsOutOfRange(
       parsedValue,
@@ -120,19 +82,48 @@ function onInputRangeInput(value, type) {
       props.dateFormat,
     );
 
-    if (type === INPUT_RANGE_TYPE.start && !error && !isOutOfRange) {
+    if (type === InputRangeType.Start && !error && !isOutOfRange) {
       localValue.value = {
         from: value ? parsedValue : "",
-        to: localValue.value.to,
-      };
+        to: parsedDateTo,
+      } as TLocalValue;
     }
 
-    if (type === INPUT_RANGE_TYPE.end && !error && !isOutOfRange) {
+    if (type === InputRangeType.End && !error && !isOutOfRange) {
       localValue.value = {
-        from: localValue.value.from,
-        to: value ? parsedValue : "",
-      };
+        from: parsedDateFrom,
+        to: value ? parsedValue : null,
+      } as TLocalValue;
     }
   }
 }
+
+defineExpose({
+  rangeInputEndRef,
+  rangeInputStartRef,
+});
 </script>
+
+<template>
+  <div>
+    <UInput
+      ref="range-input-start"
+      v-model="rangeStart"
+      :error="inputRangeFromError"
+      size="md"
+      v-bind="attrs.rangeInputFirstAttrs.value"
+      :name="rangeInputName"
+      @input="onInputRangeInput($event, InputRangeType.Start)"
+    />
+
+    <UInput
+      ref="range-input-end"
+      v-model="rangeEnd"
+      :error="inputRangeToError"
+      size="md"
+      v-bind="attrs.rangeInputLastAttrs.value"
+      :name="rangeInputName"
+      @input="onInputRangeInput($event, InputRangeType.End)"
+    />
+  </div>
+</template>

package/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue

@@ -1,5 +1,137 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+
+import {
+  getWeekDateList,
+  getYearDateList,
+  getQuartersDateList,
+  getMonthsDateList,
+} from "./utilDateRange.ts";
+
+import UButton from "../ui.button/UButton.vue";
+
+import { Period } from "./constants.ts";
+
+import type { UDatePickerRangePeriodMenuProps, IsDatePeriodOutOfRange } from "./types.ts";
+import type { DatePeriodRange } from "./utilDateRange.ts";
+
+const props = defineProps<UDatePickerRangePeriodMenuProps>();
+
+const emit = defineEmits(["toggleMenu", "closeMenu", "clickPrev", "clickNext"]);
+
+const localValue = defineModel("localValue", { required: true, type: Object });
+const activeDate = defineModel("activeDate", { required: true, type: Object });
+const periodDateList = defineModel<DatePeriodRange[]>("periodDateList");
+const period = defineModel("period", { required: true, type: String });
+
+const isDatePeriodOutOfRange = inject<IsDatePeriodOutOfRange | null>(
+  "isDatePeriodOutOfRange",
+  null,
+);
+
+const periods = computed(() => [
+  { name: Period.Week, title: props.locale.week },
+  { name: Period.Month, title: props.locale.month },
+  { name: Period.Quarter, title: props.locale.quarter },
+  { name: Period.Year, title: props.locale.year },
+]);
+
+const rangeSwitchTitle = computed(() => {
+  if (props.isPeriod.month || props.isPeriod.quarter) {
+    return String(activeDate.value.getFullYear());
+  }
+
+  if (props.isPeriod.year) {
+    return `${periodDateList.value?.at(0)?.title} – ${periodDateList.value?.at(-1)?.title}`;
+  }
+
+  if (props.isPeriod.week) {
+    return `${props.locale.months.longhand[activeDate.value.getMonth()]} ${activeDate.value.getFullYear()}`;
+  }
+
+  return "";
+});
+
+function onClickPeriodButton(periodName: `${Period}`) {
+  const localDate = localValue.value.from !== null ? localValue.value.from : new Date();
+
+  if (periodName === Period.Week) {
+    periodDateList.value = getWeekDateList(localDate, props.locale.months.shorthand);
+
+    period.value = Period.Week;
+  }
+
+  if (periodName === Period.Month) {
+    periodDateList.value = getMonthsDateList(localDate, props.locale.months.longhand);
+
+    period.value = Period.Month;
+  }
+
+  if (periodName === Period.Quarter) {
+    periodDateList.value = getQuartersDateList(localDate, props.locale.quarter);
+
+    period.value = Period.Quarter;
+  }
+
+  if (periodName === Period.Year) {
+    periodDateList.value = getYearDateList(localDate);
+
+    period.value = Period.Year;
+  }
+}
+
+function onClickOwnRange() {
+  period.value = Period.OwnRange;
+}
+
+function selectDate(date: DatePeriodRange) {
+  localValue.value = {
+    from: date.startRange,
+    to: date.endRange,
+  };
+}
+
+function toggleMenu() {
+  emit("toggleMenu");
+}
+
+function onClickCustomRangeButton() {
+  selectCustomRange();
+
+  emit("closeMenu");
+  period.value = Period.Custom;
+}
+
+function selectCustomRange() {
+  localValue.value = {
+    from: props.customRangeButton.range.from,
+    to: props.customRangeButton.range.to,
+  };
+}
+
+function getDatePeriodState(date: DatePeriodRange) {
+  const localStart = new Date(localValue.value.from);
+  const localEnd = new Date(localValue.value.to);
+
+  if (props.isPeriod.year) {
+    localStart.setMonth(0, 1);
+    localEnd.setMonth(11, 31);
+  }
+
+  localStart.setHours(0, 0, 0, 0);
+  localEnd.setHours(23, 59, 59, 999);
+
+  const isSelected =
+    localStart.getTime() - date.startRange.getTime() === 0 &&
+    localEnd.getTime() - date.endRange.getTime() === 0;
+  const isCurrentDate = date.startRange <= new Date() && new Date() <= date.endRange;
+
+  return { isSelected, isCurrentDate };
+}
+</script>
+
 <template>
-  <div v-bind="periodRowAttrs">
+  <div v-bind="attrs.periodRowAttrs.value">
     <template v-for="periodButton in periods" :key="periodButton.name">
       <UButton
         v-if="periodButton.name !== period"
@@ -10,7 +142,7 @@
         color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
-        v-bind="periodButtonAttrs"
+        v-bind="attrs.periodButtonAttrs.value"
         @click="onClickPeriodButton(periodButton.name)"
       />
 
@@ -23,53 +155,53 @@
         color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
-        v-bind="periodButtonActiveAttrs"
+        v-bind="attrs.periodButtonActiveAttrs.value"
         @click="onClickPeriodButton(periodButton.name)"
       />
     </template>
   </div>
 
-  <div v-bind="periodRowAttrs">
+  <div v-bind="attrs.periodRowAttrs.value">
     <UButton
-      v-if="customRangeButton.range.to && customRangeButton.range.from && PERIOD.custom !== period"
+      v-if="customRangeButton.range.to && customRangeButton.range.from && Period.Custom !== period"
       square
       filled
       no-ring
       size="xs"
       color="grayscale"
       variant="thirdary"
-      v-bind="periodButtonAttrs"
+      v-bind="attrs.periodButtonAttrs.value"
       @click="onClickCustomRangeButton"
     >
       {{ customRangeButton.label }}
       <span
         v-if="customRangeButton.description"
-        v-bind="customRangeDescription"
+        v-bind="attrs.customRangeDescriptionAttrs.value"
         v-text="customRangeButton.description"
       />
     </UButton>
 
     <UButton
-      v-if="customRangeButton.range.to && customRangeButton.range.from && PERIOD.custom === period"
+      v-if="customRangeButton.range.to && customRangeButton.range.from && Period.Custom === period"
       square
       filled
       no-ring
       size="xs"
       color="grayscale"
       variant="thirdary"
-      v-bind="periodButtonActiveAttrs"
+      v-bind="attrs.periodButtonActiveAttrs.value"
       @click="onClickCustomRangeButton"
     >
       {{ customRangeButton.label }}
       <span
         v-if="customRangeButton.description"
-        v-bind="customRangeDescription"
+        v-bind="attrs.customRangeDescriptionAttrs.value"
         v-text="customRangeButton.description"
       />
     </UButton>
 
     <UButton
-      v-if="PERIOD.ownRange !== period"
+      v-if="Period.OwnRange !== period"
       square
       filled
       no-ring
@@ -77,8 +209,8 @@
       color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
-      :left-icon="config.defaults.ownRangeIcon"
-      v-bind="periodButtonAttrs"
+      :left-icon="config.defaults?.ownRangeIcon"
+      v-bind="attrs.periodButtonAttrs.value"
       @click="onClickOwnRange"
     />
 
@@ -91,26 +223,26 @@
       color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
-      :left-icon="config.defaults.ownRangeIcon"
-      v-bind="periodButtonActiveAttrs"
+      :left-icon="config.defaults?.ownRangeIcon"
+      v-bind="attrs.periodButtonActiveAttrs.value"
       @click="onClickOwnRange"
     />
   </div>
 
   <template v-if="!isPeriod.ownRange && !isPeriod.custom">
-    <div v-bind="rangeSwitchWrapperAttrs">
+    <div v-bind="attrs.rangeSwitchWrapperAttrs.value">
       <UButton
         square
         no-ring
         size="sm"
         color="grayscale"
         variant="thirdary"
-        :left-icon="config.defaults.prevIcon"
-        v-bind="rangeSwitchButtonAttrs"
+        :left-icon="config.defaults?.prevIcon"
+        v-bind="attrs.rangeSwitchButtonAttrs.value"
         @click="emit('clickPrev')"
       />
 
-      <div v-bind="rangeSwitchTitleAttrs">
+      <div v-bind="attrs.rangeSwitchTitleAttrs.value">
         {{ rangeSwitchTitle }}
       </div>
 
@@ -120,13 +252,13 @@
         size="sm"
         color="grayscale"
         variant="thirdary"
-        :left-icon="config.defaults.nextIcon"
-        v-bind="rangeSwitchButtonAttrs"
+        :left-icon="config.defaults?.nextIcon"
+        v-bind="attrs.rangeSwitchButtonAttrs.value"
         @click="emit('clickNext')"
       />
     </div>
 
-    <div v-if="isDatePeriodOutOfRange" v-bind="periodDateListAttrs">
+    <div v-if="isDatePeriodOutOfRange" v-bind="attrs.periodDateListAttrs.value">
       <template v-for="date in periodDateList" :key="date.title">
         <UButton
           v-if="getDatePeriodState(date).isSelected && getDatePeriodState(date).isCurrentDate"
@@ -136,7 +268,7 @@
           no-ring
           filled
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="periodDateCurrentSelectedAttrs"
+          v-bind="attrs.periodDateCurrentSelectedAttrs.value"
           :label="String(date.title)"
           @click="selectDate(date), toggleMenu()"
         />
@@ -149,7 +281,7 @@
           no-ring
           filled
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="periodDateSelectedAttrs"
+          v-bind="attrs.periodDateSelectedAttrs.value"
           :label="String(date.title)"
           @click="selectDate(date), toggleMenu()"
         />
@@ -162,7 +294,7 @@
           no-ring
           filled
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="periodDateCurrentAttrs"
+          v-bind="attrs.periodDateCurrentAttrs.value"
           :label="String(date.title)"
           @click="selectDate(date), toggleMenu()"
         />
@@ -174,7 +306,7 @@
           color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="periodDateAttrs"
+          v-bind="attrs.periodDateAttrs.value"
           :label="String(date.title)"
           @click="selectDate(date), toggleMenu()"
         />
@@ -182,182 +314,3 @@
     </div>
   </template>
 </template>
-
-<script setup>
-import { computed, inject } from "vue";
-
-import {
-  getWeekDateList,
-  getYearDateList,
-  getQuartersDateList,
-  getMonthsDateList,
-} from "./utilDateRange.js";
-
-import UButton from "../ui.button/UButton.vue";
-
-import { PERIOD } from "./constants.js";
-
-const props = defineProps({
-  locale: {
-    type: Object,
-    required: true,
-  },
-
-  isPeriod: {
-    type: Object,
-    required: true,
-  },
-
-  customRangeButton: {
-    type: Object,
-    required: true,
-  },
-
-  dateFormat: {
-    type: [String, undefined],
-    default: undefined,
-  },
-
-  minDate: {
-    type: [String, Date],
-    default: undefined,
-  },
-
-  maxDate: {
-    type: [String, Date],
-    default: undefined,
-  },
-
-  config: {
-    type: Object,
-    required: true,
-  },
-
-  attrs: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(["toggleMenu", "closeMenu", "clickPrev", "clickNext"]);
-
-const localValue = defineModel("localValue", { required: true, type: Object });
-const activeDate = defineModel("activeDate", { required: true, type: Object });
-const periodDateList = defineModel("periodDateList", { required: true, type: Object });
-const period = defineModel("period", { required: true, type: String });
-
-const isDatePeriodOutOfRange = inject("isDatePeriodOutOfRange", null);
-
-const {
-  periodButtonAttrs,
-  periodRowAttrs,
-  periodButtonActiveAttrs,
-  customRangeDescription,
-  rangeSwitchWrapperAttrs,
-  rangeSwitchButtonAttrs,
-  rangeSwitchTitleAttrs,
-  periodDateListAttrs,
-  periodDateSelectedAttrs,
-  periodDateCurrentSelectedAttrs,
-  periodDateCurrentAttrs,
-  periodDateAttrs,
-} = props.attrs;
-
-const periods = computed(() => [
-  { name: PERIOD.week, title: props.locale.week },
-  { name: PERIOD.month, title: props.locale.month },
-  { name: PERIOD.quarter, title: props.locale.quarter },
-  { name: PERIOD.year, title: props.locale.year },
-]);
-
-const rangeSwitchTitle = computed(() => {
-  if (props.isPeriod.month || props.isPeriod.quarter) {
-    return String(activeDate.value.getFullYear());
-  }
-
-  if (props.isPeriod.year) {
-    return `${periodDateList.value.at(0).title} – ${periodDateList.value.at(-1).title}`;
-  }
-
-  if (props.isPeriod.week) {
-    return `${props.locale.months.longhand[activeDate.value.getMonth()]} ${activeDate.value.getFullYear()}`;
-  }
-
-  return "";
-});
-
-function onClickPeriodButton(periodName) {
-  const localDate = localValue.value.from !== null ? localValue.value.from : new Date();
-
-  if (periodName === PERIOD.week) {
-    periodDateList.value = getWeekDateList(localDate, props.locale.months.shorthand);
-
-    period.value = PERIOD.week;
-  }
-
-  if (periodName === PERIOD.month) {
-    periodDateList.value = getMonthsDateList(localDate, props.locale.months.longhand);
-
-    period.value = PERIOD.month;
-  }
-
-  if (periodName === PERIOD.quarter) {
-    periodDateList.value = getQuartersDateList(localDate, props.locale.quarter);
-
-    period.value = PERIOD.quarter;
-  }
-
-  if (periodName === PERIOD.year) {
-    periodDateList.value = getYearDateList(localDate);
-
-    period.value = PERIOD.year;
-  }
-}
-
-function onClickOwnRange() {
-  period.value = PERIOD.ownRange;
-}
-
-function selectDate(date) {
-  localValue.value = {
-    from: date.startRange,
-    to: date.endRange,
-  };
-}
-
-function toggleMenu() {
-  emit("toggleMenu");
-}
-
-function onClickCustomRangeButton() {
-  selectCustomRange();
-
-  emit("closeMenu");
-  period.value = PERIOD.custom;
-}
-
-function selectCustomRange() {
-  localValue.value = {
-    from: props.customRangeButton.range.from,
-    to: props.customRangeButton.range.to,
-  };
-}
-
-function getDatePeriodState(date) {
-  const localStart = new Date(localValue.value.from);
-  const localEnd = new Date(localValue.value.to);
-
-  if (props.isPeriod.year) {
-    localStart.setMonth(0, 1);
-    localEnd.setMonth(11, 31);
-  }
-
-  localStart.setHours(0, 0, 0, 0);
-  localEnd.setHours(23, 59, 59, 999);
-
-  const isSelected = localStart - date.startRange === 0 && localEnd - date.endRange === 0;
-  const isCurrentDate = date.startRange <= new Date() && new Date() <= date.endRange;
-
-  return { isSelected, isCurrentDate };
-}
-</script>