Format documents

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"
-        .split(" ")
-        .forEach(tag => { window[tag] = (props, children) => h(tag, props, children) })
+  "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(" ")
+    .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-full' }, [
-    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)
-        }
-      })
-    ),
+  return Dropdown({ class: 'w-80' }, [
+    h('div', { tabindex: '0', role: 'button', class: 'w-full' }, Input({ ...props, placeholder, value: query, left: Icon('icon-[lucide--search]') })),
     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', {}, [
-            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
+        each(filtered, (item) => h('li', {}, [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({
-        value: p.value, onchange: (c) => { isFunc(p.value) ? p.value(c) : p.onchange?.(c) }
-      })
+      ColorPalette({ 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({
-        value: p.value,
-        range: rangeMode(),
-        hour: p.hour,
-        onChange: handleChange
-      })
+      Calendar({ 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", {
-      id: "sigpro-toast-container",
-      class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none"
-    });
+    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" });
     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(() => {
-        instance.destroy();
-        host.remove();
-        if (!container.hasChildNodes()) container.remove();
-      }, 300);
+      setTimeout(() => { 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