Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • documentation/doc
  • PhilH/doc
  • louis.csn/doc
  • fabien4vo/doc
  • rngadam/doc
  • anastasia/doc
6 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 825 additions and 184 deletions
source/import_documentation/Components/Solid-Ac-Checker.rst
View file @ 405339e9
......@@ -23,8 +23,9 @@ This component uses the following mixins:
Please check their documentation to know more about their capabilities.
Attributes
----------
Specific attributes
-------------------
``permission``
~~~~~~~~~~~~~~
......@@ -35,10 +36,19 @@ Attributes
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>`__
Mixin attributes
-----------------
**From store-mixin :**
.. include:: ../Mixins/store-mixin.rst
:start-line: 21
:end-before: Events
\ No newline at end of file
source/import_documentation/Components/Solid-Auth.rst
View file @ 405339e9
.. _sib-auth:
sib-auth
================
========
Allows your users to login via a given OIDC provider.
Installation
--------------
Initialize ``sib-auth`` in your HTML file:
Initialize ``sib-auth`` in your HTML file :
.. code:: html
......@@ -19,7 +19,7 @@ Installation
</sib-auth>
`You'll find here the detail of the attributes configuration. <https://github.com/IdentityModel/oidc-client-js/wiki#usermanager>`__
`You'll find here the detail of the attributes configuration. <https://github.com/IdentityModel/oidc-client-js/wiki#usermanager>`__
Set an OIDC provider to your server
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -90,7 +90,7 @@ Example:
</sib-auth>
Methods
------------------
-------
``login``
~~~~~~~~~
......
source/import_documentation/Components/Solid-Calendar.rst
View file @ 405339e9
......@@ -23,6 +23,27 @@ This component uses the following mixins:
Please check their documentation to know more about their capabilities.
Mixin attributes
-----------------
**From list-mixin :**
.. include:: ../Mixins/list-mixin.rst
:start-line: 25
**From next-mixin :**
.. include:: ../Mixins/next-mixin.rst
:start-line: 21
**From store-mixin :**
.. include:: ../Mixins/store-mixin.rst
:start-line: 21
:end-before: Events
Events
-------
......
source/import_documentation/Components/Solid-Delete.rst
View file @ 405339e9
......@@ -21,8 +21,8 @@ This component uses the following mixin:
Please check their documentation to know more about its capabilities.
Attributes
----------
Specific attributes
-------------------
``data-src``
~~~~~~~~~~~~
......@@ -32,9 +32,20 @@ Attributes
~~~~~~~~~~~~~~
The text to display on the delete button.
``confirmation-message``
~~~~~~~~~~~~~~~~~~~~~~~~~
**Migrated to the :ref:`validation-mixin <validation-mixin>` page in version 0.16**
Mixin attributes
-----------------
**From next-mixin :**
.. include:: ../Mixins/next-mixin.rst
:start-line: 21
**From validation-mixin :**
.. include:: ../Mixins/validation-mixin.rst
:start-line: 17
Events
-------
......
source/import_documentation/Components/Solid-Display.rst
View file @ 405339e9
......@@ -29,7 +29,6 @@ Mixins
------
This component uses the following mixins:
* :ref:`required-mixin <required-mixin>`
* :ref:`counter-mixin <counter-mixin>`
* :ref:`federation-mixin <federation-mixin>`
* :ref:`filter-mixin <filter-mixin>`
......@@ -38,6 +37,8 @@ This component uses the following mixins:
* :ref:`list-mixin <list-mixin>`
* :ref:`next-mixin <next-mixin>`
* :ref:`paginate-mixin <paginate-mixin>`
* :ref:`required-mixin <required-mixin>`
* :ref:`paginate-mixin <server-pagination-mixin>`
* :ref:`sorter-mixin <sorter-mixin>`
* :ref:`store-mixin <store-mixin>`
* :ref:`widget-mixin <widget-mixin>`
......@@ -45,22 +46,86 @@ This component uses the following mixins:
Please check their documentation to know more about their capabilities.
Attributes
----------
Specific attributes
-------------------
``fields``
~~~~~~~~~~
By default, all displayed fields are direct children of
``<solid-display>``. Make sure you don’t give your set the same name as
a field as it would result in an infinite loop.
List of fields displayed.
By default, all displayed fields are direct children of ``<solid-display>``.
More details on its use below (in **widget-mixin attributes**).
``child-[field]``
~~~~~~~~~~~~~~~~~
Add attribute ``[field]`` to all children.
Mixin attributes
-----------------
**From counter-mixin :**
.. include:: ../Mixins/counter-mixin.rst
:start-line: 17
**From filter-mixin :**
.. include:: ../Mixins/filter-mixin.rst
:start-line: 18
**From grouper-mixin :**
.. include:: ../Mixins/grouper-mixin.rst
:start-line: 18
**From highlighter-mixin :**
.. include:: ../Mixins/highlighter-mixin.rst
:start-line: 17
**From list-mixin :**
.. include:: ../Mixins/list-mixin.rst
:start-line: 25
**From next-mixin :**
.. include:: ../Mixins/next-mixin.rst
:start-line: 21
**From paginate-mixin :**
.. include:: ../Mixins/paginate-mixin.rst
:start-line: 17
**From required-mixin :**
.. include:: ../Mixins/required-mixin.rst
:start-line: 17
**From sorter-mixin :**
.. include:: ../Mixins/sorter-mixin.rst
:start-line: 17
**From store-mixin :**
.. include:: ../Mixins/store-mixin.rst
:start-line: 21
:end-before: Events
**From widget-mixin :**
.. include:: ../Mixins/widget-mixin.rst
:start-line: 18
Widgets
-------
By default, the widget used is ``<solid-display-div>``. Cf the
:ref:`Widget <reference>` page for more info.
......
source/import_documentation/Components/Solid-Form-Search.rst
View file @ 405339e9
......@@ -29,13 +29,16 @@ This component uses the following mixins:
Please check their documentation to know more about their capabilities.
Attributes
----------
Specific attributes
-------------------
``fields``
~~~~~~~~~~
List of fields used to perform the search.
More details on its use below (in **widget-mixin attributes**).
.. _label-field-sfs:
``label-[field]``
~~~~~~~~~~~~~~~~~
......@@ -112,7 +115,7 @@ Attributes
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.**
**It works only with the autocompletion feature.**
.. _search-text-field:
``search-text-[field]``
......@@ -121,7 +124,7 @@ Attributes
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.**
**It works only with the autocompletion feature.**
.. code:: html
......@@ -140,7 +143,6 @@ Attributes
filtered-by="filter-multiselectautocomp"
></solid-display>
.. _auto-range-field:
``auto-range-[field]``
~~~~~~~~~~~~~~~~~~~~~~~
......@@ -152,6 +154,7 @@ Attributes
``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
......@@ -167,6 +170,15 @@ Attributes
></solid-display>
Mixin attributes
-----------------
**From widget-mixin :**
.. include:: ../Mixins/widget-mixin.rst
:start-line: 18
Widgets
-------
By default, the widget used is ``<solid-form-label-text>``. Cf the
......
source/import_documentation/Components/Solid-Form.rst
View file @ 405339e9
......@@ -2,14 +2,31 @@
solid-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
ressources, and displays a creation form to add a resource to the
container.
The `solid-form` component serves dual purposes: editing existing resources
and creating new resources within a container.
Editing a Resource
-------------------
The `solid-form` component receives the URL of a resource via its `data-src` attribute
and displays a form for editing the resource.
.. code:: html
<solid-form data-src="http://example.com/resource/123/"></solid-form>
Creating a Resource
-------------------
If provided with the URL of a container of resources, the `solid-form` component displays
a form for creating a new resource and adding it to the container.
.. code:: html
<solid-form data-src="http://server/todos/"></solid-form>
<solid-form data-src="http://example.com/container/"></solid-form>
Mixins
------
......@@ -20,61 +37,44 @@ This component uses the following mixins:
* :ref:`validation-mixin <validation-mixin>`
* :ref:`widget-mixin <widget-mixin>`
Please check their documentation to know more about their capabilities.
Please refer to their documentation for more details about their capabilities.
Attributes
----------
``fields``
~~~~~~~~~~
List of the fields used to create the form (by default, all of them are used).
Specific attributes
-------------------
.. _label-field-sf:
``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"``
.. _autocomplete-field-sf:
``autocomplete-[field]``
~~~~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.15*
.. _naked:
``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.
When set to ``off``, it disables the automatic entry of values in the specified ``[field]``.
This attribute can be added to ``inputs``, ``textarea`` and ``select``.
.. _upload-url-field:
``upload-url-[field]``
~~~~~~~~~~~~~~~~~~~~~~
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-sf:
``submit-button``
~~~~~~~~~~~~~~~~~
Text of the submit button of the form.
.. _autosave:
``autosave``
~~~~~~~~~~~~
*Available from version 0.16*
If this attribute is defined, each change in an input will trigger a request to update the resource.
This attribute works only when editing resources, not creating them.
.. _class-submit-button-sf:
``class-submit-button``
~~~~~~~~~~~~~~~~~~~~~~~
Define the ``class`` of the ``div`` containing the submit button.
.. _range-field-sf:
``range-[field]``
~~~~~~~~~~~~~~~~~
URL of a container which list the accepted values
for the field ``[field]``. It’s particularly useful with a dropdown
field.
.. _enum-field-sf:
``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.
Specifies a list of values for the specified ``[field]``.
These values must be be filled manually and separated by commas.
This is particularly useful for dropdown or radio fields.
Two formats are possible:
* ``enum-[field]="value 1, value 2, value 3"`` : each value will be displayed
......@@ -83,99 +83,153 @@ Define the ``class`` of the ``div`` containing the submit button.
* ``enum-[field]="value1 = a, value2 = b, value3 = c"``: each value will be displayed
and "a", "b", "c" will be loaded in value attribute.
``fields``
~~~~~~~~~~
Specifies the list of fields used to create the form. By default, all fields are used.
More details can be found in the **widget-mixin attributes** section
.. _label-field-sf:
``label-[field]``
~~~~~~~~~~~~~~~~~
When displaying a form, the default labels are the field names of the model.
To customize a label, use this attribute, i.e. ``label-username="Your name"``
.. _max-field:
``max-[field]``
~~~~~~~~~~~~~~~
Specifies the maximum value for the specified ``[field]``.
This attribute works only with ``solid-form-number`` and ``solid-form-time`` widgets.
.. _maxlength-field:
``maxlength-[field]``
~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.16*
Specifies the maximum number of characters that can be typed for the specified ``[field]``.
This attribute works only with ``solid-form-text``, ``solid-form-email`` or ``solid-form-password`` and ``solid-form-textarea`` widgets.
.. _min-field:
``min-[field]``
~~~~~~~~~~~~~~~
Specifies the minimum value for the specified ``[field]``.
This attribute works only with ``solid-form-number`` and ``solid-form-time`` widgets.
.. _minlength-field:
``minlength-[field]``
~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.16*
Specifies the minimum number of characters that can be typed for the specified ``[field]``.
This attribute works only with ``solid-form-text``, ``solid-form-email`` or ``solid-form-password`` and ``solid-form-textarea`` widgets.
.. _naked:
``naked``
~~~~~~~~~
When set, this attribute removes the submit button. This is particularly useful to prevent the nested forms to
display their own submit button.
.. _order-asc-field:
.. _order-desc-field:
``order-asc-[field]`` or ``order-desc-[field]``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Name of the field used to order the range list ``[field]``.
Specifies the field used to order the range list ``[field]``.
i.e. ``order-asc-users="username"``
.. _partial:
``partial``
~~~~~~~~~~~
Add this attribute when the form does not include
all the fields of the resource to update.
Use this attribute when the form does not include all the fields of the resource that you want to update.
This indicates that only the provided fields should be updated, leaving the unspecified fields unchanged.
.. _pattern-field:
``pattern-[field]``
~~~~~~~~~~~~~~~
*Available from version 0.13*
ASpecifies a regular expression to validate the input's value for the specified ``[field]``.
This attribute works only with a ``solid-form-text`` widget.
.. _range-field-sf:
``range-[field]``
~~~~~~~~~~~~~~~~~
Specifies the URL of a container that lists the accepted values for the specified ``[field]``.
This is particularly useful with a dropdown field.
.. _required-field:
``required-[field]``
~~~~~~~~~~~~~~~~~~~~
Add this attribute to make the ``[field]`` required by adding the ``required`` attribute to the input.
Makes the specified ``[field]`` required by adding the ``required`` attribute to the input.
.. _min-field:
``min-[field]``
~~~~~~~~~~~~~~~
Add this attribute for the field ``[field]`` to define its minimum value.
It works only with ``solid-form-number`` and ``solid-form-time`` widgets.
.. _step-field:
``step-[field]``
~~~~~~~~~~~~~~~~
*Available from version 0.16*
.. _max-field:
``max-[field]``
~~~~~~~~~~~~~~~
Add this attribute for the field ``[field]`` to define its maximum value.
It works only with ``solid-form-number`` and ``solid-form-time`` widgets.
Specifies the stepping interval number for the specified ``[field]`` based on the ``min-[field]`` value. This attribute works with:
- ``solid-form-time`` widget : The value is given in seconds (default value is 60).
- ``solid-form-number`` widget : The default value is 1.
.. _pattern-field:
``pattern-[field]``
~~~~~~~~~~~~~~~
*Available from version 0.13*
.. _submit-button-sf:
``submit-button``
~~~~~~~~~~~~~~~~~
Specifies the text of the form's submit button.
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:
``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.
Adds extra information about the specified ``[field]``.
This attribute works only with a ``solid-form-text`` widget.
``confirmation-message``
~~~~~~~~~~~~~~~~~~~~~~~~
**Migrated to the :ref:`validation-mixin <validation-mixin>` page in version 0.16**
.. _autocomplete-field-sf:
``autocomplete-[field]``
~~~~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.15*
.. _upload-url-field:
``upload-url-[field]``
~~~~~~~~~~~~~~~~~~~~~~
Specifies the URL to upload a file for the specified ``[field]``. This attribute automatically sets
``widget-[field]`` to ``solid-form-file`` if not defined.
This is particularly useful with a dropdown field.
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``.
.. _autosave:
``autosave``
~~~~~~~~~~~~
*Available from version 0.16*
Mixin attributes
-----------------
If the attribute is defined, each change in an input will trigger a request to update the resource.
This attribute works only when editing resources, not creating them.
**From next-mixin :**
.. _maxlength-field:
``maxlength-[field]``
~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.16*
.. include:: ../Mixins/next-mixin.rst
:start-line: 21
Add this attribute for the field ``[field]`` to define the maximum number of characters that can be typed.
It works only with ``solid-form-text``, ``solid-form-email`` or ``solid-form-password`` and ``solid-form-textarea`` widgets.
**From store-mixin :**
.. _minlength-field:
``minlength-[field]``
~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.16*
.. include:: ../Mixins/store-mixin.rst
:start-line: 21
:end-before: Events
Add this attribute for the field ``[field]`` to define the minimum number of characters that can be typed.
It works only with ``solid-form-text``, ``solid-form-email`` or ``solid-form-password`` and ``solid-form-textarea`` widgets.
**From validation-mixin :**
.. _step-field:
``step-[field]``
~~~~~~~~~~~~~~~~
*Available from version 0.16*
.. include:: ../Mixins/validation-mixin.rst
:start-line: 17
**From widget-mixin :**
.. include:: ../Mixins/widget-mixin.rst
:start-line: 18
Add this attribute for the field ``[field]`` to define the stepping interval number to use as constraint validation. Its based on the ``min-[field]`` value.
It works with :
- ``solid-form-time`` widget : Its value is given in seconds (default value is 60).
- ``solid-form-number`` widget : Its default value is 1.
Widgets
-------
......@@ -192,4 +246,4 @@ Events
``save``
~~~~~~~~~~~~~~
Triggered when the response of the submit has been received (successfull or not)
Triggered when the response of the submit has been received successfully
source/import_documentation/Components/Solid-Map.rst
View file @ 405339e9
......@@ -13,16 +13,6 @@ of fields needed to display the resources properly:
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
------
......@@ -40,8 +30,8 @@ This component uses the following mixins:
Please check their documentation to know more about their capabilities.
Attributes
----------
Specific attributes
-------------------
Like for ``solid-display``, fields can be displayed and filters or searching capabilities can be
added to interact with the list of data being displayed.
......@@ -50,12 +40,55 @@ added to interact with the list of data being displayed.
~~~~~~~~~~
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.
More details on its use below (in **widget-mixin attributes**).
``clustering``
~~~~~~~~~~~~~~
*Available from version 0.16*
If this attribute is defined, markers spacially close are grouped in clusters.
Mixin attributes
-----------------
**From counter-mixin :**
.. include:: ../Mixins/counter-mixin.rst
:start-line: 17
**From filter-mixin :**
.. include:: ../Mixins/filter-mixin.rst
:start-line: 18
**From grouper-mixin :**
.. include:: ../Mixins/grouper-mixin.rst
:start-line: 18
**From list-mixin :**
.. include:: ../Mixins/list-mixin.rst
:start-line: 25
**From next-mixin :**
.. include:: ../Mixins/next-mixin.rst
:start-line: 21
**From store-mixin :**
.. include:: ../Mixins/store-mixin.rst
:start-line: 21
:end-before: Events
**From widget-mixin :**
.. include:: ../Mixins/widget-mixin.rst
:start-line: 18
Events
-------
......
source/import_documentation/Components/Solid-Router.rst
View file @ 405339e9
......@@ -53,12 +53,13 @@ Displays a menu and handle the navigation for 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.
- ``keep-url``: It freezes the URL of all the ``<solid-route>`` included. Usefull to freeze the URL when a pop-up is displayed.
``<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
- ``name``: The name of the route. Must match the ``data-view`` 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
......@@ -68,6 +69,12 @@ Displays a menu and handle the navigation for you.
``<solid-router>``. It is automatically added/removed by
``<solid-router>`` and should not be tinkered manually.
``<div data-view=[name]>`` attributes:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- ``view-title``: allows to change the ``title`` of the page when a user navigates to this view.
- ``view-description``: allows to change the ``<meta name="description">`` of the page when the user navigates to this view.
solid-link
----------
......@@ -78,7 +85,7 @@ solid-link
- ``data-src``: The resource you want to use in your view. Often
used to show more details about this resource, by adding the
``bind-resource`` attribute to a component.
``bind-resources`` attribute to a component (more details about ``bind-resources`` below).
Example:
......@@ -91,7 +98,7 @@ solid-analytics
Manage browsing statistics.
Sign in on a web analytics service and set ``<sib-analytics>`` inside
Sign in on a web analytics service and set ``<solid-analytics>`` inside
``<body>``, at the begining for example.
``<solid-analytics>`` accepts the following attributes:
......@@ -102,14 +109,14 @@ Sign in on a web analytics service and set ``<sib-analytics>`` inside
necessary to specify the url attribute.
- ``id``: id of the website on the service.
Type ``'debug'`` allow to test sib-analytics. It will display the route
Type ``'debug'`` allow to test solid-analytics. It will display the route
on the console each time a navigation is triggered.
Example :
.. code:: html
<sib-analytics type="matomo" url="https://matomo.example.com/" id="1234"></sib-analytics>
<solid-analytics type="matomo" url="https://matomo.example.com/" id="1234"></solid-analytics>
Interacting with the router
---------------------------
......@@ -144,17 +151,14 @@ 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.
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.
* ``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.
Events
------
......
source/import_documentation/Components/Solid-Table.rst
View file @ 405339e9
......@@ -24,7 +24,6 @@ Mixins
------
This component uses the following mixins:
* :ref:`required-mixin <required-mixin>`
* :ref:`counter-mixin <counter-mixin>`
* :ref:`federation-mixin <federation-mixin>`
* :ref:`filter-mixin <filter-mixin>`
......@@ -32,6 +31,8 @@ This component uses the following mixins:
* :ref:`highlighter-mixin <highlighter-mixin>`
* :ref:`list-mixin <list-mixin>`
* :ref:`paginate-mixin <paginate-mixin>`
* :ref:`required-mixin <required-mixin>`
* :ref:`paginate-mixin <server-pagination-mixin>`
* :ref:`sorter-mixin <sorter-mixin>`
* :ref:`store-mixin <store-mixin>`
* :ref:`widget-mixin <widget-mixin>`
......@@ -39,15 +40,14 @@ This component uses the following mixins:
Please check their documentation to know more about their capabilities.
Attributes
----------
Specific attributes
-------------------
``fields``
~~~~~~~~~~
By default, all displayed fields are direct children of
``<solid-display>``. Make sure you don’t give your set the same name as
a field as it would result in an infinite loop.
List of fields displayed in the table.
More details on its use below (in **widget-mixin attributes**).
``header``
~~~~~~~~~~
......@@ -64,8 +64,8 @@ Attributes
.. code:: javascript
document.querySelector('solid-table').component.selectedLines
// returns [ "resourceId1", "resourceId2" ]
document.querySelector('solid-table').component.selectedLines
// returns [ "resourceId1", "resourceId2" ]
``editable-[field]``
~~~~~~~~~~~~~~~~~~~~
......@@ -76,13 +76,69 @@ Attributes
.. code:: html
<solid-table
data-src="https://server/users/"
fields="first_name"
editable-first_name
widget-first_name="solid-form-placeholder-text"
placeholder-first_name="Your First Name"
></solid-table>
<solid-table
data-src="https://server/users/"
fields="first_name"
editable-first_name
widget-first_name="solid-form-placeholder-text"
placeholder-first_name="Your First Name"
></solid-table>
Mixin attributes
-----------------
**From counter-mixin :**
.. include:: ../Mixins/counter-mixin.rst
:start-line: 17
**From filter-mixin :**
.. include:: ../Mixins/filter-mixin.rst
:start-line: 18
**From grouper-mixin :**
.. include:: ../Mixins/grouper-mixin.rst
:start-line: 18
**From highlighter-mixin :**
.. include:: ../Mixins/highlighter-mixin.rst
:start-line: 17
**From list-mixin :**
.. include:: ../Mixins/list-mixin.rst
:start-line: 25
**From paginate-mixin :**
.. include:: ../Mixins/paginate-mixin.rst
:start-line: 17
**From required-mixin :**
.. include:: ../Mixins/required-mixin.rst
:start-line: 17
**From sorter-mixin :**
.. include:: ../Mixins/sorter-mixin.rst
:start-line: 17
**From store-mixin :**
.. include:: ../Mixins/store-mixin.rst
:start-line: 21
:end-before: Events
**From widget-mixin :**
.. include:: ../Mixins/widget-mixin.rst
:start-line: 18
Widgets
-------
......
source/import_documentation/Components/Solid-Widget.rst
View file @ 405339e9
......@@ -29,7 +29,58 @@ In a ``solid-widget``, you have access to these values:
- ``label``: if defined, label of the current field
- ``range``: if defined, range of the current field
..
.. note::
NB: Do not forget to define your custom template in a ``<template>``
tag. Otherwise, your widget will not be declared properly.
Attributes
----------
``data-holder``
~~~~~~~~~~~~~~~
Special attribute which can be inserted in a ``<solid-form>`` or an ``<input>`` within a ``<solid-widget>``.
When set on an element in the widget, it takes the ``value`` of this element and associate it with the ``field`` targetted by the widget.
If this attribute is combined with ``data-src="${value}"`` on a ``<solid-form>`` in a widget, values from the nested resource are directly editable. It works only if ``value`` is a resource (and not if it's a literal).
``data-src="${value}"``
~~~~~~~~~~~~~~~~~~~~~~~
It is usable to edit a nested resource (ie: a profile of a user, a customer of a project, ...) by creating a ``<solid-form>`` in a ``<solid-widget>``.
The ``value`` will be the ``@id`` of the nested resource, thus putting it in the ``data-src`` will create a form field on this nested resource.
It cannot be used without ``data-holder`` attribute.
The example below illustrates the input widget with and without ``value="${value}"``
(input's ``value="${value}"`` is equivalent to solid-form's ``data-src="${value}"``) :
.. code:: html
<solid-form
data-src="../data/list/users.jsonld"
fields="email"
widget-email="custom-form-widget-1"
></solid-form>
<solid-widget name="custom-form-widget-1">
<template>
<input type="text" data-holder />
</template>
</solid-widget>
<solid-form
data-src="../data/list/user-1.jsonld"
fields="email"
widget-email="custom-form-widget-2"
></solid-form>
<solid-widget name="custom-form-widget-2">
<template>
<input type="text" data-holder value="${value}" />
</template>
</solid-widget>
.. figure:: ../../_static/images/import_documentation/img-core-examples/data-holder-in-solid-widget.png
:alt: solid-widget with and without value="${value}" attribute
source/import_documentation/Mixins/counter-mixin.rst
View file @ 405339e9
......@@ -27,4 +27,3 @@ Attributes
fields="username"
counter-template="<strong>${counter} users here</strong>"
></solid-display>
source/import_documentation/Mixins/filter-mixin.rst
View file @ 405339e9
......@@ -20,7 +20,7 @@ Attributes
Target a ``<solid-form-search>`` used to filter current list of resource.
example:
Example:
.. code:: html
......@@ -41,8 +41,6 @@ Attributes
``search-fields`` **deprecated**
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The properties you want to use to filter the list of resources.
You can add multiple fields, separated by a comma.
......
source/import_documentation/Mixins/grouper-mixin.rst
View file @ 405339e9
......@@ -54,7 +54,6 @@ Attributes
</template>
</solid-widget>
``group-class``
~~~~~~~~~~~~~~~
The name of the class to add on each group widget.
\ No newline at end of file
source/import_documentation/Mixins/next-mixin.rst
View file @ 405339e9
......@@ -20,7 +20,7 @@ Attributes
``next``
~~~~~~~~
`name` attribute of the ``<solid-route>`` that should be accessed when a ``<solid-display>``, ``<solid-map>`` or ``<solid-calendar>`` element is clicked.
``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 :
......
source/import_documentation/Mixins/server-pagination-mixin.rst 0 → 100644
View file @ 405339e9
.. _server-pagination-mixin:
server-pagination-mixin
================
The server-pagination mixin is a post-processor mixin, which provides the ability to handle the pagination server side, hence reducing the number of resources fetched on first call.
Used by:
--------
* :ref:`solid-display <solid-display>`
Attributes
----------
``limit``
~~~~~~~~~~~~~~~
The number of resources to fetch.
In this example, the list will show pages of 5 users.
.. code:: html
<solid-display
data-src=http://server/users/"
fields="username"
limit="5"
></solid-display>
``offset``
~~~~~~~~~~~~~~~
The offset of the first resource to fetch
In this example, the list will show pages of 5 users, skipping the first ten.
.. code:: html
<solid-display
data-src=http://server/users/"
fields="username"
limit="5"
offset="10"
></solid-display>
\ No newline at end of file
source/import_documentation/Mixins/store-mixin.rst
View file @ 405339e9
......@@ -35,6 +35,27 @@ Attributes
with the attribute ``bind-resources``) but you need to display
another field of this source.
The example below illustrates how to use nested-field attribute :
* The ``profile`` is a resource nested in the current resource, it will automatically fetch the ``city``, ``phone``, ``website`` values to display them.
* The second solid-display shows another way to display the values from a nested resource with dot ``.``.
.. code:: html
<solid-display
data-src="data/list/user-1.jsonld"
nested-field="profile"
fields="city, phone, website"
></solid-display>
<solid-display
data-src="data/list/user-1.jsonld"
fields="profile.city, profile.phone, profile.website"
></solid-display>
.. figure:: ../../_static/images/import_documentation/img-core-examples/nested-field.png
:alt: nested-field attribute use
.. _extra-context:
``extra-context``
~~~~~~~~~~~~~~~~~
......@@ -94,8 +115,9 @@ Attributes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*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.
This mixin decode all attribute values starting by ``store://resource``,
``store://container`` 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``).
......
source/import_documentation/Mixins/widget-mixin.rst
View file @ 405339e9
......@@ -9,7 +9,9 @@ Used by:
* :ref:`solid-display <solid-display>`
* :ref:`solid-form <solid-form>`
* :ref:`solid-form-search <solid-form-search>`
* :ref:`solid-map <solid-map>`
* :ref:`solid-table <solid-table>`
Attributes
......@@ -20,12 +22,14 @@ Attributes
~~~~~~~~~~
The ordered list of fields to be displayed, separated by commas.
By default, all the fields of the resource are displayed.
By default, all the fields of the resource are used.
To not show any fields, put an empty fields (eg.
``<solid-display fields />)``
``<solid-display fields />)``.
By default, all displayed fields are inserted into a ``<div>``
By default, all displayed fields are inserted into a ``<div>``.
It is possible to use the dot ``.`` to display data from a nested resource.
**Sets**
......@@ -41,7 +45,9 @@ Attributes
fields="fullName(first_name, last_name), email"
></solid-display>
You can customize the group widget, see the :ref:`Sets widgets <reference>` page for more info.
Make sure you don’t give your set the same name as a field as it would result in an infinite loop.
You can customize the group widget, see the :ref:`Sets widgets <reference>` page for more info.
**Strings**
......@@ -69,7 +75,6 @@ Attributes
value-title="My custom and static title"
></solid-display>
.. _default-field:
``default-[field]``
~~~~~~~~~~~~~~~~~~~
......@@ -97,7 +102,19 @@ Attributes
.. _action-field:
``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``.
Displays a link with a ``<solid-link>`` tag with the current resource as ``data-src`` and
the value of the attribute as ``next``.
.. _link-text-field:
``link-text-[field]``
~~~~~~~~~~~~~~~~~~~~~
*Works only with solid-display-link(-mailto/tel/blank) and solid-action*
*Available from version 0.18*
Modify the displayed value as link in :
- ``<a>`` for solid-display-link,
- ``<solid-link>`` in solid-action.
.. _src-field:
``src-[field]``
......@@ -210,14 +227,14 @@ Attributes
- ``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:
For ``solid-form`` only :
- ``multiple-[field]-add-label`` : Text of the “+” button used to add an element
``multiple-[field]-add-label``
++++++++++++++++++++++++++++++
- ``multiple-[field]-remove-label`` : Text of the “x” button used to remove an element
Text of the “+” button used to add an element
*Available from version 0.18*
``multiple-[field]-remove-label``
+++++++++++++++++++++++++++++++++
- ``multiple-[field]-add-class`` : Class of the “+” button used to add an element
Text of the “x” button used to remove an element
- ``multiple-[field]-remove-class`` : Class of the “x” button used to remove an element
\ No newline at end of file
source/import_documentation/Use-a-component-alone-in-an-existing-application.rst
View file @ 405339e9
Add a component to a website
***************************
****************************
Use Startin'blox according to your needs.
Startin'blox was designed to be modular. You need to add a calendar or a map to your website?
......@@ -21,6 +21,7 @@ In the documentation of the component you’ve chosen, you’ll find the
script to import.
.. code:: html
<!-- ... Import the core ... -->
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
<!-- ... Import your component ... -->
......
source/import_documentation/Widgets/Examples.rst
View file @ 405339e9
.. _widgets-examples:
Examples
=========
Common widgets
--------------
Here is a few examples of widgets use. First, there is the HTML using Startin'blox and then, the displayed result in a webpage.
All the values from ``<solid-display>`` are displayed with and without widget.
solid-display-img
~~~~~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/user-1.jsonld"
fields="notimage, image"
value-notimage="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
value-image="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
widget-image="solid-display-img"
alt-image="pink flowers"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-img.png
:alt: Widget solid-display-img
solid-display-link
~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/user-1.jsonld"
fields="notlink, link"
value-notlink="https://startinblox.com/fr/"
value-link="https://startinblox.com/fr/"
widget-link="solid-display-link"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-link.png
:alt: Widget solid-display-link
solid-display-link-mailto
~~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/user-5.jsonld"
fields="email"
></solid-display>
<solid-display
data-src="data/list/user-5.jsonld"
fields="email"
widget-email="solid-display-link-mailto"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-mailto.png
:alt: Widget solid-display-link-mailto
solid-display-value-date
~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/event-1.jsonld"
fields="date"
></solid-display>
<solid-display
data-src="data/list/event-1.jsonld"
fields="date"
widget-date="solid-display-value-date"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-date.png
:alt: Widget solid-display-value-date
solid-form-radio
~~~~~~~~~~~~~~~~
range attribute
.. code:: html
<solid-form
data-src="data/list/event-1.jsonld"
fields="contact"
widget-contact="solid-form-radio"
range-contact="data/list/users.jsonld"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-radio.png
:alt: Widget solid-form-radio
solid-form-dropdown
~~~~~~~~~~~~~~~~~~~
enum attribute
.. code:: html
<solid-form
data-src="data/list/event-1.jsonld"
fields="personnes"
widget-personnes="solid-form-dropdown"
enum-personnes="Sacha, Camille, Charlie, Lou"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-dropdown.png
:alt: Widget solid-form-dropdown
solid-form-textarea-label
~~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-form
data-src="data/list/event-1.jsonld"
fields="description"
widget-description="solid-form-textarea-label"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-textarea.png
:alt: Widget solid-form-textarea-label
solid-form-text-placeholder
~~~~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-form
data-src="./data/list/users.jsonld"
fields="first_name"
widget-first_name="solid-form-text-placeholder"
placeholder-first_name="Enter your name"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-placeholder.png
:alt: Widget solid-form-text-placehoder
solid-form-text-label
~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-form
data-src="./data/list/users.jsonld"
fields="first_name"
widget-first_name="solid-form-text-label"
label-first_name="First name :"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-label.png
:alt: Widget solid-form-text-label
solid-set-div
~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/users.jsonld"
fields="name(first_name, ' - ' ,last_name, ' - ', username)"
widget-name="solid-set-div"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-set.png
:alt: Widget solid-set-div
*The border is applied on solid-set-div*
solid-action
~~~~~~~~~~~~
A classic example of solid-action use is a list of resources (users here) with only one field displayed and the possibility to access additionnal informations by clicking on "User details" :
.. code:: html
<solid-display
data-src="data/list/users.jsonld"
fields="name, details"
value-details="User details"
label-name="Name :"
widget-name="solid-display-value-label"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action.png
:alt: Basic solid-display
This is the solid-display with action attribute and link-text-[field] attribute use to replace the basic value-[field] from above.
.. code:: html
<solid-display
data-src="data/list/users.jsonld"
fields="name, details"
label-name="Name :"
widget-name="solid-display-value-label"
action-details="user-details"
link-text-details="User details"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action2.png
:alt: Widget solid-action
By adding a router, a route and another view, clicking on the solid-action displays the view (dotted border):
.. code:: html
<solid-router use-hash>
<solid-route
hidden
use-id
name="user-details"
></solid-route>
</solid-router>
<solid-display
data-src="data/list/users.jsonld"
fields="name, details"
label-name="Name :"
widget-name="solid-display-value-label"
action-details="user-details"
link-text-details="User details"
></solid-display>
<div data-view="user-details" hidden>
<solid-display
bind-resources
fields="first_name, last_name, username, email"
></solid-display>
</div>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action3.png
:alt: Widget solid-action with view
Step-by-step widget creation
----------------------------
Create your widget
~~~~~~~~~~~~~~~~~~
......