@supersoniks/concorde 4.8.0 → 4.9.1

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

@@ -0,0 +1,455 @@
+# Table
+
+## Basic usage
+
+<sonic-code>
+  <template>
+    <sonic-table>
+      <sonic-tr>
+        <sonic-th>Id</sonic-th>
+        <sonic-th>Name</sonic-th>
+        <sonic-th>Email</sonic-th>
+      </sonic-tr>
+      <sonic-tr>
+        <sonic-td>1</sonic-td>
+        <sonic-td>George Bluth</sonic-td>
+        <sonic-td>george.bluth@reqres.in</sonic-td>
+      </sonic-tr>
+      <sonic-tr>
+        <sonic-td>2</sonic-td>
+        <sonic-td>Janet Weaver</sonic-td>
+        <sonic-td>janet.weaver@reqres.in</sonic-td>
+      </sonic-tr>
+      <sonic-tr>
+        <sonic-td>3</sonic-td>
+        <sonic-td>Emma Wong</sonic-td>
+        <sonic-td>emma.wong@reqres.in</sonic-td>
+      </sonic-tr>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## List / fetch
+
+<sonic-code>
+  <template>
+    <sonic-table>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Id</sonic-th>
+          <sonic-th>Name</sonic-th>
+          <sonic-th>Email</sonic-th>
+        </sonic-tr> 
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-list debug fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
+          <template>
+            <sonic-tr>
+              <sonic-td data-bind ::inner-html="$id"></sonic-td>
+              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
+              <sonic-td data-bind ::inner-html="$email"></sonic-td>
+            </sonic-tr>
+          </template>
+        <sonic-list>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Size
+
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-4 gap-3">
+      <sonic-table size="2xs" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">2xs</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="xs" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">xs</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="sm" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">sm</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="md" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">md</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">default</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="lg" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">lg</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="xl" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">xl</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="2xl" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">2xl</sonic-td></sonic-tr>
+      </sonic-table>
+    </div>
+  </template>
+</sonic-code>
+
+## Bordered
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Id</sonic-th>
+          <sonic-th>Name</sonic-th>
+          <sonic-th>Email</sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td>1</sonic-td>
+          <sonic-td>George Bluth</sonic-td>
+          <sonic-td>george.bluth@reqres.in</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>2</sonic-td>
+          <sonic-td>Janet Weaver</sonic-td>
+          <sonic-td>janet.weaver@reqres.in</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>3</sonic-td>
+          <sonic-td>Emma Wong</sonic-td>
+          <sonic-td>emma.wong@reqres.in</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## MaxHeight
+
+<sonic-code>
+  <template>
+    <sonic-table maxHeight="8rem">
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Id</sonic-th>
+          <sonic-th>Name</sonic-th>
+          <sonic-th>Email</sonic-th>
+        </sonic-tr> 
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-list  fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
+          <template>
+            <sonic-tr>
+              <sonic-td data-bind ::inner-html="$id"></sonic-td>
+              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
+              <sonic-td data-bind ::inner-html="$email"></sonic-td>
+            </sonic-tr>
+          </template>
+        <sonic-list>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Type
+
+Values available : primary, info, success, warning, danger
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+        <sonic-tr>
+          <sonic-th type="info">Attribute type set on</sonic-th>
+          <sonic-th type="info">sonic-th</sonic-th>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td type="danger">Attribute type set on</sonic-td>
+          <sonic-td type="danger">sonic-td</sonic-td>
+        </sonic-tr>
+        <sonic-tr type="success">
+          <sonic-td>Attribute type set on</sonic-td>
+          <sonic-td>sonic-tr</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Colspan / rowspan
+
+<sonic-code>
+  <template>
+    <sonic-table >
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td colspan="2" class="bg-info text-neutral-0">colspan : 2</sonic-td>
+          <sonic-td>cell</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>cell</sonic-td>
+          <sonic-td>cell</sonic-td>
+          <sonic-td rowspan="2" class="bg-success text-neutral-0">rowspan : 2</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>cell</sonic-td>
+          <sonic-td>cell</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Cell style attributes
+
+The following attributes will be used to set the style of the component :  
+- align
+- minWidth
+- maxWidth
+- width
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th width="7rem">align</sonic-th>
+          <sonic-th minWidth="20rem">minWidth</sonic-th>
+          <sonic-th>maxWidth</sonic-th>
+          <sonic-th>width</sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td align="left">Left</sonic-td>
+          <sonic-td>20rem</sonic-td>
+          <sonic-td>5rem</sonic-td>
+          <sonic-td>15rem</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td align="center">center</sonic-td>
+          <sonic-td>20rem</sonic-td>
+          <sonic-td maxWidth="5rem">5rem</sonic-td>
+          <sonic-td>15rem</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td align="right">right</sonic-td>
+          <sonic-td>20rem</sonic-td>
+          <sonic-td>5rem - Lorem ipsum dolor</sonic-td>
+          <sonic-td width="60rem">15rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sollicitudin mollis. Curabitur sit amet nibh diam. Vivamus a pharetra mauris.</sonic-td>
+        </sonic-tr>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+
+## Responsive
+
+Every table is responsive by default
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Id</sonic-th>
+          <sonic-th>Name</sonic-th>
+          <sonic-th>Email</sonic-th>
+          <sonic-th>Comment</sonic-th>
+        </sonic-tr> 
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
+          <template>
+            <sonic-tr>
+              <sonic-td data-bind ::inner-html="$id"></sonic-td>
+              <sonic-td minWidth="10rem" data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
+              <sonic-td data-bind ::inner-html="$email"></sonic-td>
+              <sonic-td minWidth="40rem">
+                hasellus suscipit vulputate lacus, in tempor turpis aliquam vel. Nunc eleifend, velit id ultrices elementum, ipsum felis porttitor dui, id laoreet diam nulla sed urna. 
+              </sonic-td>
+            </sonic-tr>
+          </template>
+        <sonic-list>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+
+## Sticky header
+
+<sonic-code>
+  <template>
+    <sonic-table bordered noCustomScroll>
+      <sonic-thead class="sticky top-16">
+        <sonic-tr>
+          <sonic-th minWidth="max(20ch,12rem)">Company</sonic-th>
+          <sonic-th type="success">Contact</sonic-th>
+          <sonic-th>Country</sonic-th>
+          <sonic-th align="center">Quantity</sonic-th>
+          <sonic-th align="right">Price</sonic-th>
+          <sonic-th></sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td>Alfreds Futterkiste</sonic-td>
+          <sonic-td>Maria Anders</sonic-td>
+          <sonic-td>Germany</sonic-td>
+          <sonic-td align="center">2</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Centro comercial Moctezuma</sonic-td>
+          <sonic-td
+            colspan="2"
+            align="center"
+            class="
+              text-center
+              text-neutral-400
+            "
+            >no information yet</sonic-td
+          >
+          <sonic-td align="center">3</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Ernst Handel</sonic-td>
+          <sonic-td>Roland Mendel</sonic-td>
+          <sonic-td>Austria</sonic-td>
+          <sonic-td align="center">4</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Island Trading</sonic-td>
+          <sonic-td>Helen Bennett</sonic-td>
+          <sonic-td>UK</sonic-td>
+          <sonic-td align="center">1</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr type="warning">
+          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
+          <sonic-td>Yoshi Tannamuri</sonic-td>
+          <sonic-td>Canada</sonic-td>
+          <sonic-td align="center">0</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
+          <sonic-td>Giovanni Rovelli</sonic-td>
+          <sonic-td type="danger">Italy</sonic-td>
+          <sonic-td align="center">20</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Alfreds Futterkiste</sonic-td>
+          <sonic-td>Maria Anders</sonic-td>
+          <sonic-td>Germany</sonic-td>
+          <sonic-td align="center">2</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Centro comercial Moctezuma</sonic-td>
+          <sonic-td
+            colspan="2"
+            align="center"
+            class="
+              text-center
+              text-neutral-400
+            "
+            >no information yet</sonic-td
+          >
+          <sonic-td align="center">3</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Ernst Handel</sonic-td>
+          <sonic-td>Roland Mendel</sonic-td>
+          <sonic-td>Austria</sonic-td>
+          <sonic-td align="center">4</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Island Trading</sonic-td>
+          <sonic-td>Helen Bennett</sonic-td>
+          <sonic-td>UK</sonic-td>
+          <sonic-td align="center">1</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr type="warning">
+          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
+          <sonic-td>Yoshi Tannamuri</sonic-td>
+          <sonic-td>Canada</sonic-td>
+          <sonic-td align="center">0</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
+          <sonic-td>Giovanni Rovelli</sonic-td>
+          <sonic-td>Italy</sonic-td>
+          <sonic-td align="center">20</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+      <sonic-caption>table caption</sonic-caption>
+    </sonic-table>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,166 @@
+# Toast
+
+## Utilisation de base
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Message de notification simple' })">
+      Afficher un toast
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Statut
+
+Les statuts disponibles sont : `success`, `error`, `warning`, `info` ou vide (par défaut).
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Message par défaut', status: '' })">
+        Default
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Opération réussie !', status: 'success' })">
+        Success
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Une erreur est survenue', status: 'error' })">
+        Error
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Attention à ce point', status: 'warning' })">
+        Warning
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Information importante', status: 'info' })">
+        Info
+      </sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Avec titre
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ title: 'Succès', text: 'Votre demande a été traitée avec succès.', status: 'success' })">
+        Toast avec titre
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ title: 'Test', text: 'Une erreur est survenue lors du traitement.', status: 'error' })">
+        Toast d'erreur avec titre
+      </sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Avec contenu HTML
+
+Le contenu du toast peut contenir du HTML.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Message avec <strong>HTML</strong> et un <a href=&quot;#&quot;>lien cliquable</a>', status: 'info' })">
+      Toast avec HTML
+    </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Persistance
+
+Par défaut, les toasts disparaissent automatiquement. Avec `preserve: true`, le toast reste affiché jusqu'à ce qu'il soit fermé manuellement.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Ce toast ne disparaîtra pas automatiquement', status: 'info', preserve: true })">
+      Toast persistant
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Masquer définitivement
+
+Avec `dismissForever: true` et un `id`, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ id: 'unique-toast-id', text: 'Ce toast peut être masqué définitivement', status: 'info', dismissForever: true })">
+      Toast avec dismiss forever
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Fantôme
+
+Avec `ghost: true`, le toast devient semi-transparent et non-interactif.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Toast fantôme (semi-transparent)', status: 'info', ghost: true })">
+      Toast ghost
+    </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Méthodes de suppression
+
+### Tout supprimer
+
+Supprime tous les toasts sauf ceux marqués comme `ghost`.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 1', status: 'info' })">Ajouter toast 1</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 2', status: 'success' })">Ajouter toast 2</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 3', status: 'warning' })">Ajouter toast 3</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeAll()">Supprimer tous</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+### Supprimer par statut
+
+Supprime tous les toasts d'un statut spécifique.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast success', status: 'success' })">Success</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast error', status: 'error' })">Error</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast warning', status: 'warning' })">Warning</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeItemsByStatus('success')">Supprimer success</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeItemsByStatus('error')">Supprimer error</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+### Supprimer les éléments temporaires
+
+Supprime tous les toasts qui ne sont pas marqués comme `preserve`.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast temporaire', status: 'info' })">Temporaire</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast persistant', status: 'success', preserve: true })">Persistant</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeTemporaryItems()">Supprimer temporaires</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Exemple complet
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ 
+      id: 'welcome-toast',
+      title: 'Bienvenue',
+      text: 'Bienvenue sur notre plateforme ! Vous pouvez commencer à explorer les fonctionnalités.',
+      status: 'success',
+      dismissForever: true
+    })">
+      Toast complet
+    </sonic-button>
+  </template>
+</sonic-code>
+