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