-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(button/config): module configuration
- Loading branch information
1 parent
eb5eaef
commit 479fca8
Showing
4 changed files
with
231 additions
and
93 deletions.
There are no files selected for viewing
83 changes: 83 additions & 0 deletions
83
projects/ng-tw/src/modules/button/button-config.interface.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| export interface TwButtonConfig { | ||
| global: string; | ||
| font: { | ||
| weight: string; | ||
| }; | ||
| disabled: { | ||
| basic: { | ||
| class: string; | ||
| ignore: string; | ||
| }; | ||
| raised: { | ||
| class: string; | ||
| ignore: string; | ||
| }; | ||
| stroked: { | ||
| class: string; | ||
| ignore: string; | ||
| }; | ||
| flat: { | ||
| class: string; | ||
| ignore: string; | ||
| }; | ||
| }; | ||
| layout: { | ||
| basic: { | ||
| basic: string; | ||
| primary: string; | ||
| secondary: string; | ||
| danger: string; | ||
| tailwind: string; | ||
| ignore: string; | ||
| }; | ||
| raised: { | ||
| basic: string; | ||
| primary: string; | ||
| secondary: string; | ||
| danger: string; | ||
| tailwind: string; | ||
| global: string; | ||
| ignore: string; | ||
| }; | ||
| stroked: { | ||
| basic: string; | ||
| primary: string; | ||
| secondary: string; | ||
| danger: string; | ||
| tailwind: string; | ||
| global: string; | ||
| ignore: string; | ||
| }; | ||
| flat: { | ||
| basic: string; | ||
| primary: string; | ||
| secondary: string; | ||
| danger: string; | ||
| tailwind: string; | ||
| global: string; | ||
| ignore: string; | ||
| }; | ||
| }; | ||
| sizes: { | ||
| xs: { | ||
| class: string; | ||
| ignore: string; | ||
| }; | ||
| sm: { | ||
| class: string; | ||
| ignore: string; | ||
| }; | ||
| md: { | ||
| class: string; | ||
| ignore: string; | ||
| }; | ||
| lg: { | ||
| class: string; | ||
| ignore: string; | ||
| }; | ||
| xl: { | ||
| class: string; | ||
| ignore: string; | ||
| }; | ||
| }; | ||
| } |
108 changes: 108 additions & 0 deletions
108
projects/ng-tw/src/modules/button/button-config.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import { Inject, Injectable, InjectionToken, Optional } from '@angular/core'; | ||
| import { isEmpty, merge } from 'lodash'; | ||
| import { TwButtonConfig } from './button-config.interface'; | ||
|
|
||
| /** | ||
| * This is not a real service, but it looks like it from the outside. | ||
| * It's just an InjectionTToken used to import the config object, provided from the outside | ||
| */ | ||
| export const TwButtonSetup = new InjectionToken<TwButtonConfig>('TwButtonConfig'); | ||
|
|
||
| @Injectable({ | ||
| providedIn: 'root', | ||
| }) | ||
| export class TwButtonConfigService { | ||
| public config: TwButtonConfig = { | ||
| global: 'focus:outline-none border border-transparent rounded', | ||
| font: { | ||
| weight: 'font-medium', | ||
| }, | ||
| disabled: { | ||
| basic: { | ||
| class: 'disabled:bg-transparent disabled:text-gray-200', | ||
| ignore: '', | ||
| }, | ||
| raised: { | ||
| class: 'disabled:bg-gray-200 disabled:text-gray-300', | ||
| ignore: '', | ||
| }, | ||
| stroked: { | ||
| class: 'disabled:border disabled:border-gray-200 disabled:text-gray-200', | ||
| ignore: 'hover:bg-gray-100 hover:bg-primary-50 hover:bg-secondary-100 hover:bg-danger-100', | ||
| }, | ||
| flat: { | ||
| class: 'disabled:bg-gray-200 disabled:text-gray-300', | ||
| ignore: '', | ||
| }, | ||
| }, | ||
| layout: { | ||
| basic: { | ||
| basic: 'hover:bg-gray-100', | ||
| primary: 'hover:bg-primary-50 text-primary', | ||
| secondary: 'hover:bg-secondary-50 text-secondary', | ||
| danger: 'hover:bg-danger-50 text-danger', | ||
| tailwind: 'hover:bg-{color}-50 text-{color}-600', | ||
| ignore: '', | ||
| }, | ||
| raised: { | ||
| basic: 'bg-white', | ||
| primary: 'text-white bg-primary', | ||
| secondary: 'text-white bg-secondary', | ||
| danger: 'text-white bg-danger', | ||
| tailwind: 'text-white bg-{color}-600', | ||
| global: 'shadow-sm hover:active:shadow-lg', | ||
| ignore: '', | ||
| }, | ||
| stroked: { | ||
| basic: 'hover:bg-gray-100', | ||
| primary: 'text-primary hover:bg-primary-50', | ||
| secondary: 'text-secondary hover:bg-secondary-100', | ||
| danger: 'text-danger hover:bg-danger-100', | ||
| tailwind: 'text-{color}-600 hover:bg-{color}-200', | ||
| global: 'bg-transparent border border-gray-200', | ||
| ignore: '', | ||
| }, | ||
| flat: { | ||
| basic: 'bg-white', | ||
| primary: 'text-white bg-primary focus:ring-primary-500', | ||
| secondary: 'text-white bg-secondary focus:ring-secondary-500', | ||
| danger: 'text-white bg-danger focus:ring-danger-500', | ||
| tailwind: 'text-white bg-{color}-600 focus:ring-{color}-600', | ||
| global: 'focus:ring-2 focus:ring-offset-2', | ||
| ignore: '', | ||
| }, | ||
| }, | ||
| sizes: { | ||
| xs: { | ||
| class: 'px-2.5 py-1.5 text-xs', | ||
| ignore: '', | ||
| }, | ||
| sm: { | ||
| class: 'px-3 py-1.5 text-sm', | ||
| ignore: '', | ||
| }, | ||
| md: { | ||
| class: 'px-4 py-2 text-sm', | ||
| ignore: '', | ||
| }, | ||
| lg: { | ||
| class: 'px-4 py-2 text-base', | ||
| ignore: '', | ||
| }, | ||
| xl: { | ||
| class: 'px-6 py-3 text-base', | ||
| ignore: '', | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| constructor(@Optional() @Inject(TwButtonSetup) public options: TwButtonConfig) { | ||
| // | ||
| // Validate | ||
| if (isEmpty(options)) return; | ||
|
|
||
| // | ||
| // Merge options | ||
| this.config = merge(this.config, options); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,40 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { ModuleWithProviders, NgModule } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { ButtonComponent } from './button.component'; | ||
| import { TwButtonConfigService, TwButtonSetup } from './button-config.service'; | ||
| import { TwButtonConfig } from './button-config.interface'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [ButtonComponent], | ||
| imports: [CommonModule], | ||
| exports: [ButtonComponent], | ||
| declarations: [ButtonComponent], | ||
| imports: [CommonModule], | ||
| exports: [ButtonComponent], | ||
| }) | ||
| export class TwButtonModule {} | ||
| export class TwButtonModule { | ||
| static forRoot(options?: Partial<TwButtonConfig>): ModuleWithProviders<TwButtonModule> { | ||
| return { | ||
| ngModule: TwButtonModule, | ||
| providers: [ | ||
| TwButtonConfigService, | ||
| { | ||
| provide: TwButtonSetup, | ||
| useValue: options, | ||
| }, | ||
| ], | ||
| }; | ||
| } | ||
| } | ||
| @NgModule() | ||
| export class TwButtonConfigModule { | ||
| static forRoot(options?: Partial<TwButtonConfig>): ModuleWithProviders<TwButtonConfigModule> { | ||
| return { | ||
| ngModule: TwButtonModule, | ||
| providers: [ | ||
| TwButtonConfigService, | ||
| { | ||
| provide: TwButtonSetup, | ||
| useValue: options, | ||
| }, | ||
| ], | ||
| }; | ||
| } | ||
| } |