92 lines
6.6 KiB
JavaScript
92 lines
6.6 KiB
JavaScript
|
import Vue from 'vue'
|
||
|
|
|
||
|
|
import PortalVue from 'portal-vue'
|
||
|
|
|
||
|
|
import VueTailwind from 'vue-tailwind'
|
||
|
|
import TDatepicker from 'vue-tailwind/dist/t-datepicker'
|
||
|
|
|
||
|
|
Vue.use(PortalVue)
|
||
|
|
const settings = {
|
||
|
|
't-datepicker': {
|
||
|
|
component: TDatepicker,
|
||
|
|
props: {
|
||
|
|
classes: {
|
||
|
|
dropdown: 'origin-top-left absolute rounded shadow bg-white dark:bg-notion-dark dark:border-gray-100 border overflow-hidden mt-1',
|
||
|
|
wrapper: 'flex flex-col',
|
||
|
|
dropdownWrapper: 'relative z-10',
|
||
|
|
enterClass: 'opacity-0 scale-95',
|
||
|
|
enterActiveClass: 'transition transform ease-out duration-100',
|
||
|
|
enterToClass: 'opacity-100 scale-100',
|
||
|
|
leaveClass: 'opacity-100 scale-100',
|
||
|
|
leaveActiveClass: 'transition transform ease-in duration-75',
|
||
|
|
leaveToClass: 'opacity-0 scale-95',
|
||
|
|
inlineWrapper: '',
|
||
|
|
inlineViews: 'rounded bg-white border mt-1 inline-flex',
|
||
|
|
inputWrapper: '',
|
||
|
|
input: 'text-black placeholder-gray-400 border-gray-300',
|
||
|
|
clearButton: 'hover:bg-gray-100 rounded transition duration-100 ease-in-out text-gray-600',
|
||
|
|
clearButtonIcon: '',
|
||
|
|
viewGroup: '',
|
||
|
|
view: '',
|
||
|
|
navigator: 'pt-2 px-3',
|
||
|
|
navigatorViewButton: 'transition ease-in-out duration-100 inline-flex cursor-pointer rounded-full px-2 py-1 -ml-1 hover:bg-gray-100',
|
||
|
|
navigatorViewButtonIcon: 'fill-current text-gray-400',
|
||
|
|
navigatorViewButtonBackIcon: 'fill-current text-gray-400',
|
||
|
|
navigatorViewButtonMonth: 'text-gray-700 font-semibold',
|
||
|
|
navigatorViewButtonYear: 'text-gray-500 ml-1',
|
||
|
|
navigatorViewButtonYearRange: 'text-gray-500 ml-1',
|
||
|
|
navigatorLabel: 'py-1',
|
||
|
|
navigatorLabelMonth: 'text-gray-700 font-semibold',
|
||
|
|
navigatorLabelYear: 'text-gray-500 ml-1',
|
||
|
|
navigatorPrevButton: 'transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-100 rounded-full p-1 ml-2 ml-auto disabled:opacity-50 disabled:cursor-not-allowed',
|
||
|
|
navigatorNextButton: 'transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-100 rounded-full p-1 -mr-1 disabled:opacity-50 disabled:cursor-not-allowed',
|
||
|
|
navigatorPrevButtonIcon: 'text-gray-400',
|
||
|
|
navigatorNextButtonIcon: 'text-gray-400',
|
||
|
|
calendarWrapper: 'px-3 pt-2',
|
||
|
|
calendarHeaderWrapper: '',
|
||
|
|
calendarHeaderWeekDay: 'uppercase text-xs text-gray-500 w-8 h-8 flex items-center justify-center',
|
||
|
|
calendarDaysWrapper: '',
|
||
|
|
calendarDaysDayWrapper: 'w-full h-8 flex flex-shrink-0 items-center',
|
||
|
|
otherMonthDay: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 text-gray-400 disabled:opacity-50 disabled:cursor-not-allowed',
|
||
|
|
emptyDay: '',
|
||
|
|
inRangeFirstDay: 'text-sm bg-blue-500 text-white w-full h-8 rounded-l-full',
|
||
|
|
inRangeLastDay: 'text-sm bg-blue-500 text-white w-full h-8 rounded-r-full',
|
||
|
|
inRangeDay: 'text-sm bg-blue-200 w-full h-8 disabled:opacity-50 disabled:cursor-not-allowed',
|
||
|
|
selectedDay: 'text-sm rounded-full w-8 h-8 mx-auto bg-blue-500 text-white disabled:opacity-50 disabled:cursor-not-allowed',
|
||
|
|
activeDay: 'text-sm rounded-full bg-blue-100 w-8 h-8 mx-auto disabled:opacity-50 disabled:cursor-not-allowed',
|
||
|
|
highlightedDay: 'text-sm rounded-full bg-blue-200 w-8 h-8 mx-auto disabled:opacity-50 disabled:cursor-not-allowed',
|
||
|
|
day: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed',
|
||
|
|
today: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed border border-blue-500',
|
||
|
|
monthWrapper: 'px-3 pt-2',
|
||
|
|
selectedMonth: 'text-sm rounded w-full h-12 mx-auto bg-blue-500 text-white',
|
||
|
|
activeMonth: 'text-sm rounded w-full h-12 mx-auto bg-blue-100',
|
||
|
|
month: 'text-sm rounded w-full h-12 mx-auto hover:bg-blue-100',
|
||
|
|
yearWrapper: 'px-3 pt-2',
|
||
|
|
year: 'text-sm rounded w-full h-12 mx-auto hover:bg-blue-100',
|
||
|
|
selectedYear: 'text-sm rounded w-full h-12 mx-auto bg-blue-500 text-white',
|
||
|
|
activeYear: 'text-sm rounded w-full h-12 mx-auto bg-blue-100',
|
||
|
|
timepickerWrapper: 'flex items-center px-4 py-2 space-x-2',
|
||
|
|
timepickerTimeWrapper: 'flex items-center space-x-2',
|
||
|
|
timepickerTimeFieldsWrapper: 'bg-gray-100 dark:bg-notion-dark-light rounded-md w-full text-right flex items-center border border-gray-100 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
|
||
|
|
timepickerOkButton: 'text-blue-600 text-sm uppercase font-semibold transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded cursor-pointer',
|
||
|
|
timepickerInput: 'text-center w-8 border-transparent bg-transparent dark:bg-notion-dark-light p-0 h-6 text-sm transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded',
|
||
|
|
timepickerTimeLabel: 'flex-grow text-sm text-gray-500',
|
||
|
|
timepickerAmPmWrapper: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out bg-gray-100 dark:bg-notion-dark-light border border-transparent rounded cursor-pointer focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
|
||
|
|
timepickerAmPmWrapperChecked: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out bg-gray-100 dark:bg-notion-dark-light border border-transparent rounded cursor-pointer focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
|
||
|
|
timepickerAmPmWrapperDisabled: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out opacity-50 cursor-not-allowed',
|
||
|
|
timepickerAmPmWrapperCheckedDisabled: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out opacity-50 cursor-not-allowed',
|
||
|
|
timepickerAmPmButton: 'absolute flex items-center justify-center w-6 h-6 text-xs text-gray-800 transition duration-200 ease-in-out transform translate-x-0 bg-white rounded shadow',
|
||
|
|
timepickerAmPmButtonChecked: 'absolute flex items-center justify-center w-6 h-6 text-xs text-gray-800 transition duration-200 ease-in-out transform translate-x-full bg-white rounded shadow',
|
||
|
|
timepickerAmPmCheckedPlaceholder: 'flex items-center justify-center w-6 h-6 text-xs text-gray-500 rounded-sm',
|
||
|
|
timepickerAmPmUncheckedPlaceholder: 'flex items-center justify-center w-6 h-6 text-xs text-gray-500 rounded-sm'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Vue.use(VueTailwind, settings)
|
||
|
|
|
||
|
|
Vue.prototype.$getCrisp = () => {
|
||
|
|
return window.$crisp
|
||
|
|
}
|