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 };
+13
View File
@@ -0,0 +1,13 @@
import { withInstall } from "../../utils/vue/install.mjs";
import { useTooltipContentProps, useTooltipContentPropsDefaults } from "./src/content.mjs";
import { useTooltipTriggerProps, useTooltipTriggerPropsDefaults } from "./src/trigger.mjs";
import { tooltipEmits, useTooltipModelToggle, useTooltipModelToggleEmits, useTooltipModelToggleProps, useTooltipProps } from "./src/tooltip.mjs";
import { TOOLTIP_INJECTION_KEY } from "./src/constants.mjs";
import tooltip_default from "./src/tooltip2.mjs";
//#region ../../packages/components/tooltip/index.ts
const ElTooltip = withInstall(tooltip_default);
//#endregion
export { ElTooltip, ElTooltip as default, TOOLTIP_INJECTION_KEY, tooltipEmits, useTooltipContentProps, useTooltipContentPropsDefaults, useTooltipModelToggle, useTooltipModelToggleEmits, useTooltipModelToggleProps, useTooltipProps, useTooltipTriggerProps, useTooltipTriggerPropsDefaults };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["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,YAA4C,YAAYA,gBAAQ"}
@@ -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,6 @@
//#region ../../packages/components/tooltip/src/constants.ts
const TOOLTIP_INJECTION_KEY = Symbol("elTooltip");
//#endregion
export { TOOLTIP_INJECTION_KEY };
//# sourceMappingURL=constants.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"constants.mjs","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,43 @@
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { teleportProps } from "../../teleport/src/teleport.mjs";
import { useDelayedToggleProps, useDelayedTogglePropsDefaults } from "../../../hooks/use-delayed-toggle/index.mjs";
import { useAriaProps } from "../../../hooks/use-aria/index.mjs";
import { popperContentProps, popperContentPropsDefaults } from "../../popper/src/content.mjs";
//#region ../../packages/components/tooltip/src/content.ts
const useTooltipContentPropsDefaults = {
...useDelayedTogglePropsDefaults,
...popperContentPropsDefaults,
content: "",
visible: null,
teleported: true
};
/**
* @deprecated Removed after 3.0.0, Use `ElTooltipContentProps` instead.
*/
const useTooltipContentProps = buildProps({
...useDelayedToggleProps,
...popperContentProps,
appendTo: { type: teleportProps.to.type },
content: {
type: String,
default: ""
},
rawContent: Boolean,
persistent: Boolean,
visible: {
type: definePropType(Boolean),
default: null
},
transition: String,
teleported: {
type: Boolean,
default: true
},
disabled: Boolean,
...useAriaProps(["ariaLabel"])
});
//#endregion
export { useTooltipContentProps, useTooltipContentPropsDefaults };
//# sourceMappingURL=content.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"content.mjs","names":[],"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,GAAG;CACH,GAAG;CACH,SAAS;CACT,SAAS;CACT,YAAY;CACb;;;;AAKD,MAAa,yBAAyB,WAAW;CAC/C,GAAG;CACH,GAAG;CAIH,UAAU,EACR,MAAM,cAAc,GAAG,MACxB;CAID,SAAS;EACP,MAAM;EACN,SAAS;EACV;CAID,YAAY;CAIZ,YAAY;CAQZ,SAAS;EACP,MAAM,eAA+B,QAAQ;EAC7C,SAAS;EACV;CAID,YAAY;CAIZ,YAAY;EACV,MAAM;EACN,SAAS;EACV;CAID,UAAU;CACV,GAAG,aAAa,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,179 @@
import { focusElement } from "../../../utils/dom/aria.mjs";
import { composeEventHandlers } from "../../../utils/dom/event.mjs";
import { castArray } from "../../../utils/arrays.mjs";
import { ElTeleport } from "../../teleport/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { usePopperContainerId } from "../../../hooks/use-popper-container/index.mjs";
import content_default from "../../popper/src/content2.mjs";
import { useTooltipContentProps } from "./content.mjs";
import { TOOLTIP_INJECTION_KEY } from "./constants.mjs";
import { isTriggerType } from "./utils.mjs";
import { computedEager, onClickOutside } from "@vueuse/core";
import { Transition, computed, createBlock, createCommentVNode, createVNode, defineComponent, inject, mergeProps, onBeforeUnmount, openBlock, ref, renderSlot, unref, vShow, watch, withCtx, withDirectives } from "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__ */ defineComponent({
name: "ElTooltipContent",
inheritAttrs: false,
__name: "content",
props: useTooltipContentProps,
setup(__props, { expose: __expose }) {
const props = __props;
const { selector } = usePopperContainerId();
const ns = useNamespace("tooltip");
const contentRef = ref();
const popperContentRef = computedEager(() => contentRef.value?.popperContentRef);
let stopHandle;
const { controlled, id, open, trigger, onClose, onOpen, onShow, onHide, onBeforeShow, onBeforeHide } = inject(TOOLTIP_INJECTION_KEY, void 0);
const transitionClass = computed(() => {
return props.transition || `${ns.namespace.value}-fade-in-linear`;
});
const persistentRef = computed(() => {
return props.persistent;
});
onBeforeUnmount(() => {
stopHandle?.();
});
const shouldRender = computed(() => {
return unref(persistentRef) ? true : unref(open);
});
const shouldShow = computed(() => {
return props.disabled ? false : unref(open);
});
const appendTo = computed(() => {
return props.appendTo || selector.value;
});
const contentStyle = computed(() => props.style ?? {});
const ariaHidden = ref(true);
const onTransitionLeave = () => {
onHide();
isFocusInsideContent() && focusElement(document.body, { preventScroll: true });
ariaHidden.value = true;
};
const stopWhenControlled = () => {
if (unref(controlled)) return true;
};
const onContentEnter = composeEventHandlers(stopWhenControlled, () => {
if (props.enterable && isTriggerType(unref(trigger), "hover")) onOpen();
});
const onContentLeave = composeEventHandlers(stopWhenControlled, () => {
if (isTriggerType(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);
};
watch(() => unref(open), (val) => {
if (!val) stopHandle?.();
else {
ariaHidden.value = false;
stopHandle = onClickOutside(popperContentRef, () => {
if (unref(controlled)) return;
if (castArray(unref(trigger)).every((item) => {
return item !== "hover" && item !== "focus";
})) onClose();
}, { detectIframe: true });
}
}, { flush: "post" });
__expose({
contentRef,
isFocusInsideContent
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElTeleport), {
disabled: !__props.teleported,
to: appendTo.value
}, {
default: withCtx(() => [shouldRender.value || !ariaHidden.value ? (openBlock(), createBlock(Transition, {
key: 0,
name: transitionClass.value,
appear: !persistentRef.value,
onAfterLeave: onTransitionLeave,
onBeforeEnter,
onAfterEnter: onAfterShow,
onBeforeLeave,
persisted: ""
}, {
default: withCtx(() => [withDirectives(createVNode(unref(content_default), mergeProps({
id: 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: unref(onContentEnter),
onMouseleave: unref(onContentLeave),
onBlur,
onClose: unref(onClose)
}), {
default: withCtx(() => [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"
]), [[vShow, shouldShow.value]])]),
_: 3
}, 8, ["name", "appear"])) : createCommentVNode("v-if", true)]),
_: 3
}, 8, ["disabled", "to"]);
};
}
});
//#endregion
export { content_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=content.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import content_vue_vue_type_script_setup_true_lang_default from "./content.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/tooltip/src/content.vue
var content_default = content_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { content_default as default };
//# sourceMappingURL=content2.mjs.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,36 @@
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
import { createModelToggleComposable } from "../../../hooks/use-model-toggle/index.mjs";
import { popperProps } from "../../popper/src/popper.mjs";
import { popperArrowProps } from "../../popper/src/arrow.mjs";
import { useTooltipContentProps } from "./content.mjs";
import { useTooltipTriggerProps } from "./trigger.mjs";
//#region ../../packages/components/tooltip/src/tooltip.ts
const { useModelToggleProps: useTooltipModelToggleProps, useModelToggleEmits: useTooltipModelToggleEmits, useModelToggle: useTooltipModelToggle } = createModelToggleComposable("visible");
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipProps` instead.
*/
const useTooltipProps = buildProps({
...popperProps,
...useTooltipModelToggleProps,
...useTooltipContentProps,
...useTooltipTriggerProps,
...popperArrowProps,
showArrow: {
type: Boolean,
default: true
}
});
const tooltipEmits = [
...useTooltipModelToggleEmits,
"before-show",
"before-hide",
"show",
"hide",
"open",
"close"
];
//#endregion
export { tooltipEmits, useTooltipModelToggle, useTooltipModelToggleEmits, useTooltipModelToggleProps, useTooltipProps };
//# sourceMappingURL=tooltip.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"tooltip.mjs","names":[],"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,0BACd,4BAA4B,UAAmB;;;;AAkBnD,MAAa,kBAAkB,WAAW;CACxC,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;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,194 @@
import { isBoolean } from "../../../utils/types.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { useId } from "../../../hooks/use-id/index.mjs";
import { usePopperContainer } from "../../../hooks/use-popper-container/index.mjs";
import { useDelayedToggle } from "../../../hooks/use-delayed-toggle/index.mjs";
import arrow_default from "../../popper/src/arrow2.mjs";
import { ElPopper } from "../../popper/index.mjs";
import { tooltipEmits, useTooltipModelToggle, useTooltipProps } from "./tooltip.mjs";
import { TOOLTIP_INJECTION_KEY } from "./constants.mjs";
import trigger_default from "./trigger2.mjs";
import content_default from "./content2.mjs";
import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, onBeforeUnmount, onDeactivated, openBlock, provide, readonly, ref, renderSlot, toDisplayString, toRef, unref, watch, withCtx } from "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__ */ defineComponent({
name: "ElTooltip",
__name: "tooltip",
props: useTooltipProps,
emits: tooltipEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
usePopperContainer();
const ns = useNamespace("tooltip");
const id = useId();
const popperRef = ref();
const contentRef = ref();
const updatePopper = () => {
const popperComponent = unref(popperRef);
if (popperComponent) popperComponent.popperInstanceRef?.update();
};
const open = ref(false);
const toggleReason = ref();
const { show, hide, hasUpdateHandler } = useTooltipModelToggle({
indicator: open,
toggleReason
});
const { onOpen, onClose } = useDelayedToggle({
showAfter: toRef(props, "showAfter"),
hideAfter: toRef(props, "hideAfter"),
autoClose: toRef(props, "autoClose"),
open: show,
close: hide
});
const controlled = computed(() => isBoolean(props.visible) && !hasUpdateHandler.value);
const kls = computed(() => {
return [ns.b(), props.popperClass];
});
provide(TOOLTIP_INJECTION_KEY, {
controlled,
id,
open: readonly(open),
trigger: toRef(props, "trigger"),
onOpen,
onClose,
onToggle: (event) => {
if (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
});
watch(() => props.disabled, (disabled) => {
if (disabled && open.value) open.value = false;
if (!disabled && isBoolean(props.visible)) open.value = props.visible;
});
const isFocusInsideContent = (event) => {
return contentRef.value?.isFocusInsideContent(event);
};
onDeactivated(() => open.value && hide());
onBeforeUnmount(() => {
toggleReason.value = void 0;
});
__expose({
popperRef,
contentRef,
isFocusInsideContent,
updatePopper,
onOpen,
onClose,
hide
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElPopper), {
ref_key: "popperRef",
ref: popperRef,
role: __props.role
}, {
default: withCtx(() => [createVNode(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: withCtx(() => [_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)]),
_: 3
}, 8, [
"disabled",
"trigger",
"trigger-keys",
"virtual-ref",
"virtual-triggering",
"focus-on-target"
]), createVNode(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: withCtx(() => [renderSlot(_ctx.$slots, "content", {}, () => [__props.rawContent ? (openBlock(), createElementBlock("span", {
key: 0,
innerHTML: __props.content
}, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.content), 1))]), __props.showArrow ? (openBlock(), createBlock(unref(arrow_default), { key: 0 })) : 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
export { tooltip_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=tooltip.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import tooltip_vue_vue_type_script_setup_true_lang_default from "./tooltip.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/tooltip/src/tooltip.vue
var tooltip_default = tooltip_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { tooltip_default as default };
//# sourceMappingURL=tooltip2.mjs.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,37 @@
import { EVENT_CODE } from "../../../constants/aria.mjs";
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { popperTriggerProps } from "../../popper/src/trigger.mjs";
//#region ../../packages/components/tooltip/src/trigger.ts
const useTooltipTriggerPropsDefaults = {
trigger: "hover",
triggerKeys: () => [
EVENT_CODE.enter,
EVENT_CODE.numpadEnter,
EVENT_CODE.space
]
};
/**
* @deprecated Removed after 3.0.0, Use `UseTooltipTriggerProps` instead.
*/
const useTooltipTriggerProps = buildProps({
...popperTriggerProps,
disabled: Boolean,
trigger: {
type: definePropType([String, Array]),
default: "hover"
},
triggerKeys: {
type: definePropType(Array),
default: () => [
EVENT_CODE.enter,
EVENT_CODE.numpadEnter,
EVENT_CODE.space
]
},
focusOnTarget: Boolean
});
//#endregion
export { useTooltipTriggerProps, useTooltipTriggerPropsDefaults };
//# sourceMappingURL=trigger.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"trigger.mjs","names":[],"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;EACjB,WAAW;EACX,WAAW;EACX,WAAW;EACZ;CACF;;;;AAKD,MAAa,yBAAyB,WAAW;CAC/C,GAAG;CAIH,UAAU;CAIV,SAAS;EACP,MAAM,eAA8C,CAAC,QAAQ,MAAM,CAAC;EACpE,SAAS;EACV;CAID,aAAa;EACX,MAAM,eAAyB,MAAM;EACrC,eAAe;GAAC,WAAW;GAAO,WAAW;GAAa,WAAW;GAAM;EAC5E;CAID,eAAe;CAChB,CAAU"}
@@ -0,0 +1,85 @@
import { focusElement } from "../../../utils/dom/aria.mjs";
import { composeEventHandlers, getEventCode } from "../../../utils/dom/event.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import trigger_default from "../../popper/src/trigger2.mjs";
import { useTooltipTriggerProps } from "./trigger.mjs";
import { TOOLTIP_INJECTION_KEY } from "./constants.mjs";
import { whenTrigger } from "./utils.mjs";
import { createBlock, defineComponent, inject, nextTick, normalizeClass, openBlock, ref, renderSlot, toRef, unref, withCtx } from "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__ */ defineComponent({
name: "ElTooltipTrigger",
__name: "trigger",
props: useTooltipTriggerProps,
setup(__props, { expose: __expose }) {
const props = __props;
const ns = useNamespace("tooltip");
const { controlled, id, open, onOpen, onClose, onToggle } = inject(TOOLTIP_INJECTION_KEY, void 0);
const triggerRef = ref(null);
const stopWhenControlledOrDisabled = () => {
if (unref(controlled) || props.disabled) return true;
};
const trigger = toRef(props, "trigger");
const onMouseenter = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", (e) => {
onOpen(e);
if (props.focusOnTarget && e.target) nextTick(() => {
focusElement(e.target, { preventScroll: true });
});
}));
const onMouseleave = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", onClose));
const onClick = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "click", (e) => {
if (e.button === 0) onToggle(e);
}));
const onFocus = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onOpen));
const onBlur = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onClose));
const onContextMenu = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "contextmenu", (e) => {
e.preventDefault();
onToggle(e);
}));
const onKeydown = composeEventHandlers(stopWhenControlledOrDisabled, (e) => {
const code = getEventCode(e);
if (props.triggerKeys.includes(code)) {
e.preventDefault();
onToggle(e);
}
});
__expose({ triggerRef });
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(trigger_default), {
id: unref(id),
"virtual-ref": __props.virtualRef,
open: unref(open),
"virtual-triggering": __props.virtualTriggering,
class: normalizeClass(unref(ns).e("trigger")),
onBlur: unref(onBlur),
onClick: unref(onClick),
onContextmenu: unref(onContextMenu),
onFocus: unref(onFocus),
onMouseenter: unref(onMouseenter),
onMouseleave: unref(onMouseleave),
onKeydown: unref(onKeydown)
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 8, [
"id",
"virtual-ref",
"open",
"virtual-triggering",
"class",
"onBlur",
"onClick",
"onContextmenu",
"onFocus",
"onMouseenter",
"onMouseleave",
"onKeydown"
]);
};
}
});
//#endregion
export { trigger_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=trigger.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"trigger.vue_vue_type_script_setup_true_lang.mjs","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,aAAa,UAAS;EACjC,MAAM,EAAE,YAAY,IAAI,MAAM,QAAQ,SAAS,aAAa,OAC1D,uBACA,OACD;EAED,MAAM,aAAa,IAA4B,KAAI;EAEnD,MAAM,qCAAqC;AACzC,OAAI,MAAM,WAAW,IAAI,MAAM,SAC7B,QAAO;;EAGX,MAAM,UAAU,MAAM,OAAO,UAAS;EACtC,MAAM,eAAe,qBACnB,8BACA,YAAY,SAAS,UAAU,MAAM;AACnC,UAAO,EAAC;AAER,OAAI,MAAM,iBAAiB,EAAE,OAC3B,gBAAe;AACb,iBAAa,EAAE,QAAuB,EAAE,eAAe,MAAM,CAAA;KAC9D;IAEJ,CACH;EACA,MAAM,eAAe,qBACnB,8BACA,YAAY,SAAS,SAAS,QAAO,CACvC;EACA,MAAM,UAAU,qBACd,8BACA,YAAY,SAAS,UAAU,MAAM;AAEnC,OAAK,EAAiB,WAAW,EAC/B,UAAS,EAAC;IAEb,CACH;EAEA,MAAM,UAAU,qBACd,8BACA,YAAY,SAAS,SAAS,OAAM,CACtC;EAEA,MAAM,SAAS,qBACb,8BACA,YAAY,SAAS,SAAS,QAAO,CACvC;EAEA,MAAM,gBAAgB,qBACpB,8BACA,YAAY,SAAS,gBAAgB,MAAa;AAChD,KAAE,gBAAe;AACjB,YAAS,EAAC;IACX,CACH;EAEA,MAAM,YAAY,qBAChB,+BACC,MAAa;GACZ,MAAM,OAAO,aAAa,EAAkB;AAC5C,OAAI,MAAM,YAAY,SAAS,KAAK,EAAE;AACpC,MAAE,gBAAe;AACjB,aAAS,EAAC;;IAGhB;AAEA,WAAa,EAIX,YACD,CAAA;;uBArHC,YAeoB,MAAA,gBAAA,EAAA;IAdjB,IAAI,MAAA,GAAE;IACN,eAAa,QAAA;IACb,MAAM,MAAA,KAAI;IACV,sBAAoB,QAAA;IACpB,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,UAAA,CAAA;IACX,QAAM,MAAA,OAAM;IACZ,SAAO,MAAA,QAAO;IACd,eAAa,MAAA,cAAa;IAC1B,SAAO,MAAA,QAAO;IACd,cAAY,MAAA,aAAY;IACxB,cAAY,MAAA,aAAY;IACxB,WAAS,MAAA,UAAA;;2BAEF,CAAR,WAAQ,KAAA,QAAA,UAAA"}
@@ -0,0 +1,8 @@
import trigger_vue_vue_type_script_setup_true_lang_default from "./trigger.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/tooltip/src/trigger.vue
var trigger_default = trigger_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { trigger_default as default };
//# sourceMappingURL=trigger2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"trigger2.mjs","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":""}
+17
View File
@@ -0,0 +1,17 @@
import { isArray } from "../../../utils/types.mjs";
import { unref } from "vue";
//#region ../../packages/components/tooltip/src/utils.ts
const isTriggerType = (trigger, type) => {
if (isArray(trigger)) return trigger.includes(type);
return trigger === type;
};
const whenTrigger = (trigger, type, handler) => {
return (e) => {
isTriggerType(unref(trigger), type) && handler(e);
};
};
//#endregion
export { isTriggerType, whenTrigger };
//# sourceMappingURL=utils.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"utils.mjs","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,KAAI,QAAQ,QAAQ,CAClB,QAAO,QAAQ,SAAS,KAAK;AAE/B,QAAO,YAAY;;AAGrB,MAAa,eACX,SACA,MACA,YACG;AACH,SAAQ,MAAa;AACnB,gBAAc,MAAM,QAAQ,EAAE,KAAK,IAAI,QAAQ,EAAE"}
@@ -0,0 +1,3 @@
import "../../base/style/css.mjs";
import "../../popper/style/css.mjs";
import "element-plus/theme-chalk/el-tooltip.css";
@@ -0,0 +1,3 @@
import "../../base/style/index.mjs";
import "../../popper/style/index.mjs";
import "element-plus/theme-chalk/src/tooltip.scss";