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.

:question: 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.