@neut/ui 0.0.8 → 0.0.10

package/dist/lib/positioner/types.d.ts

@@ -0,0 +1,74 @@
+export type Side = "top" | "right" | "bottom" | "left";
+export type Alignment = "start" | "end";
+export type AlignedPlacement = `${Side}-${Alignment}`;
+export type Placement = Side | AlignedPlacement;
+export type Strategy = "absolute" | "fixed";
+export type Axis = "x" | "y";
+export interface Coords {
+    x: number;
+    y: number;
+}
+export interface Rect extends Coords {
+    width: number;
+    height: number;
+}
+export interface ElementRects {
+    reference: Rect;
+    floating: Rect;
+}
+export interface Elements {
+    reference: ReferenceElement;
+    floating: HTMLElement;
+}
+/**
+ * 虚拟参照元素：用于锚定到一个不存在真实 DOM 节点的位置，
+ * 最典型的场景就是右键菜单——锚点是鼠标点击的那个像素坐标，不是某个元素。
+ * 只要实现 getBoundingClientRect() 就能像真实 HTMLElement 一样参与定位计算。
+ */
+export interface VirtualElement {
+    getBoundingClientRect(): Rect;
+    /**
+     * 可选：关联一个真实 DOM 节点，autoUpdate 会用它去查找可滚动祖先容器
+     * （虚拟元素本身没有父节点链，无法直接判断哪些祖先滚动会影响这个点的位置）。
+     */
+    contextElement?: Element;
+}
+export type ReferenceElement = Element | VirtualElement;
+export interface MiddlewareData {
+    [key: string]: any;
+}
+/** 传给每个 middleware 的当前计算状态 */
+export interface MiddlewareState extends Coords {
+    initialPlacement: Placement;
+    placement: Placement;
+    strategy: Strategy;
+    rects: ElementRects;
+    elements: Elements;
+    middlewareData: MiddlewareData;
+}
+export interface MiddlewareReturn extends Partial<Coords> {
+    data?: any;
+    /**
+     * 若返回该字段，表示需要用新的 placement 重新计算一轮，
+     * 主循环会用新 placement 重跑一次（用于 flip 等场景）。
+     */
+    reset?: boolean | {
+        placement?: Placement;
+    };
+}
+export interface Middleware {
+    name: string;
+    fn(state: MiddlewareState): MiddlewareReturn;
+}
+export interface ComputePositionConfig {
+    placement?: Placement;
+    strategy?: Strategy;
+    middleware?: Middleware[];
+}
+export interface ComputePositionReturn extends Coords {
+    placement: Placement;
+    strategy: Strategy;
+    middlewareData: MiddlewareData;
+}
+export interface Boundary extends Rect {
+}

package/dist/lib/positioner/utils/dom.d.ts

@@ -0,0 +1,16 @@
+import { ReferenceElement, Rect, Strategy } from '../types';
+/** 把 DOMRect 转成纯数据对象（视口坐标系）；同时兼容虚拟参照元素 */
+export declare function getViewportRect(el: ReferenceElement): Rect;
+/**
+ * 根据 strategy 得到参与计算的矩形：
+ * - fixed：直接用视口坐标（配合 position:fixed 使用最简单可靠）
+ * - absolute：加上页面滚动偏移，换算成“文档坐标”
+ *   （假设 floating 元素最终被挂载在 <body> 下，即最近定位祖先是 body/html，
+ *    这是 Portal 到 body 的常见用法；如果你的 floating 元素有自定义的
+ *    非 static 定位祖先，请优先使用 strategy: 'fixed'）
+ */
+export declare function getRectRelativeTo(el: ReferenceElement, strategy: Strategy): Rect;
+/** 当前视口作为默认边界（用于 shift / flip 的溢出检测），strategy 决定坐标系 */
+export declare function getViewportBoundary(strategy: Strategy, padding?: number): Rect;
+/** 找到所有可能影响布局的可滚动祖先 + window，用于 autoUpdate 监听 scroll/resize */
+export declare function getOverflowAncestors(node: Element): Array<Element | Window>;

package/dist/lib/positioner/utils/dom.js

@@ -0,0 +1,43 @@
+//#region src/lib/positioner/utils/dom.ts
+function e(e) {
+	let t = e.getBoundingClientRect();
+	return {
+		x: t.x,
+		y: t.y,
+		width: t.width,
+		height: t.height
+	};
+}
+function t(t, n) {
+	let r = e(t);
+	if (n === "fixed") return r;
+	let i = window.scrollX ?? window.pageXOffset, a = window.scrollY ?? window.pageYOffset;
+	return {
+		x: r.x + i,
+		y: r.y + a,
+		width: r.width,
+		height: r.height
+	};
+}
+function n(e, t = 0) {
+	let n = document.documentElement.clientWidth, r = document.documentElement.clientHeight, i = e === "fixed" ? 0 : window.scrollX ?? window.pageXOffset, a = e === "fixed" ? 0 : window.scrollY ?? window.pageYOffset;
+	return {
+		x: i + t,
+		y: a + t,
+		width: n - t * 2,
+		height: r - t * 2
+	};
+}
+function r(e) {
+	let { overflow: t, overflowX: n, overflowY: r } = getComputedStyle(e);
+	return /auto|scroll|overlay|hidden/.test(t + n + r);
+}
+function i(e) {
+	let t = [], n = e.parentElement;
+	for (; n;) r(n) && t.push(n), n = n.parentElement;
+	return t.push(window), t;
+}
+//#endregion
+export { i as getOverflowAncestors, t as getRectRelativeTo, n as getViewportBoundary, e as getViewportRect };
+
+//# sourceMappingURL=dom.js.map

package/dist/lib/positioner/utils/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","names":[],"sources":["../../../../src/lib/positioner/utils/dom.ts"],"sourcesContent":["import type { ReferenceElement, Rect, Strategy } from \"../types\";\n\n/** 把 DOMRect 转成纯数据对象（视口坐标系）；同时兼容虚拟参照元素 */\nexport function getViewportRect(el: ReferenceElement): Rect {\n  const rect = el.getBoundingClientRect();\n  return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };\n}\n\n/**\n * 根据 strategy 得到参与计算的矩形：\n * - fixed：直接用视口坐标（配合 position:fixed 使用最简单可靠）\n * - absolute：加上页面滚动偏移，换算成“文档坐标”\n *   （假设 floating 元素最终被挂载在 <body> 下，即最近定位祖先是 body/html，\n *    这是 Portal 到 body 的常见用法；如果你的 floating 元素有自定义的\n *    非 static 定位祖先，请优先使用 strategy: 'fixed'）\n */\nexport function getRectRelativeTo(\n  el: ReferenceElement,\n  strategy: Strategy,\n): Rect {\n  const rect = getViewportRect(el);\n  if (strategy === \"fixed\") return rect;\n  const scrollX = window.scrollX ?? window.pageXOffset;\n  const scrollY = window.scrollY ?? window.pageYOffset;\n  return {\n    x: rect.x + scrollX,\n    y: rect.y + scrollY,\n    width: rect.width,\n    height: rect.height,\n  };\n}\n\n/** 当前视口作为默认边界（用于 shift / flip 的溢出检测），strategy 决定坐标系 */\nexport function getViewportBoundary(strategy: Strategy, padding = 0): Rect {\n  const width = document.documentElement.clientWidth;\n  const height = document.documentElement.clientHeight;\n  const scrollX =\n    strategy === \"fixed\" ? 0 : (window.scrollX ?? window.pageXOffset);\n  const scrollY =\n    strategy === \"fixed\" ? 0 : (window.scrollY ?? window.pageYOffset);\n  return {\n    x: scrollX + padding,\n    y: scrollY + padding,\n    width: width - padding * 2,\n    height: height - padding * 2,\n  };\n}\n\nfunction isOverflowElement(el: Element): boolean {\n  const { overflow, overflowX, overflowY } = getComputedStyle(el);\n  return /auto|scroll|overlay|hidden/.test(overflow + overflowX + overflowY);\n}\n\n/** 找到所有可能影响布局的可滚动祖先 + window，用于 autoUpdate 监听 scroll/resize */\nexport function getOverflowAncestors(node: Element): Array<Element | Window> {\n  const result: Array<Element | Window> = [];\n  let el: Element | null = node.parentElement;\n\n  while (el) {\n    if (isOverflowElement(el)) {\n      result.push(el);\n    }\n    el = el.parentElement;\n  }\n\n  result.push(window);\n  return result;\n}\n"],"mappings":";AAGA,SAAgB,EAAgB,GAA4B;CAC1D,IAAM,IAAO,EAAG,sBAAsB;CACtC,OAAO;EAAE,GAAG,EAAK;EAAG,GAAG,EAAK;EAAG,OAAO,EAAK;EAAO,QAAQ,EAAK;CAAO;AACxE;AAUA,SAAgB,EACd,GACA,GACM;CACN,IAAM,IAAO,EAAgB,CAAE;CAC/B,IAAI,MAAa,SAAS,OAAO;CACjC,IAAM,IAAU,OAAO,WAAW,OAAO,aACnC,IAAU,OAAO,WAAW,OAAO;CACzC,OAAO;EACL,GAAG,EAAK,IAAI;EACZ,GAAG,EAAK,IAAI;EACZ,OAAO,EAAK;EACZ,QAAQ,EAAK;CACf;AACF;AAGA,SAAgB,EAAoB,GAAoB,IAAU,GAAS;CACzE,IAAM,IAAQ,SAAS,gBAAgB,aACjC,IAAS,SAAS,gBAAgB,cAClC,IACJ,MAAa,UAAU,IAAK,OAAO,WAAW,OAAO,aACjD,IACJ,MAAa,UAAU,IAAK,OAAO,WAAW,OAAO;CACvD,OAAO;EACL,GAAG,IAAU;EACb,GAAG,IAAU;EACb,OAAO,IAAQ,IAAU;EACzB,QAAQ,IAAS,IAAU;CAC7B;AACF;AAEA,SAAS,EAAkB,GAAsB;CAC/C,IAAM,EAAE,aAAU,cAAW,iBAAc,iBAAiB,CAAE;CAC9D,OAAO,6BAA6B,KAAK,IAAW,IAAY,CAAS;AAC3E;AAGA,SAAgB,EAAqB,GAAwC;CAC3E,IAAM,IAAkC,CAAC,GACrC,IAAqB,EAAK;CAE9B,OAAO,IAIL,AAHI,EAAkB,CAAE,KACtB,EAAO,KAAK,CAAE,GAEhB,IAAK,EAAG;CAIV,OADA,EAAO,KAAK,MAAM,GACX;AACT"}

package/dist/lib/positioner/virtual-element.d.ts

@@ -0,0 +1,21 @@
+import { VirtualElement } from './types';
+export interface PointOptions {
+    x: number;
+    y: number;
+    /** 可选：关联一个真实 DOM 节点，供 autoUpdate 查找可滚动祖先使用 */
+    contextElement?: Element;
+}
+/**
+ * 创建一个锚定到具体像素坐标的虚拟参照元素（宽高均为 0），
+ * 常见用途：右键菜单锚定到鼠标点击位置、拖拽跟随光标、按坐标弹出的提示等。
+ *
+ * @example
+ * ```ts
+ * const [point, setPoint] = createSignal<VirtualElement>();
+ * el.addEventListener('contextmenu', (e) => {
+ *   e.preventDefault();
+ *   setPoint(createVirtualElement({ x: e.clientX, y: e.clientY, contextElement: el }));
+ * });
+ * ```
+ */
+export declare function createVirtualElement(point: PointOptions): VirtualElement;

package/dist/types/props.types.d.ts

@@ -1,4 +1,5 @@
 import { ComponentProps, JSX, ValidComponent } from 'solid-js';
+import { DynamicProps } from 'solid-js/web';
 export type EmptyObject = Record<never, never>;
 export type MouseEventHandler<T extends keyof HTMLElementTagNameMap> = (e?: MouseEvent & {
     currentTarget: HTMLElementTagNameMap[T];
@@ -8,10 +9,6 @@ export type TouchEventHandler<T extends keyof HTMLElementTagNameMap> = (e: Touch
     currentTarget: HTMLElementTagNameMap[T];
     target: Element;
 }) => void;
-type AsProp<T extends ValidComponent, Enable extends boolean> = Enable extends true ? {
-    as?: T;
-} : EmptyObject;
-export type PolymorphicProps<T extends ValidComponent, P = EmptyObject, EnableAs extends boolean = true> = P & Omit<ComponentProps<T>, keyof P> & AsProp<T, EnableAs>;
 export interface BaseProps {
     class?: string;
     classList?: Record<string, boolean | undefined>;
@@ -22,15 +19,19 @@ export type NonNullableProps<T, K extends keyof T> = Omit<T, K> & {
     [P in K]-?: Exclude<T[P], null | undefined>;
 };
 /**
- * 将任意含 `as` 属性的多态 Props 解析为内部确定类型
+ * 将任意含 `component` 属性的多态 Props 解析为内部确定类型
  *
- * - 若 TProps 含 `as?: T`，则展开 T 对应的 ComponentProps
+ * - 若 TProps 含 `component?:T`，则展开 T 对应的 ComponentProps
  * - 否则回退到 TDefault 的 ComponentProps
  */
-export type ResolvedProps<TProps, TDefault extends ValidComponent> = ("as" extends keyof TProps ? NonNullable<TProps["as"]> : TDefault) extends infer TComp ? TComp extends ValidComponent ? Omit<TProps, "as"> & ComponentProps<TComp> & {
-    as?: ValidComponent;
+export type ResolvedProps<TProps, TDefault extends ValidComponent> = ("component" extends keyof TProps ? NonNullable<TProps["component"]> : TDefault) extends infer TComp ? TComp extends ValidComponent ? Omit<TProps, "component"> & ComponentProps<TComp> & {
+    component?: ValidComponent;
 } : TProps & {
-    as?: ValidComponent;
+    component?: ValidComponent;
 } : never;
 export type HTMLAttributes<T extends ValidComponent> = Omit<ComponentProps<T>, keyof BaseProps> & BaseProps;
+type PolymorphicProp<T extends ValidComponent, Enable extends boolean> = Enable extends true ? {
+    component?: T;
+} : EmptyObject;
+export type PolymorphicProps<T extends ValidComponent, O = EmptyObject, EnableAs extends boolean = true> = O & Omit<DynamicProps<T>, keyof O | "component"> & PolymorphicProp<T, EnableAs>;
 export {};