vueless/ui.form-date-picker/config.ts

Vue Styleless UI Component Library, powered by Tailwind CSS.

export default /*tw*/ {
  wrapper: "relative",
  datepickerInput: "{UInput}",
  datepickerInputActive: {
    base: "{UInput} {>datepickerInput}",
    wrapper: {
      base: "outline outline-small outline-primary border-primary hover:border-primary",
      variants: {
        error: {
          true: "outline-error border-error hover:border-error",
        },
      },
    },
  },
  rightIcon: {
    base: "{UIcon}",
    defaults: {
      size: {
        sm: "xs",
        md: "sm",
        lg: "md",
      },
    },
  },
  datepickerCalendar: {
    base: "{UCalendar} absolute mb-3 z-40",
    variants: {
      openDirectionX: {
        left: "left-0 right-auto",
        right: "right-0 left-auto",
      },
      openDirectionY: {
        top: "bottom-full mt-0",
        bottom: "top-full mb-0",
      },
      error: { true: "-mt-3" },
      description: { true: "-mt-3" },
    },
    compoundVariants: [{ description: false, error: false, class: "mt-2" }],
  },
  datepickerCalendarTransition: {
    enterFromClass: "opacity-0 scale-95",
    enterActiveClass: "transition transform ease-out duration-100",
    enterToClass: "opacity-100 scale-100",
    leaveFromClass: "opacity-100 scale-100",
    leaveActiveClass: "transition transform ease-in duration-75",
    leaveToClass: "opacity-0 scale-95",
  },
  i18n: {
    today: "Today",
    yesterday: "Yesterday",
    tomorrow: "Tomorrow",
    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",
      },
      userFormat: {
        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",
      },
      userFormat: {
        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",
  },
  defaults: {
    size: "md",
    userDateFormat: "r, j F, Y",
    userDateTimeFormat: "r, j F, Y - H:i:S",
    dateFormat: undefined,
    dateTimeFormat: undefined,
    openDirectionX: "auto",
    openDirectionY: "auto",
    labelAlign: "topInside",
    maxDate: undefined,
    minDate: undefined,
    timepicker: false,
    disabled: false,
    /* icons */
    calendarIcon: "calendar_month-fill",
  },
};