@rimelight/ui 0.0.47 → 0.0.48

package/src/components/dropdown-menu/RLSDropdownMenu.tsx

@@ -9,6 +9,7 @@ import {
   type Component,
   type JSX
 } from "solid-js"
+import { Portal } from "solid-js/web"
 import type { DropdownMenuProps, DropdownMenuItem } from "./dropdown-menu"
 import { dropdownMenuTheme } from "./dropdown-menu.theme"
 import RLSIcon from "../icon/RLSIcon"
@@ -35,16 +36,52 @@ const RLSDropdownMenu: Component<RLSDropdownMenuProps> = (allProps) => {
   ])
 
   const [isOpen, setIsOpen] = createSignal(false)
+  const [coords, setCoords] = createSignal<{ top: number; left?: number; right?: number }>({
+    top: 0
+  })
   let menuContainer: HTMLDivElement | undefined
+  let menuContentRef: HTMLDivElement | undefined
+  let triggerBtn: HTMLButtonElement | undefined
+
+  const updatePosition = () => {
+    if (!triggerBtn) return
+    const rect = triggerBtn.getBoundingClientRect()
+    const align = props.content?.align || "start"
+    const top = rect.bottom + 4
+    if (align === "end") {
+      const right = window.innerWidth - rect.right
+      setCoords({ top, right })
+    } else if (align === "center") {
+      const left = rect.left + rect.width / 2
+      setCoords({ top, left })
+    } else {
+      setCoords({ top, left: rect.left })
+    }
+  }
 
   onMount(() => {
     const handleOutsideClick = (e: MouseEvent) => {
-      if (isOpen() && menuContainer && !menuContainer.contains(e.target as Node)) {
+      const target = e.target as Node
+      if (
+        isOpen() &&
+        menuContainer &&
+        !menuContainer.contains(target) &&
+        (!menuContentRef || !menuContentRef.contains(target))
+      ) {
         setIsOpen(false)
       }
     }
+    const handleScroll = () => {
+      if (isOpen()) updatePosition()
+    }
     document.addEventListener("click", handleOutsideClick)
-    onCleanup(() => document.removeEventListener("click", handleOutsideClick))
+    window.addEventListener("scroll", handleScroll, true)
+    window.addEventListener("resize", handleScroll)
+    onCleanup(() => {
+      document.removeEventListener("click", handleOutsideClick)
+      window.removeEventListener("scroll", handleScroll, true)
+      window.removeEventListener("resize", handleScroll)
+    })
   })
 
   const resolvedClasses = createMemo(() =>
@@ -63,13 +100,6 @@ const RLSDropdownMenu: Component<RLSDropdownMenuProps> = (allProps) => {
     return [props.items as DropdownMenuItem[]]
   })
 
-  const alignClass = () => {
-    const align = props.content?.align || "start"
-    if (align === "end") return "right-0"
-    if (align === "center") return "left-1/2 -translate-x-1/2"
-    return "left-0"
-  }
-
   return (
     <div
       ref={(el) => (menuContainer = el)}
@@ -78,11 +108,14 @@ const RLSDropdownMenu: Component<RLSDropdownMenuProps> = (allProps) => {
       {...rest}
     >
       <button
+        ref={(el) => (triggerBtn = el)}
         type="button"
         disabled={props.disabled}
         onClick={(e) => {
           e.stopPropagation()
-          setIsOpen(!isOpen())
+          const next = !isOpen()
+          if (next) updatePosition()
+          setIsOpen(next)
         }}
         class={resolvedClasses().trigger}
         data-slot="trigger"
@@ -101,39 +134,137 @@ const RLSDropdownMenu: Component<RLSDropdownMenuProps> = (allProps) => {
       </button>
 
       <Show when={isOpen()}>
-        <div
-          class={`${resolvedClasses().content}  ${alignClass()}`}
-          data-slot="content"
-          role="menu"
-        >
-          {props.arrow && <div class={resolvedClasses().arrow} />}
-          <div class={resolvedClasses().viewport}>
-            <For each={itemGroups()}>
-              {(group, groupIdx) => (
-                <div class={resolvedClasses().group}>
-                  {groupIdx() > 0 && <div class={resolvedClasses().separator} />}
-                  <For each={group}>
-                    {(item) => {
-                      if (item.type === "separator") {
-                        return <div class={resolvedClasses().separator} />
-                      }
-                      if (item.type === "label") {
-                        return <div class={resolvedClasses().label}>{item.label}</div>
-                      }
-
-                      const itemColor = () =>
-                        item.color === "error"
-                          ? "text-destructive hover:bg-destructive/10"
-                          : item.color === "primary"
-                            ? "text-primary hover:bg-primary/10"
-                            : ""
-
-                      if (item.to) {
+        <Portal>
+          <div
+            ref={(el) => (menuContentRef = el)}
+            class={resolvedClasses().content}
+            style={{
+              "position": "fixed",
+              "z-index": "99999",
+              "top": `${coords().top}px`,
+              ...(coords().right !== undefined
+                ? { right: `${coords().right}px`, left: "auto" }
+                : {}),
+              ...(coords().left !== undefined ? { left: `${coords().left}px` } : {})
+            }}
+            data-slot="content"
+            role="menu"
+          >
+            {props.arrow && <div class={resolvedClasses().arrow} />}
+            <div class={resolvedClasses().viewport}>
+              <For each={itemGroups()}>
+                {(group, groupIdx) => (
+                  <div class={resolvedClasses().group}>
+                    {groupIdx() > 0 && <div class={resolvedClasses().separator} />}
+                    <For each={group}>
+                      {(item) => {
+                        if (item.type === "separator") {
+                          return <div class={resolvedClasses().separator} />
+                        }
+                        if (item.type === "label") {
+                          return <div class={resolvedClasses().label}>{item.label}</div>
+                        }
+
+                        const itemColor = () =>
+                          item.color === "error"
+                            ? "text-destructive hover:bg-destructive/10"
+                            : item.color === "primary"
+                              ? "text-primary hover:bg-primary/10"
+                              : ""
+
+                        const renderLeadingContent = () => {
+                          if (item.avatar) {
+                            return (
+                              <img
+                                src={item.avatar.src}
+                                alt={item.avatar.alt || item.label || ""}
+                                class={resolvedClasses().itemLeadingAvatar}
+                              />
+                            )
+                          }
+                          if (item.icon) {
+                            return (
+                              <RLSIcon
+                                name={item.icon}
+                                size="sm"
+                                class={resolvedClasses().itemLeadingIcon}
+                              />
+                            )
+                          }
+                          return null
+                        }
+
+                        const renderTrailingContent = () => {
+                          if (!item.shortcut && (!item.kbds || item.kbds.length === 0)) return null
+                          return (
+                            <span class={resolvedClasses().itemTrailing}>
+                              {item.shortcut && (
+                                <span class={resolvedClasses().shortcut}>{item.shortcut}</span>
+                              )}
+                              {item.kbds && (
+                                <For each={item.kbds}>
+                                  {(kbd) => (
+                                    <kbd class={resolvedClasses().itemTrailingKbds}>{kbd}</kbd>
+                                  )}
+                                </For>
+                              )}
+                            </span>
+                          )
+                        }
+
+                        if (item.to) {
+                          return (
+                            <a
+                              href={item.to}
+                              target={item.target}
+                              class={`${resolvedClasses().item} ${itemColor()} ${item.class || ""}`}
+                              data-slot="item"
+                              role="menuitem"
+                              onClick={(e) => {
+                                setIsOpen(false)
+                                item.onSelect?.(e)
+                              }}
+                            >
+                              {renderLeadingContent()}
+                              <span class={resolvedClasses().itemLabel}>{item.label}</span>
+                              {renderTrailingContent()}
+                            </a>
+                          )
+                        }
+
+                        if (item.type === "checkbox") {
+                          const isChecked = () => !!item.checked
+                          return (
+                            <button
+                              type="button"
+                              disabled={item.disabled}
+                              class={`${resolvedClasses().item} ${itemColor()} ${item.class || ""}`}
+                              data-slot="item"
+                              role="menuitemcheckbox"
+                              aria-checked={isChecked()}
+                              onClick={(e) => {
+                                const next = !isChecked()
+                                item.onUpdateChecked?.(next)
+                                item.onSelect?.(e)
+                              }}
+                            >
+                              <span class="shrink-0 size-4 flex items-center justify-center border border-default rounded bg-default">
+                                <Show when={isChecked()}>
+                                  <RLSIcon name="check" size="xs" class="text-primary" />
+                                </Show>
+                              </span>
+                              {renderLeadingContent()}
+                              <span class={resolvedClasses().itemLabel}>{item.label}</span>
+                              {renderTrailingContent()}
+                            </button>
+                          )
+                        }
+
                         return (
-                          <a
-                            href={item.to}
-                            target={item.target}
-                            class={`${resolvedClasses().item}  ${itemColor()}  ${item.class || ""}`}
+                          <button
+                            type="button"
+                            disabled={item.disabled}
+                            class={`${resolvedClasses().item} ${itemColor()} ${item.class || ""}`}
                             data-slot="item"
                             role="menuitem"
                             onClick={(e) => {
@@ -141,53 +272,19 @@ const RLSDropdownMenu: Component<RLSDropdownMenuProps> = (allProps) => {
                               item.onSelect?.(e)
                             }}
                           >
-                            {item.icon && (
-                              <RLSIcon
-                                name={item.icon}
-                                size="sm"
-                                class={resolvedClasses().itemLeadingIcon}
-                              />
-                            )}
+                            {renderLeadingContent()}
                             <span class={resolvedClasses().itemLabel}>{item.label}</span>
-                            {item.shortcut && (
-                              <span class={resolvedClasses().shortcut}>{item.shortcut}</span>
-                            )}
-                          </a>
+                            {renderTrailingContent()}
+                          </button>
                         )
-                      }
-
-                      return (
-                        <button
-                          type="button"
-                          disabled={item.disabled}
-                          class={`${resolvedClasses().item}  ${itemColor()}  ${item.class || ""}`}
-                          data-slot="item"
-                          role="menuitem"
-                          onClick={(e) => {
-                            setIsOpen(false)
-                            item.onSelect?.(e)
-                          }}
-                        >
-                          {item.icon && (
-                            <RLSIcon
-                              name={item.icon}
-                              size="sm"
-                              class={resolvedClasses().itemLeadingIcon}
-                            />
-                          )}
-                          <span class={resolvedClasses().itemLabel}>{item.label}</span>
-                          {item.shortcut && (
-                            <span class={resolvedClasses().shortcut}>{item.shortcut}</span>
-                          )}
-                        </button>
-                      )
-                    }}
-                  </For>
-                </div>
-              )}
-            </For>
+                      }}
+                    </For>
+                  </div>
+                )}
+              </For>
+            </div>
           </div>
-        </div>
+        </Portal>
       </Show>
     </div>
   )

package/src/components/editor/RLSEditor.tsx

@@ -0,0 +1,26 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { EditorProps } from "./editor"
+import { editorTheme } from "./editor.theme"
+
+export interface RLSEditorProps extends EditorProps {
+  children?: JSX.Element
+}
+
+const RLSEditor: Component<RLSEditorProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    editorTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSEditor

package/src/components/empty/RLSEmpty.tsx

@@ -0,0 +1,132 @@
+import { createMemo, splitProps, For, type Component, type JSX } from "solid-js"
+import type { EmptyProps } from "./empty"
+import { emptyTheme } from "./empty.theme"
+import RLSButton from "../button/RLSButton"
+import RLSAvatar from "../avatar/RLSAvatar"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSEmptyProps extends EmptyProps {
+  children?: JSX.Element
+  headerSlot?: JSX.Element
+  leadingSlot?: JSX.Element
+  titleSlot?: JSX.Element
+  descriptionSlot?: JSX.Element
+  bodySlot?: JSX.Element
+  actionsSlot?: JSX.Element
+  footerSlot?: JSX.Element
+}
+
+const RLSEmpty: Component<RLSEmptyProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "icon",
+    "avatar",
+    "loading",
+    "loadingIcon",
+    "title",
+    "description",
+    "actions",
+    "variant",
+    "size",
+    "as",
+    "ui",
+    "class",
+    "children",
+    "headerSlot",
+    "leadingSlot",
+    "titleSlot",
+    "descriptionSlot",
+    "bodySlot",
+    "actionsSlot",
+    "footerSlot"
+  ])
+
+  const activeIcon = props.loading ? (props.loadingIcon ?? "i-lucide-loader-circle") : props.icon
+  const actionList = props.actions ?? []
+
+  const classes = createMemo(() =>
+    emptyTheme({
+      variant: props.variant ?? "outline",
+      size: props.size ?? "md",
+      loading: props.loading ?? false,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={classes()["root"]} data-slot="root" {...rest}>
+      {props.headerSlot !== undefined ? (
+        props.headerSlot
+      ) : (
+        <div class={classes()["header"]} data-slot="header">
+          {props.leadingSlot !== undefined ? (
+            props.leadingSlot
+          ) : activeIcon ? (
+            <div class={classes()["avatar"]} data-slot="avatar">
+              <RLSIcon
+                name={activeIcon}
+                class={`size-full ${props.loading ? "animate-spin" : ""}`}
+                aria-hidden="true"
+              />
+            </div>
+          ) : props.avatar ? (
+            <div class={classes()["avatar"]} data-slot="avatar">
+              <RLSAvatar {...props.avatar} />
+            </div>
+          ) : null}
+
+          {(props.title || props.titleSlot !== undefined) && (
+            <div class={classes()["title"]} data-slot="title">
+              {props.titleSlot !== undefined ? props.titleSlot : props.title}
+            </div>
+          )}
+
+          {(props.description || props.descriptionSlot !== undefined) && (
+            <div class={classes()["description"]} data-slot="description">
+              {props.descriptionSlot !== undefined ? props.descriptionSlot : props.description}
+            </div>
+          )}
+        </div>
+      )}
+
+      {(props.bodySlot !== undefined || props.children !== undefined) && (
+        <div class={classes()["body"]} data-slot="body">
+          {props.bodySlot !== undefined ? props.bodySlot : props.children}
+        </div>
+      )}
+
+      {((props.actions?.length ?? 0) > 0 || props.actionsSlot !== undefined) && (
+        <div class={classes()["actions"]} data-slot="actions">
+          {props.actionsSlot !== undefined ? (
+            props.actionsSlot
+          ) : (
+            <For each={actionList}>
+              {(action) => {
+                const { icon, label, color, variant, ...actionRest } = action
+                return (
+                  <RLSButton
+                    size={props.size === "xs" || props.size === "sm" ? "xs" : "sm"}
+                    color={(color || "primary") as any}
+                    variant={(variant || "solid") as any}
+                    {...(icon ? { leadingIcon: icon } : {})}
+                    {...actionRest}
+                  >
+                    {label}
+                  </RLSButton>
+                )
+              }}
+            </For>
+          )}
+        </div>
+      )}
+
+      {props.footerSlot !== undefined && (
+        <div class={classes()["footer"]} data-slot="footer">
+          {props.footerSlot}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default RLSEmpty

package/src/components/error/RLSError.tsx

@@ -0,0 +1,26 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ErrorProps } from "./error"
+import { errorTheme } from "./error.theme"
+
+export interface RLSErrorProps extends ErrorProps {
+  children?: JSX.Element
+}
+
+const RLSError: Component<RLSErrorProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const classes = createMemo(() =>
+    errorTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={classes()["root"]} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSError

package/src/components/field-group/RLSFieldGroup.tsx

@@ -0,0 +1,46 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { FieldGroupProps } from "./field-group"
+import { fieldGroupTheme } from "./field-group.theme"
+
+export interface RLSFieldGroupProps extends Omit<FieldGroupProps, "prepend" | "append"> {
+  prepend?: JSX.Element
+  append?: JSX.Element
+  children?: JSX.Element
+}
+
+const RLSFieldGroup: Component<RLSFieldGroupProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "prepend",
+    "append",
+    "size",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    fieldGroupTheme({
+      size: props.size ?? "md",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.prepend ? (
+        <div class={resolvedClasses().prepend} data-slot="prepend">
+          {props.prepend}
+        </div>
+      ) : null}
+      {props.children}
+      {props.append ? (
+        <div class={resolvedClasses().append} data-slot="append">
+          {props.append}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default RLSFieldGroup

package/src/components/fieldset/RLSFieldset.tsx

@@ -0,0 +1,26 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { FieldsetProps } from "./fieldset"
+import { fieldsetTheme } from "./fieldset.theme"
+
+export interface RLSFieldsetProps extends FieldsetProps {
+  children?: JSX.Element
+}
+
+const RLSFieldset: Component<RLSFieldsetProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    fieldsetTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSFieldset