vueless 0.0.10 → 0.0.12

package/ui.form-calendar/components/MonthView.vue

@@ -0,0 +1,114 @@
+<template>
+  <div v-bind="monthViewWrapperAttrs">
+    <button
+      v-for="month in months"
+      :key="month"
+      :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+      v-bind="monthAttrs(getMonthClasses(month))"
+      @click="onClickMonth(month)"
+      @mousedown.prevent.capture
+      v-text="formatDate(month, 'M', props.locale)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
+import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+
+import useAttrs from "../composables/attrs.composable";
+
+import { MONTHS_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 { monthViewWrapperAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs } = useAttrs(props);
+
+const localSelectedDate = computed(() => {
+  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
+});
+
+const localActiveMonth = computed(
+  () => props.activeMonth || props.activeDate || localSelectedDate.value,
+);
+
+const months = computed(() =>
+  Array.from({ length: MONTHS_PER_VIEW }, (_, i) => i).map((monthNumber) => getMonth(monthNumber)),
+);
+
+function getMonth(monthNumber) {
+  let newDate = new Date(localActiveMonth.value.valueOf());
+
+  newDate.setMonth(monthNumber);
+
+  // 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 getMonthClasses(day) {
+  if (isSelectedMonth(day)) {
+    return [selectedMonthAttrs.value.class];
+  }
+
+  if (isSameMonth(props.activeMonth, day)) {
+    return [activeMonthAttrs.value.class];
+  }
+}
+
+function isSelectedMonth(month) {
+  return isSameMonth(month, localSelectedDate.value);
+}
+
+function onClickMonth(month) {
+  emit("input", month);
+}
+</script>

package/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/ui.form-calendar/composables/attrs.composable.js

@@ -0,0 +1,106 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import { computed } from "vue";
+
+import defaultConfig from "../configs/default.config";
+
+export default function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { nextPrevWrapper } = config.value;
+
+  const cvaNextPrevWrapper = cva({
+    base: nextPrevWrapper.base,
+    variants: nextPrevWrapper.variants,
+    compoundVariants: nextPrevWrapper.compoundVariants,
+  });
+
+  const optionClasses = computed(() => cvaNextPrevWrapper({ range: props.range }));
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const navigationAttrs = getAttrs("navigation");
+  const navigationSwitchViewButtonAttrs = getAttrs("navigationSwitchViewButton");
+  const dayViewSwitchLabelAttrs = getAttrs("dayViewSwitchLabel");
+  const dayViewSwitchLabelMonthAttrs = getAttrs("dayViewSwitchLabelMonth");
+  const dayViewSwitchLabelIconAttrs = getAttrs("dayViewSwitchLabelIcon");
+  const nextPrevButtonAttrs = getAttrs("nextPrevButton");
+  const nextIconAttrs = getAttrs("nextIcon");
+  const prevIconAttrs = getAttrs("prevIcon");
+  const dayViewWrapperAttrs = getAttrs("dayViewWrapper");
+  const weekDaysWrapperAttrs = getAttrs("weekDaysWrapper");
+  const weekDayAttrs = getAttrs("weekDay");
+  const daysWrapperAttrs = getAttrs("daysWrapper");
+  const activeDayAttrs = getAttrs("activeDay");
+  const selectedDayAttrs = getAttrs("selectedDay");
+  const currentDayAttrs = getAttrs("currentDay");
+  const inRangeDayAttrs = getAttrs("inRangeDay");
+  const inRangeFirstDayAttrs = getAttrs("inRangeFirstDay");
+  const inRangeLastDayAttrs = getAttrs("inRangeLastDay");
+  const anotherMonthDayAttrs = getAttrs("anotherMonthDay");
+  const monthViewWrapperAttrs = getAttrs("monthViewWrapper");
+  const selectedMonthAttrs = getAttrs("selectedMonth");
+  const activeMonthAttrs = getAttrs("activeMonth");
+  const yearViewWrapperAttrs = getAttrs("yearViewWrapper");
+  const selectedYearAttrs = getAttrs("selectedYear");
+  const activeYearAttrs = getAttrs("activeYear");
+  const timepickerWrapperAttrs = getAttrs("timepickerWrapper");
+  const timepickerLabelAttrs = getAttrs("timepickerLabel");
+  const timepickerInputWrapperAttrs = getAttrs("timepickerInputWrapper");
+  const timepickerLeftInputAttrs = getAttrs("timepickerLeftInput");
+  const timepickerRightInputAttrs = getAttrs("timepickerRightInput");
+  const submitButtonAttrs = getAttrs("submitButton");
+
+  const nextPrevWrapperAttrs = getAttrs("nextPrevWrapper", { classes: optionClasses.value });
+
+  const dayAttrs = (classes = []) => {
+    return getAttrs("day", { classes }).value;
+  };
+
+  const monthAttrs = (classes = []) => {
+    return getAttrs("month", { classes }).value;
+  };
+
+  const yearAttrs = (classes = []) => {
+    return getAttrs("year", { classes }).value;
+  };
+
+  return {
+    config,
+    wrapperAttrs,
+    navigationAttrs,
+    navigationSwitchViewButtonAttrs,
+    dayViewSwitchLabelAttrs,
+    dayViewSwitchLabelMonthAttrs,
+    dayViewSwitchLabelIconAttrs,
+    nextIconAttrs,
+    nextPrevButtonAttrs,
+    prevIconAttrs,
+    dayViewWrapperAttrs,
+    weekDaysWrapperAttrs,
+    weekDayAttrs,
+    daysWrapperAttrs,
+    activeDayAttrs,
+    selectedDayAttrs,
+    currentDayAttrs,
+    anotherMonthDayAttrs,
+    dayAttrs,
+    inRangeDayAttrs,
+    inRangeFirstDayAttrs,
+    inRangeLastDayAttrs,
+    monthViewWrapperAttrs,
+    selectedMonthAttrs,
+    activeMonthAttrs,
+    monthAttrs,
+    yearViewWrapperAttrs,
+    selectedYearAttrs,
+    activeYearAttrs,
+    yearAttrs,
+    timepickerWrapperAttrs,
+    timepickerLabelAttrs,
+    timepickerInputWrapperAttrs,
+    timepickerLeftInputAttrs,
+    timepickerRightInputAttrs,
+    submitButtonAttrs,
+    nextPrevWrapperAttrs,
+  };
+}

package/ui.form-calendar/configs/default.config.js

@@ -0,0 +1,125 @@
+export default /*tw*/ {
+  wrapper: "w-fit overflow-hidden rounded-lg border focus:outline-none border-gray-300 bg-white px-1 pb-4 shadow",
+  navigation: "flex items-center justify-between px-3 pt-2",
+  navigationSwitchViewButton: "",
+  dayViewSwitchLabel: "flex gap-1",
+  dayViewSwitchLabelMonth: "text-gray-900",
+  dayViewSwitchLabelIcon: "",
+  dayViewSwitchLabelIconName: "keyboard_arrow_right",
+  nextPrevWrapper: {
+    base: "flex",
+    variants: {
+      range: {
+        true: "justify-between items-center w-full",
+      },
+    },
+  },
+  nextPrevButton: "",
+  nextIcon: "",
+  nextIconName: "keyboard_arrow_right",
+  prevIcon: "",
+  prevIconName: "keyboard_arrow_left",
+  dayViewWrapper: "w-64 px-3 pt-2",
+  weekDaysWrapper: "grid grid-cols-7",
+  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
+  daysWrapper: "grid grid-cols-7",
+  day: "mx-auto w-full h-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  activeDay: "bg-gray-100 hover:bg-gray-100",
+  inRangeFirstDay: "rounded-none rounded-l-lg bg-gray-200 text-gray-900",
+  inRangeLastDay: "rounded-none rounded-r-lg bg-gray-200 text-gray-900",
+  inRangeDay: "bg-gray-100 text-gray-900 hover:bg-gray-100 rounded-none",
+  selectedDay: "bg-gray-900 text-white hover:bg-gray-900",
+  currentDay: "hover:bg-gray-100 border-2 border-gray-900",
+  anotherMonthDay: "hover:bg-gray-100 text-gray-400",
+  monthViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
+  month: `
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100
+    disabled:opacity-50 disabled:cursor-not-allowed
+  `,
+  selectedMonth: "bg-gray-900 hover:bg-gray-900 text-white",
+  activeMonth: "bg-gray-100",
+  yearViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
+  year: `
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100 
+    disabled:opacity-50 disabled:cursor-not-allowed
+  `,
+  selectedYear: "bg-gray-900 hover:bg-gray-900 text-white",
+  activeYear: "bg-gray-100",
+  timepickerWrapper: `
+  mx-2 -mb-1 mt-2 flex items-center justify-between gap-2 border-t border-gray-200 pl-2 pr-1 pt-3 text-sm
+  `,
+  timepickerLabel: "w-full",
+  timepickerInputWrapper: "flex items-center gap-px rounded-lg border border-gray-300",
+  timepickerLeftInput: `
+    w-11 rounded-l-lg border-none px-2.5 py-1.5 text-center text-sm focus:border-none focus:outline-none
+  `,
+  timepickerRightInput: `
+    w-11 rounded-r-lg border-none px-2.5 py-1.5 text-center text-sm focus:border-none focus:outline-none
+  `,
+  submitButton: `
+    rounded-lg border-none bg-gray-900/10 px-2.5 py-1.5 text-sm font-normal text-gray-900 outline-none
+    focus:ring-0 hover:bg-gray-900/10
+  `,
+  i18n: {
+    weekdays: {
+      shorthand: {
+        sunday: "Sun",
+        monday: "Mon",
+        tuesday: "Tue",
+        wednesday: "Wed",
+        thursday: "Thu",
+        friday: "Fri",
+        saturday: "Sat",
+      },
+      longhand: {
+        sunday: "Sunday",
+        monday: "Monday",
+        tuesday: "Tuesday",
+        wednesday: "Wednesday",
+        thursday: "Thursday",
+        friday: "Friday",
+        saturday: "Saturday",
+      },
+    },
+    months: {
+      shorthand: {
+        january: "Jan",
+        february: "Feb",
+        march: "Mar",
+        april: "Apr",
+        may: "May",
+        june: "Jun",
+        july: "Jul",
+        august: "Aug",
+        september: "Sep",
+        october: "Oct",
+        november: "Nov",
+        december: "Dec",
+      },
+      longhand: {
+        january: "January",
+        february: "February",
+        march: "March",
+        april: "April",
+        may: "May",
+        june: "June",
+        july: "July",
+        august: "August",
+        september: "September",
+        october: "October",
+        november: "November",
+        december: "December",
+      },
+    },
+    timeLabel: "Time",
+    okLabel: "Ok",
+  },
+  defaultVariants: {
+    dateFormat: "Y-m-d",
+    userFormat: "F j, Y",
+    range: false,
+    timepicker: false,
+    maxDate: undefined,
+    minDate: undefined,
+  },
+};

package/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/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 };