Update Tailwind passthrough
tugcekucukoglu
parent
d9e162b1dc
commit
2838404b31
|
|
@ -838,16 +838,24 @@ export default {
|
||||||
class: 'absolute flex'
|
class: 'absolute flex'
|
||||||
},
|
},
|
||||||
button: {
|
button: {
|
||||||
root: ({ parent }) => ({
|
root: ({ parent }) => {
|
||||||
class: [
|
return {
|
||||||
'w-16 !h-16 !rounded-full justify-center z-10',
|
class: [
|
||||||
{
|
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
|
||||||
'rotate-45': parent.state.d_visible
|
'flex items-center justify-center',
|
||||||
}
|
'transition duration-200 ease-in-out',
|
||||||
]
|
'focus:outline-none focus:outline-offset-0',
|
||||||
}),
|
'w-16 !h-16 !rounded-full justify-center z-10',
|
||||||
label: {
|
{
|
||||||
class: 'hidden'
|
'rotate-45': parent.state.d_visible
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
label: () => {
|
||||||
|
return {
|
||||||
|
class: 'hidden'
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
menu: {
|
menu: {
|
||||||
|
|
@ -884,19 +892,155 @@ export default {
|
||||||
class: ['inline-flex relative', 'rounded-md', { 'shadow-lg': props.raised }]
|
class: ['inline-flex relative', 'rounded-md', { 'shadow-lg': props.raised }]
|
||||||
}),
|
}),
|
||||||
button: {
|
button: {
|
||||||
root: ({ parent }) => ({
|
root: ({ props, parent }) => {
|
||||||
class: ['rounded-r-none border-r-0', { 'rounded-l-full': parent.props.rounded }]
|
return {
|
||||||
}),
|
class: [
|
||||||
icon: {
|
'rounded-r-none border-r-0',
|
||||||
class: 'mr-2'
|
{ 'rounded-l-full': parent.props.rounded },
|
||||||
|
{
|
||||||
|
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
!parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||||
|
'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
parent.props.link
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'secondary',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'success',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'info',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'warning',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'help',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'danger'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
|
||||||
|
props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
|
||||||
|
props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
|
||||||
|
props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
|
||||||
|
props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
|
||||||
|
props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
|
||||||
|
props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
||||||
|
},
|
||||||
|
{ 'shadow-lg': props.raised },
|
||||||
|
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
|
||||||
|
{
|
||||||
|
'bg-transparent border-transparent': props.text && !props.plain,
|
||||||
|
'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||||
|
'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
|
||||||
|
'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
|
||||||
|
'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
|
||||||
|
'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
|
||||||
|
'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
|
||||||
|
},
|
||||||
|
{ 'shadow-lg': props.raised && props.text },
|
||||||
|
{
|
||||||
|
'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
|
||||||
|
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
|
||||||
|
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'bg-transparent border': props.outlined && !props.plain,
|
||||||
|
'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||||
|
'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
|
||||||
|
'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
|
||||||
|
'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
|
||||||
|
'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
|
||||||
|
'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
|
||||||
|
},
|
||||||
|
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
icon: () => {
|
||||||
|
return {
|
||||||
|
class: 'mr-2'
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
menubutton: {
|
menubutton: {
|
||||||
root: ({ parent }) => ({
|
root: ({ props, parent }) => {
|
||||||
class: ['rounded-l-none', { 'rounded-r-full': parent.props.rounded }]
|
return {
|
||||||
}),
|
class: [
|
||||||
label: {
|
'rounded-l-none',
|
||||||
class: 'hidden'
|
{ 'rounded-r-full': parent.props.rounded },
|
||||||
|
{
|
||||||
|
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
!parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||||
|
'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
parent.props.link
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'secondary',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'success',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'info',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'warning',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'help',
|
||||||
|
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||||
|
props.severity === 'danger'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
|
||||||
|
props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
|
||||||
|
props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
|
||||||
|
props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
|
||||||
|
props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
|
||||||
|
props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||||
|
'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
|
||||||
|
props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
||||||
|
},
|
||||||
|
{ 'shadow-lg': props.raised },
|
||||||
|
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
|
||||||
|
{
|
||||||
|
'bg-transparent border-transparent': props.text && !props.plain,
|
||||||
|
'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||||
|
'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
|
||||||
|
'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
|
||||||
|
'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
|
||||||
|
'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
|
||||||
|
'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
|
||||||
|
},
|
||||||
|
{ 'shadow-lg': props.raised && props.text },
|
||||||
|
{
|
||||||
|
'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
|
||||||
|
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
|
||||||
|
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'bg-transparent border': props.outlined && !props.plain,
|
||||||
|
'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||||
|
'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
|
||||||
|
'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
|
||||||
|
'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
|
||||||
|
'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
|
||||||
|
'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
|
||||||
|
},
|
||||||
|
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
label: () => {
|
||||||
|
return {
|
||||||
|
class: 'hidden'
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -922,44 +1066,73 @@ export default {
|
||||||
root: {
|
root: {
|
||||||
class: 'w-full inline-flex'
|
class: 'w-full inline-flex'
|
||||||
},
|
},
|
||||||
input: ({ props }) => ({
|
input: {
|
||||||
class: [
|
root: ({ parent }) => {
|
||||||
{
|
return {
|
||||||
'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked'
|
class: [
|
||||||
},
|
// { test: parent }
|
||||||
{
|
'm-0',
|
||||||
'order-2': props.buttonLayout == 'horizontal'
|
'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
|
||||||
}
|
'p-3 text-base',
|
||||||
]
|
{
|
||||||
}),
|
'rounded-tr-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'order-2': parent.props.buttonLayout == 'horizontal'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
buttongroup: ({ props }) => ({
|
buttongroup: ({ props }) => ({
|
||||||
class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
|
class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
|
||||||
}),
|
}),
|
||||||
incrementbutton: ({ props }) => ({
|
incrementbutton: {
|
||||||
class: [
|
root: ({ parent }) => {
|
||||||
'flex !items-center !justify-center',
|
return {
|
||||||
{
|
class: [
|
||||||
'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
|
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
|
||||||
},
|
'flex items-center justify-center',
|
||||||
{
|
'transition duration-200 ease-in-out',
|
||||||
'order-3': props.buttonLayout == 'horizontal'
|
'focus:outline-none focus:outline-offset-0',
|
||||||
}
|
{
|
||||||
]
|
'rounded-md rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': parent.props.showButtons && parent.props.buttonLayout == 'stacked'
|
||||||
}),
|
},
|
||||||
label: {
|
{
|
||||||
class: 'hidden'
|
'order-3 px-4 py-3 text-base rounded-md': parent.props.buttonLayout == 'horizontal'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
label: () => {
|
||||||
|
return {
|
||||||
|
class: 'hidden'
|
||||||
|
};
|
||||||
|
}
|
||||||
},
|
},
|
||||||
decrementbutton: ({ props }) => ({
|
decrementbutton: {
|
||||||
class: [
|
root: ({ parent }) => {
|
||||||
'flex !items-center !justify-center',
|
return {
|
||||||
{
|
class: [
|
||||||
'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
|
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
|
||||||
},
|
'flex items-center justify-center',
|
||||||
{
|
'transition duration-200 ease-in-out',
|
||||||
'order-1': props.buttonLayout == 'horizontal'
|
'focus:outline-none focus:outline-offset-0',
|
||||||
}
|
{
|
||||||
]
|
'rounded-md rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': parent.props.showButtons && parent.props.buttonLayout == 'stacked'
|
||||||
})
|
},
|
||||||
|
{
|
||||||
|
'order-1 px-4 py-3 text-base rounded-md': parent.props.buttonLayout == 'horizontal'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
label: () => {
|
||||||
|
return {
|
||||||
|
class: 'hidden'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
knob: {
|
knob: {
|
||||||
root: ({ props }) => ({
|
root: ({ props }) => ({
|
||||||
|
|
@ -1382,11 +1555,20 @@ export default {
|
||||||
{ 'rounded-lg': !props.showIcon, 'border-r-0 rounded-l-lg': props.showIcon }
|
{ 'rounded-lg': !props.showIcon, 'border-r-0 rounded-l-lg': props.showIcon }
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
dropdownbutton: ({ props }) => ({
|
dropdownbutton: {
|
||||||
root: {
|
root: ({ parent }) => {
|
||||||
class: [{ 'rounded-l-none': props.showIcon }]
|
return {
|
||||||
|
class: [
|
||||||
|
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
|
||||||
|
'flex items-center justify-center',
|
||||||
|
'transition duration-200 ease-in-out',
|
||||||
|
'focus:outline-none focus:outline-offset-0',
|
||||||
|
'px-4 py-3 text-base rounded-md',
|
||||||
|
{ 'rounded-l-none': parent.props.showIcon }
|
||||||
|
]
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}),
|
},
|
||||||
panel: ({ props }) => ({
|
panel: ({ props }) => ({
|
||||||
class: [
|
class: [
|
||||||
'bg-white dark:bg-gray-900',
|
'bg-white dark:bg-gray-900',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue