{"id":23138202,"url":"https://github.com/softlayer/sl-ember-components","last_synced_at":"2025-08-17T11:32:45.032Z","repository":{"id":23503744,"uuid":"26869437","full_name":"softlayer/sl-ember-components","owner":"softlayer","description":"An Ember CLI Addon that provides a variety of UI components.","archived":false,"fork":false,"pushed_at":"2017-04-05T02:16:49.000Z","size":21568,"stargazers_count":114,"open_issues_count":178,"forks_count":27,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-12-04T04:03:13.343Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://softlayer.github.io/sl-ember-components","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/softlayer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-19T16:07:47.000Z","updated_at":"2024-01-07T20:19:55.000Z","dependencies_parsed_at":"2022-08-22T01:30:46.905Z","dependency_job_id":null,"html_url":"https://github.com/softlayer/sl-ember-components","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softlayer%2Fsl-ember-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softlayer%2Fsl-ember-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softlayer%2Fsl-ember-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softlayer%2Fsl-ember-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/softlayer","download_url":"https://codeload.github.com/softlayer/sl-ember-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229767199,"owners_count":18121042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-17T13:10:08.514Z","updated_at":"2024-12-17T13:10:08.588Z","avatar_url":"https://github.com/softlayer.png","language":"JavaScript","readme":"\n[![Latest Release](https://img.shields.io/github/release/softlayer/sl-ember-components.svg)](https://github.com/softlayer/sl-ember-components/releases) ![Ember CLI version](https://img.shields.io/badge/ember%20cli-2.4.3-blue.svg) [![License](https://img.shields.io/npm/l/sl-ember-components.svg)](LICENSE.md) [![Downloads](https://img.shields.io/npm/dm/sl-ember-components.svg)](https://www.npmjs.com/package/sl-ember-components)\n\n[![Dependencies](https://img.shields.io/david/softlayer/sl-ember-components.svg)](https://david-dm.org/softlayer/sl-ember-components) [![Dev Dependencies](https://img.shields.io/david/dev/softlayer/sl-ember-components.svg)](https://david-dm.org/softlayer/sl-ember-components#info=devDependencies)\n\n[![Build Status](https://circleci.com/gh/softlayer/sl-ember-components.svg?style=shield\u0026circle-token=:circle-token)](https://circleci.com/gh/softlayer/sl-ember-components) [![Code Climate](https://img.shields.io/codeclimate/github/softlayer/sl-ember-components.svg)](https://codeclimate.com/github/softlayer/sl-ember-components) [![Ember Observer](http://emberobserver.com/badges/sl-ember-components.svg)](http://emberobserver.com/addons/sl-ember-components) [![Inch CI](http://inch-ci.org/github/softlayer/sl-ember-components.svg?branch=master)](http://inch-ci.org/github/softlayer/sl-ember-components) [![Join us on Slack](https://sl-ember-components-signup.herokuapp.com/badge.svg)](https://sl-ember-components-signup.herokuapp.com/)\n\nWe use [https://waffle.io/softlayer/sl-ember-components](https://waffle.io/softlayer/sl-ember-components) to work our issues.\n\n[![Stories in Ready](https://badge.waffle.io/softlayer/sl-ember-components.png?label=ready\u0026title=Ready)](https://waffle.io/softlayer/sl-ember-components) [![Stories in In Progress](https://badge.waffle.io/softlayer/sl-ember-components.png?label=in%20progress\u0026title=In%20Progress)](https://waffle.io/softlayer/sl-ember-components) [![Stories in Ready For Review](https://badge.waffle.io/softlayer/sl-ember-components.png?label=ready%20for%20review\u0026title=Ready%20For%20Review)](https://waffle.io/softlayer/sl-ember-components) [![Stories in In Review](https://badge.waffle.io/softlayer/sl-ember-components.png?label=in%20review\u0026title=In%20Review)](https://waffle.io/softlayer/sl-ember-components)\n\n[![Throughput Graph](https://graphs.waffle.io/softlayer/sl-ember-components/throughput.svg)](https://waffle.io/softlayer/sl-ember-components/metrics)\n\n\n\n# What sl-ember-components is\n\nAn [Ember CLI Addon](http://ember-cli.com) that provides UI components compatible with\n[Ember.js](http://www.emberjs.com) and [Twitter Bootstrap](http://www.getbootstrap.com).\n\n**This addon is currently BETA.** View the [Roadmap](https://github.com/softlayer/sl-ember-components/wiki/Roadmap) we're following for a 1.0.0+ release.\n\nExamples and documentation on how to use each component can be viewed at http://softlayer.github.io/sl-ember-components/ which\nis served from the *gh-pages* branch of this repository.\n\n\n**Components provided**\n\n* sl-alert\n* sl-button\n* sl-calendar\n* sl-chart (only free for non-commercial use without a [Highcharts](http://shop.highsoft.com/faq/non-commercial#what-is-commercial-website) license)\n* sl-checkbox\n* sl-date-picker\n* sl-date-range-picker\n* sl-date-time\n* sl-drop-button\n* sl-grid\n* sl-input\n* sl-menu\n* sl-modal\n* sl-pagination\n* sl-panel\n* sl-progress-bar\n* sl-radio\n* sl-radio-group\n* sl-select\n* sl-span\n* sl-tab-panel\n* sl-textarea\n* sl-tooltip\n\n\n**Mixins provided**\n\n*sl-component-input-id*\n\nProvides unique id that a component can assign to an input and a label's \"for\" attribute.\n\n\n*sl-input-based*\n\nProvides state properties for input element based components.\n\n\n*sl-namespace*\n\nNamespace component events by `elementId`\n\n\n*sl-tooltip-enabled*\n\nProvides Bootstrap tooltip functionality bindings, for both popovers and plain tooltips.\n\n\n**Utility Classes provided**\n\n*containsValue*\n\nCheck whether a value is a valid value in object.\n\n\n*warn*\n\nProvides a mechanism for initiating `console.warn()`s\n\n*error*\n\nProvides a way for individual components to throw errors that are able to be recognized by methods inside of a consuming application's `Ember.onerror()` function. For more details reference the [Error Handling](#error-handling) section below.\n\n\n**CSS Classes provided**\n\n*sl-loading*\n\nApply a loading indicator to an element.  See the [Loading Indicator section](#loading-indicator) for more information.\n\n\n---\n\n\nAll of this functionality is provided through a combination of leveraging the best-of-breed of other component offerings as well as our own implementations when the existing offerings were deficient. Existing offerings that were leveraged include:\n\n* [Twitter Bootstrap](http://getbootstrap.com/)\n* [Bootstrap-Datepicker](http://bootstrap-datepicker.readthedocs.org/en/release/#)\n* [Highcharts](http://www.highcharts.com/)\n* [Select2](http://ivaynberg.github.io/select2/)\n* [typeahead.js](https://twitter.github.io/typeahead.js/)\n\n## LICENSE WARNING\n\nWhile this library is MIT licensed not all of the third-party component libraries are. Specifically, Highcharts is only free for non-commercial use and requires a license for any other use. See\n[this FAQ page](http://shop.highsoft.com/faq/non-commercial#what-is-commercial-website) for more information.\n\nOther libraries that are not MIT licensed, though it should not pose a problem, are:\n\n* [Bootstrap-Datepicker](https://github.com/eternicode/bootstrap-datepicker/blob/release/LICENSE)\n\n\n\n\n# Supported browsers\n\nSee [http://softlayer.github.io/sl-ember-components/#/browsers](http://softlayer.github.io/sl-ember-components/#/browsers)\n\n\n\n\n\n# Demo\n\n## Live\n\n[http://softlayer.github.io/sl-ember-components/#/demos](http://softlayer.github.io/sl-ember-components/#/demos)\n\n## Development Environment\n\n### Installation\n\n* `git clone` this repository\n* `npm install`\n* `bower install`\n\n### Running\n\n* `ember serve`\n* View the demo at *http://localhost:4200*\n\nFor more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).\n\n### Documentation\n\n* `ember ember-cli-jsoc` or `npm run docs` (shortcut setup in this repo)\n* Visit *http://localhost:4200/docs*\n\n\n\n\n# How to use this addon in your application\n\n## Installation\n\n    ember install sl-ember-components\n\n## Error Handling ##\n\nThe components in sl-ember-components will throw errors if the components are used incorrectly. For example, the `sl-radio-group` component requires that a `name` property be passed with the component. If one is not passed an error will be thrown with the name of the component that is throwing the error (sl-radio-group) and the message saying \"The name property must be set\".\n\nIf you wish to capture these errors and pass them along to your error logging application you can do so by adding the following lines to your application's `app/app.js` file:\n\n```\nimport { errorWasThrown, isErrorInstanceOf } from 'sl-ember-components/utils/error';\n\nvar App;\n\n...\n\nEmber.onerror = function( error ) {\n\n    if ( errorWasThrown( error ) ) {\n        // This will catch any errors coming from the sl-ember-components addon\n        // Insert the code you would use to send to your error logging application here\n    }\n\n    if ( isErrorInstanceOf( 'radioGroup' ) ) {\n        // Use this option if you want granularity at the individual component level\n        // Insert the code you would use to send to your error logging application here\n    }\n\n    ...Repeat the above for each component that you want to watch for where \"radioGroup\"\n    is the name of the component \"sl-radio-group\". So if you wanted to watch \"sl-menu\" you\n    would replace \"radioGroup\" with \"menu\". To see what can be used look at addon/utils/error.js.\n\n    console.error( error ); // Still send the error to the console\n};\n```\n\n## Fingerprinting Assets\nIf fingerprinting is enabled in the consuming application, then by default the following font types are fingerprinted:\n\n    eot, svg, ttf, woff, woff2\n\n**IMPORTANT**: If you list extensions that are not exact matches to [the default ones](https://github.com/rickharrison/broccoli-asset-rev/blob/master/lib/default-options.js)\nset by broccoli-asset-rev, you will need to add the desired font extensions to the extensions property in the consuming application's fingerprinting settings in the `ember-cli-build.js` file, as demonstrated below:\n\n```\nconst EmberApp = require( 'ember-cli/lib/broccoli/ember-app' );\nconst env = require( './config/environment' );\n\nmodule.exports = function( defaults ) {\n    const app = new EmberApp( defaults, {\n        fingerprint: {\n            enabled: true,\n            exclude: [],\n            extensions: [ 'png', 'jpg', 'gif', 'eot', 'svg', 'ttf', 'woff', 'woff2' ],\n            prepend: env().baseAssetsURL,\n            replaceExtensions: [ 'html', 'css', 'js' ]\n        }\n    });\n\n    return app.toTree();\n};\n```\n\n## Styling\n\nIf you wish to modify the styling of the components you have two options for doing so.\n\nThe first is to define your CSS declarations in your application's *app/styles* folder.\n\nThe second is to build the CSS declarations from the LESS source files.  This will layer\nany of your LESS values on top of this addon's LESS values which are then in turn laid\non top of Twitter Bootstrap's.  This does require you though to use LESS for your\nentire application's CSS generation.  To use LESS, run\n\n    npm install --save-dev ember-cli-less\n\nthen create a `app/styles/app.less` file and add this to it:\n\n    @import 'sl-ember-components';\n\nFinally, you will need to run [broccoli-autoprefixer](https://github.com/sindresorhus/broccoli-autoprefixer) against the updated Twitter Bootstrap and/or LESS files.  To do so, run\n\n    npm install --save-dev broccoli-autoprefixer\n\nand set the `browsers` option in your *ember-cli-build.js* file to:\n\n```\nvar autoprefixer = require( 'broccoli-autoprefixer' );\n...\ntree = autoprefixer(\n    tree,\n    {\n        browsers: [\n            'Android 2.3',\n            'Android \u003e= 4',\n            'Chrome \u003e= 20',\n            'Firefox \u003e= 24',\n            'Explorer \u003e= 8',\n            'iOS \u003e= 6',\n            'Opera \u003e= 12',\n            'Safari \u003e= 6'\n        ]\n    }\n);\n```\n\nThe options listed in `browsers` above are the recommended settings by [Twitter Bootstrap](https://github.com/twbs/bootstrap-sass#sass-autoprefixer)\n\n### Component Classes\n\nEach component has its own unique CSS class selector so that it is easy to target and style specific components.  Refer to each component's respective documentation at\n[http://softlayer.github.io/sl-ember-components](http://softlayer.github.io/sl-ember-components)\nfor these values.\n\n### Customizing a component's CSS prefix\nAll components share a common CSS prefix, namely, `sl-ember-components`. To target and style a particular component, for example the `sl-grid` component, one would use the CSS class selector `.sl-ember-components-grid`. The reason for such a verbose selector is to prevent styling conflicts with other libraries. You can customize the prefix value and change it from the default `sl-ember-components` to whatever you would like. Depending on what option you picked in the [Styling](#styling) section, the steps below describe how you would go about customizing the CSS prefix.\n\nTo get started, you will need to add a config value to your `ember-cli-build.js`\n\n```\nvar app = new EmberApp(defaults, {\n    'sl-ember-components': {\n        componentClassPrefix: 'custom-prefix' // specify your custom prefix here\n    }\n});\n```\n\nIf you are *not* using LESS as a preprocessor then nothing else needs to be done on your part. You should now be able to target components using your custom prefix (e.g. in the case of `sl-grid` you should now be able to use the CSS class selector `.custom-prefix-grid`).\n\nIf you are using LESS then you will need to set a `@component-class-prefix` variable *below* the line of code which imports the `sl-ember-components` as shown below.\n\n```\n@import 'sl-ember-components'\n@component-class-prefix: custom-prefix;\n```\n\nYou should now be able to target components using your custom prefix (e.g. in the case of `sl-grid` you should now be able to use the CSS class selector `.custom-prefix-grid`).\n\n*Note: If you have already served your application, remember to re-serve after making changes to the `ember-cli-build.js` file so changes can take affect.*\n\n\n### Icons\n\nIf you wish to use different Glyphicons than the defaut ones, you simply only need to redefine\nthe `content` definition for the appropriate styles.  For example, to replace the \"Show All\" icon\nused for the `sl-menu` component, use the following declaration:\n\n```\n.sl-ember-components-menu .sl-icon-show-all:before {\n    content: \"\\e011\";\n}\n```\n\nIf you wish to use a font library other than Glyphicons Halflings you will need to take a few\nextra steps but it is still very easy to do.  The first step is to make sure you have properly\ninstalled, and are including, your desired font library.  Next, you need to define a\n`[class^=\"sl-icon-\"], [class*=\" sl-icon-\"]` declaration and copy your font library's main css\ndeclaration into it.  The example below demonstrates this, replacing Glyphicons Halflings with\nFont Awesome:\n\n```\n[class^=\"sl-icon-\"], [class*=\" sl-icon-\"] {\n    display: inline-block;\n    font: normal normal normal 14px/1 FontAwesome;\n    font-size: inherit;\n    text-rendering: auto;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n```\n\nThen you only need to redefine the `content` definition in the appropriate styles, as\npreviously explained above:\n\n```\n.sl-ember-components-menu .sl-icon-show-all:before {\n    content: \"\\f270\";\n}\n```\n\n### Loading indicator\n\nA loading indicator can be made to display over an element's content, masking it from view, by simply adding the\n*\"sl-loading\"* class to it.  This class blurs the content via a dark-colored mask.  If a lighter mask is desired then add\nthe additional *\"inverse\"* class to the same element.\n\n*Examples*\n\n![Dark Mask Example](https://raw.githubusercontent.com/softlayer/sl-ember-components/gh-pages/readmeAssets/loadingMaskDark.png \"Dark Mask Example\") ![Light Mask Example](https://raw.githubusercontent.com/softlayer/sl-ember-components/gh-pages/readmeAssets/loadingMaskLight.png \"Light Mask Example\")\n\n\nIf you wish to modify the loading image displayed when applying the *\"sl-loading\"* class you can do so by either\ndefining CSS declarations or setting LESS variable values, depending on which [Styling](#styling) approach you are using\nin your application.\n\nTo do so via CSS declarations, define the `background-image` property for the `.sl-loading:after` and\n`.sl-loading.inverse:after` selectors.\n\nTo do so via LESS, assign values to the `@loading-spinner-light` and `@loading-spinner-dark` variables.\n\nAdditional modifications can be applied to any of these selectors as well:\n\n* .sl-loading\n* .sl-loading:before\n* .sl-loading:after\n* .sl-loading.inverse:before\n* .sl-loading.inverse:after\n\n\n\n\n## Examples and documentation on how to use each component\n\nExamples and documentation on how to use each component can be viewed at\n[http://softlayer.github.io/sl-ember-components](http://softlayer.github.io/sl-ember-components)\n\n\n\n\n# Versioning\nEmploys [Semantic Versioning 2.0.0](http://semver.org/)\n\n\n\n# Contribution\n[See CONTRIBUTING.md](https://github.com/softlayer/sl-ember-components/blob/master/CONTRIBUTING.md)\n\n\n\n# Copyright and License\nsl-ember-components and its source files are Copyright © 2014-2015 [SoftLayer Technologies, Inc.](http://www.softlayer.com/)\nThe software is [MIT Licensed](https://github.com/softlayer/sl-ember-components/blob/master/LICENSE.md)\n\nsl-ember-components leverages several third-party libraries which are not all MIT licensed. Specifically, Highcharts is only\nfree for non-commercial use and requires a license for any other use. See\n[this FAQ page](http://shop.highsoft.com/faq/non-commercial#what-is-commercial-website) for more information.\n\nOther libraries that are not MIT licensed, though it should not pose a problem, are:\n\n* [Select2](https://github.com/ivaynberg/select2/blob/master/LICENSE)\n* [Bootstrap-Datepicker](https://github.com/eternicode/bootstrap-datepicker/blob/release/LICENSE)\n\n\n\n\n# Warranty\nThis software is provided “as is” and without any express or implied warranties, including, without limitation, the\nimplied warranties of merchantability and fitness for a particular purpose.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftlayer%2Fsl-ember-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftlayer%2Fsl-ember-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftlayer%2Fsl-ember-components/lists"}