vueless 0.0.3 → 0.0.4

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

@@ -1,114 +0,0 @@
-<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

@@ -1,118 +0,0 @@
-<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

@@ -1,87 +0,0 @@
-import useUI from "vueless/composable.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export default function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-
-  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 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");
-
-  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,
-    monthViewWrapperAttrs,
-    selectedMonthAttrs,
-    activeMonthAttrs,
-    monthAttrs,
-    yearViewWrapperAttrs,
-    selectedYearAttrs,
-    activeYearAttrs,
-    yearAttrs,
-    timepickerWrapperAttrs,
-    timepickerLabelAttrs,
-    timepickerInputWrapperAttrs,
-    timepickerLeftInputAttrs,
-    timepickerRightInputAttrs,
-    submitButtonAttrs,
-    nextPrevWrapperAttrs,
-  };
-}

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

@@ -1,115 +0,0 @@
-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: "flex",
-  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 size-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
-  activeDay: "bg-gray-100 hover:bg-gray-100",
-  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

@@ -1,69 +0,0 @@
-/*
-  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 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

@@ -1,50 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UCalendar from "vueless/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 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 };