update components

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,38 +214,20 @@ 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' },
-          palette.map(c =>
-            h('button', {
-              type: 'button',
-              style: `background-color: ${c}`,
-              class: () => {
-                const act = current().toLowerCase() === c.toLowerCase()
-                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)
-            })
-          )
-        )
-      )
-    ])
-  ])
+  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',
+        style: `background-color: ${c}`,
+        class: () => {
+          const act = current().toLowerCase() === c.toLowerCase()
+          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)
+      })
+    )
+  )
 }
 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)