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/navbar.md
+++ b/docs/components/navbar.md
@@ -40,14 +40,14 @@ Navbar supports all **daisyUI Navbar classes**:
 ```javascript
 const BasicDemo = () => {
  return Navbar({ class: 'rounded-box' }, [
-    Div({ class: 'navbar-start' }, [
-      Span({ class: 'text-xl font-bold' }, 'Logo')
+    div({ class: 'navbar-start' }, [
+      span({ class: 'text-xl font-bold' }, 'Logo')
    ]),
-    Div({ class: 'navbar-center hidden lg:flex' }, [
-      Span({ class: 'text-sm' }, 'Navigation Items')
+    div({ class: 'navbar-center hidden lg:flex' }, [
+      span({ class: 'text-sm' }, 'Navigation Items')
    ]),
-    Div({ class: 'navbar-end' }, [
-      Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
+    div({ class: 'navbar-end' }, [
+      button({ class: 'btn btn-ghost btn-sm' }, 'Login')
    ])
  ]);
 };
@@ -68,27 +68,27 @@ const LinksDemo = () => {
  const active = $('home');
  
  return Navbar({ class: 'rounded-box' }, [
-    Div({ class: 'navbar-start' }, [
-      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    div({ class: 'navbar-start' }, [
+      span({ class: 'text-xl font-bold' }, 'MyApp')
    ]),
-    Div({ class: 'navbar-center hidden lg:flex' }, [
-      Div({ class: 'menu menu-horizontal px-1' }, [
-        Button({ 
+    div({ class: 'navbar-center hidden lg:flex' }, [
+      div({ class: 'menu menu-horizontal px-1' }, [
+        button({ 
          class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
          onclick: () => active('home')
        }, 'Home'),
-        Button({ 
+        button({ 
          class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
          onclick: () => active('about')
        }, 'About'),
-        Button({ 
+        button({ 
          class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
          onclick: () => active('contact')
        }, 'Contact')
      ])
    ]),
-    Div({ class: 'navbar-end' }, [
-      Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
+    div({ class: 'navbar-end' }, [
+      button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
    ])
  ]);
 };
@@ -109,12 +109,12 @@ const SearchDemo = () => {
  const searchQuery = $('');
  
  return Navbar({ class: 'rounded-box' }, [
-    Div({ class: 'navbar-start' }, [
-      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    div({ class: 'navbar-start' }, [
+      span({ class: 'text-xl font-bold' }, 'MyApp')
    ]),
-    Div({ class: 'navbar-center' }, [
-      Div({ class: 'form-control' }, [
-        Input({
+    div({ class: 'navbar-center' }, [
+      div({ class: 'form-control' }, [
+        input({
          placeholder: 'Search...',
          value: searchQuery,
          class: 'input input-bordered w-48 md:w-auto',
@@ -122,9 +122,9 @@ const SearchDemo = () => {
        })
      ])
    ]),
-    Div({ class: 'navbar-end' }, [
-      Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
-      Button({ class: 'btn btn-ghost btn-circle' }, '👤')
+    div({ class: 'navbar-end' }, [
+      button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
+      button({ class: 'btn btn-ghost btn-circle' }, '👤')
    ])
  ]);
 };
@@ -143,25 +143,25 @@ mount(SearchDemo, '#demo-search');
 ```javascript
 const AvatarDemo = () => {
  return Navbar({ class: 'rounded-box' }, [
-    Div({ class: 'navbar-start' }, [
-      Span({ class: 'text-xl font-bold' }, 'MyApp')
+    div({ class: 'navbar-start' }, [
+      span({ class: 'text-xl font-bold' }, 'MyApp')
    ]),
-    Div({ class: 'navbar-center hidden lg:flex' }, [
-      Div({ class: 'menu menu-horizontal px-1' }, [
-        Span({ class: 'text-sm' }, 'Dashboard'),
-        Span({ class: 'text-sm' }, 'Projects'),
-        Span({ class: 'text-sm' }, 'Tasks')
+    div({ class: 'navbar-center hidden lg:flex' }, [
+      div({ class: 'menu menu-horizontal px-1' }, [
+        span({ class: 'text-sm' }, 'Dashboard'),
+        span({ class: 'text-sm' }, 'Projects'),
+        span({ class: 'text-sm' }, 'Tasks')
      ])
    ]),
-    Div({ class: 'navbar-end' }, [
-      Div({ class: 'dropdown dropdown-end' }, [
-        Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
-          Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
+    div({ class: 'navbar-end' }, [
+      div({ class: 'dropdown dropdown-end' }, [
+        div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
+          div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
        ]),
-        Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
-          Span({ class: 'menu-item' }, 'Profile'),
-          Span({ class: 'menu-item' }, 'Settings'),
-          Span({ class: 'menu-item' }, 'Logout')
+        div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
+          span({ class: 'menu-item' }, 'Profile'),
+          span({ class: 'menu-item' }, 'Settings'),
+          span({ class: 'menu-item' }, 'Logout')
        ])
      ])
    ])
@@ -183,26 +183,26 @@ mount(AvatarDemo, '#demo-avatar');
 const ResponsiveDemo = () => {
  const isOpen = $(false);
  
-  return Div({ class: 'flex flex-col' }, [
+  return div({ class: 'flex flex-col' }, [
    Navbar({ class: 'rounded-box' }, [
-      Div({ class: 'navbar-start' }, [
-        Button({ 
+      div({ class: 'navbar-start' }, [
+        button({ 
          class: 'btn btn-ghost btn-circle lg:hidden',
          onclick: () => isOpen(!isOpen())
        }, '☰')
      ]),
-      Div({ class: 'navbar-center' }, [
-        Span({ class: 'text-xl font-bold' }, 'MyApp')
+      div({ class: 'navbar-center' }, [
+        span({ class: 'text-xl font-bold' }, 'MyApp')
      ]),
-      Div({ class: 'navbar-end' }, [
-        Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
+      div({ class: 'navbar-end' }, [
+        button({ class: 'btn btn-ghost btn-circle' }, '🔔')
      ])
    ]),
-    () => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
-      Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
-      Button({ class: 'btn btn-ghost justify-start' }, 'About'),
-      Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
-      Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
+    () => isOpen() ? div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
+      button({ class: 'btn btn-ghost justify-start' }, 'Home'),
+      button({ class: 'btn btn-ghost justify-start' }, 'About'),
+      button({ class: 'btn btn-ghost justify-start' }, 'Services'),
+      button({ class: 'btn btn-ghost justify-start' }, 'Contact')
    ]) : null
  ]);
 };
@@ -221,19 +221,19 @@ mount(ResponsiveDemo, '#demo-responsive');
 ```javascript
 const BrandDemo = () => {
  return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
-    Div({ class: 'navbar-start' }, [
-      Span({ class: 'text-xl font-bold' }, 'Brand')
+    div({ class: 'navbar-start' }, [
+      span({ class: 'text-xl font-bold' }, 'Brand')
    ]),
-    Div({ class: 'navbar-center hidden lg:flex' }, [
-      Div({ class: 'menu menu-horizontal px-1' }, [
-        Span({ class: 'text-sm' }, 'Features'),
-        Span({ class: 'text-sm' }, 'Pricing'),
-        Span({ class: 'text-sm' }, 'About')
+    div({ class: 'navbar-center hidden lg:flex' }, [
+      div({ class: 'menu menu-horizontal px-1' }, [
+        span({ class: 'text-sm' }, 'Features'),
+        span({ class: 'text-sm' }, 'Pricing'),
+        span({ class: 'text-sm' }, 'About')
      ])
    ]),
-    Div({ class: 'navbar-end' }, [
-      Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
-      Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
+    div({ class: 'navbar-end' }, [
+      button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
+      button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
    ])
  ]);
 };
@@ -251,24 +251,24 @@ mount(BrandDemo, '#demo-brand');

 ```javascript
 const VariantsDemo = () => {
-  return Div({ class: 'flex flex-col gap-4' }, [
-    Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
+  return div({ class: 'flex flex-col gap-4' }, [
+    div({ class: 'text-sm font-bold' }, 'Default Navbar'),
    Navbar({ class: 'rounded-box' }, [
-      Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
-      Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
-      Div({ class: 'navbar-end' }, [Span({}, 'End')])
+      div({ class: 'navbar-start' }, [span({}, 'Start')]),
+      div({ class: 'navbar-center' }, [span({}, 'Center')]),
+      div({ class: 'navbar-end' }, [span({}, 'End')])
    ]),
    
-    Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
+    div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
    Navbar({ class: 'rounded-box shadow-lg' }, [
-      Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
-      Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
+      div({ class: 'navbar-start' }, [span({}, 'Logo')]),
+      div({ class: 'navbar-end' }, [button({ class: 'btn btn-sm' }, 'Button')])
    ]),
    
-    Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
+    div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
    Navbar({ class: 'rounded-box bg-base-300' }, [
-      Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
-      Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
+      div({ class: 'navbar-start' }, [span({ class: 'font-bold' }, 'Colored')]),
+      div({ class: 'navbar-end' }, [span({ class: 'text-sm' }, 'Info')])
    ])
  ]);
 };