vueless
Version:
Vue Styleless UI Component Library, powered by Tailwind CSS.
171 lines (170 loc) • 6.32 kB
text/typescript
export default /*tw*/ {
wrapper: "p-3 w-[19rem] border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
navigation: "mb-2 pb-2 border-b flex items-center justify-between",
viewSwitchButton: "{UButton}",
nextPrevButton: "{UButton}",
dayView: "",
weekDays: "grid grid-cols-7 justify-items-center gap-1",
weekDay: "flex size-8 items-center justify-center text-xs capitalize text-gray-500 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-brand-600/10 text-brand-900 hover:bg-brand/15 rounded-none",
edgeDateInRange: "",
firstDateInRange: "rounded-r-none",
lastDateInRange: "rounded-l-none",
anotherMonthDate: "text-gray-400",
activeDate: "bg-brand-600/10",
selectedDate: "",
currentDate: "border-2 border-brand-600",
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} {>anotherMonthDay} {>edgeDateInRange} {>firstDateInRange}",
lastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange}",
currentLastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
currentFirstDayInRange: "{>day} {>edgeDateInRange} {>firstDateInRange} {>currentDate}",
anotherMonthLastDayInRange: "{>day} {>anotherMonthDay} {>edgeDateInRange} {>lastDateInRange}",
selectedDay: "{>day} {>selectedDate}",
activeDay: "{>day} {>activeDate}",
monthView: "grid grid-cols-4 justify-items-center gap-1",
month: "{UButton} mx-auto flex h-12 w-full",
currentMonth: "{>month} {>currentDate}",
currentMonthInRange: "{>month} {>currentDate} {>dateInRange}",
currentLastMonthInRange: "{>month} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
currentFirstMonthInRange: "{>month} {>edgeDateInRange} {>firstDateInRange} {>currentDate}",
lastMonthInRange: "{>month} {>edgeDateInRange} {>lastDateInRange}",
firstMonthInRange: "{>month} {>edgeDateInRange} {>firstDateInRange}",
singleMonthInRange: "{>month} {>dateInRange} rounded-dynamic",
singleCurrentMonthInRange: "{>month} {>dateInRange} {>currentDate} rounded-dynamic",
monthInRange: "{>month} {>dateInRange}",
selectedMonth: "{>month} {>selectedDate}",
activeMonth: "{>month} {>activeDate}",
yearView: "grid grid-cols-4 justify-items-center gap-1",
year: "{UButton} mx-auto flex h-12 w-full",
currentYear: "{>year} {>currentDate}",
currentYearInRange: "{>year} {>currentDate} {>dateInRange}",
currentLastYearInRange: "{>year} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
currentFirstYearInRange: "{>year} {>edgeDateInRange} {>firstDateInRange} {>currentDate}",
lastYearInRange: "{>year} {>edgeDateInRange} {>lastDateInRange}",
firstYearInRange: "{>year} {>edgeDateInRange} {>firstDateInRange}",
yearInRange: "{>year} {>dateInRange}",
singleYearInRange: "{>year} {>dateInRange} rounded-dynamic",
singleCurrentYearInRange: "{>year} {>dateInRange} {>currentDate} rounded-dynamic",
selectedYear: "{>year} {>selectedDate}",
activeYear: "{>year} {>activeDate}",
timepicker: "mt-2 pl-1 pt-3 text-sm flex items-stretch justify-between gap-2 border-t border-gray-200",
timepickerLabel: "w-full self-center",
timepickerInputWrapper: `
flex items-center rounded-dynamic border border-gray-300
hover:focus-within:border-brand-600 focus-within:border-brand-600
focus-within:outline focus-within:outline-dynamic-sm focus-within:outline-brand-600
`,
timepickerInput: "w-10 border-none px-1.5 py-1.5 text-center text-sm focus:ring-0",
timepickerInputHours: "{>timepickerInput} rounded-l-dynamic",
timepickerInputMinutes: "{>timepickerInput}",
timepickerInputSeconds: "{>timepickerInput} rounded-r-dynamic",
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",
nextIcon: "keyboard_arrow_right",
prevIcon: "keyboard_arrow_left",
},
};