Format documents

dist/sigpro-ui.css

@@ -2732,9 +2732,47 @@
   .start {
     inset-inline-start: var(--spacing);
   }
+  .dropdown-end {
+    @layer daisyui.l1.l2 {
+      --anchor-h: span-left;
+      :where(.dropdown-content) {
+        inset-inline-end: calc(0.25rem * 0);
+        translate: 0 0;
+        [dir="rtl"] & {
+          translate: 0 0;
+        }
+      }
+      &.dropdown-left {
+        --anchor-h: left;
+        --anchor-v: span-top;
+        .dropdown-content {
+          top: auto;
+          bottom: calc(0.25rem * 0);
+        }
+      }
+      &.dropdown-right {
+        --anchor-h: right;
+        --anchor-v: span-top;
+        .dropdown-content {
+          top: auto;
+          bottom: calc(0.25rem * 0);
+        }
+      }
+    }
+  }
   .end {
     inset-inline-end: var(--spacing);
   }
+  .dropdown-bottom {
+    @layer daisyui.l1.l2 {
+      --anchor-v: bottom;
+      .dropdown-content {
+        top: 100%;
+        bottom: auto;
+        transform-origin: top;
+      }
+    }
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }

dist/sigpro-ui.esm.js

@@ -680,25 +680,10 @@ var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) =
     onselect?.(item);
     hide();
   };
-  return Dropdown({ class: "w-full" }, [
+  return Dropdown({ class: "w-80" }, [
-    h("div", { tabindex: "0", role: "button", class: "w-full" }, Input({
+    h("div", { tabindex: "0", role: "button", class: "w-full" }, Input({ ...props, placeholder, value: query, left: Icon("icon-[lucide--search]") })),
-      ...props,
-      placeholder,
-      value: query,
-      left: h("span", { class: "icon-[lucide--search]" }),
-      oninput: (e) => {
-        query(e.target.value);
-        if (isFunc(value))
-          value(e.target.value);
-      }
-    })),
     DropdownContent({ class: "p-2 bg-base-100 rounded-box shadow-xl w-full max-h-60 overflow-y-auto border border-base-300 z-50" }, h("ul", { class: "menu flex-col flex-nowrap w-full p-0" }, [
-      each(filtered, (item) => h("li", {}, [
+      each(filtered, (item) => h("li", {}, [h("a", { onmousedown: (e) => e.preventDefault(), onclick: () => pick(item) }, getBy(item))]), "value"),
-        h("a", {
-          onmousedown: (e) => e.preventDefault(),
-          onclick: () => pick(item)
-        }, getBy(item))
-      ]), "value"),
       () => filtered().length === 0 ? h("li", { class: "p-4 opacity-50 text-center" }, "Sin resultados") : null
     ]))
   ]);
@@ -823,12 +808,9 @@ var Colorpicker = (p) => {
       h("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
       p.label && h("span", {}, p.label)
     ]),
-    DropdownContent({ class: "p-0" }, ColorPalette({
+    DropdownContent({ class: "p-0" }, ColorPalette({ value: p.value, onchange: (c) => {
-      value: p.value,
-      onchange: (c) => {
       isFunc(p.value) ? p.value(c) : p.onchange?.(c);
-      }
+    } }))
-    }))
   ]);
 };
 var ColorPalette = (p) => {
@@ -969,12 +951,7 @@ var Datepicker = (p) => {
         }
       }, h("span", { class: "icon-[lucide--x] opacity-50" })) : null
     ]),
-    DropdownContent({ class: "p-0" }, Calendar({
+    DropdownContent({ class: "p-0" }, Calendar({ value: p.value, range: rangeMode(), hour: p.hour, onChange: handleChange }))
-      value: p.value,
-      range: rangeMode(),
-      hour: p.hour,
-      onChange: handleChange
-    }))
   ]);
 };
 var Drawer = (p, c) => div({ ...p, class: cls("drawer", p.class) }, c);
@@ -1114,13 +1091,7 @@ var Modal = (p) => {
     isOpen ? dialogRef.showModal() : dialogRef.hide();
   });
   const close = () => isFunc(p.open) && p.open(false);
-  return h("dialog", {
+  return h("dialog", { ...p, ref: (el) => dialogRef = el, class: cls("modal", p.class), onclose: close, oncancel: close }, [
-    ...p,
-    ref: (el) => dialogRef = el,
-    class: cls("modal", p.class),
-    onclose: close,
-    oncancel: close
-  }, [
     h("div", { class: "modal-box" }, [
       p.title && h("h3", { class: "text-lg font-bold" }, p.title),
       p.children,
@@ -1243,10 +1214,7 @@ var Timeline = (p, c) => h("ul", { ...p, class: cls("timeline", p.class) }, c);
 var Toast = (message, type = "alert-success", duration = 3500) => {
   let container = document.getElementById("sigpro-toast-container");
   if (!container) {
-    container = h("div", {
+    container = h("div", { id: "sigpro-toast-container", class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none" });
-      id: "sigpro-toast-container",
-      class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none"
-    });
     document.body.appendChild(container);
   }
   const host = h("div", { style: "display: contents" });

dist/sigpro-ui.js

@@ -681,25 +681,10 @@
       onselect?.(item);
       hide();
     };
-    return Dropdown({ class: "w-full" }, [
+    return Dropdown({ class: "w-80" }, [
-      h("div", { tabindex: "0", role: "button", class: "w-full" }, Input({
+      h("div", { tabindex: "0", role: "button", class: "w-full" }, Input({ ...props, placeholder, value: query, left: Icon("icon-[lucide--search]") })),
-        ...props,
-        placeholder,
-        value: query,
-        left: h("span", { class: "icon-[lucide--search]" }),
-        oninput: (e) => {
-          query(e.target.value);
-          if (isFunc(value))
-            value(e.target.value);
-        }
-      })),
       DropdownContent({ class: "p-2 bg-base-100 rounded-box shadow-xl w-full max-h-60 overflow-y-auto border border-base-300 z-50" }, h("ul", { class: "menu flex-col flex-nowrap w-full p-0" }, [
-        each(filtered, (item) => h("li", {}, [
+        each(filtered, (item) => h("li", {}, [h("a", { onmousedown: (e) => e.preventDefault(), onclick: () => pick(item) }, getBy(item))]), "value"),
-          h("a", {
-            onmousedown: (e) => e.preventDefault(),
-            onclick: () => pick(item)
-          }, getBy(item))
-        ]), "value"),
         () => filtered().length === 0 ? h("li", { class: "p-4 opacity-50 text-center" }, "Sin resultados") : null
       ]))
     ]);
@@ -824,12 +809,9 @@
         h("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
         p.label && h("span", {}, p.label)
       ]),
-      DropdownContent({ class: "p-0" }, ColorPalette({
+      DropdownContent({ class: "p-0" }, ColorPalette({ value: p.value, onchange: (c) => {
-        value: p.value,
-        onchange: (c) => {
         isFunc(p.value) ? p.value(c) : p.onchange?.(c);
-        }
+      } }))
-      }))
     ]);
   };
   var ColorPalette = (p) => {
@@ -970,12 +952,7 @@
           }
         }, h("span", { class: "icon-[lucide--x] opacity-50" })) : null
       ]),
-      DropdownContent({ class: "p-0" }, Calendar({
+      DropdownContent({ class: "p-0" }, Calendar({ value: p.value, range: rangeMode(), hour: p.hour, onChange: handleChange }))
-        value: p.value,
-        range: rangeMode(),
-        hour: p.hour,
-        onChange: handleChange
-      }))
     ]);
   };
   var Drawer = (p, c) => div({ ...p, class: cls("drawer", p.class) }, c);
@@ -1115,13 +1092,7 @@
       isOpen ? dialogRef.showModal() : dialogRef.hide();
     });
     const close = () => isFunc(p.open) && p.open(false);
-    return h("dialog", {
+    return h("dialog", { ...p, ref: (el) => dialogRef = el, class: cls("modal", p.class), onclose: close, oncancel: close }, [
-      ...p,
-      ref: (el) => dialogRef = el,
-      class: cls("modal", p.class),
-      onclose: close,
-      oncancel: close
-    }, [
       h("div", { class: "modal-box" }, [
         p.title && h("h3", { class: "text-lg font-bold" }, p.title),
         p.children,
@@ -1244,10 +1215,7 @@
   var Toast = (message, type = "alert-success", duration = 3500) => {
     let container = document.getElementById("sigpro-toast-container");
     if (!container) {
-      container = h("div", {
+      container = h("div", { id: "sigpro-toast-container", class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none" });
-        id: "sigpro-toast-container",
-        class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none"
-      });
       document.body.appendChild(container);
     }
     const host = h("div", { style: "display: contents" });

docs/demo.md

@@ -72,32 +72,41 @@ const fruitItems = [
 ];
 
 const selectedColor = $("");
-const colorItems = ["Red", "Blue", "Green", "Yellow", "Black", "White", "Purple", "Cyan"];
+const colorItems = [
+  "Red",
+  "Blue",
+  "Green",
+  "Yellow",
+  "Black",
+  "White",
+  "Purple",
+  "Cyan",
+];
 
 mount(
-  h('div', { class: 'p-8 flex flex-col gap-10' }, [
+  h("div", { class: "p-8 flex flex-col gap-10" }, [
-    h('div', {}, [
+    h("div", {}, [
-      h('h3', { class: 'font-bold mb-2' }, 'Objetos:'),
+      h("h3", { class: "font-bold mb-2" }, "Objetos:"),
       Autocomplete({
         items: fruitItems,
         value: selectedFruit,
         placeholder: "Search fruit...",
-        onselect: (v) => console.log("Obj:", v)
+        onselect: (v) => console.log("Obj:", v),
       }),
-      h('span', { class: 'text-xs' }, () => `Signal: ${selectedFruit()}`)
+      h("span", { class: "text-xs" }, () => `Signal: ${selectedFruit()}`),
     ]),
-    h('div', {}, [
+    h("div", {}, [
-      h('h3', { class: 'font-bold mb-2' }, 'Array Plano:'),
+      h("h3", { class: "font-bold mb-2" }, "Array Plano:"),
       Autocomplete({
         items: colorItems,
         value: selectedColor,
         placeholder: "Search color...",
-        onselect: (v) => console.log("Str:", v)
+        onselect: (v) => console.log("Str:", v),
       }),
-      h('span', { class: 'text-xs' }, () => `Signal: ${selectedColor()}`)
+      h("span", { class: "text-xs" }, () => `Signal: ${selectedColor()}`),
-    ])
     ]),
-  "#demo-autocomplete"
+  ]),
+  "#demo-autocomplete",
 );
 ```
 
@@ -485,7 +494,7 @@ mount(
         ],
       ),
     ]),
-    Dropdown({}, [
+    Dropdown({ class: "dropdown-bottom dropdown-end" }, [
       DropdownButton({}, "More"),
       DropdownContent(
         { class: "menu bg-base-100 rounded-box w-40 p-2 shadow" },
@@ -826,7 +835,7 @@ mount(
     Progress({
       value: progressVal,
       max: 100,
-      class: "w-56"
+      class: "w-56",
     }),
   ]),
   "#demo-progress",

sigpro-ui.css

@@ -145,7 +145,7 @@
 /* .drawer, .drawer-end .drawer-toggle, .drawer-content, .drawer-side, .drawer-overlay, */
 
 /* Dropdown */
-/* .dropdown, .dropdown-content, .dropdown-end, .dropdown-top, .dropdown-bottom, */
+/* .dropdown, .dropdown-content, .dropdown-end, .dropdown-top, .dropdown-bottom , .dropdown-left, .dropdown-right*/
 
 /* Fab */
 /* .fab, */

sigpro-ui.js

@@ -50,7 +50,6 @@ export const AvatarGroup = (p, c) => h("div", { ...p, class: cls("avatar-group -
 export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => {
   const query = $(val(value) || '')
   const filtered = $(() => filterBy(items, query()))
-
   const pick = (item) => {
     const display = getBy(item)
     const actual = typeof item === 'string' ? item : item.value
@@ -59,34 +58,12 @@ export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...p
     onselect?.(item)
     hide()
   }
-
+  return Dropdown({ class: 'w-80' }, [
-  return Dropdown({ class: 'w-full' }, [
+    h('div', { tabindex: '0', role: 'button', class: 'w-full' }, Input({ ...props, placeholder, value: query, left: Icon('icon-[lucide--search]') })),
-    h('div', { tabindex: '0', role: 'button', class: 'w-full' },
-      Input({
-        ...props,
-        placeholder,
-        value: query,
-        left: h('span', { class: 'icon-[lucide--search]' }),
-        oninput: (e) => {
-          query(e.target.value)
-          if (isFunc(value)) value(e.target.value)
-        }
-      })
-    ),
     DropdownContent({ class: 'p-2 bg-base-100 rounded-box shadow-xl w-full max-h-60 overflow-y-auto border border-base-300 z-50' },
       h('ul', { class: 'menu flex-col flex-nowrap w-full p-0' }, [
-        each(filtered, (item) =>
+        each(filtered, (item) => h('li', {}, [h('a', { onmousedown: (e) => e.preventDefault(), onclick: () => pick(item) }, getBy(item))]), 'value'),
-          h('li', {}, [
+        () => filtered().length === 0 ? h('li', { class: 'p-4 opacity-50 text-center' }, 'Sin resultados') : null
-            h('a', {
-              onmousedown: (e) => e.preventDefault(),
-              onclick: () => pick(item)
-            }, getBy(item))
-          ]),
-          'value'
-        ),
-        () => filtered().length === 0
-          ? h('li', { class: 'p-4 opacity-50 text-center' }, 'Sin resultados')
-          : null
       ])
     )
   ])
@@ -204,9 +181,7 @@ export const Colorpicker = (p) => {
       p.label && h('span', {}, p.label)
     ]),
     DropdownContent({ class: 'p-0' },
-      ColorPalette({
+      ColorPalette({ value: p.value, onchange: (c) => { isFunc(p.value) ? p.value(c) : p.onchange?.(c) } })
-        value: p.value, onchange: (c) => { isFunc(p.value) ? p.value(c) : p.onchange?.(c) }
-      })
     )
   ])
 }
@@ -291,12 +266,7 @@ export const Datepicker = (p) => {
       }, h('span', { class: 'icon-[lucide--x] opacity-50' })) : null
     ]),
     DropdownContent({ class: 'p-0' },
-      Calendar({
+      Calendar({ value: p.value, range: rangeMode(), hour: p.hour, onChange: handleChange })
-        value: p.value,
-        range: rangeMode(),
-        hour: p.hour,
-        onChange: handleChange
-      })
     )
   ])
 }
@@ -328,7 +298,6 @@ export const Fileinput = (p) => {
     if (isFunc(p.onselect)) p.onselect(updated)
     else if (isFunc(p.value)) p.value(updated)
   }
-
   const remove = (idx) => {
     const updated = files().filter((_, i) => i !== idx)
     files(updated)
@@ -380,15 +349,10 @@ export const Icon = (p) => h("span", { class: p.startsWith("icon-") ? p : "" },
 export const Indicator = (p, c) => h("div", { ...p, class: cls("indicator", p.class) }, [p.value && h("span", { class: cls("indicator-item badge", p.class) }, p.value), c]);
 export const Input = (p) => {
   const { label, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p;
-
   const showPassword = $(false);
   const isPassword = p.type === 'password';
   const pattern = rule ?? null;
-
+  const inputType = () => isPassword ? (val(showPassword) ? 'text' : 'password') : (p.type || 'search');
-  const inputType = () => isPassword
-    ? (val(showPassword) ? 'text' : 'password')
-    : (p.type || 'search');
-
   return h("label", { class: float ? 'floating-label' : '' }, [
     float ? h("span", {}, label) : null,
     h("label", { pattern: pattern, class: () => cls('input validator', p.class) },
@@ -428,22 +392,9 @@ export const Menu = (p) => {
 }
 export const Modal = (p) => {
   let dialogRef = null;
-
+  watch(() => { const isOpen = val(p.open); if (!dialogRef) return; isOpen ? dialogRef.showModal() : dialogRef.hide(); });
-  watch(() => {
-    const isOpen = val(p.open);
-    if (!dialogRef) return;
-    isOpen ? dialogRef.showModal() : dialogRef.hide();
-  });
-
   const close = () => isFunc(p.open) && p.open(false);
-
+  return h("dialog", { ...p, ref: el => dialogRef = el, class: cls('modal', p.class), onclose: close, oncancel: close }, [
-  return h("dialog", {
-    ...p,
-    ref: el => dialogRef = el,
-    class: cls('modal', p.class),
-    onclose: close,
-    oncancel: close
-  }, [
     h("div", { class: "modal-box" }, [
       p.title && h("h3", { class: "text-lg font-bold" }, p.title),
       p.children,
@@ -465,15 +416,12 @@ export const Rating = (p, c) => h('div', { ...p, class: "rating" }, c);
 export const RatingItems = (p) => [...Array(p.count)].map((_, i) => h('input', { class: cls('mask', p.class), name: p.name, type: 'radio', checked: () => val(p.value) === i, onchange: () => isFunc(p.value) ? p.value(i) : p.onchange?.(i) }))
 export const Select = (p, c) => {
   if (c !== undefined) return h('select', { class: cls('select', p.class), ...p }, c)
-
   const { label, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p
-
   const opts = () => {
     const raw = val(items) || []
     const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: '' }] : []
     return [...ph, ...raw]
   }
-
   return h('label', { class: float ? 'floating-label' : '' }, [
     float ? h('span', {}, label) : null,
     h('label', { class: cls('select', rest.class) }, [
@@ -531,7 +479,6 @@ export const Tabs = (p, c) => {
     items(newArr)
     if (activeIndex() >= newArr.length) activeIndex(Math.max(0, newArr.length - 1))
   } : null)
-
   return h('div', { ...rest, class: cls('tabs', className) }, () => {
     const list = val(items) || []
     return list.flatMap((it, idx) => {
@@ -560,10 +507,7 @@ export const Timeline = (p, c) => h("ul", { ...p, class: cls("timeline", p.class
 export const Toast = (message, type = "alert-success", duration = 3500) => {
   let container = document.getElementById("sigpro-toast-container");
   if (!container) {
-    container = h("div", {
+    container = h("div", { id: "sigpro-toast-container", class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none" });
-      id: "sigpro-toast-container",
-      class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none"
-    });
     document.body.appendChild(container);
   }
   const host = h("div", { style: "display: contents" });
@@ -577,11 +521,7 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
       clearTimeout(timer);
       clearTimeout(enterTimer);
       leaving(true);
-      setTimeout(() => {
+      setTimeout(() => { instance.destroy(); host.remove(); if (!container.hasChildNodes()) container.remove(); }, 300);
-        instance.destroy();
-        host.remove();
-        if (!container.hasChildNodes()) container.remove();
-      }, 300);
     };
     enterTimer = setTimeout(() => visible(true), 0);
     const content = typeof message === 'function' ? val(message) : message;
@@ -607,8 +547,6 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
 };
 export const Toggle = (p) => h("input", { ...p, type: "checkbox", class: cls("toggle", p.class) });
 export const Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c);
-
-// Editor
 export const Editor = (p) => {
   const { value, class: extraClass } = p
   let editorRef = null

sigpro-ui_IIFE.js

@@ -8,7 +8,6 @@ if (typeof window !== "undefined") {
         .split(" ")
         .forEach(tag => { window[tag] = (props, children) => h(tag, props, children) })
 
-    // Asignar todos los componentes al scope global
     Object.entries(All).forEach(([name, value]) => {
         Object.defineProperty(window, name, {
             value,
@@ -19,7 +18,6 @@ if (typeof window !== "undefined") {
     });
 }
 
-// También asignar Components como respaldo
 if (typeof window !== 'undefined') {
     window.Components = { ...All };
 }