Skip to content

Commit

Permalink
Update index.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibelar
ibelar committed Jul 16, 2024
1 parent 6f1be18 commit 823a3e9
Showing 1 changed file with 103 additions and 231 deletions.
334 changes: 103 additions & 231 deletions src/presets/lara-fohn/tree/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,41 @@
import { useHighlightColors, useHoverColors } from '../../../components/tree/composable/style';

export default {
root: {
class: [
// Space
'p-5',

// Shape
'rounded-md',

// Color
'bg-surface-0 dark:bg-surface-800',
'text-surface-700 dark:text-white/80',
'border border-solid border-surface-200 dark:border-surface-700',
],
class: [],
},
wrapper: {
class: ['overflow-auto'],
},
container: {
class: [
// Spacing
'm-0 p-0',

// Misc
'list-none overflow-auto',
],
},
node: {
class: ['p-1', 'rounded-md'],
},
nodeChildren: ({ instance }) => ({
class: [
'ml-2',
],
}),
nodeChildren: ({ props }) => {
return {
class: props?.pt?.nodeChildrenClass || ['ml-2'],
};
},
nodeToggleButton: ({ context }) => ({
class: [
{ invisible: context.leaf },
],
}),
nodeToggleIcon: ({ props, context, instance }) => {
let iconClass = [];
if (props.node.collapsedIcon && props.node.expandedIcon) {
if (props.node?.collapsedIcon && props.node?.expandedIcon) {
iconClass = [
{ [props.node.collapsedIcon]: !context.expanded },
{ [props.node.expandedIcon]: context.expanded },
];
}

return {
class: iconClass,
};
},
// nodeContent: ({ instance }) => ({
// class: [
// { 'hover:bg-blue-400 hover:text-white cursor-pointer': instance.selectable },
// ],
// }),
// nodecontent: {
// class: ['data-[p-selectable=true]:cursor-pointer', 'data-[p-selected=true]:bg-blue-400', 'data-[p-selected=true]:text-white'],
// },
nodeContent: ({ context, props, instance }) => {
const selectedColors = props.node?.selectedColors ? props.node.selectedColors : 'bg-purple-700 text-white';
const hoverColor = props.node?.hoverColors ? props.node.hoverColors : 'hover:bg-gray-200';
const selectedColors = useHighlightColors(props?.pt?.selectedColors);
const hoverColor = useHoverColors(props?.pt?.hoverColors);

return {
class: [
// Flex and Alignment
Expand All @@ -74,11 +48,14 @@ export default {
'px-2',

// Colors
'text-surface-600 dark:text-white/70',
// 'text-surface-600 dark:text-white/70',
{ [selectedColors]: context.selected },

// States
{ [hoverColor]: (props.selectionMode === 'single' || props.selectionMode === 'multiple') && !context.selected },
{
[hoverColor]: (props.selectionMode === 'single' || props.selectionMode === 'multiple') && !context.selected,
'opacity-30': (props.node.selectable === false) && context.leaf && props.selectionMode !== 'checkbox',
},

// Transition
'transition-shadow duration-200',
Expand All @@ -87,206 +64,101 @@ export default {
],
};
},
toggler: ({ context }) => ({
class: [
// Flex and Alignment
'inline-flex items-center justify-center',
nodeCheckbox: ({ props, context, instance }) => {
const boxColors = useHighlightColors(useHighlightColors(props?.pt?.selectedColors));
return {
root: {
class: [
'relative',

// Shape
'border-0 rounded-full',
// Alignment
'inline-flex',
'align-bottom',

// Size
'w-8 h-8',
// Size
'w-5',
'h-5',

// Spacing
'mr-2',
// Spacing
'mx-1',

// Colors
'bg-transparent',
{
'text-surface-500 dark:text-white': !context.selected,
'text-primary-600 dark:text-white': context.selected,
'invisible': context.leaf,
// Misc
'cursor-pointer',
'select-none',
],
},

// States
'hover:bg-surface-200/20 dark:hover:bg-surface-500/20',
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',

// Transition
'transition duration-200',

// Misc
'cursor-pointer select-none',
],
}),
nodeCheckbox: ({ props, context, instance }) => ({
root: {
class: [
'relative',

// Alignment
'inline-flex',
'align-bottom',

// Size
'w-6',
'h-6',

// Spacing
'mr-2',

// Misc
'cursor-pointer',
'select-none',
],
},
box: {
class: [
// Alignment
'flex',
'items-center',
'justify-center',

// Size
'w-6',
'h-6',

// Shape
'rounded-md',
'border-2',

// Colors
{
'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
'border-primary bg-primary': context.checked,
},

// States
{
'peer-hover:border-primary': !props.disabled && !context.checked,
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
'cursor-default opacity-60': 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-md',
'outline-none',
'border-2 border-surface-200 dark:border-surface-700',

// Misc
'appearance-none',
'cursor-pointer',
],
},
icon: {
class: [
// Font
'text-base leading-none',

// Size
'w-4',
'h-4',

// Colors
{
'text-white dark:text-surface-900': !instance.partialChecked,
'text-gray dark:text-white': instance.partialChecked,
},

// Transitions
'transition-all',
'duration-200',
],
},
}),
nodeicon: {
class: [
// Space
'mx-2',

// Color
],
box: {
class: [
// Alignment
'flex',
'items-center',
'justify-center',

// Size
'w-5',
'h-5',

// Shape
'rounded-md',
'border',

// Colors
{
[boxColors]: context.checked,
},

// States
{
'peer-hover:border-gray-300': !props.disabled && !context.checked,
'cursor-default opacity-60': 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-md',
'outline-none',

// Misc
'appearance-none',
'cursor-pointer',
],
},
};
},
subgroup: {
class: ['m-0 list-none p-0 pl-2 mt-1'],
nodeicon: {
class: ['mx-2'],
},
filtercontainer: {
class: [
'relative block',

// Space
'mb-2',

// Size
'w-full',
],
pcFilterContainer: {
class: ['relative block', 'mb-2', 'w-full'],
},
input: {
class: [
'relative',
// Font
'leading-none',

// Spacing
'm-0',
'p-3 pr-10',

// Size
'w-full',

// Shape
'rounded-md',

// Colors
'text-surface-600 dark:text-surface-200',
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
'bg-surface-0 dark:bg-surface-900',
'border border-surface-300 dark:border-surface-600',

// States
'hover:border-primary',
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50',

// Transition & Misc
'appearance-none',
'transition-colors duration-200',
],
pcFilterInput: ({ props }) => {
return {
class: props.pt.filterInputClass,
};
},
loadingicon: {
class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin'],
},
searchicon: {
class: [
// Position
'absolute top-1/2 -mt-2 right-3',

// Color
'text-surface-600 dark:hover:text-white/70',
],
class: ['absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin'],
},
};

0 comments on commit 823a3e9

Please sign in to comment.