vueless 0.0.4 → 0.0.6

package/src/ui.form-calendar/components/YearView.vue

@@ -0,0 +1,118 @@
+<template>
+  <div v-bind="yearViewWrapperAttrs">
+    <button
+      v-for="year in years"
+      :key="year"
+      :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
+      v-bind="yearAttrs(getYearClasses(year))"
+      @mousedown.prevent.capture
+      @click="onClickMonth(year)"
+      v-text="formatDate(year, 'Y', props.locale)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { formatDate, getYearsRange, dateIsOutOfRange } from "../services/calendar.service";
+import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+
+import useAttrs from "../composables/attrs.composable";
+
+import { YEARS_PER_VIEW } from "../constants";
+
+const props = defineProps({
+  selectedDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeMonth: {
+    type: [Date, null],
+    required: true,
+  },
+
+  locale: {
+    type: Object,
+    required: true,
+  },
+
+  dateFormat: {
+    type: String,
+    required: true,
+  },
+
+  maxDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  minDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["input"]);
+
+const { yearViewWrapperAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs } = useAttrs(props);
+
+const localSelectedDate = computed(() => {
+  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
+});
+
+const localActiveMonth = computed(
+  () => props.activeMonth || props.activeDate || localSelectedDate.value,
+);
+
+const years = computed(() => {
+  const [initialYear] = getYearsRange(localActiveMonth.value, YEARS_PER_VIEW);
+
+  return Array.from({ length: YEARS_PER_VIEW }, (_, i) => i).map((year) =>
+    getYear(initialYear + year),
+  );
+});
+
+function getYear(year) {
+  let newDate = new Date(localActiveMonth.value.valueOf());
+
+  newDate.setFullYear(year);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== localActiveMonth.value.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+function getYearClasses(day) {
+  if (isSelectedMonth(day)) {
+    return [selectedYearAttrs.value.class];
+  }
+
+  if (isSameMonth(props.activeMonth, day)) {
+    return [activeYearAttrs.value.class];
+  }
+}
+
+function isSelectedMonth(month) {
+  return isSameMonth(month, localSelectedDate.value);
+}
+
+function onClickMonth(month) {
+  emit("input", month);
+}
+</script>

package/src/ui.form-calendar/constants/index.js

@@ -0,0 +1,71 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UCalendar = "UCalendar";
+
+export const YEARS_PER_VIEW = 12;
+export const MONTHS_PER_VIEW = 12;
+export const START_WEEK = 1;
+export const DAYS_IN_WEEK = 7;
+export const SECONDS_IN_MINUTES = 60;
+export const MILLISECONDS_IN_MINUTE = 60_000;
+
+export const MAX_HOURS = 23;
+export const MIN_HOURS = 0;
+export const MAX_MINUTES = 59;
+export const MIN_MINUTES = 0;
+export const SEPARATOR = "—";
+
+export const LOCALE_TYPE = {
+  day: "day",
+  month: "month",
+};
+
+export const VIEW = {
+  day: "day",
+  month: "month",
+  year: "year",
+};
+
+export const INPUT_TYPE = {
+  hours: "hours",
+  minutes: "minutes",
+};
+
+export const KEY_CODE = {
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  enter: 13,
+  esc: 27,
+  space: 32,
+  backspace: 8,
+};
+
+export const TOKEN_REG_EXP = {
+  D: "(\\w+)",
+  F: "(\\w+)",
+  G: "(\\d\\d|\\d)",
+  H: "(\\d\\d|\\d)",
+  J: "(\\d\\d|\\d)\\w+",
+  K: "",
+  M: "(\\w+)",
+  S: "(\\d\\d|\\d)",
+  U: "(.+)",
+  W: "(\\d\\d|\\d)",
+  Y: "(\\d{4})",
+  Z: "(.+)",
+  d: "(\\d\\d|\\d)",
+  h: "(\\d\\d|\\d)",
+  i: "(\\d\\d|\\d)",
+  j: "(\\d\\d|\\d)",
+  l: "(\\w+)",
+  m: "(\\d\\d|\\d)",
+  n: "(\\d\\d|\\d)",
+  s: "(\\d\\d|\\d)",
+  u: "(.+)",
+  w: "(\\d\\d|\\d)",
+  y: "(\\d{2})",
+};

package/src/ui.form-calendar/index.stories.js

@@ -0,0 +1,59 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UCalendar from "../ui.form-calendar";
+
+export default {
+  id: "3171",
+  title: "Form Inputs & Controls / Calendar",
+  component: UCalendar,
+  args: {
+    label: "Label",
+  },
+  argTypes: {
+    ...getArgTypes(UCalendar.name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "380px",
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UCalendar },
+  setup() {
+    const slots = getSlotNames(UCalendar.name);
+
+    return { args, slots };
+  },
+  template: `
+      <UCalendar v-bind="args" v-model="args.value">
+        <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+          <template v-if="args[slot]">{{ args[slot] }}</template>
+        </template>
+      </UCalendar>
+    `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Range = DefaultTemplate.bind({});
+Range.args = {
+  range: true,
+  value: {
+    from: 1651813634,
+    to: 1654492034,
+  },
+};
+
+export const Timepicker = DefaultTemplate.bind({});
+Timepicker.args = { value: 1645653600, timepicker: true };
+
+export const MinMax = DefaultTemplate.bind({});
+MinMax.args = { minDate: "2022-02-22", maxDate: "2022-02-26", value: 1645653600 };
+
+export const DateFormat = DefaultTemplate.bind({});
+DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: 1645653600 };