vueless/ui.form-calendar/config.ts

Vue Styleless UI Component Library, powered by Tailwind CSS.

export default /*tw*/ {
  wrapper: "p-3 w-[19rem] border border-default rounded-medium bg-default shadow-sm overflow-hidden focus:outline-hidden",
  navigation: "mb-2 pb-2 border-b border-muted flex items-center justify-between",
  viewSwitchButton: {
    base: "{UButton}",
    variants: {
      range: {
        true: "pointer-events-none",
      },
    },
  },
  nextPrevButton: "{UButton}",
  dayView: "",
  weekDays: "grid grid-cols-7 justify-items-center gap-1",
  weekDay: "flex size-8 items-center justify-center text-small capitalize text-lifted font-medium",
  days: {
    base: "grid grid-cols-7 justify-items-center gap-0.5",
    variants: {
      range: {
        true: "gap-0 gap-y-0.5",
      },
    },
  },
  dateInRange: "bg-primary/10 text-default hover:bg-primary/15 rounded-none",
  edgeDateInRange: "",
  firstDateInRange: "rounded-r-none",
  lastDateInRange: "rounded-l-none",
  anotherMonthDate: "text-muted",
  activeDate: "bg-primary/10",
  selectedDate: "",
  currentDate: "border-2 border-primary",
  day: "{UButton} size-9 w-full",
  currentDay: "{>day} {>currentDate}",
  dayInRange: "{>day} {>dateInRange}",
  currentDayInRange: "{>day} {>dateInRange} {>currentDate}",
  anotherMonthDay: "{>day} {>anotherMonthDate} font-normal",
  anotherMonthDayInRange: "{>day} {>dateInRange} {>anotherMonthDate} font-normal",
  firstDayInRange: "{>day} {>edgeDateInRange} {>firstDateInRange}",
  anotherMonthFirstDayInRange: "{>day} {>edgeDateInRange} {>firstDateInRange}",
  lastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange}",
  anotherMonthLastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange}",
  selectedDay: "{>day} {>selectedDate}",
  activeDay: "{>day} {>activeDate}",
  monthView: "grid grid-rows-1 grid-cols-3 justify-items-center gap-1",
  month: "{UButton} mx-auto flex h-12 w-full",
  currentMonth: "{>month} {>currentDate}",
  selectedMonth: "{>month} {>selectedDate}",
  activeMonth: "{>month} {>activeDate}",
  yearView: "grid grid-rows-1 grid-cols-3 justify-items-center gap-1",
  year: "{UButton} mx-auto flex h-12 w-full",
  currentYear: "{>year} {>currentDate}",
  selectedYear: "{>year} {>selectedDate}",
  activeYear: "{>year} {>activeDate}",
  timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
  timepickerLabel: "w-full self-center",
  timepickerInputWrapper: `
    flex items-center rounded-medium border border-default
    hover:focus-within:border-primary focus-within:border-primary
    focus-within:outline focus-within:outline-small focus-within:outline-primary
  `,
  timepickerInput: "w-10 border-none px-1.5 py-1.5 text-center text-medium focus:outline-none bg-default",
  timepickerInputHours: "{>timepickerInput} rounded-l-medium",
  timepickerInputMinutes: "{>timepickerInput}",
  timepickerInputSeconds: "{>timepickerInput} rounded-r-medium",
  timepickerSubmitButton: "{UButton} py-2 border-0",
  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: {
    userDateFormat: "j F, Y",
    userDateTimeFormat: "j F, Y - H:i:S",
    dateFormat: undefined,
    dateTimeFormat: undefined,
    tabindex: 1,
    range: false,
    timepicker: false,
    /* icons */
    viewSwitchIcon: "keyboard_arrow_down",
    nextYearIcon: "keyboard_double_arrow_right",
    prevYearIcon: "keyboard_double_arrow_left",
    nextIcon: "keyboard_arrow_right",
    prevIcon: "keyboard_arrow_left",
  },
};