Skip to content
Snippets Groups Projects
Commit e428023e authored by Alice Poggioli's avatar Alice Poggioli
Browse files

Merge branch 'revert-a86f0fc0' into 'master' 

Revert "Merge branch 'dev' into 'master'"

See merge request !4
parents a86f0fc0 19a3b284
No related branches found
No related tags found
2 merge requests!19Enum dropdown radio solid-form-search,!4Revert "Merge branch 'dev' into 'master'"
Pipeline #5818 passed with stage
Stage: test
    in 34 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing
    with 369 additions and 869 deletions
    source/import_documentation/Components/SiB-Ac-Checker.rst
    + 22
    − 35
    View file @ e428023e
    solid-ac-checker sib-ac-checker
    ================ ==============
    Hides an element from the page if the current user doesn’t have the Hides an element from the page if the current user doesn’t have the
    required permissions on it. required permissions on it.
    .. code:: html .. code:: html
    <solid-ac-checker permission="acl:Write" bind-resources> <sib-ac-checker permission="acl:Write" bind-resources>
    <solid-route name="member-edit"> <sib-route name="member-edit">
    <div>Edit</div> <div>Edit</div>
    </solid-route> </sib-route>
    </solid-ac-checker> </sib-ac-checker>
    Mixins **Attributes :**
    ------
    - **``permission``**: Displays the element if the user has the
    This component uses the following mixins: specified right
    - **``no-permission``**: Displays the element if the user has not the
    - `store-mixin <store-mixin>`__ specified right
    Please check their documentation to know more about their capabilities. Possible values: -
    `acl:Read <https://github.com/solid/web-access-control-spec#aclread>`__
    Attributes -
    ---------- `acl:Write <https://github.com/solid/web-access-control-spec#aclwrite>`__
    -
    ``permission`` `acl:Append <https://github.com/solid/web-access-control-spec#aclappend>`__
    ~~~~~~~~~~~~~~ -
    Displays the element if the user has the specified right `acl:Control <https://github.com/solid/web-access-control-spec#aclcontrol>`__
    ``no-permission``
    ~~~~~~~~~~~~~~~~~
    Displays the element if the user has not the specified right
    Possible values:
    - `acl:Read <https://github.com/solid/web-access-control-spec#aclread>`__
    - `acl:Write <https://github.com/solid/web-access-control-spec#aclwrite>`__
    - `acl:Append <https://github.com/solid/web-access-control-spec#aclappend>`__
    - `acl:Control <https://github.com/solid/web-access-control-spec#aclcontrol>`__
    source/import_documentation/Components/SiB-Delete.rst
    + 9
    − 18
    View file @ e428023e
    solid-delete sib-delete
    ============ ===========
    Receives the URL of a resource or of a container of resources via its Receives the URL of a resource or of a container of resources via its
    ``data-src`` attribute, and displays a button to delete it when clicked. ``data-src`` attribute, and displays a button to delete it when clicked.
    .. code:: html .. code:: html
    <solid-delete data-src="http://localhost:8000/conversations/9/"></solid-delete> <sib-delete data-src="http://localhost:8000/conversations/9/"></sib-delete>
    Attributes **Attributes:**
    ----------
    ``data-src`` - **``data-src``**: The uri of the LDP resource you want to delete.
    ~~~~~~~~~~~~ - **``data-label``**: The text to display on the delete button.
    The uri of the LDP resource you want to delete.
    ``data-label`` **Events:**
    ~~~~~~~~~~~~~~
    The text to display on the delete button.
    - **``resourceDeleted``**: triggered when the resource is successfully
    Events deleted.
    -------
    ``resourceDeleted``
    ~~~~~~~~~~~~~~~~~~~
    Triggered when the resource is successfully deleted.
    source/import_documentation/Components/SiB-Display.rst
    + 197
    − 34
    View file @ e428023e
    solid-display sib-display
    ============= ===========
    Receives the URL of a resource or of a container of resources via its Receives the URL of a resource or of a container of resources via its
    ``data-src`` attribute, and displays it. ``data-src`` attribute, and displays it.
    Each field of the displayed Each field of the displayed
    resources can be rendered by a specific widget, either custom or chosen resources can be rendered by a specific widget, either custom or chosen
    ...@@ -11,54 +11,217 @@ added to interact with the list of data being displayed. ...@@ -11,54 +11,217 @@ added to interact with the list of data being displayed.
    .. code:: html .. code:: html
    <solid-display <!--head-->
    <script type="module" src="https://unpkg.com/@startinblox/core@0.9"></script>
    <!--body-->
    <sib-display
    data-src="https://api.startinblox.com/users/" data-src="https://api.startinblox.com/users/"
    fields="first_name, last_name" fields="first_name, last_name"
    ></solid-display> ></sib-display>
    Mixins Attributes
    ------ ----------
    This component uses the following mixins: data-src
    ~~~~~~~~
    The uri of the LDP resource you want to display.
    If this resource is a container, ``<sib-display>`` will create a child
    ``<sib-display>`` for each resource it contains, and ``<sib-form>``
    will display a blank form with appropriate fields to create a new
    resource.
    - `counter-mixin <counter-mixin>`__ value-xyz
    - `federation-mixin <federation-mixin>`__ ~~~~~~~~
    - `filter-mixin <filter-mixin>`__ To display a string not contained within the data.
    - `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>`__
    Please check their documentation to know more about their capabilities. fields
    ~~~~~~~~
    The ordered list of fields to be displayed, separated
    by commas.
    By default, all the fields of the resource are displayed.
    Attributes To not show any fields, put an empty fields (eg.
    ---------- ``<sib-display fields />)``
    To group fields within a ``<div>`` tag that will have the ``name``
    attribute set up to ``xyz``, enclose some fields in parenthesis. For
    example: ``fields="xyz(first_name, last_name), email"``. You can
    customize the group widget, see the `sets widgets <#set-widgets>`__
    section below for more info.
    fields
    ~~~~~~
    By default, all displayed fields are direct children of By default, all displayed fields are direct children of
    ``<solid-display>``. Make sure you don’t give your set the same name as ``<sib-display>``. Make sure you don’t give your set the same name as
    a field as it would result in an infinite loop. a field as it would result in an infinite loop.
    widget-xyz
    ~~~~~~~~
    The widget to be used to display the ``xyz``
    field. By default, the widget used is ``<sib-display-div>``. Cf the
    `Display widgets <#display-widgets>`__ section below for more info.
    default-widget
    ~~~~~~~~~~~~~~~~
    The widget to use for all the fields, except if a specific one is defined for a field.
    multiple-xyz
    ~~~~~~~~~~~~~~~~
    Show field ``xyz`` as multiple field containing
    one widget for each child. Multiple widget can be specified, example:
    ``multiple-skills="my-custom-multiple-widget"``. If argument is used
    without value, default multiple widget is used. Cf the `Multiple
    widgets <#multiple-widgets>`__ section below for more info.
    each-label-xyz
    ++++++++++++++
    Used with ``multiple-xyz``, label of each
    child of multiple widget
    each-class-xyz
    ++++++++++++++
    Used with ``multiple-xyz``, class of each
    child of multiple widget
    each-range-xyz
    ++++++++++++++
    Used with ``multiple-xyz``, range value of
    each child of multiple widget
    multiple-xyz-add-label
    +++++++++++++
    Used with ``multiple-xyz``, text
    of the “+” button
    multiple-xyz-remove-label
    ++++++++++++++++++++++++++++
    Used with ``multiple-xyz``,
    text of the “×” button
    search-fields
    ~~~~~~~~~~~~~~~~
    It is possible to search/filter your list by
    choosing the fields you want to filter it with. To be able to filter
    my users by ``name`` for instance, I can set
    ``search-fields="name"``. This will display a form with the
    appropriate inputs to filter the list.
    - **``search-value-xyz``**: The default value of the search field
    ``xyz``
    - **``search-label-xyz``**: Set the label for the search field
    ``xyz``
    - **``search-widget-xyz``**: The form widget of the search field
    ``xyz``
    - **``search-range-xyz``**: The range of values of the search field
    ``xyz``
    paginate-by
    ~~~~~~~~~~~~~~~~
    The list can also be split in pages, for example
    set ``paginate-by="5"`` to display pages of 5 elements, the prev/next
    buttons and the counter will be added automatically
    order-by
    ~~~~~~~~~~~~~~~~
    The name of the field you want to use to order the
    list. For example, ``order-by="username"`` will order the users list
    alphabetically based on the username.
    highlight-xyz
    ~~~~~~~~~~~~~~~~
    The resources to put at the top of the list.
    For example, ``highlight-date="2019-05-20"`` will display first all
    the resources which have a field date equal to “2019-05-20”.
    group by
    ~~~~~~~~~~~~~~~~
    The resources will be grouped by the field you give
    as a parameter. For example, ``group-by="date"`` will render one
    ``<div>`` by date, and put the corresponding resources inside.
    next
    ~~~~~~~~~~~~~~~~
    ``name`` attribute of the ``<sib-route>`` that should
    be accessed when a ``<sib-display>`` element is clicked. See the
    documentation of ``<sib-router>`` for more details.
    action-xyz
    ~~~~~~~~~~~~~~~~
    label-xyz
    ~~~~~~~~~~~~~~~~
    Set the label for the field ``xyz``
    editable-xyz
    ~~~~~~~~~~~~~~~~
    Add an “edit” button next to the ``xyz`` field
    to let the user edit it. The changes are saved as soon as the field
    loses focus. The editable attribute works with the following widgets:
    ``sib-display-div``, ``sib-display-labelled-div``,
    ``sib-display-mailto`` and ``sib-display-tel``
    counter-template
    ~~~~~~~~~~~~~~~~
    To display the number of resources fetched
    by the ``sib-display``. It takes a string in which you can use HTML
    tags, and the ``counter`` variable to add the number.
    i.e. ``"<strong>${counter} results</strong>"``
    extra-context
    ~~~~~~~~~~~~~~~~
    The id of the ``<script>`` tag which contains
    the context you want to add for this component. An extra context
    looks like this:
    .. code:: html
    <script id="custom-context" type="application/ld+json">
    { "user": "https://api.test-paris.happy-dev.fr/users/" }
    </script>
    If your ``<script>`` tag has the attribute ``data-default-context``,
    this extra context will be applied on all the components which
    doesn’t have an ``extra-context`` attribute.
    loader-id
    ~~~~~~~~~~~~~~~~
    Id of the loader element you want to display
    during the loading time.
    class-xyz
    ~~~~~~~~~~~~~~~~
    Class attribute added to the fields ``xyz``.
    child-xyz child-xyz
    ~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~
    add attribute ``xyz`` to all children. add attribute ``xyz`` to all children.
    nested-field
    ~~~~~~~~~~~~~~~~
    Name of the field of the requested resource to
    display. Useful when the source url is auto-generated (for instance,
    with the attribute ``bind-resources``) but you need to display
    another field of this source.
    Widgets default-xyz
    ------- ~~~~~~~~~~~~~~~~
    By default, the widget used is ``<solid-display-div>``. Cf the Value displayed for field ``xyz`` when it’s
    `Display widgets <display-widgets>`__ page for more info. empty or not defined
    Events empty-widget
    ------- ~~~~~~~~~~~~~~~~
    Widget to display when there is no element in
    the container
    ``resourceSelect`` empty-value
    ~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~
    Triggered when an event is clicked on the calendar To display a value in the empty widget. It can
    be accessed in the widget like this: ``${value}``
    **API:** In Javascript, you have access to different variables and
    methods on a ``sib-display`` element: - ``sibDisplay.resource``: returns
    the Proxy of the current resource - ``sibDisplay.resource.clearCache()``
    (async): clears the cache of the store for this resource -
    ``sibDisplay.resourceId``: returns the id of the current resource
    source/import_documentation/Components/SiB-Form.rst
    + 13
    − 58
    View file @ e428023e
    solid-form sib-form
    ========== =========
    Receives the URL of a ressource via its ``data-src`` attribute, and 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 displays a form to edit the resource. If given the URL of a container of
    ...@@ -8,67 +8,22 @@ container. ...@@ -8,67 +8,22 @@ container.
    .. code:: html .. code:: html
    <solid-form data-src="http://localhost:8000/todos/"></solid-form> <sib-form data-src="http://localhost:8000/todos/"></sib-form>
    Mixins **Attributes:**
    ------
    This component uses the following mixins: - **``label-xyz``**: When displaying a form, the default labels are the
    fields names of the model. If you want something fancier, you can set
    - `store-mixin <store-mixin>`__ this attribute. i.e. ``label-username="Your name"``
    - `widget-mixin <widget-mixin>`__ - **``naked``**: When the attribute is set, the submit button will be
    Please check their documentation to know more about their capabilities.
    Attributes
    ----------
    ``label-xyz``
    ~~~~~~~~~~~~~
    When displaying a form, the default labels are the fields names of the model.
    If you want something fancier, you can set this attribute.
    i.e. ``label-username="Your name"``
    ``naked``
    ~~~~~~~~~
    When the attribute is set, the submit button will be
    removed. It’s particularly useful to prevent the nested forms to removed. It’s particularly useful to prevent the nested forms to
    display their own submit button. display their own submit button.
    - **``upload-url-xyz``**: URL to upload file for field ``xyz``, it
    ``upload-url-xyz`` automatically set ``widget-xyz`` to ``sib-form-file`` if net defined.
    ~~~~~~~~~~~~~~~~~~
    URL to upload file for field ``xyz``, it
    automatically set ``widget-xyz`` to ``solid-form-file`` if net defined.
    It’s particularly useful with a dropdown field. It’s particularly useful with a dropdown field.
    - **``submit-button``**: Text of the submit button of the form.
    ``submit-button`` - **``range-xyz``**: URL of a container which list the accepted values
    ~~~~~~~~~~~~~~~~~
    Text of the submit button of the form.
    ``range-xyz``
    ~~~~~~~~~~~~~
    URL of a container which list the accepted values
    for the field ``xyz``. It’s particularly useful with a dropdown for the field ``xyz``. It’s particularly useful with a dropdown
    field. field.
    - **``partial``**: Add this attribute when the form does not include
    ``partial``
    ~~~~~~~~~~~
    Add this attribute when the form does not include
    all the fields of the resource to update. all the fields of the resource to update.
    Widgets
    -------
    By default, the widget used is ``<solid-form-label-text>``. Cf the
    `Form widgets <form-widgets>`__ page for more info.
    Events
    -------
    ``formChange``
    ~~~~~~~~~~~~~~
    Triggered when the form values change
    ``save``
    ~~~~~~~~~~~~~~
    Triggered when the response of the submit has been received (successfull or not)
    source/import_documentation/Components/SiB-Map.rst
    + 6
    − 49
    View file @ e428023e
    solid-map sib-map
    ========= ========
    Receives the URL of a resource or of a container of resources via its Receives the URL of a resource or of a container of resources via its
    ``data-src`` attribute, and displays it on a **map**. Here is the list ``data-src`` attribute, and displays it on a **map**. Here is the list
    of fields needed to display the resources properly: of fields needed to display the resources properly:
    - ``http://www.w3.org/2003/01/geo/wgs84_pos#lat``: latitude on which the resource will be displayed - ``name``: name of the event displayed on the calendar
    - ``http://www.w3.org/2003/01/geo/wgs84_pos#lng``: longitude on which the resource will be displayed - ``lat``: latitude on which the resource will be displayed
    - ``lng``: longitude on which the resource will be displayed
    ``lat`` and ``lng`` properties are added to the default context to map Like for sib-display, filters and searching capabilities can be easily
    respectively ``http://www.w3.org/2003/01/geo/wgs84_pos#lat`` and ``http://www.w3.org/2003/01/geo/wgs84_pos#lng``.
    How to use
    ----------
    The ``solid-map`` module needs to be imported independantly from the core, like following:
    .. code:: html
    <script type="module" src="https://unpkg.com/@startinblox/core/dist/components/solid-map.js"></script>
    Mixins
    ------
    This component uses the following mixins:
    - `counter-mixin <counter-mixin>`__
    - `filter-mixin <filter-mixin>`__
    - `grouper-mixin <grouper-mixin>`__
    - `list-mixin <list-mixin>`__
    - `store-mixin <store-mixin>`__
    - `widget-mixin <widget-mixin>`__
    Please check their documentation to know more about their capabilities.
    Attributes
    ----------
    Like for ``solid-display``, fields can be displayed and filters or searching capabilities can be
    added to interact with the list of data being displayed. added to interact with the list of data being displayed.
    ``fields``
    ~~~~~~~~~~
    List of the fields to display in a popup which opens when a marker is clicked. If the attribute is not defined, no popup will show up.
    Events
    -------
    ``resourceSelect``
    ~~~~~~~~~~~~~~~~~~~
    Triggered when a marker is clicked on the map
    source/import_documentation/Components/SiB-Widget.rst
    + 111
    − 13
    View file @ e428023e
    solid-widget sib-widget
    ============ ===========
    Take a ``name`` as an attribute and a HTML template, and create an HTML Take a ``name`` as an attribute and a HTML template, and create an HTML
    custom element you can use as a widget. i.e. custom element you can use as a widget. i.e.
    ...@@ -7,28 +7,126 @@ custom element you can use as a widget. i.e. ...@@ -7,28 +7,126 @@ custom element you can use as a widget. i.e.
    .. code:: html .. code:: html
    <!-- Your custom widget to display a customer... --> <!-- Your custom widget to display a customer... -->
    <solid-widget name="my-custom-widget"> <sib-widget name="my-custom-widget">
    <template> <template>
    <h2>Customer name: ${value.name}</h2> <h2>Customer name: ${value.name}</h2>
    </template> </template>
    </solid-widget> </sib-widget>
    <!-- ... used in a solid-display --> <!-- ... used in a sib-display -->
    <solid-display <sib-display
    data-src="http://server/projects/" data-src="http://server/projects/"
    fields="name, customer" fields="name, customer"
    widget-customer="my-custom-widget" widget-customer="my-custom-widget"
    ></solid-display> ></sib-display>
    In a ``solid-widget``, you have access to these values: In a ``sib-widget``, you have access to these values:
    - ``id``: id of the displayed resource - **``id``**: id of the displayed resource
    - ``value``: all the values of the current resources - **``value``**: all the values of the current resources
    - ``name``: name of the current field - **``name``**: name of the current field
    - ``label``: if defined, label of the current field - **``label``**: if defined, label of the current field
    - ``range``: if defined, range of the current field - **``range``**: if defined, range of the current field
    .. ..
    NB: Do not forget to define your custom template in a ``<template>`` NB: Do not forget to define your custom template in a ``<template>``
    tag. Otherwise, your widget will not be declared properly. tag. Otherwise, your widget will not be declared properly.
    Widgets
    -------
    The following widgets are available:
    Display widgets
    ~~~~~~~~~~~~~~~
    - **``sib-display-value``** (default): Displays the value.
    - **``sib-display-div``**: Displays the ``value`` inside a ``<div>``
    HTML tag.
    - **``sib-display-labelled-div``**: Displays the ``value`` inside a
    ``<div>`` HTML tag, after the ``label`` contained in a ``<label>``
    HTML tag
    - **``sib-display-multiline``**:Displays the ``value`` inside a
    ``<div>``, ``\n`` are replaced by ``<br>``.
    - **``sib-display-labelled-boolean``**: Displays the ``label`` inside a
    ``<label>`` HTML tag if the ``value`` is true
    - **``sib-display-img``**: Inserts the ``value`` as the src attribute
    value of an ``<img>`` HTML tag.
    - **``sib-display-mailto``**: Displays a link inside a ``<a>`` HTML tag
    with a ``mailto:value`` as path. If a label is defined for this
    field, it’s displayed as the content of the link.
    - **``sib-display-tel``**: Displays a link inside a ``<a>`` HTML tag
    with a ``tel:value`` as path
    - **``sib-display-link``**: Displays a link inside a ``<a>`` HTML tag
    with the value as path, and the label as text content
    - **``sib-display-date``**: Displays a date in the browser’s default
    locale format
    - **``sib-display-date-time``**: Displays a date and a time in the
    browser’s default locale format
    Form widgets
    ~~~~~~~~~~~~
    - **``sib-form-label-text``**: Inserts an ``<input/>`` HTML tag of type
    “text”, in a ``<label>`` HTML tag.
    - **``sib-form-checkbox``**: Inserts an ``<input/>`` HTML tag of type
    “checkbox”, in a ``<label>`` HTML tag.
    - **``sib-form-date``**: Inserts an ``<input/>`` HTML tag of type
    “date”, in a ``<label>`` HTML tag.
    - **``sib-form-range-date``**:
    - **``sib-form-json``**: Inserts an ``<input/>`` HTML tag of type
    “text”, in a ``<label>`` HTML tag, and with its ``value`` converted
    from JSON to string
    - **``sib-form-placeholder-text``**: Inserts an ``<input/>`` HTML tag
    of type “text”, with the ``label`` as placeholder.
    - **``sib-form-textarea``**: Inserts an ``<textarea>`` HTML tag in a
    ``<label>`` HTML tag.
    - **``sib-form-dropdown``**: Inserts a ``<select>`` HTML tag to select
    a unique value from a list. The list is provided via the
    ``range-xyz``, which expects a container’s URL. **xyz** is the name
    of the field using the ``sib-form-dropdown`` widget.
    - **``sib-form-placeholder-dropdown``**: Inserts a ``<select>`` HTML
    tag to select a unique value from a list. It has no label but a
    default disabled value as a label
    - **``sib-form-auto-completion``**: Inserts a ``<input />`` HTML tag
    and load an autocomplete plugin. The list is provided via the
    ``range-xyz``, which expects a container’s URL. **xyz** is the name
    of the field using the ``sib-form-auto-completion`` widget.
    - **``sib-form-number``**: Inserts an ``<input/>`` HTML tag of type
    “number”, in a ``<label>`` HTML tag.
    - **``sib-form-range-number``**:
    - **``sib-form-file``**: Inserts an ``<input/>`` and an
    ``<input type="file"/>``. when a file is selected it’s uploaded, URL
    of file is returned by request and set as the ``<input/>`` value. The
    upload URL is provided via the ``upload-url`` attribute.
    - **``sib-form-hidden``**: Inserts an ``<input/>`` HTML tag of type
    “hidden”, in a ``<label>`` HTML tag.
    Multiple widgets
    ~~~~~~~~~~~~~~~~
    - **``sib-multiple``** (default for display): Inserts all the widgets
    in a ``<sib-multiple>`` tag.
    - **``sib-multiple-form``** (default for forms): Inserts all the
    widgets in a ``<sib-multiple-form>`` tag, with a “remove” button for
    each widget, and an “add” button.
    - **``sib-multiple-select``**: Inserts all the values as ``<option>``
    in a ``<select>`` tag with a ``multiple`` attribute.
    Set widgets
    ~~~~~~~~~~~
    - **``sib-set-default``** (default): Inserts content directly in the
    set tag.
    - **``sib-set-div``**: Inserts content in a ``<div/>`` HTML tag
    - **``sib-set-ul``**: Inserts content in a ``<ul/>`` HTML tag
    - **``sib-set-fieldset``**: Inserts content in a ``<fieldset/>`` HTML
    tag
    Actions widgets
    ~~~~~~~~~~~~~~~
    - **``sib-action``**: Displays a link inside a ``<sib-link>`` tag with
    ``src`` for the ``data-src`` attribute, ``value`` for the ``next``
    attribute and ``label`` as text content
    source/import_documentation/Components/Sib-Calendar.rst
    + 3
    − 20
    View file @ e428023e
    solid-calendar sib-calendar
    ============== ============
    Receives the URL of a resource or of a container of resources via its Receives the URL of a resource or of a container of resources via its
    ``data-src`` attribute, and displays it in a **calendar**. Here is the ``data-src`` attribute, and displays it in a **calendar**. Here is the
    ...@@ -8,22 +8,5 @@ list of fields needed to display the resources properly: ...@@ -8,22 +8,5 @@ list of fields needed to display the resources properly:
    - ``name``: name of the event displayed on the calendar - ``name``: name of the event displayed on the calendar
    - ``date``: date on which the resource will be displayed - ``date``: date on which the resource will be displayed
    Like for solid-display, filters and searching capabilities can be easily Like for sib-display, filters and searching capabilities can be easily
    added to interact with the list of data being displayed. added to interact with the list of data being displayed.
    Mixins
    ------
    This component uses the following mixins:
    - `list-mixin <list-mixin>`__
    - `store-mixin <store-mixin>`__
    Please check their documentation to know more about their capabilities.
    Events
    -------
    ``resourceSelect``
    ~~~~~~~~~~~~~~~~~~~
    Triggered when an event is clicked on the calendar
    source/import_documentation/Events.rst
    + 8
    − 8
    View file @ e428023e
    ...@@ -10,18 +10,18 @@ But for now, here are some events that will be useful to you. ...@@ -10,18 +10,18 @@ But for now, here are some events that will be useful to you.
    | vent | ameters | | | | vent | ameters | | |
    | name | | | | | name | | | |
    +======+=========+========================+===========================+ +======+=========+========================+===========================+
    | `` | `` | ``solid-display``, | The user clicks an child | | `` | `` | ``sib-display``, | The user clicks an child |
    | reso | {detail | ``solid-calendar``, | in the list, with the | | reso | {detail | ``sib-calendar``, | in the list, with the |
    | urce | :{resou | ``solid-map`` | resource as a detail of | | urce | :{resou | ``sib-map`` | resource as a detail of |
    | Sele | rce}}`` | | the event. | | Sele | rce}}`` | | the event. |
    | ct`` | | | | | ct`` | | | |
    +------+---------+------------------------+---------------------------+ +------+---------+------------------------+---------------------------+
    | ``po | `` | ``solid-display``, | The component got and | | ``po | `` | ``sib-display``, | The component got and |
    | pula | {detail | ``solid-form``, | displayed all its datas. | | pula | {detail | ``sib-form``, | displayed all its datas. |
    | te`` | :{resou | ``solid-calendar``, | | | te`` | :{resou | ``sib-calendar``, | |
    | | rce}}`` | ``solid-map`` | | | | rce}}`` | ``sib-map`` | |
    +------+---------+------------------------+---------------------------+ +------+---------+------------------------+---------------------------+
    | ``sa | `` | ``solid-form`` | The form has saved | | ``sa | `` | ``sib-form`` | The form has saved |
    | ve`` | {detail | | successfully. | | ve`` | {detail | | successfully. |
    | | :{resou | | | | | :{resou | | |
    | | rce}}`` | | | | | rce}}`` | | |
    ......
    source/import_documentation/Mixins/counter-mixin.rst deleted 100644 → 0
    + 0
    − 29
    View file @ a86f0fc0
    counter-mixin
    ==========
    The counter mixin is a post-processor mixin, compatible with list-mixin, which provides the ability to show the number of resources of a container.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    * `solid-map <SiB-Map>`__
    Attributes
    ----------
    ``counter-template``
    ~~~~~~~~~~~~~~~~
    Template used to show the number of resources.
    It takes a string in which you can use HTML
    tags, and the ``counter`` variable to add the number.
    .. code:: html
    <solid-display
    data-src="http://server/users/"
    fields="username"
    counter-template="<strong>${counter} users here</strong>"
    ></solid-display>
    source/import_documentation/Mixins/federation-mixin.rst deleted 100644 → 0
    + 0
    − 11
    View file @ a86f0fc0
    federation-mixin
    ================
    The federation mixin is a post-processor mixin, compatible with list-mixin.
    It provides the ability to fetch all the resources of multiple containers and show them in a single list.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    source/import_documentation/Mixins/filter-mixin.rst deleted 100644 → 0
    + 0
    − 41
    View file @ a86f0fc0
    filter-mixin
    ===============
    The filter mixin is a post-processor mixin, compatible with list-mixin.
    It provides the ability for the user to dynamically filter a list of resources.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    * `solid-map <SiB-Map>`__
    Attributes
    ----------
    ``search-fields``
    ~~~~~~~~~~~~~~~
    The properties you want to use to filter the list of resources.
    You can add multiple fields, separated by a comma.
    In this example, a ``solid-form`` with a ``username`` input and a ``email`` input
    is created. Each time the user types something in one input, the list is filtered.
    .. code:: html
    <solid-display
    data-src="http://server/users"
    fields="username, email, first_name, last_name"
    search-fields="username, email"
    ></solid-display>
    You can customize the generated ``solid-form`` by adding an attribute which starts by ``search-``.
    It will be automatically added to the ``solid-form``, without the prefix ``search-``.
    - ``search-value-[field]``: The default value of ``[field]``
    - ``search-label-[field]``: Set the label for ``[field]``
    - ``search-widget-[field]``: The form widget of ``[field]``
    - ``search-range-[field]``: The range of values of ``[field]``
    - ...
    \ No newline at end of file
    source/import_documentation/Mixins/grouper-mixin.rst deleted 100644 → 0
    + 0
    − 44
    View file @ a86f0fc0
    grouper-mixin
    ============
    The grouper mixin is a post-processor mixin, compatible with list-mixin.
    It provides the ability to group resources, depending of the values of one of their properties.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    * `solid-map <SiB-Map>`__
    Attributes
    ----------
    ``group-by``
    ~~~~~~~~~~~~
    The resources will be grouped by the field you give as a parameter.
    In this example, the mixin will render one
    ``<div>`` for each different date, and put the corresponding resources inside.
    .. code:: html
    <solid-display
    data-src=http://server/events/"
    fields="name, date"
    group-by="date"
    ></solid-display>
    When used with the pagination, each group is paginated.
    ``group-by-widget``
    ~~~~~~~~~~~~~~~~~~~
    *default: ``solid-group-div``*
    The name of the widget to use as a group widget.
    ``group-class``
    ~~~~~~~~~~~~~~~
    The name of the class to add on each group widget.
    \ No newline at end of file
    source/import_documentation/Mixins/highlighter-mixin.rst deleted 100644 → 0
    + 0
    − 29
    View file @ a86f0fc0
    highlighter-mixin
    ==========
    The highlighter mixin is a post-processor mixin, compatible with list-mixin.
    It provides the ability to put some resources at the top of the list, depending of the values of their properties.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    Attributes
    ----------
    ``highlight-[field]``
    ~~~~~~~~~~~~~~~~
    Put the resource at the top of the list if ``[field]`` is equal to the attribute value.
    In this example, all the users with a ``first_name`` equal to ``pierre`` will be at the beginning of the list.
    .. code:: html
    <solid-display
    data-src="http://server/users/"
    fields="first_name"
    highlight-first_name="pierre"
    ></solid-display>
    source/import_documentation/Mixins/list-mixin.rst deleted 100644 → 0
    + 0
    − 49
    View file @ a86f0fc0
    list-mixin
    ==========
    The list mixin provides the ability to display all resources of a container one by one.
    It can make transformations on the list by being combined with some post-processors mixins.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    * `solid-calendar <SiB-Calendar>`__
    * `solid-map <SiB-Map>`__
    Post-processors:
    --------
    * `counter-mixin <counter-mixin>`__
    Attributes
    ----------
    ``empty-widget``
    ~~~~~~~~~~~~~~~~
    Name of the widget to display when there is no element in the list.
    ``empty-value``
    ~~~~~~~~~~~~~~~
    Value to pass to the empty widget if the list is empty. It is accessible in ``${value}``
    For example, it can be a route name, which allow to put a link in the widget.
    .. code:: html
    <solid-display
    data-src="http://server/projects/"
    fields="name"
    empty-widget="no-project-widget"
    empty-value="add-project"
    ></solid-display>
    <solid-widget name="no-project-widget">
    <template>
    <small>No project yet in the list. <solid-link next="${value}">click here to add one</solid-link></small>
    </template>
    </solid-widget>
    source/import_documentation/Mixins/paginate-mixin.rst deleted 100644 → 0
    + 0
    − 46
    View file @ a86f0fc0
    paginate-mixin
    ===============
    The paginate mixin is a post-processor mixin, compatible with list-mixin.
    It provides the ability to paginate a list of resources.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    Attributes
    ----------
    ``paginate-by``
    ~~~~~~~~~~~~
    The list can be split in pages. The "previous" and "next"
    buttons and the pages counter will be added automatically.
    In this example, the list will show pages of 5 users.
    .. code:: html
    <solid-display
    data-src=http://server/users/"
    fields="username"
    paginate-by="5"
    ></solid-display>
    ``paginate-loop``
    ~~~~~~~~~~~~~~~~~~~
    If this attribute is present, when the user is on the last page, the "Next" button brings back to the first one.
    Also, when he is on the first page, the "Previous" button brings to the last page.
    Is is particularly useful for creating a carousel.
    .. code:: html
    <solid-display
    data-src=http://server/features/"
    fields="name, description"
    paginate-by="1"
    paginate-loop
    ></solid-display>
    \ No newline at end of file
    source/import_documentation/Mixins/sorter-mixin.rst deleted 100644 → 0
    + 0
    − 41
    View file @ a86f0fc0
    sorter-mixin
    ============
    The sorter mixin is a post-processor mixin, compatible with list-mixin.
    It provides the ability to sort some resources, depending of the values of one of their properties.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    Attributes
    ----------
    ``order-by``
    ~~~~~~~~~~~~
    The name of the field you want to use to order the list.
    In this example, the users list will be ordered
    alphabetically based on the username.
    .. code:: html
    <solid-display
    data-src="http://server/users/"
    fields="username"
    order-by="username"
    ></solid-display>
    ``order-by-random``
    ~~~~~~~~~~~~~~~~~~~
    If the attribute is present, the list will be shuffled before being displayed
    .. code:: html
    <solid-display
    data-src="http://server/users/"
    fields="username"
    order-by-random
    ></solid-display>
    \ No newline at end of file
    source/import_documentation/Mixins/store-mixin.rst deleted 100644 → 0
    + 0
    − 75
    View file @ a86f0fc0
    store-mixin
    ==========
    The store mixin allows to fetch a resource or a container from an URI, and
    provides the data to the component.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    * `solid-form <SiB-Form>`__
    * `solid-map <SiB-Map>`__
    * `solid-calendar <SiB-Calendar>`__
    * `solid-ac-checker <SiB-Ac-Checker>`__
    Attributes
    ----------
    ``data-src``
    ~~~~~~~~~~~~
    The uri of the LDP resource you want to fetch and use in the component.
    Each time this attribute is changed, the data is fetched again.
    When the data has been successfuly fetched, the mixin ask the component to render.
    ``nested-field``
    ~~~~~~~~~~~~~~~~
    The name of the field of the requested resource to
    display. Useful when the source url is auto-generated (for instance,
    with the attribute ``bind-resources``) but you need to display
    another field of this source.
    ``extra-context``
    ~~~~~~~~~~~~~~~~~
    The id of the ``<script>`` tag which contains
    the context you want to add for this component. An extra context
    looks like this:
    .. code:: html
    <script id="custom-context" type="application/ld+json">
    { "user": "https://api.test-paris.happy-dev.fr/users/" }
    </script>
    If your ``<script>`` tag has the attribute ``data-default-context``,
    this extra context will be applied on all the components which
    doesn’t have an ``extra-context`` attribute.
    ``next``
    ~~~~~~~~
    ``name`` attribute of the ``<solid-route>`` that should
    be accessed when a ``<solid-display>`` element is clicked. See the
    documentation of ``<solid-router>`` for more details.
    ``loader-id``
    ~~~~~~~~~~~~~
    Id of the loader element you want to display during the loading time.
    Events
    ------
    ``populate``
    ~~~~~~~~~~~~
    Fired when the component has rendered.
    API
    ---
    - ``component.resource``: returns the Proxy of the current resource
    - ``component.resource.clearCache()`` (async): clears the cache of the store for this resource
    - ``component.resourceId``: returns the id of the current resource
    source/import_documentation/Mixins/widget-mixin.rst deleted 100644 → 0
    + 0
    − 127
    View file @ a86f0fc0
    widget-mixin
    ============
    The widget mixin allows to create a widget in the DOM for each properties of a resource, and set its value.
    Used by:
    --------
    * `solid-display <SiB-Display>`__
    * `solid-form <SiB-Form>`__
    * `solid-map <SiB-Map>`__
    Attributes
    ----------
    ``fields``
    ~~~~~~~~~~
    The ordered list of fields to be displayed, separated by commas.
    By default, all the fields of the resource are displayed.
    To not show any fields, put an empty fields (eg.
    ``<solid-display fields />)``
    By default, all displayed fields are inserted into a ``<div>``
    **Sets**
    To group fields within a ``<div>`` tag, enclose some fields in parenthesis.
    In this example, a ``<div name="fullName">`` will be created, and it will contain
    the widgets of the first name and the last name of the user.
    .. code:: html
    <solid-display
    data-src="http://server/users/1/"
    fields="fullName(first_name, last_name), email"
    ></solid-display>
    You can customize the group widget, see the `Sets widgets <other-widgets>`__
    page for more info.
    ``value-[field]``
    ~~~~~~~~~~~~~~~~~
    To display a string not contained within the data.
    .. code:: html
    <solid-display
    fields="title"
    value-title="My custom and static title"
    ></solid-display>
    ``default-[field]``
    ~~~~~~~~~~~~~~~~~~~
    Value displayed for ``[field]`` when it’s empty or not defined
    ``widget-[field]``
    ~~~~~~~~~~~~~~~~~~
    The widget to be used to display the ``[field]``
    default-widget
    ~~~~~~~~~~~~~~~~
    The widget to use for all the fields, except if a specific one is defined for a field.
    ``action-[field]``
    ~~~~~~~~~~~~~~~~~~
    ``label-[field]``
    ~~~~~~~~~~~~~~~~~
    Set the label for the ``[field]``
    ``placeholder-[field]``
    ~~~~~~~~~~~~~~~~~~~~~~~
    Set the placeholder for the ``[field]``
    ``class-[field]``
    ~~~~~~~~~~~~~~~~~
    Set the class applied to the widget of the ``[field]``
    ``editable-[field]``
    ~~~~~~~~~~~~~~~~~~~~
    *Does not work with ``solid-form``*
    Add an “edit” button next to the ``[field]`` to let the user edit it.
    The changes are saved as soon as the field loses focus.
    The editable attribute works with the following widgets:
    - ``solid-display-div``
    - ``solid-display-labelled-div``
    - ``solid-display-mailto``
    - ``solid-display-tel``
    ``multiple-[field]``
    ~~~~~~~~~~~~~~~~~~~~
    Show ``[field]`` as multiple field containing
    one widget for each child.
    Multiple widget can be specified, example:
    ``multiple-skills="my-custom-multiple-widget"``. If argument is used
    without value, default multiple widget is used. Cf the `Multiple
    widgets <multiple-widgets>`__ page below for more info.
    All attributes starting by ``each`` will be applied on each child,
    without the prefix ``each``.
    - ``each-label-[field]``: label of each child of multiple widget
    - ``each-class-[field]``: class of each child of multiple widget
    - ``each-range-[field]``: range value of each child of multiple widget
    - ``each-range-[field]``: range value of each child of multiple widget
    For ``solid-form`` only:
    ``multiple-[field]-add-label``
    ++++++++++++++++++++++++++++++
    Text of the “+” button used to add an element
    ``multiple-[field]-remove-label``
    +++++++++++++++++++++++++++++++++
    Text of the “x” button used to remove an element
    source/import_documentation/Store-doc.rst deleted 100644 → 0
    + 0
    − 114
    View file @ a86f0fc0
    Store documentation
    ====================
    The store is responsible for the communication between the framework and the servers. You may need to use some of its functions.
    To use the store in your application, make sure to import it from the root of sib-core (ie: `import { store } from 'https://unpkg.com/@startinblox/core';`).
    API Reference
    -------------
    `getData` (`async`)
    ^^^^^^^^^^^^^^^^^^^
    Fetch and cache the data for a resource
    **parameters**
    - `id: string`: uri of the resource
    - `context: object` (optional): used to expand the `id` and to access the resource predicates from a compact form
    **returns**
    - `resource: Proxy`
    `get`
    ^^^^^
    Synchronously returns a resource from the cache.
    **parameters**
    - `id: string`: uri of the resource
    **returns**
    - `resource: Proxy`: or `null` if the resource is not in cache
    `post` (`async`)
    ^^^^^^^^^^^^^^^^
    Send a POST request to create a resource in a container. When the request succeed, the resource is cleared from the cache, and the components showing it are notified.
    **parameters**
    - `resource: object`: values of the resource to create
    - `id: string`: uri of the container
    **returns**
    - `resourceId: string`: id of the created resource
    `put` (`async`)
    ^^^^^^^^^^^^^^^
    Send a PUT request to edit a resource. When the request succeed, the resource is cleared from the cache, and the components showing it are notified.
    **parameters**
    - `resource: object`: new values of the resource to edit
    - `id: string`: uri of the resource
    **returns**
    - `resourceId: string`: id of the edited resource
    `patch` (`async`)
    ^^^^^^^^^^^^^^^^^
    Send a PATCH request to edit a resource. When the request succeed, the resource is cleared from the cache, and the components showing it are notified.
    **parameters**
    - `resource: object`: new values of the resource to edit
    - `id: string`: uri of the resource
    **returns**
    - `resourceId: string`: id of the edited resource
    `delete` (`async`)
    ^^^^^^^^^^^^^^^^^^
    Send a DELETE request to delete a resource. When the request succeed, the resource is cleared from the cache, and the components showing it are notified.
    **parameters**
    - `id: string`: uri of the resource to delete
    - `context: object` (optional): used to expand the id if needed
    **returns**
    - `resourceId: string`: id of the deleted resource
    `subscribeTo`
    ^^^^^^^^^^^^^
    Make a resource listen another one. When a change is detected on a resource, all the resources which are listening are removed from the cache, and the component showing them are notified to re-render their content.
    **parameters**
    - `resourceToUpdate`: resource which needs to be updated when another one change
    - `resourceToListen`: resource on which listen for changes
    `clearCache`
    ^^^^^^^^^^^^
    Manually remove a resource from the cache
    **parameters**
    - `id`: uri of the resource to remove from the cache
    Store reactivity
    ----------------
    The store is reactive. It means that any change you make on a resource in your app will be reflected in the interface automatically.
    However, there are some limitations:
    - If you make some changes on a resource which is in a virtual container, other virtual containers including this resource may not be updated. (ie: POST on circles/1/members does not update users/admin/circles/)
    - If a resource a multi nested field is displayed in a component, it may not be updated. (ie: in a `sib-display`, I display `nestedResource.user.name` from `resource`, changing `user` will not update the display)
    \ No newline at end of file
    source/import_documentation/Widgets/display-widgets.rst deleted 100644 → 0
    + 0
    − 28
    View file @ a86f0fc0
    Display widgets
    ===============
    Startin'blox provides a list of default widgets to display content:
    - ``solid-display-value``: Displays the value.
    - ``solid-display-div``: Displays the ``value`` inside a ``<div>``
    HTML tag.
    - ``solid-display-labelled-div``: Displays the ``value`` inside a
    ``<div>`` HTML tag, after the ``label`` contained in a ``<label>``
    HTML tag
    - ``solid-display-multiline``:Displays the ``value`` inside a
    ``<div>``, ``\n`` are replaced by ``<br>``.
    - ``solid-display-labelled-boolean``: Displays the ``label`` inside a
    ``<label>`` HTML tag if the ``value`` is true
    - ``solid-display-img``: Inserts the ``value`` as the src attribute
    value of an ``<img>`` HTML tag.
    - ``solid-display-mailto``: Displays a link inside a ``<a>`` HTML tag
    with a ``mailto:value`` as path. If a label is defined for this
    field, it’s displayed as the content of the link.
    - ``solid-display-tel``: Displays a link inside a ``<a>`` HTML tag
    with a ``tel:value`` as path
    - ``solid-display-link``: Displays a link inside a ``<a>`` HTML tag
    with the value as path, and the label as text content
    - ``solid-display-date``: Displays a date in the browser’s default
    locale format
    - ``solid-display-date-time``: Displays a date and a time in the
    browser’s default locale format
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment