tyatech-ui v0.1.7

Tyatech UI

Installation

npm i tyatech-ui

Recommend using Angular version 12.2.17 or higher. Recommend to use Nebular version 8.0.0 or higher.

*Update style.scss

....

@import 'tyatech-ui/tyatech-ui.scss';

....

{
  ...
  "projects": {
    "ngx-admin-demo": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              ...
              "node_modules/tyatech-ui/tyatech-ui.scss",
              //styles.scss
            ],
            ...
          },
        },
        "test": {
          ...
          "options": {
            ...
            "styles": [
              ...
              "node_modules/tyatech-ui/tyatech-ui.scss",
              //styles.scss
            ],
            ...
          },
        },
      },
    },
  },
}

New Features!

Contributions

Contributions are very welcome! It helps me know what features are desired or what bugs are causing the most pain.

I have just one request; If you submit a pull request for a bugfix, please add a unit-test or integration-test (in the spec folder) that catches the problem. Even a PR that just has a failing test is fine - I can analyse what the test is doing and fix the code from that.

Contact Info: truonganh710@gmail.com

Note: Please try to avoid modifying the package version in a PR. Versions are updated on release and any change will most likely result in merge collisions.

To be clear, all contributions added to this library will be included in the library's MIT licence.

Contents

Format Vietnamese numbers on input cards on Nebular Format Vietnamese numbers on input card Autocomplete Generate QR Code Tya Icon Tya Color Picker

Format Vietnamese numbers on input cards on Nebular⬆

Import module

import { TyaNumberVnInputModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    ...
    TyaNumberVnInputModule,
  ],
})

HTML:

<tya-number-vn-input
  [value]="100300490" 
  [statusInput]="'basic'"
  (changeValue)="retunr($event)"
  [disabled]="false"
></tya-number-vn-input>

value : Input value statusInput : Color status

Format Vietnamese numbers on input card⬆

Import module

import { TyaDirectivesModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaDirectivesModule,
    ...
  ],
})

HTML:

<input TyaNumberVNInput/>

Autocomplete⬆

Import module

import { TyaAutocompleteModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaAutocompleteModule,
    ...
  ],
})

HTML:

<tya-autocomplete
  [data]="lstDataKey"
  key="key"
  value="value"
  fullWidth="true"
  status="basic"
  placeholder="Enter value"
  [isWarning]="true"
  nbPopoverPlacement="top"
  warningContent="Data entered incorrectly"
  messageNoData="No data"
  (valueChange)="returnAutoComlete($event)"
></tya-autocomplete>

data : List data key : Key data field value : Display content data field fullWidth : If set element will fill container. false by default. status : Color status. basic by default.

Component

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

@Component({
  selector: 'ngx-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  lstDataKey: Partial<Array<{ key: string, value: string }>> = [];

  constructor() { }

  ngOnInit(): void {
    this.lstDataKey = [
      {
        key: '1',
        value: 'Option 1'
      },
      {
        key: '2',
        value: 'Option 2'
      },
      {
        key: '3',
        value: 'Option 3'
      }
    ];
  }

  returnAutoComlete(e) {
    console.log(e); //return key
  }
}

Generate QR Code⬆

Import module

import { TyaQrcodeModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaQrcodeModule,
    ...
  ],
})

HTML:

<tya-qrcode
      contentQR="https://www.google.com"
      [width]="256"
      colorQR="#000000ff"
      colorBackground="#ffffffff"
      [scale]="4"
      [margin]="4"
      urlImage="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg"
      [typeQr]="typeQrData[indexType].value"
      [typeDots]="optionAdvancedQrData[indexOption].value"
></tya-qrcode>

contentQR : Content of QR CODE. No data by default. width : Width of QR code. 256 by default. colorQR : Color of QR Code. #000000ff by default. colorBackground : Color of the Background. #ffffffff by default. scale : Scale factor. A value of 1 means 1px per modules (black dots). 4 by default. margin : Define how much wide the quiet zone should be. 4 by default. cssClass : CSS Class. qrcode by default. typeQr : QR code type. Basic by default. urlImage : Image link shows QR code. typeDots : Type dots option. dots by default.

Preconfigured typeQr and typeDots data, see example:

Component

import { Component, OnInit } from '@angular/core';
import { OptionAdvancedQr, OptionAdvancedQrData, TypeQr, TypeQrData } from 'tyatech-ui';

...

export class MyComponent implements OnInit {

  typeQr = TypeQr;
  optionAdvancedQr = OptionAdvancedQr;
  typeQrData = TypeQrData;
  optionAdvancedQrData = OptionAdvancedQrData;
  isShow = true;

  indexType = 1;
  indexOption = 2;

  constructor() { }

  ngOnInit(): void {
  }

  getIndexType(key: string) {
    this.isShow = false;
    this.indexType = TypeQrData.findIndex(item => item.key === key);
    this.isShow = true;
  }

  getIndexOption(key: string) {
    this.isShow = false;
    this.indexOption = OptionAdvancedQrData.findIndex(item => item.key === key);
    setTimeout(() => {
      this.isShow = true;
    }, 200);
  }
}

Module

import { NgModule } from "@angular/core";
import { TyaQrcodeComponent } from "./tya-qrcode.component";
import { TyaQrcodeModule, TyaAutocompleteModule } from "tyatech-ui";
import { CommonModule } from "@angular/common";

...

@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule,
    TyaQrcodeModule,
    TyaAutocompleteModule
  ],
})
export class MyModule {}

HTML

<div class="row">
  <div class="col-md-12" *ngIf="isShow">
    <tya-qrcode
      contentQR="https://www.google.com"
      [width]="256"
      colorQR="#000000ff"
      colorBackground="#ffffffff"
      [scale]="4"
      [margin]="4"
      urlImage="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg"
      [typeQr]="typeQrData[indexType].value"
      [typeDots]="optionAdvancedQrData[indexOption].value"
    ></tya-qrcode>
  </div>

  <div class="col-md-6 mt-2">
    <label>Type Qr code</label>
    <tya-autocomplete
      [data]="typeQrData"
      key="key"
      value="value"
      fullWidth="true"
      status="basic"
      placeholder="Enter value"
      (valueChange)="getIndexType($event)"
    ></ngx-tya-autocomplete-demo>
  </div>

  <div class="col-md-6 mt-2">
    <label>Option Qr code</label>
    <tya-autocomplete
      [data]="optionAdvancedQrData"
      key="key"
      value="value"
      fullWidth="true"
      status="basic"
      placeholder="Enter value"
      (valueChange)="getIndexOption($event)"
    ></tya-autocomplete>
  </div>
</div>

*Hover mouse over qr code to download

*New Version

Tya Icon⬆

Note: If installed primeng version lower than 12.2.1 and primeicons version lower than 4.1.0. Please upgrade!

Import module

import { TyaIconModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaIconModule,
    ...
  ],
})

HTML:

<tya-icon
  icon="tya-eva-save"
  [spinner]="true"
  size="2rem"
  color="#ffffffff"
  [opacity]="1"
></tya-icon>

icon : Icon name. No data by default. spinner : Icon rotation effect. false by default. size : Icon size. 1.5rem by default. color : Icon color. black by default. opacity : Icon transparency. 1 by default.

List icon

Tya Color Picker⬆

Import module

import { TyaColorPickerModule } from 'tyatech-ui';
...

@NgModule({
  imports: [
    TyaColorPickerModule,
    ...
  ],
})

HTML:

<tya-color-picker
  color="#e23535"
  [fullWidth]="false"
  (colorPickerChange)="change($event)"
></tya-color-picker>

color : The color to show in the color picker dialog. #000000 by default. fallbackColor : Used when the color is not well-formed or is undefined. #000 by default. presetLabel : Label text for the preset colors if any provided (Displayed only when presetColors are passed in). 'Preset colors' by default. presetColors : Array of preset colors to show in the color picker dialog. [] by default. ex: '#000000', '#ffffff' colorMode : Dialog color mode. Pre-installed data in ColorMode, see details below. ColorMode.Color by default. defaultFormat : Output color format. Data is pre-installed in OutputFormat, see details below. OutputFormat.Auto by default. alphaChannel : Alpha mode. Pre-installed data in AlphaChannel, see details below. AlphaChannel.Enabled by default. position : Dialog position. Pre-installed data in PositionDialog, see details below. PositionDialog.Auto by default. dialogDisplay : Dialog positioning mode. Pre-installed data in DialogDisplay, see details below. DialogDisplay.Popup by default. width : Use this option to set color picker dialog width. 300 by default. height : Use this option to force color picker dialog height. 300 by default. if presetColors has a value and if passing height has a value lower than 350, the height will be automatically converted to 350. positionOffset : Dialog offset percentage relative to the directive element. 0 by default. isCmyk : Enables CMYK input format and color change event. false by default. isToggle : Status of the dialog, send when dialog is opened / closed. false by default. isDisabled : Disables opening of the color picker dialog via toggle / events. false by default. fullWidth : set fullWidth. false by default. (colorPickerOpen) : Current color value, send when dialog is opened (value: string). (colorPickerClose) : Current color value, send when dialog is closed (value: string). (colorPickerChange) : Changed color value, send when color is changed (value: string). (colorPickerCancel) : Color select canceled, send when Cancel button is pressed (void). (colorPickerSelect) : Selected color value, send when OK button is pressed (value: string). (inputChange) : Input name and its value, send when user changes color through inputs.({input: string, value: number | string, color: string}) (toggleChange) : Status of the dialog, send when dialog is opened / closed (open: boolean). (sliderChange) : Slider name and its value, send when user changes color through slider.({slider: string, value: number | string, color: string}). (sliderDragStart) : Slider name and current color, send when slider dragging starts (mousedown,touchstart).({slider: string, color: string}). (sliderDragEnd) : Slider name and current color, send when slider dragging ends (mouseup,touchend).({slider: string, color: string}). (cmykColorChange) : Outputs the color as CMYK string if CMYK is enabled (value: string).

*Detailed values: colorMode, defaultFormat, alphaChannel, position, dialogDisplay.

Component

import { 
  ColorMode, 
  OutputFormat, 
  AlphaChannel, 
  PositionDialog, 
  DialogDisplay 
} from 'tyatech-ui';
...

export class TyaColorPickerComponent implements OnInit {
  ...
  colorMode = ColorMode;
  outputFormat = OutputFormat; 
  alphaChannel = AlphaChannel; 
  positionDialog = PositionDialog; 
  dialogDisplay = DialogDisplay; 

  //check
  ngOnInit(): void {
    console.log(this.colorMode)
    console.log(this.outputFormat)
    console.log(this.alphaChannel)
    console.log(this.positionDialog)
    console.log(this.dialogDisplay)
  }
  ...
}

HTML:

<tya-color-picker
  ....
  [colorMode]="colorMode.Color"
  [defaultFormat]="outputFormat.Auto"
  [alphaChannel]="alphaChannel.Enabled"
  [position]="positionDialog.Auto"
  [dialogDisplay]="dialogDisplay.Popup"
  ....
></tya-color-picker>