vueless 0.0.3 → 0.0.4

package/ui.form-calendar/index.vue

@@ -1,628 +0,0 @@
-<template>
-  <div ref="wrapperRef" tabindex="1" v-bind="wrapperAttrs" @keydown="onKeydown">
-    <div v-bind="navigationAttrs">
-      <UButton
-        size="sm"
-        color="gray"
-        pill
-        square
-        variant="thirdary"
-        v-bind="navigationSwitchViewButtonAttrs"
-        @click="onClickViewSwitch"
-        @mousedown.prevent.capture
-      >
-        <span v-if="isCurrentView.day" v-bind="dayViewSwitchLabelAttrs">
-          <span v-bind="dayViewSwitchLabelMonthAttrs" v-text="viewSwitchLabel.month" />
-          <span v-text="viewSwitchLabel.year" />
-        </span>
-        <span v-if="isCurrentView.month" v-text="viewSwitchLabel.year" />
-        <span v-if="isCurrentView.year" v-text="viewSwitchLabel.yearsRange" />
-
-        <template #right>
-          <UIcon
-            size="sm"
-            color="gray"
-            variant="light"
-            :name="config.dayViewSwitchLabelIconName"
-            v-bind="dayViewSwitchLabelIconAttrs"
-          />
-        </template>
-      </UButton>
-
-      <div v-bind="nextPrevWrapperAttrs">
-        <UButton
-          pill
-          size="sm"
-          square
-          variant="thirdary"
-          v-bind="nextPrevButtonAttrs"
-          @mousedown.prevent.capture
-          @click="onClickPrevButton"
-        >
-          <UIcon
-            size="sm"
-            color="gray"
-            variant="light"
-            :name="config.prevIconName"
-            v-bind="prevIconAttrs"
-          />
-        </UButton>
-
-        <UButton
-          pill
-          size="sm"
-          square
-          variant="thirdary"
-          v-bind="nextPrevButtonAttrs"
-          @mousedown.prevent.capture
-          @click="onClickNextButton"
-        >
-          <UIcon
-            size="sm"
-            color="gray"
-            variant="light"
-            :name="config.nextIconName"
-            v-bind="nextIconAttrs"
-          />
-        </UButton>
-      </div>
-    </div>
-
-    <DayView
-      v-if="isCurrentView.day"
-      :selected-date="selectedDate"
-      :active-month="activeMonth"
-      :active-date="activeDate"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :date-format="dateFormat"
-      :locale="locale"
-      :config="config"
-      @input="onInputDate"
-    />
-
-    <MonthView
-      v-if="isCurrentView.month"
-      :selected-date="selectedDate"
-      :active-month="activeMonth"
-      :active-date="activeDate"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :date-format="dateFormat"
-      :locale="locale"
-      :config="config"
-      @input="onInput"
-    />
-
-    <YearView
-      v-if="isCurrentView.year"
-      :selected-date="selectedDate"
-      :active-month="activeMonth"
-      :active-date="activeDate"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :date-format="dateFormat"
-      :locale="locale"
-      :config="config"
-      @input="onInput"
-    />
-
-    <div v-if="timepicker" v-bind="timepickerWrapperAttrs">
-      <span v-bind="timepickerLabelAttrs" v-text="localValue.timeLabel" />
-
-      <div v-bind="timepickerInputWrapperAttrs">
-        <input
-          ref="hoursRef"
-          type="text"
-          v-bind="timepickerLeftInputAttrs"
-          @input.prevent="onTimeInput($event, INPUT_TYPE.hours, MAX_HOURS, MIN_HOURS)"
-          @keydown="onTimeKeydown"
-        />
-        &#8282;
-        <input
-          ref="minutesRef"
-          type="text"
-          v-bind="timepickerRightInputAttrs"
-          @input.prevent="onTimeInput($event, INPUT_TYPE.minutes, MAX_MINUTES, MIN_MINUTES)"
-          @keydown="onTimeKeydown"
-        />
-      </div>
-
-      <UButton v-bind="submitButtonAttrs" @click="onClickSubmit">
-        {{ locale.okLabel }}
-      </UButton>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, ref, watch } from "vue";
-
-import {
-  parseDate,
-  formatDate,
-  getYearsRange,
-  dateIsOutOfRange,
-  isNumeric,
-} from "./services/calendar.service";
-import {
-  getUnixTimestampFromDate,
-  getDateWithoutTime,
-  addMonths,
-  addDays,
-  addYears,
-  getSortedLocale,
-} from "./services/date.service";
-import UIService from "vueless/service.ui";
-
-import useAttrs from "./composables/attrs.composable";
-
-import {
-  UCalendar,
-  VIEW,
-  KEY_CODE,
-  YEARS_PER_VIEW,
-  MAX_HOURS,
-  MIN_HOURS,
-  MAX_MINUTES,
-  MIN_MINUTES,
-  SEPARATOR,
-  INPUT_TYPE,
-  LOCALE_TYPE,
-} from "./constants";
-
-import defaultConfig from "./configs/default.config";
-
-import DayView from "./components/DayView.vue";
-import MonthView from "./components/MonthView.vue";
-import YearView from "./components/YearView.vue";
-
-defineOptions({ name: "UCalendar" });
-
-const props = defineProps({
-  /**
-   * Calendar value (timestamp).
-   */
-  modelValue: {
-    type: Number,
-    default: null,
-  },
-
-  /**
-   * Calendar view.
-   * @values day, month, year
-   */
-  view: {
-    type: String,
-    default: VIEW.day,
-  },
-
-  /**
-   * Enable range selection.
-   * TODO: Make it work
-   */
-  range: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UCalendar).default.range,
-  },
-
-  /**
-   * Enable timepicker.
-   */
-  timepicker: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UCalendar).default.timepicker,
-  },
-
-  /**
-   * Date format.
-   */
-  dateFormat: {
-    type: String,
-    default: UIService.get(defaultConfig, UCalendar).default.dateFormat,
-  },
-
-  /**
-   * User friendly date format.
-   */
-  userFormat: {
-    type: String,
-    default: UIService.get(defaultConfig, UCalendar).default.userFormat,
-  },
-
-  /**
-   * Min date in format date string or Date.
-   */
-  minDate: {
-    type: [Date, String],
-    default: UIService.get(defaultConfig, UCalendar).default.minDate,
-  },
-
-  /**
-   * Max date in format date string or Date.
-   */
-  maxDate: {
-    type: [Date, String],
-    default: UIService.get(defaultConfig, UCalendar).default.maxDate,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  "update:modelValue",
-  "update:view",
-  "input",
-  "submit",
-  "keydown",
-  "userDateChange",
-  "formattedDateChange",
-]);
-
-const {
-  config,
-  wrapperAttrs,
-  navigationAttrs,
-  navigationSwitchViewButtonAttrs,
-  dayViewSwitchLabelAttrs,
-  dayViewSwitchLabelMonthAttrs,
-  dayViewSwitchLabelIconAttrs,
-  nextIconAttrs,
-  nextPrevButtonAttrs,
-  prevIconAttrs,
-  timepickerWrapperAttrs,
-  timepickerLabelAttrs,
-  timepickerInputWrapperAttrs,
-  timepickerLeftInputAttrs,
-  timepickerRightInputAttrs,
-  submitButtonAttrs,
-  nextPrevWrapperAttrs,
-} = useAttrs(props);
-
-const wrapperRef = ref(null);
-const hoursRef = ref(null);
-const minutesRef = ref(null);
-
-const activeDate = ref(null);
-const activeMonth = ref(null);
-
-defineExpose({ wrapperRef });
-
-const currentView = computed({
-  get: () => props.view,
-  set: (value) => emit("update:view", value),
-});
-
-const isCurrentView = computed(() => ({
-  day: currentView.value === VIEW.day,
-  month: currentView.value === VIEW.month,
-  year: currentView.value === VIEW.year,
-}));
-
-const locale = computed(() => {
-  const currentLocale = props.config.i18n || config.value.i18n;
-  const formattedLocale = {
-    ...currentLocale,
-    months: {
-      shorthand: getSortedLocale(currentLocale.months.shorthand, LOCALE_TYPE.month),
-      longhand: getSortedLocale(currentLocale.months.longhand, LOCALE_TYPE.month),
-    },
-    weekdays: {
-      shorthand: getSortedLocale(currentLocale.weekdays.shorthand, LOCALE_TYPE.day),
-      longhand: getSortedLocale(currentLocale.weekdays.longhand, LOCALE_TYPE.day),
-    },
-  };
-
-  return formattedLocale;
-});
-
-const localValue = computed({
-  get: () => props.modelValue,
-  set(value) {
-    const parsedDate = parseDate(value, props.dateFormat, locale.value);
-
-    if (parsedDate && props.timepicker) {
-      parsedDate.setHours(Number(hoursRef.value.value));
-      parsedDate.setMinutes(Number(minutesRef.value.value));
-    }
-
-    const timestamp = parsedDate ? getUnixTimestampFromDate(parsedDate) : null;
-
-    const isOutOfRange = dateIsOutOfRange(
-      parsedDate || new Date(),
-      props.minDate,
-      props.maxDate,
-      locale.value,
-      props.dateFormat,
-    );
-
-    if (isOutOfRange) {
-      return;
-    }
-
-    emit("update:modelValue", timestamp);
-
-    if (parsedDate === null && props.timepicker) {
-      const currentDate = new Date();
-
-      hoursRef.value.value = String(currentDate.getHours()).padStart(2, "0");
-      minutesRef.value.value = String(currentDate.getMinutes()).padStart(2, "0");
-    }
-  },
-});
-
-const selectedDate = computed(() => {
-  return parseDate(props.modelValue, props.dateFormat, locale.value);
-});
-
-const formattedDate = computed(() => {
-  return formatDate(selectedDate.value, props.dateFormat, locale.value);
-});
-
-const formattedTime = computed(() => {
-  const hours = String(selectedDate.value?.getHours()).padStart(2, "0");
-  const minutes = String(selectedDate.value?.getMinutes()).padStart(2, "0");
-
-  return selectedDate.value ? `${hours}:${minutes}` : "";
-});
-
-const userFormattedDate = computed(() => {
-  const date = formatDate(selectedDate.value, props.userFormat, locale.value);
-
-  return props.timepicker && selectedDate.value
-    ? `${date} ${SEPARATOR} ${formattedTime.value}`
-    : date;
-});
-
-const viewSwitchLabel = computed(() => {
-  const localValue =
-    activeDate.value || activeMonth.value || selectedDate.value || getDateWithoutTime();
-
-  return {
-    year: formatDate(localValue, "Y", locale.value),
-    month: formatDate(localValue, "F", locale.value),
-    yearsRange: getYearsRange(localValue || getDateWithoutTime()).join(` ${SEPARATOR} `),
-  };
-});
-
-watch(userFormattedDate, () => {
-  emit("userDateChange", userFormattedDate.value);
-});
-
-watch(formattedDate, () => {
-  emit("formattedDateChange", userFormattedDate.value);
-});
-
-onMounted(() => {
-  if (selectedDate.value && props.timepicker) {
-    hoursRef.value.value = String(selectedDate.value.getHours()).padStart(2, "0");
-    minutesRef.value.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
-  }
-
-  emit("userDateChange", userFormattedDate.value);
-  emit("formattedDateChange", userFormattedDate.value);
-});
-
-function onInputDate(newDate) {
-  if (newDate === null) {
-    localValue.value = newDate;
-
-    activeDate.value = null;
-    activeMonth.value = null;
-
-    emit("input", localValue.value);
-
-    return;
-  }
-
-  const date = new Date(newDate.valueOf());
-
-  localValue.value = date;
-
-  activeDate.value = null;
-  activeMonth.value = null;
-
-  emit("input", localValue.value);
-
-  wrapperRef.value.focus();
-}
-
-function onKeydown(event) {
-  if ([KEY_CODE.left, KEY_CODE.up, KEY_CODE.right, KEY_CODE.down].includes(event.keyCode)) {
-    arrowKeyHandler(event);
-
-    minutesRef.value?.blur();
-    hoursRef.value?.blur();
-  }
-
-  if (event.keyCode === KEY_CODE.enter) {
-    enterKeyHandler(event);
-  }
-
-  if (isNumeric(event.key) && document.activeElement !== minutesRef.value) {
-    hoursRef.value?.focus();
-  }
-
-  emit("keydown", event);
-}
-
-function onInput(date) {
-  activeDate.value = null;
-  activeMonth.value = date;
-
-  if (isCurrentView.value.month) currentView.value = VIEW.day;
-  if (isCurrentView.value.year) currentView.value = VIEW.month;
-}
-
-function arrowKeyHandler(event) {
-  const currentActiveDate =
-    activeDate.value || activeMonth.value || selectedDate.value || getDateWithoutTime();
-
-  let newActiveDate;
-
-  if (currentView.value === VIEW.day) {
-    if (event.keyCode === KEY_CODE.down) {
-      newActiveDate = addDays(currentActiveDate, 7);
-    } else if (event.keyCode === KEY_CODE.left) {
-      newActiveDate = addDays(currentActiveDate, -1);
-    } else if (event.keyCode === KEY_CODE.up) {
-      newActiveDate = addDays(currentActiveDate, -7);
-    } else if (event.keyCode === KEY_CODE.right) {
-      newActiveDate = addDays(currentActiveDate, 1);
-    }
-  } else if (currentView.value === VIEW.month) {
-    if (event.keyCode === KEY_CODE.down) {
-      newActiveDate = addMonths(currentActiveDate, 4);
-    } else if (event.keyCode === KEY_CODE.left) {
-      newActiveDate = addMonths(currentActiveDate, -1);
-    } else if (event.keyCode === KEY_CODE.up) {
-      newActiveDate = addMonths(currentActiveDate, -4);
-    } else if (event.keyCode === KEY_CODE.right) {
-      newActiveDate = addMonths(currentActiveDate, 1);
-    }
-  } else if (currentView.value === VIEW.year) {
-    if (event.keyCode === KEY_CODE.down) {
-      newActiveDate = addYears(currentActiveDate, 4);
-    } else if (event.keyCode === KEY_CODE.left) {
-      newActiveDate = addYears(currentActiveDate, -1);
-    } else if (event.keyCode === KEY_CODE.up) {
-      newActiveDate = addYears(currentActiveDate, -4);
-    } else if (event.keyCode === KEY_CODE.right) {
-      newActiveDate = addYears(currentActiveDate, 1);
-    }
-  }
-
-  const isOutOfRange = dateIsOutOfRange(
-    newActiveDate,
-    props.minDate,
-    props.maxDate,
-    locale.value,
-    props.dateFormat,
-  );
-
-  if (newActiveDate && !isOutOfRange) {
-    activeDate.value = newActiveDate;
-    activeMonth.value = newActiveDate;
-  }
-}
-
-function addActiveMonth(amount) {
-  const currentActiveMonth = activeMonth.value || selectedDate.value || getDateWithoutTime();
-  const newActiveMonth = addMonths(currentActiveMonth, amount);
-
-  activeMonth.value = newActiveMonth;
-}
-
-function addActiveYear(amount) {
-  const currentActiveMonth = activeMonth.value || selectedDate.value || getDateWithoutTime();
-  const newActiveMonth = addYears(currentActiveMonth, amount);
-
-  activeMonth.value = newActiveMonth;
-}
-
-function onClickNextButton() {
-  activeDate.value = null;
-
-  if (isCurrentView.value.day) addActiveMonth(1);
-  if (isCurrentView.value.month) addActiveYear(1);
-  if (isCurrentView.value.year) addActiveYear(YEARS_PER_VIEW);
-}
-
-function onClickPrevButton() {
-  activeDate.value = null;
-
-  if (isCurrentView.value.day) addActiveMonth(-1);
-  if (isCurrentView.value.month) addActiveYear(-1);
-  if (isCurrentView.value.year) addActiveYear(YEARS_PER_VIEW * -1);
-}
-
-function enterKeyHandler() {
-  if (activeDate.value !== null && isCurrentView.value.day) {
-    localValue.value = activeDate.value;
-
-    activeDate.value = null;
-    activeMonth.value = null;
-
-    emit("input", localValue.value);
-  }
-
-  if (isCurrentView.value.month) currentView.value = VIEW.day;
-  if (isCurrentView.value.year) currentView.value = VIEW.month;
-}
-
-function onClickViewSwitch() {
-  const views = Object.values(VIEW);
-  const currentViewIndex = views.indexOf(currentView.value);
-  const nextViewIndex = currentViewIndex + 1;
-
-  activeDate.value = null;
-
-  currentView.value = views[nextViewIndex] || views.at(0);
-}
-
-let lastValidHourValue = "";
-let lastValidMinuteValue = "";
-
-function onTimeKeydown(event) {
-  if ([KEY_CODE.left, KEY_CODE.up, KEY_CODE.right, KEY_CODE.down].includes(event.keyCode)) {
-    wrapperRef.value.focus();
-
-    return;
-  }
-
-  if (event.keyCode === KEY_CODE.enter) {
-    enterKeyHandler(event);
-
-    emit("submit");
-  }
-}
-
-function onClickSubmit() {
-  emit("submit");
-}
-
-function onTimeInput(event, type, maxValue, minValue) {
-  const input = event.target;
-  const value = input.value;
-  const numericValue = Number(value);
-
-  const isHours = type === INPUT_TYPE.hours;
-
-  if (!isNumeric(event.data)) {
-    input.value = isHours ? lastValidHourValue : lastValidMinuteValue;
-
-    return;
-  }
-
-  if (numericValue > maxValue || numericValue < minValue) {
-    input.value = "0".padStart(2, "0");
-
-    return;
-  }
-
-  isHours ? (lastValidHourValue = numericValue) : (lastValidMinuteValue = numericValue);
-
-  if (selectedDate.value) {
-    const date = new Date(selectedDate.value.valueOf());
-
-    date.setHours(lastValidHourValue, lastValidMinuteValue);
-    localValue.value = date;
-  }
-
-  input.value = String(numericValue).padStart(2, "0");
-}
-</script>