update components

2026-04-27 01:57:14 +02:00
parent e3e5082247
commit 7590438780
8 changed files with 115 additions and 175 deletions
--- a/components/All.js
+++ b/components/All.js
@@ -191,7 +191,18 @@ export const ChatHeader = (p, c) => h("div", { ...p, class: cls("chat-header", p
 export const ChatImage = (p, c) => h("div", { ...p, class: cls("chat-image avatar", p.class) }, h("div", { class: "w-10 rounded-full" }, typeof c === "string" ? h("img", { src: c, alt: "avatar" }) : c));
 export const Checkbox = (p) => h("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) });
 export const Colorpicker = (p) => {
-  const isOpen = $(false)
+  const current = () => get(p.value) || '#000000'
+  return Dropdown({}, [
+    DropdownButton({ class: 'btn' }, [
+      h('div', { class: 'size-5 rounded-sm', style: () => `background-color: ${current()}` }),
+      p.label && h('span', {}, p.label)
+    ]),
+    DropdownContent({ class: 'p-3 bg-base-100 rounded-box shadow-xl w-64' },
+      ColorPalette({ value: p.value, onchange: (c) => { isFn(p.value) ? p.value(c) : p.onchange?.(c); close(); } })
+    )
+  ])
+}
+export const ColorPalette = (p) => {
  const current = () => get(p.value) || '#000000'
  const palette = [
    '#000', '#1A1A1A', '#333', '#4D4D4D', '#666', '#808080', '#B3B3B3', '#FFF',
@@ -203,23 +214,8 @@ export const Colorpicker = (p) => {
    '#1e1b4b', '#312e81', '#4338ca', '#4f46e5', '#6366f1', '#818cf8', '#a5b4fc', '#e0e7ff',
    '#2e1065', '#4c1d95', '#6d28d9', '#7c3aed', '#8b5cf6', '#a855f7', '#d946ef', '#fae8ff'
  ]
-  const pick = (c) => { isFn(p.value) ? p.value(c) : p.onchange?.(c); isOpen(false) }
-  return h('div', { class: cls('relative w-fit', p.class) }, [
-    h('button', {
-      type: 'button',
-      class: 'btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case',
-      onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()) }
-    }, [
-      h('div', { class: 'size-5 rounded-sm shadow-inner border border-black/10 shrink-0', style: () => `background-color: ${current()}` }),
-      p.label && h('span', { class: 'opacity-80' }, p.label)
-    ]),
-    when(isOpen, () => [
-      h('div', {
-        class: 'fixed inset-0 z-[100]',
-        onclick: () => isOpen(false)
-      }),
-      h('div', { class: 'absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none' },
-        h('div', { class: 'grid grid-cols-8 gap-1' },
+  const pick = (c) => isFn(p.value) ? p.value(c) : p.onchange?.(c)
+  return h('div', { class: 'grid grid-cols-8 gap-1' },
    palette.map(c =>
      h('button', {
        type: 'button',
@@ -232,9 +228,6 @@ export const Colorpicker = (p) => {
      })
    )
  )
-      )
-    ])
-  ])
 }
 export const Datepicker = (p) => {
  const isOpen = $(false)
@@ -402,15 +395,8 @@ export const Input = (p) => {
  ]);
 };
 export const Kbd = (p, c) => h("kbd", { ...p, class: cls("kbd", p.class) }, c);
-export const List = (p, c) => {
-  if (!p.items) return h('ul', { ...p, class: cls('list', p.class) }, c)
-  return h('ul', { ...p, class: cls('list', p.class) }, [
-    each(p.items, (item, i) =>
-      h('li', { class: cls('list-row', item.class) },
-        typeof p.render === 'function' ? p.render(item, i) : item
-      ), p.key)
-  ])
-}
+export const List = (p, c) => h('ul', { ...p, class: cls('list', p.class) }, c)
+export const ListRows = (p) => () => (get(p.items) || []).map((item, idx) => h('li', { class: cls('list-row', p.class, item?.class) }, typeof p.render === 'function' ? p.render(item, idx) : item))
 export const Loading = (p, c) => h("span", { ...p, class: cls("loading loading-spinner", p.class) }, c);
 export const Menu = (p) => {
  if (p.children !== undefined) return h('ul', { class: cls('menu', p.class), ...p }, p.children)
@@ -463,20 +449,8 @@ export const Progress = (p) => h("progress", { ...p, class: cls("progress", p.cl
 export const Radial = (p, c) => h("div", { ...p, class: cls("radial-progress", p.class), style: `--value:${p.value ?? 0};${p.style ?? ''}`, role: "progressbar", "aria-valuenow": p.value ?? 0 }, c ?? `${p.value ?? 0}%`)
 export const Radio = (p) => h("input", { ...p, type: "radio", class: cls("radio", p.class) });
 export const Range = (p) => h("input", { ...p, type: "range", class: cls("range", p.class) });
-export const Rating = (p) => {
-  const name = rand('rating')
-  const stars = p.children ?? Array.from({ length: p.count || 5 }, (_, i) => {
-    const v = i + 1
-    return h('input', {
-      type: 'radio',
-      name,
-      class: cls('mask', p.mask || 'mask-star'),
-      checked: () => get(p.value) === v,
-      onchange: () => isFn(p.value) ? p.value(v) : p.onchange?.(v)
-    })
-  })
-  return h('div', { class: cls('rating', p.class), ...p }, stars)
-}
+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: () => get(p.value) === i, onchange: () => isFn(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)

--- a/dist/sigpro-ui.esm.js
+++ b/dist/sigpro-ui.esm.js
@@ -43,6 +43,7 @@ __export(exports_All, {
  SkeletonText: () => SkeletonText,
  Skeleton: () => Skeleton,
  Select: () => Select,
+  RatingItems: () => RatingItems,
  Rating: () => Rating,
  Range: () => Range,
  Radio: () => Radio,
@@ -52,6 +53,7 @@ __export(exports_All, {
  Modal: () => Modal,
  Menu: () => Menu,
  Loading: () => Loading,
+  ListRows: () => ListRows,
  List: () => List,
  Kbd: () => Kbd,
  Input: () => Input,
@@ -71,6 +73,7 @@ __export(exports_All, {
  Divider: () => Divider,
  Datepicker: () => Datepicker,
  Colorpicker: () => Colorpicker,
+  ColorPalette: () => ColorPalette,
  Checkbox: () => Checkbox,
  ChatImage: () => ChatImage,
  ChatHeader: () => ChatHeader,
@@ -713,7 +716,19 @@ var ChatHeader = (p2, c) => O("div", { ...p2, class: cls("chat-header", p2.class
 var ChatImage = (p2, c) => O("div", { ...p2, class: cls("chat-image avatar", p2.class) }, O("div", { class: "w-10 rounded-full" }, typeof c === "string" ? O("img", { src: c, alt: "avatar" }) : c));
 var Checkbox = (p2) => O("input", { ...p2, type: "checkbox", class: cls("checkbox", p2.class) });
 var Colorpicker = (p2) => {
-  const isOpen = S(false);
+  const current = () => get(p2.value) || "#000000";
+  return Dropdown({}, [
+    DropdownButton({ class: "btn" }, [
+      O("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
+      p2.label && O("span", {}, p2.label)
+    ]),
+    DropdownContent({ class: "p-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p2.value, onchange: (c) => {
+      isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
+      close();
+    } }))
+  ]);
+};
+var ColorPalette = (p2) => {
  const current = () => get(p2.value) || "#000000";
  const palette = [
    "#000",
@@ -781,28 +796,8 @@ var Colorpicker = (p2) => {
    "#d946ef",
    "#fae8ff"
  ];
-  const pick = (c) => {
-    isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
-    isOpen(false);
-  };
-  return O("div", { class: cls("relative w-fit", p2.class) }, [
-    O("button", {
-      type: "button",
-      class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
-      onclick: (e) => {
-        e.stopPropagation();
-        isOpen(!isOpen());
-      }
-    }, [
-      O("div", { class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0", style: () => `background-color: ${current()}` }),
-      p2.label && O("span", { class: "opacity-80" }, p2.label)
-    ]),
-    z(isOpen, () => [
-      O("div", {
-        class: "fixed inset-0 z-[100]",
-        onclick: () => isOpen(false)
-      }),
-      O("div", { class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none" }, O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("button", {
+  const pick = (c) => isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
+  return O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("button", {
    type: "button",
    style: `background-color: ${c}`,
    class: () => {
@@ -810,9 +805,7 @@ var Colorpicker = (p2) => {
      return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
    },
    onclick: () => pick(c)
-      }))))
-    ])
-  ]);
+  })));
 };
 var Datepicker = (p2) => {
  const isOpen = S(false);
@@ -986,13 +979,8 @@ var Input = (p2) => {
  ]);
 };
 var Kbd = (p2, c) => O("kbd", { ...p2, class: cls("kbd", p2.class) }, c);
-var List = (p2, c) => {
-  if (!p2.items)
-    return O("ul", { ...p2, class: cls("list", p2.class) }, c);
-  return O("ul", { ...p2, class: cls("list", p2.class) }, [
-    K(p2.items, (item, i) => O("li", { class: cls("list-row", item.class) }, typeof p2.render === "function" ? p2.render(item, i) : item), p2.key)
-  ]);
-};
+var List = (p2, c) => O("ul", { ...p2, class: cls("list", p2.class) }, c);
+var ListRows = (p2) => () => (get(p2.items) || []).map((item, idx) => O("li", { class: cls("list-row", p2.class, item?.class) }, typeof p2.render === "function" ? p2.render(item, idx) : item));
 var Loading = (p2, c) => O("span", { ...p2, class: cls("loading loading-spinner", p2.class) }, c);
 var Menu = (p2) => {
  if (p2.children !== undefined)
@@ -1044,20 +1032,8 @@ var Progress = (p2) => O("progress", { ...p2, class: cls("progress", p2.class) }
 var Radial = (p2, c) => O("div", { ...p2, class: cls("radial-progress", p2.class), style: `--value:${p2.value ?? 0};${p2.style ?? ""}`, role: "progressbar", "aria-valuenow": p2.value ?? 0 }, c ?? `${p2.value ?? 0}%`);
 var Radio = (p2) => O("input", { ...p2, type: "radio", class: cls("radio", p2.class) });
 var Range = (p2) => O("input", { ...p2, type: "range", class: cls("range", p2.class) });
-var Rating = (p2) => {
-  const name = rand("rating");
-  const stars = p2.children ?? Array.from({ length: p2.count || 5 }, (_2, i) => {
-    const v2 = i + 1;
-    return O("input", {
-      type: "radio",
-      name,
-      class: cls("mask", p2.mask || "mask-star"),
-      checked: () => get(p2.value) === v2,
-      onchange: () => isFn(p2.value) ? p2.value(v2) : p2.onchange?.(v2)
-    });
-  });
-  return O("div", { class: cls("rating", p2.class), ...p2 }, stars);
-};
+var Rating = (p2, c) => O("div", { ...p2, class: "rating" }, c);
+var RatingItems = (p2) => [...Array(p2.count)].map((_2, i) => O("input", { class: cls("mask", p2.class), name: p2.name, type: "radio", checked: () => get(p2.value) === i, onchange: () => isFn(p2.value) ? p2.value(i) : p2.onchange?.(i) }));
 var Select = (p2, c) => {
  if (c !== undefined)
    return O("select", { class: cls("select", p2.class), ...p2 }, c);
--- a/dist/sigpro-ui.esm.min.js
+++ b/dist/sigpro-ui.esm.min.js
--- a/dist/sigpro-ui.js
+++ b/dist/sigpro-ui.js
@@ -74,6 +74,7 @@
    SkeletonText: () => SkeletonText,
    Skeleton: () => Skeleton,
    Select: () => Select,
+    RatingItems: () => RatingItems,
    Rating: () => Rating,
    Range: () => Range,
    Radio: () => Radio,
@@ -83,6 +84,7 @@
    Modal: () => Modal,
    Menu: () => Menu,
    Loading: () => Loading,
+    ListRows: () => ListRows,
    List: () => List,
    Kbd: () => Kbd,
    Input: () => Input,
@@ -102,6 +104,7 @@
    Divider: () => Divider,
    Datepicker: () => Datepicker,
    Colorpicker: () => Colorpicker,
+    ColorPalette: () => ColorPalette,
    Checkbox: () => Checkbox,
    ChatImage: () => ChatImage,
    ChatHeader: () => ChatHeader,
@@ -744,7 +747,19 @@
  var ChatImage = (p2, c) => O("div", { ...p2, class: cls("chat-image avatar", p2.class) }, O("div", { class: "w-10 rounded-full" }, typeof c === "string" ? O("img", { src: c, alt: "avatar" }) : c));
  var Checkbox = (p2) => O("input", { ...p2, type: "checkbox", class: cls("checkbox", p2.class) });
  var Colorpicker = (p2) => {
-    const isOpen = S(false);
+    const current = () => get(p2.value) || "#000000";
+    return Dropdown({}, [
+      DropdownButton({ class: "btn" }, [
+        O("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
+        p2.label && O("span", {}, p2.label)
+      ]),
+      DropdownContent({ class: "p-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p2.value, onchange: (c) => {
+        isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
+        close();
+      } }))
+    ]);
+  };
+  var ColorPalette = (p2) => {
    const current = () => get(p2.value) || "#000000";
    const palette = [
      "#000",
@@ -812,28 +827,8 @@
      "#d946ef",
      "#fae8ff"
    ];
-    const pick = (c) => {
-      isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
-      isOpen(false);
-    };
-    return O("div", { class: cls("relative w-fit", p2.class) }, [
-      O("button", {
-        type: "button",
-        class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
-        onclick: (e) => {
-          e.stopPropagation();
-          isOpen(!isOpen());
-        }
-      }, [
-        O("div", { class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0", style: () => `background-color: ${current()}` }),
-        p2.label && O("span", { class: "opacity-80" }, p2.label)
-      ]),
-      z(isOpen, () => [
-        O("div", {
-          class: "fixed inset-0 z-[100]",
-          onclick: () => isOpen(false)
-        }),
-        O("div", { class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none" }, O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("button", {
+    const pick = (c) => isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
+    return O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("button", {
      type: "button",
      style: `background-color: ${c}`,
      class: () => {
@@ -841,9 +836,7 @@
        return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
      },
      onclick: () => pick(c)
-        }))))
-      ])
-    ]);
+    })));
  };
  var Datepicker = (p2) => {
    const isOpen = S(false);
@@ -1017,13 +1010,8 @@
    ]);
  };
  var Kbd = (p2, c) => O("kbd", { ...p2, class: cls("kbd", p2.class) }, c);
-  var List = (p2, c) => {
-    if (!p2.items)
-      return O("ul", { ...p2, class: cls("list", p2.class) }, c);
-    return O("ul", { ...p2, class: cls("list", p2.class) }, [
-      K(p2.items, (item, i) => O("li", { class: cls("list-row", item.class) }, typeof p2.render === "function" ? p2.render(item, i) : item), p2.key)
-    ]);
-  };
+  var List = (p2, c) => O("ul", { ...p2, class: cls("list", p2.class) }, c);
+  var ListRows = (p2) => () => (get(p2.items) || []).map((item, idx) => O("li", { class: cls("list-row", p2.class, item?.class) }, typeof p2.render === "function" ? p2.render(item, idx) : item));
  var Loading = (p2, c) => O("span", { ...p2, class: cls("loading loading-spinner", p2.class) }, c);
  var Menu = (p2) => {
    if (p2.children !== undefined)
@@ -1075,20 +1063,8 @@
  var Radial = (p2, c) => O("div", { ...p2, class: cls("radial-progress", p2.class), style: `--value:${p2.value ?? 0};${p2.style ?? ""}`, role: "progressbar", "aria-valuenow": p2.value ?? 0 }, c ?? `${p2.value ?? 0}%`);
  var Radio = (p2) => O("input", { ...p2, type: "radio", class: cls("radio", p2.class) });
  var Range = (p2) => O("input", { ...p2, type: "range", class: cls("range", p2.class) });
-  var Rating = (p2) => {
-    const name = rand("rating");
-    const stars = p2.children ?? Array.from({ length: p2.count || 5 }, (_2, i) => {
-      const v2 = i + 1;
-      return O("input", {
-        type: "radio",
-        name,
-        class: cls("mask", p2.mask || "mask-star"),
-        checked: () => get(p2.value) === v2,
-        onchange: () => isFn(p2.value) ? p2.value(v2) : p2.onchange?.(v2)
-      });
-    });
-    return O("div", { class: cls("rating", p2.class), ...p2 }, stars);
-  };
+  var Rating = (p2, c) => O("div", { ...p2, class: "rating" }, c);
+  var RatingItems = (p2) => [...Array(p2.count)].map((_2, i) => O("input", { class: cls("mask", p2.class), name: p2.name, type: "radio", checked: () => get(p2.value) === i, onchange: () => isFn(p2.value) ? p2.value(i) : p2.onchange?.(i) }));
  var Select = (p2, c) => {
    if (c !== undefined)
      return O("select", { class: cls("select", p2.class), ...p2 }, c);
--- a/dist/sigpro-ui.min.js
+++ b/dist/sigpro-ui.min.js
--- a/docs/demo_display.md
+++ b/docs/demo_display.md
@@ -44,7 +44,22 @@ mount(
  '#demo-indicator'
 );
 ```
+## List
+<div id="demo-list"></div>

+```js
+const items = $(['Dashboard', 'Settings', 'Help'])
+
+mount(
+  List({ class: 'bg-base-200 rounded-box p-2' },
+    ListRows({
+      items,
+      render: (item) => span({ class: 'font-bold' }, item)
+    })
+  ),
+  '#demo-list'
+)
+```
 ## Stack
 <div id="demo-stack"></div>

--- a/docs/demo_forms.md
+++ b/docs/demo_forms.md
@@ -76,6 +76,8 @@ const date = $('');
 mount(
  Datepicker({
    value: date,
+    range: true,
+    hour: true, 
    placeholder: 'Select date',
    onChange: (val) => console.log('Date:', val)
  }),
@@ -143,17 +145,14 @@ mount(
 <div id="demo-rating"></div>

 ```js
-const stars = $('');
+const stars = $(0)

 mount(
-  Rating({
-    value: stars,
-    count: 5,
-    mask: 'mask-star',
-    onchange: (v) => console.log('Rated:', v)
-  }),
+  Rating({}, [
+    RatingItems({ count: 5, value: stars, name: 'rat1', class:"mask-star" }),
+  ]),
  '#demo-rating'
-);
+)
 ```

 ## Select
--- a/docs/sigpro-ui.min.js
+++ b/docs/sigpro-ui.min.js