Merge branch 'dev' into 'master'

Dev to Master

See merge request !70

source/import_documentation/Components/Solid-Delete.rst

@@ -34,12 +34,7 @@ Attributes
 
 ``confirmation-message``
 ~~~~~~~~~~~~~~~~~~~~~~~~~
-   *Available from version 0.13*
-   **Migrated to the validation mixin page in version 0.16**
-
-   Add this attribute to create a dialog box linked with the button of the solid-delete.
-   Its value matches the message displayed in the dialog box.
-
+   **Migrated to the :ref:`validation-mixin <validation-mixin>` page in version 0.16**
 
 Events
 -------

source/import_documentation/Components/Solid-Form-Search.rst

@@ -51,11 +51,16 @@ Attributes
    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.
 
+.. _class-submit-button-sfs:
+``class-submit-button``
+~~~~~~~~~~~~~~~~~~~~~~~
+   Define the ``class`` of the ``div`` containing the submit button.
+   
 .. _range-field-sfs:
 ``range-[field]``
 ~~~~~~~~~~~~~~~~~
    URL of a container which list the accepted values
-   for the field ``[field]``. It’s particularly useful with a dropdown
+   for the field ``[field]``. It’s particularly useful with a dropdown or multipleselect
    field.
 
 .. _enum-field-sfs:
@@ -100,6 +105,68 @@ Attributes
    Equal to the value ``off``, it cancels the automatic entry of values in the relevant ``[field]``.
    It can be added to ``inputs``, ``textarea`` and ``select``.
 
+.. _search-placeholder-field:
+``search-placeholder-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.17*
+
+   Allows to modify "searchPlaceholder" displayed in the search bar (from SlimSelect plugin).
+   Its value by default is "Search" in English, "Rechercher" in French.
+   **It works only with the ``autocompletion`` feature.**
+
+.. _search-text-field:
+``search-text-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.17*
+
+   Allows to modify "searchText" displayed when no value is found (from SlimSelect plugin).
+   Its value by default is "No result" in English, "Aucun résultat" in French.
+   **It works only with the ``autocompletion`` feature.**
+
+   .. code:: html
+
+      <solid-form-search
+         id="filter-multiselectautocomp"
+         fields="skills"
+         widget-skills="solid-form-multipleselect-autocompletion-placeholder"
+         placeholder-skills="Please, pick a value"
+         search-text-skills="Nothing found"
+         search-placeholder-skills="Searching..."
+      ></solid-form-search>
+      <solid-display
+         data-src="data/list/users.jsonld"
+         fields="username, skills"
+         multiple-skills
+         filtered-by="filter-multiselectautocomp"
+      ></solid-display>
+
+
+.. _auto-range-field:
+``auto-range-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.17*
+
+   Dynamically populates a dropdown based on the values of the ``solid-display``(s) associated.
+   For each ``solid-display``, it will look for its ``field`` values, and add them to the dropdown.
+   Each value is displayed only once.
+   ``field`` can target a ``container`` or a ``resource``.
+
+   In this example below, ``auto-range-skills ``attribute catches all skill values for all users in the ``data-src`` `data/list/users` and displays in the dropdown all skills once :
+   .. code:: html
+
+      <solid-form-search
+         id="filter-autorange"
+         fields="skills"
+         auto-range-skills
+      ></solid-form-search>
+      <solid-display
+         data-src="data/list/users.jsonld"
+         fields="username, skills"
+         multiple-skills
+         filtered-by="filter-autorange"
+      ></solid-display>
+
+
 Widgets
 -------
 By default, the widget used is ``<solid-form-label-text>``. Cf the 

source/import_documentation/Components/Solid-Form.rst

@@ -55,6 +55,11 @@ Attributes
 ~~~~~~~~~~~~~~~~~
    Text of the submit button of the form.
 
+.. _class-submit-button-sf:
+``class-submit-button``
+~~~~~~~~~~~~~~~~~~~~~~~
+Define the ``class`` of the ``div`` containing the submit button.
+   
 .. _range-field-sf:
 ``range-[field]``
 ~~~~~~~~~~~~~~~~~
@@ -83,6 +88,7 @@ Attributes
 ``order-asc-[field]`` or ``order-desc-[field]``
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Name of the field used to order the range list ``[field]``.
+   i.e. ``order-asc-users="username"``
 
 .. _partial:
 ``partial``
@@ -127,11 +133,7 @@ Attributes
 
 ``confirmation-message``
 ~~~~~~~~~~~~~~~~~~~~~~~~
-   *Available from version 0.13*
-   **Migrated to the validation mixin page in version 0.16**
-
-   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.
+   **Migrated to the :ref:`validation-mixin <validation-mixin>` page in version 0.16**
 
 .. _autocomplete-field-sf:
 ``autocomplete-[field]``

source/import_documentation/Mixins/translation-mixin.rst

+.. _translation-mixin:
+translation-mixin
+=================
+*Available from version 0.17*
+
+The translation mixin provides an automatic translation in elements, depending on the browser language (English and French). Translations are default values, visible if no value is given by an attribute.
+
+The concerned elements are :
+    - the submit-button in :ref:`solid-form <solid-form>`, 
+    - the button in :ref:`solid-delete <solid-delete>`,
+    - the confirmation message from :ref:`validation-mixin <validation-mixin>`,
+    - the text in modal dialog's buttons from :ref:`validation-mixin <validation-mixin>`,
+    - :ref:`search-placeholder-[field] <search-placeholder-[field]>` and :ref:`search-text-[field] <search-text-[field]>` attributes available with ``autocompletion`` feature (SlimSelect plugin) from :ref:`widget API reference <reference>`.
+
+Used by:
+--------
+
+    * :ref:`store-mixin <store-mixin>`
+    * :ref:`validation-mixin <validation-mixin>`
\ No newline at end of file

source/import_documentation/Mixins/validation-mixin.rst

@@ -26,7 +26,8 @@ Attributes
 ``confirmation-message``
 ~~~~~~~~~~~~~~~~~~~~~~~~
     Message displayed in the modal dialog (``confirm`` or ``dialog`` type).
-    The message by default is "Please, confirm your choice".
+    The message by default is "Please, confirm your choice" in English, "Merci de confirmer votre choix" in French.
+
 
 
 **The attributes below only concern ``dialog`` type.**
@@ -34,12 +35,12 @@ Attributes
 .. _confirmation-submit-text:
 ``confirmation-submit-text``
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-    Text displayed on the submit button ("Ok" by default).
+    Text displayed on the submit button (by default, "Ok" in English, "Oui" in French).
 
 .. _confirmation-cancel-text:
 ``confirmation-cancel-text``
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-    Text displayed on the cancel button ("Cancel" by default).
+    Text displayed on the cancel button (by default "Cancel" in English, "Annuler" in French).
 
 .. _confirmation-submit-class:
 ``confirmation-submit-class``
@@ -69,4 +70,30 @@ Attributes
             confirmation-submit-text="Yes, I am"
             confirmation-submit-class="submit-button"
             confirmation-cancel-class="cancel-button"
-        ></solid-form>
\ No newline at end of file
+        ></solid-form>
+
+.. _confirmation-widget:
+``confirmation-widget``
+~~~~~~~~~~~~~~~~~~~~~~~
+    *Available from version 0.17*
+
+    Allows to insert a widget in the modal dialog, instead of ``confirmation-message`` (confirmation-widget prevails over confirmation-message).
+    The widget can contain a ``<solid-display>`` to display data from the resource concerned.
+
+    Example of confirmation-widget attribute use :
+
+    .. code:: html
+
+        <solid-widget name="confirm-delete-widget">
+            <template>
+                <div>
+                    <p>Are you sure to delete <strong><solid-display fields="name" data-src="${value}" style="display:inline-block"></solid-display></strong> ? </p>
+                </div>
+            </template>
+        ></solid-widget>
+
+        <solid-delete
+            data-src="http://server/user/"
+            confirmation-type="dialog"
+            confirmation-widget="confirm-delete-widget"
+        ></solid-delete>

source/import_documentation/Mixins/widget-mixin.rst

@@ -192,8 +192,7 @@ Attributes
 
     It can be used in :
 
-    - ``solid-display``: a nested ``solid-display`` will be created with the container URI as
-    data-src.
+    - ``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:

source/import_documentation/Widgets/Reference.rst

@@ -82,7 +82,7 @@ Features to add to the widget. You can choose as many as you want
 
 -  ``label``: adds a ``label`` before the template. Uses the attribute ``name`` if ``label`` is not defined.
 -  ``labellast``: adds a ``label`` after the template. Uses the attribute ``name`` if ``label`` is not defined.
--  ``autocompletion``: initializes the ``SlimSelect`` plugin. Works only with dropdowns.
+-  ``autocompletion``: initializes the ``SlimSelect`` plugin. Works only with ``dropdown`` and ``multipleselect`` templates.
 -  ``autolink``: analyzes widget content, and transforms all links in anchor.
 -  ``mailto``: adds ``mailto:`` at the beginning of an ``href`` attribute. Works only with links.
 -  ``tel``: adds ``tel:`` at the beginning of an ``href`` attribute. Works only with links.

source/import_documentation/attributes-list.rst

@@ -14,6 +14,10 @@ List of attributes (core framework)
    * :ref:`solid-form <autocomplete-field-sf>`
    * :ref:`solid-form-search <autocomplete-field-sfs>`
 
+``auto-range-[field]``
+~~~~~~~~~~~~~~~~~~~~~~
+   * :ref:`solid-form-search <auto-range-field>`
+   
 ``autosave``
 ~~~~~~~~~~~~
    * :ref:`solid-form <autosave>`
@@ -26,6 +30,11 @@ List of attributes (core framework)
 ~~~~~~~~~~~~~~~~~
    * :ref:`widget-mixin <class-field>`
 
+``class-submit-button``
+~~~~~~~~~~~~~~~~~~~~~~~
+   * :ref:`solid-form <class-submit-button-sf>`
+   * :ref:`solid-form-search <class-submit-button-sfs>`
+
 ``clustering``
 ~~~~~~~~~~~~~~
    * :ref:`solid-map <solid-map>`
@@ -54,6 +63,10 @@ List of attributes (core framework)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    * :ref:`validation-mixin <confirmation-submit-text>`
 
+``confirmation-widget``
+~~~~~~~~~~~~~~~~~~~~~~~
+   * :ref:`validation-mixin <confirmation-widget>`
+
 ``counter-template``
 ~~~~~~~~~~~~~~~~~~~~
    * :ref:`counter-mixin <counter-mixin>`
@@ -273,6 +286,14 @@ List of attributes (core framework)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    * :ref:`filter-mixin <filter-mixin>`
 
+``search-placeholder-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+   * :ref:`solid-form-search <search-placeholder-field>`
+
+``search-text-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~
+   * :ref:`solid-form-search <search-text-field>`
+
 ``src-[field]``
 ~~~~~~~~~~~~~~~
    * :ref:`widget-mixin <src-field>`

source/import_documentation/build-full-application.rst

@@ -8,7 +8,8 @@ With the core of the framework and some offical components, we'll be able to bui
 
 To start, simply import the core in your HTML file:
 
-.. code:: html
+.. code-block:: html
+
         <!-- ... Import the core ... -->    
         <script type="module" src="https://unpkg.com/@startinblox/core"></script>
     </head>
@@ -21,7 +22,8 @@ You can now freely use all the component included in the core.
 
 For the example we are going to build a directory.
 
-.. code:: html
+.. code-block:: html
+
         <!-- ... Add a form ... -->
         <sib-form 
         data-src="https://api.startinblox.com/users/"
@@ -49,7 +51,8 @@ The form and the display are connected to the same data sources. When you add pe
 
 Let's assume we want to add a menu to our app. We're gonna add the router component ``sib-router``
 
-.. code:: html
+.. code-block:: html
+
         <!-- ... Import the core ... -->    
         <script type="module" src="https://unpkg.com/@startinblox/core"></script>
         <!-- ... Import SiB Router ... -->