@greypan/web-ui 2.1.8 → 3.0.0

package/dist/shared/scroll-lock/scroll-lock.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-lock.js","names":[],"sources":["../../../src/shared/scroll-lock/scroll-lock.ts"],"sourcesContent":["let lockCount = 0\nlet savedOverflow = ''\nlet savedScrollY = 0\n\nexport interface ScrollLockLease {\n  readonly isLocked: boolean\n  sync(shouldLock: boolean): void\n  release(): void\n}\n\n/**\n * 锁定页面滚动。支持嵌套调用（引用计数），仅在最后一个锁释放时恢复。\n */\nexport function lockScroll() {\n  if (lockCount === 0) {\n    savedScrollY = window.scrollY\n    savedOverflow = document.documentElement.style.overflow\n    document.documentElement.style.overflow = 'hidden'\n    // 固定 body 防止 iOS 弹性滚动\n    document.body.style.position = 'fixed'\n    document.body.style.top = `-${savedScrollY}px`\n    document.body.style.width = '100%'\n  }\n  lockCount++\n}\n\n/**\n * 解锁页面滚动。与 lockScroll 配对，引用归零时恢复。\n */\nexport function unlockScroll() {\n  lockCount = Math.max(0, lockCount - 1)\n  if (lockCount === 0) {\n    document.documentElement.style.overflow = savedOverflow\n    document.body.style.position = ''\n    document.body.style.top = ''\n    document.body.style.width = ''\n    window.scrollTo(0, savedScrollY)\n  }\n}\n\n/**\n * 组件实例持有的滚动锁租约。它只会释放自身已获取的那一次锁，\n * 避免卸载、属性切换和嵌套浮层互相影响。\n */\nexport function createScrollLockLease(): ScrollLockLease {\n  let isLocked = false\n\n  return {\n    get isLocked() {\n      return isLocked\n    },\n\n    sync(shouldLock) {\n      if (shouldLock === isLocked) return\n      if (shouldLock) lockScroll()\n      else unlockScroll()\n      isLocked = shouldLock\n    },\n\n    release() {\n      this.sync(false)\n    }\n  }\n}\n"],"mappings":";AAAA,IAAI,IAAY,GACZ,IAAgB,IAChB,IAAe;AAWnB,SAAgB,IAAa;CAU3B,AATI,MAAc,MAChB,IAAe,OAAO,SACtB,IAAgB,SAAS,gBAAgB,MAAM,UAC/C,SAAS,gBAAgB,MAAM,WAAW,UAE1C,SAAS,KAAK,MAAM,WAAW,SAC/B,SAAS,KAAK,MAAM,MAAM,IAAI,EAAa,KAC3C,SAAS,KAAK,MAAM,QAAQ,SAE9B;AACF;AAKA,SAAgB,IAAe;CAE7B,AADA,IAAY,KAAK,IAAI,GAAG,IAAY,CAAC,GACjC,MAAc,MAChB,SAAS,gBAAgB,MAAM,WAAW,GAC1C,SAAS,KAAK,MAAM,WAAW,IAC/B,SAAS,KAAK,MAAM,MAAM,IAC1B,SAAS,KAAK,MAAM,QAAQ,IAC5B,OAAO,SAAS,GAAG,CAAY;AAEnC;AAMA,SAAgB,IAAyC;CACvD,IAAI,IAAW;CAEf,OAAO;EACL,IAAI,WAAW;GACb,OAAO;EACT;EAEA,KAAK,GAAY;GACX,MAAe,MACf,IAAY,EAAW,IACtB,EAAa,GAClB,IAAW;EACb;EAEA,UAAU;GACR,KAAK,KAAK,EAAK;EACjB;CACF;AACF"}
+{"version":3,"file":"scroll-lock.js","names":[],"sources":["../../../src/shared/scroll-lock/scroll-lock.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nlet lockCount = 0\nlet savedOverflow = ''\nlet savedScrollY = 0\n\nexport interface ScrollLockLease {\n  readonly isLocked: boolean\n  sync(shouldLock: boolean): void\n  release(): void\n}\n\n/**\n * 锁定页面滚动。支持嵌套调用（引用计数），仅在最后一个锁释放时恢复。\n */\nexport function lockScroll() {\n  if (lockCount === 0) {\n    savedScrollY = window.scrollY\n    savedOverflow = document.documentElement.style.overflow\n    document.documentElement.style.overflow = 'hidden'\n    // 固定 body 防止 iOS 弹性滚动\n    document.body.style.position = 'fixed'\n    document.body.style.top = `-${savedScrollY}px`\n    document.body.style.width = '100%'\n  }\n  lockCount++\n}\n\n/**\n * 解锁页面滚动。与 lockScroll 配对，引用归零时恢复。\n */\nexport function unlockScroll() {\n  lockCount = Math.max(0, lockCount - 1)\n  if (lockCount === 0) {\n    document.documentElement.style.overflow = savedOverflow\n    document.body.style.position = ''\n    document.body.style.top = ''\n    document.body.style.width = ''\n    window.scrollTo(0, savedScrollY)\n  }\n}\n\n/**\n * 构建组件实例持有的滚动锁租约。每个租约仅释放自身获得的那一次锁，\n * 因此卸载、属性切换和嵌套浮层不会互相影响。\n */\nexport const defineScrollLockLease = () =>\n  definePlugin<ScrollLockLease, Record<never, never>>(() => {\n    let isLocked = false\n\n    const sync = (shouldLock: boolean) => {\n      if (shouldLock === isLocked) return\n      if (shouldLock) lockScroll()\n      else unlockScroll()\n      isLocked = shouldLock\n    }\n\n    return {\n      get isLocked() {\n        return isLocked\n      },\n\n      sync,\n\n      release() {\n        sync(false)\n      }\n    }\n  })\n"],"mappings":";;AAEA,IAAI,IAAY,GACZ,IAAgB,IAChB,IAAe;AAWnB,SAAgB,IAAa;CAU3B,AATI,MAAc,MAChB,IAAe,OAAO,SACtB,IAAgB,SAAS,gBAAgB,MAAM,UAC/C,SAAS,gBAAgB,MAAM,WAAW,UAE1C,SAAS,KAAK,MAAM,WAAW,SAC/B,SAAS,KAAK,MAAM,MAAM,IAAI,EAAa,KAC3C,SAAS,KAAK,MAAM,QAAQ,SAE9B;AACF;AAKA,SAAgB,IAAe;CAE7B,AADA,IAAY,KAAK,IAAI,GAAG,IAAY,CAAC,GACjC,MAAc,MAChB,SAAS,gBAAgB,MAAM,WAAW,GAC1C,SAAS,KAAK,MAAM,WAAW,IAC/B,SAAS,KAAK,MAAM,MAAM,IAC1B,SAAS,KAAK,MAAM,QAAQ,IAC5B,OAAO,SAAS,GAAG,CAAY;AAEnC;AAMA,IAAa,UACX,QAA0D;CACxD,IAAI,IAAW,IAET,KAAQ,MAAwB;EAChC,MAAe,MACf,IAAY,EAAW,IACtB,EAAa,GAClB,IAAW;CACb;CAEA,OAAO;EACL,IAAI,WAAW;GACb,OAAO;EACT;EAEA;EAEA,UAAU;GACR,EAAK,EAAK;EACZ;CACF;AACF,CAAC"}

package/dist/shared/theme/overlay-root.js

@@ -1,9 +1,9 @@
 import e from "../../assets/glass.js";
-import t from "../../assets/menu-portal.js";
-import n from "../../assets/overlay-motion.js";
+import t from "../../assets/overlay-motion.js";
+import n from "../../assets/menu-portal.js";
 import r from "../../assets/toast-containers.js";
 //#region src/shared/theme/overlay-root.ts
-var i = "data-wui-overlay-root", a = `${e}\n${r}\n${t}\n${n}`;
+var i = "data-wui-overlay-root", a = `${e}\n${r}\n${n}\n${t}`;
 function o(e) {
 	let t = document.createElement("style");
 	t.textContent = a, e.prepend(t);

package/dist/types/react.d.ts

@@ -1,45 +1,19 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
-import { WebUiAvatar, WebUiBackTop, WebUiBadge, WebUiButton, WebUiButtonGroup, WebUiCheckbox, WebUiCheckboxGroup, WebUiContextMenu, WebUiDialog, WebUiDrawer, WebUiEmpty, WebUiDropdownDivider, WebUiDropdownHeader, WebUiDropdownItem, WebUiDropdown, WebUiIcon, WebUiInput, WebUiInputNumber, WebUiLayout, WebUiOption, WebUiPopover, WebUiRadio, WebUiRadioGroup, WebUiSegmented, WebUiSegmentedTrigger, WebUiSelect, WebUiSlider, WebUiSpinner, WebUiTextarea, WebUiTheme, WebUiToast, WebUiSwitch, WebUiSvgDrawLines, WebUiTooltip } from '../components';
-import { ExactEventListeners, ExtractProps, OmitLitBase } from './utils';
-export type LitReactWrapper<T extends HTMLElement> = T extends {
-    readonly $events: infer E;
-} ? DetailedHTMLProps<ExtractProps<OmitLitBase<T>> & ExactEventListeners<E> & HTMLAttributes<T>, T> : DetailedHTMLProps<ExtractProps<OmitLitBase<T>> & HTMLAttributes<T>, T>;
-export interface WebUiComponents {
-    'web-ui-avatar': LitReactWrapper<WebUiAvatar>;
-    'web-ui-back-top': LitReactWrapper<WebUiBackTop>;
-    'web-ui-badge': LitReactWrapper<WebUiBadge>;
-    'web-ui-button': LitReactWrapper<WebUiButton>;
-    'web-ui-button-group': LitReactWrapper<WebUiButtonGroup>;
-    'web-ui-checkbox': LitReactWrapper<WebUiCheckbox>;
-    'web-ui-checkbox-group': LitReactWrapper<WebUiCheckboxGroup>;
-    'web-ui-context-menu': LitReactWrapper<WebUiContextMenu>;
-    'web-ui-dialog': LitReactWrapper<WebUiDialog>;
-    'web-ui-drawer': LitReactWrapper<WebUiDrawer>;
-    'web-ui-empty': LitReactWrapper<WebUiEmpty>;
-    'web-ui-dropdown-divider': LitReactWrapper<WebUiDropdownDivider>;
-    'web-ui-dropdown-header': LitReactWrapper<WebUiDropdownHeader>;
-    'web-ui-dropdown-item': LitReactWrapper<WebUiDropdownItem>;
-    'web-ui-dropdown': LitReactWrapper<WebUiDropdown>;
-    'web-ui-icon': LitReactWrapper<WebUiIcon>;
-    'web-ui-input': LitReactWrapper<WebUiInput>;
-    'web-ui-input-number': LitReactWrapper<WebUiInputNumber>;
-    'web-ui-select': LitReactWrapper<WebUiSelect>;
-    'web-ui-slider': LitReactWrapper<WebUiSlider>;
-    'web-ui-spinner': LitReactWrapper<WebUiSpinner>;
-    'web-ui-svg-draw-lines': LitReactWrapper<WebUiSvgDrawLines>;
-    'web-ui-option': LitReactWrapper<WebUiOption>;
-    'web-ui-popover': LitReactWrapper<WebUiPopover>;
-    'web-ui-radio': LitReactWrapper<WebUiRadio>;
-    'web-ui-radio-group': LitReactWrapper<WebUiRadioGroup>;
-    'web-ui-segmented': LitReactWrapper<WebUiSegmented>;
-    'web-ui-segmented-trigger': LitReactWrapper<WebUiSegmentedTrigger>;
-    'web-ui-layout': LitReactWrapper<WebUiLayout>;
-    'web-ui-switch': LitReactWrapper<WebUiSwitch>;
-    'web-ui-textarea': LitReactWrapper<WebUiTextarea>;
-    'web-ui-theme': LitReactWrapper<WebUiTheme>;
-    'web-ui-toast': LitReactWrapper<WebUiToast>;
-    'web-ui-tooltip': LitReactWrapper<WebUiTooltip>;
-}
+import { WebUiElementMap } from '../components';
+import { ExtractProps, OmitLitBase, ReactCustomEventListeners } from './utils';
+/**
+ * Lit Web Component 的 React 包装类型。
+ *
+ * - 标准 DOM 事件（input/change/focus/blur）使用 React 惯用 camelCase handler，
+ *   `currentTarget` 收窄为组件实例（`target` 遵循 React SyntheticEvent 语义，不承诺）。
+ * - kebab-case 自定义事件（open-change/toast-close）生成精确的 `on<event>` 绑定。
+ * - 与 `HTMLAttributes<T>` 全量交叉：组件自身属性与通用 HTML 属性（含原生事件）共存，
+ *   重叠键类型相容（如 `placeholder`），组件类型在交叉中自然生效；`ref` 保持具体元素类型。
+ */
+export type LitReactWrapper<T extends HTMLElement> = DetailedHTMLProps<ExtractProps<OmitLitBase<T>> & ReactCustomEventListeners<T> & HTMLAttributes<T>, T>;
+export type WebUiComponents = {
+    [K in keyof WebUiElementMap]: LitReactWrapper<WebUiElementMap[K]>;
+};
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements extends WebUiComponents {

package/dist/types/utils.d.ts

@@ -10,10 +10,39 @@ export type ExtractProps<T> = {
 };
 export type OmitLitBase<T> = Omit<T, keyof HTMLElement | keyof LitElement>;
 /**
- * 将 EventMap 转换为 React 19 Custom Element 的精确事件键。
- * 例如 { 'open-change': CustomEvent<...> } → { 'onopen-change'?: (e: CustomEvent<...>) => void }
+ * 从组件 `$events` 接口提取公共事件映射。
+ * 无 `$events` 的组件（无公共事件）得到空映射。
  */
-export type ExactEventListeners<T> = {
-    [K in keyof T & string as `on${K}`]?: (e: T[K]) => void;
+export type ComponentEvents<T> = T extends {
+    readonly $events: infer E;
+} ? E : Record<never, never>;
+/**
+ * 事件宿主化：在事件本体上注入组件实例 target/currentTarget 类型。
+ * 浏览器组合事件在宿主上重定向后，`event.target` 恒等于宿主元素，因此该收窄零例外。
+ * target/currentTarget 标为 readonly，与 DOM `Event` 契约一致。
+ */
+export type WithHost<T extends EventTarget, E> = E extends Event ? E & {
+    readonly target: T;
+    readonly currentTarget: T;
+} : E;
+/**
+ * 组件宿主化事件映射：`$events` 的每个条目都收窄 target/currentTarget 到组件实例。
+ * React 自定义事件与 Vue emits 均从该映射生成 handler 类型。
+ */
+export type HostEventMap<T extends HTMLElement> = {
+    [K in keyof ComponentEvents<T>]: WithHost<T, ComponentEvents<T>[K]>;
+};
+/**
+ * 具名 handler 的显式事件类型，用于 Vue 命名 handler 等无法从上下文推导 `$event` 的位置。
+ * 用法：`function onChange(e: WebUiEvent<WebUiSelect, 'change'>)`
+ */
+export type WebUiEvent<T extends HTMLElement, K extends keyof HostEventMap<T>> = HostEventMap<T>[K];
+/**
+ * React 自定义事件（kebab-case 事件名）→ `on<event>` 绑定。
+ * 标准 DOM 事件（input/change/focus/blur）由 React 的 camelCase handler 提供，
+ * 不在适配层生成 lowercase 别名。
+ */
+export type ReactCustomEventListeners<T extends HTMLElement> = {
+    [K in keyof HostEventMap<T> & string as K extends `${string}-${string}` ? `on${K}` : never]?: (e: HostEventMap<T>[K]) => void;
 };
 export {};

package/dist/types/vue.d.ts

@@ -1,60 +1,28 @@
-import { ComponentOptionsMixin, DefineComponent, HTMLAttributes } from 'vue';
-import { WebUiAvatar, WebUiBackTop, WebUiBadge, WebUiButton, WebUiButtonGroup, WebUiCheckbox, WebUiCheckboxGroup, WebUiContextMenu, WebUiDialog, WebUiDrawer, WebUiEmpty, WebUiDropdownDivider, WebUiDropdownHeader, WebUiDropdownItem, WebUiDropdown, WebUiIcon, WebUiInput, WebUiInputNumber, WebUiLayout, WebUiOption, WebUiPopover, WebUiRadio, WebUiRadioGroup, WebUiSegmented, WebUiSegmentedTrigger, WebUiSelect, WebUiSlider, WebUiSpinner, WebUiTextarea, WebUiTheme, WebUiToast, WebUiSwitch, WebUiTooltip, WebUiSvgDrawLines } from '../components';
-import { ExtractProps, OmitLitBase } from './utils';
-type ExtractVueEmits<T> = T extends {
+import { ComponentOptionsMixin, DefineComponent, EmitsToProps, HTMLAttributes, PublicProps } from 'vue';
+import { WebUiElementMap } from '../components';
+import { ComponentEvents, ExtractProps, OmitLitBase, WithHost } from './utils';
+type VueEmits<T extends HTMLElement> = T extends {
     readonly $events: infer E;
 } ? {
-    [K in keyof E]: (e: E[K]) => void;
-} : Record<string, never>;
+    [K in keyof E]: (e: WithHost<T, E[K]>) => void;
+} : Record<never, never>;
+type VueNativeAttrs<T extends HTMLElement> = Omit<HTMLAttributes, `on${Capitalize<keyof ComponentEvents<T> & string>}`>;
+type VueProps<T extends HTMLElement> = ExtractProps<OmitLitBase<T>> & VueNativeAttrs<T>;
+type VueResolvedProps<T extends HTMLElement> = Readonly<VueProps<T>> & (VueEmits<T> extends Record<string, never> ? unknown : EmitsToProps<VueEmits<T>>);
 /**
  * Lit Web Component 的 Vue 包装类型。
  *
- * - Props: 从 LitElement 推导的组件属性 + Vue HTMLAttributes（含原生 DOM 事件）
- * - Emits: 从 $events 接口提取的自定义事件，Volar 可识别 @event 绑定
+ * - Props: 组件属性 + 局部 HTMLAttributes（含原生 DOM 事件），不污染其他 Vue 组件
+ * - Emits: 从 $events 提取的宿主化事件，Volar 可识别 @event 绑定
+ * - TypeEl: 模板 ref/$el 类型为具体 Custom Element 实例
+ * - 不再全局扩展 ComponentCustomProps
  */
-export type LitVueWrapper<T> = T extends {
-    readonly $events: infer E;
-} ? DefineComponent<ExtractProps<OmitLitBase<T>>, Record<string, never>, Record<string, never>, Record<string, never>, Record<string, never>, ComponentOptionsMixin, ComponentOptionsMixin, ExtractVueEmits<T>> : DefineComponent<ExtractProps<OmitLitBase<T>>>;
-export interface WebUiComponents {
-    'web-ui-avatar': LitVueWrapper<WebUiAvatar>;
-    'web-ui-back-top': LitVueWrapper<WebUiBackTop>;
-    'web-ui-badge': LitVueWrapper<WebUiBadge>;
-    'web-ui-button': LitVueWrapper<WebUiButton>;
-    'web-ui-button-group': LitVueWrapper<WebUiButtonGroup>;
-    'web-ui-checkbox': LitVueWrapper<WebUiCheckbox>;
-    'web-ui-checkbox-group': LitVueWrapper<WebUiCheckboxGroup>;
-    'web-ui-context-menu': LitVueWrapper<WebUiContextMenu>;
-    'web-ui-dialog': LitVueWrapper<WebUiDialog>;
-    'web-ui-drawer': LitVueWrapper<WebUiDrawer>;
-    'web-ui-empty': LitVueWrapper<WebUiEmpty>;
-    'web-ui-dropdown-divider': LitVueWrapper<WebUiDropdownDivider>;
-    'web-ui-dropdown-header': LitVueWrapper<WebUiDropdownHeader>;
-    'web-ui-dropdown-item': LitVueWrapper<WebUiDropdownItem>;
-    'web-ui-dropdown': LitVueWrapper<WebUiDropdown>;
-    'web-ui-icon': LitVueWrapper<WebUiIcon>;
-    'web-ui-input': LitVueWrapper<WebUiInput>;
-    'web-ui-input-number': LitVueWrapper<WebUiInputNumber>;
-    'web-ui-select': LitVueWrapper<WebUiSelect>;
-    'web-ui-slider': LitVueWrapper<WebUiSlider>;
-    'web-ui-spinner': LitVueWrapper<WebUiSpinner>;
-    'web-ui-svg-draw-lines': LitVueWrapper<WebUiSvgDrawLines>;
-    'web-ui-option': LitVueWrapper<WebUiOption>;
-    'web-ui-popover': LitVueWrapper<WebUiPopover>;
-    'web-ui-radio': LitVueWrapper<WebUiRadio>;
-    'web-ui-radio-group': LitVueWrapper<WebUiRadioGroup>;
-    'web-ui-segmented': LitVueWrapper<WebUiSegmented>;
-    'web-ui-segmented-trigger': LitVueWrapper<WebUiSegmentedTrigger>;
-    'web-ui-layout': LitVueWrapper<WebUiLayout>;
-    'web-ui-switch': LitVueWrapper<WebUiSwitch>;
-    'web-ui-textarea': LitVueWrapper<WebUiTextarea>;
-    'web-ui-theme': LitVueWrapper<WebUiTheme>;
-    'web-ui-toast': LitVueWrapper<WebUiToast>;
-    'web-ui-tooltip': LitVueWrapper<WebUiTooltip>;
-}
+export type LitVueWrapper<T extends HTMLElement> = DefineComponent<VueProps<T>, Record<string, never>, Record<string, never>, Record<string, never>, Record<string, never>, ComponentOptionsMixin, ComponentOptionsMixin, VueEmits<T>, string, PublicProps, VueResolvedProps<T>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, string, Record<never, never>, true, Record<never, never>, T>;
+export type WebUiComponents = {
+    [K in keyof WebUiElementMap]: LitVueWrapper<WebUiElementMap[K]>;
+};
 declare module 'vue' {
     interface GlobalComponents extends WebUiComponents {
     }
-    interface ComponentCustomProps extends HTMLAttributes {
-    }
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greypan/web-ui",
-  "version": "2.1.8",
+  "version": "3.0.0",
   "description": "Lit-based web components for React, Vue, and vanilla JS",
   "license": "MIT",
   "repository": {
@@ -41,8 +41,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@greypan/browser-kit": "1.7.7",
-    "@greypan/js-kit": "1.6.6"
+    "@greypan/js-kit": "1.6.6",
+    "@greypan/browser-kit": "1.7.7"
   },
   "devDependencies": {
     "@iconify-json/jam": "^1.2.3",
@@ -59,9 +59,9 @@
     "@greypan/tsconfig": "1.0.4"
   },
   "peerDependencies": {
-    "@types/react": ">=16",
+    "@types/react": ">=19",
     "lit": "^3.3.3",
-    "vue": ">=3"
+    "vue": ">=3.5"
   },
   "peerDependenciesMeta": {
     "@types/react": {