minusculas

2026-04-22 08:27:59 +02:00
parent 65d78ca215
commit 5a5f593025
63 changed files with 610 additions and 748 deletions
--- a/docs/components/autocomplete.md
+++ b/docs/components/autocomplete.md
@@ -8,24 +8,24 @@ Searchable dropdown with autocomplete functionality, keyboard navigation, and re

 ## Props

-| Prop | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `class` | `string` | `''` | Additional CSS classes for the container |
-| `items` | `Array<string \| {value: string, label: string}> \| Signal` | `[]` | Items to search from |
-| `value` | `string \| Signal<string>` | `''` | Selected value (reactive) |
-| `onselect` | `function(item)` | `-` | Called when an option is selected |
-| `label` | `string` | `-` | Label text for the input |
-| `placeholder` | `string` | `'Search...'` | Placeholder text |
+| Prop          | Type                                                        | Default       | Description                              |
+| :------------ | :---------------------------------------------------------- | :------------ | :--------------------------------------- |
+| `class`       | `string`                                                    | `''`          | Additional CSS classes for the container |
+| `items`       | `Array<string \| {value: string, label: string}> \| Signal` | `[]`          | Items to search from                     |
+| `value`       | `string \| Signal<string>`                                  | `''`          | Selected value (reactive)                |
+| `onselect`    | `function(item)`                                            | `-`           | Called when an option is selected        |
+| `label`       | `string`                                                    | `-`           | Label text for the input                 |
+| `placeholder` | `string`                                                    | `'Buscar...'` | Placeholder text                         |

 ## Styling

 Autocomplete wraps a **daisyUI Input component** internally. All Input styling classes work:

-| Category | Keywords | Description |
-| :--- | :--- | :--- |
-| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
-| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
-| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
+| Category | Keywords                                                                                                                         | Description           |
+| :------- | :------------------------------------------------------------------------------------------------------------------------------- | :-------------------- |
+| Color    | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants  |
+| Size     | `input-xs`, `input-sm`, `input-md`, `input-lg`                                                                                   | Input scale           |
+| Style    | `input-bordered` (default), `input-ghost`                                                                                        | Visual style variants |

 > For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.

@@ -36,22 +36,33 @@ Autocomplete wraps a **daisyUI Input component** internally. All Input styling c
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
-    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Autocomplete, Mount } = window;
+
 const BasicDemo = () => {
-  const selected = $('');
-  const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
-  
+  const selected = $("");
+  const fruits = [
+    "Apple",
+    "Banana",
+    "Orange",
+    "Grape",
+    "Strawberry",
+    "Mango",
+    "Pineapple",
+    "Watermelon",
+  ];
+
  return Autocomplete({
    items: fruits,
    value: selected,
-    onselect: (value) => selected(value)
+    onselect: (value) => selected(value),
  });
 };
-Mount(BasicDemo, '#demo-basic');
+Mount(BasicDemo, "#demo-basic");
 ```

 ### With Objects
@@ -59,42 +70,46 @@ Mount(BasicDemo, '#demo-basic');
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
-    <div id="demo-objects" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+    <div id="demo-objects" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Autocomplete, Div, Mount } = window;
+
 const ObjectsDemo = () => {
-  const selected = $('');
-  const selectedLabel = $('');
-  
+  const selected = $("");
+  const selectedLabel = $("");
+
  const countries = [
-    { value: 'mx', label: 'Mexico' },
-    { value: 'us', label: 'United States' },
-    { value: 'ca', label: 'Canada' },
-    { value: 'br', label: 'Brazil' },
-    { value: 'ar', label: 'Argentina' },
-    { value: 'es', label: 'Spain' }
+    { value: "mx", label: "Mexico" },
+    { value: "us", label: "United States" },
+    { value: "ca", label: "Canada" },
+    { value: "br", label: "Brazil" },
+    { value: "ar", label: "Argentina" },
+    { value: "es", label: "Spain" },
  ];
-  
-  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+
+  return Div({ class: "flex flex-col gap-4 w-full" }, [
    Autocomplete({
      items: countries,
      value: selectedLabel,
      onselect: (item) => {
-        const selectedItem = typeof item === 'string' 
-          ? countries.find(c => c.label === item) 
-          : item;
-        selected(selectedItem?.value || '');
-        selectedLabel(selectedItem?.label || '');
-      }
+        const selectedItem =
+          typeof item === "string"
+            ? countries.find((c) => c.label === item)
+            : item;
+        selected(selectedItem?.value || "");
+        selectedLabel(selectedItem?.label || "");
+      },
    }),
-    Div({ class: 'alert alert-success' }, [
-      () => `Selected: ${selected()} - ${selectedLabel()}`
-    ])
+    Div(
+      { class: "alert alert-info mt-4" },
+      () => `Selected: ${selected()} - ${selectedLabel()}`,
+    ),
  ]);
 };
-Mount(ObjectsDemo, '#demo-objects');
+Mount(ObjectsDemo, "#demo-objects");
 ```

 ### With Reactive Display
@@ -102,30 +117,45 @@ Mount(ObjectsDemo, '#demo-objects');
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
-    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Autocomplete, Div, Mount } = window;
+
 const ReactiveDemo = () => {
-  const selected = $('');
-  
+  const selected = $("");
+
  const programmingLanguages = [
-    'JavaScript', 'Python', 'Java', 'C++', 'Ruby', 'Go', 'Rust', 'TypeScript', 'Swift', 'Kotlin'
+    "JavaScript",
+    "Python",
+    "Java",
+    "C++",
+    "Ruby",
+    "Go",
+    "Rust",
+    "TypeScript",
+    "Swift",
+    "Kotlin",
  ];
-  
-  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+
+  return Div({ class: "flex flex-col gap-4 w-full" }, [
    Autocomplete({
      items: programmingLanguages,
      value: selected,
-      onselect: (value) => selected(value)
+      onselect: (value) => selected(value),
    }),
-    () => selected() ? Div({ class: 'alert alert-info' }, [
-      `You selected: ${selected()}`
-    ]) : null
+    () =>
+      selected()
+        ? Div(
+            { class: "alert alert-success mt-4" },
+            `You selected: ${selected()}`,
+          )
+        : null,
  ]);
 };
-Mount(ReactiveDemo, '#demo-reactive');
+Mount(ReactiveDemo, "#demo-reactive");
 ```

 ### Dynamic Items
@@ -133,45 +163,63 @@ Mount(ReactiveDemo, '#demo-reactive');
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
-    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Autocomplete, Select, SelectItems, Div, Mount } = window;
+
 const DynamicDemo = () => {
-  const selected = $('');
-  const filterType = $('all');
-  
+  const selected = $("");
+  const filterType = $("all");
+
  const allItems = {
-    fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
-    vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
-    all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
+    fruits: ["Apple", "Banana", "Orange", "Mango"],
+    vegetables: ["Carrot", "Broccoli", "Spinach", "Potato"],
+    all: [
+      "Apple",
+      "Banana",
+      "Orange",
+      "Mango",
+      "Carrot",
+      "Broccoli",
+      "Spinach",
+      "Potato",
+    ],
  };
-  
-  return Div({ class: 'flex flex-col gap-4 w-full' }, [
-    Select({ 
-      class: 'select-bordered w-full',
-      value: filterType, 
-      onchange: (e) => filterType(e.target.value) 
-    }, [
-      Options({
-        items: [
-          { value: 'all', label: 'All items' },
-          { value: 'fruits', label: 'Fruits' },
-          { value: 'vegetables', label: 'Vegetables' }
-        ]
-      })
+
+  const options = [
+    { value: "all", label: "All items" },
+    { value: "fruits", label: "Fruits" },
+    { value: "vegetables", label: "Vegetables" },
+  ];
+
+  const handleFilterChange = (e) => {
+    filterType(e.target.value);
+    selected("");
+    setTimeout(() => selected(""), 300);
+  };
+
+  return Div({ class: "flex flex-col gap-4 w-full" }, [
+    Select(
+      {
+        class: "select select-bordered w-full",
+        value: filterType,
+        onchange: handleFilterChange,
+      },
+      SelectItems({ items: options }),
+    ),
+    Div({ key: () => filterType() }, [
+      Autocomplete({
+        items: () => allItems[filterType()],
+        value: selected,
+        onselect: (value) => selected(value),
+      }),
    ]),
-    
-    Autocomplete({
-      items: () => allItems[filterType()],
-      value: selected,
-      onselect: (value) => selected(value)
-    })
  ]);
 };
-
-Mount(DynamicDemo, '#demo-dynamic');
+Mount(DynamicDemo, "#demo-dynamic");
 ```

 ### All Variants
@@ -179,40 +227,50 @@ Mount(DynamicDemo, '#demo-dynamic');
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
-    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Autocomplete, Div, Mount } = window;
+
 const VariantsDemo = () => {
-  const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White'];
-  
-  return Div({ class: 'flex flex-col gap-4' }, [
-    Div({}, [
-      Autocomplete({
-        class: 'input-primary',
-        items: colors,
-        value: $(''),
-        placeholder: 'Search colors...'
-      })
-    ]),
-    Div({}, [
-      Autocomplete({
-        class: 'input-secondary',
-        items: colors,
-        value: $(''),
-        placeholder: 'Search colors...'
-      })
-    ]),
-    Div({}, [
-      Autocomplete({
-        class: 'input-ghost',
-        items: colors,
-        value: $(''),
-        placeholder: 'Search colors...'
-      })
-    ])
+  const colors = [
+    "Red",
+    "Blue",
+    "Green",
+    "Yellow",
+    "Purple",
+    "Orange",
+    "Pink",
+    "Brown",
+    "Black",
+    "White",
+  ];
+
+  return Div({ class: "flex flex-col gap-4" }, [
+    Div({ class: "font-bold" }, "Primary"),
+    Autocomplete({
+      class: "input-primary",
+      items: colors,
+      value: $(""),
+      placeholder: "Search colors...",
+    }),
+    Div({ class: "font-bold mt-2" }, "Secondary"),
+    Autocomplete({
+      class: "input-secondary",
+      items: colors,
+      value: $(""),
+      placeholder: "Search colors...",
+    }),
+    Div({ class: "font-bold mt-2" }, "Ghost"),
+    Autocomplete({
+      class: "input-ghost",
+      items: colors,
+      value: $(""),
+      placeholder: "Search colors...",
+    }),
  ]);
 };
-Mount(VariantsDemo, '#demo-variants');
-```
+Mount(VariantsDemo, "#demo-variants");
+```