@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1

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

@@ -1,110 +0,0 @@
-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/example/docs-joke-demos.ts

@@ -1,297 +0,0 @@
-import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import {
-  ancestorAttribute,
-  subscribe,
-} from "@supersoniks/concorde/core/decorators/Subscriber";
-import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
-import { DOCS_MOCK_JOKES_SERVICE } from "../mock-api/urls";
-import {
-  docsJokeCheckboxFilterKey,
-  docsJokeInputFilterKey,
-  docsJokeRadioFilterKey,
-  docsJokeSelectFilterKey,
-  docsJokeSwitchFilterKey,
-} from "./docs-provider-keys";
-import { tailwind } from "../tailwind";
-
-import "../../core/components/functional/queue/queue";
-import "../../core/components/ui/form/input/input";
-import "../../core/components/ui/form/select/select";
-import "../../core/components/ui/form/checkbox/checkbox";
-import "../../core/components/ui/form/radio/radio";
-import "../../core/components/ui/form/switch/switch";
-
-type JokeRow = {
-  joke: string;
-  setup?: string;
-  delivery?: string;
-};
-
-const jokeRowKey = new DataProviderKey<
-  JokeRow,
-  { dataProvider: string | null }
->("${dataProvider}");
-
-const filterFieldKey = new DataProviderKey<
-  string,
-  { filterProvider: string; field: string }
->("${filterProvider}.${field}");
-
-@customElement("docs-joke-item")
-export class DocsJokeItem extends LitElement {
-  static styles = [tailwind];
-
-  @ancestorAttribute("dataProvider")
-  dataProvider: string | null = null;
-
-  @subscribe(jokeRowKey)
-  @state()
-  row: JokeRow | null = null;
-
-  render() {
-    const r = this.row;
-    if (!r) return nothing;
-    return html`
-      <div
-        class="space-y-1 border-0 border-b border-dotted border-neutral-300 py-3"
-      >
-        <div>${r.joke}</div>
-        ${r.setup
-          ? html`<div class="text-sm text-neutral-500">${r.setup}</div>`
-          : nothing}
-        ${r.delivery
-          ? html`<div class="text-sm text-neutral-500">${r.delivery}</div>`
-          : nothing}
-      </div>
-    `;
-  }
-}
-
-@customElement("docs-joke-filter-caption")
-export class DocsJokeFilterCaption extends LitElement {
-  @property() filterProvider = "";
-  @property() field = "";
-  @property() label = "";
-
-  @subscribe(filterFieldKey)
-  @state()
-  value = "";
-
-  render() {
-    return html`
-      <p class="my-4 block text-xl font-bold">
-        ${this.label} « <span class="text-info">${this.value || "…"}</span> » :
-      </p>
-    `;
-  }
-}
-
-@customElement("docs-joke-queue")
-export class DocsJokeQueue extends LitElement {
-  @property() filterProvider = "";
-  @property() expression = "joke/Any?amount=10&lang=fr";
-
-  private jokeItem = () => html`<docs-joke-item></docs-joke-item>`;
-
-  render() {
-    return html`
-      <sonic-queue
-        lazyload
-        dataProviderExpression=${this.expression}
-        dataFilterProvider=${this.filterProvider}
-        serviceURL=${DOCS_MOCK_JOKES_SERVICE}
-        key="jokes"
-        .items=${this.jokeItem}
-      ></sonic-queue>
-    `;
-  }
-}
-
-@customElement("docs-joke-search-demo")
-export class DocsJokeSearchDemo extends LitElement {
-  static styles = [tailwind];
-
-  render() {
-    return html`
-      <sonic-input
-        formDataProvider=${docsJokeInputFilterKey.path}
-        name="contains"
-        value="chien"
-        class="mb-4"
-      ></sonic-input>
-      <docs-joke-filter-caption
-        filterProvider=${docsJokeInputFilterKey.path}
-        field="contains"
-        label="Blagues trouvées pour"
-      ></docs-joke-filter-caption>
-      <docs-joke-queue
-        filterProvider=${docsJokeInputFilterKey.path}
-        expression="joke/Any?amount=10&lang=fr"
-      ></docs-joke-queue>
-    `;
-  }
-}
-
-@customElement("docs-joke-lang-demo")
-export class DocsJokeLangDemo extends LitElement {
-  static styles = [tailwind];
-
-  render() {
-    return html`
-      <sonic-select
-        formDataProvider=${docsJokeSelectFilterKey.path}
-        name="lang"
-        value="fr"
-      >
-        <option value="fr">fr</option>
-        <option value="en">en</option>
-      </sonic-select>
-      <docs-joke-filter-caption
-        filterProvider=${docsJokeSelectFilterKey.path}
-        field="lang"
-        label="Blagues pour la langue"
-      ></docs-joke-filter-caption>
-      <docs-joke-queue
-        filterProvider=${docsJokeSelectFilterKey.path}
-        expression="joke/Any?amount=10"
-      ></docs-joke-queue>
-    `;
-  }
-}
-
-const jokeQueueRow = (row: JokeRow) => html`
-  <div class="border-0 border-b border-neutral-300 py-3 leading-tight">
-    <div>${row.joke}</div>
-    ${row.setup ? html`<div class="font-bold">${row.setup}</div>` : nothing}
-    ${row.delivery ? html`<div>${row.delivery}</div>` : nothing}
-  </div>
-`;
-
-const BLACKLIST_CONTROLS = html`
-  <sonic-checkbox name="blacklistFlags" value="nsfw">nsfw</sonic-checkbox>
-  <sonic-checkbox name="blacklistFlags" value="religious">religious</sonic-checkbox>
-  <sonic-checkbox name="blacklistFlags" value="political">political</sonic-checkbox>
-  <sonic-checkbox name="blacklistFlags" value="racist" checked>racist</sonic-checkbox>
-  <sonic-checkbox name="blacklistFlags" value="sexist" checked>sexist</sonic-checkbox>
-  <sonic-checkbox name="blacklistFlags" value="explicit">explicit</sonic-checkbox>
-`;
-
-/** Checkbox — « Remove following jokes » (blacklistFlags → mock API). */
-@customElement("docs-joke-blacklist-demo")
-export class DocsJokeBlacklistDemo extends LitElement {
-  static styles = [tailwind];
-
-  private items = jokeQueueRow;
-
-  render() {
-    return html`
-      <p class="my-4 block text-xl font-bold">Remove following jokes :</p>
-      <div
-        formDataProvider=${docsJokeCheckboxFilterKey.path}
-        class="mb-3 grid grid-cols-2 gap-x-6 gap-y-2 lg:grid-cols-3"
-      >
-        ${BLACKLIST_CONTROLS}
-      </div>
-      <sonic-queue
-        lazyload
-        dataProviderExpression="joke/Any?offset=$offset&limit=$limit&lang=en"
-        dataFilterProvider=${docsJokeCheckboxFilterKey.path}
-        serviceURL=${DOCS_MOCK_JOKES_SERVICE}
-        key="jokes"
-        limit="5"
-        class="grid max-h-96 overflow-y-auto"
-        .items=${this.items}
-        debug
-      ></sonic-queue>
-    `;
-  }
-}
-
-/** Radio group — same API, single `blacklistFlags` value. */
-@customElement("docs-joke-blacklist-radio-demo")
-export class DocsJokeBlacklistRadioDemo extends LitElement {
-  static styles = [tailwind];
-
-  private items = jokeQueueRow;
-
-  render() {
-    return html`
-      <p class="my-4 block text-xl font-bold">Remove following jokes :</p>
-      <div
-        formDataProvider=${docsJokeRadioFilterKey.path}
-        class="mb-3 grid grid-cols-2 gap-x-6 gap-y-2 lg:grid-cols-3"
-      >
-        <sonic-radio name="blacklistFlags" value="nsfw">nsfw</sonic-radio>
-        <sonic-radio name="blacklistFlags" value="religious"
-          >religious</sonic-radio
-        >
-        <sonic-radio name="blacklistFlags" value="political"
-          >political</sonic-radio
-        >
-        <sonic-radio name="blacklistFlags" value="racist" checked
-          >racist</sonic-radio
-        >
-        <sonic-radio name="blacklistFlags" value="sexist">sexist</sonic-radio>
-        <sonic-radio name="blacklistFlags" value="explicit"
-          >explicit</sonic-radio
-        >
-      </div>
-      <sonic-queue
-        lazyload
-        dataProviderExpression="joke/Any?offset=$offset&limit=$limit&lang=en"
-        dataFilterProvider="jokeFilterRadio"
-        serviceURL=${DOCS_MOCK_JOKES_SERVICE}
-        key="jokes"
-        limit="5"
-        class="grid max-h-96 overflow-y-auto"
-        .items=${this.items}
-        debug
-      ></sonic-queue>
-    `;
-  }
-}
-
-/** Switch — same blacklist filter. */
-@customElement("docs-joke-blacklist-switch-demo")
-export class DocsJokeBlacklistSwitchDemo extends LitElement {
-  static styles = [tailwind];
-
-  private items = jokeQueueRow;
-
-  render() {
-    return html`
-      <p class="my-4 block text-xl font-bold">Remove following jokes :</p>
-      <div
-        formDataProvider=${docsJokeSwitchFilterKey.path}
-        class="mb-3 grid grid-cols-2 gap-x-6 gap-y-2 lg:grid-cols-3"
-      >
-        <sonic-switch name="blacklistFlags" value="nsfw">nsfw</sonic-switch>
-        <sonic-switch name="blacklistFlags" value="religious"
-          >religious</sonic-switch
-        >
-        <sonic-switch name="blacklistFlags" value="political"
-          >political</sonic-switch
-        >
-        <sonic-switch name="blacklistFlags" value="racist" checked
-          >racist</sonic-switch
-        >
-        <sonic-switch name="blacklistFlags" value="sexist">sexist</sonic-switch>
-        <sonic-switch name="blacklistFlags" value="explicit"
-          >explicit</sonic-switch
-        >
-      </div>
-      <sonic-queue
-        lazyload
-        dataProviderExpression="joke/Any?offset=$offset&limit=$limit&lang=en"
-        dataFilterProvider=${docsJokeSwitchFilterKey.path}
-        serviceURL=${DOCS_MOCK_JOKES_SERVICE}
-        key="jokes"
-        limit="5"
-        class="grid max-h-96 overflow-y-auto"
-        .items=${this.items}
-        debug
-      ></sonic-queue>
-    `;
-  }
-}