@supersoniks/concorde 4.9.98-visual-stack.1 → 4.9.98-visual-stack.3

package/docs/llms-full.txt

@@ -1435,55 +1435,29 @@ Form-layout
 
 - URL: https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html
 - Doc ID: core/components/ui/form/input-autocomplete/input-autocomplete
-- Keywords: Concorde, supersoniks, core/components/ui/form/input-autocomplete/input-autocomplete, input-autocomplete, Input-autocomplete, UI component, form, sonic-input-autocomplete, web component, items, docs-queue-geo-demo, src/docs/example/docs-queue-demos.ts, searchParam, name, value
+- Keywords: Concorde, supersoniks, core/components/ui/form/input-autocomplete/input-autocomplete, input-autocomplete, Input-autocomplete, UI component, form, sonic-input-autocomplete, web component, formDataProvider, name, .items, serviceURL="/docs-mock-api/geo/", nom, code, value, data-keyboard-nav
 
 Input-autocomplete
 
-The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form input and as a queue.
+Champ formulaire + suggestions via queue. Valeur via formDataProvider + name ; la recherche filtre la queue (store interne).
 
-Please note that only basic text input params and methods are implemented at this time. You should also be sure to understand the behavior of a queue in order to take full advantage of the input-autocomplete component.
+Rendu des lignes : propriété .items (callback Lit) — voir les démos ci-dessous. Mock : serviceURL="/docs-mock-api/geo/".
 
-Here are some of the features of the input-autocomplete component:
+Simple
 
-Doc examples below use HTML binding on suggestion rows. The Lit equivalent uses an items callback with the row object (see docs-queue-geo-demo in src/docs/example/docs-queue-demos.ts). Embedding without Lit: HTML integration.
+name = paramètre de recherche = valeur formulaire.
 
- It provides a suggest behavior, where the user can type a few letters and the component will suggest possible matches.
- It can be used with a variety of data providers, such as an API.
- It is fully customizable, so you can change the look and feel of the component to match your needs.
+Valeur ≠ paramètre de recherche
 
-If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option.
+Recherche sur nom, valeur formulaire = code. Préremplissage via value.
 
-Simple Example
+Mode select
 
-In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.
+À la fermeture du pop, seule une valeur de la liste (ou vide) est conservée.
 
-The template is used to render the list items of results.
-The list items are responsible for making a selection.
+Navigation clavier
 
-This time, we added buttons with the same name as the input while keeping the same data provider.
-The result is that when you select an item, the input takes the value of the selected item, completing the classic suggest behavior.
-
-Value different from search parameter
-
-In this example, the search parameter is separated from the name of the input. This means that the input will use the name "nom" as the search parameter, but the form data provider will be filled with the data named "siren" from the selected list item.
-
-To do this, we need to use the searchParam attribute on the input element. This attribute specifies the name of the search parameter that will be used.
-
-We also need to use the name and value attribute on the list items. This attribute specifies the value of the data provider that will be used for the selected list item.
-
-By using these attributes, we can separate the search parameter from the name of the input and still fill the form data provider with the data from the selected list item.
-
-Select autocomplete / value different from search parameter
-
-This example is the same as the previous one, except that the select attribute is used. This attribute changes the look and feel of the component slightly.
-
-Now the text is less free because, you must select either something from the list given by the service, or nothing else.
-
-The following code shows how to use the select attribute in an autocomplete input:
-
-keyboard navigation
-
-At the moment you can enable keyboard up/down by adding an attribut "data-keyboard-nav" on the component and its listItems
+data-keyboard-nav sur le champ et les items (flèches haut / bas).
 
 ---
 
@@ -5760,7 +5734,7 @@ rg -l 'formDataProvider' concorde/src | while read f; do rg -q 'dataProvider\s='
 
 Non-regression (Concorde docs)
 
-Smoke form demos: input, textarea, select, checkbox (incl. check-all), radio, switch, button form modes, input-autocomplete, queue + dataFilterProvider, submit, validation / sameValueAs.
+Smoke form demos: input, textarea, select, checkbox (incl. check-all), radio, switch, button form modes, queue + dataFilterProvider, submit, validation / sameValueAs, input-autocomplete.
 
 ---
 

package/docs/llms.txt

@@ -48,7 +48,7 @@ Custom
 - [Fieldset](https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html) (core/components/ui/form/fieldset/fieldset): Default
 - [Form-actions](https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html) (core/components/ui/form/form-actions/form-actions): Left seats
 - [Form-layout](https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html) (core/components/ui/form/form-layout/form-layout): autocomplete="email"
-- [Input-autocomplete](https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html) (core/components/ui/form/input-autocomplete/input-autocomplete): The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form input and as a queue.
+- [Input-autocomplete](https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html) (core/components/ui/form/input-autocomplete/input-autocomplete): Champ formulaire + suggestions via queue. Valeur via formDataProvider + name ; la recherche filtre la queue (store interne).
 - [Input](https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html) (core/components/ui/form/input/input): Native attibutes list
 - [Radio](https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.html) (core/components/ui/form/radio/radio): >Already checked radio
 - [Select](https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.html) (core/components/ui/form/select/select): {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}

package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md

@@ -1,133 +1,29 @@
 # Input-autocomplete
 
-The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form [input](#core/components/ui/form/input/input.md/input) and as a [queue](#core/components/functional/queue/queue.md/queue).
+Champ formulaire + suggestions via [queue](#core/components/functional/queue/queue.md/queue). Valeur via `formDataProvider` + `name` ; la recherche filtre la queue (store interne).
 
-Please note that only basic text input params and methods are implemented at this time. You should also be sure to understand the behavior of a [queue](#core/components/functional/queue/queue.md/queue) in order to take full advantage of the input-autocomplete component.
+Rendu des lignes : propriété **`.items`** (callback Lit) — voir les démos ci-dessous. Mock : `serviceURL="/docs-mock-api/geo/"`.
 
-Here are some of the features of the input-autocomplete component:
+## Simple
 
-Doc examples below use HTML binding on suggestion rows. The Lit equivalent uses an **`items`** callback with the row object (see `docs-queue-geo-demo` in `src/docs/example/docs-queue-demos.ts`). Embedding without Lit: [HTML integration](#docs/_misc/html-integration.md/html-integration).
+`name` = paramètre de recherche = valeur formulaire.
 
-* It provides a suggest behavior, where the user can type a few letters and the component will suggest possible matches.
-* It can be used with a variety of data providers, such as an API.
-* It is fully customizable, so you can change the look and feel of the component to match your needs.
+<docs-lit-demo for="docs-input-autocomplete-basic-demo"></docs-lit-demo>
 
-If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option. 
+## Valeur ≠ paramètre de recherche
 
+Recherche sur `nom`, valeur formulaire = `code`. Préremplissage via `value`.
 
+<docs-lit-demo for="docs-input-autocomplete-code-demo"></docs-lit-demo>
 
-## Simple Example
+## Mode select
 
-In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.
+À la fermeture du pop, seule une valeur de la liste (ou vide) est conservée.
 
-The template is used to render the list items of results.
-The list items are responsible for making a selection.
+<docs-lit-demo for="docs-input-autocomplete-select-demo"></docs-lit-demo>
 
-This time, we added buttons with the same name as the input while keeping the same data provider.
-The result is that when you select an item, the input takes the value of the selected item, completing the classic suggest behavior.
+## Navigation clavier
 
+`data-keyboard-nav` sur le champ et les items (flèches haut / bas).
 
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example-base" 
-    name="nom" 
-    propertyName="bloop"
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=5&boost=population"
-    >
-      <template>
-        <sonic-menu-item debug radio name="nom" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
-
-## Value different from search parameter
-
-In this example, the search parameter is separated from the name of the input. This means that the input will use the name "nom" as the search parameter, but the form data provider will be filled with the data named "siren" from the selected list item.
-
-To do this, we need to use the `searchParam` attribute on the input element. This attribute specifies the name of the search parameter that will be used.
-
-We also need to use the `name` and `value` attribute on the list items. This attribute specifies the value of the data provider that will be used for the selected list item.
-
-By using these attributes, we can separate the search parameter from the name of the input and still fill the form data provider with the data from the selected list item.
-
-
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example" 
-    name="siren" 
-    value="212703771" 
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=5&boost=population"
-    searchParameter="nom" 
-    >
-      <template>
-        <sonic-menu-item debug  radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
-
-## Select autocomplete / value different from search parameter
-
-This example is the same as the previous one, except that the `select` attribute is used. This attribute changes the look and feel of the component slightly.
-
-Now the text is less free because, you must select either something from the list given by the service, or nothing else.
-
-The following code shows how to use the `select` attribute in an autocomplete input:
-
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    select
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example2" 
-    name="siren" 
-    value="212703771" 
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=5&boost=population"
-    searchParameter="nom" 
-    >
-      <template>
-        <sonic-menu-item debug radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
-## keyboard navigation
-
-At the moment you can enable keyboard up/down by adding an attribut "data-keyboard-nav" on the component and its listItems
-
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example-keyboard" 
-    name="nom" 
-    data-keyboard-nav="nav-autocomplete" 
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=60&boost=population"
-    >
-    <template>
-        <sonic-menu-item debug radio name="nom" data-keyboard-nav="nav-autocomplete" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
+<docs-lit-demo for="docs-input-autocomplete-keyboard-demo"></docs-lit-demo>

package/docs/src/docs/_misc/formelement-subscriber-removal.md

@@ -112,4 +112,4 @@ rg -l 'formDataProvider' concorde/src | while read f; do rg -q 'dataProvider\s*=
 
 ## Non-regression (Concorde docs)
 
-Smoke form demos: input, textarea, select, checkbox (incl. check-all), radio, switch, button form modes, input-autocomplete, queue + `dataFilterProvider`, submit, validation / sameValueAs.
+Smoke form demos: input, textarea, select, checkbox (incl. check-all), radio, switch, button form modes, queue + `dataFilterProvider`, submit, validation / sameValueAs, input-autocomplete.