0.14.5 • Public • Published


    Ember addons designed for Kb Software Ember apps; ensuring a common look and feel of the UI; as well as speeding up the work process.

    Kb Software's Ember apps are styled using TailwindCss, and for technical reasons, it is not possible to have Ember Addons provide the requirement. For that reason the dummy app is mostly unstyled and to see these addon's demonstrated properly we suggest you clone and run the our Simple Ember project. This app also contains the intructions for including TailwindCss in your project.


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


    In the root directory of kb-base-ember-addons:

    Run and test as if a normal Ember App.

    ember serve

    To test and use the AddOn from a KB project while working on both locally:

    cd kb-base-ember-addons
    npm link

    From root directory Ember App (usually project/name/front):

    cd project/name/front
    npm link @kbsoftware/kb-base-ember-addons

    Or you can also install the module from the local fileset:

    npm i ../kb-base-ember-addons


    1. Often, after installing a new module in "project/name", you will find it necessary to link again.
    2. If you are running 2 terminals (like Quake and Tilda) - run the links on the same bash.


    ember install @kbsoftware/kb-base-ember-addons

    Using the Add Ons

    KB Software examples are also demonstrated by simple-ember


    KbWireframe makes it easy to scaffolded an Ember app with a KB Software nav sidebar which collapses on a mobile phone. Simply add the following to the application.hbs file.

        <LinkTo @route="home" @class="bg-gray-800 text-white font-extrabold">
        <LinkTo @route="route1">
          <i class="fa fa-dashboard fa-fw"></i>
          Example Link 1
      <KbWireframe::Main @mainHeading="App Main Heading">


    KbForm helps build a KB Software styled form which has some basic validation for different input types.

    In the Javascript file of the template hosting the KbForm (which would be the controller or component), add the following:

    import Component from "@glimmer/component"
    import { action, set } from "@ember/object"
    import { inject } from "@ember/service"
    import { tracked } from "@glimmer/tracking"
    export default class PageWithKbForm extends Component {
      // And object to maintain the validation status of all the inputs.
      @tracked showValidations = false
      // And object to maintain the validation status of all the inputs.
      validationStatus = Object()
      // A simple count of which inputs are valid or not.
      get countOfValid() {
        return Object.values(this.validationStatus).filter(i => !i).length
      get formIsValid() {
        return this.countOfValid === 0
      actionOnValueChange(key, value) {
        set(this.args.model, key, value)
      actionValidate(inputKey, validOrNotRequired) {
        // Each form input will set it's validation status when loaded or touched.
        this.validationStatus[inputKey] = validOrNotRequired

    The addon provides a component with these methods already included which you can extend.

    import KbFormManager from "@kbsoftware/kb-base-ember-addons/components/kb-form-manager"
    export default class ComponentWithKbForm extends KbFormComponent {}

    A form is built by nesting the input components inside a form component.

      @buttonLabel="Submit Me"
      <KbForm::Fieldset @legend="Please fill out required fields.">

    The following form inputs are available (more can be added as required):

    • KbInputBoolean
    • KbInputDate
    • KbInputEmail
    • KbInputNumber
    • KbInputSelect
    • KbInputSelectMulti
    • KbInputString
    • KbInputTaggit
    • CkEditor

    The properties you can use are as follows:

    • key: Recommended as the input id and label for attribute.
    • label: Recommended for the input label.
    • value: Required value from the model or containing controller/component.
    • min and max: Optional date, numerical, or string length values depending on input type.
    • required: Optional indicating whether the input is a required field or not.
    • required: Optional indicating whether the input is a required field or not.
    • actionOnValueChange: Optional When the value is immutable.
    • showValidations: Optional to communicate from the host page when it is time to display validation messages (see above).
    • validateHook: Optional action (see above) which passes up to the host file validation state when the input changes or in the construction (data down/action up!).

    NB: WIP: KbForm and its child inputs are not properly coupled.


    This control takes a property which expects an array of files.

      @legend="Please fill out required fields."
        @label="Upload Images"


    KbQuickPaginator is an addon for creating a basic paginator for local data. Ideal for small data sets. To use, simply wrap your existing list whether bulleted or a table. The id is useful if you have more than one KbQuickPaginator per page.

        {{#each listItems as |item|}}


    KbGroupBy is an addon for creating a grouping local data. Ideal for small data sets. To use, simply wrap your existing list whether bulleted or a table. It works in a similar way to Django's group_by template tag.

      @items={{this.model}} as |carMakeGroups|
      {{#each carMakeGroups as |carMakeGroup|}}
          {{#each carMakeGroup.items as |car|}}
            <li>{{car.model}}: {{car.type}} {{car.color}}</li>

    You can create multiple levels of grouping by nesting the component and using .items of the previous grouping object as the list for the next group.

      @items={{this.model}} as |carMakeGroups|
      {{#each carMakeGroups as |carMakeGroup|}}
          @items={{carMakeGroup.items}} as |carMakeTypes|
          {{#each carMakeTypes as |carMakeType|}}
              {{#each carMakeType.items as |car|}}
                <li>{{car.model}}: {{car.color}}</li>


    KbTaggitFilter is an addon for filtering a list with a taggit field.

      @active={{true}} as |personList|
      <table width="100%" class="table-fixed">
          <tr class="bg-gray-400">
            <th align="left">
            <th align="left">
          {{#each personList as |person|}}
              <td align="left">
              <td align="left">


    KbToolBar provides a style-ready container for a horizontal set of tabs and BUTTONS.

      <LinkTo @route="home">
        <i class="fa fa-reply"></i>
      <LinkTo @route="settings">
        <i class="fa fa-cogs"></i>


    KbDashboard provides a style-ready container for groups of vertical BUTTONS.

        <LinkTo @route="route1">
          <i class="fa fa-check-square fa-fw"></i>
        <LinkTo @route="route2">
        <LinkTo @route="route3">
        <LinkTo @route="route4">


    Provides 3 utility ember-concurrency based tasks for:

    • let model = this.getModel.perform(modelName, modelId)
    • let model = this.createModel.perform(modelName, defaults, relations)
    • let models = this.searchModel.perform(modelName, paramsTheApiExpects)



    long message:

      No apps have been assigned to your profile. Please speak to a member
      of the technical department or your manager if you think this is an

    short message:

    <KbWireframe::Main::ModelNotFound @message="Couldn't find that.">
    import KbModelRoute from '@kbsoftware/kb-base-ember-addons/routes/kb-model-route'
    export default class MyModelRoute extends KbModelRoute {}


    Provides 5 utility ember-concurrency based tasks for

    • let model = this.saveModel.perform(modelObj, successMessage, transitionOnSuccessRoute)
    • this.deleteModel.perform(modelObj, transitionOnToSuccessRoute)
    • this.addManyToMany.perform(addModelObj, toModelObj [, addModelName])
    • this.addNewManyToMany.perform(newModelObj, toModelObj, transitionToRoute [, addModelName])
    • this.removeManyToMany.perform(removeModelObj, fromModelObj)
    // controllers/my-model.js
    import KbModelController from "@kbsoftware/kb-base-ember-addons/controllers/kb-model-controller"
    import { action } from "@ember/object"
    export default class MyModelController extends KbModelController {
      actionInTemplateController(modelOfThing, transitionTo) {
        this.deleteModel.perform(modelOfThing, transitionTo)
    <!-- templates/my-model.hbs -->
    {{#each @things as |thing|}}
        <button {{on "click" (fn this.actionInTemplateController thing "thing.list")}}>


    See the Contributing guide for details.

    • npm run prettier
    • npm run prettier:hbs


    This project is licensed under the Apache License.



    npm i @kbsoftware/kb-base-ember-addons

    DownloadsWeekly Downloads






    Unpacked Size

    1.96 MB

    Total Files


    Last publish


    • timbushell
    • patrick.kimber