update editor and components

docs/demo_layout.md

@@ -12,26 +12,7 @@ const accItems = $([
 
 mount(
   div({ class: 'flex flex-col gap-8' }, [
-    // Example 1: radio type with arrow variant
-    Accordion({
-      variant: 'arrow',
-      items: [
-        { title: 'Radio with arrow', content: 'This uses collapse‑arrow' },
-        { title: 'Open by default', content: 'This one is open', open: true },
-        'Simple string item (no content)'
-      ]
-    }),
-    // Example 2: details type with plus variant
-    Accordion({
-      type: 'details',
-      variant: 'plus',
-      items: [
-        { title: 'Details with plus', content: 'Uses the native <details> element' },
-        { title: 'Another detail', content: 'Accordion style but with plus icon' }
-      ]
-    }),
-    // Example 3: reactive items (signal)
-    Accordion({ items: accItems })
+    Accordion({items: accItems, class: "collapse-arrow bg-base-100 border border-base-300"})
   ]),
   '#demo-accordion'
 );
@@ -45,14 +26,14 @@ const drawerOpen = $(false);
 
 mount(
   div({}, [
-    Button({ class: 'btn', onclick: () => drawerOpen(true) }, 'Open Drawer'),
-    Drawer({ open: drawerOpen, side: Menu({ items: [
+    Drawer({ open: drawerOpen, id: 'drw', side: Menu({ items: [
       { label: 'Dashboard', onclick: () => drawerOpen(false) },
       { label: 'Settings' },
       { label: 'Help' }
     ]}) }, [
-      div({ class: 'p-4' }, [
+      div({ class: 'p-4 border border-base-300' }, [
         h3({ class: 'text-lg font-bold' }, 'Main Content'),
+        Button({ class: 'btn', onclick: () => drawerOpen(true) }, 'Open Drawer'),
         p({}, 'This is the main page. Click the button above to open the drawer.')
       ])
     ])
@@ -67,25 +48,35 @@ mount(
 ```js
 mount(
   div({ class: 'flex gap-4' }, [
-    // Example 1: automatic items
-    Dropdown({
-      trigger: 'Options',
-      items: [
-        { label: 'Edit', onclick: () => console.log('Edit') },
-        { label: 'Delete', onclick: () => console.log('Delete') },
-        { label: 'Archive' }
-      ]
-    }),
-    // Example 2: custom children (manual)
-    Dropdown({ trigger: 'More' }, [
-      h('ul', { class: 'menu dropdown-content bg-base-100 rounded-box w-40 p-2 shadow' }, [
-        li({}, a({}, 'Profile')),
-        li({}, a({}, 'Logout'))
+    // Example 1: con Menu (cierre automático al hacer clic en un ítem)
+    Dropdown({ label: 'Options', class: 'dropdown' }, [
+      Menu({
+        items: [
+          { label: 'Edit', onclick: () => close() },
+          { label: 'Delete', onclick: () => close() },
+          { label: 'Archive' }
+        ],
+        class: 'dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow z-1'
+      })
+    ]),
+    // Example 2: manual (cerrar ítems con blur)
+    Dropdown({ label: 'More', class: 'dropdown' }, [
+      ul({ class: 'dropdown-content menu bg-base-100 rounded-box w-40 p-2 shadow' }, [
+        li({}, a({ 
+          tabindex: '-1',
+          href: '#', 
+          onclick: (e) => { e.preventDefault();  close(); } 
+        }, 'Profile')),
+        li({}, a({ 
+          tabindex: '-1',
+          href: '#', 
+          onclick: (e) => { e.preventDefault();  close(); } 
+        }, 'Logout'))
       ])
     ])
   ]),
   '#demo-dropdown'
-);
+)
 ```
 
 ## Fab
@@ -94,8 +85,11 @@ mount(
 ```js
 mount(
   div({ class: 'flex gap-4' }, [
-    Fab({ class: 'fab-bottom-left' }, span({ class: 'icon-[lucide--plus]' })),
-    Fab({ class: 'fab-top-right', style: 'position:relative' }, span({ class: 'icon-[lucide--settings]' }))
+    Fab({ class: 'btn-lg btn-circle btn-secondary', icon:"R" }, [
+      Button({},"C"),
+      Button({},"B"),
+      Button({},"A"),
+    ])
   ]),
   '#demo-fab'
 );
@@ -106,13 +100,13 @@ mount(
 
 ```js
 mount(
-  div({ class: 'flex gap-4' }, [
-    Fieldset({ legend: 'Personal Info' }, [
+  div({ class: 'flex gap-4 bg' }, [
+    Fieldset({ label: 'Personal Info', class:"bg-base-200 border-base-300 rounded-box w-xs border gap-3 p-4" }, [
       Input({ label: 'Name', float: true, value: $('') }),
       Select({ label: 'Country', float: true, items: ['Spain', 'France', 'Italy'], value: $('') })
     ]),
-    Fieldset({ class: 'bg-base-200 p-4 rounded-box' }, [
-      div({}, 'Any content without legend')
+    Fieldset({ class: 'bg-base-200 p-4 rounded-box' , label: "Any content"}, [
+      div({}, 'Any content')
     ])
   ]),
   '#demo-fieldset'
@@ -134,13 +128,7 @@ const menuItems = $([
 
 mount(
   div({ class: 'flex gap-4' }, [
-    // Example 1: automatic from items (signal)
-    Menu({ items: menuItems, class: 'menu-vertical' }),
-    // Example 2: manual children
-    Menu({ class: 'menu-horizontal bg-base-200 rounded-box' }, [
-      li({}, a({}, 'One')),
-      li({}, a({}, 'Two'))
-    ])
+    Menu({ items: menuItems, class: 'bg-base-200 rounded-box w-56' }),
   ]),
   '#demo-menu'
 );
@@ -173,29 +161,10 @@ const tabsData = $([
   { label: 'Tab A', content: 'Content of tab A' },
   { label: 'Tab B', content: 'Content of tab B', closable: true },
   { label: 'Tab C', content: 'Content of tab C' }
-]);
+])
 
 mount(
-  div({ class: 'flex flex-col gap-4' }, [
-    // Example 1: reactive tabs with closable
-    Tabs({
-      items: tabsData,
-      activeIndex: activeTab,
-      class: "tabs-box",
-      onClose: (idx) => {
-        const newTabs = tabsData().filter((_, i) => i !== idx);
-        tabsData(newTabs);
-        if (activeTab() >= newTabs.length) activeTab(Math.max(0, newTabs.length - 1));
-      }
-    }),
-    // Example 2: manual tabs with custom content
-    Tabs({}, [
-      a({ class: () => `tab ${activeTab() === 0 ? 'tab-active' : ''}`, onclick: () => activeTab(0) }, 'Manual A'),
-      a({ class: () => `tab ${activeTab() === 1 ? 'tab-active' : ''}`, onclick: () => activeTab(1) }, 'Manual B'),
-      div({ class: 'tab-content', style: () => `display:${activeTab() === 0 ? 'block' : 'none'}` }, 'Content for manual A'),
-      div({ class: 'tab-content', style: () => `display:${activeTab() === 1 ? 'block' : 'none'}` }, 'Content for manual B')
-    ])
-  ]),
+  Tabs({ class: 'tabs-box', items: tabsData, activeIndex: activeTab }),
   '#demo-tabs'
-);
+)
 ```