typescript 一种基于一组主题来对组件进行主题化的方法。

Posted 2021-05-21

$theme-and-color: (
  'primary': $color__primary,
  'accent': $color__accent,
  'error': $color__error,
  'warn': $color__warn,
  'highlight': $color__highlight,
  'pure': $color__pure--light,
  'utility': $color__utility
);

/**
 * Output conditional styles for the possible themes
 *
 * @mixin theme-color
 * @section Functions
 * @param $property
 *  The CSS property that should be colored. Default: 'background-color'
 * @example
 *  @include theme-color;
 *  @include theme-color('color');
 */
@mixin theme-color($property: 'background-color') {
  // Verify an allowed property was passed in
  @if not(($property == background-color)) and not(($property == color)) {
    @error 'The `theme__color` mixin only accepts `background-color` or `color`';
  }

  @each $key, $value in $theme-and-color {
    ::ng-deep .u-theme--#{$key} & {
      #{$property}: $value;

      @if ($property == 'background-color') and (not(($key == 'pure')) and not(($key == 'highlight'))) {
        color: $color__pure--light;
      }

      @if ($property == 'background-color') and ($key == 'highlight') {
        color: $color__pure--dark;
      }

      &[disabled] {
        background-color: color(utility, light);
        color: color(utility);
      }
    }
  }
}

import {
  Component,
  Input,
  ElementRef,
} from '@angular/core';

import { TsStyleThemeTypes } from './../types/style-theme.types';


/**
 * A base class to set a class theme on a component
 */
@Component({
  selector: 'ts-theme-base',
})
export class TsThemeBaseComponent {
  /**
   * Define the button style
   */
  @Input() set theme(theme: TsStyleThemeTypes) {
    if (!theme) {
      return;
    }

    this.element.nativeElement.classList.add(`u-theme--${theme}`);
  };

  constructor(
    protected element: ElementRef,
  ) {}

}

// Global material overrides
::ng-deep .mat-option.mat-selected.mat-primary,
::ng-deep .mat-primary .mat-option.mat-selected {
  color: color(primary);
}

// sass-lint:disable force-pseudo-nesting
::ng-deep .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger {
  color: color(primary);
}

::ng-deep .mat-primary .mat-pseudo-checkbox-checked,
::ng-deep .mat-primary .mat-pseudo-checkbox-indeterminate,
::ng-deep .mat-pseudo-checkbox-checked.mat-primary,
::ng-deep .mat-pseudo-checkbox-indeterminate.mat-primary {
  background: color(primary);
}
// sass-lint:enable force-pseudo-nesting

// Global material overrides
::ng-deep .mat-option.mat-selected.mat-primary,
::ng-deep .mat-primary .mat-option.mat-selected {
  color: color(primary);
}

// sass-lint:disable force-pseudo-nesting
::ng-deep .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger {
  color: color(primary);
}
// sass-lint:enable force-pseudo-nesting

// Global material overrides
::ng-deep .mat-focused .mat-input-placeholder {
  color: color(primary);
}

::ng-deep .mat-input-ripple {
  background-color: color(primary);
}

// Global material overrides
::ng-deep .mat-calendar-body-selected {
  background-color: color(primary);
}

import {
  Component,
  Input,
  Output,
  EventEmitter,
  ElementRef,
} from '@angular/core';

import { ButtonActionTypes } from './../types/button-action.types';
import { ButtonFunctionTypes } from './../types/button-function.types';
import { TsThemeBaseComponent } from './../utilities/theme-base.component';


/**
 * A presentational component to render a button
 * TODO: Text color transition doesn't match the background transition timing
 *
 * @example
 * <ts-button
 *              actionName="Submit"
 *              theme="primary"
 *              buttonType="search"
 *              iconName="search"
 *              isDisabled="false"
 *              showProgress="true"
 *              (clickEvent)="myMethod($event)
 * ></ts-button>
 */
@Component({
  selector: 'ts-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
})
export class TsButtonComponent extends TsThemeBaseComponent {
  /**
   * Define the action for the aria-label
   */
  @Input() actionName: ButtonActionTypes = 'Button';

  /**
   * Define the button type
   */
  @Input() buttonType: ButtonFunctionTypes = 'button';

  /**
   * Define a Material icon to include
   */
  @Input() iconName: string;

  /**
   * Define if the button is disabled
   */
  @Input() isDisabled: boolean = false;

  /**
   * Define if the progress indicator should show
   */
  @Input() showProgress: boolean = false;

  /**
   * Pass the click event through to the parent
   */
  @Output() clickEvent = new EventEmitter<any>();

  constructor(
    protected element: ElementRef,
  ) {
    super(element);
  }

}