%PDF-
%PDF-
Mini Shell
Mini Shell
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-table': {
component: TTable,
props: {
classes: {
table: 'min-w-full divide-y divide-gray-100 shadow-sm border-gray-200 border',
thead: '',
theadTr: '',
theadTh: 'px-3 py-2 font-semibold text-left bg-gray-100 border-b',
tbody: 'bg-white divide-y divide-gray-100',
tr: '',
td: 'px-3 py-2 whitespace-no-wrap',
tfoot: '',
tfootTr: '',
tfootTd: ''
},
variants: {
thin: {
td: 'p-1 whitespace-no-wrap text-sm',
theadTh: 'p-1 font-semibold text-left bg-gray-100 border-b text-sm'
}
}
}
},
't-calendar': {
component: TDatepicker,
props: {
fixedClasses: {
navigator: 'flex',
navigatorViewButton: 'flex items-center',
navigatorViewButtonIcon: 'flex-shrink-0 h-5 w-5',
navigatorViewButtonBackIcon: 'flex-shrink-0 h-5 w-5',
navigatorLabel: 'flex items-center py-1',
navigatorPrevButtonIcon: 'h-6 w-6 inline-flex',
navigatorNextButtonIcon: 'h-6 w-6 inline-flex',
inputWrapper: 'hidden',
viewGroup: 'w-full inline-flex flex-wrap',
view: 'w-full mb-6',
calendarDaysWrapper: 'grid grid-cols-6 sm:grid-cols-7 gap-1 sm:gap-3',
calendarHeaderWrapper: 'grid grid-cols-7',
monthWrapper: 'grid grid-cols-4',
yearWrapper: 'grid grid-cols-4',
input: 'w-full px-4 py-3 leading-4 bg-white border border-black border-opacity-20 rounded-xl',
clearButton: 'flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6',
clearButtonIcon: 'fill-current h-3 w-3'
},
classes: {
wrapper: 'flex flex-col',
dropdownWrapper: 'relative z-10',
dropdown: 'origin-top-left absolute rounded shadow bg-white overflow-hidden mt-1',
enterClass: '',
enterActiveClass: 'transition ease-out duration-100 transform opacity-0 scale-95',
enterToClass: 'transform opacity-100 scale-100',
leaveClass: 'transition ease-in transform opacity-100 scale-100',
leaveActiveClass: '',
leaveToClass: 'transform opacity-0 scale-95 duration-75',
inlineWrapper: '',
inlineViews: 'w-full bg-white 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',
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: 'pt-2',
calendarHeaderWrapper: '',
calendarHeaderWeekDay: 'uppercase text-xs text-gray-500 w-8 h-8 flex items-center justify-center w-full',
calendarDaysWrapper: '',
calendarDaysDayWrapper: 'w-full h-10 flex flex-shrink-0 items-center',
otherMonthDay: 'calendar-item',
emptyDay: '',
inRangeFirstDay: 'text-sm bg-yellow text-white w-full h-8 rounded-l-full',
inRangeLastDay: 'text-sm bg-yellow text-white w-full h-8 rounded-r-full',
inRangeDay: 'text-sm bg-yellow w-full h-8 disabled:opacity-50 disabled:cursor-not-allowed',
selectedDay: 'calendar-item-active',
activeDay: 'calendar-item-active',
highlightedDay: 'calendar-item-active',
day: 'calendar-item',
today: 'cursor-not-allowed text-sm rounded-full w-10 h-10 mx-auto border border-yellow',
monthWrapper: 'px-3 pt-2',
selectedMonth: 'text-sm rounded w-full h-12 mx-auto bg-yellow text-white',
activeMonth: 'text-sm rounded w-full h-12 mx-auto bg-yellow',
month: 'text-sm rounded w-full h-12 mx-auto hover:bg-yellow',
yearWrapper: 'px-3 pt-2',
year: 'text-sm rounded w-full h-12 mx-auto hover:bg-yellow',
selectedYear: 'text-sm rounded w-full h-12 mx-auto bg-yellow text-white',
activeYear: 'text-sm rounded w-full h-12 mx-auto bg-yellow'
},
variants: {
danger: {
input: 'border-red-300 bg-red-50 placeholder-red-200 text-red-900',
clearButton: 'hover:bg-red-200 text-red-500'
}
}
}
},
't-datepicker': {
component: TDatepicker,
props: {
fixedClasses: {
navigator: 'flex',
navigatorViewButton: 'flex items-center',
navigatorViewButtonIcon: 'flex-shrink-0 h-5 w-5',
navigatorViewButtonBackIcon: 'flex-shrink-0 h-5 w-5',
navigatorLabel: 'flex items-center py-1',
navigatorPrevButtonIcon: 'h-6 w-6 inline-flex',
navigatorNextButtonIcon: 'h-6 w-6 inline-flex',
inputWrapper: '',
viewGroup: 'w-full inline-flex flex-wrap',
view: 'w-full mb-6',
calendarDaysWrapper: 'grid grid-cols-7 gap-3',
calendarHeaderWrapper: 'grid grid-cols-7',
monthWrapper: 'grid grid-cols-4',
yearWrapper: 'grid grid-cols-4',
input: 'w-full px-4 py-3 leading-4 bg-white border border-black border-opacity-20 rounded-xl',
clearButton: 'flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6',
clearButtonIcon: 'fill-current h-3 w-3'
},
classes: {
wrapper: 'flex flex-col',
dropdownWrapper: 'relative z-10',
dropdown: 'origin-top-left absolute rounded shadow bg-white overflow-hidden mt-1',
enterClass: '',
enterActiveClass: 'transition ease-out duration-100 transform opacity-0 scale-95',
enterToClass: 'transform opacity-100 scale-100',
leaveClass: 'transition ease-in transform opacity-100 scale-100',
leaveActiveClass: '',
leaveToClass: 'transform opacity-0 scale-95 duration-75',
inlineWrapper: '',
inlineViews: 'w-full bg-white 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',
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: 'pt-2',
calendarHeaderWrapper: '',
calendarHeaderWeekDay: 'uppercase text-xs text-gray-500 w-8 h-8 flex items-center justify-center w-full',
calendarDaysWrapper: '',
calendarDaysDayWrapper: 'w-full h-10 flex flex-shrink-0 items-center',
otherMonthDay: 'calendar-item',
emptyDay: '',
inRangeFirstDay: 'text-sm bg-yellow text-white w-full h-8 rounded-l-full',
inRangeLastDay: 'text-sm bg-yellow text-white w-full h-8 rounded-r-full',
inRangeDay: 'text-sm bg-yellow w-full h-8 disabled:opacity-50 disabled:cursor-not-allowed',
selectedDay: 'calendar-item-active',
activeDay: 'calendar-item-active',
highlightedDay: 'calendar-item-active',
day: 'calendar-item',
today: 'cursor-not-allowed text-sm rounded-full w-10 h-10 mx-auto border border-yellow',
monthWrapper: 'px-3 pt-2',
selectedMonth: 'text-sm rounded w-full h-12 mx-auto bg-yellow text-white',
activeMonth: 'text-sm rounded w-full h-12 mx-auto bg-yellow',
month: 'text-sm rounded w-full h-12 mx-auto hover:bg-yellow',
yearWrapper: 'px-3 pt-2',
year: 'text-sm rounded w-full h-12 mx-auto hover:bg-yellow',
selectedYear: 'text-sm rounded w-full h-12 mx-auto bg-yellow text-white',
activeYear: 'text-sm rounded w-full h-12 mx-auto bg-yellow'
},
variants: {
danger: {
input: 'border-red-300 bg-red-50 placeholder-red-200 text-red-900',
clearButton: 'hover:bg-red-200 text-red-500'
}
}
}
},
't-input-group': {
component: TInputGroup,
props: {
classes: {
wrapper: 'relative mb-6',
label: 'block px-3 mb-1 uppercase font-medium text-xs',
body: 'relative',
feedback: 'block px-3 mt-2 text-sm text-black text-opacity-75',
description: 'block px-3 mt-2 text-sm text-black text-opacity-75'
}
}
},
't-select': {
component: TSelect,
props: {
wrapped: true,
classes: {
wrapper: 'relative',
input: 'block w-full py-3 px-4 pr-10 bg-white bg-none border border-black border-opacity-20 rounded-xl disabled:opacity-50 disabled:cursor-not-allowed',
arrowWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
arrow: 'fill-current h-4 w-4'
}
}
},
't-rich-select': {
component: TRichSelect,
props: {
fixedClasses: {
wrapper: 'relative',
buttonWrapper: 'inline-block relative w-full',
selectButton: 'w-full flex text-left justify-between items-center px-3 py-3 text-black transition duration-100 ease-in-out border border-black border-opacity-10 rounded-xl shadow-sm focus:border-black focus:ring-2 focus:ring-black focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
selectButtonLabel: 'block truncate',
selectButtonPlaceholder: 'block truncate',
selectButtonIcon: 'fill-current flex-shrink-0 ml-1 h-4 w-4',
selectButtonClearButton: 'rounded flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6 transition duration-100 ease-in-out',
selectButtonClearIcon: 'fill-current h-3 w-3',
selectButtonTagWrapper: 'flex flex-wrap overflow-hidden',
selectButtonTag: 'bg-black block disabled:cursor-not-allowed disabled:opacity-50 duration-100 ease-in-out focus:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50 rounded shadow-sm text-sm text-white transition white-space-no m-0.5 max-w-full overflow-hidden h-8 flex items-center',
selectButtonTagText: 'px-3',
selectButtonTagDeleteButton: '-ml-1.5 h-full hover:bg-blue-600 hover:shadow-sm inline-flex items-center px-2 transition',
selectButtonTagDeleteButtonIcon: 'w-3 h-3',
dropdown: 'absolute w-full z-10 -mt-1 absolute border-b-black border-l-black border-r-black border-opacity-10 rounded-b shadow-sm z-10',
dropdownFeedback: '',
loadingMoreResults: '',
optionsList: 'overflow-auto',
searchWrapper: 'inline-block w-full',
searchBox: 'inline-block w-full',
optgroup: '',
option: 'cursor-pointer',
disabledOption: 'opacity-50 cursor-not-allowed',
highlightedOption: 'cursor-pointer bg-gray',
selectedOption: 'cursor-pointer bg-gray',
selectedHighlightedOption: 'cursor-pointer',
optionContent: '',
optionLabel: 'truncate block',
selectedIcon: 'fill-current h-4 w-4',
enterClass: '',
enterActiveClass: '',
enterToClass: '',
leaveClass: '',
leaveActiveClass: '',
leaveToClass: ''
},
classes: {
wrapper: '',
buttonWrapper: '',
selectButton: 'bg-white border-black border-opacity-10',
selectButtonLabel: 'flex items-center justify-center',
selectButtonPlaceholder: 'text-black',
selectButtonIcon: 'text-black',
selectButtonClearButton: 'hover:bg-blue text-black',
selectButtonClearIcon: 'w-4 h-4',
selectButtonTagWrapper: '-mx-1 -my-2 py-1 pr-8',
selectButtonTag: 'bg-black block disabled:cursor-not-allowed disabled:opacity-50 duration-100 ease-in-out focus:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50 rounded shadow-sm text-sm text-white transition white-space-no m-0.5 max-w-full overflow-hidden h-8 flex items-center',
selectButtonTagText: 'px-3',
selectButtonTagDeleteButton: '-ml-1.5 h-full hover:bg-blue-600 hover:shadow-sm inline-flex items-center px-2 transition',
selectButtonTagDeleteButtonIcon: '',
dropdown: 'bg-white border-black border-opacity-10',
dropdownFeedback: 'pb-2 px-3 text-gray-400 text-sm',
loadingMoreResults: 'pb-2 px-3 text-gray-400 text-sm',
optionsList: '',
searchWrapper: 'p-2 placeholder-black',
searchBox: 'px-3 py-2 bg-gray-50 text-sm rounded border focus:outline-none focus:shadow-outline border-black border-opacity-10',
optgroup: 'text-gray-400 uppercase text-xs py-1 px-2 font-semibold',
option: '',
disabledOption: '',
highlightedOption: 'bg-blue',
selectedOption: 'font-semibold bg-yellow font-semibold text-black',
selectedHighlightedOption: 'font-semibold bg-yellow font-semibold text-black',
optionContent: 'flex justify-between items-center px-3 py-2',
optionLabel: '',
selectedIcon: 'w-4 h-4',
enterClass: '',
enterActiveClass: 'opacity-0 transition ease-out duration-100',
enterToClass: 'opacity-100',
leaveClass: 'transition ease-in opacity-100',
leaveActiveClass: '',
leaveToClass: 'opacity-0 duration-75'
},
}
},
't-input': {
component: TInput,
props: {
classes: 'w-full px-4 py-3 leading-4 bg-white border border-black border-opacity-20 rounded-xl disabled:bg-black'
}
},
't-textarea': {
component: TTextarea,
props: {
classes: 'w-full h-48 px-4 py-4 leading-6 bg-white border border-black border-opacity-20 rounded-xl'
}
},
't-checkbox': {
component: TCheckbox,
props: {
classes: 'rounded-md w-5 h-5 text-black transition duration-100 ease-in-out border-gray-300 shadow-sm focus:border-black focus:ring-2 focus:ring-black focus:outline-none focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed'
}
},
't-radio': {
component: TRadio,
props: {
classes: 'rounded-md w-5 h-5 text-black transition duration-100 ease-in-out border-gray-300 shadow-sm focus:border-black focus:ring-2 focus:ring-black focus:outline-none focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed'
}
},
't-checkbox-group': {
component: TCheckboxGroup,
props: {
classes: {
groupWrapper: 'flex flex-col justify-center px-3',
label: 'block pl-2.5',
input: 'rounded-md w-5 h-5 text-black transition duration-100 ease-in-out border-gray-300 shadow-sm focus:border-black focus:ring-2 focus:ring-black focus:outline-none focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed',
inputWrapper: 'inline-flex',
wrapper: 'flex items-center my-1',
}
}
},
't-radio-group': {
component: TRadioGroup,
props: {
classes: {
groupWrapper: 'flex flex-col justify-center px-3',
label: 'block pl-2.5',
input: 'rounded-md w-5 h-5 text-black transition duration-100 ease-in-out border-gray-300 shadow-sm focus:border-black focus:ring-2 focus:ring-black focus:outline-none focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed',
inputWrapper: 'inline-flex',
wrapper: 'flex items-center my-1',
}
}
},
't-pagination': {
component: TPagination,
props: {
classes: {
wrapper: 'mt-8 table border-collapse text-center bg-white mx-auto shadow-sm',
element: 'w-10 h-10 transition border border-black border-opacity-20 table-cell hover:bg-black hover:border-black hover:text-white',
activeElement: 'w-10 h-10 transition border border-black table-cell bg-black text-white',
disabledElement: 'w-10 h-10 transition border border-black border-opacity-20 table-cell',
ellipsisElement: 'w-10 h-10 transition border border-black border-opacity-20 hidden md:table-cell',
activeButton: 'bg-blue-500 w-full h-full text-white hover:bg-blue-600 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
disabledButton: 'opacity-25 w-full h-full cursor-not-allowed transition duration-100 ease-in-out',
button: 'hover:bg-blue-100 w-full h-full transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
ellipsis: '',
}
}
},
't-modal': {
component: TModal,
props: {
fixedClasses: {
overlay: 'z-50 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-xl px-3 py-12',
modal: 'overflow-visible relative rounded-xl',
body: 'p-6',
header: 'border-b border-black border-opacity-10 p-6 rounded-t-xl text-xl font-bold leading-6',
footer: 'bg-gray px-6 py-4 rounded-b-xl',
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 text-black hover:bg-black hover:text-white',
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: {
danger: {
overlay: 'bg-red',
header: 'border-red text-red-700',
close: 'bg-redtext-red-700 hover:bg-red border-redborder',
modal: 'bg-white border border-red shadow-lg',
footer: 'bg-red'
}
}
}
}
}
Vue.use(VueTailwind, settings)
Zerion Mini Shell 1.0