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

package/src/docs/docs.ts

@@ -13,18 +13,10 @@ import "./example/docs-users-list";
 import "./example/docs-user-two-scopes";
 import "./example/docs-joke-demos";
 import "./example/docs-queue-demos";
+import "./example/docs-input-autocomplete-demos";
 import "./example/docs-toggle-demos";
 import "./example/docs-list-demos";
 import "./example/docs-jsonata-demos";
-import "./example/docs-3d-demos";
-import "./example/docs-hugging-face-demos";
-import "./example/docs-shader-demos";
-import "./example/docs-webgpu-demo";
-import "./example/docs-visual-stack-demo";
-import "./example/docs-3d-shader-live-demo";
-import "./example/docs-3d-webgpu-live-demo";
-import "./example/docs-3d-post-depth-demo";
-import "./example/docs-harris-webgpu-demo";
 import "./example/docs-router-demos";
 import "./example/docs-submit-demos";
 import "./example/docs-api-config-demos";

package/src/docs/example/docs-input-autocomplete-demos.ts

@@ -0,0 +1,110 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { DOCS_MOCK_GEO_SERVICE } from "../mock-api/urls";
+
+import "../../core/components/ui/form/input-autocomplete/input-autocomplete";
+import "../../core/components/ui/menu/menu-item";
+
+type CommuneRow = { nom: string; code: string };
+
+/** Ligne suggestion : pas de radio/name (évite d'écrire dans le form au render). */
+const communeItem =
+  (valueKey: "nom" | "code") => (item: CommuneRow) =>
+    html`<sonic-menu-item
+      data-autocomplete-value=${item[valueKey]}
+      data-autocomplete-label=${item.nom}
+      >${item.nom}</sonic-menu-item
+    >`;
+
+@customElement("docs-input-autocomplete-basic-demo")
+export class DocsInputAutocompleteBasicDemo extends LitElement {
+  private items = communeItem("nom");
+
+  render() {
+    return html`
+      <sonic-input-autocomplete
+        class="w-64"
+        label="Ville"
+        formDataProvider="autoComplete-example-base"
+        name="nom"
+        placeholder="Paris, Lyon, Tours, ..."
+        serviceURL=${DOCS_MOCK_GEO_SERVICE}
+        dataProviderExpression="communes?limit=5"
+        .items=${this.items}
+      ></sonic-input-autocomplete>
+    `;
+  }
+}
+
+@customElement("docs-input-autocomplete-code-demo")
+export class DocsInputAutocompleteCodeDemo extends LitElement {
+  private items = communeItem("code");
+
+  render() {
+    return html`
+      <sonic-input-autocomplete
+        class="w-64"
+        label="Ville (code INSEE)"
+        formDataProvider="autoComplete-example"
+        name="code"
+        value="13055"
+        placeholder="Paris, Lyon, Tours, ..."
+        serviceURL=${DOCS_MOCK_GEO_SERVICE}
+        dataProviderExpression="communes?limit=5"
+        searchParameter="nom"
+        .items=${this.items}
+      ></sonic-input-autocomplete>
+    `;
+  }
+}
+
+@customElement("docs-input-autocomplete-select-demo")
+export class DocsInputAutocompleteSelectDemo extends LitElement {
+  private items = communeItem("code");
+
+  render() {
+    return html`
+      <sonic-input-autocomplete
+        select
+        class="w-64"
+        label="Ville (select)"
+        formDataProvider="autoComplete-example2"
+        name="code"
+        value="69123"
+        placeholder="Paris, Lyon, Tours, ..."
+        serviceURL=${DOCS_MOCK_GEO_SERVICE}
+        dataProviderExpression="communes?limit=5"
+        searchParameter="nom"
+        .items=${this.items}
+      ></sonic-input-autocomplete>
+    `;
+  }
+}
+
+@customElement("docs-input-autocomplete-keyboard-demo")
+export class DocsInputAutocompleteKeyboardDemo extends LitElement {
+  private items = (item: CommuneRow) =>
+    html`<sonic-menu-item
+      data-keyboard-nav="nav-autocomplete"
+      data-autocomplete-value=${item.nom}
+      data-autocomplete-label=${item.nom}
+      >${item.nom}</sonic-menu-item
+    >`;
+
+  render() {
+    return html`
+      <sonic-input-autocomplete
+        class="w-64"
+        label="Ville"
+        formDataProvider="autoComplete-example-keyboard"
+        name="nom"
+        data-keyboard-nav="nav-autocomplete"
+        placeholder="Paris, Lyon, Tours, ..."
+        serviceURL=${DOCS_MOCK_GEO_SERVICE}
+        dataProviderExpression="communes?limit=60"
+        minSearchLength="1"
+        .items=${this.items}
+      ></sonic-input-autocomplete>
+    `;
+  }
+}

package/src/docs/mock-api/router.ts

@@ -138,7 +138,23 @@ function geoCommunes(url: URL): GeoCommuneRow[] {
     parseInt(url.searchParams.get("limit") || "5", 10),
   );
   const offset = Math.max(0, parseInt(url.searchParams.get("offset") || "0", 10));
-  return DOCS_GEO_COMMUNES.slice(offset, offset + limit);
+  const needle = (
+    url.searchParams.get("nom") ||
+    url.searchParams.get("text") ||
+    url.searchParams.get("q") ||
+    url.searchParams.get("code") ||
+    ""
+  )
+    .trim()
+    .toLowerCase();
+  const rows = needle
+    ? DOCS_GEO_COMMUNES.filter(
+        (row) =>
+          row.nom.toLowerCase().includes(needle) ||
+          row.code.toLowerCase().includes(needle),
+      )
+    : DOCS_GEO_COMMUNES;
+  return rows.slice(offset, offset + limit);
 }
 
 /**

package/src/docs/navigation/navigation.ts

@@ -207,33 +207,12 @@ export class DocsNavigation extends LitElement {
       href: "#docs/_misc/html-integration.md/html-integration",
     },
     {
-      label: "Local API demos",
-      href: "#docs/_misc/docs-mock-api.md/docs-mock-api",
-    },
-    "Addons (opt-in)",
-    {
-      label: "CDN addons",
-      href: "#docs/_getting-started/cdn-addons.md/cdn-addons",
-    },
-    {
-      label: "3D",
-      href: "#core/components/functional/3d/3d.md/3d",
-    },
-    {
-      label: "Hugging Face infer",
-      href: "#core/components/functional/infer/hugging-face/hugging-face-infer.md/hugging-face-infer",
-    },
-    {
-      label: "Shader",
-      href: "#core/components/functional/shader/shader.md/shader",
+      label: "FormElement / Subscriber removal",
+      href: "#docs/_misc/formelement-subscriber-removal.md/formelement-subscriber-removal",
     },
     {
-      label: "WebGPU",
-      href: "#core/components/functional/webgpu/webgpu.md/webgpu",
-    },
-    {
-      label: "Visual stack",
-      href: "#docs/_misc/visual-stack.md/visual-stack",
+      label: "Local API demos",
+      href: "#docs/_misc/docs-mock-api.md/docs-mock-api",
     },
     "Legacy",
     {