diff --git a/source/import_documentation/Components/Solid-Ac-Checker.rst b/source/import_documentation/Components/Solid-Ac-Checker.rst
index 1d9ae5d9be4a330d83aefd0250bb893d28c2470b..68dc8b60c90005600478dc09deee589e0de3aa66 100644
--- a/source/import_documentation/Components/Solid-Ac-Checker.rst
+++ b/source/import_documentation/Components/Solid-Ac-Checker.rst
@@ -1,3 +1,4 @@
+.. _solid-ac-checker:
solid-ac-checker
================
@@ -17,7 +18,8 @@ Mixins
This component uses the following mixins:
-- `store-mixin <store-mixin>`__
+ * :ref:`store-mixin <store-mixin>`
+
Please check their documentation to know more about their capabilities.
diff --git a/source/import_documentation/Components/Solid-Auth.rst b/source/import_documentation/Components/Solid-Auth.rst
index d612a91447deb7f62a0a90a1d6d21cd00c21670a..912614513112d243b5e73fe2ad4fa685d3c6eb4a 100644
--- a/source/import_documentation/Components/Solid-Auth.rst
+++ b/source/import_documentation/Components/Solid-Auth.rst
@@ -1,29 +1,23 @@
-solid-auth
+.. _sib-auth:
+sib-auth
================
Allows your users to login via a given OIDC provider.
Installation
--------------
- Add the following within the <head> of your HTML:
-
- .. note::
-
- Indeed, It doesn't matter where you put the solid-auth.
+ Initialize ``sib-auth`` in your HTML file:
.. code:: html
<script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
- <solid-auth>
- <solid-auth-provider
- class="solid-auth-provider"
+ <sib-auth>
+ <sib-auth-provider
data-authority="https://test-paris.happy-dev.fr/openid/"
- data-client_id="833925"
data-id="paris"
- data-client-name="SIB App"
>
- </solid-auth-provider>
- </solid-auth>
+ </sib-auth-provider>
+ </sib-auth>
`You'll find here the detail of the attributes configuration. <https://github.com/IdentityModel/oidc-client-js/wiki#usermanager>`__
@@ -34,17 +28,17 @@ Set an OIDC provider to your server
The Django package associated is there => https://github.com/jblemee/django-oidc-provider
More documentation here => https://django-oidc-provider.readthedocs.io/en/latest/
-Don't forget to set up your RSA key :
+Don't forget to set up your RSA key:
.. code:: bash
python3 ./manage.py creatersakey
-Set Up your loggin button
-~~~~~~~~~~~~~~~~~~
+Setup your login button
+~~~~~~~~~~~~~~~~~~~~~~~~~~
-Here is an example to make you understand the logic :
+Here is an example to make you understand the logic:
.. code:: html
@@ -52,23 +46,24 @@ Here is an example to make you understand the logic :
<!-- wherever you want in your interface -->
<script>
- // wherever you want in your project
+ // wherever you want in your project
document.querySelector('#login').addEventListener('click', () => {
- document.querySelector('sib-auth').login()
+ document.querySelector('sib-auth').login()
});
</script>
+.. _bind-user:
bind-user
-------------
+----------
To associate the currently logged in user to a component, add the bind-user attribute to it.
- It will set its `data-src` attribute to the currently logged in user's resource URL.
+ It will set its ``data-src`` attribute to the currently logged in user's resource URL.
Example:
.. code:: html
<sib-conversation bind-user></sib-conversation>
- will result in :
+ will result in:
.. code:: html
@@ -77,15 +72,15 @@ bind-user
Methods available
------------------
-Login
-~~~~~~~~~~~~~
+``login``
+~~~~~~~~~
.. code:: js
document.querySelector('sib-auth').login();
-Logout
-~~~~~~~~~~~~~
+``logout``
+~~~~~~~~~~
.. code:: js
@@ -95,5 +90,5 @@ Get user info
~~~~~~~~~~~~~
.. code:: js
-
+
document.querySelector('sib-auth').getUser();
\ No newline at end of file
diff --git a/source/import_documentation/Components/Solid-Calendar.rst b/source/import_documentation/Components/Solid-Calendar.rst
index b42fda6ef4e2381480dba4eb6287a6b0a62be36e..92c68b8f61a198b379dca59eb6c8b9d143cc613e 100644
--- a/source/import_documentation/Components/Solid-Calendar.rst
+++ b/source/import_documentation/Components/Solid-Calendar.rst
@@ -1,3 +1,4 @@
+.. _solid-calendar:
solid-calendar
==============
@@ -16,8 +17,9 @@ Mixins
This component uses the following mixins:
-- `list-mixin <list-mixin>`__
-- `store-mixin <store-mixin>`__
+ * :ref:`list-mixin <list-mixin>`
+ * :ref:`next-mixin <next-mixin>`
+ * :ref:`store-mixin <store-mixin>`
Please check their documentation to know more about their capabilities.
diff --git a/source/import_documentation/Components/Solid-Delete.rst b/source/import_documentation/Components/Solid-Delete.rst
index 027e3b06cf07de0b7af171237007c8810431a4dc..0470de6ba9958491bad5cd0cd95feb493dd96197 100644
--- a/source/import_documentation/Components/Solid-Delete.rst
+++ b/source/import_documentation/Components/Solid-Delete.rst
@@ -1,3 +1,4 @@
+.. _solid-delete:
solid-delete
============
@@ -6,7 +7,18 @@ Receives the URL of a resource or of a container of resources via its
.. code:: html
- <solid-delete data-src="http://localhost:8000/conversations/9/"></solid-delete>
+ <solid-delete data-src="http://server/conversations/9/"></solid-delete>
+
+
+Mixins
+------
+
+This component uses the following mixin:
+
+ * :ref:`next-mixin <next-mixin>`
+
+Please check their documentation to know more about its capabilities.
+
Attributes
----------
@@ -19,10 +31,15 @@ Attributes
~~~~~~~~~~~~~~
The text to display on the delete button.
+``confirmation-message``
+~~~~~~~~~~~~~~~~~~~~~~~~~
+ Add this attribute to create a dialog box linked with the submit button of the solid-form.
+ Its value matches the message displayed in the dialog box.
+
Events
-------
-``resourceDeleted``
-~~~~~~~~~~~~~~~~~~~
+``save``
+~~~~~~~~
Triggered when the resource is successfully deleted.
diff --git a/source/import_documentation/Components/Solid-Display.rst b/source/import_documentation/Components/Solid-Display.rst
index ddd1ee582491068b0da7d15df2ed25edfec822b2..27c4254fe96f61d41b59314077f8c0722f7a1ef3 100644
--- a/source/import_documentation/Components/Solid-Display.rst
+++ b/source/import_documentation/Components/Solid-Display.rst
@@ -1,3 +1,4 @@
+.. _solid-display:
solid-display
=============
@@ -12,26 +13,34 @@ added to interact with the list of data being displayed.
.. code:: html
<solid-display
- data-src="https://api.startinblox.com/users/"
+ data-src="https://server/users/"
fields="first_name, last_name"
></solid-display>
+To make the styling easier, if the ``solid-display`` shows a resource,
+a ``solid-resource`` attribute is automatically added to the element.
+If it's a container, a ``solid-container`` attribute is added.
+Then, you can target your elements with the CSS rules ``solid-display[solid-resource]``
+or ``solid-display[solid-container]``.
+
+
Mixins
------
This component uses the following mixins:
-
-- `counter-mixin <import_documentation/Mixins/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>`__
+ * :ref:`required-mixin <required-mixin>`
+ * :ref:`counter-mixin <counter-mixin>`
+ * :ref:`federation-mixin <federation-mixin>`
+ * :ref:`filter-mixin <filter-mixin>`
+ * :ref:`grouper-mixin <grouper-mixin>`
+ * :ref:`highlighter-mixin <highlighter-mixin>`
+ * :ref:`list-mixin <list-mixin>`
+ * :ref:`next-mixin <next-mixin>`
+ * :ref:`paginate-mixin <paginate-mixin>`
+ * :ref:`sorter-mixin <sorter-mixin>`
+ * :ref:`store-mixin <store-mixin>`
+ * :ref:`widget-mixin <widget-mixin>`
Please check their documentation to know more about their capabilities.
@@ -45,9 +54,9 @@ Attributes
``<solid-display>``. Make sure you don’t give your set the same name as
a field as it would result in an infinite loop.
-``child-xyz``
+``child-[field]``
~~~~~~~~~~~~~
- add attribute ``xyz`` to all children.
+ add attribute ``[field]`` to all children.
Widgets
diff --git a/source/import_documentation/Components/Solid-Form-Search.rst b/source/import_documentation/Components/Solid-Form-Search.rst
index f5b510e6f82fe6d2b4908208db6f181a83c535c1..5fdeac06d844e5db2f33d74771dc8d9939e48d8d 100644
--- a/source/import_documentation/Components/Solid-Form-Search.rst
+++ b/source/import_documentation/Components/Solid-Form-Search.rst
@@ -1,8 +1,10 @@
+.. _solid-form-search:
solid-form-search
=================
Allows you to filter the contents of a component that uses the ``filter-mixin`` such as ``solid-display`` or ``solid-map``.
This must have a ``filtered-by`` attribute set to the id of the current ``solid-form-search``.
+
.. code:: html
<solid-form-search
@@ -12,7 +14,7 @@ This must have a ``filtered-by`` attribute set to the id of the current ``solid-
></solid-form-search>
<solid-display
- data-src="http://example.com/users"
+ data-src="http://server/users"
fields="username, last_name, email"
filtered-by="my-filter"
></solid-display>
@@ -23,7 +25,7 @@ Mixins
This component uses the following mixins:
-- `widget-mixin <https://docs.startinblox.com/import_documentation/Mixins/widget-mixin.html>`__
+ * :ref:`widget-mixin <widget-mixin>`
Please check their documentation to know more about their capabilities.
@@ -34,18 +36,40 @@ Attributes
~~~~~~~~~~
List of fields used to perform the search.
-``label-xyz``
+``label-[field]``
~~~~~~~~~~~~~
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"``
-``range-xyz``
+``submit-button``
+~~~~~~~~~~~~~
+ *Available from version 0.13*
+
+ Text of the submit button to create in the search form. If the attribute is not defined,
+ no button will be added and the form will trigger the search on change.
+
+``range-[field]``
~~~~~~~~~~~~~
URL of a container which list the accepted values
- for the field ``xyz``. It’s particularly useful with a dropdown
+ for the field ``[field]``. It’s particularly useful with a dropdown
field.
+``enum-[field]``
+~~~~~~~~~~~~~
+ *Available from version 0.13*
+
+ List of values of your choice for the field ``[field]``.
+ They have to be filled manually and must be separated by commas.
+ It’s particularly useful with a dropdown or radio field.
+
+ Two formats are possible:
+ * ``enum-[field]="value1, value2, value3"`` : each value will be displayed
+ and loaded in value attribute
+
+ * ``enum-[field]="value1 = a, value2 = b, value3 = c"``: each value will be displayed
+ and "a", "b", "c" will be loaded in value attribute.
+
Widgets
-------
By default, the widget used is ``<solid-form-label-text>``. Cf the
diff --git a/source/import_documentation/Components/Solid-Form.rst b/source/import_documentation/Components/Solid-Form.rst
index c05fc801dd87d8631836c084e588907d4a287313..6fd65a767b8793dbe2d2bef3ded5df74866e4dcc 100644
--- a/source/import_documentation/Components/Solid-Form.rst
+++ b/source/import_documentation/Components/Solid-Form.rst
@@ -1,3 +1,4 @@
+.. _solid-form:
solid-form
==========
@@ -8,22 +9,26 @@ container.
.. code:: html
- <solid-form data-src="http://localhost:8000/todos/"></solid-form>
+ <solid-form data-src="http://server/todos/"></solid-form>
Mixins
------
This component uses the following mixins:
-
-- `store-mixin <https://docs.startinblox.com/import_documentation/Mixins/store-mixin.html>`__
-- `widget-mixin <https://docs.startinblox.com/import_documentation/Mixins/widget-mixin.html>`__
+ * :ref:`next-mixin <next-mixin>`
+ * :ref:`store-mixin <store-mixin>`
+ * :ref:`widget-mixin <widget-mixin>`
Please check their documentation to know more about their capabilities.
Attributes
----------
-``label-xyz``
+``fields``
+~~~~~~~~~~
+ List of the fields used to create the form (by default, all of them are used).
+
+``label-[field]``
~~~~~~~~~~~~~
When displaying a form, the default labels are the fields names of the model.
If you want something fancier, you can set this attribute.
@@ -35,27 +40,78 @@ Attributes
removed. It’s particularly useful to prevent the nested forms to
display their own submit button.
-``upload-url-xyz``
+``upload-url-[field]``
~~~~~~~~~~~~~~~~~~
- URL to upload file for field ``xyz``, it
- automatically set ``widget-xyz`` to ``solid-form-file`` if net defined.
+ URL to upload file for field ``[field]``, it
+ automatically set ``widget-[field]`` to ``solid-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``
+``range-[field]``
~~~~~~~~~~~~~
URL of a container which list the accepted values
- for the field ``xyz``. It’s particularly useful with a dropdown
+ for the field ``[field]``. It’s particularly useful with a dropdown
field.
+``enum-[field]``
+~~~~~~~~~~~~~
+ *Available from version 0.13*
+
+ List of values of your choice for the field ``[field]``.
+ They have to be filled manually and must be separated by commas.
+ It’s particularly useful with a dropdown or radio field.
+
+ Two formats are possible:
+ * ``enum-[field]="value 1, value 2, value 3"`` : each value will be displayed
+ and loaded in value attribute
+
+ * ``enum-[field]="value1 = a, value2 = b, value3 = c"``: each value will be displayed
+ and "a", "b", "c" will be loaded in value attribute.
+
+``order-asc-[field]`` or ``order-desc-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ Name of the field used to order the range list ``[field]``.
+
``partial``
~~~~~~~~~~~
Add this attribute when the form does not include
all the fields of the resource to update.
+``min-[field]``
+~~~~~~~~~~~
+ Add this attribute for the field ``[field]`` to define its minimum value.
+ It works only with a ``solid-form-number`` widget.
+
+``max-[field]``
+~~~~~~~~~~~
+ Add this attribute for the field ``[field]`` to define its maximum value.
+ It works only with a ``solid-form-number`` widget.
+
+``pattern-[field]``
+~~~~~~~~~~~~~~~
+ *Available from version 0.13*
+
+ Add this attribute for the field ``[field]`` to define a regular expression to check the input's value.
+ It works only with a ``solid-form-text`` widget.
+
+``title-[field]``
+~~~~~~~~~~~~~~
+ *Available from version 0.13*
+
+ Add this attribute for the field ``[field]`` to precise extra information about an element.
+ It works only with a ``solid-form-text`` widget.
+
+``confirmation-message``
+~~~~~~~~~~~~~~~~~~~~~~~~~
+ *Available from version 0.13*
+
+ Add this attribute to create a dialog box linked with the submit button of the solid-form.
+ Its value matches the message displayed in the dialog box.
+
+
Widgets
-------
By default, the widget used is ``<solid-form-label-text>``. Cf the
diff --git a/source/import_documentation/Components/Solid-Lang.rst b/source/import_documentation/Components/Solid-Lang.rst
new file mode 100644
index 0000000000000000000000000000000000000000..f4127f7824f3b3726d3b4a7ee91105375791ef37
--- /dev/null
+++ b/source/import_documentation/Components/Solid-Lang.rst
@@ -0,0 +1,23 @@
+.. _solid-lang:
+solid-lang
+==========
+
+Displays a button to set the language of the application.
+
+.. code:: html
+
+ <solid-lang lang="is" data-label="Icelandic"></solid-lang>
+
+
+It uses the ``selectLanguage`` method from the :ref:`store <selectLanguage>`.
+
+Attributes
+----------
+
+``lang``
+~~~~~~~~~~~~
+ Code of the language.
+
+``data-label``
+~~~~~~~~~~~~~~
+ Text to display on the button.
diff --git a/source/import_documentation/Components/Solid-Map.rst b/source/import_documentation/Components/Solid-Map.rst
index 3b5fbaa9f7dc03e2b79499612ee26a6950f6b452..028a5c97dc8f89fe05b9e7af64af8db75c16cd7d 100644
--- a/source/import_documentation/Components/Solid-Map.rst
+++ b/source/import_documentation/Components/Solid-Map.rst
@@ -1,3 +1,4 @@
+.. _solid-map:
solid-map
=========
@@ -27,12 +28,14 @@ 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>`__
+ * :ref:`counter-mixin <counter-mixin>`
+ * :ref:`filter-mixin <filter-mixin>`
+ * :ref:`grouper-mixin <grouper-mixin>`
+ * :ref:`list-mixin <list-mixin>`
+ * :ref:`next-mixin <next-mixin>`
+ * :ref:`store-mixin <store-mixin>`
+ * :ref:`widget-mixin <widget-mixin>`
+
Please check their documentation to know more about their capabilities.
@@ -54,6 +57,6 @@ Events
~~~~~~~~~~~~~~~~~~~
Triggered when a marker is clicked on the map
-Usefull links :
+Useful links:
---------------
- To find latitude and longitude : https://www.latlong.net/
\ No newline at end of file
+ To find latitude and longitude: https://www.latlong.net/
\ No newline at end of file
diff --git a/source/import_documentation/Components/Solid-Router.rst b/source/import_documentation/Components/Solid-Router.rst
index f7692d29cd19f98cbda062df9bf1fd9387e99a16..72a96697c00e0a6aee1d3aa51287eb2cde900fa6 100644
--- a/source/import_documentation/Components/Solid-Router.rst
+++ b/source/import_documentation/Components/Solid-Router.rst
@@ -1,5 +1,6 @@
-sib-router
-==========
+.. _solid-router:
+solid-router
+============
This is a series of web component respecting both the web components
standards and the Linked Data Platform convention. They are aimed at
@@ -20,7 +21,7 @@ in your HTML file:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/router@latest"></script>
-Then you can use the new tags in your markup, for instance :
+Then you can use the new tags in your markup, for instance:
``<solid-router>``. More details on each component in the following
section.
@@ -31,7 +32,7 @@ Displays a menu and handle the navigation for you.
.. code:: html
- <solid-router
+ <solid-router
default-route="list"
route-prefix="my-app"
use-hash
@@ -44,26 +45,26 @@ Displays a menu and handle the navigation for you.
``<solid-router>`` attributes:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-- **``default-route``**: The ``name`` attribute of the default
+- ``default-route``: The ``name`` attribute of the default
``<solid-route>`` displayed.
-- **``route-prefix``**: If you app is not run from the root of your
+- ``route-prefix``: If you app is not run from the root of your
domain name, for instance ``www.your-domain.com/some-uri``, you
should set ``route-prefix`` to ``"some-uri"``.
-- **``use-hash``**: If you can't rewrite the URLs on your server, you
+- ``use-hash``: If you can't rewrite the URLs on your server, you
might want to set this attribute to use ``location.hash`` instead of
``location.pathname`` as URLs.
``<solid-route>`` attributes:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-- **``use-id``**: indicates that the route takes an id.
-- **``name``**: The name of the route. Must match the id of the view
+- ``use-id``: indicates that the route takes an id.
+- ``name``: The name of the route. Must match the id of the view
that is to be displayed. The same name is used as a url identifier as
well.
-- **``rdf-type``**: Can be used as an alternative of ``name``. The
+- ``rdf-type``: Can be used as an alternative of ``name``. The
route will be activated if a resource with the given type is passed
to the router.
-- **``active``**: This attribute is present on route being displayed by
+- ``active``: This attribute is present on route being displayed by
``<solid-router>``. It is automatically added/removed by
``<solid-router>`` and should not be tinkered manually.
@@ -72,7 +73,7 @@ solid-link
``<solid-link>`` accepts the following attributes:
-- **``next``**: The ``name`` attribute of the ``<solid-route>`` you
+- ``next``: The ``name`` attribute of the ``<solid-route>`` you
want to access.
Example:
@@ -91,11 +92,11 @@ Sign in on a web analytics service and set ``<sib-analytics>`` inside
``<solid-analytics>`` accepts the following attributes:
-- **``type``**: the type of web analytics service used (currently
+- ``type``: the type of web analytics service used (currently
supports ``'matomo'``, ``'google'`` or ``'debug'``).
-- **``url``**: URL of the service. For ``type="google"`` it is not
+- ``url``: URL of the service. For ``type="google"`` it is not
necessary to specify the url attribute.
-- **``id``**: id of the website on the service.
+- ``id``: id of the website on the service.
Type ``'debug'`` allow to test sib-analytics. It will display the route
on the console each time a navigation is triggered.
@@ -109,8 +110,8 @@ Example :
Interacting with the router
---------------------------
-bind-resources attribute
-~~~~~~~~~~~~~~~~~~~~~~~~
+``bind-resources`` attribute
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To associate the currently displayed resource to a component, add the
``bind-resources`` attribute to it. It will set its ``data-src``
@@ -120,22 +121,33 @@ Example:
.. code:: html
- <sib-conversation bind-resources></sib-conversation>
+ <sib-conversation
+ bind-resources
+ ></sib-conversation>
will result in:
.. code:: html
- <sib-conversation data-src="https://your-domain/your-group-uri/3" bind-resources></sib-conversation>
+ <sib-conversation
+ data-src="https://your-domain/your-group-uri/3"
+ bind-resources
+ ></sib-conversation>
-RequestNavigation
-~~~~~~~~~~~~~~~~~
+In the same way, the ``bind-user`` attribute can be used to associate the
+currently logged in user to a component and set its ``data-src`` attribute
+accordingly.
+More informations about this in the :ref:`sib-auth documentation<bind-user>`.
+
+Navigate with an event
+~~~~~~~~~~~~~~~~~~~~~
To trigger a route change through javascript, you can trigger a
-RequestNavigation event anywhere on the DOM.
+``requestNavigation`` event anywhere on the DOM.
-The detail part must have at least one of these two parameters: - route:
-the name of the route to activate - resource: a resource that will be
+The detail part must have at least one of these two parameters:
+ * ``route``: the name of the route to activate
+ * ``resource``: a resource that will be
passed to all elements with the ``bind-resources`` attribute. If no
route name is given, the router tries to find a route that has a
``rdf-type`` that matches the type of the resource.
@@ -143,8 +155,8 @@ route name is given, the router tries to find a route that has a
Events
------
-navigate
-~~~~~~~~
+``navigate``
+~~~~~~~~~~~~
This event is triggered whenever a route is activated, after the view is
displayed.
diff --git a/source/import_documentation/Components/Solid-Widget.rst b/source/import_documentation/Components/Solid-Widget.rst
index 8585f8b55ab234d72fb3179ce1e2119a92a5d249..db7c48bfda7a614abee45912bc3f60950220db79 100644
--- a/source/import_documentation/Components/Solid-Widget.rst
+++ b/source/import_documentation/Components/Solid-Widget.rst
@@ -1,3 +1,4 @@
+.. _solid-widget:
solid-widget
============
diff --git a/source/import_documentation/Developping-with-SibTemplateElement.rst b/source/import_documentation/Developping-with-SibTemplateElement.rst
index 4e8cbdfea24b5a4b4bc163f4ca21e1a42bdd7dea..4e0368aa21e550087519b22fc56081a31db6c552 100644
--- a/source/import_documentation/Developping-with-SibTemplateElement.rst
+++ b/source/import_documentation/Developping-with-SibTemplateElement.rst
@@ -1,26 +1,27 @@
-Developping a comoponent with SiBTemplateElement
+.. _with-solid-template-element:
+Developing a comoponent with SolidTemplateElement
================================================
-What is SiBTemplateElement ?
+What is SolidTemplateElement?
---------------------------
It is a class that can extend your component in order to purify your code of all useless complexity so that you can concentrate on the essential: your functionality.
.. warning::
- To start this tutorial, you should have followed `this first part <https://docs.startinblox.com/import_documentation/How-to-make-components.html>`__ .
+ To start this tutorial, you should have followed :ref:`this first part <create-components>`.
-What are we going to do ?
+What are we going to do?
-------------------------
For the example, we are gonna make a simple FAQ component.
It just displays questions and answers in an accordion and allows the user to submit a new question.
-Something like this :
+Something like this:
.. image:: ./../../_static/images/import_documentation/faq.gif
:alt: A FAQ component as example
Let's suppose we want to make the recipient's email customizable.
-To obtain this rendering, it would be enough to implement in our html page a component that looked like this :
+To obtain this rendering, it would be enough to implement in our html page a component that looked like this:
.. code:: html
@@ -30,8 +31,8 @@ To obtain this rendering, it would be enough to implement in our html page a com
></solid-faq>
.. note::
- **Remember the data-src attribute ?**
- This attribute that hosts the data source you want to interact with in this component.
+ **Remember the ``data-src`` attribute ?**
+ This attribute hosts the data source you want to interact with in this component.
.. note::
**Want to learn more about web components ?**
@@ -94,7 +95,7 @@ Here is the minimum code your component must contain that extends ``SolidTemplat
2. Pay attention to propsDefinition method
----------------------------------------------------
+------------------------------------------
You are going to set your attribute in this method. `recipientEmail` is the parameter where we are going to fill in the email of our recipient.
@@ -111,40 +112,47 @@ You are going to set your attribute in this method. `recipientEmail` is the para
Note the syntaxe convention => recipientEmail: 'recipient-email'
3. Let's focus on the template
+<<<<<<< HEAD
-----------------------
The template contains the HTML you want to render. You can pass to it parameter you want to use in.
To display the questions and answers, we are going to use `solid-display <https://docs.startinblox.com/import_documentation/Components/Solid-Display.html>`__.
The attributes `fields` is used to define which datas you want to display from your data source.
+=======
+-------------------------------
+The template contains the HTML you want to render. Pass your attributes to your template and write it.
+To display the questions and answers, we are going to use :ref:`solid-display <solid-display>`.
+The attributes fields is used to define which datas you want to display from your data source.
+>>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb
-We add a conditional rendering : if no email is filled in, the possibility to submit a question is not displayed.
+We add a conditional rendering: if no email is filled in, the possibility to submit a question is not displayed.
.. code:: js
// Pass your attributes to your template
- template({ dataSrc, recipientEmail }) {
- // If we have no data sources, we display nothing
- if (!dataSrc) return "";
- let tmpl = `
- <solid-display
- data-src="${dataSrc}"
- fields="question, answer"
- id="faq"
- ></solid-display>
- `;
- // Otherwise, set the possibility to submit a question
- if (recipientEmail) {
- tmpl += `
- <a href='mailto:${recipientEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
- Your question question not here ?
- </a>
+ template({ dataSrc, recipientEmail }) {
+ // If we have no data sources, we display nothing
+ if (!dataSrc) return "";
+ let tmpl = `
+ <solid-display
+ data-src="${dataSrc}"
+ fields="question, answer"
+ id="faq"
+ ></solid-display>
`;
- }
- return tmpl;
+ // Otherwise, set the possibility to submit a question
+ if (recipientEmail) {
+ tmpl += `
+ <a href='mailto:${recipientEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
+ Your question question not here ?
+ </a>
+ `;
}
+ return tmpl;
+ }
4. Set fake datas
----------------
-Creating data sources is quite another matter. For the example, we will use static data in `JsonLD <https://fr.wikipedia.org/wiki/JSON-LD>`__.
+-----------------
+Creating data sources is quite another matter. For the example, we will use static data in `JSON-LD <https://fr.wikipedia.org/wiki/JSON-LD>`__.
Create a file named ``data-faq.jsonld`` at the root of your project and put these datas:
@@ -172,7 +180,7 @@ Create a file named ``data-faq.jsonld`` at the root of your project and put thes
}
.. note::
- If you want to know more about how look our API, have a look to `our SOLID introduction <https://docs.startinblox.com/import_documentation/Solid-introduction.html>`__.
+ If you want to know more about how our API looks like, have a look to `our SOLID introduction <https://docs.startinblox.com/import_documentation/Solid-introduction.html>`__.
5. Implement your component
-----------------------------
@@ -195,21 +203,30 @@ Import the script of your component and set the component in your ``index.html``
</head>
<body>
<h1>Solid FAQ Demo</h1>
+<<<<<<< HEAD
<!--Implement your component-->
<solid-faq
data-src="data-faq.jsonld"
recipient-email="alice@startinblox.com">
</solid-faq>
+=======
+ <!--Import the component-->
+ <solid-faq
+ data-src="data-faq.jsonLD"
+ recipient-email="alice@startinblox.com"
+ ></solid-faq>
+>>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb
</body>
</html>
-6. Test your component:
+6. Test your component
-----------------------
.. code:: bash
npm run serve
+<<<<<<< HEAD
You should be able to display your datas but at the moment it's a bit ugly.
.. image:: ./../../_static/images/import_documentation/raw-faq.png
@@ -218,9 +235,12 @@ You should be able to display your datas but at the moment it's a bit ugly.
You've almost done !
Let's now add some style.
+=======
+You should be able to display your data but at the moment it's a bit ugly. Let's add some style.
+>>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb
4. Implement JS and CSS in your component
----------------------------------
+-----------------------------------------
Create a js file, like ``/js/main.js``.
Add the JS you need to make your accordion work, like this:
@@ -324,8 +344,12 @@ Here is the CSS used for the demo:
}
**Use Helper functions**
+<<<<<<< HEAD
SiB framework provide you `Helpers function <https://docs.startinblox.com/import_documentation/Helpers-functions.html>`__ to add JS and CSS in your component.
+=======
+SiB framework provides you `helpers functions <https://docs.startinblox.com/import_documentation/Helpers-functions.html>`__ to add JS and CSS in your component.
+>>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb
Add at the begin of your ``solid-faq.js``, import your JS and CSS with those functions:
diff --git a/source/import_documentation/Developping-without-SibTemplateElement.rst b/source/import_documentation/Developping-without-SibTemplateElement.rst
index 9065e6fcc3af92f30c37fcf7c7fcc5ce0dd09156..aa03edc39a2ec584bb58b8cb5488cb2d995c535d 100644
--- a/source/import_documentation/Developping-without-SibTemplateElement.rst
+++ b/source/import_documentation/Developping-without-SibTemplateElement.rst
@@ -1,4 +1,5 @@
-Developping component without SibTemplateElement
-=================================
+.. _without-solid-template-element:
+Developping component without SolidTemplateElement
+==================================================
-This section is comming soon :)
\ No newline at end of file
+This section is coming soon :)
\ No newline at end of file
diff --git a/source/import_documentation/Events.rst b/source/import_documentation/Events.rst
index 0f47672bec0d6661320c761a29d69bda25b95084..c94aa3ce14af0e3456ac1cc5b07d0bc01536060d 100644
--- a/source/import_documentation/Events.rst
+++ b/source/import_documentation/Events.rst
@@ -30,8 +30,8 @@ But for now, here are some events that will be useful to you.
Examples
~~~~~~~~
-Populate
-^^^^^^^^
+``populate``
+^^^^^^^^^^^^
Use to do something if and when the element is generated.
@@ -41,8 +41,8 @@ Use to do something if and when the element is generated.
// Do something when the element is generated.
})
-Save
-^^^^
+``save``
+^^^^^^^^
Use to do something when a form is successfully saved.
diff --git a/source/import_documentation/Helpers-functions.rst b/source/import_documentation/Helpers-functions.rst
index 83216cf3bfd15e987195327a405dec9ff3a3d31e..8208ec050f1daa1dad99dfb8ce6948cd14b54747 100644
--- a/source/import_documentation/Helpers-functions.rst
+++ b/source/import_documentation/Helpers-functions.rst
@@ -26,7 +26,7 @@ Creating a component, you should import those function like this :
.. code:: js
- import { Helpers } from "https://unpkg.com/@startinblox/core@0.10";
+ import { Helpers } from "https://unpkg.com/@startinblox/core@0.12/dist/libs/helpers.js";
You should always use ``importCSS`` and ``importJS`` to make your extra
importation. Otherwise, you’ll get this king of message :
diff --git a/source/import_documentation/How-to-make-components.rst b/source/import_documentation/How-to-make-components.rst
index 3ba072ffe6e1218dbd4291c66ba63a4d4d30c6b8..91312f536cf2806b8db268e56a45a5c9800f5228 100644
--- a/source/import_documentation/How-to-make-components.rst
+++ b/source/import_documentation/How-to-make-components.rst
@@ -1,3 +1,4 @@
+.. _create-components:
How to create components
######################
@@ -64,26 +65,30 @@ Let's set up a local development environment for a FAQ component as example.
.. note::
By convention, we prefix Startin'blox components with "solid". Example: solid-faq, solid-agenda, solid-map..
-**2**. Open a terminal, go to your folder and type those following commands:
+**2**. Open a terminal, go to your folder and type the following commands:
.. code:: bash
- #Init a npm management
+ # Init a npm management
npm init -y
- #Install a server in a developpement environement
+ # Install a server in a developpement environement
npm i -D http-server
+<<<<<<< HEAD
+=======
+Then, at the root of your project create an ``index.html`` file.
+>>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb
**3**. Make an npm command available to launch your server
-Go to your `package.json` and replace the 'test' script by the following :
+Go to your ``package.json`` and replace the 'test' script by the following :
.. code:: json
"serve": "http-server"
-Your `package.json` should look like this :
+Your ``package.json`` should look like this :
.. code:: json
@@ -106,24 +111,28 @@ Your `package.json` should look like this :
**4**. Start your component
+<<<<<<< HEAD
Let's create at the root of your folder the main JS file for your component named `solid-faq.js` and an index.html file to make the demo.
+=======
+Let's create the main JS file for your component named ``solid-faq.js``.
+>>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb
Now you are ready to start :)
Choose the best method for you
=============================
-Easy method with SiBTemplateElement
+Easy method with SolidTemplateElement
-----------------------------------
-"SiBTemplateElement" is a template we've created to make component development easier.
+"SolidTemplateElement" is a template we've created to make component development easier.
If you are new in SiB, we recommand you to start with it.
- **EASY Method** => `Developping component with SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-with-SibTemplateElement.html>`__
+ **EASY Method** => :ref:`Developing component with SolidTemplateElement <with-solid-template-element>`
Advanced method
-----------------
-This method wil lallow you to use mixins from the framework in your component.
+This method will allow you to use mixins from the framework in your component.
.. note::
If you want to learn more about mixins we recommend you `this introduction <https://javascript.info/mixins>`__.
@@ -131,7 +140,7 @@ This method wil lallow you to use mixins from the framework in your component.
.. warning::
The **MORE COMPLEX WAY** is not available yet. It's comming, stay tuned !
- **MORE COMPLEX WAY** => `Developping component without SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-without-SibTemplateElement.html>`__
+ **MORE COMPLEX WAY** => :ref:`Developing component without SolidTemplateElement <without-solid-template-element>`
diff --git a/source/import_documentation/Mixins/counter-mixin.rst b/source/import_documentation/Mixins/counter-mixin.rst
index 435090f934ca63d5708fa47eeb437600dc3e6ae2..0d6859307000f53250cfe690eac78aa37bde3f99 100644
--- a/source/import_documentation/Mixins/counter-mixin.rst
+++ b/source/import_documentation/Mixins/counter-mixin.rst
@@ -1,13 +1,14 @@
+.. _counter-mixin:
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>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-map <solid-map>`
Attributes
diff --git a/source/import_documentation/Mixins/federation-mixin.rst b/source/import_documentation/Mixins/federation-mixin.rst
index 1870a93c9b41cb64a1f16ea02be2e3625985dec1..070fb43030282d0c9b2fc6e4466825b2e2c8e5bc 100644
--- a/source/import_documentation/Mixins/federation-mixin.rst
+++ b/source/import_documentation/Mixins/federation-mixin.rst
@@ -1,3 +1,4 @@
+.. _federation-mixin:
federation-mixin
================
@@ -8,4 +9,4 @@ It provides the ability to fetch all the resources of multiple containers and sh
Used by:
--------
- * `solid-display <SiB-Display>`__
+ * :ref:`solid-display <solid-display>`
diff --git a/source/import_documentation/Mixins/filter-mixin.rst b/source/import_documentation/Mixins/filter-mixin.rst
index 1c2b984c59d48c6b9676080a3aa6297edc712d1f..35546ce080e884118991afe9d62df91e6a31e0ec 100644
--- a/source/import_documentation/Mixins/filter-mixin.rst
+++ b/source/import_documentation/Mixins/filter-mixin.rst
@@ -1,5 +1,6 @@
+.. _filter-mixin:
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.
@@ -7,8 +8,8 @@ It provides the ability for the user to dynamically filter a list of resources.
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-map <SiB-Map>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-map <solid-map>`
Attributes
@@ -17,12 +18,12 @@ Attributes
``filtered-by``
~~~~~~~~~~~~~~~
- Target a `<sib-form-search>` used to filter current list of resource.
+ Target a ``<solid-form-search>`` used to filter current list of resource.
example:
.. code:: html
-
+
<solid-form-search
id="my-filter"
fields="email"
@@ -30,7 +31,7 @@ Attributes
></solid-form-search>
<solid-display
- data-src="http://example.com/users"
+ data-src="http://server/users"
fields="username, last_name, email"
filtered-by="my-filter"
></solid-display>
diff --git a/source/import_documentation/Mixins/grouper-mixin.rst b/source/import_documentation/Mixins/grouper-mixin.rst
index 997471044bd435e52999468b724f3ace4ba4140b..1cc4c0ddbe9323b0a1e956f4b937b83c49aed758 100644
--- a/source/import_documentation/Mixins/grouper-mixin.rst
+++ b/source/import_documentation/Mixins/grouper-mixin.rst
@@ -1,3 +1,4 @@
+.. _grouper-mixin:
grouper-mixin
============
@@ -7,8 +8,8 @@ It provides the ability to group resources, depending of the values of one of th
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-map <SiB-Map>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-map <solid-map>`
Attributes
@@ -16,6 +17,7 @@ Attributes
``group-by``
~~~~~~~~~~~~
+
The resources will be grouped by the field you give as a parameter.
In this example, the mixin will render one
@@ -32,11 +34,27 @@ Attributes
When used with the pagination, each group is paginated.
-``group-by-widget``
+ You can also use the dot syntax to group by a nested resource. For example,
+ set the ``group-by`` attribute to ``nested_resource.name``.
+
+``group-widget``
~~~~~~~~~~~~~~~~~~~
- default: ``solid-group-div``
+ *Available from version 0.13*
+ default: ``solid-group-default``
The name of the widget to use as a group widget.
+ It takes the name of the group as a ``value`` and put content in a ``div[data-content]``.
+ Here is an example of a custom group widget:
+
+ .. code:: html
+
+ <solid-widget name="custom-group">
+ <template>
+ <h2>${value}</h2>
+ <section data-content></section>
+ </template>
+ </solid-widget>
+
``group-class``
diff --git a/source/import_documentation/Mixins/highlighter-mixin.rst b/source/import_documentation/Mixins/highlighter-mixin.rst
index b0d0735c971ba7ef7691385569059c9c2fa6f25f..1362038f7d1c014ee9af28ed74a5798499927ac4 100644
--- a/source/import_documentation/Mixins/highlighter-mixin.rst
+++ b/source/import_documentation/Mixins/highlighter-mixin.rst
@@ -1,3 +1,4 @@
+.. _highlighter-mixin:
highlighter-mixin
=================
@@ -7,7 +8,7 @@ It provides the ability to put some resources at the top of the list, depending
Used by:
--------
- * `solid-display <SiB-Display>`__
+ * :ref:`solid-display <solid-display>`
Attributes
diff --git a/source/import_documentation/Mixins/list-mixin.rst b/source/import_documentation/Mixins/list-mixin.rst
index f9a77708ea75372d322094b53a049f74ef01be94..04d6e3b3daee191d5a7a11cac28d3755ff657f08 100644
--- a/source/import_documentation/Mixins/list-mixin.rst
+++ b/source/import_documentation/Mixins/list-mixin.rst
@@ -1,3 +1,4 @@
+.. _list-mixin:
list-mixin
==========
@@ -7,14 +8,14 @@ It can make transformations on the list by being combined with some post-process
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-calendar <SiB-Calendar>`__
- * `solid-map <SiB-Map>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-calendar <solid-calendar>`
+ * :ref:`solid-map <solid-map>`
Post-processors:
---------
+----------------
- * `counter-mixin <counter-mixin>`__
+ * :ref:`counter-mixin <counter-mixin>`
diff --git a/source/import_documentation/Mixins/next-mixin.rst b/source/import_documentation/Mixins/next-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..539b849fbff7fc8263497e6713a132d8c3bdfe30
--- /dev/null
+++ b/source/import_documentation/Mixins/next-mixin.rst
@@ -0,0 +1,30 @@
+.. _next-mixin:
+next-mixin
+==========
+
+The next-mixin provides the ability to precise the componant or the page to display after an action.
+
+Used by:
+--------
+
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-map <solid-map>`
+ * :ref:`solid-calendar <solid-calendar>`
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-delete <solid-delete>`
+
+
+
+Attributes
+----------
+
+``next``
+~~~~~~~~
+ `name` attribute of the ``<solid-route>`` that should be accessed when a ``<solid-display>``, ``<solid-map>`` or ``<solid-calendar>`` element is clicked.
+
+ It can also be used to indicate the ``name`` attribute of the ``<solid-route>`` to reach after :
+
+ * a click on a ``<solid-delete>`` button (only after the resource is correctly deleted);
+ * a click on the submit button in a ``<solid-form>`` (only after the resource is correctly saved).
+
+ See the documentation of ``<solid-router>`` for more details.
diff --git a/source/import_documentation/Mixins/paginate-mixin.rst b/source/import_documentation/Mixins/paginate-mixin.rst
index 5a25ab1a8d04a5fe959bc144e28c893b9be4c38a..e55cf39010e2df1162497bc091e9c42394d94fc6 100644
--- a/source/import_documentation/Mixins/paginate-mixin.rst
+++ b/source/import_documentation/Mixins/paginate-mixin.rst
@@ -1,3 +1,4 @@
+.. _paginate-mixin:
paginate-mixin
===============
@@ -7,7 +8,7 @@ It provides the ability to paginate a list of resources.
Used by:
--------
- * `solid-display <SiB-Display>`__
+ * :ref:`solid-display <solid-display>`
Attributes
diff --git a/source/import_documentation/Mixins/required-mixin.rst b/source/import_documentation/Mixins/required-mixin.rst
new file mode 100644
index 0000000000000000000000000000000000000000..5c1aa71097f475828cddefe917b8aaec6ffef444
--- /dev/null
+++ b/source/import_documentation/Mixins/required-mixin.rst
@@ -0,0 +1,33 @@
+.. _required-mixin:
+required-mixin
+===============
+
+The required mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to display a list of resources according to the property/-ies its possess.
+
+Used by:
+--------
+
+ * :ref:`solid-display <solid-display>`
+
+
+Attributes
+----------
+
+``required-[field]``
+~~~~~~~~~~~~~~~~
+ *Available from version 0.13*
+
+ The attribute takes no value. ``[field]`` represents the mandatory property of resources to be displayed.
+
+ In this example, users must have email to be dislayed.
+
+ .. code:: html
+
+ <solid-display
+ data-src=http://server/users/"
+ fields="username"
+ required-email
+ ></solid-display>
+
+ It is possible to combine this mixin twice, ``required-uvw`` and ``required-[field]``.
\ No newline at end of file
diff --git a/source/import_documentation/Mixins/sorter-mixin.rst b/source/import_documentation/Mixins/sorter-mixin.rst
index 0fd171e6787ee3391b87344e1ed8b13206b23295..c6a4206698b95f6cf5830c26d0fc176dade45523 100644
--- a/source/import_documentation/Mixins/sorter-mixin.rst
+++ b/source/import_documentation/Mixins/sorter-mixin.rst
@@ -1,3 +1,4 @@
+.. _sorter-mixin:
sorter-mixin
============
@@ -7,16 +8,18 @@ It provides the ability to sort some resources, depending of the values of one o
Used by:
--------
- * `solid-display <SiB-Display>`__
+ * :ref:`solid-display <solid-display>`
Attributes
----------
-``order-by``
-~~~~~~~~~~~~
+``order-asc`` or ``order-desc``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The name of the field you want to use to order the list.
+ To sort in ascending, use ``order-asc``. To sort descending, use ``order-desc``.
+
In this example, the users list will be ordered
alphabetically based on the username.
@@ -25,7 +28,7 @@ Attributes
<solid-display
data-src="http://server/users/"
fields="username"
- order-by="username"
+ order-asc="username"
></solid-display>
``order-by-random``
diff --git a/source/import_documentation/Mixins/store-mixin.rst b/source/import_documentation/Mixins/store-mixin.rst
index 0e50591ac1db6e1123595f4494f2b4264a7b4528..e3c495634a163608ec3c6b2cd95c4eaf27ca4f4f 100644
--- a/source/import_documentation/Mixins/store-mixin.rst
+++ b/source/import_documentation/Mixins/store-mixin.rst
@@ -1,5 +1,6 @@
+.. _store-mixin:
store-mixin
-==========
+===========
The store mixin allows to fetch a resource or a container from an URI, and
provides the data to the component.
@@ -7,11 +8,11 @@ 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>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-map <solid-map>`
+ * :ref:`solid-calendar <solid-calendar>`
+ * :ref:`solid-ac-checker <solid-ac-checker>`
Attributes
@@ -48,13 +49,6 @@ Attributes
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.
@@ -80,6 +74,47 @@ Attributes
.. image:: ./../../_static/images/import_documentation/loader.gif
:alt: Exemple of loader
+
+``no-render``
+~~~~~~~~~~~~~
+ *Available from version 0.13*
+
+ While this attribute is present on a component, no data will be fetched.
+ This attribute is automatically removed by the router when the component
+ is in a view which has been activated.
+ This allow to lazy-load components.
+
+
+``store://`` attribute values
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ *Available from version 0.13*
+
+ This mixin decode all attribute values starting by ``store://resource`` or
+ ``store://user`` and replace them by the values fetched from the store.
+
+ It can be a value fetched from the current resource or the current logged in user (works with ``sib-auth``).
+
+ This example will create a text input filled with the username of the current user:
+
+ .. code:: html
+
+ <solid-form
+ data-src="https://api.startinblox.com/circles/"
+ fields="user"
+ value-user="store://user.username"
+ ></solid-form>
+
+
+ This example will write the name of the circle in the custom field:
+
+ .. code:: html
+
+ <solid-display
+ data-src="https://api.startinblox.com/circles/1/"
+ fields="custom-field"
+ value-custom-field="store://resource.name"
+ ></solid-display>
+
Events
------
diff --git a/source/import_documentation/Mixins/widget-mixin.rst b/source/import_documentation/Mixins/widget-mixin.rst
index 545039b2008ebdc962897d3752eb5a23cd4ae8e1..bad67b609b2a6c9fcd621b6a730247e732a363f1 100644
--- a/source/import_documentation/Mixins/widget-mixin.rst
+++ b/source/import_documentation/Mixins/widget-mixin.rst
@@ -1,3 +1,4 @@
+.. _widget-mixin:
widget-mixin
============
@@ -6,9 +7,9 @@ The widget mixin allows to create a widget in the DOM for each properties of a r
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-form <SiB-Form>`__
- * `solid-map <SiB-Map>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-map <solid-map>`
Attributes
@@ -42,6 +43,19 @@ Attributes
You can customize the group widget, see the `Sets widgets <https://docs.startinblox.com/import_documentation/Widgets/Reference.html>`__
page for more info.
+ **Strings**
+
+ To display static strings in the fields list, put it inside quotes.
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/users/1/"
+ fields=" 'Email: ', email "
+ ></solid-display>
+
+ It will create a ``<span>`` element filled with the text ``Email: ``.
+
``value-[field]``
~~~~~~~~~~~~~~~~~
@@ -73,7 +87,11 @@ Attributes
``action-[field]``
~~~~~~~~~~~~~~~~~~
+ Displays a link with a ``<solid-link>`` tag with the current resource as ``data-src`` and the value of the attribute as ``next``.
+``src-[field]``
+~~~~~~~~~~~~~~~
+ Defines the ``data-src`` in the solid-link created by the ``action-[field]`` attribute.
``label-[field]``
~~~~~~~~~~~~~~~~~
@@ -85,7 +103,7 @@ Attributes
``class-[field]``
~~~~~~~~~~~~~~~~~
- Set the class applied to the widget of the ``[field]``
+ Set the class applied to the widget of the ``[field]`` or the set.
``editable-[field]``
~~~~~~~~~~~~~~~~~~~~
@@ -111,20 +129,36 @@ Attributes
``multiple-[field]``
~~~~~~~~~~~~~~~~~~~~
- Show ``[field]`` as multiple field containing
- one widget for each child.
+ Allows to display the container ``[field]`` nested in the current resource.
+
+ It takes a container URI as a value, fetch all the resources
+ of this container and display them.
Multiple widget can be specified, example:
``multiple-skills="my-custom-multiple-widget"``. If argument is used
without value, default multiple widget is used.
- 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
+ It can be used in :
+
+ - ``solid-display``: a nested ``solid-display`` will be created with the container URI as
+ data-src.
+ All attributes of the form ``multiple-[field]-[attribute]`` are transfered
+ on the nested ``solid-display`` as ``[attribute]``.
+ For example, to choose the fields you want to display, you can set:
+ ``multiple-[field]-fields="name, @id"``
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/users/1/"
+ fields="skills"
+ multiple-skills
+ multiple-skills-fields="name"
+ ></solid-display>
+
+ - ``solid-form`` : all the resources of the container are displayed in a text widget.
+ Buttons are automatically created to add and remove elements.
For ``solid-form`` only:
diff --git a/source/import_documentation/Solid-introduction.rst b/source/import_documentation/Solid-introduction.rst
index c6ea95441d71be72b65eed59a9615ba26baa33e3..b9f223ae5904c166489ddd05864deb9c43ab2930 100644
--- a/source/import_documentation/Solid-introduction.rst
+++ b/source/import_documentation/Solid-introduction.rst
@@ -1,8 +1,8 @@
Our SOLID introduction
======================
-`SOLID <https://solid.mit.edu/>`__, for SOcial LInked Data, is a project start in 2015 and lead
+`SOLID <https://solid.mit.edu/>`__, for SOcial LInked Data, is a project started in 2015 and led
in the 3WC by `Tim Berners Lee <https://fr.wikipedia.org/wiki/Tim_Berners-Lee>`__, the inventor of
-the web that aims to rethink the way we build application in order to give back the power back to the final user.
+the web who aims to rethink the way we build application in order to give back the power back to the final user.
For us SOLID project is above all a philosophy, a goal to reach and which inspires us.
@@ -18,7 +18,7 @@ It is a set of standards on which we agree internationally to communicate our ap
.. warning::
- This page should be improve. `Any feedbacks is welcome <https://mailto:alice@startinblox.com>`__
+ This page should be improved. `Any feedbacks is welcome <https://mailto:alice@startinblox.com>`__
Our API
-------
diff --git a/source/import_documentation/Store-doc.rst b/source/import_documentation/Store-doc.rst
index de75371b3166126bb3215ae2f7936ea82e24e346..3f575666f4213a1f64f2beddd65448464958dcbd 100644
--- a/source/import_documentation/Store-doc.rst
+++ b/source/import_documentation/Store-doc.rst
@@ -14,7 +14,7 @@ API Reference
``getData`` (``async``)
-^^^^^^^^^^^^^^^^^^^
+^^^^^^^^^^^^^^^^^^^^^^^
Fetch and cache the data for a resource
@@ -29,7 +29,7 @@ Fetch and cache the data for a resource
``get``
-^^^^^
+^^^^^^^
Synchronously returns a resource from the cache.
@@ -43,7 +43,7 @@ Synchronously returns a resource from the 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.
@@ -58,7 +58,7 @@ Send a POST request to create a resource in a container. When the request succee
``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.
@@ -73,7 +73,7 @@ Send a PUT request to edit a resource. When the request succeed, the resource is
``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.
@@ -88,7 +88,7 @@ Send a PATCH request to edit a resource. When the request succeed, the 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.
@@ -103,7 +103,7 @@ Send a DELETE request to delete a resource. When the request succeed, the resour
``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.
@@ -114,7 +114,7 @@ Make a resource listen another one. When a change is detected on a resource, all
``clearCache``
-^^^^^^^^^^^^
+^^^^^^^^^^^^^^^
Manually remove a resource from the cache
@@ -122,6 +122,7 @@ Manually remove a resource from the cache
* ``id``: uri of the resource to remove from the cache
+.. _selectLanguage:
``selectLanguage``
^^^^^^^^^^^^^^^^^^
diff --git a/source/import_documentation/Widgets/Reference.rst b/source/import_documentation/Widgets/Reference.rst
index a402e39f3bba8e103494cf17536eeef7454010e0..b617f45867aa6f91e4818ad485f91b546c3cb13f 100644
--- a/source/import_documentation/Widgets/Reference.rst
+++ b/source/import_documentation/Widgets/Reference.rst
@@ -1,5 +1,5 @@
Widgets API Reference
-==================
+======================
Widgets are created at the moment you ask for it for the first time.
The name of the widget is analyzed to build a widget which uses the features and template you want.
@@ -35,22 +35,24 @@ A widget is built like this.
- ``form`` directory
- - ``text``: set ``value`` in an ``<input>`` of type ``text``
- - ``textarea``: set ``value`` in a ``<textarea>``
- - ``checkbox``: create a checkbox, which is checked if ``value == true``
- - ``date``: set ``value`` in an ``<input>`` of type ``date``
+ - ``text``: set ``value`` in an ``<input>`` of type ``text``.
+ - ``textarea``: set ``value`` in a ``<textarea>``.
+ - ``richtext``: set ``value`` in an ``<div>`` and initialize a light rich text editor by using ``Quill``.
+ - ``checkbox``: create a checkbox, which is checked if ``value == true``.
+ - ``date``: set ``value`` in an ``<input>`` of type ``date``.
- ``rangedate``: set 2 values in 2 ``<input>`` of type ``date``. Used for filtering with min and max.
- - ``number``: set ``value`` in an ``<input>`` of type ``number``
+ - ``number``: set ``value`` in an ``<input>`` of type ``number``.
- ``rangenumber``: set 2 values in 2 ``<input>`` of type ``number``. Used for filtering with min and max.
- - ``hidden``: set ``value`` in an ``<input>`` of type ``hidden``
- - ``dropdown``: set ``value`` in a ``<select>``. The list is provided via the ``range`` attribute, which expects a container’s URL.
- - ``radio``: set ``value`` in a list of radio buttons. The list is provided via the ``range`` attribute, which expects a container’s URL.
+ - ``hidden``: set ``value`` in an ``<input>`` of type ``hidden``.
+ - ``dropdown``: set ``value`` in a ``<select>``. The list is provided via the ``range`` attribute, which expects a container’s URL, or via the ``enum`` attribute, which takes a list of the values separated by commas.
+ - ``radio``: set ``value`` in a list of radio buttons. The list is provided via the ``range`` attribute, which expects a container’s URL, or via the ``enum`` attribute, which takes a list of the values separated by commas.
- ``multiple``: Accept a container URI as a ``value``, and inserts one widget per resource with a “remove†button for each widget, and an “add†button.
- ``multipleselect``: Accept a container URI as a ``value``, and inserts a dropdown widget with the ``multiple`` attribute.
- ``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.
- ``image``: Works like ``file`` but allow only images in the input, and create a preview of the image when selected by the user.
+ - ``color``: set ``value`` in a ``<input>`` of type ``color``.
- ``set``
@@ -58,12 +60,12 @@ A widget is built like this.
- ``div``: inserts widgets in a ``<div>`` tag
- ``ul``: inserts widgets in a ``<ul>`` tag
- - default (no template keyword defined)
+ - **default** (no template keyword defined)
- ``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.
- ``multiple``: insert a ``solid-display`` with the ``@id`` of a container as ``data-src``.
- The fields to display are chosen with the ``fields`` attribute.
+ The fields to display are chosen with the ``multiple-[field name]-fields`` attribute.
``features``
@@ -81,4 +83,4 @@ A widget is built like this.
- ``date``: transforms the value in a date, in the browser’s default locale format.
- ``datetime``: transforms the value in a date and time, in the browser’s default locale format.
- ``multiline``: Shows a value on multiple lines (replace ``\n`` by ``<br>``)
-
+ - ``markdown``: Takes markdown code and displays formatted text. Works only with a display template (value, div, link).
diff --git a/source/import_documentation/attributes-list.rst b/source/import_documentation/attributes-list.rst
new file mode 100644
index 0000000000000000000000000000000000000000..9cc0c99347558cf67beaf1abb5fc813117723a95
--- /dev/null
+++ b/source/import_documentation/attributes-list.rst
@@ -0,0 +1,213 @@
+List of attributes (core framework)
+===================================
+
+``action-[field]``
+~~~~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``child-[field]``
+~~~~~~~~~~~~~~~~~
+ * :ref:`solid-display <solid-display>`
+
+``class-[field]``
+~~~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``confirmation-message``
+~~~~~~~~~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-delete <solid-delete>`
+
+``counter-template``
+~~~~~~~~~~~~~~~~~~~~
+ * :ref:`counter-mixin <counter-mixin>`
+
+``data-src``
+~~~~~~~~~~~~
+ * :ref:`store-mixin <store-mixin>`
+
+``data-label``
+~~~~~~~~~~~~~~
+ * :ref:`solid-delete <solid-delete>`
+ * :ref:`solid-lang <solid-lang>`
+
+``default-[field]``
+~~~~~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``default-widget``
+~~~~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``editable-[field]``
+~~~~~~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``empty-value``
+~~~~~~~~~~~~~~~
+ * :ref:`list-mixin <list-mixin>`
+
+``empty-widget``
+~~~~~~~~~~~~~~~~
+ * :ref:`list-mixin <list-mixin>`
+
+``enum-[field]``
+~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-form-search <solid-form-search>`
+
+``extra-context``
+~~~~~~~~~~~~~~~~~
+ * :ref:`store-mixin <store-mixin>`
+
+``fields``
+~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``filtered-by``
+~~~~~~~~~~~~~~~
+ * :ref:`filter-mixin <filter-mixin>`
+
+``group-by``
+~~~~~~~~~~~~
+ * :ref:`grouper-mixin <grouper-mixin>`
+
+``group-widget``
+~~~~~~~~~~~~~~~~
+ * :ref:`grouper-mixin <grouper-mixin>`
+
+``group-class``
+~~~~~~~~~~~~~~~
+ * :ref:`grouper-mixin <grouper-mixin>`
+
+``hightlight-[field]``
+~~~~~~~~~~~~~~~~~~~~~~
+ * :ref:`highlighter-mixin <highlighter-mixin>`
+
+``label-[field]``
+~~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-form-search <solid-form-search>`
+ * :ref:`widget-mixin <widget-mixin>`
+
+``lang``
+~~~~~~~~
+ * :ref:`solid-lang <solid-lang>`
+
+``loader-id``
+~~~~~~~~~~~~~
+ * :ref:`store-mixin <store-mixin>`
+
+``max-[field]``
+~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+
+``min-[field]``
+~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+
+``multiple-[field]``
+~~~~~~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``naked``
+~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+
+``name``
+~~~~~~~~~
+ * :ref:`solid-widget <solid-widget>`
+
+``nested-field``
+~~~~~~~~~~~~~~~~
+ * :ref:`store-mixin <store-mixin>`
+
+``next``
+~~~~~~~~
+ * :ref:`next-mixin <next-mixin>`
+
+``no-permission``
+~~~~~~~~~~~~~~~~~
+ * :ref:`solid-ac-checker <solid-ac-checker>`
+
+``order-asc``
+~~~~~~~~~~~~~
+ * :ref:`sorter-mixin <sorter-mixin>`
+
+``order-asc-[field]``
+~~~~~~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+
+``order-by-random``
+~~~~~~~~~~~~~~~~~~~
+ * :ref:`sorter-mixin <sorter-mixin>`
+
+``order-desc``
+~~~~~~~~~~~~~~
+ * :ref:`sorter-mixin <sorter-mixin>`
+
+``order-desc-[field]``
+~~~~~~~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+
+``paginate-by``
+~~~~~~~~~~~~~~~
+ * :ref:`paginate-mixin <paginate-mixin>`
+
+``paginate-loop``
+~~~~~~~~~~~~~~~~~
+ * :ref:`paginate-mixin <paginate-mixin>`
+
+``partial``
+~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+
+``pattern-[field]``
+~~~~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+
+``permission``
+~~~~~~~~~~~~~~
+ * :ref:`solid-ac-checker <solid-ac-checker>`
+
+``placeholder-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``range-[field]``
+~~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-form-search <solid-form-search>`
+
+``required-[field]``
+~~~~~~~~~~~~~~~~~~~~
+ * :ref:`required-mixin <required-mixin>`
+
+``(search-fields)`` deprecated
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * :ref:`filter-mixin <filter-mixin>`
+
+``src-[field]``
+~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``submit-button``
+~~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-form-search <solid-form-search>`
+
+``title-[field]``
+~~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+
+``upload-url-[field]``
+~~~~~~~~~~~~~~~~~~~~~~
+ * :ref:`solid-form <solid-form>`
+
+``value-[field]``
+~~~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
+
+``widget-[field]``
+~~~~~~~~~~~~~~~~~~
+ * :ref:`widget-mixin <widget-mixin>`
diff --git a/source/import_documentation/faq.rst b/source/import_documentation/faq.rst
index f67822014c095eed33c678e1028bd8239f00c505..b4adbc4f51c8b68cb4613d6ec8163d053917340c 100644
--- a/source/import_documentation/faq.rst
+++ b/source/import_documentation/faq.rst
@@ -1,34 +1,33 @@
FAQ
****
-* **How to contribute ?**
+* **How to contribute?**
Have a look on our `contribution guidelines <https://git.startinblox.com/framework/sib-core/blob/master/CONTRIBUTING.md>`__.
If you want to add/change something on this documentation, `here are the instructions <https://git.startinblox.com/documentation/doc>`__.
-* **Where I can ask for help ?**
+* **Where I can ask for help?**
-`Come on our chat <https://community.startinblox.com/>`__ , we'll do our best to help you!
+`Come on our chat <https://community.startinblox.com/>`__, we'll do our best to help you!
-* **What is Solid ?**
+* **What is Solid?**
-We're working to make some popularizations for differents audiences. In the meanwhile, `have a look on the official presentation <solid.mit.edu//>`__ .
+We're working to make some popularizations for differents audiences. In the meanwhile, `have a look on the official presentation <solid.mit.edu//>`__.
-* **This is open source ?**
+* **This is open source?**
-The whole project is under `MIT licence <https://git.startinblox.com/framework/sib-core/blob/master/LICENSE/>`__ .
+The whole project is under `MIT licence <https://git.startinblox.com/framework/sib-core/blob/master/LICENSE/>`__.
-* **Why the documentation is not in makdown ?**
+* **Why the documentation is not in makdown?**
This documentation in is `Restructured Text <https://docutils.sourceforge.io/rst.html>`__. `Have a look to this article <https://www.ericholscher.com/blog/2016/mar/15/dont-use-markdown-for-technical-docs/>`__ if you want to understand our choice.
-* **You cannot find the question you have ?**
-`Send your question <https://mailto:alice@startinblox.com>`__ to the the maintainer of the doc.
-
-Or `open an issues on the doc <https://git.startinblox.com/documentation/doc/-/boards/>`__ .
+* **You cannot find the question you have?**
+`Send your question <https://mailto:alice@startinblox.com>`__ to the the maintainer of the doc or
+`open an issue on the doc <https://git.startinblox.com/documentation/doc/-/boards/>`__.
diff --git a/source/import_documentation/get-started.rst b/source/import_documentation/get-started.rst
index c5a2e4abc93e448abd8db3ad1b35a0dac7e4074e..cbb2219ee7a2ad120797489d1055c24664ce971e 100644
--- a/source/import_documentation/get-started.rst
+++ b/source/import_documentation/get-started.rst
@@ -3,7 +3,7 @@ Getting Started
Creating your front App
======================
-If you are familiar with React or VusJS, learning how to use Startin'blox is going to be so easy for you. It's even easier.
+If you are familiar with React or VusJS, learning how to use Startin'blox is going to be easy for you. It's even easier.
So why using Startin'blox instead of React or VueJS?
-------------------------------------------
@@ -12,7 +12,7 @@ Because it allows you to easily grasp the SOLID standards and web components las
How to set up the technology ?
----------------------------
-To start, simply import the core in your head tag of a simple html file :
+To start, simply import the core in the head tag of a simple html file:
.. code-block:: html
@@ -31,14 +31,14 @@ It enables you to use Startin’blox technology and all the base components from
></solid-display>
.. note::
- **Notes the data-src attribute**
+ **The ``data-src`` attribute**
- You will find it in almost all Startin'blox components. It is this attribute that hosts the data source you want to interact with in this component. You can go to the url (`https://apiprod.happy-dev.fr/collectives/ <https://apiprod.happy-dev.fr/collectives/>`__ ) to see what the API looks like.
+ You will find it in almost all Startin'blox components. It is the attribute that defines the data source you want to interact with in the component. You can see what the API looks like at (`https://apiprod.happy-dev.fr/collectives/ <https://apiprod.happy-dev.fr/collectives/>`__ ).
-Extend Components
-~~~~~~~~~~~~~~~~~
-Some usefull components aren't in the core because in order not to make it too heavy and to keep its modularity. It's the case for `Solid-Router <https://docs.startinblox.com/import_documentation/Components/SiB-Router.html>`__ or `Solid Auth <https://docs.startinblox.com/import_documentation/Components/Solid-Auth.html>`__ for example.
+External Components
+~~~~~~~~~~~~~~~~~~~
+Some useful components aren't in the core to keep it light and modular. It's the case for `Solid-Router <https://docs.startinblox.com/import_documentation/Components/SiB-Router.html>`__ or `Solid Auth <https://docs.startinblox.com/import_documentation/Components/Solid-Auth.html>`__ for example.
To use them, you have to import them independently.
.. code-block:: html
@@ -47,9 +47,9 @@ To use them, you have to import them independently.
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
<script type="module" src="https://unpkg.com/@startinblox/router@latest"></script>
-Create a components
+Create a component
~~~~~~~~~~~~~~~~~~
-`Try the tutorial <https://docs.startinblox.com/import_documentation/How-to-make-components.html>`__, to get in to it!
+:ref:`Try the tutorial <create-components>`, to get into it!
Play with the technology
-------------------------
@@ -60,10 +60,10 @@ You can play with `the demo <https://startinblox.com/fr/technology#demo/>`__ on
Some public sources
~~~~~~~~~~~~~~~~~~~~~~~
-To make your tests with Startin'blox, here is some publics read only data sources :
+To make your tests with Startin'blox, here are some public readonly data sources:
-* `The Happy Dev event <https://apiprod.happy-dev.fr/futureevents/>`__.
-* `The Happy Dev collectifs <https://apiprod.happy-dev.fr/collectives/>`__.
+* `The Happy Dev events <https://apiprod.happy-dev.fr/futureevents/>`__.
+* `The Happy Dev collectives <https://apiprod.happy-dev.fr/collectives/>`__.
* `The Startin'blox features <https://api.startinblox.com/features/>`__.
.. note::
@@ -115,7 +115,7 @@ DjangoLDP come with packages developed and maintained by the Startin'Blox team.
That's it. You're almost ready to start :)
-Jump to the `How to install a SiB server <https://docs.startinblox.com/import_documentation/install-sib-server.html#configure-your-ldp-packages>`__ section to follow the configuration.
+Jump to the `How to install a SiB server <https://docs.startinblox.com/import_documentation/install-sib-server.html#configure-your-ldp-packages>`__ section to finish the configuration.
diff --git a/source/import_documentation/introduction-framework-documentation.rst b/source/import_documentation/introduction-framework-documentation.rst
new file mode 100644
index 0000000000000000000000000000000000000000..66cc1d70ae7611764983d3ecf265491165bc4821
--- /dev/null
+++ b/source/import_documentation/introduction-framework-documentation.rst
@@ -0,0 +1,32 @@
+Introduction of the framework documentation
+============================================
+
+In the following sections, the framework's components are detailed.
+
+**Base components** belong to the core of the framework.
+For each component, you will find:
+ * a minimal example of usage (and related examples),
+ * a list of mixins used by the component,
+ * a list of attributes,
+ * a list of events.
+
+**External components** don’t belong to the core of the framework but are often used in applications.
+
+
+.. note::
+
+ Each component have its own features, and is composed of mixins which provides new ones.
+ Therefore, attributes and events of a component are the combination of attributes and events of
+ all its mixins.
+
+
+In the **mixin** section, each one has:
+ * a description of its function,
+ * a list of components using it,
+ * a list of attributes,
+ * a list of events.
+
+The **widget** section presents the API to create widgets and gives examples about how to create and use them.
+
+The last section concerns **Javascript API** you can use with sib-core.
+
diff --git a/source/import_documentation/what-is-sib.rst b/source/import_documentation/what-is-sib.rst
index 49ca80a724efab8ef5a959633432999dd2ec283a..9b36b0a0a497902afca9fd1215ac1111bb442c7b 100644
--- a/source/import_documentation/what-is-sib.rst
+++ b/source/import_documentation/what-is-sib.rst
@@ -1,4 +1,4 @@
-What is Startin'blox ?
+What is Startin'blox?
***********************
Synopsis
@@ -26,7 +26,7 @@ Explanation
Global overview
---------------
-Startin'blox is composed of :
+Startin'blox is composed of:
A front framework
..................
@@ -70,7 +70,7 @@ Overview of the Framework
The section should be improve
-Here is a brief presentation :
+Here is a brief presentation:
.. figure:: ../_static/images/import_documentation/Framework-Overview.png
:alt: Framework Overview
diff --git a/source/import_documentation/why-use-sib.rst b/source/import_documentation/why-use-sib.rst
index 45a3a058b9d126553893b80cb26e792026cb1b70..8f54e98e33be904bd5753f93177ea1264b81829a 100644
--- a/source/import_documentation/why-use-sib.rst
+++ b/source/import_documentation/why-use-sib.rst
@@ -41,7 +41,7 @@ a component using data sources already available on the web.
Startin’Blox is designed to interconnect applications and their users. Our components can plug into an unlimited number of data sources, so your application connects you to the ecosystem of your choice.
-Our work is based on an international project : `The Solid
+Our work is based on an international project: `The Solid
Project <https://solid.mit.edu/>`__.
Natively modular
diff --git a/source/index.rst b/source/index.rst
index 8359cd895deaf94a4b6f23fbf9a2bf167d31d0df..2ec667222d69d7298d27beac43743daaaeb2c55c 100644
--- a/source/index.rst
+++ b/source/index.rst
@@ -3,7 +3,7 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
- :caption: First Step:
+ :caption: First Step
import_documentation/what-is-sib
import_documentation/why-use-sib
@@ -13,7 +13,7 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
- :caption: How it work:
+ :caption: How it works
import_documentation/How-to-make-components
import_documentation/install-sib-server
@@ -23,19 +23,28 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
- :caption: Base components:
+ :caption: Get started with sib-core
+
+ import_documentation/introduction-framework-documentation
+ import_documentation/attributes-list
+
+.. toctree::
+ :maxdepth: 2
+ :caption: Base components
import_documentation/Components/Solid-Display
import_documentation/Components/Solid-Form
+ import_documentation/Components/Solid-Form-Search
import_documentation/Components/Solid-Delete
import_documentation/Components/Solid-Calendar
import_documentation/Components/Solid-Map
import_documentation/Components/Solid-Ac-Checker
import_documentation/Components/Solid-Widget
+ import_documentation/Components/Solid-Lang
.. toctree::
:maxdepth: 2
- :caption: Extend components:
+ :caption: External components
import_documentation/Components/Solid-Auth
import_documentation/Components/Solid-Router
@@ -43,7 +52,7 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
- :caption: Mixins:
+ :caption: Mixins
import_documentation/Mixins/store-mixin
import_documentation/Mixins/widget-mixin
@@ -55,17 +64,19 @@ Welcome to Startinblox's documentation
import_documentation/Mixins/paginate-mixin
import_documentation/Mixins/sorter-mixin
import_documentation/Mixins/highlighter-mixin
+ import_documentation/Mixins/required-mixin
+ import_documentation/Mixins/next-mixin
.. toctree::
:maxdepth: 2
- :caption: Widget:
+ :caption: Widgets
import_documentation/Widgets/Reference
import_documentation/Widgets/Examples
.. toctree::
- :maxdepth: 2
- :caption: Javascript Api:
+ :maxdepth: 2
+ :caption: Javascript API
import_documentation/Events
import_documentation/Helpers-functions