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,
+      isFunc(p.value) ? p.value(c) : p.onchange?.(c);
-      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,
+        isFunc(p.value) ? p.value(c) : p.onchange?.(c);
-        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

@@ -1,9 +1,9 @@
 // All base components
 import { $, $$, watch, batch, h, Fragment, mount, when, each, router, onUnmount, isArr, isFunc, isObj } from "./sigpro.js"
 if (typeof window !== "undefined") {
-    "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video"
+  "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video"
-        .split(" ")
+    .split(" ")
-        .forEach(tag => { window[tag] = (props, children) => h(tag, props, children) })
+    .forEach(tag => { window[tag] = (props, children) => h(tag, props, children) })
 }
 export { $, $$, watch, batch, h, Fragment, mount, when, each, router, onUnmount, isArr, isFunc, isObj }
 
@@ -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 };
 }