import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import {
TInput,
TTextarea,
// TSelect,
// TRadio,
// TCheckbox,
TButton,
TInputGroup,
// TCard,
TAlert,
TModal,
TDropdown,
// TRichSelect,
// TPagination,
// TTag,
// TRadioGroup,
// TCheckboxGroup,
// TTable,
// TDatepicker,
TToggle,
// TDialog,
} from 'vue-tailwind/dist/components'
const settings = {
't-input': {
component: TInput,
props: {
classes:
'block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:border-gray-600 dark:text-white',
},
},
't-textarea': {
component: TTextarea,
props: {
classes:
'block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:border-gray-600',
},
},
't-button': {
component: TButton,
props: {
fixedClasses:
'block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
classes:
'text-white bg-blue-500 border border-transparent shadow-sm rounded hover:bg-blue-600',
variants: {
text:
'block px-4 py-2 transition duration-100 ease-in-out rounded hover:shadow-sm hover:underline hover:bg-white hover:bg-opacity-50 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
custom:
'block px-4 py-2 text-white transition duration-100 ease-in-out border border-transparent rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
success:
'text-white bg-green-500 border border-transparent shadow-sm rounded hover:bg-green-600 block px-4 py-2 transition duration-100 ease-in-out focus:border-green-500 focus:ring-2 focus:ring-green-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
},
},
},
't-input-group': {
component: TInputGroup,
props: {
fixedClasses: {
label:
'block font-semibold mb-0.5 ml-0.5 text-gray-600 text-sm dark:text-gray-300',
feedback: 'text-xs text-gray-600 mt-0.5 ml-0.5',
description: 'text-xs text-gray-400 mt-0.5 ml-0.5',
},
classes: {
feedback: '',
description: '',
},
},
},
't-alert': {
component: TAlert,
props: {
fixedClasses: {
wrapper: 'relative flex items-center p-4 border-l-4 rounded shadow-sm',
body: 'flex-grow',
close:
'absolute relative flex items-center justify-center ml-4 flex-shrink-0 w-6 h-6 transition duration-100 ease-in-out rounded focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
closeIcon: 'fill-current h-4 w-4',
},
classes: {
wrapper: 'bg-blue-50 border-blue-500',
body: 'text-blue-700',
close: 'text-blue-500 hover:bg-blue-200',
},
variants: {
danger: {
wrapper: 'bg-red-50 border-red-500',
body: 'text-red-700',
close: 'text-red-500 hover:bg-red-200',
},
success: {
wrapper: 'bg-green-50 border-green-500',
body: 'text-green-700',
close: 'text-green-500 hover:bg-green-200',
},
},
},
},
't-toast': {
component: TAlert,
props: {
fixedClasses: {
wrapper:
'fixed top-20 right-4 flex items-center p-4 border-l-4 rounded shadow-sm',
body: 'flex-grow',
close:
'absolute relative flex items-center justify-center ml-4 flex-shrink-0 w-6 h-6 transition duration-100 ease-in-out rounded focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
closeIcon: 'fill-current h-4 w-4',
},
classes: {
wrapper: 'bg-blue-50 border-blue-500',
body: 'text-blue-700',
close: 'text-blue-500 hover:bg-blue-200',
},
variants: {
danger: {
wrapper: 'bg-red-50 border-red-500',
body: 'text-red-700',
close: 'text-red-500 hover:bg-red-200',
},
success: {
wrapper: 'bg-green-50 border-green-500',
body: 'text-green-700',
close: 'text-green-500 hover:bg-green-200',
},
},
},
},
't-modal': {
component: TModal,
props: {
fixedClasses: {
overlay:
'z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
wrapper: 'relative mx-auto z-50 max-w-lg px-3 py-12',
modal: 'overflow-visible relative rounded',
body: 'p-3',
header: 'border-b p-3 rounded-t',
footer: ' p-3 rounded-b',
close:
'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
},
classes: {
overlay: 'bg-black',
wrapper: '',
modal: 'bg-white shadow',
body: 'p-3',
header: 'border-gray-100',
footer: 'bg-gray-100',
close: 'bg-gray-100 text-gray-600 hover:bg-gray-200',
closeIcon: 'fill-current h-4 w-4',
overlayEnterClass: '',
overlayEnterActiveClass: 'opacity-0 transition ease-out duration-100',
overlayEnterToClass: 'opacity-100',
overlayLeaveClass: 'transition ease-in opacity-100',
overlayLeaveActiveClass: '',
overlayLeaveToClass: 'opacity-0 duration-75',
enterClass: '',
enterActiveClass: '',
enterToClass: '',
leaveClass: '',
leaveActiveClass: '',
leaveToClass: '',
},
variants: {
large: {
modal: 'bg-white shadow rounded dark:bg-gray-600',
wrapper: 'relative mx-auto z-50 max-w-4xl px-3 py-12',
header:
'border-b p-3 rounded-t text-xl font-bold dark:border-gray-500',
footer: 'bg-gray-100 p-3 rounded-b dark:bg-gray-700',
},
},
},
},
't-dropdown': {
component: TDropdown,
},
't-toggle': {
component: TToggle,
props: {
variants: {
dark: {
wrapper:
'bg-gray-200 rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
wrapperChecked:
'bg-gray-700 rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
buttonChecked:
'h-5 w-5 rounded-full bg-gray-500 shadow flex items-center justify-center text-blue-500 text-xs',
},
},
},
},
}
Vue.use(VueTailwind, settings)