willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-content/src/components/Menu/index.css

@@ -0,0 +1,151 @@
+.willa-menu {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.willa-menu-content {
+  position: fixed;
+  z-index: var(--willa-layer-popover, 1000);
+  box-sizing: border-box;
+  display: grid;
+  min-width: 12rem;
+  max-width: min(22rem, calc(100vw - 1rem));
+  max-height: calc(100vh - 1rem);
+  gap: 0.18rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--willa-content-scrollbar-thumb) transparent;
+  -ms-overflow-style: auto;
+  overscroll-behavior: contain;
+  padding: 0.32rem;
+  border: 1px solid var(--willa-menu-border);
+  border-radius: 0.7rem;
+  background: var(--willa-menu-bg);
+  color: var(--willa-menu-text);
+  box-shadow: var(--willa-menu-shadow);
+  font-family: var(--willa-body-font);
+}
+
+.willa-menu-content::-webkit-scrollbar {
+  width: 0.36rem;
+  height: 0.36rem;
+}
+
+.willa-menu-content::-webkit-scrollbar-track,
+.willa-menu-content::-webkit-scrollbar-track-piece,
+.willa-menu-content::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.willa-menu-content::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--willa-content-scrollbar-thumb);
+}
+
+.willa-menu-content--sm {
+  font-size: 0.84rem;
+}
+
+.willa-menu-content--md {
+  font-size: 0.92rem;
+}
+
+.willa-menu-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 0.62rem;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--willa-menu-text);
+  font: inherit;
+  line-height: 1.35;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.willa-menu-content--sm .willa-menu-item {
+  min-height: 2rem;
+  padding: 0.42rem 0.52rem;
+}
+
+.willa-menu-content--md .willa-menu-item {
+  min-height: 2.35rem;
+  padding: 0.52rem 0.62rem;
+}
+
+.willa-menu-item:hover:not(:disabled),
+.willa-menu-item:focus-visible {
+  background: var(--willa-menu-item-bg-hover);
+  color: var(--willa-menu-item-text-hover);
+  outline: 0;
+}
+
+.willa-menu-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.willa-menu-item--danger {
+  color: var(--willa-menu-danger-text);
+}
+
+.willa-menu-item--danger:hover:not(:disabled),
+.willa-menu-item--danger:focus-visible {
+  background: var(--willa-menu-danger-bg-hover);
+  color: var(--willa-menu-danger-text-hover);
+}
+
+.willa-menu-item-icon,
+.willa-menu-item-trailing {
+  display: inline-flex;
+  min-width: 1em;
+  color: var(--willa-menu-muted);
+}
+
+.willa-menu-item-icon svg,
+.willa-menu-item-trailing svg {
+  width: 1em;
+  height: 1em;
+}
+
+.willa-menu-item-content {
+  display: grid;
+  min-width: 0;
+  gap: 0.14rem;
+}
+
+.willa-menu-item-label,
+.willa-menu-item-description {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.willa-menu-item-label {
+  color: inherit;
+  white-space: nowrap;
+}
+
+.willa-menu-item-description {
+  color: var(--willa-menu-muted);
+  font-size: 0.86em;
+}
+
+.willa-menu-separator {
+  height: 1px;
+  margin: 0.24rem 0.38rem;
+  background: var(--willa-menu-separator);
+}
+
+.willa-menu-empty {
+  padding: 0.6rem 0.7rem;
+  color: var(--willa-menu-muted);
+  font-size: 0.9em;
+}

package/packages/willa-content/src/components/Menu/index.tsx

@@ -0,0 +1,356 @@
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  type CSSProperties,
+  type KeyboardEvent,
+  type MouseEvent,
+  type MouseEventHandler,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import classNames from "classnames";
+import {
+  composeRefs,
+  useFloatingLayer,
+  useControllableState,
+  type FloatingPanelAlign,
+  type FloatingPanelPoint,
+  type FloatingLayerPosition,
+} from "@willa-ui/shared";
+
+export type MenuSize = "sm" | "md";
+export type MenuSide = "top" | "bottom";
+export type MenuAlign = FloatingPanelAlign;
+export type MenuTriggerType = "click" | "contextmenu";
+
+export type MenuActionItem = {
+  type?: "item";
+  value: string;
+  label: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  trailing?: ReactNode;
+  disabled?: boolean;
+  danger?: boolean;
+  onSelect?: (value: string) => void;
+};
+
+export type MenuSeparatorItem = {
+  type: "separator";
+  value?: string;
+};
+
+export type MenuItem = MenuActionItem | MenuSeparatorItem;
+
+export type MenuProps = {
+  items: Array<MenuItem>;
+  trigger: ReactElement<MenuTriggerProps>;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onSelect?: (value: string) => void;
+  size?: MenuSize;
+  side?: MenuSide;
+  align?: MenuAlign;
+  triggerType?: MenuTriggerType;
+  offset?: number;
+  closeOnSelect?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  contentClassName?: string;
+};
+
+type MenuTriggerProps = {
+  onClick?: MouseEventHandler<HTMLElement>;
+  onContextMenu?: MouseEventHandler<HTMLElement>;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+  [key: string]: unknown;
+};
+
+type MenuAnchor =
+  | {
+      type: "trigger";
+    }
+  | {
+      type: "point";
+      x: number;
+      y: number;
+    };
+
+export function Menu(props: MenuProps) {
+  const {
+    items,
+    trigger,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    onSelect,
+    size = "md",
+    side = "bottom",
+    align = "start",
+    triggerType = "click",
+    offset = 8,
+    closeOnSelect = true,
+    ariaLabel = "Menu",
+    className,
+    contentClassName,
+  } = props;
+  const id = useId();
+  const [isOpen, setMenuOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const anchorRef = useRef<MenuAnchor>({ type: "trigger" });
+  const enabledItems = useMemo(() => {
+    return items.filter(isEnabledActionItem);
+  }, [items]);
+
+  const getMenuAnchorPoint = useCallback((): FloatingPanelPoint | null => {
+    const anchor = anchorRef.current;
+    return anchor.type === "point" ? { x: anchor.x, y: anchor.y } : null;
+  }, []);
+
+  const closeMenu = useCallback(() => {
+    setMenuOpen(false);
+  }, [setMenuOpen]);
+
+  const focusFirstMenuItem = useCallback(() => {
+    const firstItem = getEnabledButtons(itemRefs.current)[0];
+    firstItem?.focus();
+  }, []);
+
+  const { position, updatePosition } = useFloatingLayer({
+    open: isOpen,
+    triggerRef,
+    floatingRef: contentRef,
+    getAnchorPoint: getMenuAnchorPoint,
+    side,
+    align,
+    offset,
+    matchAnchorMinWidth: anchorRef.current.type === "trigger",
+    restoreFocus: true,
+    onClose: closeMenu,
+    onOpenAutoFocus: focusFirstMenuItem,
+  });
+
+  const handleTriggerClick = (event: MouseEvent<HTMLElement>) => {
+    trigger.props.onClick?.(event);
+    if (triggerType !== "click") return;
+    if (!event.defaultPrevented) {
+      anchorRef.current = { type: "trigger" };
+      setMenuOpen(!isOpen);
+    }
+  };
+
+  const handleTriggerContextMenu = (event: MouseEvent<HTMLElement>) => {
+    trigger.props.onContextMenu?.(event);
+    if (triggerType !== "contextmenu" || event.defaultPrevented) return;
+
+    event.preventDefault();
+    anchorRef.current = {
+      type: "point",
+      x: event.clientX,
+      y: event.clientY,
+    };
+    if (isOpen) {
+      updatePosition();
+    }
+    setMenuOpen(true);
+  };
+
+  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    trigger.props.onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+
+    if (
+      event.key === "ArrowDown" ||
+      event.key === "Enter" ||
+      event.key === " " ||
+      event.key === "ContextMenu" ||
+      (event.shiftKey && event.key === "F10")
+    ) {
+      event.preventDefault();
+      anchorRef.current = { type: "trigger" };
+      setMenuOpen(true);
+    }
+  };
+
+  const handleContentKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeMenu();
+      return;
+    }
+
+    const enabledButtons = getEnabledButtons(itemRefs.current);
+    if (!enabledButtons.length) return;
+
+    const currentIndex = enabledButtons.findIndex(
+      (item) => item === document.activeElement,
+    );
+    const lastIndex = enabledButtons.length - 1;
+    const nextIndex = currentIndex >= lastIndex ? 0 : currentIndex + 1;
+    const previousIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1;
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      enabledButtons[nextIndex].focus();
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      enabledButtons[previousIndex].focus();
+    }
+
+    if (event.key === "Home") {
+      event.preventDefault();
+      enabledButtons[0].focus();
+    }
+
+    if (event.key === "End") {
+      event.preventDefault();
+      enabledButtons[lastIndex].focus();
+    }
+  };
+
+  const renderTrigger = () => {
+    if (!isValidElement(trigger)) return null;
+
+    const triggerElement = trigger as ReactElement<
+      MenuTriggerProps & { ref?: React.Ref<HTMLElement> }
+    >;
+
+    return cloneElement(triggerElement, {
+      ref: composeRefs(triggerElement.props.ref, triggerRef),
+      "aria-controls": isOpen ? id : undefined,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "menu",
+      onClick: handleTriggerClick,
+      onContextMenu: handleTriggerContextMenu,
+      onKeyDown: handleTriggerKeyDown,
+    } as MenuTriggerProps);
+  };
+
+  itemRefs.current = [];
+
+  return (
+    <span className={classNames("willa-menu", className)}>
+      {renderTrigger()}
+      {isOpen && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              ref={contentRef}
+              id={id}
+              className={classNames(
+                "willa-menu-content",
+                `willa-menu-content--${size}`,
+                contentClassName,
+              )}
+              style={getMenuContentStyle(position)}
+              role="menu"
+              aria-label={ariaLabel}
+              onKeyDown={handleContentKeyDown}
+            >
+              {items.map((item, index) => {
+                if (item.type === "separator") {
+                  return (
+                    <div
+                      key={item.value ?? `separator-${index}`}
+                      className="willa-menu-separator"
+                      role="separator"
+                    />
+                  );
+                }
+
+                return (
+                  <button
+                    key={item.value}
+                    ref={(element) => {
+                      itemRefs.current[index] = element;
+                    }}
+                    className={classNames(
+                      "willa-menu-item",
+                      item.danger && "willa-menu-item--danger",
+                    )}
+                    type="button"
+                    role="menuitem"
+                    disabled={item.disabled}
+                    onClick={() => {
+                      if (item.disabled) return;
+                      item.onSelect?.(item.value);
+                      onSelect?.(item.value);
+                      if (closeOnSelect) {
+                        closeMenu();
+                      }
+                    }}
+                  >
+                    {item.icon ? (
+                      <span className="willa-menu-item-icon" aria-hidden="true">
+                        {item.icon}
+                      </span>
+                    ) : null}
+                    <span className="willa-menu-item-content">
+                      <span className="willa-menu-item-label">
+                        {item.label}
+                      </span>
+                      {item.description ? (
+                        <span className="willa-menu-item-description">
+                          {item.description}
+                        </span>
+                      ) : null}
+                    </span>
+                    {item.trailing ? (
+                      <span className="willa-menu-item-trailing">
+                        {item.trailing}
+                      </span>
+                    ) : null}
+                  </button>
+                );
+              })}
+              {!enabledItems.length ? (
+                <div className="willa-menu-empty">暂无可选项</div>
+              ) : null}
+            </div>,
+            document.body,
+          )
+        : null}
+    </span>
+  );
+}
+
+const isActionItem = (item: MenuItem): item is MenuActionItem => {
+  return item.type !== "separator";
+};
+
+const isEnabledActionItem = (item: MenuItem): item is MenuActionItem => {
+  return isActionItem(item) && !item.disabled;
+};
+
+const getEnabledButtons = (items: Array<HTMLButtonElement | null>) => {
+  return items.filter((item): item is HTMLButtonElement => {
+    return item !== null && !item.disabled;
+  });
+};
+
+const getMenuContentStyle = (position?: FloatingLayerPosition) => {
+  return {
+    top: position ? `${position.top}px` : undefined,
+    left: position ? `${position.left}px` : undefined,
+    minWidth:
+      position && typeof position.minWidth === "number"
+        ? `${position.minWidth}px`
+        : undefined,
+    visibility: position ? undefined : "hidden",
+  } as CSSProperties;
+};
+
+Menu.displayName = "Menu";

package/packages/willa-content/src/components/Pagination/index.css

@@ -0,0 +1,139 @@
+.willa-pagination {
+  max-width: 100%;
+  font-family: var(--willa-body-font);
+}
+
+.willa-pagination-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.willa-pagination-control,
+.willa-pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--willa-pagination-item-size);
+  height: var(--willa-pagination-item-size);
+  padding: 0 var(--willa-pagination-item-padding-x);
+  border: 1px solid var(--willa-pagination-border);
+  border-radius: 0.5rem;
+  background: var(--willa-pagination-bg);
+  color: var(--willa-pagination-text);
+  font-size: var(--willa-pagination-font-size);
+  font-weight: 560;
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.willa-pagination-control {
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.willa-pagination-control:hover:not(:disabled) {
+  border-color: var(--willa-pagination-border-hover);
+  background: var(--willa-pagination-bg-hover);
+  color: var(--willa-pagination-text-hover);
+  transform: translateY(-1px);
+}
+
+.willa-pagination-control:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-pagination-control:disabled {
+  cursor: not-allowed;
+  color: var(--willa-pagination-disabled-text);
+  opacity: 0.62;
+  transform: none;
+}
+
+.willa-pagination-control--current,
+.willa-pagination-control--current:hover:not(:disabled) {
+  border-color: var(--willa-pagination-current-border);
+  background: var(--willa-pagination-current-bg);
+  color: var(--willa-pagination-current-text);
+  cursor: default;
+  transform: none;
+}
+
+.willa-pagination-control svg {
+  width: var(--willa-pagination-icon-size);
+  height: var(--willa-pagination-icon-size);
+}
+
+.willa-pagination-ellipsis {
+  border-color: transparent;
+  background: transparent;
+  color: var(--willa-pagination-ellipsis-text);
+}
+
+.willa-pagination-control.willa-pagination-ellipsis:hover:not(:disabled) {
+  border-color: var(--willa-pagination-border-hover);
+  background: var(--willa-pagination-bg-hover);
+  color: var(--willa-pagination-text-hover);
+}
+
+.willa-pagination--disabled {
+  opacity: 0.7;
+}
+
+.willa-pagination--sm {
+  --willa-pagination-item-size: 1.9rem;
+  --willa-pagination-item-padding-x: 0.52rem;
+  --willa-pagination-font-size: 0.78rem;
+  --willa-pagination-icon-size: 0.9rem;
+}
+
+.willa-pagination--md {
+  --willa-pagination-item-size: 2.25rem;
+  --willa-pagination-item-padding-x: 0.68rem;
+  --willa-pagination-font-size: 0.9rem;
+  --willa-pagination-icon-size: 1rem;
+}
+
+@media (hover: none) {
+  .willa-pagination-control:hover:not(:disabled) {
+    transform: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-pagination-list {
+    flex-wrap: nowrap;
+    gap: 0.3rem;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    padding-bottom: 0.1rem;
+    scrollbar-width: none;
+  }
+
+  .willa-pagination-list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .willa-pagination-control,
+  .willa-pagination-ellipsis {
+    min-width: max(var(--willa-pagination-item-size), 2.25rem);
+    height: max(var(--willa-pagination-item-size), 2.25rem);
+    touch-action: manipulation;
+  }
+
+  .willa-pagination-control-label {
+    display: none;
+  }
+}