adapt new Input

2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -29,7 +29,7 @@ Tooltip supports all **daisyUI Tooltip classes**:

 ```javascript
 Tooltip({ tip: "This is a tooltip", class: "tooltip-primary" }, [
-  Button({ class: "btn" }, "Hover me")
+  button({ class: "btn" }, "Hover me")
 ]);
 ```

@@ -46,15 +46,15 @@ Tooltip({ tip: "This is a tooltip", class: "tooltip-primary" }, [

 ```javascript
 const BasicDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+  return div({ class: 'flex flex-wrap gap-4 justify-center' }, [
    Tooltip({ tip: 'This is a tooltip' }, [
-      Button({ class: 'btn btn-primary' }, 'Hover me')
+      button({ class: 'btn btn-primary' }, 'Hover me')
    ]),
    Tooltip({ tip: 'Tooltips can be placed on any element' }, [
-      Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
+      span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
    ]),
    Tooltip({ tip: 'Icons can also have tooltips' }, [
-      Span({ class: 'text-2xl' }, 'ℹ️')
+      span({ class: 'text-2xl' }, 'ℹ️')
    ])
  ]);
 };
@@ -72,18 +72,18 @@ mount(BasicDemo, '#demo-basic');

 ```javascript
 const PositionsDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+  return div({ class: 'flex flex-wrap gap-8 justify-center' }, [
    Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
-      Button({ class: 'btn btn-sm' }, 'Top')
+      button({ class: 'btn btn-sm' }, 'Top')
    ]),
    Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
-      Button({ class: 'btn btn-sm' }, 'Bottom')
+      button({ class: 'btn btn-sm' }, 'Bottom')
    ]),
    Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
-      Button({ class: 'btn btn-sm' }, 'Left')
+      button({ class: 'btn btn-sm' }, 'Left')
    ]),
    Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
-      Button({ class: 'btn btn-sm' }, 'Right')
+      button({ class: 'btn btn-sm' }, 'Right')
    ])
  ]);
 };
@@ -101,18 +101,18 @@ mount(PositionsDemo, '#demo-positions');

 ```javascript
 const IconsDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+  return div({ class: 'flex flex-wrap gap-8 justify-center' }, [
    Tooltip({ tip: 'Save document' }, [
-      Button({ class: 'btn btn-ghost btn-circle' }, '💾')
+      button({ class: 'btn btn-ghost btn-circle' }, '💾')
    ]),
    Tooltip({ tip: 'Edit item' }, [
-      Button({ class: 'btn btn-ghost btn-circle' }, '✏️')
+      button({ class: 'btn btn-ghost btn-circle' }, '✏️')
    ]),
    Tooltip({ tip: 'Delete permanently' }, [
-      Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
+      button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
    ]),
    Tooltip({ tip: 'Settings' }, [
-      Button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
+      button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
    ])
  ]);
 };
@@ -133,20 +133,20 @@ const FormDemo = () => {
  const username = $('');
  const email = $('');
  
-  return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
-    Div({ class: 'flex items-center gap-2' }, [
-      Input({
+  return div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
+    div({ class: 'flex items-center gap-2' }, [
+      input({
        label: 'Username',
        value: username,
        placeholder: 'Choose a username',
        oninput: (e) => username(e.target.value)
      }),
      Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [
-        Span({ class: 'cursor-help text-info' }, '?')
+        span({ class: 'cursor-help text-info' }, '?')
      ])
    ]),
-    Div({ class: 'flex items-center gap-2' }, [
-      Input({
+    div({ class: 'flex items-center gap-2' }, [
+      input({
        label: 'Email',
        type: 'email',
        value: email,
@@ -154,7 +154,7 @@ const FormDemo = () => {
        oninput: (e) => email(e.target.value)
      }),
      Tooltip({ tip: 'We\'ll never share your email with anyone' }, [
-        Span({ class: 'cursor-help text-info' }, '?')
+        span({ class: 'cursor-help text-info' }, '?')
      ])
    ])
  ]);
@@ -182,19 +182,19 @@ const InteractiveDemo = () => {
    }, 2000);
  };
  
-  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+  return div({ class: 'flex flex-col gap-4 items-center' }, [
    Tooltip({ tip: () => tooltipText() }, [
-      Button({ 
+      button({ 
        class: 'btn btn-primary btn-lg',
        onclick: () => Toast('Button clicked!', 'alert-info', 2000)
      }, 'Interactive Button')
    ]),
-    Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
-      Button({ 
+    div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
+      button({ 
        class: 'btn btn-xs',
        onclick: () => updateTooltip('You clicked the button!')
      }, 'Change Tooltip'),
-      Button({ 
+      button({ 
        class: 'btn btn-xs',
        onclick: () => updateTooltip('Try hovering now!')
      }, 'Change Again')
@@ -215,28 +215,28 @@ mount(InteractiveDemo, '#demo-interactive');

 ```javascript
 const RichDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+  return div({ class: 'flex flex-wrap gap-4 justify-center' }, [
    Tooltip({ 
-      tip: Div({ class: 'text-left p-1' }, [
-        Div({ class: 'font-bold' }, 'User Info'),
-        Div({ class: 'text-xs' }, 'John Doe'),
-        Div({ class: 'text-xs' }, 'john@example.com'),
-        Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
+      tip: div({ class: 'text-left p-1' }, [
+        div({ class: 'font-bold' }, 'User Info'),
+        div({ class: 'text-xs' }, 'John Doe'),
+        div({ class: 'text-xs' }, 'john@example.com'),
+        div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
      ])
    }, [
-      Button({ class: 'btn btn-outline' }, 'User Profile')
+      button({ class: 'btn btn-outline' }, 'User Profile')
    ]),
    Tooltip({ 
-      tip: Div({ class: 'text-left p-1' }, [
-        Div({ class: 'font-bold flex items-center gap-1' }, [
-          Span({}, '⚠️'),
-          Span({}, 'System Status')
+      tip: div({ class: 'text-left p-1' }, [
+        div({ class: 'font-bold flex items-center gap-1' }, [
+          span({}, '⚠️'),
+          span({}, 'System Status')
        ]),
-        Div({ class: 'text-xs' }, 'All systems operational'),
-        Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
+        div({ class: 'text-xs' }, 'All systems operational'),
+        div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
      ])
    }, [
-      Button({ class: 'btn btn-outline' }, 'System Status')
+      button({ class: 'btn btn-outline' }, 'System Status')
    ])
  ]);
 };
@@ -254,27 +254,27 @@ mount(RichDemo, '#demo-rich');

 ```javascript
 const ColorsDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+  return div({ class: 'flex flex-wrap gap-4 justify-center' }, [
    Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [
-      Button({ class: 'btn btn-primary btn-sm' }, 'Primary')
+      button({ class: 'btn btn-primary btn-sm' }, 'Primary')
    ]),
    Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [
-      Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
+      button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
    ]),
    Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [
-      Button({ class: 'btn btn-accent btn-sm' }, 'Accent')
+      button({ class: 'btn btn-accent btn-sm' }, 'Accent')
    ]),
    Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [
-      Button({ class: 'btn btn-info btn-sm' }, 'Info')
+      button({ class: 'btn btn-info btn-sm' }, 'Info')
    ]),
    Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [
-      Button({ class: 'btn btn-success btn-sm' }, 'Success')
+      button({ class: 'btn btn-success btn-sm' }, 'Success')
    ]),
    Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [
-      Button({ class: 'btn btn-warning btn-sm' }, 'Warning')
+      button({ class: 'btn btn-warning btn-sm' }, 'Warning')
    ]),
    Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [
-      Button({ class: 'btn btn-error btn-sm' }, 'Error')
+      button({ class: 'btn btn-error btn-sm' }, 'Error')
    ])
  ]);
 };
@@ -292,25 +292,25 @@ mount(ColorsDemo, '#demo-colors');

 ```javascript
 const AllPositionsDemo = () => {
-  return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
-    Div({ class: 'col-start-2' }, [
+  return div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
+    div({ class: 'col-start-2' }, [
      Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
-        Button({ class: 'btn btn-sm w-24' }, 'Top')
+        button({ class: 'btn btn-sm w-24' }, 'Top')
      ])
    ]),
-    Div({ class: 'col-start-1 row-start-2' }, [
+    div({ class: 'col-start-1 row-start-2' }, [
      Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
-        Button({ class: 'btn btn-sm w-24' }, 'Left')
+        button({ class: 'btn btn-sm w-24' }, 'Left')
      ])
    ]),
-    Div({ class: 'col-start-3 row-start-2' }, [
+    div({ class: 'col-start-3 row-start-2' }, [
      Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
-        Button({ class: 'btn btn-sm w-24' }, 'Right')
+        button({ class: 'btn btn-sm w-24' }, 'Right')
      ])
    ]),
-    Div({ class: 'col-start-2 row-start-3' }, [
+    div({ class: 'col-start-2 row-start-3' }, [
      Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
-        Button({ class: 'btn btn-sm w-24' }, 'Bottom')
+        button({ class: 'btn btn-sm w-24' }, 'Bottom')
      ])
    ])
  ]);