Code Monkey home page Code Monkey logo

ember-frost-sort's Introduction

ember-frost-sort

Dependencies

Ember NPM

Health

Travis Coveralls

Security

bitHound

Ember Observer score

EmberObserver

A sorting component to sort collections

Installation

ember install ember-frost-sort

Usage

Controller

sortOrder: ['name', '-value'],
sortingProperties: [{ label: Name, value: name }, { label: Value, value: value }],

actions: {
  onChange (sortOrder) {
    this.set('sortOrder', sortOrder)
  }
}

Component

{{frost-sort
  hook='myHook'
  sortOrder=sortOrder
  sortOrderMax=2
  sortingProperties=sortingProperties
  onChange=(action 'sort')
}}

Also supports spread format

Sort utility (optional)

import {sort} from 'ember-frost-sort'

@readOnly
@computed('model.[]', 'sortOrder.[]')
sortedItems (model, sortOrder) {
  return sort(model, sortOrder)
}

Event formats

  • onChange : {string[]} sortOrder - the sort order in JSONAPI format
    • e.g. ['name', '-value'] would sort by name ascending first, value descending second

Hooks

  • {hook}-title
  • {hook}-item & { index: ___ }
  • {hook}-item-select & { index: ___ }
  • {hook}-item-direction & { index: ___ }
  • {hook}-item-remove & { index: ___ }
  • {hook}-add

Class names

  • frost-sort-title
  • frost-sort-item
  • frost-sort-item-select
  • frost-sort-item-direction
  • frost-sort-item-remove
  • frost-icon-frost-sort-direction & descending
  • frost-sort-add

ember-frost-sort's People

Contributors

travis-ci-ciena avatar juwara0 avatar sandersky avatar dafortin avatar vesper2000 avatar sglanzer avatar srowhani avatar rox163 avatar oadeojo avatar laflower avatar ewhite613 avatar theotherdude avatar quincyle avatar ember-tomster avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.