npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tyatech-ui

v0.1.7

Published

Tya Technologies

Downloads

10

Readme

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: [email protected]

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>