tpk-ui

1.4.2 • Public • Published

tpk-ui

Ui components (input, textarea, radio, checkbox, select, modal, flash messages, tooltips, etc.), with tailwindcss 1.* for ember

Compatibility

  • Ember.js v3.16 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Installation

ember install tpk-ui

Install will automaticaly install the validator package for the validation.

❓ This addon is using ember-base-form-validation for validation of inputs and most of components extends BaseValidationInputComponent class and so must be linked to a BaseValidationFormComponent by the @parent attribute.

Available inputs components

  • TpkTimepicker
  • TpkInput
  • TpkTextarea
  • TpkRadioGroup
  • TpkCheckboxGroup
  • TpkSelect

Other components

  • TpkFlash
  • TpkBubble
  • TpkModal
  • TpkSlider

Full example

<ValidationForm  {{on "submit" this.submit}} @schema={{this.validation}} as |tpkform|>
 
    <div class="block">
      <TpkTimepicker 
        @value={{mut @model.timestart}} 
        @mode="12"
        @startHour="8"
        @endHour="11"
        @onchange={{action "settime" "timestart"}}
      />
    </div>
 
    
 
    <div class="block">
      <TpkTimepicker 
        @value={{@model.datetimestart}} 
        @steps="10"
        @isDate="true"
        @onchange={{action "settime" "datetimestart"}}
      />
    </div>
 
    @value: valeur à traiter
    @mode 12 || 24 sytème horaire à 12 (AM/PM) ou 24h - 24 par défaut
    @isDate la valeur est une date (true/false) - false par défaut
 
    <div class="block">
      <TpkInput 
        @parent={{tpkform}}
        @value={{@model.firstname}} 
        @label="Firstname" 
        @validation="firstname"
        @idname="firstname"
        as |i|>
        {{#if i.error}}
          <p>{{i.error}}</p>
        {{/if}}
      </TpkInput>
    </div>
 
    
    <div class="block">
      <TpkTextarea 
        @parent={{tpkform}}
        @value={{@model.description}} 
        @label="Description" 
        @validation="description"
        @idname="description"
        as |i|>
        {{#if i.error}}
          <p>{{i.error}}</p>
        {{/if}}
      </TpkTextarea>
    </div>
    
 
 
    <div class="block">
      {{!-- Action on group change --}}
      <TpkRadioGroup @name="radioselect" @validation="active" @parent={{tpkform}} @onchange={{action "changeRadio"}} as |R|>
 
        {{!-- Action on particular radio input --}}
        <R.radio 
          @idname="radioOn"
          @value="on" 
          @label="On" 
          @model={{@model.active}}
          @onchange={{action "changeParticularRadio"}}
        />
 
        <R.radio 
          @idname="radioOff"
          @value="off" 
          @label="Off"
          @model={{@model.active}} 
        />
 
        {{#if R.error}}
          <p>{{R.error}}</p>
        {{/if}}
 
      </TpkRadioGroup>
      {{@model.active}}
    </div>
    
    <div class="block">
      {{!-- Action on group change --}}
      <TpkCheckboxGroup @name="checkboxselect" @validation="colors" @parent={{tpkform}} @onchange={{action "changeCheckbox"}} as |R|>
 
        {{!-- Action on particular checkbox input --}}
        <R.checkbox   
          @idname="checkRed"
          @value="red" 
          @label="Red" 
          @model={{@model.colors}}
          @onchange={{action "changeParticularCheckbox"}}
        />
 
        <R.checkbox 
          @idname="checkBlue"
          @value="blue" 
          @label="Blue" 
          @model={{@model.colors}}
        />
 
        <R.checkbox 
          @idname="checkGreen"
          @value="green" 
          @label="Green" 
          @model={{@model.colors}}
        />
 
        {{#if R.error}}
          <p>{{R.error}}</p>
        {{/if}}
        
      </TpkCheckboxGroup>
      {{@model.colors}}
    </div>
    
    <div class="block">
      <h2>Select with plain array ['admin','user']</h2>
      <TpkSelect 
        @parent={{tpkform}} 
        @validation="role" 
        @name="roleselect" 
        @selected={{@model.role}}
        @options={{this.options}} 
        @onchange={{this.changeSelect}} as |tpkselect|>
 
        <tpkselect.option />
      
      </TpkSelect>
      {{@model.role}}
    </div>
 
 
    <div class="block">
      <h2>Select with array of objects [{id: 1, name: 'admin'},{id: 2, name: 'user'}]</h2>
      <TpkSelect 
        @parent={{tpkform}} 
        @validation="role" 
        @name="roleselect" 
        @selected={{@model.roleobj}}
        @options={{this.optionsobj}} 
        @onchange={{this.changeSelectObj}} as |tpkselect|>
 
        <tpkselect.option as |opt|>
          {{opt.args.option.name}}
        </tpkselect.option>
      
      </TpkSelect>
      { id: {{@model.roleobj.id}}, name: {{@model.roleobj.name}} }
    </div>
    
    
 
    <div class="block">
      {{#if tpkform.validating}}
        <p>Validating...</p>
      {{else}}
        <input type="submit" {{on "click" tpkform.validate}} value="submit">
      {{/if}}
    </div>
 
</ValidationForm>

Other Components example

TpkFlash


In application template

<TpkFlash />

In controller

@service tpkFlash;

Create flash message

get(this, "tpkFlash").throwFlash({
  type: 'warning',
  htmlSafe: true,
  sticky: true,
  stageTime: 1000,
  message: "Flash Message",
  customClose: get(this, "customClose")
});

type: Default "success"

sticky: Auto hide the flash message, default false

stageTime: If sticky false, time in milliseconds before the flash message removes itself

htmlSafe: Allow html safe tags in message, default false

message: Content of the flash message

customClose: Custom function called on close

Delete specific Flash Message

get(this, "tpkFlash").removeFlash(flash);

Full example

@action
openFlashMessage(type){        
    get(this, "tpkFlash").throwFlash({
      message: "Flash Message",
      customClose: get(this, "customClose")
    });
}
 
@action
customClose(flash){
  get(this, "tpkFlash").removeFlash(flash);
}

Delete all Flash Message

get(this, "tpkFlash").clearFlashes();

TpkBubble


<TpkBubble
    @bubblePosition="top right" as |bubble|
  >
  <bubble.icon>
    Tooltip container
  </bubble.icon>
 
  <bubble.content>
    Tooltip content
  </bubble.content>
 
</TpkBubble>

@bubblePosition: top || bottom, left || right

possible to combine one vertical and one horizontal axis. eg. "top left", "bottom right"

TpkModal


<a href="#" {{action "openModal"}}>Open</a>
<TpkModal @showModal={{this.showModal}} @closePopin={{action "closePopin"}}>
  Modal Content
</TpkModal>
@action
openPopin(){
  set(this, 'showModal', true);
}
 
@action
closePopin(){
  set(this, 'showModal', false);
}

License

This project is licensed under the MIT License.

Package Sidebar

Install

npm i tpk-ui

Weekly Downloads

2

Version

1.4.2

License

MIT

Unpacked Size

147 kB

Total Files

122

Last publish

Collaborators

  • vesass
  • dramixdw
  • remadex
  • tcdp
  • amauryd
  • khytes