1156 lines
36 KiB
JavaScript
1156 lines
36 KiB
JavaScript
export default {
|
|
root: ({ props }) => ({
|
|
class: [
|
|
'relative',
|
|
|
|
// Flex & Alignment
|
|
{ 'flex flex-col': props.scrollable && props.scrollHeight === 'flex' },
|
|
|
|
// Size
|
|
{ 'h-full': props.scrollable && props.scrollHeight === 'flex' }
|
|
]
|
|
}),
|
|
loadingoverlay: {
|
|
class: [
|
|
// Position
|
|
'absolute',
|
|
'top-0 left-0',
|
|
'z-20',
|
|
|
|
// Flex & Alignment
|
|
'flex items-center justify-center',
|
|
|
|
// Size
|
|
'w-full h-full',
|
|
|
|
// Color
|
|
'bg-surface-100/40 dark:bg-surface-900/40',
|
|
|
|
// Transition
|
|
'transition duration-200'
|
|
]
|
|
},
|
|
loadingicon: {
|
|
class: 'w-8 h-8 animate-spin'
|
|
},
|
|
wrapper: ({ props }) => ({
|
|
class: [
|
|
{ relative: props.scrollable, 'flex flex-col grow': props.scrollable && props.scrollHeight === 'flex' },
|
|
|
|
// Size
|
|
{ 'h-full': props.scrollable && props.scrollHeight === 'flex' }
|
|
]
|
|
}),
|
|
header: ({ props }) => ({
|
|
class: [
|
|
'font-bold',
|
|
|
|
// Shape
|
|
props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0',
|
|
|
|
// Spacing
|
|
'p-4',
|
|
|
|
// Color
|
|
'bg-surface-0 dark:bg-surface-900',
|
|
'border-surface-200 dark:border-surface-700',
|
|
'text-surface-700 dark:text-white/80'
|
|
]
|
|
}),
|
|
table: {
|
|
class: 'w-full border-spacing-0 border-separate'
|
|
},
|
|
thead: ({ context }) => ({
|
|
class: [
|
|
{
|
|
'bg-surface-0 dark:bg-surface-900 top-0 z-40 sticky': context.scrollable
|
|
}
|
|
]
|
|
}),
|
|
tbody: ({ instance, context }) => ({
|
|
class: [
|
|
{
|
|
'sticky z-20': instance.frozenRow && context.scrollable
|
|
},
|
|
'bg-surface-0 dark:bg-surface-900'
|
|
]
|
|
}),
|
|
tfoot: ({ context }) => ({
|
|
class: [
|
|
{
|
|
'bg-surface-0 bottom-0 z-0': context.scrollable
|
|
}
|
|
]
|
|
}),
|
|
footer: {
|
|
class: [
|
|
'font-bold',
|
|
|
|
// Shape
|
|
'border-t-0 border-b border-x-0',
|
|
|
|
// Spacing
|
|
'p-4',
|
|
|
|
// Color
|
|
'bg-surface-0 dark:bg-surface-900',
|
|
'border-surface-200 dark:border-surface-700',
|
|
'text-surface-700 dark:text-white/80'
|
|
]
|
|
},
|
|
column: {
|
|
headercell: ({ context, props }) => ({
|
|
class: [
|
|
'font-semibold',
|
|
'leading-[normal]',
|
|
|
|
// Position
|
|
{ 'sticky z-20 border-b': props.frozen || props.frozen === '' },
|
|
|
|
{ relative: context.resizable },
|
|
|
|
// Alignment
|
|
'text-left',
|
|
|
|
// Shape
|
|
{ 'first:border-l border-y border-r': context?.showGridlines },
|
|
'border-0 border-b border-solid',
|
|
|
|
// Spacing
|
|
context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
|
|
|
|
// Color
|
|
(props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-0 text-surface-700 dark:text-white/80 dark:bg-surface-900',
|
|
'border-surface-200 dark:border-surface-700 ',
|
|
|
|
// States
|
|
{ 'hover:bg-surface-100 dark:hover:bg-surface-800/50': (props.sortable === '' || props.sortable) && !context?.sorted },
|
|
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
|
|
|
// Transition
|
|
{ 'transition duration-200': props.sortable === '' || props.sortable },
|
|
|
|
// Misc
|
|
{ 'cursor-pointer': props.sortable === '' || props.sortable },
|
|
{
|
|
'overflow-hidden space-nowrap border-y bg-clip-padding': context.resizable // Resizable
|
|
}
|
|
]
|
|
}),
|
|
headercontent: {
|
|
class: 'flex items-center'
|
|
},
|
|
sort: ({ context }) => ({
|
|
class: [context.sorted ? 'text-primary-500' : 'text-surface-700', context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80']
|
|
}),
|
|
bodycell: ({ props, context, state, parent }) => ({
|
|
class: [
|
|
// Font
|
|
'leading-[normal]',
|
|
|
|
//Position
|
|
{ 'sticky box-border border-b': parent.instance.frozenRow },
|
|
{ 'sticky box-border border-b z-20': props.frozen || props.frozen === '' },
|
|
|
|
// Alignment
|
|
'text-left',
|
|
|
|
// Shape
|
|
'border-0 border-b border-solid',
|
|
{ 'first:border-l border-r border-b': context?.showGridlines },
|
|
{ 'bg-surface-0 dark:bg-surface-900': parent.instance.frozenRow || props.frozen || props.frozen === '' },
|
|
|
|
// Spacing
|
|
{ 'py-[0.375rem] px-2': context?.size === 'small' && !state['d_editing'] },
|
|
{ 'py-[0.9375rem] px-5': context?.size === 'large' && !state['d_editing'] },
|
|
{ 'py-3 px-4': context?.size !== 'large' && context?.size !== 'small' && !state['d_editing'] },
|
|
{ 'py-[0.6rem] px-2': state['d_editing'] },
|
|
|
|
// Color
|
|
'border-surface-200 dark:border-surface-700'
|
|
]
|
|
}),
|
|
footercell: ({ context }) => ({
|
|
class: [
|
|
// Font
|
|
'font-bold',
|
|
|
|
// Alignment
|
|
'text-left',
|
|
|
|
// Shape
|
|
'border-0 border-b border-solid',
|
|
{ 'border-x border-y': context?.showGridlines },
|
|
|
|
// Spacing
|
|
context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
|
|
|
|
// Color
|
|
'border-surface-200 dark:border-surface-700',
|
|
'text-surface-700 dark:text-white/80',
|
|
'bg-surface-0 dark:bg-surface-900'
|
|
]
|
|
}),
|
|
sorticon: ({ context }) => ({
|
|
class: ['ml-2', context.sorted ? 'text-primary-highlight-inverse' : 'text-surface-700 dark:text-white/70']
|
|
}),
|
|
sortbadge: {
|
|
class: [
|
|
// Flex & Alignment
|
|
'flex items-center justify-center align-middle',
|
|
|
|
// Shape
|
|
'rounded-full',
|
|
|
|
// Size
|
|
'w-[1.143rem] leading-[1.143rem]',
|
|
|
|
// Spacing
|
|
'ml-2',
|
|
|
|
// Color
|
|
'text-primary-highlight-inverse bg-primary-highlight'
|
|
]
|
|
},
|
|
columnfilter: {
|
|
class: 'inline-flex items-center ml-auto font-normal'
|
|
},
|
|
filteroverlay: {
|
|
class: [
|
|
// Position
|
|
'absolute top-0 left-0',
|
|
|
|
// Shape
|
|
'border-0 dark:border',
|
|
'rounded-md',
|
|
'shadow-md',
|
|
|
|
// Size
|
|
'min-w-[12.5rem]',
|
|
|
|
// Color
|
|
'bg-surface-0 dark:bg-surface-900',
|
|
'text-surface-800 dark:text-white/80',
|
|
'dark:border-surface-700'
|
|
]
|
|
},
|
|
filtermatchmodedropdown: {
|
|
root: ({ state }) => ({
|
|
class: [
|
|
// Display and Position
|
|
'flex',
|
|
'relative',
|
|
|
|
// Spacing
|
|
'mb-2 last:mb-0',
|
|
|
|
// Shape
|
|
'w-full',
|
|
'rounded-md',
|
|
|
|
// Color and Background
|
|
'bg-surface-0 dark:bg-surface-900',
|
|
'border border-surface-300 dark:border-surface-700',
|
|
'text-surface-800 dark:text-white/80',
|
|
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
|
|
// Transitions
|
|
'transition-all',
|
|
'duration-200',
|
|
|
|
// States
|
|
'hover:border-primary',
|
|
{ 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
|
|
|
|
// Misc
|
|
'cursor-pointer',
|
|
'select-none'
|
|
]
|
|
})
|
|
},
|
|
filterrowitems: {
|
|
class: 'm-0 p-0 py-3 list-none'
|
|
},
|
|
filterrowitem: ({ context }) => ({
|
|
class: [
|
|
// Font
|
|
'font-normal',
|
|
'leading-none',
|
|
|
|
// Position
|
|
'relative',
|
|
|
|
// Shape
|
|
'border-0',
|
|
'rounded-none',
|
|
|
|
// Spacing
|
|
'm-0',
|
|
'py-3 px-5',
|
|
|
|
// Color
|
|
{ 'text-surface-700 dark:text-white/80': !context?.highlighted },
|
|
{ 'bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-white/80': !context?.highlighted },
|
|
{ 'bg-primary-highlight text-primary-highlight-inverse': context?.highlighted },
|
|
|
|
//States
|
|
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context?.highlighted },
|
|
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': !context?.highlighted },
|
|
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
|
|
|
// Transitions
|
|
'transition-shadow',
|
|
'duration-200',
|
|
|
|
// Misc
|
|
'cursor-pointer',
|
|
'overflow-hidden',
|
|
'whitespace-nowrap'
|
|
]
|
|
}),
|
|
filteroperator: {
|
|
class: [
|
|
// Shape
|
|
'rounded-t-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-white/80',
|
|
'bg-surface-0 dark:bg-surface-700'
|
|
]
|
|
},
|
|
filteroperatordropdown: {
|
|
root: ({ state }) => ({
|
|
class: [
|
|
// Display and Position
|
|
'inline-flex',
|
|
'relative',
|
|
|
|
// Shape
|
|
'w-full',
|
|
'rounded-md',
|
|
|
|
// Color and Background
|
|
'bg-surface-0 dark:bg-surface-950',
|
|
'border border-surface-300 dark:border-surface-700',
|
|
|
|
// Transitions
|
|
'transition-all',
|
|
'duration-200',
|
|
|
|
// States
|
|
'hover:border-surface-400 dark:hover:border-surface-600',
|
|
{ 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
|
|
|
|
// Misc
|
|
'cursor-pointer',
|
|
'select-none'
|
|
]
|
|
}),
|
|
input: ({ props }) => ({
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Display
|
|
'block',
|
|
'flex-auto',
|
|
|
|
// Color and Background
|
|
'bg-transparent',
|
|
'border-0',
|
|
{ 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
|
|
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
|
|
// Sizing and Spacing
|
|
'w-[1%]',
|
|
'py-2 px-3',
|
|
|
|
//Shape
|
|
'rounded-none',
|
|
|
|
// Transitions
|
|
'transition',
|
|
'duration-200',
|
|
|
|
// States
|
|
'focus:outline-none focus:shadow-none',
|
|
|
|
// Misc
|
|
'relative',
|
|
'cursor-pointer',
|
|
'overflow-hidden overflow-ellipsis',
|
|
'whitespace-nowrap',
|
|
'appearance-none'
|
|
]
|
|
}),
|
|
trigger: {
|
|
class: [
|
|
// Flexbox
|
|
'flex items-center justify-center',
|
|
'shrink-0',
|
|
|
|
// Color and Background
|
|
'bg-transparent',
|
|
'text-surface-500',
|
|
|
|
// Size
|
|
'w-12',
|
|
|
|
// Shape
|
|
'rounded-tr-md',
|
|
'rounded-br-md'
|
|
]
|
|
},
|
|
panel: {
|
|
class: [
|
|
// Colors
|
|
'bg-surface-0 dark:bg-surface-900',
|
|
'text-surface-700 dark:text-white/80',
|
|
|
|
// Shape
|
|
'border border-surface-300 dark:border-surface-700',
|
|
'rounded-md',
|
|
'shadow-md'
|
|
]
|
|
},
|
|
item: ({ context }) => ({
|
|
class: [
|
|
// Font
|
|
'font-normal',
|
|
'leading-none',
|
|
|
|
// Position
|
|
'relative',
|
|
|
|
// Shape
|
|
'border-0',
|
|
'rounded-none',
|
|
|
|
// Spacing
|
|
'm-0 px-3 py-2',
|
|
'first:mt-0 mt-[2px]',
|
|
|
|
// Color
|
|
{
|
|
'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
|
|
'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
|
|
'text-surface-700 dark:text-white/80': context.focused && !context.selected,
|
|
|
|
'text-primary-highlight-inverse': context.selected,
|
|
'bg-primary-highlight': context.selected
|
|
},
|
|
|
|
//States
|
|
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
|
|
{ 'hover:bg-primary-highlight-hover': context.selected },
|
|
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
|
|
|
|
// Transitions
|
|
'transition-shadow',
|
|
'duration-200',
|
|
|
|
// Misc
|
|
'cursor-pointer',
|
|
'overflow-hidden',
|
|
'whitespace-nowrap'
|
|
]
|
|
})
|
|
},
|
|
filteraddrulebutton: {
|
|
root: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Alignments
|
|
'items-center inline-flex text-center align-bottom justify-center',
|
|
|
|
// Sizes & Spacing
|
|
'text-sm py-[0.4375rem] px-[0.875rem] w-full',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
'bg-transparent border-transparent',
|
|
'text-primary',
|
|
'hover:bg-primary-300/20',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// Misc
|
|
'cursor-pointer overflow-hidden select-none'
|
|
]
|
|
},
|
|
label: {
|
|
class: 'flex-auto grow-0'
|
|
},
|
|
icon: {
|
|
class: 'mr-2'
|
|
}
|
|
},
|
|
filterremovebutton: {
|
|
root: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Alignments
|
|
'items-center inline-flex text-center align-bottom justify-center',
|
|
|
|
// Sizes & Spacing
|
|
'text-sm py-[0.4375rem] px-[0.875rem] w-full mt-2',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
'bg-transparent border-transparent',
|
|
'text-red-500 dark:text-red-400',
|
|
'hover:bg-red-300/20',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// Misc
|
|
'cursor-pointer overflow-hidden select-none'
|
|
]
|
|
},
|
|
label: {
|
|
class: 'flex-auto grow-0'
|
|
},
|
|
icon: {
|
|
class: 'mr-2'
|
|
}
|
|
},
|
|
filterbuttonbar: {
|
|
class: [
|
|
// Flex & Alignment
|
|
'flex items-center justify-between',
|
|
|
|
// Space
|
|
'p-0'
|
|
]
|
|
},
|
|
filterclearbutton: {
|
|
root: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Alignments
|
|
'items-center inline-flex text-center align-bottom justify-center',
|
|
|
|
// Sizes & Spacing
|
|
'text-sm py-[0.4375rem] px-[0.875rem]',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
'text-primary-500 border border-primary',
|
|
'hover:bg-primary-300/20',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// Misc
|
|
'cursor-pointer overflow-hidden select-none'
|
|
]
|
|
}
|
|
},
|
|
filterapplybutton: {
|
|
root: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Alignments
|
|
'items-center inline-flex text-center align-bottom justify-center',
|
|
|
|
// Sizes & Spacing
|
|
'text-sm py-[0.4375rem] px-[0.875rem]',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
'text-primary-inverse',
|
|
'bg-primary',
|
|
'hover:bg-primary-hover hover:border-primary-hover',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// Misc
|
|
'cursor-pointer overflow-hidden select-none'
|
|
]
|
|
}
|
|
},
|
|
filtermenubutton: ({ context }) => ({
|
|
class: [
|
|
'relative',
|
|
// Flex & Alignment
|
|
'inline-flex items-center justify-center',
|
|
|
|
// Size
|
|
'w-8 h-8',
|
|
|
|
// Spacing
|
|
'ml-2',
|
|
|
|
// Shape
|
|
'rounded-full',
|
|
|
|
// Color
|
|
{ 'bg-primary-highlight text-primary-highliht-inverse': context.active },
|
|
'dark:text-white/70 dark:hover:text-white/80 dark:bg-surface-900',
|
|
|
|
// States
|
|
'hover:text-surface-700 hover:bg-surface-300/20',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
|
|
// Transition
|
|
'transition duration-200',
|
|
|
|
// Misc
|
|
'cursor-pointer no-underline overflow-hidden'
|
|
]
|
|
}),
|
|
headerfilterclearbutton: ({ context }) => ({
|
|
class: [
|
|
'relative',
|
|
|
|
// Flex & Alignment
|
|
'inline-flex items-center justify-center',
|
|
'text-left',
|
|
|
|
// Shape
|
|
'border-none',
|
|
|
|
// Spacing
|
|
'm-0 p-0 ml-2',
|
|
|
|
// Color
|
|
'bg-transparent',
|
|
|
|
// Misc
|
|
'cursor-pointer no-underline overflow-hidden select-none',
|
|
{
|
|
invisible: !context.hidden
|
|
}
|
|
]
|
|
}),
|
|
rowtoggler: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Flex & Alignment
|
|
'inline-flex items-center justify-center',
|
|
'text-left',
|
|
|
|
// Spacing
|
|
'm-0 p-0',
|
|
|
|
// Size
|
|
'w-8 h-8',
|
|
|
|
// Shape
|
|
'border-0 rounded-full',
|
|
|
|
// Color
|
|
'text-surface-500 dark:text-white/70',
|
|
'bg-transparent',
|
|
'focus-visible:outline-none focus-visible:outline-offset-0',
|
|
'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
|
|
|
// Transition
|
|
'transition duration-200',
|
|
|
|
// Misc
|
|
'overflow-hidden',
|
|
'cursor-pointer select-none'
|
|
]
|
|
},
|
|
columnresizer: {
|
|
class: [
|
|
'block',
|
|
|
|
// Position
|
|
'absolute top-0 right-0',
|
|
|
|
// Sizing
|
|
'w-2 h-full',
|
|
|
|
// Spacing
|
|
'm-0 p-0',
|
|
|
|
// Color
|
|
'border border-transparent',
|
|
|
|
// Misc
|
|
'cursor-col-resize'
|
|
]
|
|
},
|
|
rowreordericon: {
|
|
class: 'cursor-move'
|
|
},
|
|
roweditorinitbutton: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Flex & Alignment
|
|
'inline-flex items-center justify-center',
|
|
'text-left',
|
|
|
|
// Size
|
|
'w-7 h-7',
|
|
|
|
// Shape
|
|
'border-0 rounded-full',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-white/70',
|
|
'border-transparent',
|
|
|
|
// States
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
'hover:text-surface-700 hover:bg-surface-50 dark:hover:bg-surface-800/50',
|
|
|
|
// Transition
|
|
'transition duration-200',
|
|
|
|
// Misc
|
|
'overflow-hidden',
|
|
'cursor-pointer select-none'
|
|
]
|
|
},
|
|
roweditorsavebutton: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Flex & Alignment
|
|
'inline-flex items-center justify-center',
|
|
'text-left',
|
|
|
|
// Size
|
|
'w-8 h-8',
|
|
|
|
// Shape
|
|
'border-0 rounded-full',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-white/70',
|
|
'border-transparent',
|
|
|
|
// States
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
'hover:text-surface-700 hover:bg-surface-300/20',
|
|
|
|
// Transition
|
|
'transition duration-200',
|
|
|
|
// Misc
|
|
'overflow-hidden',
|
|
'cursor-pointer select-none'
|
|
]
|
|
},
|
|
roweditorcancelbutton: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Flex & Alignment
|
|
'inline-flex items-center justify-center',
|
|
'text-left',
|
|
|
|
// Size
|
|
'w-8 h-8',
|
|
|
|
// Shape
|
|
'border-0 rounded-full',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-white/70',
|
|
'border-transparent',
|
|
|
|
// States
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
'hover:text-surface-700 hover:bg-surface-300/20',
|
|
|
|
// Transition
|
|
'transition duration-200',
|
|
|
|
// Misc
|
|
'overflow-hidden',
|
|
'cursor-pointer select-none'
|
|
]
|
|
},
|
|
rowRadiobutton: {
|
|
root: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Flexbox & Alignment
|
|
'inline-flex',
|
|
'align-bottom',
|
|
|
|
// Size
|
|
'w-5 h-5',
|
|
|
|
// Misc
|
|
'cursor-pointer',
|
|
'select-none'
|
|
]
|
|
},
|
|
box: ({ props }) => ({
|
|
class: [
|
|
// Flexbox
|
|
'flex justify-center items-center',
|
|
|
|
// Size
|
|
'w-5 h-5',
|
|
|
|
// Shape
|
|
'border',
|
|
'rounded-full',
|
|
|
|
// Transition
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// Colors
|
|
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
|
|
|
|
{
|
|
'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined,
|
|
'border-surface-300 dark:border-surface-700': props.value !== props.modelValue && props.value !== undefined && !props.invalid,
|
|
'border-primary': props.value == props.modelValue && props.value !== undefined && !props.disabled
|
|
},
|
|
{
|
|
'peer-hover:border-surface-400 dark:peer-hover:border-surface-400': !props.disabled && !props.invalid && props.value !== props.modelValue,
|
|
'peer-hover:border-primary-hover': !props.disabled && props.value == props.modelValue && props.value !== undefined,
|
|
'peer-hover:[&>*:first-child]:bg-primary-600 dark:peer-hover:[&>*:first-child]:bg-primary-300': !props.disabled && props.value == props.modelValue && props.value !== undefined,
|
|
'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
|
'bg-surface-200 [&>*:first-child]:bg-surface-600 dark:bg-surface-700 dark:[&>*:first-child]:bg-surface-400 border-surface-300 dark:border-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
}
|
|
]
|
|
}),
|
|
input: {
|
|
class: [
|
|
'peer',
|
|
|
|
// Size
|
|
'w-full ',
|
|
'h-full',
|
|
|
|
// Position
|
|
'absolute',
|
|
'top-0 left-0',
|
|
'z-10',
|
|
|
|
// Spacing
|
|
'p-0',
|
|
'm-0',
|
|
|
|
// Shape
|
|
'opacity-0',
|
|
'rounded-md',
|
|
'outline-none',
|
|
'border-1 border-surface-200 dark:border-surface-700',
|
|
|
|
// Misc
|
|
'appearance-none',
|
|
'cursor-pointer'
|
|
]
|
|
},
|
|
icon: ({ props }) => ({
|
|
class: [
|
|
'block',
|
|
|
|
// Shape
|
|
'rounded-full',
|
|
|
|
// Size
|
|
'w-3 h-3',
|
|
|
|
// Conditions
|
|
{
|
|
'bg-surface-0 dark:bg-surface-900 backface-hidden invisible scale-[0.1]': !props.modelValue,
|
|
'bg-primary transform visible translate-z-0 scale-[1.1]': props.modelValue
|
|
},
|
|
|
|
// Transition
|
|
'transition duration-200'
|
|
]
|
|
})
|
|
},
|
|
headercheckbox: {
|
|
root: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Alignment
|
|
'inline-flex',
|
|
'align-bottom',
|
|
|
|
// Size
|
|
'w-5',
|
|
'h-5',
|
|
|
|
// Misc
|
|
'cursor-pointer',
|
|
'select-none'
|
|
]
|
|
},
|
|
box: ({ props, context }) => ({
|
|
class: [
|
|
// Alignment
|
|
'flex',
|
|
'items-center',
|
|
'justify-center',
|
|
|
|
// Size
|
|
'w-5',
|
|
'h-5',
|
|
|
|
// Shape
|
|
'rounded',
|
|
'border',
|
|
|
|
// Colors
|
|
{
|
|
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
|
|
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
|
|
'border-primary bg-primary': context.checked
|
|
},
|
|
|
|
// Invalid State
|
|
'invalid:focus:ring-red-200',
|
|
'invalid:hover:border-red-500',
|
|
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
|
|
// States
|
|
{
|
|
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
|
|
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
|
|
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
|
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
},
|
|
|
|
// Transitions
|
|
'transition-colors',
|
|
'duration-200'
|
|
]
|
|
}),
|
|
input: {
|
|
class: [
|
|
'peer',
|
|
|
|
// Size
|
|
'w-full ',
|
|
'h-full',
|
|
|
|
// Position
|
|
'absolute',
|
|
'top-0 left-0',
|
|
'z-10',
|
|
|
|
// Spacing
|
|
'p-0',
|
|
'm-0',
|
|
|
|
// Shape
|
|
'opacity-0',
|
|
'rounded',
|
|
'outline-none',
|
|
'border border-surface-300 dark:border-surface-700',
|
|
|
|
// Misc
|
|
'appearance-none',
|
|
'cursor-pointer'
|
|
]
|
|
},
|
|
icon: {
|
|
class: [
|
|
// Size
|
|
'w-[0.875rem]',
|
|
'h-[0.875rem]',
|
|
|
|
// Colors
|
|
'text-white dark:text-surface-950',
|
|
|
|
// Transitions
|
|
'transition-all',
|
|
'duration-200'
|
|
]
|
|
}
|
|
},
|
|
rowCheckbox: {
|
|
root: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Alignment
|
|
'inline-flex',
|
|
'align-bottom',
|
|
|
|
// Size
|
|
'w-5',
|
|
'h-5',
|
|
|
|
// Misc
|
|
'cursor-pointer',
|
|
'select-none'
|
|
]
|
|
},
|
|
box: ({ props, context }) => ({
|
|
class: [
|
|
// Alignment
|
|
'flex',
|
|
'items-center',
|
|
'justify-center',
|
|
|
|
// Size
|
|
'w-5',
|
|
'h-5',
|
|
|
|
// Shape
|
|
'rounded',
|
|
'border',
|
|
|
|
// Colors
|
|
{
|
|
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
|
|
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
|
|
'border-primary bg-primary': context.checked
|
|
},
|
|
|
|
// Invalid State
|
|
'invalid:focus:ring-red-200',
|
|
'invalid:hover:border-red-500',
|
|
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
|
|
// States
|
|
{
|
|
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
|
|
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
|
|
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
|
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
},
|
|
|
|
// Transitions
|
|
'transition-colors',
|
|
'duration-200'
|
|
]
|
|
}),
|
|
input: {
|
|
class: [
|
|
'peer',
|
|
|
|
// Size
|
|
'w-full ',
|
|
'h-full',
|
|
|
|
// Position
|
|
'absolute',
|
|
'top-0 left-0',
|
|
'z-10',
|
|
|
|
// Spacing
|
|
'p-0',
|
|
'm-0',
|
|
|
|
// Shape
|
|
'opacity-0',
|
|
'rounded',
|
|
'outline-none',
|
|
'border border-surface-300 dark:border-surface-700',
|
|
|
|
// Misc
|
|
'appearance-none',
|
|
'cursor-pointer'
|
|
]
|
|
},
|
|
icon: {
|
|
class: [
|
|
// Size
|
|
'w-[0.875rem]',
|
|
'h-[0.875rem]',
|
|
|
|
// Colors
|
|
'text-white dark:text-surface-950',
|
|
|
|
// Transitions
|
|
'transition-all',
|
|
'duration-200'
|
|
]
|
|
}
|
|
},
|
|
transition: {
|
|
class: 'p-3 flex flex-col gap-2',
|
|
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
leaveToClass: 'opacity-0'
|
|
}
|
|
},
|
|
bodyrow: ({ context, props }) => ({
|
|
class: [
|
|
// Color
|
|
'dark:text-white/80',
|
|
{ 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
|
|
{ 'bg-surface-0 text-surface-600 dark:bg-surface-900': !context.selected },
|
|
{ 'font-bold bg-surface-0 dark:bg-surface-900 z-20': props.frozenRow },
|
|
{ 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-900 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-800/50': context.stripedRows },
|
|
|
|
// State
|
|
{ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 ring-inset dark:focus:ring-primary-400': context.selectable },
|
|
{ 'hover:bg-surface-300/20 dark:hover:bg-surface-800/50 hover:text-surface-600': props.selectionMode && !context.selected },
|
|
|
|
// Transition
|
|
{ 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover },
|
|
|
|
// Misc
|
|
{ 'cursor-pointer': props.selectionMode }
|
|
]
|
|
}),
|
|
rowexpansion: {
|
|
class: 'bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-white/80'
|
|
},
|
|
rowgroupheader: {
|
|
class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-900']
|
|
},
|
|
rowgroupfooter: {
|
|
class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-900']
|
|
},
|
|
rowgrouptoggler: {
|
|
class: [
|
|
'relative',
|
|
|
|
// Flex & Alignment
|
|
'inline-flex items-center justify-center',
|
|
'text-left',
|
|
|
|
// Spacing
|
|
'm-0 p-0',
|
|
|
|
// Size
|
|
'w-8 h-8',
|
|
|
|
// Shape
|
|
'border-0 rounded-full',
|
|
|
|
// Color
|
|
'text-surface-500 dark:text-white/70',
|
|
'bg-transparent',
|
|
'focus-visible:outline-none focus-visible:outline-offset-0',
|
|
'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
|
|
|
// Transition
|
|
'transition duration-200',
|
|
|
|
// Misc
|
|
'overflow-hidden',
|
|
'cursor-pointer select-none'
|
|
]
|
|
},
|
|
rowgrouptogglericon: {
|
|
class: 'inline-block w-4 h-4'
|
|
},
|
|
resizehelper: {
|
|
class: 'absolute hidden w-[2px] z-20 bg-primary'
|
|
}
|
|
};
|