Rich components for Ember.js framework.

Overview

Ember Components

Ember Components is a comprehensive set of rich web components written purely in Ember.js that let you create an astonishing UI for ambitious web applications.

Please note that the components are designed from the beginning to support most of the variants and are used in production environment in multiple applications,

All our addons are used in our own products and most of them are written purely as Ember components and Do not wrap external JS libraries to achieve their target.

Important News!

We are splitting components into separated ember addons to avoid blowing up your app size with uneccessary bits:

This project will be kept as an umbrealla for referencing all addons we build, you should migrate your project to use the separated addons per your needs.

Relation to Bootstrap for Ember

This project aims to be the successor of our Bootstrap for Ember project as all components on this suite are not bound to any specific CSS framework.

Installation & Docs

With ember-cli: npm install --save ember-cli-components

For more info please read the Getting Started Page

License

See License file

Comments
  • Ember-CLI 0.0.42 Issue

    Ember-CLI 0.0.42 Issue

    After installing ember-components with 'npm install --save ember-cli-components' and building my project with 'ember build' I get the following exception:

    Build failed. Path or pattern "vendor/ember-components/vendor/ic-styled/main.js" did not match any files [string exception]

    This doesn't happen after uninstalling ember-cli-components.

    ember -v: version: 0.0.42 node: 0.10.30 npm: 1.4.24

    opened by OleRoel 13
  • Ember CLI Error

    Ember CLI Error

    Hi there,

    Thanks for making this! Is there anything special to consider when using these with the Ember CLI? I had to stray from your docs to follow Ember CLI conventions and can't seem to get it working.

    Here are the steps I've followed:

    1. bower install ember-components
    2. Add Ember Components' assets to Brocfile with app.import();

    When I use any of the Ember Components in my templates, I get this error in Chrome console. Uncaught TypeError: Cannot read property 'view' of undefined'.

    It's possible that a view should be specified as described here, but if so, it's not clear what path I should reference for the em-list component.

    Have you considered this work flow yet? Any pointers?

    Thanks again!

    opened by samusgray 11
  • Broken installation by using ember-cli-components

    Broken installation by using ember-cli-components

    As far as I understand to get bootstrap stylies I need to install ember-components and such parts as ember-forms are optional and depends on the project requirements.

    When I followed manual here and installed ember components as ember-cli addon and then run build I got follow errors:

    $ ember s
    version: 0.1.7
    Could not find watchman, falling back to NodeWatcher for file system events
    Livereload server on port 35729
    Serving on http://0.0.0.0:4200/
    Path or pattern "vendor/ember-components/vendor/ic-styled/main.js" did not match any files
    Error: Path or pattern "vendor/ember-components/vendor/ic-styled/main.js" did not match any files
        at Object.multiGlob (/frontend/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-kitchen-sink-helpers/index.js:202:13)
        at Class.module.exports.CachingWriter.extend.addFiles (/frontend/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/concat-with-maps.js:74:13)
        at Class.module.exports.CachingWriter.extend.updateCache (/frontend/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/concat-with-maps.js:52:12)
        at /frontend/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:92:34
        at $$$internal$$tryCatch (/frontend/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/rsvp/dist/rsvp.js:490:16)
        at $$$internal$$invokeCallback (/frontend/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/rsvp/dist/rsvp.js:502:17)
        at $$$internal$$publish (/frontend/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/rsvp/dist/rsvp.js:473:11)
        at Object.$$rsvp$asap$$flush [as _onImmediate] (/frontend/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/rsvp/dist/rsvp.js:1581:9)
        at processImmediate [as _immediateCallback] (timers.js:354:15)
    

    Package versions used:

    • ember-cli-components: 0.2.0
    • ember-components: 0.2.0
    • ember: 1.9.1
    • handlebars: 2.0.0
    • ember-cli: 0.1.7
    • node: 0.10.35
    • npm: 2.1.8
    • OS: Debian GNU/Linux (jessy)
    opened by zekefast 8
  • Uncaught ReferenceError: define is not defined

    Uncaught ReferenceError: define is not defined

    Hi!

    Simply installing Ember Components into my Ember CLI project via npm install --save-dev ember-cli-components results in the following error:

    Uncaught ReferenceError: define is not defined application.js:1 (anonymous function)

    During the installation, i have a Bower dependency conflict:

    1. handlebars#>= 1.0.0 < 2.0.0 which resolved to 1.3.0 and is required by ember#1.7.1
    2. handlebars#>= 2.0.0 < 3.0.0 which resolved to 2.0.0 and is required by ember#1.9.1

    I choose 1 because i use Ember 1.8.1. I don't know where the Ember 1.9.1 dependency is coming from.

    opened by lolmaus 5
  • Ember Server cannot start after install

    Ember Server cannot start after install

    I eliminated this error by using the only component I needed (modals), but I thought I'd report it nonetheless.

    The following series of commands resulted in the following error when I tried to start a server:

    npm install --save-dev ember-cli-components
    
    |
    > [email protected] postinstall /Users/joshpfosi/jobs-tuftsdaily/ember/node_modules/ember-cli-components/node_modules/ember-components
    > bower install
    
    bower ember#^1.5.1              cached git://github.com/components/ember.git#1.9.1
    bower ember#^1.5.1            validate 1.9.1 against git://github.com/components/ember.git#^1.5.1
    bower ic-styled#~1.1.6          cached git://github.com/instructure/ic-styled.git#1.1.7
    bower ic-styled#~1.1.6        validate 1.1.7 against git://github.com/instructure/ic-styled.git#~1.1.6
    bower ember-qunit#0.1.3         cached git://github.com/rpflorence/ember-qunit.git#0.1.3
    bower ember-qunit#0.1.3       validate 0.1.3 against git://github.com/rpflorence/ember-qunit.git#0.1.3
    bower ember-utils#~0.1.0        cached git://github.com/indexiatech/ember-utils.git#0.1.0
    bower ember-utils#~0.1.0      validate 0.1.0 against git://github.com/indexiatech/ember-utils.git#~0.1.0
    bower ember#>=1.2.0 <1.8.0      cached git://github.com/components/ember.git#1.7.1
    bower ember#>=1.2.0 <1.8.0    validate 1.7.1 against git://github.com/components/ember.git#>=1.2.0 <1.8.0
    bower jquery#>= 1.7.0 < 2.2.0   cached git://github.com/jquery/jquery.git#2.1.3
    bower jquery#>= 1.7.0 < 2.2.0 validate 2.1.3 against git://github.com/jquery/jquery.git#>= 1.7.0 < 2.2.0
    bower handlebars#>= 1.0.0 < 2.0.0           cached git://github.com/components/handlebars.js.git#1.3.0
    bower handlebars#>= 1.0.0 < 2.0.0         validate 1.3.0 against git://github.com/components/handlebars.js.git#>= 1.0.0 < 2.0.0
    bower handlebars#>= 2.0.0 < 3.0.0           cached git://github.com/components/handlebars.js.git#2.0.0
    bower handlebars#>= 2.0.0 < 3.0.0         validate 2.0.0 against git://github.com/components/handlebars.js.git#>= 2.0.0 < 3.0.0
    
    Unable to find a suitable version for handlebars, please choose one:
        1) handlebars#>= 1.0.0 < 2.0.0 which resolved to 1.3.0 and is required by ember#1.7.1
        2) handlebars#>= 2.0.0 < 3.0.0 which resolved to 2.0.0 and is required by ember#1.9.1Prefix the choice with ! to persist it to bower.json
    
    ? Answer:: 1
    bower ember-utils#~0.1.0                   install ember-utils#0.1.0
    bower ic-styled#~1.1.6                     install ic-styled#1.1.7
    bower ember-qunit#0.1.3                    install ember-qunit#0.1.3
    bower ember#>=1.2.0 <1.8.0                 install ember#1.7.1
    bower handlebars#>= 1.0.0 < 2.0.0          install handlebars#1.3.0
    bower jquery#>= 1.7.0 < 2.2.0              install jquery#2.1.3
    
    ember-utils#0.1.0 bower_components/ember-utils
    
    ic-styled#1.1.7 bower_components/ic-styled
    └── ember#1.7.1
    
    ember-qunit#0.1.3 bower_components/ember-qunit
    └── ember#1.7.1
    
    ember#1.7.1 bower_components/ember
    ├── handlebars#1.3.0
    └── jquery#2.1.3
    
    handlebars#1.3.0 bower_components/handlebars
    
    jquery#2.1.3 bower_components/jquery
    [email protected] node_modules/ember-cli-components
    └── [email protected]
    
    ember server --proxy http://localhost:3000
    
    version: 0.1.7
    Proxying to http://localhost:3000
    Livereload server on port 35729
    Serving on http://0.0.0.0:4200/
    Path or pattern "vendor/ember-components/vendor/ic-styled/main.js" did not match any files
    Error: Path or pattern "vendor/ember-components/vendor/ic-styled/main.js" did not match any files
        at Object.multiGlob (/Users/joshpfosi/jobs-tuftsdaily/ember/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-kitchen-sink-helpers/index.js:202:13)
        at Class.module.exports.CachingWriter.extend.addFiles (/Users/joshpfosi/jobs-tuftsdaily/ember/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/concat-with-maps.js:74:13)
        at Class.module.exports.CachingWriter.extend.updateCache (/Users/joshpfosi/jobs-tuftsdaily/ember/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/concat-with-maps.js:52:12)
        at /Users/joshpfosi/jobs-tuftsdaily/ember/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:92:34
        at $$$internal$$tryCatch (/Users/joshpfosi/jobs-tuftsdaily/ember/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/rsvp/dist/rsvp.js:490:16)
        at $$$internal$$invokeCallback (/Users/joshpfosi/jobs-tuftsdaily/ember/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/rsvp/dist/rsvp.js:502:17)
        at $$$internal$$publish (/Users/joshpfosi/jobs-tuftsdaily/ember/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/rsvp/dist/rsvp.js:473:11)
        at Object.$$rsvp$asap$$flush [as _onImmediate] (/Users/joshpfosi/jobs-tuftsdaily/ember/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/rsvp/dist/rsvp.js:1581:9)
        at processImmediate [as _immediateCallback] (timers.js:354:15)
    
    opened by joshpfosi 4
  • Can't use in my App with Ember 1.7.0

    Can't use in my App with Ember 1.7.0

    Trying to use ember-components in my app (Ember 1.7.0) causes different errors; for example with the tab component (simple) i get:

    Assertion Failed: `blockHelperMissing` was invoked without a helper name, which is most likely due to a mismatch between the version of Ember.js you're running now and the one used to precompile your templates. Please make sure the version of `ember-handlebars-compiler` you're using is up to date.
    Error: Assertion Failed: `blockHelperMissing` was invoked without a helper name, which is most likely due to a mismatch between the version of Ember.js you're running now and the one used to precompile your templates. Please make sure the version of `ember-handlebars-compiler` you're using is up to date.
    

    With other components I get something like:

    Uncaught Error: <App.ItaHomeView:ember360> Handlebars error: Could not find property 'em-accordion' on object <App.HomeController:ember408>.
    

    Is it possible to use ember-components with the latest ember?

    opened by Cerealkillerway 4
  • null.injectStyles

    null.injectStyles

    After making the changes described in https://github.com/indexiatech/ember-components/issues/42 I was able to get my build to pass, however, when I use a {{em-tabs}} I am getting the following stack trace.

    TypeError: undefined is not a function
        at null.injectStyles (http://localhost:4200/assets/vendor.js:62797:32)
        at applyStr (http://localhost:4200/assets/vendor.js:32529:34)
        at sendEvent (http://localhost:4200/assets/vendor.js:27629:13)
        at __exports__.default.Mixin.create.trigger (http://localhost:4200/assets/vendor.js:44786:9)
        at apply (http://localhost:4200/assets/vendor.js:32518:27)
        at superFunction [as _super] (http://localhost:4200/assets/vendor.js:29014:15)
        at EmberObject.extend.trigger (http://localhost:4200/assets/vendor.js:53828:21)
        at apply (http://localhost:4200/assets/vendor.js:32518:27)
        at superWrapper [as trigger] (http://localhost:4200/assets/vendor.js:32095:15)
        at EmberRenderer.Renderer.willInsertElement (http://localhost:4200/assets/vendor.js:52381:32)
    

    When looking at my vendor.js I am able to see the ic-styled code which is adding the injectStyles to Ember.Component and am at a loss for what to do.

    $ ember -v version: 0.0.42 node: 0.10.31 npm: 1.4.24

    opened by RyanHirsch 3
  • Enhancement: Show Modal Via an Action

    Enhancement: Show Modal Via an Action

    In my app I want to pop up a modal with in-depth details by clicking on a row in a table, so I don't need anything additional (like a button) rendered to initialize the modal. The bootstrap-for-ember component could be pulled up in this way, but the documentation is sparse on how to do it with a ember-component modal if you're not using the em-modal-toggler.

    opened by jdhines 3
  • Modal: do not use 'trigger' together with 'sendAction'

    Modal: do not use 'trigger' together with 'sendAction'

    Looks like now we can pass hide option in modal component. But component's open, close methods https://github.com/indexiatech/ember-components/blob/master/lib/modal/modal.coffee#L129 use trigger and sendAction together that will cause an error. I explain why: trigger wants a reference to real function inside hide param. sendAction wants a string with the name of method that we will be propagated.

    I recommend to remove trigger call because using sendAction is the best practice http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/

    bug 
    opened by andrewfan 3
  • compile handlebars templates

    compile handlebars templates

    Ember-cli in production env does not include full version of handlebars. It does not include handlebars runtime so Ember.Handlebars.compile is not defined. So to make ember-components work in production we have to compile all templates.

    enhancement 
    opened by andrewfan 3
  • not compatible with latest CLI 0.2.0 + Node 0.12.0 deprecation of the vendor directory in favor of bower_components directory

    not compatible with latest CLI 0.2.0 + Node 0.12.0 deprecation of the vendor directory in favor of bower_components directory

    index.js says:

    EmberCLIEmberComponentsAjax.prototype.included = function included(app) {
      this.app = app;
      var options = this.app.options.emberComponentsOptions || {enabled: true};
    
      if (options.enabled) {
        this.app.import('vendor/ember-components/vendor/ic-styled/main.js');
        this.app.import('vendor/ember-components/vendor/ember-utils/dist/globals/main.js');
        this.app.import('vendor/ember-components/dist/globals/main.js');
      }
    };
    

    Haven't tested it all yet, but got it to compile and run ember serve OK changing it to:

    EmberCLIEmberComponentsAjax.prototype.included = function included(app) {
      this.app = app;
      var options = this.app.options.emberComponentsOptions || {enabled: true};
    
      if (options.enabled) {
        this.app.import('bower_components/ic-styled/main.js');
        this.app.import('bower_components/ember-utils/dist/globals/main.js'); <--- not sure where this was supposed to point...I think it was a bug maybe in and of itself
        this.app.import('bower_components/ember-components/dist/globals/main.js');
      }
    };
    

    if you don't do this then you get: Path or pattern "vendor/ember-components/vendor/ic-styled/main.js" did not match any files because of course the /vendor directory is no more.

    opened by robneville73 2
  • Error creating em-tabs

    Error creating em-tabs

    Ember 1.9.1 Handlebars 2.0.0 Ember Components: 0.2.0

    Ember Components throws a Style.create(...).renderToBuffer is not a function error when trying to create the tab component.

    Ember Components currently uses ic-styled: ~1.1.6. Maybe reported via instructure/ic-styled/issues/5

    Was able to fix by forcing Ember Components to instead use 2.0.0

    opened by steakchaser 0
  • Building ember project produces ic-styled error...

    Building ember project produces ic-styled error...

    Here's what I get when I do an ember build:

    Build failed. Path or pattern "vendor/ember-components/vendor/ic-styled/main.js" did not match any files

    opened by bostondevin 7
  • Bower conflict with ember 1.10

    Bower conflict with ember 1.10

    Using ember 1.10:

    Unable to find a suitable version for ember, please choose one:
        1) ember#>=1.2.0 <1.8.0 which resolved to 1.7.1 and is required by ic-styled#1.1.7 
        2) ember#~1.10 which resolved to 1.10.0 and is required by project/project 
        3) ember#^1.5.1 which resolved to 1.10.0 and is required by ember-components#0.2.0 
        4) ember#>= 1.8.1 < 2.0.0 which resolved to 1.10.0 and is required by ember-data#1.0.0-beta.15Prefix the choice with ! to persist it to bower.json
    

    Using v2.0.0 of ic-style should solve the problem: https://github.com/instructure/ic-styled/blob/v2.0.0/bower.json

    Btw, for what ic-style is used? Found nothing on your doc about that.

    Thanks.

    opened by soullivaneuh 0
  • npm WARN package.json ember-idx-charts@0.1.1 No repository field.

    npm WARN package.json [email protected] No repository field.

    opened by mkalita 0
  • Merge error: file .gitkeep exists

    Merge error: file .gitkeep exists

    $ ember server
    version: 0.2.0-beta.1
    Livereload server on port 35729
    Serving on http://0.0.0.0:4200/
    Merge error: file .gitkeep exists in /Users/me/projects/app/node_modules/ember-idx-accordion/vendor and /Users/me/projects/app/tmp/tree_merger-tmp_dest_dir-ouKqxCWm.tmp
    Pass option { overwrite: true } to mergeTrees in order to have the latter file win.
    

    I have read that this would help:

    rm -rf node_modules
    npm cache clear
    npm install
    

    but it didn't.

    opened by mkalita 2
  • Pop modal from code?

    Pop modal from code?

    Hi

    I am trying to navigate from one modal to another in my user registration process and can't seem to get a modal to show from code? Is this possible?

    I have tried:

    rte.get('signup').toggleVisibility();
    rte.get('template:modal/create-account').toggleVisibility();
    rte.get('modal/create-account').toggleVisibility();
    

    where rte is the controller of the 1st modal that has been popped.

    opened by wayne-o 5
Releases(0.2.0)
Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models

@mainmatter/ember-api-actions This is an Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models. Compatibility Em

Mainmatter 6 Dec 15, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
An Ember CLI Addon that provides a variety of UI components.

We use https://waffle.io/softlayer/sl-ember-components to work our issues. What sl-ember-components is An Ember CLI Addon that provides UI components

SoftLayer 115 May 7, 2022
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr

Raphaël Benitte 10.9k Dec 31, 2022
An accessible dropdown component for use in Ember apps.

ember-a11y-dropdown This is an accessible dropdown that you can use in your Ember app for a menu dropdown. I'm making it so people can stop using the

Melanie Sumner 2 Feb 10, 2022
Demonstration of how to use statecharts as and with actors in Ember.js

statechart-actors This app demonstrate how we can use ember-statecharts and XState's actor feature together. The demo-use case: Show a blog posts over

Michael Klein 3 Jan 9, 2022
Official Semantic UI Integration for Ember

Semantic-UI-Ember This is the official Ember library for the Semantic-UI modules. Support The NodeJS and EmberJS versions respective tags are tested o

Semantic Org 335 Oct 1, 2022
The ember implementation of UIkit

ember-uikit This addon is a wrapper for the CSS library UIkit which exposes certain components to give users an easy way for using UIkit in ember apps

Adfinis 25 Oct 20, 2022
Material Design Lite for Ember.js Apps

ember-material-lite Google's Material Design Lite for Ember.js apps This addon requires ember >= 1.11.0 Installation # ember-cli < 0.2.3 ember install

Mike North 148 Dec 17, 2021
Ember implementation of Google's Material Design

No longer maintained This project is no longer maintained. For an up-to-date material design project, please use Ember Paper. Ember-material-design Th

Mike Wilson 121 Mar 1, 2022
Bootstrap for Ember.js

Please use our CLI-ADDONS instead We rewrote almost all components from scratch and packed them as Ember-Addons, Please avoid using this project and u

null 708 Nov 17, 2022
Ember implementation of the game

Ember implementation of the game

null 9 Apr 27, 2022
Bugsnag integration for Ember applications.

Ember Bugsnag Bugsnag integration for Ember applications.

Bagaar 1 Apr 28, 2022
A demo app to illustrate core and latest concepts in Ember.js

ember-workshop A demo app to illustrate core and latest concepts in Ember.js Setup Installation Clone this repo. git clone [email protected]:ijlee2/ember

Isaac Lee 15 Dec 17, 2022
Codemod to un-pod Ember apps, addons, and engines

ember-codemod-pod-to-octane Codemod to un-pod Ember apps, addons, and engines Usage Step 1. Quickly return to default Octane. cd <your/project/path> n

Isaac Lee 9 Nov 30, 2022
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Jan 4, 2023
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고스락 6 Aug 12, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 11 Dec 31, 2022
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022