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

package/src/docs/components/docs-demo-sources.ts

@@ -96,6 +96,42 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
       { path: "src/docs/example/docs-queue-demos.ts", line: 38, label: "geo" },
     ],
   },
+  "docs-input-autocomplete-basic-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-input-autocomplete-demos.ts",
+        line: 11,
+        label: "basic",
+      },
+    ],
+  },
+  "docs-input-autocomplete-code-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-input-autocomplete-demos.ts",
+        line: 36,
+        label: "code",
+      },
+    ],
+  },
+  "docs-input-autocomplete-select-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-input-autocomplete-demos.ts",
+        line: 63,
+        label: "select",
+      },
+    ],
+  },
+  "docs-input-autocomplete-keyboard-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-input-autocomplete-demos.ts",
+        line: 91,
+        label: "keyboard",
+      },
+    ],
+  },
   "docs-users-list": {
     sources: [
       {
@@ -558,6 +594,30 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "docs-queue-geo-demo": [
     { path: "src/docs/example/docs-queue-demos.ts", label: "queue demos" },
   ],
+  "docs-input-autocomplete-basic-demo": [
+    {
+      path: "src/docs/example/docs-input-autocomplete-demos.ts",
+      label: "autocomplete demos",
+    },
+  ],
+  "docs-input-autocomplete-code-demo": [
+    {
+      path: "src/docs/example/docs-input-autocomplete-demos.ts",
+      label: "autocomplete demos",
+    },
+  ],
+  "docs-input-autocomplete-select-demo": [
+    {
+      path: "src/docs/example/docs-input-autocomplete-demos.ts",
+      label: "autocomplete demos",
+    },
+  ],
+  "docs-input-autocomplete-keyboard-demo": [
+    {
+      path: "src/docs/example/docs-input-autocomplete-demos.ts",
+      label: "autocomplete demos",
+    },
+  ],
   "docs-queue-users-demo": [
     { path: "src/docs/example/docs-queue-demos.ts", label: "queue demos" },
   ],

package/src/docs/docs.ts

@@ -13,6 +13,7 @@ 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";

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

@@ -206,6 +206,10 @@ export class DocsNavigation extends LitElement {
       label: "HTML integration",
       href: "#docs/_misc/html-integration.md/html-integration",
     },
+    {
+      label: "FormElement / Subscriber removal",
+      href: "#docs/_misc/formelement-subscriber-removal.md/formelement-subscriber-removal",
+    },
     {
       label: "Local API demos",
       href: "#docs/_misc/docs-mock-api.md/docs-mock-api",