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/alert.md
+++ b/docs/components/alert.md
@@ -10,36 +10,20 @@ Alert component for displaying contextual messages, notifications, and feedback

 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `type` | `string` | `'info'` | Alert type: `'info'`, `'success'`, `'warning'`, `'error'` |
-| `soft` | `boolean \| Signal<boolean>` | `true` | Use soft variant (subtle background) |
-| `actions` | `VNode \| function` | `-` | Optional action buttons or content |
-| `message` | `string \| VNode \| Signal` | `-` | Alert message content |
 | `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
-| `children` | `string \| VNode` | `-` | Alert content (alternative to `message`) |
+| `children` | `string \| VNode \| Array<VNode>` | Required | Alert content |

 ## Styling

 Alert supports all **daisyUI Alert classes**:

-| Category | Keywords | Description |
+| Category | Classes | Description |
 | :--- | :--- | :--- |
 | Color | `alert-info`, `alert-success`, `alert-warning`, `alert-error` | Alert type variants |
 | Style | `alert-soft` (default), `alert-solid` | Visual style variants |

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

-### Example
-
-```javascript
-Alert({ 
-  type: "success", 
-  soft: false,
-  class: "shadow-lg",
-  message: "Operation completed!"
-});
-// Applies: solid success alert with shadow
-```
-
 ## Live Examples

 ### Basic Alerts
@@ -47,17 +31,19 @@ Alert({
 <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 flex-col gap-3"></div>
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Alert, Div, Mount } = window;
+
 const BasicDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
-    Alert({ type: 'info', message: 'This is an informational message.' }),
-    Alert({ type: 'success', message: 'Operation completed successfully!' }),
-    Alert({ type: 'warning', message: 'Please review your input before proceeding.' }),
-    Alert({ type: 'error', message: 'An error occurred while processing your request.' })
+    Alert({ class: 'alert-info' }, 'This is an informational message.'),
+    Alert({ class: 'alert-success' }, 'Operation completed successfully!'),
+    Alert({ class: 'alert-warning' }, 'Please review your input before proceeding.'),
+    Alert({ class: 'alert-error' }, 'An error occurred while processing your request.')
  ]);
 };
 Mount(BasicDemo, '#demo-basic');
@@ -68,17 +54,19 @@ 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-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Alert, Div, Mount } = window;
+
 const VariantsDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
-    Alert({ type: 'info', soft: true, message: 'Soft info alert (default)' }),
-    Alert({ type: 'info', soft: false, message: 'Solid info alert' }),
-    Alert({ type: 'success', soft: true, message: 'Soft success alert' }),
-    Alert({ type: 'success', soft: false, message: 'Solid success alert' })
+    Alert({ class: 'alert-info alert-soft' }, 'Soft info alert'),
+    Alert({ class: 'alert-info alert-solid' }, 'Solid info alert'),
+    Alert({ class: 'alert-success alert-soft' }, 'Soft success alert'),
+    Alert({ class: 'alert-success alert-solid' }, 'Solid success alert')
  ]);
 };
 Mount(VariantsDemo, '#demo-variants');
@@ -89,11 +77,13 @@ Mount(VariantsDemo, '#demo-variants');
 <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-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+    <div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Alert, Button, Div, Mount, Toast } = window;
+
 const ActionsDemo = () => {
  const showUndo = $(false);
  const deletedItem = $(null);
@@ -119,15 +109,10 @@ const ActionsDemo = () => {
      Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document A') }, 'Delete Document A'),
      Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document B') }, 'Delete Document B')
    ]),
-    () => showUndo() ? Alert({
-      type: 'warning',
-      soft: true,
-      message: `Deleted: ${deletedItem()}`,
-      actions: Button({ 
-        class: 'btn btn-sm btn-primary',
-        onclick: undoDelete
-      }, 'Undo')
-    }) : null
+    () => showUndo() ? Alert({ class: 'alert-warning alert-soft flex justify-between items-center' }, [
+      Span({}, `Deleted: ${deletedItem()}`),
+      Button({ class: 'btn btn-sm btn-primary', onclick: undoDelete }, 'Undo')
+    ]) : null
  ]);
 };
 Mount(ActionsDemo, '#demo-actions');
@@ -138,27 +123,22 @@ Mount(ActionsDemo, '#demo-actions');
 <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-dismissible" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+    <div id="demo-dismissible" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Alert, Button, Div, Mount } = window;
+
 const DismissibleDemo = () => {
  const visible = $(true);
  
  return Div({ class: 'flex flex-col gap-3' }, [
-    () => visible() ? Alert({
-      type: 'info',
-      message: 'This alert can be dismissed. Click the X button to close.',
-      actions: Button({ 
-        class: 'btn btn-xs btn-circle btn-ghost',
-        onclick: () => visible(false)
-      }, '✕')
-    }) : null,
-    () => !visible() ? Button({ 
-      class: 'btn btn-sm btn-ghost',
-      onclick: () => visible(true)
-    }, 'Show Alert') : null
+    () => visible() ? Alert({ class: 'alert-info flex justify-between items-center' }, [
+      Span({}, 'This alert can be dismissed. Click the X button to close.'),
+      Button({ class: 'btn btn-xs btn-circle btn-ghost', onclick: () => visible(false) }, '✕')
+    ]) : null,
+    () => !visible() ? Button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null
  ]);
 };
 Mount(DismissibleDemo, '#demo-dismissible');
@@ -173,7 +153,9 @@ Mount(DismissibleDemo, '#demo-dismissible');
  </div>
 </div>

-```javascript
+```js
+const { Alert, Div, Input, Mount } = window;
+
 const ReactiveDemo = () => {
  const email = $('');
  const error = $('');
@@ -189,126 +171,37 @@ const ReactiveDemo = () => {
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Input({
-      label: 'Email Address',
+      class: 'input input-bordered',
      placeholder: 'Enter your email',
      value: email,
      oninput: (e) => validateEmail(e.target.value)
    }),
-    () => error() ? Alert({ type: 'error', message: error() }) : null,
-    () => email() && !error() ? Alert({ 
-      type: 'success', 
-      message: `Valid email: ${email()}` 
-    }) : null
+    () => error() ? Alert({ class: 'alert-error' }, error()) : null,
+    () => email() && !error() ? Alert({ class: 'alert-success' }, `Valid email: ${email()}`) : null
  ]);
 };
 Mount(ReactiveDemo, '#demo-reactive');
 ```

-### Form Validation
-
-<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
-  </div>
-</div>
-
-```javascript
-const FormDemo = () => {
-  const name = $('');
-  const email = $('');
-  const submitted = $(false);
-  const errors = $({ name: '', email: '' });
-  
-  const validate = () => {
-    const newErrors = {
-      name: name().trim() ? '' : 'Name is required',
-      email: email().trim() ? (email().includes('@') ? '' : 'Invalid email') : 'Email is required'
-    };
-    errors(newErrors);
-    return !newErrors.name && !newErrors.email;
-  };
-  
-  const handleSubmit = () => {
-    if (validate()) {
-      submitted(true);
-      setTimeout(() => submitted(false), 3000);
-      Toast('Form submitted successfully!', 'alert-success', 2000);
-    }
-  };
-  
-  return Div({ class: 'flex flex-col gap-4' }, [
-    Div({ class: 'text-lg font-bold' }, 'Contact Form'),
-    Input({
-      label: 'Name',
-      value: name,
-      error: () => errors().name,
-      oninput: (e) => {
-        name(e.target.value);
-        validate();
-      }
-    }),
-    Input({
-      label: 'Email',
-      value: email,
-      error: () => errors().email,
-      oninput: (e) => {
-        email(e.target.value);
-        validate();
-      }
-    }),
-    Button({ class: 'btn btn-primary', onclick: handleSubmit }, 'Submit'),
-    () => submitted() ? Alert({ 
-      type: 'success', 
-      message: 'Thank you! We will contact you soon.' 
-    }) : null,
-    () => (errors().name || errors().email) ? Alert({ 
-      type: 'error', 
-      message: 'Please fix the errors above before submitting.' 
-    }) : null
-  ]);
-};
-Mount(FormDemo, '#demo-form');
-```
-
-### Icon Alerts
-
-<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
-  </div>
-</div>
-
-```javascript
-const IconsDemo = () => {
-  return Div({ class: 'flex flex-col gap-3' }, [
-    Alert({ type: 'info', message: 'Information alert with custom icon' }),
-    Alert({ type: 'success', message: 'Success alert with custom icon' }),
-    Alert({ type: 'warning', message: 'Warning alert with custom icon' }),
-    Alert({ type: 'error', message: 'Error alert with custom icon' })
-  ]);
-};
-Mount(IconsDemo, '#demo-icons');
-```
-
 ### All Types

 <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-all" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
+    <div id="demo-all" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
 </div>

-```javascript
+```js
+const { Alert, Div, Mount } = window;
+
 const AllTypesDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
-    Alert({ type: 'info', message: 'ℹ️ This is an info alert' }),
-    Alert({ type: 'success', message: '✅ This is a success alert' }),
-    Alert({ type: 'warning', message: '⚠️ This is a warning alert' }),
-    Alert({ type: 'error', message: '❌ This is an error alert' })
+    Alert({ class: 'alert-info' }, 'ℹ️ This is an info alert'),
+    Alert({ class: 'alert-success' }, '✅ This is a success alert'),
+    Alert({ class: 'alert-warning' }, '⚠️ This is a warning alert'),
+    Alert({ class: 'alert-error' }, '❌ This is an error alert')
  ]);
 };
 Mount(AllTypesDemo, '#demo-all');
-```
+```