Skip to content

Commit

Permalink
add filled for floatlabel to forms #135
Browse files Browse the repository at this point in the history
  • Loading branch information
@atakantepe
atakantepe committed May 3, 2024
1 parent ca97189 commit c565c45
Show file tree
Hide file tree
Showing 16 changed files with 372 additions and 333 deletions.
5 changes: 4 additions & 1 deletion presets/aura/autocomplete/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default {
inputtoken: {
class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
},
input: ({ props }) => ({
input: ({ props, parent }) => ({
class: [
// Font
'text-base leading-none',
Expand Down Expand Up @@ -95,6 +95,9 @@ export default {
// States
{ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.multiple },

// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== '' },

// Transition
'transition-colors duration-200'
]
Expand Down
7 changes: 5 additions & 2 deletions presets/aura/calendar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default {
'relative'
]
},
input: ({ props }) => ({
input: ({ props, parent, context }) => ({
class: [
// Display
'flex flex-auto',
Expand Down Expand Up @@ -45,7 +45,10 @@ export default {
'hover:border-surface-400 dark:hover:border-surface-600': !props.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
}
},

// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null }
]
}),
inputicon: {
Expand Down
219 changes: 111 additions & 108 deletions presets/aura/chips/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,111 @@
export default {
root: ({ props, parent }) => ({
class: [
'flex',
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
{
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
}
]
}),
container: ({ state, props }) => ({
class: [
// Font
'leading-none',

// Flex
'flex items-center flex-wrap',
'gap-2',

// Spacing
'm-0 list-none',
'p-1',

// Size
'w-full',

// Shape
'appearance-none rounded-md',

// Color
'text-surface-700 dark:text-white/80',
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
'border',
{ 'border-surface-300 dark:border-surface-700': !props.invalid },

// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },

// States
{ 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
{ 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },

// Transition
'transition duration-200 ease-in-out',

// Misc
'cursor-text overflow-hidden'
]
}),
inputtoken: {
class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
},
input: {
class: [
// Font
'text-base leading-[normal]',

// Size
'w-full',

// Spacing
'p-0 m-0',

// Shape
'appearance-none rounded-none',
'border-0 outline-none',
'shadow-none',

// Color
'text-surface-700 dark:text-white/80',
'bg-transparent'
]
},
token: {
class: [
// Flex
'inline-flex items-center',

// Spacings
'py-1 px-3 m-0',

// Shape
'rounded',

// Colors
'bg-surface-100 dark:bg-surface-700',
'text-surface-700 dark:text-white',

// Misc
'cursor-default'
]
},
removeTokenIcon: {
class: [
// Spacing
'ml-[0.375rem]',

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

// Misc
'cursor-pointer'
]
}
};
export default {
root: ({ props, parent }) => ({
class: [
'flex',
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
{
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
}
]
}),
container: ({ state, props, parent }) => ({
class: [
// Font
'leading-none',

// Flex
'flex items-center flex-wrap',
'gap-2',

// Spacing
'm-0 list-none',
'p-1',

// Size
'w-full',

// Shape
'appearance-none rounded-md',

// Color
'text-surface-700 dark:text-white/80',
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
'border',
{ 'border-surface-300 dark:border-surface-700': !props.invalid },

// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },

// States
{ 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
{ 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },

// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },

// Transition
'transition duration-200 ease-in-out',

// Misc
'cursor-text overflow-hidden'
]
}),
inputtoken: {
class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
},
input: {
class: [
// Font
'text-base leading-[normal]',

// Size
'w-full',

// Spacing
'p-0 m-0',

// Shape
'appearance-none rounded-none',
'border-0 outline-none',
'shadow-none',

// Color
'text-surface-700 dark:text-white/80',
'bg-transparent'
]
},
token: {
class: [
// Flex
'inline-flex items-center',

// Spacings
'py-1 px-3 m-0',

// Shape
'rounded',

// Colors
'bg-surface-100 dark:bg-surface-700',
'text-surface-700 dark:text-white',

// Misc
'cursor-default'
]
},
removeTokenIcon: {
class: [
// Spacing
'ml-[0.375rem]',

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

// Misc
'cursor-pointer'
]
}
};
5 changes: 4 additions & 1 deletion presets/aura/dropdown/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default {
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
]
}),
input: ({ props }) => ({
input: ({ props, parent }) => ({
class: [
//Font
'leading-[normal]',
Expand Down Expand Up @@ -67,6 +67,9 @@ export default {
// States
'focus:outline-none focus:shadow-none',

// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null },

// Misc
'relative',
'cursor-pointer',
Expand Down
44 changes: 22 additions & 22 deletions presets/aura/iconfield/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
export default {
root: ({ props }) => ({
class: [
'relative',
'[&>input]:w-full',

'[&>*:first-child]:absolute',
'[&>*:first-child]:top-1/2',
'[&>*:first-child]:-mt-2',
'[&>*:first-child]:leading-none',
'[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60',
{
'[&>*:first-child]:right-3': props.iconPosition === 'right',
'[&>*:first-child]:left-3': props.iconPosition === 'left'
},
{
'[&>*:last-child]:pr-10': props.iconPosition === 'right',
'[&>*:last-child]:pl-10': props.iconPosition === 'left'
}
]
})
};
export default {
root: ({ props }) => ({
class: [
'relative',
'[&>input]:w-full',

'[&>*:first-child]:absolute',
'[&>*:first-child]:top-1/2',
'[&>*:first-child]:-mt-2',
'[&>*:first-child]:leading-none',
'[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60',
{
'[&>*:first-child]:right-3': props.iconPosition === 'right',
'[&>*:first-child]:left-3': props.iconPosition === 'left'
},
{
'[&>*:last-child]:pr-10': props.iconPosition === 'right',
'[&>*:last-child]:pl-10': props.iconPosition === 'left'
}
]
})
};
75 changes: 39 additions & 36 deletions presets/aura/inputmask/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,39 @@
export default {
root: ({ context, props }) => ({
class: [
// Font
'leading-none',

// Spacing
'm-0 py-2 px-3',

// Colors
'text-surface-800 dark:text-white/80',
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },

'border',
{ 'border-surface-300 dark:border-surface-700': !props.invalid },

// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },

// States
{
'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
},

// Misc
'rounded-md',
'appearance-none',
'transition-colors duration-200'
]
})
};
export default {
root: ({ context, props, parent }) => ({
class: [
// Font
'leading-none',

// Spacing
'm-0 py-2 px-3',

// Colors
'text-surface-800 dark:text-white/80',
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },

'border',
{ 'border-surface-300 dark:border-surface-700': !props.invalid },

// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },

// States
{
'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
},

// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },

// Misc
'rounded-md',
'appearance-none',
'transition-colors duration-200'
]
})
};
Loading

0 comments on commit c565c45

Please sign in to comment.