@supersoniks/concorde 4.8.0 → 4.9.1

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

@@ -0,0 +1,142 @@
+# Input
+
+<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
+  <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
+  Native attibutes list
+</sonic-button>
+
+## Label
+<sonic-code>
+  <template>
+  <sonic-input label="Label"></sonic-input>
+  </template>
+</sonic-code>
+
+## Placeholder
+<sonic-code>
+  <template>
+  <sonic-input placeholder="placeholder"></sonic-input>
+  </template>
+</sonic-code>
+
+## Value
+<sonic-code>
+  <template>
+  <sonic-input value="value"></sonic-input>
+  </template>
+</sonic-code>
+
+## Required
+<sonic-code>
+  <template>
+  <sonic-input required  type="email" placeholder="you@email.com" label="Feedback on blur"></sonic-input>
+  </template>
+</sonic-code>
+
+## Description
+<sonic-code>
+  <template>
+  <sonic-input description="Description goes here" ></sonic-input>
+  </template>
+</sonic-code>
+
+## Type
+<sonic-button size="2xs" type="info" target="_blank" href="https://www.w3schools.com/html/html_form_input_types.asp">Liste des types</sonic-button>
+
+<sonic-code>
+  <template>
+  <div class="grid gap-3">
+    <sonic-input type="text" label="Text">Text</sonic-input>
+    <sonic-input type="email" label="Email" placeholder="plop@kiki.com"></sonic-input>
+    <sonic-input type="password" label="Password"></sonic-input>
+    <sonic-input type="date" label="Date"></sonic-input>
+    <sonic-input type="number" label="Number"></sonic-input>
+    <sonic-input type="color" label="Color" value="#ffff00"></sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-3">
+    <sonic-input size="2xs" value="2xs"></sonic-input>
+    <sonic-input size="xs" value="xs"></sonic-input>
+    <sonic-input size="sm" value="sm"></sonic-input>
+    <sonic-input size="md" value="md"></sonic-input>
+    <sonic-input value="default"></sonic-input>
+    <sonic-input size="lg" value="lg"></sonic-input>
+    <sonic-input size="xl" value="xl"></sonic-input>
+    <sonic-input size="2xl" value="2xl"></sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## List
+<sonic-alert status="error" label="Non fonctionnel" class="mb-4"></sonic-alert>
+
+<sonic-code>
+  <template>
+  <sonic-input list="browsers"></sonic-input>
+  <datalist id="browsers">
+    <option value="Internet Explorer">
+    <option value="Firefox">
+    <option value="Google Chrome">
+    <option value="Opera">
+    <option value="Safari">
+  </datalist>
+  </template>
+</sonic-code>
+
+## Prefix & suffix
+
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-2 gap-3">
+    <sonic-input type="search" label="Search" placeholder="Search plane">
+      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+    </sonic-input>
+    <sonic-input type="number" label="Amount" placeholder="0">
+      <sonic-icon library="iconoir" name="euro" slot="suffix"></sonic-icon>
+    </sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## InlineContent
+
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-2 gap-3">
+    <sonic-input inlineContent type="search" label="Search icon in input" placeholder="Search plane">
+      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+    </sonic-input>
+    <sonic-input inlineContent type="number" label="Number of seats" placeholder="0">
+      <div slot="suffix" class="flex gap-2 items-center">
+        <sonic-badge type="danger" size="sm">4 max</sonic-badge>
+        <sonic-icon library="iconoir" name="euro" ></sonic-icon>
+      </div>
+    </sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+
+
+## Example of use — search + queue
+
+Filter with **`formDataProvider`** + **`name="contains"`** (mock API: substring on joke text). Caption and rows via Lit (`@subscribe`, `.items` on `sonic-queue`):
+
+<docs-lit-demo for="docs-joke-search-demo"></docs-lit-demo>
+
+
+<sonic-code>
+  <template>
+    <sonic-input type="search"  placeholder="Search plane" class="inline-block">
+    </sonic-input>
+    <sonic-button type="danger" label="Amount" placeholder="0">azdazd
+    </sonic-button>
+  </template>
+</sonic-code>
+
+<!-- <sonic-input type="password" inlineContent size="2xl"><span slot="suffix">PLOP</span></sonic-input> -->

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

@@ -0,0 +1,133 @@
+# 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).
+
+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.
+
+Here are some of the features of the input-autocomplete component:
+
+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).
+
+* 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.
+
+If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option. 
+
+
+
+## Simple Example
+
+In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.
+
+The template is used to render the list items of results.
+The list items are responsible for making a selection.
+
+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.
+
+
+<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> 
+

package/docs/src/core/components/ui/form/radio/radio.md

@@ -0,0 +1,57 @@
+# Radio
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-2" formDataProvider="radioSizeExemple">
+      <sonic-radio name="size" value="2xs" size="2xs">2xs radio</sonic-radio>
+      <sonic-radio name="size" value="xs" size="xs">xs radio</sonic-radio>
+      <sonic-radio name="size" value="sm" size="sm">sm radio</sonic-radio>
+      <sonic-radio name="size" value="default" >default radio</sonic-radio>
+      <sonic-radio name="size" value="lg" size="lg">lg radio</sonic-radio>
+      <sonic-radio name="size" value="xl" size="xl">xl radio</sonic-radio>
+      <sonic-radio name="size" value="2xl" size="2xl">2xl radio</sonic-radio>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-radio checked
+    >Already checked radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-radio disabled
+    >Disabled radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-radio disabled checked
+    >Disabled but already checked radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## radio with link
+<sonic-code>
+  <template>
+  <sonic-radio name="link" value="link">radio with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+
+## Example of use — blacklist + queue
+
+Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox) (`blacklistFlags` query param). Radio sends **one** flag at a time.
+
+<docs-lit-demo for="docs-joke-blacklist-radio-demo"></docs-lit-demo>

package/docs/src/core/components/ui/form/select/select.md

@@ -0,0 +1,71 @@
+# Select
+
+## Options
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select> 
+        <option value="">No Selection</option>
+        <option value="1">One</option>
+        <option value="2" selected>Two (set by "tag")</option>
+        <option value="3">Three</option>
+      </sonic-select>
+      <sonic-select options='[{"value":"", "wording":"Set options via \"attribute\""},
+              {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}
+              ]'> 
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select size="2xs"><option>2xs</option></sonic-select>
+      <sonic-select size="xs"><option>xs</option></sonic-select>
+      <sonic-select size="sm"><option>sm</option></sonic-select>
+      <sonic-select size="md"><option>md</option></sonic-select>
+      <sonic-select size="default"><option>default</option></sonic-select>
+      <sonic-select size="lg"><option>lg</option></sonic-select>
+      <sonic-select size="xl"><option>xl</option></sonic-select>
+      <sonic-select size="2xl"><option>2xl</option></sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+
+## Multiple
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select multiple> 
+        <option value="">Choose a number</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+
+## Disabled
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select disabled> 
+        <option value="">Choose a number</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+## Example of use — language filter + queue
+
+**`name="lang"`** is sent as `?lang=fr|en` to the [doc mock API](#docs/_misc/docs-mock-api.md/docs-mock-api) (`filterDocsJokes`). Same pattern as [Input](#core/components/ui/form/input/input.md/input) (`contains`):
+
+<docs-lit-demo for="docs-joke-lang-demo"></docs-lit-demo>

package/docs/src/core/components/ui/form/switch/switch.md

@@ -0,0 +1,57 @@
+# Switch
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-2" formDataProvider="switchSizeExemple">
+      <sonic-switch name="size2xs" value="2xs" size="2xs">2xs switch</sonic-switch>
+      <sonic-switch name="sizexs" value="xs" size="xs">xs switch</sonic-switch>
+      <sonic-switch name="sizesm" value="sm" size="sm">sm switch</sonic-switch>
+      <sonic-switch name="size" value="default" >default switch</sonic-switch>
+      <sonic-switch name="sizelg" value="lg" size="lg">lg switch</sonic-switch>
+      <sonic-switch name="sizexl" value="xl" size="xl">xl switch</sonic-switch>
+      <sonic-switch name="size2xl" value="2xl" size="2xl">2xl switch</sonic-switch>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-switch checked
+    >Already checked switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-switch disabled
+    >Disabled switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-switch disabled checked
+    >Disabled but already checked switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## switch with link
+<sonic-code>
+  <template>
+  <sonic-switch name="link" value="link">switch with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+
+## Example of use — blacklist + queue
+
+Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox); switches can enable several flags (comma-separated in the query).
+
+<docs-lit-demo for="docs-joke-blacklist-switch-demo"></docs-lit-demo>

package/docs/src/core/components/ui/form/textarea/textarea.md

@@ -0,0 +1,65 @@
+# Textarea
+
+<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
+  <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
+  Native attibutes list
+</sonic-button>
+
+
+## Label
+<sonic-code>
+  <template>
+  <sonic-textarea label="Label"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Placeholder
+<sonic-code>
+  <template>
+  <sonic-textarea placeholder="placeholder"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Value
+<sonic-code>
+  <template>
+  <sonic-textarea value="value"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Required
+<sonic-code>
+  <template>
+  <sonic-textarea required label="Feedback on blur" placeholder="required" ></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Rows
+<sonic-code>
+  <template>
+  <sonic-textarea rows="8"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Description
+<sonic-code>
+  <template>
+  <sonic-textarea  description="Description goes here" ></sonic-textarea>
+  </template>
+</sonic-code>
+
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-4">
+    <sonic-textarea size="2xs" value="2xs"></sonic-textarea>
+    <sonic-textarea size="xs" value="xs"></sonic-textarea>
+    <sonic-textarea size="sm" value="sm"></sonic-textarea>
+    <sonic-textarea value="md / default"></sonic-textarea>
+    <sonic-textarea size="lg" value="lg"></sonic-textarea>
+    <sonic-textarea size="xl" value="xl"></sonic-textarea>
+    <sonic-textarea size="2xl" value="2xl"></sonic-textarea>
+  </div>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/group/group.md

@@ -0,0 +1,75 @@
+# Group
+
+## Radio group
+<sonic-code>
+  <template>
+    <sonic-group formDataProvider="subscriptionData">
+      <sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
+      <sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
+      <sonic-button radio name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+## Button group
+<sonic-code>
+  <template>
+    <sonic-group>
+      <sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼Air France</sonic-button>
+      <sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
+      <sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+## Input actions prefix
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-3 gap-3">
+      <sonic-group>
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input placeholder="placeholder" ></sonic-input>
+      </sonic-group>
+      <sonic-group label="Label">
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input  ></sonic-input>
+      </sonic-group>
+      <sonic-group description="Description">
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input ></sonic-input>
+      </sonic-group>
+    </div>
+  </template>
+</sonic-code>
+
+## Input actions suffix
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-3 gap-3">
+      <sonic-group>
+        <sonic-input placeholder="placeholder" ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+      <sonic-group label="Label">
+        <sonic-input  ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+      <sonic-group description="Description">
+        <sonic-input ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+    </div>
+  </template>
+</sonic-code>