diff --git a/source/import_documentation/Components/SiB-Ac-Checker.rst b/source/import_documentation/Components/SiB-Ac-Checker.rst
index ff6102c34816f482e44bf2ec6f6e4be72d5f6bca..1d9ae5d9be4a330d83aefd0250bb893d28c2470b 100644
--- a/source/import_documentation/Components/SiB-Ac-Checker.rst
+++ b/source/import_documentation/Components/SiB-Ac-Checker.rst
@@ -12,6 +12,14 @@ required permissions on it.
</solid-route>
</solid-ac-checker>
+Mixins
+------
+
+This component uses the following mixins:
+
+- `store-mixin <store-mixin>`__
+
+Please check their documentation to know more about their capabilities.
Attributes
----------
diff --git a/source/import_documentation/Components/SiB-Display.rst b/source/import_documentation/Components/SiB-Display.rst
index fad947c72efc708295dadd246fcff27a21bca5fb..c03e8ffee51125a6085a25f205e8779b022254aa 100644
--- a/source/import_documentation/Components/SiB-Display.rst
+++ b/source/import_documentation/Components/SiB-Display.rst
@@ -1,8 +1,8 @@
solid-display
-===========
+=============
Receives the URL of a resource or of a container of resources via its
-``data-src`` attribute, and displays it.
+``data-src`` attribute, and displays it.
Each field of the displayed
resources can be rendered by a specific widget, either custom or chosen
@@ -11,220 +11,52 @@ added to interact with the list of data being displayed.
.. code:: html
- <!--head-->
- <script type="module" src="https://unpkg.com/@startinblox/core@0.9"></script>
-
- <!--body-->
<solid-display
data-src="https://api.startinblox.com/users/"
fields="first_name, last_name"
></solid-display>
-Attributes
-----------
+Mixins
+------
-data-src
-~~~~~~~~
- The uri of the LDP resource you want to display.
-
- If this resource is a container, ``<solid-display>`` will create a child
- ``<solid-display>`` for each resource it contains, and ``<solid-form>``
- will display a blank form with appropriate fields to create a new
- resource.
+This component uses the following mixins:
-value-xyz
-~~~~~~~~~
- To display a string not contained within the data.
+- `counter-mixin <counter-mixin>`__
+- `federation-mixin <federation-mixin>`__
+- `filter-mixin <filter-mixin>`__
+- `grouper-mixin <grouper-mixin>`__
+- `highlighter-mixin <highlighter-mixin>`__
+- `list-mixin <list-mixin>`__
+- `paginate-mixin <paginate-mixin>`__
+- `sorter-mixin <sorter-mixin>`__
+- `store-mixin <store-mixin>`__
+- `widget-mixin <widget-mixin>`__
-fields
-~~~~~~
- The ordered list of fields to be displayed, separated
- by commas.
-
- By default, all the fields of the resource are displayed.
+Please check their documentation to know more about their capabilities.
- To not show any fields, put an empty fields (eg.
- ``<solid-display fields />)``
- To group fields within a ``<div>`` tag that will have the ``name``
- attribute set up to ``xyz``, enclose some fields in parenthesis. For
- example: ``fields="xyz(first_name, last_name), email"``. You can
- customize the group widget, see the `sets widgets <#set-widgets>`__
- section below for more info.
+Attributes
+----------
+fields
+~~~~~~
By default, all displayed fields are direct children of
``<solid-display>``. Make sure you don’t give your set the same name as
a field as it would result in an infinite loop.
widget-xyz
-~~~~~~~~
- The widget to be used to display the ``xyz``
- field. By default, the widget used is ``<solid-display-div>``. Cf the
+~~~~~~~~~~
+ By default, the widget used is ``<solid-display-div>``. Cf the
`Display widgets <#display-widgets>`__ section below for more info.
-default-widget
-~~~~~~~~~~~~~~~~
- The widget to use for all the fields, except if a specific one is defined for a field.
-
-multiple-xyz
-~~~~~~~~~~~~~~~~
- Show field ``xyz`` as multiple field containing
- one widget for each child. Multiple widget can be specified, example:
- ``multiple-skills="my-custom-multiple-widget"``. If argument is used
- without value, default multiple widget is used. Cf the `Multiple
- widgets <#multiple-widgets>`__ section below for more info.
-
- each-label-xyz
- ++++++++++++++
- Used with ``multiple-xyz``, label of each
- child of multiple widget
-
- each-class-xyz
- ++++++++++++++
- Used with ``multiple-xyz``, class of each
- child of multiple widget
-
- each-range-xyz
- ++++++++++++++
- Used with ``multiple-xyz``, range value of
- each child of multiple widget
-
- multiple-xyz-add-label
- +++++++++++++
- Used with ``multiple-xyz``, text
- of the “+†button
-
- multiple-xyz-remove-label
- ++++++++++++++++++++++++++++
- Used with ``multiple-xyz``,
- text of the “׆button
-
-search-fields
-~~~~~~~~~~~~~~~~
- It is possible to search/filter your list by
- choosing the fields you want to filter it with. To be able to filter
- my users by ``name`` for instance, I can set
- ``search-fields="name"``. This will display a form with the
- appropriate inputs to filter the list.
-
- - ``search-value-xyz``: The default value of the search field
- ``xyz``
- - ``search-label-xyz``: Set the label for the search field
- ``xyz``
- - ``search-widget-xyz``: The form widget of the search field
- ``xyz``
- - ``search-range-xyz``: The range of values of the search field
- ``xyz``
-
-paginate-by
-~~~~~~~~~~~~~~~~
- The list can also be split in pages, for example
- set ``paginate-by="5"`` to display pages of 5 elements, the prev/next
- buttons and the counter will be added automatically
-
-order-by
-~~~~~~~~~~~~~~~~
- The name of the field you want to use to order the
- list. For example, ``order-by="username"`` will order the users list
- alphabetically based on the username.
-
-highlight-xyz
-~~~~~~~~~~~~~~~~
- The resources to put at the top of the list.
- For example, ``highlight-date="2019-05-20"`` will display first all
- the resources which have a field date equal to “2019-05-20â€.
-
-group by
-~~~~~~~~~~~~~~~~
- The resources will be grouped by the field you give
- as a parameter. For example, ``group-by="date"`` will render one
- ``<div>`` by date, and put the corresponding resources inside.
-
-next
-~~~~~~~~~~~~~~~~
- ``name`` attribute of the ``<solid-route>`` that should
- be accessed when a ``<solid-display>`` element is clicked. See the
- documentation of ``<solid-router>`` for more details.
-
-action-xyz
-~~~~~~~~~~~~~~~~
-
-label-xyz
-~~~~~~~~~~~~~~~~
- Set the label for the field ``xyz``
-
-editable-xyz
-~~~~~~~~~~~~~~~~
- Add an “edit†button next to the ``xyz`` field
- to let the user edit it. The changes are saved as soon as the field
- loses focus. The editable attribute works with the following widgets:
- ``solid-display-div``, ``solid-display-labelled-div``,
- ``solid-display-mailto`` and ``solid-display-tel``
-
-counter-template
-~~~~~~~~~~~~~~~~
- To display the number of resources fetched
- by the ``solid-display``. It takes a string in which you can use HTML
- tags, and the ``counter`` variable to add the number.
- i.e. ``"<strong>${counter} results</strong>"``
-
-extra-context
-~~~~~~~~~~~~~~~~
- The id of the ``<script>`` tag which contains
- the context you want to add for this component. An extra context
- looks like this:
-
- .. code:: html
-
- <script id="custom-context" type="application/ld+json">
- { "user": "https://api.test-paris.happy-dev.fr/users/" }
- </script>
-
- If your ``<script>`` tag has the attribute ``data-default-context``,
- this extra context will be applied on all the components which
- doesn’t have an ``extra-context`` attribute.
-
-loader-id
-~~~~~~~~~~~~~~~~
- Id of the loader element you want to display
- during the loading time.
-
-class-xyz
-~~~~~~~~~~~~~~~~
- Class attribute added to the fields ``xyz``.
-
child-xyz
~~~~~~~~~~~~~~~~
add attribute ``xyz`` to all children.
-nested-field
-~~~~~~~~~~~~~~~~
- Name of the field of the requested resource to
- display. Useful when the source url is auto-generated (for instance,
- with the attribute ``bind-resources``) but you need to display
- another field of this source.
-
-default-xyz
-~~~~~~~~~~~~~~~~
- Value displayed for field ``xyz`` when it’s
- empty or not defined
-
-empty-widget
-~~~~~~~~~~~~~~~~
- Widget to display when there is no element in
- the container
-
-empty-value
-~~~~~~~~~~~~~~~~
- To display a value in the empty widget. It can
- be accessed in the widget like this: ``${value}``
-
-
-API
----
+Events
+-------
-In Javascript, you have access to different variables and methods on a ``solid-display`` element:
-- ``sibDisplay.resource``: returns the Proxy of the current resource
-- ``sibDisplay.resource.clearCache()`` (async): clears the cache of the store for this resource
-- ``sibDisplay.resourceId``: returns the id of the current resource
+``resourceSelect``
+~~~~~~~~~~~~~~~~~~~
+ Triggered when an event is clicked on the calendar
diff --git a/source/import_documentation/Components/SiB-Form.rst b/source/import_documentation/Components/SiB-Form.rst
index fcc3c9f47b19c0556dbe2a80516c09257626da61..ed4067e25918b5c69ad53a66166d89cb82ace3b7 100644
--- a/source/import_documentation/Components/SiB-Form.rst
+++ b/source/import_documentation/Components/SiB-Form.rst
@@ -10,6 +10,16 @@ container.
<solid-form data-src="http://localhost:8000/todos/"></solid-form>
+Mixins
+------
+
+This component uses the following mixins:
+
+- `store-mixin <store-mixin>`__
+- `widget-mixin <widget-mixin>`__
+
+Please check their documentation to know more about their capabilities.
+
Attributes
----------
@@ -45,3 +55,14 @@ Attributes
~~~~~~~~~~~
Add this attribute when the form does not include
all the fields of the resource to update.
+
+Events
+-------
+
+``formChange``
+~~~~~~~~~~~~~~
+ Triggered when the form values change
+
+``save``
+~~~~~~~~~~~~~~
+ Triggered when the response of the submit has been received (successfull or not)
diff --git a/source/import_documentation/Components/SiB-Map.rst b/source/import_documentation/Components/SiB-Map.rst
index b49abc11844f229d1ff0e17710ea62d9285017e8..5037037edb1dc1813a6347e13ca531fb552a30d6 100644
--- a/source/import_documentation/Components/SiB-Map.rst
+++ b/source/import_documentation/Components/SiB-Map.rst
@@ -22,6 +22,21 @@ The ``solid-map`` module needs to be imported independantly from the core, like
<script type="module" src="https://unpkg.com/@startinblox/core/dist/components/solid-map.js"></script>
+Mixins
+------
+
+This component uses the following mixins:
+
+- `counter-mixin <counter-mixin>`__
+- `filter-mixin <filter-mixin>`__
+- `grouper-mixin <grouper-mixin>`__
+- `list-mixin <list-mixin>`__
+- `store-mixin <store-mixin>`__
+- `widget-mixin <widget-mixin>`__
+
+Please check their documentation to know more about their capabilities.
+
+
Attributes
----------
@@ -31,4 +46,11 @@ added to interact with the list of data being displayed.
``fields``
~~~~~~~~~~
-List of the fields to display in a popup which opens when a marker is clicked. If the attribute is not defined, no popup will show up.
\ No newline at end of file
+List of the fields to display in a popup which opens when a marker is clicked. If the attribute is not defined, no popup will show up.
+
+Events
+-------
+
+``resourceSelect``
+~~~~~~~~~~~~~~~~~~~
+ Triggered when a marker is clicked on the map
diff --git a/source/import_documentation/Components/Sib-Calendar.rst b/source/import_documentation/Components/Sib-Calendar.rst
index 0cfdbca8ffa531305f574e8991128424f53bc1be..b42fda6ef4e2381480dba4eb6287a6b0a62be36e 100644
--- a/source/import_documentation/Components/Sib-Calendar.rst
+++ b/source/import_documentation/Components/Sib-Calendar.rst
@@ -10,3 +10,20 @@ list of fields needed to display the resources properly:
Like for solid-display, filters and searching capabilities can be easily
added to interact with the list of data being displayed.
+
+Mixins
+------
+
+This component uses the following mixins:
+
+- `list-mixin <list-mixin>`__
+- `store-mixin <store-mixin>`__
+
+Please check their documentation to know more about their capabilities.
+
+Events
+-------
+
+``resourceSelect``
+~~~~~~~~~~~~~~~~~~~
+ Triggered when an event is clicked on the calendar
diff --git a/source/import_documentation/Mixins/counter-mixin.rst b/source/import_documentation/Mixins/counter-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..3b4662f2f105f2b261e732daa056dc0ebc94c8d2
--- /dev/null
+++ b/source/import_documentation/Mixins/counter-mixin.rst
@@ -0,0 +1,29 @@
+counter-mixin
+==========
+
+The counter mixin is a post-processor mixin, compatible with list-mixin, which provides the ability to show the number of resources of a container.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
+ * `solid-map <SiB-Map>`__
+
+
+Attributes
+----------
+
+``counter-template``
+~~~~~~~~~~~~~~~~
+ Template used to show the number of resources.
+ It takes a string in which you can use HTML
+ tags, and the ``counter`` variable to add the number.
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/users/"
+ fields="username"
+ counter-template="<strong>${counter} users here</strong>"
+ ></solid-display>
+
diff --git a/source/import_documentation/Mixins/federation-mixin.rst b/source/import_documentation/Mixins/federation-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..1870a93c9b41cb64a1f16ea02be2e3625985dec1
--- /dev/null
+++ b/source/import_documentation/Mixins/federation-mixin.rst
@@ -0,0 +1,11 @@
+federation-mixin
+================
+
+The federation mixin is a post-processor mixin, compatible with list-mixin.
+
+It provides the ability to fetch all the resources of multiple containers and show them in a single list.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
diff --git a/source/import_documentation/Mixins/filter-mixin.rst b/source/import_documentation/Mixins/filter-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..d86047145813e33a8ab462b1ced4b7c8899774be
--- /dev/null
+++ b/source/import_documentation/Mixins/filter-mixin.rst
@@ -0,0 +1,41 @@
+filter-mixin
+===============
+
+The filter mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability for the user to dynamically filter a list of resources.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
+ * `solid-map <SiB-Map>`__
+
+
+Attributes
+----------
+
+``search-fields``
+~~~~~~~~~~~~~~~
+ The properties you want to use to filter the list of resources.
+ You can add multiple fields, separated by a comma.
+
+ In this example, a ``solid-form`` with a ``username`` input and a ``email`` input
+ is created. Each time the user types something in one input, the list is filtered.
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/users"
+ fields="username, email, first_name, last_name"
+ search-fields="username, email"
+ ></solid-display>
+
+
+ You can customize the generated ``solid-form`` by adding an attribute which starts by ``search-``.
+ It will be automatically added to the ``solid-form``, without the prefix ``search-``.
+
+ - ``search-value-[field]``: The default value of ``[field]``
+ - ``search-label-[field]``: Set the label for ``[field]``
+ - ``search-widget-[field]``: The form widget of ``[field]``
+ - ``search-range-[field]``: The range of values of ``[field]``
+ - ...
\ No newline at end of file
diff --git a/source/import_documentation/Mixins/grouper-mixin.rst b/source/import_documentation/Mixins/grouper-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..a0ad124176d85f54b607411ad2f91b3cb2d31063
--- /dev/null
+++ b/source/import_documentation/Mixins/grouper-mixin.rst
@@ -0,0 +1,44 @@
+grouper-mixin
+============
+
+The grouper mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to group resources, depending of the values of one of their properties.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
+ * `solid-map <SiB-Map>`__
+
+
+Attributes
+----------
+
+``group-by``
+~~~~~~~~~~~~
+ The resources will be grouped by the field you give as a parameter.
+
+ In this example, the mixin will render one
+ ``<div>`` for each different date, and put the corresponding resources inside.
+
+ .. code:: html
+
+ <solid-display
+ data-src=http://server/events/"
+ fields="name, date"
+ group-by="date"
+ ></solid-display>
+
+
+ When used with the pagination, each group is paginated.
+
+``group-by-widget``
+~~~~~~~~~~~~~~~~~~~
+ *default: ``solid-group-div``*
+
+ The name of the widget to use as a group widget.
+
+
+``group-class``
+~~~~~~~~~~~~~~~
+ The name of the class to add on each group widget.
\ No newline at end of file
diff --git a/source/import_documentation/Mixins/highlighter-mixin.rst b/source/import_documentation/Mixins/highlighter-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..0d2af95ae220d37416661e8fe7c2fe1ca361fe72
--- /dev/null
+++ b/source/import_documentation/Mixins/highlighter-mixin.rst
@@ -0,0 +1,29 @@
+highlighter-mixin
+==========
+
+The highlighter mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to put some resources at the top of the list, depending of the values of their properties.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
+
+
+Attributes
+----------
+
+``highlight-[field]``
+~~~~~~~~~~~~~~~~
+ Put the resource at the top of the list if ``[field]`` is equal to the attribute value.
+
+ In this example, all the users with a ``first_name`` equal to ``pierre`` will be at the beginning of the list.
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/users/"
+ fields="first_name"
+ highlight-first_name="pierre"
+ ></solid-display>
+
diff --git a/source/import_documentation/Mixins/list-mixin.rst b/source/import_documentation/Mixins/list-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..f9a77708ea75372d322094b53a049f74ef01be94
--- /dev/null
+++ b/source/import_documentation/Mixins/list-mixin.rst
@@ -0,0 +1,49 @@
+list-mixin
+==========
+
+The list mixin provides the ability to display all resources of a container one by one.
+It can make transformations on the list by being combined with some post-processors mixins.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
+ * `solid-calendar <SiB-Calendar>`__
+ * `solid-map <SiB-Map>`__
+
+Post-processors:
+--------
+
+ * `counter-mixin <counter-mixin>`__
+
+
+
+Attributes
+----------
+
+``empty-widget``
+~~~~~~~~~~~~~~~~
+ Name of the widget to display when there is no element in the list.
+
+
+``empty-value``
+~~~~~~~~~~~~~~~
+ Value to pass to the empty widget if the list is empty. It is accessible in ``${value}``
+
+ For example, it can be a route name, which allow to put a link in the widget.
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/projects/"
+ fields="name"
+ empty-widget="no-project-widget"
+ empty-value="add-project"
+ ></solid-display>
+
+ <solid-widget name="no-project-widget">
+ <template>
+ <small>No project yet in the list. <solid-link next="${value}">click here to add one</solid-link></small>
+ </template>
+ </solid-widget>
+
diff --git a/source/import_documentation/Mixins/paginate-mixin.rst b/source/import_documentation/Mixins/paginate-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..5a25ab1a8d04a5fe959bc144e28c893b9be4c38a
--- /dev/null
+++ b/source/import_documentation/Mixins/paginate-mixin.rst
@@ -0,0 +1,46 @@
+paginate-mixin
+===============
+
+The paginate mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to paginate a list of resources.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
+
+
+Attributes
+----------
+
+``paginate-by``
+~~~~~~~~~~~~
+ The list can be split in pages. The "previous" and "next"
+ buttons and the pages counter will be added automatically.
+
+ In this example, the list will show pages of 5 users.
+
+ .. code:: html
+
+ <solid-display
+ data-src=http://server/users/"
+ fields="username"
+ paginate-by="5"
+ ></solid-display>
+
+
+``paginate-loop``
+~~~~~~~~~~~~~~~~~~~
+ If this attribute is present, when the user is on the last page, the "Next" button brings back to the first one.
+ Also, when he is on the first page, the "Previous" button brings to the last page.
+
+ Is is particularly useful for creating a carousel.
+
+ .. code:: html
+
+ <solid-display
+ data-src=http://server/features/"
+ fields="name, description"
+ paginate-by="1"
+ paginate-loop
+ ></solid-display>
\ No newline at end of file
diff --git a/source/import_documentation/Mixins/sorter-mixin.rst b/source/import_documentation/Mixins/sorter-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..0fd171e6787ee3391b87344e1ed8b13206b23295
--- /dev/null
+++ b/source/import_documentation/Mixins/sorter-mixin.rst
@@ -0,0 +1,41 @@
+sorter-mixin
+============
+
+The sorter mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to sort some resources, depending of the values of one of their properties.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
+
+
+Attributes
+----------
+
+``order-by``
+~~~~~~~~~~~~
+ The name of the field you want to use to order the list.
+
+ In this example, the users list will be ordered
+ alphabetically based on the username.
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/users/"
+ fields="username"
+ order-by="username"
+ ></solid-display>
+
+``order-by-random``
+~~~~~~~~~~~~~~~~~~~
+ If the attribute is present, the list will be shuffled before being displayed
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/users/"
+ fields="username"
+ order-by-random
+ ></solid-display>
\ No newline at end of file
diff --git a/source/import_documentation/Mixins/store-mixin.rst b/source/import_documentation/Mixins/store-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..6f9eda8a729a5facf63b236be5bfafb44015ee06
--- /dev/null
+++ b/source/import_documentation/Mixins/store-mixin.rst
@@ -0,0 +1,75 @@
+store-mixin
+==========
+
+The store mixin allows to fetch a resource or a container from an URI, and
+provides the data to the component.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
+ * `solid-form <SiB-Form>`__
+ * `solid-map <SiB-Map>`__
+ * `solid-calendar <SiB-Calendar>`__
+ * `solid-ac-checker <SiB-Ac-Checker>`__
+
+
+Attributes
+----------
+
+``data-src``
+~~~~~~~~~~~~
+ The uri of the LDP resource you want to fetch and use in the component.
+
+ Each time this attribute is changed, the data is fetched again.
+
+ When the data has been successfuly fetched, the mixin ask the component to render.
+
+``nested-field``
+~~~~~~~~~~~~~~~~
+ The name of the field of the requested resource to
+ display. Useful when the source url is auto-generated (for instance,
+ with the attribute ``bind-resources``) but you need to display
+ another field of this source.
+
+``extra-context``
+~~~~~~~~~~~~~~~~~
+ The id of the ``<script>`` tag which contains
+ the context you want to add for this component. An extra context
+ looks like this:
+
+ .. code:: html
+
+ <script id="custom-context" type="application/ld+json">
+ { "user": "https://api.test-paris.happy-dev.fr/users/" }
+ </script>
+
+ If your ``<script>`` tag has the attribute ``data-default-context``,
+ this extra context will be applied on all the components which
+ doesn’t have an ``extra-context`` attribute.
+
+``next``
+~~~~~~~~
+ ``name`` attribute of the ``<solid-route>`` that should
+ be accessed when a ``<solid-display>`` element is clicked. See the
+ documentation of ``<solid-router>`` for more details.
+
+
+``loader-id``
+~~~~~~~~~~~~~
+ Id of the loader element you want to display during the loading time.
+
+Events
+------
+
+``populate``
+~~~~~~~~~~~~
+ Fired when the component has rendered.
+
+
+API
+---
+
+- ``component.resource``: returns the Proxy of the current resource
+- ``component.resource.clearCache()`` (async): clears the cache of the store for this resource
+- ``component.resourceId``: returns the id of the current resource
diff --git a/source/import_documentation/Mixins/widget-mixin.rst b/source/import_documentation/Mixins/widget-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..445ab8875ad94a26da107274ae55e5b7fe1cfd4a
--- /dev/null
+++ b/source/import_documentation/Mixins/widget-mixin.rst
@@ -0,0 +1,127 @@
+widget-mixin
+============
+
+The widget mixin allows to create a widget in the DOM for each properties of a resource, and set its value.
+
+Used by:
+--------
+
+ * `solid-display <SiB-Display>`__
+ * `solid-form <SiB-Form>`__
+ * `solid-map <SiB-Map>`__
+
+
+Attributes
+----------
+
+``fields``
+~~~~~~~~~~
+ The ordered list of fields to be displayed, separated by commas.
+
+ By default, all the fields of the resource are displayed.
+
+ To not show any fields, put an empty fields (eg.
+ ``<solid-display fields />)``
+
+ By default, all displayed fields are inserted into a ``<div>``
+
+ **Sets**
+
+ To group fields within a ``<div>`` tag, enclose some fields in parenthesis.
+
+ In this example, a ``<div name="fullName">`` will be created, and it will contain
+ the widgets of the first name and the last name of the user.
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/users/1/"
+ fields="fullName(first_name, last_name), email"
+ ></solid-display>
+
+ You can customize the group widget, see the `sets widgets <#set-widgets>`__
+ section below for more info.
+
+
+``value-[field]``
+~~~~~~~~~~~~~~~~~
+ To display a string not contained within the data.
+
+ .. code:: html
+
+ <solid-display
+ fields="title"
+ value-title="My custom and static title"
+ ></solid-display>
+
+
+``default-[field]``
+~~~~~~~~~~~~~~~~~~~
+ Value displayed for ``[field]`` when it’s empty or not defined
+
+``widget-[field]``
+~~~~~~~~~~~~~~~~~~
+ The widget to be used to display the ``[field]``
+
+default-widget
+~~~~~~~~~~~~~~~~
+ The widget to use for all the fields, except if a specific one is defined for a field.
+
+``action-[field]``
+~~~~~~~~~~~~~~~~~~
+
+
+``label-[field]``
+~~~~~~~~~~~~~~~~~
+ Set the label for the ``[field]``
+
+``placeholder-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~
+ Set the placeholder for the ``[field]``
+
+``class-[field]``
+~~~~~~~~~~~~~~~~~
+ Set the class applied to the widget of the ``[field]``
+
+``editable-[field]``
+~~~~~~~~~~~~~~~~~~~~
+ *Does not work with ``solid-form``*
+
+ Add an “edit†button next to the ``[field]`` to let the user edit it.
+ The changes are saved as soon as the field loses focus.
+
+ The editable attribute works with the following widgets:
+
+ - ``solid-display-div``
+ - ``solid-display-labelled-div``
+ - ``solid-display-mailto``
+ - ``solid-display-tel``
+
+``multiple-[field]``
+~~~~~~~~~~~~~~~~~~~~
+ Show ``[field]`` as multiple field containing
+ one widget for each child.
+
+ Multiple widget can be specified, example:
+ ``multiple-skills="my-custom-multiple-widget"``. If argument is used
+ without value, default multiple widget is used. Cf the `Multiple
+ widgets <#multiple-widgets>`__ section below for more info.
+
+
+ All attributes starting by ``each`` will be applied on each child,
+ without the prefix ``each``.
+
+ - ``each-label-[field]``: label of each child of multiple widget
+ - ``each-class-[field]``: class of each child of multiple widget
+ - ``each-range-[field]``: range value of each child of multiple widget
+ - ``each-range-[field]``: range value of each child of multiple widget
+
+ For ``solid-form`` only:
+
+ ``multiple-[field]-add-label``
+ ++++++++++++++++++++++++++++++
+ Text of the “+†button used to add an element
+
+ ``multiple-[field]-remove-label``
+ +++++++++++++++++++++++++++++++++
+ Text of the “x†button used to remove an element
diff --git a/source/import_documentation/mixins.rst b/source/import_documentation/mixins.rst
deleted file mode 100644
index 8e2f48fababbdf8053793ac34c12c648f89d7ba1..0000000000000000000000000000000000000000
--- a/source/import_documentation/mixins.rst
+++ /dev/null
@@ -1,100 +0,0 @@
-Features
-#########
-We call "mixins" features for SIB components. Basicly they provide attribute to it.
-
-.. warning::
-
- The section is a work in progress. It will be soon updated.
-
-List
-=====
-
- [Description]
-
- Attributes available:
- --------------------
-
- .. csv-table::
- :header: "Name", "Expected", "Default", "Description"
-
- `order-by`, "test", "test", "test"
- `counter`, "test", "test ", "test"
- `else`, "test", "test", "test"
-
-
- Triggers the events:
- -------------------
-
- *
-
- Used in components:
- -------------------
-
- * link to `Sib-Display <SiB-Display>`__
- * link to `Sib-Form <SiB-Form>`__
-
-Store
-=====
-
- [Description]
-
- Attributes available:
- --------------------
-
- .. csv-table::
- :header: "Name", "Expected", "Default", "Description"
-
- `nested-field`, "test", "test", "test"
- `counter`, "test", "test ", "test"
- `else`, "test", "test", "test"
-
- Triggers the events:
- -------------------
-
- *
-
- Used in components:
- -------------------
-
- * link to `Sib-Display <SiB-Display>`__
- * link to `Sib-Form <SiB-Form>`__
-
-Events
-######
-
- Some event are available on specific wiget. You'll find corresponding events for your components in its documentation.
-
- .. csv-table::
- :header: "Event name ", "Parameters", "Fired by", "Fired when"
-
- `resourceSelect`, `{detail:{resource}}`, `sib-display` | `sib-calendar` | `sib-map`, "The user clicks an child in the list, with the resource as a detail of the event."
- `populate`, `{detail:{resource}}`,`sib-display` | `sib-form` | `sib-calendar` | `sib-map`, "The component got and displayed all its datas."
- `save`, `{detail:{resource}}`, `sib-form`, The form has saved successfully.
-
-
- Examples
- ========
-
- Populate
- --------
- Use to do something if and when the element is generated.
-
- .. code:: js
-
- element.addEventListener("populate", event => {
- // Do something when the element is generated.
- })
-
-
- Save
- ----
- Use to do something when a form is successfully saved.
-
- .. code:: js
-
- form.addEventListener("save", event => {
- // Do something when the form has been successfully saved.
- });
-
-
-
diff --git a/source/index.rst b/source/index.rst
index 974b7123611a723063932f88a66af8b31aae1282..27197211bf1b71009566b354c4495bd5b6aaf94e 100644
--- a/source/index.rst
+++ b/source/index.rst
@@ -54,7 +54,16 @@ Welcome to Startinblox's documentation!
:maxdepth: 2
:caption: Mixins:
- import_documentation/mixins
+ import_documentation/Mixins/store-mixin
+ import_documentation/Mixins/widget-mixin
+ import_documentation/Mixins/list-mixin
+ import_documentation/Mixins/counter-mixin
+ import_documentation/Mixins/federation-mixin
+ import_documentation/Mixins/grouper-mixin
+ import_documentation/Mixins/filter-mixin
+ import_documentation/Mixins/paginate-mixin
+ import_documentation/Mixins/sorter-mixin
+ import_documentation/Mixins/highlighter-mixin
.. toctree::
:maxdepth: 2