Concorde functional component — States. * It loops over its child templates and tests if the regexp contained in the *data-value* attribute matches the value of the property Doc ID: core/components/functional/states/states. Keywords: Concorde, supersoniks, core/components/functional/states/states, states, States, functional component, sonic-states, web component. URL: https://concorde.supersoniks.org/crawl/core/components/functional/states/states.html.

States

sonic-states displays different states depending on the value of a sub-property of its dataProvider (data-path attribute in dot notation):

• It loops over its child templates and tests if the regexp contained in the data-value attribute matches the value of the property
• If so, the content of the corresponding template is displayed as a state.
• If the attribute dataProviderExpression is provided the content is surrounded by a div:
• The "dataProvider" attribute of this div is the result of calling the replace function on the property value with the regexp and dataproviderExpression as parameters.
• The subscribers/fetch... of the template will refer to this dataProvider
• You can also use url-pattern expressions for the route parameters, see the examples
• Examples
• With ma.property= 2 :
• RegExp data-value = (\d+) and dataproviderExpression = /user/$1 the dataProvider attribute will be "/user/2"
• url-pattern data-value = :id and dataproviderExpression = /user/:id the dataProvider attribute will be "/user/2

Basic

<div class="flex gap-2 items-center" formDataProvider="states-basic-example">
      <sonic-button radio name="selection" value="#home" checked size="xs">Home</sonic-button>
      <sonic-button radio name="selection" value="#about" size="xs">About</sonic-button>
      <sonic-button radio name="selection" value="#work" size="xs">Work</sonic-button>
      <sonic-button radio name="selection" value="#contact" size="xs">Contact</sonic-button>
    </div>
    <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">
    <sonic-states dataProvider="states-basic-example" data-path="selection">
      <template data-value="#home">Home

Regexp

When using capturing groups () the stored values are accessible via the dataProviderExpression
e.g., data-value="#couleur_(\d+)" => dataProviderExpression="api/unknown/$1"

<div  serviceURL="/docs-mock-api">
      <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
        <template>
          <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">
            <span data-bind ::inner-html="ucFirst|$name"></span>
          </sonic-button>

Url-pattern

Same as RegExp but using url patterns
e.g., data-value="#couleur_:id" => dataProviderExpression="api/unknown/:id"

<div serviceURL="/docs-mock-api">
      <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
        <template>
          <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">
            <span data-bind ::inner-html="ucFirst|$name"></span>
          </sonic-button>