@greypan/web-ui 2.1.8 → 3.0.1

package/dist/types/utils.d.ts

@@ -10,10 +10,44 @@ 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]>;
+};
+/**
+ * 组件 `$events` 中的 string 事件名。
+ * 无公共事件或仅有非 string 键的组件得到 `never`。
+ */
+export type WebUiEventName<T extends HTMLElement> = keyof ComponentEvents<T> & string;
+/**
+ * 具名 handler 的显式事件类型，用于 Vue 命名 handler 等无法从上下文推导 `$event` 的位置。
+ * 用法：`function onChange(e: WebUiEvent<WebUiSelect, 'change'>)`
+ */
+export type WebUiEvent<T extends HTMLElement, K extends WebUiEventName<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.1",
   "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/browser-kit": "1.7.8",
+    "@greypan/js-kit": "1.6.7"
   },
   "devDependencies": {
     "@iconify-json/jam": "^1.2.3",
@@ -56,12 +56,12 @@
     "lit": "^3.3.3",
     "vite-plugin-dts": "^5.0.3",
     "vue": "^3.5.39",
-    "@greypan/tsconfig": "1.0.4"
+    "@greypan/tsconfig": "1.0.5"
   },
   "peerDependencies": {
-    "@types/react": ">=16",
+    "@types/react": ">=19",
     "lit": "^3.3.3",
-    "vue": ">=3"
+    "vue": ">=3.5"
   },
   "peerDependenciesMeta": {
     "@types/react": {