ovh-ux · AxelPeter · Nov 8, 2018 · Oct 18, 2018 · Oct 19, 2018 · Oct 22, 2018
@@ -14,6 +14,7 @@ import Field from "@ovh-ui/oui-field";
 import FormActions from "@ovh-ui/oui-form-actions";
 import GuideMenu from "@ovh-ui/oui-guide-menu";
 import HeaderTabs from "@ovh-ui/oui-header-tabs";
+import InlineAdder from "@ovh-ui/oui-inline-adder";
 import Message from "@ovh-ui/oui-message";
 import Modal from "@ovh-ui/oui-modal";
 import Navbar from "@ovh-ui/oui-navbar";
@@ -53,6 +54,7 @@ export default angular
         FormActions,
         GuideMenu,
         HeaderTabs,
+        InlineAdder,
         Message,
         Modal,
         Navbar,

@@ -16,6 +16,7 @@ loadTests(require.context("../../oui-field/src/", true, /.*((\.spec)|(index))$/)
 loadTests(require.context("../../oui-form-actions/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-guide-menu/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-header-tabs/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-inline-adder/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-message/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-modal/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-navbar/src/", true, /.*((\.spec)|(index))$/));

@@ -61,6 +61,17 @@
 </div>
 ```
 
+### Enabling time
+
+Use `enable-time` to show time selection after a date is selected.
+
+```html:preview
+<oui-calendar model="$ctrl.weekModel" format="Y-m-d H:i" enable-time>
+</oui-calendar>
+```
+
+**Note**: See [Flatpickr documentation](https://flatpickr.js.org/examples/#time-picker) for more information.
+
 ### Disabling dates
 
 Use `disable-date` to make certain dates unavailable for selection.
@@ -168,7 +179,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
+| `enable-time`     | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | enables time selection
 | `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

@@ -82,8 +82,10 @@ export default class {
     $onInit () {
         addBooleanParameter(this, "appendToBody");
         addBooleanParameter(this, "disabled");
+        addBooleanParameter(this, "enableTime");
         addBooleanParameter(this, "inline");
         addBooleanParameter(this, "required");
+        addBooleanParameter(this, "static");
         addBooleanParameter(this, "weekNumbers");
 
         this.initCalendarInstance();

@@ -294,6 +294,26 @@ Or you can use the `page-size` property. It takes precedence over value configur
 </oui-datagrid>
 ```
 
+### Access row index 
+
+```html:preview
+<oui-datagrid rows="$ctrl.data" page-size="5">
+  <oui-column title="'Index'">
+    {{$rowIndex}}
+  </oui-column>
+  <oui-column title="'Name'">
+    {{$row.firstName}} {{$row.lastName}}
+  </oui-column>
+  <oui-column property="email">
+    <a href="mailto:{{$value}}">{{$value}}</a>
+  </oui-column>
+  <oui-column property="phone"></oui-column>
+  <oui-column property="birth">
+    {{$value | date:shortDate}}
+  </oui-column>
+</oui-datagrid>
+```
+
 ### Remote data
 
 ```html

@@ -40,6 +40,7 @@ export default class {
         this.cellScope.$row = this.row;
         this.cellScope.$column = this.column;
         this.cellScope.$value = this.row[this.column.name];
+        this.cellScope.$rowIndex = this.index;
 
         if (this.column.compiledTemplate) {
             this.column.compiledTemplate(this.cellScope, clone => {

@@ -1076,6 +1076,38 @@ describe("ouiDatagrid", () => {
             expect(actualCellHtml).toBe(`test: ${fakeData[0].lastName}`);
         });
 
+        it("should support row index data binding inside cell", () => {
+            const element = TestUtils.compileTemplate(`
+                    <oui-datagrid rows="$ctrl.rows">
+                        <oui-column property="firstName"></oui-column>
+                        <oui-column property="">
+                            test: {{ $rowIndex }}
+                        </oui-column>
+                    </oui-datagrid>
+                `, {
+                rows: fakeData.slice(0, 5)
+            }
+            );
+
+            const $firstRow = getRow(element, 0);
+            expect(
+                getCell($firstRow, 1).children().children().html()
+                    .trim())
+                .toBe("test: 0");
+
+            const $middleRow = getRow(element, 2);
+            expect(
+                getCell($middleRow, 1).children().children().html()
+                    .trim())
+                .toBe("test: 2");
+
+            const $lastRow = getRow(element, 4);
+            expect(
+                getCell($lastRow, 1).children().children().html()
+                    .trim())
+                .toBe("test: 4");
+        });
+
         it("should support parent binding inside cell", () => {
             const element = TestUtils.compileTemplate(`
                     <oui-datagrid rows="$ctrl.rows">

@@ -212,6 +212,32 @@ describe("ouiDropdown", () => {
                 expect(link.attr("target")).toBe("_blank");
                 expect(link.attr("rel")).toBe("noopener");
             });
+
+            it("should call click callback", () => {
+                const onLinkClickSpy = jasmine.createSpy("onLinkClickSpy");
+                const onButtonClickSpy = jasmine.createSpy("onButtonClickSpy");
+                const element = TestUtils.compileTemplate(`
+                    <oui-dropdown>
+                        <oui-dropdown-trigger text="Actions"></oui-dropdown-trigger>
+                        <oui-dropdown-content>
+                            <oui-dropdown-item text="Lorem ipsum" href="#" on-click="$ctrl.onLinkClick()"></oui-dropdown-item>
+                            <oui-dropdown-item text="Lorem ipsum" on-click="$ctrl.onButtonClick()"></oui-dropdown-item>
+                            <oui-dropdown-item text="Lorem ipsum" href="#"></oui-dropdown-item>
+                        </oui-dropdown-content>
+                    </oui-dropdown>
+                `, {
+                    onLinkClick: onLinkClickSpy,
+                    onButtonClick: onButtonClickSpy
+                });
+
+                $timeout.flush();
+                const items = angular.element(element[0].querySelectorAll("oui-dropdown-item")).children();
+                angular.element(items[0]).triggerHandler("click");
+                angular.element(items[1]).triggerHandler("click");
+
+                expect(onLinkClickSpy).toHaveBeenCalled();
+                expect(onButtonClickSpy).toHaveBeenCalled();
+            });
         });
 
         describe("Group", () => {

@@ -12,7 +12,8 @@
     ng-if="::!!$ctrl.href"
     ng-href="{{::$ctrl.href}}"
     ng-attr-target="{{::$ctrl.linkTarget}}"
-    ng-attr-rel="{{::$ctrl.linkRel}}">
+    ng-attr-rel="{{::$ctrl.linkRel}}"
+    ng-click="$ctrl.onClick()">
     <span ng-transclude>{{::$ctrl.text}}</span>
     <span ng-if="::$ctrl.external"
         class="oui-icon oui-icon-external_link"
@@ -23,6 +24,7 @@
     role="menuitem"
     ng-if="::!!$ctrl.state"
     ui-sref="{{::$ctrl.getFullSref()}}"
+    ng-click="$ctrl.onClick()"
     ng-transclude>
     {{::$ctrl.text}}
 </a>
@@ -0,0 +1,168 @@
+# Inline adder
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Basic
+
+```html:preview
+<oui-inline-adder>
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field ng-hide="$ctrl.togglerLoading">
+            <oui-field label="Field 2">
+                <input type="text" class="oui-input" name="field2" ng-model="field2" required>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+```
+
+### Multiple rows
+
+```html:preview
+<oui-inline-adder>
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field>
+            <oui-field label="Field 2">
+                <input type="text" class="oui-input" name="field2" ng-model="field2">
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 3">
+                <input type="text" class="oui-input" name="field3" ng-model="field3" required>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field>
+            <oui-field label="Field 4">
+                <input type="text" class="oui-input" name="field4" ng-model="field4">
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+```
+
+### Adaptive fields
+
+**Note**: Fields with `adaptive` attribute will adapt their size to their content.
+
+```html:preview
+<oui-inline-adder>
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field adaptive>
+            <oui-field label="Field 2" size="m">
+                <label class="oui-select">
+                    <select name="field2" ng-model="field2" class="oui-select__input" required>
+                        <option value="" disabled selected>Select the OS</option>
+                        <option value="freebsd">FreeBSD</option>
+                        <option value="linux">Linux</option>
+                        <option value="osx">OSX</option>
+                        <option value="windows">Windows</option>
+                    </select>
+                    <span class="oui-icon oui-icon-chevron-down" aria-hidden="true"></span>
+                </label>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field adaptive>
+            <oui-field label="Field 3">
+                <oui-numeric name="field3" model="field3"></oui-numeric>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+```
+
+### Events
+
+#### `on-add`
+
+**Note**: If you want to access the form inside `on-add` callback, you need to use the `form` variable as below.
+
+```html:preview
+<oui-inline-adder on-add="$ctrl.onAdd(form)">
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+<div class="oui-doc-preview-only">
+    <p>On Add</p>
+    <pre class="oui-doc-code oui-doc-code_json">{{$ctrl.addedForm | json}}</pre>
+</div>
+```
+
+#### `on-remove`
+
+**Note**: If you want to access the form inside `on-remove` callback, you need to use the `form` variable as below.
+
+```html:preview
+<oui-inline-adder on-remove="$ctrl.onRemove(form)">
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+<div class="oui-doc-preview-only">
+    <p>On Remove</p>
+    <pre class="oui-doc-code oui-doc-code_json">{{$ctrl.removedForm | json}}</pre>
+</div>
+```
+
+#### `on-change`
+
+**Note**: If you want to access the forms array inside `on-change` callback, you need to use the `forms` variable as below.
+
+```html:preview
+<oui-inline-adder on-change="$ctrl.onChange(forms)">
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+<div class="oui-doc-preview-only">
+    <p>On Change</p>
+    <pre class="oui-doc-code oui-doc-code_json">{{$ctrl.changedForms | json}}</pre>
+</div>
+```
+
+## API
+
+### oui-inline-adder
+
+| Attribute     | Type      | Binding   | One-time binding  | Values            | Default   | Description
+| ----          | ----      | ----      | ----              | ----              | ----      | ----
+| `on-add`      | function  | &         | no                | n/a               | n/a       | handler triggered when a row is added
+| `on-remove`   | function  | &         | no                | n/a               | n/a       | handler triggered when a row is removed
+| `on-change`   | function  | &         | no                | n/a               | n/a       | handler triggered when rows have changed
+
+### oui-inline-adder-field
+
+| Attribute     | Type      | Binding   | One-time binding  | Values            | Default   | Description
+| ----          | ----      | ----      | ----              | ----              | ----      | ----
+| `adaptive`    | boolean   | <?        | yes               | `true`, `false`   | `false`   | adaptive field flag
@@ -0,0 +1,8 @@
+import controller from "./inline-adder-field.controller";
+
+export default {
+    bindings: {
+        adaptive: "<?"
+    },
+    controller
+};
@@ -0,0 +1,25 @@
+import { addBooleanParameter } from "@ovh-ui/common/component-utils";
+
+export default class {
+    constructor ($attrs, $element, $timeout) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$timeout = $timeout;
+    }
+
+    $onInit () {
+        addBooleanParameter(this, "adaptive");
+    }
+
+    $postLink () {
+        this.$timeout(() => {
+            this.$element.addClass("oui-inline-adder__field");
+
+            if (this.adaptive) {
+                this.$element.addClass("oui-inline-adder__field_adaptive");
+            }
+        });
+    }
+}