@neut/ui 0.0.15 → 0.0.17

package/dist/hooks/useScrollLock.d.ts

@@ -0,0 +1,16 @@
+import { Accessor } from 'solid-js';
+export interface UseScrollLockOptions {
+    /**
+     * 允许在锁滚动期间继续滚动的容器选择器(通常是浮层自身)。
+     * 未命中该选择器的滚轮/触摸滚动会被拦截;不传则整个页面都锁定滚动。
+     */
+    allowedSelector?: string;
+}
+/**
+ * 浮层打开时锁定页面滚动,关闭后恢复——对齐 Base UI 的 modal 行为
+ * (文档滚动被锁定、浮层之外的滚轮/触摸滚动被拦截),避免浮窗锚点随页面滚动而"飘移"。
+ *
+ * 多个浮层可同时持锁(引用计数);`allowedSelector` 命中的容器内仍可滚动,
+ * 通常传入浮层自身,例如 Popover 传 `[data-slot="popover-content"]`。
+ */
+export declare function useScrollLock(locked: Accessor<boolean>, options?: UseScrollLockOptions): void;

package/dist/hooks/useScrollLock.js

@@ -0,0 +1,61 @@
+import { createEffect as e, onCleanup as t } from "solid-js";
+//#region src/hooks/useScrollLock.ts
+var n = 0, r, i = /* @__PURE__ */ new Set();
+function a(e) {
+	let { overflow: t, overflowX: n, overflowY: r } = getComputedStyle(e);
+	return /auto|scroll|overlay|hidden/.test(t + n + r);
+}
+function o() {
+	let e = document.documentElement;
+	return a(e) ? e : document.body;
+}
+function s() {
+	return typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("scrollbar-gutter", "stable");
+}
+function c(e) {
+	if (!(e instanceof Element)) return !1;
+	for (let t of i) if (e.closest(t)) return !0;
+	return !1;
+}
+function l() {
+	let e = document.documentElement, t = document.body, n = o(), r = {
+		htmlScrollbarGutter: e.style.scrollbarGutter,
+		scrollerOverflowX: n.style.overflowX,
+		scrollerOverflowY: n.style.overflowY,
+		bodyPaddingRight: t.style.paddingRight,
+		scrollTop: n.scrollTop,
+		scrollLeft: n.scrollLeft
+	}, i = Math.max(0, window.innerWidth - e.clientWidth), a = s();
+	if (i > 0) {
+		if (a) e.style.scrollbarGutter = "stable";
+		else {
+			let e = Number.parseFloat(getComputedStyle(t).paddingRight) || 0;
+			t.style.paddingRight = `${e + i}px`;
+		}
+	}
+	n.style.overflowX = "hidden", n.style.overflowY = "hidden";
+	let l = (e) => {
+		c(e.target) || e.preventDefault();
+	};
+	return document.addEventListener("wheel", l, { passive: !1 }), document.addEventListener("touchmove", l, { passive: !1 }), () => {
+		e.style.scrollbarGutter = r.htmlScrollbarGutter, a || (t.style.paddingRight = r.bodyPaddingRight), n.style.overflowX = r.scrollerOverflowX, n.style.overflowY = r.scrollerOverflowY, document.removeEventListener("wheel", l), document.removeEventListener("touchmove", l), n.scrollTop = r.scrollTop, n.scrollLeft = r.scrollLeft;
+	};
+}
+function u(e) {
+	n += 1, e && i.add(e), n === 1 && (r = l());
+	let t = !1;
+	return () => {
+		t || (t = !0, --n, n === 0 && (r?.(), r = void 0, i.clear()));
+	};
+}
+function d(n, r) {
+	e(() => {
+		if (!n()) return;
+		let e = u(r?.allowedSelector);
+		t(e);
+	});
+}
+//#endregion
+export { d as useScrollLock };
+
+//# sourceMappingURL=useScrollLock.js.map

package/dist/hooks/useScrollLock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollLock.js","names":["lockCount","release","allowedSelectors","isOverflowElement","el","overflow","overflowX","overflowY","getViewportScroller","html","supportsStableScrollbarGutter","isWithinAllowedScroll","target","selector","lockViewport","body","scroller","previous","scrollbarWidth","gutterSupported","padding","preventScroll","event","acquireLock","allowedSelector","released","useScrollLock","locked","unlock","options"],"sources":["../../src/hooks/useScrollLock.ts"],"sourcesContent":["import { createEffect, onCleanup, type Accessor } from \"solid-js\";\n\nexport interface UseScrollLockOptions {\n  /**\n   * 允许在锁滚动期间继续滚动的容器选择器(通常是浮层自身)。\n   * 未命中该选择器的滚轮/触摸滚动会被拦截;不传则整个页面都锁定滚动。\n   */\n  allowedSelector?: string;\n}\n\n// 多个浮层/嵌套浮层可能同时持锁,用计数避免其中一个关闭就提前恢复页面滚动。\nlet lockCount = 0;\nlet release: (() => void) | undefined;\n// 各持锁浮层允许滚动的容器选择器。preventScroll 读取的是实时集合,\n// 因此即使某个选择器在锁生效之后才加入,也能立即对它放行。\nconst allowedSelectors = new Set<string>();\n\n/** 元素自身是否建立了滚动容器(与 positioner 里的判断口径一致) */\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/**\n * 页面的滚动容器:html 自己建立了滚动上下文时锁 html,否则锁 body\n * ——把 overflow 写在另一个元素上并不会锁住页面(Base UI 同样的判断)。\n */\nfunction getViewportScroller(): HTMLElement {\n  const html = document.documentElement;\n  return isOverflowElement(html) ? html : document.body;\n}\n\nfunction supportsStableScrollbarGutter(): boolean {\n  return (\n    typeof CSS !== \"undefined\" &&\n    typeof CSS.supports === \"function\" &&\n    CSS.supports(\"scrollbar-gutter\", \"stable\")\n  );\n}\n\nfunction isWithinAllowedScroll(target: EventTarget | null): boolean {\n  if (!(target instanceof Element)) return false;\n  for (const selector of allowedSelectors) {\n    if (target.closest(selector)) return true;\n  }\n  return false;\n}\n\nfunction lockViewport(): () => void {\n  const html = document.documentElement;\n  const body = document.body;\n  const scroller = getViewportScroller();\n\n  const previous = {\n    htmlScrollbarGutter: html.style.scrollbarGutter,\n    scrollerOverflowX: scroller.style.overflowX,\n    scrollerOverflowY: scroller.style.overflowY,\n    bodyPaddingRight: body.style.paddingRight,\n    scrollTop: scroller.scrollTop,\n    scrollLeft: scroller.scrollLeft,\n  };\n\n  // 抵消滚动条消失带来的横向抖动:能用 scrollbar-gutter 就用它,\n  // 否则退化成给 body 补一个滚动条宽度的右内边距。\n  // 只有页面自身真的存在占位滚动条时才需要补偿:滚动条长在某个嵌套容器上时,\n  // 锁 html/body 并不会移除那条滚动条,再给 html 加 gutter 只会额外多出一条空白\n  // (滚动条 + gutter 双倍宽度),反而破坏布局。\n  const scrollbarWidth = Math.max(0, window.innerWidth - html.clientWidth);\n  const gutterSupported = supportsStableScrollbarGutter();\n  if (scrollbarWidth > 0) {\n    if (gutterSupported) {\n      html.style.scrollbarGutter = \"stable\";\n    } else {\n      const padding =\n        Number.parseFloat(getComputedStyle(body).paddingRight) || 0;\n      body.style.paddingRight = `${padding + scrollbarWidth}px`;\n    }\n  }\n\n  scroller.style.overflowX = \"hidden\";\n  scroller.style.overflowY = \"hidden\";\n\n  // 兜底:部分浏览器即使 overflow:hidden 仍能被滚轮/触摸滚动,\n  // 因此直接拦截浮层之外的滚动事件;浮层内部(命中 allowedSelector)保留滚动能力。\n  const preventScroll = (event: Event) => {\n    if (isWithinAllowedScroll(event.target)) return;\n    event.preventDefault();\n  };\n  document.addEventListener(\"wheel\", preventScroll, { passive: false });\n  document.addEventListener(\"touchmove\", preventScroll, { passive: false });\n\n  return () => {\n    html.style.scrollbarGutter = previous.htmlScrollbarGutter;\n    if (!gutterSupported) {\n      body.style.paddingRight = previous.bodyPaddingRight;\n    }\n    scroller.style.overflowX = previous.scrollerOverflowX;\n    scroller.style.overflowY = previous.scrollerOverflowY;\n    document.removeEventListener(\"wheel\", preventScroll);\n    document.removeEventListener(\"touchmove\", preventScroll);\n    scroller.scrollTop = previous.scrollTop;\n    scroller.scrollLeft = previous.scrollLeft;\n  };\n}\n\nfunction acquireLock(allowedSelector?: string): () => void {\n  lockCount += 1;\n  if (allowedSelector) allowedSelectors.add(allowedSelector);\n  if (lockCount === 1) release = lockViewport();\n\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    lockCount -= 1;\n    if (lockCount === 0) {\n      release?.();\n      release = undefined;\n      // 全部释放后清空放行名单,避免残留的选择器影响下一次锁。\n      allowedSelectors.clear();\n    }\n  };\n}\n\n/**\n * 浮层打开时锁定页面滚动,关闭后恢复——对齐 Base UI 的 modal 行为\n * (文档滚动被锁定、浮层之外的滚轮/触摸滚动被拦截),避免浮窗锚点随页面滚动而\"飘移\"。\n *\n * 多个浮层可同时持锁(引用计数);`allowedSelector` 命中的容器内仍可滚动,\n * 通常传入浮层自身,例如 Popover 传 `[data-slot=\"popover-content\"]`。\n */\nexport function useScrollLock(\n  locked: Accessor<boolean>,\n  options?: UseScrollLockOptions,\n) {\n  createEffect(() => {\n    if (!locked()) return;\n    const unlock = acquireLock(options?.allowedSelector);\n    onCleanup(unlock);\n  });\n}\n"],"mappings":";;AAWA,IAAIA,IAAY,GACZC,GAGEC,oBAAmB,IAAI,IAAY;AAGzC,SAASC,EAAkB,GAAsB;CAC/C,IAAM,EAAE,aAAU,cAAW,iBAAc,iBAAiBC,CAAE;CAC9D,OAAO,6BAA6B,KAAKC,IAAWC,IAAYC,CAAS;AAC3E;AAMA,SAASC,IAAmC;CAC1C,IAAMC,IAAO,SAAS;CACtB,OAAON,EAAkBM,CAAI,IAAIA,IAAO,SAAS;AACnD;AAEA,SAASC,IAAyC;CAChD,OACE,OAAO,MAAQ,OACf,OAAO,IAAI,YAAa,cACxB,IAAI,SAAS,oBAAoB,QAAQ;AAE7C;AAEA,SAASC,EAAsB,GAAqC;CAClE,IAAI,EAAEC,aAAkB,UAAU,OAAO;CACzC,KAAK,IAAMC,KAAYX,GACrB,IAAIU,EAAO,QAAQC,CAAQ,GAAG,OAAO;CAEvC,OAAO;AACT;AAEA,SAASC,IAA2B;CAClC,IAAML,IAAO,SAAS,iBAChBM,IAAO,SAAS,MAChBC,IAAWR,EAAoB,GAE/BS,IAAW;EACf,qBAAqBR,EAAK,MAAM;EAChC,mBAAmBO,EAAS,MAAM;EAClC,mBAAmBA,EAAS,MAAM;EAClC,kBAAkBD,EAAK,MAAM;EAC7B,WAAWC,EAAS;EACpB,YAAYA,EAAS;CACvB,GAOME,IAAiB,KAAK,IAAI,GAAG,OAAO,aAAaT,EAAK,WAAW,GACjEU,IAAkBT,EAA8B;CACtD,IAAIQ,IAAiB,GAAG;EACtB,IAAIC,GACF,EAAK,MAAM,kBAAkB;OACxB;GACL,IAAMC,IACJ,OAAO,WAAW,iBAAiBL,CAAI,CAAC,CAAC,YAAY,KAAK;GAC5D,EAAK,MAAM,eAAe,GAAGK,IAAUF,EAAe;EACxD;CACF;CAGA,AADA,EAAS,MAAM,YAAY,UAC3B,EAAS,MAAM,YAAY;CAI3B,IAAMG,KAAiB,MAAiB;EACtC,AAAIV,EAAsBW,EAAM,MAAM,KACtCA,EAAM,eAAe;CACvB;CAIA,OAHA,SAAS,iBAAiB,SAASD,GAAe,EAAE,SAAS,GAAM,CAAC,GACpE,SAAS,iBAAiB,aAAaA,GAAe,EAAE,SAAS,GAAM,CAAC,SAE3D;EAUX,AATA,EAAK,MAAM,kBAAkBJ,EAAS,qBACjCE,MACH,EAAK,MAAM,eAAeF,EAAS,mBAErC,EAAS,MAAM,YAAYA,EAAS,mBACpC,EAAS,MAAM,YAAYA,EAAS,mBACpC,SAAS,oBAAoB,SAASI,CAAa,GACnD,SAAS,oBAAoB,aAAaA,CAAa,GACvD,EAAS,YAAYJ,EAAS,WAC9B,EAAS,aAAaA,EAAS;CACjC;AACF;AAEA,SAASM,EAAY,GAAsC;CAGzD,AAFA,KAAa,GACTC,KAAiBtB,EAAiB,IAAIsB,CAAe,GACrDxB,MAAc,MAAG,IAAUc,EAAa;CAE5C,IAAIW,IAAW;CACf,aAAa;EACX,AAAIA,MACJ,IAAW,IACX,KACIzB,MAAc,MAChBC,IAAU,GACV,IAAU,KAAA,GAEVC,EAAiB,MAAM;CAE3B;AACF;AASA,SAAgBwB,EACd,GACA,GACA;CACA,QAAmB;EACjB,IAAI,CAACC,EAAO,GAAG;EACf,IAAMC,IAASL,EAAYM,GAAS,eAAe;EACnD,EAAUD,CAAM;CAClB,CAAC;AACH"}

package/dist/index.d.ts

@@ -2,34 +2,49 @@ export * from './components/accordion';
 export * from './components/alert';
 export * from './components/alert-dialog';
 export * from './components/aspect-ratio';
+export * from './components/attachment';
 export * from './components/avatar';
 export * from './components/badge';
 export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/button-group';
+export * from './components/bubble';
 export * from './components/card';
 export * from './components/calendar';
 export * from './components/carousel';
 export * from './components/checkbox';
 export * from './components/collapsible';
 export * from './components/combobox';
+export * from './components/context-menu';
 export * from './components/date-picker';
+export * from './components/data-table';
 export * from './components/dialog';
+export * from './components/drawer';
+export * from './components/dropdown-menu';
 export * from './components/empty';
 export * from './components/field';
+export * from './components/hover-card';
 export * from './components/image';
 export * from './components/input';
 export * from './components/input-group';
 export * from './components/item';
 export * from './components/kbd';
 export * from './components/label';
+export * from './components/marker';
+export * from './components/message';
+export * from './components/message-scroller';
 export * from './components/pagination';
+export * from './components/number-input';
 export * from './components/popover';
 export * from './components/progress';
+export * from './components/questionnaire';
 export * from './components/radio-group';
+export * from './components/resizable';
 export * from './components/scroll-area';
+export * from './components/scroll-arrows';
 export * from './components/select';
 export * from './components/separator';
+export * from './components/sheet';
 export * from './components/sidebar';
 export * from './components/skeleton';
 export * from './components/slider';
@@ -37,6 +52,8 @@ export * from './components/spinner';
 export * from './components/switch';
 export * from './components/tabs';
 export * from './components/textarea';
+export * from './components/time-picker';
+export * from './components/table';
 export * from './components/toast';
 export * from './components/toggle';
 export * from './components/toggle-group';