Skip to content

Commit

Permalink
feat(Listbox): add xl size
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Jun 5, 2024
1 parent 0c0d9a9 commit fb78f84
Show file tree
Hide file tree
Showing 7 changed files with 791 additions and 105 deletions.
100 changes: 90 additions & 10 deletions src/plugins/components/listbox/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export default plugin(({ addComponents, theme }) => {
},
//Label:float
'.nui-label-float': {
'@apply top-1.5': {},
'@apply top-2.5': {},
},
},
//Listbox:icon
Expand Down Expand Up @@ -256,7 +256,7 @@ export default plugin(({ addComponents, theme }) => {
},
//Label:float
'.nui-label-float': {
'@apply top-1.5': {},
'@apply top-3.5': {},
},
//Listbox:icon
'.nui-listbox-icon': {
Expand All @@ -283,6 +283,40 @@ export default plugin(({ addComponents, theme }) => {
},
},
},
//Size:xl
'&.nui-listbox-xl': {
'.nui-listbox-label': {
[`@apply pb-1 text-${config.size.xl.font.size}`]: {},
},
//Label:float
'.nui-label-float': {
'@apply top-[1.1rem]': {},
},
//Listbox:icon
'.nui-listbox-icon': {
[`@apply h-${config.size.xl.icon.size.outer} w-${config.size.xl.icon.size.outer}`]:
{},

'.nui-listbox-icon-inner': {
[`@apply h-${config.size.xl.icon.size.inner} w-${config.size.xl.icon.size.inner}`]:
{},
},
},
//Listbox:placeload
'.nui-listbox-placeload': {
[`@apply h-${config.size.xl.placeload.size}`]: {},
},
//Listbox:chevron
'.nui-listbox-chevron': {
[`@apply h-${config.size.xl.chevron.outer.size} w-${config.size.xl.chevron.outer.size}`]:
{},
//Chevron:inner
'.nui-listbox-chevron-inner': {
[`@apply h-${config.size.xl.chevron.inner.size} w-${config.size.xl.chevron.inner.size}`]:
{},
},
},
},
//Rounded:sm
'&.nui-listbox-rounded-sm': {
'.nui-listbox-button, .nui-listbox-options, .nui-listbox-option': {
Expand Down Expand Up @@ -541,6 +575,20 @@ export default plugin(({ addComponents, theme }) => {
{},
},
},
//Without:icon && Size:xl
'&:not(.nui-has-icon).nui-listbox-xl': {
'.nui-listbox-button': {
[`@apply h-14 py-2 text-${config.icon.disabled.input.xl.font.size} leading-5 px-4`]:
{},
},
},
//With:icon && Size:xl
'&.nui-has-icon.nui-listbox-xl': {
'.nui-listbox-button': {
[`@apply h-14 py-2 text-${config.icon.enabled.input.xl.font.size} leading-5 pe-4 ps-12`]:
{},
},
},
//Without:icon && Size:sm && Label:float
'&.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-sm': {
'.nui-label-float': {
Expand Down Expand Up @@ -572,12 +620,12 @@ export default plugin(({ addComponents, theme }) => {
//Without:icon && Size:md && Label:float
'&.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-md': {
'.nui-label-float': {
[`@apply start-3 -ms-3 -mt-7 text-${config.icon.disabled.label.float.md.font.size.base} text-transparent`]:
[`@apply start-3 -ms-3 -mt-8 text-${config.icon.disabled.label.float.md.font.size.base} text-transparent`]:
{},
},
'.nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active':
{
[`@apply !-ms-3 !-mt-7 !text-${config.icon.disabled.label.float.md.font.size.focus} !text-${config.label.float.font.color}`]:
[`@apply !-ms-3 !-mt-8 !text-${config.icon.disabled.label.float.md.font.size.focus} !text-${config.label.float.font.color}`]:
{},
},
'.nui-listbox-button ~ .nui-label-float': {
Expand All @@ -588,12 +636,12 @@ export default plugin(({ addComponents, theme }) => {
//With:icon && Size:md && Label:float
'&.nui-listbox-label-float.nui-has-icon.nui-listbox-md': {
'.nui-label-float': {
[`@apply start-10 -ms-10 -mt-7 text-${config.icon.enabled.label.float.md.font.size.base} text-transparent`]:
[`@apply start-10 -ms-10 -mt-8 text-${config.icon.enabled.label.float.md.font.size.base} text-transparent`]:
{},
},
'.nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active':
{
[`@apply !-ms-10 !-mt-7 !text-${config.icon.enabled.label.float.md.font.size.focus} !text-${config.label.float.font.color}`]:
[`@apply !-ms-10 !-mt-8 !text-${config.icon.enabled.label.float.md.font.size.focus} !text-${config.label.float.font.color}`]:
{},
},
'.nui-listbox-button ~ .nui-label-float': {
Expand All @@ -604,12 +652,12 @@ export default plugin(({ addComponents, theme }) => {
//Without:icon && Size:lg && Label:float
'&.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-lg': {
'.nui-label-float': {
[`@apply start-3 -ms-3 -mt-7 text-${config.icon.disabled.label.float.lg.font.size.base} text-transparent`]:
[`@apply start-3 -ms-3 -mt-9 text-${config.icon.disabled.label.float.lg.font.size.base} text-transparent`]:
{},
},
'.nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active':
{
[`@apply !-ms-3 !-mt-7 !text-${config.icon.disabled.label.float.lg.font.size.focus} !text-${config.label.float.font.color}`]:
[`@apply !-ms-3 !-mt-9 !text-${config.icon.disabled.label.float.lg.font.size.focus} !text-${config.label.float.font.color}`]:
{},
},
'.nui-listbox-button ~ .nui-label-float': {
Expand All @@ -620,19 +668,51 @@ export default plugin(({ addComponents, theme }) => {
//With:icon && Size:lg && Label:float
'&.nui-listbox-label-float.nui-has-icon.nui-listbox-lg': {
'.nui-label-float': {
[`@apply start-11 -ms-10 -mt-7 text-${config.icon.enabled.label.float.lg.font.size.base} text-transparent`]:
[`@apply start-11 -ms-10 -mt-9 text-${config.icon.enabled.label.float.lg.font.size.base} text-transparent`]:
{},
},
'.nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active':
{
[`@apply !-ms-10 !-mt-7 !text-${config.icon.enabled.label.float.lg.font.size.focus} !text-${config.label.float.font.color}`]:
[`@apply !-ms-10 !-mt-9 !text-${config.icon.enabled.label.float.lg.font.size.focus} !text-${config.label.float.font.color}`]:
{},
},
'.nui-listbox-button ~ .nui-label-float': {
[`@apply ms-0 mt-0 text-${config.icon.enabled.label.float.lg.font.size.unfocus}`]:
{},
},
},
//Without:icon && Size:xl && Label:float
'&.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-xl': {
'.nui-label-float': {
[`@apply start-3 -ms-3 -mt-10 text-${config.icon.disabled.label.float.xl.font.size.base} text-transparent`]:
{},
},
'.nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active':
{
[`@apply !-ms-3 !-mt-10 !text-${config.icon.disabled.label.float.xl.font.size.focus} !text-${config.label.float.font.color}`]:
{},
},
'.nui-listbox-button ~ .nui-label-float': {
[`@apply ms-0 mt-0 text-${config.icon.disabled.label.float.xl.font.size.unfocus}`]:
{},
},
},
//With:icon && Size:xl && Label:float
'&.nui-listbox-label-float.nui-has-icon.nui-listbox-xl': {
'.nui-label-float': {
[`@apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-${config.icon.enabled.label.float.xl.font.size.base} text-transparent`]:
{},
},
'.nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active':
{
[`@apply !-ms-[3.25rem] !-mt-10 !text-${config.icon.enabled.label.float.xl.font.size.focus} !text-${config.label.float.font.color}`]:
{},
},
'.nui-listbox-button ~ .nui-label-float': {
[`@apply ms-0 mt-0 text-${config.icon.enabled.label.float.xl.font.size.unfocus}`]:
{},
},
},
},
})
}, config)
2 changes: 1 addition & 1 deletion src/plugins/components/listbox/listbox.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const Listbox = ({
</div>
${loading &&
html`
<div class="nui-listbox-placeload">
<div class="nui-listbox-placeload nui-loading-placeload">
<span class="nui-placeload animate-nui-placeload"></span>
</div>
`}
Expand Down
52 changes: 51 additions & 1 deletion src/plugins/components/listbox/listbox.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,29 @@ export const defaultConfig = {
size: '12',
},
inner: {
size: '4',
size: '5',
},
},
},
xl: {
font: {
size: 'sm',
},
icon: {
size: {
inner: '5',
outer: '14',
},
},
placeload: {
size: '14',
},
chevron: {
outer: {
size: '14',
},
inner: {
size: '5',
},
},
},
Expand Down Expand Up @@ -451,6 +473,11 @@ export const defaultConfig = {
size: 'sm',
},
},
xl: {
font: {
size: 'base',
},
},
},
label: {
float: {
Expand All @@ -477,6 +504,15 @@ export const defaultConfig = {
},
},
},
xl: {
font: {
size: {
base: 'xs',
focus: 'xs',
unfocus: '[0.825rem]',
},
},
},
},
},
},
Expand All @@ -493,6 +529,11 @@ export const defaultConfig = {
},
},
lg: {
font: {
size: 'sm',
},
},
xl: {
font: {
size: 'base',
},
Expand Down Expand Up @@ -523,6 +564,15 @@ export const defaultConfig = {
},
},
},
xl: {
font: {
size: {
base: 'xs',
focus: 'xs',
unfocus: '[0.825rem]',
},
},
},
},
},
},
Expand Down
Loading

0 comments on commit fb78f84

Please sign in to comment.