feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+12
View File
@@ -0,0 +1,12 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { ElTooltipTriggerProps, ElTooltipTriggerPropsPublic, TooltipTriggerType, UseTooltipTriggerProps, useTooltipTriggerProps, useTooltipTriggerPropsDefaults } from "./src/trigger.js";
import { ElTooltipContentProps, ElTooltipContentPropsPublic, TooltipContentInstance, useTooltipContentProps, useTooltipContentPropsDefaults } from "./src/content.js";
import { ElTooltipProps, ElTooltipPropsPublic, TooltipInstance, UseTooltipProps, tooltipEmits, useTooltipModelToggle, useTooltipModelToggleEmits, useTooltipModelToggleProps, useTooltipProps } from "./src/tooltip.js";
import { _default } from "./src/tooltip.vue.js";
import { ElTooltipInjectionContext, TOOLTIP_INJECTION_KEY } from "./src/constants.js";
//#region ../../packages/components/tooltip/index.d.ts
declare const ElTooltip: SFCWithInstall<typeof _default>;
//#endregion
export { ElTooltip, ElTooltip as default, ElTooltipContentProps, ElTooltipContentPropsPublic, ElTooltipInjectionContext, ElTooltipProps, ElTooltipPropsPublic, ElTooltipTriggerProps, ElTooltipTriggerPropsPublic, TOOLTIP_INJECTION_KEY, TooltipContentInstance, TooltipInstance, TooltipTriggerType, UseTooltipProps, UseTooltipTriggerProps, tooltipEmits, useTooltipContentProps, useTooltipContentPropsDefaults, useTooltipModelToggle, useTooltipModelToggleEmits, useTooltipModelToggleProps, useTooltipProps, useTooltipTriggerProps, useTooltipTriggerPropsDefaults };
+25
View File
@@ -0,0 +1,25 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_content = require('./src/content.js');
const require_trigger = require('./src/trigger.js');
const require_tooltip = require('./src/tooltip.js');
const require_constants = require('./src/constants.js');
const require_tooltip$1 = require('./src/tooltip2.js');
//#region ../../packages/components/tooltip/index.ts
const ElTooltip = require_install.withInstall(require_tooltip$1.default);
//#endregion
exports.ElTooltip = ElTooltip;
exports.default = ElTooltip;
exports.TOOLTIP_INJECTION_KEY = require_constants.TOOLTIP_INJECTION_KEY;
exports.tooltipEmits = require_tooltip.tooltipEmits;
exports.useTooltipContentProps = require_content.useTooltipContentProps;
exports.useTooltipContentPropsDefaults = require_content.useTooltipContentPropsDefaults;
exports.useTooltipModelToggle = require_tooltip.useTooltipModelToggle;
exports.useTooltipModelToggleEmits = require_tooltip.useTooltipModelToggleEmits;
exports.useTooltipModelToggleProps = require_tooltip.useTooltipModelToggleProps;
exports.useTooltipProps = require_tooltip.useTooltipProps;
exports.useTooltipTriggerProps = require_trigger.useTooltipTriggerProps;
exports.useTooltipTriggerPropsDefaults = require_trigger.useTooltipTriggerPropsDefaults;
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","Tooltip"],"sources":["../../../../../packages/components/tooltip/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Tooltip from './src/tooltip.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElTooltip: SFCWithInstall<typeof Tooltip> = withInstall(Tooltip)\nexport * from './src/tooltip'\nexport * from './src/trigger'\nexport * from './src/content'\nexport * from './src/constants'\nexport default ElTooltip\n"],"mappings":";;;;;;;;;AAKA,MAAa,YAA4CA,4BAAYC,0BAAQ"}
@@ -0,0 +1,23 @@
import { Arrayable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { TooltipTriggerType } from "./trigger.js";
import { InjectionKey, Ref } from "vue";
//#region ../../packages/components/tooltip/src/constants.d.ts
type ElTooltipInjectionContext = {
controlled: Ref<boolean>;
id: Ref<string>;
open: Ref<boolean>;
trigger: Ref<Arrayable<TooltipTriggerType>>;
onOpen: (e?: Event) => void;
onClose: (e?: Event) => void;
onToggle: (e: Event) => void;
onShow: () => void;
onHide: () => void;
onBeforeShow: () => void;
onBeforeHide: () => void;
updatePopper: () => void;
};
declare const TOOLTIP_INJECTION_KEY: InjectionKey<ElTooltipInjectionContext>;
//#endregion
export { ElTooltipInjectionContext, TOOLTIP_INJECTION_KEY };
@@ -0,0 +1,8 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/tooltip/src/constants.ts
const TOOLTIP_INJECTION_KEY = Symbol("elTooltip");
//#endregion
exports.TOOLTIP_INJECTION_KEY = TOOLTIP_INJECTION_KEY;
//# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
{"version":3,"file":"constants.js","names":[],"sources":["../../../../../../packages/components/tooltip/src/constants.ts"],"sourcesContent":["import type { Arrayable } from '@element-plus/utils'\nimport type { InjectionKey, Ref } from 'vue'\nimport type { TooltipTriggerType } from './trigger'\n\nexport type ElTooltipInjectionContext = {\n controlled: Ref<boolean>\n id: Ref<string>\n open: Ref<boolean>\n trigger: Ref<Arrayable<TooltipTriggerType>>\n onOpen: (e?: Event) => void\n onClose: (e?: Event) => void\n onToggle: (e: Event) => void\n onShow: () => void\n onHide: () => void\n onBeforeShow: () => void\n onBeforeHide: () => void\n updatePopper: () => void\n}\n\nexport const TOOLTIP_INJECTION_KEY: InjectionKey<ElTooltipInjectionContext> =\n Symbol('elTooltip')\n"],"mappings":";;;AAmBA,MAAa,wBACX,OAAO,YAAY"}
@@ -0,0 +1,348 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { PopperEffect } from "../../popper/src/popper.js";
import { UseDelayedToggleProps } from "../../../hooks/use-delayed-toggle/index.js";
import { AriaProps } from "../../../hooks/use-aria/index.js";
import "../../../hooks/index.js";
import { _default } from "./content.vue.js";
import { PopperContentProps } from "../../popper/src/content.js";
import { Options, Placement } from "../../popper/index.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/tooltip/src/content.d.ts
interface ElTooltipContentProps extends UseDelayedToggleProps, Omit<PopperContentProps, 'visible'> {
/**
* @description which element the tooltip CONTENT appends to
*/
appendTo?: string | HTMLElement;
/**
* @description display content, can be overridden by `slot#content`
*/
content?: string;
/**
* @description whether `content` is treated as HTML string
*/
rawContent?: boolean;
/**
* @description when tooltip inactive and `persistent` is `false` , popconfirm will be destroyed
*/
persistent?: boolean;
/**
* @description visibility of Tooltip
*/
visible?: boolean | null;
/**
* @description animation name
*/
transition?: string;
/**
* @description whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets
*/
teleported?: boolean;
/**
* @description whether Tooltip is disabled
*/
disabled?: boolean;
ariaLabel?: AriaProps['ariaLabel'];
}
declare const useTooltipContentPropsDefaults: {
readonly content: "";
readonly visible: null;
readonly teleported: true;
readonly effect: "dark";
readonly enterable: true;
readonly stopPopperMouseEvent: true;
readonly pure: false;
readonly focusOnShow: false;
readonly trapping: false;
readonly virtualTriggering: false;
readonly loop: false;
readonly style: undefined;
readonly popperStyle: undefined;
readonly arrowOffset: 5;
readonly boundariesPadding: 0;
readonly gpuAcceleration: true;
readonly offset: 12;
readonly placement: "bottom";
readonly popperOptions: () => {};
readonly strategy: "absolute";
readonly showAfter: 0;
readonly hideAfter: 200;
readonly autoClose: 0;
};
/**
* @deprecated Removed after 3.0.0, Use `ElTooltipContentProps` instead.
*/
declare const useTooltipContentProps: {
readonly ariaLabel: StringConstructor;
readonly appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly content: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly rawContent: BooleanConstructor;
readonly persistent: BooleanConstructor;
readonly visible: EpPropFinalized<(new (...args: any[]) => boolean) | (() => boolean | null) | (((new (...args: any[]) => boolean) | (() => boolean | null)) | null)[], unknown, unknown, null, boolean>;
readonly transition: StringConstructor;
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly disabled: BooleanConstructor;
readonly loop: BooleanConstructor;
readonly id: StringConstructor;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly className: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, "dark", boolean>;
readonly enterable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly pure: BooleanConstructor;
readonly focusOnShow: BooleanConstructor;
readonly trapping: BooleanConstructor;
readonly popperClass: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly referenceEl: {
readonly type: vue.PropType<HTMLElement>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly triggerTargetEl: {
readonly type: vue.PropType<HTMLElement>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly stopPopperMouseEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly virtualTriggering: BooleanConstructor;
readonly zIndex: NumberConstructor;
readonly arrowOffset: EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
readonly boundariesPadding: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, undefined, boolean>;
readonly gpuAcceleration: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 12, boolean>;
readonly placement: EpPropFinalized<StringConstructor, Placement, unknown, "bottom", boolean>;
readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly strategy: EpPropFinalized<StringConstructor, "fixed" | "absolute", unknown, "absolute", boolean>;
readonly showAfter: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly hideAfter: EpPropFinalized<NumberConstructor, unknown, unknown, 200, boolean>;
readonly autoClose: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `ElTooltipContentProps` instead.
*/
type ElTooltipContentPropsPublic = ExtractPublicPropTypes<typeof useTooltipContentProps>;
type TooltipContentInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { ElTooltipContentProps, ElTooltipContentPropsPublic, TooltipContentInstance, useTooltipContentProps, useTooltipContentPropsDefaults };
@@ -0,0 +1,45 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
const require_teleport = require('../../teleport/src/teleport.js');
const require_index = require('../../../hooks/use-delayed-toggle/index.js');
const require_index$1 = require('../../../hooks/use-aria/index.js');
const require_content = require('../../popper/src/content.js');
//#region ../../packages/components/tooltip/src/content.ts
const useTooltipContentPropsDefaults = {
...require_index.useDelayedTogglePropsDefaults,
...require_content.popperContentPropsDefaults,
content: "",
visible: null,
teleported: true
};
/**
* @deprecated Removed after 3.0.0, Use `ElTooltipContentProps` instead.
*/
const useTooltipContentProps = require_runtime.buildProps({
...require_index.useDelayedToggleProps,
...require_content.popperContentProps,
appendTo: { type: require_teleport.teleportProps.to.type },
content: {
type: String,
default: ""
},
rawContent: Boolean,
persistent: Boolean,
visible: {
type: require_runtime.definePropType(Boolean),
default: null
},
transition: String,
teleported: {
type: Boolean,
default: true
},
disabled: Boolean,
...require_index$1.useAriaProps(["ariaLabel"])
});
//#endregion
exports.useTooltipContentProps = useTooltipContentProps;
exports.useTooltipContentPropsDefaults = useTooltipContentPropsDefaults;
//# sourceMappingURL=content.js.map
@@ -0,0 +1 @@
{"version":3,"file":"content.js","names":["useDelayedTogglePropsDefaults","popperContentPropsDefaults","buildProps","useDelayedToggleProps","popperContentProps","teleportProps","definePropType","useAriaProps"],"sources":["../../../../../../packages/components/tooltip/src/content.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport {\n popperContentProps,\n popperContentPropsDefaults,\n} from '@element-plus/components/popper'\nimport {\n useAriaProps,\n useDelayedToggleProps,\n useDelayedTogglePropsDefaults,\n} from '@element-plus/hooks'\nimport { teleportProps } from '@element-plus/components/teleport'\n\nimport type { AriaProps, UseDelayedToggleProps } from '@element-plus/hooks'\nimport type { PopperContentProps } from '@element-plus/components/popper'\nimport type TooltipContent from './content.vue'\nimport type { ExtractPublicPropTypes } from 'vue'\n\nexport interface ElTooltipContentProps\n extends UseDelayedToggleProps, Omit<PopperContentProps, 'visible'> {\n /**\n * @description which element the tooltip CONTENT appends to\n */\n appendTo?: string | HTMLElement\n /**\n * @description display content, can be overridden by `slot#content`\n */\n content?: string\n /**\n * @description whether `content` is treated as HTML string\n */\n rawContent?: boolean\n /**\n * @description when tooltip inactive and `persistent` is `false` , popconfirm will be destroyed\n */\n persistent?: boolean\n // because model toggle prop is generated dynamically\n // so the typing cannot be evaluated by typescript as type:\n // [name]: { type: Boolean, default: null }\n // so we need to declare that again for type checking.\n /**\n * @description visibility of Tooltip\n */\n visible?: boolean | null\n /**\n * @description animation name\n */\n transition?: string\n /**\n * @description whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets\n */\n teleported?: boolean\n /**\n * @description whether Tooltip is disabled\n */\n disabled?: boolean\n ariaLabel?: AriaProps['ariaLabel']\n}\n\nexport const useTooltipContentPropsDefaults = {\n ...useDelayedTogglePropsDefaults,\n ...popperContentPropsDefaults,\n content: '',\n visible: null,\n teleported: true,\n} as const\n\n/**\n * @deprecated Removed after 3.0.0, Use `ElTooltipContentProps` instead.\n */\nexport const useTooltipContentProps = buildProps({\n ...useDelayedToggleProps,\n ...popperContentProps,\n /**\n * @description which element the tooltip CONTENT appends to\n */\n appendTo: {\n type: teleportProps.to.type,\n },\n /**\n * @description display content, can be overridden by `slot#content`\n */\n content: {\n type: String,\n default: '',\n },\n /**\n * @description whether `content` is treated as HTML string\n */\n rawContent: Boolean,\n /**\n * @description when tooltip inactive and `persistent` is `false` , popconfirm will be destroyed\n */\n persistent: Boolean,\n // because model toggle prop is generated dynamically\n // so the typing cannot be evaluated by typescript as type:\n // [name]: { type: Boolean, default: null }\n // so we need to declare that again for type checking.\n /**\n * @description visibility of Tooltip\n */\n visible: {\n type: definePropType<boolean | null>(Boolean),\n default: null,\n },\n /**\n * @description animation name\n */\n transition: String,\n /**\n * @description whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets\n */\n teleported: {\n type: Boolean,\n default: true,\n },\n /**\n * @description whether Tooltip is disabled\n */\n disabled: Boolean,\n ...useAriaProps(['ariaLabel']),\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `ElTooltipContentProps` instead.\n */\nexport type ElTooltipContentPropsPublic = ExtractPublicPropTypes<\n typeof useTooltipContentProps\n>\n\nexport type TooltipContentInstance = InstanceType<typeof TooltipContent> &\n unknown\n"],"mappings":";;;;;;;;AA0DA,MAAa,iCAAiC;CAC5C,GAAGA;CACH,GAAGC;CACH,SAAS;CACT,SAAS;CACT,YAAY;CACb;;;;AAKD,MAAa,yBAAyBC,2BAAW;CAC/C,GAAGC;CACH,GAAGC;CAIH,UAAU,EACR,MAAMC,+BAAc,GAAG,MACxB;CAID,SAAS;EACP,MAAM;EACN,SAAS;EACV;CAID,YAAY;CAIZ,YAAY;CAQZ,SAAS;EACP,MAAMC,+BAA+B,QAAQ;EAC7C,SAAS;EACV;CAID,YAAY;CAIZ,YAAY;EACV,MAAM;EACN,SAAS;EACV;CAID,UAAU;CACV,GAAGC,6BAAa,CAAC,YAAY,CAAC;CAC/B,CAAU"}
@@ -0,0 +1,54 @@
import { PopperEffect } from "../../popper/src/popper.js";
import { ElTooltipContentProps } from "./content.js";
import { PopperContentInstance } from "../../popper/src/content.js";
import { Options, Placement } from "../../popper/index.js";
import * as vue from "vue";
//#region ../../packages/components/tooltip/src/content.vue.d.ts
declare var __VLS_32: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_32) => any;
};
declare const __VLS_base: vue.DefineComponent<ElTooltipContentProps, {
/**
* @description el-popper-content component instance
*/
contentRef: vue.Ref<PopperContentInstance | undefined, PopperContentInstance | undefined>;
/**
* @description validate current focus event is trigger inside el-popper-content
*/
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElTooltipContentProps> & Readonly<{}>, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showAfter: number;
hideAfter: number;
autoClose: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,183 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_aria = require('../../../utils/dom/aria.js');
const require_event = require('../../../utils/dom/event.js');
const require_arrays = require('../../../utils/arrays.js');
const require_index = require('../../teleport/index.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
const require_index$2 = require('../../../hooks/use-popper-container/index.js');
const require_content = require('../../popper/src/content2.js');
const require_content$1 = require('./content.js');
const require_constants = require('./constants.js');
const require_utils = require('./utils.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
//#region ../../packages/components/tooltip/src/content.vue?vue&type=script&setup=true&lang.ts
var content_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElTooltipContent",
inheritAttrs: false,
__name: "content",
props: require_content$1.useTooltipContentProps,
setup(__props, { expose: __expose }) {
const props = __props;
const { selector } = require_index$2.usePopperContainerId();
const ns = require_index$1.useNamespace("tooltip");
const contentRef = (0, vue.ref)();
const popperContentRef = (0, _vueuse_core.computedEager)(() => contentRef.value?.popperContentRef);
let stopHandle;
const { controlled, id, open, trigger, onClose, onOpen, onShow, onHide, onBeforeShow, onBeforeHide } = (0, vue.inject)(require_constants.TOOLTIP_INJECTION_KEY, void 0);
const transitionClass = (0, vue.computed)(() => {
return props.transition || `${ns.namespace.value}-fade-in-linear`;
});
const persistentRef = (0, vue.computed)(() => {
if (process.env.NODE_ENV === "test") {
if (!process.env.RUN_TEST_WITH_PERSISTENT) return true;
}
return props.persistent;
});
(0, vue.onBeforeUnmount)(() => {
stopHandle?.();
});
const shouldRender = (0, vue.computed)(() => {
return (0, vue.unref)(persistentRef) ? true : (0, vue.unref)(open);
});
const shouldShow = (0, vue.computed)(() => {
return props.disabled ? false : (0, vue.unref)(open);
});
const appendTo = (0, vue.computed)(() => {
return props.appendTo || selector.value;
});
const contentStyle = (0, vue.computed)(() => props.style ?? {});
const ariaHidden = (0, vue.ref)(true);
const onTransitionLeave = () => {
onHide();
isFocusInsideContent() && require_aria.focusElement(document.body, { preventScroll: true });
ariaHidden.value = true;
};
const stopWhenControlled = () => {
if ((0, vue.unref)(controlled)) return true;
};
const onContentEnter = require_event.composeEventHandlers(stopWhenControlled, () => {
if (props.enterable && require_utils.isTriggerType((0, vue.unref)(trigger), "hover")) onOpen();
});
const onContentLeave = require_event.composeEventHandlers(stopWhenControlled, () => {
if (require_utils.isTriggerType((0, vue.unref)(trigger), "hover")) onClose();
});
const onBeforeEnter = () => {
contentRef.value?.updatePopper?.();
onBeforeShow?.();
};
const onBeforeLeave = () => {
onBeforeHide?.();
};
const onAfterShow = () => {
onShow();
};
const onBlur = () => {
if (!props.virtualTriggering) onClose();
};
const isFocusInsideContent = (event) => {
const popperContent = contentRef.value?.popperContentRef;
const activeElement = event?.relatedTarget || document.activeElement;
return popperContent?.contains(activeElement);
};
(0, vue.watch)(() => (0, vue.unref)(open), (val) => {
if (!val) stopHandle?.();
else {
ariaHidden.value = false;
stopHandle = (0, _vueuse_core.onClickOutside)(popperContentRef, () => {
if ((0, vue.unref)(controlled)) return;
if (require_arrays.castArray((0, vue.unref)(trigger)).every((item) => {
return item !== "hover" && item !== "focus";
})) onClose();
}, { detectIframe: true });
}
}, { flush: "post" });
__expose({
contentRef,
isFocusInsideContent
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index.ElTeleport), {
disabled: !__props.teleported,
to: appendTo.value
}, {
default: (0, vue.withCtx)(() => [shouldRender.value || !ariaHidden.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, {
key: 0,
name: transitionClass.value,
appear: !persistentRef.value,
onAfterLeave: onTransitionLeave,
onBeforeEnter,
onAfterEnter: onAfterShow,
onBeforeLeave,
persisted: ""
}, {
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(require_content.default), (0, vue.mergeProps)({
id: (0, vue.unref)(id),
ref_key: "contentRef",
ref: contentRef
}, _ctx.$attrs, {
"aria-label": __props.ariaLabel,
"aria-hidden": ariaHidden.value,
"boundaries-padding": __props.boundariesPadding,
"fallback-placements": __props.fallbackPlacements,
"gpu-acceleration": __props.gpuAcceleration,
offset: __props.offset,
placement: __props.placement,
"popper-options": __props.popperOptions,
"arrow-offset": __props.arrowOffset,
strategy: __props.strategy,
effect: __props.effect,
enterable: __props.enterable,
pure: __props.pure,
"popper-class": __props.popperClass,
"popper-style": [__props.popperStyle, contentStyle.value],
"reference-el": __props.referenceEl,
"trigger-target-el": __props.triggerTargetEl,
visible: shouldShow.value,
"z-index": __props.zIndex,
loop: __props.loop,
onMouseenter: (0, vue.unref)(onContentEnter),
onMouseleave: (0, vue.unref)(onContentLeave),
onBlur,
onClose: (0, vue.unref)(onClose)
}), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 16, [
"id",
"aria-label",
"aria-hidden",
"boundaries-padding",
"fallback-placements",
"gpu-acceleration",
"offset",
"placement",
"popper-options",
"arrow-offset",
"strategy",
"effect",
"enterable",
"pure",
"popper-class",
"popper-style",
"reference-el",
"trigger-target-el",
"visible",
"z-index",
"loop",
"onMouseenter",
"onMouseleave",
"onClose"
]), [[vue.vShow, shouldShow.value]])]),
_: 3
}, 8, ["name", "appear"])) : (0, vue.createCommentVNode)("v-if", true)]),
_: 3
}, 8, ["disabled", "to"]);
};
}
});
//#endregion
exports.default = content_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=content.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_content_vue_vue_type_script_setup_true_lang = require('./content.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/tooltip/src/content.vue
var content_default = require_content_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = content_default;
//# sourceMappingURL=content2.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,376 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { Arrayable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { PopperEffect, PopperProps } from "../../popper/src/popper.js";
import { Measurable } from "../../popper/src/constants.js";
import { ModelToggleParams, UseModelTogglePropsRaw } from "../../../hooks/use-model-toggle/index.js";
import "../../../hooks/index.js";
import { TooltipTriggerType, UseTooltipTriggerProps } from "./trigger.js";
import { ElTooltipContentProps } from "./content.js";
import { _default } from "./tooltip.vue.js";
import { PopperArrowProps } from "../../popper/src/arrow.js";
import { Options, Placement } from "../../popper/index.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/tooltip/src/tooltip.d.ts
declare const useTooltipModelToggleProps: UseModelTogglePropsRaw<"visible">, useTooltipModelToggleEmits: "update:visible"[], useTooltipModelToggle: ({
indicator,
toggleReason,
shouldHideWhenRouteChanges,
shouldProceed,
onShow,
onHide
}: ModelToggleParams) => {
hide: (event?: Event) => void;
show: (event?: Event) => void;
toggle: () => void;
hasUpdateHandler: vue.ComputedRef<boolean>;
};
interface UseTooltipProps extends PopperProps, ElTooltipContentProps, UseTooltipTriggerProps, PopperArrowProps {
/**
* @description whether the tooltip content has an arrow
*/
showArrow?: boolean;
'onUpdate:visible'?: (value: boolean) => void;
}
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipProps` instead.
*/
declare const useTooltipProps: {
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
arrowOffset: EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
disabled: BooleanConstructor;
trigger: EpPropFinalized<(new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | (((new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>)) | null)[], unknown, unknown, "hover", boolean>;
triggerKeys: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => string[], boolean>;
focusOnTarget: BooleanConstructor;
virtualRef: {
readonly type: vue.PropType<Measurable>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
virtualTriggering: BooleanConstructor;
onMouseenter: {
readonly type: vue.PropType<(e: MouseEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onMouseleave: {
readonly type: vue.PropType<(e: MouseEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onClick: {
readonly type: vue.PropType<(e: PointerEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onKeydown: {
readonly type: vue.PropType<(e: KeyboardEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onFocus: {
readonly type: vue.PropType<(e: FocusEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onBlur: {
readonly type: vue.PropType<(e: FocusEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onContextmenu: {
readonly type: vue.PropType<(e: PointerEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
id: StringConstructor;
open: BooleanConstructor;
ariaLabel: StringConstructor;
appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
content: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
rawContent: BooleanConstructor;
persistent: BooleanConstructor;
visible: EpPropFinalized<(new (...args: any[]) => boolean) | (() => boolean | null) | (((new (...args: any[]) => boolean) | (() => boolean | null)) | null)[], unknown, unknown, null, boolean>;
transition: StringConstructor;
teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
loop: BooleanConstructor;
style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
className: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, "dark", boolean>;
enterable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
pure: BooleanConstructor;
focusOnShow: BooleanConstructor;
trapping: BooleanConstructor;
popperClass: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
referenceEl: {
readonly type: vue.PropType<HTMLElement>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
triggerTargetEl: {
readonly type: vue.PropType<HTMLElement>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
stopPopperMouseEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
zIndex: NumberConstructor;
boundariesPadding: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, undefined, boolean>;
gpuAcceleration: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
offset: EpPropFinalized<NumberConstructor, unknown, unknown, 12, boolean>;
placement: EpPropFinalized<StringConstructor, Placement, unknown, "bottom", boolean>;
popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
strategy: EpPropFinalized<StringConstructor, "fixed" | "absolute", unknown, "absolute", boolean>;
showAfter: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
hideAfter: EpPropFinalized<NumberConstructor, unknown, unknown, 200, boolean>;
autoClose: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
"onUpdate:visible": {
readonly type: vue.PropType<(val: boolean) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "tooltip", boolean>;
};
declare const tooltipEmits: readonly [..."update:visible"[], "before-show", "before-hide", "show", "hide", "open", "close"];
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipProps` instead.
*/
type ElTooltipProps = UseTooltipProps;
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipProps` instead.
*/
type ElTooltipPropsPublic = ExtractPublicPropTypes<typeof useTooltipProps>;
type TooltipInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { ElTooltipProps, ElTooltipPropsPublic, TooltipInstance, UseTooltipProps, tooltipEmits, useTooltipModelToggle, useTooltipModelToggleEmits, useTooltipModelToggleProps, useTooltipProps };
@@ -0,0 +1,41 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
const require_index = require('../../../hooks/use-model-toggle/index.js');
const require_popper = require('../../popper/src/popper.js');
const require_arrow = require('../../popper/src/arrow.js');
const require_content = require('./content.js');
const require_trigger = require('./trigger.js');
//#region ../../packages/components/tooltip/src/tooltip.ts
const { useModelToggleProps: useTooltipModelToggleProps, useModelToggleEmits: useTooltipModelToggleEmits, useModelToggle: useTooltipModelToggle } = require_index.createModelToggleComposable("visible");
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipProps` instead.
*/
const useTooltipProps = require_runtime.buildProps({
...require_popper.popperProps,
...useTooltipModelToggleProps,
...require_content.useTooltipContentProps,
...require_trigger.useTooltipTriggerProps,
...require_arrow.popperArrowProps,
showArrow: {
type: Boolean,
default: true
}
});
const tooltipEmits = [
...useTooltipModelToggleEmits,
"before-show",
"before-hide",
"show",
"hide",
"open",
"close"
];
//#endregion
exports.tooltipEmits = tooltipEmits;
exports.useTooltipModelToggle = useTooltipModelToggle;
exports.useTooltipModelToggleEmits = useTooltipModelToggleEmits;
exports.useTooltipModelToggleProps = useTooltipModelToggleProps;
exports.useTooltipProps = useTooltipProps;
//# sourceMappingURL=tooltip.js.map
@@ -0,0 +1 @@
{"version":3,"file":"tooltip.js","names":["createModelToggleComposable","buildProps","popperProps","useTooltipContentProps","useTooltipTriggerProps","popperArrowProps"],"sources":["../../../../../../packages/components/tooltip/src/tooltip.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { createModelToggleComposable } from '@element-plus/hooks'\nimport { popperArrowProps, popperProps } from '@element-plus/components/popper'\nimport { useTooltipContentProps } from './content'\nimport { useTooltipTriggerProps } from './trigger'\n\nimport type {\n PopperArrowProps,\n PopperProps,\n} from '@element-plus/components/popper'\nimport type { ElTooltipContentProps } from './content'\nimport type { UseTooltipTriggerProps } from './trigger'\nimport type Tooltip from './tooltip.vue'\nimport type { ExtractPublicPropTypes } from 'vue'\n\nexport const {\n useModelToggleProps: useTooltipModelToggleProps,\n useModelToggleEmits: useTooltipModelToggleEmits,\n useModelToggle: useTooltipModelToggle,\n} = createModelToggleComposable('visible' as const)\n\nexport interface UseTooltipProps\n extends\n PopperProps,\n ElTooltipContentProps,\n UseTooltipTriggerProps,\n PopperArrowProps {\n /**\n * @description whether the tooltip content has an arrow\n */\n showArrow?: boolean\n 'onUpdate:visible'?: (value: boolean) => void\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `UseTooltipProps` instead.\n */\nexport const useTooltipProps = buildProps({\n ...popperProps,\n ...useTooltipModelToggleProps,\n ...useTooltipContentProps,\n ...useTooltipTriggerProps,\n ...popperArrowProps,\n /**\n * @description whether the tooltip content has an arrow\n */\n showArrow: {\n type: Boolean,\n default: true,\n },\n})\n\nexport const tooltipEmits = [\n ...useTooltipModelToggleEmits,\n 'before-show',\n 'before-hide',\n 'show',\n 'hide',\n 'open',\n 'close',\n] as const\n\n/**\n * @deprecated Removed after 3.0.0, Use `UseTooltipProps` instead.\n */\nexport type ElTooltipProps = UseTooltipProps\n\n/**\n * @deprecated Removed after 3.0.0, Use `UseTooltipProps` instead.\n */\nexport type ElTooltipPropsPublic = ExtractPublicPropTypes<\n typeof useTooltipProps\n>\n\nexport type TooltipInstance = InstanceType<typeof Tooltip> & unknown\n"],"mappings":";;;;;;;;;AAeA,MAAa,EACX,qBAAqB,4BACrB,qBAAqB,4BACrB,gBAAgB,0BACdA,0CAA4B,UAAmB;;;;AAkBnD,MAAa,kBAAkBC,2BAAW;CACxC,GAAGC;CACH,GAAG;CACH,GAAGC;CACH,GAAGC;CACH,GAAGC;CAIH,WAAW;EACT,MAAM;EACN,SAAS;EACV;CACF,CAAC;AAEF,MAAa,eAAe;CAC1B,GAAG;CACH;CACA;CACA;CACA;CACA;CACA;CACD"}
@@ -0,0 +1,99 @@
import { Arrayable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { PopperEffect, PopperInstance, roleTypes } from "../../popper/src/popper.js";
import { TooltipTriggerType } from "./trigger.js";
import { TooltipContentInstance } from "./content.js";
import { UseTooltipProps } from "./tooltip.js";
import { Options, Placement } from "../../popper/index.js";
import * as vue from "vue";
//#region ../../packages/components/tooltip/src/tooltip.vue.d.ts
declare var __VLS_15: {}, __VLS_25: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_15) => any;
} & {
content?: (props: typeof __VLS_25) => any;
};
declare const __VLS_base: vue.DefineComponent<UseTooltipProps, {
/**
* @description el-popper component instance
*/
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
/**
* @description el-tooltip-content component instance
*/
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
/**
* @description validate current focus event is trigger inside el-tooltip-content
*/
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
/**
* @description update el-popper component instance
*/
updatePopper: () => void;
/**
* @description expose onOpen function to mange el-tooltip open state
*/
onOpen: (event?: Event, delay?: number) => void;
/**
* @description expose onClose function to manage el-tooltip close state
*/
onClose: (event?: Event, delay?: number) => void;
/**
* @description expose hide function
*/
hide: (event?: Event) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
close: (...args: any[]) => void;
hide: (...args: any[]) => void;
show: (...args: any[]) => void;
open: (...args: any[]) => void;
"update:visible": (...args: any[]) => void;
"before-show": (...args: any[]) => void;
"before-hide": (...args: any[]) => void;
}, string, vue.PublicProps, Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,195 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../utils/types.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_index$1 = require('../../../hooks/use-id/index.js');
const require_index$2 = require('../../../hooks/use-popper-container/index.js');
const require_index$3 = require('../../../hooks/use-delayed-toggle/index.js');
const require_arrow = require('../../popper/src/arrow2.js');
const require_index$4 = require('../../popper/index.js');
const require_tooltip = require('./tooltip.js');
const require_constants = require('./constants.js');
const require_trigger = require('./trigger2.js');
const require_content = require('./content2.js');
let vue = require("vue");
//#region ../../packages/components/tooltip/src/tooltip.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = ["innerHTML"];
const _hoisted_2 = { key: 1 };
var tooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElTooltip",
__name: "tooltip",
props: require_tooltip.useTooltipProps,
emits: require_tooltip.tooltipEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
require_index$2.usePopperContainer();
const ns = require_index.useNamespace("tooltip");
const id = require_index$1.useId();
const popperRef = (0, vue.ref)();
const contentRef = (0, vue.ref)();
const updatePopper = () => {
const popperComponent = (0, vue.unref)(popperRef);
if (popperComponent) popperComponent.popperInstanceRef?.update();
};
const open = (0, vue.ref)(false);
const toggleReason = (0, vue.ref)();
const { show, hide, hasUpdateHandler } = require_tooltip.useTooltipModelToggle({
indicator: open,
toggleReason
});
const { onOpen, onClose } = require_index$3.useDelayedToggle({
showAfter: (0, vue.toRef)(props, "showAfter"),
hideAfter: (0, vue.toRef)(props, "hideAfter"),
autoClose: (0, vue.toRef)(props, "autoClose"),
open: show,
close: hide
});
const controlled = (0, vue.computed)(() => require_types.isBoolean(props.visible) && !hasUpdateHandler.value);
const kls = (0, vue.computed)(() => {
return [ns.b(), props.popperClass];
});
(0, vue.provide)(require_constants.TOOLTIP_INJECTION_KEY, {
controlled,
id,
open: (0, vue.readonly)(open),
trigger: (0, vue.toRef)(props, "trigger"),
onOpen,
onClose,
onToggle: (event) => {
if ((0, vue.unref)(open)) onClose(event);
else onOpen(event);
},
onShow: () => {
emit("show", toggleReason.value);
},
onHide: () => {
emit("hide", toggleReason.value);
},
onBeforeShow: () => {
emit("before-show", toggleReason.value);
},
onBeforeHide: () => {
emit("before-hide", toggleReason.value);
},
updatePopper
});
(0, vue.watch)(() => props.disabled, (disabled) => {
if (disabled && open.value) open.value = false;
if (!disabled && require_types.isBoolean(props.visible)) open.value = props.visible;
});
const isFocusInsideContent = (event) => {
return contentRef.value?.isFocusInsideContent(event);
};
(0, vue.onDeactivated)(() => open.value && hide());
(0, vue.onBeforeUnmount)(() => {
toggleReason.value = void 0;
});
__expose({
popperRef,
contentRef,
isFocusInsideContent,
updatePopper,
onOpen,
onClose,
hide
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$4.ElPopper), {
ref_key: "popperRef",
ref: popperRef,
role: __props.role
}, {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)(require_trigger.default, {
disabled: __props.disabled,
trigger: __props.trigger,
"trigger-keys": __props.triggerKeys,
"virtual-ref": __props.virtualRef,
"virtual-triggering": __props.virtualTriggering,
"focus-on-target": __props.focusOnTarget
}, {
default: (0, vue.withCtx)(() => [_ctx.$slots.default ? (0, vue.renderSlot)(_ctx.$slots, "default", { key: 0 }) : (0, vue.createCommentVNode)("v-if", true)]),
_: 3
}, 8, [
"disabled",
"trigger",
"trigger-keys",
"virtual-ref",
"virtual-triggering",
"focus-on-target"
]), (0, vue.createVNode)(require_content.default, {
ref_key: "contentRef",
ref: contentRef,
"aria-label": __props.ariaLabel,
"boundaries-padding": __props.boundariesPadding,
content: __props.content,
disabled: __props.disabled,
effect: __props.effect,
enterable: __props.enterable,
"fallback-placements": __props.fallbackPlacements,
"hide-after": __props.hideAfter,
"gpu-acceleration": __props.gpuAcceleration,
offset: __props.offset,
persistent: __props.persistent,
"popper-class": kls.value,
"popper-style": __props.popperStyle,
placement: __props.placement,
"popper-options": __props.popperOptions,
"arrow-offset": __props.arrowOffset,
pure: __props.pure,
"raw-content": __props.rawContent,
"reference-el": __props.referenceEl,
"trigger-target-el": __props.triggerTargetEl,
"show-after": __props.showAfter,
strategy: __props.strategy,
teleported: __props.teleported,
transition: __props.transition,
"virtual-triggering": __props.virtualTriggering,
"z-index": __props.zIndex,
"append-to": __props.appendTo,
loop: __props.loop
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "content", {}, () => [__props.rawContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
key: 0,
innerHTML: __props.content
}, null, 8, _hoisted_1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, (0, vue.toDisplayString)(__props.content), 1))]), __props.showArrow ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_arrow.default), { key: 0 })) : (0, vue.createCommentVNode)("v-if", true)]),
_: 3
}, 8, [
"aria-label",
"boundaries-padding",
"content",
"disabled",
"effect",
"enterable",
"fallback-placements",
"hide-after",
"gpu-acceleration",
"offset",
"persistent",
"popper-class",
"popper-style",
"placement",
"popper-options",
"arrow-offset",
"pure",
"raw-content",
"reference-el",
"trigger-target-el",
"show-after",
"strategy",
"teleported",
"transition",
"virtual-triggering",
"z-index",
"append-to",
"loop"
])]),
_: 3
}, 8, ["role"]);
};
}
});
//#endregion
exports.default = tooltip_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=tooltip.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_tooltip_vue_vue_type_script_setup_true_lang = require('./tooltip.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/tooltip/src/tooltip.vue
var tooltip_default = require_tooltip_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = tooltip_default;
//# sourceMappingURL=tooltip2.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,103 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import { Arrayable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { Measurable } from "../../popper/src/constants.js";
import { PopperTriggerProps } from "../../popper/src/trigger.js";
import "../../popper/index.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/tooltip/src/trigger.d.ts
type TooltipTriggerType = 'hover' | 'focus' | 'click' | 'contextmenu';
interface UseTooltipTriggerProps extends PopperTriggerProps {
/**
* @description whether Tooltip is disabled
*/
disabled?: boolean;
/**
* @description How should the tooltip be triggered (to show), not valid in controlled mode
*/
trigger?: Arrayable<TooltipTriggerType>;
/**
* @description When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard, not valid in controlled mode
*/
triggerKeys?: string[];
/**
* @description when triggering tooltips through hover, whether to focus the trigger element, which improves accessibility
*/
focusOnTarget?: boolean;
}
declare const useTooltipTriggerPropsDefaults: {
readonly trigger: "hover";
readonly triggerKeys: () => string[];
};
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipTriggerProps` instead.
*/
declare const useTooltipTriggerProps: {
readonly disabled: BooleanConstructor;
readonly trigger: EpPropFinalized<(new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | (((new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>)) | null)[], unknown, unknown, "hover", boolean>;
readonly triggerKeys: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => string[], boolean>;
readonly focusOnTarget: BooleanConstructor;
readonly virtualRef: {
readonly type: vue.PropType<Measurable>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly virtualTriggering: BooleanConstructor;
readonly onMouseenter: {
readonly type: vue.PropType<(e: MouseEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly onMouseleave: {
readonly type: vue.PropType<(e: MouseEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly onClick: {
readonly type: vue.PropType<(e: PointerEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly onKeydown: {
readonly type: vue.PropType<(e: KeyboardEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly onFocus: {
readonly type: vue.PropType<(e: FocusEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly onBlur: {
readonly type: vue.PropType<(e: FocusEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly onContextmenu: {
readonly type: vue.PropType<(e: PointerEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly id: StringConstructor;
readonly open: BooleanConstructor;
};
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipTriggerProps` instead.
*/
type ElTooltipTriggerProps = UseTooltipTriggerProps;
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipTriggerProps` instead.
*/
type ElTooltipTriggerPropsPublic = ExtractPublicPropTypes<typeof useTooltipTriggerProps>;
//#endregion
export { ElTooltipTriggerProps, ElTooltipTriggerPropsPublic, TooltipTriggerType, UseTooltipTriggerProps, useTooltipTriggerProps, useTooltipTriggerPropsDefaults };
@@ -0,0 +1,39 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_aria = require('../../../constants/aria.js');
const require_runtime = require('../../../utils/vue/props/runtime.js');
const require_trigger = require('../../popper/src/trigger.js');
//#region ../../packages/components/tooltip/src/trigger.ts
const useTooltipTriggerPropsDefaults = {
trigger: "hover",
triggerKeys: () => [
require_aria.EVENT_CODE.enter,
require_aria.EVENT_CODE.numpadEnter,
require_aria.EVENT_CODE.space
]
};
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipTriggerProps` instead.
*/
const useTooltipTriggerProps = require_runtime.buildProps({
...require_trigger.popperTriggerProps,
disabled: Boolean,
trigger: {
type: require_runtime.definePropType([String, Array]),
default: "hover"
},
triggerKeys: {
type: require_runtime.definePropType(Array),
default: () => [
require_aria.EVENT_CODE.enter,
require_aria.EVENT_CODE.numpadEnter,
require_aria.EVENT_CODE.space
]
},
focusOnTarget: Boolean
});
//#endregion
exports.useTooltipTriggerProps = useTooltipTriggerProps;
exports.useTooltipTriggerPropsDefaults = useTooltipTriggerPropsDefaults;
//# sourceMappingURL=trigger.js.map
@@ -0,0 +1 @@
{"version":3,"file":"trigger.js","names":["EVENT_CODE","buildProps","popperTriggerProps","definePropType"],"sources":["../../../../../../packages/components/tooltip/src/trigger.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { popperTriggerProps } from '@element-plus/components/popper'\nimport { EVENT_CODE } from '@element-plus/constants'\n\nimport type { PopperTriggerProps } from '@element-plus/components/popper'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { ExtractPublicPropTypes } from 'vue'\n\nexport type TooltipTriggerType = 'hover' | 'focus' | 'click' | 'contextmenu'\n\nexport interface UseTooltipTriggerProps extends PopperTriggerProps {\n /**\n * @description whether Tooltip is disabled\n */\n disabled?: boolean\n /**\n * @description How should the tooltip be triggered (to show), not valid in controlled mode\n */\n trigger?: Arrayable<TooltipTriggerType>\n /**\n * @description When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard, not valid in controlled mode\n */\n triggerKeys?: string[]\n /**\n * @description when triggering tooltips through hover, whether to focus the trigger element, which improves accessibility\n */\n focusOnTarget?: boolean\n}\n\nexport const useTooltipTriggerPropsDefaults = {\n trigger: 'hover',\n triggerKeys: () => [\n EVENT_CODE.enter,\n EVENT_CODE.numpadEnter,\n EVENT_CODE.space,\n ],\n} as const\n\n/**\n * @deprecated Removed after 3.0.0, Use `UseTooltipTriggerProps` instead.\n */\nexport const useTooltipTriggerProps = buildProps({\n ...popperTriggerProps,\n /**\n * @description whether Tooltip is disabled\n */\n disabled: Boolean,\n /**\n * @description How should the tooltip be triggered (to show), not valid in controlled mode\n */\n trigger: {\n type: definePropType<Arrayable<TooltipTriggerType>>([String, Array]),\n default: 'hover',\n },\n /**\n * @description When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard, not valid in controlled mode\n */\n triggerKeys: {\n type: definePropType<string[]>(Array),\n default: () => [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space],\n },\n /**\n * @description when triggering tooltips through hover, whether to focus the trigger element, which improves accessibility\n */\n focusOnTarget: Boolean,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `UseTooltipTriggerProps` instead.\n */\nexport type ElTooltipTriggerProps = UseTooltipTriggerProps\n\n/**\n * @deprecated Removed after 3.0.0, Use `UseTooltipTriggerProps` instead.\n */\nexport type ElTooltipTriggerPropsPublic = ExtractPublicPropTypes<\n typeof useTooltipTriggerProps\n>\n"],"mappings":";;;;;;AA6BA,MAAa,iCAAiC;CAC5C,SAAS;CACT,mBAAmB;EACjBA,wBAAW;EACXA,wBAAW;EACXA,wBAAW;EACZ;CACF;;;;AAKD,MAAa,yBAAyBC,2BAAW;CAC/C,GAAGC;CAIH,UAAU;CAIV,SAAS;EACP,MAAMC,+BAA8C,CAAC,QAAQ,MAAM,CAAC;EACpE,SAAS;EACV;CAID,aAAa;EACX,MAAMA,+BAAyB,MAAM;EACrC,eAAe;GAACH,wBAAW;GAAOA,wBAAW;GAAaA,wBAAW;GAAM;EAC5E;CAID,eAAe;CAChB,CAAU"}
@@ -0,0 +1,86 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_aria = require('../../../utils/dom/aria.js');
const require_event = require('../../../utils/dom/event.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_trigger = require('../../popper/src/trigger2.js');
const require_trigger$1 = require('./trigger.js');
const require_constants = require('./constants.js');
const require_utils = require('./utils.js');
let vue = require("vue");
//#region ../../packages/components/tooltip/src/trigger.vue?vue&type=script&setup=true&lang.ts
var trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElTooltipTrigger",
__name: "trigger",
props: require_trigger$1.useTooltipTriggerProps,
setup(__props, { expose: __expose }) {
const props = __props;
const ns = require_index.useNamespace("tooltip");
const { controlled, id, open, onOpen, onClose, onToggle } = (0, vue.inject)(require_constants.TOOLTIP_INJECTION_KEY, void 0);
const triggerRef = (0, vue.ref)(null);
const stopWhenControlledOrDisabled = () => {
if ((0, vue.unref)(controlled) || props.disabled) return true;
};
const trigger = (0, vue.toRef)(props, "trigger");
const onMouseenter = require_event.composeEventHandlers(stopWhenControlledOrDisabled, require_utils.whenTrigger(trigger, "hover", (e) => {
onOpen(e);
if (props.focusOnTarget && e.target) (0, vue.nextTick)(() => {
require_aria.focusElement(e.target, { preventScroll: true });
});
}));
const onMouseleave = require_event.composeEventHandlers(stopWhenControlledOrDisabled, require_utils.whenTrigger(trigger, "hover", onClose));
const onClick = require_event.composeEventHandlers(stopWhenControlledOrDisabled, require_utils.whenTrigger(trigger, "click", (e) => {
if (e.button === 0) onToggle(e);
}));
const onFocus = require_event.composeEventHandlers(stopWhenControlledOrDisabled, require_utils.whenTrigger(trigger, "focus", onOpen));
const onBlur = require_event.composeEventHandlers(stopWhenControlledOrDisabled, require_utils.whenTrigger(trigger, "focus", onClose));
const onContextMenu = require_event.composeEventHandlers(stopWhenControlledOrDisabled, require_utils.whenTrigger(trigger, "contextmenu", (e) => {
e.preventDefault();
onToggle(e);
}));
const onKeydown = require_event.composeEventHandlers(stopWhenControlledOrDisabled, (e) => {
const code = require_event.getEventCode(e);
if (props.triggerKeys.includes(code)) {
e.preventDefault();
onToggle(e);
}
});
__expose({ triggerRef });
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_trigger.default), {
id: (0, vue.unref)(id),
"virtual-ref": __props.virtualRef,
open: (0, vue.unref)(open),
"virtual-triggering": __props.virtualTriggering,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("trigger")),
onBlur: (0, vue.unref)(onBlur),
onClick: (0, vue.unref)(onClick),
onContextmenu: (0, vue.unref)(onContextMenu),
onFocus: (0, vue.unref)(onFocus),
onMouseenter: (0, vue.unref)(onMouseenter),
onMouseleave: (0, vue.unref)(onMouseleave),
onKeydown: (0, vue.unref)(onKeydown)
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 8, [
"id",
"virtual-ref",
"open",
"virtual-triggering",
"class",
"onBlur",
"onClick",
"onContextmenu",
"onFocus",
"onMouseenter",
"onMouseleave",
"onKeydown"
]);
};
}
});
//#endregion
exports.default = trigger_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=trigger.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"trigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/tooltip/src/trigger.vue"],"sourcesContent":["<template>\n <el-popper-trigger\n :id=\"id\"\n :virtual-ref=\"virtualRef\"\n :open=\"open\"\n :virtual-triggering=\"virtualTriggering\"\n :class=\"ns.e('trigger')\"\n @blur=\"onBlur\"\n @click=\"onClick\"\n @contextmenu=\"onContextMenu\"\n @focus=\"onFocus\"\n @mouseenter=\"onMouseenter\"\n @mouseleave=\"onMouseleave\"\n @keydown=\"onKeydown\"\n >\n <slot />\n </el-popper-trigger>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, nextTick, ref, toRef, unref } from 'vue'\nimport { ElPopperTrigger } from '@element-plus/components/popper'\nimport {\n composeEventHandlers,\n focusElement,\n getEventCode,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { TOOLTIP_INJECTION_KEY } from './constants'\nimport { whenTrigger } from './utils'\nimport { useTooltipTriggerPropsDefaults } from './trigger'\n\nimport type { UseTooltipTriggerProps } from './trigger'\nimport type { OnlyChildExpose } from '@element-plus/components/slot'\n\ndefineOptions({\n name: 'ElTooltipTrigger',\n})\n\nconst props = withDefaults(\n defineProps<UseTooltipTriggerProps>(),\n useTooltipTriggerPropsDefaults\n)\n\nconst ns = useNamespace('tooltip')\nconst { controlled, id, open, onOpen, onClose, onToggle } = inject(\n TOOLTIP_INJECTION_KEY,\n undefined\n)!\n\nconst triggerRef = ref<OnlyChildExpose | null>(null)\n\nconst stopWhenControlledOrDisabled = () => {\n if (unref(controlled) || props.disabled) {\n return true\n }\n}\nconst trigger = toRef(props, 'trigger')\nconst onMouseenter = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'hover', (e) => {\n onOpen(e)\n\n if (props.focusOnTarget && e.target) {\n nextTick(() => {\n focusElement(e.target as HTMLElement, { preventScroll: true })\n })\n }\n })\n)\nconst onMouseleave = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'hover', onClose)\n)\nconst onClick = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'click', (e) => {\n // distinguish left click\n if ((e as MouseEvent).button === 0) {\n onToggle(e)\n }\n })\n)\n\nconst onFocus = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'focus', onOpen)\n)\n\nconst onBlur = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'focus', onClose)\n)\n\nconst onContextMenu = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'contextmenu', (e: Event) => {\n e.preventDefault()\n onToggle(e)\n })\n)\n\nconst onKeydown = composeEventHandlers(\n stopWhenControlledOrDisabled,\n (e: Event) => {\n const code = getEventCode(e as KeyboardEvent)\n if (props.triggerKeys.includes(code)) {\n e.preventDefault()\n onToggle(e)\n }\n }\n)\n\ndefineExpose({\n /**\n * @description trigger element\n */\n triggerRef,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;EAuCA,MAAM,QAAQ;EAKd,MAAM,KAAK,2BAAa,UAAS;EACjC,MAAM,EAAE,YAAY,IAAI,MAAM,QAAQ,SAAS,6BAC7C,yCACA,OACD;EAED,MAAM,0BAAyC,KAAI;EAEnD,MAAM,qCAAqC;AACzC,sBAAU,WAAW,IAAI,MAAM,SAC7B,QAAO;;EAGX,MAAM,yBAAgB,OAAO,UAAS;EACtC,MAAM,eAAe,mCACnB,8BACA,0BAAY,SAAS,UAAU,MAAM;AACnC,UAAO,EAAC;AAER,OAAI,MAAM,iBAAiB,EAAE,OAC3B,yBAAe;AACb,8BAAa,EAAE,QAAuB,EAAE,eAAe,MAAM,CAAA;KAC9D;IAEJ,CACH;EACA,MAAM,eAAe,mCACnB,8BACA,0BAAY,SAAS,SAAS,QAAO,CACvC;EACA,MAAM,UAAU,mCACd,8BACA,0BAAY,SAAS,UAAU,MAAM;AAEnC,OAAK,EAAiB,WAAW,EAC/B,UAAS,EAAC;IAEb,CACH;EAEA,MAAM,UAAU,mCACd,8BACA,0BAAY,SAAS,SAAS,OAAM,CACtC;EAEA,MAAM,SAAS,mCACb,8BACA,0BAAY,SAAS,SAAS,QAAO,CACvC;EAEA,MAAM,gBAAgB,mCACpB,8BACA,0BAAY,SAAS,gBAAgB,MAAa;AAChD,KAAE,gBAAe;AACjB,YAAS,EAAC;IACX,CACH;EAEA,MAAM,YAAY,mCAChB,+BACC,MAAa;GACZ,MAAM,OAAO,2BAAa,EAAkB;AAC5C,OAAI,MAAM,YAAY,SAAS,KAAK,EAAE;AACpC,MAAE,gBAAe;AACjB,aAAS,EAAC;;IAGhB;AAEA,WAAa,EAIX,YACD,CAAA;;oEAtGqB,wBAAA,EAAA;IAdjB,mBAAI,GAAE;IACN,eAAa,QAAA;IACb,qBAAM,KAAI;IACV,sBAAoB,QAAA;IACpB,8CAAO,GAAE,CAAC,EAAC,UAAA,CAAA;IACX,uBAAM,OAAM;IACZ,wBAAO,QAAO;IACd,8BAAa,cAAa;IAC1B,wBAAO,QAAO;IACd,6BAAY,aAAY;IACxB,6BAAY,aAAY;IACxB,0BAAS,UAAA;;oCAEF,qBAAA,KAAA,QAAA,UAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_trigger_vue_vue_type_script_setup_true_lang = require('./trigger.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/tooltip/src/trigger.vue
var trigger_default = require_trigger_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = trigger_default;
//# sourceMappingURL=trigger2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"trigger2.js","names":[],"sources":["../../../../../../packages/components/tooltip/src/trigger.vue"],"sourcesContent":["<template>\n <el-popper-trigger\n :id=\"id\"\n :virtual-ref=\"virtualRef\"\n :open=\"open\"\n :virtual-triggering=\"virtualTriggering\"\n :class=\"ns.e('trigger')\"\n @blur=\"onBlur\"\n @click=\"onClick\"\n @contextmenu=\"onContextMenu\"\n @focus=\"onFocus\"\n @mouseenter=\"onMouseenter\"\n @mouseleave=\"onMouseleave\"\n @keydown=\"onKeydown\"\n >\n <slot />\n </el-popper-trigger>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, nextTick, ref, toRef, unref } from 'vue'\nimport { ElPopperTrigger } from '@element-plus/components/popper'\nimport {\n composeEventHandlers,\n focusElement,\n getEventCode,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { TOOLTIP_INJECTION_KEY } from './constants'\nimport { whenTrigger } from './utils'\nimport { useTooltipTriggerPropsDefaults } from './trigger'\n\nimport type { UseTooltipTriggerProps } from './trigger'\nimport type { OnlyChildExpose } from '@element-plus/components/slot'\n\ndefineOptions({\n name: 'ElTooltipTrigger',\n})\n\nconst props = withDefaults(\n defineProps<UseTooltipTriggerProps>(),\n useTooltipTriggerPropsDefaults\n)\n\nconst ns = useNamespace('tooltip')\nconst { controlled, id, open, onOpen, onClose, onToggle } = inject(\n TOOLTIP_INJECTION_KEY,\n undefined\n)!\n\nconst triggerRef = ref<OnlyChildExpose | null>(null)\n\nconst stopWhenControlledOrDisabled = () => {\n if (unref(controlled) || props.disabled) {\n return true\n }\n}\nconst trigger = toRef(props, 'trigger')\nconst onMouseenter = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'hover', (e) => {\n onOpen(e)\n\n if (props.focusOnTarget && e.target) {\n nextTick(() => {\n focusElement(e.target as HTMLElement, { preventScroll: true })\n })\n }\n })\n)\nconst onMouseleave = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'hover', onClose)\n)\nconst onClick = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'click', (e) => {\n // distinguish left click\n if ((e as MouseEvent).button === 0) {\n onToggle(e)\n }\n })\n)\n\nconst onFocus = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'focus', onOpen)\n)\n\nconst onBlur = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'focus', onClose)\n)\n\nconst onContextMenu = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'contextmenu', (e: Event) => {\n e.preventDefault()\n onToggle(e)\n })\n)\n\nconst onKeydown = composeEventHandlers(\n stopWhenControlledOrDisabled,\n (e: Event) => {\n const code = getEventCode(e as KeyboardEvent)\n if (props.triggerKeys.includes(code)) {\n e.preventDefault()\n onToggle(e)\n }\n }\n)\n\ndefineExpose({\n /**\n * @description trigger element\n */\n triggerRef,\n})\n</script>\n"],"mappings":""}
+20
View File
@@ -0,0 +1,20 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/tooltip/src/utils.ts
const isTriggerType = (trigger, type) => {
if ((0, _vue_shared.isArray)(trigger)) return trigger.includes(type);
return trigger === type;
};
const whenTrigger = (trigger, type, handler) => {
return (e) => {
isTriggerType((0, vue.unref)(trigger), type) && handler(e);
};
};
//#endregion
exports.isTriggerType = isTriggerType;
exports.whenTrigger = whenTrigger;
//# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
{"version":3,"file":"utils.js","names":[],"sources":["../../../../../../packages/components/tooltip/src/utils.ts"],"sourcesContent":["import { unref } from 'vue'\nimport { isArray } from '@element-plus/utils'\n\nimport type { Arrayable } from '@element-plus/utils'\nimport type { Ref } from 'vue'\nimport type { TooltipTriggerType } from './trigger'\n\nexport const isTriggerType = (\n trigger: Arrayable<TooltipTriggerType>,\n type: TooltipTriggerType\n) => {\n if (isArray(trigger)) {\n return trigger.includes(type)\n }\n return trigger === type\n}\n\nexport const whenTrigger = (\n trigger: Ref<Arrayable<TooltipTriggerType>>,\n type: TooltipTriggerType,\n handler: (e: Event) => void\n) => {\n return (e: Event) => {\n isTriggerType(unref(trigger), type) && handler(e)\n }\n}\n"],"mappings":";;;;;;AAOA,MAAa,iBACX,SACA,SACG;AACH,8BAAY,QAAQ,CAClB,QAAO,QAAQ,SAAS,KAAK;AAE/B,QAAO,YAAY;;AAGrB,MAAa,eACX,SACA,MACA,YACG;AACH,SAAQ,MAAa;AACnB,+BAAoB,QAAQ,EAAE,KAAK,IAAI,QAAQ,EAAE"}
@@ -0,0 +1,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require('../../popper/style/css.js');
require("element-plus/theme-chalk/el-tooltip.css");
@@ -0,0 +1,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require('../../popper/style/index.js');
require("element-plus/theme-chalk/src/tooltip.scss");