diff --git a/source/import_documentation/Components/SiB-Ac-Checker.rst b/source/import_documentation/Components/SiB-Ac-Checker.rst
index 1d9ae5d9be4a330d83aefd0250bb893d28c2470b..321909c7435cda123fe684f8c5080bb64cc26ac1 100644
--- a/source/import_documentation/Components/SiB-Ac-Checker.rst
+++ b/source/import_documentation/Components/SiB-Ac-Checker.rst
@@ -1,42 +1,29 @@
-solid-ac-checker
-================
+sib-ac-checker
+==============
Hides an element from the page if the current user doesn’t have the
required permissions on it.
.. code:: html
- <solid-ac-checker permission="acl:Write" bind-resources>
- <solid-route name="member-edit">
+ <sib-ac-checker permission="acl:Write" bind-resources>
+ <sib-route name="member-edit">
<div>Edit</div>
- </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
-----------
-
-``permission``
-~~~~~~~~~~~~~~
- Displays the element if the user has the specified right
-
-``no-permission``
-~~~~~~~~~~~~~~~~~
- Displays the element if the user has not the specified right
-
-
-
-Possible values:
-
-- `acl:Read <https://github.com/solid/web-access-control-spec#aclread>`__
-- `acl:Write <https://github.com/solid/web-access-control-spec#aclwrite>`__
-- `acl:Append <https://github.com/solid/web-access-control-spec#aclappend>`__
-- `acl:Control <https://github.com/solid/web-access-control-spec#aclcontrol>`__
+ </sib-route>
+ </sib-ac-checker>
+
+**Attributes :**
+
+- **``permission``**: Displays the element if the user has the
+ specified right
+- **``no-permission``**: Displays the element if the user has not the
+ specified right
+
+Possible values: -
+`acl:Read <https://github.com/solid/web-access-control-spec#aclread>`__
+-
+`acl:Write <https://github.com/solid/web-access-control-spec#aclwrite>`__
+-
+`acl:Append <https://github.com/solid/web-access-control-spec#aclappend>`__
+-
+`acl:Control <https://github.com/solid/web-access-control-spec#aclcontrol>`__
diff --git a/source/import_documentation/Components/SiB-Delete.rst b/source/import_documentation/Components/SiB-Delete.rst
index 027e3b06cf07de0b7af171237007c8810431a4dc..3c47f3fd2432b96f1325d0c2d89786f33876ffab 100644
--- a/source/import_documentation/Components/SiB-Delete.rst
+++ b/source/import_documentation/Components/SiB-Delete.rst
@@ -1,28 +1,19 @@
-solid-delete
-============
+sib-delete
+===========
Receives the URL of a resource or of a container of resources via its
``data-src`` attribute, and displays a button to delete it when clicked.
.. code:: html
- <solid-delete data-src="http://localhost:8000/conversations/9/"></solid-delete>
+ <sib-delete data-src="http://localhost:8000/conversations/9/"></sib-delete>
-Attributes
-----------
+**Attributes:**
-``data-src``
-~~~~~~~~~~~~
- The uri of the LDP resource you want to delete.
+- **``data-src``**: The uri of the LDP resource you want to delete.
+- **``data-label``**: The text to display on the delete button.
-``data-label``
-~~~~~~~~~~~~~~
- The text to display on the delete button.
+**Events:**
-
-Events
--------
-
-``resourceDeleted``
-~~~~~~~~~~~~~~~~~~~
- Triggered when the resource is successfully deleted.
+- **``resourceDeleted``**: triggered when the resource is successfully
+ deleted.
diff --git a/source/import_documentation/Components/SiB-Display.rst b/source/import_documentation/Components/SiB-Display.rst
index cfa0baf15a09866267d1800953400bbe6b49ed86..8ec8dea2bf861901daf18080708c8c1ff2def6e6 100644
--- a/source/import_documentation/Components/SiB-Display.rst
+++ b/source/import_documentation/Components/SiB-Display.rst
@@ -1,8 +1,8 @@
-solid-display
-=============
+sib-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,54 +11,217 @@ added to interact with the list of data being displayed.
.. code:: html
- <solid-display
+ <!--head-->
+ <script type="module" src="https://unpkg.com/@startinblox/core@0.9"></script>
+
+ <!--body-->
+ <sib-display
data-src="https://api.startinblox.com/users/"
fields="first_name, last_name"
- ></solid-display>
+ ></sib-display>
-Mixins
-------
+Attributes
+----------
-This component uses the following mixins:
+data-src
+~~~~~~~~
+ The uri of the LDP resource you want to display.
+
+ If this resource is a container, ``<sib-display>`` will create a child
+ ``<sib-display>`` for each resource it contains, and ``<sib-form>``
+ will display a blank form with appropriate fields to create a new
+ resource.
-- `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>`__
+value-xyz
+~~~~~~~~
+ To display a string not contained within the data.
-Please check their documentation to know more about their capabilities.
+fields
+~~~~~~~~
+ The ordered list of fields to be displayed, separated
+ by commas.
+ By default, all the fields of the resource are displayed.
-Attributes
-----------
+ To not show any fields, put an empty fields (eg.
+ ``<sib-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.
-fields
-~~~~~~
By default, all displayed fields are direct children of
- ``<solid-display>``. Make sure you don’t give your set the same name as
+ ``<sib-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 ``<sib-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 ``<sib-route>`` that should
+ be accessed when a ``<sib-display>`` element is clicked. See the
+ documentation of ``<sib-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:
+ ``sib-display-div``, ``sib-display-labelled-div``,
+ ``sib-display-mailto`` and ``sib-display-tel``
+
+counter-template
+~~~~~~~~~~~~~~~~
+ To display the number of resources fetched
+ by the ``sib-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.
-Widgets
--------
-By default, the widget used is ``<solid-display-div>``. Cf the
-`Display widgets <display-widgets>`__ page for more info.
-
+default-xyz
+~~~~~~~~~~~~~~~~
+ Value displayed for field ``xyz`` when it’s
+ empty or not defined
-Events
--------
+empty-widget
+~~~~~~~~~~~~~~~~
+ Widget to display when there is no element in
+ the container
-``resourceSelect``
-~~~~~~~~~~~~~~~~~~~
- Triggered when an event is clicked on the calendar
+empty-value
+~~~~~~~~~~~~~~~~
+ To display a value in the empty widget. It can
+ be accessed in the widget like this: ``${value}``
+
+**API:** In Javascript, you have access to different variables and
+methods on a ``sib-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
diff --git a/source/import_documentation/Components/SiB-Form.rst b/source/import_documentation/Components/SiB-Form.rst
index 8a6c40711769bcc5def1971c917fea0292d1f48c..b1eb377e857b7fed9a55a352c60918d11125bdd1 100644
--- a/source/import_documentation/Components/SiB-Form.rst
+++ b/source/import_documentation/Components/SiB-Form.rst
@@ -1,5 +1,5 @@
-solid-form
-==========
+sib-form
+=========
Receives the URL of a ressource via its ``data-src`` attribute, and
displays a form to edit the resource. If given the URL of a container of
@@ -8,67 +8,22 @@ container.
.. code:: html
- <solid-form data-src="http://localhost:8000/todos/"></solid-form>
+ <sib-form data-src="http://localhost:8000/todos/"></sib-form>
-Mixins
-------
+**Attributes:**
-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
-----------
-
-``label-xyz``
-~~~~~~~~~~~~~
- When displaying a form, the default labels are the fields names of the model.
- If you want something fancier, you can set this attribute.
- i.e. ``label-username="Your name"``
-
-``naked``
-~~~~~~~~~
- When the attribute is set, the submit button will be
+- **``label-xyz``**: When displaying a form, the default labels are the
+ fields names of the model. If you want something fancier, you can set
+ this attribute. i.e. ``label-username="Your name"``
+- **``naked``**: When the attribute is set, the submit button will be
removed. It’s particularly useful to prevent the nested forms to
display their own submit button.
-
-``upload-url-xyz``
-~~~~~~~~~~~~~~~~~~
- URL to upload file for field ``xyz``, it
- automatically set ``widget-xyz`` to ``solid-form-file`` if net defined.
+- **``upload-url-xyz``**: URL to upload file for field ``xyz``, it
+ automatically set ``widget-xyz`` to ``sib-form-file`` if net defined.
It’s particularly useful with a dropdown field.
-
-``submit-button``
-~~~~~~~~~~~~~~~~~
- Text of the submit button of the form.
-
-``range-xyz``
-~~~~~~~~~~~~~
- URL of a container which list the accepted values
+- **``submit-button``**: Text of the submit button of the form.
+- **``range-xyz``**: URL of a container which list the accepted values
for the field ``xyz``. It’s particularly useful with a dropdown
field.
-
-``partial``
-~~~~~~~~~~~
- Add this attribute when the form does not include
+- **``partial``**: Add this attribute when the form does not include
all the fields of the resource to update.
-
-Widgets
--------
-By default, the widget used is ``<solid-form-label-text>``. Cf the
-`Form widgets <form-widgets>`__ page for more info.
-
-
-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 5037037edb1dc1813a6347e13ca531fb552a30d6..c66ae4f00bff6a3981bb11f82df94d8ce8f5f648 100644
--- a/source/import_documentation/Components/SiB-Map.rst
+++ b/source/import_documentation/Components/SiB-Map.rst
@@ -1,56 +1,13 @@
-solid-map
-=========
+sib-map
+========
Receives the URL of a resource or of a container of resources via its
``data-src`` attribute, and displays it on a **map**. Here is the list
of fields needed to display the resources properly:
-- ``http://www.w3.org/2003/01/geo/wgs84_pos#lat``: latitude on which the resource will be displayed
-- ``http://www.w3.org/2003/01/geo/wgs84_pos#lng``: longitude on which the resource will be displayed
+- ``name``: name of the event displayed on the calendar
+- ``lat``: latitude on which the resource will be displayed
+- ``lng``: longitude on which the resource will be displayed
-``lat`` and ``lng`` properties are added to the default context to map
-respectively ``http://www.w3.org/2003/01/geo/wgs84_pos#lat`` and ``http://www.w3.org/2003/01/geo/wgs84_pos#lng``.
-
-
-How to use
-----------
-
-The ``solid-map`` module needs to be imported independantly from the core, like following:
-
-.. code:: html
-
- <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
-----------
-
-Like for ``solid-display``, fields can be displayed and filters or searching capabilities can be
+Like for sib-display, filters and searching capabilities can be easily
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.
-
-Events
--------
-
-``resourceSelect``
-~~~~~~~~~~~~~~~~~~~
- Triggered when a marker is clicked on the map
diff --git a/source/import_documentation/Components/SiB-Widget.rst b/source/import_documentation/Components/SiB-Widget.rst
index 8585f8b55ab234d72fb3179ce1e2119a92a5d249..76252c9d713615b6cd2f8752ce3075ed5dbf1ba8 100644
--- a/source/import_documentation/Components/SiB-Widget.rst
+++ b/source/import_documentation/Components/SiB-Widget.rst
@@ -1,5 +1,5 @@
-solid-widget
-============
+sib-widget
+===========
Take a ``name`` as an attribute and a HTML template, and create an HTML
custom element you can use as a widget. i.e.
@@ -7,28 +7,126 @@ custom element you can use as a widget. i.e.
.. code:: html
<!-- Your custom widget to display a customer... -->
- <solid-widget name="my-custom-widget">
+ <sib-widget name="my-custom-widget">
<template>
<h2>Customer name: ${value.name}</h2>
</template>
- </solid-widget>
+ </sib-widget>
- <!-- ... used in a solid-display -->
- <solid-display
+ <!-- ... used in a sib-display -->
+ <sib-display
data-src="http://server/projects/"
fields="name, customer"
widget-customer="my-custom-widget"
- ></solid-display>
+ ></sib-display>
-In a ``solid-widget``, you have access to these values:
+In a ``sib-widget``, you have access to these values:
-- ``id``: id of the displayed resource
-- ``value``: all the values of the current resources
-- ``name``: name of the current field
-- ``label``: if defined, label of the current field
-- ``range``: if defined, range of the current field
+- **``id``**: id of the displayed resource
+- **``value``**: all the values of the current resources
+- **``name``**: name of the current field
+- **``label``**: if defined, label of the current field
+- **``range``**: if defined, range of the current field
..
NB: Do not forget to define your custom template in a ``<template>``
tag. Otherwise, your widget will not be declared properly.
+
+Widgets
+-------
+
+The following widgets are available:
+
+Display widgets
+~~~~~~~~~~~~~~~
+
+- **``sib-display-value``** (default): Displays the value.
+- **``sib-display-div``**: Displays the ``value`` inside a ``<div>``
+ HTML tag.
+- **``sib-display-labelled-div``**: Displays the ``value`` inside a
+ ``<div>`` HTML tag, after the ``label`` contained in a ``<label>``
+ HTML tag
+- **``sib-display-multiline``**:Displays the ``value`` inside a
+ ``<div>``, ``\n`` are replaced by ``<br>``.
+- **``sib-display-labelled-boolean``**: Displays the ``label`` inside a
+ ``<label>`` HTML tag if the ``value`` is true
+- **``sib-display-img``**: Inserts the ``value`` as the src attribute
+ value of an ``<img>`` HTML tag.
+- **``sib-display-mailto``**: Displays a link inside a ``<a>`` HTML tag
+ with a ``mailto:value`` as path. If a label is defined for this
+ field, it’s displayed as the content of the link.
+- **``sib-display-tel``**: Displays a link inside a ``<a>`` HTML tag
+ with a ``tel:value`` as path
+- **``sib-display-link``**: Displays a link inside a ``<a>`` HTML tag
+ with the value as path, and the label as text content
+- **``sib-display-date``**: Displays a date in the browser’s default
+ locale format
+- **``sib-display-date-time``**: Displays a date and a time in the
+ browser’s default locale format
+
+Form widgets
+~~~~~~~~~~~~
+
+- **``sib-form-label-text``**: Inserts an ``<input/>`` HTML tag of type
+ “textâ€, in a ``<label>`` HTML tag.
+- **``sib-form-checkbox``**: Inserts an ``<input/>`` HTML tag of type
+ “checkboxâ€, in a ``<label>`` HTML tag.
+- **``sib-form-date``**: Inserts an ``<input/>`` HTML tag of type
+ “dateâ€, in a ``<label>`` HTML tag.
+- **``sib-form-range-date``**:
+- **``sib-form-json``**: Inserts an ``<input/>`` HTML tag of type
+ “textâ€, in a ``<label>`` HTML tag, and with its ``value`` converted
+ from JSON to string
+- **``sib-form-placeholder-text``**: Inserts an ``<input/>`` HTML tag
+ of type “textâ€, with the ``label`` as placeholder.
+- **``sib-form-textarea``**: Inserts an ``<textarea>`` HTML tag in a
+ ``<label>`` HTML tag.
+- **``sib-form-dropdown``**: Inserts a ``<select>`` HTML tag to select
+ a unique value from a list. The list is provided via the
+ ``range-xyz``, which expects a container’s URL. **xyz** is the name
+ of the field using the ``sib-form-dropdown`` widget.
+- **``sib-form-placeholder-dropdown``**: Inserts a ``<select>`` HTML
+ tag to select a unique value from a list. It has no label but a
+ default disabled value as a label
+- **``sib-form-auto-completion``**: Inserts a ``<input />`` HTML tag
+ and load an autocomplete plugin. The list is provided via the
+ ``range-xyz``, which expects a container’s URL. **xyz** is the name
+ of the field using the ``sib-form-auto-completion`` widget.
+- **``sib-form-number``**: Inserts an ``<input/>`` HTML tag of type
+ “numberâ€, in a ``<label>`` HTML tag.
+- **``sib-form-range-number``**:
+- **``sib-form-file``**: Inserts an ``<input/>`` and an
+ ``<input type="file"/>``. when a file is selected it’s uploaded, URL
+ of file is returned by request and set as the ``<input/>`` value. The
+ upload URL is provided via the ``upload-url`` attribute.
+- **``sib-form-hidden``**: Inserts an ``<input/>`` HTML tag of type
+ “hiddenâ€, in a ``<label>`` HTML tag.
+
+Multiple widgets
+~~~~~~~~~~~~~~~~
+
+- **``sib-multiple``** (default for display): Inserts all the widgets
+ in a ``<sib-multiple>`` tag.
+- **``sib-multiple-form``** (default for forms): Inserts all the
+ widgets in a ``<sib-multiple-form>`` tag, with a “remove†button for
+ each widget, and an “add†button.
+- **``sib-multiple-select``**: Inserts all the values as ``<option>``
+ in a ``<select>`` tag with a ``multiple`` attribute.
+
+Set widgets
+~~~~~~~~~~~
+
+- **``sib-set-default``** (default): Inserts content directly in the
+ set tag.
+- **``sib-set-div``**: Inserts content in a ``<div/>`` HTML tag
+- **``sib-set-ul``**: Inserts content in a ``<ul/>`` HTML tag
+- **``sib-set-fieldset``**: Inserts content in a ``<fieldset/>`` HTML
+ tag
+
+Actions widgets
+~~~~~~~~~~~~~~~
+
+- **``sib-action``**: Displays a link inside a ``<sib-link>`` tag with
+ ``src`` for the ``data-src`` attribute, ``value`` for the ``next``
+ attribute and ``label`` as text content
diff --git a/source/import_documentation/Components/Sib-Calendar.rst b/source/import_documentation/Components/Sib-Calendar.rst
index b42fda6ef4e2381480dba4eb6287a6b0a62be36e..2e356ae172fd963fb87d698ede7fadf2dc4f234f 100644
--- a/source/import_documentation/Components/Sib-Calendar.rst
+++ b/source/import_documentation/Components/Sib-Calendar.rst
@@ -1,5 +1,5 @@
-solid-calendar
-==============
+sib-calendar
+============
Receives the URL of a resource or of a container of resources via its
``data-src`` attribute, and displays it in a **calendar**. Here is the
@@ -8,22 +8,5 @@ list of fields needed to display the resources properly:
- ``name``: name of the event displayed on the calendar
- ``date``: date on which the resource will be displayed
-Like for solid-display, filters and searching capabilities can be easily
+Like for sib-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/Events.rst b/source/import_documentation/Events.rst
index 0f47672bec0d6661320c761a29d69bda25b95084..120d6cc552dc965033cc941a084fa0e06724f7fc 100644
--- a/source/import_documentation/Events.rst
+++ b/source/import_documentation/Events.rst
@@ -10,18 +10,18 @@ But for now, here are some events that will be useful to you.
| vent | ameters | | |
| name | | | |
+======+=========+========================+===========================+
-| `` | `` | ``solid-display``, | The user clicks an child |
-| reso | {detail | ``solid-calendar``, | in the list, with the |
-| urce | :{resou | ``solid-map`` | resource as a detail of |
+| `` | `` | ``sib-display``, | The user clicks an child |
+| reso | {detail | ``sib-calendar``, | in the list, with the |
+| urce | :{resou | ``sib-map`` | resource as a detail of |
| Sele | rce}}`` | | the event. |
| ct`` | | | |
+------+---------+------------------------+---------------------------+
-| ``po | `` | ``solid-display``, | The component got and |
-| pula | {detail | ``solid-form``, | displayed all its datas. |
-| te`` | :{resou | ``solid-calendar``, | |
-| | rce}}`` | ``solid-map`` | |
+| ``po | `` | ``sib-display``, | The component got and |
+| pula | {detail | ``sib-form``, | displayed all its datas. |
+| te`` | :{resou | ``sib-calendar``, | |
+| | rce}}`` | ``sib-map`` | |
+------+---------+------------------------+---------------------------+
-| ``sa | `` | ``solid-form`` | The form has saved |
+| ``sa | `` | ``sib-form`` | The form has saved |
| ve`` | {detail | | successfully. |
| | :{resou | | |
| | rce}}`` | | |
diff --git a/source/import_documentation/Mixins/counter-mixin.rst b/source/import_documentation/Mixins/counter-mixin.rst
deleted file mode 100644
index 3b4662f2f105f2b261e732daa056dc0ebc94c8d2..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/counter-mixin.rst
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 1870a93c9b41cb64a1f16ea02be2e3625985dec1..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/federation-mixin.rst
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index d86047145813e33a8ab462b1ced4b7c8899774be..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/filter-mixin.rst
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index a0ad124176d85f54b607411ad2f91b3cb2d31063..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/grouper-mixin.rst
+++ /dev/null
@@ -1,44 +0,0 @@
-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
deleted file mode 100644
index 0d2af95ae220d37416661e8fe7c2fe1ca361fe72..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/highlighter-mixin.rst
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index f9a77708ea75372d322094b53a049f74ef01be94..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/list-mixin.rst
+++ /dev/null
@@ -1,49 +0,0 @@
-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
deleted file mode 100644
index 5a25ab1a8d04a5fe959bc144e28c893b9be4c38a..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/paginate-mixin.rst
+++ /dev/null
@@ -1,46 +0,0 @@
-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
deleted file mode 100644
index 0fd171e6787ee3391b87344e1ed8b13206b23295..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/sorter-mixin.rst
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index 6f9eda8a729a5facf63b236be5bfafb44015ee06..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/store-mixin.rst
+++ /dev/null
@@ -1,75 +0,0 @@
-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
deleted file mode 100644
index 798df123bfcbe603516fc19a4ad688e62ca9a6fc..0000000000000000000000000000000000000000
--- a/source/import_documentation/Mixins/widget-mixin.rst
+++ /dev/null
@@ -1,127 +0,0 @@
-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 <other-widgets>`__
- page 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>`__ page 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/Store-doc.rst b/source/import_documentation/Store-doc.rst
deleted file mode 100644
index 0a9e6a87f37b435d47bea127f5d6ad719253c458..0000000000000000000000000000000000000000
--- a/source/import_documentation/Store-doc.rst
+++ /dev/null
@@ -1,114 +0,0 @@
-Store documentation
-====================
-
-The store is responsible for the communication between the framework and the servers. You may need to use some of its functions.
-To use the store in your application, make sure to import it from the root of sib-core (ie: `import { store } from 'https://unpkg.com/@startinblox/core';`).
-
-
-API Reference
--------------
-
-
-`getData` (`async`)
-^^^^^^^^^^^^^^^^^^^
-
-Fetch and cache the data for a resource
-
-**parameters**
-- `id: string`: uri of the resource
-- `context: object` (optional): used to expand the `id` and to access the resource predicates from a compact form
-
-**returns**
-- `resource: Proxy`
-
-
-`get`
-^^^^^
-
-Synchronously returns a resource from the cache.
-
-**parameters**
-- `id: string`: uri of the resource
-
-**returns**
-- `resource: Proxy`: or `null` if the resource is not in cache
-
-
-`post` (`async`)
-^^^^^^^^^^^^^^^^
-
-Send a POST request to create a resource in a container. When the request succeed, the resource is cleared from the cache, and the components showing it are notified.
-
-**parameters**
-- `resource: object`: values of the resource to create
-- `id: string`: uri of the container
-
-**returns**
-- `resourceId: string`: id of the created resource
-
-
-`put` (`async`)
-^^^^^^^^^^^^^^^
-
-Send a PUT request to edit a resource. When the request succeed, the resource is cleared from the cache, and the components showing it are notified.
-
-**parameters**
-- `resource: object`: new values of the resource to edit
-- `id: string`: uri of the resource
-
-**returns**
-- `resourceId: string`: id of the edited resource
-
-
-`patch` (`async`)
-^^^^^^^^^^^^^^^^^
-
-Send a PATCH request to edit a resource. When the request succeed, the resource is cleared from the cache, and the components showing it are notified.
-
-**parameters**
-- `resource: object`: new values of the resource to edit
-- `id: string`: uri of the resource
-
-**returns**
-- `resourceId: string`: id of the edited resource
-
-
-`delete` (`async`)
-^^^^^^^^^^^^^^^^^^
-
-Send a DELETE request to delete a resource. When the request succeed, the resource is cleared from the cache, and the components showing it are notified.
-
-**parameters**
-- `id: string`: uri of the resource to delete
-- `context: object` (optional): used to expand the id if needed
-
-**returns**
-- `resourceId: string`: id of the deleted resource
-
-
-`subscribeTo`
-^^^^^^^^^^^^^
-
-Make a resource listen another one. When a change is detected on a resource, all the resources which are listening are removed from the cache, and the component showing them are notified to re-render their content.
-
-**parameters**
-- `resourceToUpdate`: resource which needs to be updated when another one change
-- `resourceToListen`: resource on which listen for changes
-
-
-`clearCache`
-^^^^^^^^^^^^
-
-Manually remove a resource from the cache
-
-**parameters**
-- `id`: uri of the resource to remove from the cache
-
-
-Store reactivity
-----------------
-
-The store is reactive. It means that any change you make on a resource in your app will be reflected in the interface automatically.
-However, there are some limitations:
-- If you make some changes on a resource which is in a virtual container, other virtual containers including this resource may not be updated. (ie: POST on circles/1/members does not update users/admin/circles/)
-- If a resource a multi nested field is displayed in a component, it may not be updated. (ie: in a `sib-display`, I display `nestedResource.user.name` from `resource`, changing `user` will not update the display)
\ No newline at end of file
diff --git a/source/import_documentation/Widgets/display-widgets.rst b/source/import_documentation/Widgets/display-widgets.rst
deleted file mode 100644
index 825468b931d049ede7ab91d4847da347a2b1e36f..0000000000000000000000000000000000000000
--- a/source/import_documentation/Widgets/display-widgets.rst
+++ /dev/null
@@ -1,28 +0,0 @@
-Display widgets
-===============
-
-Startin'blox provides a list of default widgets to display content:
-
-- ``solid-display-value``: Displays the value.
-- ``solid-display-div``: Displays the ``value`` inside a ``<div>``
- HTML tag.
-- ``solid-display-labelled-div``: Displays the ``value`` inside a
- ``<div>`` HTML tag, after the ``label`` contained in a ``<label>``
- HTML tag
-- ``solid-display-multiline``:Displays the ``value`` inside a
- ``<div>``, ``\n`` are replaced by ``<br>``.
-- ``solid-display-labelled-boolean``: Displays the ``label`` inside a
- ``<label>`` HTML tag if the ``value`` is true
-- ``solid-display-img``: Inserts the ``value`` as the src attribute
- value of an ``<img>`` HTML tag.
-- ``solid-display-mailto``: Displays a link inside a ``<a>`` HTML tag
- with a ``mailto:value`` as path. If a label is defined for this
- field, it’s displayed as the content of the link.
-- ``solid-display-tel``: Displays a link inside a ``<a>`` HTML tag
- with a ``tel:value`` as path
-- ``solid-display-link``: Displays a link inside a ``<a>`` HTML tag
- with the value as path, and the label as text content
-- ``solid-display-date``: Displays a date in the browser’s default
- locale format
-- ``solid-display-date-time``: Displays a date and a time in the
- browser’s default locale format
diff --git a/source/import_documentation/Widgets/form-widgets.rst b/source/import_documentation/Widgets/form-widgets.rst
deleted file mode 100644
index 3579faddda83d4d8cfb37b336c7a925da636e5d5..0000000000000000000000000000000000000000
--- a/source/import_documentation/Widgets/form-widgets.rst
+++ /dev/null
@@ -1,42 +0,0 @@
-Form widgets
-===============
-
-Startin'blox provides a list of default widgets to use in a form:
-
-Form widgets
-~~~~~~~~~~~~
-
-- ``solid-form-label-text``: Inserts an ``<input/>`` HTML tag of type
- “textâ€, in a ``<label>`` HTML tag.
-- ``solid-form-checkbox``: Inserts an ``<input/>`` HTML tag of type
- “checkboxâ€, in a ``<label>`` HTML tag.
-- ``solid-form-date``: Inserts an ``<input/>`` HTML tag of type
- “dateâ€, in a ``<label>`` HTML tag.
-- ``solid-form-range-date``:
-- ``solid-form-json``: Inserts an ``<input/>`` HTML tag of type
- “textâ€, in a ``<label>`` HTML tag, and with its ``value`` converted
- from JSON to string
-- ``solid-form-placeholder-text``: Inserts an ``<input/>`` HTML tag
- of type “textâ€, with the ``label`` as placeholder.
-- ``solid-form-textarea``: Inserts an ``<textarea>`` HTML tag in a
- ``<label>`` HTML tag.
-- ``solid-form-dropdown``: Inserts a ``<select>`` HTML tag to select
- a unique value from a list. The list is provided via the
- ``range-xyz``, which expects a container’s URL. **xyz** is the name
- of the field using the ``solid-form-dropdown`` widget.
-- ``solid-form-placeholder-dropdown``: Inserts a ``<select>`` HTML
- tag to select a unique value from a list. It has no label but a
- default disabled value as a label
-- ``solid-form-auto-completion``: Inserts a ``<input />`` HTML tag
- and load an autocomplete plugin. The list is provided via the
- ``range-xyz``, which expects a container’s URL. **xyz** is the name
- of the field using the ``solid-form-auto-completion`` widget.
-- ``solid-form-number``: Inserts an ``<input/>`` HTML tag of type
- “numberâ€, in a ``<label>`` HTML tag.
-- ``solid-form-range-number``:
-- ``solid-form-file``: Inserts an ``<input/>`` and an
- ``<input type="file"/>``. when a file is selected it’s uploaded, URL
- of file is returned by request and set as the ``<input/>`` value. The
- upload URL is provided via the ``upload-url`` attribute.
-- ``solid-form-hidden``: Inserts an ``<input/>`` HTML tag of type
- “hiddenâ€, in a ``<label>`` HTML tag.
\ No newline at end of file
diff --git a/source/import_documentation/Widgets/multiple-widgets.rst b/source/import_documentation/Widgets/multiple-widgets.rst
deleted file mode 100644
index df428ae43f36d9603d188eeb87d536501a9d10af..0000000000000000000000000000000000000000
--- a/source/import_documentation/Widgets/multiple-widgets.rst
+++ /dev/null
@@ -1,15 +0,0 @@
-Multiple widgets
-===============
-
-Startin'blox provides a list of default widgets to handle multiples:
-
-Multiple widgets
-~~~~~~~~~~~~~~~~
-
-- ``solid-multiple`` (default for display): Inserts all the widgets
- in a ``<solid-multiple>`` tag.
-- ``solid-multiple-form`` (default for forms): Inserts all the
- widgets in a ``<solid-multiple-form>`` tag, with a “remove†button for
- each widget, and an “add†button.
-- ``solid-multiple-select``: Inserts all the values as ``<option>``
- in a ``<select>`` tag with a ``multiple`` attribute.
diff --git a/source/import_documentation/Widgets/other-widgets.rst b/source/import_documentation/Widgets/other-widgets.rst
deleted file mode 100644
index 83b213f64bb138ab9a058b5d0ff6c72be120e843..0000000000000000000000000000000000000000
--- a/source/import_documentation/Widgets/other-widgets.rst
+++ /dev/null
@@ -1,19 +0,0 @@
-Other widgets
-===============
-
-Set widgets
-~~~~~~~~~~~
-
-- ``solid-set-default`` (default): Inserts content directly in the
- set tag.
-- ``solid-set-div``: Inserts content in a ``<div/>`` HTML tag
-- ``solid-set-ul``: Inserts content in a ``<ul/>`` HTML tag
-- ``solid-set-fieldset``: Inserts content in a ``<fieldset/>`` HTML
- tag
-
-Actions widgets
-~~~~~~~~~~~~~~~
-
-- ``solid-action``: Displays a link inside a ``<solid-link>`` tag with
- ``src`` for the ``data-src`` attribute, ``value`` for the ``next``
- attribute and ``label`` as text content
diff --git a/source/import_documentation/mixins.rst b/source/import_documentation/mixins.rst
new file mode 100644
index 0000000000000000000000000000000000000000..8e2f48fababbdf8053793ac34c12c648f89d7ba1
--- /dev/null
+++ b/source/import_documentation/mixins.rst
@@ -0,0 +1,100 @@
+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 f63539aed228b5f95f178f50be6170c8f0f9e20a..85491e10c5b86d3146e003956e725636029fb750 100644
--- a/source/index.rst
+++ b/source/index.rst
@@ -54,32 +54,13 @@ Welcome to Startinblox's documentation!
:maxdepth: 2
:caption: 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
- :caption: Mixins:
-
- import_documentation/Widgets/display-widgets
- import_documentation/Widgets/form-widgets
- import_documentation/Widgets/multiple-widgets
- import_documentation/Widgets/other-widgets
+ import_documentation/mixins
.. toctree::
:maxdepth: 2
:caption: Javascript Api:
import_documentation/Helpers-functions
- import_documentation/Store-doc