ovh-ux · AxelPeter · Sep 5, 2018 · Aug 8, 2018 · Aug 9, 2018 · Aug 9, 2018
@@ -45,12 +45,14 @@ bower install --save ovh-ui-angular
 
 ## Usage
 
+### Integration
+
 1. In your `index.html`, you need to load `oui-angular.min.js`:
 
 ```html
-  ...
-  <script src="ovh-ui-angular/dist/oui-angular.min.js" type="text/javascript"></script>
-  ...
+    ...
+    <script src="ovh-ui-angular/dist/oui-angular.min.js" type="text/javascript"></script>
+    ...
 ```
 
 2. You need to add `oui` in your angular module dependencies like that:
@@ -63,7 +65,34 @@ angular.module("myAwesomeApp", [
 ]);
 ```
 
-## Developers
+## Develop
+
+### Run in development mode
+
+1. Clone and install `ovh-ui-angular`
+
+```bash
+git clone https://github.com/ovh-ux/ovh-ui-angular.git
+cd ovh-ui-angular
+yarn install
+yarn link
+```
+
+2. Run `ovh-ui-angular` with [ovh-ui-kit-documentation](https://github.com/ovh-ux/ovh-ui-kit-documentation)
+
+```bash
+git clone https://github.com/ovh-ux/ovh-ui-kit-documentation.git
+cd ovh-ui-kit-documentation
+yarn install
+yarn link ovh-ui-angular
+yarn start
+```
+
+### Hot reload
+
+Once you have `yarn start`-ed the project, you can edit anything with an automatic browser refresh as a result.
+
+### Contributing
 
 You've developed a new cool feature? Fixed an annoying bug? We'd be happy
 to hear from you!

@@ -56,7 +56,7 @@
     "babel-register": "^6.18.0",
     "cross-env": "^5.1.0",
     "css-loader": "^0.28.4",
-    "eslint": "^4.3.0",
+    "eslint": "^3.13.1",
     "eslint-config-ovh": "^0.1.1",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.9.0",

@@ -168,6 +168,7 @@ Use `mode` to set a different selection mode for the calendar
 | `min-date`        | object    | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | specifies the minimum/earliest date (inclusively) allowed for selection
 | `disable-date`    | array     | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | make certain dates unavailable for selection
 | `enable-date`     | array     | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | make certain dates only available for selection
+| `enable-time`     | boolean   | <?        | yes               | See [Options](https://flatpickr.js.org/options/)                                          | n/a       | enables time picker
 | `week-numbers`    | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | week numbers flag
 | `disabled`        | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | disabled flag
 | `required`        | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | required flag

@@ -19,6 +19,8 @@ export default {
         disableDate: "<?",
         enableDate: "<?",
 
+        enableTime: "<?",
+
         disabled: "<?",
         required: "<?",
         weekNumbers: "<?",

@@ -44,6 +44,7 @@ export default class {
         this.setOptionsProperty("minDate", this.minDate);
         this.setOptionsProperty("mode", this.mode);
         this.setOptionsProperty("weekNumbers", this.weekNumbers);
+        this.setOptionsProperty("enableTime", this.enableTime);
 
         // Set formatting options
         this.setOptionsProperty("dateFormat", this.format);

@@ -51,7 +51,7 @@
 
 | Attribute     | Type      | Binding   | One-time Binding  | Values            | Default   | Description
 | ----          | ----      | ----      | ----              | ----              | ----      | ----
-| `items`       | object    | <         | no                | n/a               | n/a       | items bound to component
+| `items`       | object    | =         | no                | n/a               | n/a       | items bound to component
 | `closable`    | boolean   | <?        | yes               | `true`, `false`   | `false`   | closable flag
 | `stacked`     | boolean   | <?        | yes               | `true`, `false`   | `false`   | stacked flag
 | `on-remove`   | function  | &         | no                | n/a               | n/a       | handler triggered when items are removed
@@ -8,7 +8,7 @@ export default {
     template,
     controller,
     bindings: {
-        items: "<",
+        items: "=",
         closable: "<?",
         stacked: "<?",
         onRemove: "&"

@@ -1,5 +1,5 @@
 <span class="oui-chip"
-    ng-repeat="item in $ctrl.items"
+    ng-repeat="item in $ctrl.items track by $index"
     ng-class="::{
         'oui-chip_closable': !!$ctrl.closable,
         'oui-chip_full-width': !!$ctrl.stacked

@@ -2,7 +2,6 @@
     <button type="button" class="oui-criteria-adder__button oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
         oui-dropdown-trigger>
         <span class="oui-icon oui-icon-filter" aria-hidden="true"></span>
-        <span class="oui-icon oui-icon-filter oui-icon-filter_bicolor" aria-hidden="true"></span>
     </button>
     <oui-dropdown-content>
         <form name="{{::$ctrl.name}}" novalidate

@@ -128,6 +128,7 @@ Clicked row action 1: <span ng-if="$ctrl.action1Row">{{$ctrl.action1Row.lastName
 ```html:preview
 <oui-datagrid
   rows="$ctrl.emptyList"
+  empty-placeholder="There's no bananas here, sorry :("
   page-size="5">
   <oui-column title="'First name'" property="firstName" sortable="asc"></oui-column>
   <oui-column title="'Last name'" property="lastName" sortable></oui-column>
@@ -687,6 +688,7 @@ call `rows-loader` and then a `row-loader` call for each line.
 | `rows`                            | array     | <?        | yes                 | n/a              | n/a          | rows to show
 | `rows-loader`                     | function  | &?        | yes                 | n/a              | n/a          | gets all rows (returns a promise with all rows)
 | `row-loader`                      | function  | &?        | yes                 | n/a              | n/a          | gets row details (returns a promise with details)
+| `empty-placeholder`               | string    | @?        | yes                 | n/a              | n/a          | custom placeholder text when there is no data
 | `customizable`                    | boolean   | <?        | no                  | `true`, `false`  | `false`      | if the datagrid is customizable
 | `selectable-rows`                 | boolean   | <?        | no                  | `true`, `false`  | `false`      | if rows can be selected
 | `columns-parameters`              | array     | <?        | no                  | n/a              | `undefined`  | columns parameters (see below)

@@ -16,6 +16,7 @@ export default () => {
             rows: "<?",
             rowsLoader: "&?",
             rowLoader: "&?",
+            emptyPlaceholder: "@?",
             onColumnsParametersChange: "&"
         },
         compile: elm => {

@@ -94,7 +94,7 @@
                                 ng-attr-colspan="{{ $ctrl.columns.length }}"
                                 >
                                 <span ng-if="!$ctrl.loading && !$ctrl.firstLoading"
-                                    ng-bind="$ctrl.config.translations.emptyPlaceholder"></span>
+                                      ng-bind="::$ctrl.emptyPlaceholder || $ctrl.config.translations.emptyPlaceholder"></span>
                                 <oui-spinner ng-if="$ctrl.loading || $ctrl.firstLoading"
                                     size="s"></oui-spinner>
                             </td>